add:样式修改/素材修改/交互逻辑修改/增加日志功能

This commit is contained in:
chenpingsen
2024-08-16 14:19:11 +08:00
parent d15f8e8ed5
commit 10d354c4f6
20 changed files with 661 additions and 561 deletions

View File

@@ -7,17 +7,13 @@
<img src="/asset/image//bulbLogo/21962.png" alt="" />
<span class="tag-text">{{ blub.regionName + ' > ' + blub.deviceGroupName }}</span></div
>
<button class="right-button">{{ blub.scene.label }}</button>
<button class="right-button">{{ record.runStatus.label }}</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">{{
blub.mode.label.indexOf('模式') != -1
? blub.mode.label.replace('模式', '')
: blub.mode.label
}}</span>
<span class="result">{{ record.autoStatus.label }}</span>
</div>
<div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" />
@@ -38,31 +34,43 @@
</div>
</template>
<div class="icon-box" :style="props.blub.styleText">
<!-- 正常=0 -->
<img
v-if="blub.mode.value == 1"
v-if="record.runStatus.value == 0"
class="icon-item"
src="/asset/image/bulbLogo/22394.png"
src="/asset/image/bulbLogo/on.png"
alt="" />
<!-- 故障=1 -->
<img
v-if="blub.mode.value == 2"
v-if="record.runStatus.value == 1"
class="icon-item"
src="/asset/image/bulbLogo/22396.png"
src="/asset/image/bulbLogo/off.png"
alt="" />
<!-- 维修=2 -->
<img
v-if="blub.mode.value == 3"
v-if="record.runStatus.value == 2"
class="icon-item"
src="/asset/image/bulbLogo/22400.png"
src="/asset/image/bulbLogo/repair.png"
alt="" />
<!-- 警告=3 -->
<img
v-if="record.runStatus.value == 3"
class="icon-item"
src="/asset/image/bulbLogo/alarm.png"
alt="" />
</div>
</a-popover>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
blub: Object,
});
const blub = props.blub;
const record = props.blub.record;
// 设备对象
const blub = computed(() => props.blub);
// 设备信息
const record = computed(() => props.blub.record);
</script>
<style lang="less" scoped>
.icon-box {
@@ -102,7 +110,7 @@
}
.right-button {
width: 50px;
width: 5em;
height: 26px;
background: rgba(57, 215, 187, 0.1);
border: 1px solid rgba(57, 215, 187, 1);