Skip to content

Z
zhxf_vue
Commit 0d415dc6 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

tj

parent 92f4158d
Hide whitespace changes
Inline Side-by-side
Showing with 1833 additions and 5751 deletions
src/pages/sys/point/07-24.vue deleted 100644 → 0
View file @ 92f4158d
<template lang="pug">
div( onselectstart="return false;" @mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup")
<div class="top_button" style="width:100%;height:40px; padding-top:3px">
<div style="float:left;">
<div :class="item.value" name="iconListNow" :title="item.name" :style="{cursor:editable?'move':''}" :id="item.id" v-for="item in typeList" ></div>
</div>
<div style="float:right; margin-top:6px;">
//- <el-tooltip class="item" effect="dark" :content="editable?'禁用':'启用'" placement="bottom">
//- <el-button :type="editable?'info':'primary'" size='mini' style="margin-right:10px;" icon="el-icon-edit" circle @click="changeEditable"></el-button>
//- </el-tooltip>
<el-button type="primary" size='mini' style="margin-right:10px;" @click="changeEditable" v-if="!editable">编辑</el-button>
//- <el-button type="primary" size='mini' style="margin-right:10px;" :disabled='!editable' @click="clickAdd">添加新图标</el-button>
<el-button type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" v-if="editable">保存</el-button>
</div>
</div>
<div style="clear:both"></div>
el-container( style='padding-left:0px;')
el-aside(width='300px' style='height:85vh')
el-card.treeCard(style='height:730px;background:#f4f4f4;')
div(class="monitor_point_left_top")
div.title-bold(slot='header' class="monitor_point_left_topL") 资源列表
div(class="monitor_point_left_topR")
el-input(suffix-icon="el-icon-search" size='mini' placeholder="" v-model="searchInput" clearable)
//- el-tree(style='background:#f4f4f4;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
el-tree.dic_tree(style='background:#f4f4f4;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
<span class="custom-tree-node" style='width:100%;line-height: 18px;' slot-scope="{ node, data }">
<span v-if="node.data.level == 3" class="el-icon-zhandian"></span>
<span v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1"></span>
<span v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon"></span>
<span v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin"></span>
<span v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi"></span>
<span v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing"></span>
<span v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha"></span>
<span v-if="node.data.level == 6 " :class="node.data.icon+'7'"></span>
<span>&nbsp;{{node.label}}</span>
</span>
//- div(slot-scope="{ node, data }" )
//- div.dic_tree_header(v-if="treeData.children&&treeData.children.length>0" )
//- div.tree_house
//- //- img(src='../../../assets/images/road_train.png')
//- //- span {{data.name}}
//- span(v-else )
//- div.tree_point
//- img(src='../../../assets/images/treeQiang.png')
//- span.tree_label &nbsp; {{ node.label }}
el-main(style="padding:0px;")
el-card.tableCard
div(slot='header' ref="sprtDom" )
el-row(:span="24")
el-col(:md='12' :sm="5" class='tier-btn')
el-button(type="primary" size='mini' plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin:6px 10px 0 0; " v-for="item in mapList" :key='item.id' @click="changeMap(item)") {{item.name}}
el-col(:md='12' :sm="5")
<div style="float:right;">
<div :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)"></div>
</div>
el-row(style="padding-bottom:15px;height:68vh" ,:span="24")
el-col(class="resource-container" :style="obj" ref="drag")
img(style="width:100%;pointer-events:none" :src="stationMap.readPath")
span(:class="{'span-box':true}" v-for="item in list" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" disabled :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0}" v-drag)
<span v-if="item.active" :class="item.icon+'6'"></span>
<span v-if="!item.active" :class="item.icon+'5'"></span>
// 弹窗, 新增 / 修改
add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', @refreshdatalist='updateList')
query-detail(v-if='queryDetailVisible', ref='queryDetail')
<span :class="spanDragData.name" v-if="spanDragData.show" :style="{left:spanDragData.x+'px',top:spanDragData.y+'px',position:'fixed'}"></span>
</template>
<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
let that
export default {
data() {
return {
drawer: false,
isCollapse: true,
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
queryDetailVisible: false,
treeData: [],
defaultExpandedKeys: [],
defaultProps: {
children: 'children',
label: 'name',
level: 'level'
},
nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
resource: {}, //当前选择的资源点
typeList: [],
checkedData: {
lineId: '',
lineName: '',
stationId: '',
stationName: '',
subCode: '',
subSystem: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId')
},
currentNode: {},
dragAble: false,
list: [],
searchInput: '',
obj: 'pointer-events:none',
editable: false,
clickItem: {},
iconNameListBottom: [],
spanDragData: {
x: 0,
y: 0,
show: false,
name: ''
},
spanDragListNow: {},
mousemoveStatus: false
}
},
components: {
AddOrUpdate,
QueryDetail
},
watch: {
searchInput(val) {
this.$refs.tree.filter(val)
}
},
created() {
that = this
this.initTree()
this.initResourceTypeDicList()
// this.getDataList()
},
methods: {
//新建资源点对象
getNewBox(item, x, y) {
return {
id: '',
key: getUUID(),
level: 6,
name: '新建资源点',
password: '',
port: '',
remark: '',
lineId: this.checkedData.lineId,
lineName: this.checkedData.lineName,
stationId: this.checkedData.stationId,
stationName: this.checkedData.stationName,
subCode: this.checkedData.subCode,
subSystem: this.checkedData.subSystem,
tierId: this.checkedData.tierId,
tierName: this.checkedData.tierName,
type: item.id,
icon: item.value,
iconPath: '',
username: 'admin',
xpoint: x || '100',
ypoint: y || '100'
}
},
// 树节点过滤
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
initTree() {
// console.log('stationId：', this.checkedData.sId)
this.$http({
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
}).then(data => {
if (data && data.code === 0) {
this.treeData = data.tree
if (!this.checkedData.sId) {
this.defaultExpandedKeys = [this.treeData[0].children[0].id]
//设置选中的节点
// this.$refs.tree.setChecked(this.treeData[0].children[0].id)
this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
}
// console.log('初始化线路树：', this.treeData)
this.initStation(this.treeData[0].id, null)
}
})
},
//初始化站点下的资源点
initTreeStationMap(node, flag) {
this.$http({
url: this.$http.adornUrl('/liResource/getStationMapTreeList'),
method: 'post',
data: {
stationId: node.id
}
})
.then(data => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$refs.tree.updateKeyChildren(node.id, data.nodes)
}
})
.then(() => {
if (this.checkedData.sId && flag) {
this.defaultExpandedKeys = [this.treeData[0].children[0].id]
//设置选中的节点
// console.log('默认选中节点', this.treeData[0].children[0])
this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
// console.log('this', this)
}
this.initStation(node.id, null)
})
},
initTreeResource(node) {
let data = {
lineId: this.checkedData.lineId,
stationId: this.checkedData.stationId,
tierId: this.checkedData.tierId,
subCode: this.checkedData.subCode
}
// console.log('初始化线路树请求参数：', data)
this.$http({
url: this.$http.adornUrl('/liResource/getResourceTreeList'),
method: 'post',
data: data
}).then(data => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$refs.tree.updateKeyChildren(node.id, data.nodes)
}
})
},
initStation(id, res) {
// console.log('初始化站点id：', id)
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
params: this.$http.adornParams()
})
.then(data => {
if (data && data.code === 0) {
this.station = data.bean
this.mapList = data.bean.mapList
this.checkedData.lineId = this.station.lineId
this.checkedData.lineName = this.station.lineName
this.checkedData.stationId = this.station.id
this.checkedData.stationName = this.station.stationName
if (res) {
this.mapList.forEach(e => {
if (res.tierId === e.id) {
this.checkedData.tierId = e.id
this.checkedData.tierName = e.name
this.stationMap = e
}
})
} else {
this.checkedData.tierId = this.mapList[0].id
this.checkedData.tierName = this.mapList[0].name
this.stationMap = this.mapList[0]
}
// console.log('站点地图：', this.mapList)
}
})
.then(() => {
this.showResourceByMapId(null)
})
},
//线路资源点树节点点击事件
handleNodeClick(node) {
// console.log('选中树节点', node)
this.currentNode = node
let level = node.level
let name = node.name
let id = node.id
let code = node.code
//每次选择节点都先清空资源位
// if (level !== 6) {
// this.list = []
// }
if (level === 2) {
//线路
this.checkedData.lineId = id
this.checkedData.lineName = name
} else if (level === 3) {
//站点
this.checkedData.stationId = id
this.checkedData.stationName = name
// this.initTreeStationMap(node)
} else if (level === 4) {
//层级
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
this.stationMap = node
// console.log('选中节点的层级id', this.tierId)
this.showResourceByMapId(null)
} else if (level === 5) {
//子系统
this.checkedData.subCode = code
this.checkedData.subSystem = name
this.checkedData.stationId = node.stationId
this.checkedData.tierId = node.tierId
// this.initTreeResource(node)
this.list = JSON.parse(JSON.stringify(node.children))
} else if (level === 6) {
//资源点
this.checkedData.resourceId = id
this.activeChooseResourceBox(id)
// console.log('资源点列表：', this.list)
}
this.iconNameListBottom.forEach(res => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
},
//激活选中资源点位节点
activeChooseResourceBox(id) {
this.list.forEach((res, index) => {
if (res.id === id) {
res.active = true
// console.log('激活的资源点：', res.name, res.active, res.id, index)
} else {
res.active = false
}
})
this.$forceUpdate()
// console.log('资源点列表：', this.list)
},
//切换层级
changeMap(map) {
// console.log('选择的层级', map)
this.currentNode = this.$refs.tree.getNode(map.id).data
// console.log('当前要选中的节点', this.currentNode)
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
this.defaultExpandedKeys = [this.currentNode.id]
// console.log('当前要选中的节点2', this.currentNode)
this.checkedData.tierId = map.id
this.checkedData.tierName = map.name
let stationNode = this.$refs.tree.getNode(map.stationId).data
// console.log('当前要选中的站点', stationNode)
this.checkedData.stationId = stationNode.id
this.checkedData.stationName = stationNode.name
this.stationMap = map
this.iconNameListBottom.forEach(res => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
this.showResourceByMapId(null)
},
//根据层级id展示当前层级所有的资源点
showResourceByMapId(item) {
let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
// console.log('当前要选中的层级节点', tierNode.children)
this.list = []
tierNode.children.forEach(subSystem => {
subSystem.children.forEach(res => {
if (item === null || (item != null && item.id === res.type)) {
this.list.push(res)
}
})
})
// console.log(this.list, '++++++')
},
updateList(res) {
this.$http({
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
}).then(data => {
if (data && data.code === 0) {
this.treeData = data.tree
if (!this.checkedData.sId) {
this.defaultExpandedKeys = [res.tierId]
//设置选中的节点
// this.$refs.tree.setChecked(this.treeData[0].children[0].id)
this.treeData.forEach(e => {
if (res.stationId === e.id) {
e.children.forEach(el => {
if (el.id === res.tierId) {
this.$refs.tree.setCurrentNode(el)
}
})
}
})
}
// console.log('初始化线路树：', this.treeData)
//console.log(res)
this.initStation(res.stationId, res)
}
})
},
//保存当前页面上的资源点位置
saveResourceList() {
// console.log('当前页面资源点位置：', this.list)
this.$http({
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: this.list
}).then(data => {
// console.log(data)
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.initTree()
this.changeEditable()
}
})
} else {
this.$message.error(data.msg)
}
})
},
// 详情
// queryDetail (id) {
// this.queryDetailVisible = true
// this.$nextTick(() => {
// this.$refs.queryDetail.init(id)
// })
// },
// 新增 / 修改
addOrUpdateHandle(id, x, y) {
// console.log('addOrUpdateHandle:', id, x, y)
this.addOrUpdateVisible = true
this.list.forEach(res => {
if (res.id === id) {
this.resource = res
}
})
// console.log('this.checkedData', this.checkedData)
this.$nextTick(() => {
this.$refs.addOrUpdate.init(
id,
x,
y,
JSON.parse(JSON.stringify(this.resource))
)
})
},
// 移动资源位坐标
changeResourceLocation(id, x, y) {
// console.log('changeResourceLocation:', id, x, y)
this.list.forEach(res => {
if (res.id === id) {
// console.log('移动坐标1：', res.name, res.xpoint, res.ypoint)
res.xpoint = x
res.ypoint = y
// console.log('移动坐标2：', res.name, res.xpoint, res.ypoint)
}
})
},
// 删除
deleteHandle(id) {
// console.log('dataListSelections:', this.dataListSelections)
var ids = id
? [id]
: this.dataListSelections.map(item => {
return item.id
})
// console.log('ids:', ids)
this.$confirm(`确认删除资源点?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
this.$http({
url: this.$http.adornUrl('/liResource/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(data => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
// this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
},
clickAdd() {
// var box = document.getElementById('drag')
// let box = this.$refs.drag
// console.log(box)
this.list.push(this.getNewBox())
// console.log('this.list:', this.list)
},
changeEditable() {
this.editable = !this.editable
//设置是否启动拖动
if (!this.editable) {
//关
this.obj = 'pointer-events:none'
} else {
//开
this.obj = 'pointer-events:initial'
}
// console.log(this.editable)
// console.log(this.obj)
},
statusClick(item) {
//icon状态切换
if (!this.editable) {
return
}
item.value = item.value + '2'
this.typeList.forEach(res => {
if (item.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
res.value = res.value.substring(0, res.value.length - 1)
}
}
})
},
regionMousedown(e) {
if (!this.editable) {
return
}
if (
e.path[0].attributes.name &&
e.path[0].attributes.name.nodeValue != 'iconListNow'
) {
return
}
this.typeList.forEach(res => {
if (e.path[0].id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
res.value = res.value.substring(0, res.value.length - 1)
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
return
}
res.value = res.value + '2'
this.spanDragData.name = res.value
this.spanDragListNow = res
this.mousemoveStatus = true
}
})
},
regionMousemove(e) {
if (this.mousemoveStatus) {
this.spanDragData.x = e.clientX - 24
this.spanDragData.y = e.clientY - 106
this.spanDragData.show = true
console.log(this.spanDragData)
console.log('x' + e.clientX)
console.log('y' + e.clientY)
}
},
regionMouseup(e) {
this.mousemoveStatus = false
this.typeList.forEach(res => {
if (res.value.substring(res.value.length - 1, res.value.length) == 2) {
res.value = res.value.substring(0, res.value.length - 1)
}
})
if (e.clientX > 330 && e.clientY > 260) {
this.list.push(
this.getNewBox(
this.spanDragListNow,
this.spanDragData.x - 330,
this.spanDragData.y - 180
)
)
}
this.spanDragData.x = 0
this.spanDragData.y = 0
this.spanDragData.show = false
this.spanDragData.name = ''
},
iconClick(item) {
this.iconNameListBottom.forEach(res => {
if (res.id === item.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) != 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '4'
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
this.showResourceByMapId(item)
this.clickItem = item
},
initResourceTypeDicList() {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.typeList = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom.forEach(res => {
res.value += '3'
})
}
})
}
},
directives: {
//拖拽&&缩放指令
drag: {
bind: (el, binding) => {
// console.log(el)
// console.log('binding:', binding)
// console.log(binding.value)
//绑定默认样式
el.style.zIndex = 9
el.style.opacity = 1
// el.style.backgroundColor = 'rgba(0,0,0,1)'
//如果为编辑状态
if (binding.value || binding.value === undefined) {
//定义该元素的 top left width height
let x, y, w, h
//鼠标的起始和结束坐标
let cx_start, cy_start, cx_end, cy_end;
//鼠标双击弹出信息框
(el.ondblclick = e => {
// alert('新增/编辑信息弹出框')
// console.log('el', el)
// console.log('that', that)
//编辑资源位信息
that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
}),
//判断鼠标样式
(el.onmousemove = e => {
that.activeChooseResourceBox(el.id)
//获取鼠标当前位置
let cx_now = e.clientX
let cy_now = e.clientY
//获取div右下角相对浏览器的位置
let {
top: el_top,
left: el_left
// width: el_width,
// height: el_height
} = el.getBoundingClientRect()
// let el_bottom_height = el_top + el_height;
// let el_right_width = el_left + el_width;
//判断鼠标是否在div下边界
// let mouse_in_bottom =
// cy_now <= el_bottom_height + 5 && cy_now >= el_bottom_height - 5;
//判断鼠标是否在div右边界
// let mouse_in_right =
// cx_now <= el_right_width + 5 && cx_now >= el_right_width - 5;
// if (mouse_in_bottom && mouse_in_right) {
// el.style.cursor = "se-resize";
// } else if (mouse_in_right) {
// el.style.cursor = "e-resize";
// } else if (mouse_in_bottom) {
// el.style.cursor = "s-resize";
// } else {
el.style.cursor = 'move'
// }
})
el.onmousedown = e => {
//div1 所有图标，去除选中颜色，当前选中给予选中颜色边框
// var divs = document.getElementsByClassName('div1')
// let boxs = this.$refs.drag
// for (var i = 0; divs.length > i; i++) {
// divs[i].style.border = '0'
// }
//当前选中给予选中颜色边框
// el.style.border = '1px solid red'
// console.log(divs)
//border: 1px solid red;
let mouse = el.style.cursor
//更改默认样式
// el.style.backgroundColor = 'rgba(0,0,0,.5)'
el.style.opacity = 0.5
el.style.zIndex = 99
//对象解构赋值
let {
left: el_x,
top: el_y,
width: el_w,
height: el_h
} = window.getComputedStyle(el)
// let { left: el_x, top: el_y } = window.getComputedStyle(el);
x = el_x
y = el_y
w = el_w
h = el_h
// console.log(x, y, w, h)
cx_start = e.clientX
cy_start = e.clientY
//绑定移动事件
document.onmousemove = e => {
cx_end = e.clientX
cy_end = e.clientY
//默认左下方向配置
let x_move = cx_end - cx_start
let y_move = cy_end - cy_start
let direct = ['width', 'height']
let pos = [w, h]
let move = [x_move, y_move]
let limit = 50
//判断鼠标的类型进行对应的操作
switch (mouse) {
// case "e-resize":
// direct = ["width"];
// pos = [w];
// move = [x_move];
// break;
// case "s-resize":
// direct = ["height"];
// pos = [h];
// move = [y_move];
// break;
case 'move':
direct = ['left', 'top']
pos = [x, y]
limit = 0
break
}
handle_div(direct, pos, move, limit)
}
//取消移动事件
document.onmouseup = e => {
//还原默认样式
el.style.zIndex = 9
// el.style.backgroundColor = 'rgba(0,0,0,1)'
el.style.opacity = 1
document.onmousemove = null
//移动结束后弹出修改弹窗
// that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
}
/**
* 操作DOM位置和大小方法
* @param direct 方向
* @param pos 尺寸/坐标
* @param move 拖动距离
* @param limit 限定范围
*/
function handle_div(direct, pos, move, limit) {
that.changeResourceLocation(
el.id,
parseInt(pos[0]) + parseInt(move[0]),
parseInt(pos[1]) + parseInt(move[1])
)
for (let i = 0; i < direct.length; i++) {
let val = parseInt(pos[i]) + move[i]
val = val <= limit ? limit : val
el.style[direct[i]] = val + 'px'
}
}
}
} else {
el.style.cursor = 'default'
//移除点击事件
el.onmousedown = null
el.onmousemove = null
}
}
}
}
}
</script>
<style lang='scss' scoped>
.tree_house {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 20px;
height: 20px;
vertical-align: middle;
// transform: translateY(-8px);
transform: translateX(-40px);
}
}
.tree_point {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 15px;
height: 15px;
vertical-align: middle;
transform: translateY(-2px);
}
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
.span-box {
height: 30px;
width: 30px;
font-size: 12px;
border-radius: 5px;
/* border: 1px solid red; */
position: absolute;
// left: 0;
// top: 0;
.span-img {
width: 100%;
height: 100%;
border-radius: 5px;
}
}
.active {
background-color: #fd949d;
height: 40px;
width: 40px;
}
}
.tier-btn {
.active-tier {
background-color: #409eff;
color: #ffffff;
}
}
.monitor_point_left_top {
height: 42px;
background: #e1edf4;
padding-left: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.monitor_point_left_topL {
height: 40px;
padding-top: 10px;
float: left;
div {
height: 40px;
float: left;
padding: 0 10px 0 10px;
line-height: 40px;
cursor: pointer;
font-family: Microsoft YaHei;
font-size: 14px;
span {
color: #35aff8;
}
}
div.on {
background: #fff;
border: 1px solid #c3c3c3;
border-bottom: none;
font-family: Microsoft YaHei;
font-weight: 400;
}
}
.monitor_point_left_topR {
// float: right;
margin-right: 20px;
// margin-top: 10px;
.el-input {
width: 109px;
}
/deep/ .el-input--mini .el-icon-search {
line-height: 28px;
color: #35aff8;
font-weight: bold;
}
}
}
.top_button {
background: url(~@/assets/images/sysiconbg.png);
}
</style>
src/pages/sys/point/index old.vue deleted 100644 → 0
View file @ 92f4158d
<template lang="pug">
div(onselectstart="return false;" @mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup")
div(class="top_button" style="width:100%;height:40px; padding-top:3px")
div(style="float:left;margin-left:16px;")
div(:class="item.value" name="iconListNow" :title="item.name" :style="{cursor:editable?'move':''}" :id="item.id" v-for="item in typeList")
div(style="float:right; margin-top:6px;")
//- <el-tooltip class="item" effect="dark" :content="editable?'禁用':'启用'" placement="bottom">
//- <el-button :type="editable?'info':'primary'" size='mini' style="margin-right:10px;" icon="el-icon-edit" circle @click="changeEditable"></el-button>
//- </el-tooltip>
el-button(type="primary" size='mini' style="margin-right:10px;" @click="changeEditable" v-if="!editable") 编辑
el-button(type="primary" size='mini' style="margin-right:10px;" @click="deleteHandle" v-if="editable" :disabled="delflag") 删除
//- <el-button type="primary" size='mini' style="margin-right:10px;" :disabled='!editable' @click="clickAdd">添加新图标</el-button>
el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" v-if="editable") 保存
div(style="clear:both")
el-container( style='padding-left:0px;')
el-aside(width="18vw" style='height:750px')
el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;')
div(class="monitor_point_left_top")
div.title-bold(slot='header' class="monitor_point_left_topL") 资源列表
div(class="monitor_point_left_topR")
el-input(suffix-icon="el-icon-search" size='mini' placeholder="" v-model="searchInput" clearable)
//- el-tree(style='background:#f4f4f4;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
el-tree.dic_tree( :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
span(class="custom-tree-node" style='width:90%;line-height: 18px;' slot-scope="{ node, data }")
span(v-if="node.data.level == 3" class="el-icon-zhandian xa-icon")
//- span(v-if="node.data.level == 3 && node.data.iconB" class="el-icon-wq-treeIcon1")
span(v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon")
span(v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha xa-icon")
span(v-if="node.data.level == 6 " :class="node.data.icon+'7'" class='xa-icon')
<span style="position: relative;" >&nbsp;{{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
el-main(style="padding:0px;")
el-card.tableCard
div(slot='header' ref="sprtDom" )
el-row(:span="24")
el-col(:md='12' :sm="5" class='tier-btn')
el-button(type="primary" size='mini' plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin:6px 10px 0 0; " v-for="item in mapList" :key='item.id' @click="changeMap(item)") {{item.name}}
el-col(:md='12' :sm="5")
div(style="float:right;")
div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)")
el-row(style="padding-bottom:15px;height:680px" ,:span="24")
//- el-col(class="resource-container" :style="obj" ref="drag")
el-col(class="resource-container" ref="drag")
img(style="width:100%;pointer-events:none" :src="stationMap?stationMap.readPath:''")
div(:class="{'span-box':true}" v-if='!isDone' v-for="item in list" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" @click="queryDetail(item)" :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0}")
span(v-if="item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'6'")
span(v-if="!item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'5'")
//- div(v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div( class='line_warp' v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')" )
div(class='point_left' :class="item.icon+'6'")
div( ref='line' :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'6'")
//- div(v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')" :style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
div( class='line_warp' v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')" )
div(class='point_left' :class="item.icon+'5'")
div(:style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'5'" )
div(:class="{'span-box':true}" v-if='isDone' v-for="item in list" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" disabled :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0}" v-drag)
span(v-if="item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'6'")
span(v-if="!item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'5'")
//- 选中时
div( class='line_warp' v-if="item.active && item.name === '振动光纤'" ref='lineWarp' )
div(class='point_left' :class="item.icon+'6'")
div( ref='line' @mousewheel="handwheel($event,item)" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'6'" )
div( class='line_warp' v-if="item.active && item.name === '红外对射'" ref='lineWarp' )
div(class='point_left' :class="item.icon+'6'")
div( ref='line' @mousewheel="handwheel($event,item)" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'6'" )
//- 未被选中时
//- 振动光纤
div( class='line_warp' v-if="!item.active && item.name === '振动光纤' " )
div(class='point_left' :class="item.icon+'5'")
div(:style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'5'")
//- 红外对射
div( class='line_warp' v-if="!item.active && item.name === '红外对射' " )
div(class='point_left' :class="item.icon+'5'")
div(:style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'5'")
el-col()
// 弹窗, 新增 / 修改
add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', @refreshdatalist='updateList')
query-detail(v-if='queryDetailVisible', ref='queryDetail')
span(:class="spanDragData.name" v-if="spanDragData.show" :style="{left:spanDragData.x+'px',top:spanDragData.y+'px',position:'fixed'}")
</template>
<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'
let that
export default {
data() {
return {
hwId: [],
gxRotate: '',
ssId: '',
isDone: false,
drawer: false,
isCollapse: true,
delflag: true,
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
queryDetailVisible: false,
treeData: [],
systemList: [],
defaultExpandedKeys: [],
defaultProps: {
children: 'children',
label: 'name',
level: 'level'
},
nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
resource: {}, //当前选择的资源点
typeList: [],
checkedData: {
lineId: '',
lineName: '',
stationId: '',
stationName: '',
subCode: '',
subSystem: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId')
},
currentNode: {},
dragAble: false,
list: [],
searchInput: '',
obj: 'pointer-events:none',
editable: false,
clickItem: {},
iconNameListBottom: [],
spanDragData: {
x: 0,
y: 0,
show: false,
name: ''
},
spanDragListNow: {},
mousemoveStatus: false
}
},
components: {
AddOrUpdate,
QueryDetail
},
watch: {
searchInput(val) {
this.$refs.tree.filter(val)
}
},
created() {
that = this
this.initTree()
this.initResourceTypeDicList()
this.initSubSystemDicList()
// this.getDataList()
},
methods: {
handRotate(id) {
this.hwId.push(id)
},
handwheel(e, item) {
let str = e.wheelDelta
if (str < 0) {
// 下滚动 100
item.width = parseInt(item.width) - 10
if (item.width <= 40) {
item.width = 40
}
console.log(item.width)
}
if (str > 0) {
// 上滚动 -100
item.width = parseInt(item.width) + 10
if (item.width >= 600) {
item.width = 600
}
console.log(item.width)
}
},
//新建资源点对象
getNewBox(item, x, y) {
return {
id: '',
key: getUUID(),
level: 6,
name: item.name,
password: '',
port: '',
remark: '',
lineId: this.checkedData.lineId,
lineName: this.checkedData.lineName,
stationId: this.checkedData.stationId,
stationName: this.checkedData.stationName,
subCode: this.checkedData.subCode,
subSystem: this.checkedData.subSystem,
tierId: this.checkedData.tierId,
tierName: this.checkedData.tierName,
type: item.id,
icon: item.value,
iconPath: '',
username: 'admin',
xpoint: x || '100',
ypoint: y || '100',
width: 200
}
},
// 树节点过滤
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
initTree() {
// console.log('stationId：', this.checkedData.sId)
this.$http({
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
}).then(data => {
if (data && data.code === 0) {
this.treeData = data.tree
if (!this.checkedData.sId) {
Vue.set(this.treeData[0].children[0], 'iconB', true)
// this.defaultExpandedKeys = [this.treeData[0].children[0].id]
//设置选中的节点
// this.$refs.tree.setChecked(this.treeData[0].children[0].id)
this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
}
// this.$refs.tree.setCurrentNode(this.treeData[0].children[0].id)
// this.isFlag(this.treeData, this.treeData[0].children[0].id)
this.$nextTick(() => {
console.log('this.treeData', this.treeData)
this.currentNode = this.$refs.tree.getNode(this.treeData[0].children[0].id).data
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
})
// console.log('初始化线路树：', this.treeData)
this.initStation(this.treeData[0].id, null, 1)
// console.log(this.treeData)
}
})
},
//初始化站点下的资源点
// initTreeStationMap (node, flag) {
// this.$http({
// url: this.$http.adornUrl('/liResource/getStationMapTreeList'),
// method: 'post',
// data: {
// stationId: node.id
// }
// })
// .then(data => {
// // console.log('初始化线路树：', data.nodes)
// if (data && data.code === 0) {
// this.$refs.tree.updateKeyChildren(node.id, data.nodes)
// }
// })
// .then(() => {
// if (this.checkedData.sId && flag) {
// this.defaultExpandedKeys = [this.treeData[0].children[0].id]
// //设置选中的节点
// // console.log('默认选中节点', this.treeData[0].children[0])
// this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
// // console.log('this', this)
// }
// this.initStation(node.id, null, 1)
// })
// },
initTreeResource(node) {
let data = {
lineId: this.checkedData.lineId,
stationId: this.checkedData.stationId,
tierId: this.checkedData.tierId,
subCode: this.checkedData.subCode
}
// console.log('初始化线路树请求参数：', data)
this.$http({
url: this.$http.adornUrl('/liResource/getResourceTreeList'),
method: 'post',
data: data
}).then(data => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$refs.tree.updateKeyChildren(node.id, data.nodes)
}
})
},
initStation(id, res, subId) {
// console.log('初始化站点id：', id)
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
params: this.$http.adornParams()
})
.then(data => {
if (data && data.code === 0) {
this.station = data.bean
this.mapList = data.bean.mapList
this.checkedData.lineId = this.station.lineId
this.checkedData.lineName = this.station.lineName
this.checkedData.stationId = this.station.id
this.checkedData.stationName = this.station.stationName
// this.checkedData.tierId = this.mapList[0].id
// this.isFlag(this.treeData, this.checkedData.tierId)
// this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
// this.defaultExpandedKeys = [this.checkedData.tierId]
if (res) {
this.mapList.forEach(e => {
if (res.tierId === e.id) {
this.checkedData.tierId = e.id
this.checkedData.tierName = e.name
this.stationMap = e
}
})
} else {
this.checkedData.tierId = this.mapList[0].id
this.checkedData.tierName = this.mapList[0].name
this.stationMap = this.mapList[0]
}
// console.log('站点地图：', this.mapList)
}
})
.then(() => {
if (subId === 1) {
this.showResourceByMapId(null)
} else {
this.showResourceByParentId(subId)
}
})
},
isFlag(data, id) {
data.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
if (res.children) {
this.isFlag(res.children, id)
}
})
},
//线路资源点树节点点击事件
handleNodeClick(node) {
// console.log('node.id', node.id)
// console.log('选中树节点', node)
this.currentNode = node
let level = node.level
let name = node.name
let id = node.id
let code = node.code
this.isFlag(this.treeData, id)
// this.treeData.forEach(res => {
// if (res.id === id) {
// Vue.set(res, 'iconB', true)
// } else {
// Vue.set(res, 'iconB', false)
// }
// })
//每次选择节点都先清空资源位
// if (level !== 6) {
// this.list = []
// }
if (level === 2) {
//线路
this.checkedData.lineId = id
this.checkedData.lineName = name
} else if (level === 3) {
//站点
this.checkedData.stationId = id
this.checkedData.stationName = name
// this.initTreeStationMap(node)
} else if (level === 4) {
//层级
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
this.stationMap = node
// console.log('选中节点的层级id', this.tierId)
this.showResourceByMapId(null)
} else if (level === 5) {
//子系统
this.checkedData.subCode = code
this.checkedData.subSystem = name
this.checkedData.stationId = node.stationId
this.checkedData.tierId = node.tierId
this.mapList.forEach(element => {
if (element.id === node.tierId) {
this.stationMap = element
return false
}
})
// this.initTreeResource(node)
this.list = JSON.parse(JSON.stringify(node.children))
// console.log('资源点列表：', this.list)
this.list.forEach(res => {
Vue.set(res, 'active', false)
})
} else if (level === 6) {
var sysId = ''
this.systemList.forEach(element => {
if (node.subCode === element.value) {
sysId = element.id
}
})
//资源点
let subNode = this.$refs.tree.getNode(node.tierId + sysId).data
console.log('当前要选中的层级节点', subNode)
this.list = []
subNode.children.forEach(res => {
this.list.push(res)
})
this.list.forEach(res => {
Vue.set(res, 'active', false)
})
this.checkedData.resourceId = id
this.activeChooseResourceBox(id)
// console.log('资源点列表：', this.list)
}
this.iconNameListBottom.forEach(res => {
if (this.clickItem && res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
// this.clickItem = ''
},
//激活选中资源点位节点
activeChooseResourceBox(id) {
this.checkedData.resourceId = id
this.delflag = false
// console.log(this.checkedData.resourceId, '-------')
this.list.forEach((res, index) => {
if (res.id === id) {
res.active = true
// console.log('激活的资源点：', res.name, res.active, res.id, index)
} else {
res.active = false
}
})
this.$forceUpdate()
// console.log('资源点列表：', this.list)
},
//切换层级
changeMap(map) {
//console.log('选择的层级', map)
this.currentNode = this.$refs.tree.getNode(map.id).data
// console.log('当前要选中的节点', this.currentNode)
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
// console.log('当前要选中的节点2', this.currentNode)
this.checkedData.tierId = map.id
this.checkedData.tierName = map.name
let stationNode = this.$refs.tree.getNode(map.stationId).data
// console.log('当前要选中的站点', stationNode)
this.checkedData.stationId = stationNode.id
this.checkedData.stationName = stationNode.name
this.stationMap = map
this.iconNameListBottom.forEach(res => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
this.showResourceByMapId(null)
},
//根据层级id展示当前层级所有的资源点
showResourceByMapId(item) {
let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
// console.log('当前要选中的层级节点', tierNode.children)
this.list = []
tierNode.children.forEach(subSystem => {
subSystem.children.forEach(res => {
if (item === null || (item != null && item.id === res.type)) {
this.list.push(res)
}
})
})
this.list.forEach(res => {
Vue.set(res, 'active', false)
})
// console.log(this.list, '++++++')
},
//根据子系统id展示子系统id所有的资源点
showResourceByParentId(id) {
let node = this.$refs.tree.getNode(id).data
this.list = []
node.children.forEach(e => {
this.list.push(e)
})
},
updateList(res) {
this.$http({
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
})
.then(data => {
if (data && data.code === 0) {
this.treeData = data.tree
// if (!this.checkedData.sId) {
// this.defaultExpandedKeys = [res.tierId]
// this.isFlag(this.dataList, res.tierId)
//设置选中的节点
// this.$refs.tree.setChecked(this.treeData[0].children[0].id)
// } else {
// this.treeData.forEach(e => {
// if (res.stationId === e.id) {
// e.children.forEach(el => {
// if (el.id === res.tierId) {
// el.children.forEach(element => {
// if (element.subCode === res.subCode) {
// subId = element.id
// }
// })
// }
// })
// }
// })
// }
// console.log('初始化线路树：', this.treeData)
// console.log(res, '++++++++++')
}
})
.then(() => {
//console.log('初始化线路树：', this.treeData)
//console.log(res, '++++++++++')
var sysId = ''
this.systemList.forEach(element => {
if (res.subCode === element.value) {
sysId = element.id
}
})
var subId = ''
this.treeData.forEach(e => {
if (res.stationId === e.id) {
e.children.forEach(el => {
if (el.id === res.tierId) {
el.children.forEach(element => {
if (element.id === res.tierId + sysId) {
subId = element.id
Vue.set(element, 'iconB', true)
this.$refs.tree.setCurrentNode(element)
} else {
Vue.set(el, 'iconB', false)
}
})
}
})
}
})
//console.log('subId', subId)
this.initStation(res.stationId, res, subId)
this.$nextTick(() => {
this.defaultExpandedKeys = [subId]
// this.isFlag(this.treeData, res.tierId)
// this.ssId = res.tierId
// console.log('层级id', this.ssId)
})
})
},
//保存当前页面上的资源点位置
saveResourceList() {
var flag = true
//判断是否有无id的新增资源点
this.list.forEach(res => {
if (!res.id) {
flag = false
return false
}
})
if (flag) {
this.$http({
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: this.list
}).then(data => {
// console.log(data)
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.initTree()
this.changeEditable()
this.checkedData.resourceId = ''
this.delflag = true
}
})
} else {
this.$message.error(data.msg)
}
})
} else {
this.$confirm(`有新增资源点未填写信息，是否保存?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
// console.log('当前页面资源点位置：', this.list)
this.$http({
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: this.list
}).then(data => {
// console.log(data)
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.initTree()
this.changeEditable()
this.checkedData.resourceId = ''
this.delflag = true
}
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
}
},
// 详情
queryDetail(item) {
this.queryDetailVisible = true
this.handleNodeClick(item)
this.currentNode = this.$refs.tree.getNode(item.id).data
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
this.$nextTick(() => {
this.$refs.queryDetail.init(item.id)
})
},
// 新增 / 修改
addOrUpdateHandle(id, x, y) {
// console.log('addOrUpdateHandle:', id, x, y)
this.addOrUpdateVisible = true
this.list.forEach(res => {
if (res.id === id) {
this.resource = res
}
})
// console.log('this.checkedData', this.checkedData)
this.$nextTick(() => {
this.$refs.addOrUpdate.init(
id,
x,
y,
JSON.parse(JSON.stringify(this.resource))
)
})
},
// 移动资源位坐标
changeResourceLocation(id, x, y) {
// console.log('changeResourceLocation:', id, x, y)
this.list.forEach(res => {
if (res.id === id) {
// console.log('移动坐标1：', res.name, res.xpoint, res.ypoint)
res.xpoint = x
res.ypoint = y
// console.log('移动坐标2：', res.name, res.xpoint, res.ypoint)
}
})
},
// 删除
deleteHandle() {
// console.log('dataListSelections:', this.dataListSelections)
// var ids = this.checkedData.resourceId
// ? [this.checkedData.resourceId]
// : this.dataListSelections.map(item => {
// return item.id
// })
var ids = [this.checkedData.resourceId]
this.$confirm(`确认删除资源点?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
this.$http({
url: this.$http.adornUrl('/liResource/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(data => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.initTree()
this.checkedData.resourceId = ''
this.delflag = true
}
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
},
clickAdd() {
// var box = document.getElementById('drag')
// let box = this.$refs.drag
// console.log(box)
this.list.push(this.getNewBox())
// console.log('this.list:', this.list)
},
changeEditable() {
this.isDone = !this.isDone
this.editable = !this.editable //保存按钮切换显示
this.$forceUpdate()
//设置是否启动拖动
// if (!this.editable) {
// //关
// this.obj = 'pointer-events:none'
// } else {
// //开
// this.obj = 'pointer-events:initial'
// }
// console.log(this.editable)
// console.log(this.obj)
},
statusClick(item) {
//icon状态切换
if (!this.editable) {
return
}
item.value = item.value + '2'
this.typeList.forEach(res => {
if (item.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
res.value = res.value.substring(0, res.value.length - 1)
}
}
})
},
regionMousedown(e) {
if (!this.editable) {
return
}
if (e.srcElement.id == '') {
return
}
// if (e.path) {
// if (
// e.path[0].attributes.name &&
// e.path[0].attributes.name.nodeValue != 'iconListNow'
// ) {
// return
// }
// } else {
// }
this.typeList.forEach(res => {
// if ((e.path && e.path[0].id !== res.id) || e.srcElement.id !== res.id) {
if (e.srcElement.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
res.value = res.value.substring(0, res.value.length - 1)
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
return
}
res.value = res.value + '2'
this.spanDragData.name = res.value
this.spanDragListNow = res
this.mousemoveStatus = true
}
})
},
regionMousemove(e) {
if (this.mousemoveStatus) {
this.spanDragData.x = e.clientX - 24
this.spanDragData.y = e.clientY - 106
this.spanDragData.show = true
//console.log(this.spanDragData)
//console.log('x' + e.clientX)
//console.log('y' + e.clientY)
}
},
regionMouseup(e) {
this.mousemoveStatus = false
this.typeList.forEach(res => {
if (res.value.substring(res.value.length - 1, res.value.length) == 2) {
res.value = res.value.substring(0, res.value.length - 1)
}
})
//console.log(this.spanDragListNow)
if (e.clientX > 330 && e.clientY > 260) {
this.list.push(
this.getNewBox(
this.spanDragListNow,
this.spanDragData.x - 330,
this.spanDragData.y - 180
)
)
}
this.spanDragData.x = 0
this.spanDragData.y = 0
this.spanDragData.show = false
this.spanDragData.name = ''
},
iconClick(item) {
this.iconNameListBottom.forEach(res => {
if (res.id === item.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) != 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '4'
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
if (this.currentNode.level == 5) {
this.list = []
this.currentNode.children.forEach(el => {
if (item === null || (item != null && item.id === el.type)) {
this.list.push(el)
}
})
this.list.forEach(res => {
Vue.set(res, 'active', false)
})
} else {
this.showResourceByMapId(item)
}
this.clickItem = item
},
initSubSystemDicList() {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.systemList = data.list
}
})
},
initResourceTypeDicList() {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.typeList = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom.forEach(res => {
res.value += '3'
})
}
})
},
iconMousedown(e) {
e.width = Number(e.width) + 10
console.log(e.width)
}
},
directives: {
//拖拽&&缩放指令
drag: {
bind: (el, binding) => {
//console.log(el)
//console.log('binding:', binding)
// console.log(binding.value)
//绑定默认样式
el.style.zIndex = 9
el.style.opacity = 1
// el.style.backgroundColor = 'rgba(0,0,0,1)'
//如果为编辑状态
if (binding.value || binding.value === undefined) {
//定义该元素的 top left width height
let x, y, w, h
//鼠标的起始和结束坐标
let cx_start, cy_start, cx_end, cy_end;
//鼠标双击弹出信息框
(el.ondblclick = e => {
// alert('新增/编辑信息弹出框')
//console.log('el', el)
// console.log('that', that)
//编辑资源位信息
that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
}),
//判断鼠标样式
(el.onmousemove = e => {
//console.log('el-onmousemove', el)
that.activeChooseResourceBox(el.id)
//获取鼠标当前位置
let cx_now = e.clientX
let cy_now = e.clientY
//获取div右下角相对浏览器的位置
let {
top: el_top,
left: el_left
// width: el_width,
// height: el_height
} = el.getBoundingClientRect()
// let el_bottom_height = el_top + el_height;
// let el_right_width = el_left + el_width;
//判断鼠标是否在div下边界
// let mouse_in_bottom =
// cy_now <= el_bottom_height + 5 && cy_now >= el_bottom_height - 5;
//判断鼠标是否在div右边界
// let mouse_in_right =
// cx_now <= el_right_width + 5 && cx_now >= el_right_width - 5;
// if (mouse_in_bottom && mouse_in_right) {
// el.style.cursor = "se-resize";
// } else if (mouse_in_right) {
// el.style.cursor = "e-resize";
// } else if (mouse_in_bottom) {
// el.style.cursor = "s-resize";
// } else {
el.style.cursor = 'move'
// }
})
el.onmousedown = e => {
//console.log('el-onmousedown', el)
//div1 所有图标，去除选中颜色，当前选中给予选中颜色边框
// var divs = document.getElementsByClassName('div1')
// let boxs = this.$refs.drag
// for (var i = 0; divs.length > i; i++) {
// divs[i].style.border = '0'
// }
//当前选中给予选中颜色边框
// el.style.border = '1px solid red'
// console.log(divs)
//border: 1px solid red;
let mouse = el.style.cursor
//更改默认样式
// el.style.backgroundColor = 'rgba(0,0,0,.5)'
el.style.opacity = 0.5
el.style.zIndex = 99
//对象解构赋值
let {
left: el_x,
top: el_y,
width: el_w,
height: el_h
} = window.getComputedStyle(el)
// let { left: el_x, top: el_y } = window.getComputedStyle(el);
x = el_x
y = el_y
w = el_w
h = el_h
// console.log(x, y, w, h)
cx_start = e.clientX
cy_start = e.clientY
//绑定移动事件
document.onmousemove = e => {
cx_end = e.clientX
cy_end = e.clientY
//默认左下方向配置
let x_move = cx_end - cx_start
let y_move = cy_end - cy_start
let direct = ['width', 'height']
let pos = [w, h]
let move = [x_move, y_move]
let limit = 50
//判断鼠标的类型进行对应的操作
switch (mouse) {
// case "e-resize":
// direct = ["width"];
// pos = [w];
// move = [x_move];
// break;
// case "s-resize":
// direct = ["height"];
// pos = [h];
// move = [y_move];
// break;
case 'move':
direct = ['left', 'top']
pos = [x, y]
limit = 0
break
}
handle_div(direct, pos, move, limit)
}
//取消移动事件
document.onmouseup = e => {
//还原默认样式
el.style.zIndex = 9
// el.style.backgroundColor = 'rgba(0,0,0,1)'
el.style.opacity = 1
document.onmousemove = null
//移动结束后弹出修改弹窗
// that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
}
/**
* 操作DOM位置和大小方法
* @param direct 方向
* @param pos 尺寸/坐标
* @param move 拖动距离
* @param limit 限定范围
*/
function handle_div(direct, pos, move, limit) {
that.changeResourceLocation(
el.id,
parseInt(pos[0]) + parseInt(move[0]),
parseInt(pos[1]) + parseInt(move[1])
)
for (let i = 0; i < direct.length; i++) {
let val = parseInt(pos[i]) + move[i]
val = val <= limit ? limit : val
el.style[direct[i]] = val + 'px'
}
}
}
} else {
el.style.cursor = 'default'
//console.log('el-default', el)
//移除点击事件
el.onmousedown = null
el.onmousemove = null
}
}
}
}
}
</script>
<style lang='scss' scoped>
.aa{
transform: rotate(90deg);
}
.line_warp {
// width: 300px;
height: 45px;
display: flex;
align-items: center;
.point_left {
width: 50px;
height: 50px;
transform: translateX(14px);
}
.point_right {
width: 50px;
height: 50px;
transform: translateX(-14px);
}
}
.dic_tree {
background: #f4f4f4;
font-size: 14px;
transform: translateX(-6px);
margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
padding-left: 0px !important;
}
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node__children {
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
.dic_tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.dic_tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:before {
border-left: 1px dashed #bfbfbf;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
border-top: 1px dashed #bfbfbf;
height: 20px;
top: 12px;
width: 33px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.tree-container {
/* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
background: url("../../../assets/images/add.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../../assets/images/sub.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
</style>
<style >
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content
.custom-tree-node {
background-color: #33b0f6 !important;
color: aliceblue;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: transparent;
}
</style>
<style lang='scss' scoped>
.treeCard {
.el-tree {
overflow-y: scroll;
height: 640px;
}
}
.tree_house {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 20px;
height: 20px;
vertical-align: middle;
// transform: translateY(-8px);
transform: translateX(-40px);
}
}
.tree_point {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 15px;
height: 15px;
vertical-align: middle;
transform: translateY(-2px);
}
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
.span-box {
height: 30px;
// width: 30px;
font-size: 12px;
border-radius: 5px;
/* border: 1px solid red; */
position: absolute;
// left: 0;
// top: 0;
.span-img {
width: 100%;
height: 100%;
border-radius: 5px;
background-size: 182%;
}
}
.active {
background-color: #fd949d;
height: 40px;
width: 40px;
}
}
.tier-btn {
.active-tier {
background-color: #409eff;
color: #ffffff;
}
}
.monitor_point_left_top {
height: 42px;
background: #e1edf4;
padding-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
.monitor_point_left_topL {
height: 40px;
padding-top: 10px;
float: left;
div {
height: 40px;
float: left;
padding: 0 10px 0 10px;
line-height: 40px;
cursor: pointer;
font-family: Microsoft YaHei;
font-size: 14px;
span {
color: #35aff8;
}
}
div.on {
background: #fff;
border: 1px solid #c3c3c3;
border-bottom: none;
font-family: Microsoft YaHei;
font-weight: 400;
}
}
.monitor_point_left_topR {
// float: right;
margin-right: 20px;
// margin-top: 10px;
.el-input {
width: 109px;
}
/deep/ .el-input--mini .el-icon-search {
line-height: 28px;
color: #35aff8;
font-weight: bold;
}
}
}
.top_button {
background: url(~@/assets/images/sysiconbg.png);
}
</style>
src/pages/sys/point/index 拖拽改变长度.vue deleted 100644 → 0
View file @ 92f4158d
<template lang="pug">
div(onselectstart="return false;" @mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup")
div(class="top_button" style="width:100%;height:40px; padding-top:3px")
div(style="float:left;margin-left:16px;")
div(:class="item.value" name="iconListNow" :title="item.name" :style="{cursor:editable?'move':''}" :id="item.id" v-for="item in typeList")
div(style="float:right; margin-top:6px;")
//- <el-tooltip class="item" effect="dark" :content="editable?'禁用':'启用'" placement="bottom">
//- <el-button :type="editable?'info':'primary'" size='mini' style="margin-right:10px;" icon="el-icon-edit" circle @click="changeEditable"></el-button>
//- </el-tooltip>
el-button(type="primary" size='mini' style="margin-right:10px;" @click="changeEditable" v-if="!editable") 编辑
el-button(type="primary" size='mini' style="margin-right:10px;" @click="deleteHandle" v-if="editable" :disabled="delflag") 删除
//- <el-button type="primary" size='mini' style="margin-right:10px;" :disabled='!editable' @click="clickAdd">添加新图标</el-button>
el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" v-if="editable") 保存
div(style="clear:both")
el-container( style='padding-left:0px;')
el-aside(width="18vw" style='height:750px')
el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;')
div(class="monitor_point_left_top")
div.title-bold(slot='header' class="monitor_point_left_topL") 资源列表
div(class="monitor_point_left_topR")
el-input(suffix-icon="el-icon-search" size='mini' placeholder="" v-model="searchInput" clearable)
//- el-tree(style='background:#f4f4f4;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
el-tree.dic_tree( :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
span(class="custom-tree-node" style='width:90%;line-height: 18px;' slot-scope="{ node, data }")
span(v-if="node.data.level == 3" class="el-icon-zhandian xa-icon")
//- span(v-if="node.data.level == 3 && node.data.iconB" class="el-icon-wq-treeIcon1")
span(v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon")
span(v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing xa-icon")
span(v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha xa-icon")
span(v-if="node.data.level == 6 " :class="node.data.icon+'7'" class='xa-icon')
span() &nbsp;{{node.label}}
span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
el-main(style="padding:0px;")
el-card.tableCard
div(slot='header' ref="sprtDom" )
el-row(:span="24")
el-col(:md='12' :sm="5" class='tier-btn')
el-button(type="primary" size='mini' plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin:6px 10px 0 0; " v-for="item in mapList" :key='item.id' @click="changeMap(item)") {{item.name}}
el-col(:md='12' :sm="5")
div(style="float:right;")
div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)")
el-row(style="padding-bottom:15px;height:680px" ,:span="24")
//- el-col(class="resource-container" :style="obj" ref="drag")
el-col(class="resource-container" ref="drag")
img(style="width:100%;pointer-events:none" :src="stationMap?stationMap.readPath:''")
div(:class="{'span-box':true}" v-if='!isDone' v-for="item in list" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" @click="queryDetail(item.id)" :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0}")
span(v-if="item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'6'")
span(v-if="!item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'5'")
//- div(v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div( class='line_warp' v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')" )
div(class='point_left' :class="item.icon+'6'")
div( ref='line' :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'6'")
//- div(v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')" :style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
div( class='line_warp' v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')" )
div(class='point_left' :class="item.icon+'5'")
div(:style="{'width':item.width+'px','height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}")
div(class='point_right' :class="item.icon+'5'" )
div(:class="{'span-box':true}" v-if='isDone' v-for="item in list" :id='item.id' :title="item.name" :dataKey="item.key" :key="item.key" disabled :style="{'left':item.xpoint?item.xpoint+'px':0,'top':item.ypoint?item.ypoint+'px':0}" v-drag)
span(v-if="item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'6'")
span(v-if="!item.active && (item.name !== '振动光纤' && item.name !== '红外对射')" :class="item.icon+'5'")
//- div( class='line_warp' v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')" ref='lineWarp' style='cursor: w-resize;' )
vue-drag-resize( class='line_warp' :sticks='sticksArr' v-if="item.active && (item.name === '振动光纤' || item.name === '红外对射')" ref='lineWarp' )
div(class='point_left' style='width:40px;height:40px;' :class="item.icon+'6'")
//- div( ref='line' @mousewheel="handwheel($event,item)" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div( ref='line' :style="{'height':'5px','background':'#409EFF','cursor':'pointer'}" style='width:100%')
div(class='point_right' style='width:40px;height:40px;' :class="item.icon+'6'" )
//- el-button(icon="el-icon-right" style="cursor:e-resize;float:right;margin-top:-11px;" size="mini" circle type="primary" @click="iconMousedown(item)")
vue-drag-resize( class='line_warp' v-if="!item.active && (item.name === '振动光纤' || item.name === '红外对射')" )
div(class='point_left' style='width:40px;height:40px;' :class="item.icon+'5'")
//- div( ref='line' @mousewheel="handwheel($event,item)" :style="{'width':item.width+'px','height':'5px','background':'#409EFF','cursor':'pointer'}")
div(:style="{'height':'3px','background':'rgb(102, 177, 255)','cursor':'pointer'}" style='width:100%')
div(class='point_right' style='width:40px;height:40px;' :class="item.icon+'5'")
//- el-button(icon="el-icon-right" style="cursor:e-resize;float:right;margin-top:-11px;" size="mini" circle type="primary" @click="iconMousedown(item)")
el-col()
// 弹窗, 新增 / 修改
add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', @refreshdatalist='updateList')
query-detail(v-if='queryDetailVisible', ref='queryDetail')
span(:class="spanDragData.name" v-if="spanDragData.show" :style="{left:spanDragData.x+'px',top:spanDragData.y+'px',position:'fixed'}")
</template>
<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import VueDragResize from 'vue-drag-resize'
import Vue from 'vue'
let that
export default {
data() {
return {
sticksArr: ['mr', 'ml'],
isRotate: false,
ssId: '',
isDone: false,
drawer: false,
isCollapse: true,
delflag: true,
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
queryDetailVisible: false,
treeData: [],
systemList: [],
defaultExpandedKeys: [],
defaultProps: {
children: 'children',
label: 'name',
level: 'level'
},
nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
resource: {}, //当前选择的资源点
typeList: [],
checkedData: {
lineId: '',
lineName: '',
stationId: '',
stationName: '',
subCode: '',
subSystem: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId')
},
currentNode: {},
dragAble: false,
list: [],
searchInput: '',
obj: 'pointer-events:none',
editable: false,
clickItem: {},
iconNameListBottom: [],
spanDragData: {
x: 0,
y: 0,
show: false,
name: ''
},
spanDragListNow: {},
mousemoveStatus: false
}
},
components: {
AddOrUpdate,
QueryDetail,
VueDragResize
},
watch: {
searchInput(val) {
this.$refs.tree.filter(val)
}
},
created() {
that = this
this.initTree()
this.initResourceTypeDicList()
this.initSubSystemDicList()
// this.getDataList()
},
methods: {
handClick() {
console.log(111)
this.$nextTick(() => {
this.$refs.lineWarp.style.transform = ' rotate(90deg)'
})
},
handwheel(e, item) {
let str = e.wheelDelta
if (str < 0) {
// 下滚动 100
item.width = parseInt(item.width) - 10
if (item.width <= 40) {
item.width = 40
}
console.log(item.width)
}
if (str > 0) {
// 上滚动 -100
item.width = parseInt(item.width) + 10
if (item.width >= 600) {
item.width = 600
}
console.log(item.width)
}
},
//新建资源点对象
getNewBox(item, x, y) {
return {
id: '',
key: getUUID(),
level: 6,
name: item.name,
password: '',
port: '',
remark: '',
lineId: this.checkedData.lineId,
lineName: this.checkedData.lineName,
stationId: this.checkedData.stationId,
stationName: this.checkedData.stationName,
subCode: this.checkedData.subCode,
subSystem: this.checkedData.subSystem,
tierId: this.checkedData.tierId,
tierName: this.checkedData.tierName,
type: item.id,
icon: item.value,
iconPath: '',
username: 'admin',
xpoint: x || '100',
ypoint: y || '100',
width: 200
}
},
// 树节点过滤
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
initTree() {
// console.log('stationId：', this.checkedData.sId)
this.$http({
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
}).then(data => {
if (data && data.code === 0) {
this.treeData = data.tree
if (!this.checkedData.sId) {
Vue.set(this.treeData[0].children[0], 'iconB', true)
// this.defaultExpandedKeys = [this.treeData[0].children[0].id]
//设置选中的节点
// this.$refs.tree.setChecked(this.treeData[0].children[0].id)
this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
}
// console.log('初始化线路树：', this.treeData)
this.initStation(this.treeData[0].id, null, 1)
// console.log(this.treeData)
}
})
},
//初始化站点下的资源点
// initTreeStationMap (node, flag) {
// this.$http({
// url: this.$http.adornUrl('/liResource/getStationMapTreeList'),
// method: 'post',
// data: {
// stationId: node.id
// }
// })
// .then(data => {
// // console.log('初始化线路树：', data.nodes)
// if (data && data.code === 0) {
// this.$refs.tree.updateKeyChildren(node.id, data.nodes)
// }
// })
// .then(() => {
// if (this.checkedData.sId && flag) {
// this.defaultExpandedKeys = [this.treeData[0].children[0].id]
// //设置选中的节点
// // console.log('默认选中节点', this.treeData[0].children[0])
// this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
// // console.log('this', this)
// }
// this.initStation(node.id, null, 1)
// })
// },
initTreeResource(node) {
let data = {
lineId: this.checkedData.lineId,
stationId: this.checkedData.stationId,
tierId: this.checkedData.tierId,
subCode: this.checkedData.subCode
}
// console.log('初始化线路树请求参数：', data)
this.$http({
url: this.$http.adornUrl('/liResource/getResourceTreeList'),
method: 'post',
data: data
}).then(data => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$refs.tree.updateKeyChildren(node.id, data.nodes)
}
})
},
initStation(id, res, subId) {
// console.log('初始化站点id：', id)
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
params: this.$http.adornParams()
})
.then(data => {
if (data && data.code === 0) {
this.station = data.bean
this.mapList = data.bean.mapList
this.checkedData.lineId = this.station.lineId
this.checkedData.lineName = this.station.lineName
this.checkedData.stationId = this.station.id
this.checkedData.stationName = this.station.stationName
if (res) {
this.mapList.forEach(e => {
if (res.tierId === e.id) {
this.checkedData.tierId = e.id
this.checkedData.tierName = e.name
this.stationMap = e
}
})
} else {
this.checkedData.tierId = this.mapList[0].id
this.checkedData.tierName = this.mapList[0].name
this.stationMap = this.mapList[0]
}
// console.log('站点地图：', this.mapList)
}
})
.then(() => {
if (subId === 1) {
this.showResourceByMapId(null)
} else {
this.showResourceByParentId(subId)
}
})
},
isFlag(data, id) {
data.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
if (res.children) {
this.isFlag(res.children, id)
}
})
},
//线路资源点树节点点击事件
handleNodeClick(node) {
// console.log('选中树节点', node)
this.currentNode = node
let level = node.level
let name = node.name
let id = node.id
let code = node.code
this.isFlag(this.treeData, id)
// this.treeData.forEach(res => {
// if (res.id === id) {
// Vue.set(res, 'iconB', true)
// } else {
// Vue.set(res, 'iconB', false)
// }
// })
//每次选择节点都先清空资源位
// if (level !== 6) {
// this.list = []
// }
if (level === 2) {
//线路
this.checkedData.lineId = id
this.checkedData.lineName = name
} else if (level === 3) {
//站点
this.checkedData.stationId = id
this.checkedData.stationName = name
// this.initTreeStationMap(node)
} else if (level === 4) {
//层级
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
this.stationMap = node
// console.log('选中节点的层级id', this.tierId)
this.showResourceByMapId(null)
} else if (level === 5) {
//子系统
this.checkedData.subCode = code
this.checkedData.subSystem = name
this.checkedData.stationId = node.stationId
this.checkedData.tierId = node.tierId
// this.initTreeResource(node)
this.list = JSON.parse(JSON.stringify(node.children))
// console.log('资源点列表：', this.list)
} else if (level === 6) {
//资源点
this.checkedData.resourceId = id
this.activeChooseResourceBox(id)
// console.log('资源点列表：', this.list)
}
this.iconNameListBottom.forEach(res => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
},
//激活选中资源点位节点
activeChooseResourceBox(id) {
this.checkedData.resourceId = id
this.delflag = false
// console.log(this.checkedData.resourceId, '-------')
this.list.forEach((res, index) => {
if (res.id === id) {
res.active = true
// console.log('激活的资源点：', res.name, res.active, res.id, index)
} else {
res.active = false
}
})
this.$forceUpdate()
// console.log('资源点列表：', this.list)
},
//切换层级
changeMap(map) {
//console.log('选择的层级', map)
this.currentNode = this.$refs.tree.getNode(map.id).data
// console.log('当前要选中的节点', this.currentNode)
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
// console.log('当前要选中的节点2', this.currentNode)
this.checkedData.tierId = map.id
this.checkedData.tierName = map.name
let stationNode = this.$refs.tree.getNode(map.stationId).data
// console.log('当前要选中的站点', stationNode)
this.checkedData.stationId = stationNode.id
this.checkedData.stationName = stationNode.name
this.stationMap = map
this.iconNameListBottom.forEach(res => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
this.showResourceByMapId(null)
},
//根据层级id展示当前层级所有的资源点
showResourceByMapId(item) {
let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
// console.log('当前要选中的层级节点', tierNode.children)
this.list = []
tierNode.children.forEach(subSystem => {
subSystem.children.forEach(res => {
if (item === null || (item != null && item.id === res.type)) {
this.list.push(res)
}
})
})
// console.log(this.list, '++++++')
},
//根据子系统id展示子系统id所有的资源点
showResourceByParentId(id) {
let node = this.$refs.tree.getNode(id).data
this.list = []
node.children.forEach(e => {
this.list.push(e)
})
},
updateList(res) {
this.$http({
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
})
.then(data => {
if (data && data.code === 0) {
this.treeData = data.tree
// if (!this.checkedData.sId) {
// this.defaultExpandedKeys = [res.tierId]
// this.isFlag(this.dataList, res.tierId)
//设置选中的节点
// this.$refs.tree.setChecked(this.treeData[0].children[0].id)
// } else {
// this.treeData.forEach(e => {
// if (res.stationId === e.id) {
// e.children.forEach(el => {
// if (el.id === res.tierId) {
// el.children.forEach(element => {
// if (element.subCode === res.subCode) {
// subId = element.id
// }
// })
// }
// })
// }
// })
// }
// console.log('初始化线路树：', this.treeData)
// console.log(res, '++++++++++')
}
})
.then(() => {
//console.log('初始化线路树：', this.treeData)
//console.log(res, '++++++++++')
var sysId = ''
this.systemList.forEach(element => {
if (res.subCode === element.value) {
sysId = element.id
}
})
var subId = ''
this.treeData.forEach(e => {
if (res.stationId === e.id) {
e.children.forEach(el => {
if (el.id === res.tierId) {
el.children.forEach(element => {
if (element.id === res.tierId + sysId) {
subId = element.id
Vue.set(element, 'iconB', true)
this.$refs.tree.setCurrentNode(element)
} else {
Vue.set(el, 'iconB', false)
}
})
}
})
}
})
//console.log('subId', subId)
this.initStation(res.stationId, res, subId)
this.$nextTick(() => {
this.defaultExpandedKeys = [subId]
// this.isFlag(this.treeData, res.tierId)
// this.ssId = res.tierId
// console.log('层级id', this.ssId)
})
})
},
//保存当前页面上的资源点位置
saveResourceList() {
var flag = true
//判断是否有无id的新增资源点
this.list.forEach(res => {
if (!res.id) {
flag = false
return false
}
})
if (flag) {
this.$http({
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: this.list
}).then(data => {
// console.log(data)
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.initTree()
this.changeEditable()
this.checkedData.resourceId = ''
this.delflag = true
}
})
} else {
this.$message.error(data.msg)
}
})
} else {
this.$confirm(`有新增资源点未填写信息，是否保存?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
// console.log('当前页面资源点位置：', this.list)
this.$http({
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: this.list
}).then(data => {
// console.log(data)
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.initTree()
this.changeEditable()
this.checkedData.resourceId = ''
this.delflag = true
}
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
}
},
// 详情
queryDetail(id) {
this.queryDetailVisible = true
this.$nextTick(() => {
this.$refs.queryDetail.init(id)
})
},
// 新增 / 修改
addOrUpdateHandle(id, x, y) {
// console.log('addOrUpdateHandle:', id, x, y)
this.addOrUpdateVisible = true
this.list.forEach(res => {
if (res.id === id) {
this.resource = res
}
})
// console.log('this.checkedData', this.checkedData)
this.$nextTick(() => {
this.$refs.addOrUpdate.init(
id,
x,
y,
JSON.parse(JSON.stringify(this.resource))
)
})
},
// 移动资源位坐标
changeResourceLocation(id, x, y) {
// console.log('changeResourceLocation:', id, x, y)
this.list.forEach(res => {
if (res.id === id) {
// console.log('移动坐标1：', res.name, res.xpoint, res.ypoint)
res.xpoint = x
res.ypoint = y
// console.log('移动坐标2：', res.name, res.xpoint, res.ypoint)
}
})
},
// 删除
deleteHandle() {
// console.log('dataListSelections:', this.dataListSelections)
// var ids = this.checkedData.resourceId
// ? [this.checkedData.resourceId]
// : this.dataListSelections.map(item => {
// return item.id
// })
var ids = [this.checkedData.resourceId]
this.$confirm(`确认删除资源点?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
this.$http({
url: this.$http.adornUrl('/liResource/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(data => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.initTree()
this.checkedData.resourceId = ''
this.delflag = true
}
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
},
clickAdd() {
// var box = document.getElementById('drag')
// let box = this.$refs.drag
// console.log(box)
this.list.push(this.getNewBox())
// console.log('this.list:', this.list)
},
changeEditable() {
this.isDone = !this.isDone
this.editable = !this.editable //保存按钮切换显示
this.$forceUpdate()
//设置是否启动拖动
// if (!this.editable) {
// //关
// this.obj = 'pointer-events:none'
// } else {
// //开
// this.obj = 'pointer-events:initial'
// }
// console.log(this.editable)
// console.log(this.obj)
},
statusClick(item) {
//icon状态切换
if (!this.editable) {
return
}
item.value = item.value + '2'
this.typeList.forEach(res => {
if (item.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
res.value = res.value.substring(0, res.value.length - 1)
}
}
})
},
regionMousedown(e) {
if (!this.editable) {
return
}
if (e.srcElement.id == '') {
return
}
// if (e.path) {
// if (
// e.path[0].attributes.name &&
// e.path[0].attributes.name.nodeValue != 'iconListNow'
// ) {
// return
// }
// } else {
// }
this.typeList.forEach(res => {
// if ((e.path && e.path[0].id !== res.id) || e.srcElement.id !== res.id) {
if (e.srcElement.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
res.value = res.value.substring(0, res.value.length - 1)
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
) {
return
}
res.value = res.value + '2'
this.spanDragData.name = res.value
this.spanDragListNow = res
this.mousemoveStatus = true
}
})
},
regionMousemove(e) {
if (this.mousemoveStatus) {
this.spanDragData.x = e.clientX - 24
this.spanDragData.y = e.clientY - 106
this.spanDragData.show = true
//console.log(this.spanDragData)
//console.log('x' + e.clientX)
//console.log('y' + e.clientY)
}
},
regionMouseup(e) {
this.mousemoveStatus = false
this.typeList.forEach(res => {
if (res.value.substring(res.value.length - 1, res.value.length) == 2) {
res.value = res.value.substring(0, res.value.length - 1)
}
})
//console.log(this.spanDragListNow)
if (e.clientX > 330 && e.clientY > 260) {
this.list.push(
this.getNewBox(
this.spanDragListNow,
this.spanDragData.x - 330,
this.spanDragData.y - 180
)
)
}
this.spanDragData.x = 0
this.spanDragData.y = 0
this.spanDragData.show = false
this.spanDragData.name = ''
},
iconClick(item) {
this.iconNameListBottom.forEach(res => {
if (res.id === item.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) != 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '4'
}
} else {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
) {
res.value = res.value.substring(0, res.value.length - 1) + '3'
}
}
})
this.showResourceByMapId(item)
this.clickItem = item
},
initSubSystemDicList() {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.systemList = data.list
}
})
},
initResourceTypeDicList() {
this.$http({
url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.typeList = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
this.iconNameListBottom.forEach(res => {
res.value += '3'
})
}
})
},
iconMousedown(e) {
e.width = Number(e.width) + 10
console.log(e.width)
}
},
directives: {
//拖拽&&缩放指令
drag: {
bind: (el, binding) => {
//console.log(el)
//console.log('binding:', binding)
// console.log(binding.value)
//绑定默认样式
el.style.zIndex = 9
el.style.opacity = 1
// el.style.backgroundColor = 'rgba(0,0,0,1)'
//如果为编辑状态
if (binding.value || binding.value === undefined) {
//定义该元素的 top left width height
let x, y, w, h
//鼠标的起始和结束坐标
let cx_start, cy_start, cx_end, cy_end;
//鼠标双击弹出信息框
(el.ondblclick = e => {
// alert('新增/编辑信息弹出框')
//console.log('el', el)
// console.log('that', that)
//编辑资源位信息
that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
}),
//判断鼠标样式
(el.onmousemove = e => {
//console.log('el-onmousemove', el)
that.activeChooseResourceBox(el.id)
//获取鼠标当前位置
let cx_now = e.clientX
let cy_now = e.clientY
//获取div右下角相对浏览器的位置
let {
top: el_top,
left: el_left
// width: el_width,
// height: el_height
} = el.getBoundingClientRect()
// let el_bottom_height = el_top + el_height;
// let el_right_width = el_left + el_width;
//判断鼠标是否在div下边界
// let mouse_in_bottom =
// cy_now <= el_bottom_height + 5 && cy_now >= el_bottom_height - 5;
//判断鼠标是否在div右边界
// let mouse_in_right =
// cx_now <= el_right_width + 5 && cx_now >= el_right_width - 5;
// if (mouse_in_bottom && mouse_in_right) {
// el.style.cursor = "se-resize";
// } else if (mouse_in_right) {
// el.style.cursor = "e-resize";
// } else if (mouse_in_bottom) {
// el.style.cursor = "s-resize";
// } else {
el.style.cursor = 'move'
// }
})
el.onmousedown = e => {
//console.log('el-onmousedown', el)
//div1 所有图标，去除选中颜色，当前选中给予选中颜色边框
// var divs = document.getElementsByClassName('div1')
// let boxs = this.$refs.drag
// for (var i = 0; divs.length > i; i++) {
// divs[i].style.border = '0'
// }
//当前选中给予选中颜色边框
// el.style.border = '1px solid red'
// console.log(divs)
//border: 1px solid red;
let mouse = el.style.cursor
//更改默认样式
// el.style.backgroundColor = 'rgba(0,0,0,.5)'
el.style.opacity = 0.5
el.style.zIndex = 99
//对象解构赋值
let {
left: el_x,
top: el_y,
width: el_w,
height: el_h
} = window.getComputedStyle(el)
// let { left: el_x, top: el_y } = window.getComputedStyle(el);
x = el_x
y = el_y
w = el_w
h = el_h
// console.log(x, y, w, h)
cx_start = e.clientX
cy_start = e.clientY
//绑定移动事件
document.onmousemove = e => {
cx_end = e.clientX
cy_end = e.clientY
//默认左下方向配置
let x_move = cx_end - cx_start
let y_move = cy_end - cy_start
let direct = ['width', 'height']
let pos = [w, h]
let move = [x_move, y_move]
let limit = 50
//判断鼠标的类型进行对应的操作
switch (mouse) {
// case "e-resize":
// direct = ["width"];
// pos = [w];
// move = [x_move];
// break;
// case "s-resize":
// direct = ["height"];
// pos = [h];
// move = [y_move];
// break;
case 'move':
direct = ['left', 'top']
pos = [x, y]
limit = 0
break
}
handle_div(direct, pos, move, limit)
}
//取消移动事件
document.onmouseup = e => {
//还原默认样式
el.style.zIndex = 9
// el.style.backgroundColor = 'rgba(0,0,0,1)'
el.style.opacity = 1
document.onmousemove = null
//移动结束后弹出修改弹窗
// that.addOrUpdateHandle(el.id, parseInt(x), parseInt(y))
}
/**
* 操作DOM位置和大小方法
* @param direct 方向
* @param pos 尺寸/坐标
* @param move 拖动距离
* @param limit 限定范围
*/
function handle_div(direct, pos, move, limit) {
that.changeResourceLocation(
el.id,
parseInt(pos[0]) + parseInt(move[0]),
parseInt(pos[1]) + parseInt(move[1])
)
for (let i = 0; i < direct.length; i++) {
let val = parseInt(pos[i]) + move[i]
val = val <= limit ? limit : val
el.style[direct[i]] = val + 'px'
}
}
}
} else {
el.style.cursor = 'default'
//console.log('el-default', el)
//移除点击事件
el.onmousedown = null
el.onmousemove = null
}
}
}
}
}
</script>
<style lang='scss' scoped>
.aa{
transform: rotate(90deg);
}
.line_warp {
// width: 300px;
// height: 45px;
float: left;
display: flex;
align-items: center;
.point_left {
width: 50px;
height: 50px;
transform: translateX(14px);
}
.point_right {
width: 50px;
height: 50px;
transform: translateX(-14px);
}
}
.dic_tree {
background: #f4f4f4;
font-size: 14px;
transform: translateX(-6px);
margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
padding-left: 0px !important;
}
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node__children {
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
.dic_tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.dic_tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:before {
border-left: 1px dashed #bfbfbf;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
border-top: 1px dashed #bfbfbf;
height: 20px;
top: 12px;
width: 30px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.tree-container {
/* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
background: url("../../../assets/images/add.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../../assets/images/sub.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
</style>
<style >
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content
.custom-tree-node {
background-color: #33b0f6 !important;
color: aliceblue;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: transparent;
}
</style>
<style lang='scss' scoped>
.treeCard {
.el-tree {
overflow-y: scroll;
height: 640px;
}
}
.tree_house {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 20px;
height: 20px;
vertical-align: middle;
// transform: translateY(-8px);
transform: translateX(-40px);
}
}
.tree_point {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 15px;
height: 15px;
vertical-align: middle;
transform: translateY(-2px);
}
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
.span-box {
height: 30px;
// width: 30px;
font-size: 12px;
border-radius: 5px;
/* border: 1px solid red; */
position: absolute;
// left: 0;
// top: 0;
.span-img {
width: 100%;
height: 100%;
border-radius: 5px;
background-size: 182%;
}
}
.active {
background-color: #fd949d;
height: 40px;
width: 40px;
}
}
.tier-btn {
.active-tier {
background-color: #409eff;
color: #ffffff;
}
}
.monitor_point_left_top {
height: 42px;
background: #e1edf4;
padding-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
.monitor_point_left_topL {
height: 40px;
padding-top: 10px;
float: left;
div {
height: 40px;
float: left;
padding: 0 10px 0 10px;
line-height: 40px;
cursor: pointer;
font-family: Microsoft YaHei;
font-size: 14px;
span {
color: #35aff8;
}
}
div.on {
background: #fff;
border: 1px solid #c3c3c3;
border-bottom: none;
font-family: Microsoft YaHei;
font-weight: 400;
}
}
.monitor_point_left_topR {
// float: right;
margin-right: 20px;
// margin-top: 10px;
.el-input {
width: 109px;
}
/deep/ .el-input--mini .el-icon-search {
line-height: 28px;
color: #35aff8;
font-weight: bold;
}
}
}
.top_button {
background: url(~@/assets/images/sysiconbg.png);
}
</style>
src/pages/sys/point/index.vue
View file @ 0d415dc6
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages/sys/road/index copy.vue deleted 100644 → 0
View file @ 92f4158d
<template lang='pug'>
el-container(style="padding:0px;height:77.6vh;")
el-aside(
width="330px;",
style="z-index:1000;box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.2);background: #f4f4f4;"
)
el-card.treeCard(:body-style="{ padding: '0px'}" style="border: 0; box-shadow: 0 0 !important;")
div(slot="header")
span.title-bold( style="padding-right:150px;margin-left:10px;z-index:1001;" ) 线路资源树
//- el-tree(:data="data" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick")
el-tree.dic_tree( :data="data", :highlight-current="true", :props="defaultProps", :default-expand-all="true", @node-click="handleNodeClick" )
div(slot-scope="{ node, data }")
.dic_tree_header(v-if="data.children && data.children.length > 0")
.tree_house
img(src="../../../assets/images/zpoint.png")
span {{ data.name }}
span(v-else)
.tree_point
img(src="../../../assets/images/road-icon.png")
span.tree_label &nbsp; {{ node.label }}
el-container
el-header( style="height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(195, 195, 195, 1);" )
span.title-bold.title-left-color 站点维护
el-main.box_main
el-card()
el-table( :data="dataList", :stripe="true", @sort-change="sortChange", v-loading="dataListLoading", style="width:100%;", :header-cell-style="{ background: '#EEF8FF', color: '#333333' }" )
el-table-column(type="index",header-align="center", align="center", label="序号", width=50 )
template(scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
el-table-column( prop="lineName", columnKey="line_name", header-align="center", align="center", label="线路名称", sortable="custom" )
el-table-column( prop="stationName", columnKey="station_name", header-align="center", align="center", label="车站名称", sortable="custom" )
el-table-column( prop="code", header-align="center", align="center", label="车站编码", sortable="custom" )
el-table-column( prop="type", header-align="center", align="center", label="站点类型", sortable="custom" )
template(slot-scope="scope")
span(v-if="scope.row.type == '1'") 正线站点
span(v-if="scope.row.type == '2'") 换乘站点
el-table-column( prop="map", header-align="center", align="center", label="地图" )
template(slot-scope="scope")
el-button( type="text", size="mini", @click="showMap(scope.row.id)" ) 点击预览
el-table-column( prop="remark", header-align="center", align="center", label="站点描述", sortable="custom" )
el-table-column( prop="remark", header-align="center", align="center", label="操作", width=150 )
template(slot-scope="scope")
el-button( type="text", size="mini", index="1-1", v-if="isAuth('line:station:info')", @click="queryDetailHandle(scope.row)" ) 详情
el-button( type="text", size="mini", index="1-1", v-if="isAuth('line:station:update')", @click="addOrUpdateHandle(scope.row)" ) 编辑
el-footer.box_footer
el-pagination( @size-change="sizeChangeHandle", background, @current-change="currentChangeHandle", :current-page="pageIndex", :page-sizes="[10, 20, 50, 100]", :page-size="pageSize", :total="totalPage", layout="total, sizes, prev, pager, next, jumper" )
//- <!-- 弹窗, 新增 / 修改 -->
add-or-update( v-if="addOrUpdateVisible", ref="addOrUpdate", @refreshdatalist="getDataList" )
//- 详情
query-detail( v-if="queryDetailVisible", ref="queryDetail", @refreshdatalist="getDataList" )
//- 查看地图
query-image( v-if="queryImageVisible", ref="queryImage", @refreshdatalist="getDataList" )
</template>
<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import QueryImage from './query-image'
export default {
components: {
AddOrUpdate,
QueryDetail,
QueryImage
},
data() {
return {
word: '', //查询
dataList: [], //列表
dataListLoading: false,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
addOrUpdateVisible: false,
queryDetailVisible: false,
queryImageVisible: false,
ruleForm: {},
visible: false,
lineId: '', //选中的线路id
data: [],
defaultProps: {
children: 'children',
label: 'name'
},
typeList: [
{ id: 1, name: '正线站点' },
{ id: 2, name: '换乘站点' }
],
bean: ''
}
},
created() {
this.bean = JSON.parse(localStorage.getItem('sysSystem'))
this.initTree()
},
methods: {
//排序
sortChange(column) {
if (column.order === 'descending') {
this.order = 'desc'
} else {
this.order = 'asc'
}
if (column.column.columnKey) {
this.sort = column.column.columnKey
} else {
this.sort = column.prop
}
this.getDataList()
},
//线路树节点点击事件
handleNodeClick(data) {
this.lineId = data.id
this.pageIndex = 1
this.getDataList()
},
//添加或修改事件
addOrUpdateHandle(row, flagType) {
// console.log('addOrUpdateHandle:', row.id)
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(row.id)
})
},
//查看详情
queryDetailHandle(row) {
this.queryDetailVisible = true
this.$nextTick(() => {
this.$refs.queryDetail.init(row.id)
})
},
//查看地图
showMap(id) {
this.queryImageVisible = true
this.$nextTick(() => {
this.$refs.queryImage.init(id)
})
},
initTree() {
let data = {}
if (this.bean) {
//站点\线路
if (this.bean.type === '1' || this.bean.type === '2') {
data.id = this.bean.lineId
}
}
this.$http({
url: this.$http.adornUrl('/liLine/getTreeList'),
method: 'post',
data: data
}).then((data) => {
if (data && data.code === 0) {
this.data = data.tree
// console.log(
// 'this.data[0].children[0].id',
// this.data[0].children[0].id
// )
if (!this.lineId) {
this.lineId = this.data[0].children[0].id
}
this.getDataList()
}
})
},
getDataList() {
let data = {
page: this.pageIndex,
rows: this.pageSize
}
if (this.bean) {
//站点
if (this.bean.type === '1') {
data.id = this.bean.code
}
//线路
if (this.bean.type === '2') {
data.lineId = this.bean.lineId
}
}
this.$http({
url: this.$http.adornUrl('/liStation/list'),
method: 'post',
data: data
}).then((data) => {
if (data && data.code === 0) {
this.dataList = data.page.rows
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 提交
addsave() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(
`/liStation/${!this.ruleForm.id ? 'save' : 'update'}`
),
method: 'post',
data: this.ruleForm
}).then((data) => {
console.log(data)
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
},
closeForm() {
console.log('取消')
this.visible = false
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
}
}
}
</script>
<style lang='scss' scoped>
.tree_warp {
overflow: auto;
height: 100%;
box-sizing: border-box;
background: #f4f4f4;
}
.infopage {
margin: 24px;
padding: 24px;
height: 750px;
background-color: rgba(7, 58, 116, 0.596);
}
.tree_house {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 20px;
height: 20px;
vertical-align: middle;
// transform: translateY(-8px);
transform: translateX(-40px);
}
}
.tree_point {
width: 12px;
height: 18px;
display: inline-block;
img {
width: 12px;
height: 18px;
vertical-align: middle;
transform: translateY(-2px);
}
}
.dic_tree {
background: #f4f4f4;
width: 330px;
}
.dic_tree_header {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(54, 54, 54, 1);
text-indent: 25px;
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
display: none;
}
.dic_tree /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
display: none;
}
.dic_tree /deep/ .el-tree-node__expand-icon.is-leaf {
display: none;
}
.dic_tree
/deep/
.el-tree-node
> .el-tree-node__children
.el-tree-node__content {
width: 280px;
height: 30px;
line-height: 30px;
border-radius: 15px 0 0 15px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(0, 0, 0, 1);
background: white;
margin-top: 10px;
margin-left: 30px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
}
.el-tree--highlight-current
/deep/
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #35aff8;
color: white;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment