看板调整

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

@@ -251,20 +251,20 @@ export default {
               // color:'#fff',
               show:false
             },
-             tooltip:{
-              position: "right",              
-              textStyle:{
-                // color:'#fff',
-              },
-              // backgroundColor:'rgba(184,189,192,1)',
-              formatter:function(param){               
-                return `<div >
-                <div> ${param.data.name} </div>
-                <div>履职总数：85 </div>
-                <div> 已完成：67 </div>
-                </div>`
-              }
-            },
+            //  tooltip:{
+            //   position: "right",              
+            //   textStyle:{
+            //     // color:'#fff',
+            //   },
+            //   // backgroundColor:'rgba(184,189,192,1)',
+            //   formatter:function(param){               
+            //     return `<div >
+            //     <div> ${param.data.name} </div>
+            //     <div>履职总数：85 </div>
+            //     <div> 已完成：67 </div>
+            //     </div>`
+            //   }
+            // },
             itemStyle: {
               color: "#ddb926",
             },           

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

@@ -1,96 +1,38 @@
 <!--  -->
 <template>
   <div
-    class="chart-template map-template"
-    style="display: flex; flex-direction: row"
+    class="chart-template"
   >
-    <div>机构统计</div>
-    <!-- <div>
-      <div>
-        <span>营业网点</span>
-        <span>
-          <span>总数：</span>
-          <span>3020</span>
-        </span>
-        <span>
-          <span>达标数：</span>
-          <span>500</span>
-        </span>
-        <span>
-          <span>自有产权数：</span>
-          <span>1500</span>
-        </span>
-        <span>
-          <span>区域外网数：</span>
-          <span>80</span>
-        </span>
+    <p>机构统计</p>    
+    <div>
+      <div class="content">       
+        <span> 行社 56 </span>
+        <span> 营业网点 2968 </span>
+        <span> 离行 1202 </span>
+        <span> 监控中心 100 </span>
       </div>
-      <div>
-        <span>自助设备</span>
-        <span>
-          <span>总数：</span>
-          <span>4000</span>
-        </span>
-        <span>
-          <span>在行式穿墙机具：</span>
-          <span>2000</span>
-        </span>
-        <span>
-          <span>在行式堂式机具：</span>
-          <span>1500</span>
-        </span>
-        <span>
-          <span>离行式穿墙机具：</span>
-          <span>2000</span>
-        </span>
-        <span>
-          <span>离行式堂式机具：</span>
-          <span>1500</span>
-        </span>
+      <div class="content">
+        <span> 达标数 3000 </span>
+        <span> GA38-2021 2000  </span>
+        <span> GA38-2015 1000 </span>
       </div>
-      <div>
-        <span>自助银行</span>
-        <span>
-          <span>总数：</span>
-          <span>4000</span>
-        </span>
-        <span>
-          <span>在行式自助银行：</span>
-          <span>2000</span>
-        </span>
-        <span>
-          <span>离行式自助银行：</span>
-          <span>1500</span>
-        </span>
+      <div class="content">
+        <span> 业务库 2101 </span>
+        <span> 一类库 300 </span>
+        <span> 二类库 457 </span>
+        <span> 三类库 400 </span>
+        <span> 四类库 557 </span>
       </div>
-      <div>
-        <span>业务库</span>
-        <span>
-          <span>总数：</span>
-          <span>3020</span>
-        </span>
-        <span>
-          <span>一类库：</span>
-          <span>2000</span>
-        </span>
-        <span>
-          <span>二类库：</span>
-          <span>1500</span>
-        </span>
-        <span>
-          <span>三类库：80</span>
-          <span>80</span>
-        </span>
-        <span>
-          <span>四类库</span>
-          <span>80</span>
-        </span>
+      <div class="content">
+        <span> 自助银行 4000 </span>
+        <span> 离行式自助银行  2100 </span>
+        <span> 在行式自助银行 1900 </span>
       </div>
