<template>
|
<view class="m-page">
|
<view class="m-page-over">
|
<view class="m-button-list">
|
<u-button type="primary" text="分配" @click="allot" v-if="listName == 'tally'">
|
<view class="m-button-base">
|
<u--image src="/static/img/blue_1.png" width="1em" height="1em" mode="aspectFit"></u--image>
|
分配
|
</view>
|
</u-button>
|
<u-button type="primary" text="新增" @click="add" v-if="listName != 'rail' && listName != 'jobHis' && listName != 'alarmHis' && listName != 'map'">
|
<view class="m-button-base">
|
<u--image src="/static/img/blue_2.png" width="1em" height="1em" mode="aspectFit"></u--image>
|
新增
|
</view>
|
</u-button>
|
<u-button type="primary" text="修改" @click="update" v-if="listName != 'jobHis' && listName != 'alarmHis'">
|
<view class="m-button-base">
|
<u--image src="/static/img/blue_3.png" width="1em" height="1em" mode="aspectFit"></u--image>
|
{{listName=='baseStation'?'校准':'修改'}}
|
</view>
|
</u-button>
|
<u-button type="primary" text="删除" @click="deleteData" v-if="listName != 'jobHis' && listName != 'alarmHis' && listName != 'map'">
|
<view class="m-button-base">
|
<u--image src="/static/img/blue_4.png" width="1em" height="1em" mode="aspectFit"></u--image>
|
删除
|
</view>
|
</u-button>
|
<u-button type="primary" text="导出Excel" v-if="listName == 'jobHis' || listName == 'alarmHis'" @click="exportFile"></u-button>
|
<u-button class="m-button-allDel" type="primary" text="全部删除" @click="deleteAllData" v-if="listName == 'jobHis' || listName == 'alarmHis'">
|
<view class="m-button-base">
|
<u--image src="/static/img/blue_4.png" width="1em" height="1em" mode="aspectFit"></u--image>
|
全部删除
|
</view>
|
</u-button>
|
<!-- <u-icon name="close-circle" color="#fff" size="40" @click="colseList"></u-icon> -->
|
</view>
|
<view class="u-page" :style="{ top: top + 'px' }">
|
<view>
|
<u-list height="auto">
|
<view class="m-list-title">
|
<u-list-item>
|
<u-cell :customStyle="{'background-color':'#459EFF'}">
|
<view slot="label">
|
<u-row>
|
<u-col :span="colWidth" style="text-align: center;" v-for="(item, index) in titleList" :key="index">
|
<view class="m-list-title-text">{{ item.title }}</view>
|
</u-col>
|
</u-row>
|
</view>
|
</u-cell>
|
</u-list-item>
|
</view>
|
</u-list>
|
</view>
|
<view>
|
<u-list height="auto">
|
<view>
|
<u-list-item>
|
<u-cell :customStyle="{'background-color':'#459EFF'}">
|
<view slot="label">
|
<u-row>
|
<u-col :span="colWidth" style="text-align: center;" v-for="(item, index) in titleList" :key="index">
|
<view class="m-list-title-text">{{ item.title }}</view>
|
</u-col>
|
</u-row>
|
</view>
|
</u-cell>
|
</u-list-item>
|
</view>
|
</u-list>
|
</view>
|
<view class="m-list">
|
<u-list :height="height" @scrolltolower="scrolltolower" @scroll="scrolltop">
|
<view class="m-list-label">
|
<u-list-item v-for="(item, index) in valueList" :key="index" :class="{ 'm-pitch': pitch(index) }" class="m-list-item">
|
<u-cell @click="changeIndex(index, item)" :customStyle="{'background-color':pitch(index)?'red':'transparent' }">
|
<view slot="label">
|
<u-row>
|
<u-col :span="colWidth" style="text-align: center;" v-for="(itemV, indexV) in titleList" :key="indexV">
|
<!-- 常规属性 -->
|
<view class="m-layout m-list-value-text" v-if="itemV.value != undefined && itemV.title != '启用围栏'">{{ item[itemV.value] }}</view>
|
<!-- 围栏管理属性-启用围栏开关 -->
|
<view class="m-switch m-list-value-text" v-if="itemV.title == '启用围栏'">
|
<view @click.stop=""><u-switch v-model="item.baoliu7=item.baoliu7=='1'?true:false" asyncChange @change="asyncChange($event,item)"></u-switch></view>
|
</view>
|
</u-col>
|
</u-row>
|
</view>
|
</u-cell>
|
</u-list-item>
|
|
</view>
|
<u-loadmore @loadmore="scrolltolower" :status="status" />
|
</u-list>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { downloadFile,connChart,exportExcel } from '../common/utils.js';
|
export default {
|
props: {
|
titleList: Array,
|
colWidth: Number,
|
listName: String,
|
isRefresh:Boolean
|
},
|
data() {
|
return {
|
indexList: [],
|
valueList: [],
|
pitchIndex: [],
|
valueSwitch: false,
|
height: 0,
|
top: 0,
|
formData: [],
|
ids: '',
|
idList: [],
|
timeCount:null,
|
num:10,
|
labelModel:null,
|
number:1,
|
count:20,
|
status:'loadmore',//nomore
|
};
|
},
|
computed: {
|
},
|
watch:{
|
isRefresh(newV,oldV){
|
console.log(newV,oldV)
|
if(newV){
|
this.number=1
|
this.valueList=[]
|
this.idList=[]
|
this.ids=''
|
this.pitchIndex=[]
|
this.formData=[]
|
if (this.listName == 'rail') this.getRailList();
|
if (this.listName == 'tally') this.getTallyList();
|
if (this.listName == 'baseStation') this.getBaseList();
|
if (this.listName == 'alarmHis') this.getAlarmHisList();
|
if (this.listName == 'jobHis') this.getJobHisList();
|
if (this.listName == 'map') this.getMapList();
|
if (this.listName == 'department') this.getDepartmentList();
|
this.$emit('refresh',{isRefresh:false})
|
}
|
},
|
},
|
mounted() {
|
this.$nextTick(() => {
|
setTimeout(()=>{
|
/* 设置列表各项height、top */
|
const m_page = uni.createSelectorQuery().select('.m-page'); //列表父级
|
const m_button_list = uni.createSelectorQuery().select('.m-button-list'); //列表头部按钮
|
const u_list = uni.createSelectorQuery().selectAll('.u-list'); //列表表头
|
const u_page = uni.createSelectorQuery().select('.u-page'); //列表:表头+数据
|
var m_page_height = 0; //列表父级高度
|
var m_button_list_height = 0; //列表头部按钮高度
|
var u_list_height = 0; //列表表头高度
|
m_button_list.boundingClientRect(data => {
|
console.log(data);
|
m_button_list_height = data.height;
|
this.top = m_button_list_height; //列表表格(表头+数据)的top
|
}).exec();
|
m_page.boundingClientRect(data => {
|
console.log(data);
|
m_page_height = data.height;
|
}).exec();
|
u_list.boundingClientRect(data => {
|
console.log(data[1]);
|
u_list_height = data[1].height;
|
}).exec();
|
u_page.boundingClientRect(data => {
|
console.log(data);
|
this.height = m_page_height - m_button_list_height - u_list_height; //列表数据高度
|
// console.log(m_page_height,m_button_list_height,u_list_height)
|
}).exec();
|
},50)
|
if (this.listName == 'rail') this.getRailList();
|
if (this.listName == 'tally') this.getTallyList();
|
if (this.listName == 'baseStation') this.getBaseList();
|
if (this.listName == 'alarmHis') this.getAlarmHisList();
|
if (this.listName == 'jobHis') this.getJobHisList();
|
if (this.listName == 'map') this.getMapList();
|
if (this.listName == 'department') this.getDepartmentList();
|
});
|
},
|
beforeDestroy() {
|
clearInterval(this.timeCount)
|
},
|
methods: {
|
scrolltolower(){
|
console.log('触底了')
|
this.number+=1
|
if (this.listName == 'rail') this.getRailList();
|
if (this.listName == 'tally') this.getTallyList();
|
if (this.listName == 'baseStation') this.getBaseList();
|
if (this.listName == 'alarmHis') this.getAlarmHisList();
|
if (this.listName == 'jobHis') this.getJobHisList();
|
if (this.listName == 'map') this.getMapList();
|
if (this.listName == 'department') this.getDepartmentList();
|
},
|
scrolltop(e){
|
// console.log('下拉刷新')
|
},
|
//选中行
|
changeIndex(index, item) {
|
if(this.listName == 'jobHis' || this.listName == 'alarmHis'){
|
return
|
}
|
if (
|
this.pitchIndex.filter(e => {
|
return e == index;
|
}).length == 0
|
) {
|
// this.$set(this.pitchIndex,this.pitchIndex.length,index)
|
this.pitchIndex.push(index);
|
this.formData.push(item);
|
this.idList.push(item.id);
|
} else {
|
this.pitchIndex = this.pitchIndex.filter(e => {
|
return e != index;
|
});
|
this.formData = this.formData.filter(e => {
|
return e.id != item.id;
|
});
|
this.idList = this.idList.filter(e => {
|
return e != item.id;
|
});
|
}
|
this.ids = this.idList.join(',');
|
},
|
//修改选中行样式
|
pitch(index) {
|
if (
|
this.pitchIndex.filter(e => {
|
return e == index;
|
}).length != 0
|
) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
//启用围栏-开关
|
asyncChange(e,item) {
|
this.labelModel.update(`id=${item.id}`,{baoliu7:e?'1':'0'},(err,results)=>{
|
console.log(results);
|
item.baoliu7=e;
|
});
|
// uni.showModal({
|
// content: e ? '确定要打开吗' : '确定要关闭吗',
|
// confirmColor:"#68B0FE",
|
// cancelColor:"#68B0FE",
|
// success: res => {
|
// if (res.confirm) {
|
// this.$Api.enablefence({
|
// id:item.id,
|
// str:e?'1':'0'
|
// }).then(res=>{
|
// console.log(res)
|
// item.baoliu7=e;
|
// })
|
// }
|
// }
|
// });
|
},
|
//获取围栏列表数据
|
getRailList() {
|
this.status='loading'
|
setTimeout(()=>{
|
this.labelModel = connChart('fence');
|
this.labelModel.limit({where:'1=1 order by id desc',number:this.number,count:this.count},(e,r)=>{
|
console.log(e,r)
|
if(!e && r.length!=0){
|
this.valueList.push(...r)
|
this.status='loadmore'
|
}else{
|
this.status='nomore'
|
}
|
})
|
},500)
|
},
|
//获取标签列表数据
|
getTallyList() {
|
this.status='loading'
|
setTimeout(()=>{
|
this.labelModel = connChart('label');
|
this.labelModel.limit({where:'1=1 order by id desc',number:this.number,count:this.count},(e,r)=>{
|
console.log(e,r)
|
if(!e && r.length!=0){
|
this.valueList.push(...r)
|
this.status='loadmore'
|
}else{
|
this.status='nomore'
|
}
|
})
|
},500)
|
},
|
//获取基站列表数据
|
getBaseList() {
|
this.status='loading'
|
setTimeout(()=>{
|
this.labelModel = connChart('base');
|
this.labelModel.limit({where:'1=1 order by id desc',number:this.number,count:this.count},(e,r)=>{
|
console.log(e,r)
|
if(!e && r.length!=0){
|
this.valueList.push(...r)
|
this.status='loadmore'
|
}else{
|
this.status='nomore'
|
}
|
})
|
},500)
|
},
|
//获取告警历史列表
|
getAlarmHisList() {
|
this.status='loading'
|
setTimeout(()=>{
|
this.labelModel = connChart('alarm');
|
this.labelModel.limit({where:'1=1 order by id desc',number:this.number,count:this.count},(e,r)=>{
|
console.log(e,r)
|
if(!e && r.length!=0){
|
this.valueList.push(...r)
|
this.status='loadmore'
|
}else{
|
this.status='nomore'
|
}
|
})
|
},500)
|
},
|
//获取作业历史列表
|
getJobHisList() {
|
this.status='loading'
|
setTimeout(()=>{
|
this.labelModel = connChart('work');
|
this.labelModel.limit({where:'1=1 order by id desc',number:this.number,count:this.count},(e,r)=>{
|
console.log(e,r)
|
if(!e && r.length!=0){
|
this.valueList.push(...r)
|
this.status='loadmore'
|
}else{
|
this.status='nomore'
|
}
|
})
|
},500)
|
},
|
//获取地图列表
|
getMapList() {
|
this.status='loading'
|
setTimeout(()=>{
|
this.labelModel = connChart('map');
|
this.labelModel.limit({where:'1=1 order by id desc',number:this.number,count:this.count},(e,r)=>{
|
console.log(e,r)
|
if(!e && r.length!=0){
|
this.valueList.push(...r)
|
this.status='loadmore'
|
}else{
|
this.status='nomore'
|
}
|
})
|
},500)
|
},
|
//获取部门列表
|
getDepartmentList(){
|
this.status='loading'
|
setTimeout(()=>{
|
this.labelModel = connChart('department');
|
this.labelModel.limit({where:'1=1 order by id desc',number:this.number,count:this.count},(e,r)=>{
|
console.log(e,r)
|
if(!e && r.length!=0){
|
this.valueList.push(...r)
|
this.status='loadmore'
|
}else{
|
this.status='nomore'
|
}
|
})
|
},500)
|
},
|
colseList() {
|
this.$emit('closeList');
|
},
|
add() {
|
this.$emit('add', { formData: this.formData[0] });
|
},
|
update() {
|
if(this.formData.length==1){
|
this.$emit('update', { formData: this.formData[0] });
|
}else if(this.formData.length==0){
|
uni.$u.toast('请选中行')
|
}else{
|
uni.$u.toast('请选中单行')
|
}
|
},
|
allot() {
|
if(this.formData.length==1){
|
this.$emit('allot', { type: 'allot', formData: this.formData[0] });
|
}else if(this.formData.length==0){
|
uni.$u.toast('请选中行')
|
}else{
|
uni.$u.toast('请选中单行')
|
}
|
},
|
deleteData() {
|
if(this.formData.length>=1){
|
uni.showModal({
|
title: '提示',
|
content: '是否确认删除？',
|
success: res=> {
|
if (res.confirm) {
|
console.log('用户点击确定');
|
this.labelModel.delete(`id in(${this.ids})`,(err,results)=>{
|
console.log(results);
|
this.number=1
|
this.valueList=[]
|
this.idList=[]
|
this.ids=''
|
this.pitchIndex=[]
|
this.formData=[]
|
if (this.listName == 'tally') {
|
this.getTallyList()
|
} else if (this.listName == 'rail') {
|
this.getRailList()
|
} else if (this.listName == 'baseStation') {
|
this.getBaseList()
|
} else if (this.listName == 'map') {
|
this.getMapList()
|
} else if (this.listName == 'department') {
|
this.getDepartmentList()
|
}
|
});
|
} else if (res.cancel) {
|
console.log('用户点击取消');
|
}
|
}
|
});
|
}else if(this.formData.length==0){
|
uni.$u.toast('请选中行')
|
}
|
},
|
//导出excel
|
exportFile() {
|
if(this.listName=='jobHis'){
|
this.labelModel.find((e,r)=>{
|
console.log(e,r)
|
var arr=r.map(item=>({
|
'序号':item.id,
|
'关联标签ID':item.tagid,
|
'操作步骤':item.type,
|
'围栏名称':item.fencename,
|
'关联部门':item.department,
|
'围栏高度':item.high,
|
'围栏绘制时间':item.fenceaddtime,
|
'记录时间':item.addtime,
|
'备注':item.beizhu
|
}))
|
exportExcel(arr)
|
})
|
}else if(this.listName=='alarmHis'){
|
this.labelModel.find((e,r)=>{
|
console.log(e,r)
|
var arr=r.map(item=>({
|
'序号':item.id,
|
'关联标签ID':item.objectid,
|
'关联部门':item.baoliu3,
|
'围栏名称':item.baoliu2,
|
'告警原因':item.type,
|
'状态':item.status,
|
'坐标':item.baoliu1,
|
'告警时间':item.time
|
}))
|
exportExcel(arr)
|
})
|
}
|
|
},
|
//全部删除
|
deleteAllData(){
|
uni.showModal({
|
title: '提示',
|
content: '是否确认删除？',
|
confirmColor:"#68B0FE",
|
cancelColor:"#68B0FE",
|
success: res=> {
|
if (res.confirm) {
|
console.log('用户点击确定');
|
this.labelModel.delete((err,results)=>{
|
console.log(results);
|
this.number=1
|
this.valueList=[]
|
this.idList=[]
|
this.ids=''
|
this.pitchIndex=[]
|
this.formData=[]
|
if (this.listName == 'jobHis') {
|
this.getJobHisList()
|
} else if (this.listName == 'alarmHis') {
|
this.getAlarmHisList()
|
}
|
});
|
} else if (res.cancel) {
|
console.log('用户点击取消');
|
}
|
}
|
});
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.m-page {
|
position: fixed;
|
top: calc(3.5em + 20px);
|
left: 0;
|
// transform: translate(-50%, -50%);
|
width: 100%;
|
height: calc(100vh - 3.5em - 20px - 60px);
|
overflow: hidden;
|
background-color: rgba(255, 255, 255, 0.9);
|
z-index: 750;
|
// border-radius: 15px;
|
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.16);
|
// box-shadow: -3.536px -3.536px 5px 0px rgba(255, 255, 255, 0.75), 4.721px 6.457px 8px -5px rgba(191, 191, 191, 1);
|
}
|
.m-page-over{
|
width: calc(100vw - 8em - 1px);
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
border-right: 1px solid #63AFF9;
|
}
|
.m-button-list {
|
position: absolute;
|
left: 0;
|
top: 0;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: flex-start;
|
justify-content: flex-start;
|
width: 100%;
|
padding-top: 0.5em;
|
// padding-bottom: 0.5em;
|
}
|
.m-button-list .u-button {
|
width: 5em;
|
margin-bottom: 0.5em;
|
// box-shadow: -3.536px -3.536px 5px 0px rgba(255, 255, 255, 0.75), 4.721px 6.457px 8px -2px rgba(191, 191, 191, 1);
|
}
|
.m-button-base{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.m-button-allDel{
|
width: fit-content !important;
|
}
|
/deep/ .u-collapse-item__content{
|
border-radius: 0px !important;
|
// background-color: rgba(233, 233, 233,0.6);
|
// box-shadow: inset 2px 3.464px 5px 0px rgba(153, 153, 153, 0.004);
|
}
|
/deep/ .u-cell{
|
border-radius: 0px !important;
|
}
|
.u-page {
|
position: absolute;
|
left: 0;
|
// top: 20%;
|
width: 100%;
|
// background-color: rgba(0, 0, 0, 0.5);
|
border-top: 1px solid #fff;
|
color: #fff !important;
|
}
|
.m-list-label {
|
overflow: hidden;
|
width: 100%;
|
}
|
.m-list-title {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
}
|
.m-list-title-text{
|
font-size: 0.8em;
|
color: #fff;
|
}
|
.m-list-value-text{
|
font-size: 0.8em;
|
color: #68B0FE;
|
}
|
/deep/ .u-cell__body {
|
color: rgb(255, 255, 255);
|
// color: #fff !important;
|
border-radius: 0;
|
background-color: transparent;
|
// box-shadow: -4.243px -4.243px 10px 0px rgba(255, 255, 255, 0.004),2.294px 3.277px 10px 0px rgba(191, 191, 191, 0.004);
|
border-bottom: 1px dashed rgb(153, 153, 153) !important;
|
}
|
/deep/ .u-line{
|
border: none !important;
|
}
|
.m-list {
|
overflow: hidden;
|
}
|
.m-pitch {
|
// background-color: rgba(0, 170, 255, 0.8);
|
background-color: rgba(255, 0, 0, 1.0);
|
}
|
.m-switch {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.m-layout{
|
word-break: break-all;
|
}
|
</style>
|
