安全评价修正部分问题

wj-manage-web/src/utils/fetch/fetch.js

 function Async(url = "", data = {}, type = "GET", params = {}) {
-  console.log(url, data, type, params);
+  // console.log(url, data, type, params);
   let authorization = "";
 
   this.url = url;
@@ -68,21 +68,21 @@ function Async(url = "", data = {}, type = "GET", params = {}) {
     var response = await fetch(this.url, requestConfig);
     let responseJson = {};
     if (response.status == 200) {
-      console.log(response);
+      //   console.log(response);
       if (response.url.includes("histrory-track")) {
         try {
           responseJson = await response.arrayBuffer();
-        } catch (e) {}
+        } catch (e) { }
       }
       if (this.url.includes(".pdf")) {
-        console.log("this.url", this.url);
+        // console.log("this.url", this.url);
         try {
           responseJson = await response.blob();
-        } catch (e) {}
+        } catch (e) { }
       } else {
         try {
           responseJson = await response.json();
-        } catch (e) {}
+        } catch (e) { }
       }
     }
     this.runHttpProvider("response", response, responseJson);

wj-manage-web/src/views/safety/analysisTypes.vue

@@ -3,9 +3,21 @@
     <el-row style="height: 42%" :gutter="12" class="p-b-10">
       <el-col style="position: relative" class="full-h" :span="13">
         <div class="inChartTitle">数量</div>
-        <div class="full-w full-h" :id="computedId"></div>
+        <div
+          v-loading="barChartLoading"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          class="full-w full-h"
+          :id="computedId"
+        ></div>
       </el-col>
-      <el-col class="full-h" :span="11">
+      <el-col
+        v-loading="pieChartLoading"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        class="full-h"
+        :span="11"
+      >
         <type-pie-chart
           v-if="!total"
           ref="pieChart"
@@ -24,7 +36,6 @@
       <el-col class="full-h" :span="13">
         <el-table
           v-loading="tableLoading"
-          element-loading-text="数据加载中.."
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)"
           ref="multipleTable"
@@ -144,7 +155,22 @@ export default {
         "rgba(31, 72, 125,0.5)",
         "rgba(129, 181, 109,0.5)",
       ];
