iscs绘制元素
This commit is contained in:
zyy
parent
fb08f43afd
commit
b9de20f22a
@ -1,6 +1,7 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Sector from 'zrender/src/graphic/shape/Sector';
|
||||
import Polyline from 'zrender/src/graphic/shape/Polyline';
|
||||
// import createPathSvg from './components/pathsvg';
|
||||
|
||||
export default class VidiconCloud extends Group {
|
||||
constructor(device) {
|
||||
@ -13,7 +14,6 @@ export default class VidiconCloud extends Group {
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
console.log(this.model, Math.cos(45 * (Math.PI / 180)));
|
||||
this.grouper = new Group({
|
||||
id: this.model.code,
|
||||
position: [this.model.point.x, this.model.point.y]
|
||||
@ -35,6 +35,7 @@ export default class VidiconCloud extends Group {
|
||||
fill: 'rgba(0,0,0,0)'
|
||||
}
|
||||
});
|
||||
// this.path = createPathSvg(this.model);
|
||||
|
||||
this.Polyline = new Polyline({
|
||||
zlevel: this.model.zlevel,
|
||||
@ -56,6 +57,7 @@ export default class VidiconCloud extends Group {
|
||||
|
||||
this.grouper.add(this.semicircle);
|
||||
this.grouper.add(this.Polyline);
|
||||
// this.grouper.add(this.path);
|
||||
this.add(this.grouper);
|
||||
}
|
||||
|
||||
|
||||
17
src/iscs/shape/components/pathsvg.js
Normal file
17
src/iscs/shape/components/pathsvg.js
Normal file
@ -0,0 +1,17 @@
|
||||
import * as path from 'zrender/src/tool/path';
|
||||
const map = {
|
||||
VidiconCloud: {
|
||||
scale: [0.02, 0.02],
|
||||
path: 'M917.749663 10.405886C911.585184 3.624959 902.758306 0.937984 893.583268 0 431.820819 9.342974 145.285208 116.940772 41.943153 319.811507-35.676029 472.166287 16.281719 643.911525 70.123626 722.186067c6.225919 9.072638 16.609276 14.909436 27.627513 13.783036a31.850488 31.850488 0 0 0 26.316794-16.261116c63.201265-112.455653 187.985875-295.958457 368.517032-386.613155-68.669424 89.593834-177.418197 237.273031-282.726332 404.778911-10.301438 14.069757-87.388139 125.62429-48.435189 262.901697A31.913976 31.913976 0 0 0 192.041037 1023.999754a31.014905 31.014905 0 0 0 8.765438-1.228799 32.00204 32.00204 0 0 0 21.893114-39.546871c-22.958074-80.855021 6.901758-152.575963 25.661434-186.695635 128.880609 54.415347 249.40538 53.637107 350.085036-2.785279 172.380119-96.645097 282.562492-351.743916 327.454642-758.210379a32.255992 32.255992 0 0 0-8.151038-25.126905zM567.377907 737.873743c-81.51038 45.690869-177.029078 46.940149-284.385212 3.788799 15.421436-24.104954 30.822393-47.513589 46.141429-70.533103l219.197387-31.436793a32.01228 32.01228 0 0 0-9.011198-63.385584l-161.710041 23.203834c13.250557-19.169275 26.173434-37.580791 38.871031-55.521267a30.595065 30.595065 0 0 0 6.184958-0.614399l159.272922-31.989753a32.028664 32.028664 0 0 0 24.985594-37.662711 31.651832 31.651832 0 0 0-37.498871-25.108474l-98.488296 19.783676c81.96094-111.742949 141.066206-183.898068 142.069726-185.139156a32.11468 32.11468 0 0 0 2.375679-37.531639 31.743992 31.743992 0 0 0-34.815991-13.844477c-85.503979 22.001659-161.484761 63.657969-227.860426 114.608101v-58.490866a31.856632 31.856632 0 1 0-63.713264 0v112.672741c-22.630395 21.202939-43.868149 43.231222-63.713265 65.574896v-101.715943a31.846392 31.846392 0 1 0-63.692785 0v179.458004c0 0.24576 0.12288 0.43008 0.12288 0.67584-24.289274 32.665592-45.711349 64.614384-63.897585 94.064618-28.344313-67.071984-54.251507-181.637076 0.83968-289.761211C186.593358 176.322518 448.921615 78.374893 858.337197 64.968688c-44.646389 363.374505-142.479326 589.653874-290.95929 672.905055z m339.353518-145.653725c-10.874877-21.626875-45.957109-21.626875-56.852466 0-19.189755 38.256631-114.872292 232.120264-114.872293 294.625209 0 75.612142 64.286705 137.154527 143.298526 137.154527s143.319006-61.542385 143.319006-137.154527c0-62.504945-95.703017-256.368578-114.892773-294.625209z m-28.426233 367.574952c-43.909109 0-79.605741-32.727032-79.605741-72.949743 0-27.770873 40.44799-123.96541 79.605741-207.09371 39.157751 83.1283 79.626221 179.322837 79.626221 207.09371 0 40.22271-35.696631 72.949742-79.626221 72.949743z'
|
||||
}
|
||||
};
|
||||
|
||||
export default function createPathSvg(model) {
|
||||
const svg = path.createFromString(map[model._type].path, {
|
||||
style: {
|
||||
fill: model.fill || '#00FF00'
|
||||
}
|
||||
});
|
||||
svg.scale = map[model._type].scale;
|
||||
return svg;
|
||||
}
|
||||
@ -103,6 +103,12 @@ export default {
|
||||
mode: 'psd',
|
||||
id: '3',
|
||||
type: 'interface'
|
||||
},
|
||||
{
|
||||
name: 'cctv界面',
|
||||
mode: 'cctv',
|
||||
id: '4',
|
||||
type: 'interface'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" />
|
||||
<iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" />
|
||||
<iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" />
|
||||
<iscs-cctv-operate v-else-if="iscsMode==='cctv'" ref="iscsCctvOperate" @iscsChange="iscsChange" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
@ -17,13 +18,15 @@ import IscsPlate from '@/views/iscsSystem/index';
|
||||
import IscsOperate from './iscsOperate/index';
|
||||
import IscsBasOperate from './iscsBasOperate/index';
|
||||
import IscsPsdOperate from './iscsPsdOperate/index';
|
||||
import IscsCctvOperate from './iscsCctvOperate/index';
|
||||
export default {
|
||||
name: 'IscsView',
|
||||
components: {
|
||||
IscsPlate,
|
||||
IscsOperate,
|
||||
IscsBasOperate,
|
||||
IscsPsdOperate
|
||||
IscsPsdOperate,
|
||||
IscsCctvOperate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
95
src/views/system/iscsDraw/iscsCctvOperate/index.vue
Normal file
95
src/views/system/iscsDraw/iscsCctvOperate/index.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<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="vidicon">
|
||||
<vidicon
|
||||
ref="vidiconCloud"
|
||||
style="width:90%"
|
||||
@createDataModel="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="云台摄像机" name="vidiconCloud">
|
||||
<vidicon-cloud
|
||||
ref="vidicon"
|
||||
style="width:90%"
|
||||
@createDataModel="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import {deviceFactory} from '@/iscs/utils/parser';
|
||||
import Vidicon from './vidicon';
|
||||
import VidiconCloud from './vidiconCloud';
|
||||
|
||||
export default {
|
||||
name: 'IscsOperate',
|
||||
components: {
|
||||
Vidicon,
|
||||
VidiconCloud
|
||||
},
|
||||
mixins: [
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'vidicon',
|
||||
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() {
|
||||
},
|
||||
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);
|
||||
},
|
||||
handleTabClick() {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.map-control {
|
||||
float: right;
|
||||
width: 100%;
|
||||
}
|
||||
.heightClass{height:100%;}
|
||||
</style>
|
||||
@ -69,8 +69,7 @@ export default {
|
||||
_type: 'Vidicon',
|
||||
code: Uid,
|
||||
width: this.addModel.width,
|
||||
height: this.addModel.height,
|
||||
content: this.addModel.content,
|
||||
right: this.addModel.right,
|
||||
point: {
|
||||
x: this.addModel.x,
|
||||
y: this.addModel.y
|
||||
@ -100,13 +99,14 @@ export default {
|
||||
// });
|
||||
// }
|
||||
const model = {
|
||||
_type: 'Vidicon',
|
||||
code: this.addModel.code,
|
||||
width: this.addModel.width,
|
||||
right: this.addModel.right,
|
||||
point: {
|
||||
x: this.addModel.x,
|
||||
y: this.addModel.y
|
||||
},
|
||||
code: this.addModel.code,
|
||||
_type: 'Vidicon',
|
||||
width: this.addModel.width
|
||||
}
|
||||
};
|
||||
this.$emit('deleteDataModel', model);
|
||||
this.initPage();
|
||||
@ -18,22 +18,6 @@
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="固定摄像机" name="vidicon">
|
||||
<vidicon
|
||||
ref="vidiconCloud"
|
||||
style="width:90%"
|
||||
@createDataModel="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="云台摄像机" name="vidiconCloud">
|
||||
<vidicon-cloud
|
||||
ref="vidicon"
|
||||
style="width:90%"
|
||||
@createDataModel="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消火栓报警按钮" name="fhaButton">
|
||||
<fire-hydran-alarm-button
|
||||
ref="fhaButton"
|
||||
@ -74,8 +58,6 @@
|
||||
<script>
|
||||
import {deviceFactory} from '@/iscs/utils/parser';
|
||||
import ManualAlarmButton from './manualAlarmButton';
|
||||
import Vidicon from './vidicon';
|
||||
import VidiconCloud from './vidiconCloud';
|
||||
import FireHydranAlarmButton from './fireHydranAlarmButton';
|
||||
import GasFireControl from './gasFireControl';
|
||||
import SmokeDetector from './smokeDetector';
|
||||
@ -85,8 +67,6 @@ export default {
|
||||
name: 'IscsOperate',
|
||||
components: {
|
||||
ManualAlarmButton,
|
||||
Vidicon,
|
||||
VidiconCloud,
|
||||
FireHydranAlarmButton,
|
||||
GasFireControl,
|
||||
SmokeDetector,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user