YK01控制页改vw布局

src/system/IOT/controlPanel/model/YK01/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['control',{'wrapper':wrapper}]" v-if="detail">
+  <div :class="['control', { wrapper: wrapper }]" v-if="detail">
     <div class="control-left">
       <div class="top">
         <infoPanel></infoPanel>
@@ -9,221 +9,383 @@
       </div>
     </div>
     <div class="control-content" v-if="refresh">
-      <div class="lamp-box" style="position: absolute;margin: 70px 0 0 20px;">
-        <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid1 ? detail.params.solenoid1.lastvalue == 1 : false">{{ detail.params.solenoid1 && detail.params.solenoid1.paramname }}</Lamp>
-        <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid2 ? detail.params.solenoid2.lastvalue == 1 : false">{{ detail.params.solenoid2 && detail.params.solenoid2.paramname }}</Lamp>
-        <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid3 ? detail.params.solenoid3.lastvalue == 1 : false">{{ detail.params.solenoid3 && detail.params.solenoid3.paramname }}</Lamp>
-        <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid4 ? detail.params.solenoid4.lastvalue == 1 : false">{{ detail.params.solenoid4 && detail.params.solenoid4.paramname }}</Lamp>
-        <Lamp bgStart="green" bgEnd="rgb(0, 255, 0)" :isTrue="detail.params.solenoid5 ? detail.params.solenoid5.lastvalue == 1 : false">{{ detail.params.solenoid5 && detail.params.solenoid5.paramname }}</Lamp>
-      </div>
-      <div class="map" :style="{transform:`scale(${calcSize})`}">
-        <div style="display: inline-block;position: relative">
-          <dataBlock 
+      <div class="image-box">
+        <div class="full-screen">
+          <customBtn
+            :btnOptions="[{ label: wrapper ? '退出全屏' : '进入全屏' }]"
+            :btn="true"
+            style="width: 70px"
+            @clickBtn="clickBtn"
+          ></customBtn>
+        </div>
+        <div style="position: absolute; top: 13%; left: 2%">
+          <Lamp
+            bgStart="green"
+            bgEnd="rgb(0, 255, 0)"
+            style="margin-bottom: 1vh"
+            :isTrue="
+              detail.params.solenoid1
+                ? detail.params.solenoid1.lastvalue == 1
+                : false
+            "
+            >{{
+              detail.params.solenoid1 && detail.params.solenoid1.paramname
+            }}</Lamp
+          >
+          <Lamp
+            bgStart="green"
+            bgEnd="rgb(0, 255, 0)"
+            style="margin-bottom: 1vh"
+            :isTrue="
+              detail.params.solenoid2
+                ? detail.params.solenoid2.lastvalue == 1
+                : false
+            "
+            >{{
+              detail.params.solenoid2 && detail.params.solenoid2.paramname
+            }}</Lamp
+          >
+          <Lamp
+            bgStart="green"
+            bgEnd="rgb(0, 255, 0)"
+            style="margin-bottom: 1vh"
+            :isTrue="
+              detail.params.solenoid3
+                ? detail.params.solenoid3.lastvalue == 1
+                : false
+            "
+            >{{
+              detail.params.solenoid3 && detail.params.solenoid3.paramname
+            }}</Lamp
+          >
+          <Lamp
+            bgStart="green"
+            bgEnd="rgb(0, 255, 0)"
+            style="margin-bottom: 1vh"
+            :isTrue="
+              detail.params.solenoid4
+                ? detail.params.solenoid4.lastvalue == 1
+                : false
+            "
+            >{{
+              detail.params.solenoid4 && detail.params.solenoid4.paramname
+            }}</Lamp
+          >
+          <Lamp
+            bgStart="green"
+            bgEnd="rgb(0, 255, 0)"
+            :isTrue="
+              detail.params.solenoid5
+                ? detail.params.solenoid5.lastvalue == 1
+                : false
+            "
+            >{{
+              detail.params.solenoid5 && detail.params.solenoid5.paramname
+            }}</Lamp
+          >
+        </div>
+        <div class="stop" v-if="detail.isSite && detail.params.open">
+          <a-button class="a-but" @click="StopFun('open')" size="small">{{
+            detail.params.open && detail.params.open.paramname
+          }}</a-button>
+          <a-button class="a-but" @click="StopFun('close')" size="small">{{
+            detail.params.close && detail.params.close.paramname
+          }}</a-button>
+          <a-button class="a-but" @click="StopFun('stop')" size="small">{{
+            detail.params.stop && detail.params.stop.paramname
+          }}</a-button>
+        </div>
+        <div
+          class="dataBlock-box"
+          style="top: 5%; left: 15%; transform: scale(1.4)"
+        >
+          <dataBlock
             v-if="detail.params.oilpressure"
