perf: 火灾分析地图联动优化

app/src/api/risk.js

@@ -53,3 +53,17 @@ export function fxfb(params) {
     params
   })
 }
+
+
+/**
+ * 风险预警 - 风险隐患
+ * @param {*} params 
+ * @returns 
+ */
+export function fxyh(params) {
+  return request({
+    url: '/system/fxyh/list',
+    method: 'GET',
+    params
+  })
+}

app/src/utils/index.js

@@ -0,0 +1,24 @@
+
+
+/**
+ * 
+ * @param {*} array 数据
+ * @param {*} qx 指定的区县
+ * @param {*} field 区域字段
+ */
+export function toFirst(array, qx, field) {
+  if (!array) new Error("数组不存在")
+  if (qx === "") {
+    return array;
+  }
+  const idx = array.findIndex(item => item[field] === qx);
+  if (idx > 0) {
+    // 深拷贝
+    const tempItem = JSON.parse(JSON.stringify(array[idx]))
+    // 移除这个节点
+    array.splice(idx, 1)
+    array = [tempItem, ...array]
+    return array;
+  }
+  return array;
+}

app/src/views/FireCondition/components/FireDistribution.vue

@@ -13,9 +13,11 @@
         <span class="time">{{ ['火灾总数', '死亡人数'][idx]}}</span>
         <span class="unit">同比</span>
       </div>
-      <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+      <VueSeamlessScroll v-if="reload" :data="list" :class-option="classOption" class="warp">
         <ul class="item">
-          <li class="row" v-for="(item, index) in list" :key="index">
+          <li class="row" :class="{
+            active: item.isActive
+          }" v-for="(item, index) in list" :key="index">
             <span class="type">{{ index + 1 }}</span>
             <span class="count">{{ item.qx }}</span>
             <span class="time">{{ [item.bnhzqs, item.bnwrs ][idx] }}</span>
@@ -34,6 +36,7 @@ import VueSeamlessScroll from "vue-seamless-scroll";
 import upIcon from '../../../assets/images/up-icon.svg';
 import downIcon from '../../../assets/images/down-icon.svg';
 import { fireDistribution } from '@/api/hzfx'