-    </div> -->
-    <div id="org_Chart"></div>
+      
+    </div>
+    <!-- <div id="commAlarmEvent_Chart"></div> -->
   </div>
 </template>
-
 <script>
 import "./../../board.scss";
 import * as echarts from "echarts";
@@ -100,16 +42,40 @@ import {
   getNextPeriod,
   getPeriodText,
 } from "../../utils.js";
-
+const types = [
+  {
+    text: "今天",
+    value: "0",
+  },
+  {
+    text: "近7天",
+    value: "1",
+  },
+  {
+    text: "近30天",
+    value: "2",
+  },
+  {
+    text: "近90天",
+    value: "3",
+  },
+  {
+    text: "本年",
+    value: "4",
+  },
+];
 export default {
   props: ["orgId"],
   data() {
     return {
       data: {
-        all: [],
-        completed: [],
-        name: [],
+        safetyCheck: {},
+        edu: {},
+        drill: {},
+        monitor: {},
+        visit: {},
       },
+      activeName: types[0].value,
     };
   },
 
@@ -121,23 +87,17 @@ export default {
     orgId: {
       deep: true,
       handler(val) {
-        // this.resetTimer();
+        this.resetTimer();
         this.getData();
       },
-    },
-    data: {
-      deep: true,
-      handler() {
-        this.initMap();
-      },
-    },
+    },   
   },
 
   created() {
-    // this.types = types;
+    this.types = types;
     this.maxDisplay = 16;
-    // this.refreshTime = 1 * 10 * 1000;
-    // this.isMouseOver = false;
+    this.refreshTime = 1 * 10 * 1000;
+    this.isMouseOver = false;
   },
 
   async mounted() {
@@ -162,337 +122,65 @@ export default {
       this.isMouseOver = false;
     },
     async getData() {
-      // let bs = parseInt(this.activeName) + 1;
+      let bs = parseInt(this.activeName) + 1;
       this.data = {
-        all: 500,
-        unconfirm: 112, //未确认
-        auditing: 20, //异议审批中
-        unreform: 50, //待整改
-        notQuestion: 4,
-        reformed: 500 - 112 - 20 - 50 - 4,
+        safetyCheck: {
+          all: 18 * bs,
+          completed: 16 * bs,
+        },
+        edu: { all: 2 * bs, completed: 1 * bs },
+        drill: { all: 3 * bs, completed: 2 * bs },
+        monitor: { all: 66 * bs, completed: 65 * bs },
+        visit: {
+          times: 5 * bs,
+          personCount: 6 * bs,
+          accompanyCount: 2 * bs,
+        },
       };
     },
 
     windowResize() {
       this.myChart && this.myChart.resize();
     },
-    initMap() {
-      this.myChart && this.myChart.dispose();
-
-      // 基于准备好的dom，初始化echarts实例
-      this.myChart = echarts.init(document.getElementById("org_Chart"));
-
-      let t = this;
-      // 指定图表的配置项和数据
-      var option = {
-        backgroundColor: "rgba(0,0,0,0)",
-        // color: ["#C0FBB5", "#46557B"],
-        legend: {
-          show: false,
-          icon: "circle",
-          //   data: ["达标数", "自有产权数","区域外网数"],
-          textStyle: {
-            color: "#fff",
-            // fontSize:18
-          },
-          left: "center",
-          top: "5%",
-        },
-        tooltip: {
-          trigger: "item",
-        },
-        series: [
-          {
-            name: "营业网点",
-            type: "pie",
-            radius: ["65%", "85%"],
-            center: [`12.5%`, "50%"],
-            data: [
-              {
-                name: "达标数",
-                value: 2000,
-              },
-              {
-                name: "自有产权数",
-                value: 1500,
-              },
-              {
-                name: "区域外网数",
-                value: 80,
-              },
-            ],
-            label: {
-              show: true,
-              position: "center",
-              color: "#fff",
-              fontSize: 14,
-              formatter: function (value) {
-                return "3020\n" + "\n营业网点";
-              },
-            },
-            tooltip: {
-              show: true,
-              trigger: "item",
-              backgroundColor: "#b8bdc0",
-              textStyle: {
-                color: "#000",
-              },
-              confine:true,
-              formatter: function (value) {
-                let html=`<div style="z-index:999;">
-                        <div>营业网点</div>
-                        <div>总数：3020</div>
-                        <div>达标数：2000</div>
-                        <div>自有产权数：1500</div>
-                        <div>区域外网数：80</div>
-                    </div>`
-                return html;
-              },
-            },
-
-            //   alignTo: 'none',
-            //   bleedMargin: 5,
-
-            // left: 0,
-            // right: 0,
-            // top: 0,
-            // bottom: 0,
-          },
-          {
-            name: "业务库",
-            type: "pie",
-            radius: ["65%", "85%"],
-            center: [`37.5%`, "50%"],
-            data: [
-              {
-                name: "一类库",
-                value: 2000,
-              },
-              {
-                name: "二类库",
-                value: 1500,
-              },
-              {
-                name: "三类库",
-                value: 80,
-              },
-              {
-                name: "四类库",
-                value: 80,
-              },
-            ],
-            label: {
-              show: true,
-              position: "center",
-              color: "#fff",
-              fontSize: 14,
-              formatter: function (value) {
-                return "2000\n" + "\n业务库";
-              },
-            },
-            tooltip: {
-              show: true,
-              trigger: "item",
-              backgroundColor: "#b8bdc0",
-              textStyle: {
-                color: "#000",
-              },
-              confine: true,
-              formatter: function (value) {
-                let html = `<div style="z-index:999;">
-                        <div>业务库</div>
-                        <div>总数：3020</div>
-                        <div>一类库：2000</div>                        
-                        <div>二类库：1500</div>
-                        <div>三类库：80</div>
-                        <div>四类库：80</div>
-                    </div>`;
-                return html;
-              },
-            },
-
-            //   alignTo: 'none',
-            //   bleedMargin: 5,
-
-            // left: 0,
-            // right: 0,
-            // top: 0,
-            // bottom: 0,
-          },
-          {
-            name: "自助银行",
-            type: "pie",
-            radius: ["62%", "85%"],
-            center: [`62.5%`, "50%"],
-            data: [
-              {
-                name: "在行式自助银行",
-                value: 2000,
-              },
-              {
-                name: "离行式自助银行",
-                value: 1500,
-              },
-            ],
-            label: {
-              show: true,
-              position: "center",
-              color: "#fff",
-              fontSize: 14,
-              formatter: function (value) {
-                return "4000\n" + "\n自助银行";
-              },
-            },
-            tooltip: {
-              show: true,
-              trigger: "item",
-              backgroundColor: "#b8bdc0",
-              textStyle: {
-                color: "#000",
-              },
-              confine: true,
-              formatter: function (value) {
-                let html = `<div style="z-index:999;">
-                        <div>自助银行</div>
-                        <div>总数：4000</div>
-                        <div>在行式自助银行：2000</div>                        
-                        <div>离行式自助银行：1500</div>
-                    </div>`;
-                return html;
-              },
-            },
-          },
-          {
-            name: "自助设备",
-            type: "pie",
-            radius: ["62%", "85%"],
-            center: [`87.5%`, "50%"],
-            data: [
-              {
-                name: "在行式穿墙机具",
-                value: 2000,
-              },
-              {
-                name: "在行式堂式机具",
-                value: 1500,
-              },
-              {
-                name: "离行式穿墙机具",
-                value: 2000,
-              },
-              {
-                name: "离行式堂式机具",
-                value: 1500,
-              },
-            ],
-            label: {
-              show: true,
-              position: "center",
-              color: "#fff",
-              fontSize: 14,
-              formatter: function (value) {
-                return "10000\n" + "\n自助设备";
-              },
-            },
-            tooltip: {
-              show: true,
-              trigger: "item",
-              backgroundColor: "#b8bdc0",
-              textStyle: {
-                color: "#000",
-              },
-              confine: true,
-              formatter: function (value) {
-                let html = `<div style="z-index:999;">
-                        <div>自助设备</div>
-                        <div>总数：4000</div>
-                        <div>在行式穿墙机具：2000</div>                        
-                        <div>在行式堂式机具：1500</div>
-                        <div>离行式穿墙机具：2000</div>                        
-                        <div>离行式堂式机具：1500</div>
-                    </div>`;
-                return html;
-              },
-            },
-          },
-        ],
-      };
-      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);
+      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="scss" scoped>
-.map-template {
-  & > div {
-    margin: 0px;
-    padding: 0px;
-  }
 
-  & > div:first-child {
-    // display: none;
-    width: 30px;
-    height: 100%;
+<style lang="scss" scope>
+.content {
+  display: flex;
+
+  margin-bottom: 20px;
+  margin-left: 5px;
+  margin-right: 5px;
+  border: solid 1px #b8bdc088;
+
+  & > span {
+    margin-right: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    height: 30px;
     color: rgb(245, 245, 245);
-    background-color: #b8bdc088;
-    text-align: center;
     font-size: 14px;
-    writing-mode: vertical-lr;
-    padding-left: 5px;
-    padding-right: 5px;
   }
 
-  // & > div:nth-child(2) {
-  //   height: 100%;
-  //   width: calc(100% - 30px);
-  //   font-size: 14px;
-  //   line-height: 23px;
-  //   display: flex;
-  //   flex-direction: row;
-
-  //   & > div {
-  //     border: solid 1px #b8bdc088;
-  //     background-color: #b8bdc055;
-  //     display: flex;
-  //     flex-direction: column;
-  //     width:calc(25% - 20px);
-  //     margin: 10px;
-      
-
-  //     & > span:first-child {
-  //       background-color: #b8bdc088;
-  //       text-align: center;
-  //     }
-  //     & > span:not(:nth-child(1)) {
-  //       & > span {
-  //         display: inline-block;
-  //       }
-  //       & > span:first-child {
-  //         width: calc(100% - 60px);
-  //         text-align: right;
-  //       }
-  //       & > span:last-child {
-  //         width: 60px;
-  //       }
-  //     }
-  //   }
-  // }
-  & > div:last-child {
-    height: 100%;
-    width: calc(100% - 30px);
+  & > span:first-child {
+    width: 100px;
+    background-color: #b8bdc088;
+    text-align: center;
   }
 }
+
+
 </style>

src/views/board/charts/org/report_pie.vue

@@ -0,0 +1,498 @@
+<!--  -->
+<template>
+  <div
+    class="chart-template map-template"
+    style="display: flex; flex-direction: row"
+  >
+    <div>机构统计</div>
+    <!-- <div>
+      <div>
+        <span>营业网点</span>
+        <span>
+          <span>总数：</span>
+          <span>3020</span>
+        </span>
+        <span>
+          <span>达标数：</span>
+          <span>500</span>
+        </span>
+        <span>
+          <span>自有产权数：</span>
+          <span>1500</span>
+        </span>
+        <span>
+          <span>区域外网数：</span>
+          <span>80</span>
+        </span>
+      </div>
+      <div>
+        <span>自助设备</span>
+        <span>
+          <span>总数：</span>
+          <span>4000</span>
+        </span>
+        <span>
+          <span>在行式穿墙机具：</span>
+          <span>2000</span>
+        </span>
+        <span>
+          <span>在行式堂式机具：</span>
+          <span>1500</span>
+        </span>
+        <span>
+          <span>离行式穿墙机具：</span>
+          <span>2000</span>
+        </span>
+        <span>
+          <span>离行式堂式机具：</span>
+          <span>1500</span>
+        </span>
+      </div>
+      <div>
+        <span>自助银行</span>
+        <span>
+          <span>总数：</span>
+          <span>4000</span>
+        </span>
+        <span>
+          <span>在行式自助银行：</span>
+          <span>2000</span>
+        </span>
+        <span>
+          <span>离行式自助银行：</span>
+          <span>1500</span>
+        </span>
+      </div>
+      <div>
+        <span>业务库</span>
+        <span>
+          <span>总数：</span>
+          <span>3020</span>
+        </span>
+        <span>
+          <span>一类库：</span>
+          <span>2000</span>
+        </span>
+        <span>
+          <span>二类库：</span>
+          <span>1500</span>
+        </span>
+        <span>
+          <span>三类库：80</span>
+          <span>80</span>
+        </span>
+        <span>
+          <span>四类库</span>
+          <span>80</span>
+        </span>
+      </div>
+    </div> -->
+    <div id="org_Chart"></div>
+  </div>
+</template>
+
+<script>
+import "./../../board.scss";
+import * as echarts from "echarts";
+import {
+  findMaxIndex,
+  getChartDOMSize,
+  getNextPeriod,
+  getPeriodText,
+} from "../../utils.js";
+
+export default {
+  props: ["orgId"],
+  data() {
+    return {
+      data: {
+        all: [],
+        completed: [],
+        name: [],
+      },
+    };
+  },
+
+  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: 500,
+        unconfirm: 112, //未确认
+        auditing: 20, //异议审批中
+        unreform: 50, //待整改
+        notQuestion: 4,
+        reformed: 500 - 112 - 20 - 50 - 4,
+      };
+    },
+
+    windowResize() {
+      this.myChart && this.myChart.resize();
+    },
+    initMap() {
+      this.myChart && this.myChart.dispose();
+
+      // 基于准备好的dom，初始化echarts实例
+      this.myChart = echarts.init(document.getElementById("org_Chart"));
+
+      let t = this;
+      // 指定图表的配置项和数据
+      var option = {
+        backgroundColor: "rgba(0,0,0,0)",
+        // color: ["#C0FBB5", "#46557B"],
+        legend: {
+          show: false,
+          icon: "circle",
+          //   data: ["达标数", "自有产权数","区域外网数"],
+          textStyle: {
+            color: "#fff",
+            // fontSize:18
+          },
+          left: "center",
+          top: "5%",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "营业网点",
+            type: "pie",
+            radius: ["65%", "85%"],
+            center: [`12.5%`, "50%"],
+            data: [
+              {
+                name: "达标数",
+                value: 2000,
+              },
+              {
+                name: "自有产权数",
+                value: 1500,
+              },
+              {
+                name: "区域外网数",
+                value: 80,
+              },
+            ],
+            label: {
+              show: true,
+              position: "center",
+              color: "#fff",
+              fontSize: 14,
+              formatter: function (value) {
+                return "3020\n" + "\n营业网点";
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: "item",
+              backgroundColor: "#b8bdc0",
+              textStyle: {
+                color: "#000",
+              },
+              confine:true,
+              formatter: function (value) {
+                let html=`<div style="z-index:999;">
+                        <div>营业网点</div>
+                        <div>总数：3020</div>
+                        <div>达标数：2000</div>
+                        <div>自有产权数：1500</div>
+                        <div>区域外网数：80</div>
+                    </div>`
+                return html;
+              },
+            },
+
+            //   alignTo: 'none',
+            //   bleedMargin: 5,
+
+            // left: 0,
+            // right: 0,
+            // top: 0,
+            // bottom: 0,
+          },
+          {
+            name: "业务库",
+            type: "pie",
+            radius: ["65%", "85%"],
+            center: [`37.5%`, "50%"],
+            data: [
+              {
+                name: "一类库",
+                value: 2000,
+              },
+              {
+                name: "二类库",
+                value: 1500,
+              },
+              {
+                name: "三类库",
+                value: 80,
+              },
+              {
+                name: "四类库",
+                value: 80,
+              },
+            ],
+            label: {
+              show: true,
+              position: "center",
+              color: "#fff",
+              fontSize: 14,
+              formatter: function (value) {
+                return "2000\n" + "\n业务库";
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: "item",
+              backgroundColor: "#b8bdc0",
+              textStyle: {
+                color: "#000",
+              },
+              confine: true,
+              formatter: function (value) {
+                let html = `<div style="z-index:999;">
+                        <div>业务库</div>
+                        <div>总数：3020</div>
+                        <div>一类库：2000</div>                        
+                        <div>二类库：1500</div>
+                        <div>三类库：80</div>
+                        <div>四类库：80</div>
+                    </div>`;
+                return html;
+              },
+            },
+
+            //   alignTo: 'none',
+            //   bleedMargin: 5,
+
+            // left: 0,
+            // right: 0,
+            // top: 0,
+            // bottom: 0,
+          },
+          {
+            name: "自助银行",
+            type: "pie",
+            radius: ["62%", "85%"],
+            center: [`62.5%`, "50%"],
+            data: [
+              {
+                name: "在行式自助银行",
+                value: 2000,
+              },
+              {
+                name: "离行式自助银行",
+                value: 1500,
+              },
+            ],
+            label: {
+              show: true,
+              position: "center",
+              color: "#fff",
+              fontSize: 14,
+              formatter: function (value) {
+                return "4000\n" + "\n自助银行";
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: "item",
+              backgroundColor: "#b8bdc0",
+              textStyle: {
+                color: "#000",
+              },
+              confine: true,
+              formatter: function (value) {
+                let html = `<div style="z-index:999;">
+                        <div>自助银行</div>
+                        <div>总数：4000</div>
+                        <div>在行式自助银行：2000</div>                        
+                        <div>离行式自助银行：1500</div>
+                    </div>`;
+                return html;
+              },
+            },
+          },
+          {
+            name: "自助设备",
+            type: "pie",
+            radius: ["62%", "85%"],
+            center: [`87.5%`, "50%"],
+            data: [
+              {
+                name: "在行式穿墙机具",
+                value: 2000,
+              },
+              {
+                name: "在行式堂式机具",
+                value: 1500,
+              },
+              {
+                name: "离行式穿墙机具",
+                value: 2000,
+              },
+              {
+                name: "离行式堂式机具",
+                value: 1500,
+              },
+            ],
+            label: {
+              show: true,
+              position: "center",
+              color: "#fff",
+              fontSize: 14,
+              formatter: function (value) {
+                return "10000\n" + "\n自助设备";
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: "item",
+              backgroundColor: "#b8bdc0",
+              textStyle: {
+                color: "#000",
+              },
+              confine: true,
+              formatter: function (value) {
+                let html = `<div style="z-index:999;">
+                        <div>自助设备</div>
+                        <div>总数：4000</div>
+                        <div>在行式穿墙机具：2000</div>                        
+                        <div>在行式堂式机具：1500</div>
+                        <div>离行式穿墙机具：2000</div>                        
+                        <div>离行式堂式机具：1500</div>
+                    </div>`;
+                return html;
+              },
+            },
+          },
+        ],
+      };
+      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="scss" scoped>
+.map-template {
+  & > div {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  & > div:first-child {
+    // display: none;
+    width: 30px;
+    height: 100%;
+    color: rgb(245, 245, 245);
+    background-color: #b8bdc088;
+    text-align: center;
+    font-size: 14px;
+    writing-mode: vertical-lr;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  // & > div:nth-child(2) {
+  //   height: 100%;
+  //   width: calc(100% - 30px);
+  //   font-size: 14px;
+  //   line-height: 23px;
+  //   display: flex;
+  //   flex-direction: row;
+
+  //   & > div {
+  //     border: solid 1px #b8bdc088;
+  //     background-color: #b8bdc055;
+  //     display: flex;
+  //     flex-direction: column;
+  //     width:calc(25% - 20px);
+  //     margin: 10px;
+      
+
+  //     & > span:first-child {
+  //       background-color: #b8bdc088;
+  //       text-align: center;
+  //     }
+  //     & > span:not(:nth-child(1)) {
+  //       & > span {
+  //         display: inline-block;
+  //       }
+  //       & > span:first-child {
+  //         width: calc(100% - 60px);
+  //         text-align: right;
+  //       }
+  //       & > span:last-child {
+  //         width: 60px;
+  //       }
+  //     }
+  //   }
+  // }
+  & > div:last-child {
+    height: 100%;
+    width: calc(100% - 30px);
+  }
+}
+</style>

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

@@ -194,4 +194,6 @@ export default {
     text-align: center;
   }
 }
+
+
 </style>

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

@@ -2,7 +2,7 @@
 <template>
   <div class="chart-template chart-template-withperiod">
     <p>
-      <span> 日常安全履职 </span>
+      <span> {{title}} </span>
     </p>
     <div>
       <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -14,7 +14,7 @@
         ></el-tab-pane>
       </el-tabs>
     </div>
-    <div id="commAlarmEvent_Chart"></div>
+    <div ref='chart'></div>
   </div>
 </template>
 
@@ -50,7 +50,16 @@ const types = [
   },
 ];
 export default {
-  props: ["orgId"],
+  props: {
+    orgId:{
+      type:String,
+      isRequired:true
+    },
+    title:{
+      type:String,
+      isRequired:true
+    }
+  },
   data() {
     return {
       data: {
@@ -117,6 +126,11 @@ export default {
         completed: [155 * bs, 99 * bs, 110 * bs, 78 * bs, 104 * bs, 102 * bs],
         name: ["福州", "漳州", "泉州", "三明", "南平", "宁德"],
       };
+      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() {
@@ -124,21 +138,25 @@ export default {
     },
     initMap() {
       this.myChart && this.myChart.dispose();
+let c=this.$refs["chart"];
 
       // 基于准备好的dom，初始化echarts实例
       this.myChart = echarts.init(
-        document.getElementById("commAlarmEvent_Chart")
+       c
+        // document.getElementById("commAlarmEvent_Chart")
       );
 
       let t = this;
       // 指定图表的配置项和数据
       var option = {
-        color: ["#008CD6", "#82D5AE"],
+        //  color: ["#82D5AE"],
         tooltip: {
           trigger: "axis",
+          confine: true,
           axisPointer: {
             type: "shadow",
           },
+          formatter:"{c}%"
         },
         legend: {
           show:true,
@@ -150,7 +168,7 @@ export default {
           left: "3%",
           right: "4%",
           bottom: "2%",
-          top: "30px",
+          top: "40px",
           containLabel: true,
         },
 
@@ -188,35 +206,36 @@ export default {
           },
         ],
         series: [
+          // {
+          //   name: "总数",
+          //   type: "bar",
+          //   barWidth: "14",
+          //   // label: {
+          //   //   show: true,
+          //   //   position: 'top',
+          //   // },
+          //   data: this.data.all,
+          // },
           {
-            name: "总数",
-            type: "bar",
-            barWidth: "14",
-            // label: {
-            //   show: true,
-            //   position: 'top',
-            // },
-            data: this.data.all,
-          },
-          {
-            name: "已完成",
+            name: "完成率",
             type: "bar",
             barWidth: "14",
             // label: {
             //   show: true,
             //   position: 'top',
             // },
-            data: this.data.completed,
+            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 "";
-                    }
+                    // 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",

src/views/board/index.vue

@@ -31,10 +31,16 @@
     <div class="main">
       <div>
         <div>
-          <resumptionReport :orgId="selectedOrg.id" />
+          <resumptionReport :orgId="selectedOrg.id" title="日常安全履职"/>
         </div>
-        <div>
+        <!-- <div>
           <otherTask :orgId="selectedOrg.id" />
+        </div> -->
+        <div>
+          <resumptionReport :orgId="selectedOrg.id" title="监控调阅"/>
+        </div>
+        <div>
+          <resumptionReport :orgId="selectedOrg.id" title="日常安全检查"/>
         </div>
       </div>
       <div>
@@ -47,15 +53,19 @@
       </div>
       <div>
         <div>
-          <div>
-            <question :orgId="selectedOrg.id" />
-          </div>
+          <resumptionReport :orgId="selectedOrg.id" title="预案演练"/>
         </div>
         <div>
+          <resumptionReport :orgId="selectedOrg.id" title="教育培训"/>
+        </div>
+        <div>          
+            <question :orgId="selectedOrg.id" />
+        </div>
+        <!-- <div>
           <div>
             <safetyIndex :orgId="selectedOrg.id" />
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -428,7 +438,7 @@ export default {
 .main {
   padding: 0 20px;
   padding-top: 5px;
-  height: calc(100% - 90px);
+  height: calc(100% - 65px);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -477,13 +487,16 @@ export default {
       margin: 0.5rem;
       background-image: url(@/assets/board/area_border.png);
       background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
     }
 
     &:first-child {
       display: flex;
       flex-direction: column;
       height: 100%;
-      width: 30%;
+      width: 27%;
       & > div {
         width: calc(100% - 10px);
       }
@@ -494,7 +507,7 @@ export default {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        height: 34%;
+        height: calc(33% - 16px);
         // padding: 0;
         // margin-bottom: 0px;
         // padding-bottom: 10px;
@@ -520,7 +533,15 @@ export default {
 
       & > div:nth-child(2) {
         // width: 100%;
-        height: calc(66% - 10px);
+        height: calc(34% - 16px);
+        display: flex;
+        justify-content: space-between;
+        // border: none;
+        // padding: 0;
+      }
+      & > div:nth-child(3) {
+        // width: 100%;
+        height: calc(33% - 16px);
         display: flex;
         justify-content: space-between;
         // border: none;
@@ -532,7 +553,7 @@ export default {
       display: flex;
       flex-direction: column;
       height: 100%;
-      width: 45%;
+      width: 46%;
       & > div {
         width: calc(100% - 10px);
       }
@@ -545,7 +566,7 @@ export default {
       }
 
       & > div:first-child {
-        height: 80%;
+        height: calc(67% - 16px);
         display: flex;
         background-image: none;
         flex-direction: column;
@@ -559,34 +580,38 @@ export default {
       }
 
       & > div:nth-child(2) {
-        height: 20%;
+        height:  calc(33% - 16px);
       }
     }
 
     &:nth-child(3) {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      width: 25%;
+      width: 27%;
 
       & > div:first-child {
         width: 100%;
-        height: 34%;
+        height: calc(33% - 16px);
 
-        & > div {
-          height: calc(100% - 21px);
-        }
+        // & > div {
+        //   height: calc(100% - 21px);
+        // }
       }
 
       & > div:nth-child(2) {
         width: 100%;
-        height: 66%;
+        height: calc(34% - 16px);
 
-        & > div {
-          height: calc(100% - 21px);
-        }
+        // & > div {
+        //   height: calc(100% - 21px);
+        // }
       }
+      & > div:nth-child(3) {
+        width: 100%;
+        height: calc(33% - 16px);
 
+        // & > div {
+        //   height: calc(100% - 21px);
+        // }
+      }
       // & > div:nth-child(3) {
       //   width: 100%;
       //   height: 34%;