This commit is contained in:
fan 2020-01-17 14:20:49 +08:00
commit 95e5c9f603
17 changed files with 966 additions and 35 deletions

View File

@ -1,6 +1,7 @@
import Group from 'zrender/src/container/Group'; import Group from 'zrender/src/container/Group';
import Sector from 'zrender/src/graphic/shape/Sector'; import Sector from 'zrender/src/graphic/shape/Sector';
import Polyline from 'zrender/src/graphic/shape/Polyline'; import Polyline from 'zrender/src/graphic/shape/Polyline';
// import createPathSvg from './components/pathsvg';
export default class VidiconCloud extends Group { export default class VidiconCloud extends Group {
constructor(device) { constructor(device) {
@ -13,7 +14,6 @@ export default class VidiconCloud extends Group {
this.create(); this.create();
} }
create() { create() {
console.log(this.model, Math.cos(45 * (Math.PI / 180)));
this.grouper = new Group({ this.grouper = new Group({
id: this.model.code, id: this.model.code,
position: [this.model.point.x, this.model.point.y] 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)' fill: 'rgba(0,0,0,0)'
} }
}); });
// this.path = createPathSvg(this.model);
this.Polyline = new Polyline({ this.Polyline = new Polyline({
zlevel: this.model.zlevel, zlevel: this.model.zlevel,
@ -56,6 +57,7 @@ export default class VidiconCloud extends Group {
this.grouper.add(this.semicircle); this.grouper.add(this.semicircle);
this.grouper.add(this.Polyline); this.grouper.add(this.Polyline);
// this.grouper.add(this.path);
this.add(this.grouper); this.add(this.grouper);
} }

View 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;
}

View File

@ -103,6 +103,12 @@ export default {
mode: 'psd', mode: 'psd',
id: '3', id: '3',
type: 'interface' type: 'interface'
},
{
name: 'cctv界面',
mode: 'cctv',
id: '4',
type: 'interface'
} }
] ]
} }

View File

