2026.4.10

feiyu02

6 天以前 ccc970e575ef3f3e5c67af8da210263f4ac549f9

 src/views/inspection/check/components/CompDeviceShowTest.vue

@@ -5,21 +5,10 @@
      <!-- 设备类型  -->
      <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"
            >
          <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>
@@ -37,22 +26,42 @@
          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 style="" :column="4" size="small" border>
                  <el-descriptions-item
                    width="64px"
                    :label="
                      currSelect.topDeviceTypeId == 0 ? '站点名称' : '设备名称'
                    "
                    :span="3"
                    :label="currSelect.topDeviceTypeId == 0 ? '站点名称' : '设备名称'"
                    >{{ item.name || '无' }}</el-descriptions-item
                  >
                  <el-descriptions-item label="品牌型号">{{
                    item.brandModel || '无'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="供应商">{{
                    item.supplier || '无'
                  }}</el-descriptions-item>
                  <el-descriptions-item :rowspan="3">
                    <div style="display: flex">
                      <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>
                  </el-descriptions-item>
                  <el-descriptions-item label="运维商">{{
                    item.maintainer || '无'
                  }}</el-descriptions-item>
@@ -76,9 +85,6 @@
                  <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"
@@ -96,12 +102,11 @@
                  <el-descriptions-item label="类型">
                    {{ item._typename || '无' }}
                  </el-descriptions-item>
                  
                </el-descriptions>
              </div>

              <div style="display: flex">
                <!-- <div class="sub-title">{{ item.name }}</div> -->
                <!-- 图片 -->
              <!-- <div style="display: flex">
                <div class="image-container">
                  <div
                    class="block-div"
@@ -121,7 +126,7 @@
                    }}</span>
                  </div>
                </div>
              </div>
              </div> -->
            </div>
          </template>
          <!-- 详细内容开始 -->
@@ -168,19 +173,19 @@
</template>

<script>
import deviceApi from '@/api/fysp/deviceApi';
import { $fysp } from '@/api/index';
import { toLabel } from '@/enum/device/device';
import deviceApi from '@/api/fysp/deviceApi'
import { $fysp } from '@/api/index'
import { toLabel } from '@/enum/device/device'
export default {
  components: {  },
  components: {},
  watch: {
    // 选择改变监听
    currSelect: {
      handler(newObj, oldObj) {
        this.getList();
        this.getList()
      },
      deep: true
    }
      deep: true,
    },
  },
  data() {
    return {
@@ -192,7 +197,7 @@
      // 表单详情点击按钮的图标
      isDetail: false,
      currSelect: {
        topDeviceTypeId: 0
        topDeviceTypeId: 0,
      },
      // 控制表单是否可以编辑
      isDisabled: true,
@@ -202,29 +207,29 @@
      deviceTopTypes: [
        { id: 0, label: '监控设备' },
        { id: 1, label: '治理设备' },
        { id: 2, label: '生产设备' }
        { id: 2, label: '生产设备' },
      ],
      // 运行状态
      runStatusArray: [
        { key: 0, value: '未联网' },
        { key: 1, value: '上线中' },
        { key: 2, value: '下线' },
        { key: 3, value: '拆除' }
        { key: 3, value: '拆除' },
      ],
      // 维护频率状态
      maintainFrequencysArray: [
        { key: 1, value: '每月一次' },
        { key: 2, value: '每季度一次' },
        { key: 3, value: '每半年一次' },
        { key: 4, value: '每年一次' }
        { key: 4, value: '每年一次' },
      ],
      // 租赁方式
      ownershipArray: [
        { key: 0, value: '购买' },
        { key: 1, value: '租赁' }
        { key: 1, value: '租赁' },
      ],
      scene: {}
    };
      scene: {},
    }
  },
  props: {},

