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

ruoyi-ui/README.md

@@ -74,3 +74,112 @@ npm install video-flash --save
 npm install file-saver --save
 
 ```
+
+## 开发教程
+
+### Element Form 封装
+
+PresetFormItems.js 里面封装了一些可以复用的表单项
+data.js 表单封装,里面会使用PresetFormItems的一些FormItem.
+
+Form表单属性介绍:
+
+  {
+    key: "ServiceAreaAbnormal", //唯一标识 一般tabs才需要
+    label: "服务区异常",//表单标题
+    formConfig: {
+      formOptions: {//element中表单配置参数
+        column: 2,
+      },
+      list: [//FormItem定义
+        {
+          label: "异常分类:",
+          key: "eventSubclass",
+          type: "RadioGroup",
+          isAlone: true,
+          required: true,
+          options: {
+            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+            options: [
+              {
+                key: "8-1",
+                label: "封闭、暂停营业",
+              },
+              {
+                key: "8-2",
+                label: "重要设施停用",
+              },
+              {
+                key: "8-3",
+                label: "其他异常",
+              },
+            ],
+          },
+        },
+        PresetFormItems.freeway,
+        PresetFormItems.direction,
+        {
+          label: "服务区:",
+          key: "dcEventServiceArea.facilityId",
+          type: "select",
+          isAlone: true,
+          required: true,
+          options: {
+            options: [
+              {
+                value: "选项1",
+                label: "黄金糕",
+              },
+            ],
+          },
+        },
+        {
+          label: "出入口:",
+          key: "dcEventServiceArea.exitsInlets",
+          type: "RadioGroup",
+          isAlone: true,
+          required: true,
+          options: {
+            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+            options: [
+              {
+                key: "1",
+                label: "出口",
+              },
+              {
+                key: "2",
+                label: "入口",
+              },
+            ],
+          },
+        },
+        PresetFormItems.startTime,
+        PresetFormItems.expectedEndTime,
+        PresetFormItems.remark,
+        PresetFormItems.source,
+      ],
+    },
+  }
+
+FormItem属性介绍:
+
+export const additionalNotes = {
+  label: "补充说明:", // 标题
+  key: "eventSourceTips", //数据存储字段
+  isAlone: true, //  独立
+  required: true, //必填
+  default: 5, //默认值
+  type: "input", //组件类型(el-input 去掉el-即可) 不填默认为input
+  options: {  //element原生formItem属性
+    type: "textarea",
+    autosize: true,
+    maxlength: 150,
+    autosize: { minRows: 6, maxRows: 6 },
+    showWordLimit: true,
+  },
+  visible: data => { //现隐控制
+    if (data.searchType == 1) {
+        return true
+    }
+  },
+};

ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/Frame.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M22.8501 25H9.2781V6.48857L14.5062 6.47021V15.7296L18.3004 12.7588L22.3776 15.7296V6.47021H25L24.9979 23.1272C24.9979 24.1609 24.0343 25 22.8501 25ZM18.3004 11.5341L15.8174 13.4143V5.31347H21.0664V13.4143L18.3004 11.5341ZM5.07393 4.87281V5.80554C5.07393 6.32332 5.55263 6.74195 6.14579 6.74195L7.94609 6.47021L7.96065 25H6.14579C4.95946 25 4 24.1609 4 23.1272V4.87281C4 3.83726 4.95946 3 6.14579 3H22.8501C23.6409 3 24.3277 3.37823 24.6982 3.9364H6.14579C6.00568 3.93568 5.86678 3.95934 5.73704 4.00603C5.6073 4.05272 5.48928 4.12152 5.38972 4.2085C5.29016 4.29547 5.21103 4.39892 5.15684 4.51291C5.10265 4.6269 5.07448 4.7492 5.07393 4.87281Z" fill="white"/>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue

@@ -30,6 +30,7 @@ import Button from '@screen/components/Buttons/Button.vue';
 import Form from '@screen/components/FormConfig';
 import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
 import { merge, cloneDeep } from "lodash"
+import request from "@/utils/request";
 
 export default {
   name: 'HomeFilter',
@@ -109,6 +110,19 @@ export default {
             ],
           },
         }),
+        {
+          label: "设备类型:",
+          key: "deviceType",
+          type: "select",
+          options: {
+            options: []
+          },
+          // visible: data => {
+          //   if (data.searchType == 1) {
+          //     return true
+          //   }
+          // },
+        },
       ]
     }
   },
@@ -132,7 +146,20 @@ export default {
       if (!data.endStakeMark[0] || !data.endStakeMark[1]) delete data.endStakeMark;
 
       this.filterEnd(data)
+    },
+    async getDeviceTypeOptions() {
+      // try {
+      // await request({
+      //   url: `/business/employees/organization`,
+      //   method: "POST",
+      //   data: {},
+      // });
+      // } catch (e) { console.error(e); }
+      // return ;
     }
+  },
+  async created() {
+    // await this.getDeviceTypeOptions();
   }
 }
 </script>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class='HomeFrame'>
+		<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
+			popper-class="global-input-search-popover">
+			<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')">
+				<img src="@screen/images/home-Frame/Frame.svg">
+			</Button>
+
+			<div class="body">
+				<div class="title">
+					图标含义
+				</div>
+				<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
+				<img class="image" src="@screen/images/home-Frame/logoMean.jpg">
+				<div class="footer">
+				</div>
+			</div>
+		</ElPopover>
+	</div>
+</template>
+
+<script>
+import Button from '@screen/components/Buttons/Button.vue';
+import Form from '@screen/components/FormConfig';
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+import { merge, cloneDeep } from "lodash"
+
+export default {
+	name: 'HomeFrame',
+	components: {
+		Button,
+		Form
+	},
+	data() {
+		return {
+			activeIcon: null
+		}
+	},
+	methods: {
+		handleClick(type) {
+			this.activeIcon = this.activeIcon === type ? null : type;
+		},
+		filterEnd(data) {
+			this.activeIcon = null;
+			// this.filterData = data;
+			this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
+		},
+	}
+}
+</script>
+
+<style lang='scss'>
+div.el-popper.global-input-search-popover {
+	background: rgba(6, 66, 88, 0.8);
+	border: 1px solid rgba(42, 217, 253, 0.6);
+	position: relative;
+	padding-top: 36px;
+	transform: translateY(24px);
+
+	.body {
+		.title {
+			background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
+			padding: 3px 9px;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+
+		}
+	}
+}
+</style>
+<style lang='scss' scoped>
+.image {
+	width: 1440px;
+	height: 900px;
+}
+
+.HomeFrame {
+
+	.btn {
+		padding: 9px;
+		background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
+		border-radius: 4px;
+		overflow: hidden;
+		height: unset;
+		border: 1px solid rgba(40, 144, 167, 1);
+	}
+
+	.btn-active {
+		background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+	}
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -13,7 +13,10 @@
 
       <!-- 右侧 -->
       <div class="content-r">
-        <HomeFilter class="filter" />
+        <div class="home-icons">
+          <HomeFilter class="filter" />
+          <HomeFrame class="Frame" />
+        </div>
         <ConditionStatistics class="right card-menu" />
       </div>
     </section>
@@ -37,6 +40,7 @@ import ConditionStatistics from "./components/ConditionStatistics/index.vue";
 import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import AMapContainer from "./components/AMapContainer/index.vue";
 import HomeFilter from "./components/HomeFilter/index.vue";
+import HomeFrame from "./components/HomeFrame/index.vue";
 import Button from '@screen/components/Buttons/Button.vue';
 
 // import InfoBoard from "./components/InfoBoard"
@@ -50,7 +54,8 @@ export default {
     RoadAndEvents,
     AMapContainer,
     Button,
-    HomeFilter
+    HomeFilter,
+    HomeFrame,
     // InfoBoard
   },
   data() {
@@ -138,11 +143,22 @@ export default {
       display: flex;
       gap: 9px;
 
-      .filter {
+      .home-icons {
         display: flex;
+        gap: 0px;
         flex-direction: column;
-        gap: 9px;
-        padding-top: 15px;
+
+        .filter {
+          display: flex;
+          gap: 9px;
+          padding-top: 15px;
+        }
+
+        .Frame {
+          display: flex;
+          gap: 9px;
+          padding-top: 15px;
+        }
       }
 
       .right {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js

@@ -97,6 +97,12 @@ export const station = {
       },
     ],
   },
+  visible: (data) => {
+    if (data?.dcEventAccident?.locationType != 1) {
+      return false;
+    }
+    return true;
+  },
 };
 
 export const startEndStation = {
@@ -234,7 +240,7 @@ export const eventLevel = {
 
 export const laneOccupancy = {
   label: "车道占用:",
-  key: "dcEventAccident.laneOccupancy",
+  key: "lang",
   type: "CheckboxGroup",
   isAlone: true,
   default: [],
@@ -655,23 +661,23 @@ export const trafficAccidentType = {
   options: {
     options: [
       {
-        value: "1-1",
+        value: "1",
         label: "追尾",
       },
       {
-        value: "1-2",
+        value: "2",
         label: "侧翻",
       },
       {
-        value: "1-3",
+        value: "3",
         label: "撞护栏",
       },
       {
-        value: "1-4",
+        value: "4",
         label: "自然",
       },
       {
-        value: "1-5",
+        value: "5",
         label: "其他事故",
       },
     ],
@@ -698,6 +704,7 @@ export const locationMode = {
   key: "dcEventAccident.locationType",
   required: true,
   type: "select",
+  default: "1",
   options: {
     options: [
       { key: "1", label: "高速主线" },
@@ -1083,4 +1090,58 @@ export const congestionCause = {
       },
     ],
   },
+  ons: {
+    input(value, ...args) {
+      console.log(value);
+      const { formList } = args.slice(-1)[0];
+      const config = formList.find((it) => it.key == "xxyy");
+      let ad = {
+        1: [
+          {
+            key: "1",
+            label: "收费站广场拥堵导致出口压车",
+          },
+          {
+            key: "2",
+            label: "收费站设备故障",
+          },
+          {
+            key: "3",
+            label: "地方道路原因",
+          },
+          {
+            key: "4",
+            label: "省内非集团所辖高速原因",
+          },
+          {
+            key: "5",
+            label: "集团所辖道路拥堵",
+          },
+          {
+            key: "6",
+            label: "集团所辖枢纽立交异常导致主线压车",
+          },
+          {
+            key: "7",
+            label: "路侧起火",
+          },
+          {
+            key: "8",
+            label: "备注项添加",
+          },
+        ],
+        2 : [
+          {
+            key: "1",
+            label: "主线车流量大",
+          },
+          {
+            key: "2",
+            label: "收费站出口车流量大导致主线压车",
+          },
+        ]
+      }
+      config.options.options = (value != 1 ? ad[1] : ad[2]);
+    },
+  },
 };

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js

@@ -12,6 +12,114 @@ export const tabConfigList = [
         PresetFormItems.eventLevel,
         { ...PresetFormItems.locationMode, key: 'dcEventAccident.locationType' },
         PresetFormItems.freeway,
+        {
+          label: "服务区:",
+          key: "dcEventAccident.facilityId",
+          type: "select",
+          isAlone: false,
+          required: true,
+          options: {
+            options: [
+              {
+                value: "选项1",
+                label: "黄金糕",
+              },
+            ],
+          },
+          visible:(data) => {
+            if(data?.dcEventAccident?.locationType == 2){
+               return true;
+            }
+            return false;
+          }
+        },
+        {
+          label: "地点:",
+          key: "dcEventAccident.dd",
+          isAlone: false,
+          required: true,
+          options: {
+            placeholder: "服务区地点",
+          },
+          visible:(data) => {
+            if(data?.dcEventAccident?.locationType == 2){
+               return true;
+            }
+            return false;
+          }
+        },
+        {
+          label: "立交桥:",
+          key: "dcEventAccident.facilityId",
+          type: "select",
+          isAlone: false,
+          required: true,
+          options: {
+            options: [
+              {
+                value: "选项1",
+                label: "黄金糕",
+              },
+            ],
+          },
+          visible:(data) => {
+            if(data?.dcEventAccident?.locationType == 3){
+               return true;
+            }
+            return false;
+          }
+        },
+        {
+          label: "匝道:",
+          key: "dcEventAccident.dd",
+          isAlone: false,
+          required: true,
+          options: {
+            placeholder: "服务区地点",
+          },
+          visible:(data) => {
+            if(data?.dcEventAccident?.locationType == 3){
+               return true;
+            }
+            return false;
+          }
+        },
+        {
+          label: "收费站:",
+          key: "dcEventAccident.facilityId",
+          type: "select",
+          isAlone: false,
+          required: true,
+          options: {
+            options: [
+              {
+                value: "选项1",
+                label: "黄金糕",
+              },
+            ],
+          },
+          visible:(data) => {
+            if(data?.dcEventAccident?.locationType == 4){
+               return true;
+            }
+            return false;
+          }
+        },
+        {
+          label: "地点:",
+          key: "dcEventAccident.dd",
+          isAlone: false,
+          required: true,
+          options: {
+            placeholder: "服务区地点",
+          },
+          visible:(data) => {
+            if(data?.dcEventAccident?.locationType == 4){
+               return true;
+            }
+            return false;
+          }
+        },
         PresetFormItems.direction,
         PresetFormItems.station,
         PresetFormItems.eventHappenTime,
@@ -29,7 +137,7 @@ export const tabConfigList = [
         { ...PresetFormItems.isInTunnel, key: 'dcEventAccident.inTunnel' },
         { ...PresetFormItems.spillName, key: 'dcEventAccident.spillageItem' },
         { ...PresetFormItems.ownerPhone, key: 'dcEventAccident.vehicleOwnerPhone' },
-        { ...PresetFormItems.laneOccupancy, key: 'dcEventAccident.laneOccupancy' },
+        PresetFormItems.laneOccupancy,
         PresetFormItems.vehicleCondition('dcEventAccident'),
         PresetFormItems.casualties('dcEventAccident'),
         PresetFormItems.eventTitle,
@@ -60,7 +168,7 @@ export const tabConfigList = [
         { ...PresetFormItems.isForkRoad, key: 'dcEventVehicleAccident.atIntersection' },
         { ...PresetFormItems.isCurveRoad, key: 'dcEventVehicleAccident.onCurve' },
         { ...PresetFormItems.isInTunnel, key: 'dcEventVehicleAccident.inTunnel' },
-        { ...PresetFormItems.laneOccupancy, key: 'dcEventVehicleAccident.laneOccupancy' },
+        PresetFormItems.laneOccupancy,
         PresetFormItems.vehicleCondition('dcEventVehicleAccident'),
         PresetFormItems.casualties('dcEventVehicleAccident'),
         PresetFormItems.eventTitle,
@@ -304,6 +412,7 @@ export const tabConfigList = [
           type: "RadioGroup",
           isAlone: true,
           required: true,
+          default: "4-1",
           options: {
             activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
             options: [
@@ -327,7 +436,166 @@ export const tabConfigList = [
           },
         },
         { ...PresetFormItems.congestionCause, key: 'dcEventTrafficCongestion.congestionCause' },
+        {
+          label: "详细原因:",
+          key: "xxyy",
+          type: "RadioGroup",
+          isAlone: true,
+          required: true,
+          // default: "1",
+          options: {
+            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+            options: [
+              {
+                key: "1",
+                label: "收费站广场拥堵导致出口压车",
+              },
+              {
+                key: "2",
+                label: "收费站设备故障",
+              },
+              {
+                key: "3",
+                label: "地方道路原因",
+              },
+              {
+                key: "4",
+                label: "省内非集团所辖高速原因",
+              },
+              {
+                key: "5",
+                label: "集团所辖道路拥堵",
+              },
+              {
+                key: "6",
+                label: "集团所辖枢纽立交异常导致主线压车",
+              },
+              {
+                key: "7",
+                label: "路侧起火",
+              },
+              {
+                key: "8",
+                label: "备注项添加",
+              },
+            ],
+          },
+          visible:(data) => {
+            if(data?.dcEventTrafficCongestion?.congestionCause == 1 || data?.dcEventTrafficCongestion?.congestionCause == 6){
+              return true;
+            }
+            return false;
+          },
+        },
         { ...PresetFormItems.isInTunnel, isAlone: true },
+        {
+          label: "地点类型:",
+          key: "locationType",
+          type: "RadioGroup",
+          isAlone: true,
+          required: true,
+          default: "1",
+          options: {
+            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+            options: [
+              {
+                key: "1",
+                label: "单点",
+              },
+              {
+                key: "2",
+                label: "多点",
+              },
+            ],
+          },
+        },
+        {
+          label: "桩号:",
+          key: "stakeMark",
+          required: true,
+          type: "MultipleLabelItem",
+          options: {
+            options: [
+              {
+                prefix: {
+                  text: "K",
+                  style: {
+                    color: "#3DE8FF",
+                  },
+                },
+                key: "stakeMark[0]",
+              },
+              {
+                prefix: {
+                  text: "+",
+                  style: {
+                    color: "#3DE8FF",
+                  },
+                },
+                key: "stakeMark[1]",
+              },
+            ],
+          },
+          visible:(data) => {
+            if(data?.locationType != 1){
+              return false;
+            }
+            return true;
+          }
+        },
+        {
+          label: "起止桩号:",
+          key: "stakeMark",
+          required: true,
+          isAlone: true,
+          type: "MultipleLabelItem",
+          options: {
+            options: [
+              {
+                prefix: {
+                  text: "K",
+                  style: {
+                    color: "#3DE8FF",
+                  },
+                },
+                key: "stakeMark[0]",
+              },
+              {
+                prefix: {
+                  text: "+",
+                  style: {
+                    color: "#3DE8FF",
+                  },
+                },
+                key: "stakeMark[1]",
+              },
+              {
+                prefix: {
+                  text: "至K",
+                  style: {
+                    color: "#3DE8FF",
+                  },
+                },
+                key: "endStakeMark[0]",
+              },
+              {
+                prefix: {
+                  text: "+",
+                  style: {
+                    color: "#3DE8FF",
+                  },
+                },
+                key: "endStakeMark[1]",
+              },
+            ],
+          },
+          visible:(data) => {
+            if(data?.locationType == 2){
+              return true;
+            }
+            return false;
+          }
+        },
         {
           label: "拥堵里程:",
           key: "dcEventTrafficCongestion.congestionMileage",

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

@@ -108,7 +108,7 @@ export default {
       this.index = index;
       let formConfig = tabConfigList[index].formConfig;
 
-      if (index == 7) {
+      if (index == 0 || index == 1 ||  index == 7) {
         let fwq = [];
 
         request({
@@ -125,7 +125,7 @@ export default {
           });
 
         formConfig.list.forEach(it => {
-          if (it.key === 'dcEventServiceArea.facilityId') {
+          if (it.key === 'dcEventServiceArea.facilityId' || it.key === 'dcEventAccident.facilityId') {
             it.options.options = fwq;
           }
         })
@@ -148,15 +148,13 @@ export default {
       this.$refs.FormConfigRef.validate().then((formData) => {
         this.submitting = true;
 
-        if (this.index == 0) {
-          formData.dcEventAccident.laneOccupancy = formData.dcEventAccident.laneOccupancy.join(',')
+        if (this.index == 0 || this.index == 1) {
+          formData.lang = formData.lang.join(',')
         }
-        if (this.index == 1) {
-          formData.dcEventVehicleAccident.laneOccupancy = formData.dcEventVehicleAccident.laneOccupancy.join(',')
-        }
-        if (this.index == 8) {
+        if (this.index == 9) {
           let endStakeMark = formData.endStakeMark;
           formData.dcEventAbnormalWeather.endStakeMark = (endStakeMark && endStakeMark.length > 0) ? ('K' + endStakeMark[0] + '+' + endStakeMark[1]) : '';
+          formData.endStakeMark = '';
         }
         // console.log('formData',formData)
         // return;

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

@@ -1,393 +1,552 @@
 <template>
-    <Dialog v-model="modelVisible" title="收费站管制统计" style="width: 100%;">
-        <div class="search">
-            <InputSearch :formList="searchFormList" @handleSearch="handleSearch" style="width: 502px;" />
-        </div>
-
-        <div class="StatsDetail">
-            <el-table key="table1" v-if="searchType == 2" :data="tableData" style="width: 100%"
-                :span-method="arraySpanMethod">
-                <el-table-column prop="controlCauseName" label="封闭原因" width="150" align="center">
-                </el-table-column>
-                <el-table-column prop="causeTypeName" label="" align="center">
-                </el-table-column>
-                <el-table-column label="封闭站次" align="center">
-                    <el-table-column label="目标时段" width="120" align="center">
-                        <el-table-column prop="num" label="站次" width="120" align="center">
-                        </el-table-column>
-                        <el-table-column prop="numRatio" label="占比（%）" width="120" align="center">
-                        </el-table-column>
-                    </el-table-column>
-                    <el-table-column label="去年同期时间段" align="center">
-                        <el-table-column prop="lastYearNum" label="站次" width="120" align="center">
-                        </el-table-column>
-                        <el-table-column prop="lastYearNumRatio" label="占比（%）" width="120" align="center">
-                        </el-table-column>
-                    </el-table-column>
-                    <el-table-column prop="yearNumRatio" label="同比（%）" align="center"></el-table-column>
-                </el-table-column>
-                <el-table-column label="封闭时长" align="center">
-                    <el-table-column label="目标时段" width="120" align="center">
-                        <el-table-column prop="minuteTime" label="时长（分钟）" width="120" align="center">
-                        </el-table-column>
-                        <el-table-column prop="timeRatio" label="占比（%）" width="120" align="center">
-                        </el-table-column>
-                    </el-table-column>
-                    <el-table-column label="去年同期时间段" align="center">
-                        <el-table-column prop="lastYearTime" label="时长（分钟）" width="120" align="center">
-                        </el-table-column>
-                        <el-table-column prop="lastYearTimeRatio" label="占比（%）" width="120" align="center">
-                        </el-table-column>
-                    </el-table-column>
-                    <el-table-column prop="yearTimeRatio" label="同比（%）" align="center"></el-table-column>
-                </el-table-column>
-            </el-table>
-            <el-table key="table2" v-else :data="facilityTableData" style="width: 100%">
-                <el-table-column prop="facilityName" label="" width="150" align="center">
-                </el-table-column>
-                <el-table-column prop="facilityClose" label="封闭" align="center">
-                </el-table-column>
-                <el-table-column prop="facilityRestriction" label="限行" align="center">
-                </el-table-column>
-                <el-table-column prop="facilityInterval" label="间隔放行" align="center">
-                </el-table-column>
-                <el-table-column prop="total" label="合计" align="center">
-                </el-table-column>
-            </el-table>
-
-        </div>
-    </Dialog>
+  <Dialog v-model="modelVisible" title="收费站管制统计" style="width: 100%">
+    <div class="search">
+      <InputSearch
+        :formList="searchFormList"
+        @handleSearch="handleSearch"
+        style="width: 502px"
+      />
+    </div>
+
+    <div class="StatsDetail">
+      <el-table
+        key="table1"
+        v-if="searchType == 2 && controlType == 1"
+        :data="tableData"
+        style="width: 100%"
+        :span-method="arraySpanMethod"
+      >
+        <el-table-column
+          prop="controlCauseName"
+          label="封闭原因"
+          width="150"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="causeTypeName" label="" align="center">
+        </el-table-column>
+        <el-table-column label="封闭站次" align="center">
+          <el-table-column label="目标时段" width="120" align="center">
+            <el-table-column prop="num" label="站次" width="120" align="center">
+            </el-table-column>
+            <el-table-column
+              prop="numRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="去年同期时间段" align="center">
+            <el-table-column
+              prop="lastYearNum"
+              label="站次"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="lastYearNumRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            prop="yearNumRatio"
+            label="同比（%）"
+            align="center"
+          ></el-table-column>
+        </el-table-column>
+        <el-table-column label="封闭时长" align="center">
+          <el-table-column label="目标时段" width="120" align="center">
+            <el-table-column
+              prop="minuteTime"
+              label="时长（分钟）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="timeRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="去年同期时间段" align="center">
+            <el-table-column
+              prop="lastYearTime"
+              label="时长（分钟）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="lastYearTimeRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            prop="yearTimeRatio"
+            label="同比（%）"
+            align="center"
+          ></el-table-column>
+        </el-table-column>
+      </el-table>
+      <el-table
+        key="table2"
+        v-else-if="searchType == 2 && controlType == 2"
+        :data="tableData"
+        style="width: 100%"
+        :span-method="arraySpanMethod"
+      >
+        <el-table-column
+          prop="controlCauseName"
+          label="限行原因"
+          width="150"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="causeTypeName" label="" align="center">
+        </el-table-column>
+        <el-table-column label="限行站次" align="center">
+          <el-table-column label="目标时段" width="120" align="center">
+            <el-table-column prop="num" label="站次" width="120" align="center">
+            </el-table-column>
+            <el-table-column
+              prop="numRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="去年同期时间段" align="center">
+            <el-table-column
+              prop="lastYearNum"
+              label="站次"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="lastYearNumRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            prop="yearNumRatio"
+            label="同比（%）"
+            align="center"
+          ></el-table-column>
+        </el-table-column>
+        <el-table-column label="限行时长" align="center">
+          <el-table-column label="目标时段" width="120" align="center">
+            <el-table-column
+              prop="minuteTime"
+              label="时长（分钟）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="timeRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="去年同期时间段" align="center">
+            <el-table-column
+              prop="lastYearTime"
+              label="时长（分钟）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="lastYearTimeRatio"
+              label="占比（%）"
+              width="120"
+              align="center"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            prop="yearTimeRatio"
+            label="同比（%）"
+            align="center"
+          ></el-table-column>
+        </el-table-column>
+      </el-table>
+      <el-table
+        key="table3"
+        v-else
+        show-summary
+        :data="facilityTableData"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="facilityName"
+          label=""
+          width="150"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="facilityClose" label="封闭" align="center">
+        </el-table-column>
+        <el-table-column prop="facilityRestriction" label="限行" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="facilityInterval"
+          label="间隔放行"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="total" label="合计" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index";
-import InputSearch from '@screen/components/InputSearch/index.vue';
+import InputSearch from "@screen/components/InputSearch/index.vue";
 import Table from "@screen/components/Table.vue";
-import { selectTollStation } from "@/api/event/governanceAnalysis"
+import { selectTollStation } from "@/api/event/governanceAnalysis";
 import options from "../assets/charts";
 import request from "@/utils/request";
 export default {
-    name: 'StatsDetail',
-    components: {
-        Dialog,
-        InputSearch,
-        Table
-    },
-    model: {
-        prop: 'visible',
-        event: 'update:value'
-    },
-    props: {
-        visible: Boolean
-    },
-    data() {
-        return {
-            num: 0,
-            tableData: [],
-            weatherNum: [],
-            startTime: "",
-            endTime: "",
+  name: "StatsDetail",
+  components: {
+    Dialog,
+    InputSearch,
+    Table,
+  },
+  model: {
+    prop: "visible",
+    event: "update:value",
+  },
+  props: {
+    visible: Boolean,
+  },
+  data() {
+    return {
+      num: 0,
+      tableData: [],
+      weatherNum: [],
+      startTime: "",
+      endTime: "",
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      searchType: 1,
+      controlType: 1,
+      facilityIds: [],
+      facilityTableData: [],
+      searchFormList: [
+        {
+          label: "查询条件:",
+          key: "searchType",
+          required: true,
+          isAlone: true,
+          type: "RadioGroup",
+          default: 1,
+          options: {
+            type: "circle",
+            options: [
+              {
+                key: 1,
+                label: "站点",
+              },
+              {
+                key: 2,
+                label: "原因",
+              },
+            ],
+          },
+        },
+        {
+          label: "事件类型:",
+          key: "controlType",
+          required: true,
+          isAlone: true,
+          type: "RadioGroup",
+          visible: (data) => {
+            if (data.searchType == 2) {
+              return true;
+            }
+          },
+          default: 1,
+          options: {
+            type: "circle",
+            options: [
+              {
+                key: 1,
+                label: "收费站封闭",
+              },
+              {
+                key: 2,
+                label: "收费站限行",
+              },
+            ],
+          },
+        },
+        {
+          label: "选择站点:",
+          key: "facilityId",
+          required: true,
+          type: "Select",
+          options: {
+            multiple: true,
+            options: [],
+          },
+          visible: (data) => {
+            if (data.searchType == 1) {
+              return true;
+            }
+          },
+        },
+        {
+          label: "日期:",
+          key: "date",
+          required: true,
+          type: "datePicker",
+          options: {
             pickerOptions: {
-                disabledDate(time) {
-                    return time.getTime() > Date.now();
-                },
+              disabledDate(time) {
+                return time.getTime() > Date.now();
+              },
             },
+            valueFormat: "yyyy-MM-dd",
+            type: "daterange",
+          },
+        },
+      ],
+    };
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:value", val);
+      },
+    },
+  },
+
+  methods: {
+    getFacilityList() {
+      Promise.allSettled([
+        // 查询收费站
+        request({
+          url: `/business/facility/query`,
+          method: "get",
+        }),
+      ]).then((res) => {
+        if (res[0].status === "fulfilled" && res[0].value.code == 200) {
+          this.searchFormList[2].options.options = res[0].value.data.map(
+            (item) => ({
+              key: item.id,
+              label: item.facilityName,
+            })
+          );
+          this.facilityIds = res[0].value.data.map((item) => item.id);
+          // this.searchFormList[2].default = res[0].value.data.map(item => item.id)
+          let currentMonth = moment().format("YYYY-MM");
+          let currentDate = moment().format("YYYY-MM-DD");
+          let data = {
             searchType: 1,
-            facilityIds: [],
-            facilityTableData: [],
-            searchFormList: [
-                {
-                    label: "查询条件:",
-                    key: "searchType",
-                    required: true,
-                    isAlone: true,
-                    type: "RadioGroup",
-                    default: 1,
-                    options: {
-                        type: 'circle',
-                        options: [
-                            {
-                                key: 1,
-                                label: "站点",
-                            },
-                            {
-                                key: 2,
-                                label: "原因",
-                            }
-                        ]
-                    }
-                },
-                {
-                    label: "事件类型:",
-                    key: "controlType",
-                    required: true,
-                    isAlone: true,
-                    type: "RadioGroup",
-                    visible: data => {
-                        if (data.searchType == 2) {
-                            return true
-                        }
-                    },
-                    default: 1,
-                    options: {
-                        type: 'circle',
-                        options: [{
-                            key: 1,
-                            label: "收费站封闭",
-                        },
-                        {
-                            key: 2,
-                            label: "收费站限行",
-                        }]
-                    }
-                },
-                {
-                    label: "选择站点:",
-                    key: "facilityId",
-                    required: true,
-                    type: "Select",
-                    options: {
-                        multiple: true,
-                        options: []
-                    },
-                    visible: data => {
-                        if (data.searchType == 1) {
-                            return true
-                        }
-                    },
-                },
-                {
-                    label: "日期:",
-                    key: "date",
-                    required: true,
-                    type: "datePicker",
-                    options: {
-                        pickerOptions: {
-                            disabledDate(time) {
-                                return time.getTime() > Date.now();
-                            },
-                        },
-                        valueFormat: "yyyy-MM-dd",
-                        type: "daterange"
-                    }
-                },
-            ],
+            facilityId: this.facilityIds,
+            date: [currentMonth + "-01", currentDate],
+          };
+          this.getSelectTollStation(data);
         }
-
+      });
     },
-    computed: {
-        modelVisible: {
-            get() {
-                return this.visible;
-            },
-            set(val) {
-                this.$emit('update:value', val)
+    handleSearch(data) {
+      this.getSelectTollStation(data);
+    },
+    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (this.searchType == 2) {
+        if (!row.causeTypeName) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+        if (row.controlCauseName === "恶劣天气") {
+          if (columnIndex === 0) {
+            console.log(this.weatherNum.length);
+            if (rowIndex === 0) {
+              return [this.weatherNum.length, 1];
+            } else if (rowIndex <= this.weatherNum.length) {
+              return [0, 0];
             }
+            // if (rowIndex === 2) {
+            //     return [7, 1];
+            // }
+            // else if (rowIndex === 3) {
+            //     return [0, 0];
+            // } else if (rowIndex === 4) {
+            //     return [0, 0];
+            // }
+            // else if (rowIndex === 5) {
+            //     return [0, 0];
+            // }
+            // else if (rowIndex === 6) {
+            //     return [0, 0];
+            // }
+            // else if (rowIndex === 7) {
+            //     return [0, 0];
+            // }
+            // else if (rowIndex === 8) {
+            //     return [0, 0];
+            // }
+          }
+          // this.weatherNum = 0
         }
+      }
     },
-
-    methods: {
-        getFacilityList() {
-            Promise.allSettled([
-                // 查询收费站
-                request({
-                    url: `/business/facility/query`,
-                    method: "get",
-                }),
-            ])
-                .then((res) => {
-                    if (res[0].status === 'fulfilled' && res[0].value.code == 200) {
-                        this.searchFormList[2].options.options = res[0].value.data.map(item => ({
-                            key: item.id,
-                            label: item.facilityName,
-                        }))
-                        this.facilityIds = res[0].value.data.map(item => item.id)
-                        // this.searchFormList[2].default = res[0].value.data.map(item => item.id)
-
-                        let date = moment().format('YYYY-MM-DD')
-                        let data = {
-                            searchType: 1,
-                            facilityId: this.facilityIds,
-                            date: [date + " 00:00:00", date + " 23:59:59"]
-                        }
-                        this.getSelectTollStation(data)
-                    }
-                })
-
-        },
-        handleSearch(data) {
-            this.getSelectTollStation(data)
-        },
-        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-
-            if (this.searchType == 2) {
-
-                if (!row.causeTypeName) {
-                    if (columnIndex === 0) {
-                        return [1, 2];
-                    }
-                    else if (columnIndex === 1) {
-                        return [0, 0];
-                    }
-                };
-                if (row.controlCauseName === '恶劣天气') {
-                    if (columnIndex === 0) {
-                        console.log(this.weatherNum.length)
-                        if (rowIndex === 0) {
-                            return [this.weatherNum.length, 1];
-                        } else if (rowIndex <= this.weatherNum.length) {
-                            return [0, 0];
-                        }
-                        // if (rowIndex === 2) {
-                        //     return [7, 1];
-                        // }
-                        // else if (rowIndex === 3) {
-                        //     return [0, 0];
-                        // } else if (rowIndex === 4) {
-                        //     return [0, 0];
-                        // }
-                        // else if (rowIndex === 5) {
-                        //     return [0, 0];
-                        // }
-                        // else if (rowIndex === 6) {
-                        //     return [0, 0];
-                        // }
-                        // else if (rowIndex === 7) {
-                        //     return [0, 0];
-                        // }
-                        // else if (rowIndex === 8) {
-                        //     return [0, 0];
-                        // }
-
-                    }
-                    // this.weatherNum = 0
-                }
-            }
-
-
-        },
-        getSelectTollStation(data) {
-            let startTime = ""
-            let endTime = ""
-            if (data) {
-                startTime = data.date[0] + ' 00:00:00'
-                endTime = data.date[1] + ' 23:59:59'
+    getSelectTollStation(data) {
+      let startTime = "";
+      let endTime = "";
+      if (data) {
+        startTime = data.date[0] + " 00:00:00";
+        endTime = data.date[1] + " 23:59:59";
+      } else {
+        startTime = new Date("2024-01-01 11:12:21");
+        startTime = new Date("2024-01-26 11:12:36");
+      }
+
+      var formData = new FormData();
+      this.searchType = data.searchType;
+      this.controlType = data.controlType;
+      if (data.searchType == 1) {
+        formData.append("facilityId", data.facilityId);
+      } else {
+        formData.append("controlType", data.controlType);
+      }
+      formData.append("searchType", data.searchType);
+      formData.append("startTime", startTime);
+      formData.append("endTime", endTime);
+      let weatherData = [];
+      let otherData = [];
+      selectTollStation(formData).then((res) => {
+        if (data.searchType == 2) {
+          this.weatherNum = [];
+          res.data.forEach((item) => {
+            if (item.causeTypeName) {
+              this.weatherNum.push(item.causeTypeName);
+              weatherData.push(item);
             } else {
-                startTime = new Date("2024-01-01 11:12:21")
-                startTime = new Date("2024-01-26 11:12:36")
+              otherData.push(item);
             }
-
-            var formData = new FormData();
-            this.searchType = data.searchType
-            if (data.searchType == 1) {
-                formData.append("facilityId", data.facilityId);
-            } else {
-                formData.append("controlType", data.controlType);
-            }
-            formData.append("searchType", data.searchType);
-            formData.append("startTime", startTime);
-            formData.append("endTime", endTime);
-            let weatherData = []
-            let otherData = []
-            selectTollStation(formData).then((res) => {
-                if (data.searchType == 2) {
-                    this.weatherNum = []
-                    res.data.forEach(item => {
-                        if (item.causeTypeName) {
-                            this.weatherNum.push(item.causeTypeName)
-                            weatherData.push(item)
-                        } else {
-                            otherData.push(item)
-                        }
-                    });
-                    this.tableData = weatherData.concat(otherData)
-                } else {
-                    res.data.forEach((item) => {
-                        item.total = item.facilityClose + item.facilityRestriction + item.facilityInterval
-                    })
-                    this.facilityTableData = res.data
-
-                }
-
-            })
-
+          });
+          this.tableData = weatherData.concat(otherData);
+        } else {
+          res.data.forEach((item) => {
+            item.total =
+              item.facilityClose +
+              item.facilityRestriction +
+              item.facilityInterval;
+          });
+          this.facilityTableData = res.data;
         }
+      });
     },
-    mounted() {
-        this.getFacilityList()
-
-
-    }
-}
+  },
+  mounted() {
+    this.getFacilityList();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .dialog {
-    min-height: 800px;
+  min-height: 800px;
 }
 
 .search {
-    display: flex;
-    flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
 }
 
 ::v-deep .is-scrolling-none {
-    background: #0B6581;
-
+  background: #0b6581;
 }
 
 ::v-deep .el-table__empty-text {
-    color: #3AE0F8;
+  color: #3ae0f8;
 }
 
 .StatsDetail {
-    // height: 770px;
-    margin: 20px 0;
-    width: 100%;
-    display: flex;
-    gap: 5px;
+  // height: 770px;
+  margin: 20px 0;
+  width: 100%;
+  display: flex;
+  gap: 5px;
 }
 
 .el-table {
-    border: 1px solid #07AEC6;
-    background: #0B6581;
+  border: 1px solid #07aec6;
+  background: #0b6581;
 }
 
 ::v-deep .el-table .el-table__header-wrapper th,
 .el-table .el-table__fixed-header-wrapper th {
-    background: #0B6581;
-    border: 1px solid #07AEC6;
+  background: #0b6581;
+  border: 1px solid #07aec6;
 }
 
-::v-deep .el-table th.el-table__cell>.cell {
-    color: #3DE8FF;
+::v-deep .el-table th.el-table__cell > .cell {
+  color: #3de8ff;
 }
 
 ::v-deep .el-table thead.is-group th.el-table__cell {
-    background: #0B6581;
-    border: 1px solid #07AEC6;
+  background: #0b6581;
+  border: 1px solid #07aec6;
 }
 
 // ::v-deep .el-table th.el-table__cell.is-leaf,
 ::v-deep .el-table td.el-table__cell {
-    border: 1px solid #07AEC6;
-    background: #1B586D;
-    color: #fff;
+  border: 1px solid #07aec6;
+  background: #1b586d;
+  color: #fff;
 }
 
 ::v-deep .el-table tr {
-    border: 1px solid #07AEC6;
-    background-color: #0B6581;
+  border: 1px solid #07aec6;
+  background-color: #0b6581;
 }
 
-::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
-    background: #1B586D;
-    border: 1px solid #07AEC6;
+::v-deep
+  .el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background: #1b586d;
+  border: 1px solid #07aec6;
 }
 
 ::v-deep .el-table::before,
 .el-table--group::after,
 .el-table--border::after {
-    background: none;
+  background: none;
 }
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'收费站管制分析'">
       <ButtonGradient class="title-button" @click.native="handleStats">
         统计
@@ -10,39 +10,50 @@
       <div class="title-top">
         <div class="close">收费站封闭（次）</div>
         <div class="traffic">收费站限行（次）</div>
-
       </div>
       <div class="content">
-        <div class="content-item" v-for="item in tollBoothsData" :key="item.facilityName">
+        <div
+          class="content-item"
+          v-for="item in tollBoothsData"
+          :key="item.facilityName"
+        >
           <div class="content-item-left">
             <span class="name">{{ item.facilityName }}</span>
             <img class="icon" src="./assets/icon.svg" />
           </div>
-          <div class="content-item-right" :style="{
-            '--width': (item.trafficClose / maxCloseNum) * 100 + '%'
-          }">
-            <div class="box-item">
-              <span class="num">{{ item.trafficClose }}次</span>
-            </div>
-            <div class="box-item" :style="{
-              '--width': (item.trafficRestriction / maxRestrictionNum) * 100 + '%'
-            }">
+          <div class="content-item-right">
+            <div
+              class="box-item"
+              :style="{
+                '--width':
+                  (item.trafficRestriction / maxRestrictionNum) * 100 + '%',
+              }"
+            >
               <span class="num">{{ item.trafficRestriction }}次</span>
             </div>
+            <div
+              class="box-item"
+              :style="{
+                '--width': (item.trafficClose / maxCloseNum) * 100 + '%',
+              }"
+            >
+              <span class="num">{{ item.trafficClose }}次</span>
+            </div>
 
             <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->
             <!-- <el-progress :width="600"></el-progress>
             <el-progress :percentage="50"></el-progress> -->
           </div>
         </div>
-
       </div>
-
     </div>
     <!-- <div class="board">
       <div class="charts keep-ratio " id="auditAnalytics"></div>
     </div> -->
-    <StatsDialogVisible :visible="statsDialogVisible" @update:value="handleClose" />
+    <StatsDialogVisible
+      :visible="statsDialogVisible"
+      @update:value="handleClose"
+    />
   </div>
 </template>
 
@@ -51,42 +62,50 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
 import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
-import { tollStationAnalysis } from "@/api/event/governanceAnalysis"
-import StatsDialogVisible from "./StatsDialogVisible/index.vue"
+import { tollStationAnalysis } from "@/api/event/governanceAnalysis";
+import StatsDialogVisible from "./StatsDialogVisible/index.vue";
 import icon from "./assets/icon.svg";
 
 export default {
-  name: 'RailWayDay',
+  name: "RailWayDay",
   components: {
     WgtTitle,
     ButtonGradient,
-    StatsDialogVisible
+    StatsDialogVisible,
   },
   data() {
     return {
       statsDialogVisible: false,
       tollBoothsData: [],
       maxRestrictionNum: null,
-      maxCloseNum: null
-    }
+      maxCloseNum: null,
+    };
   },
 
-  created() {
-
-  },
+  created() {},
   methods: {
     handleStats() {
-      this.statsDialogVisible = true
+      this.statsDialogVisible = true;
     },
     handleClose() {
-      this.statsDialogVisible = false
+      this.statsDialogVisible = false;
     },
     getTollStationAnalysis() {
       return tollStationAnalysis().then((response) => {
-        this.tollBoothsData = response.data
-        this.maxRestrictionNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction }))
-        this.maxCloseNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction }))
-        console.log("response", this.maxRestrictionNum, this.maxCloseNum)
+        this.tollBoothsData = response.data;
+        this.maxRestrictionNum = Math.max.apply(
+          Math,
+          this.tollBoothsData.map((item) => {
+            return item.trafficRestriction;
+          })
+        );
+        this.maxCloseNum = Math.max.apply(
+          Math,
+          this.tollBoothsData.map((item) => {
+            return item.trafficRestriction;
+          })
+        );
+        console.log("response", this.maxRestrictionNum, this.maxCloseNum);
         // let facilityName = []
         // let trafficRestriction = []
         // let trafficClose = []
@@ -109,20 +128,18 @@ export default {
         // chartsStatistics.yAxis[0].data = facilityName;
         // chartsStatistics.series[0].data = trafficClose;
         // chartsStatistics.series[1].data = trafficRestriction;
-
-      })
-    }
+      });
+    },
   },
   async mounted() {
-    await this.getTollStationAnalysis()
+    await this.getTollStationAnalysis();
     // const myChart = echarts.init(document.getElementById('auditAnalytics'));
     // myChart.setOption(chartsStatistics);
-
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   overflow: hidden;
@@ -135,11 +152,15 @@ 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;
-
   }
 
   .title-button {
@@ -164,7 +185,12 @@ 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;
@@ -182,27 +208,27 @@ export default {
     }
 
     .traffic:before {
-      content: '';
+      content: "";
       display: block;
       position: relative;
       top: 13px;
       left: -15px;
       width: 8px;
       height: 8px;
-      background: #5FD7FE;
+      background: #5fd7fe;
       border-radius: 50%;
       opacity: 1;
     }
 
     .close:before {
-      content: '';
+      content: "";
       display: block;
       position: relative;
       top: 13px;
       left: -15px;
       width: 8px;
       height: 8px;
-      background: #FC6A67;
+      background: #fc6a67;
       border-radius: 50%;
       opacity: 1;
     }
@@ -231,18 +257,21 @@ export default {
           height: 27px;
           margin-right: 5px;
         }
-
       }
 
-      .content-item-right {}
-
+      .content-item-right {
+      }
     }
 
     .box-item {
       position: relative;
       height: 8px;
       width: 289px;
-      background: linear-gradient(180deg, rgba(11, 167, 218, 0.1) 0%, rgba(79, 211, 255, 0.1) 100%);
+      background: linear-gradient(
+        180deg,
+        rgba(11, 167, 218, 0.1) 0%,
+        rgba(79, 211, 255, 0.1) 100%
+      );
       border-radius: 2px 2px 2px 2px;
     }
 
@@ -256,7 +285,11 @@ export default {
       top: 0;
       height: 8px;
       width: var(--width);
-      background: linear-gradient(90deg, rgba(97, 216, 255, 0) 0%, #60D7FF 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(97, 216, 255, 0) 0%,
+        #60d7ff 100%
+      );
       border-radius: 2px 2px 2px 2px;
       opacity: 1;
     }
@@ -267,7 +300,11 @@ export default {
       top: 0;
       height: 8px;
       width: var(--width);
-      background: linear-gradient(90deg, rgba(255, 185, 4, 0) 0%, rgba(255, 105, 105, 1) 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(255, 185, 4, 0) 0%,
+        rgba(255, 105, 105, 1) 100%
+      );
       border-radius: 2px 2px 2px 2px;
       opacity: 1;
     }

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

@@ -21,17 +21,17 @@ let colorend = [
 var legendData = [];
 
 var options = {
-  color: [
-    "#2867FF",
-    "#58C3FF",
-    "#FF6A3B",
-    "#FDA474",
-    "#FEE58F",
-    "#8DFEBF",
-    "#66F4DC",
-    "#33E27D",
-    "#5D8CFE",
-  ],
+  // color: [
+  //   "#2867FF",
+  //   "#58C3FF",
+  //   "#FF6A3B",
+  //   "#FDA474",
+  //   "#FEE58F",
+  //   "#8DFEBF",
+  //   "#66F4DC",
+  //   "#33E27D",
+  //   "#5D8CFE",
+  // ],
   title: [
     {
       text: "999",
@@ -65,13 +65,14 @@ var options = {
   },
   tooltip: {
     show: true,
-    trigger: "item",
+    // trigger: "item",
     // formatter: "{b} : {c}",
   },
   legend: {
     width: "300px",
     height: "120px",
     orient: "vertical",
+    icon: "circle",
     top: "60%",
     itemWidth: 10,
     itemHeight: 10,
@@ -197,7 +198,7 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["50%", "40%"],
+      radius: ["40%", "50%"],
       center: ["50%", "35%"],
       z: 10,
       label: {
@@ -210,7 +211,7 @@ var options = {
       itemStyle: {
         normal: {
           borderRadius: "5",
-          borderWidth: 0,
+          borderWidth: 2,
           borderType: "solid",
           borderCap: "round",
           borderJoin: "round",
@@ -226,7 +227,7 @@ var options = {
               colorStops: [
                 {
                   offset: 0,
-                  color: "transparent", // 0% 处的颜色
+                  color: colors[params.dataIndex], // 0% 处的颜色
                 },
                 {
                   offset: 1,

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

@@ -87,6 +87,7 @@ var options = {
     width: "300px",
     height: "120px",
     orient: "vertical",
+    icon: "circle",
     top: "60%",
     itemWidth: 10,
     itemHeight: 10,
@@ -211,7 +212,7 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["50%", "40%"],
+      radius: ["40%", "50%"],
       center: ["50%", "35%"],
       z: 10,
       label: {
@@ -224,7 +225,7 @@ var options = {
       itemStyle: {
         normal: {
           borderRadius: "5",
-          borderWidth: 0,
+          borderWidth: 2,
           borderType: "solid",
           borderCap: "round",
           borderJoin: "round",
@@ -240,7 +241,8 @@ var options = {
               colorStops: [
                 {
                   offset: 0,
-                  color: "transparent", // 0% 处的颜色
+                  // color: "transparent", // 0% 处的颜色
+                  color: colors[params.dataIndex],
                 },
                 {
                   offset: 1,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js

@@ -28,7 +28,7 @@ var options = {
         ast: {
           align: "left",
           fontSize: 12,
-          width: 35,
+          width: 50,
         },
         bst: {
           align: "left",
@@ -36,6 +36,12 @@ var options = {
           marginLeft: 10,
           color: "#37E7FF",
         },
+        cst: {
+          align: "left",
+          fontSize: 12,
+          marginLeft: 10,
+          color: "#37E7FF",
+        },
       },
     },
     formatter: (params) => {
@@ -47,9 +53,9 @@ var options = {
       let obj = echartsData.filter((it) => {
         return it.name == params;
       });
-      return `{ast|${obj[0].name}}          {bst|${Math.round(
+      return `{ast|${obj[0].name}}     {bst|${Math.round(
         (obj[0].value / count) * 100
-      )}%}`;
+      )}%}    {cst|${obj[0].value}件}`;
     },
     data: echartsData?.map((x) => x),
   },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue

@@ -141,10 +141,10 @@ export default {
         context.lineWidth = 1; // 设置线段宽度
 
         // 绘制圆角矩形
-        drawRoundRect(context, 270, 36, 120, 24, 12, gr)
-        drawRoundRect(context, 270, 63, 120, 24, 12, gr)
-        drawRoundRect(context, 270, 90, 120, 24, 12, gr)
-        drawRoundRect(context, 270, 117, 120, 24, 12, gr)
+        drawRoundRect(context, 242, 36, 180, 24, 12, gr)
+        drawRoundRect(context, 242, 63, 180, 24, 12, gr)
+        drawRoundRect(context, 242, 90, 180, 24, 12, gr)
+        drawRoundRect(context, 242, 117, 180, 24, 12, gr)
       });
     });
   },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js

@@ -1,130 +1,155 @@
-
 /* 数据 */
-let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数
+let nameList = [
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月",
+]; // 类别
+let valueList = [
+  800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903,
+]; // 人数
 // var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
 /* 数据整合 */
 let dataList = [];
 nameList.map((item, index) => {
-   if (index === 4) {
-      dataList.push({
-         name: item,
-         value: valueList[index],
-         itemStyle: {
-            color: {
-               type: 'linear',
-               x: 0,
-               y: 0,
-               x2: 0,
-               y2: 1,
-               colorStops: [{
-                  offset: 0, color: '#FFB904' // 0% 处的颜色
-               }, {
-                  offset: 1, color: '#FF6969' // 100% 处的颜色
-               }],
-               global: false // 缺省为 false
+  if (index === 4) {
+    dataList.push({
+      name: item,
+      value: valueList[index],
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB904", // 0% 处的颜色
             },
-            borderRadius: 6
-         },
-         label: { show: false }
-      })
-   } else {
-      dataList.push({
-         name: item,
-         value: valueList[index],
-         itemStyle: {
-            borderRadius: 6
-         }
-      })
-   }
-})
-
-var options = {
-   grid: {
-      top: '7%',//上边距
-      right: '0',//右边距
-      left: '0',//左边距
-      bottom: "2%",//下边距
-      containLabel: true,
-   },
-   tooltip: {
-
-   },
-   xAxis: {
-      type: 'category',
-      data: nameList,
-      axisTick: {
-         show: false //隐藏X轴刻度
+            {
+              offset: 1,
+              color: "#FF6969", // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+        borderRadius: 6,
       },
-      axisLine: {
-         lineStyle: {
-            color: "rgba(49, 217, 255, 0.8)"
-         }
+      label: { show: false },
+    });
+  } else {
+    dataList.push({
+      name: item,
+      value: valueList[index],
+      itemStyle: {
+        borderRadius: 6,
       },
-      axisLabel: {
-         show: true,
-         color: '#B6E6FF',
-         fontSize: 8,
-         fontFamily: 'Source Han Sans CN-Regular',
+    });
+  }
+});
+
+var options = {
+  grid: {
+    top: "7%", //上边距
+    right: "0", //右边距
+    left: "0", //左边距
+    bottom: "2%", //下边距
+    containLabel: true,
+  },
+  tooltip: {},
+  xAxis: {
+    type: "category",
+    data: [],
+    axisTick: {
+      show: false, //隐藏X轴刻度
+    },
+    axisLine: {
+      lineStyle: {
+        color: "rgba(49, 217, 255, 0.8)",
       },
-   },
-   yAxis: [{
-      type: 'value',
+    },
+    axisLabel: {
+      show: true,
+      color: "#fff",
+      fontSize: "10px",
+      fontFamily: "Source Han Sans CN-Regular",
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
       name: "",
       splitNumber: 5,
       nameTextStyle: {
-         color: '#B6E6FF',
-         fontSize: 13,
-         fontFamily: 'Source Han Sans CN-Regular',
-         align: "left",
-         verticalAlign: "center",
+        color: "#B6E6FF",
+        fontSize: 10,
+        fontFamily: "Source Han Sans CN-Regular",
+        align: "left",
+        verticalAlign: "center",
       },
       axisLabel: {
-         fontSize: 13,
-         color: '#B6E6FF',
-         fontFamily: 'HarmonyOS Sans-Regular',
-         // formatter:function(value,index){
-         //    return yList[index]
-         // }
+        fontSize: "10px",
+        color: "#fff",
+        fontFamily: "HarmonyOS Sans-Regular",
+        // formatter:function(value,index){
+        //    return yList[index]
+        // }
       },
       axisLine: {
-         show: false,
+        show: false,
       },
       axisTick: {
-         show: false
+        show: false,
       },
       splitLine: {
-         lineStyle: {
-            color: 'rgba(49, 217, 255, 0.5)',
-         }
+        lineStyle: {
+          color: "rgba(49, 217, 255, 0.5)",
+        },
       },
-   }],
-   series: [{
-      type: 'bar',
-      data: dataList,
+    },
+  ],
+  series: [
+    {
+      type: "bar",
+      data: [],
       z: 4,
       itemStyle: {
-         color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [{
-               offset: 0, color: '#06D7B1' // 0% 处的颜色
-            }, {
-               offset: 1, color: '#80F1BB' // 100% 处的颜色
-            }],
-            global: false // 缺省为 false
-         },
-         borderRadius: [4, 4, 0, 0]
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#06D7B1", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#80F1BB", // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+        borderRadius: [4, 4, 0, 0],
       },
       barWidth: 10,
       label: {
-         show: false,
-      }
-   },
-   ]
-}
+        show: false,
+      },
+    },
+  ],
+};
 
 export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js

@@ -105,8 +105,8 @@ var options = {
   },
   title: {
     //圆环中间内容
-    text: "{zb|12}",
-    subtext: "类型分析",
+    text: "{zb|0}",
+    subtext: "    类型分析",
     left: "17.5%",
     top: "40%",
     textStyle: {
@@ -114,42 +114,52 @@ var options = {
         zb: {
           width: 70,
           color: "#fff",
-          fontSize: 26,
-          align: 'center'
-        }
-      }
+          fontSize: 30,
+          align: "center",
+          fontFamily: "PangMenZhengDao",
+        },
+      },
     },
     subtextStyle: {
-      fontSize: 18,
+      fontSize: 16,
       fontWeight: "400",
-      top: -8,
-
+      width: 200,
+      // top: -18,
+      // marginLeft: 50,
       align: "center",
-      color: "#fff",
+      color: "#74868D",
     },
   },
   color: colorList,
   legend: {
-    top: "15%",
-    right: -5,
+    top: 10,
+    right: 0,
     orient: "vertical", //改变排列方式
     icon: "circle", //改变legend小图标形状
     itemGap: 20, // 设置legend的间距
     itemWidth: 10, // 设置宽度
     itemHeight: 10, // 设置高度
     textStyle: {
-      right: -19,
-      fontSize: 30,
+      right: 50,
+      fontSize: 12,
       color: "#fff",
       rich: {
         a: {
+          align: "left",
           width: 45,
           fontSize: 12,
         },
         b: {
-          fontSize: 14,
+          align: "left",
+          fontSize: 12,
+          color: "#37E7FF",
+          marginLeft: 0,
+        },
+        c: {
+          align: "left",
+          fontSize: 12,
           color: "#37E7FF",
-          marginLeft: -0,
+          marginLeft: 0,
         },
       },
     },
@@ -200,7 +210,7 @@ var options = {
           length2: 80,
         },
       },
-      data: pieData1,
+      data: [],
       label: {
         show: false,
         formatter: function (params) {},

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js

@@ -20,12 +20,12 @@ let options = {
   grid: {
     left: "2%",
     right: "4%",
-    top: "5%",
+    top: "30px",
     bottom: "5%",
     containLabel: true,
   },
   xAxis: {
-    data: xData,
+    data: [],
     show: true,
     axisTick: {
       show: false,
@@ -44,13 +44,18 @@ let options = {
       rotate: "1",
       margin: "20",
       textStyle: {
-        fontSize: 12,
-        color: "#50A2C1",
+        fontSize: 10,
+        color: "#fff",
       },
     },
   },
   yAxis: [
     {
+      name: "(起)       ",
+      nameTextStyle: {
+        color: "#E5E7E8",
+        fomtSize: 10,
+      },
       min: 0,
       axisLine: {
         lineStyle: {
@@ -67,7 +72,7 @@ let options = {
       axisLabel: {
         color: "#DEEBFF",
         textStyle: {
-          fontSize: 12,
+          fontSize: 10,
         },
       },
       axisTick: {
@@ -162,7 +167,7 @@ let options = {
             );
         },
       },
-      data: data1,
+      data: [],
     },
     // 进度条的小圆圈
     {
@@ -183,7 +188,7 @@ let options = {
       },
       z: 2,
       zlevel: 10,
-      data: data1,
+      data: [],
       animationDelay: 500,
     },
   ],

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

@@ -9,11 +9,13 @@
           </el-option>
         </el-select>
         <el-select v-model="quarter" size="medium" v-if="type == 'quarter'" class="selectRoad-medium" placeholder="请选择">
-          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
+          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"
+            style="width:140px;">
           </el-option>
         </el-select>
         <el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;"
-          :type="type == 'date' ? 'date' : type == 'month' ? 'month' : type == 'year' ? 'year' : ''" placeholder="请选择" :clearable="false"/>
+          :type="type == 'date' ? 'date' : type == 'month' ? 'month' : type == 'year' ? 'year' : ''" placeholder="请选择"
+          :clearable="false" />
 
         <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button>
         <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
@@ -23,16 +25,19 @@
     <div class="body">
       <div>
         <WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
-        <div id="chart1" class="btnChart" />
+        <Empty v-show="!chart1List || chart1List.length <= 0" text="暂无数据..."></Empty>
+        <div v-show="chart1List || chart1List.length > 0" id="chart1" class="btnChart" />
       </div>
 
       <div>
         <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
+        <Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..."></Empty>
         <div id="chart2" class="btnChart" />
       </div>
 
       <div>
         <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
+        <Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..."></Empty>
         <div id="chart3" class="btnChart" />
       </div>
     </div>
@@ -119,6 +124,9 @@ export default {
       selectIndex: 3,
       selectId: 3,
       type: "year",
+      chart1List: [],
+      chart2List: [],
+      chart3List: [],
       list: [
         { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
         { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
@@ -175,6 +183,7 @@ export default {
         "quarter": this.quarter
       }).then(res => {
         if (res.code == 200) {
+          this.chart1List = res.data
           let data = res.data;
           chart1.series[0].data = [];
           chart1.xAxis.data = [];
@@ -247,7 +256,7 @@ export default {
         if (res.code == 200) {
           let types = [];
           let numbers = [];
-
+          this.chart2List = res.data
           let data = res.data.warningTypeList;
           let total = res.data.total;
 
@@ -297,9 +306,10 @@ export default {
             }
             var arr = [
               '{a|' + name + '}',
-              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
+              '{b|' + ((target / total) * 100).toFixed(2) + '%}  ',
+              "{c|" + target + "件}",
             ]
-            return arr.join('  ')
+            return arr.join(' ')
           };
 
           chart2.title.text = `{zb|${total}}`;
@@ -307,22 +317,22 @@ export default {
 
           chart2.series[0].data = numbers;
           // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
-          this.myChart2.on('mouseover', (params) => {
-            if (params.componentType == 'graphic') {
-              return
-            }
-            // console.log(params);
-            chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`;
-            chart2.title.subtext = params.data.name;
-            this.myChart2.setOption(chart2);
-          })
+          // this.myChart2.on('mouseover', (params) => {
+          //   if (params.componentType == 'graphic') {
+          //     return
+          //   }
+          //   // console.log(params);
+          //   chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`;
+          //   chart2.title.subtext = params.data.name;
+          //   this.myChart2.setOption(chart2);
+          // })
 
           // 用户鼠标移出时，重新开始自动切换
