From 91513e171078ed6b0887f87b9fced33895d6d3fb Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 08 七月 2025 08:35:50 +0800
Subject: [PATCH] 2025.7.8
---
src/components/inspection/SceneDevice.vue | 392 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 215 insertions(+), 177 deletions(-)
diff --git a/src/components/inspection/SceneDevice.vue b/src/components/inspection/SceneDevice.vue
index 18a8f77..fb0e95f 100644
--- a/src/components/inspection/SceneDevice.vue
+++ b/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 {
--
Gitblit v1.9.3