@ -8,6 +8,7 @@
<iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" /> <iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" />
<iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @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-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>
</div> </div>
</transition> </transition>
@ -17,13 +18,15 @@ import IscsPlate from '@/views/iscsSystem/index';
import IscsOperate from './iscsOperate/index'; import IscsOperate from './iscsOperate/index';
import IscsBasOperate from './iscsBasOperate/index'; import IscsBasOperate from './iscsBasOperate/index';
import IscsPsdOperate from './iscsPsdOperate/index'; import IscsPsdOperate from './iscsPsdOperate/index';
import IscsCctvOperate from './iscsCctvOperate/index';
export default { export default {
name: 'IscsView', name: 'IscsView',
components: { components: {
IscsPlate, IscsPlate,
IscsOperate, IscsOperate,
IscsBasOperate, IscsBasOperate,
IscsPsdOperate IscsPsdOperate,
IscsCctvOperate
}, },
data() { data() {
return { return {

View File

@ -0,0 +1,128 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item v-if="isUpdate" label="编号" prop="code">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="form.width" :min="40" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'AirConditioner',
data() {
return {
isUpdate:false,
showDeleteButton: false,
buttonText: '立即创建',
form:{
code:'',
width: 40,
x: 10,
y: 10
},
rules: {
code: [
{ required: true, message:'请生成设备图形的编码', trigger: 'blur' }
],
width:[
{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }
],
x: [
{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
],
y: [
{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
]
}
};
},
computed:{
},
watch:{
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'AirConditioner' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.width = model.width;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {
},
methods:{
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const airConditionerModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'AirConditioner',
code: this.isUpdate ? this.form.code : this.generateCode(),
width: this.form.width,
color:'#00ff00'
};
this.$emit('createAirConditioner', airConditionerModel);
this.initPage();
} else {
return false;
}
});
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code:'',
width: 40,
x: 10,
y: 10
};
this.$refs.form.resetFields();
},
deleteDevice() {
const airConditionerModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'AirConditioner',
code: this.form.code,
width: this.form.width,
color:'#00ff00'
};
this.$emit('deleteDataModel', airConditionerModel );
this.initPage();
},
generateCode() {
const mydate = new Date();
return 'airConditioner_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>

View File

@ -31,7 +31,7 @@ export default {
buttonText: '立即创建', buttonText: '立即创建',
form:{ form:{
code:'', code:'',
width: 60, width: 40,
x: 10, x: 10,
y: 10 y: 10
}, },
@ -99,7 +99,7 @@ export default {
this.showDeleteButton = false; this.showDeleteButton = false;
this.form = { this.form = {
code:'', code:'',
width: 60, width: 40,
x: 10, x: 10,
y: 10 y: 10
}; };

View File

@ -0,0 +1,128 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item v-if="isUpdate" label="编号" prop="code">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="form.width" :min="40" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'FireDamper',
data() {
return {
isUpdate:false,
showDeleteButton: false,
buttonText: '立即创建',
form:{
code:'',
width: 40,
x: 10,
y: 10
},
rules: {
code: [
{ required: true, message:'请生成设备图形的编码', trigger: 'blur' }
],
width:[
{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }
],
x: [
{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
],
y: [
{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
]
}
};
},
computed:{
},
watch:{
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'FireDamper' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.width = model.width;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {
},
methods:{
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const fireDamperModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'FireDamper',
code: this.isUpdate ? this.form.code : this.generateCode(),
width: this.form.width,
color:'#00ff00'
};
this.$emit('createFireDamper', fireDamperModel);
this.initPage();
} else {
return false;
}
});
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code:'',
width: 40,
x: 10,
y: 10
};
this.$refs.form.resetFields();
},
deleteDevice() {
const fireDamperModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'FireDamper',
code: this.form.code,
width: this.form.width,
color:'#00ff00'
};
this.$emit('deleteDataModel', fireDamperModel );
this.initPage();
},
generateCode() {
const mydate = new Date();
return 'fireDamper_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>

View File

@ -43,7 +43,54 @@
@deleteDataModel="deleteDataModel" @deleteDataModel="deleteDataModel"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="空调机" name="airConditioner">
<air-conditioner
ref="airConditioner"
style="width:90%"
@createAirConditioner="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="轨道排风机" name="orbitalVentilator">
<orbital-ventilator
ref="orbitalVentilator"
style="width:90%"
@createOrbitalVentilator="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="射流风机" name="jetFan">
<jet-fan
ref="jetFan"
style="width:90%"
@createJetFan="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="隧道风机" name="tunnelFan">
<tunnel-fan
ref="tunnelFan"
style="width:90%"
@createTunnelFan="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="防火阀" name="fireDamper">
<fire-damper
ref="fireDamper"
style="width:90%"
@createFireDamper="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="防烟防火阀" name="smookProofFd">
<smook-proof-fd
ref="smookProofFd"
style="width:90%"
@createSmookProofFd="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
</div> </div>
@ -55,13 +102,26 @@ import FrozenPump from './frozenPump';
import Chiller from './chiller'; import Chiller from './chiller';
import CoolTower from './coolTower'; import CoolTower from './coolTower';
import Ventilator from './ventilator'; import Ventilator from './ventilator';
import AirConditioner from './airConditioner';
import OrbitalVentilator from './orbitalVentilator';
import JetFan from './jetFan';
import TunnelFan from './tunnelFan';
import FireDamper from './fireDamper';
import SmookProofFd from './smookProofFd';
export default { export default {
name: 'IscsOperate', name: 'IscsOperate',
components: { components: {
FrozenPump, FrozenPump,
Chiller, Chiller,
CoolTower, CoolTower,
Ventilator Ventilator,
AirConditioner,
OrbitalVentilator,
JetFan,
TunnelFan,
FireDamper,
SmookProofFd
}, },
mixins: [ mixins: [
], ],

View File

@ -0,0 +1,128 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item v-if="isUpdate" label="编号" prop="code">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="form.width" :min="40" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'JetFan',
data() {
return {
isUpdate:false,
showDeleteButton: false,
buttonText: '立即创建',
form:{
code:'',
width: 40,
x: 10,
y: 10
},
rules: {
code: [
{ required: true, message:'请生成设备图形的编码', trigger: 'blur' }
],
width:[
{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }
],
x: [
{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
],
y: [
{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
]
}
};
},
computed:{
},
watch:{
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'JetFan' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.width = model.width;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {
},
methods:{
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const jetFanModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'JetFan',
code: this.isUpdate ? this.form.code : this.generateCode(),
width: this.form.width,
color:'#00ff00'
};
this.$emit('createJetFan', jetFanModel);
this.initPage();
} else {
return false;
}
});
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code:'',
width: 40,
x: 10,
y: 10
};
this.$refs.form.resetFields();
},
deleteDevice() {
const jetFanModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'JetFan',
code: this.form.code,
width: this.form.width,
color:'#00ff00'
};
this.$emit('deleteDataModel', jetFanModel );
this.initPage();
},
generateCode() {
const mydate = new Date();
return 'jetFan_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>

View File

@ -0,0 +1,128 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item v-if="isUpdate" label="编号" prop="code">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="form.width" :min="40" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'OrbitalVentilator',
data() {
return {
isUpdate:false,
showDeleteButton: false,
buttonText: '立即创建',
form:{
code:'',
width: 40,
x: 10,
y: 10
},
rules: {
code: [
{ required: true, message:'请生成设备图形的编码', trigger: 'blur' }
],
width:[
{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }
],
x: [
{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
],
y: [
{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
]
}
};
},
computed:{
},
watch:{
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'OrbitalVentilator' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.width = model.width;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {
},
methods:{
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const orbitalVentilatorModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'OrbitalVentilator',
code: this.isUpdate ? this.form.code : this.generateCode(),
width: this.form.width,
color:'#00ff00'
};
this.$emit('createOrbitalVentilator', orbitalVentilatorModel);
this.initPage();
} else {
return false;
}
});
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code:'',
width: 40,
x: 10,
y: 10
};
this.$refs.form.resetFields();
},
deleteDevice() {
const orbitalVentilatorModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'OrbitalVentilator',
code: this.form.code,
width: this.form.width,
color:'#00ff00'
};
this.$emit('deleteDataModel', orbitalVentilatorModel );
this.initPage();
},
generateCode() {
const mydate = new Date();
return 'orbitalVentilator_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>

View File

@ -0,0 +1,128 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item v-if="isUpdate" label="编号" prop="code">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="form.width" :min="40" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'SmookProofFd',
data() {
return {
isUpdate:false,
showDeleteButton: false,
buttonText: '立即创建',
form:{
code:'',
width: 40,
x: 10,
y: 10
},
rules: {
code: [
{ required: true, message:'请生成设备图形的编码', trigger: 'blur' }
],
width:[
{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }
],
x: [
{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
],
y: [
{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
]
}
};
},
computed:{
},
watch:{
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'SmookProofFd' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.width = model.width;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {
},
methods:{
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const smookProofFdModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'SmookProofFd',
code: this.isUpdate ? this.form.code : this.generateCode(),
width: this.form.width,
color:'#00ff00'
};
this.$emit('createSmookProofFd', smookProofFdModel);
this.initPage();
} else {
return false;
}
});
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code:'',
width: 40,
x: 10,
y: 10
};
this.$refs.form.resetFields();
},
deleteDevice() {
const smookProofFdModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'SmookProofFd',
code: this.form.code,
width: this.form.width,
color:'#00ff00'
};
this.$emit('deleteDataModel', smookProofFdModel );
this.initPage();
},
generateCode() {
const mydate = new Date();
return 'smookProofFd_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>

View File

@ -0,0 +1,128 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item v-if="isUpdate" label="编号" prop="code">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="form.width" :min="40" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'TunnelFan',
data() {
return {
isUpdate:false,
showDeleteButton: false,
buttonText: '立即创建',
form:{
code:'',
width: 40,
x: 10,
y: 10
},
rules: {
code: [
{ required: true, message:'请生成设备图形的编码', trigger: 'blur' }
],
width:[
{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }
],
x: [
{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
],
y: [
{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
]
}
};
},
computed:{
},
watch:{
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'TunnelFan' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.width = model.width;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {
},
methods:{
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const tunnelFanModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'TunnelFan',
code: this.isUpdate ? this.form.code : this.generateCode(),
width: this.form.width,
color:'#00ff00'
};
this.$emit('createTunnelFan', tunnelFanModel);
this.initPage();
} else {
return false;
}
});
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code:'',
width: 40,
x: 10,
y: 10
};
this.$refs.form.resetFields();
},
deleteDevice() {
const tunnelFanModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'TunnelFan',
code: this.form.code,
width: this.form.width,
color:'#00ff00'
};
this.$emit('deleteDataModel', tunnelFanModel );
this.initPage();
},
generateCode() {
const mydate = new Date();
return 'tunnelFan_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>

View File

@ -5,7 +5,7 @@
<el-input v-model="form.code" :disabled="true" /> <el-input v-model="form.code" :disabled="true" />
</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" :min="60" /> <el-input-number v-model="form.width" :min="40" />
</el-form-item> </el-form-item>
<el-form-item label="X轴坐标" prop="x"> <el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" /> <el-input-number v-model="form.x" controls-position="right" :min="1" />
@ -31,7 +31,7 @@ export default {
buttonText: '立即创建', buttonText: '立即创建',
form:{ form:{
code:'', code:'',
width: 60, width: 40,
x: 10, x: 10,
y: 10 y: 10
}, },
@ -99,7 +99,7 @@ export default {
this.showDeleteButton = false; this.showDeleteButton = false;
this.form = { this.form = {
code:'', code:'',
width: 60, width: 40,
x: 10, x: 10,
y: 10 y: 10
}; };

View 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>

View File

@ -69,8 +69,7 @@ export default {
_type: 'Vidicon', _type: 'Vidicon',
code: Uid, code: Uid,
width: this.addModel.width, width: this.addModel.width,
height: this.addModel.height, right: this.addModel.right,
content: this.addModel.content,
point: { point: {
x: this.addModel.x, x: this.addModel.x,
y: this.addModel.y y: this.addModel.y
@ -100,13 +99,14 @@ export default {
// }); // });
// } // }
const model = { const model = {
_type: 'Vidicon',
code: this.addModel.code,
width: this.addModel.width,
right: this.addModel.right,
point: { point: {
x: this.addModel.x, x: this.addModel.x,
y: this.addModel.y y: this.addModel.y
}, }
code: this.addModel.code,
_type: 'Vidicon',
width: this.addModel.width
}; };
this.$emit('deleteDataModel', model); this.$emit('deleteDataModel', model);
this.initPage(); this.initPage();

View File

@ -18,22 +18,6 @@
@deleteDataModel="deleteDataModel" @deleteDataModel="deleteDataModel"
/> />
</el-tab-pane> </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"> <el-tab-pane label="消火栓报警按钮" name="fhaButton">
<fire-hydran-alarm-button <fire-hydran-alarm-button
ref="fhaButton" ref="fhaButton"
@ -74,8 +58,6 @@
<script> <script>
import {deviceFactory} from '@/iscs/utils/parser'; import {deviceFactory} from '@/iscs/utils/parser';
import ManualAlarmButton from './manualAlarmButton'; import ManualAlarmButton from './manualAlarmButton';
import Vidicon from './vidicon';
import VidiconCloud from './vidiconCloud';
import FireHydranAlarmButton from './fireHydranAlarmButton'; import FireHydranAlarmButton from './fireHydranAlarmButton';
import GasFireControl from './gasFireControl'; import GasFireControl from './gasFireControl';
import SmokeDetector from './smokeDetector'; import SmokeDetector from './smokeDetector';
@ -85,8 +67,6 @@ export default {
name: 'IscsOperate', name: 'IscsOperate',
components: { components: {
ManualAlarmButton, ManualAlarmButton,
Vidicon,
VidiconCloud,
FireHydranAlarmButton, FireHydranAlarmButton,
GasFireControl, GasFireControl,
SmokeDetector, SmokeDetector,