style(DeviceStatusComponent, ValveComponent):组件样式调整

ui/src/components/DCS/DeviceStatusComponent.vue

@@ -15,19 +15,6 @@
                         </div>
                     </div>
                     <div class="show_detail">
-                        <!-- <div class="btn_set">
-                            <el-button size="small" type="primary" @click="emitUpdate(setStatusWordAddress, setValue)">
-                                设置
-                            </el-button>
-                        </div>
-                        <div class="body_set">
-                            <div class="body_show_value">
-                                <el-select v-model="setValue" size="small" style="width: 75px">
-                                    <el-option v-for="item in frequencyOptions" :key="item.value" :label="item.label"
-                                        :value="item.value" />
-                                </el-select>
-                            </div>
-                        </div> -->
                         <div class="btn_set">
                             <el-button size="small" type="primary" @click="setPump(setStatusWordAddress, true)">
                                 启动</el-button>
@@ -85,13 +72,13 @@ const props = defineProps({
     deviceData: Object, // 变频状态数据
     speedData: Object,  // 转速数据
     setStatusWordAddress: Number,//变频启动设置地址
-    setSpeedAddress: Number,//转速设置地址
+    setSpeedAddress:  Number,//转速设置地址
 });
 
 
 // 响应式数据
-const setValue = ref(null);
-const speedValue = ref(null);
+// const setValue = ref(null);
+const speedValue = ref(0);
 //变频状态字
 // const statusWord = ref(['', '正转', '反转', '停机', '故障'])
 //如果title包含S

ui/src/components/DCS/ValveComponent.vue

@@ -95,7 +95,7 @@ function onClickClose() {
 
 <style scoped lang="scss">
 .flow_single {
-    width: 100px;
+    min-width: 100px;
     display: flex;
     padding: 4px;
     flex-direction: column;
@@ -113,7 +113,7 @@ function onClickClose() {
         align-self: stretch;
         // color: aliceblue;
         color: #76E1FF;
-        font-size: 21px;
+        font-size: 18px;
         font-weight: bold;
         border-radius: 0px 0px 5px 5px;
         background: #192846;
@@ -158,7 +158,7 @@ function onClickClose() {
                     }
 
                     to {
-                        transform: rotate(360deg);
+                        transform: rotate(90deg);
                     }
                 }
 
@@ -169,16 +169,17 @@ function onClickClose() {
                     }
 
                     to {
-                        transform: rotate(-270deg);
+                        transform: rotate(0deg);
                     }
                 }
 
                 .pointer {
+                    border-radius: 4px;
                     width: 8px;
-                    height: 25.5px;
+                    height: 25.3px;
                     position: absolute;
-                    left: 21px;
-                    top: 21px;
+                    left: 21.5px;
+                    top: 20.7px;
                 }
 
                 .pointer_close {
@@ -187,12 +188,12 @@ function onClickClose() {
 
 
                 .pointer_to_open {
-                    animation: rotate-clockwise 120s linear infinite;
+                    animation: rotate-clockwise 15s linear infinite;
                     background-color: yellow;
                 }
 
                 .pointer_to_close {
-                    animation: rotate-counterclockwise 120s linear infinite;
+                    animation: rotate-counterclockwise 15s linear infinite;
                     background-color: yellow;
                 }