-            :top="-35" 
-            :left="40" 
+            :top="0"
+            :left="0"
             :data="[
-              {title:detail.params.oilpressure.paramname,value:detail.params.oilpressure.lastvalue,unit:detail.params.oilpressure.unit},
-              {title:detail.params.tanklevel.paramname,value:detail.params.tanklevel.lastvalue,unit:detail.params.tanklevel.unit},
-              {title:detail.params.tanktemp.paramname,value:detail.params.tanktemp.lastvalue,unit:detail.params.tanktemp.unit}
+              {
+                title: detail.params.oilpressure.paramname,
+                value: detail.params.oilpressure.lastvalue,
+                unit: detail.params.oilpressure.unit,
+              },
+              {
+                title: detail.params.tanklevel.paramname,
+                value: detail.params.tanklevel.lastvalue,
+                unit: detail.params.tanklevel.unit,
+              },
+              {
+                title: detail.params.tanktemp.paramname,
+                value: detail.params.tanktemp.lastvalue,
+                unit: detail.params.tanktemp.unit,
+              },
             ]"
           ></dataBlock>
-          <dataBlock 
-            style="transform: scale(0.9);"
+        </div>
+
+        <div
+          class="dataBlock-box"
+          style="top: 0%; right: 29.5%; transform: scale(1.2)"
+        >
+          <dataBlock
+            style="transform: scale(0.9)"
             v-if="detail.params.closepressure"
-            :top="-50" 
-            :left="300" 
             :data="[
-              {title:detail.params.closepressure.paramname,value:detail.params.closepressure.lastvalue,unit:detail.params.closepressure.unit},
-              {title:detail.params.FMKQS120S.paramname,value:detail.params.FMKQS120S.lastvalue,unit:detail.params.FMKQS120S.unit},
-              {title:detail.params.closetime.paramname,value:detail.params.closetime.lastvalue,unit:detail.params.closetime.unit},
-              {title:detail.params.kv.paramname,value:detail.params.kv.lastvalue,unit:detail.params.kv.unit},
-              {title:detail.params.flowresistance.paramname,value:detail.params.flowresistance.lastvalue,unit:detail.params.flowresistance.unit}
+              {
+                title: detail.params.closepressure.paramname,
+                value: detail.params.closepressure.lastvalue,
+                unit: detail.params.closepressure.unit,
+              },
+              {
+                title: detail.params.FMKQS120S.paramname,
+                value: detail.params.FMKQS120S.lastvalue,
+                unit: detail.params.FMKQS120S.unit,
+              },
+              {
+                title: detail.params.closetime.paramname,
+                value: detail.params.closetime.lastvalue,
+                unit: detail.params.closetime.unit,
+              },
+              {
+                title: detail.params.kv.paramname,
+                value: detail.params.kv.lastvalue,
+                unit: detail.params.kv.unit,
+              },
+              {
+                title: detail.params.flowresistance.paramname,
+                value: detail.params.flowresistance.lastvalue,
+                unit: detail.params.flowresistance.unit,
+              },
             ]"
           ></dataBlock>
-          <dataBlock 
+        </div>
+
+        <div
+          class="dataBlock-box"
+          style="bottom: 28%; left: 2.2%; transform: scale(1.2)"
+        >
+          <dataBlock
             v-if="detail.params.pipeflow"
-            :top="200" 
-            :left="40" 
             :data="[
-              {title:detail.params.pipeflow.paramname,value:detail.params.pipeflow.lastvalue,unit:detail.params.pipeflow.unit},
-              {title:detail.params.position.paramname,value:detail.params.position.lastvalue,unit:detail.params.position.unit},
+              {
+                title: detail.params.pipeflow.paramname,
+                value: detail.params.pipeflow.lastvalue,
+                unit: detail.params.pipeflow.unit,
+              },
+              {
+                title: detail.params.position.paramname,
+                value: detail.params.position.lastvalue,
+                unit: detail.params.position.unit,
+              },
             ]"
           ></dataBlock>
