问题审核1021

hcong

2024-10-21 13272e92a6c98daad06aa166a6674bf4dac7cc4b

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

@@ -20,110 +20,124 @@
        </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%">
    <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> -->
        <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 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">{{
                  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"
                    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"
                    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>
              <!-- <div style="display: block">
              <span class="abstract_main_title">{{ `站点名称 ` }}</span>
              <span class="abstract_main_text">{{ item.name || '无' }}</span>
            </div> -->
            </div>

            <div style="display: flex">
              <!-- <div class="sub-title">{{ item.name }}</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
                  class="block-div"
                  @click="onClickPic($event)"
                  v-for="(status, index) in item._statusList"
                >
                  <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>
          </div>
          <div v-else class="centerDiv">
            <el-button link type="primary" size="large">[点击缩放]</el-button>
          </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>
        <!-- 详细内容开始 -->
        <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-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
                  <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>
                    ></el-input> -->
                    {{ status.dlLocation }}
                  </el-form-item>
                  <el-form-item label="经度">
                  <!-- <el-form-item label="经度">
                    <el-input
                      v-model="status.dlLongitude"
                      :disabled="isDisabled"
@@ -136,15 +150,21 @@
                      :disabled="isDisabled"
                      class="form-item-class"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                  </el-form-item> -->
                  <el-form-item label="图片">
                    <!-- 图片 -->
                    <el-image
                      fit="cover"
                      class="pic-style"
                      :src="status._picUrl"
                      :preview-src-list="Array.of(status._picUrl)"
                    />
                    <el-space>
                      <div v-if="status._paths && status._paths.length > 0">
                        <el-image
                          v-for="path in status._paths"
                          fit="cover"
                          class="pic-style"
                          :src="path"
                          :preview-src-list="Array.of(path)"
                        />
                      </div>
                      <el-empty v-else></el-empty>
                    </el-space>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
@@ -161,6 +181,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';
export default {
@@ -336,18 +359,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;
    },
@@ -383,6 +404,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];
@@ -397,10 +419,36 @@
        }
      });
    },
    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];
      }
      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 +464,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;
    },
@@ -457,14 +503,10 @@
    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) {
@@ -475,7 +517,6 @@
    // 获取设备类型 topDeviceTypeId, sceneTypeId 和 自身的一些参数
    getIDeviceParentTypeObj(device) {
      var iDeviceTypesArray = this.getAlliDeviceParentTypeArray();
      console.log('iDeviceTypesArray', this.getAlliDeviceParentTypeArray());
      var result;
      iDeviceTypesArray.forEach((e) => {
        if (e.value == device.typeId) {
@@ -486,10 +527,7 @@
    },
    // 获取设备子类型 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 '';
@@ -505,6 +543,9 @@
        }
      });
      return result;
    },
    onClickPic(e, item) {
      e.stopPropagation();
    }
  }
};
@@ -512,16 +553,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 +583,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 +658,12 @@
  margin-bottom: 30px;
  margin-left: 20px;
}
.collapse-item-class {
  height: 100%;
  border: 5px;
}

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