add:新风系统
This commit is contained in:
zhaohy
@@ -25,7 +25,6 @@
|
||||
label: 'orgName',
|
||||
value: 'orgId',
|
||||
}"
|
||||
:disabled="true"
|
||||
tree-node-filter-prop="orgName" />
|
||||
</a-form-item>
|
||||
<a-form-item label="数据来源" name="dataSources">
|
||||
|
||||
@@ -25,7 +25,6 @@
|
||||
value: 'orgId',
|
||||
}"
|
||||
:tree-data="siteDataTree"
|
||||
:disabled="true"
|
||||
tree-node-filter-prop="orgName" />
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型" name="deviceType">
|
||||
|
||||
@@ -345,4 +345,3 @@
|
||||
width: 23%;
|
||||
}
|
||||
</style>
|
||||
../../../../api/alarmManagement/alarmSettings/deviceAlarms
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div class="box-title title">
|
||||
<span style="margin-left: 12px">空调相组</span>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<template v-for="(item, index) in dataSource" :key="index">
|
||||
<div class="box-bottom-item">
|
||||
<div class="box-bottom-item-top">
|
||||
<img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
|
||||
<div class="box-bottom-item-top-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div
|
||||
style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
|
||||
<div class="box-bottom-item-line">
|
||||
开关
|
||||
<div class="box-bottom-item-line-value">
|
||||
<a-tag
|
||||
style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
|
||||
:style="{
|
||||
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
|
||||
color: ['#39d7bb', '#f3614d', '#ffa403'][0],
|
||||
}"
|
||||
>开启</a-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
电机转速
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #f59a23">1210转/分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
换热器热度
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">8℃</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
风量
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">12345m3/h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
风速
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">22m/s</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
PM2.5
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
二氧化碳
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">123CO2e</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
dataSource: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return { title: '' };
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.title {
|
||||
position: relative;
|
||||
padding-left: 9px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
height: 12px;
|
||||
width: 3px;
|
||||
border-radius: 1px;
|
||||
background-color: #4388fb;
|
||||
}
|
||||
}
|
||||
.box-title {
|
||||
color: white;
|
||||
padding: 0px 10px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.box-bottom {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
overflow-x: hidden;
|
||||
.box-bottom-item {
|
||||
width: 100%;
|
||||
height: 478px;
|
||||
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
|
||||
background-size: 100% 99%;
|
||||
background-repeat: no-repeat;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
.box-bottom-item-top {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
padding: 6px 12px;
|
||||
position: relative;
|
||||
}
|
||||
.box-bottom-item-top-title {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 62px;
|
||||
top: 7px;
|
||||
}
|
||||
.box-bottom-item-line {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background-color: #0d1b32;
|
||||
font-size: 14px;
|
||||
padding: 6px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.box-bottom-item-line-value {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div class="box-title title">
|
||||
<span style="margin-left: 12px">新风主机</span>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<template v-for="(item, index) in dataSource" :key="index">
|
||||
<div class="box-bottom-item">
|
||||
<div class="box-bottom-item-top">
|
||||
<img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
|
||||
<div class="box-bottom-item-top-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div
|
||||
style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
|
||||
<div class="box-bottom-item-line">
|
||||
开关
|
||||
<div class="box-bottom-item-line-value">
|
||||
<a-tag
|
||||
style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
|
||||
:style="{
|
||||
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
|
||||
color: ['#39d7bb', '#f3614d', '#ffa403'][0],
|
||||
}"
|
||||
>开启</a-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
电机转速
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #f59a23">1210转/分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
换热器热度
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">8℃</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
风量
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">12345m3/h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
风速
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">22m/s</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
PM2.5
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom-item-line">
|
||||
二氧化碳
|
||||
<div class="box-bottom-item-line-value">
|
||||
<span style="color: #00ffd2">123CO2e</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
dataSource: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return { title: '' };
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.title {
|
||||
position: relative;
|
||||
padding-left: 9px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
height: 12px;
|
||||
width: 3px;
|
||||
border-radius: 1px;
|
||||
background-color: #4388fb;
|
||||
}
|
||||
}
|
||||
.box-title {
|
||||
color: white;
|
||||
padding: 0px 10px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.box-bottom {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
overflow-x: hidden;
|
||||
.box-bottom-item {
|
||||
width: 100%;
|
||||
height: 478px;
|
||||
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
|
||||
background-size: 100% 99%;
|
||||
background-repeat: no-repeat;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
.box-bottom-item-top {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
padding: 6px 12px;
|
||||
position: relative;
|
||||
}
|
||||
.box-bottom-item-top-title {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 62px;
|
||||
top: 7px;
|
||||
}
|
||||
.box-bottom-item-line {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background-color: #0d1b32;
|
||||
font-size: 14px;
|
||||
padding: 6px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.box-bottom-item-line-value {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%; display: flex">
|
||||
<div style="width: 100%; height: 100%; display: flex; overflow: hidden">
|
||||
<div class="legend-box">
|
||||
<template v-for="(item, index) in legend" :key="index">
|
||||
<div
|
||||
@@ -41,17 +41,20 @@
|
||||
<!-- 新风主机 -->
|
||||
<div v-if="selectIndex === 2">
|
||||
<template v-for="(item, index) in newTrend" :key="index">
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 12.9%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
}">
|
||||
<doubleSingleModel :dataSource="item" />
|
||||
</div>
|
||||
<img
|
||||
style="
|
||||
width: 50px;
|
||||
height: 75px;
|
||||
position: absolute;
|
||||
transform: rotateY(180deg);
|
||||
z-index: 1;
|
||||
"
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
transform: 'rotateY(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
<img
|
||||
@@ -60,6 +63,74 @@
|
||||
src="../image/airConditioningSystem/fan.png" />
|
||||
</template>
|
||||
</div>
|
||||
<!-- 新风主机详情 -->
|
||||
<a-drawer
|
||||
:visible="selectIndex === 2"
|
||||
:title="' '"
|
||||
:mask="false"
|
||||
class="newTrendModel"
|
||||
placement="right"
|
||||
headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
|
||||
bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
|
||||
@close="handleClose">
|
||||
<newTrendModel :dataSource="newTrend" />
|
||||
</a-drawer>
|
||||
<!-- 空调箱 -->
|
||||
<div v-if="selectIndex === 3">
|
||||
<template v-for="(item, index) in conditioningData" :key="index">
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left:
|
||||
'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.9%)' : ' - 13.3%)'),
|
||||
bottom:
|
||||
'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 8%)' : ' - 14%)'),
|
||||
}">
|
||||
<doubleSingleModel :dataSource="item" />
|
||||
</div>
|
||||
<img
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 2%)'),
|
||||
bottom: 'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4%)' : ' - 9%)'),
|
||||
transform: item.lineType === 1 ? 'rotateY(180deg)' : 'rotate(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
<img
|
||||
style="width: 42px; height: 42px; position: absolute"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/airConditioningSystem/conditioningIcon.png" />
|
||||
</template>
|
||||
</div>
|
||||
<!-- 空调箱详情 -->
|
||||
<a-drawer
|
||||
:visible="selectIndex === 3"
|
||||
:title="' '"
|
||||
:mask="false"
|
||||
class="newTrendModel"
|
||||
placement="right"
|
||||
headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
|
||||
bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
|
||||
@close="handleClose">
|
||||
<conditioningModel :dataSource="newTrend" />
|
||||
</a-drawer>
|
||||
<!-- 空调箱 顶部详情 -->
|
||||
<div
|
||||
v-if="selectIndex === 3"
|
||||
style="
|
||||
width: 974px;
|
||||
height: 146px;
|
||||
background-color: #282d33;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 380px;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
color: white;
|
||||
">
|
||||
{{ selectConditioning.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -72,9 +143,19 @@
|
||||
import airConditioner from '../image/airConditioningSystem/airConditioner.png';
|
||||
import floorHeating from '../image/airConditioningSystem/floorHeating.png';
|
||||
import selectImg from '../image/airConditioningSystem/selectImg.png';
|
||||
import temperatureBox from '../image/airConditioningSystem/temperature-box.png';
|
||||
// 温泉颜色
|
||||
import sunRed from '../image/airConditioningSystem/sunRed.png';
|
||||
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
|
||||
import sunBlue from '../image/airConditioningSystem/sunBlue.png';
|
||||
|
||||
import singleModel from '../components/singleModel.vue';
|
||||
import doubleSingleModel from '../components/doubleSingleModel.vue';
|
||||
import newTrendModel from './components/newTrendModel.vue';
|
||||
import conditioningModel from './components/conditioningModel.vue';
|
||||
onMounted(() => {
|
||||
selectConditioning.value = conditioningData.value[0];
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
//图例
|
||||
const legend = ref([
|
||||
{ url: temperature, name: '温度' },
|
||||
@@ -83,6 +164,8 @@
|
||||
{ url: airConditioner, name: '空调箱' },
|
||||
{ url: floorHeating, name: '地暖' },
|
||||
]);
|
||||
const newTrendModels = ref(null);
|
||||
|
||||
//温度传感器
|
||||
const sensor = ref([
|
||||
{
|
||||
@@ -91,7 +174,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunRed,
|
||||
},
|
||||
{
|
||||
title: 'G区多功能传感器',
|
||||
@@ -99,7 +182,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunYellow,
|
||||
},
|
||||
{
|
||||
title: 'F区多功能传感器',
|
||||
@@ -107,7 +190,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunRed,
|
||||
},
|
||||
{
|
||||
title: 'E区多功能传感器',
|
||||
@@ -115,7 +198,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunBlue,
|
||||
},
|
||||
{
|
||||
title: 'D区多功能传感器',
|
||||
@@ -123,7 +206,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunRed,
|
||||
},
|
||||
{
|
||||
title: 'C区多功能传感器',
|
||||
@@ -131,7 +214,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunRed,
|
||||
},
|
||||
{
|
||||
title: 'B区多功能传感器',
|
||||
@@ -139,7 +222,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunRed,
|
||||
},
|
||||
{
|
||||
title: 'A区多功能传感器',
|
||||
@@ -147,7 +230,7 @@
|
||||
type: '温度',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: temperatureBox,
|
||||
url: sunRed,
|
||||
},
|
||||
]);
|
||||
//人流
|
||||
@@ -224,17 +307,18 @@
|
||||
styleText: { left: '43%', bottom: '44%' },
|
||||
type: '新风主机',
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
number: 10,
|
||||
url: freshAir,
|
||||
},
|
||||
{
|
||||
title: 'C区新风主机',
|
||||
styleText: { left: '45%', bottom: '23%' },
|
||||
type: '新风主机',
|
||||
number: 20,
|
||||
unit: '℃',
|
||||
},
|
||||
{
|
||||
title: 'background-size区新风主机',
|
||||
title: 'B区新风主机',
|
||||
styleText: { left: '61.5%', bottom: '54%' },
|
||||
type: '新风主机',
|
||||
unit: '℃',
|
||||
@@ -245,22 +329,99 @@
|
||||
title: 'A区新风主机',
|
||||
styleText: { left: '63%', bottom: '36%' },
|
||||
type: '新风主机',
|
||||
number: 30,
|
||||
unit: '℃',
|
||||
},
|
||||
]);
|
||||
//空调箱
|
||||
const conditioningData = ref([
|
||||
{
|
||||
title: '走廊区',
|
||||
styleText: { left: '13%', bottom: '23%' },
|
||||
type: '空调箱',
|
||||
lineType: 1,
|
||||
unit: '℃',
|
||||
number: 20,
|
||||
url: freshAir,
|
||||
},
|
||||
{
|
||||
title: '西区',
|
||||
styleText: { left: '28%', bottom: '30%' },
|
||||
type: '空调箱',
|
||||
lineType: 1,
|
||||
unit: '℃',
|
||||
number: 34,
|
||||
url: freshAir,
|
||||
},
|
||||
{
|
||||
title: '西北区',
|
||||
styleText: { left: '38%', bottom: '45.5%' },
|
||||
type: '空调箱',
|
||||
lineType: 1,
|
||||
unit: '℃',
|
||||
number: 34,
|
||||
url: freshAir,
|
||||
},
|
||||
{
|
||||
title: '东北区',
|
||||
styleText: { left: '57%', bottom: '53%' },
|
||||
lineType: 1,
|
||||
type: '空调箱',
|
||||
unit: '℃',
|
||||
number: 34,
|
||||
url: freshAir,
|
||||
},
|
||||
{
|
||||
title: '东区',
|
||||
styleText: { left: '73%', bottom: '53%' },
|
||||
lineType: 1,
|
||||
type: '空调箱',
|
||||
unit: '℃',
|
||||
number: 34,
|
||||
url: freshAir,
|
||||
},
|
||||
{
|
||||
title: '东南区',
|
||||
styleText: { left: '68%', bottom: '38%' },
|
||||
lineType: 2,
|
||||
type: '空调箱',
|
||||
unit: '℃',
|
||||
number: 15,
|
||||
url: freshAir,
|
||||
},
|
||||
{
|
||||
title: '西南区',
|
||||
styleText: { left: '43.5%', bottom: '22%' },
|
||||
lineType: 2,
|
||||
type: '空调箱',
|
||||
unit: '℃',
|
||||
number: 15,
|
||||
url: freshAir,
|
||||
},
|
||||
]);
|
||||
//选择的空调箱
|
||||
const selectConditioning = ref({});
|
||||
// 选择的图例
|
||||
const selectIndex = ref(0);
|
||||
const selectLegend = (item: any, index: any) => {
|
||||
if (selectIndex.value !== index) {
|
||||
selectIndex.value = index;
|
||||
}
|
||||
if (selectIndex.value === 2) {
|
||||
setTimeout(() => {
|
||||
newTrendModels.value.toggle(newTrend);
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
const handleClose = () => {
|
||||
selectIndex.value = 0;
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
.legend-box {
|
||||
width: 5%;
|
||||
height: 100%;
|
||||
background-color: rgba(40, 45, 51, 1);
|
||||
background-color: rgba(33, 40, 54, 0.95);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
padding: 4px;
|
||||
.legend-box-item {
|
||||
@@ -299,4 +460,11 @@
|
||||
overflow: hidden;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
}
|
||||
.newTrendModel {
|
||||
overflow-y: auto;
|
||||
.anticon {
|
||||
color: white !important;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
<!-- 双图 -->
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title title">
|
||||
{{ dataSource.title }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
">
|
||||
<div
|
||||
style="
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">
|
||||
<img style="width: 39px" src="../image/airConditioningSystem/electricFan.png" />
|
||||
<div style="margin-top: 4px"> 风量 </div>
|
||||
<div style="margin-top: -5px">
|
||||
<span style="font-size: 18px; color: #0dffff; font-style: italic"> 18 </span>
|
||||
<span style="font-size: 10px; margin-left: 5px">m3/h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">
|
||||
<img style="width: 39px" :src="getSunUrl()" />
|
||||
<div style="margin-top: 4px"> 温度 </div>
|
||||
<div style="margin-top: -5px">
|
||||
<span :style="{ fontSize: '18px', color: getColor(), fontStyle: 'italic' }">
|
||||
{{ dataSource.number }}
|
||||
</span>
|
||||
<span style="font-size: 10px; margin-left: 5px">℃</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import sunRed from '../image/airConditioningSystem/sunRed.png';
|
||||
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
|
||||
import sunBlue from '../image/airConditioningSystem/sunBlue.png';
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: Object,
|
||||
default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
|
||||
},
|
||||
});
|
||||
const getSunUrl = () => {
|
||||
if (props.dataSource.number > 0 && props.dataSource.number < 20) {
|
||||
return sunBlue;
|
||||
} else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
|
||||
return sunYellow;
|
||||
} else {
|
||||
return sunRed;
|
||||
}
|
||||
};
|
||||
const getColor = () => {
|
||||
if (props.dataSource.number > 0 && props.dataSource.number < 20) {
|
||||
return '#0dffa4';
|
||||
} else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
|
||||
return '#f59a23';
|
||||
} else {
|
||||
return '#f36163';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
width: 192px;
|
||||
height: 125px;
|
||||
background: inherit;
|
||||
background-color: rgba(2, 29, 71, 0.9);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(13, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
.title {
|
||||
position: relative;
|
||||
padding-left: 9px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 90%;
|
||||
transform: translateY(-50%);
|
||||
height: 10px;
|
||||
width: 2.5px;
|
||||
border-radius: 1px;
|
||||
background-color: #0dffff;
|
||||
}
|
||||
}
|
||||
.box-title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
color: #0dffff;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -20,7 +20,7 @@
|
||||
dataSource: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return { name: '' };
|
||||
return { title: '' };
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Reference in New Issue
Block a user