joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

ibp绘图部分设备添加操作表示关联设备

Browse Source
This commit is contained in:
fan 2019-12-09 11:00:25 +08:00
parent d8b0577c77
commit 28e9abe13a
4 changed files with 359 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/scripts/ConstDic.js
View File

@ -2200,6 +2200,9 @@ export const IbpOperation = {
Ban_Up_Open_Screen_Door: {operate: '', event: 'BanUpOpenScreenDoor'}, Ban_Up_Open_Screen_Door: {operate: '', event: 'BanUpOpenScreenDoor'},
Ban_Down_Open_Screen_Door: {operate: '', event: 'BanDownOpenScreenDoor'} Ban_Down_Open_Screen_Door: {operate: '', event: 'BanDownOpenScreenDoor'}
}; };
/**
* ibp状态显示条件
*/
export const IbpShowCondition = { export const IbpShowCondition = {
Show_Detain: {statusKey: 'holdStatus', statusValue:['02', '03', '04'], defaultStatus: 'close'}, Show_Detain: {statusKey: 'holdStatus', statusValue:['02', '03', '04'], defaultStatus: 'close'},
Show_Open_Screen_Door: {statusKey: 'screenDoorOpenStatus', statusValue:['02'], defaultStatus: 'close'}, Show_Open_Screen_Door: {statusKey: 'screenDoorOpenStatus', statusValue:['02'], defaultStatus: 'close'},

288
src/views/system/ibpDraw/ibpOperate/ibpButton.vue
View File

@ -1,143 +1,165 @@
<template> <template>
<div> <div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px"> <el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item :label="this.$t('ibp.buttonCode')" prop="code"> <el-form-item :label="this.$t('ibp.buttonCode')" prop="code">
<el-input :disabled="true" v-model="form.code" > <el-input v-model="form.code" :disabled="true">
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button> <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.buttonColor')" prop="buttonColor"> <el-form-item :label="this.$t('ibp.buttonColor')" prop="buttonColor">
<el-select v-model="form.buttonColor" :placeholder="this.$t('ibp.selectTheButtonColor')"> <el-select v-model="form.buttonColor" :placeholder="this.$t('ibp.selectTheButtonColor')">
<el-option :label="this.$t('ibp.redButton')" value="red"></el-option> <el-option :label="this.$t('ibp.redButton')" value="red" />
<el-option :label="this.$t('ibp.yellowButton')" value="yellow"></el-option> <el-option :label="this.$t('ibp.yellowButton')" value="yellow" />
<el-option :label="this.$t('ibp.greenButton')" value="green"></el-option> <el-option :label="this.$t('ibp.greenButton')" value="green" />
<el-option :label="this.$t('ibp.blueButton')" value="blue"></el-option> <el-option :label="this.$t('ibp.blueButton')" value="blue" />
<el-option :label="this.$t('ibp.grayButton')" value="gray"></el-option> <el-option :label="this.$t('ibp.grayButton')" value="gray" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.buttonWidth')" prop="buttonWidth"> <el-form-item :label="this.$t('ibp.buttonWidth')" prop="buttonWidth">
<el-input-number v-model="form.buttonWidth" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.buttonWidth" controls-position="right" :min="1" />
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.xCoordinate')"> <el-form-item :label="this.$t('ibp.xCoordinate')">
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.yCoordinate')"> <el-form-item :label="this.$t('ibp.yCoordinate')">
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="操作">
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button> <el-select v-model="form.mean" placeholder="请选择">
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button> <el-option
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button> v-for="item in operateMeanList"
</el-form-item> :key="item.value"
</el-form> :label="item.label"
</div> :value="item.value"
/>
</el-select>
</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> </template>
<script> <script>
export default { export default {
name: 'ButtonDraft', name: 'ButtonDraft',
components: { components: {
}, },
data() { data() {
return { return {
isUpdate: false, isUpdate: false,
buttonText: this.$t('ibp.createNow'), buttonText: this.$t('ibp.createNow'),
showDeleteButton: false, showDeleteButton: false,
form: { operateMeanList: [
code: '', { label: '上行扣车', value: 'Up_Hold_Train' },
buttonColor: 'red', { label: '下行扣车', value: 'Down_Hold_Train' },
buttonWidth: 25, { label: '上行取消扣车', value: 'Up_Cancel_Hold_Train' },
x: 10, { label: '下行取消扣车', value: 'Down_Cancel_Hold_Train' },
y: 10 { label: '上行打开屏蔽门', value: 'Up_Open_Screen_Door' },
}, { label: '下行打开屏蔽门', value: 'Down_Open_Screen_Door' }
rules: { ],
code: [ form: {
{ required: true, message: this.$t('ibp.enterTheButtonCode'), trigger: 'blur' }, code: '',
], buttonColor: 'red',
buttonColor: [ buttonWidth: 25,
{ required: true, message: this.$t('ibp.selectTheButtonColor'), trigger: 'change'} x: 10,
], y: 10
buttonWidth: [ },
{ required: true, message: this.$t('ibp.enterTheButtonWidth'), trigger: 'blur' }, rules: {
] code: [
} { required: true, message: this.$t('ibp.enterTheButtonCode'), trigger: 'blur' }
}; ],
}, buttonColor: [
computed: { { required: true, message: this.$t('ibp.selectTheButtonColor'), trigger: 'change'}
],
}, buttonWidth: [
watch: { { required: true, message: this.$t('ibp.enterTheButtonWidth'), trigger: 'blur' }
'$store.state.ibp.rightClickCount': function (val) { ]
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'SquareButton' ){
this.buttonText = this.$t('global.modify');
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.buttonColor = model.color;
this.form.buttonWidth = model.width;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
} }
}, };
mounted() { },
}, computed: {
methods: {
onSubmit(form) { },
this.$refs[form].validate((valid) => { watch: {
if (valid) { '$store.state.ibp.rightClickCount': function (val) {
const buttonModel = { const model = this.$store.getters['ibp/updateDeviceData'];
point: { if (model._type === 'SquareButton' ) {
x: this.form.x, this.buttonText = this.$t('global.modify');
y: this.form.y this.showDeleteButton = true;
}, this.isUpdate = true;
_type: 'SquareButton', this.form.code = model.code;
code: this.form.code, this.form.buttonColor = model.color;
color: this.form.buttonColor, this.form.buttonWidth = model.width;
status: 'off', this.form.x = model.point.x;
width: this.form.buttonWidth, this.form.y = model.point.y;
}; this.form.mean = model.mean;
this.$emit('createButton', buttonModel);
this.initPage();
}else {
return false;
}
});
},
deleteDevice() {
const buttonModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'SquareButton',
code: this.form.code,
color: this.form.buttonColor,
status: 'off',
width: this.form.buttonWidth,
};
this.$emit('deleteDataModel',buttonModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = this.$t('ibp.createNow');
this.showDeleteButton = false;
this.form = {
code: '',
buttonColor: 'red',
buttonWidth: 25,
x: 10,
y: 10
};
},
generateCode() {
const mydate = new Date();
this.form.code = "sButton_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
} }
} }
}; },
mounted() {
},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const buttonModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'SquareButton',
code: this.form.code,
color: this.form.buttonColor,
status: 'off',
width: this.form.buttonWidth,
mean: this.from.mean
};
this.$emit('createButton', buttonModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const buttonModel = {
point: {
x: this.form.x,
y: this.form.y
},
_type: 'SquareButton',
code: this.form.code,
color: this.form.buttonColor,
status: 'off',
width: this.form.buttonWidth,
mean: this.form.mean
};
this.$emit('deleteDataModel', buttonModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = this.$t('ibp.createNow');
this.showDeleteButton = false;
this.form = {
code: '',
buttonColor: 'red',
buttonWidth: 25,
x: 10,
y: 10,
mean: ''
};
},
generateCode() {
const mydate = new Date();
this.form.code = 'sButton_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>

322
src/views/system/ibpDraw/ibpOperate/ibpKey.vue
View File

@ -1,163 +1,181 @@
<template> <template>
<div> <div>
<el-form ref="form" :rules="rules" :model="form" label-width="120px"> <el-form ref="form" :rules="rules" :model="form" label-width="120px">
<el-form-item :label="this.$t('ibp.keyCode')" prop="code"> <el-form-item :label="this.$t('ibp.keyCode')" prop="code">
<el-input :disabled="true" v-model="form.code"> <el-input v-model="form.code" :disabled="true">
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button> <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.keyWidth')" prop="keyWidth"> <el-form-item :label="this.$t('ibp.keyWidth')" prop="keyWidth">
<el-input-number v-model="form.keyWidth" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.keyWidth" controls-position="right" :min="1" />
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.keyDirection')" prop="status"> <el-form-item :label="this.$t('ibp.keyDirection')" prop="status">
<el-select v-model="form.status" :placeholder="this.$t('rules.selectTheKeyDirection')"> <el-select v-model="form.status" :placeholder="this.$t('rules.selectTheKeyDirection')">
<el-option :label="this.$t('ibp.level')" value="on"></el-option> <el-option :label="this.$t('ibp.level')" value="on" />
<el-option :label="this.$t('ibp.vertical')" value="off"></el-option> <el-option :label="this.$t('ibp.vertical')" value="off" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.xCoordinate')"> <el-form-item :label="this.$t('ibp.xCoordinate')">
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.yCoordinate')"> <el-form-item :label="this.$t('ibp.yCoordinate')">
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.upperText')" prop="topText"> <el-form-item :label="this.$t('ibp.upperText')" prop="topText">
<el-input v-model="form.topText"></el-input> <el-input v-model="form.topText" />
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.lowerText')" prop="bottomText"> <el-form-item :label="this.$t('ibp.lowerText')" prop="bottomText">
<el-input v-model="form.bottomText"></el-input> <el-input v-model="form.bottomText" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="操作">
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button> <el-select v-model="form.mean" placeholder="请选择">
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button> <el-option
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button> v-for="item in operateMeanList"
</el-form-item> :key="item.value"
</el-form> :label="item.label"
</div> :value="item.value"
/>
</el-select>
</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> </template>
<script> <script>
export default { export default {
name: 'KeyDraft', name: 'KeyDraft',
components: { components: {
}, },
data() { data() {
return { return {
isUpdate: false, isUpdate: false,
buttonText: this.$t('ibp.createNow'), buttonText: this.$t('ibp.createNow'),
showDeleteButton: false, showDeleteButton: false,
form: { form: {
code: '', code: '',
keyWidth: '', keyWidth: '',
status:'on', status:'on',
x: 10, x: 10,
y: 10, y: 10,
topText:'', topText:'',
bottomText:'' bottomText:''
}, },
rules: { operateMeanList: [
code: [ { label: '上行屏蔽门操作开关', value: 'Ban_Up_Open_Screen_Door' },
{ required: true, message: this.$t('rules.enterTheKeyCode'), trigger: 'blur' }, { label: '下行屏蔽门操作开关', value: 'Ban_Down_Open_Screen_Door' }
], ],
keyWidth: [ rules: {
{ required: true, message: this.$t('rules.enterTheKeyWidth'), trigger: 'blur' }, code: [
], { required: true, message: this.$t('rules.enterTheKeyCode'), trigger: 'blur' }
status: [ ],
{ required: true, message: this.$t('rules.selectTheKeyDirection'), trigger: 'change' }, keyWidth: [
], { required: true, message: this.$t('rules.enterTheKeyWidth'), trigger: 'blur' }
topText: [ ],
{ required: true, message: this.$t('rules.enterTheUpperText'), trigger: 'blur' }, status: [
], { required: true, message: this.$t('rules.selectTheKeyDirection'), trigger: 'change' }
bottomText: [ ],
{ required: true, message: this.$t('rules.enterTheLowerText'), trigger: 'blur' }, topText: [
], { required: true, message: this.$t('rules.enterTheUpperText'), trigger: 'blur' }
} ],
}; bottomText: [
}, { required: true, message: this.$t('rules.enterTheLowerText'), trigger: 'blur' }
computed: { ]
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'Key' ){
this.buttonText = this.$t('global.modify');
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.keyWidth = model.width;
this.form.status = model.status;
this.form.x = model.point.x;
this.form.y = model.point.y;
this.form.topText = model.topText;
this.form.bottomText = model.bottomText;
}
} }
}, };
mounted() { },
}, computed: {
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if(valid) {
const keyModel = {
point: {
x: this.form.x,
y: this.form.y
},
draggable: true,
_type: 'Key',
code: this.form.code,
width: this.form.keyWidth,
status:this.form.status,
topText:this.form.topText,
bottomText:this.form.bottomText,
};
this.$emit('createKey', keyModel);
this.initPage();
}else {
return false;
}
});
}, },
deleteDevice() { watch: {
const keyModel = { '$store.state.ibp.rightClickCount': function (val) {
point: { const model = this.$store.getters['ibp/updateDeviceData'];
x: this.form.x, if (model._type === 'Key' ) {
y: this.form.y this.buttonText = this.$t('global.modify');
}, this.showDeleteButton = true;
draggable: true, this.isUpdate = true;
_type: 'Key', this.form.code = model.code;
code: this.form.code, this.form.keyWidth = model.width;
width: this.form .keyWidth, this.form.status = model.status;
status:this.form.status, this.form.x = model.point.x;
topText:this.form.topText, this.form.y = model.point.y;
bottomText:this.form.bottomText, this.form.topText = model.topText;
}; this.form.bottomText = model.bottomText;
this.$emit('deleteDataModel',keyModel); this.form.mean = model.mean;
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = this.$t('ibp.createNow');
this.showDeleteButton = false;
this.form = {
code: '',
keyWidth: '',
status:'on',
x: 10,
y: 10,
topText:'',
bottomText:'',
};
},
generateCode() {
const mydate = new Date();
this.form.code = "key_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
} }
} }
}; },
mounted() {
},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const keyModel = {
point: {
x: this.form.x,
y: this.form.y
},
draggable: true,
_type: 'Key',
code: this.form.code,
width: this.form.keyWidth,
status:this.form.status,
topText:this.form.topText,
bottomText:this.form.bottomText,
mean:this.form.mean
};
this.$emit('createKey', keyModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const keyModel = {
point: {
x: this.form.x,
y: this.form.y
},
draggable: true,
_type: 'Key',
code: this.form.code,
width: this.form.keyWidth,
status:this.form.status,
topText:this.form.topText,
bottomText:this.form.bottomText,
mean:this.form.mean
};
this.$emit('deleteDataModel', keyModel);
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = this.$t('ibp.createNow');
this.showDeleteButton = false;
this.form = {
code: '',
keyWidth: '',
status:'on',
x: 10,
y: 10,
topText:'',
bottomText:'',
mean:''
};
},
generateCode() {
const mydate = new Date();
this.form.code = 'key_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>

34
src/views/system/ibpDraw/ibpOperate/ibpLamp.vue
View File

@ -14,7 +14,20 @@
</el-form-item> </el-form-item>
<el-form-item :label="this.$t('ibp.yCoordinate')"> <el-form-item :label="this.$t('ibp.yCoordinate')">
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="表示状态">
<el-select v-model="form.mean" placeholder="请选择">
<el-option
v-for="item in showMeanList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="关联设备">
<el-input v-model="form.linkDevice"></el-input>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button> <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button> <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
@ -34,11 +47,18 @@
isUpdate: false, isUpdate: false,
buttonText: this.$t('ibp.createNow'), buttonText: this.$t('ibp.createNow'),
showDeleteButton: false, showDeleteButton: false,
showMeanList: [
{label: '扣车', value: 'Show_Detain'},
{label: '屏蔽门打开', value: 'Show_Open_Screen_Door'},
{label: '屏蔽门紧闭', value: 'Show_Close_Screen_Door'}
],
form: { form: {
code: '', code: '',
r: '', r: '',
x: 10, x: 10,
y: 10 y: 10,
mean: '',
linkDevice: ''
}, },
rules: { rules: {
code: [ code: [
@ -64,6 +84,8 @@
this.form.r = model.r; this.form.r = model.r;
this.form.x = model.point.x; this.form.x = model.point.x;
this.form.y = model.point.y; this.form.y = model.point.y;
this.form.mean = model.mean;
this.form.linkDevice = model.linkDevice;
} }
} }
}, },
@ -81,6 +103,8 @@
_type: 'CircularLamp', _type: 'CircularLamp',
code: this.form.code, code: this.form.code,
r: this.form.r, r: this.form.r,
mean: this.form.mean,
linkDevice: this.form.linkDevice,
fillColor: '#332C22' fillColor: '#332C22'
}; };
this.$emit('createLamp', lampModel); this.$emit('createLamp', lampModel);
@ -100,6 +124,8 @@
_type: 'CircularLamp', _type: 'CircularLamp',
code: this.form.code, code: this.form.code,
r: this.form.r, r: this.form.r,
mean: this.form.mean,
linkDevice: this.form.linkDevice,
fillColor: '#332C22' fillColor: '#332C22'
}; };
this.$emit('deleteDataModel',lampModel ); this.$emit('deleteDataModel',lampModel );
@ -113,7 +139,9 @@
code: '', code: '',
r: '', r: '',
x: 10, x: 10,
y: 10 y: 10,
mean: '',
linkDevice: '',
}; };
}, },
generateCode() { generateCode() {