闵行演示调整

src/assets/js/flexible.js

@@ -29,7 +29,7 @@
         setTimeout(() => {
             setRemUnit();
             time = true
-        }, 0)
+        }, 50)
     });
     window.addEventListener("pageshow", function(e) {
         if (e.persisted) {

src/assets/scss/common.scss

@@ -184,16 +184,17 @@ body {
         position: relative;
         .mapTips {
             position: absolute;
-            right: 0;
+            right: .0625rem;
             bottom: 0.2rem;
             z-index: 9;
             width: min-content;
             .el-col {
-                width: 1.6875rem;
+                width: 1.5rem;
                 height: .6875rem;
                 margin-bottom: .0625rem;
                 line-height: .6875rem;
-                text-indent: .6875rem;
+                padding-left: .5625rem;
+                text-align: center;
                 font-size: .175rem;
                 background-size: 100% 100%;
             }
@@ -210,13 +211,15 @@ body {
                 background: url('~@a/img/icon/tip4.png') no-repeat;
             }
             &>.blueImageTip {
-                width: 2.25rem;
+                width: 2rem;
                 background: url('~@a/img/icon/tip11.png') no-repeat;
             }
             &>.yellowImageTip {
+                width: 2rem;
                 background: url('~@a/img/icon/tip12.png') no-repeat;
             }
             &>.redImageTip {
+                width: 2rem;
                 background: url('~@a/img/icon/tip13.png') no-repeat;
             }
         }
@@ -246,6 +249,8 @@ body {
             text-align: right;
         }
         .centerContent {
+            border: 1px solid #0198af;
+            border-radius: 10px;
             z-index: 3;
             width: 100%;
             height: 100%;

src/assets/scss/element-ui.scss

@@ -16,11 +16,14 @@
             background: transparent !important;
             color: #FFF;
         }
+        .death {
+            background: #962b2b !important;
+        }
         th {
             color: #FFF;
             background: rgba(0, 250, 251, 0.20);
             .cell {
-                line-height: .425rem;
+                // line-height: .425rem;
                 padding: 0;
             }
         }
@@ -45,7 +48,7 @@
         color: #FFF;
     }
     .cell {
-        line-height: .425rem;
+        // line-height: .425rem;
         padding: 0 .125rem;
         // padding: 0;
     }

src/components/category-line/index.vue

@@ -68,18 +68,27 @@ export default {
         },
         series: [
           {
+            name:'当前',
             type: "bar",
             barWidth: 15,
             itemStyle: {
               color: "rgb(0,254,160)",
               borderRadius: [15, 15, 12, 15],
             },
-            data: val,
+            data: val[0],
           },{
-            data: val.map(val=>val+40),
-            itemStyle: {
-              color: "#fccf2a",
-            },
+            name:'月平均值',
+            data: val[1],
+            // itemStyle: {
+            //   color: "#fccf2a",
+            // },
+            type: 'line'
+          },{
+            name:'年平均值',
+            data: val[2],
+            // itemStyle: {
+            //   color: "#fccf2a",
+            // },
             type: 'line'
           }
         ],

src/components/category/index.vue

@@ -8,6 +8,7 @@ export default {
   props: {
     dataMap: { type: Array, default: () => [] },
     color: { type: String, default: () => 'rgb(0,254,160)'},
+    borderRadius: { type: Array, default: () => [15, 15, 12, 15]},
   },
   data() {
     return {};
@@ -73,7 +74,7 @@ export default {
             barWidth: 15,
             itemStyle: {
               color: this.color,
-              borderRadius: [15, 15, 12, 15],
+              borderRadius: this.borderRadius,
             },
             data: val,
           },

src/components/fire-pie/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div ref="echartD" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+    isVs: { type: Boolean, default: () => false },
+    radius: { type: Number, default: () => 50 },
+    color: {
+      type: Array,
+      default: () => [
+        "#5470c6",
+        "#91cc75",
+        "#fac858",
+        "#ee6666",
+        "#73c0de",
+        "#3ba272",
+        "#fc8452",
+        "#9a60b4",
+        "#ea7ccc",
+      ],
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+    isVs() {
+      this.getData();
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData(val = this.dataMap) {
+      echarts.init(this.$refs.echartD).setOption({
+        color: this.color,
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return `</span>${  params.name + ":" + parseInt(params.value * 100) / 100 + "%" }`;
+          },
+        },
+        legend: {
+          // orient: 'vertical',
+          bottom: 0,
+          textStyle: {
+            show: true,
+            color: "#fff",
+            fontSize: 12,
+            width: this.isVs ? 0 : 85,
+            overflow: "truncate",
+          },
+          tooltip: {
+            show: true,
+            formatter: (params) => {
+              return `</span>${ params.name +  ":" + parseInt( this.dataMap.find((val) => val.name === params.name).value * 100 ) / 100 + "%" }`;
+            },
+          },
+        },
+        series: [
+          {
+            // name: "",
+            type: "pie",
+            top: -50,
+            left: 0,
+            radius: this.radius + '%',
+            data: val,
+            label: {
+              // show: !this.isVs, 
+              color: "#FFF",
+              fontSize: 16,
+              width: 200,
+              overflow: "truncate",
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      });
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/mixins/linstener.js

@@ -3,8 +3,8 @@ export default {
     data() {
         return {
             resizeTime: true,
-            windowWidth: 0,
-            isVs3D: false,
+            windowWidth: 1920 + 1080,
+            isVsFirePie: false,
             distance: 300, // 3D饼图大小配置
             isVsTab: false,
             leftBtn: true,
@@ -38,25 +38,16 @@ export default {
 
                 this.resizeTime = true
                 this.windowWidth = document.documentElement.clientWidth + document.documentElement.clientHeight
-            }, 0);
+            }, 300);
 
         },
         vsClick(val) {
             this[val] = !this[val]
-            if (val === 'isVs3D') {
-                if (this.isVs3D) {
-                    this.$nextTick(() => {
-                        // this.distance = 200
-                        this.$refs.pieThreeD1 && this.$refs.pieThreeD1.resize();
-                        this.$refs.pieThreeD2 && this.$refs.pieThreeD2.resize();
-                    })
-                } else {
-                    this.$nextTick(() => {
-                        // this.distance = 150
-                        this.$refs.pieThreeD1 && this.$refs.pieThreeD1.resize();
-                        this.$refs.pieThreeD2 && this.$refs.pieThreeD2.resize();
-                    })
-                }
+            if (val === 'isVsFirePie') {
+                this.$nextTick(() => {
+                    this.$refs.firePie1 && this.$refs.firePie1.resize();
+                    this.$refs.firePie2 && this.$refs.firePie2.resize();
+                })
             }
         },
         leftBtnClick() {

src/components/se-table/index.vue

@@ -3,9 +3,10 @@
     :data="dataMap"
     class="transparentTableRow"
     height="100%"
-    :row-style="{height:'.425rem'}"
+    :row-style="{ height: '.425rem' }"
     cell-style="height:.425rem;box-sizing: border-box;"
     style="width: 100%; margin: 0 auto"
+    :row-class-name="tableRowClassName"
   >
     <el-table-column
       show-overflow-tooltip
@@ -29,7 +30,13 @@ export default {
     return {};
   },
   mounted() {},
-  methods: {},
+  methods: {
+    tableRowClassName({ row,  }) {
+      if (row.deathToll && row.deathToll > 0) {
+        return "death";
+      }
+    },
+  },
 };
 </script>
 

src/components/wordCloud/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div ref="echartD" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+        echarts.init(this.$refs.echartD).setOption({
+          tooltip: {},
+          series: [
+            {
+              type: "wordCloud",
+              gridSize: 2,
+              sizeRange: [12, 50],
+              //  rotationRange: [0, 90],
+              shape: "star",
+              //width: 600,
+              //height: 400,
+              textStyle: {
+                normal: {
+                  color: function () {
+                    return (
+                      "rgb(" +
+                      [
+                        Math.round(Math.random() * 160),
+                        Math.round(Math.random() * 160),
+                        Math.round(Math.random() * 160),
+                      ].join(",") +
+                      ")"
+                    );
+                  },
+                },
+                emphasis: {
+                  shadowBlur: 10,
+                  shadowColor: "#333",
+                },
+              },
+              data: [
+                {
+                  name: "Sam S Club",
+                  value: 10000,
+                  textStyle: {
+                    normal: {
+                      color: "black",
+                    },
+                    emphasis: {
+                      color: "red",
+                    },
+                  },
+                },
+                {
+                  name: "Macys",
+                  value: 6181,
+                },
+                {
+                  name: "Amy Schumer",
+                  value: 4386,
+                },
+                {
+                  name: "Jurassic World",
+                  value: 4055,
+                },
+                {
+                  name: "Charter Communications",
+                  value: 2467,
+                },
+                {
+                  name: "Chick Fil A",
+                  value: 2244,
+                },
+                {
+                  name: "Planet Fitness",
+                  value: 1898,
+                },
+                {
+                  name: "Pitch Perfect",
+                  value: 1484,
+                },
+              ],
+            },
+          ],
+        });
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/http/axios.js

@@ -24,7 +24,7 @@ axios.interceptors.response.use(response => {
             message: response.data.msg || response.data.msg,
             type: 'error'
         });
-        // return response
+        return {}
     }
 }, error => {
     // 请求失败
@@ -34,6 +34,7 @@ axios.interceptors.response.use(response => {
             message: error.response.data.msg || error.response.data.msg,
             type: 'error'
         });
+        return {}
         // switch (error.response.status) {
         //     case 400:
         //         console.log('400错误')

src/views/Home.vue

@@ -96,11 +96,11 @@ export default {
       tableData: [],
       headerData: [
         { prop: "address", name: "火灾地址" },
-        { prop: "burnedArea", name: "过火面积" },
-        { prop: "propertyLoss", name: "财产损失" },
-        { prop: "deathToll", name: "死亡人数" },
-        { prop: "nonFatal", name: "受伤人数" },
-        { prop: "disasterHome", name: "受灾户" },
+        { prop: "burnedArea", name: "过火面积（m²）" },
+        { prop: "propertyLoss", name: "财产损失（万元）" },
+        { prop: "deathToll", name: "死亡人数（人）" },
+        { prop: "nonFatal", name: "受伤人数（人）" },
+        { prop: "disasterHome", name: "受灾户（户）" },
         { prop: "fireCause", name: "火灾原因" },
       ],
       fireCauseRatioObj:{

src/views/enforcement-dynamic.vue

@@ -71,7 +71,7 @@
           <el-row class="rightTop">
             <!-- <img src="~@a/img/enforce/bg6.png" alt="" /> -->
             <el-row class="graphChart">
-              <graph-chart
+              <!-- <graph-chart
                 :dataMap="reportComplaintList"
                 ref="graphChart"
                 v-if="false && reportComplaintList.length > 0"
@@ -81,7 +81,8 @@
                 :dataMap="reportComplaintList"
                 name="投诉举报情况"
                 ref="radarChart"
-              ></radar-chart>
+              ></radar-chart> -->
+              <word-cloud ref="wordCloud"></word-cloud>
             </el-row>
           </el-row>
           <el-row class="treeMap">
@@ -141,8 +142,7 @@
 
 <script>
 import treeMap from "@c/treemap";
-import graphChart from "@c/graph";
-import radarChart from "@c/radar";
+import wordCloud from "@c/wordCloud";
 import linstener from "@c/mixins/linstener";
 import map from "@c/mixins/map";
 export default {
@@ -164,7 +164,7 @@ export default {
       },
     };
   },
-  components: { treeMap, graphChart, radarChart },
+  components: { treeMap, wordCloud},
   mixins: [linstener,map],
   created() {
     this.getData();
@@ -360,6 +360,7 @@ export default {
           width: 100%;
           height: 0.7125rem;
           background: url(~@a/img/enforce/bg5.png) no-repeat;
+          border-radius: .125rem;
           background-size: 100% 100%;
           padding: 0 0.3rem;
           display: flex;

src/views/fire-data-analysis.vue

@@ -7,9 +7,9 @@
           <el-row class="leftTopContent">
             <el-row class="selectBar">
               <el-row>
-                <el-button size="mini" @click="searchTime('one')" :class="{ btnClick: timeArea === 'one' }">近一年</el-button>
-                <el-button size="mini" @click="searchTime('three')" :class="{ btnClick: timeArea === 'three' }">近三年</el-button>
-                <el-button size="mini" @click="searchTime('five')" :class="{ btnClick: timeArea === 'five' }">近五年</el-button>
+                <el-button size="mini" @click="searchTime(1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
+                <el-button size="mini" @click="searchTime(3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
+                <el-button size="mini" @click="searchTime(5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
               </el-row>
               <el-form :inline="true" size="mini" :model="barForm">
                 <el-form-item label="">
@@ -34,28 +34,28 @@
           <el-row class="threeBox">
             <!-- :style="isVs3D?'padding-top:0.75rem':'padding-top:0'" -->
             <div class="flexBoxE">
-              <el-form v-show="isVs3D" :inline="true" size="mini" :model="fireCauseRatioObj">
+              <el-form v-show="isVsFirePie" :inline="true" size="mini" :model="fireCauseRatioObj">
                 <el-form-item label="街道：">
                   <el-select @change="getFireCause(1)" v-model="fireCauseRatioObj.address" placeholder="选择街道" filterable clearable >
                     <el-option  :label="item" :value="item" v-for="item in fireAddressList" :key="item" ></el-option>
                   </el-select>
                 </el-form-item>
               </el-form>
-              <pie-three-d ref="pieThreeD1" :dataMap="fireCauseRatioList" :distance="distance" :isVs="isVs3D"></pie-three-d>
+              <fire-pie ref="firePie1" :dataMap="fireCauseRatioList" :isVs="isVsFirePie" :radius="isVsFirePie ? 50 : 40"></fire-pie>
             </div>
-            <div class="line" v-show="isVs3D"></div>
-            <div class="flexBoxE" v-show="isVs3D">
-              <el-form v-show="isVs3D" :inline="true" size="mini" :model="fireCauseRatioObj" >
+            <div class="line" v-show="isVsFirePie"></div>
+            <div class="flexBoxE" v-show="isVsFirePie">
+              <el-form v-show="isVsFirePie" :inline="true" size="mini" :model="fireCauseRatioObj">
                 <el-form-item label="街道：">
                   <el-select @change="getFireCause(2)" v-model="fireCauseRatioObj.address2" placeholder="选择街道" filterable clearable>
                     <el-option :label="item" :value="item" v-for="item in fireAddressList" :key="item" ></el-option>
                   </el-select>
                 </el-form-item>
               </el-form>
-              <pie-three-d style="flex: 1" ref="pieThreeD2" :dataMap="fireCauseRatioList2" :distance="distance" :isVs="isVs3D"></pie-three-d>
+              <fire-pie style="flex: 1" ref="firePie2" :dataMap="fireCauseRatioList2" :isVs="isVsFirePie" :radius="isVsFirePie ? 50 : 50"></fire-pie>
             </div>
-            <div class="VS"  @click="vsClick('isVs3D')" :style="{ 'font-size': isVs3D ? '.225rem' : '.25rem' }">
-              {{ isVs3D ? "返回" : "VS" }}
+            <div class="VS"  @click="vsClick('isVsFirePie')" :style="{ 'font-size': isVsFirePie ? '.225rem' : '.25rem' }">
+              {{ isVsFirePie ? "返回" : "VS" }}
             </div>
           </el-row>
         </el-col>
@@ -161,35 +161,6 @@
             </el-table>
           </el-col>
         </div>
-      <!-- <div class="rightContent"> -->
-        <!-- <div class="VS"  @click="vsClick('isVsTab')" :style="{ 'font-size': isVsTab ? '.2rem' : '.225rem' }">
-          {{ isVsTab ? "返回" : "VS" }}
-        </div>
-        <div class="flexBoxE" :style="isVsTab ? '' : 'height:100%;padding-top:49px'">
-          <el-form class="formVs" v-show="isVsTab" :inline="true" size="mini" :model="tabObj">
-            <el-form-item label="街道：">
-              <el-select v-model="tabObj.address" placeholder="选择街道" filterable clearable  @change="getFireStatis(1)">
-                  <el-option :label="item" :value="item" v-for="item in fireAddressList" :key="item" ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <div>
-            <se-table ref="seTable" :dataMap="tableData"  :headerData="headerData" :key="windowWidth"></se-table>
-          </div>
-        </div>
-        <div class="flexBoxE" v-show="isVsTab" :style="isVsTab ? '' : 'height:100%;padding-top:49px'">
-          <el-form v-show="isVsTab" :inline="true" size="mini" :model="tabObj">
-            <el-form-item label="街道：">
-              <el-select v-model="tabObj.address2" placeholder="选择街道" filterable clearable  @change="getFireStatis(2)">
-                  <el-option :label="item" :value="item" v-for="item in fireAddressList" :key="item"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <div>
-            <se-table ref="seTable" :dataMap="tableData2" :headerData="headerData" :key="windowWidth"></se-table>
-          </div>
-        </div> -->
-      <!-- </div> -->
       </el-col>
     </transition>
   </el-row>
@@ -198,12 +169,12 @@
 <script>
 import linstener from "@c/mixins/linstener";
 import categoryLine from "@c/category-line";
-import pieThreeD from "@c/pie-3D";
+import firePie from "@c/fire-pie";
 import seTable from "@c/se-table";
 import AMap from 'AMap'
 import map from "@c/mixins/map";
 export default {
-  components: { categoryLine, pieThreeD, seTable },
+  components: { categoryLine, firePie, seTable },
   mixins: [linstener,map],
   data() {
     return {
@@ -298,11 +269,11 @@ export default {
       ],
       headerData: [
         { prop: "address", name: "火灾地址" },
-        { prop: "burnedArea", name: "过火面积" },
-        { prop: "propertyLoss", name: "财产损失" },
-        { prop: "deathToll", name: "死亡人数" },
-        { prop: "nonFatal", name: "受伤人数" },
-        { prop: "disasterHome", name: "受灾户" },
+        { prop: "burnedArea", name: "过火面积（m²）" },
+        { prop: "propertyLoss", name: "财产损失（万元）" },
+        { prop: "deathToll", name: "死亡人数（人）" },
+        { prop: "nonFatal", name: "受伤人数（人）" },
+        { prop: "disasterHome", name: "受灾户（户）" },
         { prop: "fireCause", name: "火灾原因" },
       ],
       fireAddressList: [],
@@ -322,14 +293,14 @@ export default {
         fireType: "",
         address: "",
       },
-      timeArea: 'one',
+      timeArea: 1,
     };
   },
   created() {
     this.getData();
   },
   watch:{
-    isVs3D(val){
+    isVsFirePie(val){
       console.log(val)
       if(!val){ 
         this.fireCauseRatioObj.address = ''
@@ -343,8 +314,8 @@ export default {
       () =>
         this.resizeTimeActions([
           this.$refs.categoryLine,
-          this.$refs.pieThreeD1,
-          this.$refs.pieThreeD2,
+          this.$refs.firePie1,
+          this.$refs.firePie2,
         ]),
       true
     );
@@ -401,11 +372,10 @@ export default {
         this.$api.fire.trendQuery +
           "?" +
           this.$qs.stringify({
-            year: new Date().getFullYear(),
             address: this.barForm.address,
             fireType: this.barForm.fireType,
-            startTime: this.$store.state.timeList[0] || "",
-            endTime: this.$store.state.timeList[1] || "",
+            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
           })
       );
       if (res) this.timeData = res.data;
@@ -451,17 +421,19 @@ export default {
             size: 1000,
             startTime: this.$store.state.timeList[0] || "",
             endTime: this.$store.state.timeList[1] || "",
-            // address:val === 1 ? this.tabObj.address :val === 2 ? this.tabObj.address2 : ''
           })
       );
       if (res){ 
-        // if(val ===1){
-        //   this.tableData = res.data.records;
-        // } else if(val ===2){
-        //   this.tableData2 = res.data.records;
-        // } else {
-        //   this.tableData = res.data.records;
+        if(res.data.records.some(val=> val.propertyLoss > 10 * 10000)){
+          this.headerData[2].name = '财产损失（万元）'
+          this.tableData = res.data.records.map(val=> {
+            val.propertyLoss = val.propertyLoss / 10000
+            return val
+          });
+        } else{
           this.tableData = res.data.records;
+          this.headerData[3].name = '财产损失（元）'
+        }
         // }
       }
     },
@@ -479,7 +451,9 @@ export default {
       if (res) this.tableData2 = res.data;
     },
     searchTime(val){
+      if(val === this.timeArea) return
       this.timeArea = val
+      this.getTrend()
     }
   },
 };

src/views/fire-signs.vue

@@ -6,7 +6,7 @@
           <h4>风险等级对比图</h4>
           <el-row class="threeBox">
             <div class="flexBoxE">
-              <pie-three-d ref="pieThreeD" :dataMap="fireCauseRatioList" :distance="200"></pie-three-d>
+              <fire-pie ref="firePie" :dataMap="fireCauseRatioList" :distance="200"></fire-pie>
             </div>
           </el-row>
         </el-col>
@@ -15,9 +15,9 @@
           <el-row class="leftBotContent">
             <el-row class="selectBar">
               <el-row>
-                <el-button size="mini" @click="searchTime('one')" :class="{ btnClick: timeArea === 'one' }">近一年</el-button>
-                <el-button size="mini" @click="searchTime('three')" :class="{ btnClick: timeArea === 'three' }">近三年</el-button>
-                <el-button size="mini" @click="searchTime('five')" :class="{ btnClick: timeArea === 'five' }">近五年</el-button>
+                <el-button size="mini" @click="searchTime(1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
+                <el-button size="mini" @click="searchTime(3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
+                <el-button size="mini" @click="searchTime(5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
               </el-row>
               <el-form :inline="true" size="mini" :model="barForm">
                 <el-form-item label="">
@@ -64,7 +64,7 @@
           </el-col>
           <el-col class="rightTop">
             <h4>各街镇单位情况</h4>
-             <category ref="category" :dataMap="timeData"></category>
+             <category ref="category" :dataMap="timeData" color="red" :borderRadius="[0,0,0,0]"></category>
           </el-col>
           <el-col class="rightBot">
             <h4>挂牌督改情况</h4>
@@ -85,13 +85,13 @@
 import linstener from "@c/mixins/linstener";
 import categoryLine from "@c/category-line";
 import category from "@c/category";
-import pieThreeD from "@c/pie-3D";
+import firePie from "@c/fire-pie";
 import seTable from "@c/se-table";
 import AMap from 'AMap'
 import map from "@c/mixins/map";
 import radarChart from "@c/radar";
 export default {
-  components: { categoryLine, pieThreeD, seTable, radarChart, category },
+  components: { categoryLine, firePie, seTable, radarChart, category },
   mixins: [linstener,map],
   data() {
     return {
@@ -127,7 +127,7 @@ export default {
         fireType: "",
         address: "",
       },
-      timeArea: 'one',
+      timeArea: 1,
     };
   },
   created() {
@@ -144,7 +144,7 @@ export default {
           this.$refs.categoryLine,
           this.$refs.category,
           this.$refs.radarChart,
-          this.$refs.pieThreeD,
+          this.$refs.firePie,
         ]),
       true
     );
@@ -201,11 +201,10 @@ export default {
         this.$api.fire.trendQuery +
           "?" +
           this.$qs.stringify({
-            year: new Date().getFullYear(),
             address: this.barForm.address,
             fireType: this.barForm.fireType,
-            startTime: this.$store.state.timeList[0] || "",
-            endTime: this.$store.state.timeList[1] || "",
+            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
           })
       );
       if (res) this.timeData = res.data;
@@ -263,7 +262,9 @@ export default {
       if (res) this.tableData = res.data;
     },
     searchTime(val){
+      if(val === this.timeArea) return
       this.timeArea = val
+      this.getTrend()
     }
   },
 };
@@ -402,7 +403,7 @@ export default {
       height: 100%;
       & > .el-col {
         flex: 1;
-        max-height: 34%;
+        max-height: 40%;
         background: url('~@a/img/home/box-bg.png') no-repeat;
         background-size: 100% 100%;
         position: relative;
@@ -423,6 +424,10 @@ export default {
       .rightTop{
         margin-bottom: 0.125rem;
       }
+      .rightBot{
+        height: 20%;
+        flex: none;
+      }
     }
   }
 }

src/views/water-sources.vue

@@ -181,7 +181,7 @@ export default {
         { prop: "address", name: "位置" },
         { prop: "jurisdictionalAgency", name: "管辖机构" },
         { prop: "getWaterType", name: "取水形式" },
-        { prop: "waterGage", name: "水压" },
+        { prop: "waterGage", name: "水压（Mpa）" },
         { prop: "status", name: "状态" },
       ],
       fireWaterStatisticsObj:{
@@ -239,7 +239,13 @@ export default {
           })
       );
       if (res){
-         this.tableData = res.data.records
+         this.tableData = res.data.records.map(val=>{
+           console.log(val.waterGage)
+           return {
+             ...val,
+             waterGage:( + val.waterGage).toFixed(2) || 0
+           }
+         })
          this.addMarker(res.data.records,'water')
       }
     },