joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

调整综合监控流程

Browse Source
This commit is contained in:
zyy 2020-10-14 19:09:53 +08:00
parent 7f4f0d661f
commit 4b9a98c35a
21 changed files with 780 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/iscs/iscs.js
View File

@ -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;

2
src/iscs/keyboardController.js
View File

@ -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);
}
}

7
src/iscs/mouseController.js
View File

@ -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,6 +85,11 @@ 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();

36
src/iscs/shape/group.js
View File

@ -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();
}
}

19
src/iscs/shape/rect.js
View File

@ -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;
}
}

18
src/iscs/shape/text.js
View File

@ -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;
}
}

8
src/iscs/status/elType.js
View File

@ -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: '电流电压类型'} // 数组
};

2
src/iscs/status/grType.js
View File

@ -1,3 +1,3 @@
export default {
A: { lab: 'a', describe: '自定义模板类型'} // 远 红框 阀门
A: { lab: 'a', describe: '自定义模板类型' } // 远 红框 阀门
};

4
src/iscs/status/mapGroup.js
View File

@ -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: '阀门' }
]
}
};

3
src/iscs/transformHandle.js
View File

@ -17,12 +17,13 @@ class TransformHandle {
}
revisibleView(view) {
if (view._type != 'IscsGroup') {
if (this.checkVisible(view)) {
view.show();
} else {
view.hide();
}
}
view.dirty();
}

2
src/iscs/utils/parser.js
View File

@ -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);
});
}

10
src/store/modules/iscs.js
View File

@ -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];
}
},

14
src/views/iscs/iscsDraw/group/card.vue
View File

@ -3,12 +3,12 @@
<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-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"/>
<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 name="second" label="模板选择">
<tab-template style="width: 100%; height: 100%;" @createDataModel="createDataModel" @deleteDataModel="deleteDataModel" />
</el-tab-pane>
</el-tabs>
</el-card>
@ -27,7 +27,7 @@ export default {
data() {
return {
active: 'first'
}
};
},
methods: {
createDataModel(models) {
@ -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 {

10
src/views/iscs/iscsDraw/group/create.vue
View File

@ -1,9 +1,9 @@
<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 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>
<el-button size="mini" type="primary" @click="doCreate">添加</el-button>
</div>
</template>
<script>
@ -18,14 +18,14 @@ export default {
data() {
return {
type: ''
}
};
},
methods: {
doCreate() {
this.$emit('create', this.type);
}
}
}
};
</script>
<style lang="scss" scoped>
.flex-inline {

160
src/views/iscs/iscsDraw/group/tab-custom.vue
View File

@ -5,20 +5,20 @@
<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 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%" height="500px">
<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="type" />
<el-table-column label="元素类型" prop="des" />
<el-table-column label="元素编码" prop="code" />
<el-table-column width="180" >
<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>
@ -26,19 +26,62 @@
</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" 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> -->
<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';
@ -50,29 +93,35 @@ export default {
data() {
return {
active: -1,
activeChild: -1,
elemCode: '',
elemStatus: '',
elemStatusType: '',
optionsList: [],
formModel: {
name: '',
type: '',
elemList: []
elemList: [],
statusList: []
},
grTypeList: [],
elTypeList: [],
elTypeMap: {}
}
};
},
computed: {
rules() {
return {
name: [
{ required: true, message: '请输入组名称', trigger: 'blur' },
{ required: true, message: '请输入组名称', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择组类型', trigger: 'change' },
{ required: true, message: '请选择组类型', trigger: 'change' }
],
elemList: [
{ type: 'array', required: true, message: '组元素不能为空', trigger: 'change' },
{ type: 'array', required: true, message: '组元素不能为空', trigger: 'change' }
]
}
};
}
},
watch: {
@ -82,27 +131,42 @@ export default {
}
},
created() {
this.elTypeMap = {}
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;
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) {
handleCreate(type, describe) {
if (type) {
console.log(type);
this.formModel.elemList.push({ type: type, code: '' })
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('请选择元素类型')
this.$message.info('请选择元素类型');
}
},
handleSetSelect(model) {
@ -110,9 +174,10 @@ export default {
if (this.active >= 0) {
if (elem) { elem.code = model.code; }
this.active = -1;
} else {
this.formModel = {}
this.isUpdate = true;
}
if (this.activeChild >= 0) {
this.elemCode = model.code;
this.activeChild = -1;
}
},
doCreateGroup() {
@ -122,27 +187,46 @@ export default {
_type: deviceType.IscsGroup,
name: this.formModel.name,
type: this.formModel.type,
elemMap: {}
}
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)
if (device && device.model) {
device.model['groupId'] = model.code;
modelList.push(device.model);
}
});
this.$emit('createDataModel', modelList.concat(model));
},
doUpdateGroup() {
changeStatus(type) {
if (mapElement[type]) {
this.optionsList = Object.keys(mapElement[type].stateMap);
} else {
this.optionsList = [];
}
},
doDeleteGroup() {
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>

120
src/views/iscs/iscsDraw/group/tab-template.vue
View File

@ -1,17 +1,129 @@
<template>
<div class="template" >
开发中
<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 {
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";

2
src/views/iscs/iscsDraw/icscComponents/circle.vue
View File

@ -76,7 +76,7 @@ export default {
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.z2 = model.z2||0;
this.form.z2 = model.z2 || 0;
this.form.fillColor = model.fillColor;
this.form.borderWidth = model.borderWidth;
this.form.strokeColor = model.strokeColor;

83
src/views/iscs/iscsSystem/stationConfig/canvas/iscsCanvas.vue
View File

@ -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
View 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>

5
src/views/iscsSystem/index.vue
View File

@ -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) {