修改代码
This commit is contained in:
ival
parent
0f6381e782
commit
07ef079f1b
213
src/views/ibpsystem/index.vue
Normal file
213
src/views/ibpsystem/index.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="ibpId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#000' }" class="ibp-canvas" />
|
||||
<el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">{{ $t('global.back') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import IbpPan from '@/ibp/ibpPan';
|
||||
import { parser } from '@/ibp/utils/parser';
|
||||
import ibpData from '@/ibp/constant/ibpData';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { exitFullscreen } from '@/utils/screen';
|
||||
import { putJointTrainingSimulationUser } from '@/api/chat';
|
||||
import { handlerIbpEvent } from '@/api/simulation';
|
||||
import { IbpOperation } from '@/scripts/ConstDic';
|
||||
|
||||
export default {
|
||||
name: 'Ibp',
|
||||
props: {
|
||||
size: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: this.$store.state.config.width,
|
||||
height: this.$store.state.config.height,
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
config: {
|
||||
scaleRate: '1',
|
||||
origin: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
showBackButton: true,
|
||||
initTime: '',
|
||||
started: false,
|
||||
loading: false,
|
||||
stationCode: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth',
|
||||
'canvasHeight'
|
||||
]),
|
||||
ibpId() {
|
||||
return ['ibp', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.reSize();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.training.initTime': function (initTime) {
|
||||
this.initTime = initTime;
|
||||
if (this.$ibp) {
|
||||
this.initClockTime(initTime);
|
||||
}
|
||||
},
|
||||
'$store.state.training.started': function (started) {
|
||||
this.started = started;
|
||||
if (this.$ibp) {
|
||||
this.setClockStart(started);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.statusMessage(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setWindowSize();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.ibpDestroy();
|
||||
},
|
||||
methods: {
|
||||
show (deviceCode, ibpPart) {
|
||||
if (!deviceCode) {
|
||||
return;
|
||||
}
|
||||
this.stationCode = deviceCode;
|
||||
document.getElementById(this.ibpId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
let offsetX = 0;
|
||||
if (ibpPart === 'left') {
|
||||
offsetX = 0;
|
||||
} else if (ibpPart === 'right') {
|
||||
offsetX = 1920;
|
||||
}
|
||||
this.ibpDestroy();
|
||||
this.loading = true;
|
||||
const data = parser(ibpData[deviceCode], {width: this.canvasWidth, height: this.canvasHeight});
|
||||
this.$ibp = new IbpPan({
|
||||
dom: document.getElementById(this.ibpId),
|
||||
config: {
|
||||
renderer: 'canvas',
|
||||
width: this.canvasWidth,
|
||||
height: this.canvasHeight
|
||||
},
|
||||
options: {
|
||||
scaleRate: 1,
|
||||
offsetX: offsetX,
|
||||
offsetY: 0
|
||||
},
|
||||
methods: {
|
||||
viewLoaded: this.handleViewLoaded
|
||||
}
|
||||
});
|
||||
Vue.prototype.$ibp = this.$ibp;
|
||||
this.$ibp.on('contextmenu', this.onContextMenu, this);
|
||||
if (this.$route.query.group) {
|
||||
this.$ibp.on('selected', this.onSelected, this);
|
||||
}
|
||||
this.setMap(data, ibpData[deviceCode]);
|
||||
this.$store.dispatch('ibp/setIbpData', ibpData[deviceCode]);
|
||||
this.initClockTime(this.initTime);
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
setMap(data, oldData) {
|
||||
this.$ibp.setMap(oldData, data);
|
||||
},
|
||||
// 点击选择事件
|
||||
onSelected(em) {
|
||||
if (em.deviceModel.mean) {
|
||||
const params = { operate:IbpOperation[em.deviceModel.mean].operate, stationCode:this.stationCode };
|
||||
handlerIbpEvent(this.$route.query.group, params);
|
||||
}
|
||||
},
|
||||
// 右键点击事件
|
||||
onContextMenu(em) {
|
||||
this.$store.dispatch('ibp/setUpdateDeviceData', em.eventTarget.model);
|
||||
},
|
||||
// 绘图时调用，元素可拖拽
|
||||
drawIbpInit() {
|
||||
this.$ibp && this.$ibp.drawIbpInit();
|
||||
this.showBackButton = false;
|
||||
},
|
||||
// 初始化电子表时间
|
||||
initClockTime(initTime) {
|
||||
this.$ibp.initClockTime(initTime);
|
||||
},
|
||||
// 设置电子时钟开始或停止
|
||||
setClockStart(started) {
|
||||
this.$ibp.setClockStart(started);
|
||||
},
|
||||
reSize() {
|
||||
this.$nextTick(() => {
|
||||
this.width = this.$store.state.config.width;
|
||||
this.height = this.$store.state.config.height;
|
||||
this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
|
||||
});
|
||||
},
|
||||
setWindowSize() {
|
||||
this.$nextTick(() => {
|
||||
const width = this.size ? this.size.width : this.$store.state.app.width;
|
||||
const height = this.size ? this.size.height : this.$store.state.app.height;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
});
|
||||
},
|
||||
back() {
|
||||
this.group = this.$route.query.group;
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
putJointTrainingSimulationUser(this.group).then(() => {
|
||||
this.$router.push({ path: `/trainroom`, query: { group: this.group } });
|
||||
exitFullscreen();
|
||||
});
|
||||
});
|
||||
},
|
||||
ibpDestroy() {
|
||||
if (this.$ibp) {
|
||||
this.$ibp.dispose();
|
||||
this.$ibp = '';
|
||||
Vue.prototype.$ibp = '';
|
||||
}
|
||||
},
|
||||
handleViewLoaded() {
|
||||
this.loading = false;
|
||||
},
|
||||
statusMessage(val) {
|
||||
this.$ibp && this.$ibp.setDeviceStatus(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.ibp-button{
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 20px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.ibp-canvas{
|
||||
}
|
||||
</style>
|
||||
135
src/views/lesson/trainingrecordmanage/index.vue
Normal file
135
src/views/lesson/trainingrecordmanage/index.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="blockContext">
|
||||
<div class="mapContext">
|
||||
<map-system-draft ref="mapCanvas" />
|
||||
</div>
|
||||
<div class="stepContext">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<step-manage ref="stepManage" :training-obj="trainingObj" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapSystemDraft from '@/views/mapsystem/index';
|
||||
import StepManage from './stepmanage/index';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getTrainingDetail, getTrainingStepsDetail } from '@/api/jmap/training';
|
||||
import { getProductDetail } from '@/api/management/mapprd';
|
||||
import { TrainingMode, OperateMode } from '@/scripts/ConstDic';
|
||||
import { loadMapData } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'LessonDraft',
|
||||
components: {
|
||||
MapSystemDraft,
|
||||
StepManage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stationObj: null,
|
||||
trainingObj: null,
|
||||
widthLeft: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'mapData'
|
||||
]),
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
trainingId() {
|
||||
return this.$route.params.trainingId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width - 481 - this.widthLeft;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 90;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(newVal) {
|
||||
this.initLoadData();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function() {
|
||||
if (this.trainingId) {
|
||||
getTrainingStepsDetail(this.trainingId, { group: this.group }).then(response => {
|
||||
this.$store.dispatch('training/setTrainingData', response.data);
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.getMapStepsFailed'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initLoadData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
},
|
||||
methods: {
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
initLoadData() {
|
||||
this.$store.dispatch('training/end', TrainingMode.EDIT);
|
||||
this.$store.dispatch('training/reset');
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
|
||||
if (parseInt(this.trainingId)) {
|
||||
this.trainingObj = { id: this.trainingId, name: this.$route.params.trainingName };
|
||||
// 获取实训的详细数据
|
||||
// 加载地图数据
|
||||
// 设置实训数据
|
||||
getTrainingDetail(this.trainingId).then(resp => {
|
||||
const detail = resp.data;
|
||||
getProductDetail(detail.prdCode).then(rest => {
|
||||
const data = rest.data;
|
||||
loadMapData(detail.skinCode).then(() => {
|
||||
this.$store.dispatch('training/setPrdType', data.prdType);
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.loadMapDataFailed'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.getMapDetailFailed'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.blockContext {
|
||||
// float: left;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mapContext {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.stepContext {
|
||||
float: right;
|
||||
width: 480px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
</style>
|
||||
84
src/views/lesson/trainingrecordmanage/stepmanage/index.vue
Normal file
84
src/views/lesson/trainingrecordmanage/stepmanage/index.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-card class="map-list-main">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
{{ $t('lesson.trainingName') }} :
|
||||
<b>{{ trainingName }}</b>
|
||||
</span>
|
||||
<el-button type="text" :disabled="started" style="float: right; padding: 3px 0" @click="reset">{{ $t('global.reset') }}</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="enabledTab" class="ViewControl" type="card">
|
||||
<el-tab-pane :label="$t('lesson.stationList')" name="StationList">
|
||||
<station-list-operate ref="stationList" :height="stationListHeight" @getStationObj="getStationObj" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('lesson.stepInfo')" name="StepInfo">
|
||||
<step-Info-operate ref="stepInfo" :height="stepDraftHeight" :training-obj="trainingObj" :station-obj="stationObj" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import StepInfoOperate from './stepinfo/index';
|
||||
import StationListOperate from './stationlist/index';
|
||||
|
||||
export default {
|
||||
name: 'LessonDraft',
|
||||
components: {
|
||||
StepInfoOperate,
|
||||
StationListOperate
|
||||
},
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'StationList',
|
||||
stationObj: null,
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mapName: function () {
|
||||
return this.map.name || this.$t('lesson.selectMap');
|
||||
},
|
||||
trainingName: function () {
|
||||
let name = this.$t('lesson.selectTraining');
|
||||
if (this.trainingObj) {
|
||||
name = this.trainingObj.name;
|
||||
}
|
||||
return name;
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'map'
|
||||
]),
|
||||
...mapGetters('training', [
|
||||
'started'
|
||||
]),
|
||||
stepDraftHeight() {
|
||||
return this.$store.state.app.height - 150;
|
||||
},
|
||||
stationListHeight() {
|
||||
return this.$store.state.app.height - 195;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStationObj: function (data) {
|
||||
this.stationObj = data;
|
||||
},
|
||||
reset() {
|
||||
this.$refs.stepInfo.reset();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<el-input v-model="filterText" :placeholder="$t('lesson.findStationPlaceholder')" clearable />
|
||||
<div class="treeMenu" :style="{ height: height +'px' }">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-tree
|
||||
ref="StationTree"
|
||||
class="treeList"
|
||||
:data="stationData"
|
||||
:props="defaultProps"
|
||||
:filter-node-method="filterNode"
|
||||
accordion
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
@node-click="clickEvent"
|
||||
>
|
||||
<span slot-scope="{ node }"> {{ node.label }}</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'StationListOperate',
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
stationData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'stationList': function (val, old) {
|
||||
if (val) {
|
||||
this.stationData = [];
|
||||
val.forEach(elem => {
|
||||
if (elem.visible) {
|
||||
this.stationData.push({
|
||||
id: elem.code,
|
||||
label: elem.name
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs.StationTree.filter(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
clickEvent(obj, node, data) {
|
||||
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: obj.id });
|
||||
this.$emit('getStationObj', obj);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.treeList {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<el-tabs>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<div class="mainContext" :style="{height: height +'px' }">
|
||||
<step-operate ref="step" :training-obj="trainingObj" :station-obj="stationObj" />
|
||||
<list-operate ref="list" :training-obj="trainingObj" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
import ListOperate from './list';
|
||||
import StepOperate from './step';
|
||||
|
||||
export default {
|
||||
name: 'StepInfoOperate',
|
||||
components: {
|
||||
ListOperate,
|
||||
StepOperate
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
stationObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
reset: function () {
|
||||
this.$refs.step.reset();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<el-table ref="stepTree" :data="steps" border style="width: 100%; padding-bottom: 30px;" height="320px">
|
||||
<el-table-column prop="order" :label="$t('lesson.stepNo')" width="80" />
|
||||
<el-table-column prop="code" :label="$t('lesson.deviceNumber')" width="180" />
|
||||
<el-table-column prop="operation" :label="$t('lesson.operationType')" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'TreeOperate',
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('training', [
|
||||
'steps'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<el-form ref="form" :label-width="$i18n.locale == 'zh'? '90px': '140px'" :model="stepModel" :rules="rules" size="mini">
|
||||
<el-form-item :label="`${$t('lesson.selectMode')}:`">
|
||||
<el-radio-group v-model="modeSelect" size="mini" @change="changeOperateMode">
|
||||
<el-radio :label="OperateMode.ADMIN" border>{{ $t('global.coachingModel') }}</el-radio>
|
||||
<el-radio :label="OperateMode.NORMAL" border>{{ $t('global.normalMode') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.stepNo')}:`">
|
||||
<el-input v-model="index" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.deviceNumber')}:`" prop="code">
|
||||
<el-input v-model="stepModel.code" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.deviceType')}:`" prop="type">
|
||||
<el-input v-model="stepModel.type" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.operationType')}:`" prop="operation">
|
||||
<el-input v-model="stepModel.operation" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.returnValue')}:`" prop="returnCode">
|
||||
<el-input v-model="stepModel.returnCode" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`${$t('lesson.tips')}:`" prop="tipMessage">
|
||||
<el-input
|
||||
v-model="stepModel.tipMessage"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 4}"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button :loading="saveLoading" :disabled="saveDisabled" size="small" @click="start">
|
||||
{{ $t('lesson.startRecording') }}
|
||||
</el-button>
|
||||
<el-button v-if="started" size="small" @click="next">
|
||||
{{ $t('lesson.nextStep') }}
|
||||
</el-button>
|
||||
<el-button v-if="started" size="small" @click="end">
|
||||
{{ $t('lesson.endRecording') }}
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { saveTrainingInitStatus, saveTrainingStepsData, startTraining, clearTraining } from '@/api/jmap/training';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import OperateHandler from '@/scripts/plugin/trainingOperateHandler';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'StepOperate',
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
stationObj: {
|
||||
type: Object,
|
||||
default () {
|
||||
return { id: '', name: '' };
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
OperateMode: OperateMode,
|
||||
modeSelect: OperateMode.NORMAL,
|
||||
index: 1,
|
||||
saveLoading: false,
|
||||
saveDisabled: false,
|
||||
stepModel: {
|
||||
code: '',
|
||||
type: '',
|
||||
operation: '',
|
||||
returnCode: '',
|
||||
tipMessage: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('training', [
|
||||
'tempStep',
|
||||
'steps',
|
||||
'started'
|
||||
]),
|
||||
...mapGetters('map', [
|
||||
'mapDeviceStatus'
|
||||
]),
|
||||
rules() {
|
||||
return {
|
||||
type: { required: true, message: this.$t('rules.deviceTypeNotNull'), trigger: 'change' },
|
||||
operation: { required: true, message: this.$t('rules.operationTypeNotNull'), trigger: 'change' },
|
||||
tipMessage: { required: true, message: this.$t('rules.tipsNotNull'), trigger: 'change' }
|
||||
};
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'tempStep': function (val) {
|
||||
if (val && this.started) {
|
||||
this.$refs.form.resetFields();
|
||||
this.stepModel.code = val.code;
|
||||
this.stepModel.type = val.type;
|
||||
this.stepModel.operation = val.operation;
|
||||
this.stepModel.returnCode = val.val;
|
||||
}
|
||||
},
|
||||
$route() {
|
||||
this.modeSelect = OperateMode.NORMAL;
|
||||
this.saveDisabled = false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.changeOperateMode(this.modeSelect);
|
||||
},
|
||||
methods: {
|
||||
changeOperateMode(handle) {
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: handle });
|
||||
},
|
||||
reset() {
|
||||
if (this.trainingObj) {
|
||||
const data = { id: this.trainingObj.id };
|
||||
clearTraining(data).then(response => {
|
||||
startTraining(data, this.group).then(response => {
|
||||
OperateHandler.cleanOperates(); // 清空提示信息
|
||||
this.$refs.form.resetFields();
|
||||
this.$store.dispatch('training/over');
|
||||
this.$store.dispatch('menuOperation/reset');
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', { break: false });
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$store.dispatch('map/clearJlmapTrainView').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.index = 1;
|
||||
this.$store.dispatch('training/setSteps', []);
|
||||
this.$store.dispatch('training/updateMapState', this.mapDeviceStatus);
|
||||
});
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.resetFailed'));
|
||||
});
|
||||
}
|
||||
},
|
||||
start() {
|
||||
this.saveLoading = true;
|
||||
if (this.trainingObj) {
|
||||
const data = { id: this.trainingObj.id };
|
||||
saveTrainingInitStatus(data, this.group).then(response => {
|
||||
startTraining(data, this.group).then(response => {
|
||||
this.index = 1;
|
||||
this.$store.dispatch('training/start');
|
||||
this.$store.dispatch('training/setSteps', []);
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$refs.form.resetFields();
|
||||
this.saveLoading = false;
|
||||
this.saveDisabled = true;
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.startTrainingFailed'));
|
||||
this.saveLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.saveBackgroundFailed'));
|
||||
this.saveLoading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
saveStep(callback) {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.stepModel.tipMessage) {
|
||||
const model = {
|
||||
order: this.index,
|
||||
code: this.stepModel.code,
|
||||
type: this.stepModel.type,
|
||||
operation: this.stepModel.operation,
|
||||
val: this.stepModel.returnCode,
|
||||
tip: this.stepModel.tipMessage
|
||||
};
|
||||
|
||||
this.$store.dispatch('training/addStep', model).then((valid) => {
|
||||
if (valid) {
|
||||
this.index = this.index + 1;
|
||||
}
|
||||
});
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag');
|
||||
}
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => { EventBus.$emit('closeMenu'); });
|
||||
if (typeof callback === typeof function () { }) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
next() {
|
||||
this.saveStep();
|
||||
},
|
||||
end() {
|
||||
this.saveStep(() => {
|
||||
if (this.stationObj && this.stationObj.id) {
|
||||
this.index = 1;
|
||||
this.$store.dispatch('training/over');
|
||||
const model = {
|
||||
id: this.trainingObj.id,
|
||||
steps: this.steps,
|
||||
locateDeviceCode: this.stationObj.id
|
||||
};
|
||||
saveTrainingStepsData(model).then(response => {
|
||||
this.$refs.form.resetFields();
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
this.$message.success(this.$t('tip.savedStepDataSuccessfully'));
|
||||
this.saveDisabled = false;
|
||||
}).catch(() => {
|
||||
this.saveDisabled = false;
|
||||
this.$messageBox(this.$t('tip.savedStepDataFailed'));
|
||||
});
|
||||
} else {
|
||||
this.$messageBox(this.$t('rules.selectAssociatedStation'));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
83
src/views/system/cacheControl/index.vue
Normal file
83
src/views/system/cacheControl/index.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCacheList, delCacheList } from '@/api/management/user';
|
||||
|
||||
export default {
|
||||
name: 'CacheControl',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '80px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
key: {
|
||||
type: 'text',
|
||||
label: 'key'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: 'key',
|
||||
prop: 'key'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('global.delete'),
|
||||
handleClick: this.handledelete,
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 删除
|
||||
handledelete(index, row) {
|
||||
this.$confirm( this.$t('tip.deleteListHint'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delCacheList(row.key).then(response => {
|
||||
this.$message.success(this.$t('tip.successfullyDelete'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.failDelete'));
|
||||
});
|
||||
});
|
||||
},
|
||||
queryFunction(params) {
|
||||
return getCacheList(params);
|
||||
},
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
153
src/views/system/dictionary/edit.vue
Normal file
153
src/views/system/dictionary/edit.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { create, checkDicCodeExist, getData, update } from '@/api/management/dictionary';
|
||||
import { validateCharCode } from '@/utils/validate';
|
||||
export default {
|
||||
name: 'DictionaryEdit',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
status: '1',
|
||||
remarks: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const isAdd = this.type === 'ADD';
|
||||
const form = {
|
||||
labelWidth: '60px',
|
||||
items: [
|
||||
{ prop: 'code', label: this.$t('system.code'), type: 'text', required: true, disabled: !isAdd },
|
||||
{ prop: 'name', label: this.$t('system.name'), type: 'text', required: true },
|
||||
{
|
||||
prop: 'status', label: this.$t('system.status'), type: 'select', required: true, options: this.$ConstSelect.Status
|
||||
},
|
||||
{ prop: 'remarks', label: this.$t('system.remarks'), type: 'textarea', required: false }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseInputName'), trigger: 'blur' },
|
||||
{ min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectStatus'), trigger: 'change' }
|
||||
],
|
||||
remarks: [
|
||||
{ max: 50, message: this.$t('rules.strLengthNotExceed50'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
if (this.type === 'ADD') {
|
||||
return Object.assign(crules, {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseInputCode'), trigger: 'blur' },
|
||||
{ min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' },
|
||||
{ validator: this.validateCode, trigger: 'blur' }
|
||||
]
|
||||
});
|
||||
} else {
|
||||
return crules;
|
||||
}
|
||||
},
|
||||
title() {
|
||||
if (this.type === 'ADD') {
|
||||
return this.$t('system.createDirectory');
|
||||
} else {
|
||||
return this.$t('system.editDictionary');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateCode(rule, value, callback) {
|
||||
if (!validateCharCode(value)) {
|
||||
return callback(new Error(this.$t('error.formartError')));
|
||||
} else {
|
||||
checkDicCodeExist(value).then(response => {
|
||||
if (response.data) {
|
||||
return callback(new Error(this.$t('error.codeHasExist')));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
}).catch(() => {
|
||||
return callback(new Error(this.$t('error.serviceException')));
|
||||
});
|
||||
}
|
||||
},
|
||||
show(id) {
|
||||
this.dialogVisible = true;
|
||||
if (id) {
|
||||
getData(id).then(response => {
|
||||
this.formModel = response.data;
|
||||
this.$refs.dataform.resetForm();
|
||||
});
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
if (self.type === 'ADD') {
|
||||
self.create();
|
||||
} else {
|
||||
self.update();
|
||||
}
|
||||
});
|
||||
},
|
||||
create() {
|
||||
const self = this;
|
||||
create(this.formModel).then(response => {
|
||||
self.$message.success(this.$t('system.createSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`${this.$t('error.createDictionaryFailed')}:${error.message}`);
|
||||
});
|
||||
},
|
||||
update() {
|
||||
const self = this;
|
||||
update(this.formModel).then(response => {
|
||||
self.$message.success(this.$t('system.updateSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`${this.$t('error.updateDictionaryFailed')}:${error.message}`);
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
code: '',
|
||||
name: '',
|
||||
status: '1',
|
||||
remarks: ''
|
||||
};
|
||||
this.$refs.dataform.resetForm();
|
||||
if (done) {
|
||||
done();
|
||||
} else {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
138
src/views/system/dictionary/index.vue
Normal file
138
src/views/system/dictionary/index.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<dictionary-edit ref="create" type="ADD" @reloadTable="reloadTable" />
|
||||
<dictionary-edit ref="edit" type="EDIT" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, del } from '@/api/management/dictionary';
|
||||
import DictionaryEdit from '@/views/system/dictionary/edit';
|
||||
|
||||
export default {
|
||||
name: 'Dictionary',
|
||||
components: {
|
||||
DictionaryEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '80px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
code: {
|
||||
type: 'text',
|
||||
label: this.$t('system.code')
|
||||
},
|
||||
name: {
|
||||
type: 'text',
|
||||
label: this.$t('system.name')
|
||||
},
|
||||
status: {
|
||||
type: 'select',
|
||||
label: this.$t('system.status'),
|
||||
config: {
|
||||
data: this.$ConstSelect.Status
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: list,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('system.code'),
|
||||
prop: 'code'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.name'),
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.status'),
|
||||
prop: 'status',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.status, 'Status'); },
|
||||
tagType: (row) => { if (row.status === '0') { return 'danger'; } else { return 'success'; } }
|
||||
},
|
||||
{
|
||||
title: this.$t('system.remarks'),
|
||||
prop: 'remarks'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('global.detail'),
|
||||
handleClick: this.handleViewDetail
|
||||
},
|
||||
{
|
||||
name: this.$t('global.edit'),
|
||||
handleClick: this.handleEdit
|
||||
},
|
||||
{
|
||||
name: this.$t('global.delete'),
|
||||
handleClick: this.handleDelete,
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{ text: this.$t('global.add'), handler: this.handleAdd }
|
||||
// { text: '批量删除', btnCode: 'employee_delete', handler: this.handleBatchDelete, type: 'danger' }
|
||||
]
|
||||
},
|
||||
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleViewDetail(index, row) {
|
||||
this.$router.push({ path: `/system/dictionary/detail`, query: { id: row.id } });
|
||||
},
|
||||
|
||||
handleEdit(index, row) {
|
||||
this.$refs.edit.show(row.id);
|
||||
},
|
||||
|
||||
handleAdd() {
|
||||
this.$refs.create.show();
|
||||
},
|
||||
|
||||
handleBatchDelete() {
|
||||
},
|
||||
|
||||
handleDelete(index, row) {
|
||||
this.$confirm(this.$t('system.wellDelType'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
del(row.id).then(response => {
|
||||
this.$message.success(this.$t('system.deleteSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.reloadTable();
|
||||
this.$messageBox(this.$t('error.deleteFailed'));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
157
src/views/system/dictionaryDetail/edit.vue
Normal file
157
src/views/system/dictionaryDetail/edit.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { create, checkDicDetailCodeExist, getData, update } from '@/api/management/dictionaryDetail';
|
||||
import { validateCharCode } from '@/utils/validate';
|
||||
export default {
|
||||
name: 'DictionaryDetailEdit',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
dicId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
status: '1',
|
||||
remarks: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const isAdd = this.type === 'ADD';
|
||||
const form = {
|
||||
labelWidth: '60px',
|
||||
items: [
|
||||
{ prop: 'code', label: this.$t('system.code'), type: 'text', required: true, disabled: !isAdd },
|
||||
{ prop: 'name', label: this.$t('system.name'), type: 'text', required: true },
|
||||
{
|
||||
prop: 'status', label: this.$t('system.status'), type: 'select', required: true, options: this.$ConstSelect.Status
|
||||
},
|
||||
{ prop: 'remarks', label: this.$t('system.remarks'), type: 'textarea', required: false }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseInputName'), trigger: 'blur' },
|
||||
{ min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectStatus'), trigger: 'change' }
|
||||
],
|
||||
remarks: [
|
||||
{ max: 50, message: this.$t('rules.strLengthNotExceed50'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
if (this.type === 'ADD') {
|
||||
return Object.assign(crules, {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseInputCode'), trigger: 'blur' },
|
||||
{ min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' },
|
||||
{ validator: this.validateCode, trigger: 'blur' }
|
||||
]
|
||||
});
|
||||
} else {
|
||||
return crules;
|
||||
}
|
||||
},
|
||||
title() {
|
||||
if (this.type === 'ADD') {
|
||||
return this.$t('system.createDetail');
|
||||
} else {
|
||||
return this.$t('system.editDetail');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateCode(rule, value, callback) {
|
||||
if (!validateCharCode(value)) {
|
||||
return callback(new Error(this.$t('error.formartError')));
|
||||
} else {
|
||||
checkDicDetailCodeExist(this.dicId, value).then(response => {
|
||||
if (response.data) {
|
||||
return callback(new Error(this.$t('error.codeHasExist')));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
}).catch(() => {
|
||||
return callback(new Error(this.$t('error.serviceException')));
|
||||
});
|
||||
}
|
||||
},
|
||||
show(id) {
|
||||
this.dialogVisible = true;
|
||||
if (id) {
|
||||
getData(this.dicId, id).then(response => {
|
||||
this.formModel = response.data;
|
||||
this.$refs.dataform.resetForm();
|
||||
});
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
if (self.type === 'ADD') {
|
||||
self.create();
|
||||
} else {
|
||||
self.update();
|
||||
}
|
||||
});
|
||||
},
|
||||
create() {
|
||||
const self = this;
|
||||
create(this.dicId, this.formModel).then(response => {
|
||||
self.$message.success(this.$t('system.createSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`${this.$t('error.createDetailFailed')}:${error.message}`);
|
||||
});
|
||||
},
|
||||
update() {
|
||||
const self = this;
|
||||
update(this.dicId, this.formModel).then(response => {
|
||||
self.$message.success(this.$t('system.updateSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`${this.$t('error.updateDetailFailed')}:${error.message}`);
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
code: '',
|
||||
name: '',
|
||||
status: '1',
|
||||
remarks: ''
|
||||
};
|
||||
this.$refs.dataform.resetForm();
|
||||
if (done) {
|
||||
done();
|
||||
} else {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
167
src/views/system/dictionaryDetail/index.vue
Normal file
167
src/views/system/dictionaryDetail/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <turnback-bar :title="turnbackBarTitle"></turnback-bar> -->
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<div class="draft">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="turnback">{{ $t('global.back') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<dictionary-detail-edit ref="create" type="ADD" :dic-id="dicId" @reloadTable="reloadTable" />
|
||||
<dictionary-detail-edit ref="edit" type="EDIT" :dic-id="dicId" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, del } from '@/api/management/dictionaryDetail';
|
||||
import { getData } from '@/api/management/dictionary';
|
||||
import DictionaryDetailEdit from '@/views/system/dictionaryDetail/edit';
|
||||
export default {
|
||||
name: 'DictionaryDetail',
|
||||
components: {
|
||||
DictionaryDetailEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dicId: '',
|
||||
dic: {},
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '80px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
code: {
|
||||
type: 'text',
|
||||
label: this.$t('global.code')
|
||||
},
|
||||
name: {
|
||||
type: 'text',
|
||||
label: this.$t('global.name')
|
||||
},
|
||||
status: {
|
||||
type: 'select',
|
||||
label: this.$t('global.status'),
|
||||
config: {
|
||||
data: this.$ConstSelect.Status
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('global.code'),
|
||||
prop: 'code'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.name'),
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.status'),
|
||||
prop: 'status',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.status, 'Status'); },
|
||||
tagType: (row) => { if (row.status === '0') { return 'danger'; } else { return 'success'; } }
|
||||
},
|
||||
{
|
||||
title: this.$t('global.remarks'),
|
||||
prop: 'remarks'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('global.edit'),
|
||||
handleClick: this.handleEdit
|
||||
},
|
||||
{
|
||||
name: this.$t('global.delete'),
|
||||
handleClick: this.handleDelete,
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{ text: this.$t('global.add'), btnCode: 'employee_insert', handler: this.handleAdd }
|
||||
// { text: '批量删除', btnCode: 'employee_delete', handler: this.handleBatchDelete, type: 'danger' }
|
||||
]
|
||||
},
|
||||
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
|
||||
// computed: {
|
||||
// turnbackBarTitle() {
|
||||
// return this.dic.name + '(' + this.dic.code + ')'
|
||||
// }
|
||||
// },
|
||||
|
||||
created() {
|
||||
this.dicId = this.$route.query.id;
|
||||
getData(this.dicId).then(response => {
|
||||
this.dic = response.data;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
queryFunction(params) {
|
||||
return list(this.dicId, params);
|
||||
},
|
||||
|
||||
handleEdit(index, row) {
|
||||
this.$refs.edit.show(row.id);
|
||||
},
|
||||
|
||||
handleAdd() {
|
||||
this.$refs.create.show();
|
||||
},
|
||||
|
||||
handleBatchDelete() {
|
||||
|
||||
},
|
||||
|
||||
handleDelete(index, row) {
|
||||
this.$confirm(this.$t('system.wellDelType'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
del(this.dicId, row.id).then(response => {
|
||||
this.$message.success(this.$t('system.deleteSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.reloadTable();
|
||||
this.$messageBox(this.$t('error.deleteFailed'));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
},
|
||||
|
||||
turnback() {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.draft {
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
193
src/views/system/existingSimulation/index.vue
Normal file
193
src/views/system/existingSimulation/index.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getExistingSimulation, deleteExistingSimulation } from '@/api/simulation';
|
||||
export default {
|
||||
name: 'SimulationManage',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
examResultList: [],
|
||||
LessonList: [],
|
||||
mapList: [],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '130px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
group: {
|
||||
type: 'text',
|
||||
label: this.$t('system.simulationGroup')
|
||||
},
|
||||
userName: {
|
||||
type: 'text',
|
||||
label: this.$t('system.userName')
|
||||
},
|
||||
mobile: {
|
||||
type: 'text',
|
||||
label: this.$t('global.mobile')
|
||||
},
|
||||
skinCode: {
|
||||
type: 'select',
|
||||
label: this.$t('system.skinCode'),
|
||||
config: {
|
||||
data: this.$ConstSelect.skinCode
|
||||
}
|
||||
},
|
||||
prdType: {
|
||||
type: 'select',
|
||||
label: this.$t('system.prdType'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
type: {
|
||||
type: 'select',
|
||||
label: this.$t('system.simulationType'),
|
||||
config: {
|
||||
data: this.$ConstSelect.SimulationType
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: getExistingSimulation,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('system.userName'),
|
||||
prop: 'creator.name'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.mobile'),
|
||||
prop: 'creator.mobile'
|
||||
},
|
||||
{
|
||||
title: 'Group',
|
||||
prop: 'group'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.isError'),
|
||||
prop: 'error',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.error, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.error) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('system.productName'),
|
||||
prop: 'mapPrdVO.name'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.isSuspend'),
|
||||
prop: 'pause',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.pause, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.pause) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('system.isDrivingAsplanned'),
|
||||
prop: 'runAsPlan',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.runAsPlan, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.runAsPlan) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('system.skinCode'),
|
||||
prop: 'skinCode',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$convertField(row.skinCode, this.$ConstSelect.skinCode, ['value', 'label']); },
|
||||
tagType: (row) => { return 'success'; }
|
||||
},
|
||||
{
|
||||
title: this.$t('system.simulationType'),
|
||||
prop: 'type',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$convertField(row.type, this.$ConstSelect.SimulationType, ['value', 'label']); },
|
||||
tagType: (row) => { return 'success'; }
|
||||
},
|
||||
{
|
||||
title: this.$t('system.simulationGroupId'),
|
||||
prop: 'sessionList',
|
||||
type: 'basicText',
|
||||
columnValue: (row) => { return this.listJoiningTogether(row.sessionList); }
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('system.destory'),
|
||||
handleClick: this.handleDelete,
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$Dictionary.productType().then(list => {
|
||||
list.forEach(elem => {
|
||||
this.queryForm.queryObject.prdType.config.data.push({ value: elem.code, label: elem.name });
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
listJoiningTogether(sessionList) {
|
||||
let sessionId = '';
|
||||
if (sessionList.length>0) {
|
||||
sessionList.forEach((item) => {
|
||||
sessionId = sessionId+item+',';
|
||||
});
|
||||
sessionId = sessionId.substring(0, sessionId.length-1);
|
||||
}
|
||||
return sessionId;
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
this.$confirm(this.$t('system.wellDelUserSimulation'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteExistingSimulation(row.group).then(response => {
|
||||
this.$message.success(this.$t('system.deleteSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.reloadTable();
|
||||
this.$messageBox(this.$t('error.deleteFailed'));
|
||||
});
|
||||
});
|
||||
},
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
125
src/views/system/ibpDraw/ibpOperate/ibpAlarm.vue
Normal file
125
src/views/system/ibpDraw/ibpOperate/ibpAlarm.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.alarmCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.alarmWidth')" prop="alarmWidth">
|
||||
<el-input-number v-model="form.alarmWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<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">{{$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: 'ButtonDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheAlarmCode'), trigger: 'blur' },
|
||||
],
|
||||
alarmWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheAlarmWidth'), trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Alarm' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.alarmWidth = 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 alarmModel = {
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form .alarmWidth,
|
||||
};
|
||||
this.$emit('createAlarm', alarmModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const alarmModel = {
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form .alarmWidth,
|
||||
};
|
||||
this.$emit('deleteDataModel',alarmModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "alarm_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
147
src/views/system/ibpDraw/ibpOperate/ibpAppendageBox.vue
Normal file
147
src/views/system/ibpDraw/ibpOperate/ibpAppendageBox.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameWidth')" prop="appendageBoxWidth">
|
||||
<el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="50"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameHeight')" prop="appendageBoxHeight">
|
||||
<el-input-number v-model="form.appendageBoxHeight" controls-position="right" :min="75"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.borderWidth')" prop="borderWidth">
|
||||
<el-input-number v-model="form.borderWidth" controls-position="right" :min="1"></el-input-number><span>  {{$t('ibp.recommendedSize')}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<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">{{$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: 'AppendageBoxDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
borderWidth: 25
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameCode'), trigger: 'blur' },
|
||||
],
|
||||
appendageBoxWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameWidth'), trigger: 'blur' },
|
||||
],
|
||||
appendageBoxHeight: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameHeight'), trigger: 'blur' },
|
||||
],
|
||||
borderWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheBorderWidth'), trigger: 'blur'},
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'AppendageBox' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.appendageBoxWidth = model.width;
|
||||
this.form.appendageBoxHeight = model.height;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.form.borderWidth = model.borderWidth
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const appendageBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form .appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight,
|
||||
borderWidth: this.form.borderWidth
|
||||
};
|
||||
this.$emit('createAppendageBox', appendageBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const appendageBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form .appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight,
|
||||
borderWidth: this.form.borderWidth
|
||||
};
|
||||
this.$emit('deleteDataModel',appendageBoxModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: '',
|
||||
borderWidth: 25,
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "aBox"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
164
src/views/system/ibpDraw/ibpOperate/ibpArrow.vue
Normal file
164
src/views/system/ibpDraw/ibpOperate/ibpArrow.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.arrowCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowDirection')" prop="orientation">
|
||||
<el-select v-model="form.orientation" :placeholder="this.$t('rules.selectTheDirectionOfTheArrow')">
|
||||
<el-option :label="this.$t('ibp.up')" value="top"></el-option>
|
||||
<el-option :label="this.$t('ibp.down')" value="bottom"></el-option>
|
||||
<el-option :label="this.$t('ibp.left')" value="left"></el-option>
|
||||
<el-option :label="this.$t('ibp.right')" value="right"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowLength')" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowLength" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowWidth')" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowColor')" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.vertexXCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.vertexYCoordinate')">
|
||||
<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">{{$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: 'ArrowDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
orientation: 'left',
|
||||
arrowWidth: '',
|
||||
arrowLength: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowCode'), trigger: 'blur' },
|
||||
],
|
||||
orientation: [
|
||||
{ required: true, message: this.$t('rules.selectTheDirectionOfTheArrow'), trigger: 'change'}
|
||||
],
|
||||
arrowLength: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowLength'), trigger: 'blur' },
|
||||
],
|
||||
arrowWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowWidth'), trigger: 'blur' },
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowColor'), trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Arrow' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.orientation = model.orientation;
|
||||
this.form.arrowLength = model.length;
|
||||
this.form.arrowWidth = model.width;
|
||||
this.form.fillColor = model.fill;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const arrowModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form .arrowWidth,
|
||||
length: this.form.arrowLength,
|
||||
};
|
||||
this.$emit('createArrow', arrowModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const arrowModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form .arrowWidth,
|
||||
length: this.form.arrowLength,
|
||||
};
|
||||
this.$emit('deleteDataModel',arrowModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
orientation: 'left',
|
||||
arrowWidth: '',
|
||||
arrowLength: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "arrow_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
82
src/views/system/ibpDraw/ibpOperate/ibpBg.vue
Normal file
82
src/views/system/ibpDraw/ibpOperate/ibpBg.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.backgroundWidth')">
|
||||
<el-input-number v-model="form.bgWidth" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.backgroundHeight')">
|
||||
<el-input-number v-model="form.bgHeight" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{$t('global.modify')}}</el-button>
|
||||
<el-button>{{$t('global.cancel')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'BgDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
bgWidth: this.$store.state.ibp.ibpBgDevice.model?this.$store.state.ibp.ibpBgDevice.model.width:1,
|
||||
bgHeight: this.$store.state.ibp.ibpBgDevice.model?this.$store.state.ibp.ibpBgDevice.model.height:1,
|
||||
},
|
||||
code: this.$store.state.ibp.ibpBgDevice.model?this.$store.state.ibp.ibpBgDevice.model.code:'',
|
||||
rules: {
|
||||
bgWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheBackgroundWidth'), trigger: 'blur' },
|
||||
],
|
||||
bgHeight: [
|
||||
{ required: true, message: this.$t('rules.enterTheBackgroundHeight'), trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Background' ){
|
||||
this.form.bgWidth = model.width;
|
||||
this.form.bgHeight = model.height;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const bgModel = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
_type: 'Background',
|
||||
code: this.code,
|
||||
width: this.form .bgWidth,
|
||||
height: this.form.bgHeight
|
||||
};
|
||||
this.$emit('updateBg', bgModel)
|
||||
},
|
||||
initPage(){
|
||||
this.form.bgWidth = this.$store.state.ibp.ibpBgDevice.model?this.$store.state.ibp.ibpBgDevice.model.width:1;
|
||||
this.form.bgHeight = this.$store.state.ibp.ibpBgDevice.model?this.$store.state.ibp.ibpBgDevice.model.height:1;
|
||||
this.code = this.$store.state.ibp.ibpBgDevice.model?this.$store.state.ibp.ibpBgDevice.model.code:'';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.button_box{
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
144
src/views/system/ibpDraw/ibpOperate/ibpButton.vue
Normal file
144
src/views/system/ibpDraw/ibpOperate/ibpButton.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item :label="this.$t('ibp.buttonCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.buttonColor')" prop="buttonColor">
|
||||
<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.yellowButton')" value="yellow"></el-option>
|
||||
<el-option :label="this.$t('ibp.greenButton')" value="green"></el-option>
|
||||
<el-option :label="this.$t('ibp.blueButton')" value="blue"></el-option>
|
||||
<el-option :label="this.$t('ibp.grayButton')" value="gray"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<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">{{$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: 'ButtonDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
buttonColor: 'red',
|
||||
buttonWidth: 25,
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('ibp.enterTheButtonCode'), trigger: 'blur' },
|
||||
],
|
||||
buttonColor: [
|
||||
{ required: true, message: this.$t('ibp.selectTheButtonColor'), trigger: 'change'}
|
||||
],
|
||||
buttonWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheButtonWidth'), trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$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() {
|
||||
},
|
||||
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,
|
||||
};
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
126
src/views/system/ibpDraw/ibpOperate/ibpClock.vue
Normal file
126
src/views/system/ibpDraw/ibpOperate/ibpClock.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.digitalClockCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.digitalClockWidth')" prop="clockWidth">
|
||||
<el-input-number v-model="form.clockWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<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">{{$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: 'ClockDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
clockWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheDigitalClockCode'), trigger: 'blur' },
|
||||
],
|
||||
clockWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheDigitalClockWidth'), trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Clock' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.clockWidth = 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 clockModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Clock',
|
||||
code: this.form.code,
|
||||
width: this.form.clockWidth,
|
||||
};
|
||||
this.$emit('createClock', clockModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const clockModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Clock',
|
||||
code: this.form.code,
|
||||
width: this.form.clockWidth,
|
||||
};
|
||||
this.$emit('deleteDataModel',clockModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
buttonColor: '',
|
||||
buttonWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "clock_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
162
src/views/system/ibpDraw/ibpOperate/ibpElevator.vue
Normal file
162
src/views/system/ibpDraw/ibpOperate/ibpElevator.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.escalatorCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorWidth')" prop="elevatorWidth">
|
||||
<el-input-number v-model="form.elevatorWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorHeight')" prop="elevatorHeight">
|
||||
<el-input-number v-model="form.elevatorHeight" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorColor')" prop="elevatorColor">
|
||||
<el-color-picker v-model="form.elevatorColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.startingDirection')" prop="direction">
|
||||
<el-select v-model="form.direction" placeholder="请选择启动方向">
|
||||
<el-option :label="this.$t('ibp.doNotStart')" value="none"></el-option>
|
||||
<el-option :label="this.$t('ibp.startUp')" value="top"></el-option>
|
||||
<el-option :label="this.$t('ibp.startDown')" value="bottom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<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">{{$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: 'ElevatorDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
elevatorWidth: '',
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorCode'), trigger: 'blur' },
|
||||
],
|
||||
elevatorWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorWidth'), trigger: 'blur' },
|
||||
],
|
||||
elevatorHeight: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorHeight'), trigger: 'blur' },
|
||||
],
|
||||
elevatorColor: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorColor'), trigger: 'change' },
|
||||
],
|
||||
direction: [
|
||||
{ required: true, message: this.$t('ibp.selectTheStartingDirection'), trigger: 'change' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Elevator' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.elevatorWidth = model.width;
|
||||
this.form.elevatorHeight = model.height;
|
||||
this.form.elevatorColor = model.fillColor;
|
||||
this.form.direction = model.direction;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const elevatorModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction,
|
||||
};
|
||||
this.$emit('createElevator', elevatorModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const elevatorModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction,
|
||||
};
|
||||
this.$emit('deleteDataModel',elevatorModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
elevatorWidth: '',
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "elevator_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
164
src/views/system/ibpDraw/ibpOperate/ibpKey.vue
Normal file
164
src/views/system/ibpDraw/ibpOperate/ibpKey.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.keyCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<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-form-item>
|
||||
<el-form-item :label="this.$t('ibp.keyDirection')" prop="status">
|
||||
<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.vertical')" value="off"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.upperText')" prop="topText">
|
||||
<el-input v-model="form.topText"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.lowerText')" prop="bottomText">
|
||||
<el-input v-model="form.bottomText"></el-input>
|
||||
</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">{{$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: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
keyWidth: '',
|
||||
status:'on',
|
||||
x: 10,
|
||||
y: 10,
|
||||
topText:'',
|
||||
bottomText:''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheKeyCode'), trigger: 'blur' },
|
||||
],
|
||||
keyWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheKeyWidth'), trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: this.$t('rules.selectTheKeyDirection'), trigger: 'change' },
|
||||
],
|
||||
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() {
|
||||
},
|
||||
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() {
|
||||
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('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:'',
|
||||
};
|
||||
},
|
||||
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>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
127
src/views/system/ibpDraw/ibpOperate/ibpLamp.vue
Normal file
127
src/views/system/ibpDraw/ibpOperate/ibpLamp.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.circularLampCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.circularLampRadius')" prop="r">
|
||||
<el-input-number v-model="form.r" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<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">{{$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: 'LampDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入按钮编号', trigger: 'blur' },
|
||||
],
|
||||
r: [
|
||||
{ required: true, message: '请输入圆形灯半径', trigger: 'blur'}
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'CircularLamp' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.r = model.r;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if(valid){
|
||||
const lampModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('createLamp', lampModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lampModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('deleteDataModel',lampModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "lamp_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
</style>
|
||||
157
src/views/system/ibpDraw/ibpOperate/ibpLine.vue
Normal file
157
src/views/system/ibpDraw/ibpOperate/ibpLine.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<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="lineWidth">
|
||||
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段颜色" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始X轴坐标">
|
||||
<el-input-number v-model="form.x1" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始Y轴坐标">
|
||||
<el-input-number v-model="form.y1" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止X轴坐标">
|
||||
<el-input-number v-model="form.x2" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止Y轴坐标">
|
||||
<el-input-number v-model="form.y2" controls-position="right" :min="0"></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: 'TextDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
lineWidth: '',
|
||||
fillColor: '#000000',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入线段编号', trigger: 'blur' },
|
||||
],
|
||||
lineWidth: [
|
||||
{ required: true, message: '请输入线段宽度', trigger: 'blur' },
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: '请输入线段颜色', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'IbpLine' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.lineWidth = model.lineWidth;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.x1 = model.point1.x;
|
||||
this.form.y1 = model.point1.y;
|
||||
this.form.x2 = model.point2.x;
|
||||
this.form.y2 = model.point2.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) =>{
|
||||
if (valid){
|
||||
const lineModel = {
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('createLine', lineModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lineModel = {
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('deleteDataModel',lineModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
lineWidth: '',
|
||||
fillColor: '',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "line_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
142
src/views/system/ibpDraw/ibpOperate/ibpRotateTip.vue
Normal file
142
src/views/system/ibpDraw/ibpOperate/ibpRotateTip.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<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="rotateTipWidth">
|
||||
<el-input-number v-model="form.rotateTipWidth" 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 label="提示颜色" prop="rotateTipColor">
|
||||
<el-select v-model="form.rotateTipColor" placeholder="请选择提示颜色">
|
||||
<el-option label="红色" value="red"></el-option>
|
||||
<el-option label="黑色" value="black"></el-option>
|
||||
</el-select>
|
||||
</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: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
rotateTipWidth: '',
|
||||
rotateTipColor: 'black',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入旋转提示编号', trigger: 'blur' },
|
||||
],
|
||||
rotateTipWidth: [
|
||||
{ required: true, message: '请输入旋转提示宽度', trigger: 'blur' },
|
||||
],
|
||||
rotateTipColor: [
|
||||
{ required: true, message: '请选择按钮颜色', trigger: 'change'}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'RotateTip' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.rotateTipWidth = model.width;
|
||||
this.form.rotateTipColor = model.color?model.color:'black';
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if(valid) {
|
||||
const rotateTipModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotateTip',
|
||||
code: this.form.code,
|
||||
width: this.form.rotateTipWidth,
|
||||
color: this.form.rotateTipColor
|
||||
};
|
||||
this.$emit('createRotateTip', rotateTipModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const rotateTipModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotateTip',
|
||||
code: this.form.code,
|
||||
width: this.form .rotateTipWidth,
|
||||
color: this.form.rotateTipColor
|
||||
};
|
||||
this.$emit('deleteDataModel',rotateTipModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
rotateTipWidth: '',
|
||||
rotateTipColor: 'black',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "rTip_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
129
src/views/system/ibpDraw/ibpOperate/ibpTelephoneTerminal.vue
Normal file
129
src/views/system/ibpDraw/ibpOperate/ibpTelephoneTerminal.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<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="terminalWidth">
|
||||
<el-input-number v-model="form.terminalWidth" 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: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入端子编号', trigger: 'blur' },
|
||||
],
|
||||
terminalWidth: [
|
||||
{ required: true, message: '请输入端子宽度', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'TeleTerminal' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.terminalWidth = model.width;
|
||||
this.form.terminalHeight = model.height;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const TerminalModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form.terminalWidth,
|
||||
};
|
||||
this.$emit('createTeleTerminal', TerminalModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const TerminalModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form .terminalWidth,
|
||||
};
|
||||
this.$emit('deleteDataModel',TerminalModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "terminal"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
220
src/views/system/ibpDraw/ibpOperate/ibpText.vue
Normal file
220
src/views/system/ibpDraw/ibpOperate/ibpText.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<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="context">
|
||||
<el-input type="textarea" v-model="form.context"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字颜色" prop="textFill">
|
||||
<el-input v-model="form.textFill"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字大小" prop="fontSize">
|
||||
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" :max="100"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字粗细" prop="fontWeight">
|
||||
<el-input-number v-model="form.fontWeight" 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 label="文字背景">-->
|
||||
<!--<el-switch v-model="form.hasRect" @change="handleChange"></el-switch>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景X轴坐标">-->
|
||||
<!--<el-input-number v-model="form.xBg" controls-position="right" :min="0"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景Y轴坐标">-->
|
||||
<!--<el-input-number v-model="form.yBg" controls-position="right" :min="0"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景宽度">-->
|
||||
<!--<el-input-number v-model="form.bgWidth" controls-position="right" :min="1"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景高度">-->
|
||||
<!--<el-input-number v-model="form.bgHeight" controls-position="right" :min="1"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景颜色" prop="elevatorColor">-->
|
||||
<!--<el-color-picker v-model="form.textBackgroundColor"></el-color-picker>-->
|
||||
<!--</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: 'TextDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
context: '',
|
||||
textFill: '',
|
||||
fontSize: '',
|
||||
fontWeight: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
// hasRect: false,
|
||||
// xBg: 10,
|
||||
// yBg: 10,
|
||||
// bgWidth: 0,
|
||||
// bgHeight: 0,
|
||||
// textBackgroundColor: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入文字编号', trigger: 'blur' },
|
||||
],
|
||||
context: [
|
||||
{ required: true, message: '请输入文字内容', trigger: 'blur' },
|
||||
],
|
||||
textFill: [
|
||||
{ required: true, message: '请输入文字颜色', trigger: 'blur' },
|
||||
],
|
||||
fontSize: [
|
||||
{ required: true, message: '请输入文字大小', trigger: 'blur' },
|
||||
],
|
||||
fontWeight: [
|
||||
{ required: true, message: '请输入文字粗细', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'IbpText' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.context = model.context;
|
||||
this.form.textFill = model.textFill;
|
||||
this.form.fontSize = model.fontSize;
|
||||
this.form.fontWeight = model.fontWeight;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
// this.form.hasRect = model.hasRect;
|
||||
// this.form.xBg = model.textRect ? model.textRect.x : 10;
|
||||
// this.form.yBg = model.textRect ? model.textRect.y : 10;
|
||||
// this.form.bgWidth = model.textRect ? model.textRect.width : 0;
|
||||
// this.form.bgHeight = model.textRect ? model.textRect.height : 0;
|
||||
// this.form.textBackgroundColor = model.textRect ? model.textRect.textBackgroundColor : '';
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const textModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpText',
|
||||
context: this.form.context,
|
||||
textFill: this.form.textFill,
|
||||
fontSize: this.form.fontSize ,
|
||||
fontWeight: this.form.fontWeight,
|
||||
fontFamily: 'consolas',
|
||||
// hasRect: this.form.hasRect,
|
||||
// textRect: this.form.hasRect ?
|
||||
// {
|
||||
// x: this.form.xBg,
|
||||
// y: this.form.yBg,
|
||||
// width: this.form.bgWidth,
|
||||
// height: this.form.bgHeight
|
||||
// }:'',
|
||||
// textBackgroundColor: this.form.hasRect?this.form.textBackgroundColor: ''
|
||||
};
|
||||
this.$emit('createText', textModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const textModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpText',
|
||||
context: this.form.context,
|
||||
textFill: this.form.textFill,
|
||||
fontSize: this.form.fontSize ,
|
||||
fontWeight: this.form.fontWeight,
|
||||
fontFamily: 'consolas',
|
||||
// hasRect: this.form.hasRect,
|
||||
// textRect: this.form.hasRect ?
|
||||
// {
|
||||
// x: this.form.xBg,
|
||||
// y: this.form.yBg,
|
||||
// width: this.form.bgWidth,
|
||||
// height: this.form.bgHeight
|
||||
// }:'',
|
||||
// textBackgroundColor: this.form.hasRect?this.form.textBackgroundColor: ''
|
||||
};
|
||||
this.$emit('deleteDataModel',textModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
context: '',
|
||||
textFill: '',
|
||||
fontSize: '',
|
||||
fontWeight: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "text_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
// handleChange(e) {
|
||||
// this.form.hasRect = e;
|
||||
// // this.form.hasRect = !this.form.hasRect;
|
||||
// console.log('-------',e,this.form.hasRect);
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.button_box{
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
178
src/views/system/ibpDraw/ibpOperate/ibpTipBox.vue
Normal file
178
src/views/system/ibpDraw/ibpOperate/ibpTipBox.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<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="tipBoxWidth">
|
||||
<el-input-number v-model="form.tipBoxWidth" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="矩形高度" prop="tipBoxHeight">
|
||||
<el-input-number v-model="form.tipBoxHeight" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="填充颜色" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="填充透明颜色">
|
||||
<el-switch v-model="opacity"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框线宽" prop="lineWidth">
|
||||
<el-input-number v-model="form.lineWidth" controls-position="right" :min="0" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="边线颜色" prop="stroke">
|
||||
<el-color-picker v-model="form.stroke"></el-color-picker>
|
||||
</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: 'TextDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
opacity: false,
|
||||
form: {
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: '#CE950F',
|
||||
x: 10,
|
||||
y: 10,
|
||||
lineWidth: 0,
|
||||
stroke: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入提示框编号', trigger: 'blur' },
|
||||
],
|
||||
tipBoxWidth: [
|
||||
{ required: true, message: '请输入提示框宽度', trigger: 'blur' },
|
||||
],
|
||||
tipBoxHeight: [
|
||||
{ required: true, message: '请输入提示框高度', trigger: 'blur' },
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: '请输入提示框颜色', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'TipBox' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.tipBoxWidth = model.width;
|
||||
this.form.tipBoxHeight = model.height;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.opacity = model.opacity;
|
||||
this.form.lineWidth = model.lineWidth;
|
||||
this.form.stroke = model.stroke;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const tipBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor,
|
||||
opacity: this.opacity,
|
||||
lineWidth: this.form.lineWidth,
|
||||
stroke: this.form.stroke
|
||||
};
|
||||
this.$emit('createTipBox', tipBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const tipBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor,
|
||||
opacity: this.opacity,
|
||||
lineWidth: this.form.lineWidth,
|
||||
stroke: this.form.stroke
|
||||
};
|
||||
this.$emit('deleteDataModel',tipBoxModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
opacity: false,
|
||||
lineWidth: 0,
|
||||
stroke: ''
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "tipBox_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.button_box{
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
232
src/views/system/ibpDraw/ibpOperate/index.vue
Normal file
232
src/views/system/ibpDraw/ibpOperate/index.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="map-control">
|
||||
<el-card type="border-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{$t('ibp.stationName')}}</span>
|
||||
<el-select v-model="stationCode" @change="changeStationCode" :placeholder="this.$t('rules.selectStation')">
|
||||
<el-option
|
||||
v-for="item in stationOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<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="this.$t('ibp.background')" name="Background">
|
||||
<ibp-bg ref="background"
|
||||
@updateBg="createDataModel" style="width:90%"
|
||||
></ibp-bg>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.line')" name="IbpLine">
|
||||
<ibp-line ref="ibpline"
|
||||
@createLine="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-line>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.text')" name="IbpText">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-text ref="ibptext"
|
||||
@createText="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-text>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.rect')" name="TipBox">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-tip-box ref="tipbox"
|
||||
@createTipBox="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
></ibp-tip-box>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.button')" name="SquareButton">
|
||||
<ibp-button ref="squarebutton"
|
||||
@createButton="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-button>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.circularLamp')" name="CircularLamp">
|
||||
<ibp-lamp ref="circularlamp"
|
||||
@createLamp="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-lamp>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.arrow')" name="Arrow">
|
||||
<ibp-arrow ref="arrow"
|
||||
@createArrow="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-arrow>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.escalatorFrame')" name="AppendageBox">
|
||||
<ibp-appendage-box ref="appendagebox"
|
||||
@createAppendageBox="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-appendage-box>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.alarm')" name="Alarm">
|
||||
<ibp-alarm ref="alarm"
|
||||
@createAlarm="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-alarm>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.telephoneTerminal')" name="TeleTerminal">
|
||||
<ibp-telephone-terminal ref="teleTerminal"
|
||||
@createTeleTerminal="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-telephone-terminal>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.escalator')" name="Elevator">
|
||||
<ibp-elevator ref="elevator"
|
||||
@createElevator="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-elevator>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.key')" name="Key">
|
||||
<ibp-key ref="key"
|
||||
@createKey="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-key>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.digitalClock')" name="Clock">
|
||||
<ibp-clock ref="clock"
|
||||
@createClock="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-clock>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.rotateTip')" name="RotateTip">
|
||||
<ibp-rotate-tip ref="rotateTip"
|
||||
@createRotateTip="createDataModel" @deleteDataModel="deleteDataModel" style="width:90%"
|
||||
>
|
||||
</ibp-rotate-tip>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { checkLoginLine } from '@/api/login';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import {deviceFactory} from '@/ibp/utils/parser';
|
||||
import deviceType from '@/ibp/constant/deviceType';
|
||||
import IbpText from './ibpText';
|
||||
import IbpTipBox from './ibpTipBox';
|
||||
import IbpButton from './ibpButton';
|
||||
import IbpBg from './ibpBg';
|
||||
import IbpAlarm from './ibpAlarm';
|
||||
import IbpAppendageBox from './ibpAppendageBox';
|
||||
import IbpArrow from './ibpArrow';
|
||||
import IbpLamp from './ibpLamp';
|
||||
import IbpLine from './ibpLine';
|
||||
import IbpTelephoneTerminal from './ibpTelephoneTerminal';
|
||||
import IbpElevator from './ibpElevator';
|
||||
import IbpKey from './ibpKey';
|
||||
import IbpClock from './ibpClock';
|
||||
import IbpRotateTip from './ibpRotateTip';
|
||||
|
||||
export default {
|
||||
name: 'IbpOperate',
|
||||
components: {
|
||||
IbpText,
|
||||
IbpBg,
|
||||
IbpButton,
|
||||
IbpTipBox,
|
||||
IbpAlarm,
|
||||
IbpAppendageBox,
|
||||
IbpArrow,
|
||||
IbpLamp,
|
||||
IbpLine,
|
||||
IbpTelephoneTerminal,
|
||||
IbpElevator,
|
||||
IbpKey,
|
||||
IbpClock,
|
||||
IbpRotateTip
|
||||
},
|
||||
mixins: [
|
||||
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'Background',
|
||||
data: '',
|
||||
stationOptions:[
|
||||
{
|
||||
value: 'Station_203_0.07533',
|
||||
// label: '通化门站'
|
||||
label: '车站一'
|
||||
},
|
||||
{
|
||||
value: 'Station_207_0.62282',
|
||||
// label: '枣园站'
|
||||
label: '车站二'
|
||||
},
|
||||
{
|
||||
value: 'Station_209_0.95175',
|
||||
label: '车站三'
|
||||
// label: '后卫寨站'
|
||||
}
|
||||
],
|
||||
stationCode: '',
|
||||
height: this.$store.state.app.height - 190
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
this.enabledTab = model._type;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
createDataModel(model) {
|
||||
const newModel = deviceFactory(model._type, model);
|
||||
this.$store.dispatch('ibp/updateIbpDevices', newModel.model);
|
||||
},
|
||||
deleteDataModel(model) {
|
||||
this.$store.dispatch('ibp/deleteIbpDevices', model);
|
||||
},
|
||||
handleSave() {
|
||||
const data = JSON.stringify(this.$store.state.ibp.ibp);
|
||||
console.log(data);
|
||||
},
|
||||
changeStationCode(e) {
|
||||
this.$emit('ibpChange',e);
|
||||
this.handleTabClick();
|
||||
},
|
||||
handleTabClick() {
|
||||
this.$refs.ibpline.initPage();
|
||||
this.$refs.ibptext.initPage();
|
||||
this.$refs.tipbox.initPage();
|
||||
this.$refs.squarebutton.initPage();
|
||||
this.$refs.circularlamp.initPage();
|
||||
this.$refs.arrow.initPage();
|
||||
this.$refs.appendagebox.initPage();
|
||||
this.$refs.alarm.initPage();
|
||||
this.$refs.elevator.initPage();
|
||||
this.$refs.key.initPage();
|
||||
this.$refs.teleTerminal.initPage();
|
||||
this.$refs.clock.initPage();
|
||||
this.$refs.rotateTip.initPage();
|
||||
this.$refs.background.initPage();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.map-control {
|
||||
float: right;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
82
src/views/system/ibpDraw/index.vue
Normal file
82
src/views/system/ibpDraw/index.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<ibp-plate ref="ibpPlate" :size="size" />
|
||||
</div>
|
||||
<div class="map-draft">
|
||||
<ibp-operate ref="ibpOperate" @ibpChange="ibpChange" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import IbpPlate from '@/views/ibpsystem/index';
|
||||
import IbpOperate from './ibpOperate/index';
|
||||
|
||||
export default {
|
||||
name: 'IbpView',
|
||||
components: {
|
||||
IbpPlate,
|
||||
IbpOperate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
size: {
|
||||
width: this.$store.state.app.width - 521,
|
||||
height: this.$store.state.app.height - 60
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.ibpPlate.show();
|
||||
this.$refs.ibpPlate.drawIbpInit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
ibpChange(stationCode) {
|
||||
this.$refs.ibpPlate.show(stationCode);
|
||||
this.$refs.ibpPlate.drawIbpInit();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.map-draft{
|
||||
/deep/{
|
||||
.v-modal{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-view {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.map-draft {
|
||||
float: right;
|
||||
width: 520px;
|
||||
|
||||
// /deep/ .el-scrollbar__view {
|
||||
// width: 510px !important;
|
||||
// height: calc(100% - 40px);
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
146
src/views/system/systemGenerate/create.vue
Normal file
146
src/views/system/systemGenerate/create.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="doClose" center>
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doCreate">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
import { listPublishMap } from '@/api/jmap/map';
|
||||
import { getCommodityMapProduct } from '@/api/management/mapprd';
|
||||
export default {
|
||||
name: 'OnceGenerate',
|
||||
props: {
|
||||
title: String,
|
||||
operateType:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
mapList: [],
|
||||
disabled:null,
|
||||
productList:[],
|
||||
mapInfoList:[],
|
||||
projectList:[],
|
||||
typeList:[],
|
||||
formModel:{
|
||||
mapId:'',
|
||||
name: '',
|
||||
prdCode: '',
|
||||
type: '',
|
||||
id:null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
let form = {};
|
||||
if (this.operateType == 'add') {
|
||||
form = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop: 'customized', label: this.$t('systemGenerate.customized'), type: 'select', required: true, options: this.projectList},
|
||||
{ prop: 'mapId', label: this.$t('systemGenerate.mapName'), type: 'select', required: true, options: this.mapList, change:true, onChange:this.changeMap},
|
||||
{ prop: 'prdCode', label: this.$t('systemGenerate.prdName'), type: 'select', required: true, options:this.productList},
|
||||
{ prop: 'name', label: this.$t('systemGenerate.name'), type: 'text', required: true},
|
||||
{ prop: 'type', label: this.$t('systemGenerate.type'), type: 'select', required: true, options: this.typeList}
|
||||
]
|
||||
};
|
||||
} else {
|
||||
form = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop: 'name', label: this.$t('systemGenerate.name'), type: 'text', required: true}
|
||||
]
|
||||
};
|
||||
}
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
let crules = {};
|
||||
if (this.operateType == 'add') {
|
||||
crules = {customized:[
|
||||
{ required: true, message: this.$t('systemGenerate.selectProject'), trigger: 'change'}
|
||||
],
|
||||
mapId:[
|
||||
{ required: true, message: this.$t('systemGenerate.selectMap'), trigger: 'change'}
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('systemGenerate.inputName'), trigger: 'blur' },
|
||||
{ required: true, message: this.$t('systemGenerate.inputName'), trigger: 'change' }
|
||||
],
|
||||
type:[
|
||||
{ required: true, message: this.$t('systemGenerate.selectType'), trigger: 'change'}
|
||||
],
|
||||
prdCode:[
|
||||
{ required: true, message: this.$t('systemGenerate.selectPrdName'), trigger: 'change'}
|
||||
]
|
||||
};
|
||||
} else {
|
||||
crules = {
|
||||
name: [
|
||||
{ required: true, message: this.$t('systemGenerate.inputName'), trigger: 'blur' },
|
||||
{ required: true, message: this.$t('systemGenerate.inputName'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
}
|
||||
return crules;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods:{
|
||||
loadInitData() {
|
||||
this.projectList = [{value:'xty', label:'西铁院'}];
|
||||
const customeredProductType = ConstConfig.ConstSelect.customeredProductType;
|
||||
this.typeList = Cookies.get('user_lang') == 'en'
|
||||
? customeredProductType.map(elem => { return { value: elem.value, label: elem.enlabel }; })
|
||||
: customeredProductType.map(elem => { return { value: elem.value, label: elem.label }; });
|
||||
listPublishMap().then(response => {
|
||||
this.mapInfoList = response.data;
|
||||
this.mapList = response.data.map(elem => { return { value: elem.id, label: elem.name }; });
|
||||
});
|
||||
},
|
||||
changeMap(index) {
|
||||
this.productList = [];
|
||||
getCommodityMapProduct(index).then((response) => {
|
||||
this.productList = response.data.map(elem => { return { value: elem.code, label: elem.name }; });
|
||||
this.formModel.prdCode = '';
|
||||
});
|
||||
},
|
||||
doShow(data) {
|
||||
if (data) {
|
||||
this.formModel.name = data.name;
|
||||
this.formModel.id = data.id;
|
||||
}
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doCreate() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.$emit('create', Object.assign({}, this.formModel));
|
||||
self.doClose();
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.$refs.dataform.resetForm();
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-dialog--center .el-dialog__body{
|
||||
padding: 25px 55px 20px 20px;
|
||||
}
|
||||
/deep/ .el-dialog--center .el-dialog__body .el-input{
|
||||
width:200px !important;
|
||||
}
|
||||
</style>
|
||||
75
src/views/system/systemGenerate/generate.vue
Normal file
75
src/views/system/systemGenerate/generate.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="doClose" center>
|
||||
<data-form ref="dataform" :form="form" :formModel="formModel" :rules="rules"></data-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doCreate">{{$t('global.confirm')}}</el-button>
|
||||
<el-button @click="doClose">{{$t('global.cancel')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listPublishMap } from '@/api/jmap/map'
|
||||
export default {
|
||||
name: 'OnceGenerate',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
mapList: [],
|
||||
formModel:{
|
||||
mapId:'',
|
||||
},
|
||||
title: this.$t('systemGenerate.generation')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitData();
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
let form={
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop: 'mapId', label: this.$t('systemGenerate.mapName'), type: 'select', required: true,options: this.mapList},
|
||||
]
|
||||
}
|
||||
return form
|
||||
},
|
||||
rules() {
|
||||
let crules ={
|
||||
mapId:[
|
||||
{ required: true, message: this.$t('systemGenerate.selectMap'), trigger: 'change'},
|
||||
]
|
||||
}
|
||||
return crules
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadInitData() {
|
||||
listPublishMap().then(response => {
|
||||
this.mapList = response.data.map(elem => { return { value: elem.id, label: elem.name } });
|
||||
})
|
||||
},
|
||||
doShow() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
doCreate() {
|
||||
let self = this
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.$emit('create', Object.assign({}, this.formModel));
|
||||
self.doClose()
|
||||
})
|
||||
},
|
||||
doClose() {
|
||||
this.$refs.dataform.resetForm();
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-dialog--center .el-dialog__body{
|
||||
padding: 25px 55px 20px 30px;
|
||||
}
|
||||
</style>
|
||||
200
src/views/system/systemGenerate/index.vue
Normal file
200
src/views/system/systemGenerate/index.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<QueryListPage ref="subSystemListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<once-generate ref="generate" @create="generateMapSystem" />
|
||||
<createMapSystem ref="createMapSystem" :title="$t('systemGenerate.createSubSystem')" operate-type="add" @create="handleCreate" />
|
||||
<createMapSystem ref="modifyMapSystem" :title="$t('systemGenerate.modifySubSystem')" operate-type="modify" @create="handleModify" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from 'js-cookie';
|
||||
import { listPublishMap } from '@/api/jmap/map';
|
||||
import { generateMapSystem, getMapSystemPageList, createMapSubSystem, getSubSystemInfo, updateSubSystem, deleteSubSystem} from '@/api/trainingPlatform';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import OnceGenerate from './generate';
|
||||
import createMapSystem from './create';
|
||||
|
||||
export default {
|
||||
name: 'SystemGenerate',
|
||||
components: {
|
||||
OnceGenerate,
|
||||
createMapSystem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prdTypeList: [],
|
||||
mapId: '',
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '100px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
mapId: {
|
||||
type: 'select',
|
||||
label: this.$t('systemGenerate.map'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
'name': {
|
||||
type: 'text',
|
||||
label: this.$t('systemGenerate.name')
|
||||
},
|
||||
'type': {
|
||||
type: 'select',
|
||||
label: this.$t('systemGenerate.type'),
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('systemGenerate.name'),
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: this.$t('systemGenerate.type'),
|
||||
type: 'tag',
|
||||
prop: 'type',
|
||||
columnValue: (row) => { return this.$convertField(row.type, this.prdTypeList, ['value', 'label']); },
|
||||
tagType: (row) => { return ''; }
|
||||
},
|
||||
{
|
||||
title: this.$t('systemGenerate.mapName'),
|
||||
type: 'tag',
|
||||
prop: 'mapName',
|
||||
columnValue: (row) => { return row.mapName; },
|
||||
tagType: (row) => { return ''; }
|
||||
},
|
||||
{
|
||||
title: this.$t('systemGenerate.prdName'),
|
||||
prop: 'prdName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '400',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('systemGenerate.updateData'),
|
||||
handleClick: this.updateData,
|
||||
type: ''
|
||||
},
|
||||
{
|
||||
name: this.$t('systemGenerate.deleteData'),
|
||||
handleClick: this.deleteData,
|
||||
type: 'danger',
|
||||
showControl: (row) => { return Boolean(row.customized); }
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{ text: this.$t('systemGenerate.commission'), handler: this.handleAdd },
|
||||
{ text: this.$t('systemGenerate.generate'), handler: this.generate }
|
||||
]
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
height() {
|
||||
return this.$store.state.app.height - 50;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
updateData(index, row) {
|
||||
getSubSystemInfo(row.id).then(response => {
|
||||
this.$refs.modifyMapSystem.doShow(response.data);
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('systemGenerate.getSubSystemInfoFail'));
|
||||
});
|
||||
},
|
||||
deleteData(index, row) {
|
||||
this.$confirm(this.$t('systemGenerate.deleteMapSystemTip'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteSubSystem(row.id).then(response => {
|
||||
this.$message.success(this.$t('systemGenerate.deleteMapSystemSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('systemGenerate.deleteMapSystemFail'));
|
||||
});
|
||||
}).catch(() => { });
|
||||
},
|
||||
handleCreate(data) {
|
||||
delete data.id;
|
||||
createMapSubSystem(data).then(response => {
|
||||
this.$message.success(this.$t('systemGenerate.createMapSystemSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('systemGenerate.createMapSystemFail'));
|
||||
});
|
||||
},
|
||||
handleModify(data) {
|
||||
const datainfo={'name': data.name};
|
||||
updateSubSystem(data.id, datainfo).then(response => {
|
||||
this.$message.success(this.$t('systemGenerate.updateMapSystemSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('systemGenerate.updateMapSystemFail'));
|
||||
});
|
||||
},
|
||||
handleAdd() {
|
||||
this.$refs.createMapSystem.doShow();
|
||||
},
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
},
|
||||
async loadInitData() {
|
||||
try {
|
||||
// 获取地图
|
||||
this.mapList = [];
|
||||
const res = await listPublishMap();
|
||||
this.allMapList=res.data;
|
||||
res.data.forEach(elem => {
|
||||
this.queryForm.queryObject.mapId.config.data.push({ value: elem.id, label: elem.name });
|
||||
});
|
||||
const productTypeList=ConstConfig.ConstSelect.productType;
|
||||
this.prdTypeList=Cookies.get('user_lang')=='en'
|
||||
?productTypeList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
|
||||
:productTypeList.map(elem => { return { value: elem.value, label: elem.label }; });
|
||||
this.queryForm.queryObject.type.config.data=this.prdTypeList;
|
||||
} catch (error) {
|
||||
console.error(error, '获取发布地图');
|
||||
}
|
||||
},
|
||||
generate() {
|
||||
this.$refs.generate.doShow();
|
||||
},
|
||||
generateMapSystem(data) {
|
||||
generateMapSystem(data.mapId).then(response => {
|
||||
this.reloadTable();
|
||||
this.$message.success(this.$t('systemGenerate.generateSuccess'));
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('systemGenerate.generateFail'));
|
||||
});
|
||||
},
|
||||
queryFunction(params) {
|
||||
return getMapSystemPageList(params);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
308
src/views/system/trainingrecord/category/draft.vue
Normal file
308
src/views/system/trainingrecord/category/draft.vue
Normal file
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="operation.title" :visible.sync="dialogShow" width="30%" :before-close="close">
|
||||
<el-form ref="form" :model="operateModel" label-width="120px" :rules="rules" size="mini">
|
||||
<el-form-item :label="this.$t('lesson.trainingName')+':'" prop="name">
|
||||
<el-input v-model="operateModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.productType')" prop="prdCode">
|
||||
<el-select v-model="operateModel.prdCode" placeholder="" :disabled="true">
|
||||
<el-option
|
||||
v-for="option in productTypesList"
|
||||
:key="option.code"
|
||||
:label="option.name"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.trainingType')+':'" prop="type">
|
||||
<el-select v-model="operateModel.type" placeholder="" :disabled="true">
|
||||
<el-option
|
||||
v-for="option in trainTypesList"
|
||||
:key="option.code"
|
||||
:label="option.name"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.operationType')+':'">
|
||||
<el-select v-model="operateModel.operateType">
|
||||
<el-option
|
||||
v-for="(option, index) in operationList"
|
||||
:key="index"
|
||||
:label="option.name"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.minTime')" prop="minDuration">
|
||||
<el-input-number v-model="operateModel.minDuration" :min="0" :max="10000" />s
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.maxTime')" prop="maxDuration">
|
||||
<el-input-number v-model="operateModel.maxDuration" :min="0" :max="10000" />s
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.trainingDescription')" prop="remarks">
|
||||
<el-input
|
||||
v-model="operateModel.remarks"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 4}"
|
||||
:placeholder="this.$t('rules.pleaseEnterContent')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleDeal">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addTraining, updateTraining, getTrainingDetail } from '@/api/jmap/training';
|
||||
import localStore from 'storejs';
|
||||
|
||||
export default {
|
||||
name: 'TreeDraft',
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
var minDurations = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error(this.$t('rules.enterStandardTime')));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error(this.$t('rules.enterNumericValue')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
var maxDurations = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error(this.$t('rules.enterStandardTime')));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error(this.$t('rules.enterNumericValue')));
|
||||
} else {
|
||||
if (value < this.operateModel.minDuration) {
|
||||
callback(new Error(this.$t('rules.greaterThanMinTime')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
return {
|
||||
dialogShow: false,
|
||||
productTypesList: [],
|
||||
trainTypesList: [],
|
||||
operationList: [],
|
||||
trainingOperateTypeMap: {},
|
||||
operation: {
|
||||
title: '',
|
||||
event: ''
|
||||
},
|
||||
operateModel: {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
prdCode: '',
|
||||
skinCode: '',
|
||||
operateType: '',
|
||||
maxDuration: 0,
|
||||
minDuration: 0,
|
||||
remarks: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.inputTrainingName'), trigger: 'change' }
|
||||
],
|
||||
minDuration: [
|
||||
{ required: true, validator: minDurations, trigger: 'blur' }
|
||||
],
|
||||
maxDuration: [
|
||||
{ required: true, validator: maxDurations, trigger: 'blur' }
|
||||
],
|
||||
remarks: [
|
||||
{ required: true, message: this.$t('rules.inputTrainingRemark'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
node: function (val, old) {
|
||||
this.initLoadData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$Dictionary.trainingType().then(list => {
|
||||
this.trainTypesList = list;
|
||||
});
|
||||
this.operationList = [];
|
||||
this.$Dictionary.stationControl().then(list => {
|
||||
this.trainingOperateTypeMap['01'] = list; // 控制权实训
|
||||
});
|
||||
this.$Dictionary.signalOperation().then(list => {
|
||||
this.trainingOperateTypeMap['02'] = list; // 信号机实训
|
||||
});
|
||||
this.$Dictionary.switchOperation().then(list => {
|
||||
this.trainingOperateTypeMap['03'] = list; // 道岔实训
|
||||
});
|
||||
this.$Dictionary.sectionOperation().then(list => {
|
||||
this.trainingOperateTypeMap['04'] = list; // 区段实训
|
||||
});
|
||||
this.$Dictionary.stationStandOperation().then(list => {
|
||||
this.trainingOperateTypeMap['05'] = list; // 站台实训
|
||||
});
|
||||
this.$Dictionary.trainPlanOperation().then(list => {
|
||||
this.trainingOperateTypeMap['06'] = list; // 行车计划实训
|
||||
});
|
||||
this.$Dictionary.trainOperation().then(list => {
|
||||
this.trainingOperateTypeMap['07'] = list; // 列车实训
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initLoadData() {
|
||||
const node = this.node;
|
||||
if (this.$refs && this.$refs.form) {
|
||||
this.$refs['form'].resetFields();
|
||||
}
|
||||
if (node && node.data) {
|
||||
switch (node.data.type) {
|
||||
case 'TrainingType':
|
||||
if (node.parent) {
|
||||
this.operateModel.type = node.data.id;
|
||||
this.operateModel.prdCode = node.parent.data.id;
|
||||
this.operateModel.skinCode = node.parent.parent.data.id;
|
||||
this.productTypesList = [{
|
||||
code: node.parent.data.id,
|
||||
name: node.parent.data.name
|
||||
}];
|
||||
|
||||
}
|
||||
|
||||
this.operateModel.id = '';
|
||||
this.operateModel.name = '';
|
||||
this.operateModel.minDuration = '';
|
||||
this.operateModel.maxDuration = '';
|
||||
this.operateModel.remarks = '';
|
||||
this.operateModel.operateType = '';
|
||||
this.operationList = this.trainingOperateTypeMap[node.data.id] || [];
|
||||
break;
|
||||
case 'Training':
|
||||
if (node.parent && node.parent.parent) {
|
||||
this.operateModel.type = node.parent.data.id;
|
||||
this.operateModel.prdCode = node.parent.parent.data.id;
|
||||
this.operateModel.skinCode = node.parent.parent.parent.data.id;
|
||||
this.operationList = this.trainingOperateTypeMap[node.parent.data.id] || [];
|
||||
this.productTypesList = [{
|
||||
code: node.parent.parent.data.id,
|
||||
name: node.parent.parent.data.name
|
||||
}];
|
||||
}
|
||||
|
||||
this.operateModel.id = node.data.id;
|
||||
this.operateModel.name = node.data.name;
|
||||
getTrainingDetail(node.data.id).then(response => {
|
||||
this.operateModel.minDuration = response.data.minDuration;
|
||||
this.operateModel.maxDuration = response.data.maxDuration;
|
||||
this.operateModel.operateType = response.data.operateType;
|
||||
this.operateModel.remarks = response.data.remarks;
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('error.obtainStepDataFailed'));
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
show(data) {
|
||||
this.operation = data;
|
||||
this.initLoadData();
|
||||
this.dialogShow = true;
|
||||
},
|
||||
close() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
handleDeal() {
|
||||
const operation = this.operation;
|
||||
if (operation) {
|
||||
const event = operation.event;
|
||||
switch (event) {
|
||||
case '01': this.addTraining(); break;
|
||||
case '02': this.edtTraining(); break;
|
||||
}
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogShow = false;
|
||||
this.operateModel = {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
prdCode: '',
|
||||
skinCode: '',
|
||||
operateType: '',
|
||||
maxDuration: 0,
|
||||
minDuration: 0,
|
||||
remarks: ''
|
||||
};
|
||||
this.$refs['form'].resetFields();
|
||||
},
|
||||
addTraining() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
name: this.operateModel.name,
|
||||
type: this.operateModel.type,
|
||||
prdCode: this.operateModel.prdCode,
|
||||
skinCode: this.operateModel.skinCode,
|
||||
operateType: this.operateModel.operateType,
|
||||
minDuration: this.operateModel.minDuration,
|
||||
maxDuration: this.operateModel.maxDuration,
|
||||
remarks: this.operateModel.remarks
|
||||
};
|
||||
addTraining(data).then(response => {
|
||||
this.$emit('refresh', [localStore.get('cityCode') || '', localStore.get('skinCode') || '']);
|
||||
this.close();
|
||||
this.$message.success(this.$t('tip.addTrainingSuccessfully'));
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.addTrainingFailed'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
edtTraining() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
id: this.operateModel.id,
|
||||
name: this.operateModel.name,
|
||||
type: this.operateModel.type,
|
||||
prdCode: this.operateModel.prdCode,
|
||||
skinCode: this.operateModel.skinCode,
|
||||
operateType: this.operateModel.operateType,
|
||||
minDuration: this.operateModel.minDuration,
|
||||
maxDuration: this.operateModel.maxDuration,
|
||||
remarks: this.operateModel.remarks
|
||||
};
|
||||
updateTraining(data).then(response => {
|
||||
this.$emit('refresh', [localStore.get('cityCode') || '', localStore.get('skinCode') || '']);
|
||||
this.close();
|
||||
this.$message.success(this.$t('tip.updateTrainingSuccessfully'));
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('tip.updateTrainingFailed'));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
125
src/views/system/trainingrecord/category/operateMenu.vue
Normal file
125
src/views/system/trainingrecord/category/operateMenu.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<pop-menu ref="popMenu" :menu="menu" />
|
||||
<training-draft ref="draft" :node="node" @refresh="refresh" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import PopMenu from '@/components/PopMenu';
|
||||
import TrainingDraft from './draft';
|
||||
|
||||
export default {
|
||||
name: 'TrainingOperateMenu',
|
||||
components: {
|
||||
PopMenu,
|
||||
TrainingDraft
|
||||
},
|
||||
props: {
|
||||
point: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuShow: false,
|
||||
menu: [],
|
||||
menuCreate: [
|
||||
{
|
||||
label: this.$t('lesson.addTraining'),
|
||||
handler: this.addTrainging
|
||||
}
|
||||
],
|
||||
menuEdit: [
|
||||
{
|
||||
label: this.$t('lesson.editTraining'),
|
||||
handler: this.edtTrainging
|
||||
},
|
||||
{
|
||||
label: this.$t('lesson.demonstration'),
|
||||
handler: this.startTraining
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
node: function (val, old) {
|
||||
if (val && val.data) {
|
||||
switch (val.data.type) {
|
||||
case 'TrainingType':
|
||||
this.menu = this.menuCreate;
|
||||
break;
|
||||
case 'Training':
|
||||
this.menu = this.menuEdit;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Training)) {
|
||||
this.doShow(this.$store.state.menuOperation.menuPosition);
|
||||
} else {
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.closeEvent();
|
||||
},
|
||||
methods: {
|
||||
closeEvent() {
|
||||
const self = this;
|
||||
window.onclick = function (e) {
|
||||
self.doClose();
|
||||
};
|
||||
},
|
||||
doShow(point) {
|
||||
this.closeEvent();
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.resetShowPosition(point);
|
||||
}
|
||||
this.menuShow = true;
|
||||
},
|
||||
doClose() {
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.close();
|
||||
}
|
||||
this.menuShow = false;
|
||||
},
|
||||
addTrainging() {
|
||||
this.$refs.draft.show({ event: '01', title: this.$t('lesson.addTraining') });
|
||||
},
|
||||
edtTrainging() {
|
||||
this.$refs.draft.show({ event: '02', title: this.$t('lesson.editTraining') });
|
||||
},
|
||||
delTrainging() {
|
||||
this.$confirm(this.$t('lesson.isConfirmDelete'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
}).catch(() => {
|
||||
this.$message.info({ message: this.$t('lesson.hasCalcelDelete') });
|
||||
});
|
||||
},
|
||||
startTraining() {
|
||||
this.$emit('trainingShow');
|
||||
this.doClose();
|
||||
setTimeout(() => {
|
||||
launchFullscreen();
|
||||
}, 0);
|
||||
},
|
||||
refresh(filterSelect) {
|
||||
this.$emit('refresh', filterSelect);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
145
src/views/system/trainingrecord/category/tree.vue
Normal file
145
src/views/system/trainingrecord/category/tree.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<el-card v-loading="loading" class="map-list-main">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ $t(`lesson.trainingList`) }}</span>
|
||||
</div>
|
||||
<el-input v-model="filterText" :placeholder="$t(`lesson.filterPlaceholder`)" clearable />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-60) +'px' }">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:default-expanded-keys="defaultShowKeys"
|
||||
:filter-node-method="filterNode"
|
||||
expand-on-click-node
|
||||
highlight-current
|
||||
:span="22"
|
||||
@node-contextmenu="showContextMenu"
|
||||
@node-click="clickEvent"
|
||||
>
|
||||
<div slot-scope="{ node: nodeScop }">
|
||||
<span v-if="nodeScop.data.type == 'skin'" class="el-icon-news" />
|
||||
<span v-else-if="nodeScop.data.type == 'prd'" class="el-icon-tickets" />
|
||||
<span
|
||||
v-else-if="nodeScop.data.type == 'trainingType'"
|
||||
class="el-icon-document"
|
||||
/>
|
||||
<span
|
||||
v-else-if="nodeScop.data.type == 'training'"
|
||||
class="el-icon-edit-outline"
|
||||
/>
|
||||
<span> {{ nodeScop.label }}</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
<operate-menu ref="menu" :point="point" :node="node" @refresh="refresh" @trainingShow="trainingShow" />
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { getTrainingTree } from '@/api/jmap/training';
|
||||
import OperateMenu from './operateMenu';
|
||||
|
||||
// 实训录制左侧 数据树
|
||||
export default {
|
||||
name: 'TrainingOperate',
|
||||
components: {
|
||||
OperateMenu
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
defaultShowKeys: [],
|
||||
filterText: '',
|
||||
treeData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
node: {
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.refresh();
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
clickEvent(obj, node, data) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
||||
if (obj && obj.type === 'Training') {
|
||||
this.$emit('selectMapSure', obj);
|
||||
}
|
||||
},
|
||||
showContextMenu(e, obj, node, vueElem) {
|
||||
|
||||
if (obj && obj.type === 'TrainingType' || obj.type === 'Training') {
|
||||
e.preventDefault();
|
||||
this.point = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
this.node = node;
|
||||
const menu = DeviceMenu.Training;
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
||||
}
|
||||
},
|
||||
getParent(node) {
|
||||
while (node && node.data.type != 'Skin') {
|
||||
node = node.parent;
|
||||
}
|
||||
|
||||
return node || {};
|
||||
},
|
||||
trainingShow() {
|
||||
this.$emit('trainingStart', { id: this.node.data.id, lessonId: this.getParent(this.node).data.id });
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true;
|
||||
getTrainingTree().then(response => {
|
||||
this.treeData = response.data;
|
||||
this.defaultShowKeys = [this.$route.params.trainingId];
|
||||
this.$nextTick(() => {
|
||||
this.loading = false;
|
||||
this.$refs.tree.setCurrentKey(this.$route.params.trainingId); // value 绑定的node-key
|
||||
if (this.filterText) {
|
||||
this.$refs.tree.filter(this.filterText);
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.$messageBox(this.$t('error.refreshFailed'));
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-tree {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #e4e3e3 !important;
|
||||
}
|
||||
</style>
|
||||
103
src/views/system/trainingrecord/index.vue
Normal file
103
src/views/system/trainingrecord/index.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="mapList" :style="{width: widthLeft+'px'}">
|
||||
<training-category
|
||||
ref="trainingCategory"
|
||||
:height="height"
|
||||
@selectMapSure="selectMapSure"
|
||||
@trainingStart="trainingStart"
|
||||
/>
|
||||
</div>
|
||||
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { trainingNotify, runDiagramQuit } from '@/api/simulation';
|
||||
import TrainingCategory from './category/tree';
|
||||
import localStore from 'storejs';
|
||||
import drapLeft from '@/views/components/drapLeft/index';
|
||||
|
||||
export default {
|
||||
name: 'TrainingDraft',
|
||||
components: {
|
||||
TrainingCategory,
|
||||
drapLeft
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
widthLeft: localStore.get('LeftWidth') ? Number(localStore.get('LeftWidth')) : 320,
|
||||
trainingObj: null,
|
||||
group: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
return this.$store.state.app.width - 481 - this.widthLeft;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 90;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.resize();
|
||||
},
|
||||
widthLeft(val) {
|
||||
this.resize(val);
|
||||
},
|
||||
$route() {
|
||||
this.resize();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.resize();
|
||||
},
|
||||
async beforeDestroy() {
|
||||
if (this.group) {
|
||||
runDiagramQuit(this.group);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectMapSure(data) {
|
||||
trainingNotify({ trainingId: data.id }).then(resp => {
|
||||
this.group = resp.data;
|
||||
this.$router.push({ path: `${UrlConfig.lesson.record}/${data.id}/${data.name}`, query: { group: resp.data } });
|
||||
}).catch(error => {
|
||||
this.$messageBox(`${this.$t('error.createSimulationFailed')}: ${error.message}`);
|
||||
});
|
||||
},
|
||||
trainingStart(data) {
|
||||
/** 区分演示和正式，需要在演示时设置lessonId为0*/
|
||||
trainingNotify({ trainingId: data.id }).then(resp => {
|
||||
this.$router.push({ path: `${UrlConfig.display}/record`, query: { trainingId: this.$route.params.trainingId, trainingName: this.$route.params.trainingName, group: resp.data, lessonId: 0 } });
|
||||
}).catch(error => {
|
||||
this.$messageBox(`${this.$t('error.createSimulationFailed')}: ${error.message}`);
|
||||
});
|
||||
},
|
||||
drapWidth(width) {
|
||||
this.widthLeft = Number(width);
|
||||
},
|
||||
resize() {
|
||||
this.$store.dispatch('config/resize', { width: this.width, height: this.height });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.main {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.mapList {
|
||||
float: left;
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
84
src/views/system/userControl/correlationMap.vue
Normal file
84
src/views/system/userControl/correlationMap.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :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>
|
||||
108
src/views/system/userControl/edit.vue
Normal file
108
src/views/system/userControl/edit.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="$t('system.editUserPermission')" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { putRoles } from '@/api/management/user';
|
||||
|
||||
export default {
|
||||
name: 'DictionaryEdit',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
id: '',
|
||||
name: '',
|
||||
// nickname: '',
|
||||
// mobile: '',
|
||||
// email: '',
|
||||
roles: []
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '100px',
|
||||
items: [
|
||||
{ prop: 'name', label: this.$t('system.name'), type: 'text', disabled: true },
|
||||
// { prop: 'nickname', label: '昵称', type: 'text' },
|
||||
// { prop: 'mobile', label: '电话', type: 'number' },
|
||||
// { prop: 'email', label: '邮箱', type: 'text' },
|
||||
{ prop: 'roles', label: this.$t('system.permission'), type: 'select', required: true, options: this.$ConstSelect.roleList, multiple: true }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseInputName'), trigger: 'blur' },
|
||||
{ min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' }
|
||||
],
|
||||
roles: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectPermission'), trigger: 'change' }
|
||||
]
|
||||
// nickname: [
|
||||
// { required: true, message: this.$t('rules.pleaseInputNickName'), trigger: 'blur' },
|
||||
// { min: 1, max: 25, message: this.$t('rules.strLength1To25'), trigger: 'blur' }
|
||||
// ],
|
||||
// mobile: [
|
||||
// { required: true, message: this.$t('rules.pleaseSelectStatus'), trigger: 'blur' }
|
||||
// ]
|
||||
};
|
||||
return crules;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow(data) {
|
||||
this.dialogVisible = true;
|
||||
if (data) {
|
||||
this.formModel = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
// nickname: data.nickname,
|
||||
// mobile: data.mobile,
|
||||
// email: data.email,
|
||||
roles: data.roles
|
||||
};
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.update();
|
||||
});
|
||||
},
|
||||
update() {
|
||||
const self = this;
|
||||
putRoles(this.formModel).then(response => {
|
||||
self.$message.success(this.$t('system.updateSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`${this.$t('error.updateFailed')}: ${error.message}`);
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
id: '',
|
||||
name: '',
|
||||
roles: []
|
||||
};
|
||||
this.$refs.dataform.resetForm();
|
||||
if (done) {
|
||||
done();
|
||||
} else {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
129
src/views/system/userControl/index.vue
Normal file
129
src/views/system/userControl/index.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<dictionary-edit ref="edit" @reloadTable="reloadTable" />
|
||||
<correlation-map ref="correlationMap" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserList } from '@/api/management/user';
|
||||
import DictionaryEdit from './edit';
|
||||
import CorrelationMap from './correlationMap';
|
||||
|
||||
export default {
|
||||
name: 'UserControl',
|
||||
components: {
|
||||
DictionaryEdit,
|
||||
CorrelationMap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '80px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
name: {
|
||||
type: 'text',
|
||||
label: this.$t('system.name')
|
||||
},
|
||||
roles: {
|
||||
type: 'select',
|
||||
label: this.$t('system.roles'),
|
||||
config: {
|
||||
data: this.$ConstSelect.roleList
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: getUserList,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('system.name'),
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.nickname'),
|
||||
prop: 'nickname'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.mobile'),
|
||||
prop: 'mobile'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.email'),
|
||||
prop: 'email'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.roles'),
|
||||
prop: 'roles',
|
||||
type: 'tagMore',
|
||||
columnValue: (row) => { return this.$convertField(row.roles, this.$ConstSelect.roleList, ['value', 'label'], true); },
|
||||
tagType: (row) => { return 'success'; }
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('global.edit'),
|
||||
handleClick: this.handleUserEdit
|
||||
},
|
||||
{
|
||||
name: this.$t('system.subscribeMap'),
|
||||
handleClick: this.handleMapCorrelation,
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 编辑
|
||||
handleUserEdit(index, row) {
|
||||
this.$refs.edit.doShow(row);
|
||||
},
|
||||
|
||||
// 删除
|
||||
handleUserDelete(index, row) {
|
||||
this.$confirm(this.$t('system.wellDelType'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// delPublishMap(row.id).then(response => {
|
||||
// this.$message.success('删除成功')
|
||||
// this.reloadTable()
|
||||
// localStore.remove('mapId')
|
||||
// }).catch(error => {
|
||||
// this.reloadTable()
|
||||
// this.$messageBox('删除失败')
|
||||
// })
|
||||
});
|
||||
},
|
||||
|
||||
// 关联地图
|
||||
handleMapCorrelation(index, row) {
|
||||
this.$refs.correlationMap.doShow(row);
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
105
src/views/system/userExam/edit.vue
Normal file
105
src/views/system/userExam/edit.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateExam } from '@/api/management/userexam';
|
||||
|
||||
export default {
|
||||
name: 'PublishExamEdit',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
id: '',
|
||||
userName: '',
|
||||
score: '',
|
||||
examName: '',
|
||||
result: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '160px',
|
||||
items: [
|
||||
{ prop: 'userName', label: this.$t('system.userName'), type: 'text', required: false, disabled: true },
|
||||
{ prop: 'examName', label: this.$t('system.examName'), type: 'text', required: true, disabled: true },
|
||||
{ prop: 'score', label: this.$t('system.examScore'), type: 'text', required: true },
|
||||
{ prop: 'result', label: this.$t('system.examResult'), type: 'select', required: true, options: this.$ConstSelect.examResultList }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
score: [
|
||||
{ required: true, message: this.$t('rules.pleaseInputName'), trigger: 'blur' }
|
||||
],
|
||||
result: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectStatus'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
},
|
||||
title() {
|
||||
return this.$t('system.editExamDetail');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(data) {
|
||||
this.dialogVisible = true;
|
||||
this.formModel = {
|
||||
id: data.id,
|
||||
userName: data.userName,
|
||||
score: data.score,
|
||||
examName: data.examName,
|
||||
result: data.result
|
||||
};
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.update();
|
||||
});
|
||||
},
|
||||
update() {
|
||||
const self = this;
|
||||
updateExam(this.formModel).then(response => {
|
||||
self.$message.success(this.$t('system.updateSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`${this.$t('error.updateFailed')}: ${error.message}`);
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
id: '',
|
||||
userName: '',
|
||||
score: '',
|
||||
examName: '',
|
||||
result: ''
|
||||
};
|
||||
if (done) {
|
||||
done();
|
||||
} else {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
138
src/views/system/userExam/index.vue
Normal file
138
src/views/system/userExam/index.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<publish-exam-edit ref="edit" type="EDIT" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPublishExam, delPublishExam } from '@/api/management/userexam';
|
||||
import PublishExamEdit from './edit';
|
||||
|
||||
export default {
|
||||
name: 'PublishExam',
|
||||
components: {
|
||||
PublishExamEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
examResultList: [],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '150px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
examName: {
|
||||
type: 'text',
|
||||
label: this.$t('system.examName')
|
||||
},
|
||||
userName: {
|
||||
type: 'text',
|
||||
label: this.$t('system.examUser')
|
||||
},
|
||||
result: {
|
||||
type: 'select',
|
||||
label: this.$t('system.examResult'),
|
||||
config: {
|
||||
data: this.$ConstSelect.examResultList
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: getPublishExam,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('system.examName'),
|
||||
prop: 'examName'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.examResult'),
|
||||
prop: 'result',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$convertField(row.result, this.$ConstSelect.examResultList, ['value', 'label']); },
|
||||
tagType: (row) => {
|
||||
switch (row.result) {
|
||||
case '01': return 'warning';
|
||||
case '02': return 'success';
|
||||
case '03': return 'danger';
|
||||
case '04': return 'danger';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('system.examScore'),
|
||||
prop: 'score'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.examUser'),
|
||||
prop: 'userName'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.mobile'),
|
||||
prop: 'userMobile'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('global.edit'),
|
||||
handleClick: this.edit
|
||||
},
|
||||
{
|
||||
name: this.$t('global.delete'),
|
||||
handleClick: this.handleDelete,
|
||||
type: 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
loadInitData() {
|
||||
|
||||
},
|
||||
|
||||
// 编辑
|
||||
edit(index, row) {
|
||||
this.$refs.edit.show(row);
|
||||
},
|
||||
|
||||
// 删除
|
||||
handleDelete(index, row) {
|
||||
this.$confirm(this.$t('system.wellDelExamResult'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delPublishExam(row.id).then(response => {
|
||||
this.$message.success(this.$t('system.deleteSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.reloadTable();
|
||||
this.$messageBox(this.$t('error.deleteFailed'));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
182
src/views/system/userSimulation/add.vue
Normal file
182
src/views/system/userSimulation/add.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postSimulationStats } from '@/api/simulation';
|
||||
import { getDimUserList } from '@/api/management/user';
|
||||
import { getPublishMapList } from '@/api/jmap/map';
|
||||
import { getCommodityMapProduct } from '@/api/management/mapprd';
|
||||
|
||||
export default {
|
||||
name: 'UsersTrainingAdd',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
mapId: '',
|
||||
mapPrdCode: '',
|
||||
userId: '',
|
||||
userName: '',
|
||||
duration: ''
|
||||
},
|
||||
LessonList: [],
|
||||
mapPrdList: [],
|
||||
UserList: [],
|
||||
UserLoading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '120px',
|
||||
items: [
|
||||
{ prop: 'mapId', label: this.$t('system.mapName'), type: 'select', required: true, options: this.LessonList, change: true, onChange: this.mapChange, placeholder: this.$t('rules.mapInput') },
|
||||
{ prop: 'mapPrdCode', label: this.$t('system.productName'), type: 'select', required: true, options: this.mapPrdList, placeholder: this.$t('rules.productInput') },
|
||||
{ prop: 'userName', label: this.$t('system.userName'), type: 'complete', required: false, querySearchAsync: this.querySearchAsync, handleSelect: this.prdSelect, placeholder: this.$t('system.pleaseInputNames') },
|
||||
{ prop: 'duration', label: this.$t('system.trainingUseTime'), type: 'text', rightWidth: true, required: true, message: 's' }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
mapId: [
|
||||
{ required: true, message: this.$t('rules.mapInput'), trigger: 'change' }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: this.$t('rules.chooseUser'), trigger: 'change' }
|
||||
],
|
||||
mapPrdCode: [
|
||||
{ required: true, message: this.$t('rules.productInput'), trigger: 'change' }
|
||||
],
|
||||
duration: [
|
||||
{ required: true, message: this.$t('rules.timeInput'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
},
|
||||
title() {
|
||||
return this.$t('system.createSimulationTitle');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initLoadPage();
|
||||
},
|
||||
methods: {
|
||||
initLoadPage() {
|
||||
// 加载发布课程列表
|
||||
this.LessonList.length = 0;
|
||||
this.UserList.length = 0;
|
||||
const param = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
getPublishMapList(param).then(response => {
|
||||
const data = response.data.list;
|
||||
if (data && data.length) {
|
||||
data.forEach(elem => {
|
||||
this.LessonList.push({ value: elem.id, label: elem.name, skinCode: elem.skinCode });
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 搜索查询input
|
||||
async querySearchAsync(queryString, cb) {
|
||||
// 根据queryString 查询用户 并显示
|
||||
const results = [];
|
||||
if (queryString) {
|
||||
try {
|
||||
const params = {
|
||||
fuzzyParam: queryString
|
||||
};
|
||||
const res = await getDimUserList(params);
|
||||
const list = res.data;
|
||||
list.forEach(item => {
|
||||
const value = {
|
||||
id: item.id,
|
||||
value: `${item.nickname}(${item.name})${item.mobile}`
|
||||
};
|
||||
results.push(value);
|
||||
});
|
||||
cb(results);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
cb(results);
|
||||
}
|
||||
} else {
|
||||
cb(results);
|
||||
}
|
||||
},
|
||||
prdSelect(item) {
|
||||
this.formModel.userId = item.id;
|
||||
},
|
||||
async mapChange(val) {
|
||||
this.mapPrdList = [];
|
||||
this.formModel.mapPrdCode = '';
|
||||
try {
|
||||
const res = await getCommodityMapProduct(val);
|
||||
const data = res.data;
|
||||
if (data && data.length) {
|
||||
data.forEach(elem => {
|
||||
this.mapPrdList.push({ value: elem.code, label: elem.name });
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
show(data) {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.save();
|
||||
});
|
||||
},
|
||||
save() {
|
||||
const self = this;
|
||||
const params = {
|
||||
mapId: this.formModel.mapId,
|
||||
mapPrdCode: this.formModel.mapPrdCode,
|
||||
userId: this.formModel.userId,
|
||||
duration: parseInt(this.formModel.duration)
|
||||
};
|
||||
if (params.userId) {
|
||||
postSimulationStats(params).then(response => {
|
||||
self.$message.success(this.$t('system.addSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(this.$t('error.addFailed') + error.message);
|
||||
});
|
||||
} else {
|
||||
this.$message.error(this.$t('rules.chooseUser'));
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
mapId: '',
|
||||
mapPrdCode: '',
|
||||
userId: '',
|
||||
userName: '',
|
||||
duration: ''
|
||||
};
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
107
src/views/system/userSimulation/edit.vue
Normal file
107
src/views/system/userSimulation/edit.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { putSimulationStats } from '@/api/simulation';
|
||||
|
||||
export default {
|
||||
name: 'UsersTrainingEdit',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
id: '',
|
||||
duration: '',
|
||||
mapName: '',
|
||||
mapPrdName: '',
|
||||
userMobile: '',
|
||||
userName: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '100px',
|
||||
items: [
|
||||
{ prop: 'mapName', label: this.$t('system.mapName'), type: 'text', required: false, disabled: true },
|
||||
{ prop: 'mapPrdName', label: this.$t('system.productName'), type: 'text', required: false, disabled: true },
|
||||
{ prop: 'userName', label: this.$t('system.userName'), type: 'text', required: false, disabled: true },
|
||||
{ prop: 'duration', label: this.$t('system.trainingTime'), type: 'text', rightWidth: true, required: true, message: 's' }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
period: [
|
||||
{ required: true, message: this.$t('rules.timeInput'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
},
|
||||
title() {
|
||||
return this.$t('system.editSimulationDetails');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(data) {
|
||||
this.dialogVisible = true;
|
||||
if (data && data.id) {
|
||||
this.formModel = {
|
||||
id: data.id,
|
||||
duration: data.duration,
|
||||
mapName: data.mapName,
|
||||
mapPrdName: data.mapPrdName,
|
||||
userMobile: data.userMobile,
|
||||
userName: data.userName
|
||||
};
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.update();
|
||||
});
|
||||
},
|
||||
update() {
|
||||
const self = this;
|
||||
const parma = {
|
||||
id: this.formModel.id,
|
||||
duration: this.formModel.duration
|
||||
};
|
||||
putSimulationStats(parma).then(response => {
|
||||
self.$message.success(this.$t('tip.successfullyModified'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
id: '',
|
||||
duration: '',
|
||||
mapName: '',
|
||||
mapPrdName: '',
|
||||
userMobile: '',
|
||||
userName: ''
|
||||
};
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
158
src/views/system/userSimulation/index.vue
Normal file
158
src/views/system/userSimulation/index.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<users-training-edit ref="edit" type="EDIT" @reloadTable="reloadTable" />
|
||||
<users-training-add ref="add" type="ADD" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSimulationList, deleteSimulationStats } from '@/api/simulation';
|
||||
import { listPublishMap } from '@/api/jmap/map';
|
||||
import { getPublishLessonList } from '@/api/jmap/lesson';
|
||||
|
||||
import UsersTrainingEdit from './edit';
|
||||
import UsersTrainingAdd from './add';
|
||||
export default {
|
||||
name: 'UserTrainingEdit',
|
||||
components: {
|
||||
UsersTrainingEdit,
|
||||
UsersTrainingAdd
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
examResultList: [],
|
||||
LessonList: [],
|
||||
mapList: [],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '120px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
trainingName: {
|
||||
type: 'text',
|
||||
label: this.$t('system.trainingName')
|
||||
},
|
||||
userName: {
|
||||
type: 'text',
|
||||
label: this.$t('system.userName')
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: getSimulationList,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('system.userName'),
|
||||
prop: 'userName'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.mobile'),
|
||||
prop: 'userMobile'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.mapName'),
|
||||
prop: 'mapName'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.trainingUseTime'),
|
||||
prop: 'duration',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.computation(row.duration); },
|
||||
tagType: (row) => { return 'success'; }
|
||||
},
|
||||
{
|
||||
title: this.$t('system.productName'),
|
||||
prop: 'mapPrdName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '250',
|
||||
hide: (row) => { return !row.fake; },
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('global.edit'),
|
||||
handleClick: this.edit,
|
||||
showControl: (row) => { return row.fake; }
|
||||
},
|
||||
{
|
||||
name: this.$t('global.delete'),
|
||||
handleClick: this.handleDelete,
|
||||
type: 'danger',
|
||||
showControl: (row) => { return row.fake; }
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{ text: this.$t('global.add'), handler: this.createTraining }
|
||||
]
|
||||
},
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
async loadInitData() {
|
||||
const res = await listPublishMap();
|
||||
this.mapList = res.data;
|
||||
const response = await getPublishLessonList();
|
||||
const data = response.data;
|
||||
if (data && data.length) {
|
||||
data.forEach(elem => {
|
||||
this.LessonList.push({ value: elem.prdCode, name: elem.name });
|
||||
});
|
||||
}
|
||||
},
|
||||
createTraining() {
|
||||
this.$refs.add.show();
|
||||
},
|
||||
computation(fieldValue) {
|
||||
if (fieldValue) {
|
||||
const f = parseInt(fieldValue / 60);
|
||||
const s = fieldValue % 60;
|
||||
if (f > 0) {
|
||||
return `${f} ${this.$t('system.minute')} ${s} ${this.$t('system.second')}`;
|
||||
} else {
|
||||
return `${s} ${this.$t('system.second')}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑
|
||||
edit(index, row) {
|
||||
this.$refs.edit.show(row);
|
||||
},
|
||||
|
||||
// 删除
|
||||
handleDelete(index, row) {
|
||||
this.$confirm(this.$t('system.wellDelUserSimulation'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteSimulationStats(row.id).then(response => {
|
||||
this.$message.success(this.$t('system.deleteSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.reloadTable();
|
||||
this.$messageBox(this.$t('error.deleteFailed'));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
176
src/views/system/userTraining/add.vue
Normal file
176
src/views/system/userTraining/add.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<add-training ref="addTraining" @selectTrain="selectTrain" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addUserTraining } from '@/api/jmap/training';
|
||||
import { getPublishLessonList } from '@/api/jmap/lesson';
|
||||
import { getDimUserList } from '@/api/management/user';
|
||||
import AddTraining from './addTraining';
|
||||
|
||||
export default {
|
||||
name: 'UsersTrainingAdd',
|
||||
components: {
|
||||
AddTraining
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
lessonId: '',
|
||||
trainingId: '',
|
||||
trainingName: '',
|
||||
userId: '',
|
||||
userName: '',
|
||||
duration: ''
|
||||
},
|
||||
LessonList: [],
|
||||
UserList: [],
|
||||
UserLoading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
this.type === 'ADD';
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop: 'lessonId', label: this.$t('system.lessonName'), type: 'select', required: true, options: this.LessonList },
|
||||
{ prop: 'trainingName', label: this.$t('system.trainingName'), type: 'text', required: true, rightWidth: true, disabled: true, buttontip: this.$t('system.selectTraining'), buttonClick: this.buttonClick, placeholder: this.$t('rules.pleaseSelectTraining') },
|
||||
{ prop: 'userName', label: this.$t('system.userName'), type: 'complete', required: false, querySearchAsync: this.querySearchAsync, handleSelect: this.prdSelect, placeholder: this.$t('system.pleaseInputNames') },
|
||||
{ prop: 'duration', label: this.$t('system.trainingTime'), type: 'text', required: true, rightWidth: true, message: 's' }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
lessonId: [
|
||||
{ required: true, message: this.$t('rules.pleaseInputLessonName'), trigger: 'change' }
|
||||
],
|
||||
trainingName: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectTraining'), trigger: 'change' }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: this.$t('rules.userNameInput'), trigger: 'change' }
|
||||
],
|
||||
duration: [
|
||||
{ required: true, message: this.$t('rules.timeInput'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
},
|
||||
title() {
|
||||
return this.$t('system.createUserTraining');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initLoadPage();
|
||||
},
|
||||
methods: {
|
||||
initLoadPage() {
|
||||
// 加载发布课程列表
|
||||
this.LessonList.length = 0;
|
||||
this.UserList.length = 0;
|
||||
getPublishLessonList().then(response => {
|
||||
const data = response.data;
|
||||
if (data && data.length) {
|
||||
data.forEach(elem => {
|
||||
this.LessonList.push({ value: elem.id, label: elem.name });
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 搜索查询input
|
||||
async querySearchAsync(queryString, cb) {
|
||||
// 根据queryString 查询用户 并显示
|
||||
const results = [];
|
||||
if (queryString) {
|
||||
try {
|
||||
const params = {
|
||||
fuzzyParam: queryString
|
||||
};
|
||||
const res = await getDimUserList(params);
|
||||
const list = res.data;
|
||||
list.forEach(item => {
|
||||
const value = {
|
||||
id: item.id,
|
||||
value: `${item.nickname}(${item.name})${item.mobile}`
|
||||
};
|
||||
results.push(value);
|
||||
});
|
||||
cb(results);
|
||||
} catch (error) {
|
||||
console.error(error, '查询用户list');
|
||||
cb(results);
|
||||
}
|
||||
} else {
|
||||
cb(results);
|
||||
}
|
||||
},
|
||||
prdSelect(item) {
|
||||
this.formModel.userId = item.id;
|
||||
},
|
||||
selectTrain(data) {
|
||||
this.formModel.trainingId = data.id;
|
||||
this.formModel.trainingName = data.name;
|
||||
},
|
||||
buttonClick() {
|
||||
if (this.formModel.lessonId) {
|
||||
this.$refs.addTraining.show(this.formModel.lessonId);
|
||||
} else {
|
||||
this.$message.error(this.$t('rules.selectTheCourseNameFirst'));
|
||||
}
|
||||
},
|
||||
show(data) {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.save();
|
||||
});
|
||||
},
|
||||
save() {
|
||||
const self = this;
|
||||
if (this.formModel.userId) {
|
||||
addUserTraining(this.formModel).then(response => {
|
||||
self.$message.success(this.$t('system.addSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(this.$t('error.addFailed') + error.message);
|
||||
});
|
||||
} else {
|
||||
self.$message.error(this.$t('rules.chooseUser'));
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
lessonId: '',
|
||||
trainingId: '',
|
||||
trainingName: '',
|
||||
userId: '',
|
||||
userName: '',
|
||||
duration: ''
|
||||
};
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
98
src/views/system/userTraining/addTraining.vue
Normal file
98
src/views/system/userTraining/addTraining.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: '280px', width:'100%' }">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:span="22"
|
||||
@node-click="clickEvent"
|
||||
>
|
||||
<span slot-scope="{ node }" class="custom-tree-node">
|
||||
<span class="el-icon-tickets">
|
||||
<span> {{ node.label }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" :disabled="disabled" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPublishLessonDetail } from '@/api/jmap/lesson';
|
||||
|
||||
export default {
|
||||
name: 'AddTraining',
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisibles: false,
|
||||
title: this.$t('system.selectTraining'),
|
||||
treeData: [{
|
||||
children: [],
|
||||
name: ''
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
training: {},
|
||||
disabled: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
clickEvent(data) {
|
||||
if (data.trainingSelect) {
|
||||
this.training = {
|
||||
name: data.name,
|
||||
id: data.id
|
||||
};
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
async show(lessonId) {
|
||||
this.dialogVisibles = true;
|
||||
try {
|
||||
const res = await getPublishLessonDetail({ id: lessonId });
|
||||
this.treeData[0].children = res.data.chapters;
|
||||
this.treeData[0].name = res.data.name;
|
||||
this.treeData[0].children.forEach(ele => {
|
||||
ele.children = ele.trainingVos;
|
||||
ele.children.forEach(item => {
|
||||
item.trainingSelect = true;
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
this.$emit('selectTrain', this.training);
|
||||
this.handleClose();
|
||||
},
|
||||
handleClose() {
|
||||
this.treeData = [{
|
||||
children: [],
|
||||
name: ''
|
||||
}];
|
||||
this.trainingId = '';
|
||||
this.training = {};
|
||||
this.dialogVisibles = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
105
src/views/system/userTraining/edit.vue
Normal file
105
src/views/system/userTraining/edit.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { putUserTraining } from '@/api/jmap/training';
|
||||
export default {
|
||||
name: 'UsersTrainingEdit',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
id: '',
|
||||
lessonName: '',
|
||||
userName: '',
|
||||
trainingName: '',
|
||||
duration: ''
|
||||
// trainingCount: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
form() {
|
||||
this.type === 'ADD';
|
||||
const form = {
|
||||
labelWidth: '100px',
|
||||
items: [
|
||||
{ prop: 'lessonName', label: this.$t('system.lessonName'), type: 'text', required: false, disabled: true },
|
||||
{ prop: 'trainingName', label: this.$t('system.trainingName'), type: 'text', required: true, disabled: true },
|
||||
{ prop: 'userName', label: this.$t('system.userName'), type: 'text', required: true, disabled: true },
|
||||
{ prop: 'duration', label: this.$t('system.trainingTime'), type: 'text', required: true, rightWidth: true, message: 's' }
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
duration: [
|
||||
{ required: true, message: this.$t('rules.timeInput'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
},
|
||||
title() {
|
||||
return this.$t('system.editTrainingDetail');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(data) {
|
||||
this.dialogVisible = true;
|
||||
if (data && data.id) {
|
||||
this.formModel = {
|
||||
id: data.id,
|
||||
lessonName: data.lessonName,
|
||||
userName: data.userName,
|
||||
trainingName: data.trainingName,
|
||||
duration: data.duration
|
||||
};
|
||||
}
|
||||
},
|
||||
doSave() {
|
||||
const self = this;
|
||||
this.$refs.dataform.validateForm(() => {
|
||||
self.update();
|
||||
});
|
||||
},
|
||||
update() {
|
||||
const self = this;
|
||||
const param = {
|
||||
id: this.formModel.id,
|
||||
duration: this.formModel.duration
|
||||
};
|
||||
putUserTraining(param).then(response => {
|
||||
self.$message.success(this.$t('system.updateSuccess'));
|
||||
self.handleClose();
|
||||
self.$emit('reloadTable');
|
||||
}).catch(error => {
|
||||
self.$message.error(`${this.$t('error.updateFailed')}: ${error.message}`);
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.formModel = {
|
||||
id: '',
|
||||
lessonName: '',
|
||||
userName: '',
|
||||
trainingName: '',
|
||||
duration: ''
|
||||
};
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
144
src/views/system/userTraining/index.vue
Normal file
144
src/views/system/userTraining/index.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<users-training-edit ref="edit" type="EDIT" @reloadTable="reloadTable" />
|
||||
<users-training-add ref="add" type="ADD" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTrainingList, deleteUserTraining } from '@/api/jmap/training';
|
||||
import UsersTrainingEdit from './edit';
|
||||
import UsersTrainingAdd from './add';
|
||||
export default {
|
||||
name: 'UserTrainingEdit',
|
||||
components: {
|
||||
UsersTrainingEdit,
|
||||
UsersTrainingAdd
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
examResultList: [],
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '120px',
|
||||
reset: true,
|
||||
queryObject: {
|
||||
trainingName: {
|
||||
type: 'text',
|
||||
label: this.$t('system.trainingName')
|
||||
},
|
||||
userName: {
|
||||
type: 'text',
|
||||
label: this.$t('system.userName')
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
queryList: {
|
||||
query: getTrainingList,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('system.userName'),
|
||||
prop: 'userName'
|
||||
},
|
||||
{
|
||||
title: this.$t('global.mobile'),
|
||||
prop: 'userMobile'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.lessonName'),
|
||||
prop: 'lessonName'
|
||||
},
|
||||
{
|
||||
title: this.$t('system.trainingUseTime'),
|
||||
prop: 'duration',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.computation(row.duration); },
|
||||
tagType: (row) => { return 'success'; }
|
||||
},
|
||||
{
|
||||
title: this.$t('system.trainingName'),
|
||||
prop: 'trainingName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('global.edit'),
|
||||
handleClick: this.edit,
|
||||
showControl: (row) => { return row.fake != '0'; }
|
||||
},
|
||||
{
|
||||
name: this.$t('global.delete'),
|
||||
handleClick: this.handleDelete,
|
||||
type: 'danger',
|
||||
showControl: (row) => { return row.fake != '0'; }
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{ text: this.$t('global.add'), handler: this.createTraining }
|
||||
]
|
||||
},
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
loadInitData() {
|
||||
|
||||
},
|
||||
createTraining() {
|
||||
this.$refs.add.show();
|
||||
},
|
||||
computation(fieldValue) {
|
||||
if (fieldValue) {
|
||||
const f = parseInt(fieldValue / 60);
|
||||
const s = fieldValue % 60;
|
||||
if (f > 0) {
|
||||
return `${f} ${this.$t('system.minute')} ${s} ${this.$t('system.second')}`;
|
||||
} else {
|
||||
return `${s} ${this.$t('system.second')}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑
|
||||
edit(index, row) {
|
||||
this.$refs.edit.show(row);
|
||||
},
|
||||
|
||||
// 删除
|
||||
handleDelete(index, row) {
|
||||
this.$confirm(this.$t('system.wellDelExamResult'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteUserTraining(row.id).then(response => {
|
||||
this.$message.success(this.$t('system.deleteSuccess'));
|
||||
this.reloadTable();
|
||||
}).catch(() => {
|
||||
this.reloadTable();
|
||||
this.$messageBox(this.$t('error.deleteFailed'));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user