| | |
| | | <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="站点名称" :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: { |