<template>
|
<div>
|
<h4 class="font-weight-bold py-3 mb-0">
|
<router-link to="/mapdevice">
|
<span class="text-muted font-weight-light">设备地图管理 /</span>
|
</router-link>
|
设备地图{{!isEdit?'查看':'编辑'}}
|
</h4>
|
<b-card no-body class="pl20 pr20 pt20 pb20">
|
<div class="row">
|
<div :class="!isEdit?'col-12':'col-sm-6 col-md-8 mb-2'">
|
<!-- 地图 start -->
|
<b-card no-body style="height: 70vh;" >
|
<svgDIYMapModelEdit
|
:isIconEdit="isEdit"
|
:mapInfo="mapInfo"
|
:iconArr="deviceArr"
|
@dragMapLayerFn="({x,y})=>{mapLayerX=x;mapLayerY=y}"
|
@zoomMapLayerFn="(scale)=>{mapLayerScale=scale}"
|
@iconIteamDragFn="iconIteamDrag"
|
@iconIteamDelFn="iconIteamDel"
|
/>
|
</b-card>
|
<!-- 地图 start -->
|
</div>
|
<!-- 列表 start -->
|
<div v-if="isEdit" class="col-sm-6 col-md-4 mb-2 border-right-0 pr">
|
<div class="mr20 pr10 pl10 pt10 pb10 border" style="height: 70vh;">
|
<b-tabs pills >
|
<b-tab title="未描点设备" :active="listType==='未描点'" @click="listType='未描点';_initDeviceList()"/>
|
<b-tab title="已描点设备" :active="listType==='已描点'" @click="listType='已描点';_initDeviceList()"/>
|
</b-tabs>
|
<hr class="mb-0 mt-2"/>
|
<div class="pt10 pb10">
|
<!-- 搜索开始 -->
|
<b-input-group>
|
<b-input-group-prepend>
|
<b-form-select v-model="form.deviceType" text-field="lable" required :options="newDeviceTypeDicts"/>
|
</b-input-group-prepend>
|
<b-input type="text" v-model="form.deviceName" @keyup.native.enter="_initDeviceList()" autocomplete="off"/>
|
<b-input-group-append>
|
<b-btn variant="primary" @click="_initDeviceList()">搜索</b-btn>
|
</b-input-group-append>
|
</b-input-group>
|
<!-- 搜索结束 -->
|
<!-- 列表内容 start -->
|
<div style="height: 58vh;" class="pt10">
|
<perfect-scrollbar :options="{ suppressScrollX: true, wheelPropagation: true }" style="height: 100%;">
|
<div class="pr">
|
<el-collapse v-model="activeCollapse" class="pl5 pr5" style="border-top:0">
|
<el-collapse-item
|
:title="iteams.deviceTypeName"
|
:name="iteams.deviceType"
|
v-for="(iteams,index) in newDeviceList"
|
:key="index">
|
<div class="kanban-box pt-2" >
|
<dragger-box
|
:data="item"
|
toDOMId="drawMap"
|
:tags="{deviceTypeName:iteams.deviceTypeName,deviceType:iteams.deviceType}"
|
@_getContainerRect="addMapIconIteam"
|
v-for="item in iteams.dataList"
|
:key="item.id">
|
<div class="ui-bordered p-2 mb-2 dragger-li flex-box cursor-move">
|
<div class="img-icon mr10" :style="`background-image:url(${item.icon?'/static/img/map/'+item.icon+'.png':''})`"></div>
|
<div class="dragger-content">
|
{{item.deviceName}}
|
</div>
|
</div>
|
</dragger-box>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<div v-show="!newDeviceList.length" class="text-center pt-4 pb-4 text-muted font-weight-light">
|
暂无数据
|
</div>
|
</div>
|
<!-- <div v-if="listType!=='未描点'">
|
<el-collapse v-model="activeCollapse" class="pl5 pr5" style="border-top:0">
|
<el-collapse-item :title="iteams.deviceTypeName" :name="iteams.deviceType" v-for="(iteams,index) in deviceList" :key="index">
|
<div
|
class="kanban-box pt-2"
|
v-for="item in iteams.dataList"
|
:key="item.id">
|
<div class="ui-bordered p-2 mb-2 dragger-li flex-box">
|
<div class="img-icon mr10">
|
<img :src="'/static/img/map/'+item.icon+'.png'" width="30px" height="30px" :onerror="noneImg" :alt="item.icon" @mousedown.prevent>
|
</div>
|
<div class="dragger-content">
|
{{item.deviceName}}
|
</div>
|
</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<div v-show="!deviceList.length" class="text-center pt-4 pb-4 text-muted font-weight-light">
|
暂无数据
|
</div>
|
</div> -->
|
</perfect-scrollbar>
|
</div>
|
<!-- 列表内容 end -->
|
</div>
|
</div>
|
<!-- 竖排页签 start -->
|
<div class="verticalTabs">
|
<perfect-scrollbar :options="{ suppressScrollX: true, wheelPropagation: true }" style="height: 100%;">
|
<ul class="verticalTabs">
|
<li
|
@click="form.authorizationSystem = iteam.value;_initDeviceList()"
|
:class="form.authorizationSystem === iteam.value?'active':''"
|
v-for="iteam in newSysDicts"
|
:key="iteam.id">
|
<a href="javascript:;">{{iteam.lable}}</a>
|
</li>
|
</ul>
|
</perfect-scrollbar>
|
</div>
|
<!-- 竖排页签 end -->
|
</div>
|
<!-- 列表 end -->
|
</div>
|
<div class="text-right mt-1">
|
<ladda-btn :loading="saveLoading" v-if="isEdit" @click.native="saveDevice" data-style="slide-down" class="btn btn-primary">保存</ladda-btn>
|
|
<b-btn variant="default" @click="$router.push({path:'/mapdevice'})">返回</b-btn>
|
</div>
|
</b-card>
|
</div>
|
</template>
|
|
<script>
|
import LaddaBtn from '@/vendor/libs/ladda/Ladda'
|
import { getGloDicts, getSysListWithHome } from '@/server/common.js'
|
import {
|
getMapInfo,
|
getNoDrawPointList,
|
getDrawPointList,
|
saveMapDevice,
|
getMapDeviceInfo
|
} from '@/server/mapDeviceManagement.js'
|
import svgDIYMapModelEdit from '@/components/map/svgDIYMapModelEdit'
|
import { Collapse, CollapseItem } from 'element-ui'
|
import PerfectScrollbar from '@/vendor/libs/perfect-scrollbar/PerfectScrollbar'
|
import draggerBox from './components/draggerBox'
|
import { findInArrJson } from '@/components/common/util.js'
|
export default {
|
name: 'mapDeviceAdd',
|
metaInfo: {
|
title: '设备地图添加'
|
},
|
data() {
|
return {
|
noneImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
userInfo: this.$store.getters.basicUserInfo,
|
form: {
|
deviceType: '',
|
authorizationSystem: '',
|
deviceName: ''
|
},
|
deviceTypeDicts: [],
|
sysDicts: [],
|
|
listType: '未描点', // '已描点'
|
deviceList: [],
|
activeCollapse: '',
|
|
/* 地图组件使用 */
|
mapInfo: null,
|
deviceArr: [],
|
mapLayerX: 0,
|
mapLayerY: 0,
|
mapLayerScale: 1,
|
|
saveLoading: false,
|
isEdit: false
|
}
|
},
|
computed: {
|
newSysDicts() {
|
return [{ value: '', lable: '全部' }, ...this.sysDicts]
|
},
|
newDeviceTypeDicts() {
|
return [{ value: '', lable: '全部' }, ...this.deviceTypeDicts]
|
},
|
newDeviceList() {
|
if (!this.deviceArr.length) {
|
return this.deviceList
|
}
|
let list = []
|
for (let iteam of this.deviceList) {
|
if (iteam.dataList.length) {
|
let arr = []
|
for (let val of iteam.dataList) {
|
/* 是否在地图数组中 */
|
if (val.id && !this.isMapHas(val.id)) {
|
arr.push(val)
|
}
|
}
|
if (arr.length) {
|
let json = {}
|
json.deviceType = iteam.deviceType
|
json.deviceTypeName = iteam.deviceTypeName
|
json.dataList = arr
|
list.push(json)
|
}
|
}
|
}
|
return list
|
}
|
},
|
methods: {
|
/* 查询系统字典 */
|
async getSysDicts() {
|
let res = await getSysListWithHome({
|
orgId: this.userInfo.orgId,
|
userId: this.userInfo.id,
|
tags: 'device'
|
})
|
if (res && !res.error) {
|
this.sysDicts = res
|
}
|
},
|
/* 查询设备字典 */
|
async getDeviceTypeDicts() {
|
let res = await getGloDicts({
|
type: 'DEVICE_TYPE'
|
})
|
if (res && res.data) {
|
this.deviceTypeDicts = res.data
|
}
|
},
|
/* 查询地图详情 */
|
async getMapInfo(id) {
|
let res = await getMapInfo({
|
orgId: this.userInfo.orgId,
|
id
|
})
|
if (res && !res.error) {
|
this.mapInfo = res
|
/* 回显地图 */
|
this.getMapDeviceInfo(this.$route.query.id)
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '地图加载失败：' + res.message ? res.message : ''
|
})
|
}
|
},
|
/* 获取未描点设备 */
|
async getNoDrawPointList() {
|
let res = await getNoDrawPointList({
|
orgId: this.userInfo.orgId,
|
...this.form
|
})
|
if (res && !res.error) {
|
this.deviceList = res
|
}
|
},
|
/* 获取已描点设备 */
|
async getDrawPointList() {
|
let res = await getDrawPointList({
|
orgId: this.userInfo.orgId,
|
...this.form
|
})
|
if (res && !res.error) {
|
this.deviceList = res
|
}
|
},
|
|
/* 获取设备信息 */
|
async getMapDeviceInfo(id) {
|
let res = await getMapDeviceInfo({
|
orgId: this.userInfo.orgId,
|
mapId: id
|
})
|
if (res) {
|
this.deviceArr = res
|
}
|
},
|
async saveMapDevice(json) {
|
let res = await saveMapDevice(json)
|
if (res && !res.error) {
|
this.saveLoading = false
|
this.$toast({
|
type: 'success',
|
message: '保存成功'
|
})
|
this.$router.push({ path: '/mapdevice' })
|
}
|
},
|
|
/* 初始化列表 */
|
_initDeviceList() {
|
if (this.listType === '未描点') {
|
this.getNoDrawPointList()
|
}
|
if (this.listType === '已描点') {
|
this.getDrawPointList()
|
}
|
},
|
saveDevice(evt) {
|
evt.preventDefault()
|
/* 校验拦截 start */
|
if (!this.$route.query.id) {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，缺少重要参数，无法保存',
|
text: '地图id是重要参数'
|
})
|
return false
|
}
|
if (this.deviceArr.length === 0) {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，设备地图为空，无法保存',
|
text: '必须在地图中添加设备，才能保存'
|
})
|
return false
|
}
|
/* 处理保存数据 */
|
let detailList = this.deviceArr.map(iteam => {
|
let icon = {}
|
icon.deviceId = iteam.id
|
icon.position = iteam.position
|
return icon
|
})
|
let json = {
|
orgId: this.userInfo.orgId,
|
id: this.$route.query.id,
|
detailList
|
}
|
this.saveLoading = true
|
this.saveMapDevice(json)
|
},
|
|
/* 地图操作 start */
|
isMapHas(id) {
|
for (let iteam of this.deviceArr) {
|
if (iteam.id === id) {
|
return true
|
}
|
}
|
return false
|
},
|
// 地图 添加设备
|
addMapIconIteam({ x, y, data, index, tags }) {
|
/* 默认返回的x,y为画板坐标 */
|
let json = {}
|
// 坐标转换
|
let deviceX = (x - this.mapLayerX) / this.mapLayerScale
|
let deviceY = (y - this.mapLayerY) / this.mapLayerScale
|
json = data
|
json.position = JSON.stringify({ x: deviceX, y: deviceY })
|
json.icon = data.icon
|
json.id = data.id
|
|
if (findInArrJson(data.id, this.deviceArr, 'id')) {
|
this.deviceArr = [...this.deviceArr, json]
|
}
|
},
|
// 地图 设备移动
|
iconIteamDrag({ x, y, data }) {
|
let deviceArr = this.deviceArr.map(iteam => {
|
if (iteam.id === data.id) {
|
iteam.position = JSON.stringify({ x, y })
|
}
|
return iteam
|
})
|
this.deviceArr = deviceArr
|
},
|
// 地图 设备删除
|
iconIteamDel({ id, data }) {
|
this.$swal(
|
{
|
title: '确定删除吗？',
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定删除！',
|
cancelButtonText: '取消删除！',
|
closeOnConfirm: true
|
},
|
() => {
|
/* 删除函数 start */
|
let deviceArr = []
|
this.deviceArr.map(iteam => {
|
if (iteam.id !== id) {
|
deviceArr.push(iteam)
|
}
|
})
|
this.deviceArr = deviceArr
|
/* 删除函数 end */
|
setTimeout(() => {
|
this.$toast({
|
type: 'success',
|
message: '删除成功'
|
})
|
}, 500)
|
}
|
)
|
}
|
/* 地图操作 end */
|
},
|
created() {
|
/* 查询字典 */
|
this.getSysDicts()
|
this.getDeviceTypeDicts()
|
/* 查询描点设备 */
|
// this._initDeviceList() 不知哪里已经触发一次
|
/* 初始化 */
|
if (this.$route.query.id && this.$route.query.type === 'edit') {
|
this.isEdit = true
|
}
|
if (this.$route.query.id && this.$route.query.id !== '') {
|
this.getMapInfo(this.$route.query.id)
|
}
|
},
|
mounted() {
|
/* 强制管理侧边栏 */
|
this.layoutHelpers.setCollapsed(true, false)
|
},
|
components: {
|
svgDIYMapModelEdit,
|
LaddaBtn,
|
draggerBox,
|
elCollapse: Collapse,
|
elCollapseItem: CollapseItem,
|
PerfectScrollbar
|
}
|
}
|
</script>
|
<style lang="scss">
|
.verticalTabs {
|
position: absolute;
|
height: 100%;
|
width: 30px;
|
right: 3px;
|
top: 0;
|
}
|
.verticalTabs ul,
|
.verticalTabs ul li {
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
a {
|
display: inline-block;
|
font-size: 14px;
|
line-height: 16px;
|
padding: 10px 5px;
|
width: 30px;
|
border: 1px solid #f1f2f2;
|
border-radius: 0 5px 5px 0;
|
overflow: hidden;
|
text-align: center;
|
transition-delay: all 1s;
|
|
background: rgba(24, 28, 33, 0.06);
|
color: #a3a4a6;
|
}
|
}
|
.verticalTabs ul li.active {
|
a {
|
background: #fff;
|
color: #4e5155;
|
border-left: 0;
|
}
|
}
|
.dragger-li {
|
min-width: 150px;
|
background: #fff;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
.img-icon {
|
width: 30px;
|
height: 30px;
|
background-image: url('/static/assets/img/noneImg.png');
|
background-size: cover;
|
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
.dragger-content {
|
line-height: 30px;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
}
|
.cursor-move {
|
cursor: move;
|
}
|
</style>
|
