509 lines
11 KiB
Vue
509 lines
11 KiB
Vue
<template>
|
|
<view class="maincontent contentBg">
|
|
<uni-nav-bar :border="false" @clickLeft="prevPage" fixed="true" statusBar="true" background-color="#121212"
|
|
color="#FFFFFF" :title="Status.navbar.title">
|
|
<template v-slot:left>
|
|
<view>
|
|
<uni-icons type="left" size="24" color="#FFFFFF"></uni-icons>
|
|
</view>
|
|
</template>
|
|
<block slot="right">
|
|
<view class="navbarRight center">
|
|
<image @click.stop="handleRightClick(index,item)" v-for="item,index in Status.navbar.icons"
|
|
class="img" :src="item.src" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
</block>
|
|
</uni-nav-bar>
|
|
|
|
|
|
<view class="listContent">
|
|
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
|
|
:down="downOption" :fixed="false">
|
|
|
|
<uni-swipe-action>
|
|
<uni-swipe-action-item v-for="item,index in deviceList" @click="onClick"
|
|
@change="swipeChange($event, 0)" :autoClose="false">
|
|
<view class="listItem" @click.stop="gotoDetail(item,index)">
|
|
<view class="itemMain">
|
|
|
|
|
|
<view class="title">{{item.name?item.name:'预警设防'+index}}</view>
|
|
<view class="splitLine"></view>
|
|
<view class="row">
|
|
<view class="lbl">布防联机:{{item.total}}</view>
|
|
<view class="lbl">接收设备:{{item.notify}}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="lbl">布防联机:{{item.sub}}</view>
|
|
<view class="lbl">预警主机:{{item.warn}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template v-slot:right>
|
|
<view class="swipBtn" @click.stop="onClick(btn,i,item,index)"
|
|
v-for="btn,i in Status.SwipOptions"
|
|
:style="{'backgroundColor':btn.style.backgroundColor,'width':btn.style.width}">
|
|
|
|
<image :src="btn.style.icon" mode="aspectFit" class="icon"
|
|
:style="{'filter':btn.style.filter}"></image>
|
|
<text class="txt">{{btn.text}}</text>
|
|
|
|
</view>
|
|
</template>
|
|
</uni-swipe-action-item>
|
|
|
|
</uni-swipe-action>
|
|
|
|
|
|
</mescroll-uni>
|
|
</view>
|
|
|
|
<global-loading ref="loading" />
|
|
|
|
<MsgBox ref="msgPop" />
|
|
|
|
<MsgBox ref="rename">
|
|
<view class="renamePop center">
|
|
<view class="lbl">设备名称</view>
|
|
<input class="txt" v-model="cEdit.name" type="text" placeholder="输入名称" maxlength="20"
|
|
placeholder-class="txtplace" />
|
|
</view>
|
|
</MsgBox>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request, {
|
|
baseURL
|
|
} from '@/utils/request.js';
|
|
import {
|
|
showLoading,
|
|
hideLoading,
|
|
updateLoading
|
|
} from '@/utils/loading.js';
|
|
import {
|
|
MsgSuccess,
|
|
MsgError,
|
|
MsgClose,
|
|
MsgWarning,
|
|
showPop,
|
|
MsgInfo,
|
|
MsgClear,
|
|
MsgPrompt
|
|
} from '@/utils/MsgPops.js';
|
|
import Common from '@/utils/Common.js';
|
|
|
|
var timeout = null;
|
|
var these = null;
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
Status: {
|
|
navbar: {
|
|
icons: [{
|
|
src: '/static/images/common/add.png',
|
|
type: 'add'
|
|
}],
|
|
title: '预警布防',
|
|
showBack: true,
|
|
height: 90
|
|
},
|
|
SwipOptions: [{
|
|
type: "rename",
|
|
text: '重命名',
|
|
style: {
|
|
backgroundColor: '#E09319',
|
|
icon: '/static/images/common/rename.png',
|
|
width: '120rpx', // 初始宽度
|
|
},
|
|
},
|
|
{
|
|
type: 'drop',
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: 'rgb(240, 60, 60)',
|
|
icon: '/static/images/common/dell.png',
|
|
width: '120rpx', // 初始宽度
|
|
filter: 'brightness(0) invert(0.87)'
|
|
},
|
|
},
|
|
],
|
|
},
|
|
|
|
mescroll: null,
|
|
downOption: {
|
|
auto: true,
|
|
autoShowLoading: false,
|
|
},
|
|
upOption: {
|
|
auto: false,
|
|
noMoreSize: 0,
|
|
offset: 10,
|
|
isLock: false,
|
|
empty: {
|
|
tip: '暂无数据',
|
|
hideScroll: false,
|
|
icon: '/static/images/common/empty.png'
|
|
},
|
|
textNoMore: '没有更多数据了'
|
|
},
|
|
deviceList: [],
|
|
cEdit: {
|
|
id: null,
|
|
name: null,
|
|
total: null,
|
|
notify: null,
|
|
sub: null,
|
|
warn: null
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.Status.navbar.height = uni.getSystemInfoSync().statusBarHeight + 44;
|
|
},
|
|
onLoad() {
|
|
these = this;
|
|
},
|
|
methods: {
|
|
ReName() {
|
|
if (!this.cEdit.name) {
|
|
MsgError('请输入名称', '', these, null, false);
|
|
return;
|
|
}
|
|
let ok = () => {
|
|
this.deviceList.find((v, i) => {
|
|
if (v.id == this.cEdit.id) {
|
|
this.$set(this.deviceList[i], "name", this.cEdit.name)
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
let url = '';
|
|
if (url) {
|
|
request({
|
|
url: url,
|
|
data: this.cEdit,
|
|
method: 'update'
|
|
}).then(res => {
|
|
if (res && res.code == 200) {
|
|
ok();
|
|
}
|
|
}).catch(ex => {
|
|
MsgError(ex.msg, '', these);
|
|
});
|
|
} else {
|
|
ok();
|
|
}
|
|
},
|
|
onClick(btn, i, item, index) {
|
|
if (btn.type == 'rename') {
|
|
these.cEdit = Object.assign(these.cEdit, item);
|
|
console.log("执行重命名");
|
|
MsgPrompt(this, btn.type, this.ReName, false, true);
|
|
return;
|
|
}
|
|
|
|
if (btn.type == 'drop') {
|
|
console.log("执行删除");
|
|
MsgError('删除后不可恢复,您确认删除"' + item.name + '"吗?', '确定', this, () => {
|
|
this.deviceList.splice(index, 1);
|
|
}, true);
|
|
return;
|
|
}
|
|
},
|
|
change(event) {
|
|
console.log('改变事件', event);
|
|
},
|
|
swipeChange(e, index) {
|
|
console.log('当前状态：' + e + '，下标：' + index)
|
|
},
|
|
gotoDetail(item, index) {
|
|
uni.navigateTo({
|
|
url: '/pages/common/linkDefence/addDefence',
|
|
success(res) {
|
|
res.eventChannel.emit('detailData',{data:item})
|
|
}
|
|
});
|
|
},
|
|
mescrollInit(mescroll) {
|
|
this.mescroll = mescroll;
|
|
},
|
|
// 下拉刷新
|
|
downCallback() {
|
|
|
|
|
|
if (this.mescroll) {
|
|
this.mescroll.resetUpScroll(false);
|
|
this.mescroll.scrollTo(0, 0);
|
|
}
|
|
this.getData();
|
|
|
|
|
|
},
|
|
// 上拉加载
|
|
upCallback() {
|
|
this.getData();
|
|
},
|
|
getData() {
|
|
let task = () => {
|
|
|
|
let data = {
|
|
pageNum: this.mescroll.num,
|
|
pageSize: 10,
|
|
}
|
|
|
|
if (!data.pageNum) {
|
|
this.mescroll.endSuccess(0, false);
|
|
|
|
return;
|
|
}
|
|
|
|
|
|
let result = (res) => {
|
|
|
|
// 分页处理
|
|
if (data.pageNum === 1) {
|
|
this.deviceList = res.rows;
|
|
} else {
|
|
this.deviceList = this.deviceList.concat(res.rows);
|
|
}
|
|
|
|
let hasNext = true;
|
|
|
|
if (res.rows.length < data.pageSize || this.deviceList.length >= res.total) {
|
|
|
|
hasNext = false;
|
|
} else {
|
|
|
|
hasNext = true;
|
|
}
|
|
this.mescroll.endSuccess(res.rows.length, hasNext);
|
|
}
|
|
let url = ''; //请求地址
|
|
if (url) {
|
|
request({
|
|
url: url,
|
|
data: data,
|
|
method: 'GET'
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
result(res);
|
|
} else {
|
|
this.mescroll.endSuccess(0, false);
|
|
}
|
|
}).catch(ex => {
|
|
MsgError(ex.errMsg, '', this);
|
|
this.mescroll.endSuccess(0, false);
|
|
});
|
|
} else {
|
|
if (data.pageNum === 1) {
|
|
//开发时做假数据模拟成功
|
|
MsgWarning("这是测试数据,非真实场景,真实功能敬请期待", '', this, true, null, false);
|
|
}
|
|
let res = {
|
|
code: 200,
|
|
total: 108,
|
|
rows: []
|
|
};
|
|
let currLen = this.deviceList.length;
|
|
|
|
for (let i = 0; i < data.pageSize; i++) {
|
|
if (currLen + i + 1 >= res.total) {
|
|
break;
|
|
}
|
|
let json = {
|
|
id: Common.guid(),
|
|
name: '预警设防 ' + (i + (data.pageNum - 1) * data.pageSize + 1),
|
|
total: (Math.random() * 100).toFixed(0),
|
|
notify: (Math.random() * 100).toFixed(0),
|
|
sub: (Math.random() * 100).toFixed(0),
|
|
warn: (Math.random() * 100).toFixed(0)
|
|
};
|
|
res.rows.push(json);
|
|
}
|
|
result(res);
|
|
}
|
|
|
|
}
|
|
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(task, 50);
|
|
|
|
},
|
|
prevPage() {
|
|
uni.navigateBack({
|
|
|
|
});
|
|
},
|
|
handleRightClick(s, e) {
|
|
|
|
if (s === 0) {
|
|
uni.navigateTo({
|
|
url: '/pages/common/linkDefence/addDefence'
|
|
})
|
|
} else if (s === 1) {
|
|
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.maincontent {
|
|
height: 100vh;
|
|
}
|
|
|
|
.listContent {
|
|
height: calc(100% - 90rpx);
|
|
margin-top: 90rpx;
|
|
}
|
|
|
|
.listItem {
|
|
|
|
|
|
background: rgba(26, 26, 26, 1);
|
|
width: 100%;
|
|
min-height: 140rpx;
|
|
height: auto;
|
|
|
|
box-sizing: border-box;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.listItem .itemMain {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.listItem .title {
|
|
color: rgba(255, 255, 255, 0.87);
|
|
|
|
font-family: "PingFang SC";
|
|
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
|
|
letter-spacing: 0.14rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
.listItem .splitLine {
|
|
border-bottom: 1rpx solid rgba(255, 255, 255, 1);
|
|
width: 10000px;
|
|
height: 0rpx;
|
|
margin-top: 15rpx;
|
|
margin-bottom: 15rpx;
|
|
transform: scale(0.1);
|
|
margin-left: -5000px;
|
|
}
|
|
|
|
.listItem .row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 24rpx;
|
|
font-weight: 200;
|
|
|
|
letter-spacing: 0.07px;
|
|
|
|
}
|
|
|
|
/* .listItem .row .lbl{
|
|
padding: 0rpx 30rpx 0rpx 0rpx;
|
|
text-align: left;
|
|
} */
|
|
.listItem .row:last-of-type {
|
|
margin-bottom: 0rpx;
|
|
}
|
|
|
|
.swipBtn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.uni-swipe .icon,
|
|
/deep/ .uni-swipe .icon {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
}
|
|
|
|
.uni-swipe .txt,
|
|
/deep/ .uni-swipe .txt {
|
|
color: rgba(255, 255, 255, 0.87);
|
|
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
|
|
letter-spacing: 0.14rpx;
|
|
|
|
}
|
|
|
|
.uni-swipe,
|
|
/deep/ .uni-swipe {
|
|
margin-bottom: 20rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.renamePop {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
padding: 60rpx 0rpx 30rpx 0rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.renamePop .lbl {
|
|
color: rgba(255, 255, 255, 0.87);
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 26rpx;
|
|
letter-spacing: 0.14rpx;
|
|
width: auto;
|
|
padding: 0rpx 10rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.renamePop .txt {
|
|
flex: 1;
|
|
height: 60rpx;
|
|
box-sizing: border-box;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.4);
|
|
border-radius: 8rpx;
|
|
text-align: left;
|
|
text-indent: 10rpx;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
|
|
font-family: "PingFang SC";
|
|
|
|
font-size: 28rpx;
|
|
|
|
letter-spacing: 0.14rpx;
|
|
|
|
}
|
|
|
|
.txtplace {
|
|
color: rgba(255, 255, 255, 0.43);
|
|
|
|
font-family: "PingFang SC";
|
|
|
|
font-size: 26rpx;
|
|
}
|
|
</style> |