| | |
| | | <!-- é项 --> |
| | | <!-- 设å¤ç±»å --> |
| | | <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: { |
| | | // éæ©æ¹åçå¬ |
| | |
| | | this.getList() |
| | | }, |
| | | deep: true |
| | | }, |
| | | scene(nV, oV) { |
| | | if (nV != oV) { |
| | | this.init() |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | activeNames: [], |
| | | // æ§å¶æ¯å¦å±ç¤ºç©ºç¶æ |
| | | isEmpty: false, |
| | |
| | | }, |
| | | // æ§å¶è¡¨åæ¯å¦å¯ä»¥ç¼è¾ |
| | | isDisabled: true, |
| | | formInfo: {}, |
| | | formInfo: [], |
| | | rules: [], |
| | | // 设å¤ç±»å |
| | | deviceTopTypes: [ |
| | |
| | | ownershipArray: [ |
| | | { key: 0, value: 'è´ä¹°' }, |
| | | { key: 1, value: 'ç§èµ' } |
| | | ], |
| | | scene: {} |
| | | ] |
| | | } |
| | | }, |
| | | |
| | |
| | | showDetail(item) { |
| | | item._isDetail = !item._isDetail |
| | | }, |
| | | init(scene) { |
| | | // ç¶ç»ä»¶ä¸»å¨è°ç¨åå§ååç»ä»¶çæ¹æ³ |
| | | this.scene = scene |
| | | |
| | | init() { |
| | | this.getList() |
| | | this.getTabsCount() |
| | | }, |
| | |
| | | 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 = [] |
| | |
| | | } |
| | | // æåº |
| | | 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() {}, |
| | |
| | | /* overflow: hidden; ç¡®ä¿å¾çä¸ä¼è¶
åºå®¹å¨ */ |
| | | } |
| | | .pic-style { |
| | | width: 150px; |
| | | height: 150px; |
| | | width: 100px; |
| | | height: 100px; |
| | | border-radius: 4px; |
| | | } |
| | | .card-style { |