riku
2024-11-14 ae234efb788bca2fa77f700442427996fa7f4aca
src/views/fysp/check/components/CompDeviceShowTest.vue
@@ -3,14 +3,22 @@
    <!-- 选项 -->
    <!-- 设备类型  -->
    <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>
@@ -21,12 +29,16 @@
      </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">{{
@@ -75,11 +87,10 @@
                    ></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">
@@ -90,6 +101,7 @@
                  class="block-div"
                  @click="onClickPic($event)"
                  v-for="(status, index) in item._statusList"
                  :key="index"
                >
                  <el-image
                    v-if="index == 0"
@@ -105,19 +117,6 @@
              </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">
@@ -126,41 +125,23 @@
              <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>
@@ -171,7 +152,6 @@
            </el-tabs>
          </el-form-item>
        </el-form>
        <el-divider />
        <!-- 详细内容结束 -->
      </el-collapse-item>
    </el-collapse>
@@ -181,11 +161,9 @@
</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: {
@@ -238,79 +216,6 @@
        { 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: {}
    };
  },
@@ -338,9 +243,6 @@
    // 展示表单的详情的点击事件
    showDetail(item) {
      item._isDetail = !item._isDetail;
      if (item._isDetail) {
      } else {
      }
    },
    init(scene) {
      // 父组件主动调用初始化子组件的方法
@@ -377,25 +279,25 @@
      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) {
@@ -414,33 +316,17 @@
                  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;
    },
    // 保存状态信息
@@ -498,51 +384,6 @@
      // 需要根据场景类型确定接口参数的属性名
      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();