|
|
@@ -6,31 +6,31 @@
|
|
|
<div class="organization-information-list">
|
|
|
<div class="item">
|
|
|
<div class="key">设备名称</div>
|
|
|
- <div class="value">1号水泵</div>
|
|
|
+ <div class="value">{{detail.name}}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="key">设备编码</div>
|
|
|
- <div class="value">YX20250108001</div>
|
|
|
+ <div class="value">{{detail.deviceNumber}}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
- <div class="key">所属部门</div>
|
|
|
- <div class="value">运维部</div>
|
|
|
+ <div class="key">资产编码</div>
|
|
|
+ <div class="value">{{detail.designNumber}}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
- <div class="key">设备位置</div>
|
|
|
- <div class="value">1号楼-1F</div>
|
|
|
+ <div class="key">厂家</div>
|
|
|
+ <div class="value">{{detail.manufacturer}}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
- <div class="key">生产厂家</div>
|
|
|
- <div class="value">上海水泵生产厂家</div>
|
|
|
+ <div class="key">联系人</div>
|
|
|
+ <div class="value">{{detail.liaison}}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="key">联系方式</div>
|
|
|
- <div class="value">李工-17601274604</div>
|
|
|
+ <div class="value">{{detail.liaisonPhone}}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="key">进场时间</div>
|
|
|
- <div class="value">2023-03-15</div>
|
|
|
+ <div class="value">{{detail.entryTime}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</box>
|
|
|
@@ -38,107 +38,27 @@
|
|
|
<div class="left-bottom">
|
|
|
<box label="全生命周期">
|
|
|
<div class="device-flow-list">
|
|
|
- <div class="device-flow-item">
|
|
|
+ <div class="device-flow-item" v-for="(item,index) in deviceCount" :key="index">
|
|
|
<div class="device-flow-title">
|
|
|
- <span class="title-name">采购</span>
|
|
|
+ <span class="title-name">{{item.name}}</span>
|
|
|
<div class="flow-tag">
|
|
|
<span class="text">合格</span>
|
|
|
- <span class="number alibaba color-green">10</span>
|
|
|
+ <span class="number alibaba color-green">
|
|
|
+ {{item.eligibleNumber}}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div class="flow-tag">
|
|
|
<span class="text">整改中</span>
|
|
|
- <span class="number alibaba color-purple">3</span>
|
|
|
+ <span class="number alibaba color-purple">
|
|
|
+ {{item.correctionNumber}}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="device-flow-document">
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-item">
|
|
|
- <div class="device-flow-title">
|
|
|
- <span class="title-name">进场</span>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">合格</span>
|
|
|
- <span class="number alibaba color-green">10</span>
|
|
|
- </div>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">整改中</span>
|
|
|
- <span class="number alibaba color-purple">3</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-document">
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-item">
|
|
|
- <div class="device-flow-title">
|
|
|
- <span class="title-name">安装</span>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">合格</span>
|
|
|
- <span class="number alibaba color-green">10</span>
|
|
|
- </div>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">整改中</span>
|
|
|
- <span class="number alibaba color-purple">3</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-document">
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-item">
|
|
|
- <div class="device-flow-title">
|
|
|
- <span class="title-name">运维</span>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">合格</span>
|
|
|
- <span class="number alibaba color-green">10</span>
|
|
|
- </div>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">整改中</span>
|
|
|
- <span class="number alibaba color-purple">3</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-document">
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-item">
|
|
|
- <div class="device-flow-title">
|
|
|
- <span class="title-name">保养</span>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">合格</span>
|
|
|
- <span class="number alibaba color-green">10</span>
|
|
|
- </div>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">整改中</span>
|
|
|
- <span class="number alibaba color-purple">3</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-document">
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-flow-item">
|
|
|
- <div class="device-flow-title">
|
|
|
- <span class="title-name">维修</span>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">合格</span>
|
|
|
- <span class="number alibaba color-green">10</span>
|
|
|
- </div>
|
|
|
- <div class="flow-tag">
|
|
|
- <span class="text">整改中</span>
|
|
|
- <span class="number alibaba color-purple">3</span>
|
|
|
+ <div class="document" v-for="(node,index) in item.list">
|
|
|
+ {{$dayjs(node.date).format('YYYY-MM-DD')}}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="device-flow-document">
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- <div class="document">设备流程文档名称.pdf</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</box>
|
|
|
@@ -151,11 +71,15 @@
|
|
|
<div class="device-list">
|
|
|
<div class="device-item">
|
|
|
<span>设备状态</span>
|
|
|
- <span class="color-green state">在线</span>
|
|
|
+ <span :class="'state ' + (detail.state === 3 ?'color-red' : 'color-green')">
|
|
|
+ {{detail.state === 3?'故障':'在线'}}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div class="device-item">
|
|
|
<span>运行状态</span>
|
|
|
- <span class="color-green state">开启</span>
|
|
|
+ <span :class="'state ' + (detail.state === 1 ?'color-green' : 'color-gray')">
|
|
|
+ {{detail.state === 1?'开启':'关闭'}}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="device-test">
|
|
|
@@ -164,7 +88,7 @@
|
|
|
<div class="test-content">
|
|
|
<div class="name">传感器数量</div>
|
|
|
<div class="number">
|
|
|
- <span class="const alibaba">3</span>
|
|
|
+ <span class="const alibaba">{{sensorData.totalNumber}}</span>
|
|
|
<span class="unit">个</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -174,7 +98,7 @@
|
|
|
<div class="test-content">
|
|
|
<div class="name">开启数量</div>
|
|
|
<div class="number">
|
|
|
- <span class="const alibaba">3</span>
|
|
|
+ <span class="const alibaba">{{sensorData.openNumber}}</span>
|
|
|
<span class="unit">个</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -184,7 +108,7 @@
|
|
|
<div class="test-content">
|
|
|
<div class="name">故障数量</div>
|
|
|
<div class="number">
|
|
|
- <span class="const alibaba">0</span>
|
|
|
+ <span class="const alibaba">{{sensorData.faultNumber}}</span>
|
|
|
<span class="unit">个</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -194,11 +118,17 @@
|
|
|
</box>
|
|
|
</div>
|
|
|
<div class="center-bottom">
|
|
|
- <box label="设备模型">
|
|
|
- <three-model
|
|
|
- url="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f1e6fc9ca6ed46e79ba18d0a3f1b73dc"
|
|
|
- :type="1">
|
|
|
+ <box label="设备展示">
|
|
|
+ <three-model :modelId="detail.modelBindContent" :type="1" v-if="detail.modelBindType === 2">
|
|
|
</three-model>
|
|
|
+ <div class="center-img" v-else>
|
|
|
+ <play-video :ref="detail.deviceSerialNumber"
|
|
|
+ :sourceUrl="`ezopen://open.ys7.com/${detail.deviceSerialNumber}/1.live`" template="simple"
|
|
|
+ v-if="sign.id === 1 ">
|
|
|
+ </play-video>
|
|
|
+ <img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/d8f0a8b4bd2043dfb8058d92763e57b0"
|
|
|
+ alt="aa.png" v-else />
|
|
|
+ </div>
|
|
|
</box>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -216,59 +146,15 @@
|
|
|
<div class="right-bottom">
|
|
|
<box label="告警记录">
|
|
|
<div class="alarm-record">
|
|
|
- <div class="record-item">
|
|
|
- <div class="number">
|
|
|
- 01
|
|
|
- </div>
|
|
|
- <div class="value">
|
|
|
- <div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
|
|
|
- </div>
|
|
|
- <div class="state color-red">
|
|
|
- 报警中
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="record-item">
|
|
|
- <div class="number">
|
|
|
- 02
|
|
|
- </div>
|
|
|
- <div class="value">
|
|
|
- <div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
|
|
|
- </div>
|
|
|
- <div class="state color-blue">
|
|
|
- 已处理
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="record-item">
|
|
|
- <div class="number">
|
|
|
- 03
|
|
|
- </div>
|
|
|
- <div class="value">
|
|
|
- <div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
|
|
|
- </div>
|
|
|
- <div class="state color-red">
|
|
|
- 报警中
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="record-item">
|
|
|
- <div class="number">
|
|
|
- 04
|
|
|
- </div>
|
|
|
- <div class="value">
|
|
|
- <div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
|
|
|
- </div>
|
|
|
- <div class="state color-blue">
|
|
|
- 已处理
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="record-item">
|
|
|
- <div class="number">
|
|
|
- 05
|
|
|
- </div>
|
|
|
+ <div class="record-item" v-for="(item,index) in alarmData" :key="index">
|
|
|
+ <div class="number">{{index+1}}</div>
|
|
|
<div class="value">
|
|
|
- <div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
|
|
|
+ <div class="hui-ellipsis">{{item.info}}</div>
|
|
|
</div>
|
|
|
- <div class="state color-blue">
|
|
|
- 已处理
|
|
|
+ <div class="state">
|
|
|
+ <span class="color-red" v-if="!item.state">报警中</span>
|
|
|
+ <span class="color-blue" v-else-if="item.state === 1">处理中</span>
|
|
|
+ <span class="color-green" v-else-if="item.state === 2">已处理</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -281,22 +167,128 @@
|
|
|
<script>
|
|
|
import box from '@/components/common/noticeBoard/box'
|
|
|
import threeModel from '@/components/work/common/threeModel'
|
|
|
+ import playVideo from '@/components/common/playVideo.vue'
|
|
|
+ import {
|
|
|
+ getDeviceById,
|
|
|
+ getDeviceCount,
|
|
|
+ getFlowList,
|
|
|
+ getDeviceSensorCount,
|
|
|
+ getDeviceLiveData,
|
|
|
+ getDeviceAlarm,
|
|
|
+ getDeviceHistory
|
|
|
+ } from '@/httpApi/property'
|
|
|
export default {
|
|
|
+ props: ['detailId'],
|
|
|
data() {
|
|
|
return {
|
|
|
- optionData: []
|
|
|
+ detail: {},
|
|
|
+ deviceCount: [],
|
|
|
+ sensorData: {
|
|
|
+ totalNumber: 0,
|
|
|
+ faultNumber: 0,
|
|
|
+ openNumber: 0
|
|
|
+ },
|
|
|
+ alarmData: [],
|
|
|
+ signList: [{
|
|
|
+ id: 1,
|
|
|
+ name: '摄像头',
|
|
|
+ iconPath: './assets/shexiangtou.png'
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ name: '门禁',
|
|
|
+ iconPath: './assets/menjin.png'
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ name: '停车',
|
|
|
+ iconPath: './assets/car.png'
|
|
|
+ }, {
|
|
|
+ id: 4,
|
|
|
+ name: '照明',
|
|
|
+ iconPath: './assets/zhaoming.png'
|
|
|
+ }],
|
|
|
+ sign: {}
|
|
|
}
|
|
|
},
|
|
|
- created() {},
|
|
|
- mounted() {
|
|
|
+ created() {
|
|
|
this.$nextTick(() => {
|
|
|
this.init();
|
|
|
- this.chart(this.$refs.chart1, ['3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00',
|
|
|
- '24:00'
|
|
|
- ], [3, 4, 2, 5, 6, 4, 7, 3])
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ init() {
|
|
|
+ this.initDetail();
|
|
|
+ this.initFlowCount();
|
|
|
+ this.initSensor();
|
|
|
+ this.initLive();
|
|
|
+ this.initHistory();
|
|
|
+ this.initAlarm();
|
|
|
+ },
|
|
|
+ initDetail() {
|
|
|
+ getDeviceById(this.detailId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.detail = res.data;
|
|
|
+ if (this.detail.modelBindType === 3 && this.detail.modelBindContent && this.detail
|
|
|
+ .modelBindPosition) {
|
|
|
+ this.sign = this.signList.find(node => node.id == this.detail.modelBindContent);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initFlowCount() {
|
|
|
+ getDeviceCount(this.detailId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let obj = res.data;
|
|
|
+ this.deviceCount = this.$device.type.map(node => {
|
|
|
+ let arrObj = obj[node.id] || {
|
|
|
+ eligibleNumber: 0,
|
|
|
+ correctionNumber: 0,
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ return Object.assign(node, arrObj);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initSensor() {
|
|
|
+ getDeviceSensorCount(this.detailId).then(res => {
|
|
|
+ if (res.state) this.sensorData = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initLive() {
|
|
|
+ getDeviceLiveData(this.detailId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let list = res.data,
|
|
|
+ x = [],
|
|
|
+ data = [];
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ x.push(this.dayjs(list[i]).format('HH:mm'));
|
|
|
+ data.push(list[i].data);
|
|
|
+ }
|
|
|
+ this.chart(this.$refs.chart1, x, data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initHistory() {
|
|
|
+ getDeviceHistory(this.detailId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let list = res.data,
|
|
|
+ x = [],
|
|
|
+ data = [],
|
|
|
+ maxData = 0;
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ x.push(list[i].dataKay);
|
|
|
+ data.push(list[i].dataValue);
|
|
|
+ if (list[i].dataValue > maxData) maxData = list[i].dataValue;
|
|
|
+ }
|
|
|
+ this.chart2(this.$refs.chart2, x, data, data.map(() => maxData));
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initAlarm() {
|
|
|
+ getDeviceAlarm(this.detailId).then(res => {
|
|
|
+ if (res.state) this.alarmData = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
chart(elem, x, data) {
|
|
|
let chart = echarts.init(elem);
|
|
|
let option = {
|
|
|
@@ -397,8 +389,8 @@
|
|
|
};
|
|
|
chart.setOption(option);
|
|
|
},
|
|
|
- init() {
|
|
|
- let myChart = echarts.init(this.$refs.chart2);
|
|
|
+ chart2(elem, x, data, maxData) {
|
|
|
+ let myChart = echarts.init(elem);
|
|
|
// option
|
|
|
let option = {
|
|
|
grid: {
|
|
|
@@ -410,7 +402,7 @@
|
|
|
},
|
|
|
color: 'rgba(33,104,206,1)',
|
|
|
xAxis: {
|
|
|
- data: ['01', '02', '03', '04', '05', '06'],
|
|
|
+ data: x,
|
|
|
axisLabel: {
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,.1)'
|
|
|
@@ -459,7 +451,7 @@
|
|
|
showAllSymbol: true,
|
|
|
symbol: 'emptyCircle',
|
|
|
symbolSize: 15,
|
|
|
- data: [3, 2, 3, 4, 7, 6]
|
|
|
+ data: data
|
|
|
}, {
|
|
|
name: 'bar',
|
|
|
type: 'bar',
|
|
|
@@ -476,7 +468,7 @@
|
|
|
}
|
|
|
])
|
|
|
},
|
|
|
- data: [3, 2, 3, 4, 7, 6]
|
|
|
+ data: data
|
|
|
}, {
|
|
|
name: 'line',
|
|
|
type: 'bar',
|
|
|
@@ -498,7 +490,7 @@
|
|
|
])
|
|
|
},
|
|
|
z: -12,
|
|
|
- data: [7, 7, 7, 7, 7, 7]
|
|
|
+ data: maxData
|
|
|
}, {
|
|
|
name: 'dotted',
|
|
|
type: 'pictorialBar',
|
|
|
@@ -510,7 +502,7 @@
|
|
|
symbolSize: [12, 4],
|
|
|
symbolMargin: 1,
|
|
|
z: -10,
|
|
|
- data: [7, 7, 7, 7, 7, 7]
|
|
|
+ data: maxData
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
@@ -518,7 +510,8 @@
|
|
|
},
|
|
|
components: {
|
|
|
box,
|
|
|
- threeModel
|
|
|
+ threeModel,
|
|
|
+ playVideo
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -813,6 +806,17 @@
|
|
|
flex: 1;
|
|
|
height: 0;
|
|
|
margin-top: 15px;
|
|
|
+
|
|
|
+ .center-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
