更改

1 year ago · 4ae433b8e2
5 changed files with 260 additions and 250 deletions
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
@ -1,148 +1,151 @@
 window.echartsData = [
-   { value: 25, name: '处理中' },
-   { value: 40, name: '待处理' },
-   { value: 35, name: '已处理' },]
+  { value: 25, name: "处理中" },
+  { value: 40, name: "待处理" },
+  { value: 35, name: "已处理" },
+];

-window.colorList = [
-   "#FFee0B",
-   "#61D8FF",
-   "#6AE0BC",
-
-]
+window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC"];
 window.count = 0;

 echartsData.forEach((it) => {
-   count += it.value;
-})
-
+  count += it.value;
+});

 var options = {
-   color: colorList,
-   legend: {
-      orient: 'vertical',
-      top: "center",
-      icon: "circle",
-      right: 15,
-      itemGap: 16,
-      itemWidth: 8,
-      itemHeight: 8,
-      textStyle: {
-         color: "#fff",
-         fontSize: 12,
-         rich: {
-            ast: {
-               align: "left",
-               fontSize: 12,
-               width: 35,
-            },
-            bst: {
-               align: "left",
-               fontSize: 12,
-               marginLeft: 20,
-               color: "#37E7FF"
-            }
-         }
-      },
-      formatter: (params) => {
-         let count = 0;
-         echartsData.forEach((it) => {
-            count += it.value;
-         })
-         if (count == 0) count = 1;
-         let obj = echartsData.filter(it => { return it.name == params })
-         return `{ast|${obj[0].name}}       {bst|${Math.round(obj[0].value / count * 100)}%}`
+  color: colorList,
+  legend: {
+    orient: "vertical",
+    top: "center",
+    icon: "circle",
+    right: 15,
+    itemGap: 16,
+    itemWidth: 8,
+    itemHeight: 8,
+    textStyle: {
+      color: "#fff",
+      fontSize: 12,
+      rich: {
+        ast: {
+          align: "left",
+          fontSize: 12,
+          width: 35,
+        },
+        bst: {
+          align: "left",
+          fontSize: 12,
+          marginLeft: 10,
+          color: "#37E7FF",
+        },
      },
-      data: echartsData?.map(x => x),
-   },
-   tooltip: {
-      trigger: 'item',
-   },
-   series: [{
-      name: '',
-      type: 'pie',
-      radius: '78%',
-      center: ['40%', '50%'],
-      roseType: 'radius',
+    },
+    formatter: (params) => {
+      let count = 0;
+      echartsData.forEach((it) => {
+        count += it.value;
+      });
+      if (count == 0) count = 1;
+      let obj = echartsData.filter((it) => {
+        return it.name == params;
+      });
+      return `{ast|${obj[0].name}}          {bst|${Math.round(
+        (obj[0].value / count) * 100
+      )}%}`;
+    },
+    data: echartsData?.map((x) => x),
+  },
+  tooltip: {
+    trigger: "item",
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      radius: "120px",
+      width: "200px",
+      center: ["130px", "50%"],
+      roseType: "radius",
      label: {
-         show: false,
-         position: 'outside',
-         fontSize: 16,
-         formatter: (params) => {
-            return `{a|${params.name}} {b|${params.value / count}%}`
-         },
-         rich: {
-            a: {
-               align: "left",
-               fontSize: 12,
-            },
-            b: {
-               align: "left",
-               fontSize: 12,
-            }
-         },
+        show: false,
+        position: "outside",
+        fontSize: 16,
+        formatter: (params) => {
+          return `{a|${params.name}} {b|${params.value / count}%}`;
+        },
+        rich: {
+          a: {
+            align: "left",
+            fontSize: 12,
+          },
+          b: {
+            align: "left",
+            fontSize: 12,
+          },
+        },
      },
      itemStyle: {
-         normal: {
-            shadowColor: "rgba(0, 0, 0, 0.5)",
-            shadowBlur: 50,
-         },
+        normal: {
+          shadowColor: "rgba(0, 0, 0, 0.5)",
+          shadowBlur: 50,
+        },
      },
      labelLine: {
-         show: false,
-         length: 10,
-         length2: 30,
+        show: false,
+        length: 10,
+        length2: 30,
      },
      data: echartsData.map((item, index) => {
-         return {
-            ...item,
-            label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }, {
-      name: '',
-      type: 'pie',
-      radius: '90%',
+        return {
+          ...item,
+          label: {
+            color: colorList[index],
+          },
+        };
+      }),
+    },
+    {
+      name: "",
+      type: "pie",
+      radius: "130px",
      hoverAnimation: false,
      emphasis: { scale: false },
-      center: ['40%', '50%'],
-      roseType: 'radius',
+      center: ["130px", "50%"],
+      roseType: "radius",
      label: {
-         show: false,
-         position: 'outside',
-         fontSize: 16,
-         formatter: (params) => {
-            return `{a|${params.name}} `
-         },
-         rich: {
-            a: {
-               align: "left",
-               fontSize: 12,
-            }
-         },
+        show: false,
+        position: "outside",
+        fontSize: 16,
+        formatter: (params) => {
+          return `{a|${params.name}} `;
+        },
+        rich: {
+          a: {
+            align: "left",
+            fontSize: 12,
+          },
+        },
      },
      itemStyle: {
-         normal: {
-            opacity: 0.3,
-            shadowColor: "rgba(0, 0, 0, 0.8)",
-            shadowBlur: 50,
-         },
+        normal: {
+          opacity: 0.3,
+          shadowColor: "rgba(0, 0, 0, 0.8)",
+          shadowBlur: 50,
+        },
      },
      labelLine: {
-         show: false,
-         length: 10,
-         length2: 30,
+        show: false,
+        length: 10,
+        length2: 30,
      },
      data: echartsData.map((item, index) => {
-         return {
-            ...item,
-            label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }]
+        return {
+          ...item,
+          label: {
+            color: colorList[index],
+          },
+        };
+      }),
+    },
+  ],
 };

-export default options;
+export default options;
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
@ -117,8 +117,8 @@ var options = {
    orient: "vertical", //改变排列方式
    icon: "circle", //改变legend小图标形状
    itemGap: 15, // 设置legend的间距
-    itemWidth: 10, // 设置宽度
-    itemHeight: 15, // 设置高度
+    itemWidth: 8, // 设置宽度
+    // itemHeight: 15, // 设置高度

    itemStyle: {
      borderColor: "transparent",
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
@ -2,7 +2,8 @@
  <div class='congestion'>
    <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
    <div class="board">
-      <div class="charts keep-ratio " id="monthStatistics"></div>
+      <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
+      <div v-else class="charts keep-ratio " id="monthStatistics"></div>
    </div>
  </div>
 </template>
@ -21,7 +22,7 @@ export default {
  },
  data() {
    return {
-
+      dataList: []
    }
  },

@ -38,6 +39,7 @@ export default {
        getDailyCumulativeMonth().then((res) => {
          console.log(res);
          if (res.code == 200) {
+            this.dataList = res.data;
            let data = res.data;
            let timeData = [];
            let datasN = [];
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
@ -1,151 +1,156 @@
 window.typeAnalysisData = [
-   { value: 100, name: '行人' },
-   // { value: 90, name: '非机动车' },
-   // { value: 80, name: '拥堵' },
-   // { value: 60, name: '逆行' },
-   // { value: 50, name: '抛洒物' },
-   // { value: 45, name: '烟火' }
-]
+  // { value: 100, name: '行人' },
+  // { value: 90, name: '非机动车' },
+  // { value: 80, name: '拥堵' },
+  // { value: 60, name: '逆行' },
+  // { value: 50, name: '抛洒物' },
+  // { value: 45, name: '烟火' }
+];

 window.colorList = [
-   "#019AFF",
-   "#3CC3F0",
-   "#51D5AD",
-   "#FFDD69",
-   "#F6A73C",
-   "#7390FD",]
+  "#019AFF",
+  "#3CC3F0",
+  "#51D5AD",
+  "#FFDD69",
+  "#F6A73C",
+  "#7390FD",
+];

-window.colorList1 = [
-   "#61D8FF",
-   "#FFB905",
-   "#6AE0BC",]
+window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];

 var options = {
-   color: colorList,
-   legend: {
-      orient: 'vertical',
-      top: "10",
-      icon: "circle",
-      right: 40,
-      itemGap: 16,
-      itemWidth: 8,
-      itemHeight: 8,
-      textStyle: {
-         color: "#fff",
-         fontSize: 12,
-         rich: {
-            ast: {
-               align: "left",
-               fontSize: 12,
-               width: 30,
-            },
-            bst: {
-               align: "left",
-               fontSize: 12,
-               marginLeft: 20,
-               color: "#37E7FF"
-            }
-         }
+  color: colorList,
+  legend: {
+    orient: "vertical",
+    top: "10",
+    icon: "circle",
+    right: 40,
+    itemGap: 16,
+    itemWidth: 8,
+    itemHeight: 8,
+    textStyle: {
+      color: "#fff",
+      fontSize: 12,
+      rich: {
+        ast: {
+          align: "left",
+          fontSize: 12,
+          width: 30,
+        },
+        bst: {
+          align: "left",
+          fontSize: 12,
+          marginLeft: 20,
+          color: "#37E7FF",
+        },
      },
-      formatter: (params) => {
-         let count = 0;
-         typeAnalysisData.forEach((it) => {
-            count += it.value;
-         })
-         let obj = typeAnalysisData.filter(it => { return it.name == params })
-         // console.log(obj);
-         return `{ast|${obj[0].name}}        {bst|${Math.round((obj[0].value / count) * 100)}%}`
-      },
-      // data: typeAnalysisData?.map(x => x.name),
-   },
-   tooltip: {
-      trigger: 'item',
-   },
-   series: [{
-      name: '',
-      type: 'pie',
-      radius: '80%',
-      center: ['40%', '50%'],
+    },
+    formatter: (params) => {
+      let count = 0;
+      typeAnalysisData.forEach((it) => {
+        count += it.value;
+      });
+      let obj = typeAnalysisData.filter((it) => {
+        return it.name == params;
+      });
+      // console.log(obj);
+      return `{ast|${obj[0].name}}        {bst|${
+        Math.round((obj[0].value / count) * 100) || 0
+      }%}`;
+    },
+    // data: typeAnalysisData?.map(x => x.name),
+  },
+  tooltip: {
+    trigger: "item",
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      radius: "70%",
+      center: ["30%", "50%"],
      clockwise: false,
-      roseType: 'radius',
+      roseType: "radius",
      startAngle1: 180,
      label: {
-         show: false,
-         position: 'outside',
-         fontSize: 16,
-         formatter: (params) => {
-            return `{a|${params.name}}`
-         },
-         rich: {
-            a: {
-               align: "left",
-               fontSize: 12,
-            }
-         },
+        show: false,
+        position: "outside",
+        fontSize: 16,
+        formatter: (params) => {
+          return `{a|${params.name}}`;
+        },
+        rich: {
+          a: {
+            align: "left",
+            fontSize: 12,
+          },
+        },
      },
      itemStyle: {
-         normal: {
-            shadowColor: "rgba(0, 0, 0, 0.8)",
-            shadowBlur: 50,
-         },
+        normal: {
+          shadowColor: "rgba(0, 0, 0, 0.8)",
+          shadowBlur: 50,
+        },
      },
      labelLine: {
-         show: false,
-         length: 10,
-         length2: 30,
+        show: false,
+        length: 10,
+        length2: 30,
      },
      data: typeAnalysisData.map((item, index) => {
-         return {
-            ...item,
-            label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }, {
-      name: '',
-      type: 'pie',
-      radius: '90%',
+        return {
+          ...item,
+          label: {
+            color: colorList[index],
+          },
+        };
+      }),
+    },
+    {
+      name: "",
+      type: "pie",
+      radius: "80%",
      hoverAnimation: false,
      emphasis: { scale: false },
      clockwise: false,
-      center: ['40%', '50%'],
-      roseType: 'radius',
+      center: ["30%", "50%"],
+      roseType: "radius",
      label: {
-         show: false,
-         position: 'outside',
-         fontSize: 16,
-         formatter: (params) => {
-            return `{a|${params.name}}`
-         },
-         rich: {
-            a: {
-               align: "left",
-               fontSize: 12,
-            }
-         },
+        show: false,
+        position: "outside",
+        fontSize: 16,
+        formatter: (params) => {
+          return `{a|${params.name}}`;
+        },
+        rich: {
+          a: {
+            align: "left",
+            fontSize: 12,
+          },
+        },
      },
      itemStyle: {
-         normal: {
-            opacity: 0.3,
-            shadowColor: "rgba(0, 0, 0, 0.8)",
-            shadowBlur: 50,
-         },
+        normal: {
+          opacity: 0.3,
+          shadowColor: "rgba(0, 0, 0, 0.8)",
+          shadowBlur: 50,
+        },
      },
      labelLine: {
-         show: false,
-         length: 10,
-         length2: 30,
+        show: false,
+        length: 10,
+        length2: 30,
      },
      data: typeAnalysisData.map((item, index) => {
-         return {
-            ...item,
-            label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }]
+        return {
+          ...item,
+          label: {
+            color: colorList[index],
+          },
+        };
+      }),
+    },
+  ],
 };

-export default options;
+export default options;
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
@ -6,7 +6,7 @@
    </div>
  </div>
 </template>
-  
+
 <script>

 import WgtTitle from '../../../widgets/title'