fix:风险预测

app/src/views/Home/components/RiskWarning.vue

@@ -1,7 +1,8 @@
 <template>
-  <div style="display: flex">
-    <div ref="chart" class="item" style="width: 280px; height: 259px" />
-    <ul style="margin: auto; font-size: 16px">
+  <div style="display: flex; flex-direction: column">
+    <!-- <div ref="chart" class="item" style="width: 280px; height: 259px" /> -->
+    <!-- <ul style="margin: auto; font-size: 16px">
+
       <li @click="showStice('重大风险')" style="margin-bottom: 12px">
         <span
           style="
@@ -70,16 +71,69 @@
           }}</span>
         </span>
       </li>
-    </ul>
+    </ul> -->
+    <div class="tab-en">
+      <div class="tab" :class="addClass(1)" @click="changeTab(1)">风险预警</div>
+      <div class="tab" :class="addClass(2)" @click="changeTab(2)">火灾预测</div>
+    </div>
+    <div style="display: flex; flex-direction: column" v-show="idx == 1">
+      <div
+        style="
+          border: 1px solid #ccc;
+          height: 20px;
+          width: 50px;
+          margin-left: 370px;
+          line-height: 20px;
+        "
+      >
+        单位：栋
+      </div>
+      <!-- 风险预警 -->
+      <div
+        style="display: flex; flex-wrap: wrap; justify-content: space-around"
+      >
+        <div class="card">
+          <div class="left-card">
+            <div class="card-item">重大风险</div>
+          </div>
+          <div class="right-card">{{ showValue("重大风险") }}</div>
+        </div>
+        <div class="card">
+          <div class="left-card" style="background: #ff833d">
+            <div class="card-item">较大风险</div>
+          </div>
+          <div class="right-card">{{ showValue("较大风险") }}</div>
+        </div>
+        <div class="card">
+          <div class="left-card" style="background: #fbff3d">
+            <div class="card-item">一般风险</div>
+          </div>
+          <div class="right-card">{{ showValue("一般风险") }}</div>
+        </div>
+        <div class="card">
+          <div class="left-card" style="background: #35c2ff">
+            <div class="card-item">低风险</div>
+          </div>
+          <div class="right-card">{{ showValue("低风险") }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 预测 -->
+    <div style="width: 434px; height: 340px; margin-left: 2px;" v-show="idx==2">
+      单位：起
+      <div ref="chart" style="width: 434px; height: 230px" />
+    </div>
   </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
+import toolUtils from "@/utils/echartsTooltip";
 export default {
   props: {
     riskList: Array,
     qy: String,
+    monthData: Array,
   },
   data() {
     return {
@@ -92,11 +146,13 @@ export default {
         一般风险: "#fbff3d",
         低风险: "#35c2ff",
       },
+      idx: 1,
     };
   },
   watch: {
-    riskList: {
+    monthData: {
       handler(val) {
+        // console.log("-----------3333", val);
         this.chart = null;
         if (val.length > 0) {
           this.$nextTick(() => {
@@ -104,7 +160,7 @@ export default {
             // 初始化图表实例
             this.chart = echarts.init(chartDom);
 
-            this.initChart(this.riskList);
+            this.initChart(val);
           });
         }
       },
@@ -118,156 +174,146 @@ export default {
       return item ? item.sl : 0;
     },
     initChart(srcData) {
-      let data = [];
-      srcData.forEach((p) => {
-        data.push({
-          value: p.sl,
-          name: p.fxdj,
-        });
-      });
-
-      // 数据补全
-      const category = ["重大风险", "较大风险", "一般风险", "低风险"];
-      category.forEach((p) => {
-        if (data.map((i) => i.name).indexOf(p) < 0) {
-          data.push({
-            name: p,
-            value: 0,
-          });
-        }
-      });
-
-      // 排序
-      // data = data.sort(function (a, b) {
-      //   if (a.name === "重大风险") {
-      //     return -3;
-      //   } else if (a.name === "较大风险") {
-      //     return -2;
-      //   } else if (a.name === "一般风险") {
-      //     return -1;
-      //   } else if (a.name === "低风险") {
-      //     return 0;
-      //   }
-      // });
-      const tmpData = JSON.parse(JSON.stringify(data));
-      data = [];
-      data.push({
-        name: "重大风险",
-        value: tmpData.find((p) => p.name === "重大风险").value,
-      });
-
-      data.push({
-        name: "较大风险",
-        value: tmpData.find((p) => p.name === "较大风险").value,
-      });
-
-      data.push({
-        name: "一般风险",
-        value: tmpData.find((p) => p.name === "一般风险").value,
-      });
-
-      data.push({
-        name: "低风险",
-        value: tmpData.find((p) => p.name === "低风险").value,
-      });
-
-      data.forEach((p) => {
-        p.name = p.name + " " + p.value;
-      });
-      // console.log(data);
-      // const d1 = data.find((p) => p.name === "一般风险");
-      // d1.value = 300;
-      // const d = data.find((p) => p.name === "低风险");
-      // d.value = 1000;
-      let sum = 0;
-      data.forEach((item) => {
-        sum += item.value;
-      });
-
-      let addUp = 0;
-      let minHeight = 2;
-      let top = 5;
-      let color = ["#FF0B0B", "#ff833d", "#fbff3d", "#35c2ff"];
-
-      data = data.map((item, index) => {
-        let itemValue = 0;
-        if ((item.value / sum) * 100 < minHeight) itemValue = minHeight;
-        else itemValue = (item.value / sum) * 100;
-        top += itemValue;
-        return {
-          value: (addUp += itemValue),
-          name: item.name,
-          realValue: item.value,
-          label: {
-            show: false,
-            color: color[index],
-            fontSize: 14,
-            position: index % 2 === 0 ? "left" : "right",
-            formatter: () => {
-              return `${item.name} ${item.value} 栋`;
-            },
-          },
-          labelLine: {
-            show: false,
-            length: index === 0 ? 100 : 20,
-            length2: 30,
-          },
-          itemStyle: {
-            height: `${itemValue}%`,
-            borderColor: color[index],
-            borderWidth: 5,
-            shadowColor: color[index],
-            shadowBlur: 100,
-          },
-        };
-      });
+      var fontColor = "#30eee9";
       const option = {
-        // backgroundColor: "#0d3059",
-        color,
-        series: [
-          {
-            type: "funnel",
-            sort: "ascending",
-            data: data,
-            maxSize: "120%",
-            left: 70,
-          },
-        ],
-        // legend: {
-        //   show: true,
-        //   // right: 50,
-        //   // top: 70,
-        //   // x: 'right',
-        //   y: "center",
-        //   right: 30,
-        //   itemWidth: 10,
-        //   itemHeight: 10,
-        //   itemGap: 20,
-        //   orient: "vertical",
-        //   textStyle: {
-        //     color: "#fff",
-        //     fontSize: 18,
-        //   },
-        //   data: data.map((p) => p.name),
-        // },
+        backgroundColor: "#11183c",
+        grid: {
+          left: "1%",
+          right: "3%",
+          top: "10%",
+          bottom: "15%",
+          containLabel: true,
+        },
         tooltip: {
           show: true,
+          // trigger: "item",
+          trigger: "axis",
           confine: true,
           extraCssText: "z-index: 1000;",
           backgroundColor: "#02809a",
           borderColor: "rgba(0,213,255, .6)",
+          formatter: '{b}: {c}',
           textStyle: {
             color: "#fff",
           },
-          formatter(params) {
-            return `${params.name}栋`;
+        },
+        legend: {
+          show: true,
+          x: 0,
+          y: "0",
+          icon: "stack",
+          itemWidth: 20,
+          itemHeight: 10,
+          textStyle: {
+            color: "#1bb4f6",
           },
+          // data: ["已采纳", "已发布"],
         },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              color: fontColor,
+              interval: 1,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#397cbc",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#195384",
+              },
+            },
+            data: srcData.map((item) => {
+              // return `${item.y.substring(5,7)}月`;
+              return item.y;
+            }),
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            min: 0,
+            // max: 1000,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#2ad1d2",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#11366e",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "line",
+            stack: "总量",
+            // symbol: "circle",
+            // symbolSize: 8,
+            itemStyle: {
+              normal: {
+                type: "solid",
+                color: "#0092f6",
+                lineStyle: {
+                  color: "#0092f6",
+                  width: 1,
+                },
+              },
+            },
+            markPoint: {
+              itemStyle: {
+                normal: {
+                  color: "red",
+                },
+              },
+            },
+            // data: srcData.slice(0, -1).map((item) => {
+            //   return item.hzqs;
+            // }),
+            data:[srcData[0].hzqs,srcData[1].hzqs,srcData[2].hzqs,srcData[3].hzqs,srcData[4].hzqs,srcData[5].hzqs,srcData[6].hzqs,srcData[7].hzqs,srcData[8].hzqs,srcData[9].hzqs,srcData[10].hzqs]
+          },
+          {
+            type: "line",
+            // data: srcData.map((item) => {
+            //   return item.hzqs;
+            // }),
+            data:[null,null,null,null,null,null,null,null,null,null,srcData[10].hzqs,srcData[11].hzqs],
+            lineStyle: {
+              normal: {
+                type: "dotted",
+                color: "#fd87ab",
+              },
+            },
+          },
+        ],
       };
-      // console.log(option.legend);
       this.chart.setOption(option);
       //自适应图表
       window.onresize = this.chart.resize;
+      // 自动轮播
+      toolUtils.autoHover(this.chart, option, 12, 5000);
     },
     createData() {
       let dataArr = [];
@@ -301,8 +347,64 @@ export default {
     showStice(val) {
       this.$emit("showFxyj", val);
     },
+    addClass(v) {
+      return this.idx == v ? " tab active" : "tab";
+    },
+    changeTab(idx) {
+      this.idx = idx;
+    },
   },
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+.tab-en {
+  display: flex;
+  margin-left: 8px;
+}
+.tab {
+  width: 120px;
+  height: 27px;
+  margin: 9px 12px;
+  background: #ccc;
+  transform: perspective(0.5em) rotateX(5deg);
+  font-size: 16px;
+  text-align: center;
+  line-height: 27px;
+  color: black;
+}
+.active {
+  background: rgb(93, 169, 231);
+  color: #fff;
+}
+.card {
+  width: 200px;
+  height: 70px;
+  display: flex;
+  margin-top: 16px;
+  .left-card {
+    width: 100px;
+    background: red;
+  }
+  .right-card {
+    flex: 1;
+    background: #fff;
+    color: #000;
+    font-size: 28px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 70px;
+  }
+  .card-item {
+    color: #000;
+    border: 1px solid rgb(194, 231, 234);
+    height: 40px;
+    width: 80%;
+    margin: auto;
+    line-height: 40px;
+    font-size: 14px;
+    margin-top: 15px;
+    text-align: center;
+  }
+}
+</style>

app/src/views/Home/index.vue

@@ -38,7 +38,12 @@
         <div class="tips" @click="getShoeInfo('smsMsgModal')">提示</div>
       </div>
       <div>
-        <border-panel height="321px" width="938px" title="火灾指数" :header-type="1">
+        <border-panel
+          height="321px"
+          width="938px"
+          title="火灾指数"
+          :header-type="1"
+        >
           <FireIndex :type="fireIndexType" :qx="qy" />
           <template #ext-header>
             <button-block
@@ -57,7 +62,12 @@
         title="预警预测"
         @click-header="openBasicModal"
       >
-        <RiskWarning :riskList="riskList" @showFxyj="showFxyj" :qy="qy" />
+        <RiskWarning
+          :riskList="riskList"
+          @showFxyj="showFxyj"
+          :qy="qy"
+          :monthData="monthData"
+        />
         <template #ext-header>
           <img
             src="../../assets/images/dd_wh.png"
@@ -115,6 +125,7 @@ import FireIndex from "./components/FireIndex/index.vue";
 import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import zzglModul from "./components/zzglModul.vue";
+import { getSxzbListToatl } from "@/api/index.js";
 import {
   totaldata,
   getJqdt,
@@ -159,6 +170,7 @@ export default {
       fireIndexType: 0,
       heatMap: [],
       defaultModel: {},
+      monthData: [],
       mapType: {
         红色: 90,
         橙色: 70,
@@ -169,9 +181,9 @@ export default {
       queryParams: {
         glxs: "", //管理形式
         wbxs: "", //维保形式
-        dxjj: "" //大修基金
-      }
-    }
+        dxjj: "", //大修基金
+      },
+    };
   },
   watch: {
     qy() {
@@ -357,6 +369,58 @@ export default {
         );
       });
     },
+    // 火灾预测
+    loadHzzbSxzbYoy() {
+      getSxzbListToatl({
+        qy: this.qy === "重庆市" ? "" : this.qy,
+      }).then((res) => {
+        this.monthData = res.data.data.sxzbMonth;
+        // let temp = res.data.data;
+        // console.log("009999", temp);
+        // const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12);
+        // (this.monthData = month.map((item, index) =>
+        //   month.length - 1 === index || month.length - 2 === index
+        //     ? {
+        //         name: item.y,
+        //         value: item.hzqs,
+        //         itemStyle: {
+        //           normal: {
+                   
+        //               type: "dotted",
+        //               width: 2,
+        //               color: "#fd87ab",
+        //           },
+        //         },
+        //       }
+        //     : { name: item.y, value: item.hzqs }
+        // )),
+          // console.log("--------zhiss", this.monthData);
+        // let temp=res.data.data
+        // console.log('-------ssssssss',temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12));
+        // const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12);
+        // this.monthLabel = month.map((item) => item.y);
+        // this.monthData = [
+        //   month.map((item, index) =>
+        //     month.length - 1 === index
+        //       ? {
+        //           name: item.qhyy,
+        //           value: item.hzqs,
+        //           itemStyle: {
+        //             color: "#cccccc89",
+        //           },
+        //         }
+        //       : { name: item.y, value: item.hzqs }
+        //   ),
+        //   month.map((item) => ({ name: item.y, value: item.wrs })),
+        //   month.map((item) => ({ name: item.y, value: item.srs })),
+        //   month.map((item) => ({
+        //     name: item.y,
+        //     value: parseInt(item.zzjjss / 10000),
+        //   })),
+
+        // ];
+      });
+    },
   },
   created() {
     this.getList();
@@ -364,21 +428,22 @@ export default {
     this.getFireList();
     this.getIotList();
     this.loadMapData();
+    this.loadHzzbSxzbYoy();
   },
-  mounted(){
+  mounted() {
     this.timer = setInterval(() => {
       // 获取通知
       getJqdt(this.params).then((res) => {
         // console.log("通知", res);
         this.PoliceList = res.data.rows;
       });
-    }, 6000 );
+    }, 6000);
   },
   destroyed() {
     if (this.timer) {
-      clearInterval(this.timer)
+      clearInterval(this.timer);
     }
-  }
+  },
 };
 </script>
 <style scoped>