| | |
| | | <template> |
| | | <FYImageSelectDialog |
| | | v-loading="loading" |
| | | title="设备图片" |
| | | :typeList="typeList" |
| | | :typeImgMap="typeImgMap" |
| | | :maxSelect="1" |
| | | ></FYImageSelectDialog> |
| | | </template> |
| | | <script setup> |
| | | import { ref, watch, computed } from 'vue'; |
| | | |
| | | import { ref, computed, onMounted } from 'vue'; |
| | | import deviceApi from '@/api/fysp/deviceApi'; |
| | | import { useCloned } from '@vueuse/core'; |
| | | import { $fysp } from '@/api/index.js'; |
| | | const loading = ref(true) |
| | | const props = defineProps({ |
| | | // 展示模式 |
| | | mode: { |
| | | type: Number, |
| | | default: 0 |
| | | }, |
| | | pics: Array |
| | | subtask: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }); |
| | | // typeList: [ |
| | | // { id: 0, label: '监控设备' }, |
| | | // { id: 1, label: '治理设备' }, |
| | | // { id: 2, label: '生产设备' } |
| | | // ], |
| | | const typeList = computed(() => { |
| | | if (props.mode == 0) { |
| | | return [{ typeId: 0, typeName: '监控设备' }]; |
| | | return [ |
| | | { typeId: 0, typeName: '监控设备' }, |
| | | { typeId: 1, typeName: '治理设备' }, |
| | | { typeId: 2, typeName: '生产设备' } |
| | | ]; |
| | | } else if (props.mode == 1) { |
| | | return [{ typeId: 1, typeName: '整改' }]; |
| | | } else { |
| | |
| | | } |
| | | }); |
| | | const typeImgMap = ref(new Map()); |
| | | // 标准化属性名 |
| | | function 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; |
| | | } |
| | | // 保存状态信息 |
| | | function saveStatus(device, status) { |
| | | var _picUrl = $fysp.imgUrl + status.dlPicUrl; |
| | | device.url = _picUrl; |
| | | } |
| | | function getDeviceImgList() { |
| | | let deviceImgMap = typeImgMap.value; |
| | | for (const deviceTopTypeElement of typeList.value) { |
| | | const topTypeId = deviceTopTypeElement.typeId; |
| | | deviceImgMap.set(topTypeId, []); |
| | | deviceApi.fetchDevices(props.subtask.sceneId, topTypeId).then((result) => { |
| | | loading.value = true; |
| | | // 标准化属性名 |
| | | for (let i = 0; i < result.data.length; i++) { |
| | | var element = convertKeys(result.data[i]); |
| | | // 获取设备状态信息 |
| | | let data = { |
| | | deviceId: element.id, |
| | | sceneId: element.sceneGuid, |
| | | deviceTypeId: topTypeId |
| | | }; |
| | | deviceApi.fetchDeviceStatus(data).then((status) => { |
| | | var statusData = status.data; |
| | | if (statusData) { |
| | | if (statusData.length == 0) { |
| | | return; |
| | | } |
| | | element = convertKeys(result.data[i]); |
| | | for (let j = 0; j < statusData.length; j++) { |
| | | // 复制出一个设备对象 |
| | | var newDevice = useCloned(element).cloned.value; |
| | | const statusItem = statusData[j]; |
| | | // 设备对象添加一个属性列表属性用来保存设备状态 |
| | | saveStatus(newDevice, statusItem); |
| | | newDevice.dlLocation = statusItem.dlLocation; |
| | | newDevice.topTypeId = topTypeId; |
| | | |
| | | watch( |
| | | () => props.pics, |
| | | (nV, oV) => { |
| | | nV.forEach(e => { |
| | | if (!typeImgMap.value.has(e.topTypeId)) { |
| | | typeImgMap.value.set(e.topTypeId, []) |
| | | deviceImgMap.get(topTypeId).push(newDevice); |
| | | } |
| | | } |
| | | }).finally(() => (loading.value = false)); |
| | | } |
| | | typeImgMap.value.get(r.topTypeId).push({}) |
| | | }); |
| | | typeImgMap.value.set( |
| | | 1, |
| | | nV.map((v) => { |
| | | return { url: v }; |
| | | }) |
| | | ); |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | | </script> |
| | | } |
| | | } |
| | | onMounted(() => { |
| | | getDeviceImgList(); |
| | | }); |
| | | </script> |