@@ -234,169 +239,167 @@
    getTabsCount() {
      this.deviceTopTypes.forEach((item) => {
        deviceApi.fetchDevices(this.scene.guid, item.id).then((result) => {
          item.count = result.data.length;
        });
      });
          item.count = result.data.length
        })
      })
    },
    // 获取运行状态对应的value
    getRunStatusValueByRunStatusKey(status) {
      var runningStatusValueArray = this.runStatusArray.filter((runStatus) => {
        return runStatus.key == status;
      });
        return runStatus.key == status
      })
      if (runningStatusValueArray.length > 0) {
        return runningStatusValueArray[0].value;
        return runningStatusValueArray[0].value
      }
    },
    // 展示表单的详情的点击事件
    showDetail(item) {
      item._isDetail = !item._isDetail;
      item._isDetail = !item._isDetail
    },
    init(scene) {
      // 父组件主动调用初始化子组件的方法
      this.scene = scene;
      this.scene = scene

      this.getList();
      this.getTabsCount();
      this.getList()
      this.getTabsCount()
    },
    // 重置展示的数据
    initList() {
      this.formInfo = [];
      this.isEmpty = false;
      this.formInfo = []
      this.isEmpty = false
    },
    // 标准化属性名
    convertKeys(obj) {
      // 将一个js对象中所有di，wi，pi开头的属性全部改成去掉这些前缀并且重新变为驼峰式命名
      const newObj = {};
      const newObj = {}
      for (const key in obj) {
        let newKey = key;
        let newKey = key
        if (key.startsWith('di')) {
          newKey = key.substring(2);
          newKey = key.substring(2)
        } else if (key.startsWith('wi')) {
          newKey = key.substring(2);
          newKey = key.substring(2)
        } else if (key.startsWith('pi')) {
          newKey = key.substring(2);
          newKey = key.substring(2)
        }
        newKey = newKey.charAt(0).toLowerCase() + newKey.slice(1);
        newObj[newKey] = obj[key];
        newKey = newKey.charAt(0).toLowerCase() + newKey.slice(1)
        newObj[newKey] = obj[key]
      }
      return newObj;
      return newObj
    },
    // 新增字段
    initFormData(data) {
      data._isDetail = false;
      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;
      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,
          }
          // 标准化属性名
          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);
                }
          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 = [];
      var type = []
      type = toLabel(element.sceneTypeId, this.currSelect.topDeviceTypeId, [
        element.typeId,
        element.subtypeId
      ]);
      element._typename = type.join('-');
      return element;
        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);
      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);
        device._statusList.push(status)
      } else {
        device._statusList = Array.of(status);
        device._statusList = Array.of(status)
      }
      // 排序
      device._statusList.sort(function (x, y) {
        return new Date(x.dlCreateTime) - new Date(y.dlCreateTime); //   降序，升序则反之
      });
        return new Date(x.dlCreateTime) - new Date(y.dlCreateTime) //   降序，升序则反之
      })
    },
    submit() {},
    cancel() {},
    modifyObjectKeys(obj) {
      const newObj = {};
      const newObj = {}
      for (const key in obj) {
        // 跳过以 'dl' 或 '_' 开头的属性
        if (key.startsWith('dl') || key.startsWith('_')) {
          newObj[key] = obj[key];
          continue;
          newObj[key] = obj[key]
          continue
        }
        // 根据 topDeviceTypeId 添加前缀
        let prefix = '';
        let prefix = ''
        switch (this.currSelect.topDeviceTypeId) {
          case 0:
            prefix = 'di';
            break;
            prefix = 'di'
            break
          case 1:
            prefix = 'pi';
            break;
            prefix = 'pi'
            break
          case 2:
            prefix = 'wi';
            break;
            prefix = 'wi'
            break
          default:
            // 如果 topDeviceTypeId 不是 0, 1, 或 2，不添加前缀
            newObj[key] = obj[key];
            continue;
            newObj[key] = obj[key]
            continue
        }

        // 添加前缀并转换为驼峰式命名
        const newKey = `${prefix}${key.charAt(0).toUpperCase() + key.slice(1)}`;
        newObj[newKey] = obj[key];
        const newKey = `${prefix}${key.charAt(0).toUpperCase() + key.slice(1)}`
        newObj[newKey] = obj[key]
      }
      return newObj;
      return newObj
    },
    // 生成接口参数
    generateQuery(obj) {
      // 需要根据场景类型确定接口参数的属性名
      var query = this.modifyObjectKeys(obj);
      return query;
      var query = this.modifyObjectKeys(obj)
      return query
    },
    onClickPic(e, item) {
      e.stopPropagation();
    }
  }
};
      e.stopPropagation()
    },
  },
}
</script>

<style scoped>