-          this.myChart2.on('mouseout', (params) => {
-            chart2.title.text = `{zb|${total}}`;
-            chart2.title.subtext = "类型分析";
-            this.myChart2.setOption(chart2);
-          })
+          // this.myChart2.on('mouseout', (params) => {
+          //   chart2.title.text = `{zb|${total}}`;
+          //   chart2.title.subtext = "类型分析";
+          //   this.myChart2.setOption(chart2);
+          // })
         }
         this.myChart2.setOption(chart2);
 
@@ -339,6 +349,7 @@ export default {
         chart3.series[1].data = [];
         chart3.xAxis.data = [];
         if (res.code == 200 && res.data.length > 0) {
+          this.chart3List = res.data
           let data = res.data;
           const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev));
           let zhs = [];
@@ -562,7 +573,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
-
+    --keep-ratio: scaleX(1);
 
     .searchPanel {
       display: flex;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js

@@ -134,7 +134,8 @@ var options = {
       }
       var arr = [
         "{ast|" + name + "}",
-        "{bst|" + (target * 100).toFixed(0) + "%}",
+        "{bst|" + (target * 100).toFixed(0) + "%  }",
+        "{cst|" + target+ "件}",
       ];
       return arr.join("  ");
     },
@@ -153,6 +154,13 @@ var options = {
           marginLeft: 20,
           color: "#37E7FF",
         },
