This commit is contained in:
sunzhenyu 2019-09-19 09:26:51 +08:00
commit c4e8bee27a
7 changed files with 392 additions and 243 deletions

View File

@ -1,41 +0,0 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
import Keyhole from '@/assets/ibp_images/keyhole.png';
export default class RotatingButton 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.rotatingButton = new Image({
zlevel: this.zlevel,
z: this.z,
draggable: false,
style: {
image: Keyhole,
x: 0,
y: 0,
width: model.width,
height: model.width/361*336
}
});
this.grouper.add(this.rotatingButton);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x+=dx;
this.model.point.y+=dy;
}
}

View File

@ -1,13 +0,0 @@
export const requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { callback.timter = window.setTimeout(callback, 1000 / 60); };
export const cancelRequestAnimFrame = window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
function (callback) { window.clearTimeout(callback); };

View File

@ -0,0 +1,156 @@
<template>
<div class="schema" :style="{top: offset+'px'}">
<el-select v-if="isScript" v-model="swch" size="small" :placeholder="$t('display.schema.selectProduct')" @change="switchMode">
<el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
<el-button-group>
<el-button v-if="isDemon" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">{{$t('display.schema.loadScript')}}</el-button>
<el-button v-if="notScript && runing" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{$t('display.schema.previewRunDiagram')}}</el-button>
<el-button v-if="!runing && !isPlan && notScript" size="small" :disabled="viewDisabled" type="warning" @click="loadRunPlan">{{$t('display.schema.loadRunDiagram')}}</el-button>
<el-button v-if="mode==OperateMode.FAULT" size="small" type="danger" @click="setFault">{{$t('display.schema.faultSetting')}}</el-button>
</el-button-group>
<el-radio-group v-if="!isPlan" v-model="mode" size="small" @change="changeOperateMode(mode)">
<el-radio-button class="mode" :label="OperateMode.NORMAL">{{$t('display.schema.normalOperation')}}</el-radio-button>
<el-radio-button class="mode" :label="OperateMode.FAULT">{{$t('display.schema.faultOperation')}}</el-radio-button>
</el-radio-group>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { OperateMode } from '@/scripts/ConstDic';
import { getStationListBySkinCode, queryRunPlan } from '@/api/runplan';
import { getEveryDayRunPlanData } from '@/api/simulation';
export default {
name: 'MenuSchema',
props: {
group: {
type: String,
required: true
},
offset: {
type: Number,
required: true
}
},
data() {
return {
mode: OperateMode.NORMAL,
OperateMode: OperateMode,
viewDisabled: true,
runing: false,
swch: '02',
swchList: [
{ value: '01', name: '现地' },
{ value: '02', name: '行调' }
]
};
},
computed: {
...mapGetters('runPlan', [
'stations'
]),
notScript() {
return this.$route.params.mode !== 'script';
},
isPlan() {
return this.$route.params.mode === 'plan';
},
isScript() {
// return this.$route.params.mode === 'script';
return false;
},
isDemon() {
return this.$route.params.mode === 'demon';
}
},
watch: {
'$store.state.training.started': function (val) {
this.setRuning(val);
},
'$store.state.training.switchcount': async function () {
if (this.group) {
const started = this.$store.state.training.started;
if (started) {
await this.loadRunData(this.$route.query);
}
}
}
},
async mounted() {
await this.loadRunData(this.$route.query);
},
methods: {
loadRunData(opt) {
this.$store.dispatch('runPlan/clear').then(() => {
if (opt && opt.skinCode) {
this.viewDisabled = true;
getStationListBySkinCode(opt.skinCode).then(response => {
this.$store.dispatch('runPlan/setStations', response.data).then(() => {
if (this.$route.params.mode == 'plan') {
//
queryRunPlan(this.$route.query.planId).then(resp => {
this.$store.dispatch('runPlan/setPlanData', resp.data);
this.viewDisabled = false;
}).catch(() => {
this.$store.dispatch('runPlan/setPlanData', []);
this.$messageBox(this.$t('display.schema.getRunDiagramFail'));
});
} else {
getEveryDayRunPlanData(this.group).then(resp => {
this.$store.dispatch('runPlan/setPlanData', resp.data);
this.viewDisabled = false;
}).catch(error => {
this.$store.dispatch('runPlan/setPlanData', []);
if (error.code == 30001) {
this.$messageBox(this.$t('display.schema.todayRunDiagramNoLoad'));
} else {
this.$messageBox(this.$t('display.schema.getRunDiagramFail'));
}
});
}
});
}).catch(() => {
this.$messageBox(this.$t('display.schema.getStationListFail'));
});
}
});
},
changeOperateMode(handle) {
this.$store.dispatch('training/changeOperateMode', { mode: handle });
},
setRuning(run) {
this.runing = run;
},
setFault() {
this.$emit('faultChooseShow');
},
loadRunPlan() {
this.$emit('runPlanLoadShow');
},
viewRunPlan() {
this.$emit('runPlanViewShow');
},
viewRunQuest() {
this.$emit('runQuestLoadShow');
},
switchMode(swch) {
this.$emit('switchMode', swch);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.schema {
z-index: 9;
display: inline;
position: absolute;
right: 15px;
}
/deep/ .el-button+.el-button {
margin-left: 0px;
}
</style>

View File

@ -0,0 +1,152 @@
<template>
<div>
<div class="display-card" :style="{top: offset+'px'}">
<el-row>
<span v-if="countTime" class="display-score">{{$t('display.screen.trialTime')}} {{ countTime }}</span>
</el-row>
</div>
</div>
</template>
<script>
import { getGoodsTryUse } from '@/api/management/goods';
import { PermissionType } from '@/scripts/ConstDic';
import { exitFullscreen } from '@/utils/screen';
import { getCountTime } from '@/utils/index';
import { runDiagramIsStart, runDiagramGetTime, runDiagramStart } from '@/api/simulation';
import { timeFormat } from '@/utils/date';
export default {
name: 'MenuScreen',
props: {
group: {
type: String,
required: true
},
offset: {
type: Number,
required: true
}
},
data() {
return {
tryTime: 0, //
timeNow: 0, //
time: null, //
countTime: 0, //
remainingTime: 0,
goodsId: this.$route.query.goodsId,
try: this.$route.query.try, //
training: {
id: '',
name: '',
remarks: ''
}
};
},
watch: {
'$store.state.training.subscribeCount': function () {
this.group && this.initLoadPage();
}
},
beforeDestroy() {
if (this.time) {
this.setTryTime();
clearTimeout(this.time);
}
},
methods: {
async initLoadPage() {
try {
if (this.try != '0') {
const data = {
permissionType: PermissionType.SCREEN
};
const resr = await getGoodsTryUse(data);
if (resr && resr.code == 200) {
this.remainingTime = resr.data.tryTime;
this.timeNow = Date.parse(new Date()) / 1000 + this.remainingTime;
if (this.try) {
this.time = setInterval(() => {
this.tryTime += 1;
this.countTime = getCountTime(this.timeNow);
if (this.countTime == -1) {
this.back();
}
}, 1000);
}
} else {
this.$messageBox(this.$t('display.screen.getTimeFail'));
}
}
const initTime = this.$route.query.initTime;
const retp = await runDiagramIsStart(this.group);
if (retp && !retp.data) {
await runDiagramStart({ initTime: initTime }, this.group);
}
await this.$store.dispatch('training/simulationStart');
await this.loadSystemTime();
} catch (error) {
console.log(error);
}
},
async loadSystemTime() {
const rest = await runDiagramGetTime(this.group);
if (rest && rest.code == 200) {
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${timeFormat(rest.data)}`));
}
},
setTryTime() {
if (this.try) {
this.$emit('tryTime', { time: this.tryTime, goodsId: this.goodsId });
}
},
back() {
this.$store.dispatch('training/over').then(() => {
Notification.closeAll();
history.go(-1);
exitFullscreen();
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.display-card {
z-index: 9;
display: inline;
position: absolute;
top: 17px;
left: 30px;
}
.display-card .el-row {
line-height: 32px !important;
}
.display-score {
background-color: black;
display: -moz-inline-box;
display: inline-block;
text-align: left;
height: 32px;
line-height: 24px;
border-radius: 4px;
padding-left: 2px;
margin-left: 10px;
font-family: "Microsoft" !important;
font-size: 18px !important;
color: #fff;
}
.display-draft {
position: absolute;
float: right;
right: 15px;
bottom: 15px;
}
</style>

View File

@ -1,128 +0,0 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
<el-form-item label="钥匙孔编号" prop="code">
<el-input :disabled="true" v-model="form.code" >
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
</el-input>
</el-form-item>
<el-form-item label="钥匙孔宽度" prop="rotatingButtonWidth">
<el-input-number v-model="form.rotatingButtonWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="X轴坐标">
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="Y轴坐标">
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'RotatingButtonDraft',
components: {
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
form: {
code: '',
rotatingButtonWidth: '',
x: 10,
y: 10
},
rules: {
code: [
{ required: true, message: '请输入钥匙孔编号', trigger: 'blur' },
],
rotatingButtonWidth: [
{ required: true, message: '请输入钥匙孔宽度', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'RotatingButton' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.rotatingButtonWidth = 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 rotatingButtonModel = {
point: {
x: this.form.x,
y: this.form.y
},
draggable: true,
_type: 'RotatingButton',
code: this.form.code,
width: this.form .rotatingButtonWidth,
};
this.$emit('createRotatingButton', rotatingButtonModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const rotatingButtonModel = {
point: {
x: this.form.x,
y: this.form.y
},
draggable: true,
_type: 'RotatingButton',
code: this.form.code,
width: this.form .rotatingButtonWidth,
};
this.$emit('deleteDataModel',rotatingButtonModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
rotatingButtonWidth: '',
x: 10,
y: 10
};
},
generateCode() {
const mydate = new Date();
this.form.code = "rButton_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

View File

@ -1,61 +0,0 @@
<template>
<div id="mapMain" class="ibpDraft">
<div class="map-list" :style="{width: widthLeft+'px'}">
<span>车站列表</span>
</div>
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
<transition>
<router-view />
</transition>
</div>
</template>
<script>
import localStore from 'storejs';
import DrapLeft from '@/views/components/drapLeft/index';
export default {
name: 'IbpDraft',
components: {
DrapLeft
},
data() {
return {
widthLeft: 320
};
},
watch: {
widthLeft(val) {
this.setMapResize(val);
},
'$store.state.app.windowSizeCount': function() {
this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
const width = this.$store.state.app.width - 521 - this.widthLeft;
const height = this.$store.state.app.height - 90;
this.$store.dispatch('config/resize', { width: width, height: height });
}
},
methods: {
drapWidth(width) {
this.widthLeft = Number(width);
},
setMapResize(LeftWidth) {
const widths =this.$store.state.app.width - 521 - LeftWidth;
const heights = this.$store.state.app.height - 90;
this.$store.dispatch('config/resize', { width: widths, height: heights });
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.ibpDraft {
overflow: hidden;
.map-list {
float: left;
height: 100%;
}
}
</style>

View File

@ -0,0 +1,84 @@
<template>
<el-dialog :title="this.$t('system.subscribeMap')" :visible.sync="dialogVisible" width="30%" :before-close="doClose" center :close-on-click-modal="false">
<el-form ref="form" v-model="formModel" label-width="120px">
<el-form-item :label="this.$t('system.subscribeToTheMapList')" prop="mapIdList">
<el-select v-model="formModel.mapIdList" clearable multiple :placeholder="this.$t('rules.enterKeyword')" style="width: 80%">
<el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleCorrelation">{{$t('global.confirm')}}</el-button>
<el-button @click="dialogVisible = false">{{$t('global.cancel')}}</el-button>
</span>
</el-dialog>
</template>
<script>
import { listPublishMap } from '@/api/jmap/map';
import { getUserSubscribe, saveUserSubscribe } from '@/api/management/user';
export default {
name: 'MapCorrelation',
data() {
return {
dialogVisible: false,
mapDict: {},
mapList: [],
formModel: {
wxId: '',
userId: '',
mapIdList: []
}
};
},
mounted() {
this.mapDict = {};
listPublishMap().then(response => {
this.mapList = response.data;
this.mapList.forEach(elem => {
this.mapDict[elem.id] = elem.name;
});
});
},
methods: {
doClose(done) {
this.dialogVisible = false;
},
doShow(data) {
this.dialogVisible = true;
this.formModel.userId = data.id;
this.formModel.wxId = data.wxId;
this.formModel.mapIdList = [];
if (this.formModel.userId) {
getUserSubscribe(this.formModel.userId).then(response => {
const list = response.data;
list.forEach(elem => {
this.formModel.mapIdList.push(elem.id);
});
});
}
},
handleCorrelation() {
const model = {
userId: this.formModel.userId,
wxId: this.formModel.wxId,
mapList: []
};
if (this.formModel.mapIdList && this.formModel.mapIdList.length) {
this.formModel.mapIdList.forEach(mapId => {
model.mapList.push({ id: mapId, name: this.mapDict[mapId] });
});
}
saveUserSubscribe(model).then(response => {
this.$message.success(this.$t('tip.setUpASubscriptionMapSuccessfully'));
this.doClose();
}).catch(() => {
this.$message.success(this.$t('tip.setUpASubscriptionMapFailed'));
this.doClose();
});
}
}
};
</script>