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

ruoyi-ui/src/common/menuData.js

@@ -55,10 +55,15 @@ export default [
             name: "siteAdministration",
             component: "perception/trafficSurvey/siteAdministration/index.vue",
           }, {
-            title: "综合查询",
+            title: "站点查询",
             path: "/perception/trafficSurvey/comprehensiveQuery",
             name: "comprehensiveQuery",
             component: "perception/trafficSurvey/comprehensiveQuery/index.vue",
+          }, {
+            title: "综合查询",
+            path: "/perception/trafficSurvey/survey",
+            name: "survey",
+            component: "perception/trafficSurvey/survey/index.vue",
           }
         ]
       }

ruoyi-ui/src/utils/auth.js

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'DC-Pro-Token'
+const TokenKey = 'DC-Token'
 
 export function getToken() {
   return Cookies.get(TokenKey)

ruoyi-ui/src/views/JiHeExpressway/components/VideoMulti/videoStream.js

@@ -112,7 +112,10 @@ export class HttpLivePlayer {
       this.initLiveVideo();
     }).catch(error => {
       console.error('获取URL失败:', error);
-      Message.error('无法获取视频流URL');
+
+      this.destroy();
+      this.clearMediaElementErrors(); // 清除媒体元素的错误状态
+      // Message.error('无法获取视频流URL');
     });
   }
 

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

@@ -43,7 +43,7 @@
           <div class="event-item " origin="right">本年：<span>{{ earlyWarningEvents.year }}</span> 起</div>
         </div>
       </div>
-      <div class="box-title"><span>在途车辆统计</span></div>
+      <div class="box-title"><span>日累计车流量</span></div>
       <div class="box-content2">
         <div class="count">
           <div class="charts " ref="carStatisticsEchartBox"></div>