+        cst: {
+          align: "left",
+          fontSize: 12,
+          marginLeft: 30,
+          width: 60,
+          color: "#37E7FF",
+        },
       },
     },
   },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue

@@ -175,12 +175,12 @@ export default {
         let gr = context.createLinearGradient(230, 0, 360, 0);
         gr.addColorStop(1, 'rgba(92,197,255,0)');
         gr.addColorStop(0, 'rgba(92,197,255,0.3)');
-        drawRoundRect(context, 248, 15, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 42, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 69, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 96, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 123, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 150, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 15, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 42, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 69, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 96, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 123, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 150, 134, 21, 12, gr);
 
         context.lineWidth = 1; // 设置线段宽度
 

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js

@@ -10,7 +10,7 @@ var options = {
   grid: {
     left: "0%",
     right: "5%",
-    bottom: "10%",
+    bottom: "30px",
     top: "30px",
     containLabel: true,
   },
@@ -22,7 +22,7 @@ var options = {
       startValue: 0,
       endValue: 7,
       filterMode: "filter",
-      height: 14,
+      height: 10,
       bottom: 5,
       handleSize: "200%",
       handleIcon:
@@ -106,12 +106,12 @@ var options = {
     axisLine: {
       lineStyle: {
         color: "#BDD8FB",
-        fontSize: 12,
+        fontSize: 10,
       },
     },
     axisLabel: {
       // interval:0,
-      color: "#BDD8FB",
+      color: "#fff",
       fontSize: 12,
     },
     axisTick: {
@@ -145,14 +145,14 @@ var options = {
     ],
   },
   yAxis: {
+    name: "(件)       ",
+    nameTextStyle: {
+      color: "#fff",
+      fomtSize: 10,
+    },
     type: "value",
     min: 0,
     minInterval: 1,
-    nameTextStyle: {
-      fontSize: 12,
-      color: "#BDD8FB",
-      align: "center",
-    },
     splitLine: {
       lineStyle: {
         color: "rgba(255, 255, 255, 0.15)",
@@ -169,7 +169,7 @@ var options = {
     axisLabel: {
       fontSize: 12,
       fontFamily: "Bebas",
-      color: "#BDD8FB",
+      color: "#fff",
     },
   },
   series: [
@@ -178,11 +178,8 @@ var options = {
       // symbol: "none",
       showSymbol: false,
       smooth: true, // 是否曲线
-      name: "", // 图例对应类别
-      data: [
-        400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900,
-        400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900,
-      ], // 纵坐标数据
+      // name: "", // 图例对应类别
+      data: [], // 纵坐标数据
       lineStyle: {
         color: "#39B1FF",
       },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js

@@ -24,7 +24,7 @@ var options = {
     orient: "vertical",
     top: "10",
     icon: "circle",
-    right: 40,
+    right: 0,
     itemGap: 16,
     itemWidth: 8,
     itemHeight: 8,
@@ -33,14 +33,21 @@ var options = {
       fontSize: 12,
       rich: {
         ast: {
-          align: "left",
+          marginLeft: 0,
           fontSize: 12,
-          width: 30,
+          width: 40,
         },
         bst: {
           align: "left",
           fontSize: 12,
-          marginLeft: 20,
+          color: "#37E7FF",
+          width: 30,
+        },
+        cst: {
+          align: "right",
+          fontSize: 12,
+          width: 40,
+          // marginLeft: 20,
           color: "#37E7FF",
         },
       },
@@ -54,9 +61,9 @@ var options = {
         return it.name == params;
       });
       // console.log(obj);
-      return `{ast|${obj[0].name}}        {bst|${
+      return `{ast|${obj[0].name}}    {bst|${
         Math.round((obj[0].value / count) * 100) || 0
-      }%}`;
+      }%} {cst|${obj[0].value}件}`;
     },
     // data: typeAnalysisData?.map(x => x.name),
   },
@@ -70,7 +77,7 @@ var options = {
       radius: "70%",
       center: ["30%", "50%"],
       clockwise: false,
-      roseType: "radius",
+      // roseType: "area",
       startAngle1: 180,
       label: {
         show: false,
@@ -114,7 +121,7 @@ var options = {
       emphasis: { scale: false },
       clockwise: false,
       center: ["30%", "50%"],
-      roseType: "radius",
+      // roseType: "area",
       label: {
         show: false,
         position: "outside",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue

@@ -10,7 +10,7 @@
         <EventSource class="content-m-t" />
         <DailyDisposal class="content-m-t" />
       </div>
-      <div class="content-m">
+      <div class="content-m" style="margin-right: 0;">
         <MonthStatistice class="content-m-t" />
         <TypeAnalysis class="content-m-t" />
       </div>
@@ -128,5 +128,6 @@ export default {
       width: 493px;
     }
   }
-}</style>
+}
+</style>
   

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js

@@ -1,203 +1,225 @@
-
 import * as echarts from "echarts";
-let color = ['#4278F8F9', 'transparent','#5372C4F9', 'transparent', '#0046FFF9',  'transparent','#FB9434F9',  'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',];
-let colorend = ['#4278F800', 'transparent', '#5372C400',  'transparent','#0046FF00', 'transparent', '#FB943400',  'transparent','#85410100',  'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',];
+let color = [
+  "#4278F8F9",
+  "#5372C4F9",
+  "#0046FFF9",
+  "#FB9434F9",
+  "#854101F9",
+  "#05E599F9",
+  "#219F73F9",
+  "#7CEDD5F9",
+];
+let colorend = [
+  "#4278F800",
+  "#5372C400",
+  "#0046FF00",
+  "#FB943400",
+  "#85410100",
+  "#05E59900",
+  "#219F7300",
+  "#7CEDD500",
+];
 const datas = [
-    {
-       name: '客1',
-       // num:''
-       value: 13456,
-    },
-    {
-       name: '客2',
-       value: 13456,
-    },
-    {
-       name: '客3',
-       value: 13456,
-    },
-    {
-        name: '专1',
-        // num:''
-        value: 13456,
-     },
-     {
-        name: '专2',
-        value: 13456,
-     },
-     {
-        name: '专3',
-        value: 13456,
-     },
-     {
-        name: '货1',
-        value: 13456,
-     },
-     {
-        name: '货2',
-        value: 13456,
-     },
- ];
+  {
+    name: "客1",
+    // num:''
+    value: 13456,
+  },
+  {
+    name: "客2",
+    value: 13456,
+  },
+  {
+    name: "客3",
+    value: 13456,
+  },
+  {
+    name: "专1",
+    // num:''
+    value: 13456,
+  },
+  {
+    name: "专2",
+    value: 13456,
+  },
+  {
+    name: "专3",
+    value: 13456,
+  },
+  {
+    name: "货1",
+    value: 13456,
+  },
+  {
+    name: "货2",
+    value: 13456,
+  },
+];
 
- let sum = 0;
+let sum = 0;
 for (var i of datas) {
-   sum += i.value;
+  sum += i.value;
 }
 
 var options = {
-    tooltip: {
-        show:true,
-        trigger: 'item',
-        formatter: '{a} <br/>{b}: {c} ({d}%)',
-        backgroundColor:"#ffffff",
-        textStyle:{
-            color:"#666"
-        }
+  tooltip: {
+    show: true,
+    // trigger: "item",
+    // formatter: "{a} <br/>{b}: {c} ({d}%)",
+    // backgroundColor: "#ffffff",
+    // textStyle: {
+    //   color: "#666",
+    // },
+  },
+  legend: {
+    orient: "vertical",
+    right: 40,
+    top: 50,
+    formatter: (name) => {
+      let res = datas.filter((v) => v.name === name);
+      let str = "";
+      str =
+        "{name1|" +
+        res[0].name +
+        "}{name2|" +
+        res[0].value +
+        "}辆" +
+        "{name2|" +
+        (res[0].value / sum) * 100 +
+        "}%";
+      return str;
     },
-    legend: {
-        orient: 'vertical',
-        right: 40,
-        top:50,
-        formatter:(name)=>{
-            let res = datas.filter(v => v.name === name);
-            let str = ''
-            str = '{name1|' + res[0].name + '}{name2|' + res[0].value + '}辆'+ '{name2|' + res[0].value/sum * 100 + '}%'
-            return str
+    icon: "circle",
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 20,
+    borderRadius: 50,
+    itemStyle: {},
+    textStyle: {
+      rich: {
+        background: {
+          background: "#DEDEDE",
+          fontSize: 14,
+          align: "left",
+          padding: [0, 10, 20, 0],
         },
-        icon: 'circle',
-        itemWidth:10,
-        itemHeight:10,
-        itemGap: 20,
-        borderRadius:50,
-        itemStyle:{
-  
+        name1: {
+          color: "#fff",
+          fontSize: 14,
+          Width: 12,
+          align: "left",
+          padding: [0, 0, 0, 10],
         },
-        textStyle:{
-            rich:{
-                background: {
-                   background: '#DEDEDE',
-                   fontSize: 14,
-                   align: 'left',
-                   padding: [0, 10, 20, 0],
-                },
-                name1: {
-                   color: '#fff',
-                   fontSize: 14,
-                   Width: 12,
-                   align: 'left',
-                   padding: [0, 0, 0, 10],
-                },
-                name2: {
-                   color: '#37E7FF',
-                   fontSize: 14,
-                   align: 'left',
-                   padding: [0, 0, 0, 10],
-                },
-                value: {
-                   color: '#ccc',
-                   fontSize: 14,
-                   align: 'left',
-                },
-                title: {
-                   //  color: '#fff',
-                   color: "#C60020",
-                   fontWeight:'bold',
-                   fontSize: 40,
-                }
-            },
-            color:"#fff",
+        name2: {
+          color: "#37E7FF",
+          fontSize: 14,
+          align: "left",
+          padding: [0, 0, 0, 10],
+        },
+        value: {
+          color: "#ccc",
+          fontSize: 14,
+          align: "left",
+        },
+        title: {
+          //  color: '#fff',
+          color: "#C60020",
+          fontWeight: "bold",
+          fontSize: 40,
         },
-        data: [
-            {
-                name:'客1',
-                backgroundColor:'#5CC5FF',
-        }, '客2', '客3', '货1', 
-                '货2', '专1', '专2', '专3']
+      },
+      color: "#fff",
     },
-    series: [
-        {
-            name: '',
-            type: 'pie',
-            selectedMode: 'single',
-            radius: [0, '50%'],
-            center:['25%','50%'],
-            label: {
-                normal: {
-                    position: 'inner',
-                    show: true,
-                    color:'#fff',
-                    fontSize:14,
-                    formatter: '{b}\n{c}辆',
-                }
-            },
-            data: [
-                {value: 2290, name: '客车\n'},
-                {value: 1020, name: '货车\n'},
-                {value: 3000, name: '专项车\n'},
-            ],
-            color:['#708FFF','#FB9434','#219F73']
+    data: [
+      {
+        name: "客1",
+        backgroundColor: "#5CC5FF",
+      },
+      "客2",
+      "客3",
+      "货1",
+      "货2",
+      "专1",
+      "专2",
+      "专3",
+    ],
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      selectedMode: "single",
+      radius: [0, "50%"],
+      center: ["25%", "50%"],
+      label: {
+        normal: {
+          position: "inner",
+          show: true,
+          color: "#fff",
+          fontSize: 14,
+          formatter: "{b}\n{c}辆",
         },
-        {
-            name: '',
-            type: 'pie',
-            radius: ['60%', '70%'],
-            center:['25%','50%'],
-            label: {
-                position: 'inner',
-                show: false
-            },
-            data: [
-                {value: 13456, name: '客1'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '客2'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '客3'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '货1'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '货2'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '专1'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '专2'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '专3'},
-                {value: 2000, name: ''},
-            ],
-            itemStyle: {
-                normal: {
-                    borderRadius: "5",
-                    borderWidth:0,
-                    borderType:"solid",
-                    borderCap:"round",
-                    borderJoin:"round",
-                    borderColor:"#064258",
-                    borderMiterLimit:"20",
-                    color: function(params) {
-                        return {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 1,
-                            y2: 1,
-                            colorStops: [{
-                                    offset: 0,
-                                    color:  color[params.dataIndex] // 0% 处的颜色
-                                },
-                                {
-                                    offset: 1,
-                                    color: colorend[params.dataIndex] // 100% 处的颜色
-                                }
-                            ],
-                            globalCoord: false // 缺省为 false
-                        }
-                    }
+      },
+      data: [
+        { value: 2290, name: "客车\n" },
+        { value: 1020, name: "货车\n" },
+        { value: 3000, name: "专项车\n" },
+      ],
+      color: ["#708FFF", "#FB9434", "#219F73"],
+    },
+    {
+      name: "",
+      type: "pie",
+      radius: ["60%", "70%"],
+      center: ["25%", "50%"],
+      label: {
+        position: "inner",
+        show: false,
+      },
+      data: [
+        { value: 13456, name: "客1" },
+        { value: 13456, name: "客2" },
+        { value: 13456, name: "客3" },
+        { value: 13456, name: "货1" },
+        { value: 13456, name: "货2" },
+        { value: 13456, name: "专1" },
+        { value: 13456, name: "专2" },
+        { value: 13456, name: "专3" },
+      ],
+      itemStyle: {
+        normal: {
+          borderRadius: "5",
+          borderWidth: 2,
+          borderType: "solid",
+          borderCap: "round",
+          borderJoin: "round",
+          borderColor: "#064258",
+          borderMiterLimit: "20",
+          color: function (params) {
+            return {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: color[params.dataIndex], // 0% 处的颜色
                 },
-            },
-            color:['#009688','#63BA79','#FFB800','#F7ED46','#666666']
-        }
-    ]
-}
-
+                {
+                  offset: 1,
+                  color: colorend[params.dataIndex], // 100% 处的颜色
+                },
+              ],
+              globalCoord: false, // 缺省为 false
+            };
+          },
+        },
+      },
+      //   color: ["#009688", "#63BA79", "#FFB800", "#F7ED46", "#666666"],
+    },
+  ],
+};
 
 export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js

@@ -75,8 +75,8 @@ var options = {
     },
     axisLabel: {
       show: true,
-      color: "#B6E6FF",
-      fontSize: 13,
+      color: "#fff",
+      fontSize: 12,
       fontFamily: "Source Han Sans CN-Regular",
     },
   },
@@ -88,15 +88,15 @@ var options = {
       min: 0,
       splitNumber: 4,
       nameTextStyle: {
-        color: "#B6E6FF",
-        fontSize: 13,
+        color: "#fff",
+        fontSize: 12,
         fontFamily: "Source Han Sans CN-Regular",
         align: "left",
         verticalAlign: "center",
       },
       axisLabel: {
-        fontSize: 13,
-        color: "#B6E6FF",
+        fontSize: 12,
+        color: "#fff",
         fontFamily: "HarmonyOS Sans-Regular",
         formatter: function (value, index) {
           return yList[index];

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue

@@ -1,188 +1,256 @@
 <template>
-  <div class='heightway'>
+  <div class="heightway">
     <WgtTitle :title="'交通路段状态'"></WgtTitle>
     <div class="board">
-        <div class="searchPanel">
-          <div >起始桩号：k</div>
-          <el-input class="inputZh" v-model="start"></el-input>
-          <el-input class="inputZh inputJl" v-model="start1"></el-input>
-          <div >结束桩号：k</div>
-          <el-input class="inputZh" v-model="start2"></el-input>
-          <el-input class="inputZh inputJl" v-model="start3"></el-input>
-          <div >路段方向：</div>
-          <el-select v-model="area" class="selectRoad" placeholder="请选择">
-            <el-option
-              v-for="item in areaOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <el-button type="primary" class="btnSearch" @click="onSubmit">搜索</el-button>
-          <el-button class="btnReset">重置</el-button>
+      <div class="searchPanel">
+        <div>起始桩号：k</div>
+        <el-input class="inputZh" v-model="start" placeholder="55"></el-input>
+        <span>+</span>
+        <el-input
+          class="inputZh inputJl"
+          v-model="start1"
+          placeholder="378"
+        ></el-input>
+        <div>结束桩号：k</div>
+        <el-input class="inputZh" v-model="start2" placeholder="208"></el-input>
+        <span>+</span>
+        <el-input
+          class="inputZh inputJl"
+          v-model="start3"
+          placeholder="153"
+        ></el-input>
+        <div>路段方向：</div>
+        <el-select v-model="area" class="selectRoad" placeholder="请选择">
+          <el-option
+            v-for="item in areaOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button type="primary" class="btnSearch" @click="onSubmit"
+          >搜索</el-button
+        >
+        <el-button class="btnReset">重置</el-button>
+      </div>
+      <div class="tblResult">
+        <div class="tblTd">
+          <div>路段名称</div>
+          <div>方向</div>
+          <div>状态</div>
+          <div>平均车速</div>
+          <div>总车流量</div>
         </div>
-        <div class="tblResult">
-          <div class="tblTd">
-            <div>路段名称</div>
-            <div>方向</div>
-            <div>状态</div>
-            <div>平均车速</div>
-            <div>总车流量</div>
-          </div>
-          <div :class="'tblTd ' + (index%2===0?'tblTwo':'')" v-for="(item,index) of list">
-            <div>{{ item.name }}</div>
-            <div>{{ item.direction }}</div>
-            <div style="color:#00EBC1">{{ item.state }}</div>
-            <div>{{ item.speed }}</div>
-            <div>{{ item.follow }}</div>
-          </div>
+        <div
+          :class="'tblTd ' + (index % 2 === 0 ? 'tblTwo' : '')"
+          v-for="(item, index) of list"
+        >
+          <div>{{ item.name }}</div>
+          <div>{{ item.direction }}</div>
+          <div style="color: #00ebc1">{{ item.state }}</div>
+          <div>{{ item.speed }}</div>
+          <div>{{ item.follow }}</div>
         </div>
-     </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
 export default {
-  name: 'Heightway',
+  name: "Heightway",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-     start:'',
-     start1:'',
-     start2:'',
-     start3:'',
-     areaOptions: [{
-          value: '济南',
-          label: '济南'
-        }, {
-          value: '菏泽',
-          label: '菏泽'
-      }],
-      area: '济南',
-        list:[
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}
-        ]
-    
-    }
+      start: "",
+      start1: "",
+      start2: "",
+      start3: "",
+      areaOptions: [
+        {
+          value: "济南",
+          label: "济南",
+        },
+        {
+          value: "菏泽",
+          label: "菏泽",
+        },
+      ],
+      area: "济南",
+      list: [
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+      ],
+    };
   },
 
-  created() {
-    
-  },
+  created() {},
   methods: {
     onSubmit() {
-        console.log('submit!');
-      }
-  }
-}
+      console.log("submit!");
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
-
-
+<style lang="scss" scoped>
 .el-input__inner {
   background-color: transparent !important;
+  font-size: 12px;
+}
+::v-deep .el-input__inner {
+  padding: 0 10px;
+}
+::v-deep .el-input__inner::placeholder {
+  color: #9f9f9f;
+  font-size: 12px;
 }
 .heightway {
   width: 100%;
-  .board{
+  .board {
     height: 400px;
     width: 100%;
-    background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     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;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    padding:15px 10px;
-   .searchPanel{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width:100%;
-    font-size: 14px;
-    margin-bottom: 10px;
-    div{
-      white-space: nowrap;
-      margin-right: 4px;
-    }
-    .inputZh{
-      width: 47px;
-      ::v-deep{
-        .el-input__inner{
-          background-color: #064258 !important;
-          border-width: 0px !important;
+    padding: 15px 10px;
+    .searchPanel {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      width: 100%;
+      font-size: 13px;
+      margin-bottom: 10px;
+      div {
+        white-space: nowrap;
+        margin-right: 4px;
+      }
+      .inputZh {
+        width: 60px;
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+          }
         }
       }
-    }
-    .inputJl{
-      margin-left: 5px;
-      margin-right: 10px;
-    }
-    .selectRoad{
-      width:87px;
-      ::v-deep{
-        .el-input__inner{
-          background-color: #064258 !important;
-          border-width: 0px !important;
+      .inputJl {
+        // width: 60px;
+        margin-left: 5px;
+        margin-right: 10px;
+      }
+      .selectRoad {
+        width: 87px;
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+            font-size: 12px;
+          }
         }
       }
+      .btnSearch {
+        background-color: #00b3cc;
+        margin-left: 10px;
+        padding: 6px 15px;
+        font-size: 13px;
+      }
+      .btnReset {
+        background-color: transparent;
+        border-color: #00b3cc;
+        color: white;
+        padding: 6px 15px;
+        font-size: 13px;
+      }
     }
-    .btnSearch{
-      background-color: #00B3CC;
-      margin-left: 10px;
-    }
-    .btnReset{
-      background-color: transparent;
-      border-color: #00B3CC;
-      color: white;
-    }
-   }
   }
 
-  .tblResult{
-      height: 300px;
+  .tblResult {
+    height: 300px;
+    width: 100%;
+    .tblTd {
       width: 100%;
-      .tblTd{
-        width:100%;
-        display: flex;
-        justify-content: space-between;
-        background-color: #064258;
-        height: 42px;
-        line-height: 42px;
-        color: #fff;
-        div{
-          text-align: left;
-          width: 25%;
-        }
-      }
-      .tblTd:first-child{
-        background-color: #0d3646;
-        color: #00D1FF;
-      }
-      .tblTd>div:first-child{
-        width: 35%;
-        margin-left: 20px;
-      }
-      .tblTd>div:last-child{
-        text-align: center;
-      }
-      .tblTwo{
-        background-color: transparent !important;
+      display: flex;
+      justify-content: space-between;
+      background-color: #064258;
+      height: 42px;
+      line-height: 42px;
+      color: #fff;
+      div {
+        text-align: left;
+        width: 25%;
       }
     }
+    .tblTd:first-child {
+      background-color: #0d3646;
+      color: #00d1ff;
+    }
+    .tblTd > div:first-child {
+      width: 35%;
+      margin-left: 20px;
+    }
+    .tblTd > div:last-child {
+      text-align: center;
+    }
+    .tblTwo {
+      background-color: transparent !important;
+    }
+  }
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js

@@ -1,125 +1,137 @@
 let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`;
 let xdata = {
-   value: ['大学城-长清', '长清-孝里', '孝里-平阴北', '平阴北-平阴', '平阴-东平', '东平-梁山东', '梁山东-嘉祥']
+  value: [
+    "大学城-长清",
+    "长清-孝里",
+    "孝里-平阴北",
+    "平阴北-平阴",
+    "平阴-东平",
+    "东平-梁山东",
+    "梁山东-嘉祥",
+    "平阴2-东平",
+    "东平2-梁山东",
+    "梁山东2-嘉祥",
+  ],
 };
+let ind = -30;
 let sdata = {
-   value: [32774, 30067, 28774, 30067, 30021, 30067, 32774]
-}
+  value: [32774, 30067, 28774, 30067, 30021, 30067, 32774, 30021, 30067, 32774],
+};
 
 let dataZoomMove = {
-   start: 0,
-   end: 4
-}
+  start: 0,
+  end: 4,
+};
 var options = {
-      
-      grid: {
-         containLabel: true,
-         // 边距自行修改
-         bottom: '0%',
-         left: '0%',
-         top: '20%',
-         right: '10%',
+  grid: {
+    containLabel: true,
+    // 边距自行修改
+    bottom: "0%",
+    left: "0%",
+    top: "8%",
+    right: "10%",
+  },
+  xAxis: {
+    type: "value",
+    axisLabel: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    splitLine: {
+      show: false,
+    },
+  },
+  yAxis: [
+    {
+      type: "category",
+      data: xdata.value,
+      inverse: true,
+      axisLabel: {
+        fontSize: "14px",
+        inside: true,
+        verticalAlign: "bottom",
+        color: "#fff",
+        padding: 10,
+        margin: -5,
+        formatter: function (value) {
+          let index = xdata.value.indexOf(value);
+          return `{a|Top${(ind += 1)}} {b|${value}}`;
+        },
+        rich: {
+          a: {
+            fontSize: "10px",
+          },
+
+          b: {
+            fontSize: "12px",
+            padding: [0, 0, 0, 70],
+          },
+        },
+      },
+      axisLine: {
+        show: false,
       },
-      xAxis: {
-         type: 'value',
-         axisLabel: {
-            show: false
-         },
-         axisLine: {
-            show: false,
-         },
-         axisTick: {
-            show: false,
-         },
-         splitLine: {
-            show: false,
-         },
+      axisTick: {
+        show: false,
       },
-      yAxis: [
-         {
-            type: 'category',
-            data: xdata.value,
-            inverse: true,
-            axisLabel: {
-               fontSize: '14px',
-               inside: true,
-               verticalAlign: 'bottom',
-               color:'#fff',
-               padding:10,
-               margin:-5,
-               formatter: function (value) {
-                  let index = xdata.value.indexOf(value);
-                  return `{a|Top${index+1}} {b|${value}}`
-               },
-               rich: {
-                  a: {
-                     fontSize: '14px',
-                  },
-   
-                  b: {
-                     fontSize: '14px',
-                     padding: [0, 0, 0, 70],
-                  }
-               },
+    },
+  ],
+  series: [
+    {
+      realtimeSort: true,
+      data: sdata.value,
+      type: "bar",
+      barWidth: 8,
+      itemStyle: {
+        borderRadius: 40,
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1cd0f000", // 0% 处的颜色
             },
-            axisLine: {
-               show: false,
+            {
+              offset: 1,
+              color: "#1cd0f0", // 100% 处的颜色
             },
-            axisTick: {
-               show: false,
-            }
-         }
-      ],
-      series: [
-         {
-            data: sdata.value,
-            type: 'bar',
-            barWidth: 8,
-            itemStyle: {
-               borderRadius: 40,
-               color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 1,
-                  y2: 0,
-                  colorStops: [
-                     {
-                        offset: 0,
-                        color: '#1cd0f000', // 0% 处的颜色
-                     },
-                     {
-                        offset: 1,
-                        color: '#1cd0f0', // 100% 处的颜色
-                     },
-                  ],
-                  global: false, // 缺省为 false
-               }
+          ],
+          global: false, // 缺省为 false
+        },
+      },
+      label: {
+        show: true,
+        position: "right",
+        distance: -10,
+        data: sdata,
+        color: "#fff",
+        formatter: (c) => {
+          return `{a|}{b|${c.value}辆}`;
+        },
+        rich: {
+          a: {
+            widht: 20,
+            height: 20,
+            backgroundColor: {
+              image: chartIcon,
             },
-            label: {
-               show: true,
-               position: 'right',
-               distance: -10,
-               data: sdata,
-               color:'#fff',
-               formatter: (c) => {
-                  return `{a|}{b|${c.value}辆}`
-               },
-               rich: {
-                  a: {
-                     widht: 20,
-                     height: 20,
-                     backgroundColor: {
-                        image: chartIcon
-                     },
-                  },
-                  b:{
-                     padding:[0,0,0,10]
-                  }
-               }
-            }
-         }
-      ]
-}
+          },
+          b: {
+            padding: [0, 0, 0, 10],
+          },
+        },
+      },
+    },
+  ],
+};
 
 export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue

@@ -1,87 +1,98 @@
 <template>
-  <div class='situation'>
+  <div class="situation">
     <WgtTitle :title="'路段交通量情况'"></WgtTitle>
     <div class="board">
       <div class="tag">
-        <div class="checked">路段车流量Top10</div>
-        <div>断面交通量Top10</div>
+        <div :class="active == 1 ? 'checked' : ''" @click="handleChange(1)">
+          路段车流量Top10
+        </div>
+        <div :class="active == 2 ? 'checked' : ''" @click="handleChange(2)">
+          断面交通量Top10
+        </div>
       </div>
-      <div class="charts keep-ratio " id="situationEchartBox"></div>
-     </div>
+      <div class="charts keep-ratio" id="situationEchartBox"></div>
+    </div>
   </div>
 </template>
 
 <script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-  name: 'Situation',
+  name: "Situation",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-     
-    }
+      active: "2",
+    };
   },
 
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('situationEchartBox'));
+        var myChart = echarts.init(
+          document.getElementById("situationEchartBox")
+        );
         myChart.setOption(chartsStatistics);
       });
     });
   },
-  created() {
-    
-  },
+  created() {},
   methods: {
-
-  }
-}
+    handleChange(value) {
+      console.log(value);
+      this.active = value;
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .situation {
   width: 100%;
-  .board{
+  .board {
     height: 400px;
     width: 100%;
     padding: 0px 30px;
-    background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     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;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     flex-direction: column;
   }
   .charts {
-    margin-top: -40px;
-      height: 400px;
-      width: 100%;
+    // margin-top: -40px;
+    height: 400px;
+    width: 100%;
   }
-  .tag{
-    margin-top: 20px;
+  .tag {
+    margin-top: 15px;
     display: flex;
     width: 100%;
     justify-content: flex-start;
-    div{
+    div {
       width: 150px;
       height: 25px;
       line-height: 25px;
       border-radius: 20px;
       text-align: center;
-      background-color: #C87800;
+      background-color: #00b3cc;
       margin-right: 10px;
     }
-    .checked{
-      background-color: #00B3CC;;
+    .checked {
+      background-color: #c87800 !important;
     }
   }
 }

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='TrafficFlow'>
+  <div class="TrafficFlow">
     <!-- 交通路网状况 -->
     <Traffic class="head" />
     <section class="content">
@@ -11,7 +11,6 @@
       <!-- <Unblocked class="content-m" /> -->
       <!-- 全路车流量状况 -->
       <Flowstate class="content-r" />
-
     </section>
     <section class="foot">
       <!-- 交通路段状态 -->
@@ -24,18 +23,16 @@
 </template>
 
 <script>
-
-
-import Traffic from './components/traffic/'
-import Classification from './components/classification/'
-import Unblocked from './components/unblocked/'
-import Congestion from './components/congestion/'
-import Heightway from './components/heightway/'
-import Flowstate from './components/flowstate/'
-import Situation from './components/situation/'
+import Traffic from "./components/traffic/";
+import Classification from "./components/classification/";
+import Unblocked from "./components/unblocked/";
+import Congestion from "./components/congestion/";
+import Heightway from "./components/heightway/";
+import Flowstate from "./components/flowstate/";
+import Situation from "./components/situation/";
 
 export default {
-  name: 'TrafficFlow',
+  name: "TrafficFlow",
   components: {
     Traffic,
     Classification,
@@ -43,12 +40,12 @@ export default {
     Congestion,
     Heightway,
     Flowstate,
-    Situation
-  }
-}
+    Situation,
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .TrafficFlow {
   width: 100%;
   height: 100%;
@@ -71,7 +68,7 @@ export default {
     pointer-events: none;
     margin-top: 19px;
 
-    >div {
+    > div {
       pointer-events: auto;
     }
 
@@ -80,7 +77,6 @@ export default {
       margin-right: 20px;
     }
 
-
     .content-m {
       width: 260px;
     }
@@ -99,22 +95,22 @@ export default {
     pointer-events: none;
     margin-top: 19px;
 
-    >div {
+    > div {
       pointer-events: auto;
     }
 
     .foot-l {
-      width: 726px;
+      width: 756px;
       margin-right: 20px;
     }
 
     .foot-m {
-      width: 613px;
+      width: 580px;
       margin-right: 20px;
     }
 
     .foot-r {
-      width: 493px;
+      width: 500px;
     }
   }
 }