完成008A功能开发
This commit is contained in:
liub
447
pages/common/linkDefence/addDefence.vue
Normal file
447
pages/common/linkDefence/addDefence.vue
Normal file
@ -0,0 +1,447 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user