|
@@ -1,184 +1,278 @@
|
|
|
<template>
|
|
|
- <div class="dzCard">
|
|
|
- <div class="gas-box">
|
|
|
- <div class="gas-item">
|
|
|
- <div class="detail-box">
|
|
|
- <div class="detail-container">
|
|
|
- <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
|
|
|
- <div class="item-box">
|
|
|
- <div class="item-box-label">{{ titleLeft.address }}</div>
|
|
|
- <div class="item-box-val">{{ item.value1 || '-' }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-box">
|
|
|
- <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
|
|
|
- <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-box">
|
|
|
- <div class="item-box-label">{{ titleLeft.smoke }}</div>
|
|
|
- <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div :class="props.deviceType == 'fireWarnInfo' ? 'dzCard1' : 'dzCard'">
|
|
|
+ <div class="gas-box">
|
|
|
+ <div class="gas-item">
|
|
|
+ <div class="detail-box">
|
|
|
+ <div class="detail-container">
|
|
|
+ <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
|
|
|
+ <div class="item-box">
|
|
|
+ <div class="item-box-label">{{ titleLeft.address }}</div>
|
|
|
+ <div class="item-box-val">{{ item.value1 || '-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-box">
|
|
|
+ <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
|
|
|
+ <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-box">
|
|
|
+ <div class="item-box-label">{{ titleLeft.smoke }}</div>
|
|
|
+ <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="gas-item">
|
|
|
- <div class="detail-box">
|
|
|
- <div class="detail-container">
|
|
|
- <div class="detail-item">
|
|
|
- <div class="item-box1">
|
|
|
- <div class="item-box-label">{{ titleRight.temp }}</div>
|
|
|
- <div class="item-box-val1">{{ infoData.tempVal }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-box1">
|
|
|
- <div class="item-box-label">{{ titleRight.smokeing }}</div>
|
|
|
- <div class="item-box-val1">{{ infoData.smokeVal }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-box1">
|
|
|
- <div class="item-box-label">{{ titleRight.fire }}</div>
|
|
|
- <div class="item-box-val1">{{ infoData.fireVal }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-box1">
|
|
|
- <div class="item-box-label">{{ titleRight.comax }}</div>
|
|
|
- <div class="item-box-val1">{{ infoData.coVal }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="gas-item">
|
|
|
+ <div class="detail-box">
|
|
|
+ <div class="detail-container">
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="item-box1">
|
|
|
+ <div class="item-box-label">{{ titleRight.temp }}</div>
|
|
|
+ <div class="item-box-val1">{{ infoData.tempVal }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-box1">
|
|
|
+ <div class="item-box-label">{{ titleRight.smokeing }}</div>
|
|
|
+ <div class="item-box-val1">{{ infoData.smokeVal }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-box1">
|
|
|
+ <div class="item-box-label">{{ titleRight.fire }}</div>
|
|
|
+ <div class="item-box-val1">{{ infoData.fireVal }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-box1">
|
|
|
+ <div class="item-box-label">{{ titleRight.comax }}</div>
|
|
|
+ <div class="item-box-val1">{{ infoData.coVal }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, watch } from 'vue'
|
|
|
+import { ref, reactive, watch } from 'vue';
|
|
|
|
|
|
let props = defineProps({
|
|
|
- titleLeft: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {}
|
|
|
- }
|
|
|
+ titleLeft: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
},
|
|
|
- titleRight: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {}
|
|
|
- }
|
|
|
+ },
|
|
|
+ titleRight: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
},
|
|
|
- paramData: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {}
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
+ },
|
|
|
+ paramData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ deviceType: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
-let infoData = reactive({})
|
|
|
+let infoData = reactive({});
|
|
|
|
|
|
-watch(() => props.paramData, (newV, oldV) => {
|
|
|
- infoData = Object.assign({}, newV)
|
|
|
-}, { immediate: true })
|
|
|
+watch(
|
|
|
+ () => props.paramData,
|
|
|
+ (newV, oldV) => {
|
|
|
+ infoData = Object.assign({}, newV);
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@import '/@/design/theme.less';
|
|
|
|
|
|
@{theme-deepblue} {
|
|
|
- .dzCard {
|
|
|
- --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
|
|
|
- --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
|
|
|
- }
|
|
|
+ .dzCard {
|
|
|
+ --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
|
|
|
+ --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.dzCard {
|
|
|
- --image-model_gas_item: url('@/assets/images/home-green/900.png');
|
|
|
- --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
|
|
|
- width: 100%;
|
|
|
- height: 72%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 86px;
|
|
|
-
|
|
|
- .gas-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+ --image-model_gas_item: url('@/assets/images/home-green/900.png');
|
|
|
+ --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
|
|
|
+ --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
|
|
|
+ width: 100%;
|
|
|
+ height: 72%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 86px;
|
|
|
+ .gas-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .gas-item {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px 5px;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ background: var(--image-model_gas_item) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ background: var(--image-model_gas_item1) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-box {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 68px;
|
|
|
+
|
|
|
+ .detail-container {
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .detail-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box1 {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 42px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box-label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 60px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box-val {
|
|
|
+ text-align: right;
|
|
|
+ color: #b9ffe5;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box-val1 {
|
|
|
+ text-align: right;
|
|
|
+ color: #b9f1ff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.dzCard1 {
|
|
|
+ --image-model_gas_item: url('@/assets/images/home-green/900.png');
|
|
|
+ --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
|
|
|
+ --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
|
|
|
+ width: 100%;
|
|
|
+ height: 72%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ .gas-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .gas-item {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px 5px;
|
|
|
+ &:nth-child(1) {
|
|
|
+ background: var(--image-model_fire_item) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ background: var(--image-model_fire_item) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .detail-box {
|
|
|
+ position: relative;
|
|
|
height: 100%;
|
|
|
+ padding-top: 15px;
|
|
|
+
|
|
|
+ .detail-container {
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: hidden;
|
|
|
+ &:hover {
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
|
|
|
- .gas-item {
|
|
|
- position: relative;
|
|
|
- width: 50%;
|
|
|
+ .detail-item {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- margin: 0px 5px;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- background: var(--image-model_gas_item) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .item-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box1 {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 42px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box-label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 60px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- background: var(--image-model_gas_item1) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .item-box-val {
|
|
|
+ text-align: right;
|
|
|
+ color: #c0fbff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- .detail-box {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- padding-top: 68px;
|
|
|
-
|
|
|
- .detail-container {
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .detail-item {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .item-box {
|
|
|
- width: 100%;
|
|
|
- padding: 0px 10px;
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .item-box1 {
|
|
|
- width: 100%;
|
|
|
- padding: 0px 10px;
|
|
|
- height: 42px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .item-box-label {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 60px;
|
|
|
- font-size: 12px;
|
|
|
- text-align: left;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .item-box-val {
|
|
|
- text-align: right;
|
|
|
- color: #b9ffe5;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .item-box-val1 {
|
|
|
- text-align: right;
|
|
|
- color: #b9f1ff;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 12px;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .item-box-val1 {
|
|
|
+ text-align: right;
|
|
|
+ color: #53f696;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|