1. 问题新增与修改页面表单中建议修正v-show去掉 2. 问题新增与修改页面初始化逻辑修改

hcong

2024-11-20 ccbb669bce01305dcb0c5b890aa592352fbb18d0

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

@@ -1,170 +1,179 @@
<template>
  <div>
    <!-- 选项 -->
    <!-- 设备类型  -->
    <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">
            <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 style="height: 100%" v-model="activeNames">
      <el-collapse-item v-for="item in formInfo" :name="item" style="height: 100%">
        <template #title>
          <!-- 摘要内容开始 -->
          <div class="abstract_main" v-if="activeNames.indexOf(item) === -1">
            <span class="abstract_main_title">{{ item.name }}</span>
            <div class="abstract_other_item_inner">
              <!-- 供应商 -->
              <div class="abstract_other_item">
                <span class="abstract_other_title">{{ `供应商` }}</span>
                <span class="abstract_main_text">{{ item.supplier || '无' }}</span>
              </div>
              <!-- 运维商 -->
              <div class="abstract_other_item">
                <span class="abstract_other_title">{{ `运维商` }}</span>
                <span class="abstract_main_text">{{ item.maintainer || '无' }}</span>
              </div>
              <!-- 运行状态 -->
              <div class="abstract_other_item">
                <span class="abstract_other_title">{{ `运行状态` }}</span>
                <span class="abstract_main_text">{{
                  getRunStatusValueByRunStatusKey(item.runningStatus) || '无'
                }}</span>
              </div>
              <!-- 图片 -->
              <div class="image-container">
                <el-image
                  v-for="status in item._statusList"
                  fit="cover"
                  class="pic-style"
                  :src="status._picUrl"
                  :preview-src-list="Array.of(status._picUrl)"
                />
              </div>
            </div>
          </div>
          <div v-else class="centerDiv">
            <el-button link type="primary" size="large">[点击缩放]</el-button>
          </div>
          <!-- 摘要内容结束 -->
        </template>
        <!-- 详细内容开始 -->
        <div class="sub-title">{{ item.name }}</div>
        <el-form :model="item" class="form_class">
          <!-- <el-form-item label="站点">
            <el-input v-model="item.name" :disabled="isDisabled"></el-input>
          </el-form-item> -->
          <el-form-item label="供应商">
            <el-input v-model="item.supplier" :disabled="isDisabled"></el-input>
          </el-form-item>
          <el-form-item label="运维商">
            <el-input v-model="item.maintainer" :disabled="isDisabled"></el-input>
          </el-form-item>
          <el-form-item label="运维频次">
            <el-select v-model="item.maintainFrequency" :disabled="isDisabled">
              <el-option
                v-for="frequency of maintainFrequencysArray"
                :key="frequency.key"
                :label="frequency.value"
                :value="frequency.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运维人员">
            <el-input v-model="item.maintainStaff" :disabled="isDisabled"></el-input>
          </el-form-item>
          <el-form-item label="运维联系方式">
            <el-input v-model="item.maintainTel" :disabled="isDisabled"></el-input>
          </el-form-item>
          <el-form-item label="品牌型号">
            <el-input v-model="item.brandModel" :disabled="isDisabled"></el-input>
          </el-form-item>
          <el-form-item label="运行状态">
            <el-select v-model="item.runningStatus" :disabled="isDisabled">
              <el-option
                v-for="status of runStatusArray"
                :key="status.key"
                :label="status.value"
                :value="status.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所有权">
            <el-select v-model="item.ownership" :disabled="isDisabled">
              <el-option
                v-for="ownership of ownershipArray"
                :key="ownership.key"
                :label="ownership.value"
                :value="ownership.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <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)">
                <el-form :model="status" class="form-class">
                  <el-form-item label="位置">
                    <el-input
                      v-model="status.dlLocation"
  <CompGenericWrapper type="drawer">
    <template #content>
      <!-- 选项 -->
      <!-- 设备类型  -->
      <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"
                      class="form-item-class"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="经度">
                    <el-input
                      v-model="status.dlLongitude"
                      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"
                      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>
                    <!-- 图片 -->
                      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)"
                    />
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-form>
        <el-divider />
        <!-- 详细内容结束 -->
      </el-collapse-item>
    </el-collapse>
    <!-- 空状态 -->
    <el-empty v-if="isEmpty" />
  </div>
                    <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"
    /></template>
  </CompGenericWrapper>
</template>

