更改

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,25 +1,20 @@
 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;
-})
-
+});

 var options = {
  color: colorList,
  legend: {
-      orient: 'vertical',
+    orient: "vertical",
    top: "center",
    icon: "circle",
    right: 15,
@ -38,37 +33,43 @@ var options = {
        bst: {
          align: "left",
          fontSize: 12,
-               marginLeft: 20,
-               color: "#37E7FF"
-            }
-         }
+          marginLeft: 10,
+          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)}%}`
+      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),
+    data: echartsData?.map((x) => x),
  },
  tooltip: {
-      trigger: 'item',
-   },
-   series: [{
-      name: '',
-      type: 'pie',
-      radius: '78%',
-      center: ['40%', '50%'],
-      roseType: 'radius',
+    trigger: "item",
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      radius: "120px",
+      width: "200px",
+      center: ["130px", "50%"],
+      roseType: "radius",
      label: {
        show: false,
-         position: 'outside',
+        position: "outside",
        fontSize: 16,
        formatter: (params) => {
-            return `{a|${params.name}} {b|${params.value / count}%}`
+          return `{a|${params.name}} {b|${params.value / count}%}`;
        },
        rich: {
          a: {
@ -78,7 +79,7 @@ var options = {
          b: {
            align: "left",
            fontSize: 12,
-            }
+          },
        },
      },
      itemStyle: {
@ -96,30 +97,31 @@ var options = {
        return {
          ...item,
          label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }, {
-      name: '',
-      type: 'pie',
-      radius: '90%',
+            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',
+        position: "outside",
        fontSize: 16,
        formatter: (params) => {
-            return `{a|${params.name}} `
+          return `{a|${params.name}} `;
        },
        rich: {
          a: {
            align: "left",
            fontSize: 12,
-            }
+          },
        },
      },
      itemStyle: {
@ -138,11 +140,12 @@ var options = {
        return {
          ...item,
          label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }]
+            color: colorList[index],
+          },
+        };
+      }),
+    },
+  ],
 };

 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,11 +1,11 @@
 window.typeAnalysisData = [
-   { value: 100, name: '行人' },
+  // { value: 100, name: '行人' },
  // { value: 90, name: '非机动车' },
  // { value: 80, name: '拥堵' },
  // { value: 60, name: '逆行' },
  // { value: 50, name: '抛洒物' },
  // { value: 45, name: '烟火' }
-]
+];

 window.colorList = [
  "#019AFF",
@ -13,17 +13,15 @@ window.colorList = [
  "#51D5AD",
  "#FFDD69",
  "#F6A73C",
-   "#7390FD",]
+  "#7390FD",
+];

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

 var options = {
  color: colorList,
  legend: {
-      orient: 'vertical',
+    orient: "vertical",
    top: "10",
    icon: "circle",
    right: 40,
@ -43,44 +41,49 @@ var options = {
          align: "left",
          fontSize: 12,
          marginLeft: 20,
-               color: "#37E7FF"
-            }
-         }
+          color: "#37E7FF",
+        },
+      },
    },
    formatter: (params) => {
      let count = 0;
      typeAnalysisData.forEach((it) => {
        count += it.value;
-         })
-         let obj = typeAnalysisData.filter(it => { return it.name == params })
+      });
+      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)}%}`
+      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: '80%',
-      center: ['40%', '50%'],
+    trigger: "item",
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      radius: "70%",
+      center: ["30%", "50%"],
      clockwise: false,
-      roseType: 'radius',
+      roseType: "radius",
      startAngle1: 180,
      label: {
        show: false,
-         position: 'outside',
+        position: "outside",
        fontSize: 16,
        formatter: (params) => {
-            return `{a|${params.name}}`
+          return `{a|${params.name}}`;
        },
        rich: {
          a: {
            align: "left",
            fontSize: 12,
-            }
+          },
        },
      },
      itemStyle: {
@ -98,31 +101,32 @@ var options = {
        return {
          ...item,
          label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }, {
-      name: '',
-      type: 'pie',
-      radius: '90%',
+            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',
+        position: "outside",
        fontSize: 16,
        formatter: (params) => {
-            return `{a|${params.name}}`
+          return `{a|${params.name}}`;
        },
        rich: {
          a: {
            align: "left",
            fontSize: 12,
-            }
+          },
        },
      },
      itemStyle: {
@ -141,11 +145,12 @@ var options = {
        return {
          ...item,
          label: {
-               color: colorList[index]
-            }
-         }
-      })
-   }]
+            color: colorList[index],
+          },
+        };
+      }),
+    },
+  ],
 };

 export default options;