From c1e5dfb4c72a0ab2478d3b7295ab7deecd3f8c8c Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 16 四月 2024 16:47:36 +0800
Subject: [PATCH] 修改样式
---
src/components/view/a6-device-overview.vue | 214 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 120 insertions(+), 94 deletions(-)
diff --git a/src/components/view/a6-device-overview.vue b/src/components/view/a6-device-overview.vue
index 7c83b47..5448024 100644
--- a/src/components/view/a6-device-overview.vue
+++ b/src/components/view/a6-device-overview.vue
@@ -33,17 +33,19 @@
width: calc(100% - 40px);
height: calc(100% - 60px - 80px - 10px - 40px);
padding: 20px;
+ overflow-y: auto;
}
- ul {
+ .card {
list-style-type: none;
display: grid;
- grid-template-columns: repeat(auto-fit, 375px);
- justify-content: center;
+ grid-template-columns: repeat(auto-fit, 415px);
+ /* justify-content: center; */
grid-gap: 16px;
+ min-height: 300px;
}
- ul li{
- width: 375px;
+ .card li{
+ width: 415px;
height: 165px;
border-radius: 8px 8px 8px 8px;
border: 1px solid #EEEEEE;
@@ -57,14 +59,14 @@
position: relative;
overflow: hidden;
}
- ul li .img{
+ .card li .img{
width: 114px;
height: 114px;
border-radius: 16px;
margin-right: 24px;
}
.list-left .list-left-info{
- line-height: 30px;
+ line-height: 36px;
display: flex;
}
.text-truncate {
@@ -131,7 +133,7 @@
<div class="search">
<div class="search_thing">
<div class="search_label">鐘舵�侊細</div>
- <el-select v-model="searchForm.status" placeholder="鍏ㄩ儴" size="small">
+ <el-select v-model="entity.deviceStatus" placeholder="鍏ㄩ儴" size="small">
<el-option
v-for="item in options"
:key="item.value"
@@ -142,18 +144,17 @@
</div>
<div class="search_thing">
<div class="search_label">璁惧鍚嶇О锛�</div>
- <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="searchForm.name"
- @keyup.enter.native="refreshTable()"></el-input></div>
+ <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="entity.deviceName"></el-input></div>
</div>
<div class="search_thing" style="padding-left: 30px;">
<el-button size="small" @click="refresh()">閲� 缃�</el-button>
- <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button>
+ <el-button size="small" type="primary" @click="currentPage= 1,list=[],finishLoding = false,refreshTable()">鏌� 璇�</el-button>
</div>
</div>
- <div class="table">
- <ul v-loading="loading" @scroll="scrollFn">
+ <div class="table" @scroll="scrollFn">
+ <ul v-loading="loading" class="card">
<li v-for="(m,i) in list" :key="i">
- <el-image class="img">
+ <el-image class="img" :src="javaApi+'/img/'+m.imageUpload">
<div slot="error" class="image-error" style="width: 112px;
height: 112px;
border-radius: 16px;
@@ -161,22 +162,26 @@
align-items: center;
justify-content: center;
border: 1px solid #EEEEEE;">
- <i class="el-icon-picture-outline"></i>
+ <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">灏忚垶鐏垫缉娑℃贩鍚堝櫒</span>
+ <span style="color:#3A7BFA;
+ font-size: 16px;
+ display: inline-block;
+ width: 129px;
+ word-break: break-all;" class="text-truncate">{{m.deviceName?m.deviceName:'鏃�'}}</span>
</div>
<div class="list-left-info">
<span class="label">瑙勬牸鍨嬪彿锛�</span>
- <span style="color:#333333;font-size: 16px;">CASJTS-C004-01</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">鏍囩浜�</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>
<div class="circles" :class="m.type">
@@ -187,17 +192,17 @@
</div>
</li>
</ul>
- <div v-if="list.length<1&&!loading&&!isLoding&&!finishLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div>
- <div v-if="!noMore&&list.length>0">
+ <div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div>
+ <div v-if="list.length>0">
<el-button
- v-show="isLoding"
+ v-if="isLoding"
type="text"
style="display: flex; margin: 0 auto; color: #909399"
- ><i class="el-icon-loading"></i
+ ><i class="el-icon-loading" style="font-size:20px"></i
></el-button>
<el-button
type="text"
- v-show="finishLoding"
+ v-if="finishLoding"
style="display: flex; margin: 0 auto; color: #909399"
>宸茬粡娌℃湁鏇村鍟</el-button
>
@@ -210,83 +215,106 @@
export default {
data() {
return {
+ entity:{
+ deviceStatus: null,
+ deviceName: null,
+ orderBy: {field: "id", order: "asc"}
+ },
options:[],
- // 鎼滅储琛ㄥ崟
- searchForm:{},
- list:[
- {
- type:'danger'
- },
- {
- type:'danger'
- },
- {
- type:'success'
- },
- {
- type:'success'
- },
- {
- type:'danger'
- },
- {
- type:'danger'
- },
- {
- type:'danger'
- },
- {
- type:'danger'
- },
- {
- type:'warning'
- },
- {
- type:'warning'
- },
- ],
- noMore: false, // 鎼滅储缁撴灉鏃犵殑灞曠ず
+ list:[],
currentPage: 1, // 褰撳墠椤�
- pageSize: 12, // 涓�椤�12鏉�
+ pageSize: 16, // 涓�椤�16鏉�
total: '',
- loading: false, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue
+ loading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue
isLoding: false, // 鍔犺浇涓紝loading鍥炬爣,榛樿涓簍rue
finishLoding: false // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡
}
},
created() {
+ this.selectEnumByCategory()
+ this.currentPage = 1;
+ this.list = [];
this.refreshTable();
- },
- mounted() {
- // window.addEventListener("scroll", this.throttle(this.scrollFn, 500));
- },
- destroyed() {
- // window.removeEventListener("scroll", this.throttle(), false);
},
methods: {
refreshTable() {
- this.loading = true
- this.isLoding = true
- this.$axios.get(this.$api.deviceScope.selectEquipmentOverview).then(res => {
- console.log(11111,res)
+ if(this.currentPage>1){
+ this.isLoding = true
+ }else{
+ this.loading = true
+ }
+ if(this.list.length==0){
+ window.addEventListener("scroll", this.throttle(this.scrollFn, 20000));
+ }
+ this.$axios.post(this.$api.deviceScope.selectDeviceParameter,{
+ 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;
+ }
+ 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.loading = false
+ this.isLoding = false;
})
- // allCoursesList({
- // currentPage: this.currentPage,
- // pageSize: this.pageSize,
- // keyword: this.$route.query.keywords
- // }).then((res) => {
- // if (res.data.code === 0) {
- // this.loading = false
- // this.keyWordsCoursesList = [...res.data.data.rows]
- // this.total = res.data.data.total
- // if (this.keyWordsCoursesList.length === 0) {
- // this.noMore = true;
- // }
- // }
- // });
},
refresh() {
-
+ this.currentPage= 1;
+ this.list=[];
+ this.finishLoding = false;
+ this.entity={
+ deviceStatus: null,
+ deviceName: null,
+ orderBy: {field: "id", order: "asc"}
+ };
+ this.refreshTable()
+ },
+ // 鑾峰彇瀛楀吀
+ selectEnumByCategory() {
+ this.$axios.post(this.$api.enums.selectEnumByCategory, {
+ category: "璁惧鐘舵��"
+ }).then(res => {
+ this.options = res.data
+ })
},
// 婊氬姩瑙﹀簳鍔犺浇
scrollFn() {
@@ -298,13 +326,8 @@
scrollTop + clientHeight >= scrollHeight - height &&
scrollHeight != 0
) {
- if (this.pageSize > this.total) {
- this.isLoding = false;
- this.finishLoding = true;
- window.removeEventListener("scroll", this.throttle(), false);
- }else{
- this.currentPage + 1;
- this.pageSize = this.pageSize += 12;
+ if (!this.finishLoding&&this.currentPage*this.pageSize<this.total) {
+ this.currentPage = this.currentPage + 1;
this.refreshTable();
}
} else {
@@ -325,6 +348,9 @@
}
};
},
- }
+ },
+ destroyed() {
+ window.removeEventListener("scroll", this.throttle(), false);
+ },
}
</script>
--
Gitblit v1.9.3