iot也买你搭建

src/views/IOTDataAnalysis/components/IOTLeft.vue

@@ -310,9 +310,12 @@ const getCount = (totalArr, num) => {
           margin-left: 13px;
           .el-progress-bar__outer {
             background-color: rgba(35, 64, 95, 0.21);
+            height: 6px!important;
           }
           .el-progress-bar__inner {
-            background-color: rgba(60, 139, 219, 1);
+            // background-color: rgba(60, 139, 219, 1);
+            height: 6px;
+            background: linear-gradient(to right, rgba(60, 139, 219, 1), rgba(60, 139, 219, 0.5));
           }
         }
       }

src/views/IOTDataAnalysis/components/IOTToolDialog.vue

@@ -0,0 +1,55 @@
+<template>
+<div class="iot-tool-dialog">
+  <div class="iot-tool-text">
+    <div class="iot-tool-item">
+      <span class="name">设备名称</span>
+      <span>087383289
+      </span>
+    </div>
+    <div class="iot-tool-item">
+      <span class="name">状态</span>
+      <span>087383289
+      </span>
+    </div>
+    <div class="iot-tool-item">
+      <span class="name">数值</span>
+      <span>087383289
+      </span>
+    </div>
+  </div>
+</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.iot-tool-dialog{
+  box-sizing: border-box;
+  width: 350px;
+  height: 342px;
+  z-index: 99;
+  background-image: url('@/assets/imgs/IOTImage/position-bg.png');
+  background-size: 100% 100%;
+  position: fixed;
+  right: 500px;
+  padding: 0 33px;
+  padding-top: 181px;
+  top: 200px;
+  .iot-tool-text{
+    background-image: url('@/assets/imgs/IOTImage/list-bg.png');
+    background-size: 100% 100%;
+    width: 284px;
+    height: 120px;
+    .iot-tool-item{
+      color: #E5F0FF;
+      font-size: 16px;
+      font-style: italic;
+      padding: 0 20px;
+      height: 33%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+</style>

src/views/IOTDataAnalysis/index.vue

@@ -4,6 +4,7 @@
     <IOTLeft/>
     <IOTRight/>
     <IOTLIstDialog/>
+    <IOTToolDialog/>
     <div class="gis-map" id="gisMap" ref="gisMapRef">
         <Map/>
     </div>
@@ -16,6 +17,7 @@ import IOTHeader from './components/IOTHeader.vue'
 import IOTLeft from './components/IOTLeft.vue';
 import IOTRight from './components/IOTRight.vue';
 import IOTLIstDialog from './components/IOTLIstDialog.vue';
+import IOTToolDialog from './components/IOTToolDialog.vue';
 import Map from './map/Map.vue'
 const gisMapRef = ref(null)