| | |
| | | <!-- 选项 --> |
| | | <!-- 设备类型 --> |
| | | <el-row> |
| | | <!-- <el-col> |
| | | <span>设备类型:</span> |
| | | </el-col> --> |
| | | <el-col> |
| | | <el-tabs class="child_select" placeholder="设备类型" v-model="currSelect.topDeviceTypeId"> |
| | | <el-tab-pane v-for="item in deviceTopTypes" :name="item.id"> |
| | | <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'"> |
| | | <el-badge |
| | | :value="item.count" |
| | | :type="item.count == 0 ? 'danger' : 'primary'" |
| | | > |
| | | <span class="custom-tabs-label"> |
| | | <span>{{ item.label }}</span> |
| | | </span> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | <el-collapse v-model="activeNames" style="border: 4px"> |
| | | <el-collapse-item v-for="item in formInfo" :name="item.id" class="collapse-item-class"> |
| | | <!-- <div v-if="activeNames.indexOf(item) !== -1" class="centerDiv"> |
| | | <el-button link type="primary" size="large">[点击缩放]</el-button> |
| | | </div> --> |
| | | <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="display: flex; width: 100%; justify-content: space-between" |
| | | > |
| | | <div style=""> |
| | | <el-descriptions style="" :column="3" size="small" border> |
| | | <el-descriptions-item width="64px" label="站点名称" :span="3">{{ |
| | |
| | | ></el-option> |
| | | </el-select> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="类型"> |
| | | {{ item._typename || '无' }} |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | <!-- <div style="display: block"> |
| | | <span class="abstract_main_title">{{ `站点名称 ` }}</span> |
| | | <span class="abstract_main_text">{{ item.name || '无' }}</span> |
| | | </div> --> |
| | | </div> |
| | | |
| | | <div style="display: flex"> |
| | |
| | | class="block-div" |
| | | @click="onClickPic($event)" |
| | | v-for="(status, index) in item._statusList" |
| | | :key="index" |
| | | > |
| | | <el-image |
| | | v-if="index == 0" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <el-descriptions class="margin-top" :title="item.name" :column="3" :size="size" border> |
| | | <el-descriptions-item label="供应商"> |
| | | {{ item.supplier || '无' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="运维商"> |
| | | {{ item.maintainer || '无' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="运行状态"> |
| | | {{ getRunStatusValueByRunStatusKey(item.runningStatus) || '无' }} |
| | | </el-descriptions-item> |
| | | </el-descriptions> --> |
| | | <!-- 摘要内容开始 --> |
| | | <!-- 摘要内容结束 --> |
| | | </template> |
| | | <!-- 详细内容开始 --> |
| | | <el-form :model="item" class="form_class"> |
| | |
| | | <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"> |
| | | <!-- <el-input |
| | | style="width: 250px;" |
| | | v-model="status.dlLocation" |
| | | :disabled="isDisabled" |
| | | class="form-item-class" |
| | | ></el-input> --> |
| | | {{ status.dlLocation }} |
| | | </el-form-item> |
| | | <!-- <el-form-item label="经度"> |
| | | <el-input |
| | | v-model="status.dlLongitude" |
| | | :disabled="isDisabled" |
| | | class="form-item-class" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="纬度"> |
| | | <el-input |
| | | v-model="status.dlLatitude" |
| | | :disabled="isDisabled" |
| | | class="form-item-class" |
| | | ></el-input> |
| | | </el-form-item> --> |
| | | <el-form-item label="图片"> |
| | | <!-- 图片 --> |
| | | <el-space> |
| | | <div v-if="status._paths && status._paths.length > 0"> |
| | | <el-image |
| | | v-for="path in status._paths" |
| | | 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-tabs> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-divider /> |
| | | <!-- 详细内容结束 --> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import dataMonitorDeviceTypeJs from './js/dataMonitorDeviceType.js'; |
| | | import dataProductionDeviceTypeJs from './js/dataProductionDeviceType.js'; |
| | | import dataTreatmentDeviceTypeJs from './js/dataTreatmentDeviceType.js'; |
| | | import deviceApi from '@/api/fysp/deviceApi'; |
| | | import { $fysp } from '@/api/index'; |
| | | import { toLabel } from '@/enum/device/device'; |
| | | export default { |
| | | components: {}, |
| | | watch: { |
| | |
| | | { key: 0, value: '购买' }, |
| | | { key: 1, value: '租赁' } |
| | | ], |
| | | // i-设备类型 |
| | | // 两层map, { key: topType, value: { key: sceneTypeId, value: [label, value, children] } } |
| | | iDeviceTypesMap: new Map( |
| | | [ |
| | | { |
| | | topTypeId: 0, |
| | | value: new Map( |
| | | [ |
| | | { |
| | | sceneTypeId: 1, |
| | | value: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1, |
| | | children: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1 |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | sceneTypeId: 2, |
| | | value: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1, |
| | | children: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1 |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | sceneTypeId: 3, |
| | | value: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1, |
| | | children: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1 |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | sceneTypeId: 14, |
| | | value: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1, |
| | | children: [ |
| | | { |
| | | label: '扬尘监测', |
| | | value: 1 |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | ].map((item) => [item.sceneTypeId, item.value]) |
| | | ) |
| | | } |
| | | ].map((item) => [item.topTypeId, item.value]) |
| | | ), |
| | | scene: {} |
| | | }; |
| | | }, |
| | |
| | | // 展示表单的详情的点击事件 |
| | | showDetail(item) { |
| | | item._isDetail = !item._isDetail; |
| | | if (item._isDetail) { |
| | | } else { |
| | | } |
| | | }, |
| | | init(scene) { |
| | | // 父组件主动调用初始化子组件的方法 |
| | |
| | | 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) => { |
| | | 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) { |
| | |
| | | this.formInfo.push(element); |
| | | } |
| | | } |
| | | }) |
| | | .catch((err) => {}); |
| | | } |
| | | }); |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | setDeviceType(element) { |
| | | var type = []; |
| | | switch (this.currSelect.topDeviceTypeId) { |
| | | case 0: |
| | | type = dataMonitorDeviceTypeJs.toLabel(element.sceneTypeId, Array.of(element.subtypeId)); |
| | | break; |
| | | case 1: |
| | | type = dataTreatmentDeviceTypeJs.toLabel( |
| | | element.sceneTypeId, |
| | | Array.of(element.subtypeId) |
| | | ); |
| | | break; |
| | | case 2: |
| | | type = dataProductionDeviceTypeJs.toLabel( |
| | | element.sceneTypeId, |
| | | Array.of(element.subtypeId) |
| | | ); |
| | | break; |
| | | } |
| | | if (type.length > 0) { |
| | | element._typename = type[0]; |
| | | } |
| | | type = toLabel(element.sceneTypeId, this.currSelect.topDeviceTypeId, [ |
| | | element.typeId, |
| | | element.subtypeId |
| | | ]); |
| | | element._typename = type.join('-'); |
| | | return element; |
| | | }, |
| | | // 保存状态信息 |
| | |
| | | // 需要根据场景类型确定接口参数的属性名 |
| | | var query = this.modifyObjectKeys(obj); |
| | | return query; |
| | | }, |
| | | // 根据接口返回生成 iDeviceTypesMap |
| | | generateIDeviceTypesMap() {}, |
| | | // 获取当前topType,当前sceneTypeId下所有父类型 |
| | | getAlliDeviceParentTypeArray() { |
| | | var sceneTypeAndIDeviceTypesMap = this.iDeviceTypesMap.get(this.currSelect.topDeviceTypeId); |
| | | if (!sceneTypeAndIDeviceTypesMap) { |
| | | return ''; |
| | | } |
| | | |
| | | var iDeviceTypesArray = sceneTypeAndIDeviceTypesMap.get(this.scene.typeid); |
| | | if (!iDeviceTypesArray) { |
| | | return ''; |
| | | } |
| | | return iDeviceTypesArray; |
| | | }, |
| | | // 获取设备类型 topDeviceTypeId, sceneTypeId 和 自身的一些参数 |
| | | getIDeviceParentTypeObj(device) { |
| | | var iDeviceTypesArray = this.getAlliDeviceParentTypeArray(); |
| | | var result; |
| | | iDeviceTypesArray.forEach((e) => { |
| | | if (e.value == device.typeId) { |
| | | result = e; |
| | | } |
| | | }); |
| | | return result; |
| | | }, |
| | | // 获取设备子类型 topDeviceTypeId, sceneTypeId 和 自身的一些参数 |
| | | getIDeviceChildrenTypeObj(device) { |
| | | var parentType = this.getIDeviceParentTypeObj(device); |
| | | |
| | | if (parentType == null || parentType == '' || !('children' in parentType)) { |
| | | return ''; |
| | | } |
| | | var children = parentType.children; |
| | | if (children == null || children.length <= 0) { |
| | | return ''; |
| | | } |
| | | let result; |
| | | iDeviceTypesArray.forEach((e) => { |
| | | if (e.value == device.typeId) { |
| | | result = e; |
| | | } |
| | | }); |
| | | return result; |
| | | }, |
| | | onClickPic(e, item) { |
| | | e.stopPropagation(); |