<template>
|
<view class="template-job tn-safe-area-inset-bottom tn-skeleton">
|
|
<!-- 顶部自定义导航 -->
|
<tn-nav-bar :isBack="false" fixed style="position: absolute;z-index: 999999999;">
|
|
<text class="title_linespan" @click="goTag">绘制</text>
|
<text v-if="isAchor==false" class="title_linespan"
|
style="margin-left: 10px; color: #00aaff;text-decoration: underline;" @click="goAchor">管理</text>
|
<text v-else class="title_linespan" style="margin-left: 10px;" @click="goAchor">管理</text>
|
</tn-nav-bar>
|
|
<view v-show="lock==false" class="page-wrap u-skeleton">
|
<data-list :width="width" class="data-list" ref="list" @load="handleLoad" @refresh="handleRefresh"
|
style="margin-top: 100px;">
|
|
<view class="item-wrap" v-for="(item, index) in list" :key="index">
|
<tn-button shape="icon" class="tn-icon-edit" style="position: absolute;left: 85%;" size="lg"
|
@click="editClick(item,index)"></tn-button>
|
<tn-button shape="icon" class="tn-icon-delete" ndColor="#ff0000"
|
style="position: absolute;left: 75%;" size="lg" @click="deleteClick(item,index)"></tn-button>
|
<view class="flex flex-direction">
|
<view style="font-size: 18px;">{{item.name}}</view>
|
<view style="margin-top: 5px;">
|
<text
|
style="font-size: 12px;border-radius: 4px; background-color: rgba(255, 98, 98, 0.5);padding: 5px;color: #ff0000;">{{item.shape}}</text>
|
|
</view>
|
<view style="display: flex;margin-top: 10px;">
|
<view style="font-size: 12px; color: rgba(89, 89, 89, 0.5);">围栏编号：{{item.id}}</view>
|
<view style=" color: rgba(89, 89, 89, 0.5); margin-left: 20px; font-size: 12px;">|
|
|
</view>
|
<view style=" color: rgba(89, 89, 89, 0.5); margin-left: 20px; font-size: 12px;">
|
围栏高度：{{item.baoliu1!=null?item.baoliu1:'无'}}</view>
|
<!-- <view style="margin-left: 10px; background-color: rgba(255, 181, 166, 1.0); " >{{item.type}}</view> -->
|
</view>
|
<view
|
style=" border-radius: 5px; background-color: rgba(197, 197, 197, 0.5);width: 100%;margin-top: 10px;">
|
<view style="display: flex;padding: 10px;">
|
<h5>围栏类型：{{item.type}}</h5>
|
<h5 style="margin-left: 20px;">关联部门：{{item.bumen}}</h5>
|
</view>
|
|
</view>
|
|
<view style="display: flex;margin-top: 10px;font-size: 17px;">
|
|
是否启用：<tn-switch v-model="item.baoliu7==1 ? true : false"
|
style="position: absolute;left: 85%;" @change="isopen(item, $event)"
|
:size="num"></tn-switch>
|
</view>
|
</view>
|
|
</view>
|
</data-list>
|
</view>
|
|
<tn-popup v-model="showpopup" mode="bottom" closeBtn>
|
<view class="page-wrap u-skeleton">
|
<view class="item-wrap">
|
<tn-form>
|
<tn-form-item label="围栏形状:" labelWidth='100rpx'>
|
<tn-input disabled v-model="form.shape" @click="show3 = true" inputAlign="right" />
|
</tn-form-item>
|
<tn-form-item label="围栏类型:" labelWidth='100rpx'>
|
<tn-input disabled v-model="form.type" @click="show1 = true" inputAlign="right" />
|
</tn-form-item>
|
<tn-form-item label="关联部门:" labelWidth='100rpx'>
|
<!-- <tn-input v-model="form.bumen" type="select" @click="show2 = true" inputAlign="right"
|
placeholder="请选择关联部门" /> -->
|
<uni-data-select placeholder="请选择关联部门" v-show="form.disable" v-model="form.bumen"
|
:localdata="bumenList" @change="bymenCallback"></uni-data-select>
|
<!-- <tn-action-sheet :disabled="form.disable" :list="bumenList" v-model="show2"
|
@click="bymenCallback"></tn-action-sheet> -->
|
</tn-form-item>
|
<tn-form-item label="围栏高度:" labelWidth='100rpx'>
|
<tn-input disabled v-model="form.baoliu1" inputAlign="right"
|
placeholder="请输入围栏高度"></tn-input>
|
<text>CM</text>
|
</tn-form-item>
|
<tn-form-item label="围栏名称:" labelWidth='100rpx'>
|
<tn-input disabled v-model="form.name" inputAlign="right" placeholder="请输入围栏名称"></tn-input>
|
</tn-form-item>
|
</tn-form>
|
</view>
|
<button style="margin-top: 20px;" type="primary" @click="submitForm">保存围栏</button>
|
</view>
|
</tn-popup>
|
|
<tn-skeleton :show="showSkeleton"></tn-skeleton>
|
<successCom ref="refSuccess"></successCom>
|
<drawCom v-show="lock==true" @goAchor="goAchor" @manualRefresh="manualRefresh"></drawCom>
|
<tn-modal v-model="show" :title="title" :content="content" :button="button" @click="modalclick"></tn-modal>
|
</view>
|
</template>
|
|
<script>
|
import successCom from '@/components/success.vue'
|
import drawCom from '@/pages/index/draw.vue'
|
import {
|
minLogin
|
} from '@/js/minLogin.js'
|
import {
|
updateFence,
|
FenceKaiQi,
|
FenceGuanBi,
|
submitper,
|
findbumen,
|
deleFence,
|
findFence
|
} from '@/config/api.js';
|
import {
|
pagesEquipment
|
} from '@/js/pages/equipment.js'
|
export default {
|
mixins: [minLogin, pagesEquipment],
|
components: {
|
drawCom,
|
successCom
|
},
|
data() {
|
return {
|
width: '90%',
|
editindex: -1,
|
deleindex: -1,
|
delename: '',
|
isswitch: true,
|
tips: true,
|
zuobiaonum: 0,
|
isshape: true,
|
disable: true,
|
form: {
|
bumen: '',
|
name: '',
|
baoliu1: '',
|
tagId: '',
|
zuobiao: '',
|
shape: '圆形',
|
banjing: '',
|
type: '进入报警',
|
list: [],
|
disable: false
|
},
|
shapeList: [{
|
text: '圆形'
|
},
|
{
|
text: '多边形'
|
}
|
],
|
|
typeList: [{
|
text: '进入报警'
|
},
|
{
|
text: '出去告警'
|
},
|
{
|
text: '超员告警'
|
}
|
],
|
bumen: '',
|
bumenList: [],
|
show1: false,
|
show2: false,
|
show3: false,
|
showpopup: false,
|
title: '提示信息',
|
content: '确定要删除该数据吗',
|
button: [{
|
text: '取消',
|
backgroundColor: '#E6E6E6',
|
fontColor: '#FFFFFF',
|
// plain: true,
|
// shape: 'round'
|
},
|
{
|
text: '确定',
|
backgroundColor: 'tn-bg-indigo',
|
fontColor: '#FFFFFF'
|
}
|
],
|
formfence: {
|
name: '',
|
baoliu1: '',
|
tagId: '',
|
zuobiao: '',
|
shape: '圆形',
|
banjing: '',
|
type: '进入报警',
|
list: [],
|
disable: false,
|
company: this.company,
|
},
|
num: 40,
|
isAchor: false,
|
warnindex: 0,
|
warlist: {},
|
lock: false,
|
keyword: '',
|
pageNo: 1,
|
pageSize: 10,
|
imgStyle: {
|
width: '100px',
|
height: '1000px',
|
borderRadius: '50%'
|
},
|
showSkeleton: true,
|
options: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737',
|
}
|
}, ],
|
boxKey: 0,
|
scrollHeight: 500,
|
topheight: 0,
|
paddingTop: 60,
|
emitDate: 'indexHome',
|
show: false,
|
time: '',
|
list: [],
|
total: 0,
|
options1: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737'
|
}
|
}]
|
}
|
},
|
computed: {
|
countList() {
|
let num = 0;
|
for (let i in this.list) {
|
num += this.list[i].fQty;
|
}
|
return num;
|
}
|
},
|
mounted() {
|
console.log(111111);
|
this.findbumenall()
|
this.topheight = this.vuex_custom_bar_height + 15
|
setTimeout(() => {
|
this.showSkeleton = false
|
}, 1000)
|
this.scrollHeight = this.screenHeight - 282;
|
|
setTimeout(() => {
|
this.paddingTop = this.vuex_padding_top
|
this.paddingTop += 5
|
}, 400)
|
|
},
|
methods: {
|
manualRefresh() { //保存围栏成功刷新围栏列表页面
|
this.isAchor = false
|
this.lock = false
|
// 调用 handleRefresh 方法，刷新 dataList 组件
|
this.handleRefresh({
|
page: 1,
|
size: this.pageSize
|
}, () => {
|
// 可选：刷新完成后执行的操作
|
// this.$refs.refSuccess.showBox({
|
// type: 'success',
|
// txt: '刷新成功'
|
// });
|
});
|
},
|
isopen(item, e) {
|
this.form.name = item.name
|
if (item.baoliu7 == 1) {
|
item.baoliu7 = 0
|
} else {
|
item.baoliu7 = 1
|
}
|
const params = {
|
name: item.name,
|
// size: data.size,
|
}
|
// item.baoliu7 = e ? 1 : 0; // 根据开关状态更新
|
if (this.vuex_is_login) {
|
if (e == true) {
|
|
FenceGuanBi(params).then((res) => {})
|
} else {
|
FenceKaiQi(params).then((res) => {})
|
}
|
}
|
},
|
submitForm() {
|
this.form.list = this.list
|
if (this.form.shape == "圆形") {
|
if (this.vuex_is_login) {
|
submitper(this.form).then((res) => {
|
if (res.code == 0) {
|
// this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
|
// this.tips=false
|
// this.disable=false
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
} else {
|
if (this.form.tagId == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入设备编号采集坐标'
|
});
|
return false;
|
} else if (this.form.baoliu1 == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入围栏高度采集坐标'
|
});
|
return false;
|
} else if (this.form.name == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入围栏名称采集坐标'
|
});
|
return false;
|
} else if (this.form.shape == '圆形') {
|
if (this.form.zuobiao == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请采集坐标'
|
});
|
return false;
|
}
|
if (this.form.banjing == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入围栏半径'
|
});
|
return false;
|
}
|
} else if (this.form.shape == '多边形') {
|
if (this.form.list.length < 0) {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请采集坐标'
|
});
|
return false;
|
}
|
}
|
}
|
const json = {}
|
json.name = this.form.name
|
json.bumen = this.form.bumen
|
if (this.vuex_is_login) {
|
updateFence(json).then((res) => {
|
if (res.code == 0) {
|
this.showpopup = false
|
// this.list.splice(this.deleindex,1)
|
this.$set(this.list, this.editindex, res.data);
|
// this.form.bumen =
|
// this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
|
// this.tips=false
|
// this.disable=false
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
|
},
|
shapeCallback(index) {
|
this.form.shape = this.shapeList[index].text;
|
if (this.shapeList[index].text == '圆形') {
|
this.isshape = true
|
} else {
|
this.isshape = false
|
}
|
},
|
|
bymenCallback(index) {
|
this.form.bumen = this.bumenList[index].text;
|
},
|
typeCallback(index) {
|
this.form.type = this.typeList[index].text;
|
},
|
findbumenall() {
|
if (this.vuex_is_login) {
|
findbumen().then((res) => {
|
console.log(res);
|
if (res.code == 0) {
|
// for (var i = 0; i < res.data.length; i++) {
|
// var json = {}
|
// json.text = res.data[i].departmentName
|
// // .textres.data[i]
|
// this.bumenList.push(json)
|
this.bumenList = res.data.map(item => ({
|
value: item.departmentName,
|
text: item.departmentName
|
}));
|
// }
|
// this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
|
// this.tips=false
|
// this.disable=false
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
},
|
modalclick(e) {
|
if (e.index == 1) {
|
const params = {
|
name: this.delename,
|
// size: data.size,
|
}
|
|
if (this.vuex_is_login) {
|
deleFence(params).then((res) => {
|
if (res.code == 0) {
|
this.delename = ''
|
this.list.splice(this.deleindex, 1)
|
this.deleindex = -1
|
}
|
})
|
}
|
}
|
this.show = false;
|
},
|
editClick(e, i) {
|
this.editindex = i
|
this.showpopup = true
|
this.formfence.name = e.name
|
this.formfence.baoliu1 = e.baoliu1
|
this.formfence.zuobiao = e.zuobiao
|
this.formfence.shape = e.shape
|
this.formfence.type = e.type
|
this.formfence.banjing = e.banjing
|
this.formfence.tagId = e.tagId
|
this.formfence.bumen = e.bumen
|
this.formfence.disable = true
|
this.formfence.company = this.company
|
this.form = this.formfence
|
},
|
deleteClick(e, i) {
|
this.deleindex = i
|
this.delename = e.name
|
this.show = true;
|
|
},
|
goAchor() {
|
this.isAchor = false
|
this.lock = false
|
},
|
goTag() {
|
this.lock = true
|
},
|
|
// 模拟请求加载数据
|
handleLoad(data, callback) {
|
const params = {
|
current: data.page,
|
size: data.size,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findFence(params).then((res) => {
|
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}else{
|
callback({
|
list: [],
|
total: 0
|
});
|
}
|
},
|
handleSearch(data, callback) {
|
|
const params = {
|
current: 1,
|
size: 10,
|
objectid: this.keyword,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findFence(params).then((res) => {
|
|
this.list = []
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}
|
},
|
// 模拟请求数据刷新
|
handleRefresh(data, callback) {
|
|
const params = {
|
current: data.page,
|
size: data.size,
|
objectid: data.objectid,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findFence(params).then((res) => {
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = []
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/* 鼠标未悬浮时效果设置 */
|
.title_linespan {
|
font-size: 17px;
|
font-weight: bold;
|
// font-weight: 100px;
|
color: #000000
|
}
|
|
/* 鼠标悬浮后的设置 */
|
.title_linespan:hover {
|
font-size: 17px;
|
font-weight: bold;
|
color: #00aaff;
|
text-decoration: underline;
|
}
|
|
.modal-btn {
|
position: absolute;
|
|
left: 80%;
|
// margin-top: -40px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// box-sizing: border-box;
|
// width: 120rpx;
|
// height: 40rpx;
|
// background: rgba(103, 149, 255, 0.2);
|
}
|
|
.page-wrap {
|
height: 100%;
|
padding-top: 45px;
|
padding-left: 30rpx;
|
padding-right: 30rpx;
|
|
.test-view {
|
height: 300rpx;
|
}
|
|
.navbar-content {
|
width: 100%;
|
display: flex;
|
padding: 30rpx;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.u-icon {
|
margin-left: 30rpx;
|
}
|
|
.item-wrap {
|
// display: flex;
|
margin: 10rpx;
|
padding: 30rpx;
|
align-items: center;
|
border-radius: 16rpx;
|
box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.11);
|
|
.avatar {
|
width: 150rpx;
|
height: 150rpx;
|
margin-right: 30rpx;
|
border-radius: 16rpx;
|
background-color: #c0c0c0;
|
}
|
|
.item {
|
width: 100rpx;
|
height: 30rpx;
|
margin-bottom: 10rpx;
|
border-radius: 16rpx;
|
background-color: #c8c7cc;
|
}
|
|
}
|
}
|
</style>
|
