邓洁 : 右侧鼠标经过效果

src/components/content/airInfo/AirInfo.vue

@@ -38,6 +38,9 @@
 import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
 
+const props = defineProps({
+  list: Array
+});
 const info = reactive({
   windPId: 0, //编号
   max: 120, //最大值
@@ -62,12 +65,17 @@ const info3 = reactive({
   value: 80, //测量值
   point: 88, //阈值
 });
-setInterval(() => {
+watch(() => props.list, (now, old) => {
-  info.value = parseInt(Math.random() * 10) * 10;
+  console.log('传感器 ', now, old)
-  info1.value = parseInt(Math.random() * 10) * 10;
+  // wpList.value=now
-  info2.value = parseInt(Math.random() * 10) * 10;
+}, {deep: true});
-  info3.value = parseInt(Math.random() * 10) * 10;
+// setInterval(() => {
-}, 2000);
+//   info.value = parseInt(Math.random() * 10) * 10;
+//   info1.value = parseInt(Math.random() * 10) * 10;
+//   info2.value = parseInt(Math.random() * 10) * 10;
+//   info3.value = parseInt(Math.random() * 10) * 10;
+// }, 2000);
+
 </script>
 
 <style lang="scss" scoped>
@@ -79,16 +87,24 @@ setInterval(() => {
   top: 1003px;
   right: 72px;
   background-image: url(@/assets/images/airInfo/bg.png);
-  padding: 43px 20px 30px 32px;
+  padding: 25px 20px 0 21px;
 
   .fan-speed {
     display: flex;
-    height: 40px;
+    //height: 40px;
     font-size: 30px;
     font-family: MicrosoftYaHei;
     color: #ffffff;
     line-height: 40px;
     align-items: center;
+    padding:5px 0 5px 15px;
+    margin-bottom: 25px;
+
+    &:hover {
+      //width: 790px;
+      background: #2E5589;
+      border-radius: 6px;
+    }
 
     img {
       width: 29px;

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -75,19 +75,28 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 20px 0px 14px 0px;
+  padding: 5px 14px;
+margin-bottom: 30px;
+  &:hover {
+    background: #2E5589;
+    border-radius: 6px;
+
+    #point {
+      background: #fff !important;
+    }
+  }
 
   .label {
     display: flex;
     align-items: center;
 
-    .wind-icon{
+    .wind-icon {
       height: 36px;
       width: 34px;
     }
 
     span {
-      width:70px;
+      width: 70px;
       height: 37px;
       font-size: 28px;
       font-family: MicrosoftYaHei;
@@ -114,10 +123,12 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
 
     #point {
       position: absolute;
-      height: inherit;
+      height: 20px;
-      width: 10px;
+      width: 3px;
-      background: #60ddde;
+      background: #92D18F;
-      top: 0px;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
       left: 1px;
     }
   }

src/components/content/badGasInfo/BadGasInfo.vue

@@ -18,57 +18,64 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 const gasInfo = reactive({
   name: "一氧化硫", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 60, //传感器值
   point: 50, //阈值
 });
 const gasInfo2 = reactive({
   name: "一氧化氮", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 40, //传感器值
   point: 10, //阈值
 });
 const gasInfo3 = reactive({
   name: "一氧化碳", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 15, //传感器值
   point: 70, //阈值
 });
 const gasInfo4 = reactive({
   name: "二氧化碳", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 25, //传感器值
   point: 40, //阈值
 });
 const gasInfo5 = reactive({
   name: "硫化氢", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 30, //传感器值
   point: 20, //阈值
 });
 const gasInfo6 = reactive({
   name: "二氧化硫", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 20, //传感器值
   point: 20, //阈值
 });
-setInterval(() => {
+const props = defineProps({
-  gasInfo.value = parseInt(Math.random() * 10) * 10;
+  list: Array
-  gasInfo2.value = parseInt(Math.random() * 10) * 10;
+});
-  gasInfo3.value = parseInt(Math.random() * 10) * 10;
+watch(() => props.list, (now, old) => {
-  gasInfo4.value = parseInt(Math.random() * 10) * 10;
+  console.log('传感器 ', now, old)
-  gasInfo6.value = parseInt(Math.random() * 10) * 10;
+  // wpList.value=now
-  gasInfo5.value = parseInt(Math.random() * 10) * 10;
+}, {deep: true});
-}, 2000);
+// setInterval(() => {
+//   gasInfo.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo2.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo3.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo4.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo6.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo5.value = parseInt(Math.random() * 10) * 10;
+// }, 2000);
 </script>
 
 <style lang="scss" scoped>
 #bad-gas-info {
   position: absolute;
   z-index: 100;
-  width: 830px;
+  width: 824px;
   height: 621px;
   top: 1441px;
-  right: 62px;
+  right: 72px;
   background-image: url(@/assets/images/badGasInfo/bg.png);
   .title {
     width: 128px;

src/components/content/windPressure/WindPressureList.vue

@@ -9,6 +9,7 @@
 
 <script setup>
 import WindPressureItem from "./childComps/WindPressureItem.vue";
+
 const props = defineProps({
   list: Array
 });
@@ -65,8 +66,8 @@ const wpList = ref([
   },
 ]);
 watch(() => props.list, (now, old) => {
-  console.log('风压',now,old)
+  console.log('风压', now, old)
-  wpList.value=now
+  wpList.value = now
 }, {deep: true});
 // setInterval(() => {
 //   wpList.forEach((item) => {
@@ -83,7 +84,8 @@ watch(() => props.list, (now, old) => {
   top: 185px;
   right: 68px;
   background-image: url(../../../assets/images/windPressure/bg.png);
-  padding-top: 22px;
+  padding: 22px 17px 0 23px;
+
   .name {
     width: 64px;
     height: 42px;
@@ -93,6 +95,7 @@ watch(() => props.list, (now, old) => {
     color: #38cafb;
     line-height: 42px;
     margin-left: 62px;
+    margin-bottom: 38px;
   }
 }
 </style>

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -1,9 +1,8 @@
 <template>
-  <div id="wind-pressure-item">
+  <div id="wind-pressure-item" :class="{ abnormal:isWaring }">
     <div class="label">
-      <img src="../../../../assets/images/windPressure/icon.png" alt=""/><span
+      <img src="../../../../assets/images/windPressure/icon.png" alt=""/>
-    >{{ index }}号风压</span
+      <span>{{ index }}号风压</span>
-    >
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
@@ -64,11 +63,24 @@ let isWaring = computed(() => {
 </script>
 
 <style lang="scss" scoped>
+.abnormal:hover{
+  background: #9C5252!important;
+  border-radius: 6px;
+  #point {
+    background: #fff!important;
+  }
+}
 #wind-pressure-item {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 20px 0px 14px 33px;
+  padding: 6px 38px 7px 10px;
+  margin-bottom: 17px;
+
+  &:hover {
+    background: #2E5589;
+    border-radius: 6px;
+  }
 
   &:last-child {
     .label {
@@ -117,10 +129,12 @@ let isWaring = computed(() => {
 
     #point {
       position: absolute;
-      height: inherit;
+      height: 20px;
-      width: 10px;
       background: #60ddde;
-      top: 0px;
+      width: 3px;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
       left: 1px;
     }
   }

src/views/tunnel/index.vue

@@ -45,7 +45,7 @@
       >
         <wind-pressure-list v-if="showFan" :list="socketData.windPressure"/>
         <air-info v-if="showFan" :list="socketData.sensor"/>
-        <bad-gas-info v-if="showFan"/>
+        <bad-gas-info v-if="showFan" :list="socketData.sensor"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>