'学生端修改'

src/components/AnalyseModule copy/components/BarChart.vue

+<!--  -->
+<template>
+  <div class="chart_container" :id="chart_id"></div>
+</template>
+
+<script>
+
+export default {
+  props: ['chart_data', 'chart_id'],
+  data() {
+    return {
+    };
+  },
+
+  components: {},
+
+  computed: {},
+  created() {
+  },
+  mounted() {
+    this.initChart();
+  },
+
+  methods: {
+    initChart() {
+      let series = this.changData(this.chart_data);
+      let legend_data = this.chart_data.labers.map(item => {
+        return item.key
+      })
+
+      let dom = document.getElementById(`${this.chart_id}`);
+      let myChart = this.$echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false
+      });
+      let option;
+      option = {
+        color: ['#cd9f50', '#47afa0', '#bcdfdc'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          // data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+          // data: legend_data,
+          formatter: (name) => {
+            let objs = this.chart_data.labers.filter(itme => {
+              return itme.key == name;
+            })
+            return objs[0].label
+          }
+        },
+        toolbox: {
+          show: false,
+          orient: 'vertical',
+          left: 'right',
+          top: 'center',
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar', 'stack'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            // data: ['2012', '2013', '2014', '2015', '2016']
+            data: this.chart_data.keys
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        // series: [
+        //   {
+        //     name: 'Forest',
+        //     type: 'bar',
+        //     barGap: 0,
+        //     // label: labelOption,
+        //     emphasis: {
+        //       focus: 'series'
+        //     },
+        //     data: [320, 332, 301, 334, 390]
+        //   },
+        //   {
+        //     name: 'Steppe',
+        //     type: 'bar',
+        //     // label: labelOption,
+        //     emphasis: {
+        //       focus: 'series'
+        //     },
+        //     data: [220, 182, 191, 234, 290]
+        //   },
+        //   {
+        //     name: 'Desert',
+        //     type: 'bar',
+        //     // label: labelOption,
+        //     emphasis: {
+        //       focus: 'series'
+        //     },
+        //     data: [150, 232, 201, 154, 190]
+        //   },
+        //   {
+        //     name: 'Wetland',
+        //     type: 'bar',
+        //     // label: labelOption,
+        //     emphasis: {
+        //       focus: 'series'
+        //     },
+        //     data: [98, 77, 101, 99, 40]
+        //   }
+        // ]
+        series: series
+      };
+
+
+      if (option && typeof option === 'object') {
+        myChart.setOption(option);
+      }
+
+      window.addEventListener('resize', myChart.resize);
+    },
+    //处理数据
+    changData(data) {
+      let list = [];
+      data.labers.forEach((item, index) => {
+        let obj = {
+          name: item.key,
+          type: 'bar',
+          barGap: 0,
+          emphasis: {
+            focus: 'series'
+          },
+          data: []
+        }
+        data.keys.forEach(element => {
+          obj.data.push(data.raw_data[element][item.key]);
+        });
+        list.push(obj)
+      });
+      return list
+    },
+  }
+}
+
+</script>
+<style scoped>
+.chart_container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/AnalyseModule copy/components/EyeStabilityTable.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-21 10:14:46
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\components\EyeStabilityTable.vue
+-->
+<!--  -->
+<template>
+  <div class="container_box">
+    <table class="table_box">
+      <tr>
+        <th v-for="(e, i) in labers" :key="i">{{ e.label }}</th>
+      </tr>
+      <tr v-for="(item, index) in table_data" :key="index">
+        <td v-for="(e, i) in labers" :key="i">
+          <div v-if="typeof item[e.key] === 'object'">
+            <el-popover placement="top-start" width="200" trigger="hover">
+              <div>
+                <el-form label-width="80px">
+
+                  <el-form-item label="正确数据: ">
+                    <span v-for="(o, b) in item[e.key].exactness.value">{{ o
+                    }},</span>
+                  </el-form-item>
+                  <el-form-item label="错误数据: ">
+                    <span v-for="(o, b) in item[e.key].wrong.value">{{ o }},</span>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <el-button slot="reference" type="text" size="mini">{{ item[e.key].accuracy.value }}</el-button>
+            </el-popover>
+          </div>
+          <div v-else>{{ item[e.key] }}</div>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['table_data', 'labers'],
+  data() {
+    return {
+    };
+  },
+
+  components: {},
+
+  computed: {},
+  created() {
+
+  },
+  mounted() { },
+
+  methods: {
+
+    test(item) {
+      console.log('判断对象');
+      console.log(item);
+      console.log(typeof item == 'object');
+    },
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.container_box {
+  width: 100%;
+  height: 100%;
+}
+
+.table_box {
+  width: 100%;
+  // min-height: 100%;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #E4E7ED;
+  border-left: 1px solid #E4E7ED;
+  border-collapse: collapse;
+
+  th,
+  td {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    border-bottom: 1px solid #E4E7ED;
+    border-right: 1px solid #E4E7ED;
+  }
+
+  th {
+    padding: 15px 0;
+    color: #909399;
+  }
+
+  td {
+    padding: 5px 0;
+    color: #303133;
+  }
+}
+</style>

src/components/AnalyseModule copy/components/LineChart.vue

+<!--  -->
+<template>
+  <div class="chart_container" :id="chart_id"></div>
+</template>
+
+<script>
+export default {
+  props: ['chart_data', 'chart_id'],
+  data() {
+    return {
+    };
+  },
+
+  components: {},
+
+  computed: {},
+
+  mounted() {
+    this.initChart();
+  },
+
+  methods: {
+    initChart() {
+      let dom = document.getElementById(`${this.chart_id}`);
+      let myChart = this.$echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false
+      });
+      let app = {};
+
+      let option;
+
+      option = {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true,
+            areaStyle: {}
+          },
+          {
+            data: [1290, 1330, 1320, 820, 932, 901, 934,],
+            type: 'line',
+            smooth: true,
+            areaStyle: {}
+          },
+        ]
+      };
+
+      if (option && typeof option === 'object') {
+        myChart.setOption(option);
+      }
+      window.addEventListener('resize', myChart.resize);
+    },
+  }
+}
+
+</script>
+<style scoped>
+.chart_container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/AnalyseModule copy/components/SimpleTable.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-21 10:14:46
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\components\SimpleTable.vue
+-->
+<!--  -->
+<template>
+  <div class="container_box">
+    <table class="table_box">
+      <!-- <tr>
+              <th v-for="(e, i) in labers" :key="i">{{ e.label }}</th>
+            </tr> -->
+      <tr v-for="(item, index) in table_data.labers" :key="index">
+        <th>{{ item.label }}</th>
+        <th>{{ table_data.data[item.key] }}</th>
+        <th></th>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['table_data',],
+  data() {
+    return {
+    };
+  },
+
+  components: {},
+
+  computed: {},
+  created() {
+  },
+  mounted() { },
+
+  methods: {}
+}
+
+</script>
+<style lang="scss" scoped>
+.container_box {
+  width: 100%;
+  height: 100%;
+}
+
+.table_box {
+  width: 100%;
+  min-height: 100%;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #E4E7ED;
+  border-left: 1px solid #E4E7ED;
+  border-collapse: collapse;
+
+  th,
+  td {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    border-bottom: 1px solid #E4E7ED;
+    border-right: 1px solid #E4E7ED;
+  }
+
+  th {
+    color: #909399;
+  }
+
+  td {
+    color: #303133;
+  }
+}
+</style>

src/components/AnalyseModule copy/components/table.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-21 10:14:46
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\components\table.vue
+-->
+<!--  -->
+<template>
+  <div class="container_box">
+    <table class="table_box">
+      <tr>
+        <th v-for="(e, i) in labers" :key="i">{{ e.label }}</th>
+      </tr>
+      <tr v-for="(item, index) in table_data" :key="index">
+        <td v-for="(e, i) in labers" :key="i">
+          <div v-if="e.key == 'distribute'">
+            <div v-if="item['distribute'].length > 3">
+              <el-popover placement="right" title="标题" width="200" trigger="click">
+                <div v-for="(h, key, j) in item['distribute']" :key="j">
+                  {{ key }}({{ item['distribute'][key] }}人)
+                </div>
+                <el-button slot="reference" type="text" size="mini">...</el-button>
+              </el-popover>
+            </div>
+            <div v-else>
+              <div v-for="(h, key, j) in item['distribute']" :key="j">
+                {{ key }}({{ item['distribute'][key] }}人)，
+              </div>
+            </div>
+          </div>
+          <div v-else-if="Array.isArray(item[e.key])">
+            <el-popover placement="right" width="200" trigger="click" v-if="item[e.key].length > 0">
+              <div v-for="(h, j) in item[e.key]" :key="j">
+                {{ h }}
+              </div>
+              <el-button slot="reference" type="text" size="mini">...</el-button>
+            </el-popover>
+          </div>
+          <div v-else>{{ item[e.key] }}</div>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['table_data', 'labers'],
+  data() {
+    return {
+    };
+  },
+
+  components: {},
+
+  computed: {},
+
+  mounted() { },
+
+  methods: {}
+}
+
+</script>
+<style lang="scss" scoped>
+.container_box {
+  width: 100%;
+  height: 100%;
+}
+
+.table_box {
+  width: 100%;
+  // min-height: 100%;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #E4E7ED;
+  border-left: 1px solid #E4E7ED;
+  border-collapse: collapse;
+
+  th,
+  td {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    border-bottom: 1px solid #E4E7ED;
+    border-right: 1px solid #E4E7ED;
+  }
+
+  th {
+    padding: 15px 0;
+    color: #909399;
+  }
+
+  td {
+    padding: 5px 0;
+    color: #303133;
+  }
+}
+</style>

