<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;" @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;display: flex;">
|
<text
|
style="font-size: 12px;border-radius: 4px; background-color: rgba(255, 98, 98, 0.5);padding: 5px;color: #ff0000;">{{item.fencetype==0?'变电作业' : '输电作业'}}</text>
|
|
<view
|
style="margin-left: 95px; font-size: 12px;border-radius: 4px; background-color: rgba(0, 170, 255, 0.5);padding: 5px;" @click="positionclick(item.points)">定位</view>
|
|
</view>
|
<view style="display: flex;margin-top: 10px;">
|
<view style="font-size: 12px; color: rgba(89, 89, 89);">添加人：{{item.addperson}}</view>
|
<view style=" color: rgba(89, 89, 89); margin-left: 20px; font-size: 12px;">|
|
|
</view>
|
<view style=" color: rgba(89, 89, 89); margin-left: 20px; font-size: 12px;">
|
围栏高度：{{item.height!=null?item.height:'无'}}</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;">
|
|
<!-- <h5 ></h5> -->
|
<view style=" word-wrap: break-word;padding: 10px;">
|
<h5>围栏坐标:{{ item.points.length > 35? item.points.slice(0, 35) + '...' : item.points }}</h5>
|
|
</view>
|
<view style="display: flex;padding: 10px;">
|
<h5>围栏类型：{{item.type}}</h5>
|
<h5 style="margin-left: 20px;">关联部门：{{item.department}}</h5>
|
</view>
|
|
<view style="display: flex;padding: 10px;">
|
<h5>预警距离：{{item.distance}}</h5>
|
<h5 style="margin-left: 20px;">地面海拔：{{item.baoliu4}}</h5>
|
</view>
|
|
<view style="padding: 10px;">
|
<h5>时间：{{item.addtime}}</h5>
|
</view>
|
|
</view>
|
|
|
<view style="display: flex;margin-top: 10px;font-size: 17px;">
|
|
是否启用：<tn-switch v-model="item.isplay==1 ? true : false"
|
style="position: absolute;left: 85%;" @change="isopen(item, $event)"
|
:size="num"></tn-switch>
|
</view>
|
|
<view style="display: flex;margin-top: 10px;font-size: 17px;">
|
|
是否显示：<tn-switch v-model="item.ishide==0 ? true : false"
|
style="position: absolute;left: 85%;" @change="isopenhide(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="labelWidth">
|
<tn-input v-model="form.name" inputAlign="right"></tn-input>
|
</tn-form-item>
|
<tn-form-item label="围栏性质:" :labelWidth="labelWidth">
|
<tn-input disabled v-model="form.fencetype" @click="show3 = true" inputAlign="right" />
|
</tn-form-item>
|
<tn-form-item label="围栏类型:" :labelWidth="labelWidth">
|
<tn-input v-model="form.type" type="select" @click="show1 = true" placeholder="请选择关联部门" />
|
<tn-action-sheet :list="typeList" v-model="show1" @click="typeCallback"></tn-action-sheet>
|
</tn-form-item>
|
<tn-form-item label="坐标:" :labelWidth="labelWidth">
|
<uni-tooltip :content="zuob" placement="bottom" >
|
<tn-input disabled v-model="form.points" inputAlign="right"></tn-input>
|
</uni-tooltip>
|
|
|
</tn-form-item>
|
<tn-form-item label="关联部门:" :labelWidth="labelWidth">
|
<!-- <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.department"
|
:localdata="bumenList" @change="bymenCallback"></uni-data-select> -->
|
<!-- <tn-action-sheet :disabled="form.disable" :list="bumenList" v-model="show2"
|
@click="bymenCallback"></tn-action-sheet> -->
|
<tn-input v-model="form.department" type="select" @click="show2 = true"
|
placeholder="请选择关联部门" />
|
<tn-action-sheet :list="bumenList" v-model="show2" @click="bymenCallback"></tn-action-sheet>
|
</tn-form-item>
|
<tn-form-item label="围栏高度:" :labelWidth="labelWidth">
|
<tn-input v-model="form.height" inputAlign="right" placeholder="请输入围栏高度"></tn-input>
|
<text>m</text>
|
</tn-form-item>
|
<tn-form-item label="预警距离:" :labelWidth="labelWidth">
|
<tn-input v-model="form.distance" inputAlign="right" placeholder="请输入预警距离"></tn-input>
|
<text>m</text>
|
</tn-form-item>
|
<tn-form-item label="地面海拔:" :labelWidth="labelWidth">
|
<tn-input disabled v-model="form.baoliu4" inputAlign="right"></tn-input>
|
<text>m</text>
|
</tn-form-item>
|
<tn-form-item label="添加人:" :labelWidth="labelWidth">
|
<tn-input disabled v-model="form.addperson" inputAlign="right"></tn-input>
|
</tn-form-item>
|
<tn-form-item label="添加时间:" :labelWidth="labelWidth">
|
<tn-input disabled v-model="form.addtime" inputAlign="right"></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" @goindex="goindex"></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,
|
FenceKaiQihide,
|
FenceGuanBihide,
|
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 {
|
labelWidth: 200,
|
width: '90%',
|
editindex: -1,
|
deleindex: -1,
|
delename: '',
|
isswitch: true,
|
tips: true,
|
zuobiaonum: 0,
|
isshape: true,
|
disable: true,
|
form: {
|
name: '',
|
fencetype: '',
|
department: '',
|
type: '工作区',
|
points: '',
|
height: '圆形',
|
distance: '',
|
baoliu4: '',
|
addperson: '',
|
addtime: '',
|
},
|
shapeList: [{
|
text: '圆形'
|
},
|
{
|
text: '多边形'
|
}
|
],
|
|
typeList: [{
|
text: '保护区'
|
},
|
{
|
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: '',
|
fencetype: '',
|
department: '',
|
type: '工作区',
|
points: '',
|
height: '圆形',
|
distance: '',
|
baoliu4: '',
|
addperson: '',
|
addtime: '',
|
},
|
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,
|
zuob:[],
|
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(11111);
|
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: {
|
positionclick(e){
|
console.log(e);
|
console.log(e.split(";")[0]);
|
this.$emit('toposition',e.split(";")[0]);
|
console.log(3333333333);
|
},
|
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.isplay == 1) {
|
item.isplay = 0
|
} else {
|
item.isplay = 1
|
item.ishide = 0
|
}
|
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) => {
|
console.log(res);
|
})
|
} else {
|
FenceKaiQi(params).then((res) => {})
|
}
|
}
|
},
|
|
isopenhide(item, e) {
|
this.form.name = item.name
|
if (item.ishide == 1) {
|
item.ishide = 0
|
} else {
|
item.ishide = 1
|
}
|
const params = {
|
name: item.name,
|
// size: data.size,
|
}
|
// item.baoliu7 = e ? 1 : 0; // 根据开关状态更新
|
if (this.vuex_is_login) {
|
if (e == true) {
|
|
FenceGuanBihide(params).then((res) => {
|
console.log(res);
|
})
|
} else {
|
FenceKaiQihide(params).then((res) => {})
|
}
|
}
|
},
|
|
|
submitForm() {
|
// this.form.list = this.list
|
if (this.form.type == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请选择围栏类型'
|
});
|
return false;
|
} else if (this.form.height == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入围栏高度采集坐标'
|
});
|
return false;
|
} else if (this.form.bumen == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请选择关联部门'
|
});
|
return false;
|
} else if (this.form.distance == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入预警距离'
|
});
|
return false;
|
}
|
if (this.vuex_is_login) {
|
updateFence(this.form).then((res) => {
|
if (res.code == 0) {
|
this.handleRefresh({
|
page: 1,
|
size: this.pageSize
|
}, () => {
|
// 可以在这里处理加载完成后的逻辑
|
});
|
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.lat+";"+res.data.lon
|
// 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.department = this.bumenList[index].text;
|
},
|
typeCallback(index) {
|
this.form.type = this.typeList[index].text;
|
},
|
findbumenall() {
|
if (this.vuex_is_login) {
|
const params = {
|
company: this.company,
|
juese:uni.getStorageSync('juese'),
|
}
|
findbumen(params).then((res) => {
|
console.log(res);
|
if (res.code == 0) {
|
this.bumenList = res.data.map(item => ({
|
value: item.name,
|
text: item.name
|
}));
|
// }
|
// this.form.lonlat=res.data.lat+";"+res.data.lon
|
// 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.fencetype = e.fencetype==0?'变电作业' : '输电作业'
|
this.formfence.department = e.department
|
this.formfence.points = e.points
|
this.formfence.type = e.type
|
this.formfence.height = e.height
|
this.formfence.distance = e.distance
|
this.formfence.baoliu4 = e.baoliu4
|
// this.formfence.disable = e.disable
|
this.formfence.addperson = e.addperson
|
this.formfence.addtime = e.addtime
|
this.form = this.formfence
|
this.zuob = this.form.points.split(",")
|
},
|
deleteClick(e, i) {
|
this.deleindex = i
|
this.delename = e.name
|
this.show = true;
|
|
},
|
goAchor() {
|
this.isAchor = false
|
this.lock = false
|
},
|
goindex() {
|
this.$emit('toggle');
|
},
|
goTag() {
|
this.lock = true
|
},
|
|
// 模拟请求加载数据
|
handleLoad(data, callback) {
|
const params = {
|
current: data.page,
|
size: data.size,
|
company: this.company,
|
juese:uni.getStorageSync('juese'),
|
}
|
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,
|
juese:uni.getStorageSync('juese'),
|
}
|
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,
|
juese:uni.getStorageSync('juese'),
|
}
|
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>
|
