Merge branch 'develop_jzl'

gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-19 14:38:28
- * @LastEditTime: 2022-04-28 13:34:42
+ * @LastEditTime: 2022-05-05 11:16:06
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
@@ -22,10 +22,14 @@
     </div>
     <div class="num-wrapper">
       <div class="left">
-        <span class="text">隐患总数</span><span class="num">12</span>件
+        <span class="text">{{ textData[0].text }}</span
+        ><span class="num">{{ textData[0].num }}</span
+        >{{ textData[0].unit }}
       </div>
       <div class="right">
-        <span class="text">已整改</span><span class="num">10</span>件
+        <span class="text">{{ textData[1].text }}</span
+        ><span class="num">{{ textData[1].num }}</span
+        >{{ textData[1].unit }}
       </div>
     </div>
 
@@ -48,9 +52,13 @@ export default {
       btnArr: ["隐患处置", "事故数量"],
       btnV: 0,
       options: null,
+      textData: [
+        { text: "隐患总数", num: 192, unit: "件" },
+        { text: "已整改", num: 182, unit: "件" },
+      ],
       charData: [
         [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
-        [10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20],
+        [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
       ],
     };
   },
@@ -64,12 +72,36 @@ export default {
       if (index === 0) {
         this.charData = [
           [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
-          [10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20],
+          [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
+        ];
+        const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
+          return prev + cur;
+        }, 0);
+        const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
+          return prev + cur;
+        }, 0);
+        // 更改按钮下的文字
+        this.textData = [
+          { text: "隐患总数", num: num1, unit: "件" },
+          { text: "已整改", num: num2, unit: "件" },
         ];
       } else {
         this.charData = [
           [20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
-          [20, 30, 10, 20, 30, 20, 10, 30, 40, 40, 20, 20],
+          [2, 1, 3, 1, 2, 3, 1, 1, 1, 1, 1, 1],
+        ];
+
+        const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
+          return prev + cur;
+        }, 0);
+        const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
+          return prev + cur;
+        }, 0);
+
+        // 更改按钮下的文字
+        this.textData = [
+          { text: "事故数量", num: num1, unit: "件" },
+          { text: "伤亡人数", num: num2, unit: "人" },
         ];
       }
       this.bottomOptions();
