supervision-vue.git

			@@ -1,171 +1,179 @@
			<template>
			<div>
			<!-- 选项 -->
			<!-- 设备类型 -->
			<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"
			<CompGenericWrapper type="drawer">
			<template #content>
			<!-- 选项 -->
			<!-- 设备类型 -->
			<el-row>
			<el-col>
			<el-tabs
			class="child_select"
			placeholder="设备类型"
			v-model="currSelect.topDeviceTypeId"
			>
			<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"
			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-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-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>
			<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"
			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>
			</div>
			</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" />
			</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: {