总体分析 试题分析

src/pages/ksfx/sjfx_kgtfx.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="sjfx_kgtfx">
+    <NavHeader />
+    <bread-crumb />
+
+    <div class="w-1200px m-auto flex flex-row justify-between">
+      <div class="w-188px">
+        <leftSider />
+      </div>
+
+      <div class="w-1012px p-4 blueBg">
+
+        <div class="flex mt-20px items-center">
+
+          <el-select class="mr-10px" v-model="normal_subject" placeholder="请选择题目" size="large">
+            <el-option label="全部" value="0" />
+            <el-option v-for="item in subject_list" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+
+          <el-select class="mr-10px" v-model="normal_school" placeholder="请选择学校" size="large">
+            <el-option label="全部" value="0" />
+            <el-option v-for="item in school_list" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+
+
+        </div>
+
+
+        <div class="h-auto mt-20px">
+
+          <div class="normalTit">
+            <span>客观题分析</span>
+          </div>
+          <div class="mt-4 exportBtn" style="text-align: right;">
+            <el-button color="#003eee" type="primary" size="large" @click="openDialog">详情</el-button>
+        </div>
+          <div class="w-full h-388px flex">
+            <div class=" w-1/2 h-full left_chart"  id="barChart"></div>
+            <div class=" w-1/2 h-full right_chart" id="circleChart"></div>
+          </div>
+
+
+        </div>
+
+      </div>
+
+    </div>
+
+    <commonFooter />
+
+      <!-- dialog  -->
+      <el-dialog v-model="dialogTableVisible" title="" style="width: 90%;">
+       <div class="mainShow">
+          <div class="mainShow_single" v-for="(item,index) in dialogArr " :key="index">
+            <p>{{ item.option }}<span>({{ item.stuNum }})</span>人：</p>
+            <ul class="flex flex-wrap">
+              <li v-for="(secItem,secIndex) in item.detail" :key="secIndex">
+                <span>{{secItem.stuSchool  }}</span>
+                <span>{{ secItem.classRomm }}</span>
+                <span>{{ secItem.stuName }}</span>
+              </li>
+            </ul>
+          </div>
+       </div>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" color="#003eee" @click="dialogTableVisible = false">关闭</el-button>
+          </span>
+        </template>
+      </el-dialog>
+
+  </div>
+</template>
+<route lang="json">
+{
+  "meta": {
+    "title": "考试分析",
+    "breadcrumb": true
+  }
+}
+</route>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
+
+import { Calendar, Search } from '@element-plus/icons-vue';
+
+import { useRouter } from "vue-router";
+import { skeletonProps } from 'element-plus';
+const router = useRouter();
+
+
+let normal_subject = $ref("");
+let normal_school = $ref("");
+let normal_teacher = $ref("");
+
+let subject_list = [{
+  value: '1',
+  label: '语文'
+}, {
+  value: '2',
+  label: '数学'
+}]
+
+
+let school_list = [{
+  value: '1',
+  label: '学校1'
+}, {
+  value: '2',
+  label: '学校2'
+}]
+
+
+
+
+onMounted(() => {
+  initbarChart();
+  initcircleChart();
+
+})
+const initbarChart = () => {
+  var myChart = echarts.init(document.getElementById('barChart'));
+  myChart.setOption({
+    title: {
+      text: '人数',
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      data: ['选项A', '选项B', '选项C', '选项D']
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+    },
+    series: [
+      {
+        type: 'bar',
+        barWidth: '40',
+        itemStyle: {
+          normal: {
+            barBorderRadius: [20, 20, 0, 0],
+            color: '#6897FF',
+            label: {
+              show: true, //开启显示
+              position: 'top', //在上方显示
+              textStyle: { //数值样式
+                color: 'black',
+                fontSize: 16
+              }
+            }
+          }
+        },
+        data: [120,200,200,150],
+      }
+    ]
+  });
+}
+const initcircleChart = () => {
+  var myChart = echarts.init(document.getElementById('circleChart'));
+  myChart.setOption({
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 40,
+    icon: "circle",
+    orient: 'vertical',
+    textStyle: {
+      fontSize: 12,
+      color: '#171721'
+    },
+    x: 'right',
+    y: 'center'
+  },
+  series: [
+    {
+      name: '客观题分析',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: '选项A' },
+        { value: 735, name: '选项B' },
+        { value: 580, name: '选项C' },
+        { value: 484, name: '选项D' },
+      ]
+    }
+  ]
+});
+}
+
+const dialogTableVisible = ref(false)
+const openDialog = () => {
+  dialogTableVisible.value = true;
+}
+
+
+
+let classArr = [
+  "学校",
+  "平均分",
+  "总均分",
+  "均分差离",
+];
+
+let classBaseInfoArr = [
+  {
+    xx: "临沂市蒙阴县乡镇小学",
+    pjf: 12,
+    zjf: 12,
+    jflc: 1,
+  },
+  {
+    xx: "临沂市蒙阴县乡镇小学",
+    pjf: 12,
+    zjf: 12,
+    jflc: 1,
+  },
+  {
+    xx: "临沂市蒙阴县乡镇小学",
+    pjf: 12,
+    zjf: 12,
+    jflc: 1,
+  },
+  {
+    xx: "临沂市蒙阴县乡镇小学",
+    pjf: 12,
+    zjf: 12,
+    jflc: 1,
+  },
+];
+
+
+
+
+let dialogArr = [
+  {
+    option: "选项A",
+    stuNum: 23,
+    detail: [
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      }
+    ]
+  },
+  {
+    option: "选项B",
+    stuNum: 23,
+    detail: [
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      }
+    ]
+  },
+  {
+    option: "选项C",
+    stuNum: 23,
+    detail: [
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      }
+    ]
+  },
+  {
+    option: "选项D",
+    stuNum: 23,
+    detail: [
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },
+      {
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      },{
+        stuSchool: "苏州小学",
+        classRomm: "初一（2）班",
+        stuName:"张大大",
+      }
+    ]
+  }
+]
+
+</script>
+
+
+<style lang="scss" scoped>
+@import '@/styles/ksfx.css';
+
+</style>

