|
|
|
@ -19,7 +19,7 @@ |
|
|
|
<div class="map-box"> |
|
|
|
<!-- 温度 --> |
|
|
|
<div v-if="selectIndex === 0"> |
|
|
|
<template v-for="(item, index) in sensor" :key="index"> |
|
|
|
<template v-for="(item, index) in sensorData" :key="index"> |
|
|
|
<div |
|
|
|
style="position: absolute" |
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"> |
|
|
|
@ -43,21 +43,22 @@ |
|
|
|
<div |
|
|
|
style="position: absolute" |
|
|
|
:style="{ |
|
|
|
left: 'calc(' + item.styleText.left + ' - 12.9%)', |
|
|
|
left: 'calc(' + item.styleText.left + ' - 14%)', |
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 8%)', |
|
|
|
'z-index': 2, |
|
|
|
}"> |
|
|
|
<doubleSingleModel :dataSource="item" /> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 50px; height: 75px; position: absolute; z-index: 1" |
|
|
|
style="width: 50px; height: 75px; position: absolute" |
|
|
|
:style="{ |
|
|
|
left: 'calc(' + item.styleText.left + ' - 1.5%)', |
|
|
|
left: 'calc(' + item.styleText.left + ' - 2%)', |
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 4%)', |
|
|
|
transform: 'rotateY(180deg)', |
|
|
|
}" |
|
|
|
src="../image/liftState/lift/line.png" /> |
|
|
|
<img |
|
|
|
style="width: 42px; height: 42px; position: absolute" |
|
|
|
style="width: 42px; height: 42px; position: absolute; z-index: 2" |
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }" |
|
|
|
src="../image/airConditioningSystem/fan.png" /> |
|
|
|
</template> |
|
|
|
@ -78,25 +79,25 @@ |
|
|
|
<div v-if="selectIndex === 3"> |
|
|
|
<template v-for="(item, index) in conditioningData" :key="index"> |
|
|
|
<div |
|
|
|
style="position: absolute" |
|
|
|
style="position: absolute; z-index: 2" |
|
|
|
:style="{ |
|
|
|
left: |
|
|
|
'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.9%)' : ' - 13.3%)'), |
|
|
|
left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.8%)' : ' - 13%)'), |
|
|
|
bottom: |
|
|
|
'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 8%)' : ' - 14%)'), |
|
|
|
'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 7%)' : ' - 14%)'), |
|
|
|
}"> |
|
|
|
<doubleSingleModel :dataSource="item" /> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 50px; height: 75px; position: absolute; z-index: 1" |
|
|
|
style="width: 50px; height: 75px; position: absolute" |
|
|
|
:style="{ |
|
|
|
left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 2%)'), |
|
|
|
bottom: 'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4%)' : ' - 9%)'), |
|
|
|
left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 1.8%)'), |
|
|
|
bottom: |
|
|
|
'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4.5%)' : ' - 9%)'), |
|
|
|
transform: item.lineType === 1 ? 'rotateY(180deg)' : 'rotate(180deg)', |
|
|
|
}" |
|
|
|
src="../image/liftState/lift/line.png" /> |
|
|
|
<img |
|
|
|
style="width: 42px; height: 42px; position: absolute" |
|
|
|
style="width: 42px; height: 42px; position: absolute; z-index: 2" |
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }" |
|
|
|
src="../image/airConditioningSystem/conditioningIcon.png" /> |
|
|
|
</template> |
|
|
|
@ -115,19 +116,19 @@ |
|
|
|
ref="conditioningModels" |
|
|
|
@selectConditioningData="selectConditioningData" /> |
|
|
|
</a-drawer> |
|
|
|
<!-- 空调箱 顶部详情 --> |
|
|
|
<!-- 空调箱 顶部详情 现阶段没有数据 先隐藏掉 --> |
|
|
|
<transition name="zep"> |
|
|
|
<div |
|
|
|
v-if="selectIndex === 3 && selectConditioning && selectConditioning?.title" |
|
|
|
v-if="selectIndex === 3 && selectConditioning && selectConditioning?.title && false" |
|
|
|
class="newTrend-box"> |
|
|
|
<newTreedBox :selectConditioning="selectConditioning" /> |
|
|
|
<conditioningBox :selectConditioning="selectConditioning" /> |
|
|
|
</div> |
|
|
|
</transition> |
|
|
|
<!-- 地暖 --> |
|
|
|
<div v-if="selectIndex === 4"> |
|
|
|
<template v-for="(item, index) in floorHeatingData" :key="index"> |
|
|
|
<div |
|
|
|
style="position: absolute" |
|
|
|
style="position: absolute; z-index: 1" |
|
|
|
:style="{ |
|
|
|
left: |
|
|
|
'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.9%)' : ' - 13.3%)'), |
|
|
|
@ -137,7 +138,7 @@ |
|
|
|
<doubleSingleModel :dataSource="item" /> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 50px; height: 75px; position: absolute; z-index: 1" |
|
|
|
style="width: 50px; height: 75px; position: absolute" |
|
|
|
:style="{ |
|
|
|
left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 2%)'), |
|
|
|
bottom: 'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4%)' : ' - 9%)'), |
|
|
|
@ -145,7 +146,7 @@ |
|
|
|
}" |
|
|
|
src="../image/liftState/lift/line.png" /> |
|
|
|
<img |
|
|
|
style="width: 42px; height: 42px; position: absolute" |
|
|
|
style="width: 42px; height: 42px; position: absolute; z-index: 1" |
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }" |
|
|
|
src="../image/airConditioningSystem/floorHeatingIcon.png" /> |
|
|
|
</template> |
|
|
|
@ -174,7 +175,7 @@ |
|
|
|
import airConditioner from '../image/airConditioningSystem/airConditioner.svg'; |
|
|
|
import floorHeating from '../image/airConditioningSystem/floorHeating.svg'; |
|
|
|
import selectImg from '../image/airConditioningSystem/selectImg.png'; |
|
|
|
// 温泉颜色 |
|
|
|
// 温度颜色 |
|
|
|
import sunRed from '../image/airConditioningSystem/sunRed.png'; |
|
|
|
import sunYellow from '../image/airConditioningSystem/sunYellow.png'; |
|
|
|
import sunGreen from '../image/airConditioningSystem/sunGreen.png'; |
|
|
|
@ -183,9 +184,23 @@ |
|
|
|
import doubleSingleModel from '../components/doubleSingleModel.vue'; |
|
|
|
import newTrendModel from './components/newTrendModel.vue'; |
|
|
|
import conditioningModel from './components/conditioningModel.vue'; |
|
|
|
import newTreedBox from './components/newTreedBox.vue'; |
|
|
|
import conditioningBox from './components/conditioningBox.vue'; |
|
|
|
import floorHeatingModel from './components/floorHeatingModel.vue'; |
|
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
|
import { ventilating } from '/@/api/ventilatingSystem'; |
|
|
|
import { airConditioningSystemApi } from '/@/api/airConditioningSystem'; |
|
|
|
|
|
|
|
// 全局变量 |
|
|
|
import { items } from '/@/store/item'; |
|
|
|
// 定位数据 |
|
|
|
import { |
|
|
|
devicePosition, |
|
|
|
newTrendPosition, |
|
|
|
airConditioningPosition, |
|
|
|
floorHeatingPosition, |
|
|
|
} from './devicePosition'; |
|
|
|
// 全局变量 |
|
|
|
const state = items(); |
|
|
|
onMounted(() => {}); |
|
|
|
onUnmounted(() => {}); |
|
|
|
//图例 |
|
|
|
@ -199,139 +214,9 @@ |
|
|
|
const newTrendModels = ref(null); |
|
|
|
|
|
|
|
//温度传感器 |
|
|
|
const sensor = ref([ |
|
|
|
{ |
|
|
|
title: 'H区多功能传感器', |
|
|
|
styleText: { left: '28%', bottom: '44%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunRed, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'G区多功能传感器', |
|
|
|
styleText: { left: '35%', bottom: '23%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunYellow, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'F区多功能传感器', |
|
|
|
styleText: { left: '47%', bottom: '31%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunRed, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'E区多功能传感器', |
|
|
|
styleText: { left: '38.5%', bottom: '49%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunGreen, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'D区多功能传感器', |
|
|
|
styleText: { left: '65%', bottom: '43%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunRed, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'C区多功能传感器', |
|
|
|
styleText: { left: '52%', bottom: '55.5%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunRed, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'B区多功能传感器', |
|
|
|
styleText: { left: '76%', bottom: '48%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunRed, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'A区多功能传感器', |
|
|
|
styleText: { left: '63%', bottom: '60%' }, |
|
|
|
type: '温度', |
|
|
|
unit: '℃', |
|
|
|
number: 20, |
|
|
|
url: sunRed, |
|
|
|
}, |
|
|
|
]); |
|
|
|
const sensorData = ref([]); |
|
|
|
//人流 |
|
|
|
const peopleData = ref([ |
|
|
|
{ |
|
|
|
title: 'H区人流传感器', |
|
|
|
styleText: { left: '36%', bottom: '21%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'G区人流传感器', |
|
|
|
styleText: { left: '28.5%', bottom: '43.5%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'E区人流传感器', |
|
|
|
styleText: { left: '39%', bottom: '48%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'F区人流传感器', |
|
|
|
styleText: { left: '47.5%', bottom: '29.5%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'D区人流传感器', |
|
|
|
styleText: { left: '66%', bottom: '42%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'C区人流传感器', |
|
|
|
styleText: { left: '53%', bottom: '54.5%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'B区人流传感器', |
|
|
|
styleText: { left: '77%', bottom: '47%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'A区人流传感器', |
|
|
|
styleText: { left: '64%', bottom: '59%' }, |
|
|
|
type: '人流', |
|
|
|
unit: '人', |
|
|
|
number: 120, |
|
|
|
url: people, |
|
|
|
}, |
|
|
|
]); |
|
|
|
const peopleData = ref([]); |
|
|
|
//新风主机 |
|
|
|
const newTrend = ref([ |
|
|
|
{ |
|
|
|
@ -379,7 +264,7 @@ |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '西区', |
|
|
|
styleText: { left: '28%', bottom: '30%' }, |
|
|
|
styleText: { left: '28%', bottom: '28%' }, |
|
|
|
type: '空调箱', |
|
|
|
lineType: 1, |
|
|
|
unit: '℃', |
|
|
|
@ -520,6 +405,146 @@ |
|
|
|
const handleClose = () => { |
|
|
|
selectIndex.value = 0; |
|
|
|
}; |
|
|
|
//根据温度获取图片 |
|
|
|
const getSunUrl = (number: any) => { |
|
|
|
if (number > 0 && number < 20) { |
|
|
|
return sunGreen; |
|
|
|
} else if (number >= 20 && number < 30) { |
|
|
|
return sunYellow; |
|
|
|
} else { |
|
|
|
return sunRed; |
|
|
|
} |
|
|
|
}; |
|
|
|
//获取温度颜色 |
|
|
|
const getColor = (number: any) => { |
|
|
|
if (number > 0 && number < 20) { |
|
|
|
return '#0dffa4'; |
|
|
|
} else if (number >= 20 && number < 30) { |
|
|
|
return '#f59a23'; |
|
|
|
} else { |
|
|
|
return '#f36163'; |
|
|
|
} |
|
|
|
}; |
|
|
|
// 获取传感器数据 |
|
|
|
const getSensorData = () => { |
|
|
|
sensorData.value = []; |
|
|
|
peopleData.value = []; |
|
|
|
http |
|
|
|
.get(ventilating.getSensorData, { projectId: state.projectId, siteId: state.siteId }) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
res.data.forEach((item: any, index: number) => { |
|
|
|
sensorData.value.push({ |
|
|
|
title: item.deviceInfoName, |
|
|
|
styleText: devicePosition[index], |
|
|
|
type: '温度', |
|
|
|
unit: item.record.tempUnit, |
|
|
|
number: item.record.temp, |
|
|
|
url: getSunUrl(item.record.temp), |
|
|
|
fontColor: getColor(item.record.temp), |
|
|
|
}); |
|
|
|
peopleData.value.push({ |
|
|
|
title: item.deviceInfoName, |
|
|
|
styleText: devicePosition[index], |
|
|
|
type: '人流', |
|
|
|
unit: item.record.peopleNumUnit, |
|
|
|
number: item.record.peopleNum, |
|
|
|
url: people, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
const getnewTrendData = () => { |
|
|
|
newTrend.value = []; |
|
|
|
http |
|
|
|
.get(airConditioningSystemApi.getVentHostCtrlList, { |
|
|
|
projectId: state.projectId, |
|
|
|
siteId: state.siteId, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
res.data.forEach((item: any, index: number) => { |
|
|
|
newTrend.value.push({ |
|
|
|
title: item.deviceInfoName, |
|
|
|
styleText: newTrendPosition[index], |
|
|
|
type: '新风主机', |
|
|
|
number: item.record.converterTemp, |
|
|
|
numberUnit: item.record.converterTempUnit, |
|
|
|
url: freshAir, |
|
|
|
...item.record, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
const getAcBoxCtrlList = () => { |
|
|
|
conditioningData.value = []; |
|
|
|
http |
|
|
|
.get(airConditioningSystemApi.getAcBoxCtrlList, { |
|
|
|
projectId: state.projectId, |
|
|
|
siteId: state.siteId, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
res.data.forEach((item: any, index: number) => { |
|
|
|
conditioningData.value.push({ |
|
|
|
title: item.deviceInfoName, |
|
|
|
styleText: airConditioningPosition[index].styleText, |
|
|
|
type: '空调箱', |
|
|
|
numberUnit: item.record.tempUnit, |
|
|
|
lineType: airConditioningPosition[index].lineType, |
|
|
|
number: item.record.temp, |
|
|
|
url: freshAir, |
|
|
|
state: item.record.switchStatus.value, |
|
|
|
...item.record, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
const getTempSysCtrlList = () => { |
|
|
|
floorHeatingData.value = []; |
|
|
|
http |
|
|
|
.get(airConditioningSystemApi.getTempSysCtrlList, { |
|
|
|
projectId: state.projectId, |
|
|
|
siteId: state.siteId, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
console.log(res, '地暖'); |
|
|
|
if (res.msg === 'success') { |
|
|
|
res.data.forEach((item: any, index: number) => { |
|
|
|
floorHeatingData.value.push({ |
|
|
|
title: item.deviceInfoName, |
|
|
|
styleText: floorHeatingPosition[index].styleText, |
|
|
|
type: '地暖', |
|
|
|
number: item.record.currentTemp, |
|
|
|
numberUnit: item.record.currentTempUnit, |
|
|
|
lineType: floorHeatingPosition[index].lineType, |
|
|
|
...item.record, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
const fetchData = () => { |
|
|
|
//传感器 |
|
|
|
getSensorData(); |
|
|
|
//新风主机 |
|
|
|
getnewTrendData(); |
|
|
|
//获取空调箱 |
|
|
|
getAcBoxCtrlList(); |
|
|
|
//获取地暖 |
|
|
|
getTempSysCtrlList(); |
|
|
|
}; |
|
|
|
//实时获取数据 暂定一分钟 |
|
|
|
const intervalId = setInterval(fetchData, 60000); |
|
|
|
onMounted(() => { |
|
|
|
fetchData(); |
|
|
|
}); |
|
|
|
onUnmounted(() => { |
|
|
|
clearInterval(intervalId); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
.legend-box { |
|
|
|
@ -593,7 +618,7 @@ |
|
|
|
width: 95%; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
background-image: url(../image/bg.jpg); |
|
|
|
background-image: url(../image/floor-1.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
overflow: hidden; |
|
|
|
|
fks-yangshouda
3 months ago