-          <dataBlock 
+        </div>
+        <div
+          class="dataBlock-box"
+          style="bottom: 32%; right: 30%; transform: scale(1.5)"
+        >
+          <dataBlock
             v-if="detail.params.flowspeed"
-            :top="200" 
-            :left="300" 
             :data="[
-              {title:detail.params.flowspeed.paramname,value:detail.params.flowspeed.lastvalue,unit:detail.params.flowspeed.unit},
-              {title:detail.params.headloss.paramname,value:detail.params.headloss.lastvalue,unit:detail.params.headloss.unit},
+              {
+                title: detail.params.flowspeed.paramname,
+                value: detail.params.flowspeed.lastvalue,
+                unit: detail.params.flowspeed.unit,
+              },
+              {
+                title: detail.params.headloss.paramname,
+                value: detail.params.headloss.lastvalue,
+                unit: detail.params.headloss.unit,
+              },
             ]"
           ></dataBlock>
-          <div class="stop" v-if="detail.isSite && detail.params.open">
-            <a-button @click="StopFun('open')" size="small">{{ detail.params.open && detail.params.open.paramname }}</a-button>
-            <a-button @click="StopFun('close')" size="small">{{ detail.params.close && detail.params.close.paramname }}</a-button>
-            <a-button @click="StopFun('stop')" size="small">{{ detail.params.stop && detail.params.stop.paramname }}</a-button>
-          </div>
-          <img :src="imgUrl" alt="">
-          <div style="clear: both;"></div>
         </div>
+        <img class="image" :src="imgUrl" alt="" />
       </div>
-      
-      
+
       <div class="chart">
-        <MyChart :options="[{label:'阀门关闭起阀后压力',value:['closepressure'],sumShow:true}]"></MyChart>
-      </div>
-      <div class="message-header">
-        <customBtn :btnOptions="[{label:wrapper ? '退出全屏' : '进入全屏'}]" :btn="true" style="width:70px" @clickBtn="clickBtn"></customBtn>
-        <!-- <Message></Message> -->
+        <MyChart
+          :options="[
+            {
+              label: '阀门关闭起阀后压力',
+              value: ['closepressure'],
+              sumShow: true,
+            },
+          ]"
+        ></MyChart>
       </div>
     </div>
     <div class="control-right">
-      <timeControl>
-      </timeControl>
+      <timeControl> </timeControl>
     </div>
   </div>
 </template>
 
 <script setup>
