From 952a20f1c005d80e9bf881287c40e6f4e4266a0b Mon Sep 17 00:00:00 2001
From: lxp <1928192722@qq.com>
Date: 星期三, 12 三月 2025 15:34:52 +0800
Subject: [PATCH] Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi into dev
---
src/views/CNAS/resourceDemand/device/component/device-overview.vue | 386 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 386 insertions(+), 0 deletions(-)
diff --git a/src/views/CNAS/resourceDemand/device/component/device-overview.vue b/src/views/CNAS/resourceDemand/device/component/device-overview.vue
new file mode 100644
index 0000000..2efabd0
--- /dev/null
+++ b/src/views/CNAS/resourceDemand/device/component/device-overview.vue
@@ -0,0 +1,386 @@
+<!-- 璁惧鎬昏 -->
+<style scoped>
+.title {
+ height: 60px;
+ line-height: 60px;
+}
+
+.search {
+ background-color: #fff;
+ height: 50px;
+ display: flex;
+ align-items: center;
+}
+
+.search_thing {
+ width: 350px;
+ display: flex;
+ align-items: center;
+}
+
+.search_label {
+ width: 110px;
+ font-size: 14px;
+ text-align: left;
+}
+
+.search_input {
+ width: calc(100% - 110px);
+}
+
+.table {
+ background-color: #fff;
+ width: calc(100% - 40px);
+ height: calc(100vh - 17em);
+ /* padding: 10px; */
+ overflow-y: auto;
+}
+
+.card {
+ list-style-type: none;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 380px);
+ justify-content: start;
+ grid-gap: 16px;
+ min-height: 300px;
+}
+
+.card li {
+ width: 380px;
+ height: 165px;
+ border-radius: 8px 8px 8px 8px;
+ border: 1px solid #EEEEEE;
+ margin: 0 !important;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 16px;
+ font-size: 14px;
+ color: #666666;
+ position: relative;
+ overflow: hidden;
+}
+
+.card li .img {
+ width: 114px;
+ height: 114px;
+ border-radius: 16px;
+ margin-right: 24px;
+}
+
+.list-left .list-left-info {
+ line-height: 36px;
+ display: flex;
+}
+
+.text-truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap
+}
+
+.circles {
+ position: absolute;
+ width: 70px;
+ height: 70px;
+ right: 0;
+ top: 0;
+ z-index: 0;
+}
+
+.circles .circle {
+ border-radius: 50%;
+ opacity: 0.2;
+}
+
+.circle0,
+.circle1,
+.circle2 {
+ width: 60px;
+ height: 60px;
+ position: absolute;
+}
+
+.circle3 {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+}
+
+.circle0 {
+ bottom: 6px;
+ left: 0;
+}
+
+.circle1 {
+ bottom: 0;
+ right: -30px;
+}
+
+.circle2 {
+ left: 0;
+ top: -30px;
+}
+
+.circle3 {
+ top: 0;
+ right: 0;
+}
+
+.success .circle {
+ background: #34BD66;
+}
+
+.danger .circle {
+ background: #FF3838;
+}
+
+.warning .circle {
+ background: #FBB247;
+}
+.info .circle {
+ background: #909399;
+}
+</style>
+
+<template>
+ <div class="role_manage">
+ <div style="margin-top: 10px">
+ <el-form :model="entity" inline label-position="right">
+ <el-form-item label="鐘舵��:">
+ <el-select v-model="entity.deviceStatus" placeholder="鍏ㄩ儴" size="small" clearable>
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="璁惧鍚嶇О:">
+ <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="entity.deviceName"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button size="small" @click="refresh()">閲� 缃�</el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button size="small" type="primary"
+ @click="currentPage = 1, keyMap = {}, list = [], finishLoding = false, refreshTable()">鏌� 璇�</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="table" v-loading="loading">
+ <scroll-pagination @load="refreshTable()" :finishLoding="finishLoding" :list="list"
+ v-if="list.length > 0 || loading">
+ <ul class="card">
+ <li v-for="(m, i) in list" :key="i">
+ <el-image class="img" :src="javaApi + '/img/' + m.imageUpload">
+ <div slot="error" class="image-error" style="width: 112px;
+ height: 112px;
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #EEEEEE;">
+ <i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
+ </div>
+ </el-image>
+ <div class="list-left">
+ <div class="list-left-info">
+ <span class="label">璁惧鍚嶇О锛�</span>
+ <span style="color:#3A7BFA;
+ font-size: 16px;
+ display: inline-block;
+ width: 129px;
+ word-break: break-all;" class="text-truncate" :title="m.deviceName">{{ m.deviceName ? m.deviceName : '鏃�' }}</span>
+ </div>
+ <div class="list-left-info">
+ <span class="label">瑙勬牸鍨嬪彿锛�</span>
+ <span style="color:#333333;font-size: 16px;">{{ m.specificationModel ? m.specificationModel : '鏃�'
+ }}</span>
+ </div>
+ <div class="list-left-info">
+ <span class="label">鐘舵�侊細</span>
+ <el-tag :type="m.type" v-if="m.deviceStatusName">{{ m.deviceStatusName }}</el-tag>
+ <span v-else style="color:#333333;font-size: 16px;">鏃�</span>
+ </div>
+ </div>
+ <div class="circles" :class="m.type">
+ <div class="circle0 circle"></div>
+ <div class="circle1 circle"></div>
+ <div class="circle2 circle"></div>
+ <div class="circle3 circle"></div>
+ </div>
+ </li>
+ </ul>
+ </scroll-pagination>
+ <div v-if="list.length < 1 && !loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px">
+ 鏆傛棤鏁版嵁
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import ScrollPagination from '@/components/index/scroll-paging.vue'
+import {selectDeviceParameter} from "@/api/cnas/resourceDemand/device";
+export default {
+ props: {
+ clickNodeVal: {
+ type: Object,
+ default: () => {
+ return {};
+ }
+ }
+ },
+ components: {
+ ScrollPagination
+ },
+ data() {
+ return {
+ entity: {
+ deviceStatus: null,
+ deviceName: null,
+ },
+ options: [],
+ list: [],
+ currentPage: 1, // 褰撳墠椤�
+ pageSize: 16, // 涓�椤�16鏉�
+ total: '',
+ loading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue
+ finishLoding: false, // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡
+ keyMap: {},
+ laboratoryNameIsNull: false,
+ }
+ },
+ created() {
+ this.selectEnumByCategory()
+ this.keyMap = {};
+ this.currentPage = 1;
+ this.list = [];
+ this.clickSidebar(this.clickNodeVal)
+ },
+ methods: {
+ refreshTable() {
+ const key = `_${this.currentPage}`
+ const value = this.keyMap[key]
+ // 濡傛灉value瀛樺湪锛岃〃绀虹紦瀛樻湁鍊硷紝閭ｄ箞闃绘璇锋眰
+ if (value) {
+ return
+ }
+ // value涓嶅瓨鍦紝琛ㄧず绗竴娆¤姹�,璁剧疆鍗犱綅
+ this.keyMap[key] = 'temp'
+ if (this.currentPage == 1) {
+ this.loading = true
+ }
+ if(this.list.length==0){
+ this.finishLoding = false;
+ }
+ selectDeviceParameter({
+ laboratoryNameIsNull: this.laboratoryNameIsNull,
+ current: this.currentPage,
+ size: this.pageSize,
+ ...this.entity
+ }).then(res => {
+ if (res.code == 200) {
+ this.total = res.data.total
+ let list = res.data.records.map(m => {
+ switch (m.deviceStatus) {
+ case 0:
+ // 姝ｅ父
+ m.type = 'success'
+ break;
+ case 1:
+ // 缁翠慨
+ m.type = 'warning'
+ break;
+ case 2:
+ // 鍋滅敤
+ m.type = 'danger'
+ break;
+ case 3:
+ // 鎶ュ簾
+ m.type = 'info'
+ break;
+ }
+ this.options.forEach(j => {
+ if (m.deviceStatus == j.value) {
+ m.deviceStatusName = j.label
+ }
+ })
+ return m;
+ })
+ if (list.length == 0) {
+ this.finishLoding = true;
+ } else {
+ if (list.length < this.pageSize) {
+ this.finishLoding = true;
+ }
+ this.list = this.list.concat(list)
+ if (this.total == this.list.length) {
+ this.finishLoding = true;
+ }
+ this.currentPage++;
+ }
+ }
+ this.loading = false
+ }).catch(err => {
+ this.loading = false
+ })
+ },
+ refresh() {
+ this.keyMap = {};
+ this.currentPage = 1;
+ this.list = [];
+ this.finishLoding = false;
+ this.entity = {
+ deviceStatus: null,
+ deviceName: null,
+ orderBy: { field: "id", order: "asc" }
+ };
+ this.refreshTable()
+ },
+ // 鑾峰彇瀛楀吀
+ selectEnumByCategory() {
+ // 璁惧鐘舵��
+ this.getDicts("device_status").then((response) => {
+ this.options = this.dictToValue(response.data);
+ });
+ },
+ // 鐐瑰嚮渚ц竟鏍忓埛鏂�
+ clickSidebar(clickNodeVal) {
+ this.laboratoryNameIsNull = false
+ // 鏄惁瀛樺湪value锛屽瓨鍦╲alue浠ｈ〃涓轰笁绾�
+ if (!clickNodeVal.value) {
+ this.finishLoding = false;
+ this.keyMap = {};
+ this.currentPage = 1;
+ this.list = [];
+ this.entity.laboratoryName = null
+ this.entity.storagePoint = null
+ // 绛変簬1浠ｈ〃涓烘爲鐨勪竴绾э紝label涓洪儴闂�
+ if (clickNodeVal.label == '鍏朵粬') {
+ this.laboratoryNameIsNull = true
+ this.refreshTable();
+ return
+ }
+ if (clickNodeVal.level == 1) {
+ this.entity.laboratoryName = clickNodeVal.label
+ // 绛変簬浜岀骇銆俵abel涓哄瓨鍌ㄥ湴鐐�
+ } else if (clickNodeVal.level == 2) {
+ // 鍏朵粬琛ㄧず娌℃湁閰嶇疆瀹為獙瀹わ紝鍙厤缃簡鍦扮偣
+ if (clickNodeVal.parent.label == '鍏朵粬') {
+ this.laboratoryNameIsNull = true
+ } else {
+ this.entity.laboratoryName = clickNodeVal.parent.label
+ }
+ this.entity.storagePoint = clickNodeVal.label
+ }
+ this.refreshTable();
+ }
+ }
+ },
+ watch: {
+ // 鐩戝惉鐐瑰嚮el-tree鐨勬暟鎹紝杩涜鏁版嵁鍒锋柊
+ clickNodeVal(newVal) {
+ this.clickSidebar(newVal)
+ }
+ }
+}
+</script>
--
Gitblit v1.9.3