feat: 总览火灾指标数据接口对接

app/src/api/index.js

@@ -202,4 +202,19 @@ export function getGcjztjUnit(params) {
     method: 'get',
     params
   })
-}
+}
+
+export function getSxzbListToatl(params) {
+  return request({
+    url: '/system/zl/hzzb/sxzb/listToatl',
+    method: 'get',
+    params
+  })
+}
+export function getQhyyListToatl(params) {
+  return request({
+    url: '/system/zl/hzzb/qhyy/listTotal',
+    method: 'get',
+    params
+  })
+}

app/src/views/Home/components/FireIndex/Chart.vue

@@ -8,7 +8,11 @@ import * as echarts from 'echarts'
 export default {
   name: 'ChartComponent',
   props: {
-    items: Array
+    items: Array,
+    label: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
@@ -25,6 +29,17 @@ export default {
         this.reload()
       },
       deep: true
+    },
+    label: {
+      handler() {
+        console.log('-------',this.label)
+        this.chart.setOption({
+          xAxis: {
+            data: this.label
+          }
+        });
+      },
+      deep: true
     }
   },
   methods: {
@@ -57,7 +72,7 @@ export default {
             color: '#fff',
             fontSize: 8
           },
-          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+          data: this.label
         },
         yAxis: {
           type: 'value',

app/src/views/Home/components/FireIndex/index.vue

@@ -71,7 +71,7 @@
         </ul>
       </div>
       <div>
-        <Chart :items="data[this.activeIndex]" />
+        <Chart :items="chartData" :label="chartLabel" />
       </div>
     </div>
   </div>
@@ -79,11 +79,18 @@
 
 <script>
 import Chart from './Chart.vue'
-import { getSxzb,getQhyys } from "@/api/index.js";
+import { getSxzbListToatl, getQhyyListToatl } from "@/api/index.js";
 export default {
   name: 'FireIndex',
   components: {
-    Chart
+    Chart,
+  },
+  props: {
+    qx: String,
+    type: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
@@ -96,253 +103,57 @@ export default {
       ],
       activeIndex: 0,
       data: [
-        [
-            {
-                "name": "一月",
-                "value": 120
-            },
-            {
-                "name": "二月",
-                "value": 200
-            },
-            {
-                "name": "三月",
-                "value": 150
-            },
-            {
-                "name": "四月",
-                "value": 80
-            },
-            {
-                "name": "五月",
-                "value": 110
-            },
-            {
-                "name": "六月",
-                "value": 130
-            },
-            {
-                "name": "七月",
-                "value": 30
-            },
-            {
-                "name": "八月",
-                "value": 210
-            },
-            {
-                "name": "九月",
-                "value": 220
-            },
-            {
-                "name": "十月",
-                "value": 123
-            },
-            {
-                "name": "十一月",
-                "value": 234
-            },
-            {
-                "name": "十二月",
-                "value": 70
-            }],
-        [ {
-                "name": "一月",
-                "value": 1
-            },
-            {
-                "name": "二月",
-                "value": 3
-            },
-            {
-                "name": "三月",
-                "value": 2
-            },
-            {
-                "name": "四月",
-                "value": 5
-            },
-            {
-                "name": "五月",
-                "value": 5
-            },
-            {
-                "name": "六月",
-                "value": 6
-            },
-            {
-                "name": "七月",
-                "value": 7
-            },
-            {
-                "name": "八月",
-                "value": 8
-            },
-            {
-                "name": "九月",
-                "value": 3
-            },
-            {
-                "name": "十月",
-                "value": 3
-            },
-            {
-                "name": "十一月",
-                "value": 2
-            },
-            {
-                "name": "十二月",
-                "value": 1
-            }],
-        [ {
-                "name": "一月",
-                "value": 12
-            },
-            {
-                "name": "二月",
-                "value": 32
-            },
-            {
-                "name": "三月",
-                "value": 23
-            },
-            {
-                "name": "四月",
-                "value": 12
-            },
-            {
-                "name": "五月",
-                "value": 12
-            },
-            {
-                "name": "六月",
-                "value": 12
-            },
-            {
-                "name": "七月",
-                "value": 11
-            },
-            {
-                "name": "八月",
-                "value": 18
-            },
-            {
-                "name": "九月",
-                "value": 19
-            },
-            {
-                "name": "十月",
-                "value": 2
-            },
-            {
-                "name": "十一月",
-                "value": 4
-            },
-            {
-                "name": "十二月",
-                "value": 6
-            }],
-        [ {
-                "name": "一月",
-                "value": 7
-            },
-            {
-                "name": "二月",
-                "value": 54
-            },
-            {
-                "name": "三月",
-                "value": 43
-            },
-            {
-                "name": "四月",
-                "value": 23
-            },
-            {
-                "name": "五月",
-                "value": 11
-            },
-            {
-                "name": "六月",
-                "value": 12
-            },
-            {
-                "name": "七月",
-                "value": 34
-            },
-            {
-                "name": "八月",
-                "value": 56
-            },
-            {
-                "name": "九月",
-                "value": 78
-            },
-            {
-                "name": "十月",
-                "value": 98
-            },
-            {
-                "name": "十一月",
-                "value": 23
-            },
-            {
-                "name": "十二月",
-                "value": 43
-            }],
-        [ {
-                "name": "一月",
-                "value": 43
-            },
-            {
-                "name": "二月",
-                "value": 34
-            },
-            {
-                "name": "三月",
-                "value": 56
-            },
-            {
-                "name": "四月",
-                "value": 78
-            },
-            {
-                "name": "五月",
-                "value": 23
-            },
-            {
-                "name": "六月",
-                "value": 24
-            },
-            {
-                "name": "七月",
-                "value": 25
-            },
-            {
-                "name": "八月",
-                "value": 26
-            },
-            {
-                "name": "九月",
-                "value": 45
-            },
-            {
-                "name": "十月",
-                "value": 12
-            },
-            {
-                "name": "十一月",
-                "value": 11
-            },
-            {
-                "name": "十二月",
-                "value": 22
-            }]
+        [],
+        [],
+        [],
+        [],
+        []
       ],
       params:{
         pageSize:100,
-        pageNum:1,
-        qy:'万州区'
+        pageNum:1
+      },
+      // 年份横坐标轴标签
+      yearLabel: [],
+      // 年份数据
+      yearData: [],
+      // 月份纵坐标轴标签
+      monthLabel: [],
+      // 月份数据
+      monthData: [],
+      modeType: 0,
+      fireIndexLabel: [],
+      fireIndexData: [],
+    }
+  },
+  watch: {
+    type: {
+      handler(idx){
+        this.modeType = idx
       },
+      immediate: true
+    }
+  },
+  computed: {
+    chartLabel() {
+      if (this.activeIndex === 4) {
+        return this.fireIndexLabel[this.type]
+      }
+      if (this.type === 0) {
+        return this.monthLabel;
+      } else {
+        return this.yearLabel
+      }
+    },
+    chartData() {
+      if (this.activeIndex === 4) {
+        return this.fireIndexData[this.type]
+      }
+      if (this.type === 0) {
+        return this.monthData[this.activeIndex]
+      } else {
+        return this.yearData[this.activeIndex];
+      }
     }
   },
   methods: {
@@ -350,8 +161,51 @@ export default {
       return this.activeIndex === index
     },
     getFrieList(){
-      getQhyys(this.params).then(res=>{
-        console.log(res.data.rows);
+      this.loadQhyyListToatl()
+      this.loadSxzbChartData()
+    },
+    loadQhyyListToatl() {
+      getQhyyListToatl({
+        ...this.params,
+        qx: this.qx === '重庆市' ? "" : this.qx
+      }).then(res=>{
+        const temp = res.data.data
+        const year =temp.qhyyListByYear
+        const month = temp.qhyyListByMonth
+        this.fireIndexLabel = [
+          month.map(item => item.qhyy),
+          year.map(item => item.qhyy)
+        ]
+        this.fireIndexData = [
+          month.map(item => ({ name: item.qhyy, value: item.hzqs })),
+          year.map(item => ({ name: item.qhyy, value: item.hzqs }))
+        ]
+      })
+    },
+    loadSxzbChartData() {
+      getSxzbListToatl({
+      ...this.params,
+        qx: this.qx === '重庆市' ? "" : this.qx
+      }).then(res => {
+        const temp = res.data.data
+        const year =temp.sxzbYear
+        const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12)
+        this.monthLabel = month.map(item => item.y)
+        this.yearLabel = year.map(item => item.n)
+        this.monthData = [
+          month.map(item => ({ name: item.y, value: item.hzqs })),
+          month.map(item => ({ name: item.y, value: item.wrs })),
+          month.map(item => ({ name: item.y, value: item.sss })),
+          month.map(item => ({ name: item.y, value: item.zzjjss })),
+          []
+        ]
+        this.yearData = [
+          year.map(item => ({ name: item.y, value: item.hzqs })),
+          year.map(item => ({ name: item.y, value: item.wrs })),
+          year.map(item => ({ name: item.y, value: item.sss })),
+          year.map(item => ({ name: item.y, value: item.zzjjss })),
+          []
+        ]
       })
     }
   },

app/src/views/Home/index.vue

@@ -42,10 +42,9 @@
         <WisdomFire :frieList="frieList" :iotList="iotList" />
       </border-panel>
       <border-panel height="298px" title="火灾指标">
-        <FireIndex />
+        <FireIndex :type="fireIndexType"/>
         <template #ext-header>
-          <!-- TODO  实现火灾指标日期范围切换事件 -->
-          <button-block :items="['月', '年']" />
+          <button-block :items="['月', '年']" @select-item="selectItemHandler" />
         </template>
       </border-panel>
     </div>
@@ -92,13 +91,14 @@ export default {
       PoliceList:[],
       frieList:{},
       iotList:{},
+      fireIndexType: 0
     }
   },
   watch:{
     qy(){
       this.getList()
-    this.getFireList()
-    this.getIotList()
+      this.getFireList()
+      this.getIotList()
     }
   },
   methods: {
@@ -118,6 +118,9 @@ export default {
           });
       })
     },
+    selectItemHandler(idx) {
+      this.fireIndexType = idx
+    },
     getStaic(){
       getJqdt(this.params).then(res=>{
         this.PoliceList=res.data.rows

components/ButtonBlock/index.vue

@@ -77,7 +77,8 @@ export default {
 
 <template>
   <div class="button-block" ref="buttonBlock" :style="buttonBlockStyle">
-    <div class="button-block_item" v-for="(item, index) in items" :key="index">
+    <div class="button-block_item" v-for="(item, index) in items" 
+        @click="onClickBlockItemHandler(index)" :key="index">
       <linear-text
         :text="renderText(item)"
         :startColor="renderCurrentItemColor(index, '#95CCFF')"
@@ -86,7 +87,6 @@ export default {
         :ext-class="{
           textShadow: `0 1px 1px ${renderCurrentItemColor(index, '#0057FF')}`,
         }"
-        @click="onClickBlockItemHandler(index)"
       />
     </div>
   </div>