调整综合监控流程
This commit is contained in:
zyy
parent
7f4f0d661f
commit
4b9a98c35a
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 + 30;
|
||||
const rectHeight = rect.height + 30;
|
||||
this.iscsRect = new Rect({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
z2: model.z2 || 0,
|
||||
z: 0,
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x: -15,
|
||||
y: -15,
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: '电流电压类型'} // 数组
|
||||
};
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export default {
|
||||
A: { lab: 'a', describe: '自定义模板类型'} // 远 红框 阀门
|
||||
A: { lab: 'a', describe: '自定义模板类型' } // 远 红框 阀门
|
||||
};
|
||||
|
||||
@ -7,6 +7,10 @@ export default {
|
||||
{type: elType.A},
|
||||
{type: elType.B},
|
||||
{type: elType.C}
|
||||
],
|
||||
statusList: [
|
||||
{ key: 'valve', value: true, des: '阀门' },
|
||||
{ key: 'valve', value: false, des: '阀门' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
@ -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];
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="map-control">
|
||||
<el-card type="border-card" class="heightClass">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="handleSave">{{ $t('ibp.save') }}</el-button></div>
|
||||
<el-tabs class="mapEdit" type="border-card" v-model="active">
|
||||
<el-tab-pane name="first" label="自定用创建">
|
||||
<tab-custom style="width: 100%; height: 100%;" @createDataModel="createDataModel" @deleteDataModel="deleteDataModel"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="second" label="模板创建">
|
||||
<tab-template style="width: 100%; height: 100%;" @createDataModel="createDataModel" @deleteDataModel="deleteDataModel"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="map-control">
|
||||
<el-card type="border-card" class="heightClass">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="handleSave">{{ $t('ibp.save') }}</el-button></div>
|
||||
<el-tabs v-model="active" class="mapEdit" type="border-card">
|
||||
<el-tab-pane name="first" label="自定用创建">
|
||||
<tab-custom style="width: 100%; height: 100%;" @createDataModel="createDataModel" @deleteDataModel="deleteDataModel" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="second" label="模板选择">
|
||||
<tab-template style="width: 100%; height: 100%;" @createDataModel="createDataModel" @deleteDataModel="deleteDataModel" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TabCustom from './tab-custom.vue';
|
||||
@ -20,21 +20,21 @@ import TabTemplate from './tab-template.vue';
|
||||
import {deviceFactory} from '@/iscs/utils/parser';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TabCustom,
|
||||
TabTemplate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 'first'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createDataModel(models) {
|
||||
components: {
|
||||
TabCustom,
|
||||
TabTemplate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
createDataModel(models) {
|
||||
this.$store.dispatch('iscs/updateIscsDevices', models.map(el => {
|
||||
const device = deviceFactory(el._type, el);
|
||||
return device.model;
|
||||
}));
|
||||
const device = deviceFactory(el._type, el);
|
||||
return device.model;
|
||||
}));
|
||||
},
|
||||
deleteDataModel(model) {
|
||||
this.$store.dispatch('iscs/deleteIscsDevices', model);
|
||||
@ -42,9 +42,9 @@ export default {
|
||||
handleSave() {
|
||||
const data = JSON.stringify(this.$store.state.iscs.iscs);
|
||||
this.$emit('handleSave', data);
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map-control {
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<div class="flex-inline">
|
||||
<el-select size="mini" v-model="type" clearable placeholder="请选择元素类型">
|
||||
<el-option v-for="item in options" :key="item.lab" :label="item.describe" :value="item.lab"></el-option>
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" @click="doCreate" >添加</el-button>
|
||||
</div>
|
||||
<div class="flex-inline">
|
||||
<el-select v-model="type" size="mini" clearable placeholder="请选择元素类型">
|
||||
<el-option v-for="item in options" :key="item.lab" :label="item.describe" :value="item.lab" />
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" @click="doCreate">添加</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCreate() {
|
||||
this.$emit('create', this.type);
|
||||
}
|
||||
}
|
||||
}
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doCreate() {
|
||||
this.$emit('create', this.type);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.flex-inline {
|
||||
|
||||
@ -1,148 +1,232 @@
|
||||
<template>
|
||||
<div class="custom">
|
||||
<el-form label-width="80px" size="small" :model="formModel" :rules="rules">
|
||||
<el-form-item label="组名称" prop="name">
|
||||
<el-input v-model="formModel.name" placeholder="请输入组名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组类型" prop="name">
|
||||
<el-select v-model="formModel.type" clearable placeholder="请选择组类型">
|
||||
<el-option v-for="item in grTypeList" :key="item.lab" :label="item.describe" :value="item.lab"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="元素列表" prop="elemList" />
|
||||
<el-table stripe border :data="formModel.elemList" style="width: 100%" height="500px">
|
||||
<el-table-column align="center">
|
||||
<template slot="header">
|
||||
<el-create :options="elTypeList" @create="handleCreate" />
|
||||
</template>
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column label="元素类型" prop="type" />
|
||||
<el-table-column label="元素编码" prop="code" />
|
||||
<el-table-column width="180" >
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" :type="active == scope.$index? 'danger': ''" @click="handleActive(scope.$index, scope.row)">激活</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="footer">
|
||||
<el-button style="margin-left:10px" type="primary" @click="doCreateGroup">创建</el-button>
|
||||
<!-- <el-button style="margin-left:10px" type="info" @click="doUpdeteGroup">修改</el-button>
|
||||
<el-button style="margin-left:10px" type="danger" @click="doDeleteGroup">删除</el-button> -->
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="custom">
|
||||
<el-form label-width="80px" size="small" :model="formModel" :rules="rules">
|
||||
<el-form-item label="组名称" prop="name">
|
||||
<el-input v-model="formModel.name" placeholder="请输入组名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组类型" prop="name">
|
||||
<el-select v-model="formModel.type" clearable placeholder="请选择组类型" @change="changeType">
|
||||
<el-option v-for="item in grTypeList" :key="item.lab" :label="item.describe" :value="item.lab" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="元素列表" prop="elemList" />
|
||||
<el-table stripe border :data="formModel.elemList" style="width: 100%; margin-bottom: 20px;" height="300px">
|
||||
<el-table-column align="center">
|
||||
<template slot="header">
|
||||
<el-create :options="elTypeList" @create="handleCreate" />
|
||||
</template>
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column label="元素类型" prop="des" />
|
||||
<el-table-column label="元素编码" prop="code" />
|
||||
<el-table-column width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" :type="active == scope.$index? 'danger': ''" @click="handleActive(scope.$index, scope.row)">激活</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-form-item label="状态列表" />
|
||||
<el-table stripe border :data="formModel.statusList" style="width: 100%; margin-bottom: 50px;" height="300px">
|
||||
<el-table-column align="center">
|
||||
<template slot="header">
|
||||
<el-button size="mini" type="primary" style="float: right;" @click="createStatus">添加</el-button>
|
||||
</template>
|
||||
<el-table-column label="描述" prop="des" width="60">
|
||||
<template slot-scope="scope" style="padding: 0;">
|
||||
<el-input v-model="scope.row.des" style="position: absolute;left: 0;top: 6px;" class="no_padding_input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字段" prop="key" width="62">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.key" style="position: absolute;left: 0;top: 6px;" class="no_padding_input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="值" prop="value" width="52">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.value" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(tag, index) in scope.row.childList" :key="index" closable @close="handleClose(tag, scope.row.childList)">
|
||||
{{ tag.code }}--{{ tag.status }}
|
||||
</el-tag>
|
||||
{{ elemCode }}
|
||||
<el-select v-model="elemStatusType" size="small" clearable placeholder="" @change="changeStatus">
|
||||
<el-option v-for="item in elTypeList" :key="item.lab" :label="item.describe" :value="item.lab" />
|
||||
</el-select>
|
||||
<el-select v-model="elemStatus" size="small" clearable>
|
||||
<el-option v-for="item in optionsList" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-button size="mini" :type="activeChild == scope.$index? 'danger': ''" @click="handleActiveChild(scope.$index, scope.row)">激活</el-button>
|
||||
<el-button size="small" @click="addChildElement(scope.row)">添加</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="danger" @click="handleDeleteStatus(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="footer">
|
||||
<el-button style="margin-left:10px" size="small" type="primary" @click="doCreateGroup">创建</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import elType from '@/iscs/status/elType.js';
|
||||
import grType from '@/iscs/status/grType.js';
|
||||
import mapGroup from '@/iscs/status/mapGroup.js';
|
||||
import mapElement from '@/iscs/status/mapElement.js';
|
||||
import elCreate from './create';
|
||||
import deviceType from '@/iscs/constant/deviceType.js';
|
||||
import {getUID} from '@/iscs/utils/Uid';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
elCreate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: -1,
|
||||
formModel: {
|
||||
name: '',
|
||||
type: '',
|
||||
elemList: []
|
||||
},
|
||||
grTypeList: [],
|
||||
elTypeList: [],
|
||||
elTypeMap: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
name: [
|
||||
{ required: true, message: '请输入组名称', trigger: 'blur' },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择组类型', trigger: 'change' },
|
||||
],
|
||||
elemList: [
|
||||
{ type: 'array', required: true, message: '组元素不能为空', trigger: 'change' },
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.iscs.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['iscs/updateDeviceData'];
|
||||
this.handleSetSelect(model);
|
||||
components: {
|
||||
elCreate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: -1,
|
||||
activeChild: -1,
|
||||
elemCode: '',
|
||||
elemStatus: '',
|
||||
elemStatusType: '',
|
||||
optionsList: [],
|
||||
formModel: {
|
||||
name: '',
|
||||
type: '',
|
||||
elemList: [],
|
||||
statusList: []
|
||||
},
|
||||
grTypeList: [],
|
||||
elTypeList: [],
|
||||
elTypeMap: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
name: [
|
||||
{ required: true, message: '请输入组名称', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择组类型', trigger: 'change' }
|
||||
],
|
||||
elemList: [
|
||||
{ type: 'array', required: true, message: '组元素不能为空', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.elTypeMap = {}
|
||||
this.grTypeList = Object.values(grType);
|
||||
this.elTypeList = Object.values(elType);
|
||||
Object.values(grType).forEach(el => {
|
||||
this.elTypeMap[el.lab] = el;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleActive(index, row) {
|
||||
this.active = this.active == index ? -1: index;
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
this.formModel.elemList.splice(index, 1);
|
||||
this.active = -1;
|
||||
},
|
||||
handleCreate(type) {
|
||||
if (type) {
|
||||
console.log(type);
|
||||
this.formModel.elemList.push({ type: type, code: '' })
|
||||
} else {
|
||||
this.$message.info('请选择元素类型')
|
||||
}
|
||||
},
|
||||
handleSetSelect(model) {
|
||||
const elem = this.formModel.elemList[this.active];
|
||||
if (this.active >= 0) {
|
||||
if (elem) { elem.code = model.code; }
|
||||
this.active = -1;
|
||||
} else {
|
||||
this.formModel = {}
|
||||
this.isUpdate = true;
|
||||
}
|
||||
},
|
||||
doCreateGroup() {
|
||||
const modelList = [];
|
||||
const model = {
|
||||
code: getUID('group'),
|
||||
_type: deviceType.IscsGroup,
|
||||
name: this.formModel.name,
|
||||
type: this.formModel.type,
|
||||
elemMap: {}
|
||||
}
|
||||
watch: {
|
||||
'$store.state.iscs.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['iscs/updateDeviceData'];
|
||||
this.handleSetSelect(model);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.elTypeMap = {};
|
||||
this.grTypeList = Object.values(grType);
|
||||
this.elTypeList = Object.values(elType);
|
||||
Object.values(grType).forEach(el => {
|
||||
this.elTypeMap[el.lab] = el;
|
||||
});
|
||||
// this.optionsListObj = mapElement;
|
||||
},
|
||||
methods: {
|
||||
changeType(type) {
|
||||
this.formModel.elemList = [];
|
||||
type && mapGroup[type].elemList.forEach(item => {
|
||||
this.formModel.elemList.push({ type: item.type.lab, des: item.type.describe, code: '' });
|
||||
});
|
||||
this.formModel.statusList = [];
|
||||
type && mapGroup[type].statusList.forEach(item => {
|
||||
this.formModel.statusList.push({ childList: [], ...item});
|
||||
});
|
||||
},
|
||||
handleActive(index, row) {
|
||||
this.active = this.active == index ? -1 : index;
|
||||
},
|
||||
handleActiveChild(index, row) {
|
||||
this.activeChild = this.activeChild == index ? -1 : index;
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
this.formModel.elemList.splice(index, 1);
|
||||
this.active = -1;
|
||||
},
|
||||
handleCreate(type, describe) {
|
||||
if (type) {
|
||||
console.log(this.elTypeList);
|
||||
const opt = this.elTypeList.filter(ele => ele.lab == type);
|
||||
this.formModel.elemList.push({ type: type, des: opt[0].describe, code: '' });
|
||||
} else {
|
||||
this.$message.info('请选择元素类型');
|
||||
}
|
||||
},
|
||||
handleSetSelect(model) {
|
||||
const elem = this.formModel.elemList[this.active];
|
||||
if (this.active >= 0) {
|
||||
if (elem) { elem.code = model.code; }
|
||||
this.active = -1;
|
||||
}
|
||||
if (this.activeChild >= 0) {
|
||||
this.elemCode = model.code;
|
||||
this.activeChild = -1;
|
||||
}
|
||||
},
|
||||
doCreateGroup() {
|
||||
const modelList = [];
|
||||
const model = {
|
||||
code: getUID('group'),
|
||||
_type: deviceType.IscsGroup,
|
||||
name: this.formModel.name,
|
||||
type: this.formModel.type,
|
||||
elemMap: {},
|
||||
statusList: this.formModel.statusList
|
||||
};
|
||||
|
||||
this.formModel.elemList.forEach(el => {
|
||||
model.elemMap[el.code] = el;
|
||||
const device = this.$iscs.iscsDevice[el.code];
|
||||
if (device &&
|
||||
device.model) {
|
||||
device.groupId = model.code;
|
||||
modelList.push(device.model)
|
||||
}
|
||||
});
|
||||
this.formModel.elemList.forEach(el => {
|
||||
model.elemMap[el.code] = el;
|
||||
const device = this.$iscs.iscsDevice[el.code];
|
||||
if (device && device.model) {
|
||||
device.model['groupId'] = model.code;
|
||||
modelList.push(device.model);
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('createDataModel', modelList.concat(model));
|
||||
},
|
||||
doUpdateGroup() {
|
||||
},
|
||||
doDeleteGroup() {
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$emit('createDataModel', modelList.concat(model));
|
||||
},
|
||||
changeStatus(type) {
|
||||
if (mapElement[type]) {
|
||||
this.optionsList = Object.keys(mapElement[type].stateMap);
|
||||
} else {
|
||||
this.optionsList = [];
|
||||
}
|
||||
},
|
||||
createStatus() {
|
||||
this.formModel.statusList.push({ childList: [], key: '', value: '', des: '' });
|
||||
},
|
||||
addChildElement(row) {
|
||||
row.childList.push({ code: this.elemCode, type: this.elemStatusType, status: this.elemStatus });
|
||||
this.elemCode = '';
|
||||
this.elemStatusType = '';
|
||||
this.elemStatus = '';
|
||||
},
|
||||
handleDeleteStatus(index, row) {
|
||||
this.formModel.statusList.splice(index, 1);
|
||||
this.activeChild = -1;
|
||||
},
|
||||
handleClose(tag, row) {
|
||||
row.splice(row.indexOf(tag), 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
@ -161,4 +245,10 @@ export default {
|
||||
z-index: 9,
|
||||
}
|
||||
}
|
||||
</style>>
|
||||
</style>
|
||||
<style>
|
||||
.no_padding_input .el-input__inner{
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,129 @@
|
||||
<template>
|
||||
<div class="template" >
|
||||
开发中
|
||||
</div>
|
||||
<div class="template">
|
||||
<el-form ref="form" label-width="160" size="mini" :model="formModel" class="form_data">
|
||||
<el-form-item label="编组code" prop="code">
|
||||
<el-select
|
||||
v-model="formModel.code"
|
||||
filterable
|
||||
clearable
|
||||
@change="deviceChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in iscsGroupList"
|
||||
:key="option.code"
|
||||
:label="option.name"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="编组名称:" prop="name">
|
||||
<el-input v-model="formModel.name" placeholder="请输入内容" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编组code:" prop="code">
|
||||
<div>{{ formModel.code }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="编组元素:">
|
||||
<el-tag v-for="(item, index) in formModel.elemList" :key="index" style="margin-right: 10px; margin-bottom: 8px;">{{ item.code }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="footer">
|
||||
<el-button type="primary" size="small" style="margin-left:10px" @click="onSubmit">修改</el-button>
|
||||
<el-button style="margin-left:10px" type="danger" size="small" @click="doDeleteGroup">删除</el-button>
|
||||
<el-button style="margin-left:10px" type="primary" size="small" @click="groupAllShow">全部显示</el-button>
|
||||
<el-button style="margin-left:10px" type="primary" size="small" @click="groupAllHide">全部隐藏</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
formModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
elemMap: {},
|
||||
elemList: []
|
||||
},
|
||||
selectedModel: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('iscs', [
|
||||
'iscsGroupList'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
if (code) {
|
||||
this.deviceSelect(this.$iscs.iscsDevice[code]);
|
||||
const device = this.$iscs.iscsDevice[code];
|
||||
device.instance.show();
|
||||
} else {
|
||||
this.groupAllHide();
|
||||
this.formModel = {
|
||||
code: '',
|
||||
name: '',
|
||||
elemMap: {},
|
||||
elemList: []
|
||||
};
|
||||
}
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.formModel.name = selected.model.name;
|
||||
this.formModel.elemMap = selected.model.elemMap;
|
||||
this.formModel.elemList = [];
|
||||
for (const key in selected.model.elemMap) {
|
||||
this.formModel.elemList.push(selected.model.elemMap[key]);
|
||||
}
|
||||
this.selectedModel = selected.model;
|
||||
},
|
||||
onSubmit() {
|
||||
this.selectedModel.name = this.formModel.name;
|
||||
this.$emit('createDataModel', this.selectedModel);
|
||||
this.formModel = {
|
||||
code: '',
|
||||
name: '',
|
||||
elemMap: {},
|
||||
elemList: []
|
||||
};
|
||||
},
|
||||
doDeleteGroup() {
|
||||
const Model = {
|
||||
code: this.formModel.code,
|
||||
_type: 'IscsGroup'
|
||||
};
|
||||
this.$emit('deleteDataModel', Model);
|
||||
const modelList = [];
|
||||
for (const key in this.formModel.elemMap) {
|
||||
const device = this.$iscs.iscsDevice[key];
|
||||
if (device && device.model) {
|
||||
device.model['groupId'] = '';
|
||||
modelList.push(device.model);
|
||||
}
|
||||
}
|
||||
this.$emit('createDataModel', modelList);
|
||||
this.formModel = {
|
||||
code: '',
|
||||
name: '',
|
||||
elemMap: {}
|
||||
};
|
||||
},
|
||||
groupAllShow() {
|
||||
this.iscsGroupList.forEach(group => {
|
||||
const device = this.$iscs.iscsDevice[group.code];
|
||||
device.instance.show();
|
||||
});
|
||||
},
|
||||
groupAllHide() {
|
||||
this.iscsGroupList.forEach(group => {
|
||||
const device = this.$iscs.iscsDevice[group.code];
|
||||
device.instance.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;">
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px" style="width: 100%;padding: 10px 50px;">
|
||||
<el-form-item label="图层:" prop="z2">
|
||||
<el-form-item label="图层:" prop="z2">
|
||||
<el-input-number v-model="form.z2" controls-position="right" :min="0" size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="半径:" prop="radius">
|
||||
@ -44,8 +44,8 @@ export default {
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
z2: 1,
|
||||
code: '',
|
||||
z2: 1,
|
||||
fillColor: '',
|
||||
borderWidth: '',
|
||||
strokeColor: '',
|
||||
@ -75,8 +75,8 @@ export default {
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.z2 = model.z2||0;
|
||||
this.form.code = model.code;
|
||||
this.form.z2 = model.z2 || 0;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.borderWidth = model.borderWidth;
|
||||
this.form.strokeColor = model.strokeColor;
|
||||
@ -97,8 +97,8 @@ export default {
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.isUpdate ? this.form.code : getUID('IscsCircle', this.iscs.iscsCircleList),
|
||||
_type: 'IscsCircle',
|
||||
z2: this.form.z2,
|
||||
_type: 'IscsCircle',
|
||||
z2: this.form.z2,
|
||||
fillColor: this.form.fillColor,
|
||||
borderWidth: this.form.borderWidth,
|
||||
strokeColor: this.form.strokeColor,
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
<iscs-environment v-else-if="iscsMode=='environment02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 环境与设备监控系统 -->
|
||||
<iscs-psd v-else-if="iscsMode=='psdSystem02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 屏蔽门系统 -->
|
||||
</div>
|
||||
<div class="right-card" :class="{'hide': tableShow}">
|
||||
<div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
|
||||
<group-card @handleSave="handleSave" />
|
||||
</div>
|
||||
<div class="right-card" :class="{'hide': tableShow}">
|
||||
<div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
|
||||
<group-card @handleSave="handleSave" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -66,9 +66,9 @@ export default {
|
||||
IscsPowerMonitoring,
|
||||
IscsSignalSystem,
|
||||
IscsPsd,
|
||||
IscsEnvironment,
|
||||
IscsEnvironment,
|
||||
|
||||
GroupCard
|
||||
GroupCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -77,8 +77,8 @@ export default {
|
||||
height: this.$store.state.app.height - 60
|
||||
},
|
||||
widthLeft: Number(localStore.get('LeftWidth')) || 450,
|
||||
draftShow: false,
|
||||
tableShow: false
|
||||
draftShow: false,
|
||||
tableShow: false
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
@ -105,10 +105,10 @@ export default {
|
||||
},
|
||||
clickDraftBtn() {
|
||||
this.draftShow = !this.draftShow;
|
||||
},
|
||||
clickTableBtn() {
|
||||
this.tableShow = !this.tableShow;
|
||||
},
|
||||
},
|
||||
clickTableBtn() {
|
||||
this.tableShow = !this.tableShow;
|
||||
},
|
||||
handleSave(data) {
|
||||
const param = {
|
||||
graphData: data,
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
<template>
|
||||
<div class="iscsCanvas">
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: widthCanvas +'px', height: canvasHeight +'px' }" class="iscs-canvas" />
|
||||
<valve-dialog ref="valve" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { parser } from '@/iscs/utils/parser';
|
||||
import Iscs from '@/iscs/iscs';
|
||||
import ValveDialog from '../dialog/valve';
|
||||
export default {
|
||||
name: 'IscsStation',
|
||||
components: {
|
||||
ValveDialog
|
||||
},
|
||||
props: {
|
||||
size: {
|
||||
type: Object,
|
||||
@ -56,6 +61,15 @@ export default {
|
||||
Vue.prototype.$iscs = this.$iscs;
|
||||
this.setIscs(parserData, iscsData);
|
||||
this.$store.dispatch('iscs/setIscsData', iscsData);
|
||||
if (this.$route.query.group) {
|
||||
this.$iscs.on('dblclick', this.onDblclick, this);
|
||||
}
|
||||
},
|
||||
onDblclick(em) {
|
||||
// 父编组上元素内容
|
||||
// console.log(this.$iscs.iscsDevice[em.deviceModel.groupId]);
|
||||
this.$iscs.iscsDevice[em.deviceModel.groupId].instance.hide();
|
||||
this.$refs.valve.doShow(this.$iscs.iscsDevice[em.deviceModel.groupId].model);
|
||||
},
|
||||
handleViewLoaded() {
|
||||
this.loading = false;
|
||||
@ -83,4 +97,73 @@ export default {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.iscs_fuzhou-01__systerm .el-dialog {
|
||||
background: rgba(100, 100, 100, 0.3);
|
||||
border: 2px solid rgb(144, 144, 144, 0.8);
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__header {
|
||||
padding: 5px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__footer {
|
||||
background: #F0F0F0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin: 0px 5px 5px;
|
||||
border: 2px solid rgba(120, 121, 123, 0.5);
|
||||
box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
|
||||
background: #F0F0F0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
padding: 0px 2px;
|
||||
height: 20px;
|
||||
line-height: 20px
|
||||
}
|
||||
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
height: 20px;
|
||||
width: -webkit-fill-available;
|
||||
background: rgba(128, 128, 128, 0.8);
|
||||
z-index: -1;
|
||||
}
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__headerbtn {
|
||||
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__headerbtn .el-icon-close:before {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.iscs_fuzhou-01__systerm .el-dialog .el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
165
src/views/iscs/iscsSystem/stationConfig/dialog/valve.vue
Normal file
165
src/views/iscs/iscsSystem/stationConfig/dialog/valve.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="iscs_fuzhou-01__systerm route-detail"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
width="500px"
|
||||
:before-close="doClose"
|
||||
:z-index="2000"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-table border :data="elemList" style="width: 100%;" height="300px">
|
||||
<el-table-column label="描述" prop="name" />
|
||||
<el-table-column label="类型" prop="types" />
|
||||
<el-table-column label="状态" prop="status" />
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope" style="padding: 0;">
|
||||
<el-button size="mini" type="" style="width: 100%; height: 100%" @click="handleOption(scope.$index, scope.row)">{{ scope.row[scope.row.key] ? list[scope.row.key][0] : list[scope.row.key][1] }}选择</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="iscs_fuzhou-01__systerm route-detail"
|
||||
title="请执行或取消操作"
|
||||
:visible.sync="showSublayer"
|
||||
width="400px"
|
||||
:before-close="doCloseSublayer"
|
||||
:z-index="2000"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form label-width="100px" size="small" label-position="left" :model="formModel">
|
||||
<el-form-item label="控制点">
|
||||
<div style="line-height: 15px; box-shadow: 0px 0px 2px inset #a2a2a2; padding: 5px;">{{ formModel.name }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="控制动作">
|
||||
<div style="line-height: 15px; box-shadow: 0px 0px 2px inset #a2a2a2; padding: 5px;">{{ formModel.action }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作信息">
|
||||
<div style="line-height: 15px; box-shadow: 0px 0px 2px inset #a2a2a2; padding: 5px;">{{ formModel.info }}</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row justify="center" class="button-group">
|
||||
<el-col :span="10" :offset="2">
|
||||
<el-button type="primary" @click="commit">执行</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="4">
|
||||
<el-button @click="doCloseSublayer">取消</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mapElement from '@/iscs/status/mapElement.js';
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
showSublayer: false,
|
||||
activeIndex: -1,
|
||||
title: '',
|
||||
rowData: {},
|
||||
elemList: [],
|
||||
model: {},
|
||||
formModel: {
|
||||
name: '35KV高压开关室 35KV动力变馈线柜-CT5/1',
|
||||
action: '短路器遥控分合闸',
|
||||
info: ''
|
||||
},
|
||||
list: {
|
||||
valve: ['控合', '控分']
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return this.dialogShow;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow(models) {
|
||||
this.model = models;
|
||||
console.log(models, '-----');
|
||||
this.dialogShow = true;
|
||||
this.title = models.name || '1111';
|
||||
this.elemList = [];
|
||||
models.statusList.forEach(item => {
|
||||
if (!this.elemList.length) {
|
||||
this.elemList = [
|
||||
{
|
||||
name: item.des,
|
||||
types: 'DO',
|
||||
key: item.key,
|
||||
status: '',
|
||||
[item.key]: false
|
||||
}
|
||||
];
|
||||
} else {
|
||||
const arr = this.elemList.filter(ele => ele.key == item.key);
|
||||
if (!arr.length) {
|
||||
this.elemList.push({
|
||||
name: item.des,
|
||||
types: 'DO',
|
||||
key: item.key,
|
||||
status: '',
|
||||
[item.key]: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
commit() {
|
||||
this.showSublayer = false;
|
||||
this.rowData[this.rowData.key] = !this.rowData[this.rowData.key];
|
||||
this.elemList.splice(this.activeIndex, 1, this.rowData);
|
||||
this.model[this.rowData.key] = this.rowData[this.rowData.key];
|
||||
const arr = [];
|
||||
this.model.statusList.forEach(item => {
|
||||
if (item.key == this.rowData.key && item.value === this.rowData[this.rowData.key]) {
|
||||
item.childList.forEach(ele => {
|
||||
// console.log(mapElement[ele.type].stateMap[ele.status]);
|
||||
arr.push({
|
||||
code: ele.code,
|
||||
...mapElement[ele.type].stateMap[ele.status]
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(arr);
|
||||
// 改变元素状态
|
||||
arr.forEach(el => {
|
||||
const device = this.$iscs.iscsDevice[el.code];
|
||||
if (device && device.instance) {
|
||||
device.instance.setState(el);
|
||||
}
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
handleOption(index, row) {
|
||||
console.log(row);
|
||||
this.activeIndex = index;
|
||||
this.formModel.info = row[row.key] ? this.list[row.key][0] : this.list[row.key][1];
|
||||
// this.formModel[row.key] = !row[row.key];
|
||||
this.rowData = JSON.parse(JSON.stringify(row));
|
||||
this.showSublayer = true;
|
||||
},
|
||||
doCloseSublayer() {
|
||||
this.showSublayer = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user