-import infoPanel from '../../modules/infoPanel.vue'
-import MyChart from '../../modules/MyChart.vue'
-import timeControl from './modules/statusContent.vue'
-import controlPanel from './modules/controlPanel.vue'
-import customBtn from '../../modules/customBtn.vue'
-import Lamp from '../../modules/lamp.vue'
-import Message from '../../modules/message.vue'
-import dataBlock from '../../modules/dataBlock.vue'
-import updataBtn from '../../modules/updataBtn.vue'
-import {ref, defineProps, defineEmits, onMounted, provide, onBeforeMount, onUnmounted, computed, watch, nextTick} from 'vue'
-import {Modal} from 'ant-design-vue'
-import { onBeforeRouteUpdate, useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/modules/auth'
-import Api from '@/api/api'
-import Http from '@/api/http'
-import utils from '@/utils/utils'
-import { calcSizeFun,setIntervalFun } from '../../modules/util.js'
-
-let status = ref('')
+import infoPanel from "../../modules/infoPanel.vue";
+import MyChart from "../../modules/MyChart.vue";
+import timeControl from "./modules/statusContent.vue";
+import controlPanel from "./modules/controlPanel.vue";
+import customBtn from "../../modules/customBtn.vue";
+import Lamp from "../../modules/lamp-vw.vue";
+import Message from "../../modules/message.vue";
+import dataBlock from "../../modules/dataBlock.vue";
+import updataBtn from "../../modules/updataBtn.vue";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  onMounted,
+  provide,
+  onBeforeMount,
+  onUnmounted,
+  computed,
+  watch,
+  nextTick,
+} from "vue";
+import { Modal } from "ant-design-vue";
+import { onBeforeRouteUpdate, useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+import Api from "@/api/api";
+import Http from "@/api/http";
+import utils from "@/utils/utils";
+import { calcSizeFun, setIntervalFun } from "../../modules/util.js";
 
-let AuthStore = useAuthStore()
+let status = ref("");
 
-let router = useRouter()
-let emit = defineEmits(['onSuccess'])
-let props = defineProps({})
+let AuthStore = useAuthStore();
 
-let refresh = ref(true)
-let wrapper = ref(false)
+let router = useRouter();
+let emit = defineEmits(["onSuccess"]);
+let props = defineProps({});
 
-let detail = ref('')
+let refresh = ref(true);
+let wrapper = ref(false);
 
-provide('detail',detail)
+let detail = ref("");
 
-let calcSize = ref(1)
-calcSizeFun((size) => {
-  calcSize.value = size
-})
+provide("detail", detail);
 
 let imgUrl = computed(() => {
-  let arr = detail.value.attinfos.filter(item => item.usetype == 'previewImage')
-  return arr[arr.length - 1] && arr[arr.length - 1].url
-})
+  let arr = detail.value.attinfos.filter(
+    (item) => item.usetype == "previewImage"
+  );
+  return arr[arr.length - 1] && arr[arr.length - 1].url;
+});
 
 let clickBtn = (tag) => {
-  tag.label == '进入全屏' ? wrapper.value = true : wrapper.value = false
-  refresh.value = false
+  tag.label == "进入全屏" ? (wrapper.value = true) : (wrapper.value = false);
+  refresh.value = false;
   setTimeout(() => {
-    refresh.value = true
-  })
-}
+    refresh.value = true;
+  });
+};
 
 let StopFun = (type) => {
   Modal.confirm({
-    title:`确定${type == 'stop' ? '暂停' : type == 'close' ? '关阀' : '开阀'}吗?`,
-    async onOk () {
+    title: `确定${
+      type == "stop" ? "暂停" : type == "close" ? "关阀" : "开阀"
+    }吗?`,
+    async onOk() {
       let res = await Api.requested({
-        "id": "20230627163701",
-        "content": {
-          "w_deviceid": router.currentRoute.value.query.id,
-          "w_functionid": detail.value.function[type].w_functionid,
-          "params": {
-            [type]:1
-          }
-        }
-      })
-      utils.message(res,'操作成功', async () => {
-        detailFun()
-      })
+        id: "20230627163701",
+        content: {
+          w_deviceid: router.currentRoute.value.query.id,
+          w_functionid: detail.value.function[type].w_functionid,
+          params: {
+            [type]: 1,
+          },
+        },
+      });
+      utils.message(res, "操作成功", async () => {
+        detailFun();
+      });
     },
-    onCancel () {
-      status.value = detail.value.paramvalues.open == 1 ? 'open' : detail.value.paramvalues.close == 1 ? 'close' : 'stop'
-    }
-  })
-}
+    onCancel() {
+      status.value =
+        detail.value.paramvalues.open == 1
+          ? "open"
+          : detail.value.paramvalues.close == 1
+          ? "close"
+          : "stop";
+    },
+  });
+};
 
 let controlBtn = async (data) => {
   Modal.confirm({
-    title:'确定更新数据吗?',
-    async onOk () {
+    title: "确定更新数据吗?",
+    async onOk() {
       let res = await Api.requested({
-        "id": "20230627163701",
-        "content": {
-          "w_deviceid": router.currentRoute.value.query.id,
-          "w_functionid": detail.value.function['Pilot valve'].w_functionid,
-          "params": {
-            'DaoFa':data.value
-          }
-        }
-      })
-      utils.message(res,'操作成功', async () => {
-        detailFun()
-      })
-    }
-   })
-}
+        id: "20230627163701",
+        content: {
+          w_deviceid: router.currentRoute.value.query.id,
+          w_functionid: detail.value.function["Pilot valve"].w_functionid,
+          params: {
+            DaoFa: data.value,
+          },
+        },
+      });
+      utils.message(res, "操作成功", async () => {
+        detailFun();
+      });
+    },
+  });
+};
 
 let detailFun = async () => {
   let res = await Api.requested({
-    "id": "20230628084901",
-    "content": {
-      "w_deviceid": router.currentRoute.value.query.id
-    }
-  })
-  detail.value = res.data
-  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename //是否本站点设备
+    id: "20230628084901",
+    content: {
+      w_deviceid: router.currentRoute.value.query.id,
+    },
+  });
+  detail.value = res.data;
+  detail.value.isSite = AuthStore.nowAccount.sitename == detail.value.sitename; //是否本站点设备
 
   if (!detail.value.isfeedback) {
-    let keys = Object.keys(detail.value.paramcmdvalues)
-    keys.forEach(item => {
-      detail.value.paramcmdvalues[item] = detail.value.paramvalues[item]
-    })
+    let keys = Object.keys(detail.value.paramcmdvalues);
+    keys.forEach((item) => {
+      detail.value.paramcmdvalues[item] = detail.value.paramvalues[item];
+    });
   }
 
