| | |
| | | width: 380px; |
| | | height: 165px; |
| | | border-radius: 8px 8px 8px 8px; |
| | | border: 1px solid #EEEEEE; |
| | | border: 1px solid #eeeeee; |
| | | margin: 0 !important; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | .text-truncate { |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .circles { |
| | |
| | | } |
| | | |
| | | .success .circle { |
| | | background: #34BD66; |
| | | background: #34bd66; |
| | | } |
| | | |
| | | .danger .circle { |
| | | background: #FF3838; |
| | | background: #ff3838; |
| | | } |
| | | |
| | | .warning .circle { |
| | | background: #FBB247; |
| | | background: #fbb247; |
| | | } |
| | | .info .circle { |
| | | background: #909399; |
| | |
| | | <div> |
| | | <el-form :model="entity" inline label-position="right" label-width="80px"> |
| | | <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-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-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-button |
| | | size="small" |
| | | type="primary" |
| | | @click=" |
| | | (currentPage = 1), |
| | | (keyMap = {}), |
| | | (list = []), |
| | | (finishLoding = false), |
| | | refreshTable() |
| | | " |
| | | >查 询</el-button |
| | | > |
| | | </el-form-item> |
| | | </el-form> |
| | | <!-- <div class="search_thing"> |
| | |
| | | </div> |
| | | </div> --> |
| | | |
| | | |
| | | <!-- <div class="search_thing" style="padding-left: 30px;"> |
| | | </div> --> |
| | | </div> |
| | | <div class="table" v-loading="loading"> |
| | | <scroll-pagination @load="refreshTable()" :finishLoding="finishLoding" :list="list" |
| | | v-if="list.length > 0 || 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; |
| | | <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> |
| | | 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; |
| | | <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> |
| | | 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> |
| | | <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> |
| | | <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> |
| | |
| | | </li> |
| | | </ul> |
| | | </scroll-pagination> |
| | | <div v-if="list.length < 1 && !loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px"> |
| | | <div |
| | | v-if="list.length < 1 && !loading" |
| | | style="color:#909399;font-size:14px;text-align: center;margin-top:200px" |
| | | > |
| | | 暂无数据 |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import ScrollPagination from '../../tool/scroll-paging.vue' |
| | | import ScrollPagination from "../../tool/scroll-paging.vue"; |
| | | export default { |
| | | props: { |
| | | clickNodeVal: { |
| | |
| | | list: [], |
| | | currentPage: 1, // 当前页 |
| | | pageSize: 16, // 一页16条 |
| | | total: '', |
| | | total: "", |
| | | loading: true, // 组件loading的展示,默认为true |
| | | finishLoding: false, // 加载完成,显示已经没有更多了 |
| | | keyMap: {}, |
| | | laboratoryNameIsNull: false, |
| | | } |
| | | laboratoryNameIsNull: false |
| | | }; |
| | | }, |
| | | created() { |
| | | this.selectEnumByCategory() |
| | | this.selectEnumByCategory(); |
| | | this.keyMap = {}; |
| | | this.currentPage = 1; |
| | | this.list = []; |
| | | this.clickSidebar(this.clickNodeVal) |
| | | this.clickSidebar(this.clickNodeVal); |
| | | }, |
| | | methods: { |
| | | refreshTable() { |
| | | const key = `_${this.currentPage}` |
| | | const value = this.keyMap[key] |
| | | const key = `_${this.currentPage}`; |
| | | const value = this.keyMap[key]; |
| | | // 如果value存在,表示缓存有值,那么阻止请求 |
| | | if (value) { |
| | | return |
| | | return; |
| | | } |
| | | // value不存在,表示第一次请求,设置占位 |
| | | this.keyMap[key] = 'temp' |
| | | this.keyMap[key] = "temp"; |
| | | if (this.currentPage == 1) { |
| | | this.loading = true |
| | | this.loading = true; |
| | | } |
| | | if(this.list.length==0){ |
| | | this.finishLoding = false; |
| | | } |
| | | this.$axios.post(this.$api.deviceScope.selectDeviceParameter + "?laboratoryNameIsNull=" + this.laboratoryNameIsNull, { |
| | | page: { |
| | | current: this.currentPage, |
| | | size: this.pageSize |
| | | }, |
| | | entity: this.entity |
| | | }, { |
| | | headers: { |
| | | 'Content-Type': 'application/json' |
| | | } |
| | | }).then(res => { |
| | | if (res.code == 200) { |
| | | this.total = res.data.body.total |
| | | let list = res.data.body.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; |
| | | if (this.list.length == 0) { |
| | | this.finishLoding = false; |
| | | } |
| | | this.$axios |
| | | .post( |
| | | this.$api.deviceScope.selectDeviceParameter + |
| | | "?laboratoryNameIsNull=" + |
| | | this.laboratoryNameIsNull, |
| | | { |
| | | page: { |
| | | current: this.currentPage, |
| | | size: this.pageSize |
| | | }, |
| | | entity: this.entity |
| | | }, |
| | | { |
| | | headers: { |
| | | "Content-Type": "application/json" |
| | | } |
| | | 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 |
| | | }) |
| | | ) |
| | | .then(res => { |
| | | if (res.code == 200) { |
| | | this.total = res.data.body.total; |
| | | let list = res.data.body.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; |
| | | }); |
| | | }, |
| | | refresh() { |
| | | this.keyMap = {}; |
| | |
| | | deviceName: null, |
| | | orderBy: { field: "id", order: "asc" } |
| | | }; |
| | | this.refreshTable() |
| | | this.refreshTable(); |
| | | }, |
| | | // 获取字典 |
| | | selectEnumByCategory() { |
| | | this.$axios.post(this.$api.enums.selectEnumByCategory, { |
| | | category: "设备状态" |
| | | }).then(res => { |
| | | this.options = res.data |
| | | }) |
| | | this.$axios |
| | | .post(this.$api.enums.selectEnumByCategory, { |
| | | category: "设备状态" |
| | | }) |
| | | .then(res => { |
| | | this.options = res.data; |
| | | }); |
| | | }, |
| | | // 点击侧边栏刷新 |
| | | clickSidebar(clickNodeVal) { |
| | | this.laboratoryNameIsNull = false |
| | | this.laboratoryNameIsNull = false; |
| | | // 是否存在value,存在value代表为三级 |
| | | if (!clickNodeVal.value) { |
| | | this.finishLoding = false; |
| | | this.keyMap = {}; |
| | | this.currentPage = 1; |
| | | this.list = []; |
| | | this.entity.laboratoryName = null |
| | | this.entity.storagePoint = null |
| | | this.entity.laboratoryName = null; |
| | | this.entity.storagePoint = null; |
| | | // 等于1代表为树的一级,label为部门 |
| | | if (clickNodeVal.label == '其他') { |
| | | this.laboratoryNameIsNull = true |
| | | if (clickNodeVal.label == "其他") { |
| | | this.laboratoryNameIsNull = true; |
| | | this.refreshTable(); |
| | | return |
| | | return; |
| | | } |
| | | if (clickNodeVal.level == 1) { |
| | | this.entity.laboratoryName = clickNodeVal.label |
| | | this.entity.laboratoryName = clickNodeVal.label; |
| | | // 等于二级。label为存储地点 |
| | | } else if (clickNodeVal.level == 2) { |
| | | // 其他表示没有配置实验室,只配置了地点 |
| | | if (clickNodeVal.parent.label == '其他') { |
| | | this.laboratoryNameIsNull = true |
| | | if (clickNodeVal.parent.label == "其他") { |
| | | this.laboratoryNameIsNull = true; |
| | | } else { |
| | | this.entity.laboratoryName = clickNodeVal.parent.label |
| | | this.entity.laboratoryName = clickNodeVal.parent.label; |
| | | } |
| | | this.entity.storagePoint = clickNodeVal.label |
| | | this.entity.storagePoint = clickNodeVal.label; |
| | | } |
| | | this.refreshTable(); |
| | | } |
| | |
| | | watch: { |
| | | // 监听点击el-tree的数据,进行数据刷新 |
| | | clickNodeVal(newVal) { |
| | | this.clickSidebar(newVal) |
| | | this.clickSidebar(newVal); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |