路段重置时，定位不对

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

@@ -1,12 +1,13 @@
 <template>
   <div class="congestion">
     <div class="board">
-      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
+      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex"
+        :reset="reset" />
       <div class="searchPanel">
         <RadioGroup :options="[
-          { key: '1', label: '菏泽' },
-          { key: '3', label: '济南' },
-        ]" v-model="direction" type="button" />
+        { key: '1', label: '菏泽' },
+        { key: '3', label: '济南' },
+      ]" v-model="direction" type="button" />
         <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择" @change="changeType">
           <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
@@ -18,15 +19,16 @@
         </el-select>
         <el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width: 140px"
           :type="type == 'date'
-            ? 'date'
-            : type == 'month'
-              ? 'month'
-              : type == 'year'
-                ? 'year'
-                : ''
-            " placeholder="请选择" :clearable="false" />
-
-        <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button>
+        ? 'date'
+        : type == 'month'
+          ? 'month'
+          : type == 'year'
+            ? 'year'
+            : ''
+        " placeholder="请选择" :clearable="false" />
+
+        <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
+          icon="el-icon-search">查询</el-button>
         <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
       </div>
     </div>
@@ -151,6 +153,7 @@ export default {
       dataList: [],
       selectIndex: 2,
       selectId: 2,
+      reset: false,
       type: "year",
       chart1List: [],
       chart2List: [],
@@ -206,16 +209,17 @@ export default {
     selectProgress(item, index) {
       this.selectIndex = index;
       this.selectId = item.id;
+      this.reset = false;
       this.searchQuery();
     },
     onReset() {
       this.direction = "1";
       this.type = "year";
       this.dateTime = "2024";
-      this.selectId = this.dataList[0].id;
       this.selectId = 2;
       this.selectIndex = 2;
-      this.searchQuery()
+      this.reset = true;
+      this.searchQuery();
     },
     searchQuery() {
       let startTime = "";

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

@@ -3,9 +3,9 @@
         <div>
             <!-- :style="{ width: dataList.length * 300 }" -->
             <div :class="selectIndex == index ?
-                (selectLine < 1 ? 'item action Abefore' : 'item action Aafter') :
-                (selectIndex + selectLine == index ?
-                    (selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')"
+                    (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">
                 <i class="after" v-if="index === 0"></i>
                 <i class="after" v-else @click="selectItem(index, -1, dataList[index - 1])"></i>
@@ -19,7 +19,7 @@
         </div>
     </div>
 </template>
-  
+
 <script>
 
 export default {
@@ -36,6 +36,10 @@ export default {
         selectIndex: {
             type: Number,
             default: 1
+        },
+        reset: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -46,6 +50,16 @@ export default {
     },
     created() {
 
+    },
+    watch: {
+        reset: {
+            handler(newV) {
+                if (newV) {
+                    this.selectLine = -1;
+                }
+            },
+            immediate: true,
+        },
     },
     methods: {
         selectItem(index, num, item) {
@@ -60,7 +74,7 @@ export default {
     },
 }
 </script>
-  
+
 <style lang='scss' scoped>
 .congestion {
     width: 100%;
@@ -204,5 +218,4 @@ export default {
         }
     }
 }
-</style>
-  
+</style>