感知事件监测统计

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

@@ -1,126 +1,53 @@
 <template>
   <div class="congestion">
     <div class="board">
-      <ProgressBar
+      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
-        class="keep-ratio"
-        @selectItem="selectProgress"
-        :dataList="dataList"
-        :selectIndex="selectIndex"
-      />
       <div class="searchPanel">
-        <RadioGroup
+        <RadioGroup :options="[
-          :options="[
+          { key: '1', label: '菏泽' },
-            { key: '1', label: '菏泽' },
+          { key: '3', label: '济南' },
-            { key: '3', label: '济南' },
+        ]" v-model="direction" type="button" />
-          ]"
+        <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择" @change="changeType">
-          v-model="direction"
+          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
-          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
+        <el-select v-model="quarter" size="medium" v-if="type == 'quarter'" class="selectRoad-medium" placeholder="请选择">
-          v-model="quarter"
+          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"
-          size="medium"
+            style="width: 140px">
-          v-if="type == 'quarter'"
-          class="selectRoad-medium"
-          placeholder="请选择"
-        >
-          <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
+        <el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width: 140px"
-          size="mini"
+          :type="type == 'date'
-          v-if="type != 'quarter'"
-          class="selectRoad"
-          v-model="dateTime"
-          style="width: 140px"
-          :type="
-            type == 'date'
               ? 'date'
               : type == 'month'
-              ? 'month'
+                ? 'month'
-              : type == 'year'
+                : type == 'year'
-              ? 'year'
+                  ? 'year'
-              : ''
+                  : ''
-          "
+            " placeholder="请选择" :clearable="false" />
-          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>
-
-        <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>
-        <Empty
+        <Empty v-show="!chart1List || chart1List.length <= 0" text="暂无数据..."></Empty>
-          v-show="!chart1List || chart1List.length <= 0"
+        <div v-show="chart1List || chart1List.length > 0" id="chart1" class="btnChart" />
-          text="暂无数据..."
-        ></Empty>
-        <div
-          v-show="chart1List || chart1List.length > 0"
-          id="chart1"
-          class="btnChart"
-        />
       </div>
 
       <div>
         <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
-        <Empty
+        <Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..."></Empty>
-          v-show="!chart2List || chart2List.length <= 0"
+        <div v-show="chart2List || chart2List.length > 0" id="chart2" class="btnChart" />
-          text="暂无数据..."
-        ></Empty>
-        <div
-          v-show="chart2List || chart2List.length > 0"
-          id="chart2"
-          class="btnChart"
-        />
       </div>
 
       <div>
         <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
-        <Empty
+        <Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..."></Empty>
-          v-show="!chart3List || chart3List.length <= 0"
+        <div v-show="chart3List || chart3List.length > 0" id="chart3" class="btnChart" />
-          text="暂无数据..."
-        ></Empty>
-        <div
-          v-show="chart3List || chart3List.length > 0"
-          id="chart3"
-          class="btnChart"
-        />
       </div>
     </div>
   </div>
@@ -135,6 +62,7 @@ import chart1 from "./assets/charts";
 import chart2 from "./assets/charts2";
 import chart3 from "./assets/charts3";
 import ElQuarterPicker from "./ElQuarterPicker";
+import moment from 'moment';
 import {
   getWarningTrend,
   getWarningSectionType,
@@ -220,8 +148,8 @@ export default {
       dateTime: "2024",
       direction: "1",
       dataList: [],
-      selectIndex: 1,
+      selectIndex: 2,
-      selectId: 1,
+      selectId: 2,
       type: "year",
       chart1List: [],
       chart2List: [],
@@ -272,7 +200,7 @@ export default {
       ],
     };
   },
-  created() {},
+  created() { },
   methods: {
     selectProgress(item, index) {
       this.selectIndex = index;
@@ -284,7 +212,9 @@ export default {
       this.type = "year";
       this.dateTime = "2024";
       this.selectId = this.dataList[0].id;
-      this.selectIndex = 1;
+      this.selectId = 2;
+      this.selectIndex = 2;
+      this.searchQuery()
     },
     searchQuery() {
       let startTime = "";
@@ -541,6 +471,11 @@ export default {
       // if (this.type == "day")
       //   this.type = "date";
     },
+    changeType() {
+      if (this.type == 'date') {
+        this.dateTime = moment(new Date()).format("YYYY-MM-DD")
+      }
+    }
   },
   mounted() {
     setTimeout(() => {
@@ -660,21 +595,16 @@ export default {
     justify-content: space-evenly;
     font-size: 14px;
 
-    > div {
+    >div {
       width: 33%;
       height: 470px;
-      background: linear-gradient(
+      background: linear-gradient(180deg,
-        180deg,
+          rgba(6, 66, 88, 0.2) 0%,
-        rgba(6, 66, 88, 0.2) 0%,
+          #064258 100%);
-        #064258 100%
-      );
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(360deg,
-          360deg,
           rgba(55, 231, 255, 0.3),
-          rgba(55, 231, 255, 0)
+          rgba(55, 231, 255, 0)) 1 1;
-        )
-        1 1;
     }
 
     :nth-child(1) {
@@ -790,54 +720,12 @@ export default {
 </style>
 
 <style lang="scss">
-div.el-popover:has(> .el-date-picker)
+div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-  div
+div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
-  .el-picker-panel__body
+div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-  .el-picker-panel__content
+div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
-  table
+div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-  tr
+div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell {
-  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>