add:照明系统页面修改/修改中

hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue

@@ -0,0 +1,135 @@
+<template>
+    <a-popover color="rgba(0, 0, 0, 0.8)">
+        <template #content>
+            <div class="light-tag">
+                <div class="light-tag-tit">
+                    <div>
+                        <img src="/asset/image//bulbLogo/21962.png" alt="" />
+                        <span class="tag-text">{{ result.name }}</span>
+                    </div>
+                    <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
+                </div>
+                <div class="light-tag-box">
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">控制模式</span>
+                        <span class="result">自动</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">亮度</span>
+                        <span class="result">{{ result.brightness }}</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">控制场景</span>
+                        <span class="result">{{ result.automatic2 }}</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">色温</span>
+                        <span class="result">{{ result.brightness3 }}</span>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <div class="icon-box" :style="styleObject">
+            <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
+            <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
+            <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
+        </div>
+    </a-popover>
+</template>
+  
+<script setup lang="ts">
+import { ref } from 'vue';
+defineProps({
+  styleObject: Object,
+  type: Number
+});
+
+const result = ref({
+    id: '1',
+    name: '站厅照明  1区',
+    manual: '手动',
+    automatic: '自动',
+    brightness: '100lux',
+    brightness2: '30lux',
+    manual2: '手动',
+    automatic2: '舒适',
+    brightness3: '4000k',
+    brightness4: '3800k',
+});
+
+</script>
+<style lang="less" scoped>
+    .icon-box {
+        width: 25px;
+        height: 25px;
+        position: absolute;
+        .icon-item {
+            width: 25px;
+            cursor: pointer;
+            transition: all ease 0.1s;
+        }
+        .icon-item:active {
+            transform: scale(1.2);
+        }
+    }
+    // 悬浮窗外部
+    .light-tag {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        // 悬浮窗标题
+        .light-tag-tit {
+            display: flex;
+            justify-content: space-between;
+            vertical-align: middle;
+            height: 30px;
+            .tag-text {
+                font-size: 16px;
+                font-weight: 700;
+                color: white;
+                padding-left: 10px;
+            }
+            .right-button {
+                width: 50px;
+                height: 26px;
+                background: rgba(57, 215, 187, 0.1);
+                border: 1px solid rgba(57, 215, 187, 1);
+                font-size: 12px;
+                color: rgba(57, 215, 187, 1);
+            }
+        }
+    }
+    // 悬浮窗底部4格子
+    .light-tag-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        grid-gap: 10px;
+        .tag-box-item {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            img {
+                width: 120px;
+                vertical-align: middle;
+            }
+            .title {
+                position: absolute;
+                left: 60px;
+                top: 13px;
+                color: rgba(64, 255, 252, 1);
+            }
+            .result {
+                line-height: 50px;
+                font-size: 16px;
+                font-weight: 700;
+                color: white;
+            };
+        }
+    }
+</style>
+