[ADD] add system charts

src/views/situationScreen.vue

@@ -467,15 +467,30 @@
                 <div class="num_subject_box_new">
                   <div style="margin-bottom:20px;">
                     <div style="font-size:12px;">成绩统计</div>
+                    <div>
+                      <el-row type="flex" justify="end" style="margin-top: -20px;margin-right: -20px;">
+                        <el-pagination
+                            small
+                            :pager-count="5"
+                            :total="this.xitongweidu.length"
+                            :current-page="this.xitongweidu.currentPage"
+                            :page-size="this.xitongweidu.pageSize"
+                            :page-sizes="[5,10,15,20]"
+                            layout="total, prev, pager, next, sizes"
+                            @current-change="onCurrentPageChange_system_grade"
+                            @size-change="onPageSizeChange_system_grade" >
+                        </el-pagination>
+                      </el-row>
+                    </div>
                     <div
-                      id="subjectGradeStatistics"
-                      style=" left:5px; width:430px; height:180px;  "
-                      :style="{  top: participantScoreFlag ? '-15px' : '2px' }"
+                        id="taskGradeStatisticsOfSystem"
+                        style=" left:5px; width:430px; height:180px;  "
+                        :style="{  top: participantScoreFlag ? '-15px' : '2px' }"
                     ></div>
                   </div>
                   <div style="position: relative;">
                     <div style="font-size:12px;" class="new_style_grade">成绩分布</div>
-                    <div id="subjectGradeDistribute" style="height: 160px; width:430px;  bottom: 55px; position: relative; left:5px;"></div>
+                    <div id="systemGradeDistribute" style="height: 160px; width:430px;  bottom: 55px; position: relative; left:5px;"></div>
                   </div>
                 </div>
               </div>
@@ -770,6 +785,16 @@ export default {
         pageSize:15,
         paged:true,
       },
+      xitongweidu:{
+        data: [],
+        length:0,
+        xitong_name:[],
+        xitong_grade:[],
+        currentPage:1,
+        totalPage:0,
+        pageSize:15,
+        paged:true,
+      },
       showOperationSpace: false,
       currentFlowInstance: undefined,
       systemTaskId:'',
@@ -797,6 +822,8 @@ export default {
       myChart7:'',
       myChart8:'',
       myChart9:'',
+      myChart10:'',
+      myChart11:'',
       scrollTableConfig:{
         header: ['课目名称', '指令分类', '特情注入', '指令内容', '模训系统', '时间'],
         waitTime:1500,
@@ -1527,6 +1554,10 @@ export default {
             }
           })
           this.systemSubGradeValue = this.systemOptionForTask[0].value
+          // 获取某个任务下单位参与与课目人员的的成绩统计
+          this.getSystemSubjectPeopleScore(this.wholeOutTaskId,this.systemSubGradeValue)
+          // 获取某个任务下单位参与与课目人员的的成绩分布
+          this.getSystemSubjectPeopleDistribution(this.wholeOutTaskId,this.systemSubGradeValue)
         }
       }
     },
@@ -1554,6 +1585,10 @@ export default {
       this.getUnitSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
       // 获取某个任务下单位参与与课目人员的的成绩分布
       this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
+      // 获取某个任务下单位参与与课目人员的的成绩统计
+      this.getSystemSubjectPeopleScore(this.wholeOutTaskId,this.systemSubGradeValue)
+      // 获取某个任务下单位参与与课目人员的的成绩分布
+      this.getSystemSubjectPeopleDistribution(this.wholeOutTaskId,this.systemSubGradeValue)
 
       // 建立指令websocket 链接
       this.initInstructWebsoket()
@@ -1849,11 +1884,10 @@ export default {
     },
     // 切换一个系统查看课目的分数
     changeSystemSubGrade(){
-      console.log('ckx debug systemSubGradeValue ', this.systemSubGradeValue )
       // 获取某个任务下单位参与与课目人员的的成绩统计
-      this.getSystemSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
+      this.getSystemSubjectPeopleScore(this.wholeOutTaskId,this.systemSubGradeValue)
       // 获取某个任务下单位参与与课目人员的的成绩分布
-      this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
+      this.getSystemSubjectPeopleDistribution(this.wholeOutTaskId,this.systemSubGradeValue)
     },
 
     // 获取某一个任务课目状态占比
@@ -1897,7 +1931,7 @@ export default {
       }
     },
 
