邓洁 : 绑定首页实时数据

src/components/content/fanInfo/FanInfo.vue

@@ -9,10 +9,10 @@
         <div class="fan-name">一号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
-          <div class="state">
+          <div class="state " :class="{ 'blue-state': isStart }">
             <div :class="{ stopColor: !isStart }">
-              <span> <img :src="stateIcon1" alt=""/>状态：</span
-              ><span>{{ state }}</span>
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
+              状态：{{ state }}
             </div>
             <div class="switch">
               <div
@@ -53,27 +53,24 @@
       </div>
       <div class="fan-item">
         <!-- echarts -->
-
         <div class="echart" ref="info2"></div>
         <!-- 风机名称 -->
         <div class="fan-name">二号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
-          <div class="state">
+          <div class="state" :class="{ 'blue-state': isStart2 }">
             <div :class="{ stopColor: !isStart2 }">
-              <span><img :src="stateIcon2" alt=""/>状态：{{ state2 }}</span
-              ><span></span>
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
+              状态：{{ state2 }}
             </div>
             <div class="switch">
               <div
-                  id="auto"
                   :class="{ active: isStart2 }"
                   @click="isStart2 = true"
               >
                 启动
               </div>
               <div
-                  id="stop"
                   :class="{ active: !isStart2 }"
                   @click="isStart2 = false"
               >
@@ -108,6 +105,14 @@
 <script setup>
 import * as echarts from "echarts";
 import {ref, reactive, onMounted, computed, watch} from "vue";
+const props = defineProps({
+  list: Array
+});
+const socketData = ref()
+watch(() => props.list, (now, old) => {
+  // console.log('socketDatawatch', now, old)
+  // socketData.value=now
+}, {deep: true});
 
 onMounted(handleOnMounted);
 
@@ -359,30 +364,62 @@ watch(fan02_option, () => {
 // 一号风机启动停止按钮
 const isStart = ref(true);
 let state = computed(() => {
-  return isStart.value ? "启动" : "停止";
+  return isStart.value ? "运行" : "故障";
+  // return socketData[0].running ? "运行" : "故障";
 });
 const stateIcon1 = computed(() =>
     isStart.value
-        ? "/images/fanInfo/blue-state-icon.png"
-        : "/images/fanInfo/red-state-icon.png"
+        ? "blue-state-icon.png"
+        : "red-state-icon.png"
 );
-const isStart2 = ref(true);
+
+const isStart2 = ref(false);
 let state2 = computed(() => {
-  return isStart2.value ? "启动" : "停止";
+  return isStart2.value ? "运行" : "故障";
 });
 const stateIcon2 = computed(() =>
     isStart2.value
-        ? "/images/fanInfo/blue-state-icon.png"
-        : "/images/fanInfo/red-state-icon.png"
+        ? "blue-state-icon.png"
+        : "red-state-icon.png"
 );
 let is = ref("isInput");
 // 功率是否自动
 let isSAuto1 = ref("false");
 let isSAuto2 = ref("false");
+const getImageUrl = (name) => {
+  return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href
+}
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-radio__input {
+:deep( .el-radio__input.is-checked + .el-radio__label) {
+  color: #38CAFB;
+}
+
+:deep( .el-radio__input.is-checked .el-radio__inner) {
+  border-color: #062247;
+  background: #38CAFB;
+}
+
+:deep( .el-radio__inner) {
+  border: none;
+  background: none;
+}
+
+:deep(.el-radio__inner::after) {
+  display: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+:deep( .el-radio__input) {
   width: 24px;
   height: 24px;
   border: 2px solid #38cafb;
@@ -392,7 +429,7 @@ let isSAuto2 = ref("false");
   justify-content: center;
 }
 
-::v-deep .el-radio__label {
+:deep( .el-radio__label) {
   font-size: 28px;
   font-family: MicrosoftYaHei;
   color: #38cafb;
@@ -409,9 +446,6 @@ let isSAuto2 = ref("false");
   padding: 10px;
 
   background-image: url(../../../assets/images/fanInfo/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
   //clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
   color: #2fb0df;
 
@@ -441,6 +475,7 @@ let isSAuto2 = ref("false");
         margin: 0px 0px 0px 10px;
         position: relative;
       }
+
       .echart::after {
         content: "Hz";
         font-size: 24px;
@@ -470,6 +505,20 @@ let isSAuto2 = ref("false");
         display: flex;
         width: 70%;
 
+        .blue-state {
+          > div:first-child:hover {
+            color: #fff;
+            background-color: #127399;
+            width: 180px;
+            padding-left: 5px;
+            border-radius: 8px;
+
+            > div:first-child {
+              background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+            }
+          }
+        }
+
         .state {
           flex: 1;
           display: flex;
@@ -479,13 +528,28 @@ let isSAuto2 = ref("false");
           font-family: MicrosoftYaHei;
           color: #38cafb;
           line-height: 35px;
-          gap: 33px;
+          gap: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            padding-left: 5px;
+
+            > div {
+              margin-right: 10px;
+            }
+          }
 
           img {
             margin-right: 4px;
             transform: translateY(15%);
           }
 
+          .state-icon {
+            width: 26px;
+            height: 26px;
+          }
+
           .switch {
             display: flex;
             width: 160px;
@@ -566,4 +630,15 @@ let isSAuto2 = ref("false");
 .stopColor {
   color: red;
 }
+
+.stopColor:hover {
+  color: #fff;
+  width: 180px;
+  background: #9B2222;
+  border-radius: 8px;
+
+  > div:first-child {
+    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+  }
+}
 </style>