-  status.value = detail.value.paramvalues.open == 1 ? 'open' : detail.value.paramvalues.close == 1 ? 'close' : 'stop'
-}
+  status.value =
+    detail.value.paramvalues.open == 1
+      ? "open"
+      : detail.value.paramvalues.close == 1
+      ? "close"
+      : "stop";
+};
 
-provide('detailFun',detailFun)
+provide("detailFun", detailFun);
 
-let timer = setIntervalFun(detailFun,router.currentRoute.value.query.id)
+let timer = setIntervalFun(detailFun, router.currentRoute.value.query.id);
 
-onMounted( () => {
-  detailFun()
-})
+onMounted(() => {
+  detailFun();
+});
 onUnmounted(() => {
-  clearInterval(timer)
-})
+  clearInterval(timer);
+});
 </script>
 
 <style scoped>
-*{
+* {
   box-sizing: border-box;
 }
 .control {
   display: flex;
   height: calc(100vh - 60px);
-  width: 100%;
+  width: calc(100vw - 256px);
+  box-sizing: border-box;
   padding: 10px 0;
-  background: linear-gradient(90deg, #001D6A 0%, #0060B2 82%, #007BD5 100%) !important;
+  background: linear-gradient(
+    90deg,
+    #001d6a 0%,
+    #0060b2 82%,
+    #007bd5 100%
+  ) !important;
 }
 .wrapper {
   position: absolute;
@@ -239,12 +401,12 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-} 
+}
 .control .control-left .top {
   width: 100%;
   height: 49%;
   min-height: 330px;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
 .control .control-left .bottom {
@@ -252,71 +414,68 @@ onUnmounted(() => {
   min-width: 290px;
   height: 49%;
   min-height: 330px;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
 
 .control .control-content {
-  flex:1;
-  height: 100%;
-  padding: 0 10px;
+  flex: 1;
   display: flex;
+  width: 53vw;
   flex-direction: column;
   justify-content: space-between;
-  position: relative;
-  overflow: hidden;
 }
-.control .control-content .message-header {
+.control .control-content .image-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
+}
+
+.control .control-content .full-screen {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  padding-left: 10px;
 }
-.control .control-content .map {
-  width: 100%;
-  height: calc(100vh - 245px);
-  position: relative;
+
+.control .control-content .image-box .stop {
+  position: absolute;
+  top: 5%;
+  right: 1.5%;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  width: 684px;
-  padding: 10px 70px 0 70px;
-  margin: auto;
 }
-.control .control-content .map img {
-  width: 100%;
-  object-fit: scale-down;
-  z-index: 1;
-  margin-bottom: 30px;
+
+.control .control-content .image-box .a-but {
+  width: 3vw;
+  height: 1.8vw;
+  font-size: 0.8vw;
+}
+
+.dataBlock-box {
+  position: absolute;
+}
+
+.image {
+  width: 80%;
+  height: 80%;
+  object-fit: contain;
 }
 
 .control .control-content .chart {
   width: 100%;
   height: 255px;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 0 10px 10px 0;
 }
 
 .control .control-right {
   width: 272px;
   height: 100%;
-  background:  rgb(0, 0, 0,.05);
+  background: rgb(0, 0, 0, 0.05);
   padding: 10px;
 }
-.stop {
-  /* border-radius: 50%;
-  background: #ffffff; */
-  position: absolute;
-  top: -30px;
-  right: -60px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-/deep/ .stop .ant-radio-button {
-  font-size: 12px !important;
-}
 </style>

src/system/IOT/controlPanel/modules/dataBlock.vue

@@ -1,14 +1,26 @@
 <template>
-  <div :style="[{'position':'absolute','top':top + 'px','left': left + 'px','z-index':2}]">
+  <div
+    :style="[
+      {
+        position: 'absolute',
+        top: top + 'px',
+        left: left + 'px',
+        'z-index': 2,
+      },
+    ]"
+  >
     <div class="data-block">
       <div class="header" v-if="title">
         <div class="title">{{ title }}</div>
       </div>
-      <div class="content" v-if="!Object.keys($slots).filter(item => item != 'handle').length">
-        <div class="item" v-for="(item,index) in data">
+      <div
+        class="content"
+        v-if="!Object.keys($slots).filter((item) => item != 'handle').length"
+      >
+        <div class="item" v-for="(item, index) in data">
           <span class="item-title" v-if="item.title">{{ item.title }}</span>
           <div class="value">
-            <span :style="[{'fontSize':item.fontSize}]">{{ item.value }}</span>
+            <span :style="[{ fontSize: item.fontSize }]">{{ item.value }}</span>
             <span>{{ item.unit }}</span>
           </div>
         </div>
@@ -19,51 +31,48 @@
       </div>
     </div>
   </div>
-  
 </template>
 
 <script setup>
-import {ref, defineProps, defineEmits} from 'vue'
-let emit = defineEmits([])
-let props = defineProps(['title','data','top','left'])
-
+import { ref, defineProps, defineEmits } from "vue";
+let emit = defineEmits([]);
+let props = defineProps(["title", "data", "top", "left"]);
 </script>
 
 <style scoped>
-*{
+* {
   box-sizing: border-box;
 }
-  .data-block {
-    background: rgba(0, 0, 0, .25);
-    width: 160px;
-    color: #ffffff;
-  }
-
-  .header {
-  }
-  .header .title {
-    background:linear-gradient(-60deg, transparent 25px, rgba(255, 164, 6));
-    padding: 2px 8px 2px 8px;
-    margin-bottom: 3px;
-    position: relative;
-    font-size: 10px;
-  }
-  .content {
-    padding: 0 5px 5px 5px;
-  }
-  .content .item {
+.data-block {
+  background: rgba(0, 0, 0, 0.25);
+  width: 9.524vw;
+  color: #ffffff;
+}
 
-  }
-  .content .item .item-title {
-    font-size: 10px;
-  }
-  .content .item .value {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid rgba(255, 255, 255, .1);
-    font-size: 16px;
-  }
-  .content .item:last-child {
-    border: none;
-  }
+.header {
+}
+.header .title {
+  background: linear-gradient(-60deg, transparent 1.488vw, rgba(255, 164, 6));
+  padding: 0.119vw 0.476vw 0.119vw 0.476vw;
+  margin-bottom: 0.179vw;
+  position: relative;
+  font-size: 0.595vw;
+}
+.content {
+  padding: 0 0.298vw 0.298vw 0.298vw;
+}
+.content .item {
+}
+.content .item .item-title {
+  font-size: 0.595vw;
+}
+.content .item .value {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 0.060vw solid rgba(255, 255, 255, 0.1);
+  font-size: 0.952vw;
+}
+.content .item:last-child {
+  border: none;
+}
 </style>

src/system/IOT/controlPanel/modules/lamp-vw.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="lamp" :style="{'--bgStart':bgStart,'--bgEnd':bgEnd}">
+    <img src="@/assets/close.png" alt="" :style="marginB ? 'margin-bottom:0.357vw' : ''">
+    <slot></slot>
+    <div class="bg" :style="props.isTrue ? '' : 'animation:none'"></div>
+  </div>
+</template>
+
+<script setup>
+import {ref, defineProps, defineEmits} from 'vue'
+import Api from '@/api/api'
+import utils from '@/utils/utils'
+let emit = defineEmits([])
+let props = defineProps({
+  isTrue: {
+    type:Boolean,
+    default:() => {
+      return true
+    }
+  },
+  marginB: {
+    type:Boolean,
+    default:() => true
+  },
+  bgStart: {
+    type:String,
+    default:() => 'red'
+  },
+  bgEnd:{
+    type: String,
+    default:() => '#FF8F4A'
+  }
+})
+</script>
+
+<style scoped>
+.lamp {
+  color:#ffffff;
+  font-size: 0.714vw;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  cursor: pointer;
+}
+.lamp img {
+  width: 1.190vw;
+  height: 1.190vw;
+  position: relative;
+}
+
+.lamp .bg {
+  width: 0.833vw;
+  height: 0.833vw;
+  border-radius: 50%;
+  background: #cccccc;
+  position: absolute;
+  top: 0.179vw;
+  z-index: 9;
+  animation:lampBackground .5s infinite alternate ease-in-out;
+}
+@keyframes lampBackground {
+  from {
+    background-color: var(--bgEnd);
+  }
+  to {
+    background-color: var(--bgStart);
+  }
+}
+
+</style>