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-09-22 17:12:28 +08:00
parent a620e029e0
commit 57de1331e2
19 changed files with 1196 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/iscs/constant/deviceRender.js
View File

@ -178,7 +178,7 @@ deviceRender[deviceType.VolumeControlDamper] = {
deviceRender[deviceType.IscsText] = {
_type: deviceType.IscsText,
zlevel: 1,
z: 4
z: 6
};
/** 线段渲染配置 */
deviceRender[deviceType.IscsLine] = {
@ -192,6 +192,30 @@ deviceRender[deviceType.IscsRect] = {
zlevel:1,
z: 3
};
/** 菱形渲染配置 */
deviceRender[deviceType.IscsRhombus] = {
_type: deviceType.IscsRhombus,
zlevel:1,
z: 5
};
/** 对勾渲染配置 */
deviceRender[deviceType.IscsTick] = {
_type: deviceType.IscsTick,
zlevel:1,
z: 5
};
/** 箭头渲染配置 */
deviceRender[deviceType.IscsArrow] = {
_type: deviceType.IscsArrow,
zlevel:1,
z: 5
};
/** 单选文字渲染配置 */
deviceRender[deviceType.IscsRadioText] = {
_type: deviceType.IscsRadioText,
zlevel:1,
z: 5
};
/** 楼梯 */
deviceRender[deviceType.Escalator] = {
_type: deviceType.Escalator,
@ -240,7 +264,7 @@ deviceRender[deviceType.IscsButton] = {
deviceRender[deviceType.StateTable] = {
_type: deviceType.StateTable,
zlevel: 1,
z: 5
z: 2
};
/** 照明组 */
deviceRender[deviceType.LightingGroup] = {

4
src/iscs/constant/deviceType.js
View File

@ -29,6 +29,10 @@ const deviceType = {
IscsText: 'IscsText',
IscsLine: 'IscsLine',
IscsRect: 'IscsRect',
IscsRhombus: 'IscsRhombus',
IscsTick: 'IscsTick',
IscsArrow: 'IscsArrow',
IscsRadioText: 'IscsRadioText',
Escalator:'Escalator',
StairControl:'StairControl',
FasBrakeMachine:'FasBrakeMachine',

1
src/iscs/iscs.js
View File

@ -58,6 +58,7 @@ class Iscs {
}
// 保存原始数据
this.data = config;
this.lineCode = lineCode;
this.style = this.loadStyle(lineCode);
// 保存需展现的画布大小
this.canvasSize = {

62
src/iscs/shape/arrow.js Normal file
View File

@ -0,0 +1,62 @@
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
export default class Tick extends Group {
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.grouper = new Group({
id: model.code,
position: [model.point.x, model.point.y]
});
let points = [];
if (model.arrowType == 'all') {
points = [
[0, -model.height / 2],
[0, -model.fontSize * Math.tan(Math.PI / 6)],
[-model.fontSize, 0],
[0, model.fontSize * Math.tan(Math.PI / 6)],
[0, model.height / 2],
[model.width, model.height / 2],
[model.width, -model.height / 2]
];
} else {
points = [
[0, -model.height / 2],
[0, -model.fontSize * Math.tan(Math.PI / 6)],
[-model.fontSize, 0],
[0, 0],
[model.width, 0],
[model.width, -model.height / 2]
];
}
this.iscsRect = new Polygon({
zlevel: model.zlevel,
z: model.z,
shape: {
points: points
},
style: {
stroke: this.model.borderColor,
lineWidth: this.model.borderWidth,
fill: this.model.fillColor
}
});
this.grouper.origin = [0, 0];
this.grouper.rotation = Math.PI / 180 * (model.rotate || 0);
this.grouper.add(this.iscsRect);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

121
src/iscs/shape/button.js
View File

@ -1,8 +1,11 @@
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import Image from 'zrender/src/graphic/Image';
import Rect from 'zrender/src/graphic/shape/Rect';
import Polyline from 'zrender/src/graphic/shape/Polyline';
import buttonImg from '@/assets/iscs_icon/button.png';
import buttonActive from '@/assets/iscs_icon/button_active.png';
import Vue from 'vue';
export default class Button extends Group {
constructor(device) {
@ -31,7 +34,7 @@ export default class Button extends Group {
fontSize: model.fontSize,
fontFamily: 'consolas',
text: model.context,
textFill: '#FFF',
textFill: model.textColor || '#FFF',
textAlign: 'center',
textPosition: 'inside',
textVerticalAlign: 'bottom'
@ -39,24 +42,110 @@ export default class Button extends Group {
});
const textRect = this.buttonText.getBoundingRect();
this.buttonText.setStyle('textLineHeight', textRect.height);
this.imageButton = new Image({
zlevel: model.zlevel,
z: model.z,
style: {
x: textRect.x - model.levelPadding,
y: textRect.y - model.verticalPadding,
image: buttonImg,
width: textRect.width + 2 * model.levelPadding,
height: textRect.height + 2 * model.verticalPadding
if (Vue.prototype.$iscs.lineCode == '07') {
this.imageButton = new Image({
zlevel: model.zlevel,
z: model.z,
style: {
x: textRect.x - model.levelPadding,
y: textRect.y - model.verticalPadding,
image: buttonImg,
width: textRect.width + 2 * model.levelPadding,
height: textRect.height + 2 * model.verticalPadding
}
});
this.grouper.add(this.imageButton);
this.on('mousedown', (e) => { this.imageButton && this.imageButton.setStyle({image: buttonActive}); });
this.on('mouseup', (e) => { this.imageButton && this.imageButton.setStyle({image: buttonImg}); });
} else if (Vue.prototype.$iscs.lineCode == '02') {
this.textButtonRect = new Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: textRect.x - model.levelPadding,
y: textRect.y - model.verticalPadding,
width: textRect.width + 2 * model.levelPadding,
height: textRect.height + 2 * model.verticalPadding
},
style: {
lineWidth: 0,
fill: '#D1C2C2'
}
});
this.lineLeftTop = new Polyline({
zlevel: model.zlevel,
z: model.z,
draggable: false,
shape: {
points: [
[textRect.x - model.levelPadding, textRect.y - model.verticalPadding + (textRect.height + 2 * model.verticalPadding)],
[textRect.x - model.levelPadding, textRect.y - model.verticalPadding],
[textRect.x - model.levelPadding + (textRect.width + 2 * model.levelPadding), textRect.y - model.verticalPadding]
]
},
style: {
lineWidth: 2,
stroke: '#FFFFFF'
}
});
this.lineBottomRight = new Polyline({
zlevel: model.zlevel,
z: model.z,
draggable: false,
shape: {
points: [
[textRect.x - model.levelPadding, textRect.y - model.verticalPadding + (textRect.height + 2 * model.verticalPadding)],
[textRect.x - model.levelPadding + (textRect.width + 2 * model.levelPadding), textRect.y - model.verticalPadding + (textRect.height + 2 * model.verticalPadding)],
[textRect.x - model.levelPadding + (textRect.width + 2 * model.levelPadding), textRect.y - model.verticalPadding]
]
},
style: {
lineWidth: 2,
stroke: '#696969'
}
});
this.grouper.add(this.textButtonRect);
this.grouper.add(this.lineLeftTop);
this.grouper.add(this.lineBottomRight);
if (this.model.function == 'ElementShow') {
this.textButtonRectSmall = new Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: textRect.x - model.levelPadding + 6,
y: textRect.y - model.verticalPadding + 6,
width: textRect.width + 2 * model.levelPadding - 12,
height: textRect.height + 2 * model.verticalPadding - 12
},
style: {
lineWidth: 2,
fill: 'rgba(0,0,0,0)',
stroke: '#908A90'
}
});
this.grouper.add(this.textButtonRectSmall);
this.textButtonRect.setStyle({fill: '#00CC00'});
this.lineLeftTop.setStyle({stroke: '#ffffff'});
this.lineBottomRight.setStyle({stroke: '#948390'});
} else {
this.on('mousedown', (e) => {
this.textButtonRect.setStyle({fill: '#847b7b'});
this.lineLeftTop.setStyle({stroke: '#696969'});
this.lineBottomRight.setStyle({stroke: '#FFFFFF'});
});
this.on('mouseup', (e) => {
this.textButtonRect.setStyle({fill: '#D1C2C2'});
this.lineLeftTop.setStyle({stroke: '#FFFFFF'});
this.lineBottomRight.setStyle({stroke: '#696969'});
});
}
});
this.grouper.add(this.imageButton);
}
this.grouper.add(this.buttonText);
this.add(this.grouper);
this.on('mouseout', (e) => { this.buttonText && this.buttonText.setStyle({textFill: '#FFF'}); });
this.on('mouseover', (e) => { this.buttonText && this.buttonText.setStyle({textFill: '#000'}); });
this.on('mousedown', (e) => { this.imageButton && this.imageButton.setStyle({image: buttonActive}); });
this.on('mouseup', (e) => { this.imageButton && this.imageButton.setStyle({image: buttonImg}); });
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;

8
src/iscs/shape/factory.js
View File

@ -29,6 +29,10 @@ import BalancedElectric from './bas/balancedElectric';
import IscsText from './text';
import IscsLine from './line';
import IscsRect from './rect';
import IscsRhombus from './rhombus';
import IscsTick from './tick';
import IscsArrow from './arrow';
import IscsRadioText from './radioText';
import Escalator from './escalator';
import StairControl from './stairControl';
import FasBrakeMachine from './fasBrakeMachine';
@ -82,6 +86,10 @@ iscsShape[deviceType.VolumeControlDamper] = VolumeControlDamper;
iscsShape[deviceType.IscsText] = IscsText;
iscsShape[deviceType.IscsLine] = IscsLine;
iscsShape[deviceType.IscsRect] = IscsRect;
iscsShape[deviceType.IscsRhombus] = IscsRhombus;
iscsShape[deviceType.IscsTick] = IscsTick;
iscsShape[deviceType.IscsArrow] = IscsArrow;
iscsShape[deviceType.IscsRadioText] = IscsRadioText;
iscsShape[deviceType.Escalator] = Escalator;
iscsShape[deviceType.StairControl] = StairControl;
iscsShape[deviceType.FasBrakeMachine] = FasBrakeMachine;

76
src/iscs/shape/radioText.js Normal file
View File

@ -0,0 +1,76 @@
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
export default class text extends Group {
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.grouper = new Group({
id: model.code,
position: [model.point.x, model.point.y]
});
for (let index = 0; index < model.num; index++) {
let pointx = 0;
let pointy = 0;
if (index) {
const textRect = this.grouper.getBoundingRect();
console.log(textRect);
pointx = textRect.width;
pointy = 0;
}
this.grouper.add(new Text({
_subType: `radio_${index}`,
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,
style: {
x: pointx,
y: pointy,
fontWeight: model.fontWeight,
fontSize: model.fontSize,
fontFamily: 'consolas',
text: model.tableData[index]['text'],
textStrokeWidth: model.textStrokeWidth,
textFill: model.textFill,
textAlign: model.textAlign || 'center',
textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || 'middle',
textLineHeight: model.fontSize,
textBackgroundColor: model.gbColor || null,
textBorderColor: model.gbColorBorder || null,
textBorderWidth: model.gbWidth || null,
textPadding: [model.verticalPadding || 0, model.levelPadding || 0, model.verticalPadding - 2 || 0, model.levelPadding || 0]
}
}));
}
console.log(this.grouper._children);
this.grouper._children[model.status].setStyle({textBackgroundColor: 'red'});
this.add(this.grouper);
}
onclick(e) {
if (e.target._subType) {
const num = e.target._subType.split('_')[1];
this.grouper._children.forEach(model => {
model.setStyle({textBackgroundColor: this.model.gbColor});
});
this.grouper._children[num].setStyle({textBackgroundColor: 'red'});
}
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
setSize(width, height) {
this.model.width = width;
this.model.height = height;
}
}

47
src/iscs/shape/rhombus.js Normal file
View File

@ -0,0 +1,47 @@
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
export default class Rhombus extends Group {
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.grouper = new Group({
id: model.code,
position: [model.point.x, model.point.y]
});
const lineDash = model.type == 'dashed' ? [8, 5] : [0, 0];
this.iscsRect = new Polygon({
zlevel: model.zlevel,
z: model.z,
shape: {
points: [
[-this.model.width / 2, 0],
[0, -this.model.height / 2],
[this.model.width / 2, 0],
[0, this.model.height / 2],
[-this.model.width / 2, 0]
]
},
style: {
fill: this.model.fillColor,
stroke: this.model.strokeColor,
lineDash: lineDash,
lineWidth: this.model.borderWidth
}
});
this.grouper.add(this.iscsRect);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

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

@ -38,7 +38,8 @@ export default class text extends Group {
textBackgroundColor: model.gbColor || null,
textBorderColor: model.gbColorBorder || null,
textBorderWidth: model.gbWidth || null,
textPadding: [model.verticalPadding || 0, model.levelPadding || 0]
textPadding: [model.verticalPadding || 0, model.levelPadding || 0, model.verticalPadding - 2 || 0, model.levelPadding || 0]
// textPadding: [5, 5, 3, 5]
}
});
this.grouper.add(this.textName);

42
src/iscs/shape/tick.js Normal file
View File

@ -0,0 +1,42 @@
import Group from 'zrender/src/container/Group';
import Polyline from 'zrender/src/graphic/shape/Polyline';
export default class Tick extends Group {
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.grouper = new Group({
id: model.code,
position: [model.point.x, model.point.y]
});
this.iscsRect = new Polyline({
zlevel: model.zlevel,
z: model.z,
shape: {
points: [
[-Math.tan(Math.PI / 6) * model.fontSize, -model.fontSize],
[0, 0],
[Math.tan(Math.PI / 6) * model.fontSize * 2, -model.fontSize * 2]
]
},
style: {
stroke: this.model.fillColor,
lineWidth: this.model.borderWidth || 1
}
});
this.grouper.add(this.iscsRect);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

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

@ -136,6 +136,18 @@ export function parser(data) {
zrUtil.each(data.iscsRectList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsRect, elem);
});
zrUtil.each(data.iscsRhombusList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsRhombus, elem);
});
zrUtil.each(data.iscsTickList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsTick, elem);
});
zrUtil.each(data.iscsArrowList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsArrow, elem);
});
zrUtil.each(data.iscsRadioTextList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsRadioText, elem);
});
zrUtil.each(data.escalatorList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.Escalator, elem);
});

