① 主页，“物联网设备监控情况”替换为火灾数据分析，“详细火灾数据愉况”“警情处置情况”去掉死亡人数红色字体展示 火灾数据分析，“火灾情况分析”纵横轴内容颠倒，以亡人数据改变气泡图大小灾数据分析，“火灾趋势图”去掉月平均值，取近三年、近五年，年平均值 ⑤ 消防执法动态，“投诉举报类型”柱形图展示前 9 类数量较多的投诉类型，其余均归结到其他作为第10 类展示（点击时二级展示） ⑥ 消防执法动态，“消防执法情况”环比和同比数据，以颜色展示上升下降

package-lock.json

@@ -4828,6 +4828,11 @@
                 "zrender": "^5.1.1"
             }
         },
+        "echarts-liquidfill": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-3.0.0.tgz",
+            "integrity": "sha512-asBu62Zxpod9ZRYHweBoBvp7e+XtQbQoha19aTEJf2UptJJ2Bppcx8TdwQZnTjPM9s/yYD6Tk4/qcRqZ6s8HZA=="
+        },
         "echarts-wordcloud": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz",
@@ -13399,4 +13404,4 @@
             }
         }
     }
-}
+}

package.json

@@ -15,6 +15,7 @@
         "core-js": "^3.6.5",
         "echarts": "^5.1.1",
         "echarts-gl": "^2.0.4",
+        "echarts-liquidfill": "^3.0.0",
         "echarts-wordcloud": "^2.0.0",
         "element-plus": "^1.0.2-beta.48",
         "vue": "^3.0.11",
@@ -39,4 +40,4 @@
         "terser-webpack-plugin": "^5.1.3",
         "vue-cli-plugin-element-plus": "0.0.13"
     }
-}
+}

src/assets/scss/element-ui.scss

