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

Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test

Browse Source
This commit is contained in:
fan 2020-09-22 09:51:22 +08:00
commit e4be43ad37
9 changed files with 809 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.staging
View File

@ -1,5 +1,5 @@
# just a flag
NODE_ENV = 'production'
NODE_ENV = 'test'
# base api
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'

65
src/iscs/shape/line.js
View File

@ -1,7 +1,8 @@
import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
import Polyline from 'zrender/src/graphic/shape/Polyline';
import Polygon from 'zrender/src/graphic/shape/Polygon';
import JTriangle from '../utils/JTriangle';
import zrender from 'zrender';
export default class line extends Group {
constructor(device) {
@ -10,7 +11,12 @@ export default class line extends Group {
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.model.point = this.model.point1;
// this.model.point = this.model.points;
if (!this.model.points) {
this.model.points = [];
this.model.points.push(this.model.point1);
this.model.points.push(this.model.point2);
}
this.z = device.model.z;
this.create();
}
@ -18,21 +24,42 @@ export default class line extends Group {
const model = this.model;
this.grouper = new Group({
id: model.code,
position: [model.point1.x, model.point1.y]
position: [model.points[0].x, model.points[0].y]
});
this.iscsLine = new Line({
// 1101 垂直渐变 1110 水平渐变
let strokeColor = this.model.fillColor;
if (model.isGradual) {
const offsetList = [];
model.modelList.forEach(item => {
offsetList.push({
offset: item.offset,
color: item.color
});
});
if (model.gradualShow == 'level') {
strokeColor = new zrender.LinearGradient(1, 1, 0, 1, offsetList);
} else {
strokeColor = new zrender.LinearGradient(1, 1, 1, 0, offsetList);
}
}
const modelPoints = [];
model.points.forEach((item, index) => {
if (index == 0) {
modelPoints.push([0, 0]);
} else {
modelPoints.push([item.x - model.points[0].x, item.y - model.points[0].y]);
}
});
this.iscsLine = new Polyline({
zlevel: model.zlevel,
z: model.z,
draggable: false,
shape: {
x1: 0,
y1: 0,
x2: model.point2.x - model.point1.x,
y2: model.point2.y - model.point1.y
points: modelPoints
},
style: {
lineWidth: this.model.lineWidth,
stroke: this.model.fillColor
stroke: strokeColor
}
});
if (model.classify == 'dashed') {
@ -40,9 +67,9 @@ export default class line extends Group {
}
if (model.arrowShow == 'star') {
const traingle = new JTriangle(this.model.point1, this.model.point2);
const traingle = new JTriangle(this.model.points[0], this.model.points[1]);
let rotation = Math.PI * 2 - Math.atan2(traingle.absy, traingle.absx) * traingle.drictx * traingle.dricty;
if (this.model.point1.x >= this.model.point2.x) {
if (this.model.points[0].x >= this.model.points[1].x) {
rotation += Math.PI;
}
this.arrows = new Polygon({
@ -65,13 +92,13 @@ export default class line extends Group {
});
this.grouper.add(this.arrows);
} else if (model.arrowShow == 'end') {
const traingle = new JTriangle(this.model.point2, this.model.point1);
const traingle = new JTriangle(this.model.points[this.model.points.length - 1], this.model.points[this.model.points.length - 2]);
let rotation = Math.PI * 2 - Math.atan2(traingle.absy, traingle.absx) * traingle.drictx * traingle.dricty;
if (this.model.point1.x <= this.model.point2.x) {
if (this.model.points[this.model.points.length - 2].x <= this.model.points[this.model.points.length - 1].x) {
rotation += Math.PI;
}
const x = model.point2.x - model.point1.x;
const y = model.point2.y - model.point1.y;
const x = model.points[this.model.points.length - 1].x - model.points[this.model.points.length - 2].x;
const y = model.points[this.model.points.length - 1].y - model.points[this.model.points.length - 2].y;
this.arrows = new Polygon({
zlevel: model.zlevel,
z: model.z,
@ -96,9 +123,9 @@ export default class line extends Group {
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point1.x += dx;
this.model.point1.y += dy;
this.model.point2.x += dx;
this.model.point2.y += dy;
this.model.points.forEach(item => {
item.x += dx;
item.y += dy;
});
}
}

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

@ -31,10 +31,14 @@ export default class text extends Group {
text: model.context,
textStrokeWidth: model.textStrokeWidth,
textFill: model.textFill,
textAlign: model.textAlign,
textAlign: model.textAlign || 'center',
textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || null,
textLineHeight: model.fontSize
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]
}
});
this.grouper.add(this.textName);

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

@ -99,6 +99,38 @@ export default {
}
]
},
{
name: '环境与设备监控系统',
mode: 'environment02',
id: 'environment',
type: 'totalSystem',
children: [
{
name: '大系统',
mode: 'environment02',
id: 'environmentOne',
type: 'interface'
},
{
name: '冷水系统',
mode: 'environment02',
id: 'environmentTwo',
type: 'interface'
},
{
name: '隧道通风系统',
mode: 'environment02',
id: 'environmentThree',
type: 'interface'
},
{
name: '车站小系统1',
mode: 'environment02',
id: 'environmentFour',
type: 'interface'
}
]
},
{
name: '自动售检票/门禁',
mode: 'afc02',
@ -115,7 +147,15 @@ export default {
name: '门禁系统',
mode: 'afc02',
id: 'entranceGuard',
type: 'interface'
type: 'system',
children: [
{
name: '站厅层',
mode: 'afc02',
id: 'afcOne02',
type: 'interface'
}
]
}
]
},
@ -135,13 +175,65 @@ export default {
name: '火灾报警系统-站厅层',
mode: 'fas02',
id: 'stationHall',
type: 'interface'
type: 'system',
children: [
{
name: '站厅层',
mode: 'fas02',
id: 'stationHallOne',
type: 'interface'
},
{
name: '站厅层A端',
mode: 'fas02',
id: 'stationHallTwo',
type: 'interface'
},
{
name: '站厅层B端',
mode: 'fas02',
id: 'stationHallThree',
type: 'interface'
},
{
name: '站厅层公共区段',
mode: 'fas02',
id: 'stationHallFour',
type: 'interface'
}
]
},
{
name: '火灾报警系统-站台层',
mode: 'fas02',
id: 'platform',
type: 'interface'
type: 'system',
children: [
{
name: '站台层',
mode: 'fas02',
id: 'platformOne',
type: 'interface'
},
{
name: '站台层A端',
mode: 'fas02',
id: 'platformTwo',
type: 'interface'
},
{
name: '站台层B端',
mode: 'fas02',
id: 'platformThree',
type: 'interface'
},
{
name: '站台层公共区段',
mode: 'fas02',
id: 'platformFour',
type: 'interface'
}
]
},
{
name: '火灾报警系统-区间',
@ -169,18 +261,20 @@ export default {
id: 'signalSystem',
type: 'totalSystem',
children: [
{
name: 'TIS管理器',
mode: 'signalSystem02',
id: 'tis',
type: 'interface'
},
{
name: '列车时刻表',
mode: 'signalSystem02',
id: 'schedule',
type: 'interface'
},
// 暂时没有 系统界面 介绍
// {
// name: 'TIS管理器',
// mode: 'signalSystem02',
// id: 'tis',
// type: 'interface'
// },
// {
// name: '列车时刻表',
// mode: 'signalSystem02',
// id: 'schedule',
// type: 'interface'
// },
// 这两个内容 不清晰
{
name: '信号系统',
mode: 'signalSystem02',
@ -195,29 +289,82 @@ export default {
}
]
},
{
name: '屏蔽门系统',
mode: 'psdSystem02',
id: 'signalSystem',
type: 'totalSystem',
children: [
{
name: '屏蔽门系统',
mode: 'psdSystem02',
id: 'psdOne',
type: 'interface'
}
]
},
{
name: '通信',
mode: 'communication02',
id: 'communication',
type: 'totalSystem',
children: [
{
name: '乘客信息显示系统',
mode: 'communication02',
id: 'pis',
type: 'interface'
},
{
name: '广播系统',
mode: 'communication02',
id: 'broadcasting',
type: 'interface'
},
// 不用画图
// {
// name: '乘客信息显示系统',
// mode: 'communication02',
// id: 'pis',
// type: 'system',
// children: [
// ]
// },
// {
// name: '广播系统',
// mode: 'communication02',
// id: 'broadcasting',
// type: 'system',
// children: [
// ]
// },
{
name: '闭路电视',
mode: 'communication02',
id: 'cctv',
type: 'interface'
type: 'system',
children:[
{
name: '站厅',
mode: 'communication02',
id: 'basOne',
type: 'interface'
},
{
name: '上行站台',
mode: 'communication02',
id: 'basTwo',
type: 'interface'
},
{
name: '下行站台',
mode: 'communication02',
id: 'basThree',
type: 'interface'
},
{
name: '地下一层',
mode: 'communication02',
id: 'basFour',
type: 'interface'
},
{
name: '地下二层',
mode: 'communication02',
id: 'basFive',
type: 'interface'
}
]
}
]
}],

233
src/views/iscs/iscsDraw/icscComponents/line.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;">
<el-form ref="form" :rules="rules" :model="form" label-width="100px" style="width: 100%;padding: 10px 50px;">
<el-form ref="form" :rules="rules" :model="form" label-width="100px" style="width: 100%;padding: 10px 20px;">
<el-form-item label="线段宽度:" prop="lineWidth">
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50" size="small" />
</el-form-item>
@ -10,7 +10,37 @@
<el-option label="虚线:" value="dashed" />
</el-select>
</el-form-item>
<el-form-item label="线段颜色:" prop="fillColor">
<el-form-item label="是否渐变:">
<el-checkbox v-model="form.isGradual" size="small" />
</el-form-item>
<el-form-item v-if="form.isGradual" label="渐变方向:">
<el-select v-model="form.gradualShow" placeholder="请选择" size="small">
<el-option label="水平渐变" value="level" />
<el-option label="垂直渐变" value="vertical" />
</el-select>
</el-form-item>
<div v-if="form.isGradual" style="position: relative;">
<div class="title-gradual">渐变颜色:</div>
<el-button icon="el-icon-plus" circle size="small" style="position: absolute; right: 50px; top: 10px; z-index: 10;" @click="addModelList" />
<el-table :data="form.modelList" style="width: 100%; margin-bottom: 20px;">
<el-table-column label="偏移值" width="160">
<template slot-scope="scope">
<el-input-number v-model="scope.row.offset" size="mini" :min="0" :max="1" :step="0.1" />
</template>
</el-table-column>
<el-table-column label="颜色">
<template slot-scope="scope">
<el-color-picker v-model="scope.row.color" size="small" />
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-form-item v-if="!form.isGradual" label="线段颜色:" prop="fillColor">
<el-color-picker v-model="form.fillColor" size="small" />
</el-form-item>
<el-form-item label="箭头显示:" prop="arrowShow">
@ -23,24 +53,57 @@
<el-form-item v-if="form.arrowShow != 'none'" label="箭头大小:" prop="arrowSize">
<el-input-number v-model="form.arrowSize" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="起始X轴坐标:">
<el-input-number v-model="form.x1" controls-position="right" :min="0" size="small" />
</el-form-item>
<el-form-item label="起始Y轴坐标:">
<el-input-number v-model="form.y1" controls-position="right" :min="0" size="small" />
</el-form-item>
<el-form-item label="终止X轴坐标:">
<el-input-number v-model="form.x2" controls-position="right" :min="0" size="small" />
</el-form-item>
<el-form-item label="终止Y轴坐标:">
<el-input-number v-model="form.y2" controls-position="right" :min="0" 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 class="coordinate">
<div class="titles" style="width: 88px">坐标点</div>
<div class="point-section">
<template v-for="(point, j) in form.points">
<div :key="j" style="overflow: hidden;">
<span style="display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;" :style="{'margin-right': j == 0 || j == form.points.length - 1 ? '9px' : '5px'}">{{ j == 0 ? '起 点' : j == form.points.length - 1 ? '终 点' : `中点${j}` }}</span>
<el-form-item
label=""
:prop="'points[' + j + '].x'"
style="display: table; float: left;"
label-width="0px"
>
<el-input-number v-model="point.x" size="small" />
</el-form-item>
<span
style="display: table; margin-left: 8px; float: left; line-height: 28px;"
>
, </span>
<el-form-item
label=""
:prop="'points[' + j + '].y'"
style="display: table; float: left; margin-right: 5px;"
label-width="4px"
>
<el-input-number v-model="point.y" size="small" />
</el-form-item>
<el-button
icon="el-icon-plus"
circle
size="small"
class="point-button"
@click="addPoint(j)"
/>
<el-button
icon="el-icon-minus"
:disabled="j == 0 || j == form.points.length - 1"
circle
size="small"
class="point-button"
style="margin-left: 4px;"
@click="delPoint(j)"
/>
</div>
</template>
</div>
<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>
</div></el-form>
</div>
</template>
@ -61,10 +124,13 @@ export default {
fillColor: '#fff',
arrowShow: 'none',
arrowSize: 5,
x1: 10,
y1: 10,
x2: 20,
y2: 10
points: [
{ x: 10, y: 10 },
{ x: 20, y: 10 }
],
isGradual: false,
modelList: [],
gradualShow: 'level'
},
rules: {
lineWidth: [
@ -91,13 +157,22 @@ export default {
this.form.code = model.code;
this.form.lineWidth = model.lineWidth;
this.form.fillColor = model.fillColor;
this.form.x1 = model.point1.x;
this.form.y1 = model.point1.y;
this.form.x2 = model.point2.x;
this.form.y2 = model.point2.y;
if (model.point1) {
this.form.points = [];
this.form.points.push(model.point1);
this.form.points.push(model.point2);
} else {
this.form.points = model.points || [
{ x: 10, y: 10 },
{ x: 20, y: 10 }
];
}
this.form.classify = model.classify;
this.form.arrowShow = model.arrowShow || 'none';
this.form.arrowSize = model.arrowSize || 5;
this.form.isGradual = model.isGradual || false;
this.form.modelList = model.modelList || [];
this.form.gradualShow = model.gradualShow || 'level';
}
}
},
@ -107,24 +182,29 @@ export default {
this.$refs[form].validate((valid) => {
if (valid) {
const lineModel = {
point1: {
x: this.form.x1,
y: this.form.y1
},
point2: {
x: this.form.x2,
y: this.form.y2
},
points: this.form.points,
code: this.isUpdate ? this.form.code : getUID('IscsLine', this.iscs.iscsLineList),
_type: 'IscsLine',
lineWidth: this.form.lineWidth,
fillColor: this.form.fillColor,
classify: this.form.classify,
arrowShow: this.form.arrowShow,
arrowSize: this.form.arrowSize
arrowSize: this.form.arrowSize,
modelList: this.form.modelList,
isGradual: this.form.isGradual,
gradualShow: this.form.gradualShow
};
this.$emit('createDataModel', lineModel);
this.initPage();
if (this.form.isGradual) {
if (this.form.modelList.length) {
this.$emit('createDataModel', lineModel);
this.initPage();
} else {
this.$message.error('渐变列表不能为空');
}
} else {
this.$emit('createDataModel', lineModel);
this.initPage();
}
} else {
return false;
}
@ -132,14 +212,6 @@ export default {
},
deleteDevice() {
const lineModel = {
point1: {
x: this.form.x1,
y: this.form.y1
},
point2: {
x: this.form.x2,
y: this.form.y2
},
code: this.form.code,
_type: 'IscsLine',
lineWidth: this.form.lineWidth,
@ -160,16 +232,73 @@ export default {
fillColor: '#fff',
arrowShow: 'none',
arrowSize: 5,
x1: 10,
y1: 10,
x2: 20,
y2: 10,
classify:'solid'
points: [
{ x: 10, y: 10 },
{ x: 20, y: 10 }
],
classify:'solid',
isGradual: false,
modelList: [],
gradualShow: 'level'
};
},
addModelList() {
const param = {
offset: '',
color: ''
};
this.form.modelList.push(param);
},
handleDelete(index, row) { // 删除创建表格元素
this.form.modelList.splice(index, 1);
},
addPoint(index) {
const data = { x: 0, y: 0 };
this.form.points.splice(index + 1, 0, data);
},
delPoint(index) {
this.form.points.splice(index, 1);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.title-gradual{
width: 100px;
text-align: right;
vertical-align: middle;
float: left;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
box-sizing: border-box;
font-weight: 700;
}
.coordinate {
overflow: hidden;
.titles {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
// float: left;
margin-right: 7px;
}
.listWidth{
display: table;
float: left;
margin-right: 20px;
&:last-child{
margin: 0;
}
}
}
</style>

47
src/views/iscs/iscsDraw/icscComponents/text.vue
View File

@ -19,6 +19,21 @@
<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 label="背景颜色:">
<el-color-picker v-model="form.gbColor" 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>
<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>
@ -47,7 +62,12 @@ export default {
fontSize: 14,
fontWeight: 450,
x: 10,
y: 10
y: 10,
gbColor: '',
gbColorBorder: '',
gbWidth: '',
levelPadding: 0,
verticalPadding: 0
},
rules: {
code: [
@ -64,6 +84,12 @@ export default {
],
fontWeight: [
{ required: true, message: '请输入文字粗细', trigger: 'blur' }
],
levelPadding: [
{ required: true, message: '请输入文字间距', trigger: 'blur' }
],
verticalPadding: [
{ required: true, message: '请输入文字间距', trigger: 'blur' }
]
}
};
@ -87,6 +113,11 @@ export default {
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;
}
}
},
@ -106,7 +137,12 @@ export default {
textFill: this.form.textFill,
fontSize: this.form.fontSize,
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
fontFamily: 'consolas',
gbColor: this.form.gbColor,
gbColorBorder: this.form.gbColorBorder,
gbWidth: this.form.gbWidth,
levelPadding: this.form.levelPadding,
verticalPadding: this.form.verticalPadding
};
this.$emit('createDataModel', textModel);
this.initPage();
@ -142,7 +178,12 @@ export default {
fontSize: 14,
fontWeight: 450,
x: 10,
y: 10
y: 10,
gbColor: '',
gbColorBorder: '',
gbWidth: '',
levelPadding: 0,
verticalPadding: 0
};
}
}

8
src/views/iscs/iscsDraw/index.vue
View File

@ -18,6 +18,8 @@
<iscs-fire-alarm v-else-if="iscsMode==='fas02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 火灾报警系统 -->
<iscs-power-monitoring v-else-if="iscsMode==='powerMonitoring02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 电力监控系统 -->
<iscs-signal-system v-else-if="iscsMode==='signalSystem02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 信号系统 -->
<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>
</transition>
@ -38,6 +40,8 @@ import IscsCommunication from './iscsCommunication/index';
import IscsFireAlarm from './iscsFireAlarm/index';
import IscsPowerMonitoring from './iscsPowerMonitoring/index';
import IscsSignalSystem from './iscsSignalSystem/index';
import IscsPsd from './iscsPsd/index';
import IscsEnvironment from './iscsEnvironment/index';
import { saveIscsElement } from '@/api/iscs';
@ -57,7 +61,9 @@ export default {
IscsCommunication,
IscsFireAlarm,
IscsPowerMonitoring,
IscsSignalSystem
IscsSignalSystem,
IscsPsd,
IscsEnvironment
},
data() {
return {

174
src/views/iscs/iscsDraw/iscsEnvironment/index.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control heightClass ">
<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="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane label="按钮" name="IscsButton">
<iscs-button
ref="iscsButton"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="文字" name="IscsText">
<iscs-text
ref="iscsText"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="线段" name="IscsLine">
<iscs-line
ref="iscsLine"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="矩形" name="IscsRect">
<iscs-rect
ref="iscsRect"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</transition>
</template>
<script>
import {deviceFactory} from '@/iscs/utils/parser';
import IscsLine from '../icscComponents/line';
import IscsText from '../icscComponents/text';
import IscsRect from '../icscComponents/rect';
import IscsButton from '../icscComponents/button';
export default {
name: 'IscsOperate',
components: {
IscsRect,
IscsLine,
IscsText,
IscsButton
},
mixins: [
],
data() {
return {
enabledTab: 'PlatformScreenDoor',
data: '',
stationCode: ''
};
},
computed: {
height() {
return this.$store.state.config.height;
}
},
watch: {
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
this.enabledTab = model._type;
}
},
mounted() {
this.$emit('iscsChange', this.$route.params.id);
},
beforeDestroy() {
},
methods: {
createDataModel(model) {
const newModel = deviceFactory(model._type, model);
this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
},
deleteDataModel(model) {
this.$store.dispatch('iscs/deleteIscsDevices', model);
},
handleSave() {
const data = JSON.stringify(this.$store.state.iscs.iscs);
console.log(data);
this.$emit('handleSave', data);
},
handleTabClick() {
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.map-control {
float: right;
width: 100%;
height: 100%;
.border-card{
height: 100%;
}
}
.mapEdit{
height: calc(100% - 47px);
.tab_pane_box{
height: 100%;
}
}
/deep/ .el-card__body{
height:100%;
}
/deep/ {
.mapEdit .el-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
}
.mapEdit .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #f5f7fa;
background: #f5f7fa;
}
.mapEdit .el-tabs__active-bar{
background: transparent;
}
.mapEdit .el-tabs__content {
height: calc(100% - 56px);
}
.mapEdit .el-tab-pane {
height: 100%;
}
.card .el-tabs__nav .el-tabs__item.is-active {
border-bottom: 2px solid #E4E7ED;
background: #409eff;
color: #fff;
}
.card .el-tabs__nav .el-tabs__item{
padding: 0 20px!important;
}
.mapEdit .el-tabs__nav-prev {
width: 20px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 4px #ccc;
}
.mapEdit .el-tabs__nav-next {
width: 20px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 4px #ccc;
}
}
.heightClass{height:100%;}
</style>

174
src/views/iscs/iscsDraw/iscsPsd/index.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control heightClass ">
<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="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane label="按钮" name="IscsButton">
<iscs-button
ref="iscsButton"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="文字" name="IscsText">
<iscs-text
ref="iscsText"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="线段" name="IscsLine">
<iscs-line
ref="iscsLine"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="矩形" name="IscsRect">
<iscs-rect
ref="iscsRect"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</transition>
</template>
<script>
import {deviceFactory} from '@/iscs/utils/parser';
import IscsLine from '../icscComponents/line';
import IscsText from '../icscComponents/text';
import IscsRect from '../icscComponents/rect';
import IscsButton from '../icscComponents/button';
export default {
name: 'IscsOperate',
components: {
IscsRect,
IscsLine,
IscsText,
IscsButton
},
mixins: [
],
data() {
return {
enabledTab: 'PlatformScreenDoor',
data: '',
stationCode: ''
};
},
computed: {
height() {
return this.$store.state.config.height;
}
},
watch: {
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
this.enabledTab = model._type;
}
},
mounted() {
this.$emit('iscsChange', this.$route.params.id);
},
beforeDestroy() {
},
methods: {
createDataModel(model) {
const newModel = deviceFactory(model._type, model);
this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
},
deleteDataModel(model) {
this.$store.dispatch('iscs/deleteIscsDevices', model);
},
handleSave() {
const data = JSON.stringify(this.$store.state.iscs.iscs);
console.log(data);
this.$emit('handleSave', data);
},
handleTabClick() {
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.map-control {
float: right;
width: 100%;
height: 100%;
.border-card{
height: 100%;
}
}
.mapEdit{
height: calc(100% - 47px);
.tab_pane_box{
height: 100%;
}
}
/deep/ .el-card__body{
height:100%;
}
/deep/ {
.mapEdit .el-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
}
.mapEdit .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #f5f7fa;
background: #f5f7fa;
}
.mapEdit .el-tabs__active-bar{
background: transparent;
}
.mapEdit .el-tabs__content {
height: calc(100% - 56px);
}
.mapEdit .el-tab-pane {
height: 100%;
}
.card .el-tabs__nav .el-tabs__item.is-active {
border-bottom: 2px solid #E4E7ED;
background: #409eff;
color: #fff;
}
.card .el-tabs__nav .el-tabs__item{
padding: 0 20px!important;
}
.mapEdit .el-tabs__nav-prev {
width: 20px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 4px #ccc;
}
.mapEdit .el-tabs__nav-next {
width: 20px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 4px #ccc;
}
}
.heightClass{height:100%;}
</style>