|
|
<template>
|
|
|
<div class="container"
|
|
|
:style="'background-image: url('+((controlList&& controlList.length === 0) ? bgImg1 : bgImg)+')'">
|
|
|
<div class="title1">监控设备</div>
|
|
|
<div class="centerImg"></div>
|
|
|
<div class="title">监控单元</div>
|
|
|
<div class="tree">
|
|
|
|
|
|
<el-tree
|
|
|
:data="treeData"
|
|
|
accordion
|
|
|
node-key="id"
|
|
|
@node-click="treeClick">
|
|
|
<span slot-scope="{ node, data }" class="custom-tree-node">
|
|
|
<span>{{ node.label }}</span>
|
|
|
</span>
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
<div v-if="show" :class="((controlList&& controlList.length === 0) ? 'equipmentInfo1' : 'equipmentInfo')">
|
|
|
<p>
|
|
|
<span>名称：</span>
|
|
|
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitName }}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<span>ID：</span>
|
|
|
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitId }}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<span>状态：</span>
|
|
|
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitStatus === '1' ? '正常' : '异常' }}</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
<span>类型：</span>
|
|
|
<span style="color: #d9dee3">{{ MonitorInfo.monitorUnitTypeName }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div v-if="show"
|
|
|
:style="'background-image: url('+(MonitorInfo.monitorPic ? MonitorInfo.monitorPic :defaultImg)+');'"
|
|
|
:class="((controlList&& controlList.length === 0) ? 'img1' : 'img')"></div>
|
|
|
<div class="terminal">
|
|
|
<div class="terminalList">
|
|
|
<div v-for="(i,k) in controlList" class="item">
|
|
|
<div :style="'background-image: url('+(i.devicePic ? i.devicePic :defaultImg1)+');'" class="icon"></div>
|
|
|
<div class="title">{{ i.deviceName + ' - ' + i.deviceModeFunction.functionName }}</div>
|
|
|
<div class="switch">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="primary"
|
|
|
@click="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">
|
|
|
执行
|
|
|
|
|
|
</el-button>
|
|
|
<!-- <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>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div v-for="i in acquisitionList" class="item">
|
|
|
<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>
|
|
|
<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')))"
|
|
|
: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>
|
|
|
|
|
|
</div>
|
|
|
<div class="btn">
|
|
|
<div class="btnC" style="top: 50%">
|
|
|
<el-button type="primary" @click="toHistory(i.deviceId,i.deviceModeId)">历史记录</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<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"
|
|
|
v-if="isHistoryTable"
|
|
|
style="width: 100%">
|
|
|
<el-table-column
|
|
|
type="index"
|
|
|
width="50">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
v-for="i in Object.keys(historyTh)"
|
|
|
v-if="historyTh[i]"
|
|
|
:prop="i"
|
|
|
:label="historyTh[i]"
|
|
|
width="180">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<pagination
|
|
|
v-if="isHistoryTable"
|
|
|
v-show="total>0"
|
|
|
:total="total"
|
|
|
:page.sync="form.pageNum"
|
|
|
:limit.sync="form.pageSize"
|
|
|
@pagination="getHistoryData"
|
|
|
/>
|
|
|
<Chart v-if="!isHistoryTable" ref="historyChart" class="historyChart"></Chart>
|
|
|
</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>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
treeList,
|
|
|
selectDevicesByMonitorUnitId,
|
|
|
getMonitorById,
|
|
|
publishControlCommand,
|
|
|
selectHistoryAndTrendAnalysis,
|
|
|
selectComparison,
|
|
|
exportData
|
|
|
} from '@/api/board/equipment'
|
|
|
import defaultImg from '@/assets/board/equipment/icon.png'
|
|
|
import defaultImg1 from '@/assets/board/equipment/icon2.png'
|
|
|
import defaultImg2 from '@/assets/board/equipment/defaultImg.png'
|
|
|
import bgImg from '@/assets/board/equipment/bg.jpg'
|
|
|
import bgImg1 from '@/assets/board/equipment/bg2.jpg'
|
|
|
import Chart from '@/components/Charts/Chart'
|
|
|
|
|
|
|
|
|
let getDeviceInterval = null
|
|
|
export default {
|
|
|
components: {Chart},
|
|
|
data() {
|
|
|
const validatePass = (rule, value, callback) => {
|
|
|
if (this.sensorData.length > 5) {
|
|
|
return callback(new Error('最多选择五个传感器'));
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
defaultImg,
|
|
|
defaultImg1,
|
|
|
defaultImg2,
|
|
|
bgImg,
|
|
|
bgImg1,
|
|
|
rules: {
|
|
|
sensor: [
|
|
|
{validator: validatePass, trigger: 'change'}
|
|
|
],
|
|
|
prop: [
|
|
|
{required: true, message: '请选择对比属性', trigger: 'change'}
|
|
|
]
|
|
|
},
|
|
|
show: false,
|
|
|
monitorUnitId: '',
|
|
|
data1: true,
|
|
|
treeData: [],
|
|
|
controlList: [],
|
|
|
acquisitionList: [],
|
|
|
MonitorInfo: {},
|
|
|
sceneId: 0,
|
|
|
deviceId: '',
|
|
|
historyDialog: false,
|
|
|
form: {},
|
|
|
form1: {
|
|
|
time: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24), new Date()],
|
|
|
},
|
|
|
historyData: [],
|
|
|
historyTh:{},
|
|
|
isHistoryTable:true,
|
|
|
total: 100,
|
|
|
comparisonDialog: false,
|
|
|
sensorOptions: [],
|
|
|
sensorData: '',
|
|
|
comparisonOptions: [],
|
|
|
props: {
|
|
|
multiple: true,
|
|
|
value: 'voId',
|
|
|
label: 'voName',
|
|
|
children: 'voList'
|
|
|
},
|
|
|
propArr: [],
|
|
|
}
|
|
|
},
|
|
|
async mounted() {
|
|
|
await this.getData()
|
|
|
this.sceneId = this.$store.getters.sceneId
|
|
|
if (this.$route.query.monitorUnitId) {
|
|
|
this.deviceId = this.$route.query.monitorUnitId
|
|
|
await this.treeClick({id: this.$route.query.monitorUnitId})
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(getDeviceInterval)
|
|
|
},
|
|
|
methods: {
|
|
|
async getData() {
|
|
|
await this.getTree()
|
|
|
},
|
|
|
switchChange(functionIdentifier, deviceId, deviceCode, modeFunctionId) {
|
|
|
this.$confirm('确定执行么？', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
publishControlCommand({
|
|
|
deviceId: deviceId,
|
|
|
modeFunctionId: modeFunctionId,
|
|
|
deviceCode: deviceCode,
|
|
|
type: functionIdentifier,
|
|
|
}).then(e => {
|
|
|
if (e.code === 200) {
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '成功!'
|
|
|
});
|
|
|
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'
|
|
|
} else {
|
|
|
this.$message({
|
|
|
type: 'info',
|
|
|
message: '网络错误'
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
type: 'info',
|
|
|
message: '取消'
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
async getTree() {
|
|
|
if (this.$store.getters.sceneId) {
|
|
|
const {data} = await treeList(this.$store.getters.sceneId)
|
|
|
this.treeData = data
|
|
|
}
|
|
|
},
|
|
|
async treeClick(e) {
|
|
|
if (!e.children?.length > 0) {
|
|
|
this.monitorUnitId = e.id
|
|
|
await this.getDevice(e.id)
|
|
|
await this.setMonitorById(e)
|
|
|
this.show = true
|
|
|
if (typeof getDeviceInterval === 'number') {
|
|
|
clearInterval(getDeviceInterval)
|
|
|
}
|
|
|
getDeviceInterval = setInterval(() => {
|
|
|
this.getDevice(e.id)
|
|
|
}, 30 * 1000)
|
|
|
}
|
|
|
},
|
|
|
async getDevice(e) {
|
|
|
if (this.$store.getters.sceneId) {
|
|
|
const {data} = await selectDevicesByMonitorUnitId(e, this.$store.getters.sceneId)
|
|
|
this.deviceId = e
|
|
|
this.controlList = data.control
|
|
|
this.acquisitionList = data.acquisition
|
|
|
}
|
|
|
},
|
|
|
async setMonitorById(e) {
|
|
|
const {data} = await getMonitorById(e.id)
|
|
|
this.MonitorInfo = data
|
|
|
},
|
|
|
toHistory(e, i) {
|
|
|
// 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)
|
|
|
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
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
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 = {}
|
|
|
data.tableDataInfo.rows.forEach(e => {
|
|
|
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, '历史数据')
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.title1 {
|
|
|
position: absolute;
|
|
|
top: 12%;
|
|
|
left: 73%;
|
|
|
font-size: 1vw;
|
|
|
color: #00f8ff;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.img {
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 11.5%;
|
|
|
left: 33.7%;
|
|
|
width: 12%;
|
|
|
height: 20.4%;
|
|
|
}
|
|
|
|
|
|
.img1 {
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 11.5%;
|
|
|
left: 16.9%;
|
|
|
width: 28.8%;
|
|
|
height: 40.4%;
|
|
|
}
|
|
|
|
|
|
.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%;
|
|
|
left: 0%;
|
|
|
width: 100%;
|
|
|
height: 95%;
|
|
|
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;
|
|
|
|
|
|
top: 21%;
|
|
|
left: 5.8%;
|
|
|
width: 14.5%;
|
|
|
height: 57%;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
|
|
|
.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%;
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
|
|
|
.num {
|
|
|
position: absolute;
|
|
|
top: 55%;
|
|
|
left: 12%;
|
|
|
color: #f4f4f4;
|
|
|
font-size: 0.7vw;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
position: absolute;
|
|
|
top: 0%;
|
|
|
right: 5%;
|
|
|
width: 6vw;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.btnC {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chart {
|
|
|
width: 100%;
|
|
|
height: 50vh;
|
|
|
}
|
|
|
.historyChart{
|
|
|
width: 100%;
|
|
|
height: 50vh;
|
|
|
}
|
|
|
</style>
|