This commit is contained in:
zyy 2020-09-22 18:03:58 +08:00
commit d93cbc4beb
11 changed files with 442 additions and 9 deletions

View File

@ -363,4 +363,19 @@ deviceRender[deviceType.IscsTriangle] = {
zlevel:1,
z: 5
};
/** 福州 圆形 */
deviceRender[deviceType.IscsCircle] = {
_type: deviceType.IscsCircle,
zlevel:1,
z: 5
};
/** 福州 屏蔽门 */
deviceRender[deviceType.FuzhouPsd] = {
_type: deviceType.FuzhouPsd,
zlevel:1,
z: 5
};
export default deviceRender;

View File

@ -56,7 +56,9 @@ const deviceType = {
CommunicationButcher: 'CommunicationButcher',
AfcDoorUnite: 'AfcDoorUnite',
RectText: 'RectText',
IscsTriangle:'IscsTriangle'
IscsTriangle:'IscsTriangle',
IscsCircle:'IscsCircle',
FuzhouPsd:'FuzhouPsd'
};
export default deviceType;

View File

@ -57,6 +57,8 @@ import CommunicationButcher from './communicationButcher';
import AfcDoorUnite from './afcDoorUnite';
import RectText from './rectText';
import IscsTriangle from './iscsTriangle';
import IscsCircle from './iscsCircle';
import FuzhouPsd from './fuzhouPsd';
const iscsShape = {};
iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
@ -118,6 +120,8 @@ iscsShape[deviceType.CommunicationButcher] = CommunicationButcher;
iscsShape[deviceType.AfcDoorUnite] = AfcDoorUnite;
iscsShape[deviceType.RectText] = RectText;
iscsShape[deviceType.IscsTriangle] = IscsTriangle;
iscsShape[deviceType.IscsCircle] = IscsCircle;
iscsShape[deviceType.FuzhouPsd] = FuzhouPsd;
function shapefactory(device, iscs) {
const type = device.model._type;

View File

@ -0,0 +1,87 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
export default class fuzhouPsd extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this._type = device.model._type;
this._code = device.model.code;
this.create();
this.setState(this.model);
}
create() {
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.fuzhouPsdBorder = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 0,
width: this.model.height * 1.6,
height: this.model.height
},
style: {
fill: '#c48b19',
stroke: '#f00',
lineWidth: 0
}
});
this.fuzhouPsdLeft = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 3 + (this.model.height * 1.6 - 8) * 0.15,
y: 3,
width: (this.model.height * 1.6 - 8) * 0.35,
height: this.model.height - 6
},
style: {
fill: '#33CC00',
stroke: '#000',
lineWidth: 1
}
});
this.fuzhouPsdRight = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: (this.model.height * 1.6 - 8) * 0.5 + 5,
y: 3,
width: (this.model.height * 1.6 - 8) * 0.35,
height: this.model.height - 6
},
style: {
fill: '#33CC00',
stroke: '#000',
lineWidth: 1
}
});
this.grouper.add(this.fuzhouPsdBorder);
this.grouper.add(this.fuzhouPsdLeft);
this.grouper.add(this.fuzhouPsdRight);
this.add(this.grouper);
}
setState(model) {
if (model.alarm) {
this.fuzhouPsdBorder.setStyle('lineWidth', 1);
}
if (model.noStatus) {
this.fuzhouPsdLeft.attr({shape:{x: 3}});
this.fuzhouPsdRight.attr({shape:{x: this.model.height * 1.04 - 0.2}});
this.fuzhouPsdBorder.setStyle('fill', '#0f96dc');
this.fuzhouPsdRight.setStyle('fill', '#0f96dc');
this.fuzhouPsdLeft.setStyle('fill', '#0f96dc');
}
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

View File

@ -0,0 +1,41 @@
import Group from 'zrender/src/container/Group';
import Circle from 'zrender/src/graphic/shape/Circle';
export default class iscsCircle 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.iscsCircle = new Circle({
zlevel: model.zlevel,
z: model.z,
shape: {
cx:this.model.radius,
cy:this.model.radius,
r:this.model.radius
},
style: {
fill: this.model.fillColor,
stroke: this.model.strokeColor,
lineWidth: this.model.borderWidth
}
});
this.grouper.add(this.iscsCircle);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

View File

@ -217,6 +217,12 @@ export function parser(data) {
zrUtil.each(data.iscsTriangleList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsTriangle, elem);
});
zrUtil.each(data.iscsCircleList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsCircle, elem);
});
zrUtil.each(data.fuzhouPsdList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.FuzhouPsd, elem);
});
}
return iscsDevice;