@@ -18,7 +18,7 @@
             border-color: rgba(0, 250, 251, 0.20);
         }
         .death {
-            color: red !important;
+            // color: red !important;
         }
         tr {
             margin-bottom: 1px;

src/components/category-line/index.vue

@@ -88,14 +88,14 @@ export default {
             },
             data: val[0],
           },{
-            name:'月平均值',
+            name:'年平均值',
             data: val[1],
             // itemStyle: {
             //   color: "#fccf2a",
             // },
             type: 'line'
           },{
-            name:'年平均值',
+            name:'总年平均值',
             data: val[2],
             // itemStyle: {
             //   color: "#fccf2a",

src/components/category/index.vue

@@ -7,9 +7,26 @@ import * as echarts from "echarts";
 export default {
   props: {
     dataMap: { type: Array, default: () => [] },
-    color: { type: String, default: () => 'rgb(0,254,160)'},
-    borderRadius: { type: Array, default: () => [0, 0, 0, 0]},
-    xData: { type: Array, default: () => [ "1月", "2月", "3月", "4月", "5月", "6月", "7月",  "8月",  "9月", "10月", "11月", "12月" ]},
+    color: { type: String, default: () => "rgb(0,254,160)" },
+    borderRadius: { type: Array, default: () => [0, 0, 0, 0] },
+    isSlice: { type: Number, default: () => 0 },
+    xData: {
+      type: Array,
+      default: () => [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+    },
   },
   data() {
     return {};
@@ -36,9 +53,12 @@ export default {
             show: false,
           },
           type: "category",
-          data:this.xData,
+          data: this.xData,
           axisLabel: {
             color: "#FFFFFF",
+            formatter: (param) =>{
+              return this.isSlice ? param.slice(0, this.isSlice) : param;
+            },
           },
         },
         tooltip: {

src/components/liquid-fill/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div ref="echartD" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import 'echarts-liquidfill'
+export default {
+  props: {
+    dataMap: { type: Number, default: () => 0 },
+  },
+  data() {
+    return {
+      // wordcloud:wordcloud
+    };
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      let dataMap = [this.dataMap,this.dataMap,this.dataMap,this.dataMap,]
+      echarts.init(this.$refs.echartD).setOption({
+        series: [
+          {
+            type: "liquidFill",
+            data: dataMap,
+            direction: "left",
+            radius: "90%",
+            center: ["50%", "50%"],
+            backgroundStyle: {
+              borderWidth: 5,
+              borderColor: "#2C81F4",
+              color: "rgb(255,255,255,0)",
+            },
+            label: {
+              normal: {
+                formatter: "",
+                textStyle: {
+                  fontSize: 12,
+                },
+              },
+            },
+            outline: {
+              itemStyle: {
+                borderColor: "#113e72",
+                borderWidth: 20,
+              },
+              borderDistance: 0,
+            },
+          },
+        ],
+      });
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/scatter/index.vue

@@ -35,7 +35,7 @@ export default {
           },
           confine: true,
           formatter: function (param) {
-            return `${param.data[3]}<br> 过火面积：${param.data[0]}<br> 火灾数量：${param.data[1]}<br> 死亡人数：${param.data[2]}`;
+            return `${param.data[3]}<br> 死亡人数：${param.data[2]}<br> 过火面积：${param.data[1]}<br> 火灾数量：${param.data[0]}`;
           },
           backgroundColor: "rgba(11, 12, 72, 0.8)",
           borderColor: "rgba(11, 12, 72, 0.4)",
@@ -43,6 +43,8 @@ export default {
         },
         xAxis: {
           name: "",
+          type:'log',
+          scale: true,
           axisLabel: {
             color: "#FFFFFF",
           },
@@ -60,7 +62,8 @@ export default {
           },
         },
         yAxis: {
-          name: "火灾数量/过火面积（m²）",
+          name: "过火面积（m²）/ 火灾数量",
+          scale: true,
           axisTick: {
             show: false,
           },
@@ -79,7 +82,6 @@ export default {
               color: "#6B9DD7",
             },
           },
-          scale: true,
           nameGap: 20,
           nameTextStyle: {
             color: "#FFFFFF",
@@ -94,7 +96,7 @@ export default {
             width: "100%",
             height: "100%",
             data: this.dataMap.map((val) => {
-              return [val.fireArea, val.fireCount, val.deathToll, val.region];
+              return [val.fireCount || '', val.fireArea || '', val.deathToll, val.region];
             }),
             type: "scatter",
             symbolSize: function (data) {

src/views/Home.vue

@@ -5,25 +5,25 @@
       <el-col class="flexJ leftTopBox">
         <h4>消防执法情况</h4>
         <el-row class="leftTopContent">
-          <el-col :span="7" v-for="item in SiAeAllList" :key="item.checkType">
+          <el-col v-for="item in SiAeAllList" :key="item.checkType">
             <el-col class="leftTopTitle">{{ item.checkType }}</el-col>
             <el-col class="leftTopCenter">{{ item.number }}</el-col>
             <el-col class="leftTopBot">
-              <el-col
-                ><el-col>环比</el-col
-                ><el-col
-                  >{{ (item.linkRelativeRatio * 100).toFixed(0) }}%</el-col
-                ></el-col
-              >
-              <el-col
-                ><el-col>同比</el-col
-                ><el-col
-                  >{{ (item.sameRatio * 100).toFixed(0) }}%</el-col
-                ></el-col
-              >
+              <el-col>
+                <el-col>环比</el-col>
+                <el-col :style="{color:item.linkRelativeStatus === 1 ? 'red' : 'green'}">
+                  {{item. linkRelativeStatus === 2 ? '-' : ''}}{{ (item.linkRelativeRatio * 100).toFixed(0) }}%
+                </el-col>
+              </el-col>
+              <el-col>
+                <el-col>同比</el-col>
+                <el-col :style="{color:item.sameStatus === 1 ? 'red' : 'green'}">
+                  {{item.sameStatus === 2 ? '-' : ''}}{{ (item.sameRatio * 100).toFixed(0) }}%
+                </el-col>
+              </el-col>
             </el-col>
           </el-col>
-          <el-col :span="7"> </el-col>
+          <el-col> </el-col>
         </el-row>
       </el-col>
       <el-col class="flexJ echartsPad">
@@ -41,20 +41,22 @@
       </el-col>
     </el-col>
     <el-col :span="8" class="boxCenter" ref="boxCenter">
-      <img class="centerTop" src="~@a/img/home/home_center.png" />
-      <el-col class="centerBot">
-        <el-col class="photo_box">
-          <img @click="imgClick(1)" src="~@a/img/home/cloud1.png" />
-          <img @click="imgClick(2)" src="~@a/img/home/cloud2.png" />
-          <img @click="imgClick(3)" src="~@a/img/home/cloud3.png" />
-          <img @click="imgClick(1)" src="~@a/img/home/cloud1.png" />
-          <img @click="imgClick(2)" src="~@a/img/home/cloud2.png" />
-          <img @click="imgClick(3)" src="~@a/img/home/cloud3.png" />
-          <img @click="imgClick(1)" src="~@a/img/home/cloud1.png" />
-          <img @click="imgClick(2)" src="~@a/img/home/cloud2.png" />
-          <img @click="imgClick(3)" src="~@a/img/home/cloud3.png" />
+      <el-row>
+        <img class="centerTop" src="~@a/img/home/home_center.png" />
+        <el-col class="centerBot">
+          <el-col class="photo_box">
+            <img @click="imgClick(1)" src="~@a/img/home/cloud1.png" />
+            <img @click="imgClick(2)" src="~@a/img/home/cloud2.png" />
+            <img @click="imgClick(3)" src="~@a/img/home/cloud3.png" />
+            <img @click="imgClick(1)" src="~@a/img/home/cloud1.png" />
+            <img @click="imgClick(2)" src="~@a/img/home/cloud2.png" />
+            <img @click="imgClick(3)" src="~@a/img/home/cloud3.png" />
+            <img @click="imgClick(1)" src="~@a/img/home/cloud1.png" />
+            <img @click="imgClick(2)" src="~@a/img/home/cloud2.png" />
+            <img @click="imgClick(3)" src="~@a/img/home/cloud3.png" />
+          </el-col>
         </el-col>
-      </el-col>
+      </el-row>
     </el-col>
     <el-col :span="8" class="boxConentSize boxRight">
       <img src="~@a/img/home/title2.png" class="titleLift" />
@@ -135,43 +137,46 @@
         </el-row>
       </el-col>
       <el-col class="flexJ echartsPad" style="height: 200px">
-        <h4>物联网设备监控情况</h4>
-        <se-table
-          ref="seTable"
-          :dataMap="tableData"
-          :headerData="headerData"
-          :key="windowWidth"
-        ></se-table>
+        <h4>警情处置情况</h4>
+          <div class="rightBoxCon">
+            <el-row>
+              <el-row class="rightTopTitle"><span>火灾</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge1" :dataMap="0.2" :dataNumber="20" size="30" with="15" :tick="false" color="#468EFD"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber"><span>同比：14% <span style="color:green;font-wight:800">↓</span></span></el-row>
+            </el-row>
+            <el-row>
+              <el-row class="rightTopTitle"><span>社会救助</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge2" :dataMap="0.3" :dataNumber="30" size="30" with="15" :tick="false" color="#06B1B9"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber"><span>同比：14% <span style="color:green">↓</span></span></el-row>
+            </el-row>
+            <el-row>
+              <el-row class="rightTopTitle"><span>抢险救援</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge3" :dataMap="0.5"  :dataNumber="50" size="30" with="15" :tick="false" color="#E4951E"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber"><span>同比：14% <span style="color:red">↑</span></span></el-row>
+            </el-row>
+          </div>
       </el-col>
     </el-col>
   </div>
 </template>
 
 <script>
-import seTable from "@c/se-table";
 import linstener from "@c/mixins/linstener";
 import radarChart from "@c/radar";
 import wordCloud from "@c/wordCloud";
 import categoryLine from "@c/category-line";
+import gauge from "@c/gauge";
 export default {
-  components: { seTable, radarChart, wordCloud, categoryLine },
+  components: { gauge, radarChart, wordCloud, categoryLine },
   data() {
     return {
       timeData: [],
-      tableData: [
-        {address:'数量',burnedArea:100,property:200,deathTol:100,nonFatal:100,},
-        {address:'告警',burnedArea:30,property:50,deathTol:5,nonFatal:20,},
-        {address:'离线',burnedArea:1,property:10,deathTol:20,nonFatal:5,},
-        {address:'离线率',burnedArea:'100%',property:'100%',deathTol:'100%',nonFatal:'100%',},
-        {address:'告警率',burnedArea:'5%',property:'5%',deathTol:'5%',nonFatal:'5%',},
-      ],
-      headerData: [
-        { prop: "address", name: "类型" },
-        { prop: "burnedArea", name: "电气设备" },
-        { prop: "property", name: "烟感设备" },
-        { prop: "deathTol", name: "温感设备" },
-        { prop: "nonFatal", name: "水压设备" },
-      ],
       fireTypeList: [],
       fireAddressList: [],
       SiAeAllList: [],
@@ -208,6 +213,9 @@ export default {
           this.$refs.categoryLine,
           this.$refs.wordCloud,
           this.$refs.radarChart,
+          this.$refs.gauge1,
+          this.$refs.gauge2,
+          this.$refs.gauge3,
         ]),
       true
     );
@@ -300,15 +308,15 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
-$centerWidth: 8rem;
-$centerCirWidth: 3.375rem;
+$centerWidth: 10rem;
+$centerCirWidth: 330px;
 .home {
   width: 100%;
   height: 100%;
   background-size: 100% 100%;
   display: flex;
   & > .el-col {
-    max-width: 8rem;
+    max-width: 7rem;
   }
   .titleLift {
     margin: 0 auto;
@@ -341,6 +349,40 @@ $centerCirWidth: 3.375rem;
   .echartsPad {
     padding: 0.375rem 0.25rem 0.1875rem;
     height: 30%;
+    color: #FFF;
+    .rightBoxCon {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      & > .el-row {
+        flex: none;
+        width: 33.33%;
+        display: flex;
+        flex-direction: column;
+      }
+      .rightTopTitle {
+        span {
+          font-size: 0.2125rem;
+          text-align: center;
+        }
+        justify-content: center;
+      }
+      .rightTopNumber {
+        justify-content: center;
+        &>span {
+          margin: 0 auto;
+          padding: .0625rem .125rem;
+          font-size: 0.2125rem;
+          border-radius: .15rem;
+          box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        }
+      }
+      .rightTopChart {
+        // height: 1.5rem;
+        flex: 1;
+      }
+    }
   }
   .boxConentSize {
     display: flex;
@@ -364,6 +406,7 @@ $centerCirWidth: 3.375rem;
       & > .el-col {
         width: 32%;
         height: 32%;
+        flex: none;
         // background: url(~@a/img/enforce/bg3.png) no-repeat;
         box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
         background-size: 100% 100%;
@@ -523,23 +566,33 @@ $centerCirWidth: 3.375rem;
   }
   .boxCenter {
     width: $centerWidth;
+    max-width: $centerWidth;
     box-sizing: border-box;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: relative;
-    .centerTop {
+    flex: auto;
+    align-items: center;
+    &>.el-row{
       width: 100%;
-      z-index: 9;
-      margin-bottom: -70px;
-    }
-    .centerBot {
-      height: 1.875rem;
-      width: 100%;
-      background: url("~@a/img/home/cir.png") no-repeat;
-      background-size: 100% 100%;
+      height: 9.5rem;
       position: relative;
-      flex: initial;
+      .centerTop {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 85px;
+        margin: 0px auto;
+        width: 9.5rem;
+        z-index: 9;
+      }
+      .centerBot {
+        height: 150px;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background: url("~@a/img/home/cir.png") no-repeat;
+        background-size: 100% 100%;
+        flex: initial;
+      }
     }
   }
 }
@@ -547,27 +600,27 @@ $centerCirWidth: 3.375rem;
 .photo_box {
   width: 0.875rem;
   position: absolute;
-  left: 0;
+  left: -20px;
   right: 0;
   bottom: 0;
   top: 0;
   margin: 0px auto;
   transform-style: preserve-3d; /*表示所有子元素在3D空间中呈现*/
-  animation: run 30s linear infinite; /*循环执行run动画，每30秒执行一次*/
-  transform: rotateX(-11deg);
+  animation: run 40s linear infinite; /*循环执行run动画，每30秒执行一次*/
+  transform: rotateX(-9deg);
   &:hover {
     animation-play-state: paused;
   }
+  /*设置图像大小、边框、圆角、位置*/
+  img {
+    width: 0.75rem;
+    height: 1.125rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
 }
 
-/*设置图像大小、边框、圆角、位置*/
-.photo_box img {
-  width: 0.75rem;
-  height: 1.125rem;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
 
 /*依次设置图像盒子中每个图像旋转后位置*/
 .photo_box img:nth-child(1) {
@@ -601,10 +654,10 @@ $centerCirWidth: 3.375rem;
 /*采用@keyframes 规则创建run动画。*/
 @keyframes run {
   0% {
-    transform: rotateX(-11deg) rotateY(0deg);
+    transform: rotateX(-9deg) rotateY(0deg);
   }
   100% {
-    transform: rotateX(-11deg) rotateY(360deg);
+    transform: rotateX(-9deg) rotateY(360deg);
   }
 }
 </style>

src/views/enforcement-dynamic.vue

@@ -9,18 +9,18 @@
               <el-col class="leftTopTitle">{{ item.checkType }}</el-col>
               <el-col class="leftTopCenter">{{ item.number }}</el-col>
               <el-col class="leftTopBot">
-                <el-col
-                  ><el-col>环比</el-col
-                  ><el-col
-                    >{{ (item.linkRelativeRatio * 100).toFixed(0) }}%</el-col
-                  ></el-col
-                >
-                <el-col
-                  ><el-col>同比</el-col
-                  ><el-col
-                    >{{ (item.sameRatio * 100).toFixed(0) }}%</el-col
-                  ></el-col
-                >
+                <el-col>
+                  <el-col>环比</el-col>
+                  <el-col :style="{color:item.linkRelativeStatus === 1 ? 'red' : 'green'}">
+                    {{item. linkRelativeStatus === 2 ? '-' : ''}}{{ (item.linkRelativeRatio * 100).toFixed(0) }}%
+                  </el-col>
+                </el-col>
+                <el-col>
+                  <el-col>同比</el-col>
+                  <el-col :style="{color:item.sameStatus === 1 ? 'red' : 'green'}">
+                    {{item.sameStatus === 2 ? '-' : ''}}{{ (item.sameRatio * 100).toFixed(0) }}%
+                  </el-col>
+                </el-col>
               </el-col>
             </el-col>
             <el-col :span="7"> </el-col>
@@ -29,10 +29,11 @@
         <el-col class="leftBot">
           <h4>行政许可情况</h4>
           <el-row class="leftBotTop">
-            <el-row>
+            <el-row style="z-index:9">
               <el-col>{{ alFsdAllNumber.qualifiedRadio * 100 || 0 }}%</el-col>
               <el-col>合格率</el-col>
             </el-row>
+            <liquid-fill class="liQuIdFill" ref="liQuIdFill" :dataMap="0.5"></liquid-fill>
           </el-row>
           <el-row>
             <el-col
@@ -106,8 +107,9 @@
             <category
               ref="category"
               v-if="reportComplaintList.length > 0"
-              :dataMap="reportComplaintList.slice(0,10).map((val) => val.value)"
-              :xData="reportComplaintList.slice(0,10).map((val) => val.name)"
+              :dataMap="reportComplaintList.slice(0,10).map((val,ind) => ind < 9 ? val.value : reportComplaintList.slice(10).reduce((a, b) => {return a + b.value}, 0))"
+              :xData="reportComplaintList.slice(0,10).map((val,ind) => ind < 9 ? val.name :'其他')"
+              :isSlice="2"
               color="#33BBFA"
             ></category>
             <img src="~@a/img/enforce/bg7.png" alt="" />
@@ -163,6 +165,7 @@ import wordCloud from "@c/wordCloud";
 import linstener from "@c/mixins/linstener";
 import map from "@c/mixins/map";
 import category from "@c/category";
+import liquidFill from "@c/liquid-fill";
 export default {
   data() {
     return {
@@ -182,7 +185,7 @@ export default {
       },
     };
   },
-  components: { category, wordCloud },
+  components: { category, wordCloud, liquidFill },
   mixins: [linstener, map],
   created() {
     this.getData();
@@ -190,7 +193,7 @@ export default {
   mounted() {
     window.addEventListener(
       "resize",
-      () => this.resizeTimeActions([this.$refs.category, this.$refs.wordCloud]),
+      () => this.resizeTimeActions([this.$refs.category, this.$refs.wordCloud, this.$refs.liQuIdFill]),
       true
     );
     this.initMap();
@@ -225,10 +228,13 @@ export default {
       if (res)
         this.reportComplaintList = res.data.map((val) => {
           return {
-            name: val.type.slice(0,2),
+            name: val.type,
             value: val.number,
           };
         });
+        this.reportComplaintList.sort((a,b)=>{
+          return b.value - a.value
+        })
     },
     // 投诉举报情况 Bot
     async getReportStatistics() {
@@ -321,13 +327,13 @@ export default {
             }
             & > .el-col:first-child {
               & > .el-col:last-child {
-                color: red;
+                color: #ccc;
                 margin-left: 0.0625rem;
               }
             }
             & > .el-col:last-child {
               & > .el-col:last-child {
-                color: green;
+                color: #ccc;
                 margin-left: 0.0625rem;
               }
             }
@@ -346,18 +352,31 @@ export default {
       padding: 0.375rem 0.45rem 0.1875rem;
       box-sizing: border-box;
       .leftBotTop {
-        width: 3.1375rem;
-        height: 3.1375rem;
-        background: url(~@a/img/enforce/bg4.png) no-repeat;
+        // width: 3.1375rem;
+        height: 100%;
+        flex: 1;
+        // background: url(~@a/img/enforce/bg4.png) no-repeat;
         background-size: 100% 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
+        position: relative;
+        .liQuIdFill{
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+          padding: .25rem;
+          box-sizing: border-box;
+        }
         & > .el-row .el-col:first-child {
           font-size: .5625rem;
           line-height: 0.75rem;
-          color: #f4f70d;
+          color: #FFF;
+          // color: #f4f70d;
         }
         & > .el-row .el-col:last-child {
           font-size: 0.2625rem;