From 5d7927b317d7940207eda45e3ddf22dee8257eca Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Wed, 7 Feb 2024 11:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/eventQuery/index copy.vue      | 679 ++++++++++++++++++
 .../components/eventQuery/index.vue           | 226 +++---
 .../components/eventQuery/progressBar.vue     |   4 +-
 3 files changed, 768 insertions(+), 141 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index copy.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index copy.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index copy.vue
new file mode 100644
index 00000000..eb1975e4
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index copy.vue	
@@ -0,0 +1,679 @@
+<template>
+  <div class='congestion'>
+    <div class="board">
+      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
+      <div class="searchPanel">
+        <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option>
+          <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+        <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
+          <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+        <el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;"
+          :type="year" placeholder="请选择" />
+        <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime"
+          aria-placeholder="请选季度" />
+
+        <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>
+      </div>
+    </div>
+
+    <div class="body">
+      <div>
+        <WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
+        <div id="chart1" class="btnChart" />
+      </div>
+
+      <div>
+        <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
+        <div id="chart2" class="btnChart" />
+      </div>
+
+      <div>
+        <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
+        <div id="chart3" class="btnChart" />
+      </div>
+    </div>
+
+  </div>
+</template>
+  
+<script>
+
+import WgtTitle from '../../../widgets/title'
+import ProgressBar from './progressBar';
+import * as echarts from "echarts";
+import chart1 from "./assets/charts";
+import chart2 from "./assets/charts2";
+import chart3 from "./assets/charts3";
+import ElQuarterPicker from './ElQuarterPicker'
+import { getWarningTrend, getWarningSectionType, getSectionMarkNumber, getRoadSectionList } from '../../../../../../../api/event/perceiveEvent';
+
+const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+  ctx.beginPath();
+  ctx.fillStyle = gr;
+  ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
+  ctx.lineTo(width - radius + x, y);
+  ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
+  ctx.lineTo(width + x, height + y - radius);
+  ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
+  ctx.lineTo(radius + x, height + y);
+  ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
+  ctx.closePath();
+  //ctx.stroke();
+  ctx.fill()
+}
+
+export default {
+  name: 'EventQuery',
+  components: {
+    WgtTitle,
+    ProgressBar,
+    ElQuarterPicker
+  },
+  data() {
+    return {
+      yearOptions: [
+        {
+          value: 'year',
+          label: '年度'
+        }, {
+          value: 'month',
+          label: '月'
+        },
+        {
+          value: 'date',
+          label: '日'
+        },
+        {
+          value: 'quarter',
+          label: '季'
+        },],
+      areaOptions: [{
+        value: '1',
+        label: '济南方向'
+      }, {
+        value: '2',
+        label: '菏泽方向'
+      }],
+      dateTime: "2024",
+      area: '1',
+      dataList: [],
+      quarter: "",
+      selectIndex: 3,
+      selectId: 3,
+      year: "year",
+      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() {
+
+  },
+  methods: {
+    selectProgress(item, index,) {
+      console.log("))))))))))))", item.id, item, index)
+      this.selectIndex = index
+      this.selectId = item.id;
+      this.searchQuery()
+    },
+    onReset() {
+      this.area = '1';
+      this.year = "year";
+      this.dateTime = '2024';
+      this.selectId = 0;
+    },
+    searchQuery() {
+      let dateTime = this.dateTime;
+      if (dateTime == "") {
+        this.$message.error('没有选日期参数！');
+        return
+      }
+      var quarter = 0;
+      if (this.year == "year") {
+        dateTime = new Date(dateTime);
+        dateTime = dateTime.getFullYear() + "-01-01 00:00:00";
+        console.log(dateTime);
+      }
+      if (this.year == "month") {
+        dateTime = new Date(dateTime);
+        let m = dateTime.getMonth() + 1;
+        m = m < 10 ? "0" + m : m;
+        dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00";
+        console.log(dateTime);
+      }
+      if (this.year == "quarter") {
+        console.log(dateTime);
+        dateTime = new Date(dateTime);
+        let m = dateTime.getMonth() + 1;
+        if (m == 1) m = 1;
+        if (m == 2) m = 4;
+        if (m == 3) m = 7;
+        if (m == 4) m = 10;
+
+        quarter = m;
+        m = m < 10 ? "0" + m : m;
+        dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00";
+        console.log(dateTime);
+      }
+
+      if (this.year == "date") {
+        this.year = "day";
+        dateTime = new Date(dateTime);
+        let m = dateTime.getMonth() + 1;
+        m = m < 10 ? "0" + m : m;
+        let d = dateTime.getDate();
+        d = d < 10 ? "0" + d : d;
+        dateTime = dateTime.getFullYear() + "-" + m + "-" + d + " 00:00:00";
+      }
+
+      //感知事件趋势
+      getWarningTrend({
+        "type": this.year,
+        "sectionId": this.selectId,
+        "createTime": dateTime,
+        "direction": this.area,
+      }).then(res => {
+        if (res.code == 200) {
+          let data = res.data;
+          chart1.series[0].data = [];
+          if (data.length > 0) {
+            const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
+            let xData = [];
+            let numbers = [];
+
+            data.forEach(it => {
+              if (this.year == "year") {
+                xData.push(it.month + "月");
+              }
+              if (this.year == "month") {
+                xData.push(it.day.split("-")[2] + "日");
+              }
+              if (this.year == "day") {
+                xData.push(it.time.split(" ")[1] + "小时");
+              }
+              if (this.year == "quarter") {
+                xData.push(it.QUARTER);
+              }
+              if (it.number == maxObject.number) {
+                numbers.push({
+                  value: it.number,
+                  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
+                    },
+                    borderRadius: 6
+                  }
+                });
+              } else {
+                numbers.push({
+                  value: it.number,
+                  itemStyle: {
+                    borderRadius: 6
+                  }
+                });
+              }
+
+            })
+
+            chart1.xAxis.data = xData;
+            chart1.series[0].data = numbers;
+
+          }
+        }
+        this.myChart1.setOption(chart1);
+      });
+
+      //类型占比
+      getWarningSectionType({
+        "type": this.year,
+        "sectionId": this.selectId,
+        "createTime": dateTime,
+        "direction": this.area,
+      }).then(res => {
+        chart2.series[0].data = [];
+        if (res.code == 200) {
+          let types = [];
+          let numbers = [];
+
+          let data = res.data.warningTypeList;
+          let total = res.data.total;
+
+          data.forEach((it) => {
+            if (it.warningType == 1) {
+              types.push("交通拥堵");
+            }
+            if (it.warningType == 2) {
+              types.push("行人");
+            }
+            if (it.warningType == 3) {
+              types.push("非机动车");
+            }
+            if (it.warningType == 4) {
+              types.push("停车");
+            }
+            if (it.warningType == 5) {
+              types.push("倒车/逆行");
+            }
+            if (it.warningType == 6) {
+              types.push("烟火");
+            }
+            if (it.warningType == 7) {
+              types.push("撒落物");
+            }
+            if (it.warningType == 8) {
+              types.push("异常天气");
+            }
+            if (it.warningType == 9) {
+              types.push("护栏碰撞");
+            }
+
+            numbers.push({
+              name: types[types.length - 1],
+              value: it.number
+            });
+          })
+          chart2.legend.data = types;
+          chart2.legend.formatter = function (name) {
+            let total = 0
+            let target
+            for (let i = 0; i < numbers.length; i++) {
+              total += numbers[i].value;
+              if (types[i] == name) {
+                target = numbers[i].value;
+              }
+            }
+            var arr = [
+              '{a|' + name + '}',
+              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
+            ]
+            return arr.join('  ')
+          };
+
+          chart2.title.text = `{zb|${total}}`;
+          chart2.title.subtext = "类型分析";
+
+          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('mouseout', (params) => {
+            chart2.title.text = `{zb|${total}}`;
+            chart2.title.subtext = "类型分析";
+            this.myChart2.setOption(chart2);
+          })
+        }
+        this.myChart2.setOption(chart2);
+
+      })
+      //路段范围内桩号分布
+      getSectionMarkNumber({
+        "type": this.year,
+        "sectionId": this.selectId,
+        "createTime": dateTime,
+        "direction": this.area,
+      }).then(res => {
+        chart3.series[0].data = [];
+        chart3.series[1].data = [];
+        if (res.code == 200) {
+          let data = res.data;
+          if (this.year != "quarter") {
+            const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev));
+            let zhs = [];
+            let values1 = [];
+            let values2 = [];
+
+            data.forEach((it) => {
+              if (it.sectionNumber > 0) {
+                values2.push(it.sectionNumber);
+                zhs.push(it.stakeMarkId);
+
+                if (maxObject && maxObject.sectionNumber == it.sectionNumber) {
+                  values1.push({
+                    value: it.sectionNumber,
+                    itemStyle: {
+                      color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                          offset: 0, color: '#01D5BC' // 0% 处的颜色
+                        }, {
+                          offset: 1, color: '#003B4E' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      },
+                      borderRadius: 6
+                    },
+                  })
+                } else {
+                  values1.push({
+                    value: it.sectionNumber,
+                    itemStyle: {
+                      borderRadius: 6
+                    },
+                  })
+                }
+
+              }
+            })
+
+            chart3.xAxis.data = zhs;
+            chart3.series[0].data = values1;
+            chart3.series[1].data = values2;
+          } else {
+            let zhs = [];
+            let values = [];
+            data.forEach((dt, i) => {
+              dt.forEach((it) => {
+                if (it.number > 0) {
+                  if (quarter == 1 && it.QUARTER == "第一季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                  if (quarter == 4 && it.QUARTER == "第二季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                  if (quarter == 7 && it.QUARTER == "第三季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                  if (quarter == 10 && it.QUARTER == "第四季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                }
+
+              })
+            })
+            chart3.xAxis.data = zhs;
+            chart3.series[0].data = values;
+            chart3.series[1].data = values;
+          }
+        }
+
+        this.myChart3.setOption(chart3);
+      })
+      if (this.year == "day")
+        this.year = "date";
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+
+        getRoadSectionList().then(res => {
+          console.log(res);
+          if (res.code == 200) {
+            let rows = res.rows;
+            this.dataList = [];
+            rows.forEach(it => {
+              this.dataList.push({
+                title: it.sectionName.split("-")[0],
+                id: it.id,
+              });
+            })
+            console.log("dataList", this.dataList)
+            // if (rows.length > 0) {
+            //   let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
+            //   this.dataList.push({
+            //     title: lastRoad,
+            //     id: rows[rows.length - 1].id,
+            //   });
+            // }
+
+          }
+          this.searchQuery();
+
+
+        })
+
+        var myChart1 = echarts.init(document.getElementById('chart1'));
+        myChart1.setOption(chart1);
+        var myChart2 = echarts.init(document.getElementById('chart2'));
+        myChart2.setOption(chart2);
+        var myChart3 = echarts.init(document.getElementById('chart3'));
+        myChart3.setOption(chart3);
+
+
+        this.myChart1 = myChart1;
+        this.myChart2 = myChart2;
+        this.myChart3 = myChart3;
+
+        const domMap = document.getElementById("chart2");
+        let parentDiv = domMap.firstChild;
+        // 创建canvas
+        let canvas = document.createElement('canvas');
+        canvas.width = parentDiv.offsetWidth;
+        canvas.height = parentDiv.offsetHeight;
+        parentDiv.appendChild(canvas);
+        const context = canvas.getContext('2d');
+        context.lineWidth = 1; // 设置线段宽度
+
+        // 填充渐变颜色
+        // 颜色断点
+        // var gr = context.createLinearGradient(247, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 57, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(247, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 108, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(240, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 157, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(240, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 208, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(240, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 258, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(400, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 57, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(350, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 108, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(300, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 157, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(300, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 208, 140, 24, 12, gr);
+
+      });
+
+    });
+  },
+}
+</script>
+  
+<style lang='scss' scoped>
+.congestion {
+  width: 100%;
+  position: relative;
+
+  .body {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    font-size: 14px;
+
+    >div {
+      width: 33%;
+      height: 470px;
+      background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+      border: 1px solid;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    }
+
+    :nth-child(1) {
+      margin-right: 6px;
+    }
+
+    :nth-child(2) {
+      margin-left: 6px;
+      margin-right: 6px;
+    }
+
+    :nth-child(3) {
+      margin-left: 6px;
+    }
+
+    .btnChart {
+      height: 330px;
+      width: 90%;
+      margin: 95px auto 0;
+    }
+
+  }
+
+  .board {
+    height: 100px;
+    width: 100%;
+    position: absolute;
+    top: 30px;
+    padding: 18px 20px;
+    // 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;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+
+
+    .searchPanel {
+      display: flex;
+
+      align-items: center;
+      height: 40px;
+      width: 100%;
+      font-size: 14px;
+      margin-top: 10px;
+
+      div {
+        white-space: nowrap;
+        margin-right: 4px;
+      }
+
+      .inputZh {
+        width: 47px;
+
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+          }
+        }
+      }
+
+      .inputJl {
+        margin-left: 5px;
+        margin-right: 10px;
+      }
+
+      .selectRoad {
+        width: 100px;
+        border: 1px solid #00B3CC;
+
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+          }
+        }
+      }
+
+      .btnSearch {
+        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        margin-left: 10px;
+        border-color: transparent;
+      }
+
+      .btnReset {
+        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        ;
+        border-color: transparent;
+        color: white;
+      }
+    }
+
+  }
+}
+
+.charts {
+  height: 100px;
+  width: 100%;
+}
+</style>
+
+<style lang="scss">
+div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
+div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
+div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
+div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
+div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
+div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell {
+  color: #fff
+}
+</style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
index 68281bdb..500073ad 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
@@ -3,18 +3,17 @@
     <div class="board">
       <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
       <div class="searchPanel">