-    // 获取某个任务下单位参与与课目人员的的成绩统计
+    // 获取某个任务下单位参与课目人员的的成绩统计
     async getUnitSubjectPeopleScore(taskId,unitId){
       let params={}
       const res = await request(`/dt_screen/rest/v1/statistics/${taskId}/unit/${unitId}/participantScore`, 'get', params, false)
@@ -1923,35 +1957,93 @@ export default {
         this.danweiweidu.totalPage=Math.ceil(this.danweiweidu.totalPage);
         console.log("数据量，页面数据量，当前页面,页面数",value.length,this.danweiweidu.pageSize,this.danweiweidu.currentPage,this.danweiweidu.totalPage)
         // this.initEchartsSubjectGradeStatistics(category, value)
-        this.updateChart();
+        this.updateChart(0);
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
+    // 获取某个任务下系统参与课目人员的的成绩统计
+    async getSystemSubjectPeopleScore(taskId,systemId){
+      let params={}
+      const res = await request(`/dt_screen/rest/v2/statistics/${taskId}/system/${systemId}/participantScore`, 'get', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        const { category, value  } = data
+
+        this.xitongweidu.xitong_name = category
+        this.xitongweidu.xitong_grade = value
+
+        value.forEach(item=>Number(item))
+        if(category.length){
+          this.participantScoreFlag=false
+        }else {
+          this.participantScoreFlag=true
+        }
+        this.updatekeyOther=new Date().getTime()
+
+        // console.log("name and grade: ", this.danweiweidu.danwei_name,this.danweiweidu.danwei_grade)
+        this.xitongweidu.length=value.length
+        this.xitongweidu.totalPage= (value.length)/(this.xitongweidu.pageSize)
+        this.xitongweidu.totalPage=Math.ceil(this.xitongweidu.totalPage);
+        console.log("数据量，页面数据量，当前页面,页面数",value.length,this.danweiweidu.pageSize,this.danweiweidu.currentPage,this.danweiweidu.totalPage)
+        // this.initEchartsSubjectGradeStatistics(category, value)
+        this.updateChart(1);
       } else {
         this.$message.error(errorMessage)
       }
     },
-    previousPage() {
-      console.log("向前",this.danweiweidu.currentPage)
-      if (this.danweiweidu.currentPage > 1) {
-        this.danweiweidu.currentPage--;
-        this.updateChart();
+    previousPage(type) {
+      if (type === 0) {
+        if (this.danweiweidu.currentPage > 1) {
+          this.danweiweidu.currentPage--;
+          this.updateChart(0);
+        }
+      }
+      if (type === 1) {
+        if (this.xitongweidu.currentPage > 1) {
+          this.xitongweidu.currentPage--;
+          this.updateChart(1);
+        }
       }
     },
-    nextPage() {
-      console.log("向后",this.danweiweidu.currentPage)
-      if (this.danweiweidu.currentPage < this.danweiweidu.totalPage) {
-        this.danweiweidu.currentPage++;
-        this.updateChart();
+    nextPage(type) {
+      if (type === 0) {
+        if (this.danweiweidu.currentPage < this.danweiweidu.totalPage) {
+          this.danweiweidu.currentPage++;
+          this.updateChart(0);
+        }
+      }
+      if (type === 1) {
+        if (this.xitongweidu.currentPage < this.xitongweidu.totalPage) {
+          this.xitongweidu.currentPage++;
+          this.updateChart(0);
+        }
       }
     },
-    updateChart() {
-      const start = (this.danweiweidu.currentPage - 1) * this.danweiweidu.pageSize;
-      const end = start + this.danweiweidu.pageSize;
-      // 获取当前页需要显示的数据
-      // const pageData = this.value.slice(start, end);
-      const pageData1 = this.danweiweidu.danwei_name.slice(start, end);
-      const pageData2 = this.danweiweidu.danwei_grade.slice(start, end);
-      // 更新echarts的data选项，设置为当前页的数据
-      console.log("数据",pageData1, pageData2)
-      this.initEchartsSubjectGradeStatistics(pageData1, pageData2)
+    updateChart(type) {
+      if (type === 0) {
+        const start = (this.danweiweidu.currentPage - 1) * this.danweiweidu.pageSize;
+        const end = start + this.danweiweidu.pageSize;
+        // 获取当前页需要显示的数据
+        // const pageData = this.value.slice(start, end);
+        const pageData1 = this.danweiweidu.danwei_name.slice(start, end);
+        const pageData2 = this.danweiweidu.danwei_grade.slice(start, end);
+        // 更新echarts的data选项，设置为当前页的数据
+        console.log("数据",pageData1, pageData2)
+        this.initEchartsSubjectGradeStatistics(pageData1, pageData2)
+      }
+      if (type === 1) {
+        const start = (this.xitongweidu.currentPage - 1) * this.xitongweidu.pageSize;
+        const end = start + this.xitongweidu.pageSize;
+        // 获取当前页需要显示的数据
+        // const pageData = this.value.slice(start, end);
+        const pageData1 = this.xitongweidu.xitong_name.slice(start, end);
+        const pageData2 = this.xitongweidu.xitong_grade.slice(start, end);
+        // 更新echarts的data选项，设置为当前页的数据
+        console.log("数据",pageData1, pageData2)
+        this.initEchartsTaskMemberGradeOfSystem(pageData1, pageData2)
+      }
+
     },
 
     onCurrentPageChange_grade (newCurrentPage) {
@@ -1959,7 +2051,7 @@ export default {
       console.log("1:  ",newCurrentPage )//当前页面
       console.log("2:  ",this.danweiweidu.pageSize )
       console.log("3:  ",this.oldPage)
-      this.updateChart()
+      this.updateChart(0)
     },
     /**
      * 表格分页每页显示数量变化
@@ -1969,9 +2061,18 @@ export default {
       console.log("hhhh2:  ",newPageSize )
       this.danweiweidu.pageSize = newPageSize;
       this.danweiweidu.currentPage = 1
-      this.updateChart()
+      this.updateChart(0)
 
     },
+    onCurrentPageChange_system_grade (newCurrentPage) {
+      this.xitongweidu.currentPage=newCurrentPage
+      this.updateChart(1)
+    },
+    onPageSizeChange_system_grade (newPageSize) {
+      this.xitongweidu.pageSize = newPageSize;
+      this.xitongweidu.currentPage = 1
+      this.updateChart(1)
+    },
 
     // 获取全部任务分布
     async getAllTaskDistribution(){
@@ -2020,6 +2121,28 @@ export default {
         this.$message.error(errorMessage)
       }
     },
+    // 获取某个任务下系统参与课目人员的的成绩分布
+    async getSystemSubjectPeopleDistribution(taskId, systemId){
+      let params={}
+      const res = await request(`/dt_screen/rest/v2/statistics/${taskId}/system/${systemId}/participantScore/distribution`, 'get', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        console.log('获取某个任务下单位参与与课目人员的的成绩分布', data);
+        const { category, value  } = data
+        let alldistributionData=[]
+        if(category.length){
+          category.forEach((item,index)=>{
+            alldistributionData.push({
+              name: item,
+              value: value[index]
+            })
+          })
+          this.initEchartsSystemgradeDistribute(alldistributionData)
+        }
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
 
     // 获取某一个单位的任务完成率
     async getItemUnits(){
@@ -2584,6 +2707,116 @@ export default {
         that.myChart9.resize();
       })
     },
+    // 获取某个任务下系统参与与课目人员的的成绩分布
+    initEchartsSystemgradeDistribute(chartData){
+      if(this.myChart11 !=null && this.myChart11  != "" && this.myChart11  != undefined){
+        this.myChart11.dispose();
+      }
+      this.myChart11  = echarts.init(document.getElementById('systemGradeDistribute'));
+      var option = {
+        xAxis: {
+          type: 'category',
+          splitLine: {
+            show:false
+          },
+          axisLine: {
+            //  改变x轴颜色
+            show: true,
+            lineStyle: {
+              color: "#AEE6FC",
+            }
+          },
+          axisLabel: {
+            //  改变x轴字体颜色和大小
+            show: true,
+            textStyle: {
+              color: 'AEE6FC',
+              fontSize: 12,
+            },
+            rotate:'25'
+          },
+        },
+        grid: {
+          top:'10',
+          left: '15',
+          right: '15',
+          bottom:'55',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show:false
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#AEE6FC",
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#AEE6FC",
+              fontSize:12
+            }
+          },
+          minInterval:1
+        },
+        series: [
+          {
+            symbolSize: (params) => {
+              // let markSize = Math.sqrt(params[1]) * 3;
+              // markSize = markSize < 12 ? 12 : markSize;
+              let markSize = 12;
+              return markSize;
+            },
+            symbol: 'circle',
+            data: ((data) => {
+              var arr = [];
+              data.forEach((items) => {
+                var itemName = items.name;
+                var itemValue = items.value;
+                var itemStyle = 15;
+                var itemTitle = items.title;
+                arr.push([itemName, itemValue, itemStyle, itemTitle]);
+              });
+              return arr;
+            })(chartData),
+
+            type: 'scatter',
+            label: {
+              show: true, // 是否显示标签
+              formatter: function(params) { // 标签内容的格式化模板
+                return  params.value[1]; // 数值显示格式示例
+              },
+              position: 'right', // 标签位置，可以设置为 'top'、'bottom'、'left'、'right' 或具体的像素值
+              fontSize: 10, // 标签字体大小
+              color: '#55d2c3', // 标签字体颜色
+              // backgroundColor: '#fff', // 标签背景色
+              // borderColor: '#999', // 标签边框颜色
+              // borderWidth: 1, // 标签边框宽度
+              // borderRadius: 4 // 标签边框圆角半径
+            },
+            itemStyle: {
+              normal: {
+                color: '#FFF8A5',
+              },
+            },
+          },
+        ]
+      };
+
+      this.myChart11.setOption(option);
+      let that =this
+      window.addEventListener('resize',function () {//执行
+        console.log('ckx debug that.myChart5 ', )
+        that.myChart11.resize();
+      })
+    },
 
     // 全部任务分数统计
     initEchartsgradeStatistics(category, value){
@@ -2687,7 +2920,7 @@ export default {
       })
     },
 
-    // 获取某个任务下单位参与与课目人员的的成绩统计
+    // 获取某个任务下单位参与课目人员的的成绩统计
     initEchartsSubjectGradeStatistics(category, value){
       if(this.myChart8 !=null && this.myChart8  != "" && this.myChart8  != undefined){
         this.myChart8.dispose();
@@ -2800,6 +3033,119 @@ export default {
       })
     },
 
+    // 获取某个任务下系统参与课目人员的的成绩统计
+    initEchartsTaskMemberGradeOfSystem(category, value){
+      if(this.myChart10 !=null && this.myChart10  != "" && this.myChart10  != undefined){
+        this.myChart10.dispose();
+      }
+      this.myChart10  = echarts.init(document.getElementById('taskGradeStatisticsOfSystem'));
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            crossStyle: {
+              color: '#999'
+            }
+          },
+          textStyle: {
+            fontSize: 11 // 字体大小
+          },
+          confine: true
+        },
+        grid: {
+          top:'20',
+          left: '5',
+          right: '15',
+          bottom:'53',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: category,
+          splitLine:{
+            show:false
+          },
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#AEE6FC",
+              fontSize:8
+            },
+            rotate:'25'
+          },
+          axisLine: { //x轴线的颜色以及宽度
+            show: true,
+            lineStyle: {
+              color: "#AEE6FC",
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine:{
+            show:false
+          },
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#AEE6FC",
+              fontSize:10
+            }
+          },
+          axisLine: { //x轴线的颜色以及宽度
+            show: true,
+            lineStyle: {
+              color: "#AEE6FC",
+            }
+          },
+          minInterval:1
+        },
+        series: [
+          {
+            data: value,
+            type: 'bar',
+            barWidth: 14,
+            itemStyle:{
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#47F3E7' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#22E3CA' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+
+            }
+          }
+        ]
+      };
+      // console.log("11",value.length)
+      // console.log("22",option.series[0].barWidth)//14
+      // console.log("33",option.xAxis.axisLabel.textStyle.fontSize)//8
+
+      // 修改柱状图的宽度和字体大小
+      if(value.length>15){
+        option.series[0].barWidth = 12; // 修改柱状图的宽度为20像素
+        option.xAxis.axisLabel.textStyle.fontSize = 6; // 修改x轴标签的字体大小为12像素
+      }
+
+      // console.log("44",value.length)
+      // console.log("55",option.series[0].barWidth)//14
+      // console.log("66",option.xAxis.axisLabel.textStyle.fontSize)//8
+      this.myChart10.setOption(option);
+      let that =this
+      window.addEventListener('resize',function () {//执行
+        that.myChart10.resize();
+      })
+    },
+
     // 某个任务全部课目状态占比
     initEchartsSubjectStatus(allTaskStatusData){
       if(this.myChart7 !=null && this.myChart7  != "" && this.myChart7  != undefined){