修复缺陷；上传web驾驶舱

src/views/board/charts/drill/report.vue

@@ -58,6 +58,14 @@ export default {
       type: String,
       isRequired: true,
     },
+    maxDiagram: {
+      type: Number,
+      isRequired: false,
+    },
+    orgName:{
+      type: String,
+      isRequired: false,
+    },
   },
   data() {
     return {
@@ -129,13 +137,17 @@ export default {
       };
 
       for (let item of r) {        
-        if (data.all.length >= 16) {
+        if (this.maxDiagram && data.name.length >= this.maxDiagram) {
           break;
         }
         data.all.push(item.total);
         data.completed.push(item.completed);
         data.rate.push((item.completedRate * 100).toFixed(0));
-        data.name.push(item.orgName);
+        if(this.orgName && item.orgName.startsWith(this.orgName)){
+          data.name.push(item.orgName.substr(this.orgName.length));
+        }else{
+          data.name.push(item.orgName);
+        }
       }
       this.data = data;
 

src/views/board/charts/edu/report.vue

@@ -56,6 +56,14 @@ export default {
       type: String,
       isRequired: true,
     },
+    maxDiagram: {
+      type: Number,
+      isRequired: false,
+    },
+    orgName: {
+      type: String,
+      isRequired: false,
+    },
   },
   data() {
     return {
@@ -126,13 +134,17 @@ export default {
       };
 
       for (let item of r) {
-        if (data.all.length >= 16) {
+        if (this.maxDiagram && data.name.length >= this.maxDiagram) {
           break;
         }
         data.all.push(item.taskTotal);
         data.completed.push(item.completedCount);
         data.rate.push((item.completedRate * 100).toFixed(0));
-        data.name.push(item.orgName);
+        if (this.orgName && item.orgName.startsWith(this.orgName)) {
+          data.name.push(item.orgName.substr(this.orgName.length));
+        } else {
+          data.name.push(item.orgName);
+        }
       }
       this.data = data;
 
@@ -258,7 +270,7 @@ export default {
             yAxisIndex: 1,
             data: this.data.rate,
             tooltip: {
-              valueFormatter: (value)=>value+"%",
+              valueFormatter: (value) => value + "%",
             },
             // itemStyle:{
             //   normal:{

src/views/board/charts/ga38/report.vue

@@ -52,13 +52,17 @@ const types = [
 ];
 export default {
   props: {
-    orgId:{
+    orgId: {
       type: String,
       isRequired: true,
     },
-    orgName:{
+    maxDiagram: {
+      type: Number,
+      isRequired: false,
+    },
+    orgName: {
       type: String,
-      isRequired: true,
+      isRequired: false,
     },
     // title: {
     //   type: String,
@@ -135,17 +139,21 @@ export default {
       };
 
       for (let p in r) {
-        let item=r[p]
-        if(data.name.length>=16){
+        let item = r[p];
+        if (this.maxDiagram && data.name.length >= this.maxDiagram) {
           break;
         }
         data.ga2021.push(item.ga382021);
         data.ga2015.push(item.ga382015);
         data.rate.push((item.reachRate * 100).toFixed(0));
-        data.name.push(item.orgName);       
+        if (this.orgName && item.orgName.startsWith(this.orgName)) {
+          data.name.push(item.orgName.substr(this.orgName.length));
+        } else {
+          data.name.push(item.orgName);
+        }
       }
       this.data = data;
-      
+
       // console.info(this.data);
     },
 
@@ -171,8 +179,8 @@ export default {
           confine: true,
           axisPointer: {
             type: "shadow",
-          },         
-          
+          },
+
           // formatter: "完成率：{c}%",
         },
         legend: {
@@ -187,7 +195,6 @@ export default {
           bottom: "2%",
           top: "20px",
           containLabel: true,
-
         },
 
         xAxis: [
@@ -223,11 +230,11 @@ export default {
             // },
           },
         ],
-        series: [       
+        series: [
           {
             name: "GA38-2021",
             type: "bar",
-            stack:'ga38',
+            stack: "ga38",
             barWidth: "14",
             // label: {
             //   show: true,
@@ -260,7 +267,7 @@ export default {
           {
             name: "GA38-2015",
             type: "bar",
-            stack:'ga38',
+            stack: "ga38",
             barWidth: "14",
             // label: {
             //   show: true,
@@ -271,10 +278,10 @@ export default {
           {
             name: "达标率",
             type: "bar",
-            stack:'ga38',
+            stack: "ga38",
             barWidth: "14",
-            tooltip:{
-              valueFormatter:(v)=>`${v}%`
+            tooltip: {
+              valueFormatter: (v) => `${v}%`,
             },
             // label: {
             //   show: true,

src/views/board/charts/resumption/report_bar.vue → src/views/board/charts/resumption/report.vue

@@ -21,6 +21,7 @@
 <script>
 import "./../../board.scss";
 import * as echarts from "echarts";
+import { resumption } from "@/api/board/cockpit.js";
 import {
   findMaxIndex,
   getChartDOMSize,
@@ -55,18 +56,22 @@ export default {
       type: String,
       isRequired: true,
     },
-    orgName:{
-      type: String,
-      isRequired: true,
+    maxDiagram:{
+      type:Number,
+      isRequired:false,      
     },
-    title: {
+    orgName:{
       type: String,
-      isRequired: true,
-    },
-    api: {
-      type: Function,
-      isRequired: true,
+      isRequired: false,
     },
+    // title: {
+    //   type: String,
+    //   isRequired: true,
+    // },
+    // api: {
+    //   type: Function,
+    //   isRequired: true,
+    // },
   },
   data() {
     return {
@@ -101,7 +106,6 @@ export default {
 
   created() {
     this.types = types;
-    this.maxDisplay = 16;
     this.refreshTime = 1 * 10 * 1000;
     this.isMouseOver = false;
   },
@@ -128,7 +132,7 @@ export default {
       this.isMouseOver = false;
     },
     async getData() {
-      let r = (await this.api({ orgId: this.orgId, period: this.activeName }))
+      let r = (await resumption({ orgId: this.orgId, period: this.activeName }))
         .data;
       let data = {
         all: [],
@@ -138,14 +142,14 @@ export default {
       };
 
       for (let item of r) {
-        if(data.all.length>=16){
+        if(this.maxDiagram && data.all.length>=this.maxDiagram){
           break;
         }
         data.all.push(item.taskTotal);
         data.completed.push(item.completedCount);
         data.rate.push((item.completedRate * 100).toFixed(0));
         
-        if(item.orgName.startsWith(this.orgName)){
+        if(this.orgName && item.orgName.startsWith(this.orgName)){
           data.name.push(item.orgName.substr(this.orgName.length));
         }else{
           data.name.push(item.orgName);

src/views/board/charts/resumption/report_line.vue

@@ -1,282 +0,0 @@
-<!--  -->
-<template>
-  <div class="chart-template chart-template-withperiod">
-    <p>
-      <span> {{ title }} </span>
-    </p>
-    <div>
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane
-          v-for="t in types"
-          :key="t.value"
-          :label="t.text"
-          :name="t.value"
-        ></el-tab-pane>
-      </el-tabs>
-    </div>
-    <div ref="chart"></div>
-  </div>
-</template>
-
-<script>
-import "./../../board.scss";
-import * as echarts from "echarts";
-import {
-  findMaxIndex,
-  getChartDOMSize,
-  getNextPeriod,
-  getPeriodText,
-} from "../../utils.js";
-const types = [
-  {
-    text: "近7天",
-    value: "1",
-  },
-  {
-    text: "近七周",
-    value: "2",
-  },
-  {
-    text: "近七月",
-    value: "3",
-  },
-];
-export default {
-  props: {
-    orgId: {
-      type: String,
-      isRequired: true,
-    },
-    title: {
-      type: String,
-      isRequired: true,
-    },
-  },
-  data() {
-    return {
-      data: {
-        all: [],
-        completed: [],
-        name: [],
-      },
-      activeName: types[0].value,
-    };
-  },
-
-  components: {},
-
-  computed: {},
-
-  watch: {
-    orgId: {
-      deep: true,
-      handler(val) {
-        this.resetTimer();
-        this.getData();
-      },
-    },
-    data: {
-      deep: true,
-      handler() {
-        this.initMap();
-      },
-    },
-  },
-
-  created() {
-    this.types = types;
-    this.maxDisplay = 16;
-    this.refreshTime = 1 * 10 * 1000;
-    this.isMouseOver = false;
-  },
-
-  async mounted() {
-    window.addEventListener("resize", this.windowResize);
-  },
-  beforeDestroy() {
-    this.timer && clearInterval(this.timer);
-    this.timer = null;
-
-    window.removeEventListener("resize", this.windowResize);
-  },
-
-  methods: {
-    handleClick() {
-      this.resetTimer();
-      this.getData();
-    },
-    handleMouseEnter() {
-      this.isMouseOver = true;
-    },
-    handleMouseLeave() {
-      this.isMouseOver = false;
-    },
-    async getData() {
-      let bs = parseInt(this.activeName) + 1;
-      this.data = {
-        all: [
-          210 * bs,
-          101 * bs,
-          117 * bs,
-          78 * bs,
-          107 * bs,
-          105 * bs,
-          124 * bs,
-        ],
-        completed: [
-          155 * bs,
-          99 * bs,
-          110 * bs,
-          78 * bs,
-          104 * bs,
-          102 * bs,
-          115 * bs,
-        ],
-        name: ["10.25", "10.24", "10-23", "10-22", "10-21", "10-20", "10-19"],
-      };
-      this.data.rate = [];
-      this.data.all.forEach((v, i) => {
-        this.data.rate[i] = (this.data.completed[i] / this.data.all[i]) * 100;
-      });
-      console.info(this.data);
-    },
-
-    windowResize() {
-      this.myChart && this.myChart.resize();
-    },
-    initMap() {
-      this.myChart && this.myChart.dispose();
-      let chart = this.$refs["chart"];
-
-      // 基于准备好的dom，初始化echarts实例
-      this.myChart = echarts.init(
-        chart
-        // document.getElementById("commAlarmEvent_Chart")
-      );
-
-   
-      let t = this;
-      // 指定图表的配置项和数据
-      var option = {
-          color: ["rgb(250,200,88)"],
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "shadow",
-          },
-          formatter: "{c}%",
-        },
-        legend: {
-          show: true,
-          textStyle: {
-            color: "rgb(245, 245, 245)",
-          },
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "2%",
-          top: "40px",
-          containLabel: true,
-        },
-
-        xAxis: [
-          {
-            type: "category",
-            data: this.data.name,
-            // data: this.mapdata.totalDataVo.xlist,
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                type: "solid",
-                color: "rgb(245, 245, 245)", //左边线的颜⾊
-              },
-            },
-            axisLabel: {
-              interval: 0,
-              rotate: -30,
-              fontSize: 12,
-              // color: "#fff",
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            minInterval: 1,
-            min:Math.min(...this.data.rate,50),
-            max:100,
-            // max: function (value) {
-            //   let m = value.max == Math.ceil(value.max) ? Math.ceil(value.max * 1.0001) : Math.ceil(value.max);
-            //   return m
-            // },
-          },
-        ],
-        series: [
-          // {
-          //   name: "总数",
-          //   type: "bar",
-          //   barWidth: "14",
-          //   // label: {
-          //   //   show: true,
-          //   //   position: 'top',
-          //   // },
-          //   data: this.data.all,
-          // },
-          {
-            name: "完成率",
-            type: "line",
-            barWidth: "14",
-            // label: {
-            //   show: true,
-            //   position: 'top',
-            // },
-            data: this.data.rate,
-            itemStyle: {
-              normal: {
-                label: {
-                  formatter: function (param) {
-                    // if (t.data.all[param.dataIndex]) {
-                    //   let rate = param.value / t.data.all[param.dataIndex];
-                    //   return (Math.floor(rate * 1000) / 10).toFixed(1) + "%";
-                    // } else {
-                    //   return "";
-                    // }
-                    return param.value.toFixed(1) + "%";
-                  },
-                  show: true,
-                  position: "top",
-                  textStyle: {
-                    fontWeight: "bolder",
-                    fontSize: "12",
-                    color: "rgb(245, 245, 245)",
-                  },
-                },
-              },
-            },
-          },
-        ],
-      };
-      if (option && typeof option === "object") {
-        this.myChart.setOption(option);
-      }
-    },
-
-    resetTimer() {
-      this.timer && clearInterval(this.timer);
-      this.timer = setInterval(() => {
-        if (this.isMouseOver) {
-          return;
-        }
-        this.activeName = getNextPeriod(this.types, this.activeName);
-        this.getData();
-      }, this.refreshTime);
-    },
-  },
-};
-</script>
-<style lang="less" scoped></style>

src/views/board/charts/safetycheck/report.vue

@@ -14,18 +14,23 @@
         ></el-tab-pane>
       </el-tabs>
     </div>
-    <div style="position:relative">
-      <div ref="chart" style="height:100%;"></div>
-      <div style="position:absolute;right:0px;top:25px">
+    <div style="position: relative">
+      <div ref="chart" style="height: 100%"></div>
+      <div
+        style="
+          position: absolute;
+          right: 0px;
+          top: 28px;
+          height: calc(100% - 50px);
+        "
+      >
         <div v-for="item in this.data" :key="item.type" class="checkType-item">
-          <span>{{item.type}}</span>
-          <span>{{item.total}}</span>
-          <span>{{item.completed}}</span>
+          <span>{{ item.type }}</span>
+          <span>{{ item.total }}</span>
+          <span>{{ item.completed }}</span>
         </div>
       </div>
     </div>
-    
-    
   </div>
 </template>
 
@@ -168,37 +173,36 @@ export default {
           textStyle: {
             color: "rgb(245, 245, 245)",
           },
-          type:'scroll',
-          right:5,
+          type: "scroll",
+          right: 5,
         },
-        color:["#91cc75",'#fac858'],
+        color: ["#91cc75", "#fac858"],
         grid: {
           // left: "3%",
           // right: "4%",
           bottom: "2%",
           top: "20px",
           // containLabel: true,
-
         },
 
         radar: {
           indicator: this.data.map((d) => ({ name: d.type })),
-          center:['28%','50%'],
-          radius:55,
-          axisName:{
-            color:'#fff'
-          }
+          center: ["28%", "50%"],
+          radius: 55,
+          axisName: {
+            color: "#fff",
+          },
         },
         series: [
           {
             type: "radar",
             data: [
               {
-                value: this.data.map(d=>d.total),
+                value: this.data.map((d) => d.total),
                 name: "应检查",
               },
               {
-                value: this.data.map(d=>d.completed),
+                value: this.data.map((d) => d.completed),
                 name: "已检查",
               },
             ],
@@ -224,15 +228,17 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  .checkType-item{
-    font-size:12px;
-
-    & >span{
-      display: inline-block;
-      width:40px;
-    }
-    &>span:first-child{
-      width:80px;
-    }   
+.checkType-item {
+  font-size: 12px;
+  // line-height: 22px;
+  height: 20%;
+  max-height: 30px;
+  & > span {
+    display: inline-block;
+    width: 40px;
+  }
+  & > span:first-child {
+    width: 80px;
   }
+}
 </style>

src/views/board/index.vue

@@ -29,42 +29,47 @@
         <div>
           <resumptionReport
             :orgId="selectedOrg.id"
-            :api="api.resumption"
+            :maxDiagram="maxDiagram"
             :orgName="selectedOrg.name"
-            title="日常安全履职"
           />
         </div>
         <div>
           <question :orgId="selectedOrg.id" />
         </div>
         <div>
-          <ga38-chart :orgId="selectedOrg.id" />
+          <ga38-chart
+            :orgId="selectedOrg.id"
+            :maxDiagram="maxDiagram"
+            :orgName="selectedOrg.name"
+          />
         </div>
       </div>
       <div>
         <div>
           <div>
-            <mapChart :orgId="selectedOrg.id"/>
+            <mapChart :orgId="selectedOrg.id" />
           </div>
           <div>
-            <comprehesive-chart :orgId="selectedOrg.id"/>
+            <comprehesive-chart :orgId="selectedOrg.id" />
           </div>
         </div>
       </div>
       <div>
         <div>
-          <safety-check-chart
-            :orgId="selectedOrg.id"
-          />
+          <safety-check-chart :orgId="selectedOrg.id" />
         </div>
         <div>
           <drill-chart
             :orgId="selectedOrg.id"
+            :maxDiagram="maxDiagram"
+            :orgName="selectedOrg.name"
           />
         </div>
         <div>
           <eduChart
             :orgId="selectedOrg.id"
+            :maxDiagram="maxDiagram"
+            :orgName="selectedOrg.name"
           />
         </div>
 
@@ -80,15 +85,15 @@
 
 <script>
 import { mapGetters } from "vuex";
-import resumptionReport from "./charts/resumption/report_bar.vue";
+import resumptionReport from "./charts/resumption/report.vue";
 import question from "./charts/question/report.vue";
 import mapChart from "./charts/map/report.vue";
 // import orgStatis from "./charts/org/report.vue";
-import ga38Chart from './charts/ga38/report.vue'
-import comprehesiveChart from './charts/comprehesive/report.vue'
-import safetyCheckChart from './charts/safetycheck/report.vue'
-import drillChart from './charts/drill/report.vue'
-import eduChart from './charts/edu/report.vue'
+import ga38Chart from "./charts/ga38/report.vue";
+import comprehesiveChart from "./charts/comprehesive/report.vue";
+import safetyCheckChart from "./charts/safetycheck/report.vue";
+import drillChart from "./charts/drill/report.vue";
+import eduChart from "./charts/edu/report.vue";
 import dayjs from "dayjs";
 import * as api from "@/api/board/cockpit.js";
 
@@ -105,7 +110,8 @@ export default {
         id: null,
         name: null,
       },
-      orgCascaderSelectedIds:[],
+      maxDiagram: null,
+      orgCascaderSelectedIds: [],
       electricHost: undefined,
       api,
     };
@@ -119,7 +125,7 @@ export default {
     comprehesiveChart,
     safetyCheckChart,
     drillChart,
-    eduChart
+    eduChart,
   },
 
   computed: {
@@ -187,8 +193,8 @@ export default {
       id: this.orgId,
       name: this.orgName,
     };
-    
-    this.orgCascaderSelectedIds=[this.orgId]
+
+    this.orgCascaderSelectedIds = [this.orgId];
   },
   beforeDestroy() {
     clearInterval(this.orgtimer);
@@ -222,9 +228,14 @@ export default {
 
       this.selectedOrg = {
         id: checked[0].data.id,
-        path:checked[0].data.path,
         name: checked[0].data.shortName,
       };
+
+      if (checked[0].data.type == 3) {
+        this.maxDiagram = 10;
+      } else {
+        this.maxDiagram = null;
+      }
     },
   },
 };
@@ -524,11 +535,11 @@ export default {
 </style>
 <style lang="scss">
 .board-org-popper {
-   .el-cascader-menu__wrap {
+  .el-cascader-menu__wrap {
     height: auto !important;
   }
 
-   .el-scrollbar__wrap {
+  .el-scrollbar__wrap {
     overflow: auto;
   }
 }