-        <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option>
-          <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
+        <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction" type="button" />
+        <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择">
+          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
-        <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
-          <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value">
+        <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>
         </el-select>
-        <el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;"
-          :type="year" placeholder="请选择" />
-        <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime"
-          aria-placeholder="请选季度" />
+        <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="请选择" />
 
         <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>
@@ -44,6 +43,7 @@
 <script>
 
 import WgtTitle from '../../../widgets/title'
+import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
 import ProgressBar from './progressBar';
 import * as echarts from "echarts";
 import chart1 from "./assets/charts";
@@ -73,14 +73,15 @@ export default {
   components: {
     WgtTitle,
     ProgressBar,
-    ElQuarterPicker
+    ElQuarterPicker,
+    RadioGroup
   },
   data() {
     return {
-      yearOptions: [
+      typeOptions: [
         {
           value: 'year',
-          label: '年度'
+          label: '年'
         }, {
           value: 'month',
           label: '月'
@@ -92,70 +93,32 @@ export default {
         {
           value: 'quarter',
           label: '季'
-        },],
-      areaOptions: [{
-        value: '1',
-        label: '济南方向'
-      }, {
-        value: '2',
-        label: '菏泽方向'
-      }],
-      dateTime: "2024",
-      area: '1',
-      dataList: [
-        // {
-        //   title: "殷家林枢纽"
-        // },
-        // {
-        //   title: "大学城立交"
-        // },
-        // {
-        //   title: "长清立交"
-        // },
-        // {
-        //   title: "松竹枢纽"
-        // },
-        // {
-        //   title: "孝里立交"
-        // },
-        // {
-        //   title: "平阴立交"
-        // },
-        // {
-        //   title: "孔村枢纽"
-        // },
-        // {
-        //   title: "平阴南立交"
-        // },
-        // {
-        //   title: "魏雪枢纽"
-        // },
-        // {
-        //   title: "东平立交"
-        // },
-        // {
-        //   title: "东平湖枢纽"
-        // },
-        // {
-        //   title: "韩岗立交"
-        // },
-        // {
-        //   title: "梁山立交"
-        // },
-        // {
-        //   title: "鄄郓枢纽"
-        // },
-        // {
-        //   title: "嘉祥西立交"
-        // },
-        // {
-        //   title: "王官屯枢纽"
-        // }
+        }],
+      quarter: '1',
+      quarterOptions: [
+        {
+          label: "第一季度",
+          value: "1"
+        },
+        {
+          label: "第二季度",
+          value: "2"
+        },
+        {
+          label: "第三季度",
+          value: "3"
+        },
+        {
+          label: "第四季度",
+          value: "4"
+        }
       ],
-      quarter: "",
+      dateTime: "2024",
+      direction: '1',
+      dataList: [],
       selectIndex: 3,
       selectId: 3,
-      year: "year",
+      type: "year",
       list: [
         { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
         { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
@@ -171,67 +134,42 @@ export default {
   },
   methods: {
     selectProgress(item, index,) {
-      console.log("))))))))))))", item.id, item, index)
       this.selectIndex = index
       this.selectId = item.id;
       this.searchQuery()
     },
     onReset() {
-      this.area = '1';
-      this.year = "year";
+      this.direction = '1';
+      this.type = "year";
       this.dateTime = '2024';
-      this.selectId = 0;
+      this.selectId = this.dataList[0].id;
+      this.selectIndex = 1
     },
     searchQuery() {
-      let dateTime = this.dateTime;
-      if (dateTime == "") {
-        this.$message.error('没有选日期参数！');
-        return
-      }
-      var quarter = 0;
-      if (this.year == "year") {
-        dateTime = new Date(dateTime);
-        dateTime = dateTime.getFullYear() + "-01-01 00:00:00";
-        console.log(dateTime);
-      }
-      if (this.year == "month") {
-        dateTime = new Date(dateTime);
-        let m = dateTime.getMonth() + 1;
-        m = m < 10 ? "0" + m : m;
-        dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00";
-        console.log(dateTime);
-      }
-      if (this.year == "quarter") {
-        console.log(dateTime);
-        dateTime = new Date(dateTime);
-        let m = dateTime.getMonth() + 1;
-        if (m == 1) m = 1;
-        if (m == 2) m = 4;
-        if (m == 3) m = 7;
-        if (m == 4) m = 10;
-
-        quarter = m;
-        m = m < 10 ? "0" + m : m;
-        dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00";
-        console.log(dateTime);
+      let startTime = "";
+      if (this.type == "quarter") {
+        let year = moment().year();
+        if (this.quarter == 1) {
+          startTime = `${year}-01-01 00:00:00`
+        } else if (this.quarter == 2) {
+          startTime = `${year}-04-01 00:00:00`
+        } else if (this.quarter == 3) {
+          startTime = `${year}-07-01 00:00:00`
+        } else {
+          startTime = `${year}-10-01 00:00:00`
+        }
+      } else {
+        startTime = moment(this.dateTime).format('YYYY-MM-DD HH:mm:ss')
       }
+      console.log("startTime", startTime)
 
-      if (this.year == "date") {
-        this.year = "day";
-        dateTime = new Date(dateTime);
-        let m = dateTime.getMonth() + 1;
-        m = m < 10 ? "0" + m : m;
-        let d = dateTime.getDate();
-        d = d < 10 ? "0" + d : d;
-        dateTime = dateTime.getFullYear() + "-" + m + "-" + d + " 00:00:00";
-      }
 
       //感知事件趋势
       getWarningTrend({
-        "type": this.year,
+        "type": this.type,
         "sectionId": this.selectId,
-        "createTime": dateTime,
-        "direction": this.area,
+        "createTime": startTime,
+        "direction": this.direction,
       }).then(res => {
         if (res.code == 200) {
           let data = res.data;
@@ -242,16 +180,16 @@ export default {
             let numbers = [];
 
             data.forEach(it => {
-              if (this.year == "year") {
+              if (this.type == "year") {
                 xData.push(it.month + "月");
               }
-              if (this.year == "month") {
+              if (this.type == "month") {
                 xData.push(it.day.split("-")[2] + "日");
               }
-              if (this.year == "day") {
+              if (this.type == "day") {
                 xData.push(it.time.split(" ")[1] + "小时");
               }
-              if (this.year == "quarter") {
+              if (this.type == "quarter") {
                 xData.push(it.QUARTER);
               }
               if (it.number == maxObject.number) {
@@ -295,10 +233,10 @@ export default {
 
       //类型占比
       getWarningSectionType({
-        "type": this.year,
+        "type": this.type,
         "sectionId": this.selectId,
-        "createTime": dateTime,
-        "direction": this.area,
+        "createTime": startTime,
+        "direction": this.direction,
       }).then(res => {
         chart2.series[0].data = [];
         if (res.code == 200) {
@@ -386,16 +324,16 @@ export default {
       })
       //路段范围内桩号分布
       getSectionMarkNumber({
-        "type": this.year,
+        "type": this.type,
         "sectionId": this.selectId,
-        "createTime": dateTime,
-        "direction": this.area,
+        "createTime": startTime,
+        "direction": this.direction,
       }).then(res => {
         chart3.series[0].data = [];
         chart3.series[1].data = [];
         if (res.code == 200) {
           let data = res.data;
-          if (this.year != "quarter") {
+          if (this.type != "quarter") {
             const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev));
             let zhs = [];
             let values1 = [];
@@ -447,19 +385,19 @@ export default {
             data.forEach((dt, i) => {
               dt.forEach((it) => {
                 if (it.number > 0) {
-                  if (quarter == 1 && it.QUARTER == "第一季度") {
+                  if (it.QUARTER == "第一季度") {
                     values[i] = it.number;
                     zhs[i] = it.stakeMark;
                   }
-                  if (quarter == 4 && it.QUARTER == "第二季度") {
+                  if (it.QUARTER == "第二季度") {
                     values[i] = it.number;
                     zhs[i] = it.stakeMark;
                   }
-                  if (quarter == 7 && it.QUARTER == "第三季度") {
+                  if (it.QUARTER == "第三季度") {
                     values[i] = it.number;
                     zhs[i] = it.stakeMark;
                   }
-                  if (quarter == 10 && it.QUARTER == "第四季度") {
+                  if (it.QUARTER == "第四季度") {
                     values[i] = it.number;
                     zhs[i] = it.stakeMark;
                   }
@@ -475,8 +413,8 @@ export default {
 
         this.myChart3.setOption(chart3);
       })
-      if (this.year == "day")
-        this.year = "date";
+      if (this.type == "day")
+        this.type = "date";
     },
   },
   mounted() {
@@ -637,7 +575,7 @@ export default {
     height: 100px;
     width: 100%;
     position: absolute;
-    top: 30px;
+    top: 40px;
     padding: 18px 20px;
     // background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
@@ -657,7 +595,7 @@ export default {
       height: 40px;
       width: 100%;
       font-size: 14px;
-      margin-top: 10px;
+      margin-top: 15px;
 
       div {
         white-space: nowrap;
@@ -692,6 +630,18 @@ export default {
         }
       }
 
+      .selectRoad-medium {
+        width: 120px;
+        border: 1px solid #00B3CC;
+
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+          }
+        }
+      }
+
       .btnSearch {
         background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
         margin-left: 10px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
index 44f087ff..5a91de2e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
@@ -2,16 +2,13 @@
     <div class='congestion'>
         <div>
             <!-- :style="{ width: dataList.length * 300 }" -->
-            <!-- {{ selectIndex }}-{{ selectLine }} -->
             <div :class="selectIndex == index ?
                 (selectLine < 1 ? 'item action Abefore' : 'item action Aafter') :
                 (selectIndex + selectLine == index ?
                     (selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')"
                 v-for="(item, index) in dataList" :key="index">
-                <!-- {{ index }} -->
                 <i class="after" v-if="index === 0"></i>
                 <i class="after" v-else @click="selectItem(index, -1, dataList[index - 1])"></i>
-                <!-- {{ index }} -->
                 <i class="before" v-if="index === dataList.length - 1"></i>
                 <i class="before" v-else @click="selectItem(index, +1, item)"></i>
 
@@ -181,6 +178,7 @@ export default {
             }
 
             >div {
+                font-size: 14px;
                 position: relative;
                 display: inline-flex;
                 width: 100%;