@@ -80,7 +112,13 @@ export default {
         color: colors,
         tooltip: {
           // show:false,
-          formatter: "{a}: {c}(件)",
+          // formatter: "{a}: {c}(件)",
+          formatter: (parm) => {
+            console.log(parm);
+            return `${parm.seriesName}：${parm.value}(${
+              this.textData[parm.seriesIndex].unit
+            })`;
+          },
           // trigger: "axis",
           // axisPointer: {
           //   type: "cross",
@@ -142,11 +180,12 @@ export default {
             },
             min: 0,
             max: 60,
+            max: Math.max.apply(null, this.charData[0]) + 10,
           },
         ],
         series: [
           {
-            name: "隐患数量",
+            name: this.textData[0].text,
             type: "bar",
             data: this.charData[0],
             yAxisIndex: 0,
@@ -160,7 +199,7 @@ export default {
             barGap: "0%",
           },
           {
-            name: "已整改",
+            name: this.textData[1].text,
             type: "bar",
             data: this.charData[1],
             yAxisIndex: 0,

gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxB.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-19 14:38:28
- * @LastEditTime: 2022-04-28 13:35:16
+ * @LastEditTime: 2022-05-05 11:36:25
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
 -->
 <template>
   <div class="chars-box all-flex-h">
-    <div class="title">燃气事故排名</div>
+    <div class="title">隐患/事故排名</div>
     <div class="btn-wrapper">
       <div
         v-for="(item, index) in btnArr"
@@ -48,23 +48,157 @@ export default {
       btnArr: ["隐患处置", "事故数量"],
       btnV: 0,
       options: null,
-      charData: [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]],
+      // charData: [50, 40, 20, 40, 10, 10, 30, 10, 30, 50],
+      // xData:['营里乡', '下槐镇', '宅北乡', '合河口乡', '蛟潭庄镇', '孟家庄镇', '苏家庄乡', '东王坡乡', '上观音堂乡', '杨家桥乡'],
+      arr: [
+        {
+          name: "营里乡",
+          value: 50,
+        },
+        {
+          name: "下槐镇",
+          value: 40,
+        },
+        {
+          name: "宅北乡",
+          value: 20,
+        },
+        {
+          name: "合河口乡",
+          value: 40,
+        },
+        {
+          name: "蛟潭庄镇",
+          value: 10,
+        },
+        {
+          name: "孟家庄镇",
+          value: 10,
+        },
+        {
+          name: "苏家庄乡",
+          value: 30,
+        },
+        {
+          name: "东王坡乡",
+          value: 10,
+        },
+        {
+          name: "上观音堂乡",
+          value: 30,
+        },
+        {
+          name: "杨家桥乡",
+          value: 50,
+        },
+      ],
     };
   },
+  computed: {},
   mounted() {
     this.bottomOptions();
   },
+  computed: {
+    charsArr() {
+      return (this.arr = this.arr.sort((a, b) => {
+        return b.value - a.value;
+      }));
+    },
+  },
   methods: {
     btnClick(index) {
       if (this.btnV == index) return;
       this.btnV = index;
       if (index === 0) {
-        this.charData = [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]];
+        this.arr = [
+          {
+            name: "营里乡",
+            value: 50,
+          },
+          {
+            name: "下槐镇",
+            value: 40,
+          },
+          {
+            name: "宅北乡",
+            value: 20,
+          },
+          {
+            name: "合河口乡",
+            value: 40,
+          },
+          {
+            name: "蛟潭庄镇",
+            value: 10,
+          },
+          {
+            name: "孟家庄镇",
+            value: 10,
+          },
+          {
+            name: "苏家庄乡",
+            value: 30,
+          },
+          {
+            name: "东王坡乡",
+            value: 10,
+          },
+          {
+            name: "上观音堂乡",
+            value: 30,
+          },
+          {
+            name: "杨家桥乡",
+            value: 50,
+          },
+        ];
       } else {
-        this.charData = [[20, 10, 40, 30, 20, 20, 20, 10, 20, 10]];
+        this.arr = [
+          {
+            name: "营里乡",
+            value: 50,
+          },
+          {
+            name: "下槐镇",
+            value: 40,
+          },
+          {
+            name: "宅北乡",
+            value: 20,
+          },
+          {
+            name: "合河口乡",
+            value: 40,
+          },
+          {
+            name: "蛟潭庄镇",
+            value: 10,
+          },
+          {
+            name: "孟家庄镇",
+            value: 10,
+          },
+          {
+            name: "苏家庄乡",
+            value: 10,
+          },
+          {
+            name: "东王坡乡",
+            value: 20,
+          },
+          {
+            name: "上观音堂乡",
+            value: 30,
+          },
+          {
+            name: "杨家桥乡",
+            value: 20,
+          },
+        ];
       }
       this.bottomOptions();
     },
+
     bottomOptions() {
       const colors = ["#1890FF"];
       this.options = {
@@ -75,7 +209,6 @@ export default {
           //   type: "cross",
           // },
           formatter: "{b}: {c}(个)",
-
         },
         grid: {
           top: "30",
@@ -107,9 +240,9 @@ export default {
               color: "#333",
               // },
             },
-
+            max:"dataMax",
             // prettier-ignore
-            data: ['营里乡', '下槐镇', '宅北乡', '合河口乡', '蛟潭庄镇', '孟家庄镇', '苏家庄乡', '东王坡乡', '上观音堂乡', '杨家桥乡'],
+            data: this.charsArr.map(item=>item.name),
           },
         ],
         yAxis: [
@@ -137,14 +270,14 @@ export default {
               // },
             },
             min: 0,
-            max: 60,
+            max: "dataMax"
           },
         ],
         series: [
           {
             name: "Evaporation",
             type: "bar",
-            data: this.charData[0],
+            data: this.charsArr.map((item) => item.value),
             yAxisIndex: 0,
             itemStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -170,7 +303,6 @@ export default {
     font-size: 16px;
     margin: 22px 0 11px 19px;
     font-weight: 600;
-
   }
   .btn-wrapper {
     display: flex;

gassafetyprogress-web/src/views/statistic/overview/conponents/Left/Scound.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-19 10:17:05
- * @LastEditTime: 2022-04-21 17:24:15
+ * @LastEditTime: 2022-05-05 10:40:44
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/Scound.vue
@@ -13,7 +13,7 @@
       <div class="left ">
         <div class="top ">{{ left.text }}</div>
         <div class="bottom">
-          <div class="number" v-for="item in left.numArr" :key="item">
+          <div class="number" v-for="item in left.numArr" :key="item.text">
             {{ item }}
           </div>
           <div class="unit">{{ left.unit }}</div>
@@ -22,7 +22,7 @@
       <div class="right">
         <div class="top">{{ right.text }}</div>
         <div class="bottom">
-          <div class="number" v-for="item in right.numArr" :key="item">
+          <div class="number" v-for="item in right.numArr" :key="item.text">
             {{ item }}
           </div>
           <div class="unit">{{ right.unit }}</div>
@@ -43,7 +43,7 @@ export default {
       type: Object,
       default: () => ({
         text: "驻村安全员",
-        numArr: [1, 2],
+        numArr: "397",
         unit: "名",
       }),
     },
@@ -51,7 +51,7 @@ export default {
       type: Object,
       default: () => ({
         text: "燃气协管员",
-        numArr: [1, 9],
+        numArr: "472",
         unit: "名",
       }),
     },

gassafetyprogress-web/src/views/statistic/overview/conponents/Left/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-18 18:00:22
- * @LastEditTime: 2022-04-19 17:20:50
+ * @LastEditTime: 2022-05-05 10:38:23
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left.vue
@@ -40,12 +40,12 @@ export default {
       two: {
         left: {
           text: "电代煤",
-          numArr: [1,8],
+          numArr: "442",
           unit: "个",
         },
         right:{
           text: "气代煤",
-          numArr: [1, 6],
+          numArr: "393",
           unit: "个",
         }
       },

gassafetyprogress-web/src/views/statistic/overview/conponents/Right/CharBoxC.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-19 14:38:28
- * @LastEditTime: 2022-04-28 13:41:12
+ * @LastEditTime: 2022-05-05 13:45:13
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
 -->
 <template>
   <div class="chars-box all-flex-h">
-    <div class="title">燃气事故排名</div>
+    <div class="title">燃气事故占比</div>
     <div class="btn-wrapper">
       <div
         v-for="(item, index) in btnArr"
@@ -66,29 +66,33 @@ export default {
       this.btnV = index;
       if (index === 2) {
         this.bottomData = [
-          { name: "裂缝", value: 10, color: "#604AFF" },
-          { name: "管道称重", value: 20, color: "#FFC337" },
-          { name: "其他", value: 100, color: "#86FF5B" },
-          { name: "腐蚀", value: 99, color: "#03C4F1" },
-          { name: "漏气", value: 18, color: "#1F8DF3" },
+          { name: "安检", value: 20, color: "#604AFF" },
+          { name: "巡检", value: 30, color: "#FFC337" },
+          { name: "专项检查", value: 40, color: "#86FF5B" },
+          { name: "大排查整治", value: 99, color: "#03C4F1" },
+          { name: "工程事故隐患", value: 18, color: "#1F8DF3" },
+          { name: "其他", value: 18, color: "pink" },
         ];
       } else if (index === 1) {
+        // 居民用气、工商用气、场站、加气站
         this.bottomData = [
-          { name: "裂缝", value: 40, color: "#604AFF" },
-          { name: "管道称重", value: 30, color: "#FFC337" },
-          { name: "其他", value: 20, color: "#86FF5B" },
-          { name: "腐蚀", value: 19, color: "#03C4F1" },
-          { name: "漏气", value: 50, color: "#1F8DF3" },
+          { name: "居民用气", value: 40, color: "#604AFF" },
+          { name: "工商用气", value: 30, color: "#FFC337" },
+          { name: "场站", value: 20, color: "#86FF5B" },
+          { name: "加气站", value: 19, color: "#03C4F1" },
         ];
       } else {
         this.bottomData = [
-          { name: "裂缝", value: 20, color: "#604AFF" },
-          { name: "管道称重", value: 30, color: "#FFC337" },
-          { name: "其他", value: 40, color: "#86FF5B" },
+          { name: "裂缝", value: 10, color: "#604AFF" },
+          { name: "管道称重", value: 20, color: "#FFC337" },
+          { name: "其他", value: 100, color: "#86FF5B" },
           { name: "腐蚀", value: 99, color: "#03C4F1" },
           { name: "漏气", value: 18, color: "#1F8DF3" },
         ];
       }
+      // this.bottomData.sort((a,b)=>{
+      //   return Math.random()-0.5
+      // })
       this.bottomOptions();
     },
     bottomOptions() {

gassafetyprogress-web/src/views/statistic/overview/conponents/Right/CharBoxD.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-19 14:38:28
- * @LastEditTime: 2022-04-28 13:40:47
+ * @LastEditTime: 2022-05-05 11:46:58
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
 -->
 <template>
   <div class="chars-box all-flex-h">
-    <div class="title">隐患处理和事故数量</div>
+    <div class="title">隐患、事故趋势</div>
     <div class="btn-wrapper">
       <!-- <div @click="btnClick(0)">燃气事故</div> -->
       <div

gassafetyprogress-web/src/views/statistic/overview/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-18 17:21:51
- * @LastEditTime: 2022-04-19 10:08:56
+ * @LastEditTime: 2022-05-05 10:36:25
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/index.vue
@@ -11,8 +11,8 @@
     <div class="left">
       <Left />
     </div>
-    <div class="middle"><Middle/></div>
-    <div class="right"><Right/></div>
+    <div class="middle"><Middle /></div>
+    <div class="right"><Right /></div>
   </div>
 </template>
 
@@ -24,7 +24,7 @@ export default {
   components: {
     Left,
     Right,
-    Middle
+    Middle,
   },
 };
 </script>
@@ -34,16 +34,16 @@ export default {
   width: 100%;
   height: calc(100vh - 50px) !important;
   > div {
-    flex:1;
+    flex: 1;
     // background-color: red;
     height: 100%;
-    margin-right:3px;
+    margin-right: 3px;
     &.middle {
       width: 40%;
-      flex:none;
+      flex: none;
       // background-color: blue;
     }
-    &.right{
+    &.right {
       margin-right: 0px;
     }
   }