<template>
|
<div>
|
<!-- 选项 -->
|
<!-- 设备类型 -->
|
<el-row>
|
<el-col>
|
<el-tabs
|
class="child_select"
|
placeholder="设备类型"
|
v-model="currSelect.topDeviceTypeId"
|
>
|
<el-tab-pane
|
v-for="item in deviceTopTypes"
|
:key="item.id"
|
:name="item.id"
|
>
|
<template #label>
|
<el-badge
|
:value="item.count"
|
:type="item.count == 0 ? 'danger' : 'primary'"
|
>
|
<span class="custom-tabs-label">
|
<span>{{ item.label }}</span>
|
</span>
|
</el-badge>
|
</template>
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
</el-row>
|
<el-collapse v-model="activeNames" style="border: 4px">
|
<el-collapse-item
|
v-for="item in formInfo"
|
:key="item.id"
|
:name="item.id"
|
class="collapse-item-class"
|
>
|
<template #title>
|
<div
|
style="display: flex; width: 100%; justify-content: space-between"
|
>
|
<div style="">
|
<el-descriptions style="" :column="3" size="small" border>
|
<el-descriptions-item width="64px" :label="currSelect.topDeviceTypeId == 0 ? '站点名称' : '设备名称'" :span="3">{{
|
item.name || '无'
|
}}</el-descriptions-item>
|
<el-descriptions-item label="供应商">{{
|
item.supplier || '无'
|
}}</el-descriptions-item>
|
<el-descriptions-item label="运维商">{{
|
item.maintainer || '无'
|
}}</el-descriptions-item>
|
<el-descriptions-item label="运维频次">
|
<el-select
|
v-model="item.maintainFrequency"
|
:disabled="isDisabled"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="frequency of maintainFrequencysArray"
|
:key="frequency.key"
|
:label="frequency.value"
|
:value="frequency.key"
|
></el-option>
|
</el-select>
|
</el-descriptions-item>
|
<el-descriptions-item label="运维人员">{{
|
item.maintainStaff || '无'
|
}}</el-descriptions-item>
|
<el-descriptions-item label="运维联系方式">{{
|
item.maintainTel || '无'
|
}}</el-descriptions-item>
|
<el-descriptions-item label="品牌型号">{{
|
item.brandModel || '无'
|
}}</el-descriptions-item>
|
<el-descriptions-item label="运行状态">
|
<el-select
|
v-model="item.runningStatus"
|
:disabled="isDisabled"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="status of runStatusArray"
|
:key="status.key"
|
:label="status.value"
|
:value="status.key"
|
></el-option>
|
</el-select>
|
</el-descriptions-item>
|
<el-descriptions-item label="类型">
|
{{ item._typename || '无' }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
|
<div style="display: flex">
|
<!-- <div class="sub-title">{{ item.name }}</div> -->
|
<!-- 图片 -->
|
<div class="image-container">
|
<div
|
class="block-div"
|
@click="onClickPic($event)"
|
v-for="(status, index) in item._statusList"
|
:key="index"
|
>
|
<el-image
|
v-if="index == 0"
|
fit="cover"
|
class="pic-style"
|
:src="status._picUrl"
|
:preview-src-list="Array.of(status._picUrl)"
|
/>
|
<span class="abstract_pic_text" v-if="index == 0">{{
|
`最新状态图片 ${status.dlCreateTime.slice(0, 10)}`
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- 详细内容开始 -->
|
<el-form :model="item" class="form_class">
|
<el-form-item label="状态">
|
<el-tabs tab-position="top">
|
<el-tab-pane
|
v-for="(status, i) in item._statusList"
|
:label="status.dlCreateTime.slice(0, 10)"
|
:key="i"
|
>
|
<el-form :model="status" class="form-class">
|
<el-form-item label="位置" style="margin-bottom: 10px">
|
{{ status.dlLocation }}
|
</el-form-item>
|
<el-form-item label="图片">
|
<!-- 图片 -->
|
<el-space>
|
<div v-if="status._paths && status._paths.length > 0">
|
<el-image
|
v-for="(path, i) in status._paths"
|
fit="cover"
|
class="pic-style"
|
:src="path"
|
:preview-src-list="Array.of(path)"
|
:key="i"
|
/>
|
</div>
|
<el-empty v-else></el-empty>
|
</el-space>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-form-item>
|
</el-form>
|
<!-- 详细内容结束 -->
|
</el-collapse-item>
|
</el-collapse>
|
<!-- 空状态 -->
|
<el-empty v-if="isEmpty" />
|
</div>
|
</template>
|
|
<script>
|
import deviceApi from '@/api/fysp/deviceApi';
|
import { $fysp } from '@/api/index';
|
import { toLabel } from '@/enum/device/device';
|
export default {
|
components: {},
|
watch: {
|
// 选择改变监听
|
currSelect: {
|
handler(newObj, oldObj) {
|
this.getList();
|
},
|
deep: true
|
}
|
},
|
data() {
|
return {
|
activeNames: [],
|
// 控制是否展示空状态
|
isEmpty: false,
|
// 详情按钮大小
|
detailSize: '22px',
|
// 表单详情点击按钮的图标
|
isDetail: false,
|
currSelect: {
|
topDeviceTypeId: 0
|
},
|
// 控制表单是否可以编辑
|
isDisabled: true,
|
formInfo: {},
|
rules: [],
|
// 设备类型
|
deviceTopTypes: [
|
{ id: 0, label: '监控设备' },
|
{ id: 1, label: '治理设备' },
|
{ id: 2, label: '生产设备' }
|
],
|
// 运行状态
|
runStatusArray: [
|
{ key: 0, value: '未联网' },
|
{ key: 1, value: '上线中' },
|
{ key: 2, value: '下线' },
|
{ key: 3, value: '拆除' }
|
],
|
// 维护频率状态
|
maintainFrequencysArray: [
|
{ key: 1, value: '每月一次' },
|
{ key: 2, value: '每季度一次' },
|
{ key: 3, value: '每半年一次' },
|
{ key: 4, value: '每年一次' }
|
],
|
// 租赁方式
|
ownershipArray: [
|
{ key: 0, value: '购买' },
|
{ key: 1, value: '租赁' }
|
],
|
scene: {}
|
};
|
},
|
props: {},
|
|
mounted() {},
|
methods: {
|
// 获取当前类型设备数量
|
getTabsCount() {
|
this.deviceTopTypes.forEach((item) => {
|
deviceApi.fetchDevices(this.scene.guid, item.id).then((result) => {
|
item.count = result.data.length;
|
});
|
});
|
},
|
// 获取运行状态对应的value
|
getRunStatusValueByRunStatusKey(status) {
|
var runningStatusValueArray = this.runStatusArray.filter((runStatus) => {
|
return runStatus.key == status;
|
});
|
if (runningStatusValueArray.length > 0) {
|
return runningStatusValueArray[0].value;
|
}
|
},
|
// 展示表单的详情的点击事件
|
showDetail(item) {
|
item._isDetail = !item._isDetail;
|
},
|
init(scene) {
|
// 父组件主动调用初始化子组件的方法
|
this.scene = scene;
|
|
this.getList();
|
this.getTabsCount();
|
},
|
// 重置展示的数据
|
initList() {
|
this.formInfo = [];
|
this.isEmpty = false;
|
},
|
// 标准化属性名
|
convertKeys(obj) {
|
// 将一个js对象中所有di，wi，pi开头的属性全部改成去掉这些前缀并且重新变为驼峰式命名
|
const newObj = {};
|
for (const key in obj) {
|
let newKey = key;
|
if (key.startsWith('di')) {
|
newKey = key.substring(2);
|
} else if (key.startsWith('wi')) {
|
newKey = key.substring(2);
|
} else if (key.startsWith('pi')) {
|
newKey = key.substring(2);
|
}
|
newKey = newKey.charAt(0).toLowerCase() + newKey.slice(1);
|
newObj[newKey] = obj[key];
|
}
|
return newObj;
|
},
|
// 新增字段
|
initFormData(data) {
|
data._isDetail = false;
|
},
|
getList() {
|
deviceApi
|
.fetchDevices(this.scene.guid, this.currSelect.topDeviceTypeId)
|
.then((result) => {
|
this.initList();
|
if (result.data == null || result.data.length <= 0) {
|
this.isEmpty = true;
|
return;
|
}
|
// 标准化属性名
|
for (let index = 0; index < result.data.length; index++) {
|
var element = this.convertKeys(result.data[index]);
|
this.initFormData(element);
|
// 获取设备状态信息
|
let data = {
|
deviceId: element.id,
|
sceneId: element.sceneGuid,
|
deviceTypeId: this.currSelect.topDeviceTypeId
|
};
|
deviceApi.fetchDeviceStatus(data).then((status) => {
|
var statusData = status.data;
|
var imgPaths = [];
|
if (statusData) {
|
if (statusData.length == 0) {
|
this.formInfo.push(element);
|
return;
|
}
|
element = this.convertKeys(result.data[index]);
|
element = this.setDeviceType(element);
|
element._picUrls = imgPaths;
|
for (let index = 0; index < statusData.length; index++) {
|
const statusItem = statusData[index];
|
// 设备对象添加一个属性列表属性用来保存设备状态
|
this.saveStatus(element, statusItem);
|
element.dlLocation = statusItem.dlLocation;
|
this.formInfo.push(element);
|
}
|
}
|
});
|
}
|
});
|
},
|
setDeviceType(element) {
|
var type = [];
|
type = toLabel(element.sceneTypeId, this.currSelect.topDeviceTypeId, [
|
element.typeId,
|
element.subtypeId
|
]);
|
element._typename = type.join('-');
|
return element;
|
},
|
// 保存状态信息
|
saveStatus(device, status) {
|
var _picUrl = $fysp.imgUrl + status.dlPicUrl;
|
status._picUrl = _picUrl;
|
status._paths = _picUrl.split(';');
|
device._picUrls.push(_picUrl);
|
if ('_statusList' in device) {
|
device._statusList.push(status);
|
} else {
|
device._statusList = Array.of(status);
|
}
|
// 排序
|
device._statusList.sort(function (x, y) {
|
return new Date(x.dlCreateTime) - new Date(y.dlCreateTime); // 降序，升序则反之
|
});
|
},
|
submit() {},
|
cancel() {},
|
modifyObjectKeys(obj) {
|
const newObj = {};
|
for (const key in obj) {
|
// 跳过以 'dl' 或 '_' 开头的属性
|
if (key.startsWith('dl') || key.startsWith('_')) {
|
newObj[key] = obj[key];
|
continue;
|
}
|
// 根据 topDeviceTypeId 添加前缀
|
let prefix = '';
|
switch (this.currSelect.topDeviceTypeId) {
|
case 0:
|
prefix = 'di';
|
break;
|
case 1:
|
prefix = 'pi';
|
break;
|
case 2:
|
prefix = 'wi';
|
break;
|
default:
|
// 如果 topDeviceTypeId 不是 0, 1, 或 2，不添加前缀
|
newObj[key] = obj[key];
|
continue;
|
}
|
|
// 添加前缀并转换为驼峰式命名
|
const newKey = `${prefix}${key.charAt(0).toUpperCase() + key.slice(1)}`;
|
newObj[newKey] = obj[key];
|
}
|
return newObj;
|
},
|
// 生成接口参数
|
generateQuery(obj) {
|
// 需要根据场景类型确定接口参数的属性名
|
var query = this.modifyObjectKeys(obj);
|
return query;
|
},
|
onClickPic(e, item) {
|
e.stopPropagation();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.image-container {
|
justify-content: flex-end;
|
display: flex;
|
/* width: 300px; */
|
/* flex-direction: row-reverse; */
|
/* height: 225px; */
|
/* overflow: hidden; 确保图片不会超出容器 */
|
}
|
.pic-style {
|
width: 150px;
|
height: 150px;
|
border-radius: 4px;
|
}
|
.card-style {
|
height: 400px;
|
margin-bottom: 10px;
|
border-color: rgba(0, 0, 0, 0.308);
|
}
|
.centerDiv {
|
text-align: center; /* 水平居中 */
|
}
|
.dot {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 10px;
|
height: 10px;
|
background-color: #f56c6c;
|
border-radius: 50%;
|
}
|
.abstract_main {
|
width: 98%;
|
}
|
.abstract_main_item {
|
display: flex;
|
flex-direction: column;
|
margin-right: 50px;
|
margin-top: 10px;
|
/* width: 20%; */
|
}
|
.abstract_other_item {
|
/* display: flex;
|
flex-direction: column; */
|
/* margin-left: 50px; */
|
/* margin-top: 10px;
|
width: 100vh; */
|
}
|
.abstract_main_item_inner {
|
display: flex;
|
justify-content: center;
|
}
|
.abstract_other_item_inner {
|
margin-left: 10px;
|
display: flex;
|
}
|
.abstract_main_title {
|
/* margin-left: -400px; */
|
color: #303133;
|
font-size: 16px;
|
}
|
.abstract_main_title {
|
color: #606266;
|
font-size: 13px;
|
margin-top: 10px;
|
}
|
.abstract_other_title {
|
color: #606266;
|
font-size: 13px;
|
margin-top: 45px;
|
}
|
.abstract_main_text {
|
color: #303133;
|
font-size: 17px;
|
margin-top: 5px;
|
}
|
.abstract_pic_text {
|
display: block;
|
color: var(--el-text-color-secondary);
|
font-size: 14px;
|
/* margin-top: 20px; */
|
}
|
.block-div {
|
display: block;
|
}
|
.form_class {
|
/* margin-left: 10px; */
|
}
|
|
.el-collapse {
|
/* 折叠面板折叠时的高度 */
|
--el-collapse-header-height: auto;
|
}
|
.el-collapse-item__header {
|
width: 100%;
|
}
|
.form-class {
|
width: 50vw;
|
}
|
.form-item-class {
|
margin-bottom: 10px;
|
}
|
.sub-title {
|
font-size: var(--el-font-size-large);
|
margin-bottom: 30px;
|
margin-left: 20px;
|
}
|
.collapse-item-class {
|
height: 100%;
|
border: 5px;
|
}
|
|
::-webkit-scrollbar {
|
height: 0;
|
}
|
</style>
|