@@ -157,39 +157,19 @@ export default {
     },
     bindCharts(){
       const today = moment().format('YYYY-MM-DD')
-      request({
-        url: '/business/traffic-statistics/history/realTimeTrafficFlow',
-        method: 'get',
-        params: {
-          startDate: today,
-          periodType: 4,
-          direction: 1
-        }
-      }).then(res1=>{
+
         request({
-        url: '/business/traffic-statistics/history/realTimeTrafficFlow',
+        url: '/business/traffic-statistics/history/trafficFlowAtTollTypes',
         method: 'get',
         params: {
           startDate: today,
-          periodType: 4,
-          direction: 3
           }
         }).then(res3=>{
           // totalPassengerFlow 客车 typeSpecialVehicleFlow//特种车 typeTruckFlow 其他
           let total = 0, p0 = 0, p1=0,p2=0,_p0 = 0, _p1=0,_p2=0;
-          res1.data.forEach(x=>{
-            total+=(x.totalPassengerFlow+x.typeTruckFlow+x.typeSpecialVehicleFlow)
-            p0 += x.totalPassengerFlow
-            p1 += x.typeSpecialVehicleFlow
-            p2 += x.typeTruckFlow
-          })
-          res3.data.forEach(x=>{
-
-            total+=(x.totalPassengerFlow+x.typeTruckFlow+x.typeSpecialVehicleFlow)
-            p0 += x.totalPassengerFlow
-            p1 += x.typeSpecialVehicleFlow
-            p2 += x.typeTruckFlow
-          })
+            total+=(res3.data.bus +res3.data.truck)
+            p0 += res3.data.bus
+            p1 += res3.data.truck
 
           if(total > 0){
             _p0 = parseFloat((p0/total*100).toFixed(1))
@@ -216,7 +196,7 @@ export default {
           myChart3.setOption(otherStatistics);
 
         })
-      })
+
     },
     bindTrafficIncident(){
       // 预警事件

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/js/carStatistics.js

@@ -98,7 +98,7 @@ var carStatistics = {
       },
       detail: {
         formatter: function (params) {
-          return `{cn|}\n{number|${params + "%"}\n}{wcl|小客车}`;
+          return `{cn|}\n{number|${params + "%"}\n}{wcl|客车}`;
         },
         rich: {
           fontFamily: "PangMenZhengDao-Regular",

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/js/focusStatistics.js

@@ -98,7 +98,7 @@ var focusStatistics = {
       },
       detail: {
         formatter: function (params) {
-          return `{cn|}\n{number|${params + "%"}\n}{wcl|重点车辆}`;
+          return `{cn|}\n{number|${params + "%"}\n}{wcl|货车}`;
         },
         rich: {
           fontFamily: "PangMenZhengDao-Regular",

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/data.js

@@ -158,60 +158,78 @@ export const actualLocationList = [
 export const canvasList = [
   {
     name: "殷家林枢纽",
-    code: "K54",
+    code: "K54\n+394",
     line: "G3京台高速",
     // isFoot: true,
     distance: 0.06989,
   },
-  { name: "大学城收费站", code: "K59", distance: 50.563 },
-  { name: "长清收费站", code: "K72", distance: 140.05 },
-  { name: "长清服务区", code: "K79", distance: 63.66 },
+  { name: "大学城收费站", code: "K59\n+289", distance: 50.563 },
+  { name: "长清收费站", code: "K72\n+847", distance: 140.05 },
+  { name: "长清服务区", code: "K79\n+010", distance: 63.66 },
   {
     name: "松竹枢纽",
-    code: "K83",
+    code: "K83\n+885",
     line: "S0101济南绕城高速二环西环段",
     distance: 50.358,
   },
-  { name: "孝里收费站", code: "K86", distance: 27 },
-  { name: "平阴北收费站", code: "K99", distance: 136.88 },
-  { name: "平阴收费站", code: "K105", distance: 63.57 },
-  { name: "平阴停车区", code: "K114", distance: 87.815 },
+  { name: "孝里收费站", code: "K86\n+499", distance: 27 },
+  { name: "平阴北收费站", code: "K99\n+750", distance: 136.88 },
+  { name: "平阴收费站", code: "K105\n+904", distance: 63.57 },
+  { name: "平阴停车区", code: "K114\n+405", distance: 87.815 },
   {
     name: "孔村枢纽",
-    code: "K117",
+    code: "K117\n+878",
     line: "G22青兰高速",
     distance: 35.876,
   },
-  { name: "平阴南收费站", code: "K126", distance: 86.2 },
+  { name: "平阴南收费站", code: "K126\n+223", distance: 86.2 },
   {
     name: "魏雪枢纽",
-    code: "K133",
+    code: "K133\n+588",
     line: "泰东高速",
     distance: 35.876,
   },
-  { name: "东平服务区", code: "K139", distance: 140.42 },
-  { name: "东平收费站", code: "K145", distance: 63 },
+  { name: "东平服务区", code: "K139\n+817", distance: 140.42 },
+  { name: "东平收费站", code: "K145\n+933", distance: 63 },
   {
     name: "东平湖枢纽",
-    code: "K155",
+    code: "K155\n+652",
     line: "S30董梁高速",
     distance: 70,
   },
-  { name: "沙河停车区", code: "K159", distance: 70 },
-  { name: "梁山东收费站", code: "K173", distance: 70 },
-  { name: "梁山收费站", code: "K179", distance: 70 },
+  { name: "沙河停车区", code: "K159\n+156", distance: 70 },
+  { name: "梁山东收费站", code: "K173\n+950", distance: 70 },
+  { name: "梁山收费站", code: "K179\n+396", distance: 70 },
   {
     name: "信楼枢纽",
-    code: "K182",
+    code: "K182\n+987",
     line: "郓鄄高速",
     distance: 35.876,
   },
-  { name: "梁山服务区", code: "K186", distance: 70 },
-  { name: "嘉祥西收费站", code: "K190", distance: 70 },
+  { name: "梁山服务区", code: "K186\n+061", distance: 70 },
+  { name: "嘉祥西收费站", code: "K190\n+495", distance: 70 },
   {
     name: "王官屯枢纽",
-    code: "K208",
+    code: "K208\n+979",
     line: "G1511日兰高速",
     distance: 120,
   },
 ];
+export const boundaryLineList = [
+  {
+    name: "济南 泰安",
+    code: "K132\n+469",
+    distance: 0.49282,
+  },
+  {
+    name: "泰安 济宁",
+    code: "K160\n+708",
+    distance: 0.64576,
+  },
+  {
+    name: "济宁 菏泽",
+    code: "K200\n+752",
+    distance: 0.86296,
+  },
+
+];

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

@@ -7,7 +7,7 @@ import { onceObserver } from "@screen/utils/resizeObserver";
 import Vue from "vue";
 import { Graph, Shape } from '@antv/x6'
 import { debounce } from "lodash";
-import { actualLocationList, canvasList } from "./data.js";
+import { actualLocationList, canvasList,boundaryLineList } from "./data.js";
 
 const faultBg = require(`@screen/images/mapBg/fault.svg`);
 const normalBg = require(`@screen/images/mapBg/active.svg`);
@@ -54,12 +54,25 @@ const rect = {
     }
   }
 }
+const boundaryLineStyle = {
+  shape: "rect",
+  width: 0.1,
+  attrs: {
+    "body": {
+      stroke: "rgba(255,255,255,0.5)",
+      strokeWidth: 2,
+      strokeDasharray: '4, 7',
+
+    }
+  }
+}
 
 export default {
   name: "Thumbnail",
   data() {
     return {
       list: [], //计算真实距离与画布距离的比例  *节点真实距离作为canvasItem.distance的值
+      boundaryLineList: [], //计算真实距离与画布距离的比例  *节点真实距离作为canvasItem.distance的值
       translateX: 0,
       translateY: 50,
       allInstance: 0,
@@ -168,6 +181,7 @@ export default {
     },
     async mapInit() {
       this.list = _.cloneDeep(canvasList)
+      this.boundaryLineList = _.cloneDeep(boundaryLineList)
       this.translateX = 0;
       this.translateY = 40;
       this.allInstance = 0;
@@ -397,6 +411,11 @@ export default {
         info.distance = svgWidth * actualLocationList[index].intervalDistance;
         await this.drawTag(info, graph);
       }
+      for (let index in this.boundaryLineList) {
+        const info = this.boundaryLineList[index];
+        info.distance = svgWidth * info.distance;
+        await this.drawBoundaryLine(info, graph);
+      }
       //文字覆盖问题修复
       graph.getCellById("K79+010_底部文字").translate(-10, 0)
       graph.getCellById("K83+885_底部文字").translate(-10, 0);
@@ -410,6 +429,23 @@ export default {
       graph.getCellById("K155+652_底部文字").translate(-10, 0);
       graph.getCellById("K190+495_底部文字").translate(10, 0);
 
+    },
+    async drawBoundaryLine(info, graph, isFoot = false) {
+      let text = info.name
+      let x = info.distance + 10;
+      graph.addNode({ ...boundaryLineStyle, x: x, y: 30, height: 135, zIndex: 1 });
+      const textNode = {
+        label: text,
+        attrs: {
+          label: {
+            fontSize: 30,
+            fill: "rgba(255,255,255,0.5)",
+            fontWeight: 600
+          }
+        }
+      }
+      graph.addNode({ ...textNode, x: x, y: 98 ,zIndex:1})
+
     },
     async drayLine(info, graph, isFoot = false) {
       let text = info.line

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/statisticalAnalysis/query/data.js

@@ -143,7 +143,7 @@ export const searchFormList = [
     required: true,
     type: "datePicker",
     default: [
-      moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
+      moment().subtract(1, 'days').endOf('day').format("YYYY-MM-DD HH:mm:ss"),
       moment().format("YYYY-MM-DD HH:mm:ss"),
     ],
     options: {

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/statisticalAnalysis/query/index.vue

@@ -7,9 +7,24 @@
         <el-button v-hasPermi="['maintain:equipmentOnlineAnalysis:export']" size="mini" icon="el-icon-download" class="btnSearch" @click="SystemStatusExport('1')">导出丢包</el-button>
       </div>
       <div class="right-div">
-        <InputSearch
+        <div class="dsort">
+          <el-button class="btnSearch" @click.native="onDate1" style="width: 80px">上一日</el-button>
+          <el-button class="btnSearch" @click.native="onDate2" style="width: 80px">下一日</el-button>
+          <el-date-picker
+            v-model="datetime"
+            @change="handleSearch"
+            :clearable=false
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="选择告警时间"
+            class="shezhi"
+
+          >
+          </el-date-picker>
+        </div>
+<!--        <InputSearch
         ref="searchComp"
-        :formList="searchFormList" @handleSearch="handleSearch"  />
+        :formList="searchFormList" @handleSearch="handleSearch"  />-->
       </div>
     </div>
     <div class="anacontent" style="height: calc(100vh - 225px)">
@@ -39,7 +54,7 @@
                 <span>{{ scope.row.direction == "1" ? "菏泽方向" : scope.row.direction == "2" ? "双向": "济南方向"}}</span>
               </template>
             </ElTableColumn>
-            <ElTableColumn prop="deviceIp" width="120"  label="IP"> </ElTableColumn>
+            <ElTableColumn prop="deviceIp" width="120"  label="IP"></ElTableColumn>
             <!-- <ElTableColumn prop="statisticalDate" width="200"  label="监测时间"> </ElTableColumn> -->
             <ElTableColumn prop="deviceStatus" width="120"  label="设备状态" >
               <template slot-scope="scope" >
@@ -125,6 +140,7 @@ export default {
       sectionData: [],
       searchFormList,
       searchFormList2,
+      datetime: moment().format('YYYY-MM-DD'),
       startTime: "",
       time: "",
       deviceName: null,
@@ -144,7 +160,12 @@ export default {
   destroyed() {
 
   },
+
   methods: {
+    init(){
+      this.datetime = moment().format('YYYY-MM-DD');
+      this.handleSearch(datetime);
+    },
     showRecord(item){
       this.dialogData = item;
       this.dialogVisible = true;
@@ -253,7 +274,7 @@ export default {
               formatter: function (value, index) {
                 const date = moment(value);
                 const isSameDay = index > 0 && moment(x[index - 1]).isSame(date, 'day');
-                return  date.format('YYYY-MM-DD');
+                return  date.format('MM-DD HH');
               }
             }
           };
@@ -310,6 +331,14 @@ export default {
         }
       });
     },
+    onDate1(){
+      this.datetime = moment(this.datetime).subtract(1, "days").format('YYYY-MM-DD');
+      this.handleSearch( this.datetime);
+    },
+    onDate2(){
+      this.datetime = moment(this.datetime).subtract(-1, "days").format('YYYY-MM-DD');
+      this.handleSearch( this.datetime);
+    },
     onDeviceChange(){
       //判断全选
       if(this.devices.indexOf('all') !== -1 && this.devicesSource.indexOf('all') === -1){
@@ -334,8 +363,8 @@ export default {
       this.initQueryTable();
     },
     handleSearch(data) {
-      this.startTime = moment(data.time[0]).format("YYYY-MM-DD") + ' 00:00:00';
-      this.time = moment(data.time[1]).format("YYYY-MM-DD") + ' 23:59:59';
+      this.startTime = moment(data).format("YYYY-MM-DD") + ' 00:00:00';
+      this.time = moment(data).format("YYYY-MM-DD") + ' 23:59:59';
 
 
       this.searchText = `${moment(this.startTime).format(
@@ -362,8 +391,8 @@ export default {
         text: "文件正在下载...",
       });
       const params = {
-        startTime: this.startTime,
-        time: this.time,
+        startTime: moment(this.datetime).format("YYYY-MM-DD") + ' 00:00:00',
+        time: moment(this.datetime).format("YYYY-MM-DD") + ' 23:59:59',
         type: this.devices.join(','),
         pageNum: this.searchData.pageNum,
         pageSize: this.searchData.pageSize,
@@ -401,7 +430,7 @@ export default {
     },
   },
   async mounted() {
-    this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
+    this.startTime = moment().subtract(1, 'days').endOf('day').format("YYYY-MM-DD HH:mm:ss");
     this.time = moment().format("YYYY-MM-DD HH:mm:ss");
 
 
@@ -571,4 +600,18 @@ export default {
   border: 0px !important;
   background-color: transparent !important;
 }
+.dsort {
+  font-size: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 14px;
+}
+.shezhi{
+  width: 150px;
+  height: 34px;
+  ::v-deep .el-input__inner{
+    height:32px;
+  }
+}
 </style>

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

@@ -62,7 +62,22 @@ export default {
             direction: data.direction
           }
         }).then(resLastYear=>{
-          chartsStatistics.xAxis.data = res.data.map(x=>x.name);
+          //将字符串按照 '-' 分割成两行
+          function splitNameByDash(name) {
+            const parts = name.split('-');
+            if (parts.length > 1) {
+              return `${parts[0]}\n${parts.slice(1).join('-')}`;
+            }
+            return name;
+          }
+          chartsStatistics.xAxis.data = res.data.map(x=>splitNameByDash(x.name));
+          chartsStatistics.xAxis.axisLabel = {
+            fontSize: 15, // 调整字体大小
+            formatter: function (value) {
+              return value;
+            }
+          };
+
           chartsStatistics.series[0].data = res.data.map(x=>x.totalPassengerFlow);
           chartsStatistics.series[1].data = res.data.map(x=>x.typeTruckFlow);
           chartsStatistics.series[2].data = res.data.map(x=>x.typeSpecialVehicleFlow);
@@ -78,6 +93,8 @@ export default {
     }
   },
   mounted() {
+    // 将字符串按照 '-' 分割成两行
+
     // this.$nextTick(() => {
     //   var myChart = echarts.init(document.getElementById("anaFlow"));
     //   myChart.setOption(chartsStatistics);

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js

@@ -5,14 +5,15 @@ var options = {
     confine:true,
     trigger: "axis",
     formatter: (params) => {
-
-      let name = params[0].name.replace(/-/g, "")
-      let name1 = name+'-济南'
-      let name2 = name+'-菏泽'
+      // 获取第一个参数的名称并按 '-' 分割
+      let parts = params[0].name.split('-');
+     // let name = params[0].name.replace(/-/g, "")
+      let name1 = parts[0]+"-"+parts[1]+'-济南'
+      let name2 = parts[1]+"-"+parts[0]+'-菏泽'
       if(params[0].axisIndex === 1){
-        name1 = name+'-菏泽'
-        name2 = name+'-济南'
-      } 
+        name1 = parts[0]+"-"+parts[1]+'-菏泽'
+        name2 = parts[1]+"-"+parts[0]+'-济南'
+      }
       return `${name1}
       <br/>
       ${params[0].marker}${params[0].seriesName}: <span style="font-weight:bold;"> ${params[0].value}  辆</span>
@@ -48,13 +49,13 @@ var options = {
         itemStyle: {
           color: '#6DBBFB'
         }
-        
+
       },{
         name: "去年同期",
         itemStyle: {
           color: '#5FA52B'
         }
-        
+
       },
     ],
   },
@@ -312,7 +313,7 @@ var options = {
         },
       },
       data: [
-        195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21, 
+        195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21,
       ],
     },
   ],

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

@@ -78,9 +78,31 @@ export default {
         url: '/business/traffic-statistics/history/realTimeTrafficFlowHour',
         method: 'get'
       }).then(res=>{
-        const xAxis = res.data["1"].map(x=>x.name);
-        chartOptions.xAxis[0].data = xAxis;
-        chartOptions.xAxis[1].data = xAxis;
+        const data = res.data["1"];
+        const xAxis = data.map(item => {
+          const parts = item.name.split('-');
+          if (parts.length > 1) {
+            return { value: item.name, name: `${parts[0]}\n${parts.slice(1).join('-')}` };
+          } else {
+            return { value: item.name, name: item.name };
+          }
+        });
+        chartOptions.xAxis[0].data = xAxis.map(x => x.value);
+        chartOptions.xAxis[1].data = xAxis.map(x => x.value);
+
+        chartOptions.xAxis.forEach(axis => {
+          axis.axisLabel = {
+            ...axis.axisLabel,
+            formatter: function(value) {
+              const parts = value.split('-');
+              if (parts.length > 1) {
+                return `${parts[0]}\n${parts.slice(1).join('-')}`;
+              } else {
+                return value;
+              }
+            }
+          };
+        });
         // 1今年菏泽 2今年济南 3去年菏泽 4去年济南
         chartOptions.series[0].data = res.data['2'].map(x=>x.totalFlow)
         chartOptions.series[1].data = res.data['4'].map(x=>x.totalFlow)

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

@@ -7,9 +7,6 @@
       <el-tab-pane label="交通流统计" name="second" class="tab_con">
         <TrafficFlowStatistics />
       </el-tab-pane>
-      <el-tab-pane label="一类交调站" name="survey" class="tab_con">
-        <TrafficSurvey />
-      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -17,14 +14,12 @@
 <script>
 import TrafficFlowAnalysis from "./analysis/index.vue";
 import TrafficFlowStatistics from "./statistics/index.vue";
-import TrafficSurvey from "./survey/index.vue";
 
 export default {
   name: "TrafficFlow",
   components: {
     TrafficFlowAnalysis,
     TrafficFlowStatistics,
-    TrafficSurvey
   },
   data() {
     return {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js

@@ -44,19 +44,6 @@ export const deviceList = [
 ]
 
 export const searchFormList = [
-
-  {
-    label: "时间:",
-    key: "date",
-    type: "datePicker",
-    required: true,
-    default: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
-    options: {
-      type: "datetime",
-      format: "yyyy-MM-dd HH:mm:ss",
-      valueFormat: "yyyy-MM-dd HH:mm:ss",
-    },
-  },
   {
     label: "时间类型:",
     key: "type",
@@ -78,30 +65,81 @@ export const searchFormList = [
         {
           key: "3",
           label: "年",
+        },
+        {
+          key: "4",
+          label: "日期范围",
         }
       ],
     },
   },
+  {
+    label: "时间:",
+    key: "date",
+    type: "datePicker",
+    required: true,
+    default: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
+    options: {
+      type: "datetime",
+      format: "yyyy-MM-dd HH:mm:ss",
+      valueFormat: "yyyy-MM-dd HH:mm:ss",
+    },
+    visible: (data) => {
+      if (data.type !== "4") {
+        return true;
+      }
+    },
+  },
+  {
+    label: "日期范围:",
+    key: "timeRange",
+    type: "datePicker",
+    required: true,
+    default:[moment().format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')],
+    options: {
+      format: "yyyy-MM-dd HH:mm:ss",
+      type: "daterange",
+      valueFormat: "yyyy-MM-dd HH:mm:ss",
+      pickerOptions: {
+        /*disabledDate(time) {
+          return time.getTime() > Date.now()
+        },*/
+        onPick({ maxDate, minDate }){
+          //限制60天范围
+          if (minDate) {
+            const end = new Date(minDate.getTime() + 60 * 24 * 60 * 60 * 1000);
+            const start = new Date(minDate.getTime() - 60 * 24 * 60 * 60 * 1000);
+            this.disabledDate = (time) => {
+              return time.getTime() > end.getTime() || time.getTime() < start.getTime();
+            };
+          }
+        },
+      },
+    },
+    visible: (data) => {
+      if (data.type === "4") {
+        return true;
+      }
+    },
+  },
+
   {
     label: "方向:",
     key: "direction",
     type: "RadioGroup",
+    required: true,
     isAlone: true,
-    default:'',
+    default:'1',
     options: {
       activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
       options: [
         {
           key: "1",
-          label: "菏泽",
-        },
-        {
-          key: "3",
-          label: "济南",
+          label: "分方向",
         },
         {
-          key: "",
-          label: "双向",
+          key: "2",
+          label: "不分方向",
         }
       ],
     },
@@ -127,7 +165,27 @@ export const searchFormList = [
       ],
     },
   },
-
+  {
+    label: "车型:",
+    key: "carType",
+    type: "RadioGroup",
+    required: true,
+    isAlone: true,
+    default:'1',
+    options: {
+      activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+      options: [
+        {
+          key: "1",
+          label: "小类",
+        },
+        {
+          key: "2",
+          label: "大类",
+        }
+      ],
+    },
+  },
   // {
   //   label: "方向:",
   //   key: "direction",

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

@@ -33,7 +33,11 @@
           <InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList" @handleSearch="handleSearch" />
         </div>
         <div class="bodyTable">
-          <Table v-if="queryForm.dataType == '1'" style="width:85vw" :data="tableData"  height="90%" >
+          <div style="height: 40%;" >
+            <div id="tableChart" style="height: 95%;width: 100%"></div>
+          </div>
+          <!--车流量 不分方向 小类-->
+          <Table v-if="queryForm.dataType == '1' && queryForm.direction == '2' && queryForm.carType == '1'" style="width:85vw" :data="tableData" :key="tableKey" height="50%" >
             <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
             <ElTableColumn prop="trafficNumberOfInAndSmall"  align="center" label="中小客车" />
             <ElTableColumn prop="busTrafficVolume"  align="center" label="大客车" />
@@ -41,12 +45,84 @@
             <ElTableColumn prop="mediumTruckTrafficVolume"  align="center" label="中型货车" />
             <ElTableColumn prop="largeTruckTrafficVolume"  align="center" label="大型货车" />
             <ElTableColumn prop="extraLargeTrucksTrafficVolume"  align="center" label="特大型货车" />
-            <ElTableColumn prop="containerTruckTrafficVolume"  align="center" label="集装箱车" />
-            <ElTableColumn prop="motorcycleTrafficVolume"  align="center" label="摩托车" />
-            <ElTableColumn prop="tractorTrafficVolume"  align="center" label="拖拉机" />
+<!--            <ElTableColumn prop="containerTruckTrafficVolume"  align="center" label="集装箱车" />-->
+<!--            <ElTableColumn prop="motorcycleTrafficVolume"  align="center" label="摩托车" />-->
+<!--            <ElTableColumn prop="tractorTrafficVolume"  align="center" label="拖拉机" />-->
+            <ElTableColumn prop="trafficVolume"  align="center"  label="合计" />
+          </Table>
+          <!--车流量 不分方向 大类-->
+          <Table v-if="queryForm.dataType == '1' && queryForm.direction == '2' && queryForm.carType == '2'" style="width:85vw" :data="tableData" :key="tableKey" height="50%" >
+            <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
+            <ElTableColumn prop="bus"  align="center" label="客车" />
+            <ElTableColumn prop="goodsCar"  align="center" label="货车" />
             <ElTableColumn prop="trafficVolume"  align="center"  label="合计" />
           </Table>
-          <Table v-else style="width:85vw" :data="tableData" v-loading="loading"  height="90%" >
+
+          <!--车流量 分方向 小类-->
+          <Table v-if="queryForm.dataType == '1' && queryForm.direction == '1' && queryForm.carType == '1'" style="width:85vw" :data="tableData" :key="tableKey"  height="50%" >
+            <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
+            <ElTableColumn  align="center" label="中小客车" >
+              <ElTableColumn prop="trafficNumberOfInAndSmallHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="trafficNumberOfInAndSmallJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn  align="center" label="大客车" >
+              <ElTableColumn prop="busTrafficVolumeHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="busTrafficVolumeJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center" label="小型货车" >
+              <ElTableColumn prop="trafficVolumeOfSmallTrucksHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="trafficVolumeOfSmallTrucksJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center" label="中型货车" >
+              <ElTableColumn prop="mediumTruckTrafficVolumeHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="mediumTruckTrafficVolumeJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center" label="大型货车" >
+              <ElTableColumn prop="largeTruckTrafficVolumeHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="largeTruckTrafficVolumeJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center" label="特大型货车" >
+              <ElTableColumn prop="extraLargeTrucksTrafficVolumeHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="extraLargeTrucksTrafficVolumeJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <!--<ElTableColumn align="center" label="集装箱车" >
+              <ElTableColumn prop="containerTruckTrafficVolumeHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="containerTruckTrafficVolumeJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center" label="摩托车" >
+              <ElTableColumn prop="motorcycleTrafficVolumeHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="motorcycleTrafficVolumeJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center" label="拖拉机" >
+              <ElTableColumn prop="tractorTrafficVolumeHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="tractorTrafficVolumeJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>-->
+            <ElTableColumn align="center"  label="合计" >
+              <ElTableColumn prop="trafficVolumeHZ"  align="center"  label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="trafficVolumeJN"  align="center"  label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center"  label="总计车流量" prop="allTrafficVolume"  ></ElTableColumn>
+          </Table>
+          <!--车流量 分方向 大类-->
+          <Table v-if="queryForm.dataType == '1' && queryForm.direction == '1' && queryForm.carType == '2'" style="width:85vw" :data="tableData" :key="tableKey"  height="50%" >
+            <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
+            <ElTableColumn  align="center" label="客车" >
+              <ElTableColumn prop="busHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="busJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center" label="货车" >
+              <ElTableColumn prop="goodsCarHZ"  align="center" label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="goodsCarJN"  align="center" label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center"  label="合计" >
+              <ElTableColumn prop="trafficVolumeHZ"  align="center"  label="菏泽" ></ElTableColumn>
+              <ElTableColumn prop="trafficVolumeJN"  align="center"  label="济南" ></ElTableColumn>
+            </ElTableColumn>
+            <ElTableColumn align="center"  label="总计车流量" prop="allTrafficVolume"  ></ElTableColumn>
+          </Table>
+
+          <!--车速 不分方向 小类-->
+          <Table v-if="queryForm.dataType == '2' && queryForm.direction == '2' && queryForm.carType == '1'" style="width:85vw" :data="tableData" :key="tableKey" v-loading="loading"  height="50%" >
             <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
             <ElTableColumn prop="inAndSmallAverageVehicleSpeed"  align="center" label="中小客车" />
             <ElTableColumn prop="averageSpeedOfBus"  align="center" label="大客车" />
@@ -54,11 +130,75 @@
             <ElTableColumn prop="averageSpeedOfMediumSizeTrucks"  align="center" label="中型货车" />
             <ElTableColumn prop="averageSpeedOfLargeTrucks"  align="center" label="大型货车" />
             <ElTableColumn prop="averageSpeedOfExtraLargeTrucks"  align="center" label="特大型货车" />
-            <ElTableColumn prop="averageSpeedOfContainerTruck"  align="center" label="集装箱车" />
-            <ElTableColumn prop="averageSpeedOfMotorcycle"  align="center" label="摩托车" />
-            <ElTableColumn prop="averageSpeedOfTractor"  align="center" label="拖拉机" />
+<!--            <ElTableColumn prop="averageSpeedOfContainerTruck"  align="center" label="集装箱车" />-->
+<!--            <ElTableColumn prop="averageSpeedOfMotorcycle"  align="center" label="摩托车" />-->
+<!--            <ElTableColumn prop="averageSpeedOfTractor"  align="center" label="拖拉机" />-->
             <ElTableColumn prop="avgSpeed"  align="center"  label="车速平均" />
           </Table>
+          <!--车速 不分方向 大类-->
+          <Table v-if="queryForm.dataType == '2' && queryForm.direction == '2' && queryForm.carType == '2'" style="width:85vw" :data="tableData" :key="tableKey" v-loading="loading"  height="50%" >
+            <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
+            <ElTableColumn prop="busVehicleSpeed"  align="center" label="客车" />
+            <ElTableColumn prop="goodsCarVehicleSpeed"  align="center" label="货车" />
+            <ElTableColumn prop="avgSpeed"  align="center"  label="车速平均" />
+          </Table>
+
+          <!--车速 分方向 小类-->
+          <Table v-if="queryForm.dataType == '2' && queryForm.direction == '1' && queryForm.carType == '1'" style="width:85vw" :data="tableData" :key="tableKey" v-loading="loading"  height="50%" >
+            <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
+            <ElTableColumn align="center" label="中小客车" >
+              <ElTableColumn prop="inAndSmallAverageVehicleSpeedHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="inAndSmallAverageVehicleSpeedJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center" label="大客车" >
+              <ElTableColumn prop="averageSpeedOfBusHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="averageSpeedOfBusJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center" label="小型货车" >
+              <ElTableColumn prop="smallTrucksAverageVehicleSpeedHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="smallTrucksAverageVehicleSpeedJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center" label="中型货车" >
+              <ElTableColumn prop="averageSpeedOfMediumSizeTrucksHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="averageSpeedOfMediumSizeTrucksJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center" label="大型货车" >
+              <ElTableColumn prop="averageSpeedOfLargeTrucksHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="averageSpeedOfLargeTrucksJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center" label="特大型货车" >
+              <ElTableColumn prop="averageSpeedOfExtraLargeTrucksHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="averageSpeedOfExtraLargeTrucksJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center"  label="车速平均" >
+              <ElTableColumn prop="avgSpeedHZ"  align="center"  label="菏泽" />
+              <ElTableColumn prop="avgSpeedJN"  align="center"  label="济南" />
+            </ElTableColumn>
+          </Table>
+          <!--车速 分方向 大类-->
+          <Table v-if="queryForm.dataType == '2' && queryForm.direction == '1' && queryForm.carType == '2'" style="width:85vw" :data="tableData" :key="tableKey" v-loading="loading"  height="50%" >
+            <ElTableColumn prop="time" align="center" min-width="140"  label="时间"></ElTableColumn>
+            <ElTableColumn align="center" label="客车" >
+              <ElTableColumn prop="busVehicleSpeedHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="busVehicleSpeedJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center" label="货车" >
+              <ElTableColumn prop="goodsCarVehicleSpeedHZ"  align="center" label="菏泽" />
+              <ElTableColumn prop="goodsCarVehicleSpeedJN"  align="center" label="济南" />
+            </ElTableColumn>
+
+            <ElTableColumn align="center"  label="车速平均" >
+              <ElTableColumn prop="avgSpeedHZ"  align="center"  label="菏泽" />
+              <ElTableColumn prop="avgSpeedJN"  align="center"  label="济南" />
+            </ElTableColumn>
+          </Table>
         </div>
       </div>
     </div>
@@ -100,9 +240,9 @@
           <ElTableColumn prop="mediumTruckTrafficVolume"  align="center" label="中型货车" />
           <ElTableColumn prop="largeTruckTrafficVolume"  align="center" label="大型货车" />
           <ElTableColumn prop="extraLargeTrucksTrafficVolume"  align="center" label="特大型货车" />
-          <ElTableColumn prop="containerTruckTrafficVolume"  align="center" label="集装箱车" />
-          <ElTableColumn prop="motorcycleTrafficVolume"  align="center" label="摩托车" />
-          <ElTableColumn prop="tractorTrafficVolume"  align="center" label="拖拉机" />
+<!--          <ElTableColumn prop="containerTruckTrafficVolume"  align="center" label="集装箱车" />-->
+<!--          <ElTableColumn prop="motorcycleTrafficVolume"  align="center" label="摩托车" />-->
+<!--          <ElTableColumn prop="tractorTrafficVolume"  align="center" label="拖拉机" />-->
           <ElTableColumn prop="trafficVolume"  align="center"  label="合计" />
         </Table>
         <Table v-else style="width:100%" :data="realTimeTableData"   height="90%" >
@@ -117,9 +257,9 @@
           <ElTableColumn prop="averageSpeedOfMediumSizeTrucks"  align="center" label="中型货车" />
           <ElTableColumn prop="averageSpeedOfLargeTrucks"  align="center" label="大型货车" />
           <ElTableColumn prop="averageSpeedOfExtraLargeTrucks"  align="center" label="特大型货车" />
-          <ElTableColumn prop="averageSpeedOfContainerTruck"  align="center" label="集装箱车" />
-          <ElTableColumn prop="averageSpeedOfMotorcycle"  align="center" label="摩托车" />
-          <ElTableColumn prop="averageSpeedOfTractor"  align="center" label="拖拉机" />
+<!--          <ElTableColumn prop="averageSpeedOfContainerTruck"  align="center" label="集装箱车" />-->
+<!--          <ElTableColumn prop="averageSpeedOfMotorcycle"  align="center" label="摩托车" />-->
+<!--          <ElTableColumn prop="averageSpeedOfTractor"  align="center" label="拖拉机" />-->
           <ElTableColumn prop="avgSpeed"  align="center"  label="车速平均" />
         </Table>
       </div>
@@ -144,6 +284,7 @@
   import * as echarts from "echarts";
   import chartOptions from "./charts";
   import { Loading } from 'element-ui';
+  import tableChartsOptions from "./tableCharts";
 
 
   export default {
@@ -165,21 +306,12 @@
       devItem:{},
       queryForm:{
         iotDeviceId:'',
-        direction:'',
+        direction:'1',
         date:moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
         type:'1',
         dataType:'1',
+        carType:'1',
       },
-      typeOptions:[
-        {value:"1",label:"日"},
-        {value:"2",label:"月"},
-        {value:"3",label:"年"},
-      ],
-      directionOptions:[
-        {value:"1",label:"菏泽"},
-        {value:"3",label:"济南"},
-        {value:"",label:"双向"},
-      ],
       modelVisible:false,
       loading:false,
       deviceList: [],
@@ -195,6 +327,7 @@
       },
       realTimeTableData:[],
       realTimeDataList:[],
+      tableKey:null,
     };
   },
   created(){
@@ -222,6 +355,10 @@
       this.queryForm.type = data.type;
       this.queryForm.dataType = data.dataType;
       this.queryForm.direction = data.direction;
+      this.queryForm.carType = data.carType;
+      this.queryForm.startTime = data.timeRange[0];
+      this.queryForm.endTime = data.timeRange[1];
+
       this.initData();
     },
     initData(){
@@ -232,9 +369,121 @@
       }).then(res => {
         if (res.code == 200) {
           this.tableData = res.data
+          this.tableKey = Math.random()
+
+          this.initTableCharts()
         }
       })
     },
+
+    initTableCharts(){
+      if(!this.myTableChart){
+        this.myTableChart = echarts.init(document.getElementById("tableChart"));
+      }
+      tableChartsOptions.series = []
+      if( this.tableData &&  this.tableData.length > 0){
+        let dataList = []
+        //车流量去掉自然合计值、折算值、自然平均值，车速去掉平均值
+        if (this.queryForm.dataType == '1'){
+          tableChartsOptions.yAxis[0].name = '流量'
+          dataList = this.tableData.slice(0,this.tableData.length - 4);
+          tableChartsOptions.xAxis.data = dataList.map(item => item.time.slice(item.time.length - 2,item.time.length))
+          if (this.queryForm.direction == '1'){
+            tableChartsOptions.series = [
+                {
+                  name: "菏泽",
+                  type: "line",
+                  selectedMode: false,
+                  itemStyle: {
+                    barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+                    // lenged文本
+                    opacity: 1,
+                    color: '#02A0F8',
+                  },
+                  data: dataList.map(item => item.trafficVolumeHZ),
+                },
+              {
+                name: "济南",
+                type: "line",
+                selectedMode: false,
+                itemStyle: {
+                  // lenged文本
+                  barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+                  opacity: 1,
+                  color: '#E4BB53'
+                },
+                data: dataList.map(item => item.trafficVolumeJN),
+              },
+            ]
+          } else {
+            tableChartsOptions.series = [
+              {
+                name: "车流量",
+                type: "line",
+                selectedMode: false,
+                itemStyle: {
+                  barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+                  // lenged文本
+                  opacity: 1,
+                  color: '#02A0F8',
+                },
+                data: dataList.map(item => item.trafficVolume),
+              },
+            ]
+          }
+        } else {
+          tableChartsOptions.yAxis[0].name = '车速'
+          dataList = this.tableData.slice(0,this.tableData.length - 1);
+          tableChartsOptions.xAxis.data = dataList.map(item => item.time.slice(item.time.length - 2,item.time.length))
+
+          if (this.queryForm.direction == '1'){
+            tableChartsOptions.series = [
+              {
+                name: "菏泽",
+                type: "line",
+                selectedMode: false,
+                itemStyle: {
+                  barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+                  // lenged文本
+                  opacity: 1,
+                  color: '#02A0F8',
+                },
+                data: dataList.map(item => item.avgSpeedHZ),
+              },
+              {
+                name: "济南",
+                type: "line",
+                selectedMode: false,
+                itemStyle: {
+                  // lenged文本
+                  barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+                  opacity: 1,
+                  color: '#E4BB53'
+                },
+                data: dataList.map(item => item.avgSpeedJN),
+              },
+            ]
+          } else {
+            tableChartsOptions.series = [
+              {
+                name: "车速",
+                type: "line",
+                selectedMode: false,
+                itemStyle: {
+                  barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+                  // lenged文本
+                  opacity: 1,
+                  color: '#02A0F8',
+                },
+                data: dataList.map(item => item.avgSpeed),
+              },
+            ]
+          }
+        }
+      }
+
+      this.myTableChart.setOption(tableChartsOptions,{ notMerge: true });
+    },
     visibleClose(){
       this.modelVisible = false
       if (this.myChart) {
@@ -244,7 +493,6 @@
     },
     formatTime(timestamp) {
       return moment(timestamp).format('HH:mm');
-
     },
 
     realTimeData(){
@@ -302,7 +550,7 @@
     },
     onExport(){
       const self = this;
-      this.$confirm("是否确认导出综合查询内容?", "警告", {
+      this.$confirm("是否确认导出站点查询内容?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -323,7 +571,7 @@
             let link = document.createElement("a");
             link.style.display = "none";
             link.href = url;
-            link.setAttribute("download", "综合查询.xlsx");
+            link.setAttribute("download", "站点查询.xlsx");
             document.body.appendChild(link);
             link.click();
             URL.revokeObjectURL(link.href); // 释放URL 对象
@@ -437,4 +685,56 @@
     display: flex;
   }
 
+
+  ::v-deep .el-table .el-table__header-wrapper th {
+    background-color: #064258 !important;
+    color: #00d1ff;
+    border-color: #064258 !important;
+    border: 0px !important;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+  }
+
+  ::v-deep .el-table {
+    border: 0px !important;
+    background-color: transparent;
+    font-size: 12px !important;
+  }
+
+  ::v-deep .el-table__body-wrapper {
+    background-color: #064258;
+    color: #fff;
+  }
+
+  ::v-deep .el-table .el-table__cell {
+    height: 47px;
+    padding-left: 15px;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+  }
+
+  ::v-deep .el-table tr:hover td {
+    background: #1b2528 !important;
+    color: #00d1ff;
+    height: 47px;
+  }
+
+  ::v-deep .el-table tr:nth-child(odd) td {
+    background-color: #13272f;
+    border: 0px !important;
+  }
+
+  ::v-deep .el-table tr:nth-child(even) td {
+    border: 0px !important;
+  }
+
+  ::v-deep .el-table tr {
+    background-color: #133242 !important;
+    border-collapse: 0;
+    border: 0px !important;
+    background-color: transparent !important;
+  }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/tableCharts.js

@@ -0,0 +1,84 @@
+import * as echarts from "echarts";
+
+let options = {
+  tooltip: {
+    show: true,
+    trigger: "axis",
+  },
+  grid: {
+    left: "15px",
+    right: "10px",
+    top: "50px",
+    bottom: "0px",
+    containLabel: true,
+  },
+  xAxis: {
+    data: [],
+    show: true,
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#fff",
+      },
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#2A6278",
+      },
+    },
+    axisLabel: {
+      align: "center",
+      rotate: "1",
+      margin: 10,
+      textStyle: {
+        fontSize: 12,
+        color: "#E5E7E8",
+      },
+    },
+  },
+  yAxis: [
+    {
+      name: "",
+      nameTextStyle: {
+        color: "#E5E7E8",
+        fomtSize: 10,
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#1C82C5",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#2A6278",
+          type: "solid",
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: "#E5E7E8",
+        textStyle: {
+          fontSize: 12,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  legend: {
+    itemHeight: 8,
+    itemWidth: 8,
+    top: "0",
+    right: "2%",
+    textStyle: {
+      color: "#fff",
+    },
+  },
+  series: [
+
+  ],
+};
+
+export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/data.js → ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/survey/data.js

@@ -3,10 +3,11 @@ export const searchFormList = [
   {
     label: "时间类型:",
     key: "type",
-    type: "select",
+    type: "RadioGroup",
     default: "day",
+    required: true,
+    isAlone: true,
     options: {
-      clearable: true,
       options: [
         {
           key: "day",
@@ -20,9 +21,45 @@ export const searchFormList = [
           key: "year",
           label: "年",
         },
+        {
+          key: "range",
+          label: "日期范围",
+        },
       ],
     },
   },
+  {
+    label: "日期范围:",
+    key: "timeRange",
+    type: "datePicker",
+    required: true,
+    default:[moment().format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
+    options: {
+      format: "yyyy-MM-dd",
+      type: "daterange",
+      valueFormat: "yyyy-MM-dd",
+      pickerOptions: {
+        /*disabledDate(time) {
+          return time.getTime() > Date.now()
+        },*/
+        onPick({ maxDate, minDate }){
+          //限制60天范围
+          if (minDate) {
+            const end = new Date(minDate.getTime() + 60 * 24 * 60 * 60 * 1000);
+            const start = new Date(minDate.getTime() - 60 * 24 * 60 * 60 * 1000);
+            this.disabledDate = (time) => {
+              return time.getTime() > end.getTime() || time.getTime() < start.getTime();
+            };
+          }
+        },
+      },
+    },
+    visible: (data) => {
+      if (data.type == "range") {
+        return true;
+      }
+    },
+  },
   {
     label: "日期:",
     key: "startTime",

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

@@ -37,6 +37,7 @@
           <template slot-scope="scope">
             <span v-if="scope.row.direction == '1'">菏泽</span>
             <span v-if="scope.row.direction == '3'">济南</span>
+            <span v-if="scope.row.direction == '2'">合计</span>
           </template>
         </ElTableColumn>
         <ElTableColumn v-for="item in columnList" :label="item.label" :prop="item.key" min-width="80" align="center" header-align="center" />
@@ -58,7 +59,7 @@ import InputSearch from "@screen/components/InputSearch/index.vue";
 import { searchFormList } from "./data";
 import { delay, exportFile, confirm } from "@screen/utils/common";
 import Button from "@screen/components/Buttons/Button.vue";
-import Form from "@screen/components/FormConfig";
+import Form from "@screen/components/FormConfig/index";
 import Dialog from "@screen/components/Dialog/index.vue";
 import {  mapState } from "vuex";
 import moment from 'moment';
@@ -67,7 +68,7 @@ import chartOptions from "./charts";
 
 
 export default {
-  name: 'survey',
+  name: 'Survey',
   components: {
     ButtonGradient,
     Pagination,
@@ -129,7 +130,12 @@ export default {
       this.$refs.searchComp.handleResetForm();
     },
     handleSearch(data) {
-      data.timestamp = data.startTime + " 00:00:01";
+      if (data.type == 'range'){
+        data.timestamp = data.timeRange[0] + " 00:00:01";
+        data.endTime = data.timeRange[1] + " 23:59:59";
+      } else {
+        data.timestamp = data.startTime + " 00:00:01";
+      }
       this.searchData = { ...data };
       this.initData();
     },
@@ -141,7 +147,7 @@ export default {
     handleExport() {
       exportFile({
         url: "/trafficSurveyData/dcTrafficSurveyData/export",
-        filename: "一类交调站",
+        filename: "综合查询",
         data: this.searchData,
       });
     },
@@ -180,14 +186,18 @@ export default {
       let legendData = []
       const stakeMarkMap = new Map();
       data.rowList.forEach(item => {
-        stakeMarkMap.set(item.stakeMark, item);
+        if (item.direction != '2'){
+          stakeMarkMap.set(item.stakeMark, item);
+        }
       });
       data.rowList.forEach(item => {
-        const stakeMark = item.stakeMark;
-        if (!stakeMarkMap[stakeMark]) {
-          stakeMarkMap[stakeMark] = [];
+        if (item.direction != '2') {
+          const stakeMark = item.stakeMark;
+          if (!stakeMarkMap[stakeMark]) {
+            stakeMarkMap[stakeMark] = [];
+          }
+          stakeMarkMap[stakeMark].push(item);
         }
-        stakeMarkMap[stakeMark].push(item);
       });
 
       stakeMarkMap.keys().forEach((stakeMark,index) =>{