<script>
import CompGenericWrapper from './CompGenericWrapper.vue';
import deviceApi from '@/api/fysp/deviceApi';
import { $fysp } from '@/api/index';
import { toLabel } from '@/enum/device/device';
export default {
  components: {},
  components: { CompGenericWrapper },
  watch: {
    // 选择改变监听
    currSelect: {
@@ -215,79 +224,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: {}
    };
  },
@@ -315,9 +251,6 @@
    // 展示表单的详情的点击事件
    showDetail(item) {
      item._isDetail = !item._isDetail;
      if (item._isDetail) {
      } else {
      }
    },
    init(scene) {
      // 父组件主动调用初始化子组件的方法
@@ -336,18 +269,16 @@
      // 将一个js对象中所有di，wi，pi开头的属性全部改成去掉这些前缀并且重新变为驼峰式命名
      const newObj = {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          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];
        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;
    },
@@ -356,25 +287,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) {
@@ -383,6 +314,7 @@
                  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];
@@ -392,15 +324,25 @@
                  this.formInfo.push(element);
                }
              }
            })
            .catch((err) => {});
        }
      });
            });
          }
        });
    },
    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 {
@@ -416,34 +358,32 @@
    modifyObjectKeys(obj) {
      const newObj = {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          // 跳过以 'dl' 或 '_' 开头的属性
          if (key.startsWith('dl') || key.startsWith('_')) {
        // 跳过以 '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;
          }
          // 根据 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];
        }

        // 添加前缀并转换为驼峰式命名
        const newKey = `${prefix}${key.charAt(0).toUpperCase() + key.slice(1)}`;
        newObj[newKey] = obj[key];
      }
      return newObj;
    },
@@ -453,58 +393,8 @@
      var query = this.modifyObjectKeys(obj);
      return query;
    },
    // 根据接口返回生成 iDeviceTypesMap
    generateIDeviceTypesMap() {},
    // 获取当前topType，当前sceneTypeId下所有父类型
    getAlliDeviceParentTypeArray() {
      console.log('topDeviceTypeId', this.currSelect.topDeviceTypeId);

      var sceneTypeAndIDeviceTypesMap = this.iDeviceTypesMap.get(this.currSelect.topDeviceTypeId);
      if (!sceneTypeAndIDeviceTypesMap) {
        return '';
      }
      console.log('sceneTypeId', this.scene.typeid);
      console.log('scene', this.scene);

      var iDeviceTypesArray = sceneTypeAndIDeviceTypesMap.get(this.scene.typeid);
      if (!iDeviceTypesArray) {
        return '';
      }
      return iDeviceTypesArray;
    },
    // 获取设备类型 topDeviceTypeId, sceneTypeId 和 自身的一些参数
    getIDeviceParentTypeObj(device) {
      var iDeviceTypesArray = this.getAlliDeviceParentTypeArray();
      console.log('iDeviceTypesArray', this.getAlliDeviceParentTypeArray());
      var result;
      iDeviceTypesArray.forEach((e) => {
        if (e.value == device.typeId) {
          result = e;
        }
      });
      return result;
    },
    // 获取设备子类型 topDeviceTypeId, sceneTypeId 和 自身的一些参数
    getIDeviceChildrenTypeObj(device) {
      console.log('device', device);

      var parentType = this.getIDeviceParentTypeObj(device);
      console.log('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();
    }
  }
};
@@ -512,16 +402,17 @@

<style scoped>
.image-container {
  justify-content: flex-end;
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: 200px;
  overflow: hidden; /* 确保图片不会超出容器 */
  /* width: 300px; */
  /* flex-direction: row-reverse; */
  /* height: 225px; */
  /* overflow: hidden; 确保图片不会超出容器 */
}
.pic-style {
  width: 180px;
  height: 180px;
  margin-right: 5%;
  width: 150px;
  height: 150px;
  border-radius: 4px;
}
.card-style {
  height: 400px;
@@ -541,35 +432,61 @@
  border-radius: 50%;
}
.abstract_main {
  width: 100%;
  width: 98%;
}
.abstract_other_item {
.abstract_main_item {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
  margin-top: 10px;
  width: 20%;
  /* 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;
  /* 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;
  /* margin-left: 10px; */
}

.el-collapse {
@@ -590,4 +507,12 @@
  margin-bottom: 30px;
  margin-left: 20px;
}
.collapse-item-class {
  height: 100%;
  border: 5px;
}

::-webkit-scrollbar {
  height: 0;
}
</style>