src/components/AnalyseModule copy/index.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-20 16:02:07
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\index.vue
+-->
+<!--
+ * @Author: czj
+ * @Date: 2023-03-20 16:02:07
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\index.vue
+-->
+<!--  -->
+<template>
+  <div class="analyse_container" :style="{ '--color': original_data.color }">
+    <div class="header_box">
+      <el-row>
+        <el-col :span="12">
+          <div class="title_box" :title="original_data.title"> {{ original_data.title }}</div>
+        </el-col>
+        <el-col :span="12" style="text-align: right;">
+          <el-checkbox v-if="original_data.is_show" v-model="original_data.is_show.value" @change="changeSelect">{{
+            original_data.is_show.value ? '显示' : '隐藏'
+          }}</el-checkbox>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="content_container" v-if="original_data.type == 'table'">
+      <Table :table_data="original_data.list" :labers="original_data.labers"></Table>
+    </div>
+    <div class="content_container" v-if="false">
+      <line-chart :chart_data="original_data.data" :chart_id="original_data.chart_id"></line-chart>
+    </div>
+    <div class="content_container" v-if="original_data.type == 'bar'">
+      <bar-chart
+        :chart_data="{ raw_data: original_data.raw_data, keys: original_data.keys, labers: original_data.labers }"
+        :chart_id="original_data.chart_id"></bar-chart>
+    </div>
+    <div class="content_container" v-if="original_data.type == 'simple_table'">
+      <simple-table :table_data="original_data"></simple-table>
+    </div>
+    <!-- 眼光稳定性 -->
+    <div class="content_container" v-if="original_data.type == 'eye_stability_table'">
+      <eye-stability-table :table_data="original_data.list" :labers="original_data.labers"></eye-stability-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from './components/table';
+import LineChart from './components/LineChart.vue';
+import BarChart from './components/BarChart.vue';
+import SimpleTable from './components/SimpleTable.vue';
+import EyeStabilityTable from './components/EyeStabilityTable.vue';
+export default {
+  props: ['module_data'],
+  data() {
+    return {
+      original_data: {},
+    };
+  },
+
+  components: { Table, LineChart, BarChart, SimpleTable, EyeStabilityTable },
+
+  computed: {},
+  created() {
+    this.original_data = { ...this.module_data };
+  },
+  mounted() {
+  },
+
+  methods: {
+    //选择框监听
+    changeSelect() {
+      this.$emit('changeSelect', this.original_data.is_show);
+    },
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.analyse_container {
+  border-radius: 6px;
+  border: 1px solid var(--color);
+  overflow: hidden;
+
+  .header_box {
+    height: 40px;
+    line-height: 40px;
+    background-color: var(--color);
+    padding: 0 10px;
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .content_container {
+    width: 100%;
+    height: 285px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+  }
+}
+
+.title_box {
+  overflow: hidden; //超出的文本隐藏
+  text-overflow: ellipsis; //溢出用省略号显示
+  white-space: nowrap; // 默认不换行；
+}
+</style>

src/components/AnalyseModule/components/BarChart.vue

+<script>
+/**
+ * @Author: AnthonyD
+ * @Date:   2023-03-28 15:25:05
+ * @Last Modified by:   AnthonyD
+ * @Last Modified time: 2023-03-29 19:15:23
+ */
+</script><!--  -->
+<template>
+  <div class="chart_container" :id="chart_id"></div>
+</template>
+
+<script>
+export default {
+  props: ['chart_data', 'chart_id'],
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  computed: {},
+  created() {
+    console.log('图标数据');
+    console.log(this.chart_data);
+  },
+  mounted() {
+    this.initChart();
+  },
+
+  methods: {
+    initChart() {
+      let series = this.changData(this.chart_data);
+      let legend_data = this.chart_data.labers.map((item) => {
+        return item.key;
+      });
+      let _that = this;
+      let dom = document.getElementById(`${this.chart_id}`);
+      let myChart = this.$echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false,
+      });
+      let option;
+      option = {
+        color: ['#cd9f50', '#47afa0', '#bcdfdc'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+          formatter: function (params) {
+            console.log(params);
+            let html = '';
+            _that.chart_data.labers.forEach((e, i) => {
+              html += `<p>
+                <span>${e.label}</span>
+                <span>${params[i].value}</span>
+              </p>`;
+            });
+            return html;
+          },
+        },
+        legend: {
+          formatter: (name) => {
+            let objs = this.chart_data.labers.filter((itme) => {
+              return itme.key == name;
+            });
+            return objs[0].label;
+          },
+        },
+        toolbox: {
+          show: false,
+          orient: 'vertical',
+          left: 'right',
+          top: 'center',
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar', 'stack'] },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            // data: ['2012', '2013', '2014', '2015', '2016']
+            data: this.chart_data.keys,
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+        ],
+
+        series: series,
+      };
+
+      if (option && typeof option === 'object') {
+        myChart.setOption(option);
+      }
+
+      window.addEventListener('resize', myChart.resize);
+    },
+    //处理数据
+    changData(data) {
+      let list = [];
+      data.labers.forEach((item, index) => {
+        let obj = {
+          name: item.key,
+          type: 'bar',
+          barGap: 0,
+          emphasis: {
+            focus: 'series',
+          },
+          data: [],
+        };
+        data.keys.forEach((element) => {
+          obj.data.push(data.raw_data[element][item.key]);
+        });
+        list.push(obj);
+      });
+      return list;
+    },
+  },
+};
+</script>
+<style scoped>
+.chart_container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/AnalyseModule/components/EyeStabilityTable.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-21 10:14:46
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\components\EyeStabilityTable.vue
+-->
+<!--  -->
+<template>
+  <div class="container_box">
+    <table class="table_box">
+      <tr>
+        <th v-for="(e, i) in labers" :key="i">{{ e.label }}</th>
+      </tr>
+      <tr v-for="(item, index) in table_data" :key="index">
+        <td v-for="(e, i) in labers" :key="i">
+          <div v-if="typeof item[e.key] === 'object'">
+            <el-popover placement="top-start" width="200" trigger="hover">
+              <div>
+                <el-form label-width="80px">
+                  <!-- <el-form-item label="正确数据: ">
+                    <span v-for="(o, b) in item[e.key].exactness.value">{{ o
+                    }},</span>
+                  </el-form-item> -->
+                  <el-form-item label="错误数据: ">
+                    <span v-for="(o, b) in item[e.key].wrong.value"
+                      >{{ o }},</span
+                    >
+                  </el-form-item>
+                </el-form>
+              </div>
+              <el-button slot="reference" type="text" size="mini">{{
+                item[e.key].accuracy.value
+              }}</el-button>
+            </el-popover>
+          </div>
+          <div v-else>{{ item[e.key] }}</div>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['table_data', 'labers'],
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  computed: {},
+  created() {},
+  mounted() {},
+
+  methods: {
+    test(item) {
+      console.log('判断对象');
+      console.log(item);
+      console.log(typeof item == 'object');
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.container_box {
+  width: 100%;
+  height: 100%;
+}
+
+.table_box {
+  width: 100%;
+  // min-height: 100%;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+  border-collapse: collapse;
+
+  th,
+  td {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    border-bottom: 1px solid #e4e7ed;
+    border-right: 1px solid #e4e7ed;
+  }
+
+  th {
+    padding: 15px 0;
+    color: #909399;
+  }
+
+  td {
+    padding: 5px 0;
+    color: #303133;
+  }
+}
+</style>

src/components/AnalyseModule/components/LineChart.vue

+<!--  -->
+<template>
+  <div class="chart_container" :id="chart_id"></div>
+</template>
+
+<script>
+export default {
+  props: ['chart_data', 'chart_id'],
+  data() {
+    return {
+    };
+  },
+
+  components: {},
+
+  computed: {},
+
+  mounted() {
+    this.initChart();
+  },
+
+  methods: {
+    initChart() {
+      let dom = document.getElementById(`${this.chart_id}`);
+      let myChart = this.$echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false
+      });
+      let app = {};
+
+      let option;
+
+      option = {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true,
+            areaStyle: {}
+          },
+          {
+            data: [1290, 1330, 1320, 820, 932, 901, 934,],
+            type: 'line',
+            smooth: true,
+            areaStyle: {}
+          },
+        ]
+      };
+
+      if (option && typeof option === 'object') {
+        myChart.setOption(option);
+      }
+      window.addEventListener('resize', myChart.resize);
+    },
+  }
+}
+
+</script>
+<style scoped>
+.chart_container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/AnalyseModule/components/SimpleTable.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-21 10:14:46
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\components\SimpleTable.vue
+-->
+<!--  -->
+<template>
+  <div class="container_box">
+    <table class="table_box">
+      <!-- <tr>
+              <th v-for="(e, i) in labers" :key="i">{{ e.label }}</th>
+            </tr> -->
+      <tr v-for="(item, index) in table_data.labers" :key="index">
+        <th>{{ item.label }}</th>
+        <th>{{ keepTwoDecimal(table_data.data[item.key]) }}</th>
+        <th></th>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['table_data'],
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  computed: {},
+  created() {},
+  mounted() {},
+
+  methods: {
+    //保留两位，四舍五入
+    keepTwoDecimal(num) {
+      var result = parseFloat(num);
+      if (isNaN(result)) {
+        return false;
+      } else {
+        result = Math.round(num * 100) / 100;
+        return result;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.container_box {
+  width: 100%;
+  height: 100%;
+}
+
+.table_box {
+  width: 100%;
+  min-height: 100%;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+  border-collapse: collapse;
+
+  th,
+  td {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    border-bottom: 1px solid #e4e7ed;
+    border-right: 1px solid #e4e7ed;
+  }
+
+  th {
+    color: #909399;
+  }
+
+  td {
+    color: #303133;
+  }
+}
+</style>

src/components/AnalyseModule/components/table.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-21 10:14:46
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\components\table.vue
+-->
+<!--  -->
+<template>
+  <div class="container_box">
+    <table class="table_box">
+      <tr>
+        <th v-for="(e, i) in labers" :key="i">{{ e.label }}</th>
+      </tr>
+      <tr v-for="(item, index) in table_data" :key="index">
+        <td v-for="(e, i) in labers" :key="i">
+          <div v-if="e.key == 'distribute'">
+            <div v-if="item['distribute'].length > 3">
+              <el-popover
+                placement="right"
+                title="标题"
+                width="200"
+                trigger="click"
+              >
+                <div v-for="(h, key, j) in item['distribute']" :key="j">
+                  {{ key }}({{ item['distribute'][key] }}题)
+                </div>
+                <el-button slot="reference" type="text" size="mini"
+                  >...</el-button
+                >
+              </el-popover>
+            </div>
+            <div v-else>
+              <div v-for="(h, key, j) in item['distribute']" :key="j">
+                {{ key }}({{ item['distribute'][key] }}题)，
+              </div>
+            </div>
+          </div>
+          <div v-else-if="Array.isArray(item[e.key])">
+            <el-popover
+              placement="right"
+              width="200"
+              trigger="click"
+              v-if="item[e.key].length > 0"
+            >
+              <div v-for="(h, j) in item[e.key]" :key="j">
+                {{ h }}
+              </div>
+              <el-button slot="reference" type="text" size="mini"
+                >...</el-button
+              >
+            </el-popover>
+          </div>
+          <div v-else>{{ item[e.key] }}</div>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['table_data', 'labers'],
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.container_box {
+  width: 100%;
+  height: 100%;
+}
+
+.table_box {
+  width: 100%;
+  // min-height: 100%;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+  border-collapse: collapse;
+
+  th,
+  td {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    border-bottom: 1px solid #e4e7ed;
+    border-right: 1px solid #e4e7ed;
+  }
+
+  th {
+    padding: 15px 0;
+    color: #909399;
+  }
+
+  td {
+    padding: 5px 0;
+    color: #303133;
+  }
+}
+</style>

src/components/AnalyseModule/index.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-20 16:02:07
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\index.vue
+-->
+<!--
+ * @Author: czj
+ * @Date: 2023-03-20 16:02:07
+ * @Description:
+ * @FilePath: \AdministrationHome\src\components\AnalyseModule\index.vue
+-->
+<!--  -->
+<template>
+  <div class="analyse_container" :style="{ '--color': original_data.color }">
+    <div class="header_box">
+      <el-row>
+        <el-col :span="12">
+          <div class="title_box" :title="original_data.title"> {{ original_data.title }}</div>
+        </el-col>
+        <el-col :span="12" style="text-align: right;">
+          <el-checkbox v-if="original_data.is_show" v-model="original_data.is_show.value" @change="changeSelect">{{
+            original_data.is_show.value ? '显示' : '隐藏'
+          }}</el-checkbox>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="content_container" v-if="original_data.type == 'table'">
+      <Table :table_data="original_data.list" :labers="original_data.labers"></Table>
+    </div>
+    <div class="content_container" v-if="false">
+      <line-chart :chart_data="original_data.data" :chart_id="original_data.chart_id"></line-chart>
+    </div>
+    <div class="content_container" v-if="original_data.type == 'bar'">
+      <bar-chart
+        :chart_data="{ raw_data: original_data.raw_data, keys: original_data.keys, labers: original_data.labers }"
+        :chart_id="original_data.chart_id"></bar-chart>
+    </div>
+    <div class="content_container" v-if="original_data.type == 'simple_table'">
+      <simple-table :table_data="original_data"></simple-table>
+    </div>
+    <!-- 眼光稳定性 -->
+    <div class="content_container" v-if="original_data.type == 'eye_stability_table'">
+      <eye-stability-table :table_data="original_data.list" :labers="original_data.labers"></eye-stability-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from './components/table';
+import LineChart from './components/LineChart.vue';
+import BarChart from './components/BarChart.vue';
+import SimpleTable from './components/SimpleTable.vue';
+import EyeStabilityTable from './components/EyeStabilityTable.vue';
+export default {
+  props: ['module_data'],
+  data() {
+    return {
+      original_data: {},
+    };
+  },
+
+  components: { Table, LineChart, BarChart, SimpleTable, EyeStabilityTable },
+
+  computed: {},
+  created() {
+    this.original_data = { ...this.module_data };
+  },
+  mounted() {
+  },
+
+  methods: {
+    //选择框监听
+    changeSelect() {
+      this.$emit('changeSelect', this.original_data.is_show);
+    },
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.analyse_container {
+  border-radius: 6px;
+  border: 1px solid var(--color);
+  overflow: hidden;
+
+  .header_box {
+    height: 40px;
+    line-height: 40px;
+    background-color: var(--color);
+    padding: 0 10px;
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .content_container {
+    width: 100%;
+    height: 285px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+  }
+}
+
+.title_box {
+  overflow: hidden; //超出的文本隐藏
+  text-overflow: ellipsis; //溢出用省略号显示
+  white-space: nowrap; // 默认不换行；
+}
+</style>

src/components/TestInfo/index.vue

@@ -3,7 +3,7 @@
  * @Author: AnthonyD
  * @Date:   2023-03-01 15:29:44
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-23 19:58:38
+ * @Last Modified time: 2023-03-24 09:41:58
  */
 </script><template>
   <div class="header_container">
@@ -207,6 +207,12 @@ export default {
   margin-right: 12px;
 }
 
+@media screen and (min-width: 600px) {
+  .top_card_box {
+    display: inline-block;
+  }
+}
+
 @media screen and (max-width: 600px) {
   .box-card {
     width: 100%;

src/main.js

@@ -2,7 +2,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-20 15:52:07
+ * @Last Modified time: 2023-03-27 16:42:54
  */
 import Vue from 'vue'
 
@@ -26,6 +26,11 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
+import echarts from 'echarts';
+
+
+
+
 
 //引入加密函数，并将其封装
 import { handleParams, Aesdecrypt, removeProperty } from '@/utils/cryptoJS';
@@ -52,6 +57,12 @@ Vue.use(Element, {
   locale: enLang // 如果使用中文，无需设置，请删除
 })
 
+//全局echarts
+Vue.prototype.$echarts = echarts
+
+
+
+
 // register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/styles/index.scss

@@ -2,7 +2,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-22 11:31:31
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-23 20:06:32
+ * @Last Modified time: 2023-03-29 19:28:07
  */
 @import './variables.scss';
 @import './mixin.scss';
@@ -223,9 +223,12 @@ aside {
   //   border: none;
 
   // }
+  height: 36px;
+
   .el-button--medium {
+    text-align: center;
     border: none;
-    height: 35px;
+    height: 100%;
   }
 
 }
@@ -252,14 +255,14 @@ aside {
   .answer_box {
     .el-dialog {
       width: 90%;
+      height: 70%;
     }
-
-
-
   }
 
-  // .el-radio-button__inner {
-  //   border-left: 1px solid #DCDFE6;
-  // }
+  .amplify_box {
+    .el-dialog {
+      width: 100%;
+    }
+  }
 
 }
\ No newline at end of file

src/utils/tool.js

@@ -2,37 +2,64 @@
  * @Author: AnthonyD
  * @Date:   2023-03-11 11:04:16
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-13 14:26:44
+ * @Last Modified time: 2023-03-28 15:17:57
  */
-export function secondsToMinutes(sec){
+export function secondsToMinutes(sec) {
   if (!sec) return false
   const totalSeconds = sec;
- /* 获取完整分钟数 */
-const minutes = Math.floor(totalSeconds / 60);
+  /* 获取完整分钟数 */
+  const minutes = Math.floor(totalSeconds / 60);
 
-// 获得剩余的秒数
-const seconds = totalSeconds % 60;
+  // 获得剩余的秒数
+  const seconds = totalSeconds % 60;
 
-const padTo2Digits = (num)=> {
-   return num.toString().padStart(2, '0');
+  const padTo2Digits = (num) => {
+    return num.toString().padStart(2, '0');
   }
   //  格式化为 MM:SS
-const result = `${padTo2Digits(minutes)}分${padTo2Digits(seconds)}秒`;
-return result;
+  const result = `${padTo2Digits(minutes)}分${padTo2Digits(seconds)}秒`;
+  return result;
 }
 
 
 
 //一维转换二维数组
 export function array_conversion(arr, nums) {
-   const length = arr.length;
-   const n = nums // 假设每段显示n个
-   const Num = length % n === 0 ? length / n : Math.floor((length / n) + 1)  //得出多少份
-   const res = [] //定义数组接受最终的数据
-   for (let i = 0; i < Num; i++) {
+  const length = arr.length;
+  const n = nums // 假设每段显示n个
+  const Num = length % n === 0 ? length / n : Math.floor((length / n) + 1)  //得出多少份
+  const res = [] //定义数组接受最终的数据
+  for (let i = 0; i < Num; i++) {
     // slice() 方法返回一个从开始到结束（不包括结束）的数组。且原始数组不会被修改。
     const newArr = arr.slice(i * n, i * n + n) //得到每份的数据
     res.push(JSON.parse(JSON.stringify(newArr))) //往res数组里加数据
-   }
-   return res;
   }
+  return res;
+}
+
+//两个数，求百分比
+export function toPercent(num, total) {
+  return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比
+}
+
+//统计相同数据出现的次数
+export function countOccurrences(arr) {
+  // 创建一个空对象用于存储每个数据的出现次数
+  const result = {};
+  // 遍历数组
+  for (let i = 0; i < arr.length; i++) {
+    // 获取当前数据
+    const item = arr[i];
+
+    // 如果该数据已经存在于 result 对象中，则将出现次数加 1
+    if (result[item]) {
+      result[item]++;
+    }
+    // 否则，将该数据添加到 result 对象中，并将出现次数设置为 1
+    else {
+      result[item] = 1;
+    }
+  }
+  // 返回统计结果
+  return result;
+}

src/views/analysis/components/overall_appraisal_view.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-22 16:47:13
+ * @Description:
+ * @FilePath: \AdministrationHome\src\views\student\display_board\detail.vue
+-->
+<!--  -->
+<template>
+  <div class="module_container">
+    <div class="card_container">
+      <div>
+        <div class="module_header">得分情况</div>
+        <div>
+          <el-row class="row_container">
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="result_section"
+                  v-if="result_section"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule :module_data="area_score" v-if="area_score">
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="province_score"
+                  v-if="province_score"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule :module_data="breed_score" v-if="breed_score">
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="get_highes_lowestt_score_data"
+                  v-if="get_highes_lowestt_score_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div v-if="review_conditions">
+        <div class="module_header" style="padding-top: 0">易错、对等级分析</div>
+        <div>
+          <el-row class="row_container">
+            <el-col :span="12" :xs="24" style="margin-bottom: 15px">
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrong_question_data"
+                  v-if="wrong_question_data"
+                ></AnalyseModule>
+              </div>
+            </el-col>
+            <el-col :span="12" :xs="24">
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="exactness_question_data"
+                  v-if="exactness_question_data"
+                ></AnalyseModule>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div>
+        <div class="module_header">错误方向分析</div>
+        <div>
+          <el-row class="row_container">
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrong_position_data"
+                  v-if="wrong_position_data"
+                ></AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="error_level_data"
+                  v-if="error_level_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrong_color_data"
+                  v-if="wrong_color_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrongG_group_data"
+                  v-if="wrongG_group_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="eye_stability_data"
+                  v-if="eye_stability_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div>
+        <div class="module_header">老师点评:</div>
+        <div style="padding: 0 10px; box-sizing: border-box">
+          <el-input type="textarea" :rows="6" disabled v-model="found_remark">
+          </el-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toPercent, countOccurrences } from '@/utils/tool';
+import AnalyseModule from '@/components/AnalyseModule/index.vue';
+
+export default {
+  props: ['appraisal_data'],
+  data() {
+    return {
+      is_loading: false,
+
+      examination_questions_id: null,
+      //批阅条件
+      review_conditions: null,
+
+      //成绩分段
+      result_section: null,
+      //区域得分
+      area_score: null,
+      //省区得分情况
+      province_score: null,
+      //品种得分
+      breed_score: null,
+      //最高成绩..
+      get_highes_lowestt_score_data: null,
+      //眼光稳定性
+      eye_stability_data: null,
+      //对错题分析
+      wrong_question_data: null,
+      exactness_question_data: null,
+      //错误部位
+      wrong_position_data: null,
+      //错误等级
+      error_level_data: null,
+      //错误颜色
+      wrong_color_data: null,
+      //错误组别
+      wrongG_group_data: null,
+
+      //老师点评
+      found_remark: null,
+    };
+  },
+
+  components: { AnalyseModule },
+
+  computed: {},
+  created() {
+    this.examination_questions_id = this.$route.query.id;
+  },
+  mounted() {
+    this.getReadOverDetail();
+  },
+
+  methods: {
+    //获取批阅试题列表-详情
+    getReadOverDetail() {
+      this.is_loading = true;
+      // get_read_over_detail(this.examination_questions_id).then(res => {
+      //   console.log('获取试题详情');
+      //   console.log(res);
+      //   this.found_remark = res.found_remark || '';
+      //   this.head_data.title = this.appraisal_data.EyeStability.title;//标题
+      //   this.is_loading = false;
+      //   this.review_conditions = res.review_conditions;//审阅条件
+
+      // })
+      this.review_conditions = { ...this.appraisal_data };
+      this.found_remark = this.appraisal_data.found_remark;
+      this.result_section = this.changeScore(this.appraisal_data.ScoreScore); //成绩分段
+      this.area_score = this.changeAreaScore(this.appraisal_data.AreaScore); //南北方得分
+      this.province_score = this.changeProvinceScore(
+        this.appraisal_data.ProvinceScore
+      ); //省区得分
+      this.breed_score = this.changeBreedScore(this.appraisal_data.breedScore); //品种得分
+      //最高分、最低分、平均分，中位数、众数、离散（变异系数）
+      this.get_highes_lowestt_score_data = this.getHighesLowesttScore(
+        this.appraisal_data.getHighesLowesttScore
+      );
+      this.eye_stability_data = this.changeEyeStability(
+        this.appraisal_data.EyeStability
+      );
+      //对错题分析
+      if (this.appraisal_data.top_data)
+        this.wrong_question_data = this.changeWrong(
+          this.appraisal_data.top_data.datadesc
+        ); //错题分析
+      if (this.appraisal_data.top_data)
+        this.exactness_question_data = this.changeRight(
+          this.appraisal_data.top_data.dataasc
+        ); //对题分析
+      this.wrong_position_data = this.changeWrongPosition(
+        this.appraisal_data.WrongPosition
+      ); //错误部位
+      this.error_level_data = this.changeErrorLevel(
+        this.appraisal_data.ErrorLevel
+      ); //错误等级
+      this.wrong_color_data = this.changeWrongColor(
+        this.appraisal_data.WrongColor
+      ); //错误颜色
+      this.wrongG_group_data = this.changeWrongGroup(
+        this.appraisal_data.WrongGroup
+      ); //错误组别
+
+      console.log('处理好的数据');
+      console.log(this.wrong_position_data);
+    },
+    //计算百分比
+    toPercent,
+    //处理分段值
+    changeScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let data = [];
+      let num = 0;
+      for (const key in datas) {
+        num += datas[key];
+      }
+      let labers = [
+        { label: '分类', key: 'classify' },
+        { label: '分数段', key: 'score' },
+        { label: '人数', key: 'people' },
+        { label: '占比', key: 'proportion' },
+      ];
+      keys.forEach((element) => {
+        let scores = element.split('~');
+        data.push(datas[element]);
+        let obj = {
+          classify: element,
+          score: scores[0],
+          people: datas[element],
+          proportion: this.toPercent(datas[element], num),
+        };
+        list.push(obj);
+      });
+      return {
+        type: 'table',
+        chart_id: 'result_section',
+        color: '#39c183f0',
+        title: '成绩分段值',
+        labers,
+        list,
+        data,
+      };
+    },
+    //南方烟北方烟得分情况
+    changeAreaScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let labers = [
+        { label: '分数', key: 'ScoreScore' },
+        { label: '总分', key: 'assemble' },
+        { label: '人数', key: 'student_num' },
+      ];
+      return {
+        type: 'bar',
+        chart_id: 'bar_chart_appraisal',
+        color: '#E6A23C',
+        title: '南方北方烟得分情况',
+        labers,
+        keys,
+        raw_data: datas,
+      };
+    },
+    //省区得分数据处理
+    changeProvinceScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let labers = [
+        { label: '分数', key: 'ScoreScore', value: '分数' },
+        { label: '总分', key: 'assemble', value: '分数' },
+        { label: '人数', key: 'student_num', value: '分数' },
+      ];
+      return {
+        type: 'bar',
+        chart_id: 'province_bar_chart_appraisal',
+        color: '#505F79',
+        title: '省级产区得分情况',
+        labers,
+        keys,
+        raw_data: datas,
+      };
+    },
+    //品种得分情况
+    changeBreedScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let labers = [
+        { label: '分数', key: 'ScoreScore' },
+        { label: '总分', key: 'assemble' },
+        { label: '人数', key: 'student_num' },
+      ];
+      return {
+        type: 'bar',
+        chart_id: 'breed_bar_chart_appraisal',
+        color: '#39c183f0',
+        title: '品种得分情况',
+        labers,
+        keys,
+        raw_data: datas,
+      };
+    },
+    //最高分、最低分、平均分，中位数、众数、离散（变异系数）
+    getHighesLowesttScore(datas) {
+      if (!datas) return false;
+      let labers = [
+        { label: '最高成绩', key: 'max' },
+        { label: '最低成绩', key: 'min' },
+        { label: '平均成绩', key: 'average' },
+        { label: '中位数', key: 'median' },
+        { label: '众数', key: 'mode' },
+        { label: '变异系数', key: 'cov' },
+      ];
+
+      return {
+        type: 'simple_table',
+        chart_id: 'HighesLowesttScore_table',
+        color: '#99A9BF',
+        title: '最高分、最低分、平均分，中位数、众数、离散（变异系数）',
+        labers,
+        data: datas,
+      };
+    },
+    //眼光稳定性
+    changeEyeStability(datas) {
+      if (!datas) return false;
+      let list = [];
+      let labers = [
+        { label: '题目', key: 'title' },
+        { label: '答案', key: 'answer' },
+        { label: '稳定性', key: 'stability' },
+      ];
+      //处理稳定性数据
+      const changeStability = (items) => {
+        let all_num = items.exactness.length + items.wrong.length;
+        let Accuracy = toPercent(items.exactness.length, all_num); //准确率
+        return {
+          accuracy: { label: '正确率', value: Accuracy },
+          // exactness: { label: '正确数据', value: items.exactness },
+          wrong: { label: '错误数据', value: items.wrong },
+        };
+      };
+      datas.data.forEach((element, index) => {
+        list.push({
+          title: datas.title[index],
+          answer: element.answer,
+          stability: changeStability(element),
+        });
+      });
+      return {
+        type: 'eye_stability_table',
+        chart_id: 'wrong_group',
+        color: '#529B2E',
+        title: '眼光稳定性',
+        labers,
+        list,
+      };
+    },
+    //易错/易对 等级分析
+    changeWrong(datas) {
+      if (!datas) return false;
+      let list = [];
+      let labers = [
+        { label: '序号', key: 'index' },
+        { label: '题目', key: 'title' },
+        { label: '结果', key: 'result' },
+        { label: '错误率', key: 'errorRate' },
+        { label: '错误结果', key: 'distribute' },
+      ];
+      datas.forEach((element, index) => {
+        list.push({
+          index: index + 1,
+          title: element.title,
+          result: element.result,
+          errorRate: `${element.errorRate}%`,
+          distribute: element.distribute,
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_table',
+        color: '#F56C6C',
+        title: '易错题分析',
+        labers,
+        list,
+      };
+    },
+    //易对题分析
+    changeRight(datas) {
+      if (!datas) return false;
+      let list = [];
+      let labers = [
+        { label: '序号', key: 'index' },
+        { label: '题目', key: 'title' },
+        { label: '结果', key: 'result' },
+        { label: '正确率', key: 'errorRate' },
+      ];
+      datas.forEach((element, index) => {
+        list.push({
+          index: index + 1,
+          title: element.title,
+          result: element.result,
+          errorRate: `${100 - element.errorRate}%`,
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_table',
+        color: '#529B2E',
+        title: '易对题分析',
+        labers,
+        list,
+      };
+    },
+    //错误部位
+    changeWrongPosition(datas) {
+      console.log('错误部位原始数据');
+      console.log(datas);
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '部位', key: 'position' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          position: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_position',
+        color: '#E6A23C',
+        title: '错误部位',
+        labers,
+        list,
+      };
+    },
+    //错误等级
+    changeErrorLevel(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '等级', key: 'level' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          level: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+
+          //countOccurrences(datas[element].distribute)
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_position',
+        color: '#505F79',
+        title: '错误等级',
+        labers,
+        list,
+      };
+    },
+    //错误颜色
+    changeWrongColor(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '颜色', key: 'color' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          color: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+
+          //distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_color',
+        color: '#99A9BF',
+        title: '错误颜色',
+        labers,
+        list,
+      };
+    },
+    //错误组别
+    changeWrongGroup(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '组别', key: 'group' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          group: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+          //countOccurrences
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_group',
+        color: '#529B2E',
+        title: '错误组别',
+        labers,
+        list,
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.box-card {
+  margin-bottom: 15px;
+}
+
+.centenr_container {
+  width: calc(100% - 20px);
+  margin: 0 auto;
+}
+
+.module_header {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px 0 15px 10px;
+  font-size: 20px;
+  color: #333;
+}
+
+.row_container {
+  margin-bottom: 15px;
+}
+
+.unit_container {
+  margin-bottom: 15px;
+}
+</style>

src/views/analysis/components/student_comments_view.vue

+<script>
+/**
+ * @Author: AnthonyD
+ * @Date:   2023-03-27 15:09:40
+ * @Last Modified by:   AnthonyD
+ * @Last Modified time: 2023-03-29 15:25:45
+ */
+</script><template>
+  <el-row>
+    <!-- 错误方位/区域 -->
+    <el-col
+      :span="8"
+      :xs="24"
+      style="margin-bottom: 15px"
+      v-if="area_score_list"
+    >
+      <div class="centenr_container">
+        <AnalyseModule :module_data="area_score_list" v-if="area_score_list">
+        </AnalyseModule>
+      </div>
+    </el-col>
+    <!-- 错误部位 -->
+    <el-col
+      :span="8"
+      :xs="24"
+      style="margin-bottom: 15px"
+      v-if="wrong_position_list"
+    >
+      <div class="centenr_container">
+        <AnalyseModule
+          :module_data="wrong_position_list"
+          v-if="wrong_position_list"
+        ></AnalyseModule>
+      </div>
+    </el-col>
+    <!-- 错误颜色 -->
+    <el-col
+      :span="8"
+      :xs="24"
+      style="margin-bottom: 15px"
+      v-if="wrong_color_list"
+    >
+      <div class="centenr_container">
+        <AnalyseModule :module_data="wrong_color_list" v-if="wrong_color_list">
+        </AnalyseModule>
+      </div>
+    </el-col>
+    <!-- 错误等级 -->
+    <el-col
+      :span="8"
+      :xs="24"
+      style="margin-bottom: 15px"
+      v-if="error_level_list"
+    >
+      <div class="centenr_container">
+        <AnalyseModule :module_data="error_level_list"> </AnalyseModule>
+      </div>
+    </el-col>
+    <!-- 错误组别 -->
+    <el-col
+      :span="8"
+      :xs="24"
+      style="margin-bottom: 15px"
+      v-if="wrong_group_list"
+    >
+      <div class="centenr_container">
+        <AnalyseModule :module_data="wrong_group_list"> </AnalyseModule>
+      </div>
+    </el-col>
+    <!-- 眼观稳定性 -->
+    <el-col
+      :span="8"
+      :xs="24"
+      style="margin-bottom: 15px"
+      v-if="eye_stability_list"
+    >
+      <div class="centenr_container">
+        <AnalyseModule :module_data="eye_stability_list"> </AnalyseModule>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import AnalyseModule from '@/components/AnalyseModule/index.vue';
+import { toPercent, countOccurrences } from '@/utils/tool';
+export default {
+  props: ['summary_data'],
+  name: '',
+  data() {
+    return {
+      //区域区域数据
+      area_score_list: null,
+      //错误部位
+      wrong_position_list: null,
+      //错误颜色
+      wrong_color_list: null,
+      //错误等级
+      error_level_list: null,
+      //错误组别
+      wrong_group_list: null,
+      ///眼光稳定性
+      eye_stability_list: null,
+    };
+  },
+  components: { AnalyseModule },
+  created() {
+    this.statistical_results = { ...this.summary_data };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      //烟草区域
+      this.area_score_list = this.changeAreaScore(
+        this.statistical_results.area
+      );
+      //错误部位
+      this.wrong_position_list = this.changeWrongPosition(
+        this.statistical_results.WrongPosition
+      );
+      //错误颜色
+      this.wrong_color_list = this.changeWrongColor(
+        this.statistical_results.WrongColor
+      );
+      //错误等级
+      this.error_level_list = this.changeErrorLevel(
+        this.statistical_results.ErrorLevel
+      );
+      //错误组别
+      this.wrong_group_list = this.changeWrongGroup(
+        this.statistical_results.WrongGroup
+      );
+      //眼光稳定性
+      this.eye_stability_list = this.changeEyeStability(
+        this.statistical_results.EyeStability
+      );
+    },
+
+    //区域得分
+    changeAreaScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let labers = [
+        { label: '总分', key: 'assemble' },
+        { label: '正确题目数量', key: 'subject_num_answer' },
+        { label: '错误题目数量', key: 'subject_num_error' },
+      ];
+      return {
+        type: 'bar',
+        chart_id: 'bar_chart1',
+        color: '#E6A23C',
+        title: '突出区域的烟草识别',
+        labers,
+        keys,
+        raw_data: datas,
+      };
+    },
+    //错误部位
+    changeWrongPosition(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '部位', key: 'position' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          position: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_position',
+        color: '#E6A23C',
+        title: '错误部位',
+        labers,
+        list,
+      };
+    },
+    //错误颜色
+    changeWrongColor(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '颜色', key: 'color' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          color: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_color',
+        color: '#99A9BF',
+        title: '错误颜色',
+        labers,
+        list,
+      };
+    },
+    //错误等级
+    changeErrorLevel(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '等级', key: 'level' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          level: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_position',
+        color: '#505F79',
+        title: '错误等级',
+        labers,
+        list,
+      };
+    },
+    //错误组别
+    changeWrongGroup(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '组别', key: 'group' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          group: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_group',
+        color: '#529B2E',
+        title: '错误组别',
+        labers,
+        list,
+      };
+    },
+    //眼光稳定性
+    changeEyeStability(datas) {
+      if (!datas) return false;
+      let list = [];
+      let labers = [
+        { label: '题目', key: 'title' },
+        { label: '答案', key: 'answer' },
+        { label: '稳定性', key: 'stability' },
+      ];
+      //处理稳定性数据
+      const changeStability = (items) => {
+        let all_num = items.exactness.length + items.wrong.length;
+        let Accuracy = toPercent(items.exactness.length, all_num); //准确率
+        return {
+          accuracy: { label: '正确率', value: Accuracy },
+          exactness: { label: '正确数据', value: items.exactness },
+          wrong: { label: '错误数据', value: items.wrong },
+        };
+      };
+      datas.data.forEach((element, index) => {
+        list.push({
+          title: datas.title[index],
+          answer: element.answer,
+          stability: changeStability(element),
+        });
+      });
+      return {
+        type: 'eye_stability_table',
+        chart_id: 'wrong_group',
+        color: '#529B2E',
+        title: '眼光稳定性',
+        labers,
+        list,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.centenr_container {
+  width: calc(100% - 20px);
+  margin: 0 auto;
+}
+</style>

src/views/analysis/components/summary-view.vue

+<!--
+ * @Author: czj
+ * @Date: 2023-03-22 16:47:13
+ * @Description:
+ * @FilePath: \AdministrationHome\src\views\student\display_board\detail.vue
+-->
+<!--  -->
+<template>
+  <div class="module_container">
+    <div class="card_container">
+      <div>
+        <div class="module_header">得分情况</div>
+        <div>
+          <el-row class="row_container">
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="result_section"
+                  v-if="result_section"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule :module_data="area_score" v-if="area_score">
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="province_score"
+                  v-if="province_score"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule :module_data="breed_score" v-if="breed_score">
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="8"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="get_highes_lowestt_score_data"
+                  v-if="get_highes_lowestt_score_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div v-if="review_conditions">
+        <div class="module_header" style="padding-top: 0">易错、对等级分析</div>
+        <div>
+          <el-row class="row_container">
+            <el-col :span="12" :xs="24" style="margin-bottom: 15px">
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrong_question_data"
+                  v-if="wrong_question_data"
+                ></AnalyseModule>
+              </div>
+            </el-col>
+            <el-col :span="12" :xs="24">
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="exactness_question_data"
+                  v-if="exactness_question_data"
+                ></AnalyseModule>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div>
+        <div class="module_header">错误方向分析</div>
+        <div>
+          <el-row class="row_container">
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrong_position_data"
+                  v-if="wrong_position_data"
+                ></AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="error_level_data"
+                  v-if="error_level_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrong_color_data"
+                  v-if="wrong_color_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="wrongG_group_data"
+                  v-if="wrongG_group_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+            <el-col
+              :span="12"
+              :xs="24"
+              v-if="review_conditions"
+              class="unit_container"
+            >
+              <div class="centenr_container">
+                <AnalyseModule
+                  :module_data="eye_stability_data"
+                  v-if="eye_stability_data"
+                >
+                </AnalyseModule>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div>
+        <div class="module_header">老师点评:</div>
+        <div style="padding: 0 10px; box-sizing: border-box">
+          <el-input type="textarea" :rows="6" disabled v-model="found_remark">
+          </el-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toPercent, countOccurrences } from '@/utils/tool';
+import AnalyseModule from '@/components/AnalyseModule/index.vue';
+
+export default {
+  props: ['summary_data'],
+  data() {
+    return {
+      is_loading: false,
+
+      examination_questions_id: null,
+      //批阅条件
+      review_conditions: null,
+
+      //成绩分段
+      result_section: null,
+      //区域得分
+      area_score: null,
+      //省区得分情况
+      province_score: null,
+      //品种得分
+      breed_score: null,
+      //最高成绩..
+      get_highes_lowestt_score_data: null,
+      //眼光稳定性
+      eye_stability_data: null,
+      //对错题分析
+      wrong_question_data: null,
+      exactness_question_data: null,
+      //错误部位
+      wrong_position_data: null,
+      //错误等级
+      error_level_data: null,
+      //错误颜色
+      wrong_color_data: null,
+      //错误组别
+      wrongG_group_data: null,
+
+      //老师点评
+      found_remark: null,
+    };
+  },
+
+  components: { AnalyseModule },
+
+  computed: {},
+  created() {
+    this.examination_questions_id = this.$route.query.id;
+  },
+  mounted() {
+    this.getReadOverDetail();
+  },
+
+  methods: {
+    //获取批阅试题列表-详情
+    getReadOverDetail() {
+      this.is_loading = true;
+      // get_read_over_detail(this.examination_questions_id).then(res => {
+      //   console.log('获取试题详情');
+      //   console.log(res);
+      //   this.found_remark = res.found_remark || '';
+      //   this.head_data.title = this.summary_data.EyeStability.title;//标题
+      //   this.is_loading = false;
+      //   this.review_conditions = res.review_conditions;//审阅条件
+
+      // })
+      this.review_conditions = { ...this.summary_data };
+      this.found_remark = this.summary_data.found_remark;
+      this.result_section = this.changeScore(this.summary_data.ScoreScore); //成绩分段
+      this.area_score = this.changeAreaScore(this.summary_data.AreaScore); //南北方得分
+      this.province_score = this.changeProvinceScore(
+        this.summary_data.ProvinceScore
+      ); //省区得分
+      this.breed_score = this.changeBreedScore(this.summary_data.breedScore); //品种得分
+      //最高分、最低分、平均分，中位数、众数、离散（变异系数）
+      this.get_highes_lowestt_score_data = this.getHighesLowesttScore(
+        this.summary_data.getHighesLowesttScore
+      );
+      this.eye_stability_data = this.changeEyeStability(
+        this.summary_data.EyeStability
+      );
+      //对错题分析
+      if (this.summary_data.top_data)
+        this.wrong_question_data = this.changeWrong(
+          this.summary_data.top_data.datadesc
+        ); //错题分析
+      if (this.summary_data.top_data)
+        this.exactness_question_data = this.changeRight(
+          this.summary_data.top_data.dataasc
+        ); //对题分析
+      this.wrong_position_data = this.changeWrongPosition(
+        this.summary_data.WrongPosition
+      ); //错误部位
+      this.error_level_data = this.changeErrorLevel(
+        this.summary_data.ErrorLevel
+      ); //错误等级
+      this.wrong_color_data = this.changeWrongColor(
+        this.summary_data.WrongColor
+      ); //错误颜色
+      this.wrongG_group_data = this.changeWrongGroup(
+        this.summary_data.WrongGroup
+      ); //错误组别
+
+      console.log('处理好的数据');
+      console.log(this.wrong_position_data);
+    },
+    //计算百分比
+    toPercent,
+    //处理分段值
+    changeScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let data = [];
+      let num = 0;
+      for (const key in datas) {
+        num += datas[key];
+      }
+      let labers = [
+        { label: '分类', key: 'classify' },
+        { label: '分数段', key: 'score' },
+        { label: '人数', key: 'people' },
+        { label: '占比', key: 'proportion' },
+      ];
+      keys.forEach((element) => {
+        let scores = element.split('~');
+        data.push(datas[element]);
+        let obj = {
+          classify: element,
+          score: scores[0],
+          people: datas[element],
+          proportion: this.toPercent(datas[element], num),
+        };
+        list.push(obj);
+      });
+      return {
+        type: 'table',
+        chart_id: 'result_section',
+        color: '#39c183f0',
+        title: '成绩分段值',
+        labers,
+        list,
+        data,
+      };
+    },
+    //南方烟北方烟得分情况
+    changeAreaScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let labers = [
+        { label: '分数', key: 'ScoreScore' },
+        { label: '总分', key: 'assemble' },
+        { label: '人数', key: 'student_num' },
+      ];
+      return {
+        type: 'bar',
+        chart_id: 'bar_chart',
+        color: '#E6A23C',
+        title: '南方北方烟得分情况',
+        labers,
+        keys,
+        raw_data: datas,
+      };
+    },
+    //省区得分数据处理
+    changeProvinceScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let labers = [
+        { label: '分数', key: 'ScoreScore' },
+        { label: '总分', key: 'assemble' },
+        { label: '人数', key: 'student_num' },
+      ];
+      return {
+        type: 'bar',
+        chart_id: 'province_bar_chart',
+        color: '#505F79',
+        title: '省级产区得分情况',
+        labers,
+        keys,
+        raw_data: datas,
+      };
+    },
+    //品种得分情况
+    changeBreedScore(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let labers = [
+        { label: '分数', key: 'ScoreScore' },
+        { label: '总分', key: 'assemble' },
+        { label: '人数', key: 'student_num' },
+      ];
+      return {
+        type: 'bar',
+        chart_id: 'breed_bar_chart',
+        color: '#39c183f0',
+        title: '品种得分情况',
+        labers,
+        keys,
+        raw_data: datas,
+      };
+    },
+    //最高分、最低分、平均分，中位数、众数、离散（变异系数）
+    getHighesLowesttScore(datas) {
+      if (!datas) return false;
+      let labers = [
+        { label: '最高成绩', key: 'max' },
+        { label: '最低成绩', key: 'min' },
+        { label: '平均成绩', key: 'average' },
+        { label: '中位数', key: 'median' },
+        { label: '众数', key: 'mode' },
+        { label: '变异系数', key: 'cov' },
+      ];
+
+      return {
+        type: 'simple_table',
+        chart_id: 'HighesLowesttScore_table',
+        color: '#99A9BF',
+        title: '最高分、最低分、平均分，中位数、众数、离散（变异系数）',
+        labers,
+        data: datas,
+      };
+    },
+    //眼光稳定性
+    changeEyeStability(datas) {
+      if (!datas) return false;
+      let list = [];
+      let labers = [
+        { label: '题目', key: 'title' },
+        { label: '答案', key: 'answer' },
+        { label: '稳定性', key: 'stability' },
+      ];
+      //处理稳定性数据
+      const changeStability = (items) => {
+        let all_num = items.exactness.length + items.wrong.length;
+        let Accuracy = toPercent(items.exactness.length, all_num); //准确率
+        return {
+          accuracy: { label: '正确率', value: Accuracy },
+          // exactness: { label: '正确数据', value: items.exactness },
+          wrong: { label: '错误数据', value: items.wrong },
+        };
+      };
+      datas.data.forEach((element, index) => {
+        list.push({
+          title: datas.title[index],
+          answer: element.answer,
+          stability: changeStability(element),
+        });
+      });
+      return {
+        type: 'eye_stability_table',
+        chart_id: 'wrong_group',
+        color: '#529B2E',
+        title: '眼光稳定性',
+        labers,
+        list,
+      };
+    },
+    //易错/易对 等级分析
+    changeWrong(datas) {
+      if (!datas) return false;
+      let list = [];
+      let labers = [
+        { label: '序号', key: 'index' },
+        { label: '题目', key: 'title' },
+        { label: '结果', key: 'result' },
+        { label: '错误率', key: 'errorRate' },
+        { label: '错误结果', key: 'distribute' },
+      ];
+      datas.forEach((element, index) => {
+        list.push({
+          index: index + 1,
+          title: element.title,
+          result: element.result,
+          errorRate: `${element.errorRate}%`,
+          distribute: element.distribute,
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_table',
+        color: '#F56C6C',
+        title: '易错题分析',
+        labers,
+        list,
+      };
+    },
+    //易对题分析
+    changeRight(datas) {
+      if (!datas) return false;
+      let list = [];
+      let labers = [
+        { label: '序号', key: 'index' },
+        { label: '题目', key: 'title' },
+        { label: '结果', key: 'result' },
+        { label: '正确率', key: 'errorRate' },
+      ];
+      datas.forEach((element, index) => {
+        list.push({
+          index: index + 1,
+          title: element.title,
+          result: element.result,
+          errorRate: `${100 - element.errorRate}%`,
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_table',
+        color: '#529B2E',
+        title: '易对题分析',
+        labers,
+        list,
+      };
+    },
+    //错误部位
+    changeWrongPosition(datas) {
+      console.log('错误部位原始数据');
+      console.log(datas);
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '部位', key: 'position' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          position: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_position',
+        color: '#E6A23C',
+        title: '错误部位',
+        labers,
+        list,
+      };
+    },
+    //错误等级
+    changeErrorLevel(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '等级', key: 'level' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          level: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+
+          //countOccurrences(datas[element].distribute)
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_position',
+        color: '#505F79',
+        title: '错误等级',
+        labers,
+        list,
+      };
+    },
+    //错误颜色
+    changeWrongColor(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '颜色', key: 'color' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          color: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+
+          //distribute: countOccurrences(datas[element].distribute),
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_color',
+        color: '#99A9BF',
+        title: '错误颜色',
+        labers,
+        list,
+      };
+    },
+    //错误组别
+    changeWrongGroup(datas) {
+      if (!datas) return false;
+      let keys = Object.keys(datas);
+      let list = [];
+      let labers = [
+        { label: '组别', key: 'group' },
+        { label: '正确答案', key: 'answer' },
+        { label: '错题数量', key: 'wrong_num' },
+        { label: '错误答案内容', key: 'distribute' },
+      ];
+      keys.forEach((element, index) => {
+        list.push({
+          group: element,
+          answer: datas[element].answer,
+          wrong_num: datas[element].wrong_num,
+          // distribute: datas[element].distribute,
+          distribute: countOccurrences(datas[element].distribute),
+          //countOccurrences
+        });
+      });
+      return {
+        type: 'table',
+        chart_id: 'wrong_group',
+        color: '#529B2E',
+        title: '错误组别',
+        labers,
+        list,
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.box-card {
+  margin-bottom: 15px;
+}
+
+.centenr_container {
+  width: calc(100% - 20px);
+  margin: 0 auto;
+}
+
+.module_header {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px 0 15px 10px;
+  font-size: 20px;
+  color: #333;
+}
+
+.row_container {
+  margin-bottom: 15px;
+}
+
+.unit_container {
+  margin-bottom: 15px;
+}
+</style>

src/views/analysis/index.vue

@@ -3,7 +3,7 @@
  * @Author: AnthonyD
  * @Date:   2023-03-13 09:56:01
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-23 19:17:34
+ * @Last Modified time: 2023-03-29 15:39:43
  */
 </script>
 <template>
@@ -17,7 +17,7 @@
       <!-- <test-info></test-info> -->
       <test-info v-if="test_card_info" :testdata="test_card_info"></test-info>
 
-      <el-card class="box-card" v-if="questions_list.length > 0">
+      <el-card class="box-card">
         <div class="table_container">
           <div class="header_box">
             <div class="row_box" v-for="(item, index) in 5" :key="index">
@@ -116,7 +116,13 @@
                               v-if="e.image && e.image != '/'"
                               class="image_box"
                             >
-                              <img :src="IP + e.image" alt="" />
+                              <el-image
+                                style="width: 200px"
+                                :src="IP + e.image"
+                                :preview-src-list="[IP + e.image]"
+                              >
+                              </el-image>
+                              <!-- <img :src="IP + e.image" alt="" /> -->
                             </div>
                             <div v-else>暂无</div>
                           </div>
@@ -136,6 +142,49 @@
           </div>
         </div>
       </el-card>
+      <div class="amplify_box">
+        <el-dialog :visible.sync="outerVisible" class="hover_box">
+          <div class="img_box">
+            <img :src="IP + image_url" alt="" />
+          </div>
+        </el-dialog>
+      </div>
+
+      <el-card class="box-card">
+        <div style="text-align: center">
+          <el-radio-group v-model="radio1">
+            <el-radio-button label="student_comments">学员点评</el-radio-button>
+            <el-radio-button label="summary">本轮总结</el-radio-button>
+            <el-radio-button label="general_comment"
+              >本次培训总评</el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <div v-show="radio1 == 'student_comments'" style="padding-top: 15px">
+          <!-- <student-comments
+            v-if="statistical_results"
+            :summary_data="statistical_results"
+          ></student-comments> -->
+          <StudentComments
+            v-if="statistical_results"
+            :summary_data="statistical_results"
+          ></StudentComments>
+        </div>
+        <div v-show="radio1 == 'summary'">
+          <Summary
+            v-if="summary_data"
+            :summary_data="summary_data"
+            :key="new Date().getTime()"
+          ></Summary>
+        </div>
+        <div v-show="radio1 == 'general_comment'">
+          <OverallAppraisal
+            v-if="appraisal_data"
+            :appraisal_data="appraisal_data"
+            :key="new Date().getTime()"
+          ></OverallAppraisal>
+        </div>
+      </el-card>
     </div>
 
     <el-dialog title="提示" :visible.sync="is_dialogVisible" width="60%">
@@ -154,10 +203,13 @@
 import TestInfo from '@/components/TestInfo/index.vue';
 import { viewExamResults } from '@/api/user';
 import { array_conversion } from '@/utils/tool';
+import Summary from './components/summary-view';
+import StudentComments from './components/student_comments_view.vue';
+import OverallAppraisal from './components/overall_appraisal_view.vue';
 
 export default {
   name: '',
-  components: { TestInfo },
+  components: { TestInfo, Summary, StudentComments, OverallAppraisal },
   data() {
     return {
       IP: process.env.VUE_APP_BASE_API,
@@ -183,6 +235,15 @@ export default {
       //试题结果
       questions_list: [],
       test_card_info: null,
+      radio1: 'student_comments',
+      AreaScore: null,
+      summary_data: null,
+      statistical_results: null,
+      appraisal_data: null,
+      //
+      found_remark: null,
+      outerVisible: false,
+      image_url: '',
     };
   },
 
@@ -204,6 +265,19 @@ export default {
       viewExamResults(this.test_results_id).then((res) => {
         console.log('考试结果详情');
         console.log(res);
+        //学员评估
+        this.statistical_results = res.statistical_results;
+        //本次培训总评
+        this.appraisal_data = { ...res.Round_cultivate.review_content };
+        this.appraisal_data['found_remark'] = res.Round_cultivate.found_remark;
+
+        console.log(this.appraisal_data);
+        //本轮总结
+        this.summary_data = {
+          ...res.Round.review_content,
+        };
+
+        this.summary_data['found_remark'] = res.Round.found_remark;
         this.test_card_info = {
           title: res.examination_questions_title,
           status: res.status,
@@ -234,12 +308,27 @@ export default {
             element['index_number'] = index; //用来记录在原始数据中的索引
           }
         );
-        console.log('表格数据源');
         console.log(res.examination_questions.examination_question_detail);
-        let new_arr = array_conversion(
-          res.examination_questions.examination_question_detail,
-          5
-        );
+        let new_arr = [];
+
+        if (res.examination_questions.examination_question_detail.length > 0) {
+          console.log('1111');
+          new_arr = array_conversion(
+            res.examination_questions.examination_question_detail,
+            5
+          );
+        } else {
+          console.log('2222');
+          for (let index = 0; index < 20; index++) {
+            let items = [];
+            for (let i = 0; i < 5; i++) {
+              items.push({
+                grades_code: '暂无',
+              });
+            }
+            new_arr.push(items);
+          }
+        }
         console.log('二维数据@@@');
         console.log(new_arr);
         // console.log(JSON.stringify(new_arr));
@@ -247,6 +336,11 @@ export default {
         this.detailed_information = res;
       });
     },
+    showImageView(val) {
+      this.image_url = val;
+
+      this.outerVisible = true;
+    },
   },
 };
 </script>
@@ -372,6 +466,14 @@ export default {
   margin: 0px auto;
 }
 
+.module_header {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px 0 15px 10px;
+  font-size: 20px;
+  color: #333;
+}
+
 @media screen and (min-width: 600px) {
   .row_box {
     justify-content: space-between;
@@ -380,6 +482,12 @@ export default {
     border-right: 1px solid #ebeef5;
     width: calc(100% - 60px);
   }
+  .img_box {
+    text-align: center;
+    img {
+      width: 75%;
+    }
+  }
 }
 
 @media screen and (max-width: 600px) {
@@ -393,13 +501,15 @@ export default {
 
   .row_box {
     display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
     .left {
       width: 30px !important;
       font-size: 10px;
     }
     .right {
       font-size: 10px;
-      margin-left: 5px;
+      width: calc(100% - 30px);
     }
   }
   .table_box {
@@ -414,5 +524,11 @@ export default {
   .right_box {
     width: 60vw;
   }
+  .img_box {
+    text-align: center;
+    img {
+      width: 100%;
+    }
+  }
 }
 </style>

src/views/personal/index.vue

@@ -3,7 +3,7 @@
  * @Author: AnthonyD
  * @Date:   2023-02-23 15:52:52
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-23 17:31:50
+ * @Last Modified time: 2023-03-29 18:08:49
  */
 </script><template>
   <div class="person_container">
@@ -40,7 +40,7 @@
               ><i
                 slot="suffix"
                 class="el-input__icon el-icon-document-copy"
-                @click="copyProcessIdCard(user_info.idcard)"
+                @click="copyProcessIdCard(user_info.student_id)"
               ></i
             ></el-input>
             <p class="pointer">手机号</p>
@@ -198,10 +198,8 @@
                             <span
                               style="font-size: 48px; font-weight: bold"
                               v-if="
-                                (item.examination_questions.status == 4 &&
-                                  item.status == 2) ||
-                                (item.examination_questions.status == 3 &&
-                                  item.status == 2)
+                                item.examination_questions.status == 3 &&
+                                item.status == 2
                               "
                               >***</span
                             >
@@ -232,10 +230,8 @@
                           </el-button>
                           <el-button
                             v-else-if="
-                              (item.examination_questions.status == 4 &&
-                                item.status == 2) ||
-                              (item.examination_questions.status == 3 &&
-                                item.status == 2)
+                              item.examination_questions.status == 3 &&
+                              item.status == 2
                             "
                             type="warning"
                             class="finish_btn"

src/views/upload-result/index.vue

@@ -3,7 +3,7 @@
  * @Author: AnthonyD
  * @Date:   2023-03-01 16:25:21
  * @Last Modified by:   AnthonyD
- * @Last Modified time: 2023-03-23 19:52:23
+ * @Last Modified time: 2023-03-29 19:31:09
  */
 </script>
 
@@ -352,16 +352,12 @@
       <div style="overflow-y: scroll; max-height: 500px">
         <el-row>
           <el-col
-            :span="4"
+            :span="8"
             v-for="(
               tobacco_grades_data_f, tobacco_grades_data_index
             ) in tobacco_grades_data"
             :key="'t' + s_item + tobacco_grades_data_index"
-            style="
-              height: 119px;
-              border-bottom: 1px solid #e6ebf5;
-              padding: 8px 0px;
-            "
+            style="padding: 8px 0px"
           >
             <div style="padding: 2px 0px">
               <el-tag>组别:{{ tobacco_grades_data_f.name }}</el-tag>
@@ -834,12 +830,13 @@ export default {
   .right_data {
     margin: 0;
     display: inline-block;
+    width: calc(100% - 30px);
   }
   .left_data {
     width: 30px;
   }
   .result_box {
-    width: 30px;
+    width: 100%;
   }
 
   .grid-content {
@@ -878,7 +875,8 @@ export default {
   }
   .upload-demo {
     position: absolute;
-    left: 23%;
+    left: 20%;
+    right: 20%;
   }
 }
 </style>