View File

@ -0,0 +1,147 @@
<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="radius">
<el-input-number v-model="form.radius" controls-position="right" :min="5" 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="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: 'IscsCircle',
components: {
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
form: {
code: '',
fillColor: '',
borderWidth: '',
strokeColor: '',
radius: 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 === 'IscsCircle' ) {
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.radius = model.radius;
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('IscsCircle', this.iscs.iscsCircleList),
_type: 'IscsCircle',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
strokeColor: this.form.strokeColor,
radius: this.form.radius
};
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: 'IscsCircle',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
strokeColor: this.form.strokeColor,
radius: this.form.radius
};
this.$emit('deleteDataModel', rectModel);
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
fillColor: '',
borderWidth: '',
strokeColor: '',
radius: 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>

View File

@ -106,7 +106,7 @@ export default {
x: this.form.x,
y: this.form.y
},
code: this.isUpdate ? this.form.code : getUID('IscsTriangle', this.iscs.iscsRectList),
code: this.isUpdate ? this.form.code : getUID('IscsTriangle', this.iscs.iscsTriangleList),
_type: 'IscsTriangle',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,

View File

@ -42,7 +42,7 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="扇门" name="ordinaryDoor">
<el-tab-pane label="扇门" name="OrdinaryDoor">
<ordinary-door
ref="ordinaryDoor"
style="width: 100%;height: 100%;"
@ -50,7 +50,7 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="门禁" name="fuzhouDoor">
<el-tab-pane label="门禁" name="FuzhouDoor">
<fuzhou-door
ref="fuzhouDoor"
style="width: 100%;height: 100%;"
@ -58,7 +58,7 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="通讯图符" name="communicationButcher">
<el-tab-pane label="通讯图符" name="CommunicationButcher">
<communication-butcher
ref="communication"
style="width: 100%;height: 100%;"
@ -66,7 +66,7 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="门禁单元" name="afcDoorUnite">
<el-tab-pane label="门禁单元" name="AfcDoorUnite">
<afc-door-unite
ref="afcDoorUnite"
style="width: 100%; height: 100%;"
@ -106,7 +106,7 @@ export default {
],
data() {
return {
enabledTab: 'PlatformScreenDoor',
enabledTab: 'IscsButton',
data: '',
stationCode: ''
};

View File

@ -0,0 +1,110 @@
<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="height">
<el-input-number v-model="form.height" controls-position="right" :min="20" 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 {getUID} from '@/iscs/utils/Uid';
import { mapGetters } from 'vuex';
export default {
name: 'FuzhouPsd',
data() {
return {
form:{
code: '',
height:30,
x: 10,
y: 10
},
rules: {},
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false
};
},
computed:{
...mapGetters('iscs', [
'iscs'
])
},
watch:{
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'FuzhouPsd' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.x = model.point.x;
this.form.y = model.point.y;
this.form.height = model.height;
}
}
},
mounted() {},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const model = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.isUpdate ? this.form.code : getUID('FuzhouPsd', this.iscs.fuzhouPsdList),
_type: 'FuzhouPsd',
height:this.form.height
};
this.$emit('createDataModel', model);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const model = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.form.code,
_type: 'FuzhouPsd',
height:this.form.height
};
this.$emit('deleteDataModel', model);
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
height:30,
x: 10,
y: 10
};
}
}
};
</script>
<style scoped>
</style>

View File

@ -50,9 +50,25 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="屏蔽门" name="FuzhouPsd">
<fuzhou-psd
ref="fuzhouPsd"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="三角形" name="IscsTriangle">
<iscs-triangle
ref="iscsRectText"
ref="iscsTriangle"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="圆形" name="IscsCircle">
<iscs-circle
ref="iscsCircle"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
@ -69,8 +85,11 @@ import IscsLine from '../icscComponents/line';
import IscsText from '../icscComponents/text';
import IscsRect from '../icscComponents/rect';
import IscsTriangle from '../icscComponents/triangle';
import IscsCircle from '../icscComponents/circle';
import IscsButton from '../icscComponents/button';
import IscsRectText from '../iscsCommonElem/rectText';
import FuzhouPsd from '../iscsCommonElem/fuzhouPsd';
export default {
name: 'IscsOperate',
components: {
@ -79,7 +98,9 @@ export default {
IscsText,
IscsButton,
IscsRectText,
IscsTriangle
IscsTriangle,
IscsCircle,
FuzhouPsd
},
mixins: [
],