diff --git a/src/iscs/constant/deviceRender.js b/src/iscs/constant/deviceRender.js index 174a3aafc..126a8b9a9 100644 --- a/src/iscs/constant/deviceRender.js +++ b/src/iscs/constant/deviceRender.js @@ -270,7 +270,7 @@ deviceRender[deviceType.ArcStatus] = { deviceRender[deviceType.IscsButton] = { _type: deviceType.IscsButton, zlevel: 1, - z: 4 + z: 5 }; /** 状态表 */ deviceRender[deviceType.StateTable] = { diff --git a/src/iscs/iscs.js b/src/iscs/iscs.js index c590a1b82..35864a967 100644 --- a/src/iscs/iscs.js +++ b/src/iscs/iscs.js @@ -18,7 +18,7 @@ class Iscs { this.methods = opts.methods; // 鼠标事件 - this.events = { __Pan: 'pan', Selected: 'selected', Contextmenu: 'contextmenu', Keyboard: 'keyboard'}; + this.events = { __Pan: 'pan', Selected: 'selected', Contextmenu: 'contextmenu', Keyboard: 'keyboard', dblclick: 'dblclick'}; // 设备数据 this.iscsDevice = {}; @@ -275,6 +275,9 @@ class Iscs { case this.events.Selected: this.$mouseController.on(this.events.Selected, cb, context); break; + case this.events.dblclick: + this.$mouseController.on(this.events.dblclick, cb, context); + break; case this.events.Contextmenu: this.$mouseController.on(this.events.Contextmenu, cb, context); break; @@ -295,6 +298,9 @@ class Iscs { case this.events.Selected: this.$mouseController.off(this.events.Selected, cb); break; + case this.events.dblclick: + this.$mouseController.off(this.events.dblclick, cb); + break; case this.events.Contextmenu: this.$mouseController.off(this.events.Contextmenu, cb); break; diff --git a/src/iscs/keyboardController.js b/src/iscs/keyboardController.js index a3acae680..db0d828a1 100644 --- a/src/iscs/keyboardController.js +++ b/src/iscs/keyboardController.js @@ -7,20 +7,20 @@ class KeyboardController extends Eventful { this.$iscs = iscs; this.$zr = iscs.getZr(); this.events = iscs.getEvents(); - this.initHandler(this.$zr); + this.initHandler(this.$zr); } initHandler(zr) { if (zr) { var keydownHandle = this.keydown.bind(this); - var dom = this.$zr.dom; + var dom = this.$zr.dom; this.enable = function (opts) { opts = opts || {}; this._keyOnDownUp = opts.keyOnDownUp || true; - dom.addEventListener('keyup', keydownHandle, false); - dom.focus(); + dom.addEventListener('keyup', keydownHandle, false); + dom.focus(); }; this.disable = function () { @@ -35,7 +35,7 @@ class KeyboardController extends Eventful { keydown(e) { if (this._keyOnDownUp && !e.repeat) { - const currentEvent = keyboardEvents[e.key.toUpperCase()]||{event:""}; + const currentEvent = keyboardEvents[e.key.toUpperCase()] || {event:''}; this.trigger(this.events.Keyboard, currentEvent.event); } } diff --git a/src/iscs/mouseController.js b/src/iscs/mouseController.js index 90b205894..41ef9524d 100644 --- a/src/iscs/mouseController.js +++ b/src/iscs/mouseController.js @@ -54,6 +54,7 @@ class MouseController extends Eventful { zr.on('mousedown', this.mousedown, this); zr.on('mousemove', this.mousemove, this); zr.on('mouseup', this.mouseup, this); + zr.on('dblclick', this.dblclick, this); zr.on('touchstart', this.mousedown, this); zr.on('touchmove', this.mousemove, this); zr.on('touchend', this.mouseup, this); @@ -66,6 +67,7 @@ class MouseController extends Eventful { zr.off('touchstart', this.mousedown); zr.off('touchmove', this.mousemove); zr.off('touchend', this.mouseup); + zr.off('dblclick', this.dblclick); }; this.dispose = function () { @@ -83,11 +85,16 @@ class MouseController extends Eventful { this.isAllowDragging = data; } + dblclick(e) { + var em = this.checkEvent(e); + this.trigger(this.events.dblclick, em); + } + mousedown(e) { e.event.preventDefault(); e.event.stopPropagation(); - const em = new EventModel(e); - this.$zr.dom.focus(); + const em = new EventModel(e); + this.$zr.dom.focus(); this.eventTarget = em.eventTarget; this._offsetX = e.offsetX; this._offsetY = e.offsetY; diff --git a/src/iscs/shape/button.js b/src/iscs/shape/button.js index 353854727..000eb663a 100644 --- a/src/iscs/shape/button.js +++ b/src/iscs/shape/button.js @@ -27,6 +27,7 @@ export default class Button extends Group { this.buttonText = new Text({ zlevel: model.zlevel, z: model.z + 1, + z2: model.z2 || 0, style: { x: 0, y: 0, @@ -46,6 +47,7 @@ export default class Button extends Group { this.imageButton = new Image({ zlevel: model.zlevel, z: model.z, + z2: model.z2 || 0, style: { x: textRect.x - model.levelPadding, y: textRect.y - model.verticalPadding, @@ -61,6 +63,7 @@ export default class Button extends Group { this.textButtonRect = new Rect({ zlevel: model.zlevel, z: model.z, + z2: model.z2 || 0, shape: { x: textRect.x - model.levelPadding, y: textRect.y - model.verticalPadding, @@ -75,6 +78,7 @@ export default class Button extends Group { this.lineLeftTop = new Polyline({ zlevel: model.zlevel, z: model.z, + z2: model.z2 || 0, draggable: false, shape: { points: [ @@ -91,6 +95,7 @@ export default class Button extends Group { this.lineBottomRight = new Polyline({ zlevel: model.zlevel, z: model.z, + z2: model.z2 || 0, draggable: false, shape: { points: [ @@ -111,6 +116,7 @@ export default class Button extends Group { this.textButtonRectSmall = new Rect({ zlevel: model.zlevel, z: model.z, + z2: model.z2 || 0, shape: { x: textRect.x - model.levelPadding + 6, y: textRect.y - model.verticalPadding + 6, @@ -145,7 +151,6 @@ export default class Button extends Group { this.add(this.grouper); this.on('mouseout', (e) => { this.buttonText && this.buttonText.setStyle({textFill: model.textColor || '#FFF'}); }); this.on('mouseover', (e) => { this.buttonText && this.buttonText.setStyle({textFill: model.textColorActive || '#000'}); }); - } setModel(dx, dy) { this.model.point.x += dx; diff --git a/src/iscs/shape/group.js b/src/iscs/shape/group.js index a04b47c80..7f4e4601e 100644 --- a/src/iscs/shape/group.js +++ b/src/iscs/shape/group.js @@ -1,5 +1,6 @@ import Group from 'zrender/src/container/Group'; import Rect from 'zrender/src/graphic/shape/Rect'; +import Vue from 'vue'; export default class rect extends Group { constructor(device) { @@ -10,24 +11,36 @@ export default class rect extends Group { this.zlevel = device.model.zlevel; this.z = device.model.z; this.create(); + this.createMouseEvent(); + } + createMouseEvent() { + this.on('mouseout', (e) => { + this.hide(); + }); } create() { + let rect = null; + for (const key in this.model.elemMap) { + if (!rect) { + rect = Vue.prototype.$iscs.iscsDevice[key].instance.getBoundingRect(); + } else { + rect.union(Vue.prototype.$iscs.iscsDevice[key].instance.getBoundingRect()); + } + } const model = this.model; this.grouper = new Group({ id: model.code, - position: [model.point.x, model.point.y] + position: [rect.x, rect.y] }); - console.log(model); // 处理内部元素的包围框 - const rectWidth = 120; - const rectHeight = 60; + const rectWidth = rect.width + 10; + const rectHeight = rect.height + 10; this.iscsRect = new Rect({ zlevel: model.zlevel, - z: model.z, - z2: model.z2 || 0, + z: 15, // 层级最高 shape: { - x: 0, - y: 0, + x: -5, + y: -5, width: rectWidth, height: rectHeight }, @@ -39,9 +52,16 @@ export default class rect extends Group { }); this.grouper.add(this.iscsRect); this.add(this.grouper); + this.grouper.hide(); } setModel(dx, dy) { this.model.point.x += dx; this.model.point.y += dy; } + show() { + this.grouper.show(); + } + hide() { + this.grouper.hide(); + } } diff --git a/src/iscs/shape/iscsCircle.js b/src/iscs/shape/iscsCircle.js index e6de6b8e5..96f136a53 100644 --- a/src/iscs/shape/iscsCircle.js +++ b/src/iscs/shape/iscsCircle.js @@ -1,5 +1,6 @@ import Group from 'zrender/src/container/Group'; import Circle from 'zrender/src/graphic/shape/Circle'; +import Vue from 'vue'; export default class iscsCircle extends Group { constructor(device) { @@ -8,8 +9,19 @@ export default class iscsCircle extends Group { this._type = device.model._type; this._code = device.model.code; this.zlevel = device.model.zlevel; - this.z = device.model.z; + this.z = device.model.z; this.create(); + if (this.model.groupId) { + this.createMouseEvent(); + } + } + createMouseEvent() { + // this.on('mouseout', (e) => { + // Vue.prototype.$iscs.iscsDevice[this.model.groupId].instance.hide(); + // }); + this.on('mouseover', (e) => { + Vue.prototype.$iscs.iscsDevice[this.model.groupId].instance.show(); + }); } create() { const model = this.model; @@ -19,8 +31,8 @@ export default class iscsCircle extends Group { }); this.iscsCircle = new Circle({ zlevel: model.zlevel, - z: model.z, - z2: model.z2||0, + z: model.z, + z2: model.z2 || 0, shape: { cx:this.model.radius, cy:this.model.radius, @@ -35,8 +47,18 @@ export default class iscsCircle extends Group { this.grouper.add(this.iscsCircle); this.add(this.grouper); } + setState(model) { + this.iscsCircle.setStyle('fill', model.fillColor); + this.iscsCircle.setStyle('stroke', model.strokeColor); + } setModel(dx, dy) { this.model.point.x += dx; this.model.point.y += dy; } + getBoundingRect() { + const rect = this.iscsCircle.getBoundingRect().clone(); + rect.x = rect.x + this.model.point.x; + rect.y = rect.y + this.model.point.y; + return rect; + } } diff --git a/src/iscs/shape/rect.js b/src/iscs/shape/rect.js index d180fb6a5..806a0bba9 100644 --- a/src/iscs/shape/rect.js +++ b/src/iscs/shape/rect.js @@ -1,5 +1,6 @@ import Group from 'zrender/src/container/Group'; import Rect from 'zrender/src/graphic/shape/Rect'; +import Vue from 'vue'; export default class rect extends Group { constructor(device) { @@ -10,6 +11,18 @@ export default class rect extends Group { this.zlevel = device.model.zlevel; this.z = device.model.z; this.create(); + if (this.model.groupId) { + this.createMouseEvent(); + } + + } + createMouseEvent() { + // this.on('mouseout', (e) => { + // Vue.prototype.$iscs.iscsDevice[this.model.groupId].instance.hide(); + // }); + this.on('mouseover', (e) => { + Vue.prototype.$iscs.iscsDevice[this.model.groupId].instance.show(); + }); } create() { const model = this.model; @@ -46,4 +59,10 @@ export default class rect extends Group { this.model.point.x += dx; this.model.point.y += dy; } + getBoundingRect() { + const rect = this.iscsRect.getBoundingRect().clone(); + rect.x = rect.x + this.model.point.x; + rect.y = rect.y + this.model.point.y; + return rect; + } } diff --git a/src/iscs/shape/text.js b/src/iscs/shape/text.js index 6341ed541..8b6386bb6 100644 --- a/src/iscs/shape/text.js +++ b/src/iscs/shape/text.js @@ -1,5 +1,6 @@ import Group from 'zrender/src/container/Group'; import Text from 'zrender/src/graphic/Text'; +import Vue from 'vue'; export default class text extends Group { constructor(device) { @@ -10,6 +11,17 @@ export default class text extends Group { this.zlevel = device.model.zlevel; this.z = device.model.z; this.create(); + if (this.model.groupId) { + this.createMouseEvent(); + } + } + createMouseEvent() { + // this.on('mouseout', (e) => { + // Vue.prototype.$iscs.iscsDevice[this.model.groupId].instance.hide(); + // }); + this.on('mouseover', (e) => { + Vue.prototype.$iscs.iscsDevice[this.model.groupId].instance.show(); + }); } create() { @@ -61,4 +73,10 @@ export default class text extends Group { this.model.width = width; this.model.height = height; } + getBoundingRect() { + const rect = this.textName.getBoundingRect().clone(); + rect.x = rect.x + this.model.point.x; + rect.y = rect.y + this.model.point.y; + return rect; + } } diff --git a/src/iscs/status/elType.js b/src/iscs/status/elType.js index fff8348a9..b406efd4f 100644 --- a/src/iscs/status/elType.js +++ b/src/iscs/status/elType.js @@ -1,6 +1,6 @@ export default { - Fixed: { lab: 'Fixed', describe: '状态值不做处理,请选择该类型'}, // 固定值 - A: { lab: 'a', describe: '文字 远/近 状态转换类型'}, // 远 - B: { lab: 'b', describe: '开关阀门矩形 状态转换类型'}, // 红框 阀门 - C: { lab: 'c', describe: '电流电压文字转换类型'} // 数组 + Fixed: { lab: 'Fixed', describe: '状态值不做处理'}, // 固定值 + A: { lab: 'a', describe: '文字远/近类型'}, // 远 + B: { lab: 'b', describe: '开关阀门类型'}, // 红框 阀门 + C: { lab: 'c', describe: '电流电压类型'} // 数组 }; diff --git a/src/iscs/status/grType.js b/src/iscs/status/grType.js index 62b45df35..afb348c38 100644 --- a/src/iscs/status/grType.js +++ b/src/iscs/status/grType.js @@ -1,3 +1,3 @@ export default { - A: { lab: 'a', describe: '自定义模板类型'} // 远 红框 阀门 + A: { lab: 'a', describe: '自定义模板类型' } // 远 红框 阀门 }; diff --git a/src/iscs/status/mapGroup.js b/src/iscs/status/mapGroup.js index 88ee7bb04..d384e70f8 100644 --- a/src/iscs/status/mapGroup.js +++ b/src/iscs/status/mapGroup.js @@ -7,6 +7,10 @@ export default { {type: elType.A}, {type: elType.B}, {type: elType.C} + ], + statusList: [ + { key: 'valve', value: true, des: '某某开关分闸', childList: [{type: 'b', status: 'stateB'}] }, + { key: 'valve', value: false, des: '某某开关分闸', childList: [{type: 'b', status: 'stateA'}] } ] } }; diff --git a/src/iscs/transformHandle.js b/src/iscs/transformHandle.js index d0ec9cbf3..08530f907 100644 --- a/src/iscs/transformHandle.js +++ b/src/iscs/transformHandle.js @@ -17,12 +17,13 @@ class TransformHandle { } revisibleView(view) { - if (this.checkVisible(view)) { - view.show(); - } else { - view.hide(); + if (view._type != 'IscsGroup') { + if (this.checkVisible(view)) { + view.show(); + } else { + view.hide(); + } } - view.dirty(); } diff --git a/src/iscs/utils/parser.js b/src/iscs/utils/parser.js index 25d51f5f2..1afd389c5 100644 --- a/src/iscs/utils/parser.js +++ b/src/iscs/utils/parser.js @@ -226,7 +226,7 @@ export function parser(data) { zrUtil.each(data.fuzhouPsdList || [], elem=> { iscsDevice[elem.code] = deviceFactory(deviceType.FuzhouPsd, elem); }); - zrUtil.each(data.IscsGroupList || [], elem=> { + zrUtil.each(data.iscsGroupList || [], elem=> { iscsDevice[elem.code] = deviceFactory(deviceType.IscsGroup, elem); }); } diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js index bef7b326c..125263262 100644 --- a/src/jmapNew/map.js +++ b/src/jmapNew/map.js @@ -503,7 +503,7 @@ class Jlmap { } } else if (elem.deviceType === 'DIRECTION_ROD' && elem.uniqueCode) { store.state.map.map.directionRodList.forEach(item => { - if (elem.uniqueCode === `${item.startStationCode}-${item.endStationCode}-${item.right}`) { + if (elem.uniqueCode === item.uniqueCode) { const updateRod = this.mapDevice[item.code]; updateRod.reversed = elem.reversed; this.$painter.update(updateRod); diff --git a/src/store/modules/iscs.js b/src/store/modules/iscs.js index e4e7802ef..23ddb0316 100644 --- a/src/store/modules/iscs.js +++ b/src/store/modules/iscs.js @@ -33,6 +33,13 @@ const iscs = { updateDeviceData: (state) => { return state.updateDeviceData; }, + iscsGroupList: (state) => { + if (state.iscs) { + return state.iscs.iscsGroupList || []; + } else { + return []; + } + }, vidiconList: (state) => { if (state.iscs) { return state.iscs.vidiconList; @@ -129,6 +136,9 @@ const iscs = { }, selectedCount: (state) => { return state.selectedCount; + }, + getDeviceByCode: (state) => (code) => { + return state.iscsDevice[code]; } }, diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js index a1032fe84..524befeac 100644 --- a/src/utils/baseUrl.js +++ b/src/utils/baseUrl.js @@ -2,8 +2,8 @@ export function getBaseUrl() { let BASE_API; if (process.env.NODE_ENV === 'development') { // BASE_API = 'https://joylink.club/jlcloud'; - // BASE_API = 'https://test.joylink.club/jlcloud'; - BASE_API = 'http://192.168.3.5:9000'; // 袁琪 + BASE_API = 'https://test.joylink.club/jlcloud'; + // BASE_API = 'http://192.168.3.5:9000'; // 袁琪 // BASE_API = 'http://192.168.3.6:9000'; // 旭强 // BASE_API = 'http://192.168.3.175:9000'; // 张赛 // BASE_API = 'http://192.168.3.82:9000'; // 杜康 diff --git a/src/views/iscs/iscsDraw/group/card.vue b/src/views/iscs/iscsDraw/group/card.vue index b77f26fca..b59976b6c 100644 --- a/src/views/iscs/iscsDraw/group/card.vue +++ b/src/views/iscs/iscsDraw/group/card.vue @@ -1,18 +1,18 @@ > + + diff --git a/src/views/iscs/iscsDraw/group/tab-template.vue b/src/views/iscs/iscsDraw/group/tab-template.vue index 76f3ef98b..55f689a0a 100644 --- a/src/views/iscs/iscsDraw/group/tab-template.vue +++ b/src/views/iscs/iscsDraw/group/tab-template.vue @@ -1,17 +1,129 @@ + diff --git a/src/views/iscs/iscsSystem/stationConfig/dialog/valve.vue b/src/views/iscs/iscsSystem/stationConfig/dialog/valve.vue new file mode 100644 index 000000000..fe38feba4 --- /dev/null +++ b/src/views/iscs/iscsSystem/stationConfig/dialog/valve.vue @@ -0,0 +1,173 @@ + + + + + diff --git a/src/views/iscs/iscsSystem/stationConfig/psdSystem/index.vue b/src/views/iscs/iscsSystem/stationConfig/psdSystem/index.vue index 4bf70edc5..34c733e92 100644 --- a/src/views/iscs/iscsSystem/stationConfig/psdSystem/index.vue +++ b/src/views/iscs/iscsSystem/stationConfig/psdSystem/index.vue @@ -19,6 +19,11 @@ export default { components:{ iscsSystem }, + data() { + return { + scaleRate:window.innerWidth / 1950 + }; + }, computed:{ stationName() { return this.$route.query.stationName; @@ -37,10 +42,11 @@ export default { system: 'psdSystem', userInterface: 'psdOne' }; + this.$refs.iscsPlate.show({}, this.width, this.height, this.scaleRate); getIscsData(params).then(resp=>{ if (resp.data) { const data = JSON.parse(resp.data.graphData); - this.$refs.iscsPlate.show(data); + this.$refs.iscsPlate.show(data, this.width, this.height, this.scaleRate); } }); } diff --git a/src/views/iscsSystem/index.vue b/src/views/iscsSystem/index.vue index 4437a2dd6..91f6f9f92 100644 --- a/src/views/iscsSystem/index.vue +++ b/src/views/iscsSystem/index.vue @@ -147,6 +147,7 @@ export default { this.$iscs.on('contextmenu', this.onContextMenu, this); if (this.$route.query.group) { this.$iscs.on('selected', this.onSelected, this); + this.$iscs.on('dblclick', this.onDblclick, this); } if (this.$route.path.startsWith('/iscs/design')) { @@ -236,6 +237,10 @@ export default { }, // 点击选择事件 onSelected(em) { + console.log(em); + }, + onDblclick(em) { + console.log(em); }, // 右键点击事件 onContextMenu(em) { diff --git a/src/views/newMap/newMapdraft/mapoperate/directionRod.vue b/src/views/newMap/newMapdraft/mapoperate/directionRod.vue index 8968b254e..de6fb3dd0 100644 --- a/src/views/newMap/newMapdraft/mapoperate/directionRod.vue +++ b/src/views/newMap/newMapdraft/mapoperate/directionRod.vue @@ -191,9 +191,7 @@ export default { if (selected && selected._type.toUpperCase() === 'DirectionRod'.toUpperCase()) { this.activeName = 'first'; this.resetEditData(); - console.log(this.editModel, '------------'); this.editModel = deepAssign(this.editModel, selected); - console.log(this.editModel, '***********'); } if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'locationSectionCode'.toUpperCase()) { this.addModel.sectionCode = selected.code; @@ -213,7 +211,6 @@ export default { create() { const uid = getUID('DirectionRod', this.floodGateList || []); const section = this.$store.getters['map/getDeviceByCode'](this.addModel.sectionCode); - console.log(section); const model = { _type: 'DirectionRod', code: uid, @@ -231,6 +228,7 @@ export default { this.$refs.createForm.resetForm(); }, updateMapModel(data) { + data.uniqueCode = `${data.startStationCode}-${data.endStationCode}-${data.right}`; this.$emit('updateMapModel', data); }, deleteObj() {