src/pages/ksfx/sjfx_ztfx.vue

@@ -292,104 +292,6 @@ const tableData = [
 
 
 <style lang="scss" scoped>
-::v-deep .el-sub-menu__title {
-  background: #003eee;
-  color: #fff;
-}
-
-::v-deep .el-table__header thead tr th {
-  background: #003eee !important;
-  color: #fff;
-  height: 50px;
-  line-height: 50px;
-  font-weight: normal;
-}
-
-::v-deep .el-table__header thead tr th:first-child {
-  border-top-left-radius: 9px;
-}
-
-::v-deep .el-table__body tbody .el-table__row td {
-  background-color: transparent;
-}
-
-::v-deep .el-dialog__footer {
-  text-align: center;
-}
-.normalTit{
-  width: 158px;
-  height: 42px;
-  margin: 0 auto 10px auto;
-  background: #ffffff;
-  border: 1px solid #dbe7ec;
-  border-radius: 6px;
-  box-sizing: border-box;
-  padding:9px 6px;
-  text-align: center;
-  span{
-    font-size: 16px;
-    font-family: PingFang SC, PingFang SC-Medium;
-    font-weight: 500;
-    color: #000000;
-    background: #e2eaf9;
-    border-radius: 4px;
-    padding: 5px 15px;
-  }
-}
-.marstReview{
-  border-bottom: 1px solid #dee8ff;
-}
-.blueBg {
-  background: #F1F7FF;
-}
-
-.whiteBG {
-  background: #fff;
-}
-
-.singlepart {
-  background-color: rgba($color: #ffffff, $alpha: 0.2);
-  color: #fff;
-}
-
-.tableList {
-  overflow-x: scroll;
-}
-
-.tableList_title {
-  font-size: 14px;
-  color: #fff;
-}
-
-.singleT {
-  flex: 1;
-  font-size: 14px;
-  line-height: 50px;
-  width: fit-content;
-  text-align: center;
-  background: #003eee;
-}
-
-.singleT:first-child {
-  border-top-left-radius: 5px;
-}
-
-.singleT:last-child {
-  border-top-right-radius: 5px;
-}
-
-.singleD {
-  flex: 1;
-}
-
-.singleTSec {
-  width: fit-content;
-  flex: 1;
-  line-height: 60px;
-  text-align: center;
-}
+@import '@/styles/ksfx.css';
 
-.singleTSecDif {
-  background-color: #fff;
-}
 </style>

src/styles/ksfx.css

@@ -0,0 +1,161 @@
+::v-deep .el-sub-menu__title {
+  background: #003eee;
+  color: #fff;
+}
+
+::v-deep .el-table__header thead tr th {
+  background: #003eee !important;
+  color: #fff;
+  height: 50px;
+  line-height: 50px;
+  font-weight: normal;
+}
+
+::v-deep .el-table__header thead tr th:first-child {
+  border-top-left-radius: 9px;
+}
+
+::v-deep .el-table__body tbody .el-table__row td {
+  background-color: transparent;
+}
+
+::v-deep .el-dialog__footer {
+  text-align: center;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.normalTit{
+  width: 158px;
+  height: 42px;
+  margin: 0 auto 10px auto;
+  background: #ffffff;
+  border: 1px solid #dbe7ec;
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding:9px 6px;
+  text-align: center;
+  span{
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: 500;
+    color: #000000;
+    background: #e2eaf9;
+    border-radius: 4px;
+    padding: 5px 15px;
+  }
+}
+.marstReview{
+  border-bottom: 1px solid #dee8ff;
+}
+.blueBg {
+  background: #F1F7FF;
+}
+
+.whiteBG {
+  background: #fff;
+}
+
+.singlepart {
+  background-color: rgba($color: #ffffff, $alpha: 0.2);
+  color: #fff;
+}
+
+.tableList {
+  overflow-x: scroll;
+}
+
+.tableList_title {
+  font-size: 14px;
+  color: #fff;
+}
+
+.singleT {
+  flex: 1;
+  font-size: 14px;
+  line-height: 50px;
+  width: fit-content;
+  text-align: center;
+  background: #003eee;
+}
+
+.singleT:first-child {
+  border-top-left-radius: 5px;
+}
+
+.singleT:last-child {
+  border-top-right-radius: 5px;
+}
+
+.singleD {
+  flex: 1;
+}
+
+.singleTSec {
+  width: fit-content;
+  flex: 1;
+  line-height: 60px;
+  text-align: center;
+}
+
+.singleTSecDif {
+  background-color: #fff;
+  border-right: 1px solid #dee8ff;
+}
+.left_chart{
+  border-right: 1px solid #dee8ff;
+}
+.left_chart,right_chart{
+   width: fit-content;
+  flex: 1;
+}
+
+.mainShow_single {
+  margin-bottom:30px;
+}
+.mainShow_single:last-child {
+  margin-bottom:0!important;
+}
+.mainShow_single p{
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: bold;
+  text-align: left;
+  color: #000000;
+  letter-spacing: -0.01px;
+  margin-bottom:10px;
+}
+.mainShow_single ul{
+  display:flex;
+}
+.mainShow_single ul li{
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #000000;
+  letter-spacing: -0.01px;
+  margin-right:10px;
+  margin-bottom: 10px;
+  border: 1px dashed #414141;
+  padding: 5px;
+}
+.mainShow_single ul li span{
+  margin-right: 5px;
+}