<template>
|
<div class="main">
|
<!-- 选项 -->
|
<!-- 设备类型 -->
|
<el-row>
|
<el-col>
|
<span>设备类型：</span>
|
</el-col>
|
<el-col>
|
<el-tabs class="child_select" placeholder="设备类型" v-model="currSelect.deviceTypeId">
|
<el-tab-pane v-for="item in deviceTypes" :name="item.id" :label="item.label" />
|
</el-tabs>
|
</el-col>
|
</el-row>
|
<!-- 设备展示 -->
|
<div class="devices">
|
<el-card class="layout" shadow="hover" v-for="item of cardData">
|
<div class="table-row">
|
<span class="table-cell">站点: {{ item.diName || item.piName || item.wiName }}</span>
|
<span class="table-cell"
|
>供应商: {{ item.diSupplier || item.piSupplier || item.wiSupplier }}</span
|
>
|
</div>
|
<div class="table-row">
|
<span class="table-cell"
|
>运维商: {{ item.diMaintainer || item.piMaintainer || item.wiMaintainer }}</span
|
>
|
<span class="table-cell"
|
>运维频次:
|
{{
|
maintainFrequencysMap.get(
|
item.diMaintainFrequency || item.piMaintainFrequency || item.wiMaintainFrequency
|
)
|
}}</span
|
>
|
</div>
|
<div class="table-row">
|
<span class="table-cell"
|
>运维人员:
|
{{ item.diMaintainStaff || item.piMaintainStaff || item.wiMaintainStaff }}</span
|
>
|
<span class="table-cell"
|
>运维联系方式:
|
{{ item.diMaintainTel || item.piMaintainTel || item.wiMaintainTel }}</span
|
>
|
</div>
|
<div class="table-row">
|
<span class="table-cell"
|
>品牌型号: {{ item.diBrandModel || item.piBrandModel || item.wiBrandModel }}</span
|
>
|
<span class="table-cell"
|
>运行状态:
|
{{
|
runStatusMap.get(item.diRunningStatus || item.piRunningStatus || item.wiRunningStatus)
|
}}
|
</span>
|
</div>
|
<div class="table-row">
|
<span class="table-cell"
|
>位置: {{ item.dlLocation || item.piLocation || item.wiLocation }}</span
|
>
|
<!-- The second cell is empty to maintain the two-field per row layout -->
|
<span class="table-cell"></span>
|
</div>
|
<el-image
|
class="pic-style"
|
:src="item.picUrl"
|
fit="cover"
|
:preview-src-list="Array.of(item.picUrl)"
|
/>
|
</el-card>
|
<!-- 数据为空时 -->
|
<div class="empty" v-if="isEmpty">
|
<h3>暂无数据</h3>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import deviceApi from '@/api/fysp/deviceApi';
|
import { $fysp } from '@/api/index';
|
export default {
|
props: {},
|
mounted() {},
|
watch: {
|
// 选择改变监听
|
currSelect: {
|
handler(newObj, oldObj) {
|
this.getList();
|
},
|
deep: true
|
}
|
},
|
data() {
|
return {
|
// 无数据
|
isEmpty: false,
|
// 双向绑定
|
currSelect: {
|
deviceTypeId: 0
|
},
|
// 场景类型
|
sceneType: '',
|
// 场景id
|
sceneId: null,
|
// 选项
|
scenes: [],
|
// 根据场景类型决定的设备类型
|
iDevTypes: [
|
|
],
|
deviceTypes: [
|
{ id: 0, label: '监控' },
|
{ id: 1, label: '治理' },
|
{ id: 2, label: '生产' }
|
],
|
// 数据
|
cardData: [],
|
// 运行状态
|
runStatusMap: new Map(
|
[
|
{ key: 0, value: '未联网' },
|
{ key: 1, value: '上线中' },
|
{ key: 2, value: '下线' },
|
{ key: 3, value: '拆除' }
|
].map((item) => [item.key, item.value])
|
),
|
|
// 维护频率状态
|
maintainFrequencysMap: new Map(
|
[
|
{ key: '1', value: '每月一次' },
|
{ key: '2', value: '每季度一次' },
|
{ key: '3', value: '每半年一次' },
|
{ key: '4', value: '每年一次' }
|
].map((item) => [item.key, item.value])
|
)
|
};
|
},
|
methods: {
|
// 父组件主动传值
|
init(scene) {
|
this.sceneId = scene.guid;
|
this.sceneType = scene.type;
|
this.iDevTypes = dataMonitorDeviceTypeJs.monitorDevices(this.sceneType)
|
this.getList();
|
},
|
isShowEmpty(data) {
|
if (data.length == 0) {
|
this.isEmpty = true;
|
return true;
|
} else {
|
this.isEmpty = false;
|
return false;
|
}
|
},
|
// 重置展示的数据
|
initList() {
|
this.tableData = [];
|
},
|
// 字段名拦截器
|
propNameConvert(obj, name) {
|
name = String(name).substring(1)
|
return obj['d'+name] || obj['p'+name] || obj['w'+name]
|
},
|
getList() {
|
this.initList();
|
var devicesInfoList = [];
|
deviceApi.fetchDevices(this.sceneId, this.currSelect.deviceTypeId).then((result) => {
|
devicesInfoList = result.data;
|
this.cardData = [];
|
if (this.isShowEmpty(devicesInfoList)) {
|
return;
|
}
|
if (devicesInfoList) {
|
devicesInfoList.forEach((e) => {
|
let data = {
|
deviceId: this.propNameConvert(e, 'diId'),
|
sceneId: this.propNameConvert(e, 'diSceneGuid'),
|
deviceTypeId: this.currSelect.deviceTypeId
|
};
|
deviceApi
|
.fetchDeviceStatus(data)
|
.then((status) => {
|
var statusData = status.data;
|
if (statusData && statusData instanceof Array) {
|
if (statusData.length == 0) {
|
this.cardData.push(e);
|
return;
|
}
|
statusData.forEach((imgItem) => {
|
e.picUrl = $fysp.imgUrl + imgItem.dlPicUrl;
|
e.dlLocation = imgItem.dlLocation;
|
this.cardData.push(e);
|
});
|
}
|
})
|
.catch((err) => {});
|
});
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.selects {
|
display: flex;
|
}
|
.child_select {
|
margin-right: 10px;
|
}
|
.table-row {
|
display: flex;
|
justify-content: space-between;
|
}
|
.table-cell {
|
flex-basis: calc(50% - 10px); /* Adjust the width and margin as needed */
|
border: 1px solid #ddd; /* Add border to mimic table cell */
|
padding: 8px;
|
text-align: center;
|
}
|
.pic-style {
|
margin-top: 10px;
|
width: 100%;
|
height: 400px;
|
}
|
.empty {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
