2025.7.8

riku

2025-07-08 91513e171078ed6b0887f87b9fced33895d6d3fb

 src/components/inspection/SceneDevice.vue

@@ -4,158 +4,190 @@
  <!-- 选项 -->
  <!-- 设备类型  -->
  <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-tabs style="width: 100%" 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-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"
                  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-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)"
                />
                <span class="abstract_pic_text" v-if="index == 0">{{
                  `最新状态图片 ${status.dlCreateTime.slice(0, 10)}`
                }}</span>
  <el-scrollbar :height="height" v-loading="loading">
    <!-- <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 v-for="item in formInfo" :key="item.id" :name="item.id" class="collapse-item-class">
      <el-card class="m-b-10">
        <div style="text-align: start">
          <el-row>
            <el-col :span="12">
              <div>
                <el-text>{{
                  (currSelect.topDeviceTypeId == 0 ? '站点名称：' : '设备名称：') +
                  (item.name || '无')
                }}</el-text>
              </div>
            </div>
          </div>
              <template v-if="item._showMore">
                <div>
                  <el-text>{{ '供应商：' + (item.supplier || '无') }}</el-text>
                </div>
                <div>
                  <el-text>{{ '运维商：' + (item.maintainer || '无') }}</el-text>
                </div>
                <el-space>
                  <el-text>{{ '运维频次：' }}</el-text>
                  <el-select
                    v-model="item.maintainFrequency"
                    :disabled="isDisabled"
                    style="width: 100px"
                  >
                    <el-option
                      v-for="frequency of maintainFrequencysArray"
                      :key="frequency.key"
                      :label="frequency.value"
                      :value="frequency.key"
                    ></el-option>
                  </el-select>
                </el-space>
              </template>
            </el-col>
            <el-col :span="12">
              <div>
                <el-text>{{ '类型：' + (item._typename || '无') }}</el-text>
              </div>
              <template v-if="item._showMore">
                <div>
                  <el-text>{{ '运维人员：' + (item.maintainStaff || '无') }}</el-text>
                </div>
                <div>
                  <el-text>{{ '联系方式：' + (item.maintainTel || '无') }}</el-text>
                </div>
                <div>
                  <el-text>{{ '品牌型号：' + (item.brandModel || '无') }}</el-text>
                </div>
                <el-space>
                  <el-text>{{ '运行状态：' }}</el-text>
                  <el-select
                    v-model="item.runningStatus"
                    :disabled="isDisabled"
                    style="width: 100px"
                  >
                    <el-option
                      v-for="status of runStatusArray"
                      :key="status.key"
                      :label="status.value"
                      :value="status.key"
                    ></el-option>
                  </el-select>
                </el-space>
              </template>
            </el-col>
          </el-row>
          <el-row justify="end">
            <el-link type="success" @click="item._showMore = !item._showMore">
              <el-icon>
                <Bottom v-if="!item._showMore" />
                <Top v-else />
              </el-icon>
              {{ item._showMore ? '收起更多' : '更多信息' }}
            </el-link>
          </el-row>
          <!-- <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> -->
        </div>
      </template>
      <!-- 详细内容开始 -->
      <el-form :model="item" class="form_class">
        <el-form-item label="状态">
        <!-- </template> -->
        <!-- 详细内容开始 -->
        <el-space>
          <div>
            <div>设</div>
            <div>备</div>
            <div>状</div>
            <div>态</div>
          </div>
          <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-form :model="status" class="form-class"> -->
              <!-- <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-item v-if="status.dlLocation" label="位置" style="margin-bottom: 10px">
                {{ status.dlLocation }}
              </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" />
        </el-space>
      </el-card>
    </div>

    <!-- 详细内容结束 -->
    <!-- </el-collapse-item> -->
    <!-- </el-collapse> -->
    <!-- 空状态 -->
    <el-empty v-if="isEmpty" />
  </el-scrollbar>
  <!-- </template>
  </CompGenericWrapper> -->
</template>

<script>
import { reactive } from 'vue'
import deviceApi from '@/api/fysp/deviceApi'
import { $fysp } from '@/api/index'
import { toLabel } from '@/enum/device/device'
export default {
  components: {},
  props: {
    scene: Object
    scene: Object,
    height: {
      type: String,
      default: '70vh'
    }
  },
  watch: {
    // 选择改变监听
@@ -164,10 +196,16 @@
        this.getList()
      },
      deep: true
    },
    scene(nV, oV) {
      if (nV != oV) {
        this.init()
      }
    }
  },
  data() {
    return {
      loading: false,
      activeNames: [],
      // 控制是否展示空状态
      isEmpty: false,
@@ -180,7 +218,7 @@
      },
      // 控制表单是否可以编辑
      isDisabled: true,
      formInfo: {},
      formInfo: [],
      rules: [],
      // 设备类型
      deviceTopTypes: [
@@ -206,8 +244,7 @@
      ownershipArray: [
        { key: 0, value: '购买' },
        { key: 1, value: '租赁' }
      ],
      scene: {}
      ]
    }
  },

@@ -234,10 +271,7 @@
    showDetail(item) {
      item._isDetail = !item._isDetail
    },
    init(scene) {
      // 父组件主动调用初始化子组件的方法
      this.scene = scene

    init() {
      this.getList()
      this.getTabsCount()
    },
@@ -262,51 +296,55 @@
        newKey = newKey.charAt(0).toLowerCase() + newKey.slice(1)
        newObj[newKey] = obj[key]
      }
      return newObj
      return reactive(newObj)
    },
    // 新增字段
    initFormData(data) {
      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
      this.loading = true
      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.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)
              }
          // 标准化属性名
          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 = statusData.length - 1; index >= 0; index--) {
                  const statusItem = statusData[index]
                  // 设备对象添加一个属性列表属性用来保存设备状态
                  this.saveStatus(element, statusItem)
                  element.dlLocation = statusItem.dlLocation
                }
                this.formInfo.push(element)
              }
            })
          }
        })
        .finally(() => (this.loading = false))
    },
    setDeviceType(element) {
      var type = []
@@ -330,7 +368,7 @@
      }
      // 排序
      device._statusList.sort(function (x, y) {
        return new Date(x.dlCreateTime) - new Date(y.dlCreateTime) //   降序，升序则反之
        return new Date(y.dlCreateTime) - new Date(x.dlCreateTime) //   降序，升序则反之
      })
    },
    submit() {},
@@ -390,8 +428,8 @@
  /* overflow: hidden; 确保图片不会超出容器 */
}
.pic-style {
  width: 150px;
  height: 150px;
  width: 100px;
  height: 100px;
  border-radius: 4px;
}
.card-style {