8
src/views/iscs/iscsDesign/demonList.vue
View File

@ -68,7 +68,7 @@ export default {
type: 'totalSystem',
children: [
{
name: '变电所接线图',
name: '黄山变电所接线图',
mode: 'powerMonitoring02',
id: 'substation',
type: 'interface'
@ -80,7 +80,7 @@ export default {
type: 'interface'
},
{
name: '混合变电所主接线图',
name: '控制中心图',
mode: 'powerMonitoring02',
id: 'hybrid',
type: 'interface'
@ -92,7 +92,7 @@ export default {
type: 'interface'
},
{
name: '接触网图',
name: '停车场接触网图',
mode: 'powerMonitoring02',
id: 'catenary',
type: 'interface'
@ -292,7 +292,7 @@ export default {
{
name: '屏蔽门系统',
mode: 'psdSystem02',
id: 'signalSystem',
id: 'psdSystem',
type: 'totalSystem',
children: [
{

177
src/views/iscs/iscsDraw/icscComponents/arrow.vue Normal file
View File

@ -0,0 +1,177 @@
<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="fontSize">
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="线长度:" prop="width">
<el-input-number v-model="form.width" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="线高度:" prop="height">
<el-input-number v-model="form.height" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="填充颜色:" prop="fillColor">
<el-color-picker v-model="form.fillColor" show-alpha size="small" />
</el-form-item>
<el-form-item label="箭头类型:" prop="arrowType">
<el-select v-model="form.arrowType" placeholder="请选择" size="small">
<el-option label="全部" value="all" />
<el-option label="一半" value="half" />
</el-select>
</el-form-item>
<el-form-item label="边框颜色:" prop="borderColor">
<el-color-picker v-model="form.borderColor" show-alpha size="small" />
</el-form-item>
<el-form-item label="边框宽度:" prop="borderWidth">
<el-input-number v-model="form.borderWidth" controls-position="right" :min="0" size="small" />
</el-form-item>
<el-form-item label="旋转角度:" prop="rotate">
<el-input-number v-model="form.rotate" size="small" />
</el-form-item>
<el-form-item label="X轴坐标:">
<el-input-number v-model="form.x" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="Y轴坐标:">
<el-input-number v-model="form.y" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import {getUID} from '@/iscs/utils/Uid';
export default {
name: 'IscsArrow',
components: {
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
form: {
code: '',
fillColor: '#fff',
borderWidth: 0,
fontSize: 10,
width: 10,
height: 5,
arrowType: 'all',
borderColor: '#fff',
rotate: 0,
x: 10,
y: 10
},
rules: {
strokeColor: [
{ required: true, message: '请选择边框颜色', trigger: 'change' }
],
fillColor: [
{ required: true, message: '请选择矩形填充颜色', trigger: 'change'}
]
}
};
},
computed:{
...mapGetters('iscs', [
'iscs'
])
},
watch:{
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'IscsArrow' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.fillColor = model.fillColor;
this.form.borderWidth = model.borderWidth;
this.form.fontSize = model.fontSize;
this.form.width = model.width;
this.form.height = model.height;
this.form.arrowType = model.arrowType;
this.form.rotate = model.rotate;
this.form.borderColor = model.borderColor;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const rectModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.isUpdate ? this.form.code : getUID('IscsArrow', this.iscs.iscsRectList),
_type: 'IscsArrow',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
fontSize: this.form.fontSize,
width: this.form.width,
height: this.form.height,
arrowType: this.form.arrowType,
rotate: this.form.rotate,
borderColor: this.form.borderColor
};
this.$emit('createDataModel', rectModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const rectModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.form.code,
_type: 'IscsArrow',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
fontSize: this.form.fontSize
};
this.$emit('deleteDataModel', rectModel);
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
fillColor: '',
borderWidth: 1,
fontSize: 10,
arrowType: 'all',
borderColor: '#fff',
rotate: 0,
width: 10,
height: 5,
x: 10,
y: 10
};
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

42
src/views/iscs/iscsDraw/icscComponents/button.vue
View File

@ -13,6 +13,12 @@
<el-form-item label="按钮文字:" prop="context">
<el-input v-model="form.context" size="small" />
</el-form-item>
<el-form-item label="文字颜色:" prop="textColor">
<el-color-picker v-model="form.textColor" size="small" />
</el-form-item>
<el-form-item label="选中文字颜色:" prop="textColorActive">
<el-color-picker v-model="form.textColorActive" size="small" />
</el-form-item>
<el-form-item label="文字大小:" prop="fontSize">
<el-input-number v-model="form.fontSize" size="small" controls-position="right" :min="1" />
</el-form-item>
@ -72,7 +78,9 @@ export default {
x: 10,
y: 10,
context: '',
function: ''
function: '',
textColor: '',
textColorActive: '#000'
},
rules: {
context: [
@ -104,10 +112,32 @@ export default {
this.form.context = model.context;
this.form.function = model.function;
this.form.fontSize = model.fontSize;
this.form.textColor = model.textColor || '#fff';
this.form.textColorActive = model.textColorActive || '#000';
}
}
},
mounted() {},
mounted() {
if (this.$route.query.lineCode == '02') {
this.functionList = [
{label: '操作按钮', value: 'OperatingButton'},
{label: '元素显隐', value: 'ElementShow'},
{label: '返回', value: 'GoBack'}
];
} else if (this.$route.query.lineCode == '07') {
this.functionList = [
{label: '图元说明', value: 'GraphicEle'},
{label: '公共区域', value: 'PublicArea'},
{label: '操作按钮', value: 'OperatingButton'},
{label: '返回', value: 'GoBack'},
{label: '至EPS系统及导向照明', value: 'GoEPS'},
{label: '射流风机图', value: 'GoJetFan'},
{label: '至B端小系统', value: 'GoBMiniSystem'},
{label: '至A端小系统(一)', value: 'GoAMiniSystem1'},
{label: '至A端小系统(二)', value: 'GoAMiniSystem2'}
];
}
},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
@ -123,7 +153,9 @@ export default {
verticalPadding: this.form.verticalPadding,
context: this.form.context,
function: this.form.function,
fontSize: this.form.fontSize
fontSize: this.form.fontSize,
textColor: this.form.textColor,
textColorActive: this.form.textColorActive
};
this.$emit('createDataModel', rectModel);
this.initPage();
@ -160,7 +192,9 @@ export default {
x: 10,
y: 10,
context: '',
function: ''
function: '',
textColor: '',
textColorActive: '#000'
};
}
}

165
src/views/iscs/iscsDraw/icscComponents/rhombus.vue Normal file
View File

@ -0,0 +1,165 @@
<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="width">
<el-input-number v-model="form.width" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="高度:" prop="height">
<el-input-number v-model="form.height" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="填充色:" prop="fillColor">
<el-color-picker v-model="form.fillColor" show-alpha size="small" />
</el-form-item>
<el-form-item label="边框宽度:" prop="borderWidth">
<el-input-number v-model="form.borderWidth" controls-position="right" :min="0" size="small" />
</el-form-item>
<el-form-item label="类型:" prop="type">
<el-select v-model="form.type" placeholder="请选择类型" size="small">
<el-option label="实线:" value="solid" />
<el-option label="虚线:" value="dashed" />
</el-select>
</el-form-item>
<el-form-item label="边框色:" prop="strokeColor">
<el-color-picker v-model="form.strokeColor" size="small" />
</el-form-item>
<el-form-item label="X轴坐标:">
<el-input-number v-model="form.x" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="Y轴坐标:">
<el-input-number v-model="form.y" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import {getUID} from '@/iscs/utils/Uid';
export default {
name: 'IscsRhombus',
components: {
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
form: {
code: '',
fillColor: '',
borderWidth: '',
strokeColor: '',
type: 'solid',
width: 1,
height: 1,
x: 10,
y: 10
},
rules: {
strokeColor: [
{ required: true, message: '请选择边框颜色', trigger: 'change' }
],
fillColor: [
{ required: true, message: '请选择矩形填充颜色', trigger: 'change'}
]
}
};
},
computed:{
...mapGetters('iscs', [
'iscs'
])
},
watch:{
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'IscsRhombus' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.fillColor = model.fillColor;
this.form.borderWidth = model.borderWidth;
this.form.strokeColor = model.strokeColor;
this.form.width = model.width;
this.form.type = model.type || 'solid';
this.form.height = model.height;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const rectModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.isUpdate ? this.form.code : getUID('IscsRhombus', this.iscs.iscsRectList),
_type: 'IscsRhombus',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
strokeColor: this.form.strokeColor,
width: this.form.width,
height: this.form.height,
type: this.form.type
};
this.$emit('createDataModel', rectModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const rectModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.form.code,
_type: 'IscsRhombus',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
strokeColor: this.form.strokeColor,
width: this.form.width,
height: this.form.height
};
this.$emit('deleteDataModel', rectModel);
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
fillColor: '',
borderWidth: '',
strokeColor: '',
type: 'solid',
width: 1,
height: 1,
x: 10,
y: 10
};
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

17
src/views/iscs/iscsDraw/icscComponents/stateTable.vue
View File

@ -55,15 +55,15 @@
<template v-for="(item, i) in addModel.columnWidthList">
<el-table-column :key="i" :label="'列'+(i + 1)" :prop="'column'+ (i + 1)">
<template slot-scope="scope">
<el-input v-if="i === 0" v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" size="small" />
<el-select v-else v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" filterable size="small">
<el-input v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" size="small" />
<!-- <el-select v-else v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" filterable size="small">
<el-option
v-for="it in stateList"
:key="it.value"
:label="it.label"
:value="it.value"
/>
</el-select>
</el-select> -->
</template>
</el-table-column>
</template>
@ -105,7 +105,9 @@ export default {
{label: '多列表头', value: 'normal'},
{label: '无表头', value: 'none'}
],
stateList: [
stateList: [],
stateList02: [],
stateList07: [
{label: '火灾系统故障', value: 'fasSystemFailure'},
{label: 'FACP自动状态', value: 'facpAutoMode'},
{label: '气灭控制系统状态', value: 'gesControlStatus'},
@ -180,6 +182,13 @@ export default {
}
}
},
mounted() {
if (this.$route.query.lineCode == '02') {
// this.stateList = this.stateList02;
} else if (this.$route.query.lineCode == '07') {
this.stateList = this.stateList07;
}
},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {

139
src/views/iscs/iscsDraw/icscComponents/tick.vue Normal file
View File

@ -0,0 +1,139 @@
<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="fontSize">
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="颜色:" prop="fillColor">
<el-color-picker v-model="form.fillColor" show-alpha size="small" />
</el-form-item>
<el-form-item label="线宽度:" prop="borderWidth">
<el-input-number v-model="form.borderWidth" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="X轴坐标:">
<el-input-number v-model="form.x" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="Y轴坐标:">
<el-input-number v-model="form.y" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import {getUID} from '@/iscs/utils/Uid';
export default {
name: 'IscsTick',
components: {
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
form: {
code: '',
fillColor: '',
borderWidth: 1,
fontSize: 10,
x: 10,
y: 10
},
rules: {
strokeColor: [
{ required: true, message: '请选择边框颜色', trigger: 'change' }
],
fillColor: [
{ required: true, message: '请选择矩形填充颜色', trigger: 'change'}
]
}
};
},
computed:{
...mapGetters('iscs', [
'iscs'
])
},
watch:{
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'IscsTick' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.fillColor = model.fillColor;
this.form.borderWidth = model.borderWidth;
this.form.fontSize = model.fontSize;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const rectModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.isUpdate ? this.form.code : getUID('IscsTick', this.iscs.iscsRectList),
_type: 'IscsTick',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
fontSize: this.form.fontSize
};
this.$emit('createDataModel', rectModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const rectModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.form.code,
_type: 'IscsTick',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
fontSize: this.form.fontSize
};
this.$emit('deleteDataModel', rectModel);
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
fillColor: '',
borderWidth: 1,
fontSize: 10,
x: 10,
y: 10
};
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

52
src/views/iscs/iscsDraw/iscsPowerMonitoring/index.vue
View File

@ -10,6 +10,14 @@
>{{ $t('ibp.save') }}</el-button>
</div>
<el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane label="单选文字" name="IscsRadioText">
<iscs-radio-text
ref="iscsRadioText"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="按钮" name="IscsButton">
<iscs-button
ref="iscsButton"
@ -42,6 +50,38 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="菱形" name="IscsRhombus">
<iscs-rhombus
ref="iscsrhombus"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="对勾" name="IscsTick">
<iscs-tick
ref="iscsTick"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="表格" name="StateTable">
<iscs-state-table
ref="stateTable"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="箭头" name="IscsArrow">
<iscs-arrow
ref="iscsArrow"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
@ -53,6 +93,11 @@ import IscsLine from '../icscComponents/line';
import IscsText from '../icscComponents/text';
import IscsRect from '../icscComponents/rect';
import IscsButton from '../icscComponents/button';
import IscsRhombus from '../icscComponents/rhombus';
import IscsTick from '../icscComponents/tick';
import IscsStateTable from '../icscComponents/stateTable';
import IscsArrow from '../icscComponents/arrow';
import IscsRadioText from './radioText';
export default {
name: 'IscsOperate',
@ -60,7 +105,12 @@ export default {
IscsRect,
IscsLine,
IscsText,
IscsButton
IscsButton,
IscsRhombus,
IscsTick,
IscsStateTable,
IscsArrow,
IscsRadioText
},
mixins: [
],

224
src/views/iscs/iscsDraw/iscsPowerMonitoring/radioText.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;">
<el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width: 100%;padding: 10px 50px;">
<el-form-item label="选项数目:" prop="num">
<el-input-number v-model="form.num" controls-position="right" :min="2" :max="100" size="small" />
</el-form-item>
<el-form-item label="内容:" prop="tableData">
<el-table :data="form.tableData" border style="width: 100%;">
<el-table-column label="内容">
<template slot-scope="scope">
<el-input v-model="form.tableData[scope.$index]['text']" size="small" />
</template>
</el-table-column>
<!-- <template slot-scope="scope">
<el-input v-model="form.tableData[scope.$index]" size="small" />
</template> -->
</el-table>
</el-form-item>
<el-form-item label="文字颜色:" prop="textFill">
<el-color-picker v-model="form.textFill" size="small" />
</el-form-item>
<el-form-item label="文字大小:" prop="fontSize">
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" :max="100" size="small" />
</el-form-item>
<el-form-item label="文字粗细:" prop="fontWeight">
<el-input-number v-model="form.fontWeight" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="背景颜色:">
<el-color-picker v-model="form.gbColor" show-alpha size="small" />
</el-form-item>
<el-form-item label="背景描边颜色:">
<el-color-picker v-model="form.gbColorBorder" size="small" />
</el-form-item>
<el-form-item label="背景描边宽度:">
<el-input-number v-model="form.gbWidth" size="small" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="左右内距:" prop="levelPadding">
<el-input-number v-model="form.levelPadding" size="small" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="上下内距:" prop="verticalPadding">
<el-input-number v-model="form.verticalPadding" size="small" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="X轴坐标:">
<el-input-number v-model="form.x" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="Y轴坐标:">
<el-input-number v-model="form.y" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import {getUID} from '@/iscs/utils/Uid';
export default {
name: 'IscsRadioText',
components: {
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
form: {
code: '',
num: 2,
tableData: [{}, {}],
textFill: '',
fontSize: 14,
fontWeight: 450,
x: 10,
y: 10,
gbColor: '',
gbColorBorder: '',
gbWidth: '',
levelPadding: 0,
verticalPadding: 0,
status: 0
},
rules: {
code: [
{ required: true, message: '请输入文字编号', trigger: 'blur' }
],
context: [
{ required: true, message: '请输入文字内容', trigger: 'blur' }
],
textFill: [
{ required: true, message: '请输入文字颜色', trigger: 'blur' }
],
fontSize: [
{ required: true, message: '请输入文字大小', trigger: 'blur' }
],
fontWeight: [
{ required: true, message: '请输入文字粗细', trigger: 'blur' }
],
levelPadding: [
{ required: true, message: '请输入文字间距', trigger: 'blur' }
],
verticalPadding: [
{ required: true, message: '请输入文字间距', trigger: 'blur' }
]
}
};
},
computed:{
...mapGetters('iscs', [
'iscs'
])
},
watch:{
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'IscsRadioText' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.num = model.num;
this.form.code = model.code;
this.form.tableData = model.tableData;
this.form.fontSize = model.fontSize;
this.form.fontWeight = model.fontWeight;
this.form.textFill = model.textFill;
this.form.x = model.point.x;
this.form.y = model.point.y;
this.form.gbColor = model.gbColor;
this.form.gbColorBorder = model.gbColorBorder;
this.form.gbWidth = model.gbWidth;
this.form.levelPadding = model.levelPadding;
this.form.verticalPadding = model.verticalPadding;
}
},
'form.num':function(num) {
for (let index = 2; index < num; index++) {
this.form.tableData.push({});
}
this.form.tableData.splice(num);
}
},
mounted() {},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const textModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.isUpdate ? this.form.code : getUID('IscsRadioText', this.iscs.iscsTextList),
_type: 'IscsRadioText',
num: this.form.num,
tableData: this.form.tableData,
textFill: this.form.textFill,
fontSize: this.form.fontSize,
fontWeight: this.form.fontWeight,
fontFamily: 'consolas',
gbColor: this.form.gbColor,
gbColorBorder: this.form.gbColorBorder,
gbWidth: this.form.gbWidth,
levelPadding: this.form.levelPadding,
verticalPadding: this.form.verticalPadding,
status: 0
};
this.$emit('createDataModel', textModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const textModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.form.code,
_type: 'IscsRadioText',
tableData: this.form.tableData,
textFill: this.form.textFill,
fontSize: this.form.fontSize,
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
};
this.$emit('deleteDataModel', textModel);
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
num: 2,
tableData: [{}, {}],
textFill: '',
fontSize: 14,
fontWeight: 450,
x: 10,
y: 10,
gbColor: '',
gbColorBorder: '',
gbWidth: '',
levelPadding: 0,
verticalPadding: 0,
status: 0
};
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>