Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
fan
commit
e4be43ad37
@ -1,5 +1,5 @@
|
||||
# just a flag
|
||||
NODE_ENV = 'production'
|
||||
NODE_ENV = 'test'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
|
||||
|
||||
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
174
src/views/iscs/iscsDraw/iscsEnvironment/index.vue
Normal 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
174
src/views/iscs/iscsDraw/iscsPsd/index.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user