447 lines
10 KiB
Vue
447 lines
10 KiB
Vue
<template>
|
|
<view class="content contentBg">
|
|
|
|
<SubStep :steps="Status.steps.list" :height="'140rpx'" :curr="Status.steps.curr" @stepClick="stepClick">
|
|
</SubStep>
|
|
|
|
|
|
<view class="mainPanel" v-show="Status.steps.curr===0">
|
|
<view class="main">
|
|
<uni-easyinput maxlength="30" class="txteare" v-model="formData.name" :trim="true" placeholder="输入编组名称"
|
|
type="textarea" autoHeight :inputBorder="false" :border="false"></uni-easyinput>
|
|
</view>
|
|
<button class="btnNext" :disabled="!formData.name" :class="{'active':formData.name}"
|
|
@click="gotoStep(1)">下一步</button>
|
|
</view>
|
|
|
|
<view class="mainPanel" v-show="Status.steps.curr===1">
|
|
<view class="btnAdd" @click="goCheckDevice('main')">
|
|
<image class="img" mode="aspectFit" src="/static/images/common/add.png"></image>
|
|
<text>添加预警主机</text>
|
|
</view>
|
|
|
|
<scroll-view scroll-y="true" scroll-with-animation class="checkedList" v-show="formData.main.length>0">
|
|
<view class="item " v-for="item,index in formData.main">
|
|
<view class="panel imgContent center" @click.stop="imgView(item,index)">
|
|
<image class="img" :src="item.devicePic" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="panel centerCol lbl">
|
|
<view class="LargeTxt">{{item.deviceName}}</view>
|
|
<view class="smallTxt">ID:{{item.deviceImei?item.deviceImei:item.deviceMac}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<button class="btnNext" :class="{'active':formData.main.length>0}" :disabled="formData.main.length==0"
|
|
@click="gotoStep(1)">下一步</button>
|
|
</view>
|
|
|
|
<view class="mainPanel" v-show="Status.steps.curr===2">
|
|
<view class="btnAdd" @click="goCheckDevice('sub')">
|
|
<image class="img" mode="aspectFit" src="/static/images/common/add.png"></image>
|
|
<text>添加布防联机</text>
|
|
</view>
|
|
<scroll-view scroll-y="true" scroll-with-animation class="checkedList" v-show="formData.sub.length>0">
|
|
<view class="item center" v-for="item,index in formData.sub">
|
|
<view class="panel imgContent center" @click.stop="imgView(item,index)">
|
|
<image class="img" :src="item.devicePic" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="panel centerCol lbl">
|
|
<view class="LargeTxt">{{item.deviceName}}</view>
|
|
<view class="smallTxt">ID:{{item.deviceImei?item.deviceImei:item.deviceMac}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<button class="btnNext" :class="{'active':formData.sub.length>0}" :disabled="formData.sub.length==0"
|
|
@click="gotoStep(1)">下一步</button>
|
|
</view>
|
|
|
|
<view class="mainPanel" v-show="Status.steps.curr===3">
|
|
<view class="btnAdd" @click="goCheckDevice('notify')">
|
|
<image class="img" mode="aspectFit" src="/static/images/common/add.png"></image>
|
|
<text>添加接收设备</text>
|
|
</view>
|
|
<scroll-view scroll-y="true" scroll-with-animation class="checkedList" v-show="formData.notify.length>0">
|
|
<view class="item" v-for="item,index in formData.notify">
|
|
<view class="panel imgContent center" @click.stop="imgView(item,index)">
|
|
<image class="img" :src="item.devicePic" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="panel centerCol lbl">
|
|
<view class="LargeTxt">{{item.deviceName}}</view>
|
|
<view class="smallTxt">ID:{{item.deviceImei?item.deviceImei:item.deviceMac}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<button class="btnNext" :class="{'active':formData.notify.length>0}" :disabled="formData.notify.length==0"
|
|
@click="Send">发送</button>
|
|
</view>
|
|
|
|
|
|
<MsgBox ref="msgPop" />
|
|
<global-loading ref="loading" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/utils/request.js';
|
|
import {
|
|
showLoading,
|
|
hideLoading,
|
|
updateLoading
|
|
} from '@/utils/loading.js';
|
|
|
|
import {
|
|
MsgSuccess,
|
|
MsgError,
|
|
MsgClose,
|
|
MsgWarning,
|
|
showPop,
|
|
MsgInfo
|
|
} from '@/utils/MsgPops.js'
|
|
import Common from '@/utils/Common.js';
|
|
|
|
var these = null;
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
Status: {
|
|
steps: {
|
|
list: [{
|
|
text: '设置名称'
|
|
},
|
|
{
|
|
text: '设置主机'
|
|
},
|
|
{
|
|
text: '设置联机'
|
|
},
|
|
{
|
|
text: '发送编组'
|
|
}
|
|
],
|
|
curr: 0
|
|
}
|
|
},
|
|
formData: {
|
|
id: '',
|
|
name: '',
|
|
main: [], //通知设备
|
|
sub: [], //预警设备
|
|
notify: [] //发送设备
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onUnload() {
|
|
|
|
|
|
},
|
|
onBackPress() {
|
|
if (this.Status.steps.curr > 0) {
|
|
this.gotoStep(-1);
|
|
return true;
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onHide: function() {
|
|
|
|
},
|
|
|
|
onLoad(opt) {
|
|
these = this;
|
|
let eventChannel = this.getOpenerEventChannel();
|
|
|
|
eventChannel.on('detailData', (res) => {
|
|
let data = res.data;
|
|
if (data) {
|
|
this.formData.id = data.id;
|
|
this.formData.name = data.name;
|
|
this.formData.main = [];
|
|
this.formData.sub = [];
|
|
this.formData.notify = [];
|
|
setTimeout(this.initData, 0);
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
imgView(item,index){
|
|
if(!item.devicePic){
|
|
return;
|
|
}
|
|
|
|
uni.previewImage({
|
|
urls: [item.devicePic]
|
|
});
|
|
},
|
|
goCheckDevice(type) {
|
|
let json = {
|
|
type: type,
|
|
formData:this.formData
|
|
};
|
|
Object.assign(json, this.formData);
|
|
uni.navigateTo({
|
|
url: '/pages/common/linkDefence/checkDevice',
|
|
success(res) {
|
|
res.eventChannel.emit("detailData", {
|
|
data: json
|
|
});
|
|
},
|
|
events: {
|
|
checkOver(res) {
|
|
these.$set(these.formData, res.type, res.arr)
|
|
}
|
|
},
|
|
fail(ex) {
|
|
console.error("出现异常", ex);
|
|
}
|
|
});
|
|
},
|
|
initData() {
|
|
|
|
if (!this.formData.id) {
|
|
return;
|
|
}
|
|
let url = '';
|
|
if (!url) {
|
|
MsgWarning('后端未开发此接口,敬请期待', '', this);
|
|
return;
|
|
}
|
|
request({
|
|
url: url,
|
|
data: {
|
|
id: this.formData.id
|
|
},
|
|
method: 'POST'
|
|
}).then(res => {
|
|
if (res && res.code == 200) {
|
|
console.log("请求数据成功", res);
|
|
this.formData.main = res.data.filter(v => {
|
|
return v.type == 'notify';
|
|
});
|
|
this.formData.sub = res.data.filter(v => {
|
|
return v.type == 'warn';
|
|
});
|
|
} else {
|
|
MsgError(res.msg, '', this);
|
|
}
|
|
}).catch(ex => {
|
|
console.log("ex=", ex);
|
|
MsgError(ex.errMsg, '', this);
|
|
});
|
|
|
|
},
|
|
stepClick(item, index) {
|
|
console.log("步骤被点击:", item);
|
|
},
|
|
Send() {
|
|
showLoading(these, {
|
|
text: '发送中'
|
|
});
|
|
let task = () => {
|
|
hideLoading(these);
|
|
MsgSuccess("敬请期待", '', these);
|
|
}
|
|
|
|
setTimeout(task, 800);
|
|
},
|
|
gotoStep(intval) {
|
|
if (this.Status.steps.curr + intval > this.Status.steps.list.length - 1) {
|
|
return;
|
|
} else if (this.Status.steps.curr + intval < 0) {
|
|
return;
|
|
}
|
|
|
|
this.Status.steps.curr += intval;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
/* #ifdef APP */
|
|
.content {
|
|
height: 100vh;
|
|
}
|
|
|
|
/* #endif */
|
|
/* #ifdef WEB|H5 */
|
|
.content {
|
|
height: calc(100vh - 44px);
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.mainPanel {
|
|
width: 100%;
|
|
height: calc(100% - 140rpx);
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
border: 1px solid #FFFFFF00;
|
|
}
|
|
|
|
.mainPanel .btnNext {
|
|
width: 90%;
|
|
transform: translateX(5%);
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
border-radius: 45rpx;
|
|
background: #1A1A1A;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-family: "PingFang SC";
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
letter-spacing: 0px;
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
.mainPanel .btnNext.active {
|
|
background: #BBE600;
|
|
color: #232323;
|
|
}
|
|
|
|
/deep/ .uni-easyinput__content,
|
|
.uni-easyinput__content {
|
|
background-color: #1A1A1A !important;
|
|
border-radius: 16rpx;
|
|
color: #FFFFFF;
|
|
text-indent: 10rpx;
|
|
box-sizing: border-box;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/deep/ .uni-textarea-placeholder,
|
|
.uni-textarea-placeholder {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
letter-spacing: 0.14rpx;
|
|
}
|
|
|
|
.mainPanel .main {
|
|
transform: translateY(30rpx);
|
|
}
|
|
|
|
.mainPanel .btnAdd {
|
|
|
|
width: 100%;
|
|
height: 150rpx;
|
|
border-radius: 16rpx;
|
|
background: rgba(26, 26, 26, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
letter-spacing: 0.14rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.mainPanel .btnAdd .img {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.mainPanel .checkedList {
|
|
width: 100%;
|
|
height: calc(100% - 300rpx);
|
|
transform: translateY(20rpx);
|
|
border-radius: 16rpx;
|
|
background-color: #1A1A1A;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.mainPanel .checkedList .item {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
}
|
|
.mainPanel .checkedList .item .panel{
|
|
height: 100%;
|
|
|
|
}
|
|
.mainPanel .checkedList .item .lbl{
|
|
width: calc(100% - 120rpx);
|
|
height: 100%;
|
|
transform: translateX(24rpx);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
align-items: flex-start;
|
|
justify-content: space-evenly;
|
|
}
|
|
.mainPanel .checkedList .item .imgContent {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background-color: #2A2A2A;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.mainPanel .checkedList .item .img {
|
|
width: 80%;
|
|
height: 80%;
|
|
}
|
|
|
|
.checkedList .LargeTxt{
|
|
color: rgba(255, 255, 255, 0.87);
|
|
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.checkedList .smallTxt{
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
|
|
letter-spacing: 0.14rpx;
|
|
|
|
}
|
|
</style> |