Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

ruoyi-ui/src/api/perception/meteorologyCheck.js

@@ -23,6 +23,7 @@ export function getMeteorologicalEarlyWarning() {
     method: "post",
   });
 }
+
 // 查询气象预警数量
 export function getQueryTheNumberOfMeteorologicalWarning() {
   return request({
@@ -30,3 +31,27 @@ export function getQueryTheNumberOfMeteorologicalWarning() {
     method: "post",
   });
 }
+
+// 统计气象设备当天最新信息列表
+export function getListLatest() {
+  return request({
+    url: "/dc/system/meteorologicalDetector/listLatest",
+    method: "get",
+  });
+}
+
+// 统计气象设备信息列表
+export function getDeviceNameListLatest(name) {
+  return request({
+    url: "/dc/system/meteorologicalDetector/" + name,
+    method: "get",
+  });
+}
+
+// 根据物联产品id获取设备数据
+export function getIdDevices(id) {
+  return request({
+    url: "/business/device/devices/" + id,
+    method: "get",
+  });
+}

ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue

@@ -160,12 +160,10 @@ export default {
     handleResetForm() {
       if(this.params && this.types == 'input'){
         this.value = "";
-        return
       }
-
       // this.visible = true;
       this.$refs.FormConfigRef?.reset();
-      this.$refs.FormConfigRef.$refs.ElFormRef.resetFields();
+      this.$refs.FormConfigRef?.$refs.ElFormRef.resetFields();
       // this.$refs.PopoverRef.doClose();
       
       this.$emit(

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="550x">
+  <Dialog v-model="modelVisible" title="设备操作" width="550px">
     <div class="DeviceControlDialog">
       <Form
         v-model="formData"

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="550px">
+  <Dialog v-model="modelVisible" title="设备操作" width="910px">
     <div class="DeviceControlDialog">
       <ElTabs v-model="activeName" class="tabs" @tab-click="tabClick">
         <ElTabPane label="一般模式" name="first">
@@ -25,7 +25,7 @@
           <Table :data="tableData">
             <ElTableColumn prop="ds" label="段数"></ElTableColumn>
 
-            <ElTableColumn prop="time" width="120" label="时间(豪秒)">
+            <ElTableColumn prop="time" width="120" label="时间(毫秒)">
               <template slot-scope="scope">
                 <div style="display: flex">
                   <el-input-number

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@@ -134,7 +134,7 @@ export class MarkerCluster {
           return `
           <div style="cursor: pointer; padding: 3px 6px;display: flex;align-items: center; gap: 6px;" class="info-window-item">
             ${++num}<img  style="width: 18px;" src="${getIcon(item)}" />
-            <span>${(
+            <span style="white-space: nowrap; word-break: break-all;">${(
               item.extData.deviceName ||
               item.extData.warningTitle ||
               item.config?.item.title
@@ -151,11 +151,11 @@ export class MarkerCluster {
 
     window.renderData = renderData;
 
+    // min-width: 240px;
+    // min-height: 90px;
+    // width: 90px;
     this.infoWindow.setContent(`<div
     style="
-      min-width: 240px;
-      min-height: 90px;
-      width: 90px;
       display: flex;
       flex-direction: column;
       position: relative;
@@ -172,7 +172,7 @@ export class MarkerCluster {
             (item) => `
               <div style="cursor: pointer; padding: 3px 6px;display: flex;align-items: center; gap: 6px;" class="info-window-item">
                ${++num} <img  style="width: 18px;" src="${getIcon(item)}" />
-                <span>${(
+                <span style="white-space: nowrap; word-break: break-all;">${(
                   item.extData.deviceName ||
                   item.extData.warningTitle ||
                   item.config?.item.title

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue

@@ -3,6 +3,7 @@
     v-model="visibleModel"
     :title="`${data ? '修改' : '新增'}值班信息表`"
     width="1000px"
+    top="15%"
   >
     <div class="ModifyDutyInformationTable">
       <div class="body">

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue

@@ -26,7 +26,7 @@
           </template>
           新增
         </ButtonGradient>
-        <ButtonGradient @click.native="setCurrentPage(1)">
+        <ButtonGradient @click.native="onRefreshForm">
           <template #prefix>
             <img src="@screen/images/refresh.svg" />
           </template>
@@ -35,6 +35,7 @@
       </div>
 
       <InputSearch
+        ref="searchComp"
         style="width: 402px"
         :formList="searchFormList"
         :formConfigOptions="{ labelWidth: '100px' }"
@@ -227,6 +228,10 @@ export default {
     this.getOptions();
   },
   methods: {
+    onRefreshForm(){
+      this.$refs.searchComp.handleResetForm();
+      this.setCurrentPage(1);
+    },
     async getOptions() {
       const result = await getSelectOptionsStation(2);
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/index.vue

@@ -14,7 +14,7 @@
           </template>
           导出
         </ButtonGradient>
-        <ButtonGradient @click.native="setCurrentPage(1)">
+        <ButtonGradient @click.native="onRefreshForm">
           <template #prefix>
             <img src="@screen/images/refresh.svg" />
           </template>
@@ -23,6 +23,7 @@
       </div>
 
       <InputSearch
+        ref="searchComp"
         style="width: 402px"
         :formList="searchFormList"
         :formConfigOptions="{ labelWidth: '90px' }"
@@ -148,6 +149,10 @@ export default {
     this.getVehicleTypeList();
   },
   methods: {
+    onRefreshForm(){
+      this.$refs.searchComp.handleResetForm();
+      this.setCurrentPage(1);
+    },
     getVehicleTypeList() {
       if (this.vehicleTypeList.length) return;
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue

@@ -14,7 +14,7 @@
           </template>
           导出
         </ButtonGradient>
-        <ButtonGradient @click.native="setCurrentPage(1)">
+        <ButtonGradient @click.native="onRefreshForm">
           <template #prefix>
             <img src="@screen/images/refresh.svg" />
           </template>
@@ -22,7 +22,10 @@
         </ButtonGradient>
       </div>
 
+      <!-- formList是UI配置 -->
+      <!-- params是字段名 -->
       <InputSearch
+        ref="searchComp"
         style="width: 402px"
         :formList="searchFormList"
         :formConfigOptions="{ labelWidth: '72px' }"
@@ -95,6 +98,10 @@ export default {
     this.getSearchOptions();
   },
   methods: {
+    onRefreshForm(){
+      this.$refs.searchComp.handleResetForm();
+      this.setCurrentPage(1);
+    },
     async handleDelete(data) {
       await confirm({ message: "是否要删除该人员?" });
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/jurisdictionalManagement/index.vue

@@ -14,7 +14,7 @@
           </template>
           导出
         </ButtonGradient>
-        <ButtonGradient @click.native="getData">
+        <ButtonGradient @click.native="onRefreshForm">
           <template #prefix>
             <img src="@screen/images/refresh.svg" />
           </template>
@@ -23,6 +23,7 @@
       </div>
 
       <InputSearch 
+        ref="searchComp"
         style="width: 402px;" 
         :formList="searchFormList" 
         :formConfigOptions="{ labelWidth: '90px' }"
@@ -135,6 +136,10 @@ export default {
     // this.getSearchOptions();
   },
   methods: {
+    onRefreshForm(){
+      this.$refs.searchComp.handleResetForm();
+      this.setCurrentPage(1);
+    },
     getSearchData() {
       const result = {
         ...this.searchData,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue

@@ -2,7 +2,7 @@
   <div class="RoadNetworkMonitoring">
     <!-- 搜索栏 -->
     <div class="filter">
-      <ButtonGradient @click="onRefresh" class="refresh-btn">
+      <ButtonGradient @click="onRefreshForm" class="refresh-btn">
         <template #prefix>
           <img src="./images/refresh.svg" />
         </template>
@@ -10,6 +10,7 @@
       </ButtonGradient>
 
       <InputSearch
+        ref="searchComp"
         style="width: 402px"
         :formList="searchFormList"
         :formConfigOptions="{ dFormData: { eventState: '0' } }"
@@ -103,6 +104,10 @@ export default {
     this.initData();
   },
   methods: {
+    onRefreshForm(){
+      this.searchData.pageNum = 1;
+      this.$refs.searchComp.handleResetForm();
+    },
     initData() {
       request({
         // url: `/dc/system/event/dispatchEventList`,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="事件详情" width="880px">
+  <Dialog v-model="modelVisible" title="事件详情" width="880px" top="15%">
     <div
       class="EventDetail"
       :style="{

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue

@@ -27,7 +27,7 @@
         </ButtonGradient>
       </div>
 
-      <InputSearch style="width: 402px" :formList="searchFormList" @handleSearch="handleSearch" />
+      <InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList" @handleSearch="handleSearch" />
     </div>
 
     <!-- 内容 -->
@@ -212,10 +212,12 @@ export default {
       }
     },
     onRefresh() {
-      this.data = [];
-      setTimeout(() => {
-        this.getData();
-      }, 100);
+      this.searchData.pageNum = 1;
+      this.$refs.searchComp.handleResetForm();
+      // this.data = [];
+      // setTimeout(() => {
+      //   this.getData();
+      // }, 100);
     },
     onSizeChange(pageSize) {
       this.searchData.pageSize = pageSize;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js

@@ -35,7 +35,8 @@ var options = {
   title: [
     {
       text: "999",
-      top: "25%",
+      // top: "25%",
+      top: "40%",
       textAlign: "center",
       left: "48%",
       textStyle: {
@@ -46,7 +47,8 @@ var options = {
     },
     {
       text: "总数",
-      top: "38%",
+      // top: "38%",
+      top: "58%",
       textAlign: "center",
       left: "48%",
       textStyle: {
@@ -113,8 +115,10 @@ var options = {
     /** 饼图上刻度 */
     {
       type: "gauge",
-      center: ["50%", "35%"],
-      radius: "46%", // 错位调整此处
+      // center: ["50%", "35%"],
+      // radius: "46%", // 错位调整此处
+      center: ["50%", "55%"],
+      radius: "86%", // 错位调整此处
       startAngle: 0,
       endAngle: 360,
       splitNumber: 52,
@@ -134,8 +138,10 @@ var options = {
       name: "总数",
       tooltip: false,
       type: "gauge",
-      radius: "30%",
-      center: ["50%", "35%"],
+      // radius: "30%",
+      // center: ["50%", "35%"],
+      radius: "55%",
+      center: ["50%", "55%"],
       startAngle: 0,
       endAngle: 360,
       axisLine: {
@@ -201,8 +207,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["40%", "50%"],
-      center: ["50%", "35%"],
+      // radius: ["40%", "50%"],
+      // center: ["50%", "35%"],
+      radius: ["70%", "90%"],
+      center: ["50%", "55%"],
       z: 10,
       label: {
         show: false,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue

@@ -3,6 +3,28 @@
     <WgtTitle :title="'事件源分析'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio" id="channelAnalytics"></div>
+      <div class="legend-box">
+        <el-carousel height="200px" direction="vertical">
+          <el-carousel-item
+            v-for="(item, index) in dataList"
+            :key="index"
+            class="legend-item"
+          >
+            <div v-for="(items, index) in item" class="legend-items">
+              <span class="legend-name">{{ items.name }}</span>
+              <span class="legend-num">{{ items.value }} 起</span>
+              <span class="legend-percert">{{ items.percert }}%</span>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+        <!-- <div v-for="item in 3" :key="item">
+          <div v-for="(item, index) in dataList" class="legend-item">
+            <span class="legend-name">{{ item.name }}</span>
+            <span class="legend-num">{{ item.value }} 起</span>
+            <span class="legend-percert">{{ item.percert }}%</span>
+          </div>
+        </div> -->
+      </div>
     </div>
   </div>
 </template>
@@ -18,14 +40,15 @@ export default {
     WgtTitle,
   },
   data() {
-    return {};
+    return {
+      dataList: [],
+    };
   },
 
   created() {},
   methods: {
     getEventSourceRatio() {
       return eventSourceRatio().then((response) => {
-        console.log("response", response);
         let data = [];
         let total = null;
         let nameData = [];
@@ -37,26 +60,39 @@ export default {
           });
           total += response.data[i].num;
         }
-        console.log("total", total);
         for (let i = 0; i < data.length; i++) {
           if (data[i].name != "") {
             nameData.push(data[i].name);
+            this.dataList.push({
+              name: data[i].name,
+              value: data[i].value,
+              percert:
+                total == 0 ? 0 : ((data[i].value / total) * 100).toFixed(2),
+            });
           }
         }
-        chartsStatistics.legend.formatter = function (name) {
-          let tarValue = 0;
-          for (let i = 0; i < response.data.length; i++) {
-            if (response.data[i].eventSourceName === name) {
-              tarValue = response.data[i].num;
-            }
-          }
-          var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
-          return `{text|${name}} {number|${tarValue} 起  } {number|${percert}%}`;
-        };
-        chartsStatistics.legend.data = nameData;
+        const list = this.dataList.reduce((acc, curr, index) => {
+          if (index % 4 === 0) acc.push([]);
+          acc[Math.floor(index / 4)].push(curr);
+          return acc;
+        }, []);
+        this.dataList = list;
+
+        /**
+         * echarts 自带翻页 勿删
+         */
+        // chartsStatistics.legend.formatter = function (name) {
+        //   let tarValue = 0;
+        //   for (let i = 0; i < response.data.length; i++) {
+        //     if (response.data[i].eventSourceName === name) {
+        //       tarValue = response.data[i].num;
+        //     }
+        //   }
+        //   var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+        //   return `{text|${name}} {number|${tarValue} 起  } {number|${percert}%}`;
+        // };
+        // chartsStatistics.legend.data = nameData;
         chartsStatistics.title[0].text = total;
-        // chartsStatistics.tooltip.show = false;
-        // chartsStatistics.series[1].data[0].value = total;
         chartsStatistics.series[2].data = data;
       });
     },
@@ -92,14 +128,184 @@ export default {
         rgba(55, 231, 255, 0)
       )
       1 1;
+    .charts {
+      height: 176px;
+      width: 100%;
+    }
+    .legend-box {
+      width: 60%;
+      margin: auto;
+      margin-top: 20px;
+      height: 125px;
+      overflow: hidden;
+
+      .legend-item {
+        width: 100%;
+        /**
+         单个动画循环样式 勿删
+        */
+        // height: 30px;
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // animation: 5s infinite roll;
+        // position: relative;
+
+        // &::before {
+        //   // position: absolute;
+        //   content: "";
+        //   width: 8px;
+        //   height: 8px;
+        //   left: 0px;
+        //   border-radius: 50%;
+        //   background: #37e7ff;
+        // }
+        .legend-items {
+          width: 100%;
+          height: 30px;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          &::before {
+            // position: absolute;
+            content: "";
+            width: 8px;
+            height: 8px;
+            left: 0px;
+            border-radius: 50%;
+            background: #37e7ff;
           }
-}
+        }
+        .legend-name {
+          width: 100px;
+          margin-left: 10px;
+          font-size: 14px;
+        }
+        .legend-num,
+        .legend-percert {
+          width: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          color: #37e7ff;
+          font-weight: bold;
+        }
+      }
+      .legend-item:nth-child(1) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #68f4dd;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #1785c0;
+          }
+        }
+        .legend-items:nth-child(3) {
+          &::before {
+            background: #476dbc;
+          }
+        }
+        .legend-items:nth-child(4) {
+          &::before {
+            background: #b55233;
+          }
+        }
+      }
+      .legend-item:nth-child(2) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #b0862c;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #35ad6b;
+          }
+        }
+        .legend-items:nth-child(3) {
+          &::before {
+            background: #219f73;
+          }
+        }
+        .legend-items:nth-child(4) {
+          &::before {
+            background: #7cedd5;
+          }
+        }
+      }
+      /**
+      单个动画循环样式 勿删
+       */
+      // .legend-item:nth-child(1) {
+      //   &::before {
+      //     background: #68f4dd;
+      //   }
+      // }
+      // .legend-item:nth-child(2) {
+      //   &::before {
+      //     background: #1785c0;
+      //   }
+      // }
+      // .legend-item:nth-child(3) {
+      //   &::before {
+      //     background: #476dbc;
+      //   }
+      // }
+      // .legend-item:nth-child(4) {
+      //   &::before {
+      //     background: #b55233;
+      //   }
+      // }
+      // .legend-item:nth-child(5) {
+      //   &::before {
+      //     background: #b0862c;
+      //   }
+      // }
+      // .legend-item:nth-child(6) {
+      //   &::before {
+      //     background: #35ad6b;
+      //   }
+      // }
+      // .legend-item:nth-child(7) {
+      //   &::before {
+      //     background: #219f73;
+      //   }
+      // }
+      // .legend-item:nth-child(8) {
+      //   &::before {
+      //     background: #7cedd5;
+      //   }
+      // }
 
-.charts {
-  height: 376px;
-  width: 100%;
+      // .legend-item:nth-child(9) {
+      //   &::before {
+      //     background: #68f4dd;
+      //   }
+      // }
+    }
+  }
+}
+::v-deep .el-carousel__indicators--vertical {
+  display: none;
 }
+/**
+单个动画循环样式 勿删
+*/
+// @keyframes roll {
+//   0% {
+//     transform: translateY(-0);
+//   }
+//   50% {
+//     transform: translateY(-40px);
+//   }
+//   // 100% {
+//   //   transform: translateY(-80px);
+//   // }
+//   100% {
+//     transform: translateY(0px);
+//   }
+// }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js

@@ -7,10 +7,10 @@ let colors = [
   "#05E599",
   "#219F73",
   "#7CEDD5",
-  "#854101",
-  "#05E599",
-  "#219F73",
-  "#7CEDD5",
+  "#68F4DD",
+  "#1785C0",
+  "#476DBC",
+  "#B55233",
 ];
 // let colorend = [
 //   "#4278F8",
@@ -50,7 +50,8 @@ var options = {
   title: [
     {
       text: "999",
-      top: "25%",
+      // top: "25%",
+      top: "40%",
       textAlign: "center",
       left: "48%",
       textStyle: {
@@ -61,7 +62,8 @@ var options = {
     },
     {
       text: "总数",
-      top: "38%",
+      // top: "38%",
+      top: "58%",
       textAlign: "center",
       left: "48%",
       textStyle: {
@@ -86,6 +88,7 @@ var options = {
     },
   },
   legend: {
+    show: false,
     width: "300px",
     height: "120px",
     orient: "vertical",
@@ -127,8 +130,10 @@ var options = {
     /** 饼图上刻度 */
     {
       type: "gauge",
-      center: ["50%", "35%"],
-      radius: "46%", // 错位调整此处
+      // center: ["50%", "35%"],
+      // radius: "46%", // 错位调整此处
+      center: ["50%", "55%"],
+      radius: "86%", // 错位调整此处
       startAngle: 0,
       endAngle: 360,
       splitNumber: 52,
@@ -147,8 +152,10 @@ var options = {
     {
       name: "中心效果圆",
       type: "gauge",
-      radius: "30%",
-      center: ["50%", "35%"],
+      // radius: "30%",
+      // center: ["50%", "35%"],
+      radius: "55%",
+      center: ["50%", "55%"],
       startAngle: 0,
       endAngle: 360,
       axisLine: {
@@ -214,8 +221,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["40%", "50%"],
-      center: ["50%", "35%"],
+      // radius: ["40%", "50%"],
+      // center: ["50%", "35%"],
+      radius: ["70%", "90%"],
+      center: ["50%", "55%"],
       z: 10,
       label: {
         show: false,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue

@@ -3,6 +3,21 @@
     <WgtTitle :title="'事件类型分析'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio" id="eventTypeAnalysis"></div>
+      <div class="legend-box">
+        <el-carousel height="200px" direction="vertical">
+          <el-carousel-item
+            v-for="(item, index) in dataList"
+            :key="index"
+            class="legend-item"
+          >
+            <div v-for="(items, index) in item" class="legend-items">
+              <span class="legend-name">{{ items.name }}</span>
+              <span class="legend-num">{{ items.value }} 起</span>
+              <span class="legend-percert">{{ items.percert }}%</span>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
   </div>
 </template>
@@ -18,7 +33,9 @@ export default {
     WgtTitle,
   },
   data() {
-    return {};
+    return {
+      dataList: [],
+    };
   },
 
   created() {},
@@ -37,28 +54,36 @@ export default {
           total += response.data[i].num;
         }
         for (let i = 0; i < data.length; i++) {
-          // if (i % 2 === 0) {
-          //   data.splice(i + 1, 0, newObj)
-          // }
           if (data[i].name != "") {
             nameData.push(data[i].name);
+            this.dataList.push({
+              name: data[i].name,
+              value: data[i].value,
+              percert:
+                total == 0 ? 0 : ((data[i].value / total) * 100).toFixed(2),
+            });
           }
         }
-        chartsStatistics.legend.data = nameData;
-        console.log(
-          "chartsStatistics.legend.data",
-          chartsStatistics.legend.data
-        );
-        chartsStatistics.legend.formatter = function (name) {
-          let tarValue = 0;
-          for (let i = 0; i < response.data.length; i++) {
-            if (response.data[i].eventName === name) {
-              tarValue = response.data[i].num;
-            }
-          }
-          var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
-          return `{text|${name}} {number|${tarValue} 起  }  {number|${percert}%}`;
-        };
+        const list = this.dataList.reduce((acc, curr, index) => {
+          if (index % 4 === 0) acc.push([]);
+          acc[Math.floor(index / 4)].push(curr);
+          return acc;
+        }, []);
+        this.dataList = list;
+        /**
+         * echarts 自带翻页 勿删
+         */
+        // chartsStatistics.legend.data = nameData;
+        // chartsStatistics.legend.formatter = function (name) {
+        //   let tarValue = 0;
+        //   for (let i = 0; i < response.data.length; i++) {
+        //     if (response.data[i].eventName === name) {
+        //       tarValue = response.data[i].num;
+        //     }
+        //   }
+        //   var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+        //   return `{text|${name}} {number|${tarValue} 起  }  {number|${percert}%}`;
+        // };
         chartsStatistics.title[0].text = total;
         chartsStatistics.series[2].data = data;
       });
@@ -97,14 +122,189 @@ export default {
         rgba(55, 231, 255, 0)
       )
       1 1;
+    .charts {
+      height: 176px;
+      width: 100%;
+    }
+    .legend-box {
+      width: 60%;
+      margin: auto;
+      margin-top: 20px;
+      height: 125px;
+      overflow: hidden;
+
+      .legend-item {
+        width: 100%;
+        /**
+         单个动画循环样式 勿删
+        */
+        // height: 30px;
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // animation: 5s infinite roll;
+        // position: relative;
+
+        // &::before {
+        //   // position: absolute;
+        //   content: "";
+        //   width: 8px;
+        //   height: 8px;
+        //   left: 0px;
+        //   border-radius: 50%;
+        //   background: #37e7ff;
+        // }
+        .legend-items {
+          width: 100%;
+          height: 30px;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          &::before {
+            // position: absolute;
+            content: "";
+            width: 8px;
+            height: 8px;
+            left: 0px;
+            border-radius: 50%;
+            background: #37e7ff;
           }
-}
+        }
+        .legend-name {
+          width: 100px;
+          margin-left: 10px;
+          font-size: 14px;
+        }
+        .legend-num,
+        .legend-percert {
+          width: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          color: #37e7ff;
+          font-weight: bold;
+        }
+      }
+      .legend-item:nth-child(1) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #4278f8;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #5372c4;
+          }
+        }
+        .legend-items:nth-child(3) {
+          &::before {
+            background: #0046ff;
+          }
+        }
+        .legend-items:nth-child(4) {
+          &::before {
+            background: #fb9434;
+          }
+        }
+      }
+      .legend-item:nth-child(2) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #854101;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #05e599;
+          }
+        }
+        .legend-items:nth-child(3) {
+          &::before {
+            background: #219f73;
+          }
+        }
+        .legend-items:nth-child(4) {
+          &::before {
+            background: #7cedd5;
+          }
+        }
+      }
+      .legend-item:nth-child(3) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #68f4dd;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #1785c0;
+          }
+        }
+        .legend-items:nth-child(3) {
+          &::before {
+            background: #476dbc;
+          }
+        }
+        .legend-items:nth-child(4) {
+          &::before {
+            background: #b55233;
+          }
+        }
+      }
+      /**
+      单个动画循环样式 勿删
+       */
+      // .legend-item:nth-child(1) {
+      //   &::before {
+      //     background: #68f4dd;
+      //   }
+      // }
+      // .legend-item:nth-child(2) {
+      //   &::before {
+      //     background: #1785c0;
+      //   }
+      // }
+      // .legend-item:nth-child(3) {
+      //   &::before {
+      //     background: #476dbc;
+      //   }
+      // }
+      // .legend-item:nth-child(4) {
+      //   &::before {
+      //     background: #b55233;
+      //   }
+      // }
+      // .legend-item:nth-child(5) {
+      //   &::before {
+      //     background: #b0862c;
+      //   }
+      // }
+      // .legend-item:nth-child(6) {
+      //   &::before {
+      //     background: #35ad6b;
+      //   }
+      // }
+      // .legend-item:nth-child(7) {
+      //   &::before {
+      //     background: #219f73;
+      //   }
+      // }
+      // .legend-item:nth-child(8) {
+      //   &::before {
+      //     background: #7cedd5;
+      //   }
+      // }
 
-.charts {
-  height: 376px;
-  width: 100%;
+      // .legend-item:nth-child(9) {
+      //   &::before {
+      //     background: #68f4dd;
+      //   }
+      // }
+    }
+  }
+}
+::v-deep .el-carousel__indicators--vertical {
+  display: none;
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue

@@ -17,7 +17,7 @@
                     刷新
                 </ButtonGradient>
             </div>
-            <InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{}"
+            <InputSearch ref="searchComp" style="width: 402px;" :formList="searchFormList" :formConfigOptions="{}"
                 @handleSearch="handleSearch" />
         </div>
 
@@ -119,7 +119,9 @@ export default {
             this.initData();
         },
         onRefresh() {
-            this.initData();
+            this.searchData.pageNum = 1;
+            this.$refs.searchComp.handleResetForm();
+            // this.initData();
         },
         onAdd() {
             this.detail = {}

ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue

@@ -18,6 +18,7 @@
       </div>
 
       <InputSearch
+        ref="searchComp"
         style="width: 402px"
         :formList="searchFormList"
         :formConfigOptions="{ dFormData: { eventState: '0' } }"
@@ -88,6 +89,7 @@ export default {
       pageSize: 16,
       pageNum: 1,
       searchData: {
+        pageNum: 1,
         warningSource: "6",
       },
     };
@@ -101,7 +103,10 @@ export default {
       this.$message.warning("待开发");
     },
     // 刷新
-    onRefresh() {},
+    onRefresh() {
+      this.searchData.pageNum = 1;
+      this.$refs.searchComp.handleResetForm();
+    },
     initData() {
       perceivedEventsList(this.searchData, this.pageNum, this.pageSize).then(
         (res) => {
@@ -147,13 +152,9 @@ export default {
 
     firstBtnClick(id) {},
     handleSearch(data) {
-      console.log("data", data);
-      this.searchData = {
-        ...this.searchData,
-        warningType: data.warningType,
-        startTime: data.warningTime[0],
-        completeTime: data.warningTime[1],
-      };
+      this.searchData.warningType = data.warningType;
+      this.searchData.startTime = data.warningTime && data.warningTime[0];
+      this.searchData.completeTime = data.warningTime && data.warningTime[1];
       this.initData();
     },
   },

ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue

@@ -155,19 +155,19 @@ export default {
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         context.lineWidth = 1; // 设置线段宽度
-        drawRoundRect(context, 430, 134, 280, 24, 12, gr);
-        drawRoundRect(context, 430, 168, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 202, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 236, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 270, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 304, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 338, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 372, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 406, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 440, 280, 24, 10, gr);
-        drawRoundRect(context, 430, 474, 280, 24, 10, gr);
+        drawRoundRect(context, 410, 134, 380, 24, 12, gr);
+        drawRoundRect(context, 410, 168, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 202, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 236, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 270, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 304, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 338, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 372, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 406, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 440, 320, 24, 10, gr);
+        drawRoundRect(context, 410, 474, 320, 24, 10, gr);
         await this.getNonAutomaticWarningType(this.formData);
-        // drawRoundRect(context, 430, 508, 280, 24, 10, gr);
+        // drawRoundRect(context, 410, 508, 320, 24, 10, gr);
       });
     });
   },

ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js

@@ -54,12 +54,12 @@ var options = {
   },
   legend: {
     show: true,
-    width: "300px",
+    width: "380px",
     height: "520px",
     orient: "vertical",
     icon: "circle",
     top: "15%",
-    left: "70%",
+    left: "67%",
     itemWidth: 10,
     itemHeight: 10,
     textStyle: {
@@ -69,7 +69,7 @@ var options = {
       rich: {
         text: {
           width: 50,
-          marginLeft: 32,
+          marginLeft: 0,
           fontSize: 14,
         },
         number: {

ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue

@@ -178,17 +178,17 @@ export default {
           gr.addColorStop(1, "rgba(92,197,255,0)");
           gr.addColorStop(0, "rgba(92,197,255,0.5)");
           context.lineWidth = 1; // 设置线段宽度
-          drawRoundRect(context, 430, 134, 280, 24, 12, gr);
-          drawRoundRect(context, 430, 168, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 202, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 236, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 270, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 304, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 338, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 372, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 406, 280, 24, 10, gr);
-          drawRoundRect(context, 430, 440, 280, 24, 10, gr);
-          // drawRoundRect(context, 430, 474, 280, 24, 10, gr);
+          drawRoundRect(context, 385, 134, 320, 24, 12, gr);
+          drawRoundRect(context, 385, 168, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 202, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 236, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 270, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 304, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 338, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 372, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 406, 320, 24, 10, gr);
+          drawRoundRect(context, 385, 440, 320, 24, 10, gr);
+          // drawRoundRect(context, 385, 474, 320, 24, 10, gr);
           await this.getNonAutomaticWarningFacility(this.formData);
         });
       });

ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js

@@ -54,12 +54,12 @@ var options = {
   },
   legend: {
     show: true,
-    width: "300px",
+    width: "380px",
     height: "520px",
     orient: "vertical",
     icon: "circle",
     top: "15%",
-    left: "70%",
+    left: "63%",
     itemWidth: 10,
     itemHeight: 10,
     textStyle: {
@@ -69,7 +69,7 @@ var options = {
       rich: {
         text: {
           width: 100,
-          marginLeft: 32,
+          marginLeft: 0,
           fontSize: 14,
         },
         number: {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue

@@ -1,31 +1,42 @@
 <template>
-    <div class='congestion'>
-         <div class="queryList" >
-            <Card v-for="(item, index) in data" :cardData="item" :keyMap="keyMap" :hasBtn="false" :gap="'10px'" :key="index">
-              <template #form-start="{ data }">
+  <div class="congestion">
+    <div class="queryList">
+      <Card
+        v-for="(item, index) in dataList"
+        :cardData="item"
+        :keyMap="keyMap"
+        :hasBtn="false"
+        :gap="'10px'"
+        :key="index"
+      >
+        <!-- <template #form-start="{ data }">
           <div class="endSpecial">
             {{ data.start }} <img src="./assets/weater.png" />
           </div>
-                </template>
+        </template> -->
       </Card>
     </div>
-         <div class="queryCharts" >
+    <div class="queryCharts">
       <WeateData class="charts-l" />
       <TemperatureTrend ref="temper" class="charts-ms" />
       <VisibilityTrends ref="visibility" class="charts-ms" />
     </div>
-
   </div>
-  </template>
-  
-  <script>
-  import Card from "@screen/components/Card1/index.vue"
-  import WeateData from './components/weaterData'
-  import TemperatureTrend from './components/TemperatureTrend';
-  import VisibilityTrends from './components/visibilityTrends';
-
-  export default {
-    name: 'WeatherInfoQuery',
+</template>
+
+<script>
+import Card from "@screen/components/Card1/index.vue";
+import WeateData from "./components/weaterData";
+import TemperatureTrend from "./components/TemperatureTrend";
+import VisibilityTrends from "./components/visibilityTrends";
+import {
+  getListLatest,
+  getDeviceNameListLatest,
+  getIdDevices,
+} from "@/api/perception/meteorologyCheck";
+
+export default {
+  name: "WeatherInfoQuery",
   components: {
     Card,
     WeateData,
@@ -34,123 +45,117 @@
   },
   data() {
     return {
-        keyMap:[
+      keyMap: [
         {
-            label:"设备名称",
-            key:"name"
+          label: "设备名称",
+          key: "name",
         },
         {
-            label:"设备位置",
-            key:"name"
+          label: "设备位置",
+          key: "name",
         },
         {
-            label:"所属方向",
-            key:"rote"
+          label: "所属方向",
+          key: "rote",
         },
         {
-            label:"采集时间",
-            key:"time"
+          label: "采集时间",
+          key: "time",
         },
         {
-            label:"气象状态",
-            key:"start"
-          }
+          label: "气象状态",
+          key: "start",
+        },
       ],
-        selectIndex:0,
-        data: Array.from({ length: 10 }).map(() => ({
-        name: "气象监测器1",
-        rote:"济南方向",
-        arrdeass: "K59+256",
-        time: "2024.01.04 13:00:00",
-        start: "晴转多云",
-      })),
-       }
+      selectIndex: 0,
+      dataList: [],
+      // data: Array.from({ length: 10 }).map(() => ({
+      //   name: "气象监测器1",
+      //   rote: "济南方向",
+      //   arrdeass: "K59+256",
+      //   time: "2024.01.04 13:00:00",
+      //   start: "晴转多云",
+      // })),
+    };
   },
 
-    created() {
-      
-    },
+  created() {},
   methods: {
-      selectItem(index){
+    selectItem(index) {
       this.selectIndex = index;
     },
-      resizeChart(){
+    resizeChart() {
       //  console.log(this.$refs.temper);
       this.$refs.temper.reiszeChart();
       this.$refs.visibility.reiszeChart();
-      }
     },
-    mounted() {
-   
-      setTimeout(() => {
-        this.$nextTick(() => {
-         
-        });
+    getList() {
+      getListLatest().then((res) => {
+        console.log("_____________", res);
       });
     },
-  }
-  </script>
-  
-  <style lang='scss' scoped>
+  },
+  mounted() {
+    this.getList();
+  },
+};
+</script>
 
-  .endSpecial {
+<style lang="scss" scoped>
+.endSpecial {
   position: relative;
-    top:-10px;
+  top: -10px;
 
-    >img {
+  > img {
     display: inline-flex;
-      margin-left:20px;
-    }
+    margin-left: 20px;
   }
+}
 
-  .congestion {
+.congestion {
   width: 100%;
-    height:100%;
-    display: flex; flex-direction: column;
-
-
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .queryCharts {
     display: inline-flex;
-        width:100%;
-        flex:1;
+    width: 100%;
+    flex: 1;
 
     .charts-l {
-            width:30%;
+      width: 30%;
     }
 
     .charts-ms {
-          width:40%;
-          margin-left:14px;
+      width: 40%;
+      margin-left: 14px;
     }
   }
 
   .queryList {
     position: relative;
-        top:-10px;
+    top: -10px;
     display: inline-flex;
-        width:100%;
-        height:440px;
+    width: 100%;
+    height: 440px;
     flex-direction: row;
     flex-wrap: wrap;
 
     > div {
-            width:calc(100%/5  - 18px);
-            height:203px;
-            margin-top:10px;
-            margin-left:20px;
+      width: calc(100% / 5 - 18px);
+      height: 203px;
+      margin-top: 10px;
+      margin-left: 20px;
     }
 
     > div:nth-child(5n + 1) {
-            margin-left:0px;
+      margin-left: 0px;
     }
 
     > div:nth-child(5n) {
-            margin-right:0px;
-        }
+      margin-right: 0px;
     }
-
   }
-  
-  </style>
-  
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js

@@ -34,13 +34,15 @@ for (var i = 0; i < res.length; i++) {
   });
   if (res[i].name != "") legendData.push(res[i].name);
 }
-let decoDelta = 48;
+// let decoDelta = 48;
+let decoDelta = 10;
 var options = {
   color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"],
   title: [
     {
       text: "999",
-      top: "27%",
+      // top: "27%",
+      top: "33%",
       textAlign: "center",
       left: "49%",
       textStyle: {
@@ -51,7 +53,8 @@ var options = {
     },
     {
       text: "总数",
-      top: "38%",
+      // top: "38%",
+      top: "48%",
       textAlign: "center",
       left: "49%",
       textStyle: {
@@ -75,6 +78,7 @@ var options = {
     },
   },
   legend: {
+    show: false,
     orient: "vertical",
     height: "80px",
     // left: "10%",
@@ -131,8 +135,10 @@ var options = {
     /** 饼图上刻度 */
     {
       type: "gauge",
-      center: ["50%", "35%"],
-      radius: "40%", // 错位调整此处
+      // center: ["50%", "35%"],
+      // radius: "40%", // 错位调整此处
+      center: ["50%", "45%"],
+      radius: "60%", // 错位调整此处
       startAngle: 0,
       endAngle: 360,
       splitNumber: 52,
@@ -155,7 +161,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
         return {
           type: "circle",
           shape: {
@@ -182,7 +189,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
             startAngle: ((350 + -angle) * Math.PI) / 180,
             endAngle: ((120 + -angle) * Math.PI) / 180,
           },
@@ -202,7 +210,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
         return {
           type: "circle",
           shape: {
@@ -229,7 +238,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
             startAngle: ((150 + -angle) * Math.PI) / 180,
             endAngle: ((-30 + -angle) * Math.PI) / 180,
           },
@@ -249,7 +259,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8;
         return {
           type: "circle",
           shape: {
@@ -276,7 +287,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
             startAngle: ((590 + -angle) * Math.PI) / 180,
             endAngle: ((350 + -angle) * Math.PI) / 180,
           },
@@ -296,7 +308,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8;
         return {
           type: "circle",
           shape: {
@@ -323,7 +336,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
             startAngle: ((90 + -angle) * Math.PI) / 180,
             endAngle: ((160 + -angle) * Math.PI) / 180,
           },
@@ -339,8 +353,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["45%", "39%"],
-      center: ["50%", "35%"],
+      // radius: ["45%", "39%"],
+      // center: ["50%", "35%"],
+      radius: ["60%", "52%"],
+      center: ["50%", "45%"],
       z: 10,
       label: {
         show: false,
@@ -377,8 +393,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["25%", "39%"],
-      center: ["50%", "35%"],
+      // radius: ["25%", "39%"],
+      // center: ["50%", "35%"],
+      radius: ["37%", "60%"],
+      center: ["50%", "45%"],
       label: {
         show: false,
       },

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/index.vue

@@ -1,8 +1,23 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'今日发布审核分析'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio" id="auditAnalytics"></div>
+      <div class="legend-box">
+        <el-carousel height="200px" direction="vertical">
+          <el-carousel-item
+            v-for="(item, index) in dataList"
+            :key="index"
+            class="legend-item"
+          >
+            <div v-for="(items, index) in item" class="legend-items">
+              <span class="legend-name">{{ items.name }}</span>
+              <span class="legend-num">{{ items.value }} 起</span>
+              <span class="legend-percert">{{ items.percert }}%</span>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
   </div>
 </template>
@@ -12,37 +27,56 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-  name: 'RailWayDay',
+  name: "RailWayDay",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
-    return {
-
-    }
-  },
-
-  created() {
-
+    return { dataList: [] };
   },
-  methods: {
 
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('auditAnalytics'));
+        var myChart = echarts.init(document.getElementById("auditAnalytics"));
         myChart.setOption(chartsStatistics);
+        let data = chartsStatistics.series[9].data;
+        let total = null;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].name != "") {
+            total += data[i].value;
+          }
+        }
+
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].name != "") {
+            this.dataList.push({
+              name: data[i].name,
+              value: data[i].value,
+              percert:
+                total == 0 ? 0 : ((data[i].value / total) * 100).toFixed(2),
+            });
+          }
+        }
+        const list = this.dataList.reduce((acc, curr, index) => {
+          if (index % 2 === 0) acc.push([]);
+          acc[Math.floor(index / 2)].push(curr);
+          return acc;
+        }, []);
+        this.dataList = list;
       });
     });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
-  display: flex; flex-direction: column;
+  display: flex;
+  flex-direction: column;
   .board {
     width: 100%;
     flex: 1;
@@ -51,17 +85,119 @@ export default {
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    .charts {
+      height: 240px;
+      width: 100%;
+    }
+    .legend-box {
+      width: 60%;
+      margin: auto;
+      margin-top: 0px;
+      height: 65px;
+      overflow: hidden;
+
+      .legend-item {
+        width: 100%;
+        /**
+         单个动画循环样式 勿删
+        */
+        // height: 30px;
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // animation: 5s infinite roll;
+        // position: relative;
+
+        // &::before {
+        //   // position: absolute;
+        //   content: "";
+        //   width: 8px;
+        //   height: 8px;
+        //   left: 0px;
+        //   border-radius: 50%;
+        //   background: #37e7ff;
+        // }
+        .legend-items {
+          width: 100%;
+          height: 30px;
           display: flex;
           justify-content: space-between;
           align-items: center;
-
+          &::before {
+            // position: absolute;
+            content: "";
+            width: 8px;
+            height: 8px;
+            left: 0px;
+            border-radius: 50%;
+            background: #37e7ff;
+          }
+        }
+        .legend-name {
+          width: 100px;
+          margin-left: 10px;
+          font-size: 14px;
+        }
+        .legend-num,
+        .legend-percert {
+          width: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          color: #37e7ff;
+          font-weight: bold;
+        }
+      }
+      .legend-item:nth-child(1) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #68f4dd;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #ffdd69;
+          }
+        }
+      }
+      .legend-item:nth-child(2) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #3cc3f0;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #5c8cfe;
+          }
+        }
+      }
+      .legend-item:nth-child(3) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #51d5ad;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #1785c0;
+          }
+        }
+      }
+    }
   }
 }
-
-.charts {
-  height: 100%;
-  width: 100%;
+::v-deep .el-carousel__indicators--vertical {
+  display: none;
 }
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js

@@ -36,13 +36,14 @@ for (var i = 0; i < res.length; i++) {
   if (res[i].name != "") legendData.push(res[i].name);
 }
 let angle = 0; //角度，用来做简单的动画效果的
-let decoDelta = 48;
+let decoDelta = 10;
 var options = {
   color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"],
   title: [
     {
       text: "999",
-      top: "27%",
+      // top: "27%",
+      top: "33%",
       textAlign: "center",
       left: "49%",
       textStyle: {
@@ -53,7 +54,8 @@ var options = {
     },
     {
       text: "总数",
-      top: "38%",
+      // top: "38%",
+      top: "48%",
       textAlign: "center",
       left: "49%",
       textStyle: {
@@ -77,6 +79,7 @@ var options = {
     },
   },
   legend: {
+    show: false,
     orient: "vertical",
     // width: "350px",
     height: "80px",
@@ -133,8 +136,10 @@ var options = {
     /** 饼图上刻度 */
     {
       type: "gauge",
-      center: ["50%", "35%"],
-      radius: "46%", // 错位调整此处
+      // center: ["50%", "35%"],
+      // radius: "46%", // 错位调整此处
+      center: ["50%", "45%"],
+      radius: "60%", // 错位调整此处
       startAngle: 0,
       endAngle: 360,
       splitNumber: 52,
@@ -157,7 +162,9 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
+
         return {
           type: "circle",
           shape: {
@@ -184,7 +191,9 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
+
             startAngle: ((350 + -angle) * Math.PI) / 180,
             endAngle: ((120 + -angle) * Math.PI) / 180,
           },
@@ -204,7 +213,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
         return {
           type: "circle",
           shape: {
@@ -231,7 +241,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
             startAngle: ((150 + -angle) * Math.PI) / 180,
             endAngle: ((-30 + -angle) * Math.PI) / 180,
           },
@@ -251,7 +262,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8;
         return {
           type: "circle",
           shape: {
@@ -278,7 +290,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
             startAngle: ((590 + -angle) * Math.PI) / 180,
             endAngle: ((350 + -angle) * Math.PI) / 180,
           },
@@ -298,7 +311,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8;
         return {
           type: "circle",
           shape: {
@@ -325,7 +339,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
             startAngle: ((90 + -angle) * Math.PI) / 180,
             endAngle: ((160 + -angle) * Math.PI) / 180,
           },
@@ -341,9 +356,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["45%", "40%"],
-      center: ["50%", "35%"],
-
+      // radius: ["45%", "40%"],
+      // center: ["50%", "35%"],
+      radius: ["60%", "52%"],
+      center: ["50%", "45%"],
       z: 10,
       label: {
         show: false,
@@ -385,8 +401,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["29%", "40%"],
-      center: ["50%", "35%"],
+      // radius: ["29%", "40%"],
+      // center: ["50%", "35%"],
+      radius: ["37%", "60%"],
+      center: ["50%", "45%"],
       label: {
         show: false,
       },

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/index.vue

@@ -1,8 +1,23 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'今日发布渠道分析'"></WgtTitle>
     <div class="board">
-      <div class="charts keep-ratio " id="channelAnalytics"></div>
+      <div class="charts keep-ratio" id="channelAnalytics"></div>
+      <div class="legend-box">
+        <el-carousel height="200px" direction="vertical">
+          <el-carousel-item
+            v-for="(item, index) in dataList"
+            :key="index"
+            class="legend-item"
+          >
+            <div v-for="(items, index) in item" class="legend-items">
+              <span class="legend-name">{{ items.name }}</span>
+              <span class="legend-num">{{ items.value }} 起</span>
+              <span class="legend-percert">{{ items.percert }}%</span>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
   </div>
 </template>
@@ -12,37 +27,58 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-  name: 'RailWayDay',
+  name: "RailWayDay",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-
-    }
-  },
-
-  created() {
-
+      dataList: [],
+    };
   },
-  methods: {
 
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('channelAnalytics'));
+        var myChart = echarts.init(document.getElementById("channelAnalytics"));
         myChart.setOption(chartsStatistics);
+        let data = chartsStatistics.series[9].data;
+        let total = null;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].name != "") {
+            total += data[i].value;
+          }
+        }
+
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].name != "") {
+            this.dataList.push({
+              name: data[i].name,
+              value: data[i].value,
+              percert:
+                total == 0 ? 0 : ((data[i].value / total) * 100).toFixed(2),
+            });
+          }
+        }
+        const list = this.dataList.reduce((acc, curr, index) => {
+          if (index % 2 === 0) acc.push([]);
+          acc[Math.floor(index / 2)].push(curr);
+          return acc;
+        }, []);
+        this.dataList = list;
       });
     });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
-  display: flex; flex-direction: column;
+  display: flex;
+  flex-direction: column;
   .board {
     flex: 1;
     width: 100%;
@@ -51,17 +87,121 @@ export default {
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    .charts {
+      height: 240px;
+      width: 100%;
+    }
+    .legend-box {
+      width: 60%;
+      margin: auto;
+      margin-top: 0px;
+      height: 65px;
+      overflow: hidden;
+
+      .legend-item {
+        width: 100%;
+        /**
+         单个动画循环样式 勿删
+        */
+        // height: 30px;
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // animation: 5s infinite roll;
+        // position: relative;
+
+        // &::before {
+        //   // position: absolute;
+        //   content: "";
+        //   width: 8px;
+        //   height: 8px;
+        //   left: 0px;
+        //   border-radius: 50%;
+        //   background: #37e7ff;
+        // }
+        .legend-items {
+          width: 100%;
+          height: 30px;
           display: flex;
           justify-content: space-between;
           align-items: center;
-
+          &::before {
+            // position: absolute;
+            content: "";
+            width: 8px;
+            height: 8px;
+            left: 0px;
+            border-radius: 50%;
+            background: #37e7ff;
+          }
+        }
+        .legend-name {
+          width: 100px;
+          margin-left: 10px;
+          font-size: 14px;
+        }
+        .legend-num,
+        .legend-percert {
+          width: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          color: #37e7ff;
+          font-weight: bold;
+        }
+      }
+      .legend-item:nth-child(1) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #68f4dd;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #ffdd69;
+          }
+        }
+      }
+      .legend-item:nth-child(2) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #3cc3f0;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #5c8cfe;
+          }
+        }
+      }
+      .legend-item:nth-child(3) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #51d5ad;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #1785c0;
+          }
+        }
+      }
+    }
   }
 }
 
-.charts {
-  height: 100%;
-  width: 100%;
-}
+// .charts {
+//   height: 100%;
+//   width: 100%;
+// }
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js

@@ -51,7 +51,8 @@ for (var i = 0; i < res.length; i++) {
   });
   if (res[i].name != "") legendData.push(res[i].name);
 }
-let decoDelta = 48;
+// let decoDelta = 48;
+let decoDelta = 10;
 var options = {
   color: [
     "#2867FF",
@@ -67,7 +68,8 @@ var options = {
   title: [
     {
       text: "999",
-      top: "27%",
+      // top: "27%",
+      top: "33%",
       textAlign: "center",
       left: "49%",
       textStyle: {
@@ -78,7 +80,8 @@ var options = {
     },
     {
       text: "总数",
-      top: "38%",
+      // top: "38%",
+      top: "48%",
       textAlign: "center",
       left: "49%",
       textStyle: {
@@ -102,6 +105,7 @@ var options = {
     },
   },
   legend: {
+    show: false,
     orient: "vertical",
     height: "80px",
     // left: "0%",
@@ -157,8 +161,10 @@ var options = {
     /** 饼图上刻度 */
     {
       type: "gauge",
-      center: ["50%", "35%"],
-      radius: "46%", // 错位调整此处
+      // center: ["50%", "35%"],
+      // radius: "46%", // 错位调整此处
+      center: ["50%", "45%"],
+      radius: "60%", // 错位调整此处
       startAngle: 0,
       endAngle: 360,
       splitNumber: 52,
@@ -181,7 +187,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
         return {
           type: "circle",
           shape: {
@@ -208,7 +215,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
             startAngle: ((350 + -angle) * Math.PI) / 180,
             endAngle: ((120 + -angle) * Math.PI) / 180,
           },
@@ -228,7 +236,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
         return {
           type: "circle",
           shape: {
@@ -255,7 +264,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
             startAngle: ((150 + -angle) * Math.PI) / 180,
             endAngle: ((-30 + -angle) * Math.PI) / 180,
           },
@@ -275,7 +285,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8;
         return {
           type: "circle",
           shape: {
@@ -302,7 +313,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
             startAngle: ((590 + -angle) * Math.PI) / 180,
             endAngle: ((350 + -angle) * Math.PI) / 180,
           },
@@ -322,7 +334,8 @@ var options = {
       renderItem: (params, api) => {
         let x0 = api.getWidth() / 2;
         let y0 = api.getHeight() / 2 - decoDelta;
-        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        // let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8;
         return {
           type: "circle",
           shape: {
@@ -349,7 +362,8 @@ var options = {
           shape: {
             cx: api.getWidth() / 2,
             cy: api.getHeight() / 2 - decoDelta,
-            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            // r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
             startAngle: ((90 + -angle) * Math.PI) / 180,
             endAngle: ((160 + -angle) * Math.PI) / 180,
           },
@@ -365,8 +379,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["45%", "40%"],
-      center: ["50%", "35%"],
+      // radius: ["45%", "40%"],
+      // center: ["50%", "35%"],
+      radius: ["60%", "52%"],
+      center: ["50%", "45%"],
       z: 10,
       label: {
         show: false,
@@ -403,8 +419,10 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["29%", "39%"],
-      center: ["50%", "35%"],
+      // radius: ["29%", "39%"],
+      // center: ["50%", "35%"],
+      radius: ["37%", "60%"],
+      center: ["50%", "45%"],
       label: {
         show: false,
       },

ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/index.vue

@@ -1,8 +1,23 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'今日发布事件类型分析'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio" id="eventTypeAnalysis"></div>
+      <div class="legend-box">
+        <el-carousel height="200px" direction="vertical">
+          <el-carousel-item
+            v-for="(item, index) in dataList"
+            :key="index"
+            class="legend-item"
+          >
+            <div v-for="(items, index) in item" class="legend-items">
+              <span class="legend-name">{{ items.name }}</span>
+              <span class="legend-num">{{ items.value }} 起</span>
+              <span class="legend-percert">{{ items.percert }}%</span>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
   </div>
 </template>
@@ -12,37 +27,58 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-  name: 'RailWayDay',
+  name: "RailWayDay",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
-    return {
-
-    }
+    return { dataList: [] };
   },
 
-  created() {
-
-  },
-  methods: {
-
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('eventTypeAnalysis'));
+        var myChart = echarts.init(
+          document.getElementById("eventTypeAnalysis")
+        );
         myChart.setOption(chartsStatistics);
+        let data = chartsStatistics.series[9].data;
+        let total = null;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].name != "") {
+            total += data[i].value;
+          }
+        }
+
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].name != "") {
+            this.dataList.push({
+              name: data[i].name,
+              value: data[i].value,
+              percert:
+                total == 0 ? 0 : ((data[i].value / total) * 100).toFixed(2),
+            });
+          }
+        }
+        const list = this.dataList.reduce((acc, curr, index) => {
+          if (index % 2 === 0) acc.push([]);
+          acc[Math.floor(index / 2)].push(curr);
+          return acc;
+        }, []);
+        this.dataList = list;
       });
     });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
-  display: flex; flex-direction: column;
+  display: flex;
+  flex-direction: column;
   .board {
     width: 100%;
     flex: 1;
@@ -51,17 +87,143 @@ export default {
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    .charts {
+      height: 240px;
+      width: 100%;
+    }
+    .legend-box {
+      width: 60%;
+      margin: auto;
+      margin-top: 0px;
+      height: 65px;
+      overflow: hidden;
+
+      .legend-item {
+        width: 100%;
+        /**
+         单个动画循环样式 勿删
+        */
+        // height: 30px;
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // animation: 5s infinite roll;
+        // position: relative;
+
+        // &::before {
+        //   // position: absolute;
+        //   content: "";
+        //   width: 8px;
+        //   height: 8px;
+        //   left: 0px;
+        //   border-radius: 50%;
+        //   background: #37e7ff;
+        // }
+        .legend-items {
+          width: 100%;
+          height: 30px;
           display: flex;
           justify-content: space-between;
           align-items: center;
-
+          &::before {
+            // position: absolute;
+            content: "";
+            width: 8px;
+            height: 8px;
+            left: 0px;
+            border-radius: 50%;
+            background: #37e7ff;
+          }
+        }
+        .legend-name {
+          width: 100px;
+          margin-left: 10px;
+          font-size: 14px;
+        }
+        .legend-num,
+        .legend-percert {
+          width: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          color: #37e7ff;
+          font-weight: bold;
+        }
+      }
+      .legend-item:nth-child(1) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #2867ff;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #58c3ff;
+          }
+        }
+      }
+      .legend-item:nth-child(2) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #ff6a3b;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #fda474;
+          }
+        }
+      }
+      .legend-item:nth-child(3) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #fee58f;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #8dfebf;
+          }
+        }
+      }
+      .legend-item:nth-child(4) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #66f4dc;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #33e27d;
+          }
+        }
+      }
+      .legend-item:nth-child(5) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #5d8cfe;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #8dfebf;
+          }
+        }
+      }
+    }
   }
 }
-
-.charts {
-  height: 100%;
-  width: 100%;
+::v-deep .el-carousel__indicators--vertical {
+  display: none;
 }
 </style>
-  

ruoyi-ui/vue.config.js

@@ -52,12 +52,12 @@ module.exports = {
         // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
         // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
         // target: `http://10.168.78.135:8087`,  //王钦
-        target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
-        // target: `http://10.168.65.156:8087`, //王思祥
+        // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
+        target: `http://10.168.68.42:8087`, //王思祥
         // target: `http://10.168.65.194:8087`, //赵祥龙
         // target: `http://10.168.65.156:8097`, //孟
         // target: `http://10.168.56.165:8087`, //王家宝
-
+        // target: `http://10.168.77.128:8087`, //王兴琳
         // target: `http://10.168.65.103:8097`,
         changeOrigin: true,
         pathRewrite: {