You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

814 lines
21 KiB
Vue

2 years ago
<template>
1 year ago
<div class="container"
:style="'background-image: url('+((controlList&& controlList.length === 0) ? bgImg1 : bgImg)+')'">
<div class="title1">监控设备</div>
2 years ago
<div class="centerImg"></div>
<div class="title">监控单元</div>
2 years ago
<div class="tree">
<el-tree
:data="treeData"
accordion
node-key="id"
@node-click="treeClick">
2 years ago
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
1 year ago
<div v-if="show" :class="((controlList&& controlList.length === 0) ? 'equipmentInfo1' : 'equipmentInfo')">
2 years ago
<p>
<span>名称</span>
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitName }}</span>
2 years ago
</p>
<p>
<span>ID</span>
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitId }}</span>
2 years ago
</p>
<p>
<span>状态</span>
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitStatus === '1' ? '正常' : '异常' }}</span>
2 years ago
</p>
<p>
<span>类型</span>
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitTypeName }}</span>
2 years ago
</p>
</div>
2 years ago
<div v-if="show"
:style="'background-image: url('+(MonitorInfo.monitorPic ? MonitorInfo.monitorPic :defaultImg)+');'"
1 year ago
:class="((controlList&& controlList.length === 0) ? 'img1' : 'img')"></div>
2 years ago
<div class="terminal">
<div class="terminalList">
2 years ago
<div v-for="(i,k) in controlList" class="item">
2 years ago
<div :style="'background-image: url('+(i.devicePic ? i.devicePic :defaultImg1)+');'" class="icon"></div>
<div class="title">{{ i.deviceName + ' - ' + i.deviceModeFunction.functionName }}</div>
2 years ago
<div class="switch">
<el-button
2 years ago
size="mini"
type="primary"
@click="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">
执行
</el-button>
2 years ago
<!-- <el-switch-->
<!-- v-model="i.deviceType==='1'"-->
<!-- active-color="#1165a1"-->
<!-- inactive-color="#1facf4"-->
<!-- @change="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">-->
<!-- </el-switch>-->
2 years ago
</div>
</div>
</div>
</div>
<div class="right">
<div v-for="i in acquisitionList" class="item">
2 years ago
<div class="iconBg"></div>
<div
class="icon">
<el-image
v-if="i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))]"
:preview-src-list="[i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))]]"
:src="i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))]"
style="width: 100%; height: 100%">
</el-image>
<el-image
v-else-if="i.devicePic"
:src="i.devicePic"
style="width: 100%; height: 100%">
</el-image>
<el-image
v-else
:src="defaultImg1"
style="width: 100%; height: 100%">
</el-image>
</div>
2 years ago
<div class="rightBg">
<div class="title">{{ i.deviceName }}</div>
<div style="position: absolute;left: 24%;top: 0px;width: 55%;height: 100%;">
<div
v-for="val in Object.keys(i.deviceDataMap).slice(0,6).filter(e=> !(i.deviceDataMap[e].toString().includes('http')))"
2 years ago
:style="'height:'+(Object.keys(i.deviceDataMap).length<4 ? '100%':'50%')" class="infoItem">
<div class="span">{{ val }}:</div>
<div class="spanBg"></div>
<div class="num">{{ i.deviceDataMap[val] }}</div>
</div>
2 years ago
</div>
<div class="btn">
2 years ago
<div class="btnC" style="top: 50%">
<el-button type="primary" @click="toHistory(i.deviceId,i.deviceModeId)"></el-button>
2 years ago
</div>
</div>
</div>
</div>
</div>
1 year ago
<el-dialog title="历史记录" :visible.sync="historyDialog">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form-item label="查询时间">
<el-date-picker
v-model="form.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="查询类型">
<el-select v-model="form.type" placeholder="">
<el-option label="趋势分析" value="1"></el-option>
<el-option label="历史数据" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getHistoryData"></el-button>
</el-form-item>
</el-form>
<div style="margin-bottom: 12px">
<el-button type="primary" @click="exportF"></el-button>
<el-button type="success" @click="comparison"></el-button>
</div>
<el-table
:data="historyData"
1 year ago
v-if="isHistoryTable"
1 year ago
style="width: 100%">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
1 year ago
v-for="i in Object.keys(historyTh)"
v-if="historyTh[i]"
:prop="i"
:label="historyTh[i]"
1 year ago
width="180">
</el-table-column>
</el-table>
<pagination
1 year ago
v-if="isHistoryTable"
1 year ago
v-show="total>0"
:total="total"
:page.sync="form.pageNum"
:limit.sync="form.pageSize"
@pagination="getHistoryData"
/>
1 year ago
<Chart v-if="!isHistoryTable" ref="historyChart" class="historyChart"></Chart>
1 year ago
</el-dialog>
<el-dialog title="对比" :visible.sync="comparisonDialog">
<el-form ref="form1" :rules="rules" :inline="true" :model="form1" class="demo-form-inline">
<el-form-item label="查询时间" prop="time">
<el-date-picker
v-model="form1.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="传感器" prop="sensor">
<el-cascader
v-model="sensorData"
:options="sensorOptions"
:props="props"
collapse-tags
@change="sensorChange"
clearable></el-cascader>
</el-form-item>
<el-form-item label="对比属性" prop="prop">
<el-select v-model="form1.prop" placeholder="">
<el-option v-for="i in comparisonOptions" :label="i" :value="i"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getComparisonData"></el-button>
</el-form-item>
</el-form>
<div>
<Chart ref="chart" class="chart"></Chart>
</div>
</el-dialog>
2 years ago
</div>
</template>
<script>
2 years ago
import {
treeList,
2 years ago
selectDevicesByMonitorUnitId,
getMonitorById,
1 year ago
publishControlCommand,
selectHistoryAndTrendAnalysis,
selectComparison,
exportData
2 years ago
} from '@/api/board/equipment'
2 years ago
import defaultImg from '@/assets/board/equipment/icon.png'
import defaultImg1 from '@/assets/board/equipment/icon2.png'
import defaultImg2 from '@/assets/board/equipment/defaultImg.png'
1 year ago
import bgImg from '@/assets/board/equipment/bg.jpg'
import bgImg1 from '@/assets/board/equipment/bg2.jpg'
1 year ago
import Chart from '@/components/Charts/Chart'
2 years ago
2 years ago
let getDeviceInterval = null
2 years ago
export default {
1 year ago
components: {Chart},
2 years ago
data() {
1 year ago
const validatePass = (rule, value, callback) => {
if (this.sensorData.length > 5) {
return callback(new Error('最多选择五个传感器'));
} else {
callback()
}
}
2 years ago
return {
2 years ago
defaultImg,
defaultImg1,
defaultImg2,
1 year ago
bgImg,
bgImg1,
1 year ago
rules: {
sensor: [
{validator: validatePass, trigger: 'change'}
],
prop: [
{required: true, message: '请选择对比属性', trigger: 'change'}
]
},
2 years ago
show: false,
monitorUnitId: '',
2 years ago
data1: true,
treeData: [],
controlList: [],
acquisitionList: [],
MonitorInfo: {},
sceneId: 0,
1 year ago
deviceId: '',
historyDialog: false,
form: {},
form1: {
time: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24), new Date()],
},
historyData: [],
1 year ago
historyTh:{},
isHistoryTable:true,
1 year ago
total: 100,
comparisonDialog: false,
sensorOptions: [],
sensorData: '',
comparisonOptions: [],
props: {
multiple: true,
value: 'voId',
label: 'voName',
children: 'voList'
},
propArr: [],
2 years ago
}
},
async mounted() {
2 years ago
await this.getData()
2 years ago
this.sceneId = this.$store.getters.sceneId
if (this.$route.query.monitorUnitId) {
2 years ago
this.deviceId = this.$route.query.monitorUnitId
await this.treeClick({id: this.$route.query.monitorUnitId})
2 years ago
}
2 years ago
},
1 year ago
beforeDestroy() {
clearInterval(getDeviceInterval)
},
2 years ago
methods: {
async getData() {
await this.getTree()
},
2 years ago
switchChange(functionIdentifier, deviceId, deviceCode, modeFunctionId) {
this.$confirm('确定执行么?', '提示', {
2 years ago
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
publishControlCommand({
2 years ago
deviceId: deviceId,
modeFunctionId: modeFunctionId,
deviceCode: deviceCode,
type: functionIdentifier,
}).then(e => {
if (e.code === 200) {
this.$message({
type: 'success',
message: '成功!'
});
1 year ago
const device = this.controlList.find(e => e.deviceId === deviceId);
device.deviceType = device.deviceType === '1' ? '0' : '1';
// this.controlList.find(e => e.deviceId === deviceId).deviceType === '1' ? this.controlList.find(e => e.deviceId === deviceId).deviceType = '0' : this.controlList.find(e => e.deviceId === deviceId).deviceType = '1'
2 years ago
} else {
this.$message({
type: 'info',
message: '网络错误'
});
}
})
2 years ago
}).catch(() => {
this.$message({
type: 'info',
message: '取消'
});
});
},
2 years ago
async getTree() {
2 years ago
if (this.$store.getters.sceneId) {
const {data} = await treeList(this.$store.getters.sceneId)
this.treeData = data
}
2 years ago
},
async treeClick(e) {
2 years ago
if (!e.children?.length > 0) {
this.monitorUnitId = e.id
await this.getDevice(e.id)
await this.setMonitorById(e)
2 years ago
this.show = true
2 years ago
if (typeof getDeviceInterval === 'number') {
2 years ago
clearInterval(getDeviceInterval)
}
2 years ago
getDeviceInterval = setInterval(() => {
2 years ago
this.getDevice(e.id)
2 years ago
}, 30 * 1000)
2 years ago
}
},
async getDevice(e) {
if (this.$store.getters.sceneId) {
2 years ago
const {data} = await selectDevicesByMonitorUnitId(e, this.$store.getters.sceneId)
this.deviceId = e
this.controlList = data.control
this.acquisitionList = data.acquisition
}
2 years ago
},
2 years ago
async setMonitorById(e) {
const {data} = await getMonitorById(e.id)
this.MonitorInfo = data
2 years ago
},
2 years ago
toHistory(e, i) {
1 year ago
// this.$router.push({path: "/board/senso", query: {id: e, deviceModeId: i}});
this.historyDialog = true
this.form = {
pageNum: 1,
pageSize: 10,
deviceIds: e,
time: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24), new Date()],
type: "2",
}
this.getHistoryData()
},
async getHistoryData() {
let query = JSON.parse(JSON.stringify(this.form))
query.startTime = this.parseTime(this.form.time?.[0]?.getTime())
query.endTime = this.parseTime(this.form.time?.[1]?.getTime())
delete query.time
const data = await selectHistoryAndTrendAnalysis(query)
1 year ago
if(query.type === '1'){
this.isHistoryTable = false
this.$nextTick(()=>{
let series = Object.keys(data.mapName).map(e => {
if(data.mapName[e]){
return {
name: data.mapName[e],
type: 'line',
stack: 'Total',
data: data.tableDataInfo.rows.map(v=>[new Date(v.ts),v[e]])
}
}
})
this.$refs.historyChart.setData({
tooltip: {
trigger: 'axis'
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: series
})
})
}
if(query.type === '2'){
this.isHistoryTable = true
this.$nextTick(()=>{
this.historyData = data.tableDataInfo.rows
this.historyTh = data.mapName
this.total = data.tableDataInfo.total
})
}
1 year ago
},
async comparison() {
this.comparisonDialog = true
const data = await selectComparison()
let propArr = []
const f = (arr) => {
arr.forEach(v => {
if (v.voList) {
f(v.voList)
} else {
propArr.push({
id: v.voId,
name: v.voName,
props: (v.prop || '').split(',')
})
}
})
}
f(data.data)
this.propArr = propArr
this.sensorOptions = data.data
},
sensorChange(e) {
let comparisonData = []
let sensorArr = []
e.forEach(v => {
sensorArr.push(v.at(-1))
comparisonData = [...new Set([...comparisonData, ...(this.propArr.find(item => item.id === v.at(-1))?.props || [])])].filter(v => v)
})
this.comparisonOptions = comparisonData
this.form1.sensor = sensorArr
},
getComparisonData() {
this.$refs['form1'].validate(async (valid) => {
if (valid) {
let query = JSON.parse(JSON.stringify({
...this.form1,
deviceIds: this.form1.sensor.join(','),
startTime: this.parseTime(this.form1.time?.[0]?.getTime()),
endTime: this.parseTime(this.form1.time?.[1]?.getTime())
}))
delete query.time
delete query.sensor
const data = await selectHistoryAndTrendAnalysis(query)
let chartData = {}
1 year ago
data.tableDataInfo.rows.forEach(e => {
1 year ago
if (chartData[e.deviceId]) {
chartData[e.deviceId].push({
value: [new Date(e.ts), e.functionIdentifier]
})
} else {
chartData[e.deviceId] = [{
value: [new Date(e.ts), e.functionIdentifier]
}]
}
})
let series = Object.keys(chartData).map(e => {
return {
name: this.propArr.find(item => item.id === parseFloat(e)).name,
type: 'line',
stack: 'Total',
data: chartData[e]
}
})
this.$refs.chart.setData({
tooltip: {
trigger: 'axis'
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: series
})
} else {
return false;
}
});
},
async exportF() {
let query = JSON.parse(JSON.stringify(this.form))
query.startTime = this.parseTime(this.form.time?.[0]?.getTime())
query.endTime = this.parseTime(this.form.time?.[1]?.getTime())
delete query.time
const data = exportData(query, '历史数据')
}
2 years ago
},
2 years ago
};
</script>
<style lang="less" scoped>
.title1 {
2 years ago
position: absolute;
top: 12%;
left: 73%;
font-size: 1vw;
color: #00f8ff;
transform: translateX(-50%);
}
2 years ago
.container {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: calc(100vh);
position: relative;
}
.title {
position: absolute;
top: 12.9%;
left: 6%;
font-size: 0.9vw;
color: #d9dee3;
}
.tree {
position: absolute;
top: 18.9%;
left: 2%;
width: 13%;
height: 78%;
/deep/ .el-tree {
background-color: #0000;
color: #d9dee3;
}
/deep/ .el-tree-node__content:hover {
background-color: #0d5e93;
}
/deep/ .el-tree-node__content {
height: 40px;
border-bottom: 1px solid #fff2;
}
/deep/ .is-current {
background-color: #0d5e93;
}
/deep/ .custom-tree-node {
padding-left: 8px;
}
}
.equipmentInfo {
position: absolute;
top: 11.6%;
left: 17.2%;
width: 16%;
height: 20%;
color: #1684c2;
padding: 2vh 0 0 1vw;
p {
margin: 0;
line-height: 4vh;
font-size: 0.9vw;
}
}
1 year ago
.equipmentInfo1 {
position: absolute;
top: 52.6%;
left: 17.2%;
width: 28.4%;
height: 44%;
color: #1684c2;
padding: 2vh 0 0 1vw;
p {
margin: 0;
line-height: 10vh;
font-size: 0.9vw;
}
}
2 years ago
.img {
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 11.5%;
left: 33.7%;
width: 12%;
height: 20.4%;
}
1 year ago
.img1 {
1 year ago
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 11.5%;
left: 16.9%;
width: 28.8%;
height: 40.4%;
}
2 years ago
.terminal {
position: absolute;
top: 35.6%;
left: 17.2%;
width: 28%;
height: 61%;
padding-top: 14px;
/deep/ .el-form-item__label {
color: #25bffc !important;
font-weight: normal;
}
/deep/ .el-input__inner {
background-color: #0000;
border-color: #25bffc;
}
.terminalList::-webkit-scrollbar {
width: 0;
}
.terminalList {
position: absolute;
top: 1%;
2 years ago
left: 0%;
width: 100%;
height: 95%;
2 years ago
overflow: auto;
::-webkit-scrollbar {
width: 0;
}
.item {
background-image: url("~@/assets/board/equipment/item.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
width: 100%;
height: 7vw;
margin-top: 12px;
.icon {
background-image: url("~@/assets/board/equipment/icon.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
2 years ago
top: 21%;
left: 5.8%;
width: 14.5%;
height: 57%;
2 years ago
}
.title {
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%);
font-size: 1vw;
color: #1facf4;
}
.switch {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
}
}
}
.right::-webkit-scrollbar {
width: 0;
}
.right {
position: absolute;
top: 16%;
left: 48%;
width: 50%;
height: 80%;
overflow: auto;
.item {
position: relative;
width: 100%;
margin-bottom: 12px;
height: 18vh;
padding: 1vh 0;
.iconBg {
background-image: url("~@/assets/board/equipment/iconBg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 16%;
left: 5%;
width: 16vh;
height: 16vh;
}
.icon {
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: calc(16% + 1vh);
left: calc(5% + 0.5vw);
width: 14vh;
height: 14vh;
}
2 years ago
.rightBg {
background-image: url("~@/assets/board/equipment/right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 16%;
left: calc(10% + 16vh);
width: calc(90% - 16vh);;
height: 16vh;
.title {
position: absolute;
top: 50%;
left: 12%;
color: #1facf4;
transform: translate(-50%, -50%);
font-size: 1vw;
}
.infoItem {
display: inline-block;
position: relative;
width: 6vw;
height: 50%;
2 years ago
.spanBg {
//background-image: url("~@/assets/board/equipment/icon.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 55%;
left: 12%;
width: 2vw;
height: 0.8vw;
}
.span {
position: absolute;
bottom: 55%;
left: 12%;
color: #f4f4f4;
font-size: 0.7vw;
2 years ago
}
.num {
position: absolute;
top: 55%;
left: 12%;
color: #f4f4f4;
font-size: 0.7vw;
2 years ago
}
}
.btn {
position: absolute;
top: 0%;
right: 5%;
width: 6vw;
height: 100%;
}
.btnC {
position: absolute;
left: 50%;
2 years ago
transform: translate(-50%, -50%);
2 years ago
}
}
}
}
1 year ago
.chart {
width: 100%;
height: 50vh;
}
1 year ago
.historyChart{
width: 100%;
height: 50vh;
}
2 years ago
</style>