+import { toFirst } from '@/utils'
 
 export default {
   name: 'FireDistribution',
@@ -46,7 +49,8 @@ export default {
   data() {
     return {
       idx: 0,
-      list: []
+      list: [],
+      reload: true
     };
   },
   created() {
@@ -80,24 +84,29 @@ export default {
       }
     },
     loadData() {
+      this.reload = false
       fireDistribution({
         pageSize: 100,
         pageNum: 1,
         // qx: this.qx
       }).then(res => {
-        this.list = res.data.rows.map(item => ({...item,
+        let tempData = res.data.rows.map(item => ({...item,
           hzPercent: this.getPercent(item.bnhzqs, item.tqhzqs),
           wrPercent: this.getPercent(item.bnwrs, item.tqwrs),
           hzIcon: this.getIcon(item.bnhzqs, item.tqhzqs),
-          wrIcon: this.getIcon(item.bnwrs, item.tqwrs)
+          wrIcon: this.getIcon(item.bnwrs, item.tqwrs),
+          isActive: item.qx === this.qx
         }))
+        this.list = toFirst(tempData, this.qx, 'qx')
+        this.reload = true
       })
     }
   },
   computed: {
     classOption() {
       return {
-        singleHeight: 51
+        singleHeight: 51,
+        autoPlay: this.qx === ""
       };
     },
   },
@@ -137,6 +146,10 @@ li.row > span {
   display: inline-block;
 }
 
+li.row.active {
+  background-color: rgba(0, 213, 255, 0.2);
+}
+
 li.row {
   box-sizing: border-box;
 }

app/src/views/FireCondition/components/FireHistory.vue

@@ -4,8 +4,8 @@
       <span class="idx">序号</span>
       <span class="time">起火时间</span>
       <span class="name">建筑名称</span>
-      <span class="count">伤亡人数</span>
-      <span class="area">过火面积</span>
+      <span class="count">伤亡人数(人)</span>
+      <span class="area">过火面积(㎡)</span>
       <span class="reason">起火原因</span>
     </div>
     <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
@@ -85,6 +85,7 @@ export default {
   background-color: rgba(0, 163, 255, 0.3) !important;
   margin-top: 2px;
   letter-spacing: 1px;
+  // font-size: 8px;
   .is_notice {
     line-height: 19px;
     font-size: 10px;
@@ -111,7 +112,7 @@ a {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 14px;
+  font-size: 12px;
   background-color: rgba(0, 0, 0, 0.2);
   color: #fff;
   margin-top: 5px;
@@ -141,7 +142,7 @@ a {
     flex: 0.2;
   }
   .area {
-    flex: 0.15;
+    flex: 0.18;
   }
   .reason {
     flex: 0.15;

app/src/views/FireCondition/components/FireTime.vue

@@ -104,7 +104,8 @@
 				}, ],
 				yAxis: {
 					type: "value",
-					boundaryGap: [0, "20%"],
+					boundaryGap: [0, "10%"],
+					minInterval: 1,
 					splitLine: {
 						show: true,
 						lineStyle: {

app/src/views/FireCondition/components/KeyIndex/index.vue

@@ -431,7 +431,6 @@ export default {
   },
   watch: {
     qx() {
-      console.log("数据更新----")
       this.loadData();
     }
   },

app/src/views/FireCondition/index.vue

@@ -16,6 +16,13 @@
         </border-panel>
       </div>
       <div>
+        <div>
+          <el-select v-model="qx">
+            <el-option value="" label="全市" ></el-option>
+            <el-option value="城口县" label="城口县" ></el-option>
+            <el-option value="万州区" label="万州区" ></el-option>
+          </el-select>
+        </div>
         <div class="center-box">
             <border-panel class="fire-time" 
           :header-type="3" height="313px" width="955px" style="margin: 7px" title="火灾时段（24时）">
@@ -73,7 +80,7 @@
   
   <style scoped lang="less">
 .center-box {  
-  margin-top: 640px;
+  margin-top: 602px;
 }
 </style>
   

app/src/views/Risk/components/Rectification.vue

@@ -67,7 +67,7 @@ export default {
     watch: {
       qx: {
         handler() {
-        this.loadData()
+            this.loadData()
         },
         immediate: true
       }

app/src/views/Risk/components/RiskDanger.vue

@@ -14,15 +14,15 @@
           <ul class="item">
           <li class="row" v-for="(item, index) in list" :key="index">
               <span class="type">{{ index+1 }}</span>
-              <span class="count">{{ item[0] }}</span>
+              <span class="count">{{ item.gcjzmc }}</span>
               <span
             class="time"
             :style="{
-              color: levelText(item[1]),
+              color: levelText(item.fxdj),
             }"
-            >{{ item[1] }}</span
+            >{{ item.fxdj }}</span
           >
-              <span class="unit">{{ item[2] }}</span>
+              <span class="unit">{{ item.sl }}</span>
             </li>
           </ul>
         </VueSeamlessScroll>
@@ -31,60 +31,18 @@
     
     <script>
     import VueSeamlessScroll from "vue-seamless-scroll";
+    import { fxyh } from '@/api/risk'
     export default {
       name: "BuildingStatistics",
+      props: {
+        qx: String
+      },
       components: {
         VueSeamlessScroll,
       },
       data() {
         return {
-          list: [
-            [
-              "国泰艺术中心",
-              "高",
-              "65条",
-            ],
-            [
-            "人民大礼堂",
-              "中",
-              "66条",
-            ],
-            [
-            "重庆大剧院",
-              "低",
-              "200条",
-            ],
-            [
-            "环球艺术中心",
-              "高",
-              "200m",
-            ],
-            [
-            "重庆大剧院",
-              "中",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "高",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "中",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "高",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "低",
-              "200m",
-            ],
-          ],
+          list: [],
         };
       },
       computed: {
@@ -94,14 +52,32 @@
           };
         },
       },
+      watch: {
+        qx: {
+          handler() {
+            this.loadData()
+          },
+          immediate: true
+        }
+      },
       methods:{
         levelText(text) {
-      return {
-        高: "#FF0B0B",
-        中: "#ff833d",
-        低: "#fbff3d",
-      }[text];
-    },
+          return {
+            "重大风险": "#FF0B0B",
+            "较大风险": "#ff833d",
+            "一般风险": "#fbff3d",
+            "低风险": "#01dbda",
+          }[text];
+        },
+        loadData() {
+          fxyh({
+            pageNum: 1,
+            pageSize: 100,
+            qy: this.qx
+          }).then(res => {
+            this.list = res.data.rows
+          })
+        }
       }
     };
     </script>
@@ -168,13 +144,13 @@
       flex: 0.2;
     }
     .type {
-      flex: 0.12;
+      flex: 0.1;
     }
     .count {
-      flex: 0.2;
+      flex: 0.5;
     }
     .unit {
-      flex: 0.35;
+      flex: 0.2;
     }
   
   }

app/src/views/Risk/components/Riskdistribution.vue

@@ -24,11 +24,14 @@
         </div>
         <VueSeamlessScroll
           :data="list"
+          v-if="reload"
           :class-option="classOption"
           class="warp"
         >
           <ul class="item">
-            <li class="row" v-for="(item, index) in list" :key="index">
+            <li class="row" :class="{
+              active: item.isActive
+            }" v-for="(item, index) in list" :key="index">
                 <span class="type">{{ index+1}}</span>
                 <span class="person">{{ item.qy }}</span>
                 <span class="result">{{ item.sl }}</span>
@@ -42,13 +45,18 @@
   <script>
   import VueSeamlessScroll from "vue-seamless-scroll";
   import { fxfb } from '@/api/risk'
+  import { toFirst } from '@/utils'
 
   export default {
     name: 'MaintenanceSupervision',
+    props: {
+      qx: String
+    },
     data() {
       return {
         list: [],
         originData: [],
+        reload: true,
         checked: 0,
         type: ['重大风险', '较大风险', '一般风险', '低风险']
       }
@@ -60,32 +68,44 @@
       classOption() {
         return {
           singleHeight: 43,
+          autoPlay: this.qx === ""
         };
       },
     },
-    created() {
-      this.loadData()
+    watch: {
+      qx: {
+        handler() {
+          this.loadData()
+        },
+        immediate: true
+      }
     },
     methods: {
       change(idx) {
         if (this.checked !== idx) {
           this.checked = idx
-          this.list = this.originData.filter(item => item.fxdj === this.type[idx])
+          let tempData = this.originData.filter(item => item.fxdj === this.type[idx])
+          this.list = toFirst(tempData, this.qx, 'qy')
         }
       },
       loadData() {
+        this.reload = false
         fxfb({
           pageNum: 1,
           pageSize: 100
         }).then(res => {
-          this.originData = res.data.rows
-          this.list = this.originData.filter(item => item.fxdj === '重大风险')
+          this.originData = res.data.rows.map(item => ({
+            ...item,
+            isActive: item.qy === this.qx
+          }))
+          let tempData = this.originData.filter(item => item.fxdj === this.type[this.checked])
+          this.list = toFirst(tempData, this.qx, 'qy')
+          this.reload = true
         })
       }
     }
   }
   </script>
-  
   <style scoped lang='less'>
   .maintenance-supervision {
     .maintenance-supervision_header {
@@ -112,8 +132,11 @@
     color: #61DBFF;
     margin-top: 15px;
     margin-bottom: 6px;
+    }
+  li.row.active {
+    background-color: rgba(0, 213, 255, 0.2);
   }
-  
+
   .row,
   li,
   a {

app/src/views/Risk/index.vue

@@ -21,6 +21,15 @@
            <Rectification :qx="qx"/>
             </border-panel>
           </div>
+          <div>
+        <div>
+          <el-select v-model="qx">
+            <el-option value="" label="全市" ></el-option>
+            <el-option value="城口县" label="城口县" ></el-option>
+            <el-option value="万州区" label="万州区" ></el-option>
+          </el-select>
+        </div>
+          </div>
         <div>
           <border-panel
               height="521px"

components/LinearText/index.vue

@@ -13,7 +13,7 @@ export default {
   name: "LinearText",
   props: {
     text: {
-      type: String,
+      type: [Number, String],
       default: "",
     },
     fontSize: {