From d605ad2e55a33cfc92316a189d5939269f39df21 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Wed, 7 Feb 2024 09:53:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=84=9F=E7=9F=A5=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E8=B6=8B=E5=8A=BF=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/eventQuery/index.vue           | 121 ++++++-----
 .../eventQuery/progressBar copy.vue           | 205 ++++++++++++++++++
 .../components/eventQuery/progressBar.vue     |  17 +-
 ruoyi-ui/vue.config.js                        |   2 +-
 4 files changed, 279 insertions(+), 66 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar copy.vue

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 e90bdd18..68281bdb 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
@@ -1,7 +1,7 @@
 <template>
   <div class='congestion'>
     <div class="board">
-      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectId" />
+      <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">
@@ -103,56 +103,57 @@ export default {
       dateTime: "2024",
       area: '1',
       dataList: [
-        {
-          title: "殷家林枢纽"
-        },
-        {
-          title: "大学城立交"
-        },
-        {
-          title: "长清立交"
-        },
-        {
-          title: "松竹枢纽"
-        },
-        {
-          title: "孝里立交"
-        },
-        {
-          title: "平阴立交"
-        },
-        {
-          title: "孔村枢纽"
-        },
-        {
-          title: "平阴南立交"
-        },
-        {
-          title: "魏雪枢纽"
-        },
-        {
-          title: "东平立交"
-        },
-        {
-          title: "东平湖枢纽"
-        },
-        {
-          title: "韩岗立交"
-        },
-        {
-          title: "梁山立交"
-        },
-        {
-          title: "鄄郓枢纽"
-        },
-        {
-          title: "嘉祥西立交"
-        },
-        {
-          title: "王官屯枢纽"
-        }
+        // {
+        //   title: "殷家林枢纽"
+        // },
+        // {
+        //   title: "大学城立交"
+        // },
+        // {
+        //   title: "长清立交"
+        // },
+        // {
+        //   title: "松竹枢纽"
+        // },
+        // {
+        //   title: "孝里立交"
+        // },
+        // {
+        //   title: "平阴立交"
+        // },
+        // {
+        //   title: "孔村枢纽"
+        // },
+        // {
+        //   title: "平阴南立交"
+        // },
+        // {
+        //   title: "魏雪枢纽"
+        // },
+        // {
+        //   title: "东平立交"
+        // },
+        // {
+        //   title: "东平湖枢纽"
+        // },
+        // {
+        //   title: "韩岗立交"
+        // },
+        // {
+        //   title: "梁山立交"
+        // },
+        // {
+        //   title: "鄄郓枢纽"
+        // },
+        // {
+        //   title: "嘉祥西立交"
+        // },
+        // {
+        //   title: "王官屯枢纽"
+        // }
       ],
       quarter: "",
+      selectIndex: 3,
       selectId: 3,
       year: "year",
       list: [
@@ -169,8 +170,10 @@ export default {
 
   },
   methods: {
-    selectProgress(item, index) {
-      this.selectId = index;
+    selectProgress(item, index,) {
+      console.log("))))))))))))", item.id, item, index)
+      this.selectIndex = index
+      this.selectId = item.id;
       this.searchQuery()
     },
     onReset() {
@@ -489,16 +492,16 @@ export default {
               this.dataList.push({
                 title: it.sectionName.split("-")[0],
                 id: it.id,
-
               });
             })
-            if (rows.length > 0) {
-              let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
-              this.dataList.push({
-                title: lastRoad,
-                id: rows[rows.length - 1].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();
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar copy.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar copy.vue
new file mode 100644
index 00000000..5d64d3c3
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar copy.vue	
@@ -0,0 +1,205 @@
+<template>
+    <div class='congestion'>
+        <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')"
+                v-for="(item, index) in dataList" :key="index">
+
+                <i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i>
+                <i class="before" @click="selectItem(index, +1, item)"></i>
+                <span></span>
+                <div>{{ item.title }}</div>
+
+            </div>
+        </div>
+    </div>
+</template>
+  
+<script>
+
+export default {
+    name: 'ProgressBar',
+    components: {
+    },
+    props: {
+        dataList: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        selectIndex: {
+            type: Number,
+            default: 1
+        }
+    },
+    data() {
+        return {
+            // selectIndex: 0,
+            selectLine: -1,
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        selectItem(index, num, item) {
+            this.selectIndex = index;
+            this.selectLine = num;
+            if (item)
+                this.$emit("selectItem", item, index);
+        }
+    },
+    mounted() {
+
+    },
+}
+</script>
+  
+<style lang='scss' scoped>
+.congestion {
+    width: 100%;
+    height: 35px;
+    display: inline-flex;
+    flex-direction: row;
+
+    >div {
+        position: relative;
+        width: 100%;
+        height: 35px;
+        display: inline-flex;
+        flex-direction: row;
+
+        >.item .after {
+            position: absolute;
+            display: inline-flex;
+            left: 0px;
+            top: -5px;
+            width: 45px !important;
+            height: 35px !important;
+            background-color: transparent;
+            cursor: pointer;
+        }
+
+        >.item .after::after {
+            content: "";
+            position: absolute;
+            display: inline-flex;
+            left: 0px;
+            top: 8px;
+            width: 45px !important;
+            height: 3px !important;
+            background-color: #C7C7C7;
+        }
+
+        >.item .before {
+            position: absolute;
+            display: inline-flex;
+            right: 0px;
+            top: -5px;
+            width: 45px;
+            height: 35px;
+            background-color: transparent;
+            cursor: pointer;
+        }
+
+        >.item .before::after {
+            content: "";
+            position: absolute;
+            display: inline-flex;
+            left: 0px;
+            top: 8px;
+            width: 45px !important;
+            height: 3px !important;
+            background-color: #C7C7C7;
+        }
+
+        .item.action .after::after {
+            background-color: #72FDC9;
+        }
+
+        .item.action.Aafter .after::after {
+            background-color: #C7C7C7 !important;
+        }
+
+        >.item.action.Aafter .before::after {
+            background-color: #72FDC9;
+        }
+
+        >.item.action.Abefore .after::after {
+            background-color: #72FDC9;
+        }
+
+        >.bef::before {
+            background-color: #72FDC9 !important;
+        }
+
+        >.aft::after {
+            background-color: #72FDC9 !important;
+        }
+
+        >.item.action span {
+            background-color: #72FDC9;
+            cursor: pointer;
+        }
+
+        >.item.action span::after {
+            border-color: #72FDC9;
+        }
+
+        >.action div {
+            color: #72FDC9 !important;
+        }
+
+
+        >.item {
+            position: relative;
+            width: 113px;
+            height: 35px;
+            display: inline-flex;
+            flex-direction: column;
+            justify-items: center;
+
+
+            >span {
+                position: absolute;
+                display: inline-flex;
+                width: 9px;
+                height: 9px;
+                background: #C7C7C7;
+                border-radius: 50%;
+                opacity: 1;
+                left: 53px;
+            }
+
+            >div {
+                position: relative;
+                display: inline-flex;
+                width: 100%;
+                align-items: center;
+                justify-content: center;
+                top: 5px;
+                margin-top: 10px;
+                color: #C7C7C7;
+            }
+
+            >span::after {
+                content: "";
+                position: absolute;
+                display: inline-flex;
+                width: 15px;
+                height: 15px;
+                border: 1px solid #C7C7C7;
+                border-radius: 50%;
+                opacity: 1;
+                top: -3.5px;
+                left: -3px;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
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 5d64d3c3..44f087ff 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
@@ -1,15 +1,20 @@
 <template>
     <div class='congestion'>
-        <div :style="{ width: dataList.length * 300 }">
-
+        <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>
 
-                <i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i>
-                <i class="before" @click="selectItem(index, +1, item)"></i>
                 <span></span>
                 <div>{{ item.title }}</div>
 
@@ -47,10 +52,10 @@ export default {
     },
     methods: {
         selectItem(index, num, item) {
-            this.selectIndex = index;
+            // this.selectIndex = index;
             this.selectLine = num;
             if (item)
-                this.$emit("selectItem", item, index);
+                this.$emit("selectItem", item, index,);
         }
     },
     mounted() {
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 435592ca..505b56e0 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -49,7 +49,7 @@ module.exports = {
         // target: `http://10.0.81.202:8087`, //现场后台
         // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
         // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
-        // target: `http://10.168.78.135:8087`,  //王钦
+        // target: `http://10.168.78.135:8087`, //王钦
         // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
         target: `http://10.168.68.42:8087`, //王思祥
         changeOrigin: true,