+      let chartTitle = {
+        show: false,
+      };
+      if (!this.xAxisData.length) {
+        chartTitle = {
+          show: true,
+          text: "暂无数据",
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#abb9be",
+          },
+        };
+      }
       return {
+        title: chartTitle,
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -300,13 +326,13 @@ export default {
     },
   },
   watch: {
-    crossData(newVal, oldVal) {
-      console.log("props watch...", newVal);
-      this.refreshBarChart();
-    },
-    dayType(newVal, oldVal) {
-      this.refreshBarChart();
-    },
+    // crossData(newVal, oldVal) {
+    //   console.log("props watch...", newVal);
+    //   this.refreshBarChart();
+    // },
+    // dayType(newVal, oldVal) {
+    //   this.refreshBarChart();
+    // },
   },
   data() {
     return {
@@ -326,6 +352,8 @@ export default {
       tableData: [],
       tableLoading: false,
       init: true,
+      barChartLoading: false,
+      pieChartLoading: false,
     };
   },
   mounted() {},
@@ -343,12 +371,14 @@ export default {
       this.xAxisData = [];
       this.series1 = [];
       if (this.crossData && this.crossData.crossId) {
+        this.barChartLoading = true;
         safetySeveralCycle({
           crossId: this.crossData.crossId,
           // crossId: "12F6L08J630",
           dayType: this.dayType,
           eventCategory: this.dataType,
         }).then((res) => {
+          this.barChartLoading = false;
           this.barChartDataSource = res.content;
           console.log("bar chart data...", res);
           for (let item of res.content) {
@@ -358,7 +388,6 @@ export default {
             this.series1.push(item.eventNumber);
           }
           this.barChart && this.barChart.clear();
-          let option = this.barChartOption;
           this.barChart = echarts.init(
             document.getElementById(this.computedId)
           );
@@ -373,7 +402,7 @@ export default {
             });
           }
 
-          this.barChart.setOption(option, true);
+          this.barChart.setOption(this.barChartOption, true);
           // 模拟点击最后一根柱子 即获取最新一条数据详情
           if (res.content.length) {
             this.refreshBarColor(res.content.length - 1);
@@ -426,12 +455,12 @@ export default {
           }
         }
       }
-      let option = this.barChartOption;
-      this.barChart.setOption(option, true);
+      this.barChart.setOption(this.barChartOption, true);
     },
     refreshTableByTime(index) {
       console.log(this.barChartDataSource);
       let params = this.barChartDataSource[index];
+      this.tableLoading = true;
       safetyEventList({
         crossId: params.crossId,
         startTime: params.startTime,
@@ -441,12 +470,14 @@ export default {
         // endTime: "2023-04-18 09:00:00",
         eventCategory: this.dataType,
       }).then((res) => {
+        this.tableLoading = false;
         console.log("safe table list", res);
         this.tableData = res.content.rows;
       });
     },
     refreshPieChart(index) {
       let params = this.barChartDataSource[index];
+      this.pieChartLoading = true;
       safetyPieData({
         crossId: params.crossId,
         startTime: params.startTime,
@@ -457,6 +488,7 @@ export default {
         // "eventCategory": "4",
         // startTime: "2023-05-01 08:00:00",
       }).then((res) => {
+        this.pieChartLoading = false;
         console.log("pie data", res);
         this.pieChartData = res.content;
         this.$nextTick(() => {

wj-manage-web/src/views/safety/bottomCameras.vue

@@ -2,7 +2,7 @@
   <div class="cameraList">
     <div class="cross_videos_title"><span></span>路口视频</div>
     <div class="cross_videos">
-      <!-- <div class="videos_placeholder" v-if="list.length && type === 'online'">
+      <div class="videos_placeholder" v-if="list.length && type === 'online'">
         <div class="video" v-for="item of list" :key="item">
           <div class="video_inner">
             <camera-video
@@ -14,7 +14,7 @@
           </div>
         </div>
         
-      </div> -->
+      </div>
       <div
         class="videos_placeholder"
         v-if="channels.length && type === 'history'"
@@ -30,9 +30,9 @@
             ></loop-video>
           </div>
         </div>
-        <!-- <div v-if="!cameraList.length" class="video_inner_no">
+        <div v-if="!channels.length && !list.length" class="video_inner_no">
             <img alt="" src="../../assets/images/safety/noVideo.svg" />
-          </div> -->
+          </div>
       </div>
     </div>
   </div>

wj-manage-web/src/views/safety/index.vue

@@ -13,7 +13,12 @@
       <div class="tabs_top">
         <div class="top_title">{{ crossName }}</div>
         <div class="compare_t">
-          <div class="compare_total">
+          <div
+            class="compare_total"
+            v-loading="safetyIndexLoading"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+          >
             <div class="current_index">
               路口安全系数<span>{{ currentCrossData.safeFactor || 0 }}</span
               ><img
@@ -40,7 +45,7 @@
           </div>
           <div class="time_select">
             <div class="select_label">时间类型：</div>
-            <el-radio-group v-model="dayType">
+            <el-radio-group @input="dayTypeChange" v-model="dayType">
               <el-radio :label="1">天</el-radio>
               <el-radio :label="2">周</el-radio>
               <el-radio :label="3">月</el-radio>
@@ -58,11 +63,7 @@
           class="commonPathMap"
         />
         <!-- <path-map-ctrl ref="pathMap" class="commonPathMap" /> -->
-        <el-tabs
-          :before-leave="beforeLeaveTab"
-          v-model="tabsActiveName"
-          @tab-click="tabsHandleClick"
-        >
+        <el-tabs v-model="tabsActiveName" @tab-click="tabsHandleClick">
           <el-tab-pane :lazy="true" name="1" label="综合评价">
             <ana-types
               dataType=""
@@ -137,22 +138,17 @@ export default {
     PathMapCtrl,
   },
   computed: {
-    crossName(){
-        return this.currentCrossData.crossName
-    }
+    crossName() {
+      return this.currentCrossData.crossName;
+    },
   },
   data() {
     return {
+      safetyIndexLoading: true,
       pathParam: {},
       pathApiName: "",
       cameraList: [],
       cameraType: "",
-      tabs: [
-        { name: "1", label: "综合评价", ref: "comp1" },
-        { name: "2", label: "隐患分析", ref: "comp2" },
-        { name: "3", label: "违法分析", ref: "comp3" },
-        { name: "4", label: "事故分析", ref: "comp4" },
-      ],
       dayType: 1,
       up: require("../../assets/images/efficiency/up.png"),
       down: require("../../assets/images/efficiency/down.png"),
@@ -164,9 +160,11 @@ export default {
       cameraTimeBetween: {},
     };
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
+    dayTypeChange() {
+      this.$refs[`comp${this.tabsActiveName}`].refreshBarChart();
+    },
     eventPlay(row) {
       console.log("event play...", row);
       this.cameraType = "history";
@@ -206,10 +204,6 @@ export default {
       }
       return "";
     },
-    // 离开tab页 销毁当前底图防止创建太多gl上下文
-    beforeLeaveTab(e, a) {
-      // this.$refs[`comp${a}`].destroyMap();
-    },
     tabsHandleClick(e) {
       this.$nextTick(() => {
         this.$refs[`comp${e.name}`].initData();
@@ -218,7 +212,7 @@ export default {
     // 选择不同路口 => 更新右侧所有数据
     crossChange(row) {
       this.currentCrossData = row;
-    //   debugger
+      this.$refs[`comp${this.tabsActiveName}`].refreshBarChart();
       if (Array.isArray(row.cameraList)) {
         this.cameraList = row.cameraList;
       } else {
@@ -230,6 +224,7 @@ export default {
       safetyCompare({ crossId: this.currentCrossData.crossId }).then((res) => {
         this.compareCrossData = res.content;
         console.log("safety compare", res);
+        this.safetyIndexLoading = false;
       });
     },
   },

wj-manage-web/src/views/safety/totalPieChart.vue

@@ -99,17 +99,22 @@ export default {
         "#fcfcfc",
         "#7ac3f4",
       ];
+      let chartTitle = {
+        show: false,
+      };
+      if (!this.typeData.length) {
+        chartTitle = {
+          show: true,
+          text: "暂无数据",
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#abb9be",
+          },
+        };
+      }
       option = {
-        title: {
-          // text: total,
-          // left: "37%",
-          // top: "40%",
-          // textStyle: {
-          //   color: "white",
-          //   fontSize: getFontSize(22),
-          //   fontFamily: "YouSheBiaoTiHei, serif",
-          // },
-        },
+        title: chartTitle,
         color: colors,
         tooltip: {
           trigger: "item",
@@ -160,7 +165,8 @@ export default {
   },
 
   beforeDestroy() {
-    myChart.dispose();
+    this.destroyChart()
+    // myChart?.dispose();
   },
 };
 </script>

wj-manage-web/src/views/safety/typePieChart.vue

@@ -76,71 +76,68 @@ export default {
             ratio: (item.ratio * 100).toFixed(2) + "%",
           });
         }
-        let chartDom = document.getElementById(`pieChart${this.model.id}`);
-        myChart = echarts.init(chartDom);
-        let option;
-
-        let colors = [
-          "#5557f7",
-          "#2e9af5",
-          "#16ccbf",
-          "#0de3ff",
-          "#bdf2b2",
-          "#fcfcfc",
-          "#7ac3f4",
-        ];
-        option = {
-          // title: {
-          //   text: "1212",
-          //   left: "37%",
-          //   top: "40%",
-          //   textStyle: {
-          //     color: "white",
-          //     fontSize: getFontSize(22),
-          //     fontFamily: "YouSheBiaoTiHei, serif",
-          //   },
-          // },
-          color: colors,
-          tooltip: {
-            trigger: "item",
-            // formatter: "{a} <br/>{b}: {c} ({d}%)",
+      }
+      let chartTitle = {
+        show: false,
+      };
+      if (!this.formatdata.length) {
+        chartTitle = {
+          show: true,
+          text: "暂无数据",
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#abb9be",
           },
-          series: [
-            {
-              type: "pie",
-              radius: ["45%", "70%"],
-              labelLine: {
-                show: false,
-              },
-              label: {
-                show: false,
-              },
-              itemStyle: {
-                borderWidth: 2,
-                borderColor: "rgba(252, 252, 252,0.5)",
-              },
-              data: this.formatdata,
-              event: "click",
-            },
-          ],
         };
-        option && myChart.setOption(option);
-        myChart.on("click", (params) => {
-          // console.log(params);
-        });
-        // myChart.getZr().on('click',(params) => {
-        //   console.log(params)
-        //   console.log(params.name)
-        // })
-        window.addEventListener("resize", () => {
-          myChart.resize();
-        });
       }
+      let chartDom = document.getElementById(`pieChart${this.model.id}`);
+      myChart = echarts.init(chartDom);
+      let option;
+      let colors = [
+        "#5557f7",
+        "#2e9af5",
+        "#16ccbf",
+        "#0de3ff",
+        "#bdf2b2",
+        "#fcfcfc",
+        "#7ac3f4",
+      ];
+      option = {
+        title: chartTitle,
+        color: colors,
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["45%", "70%"],
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              borderWidth: 2,
+              borderColor: "rgba(252, 252, 252,0.5)",
+            },
+            data: this.formatdata,
+            event: "click",
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
     },
   },
 
   beforeDestroy() {
     myChart.dispose();
+    this.destroyChart();
   },
 };
 </script>