From b79f676b783dfd61775472775fd0d87ce03fdb9a Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Fri, 26 Apr 2024 17:19:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=8B=93=E6=89=91=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CrowdnessIndicatorRankings/index.vue      |   9 +-
 .../components/TemperatureTrend/index.vue     |   1 -
 .../pages/perception/topology/index.vue       | 343 ++++++++++++------
 3 files changed, 228 insertions(+), 125 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
index 3d429934..f19ba0b8 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
@@ -202,9 +202,12 @@ export default {
     }
   }
 }
-.weather span {
-  margin-right: 20px;
-  display: inline-block;
+.weather {
+  width: 435px;
+  span {
+    margin-right: 20px;
+    display: inline-block;
+  }
 }
 .statistics {
   width: 300px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
index f4a03ac2..194beca0 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
@@ -31,7 +31,6 @@ export default {
       handler(data) {
         let newData = [];
         // let xData = [];
-        console.log("data77777", data);
         data.forEach((item) => {
           newData.push(item.avgTemperature);
           // xData.push(item.timeSlot);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue
index e2d9baf0..48dc6739 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue
@@ -1,29 +1,39 @@
 <template>
-  <div class='topolog'>
+  <div class="topolog">
     <div class="list">
-      <div v-for="(item, index) in list" @click="listClick(index)"
-        :class="'listItem  keep-ratio ' + (selIndex === index ? 'listItemAction' : '')">
+      <div
+        v-for="(item, index) in list"
+        @click="listClick(index)"
+        :class="
+          'listItem  keep-ratio ' + (selIndex === index ? 'listItemAction' : '')
+        "
+      >
         {{ item.name }}
       </div>
     </div>
     <div class="card">
-      <div class="top ">
+      <div class="top">
         <div class="t-left">{{ name }}</div>
-        <div style="display: flex;">
-          <div class="t-right" v-for="(item,index) in card">
-            交换机总数 <template v-if="card.length>1">({{ index+1 }})</template>：<span class="len">{{ item.total }}</span>个
+        <div style="display: flex">
+          <div class="t-right" v-for="(item, index) in card">
+            交换机总数
+            <template v-if="card.length > 1">({{ index + 1 }})</template>：<span
+              class="len"
+              >{{ item.total }}</span
+            >个
             <div class="space"></div>
-            故障数：<span class="len err">{{ item.error }}</span>个
+            故障数：<span class="len err">{{ item.error }}</span
+            >个
           </div>
+        </div>
       </div>
-      </div>
-      <div class="content" v-if="selIndex===0">
+      <div class="content" v-if="selIndex === 0">
         <div class="c c-border">
           <div class="arrow-panel-line">
             <div class="arrowdow"></div>
             <div class="arrowdow"></div>
           </div>
-          <div class="arrow-panel" style="margin-top: -5px;">
+          <div class="arrow-panel" style="margin-top: -5px">
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
@@ -31,41 +41,61 @@
           </div>
           <div v-for="(item, index) in topo" v-if="index < 5" class="switch">
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div>
-            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div>
+            <div
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
+            ></div>
+            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">
+              {{ item.switchName }}
+            </div>
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div>
-            <img v-if="item.netWorkStatus" src="./switch1.png">
-            <img v-else src="./switch0.png">
-            <div :class="'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')">sw</div>
+            <div
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
+              style="margin-top: -35px"
+            ></div>
+            <img v-if="item.netWorkStatus" src="./switch1.png" />
+            <img v-else src="./switch0.png" />
+            <div
+              :class="
+                'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')
+              "
+            ></div>
             <div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')">
               <div>桩号：{{ item.stakeMark }}</div>
               <div>IP：{{ item.switchIp }}</div>
             </div>
           </div>
-          <div class="arrow-panel" style="margin-top: 292px;">
+          <div class="arrow-panel" style="margin-top: 308px">
             <div class="arrow arrowrig"></div>
             <div class="arrow arrowrig"></div>
             <div class="arrow arrowrig"></div>
             <div class="arrow arrowrig"></div>
           </div>
 
-          <div class="arrow-panel-line" style="margin-left: 100.1%;">
+          <div class="arrow-panel-line" style="margin-left: 100.1%">
             <div class="arrowdow arrowtop"></div>
             <div class="arrowdow arrowtop"></div>
           </div>
         </div>
-        <div class="c " style="margin-top: -5px;">
+        <div class="c" style="margin-top: -5px">
           <div v-for="(item, index) in topo" v-if="index >= 5" class="switch">
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div>
-            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div>
+            <div
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
+            ></div>
+            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">
+              {{ item.switchName }}
+            </div>
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div>
+            <div
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
+              style="margin-top: -35px"
+            ></div>
             <img class="imgsw" v-if="item.netWorkStatus" src="./switch1.png" />
-            <img  class="imgsw" v-else src="./switch0.png" />
-            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"
-              style="padding:0px 50px;margin-top: -5px;border:0px">sw</div>
+            <img class="imgsw" v-else src="./switch0.png" />
+            <div
+              :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"
+              style="padding: 0px 50px; margin-top: -5px; border: 0px"
+            ></div>
             <div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')">
               <div>桩号：{{ item.stakeMark }}</div>
               <div>IP：{{ item.switchIp }}</div>
@@ -74,50 +104,80 @@
         </div>
       </div>
       <div class="content" v-else>
-        <div class="c c-border" style="margin-bottom: 30px;" v-for="(item,index) of topo">
-        
+        <div
+          class="c c-border"
+          style="margin-bottom: 30px"
+          v-for="(item, index) of topo"
+        >
           <div class="arrow-panel-line">
             <div class="arrowdow"></div>
             <div class="arrowdow"></div>
           </div>
-          <div class="arrow-panel" style="margin-top: -5px;">
+          <div class="arrow-panel" style="margin-top: -5px">
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
           </div>
           <div class="cscorll">
-            <div :style="' height: 290px;width:'+item.length*200+'px;'">
-              <div v-for="(itm, idx) in item" class="switchScro">
-                <div class="switch">
-                  <div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"></div>
-                  <div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div>
-                  <img class="imgsw" v-if="itm.netWorkStatus" src="./switch1.png" />
-                  <img  class="imgsw" v-else src="./switch0.png" />
-                  <div :class="'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')">{{itm.switchName}}({{index+1}})</div>
-                  <div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')" style="height: 40px"></div>
-                  <div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div>
-                  <div :class="'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')">
-                    <div v-for="(idv,idvx) in itm.dcDeviceList">
-                      <div class="device-item">
-                        <img src="./t10.png" />
-                        <div>{{ idv.deviceName }}</div>
-                      </div>
-                    </div>
+            <!-- width:' + item.length * 200 + 'px;' -->
+            <!-- <div style="height: 290px"> -->
+            <div v-for="(itm, idx) in item" class="switchScro">
+              <div class="switch">
+                <div
+                  :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"
+                ></div>
+                <div
+                  :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')"
+                  style="margin-top: -30px"
+                ></div>
+                <img
+                  class="imgsw"
+                  v-if="itm.netWorkStatus"
+                  src="./switch1.png"
+                />
+                <img class="imgsw" v-else src="./switch0.png" />
+                <div
+                  :class="
+                    'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')
+                  "
+                >
+                  {{ itm.switchName }}({{ index + 1 }})
+                </div>
+                <div
+                  :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"
+                  style="height: 40px"
+                ></div>
+                <div
+                  :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')"
+                  style="margin-top: -30px"
+                ></div>
+                <div
+                  :class="
+                    'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')
+                  "
+                >
+                  <div
+                    v-for="(idv, idvx) in itm.dcDeviceList"
+                    class="device-item"
+                  >
+                    <img src="./t10.png" />
+                    <div class="device-item-text">{{ idv.deviceName }}</div>
                   </div>
                 </div>
               </div>
             </div>
+            <!-- </div> -->
           </div>
 
-          <div class="arrow-panel" style="margin-top: 292px;">
+          <div class="arrow-panel" style="margin-top: 308px">
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
           </div>
 
-          <div class="arrow-panel-line" style="margin-left: 100.1%;">
+          <div class="arrow-panel-line" style="margin-left: 100.1%">
             <div class="arrowdow"></div>
             <div class="arrowdow"></div>
           </div>
@@ -128,90 +188,90 @@
 </template>
 
 <script>
-import request from '@/utils/request'
+import request from "@/utils/request";
 import { Message } from "element-ui";
-const enum_device_type = [
-  {type: "1", label: "枪机",}
-]
+const enum_device_type = [{ type: "1", label: "枪机" }];
 export default {
-  name: 'InDevelopment',
-  components: {
-  },
+  name: "InDevelopment",
+  components: {},
 
   data() {
     return {
       list: [],
       selIndex: 0,
-      name: '',
-      card: [{total: 0, error: 0 }],
-      topo: []
-    }
+      name: "",
+      card: [{ total: 0, error: 0 }],
+      topo: [],
+    };
   },
   mounted() {
-    this.bind()
+    this.bind();
     request({
-    url: "/type/list",
-    method: "get",
-  }).then(res=>{
-    console.log(res)
-  });
+      url: "/type/list",
+      method: "get",
+    }).then((res) => {
+      console.log(res);
+    });
   },
   methods: {
     bind() {
       request({
-        url: '/business/switch/list',
-        method: 'get'
-      }).then(result => {
+        url: "/business/switch/list",
+        method: "get",
+      }).then((result) => {
         if (result.code != 200) return Message.error(result?.msg);
         this.map = result.data[0];
-        let list = [{ name: this.map.switchName }]
-        this.map.children.forEach(e => {
-        list.push({ name: e.switchName })
-      });
+        let list = [{ name: this.map.switchName }];
+        this.map.children.forEach((e) => {
+          list.push({ name: e.switchName });
+        });
         this.list = list;
         this.listClick();
-      })
+      });
     },
     listClick(e = 0) {
       this.selIndex = e;
       if (e === 0) {
-        this.name = this.map.switchName,
-        this.card = [{
-          total: this.map.children.length,
-          error: this.map.children.filter(x => x.netWorkStatus === 0).length
-        }]
-        this.topo = this.map.children
+        (this.name = this.map.switchName),
+          (this.card = [
+            {
+              total: this.map.children.length,
+              error: this.map.children.filter((x) => x.netWorkStatus === 0)
+                .length,
+            },
+          ]);
+        this.topo = this.map.children;
       } else {
-        this.name = this.map.children[e-1].switchName;
+        this.name = this.map.children[e - 1].switchName;
         let cards = [];
         let topo = [];
-        const list = this.map.children[e-1].children;
-        
-        const list1 = list.filter(x=>x.ringNetWork === 1)
-        if(list1){
+        const list = this.map.children[e - 1].children;
+
+        const list1 = list.filter((x) => x.ringNetWork === 1);
+        if (list1) {
           cards.push({
             total: list1.length,
-            error: list1.filter(x => x.netWorkStatus === 0).length
-          })
-          topo.push(list1)
+            error: list1.filter((x) => x.netWorkStatus === 0).length,
+          });
+          topo.push(list1);
         }
-        const list2 = list.filter(x=>x.ringNetWork === 2)
-        if(list2 && list2.length > 0){
+        const list2 = list.filter((x) => x.ringNetWork === 2);
+        if (list2 && list2.length > 0) {
           cards.push({
             total: list2.length,
-            error: list2.filter(x => x.netWorkStatus === 0).length
-          })
-          topo.push(list2)
+            error: list2.filter((x) => x.netWorkStatus === 0).length,
+          });
+          topo.push(list2);
         }
         this.topo = topo;
         this.card = cards;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .topolog {
   width: 100%;
   height: 100%;
@@ -278,14 +338,14 @@ export default {
       padding-bottom: 10px;
       margin-left: 20px;
       .len {
-        color: #12F7B2;
+        color: #12f7b2;
         font-size: 26px;
         font-weight: bold;
         margin: 0px 10px;
       }
 
       .err {
-        color: #FF5935;
+        color: #ff5935;
       }
 
       .space {
@@ -304,12 +364,15 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  height: 300px;
+  height: 315px;
 }
 
 .c-border {
   border: 2px solid #34d3eb;
   position: relative;
+  // width: 98%;
+  // margin: auto;
+  // overflow: auto;
 }
 
 .arrow-panel {
@@ -357,14 +420,19 @@ export default {
     background: linear-gradient(to bottom, #34d3eb, #ffffff00);
   }
 }
-.cscorll{
-  width: 80vw;
-  height: 290px;
-  overflow-x: auto;
+.cscorll {
+  // width: 80vw;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  height: 310px;
+  padding: 0 20px;
   overflow-y: hidden;
+  overflow-x: auto;
   z-index: 9999;
 }
-.switchScro{
+.switchScro {
   height: 300px;
   width: 200px;
   margin-right: 20px;
@@ -383,7 +451,7 @@ export default {
   }
 
   .liner {
-    background-color: #FF5935;
+    background-color: #ff5935;
   }
 
   .arrowdown {
@@ -395,25 +463,38 @@ export default {
   }
 
   .arrowr {
-    background: linear-gradient(to top, #FF5935, #ffffff00);
+    background: linear-gradient(to top, #ff5935, #ffffff00);
   }
 
   .c-name {
-    background: linear-gradient(270deg, rgba(61, 231, 253, 0) 0%, rgba(61, 231, 253, 0.7) 51%, rgba(61, 231, 253, 0) 100%);
+    background: linear-gradient(
+      270deg,
+      rgba(61, 231, 253, 0) 0%,
+      rgba(61, 231, 253, 0.7) 51%,
+      rgba(61, 231, 253, 0) 100%
+    );
     border-radius: 4px;
     padding: 10px 30px;
     margin-top: 5px;
     border: 1px solid #34d3eb;
   }
-  .c-namesw{
-    padding:0px 50px;
+  .c-namesw {
+    padding: 0px 50px;
     margin-top: -5px;
     font-size: 14px;
-    border:0px !important;
+    border: 0px !important;
   }
   .c-namer {
-    background: linear-gradient(270deg, rgba(255, 90, 54, 0) 0%, rgba(255, 90, 54, 0.8) 51%, rgba(255, 90, 54, 0) 100%);
-    border: 1px solid #FF5935;
+    background: linear-gradient(
+      270deg,
+      rgba(255, 90, 54, 0) 0%,
+      rgba(255, 90, 54, 0.8) 51%,
+      rgba(255, 90, 54, 0) 100%
+    );
+    border: 1px solid #ff5935;
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
   }
 
   .c-desc {
@@ -425,7 +506,7 @@ export default {
   }
 
   .c-descr {
-    background: linear-gradient(to bottom, #102229 5%, #FF5935);
+    background: linear-gradient(to bottom, #102229 5%, #ff5935);
   }
 
   img {
@@ -434,19 +515,39 @@ export default {
     margin-top: 10px;
   }
 }
-.device-list{
+.device-list {
   border: 1px dashed #34d3eb;
-  height: 90px;
+  min-height: 110px;
   min-width: 160px;
   margin-top: 10px;
+  overflow: auto;
 }
-.device-list-r{
-  border-color: #FF5935;
+.device-list-r {
+  border-color: #ff5935;
+  // display: flex;
+  // flex-wrap: wrap;
+  // justify-content: space-around;
+  display: grid;
+  grid-template-rows: repeat(2, minmax(30px, auto));
+  grid-auto-columns: 1fr;
+  grid-gap: 0px;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  // overflow: hidden;
+  padding: 10px;
 }
-.device-item{
-  image{
-    width: 30px;
-    height: 30px;
+.device-item {
+  overflow: hidden;
+  img {
+    margin: 0;
+    width: 25px;
+    height: 25px;
+  }
+  .device-item-text {
+    width: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
   }
 }
 </style>