This commit is contained in:
joylink_cuiweidong 2020-10-12 13:49:05 +08:00
commit 32239c7346
13 changed files with 200 additions and 113 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -190,7 +190,7 @@ deviceRender[deviceType.IscsText] = {
deviceRender[deviceType.IscsLine] = { deviceRender[deviceType.IscsLine] = {
_type: deviceType.IscsLine, _type: deviceType.IscsLine,
zlevel: 1, zlevel: 1,
z: 5 z: 5
}; };
/** 矩形渲染配置 */ /** 矩形渲染配置 */
deviceRender[deviceType.IscsRect] = { deviceRender[deviceType.IscsRect] = {

View File

@ -27,7 +27,7 @@ export default class line extends Group {
position: [model.points[0].x, model.points[0].y] position: [model.points[0].x, model.points[0].y]
}); });
// 1101 垂直渐变 1110 水平渐变 // 1101 垂直渐变 1110 水平渐变
let strokeColor = this.model.fillColor; let fillColor = this.model.fillBackground;
if (model.isGradual) { if (model.isGradual) {
const offsetList = []; const offsetList = [];
model.modelList.forEach(item => { model.modelList.forEach(item => {
@ -37,9 +37,9 @@ export default class line extends Group {
}); });
}); });
if (model.gradualShow == 'level') { if (model.gradualShow == 'level') {
strokeColor = new zrender.LinearGradient(1, 1, 0, 1, offsetList); fillColor = new zrender.LinearGradient(1, 1, 0, 1, offsetList);
} else { } else {
strokeColor = new zrender.LinearGradient(1, 1, 1, 0, offsetList); fillColor = new zrender.LinearGradient(1, 1, 1, 0, offsetList);
} }
} }
const modelPoints = []; const modelPoints = [];
@ -52,17 +52,21 @@ export default class line extends Group {
}); });
this.iscsLine = new Polyline({ this.iscsLine = new Polyline({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
z2: model.z2||0, z2: model.z2 || 0,
draggable: false, draggable: false,
shape: { shape: {
points: modelPoints points: modelPoints
}, },
style: { style: {
lineWidth: this.model.lineWidth, lineWidth: this.model.lineWidth,
stroke: strokeColor stroke: this.model.fillColor
} }
}); });
console.log(this.model.fill);
if (fillColor) {
this.iscsLine.setStyle('fill', fillColor);
}
if (model.classify == 'dashed') { if (model.classify == 'dashed') {
this.iscsLine.setStyle('lineDash', [8, 6]); this.iscsLine.setStyle('lineDash', [8, 6]);
} }
@ -75,8 +79,8 @@ export default class line extends Group {
} }
this.arrows = new Polygon({ this.arrows = new Polygon({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
z2: model.z2||0, z2: model.z2 || 0,
origin: [0, 0], origin: [0, 0],
rotation: rotation, rotation: rotation,
shape: { shape: {
@ -103,8 +107,8 @@ export default class line extends Group {
const y = model.points[this.model.points.length - 1].y - model.points[this.model.points.length - 2].y; const y = model.points[this.model.points.length - 1].y - model.points[this.model.points.length - 2].y;
this.arrows = new Polygon({ this.arrows = new Polygon({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
z2: model.z2||0, z2: model.z2 || 0,
origin: [x, y], origin: [x, y],
rotation: rotation, rotation: rotation,
shape: { shape: {

View File

@ -20,35 +20,45 @@ import blowerRedRight from '@/assets/iscs_picture/gufengji-red-r.png';
import blowerGrayRight from '@/assets/iscs_picture/gufengji-gray-r.png'; import blowerGrayRight from '@/assets/iscs_picture/gufengji-gray-r.png';
import iscsAPF from '@/assets/iscs_picture/iscs_APF.png'; import iscsAPF from '@/assets/iscs_picture/iscs_APF.png';
import drum from '@/assets/iscs_picture/drum.png'; import drum from '@/assets/iscs_picture/drum.png';
import exhaustFan from '@/assets/iscs_picture/exhaustFan.png' import exhaustFan from '@/assets/iscs_picture/exhaustFan.png';
import waterCooler from '@/assets/iscs_picture/ZSDF533.png'; import waterCooler from '@/assets/iscs_picture/ZSDF533.png';
import textBgBluePoint from '@/assets/iscs_picture/textBgBluePoint.png'; import textBgBluePoint from '@/assets/iscs_picture/textBgBluePoint.png';
import ventilationFan from '@/assets/iscs_picture/ventilationFan.png' import kongzhixiang from '@/assets/iscs_picture/iscs_kongzhixiang.png';
import ventilationFan from '@/assets/iscs_picture/ventilationFan.png';
import escalator from '@/assets/iscs_picture/escalator.png';
import toUp from '@/assets/iscs_picture/to-up.png';
import toDown from '@/assets/iscs_picture/to-down.png';
import lift from '@/assets/iscs_picture/lift.png';
const pictureObj = { const pictureObj = {
'psdLeft': psdLeft, 'psdLeft': psdLeft,
'psdSystem': psdSystem, 'psdSystem': psdSystem,
'psdRight': psdRight, 'psdRight': psdRight,
'APF': iscsAPF, 'APF': iscsAPF,
'envPersonDoor': envPersonDoor, 'envPersonDoor': envPersonDoor,
's': fireBlue, 's': fireBlue,
'a': fireRed, 'a': fireRed,
hand, hand,
fmBlue, fmBlue,
fmGray, fmGray,
fmGreen, fmGreen,
airCond, airCond,
airCondMul, airCondMul,
setting, setting,
blowerRedLeft, blowerRedLeft,
blowerGrayLeft, blowerGrayLeft,
blowerRedRight, blowerRedRight,
blowerGrayRight, blowerGrayRight,
drum, drum,
exhaustFan, exhaustFan,
waterCooler, waterCooler,
textBgBluePoint, textBgBluePoint,
ventilationFan ventilationFan,
kongzhixiang,
escalator,
toUp,
toDown,
lift
}; };
export default class Picture extends Group { export default class Picture extends Group {
constructor(device) { constructor(device) {
@ -69,9 +79,9 @@ export default class Picture extends Group {
}); });
this.imageButton = new Image({ this.imageButton = new Image({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
origin: [model.width/2, model.height/2], origin: [model.width / 2, model.height / 2],
rotation: (model.rotation||0)*Math.PI/180, rotation: (model.rotation || 0) * Math.PI / 180,
style: { style: {
x: 0, x: 0,
y: 0, y: 0,

View File

@ -241,37 +241,37 @@ export function RailListN(){
scope.sectionrail[sectioncode].lineright.closed = false; scope.sectionrail[sectioncode].lineright.closed = false;
scope.sectionrail[sectioncode].lineright.name = sectioncode; scope.sectionrail[sectioncode].lineright.name = sectioncode;
for(let n=0,nm=scope.sectionrail[sectioncode].lineleft.points.length;n<nm;n++){ // for(let n=0,nm=scope.sectionrail[sectioncode].lineleft.points.length;n<nm;n++){
var geometry = new THREE.CircleGeometry( 0.05, 16 ); // var geometry = new THREE.CircleGeometry( 0.05, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); // var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material ); // var circle = new THREE.Mesh( geometry, material );
// console.log(n); // // console.log(n);
// console.log(scope.sectionrail[section[i].code].lineleft.points[n]); // // console.log(scope.sectionrail[section[i].code].lineleft.points[n]);
circle.position.x = scope.sectionrail[sectioncode].lineleft.points[n].x; // circle.position.x = scope.sectionrail[sectioncode].lineleft.points[n].x;
circle.position.y = scope.sectionrail[sectioncode].lineleft.points[n].y; // circle.position.y = scope.sectionrail[sectioncode].lineleft.points[n].y;
circle.position.z = scope.sectionrail[sectioncode].lineleft.points[n].z; // circle.position.z = scope.sectionrail[sectioncode].lineleft.points[n].z;
circle.rotation.x = -Math.PI/2; // circle.rotation.x = -Math.PI/2;
scene.add( circle ); // scene.add( circle );
} // }
// scope.sectionrail[section[i].code].lineright.tension = 0.11; // // scope.sectionrail[section[i].code].lineright.tension = 0.11;
var points = scope.sectionrail[sectioncode].lineleft.getPoints( 50 ); // var points = scope.sectionrail[sectioncode].lineleft.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points ); // var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material; // var material;
if(scope.sectionrail[sectioncode].type == "a"){ // if(scope.sectionrail[sectioncode].type == "a"){
material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); // material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
} // }
if(scope.sectionrail[sectioncode].type == "b"){ // if(scope.sectionrail[sectioncode].type == "b"){
material = new THREE.LineBasicMaterial( { color : 0x00ff00 } ); // material = new THREE.LineBasicMaterial( { color : 0x00ff00 } );
} // }
if(scope.sectionrail[sectioncode].type == "c"){ // if(scope.sectionrail[sectioncode].type == "c"){
material = new THREE.LineBasicMaterial( { color : 0x0000ff } ); // material = new THREE.LineBasicMaterial( { color : 0x0000ff } );
} // }
//
//
// Create the final object to add to the scene // // Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material ); // var curveObject = new THREE.Line( geometry, material );
//
curveObject.position.y = Math.random(); // curveObject.position.y = Math.random();
scene.add(curveObject); // scene.add(curveObject);
} }
} }

View File

@ -1,11 +1,11 @@
<template> <template>
<div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;"> <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 20px;"> <el-form ref="form" :rules="rules" :model="form" label-width="100px" style="width: 100%;padding: 10px 20px;">
<el-form-item label="图层:" prop="z2"> <el-form-item label="图层:" prop="z2">
<el-input-number v-model="form.z2" controls-position="right" :min="0" size="small" /> <el-input-number v-model="form.z2" controls-position="right" :min="0" size="small" />
</el-form-item> </el-form-item>
<el-form-item label="线段宽度:" prop="lineWidth"> <el-form-item label="线段宽度:" prop="lineWidth">
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50" size="small" /> <el-input-number v-model="form.lineWidth" controls-position="right" :min="0" :max="50" size="small" />
</el-form-item> </el-form-item>
<el-form-item label="类型:" prop="type"> <el-form-item label="类型:" prop="type">
<el-select v-model="form.classify" placeholder="请选择类型" size="small"> <el-select v-model="form.classify" placeholder="请选择类型" size="small">
@ -43,7 +43,10 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<el-form-item v-if="!form.isGradual" label="线段颜色:" prop="fillColor"> <el-form-item v-if="!form.isGradual" label="线段填充色:" prop="fillColor">
<el-color-picker v-model="form.fillBackground" size="small" />
</el-form-item>
<el-form-item label="线段颜色:" prop="borderColor">
<el-color-picker v-model="form.fillColor" size="small" /> <el-color-picker v-model="form.fillColor" size="small" />
</el-form-item> </el-form-item>
<el-form-item label="箭头显示:" prop="arrowShow"> <el-form-item label="箭头显示:" prop="arrowShow">
@ -122,10 +125,11 @@ export default {
showDeleteButton: false, showDeleteButton: false,
form: { form: {
classify:'solid', classify:'solid',
code: '', code: '',
z2: 0, z2: 0,
lineWidth: '', lineWidth: '',
fillColor: '#fff', fillColor: '#fff',
fillBackground: '',
arrowShow: 'none', arrowShow: 'none',
arrowSize: 5, arrowSize: 5,
points: [ points: [
@ -141,7 +145,7 @@ export default {
{ required: true, message: '请输入线段宽度', trigger: 'blur' } { required: true, message: '请输入线段宽度', trigger: 'blur' }
], ],
fillColor: [ fillColor: [
{ required: true, message: '请输入线段颜色', trigger: 'blur' } { required: true, message: '请输入线段边框颜色', trigger: 'blur' }
] ]
} }
}; };
@ -158,10 +162,11 @@ export default {
this.buttonText = '修改'; this.buttonText = '修改';
this.showDeleteButton = true; this.showDeleteButton = true;
this.isUpdate = true; this.isUpdate = true;
this.form.code = model.code; this.form.code = model.code;
this.form.z2 = model.z2||0; this.form.z2 = model.z2 || 0;
this.form.lineWidth = model.lineWidth; this.form.lineWidth = model.lineWidth;
this.form.fillColor = model.fillColor; this.form.fillColor = model.fillColor;
this.form.fillBackground = model.fillBackground || '';
if (model.point1) { if (model.point1) {
this.form.points = []; this.form.points = [];
this.form.points.push(model.point1); this.form.points.push(model.point1);
@ -189,10 +194,11 @@ export default {
const lineModel = { const lineModel = {
points: this.form.points, points: this.form.points,
code: this.isUpdate ? this.form.code : getUID('IscsLine', this.iscs.iscsLineList), code: this.isUpdate ? this.form.code : getUID('IscsLine', this.iscs.iscsLineList),
_type: 'IscsLine', _type: 'IscsLine',
z2: this.form.z2, z2: this.form.z2,
lineWidth: this.form.lineWidth, lineWidth: this.form.lineWidth,
fillColor: this.form.fillColor, fillColor: this.form.fillColor,
fillBackground: this.form.fillBackground,
classify: this.form.classify, classify: this.form.classify,
arrowShow: this.form.arrowShow, arrowShow: this.form.arrowShow,
arrowSize: this.form.arrowSize, arrowSize: this.form.arrowSize,
@ -222,6 +228,7 @@ export default {
_type: 'IscsLine', _type: 'IscsLine',
lineWidth: this.form.lineWidth, lineWidth: this.form.lineWidth,
fillColor: this.form.fillColor, fillColor: this.form.fillColor,
fillBackground: this.form.fillBackground,
classify: this.form.classify, classify: this.form.classify,
arrowShow: this.form.arrowShow, arrowShow: this.form.arrowShow,
arrowSize: this.form.arrowSize arrowSize: this.form.arrowSize
@ -236,6 +243,7 @@ export default {
code: '', code: '',
lineWidth: '', lineWidth: '',
fillColor: '#fff', fillColor: '#fff',
fillBackground: '',
arrowShow: 'none', arrowShow: 'none',
arrowSize: 5, arrowSize: 5,
points: [ points: [

View File

@ -9,9 +9,9 @@
<el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value" /> <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="旋转角度:" prop="rotation"> <el-form-item label="旋转角度:" prop="rotation">
<el-input-number v-model="form.rotation" controls-position="right" size="small" /> <el-input-number v-model="form.rotation" controls-position="right" size="small" />
</el-form-item> </el-form-item>
<el-form-item label="宽度:" prop="width"> <el-form-item label="宽度:" prop="width">
<el-input-number v-model="form.width" controls-position="right" :min="1" size="small" /> <el-input-number v-model="form.width" controls-position="right" :min="1" size="small" />
</el-form-item> </el-form-item>
@ -50,36 +50,41 @@ export default {
type: '', type: '',
size: 10, size: 10,
width: 50, width: 50,
height: 50, height: 50,
rotation: 0, rotation: 0,
x: 10, x: 10,
y: 10 y: 10
}, },
typeList: [ typeList: [
{ name: '车头', value: 'psdLeft' }, { name: '车头', value: 'psdLeft' },
{ name: '车尾', value: 'psdRight' }, { name: '车尾', value: 'psdRight' },
{ name: '车厢', value: 'psdSystem' }, { name: '车厢', value: 'psdSystem' },
{ name: '人防门', value: 'envPersonDoor'}, { name: '人防门', value: 'envPersonDoor'},
{ name: '蓝色FIRE', value: 's'}, { name: '蓝色FIRE', value: 's'},
{ name: '红色FIRE', value: 'a'}, { name: '红色FIRE', value: 'a'},
{ name: 'APF', value: 'APF'}, { name: 'APF', value: 'APF'},
{ name: '手动阀', value: 'hand'}, { name: '手动阀', value: 'hand'},
{ name: '蓝色-阀门', value: 'fmBlue'}, { name: '蓝色-阀门', value: 'fmBlue'},
{ name: '灰色-阀门', value: 'fmGray'}, { name: '灰色-阀门', value: 'fmGray'},
{ name: '绿色-阀门', value: 'fmGreen'}, { name: '绿色-阀门', value: 'fmGreen'},
{ name: '空调', value: 'airCond'}, { name: '空调', value: 'airCond'},
{ name: '多联空调', value: 'airCondMul'}, { name: '多联空调', value: 'airCondMul'},
{ name: '管件', value: 'setting'}, { name: '管件', value: 'setting'},
{ name: '汽包', value: 'drum' }, { name: '汽包', value: 'drum' },
{ name: '红色-左侧-鼓风机', value: 'blowerRedLeft'}, { name: '红色-左侧-鼓风机', value: 'blowerRedLeft'},
{ name: '灰色-左侧-鼓风机', value: 'blowerGrayLeft'}, { name: '灰色-左侧-鼓风机', value: 'blowerGrayLeft'},
{ name: '红色-右侧-鼓风机', value: 'blowerRedRight'}, { name: '红色-右侧-鼓风机', value: 'blowerRedRight'},
{ name: '灰色-右侧-鼓风机', value: 'blowerGrayRight'}, { name: '灰色-右侧-鼓风机', value: 'blowerGrayRight'},
{ name: '排风机', value: 'exhaustFan' }, { name: '排风机', value: 'exhaustFan' },
{ name: '冷水机', value: 'waterCooler'}, { name: '冷水机', value: 'waterCooler'},
{ name: '顶部排风机', value: 'ventilationFan'}, { name: '顶部排风机', value: 'ventilationFan'},
{ name: '文字蓝色背景', value: 'textBgBluePoint'} { name: '文字蓝色背景', value: 'textBgBluePoint'},
], { name: '风井', value: 'kongzhixiang' },
{ name: '扶梯', value: 'escalator'},
{ name: '扶梯-朝上指示', value: 'toUp'},
{ name: '扶梯-朝下执行', value: 'toDown'},
{ name: '电梯', value: 'lift' }
],
rules: { rules: {
strokeColor: [ strokeColor: [
@ -105,8 +110,8 @@ export default {
this.isUpdate = true; this.isUpdate = true;
this.form.code = model.code; this.form.code = model.code;
this.form.type = model.type; this.form.type = model.type;
this.form.size = model.size; this.form.size = model.size;
this.form.rotation = model.rotation; this.form.rotation = model.rotation;
this.form.width = model.width; this.form.width = model.width;
this.form.height = model.height; this.form.height = model.height;
this.form.x = model.point.x; this.form.x = model.point.x;
@ -127,8 +132,8 @@ export default {
code: this.isUpdate ? this.form.code : getUID('IscsPicture', this.iscs.iscsPictureList), code: this.isUpdate ? this.form.code : getUID('IscsPicture', this.iscs.iscsPictureList),
_type: 'IscsPicture', _type: 'IscsPicture',
type: this.form.type, type: this.form.type,
size: this.form.size, size: this.form.size,
rotation: this.form.rotation, rotation: this.form.rotation,
width: this.form.width, width: this.form.width,
height: this.form.height height: this.form.height
}; };
@ -148,8 +153,8 @@ export default {
code: this.form.code, code: this.form.code,
_type: 'IscsPicture', _type: 'IscsPicture',
type: this.form.type, type: this.form.type,
size: this.form.size, size: this.form.size,
rotation: this.form.rotation, rotation: this.form.rotation
}; };
this.$emit('deleteDataModel', rectModel); this.$emit('deleteDataModel', rectModel);
}, },
@ -160,8 +165,8 @@ export default {
this.form = { this.form = {
code: '', code: '',
type: '', type: '',
size: 10, size: 10,
rotation: 0, rotation: 0,
width: 50, width: 50,
height: 50, height: 50,
x: 10, x: 10,

View File

@ -0,0 +1,57 @@
<template>
<div class="psdSystem">
<div class="psdSystem_header">{{ stationName+'主变电所接线图' }}</div>
<div>
<iscsSystem ref="iscsPlate" :width-canvas="width" :canvas-height="height" />
</div>
<!-- <div class="psdSystem_footer">
<div class="prevButton">{{}}</div>
<div class="nextButton">{{}}</div>
</div> -->
</div>
</template>
<script>
import iscsSystem from '../canvas/iscsCanvas';
import {getIscsData} from '@/api/iscs';
export default {
name:'PsdSystem',
components:{
iscsSystem
},
computed:{
stationName() {
return this.$route.query.stationName;
},
width() {
return 2050;
},
height() {
return 1100;
}
},
mounted() {
const params = {
lineCode: this.$route.query.lineCode,
totalSystem: 'powerMonitoring02',
system: 'powerMonitoring',
userInterface: 'hybrid'
};
getIscsData(params).then(resp=>{
if (resp.data) {
const data = JSON.parse(resp.data.graphData);
this.$refs.iscsPlate.show(data);
}
});
}
};
</script>
<style lang="scss" scoped>
.psdSystem_header{
text-align: center;
margin-top: 15px;
color: #d8e9a5;
}
.psdSystem{
}
</style>

View File

@ -1,15 +1,18 @@
<template> <template>
<div style="height: 100%; width: 100%;overflow-y:hidden;overflow-x:hidden;position: relative;"> <div style="height: 100%; width: 100%;overflow-y:hidden;overflow-x:hidden;position: relative;">
<psd-system v-if="mode=='psdSystem'" /> <psd-system v-if="mode=='psdSystem'" />
<electric-system v-if="mode=='electric'" />
<substation v-else-if="mode=='substation'" /> <substation v-else-if="mode=='substation'" />
</div> </div>
</template> </template>
<script> <script>
import PsdSystem from './psdSystem/index.vue'; import PsdSystem from './psdSystem/index.vue';
import ElectricSystem from './electricSystem/index.vue';
import Substation from './powerMonitor/substation.vue'; import Substation from './powerMonitor/substation.vue';
export default { export default {
components:{ components:{
PsdSystem, PsdSystem,
ElectricSystem,
Substation Substation
}, },
data() { data() {