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

desc: 调整地图绘制高度问题

Browse Source
This commit is contained in:
zyy 2019-10-30 18:25:13 +08:00
parent de1b8d579e
commit 10565fdd6b
97 changed files with 12021 additions and 12217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

454
src/jmap/theme/chengdu_03/planSchedule/menuBar.vue
View File

@ -126,233 +126,233 @@ import { launchFullscreen } from '@/utils/screen';
import { EventBus } from '@/scripts/event-bus'; import { EventBus } from '@/scripts/event-bus';
export default { export default {
name: 'PlanMenuBar', name: 'PlanMenuBar',
props: { props: {
skinCode: { skinCode: {
type: String, type: String,
required: true required: true
} }
}, },
data() { data() {
return { return {
classA: -1, classA: -1,
classB: -1, classB: -1,
tempClassA: -1, tempClassA: -1,
tempClassB: -1, tempClassB: -1,
menu: [ menu: [
{ {
title: '文件（F）', title: '文件（F）',
children: [ children: [
] ]
}, },
{ {
title: '显示（V）', title: '显示（V）',
children: [ children: [
// { // {
// title: '缩放', // title: '缩放',
// }, // },
// { // {
// title: '单色显示历史计划', // title: '单色显示历史计划',
// }, // },
// { // {
// title: '彩色显示历史计划' // title: '彩色显示历史计划'
// } // }
] ]
}, },
{ {
title: '编辑（E）', title: '编辑（E）',
children: [ children: [
// { // {
// title: '修改', // title: '修改',
// click: this.handleEditPlanningTrain // click: this.handleEditPlanningTrain
// }, // },
// { // {
// title: '加任务', // title: '加任务',
// click: this.handleAddTask // click: this.handleAddTask
// }, // },
// { // {
// title: '删任务', // title: '删任务',
// click: this.handleDeleteTask // click: this.handleDeleteTask
// }, // },
// { // {
// title: '改表号', // title: '改表号',
// click: this.handleModifyingPlanId // click: this.handleModifyingPlanId
// }, // },
// { // {
// title: '平移多辆车', // title: '平移多辆车',
// click: this.handleTranslationalMulTrain // click: this.handleTranslationalMulTrain
// } // }
] ]
}, },
{ {
title: '工具（T）', title: '工具（T）',
children: [ children: [
{ {
title: '查看计划列表', title: '查看计划列表',
click: this.handleViewPlanSchedule click: this.handleViewPlanSchedule
}, },
{ {
title: '创建一周计划', title: '创建一周计划',
click: this.handleCreateWeekPlan click: this.handleCreateWeekPlan
}, },
{ {
title: '加载当天计划', title: '加载当天计划',
click: this.handleReloadTodayPlan click: this.handleReloadTodayPlan
} }
// { // {
// title: '有效性检查', // title: '有效性检查',
// click: this.handleValidityCheck // click: this.handleValidityCheck
// } // }
] ]
}, },
{ {
title: '帮助（H）', title: '帮助（H）',
children: [ children: [
] ]
} }
] ]
}; };
}, },
computed: { computed: {
...mapGetters('training', [ ...mapGetters('training', [
'mode' 'mode'
]), ]),
...mapGetters('map', [ ...mapGetters('map', [
'stationList' 'stationList'
]) ])
}, },
watch: { watch: {
tempClassA() { tempClassA() {
this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA; this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA;
}, },
tempClassB() { tempClassB() {
this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB; this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB;
}, },
'$store.state.menuOperation.break': function (val) { '$store.state.menuOperation.break': function (val) {
if (val) { if (val) {
this.classA = this.classB = -1; this.classA = this.classB = -1;
} else { } else {
this.classA = this.tempClassA; this.classA = this.tempClassA;
this.classB = this.tempClassB; this.classB = this.tempClassB;
} }
} }
}, },
mounted() { mounted() {
this.initMenu(); this.initMenu();
}, },
methods: { methods: {
initMenu() { initMenu() {
this.clickEvent(); this.clickEvent();
this.closeMenu(); this.closeMenu();
}, },
clickEvent() { clickEvent() {
const self = this; const self = this;
window.onclick = function (e) { window.onclick = function (e) {
self.closeMenu(false); self.closeMenu(false);
}; };
}, },
noShowingChildren(children) { noShowingChildren(children) {
if (!children || children.length <= 0) { if (!children || children.length <= 0) {
return true; return true;
} }
return false; return false;
}, },
hasShowingChildren(children) { hasShowingChildren(children) {
if (children && children.length > 0) { if (children && children.length > 0) {
return true; return true;
} }
return false; return false;
}, },
closeMenu() { closeMenu() {
this.classA = this.tempClassA = -1; this.classA = this.tempClassA = -1;
this.classB = this.tempClassB = -1; this.classB = this.tempClassB = -1;
}, },
hookClick(item, event) { hookClick(item, event) {
this.closeMenu(); this.closeMenu();
// launchFullscreen(); // launchFullscreen();
setTimeout(() => { setTimeout(() => {
if (item && typeof item.click == 'function') { if (item && typeof item.click == 'function') {
item.click(); item.click();
} }
}, 500); }, 500);
}, },
popupMenuA(item, index) { popupMenuA(item, index) {
this.clickEvent(); this.clickEvent();
this.tempClassA = index; this.tempClassA = index;
this.tempClassB = -1; this.tempClassB = -1;
}, },
popupMenuB(item, index) { popupMenuB(item, index) {
this.tempClassB = index; this.tempClassB = index;
}, },
openLoadFile(item) { openLoadFile(item) {
const obj = this.$refs[item.title][0]; const obj = this.$refs[item.title][0];
if (obj.files) { if (obj.files) {
const file = obj.files[0]; const file = obj.files[0];
item.click(file); item.click(file);
obj.value = ''; obj.value = '';
} }
}, },
doClose() { doClose() {
this.$nextTick(() => { this.$nextTick(() => {
EventBus.$emit('closeMenu'); EventBus.$emit('closeMenu');
}); });
}, },
// 刷新 // 刷新
refresh() { refresh() {
this.closeMenu(true); this.closeMenu(true);
EventBus.$emit('refresh'); EventBus.$emit('refresh');
}, },
undeveloped() { undeveloped() {
this.doClose(); this.doClose();
this.$alert('实现中......', '提示', { this.$alert('实现中......', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
} }
}); });
}, },
// 修改计划 // 修改计划
handleEditPlanningTrain() { handleEditPlanningTrain() {
this.$emit('dispatchDialog', { name: 'modifyingPlan' }); this.$emit('dispatchDialog', { name: 'modifyingPlan' });
}, },
// 添加任务 // 添加任务
handleAddTask() { handleAddTask() {
const params = this.$store.state.runPlan.selected; const params = this.$store.state.runPlan.selected;
this.$emit('dispatchDialog', { name: 'addTask', params }); this.$emit('dispatchDialog', { name: 'addTask', params });
}, },
// 删除任务 // 删除任务
handleDeleteTask() { handleDeleteTask() {
const params = this.$store.state.runPlan.selected; const params = this.$store.state.runPlan.selected;
this.$emit('dispatchDialog', { name: 'deleteTask', params }); this.$emit('dispatchDialog', { name: 'deleteTask', params });
}, },
// 修改任务 // 修改任务
handleModifyingTask() { handleModifyingTask() {
const params = this.$store.state.runPlan.selected; const params = this.$store.state.runPlan.selected;
this.$emit('dispatchDialog', { name: 'modifyingTask', params }); this.$emit('dispatchDialog', { name: 'modifyingTask', params });
}, },
// 改表号 // 改表号
handleModifyingPlanId() { handleModifyingPlanId() {
this.$emit('dispatchDialog', { name: 'modifyingPlanId' }); this.$emit('dispatchDialog', { name: 'modifyingPlanId' });
}, },
// 平移多辆车 // 平移多辆车
handleTranslationalMulTrain() { handleTranslationalMulTrain() {
this.$emit('dispatchDialog', { name: 'translationalMulTrain' }); this.$emit('dispatchDialog', { name: 'translationalMulTrain' });
}, },
// 查看计划列表 // 查看计划列表
handleViewPlanSchedule() { handleViewPlanSchedule() {
this.$emit('dispatchDialog', { name: 'managePlanList' }); this.$emit('dispatchDialog', { name: 'managePlanList' });
}, },
// 创建一周计划 // 创建一周计划
handleCreateWeekPlan() { handleCreateWeekPlan() {
this.$emit('dispatchDialog', { name: 'createWeekPlan' }); this.$emit('dispatchDialog', { name: 'createWeekPlan' });
}, },
// 创建当天计划 // 创建当天计划
handleReloadTodayPlan() { handleReloadTodayPlan() {
this.$emit('dispatchDialog', { name: 'createTodayPlan' }); this.$emit('dispatchDialog', { name: 'createTodayPlan' });
}, },
// 有效性检查 // 有效性检查
handleValidityCheck() { handleValidityCheck() {
} }
} }
}; };
</script> </script>

2
src/router/index.js
View File

@ -24,7 +24,7 @@ import SkinCodeDraft from '@/views/system/skinCode/draft';
import MapProduct from '@/views/system/product/index'; import MapProduct from '@/views/system/product/index';
// import Mapdraft from '@/views/map/mapdraft/index'; // import Mapdraft from '@/views/map/mapdraft/index';
import Mapedit from '@/views/map/mapdraft/mapedit/index'; import Mapedit from '@/views/map/mapdraft/index';
// import Runplan from '@/views/map/runplan/index'; // import Runplan from '@/views/map/runplan/index';
import RunplanView from '@/views/map/runplan/chart'; import RunplanView from '@/views/map/runplan/chart';

2
src/views/designUser/demonList.vue
View File

@ -37,7 +37,7 @@ import { postBuildMapImport, listMap } from '@/api/jmap/mapdraft';
import { UrlConfig } from '@/router/index'; import { UrlConfig } from '@/router/index';
import { removeSessionStorage } from '@/utils/auth'; import { removeSessionStorage } from '@/utils/auth';
import localStore from 'storejs'; import localStore from 'storejs';
import MapOperateMenu from '@/views/map/mapdraft/mapmanage/operateMenu'; import MapOperateMenu from './mapmanage/operateMenu';
export default { export default {
name: 'UserMapList', name: 'UserMapList',

2
src/views/designUser/index.vue
View File

@ -18,7 +18,7 @@ import drapLeft from '@/views/components/drapLeft/index';
import { launchFullscreen } from '@/utils/screen'; import { launchFullscreen } from '@/utils/screen';
import localStore from 'storejs'; import localStore from 'storejs';
import { getSessionStorage, setSessionStorage } from '@/utils/auth'; import { getSessionStorage, setSessionStorage } from '@/utils/auth';
import MapCreate from '@/views/map/mapdraft/mapmanage/create'; import MapCreate from './mapmanage/create';
import { UrlConfig } from '@/router/index'; import { UrlConfig } from '@/router/index';
export default { export default {

303
src/views/designUser/mapmanage/create.vue Normal file
View File

@ -0,0 +1,303 @@
<template>
<el-dialog v-dialogDrag v-loading="loadingUpload" :title="$t('map.createNewMap')" :visible.sync="dialogShow" width="30%" :close-on-click-modal="false" :before-close="handleClose">
<div>
<el-tabs v-model="activeTab" type="card">
<el-tab-pane :label="$t('map.normalCreate')" name="first">
<el-form ref="newForm" label-position="right" :model="newModel" label-width="140px" size="mini" :rules="newRules" @submit.native.prevent>
<el-form-item :label="$t('map.skinName')" prop="skinCode">
<el-select v-model="newModel.skinCode" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in skinCodeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="newModel.name" />
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane :label="$t('map.publishMapCreation')" name="second">
<el-form ref="pullForm" label-position="right" :model="pullModel" :rules="pullRules" label-width="140px" size="mini">
<el-form-item :label="$t('map.publishMap')+ ':'" prop="id">
<el-select v-model="pullModel.id" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in publishMapList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="pullModel.name" />
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="create">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { newMap, postBuildMapImport, newUsePublishMap } from '@/api/jmap/mapdraft';
import { listPublishMap } from '@/api/jmap/map';
import XLSX from 'xlsx';
import { translate, translateSheetTitle } from '@/scripts/translate';
import { sheet_to_json } from '@/utils/Export2Excel';
import { getSkinCodeList } from '@/api/management/mapskin';
export default {
name: 'MapCreate',
props: {
skinCode: {
type: String,
default() {
return '';
}
}
},
data() {
return {
dialogShow: false,
loading: false,
file: null,
rABS: false,
loadingUpload: false,
resultJSON: {},
activeTab: 'first',
skinCodeList: [],
publishMapList: [],
newModel: {
id: '',
name: '',
skinCode: ''
},
pullModel: {
id: '',
name: ''
},
newRules: {
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
],
skinCode: [
{ required: true, message: this.$t('rules.pleaseChooseSkinCode'), trigger: 'change' }
]
},
pullRules: {
id: [
{ required: true, message: this.$t('rules.pleaseSelectMapSource'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'change' }
]
},
cityList: []
};
},
watch: {
skinCode(val) {
this.newModel.skinCode = val;
}
},
methods: {
show() {
this.dialogShow = true;
this.initLoadData();
},
close() {
if (this.$refs.newForm) {
this.$refs.newForm.resetFields();
}
if (this.$refs.pullForm) {
this.$refs.pullForm.resetFields();
}
this.dialogShow = false;
},
handleClose() {
this.close();
},
initLoadData() {
this.skinCodeList = [];
getSkinCodeList().then(response => {
this.skinCodeList = response.data;
});
this.$Dictionary.cityType().then(list => {
this.cityList = list;
});
listPublishMap().then(response => {
this.publishMapList = response.data;
}).catch(() => {
this.$messageBox(this.$t('map.failedLoadListPublishedMaps'));
});
},
create() {
if (this.activeTab === 'first') {
this.$refs['newForm'].validate((valid) => {
if (valid) {
this.loading = true;
newMap(this.newModel).then(response => {
this.loading = false;
this.$emit('refresh');
this.$message.success(this.$t('map.creatingSuccessful'));
this.close();
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.createFailure'));
this.close();
});
}
});
} else {
this.$refs['pullForm'].validate((valid) => {
if (valid) {
this.loading = true;
newUsePublishMap(this.pullModel).then(response => {
this.loading = false;
this.$emit('refresh');
this.$message.success(this.$t('map.creatingSuccessful'));
this.close();
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.createFailure'));
this.close();
});
}
});
}
},
importf() { // 导入
const obj = this.$refs.files;
let wb;
if (!obj.files) return;
const f = obj.files[0];
this.loadingUpload = true;
const reader = new FileReader();
const that = this;
reader.onload = function (e) {
const data = e.target.result;
if (that.rABS) {
wb = XLSX.read(btoa(that.fixdata(data)), {// 手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
const resultJSONData = {};
for (const index in wb.Sheets) {
const titleNum = that.formatSheetTitle(index);
const key = translateSheetTitle.sheetName[titleNum];
const filterVal = that.handelData(key);
const jsonData = sheet_to_json(wb.Sheets[index]);
const data = that.formatJson(filterVal, jsonData, key);
if (key === 'base') {
for (const i in data[0]) {
resultJSONData[i] = data[0][i];
}
} else {
resultJSONData[key] = data;
}
}
that.resultJSON = resultJSONData;
if (that.resultJSON) {
postBuildMapImport(that.resultJSON).then(res => {
that.loadingUpload = false;
that.$message.success(this.$t('map.importSuccessful'));
that.$emit('refresh');
that.close();
}).catch(error => {
that.loadingUpload = false;
that.$message.error(this.$t('map.importFailure') + error.message);
});
}
obj.value = ''; // 清空上次导入文件
};
if (that.rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
// 转换数据格式
handelData(key) {
const tHeader = [];
const tHeaderF = [];
if (translate[key]) {
translate[key].columns.forEach(item => {
tHeader.push(item.tHeader);
tHeaderF.push(item.key);
});
}
const filterVal = {
tHeader: tHeader,
tHeaderF: tHeaderF
};
return filterVal;
},
// 文件流转BinaryString
fixdata(data) {
var o = '';
var l = 0;
var w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
},
// 转换属性名称 格式
formatJson(filterVal, jsonData, key) {
jsonData.map((item, index) => {
const json = {};
filterVal.tHeader.map((j, o) => {
if (item[j] != undefined) {
json[filterVal.tHeaderF[o]] = translate[key].columns[o].formatter(item[j]);
}
});
jsonData.splice(index, 1, json);
});
return jsonData;
},
// 转换sheet名字
formatSheetTitle(title) {
let index;
translateSheetTitle.sheetTitle.forEach((v, i) => {
if (title == v) index = i;
});
return index;
}
}
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.uploadDemo {
.el-upload-dragger {
margin: 0 auto;
}
.file_box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
}
</style>
<style>
.el-loading-mask {
background-color: rgba(0, 0, 0, 0.3);
}
</style>

230
src/views/designUser/mapmanage/edit.vue Normal file
View File

@ -0,0 +1,230 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.mapEditor')" :visible.sync="dialogShow" :close-on-click-modal="false" width="30%" :before-close="handleClose">
<div>
<template v-if="basicInfo">
<el-form ref="edit" label-position="right" :model="editModel" :rules="editRules" label-width="120px" size="mini" @submit.native.prevent>
<el-form-item :label="$t('map.skinName')" prop="skinCode">
<el-select v-model="editModel.skinCode" :placeholder="$t('map.pleaseSelect')" size="mini" disabled>
<el-option
v-for="item in skinCodeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="editModel.name" />
</el-form-item>
</el-form>
</template>
<template v-else>
<el-form ref="updt" label-position="right" :model="updtModel" :rules="updtRules" label-width="120px" size="mini" @submit.native.prevent>
<el-form-item :label="$t('map.offsetXColon')" :prop="'origin.x'">
<el-input v-model="updtModel.origin.x" :label="$t('map.offsetX')" disabled />
</el-form-item>
<el-form-item :label="$t('map.offsetYColon')" :prop="'origin.y'">
<el-input v-model="updtModel.origin.y" :label="$t('map.offsetY')" disabled />
</el-form-item>
<el-form-item :label="$t('map.scalingColon')" prop="scaling">
<el-input-number v-model="updtModel.scaling" :precision="1" :step="0.2" disabled />
</el-form-item>
</el-form>
</template>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="save">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { updateMap, getMapDetail } from '@/api/jmap/mapdraft';
import { getSkinCodeList } from '@/api/management/mapskin';
import { saveMap } from '@/api/jmap/mapdraft';
export default {
name: 'MapEdit',
props: {
map: {
type: Object,
required: true
},
basicInfo: {
type: Boolean,
required: true,
default: function () {
return true;
}
},
skinCode: {
type: String,
required: true
}
},
data() {
return {
dialogShow: false,
loading: false,
skinCodeList: [],
cityList: [],
editModel: {
id: '',
name: '',
skinCode: '01',
cityCode: ''
},
updtModel: {
code: '',
scaling: '',
origin: {
x: '',
y: ''
}
},
isUpdate: false
};
},
computed: {
editRules() {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
],
skinCode: [
{ required: true, message: this.$t('rules.pleaseSelectAssociatedSkin'), trigger: 'change' }
]
};
},
updtRules() {
return {
'origin.x': [
{ required: true, message: this.$t('rules.enterXOffset'), trigger: 'blur' }
],
'origin.y': [
{ required: true, message: this.$t('rules.enterYOffset'), trigger: 'blur' }
],
scaling: [
{ required: true, message: this.$t('rules.enterScale'), trigger: 'blur' }
]
};
}
},
watch: {
map: function (val, old) {
if (val) {
Object.assign(this.editModel, this.map);
}
},
'$store.state.map.mapDataLoadedCount': function () {
if (this.$jlmap.skinCode) {
this.isUpdate = true;
}
}
},
mounted() {
this.initLoadData();
},
methods: {
show(type) {
const dataZoom = this.$store.state.map.dataZoom;
if (type == 'editCode') {
this.editModel.skinCode = this.editModel.skinCode ? this.editModel.skinCode : '';
this.editModel.name = this.editModel.name ? this.editModel.name : '';
} else if (type == 'editPoint') {
if (dataZoom && dataZoom.offsetX) {
this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
this.updtModel.scaling = dataZoom.scaleRate;
}
}
this.dialogShow = true;
},
close() {
if (this.basicInfo) {
this.$refs.edit.resetFields();
} else {
this.$refs.updt.resetFields();
}
this.dialogShow = false;
},
handleClose() {
this.close();
},
save() {
this.loading = true;
if (this.basicInfo) {
// this.editModel.id = this.$route.params.mapId;
this.$refs['edit'].validate((valid) => {
if (valid) {
updateMap(this.editModel).then(response => {
this.loading = false;
if (this.isUpdate && this.$route.params.mapId) {
getMapDetail(this.$route.params.mapId).then(response => {
this.$store.dispatch('map/setMapData', response.data);
});
}
this.$message.success(this.$t('map.mapUpdateSuccessful'));
this.$emit('refresh');
this.close();
}).catch(error => {
this.loading = false;
this.$message.error(this.$t('map.operationUnusual') + error.message);
});
} else {
this.loading = false;
}
});
} else {
this.updtModel.code = this.skinCode;
const map = this.$store.state.map.map;
this.$refs['updt'].validate((valid) => {
if (valid) {
this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => {
const param = {
mapId: this.$route.params.mapId,
skinVO: {
code: this.$store.state.map.map.skinVO.code,
name: this.$store.state.map.map.skinVO.name,
origin: {
x: this.updtModel.origin.x,
y: this.updtModel.origin.y
},
scaling: this.updtModel.scaling
}
};
saveMap(Object.assign(map, param)).then(response => {
this.loading = false;
this.close();
this.$message.success(this.$t('map.updateSuccessfully'));
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.updateFailed'));
});
});
} else {
this.loading = false;
}
});
}
},
initLoadData() {
this.cityList = [];
this.$Dictionary.cityType().then(list => {
this.cityList = list;
}).catch(() => {
this.$messageBox(this.$t('map.failedLoadCityList'));
});
this.skinCodeList = [];
getSkinCodeList().then(response => {
this.skinCodeList = response.data;
});
}
}
};
</script>

12
src/views/map/mapdraft/mapmanage/operateMenu.vue → src/views/designUser/mapmanage/operateMenu.vue
View File

@ -124,12 +124,12 @@ export default {
this.$refs.edit.show('editCode'); this.$refs.edit.show('editCode');
} }
}, },
updateObjAxis() { // updateObjAxis() {
this.doClose(); // this.doClose();
if (this.$refs && this.$refs.axisEdit) { // if (this.$refs && this.$refs.axisEdit) {
this.$refs.axisEdit.show('editPoint'); // this.$refs.axisEdit.show('editPoint');
} // }
}, // },
saveAs() { saveAs() {
this.doClose(); this.doClose();
if (this.$refs && this.$refs.saveAs) { if (this.$refs && this.$refs.saveAs) {

108
src/views/designUser/mapmanage/publish.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.mapPublished')" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
<div>
<el-form ref="form" label-position="right" :model="editModel" label-width="120px" :rules="editRules" size="mini" @submit.native.prevent>
<el-form-item :label="$t('map.publishingAssociatedCity')" prop="cityCode">
<el-select v-model="editModel.cityCode" :placeholder="$t('map.pleaseSelect')">
<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
</el-select>
</el-form-item>
<el-form-item :label="$t('map.publishMapName')" prop="name">
<el-input v-model="editModel.name" />
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="publish">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { publishMap } from '@/api/jmap/mapdraft';
export default {
name: 'MapPublish',
props: {
map: {
type: Object,
required: true
}
},
data() {
return {
dialogShow: false,
loading: false,
cityList: [],
editModel: {
id: '',
name: '',
cityCode: '000000'
},
editRules: {
cityCode: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
]
}
};
},
watch: {
map: function (val, old) {
if (val) {
Object.assign(this.editModel, this.map);
}
}
},
mounted() {
this.$Dictionary.cityType().then(list => {
this.cityList = list;
});
},
methods: {
show() {
this.dialogShow = true;
},
close() {
this.$refs.form.resetFields();
this.dialogShow = false;
},
handleClose() {
this.close();
},
publish() {
this.loading = true;
delete this.editModel.children;
publishMap(this.editModel).then(response => {
this.loading = false;
if (response.data && response.data.length) {
this.tableToExcel(response.data);
this.$messageBox(this.$t('map.dataValidationFailed'));
} else {
this.$message.success(this.$t('map.releaseSuccess'));
}
this.close();
}).catch((error) => {
this.loading = false;
this.$messageBox(`${this.$t('map.abnormalOperation')}, ${error.message}`);
});
},
tableToExcel(data) {
const filterVal = ['index'];
const arr = [];
data.forEach(item => {
arr.push({ index: item });
});
const dataList = this.formatJson(filterVal, arr);
import('@/utils/Export2Excel').then(excel => {
excel.export_json_to_excel([this.$t('map.datQuestion')], dataList, this.$t('map.dataList'));
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
}
};
</script>

74
src/views/designUser/mapmanage/saveAs.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.saveMapAs')" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
<div>
<el-form ref="form" label-position="right" :model="editModel" label-width="100px" :rules="editRules" size="mini" @submit.native.prevent>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="editModel.name" />
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="saveAs">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { saveAsMap } from '@/api/jmap/mapdraft';
export default {
name: 'MapSaveAs',
props: {
map: {
type: Object,
required: true
}
},
data() {
return {
dialogShow: false,
loading: false,
editModel: {
id: '',
name: ''
},
editRules: {
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
]
}
};
},
watch: {
map: function (val, old) {
if (val) {
Object.assign(this.editModel, this.map);
}
}
},
methods: {
show() {
this.dialogShow = true;
},
close() {
this.$refs.form.resetFields();
this.dialogShow = false;
},
handleClose() {
this.close();
},
saveAs() {
this.loading = true;
saveAsMap(this.editModel).then(response => {
this.loading = false;
this.$emit('refresh');
this.close();
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.saveFailed'));
});
}
}
};
</script>

476
src/views/jlmap/index.vue
View File

@ -30,250 +30,250 @@ import { TrainingMode } from '@/scripts/ConstDic';
import { EventBus } from '@/scripts/event-bus'; import { EventBus } from '@/scripts/event-bus';
export default { export default {
name: 'JlmapVisual', name: 'JlmapVisual',
components: { components: {
ZoomBox, ZoomBox,
ProgressBar ProgressBar
}, },
data() { data() {
return { return {
loading: true, loading: true,
dataZoom: { dataZoom: {
offsetX: '0', offsetX: '0',
offsetY: '0', offsetY: '0',
scaleRate: '1' scaleRate: '1'
}, },
sectionActive: false, sectionActive: false,
operate: null operate: null
}; };
}, },
computed: { computed: {
...mapGetters('training', [ ...mapGetters('training', [
'mode', 'mode',
'offsetStationCode' 'offsetStationCode'
]), ]),
canvasId() { canvasId() {
const canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_'); const canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
this.$store.dispatch('config/setCurrentCancasId', { id: canvasId }); this.$store.dispatch('config/setCurrentCancasId', { id: canvasId });
return canvasId; return canvasId;
}, },
width() { width() {
return this.$store.state.config.width; return this.$store.state.config.width;
}, },
height() { height() {
return this.$store.state.config.height; return this.$store.state.config.height;
}, },
show() { show() {
if (this.mode == TrainingMode.EDIT || this.mode == TrainingMode.MAP_EDIT) { if (this.mode == TrainingMode.EDIT || this.mode == TrainingMode.MAP_EDIT) {
return true; return true;
} }
return false; return false;
}, },
isScreen() { isScreen() {
return this.$route.params.mode == 'dp' || this.$store.state.training.roles == 'BigScreen'; return this.$route.params.mode == 'dp' || this.$store.state.training.roles == 'BigScreen';
} }
}, },
watch: { watch: {
'$store.state.map.map': function (val, old) { '$store.state.map.map': function (val, old) {
try { try {
if (val) { if (val) {
this.setMap(val); this.setMap(val);
} else { } else {
this.mapViewLoaded(false); this.mapViewLoaded(false);
} }
} catch (error) { } catch (error) {
console.log('[ERROR] ', error); console.log('[ERROR] ', error);
this.mapViewLoaded(false); this.mapViewLoaded(false);
} }
}, },
'$store.state.training.rezoomCount': function (val, old) { '$store.state.training.rezoomCount': function (val, old) {
this.setCenter(this.$store.state.training.offsetStationCode); this.setCenter(this.$store.state.training.offsetStationCode);
}, },
'$store.state.config.canvasSizeCount': function (val) { '$store.state.config.canvasSizeCount': function (val) {
this.resetSize(); this.resetSize();
}, },
'$store.state.menuOperation.magnifyCount': function () { '$store.state.menuOperation.magnifyCount': function () {
this.setMagnify(); this.setMagnify();
}, },
'$store.state.menuOperation.shrinkCount': function () { '$store.state.menuOperation.shrinkCount': function () {
this.setShrink(); this.setShrink();
}, },
$route() { $route() {
this.mapViewLoaded(true); this.mapViewLoaded(true);
} }
}, },
created() { created() {
EventBus.$on('viewLoading', (loading) => { EventBus.$on('viewLoading', (loading) => {
this.mapViewLoaded(loading); this.mapViewLoaded(loading);
}); });
EventBus.$on('viewProgressAt', (percentage) => { EventBus.$on('viewProgressAt', (percentage) => {
this.mapViewProgressAt(percentage); this.mapViewProgressAt(percentage);
}); });
EventBus.$on('refresh', () => { EventBus.$on('refresh', () => {
this.refresh(this.$store.state.map.map); this.refresh(this.$store.state.map.map);
}); });
}, },
mounted() { mounted() {
this.initLoadPage(); this.initLoadPage();
}, },
beforeDestroy() { beforeDestroy() {
EventBus.$off('refresh'); EventBus.$off('refresh');
EventBus.$off('viewLoading'); EventBus.$off('viewLoading');
EventBus.$off('viewProgressAt'); EventBus.$off('viewProgressAt');
this.$store.dispatch('map/mapClear'); this.$store.dispatch('map/mapClear');
if (this.$jlmap) { if (this.$jlmap) {
this.$jlmap.dispose(); this.$jlmap.dispose();
} }
}, },
methods: { methods: {
// 初始化jlmap // 初始化jlmap
initLoadPage() { initLoadPage() {
document.getElementById(this.canvasId).oncontextmenu = function (e) { document.getElementById(this.canvasId).oncontextmenu = function (e) {
return false; return false;
}; };
// 默认个人地图绘制可以滚轮放大缩小 其他地图显示不允许此操作 // 默认个人地图绘制可以滚轮放大缩小 其他地图显示不允许此操作
const path = window.location.href; const path = window.location.href;
let flag = false; let flag = false;
if (path.includes('design/userlist/map/draw')) { if (path.includes('design/userlist/map/draw')) {
flag = true; flag = true;
} }
Vue.prototype.$jlmap = new Jlmap({ Vue.prototype.$jlmap = new Jlmap({
dom: document.getElementById(this.canvasId), dom: document.getElementById(this.canvasId),
config: { config: {
renderer: 'canvas', renderer: 'canvas',
width: this.width, width: this.width,
height: this.height height: this.height
}, },
options: { options: {
scaleRate: 1, scaleRate: 1,
offsetX: 0, offsetX: 0,
offsetY: 0, offsetY: 0,
zoomOnMouseWheel: flag zoomOnMouseWheel: flag
}, },
methods: { methods: {
dataLoaded: this.handleDataLoaded, dataLoaded: this.handleDataLoaded,
viewLoaded: this.handleViewLoaded, viewLoaded: this.handleViewLoaded,
stateLoaded: this.handleStateLoaded stateLoaded: this.handleStateLoaded
} }
}); });
this.$jlmap.on('dataZoom', this.onDataZoom, this); this.$jlmap.on('dataZoom', this.onDataZoom, this);
this.$jlmap.on('selected', this.onSelected, this); this.$jlmap.on('selected', this.onSelected, this);
this.$jlmap.on('contextmenu', this.onContextMenu, this); this.$jlmap.on('contextmenu', this.onContextMenu, this);
window.document.oncontextmenu = function () { window.document.oncontextmenu = function () {
return false; return false;
}; };
}, },
// 重置jlmap宽高 // 重置jlmap宽高
resetSize() { resetSize() {
this.$nextTick(() => { this.$nextTick(() => {
this.$jlmap && this.$jlmap.resize({ width: this.width, height: this.height }); this.$jlmap && this.$jlmap.resize({ width: this.width, height: this.height });
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode }); this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
setTimeout(() => { setTimeout(() => {
this.$store.dispatch('config/resetCanvasOffset'); this.$store.dispatch('config/resetCanvasOffset');
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}, 100); }, 100);
}); });
}, },
// 设置显示图级 // 设置显示图级
setLayerVisible(layer) { setLayerVisible(layer) {
this.$jlmap && this.$jlmap.setLayerVisible(layer); this.$jlmap && this.$jlmap.setLayerVisible(layer);
}, },
// 设置显示图层 // 设置显示图层
setLevelVisible(levels) { setLevelVisible(levels) {
this.$jlmap && this.$jlmap.setLevelVisible(levels); this.$jlmap && this.$jlmap.setLevelVisible(levels);
}, },
// 设置显示中心 // 设置显示中心
setCenter(deviceCode) { setCenter(deviceCode) {
this.$jlmap && this.$jlmap.setCenter(deviceCode); this.$jlmap && this.$jlmap.setCenter(deviceCode);
}, },
// 地图数据加载完成 // 地图数据加载完成
handleDataLoaded() { handleDataLoaded() {
this.$store.dispatch('map/mapDataLoaded'); this.$store.dispatch('map/mapDataLoaded');
}, },
// 地图视图加载完成 // 地图视图加载完成
handleViewLoaded() { handleViewLoaded() {
this.$store.dispatch('map/mapViewLoaded'); this.$store.dispatch('map/mapViewLoaded');
if (!this.$store.state.training.prdType) { if (!this.$store.state.training.prdType) {
this.mapViewLoaded(false); this.mapViewLoaded(false);
} }
}, },
// 地图状态加载完成 // 地图状态加载完成
handleStateLoaded() { handleStateLoaded() {
this.mapViewLoaded(false); this.mapViewLoaded(false);
}, },
// 地图视图更新 // 地图视图更新
handleViewUpdate() { handleViewUpdate() {
}, },
// 地图状态更新 // 地图状态更新
handleStateUpdate() { handleStateUpdate() {
}, },
// 视图参数改变 // 视图参数改变
handleOptionsUpdate(options) { handleOptionsUpdate(options) {
}, },
// 视图缩放事件 // 视图缩放事件
onDataZoom(dataZoom) { onDataZoom(dataZoom) {
this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + ''; this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + ''; this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = dataZoom.scaleRate + ''; this.dataZoom.scaleRate = dataZoom.scaleRate + '';
const skinCode = this.$store.getters['map/skinCode']; const skinCode = this.$store.getters['map/skinCode'];
if (skinCode) { if (skinCode) {
const param = { const param = {
scaleRate: this.dataZoom.scaleRate, scaleRate: this.dataZoom.scaleRate,
offsetY: this.dataZoom.offsetY, offsetY: this.dataZoom.offsetY,
offsetX: this.dataZoom.offsetX, offsetX: this.dataZoom.offsetX,
skinCode: skinCode skinCode: skinCode
}; };
this.$store.dispatch('map/updateZoom', this.dataZoom); this.$store.dispatch('map/updateZoom', this.dataZoom);
localStore.set(`scaleRate_${skinCode}`, JSON.stringify(param)); // 保存缩放倍数 localStore.set(`scaleRate_${skinCode}`, JSON.stringify(param)); // 保存缩放倍数
} }
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}, },
// 点击选择事件 // 点击选择事件
onSelected(em) { onSelected(em) {
this.$emit('onSelect', em); this.$emit('onSelect', em);
}, },
// 右键点击事件 // 右键点击事件
onContextMenu(em) { onContextMenu(em) {
this.$emit('onMenu', em); this.$emit('onMenu', em);
}, },
// 设置地图加载状态 // 设置地图加载状态
mapViewLoaded(loading) { mapViewLoaded(loading) {
this.loading = loading; this.loading = loading;
if (loading) { if (loading) {
this.$refs.progressBar&&this.$refs.progressBar.start(); this.$refs.progressBar && this.$refs.progressBar.start();
} else { } else {
this.$refs.progressBar&&this.$refs.progressBar.end(true); this.$refs.progressBar && this.$refs.progressBar.end(true);
} }
}, },
// 设置地图加载进度 // 设置地图加载进度
mapViewProgressAt(percentage) { mapViewProgressAt(percentage) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.progressBar.progressAt(percentage); this.$refs.progressBar.progressAt(percentage);
}); });
}, },
// 设置新的地图数据 // 设置新的地图数据
setMap(map) { setMap(map) {
this.$jlmap.setMap(map, this.$store.state.map.mapDevice); this.$jlmap.setMap(map, this.$store.state.map.mapDevice);
}, },
// 刷新地图数据 // 刷新地图数据
refresh(map) { refresh(map) {
}, },
// 缩小 // 缩小
setShrink() { setShrink() {
this.$jlmap.setOptions({type: 'zoom', scale: -1}); this.$jlmap.setOptions({type: 'zoom', scale: -1});
}, },
// 放大 // 放大
setMagnify() { setMagnify() {
this.$jlmap.setOptions({type: 'zoom', scale: 1}); this.$jlmap.setOptions({type: 'zoom', scale: 1});
} }
} }
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@ -288,13 +288,13 @@ export default {
} }
.zoom-view { .zoom-view {
// position: fixed;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: #fff; background: #fff;
padding-top: 5px; padding-top: 5px;
height: 42px; height: 42px;
border-bottom: 1px #f3f3f3 solid; border-bottom: 1px #f3f3f3 solid;
border-right: 1px #f3f3f3 solid;
} }
/deep/ { /deep/ {

180
src/views/map/mapdraft/mapedit/configMap.vue → src/views/map/mapdraft/configMap.vue
View File

@ -37,98 +37,98 @@
import { ViewMode } from '@/scripts/ConstDic'; import { ViewMode } from '@/scripts/ConstDic';
export default { export default {
name: 'ConfigMap', name: 'ConfigMap',
data () { data () {
return { return {
ViewMode: ViewMode, ViewMode: ViewMode,
dialogTableVisible: false, dialogTableVisible: false,
viewSelect: [ViewMode.LOGIC, ViewMode.PHYSICAL], viewSelect: [ViewMode.LOGIC, ViewMode.PHYSICAL],
LogicalViewTypeList: [ LogicalViewTypeList: [
{ code: 'Link', name: this.$t('map.link') } { code: 'Link', name: this.$t('map.link') }
], ],
PhysicalViewTypeList: [ PhysicalViewTypeList: [
{ code: 'Section', name: this.$t('map.section') }, { code: 'Section', name: this.$t('map.section') },
{ code: 'Signal', name: this.$t('map.signal') }, { code: 'Signal', name: this.$t('map.signal') },
{ code: 'Switch', name: this.$t('map.switch') } { code: 'Switch', name: this.$t('map.switch') }
], ],
HybridViewTypeList: [], HybridViewTypeList: [],
defaultLogicalSelect: [], defaultLogicalSelect: [],
defaultPhysicalSelect: [], defaultPhysicalSelect: [],
defaultHybridSelect: [], defaultHybridSelect: [],
logicalLevelsSelect: [], logicalLevelsSelect: [],
physicalLevelsSelect: [], physicalLevelsSelect: [],
hybridLevelsSelect: [] // 混合图层 hybridLevelsSelect: [] // 混合图层
}; };
}, },
watch: { watch: {
'$store.state.map.mapDataLoadedCount': function (val) { '$store.state.map.mapDataLoadedCount': function (val) {
this.handleSelectView(this.viewSelect); this.handleSelectView(this.viewSelect);
} }
}, },
mounted() { mounted() {
this.initPage(); this.initPage();
}, },
methods: { methods: {
doShow() { doShow() {
this.dialogTableVisible = true; this.dialogTableVisible = true;
}, },
doClose() { doClose() {
this.dialogTableVisible = false; this.dialogTableVisible = false;
}, },
initPage() { initPage() {
this.$Dictionary.logicalViewType().then(list => { this.$Dictionary.logicalViewType().then(list => {
this.LogicalViewTypeList = list; this.LogicalViewTypeList = list;
list.forEach(v => { list.forEach(v => {
this.HybridViewTypeList.push(v); this.HybridViewTypeList.push(v);
this.hybridLevelsSelect.push(v.code); this.hybridLevelsSelect.push(v.code);
this.defaultHybridSelect.push(v.code); this.defaultHybridSelect.push(v.code);
}); });
this.LogicalViewTypeList.forEach(elem => { this.LogicalViewTypeList.forEach(elem => {
this.logicalLevelsSelect.push(elem.code); this.logicalLevelsSelect.push(elem.code);
this.defaultLogicalSelect.push(elem.code); this.defaultLogicalSelect.push(elem.code);
}); });
}); });
this.$Dictionary.physicalViewType().then(list => { this.$Dictionary.physicalViewType().then(list => {
this.PhysicalViewTypeList = list; this.PhysicalViewTypeList = list;
list.forEach(v => { list.forEach(v => {
this.HybridViewTypeList.push(v); this.HybridViewTypeList.push(v);
this.hybridLevelsSelect.push(v.code); this.hybridLevelsSelect.push(v.code);
this.defaultHybridSelect.push(v.code); this.defaultHybridSelect.push(v.code);
}); });
this.PhysicalViewTypeList.forEach(elem => { this.PhysicalViewTypeList.forEach(elem => {
this.physicalLevelsSelect.push(elem.code); this.physicalLevelsSelect.push(elem.code);
this.defaultPhysicalSelect.push(elem.code); this.defaultPhysicalSelect.push(elem.code);
}); });
}); });
}, },
handleSelectView(value) { handleSelectView(value) {
if (value.length == 2) { if (value.length == 2) {
this.$emit('handleSelectView', '03'); this.$emit('handleSelectView', '03');
this.hybridLevelsSelect = this.copyList(this.defaultHybridSelect); this.hybridLevelsSelect = this.copyList(this.defaultHybridSelect);
} else { } else {
this.$emit('handleSelectView', value); this.$emit('handleSelectView', value);
if (this.viewSelect[0] == this.ViewMode.LOGIC) { if (this.viewSelect[0] == this.ViewMode.LOGIC) {
this.logicalLevelsSelect = this.copyList(this.defaultLogicalSelect); this.logicalLevelsSelect = this.copyList(this.defaultLogicalSelect);
} else { } else {
this.physicalLevelsSelect = this.copyList(this.defaultPhysicalSelect); this.physicalLevelsSelect = this.copyList(this.defaultPhysicalSelect);
} }
} }
}, },
handleSelectLogicalView(handle) { handleSelectLogicalView(handle) {
this.$emit('handleSelectLogicalView', handle); this.$emit('handleSelectLogicalView', handle);
}, },
handleSelectPhysicalView(handle) { handleSelectPhysicalView(handle) {
this.$emit('handleSelectPhysicalView', handle); this.$emit('handleSelectPhysicalView', handle);
}, },
handleSelectHybridView(handle) { handleSelectHybridView(handle) {
this.$emit('handleSelectHybridView', handle); this.$emit('handleSelectHybridView', handle);
}, },
copyList(list) { copyList(list) {
return JSON.parse(JSON.stringify(list)); return JSON.parse(JSON.stringify(list));
} }
} }
}; };
</script> </script>

210
src/views/map/mapdraft/dataRelation/automaticoperate/detail.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.automaticSignalList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
<pre-view-field ref="previewField" :map-info="mapInfo" />
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { getAutoSignalList, delAutoSignal, getAutoSignalDetail } from '@/api/jmap/mapdraft';
import PreViewField from './preview';
export default {
name: 'RouteDetail',
components: {
PreViewField
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
signalCode: {
type: 'select',
label: this.$t('map.signal'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.automaticSignalCode'),
prop: 'code'
},
{
title: this.$t('map.signalCodeName'),
prop: 'signalCode'
},
{
title: this.$t('map.signalCode'),
prop: 'code'
},
{
type: 'button',
title: this.$t('map.sectionData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.sectionDetail
}
]
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.editObj
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'signalList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.signalCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
formatName(code) {
let name = '';
const device = this.$store.getters['map/getDeviceByCode'](code);
if (device) {
name = device.uniqueName;
}
return name;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return getAutoSignalList(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.code = elem.signalCode;
elem.signalCode = that.formatName(elem.signalCode);
});
}
}
return data;
},
editObj(index, row) {
getAutoSignalDetail(row.id).then(response => {
const data = Object.assign({}, response.data);
data.autoSignalClearList = data.autoSignalClearList.map(elem => { return elem.sectionCode; });
this.$emit('autoMaticoSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除
delAutoSignal(row.id).then(response => {
this.$message.success(this.$t('map.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('map.failDelete'));
});
}
},
sectionDetail(index, row) {
const sectionDict = {};
this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: this.$t('map.sectionList'),
name: row.code,
model: {
field: 'autoSignalClearList',
items: [
{ prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.autoSignalClearList);
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

84
src/views/map/mapdraft/dataRelation/automaticoperate/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div style="height: 100%;">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @autoMaticoSelected="autoMaticoSelected" />
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'AutomaticOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
autoMaticoSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

76
src/views/map/mapdraft/mapedit/dataRelation/automaticoperate/preview.vue → src/views/map/mapdraft/dataRelation/automaticoperate/preview.vue
View File

@ -31,43 +31,43 @@
<script> <script>
export default { export default {
name: 'DictionaryDetailEdit', name: 'DictionaryDetailEdit',
props: { props: {
mapInfo: { mapInfo: {
type: Object, type: Object,
default() { default() {
return null; return null;
} }
} }
}, },
data() { data() {
return { return {
show: false, show: false,
title: '', title: '',
name: '', name: '',
form: [], form: [],
data: [] data: []
}; };
}, },
methods: { methods: {
doShow(fieldList, dataList) { doShow(fieldList, dataList) {
if (fieldList.model) { if (fieldList.model) {
const items = fieldList.model.items; const items = fieldList.model.items;
// if (fieldList.model.convert) { // if (fieldList.model.convert) {
// data = fieldList.model.convert(data); // data = fieldList.model.convert(data);
// } // }
if (items) { if (items) {
this.form = items; this.form = items;
this.name = fieldList.name; this.name = fieldList.name;
this.data = dataList; this.data = dataList;
this.title = fieldList.title; this.title = fieldList.title;
} }
this.show = true; this.show = true;
} }
}, },
doClose(done) { doClose(done) {
this.show = false; this.show = false;
} }
} }
}; };
</script> </script>

190
src/views/map/mapdraft/dataRelation/automaticoperate/route.vue Normal file
View File

@ -0,0 +1,190 @@
<template>
<div style="height: 100%;">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="180px" size="mini">
<div class="definition">
<el-form-item :label="$t('map.signalID')" prop="signalCode">
<el-select v-model="addModel.signalCode" clearable :filterable="true">
<el-option
v-for="item in signalList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button :type="field === 'signalCode' ? 'danger' : 'primary'" @click="hover('signalCode')">{{ $t('map.activate') }}
</el-button>
</el-form-item>
<el-form-item :label="$t('map.routeTriggerSectionList')" prop="autoSignalClearList">
<el-select v-model="addModel.autoSignalClearList" multiple clearable :filterable="true">
<el-option
v-for="item in sectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'autoSignalClearList' ? 'danger' : 'primary'"
@click="hover('autoSignalClearList')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
</el-button>
<el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
</el-button>
</el-button-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { postAutoSignal, putAutoSignal } from '@/api/jmap/mapdraft';
import { ViewMode } from '@/scripts/ConstDic';
import { formatName } from '@/utils/runPlan';
export default {
name: 'RouteOperation',
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
ViewMode: ViewMode,
field: '',
isSave: true,
loading: false,
editModel: {},
addModel: {
id: '',
code: '',
mapId: '',
signalCode: '',
autoSignalClearList: []
},
editShow: false,
rules: {
signalCode: [
{ required: true, message: this.$t('map.pleaseSelectSignal'), trigger: 'change' }
],
autoSignalClearList: [
{ required: true, message: this.$t('map.triggerSegmentData'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'sectionList'
])
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
this.editShow = true;
}
}
},
mounted() {
},
methods: {
hover(field) {
this.field = field === this.field ? '' : field;
},
formatName(code) {
return formatName(code);
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'signalCode'.toUpperCase()) {
this.addModel.signalCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'autoSignalClearList'.toUpperCase()) {
if (this.addModel.autoSignalClearList.indexOf(selected.code) === -1) {
this.addModel.autoSignalClearList.push(selected.code);
}
}
}
},
buildModel(code) {
const model = Object.assign({}, this.addModel);
if (code) { model['code'] = code; }
model['mapId'] = this.mapInfo.id;
model['autoSignalId'] = this.addModel.id;
model['autoSignalClearList'] = this.addModel.autoSignalClearList.map(elem => { return { sectionCode: elem }; });
return model;
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
postAutoSignal(this.buildModel(getUID('autoSingle'))).then(resp => {
this.$message.success(this.$t('map.automaticSignalSuccessful'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('map.failedCreateSignal'));
this.loading = false;
});
}
});
},
update() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
putAutoSignal(this.buildModel()).then(resp => {
this.$message.success(this.$t('map.automaticSignalUpdateSucceeded'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('map.automaticSignalUpdateFailed'));
this.loading = false;
});
}
});
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel.mapId = this.mapInfo.id;
this.addModel.autoSignalClearList = [];
this.addModel.signalCode = '';
this.addModel.code = '';
this.isSave = true;
}
}
}
};
</script>

234
src/views/map/mapdraft/dataRelation/index.vue Normal file
View File

@ -0,0 +1,234 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control">
<div class="joylink-card">
<div class="clearfix">
<span>
{{ $t('map.mapName') }}
<b>{{ mapInfo.name }}</b>
</span>
<el-button type="text" class="mapEdit_box" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
<el-button type="text" class="mapEdit_box" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
<el-button type="text" class="mapEdit_box" @click="drawMap">{{ $t('map.drawMap') }}</el-button>
<el-button type="text" class="mapEdit_box" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
</div>
<el-tabs v-model="enabledTab" type="card" class="map_card" @tab-click="changePane">
<el-tab-pane label="进路" class="tab_pane_box" name="route">
<route-operate
ref="routeOperate"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="路径单元" class="tab_pane_box" name="path">
<path-operate
ref="pathOperate"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="交路" class="tab_pane_box" name="routing">
<routing-operate
ref="routingOperate"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="自动信号" class="tab_pane_box" name="automatic">
<automatic-operate
ref="automaticOperate"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="联动道岔" class="tab_pane_box" name="swtich">
<switch-operate
ref="SwitchOperate"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
</el-tabs>
</div>
</div>
</transition>
</template>
<script>
import RouteOperate from './routeoperate/index';
import RoutingOperate from './routingoperate/index';
import AutomaticOperate from './automaticoperate/index';
import SwitchOperate from './switchoperate/index';
import PathOperate from './pathoperate/index';
export default {
name: 'DataRelation',
components: {
RouteOperate,
RoutingOperate,
AutomaticOperate,
SwitchOperate,
PathOperate
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
mapInfo: {
type: Object,
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
}
},
data() {
return {
enabledTab: 'route'
};
},
mounted() {
},
methods: {
showMap() {
this.$emit('showMap');
},
createRouteEvent() {
switch (this.enabledTab) {
case 'route':
this.$refs.routeOperate.createRouteEvent();
break;
case 'routing':
this.$refs.routingOperate.createRouteEvent();
break;
case 'automatic':
this.$refs.automaticOperate.createRouteEvent();
break;
case 'swtich':
this.$refs.SwitchOperate.createRouteEvent();
break;
case 'path':
this.$refs.pathOperate.createRouteEvent();
break;
}
},
previewRouteEvent() {
switch (this.enabledTab) {
case 'route':
this.$refs.routeOperate.previewRouteEvent();
break;
case 'routing':
this.$refs.routingOperate.previewRouteEvent();
break;
case 'automatic':
this.$refs.automaticOperate.previewRouteEvent();
break;
case 'swtich':
this.$refs.SwitchOperate.previewRouteEvent();
break;
case 'path':
this.$refs.pathOperate.previewRouteEvent();
break;
}
},
changePane(data) {
this.enabledTab = data.name;
},
setSelected(selected) {
switch (this.enabledTab) {
case 'route':
this.$refs.routeOperate.setSelected(selected);
break;
case 'routing':
this.$refs.routingOperate.setSelected(selected);
break;
case 'automatic':
this.$refs.automaticOperate.setSelected(selected);
break;
case 'swtich':
this.$refs.SwitchOperate.setSelected(selected);
break;
case 'path':
this.$refs.pathOperate.setSelected(selected);
break;
}
},
setCenter(code) {
this.$emit('setCenter', code);
},
drawMap() {
this.$emit('selectView', 'draft');
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.map-context {
display: block;
float: left;
margin-left: 5px;
}
.map-control {
float: right;
width: 100%;
height: 100%;
.clearfix{
height: 47px;
padding: 15px;
}
.joylink-card{
height: 100%;
}
}
.mapEdit_box{
float: right;
padding: 3px 0;
margin-right: 5px;
}
.map_card {
height: calc(100% - 47px);
.tab_pane_box{
height: 100%;
}
}
.physical-view {
line-height: 25px;
height: 118px;
padding-left: 12px;
.el-checkbox {
width: 70px;
margin: 0;
margin-right: 30px;
}
}
/deep/ {
.map_card .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #f5f7fa;
background: #f5f7fa;
}
.map_card .el-tabs__content{
height: calc(100% - 56px);
}
}
/deep/ .map-draft-group {
float: right;
margin: 10px 5px;
}
/deep/ {
.view-control {
overflow-y: auto;
}
}
</style>

198
src/views/map/mapdraft/dataRelation/pathoperate/detail.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.pathUnitList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { getRouteUnitList, delRouteUnit, getRouteUnit } from '@/api/jmap/pathunit';
export default {
name: 'RouteDetail',
components: {
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
startSectionCode: {
type: 'select',
label: this.$t('map.startSectionCode'),
config: {
data: []
}
},
endSectionCode: {
type: 'select',
label: this.$t('map.endSectionCode'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.pathUnitCode'),
prop: 'code'
},
{
title: this.$t('map.pathUnitMapName'),
prop: 'mapId'
},
{
title: this.$t('map.startSectionCode'),
prop: 'startSectionCode'
},
{
title: this.$t('map.endSectionCode'),
prop: 'endSectionCode'
},
{
title: this.$t('map.orderNum'),
prop: 'orderNum'
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.editObj
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList'
])
},
watch: {
sectionList: function (val, old) {
const list = [];
if (val && val.length) {
val.forEach(elem => {
if (elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack) {
list.push({ label: this.formatName(elem.code), value: elem.code });
}
});
this.queryForm.queryObject.startSectionCode.config.data = list;
this.queryForm.queryObject.endSectionCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
formatName(code) {
let name = '';
const section = this.$store.getters['map/getDeviceByCode'](code);
if (section) {
const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
if (station) {
name += `${station.name} `;
}
name += `${section.name} (${section.code})`;
}
return name;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return getRouteUnitList(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.startSectionCode = that.formatName(elem.startSectionCode);
elem.endSectionCode = that.formatName(elem.endSectionCode);
});
}
}
return data;
},
editObj(index, row) {
getRouteUnit(row.id).then(response => {
const data = response.data;
this.$emit('routeSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除
delRouteUnit(row.id).then(response => {
this.$message.success(this.$t('tip.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('tip.failDelete'));
});
}
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

84
src/views/map/mapdraft/dataRelation/pathoperate/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div style="height: 100%;">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'PathOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routeSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

200
src/views/map/mapdraft/dataRelation/pathoperate/pathRoute.vue Normal file
View File

@ -0,0 +1,200 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.pathUnitList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap, listRouteRoute } from '@/api/jmap/mapdraft';
export default {
name: 'PathRoute',
components: {
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
name: {
type: 'select',
label: this.$t('map.pathName'),
config: {
data: []
}
},
stationCode: {
type: 'select',
label: this.$t('map.routeStationName'),
config: {
data: []
}
},
startSignalCode: {
type: 'select',
label: this.$t('map.startingSignalName'),
config: {
data: []
}
},
endSignalCode: {
type: 'select',
label: this.$t('map.endingSignalName'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: true,
indexShow: true,
columns: [
{
title: this.$t('map.routeID'),
prop: 'code'
},
{
title: this.$t('map.pathName'),
prop: 'name'
},
{
title: this.$t('map.pathUnitMapName'),
prop: 'mapId'
},
{
title: this.$t('map.routeStationName'),
prop: 'stationCode'
},
{
title: this.$t('map.startingSignalName'),
prop: 'startSignalCode'
},
{
title: this.$t('map.endingSignalName'),
prop: 'endSignalCode'
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.add'),
handleClick: this.addObj
}
]
}
],
selectAllClick: this.selectAll
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'switchList',
'sectionList',
'stationList',
'stationStandList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.startSignalCode.config.data = list;
this.queryForm.queryObject.endSignalCode.config.data = list;
}
},
stationList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].name, value: val[i].code });
}
this.queryForm.queryObject.stationCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return listRouteRoute(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
that.$convertSpecifiedField(elem, that.stationList, 'code', 'name', ['stationCode']);
that.$convertSpecifiedField(elem, that.signalList, 'code', 'name', ['startSignalCode', 'endSignalCode']);
});
}
}
return data;
},
addObj(index, row) {
const data = [];
data.push(row);
this.$emit('routeSelected', data);
this.doClose();
},
selectAll(data) {
this.$emit('routeSelected', data);
this.doClose();
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

316
src/views/map/mapdraft/dataRelation/pathoperate/route.vue Normal file
View File

@ -0,0 +1,316 @@
<template>
<div style="height: 100%;">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
<div class="path-box">
<el-steps :active="display" style="display: none;">
<el-step title="路径单元创建" icon="el-icon-edit" />
<el-step title="路径单元整合" icon="el-icon-setting" />
</el-steps>
<div v-show="display == 1" class="definition">
<el-form-item :label="$t('map.startSectionCodeColon')" prop="startSectionCode">
<el-select v-model="addModel.startSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="formatName(item.code)"
:value="item.code"
/>
<!-- </el-input> -->
</el-select>
<el-button
:type=" field === 'startSectionCode' ? 'danger' : 'primary'"
@click="hover('startSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.endSectionCodeColon')" prop="endSectionCode">
<el-select v-model="addModel.endSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="formatName(item.code)"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'endSectionCode' ? 'danger' : 'primary'"
@click="hover('endSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" size="small" style="margin-top: 10px" @click="nextStep">下一步
</el-button>
</el-button-group>
</el-form-item>
</div>
<div v-show="display == 2" class="rule">
<el-button
type="primary"
size="small"
style="float: right; margin-right: 20px; margin-bottom: 10px;"
@click="pushSwitch"
>{{ $t('map.add') }}</el-button>
<el-table
:data="addModel.mapRouteUnitRelList"
row-key="id"
border
style="width: 95%; margin: 0 auto"
>
<el-table-column type="index" />
<el-table-column prop="routeCode" label="进路code" />
<el-table-column prop="routeName" label="进路名称" />
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.prevent="deletePathUnit(scope.$index, addModel.mapRouteUnitRelList)"
>
{{ $t('map.remove') }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item>
<el-button-group>
<el-button type="primary" size="small" style="margin-top: 10px" @click="lastStep">{{ $t('map.lastStep') }}
</el-button>
</el-button-group>
<el-button-group>
<el-button
v-if="!editShow"
type="primary"
size="small"
:loading="loading"
style="margin-top: 10px"
@click="save"
>{{ $t('map.save') }}</el-button>
<el-button
v-if="editShow"
type="warning"
size="small"
:loading="loading"
style="margin-top: 10px"
@click="save"
>{{ $t('map.updata') }}</el-button>
</el-button-group>
</el-form-item>
</div>
</div>
</el-form>
</el-scrollbar>
<path-route ref="pathRoute" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { addRouteUnit, setRouteUnit } from '@/api/jmap/pathunit';
import PathRoute from './pathRoute';
import { ViewMode } from '@/scripts/ConstDic';
// import Sortable from 'sortablejs';
export default {
name: 'RouteOperation',
components: {
PathRoute
},
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
ViewMode: ViewMode,
field: '',
code: '',
type: '',
loading: false,
addModel: {
mapId: '',
code: getUID('RouteUnit'),
startSectionCode: '',
endSectionCode: '',
mapRouteUnitRelList: []
},
editShow: false,
display: 1,
rules: {
startSectionCode: [
{ required: true, message: this.$t('rules.pleaseSelectStartSignal'), trigger: 'change' }
],
endSectionCode: [
{ required: true, message: this.$t('rules.pleaseSelectEndSignal'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList'
]),
filterSectionList() {
if (this.sectionList) {
return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
} else {
return [];
}
}
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
this.display = 1;
this.editShow = true;
}
}
},
mounted() {
// this.rowDrop();
},
methods: {
// 行拖拽
// rowDrop() {
// const that = this;
// const tbody = document.querySelector('.el-table__body-wrapper tbody');
// if (tbody) {
// Sortable.create(tbody, {
// onEnd({ newIndex, oldIndex }) {
// const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
// that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
// }
// });
// }
// },
hover(field) {
this.field = field === this.field ? '' : field;
},
formatName(code) {
let name = '';
const section = this.$store.getters['map/getDeviceByCode'](code);
if (section) {
const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
if (station) {
name += `${station.name} `;
}
name += `${section.name} (${section.code})`;
}
return name;
},
pushSwitch() {
if (this.$refs && this.$refs.pathRoute) {
this.$refs.pathRoute.doShow();
}
},
routeSelected(data) {
data.forEach((element, index) => {
this.addModel.mapRouteUnitRelList.push({
routeCode: element.code,
routeName: element.name
// routeUnitCode: this.addModel.code
});
});
},
// 下一步
nextStep() {
this.$refs.form.validate((valid) => {
if (valid) {
this.display = 2;
}
});
},
lastStep() {
this.display = 1;
},
buildModel() {
this.addModel.mapRouteUnitRelList.forEach((elem, index) => {
elem['orderNum'] = index + 1;
});
const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id;
return model;
},
save() {
this.loading = true;
if (this.editShow) {
setRouteUnit(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.updateSuccessfully'));
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
});
} else {
addRouteUnit(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.createSuccess'));
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
});
}
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.display = 1;
this.editShow = false;
this.addModel = {
mapId: this.mapInfo.id,
code: getUID('RouteUnit'),
startSectionCode: '',
endSectionCode: '',
mapRouteUnitRelList: []
};
this.loading = false;
}
},
// 移除列表
deletePathUnit(index, data) {
this.addModel.mapRouteUnitRelList.splice(index, 1);
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
this.addModel.startSectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
this.addModel.endSectionCode = selected.code;
}
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-radio {
margin-right: 10px;
}
</style>

598
src/views/map/mapdraft/dataRelation/routeoperate/detail.vue Normal file
View File

@ -0,0 +1,598 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.routePreview')" :visible.sync="show" width="95%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
<pre-view-field ref="previewField" :map-info="mapInfo" />
<!-- <related-route ref="relatedRoute" :map-info="mapInfo" @saveRelated="saveRelated" /> -->
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap, listRouteRoute, deleteRouteRoute, queryRouteRouteDetail, updateRouteRoute } from '@/api/jmap/mapdraft'; /** listRouteMapRoute*/
import PreViewField from './preview';
// import RelatedRoute from './related';
export default {
name: 'RouteDetail',
components: {
PreViewField
// RelatedRoute
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
RouteNatureTypeList: [],
RouteAutoTypeList: [],
SwitchLocateTypeList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
name: {
type: 'text',
label: this.$t('map.pathName')
},
stationCode: {
type: 'select',
label: this.$t('map.routeStationName'),
config: {
data: []
}
},
startSignalCode: {
type: 'select',
label: this.$t('map.startingSignalName'),
config: {
data: []
}
},
endSignalCode: {
type: 'select',
label: this.$t('map.endingSignalName'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
// {
// title: this.$t('map.routeID'),
// prop: 'code'
// },
{
title: this.$t('map.pathName'),
prop: 'name'
},
// {
// title: this.$t('map.pathUnitMapName'),
// prop: 'mapId'
// },
{
title: this.$t('map.routeStationName'),
prop: 'stationCode'
},
{
title: this.$t('map.accessType'),
prop: 'natureType'
},
{
title: this.$t('map.automaticRouteType'),
prop: 'autoType'
},
{
title: this.$t('map.startingSignalName'),
prop: 'startSignalCode'
},
{
title: this.$t('map.endingSignalName'),
prop: 'endSignalCode'
},
{
title: this.$t('map.nearSectionCode'),
prop: 'nearSectionCode'
},
{
type: 'button',
title: this.$t('map.continueProtectSwitchData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.overlapSwitchDetail
}
]
},
{
type: 'button',
title: this.$t('map.accessSideTurnoutData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.flankProtectionSwitchDetail
}
]
},
{
title: this.$t('map.turnBackRailName'),
prop: 'turnBackSectionCode'
},
{
type: 'button',
title: this.$t('map.routeSegmentData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.routeTrigger
}
]
},
{
type: 'button',
title: this.$t('map.routeProtectsData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.routeOverlap
}
]
},
{
type: 'button',
title: this.$t('map.accessPhysical'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.sectionDetail
}
]
},
{
type: 'button',
title: this.$t('map.routeRouteScreenData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.stationStandDetail
}
]
},
{
type: 'button',
title: this.$t('map.routeRouteTurnoutData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.routeSwitchDetail
}
]
},
// {
// type: 'button',
// title: this.$t('map.hostileApproachData'),
// buttons: [
// {
// name: this.$t('map.relation'),
// handleClick: this.related
// }
// ]
// },
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.edit
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'switchList',
'sectionList',
'stationList',
'stationStandList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.startSignalCode.config.data = list;
this.queryForm.queryObject.endSignalCode.config.data = list;
}
},
stationList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].name, value: val[i].code });
}
this.queryForm.queryObject.stationCode.config.data = list;
}
}
},
mounted() {
this.$Dictionary.routeNatureType().then(list => {
this.RouteNatureTypeList = list;
});
this.$Dictionary.routeAutoType().then(list => {
this.RouteAutoTypeList = list;
});
this.$Dictionary.switchLocateType().then(list => {
this.SwitchLocateTypeList = list;
});
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return listRouteRoute(this.mapInfo.id, params);
}
},
acquireMapList() {
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.RouteAutoTypeList, 'code', 'name', ['autoType']);
that.$convertSpecifiedField(elem, that.RouteNatureTypeList, 'code', 'name', ['natureType']);
that.$convertSpecifiedField(elem, that.SwitchLocateTypeList, 'code', 'name', ['overlapSwitchLocateType']);
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
that.$convertSpecifiedField(elem, that.switchList, 'code', 'name', ['routeOverlapSwitchList']);
that.$convertSpecifiedField(elem, that.signalList, 'code', 'uniqueName', ['startSignalCode', 'endSignalCode']);
that.$convertSpecifiedField(elem, that.stationList, 'code', 'name', ['stationCode']);
that.$convertSpecifiedField(elem, that.sectionList, 'code', 'name', ['nearSectionCode', 'autoTriggerSectionCode', 'turnBackSectionCode']);
});
}
}
return data;
},
// 自动触发区段数据列表
async routeTrigger(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const sectionDict = {};
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: this.$t('map.routeSegmentData'),
name: row.name,
model: {
field: 'routeTriggerSectionList',
items: [
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
{
prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeTriggerSectionList);
}
},
// 延续保护区段数据列表
async routeOverlap(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const sectionDict = {};
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路延续保护区段数据',
name: row.name,
model: {
items: [
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
{
prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeOverlapSectionList);
}
},
// 物理区段数据列表
async sectionDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const sectionDict = {};
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路物理区段数据',
name: row.name,
model: {
items: [
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
{
prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeSectionList);
}
},
// 屏蔽门数据列表
async stationStandDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const stationStandDict = {};
this.stationStandList.map(elem => { stationStandDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路屏蔽门数据',
name: row.name,
model: {
field: 'routeStandList',
items: [
{ prop: 'stationStandCode', label: '屏蔽门ID', type: 'text' },
{
prop: 'stationStandCode', label: '屏蔽门名称', type: 'select', options: stationStandDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeStationStandList);
}
},
async overlapSwitchDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const switchDict = {};
const switchTypeDict = {};
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '延续保护道岔数据',
name: row.name,
model: {
items: [
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
{
prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
},
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeOverlapSwitchList);
}
},
async flankProtectionSwitchDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const switchDict = {};
const switchTypeDict = {};
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路侧防道',
name: row.name,
model: {
items: [
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
{
prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
},
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeFlankProtectionList);
}
},
// 道岔段数据列表
async routeSwitchDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const switchDict = {};
const switchTypeDict = {};
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路道岔数据',
name: row.name,
model: {
field: 'routeSwitchList',
items: [
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
{
prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
},
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeSwitchList);
}
},
// againstDetail(index, row) {
// if (this.$refs && this.$refs.previewField && row) {
// listRouteMapRoute(row.mapId).then(response => {
// const againstDict = {};
// const data = response.data;
// data.forEach(elem => {
// againstDict[elem.code] = elem.name;
// });
// function convert(data) {
// if (data) {
// data.routeAgainstList = data.routeAgainstList.map(elem => {
// if (data.code === elem.routeCode) {
// return { code: elem.againstRouteCode };
// } else if (data.code === elem.againstRouteCode) {
// return { code: elem.routeCode };
// }
// });
// return data;
// }
// }
// this.mapList.forEach(elem => {
// if (elem.name === row.mapId) {
// const fieldList = {
// id: row.id,
// mapId: elem.id,
// title: '敌对进路',
// model: {
// field: 'routeAgainstList',
// convert: convert,
// items: [
// { prop: 'code', label: '敌对进路ID', type: 'text' },
// {
// prop: 'code', label: '敌对进路名称', type: 'select', options: againstDict
// }
// ]
// }
// };
// this.$refs.previewField.doShow(fieldList);
// }
// });
// }).catch(() => {
// this.$messageBox('操作错误');
// });
// }
// },
// 敌对进路数据列表
// async related(index, row) {
// if (this.$refs && this.$refs.relatedRoute) {
// const fieldList = {
// id: row.id,
// mapId: this.$route.params.mapId,
// code: row.code,
// name: row.name
// };
// this.$refs.relatedRoute.doShow(fieldList, row.routeAgainstList, row);
// }
// },
// 保存
saveRelated(row) {
updateRouteRoute(row).then(response => {
this.$message.success('更新成功');
}).catch(() => {
this.$messageBox('操作异常');
});
},
edit(index, row) {
this.mapList.forEach(elem => {
if (elem.name === row.mapId) {
const model = {
mapId: elem.id,
id: row.id
};
queryRouteRouteDetail(model).then(response => {
const data = response.data;
this.RouteNatureTypeList.forEach(elem => {
if (elem.name === data.natureType) {
data.natureType = elem.code;
}
});
this.RouteAutoTypeList.forEach(elem => {
if (elem.name === data.autoType) {
data.autoType = elem.code;
}
});
this.SwitchLocateTypeList.forEach(elem => {
if (elem.name === data.overlapSwitchLocateType) {
data.overlapSwitchLocateType = elem.code;
}
});
data.routeSectionList = data.routeSectionList.map(elem => { return elem.sectionCode; });
data.routeOverlapSectionList = data.routeOverlapSectionList.map(elem => { return elem.sectionCode; });
data.routeTriggerSectionList = data.routeTriggerSectionList.map(elem => { return elem.sectionCode; });
data.routeStandList = data.routeStandList.map(elem => { return elem.stationStandCode; });
this.$emit('routeSelected', data);
this.doClose();
});
}
});
},
deleteObj(index, row) {
if (row) {
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteRouteRoute(row.id).then(response => {
this.$message.success('删除成功');
this.reloadTable();
}).catch(() => {
this.$messageBox('删除失败');
});
}).catch(() => {
this.$message.info('已取消删除');
});
}
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

85
src/views/map/mapdraft/dataRelation/routeoperate/index.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div style="height: 100%;">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
@setCenter="setCenter"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'RouteOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routeSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

76
src/views/map/mapdraft/mapedit/dataRelation/routeoperate/preview.vue → src/views/map/mapdraft/dataRelation/routeoperate/preview.vue
View File

@ -31,43 +31,43 @@
<script> <script>
export default { export default {
name: 'DictionaryDetailEdit', name: 'DictionaryDetailEdit',
props: { props: {
mapInfo: { mapInfo: {
type: Object, type: Object,
default() { default() {
return null; return null;
} }
} }
}, },
data() { data() {
return { return {
show: false, show: false,
title: '', title: '',
name: '', name: '',
form: [], form: [],
data: [] data: []
}; };
}, },
methods: { methods: {
doShow(fieldList, dataList) { doShow(fieldList, dataList) {
if (fieldList.model) { if (fieldList.model) {
const items = fieldList.model.items; const items = fieldList.model.items;
if (fieldList.model.convert) { if (fieldList.model.convert) {
// data = fieldList.model.convert(data); // data = fieldList.model.convert(data);
} }
if (items) { if (items) {
this.form = items; this.form = items;
this.name = fieldList.name; this.name = fieldList.name;
this.data = dataList; this.data = dataList;
this.title = fieldList.title; this.title = fieldList.title;
} }
this.show = true; this.show = true;
} }
}, },
doClose(done) { doClose(done) {
this.show = false; this.show = false;
} }
} }
}; };
</script> </script>

103
src/views/map/mapdraft/dataRelation/routeoperate/related.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<el-dialog
v-dialogDrag
:title="mapInfo.name + ' / ' + editModel.name + ' / ' + title"
:visible.sync="show"
width="40%"
:before-close="doClose"
center
append-to-body
>
<el-form ref="form" :model="editModel" label-width="120px" size="mini">
<el-form-item :label="$t('map.routeName')" prop="name" readonly="true">
<el-input v-model="editModel.name" :disabled="true" />
</el-form-item>
<el-form-item :label="$t('map.associatedRoute')">
<el-transfer
v-model="routeColloction"
filterable
:filter-method="filterRoute"
:filter-placeholder="$t('map.pleaseEnterNameQuery')"
:data="routeData"
:titles="['进路集合', '关联进路ID']"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSave">{{ $t('map.save') }}</el-button>
<el-button @click="show = false">{{ $t('map.cancel') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { listRouteMapRoute } from '@/api/jmap/mapdraft';
export default {
name: 'DictionaryDetailEdit',
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
title: this.$t('map.associatedHostileRecord'),
routes: [],
routeColloction: [],
routeData: [],
editModel: {
code: '',
name: ''
},
row: {}
};
},
methods: {
filterRoute(query, item) {
return item.pinyin.indexOf(query) > -1;
},
doShow(fieldList, dataList, row) {
this.routeColloction = [];
this.routeData = [];
this.editModel.id = fieldList.id;
this.editModel.code = fieldList.code;
this.editModel.name = fieldList.name;
this.row = row || {};
this.routeColloction = (dataList || []).map(elem => { return elem.againstRouteCode; });
listRouteMapRoute(fieldList.mapId).then(response => {
if (response.data) {
this.routes = response.data;
this.routes.forEach(elem => {
if (elem.code !== this.editModel.code) {
this.routeData.push({
label: elem.name,
key: elem.code,
pinyin: elem.code
});
}
});
}
this.show = true;
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
});
},
doClose(done) {
this.show = false;
},
doSave() {
this.row.id = this.editModel.id;
this.row.routeCode = this.editModel.code;
this.row.mapId = this.mapInfo.id;
this.row.routeAgainstList = this.routeColloction.map(elem => { return { againstRouteCode: elem }; });
this.$emit('saveRelated', this.row);
}
}
};
</script>

562
src/views/map/mapdraft/mapedit/dataRelation/routeoperate/route.vue → src/views/map/mapdraft/dataRelation/routeoperate/route.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :style="{ height: cardHeight +'px' }"> <div style="height: 100%;">
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="190px" size="mini"> <el-form ref="form" :model="addModel" :rules="rules" label-width="190px" size="mini">
<el-form-item :label="$t('map.routeName')" prop="name"> <el-form-item :label="$t('map.routeName')" prop="name">
@ -314,300 +314,296 @@ import { createRouteRoute, updateRouteRoute } from '@/api/jmap/mapdraft';
// import { ViewMode } from '@/scripts/ConstDic'; // import { ViewMode } from '@/scripts/ConstDic';
export default { export default {
name: 'RouteOperation', name: 'RouteOperation',
props: { props: {
selected: { selected: {
type: Object, type: Object,
default() { default() {
return null; return null;
} }
}, },
mapInfo: { mapInfo: {
type: Object, type: Object,
default() { default() {
return null; return null;
} }
}, },
routeData: { routeData: {
type: Object, type: Object,
default() { default() {
return null; return null;
} }
}, }
cardHeight: { },
type: Number || String, data() {
required: true return {
} isSave: true,
}, field: '',
data() { overlapCode: '',
return { overlapType: '',
isSave: true, flankCode: '',
field: '', flankType: '',
overlapCode: '', routeCode: '',
overlapType: '', routeType: '',
flankCode: '', loading: false,
flankType: '', RouteNatureTypeList: [],
routeCode: '', /*
routeType: '',
loading: false,
RouteNatureTypeList: [],
/*
{ code: '01', name: '列车进路' }, { code: '01', name: '列车进路' },
{ code: '02', name: '调车进路' }, { code: '02', name: '调车进路' },
{ code: '03', name: '折返进路' } { code: '03', name: '折返进路' }
*/ */
RouteAutoTypeList: [], RouteAutoTypeList: [],
/* /*
{ code: '01', name: '自动进路' }, { code: '01', name: '自动进路' },
{ code: '02', name: '非自动进路' } { code: '02', name: '非自动进路' }
*/ */
SwitchLocateTypeList: [], SwitchLocateTypeList: [],
/* /*
{ code: '01', name: '定位' }, { code: '01', name: '定位' },
{ code: '02', name: '反位' } { code: '02', name: '反位' }
*/ */
addModel: { addModel: {
mapId: '', mapId: '',
code: '', code: '',
name: '', name: '',
stationCode: '', stationCode: '',
startSignalCode: '', startSignalCode: '',
endSignalCode: '', endSignalCode: '',
nearSectionCode: '', nearSectionCode: '',
autoTriggerSectionCode: '', autoTriggerSectionCode: '',
routeOverlapSwitchList: [], routeOverlapSwitchList: [],
turnBackSectionCode: '', turnBackSectionCode: '',
natureType: '', natureType: '',
autoType: '', autoType: '',
arc: false, arc: false,
flt: false, flt: false,
delayReleaseTime: '', delayReleaseTime: '',
routeFlankProtectionList: [], routeFlankProtectionList: [],
routeTriggerSectionList: [], routeTriggerSectionList: [],
routeOverlapSectionList: [], routeOverlapSectionList: [],
routeSectionList: [], routeSectionList: [],
routeStandList: [], routeStandList: [],
routeSwitchList: [] routeSwitchList: []
} }
}; };
}, },
computed: { computed: {
...mapGetters('map', [ ...mapGetters('map', [
'signalList', 'signalList',
'switchList', 'switchList',
'sectionList', 'sectionList',
'stationList', 'stationList',
'stationStandList' 'stationStandList'
]), ]),
routeName: { routeName: {
get() { get() {
var name = ''; var name = '';
if (this.isSave) { if (this.isSave) {
let beg = ''; let end = ''; let beg = ''; let end = '';
if (this.signalList) { if (this.signalList) {
this.signalList.forEach(elem => { this.signalList.forEach(elem => {
if (elem.code === this.addModel.startSignalCode) beg = elem.name; if (elem.code === this.addModel.startSignalCode) beg = elem.name;
if (elem.code === this.addModel.endSignalCode) end = elem.name; if (elem.code === this.addModel.endSignalCode) end = elem.name;
}); });
} }
name = beg + '-' + end; name = beg + '-' + end;
} }
return name; return name;
} }
}, },
rules() { rules() {
const baseRules = { const baseRules = {
name: [ name: [
{ required: true, message: this.$t('rules.pleaseEnterPathName'), trigger: 'change' } { required: true, message: this.$t('rules.pleaseEnterPathName'), trigger: 'change' }
], ],
stationCode: [ stationCode: [
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' } { required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
], ],
startSignalCode: [ startSignalCode: [
{ required: true, message: this.$t('rules.pleaseSelectStartSignal'), trigger: 'change' } { required: true, message: this.$t('rules.pleaseSelectStartSignal'), trigger: 'change' }
], ],
endSignalCode: [ endSignalCode: [
{ required: true, message: this.$t('rules.pleaseSelectEndSignal'), trigger: 'change' } { required: true, message: this.$t('rules.pleaseSelectEndSignal'), trigger: 'change' }
], ],
nearSectionCode: [ nearSectionCode: [
{ required: true, message: this.$t('rules.proximitySection'), trigger: 'change' } { required: true, message: this.$t('rules.proximitySection'), trigger: 'change' }
], ],
natureType: [ natureType: [
{ required: true, message: this.$t('rules.accessPropertyType'), trigger: 'change' } { required: true, message: this.$t('rules.accessPropertyType'), trigger: 'change' }
], ],
autoType: [ autoType: [
{ required: true, message: this.$t('rules.autoAccessType'), trigger: 'change' } { required: true, message: this.$t('rules.autoAccessType'), trigger: 'change' }
], ],
routeSectionList: [ routeSectionList: [
{ required: true, message: '请选择进路物理区段数据', trigger: 'change' } { required: true, message: '请选择进路物理区段数据', trigger: 'change' }
] ]
}; };
return baseRules; return baseRules;
} }
}, },
watch: { watch: {
mapInfo(val) { mapInfo(val) {
if (val) { if (val) {
this.addModel.mapId = val.id; this.addModel.mapId = val.id;
} }
}, },
routeData(val, old) { routeData(val, old) {
if (val) { if (val) {
this.addModel = val; this.addModel = val;
this.addModel.routeFlankProtectionList.forEach(item => { this.addModel.routeFlankProtectionList.forEach(item => {
item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位'; item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位';
}); });
this.addModel.routeOverlapSwitchList.forEach(item => { this.addModel.routeOverlapSwitchList.forEach(item => {
item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位'; item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位';
}); });
this.addModel.routeSwitchList.forEach(item => { this.addModel.routeSwitchList.forEach(item => {
item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位'; item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位';
}); });
} }
}, },
routeName(val, old) { routeName(val, old) {
if (val) { if (val) {
this.addModel.name = val; this.addModel.name = val;
} }
} }
}, },
mounted() { mounted() {
this.$Dictionary.routeNatureType().then(list => { this.$Dictionary.routeNatureType().then(list => {
this.RouteNatureTypeList = list; this.RouteNatureTypeList = list;
}); });
this.$Dictionary.routeAutoType().then(list => { this.$Dictionary.routeAutoType().then(list => {
this.RouteAutoTypeList = list; this.RouteAutoTypeList = list;
}); });
this.$Dictionary.switchLocateType().then(list => { this.$Dictionary.switchLocateType().then(list => {
this.SwitchLocateTypeList = list; this.SwitchLocateTypeList = list;
}); });
}, },
methods: { methods: {
swictchName(code) { swictchName(code) {
let name = ''; let name = '';
if (code) { if (code) {
const swch = this.$store.getters['map/getDeviceByCode'](code); const swch = this.$store.getters['map/getDeviceByCode'](code);
if (swch) { if (swch) {
name = `${swch.name}(${swch.code})`; name = `${swch.name}(${swch.code})`;
} }
} }
return name; return name;
}, },
deviceChange(code) { deviceChange(code) {
this.$emit('setCenter', code); this.$emit('setCenter', code);
}, },
hover(field) { hover(field) {
this.field = field === this.field ? '' : field; this.field = field === this.field ? '' : field;
}, },
pushSwitch(list, data) { pushSwitch(list, data) {
const index = list.findIndex(elem => { return elem.switchCode == data.switchCode; }); const index = list.findIndex(elem => { return elem.switchCode == data.switchCode; });
if (index < 0) { if (index < 0) {
list.push(data); list.push(data);
} else { } else {
this.$messageBox(this.$t('tip.routeSameID')); this.$messageBox(this.$t('tip.routeSameID'));
} }
}, },
deleteSwitch(list, index) { deleteSwitch(list, index) {
list.splice(index, 1); list.splice(index, 1);
}, },
buildModel(code) { buildModel(code) {
const model = Object.assign({}, this.addModel); const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id; model['mapId'] = this.mapInfo.id;
model['routeSectionList'] = this.addModel.routeSectionList.map(elem => { return { sectionCode: elem }; }); model['routeSectionList'] = this.addModel.routeSectionList.map(elem => { return { sectionCode: elem }; });
// mapId: this.mapInfo.id, routeCode: model.code, // mapId: this.mapInfo.id, routeCode: model.code,
model['routeTriggerSectionList'] = this.addModel.routeTriggerSectionList.map(elem => { return { sectionCode: elem }; }); model['routeTriggerSectionList'] = this.addModel.routeTriggerSectionList.map(elem => { return { sectionCode: elem }; });
// mapId: this.mapInfo.id, routeCode: model.code, // mapId: this.mapInfo.id, routeCode: model.code,
model['routeOverlapSectionList'] = this.addModel.routeOverlapSectionList.map(elem => { return { sectionCode: elem }; }); model['routeOverlapSectionList'] = this.addModel.routeOverlapSectionList.map(elem => { return { sectionCode: elem }; });
model['routeStandList'] = this.addModel.routeStandList.map(elem => { return { stationStandCode: elem }; }); model['routeStandList'] = this.addModel.routeStandList.map(elem => { return { stationStandCode: elem }; });
if (code) { model['code'] = code; } if (code) { model['code'] = code; }
return model; return model;
}, },
save() { save() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
createRouteRoute(this.buildModel(getUID('Route'))).then(response => { createRouteRoute(this.buildModel(getUID('Route'))).then(response => {
this.$message.success('创建成功'); this.$message.success('创建成功');
this.loading = false; this.loading = false;
this.clear(); this.clear();
}).catch(() => { }).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal')); this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false; this.loading = false;
}); });
} }
}); });
}, },
update() { update() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
updateRouteRoute(this.buildModel()).then(response => { updateRouteRoute(this.buildModel()).then(response => {
this.$message.success('更新成功'); this.$message.success('更新成功');
this.loading = false; this.loading = false;
this.clear(); this.clear();
}).catch(() => { }).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal')); this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false; this.loading = false;
}); });
} }
}); });
}, },
clear() { clear() {
if (this.$refs && this.$refs.form && this.mapInfo) { if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id; delete this.addModel.id;
this.$refs.form.resetFields(); this.$refs.form.resetFields();
this.addModel.mapId = this.mapInfo.id; this.addModel.mapId = this.mapInfo.id;
this.addModel.routeSwitchList = []; this.addModel.routeSwitchList = [];
this.addModel.routeFlankProtectionList = []; this.addModel.routeFlankProtectionList = [];
this.addModel.routeOverlapSwitchList = []; this.addModel.routeOverlapSwitchList = [];
if (this.selected && this.selected._type.toUpperCase() === 'Station'.toUpperCase()) { if (this.selected && this.selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = this.selected.code; this.addModel.stationCode = this.selected.code;
} }
this.isSave = true; this.isSave = true;
} }
}, },
setSelected(selected) { setSelected(selected) {
if (selected) { if (selected) {
if (selected._type.toUpperCase() === 'Station'.toUpperCase()) { if (selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code; this.addModel.stationCode = selected.code;
} else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'startSignalCode'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'startSignalCode'.toUpperCase()) {
this.addModel.startSignalCode = selected.code; this.addModel.startSignalCode = selected.code;
} else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'endSignalCode'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'endSignalCode'.toUpperCase()) {
this.addModel.endSignalCode = selected.code; this.addModel.endSignalCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'nearSectionCode'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'nearSectionCode'.toUpperCase()) {
this.addModel.nearSectionCode = selected.code; this.addModel.nearSectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'autoTriggerSectionCode'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'autoTriggerSectionCode'.toUpperCase()) {
this.addModel.autoTriggerSectionCode = selected.code; this.addModel.autoTriggerSectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeTriggerSectionList'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeTriggerSectionList'.toUpperCase()) {
if (this.addModel.routeTriggerSectionList.indexOf(selected.code) === -1) { if (this.addModel.routeTriggerSectionList.indexOf(selected.code) === -1) {
this.addModel.routeTriggerSectionList.push(selected.code); this.addModel.routeTriggerSectionList.push(selected.code);
} }
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSectionList'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSectionList'.toUpperCase()) {
if (this.addModel.routeOverlapSectionList.indexOf(selected.code) === -1) { if (this.addModel.routeOverlapSectionList.indexOf(selected.code) === -1) {
this.addModel.routeOverlapSectionList.push(selected.code); this.addModel.routeOverlapSectionList.push(selected.code);
} }
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'turnBackSectionCode'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'turnBackSectionCode'.toUpperCase()) {
this.addModel.turnBackSectionCode = selected.code; this.addModel.turnBackSectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeSectionList'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeSectionList'.toUpperCase()) {
if (this.addModel.routeSectionList.indexOf(selected.code) === -1) { if (this.addModel.routeSectionList.indexOf(selected.code) === -1) {
this.addModel.routeSectionList.push(selected.code); this.addModel.routeSectionList.push(selected.code);
} }
} else if (selected._type.toUpperCase() === 'StationStand'.toUpperCase() && this.field.toUpperCase() === 'routeStandList'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'StationStand'.toUpperCase() && this.field.toUpperCase() === 'routeStandList'.toUpperCase()) {
if (this.addModel.routeStandList.indexOf(selected.code) === -1) { if (this.addModel.routeStandList.indexOf(selected.code) === -1) {
this.addModel.routeStandList.push(selected.code); this.addModel.routeStandList.push(selected.code);
} }
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSwitchList'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSwitchList'.toUpperCase()) {
this.overlapCode = selected.code; this.overlapCode = selected.code;
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeSwitchList'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeSwitchList'.toUpperCase()) {
this.routeCode = selected.code; this.routeCode = selected.code;
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeFlankProtectionList'.toUpperCase()) { } else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeFlankProtectionList'.toUpperCase()) {
this.flankCode = selected.code; this.flankCode = selected.code;
} }
} }
} }
} }
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>

251
src/views/map/mapdraft/dataRelation/routingoperate/detail.vue Normal file
View File

@ -0,0 +1,251 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.thenList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
<pre-view-field ref="previewField" :map-info="mapInfo" />
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { listRouting, deleteRouting, getRouting } from '@/api/jmap/mapdraft';
import PreViewField from './preview';
export default {
name: 'RouteDetail',
components: {
PreViewField
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
startStationCode: {
type: 'select',
label: this.$t('map.startStation'),
config: {
data: []
}
},
endStationCode: {
type: 'select',
label: this.$t('map.endStation'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.routingCode'),
prop: 'code'
},
{
title: this.$t('map.startStation'),
prop: 'startStationCode'
},
{
title: this.$t('map.startStationCode'),
prop: 'startSectionCode'
},
{
title: this.$t('map.endStation'),
prop: 'endStationCode'
},
{
title: this.$t('map.endStationCode'),
prop: 'endSectionCode'
},
{
title: this.$t('map.routingDirection'),
prop: 'directionCode',
type: 'tag',
columnValue: (row) => { return this.$ConstSelect.translate(row.directionCode, 'DirectionCodeList'); },
tagType: (row) => { if (row.directionCode === '0') { return 'primary'; } else { return 'success'; } }
},
{
title: this.$t('map.destination'),
prop: 'destinationCode'
},
{
title: this.$t('map.remarks'),
prop: 'remarks'
},
{
type: 'button',
title: this.$t('map.sectionData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.sectionDetail
}
]
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.editObj
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'stationList'
])
},
watch: {
stationList: function (val, old) {
const list = [];
if (val && val.length) {
val.forEach(elem => {
list.push({ label: this.formatName(elem.code), value: elem.code });
});
this.queryForm.queryObject.startStationCode.config.data = list;
this.queryForm.queryObject.endStationCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
formatName(code) {
let name = '';
const device = this.$store.getters['map/getDeviceByCode'](code);
if (device) {
name = device.name;
}
return name;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return listRouting(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.startStationCode = that.formatName(elem.startStationCode);
elem.startSectionCode = that.formatName(elem.startSectionCode);
elem.endStationCode = that.formatName(elem.endStationCode);
elem.endSectionCode = that.formatName(elem.endSectionCode);
});
}
}
return data;
},
editObj(index, row) {
getRouting(row.id).then(response => {
const data = Object.assign({ code: response.data.id }, response.data);
this.$emit('routingSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除
deleteRouting(row.id).then(response => {
this.$message.success(this.$t('map.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('map.failDelete'));
});
}
},
sectionDetail(index, row) {
const sectionDict = {};
const stationDict = {};
this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '区段列表',
name: row.name,
model: {
field: 'routingSectionList',
items: [
{ prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
{
prop: 'stationCode', label: this.$t('map.sectionName'), type: 'select', options: stationDict
},
{ prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
{
prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routingSectionList);
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

84
src/views/map/mapdraft/dataRelation/routingoperate/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div style="height: 100%;">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routingSelected="routingSelected" />
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'PathOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routingSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

0
src/views/map/mapdraft/mapedit/dataRelation/routingoperate/preview.vue → src/views/map/mapdraft/dataRelation/routingoperate/preview.vue
View File

377
src/views/map/mapdraft/dataRelation/routingoperate/route.vue Normal file
View File

@ -0,0 +1,377 @@
<template>
<div style="height: 100%;">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
<div class="definition">
<el-form-item :label="$t('map.routingName')" prop="name">
<el-input v-model="addModel.name" />
</el-form-item>
<el-form-item :label="$t('map.startStationCodeColon')" prop="startStationCode">
<el-select v-model="addModel.startStationCode" clearable :filterable="true">
<el-option
v-for="item in filterStationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'startStationCode' ? 'danger' : 'primary'"
@click="hover('startStationCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.startSectionColon')" prop="startSectionCode">
<el-select v-model="addModel.startSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'startSectionCode' ? 'danger' : 'primary'"
@click="hover('startSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.endStationColon')" prop="endStationCode">
<el-select v-model="addModel.endStationCode" clearable :filterable="true">
<el-option
v-for="item in filterStationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'endStationCode' ? 'danger' : 'primary'"
@click="hover('endStationCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.endSectionColon')" prop="endSectionCode">
<el-select v-model="addModel.endSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'endSectionCode' ? 'danger' : 'primary'"
@click="hover('endSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.destinationCode')" prop="destinationCode">
<el-input v-model="addModel.destinationCode" />
</el-form-item>
<el-form-item :label="$t('map.routingDirection')" prop="directionCode">
<el-select v-model="addModel.directionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in DirectionCodeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.remarksColon')" prop="remarks">
<el-input v-model="addModel.remarks" type="textarea" :rows="4" :placeholder="$t('map.pleaseSelect')" />
</el-form-item>
<el-form-item :label="$t('map.trafficSegmentData')" prop="routingSectionList">
<div>
<el-select v-model="stationCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in filterStationList"
:key="item.code"
:label="`${item.name}(${item.code})`"
:value="item.code"
/>
</el-select>
<el-button
:type="field === 'routingStation' ? 'danger' : 'primary'"
@click="hover('routingStation')"
>{{ $t('map.activate') }}</el-button>
</div>
<div>
<el-select v-model="sectionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in sectionList"
:key="item.code"
:label="`${item.name}(${item.code})`"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'routingSection' ? 'danger' : 'primary'"
@click="hover('routingSection')"
>{{ $t('map.activate') }}</el-button>
<el-button
type="primary"
@click="pushSection(addModel.routingSectionList, {stationCode: stationCode, sectionCode: sectionCode})"
>
{{ $t('map.add') }}
</el-button>
</div>
<el-table :data="addModel.routingSectionList" border style="width: 97%">
<el-table-column prop="sectionCode" :label="$t('map.stationName')">
<template slot-scope="scope">
<span>{{ formatName(scope.row.stationCode) }}</span>
</template>
</el-table-column>
<el-table-column prop="sectionCode" :label="$t('map.sectionName')">
<template slot-scope="scope">
<span>{{ formatName(scope.row.sectionCode) }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.prevent="deleteSection(addModel.routingSectionList, scope.$index)"
>
{{ $t('map.remove') }}
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
</el-button>
<el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
</el-button>
</el-button-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { addRouting, updateRouting } from '@/api/jmap/mapdraft';
import { ViewMode } from '@/scripts/ConstDic';
import { formatName } from '@/utils/runPlan';
// import Sortable from 'sortablejs';
export default {
name: 'RouteOperation',
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
ViewMode: ViewMode,
field: '',
stationCode: '',
sectionCode: '',
isSave: true,
loading: false,
DirectionCodeList: this.$ConstSelect.DirectionCodeList,
addModel: {
name: '',
mapId: '',
code: '',
directionCode: '',
destinationCode: '',
startStationCode: '',
startSectionCode: '',
endStationCode: '',
endSectionCode: '',
remarks: '',
routingSectionList: []
},
editShow: false,
rules: {
name: [
{ required: true, message: this.$t('map.routingName'), trigger: 'change' }
],
destinationCode: [
{ required: true, message: this.$t('map.destinationCode'), trigger: 'change' }
],
startStationCode: [
{ required: true, message: this.$t('map.startStationCode'), trigger: 'change' }
],
startSectionCode: [
{ required: true, message: this.$t('map.startSectionCode'), trigger: 'change' }
],
endStationCode: [
{ required: true, message: this.$t('map.endStationCode'), trigger: 'change' }
],
endSectionCode: [
{ required: true, message: this.$t('map.endSectionCode'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'stationList'
]),
filterSectionList() {
if (this.sectionList) {
return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
} else {
return [];
}
},
filterStationList() {
if (this.stationList) {
return this.stationList.filter(elem => { return true; });
} else {
return [];
}
}
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
this.editShow = true;
}
}
},
mounted() {
// this.rowDrop();
},
methods: {
// 行拖拽
// rowDrop() {
// const that = this;
// const tbody = document.querySelector('.el-table__body-wrapper tbody');
// if (tbody) {
// Sortable.create(tbody, {
// onEnd({ newIndex, oldIndex }) {
// const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
// that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
// }
// });
// }
// },
hover(field) {
this.field = field === this.field ? '' : field;
},
formatName(code) {
return formatName(code);
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'startStationCode'.toUpperCase()) {
this.addModel.startStationCode = selected.code;
} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'endStationCode'.toUpperCase()) {
this.addModel.endStationCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
this.addModel.startSectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
this.addModel.endSectionCode = selected.code;
this.addModel.destinationCode = selected.destinationCode || '';
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() == 'routingSection'.toUpperCase()) {
this.sectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() == 'routingStation'.toUpperCase()) {
this.stationCode = selected.code;
}
}
},
pushSection(list, data) {
if (data) {
const index = list.findIndex(elem => { return elem.sectionCode == data.sectionCode; });
if (index < 0) {
list.push(data);
} else {
this.$messageBox(this.$t('tip.routeSameID'));
}
}
},
deleteSection(list, index) {
list.splice(index, 1);
},
buildModel(code) {
this.addModel.routingSectionList.forEach((elem, index) => {
elem['orderNum'] = index + 1;
});
const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id;
if (code) { model['code'] = code; }
return model;
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
addRouting(this.buildModel(getUID('Routing'))).then(resp => {
this.$message.success(this.$t('tip.pathCreationSuccessful'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.createRoutingFailed'));
this.loading = false;
});
}
});
},
update() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
updateRouting(this.buildModel()).then(resp => {
this.$message.success(this.$t('tip.pathUpdataSuccessful'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.pathUpdataFailed'));
this.loading = false;
});
}
});
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel.mapId = this.mapInfo.id;
this.addModel.routingSectionList = [];
this.addModel.code = '';
this.stationCode = '';
this.sectionCode = '';
this.isSave = true;
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-radio {
margin-right: 10px;
}
</style>

153
src/views/map/mapdraft/dataRelation/switchoperate/detail.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.linkageSwitchList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap, listLinkageSwitch, deleteLinkageSwitch } from '@/api/jmap/mapdraft';
export default {
name: 'RouteDetail',
components: {
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
switchCode: {
type: 'select',
label: this.$t('map.switchNameC'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.pathUnitMapName'),
prop: 'mapId'
},
{
title: this.$t('map.switchACode'),
prop: 'switchACode'
},
{
title: this.$t('map.switchBCode'),
prop: 'switchBCode'
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'switchList'
])
},
watch: {
switchList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].name, value: val[i].code });
}
this.queryForm.queryObject.switchCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
// 获取联动道岔列表
return listLinkageSwitch(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
that.$convertSpecifiedField(elem, that.switchList, 'code', 'name', ['switchACode', 'switchBCode']);
});
}
}
return data;
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除 双动道岔
deleteLinkageSwitch(this.mapInfo.id, row.id).then(response => {
this.$message.success(this.$t('tip.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('tip.failDelete'));
});
}
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

84
src/views/map/mapdraft/dataRelation/switchoperate/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div style="height: 100%;">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'SwitchOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routeSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

192
src/views/map/mapdraft/dataRelation/switchoperate/route.vue Normal file
View File

@ -0,0 +1,192 @@
<template>
<div style="height: 100%;">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
<el-form-item :label="$t('map.switchACodeNum')" prop="switchACode">
<el-select v-model="addModel.switchACode" clearable :filterable="true">
<el-option
v-for="item in switchList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button :type=" field === 'switchACode' ? 'danger' : 'primary'" @click="hover('switchACode')">{{ $t('map.activate') }}
</el-button>
</el-form-item>
<el-form-item :label="$t('map.switchBCodeNum')" prop="switchBCode">
<el-select v-model="addModel.switchBCode" clearable :filterable="true">
<el-option
v-for="item in switchList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button :type=" field === 'switchBCode' ? 'danger' : 'primary'" @click="hover('switchBCode')">{{ $t('map.activate') }}
</el-button>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}</el-button>
</el-button-group>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { createLinkageSwitch } from '@/api/jmap/mapdraft';
// import { ViewMode } from '@/scripts/ConstDic';
export default {
name: 'RouteOperation',
components: {
},
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
}
},
data() {
var switchBCode = (rule, value, callback) => {
if (!value) {
return callback(new Error(this.$t('rules.selectTurnoutID')));
}
setTimeout(() => {
if (value == this.addModel.switchACode) {
callback(new Error(this.$t('rules.switchesCannot')));
} else {
callback();
}
}, 100);
};
return {
field: '',
code: '',
type: '',
loading: false,
addModel: {
mapId: '',
name: '',
switchACode: '',
switchBCode: ''
},
rules: {
switchACode: [
{ required: true, message: this.$t('rules.selectTurnoutID'), trigger: 'change' }
],
switchBCode: [
{ required: true, validator: switchBCode, trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'switchList',
'sectionList',
'stationList',
'stationStandList'
]),
routeName: {
get: function () {
let beg = ''; let end = '';
if (this.signalList) {
this.signalList.forEach(elem => {
if (elem.code === this.addModel.startSignalCode) beg = elem.name;
if (elem.code === this.addModel.endSignalCode) end = elem.name;
});
}
return beg + '-' + end;
}
}
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
}
},
routeName(val, old) {
if (val) {
this.addModel.name = val;
}
}
},
mounted() {
},
methods: {
hover(field) {
this.field = field === this.field ? '' : field;
},
buildModel() {
const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id;
return model;
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
// 创建联动道岔
this.loading = true;
createLinkageSwitch(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.createSuccess'));
this.loading = false;
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
});
}
});
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel = {
mapId: this.mapInfo.id,
switchACode: '',
switchBCode: ''
};
}
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'switchACode'.toUpperCase()) {
this.addModel.switchACode = selected.code;
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'switchBCode'.toUpperCase()) {
this.addModel.switchBCode = selected.code;
}
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-radio {
margin-right: 10px;
}
</style>

38
src/views/map/mapdraft/mapedit/index.vue → src/views/map/mapdraft/index.vue
View File

@ -4,12 +4,10 @@
<div class="map-view"> <div class="map-view">
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" /> <jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
</div> </div>
<!-- <map-create ref="mapCreate" :skin-code="skinCode" @refresh="refresh" @editmap="handleNodeClick" /> -->
<div class="map-draft"> <div class="map-draft">
<div v-show="viewDraft === 'draft'"> <div v-show="viewDraft === 'draft'" class="box">
<map-operate <map-operate
ref="mapOperate" ref="mapOperate"
:card-height="cardHeight"
:map-info="mapInfo" :map-info="mapInfo"
:selected="selected" :selected="selected"
:map-saveing="mapSaveing" :map-saveing="mapSaveing"
@ -24,10 +22,9 @@
@showMap="showMap" @showMap="showMap"
/> />
</div> </div>
<div v-show="viewDraft != 'draft'"> <div v-show="viewDraft != 'draft'" class="box">
<data-relation <data-relation
ref="dataRelation" ref="dataRelation"
:card-height="cardHeight"
:map-info="mapInfo" :map-info="mapInfo"
:selected="selected" :selected="selected"
@selectView="selectViewDraft" @selectView="selectViewDraft"
@ -52,7 +49,6 @@ import { checkLoginLine } from '@/api/login';
import JlmapVisual from '@/views/jlmap/index'; import JlmapVisual from '@/views/jlmap/index';
import MapOperate from './mapoperate/index'; import MapOperate from './mapoperate/index';
import { EventBus } from '@/scripts/event-bus'; import { EventBus } from '@/scripts/event-bus';
// import MapCreate from '../mapmanage/create';
import ConfigMap from './configMap'; import ConfigMap from './configMap';
@ -65,7 +61,6 @@ export default {
MapOperate, MapOperate,
DataRelation, DataRelation,
ConfigMap ConfigMap
// MapCreate,
}, },
data() { data() {
return { return {
@ -79,11 +74,6 @@ export default {
timeDemon: null timeDemon: null
}; };
}, },
computed: {
cardHeight() {
return this.$store.state.app.height - 195 - 30;
}
},
watch: { watch: {
'$store.state.map.mapDataLoadedCount': function (val) { '$store.state.map.mapDataLoadedCount': function (val) {
this.initAutoSaveTask(); this.initAutoSaveTask();
@ -352,6 +342,10 @@ export default {
} }
} }
} }
.box{
height: 100%;
overflow: hidden;
}
.mapPaint{ .mapPaint{
height: 100%; height: 100%;
@ -366,7 +360,7 @@ export default {
.map-draft { .map-draft {
float: right; float: right;
width: 520px; width: 520px;
height: 100%;
// /deep/ .el-scrollbar__view { // /deep/ .el-scrollbar__view {
// width: 510px !important; // width: 510px !important;
// height: calc(100% - 40px); // height: calc(100% - 40px);
@ -393,14 +387,14 @@ export default {
margin-right: 3px; margin-right: 3px;
cursor: pointer; cursor: pointer;
input { input {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>

210
src/views/map/mapdraft/mapedit/dataRelation/automaticoperate/detail.vue
View File

@ -1,210 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.automaticSignalList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
<pre-view-field ref="previewField" :map-info="mapInfo" />
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { getAutoSignalList, delAutoSignal, getAutoSignalDetail } from '@/api/jmap/mapdraft';
import PreViewField from './preview';
export default {
name: 'RouteDetail',
components: {
PreViewField
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
signalCode: {
type: 'select',
label: this.$t('map.signal'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.automaticSignalCode'),
prop: 'code'
},
{
title: this.$t('map.signalCodeName'),
prop: 'signalCode'
},
{
title: this.$t('map.signalCode'),
prop: 'code'
},
{
type: 'button',
title: this.$t('map.sectionData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.sectionDetail
}
]
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.editObj
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'signalList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.signalCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
formatName(code) {
let name = '';
const device = this.$store.getters['map/getDeviceByCode'](code);
if (device) {
name = device.uniqueName;
}
return name;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return getAutoSignalList(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.code = elem.signalCode;
elem.signalCode = that.formatName(elem.signalCode);
});
}
}
return data;
},
editObj(index, row) {
getAutoSignalDetail(row.id).then(response => {
const data = Object.assign({}, response.data);
data.autoSignalClearList = data.autoSignalClearList.map(elem => { return elem.sectionCode; });
this.$emit('autoMaticoSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除
delAutoSignal(row.id).then(response => {
this.$message.success(this.$t('map.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('map.failDelete'));
});
}
},
sectionDetail(index, row) {
const sectionDict = {};
this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: this.$t('map.sectionList'),
name: row.code,
model: {
field: 'autoSignalClearList',
items: [
{ prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.autoSignalClearList);
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

117
src/views/map/mapdraft/mapedit/dataRelation/automaticoperate/index.vue
View File

@ -1,117 +0,0 @@
<template>
<div>
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @autoMaticoSelected="autoMaticoSelected" />
</div>
<!-- <transition name="el-zoom-in-center">
<div class="mapControl">
<el-card>
<div slot="header" class="clearfix">
<span>
{{ $t('map.mapName') }}
<b>{{ mapInfo.name }}</b>
</span>
<el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">{{ $t('map.preview') }}
</el-button>
<el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">{{ $t('map.newConstruction') }}
</el-button>
</div>
<el-tabs v-model="enabledTab" type="card">
<el-tab-pane :label="$t('map.automaticSignal')" name="Route">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
</el-tab-pane>
</el-tabs>
</el-card>
<route-detail ref="routeDetail" :map-info="mapInfo" @autoMaticoSelected="autoMaticoSelected" />
</div>
</transition> -->
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'AutomaticOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
autoMaticoSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

194
src/views/map/mapdraft/mapedit/dataRelation/automaticoperate/route.vue
View File

@ -1,194 +0,0 @@
<template>
<div :style="{ height: cardHeight +'px' }">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="180px" size="mini">
<div class="definition">
<el-form-item :label="$t('map.signalID')" prop="signalCode">
<el-select v-model="addModel.signalCode" clearable :filterable="true">
<el-option
v-for="item in signalList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button :type="field === 'signalCode' ? 'danger' : 'primary'" @click="hover('signalCode')">{{ $t('map.activate') }}
</el-button>
</el-form-item>
<el-form-item :label="$t('map.routeTriggerSectionList')" prop="autoSignalClearList">
<el-select v-model="addModel.autoSignalClearList" multiple clearable :filterable="true">
<el-option
v-for="item in sectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'autoSignalClearList' ? 'danger' : 'primary'"
@click="hover('autoSignalClearList')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
</el-button>
<el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
</el-button>
</el-button-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { postAutoSignal, putAutoSignal } from '@/api/jmap/mapdraft';
import { ViewMode } from '@/scripts/ConstDic';
import { formatName } from '@/utils/runPlan';
export default {
name: 'RouteOperation',
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
ViewMode: ViewMode,
field: '',
isSave: true,
loading: false,
editModel: {},
addModel: {
id: '',
code: '',
mapId: '',
signalCode: '',
autoSignalClearList: []
},
editShow: false,
rules: {
signalCode: [
{ required: true, message: this.$t('map.pleaseSelectSignal'), trigger: 'change' }
],
autoSignalClearList: [
{ required: true, message: this.$t('map.triggerSegmentData'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'sectionList'
])
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
this.editShow = true;
}
}
},
mounted() {
},
methods: {
hover(field) {
this.field = field === this.field ? '' : field;
},
formatName(code) {
return formatName(code);
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'signalCode'.toUpperCase()) {
this.addModel.signalCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'autoSignalClearList'.toUpperCase()) {
if (this.addModel.autoSignalClearList.indexOf(selected.code) === -1) {
this.addModel.autoSignalClearList.push(selected.code);
}
}
}
},
buildModel(code) {
const model = Object.assign({}, this.addModel);
if (code) { model['code'] = code; }
model['mapId'] = this.mapInfo.id;
model['autoSignalId'] = this.addModel.id;
model['autoSignalClearList'] = this.addModel.autoSignalClearList.map(elem => { return { sectionCode: elem }; });
return model;
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
postAutoSignal(this.buildModel(getUID('autoSingle'))).then(resp => {
this.$message.success(this.$t('map.automaticSignalSuccessful'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('map.failedCreateSignal'));
this.loading = false;
});
}
});
},
update() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
putAutoSignal(this.buildModel()).then(resp => {
this.$message.success(this.$t('map.automaticSignalUpdateSucceeded'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('map.automaticSignalUpdateFailed'));
this.loading = false;
});
}
});
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel.mapId = this.mapInfo.id;
this.addModel.autoSignalClearList = [];
this.addModel.signalCode = '';
this.addModel.code = '';
this.isSave = true;
}
}
}
};
</script>

237
src/views/map/mapdraft/mapedit/dataRelation/index.vue
View File

@ -1,237 +0,0 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control">
<el-card>
<div slot="header" class="clearfix">
<span>
{{ $t('map.mapName') }}
<b>{{ mapInfo.name }}</b>
</span>
<el-button type="text" class="mapEdit_box" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
<el-button type="text" class="mapEdit_box" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
<el-button type="text" class="mapEdit_box" @click="drawMap">{{ $t('map.drawMap') }}</el-button>
<el-button type="text" class="mapEdit_box" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
</div>
<el-tabs v-model="enabledTab" type="card" class="map_card" @tab-click="changePane">
<el-tab-pane label="进路" name="route">
<route-operate
ref="routeOperate"
:card-height="cardHeight+25"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="路径单元" name="path">
<path-operate
ref="pathOperate"
:card-height="cardHeight+25"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="交路" name="routing">
<routing-operate
ref="routingOperate"
:card-height="cardHeight+25"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="自动信号" name="automatic">
<automatic-operate
ref="automaticOperate"
:card-height="cardHeight+25"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="联动道岔" name="swtich">
<switch-operate
ref="SwitchOperate"
:card-height="cardHeight+25"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</transition>
</template>
<script>
import RouteOperate from './routeoperate/index';
import RoutingOperate from './routingoperate/index';
import AutomaticOperate from './automaticoperate/index';
import SwitchOperate from './switchoperate/index';
import PathOperate from './pathoperate/index';
export default {
name: 'DataRelation',
components: {
RouteOperate,
RoutingOperate,
AutomaticOperate,
SwitchOperate,
PathOperate
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
mapInfo: {
type: Object,
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
enabledTab: 'route',
cardHeights: 0
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
resizeCardHeight() {
var padding = 0;
this.cardHeights = this.cardHeight - padding - 130;
},
showMap() {
this.$emit('showMap');
},
createRouteEvent() {
switch (this.enabledTab) {
case 'route':
this.$refs.routeOperate.createRouteEvent();
break;
case 'routing':
this.$refs.routingOperate.createRouteEvent();
break;
case 'automatic':
this.$refs.automaticOperate.createRouteEvent();
break;
case 'swtich':
this.$refs.SwitchOperate.createRouteEvent();
break;
case 'path':
this.$refs.pathOperate.createRouteEvent();
break;
}
},
previewRouteEvent() {
switch (this.enabledTab) {
case 'route':
this.$refs.routeOperate.previewRouteEvent();
break;
case 'routing':
this.$refs.routingOperate.previewRouteEvent();
break;
case 'automatic':
this.$refs.automaticOperate.previewRouteEvent();
break;
case 'swtich':
this.$refs.SwitchOperate.previewRouteEvent();
break;
case 'path':
this.$refs.pathOperate.previewRouteEvent();
break;
}
},
changePane(data) {
this.enabledTab = data.name;
},
setSelected(selected) {
switch (this.enabledTab) {
case 'route':
this.$refs.routeOperate.setSelected(selected);
break;
case 'routing':
this.$refs.routingOperate.setSelected(selected);
break;
case 'automatic':
this.$refs.automaticOperate.setSelected(selected);
break;
case 'swtich':
this.$refs.SwitchOperate.setSelected(selected);
break;
case 'path':
this.$refs.pathOperate.setSelected(selected);
break;
}
},
setCenter(code) {
this.$emit('setCenter', code);
},
drawMap() {
this.$emit('selectView', 'draft');
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.map-context {
display: block;
float: left;
margin-left: 5px;
}
.map-control {
float: right;
width: 100%;
}
.mapEdit_box{
float: right;
padding: 3px 0;
margin-right: 5px;
}
.physical-view {
line-height: 25px;
height: 118px;
padding-left: 12px;
.el-checkbox {
width: 70px;
margin: 0;
margin-right: 30px;
}
}
/deep/ {
.map_card .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #f5f7fa;
background: #f5f7fa;
}
}
/deep/ .map-draft-group {
float: right;
margin: 10px 5px;
}
/deep/ {
.view-control {
overflow-y: auto;
}
}
</style>

198
src/views/map/mapdraft/mapedit/dataRelation/pathoperate/detail.vue
View File

@ -1,198 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.pathUnitList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { getRouteUnitList, delRouteUnit, getRouteUnit } from '@/api/jmap/pathunit';
export default {
name: 'RouteDetail',
components: {
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
startSectionCode: {
type: 'select',
label: this.$t('map.startSectionCode'),
config: {
data: []
}
},
endSectionCode: {
type: 'select',
label: this.$t('map.endSectionCode'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.pathUnitCode'),
prop: 'code'
},
{
title: this.$t('map.pathUnitMapName'),
prop: 'mapId'
},
{
title: this.$t('map.startSectionCode'),
prop: 'startSectionCode'
},
{
title: this.$t('map.endSectionCode'),
prop: 'endSectionCode'
},
{
title: this.$t('map.orderNum'),
prop: 'orderNum'
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.editObj
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList'
])
},
watch: {
sectionList: function (val, old) {
const list = [];
if (val && val.length) {
val.forEach(elem => {
if (elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack) {
list.push({ label: this.formatName(elem.code), value: elem.code });
}
});
this.queryForm.queryObject.startSectionCode.config.data = list;
this.queryForm.queryObject.endSectionCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
formatName(code) {
let name = '';
const section = this.$store.getters['map/getDeviceByCode'](code);
if (section) {
const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
if (station) {
name += `${station.name} `;
}
name += `${section.name} (${section.code})`;
}
return name;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return getRouteUnitList(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.startSectionCode = that.formatName(elem.startSectionCode);
elem.endSectionCode = that.formatName(elem.endSectionCode);
});
}
}
return data;
},
editObj(index, row) {
getRouteUnit(row.id).then(response => {
const data = response.data;
this.$emit('routeSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除
delRouteUnit(row.id).then(response => {
this.$message.success(this.$t('tip.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('tip.failDelete'));
});
}
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

113
src/views/map/mapdraft/mapedit/dataRelation/pathoperate/index.vue
View File

@ -1,113 +0,0 @@
<template>
<div>
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
<!-- <div class="mapControl">
<el-card>
<div slot="header" class="clearfix">
<span>
{{ $t('map.mapName') }}
<b>{{ mapInfo.name }}</b>
</span>
<el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
<el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
</div>
<el-tabs v-model="enabledTab" type="card">
<el-tab-pane :label="$t('map.pathUnit')" name="Route">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
</el-tab-pane>
</el-tabs>
</el-card>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
</div> -->
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'PathOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routeSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

200
src/views/map/mapdraft/mapedit/dataRelation/pathoperate/pathRoute.vue
View File

@ -1,200 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.pathUnitList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap, listRouteRoute } from '@/api/jmap/mapdraft';
export default {
name: 'PathRoute',
components: {
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
name: {
type: 'select',
label: this.$t('map.pathName'),
config: {
data: []
}
},
stationCode: {
type: 'select',
label: this.$t('map.routeStationName'),
config: {
data: []
}
},
startSignalCode: {
type: 'select',
label: this.$t('map.startingSignalName'),
config: {
data: []
}
},
endSignalCode: {
type: 'select',
label: this.$t('map.endingSignalName'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: true,
indexShow: true,
columns: [
{
title: this.$t('map.routeID'),
prop: 'code'
},
{
title: this.$t('map.pathName'),
prop: 'name'
},
{
title: this.$t('map.pathUnitMapName'),
prop: 'mapId'
},
{
title: this.$t('map.routeStationName'),
prop: 'stationCode'
},
{
title: this.$t('map.startingSignalName'),
prop: 'startSignalCode'
},
{
title: this.$t('map.endingSignalName'),
prop: 'endSignalCode'
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.add'),
handleClick: this.addObj
}
]
}
],
selectAllClick: this.selectAll
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'switchList',
'sectionList',
'stationList',
'stationStandList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.startSignalCode.config.data = list;
this.queryForm.queryObject.endSignalCode.config.data = list;
}
},
stationList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].name, value: val[i].code });
}
this.queryForm.queryObject.stationCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return listRouteRoute(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
that.$convertSpecifiedField(elem, that.stationList, 'code', 'name', ['stationCode']);
that.$convertSpecifiedField(elem, that.signalList, 'code', 'name', ['startSignalCode', 'endSignalCode']);
});
}
}
return data;
},
addObj(index, row) {
const data = [];
data.push(row);
this.$emit('routeSelected', data);
this.doClose();
},
selectAll(data) {
this.$emit('routeSelected', data);
this.doClose();
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

320
src/views/map/mapdraft/mapedit/dataRelation/pathoperate/route.vue
View File

@ -1,320 +0,0 @@
<template>
<div :style="{ height: cardHeight +'px' }">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
<div class="path-box">
<el-steps :active="display" style="display: none;">
<el-step title="路径单元创建" icon="el-icon-edit" />
<el-step title="路径单元整合" icon="el-icon-setting" />
</el-steps>
<div v-show="display == 1" class="definition">
<el-form-item :label="$t('map.startSectionCodeColon')" prop="startSectionCode">
<el-select v-model="addModel.startSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="formatName(item.code)"
:value="item.code"
/>
<!-- </el-input> -->
</el-select>
<el-button
:type=" field === 'startSectionCode' ? 'danger' : 'primary'"
@click="hover('startSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.endSectionCodeColon')" prop="endSectionCode">
<el-select v-model="addModel.endSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="formatName(item.code)"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'endSectionCode' ? 'danger' : 'primary'"
@click="hover('endSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" size="small" style="margin-top: 10px" @click="nextStep">下一步
</el-button>
</el-button-group>
</el-form-item>
</div>
<div v-show="display == 2" class="rule">
<el-button
type="primary"
size="small"
style="float: right; margin-right: 20px; margin-bottom: 10px;"
@click="pushSwitch"
>{{ $t('map.add') }}</el-button>
<el-table
:data="addModel.mapRouteUnitRelList"
row-key="id"
border
style="width: 95%; margin: 0 auto"
>
<el-table-column type="index" />
<el-table-column prop="routeCode" label="进路code" />
<el-table-column prop="routeName" label="进路名称" />
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.prevent="deletePathUnit(scope.$index, addModel.mapRouteUnitRelList)"
>
{{ $t('map.remove') }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item>
<el-button-group>
<el-button type="primary" size="small" style="margin-top: 10px" @click="lastStep">{{ $t('map.lastStep') }}
</el-button>
</el-button-group>
<el-button-group>
<el-button
v-if="!editShow"
type="primary"
size="small"
:loading="loading"
style="margin-top: 10px"
@click="save"
>{{ $t('map.save') }}</el-button>
<el-button
v-if="editShow"
type="warning"
size="small"
:loading="loading"
style="margin-top: 10px"
@click="save"
>{{ $t('map.updata') }}</el-button>
</el-button-group>
</el-form-item>
</div>
</div>
</el-form>
</el-scrollbar>
<path-route ref="pathRoute" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { addRouteUnit, setRouteUnit } from '@/api/jmap/pathunit';
import PathRoute from './pathRoute';
import { ViewMode } from '@/scripts/ConstDic';
// import Sortable from 'sortablejs';
export default {
name: 'RouteOperation',
components: {
PathRoute
},
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
ViewMode: ViewMode,
field: '',
code: '',
type: '',
loading: false,
addModel: {
mapId: '',
code: getUID('RouteUnit'),
startSectionCode: '',
endSectionCode: '',
mapRouteUnitRelList: []
},
editShow: false,
display: 1,
rules: {
startSectionCode: [
{ required: true, message: this.$t('rules.pleaseSelectStartSignal'), trigger: 'change' }
],
endSectionCode: [
{ required: true, message: this.$t('rules.pleaseSelectEndSignal'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList'
]),
filterSectionList() {
if (this.sectionList) {
return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
} else {
return [];
}
}
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
this.display = 1;
this.editShow = true;
}
}
},
mounted() {
// this.rowDrop();
},
methods: {
// 行拖拽
// rowDrop() {
// const that = this;
// const tbody = document.querySelector('.el-table__body-wrapper tbody');
// if (tbody) {
// Sortable.create(tbody, {
// onEnd({ newIndex, oldIndex }) {
// const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
// that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
// }
// });
// }
// },
hover(field) {
this.field = field === this.field ? '' : field;
},
formatName(code) {
let name = '';
const section = this.$store.getters['map/getDeviceByCode'](code);
if (section) {
const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
if (station) {
name += `${station.name} `;
}
name += `${section.name} (${section.code})`;
}
return name;
},
pushSwitch() {
if (this.$refs && this.$refs.pathRoute) {
this.$refs.pathRoute.doShow();
}
},
routeSelected(data) {
data.forEach((element, index) => {
this.addModel.mapRouteUnitRelList.push({
routeCode: element.code,
routeName: element.name
// routeUnitCode: this.addModel.code
});
});
},
// 下一步
nextStep() {
this.$refs.form.validate((valid) => {
if (valid) {
this.display = 2;
}
});
},
lastStep() {
this.display = 1;
},
buildModel() {
this.addModel.mapRouteUnitRelList.forEach((elem, index) => {
elem['orderNum'] = index + 1;
});
const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id;
return model;
},
save() {
this.loading = true;
if (this.editShow) {
setRouteUnit(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.updateSuccessfully'));
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
});
} else {
addRouteUnit(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.createSuccess'));
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
});
}
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.display = 1;
this.editShow = false;
this.addModel = {
mapId: this.mapInfo.id,
code: getUID('RouteUnit'),
startSectionCode: '',
endSectionCode: '',
mapRouteUnitRelList: []
};
this.loading = false;
}
},
// 移除列表
deletePathUnit(index, data) {
this.addModel.mapRouteUnitRelList.splice(index, 1);
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
this.addModel.startSectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
this.addModel.endSectionCode = selected.code;
}
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-radio {
margin-right: 10px;
}
</style>

598
src/views/map/mapdraft/mapedit/dataRelation/routeoperate/detail.vue
View File

@ -1,598 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.routePreview')" :visible.sync="show" width="95%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
<pre-view-field ref="previewField" :map-info="mapInfo" />
<!-- <related-route ref="relatedRoute" :map-info="mapInfo" @saveRelated="saveRelated" /> -->
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap, listRouteRoute, deleteRouteRoute, queryRouteRouteDetail, updateRouteRoute } from '@/api/jmap/mapdraft'; /** listRouteMapRoute*/
import PreViewField from './preview';
// import RelatedRoute from './related';
export default {
name: 'RouteDetail',
components: {
PreViewField
// RelatedRoute
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
RouteNatureTypeList: [],
RouteAutoTypeList: [],
SwitchLocateTypeList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
name: {
type: 'text',
label: this.$t('map.pathName')
},
stationCode: {
type: 'select',
label: this.$t('map.routeStationName'),
config: {
data: []
}
},
startSignalCode: {
type: 'select',
label: this.$t('map.startingSignalName'),
config: {
data: []
}
},
endSignalCode: {
type: 'select',
label: this.$t('map.endingSignalName'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
// {
// title: this.$t('map.routeID'),
// prop: 'code'
// },
{
title: this.$t('map.pathName'),
prop: 'name'
},
// {
// title: this.$t('map.pathUnitMapName'),
// prop: 'mapId'
// },
{
title: this.$t('map.routeStationName'),
prop: 'stationCode'
},
{
title: this.$t('map.accessType'),
prop: 'natureType'
},
{
title: this.$t('map.automaticRouteType'),
prop: 'autoType'
},
{
title: this.$t('map.startingSignalName'),
prop: 'startSignalCode'
},
{
title: this.$t('map.endingSignalName'),
prop: 'endSignalCode'
},
{
title: this.$t('map.nearSectionCode'),
prop: 'nearSectionCode'
},
{
type: 'button',
title: this.$t('map.continueProtectSwitchData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.overlapSwitchDetail
}
]
},
{
type: 'button',
title: this.$t('map.accessSideTurnoutData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.flankProtectionSwitchDetail
}
]
},
{
title: this.$t('map.turnBackRailName'),
prop: 'turnBackSectionCode'
},
{
type: 'button',
title: this.$t('map.routeSegmentData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.routeTrigger
}
]
},
{
type: 'button',
title: this.$t('map.routeProtectsData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.routeOverlap
}
]
},
{
type: 'button',
title: this.$t('map.accessPhysical'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.sectionDetail
}
]
},
{
type: 'button',
title: this.$t('map.routeRouteScreenData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.stationStandDetail
}
]
},
{
type: 'button',
title: this.$t('map.routeRouteTurnoutData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.routeSwitchDetail
}
]
},
// {
// type: 'button',
// title: this.$t('map.hostileApproachData'),
// buttons: [
// {
// name: this.$t('map.relation'),
// handleClick: this.related
// }
// ]
// },
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.edit
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'switchList',
'sectionList',
'stationList',
'stationStandList'
])
},
watch: {
signalList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].uniqueName, value: val[i].code });
}
this.queryForm.queryObject.startSignalCode.config.data = list;
this.queryForm.queryObject.endSignalCode.config.data = list;
}
},
stationList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].name, value: val[i].code });
}
this.queryForm.queryObject.stationCode.config.data = list;
}
}
},
mounted() {
this.$Dictionary.routeNatureType().then(list => {
this.RouteNatureTypeList = list;
});
this.$Dictionary.routeAutoType().then(list => {
this.RouteAutoTypeList = list;
});
this.$Dictionary.switchLocateType().then(list => {
this.SwitchLocateTypeList = list;
});
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return listRouteRoute(this.mapInfo.id, params);
}
},
acquireMapList() {
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.RouteAutoTypeList, 'code', 'name', ['autoType']);
that.$convertSpecifiedField(elem, that.RouteNatureTypeList, 'code', 'name', ['natureType']);
that.$convertSpecifiedField(elem, that.SwitchLocateTypeList, 'code', 'name', ['overlapSwitchLocateType']);
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
that.$convertSpecifiedField(elem, that.switchList, 'code', 'name', ['routeOverlapSwitchList']);
that.$convertSpecifiedField(elem, that.signalList, 'code', 'uniqueName', ['startSignalCode', 'endSignalCode']);
that.$convertSpecifiedField(elem, that.stationList, 'code', 'name', ['stationCode']);
that.$convertSpecifiedField(elem, that.sectionList, 'code', 'name', ['nearSectionCode', 'autoTriggerSectionCode', 'turnBackSectionCode']);
});
}
}
return data;
},
// 自动触发区段数据列表
async routeTrigger(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const sectionDict = {};
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: this.$t('map.routeSegmentData'),
name: row.name,
model: {
field: 'routeTriggerSectionList',
items: [
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
{
prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeTriggerSectionList);
}
},
// 延续保护区段数据列表
async routeOverlap(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const sectionDict = {};
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路延续保护区段数据',
name: row.name,
model: {
items: [
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
{
prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeOverlapSectionList);
}
},
// 物理区段数据列表
async sectionDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const sectionDict = {};
this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路物理区段数据',
name: row.name,
model: {
items: [
{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
{
prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeSectionList);
}
},
// 屏蔽门数据列表
async stationStandDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const stationStandDict = {};
this.stationStandList.map(elem => { stationStandDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路屏蔽门数据',
name: row.name,
model: {
field: 'routeStandList',
items: [
{ prop: 'stationStandCode', label: '屏蔽门ID', type: 'text' },
{
prop: 'stationStandCode', label: '屏蔽门名称', type: 'select', options: stationStandDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeStationStandList);
}
},
async overlapSwitchDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const switchDict = {};
const switchTypeDict = {};
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '延续保护道岔数据',
name: row.name,
model: {
items: [
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
{
prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
},
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeOverlapSwitchList);
}
},
async flankProtectionSwitchDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const switchDict = {};
const switchTypeDict = {};
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路侧防道',
name: row.name,
model: {
items: [
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
{
prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
},
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeFlankProtectionList);
}
},
// 道岔段数据列表
async routeSwitchDetail(index, row) {
if (this.$refs && this.$refs.previewField && row) {
const switchDict = {};
const switchTypeDict = {};
this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '进路道岔数据',
name: row.name,
model: {
field: 'routeSwitchList',
items: [
{ prop: 'switchCode', label: '道岔ID', type: 'text' },
{
prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
},
{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
]
}
};
this.$refs.previewField.doShow(fieldList, row.routeSwitchList);
}
},
// againstDetail(index, row) {
// if (this.$refs && this.$refs.previewField && row) {
// listRouteMapRoute(row.mapId).then(response => {
// const againstDict = {};
// const data = response.data;
// data.forEach(elem => {
// againstDict[elem.code] = elem.name;
// });
// function convert(data) {
// if (data) {
// data.routeAgainstList = data.routeAgainstList.map(elem => {
// if (data.code === elem.routeCode) {
// return { code: elem.againstRouteCode };
// } else if (data.code === elem.againstRouteCode) {
// return { code: elem.routeCode };
// }
// });
// return data;
// }
// }
// this.mapList.forEach(elem => {
// if (elem.name === row.mapId) {
// const fieldList = {
// id: row.id,
// mapId: elem.id,
// title: '敌对进路',
// model: {
// field: 'routeAgainstList',
// convert: convert,
// items: [
// { prop: 'code', label: '敌对进路ID', type: 'text' },
// {
// prop: 'code', label: '敌对进路名称', type: 'select', options: againstDict
// }
// ]
// }
// };
// this.$refs.previewField.doShow(fieldList);
// }
// });
// }).catch(() => {
// this.$messageBox('操作错误');
// });
// }
// },
// 敌对进路数据列表
// async related(index, row) {
// if (this.$refs && this.$refs.relatedRoute) {
// const fieldList = {
// id: row.id,
// mapId: this.$route.params.mapId,
// code: row.code,
// name: row.name
// };
// this.$refs.relatedRoute.doShow(fieldList, row.routeAgainstList, row);
// }
// },
// 保存
saveRelated(row) {
updateRouteRoute(row).then(response => {
this.$message.success('更新成功');
}).catch(() => {
this.$messageBox('操作异常');
});
},
edit(index, row) {
this.mapList.forEach(elem => {
if (elem.name === row.mapId) {
const model = {
mapId: elem.id,
id: row.id
};
queryRouteRouteDetail(model).then(response => {
const data = response.data;
this.RouteNatureTypeList.forEach(elem => {
if (elem.name === data.natureType) {
data.natureType = elem.code;
}
});
this.RouteAutoTypeList.forEach(elem => {
if (elem.name === data.autoType) {
data.autoType = elem.code;
}
});
this.SwitchLocateTypeList.forEach(elem => {
if (elem.name === data.overlapSwitchLocateType) {
data.overlapSwitchLocateType = elem.code;
}
});
data.routeSectionList = data.routeSectionList.map(elem => { return elem.sectionCode; });
data.routeOverlapSectionList = data.routeOverlapSectionList.map(elem => { return elem.sectionCode; });
data.routeTriggerSectionList = data.routeTriggerSectionList.map(elem => { return elem.sectionCode; });
data.routeStandList = data.routeStandList.map(elem => { return elem.stationStandCode; });
this.$emit('routeSelected', data);
this.doClose();
});
}
});
},
deleteObj(index, row) {
if (row) {
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteRouteRoute(row.id).then(response => {
this.$message.success('删除成功');
this.reloadTable();
}).catch(() => {
this.$messageBox('删除失败');
});
}).catch(() => {
this.$message.info('已取消删除');
});
}
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

90
src/views/map/mapdraft/mapedit/dataRelation/routeoperate/index.vue
View File

@ -1,90 +0,0 @@
<template>
<div>
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
@setCenter="setCenter"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'RouteOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routeSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

103
src/views/map/mapdraft/mapedit/dataRelation/routeoperate/related.vue
View File

@ -1,103 +0,0 @@
<template>
<el-dialog
v-dialogDrag
:title="mapInfo.name + ' / ' + editModel.name + ' / ' + title"
:visible.sync="show"
width="40%"
:before-close="doClose"
center
append-to-body
>
<el-form ref="form" :model="editModel" label-width="120px" size="mini">
<el-form-item :label="$t('map.routeName')" prop="name" readonly="true">
<el-input v-model="editModel.name" :disabled="true" />
</el-form-item>
<el-form-item :label="$t('map.associatedRoute')">
<el-transfer
v-model="routeColloction"
filterable
:filter-method="filterRoute"
:filter-placeholder="$t('map.pleaseEnterNameQuery')"
:data="routeData"
:titles="['进路集合', '关联进路ID']"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSave">{{ $t('map.save') }}</el-button>
<el-button @click="show = false">{{ $t('map.cancel') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { listRouteMapRoute } from '@/api/jmap/mapdraft';
export default {
name: 'DictionaryDetailEdit',
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
title: this.$t('map.associatedHostileRecord'),
routes: [],
routeColloction: [],
routeData: [],
editModel: {
code: '',
name: ''
},
row: {}
};
},
methods: {
filterRoute(query, item) {
return item.pinyin.indexOf(query) > -1;
},
doShow(fieldList, dataList, row) {
this.routeColloction = [];
this.routeData = [];
this.editModel.id = fieldList.id;
this.editModel.code = fieldList.code;
this.editModel.name = fieldList.name;
this.row = row || {};
this.routeColloction = (dataList || []).map(elem => { return elem.againstRouteCode; });
listRouteMapRoute(fieldList.mapId).then(response => {
if (response.data) {
this.routes = response.data;
this.routes.forEach(elem => {
if (elem.code !== this.editModel.code) {
this.routeData.push({
label: elem.name,
key: elem.code,
pinyin: elem.code
});
}
});
}
this.show = true;
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
});
},
doClose(done) {
this.show = false;
},
doSave() {
this.row.id = this.editModel.id;
this.row.routeCode = this.editModel.code;
this.row.mapId = this.mapInfo.id;
this.row.routeAgainstList = this.routeColloction.map(elem => { return { againstRouteCode: elem }; });
this.$emit('saveRelated', this.row);
}
}
};
</script>

251
src/views/map/mapdraft/mapedit/dataRelation/routingoperate/detail.vue
View File

@ -1,251 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.thenList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
<pre-view-field ref="previewField" :map-info="mapInfo" />
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap } from '@/api/jmap/mapdraft';
import { listRouting, deleteRouting, getRouting } from '@/api/jmap/mapdraft';
import PreViewField from './preview';
export default {
name: 'RouteDetail',
components: {
PreViewField
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
startStationCode: {
type: 'select',
label: this.$t('map.startStation'),
config: {
data: []
}
},
endStationCode: {
type: 'select',
label: this.$t('map.endStation'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.routingCode'),
prop: 'code'
},
{
title: this.$t('map.startStation'),
prop: 'startStationCode'
},
{
title: this.$t('map.startStationCode'),
prop: 'startSectionCode'
},
{
title: this.$t('map.endStation'),
prop: 'endStationCode'
},
{
title: this.$t('map.endStationCode'),
prop: 'endSectionCode'
},
{
title: this.$t('map.routingDirection'),
prop: 'directionCode',
type: 'tag',
columnValue: (row) => { return this.$ConstSelect.translate(row.directionCode, 'DirectionCodeList'); },
tagType: (row) => { if (row.directionCode === '0') { return 'primary'; } else { return 'success'; } }
},
{
title: this.$t('map.destination'),
prop: 'destinationCode'
},
{
title: this.$t('map.remarks'),
prop: 'remarks'
},
{
type: 'button',
title: this.$t('map.sectionData'),
buttons: [
{
name: this.$t('map.preview'),
handleClick: this.sectionDetail
}
]
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.compile'),
handleClick: this.editObj
},
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'stationList'
])
},
watch: {
stationList: function (val, old) {
const list = [];
if (val && val.length) {
val.forEach(elem => {
list.push({ label: this.formatName(elem.code), value: elem.code });
});
this.queryForm.queryObject.startStationCode.config.data = list;
this.queryForm.queryObject.endStationCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
formatName(code) {
let name = '';
const device = this.$store.getters['map/getDeviceByCode'](code);
if (device) {
name = device.name;
}
return name;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
return listRouting(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
elem.startStationCode = that.formatName(elem.startStationCode);
elem.startSectionCode = that.formatName(elem.startSectionCode);
elem.endStationCode = that.formatName(elem.endStationCode);
elem.endSectionCode = that.formatName(elem.endSectionCode);
});
}
}
return data;
},
editObj(index, row) {
getRouting(row.id).then(response => {
const data = Object.assign({ code: response.data.id }, response.data);
this.$emit('routingSelected', data);
this.doClose();
});
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除
deleteRouting(row.id).then(response => {
this.$message.success(this.$t('map.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('map.failDelete'));
});
}
},
sectionDetail(index, row) {
const sectionDict = {};
const stationDict = {};
this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
const fieldList = {
id: row.id,
mapId: this.$route.params.mapId,
title: '区段列表',
name: row.name,
model: {
field: 'routingSectionList',
items: [
{ prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
{
prop: 'stationCode', label: this.$t('map.sectionName'), type: 'select', options: stationDict
},
{ prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
{
prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
}
]
}
};
this.$refs.previewField.doShow(fieldList, row.routingSectionList);
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

117
src/views/map/mapdraft/mapedit/dataRelation/routingoperate/index.vue
View File

@ -1,117 +0,0 @@
<template>
<div>
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routingSelected="routingSelected" />
</div>
<!-- <transition name="el-zoom-in-center">
<div class="mapControl">
<el-card>
<div slot="header" class="clearfix">
<span>
{{ $t('map.mapName') }}
<b>{{ mapInfo.name }}</b>
</span>
<el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">{{ $t('map.preview') }}
</el-button>
<el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">{{ $t('map.newConstruction') }}
</el-button>
</div>
<el-tabs v-model="enabledTab" type="card">
<el-tab-pane :label="$t('map.routing')" name="Route">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
</el-tab-pane>
</el-tabs>
</el-card>
<route-detail ref="routeDetail" :map-info="mapInfo" @routingSelected="routingSelected" />
</div>
</transition> -->
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'PathOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routingSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

381
src/views/map/mapdraft/mapedit/dataRelation/routingoperate/route.vue
View File

@ -1,381 +0,0 @@
<template>
<div :style="{ height: cardHeight +'px' }">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
<div class="definition">
<el-form-item :label="$t('map.routingName')" prop="name">
<el-input v-model="addModel.name" />
</el-form-item>
<el-form-item :label="$t('map.startStationCodeColon')" prop="startStationCode">
<el-select v-model="addModel.startStationCode" clearable :filterable="true">
<el-option
v-for="item in filterStationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'startStationCode' ? 'danger' : 'primary'"
@click="hover('startStationCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.startSectionColon')" prop="startSectionCode">
<el-select v-model="addModel.startSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'startSectionCode' ? 'danger' : 'primary'"
@click="hover('startSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.endStationColon')" prop="endStationCode">
<el-select v-model="addModel.endStationCode" clearable :filterable="true">
<el-option
v-for="item in filterStationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'endStationCode' ? 'danger' : 'primary'"
@click="hover('endStationCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.endSectionColon')" prop="endSectionCode">
<el-select v-model="addModel.endSectionCode" clearable :filterable="true">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'endSectionCode' ? 'danger' : 'primary'"
@click="hover('endSectionCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.destinationCode')" prop="destinationCode">
<el-input v-model="addModel.destinationCode" />
</el-form-item>
<el-form-item :label="$t('map.routingDirection')" prop="directionCode">
<el-select v-model="addModel.directionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in DirectionCodeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.remarksColon')" prop="remarks">
<el-input v-model="addModel.remarks" type="textarea" :rows="4" :placeholder="$t('map.pleaseSelect')" />
</el-form-item>
<el-form-item :label="$t('map.trafficSegmentData')" prop="routingSectionList">
<div>
<el-select v-model="stationCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in filterStationList"
:key="item.code"
:label="`${item.name}(${item.code})`"
:value="item.code"
/>
</el-select>
<el-button
:type="field === 'routingStation' ? 'danger' : 'primary'"
@click="hover('routingStation')"
>{{ $t('map.activate') }}</el-button>
</div>
<div>
<el-select v-model="sectionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in sectionList"
:key="item.code"
:label="`${item.name}(${item.code})`"
:value="item.code"
/>
</el-select>
<el-button
:type=" field === 'routingSection' ? 'danger' : 'primary'"
@click="hover('routingSection')"
>{{ $t('map.activate') }}</el-button>
<el-button
type="primary"
@click="pushSection(addModel.routingSectionList, {stationCode: stationCode, sectionCode: sectionCode})"
>
{{ $t('map.add') }}
</el-button>
</div>
<el-table :data="addModel.routingSectionList" border style="width: 97%">
<el-table-column prop="sectionCode" :label="$t('map.stationName')">
<template slot-scope="scope">
<span>{{ formatName(scope.row.stationCode) }}</span>
</template>
</el-table-column>
<el-table-column prop="sectionCode" :label="$t('map.sectionName')">
<template slot-scope="scope">
<span>{{ formatName(scope.row.sectionCode) }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.prevent="deleteSection(addModel.routingSectionList, scope.$index)"
>
{{ $t('map.remove') }}
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
</el-button>
<el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
</el-button>
</el-button-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { addRouting, updateRouting } from '@/api/jmap/mapdraft';
import { ViewMode } from '@/scripts/ConstDic';
import { formatName } from '@/utils/runPlan';
// import Sortable from 'sortablejs';
export default {
name: 'RouteOperation',
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
ViewMode: ViewMode,
field: '',
stationCode: '',
sectionCode: '',
isSave: true,
loading: false,
DirectionCodeList: this.$ConstSelect.DirectionCodeList,
addModel: {
name: '',
mapId: '',
code: '',
directionCode: '',
destinationCode: '',
startStationCode: '',
startSectionCode: '',
endStationCode: '',
endSectionCode: '',
remarks: '',
routingSectionList: []
},
editShow: false,
rules: {
name: [
{ required: true, message: this.$t('map.routingName'), trigger: 'change' }
],
destinationCode: [
{ required: true, message: this.$t('map.destinationCode'), trigger: 'change' }
],
startStationCode: [
{ required: true, message: this.$t('map.startStationCode'), trigger: 'change' }
],
startSectionCode: [
{ required: true, message: this.$t('map.startSectionCode'), trigger: 'change' }
],
endStationCode: [
{ required: true, message: this.$t('map.endStationCode'), trigger: 'change' }
],
endSectionCode: [
{ required: true, message: this.$t('map.endSectionCode'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'stationList'
]),
filterSectionList() {
if (this.sectionList) {
return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
} else {
return [];
}
},
filterStationList() {
if (this.stationList) {
return this.stationList.filter(elem => { return true; });
} else {
return [];
}
}
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
this.editShow = true;
}
}
},
mounted() {
// this.rowDrop();
},
methods: {
// 行拖拽
// rowDrop() {
// const that = this;
// const tbody = document.querySelector('.el-table__body-wrapper tbody');
// if (tbody) {
// Sortable.create(tbody, {
// onEnd({ newIndex, oldIndex }) {
// const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
// that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
// }
// });
// }
// },
hover(field) {
this.field = field === this.field ? '' : field;
},
formatName(code) {
return formatName(code);
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'startStationCode'.toUpperCase()) {
this.addModel.startStationCode = selected.code;
} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'endStationCode'.toUpperCase()) {
this.addModel.endStationCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
this.addModel.startSectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
this.addModel.endSectionCode = selected.code;
this.addModel.destinationCode = selected.destinationCode || '';
} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() == 'routingSection'.toUpperCase()) {
this.sectionCode = selected.code;
} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() == 'routingStation'.toUpperCase()) {
this.stationCode = selected.code;
}
}
},
pushSection(list, data) {
if (data) {
const index = list.findIndex(elem => { return elem.sectionCode == data.sectionCode; });
if (index < 0) {
list.push(data);
} else {
this.$messageBox(this.$t('tip.routeSameID'));
}
}
},
deleteSection(list, index) {
list.splice(index, 1);
},
buildModel(code) {
this.addModel.routingSectionList.forEach((elem, index) => {
elem['orderNum'] = index + 1;
});
const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id;
if (code) { model['code'] = code; }
return model;
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
addRouting(this.buildModel(getUID('Routing'))).then(resp => {
this.$message.success(this.$t('tip.pathCreationSuccessful'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.createRoutingFailed'));
this.loading = false;
});
}
});
},
update() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
updateRouting(this.buildModel()).then(resp => {
this.$message.success(this.$t('tip.pathUpdataSuccessful'));
this.loading = false;
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.pathUpdataFailed'));
this.loading = false;
});
}
});
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel.mapId = this.mapInfo.id;
this.addModel.routingSectionList = [];
this.addModel.code = '';
this.stationCode = '';
this.sectionCode = '';
this.isSave = true;
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-radio {
margin-right: 10px;
}
</style>

153
src/views/map/mapdraft/mapedit/dataRelation/switchoperate/detail.vue
View File

@ -1,153 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.linkageSwitchList')" :visible.sync="show" width="85%" :before-do-close="doClose">
<div>
<QueryListPage
ref="queryListPage"
:pager-config="pagerConfig"
:query-form="queryForm"
:query-list="queryList"
/>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { listMap, listLinkageSwitch, deleteLinkageSwitch } from '@/api/jmap/mapdraft';
export default {
name: 'RouteDetail',
components: {
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
}
},
data() {
return {
show: false,
mapList: [],
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
labelWidth: '120px',
queryObject: {
switchCode: {
type: 'select',
label: this.$t('map.switchNameC'),
config: {
data: []
}
}
}
},
queryList: {
query: this.queryFunction,
afterQuery: this.afterQuery,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('map.pathUnitMapName'),
prop: 'mapId'
},
{
title: this.$t('map.switchACode'),
prop: 'switchACode'
},
{
title: this.$t('map.switchBCode'),
prop: 'switchBCode'
},
{
type: 'button',
title: this.$t('map.operation'),
width: '200',
buttons: [
{
name: this.$t('map.deleteObj'),
handleClick: this.deleteObj,
type: 'danger'
}
]
}
]
}
};
},
computed: {
...mapGetters('map', [
'switchList'
])
},
watch: {
switchList: function (val, old) {
const list = [];
if (val && val.length) {
for (let i = 0; i < val.length; i++) {
list.push({ label: val[i].name, value: val[i].code });
}
this.queryForm.queryObject.switchCode.config.data = list;
}
}
},
mounted() {
this.acquireMapList();
},
methods: {
doShow() {
this.show = true;
this.reloadTable();
},
doClose() {
this.show = false;
},
queryFunction(params) {
if (this.mapInfo && this.mapInfo.id) {
// 获取联动道岔列表
return listLinkageSwitch(this.mapInfo.id, params);
}
},
acquireMapList() {
// 地图名称列表
listMap().then(response => {
this.mapList = response.data;
});
},
afterQuery(data) {
if (data && data.list) {
const that = this;
const list = data.list;
if (list) {
list.map(elem => {
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
that.$convertSpecifiedField(elem, that.switchList, 'code', 'name', ['switchACode', 'switchBCode']);
});
}
}
return data;
},
deleteObj(index, row) {
if (this.mapInfo && this.mapInfo.id && row) {
// 删除 双动道岔
deleteLinkageSwitch(this.mapInfo.id, row.id).then(response => {
this.$message.success(this.$t('tip.successfullyDelete'));
this.reloadTable();
}).catch(() => {
this.$messageBox(this.$t('tip.failDelete'));
});
}
},
reloadTable() {
if (this.queryList && this.queryList.reload) {
this.queryList.reload();
}
}
}
};
</script>

115
src/views/map/mapdraft/mapedit/dataRelation/switchoperate/index.vue
View File

@ -1,115 +0,0 @@
<template>
<div>
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
<!-- <transition name="el-zoom-in-center">
<div class="mapControl">
<el-card>
<div slot="header" class="clearfix">
<span>
{{ $t('map.mapName') }}
<b>{{ mapInfo.name }}</b>
</span>
<el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
<el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">{{ $t('map.reset') }}</el-button>
</div>
<el-tabs v-model="enabledTab" type="card">
<el-tab-pane :label="$t('map.setSwitch')" name="Route">
<route-draft
ref="routeEdit"
:selected="selected"
:map-info="mapInfo"
:route-data="routeData"
:card-height="cardHeight"
/>
</el-tab-pane>
</el-tabs>
</el-card>
<route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
</div>
</transition> -->
</template>
<script>
import RouteDraft from './route';
import RouteDetail from './detail';
export default {
name: 'SwitchOperate',
components: {
RouteDraft,
RouteDetail
},
props: {
mapInfo: {
type: Object,
default() {
return null;
}
},
selected: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
return {
enabledTab: 'Route',
routeData: null
};
},
methods: {
clickEvent(e, model) {
this.onSelect(model);
},
onSelect(model) {
if (model) {
this.selected = model;
} else {
this.selected = null;
}
},
setDelayUnlockStatus(data, status) {
if (data && data.delayShowList) {
data.delayShowList.forEach(elem => {
elem.status = status;
});
}
},
routeSelected: function (data) {
this.routeData = data;
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.isSave = false;
}
},
previewRouteEvent: function () {
if (this.$refs && this.$refs.routeDetail) {
this.$refs.routeDetail.doShow();
}
},
createRouteEvent: function () {
if (this.$refs && this.$refs.routeEdit) {
this.$refs.routeEdit.clear();
}
},
setSelected(selected) {
this.$refs.routeEdit.setSelected(selected);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
};
</script>

196
src/views/map/mapdraft/mapedit/dataRelation/switchoperate/route.vue
View File

@ -1,196 +0,0 @@
<template>
<div :style="{ height: cardHeight +'px' }">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
<el-form-item :label="$t('map.switchACodeNum')" prop="switchACode">
<el-select v-model="addModel.switchACode" clearable :filterable="true">
<el-option
v-for="item in switchList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button :type=" field === 'switchACode' ? 'danger' : 'primary'" @click="hover('switchACode')">{{ $t('map.activate') }}
</el-button>
</el-form-item>
<el-form-item :label="$t('map.switchBCodeNum')" prop="switchBCode">
<el-select v-model="addModel.switchBCode" clearable :filterable="true">
<el-option
v-for="item in switchList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button :type=" field === 'switchBCode' ? 'danger' : 'primary'" @click="hover('switchBCode')">{{ $t('map.activate') }}
</el-button>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}</el-button>
</el-button-group>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { createLinkageSwitch } from '@/api/jmap/mapdraft';
// import { ViewMode } from '@/scripts/ConstDic';
export default {
name: 'RouteOperation',
components: {
},
props: {
selected: {
type: Object,
default() {
return null;
}
},
mapInfo: {
type: Object,
default() {
return null;
}
},
routeData: {
type: Object,
default() {
return null;
}
},
cardHeight: {
type: Number || String,
required: true
}
},
data() {
var switchBCode = (rule, value, callback) => {
if (!value) {
return callback(new Error(this.$t('rules.selectTurnoutID')));
}
setTimeout(() => {
if (value == this.addModel.switchACode) {
callback(new Error(this.$t('rules.switchesCannot')));
} else {
callback();
}
}, 100);
};
return {
field: '',
code: '',
type: '',
loading: false,
addModel: {
mapId: '',
name: '',
switchACode: '',
switchBCode: ''
},
rules: {
switchACode: [
{ required: true, message: this.$t('rules.selectTurnoutID'), trigger: 'change' }
],
switchBCode: [
{ required: true, validator: switchBCode, trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'signalList',
'switchList',
'sectionList',
'stationList',
'stationStandList'
]),
routeName: {
get: function () {
let beg = ''; let end = '';
if (this.signalList) {
this.signalList.forEach(elem => {
if (elem.code === this.addModel.startSignalCode) beg = elem.name;
if (elem.code === this.addModel.endSignalCode) end = elem.name;
});
}
return beg + '-' + end;
}
}
},
watch: {
mapInfo(val) {
if (val) {
this.addModel.mapId = val.id;
}
},
routeData(val, old) {
if (val) {
this.addModel = val;
}
},
routeName(val, old) {
if (val) {
this.addModel.name = val;
}
}
},
mounted() {
},
methods: {
hover(field) {
this.field = field === this.field ? '' : field;
},
buildModel() {
const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id;
return model;
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
// 创建联动道岔
this.loading = true;
createLinkageSwitch(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.createSuccess'));
this.loading = false;
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
});
}
});
},
clear() {
if (this.$refs && this.$refs.form && this.mapInfo) {
delete this.addModel.id;
this.$refs.form.resetFields();
this.addModel = {
mapId: this.mapInfo.id,
switchACode: '',
switchBCode: ''
};
}
},
setSelected(selected) {
if (selected) {
if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'switchACode'.toUpperCase()) {
this.addModel.switchACode = selected.code;
} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'switchBCode'.toUpperCase()) {
this.addModel.switchBCode = selected.code;
}
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-radio {
margin-right: 10px;
}
</style>

271
src/views/map/mapdraft/mapedit/mapoperate/ImageControl.vue
View File

@ -1,271 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="dataForm" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-data ref="make" :form="makeForm" :form-model="addModel" :rules="createRules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'ImageControlDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
mapData: null,
imageLists: [
{
value: `${process.env.VOICE_API}/oss/2d/bj1.png`,
label: this.$t('map.upside')
},
{
value: `${process.env.VOICE_API}/oss/2d/bj2.png`,
label: this.$t('map.hypomere')
}
],
editModel: {
code: '',
width: '',
height: '',
name: '',
rotate: 0,
zIndex: 5,
url: '',
position: {
x: 0,
y: 0
}
},
addModel: {
width: 48,
height: 20,
name: '',
rotate: 0,
zIndex: 5,
url: `${process.env.VOICE_API}/oss/2d/bj1.png`,
position: {
x: 0,
y: 0
}
},
rules: {
width: [
{ required: true, message: this.$t('map.pleaseEnterImageWidth'), trigger: 'blur' }
],
height: [
{ required: true, message: this.$t('map.pleaseEnterImageHeight'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'resourceList'
]),
dataForm() {
const form = {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.image')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.resourceList, change: true, deviceChange: this.deviceChange },
{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
{ prop: 'zIndex', label: this.$t('map.imageZindex'), type: 'number', min: 0 },
{ prop: 'rotate', label: this.$t('map.rotateAngle'), type: 'number', min: 0 },
{ prop: 'position', label: this.$t('map.imagePoint'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: []
}
}
};
return form;
},
makeForm() {
const form = {
labelWidth: '150px',
items: [
{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
{ prop: 'url', label: this.$t('map.imageSelect'), type: 'select', optionLabel: 'label', optionValue: 'value', options: this.imageLists },
{ prop: 'position', label: this.$t('map.imagePoint'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
};
return form;
},
createRules: function () {
return {
width: [
{ required: true, message: this.$t('map.pleaseEnterImageWidth'), trigger: 'blur' }
],
height: [
{ required: true, message: this.$t('map.pleaseEnterImageHeight'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('ImageControl');
const model = {
_type: 'ImageControl',
code: uid,
name: uid,
width: this.addModel.width,
rotate: 0,
zIndex: 5,
height: this.addModel.height,
url: this.addModel.url,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'ImageControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('map.confirm'),
cancelButtonText: this.$t('map.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

280
src/views/map/mapdraft/mapedit/mapoperate/buttonDraft.vue
View File

@ -1,280 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
<el-form-item :label="$t('map.buttonType')+ ':'" prop="type">
<el-select v-model="addModel.type" filterable>
<el-option
v-for="item in buttonTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.belongsStation')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<div class="coordinate">
<span class="title" style="width: 120px">{{ $t('map.textPoints') }}</span>
<el-form-item
label="x:"
prop="position.x"
style="display: table; float: left; margin-right: 20px;"
label-width="25px"
>
<el-input-number v-model="addModel.position.x" label="x:" />
</el-form-item>
<el-form-item
label="y:"
prop="position.y"
style="display: table; float: left;"
label-width="25px"
>
<el-input-number v-model="addModel.position.y" label="y:" />
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'LcControlDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
buttonTypeList: [
{ code: '01', name: this.$t('map.returnByGraph') }
],
mapData: null,
editModel: {
code: '',
text: '',
type: '',
stationCode: '',
position: {
x: 0,
y: 0
}
},
addModel: {
type: '',
stationCode: '',
text: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
tsxt: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'buttonList'
]),
createRules: function () {
return {
text: [
{ required: true, message: this.$t('rules.pleaseSelectButtonContent'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectButtonType'), trigger: 'blur' }
],
stationCode: [
{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
},
form() {
const form = {
labelWidth: '140px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.buttonControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.buttonList, change: true, deviceChange: this.deviceChange },
{ prop: 'type', label: `${this.$t('map.buttonType')}:`, type: 'select', optionLabel: 'name', optionValue: 'code', options: this.buttonTypeList },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px'},
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() == 'ButtonControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('ButtonControl');
const model = {
_type: 'ButtonControl',
code: uid,
type: this.addModel.type,
stationCode: this.addModel.stationCode,
text: this.addModel.text,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'ButtonControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

250
src/views/map/mapdraft/mapedit/mapoperate/counter.vue
View File

@ -1,250 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="120px" :model="addModel" :rules="createRules" size="mini">
<el-form-item :label="$t('map.stationName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.counterType')" prop="type">
<el-select v-model="addModel.type" filterable :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in typeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'CounterDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
typeList: [
{ code: '01', name: this.$t('map.areaSolution') },
{ code: '02', name: this.$t('map.alwaysSolution') }
],
editModel: {
code: '',
name: '',
type: '',
max: 0,
val: 0,
stationCode: '',
position: {
x: 0,
y: 0
}
},
addModel: {
type: '',
stationCode: ''
}
};
},
computed: {
...mapGetters('map', [
'counterList',
'stationList',
'skinCode'
]),
createRules: function () {
return {
type: [
{ required: true, message: this.$t('map.selectCounterType'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
]
};
},
rules: function () {
return {
code: [
{ required: true, message: this.$t('map.pleaseSelectDevice'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('map.pleaseSelectCountName'), trigger: 'change' }
],
type: [
{ required: true, message: this.$t('map.selectCounterType'), trigger: 'change' }
],
max: [
{ required: true, message: this.$t('map.pleaseCounterValue'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'change' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'change' }
]
};
},
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.counterCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.counterList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.counterName'), type: 'input' },
{ prop: 'type', label: this.$t('map.counterType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.typeList },
{ prop: 'max', label: this.$t('map.countMax'), type: 'number', min: 0, placeholder: this.$t('map.piece') },
{ prop: 'position', label: this.$t('map.counterPosition'), type: 'coordinate', width: '110px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('Counter');
const model = {
_type: 'Counter',
code: uid,
type: this.addModel.type,
max: 0,
val: 0
};
this.typeList.forEach(elem => {
if (elem.code === this.addModel.type) {
model.name = elem.name;
}
});
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.position = { x: elem.position.x, y: elem.position.y };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs.form.validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Counter'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('map.confirm'),
cancelButtonText: this.$t('map.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
</style>

232
src/views/map/mapdraft/mapedit/mapoperate/delayunlock.vue
View File

@ -1,232 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="editRules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
<el-form-item :label="$t('map.stationName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'DelayUnlockDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
skins: [],
editModel: {
code: '',
unlockTime: 0,
stationCode: '',
fontColor: '#FFFFFF',
font: '',
position: {
x: 0,
y: 0
}
},
addModel: {
stationCode: ''
}
};
},
computed: {
...mapGetters('map', [
'delayShowList',
'stationList',
'skinCode'
]),
createRules: function () {
return {
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
]
};
},
editRules: function () {
return {
code: [
{ required: true, message: this.$t('map.pleaseSelectDevice'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
],
unlockTime: [
{ required: true, message: this.$t('map.pleaseEnterDelayTime'), trigger: 'change' }
],
fontColor: [
{ required: true, message: this.$t('map.pleaseEnterFontColor'), trigger: 'change' }
],
font: [
{ required: true, message: this.$t('map.pleaseEnterFontFormat'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'change' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'change' }
]
};
},
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.delayUnlockingCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.delayShowList, change: true, deviceChange: this.deviceChange },
{ prop: 'unlockTime', label: this.$t('map.delayTime'), type: 'number', min: 0, max: 1000, placeholder: 's' },
{ prop: 'font', label: this.$t('map.font'), type: 'font' },
{ prop: 'fontColor', label: this.$t('map.color'), type: 'color' },
{ prop: 'position', label: this.$t('map.delayUnlockPosition'), type: 'coordinate', width: '110px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.$nextTick(() => {
if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
this.$refs.form.clearValidate();
});
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('DelayUnlock');
const model = {
_type: 'DelayUnlock',
font: '12px consolas',
fontColor: '#FFFFFF',
unlockTime: 10,
code: uid,
delayName: 'Test',
status: '00'
};
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.position = { x: elem.position.x, y: elem.position.y };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs.form.validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'DelayUnlock', status: '00'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('map.confirm'),
cancelButtonText: this.$t('map.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
</style>

250
src/views/map/mapdraft/mapedit/mapoperate/lcControl.vue
View File

@ -1,250 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="150px" :rules="createRules" :model="addModel" size="mini">
<el-form-item :label="$t('map.statusSignalName')" prop="name">
<el-input v-model="addModel.name" />
</el-form-item>
<div class="coordinate">
<span class="title">{{ $t('map.stateSignalsPlotCoordinates') }}</span>
<el-form-item
label="x:"
prop="position.x"
style="display: table; float: left; margin-right: 20px;"
label-width="20px"
>
<el-input-number v-model="addModel.position.x" />
</el-form-item>
<el-form-item
label="y:"
prop="position.y"
style="display: table; float: left;"
label-width="20px"
>
<el-input-number v-model="addModel.position.y" />
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'LcControlDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
addModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainModelList',
'lcList',
'skinCode'
]),
createRules: function () {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
},
form() {
const form = {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.lcControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.lcList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '150px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('LcControl');
const model = {
_type: 'LcControl',
code: uid,
name: this.addModel.name,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'LcControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

241
src/views/map/mapdraft/mapedit/mapoperate/limitControl.vue
View File

@ -1,241 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-data ref="make" :form="formMake" :form-model="addModel" :rules="createRules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'LimitControlDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
addModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainModelList',
'tempSpeedLimitList',
'skinCode'
]),
form() {
const form = {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.temporaryLimit')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.tempSpeedLimitList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: []
}
}
};
return form;
},
formMake() {
const form = {
labelWidth: '150px',
items: [
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
};
return form;
},
createRules: function () {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('LimitControl');
const model = {
_type: 'LimitControl',
code: uid,
name: this.addModel.name,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'LimitControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

308
src/views/map/mapdraft/mapedit/mapoperate/line.vue
View File

@ -1,308 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="120px" :model="addModel" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.lineType')" prop="type">
<el-select v-model="addModel.type" filterable>
<el-option
v-for="item in LineTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.lineWidth')" prop="width">
<el-input-number v-model="addModel.width" :min="1" />px
</el-form-item>
<div class="coordinate">
<span class="title">{{ $t('map.linePoint') }}</span>
<div class="point-section">
<template v-for="(point, index) in addModel.points">
<div :key="index" style="overflow: hidden;">
<el-form-item
label=""
:prop="'points[' + index + '].x'"
style="display: table; float: left;"
label-width="0px"
>
<el-input-number v-model="point.x" />
</el-form-item>
<span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
, </span>
<el-form-item
label=""
:prop="'points[' + index + '].y'"
style="display: table; float: left; margin-right: 5px;"
label-width="10px"
>
<el-input-number v-model="point.y" />
</el-form-item>
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPoint(addModel.points, index)"
/>
<el-button
icon="el-icon-minus"
:disabled="index == 0 || index == addModel.points.length - 1"
circle
class="point-button"
@click="delPoint(addModel.points, index)"
/>
</div>
</template>
</div>
</div>
</el-form>
</el-scrollbar>
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
LineTypeList: [],
editModel: {
code: '',
type: '',
width: 1,
points: []
},
addModel: {
type: '',
width: 1,
points: [
{ x: 0, y: 0 },
{ x: 100, y: 100 }
]
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
},
makeRules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'lineList',
'stationList',
'skinCode'
]),
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.lineList, change: true, deviceChange: this.deviceChange },
{ prop: 'type', label: this.$t('map.lineType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.LineTypeList },
{ prop: 'width', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, addPoint: this.addPoint, delPoint: this.delPoint }
]
},
map: {
name: this.$t('map.mapData'),
item: [
]
}
}
};
return form;
},
isPointsShow() {
return this.editModel.points.length > 0;
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
this.$Dictionary.lineType().then(list => {
this.LineTypeList = list;
});
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
addPoint(index) {
const data = { x: 0, y: 0 };
this.editModel.points.splice(index + 1, 0, data);
},
delPoint(index) {
this.editModel.points.splice(index + 1, 0);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (JSON.stringify(this.addModel.points[0]) !== JSON.stringify(this.addModel.points[this.addModel.points.length - 1])) {
const pointArr = JSON.stringify(this.addModel.points);
const model = {
_type: 'Line',
code: getUID('Line'),
type: this.addModel.type,
width: this.addModel.width,
points: JSON.parse(pointArr)
};
this.$emit('addOrUpdateMapModel', model);
} else {
this.$message.console.error(this.$t('tip.cannotCoincide'));
}
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Line'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control {
overflow-y: auto;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
}
}
.point-section {
float: left;
width: calc(100% - 120px);
}
.point-button {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
float: left;
/deep/ {
.el-icon-plus,
.el-icon-minus {
transform: translateY(-5px);
}
}
}
.el-input-number--mini {
width: 110px;
}
</style>

548
src/views/map/mapdraft/mapedit/mapoperate/link.vue
View File

@ -1,548 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="120px" :model="addModel" size="mini">
<el-form-item :label="$t('map.linkType')">
<el-radio-group v-model="LinkType">
<el-radio
v-for="item in LinkTypeList"
:key="item.value"
:label="item.value"
border
:disabled="item.disabled"
size="mini"
>{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="isNew">
<config-data ref="make1" :form="formMake1" :form-model="addModel" :rules="makeRules1" />
</template>
<template v-if="isFd">
<config-data ref="make2" :form="formMake2" :form-model="addModel" :rules="makeRules2" />
</template>
<template v-if="isSd">
<config-data ref="make3" :form="formMake3" :form-model="addModel" :rules="makeRules3" />
</template>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button v-if="isNew" type="primary" size="small" @click="isNewCreate">{{ $t('map.create') }}</el-button>
<el-button v-if="isFd" type="primary" size="small" @click="isFdCreate">{{ $t('map.create') }}</el-button>
<el-button v-if="isSd" type="primary" size="small" @click="isSdCreate">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { getUName } from '@/jmap/utils/Uname';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'LinkDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
linkLists: [],
activeName: 'first',
LinkType: '0',
LinkTypeList: [],
LinkDriectTypeList: [],
editModel: {
code: '',
type: '',
name: '',
lengthFact: 0,
leftFdCode: '',
leftSdCode: '',
rightFdCode: '',
rightSdCode: '',
lp: {
x: 0,
y: 0
},
rp: {
x: 0,
y: 0
}
},
addModel: {
code: '',
type: '01',
direct: 'R',
x: 0,
y: 0,
lengthShow: 200,
lengthFact: 0,
lfd: '',
rfd: ''
},
skins: [],
makeRules1: {
x: [
{ required: true, message: this.$t('rules.linkXCoordinate'), trigger: 'blur' }
],
y: [
{ required: true, message: this.$t('rules.linkYCoordinate'), trigger: 'blur' }
],
lengthShow: [
{ required: true, message: this.$t('rules.linkEnterLength'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
]
},
makeRules2: {
code: [
{ required: true, message: this.$t('rules.linkSelectBase'), trigger: 'change' }
],
lengthShow: [
{ required: true, message: this.$t('rules.linkEnterLength'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
]
},
makeRules3: {
lfd: [
{ required: true, message: this.$t('rules.linkEnterLeft'), trigger: 'blur' }
],
rfd: [
{ required: true, message: this.$t('rules.linkEnterRight'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'linkList'
]),
form() {
return {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.linkCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.linkName'), type: 'input' },
{ prop: 'lp', label: this.$t('map.linkLp'), type: 'coordinate', width: '119px', children: [
{ prop: 'lp.x', firstLevel: 'lp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'lp.y', firstLevel: 'lp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] },
{ prop: 'rp', label: this.$t('map.linkRp'), type: 'coordinate', width: '119px', children: [
{ prop: 'rp.x', firstLevel: 'rp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'rp.y', firstLevel: 'rp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] },
{ prop: 'leftFdCode', label: this.$t('map.linkLeftFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'leftSdCode', label: this.$t('map.linkLeftSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'rightFdCode', label: this.$t('map.linkRightFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'rightSdCode', label: this.$t('map.linkRightSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'lengthFact', label: this.$t('map.linkActualLength'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
}
}
};
},
rules() {
return {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'lp.x': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'lp.y': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'rp.x': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'rp.y': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
]
};
},
formMake1() {
return {
labelWidth: '120px',
items: [
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px' },
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') },
{ prop: 'x', label: this.$t('rules.pointX'), type: 'number', placeholder: 'px' },
{ prop: 'y', label: this.$t('rules.pointY'), type: 'number', placeholder: 'px' }
]
};
},
formMake2() {
return {
labelWidth: '120px',
items: [
{ prop: 'code', label: this.$t('rules.basisLink'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
{ prop: 'direct', label: this.$t('rules.direct'), type: 'radio', border: true, radioList: this.LinkDriectTypeList },
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px', isHidden: this.isSd },
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
};
},
formMake3() {
return {
labelWidth: '120px',
items: [
{ prop: 'lfd', label: '左侧正向Link:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
{ prop: 'rfd', label: '右侧正向Link:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px', isHidden: this.isSd },
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
};
},
// 是否初始link
isNew() {
return this.LinkType === '0';
},
// 是否正向link
isFd() {
return this.LinkType === '1';
},
// 是否侧向link
isSd() {
return this.LinkType === '2';
}
},
watch: {
LinkType(val) {
this.addModel.type = val == '2'? '02': '01';
},
selected(val, oldVal) {
this.deviceSelect(val);
},
linkList(value) {
this.linkLists = JSON.parse(JSON.stringify(this.linkList));
this.linkLists.unshift({code: '', name: '无'});
}
},
mounted() {
this.LinkTypeList = this.$ConstSelect.LinkTypeList;
this.LinkDriectTypeList = this.$ConstSelect.LinkDriectTypeList;
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.$nextTick(() => {
if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected); // 深拷贝
this.addModel.code = selected.code;
}
});
},
isNewCreate() {
this.$refs['make1'].validate((valid) => {
if (valid) {
var uid = getUID('Link');
var uname = getUName(this.linkList);
const edits = [];
if (this.isNew) {
// 初始link
const x = this.addModel.x;
const y = this.addModel.y;
var model = {
_type: 'Link',
code: uid,
name: uname,
type: this.addModel.type,
lp: {
x: x,
y: y
},
rp: {
x: x + this.addModel.lengthShow,
y: y
},
lengthFact: this.addModel.lengthFact,
color: this.addModel.color ? this.addModel.color : '#4e8de6'
};
edits.push(model);
}
this.$emit('addOrUpdateMapModel', edits);
}
});
},
isFdCreate() {
this.$refs['make2'].validate((valid) => {
if (valid) {
var uid = getUID('Link');
var uname = getUName(this.linkList);
const edits = [];
var baseLink = null;
if (this.addModel) {
baseLink = this.$store.getters['map/getDeviceByCode'](this.addModel.code);
}
var leftFdCode = '';
var rightFdCode = '';
if (this.isFd) {
let lp = {};
let rp = {};
if (baseLink && baseLink._type.toUpperCase() === 'Link'.toUpperCase()) {
if (this.addModel.direct === 'L') {
lp = {
x: baseLink.lp.x - this.addModel.lengthShow,
y: baseLink.lp.y
};
rp = {
x: baseLink.lp.x,
y: baseLink.lp.y
};
rightFdCode = baseLink.code;
baseLink.leftFdCode = uid;
edits.push(baseLink);
} else {
lp = {
x: baseLink.rp.x,
y: baseLink.rp.y
};
rp = {
x: baseLink.rp.x + this.addModel.lengthShow,
y: baseLink.rp.y
};
leftFdCode = baseLink.code;
baseLink.rightFdCode = uid;
edits.push(baseLink);
}
const model = {
_type: 'Link',
code: uid,
name: uname,
type: this.addModel.type,
lp: lp,
rp: rp,
lengthFact: this.addModel.lengthFact,
leftFdCode: leftFdCode,
rightFdCode: rightFdCode
};
edits.push(model);
}
}
this.$emit('addOrUpdateMapModel', edits);
}
});
},
isSdCreate() {
this.$refs['make3'].validate((valid) => {
if (valid) {
var uid = getUID('Link');
var uname = getUName(this.linkList);
const edits = [];
if (this.isSd) {
var lnode = this.findLinkData(this.addModel.lfd);
var rnode = this.findLinkData(this.addModel.rfd);
if (lnode && rnode) {
const model = {
_type: 'Link',
code: uid,
name: uname,
type: this.addModel.type,
lp: {
x: lnode.rp.x,
y: lnode.rp.y
},
rp: {
x: rnode.lp.x,
y: rnode.lp.y
},
lengthFact: this.addModel.lengthFact,
color: this.addModel.color ? this.addModel.color : '#4e8de6',
leftFdCode: lnode.code,
rightFdCode: rnode.code
};
if (rnode.lp.y === lnode.rp.y) {
lnode.rightFdCode = uid;
rnode.leftFdCode = uid;
edits.push(lnode);
edits.push(rnode);
} else {
lnode.rightSdCode = uid;
rnode.leftSdCode = uid;
edits.push(lnode);
edits.push(rnode);
}
edits.push(model);
}
}
this.$emit('addOrUpdateMapModel', edits);
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Link'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
updateRelatedModel(node, code) {
const data = Object.assign({ _type: 'Link' }, node);
if (node.leftFdCode == code) {
data.leftFdCode = '';
return data;
}
if (node.leftSdCode == code) {
data.leftSdCode = '';
return data;
}
if (node.rightFdCode == code) {
data.rightFdCode = '';
return data;
}
if (node.rightSdCode == code) {
data.rightSdCode = '';
return data;
}
return { _type: 'Link', code: node.code };
},
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
var node = null;
var _that = this;
var updates = [];
// 清除link 关联关系
if (selected.leftFdCode) {
node = this.findLinkData(selected.leftFdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
if (selected.leftSdCode) {
node = this.findLinkData(selected.leftSdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
if (selected.rightFdCode) {
node = this.findLinkData(selected.rightFdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
if (selected.rightSdCode) {
node = this.findLinkData(selected.rightSdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('addOrUpdateMapModel', updates);
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
},
findLinkData(code) {
const linkList = this.linkList;
if (linkList && linkList.length) {
for (var i = 0; i < linkList.length; i++) {
if (code === linkList[i].code) {
return linkList[i];
}
}
}
return null;
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: calc(100% - 100px);
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
margin-right: 7px;
}
}
</style>

1224
src/views/map/mapdraft/mapedit/mapoperate/section.vue
View File

File diff suppressed because it is too large Load Diff

423
src/views/map/mapdraft/mapedit/mapoperate/signal.vue
View File

@ -1,423 +0,0 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="130px" :model="addModel" size="mini" :rules="mergeRules">
<el-form-item :label="$t('map.physicalSegmentName')" prop="sectionCode">
<el-select v-model="addModel.sectionCode" filterable>
<el-option
v-for="item in PhysicalSectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type="field === 'selectSingalCode' ? 'danger' : 'primary'"
size="small"
@click="hover('selectSingalCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.leftOrRight')" prop="leftOrRight">
<el-select v-model="addModel.leftOrRight" filterable>
<el-option
v-for="item in SignalLeftOrRightList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.directionType')" prop="directionType">
<el-select v-model="addModel.directionType" filterable>
<el-option
v-for="item in SignalDirectionTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.signalDirectionTypeX')" prop="directionShowType">
<el-select v-model="addModel.directionShowType" filterable>
<el-option
v-for="item in SignalDirectionList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.positionType')" prop="positionType">
<el-select v-model="addModel.positionType" filterable>
<el-option
v-for="item in SignalPositionTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import JTriangle from '@/jmap/utils/JTriangle';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'SignalDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
SignalDirectionList: [
{ code: '01', name: '向左' },
{ code: '02', name: '向右' }
],
SignalLeftOrRightList: [],
SignalPotLampTypeList: [],
SignalLampPostTypeList: [],
SignalLampPositionTypeList: [],
SignalDirectionTypeList: [],
SignalPositionTypeList: [],
SignalUseTypeList: [],
failTypes: [
{ code: '00', name: this.$t('map.normal') },
{ code: '01', name: this.$t('map.signalFilamentAlarm') }
],
editModel: {
code: '',
name: '',
uniqueName: '',
nameShow: false,
lampPostType: '',
lampPositionType: '',
potLampType: '01',
directionShowType: '',
directionType: '',
positionType: '',
namePosition: { x: 0, y: 0 },
useType: '',
stationCode: '',
linkCode: '',
offset: 0,
rotate: 0,
guideShow: false,
buttonShow: false,
position: { x: 0, y: 0 },
buttonPosition: { x: 0, y: 0 },
guidePosition: { x: 0, y: 0 }
},
field: '',
addModel: {
sectionCode: '',
directionType: '01',
directionShowType: '01',
leftOrRight: '0',
positionType: '01'
},
mergeRules: {
sectionCode: [
{ required: true, message: this.$t('rules.selectPhysicalExtentName'), trigger: 'change' }
],
directionType: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.directionType'), trigger: 'change' }
],
directionShowType: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.directionType'), trigger: 'change' }
],
leftOrRight: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.leftOrRight'), trigger: 'change' }
],
positionType: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.positionType'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'linkList',
'signalList',
'sectionList',
'stationList',
'skinCode'
]),
PhysicalSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
}
return list;
},
form() {
return {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.signalCodeColon'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.signalList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.signalNameColon'), type: 'input' },
{ prop: 'position', label: this.$t('map.signalPosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'lampPostType', label: this.$t('map.lampPostType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalLampPostTypeList },
{ prop: 'lampPositionType', label: this.$t('map.lampPositionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalLampPositionTypeList },
{ prop: 'directionShowType', label: this.$t('map.signalDirectionTypeX'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalDirectionList },
{ prop: 'positionType', label: this.$t('map.signalPositionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalPositionTypeList },
{ prop: 'rotate', label: this.$t('map.rotateAngle'), type: 'number', min: -90, max: 90, placeholder: this.$t('tip.angle') },
{ prop: 'namePosition', label: this.$t('map.signalNamePosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'namePosition.x', firstLevel: 'namePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'buttonShow', label: this.$t('map.signalButtonShow'), type: 'checkbox' },
{ prop: 'buttonPosition', label: this.$t('map.signalButtonPosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'buttonPosition.x', firstLevel: 'buttonPosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'buttonPosition.y', firstLevel: 'buttonPosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'guideShow', label: this.$t('map.signalGuideShow'), type: 'checkbox' },
{ prop: 'guidePosition', label: this.$t('map.signalGuidePosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'guidePosition.x', firstLevel: 'guidePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'guidePosition.y', firstLevel: 'guidePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
{ prop: 'directionType', label: this.$t('map.signalDirectionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalDirectionTypeList },
{ prop: 'uniqueName', label: this.$t('map.signalUniqueName'), type: 'input' },
{ prop: 'useType', label: this.$t('map.signalUseType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalUseTypeList },
{ prop: 'potLampType', label: this.$t('map.potLampType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalPotLampTypeList },
{ prop: 'linkCode', label: this.$t('map.signalLinkCode')+':', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList },
{ prop: 'offset', label: this.$t('map.signalOffset'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
}
}
};
},
rules() {
return {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterSemaphoreName'), trigger: 'blur' }
],
uniqueName: [
{ required: true, message: this.$t('rules.pleaseEnterSignalName'), trigger: 'blur' }
],
offset: [
{ required: true, message: this.$t('rules.pleaseEnterSignalOffset'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterSignalPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterSignalPositionY'), trigger: 'blur' }
],
'buttonPosition.x': [
{ required: true, message: this.$t('rules.signalButtonPositionX'), trigger: 'blur' }
],
'buttonPosition.y': [
{ required: true, message: this.$t('rules.signalButtonPositionY'), trigger: 'blur' }
],
'guidePosition.x': [
{ required: true, message: this.$t('rules.signalGuidePositionX'), trigger: 'blur' }
],
'guidePosition.y': [
{ required: true, message: this.$t('rules.signalGuidePositionY'), trigger: 'blur' }
]
};
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
this.SignalLeftOrRightList = this.$ConstSelect.SignalLeftOrRightList;
this.$Dictionary.signalPotLampType().then(list => {
this.SignalPotLampTypeList = list;
});
this.$Dictionary.signalLampPostType().then(list => {
this.SignalLampPostTypeList = list;
});
this.$Dictionary.signalLampPositionType().then(list => {
this.SignalLampPositionTypeList = list;
});
this.$Dictionary.signalDirectionType().then(list => {
this.SignalDirectionTypeList = list;
});
this.$Dictionary.signalPositionType().then(list => {
this.SignalPositionTypeList = list;
});
this.$Dictionary.signalUseType().then(list => {
this.SignalUseTypeList = list;
});
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
this.editModel.potLampType = selected.potLampType || '01';
this.editModel.rotate = selected.rotate || 0; // 角度
}
if (this.field.toUpperCase() === 'selectSingalCode'.toUpperCase()) {
this.addModel.sectionCode = selected.code;
this.activeName = 'second';
this.field = '';
this.$emit('signalSectionCode', '');
}
},
hover(field) {
this.field = field === this.field ? '' : field;
this.$emit('signalSectionCode', this.field);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (this.addModel.sectionCode) {
const uid = getUID('Singal');
var model = {
_type: 'Signal',
code: uid,
uniqueName: uid,
positionType: this.addModel.positionType,
directionType: this.addModel.directionType,
directionShowType: this.addModel.directionShowType,
nameShow: true,
namePosition: { x: 0, y: 0 },
buttonShow: true,
useType: '01',
potLampType: '01',
lampPostType: '01',
lampPositionType: '01',
guideShow: false
};
this.sectionList.forEach(elem => {
if (elem.code === this.addModel.sectionCode) {
model.name = 'Signal_' + elem.name.replace('Section_', '');
model.linkCode = elem.linkCode;
if (this.addModel.leftOrRight === '0') {
const beg = elem.points[0];
const end = elem.points[0 + 1];
const traingle = new JTriangle(beg, end);
model.rotate = Math.floor(traingle.getAngle());
model.position = { x: elem.points[0].x, y: elem.points[0].y };
model.guidePosition = { x: elem.points[0].x, y: elem.points[0].y };
model.buttonPosition = { x: elem.points[0].x, y: elem.points[0].y };
model.offset = elem.offsetLeft;
} else {
const r = elem.points.length - 1;
const beg = elem.points[r - 1];
const end = elem.points[r];
const traingle = new JTriangle(beg, end);
model.rotate = Math.floor(traingle.getAngle());
model.position = { x: elem.points[r].x, y: elem.points[r].y };
model.guidePosition = { x: elem.points[r].x, y: elem.points[r].y };
model.buttonPosition = { x: elem.points[r].x, y: elem.points[r].y };
model.offset = elem.offsetRight;
}
}
});
this.$emit('addOrUpdateMapModel', model);
} else {
this.$messageBox(this.$t('tip.selectedSectionEmpty'));
}
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Signal'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type === 'Signal') {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
</style>

279
src/views/map/mapdraft/mapedit/mapoperate/station.vue
View File

@ -1,279 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="140px" :model="addModel" size="mini" :rules="mergeRules">
<el-form-item :label="$t('map.physicalSegmentName')" prop="sectionCode">
<el-select v-model="addModel.sectionCode" filterable>
<el-option
v-for="item in PhysicalSectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type="field === 'selectStationCode' ? 'danger' : 'primary'"
size="small"
@click="hover('selectStationCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
field: '',
editModel: {
centralized: false,
concentrateStationCode: '',
code: '',
zcCode: '',
visible: true,
runPlanName: '',
name: '',
nameFont: '',
nameFontColor: '#FFFFFF',
kmPostShow: '',
kmRange: 0,
kmPost: '',
kmPostFont: '',
kmPostFontColor: '#FFFFFF',
isShowControlMode: '',
position: {
x: 0,
y: 0
}
},
addModel: {
sectionCode: ''
},
skins: [],
mergeRules: {
sectionCode: [
{ required: true, message: this.$t('rules.selectPhysicalExtentName'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'sectionList',
'zcList',
'skinCode'
]),
form() {
return {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.stationCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.stationName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stationPosition'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'visible', label: this.$t('map.stationstandShowName'), type: 'checkbox' },
{ prop: 'nameFont', label: this.$t('map.stationNameFont'), type: 'font', placeholder: this.$t('tip.stationFont') },
{ prop: 'nameFontColor', label: this.$t('map.stationNameFontColor'), type: 'color' },
{ prop: 'kmRange', label: this.$t('map.stationKmRange'), type: 'number', min: 0, placeholder: this.$t('tip.meter') },
{ prop: 'kmPost', label: this.$t('map.stationKmPost'), type: 'input' },
{ prop: 'kmPostFont', label: this.$t('map.stationKmPostFont'), type: 'font', placeholder: this.$t('tip.kilometerFont') },
{ prop: 'kmPostFontColor', label: this.$t('map.stationKmPostFontColor'), type: 'color' }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'concentrateStationCode', label: this.$t('map.concentrateStationCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.stationList },
{ prop: 'centralized', label: this.$t('map.centralized'), type: 'checkbox' },
{ prop: 'zcCode', label: this.$t('map.zcCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.zcList, isHidden: !this.isZcCode },
{ prop: 'runPlanName', label: this.$t('map.stationRunPlanName'), type: 'input' }
]
}
}
};
},
rules() {
return {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.stationName'), trigger: 'blur' }
],
kmRange: [
{ required: true, message: this.$t('rules.stationKmRange'), trigger: 'blur' }
],
kmPost: [
{ required: true, message: this.$t('rules.stationKmPost'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
},
PhysicalSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
}
return list;
},
isZcCode() {
return this.editModel.centralized;
}
},
watch: {
selected: function (val) {
this.deviceSelect(val);
}
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
this.editModel.runPlanName = selected.runPlanName || '';
}
if (this.field.toUpperCase() === 'selectStationCode'.toUpperCase()) {
this.addModel.sectionCode = selected.code;
this.activeName = 'second';
this.field = '';
this.$emit('stationSectionCode', '');
}
},
hover(field) {
this.field = field === this.field ? '' : field;
this.$emit('stationSectionCode', this.field);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (this.addModel.sectionCode) {
const uid = getUID('Station');
const model = {
_type: 'Station',
code: uid,
zcCode: '',
runPlanName: '',
visible: true,
nameFont: '14px consolas',
nameFontColor: '#FFFFFF',
kmPost: '1000km~2000km',
kmPostShow: true,
kmPostFont: '8px consolas',
kmPostFontColor: '#FFFFFF',
centralized: false,
concentrateStationCode: ''
};
this.sectionList.forEach(elem => {
if (elem.code === this.addModel.sectionCode) {
const l = 0;
const r = elem.points.length - 1;
model.name = 'Station_' + elem.name.replace('Station_', '');
model.position = {
x: elem.points[l].x + (elem.points[r].x - elem.points[l].x) / 2,
y: elem.points[l].y
};
}
});
this.$emit('addOrUpdateMapModel', model);
}
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Station'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
</style>

249
src/views/map/mapdraft/mapedit/mapoperate/stationcontrol.vue
View File

@ -1,249 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" :model="addModel" label-width="120px" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.stationstandName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationControlDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
editModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
},
stationCode: '',
zokContent: '',
zakContent: '',
jjzkContent: '',
zbjkContent: '',
zzkContent: '',
lskContent: ''
},
addModel: {
stationCode: ''
},
makeRules: {
stationCode: [
{ required: true, message: this.$t('rules.stationControlStationName'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'stationControlList',
'skinCode'
]),
form() {
const form = {
labelWidth: '160px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.stationControlCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.stationControlList, change: true, deviceChange: this.deviceChange },
{ prop: 'zokContent', label: this.$t('map.zokContent'), type: 'input' },
{ prop: 'zakContent', label: this.$t('map.zakContent'), type: 'input' },
{ prop: 'jjzkContent', label: this.$t('map.jjzkContent'), type: 'input' },
{ prop: 'zzkContent', label: this.$t('map.zzkContent'), type: 'input' },
{ prop: 'lskContent', label: `${this.$t('map.interconnected')}:`, type: 'input' },
{ prop: 'position', label: this.$t('map.stationControlPosition'), type: 'coordinate', width: '150px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
},
rules() {
const rules = {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
],
zokContent: [
{ required: true, message: this.$t('rules.stationControlZokContent'), trigger: 'blur' }
],
zakContent: [
{ required: true, message: this.$t('rules.stationControlZakContent'), trigger: 'blur' }
],
jjzkContent: [
{ required: true, message: this.$t('rules.stationControlJjzkContent'), trigger: 'blur' }
],
zzkContent: [
{ required: true, message: this.$t('rules.stationControlZzkContent'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.stationControlPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.stationControlPositionY'), trigger: 'blur' }
]
};
// 清空表单验证提示信息
this.$nextTick(() => {
this.$refs.dataform &&
this.$refs.dataform.clearValidate();
});
return rules;
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (this.addModel.stationCode) {
const uid = getUID('StationControl');
const model = {
_type: 'StationControl',
code: uid,
zokContent: '中控',
zbjkContent: '总报警',
zakContent: '站控',
jjzkContent: '紧急站控',
zzkContent: '站中控按钮',
lskContent: '连锁控'
};
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.name = 'StationControl_' + elem.name.replace('Station_', '');
model.position = { x: elem.position.x, y: elem.position.y };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
} else {
this.$messageBox(this.$t('tip.selectedStationEmpty'));
}
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'StationControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', _that.selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
</style>

303
src/views/map/mapdraft/mapedit/mapoperate/stationstand.vue
View File

@ -1,303 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="140px" :model="addModel" :rules="createRules" size="mini">
<el-form-item :label="$t('map.stationstandName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.equipmentStation')" prop="deviceStationCode">
<el-select v-model="addModel.deviceStationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.stationstandDirection')" prop="doorLocationType">
<el-select v-model="addModel.doorLocationType" filterable :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in DoorLocationTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.stationstandHasDoor')" prop="hasDoor">
<el-checkbox v-model="addModel.hasDoor" />
</el-form-item>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
DoorLocationTypeList: [],
RunDirectionTypeList: [],
/*
{ code: '01', name: '朝下' },
{ code: '02', name: '朝上' }
*/
editModel: {
code: '',
name: '',
nameShow: '',
doorLocationType: '',
deviceStationCode: '',
hasDoor: false,
width: 0,
height: 0,
stationCode: '',
position: {
x: 0,
y: 0
},
visible: true,
direction: ''
},
addModel: {
stationCode: '',
doorLocationType: '01',
deviceStationCode: '',
hasDoor: true
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'stationStandList',
'skinCode'
]),
form() {
const form = {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.relStandCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationStandList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.stationstandNameColon'), type: 'input' },
{ prop: 'position', label: this.$t('map.stationstandPosition'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'direction', label: this.$t('map.stationstandTopBottom'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.RunDirectionTypeList },
{ prop: 'visible', label: this.$t('map.stationVisible'), type: 'checkbox' },
{ prop: 'doorLocationType', label: this.$t('map.stationstandDirection'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.DoorLocationTypeList },
{ prop: 'hasDoor', label: this.$t('map.stationstandHasDoor'), type: 'checkbox' },
{ prop: 'width', label: this.$t('map.stationstandWidth'), type: 'number', min: 0, max: 2000, placeholder: 'px' },
{ prop: 'height', label: this.$t('map.stationstandHeight'), type: 'number', min: 0, max: 2000, placeholder: 'px' }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'deviceStationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.stationList },
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
},
rules() {
const rules = {
code: [
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.stationstandCountName'), trigger: 'change' }
],
doorLocationType: [
{ required: true, message: this.$t('rules.doorLocationType'), trigger: 'change' }
],
deviceStationCode: [
{ required: true, message: this.$t('rules.deviceStationCode'), trigger: 'change' }
],
direction: [
{ required: true, message: this.$t('rules.stationstandDirection'), trigger: 'change' }
],
width: [
{ required: true, message: this.$t('rules.stationstandWidth'), trigger: 'change' }
],
height: [
{ required: true, message: this.$t('rules.stationstandHeight'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'change' }
],
'position.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'change' }
]
};
// 清空表单验证提示信息
this.$nextTick(() => {
this.$refs.dataform &&
this.$refs.dataform.clearValidate();
});
return rules;
},
createRules() {
return {
stationCode: [
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
],
doorLocationType: [
{ required: true, message: this.$t('rules.doorLocationType'), trigger: 'change' }
],
deviceStationCode: [
{ required: true, message: this.$t('rules.deviceStationCode'), trigger: 'change' }
]
};
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
this.$Dictionary.doorLocationType().then(list => {
this.DoorLocationTypeList = list;
});
this.$Dictionary.runDirectionType().then(list => {
this.RunDirectionTypeList = list;
});
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('StationStand');
const model = {
_type: 'StationStand',
code: uid,
width: 40,
height: 20,
doorLocationType: this.addModel.doorLocationType,
deviceStationCode: this.addModel.deviceStationCode,
visible: true,
direction: '01',
hasDoor: this.addModel.hasDoor
};
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.name = 'StationStand_' + elem.name.replace('Station_', '');
model.position = { x: elem.position.x, y: elem.position.y + 40 };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs.dataform.validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'StationStand'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
</style>

537
src/views/map/mapdraft/mapedit/mapoperate/switch.vue
View File

@ -1,537 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div class="flex_box">
<el-button type="primary" @click="create">{{ $t('map.createSwitch') }}</el-button>
<el-button type="" @click="questionList = []">{{ $t('map.clearHint') }}</el-button>
</div>
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight + 4 +'px' }">
<el-card v-if="questionList.length" class="box-card">
<div v-for="(item, index) in questionList" :key="index" class="text item">
{{ item }}
</div>
</el-card>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'SwitchDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
questionList: [],
editModel: {
code: '',
name: '',
turnTime: 0,
nameShow: false,
namePosition: { x: 0, y: 0 },
stationCode: '',
timeoutShow: false,
sectionACode: '',
sectionBCode: '',
sectionCCode: '',
tp: { x: 0, y: 0 }
}
};
},
computed: {
form() {
const form = {
labelWidth: '170px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.switchCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.switchList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.switchName'), type: 'input' },
{ prop: 'namePosition', label: this.$t('map.switchPosition'), type: 'coordinate', width: '160px', children: [
{ prop: 'namePosition.x', firstLevel: 'namePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'tp', label: this.$t('map.switchTp'), type: 'coordinate', width: '160px', children: [
{ prop: 'tp.x', firstLevel: 'tp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'tp.y', firstLevel: 'tp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
{ prop: 'turnTime', label: this.$t('map.turnTime'), type: 'number', min: 0, max: 1000, placeholder: 's' }
]
}
}
};
return form;
},
rules() {
const rules = {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.switchName'), trigger: 'blur' }
],
'namePosition.x': [
{ required: true, message: this.$t('rules.switchNamePointX'), trigger: 'blur' }
],
'namePosition.y': [
{ required: true, message: this.$t('rules.switchNamePointY'), trigger: 'blur' }
],
turnTime: [
{ required: true, message: this.$t('rules.switchTurnTime'), trigger: 'blur' }
],
'tp.x': [
{ required: true, message: this.$t('rules.switchTpX'), trigger: 'blur' }
],
'tp.y': [
{ required: true, message: this.$t('rules.switchTpY'), trigger: 'blur' }
]
};
// 清空表单验证提示信息
this.$nextTick(() => {
this.$refs.dataform &&
this.$refs.dataform.clearValidate();
});
return rules;
},
...mapGetters('map', [
'linkList',
'sectionList',
'switchList',
'stationList',
'skinCode'
])
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
filterSections(query, item) {
return item.pinyin.indexOf(query) > -1;
},
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() { // 一键生成道岔
this.questionList = []; // 有问题区段列表
const models = [];
const linkObj = {};
this.linkList.forEach(link => {
if (link && link.leftFdCode && link.leftSdCode) { // 左侧同时都有关联link
linkObj[`${link.code}`] = { name: '', num: 0 };
} else if (link && link.rightFdCode && link.rightSdCode) { // 右侧同时都有关联link
linkObj[`${link.code}`] = { name: '', num: 0 };
} else if (link && link.leftFdCode && !link.leftSdCode && link.rightFdCode && !link.rightSdCode) { // 左右正向link关联，侧向link不关联检测
linkObj[`${link.code}`] = { name: '', num: 0 };
}
});
this.sectionList.forEach(section => {
for (const link in linkObj) {
if (section.linkCode == link) {
linkObj[link].num++;
linkObj[link].name = section.name;
}
}
const uname = 'switch_' + section.name.replace('section_', '');
const link = this.findLinkData(section.linkCode);
if (link && link.leftFdCode && link.leftSdCode) {
const node = this.findLinkData(link.leftSdCode); // 寻找 侧段link
if (node) {
const lFdSection = this.findSectionDataByLinkCodeAndPoint(link.leftFdCode, section.points[0]);
const lSdSection = this.findSectionDataByLinkCodeAndPoint(link.leftSdCode, section.points[0]);
if (lFdSection && lSdSection) {
const model = {
_type: 'Switch',
code: getUID('Switch'),
name: uname,
nameShow: true,
timeoutShow: true,
sectionACode: section.code,
sectionBCode: lFdSection.code,
sectionCCode: lSdSection.code,
namePosition: { x: 0, y: 0 },
turnTime: 3,
tp: { x: 0, y: 0 },
lp: {
x: lFdSection.points[lFdSection.points.length - 1].x,
y: lFdSection.points[lFdSection.points.length - 1].y
},
rp: {
x: lSdSection.points[lSdSection.points.length - 2].x,
y: lSdSection.points[lSdSection.points.length - 2].y
},
intersection: {
x: section.points[0].x,
y: section.points[0].y
},
skew: {
x: lSdSection.points[lSdSection.points.length - 2].x,
y: lSdSection.points[lSdSection.points.length - 2].y
}
};
const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
!swch && models.push(model); // 已有的道岔不在创建
}
}
}
if (link && link.rightFdCode && link.rightSdCode) {
const node = this.findLinkData(link.rightSdCode);
if (node) {
const rFdSection = this.findSectionDataByLinkCodeAndPoint(link.rightFdCode, section.points[section.points.length - 1]);
const rSdSection = this.findSectionDataByLinkCodeAndPoint(link.rightSdCode, section.points[section.points.length - 1]);
if (rFdSection && rSdSection) {
const model = {
_type: 'Switch',
code: getUID('Switch'),
name: uname,
nameShow: true,
timeoutShow: true,
sectionACode: section.code,
sectionBCode: rFdSection.code,
sectionCCode: rSdSection.code,
namePosition: { x: 0, y: 0 },
turnTime: 3,
tp: { x: 0, y: 0 },
lp: {
x: rFdSection.points[0].x,
y: rFdSection.points[0].y
},
rp: {
x: rSdSection.points[1].x,
y: rSdSection.points[1].y
},
intersection: {
x: section.points[section.points.length - 1].x,
y: section.points[section.points.length - 1].y
},
skew: {
x: rSdSection.points[1].x,
y: rSdSection.points[1].y
}
};
const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
!swch && models.push(model);
}
}
}
});
const createArr = [];
models.forEach((item) => {
const sectionA = this.$store.getters['map/getDeviceByCode'](item.sectionACode);
const sectionB = this.$store.getters['map/getDeviceByCode'](item.sectionBCode);
const sectionC = this.$store.getters['map/getDeviceByCode'](item.sectionCCode);
if (linkObj[sectionA.linkCode].num != 1 && linkObj[sectionB.linkCode].num != 1 && linkObj[sectionC.linkCode].num != 1 ) {
createArr.push(item);
}
});
// console.log(models, createArr, '创建道岔list');
this.$confirm(this.$t('tip.confirmBatchGeneration'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
for (const link in linkObj) {
if (linkObj[link].num == 1) {
this.questionList.push(`${this.$t('map.section')}${linkObj[link].name}${this.$t('tip.linkNoneSplit')}, ${this.$t('tip.createSwitchPortion')}`);
}
}
this.$emit('addOrUpdateMapModel', createArr);
this.createSwitchSection(createArr);
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('tip.cancelGeneration')
});
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Switch'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.handleDelete(selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelGeneration'));
});
}
},
// 删除道岔/ 关联的道岔区段以及 道岔绑定关系
handleDelete(selected) {
const models = [];
const remove = [];
this.sectionList.forEach(elem => {
if (elem.type == '03' && elem.relSwitchCode == selected.code) {
remove.push({
_type: 'Section',
code: elem.code
});
}
if (elem.relSwitchCode == selected.code && elem.type != '03') {
elem.relSwitchCode = '';
elem.isSwitchSection = false;
models.push(elem);
}
});
this.$emit('delMapModel', selected);
this.$emit('delMapModel', remove);
this.$emit('addOrUpdateMapModel', models);
},
findLinkData(code) {
var rtn = null;
var linkList = this.linkList;
if (linkList && linkList.length) {
for (var i = 0; i < linkList.length; ++i) {
if (code === linkList[i].code) {
rtn = linkList[i];
break;
}
}
}
return rtn;
},
findSectionDataByLinkCodeAndPoint(code, point) {
var rtn = null;
var sectionList = this.sectionList;
if (sectionList && sectionList.length) {
for (var i = 0; i < sectionList.length; ++i) {
if (code === sectionList[i].linkCode && point) {
if (JSON.stringify(sectionList[i].points[0]) === JSON.stringify(point) ||
JSON.stringify(sectionList[i].points[sectionList[i].points.length - 1]) === JSON.stringify(point)) {
rtn = sectionList[i];
break;
}
}
}
}
return rtn;
},
findSwitchData(sectionACode, sectionBCode, sectionCCode) {
var rtn = null;
var switchList = this.switchList;
if (switchList && switchList.length) {
for (var i = 0; i < switchList.length; ++i) {
if (sectionACode === switchList[i].sectionACode &&
sectionBCode === switchList[i].sectionBCode &&
sectionCCode === switchList[i].sectionCCode) {
rtn = switchList[i];
break;
}
}
}
return rtn;
},
// 一键删除道岔区段
removeSwitchSection() {
const remove = [];
const models = [];
if (this.sectionList && this.sectionList.length) {
this.sectionList.forEach(elem => {
// 删除 道岔区段/ 恢复道岔绑定关系
if (elem.type === '03' && !elem.parentCode) {
remove.push({
_type: 'Section',
code: elem.code
});
}
if (elem.relSwitchCode) {
elem.relSwitchCode = '';
elem.isSwitchSection = false;
models.push(elem);
}
});
this.$emit('delMapModel', remove);
this.$emit('addOrUpdateMapModel', models);
}
},
// 一键生成道岔区段
createSwitchSection(list) {
const models = [];
// this.removeSwitchSection();
if (list && list.length && this.sectionList && this.sectionList.length) {
list.forEach(elem => {
const sectiona = this.$store.getters['map/getDeviceByCode'](elem.sectionACode);
const sectionb = this.$store.getters['map/getDeviceByCode'](elem.sectionBCode);
const sectionc = this.$store.getters['map/getDeviceByCode'](elem.sectionCCode);
if (sectiona && sectionb && sectionc) {
const uid = getUID('Section');
let point = {
x: sectiona.points[sectiona.points.length - 1].x,
y: sectiona.points[sectiona.points.length - 1].y
};
if (JSON.stringify(sectiona.points[0]) === JSON.stringify(sectionb.points[sectionb.points.length - 1])) {
point = { x: sectiona.points[0].x, y: sectiona.points[0].y };
}
models.push({
_type: 'Section',
code: uid,
name: sectiona.name || sectionb.name || sectionc.name,
type: '03',
axleShow: false,
namePosition: point,
isStandTrack: false,
kmRangeRight: '',
kmRangeLeft: '',
region: '',
standTrackName: '',
standTrackNamePosition: { x: 0, y: 0 },
isReentryTrack: false,
reentryTrackName: '',
reentryTrackNamePosition: { x: 0, y: 0 },
isTransferTrack: false,
transferTrackName: '',
transferTrackNamePosition: { x: 0, y: 0 },
isSegmentation: false,
segmentationPosition: { x: 0, y: 0 },
isSwitchSection: true,
relSwitchCode: elem.code,
points: [{ x: 0, y: 0 }, { x: 0, y: 0 }],
logicSectionNum: [0],
logicSectionShow: false,
sepTypeLeft: '00',
offsetLeft: 0,
sepTypeRight: '00',
offsetRight: 0,
parentCode: '',
stationCode: sectiona.stationCode,
trainPosType: sectiona.trainPosType,
isCurve: false,
linkCode: '0'
});
sectiona.parentCode = uid;
sectiona.relSwitchCode = elem.code;
sectiona.isSwitchSection = true;
sectionb.parentCode = uid;
sectionb.relSwitchCode = elem.code;
sectionb.isSwitchSection = true;
sectionc.parentCode = uid;
sectionc.relSwitchCode = elem.code;
sectionc.isSwitchSection = true;
models.push(sectiona);
models.push(sectionb);
models.push(sectionc);
}
});
}
this.$emit('addOrUpdateMapModel', models);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.el-transfer {
text-align: left;
}
.flex_box{
display: flex;
justify-content: center;
}
.box-card {
width: calc(100% - 80px);
margin: 20px auto 0;
padding: 0 20px;
.text {
font-size: 14px;
}
.item {
padding: 6px 0;
}
}
/deep/ {
.card .el-transfer-panel__filter{
margin: 5px 15px;
}
.card .el-transfer-panel__list.is-filterable{
height: 290px;
}
.card .el-transfer-panel__body{
height: 328px;
}
.card .el-transfer__buttons{
padding: 0 16px;
}
.card .el-transfer{
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

267
src/views/map/mapdraft/mapedit/mapoperate/text.vue
View File

@ -1,267 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="110px" :model="addModel" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.textContent')" prop="content">
<el-input v-model="addModel.content" :placeholder="$t('map.pleaseEnter')" class="input-with-select">
<el-select slot="prepend" v-model="addModel.prepend" :placeholder="$t('map.pleaseSelect')">
<el-option :label="$t('map.horizontal')" value="H" />
<el-option :label="$t('map.vertical')" value="V" />
</el-select>
</el-input>
</el-form-item>
<div class="coordinate">
<span class="title" style="width: 110px">{{ $t('map.textPoints') }}</span>
<el-form-item
label="x:"
prop="position.x"
style="display: table; float: left; margin-right: 20px;"
label-width="25px"
>
<el-input-number v-model="addModel.position.x" label="x:" />
</el-form-item>
<el-form-item
label="y:"
prop="position.y"
style="display: table; float: left;"
label-width="25px"
>
<el-input-number v-model="addModel.position.y" label="y:" />
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
skins: [],
editModel: {
code: '',
prepend: 'H',
content: '',
font: '',
fontColor: '',
position: {
x: 0,
y: 0
}
},
addModel: {
prepend: 'H',
content: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
],
content: [
{ required: true, message: this.$t('rules.pleaseEnterContent'), trigger: 'blur' }
],
font: [
{ required: true, message: this.$t('rules.textFont'), trigger: 'blur' }
],
fontColor: [
{ required: true, message: this.$t('rules.textFontColor'), trigger: 'blur' }
]
},
makeRules: {
code: [
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
],
content: [
{ required: true, message: this.$t('rules.pleaseEnterContent'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'textList',
'stationList',
'skinCode'
]),
form() {
const form = {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.textCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.textList, change: true, deviceChange: this.deviceChange },
{ prop: 'content', label: this.$t('map.textContent'), type: 'fontContent', content: 'content', prepend: 'prepend', placeholder: this.$t('map.pleaseEnter') },
{ prop: 'font', label: this.$t('map.textFont'), type: 'font', placeholder: this.$t('map.font') },
{ prop: 'fontColor', label: this.$t('map.textFontColor'), type: 'color' },
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
[this.editModel.prepend, this.editModel.content] = selected.content.split('::');
}
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
const model = {
_type: 'Text',
code: getUID('Text'),
font: '14px consolas',
fontColor: '#FFFFFF',
content: `${this.addModel.prepend}::${this.addModel.content}`,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Text'}, this.editModel);
data.content = `${this.editModel.prepend}::${this.editModel.content}`;
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
margin-right: 7px;
}
}
/deep/ {
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
}
</style>

153
src/views/map/mapdraft/mapedit/mapoperate/train/create.vue
View File

@ -1,153 +0,0 @@
<template>
<el-dialog
v-dialogDrag
:title="$t('map.createBatch')"
:visible.sync="visible"
width="400px"
:before-close="doClose"
>
<el-radio-group v-model="mode" class="radio-mode">
<el-radio label="01">{{ $t('map.create') }}</el-radio>
<el-radio label="02">{{ $t('map.createBatch') }}</el-radio>
</el-radio-group>
<el-form ref="form" :model="addModel" label-width="90px" size="mini" :rules="rules">
<el-form-item v-if="mode == '01'" :label="$t('map.groupNumber')" prop="groupNumber">
<el-input v-model="addModel.groupNumber" />
</el-form-item>
<el-form-item v-if="mode == '02'" :label="$t('map.groupNumberInterval')" prop="range">
<el-input-number v-model="addModel.range.beg" :min="1" :max="999" />
<el-input-number v-model="addModel.range.end" :min="1" :max="999" />
</el-form-item>
<el-form-item :label="$t('map.modelCode')" prop="modelCode">
<el-select v-model="addModel.modelCode" filterable>
<el-option
v-for="item in trainModelList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button-group>
<el-button type="primary" size="small" @click="newTrainMode">{{ $t('map.add') }}</el-button>
<el-button type="primary" size="small" @click="uptTrainMode(addModel.modelCode)">{{ $t('map.updata') }}
</el-button>
<el-button type="primary" size="small" @click="delTrainMode(addModel.modelCode)">{{ $t('map.deleteObj') }}
</el-button>
</el-button-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" @click="handleConfirm">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { getUID } from '@/jmap/utils/Uid';
export default {
props: {
trainModelList: {
type: Array,
required: true
}
},
data() {
return {
mode: '01',
visible: false,
addModel: {
range: {
beg: 1,
end: 1
},
groupNumber: '',
modelCode: ''
},
errorTip: this.$t('tip.selectValidInterval')
};
},
computed: {
rules() {
return {
range: [
{
validator(rule, range, callback) {
if (Number.isInteger(range.beg) &&
Number.isInteger(range.end) &&
range.beg > 0 &&
range.end >= range.beg) {
callback();
} else {
callback(new Error(this.errorTip));
}
},
trigger: 'blur'
}
],
modelCode: [
{ required: true, message: this.$t('rules.selectTrainType'), trigger: 'change' }
]
};
}
},
methods: {
doShow() {
this.visible = true;
},
doClose() {
this.visible = false;
},
newTrainMode() {
this.$emit('dispatch', { callback: 'newTrainMode', params: null});
},
uptTrainMode(code) {
this.$emit('dispatch', { callback: 'uptTrainMode', params: code});
},
delTrainMode(code) {
this.addModel.modelCode = '';
this.$emit('dispatch', { callback: 'delTrainMode', params: code});
},
handleConfirm() {
this.$refs['form'].validate((valid) => {
if (valid) {
const list = [];
switch (this.mode) {
case '01':
list.push({
_type: 'Train',
code: getUID('Train'),
modelCode: this.addModel.modelCode,
groupNumber: this.addModel.groupNumber
});
break;
case '02':
for (var num = this.addModel.range.beg; num <= this.addModel.range.end; num++) {
list.push({
_type: 'Train',
code: getUID('Train'),
modelCode: this.addModel.modelCode,
groupNumber: ('000'+num).slice(-3)
});
}
break;
}
this.$emit('dispatch', { callback: 'create', params: list});
this.doClose();
}
});
}
}
};
</script>
<style scoped>
.radio-mode {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
</style>

210
src/views/map/mapdraft/mapedit/mapoperate/train/index.vue
View File

@ -1,210 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.operation')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-table :data="trainList.filter(data => !search || data.groupNumber.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
<el-table-column :label="$t('map.trainNumber')" prop="groupNumber" />
<el-table-column :label="$t('map.codeC')" prop="code" />
<el-table-column align="right">
<template slot="header">
<el-input v-model="search" size="mini" :placeholder="$t('map.pleaseSelect')" />
</template>
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('map.deleteObj') }}</el-button>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="danger" size="small" @click="handleClear">{{ $t('map.clear') }}</el-button>
<el-button type="primary" size="small" @click="handleCreate">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
<train-model ref="trainMode" />
<create ref="create" :train-model-list="trainModelList" @dispatch="dispatch" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import TrainModel from './trainmodel';
import Create from './create';
export default {
name: 'TrainDraft',
components: {
TrainModel,
Create
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'second',
mapData: null,
editModel: {
code: '',
groupNumber: '',
modelCode: ''
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'change' }
],
groupNumber: [
{ required: true, message: this.$t('rules.pleaseEnterGroupNumber'), trigger: 'blur' }
],
modelCode: [
{ required: true, message: this.$t('rules.selectTrainType'), trigger: 'change' }
]
},
search: ''
};
},
computed: {
...mapGetters('map', [
'trainList',
'trainModelList',
'skinCode'
])
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
},
$route() {
// this.activeName = 'first';
}
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Train'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.modelCode = selected.modelCode;
this.editModel.groupNumber = selected.groupNumber;
// this.activeName = 'first';
} else {
// this.activeName = 'second';
}
},
create(list) {
this.$emit('addOrUpdateMapModel', list);
},
// 修改对象
edit(elem) {
// this.$refs['form'].validate((valid) => {
// if (valid) {
// this.$emit('addOrUpdateMapModel', this.buildEditModel());
// }
// });
},
buildEditModel() {
// const model = {
// _type: 'Train',
// code: this.editModel.code,
// safeDistance: this.editModel.safeDistance,
// maxSafeDistance: this.editModel.maxSafeDistance,
// modelCode: this.editModel.modelCode,
// groupNumber: this.editModel.groupNumber
// };
// return model;
},
newTrainMode() {
if (Object.keys(this.$store.state.map.map || {}).length) {
this.$refs.trainMode.doShow({}, 'ADD');
} else {
this.$messageBox(this.$t('tip.selectMap'));
}
},
uptTrainMode(code) {
const index = this.trainModelList.findIndex(elem => { return elem.code == code; });
if (index >= 0) {
this.$refs.trainMode.doShow(this.trainModelList[index], 'UPT');
} else {
this.$messageBox(this.$t('tip.selectTrainType'));
}
},
delTrainMode(code) {
this.$confirm(this.$t('map.wellDelTrianModel'), this.$t('global.tips'), {
confirmButtonText: this.$t('global.confirm'),
cancelButtonText: this.$t('global.cancel'),
type: 'warning'
}).then(() => {
if (code) {
const model = { code };
this.$refs.trainMode.operateTrainModel({ model, type: 'DEL' });
}
});
},
handleEdit(index, row) {
},
handleDelete(index, row) {
const train = this.$store.getters['map/getDeviceByCode'](row.code);
if (train) {
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
this.$emit('delMapModel', train);
this.deviceSelect();
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});
}
},
handleCreate() {
this.$refs.create.doShow();
},
handleClear() {
this.$confirm(this.$t('tip.confirmBatchDelete'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
this.$emit('delMapModel', this.trainList);
this.deviceSelect();
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});
},
dispatch(opts) {
this[opts.callback](opts.params);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
// width: 100%;
// background: #f0f0f0;
// overflow: hidden;
width: 100%;
background: #ffffff;
overflow: hidden;
border-top: 1px #f3f1f1 solid;
box-shadow: 4px 7px 10px #565656;
border-radius: 0;
border-bottom: 1px transparent solid;
}
</style>

323
src/views/map/mapdraft/mapedit/mapoperate/trainwindow.vue
View File

@ -1,323 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.batchOperation')" name="three">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<!-- style="display: flex;justify-content: center;" -->
<div style="text-align:center;">
<el-button type="danger" size="big" @click="removeTrainWindow">{{ $t('map.deleteTrainWindow') }}</el-button>
<el-button type="primary" size="big" style="margin-top:10px" @click="createTrainWindow">{{ $t('map.createTrainWindow') }}</el-button>
</div>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import JTriangle from '@/jmap/utils/JTriangle';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'TrainWindowDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
point: {
x: 0,
y: 0
},
width: 0,
height: 0,
sectionCode: ''
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'blur' }
],
'point.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
],
'point.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.trainWindowWidth'), trigger: 'blur' }
],
height: [
{ required: true, message: this.$t('rules.trainWindowHeight'), trigger: 'blur' }
],
sectionCode: [
{ required: true, message: this.$t('rules.trainWindowSectionCode'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainWindowList'
]),
filterSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return !(elem.type == '03' && elem.parentCode); });
}
return list;
},
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.trainWindowCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.trainWindowList, change: true, deviceChange: this.deviceChange },
{ prop: 'width', label: this.$t('map.trainWindowWidth'), type: 'number', min: 0, placeholder: 'px' },
{ prop: 'height', label: this.$t('map.trainWindowHeight'), type: 'number', min: 0, placeholder: 'px' },
{ prop: 'point', label: this.$t('map.trainWindowPoints'), type: 'coordinate', width: '110px', children: [
{ prop: 'point.x', firstLevel: 'point', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
{ prop: 'point.y', firstLevel: 'point', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'sectionCode', label: this.$t('map.trainWindowSectionCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.filterSectionList }
]
}
}
};
return form;
},
style() {
return this.$jlmap.style;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
methods: {
filterSections(query, item) {
return item.pinyin.indexOf(query) > -1;
},
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
this.$refs.form.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
createModel(opts) {
const model = {
_type: 'TrainWindow',
code: getUID('TrainWindow'),
trainWindowShow: true,
point: {}
};
if (opts) {
var width = this.style.trainWindowWidth;
var height = this.style.trainWindowHeight;
const section = opts.section;
if (section) {
if (section.type !== '03' && opts.triangle) {
model.point = opts.triangle.middlePoint();
if (opts.triangle.getCosRate() == 1 && opts.triangle.absx < width) {
width = opts.triangle.absx;
}
if (opts.triangle.getCosRate() !== 0 && opts.triangle.getCosRate() !== 1) {
model.point.x = section.points[0].x;
model.point.y = section.points[section.points.length - 1].y;
}
} else {
model.point = {
x: section.namePosition.x,
y: section.namePosition.y
};
}
const distance = (this.style.trainDistance + this.style.trainConflictR * 2 + height);
let offsetx = 0;
let offsety = 0;
if (opts.triangle) {
if (opts.triangle.getCosRate() == 1 || opts.triangle.getCosRate() == 0) {
offsetx = distance * opts.triangle.getSinRate();
offsety = distance * opts.triangle.getCosRate();
} else {
offsetx = distance;
offsety = distance;
}
} else {
offsetx = 0;
offsety = distance;
}
if (section.trainPosType == '01') {
model.point.y = model.point.y - height - offsety;
model.point.x = model.point.x - offsetx;
} else {
model.point.x = model.point.x + offsetx;
model.point.y = model.point.y + offsety;
}
model.sectionCode = section.code;
model.height = height;
model.width = width;
}
}
return model;
},
// 一键删除车次窗
removeTrainWindow() {
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
const remove = [];
if (this.trainWindowList && this.trainWindowList.length) {
this.trainWindowList.forEach(elem => {
remove.push({
_type: 'TrainWindow',
code: elem.code
});
});
this.$emit('delMapModel', remove);
}
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});
},
// 一键创建车次窗
createTrainWindow() {
const models = [];
const collection = this.sectionList;
const remove = []; // 清空所有车次窗
if (this.trainWindowList && this.trainWindowList.length) {
this.trainWindowList.forEach(elem => {
remove.push({
_type: 'TrainWindow',
code: elem.code
});
});
this.$emit('delMapModel', remove);
}
if (collection && collection.length) {
collection.forEach(elem => {
if (elem.type !== '03' && !elem.isSwitchSection && (
elem.logicSectionNum.length == 0 || elem.logicSectionNum.length == 1 && elem.logicSectionNum[0] == 0)) {
const triangle = new JTriangle(elem.points[0], elem.points[elem.points.length - 1]);
models.push(this.createModel({
triangle: triangle,
section: elem
}));
} else if (elem.type === '03' && elem.isSwitchSection) {
models.push(this.createModel({
section: elem
}));
}
});
}
this.$emit('addOrUpdateMapModel', models);
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'TrainWindow'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
/deep/ {
.card .el-transfer-panel__filter{
margin: 5px 15px;
}
.card .el-transfer-panel__list.is-filterable{
height: 290px;
}
.card .el-transfer-panel__body{
height: 328px;
}
.card .el-transfer__buttons{
padding: 0 16px;
}
.card .el-transfer{
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

248
src/views/map/mapdraft/mapedit/mapoperate/zcControl.vue
View File

@ -1,248 +0,0 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-data ref="make" :form="formMake" :form-model="addModel" :rules="createRules" />
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'ZcControlDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
name: '',
visible: '',
position: {
x: 0,
y: 0
}
},
addModel: {
code: '',
name: '',
visible: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
visible: [
{ required: true, message: this.$t('rules.visible'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainModelList',
'zcList',
'skinCode'
]),
form() {
const form = {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.zcZoneControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.zcList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'visible', label: this.$t('map.showZc'), type: 'checkboxx' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: []
}
}
};
return form;
},
formMake() {
const form = {
labelWidth: '150px',
items: [
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
};
return form;
},
createRules: function () {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
]
};
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('ZcControl');
const model = {
_type: 'ZcControl',
code: uid,
visible: true,
name: this.addModel.name,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'ZcControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

326
src/views/map/mapdraft/mapmanage/create.vue
View File

@ -1,326 +0,0 @@
<template>
<el-dialog
v-dialogDrag
v-loading="loadingUpload"
:title="$t('map.createNewMap')"
:visible.sync="dialogShow"
width="30%"
:close-on-click-modal="false"
:before-close="handleClose"
>
<div>
<el-tabs v-model="activeTab" type="card">
<el-tab-pane :label="$t('map.normalCreate')" name="first">
<el-form
ref="newForm"
label-position="right"
:model="newModel"
label-width="140px"
size="mini"
:rules="newRules"
@submit.native.prevent
>
<el-form-item :label="$t('map.skinName')" prop="skinCode">
<el-select v-model="newModel.skinCode" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in skinCodeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="newModel.name" />
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane :label="$t('map.publishMapCreation')" name="second">
<el-form
ref="pullForm"
label-position="right"
:model="pullModel"
:rules="pullRules"
label-width="140px"
size="mini"
>
<el-form-item :label="$t('map.publishMap')+ ':'" prop="id">
<el-select v-model="pullModel.id" :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in publishMapList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="pullModel.name" />
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="create">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { newMap, postBuildMapImport, newUsePublishMap } from '@/api/jmap/mapdraft';
import { listPublishMap } from '@/api/jmap/map';
import XLSX from 'xlsx';
import { translate, translateSheetTitle } from '@/scripts/translate';
import { sheet_to_json } from '@/utils/Export2Excel';
import { getSkinCodeList } from '@/api/management/mapskin';
export default {
name: 'MapCreate',
props: {
skinCode: {
type: String,
default() {
return '';
}
}
},
data() {
return {
dialogShow: false,
loading: false,
file: null,
rABS: false,
loadingUpload: false,
resultJSON: {},
activeTab: 'first',
skinCodeList: [],
publishMapList: [],
newModel: {
id: '',
name: '',
skinCode: ''
},
pullModel: {
id: '',
name: ''
},
newRules: {
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
],
skinCode: [
{ required: true, message: this.$t('rules.pleaseChooseSkinCode'), trigger: 'change' }
]
},
pullRules: {
id: [
{ required: true, message: this.$t('rules.pleaseSelectMapSource'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'change' }
]
},
cityList: []
};
},
watch: {
skinCode(val) {
this.newModel.skinCode = val;
}
},
methods: {
show() {
this.dialogShow = true;
this.initLoadData();
},
close() {
if (this.$refs.newForm) {
this.$refs.newForm.resetFields();
}
if (this.$refs.pullForm) {
this.$refs.pullForm.resetFields();
}
this.dialogShow = false;
},
handleClose() {
this.close();
},
initLoadData() {
this.skinCodeList = [];
getSkinCodeList().then(response => {
this.skinCodeList = response.data;
});
this.$Dictionary.cityType().then(list => {
this.cityList = list;
});
listPublishMap().then(response => {
this.publishMapList = response.data;
}).catch(() => {
this.$messageBox(this.$t('map.failedLoadListPublishedMaps'));
});
},
create() {
if (this.activeTab === 'first') {
this.$refs['newForm'].validate((valid) => {
if (valid) {
this.loading = true;
newMap(this.newModel).then(response => {
this.loading = false;
this.$emit('refresh');
this.$message.success(this.$t('map.creatingSuccessful'));
this.close();
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.createFailure'));
this.close();
});
}
});
} else {
this.$refs['pullForm'].validate((valid) => {
if (valid) {
this.loading = true;
newUsePublishMap(this.pullModel).then(response => {
this.loading = false;
this.$emit('refresh');
this.$message.success(this.$t('map.creatingSuccessful'));
this.close();
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.createFailure'));
this.close();
});
}
});
}
},
importf() { // 导入
const obj = this.$refs.files;
let wb;
if (!obj.files) return;
const f = obj.files[0];
this.loadingUpload = true;
const reader = new FileReader();
const that = this;
reader.onload = function (e) {
const data = e.target.result;
if (that.rABS) {
wb = XLSX.read(btoa(that.fixdata(data)), {// 手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
const resultJSONData = {};
for (const index in wb.Sheets) {
const titleNum = that.formatSheetTitle(index);
const key = translateSheetTitle.sheetName[titleNum];
const filterVal = that.handelData(key);
const jsonData = sheet_to_json(wb.Sheets[index]);
const data = that.formatJson(filterVal, jsonData, key);
if (key === 'base') {
for (const i in data[0]) {
resultJSONData[i] = data[0][i];
}
} else {
resultJSONData[key] = data;
}
}
that.resultJSON = resultJSONData;
if (that.resultJSON) {
postBuildMapImport(that.resultJSON).then(res => {
that.loadingUpload = false;
that.$message.success(this.$t('map.importSuccessful'));
that.$emit('refresh');
that.close();
}).catch(error => {
that.loadingUpload = false;
that.$message.error(this.$t('map.importFailure') + error.message);
});
}
obj.value = ''; // 清空上次导入文件
};
if (that.rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
// 转换数据格式
handelData(key) {
const tHeader = [];
const tHeaderF = [];
if (translate[key]) {
translate[key].columns.forEach(item => {
tHeader.push(item.tHeader);
tHeaderF.push(item.key);
});
}
const filterVal = {
tHeader: tHeader,
tHeaderF: tHeaderF
};
return filterVal;
},
// 文件流转BinaryString
fixdata(data) {
var o = '';
var l = 0;
var w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
},
// 转换属性名称 格式
formatJson(filterVal, jsonData, key) {
jsonData.map((item, index) => {
const json = {};
filterVal.tHeader.map((j, o) => {
if (item[j] != undefined) {
json[filterVal.tHeaderF[o]] = translate[key].columns[o].formatter(item[j]);
}
});
jsonData.splice(index, 1, json);
});
return jsonData;
},
// 转换sheet名字
formatSheetTitle(title) {
let index;
translateSheetTitle.sheetTitle.forEach((v, i) => {
if (title == v) index = i;
});
return index;
}
}
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.uploadDemo {
.el-upload-dragger {
margin: 0 auto;
}
.file_box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
}
</style>
<style>
.el-loading-mask {
background-color: rgba(0, 0, 0, 0.3);
}
</style>

246
src/views/map/mapdraft/mapmanage/edit.vue
View File

@ -1,246 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.mapEditor')" :visible.sync="dialogShow" :close-on-click-modal="false" width="30%" :before-close="handleClose">
<div>
<template v-if="basicInfo">
<el-form
ref="edit"
label-position="right"
:model="editModel"
:rules="editRules"
label-width="120px"
size="mini"
@submit.native.prevent
>
<el-form-item :label="$t('map.skinName')" prop="skinCode">
<el-select v-model="editModel.skinCode" :placeholder="$t('map.pleaseSelect')" size="mini" disabled>
<el-option
v-for="item in skinCodeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="editModel.name" />
</el-form-item>
</el-form>
</template>
<template v-else>
<el-form
ref="updt"
label-position="right"
:model="updtModel"
:rules="updtRules"
label-width="120px"
size="mini"
@submit.native.prevent
>
<el-form-item :label="$t('map.offsetXColon')" :prop="'origin.x'">
<el-input v-model="updtModel.origin.x" :label="$t('map.offsetX')" disabled />
</el-form-item>
<el-form-item :label="$t('map.offsetYColon')" :prop="'origin.y'">
<el-input v-model="updtModel.origin.y" :label="$t('map.offsetY')" disabled />
</el-form-item>
<el-form-item :label="$t('map.scalingColon')" prop="scaling">
<el-input-number v-model="updtModel.scaling" :precision="1" :step="0.2" disabled />
</el-form-item>
</el-form>
</template>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="save">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { updateMap, getMapDetail } from '@/api/jmap/mapdraft';
import { getSkinCodeList } from '@/api/management/mapskin';
import { saveMap } from '@/api/jmap/mapdraft';
export default {
name: 'MapEdit',
props: {
map: {
type: Object,
required: true
},
basicInfo: {
type: Boolean,
required: true,
default: function () {
return true;
}
},
skinCode: {
type: String,
required: true
}
},
data() {
return {
dialogShow: false,
loading: false,
skinCodeList: [],
cityList: [],
editModel: {
id: '',
name: '',
skinCode: '01',
cityCode: ''
},
updtModel: {
code: '',
scaling: '',
origin: {
x: '',
y: ''
}
},
isUpdate: false
};
},
computed: {
editRules() {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
],
skinCode: [
{ required: true, message: this.$t('rules.pleaseSelectAssociatedSkin'), trigger: 'change' }
]
};
},
updtRules() {
return {
'origin.x': [
{ required: true, message: this.$t('rules.enterXOffset'), trigger: 'blur' }
],
'origin.y': [
{ required: true, message: this.$t('rules.enterYOffset'), trigger: 'blur' }
],
scaling: [
{ required: true, message: this.$t('rules.enterScale'), trigger: 'blur' }
]
};
}
},
watch: {
map: function (val, old) {
if (val) {
Object.assign(this.editModel, this.map);
}
},
'$store.state.map.mapDataLoadedCount': function () {
if (this.$jlmap.skinCode) {
this.isUpdate = true;
}
}
},
mounted() {
this.initLoadData();
},
methods: {
show(type) {
const dataZoom = this.$store.state.map.dataZoom;
if (type == 'editCode') {
this.editModel.skinCode = this.editModel.skinCode ? this.editModel.skinCode : '';
this.editModel.name = this.editModel.name ? this.editModel.name : '';
} else if (type == 'editPoint') {
if (dataZoom && dataZoom.offsetX) {
this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
this.updtModel.scaling = dataZoom.scaleRate;
}
}
this.dialogShow = true;
},
close() {
if (this.basicInfo) {
this.$refs.edit.resetFields();
} else {
this.$refs.updt.resetFields();
}
this.dialogShow = false;
},
handleClose() {
this.close();
},
save() {
this.loading = true;
if (this.basicInfo) {
// this.editModel.id = this.$route.params.mapId;
this.$refs['edit'].validate((valid) => {
if (valid) {
updateMap(this.editModel).then(response => {
this.loading = false;
if (this.isUpdate && this.$route.params.mapId) {
getMapDetail(this.$route.params.mapId).then(response => {
this.$store.dispatch('map/setMapData', response.data);
});
}
this.$message.success(this.$t('map.mapUpdateSuccessful'));
this.$emit('refresh');
this.close();
}).catch(error => {
this.loading = false;
this.$message.error(this.$t('map.operationUnusual') + error.message);
});
} else {
this.loading = false;
}
});
} else {
this.updtModel.code = this.skinCode;
const map = this.$store.state.map.map;
this.$refs['updt'].validate((valid) => {
if (valid) {
this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => {
const param = {
mapId: this.$route.params.mapId,
skinVO: {
code: this.$store.state.map.map.skinVO.code,
name: this.$store.state.map.map.skinVO.name,
origin: {
x: this.updtModel.origin.x,
y: this.updtModel.origin.y
},
scaling: this.updtModel.scaling
}
};
saveMap(Object.assign(map, param)).then(response => {
this.loading = false;
this.close();
this.$message.success(this.$t('map.updateSuccessfully'));
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.updateFailed'));
});
});
} else {
this.loading = false;
}
});
}
},
initLoadData() {
this.cityList = [];
this.$Dictionary.cityType().then(list => {
this.cityList = list;
}).catch(() => {
this.$messageBox(this.$t('map.failedLoadCityList'));
});
this.skinCodeList = [];
getSkinCodeList().then(response => {
this.skinCodeList = response.data;
});
}
}
};
</script>

116
src/views/map/mapdraft/mapmanage/publish.vue
View File

@ -1,116 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.mapPublished')" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
<div>
<el-form
ref="form"
label-position="right"
:model="editModel"
label-width="120px"
:rules="editRules"
size="mini"
@submit.native.prevent
>
<el-form-item :label="$t('map.publishingAssociatedCity')" prop="cityCode">
<el-select v-model="editModel.cityCode" :placeholder="$t('map.pleaseSelect')">
<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
</el-select>
</el-form-item>
<el-form-item :label="$t('map.publishMapName')" prop="name">
<el-input v-model="editModel.name" />
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="publish">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { publishMap } from '@/api/jmap/mapdraft';
export default {
name: 'MapPublish',
props: {
map: {
type: Object,
required: true
}
},
data() {
return {
dialogShow: false,
loading: false,
cityList: [],
editModel: {
id: '',
name: '',
cityCode: '000000'
},
editRules: {
cityCode: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
]
}
};
},
watch: {
map: function (val, old) {
if (val) {
Object.assign(this.editModel, this.map);
}
}
},
mounted() {
this.$Dictionary.cityType().then(list => {
this.cityList = list;
});
},
methods: {
show() {
this.dialogShow = true;
},
close() {
this.$refs.form.resetFields();
this.dialogShow = false;
},
handleClose() {
this.close();
},
publish() {
this.loading = true;
delete this.editModel.children;
publishMap(this.editModel).then(response => {
this.loading = false;
if (response.data && response.data.length) {
this.tableToExcel(response.data);
this.$messageBox(this.$t('map.dataValidationFailed'));
} else {
this.$message.success(this.$t('map.releaseSuccess'));
}
this.close();
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.abnormalOperation'));
});
},
tableToExcel(data) {
const filterVal = ['index'];
const arr = [];
data.forEach(item => {
arr.push({ index: item });
});
const dataList = this.formatJson(filterVal, arr);
import('@/utils/Export2Excel').then(excel => {
excel.export_json_to_excel([this.$t('map.datQuestion')], dataList, this.$t('map.dataList'));
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
}
};
</script>

82
src/views/map/mapdraft/mapmanage/saveAs.vue
View File

@ -1,82 +0,0 @@
<template>
<el-dialog v-dialogDrag :title="$t('map.saveMapAs')" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
<div>
<el-form
ref="form"
label-position="right"
:model="editModel"
label-width="100px"
:rules="editRules"
size="mini"
@submit.native.prevent
>
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="editModel.name" />
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="saveAs">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { saveAsMap } from '@/api/jmap/mapdraft';
export default {
name: 'MapSaveAs',
props: {
map: {
type: Object,
required: true
}
},
data() {
return {
dialogShow: false,
loading: false,
editModel: {
id: '',
name: ''
},
editRules: {
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
]
}
};
},
watch: {
map: function (val, old) {
if (val) {
Object.assign(this.editModel, this.map);
}
}
},
methods: {
show() {
this.dialogShow = true;
},
close() {
this.$refs.form.resetFields();
this.dialogShow = false;
},
handleClose() {
this.close();
},
saveAs() {
this.loading = true;
saveAsMap(this.editModel).then(response => {
this.loading = false;
this.$emit('refresh');
this.close();
}).catch(() => {
this.loading = false;
this.$messageBox(this.$t('map.saveFailed'));
});
}
}
};
</script>

276
src/views/map/mapdraft/mapoperate/ImageControl.vue Normal file
View File

@ -0,0 +1,276 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="dataForm" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-data ref="make" :form="makeForm" :form-model="addModel" :rules="createRules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'ImageControlDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
mapData: null,
imageLists: [
{
value: `${process.env.VOICE_API}/oss/2d/bj1.png`,
label: this.$t('map.upside')
},
{
value: `${process.env.VOICE_API}/oss/2d/bj2.png`,
label: this.$t('map.hypomere')
}
],
editModel: {
code: '',
width: '',
height: '',
name: '',
rotate: 0,
zIndex: 5,
url: '',
position: {
x: 0,
y: 0
}
},
addModel: {
width: 48,
height: 20,
name: '',
rotate: 0,
zIndex: 5,
url: `${process.env.VOICE_API}/oss/2d/bj1.png`,
position: {
x: 0,
y: 0
}
},
rules: {
width: [
{ required: true, message: this.$t('map.pleaseEnterImageWidth'), trigger: 'blur' }
],
height: [
{ required: true, message: this.$t('map.pleaseEnterImageHeight'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'resourceList'
]),
dataForm() {
const form = {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.image')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.resourceList, change: true, deviceChange: this.deviceChange },
{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
{ prop: 'zIndex', label: this.$t('map.imageZindex'), type: 'number', min: 0 },
{ prop: 'rotate', label: this.$t('map.rotateAngle'), type: 'number', min: 0 },
{ prop: 'position', label: this.$t('map.imagePoint'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: []
}
}
};
return form;
},
makeForm() {
const form = {
labelWidth: '150px',
items: [
{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
{ prop: 'url', label: this.$t('map.imageSelect'), type: 'select', optionLabel: 'label', optionValue: 'value', options: this.imageLists },
{ prop: 'position', label: this.$t('map.imagePoint'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
};
return form;
},
createRules: function () {
return {
width: [
{ required: true, message: this.$t('map.pleaseEnterImageWidth'), trigger: 'blur' }
],
height: [
{ required: true, message: this.$t('map.pleaseEnterImageHeight'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('ImageControl');
const model = {
_type: 'ImageControl',
code: uid,
name: uid,
width: this.addModel.width,
rotate: 0,
zIndex: 5,
height: this.addModel.height,
url: this.addModel.url,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'ImageControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('map.confirm'),
cancelButtonText: this.$t('map.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

285
src/views/map/mapdraft/mapoperate/buttonDraft.vue Normal file
View File

@ -0,0 +1,285 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
<el-form-item :label="$t('map.buttonType')+ ':'" prop="type">
<el-select v-model="addModel.type" filterable>
<el-option
v-for="item in buttonTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.belongsStation')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<div class="coordinate">
<span class="title" style="width: 120px">{{ $t('map.textPoints') }}</span>
<el-form-item
label="x:"
prop="position.x"
style="display: table; float: left; margin-right: 20px;"
label-width="25px"
>
<el-input-number v-model="addModel.position.x" label="x:" />
</el-form-item>
<el-form-item
label="y:"
prop="position.y"
style="display: table; float: left;"
label-width="25px"
>
<el-input-number v-model="addModel.position.y" label="y:" />
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'LcControlDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
buttonTypeList: [
{ code: '01', name: this.$t('map.returnByGraph') }
],
mapData: null,
editModel: {
code: '',
text: '',
type: '',
stationCode: '',
position: {
x: 0,
y: 0
}
},
addModel: {
type: '',
stationCode: '',
text: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
tsxt: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'buttonList'
]),
createRules: function () {
return {
text: [
{ required: true, message: this.$t('rules.pleaseSelectButtonContent'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectButtonType'), trigger: 'blur' }
],
stationCode: [
{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
},
form() {
const form = {
labelWidth: '140px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.buttonControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.buttonList, change: true, deviceChange: this.deviceChange },
{ prop: 'type', label: `${this.$t('map.buttonType')}:`, type: 'select', optionLabel: 'name', optionValue: 'code', options: this.buttonTypeList },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px'},
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() == 'ButtonControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('ButtonControl');
const model = {
_type: 'ButtonControl',
code: uid,
type: this.addModel.type,
stationCode: this.addModel.stationCode,
text: this.addModel.text,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'ButtonControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

0
src/views/map/mapdraft/mapedit/mapoperate/config/data.vue → src/views/map/mapdraft/mapoperate/config/data.vue
View File

0
src/views/map/mapdraft/mapedit/mapoperate/config/list.vue → src/views/map/mapdraft/mapoperate/config/list.vue
View File

255
src/views/map/mapdraft/mapoperate/counter.vue Normal file
View File

@ -0,0 +1,255 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="120px" :model="addModel" :rules="createRules" size="mini">
<el-form-item :label="$t('map.stationName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.counterType')" prop="type">
<el-select v-model="addModel.type" filterable :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in typeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'CounterDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
typeList: [
{ code: '01', name: this.$t('map.areaSolution') },
{ code: '02', name: this.$t('map.alwaysSolution') }
],
editModel: {
code: '',
name: '',
type: '',
max: 0,
val: 0,
stationCode: '',
position: {
x: 0,
y: 0
}
},
addModel: {
type: '',
stationCode: ''
}
};
},
computed: {
...mapGetters('map', [
'counterList',
'stationList',
'skinCode'
]),
createRules: function () {
return {
type: [
{ required: true, message: this.$t('map.selectCounterType'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
]
};
},
rules: function () {
return {
code: [
{ required: true, message: this.$t('map.pleaseSelectDevice'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('map.pleaseSelectCountName'), trigger: 'change' }
],
type: [
{ required: true, message: this.$t('map.selectCounterType'), trigger: 'change' }
],
max: [
{ required: true, message: this.$t('map.pleaseCounterValue'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'change' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'change' }
]
};
},
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.counterCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.counterList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.counterName'), type: 'input' },
{ prop: 'type', label: this.$t('map.counterType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.typeList },
{ prop: 'max', label: this.$t('map.countMax'), type: 'number', min: 0, placeholder: this.$t('map.piece') },
{ prop: 'position', label: this.$t('map.counterPosition'), type: 'coordinate', width: '110px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('Counter');
const model = {
_type: 'Counter',
code: uid,
type: this.addModel.type,
max: 0,
val: 0
};
this.typeList.forEach(elem => {
if (elem.code === this.addModel.type) {
model.name = elem.name;
}
});
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.position = { x: elem.position.x, y: elem.position.y };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs.form.validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Counter'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('map.confirm'),
cancelButtonText: this.$t('map.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

237
src/views/map/mapdraft/mapoperate/delayunlock.vue Normal file
View File

@ -0,0 +1,237 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="editRules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
<el-form-item :label="$t('map.stationName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'DelayUnlockDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
skins: [],
editModel: {
code: '',
unlockTime: 0,
stationCode: '',
fontColor: '#FFFFFF',
font: '',
position: {
x: 0,
y: 0
}
},
addModel: {
stationCode: ''
}
};
},
computed: {
...mapGetters('map', [
'delayShowList',
'stationList',
'skinCode'
]),
createRules: function () {
return {
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
]
};
},
editRules: function () {
return {
code: [
{ required: true, message: this.$t('map.pleaseSelectDevice'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('map.selectStation'), trigger: 'change' }
],
unlockTime: [
{ required: true, message: this.$t('map.pleaseEnterDelayTime'), trigger: 'change' }
],
fontColor: [
{ required: true, message: this.$t('map.pleaseEnterFontColor'), trigger: 'change' }
],
font: [
{ required: true, message: this.$t('map.pleaseEnterFontFormat'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'change' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'change' }
]
};
},
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.delayUnlockingCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.delayShowList, change: true, deviceChange: this.deviceChange },
{ prop: 'unlockTime', label: this.$t('map.delayTime'), type: 'number', min: 0, max: 1000, placeholder: 's' },
{ prop: 'font', label: this.$t('map.font'), type: 'font' },
{ prop: 'fontColor', label: this.$t('map.color'), type: 'color' },
{ prop: 'position', label: this.$t('map.delayUnlockPosition'), type: 'coordinate', width: '110px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.$nextTick(() => {
if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
this.$refs.form.clearValidate();
});
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('DelayUnlock');
const model = {
_type: 'DelayUnlock',
font: '12px consolas',
fontColor: '#FFFFFF',
unlockTime: 10,
code: uid,
delayName: 'Test',
status: '00'
};
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.position = { x: elem.position.x, y: elem.position.y };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs.form.validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'DelayUnlock', status: '00'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('map.confirm'),
cancelButtonText: this.$t('map.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

381
src/views/map/mapdraft/mapedit/mapoperate/index.vue → src/views/map/mapdraft/mapoperate/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<transition name="el-zoom-in-center"> <transition name="el-zoom-in-center">
<div class="map-control"> <div class="map-control">
<el-card type="border-card"> <div class="border-card">
<div slot="header" class="clearfix"> <div class="clearfix">
<span> <span>
{{ $t('map.mapName') }} {{ $t('map.mapName') }}
<b>{{ mapInfo.name }}</b> <b>{{ mapInfo.name }}</b>
@ -13,20 +13,18 @@
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="showMap">{{ $t('map.viewLayer') }}</el-button> <el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
</div> </div>
<el-tabs v-model="enabledTab" class="mapEdit" type="card"> <el-tabs v-model="enabledTab" class="mapEdit" type="card">
<el-tab-pane :label="$t('map.link')" name="Link"> <el-tab-pane :label="$t('map.link')" class="tab_pane_box" name="Link">
<link-draft <link-draft
ref="Link" ref="Link"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.section')" name="Section"> <el-tab-pane :label="$t('map.section')" class="tab_pane_box" name="Section">
<section-draft <section-draft
ref="Section" ref="Section"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@ -34,20 +32,18 @@
@fieldSelect="fieldSelect" @fieldSelect="fieldSelect"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.switch')" name="Switch"> <el-tab-pane :label="$t('map.switch')" class="tab_pane_box" name="Switch">
<switch-draft <switch-draft
ref="Switch" ref="Switch"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.signal')" name="Signal"> <el-tab-pane :label="$t('map.signal')" class="tab_pane_box" name="Signal">
<signal-draft <signal-draft
ref="Signal" ref="Signal"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@ -55,10 +51,9 @@
@signalSectionCode="selectEnabledTab" @signalSectionCode="selectEnabledTab"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.station')" name="Station"> <el-tab-pane :label="$t('map.station')" class="tab_pane_box" name="Station">
<station-draft <station-draft
ref="Station" ref="Station"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@ -66,130 +61,117 @@
@stationSectionCode="stationEnabledTab" @stationSectionCode="stationEnabledTab"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.controlMode')" name="StationControl"> <el-tab-pane :label="$t('map.controlMode')" class="tab_pane_box" name="StationControl">
<station-control-draft <station-control-draft
ref="StationControl" ref="StationControl"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.platform')" name="StationStand"> <el-tab-pane :label="$t('map.platform')" class="tab_pane_box" name="StationStand">
<station-stand-draft <station-stand-draft
ref="StationStand" ref="StationStand"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.zcZoneControl')" name="ZcControl"> <el-tab-pane :label="$t('map.zcZoneControl')" class="tab_pane_box" name="ZcControl">
<zc-control-draft <zc-control-draft
ref="ZcControl" ref="ZcControl"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.temporaryLimit')" name="LimitControl"> <el-tab-pane :label="$t('map.temporaryLimit')" class="tab_pane_box" name="LimitControl">
<limit-control-draft <limit-control-draft
ref="LimitControl" ref="LimitControl"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.lcControl')" name="LcControl"> <el-tab-pane :label="$t('map.lcControl')" class="tab_pane_box" name="LcControl">
<lc-control-draft <lc-control-draft
ref="LcControl" ref="LcControl"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.counter')" name="Counter"> <el-tab-pane :label="$t('map.counter')" class="tab_pane_box" name="Counter">
<counter-draft <counter-draft
ref="Counter" ref="Counter"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.delayUnlock')" name="DelayUnlock"> <el-tab-pane :label="$t('map.delayUnlock')" class="tab_pane_box" name="DelayUnlock">
<delay-unlock-draft <delay-unlock-draft
ref="DelayUnlock" ref="DelayUnlock"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.train')" name="Train"> <el-tab-pane :label="$t('map.train')" class="tab_pane_box" name="Train">
<train-draft <train-draft
ref="Train" ref="Train"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.trainWindow')" name="TrainWindow"> <el-tab-pane :label="$t('map.trainWindow')" class="tab_pane_box" name="TrainWindow">
<train-window-draft <train-window-draft
ref="TrainWindow" ref="TrainWindow"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.line')" name="Line"> <el-tab-pane :label="$t('map.line')" class="tab_pane_box" name="Line">
<line-draft <line-draft
ref="Line" ref="Line"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.text')" name="Text"> <el-tab-pane :label="$t('map.text')" class="tab_pane_box" name="Text">
<text-draft <text-draft
ref="Text" ref="Text"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.image')" name="ImageControl"> <el-tab-pane :label="$t('map.image')" class="tab_pane_box" name="ImageControl">
<Image-control-draft <Image-control-draft
ref="ImageControl" ref="ImageControl"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@setCenter="setCenter" @setCenter="setCenter"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('map.button')" name="ButtonControl"> <el-tab-pane :label="$t('map.button')" class="tab_pane_box" name="ButtonControl">
<button-draft <button-draft
ref="ImageControl" ref="ImageControl"
:card-height="cardHeights"
:selected="selected" :selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel" @addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel" @delMapModel="delMapModel"
@ -197,7 +179,7 @@
/> />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </div>
</div> </div>
</transition> </transition>
</template> </template>
@ -225,151 +207,136 @@ import ButtonDraft from './buttonDraft';
import { ViewMode } from '@/scripts/ConstDic'; import { ViewMode } from '@/scripts/ConstDic';
export default { export default {
name: 'MapOperate', name: 'MapOperate',
components: { components: {
CounterDraft, CounterDraft,
LinkDraft, LinkDraft,
SectionDraft, SectionDraft,
SwitchDraft, SwitchDraft,
SignalDraft, SignalDraft,
StationDraft, StationDraft,
StationStandDraft, StationStandDraft,
StationControlDraft, StationControlDraft,
DelayUnlockDraft, DelayUnlockDraft,
TrainWindowDraft, TrainWindowDraft,
TrainDraft, TrainDraft,
LineDraft, LineDraft,
TextDraft, TextDraft,
ZcControlDraft, ZcControlDraft,
LimitControlDraft, LimitControlDraft,
LcControlDraft, LcControlDraft,
ImageControlDraft, ImageControlDraft,
ButtonDraft ButtonDraft
}, },
props: { props: {
selected: { selected: {
type: Object, type: Object,
default: function () { default: function () {
return null; return null;
} }
}, },
mapInfo: { mapInfo: {
type: Object, type: Object,
default: function() { return {name: this.$t('map.pleaseSelectMap')}; } default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
}, },
cardHeight: { mapSaveing: [Boolean]
type: [String, Number], },
required: true data() {
}, return {
mapSaveing: [Boolean] feild: '',
}, singlaType: '',
data() { stationType: '',
return { ViewMode: ViewMode,
feild: '', LogicalViewTypeList: [
singlaType: '', { code: 'Link', name: this.$t('map.link') }
stationType: '', ],
ViewMode: ViewMode, PhysicalViewTypeList: [
LogicalViewTypeList: [ { code: 'Section', name: this.$t('map.section') },
{ code: 'Link', name: this.$t('map.link') } { code: 'Signal', name: this.$t('map.signal') },
], { code: 'Switch', name: this.$t('map.switch') }
PhysicalViewTypeList: [ ],
{ code: 'Section', name: this.$t('map.section') }, logicalLevelsSelect: [],
{ code: 'Signal', name: this.$t('map.signal') }, physicalLevelsSelect: [],
{ code: 'Switch', name: this.$t('map.switch') } enabledTab: 'Link',
], autoSaveTask: null,
logicalLevelsSelect: [], show: {
physicalLevelsSelect: [], mapEditShow: false,
enabledTab: 'Link', mapPaintShow: true
autoSaveTask: null, }
show: { };
mapEditShow: false, },
mapPaintShow: true computed: {
}, isSave() {
cardHeights: 0 return this.mapInfo && this.mapInfo.id;
}; }
}, },
computed: { mounted() {
isSave() { this.initPage();
return this.mapInfo && this.mapInfo.id; },
} methods: {
}, dataRelation() {
watch: { this.$emit('selectView', 'path');
cardHeight: function (val) { },
this.resizeCardHeight(); showMap() {
} this.$emit('showMap');
}, },
mounted() { initPage() {
this.resizeCardHeight(); this.$Dictionary.logicalViewType().then(list => {
this.initPage(); this.LogicalViewTypeList = list;
}, this.LogicalViewTypeList.forEach(elem => {
methods: { this.logicalLevelsSelect.push(elem.code);
dataRelation() { });
this.$emit('selectView', 'path'); });
}, this.$Dictionary.physicalViewType().then(list => {
showMap() { this.PhysicalViewTypeList = list;
this.$emit('showMap'); this.PhysicalViewTypeList.forEach(elem => {
}, this.physicalLevelsSelect.push(elem.code);
initPage() { });
this.$Dictionary.logicalViewType().then(list => { });
this.LogicalViewTypeList = list; },
this.LogicalViewTypeList.forEach(elem => { handleSelectControlPage(device) {
this.logicalLevelsSelect.push(elem.code); const type = device._type;
}); if (this.stationType) {
}); this.enabledTab = 'Station';
this.$Dictionary.physicalViewType().then(list => { } else if (this.singlaType) {
this.PhysicalViewTypeList = list; this.enabledTab = 'Signal';
this.PhysicalViewTypeList.forEach(elem => { } else if (this.feild) {
this.physicalLevelsSelect.push(elem.code); this.enabledTab = 'Section';
}); } else {
}); this.enabledTab = type;
}, }
resizeCardHeight() { },
var padding = 0; stationEnabledTab(type) {
this.cardHeights = this.cardHeight - padding - 74; this.stationType = type;
}, },
handleSelectControlPage(device) { selectEnabledTab(type) {
const type = device._type; this.singlaType = type;
if (this.stationType) { },
this.enabledTab = 'Station'; fieldSelect(type) {
} else if (this.singlaType) { this.feild = type;
this.enabledTab = 'Signal'; },
} else if (this.feild) { handleSelectLogicalView(handle) {
this.enabledTab = 'Section'; this.$emit('handleSelectLogicalView', handle);
} else { },
this.enabledTab = type; handleSelectPhysicalView(handle) {
} this.$emit('handleSelectPhysicalView', handle);
}, },
stationEnabledTab(type) { saveMapEvent() {
this.stationType = type; this.$emit('saveMapEvent');
}, },
selectEnabledTab(type) { verifyMapEvent() {
this.singlaType = type; this.$emit('verifyMapEvent');
}, },
fieldSelect(type) { addOrUpdateMapModel(obj) {
this.feild = type; this.$emit('addOrUpdateMapModel', obj);
}, },
handleSelectLogicalView(handle) { delMapModel(obj) {
this.$emit('handleSelectLogicalView', handle); this.$emit('delMapModel', obj);
}, },
handleSelectPhysicalView(handle) { setCenter(code) {
this.$emit('handleSelectPhysicalView', handle); this.$emit('setCenter', code);
}, }
saveMapEvent() { }
this.$emit('saveMapEvent');
},
verifyMapEvent() {
this.$emit('verifyMapEvent');
},
addOrUpdateMapModel(obj) {
this.$emit('addOrUpdateMapModel', obj);
},
delMapModel(obj) {
this.$emit('delMapModel', obj);
},
setCenter(code) {
this.$emit('setCenter', code);
}
}
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@ -384,6 +351,10 @@ export default {
.map-control { .map-control {
float: right; float: right;
width: 100%; width: 100%;
height: 100%;
.border-card{
height: 100%;
}
} }
.physical-view { .physical-view {
@ -398,10 +369,18 @@ export default {
} }
} }
.clearfix{
height: 47px;
padding: 15px
}
.mapEdit{
height: calc(100% - 47px);
.tab_pane_box{
height: 100%;
}
}
/deep/ .button_box{ /deep/ .button_box{
// width: 100%;
// background: #f0f0f0;
// overflow: hidden;
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
overflow: hidden; overflow: hidden;
@ -409,7 +388,7 @@ export default {
box-shadow: 4px 7px 10px #565656; box-shadow: 4px 7px 10px #565656;
border-radius: 0; border-radius: 0;
border-bottom: 1px transparent solid; border-bottom: 1px transparent solid;
} }
/deep/ .map-draft-group { /deep/ .map-draft-group {
float: right; float: right;
@ -431,6 +410,9 @@ export default {
.mapEdit .el-tabs__active-bar{ .mapEdit .el-tabs__active-bar{
background: transparent; background: transparent;
} }
.mapEdit .el-tabs__content {
height: calc(100% - 56px);
}
.card .el-tabs__nav .el-tabs__item.is-active { .card .el-tabs__nav .el-tabs__item.is-active {
border-bottom: 2px solid #E4E7ED; border-bottom: 2px solid #E4E7ED;
@ -456,4 +438,27 @@ export default {
box-shadow: 1px 1px 4px #ccc; box-shadow: 1px 1px 4px #ccc;
} }
} }
// 页面页签样式
/deep/ {
.card .el-transfer-panel__filter{
margin: 5px 15px;
}
.card .el-transfer-panel__list.is-filterable{
height: 290px;
}
.card .el-transfer-panel__body{
height: 328px;
}
.card .el-transfer__buttons{
padding: 0 16px;
}
.card .el-transfer{
display: flex;
justify-content: center;
align-items: center;
}
}
</style> </style>

255
src/views/map/mapdraft/mapoperate/lcControl.vue Normal file
View File

@ -0,0 +1,255 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="150px" :rules="createRules" :model="addModel" size="mini">
<el-form-item :label="$t('map.statusSignalName')" prop="name">
<el-input v-model="addModel.name" />
</el-form-item>
<div class="coordinate">
<span class="title">{{ $t('map.stateSignalsPlotCoordinates') }}</span>
<el-form-item
label="x:"
prop="position.x"
style="display: table; float: left; margin-right: 20px;"
label-width="20px"
>
<el-input-number v-model="addModel.position.x" />
</el-form-item>
<el-form-item
label="y:"
prop="position.y"
style="display: table; float: left;"
label-width="20px"
>
<el-input-number v-model="addModel.position.y" />
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'LcControlDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
addModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainModelList',
'lcList',
'skinCode'
]),
createRules: function () {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
},
form() {
const form = {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.lcControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.lcList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '150px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('LcControl');
const model = {
_type: 'LcControl',
code: uid,
name: this.addModel.name,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'LcControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

246
src/views/map/mapdraft/mapoperate/limitControl.vue Normal file
View File

@ -0,0 +1,246 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-data ref="make" :form="formMake" :form-model="addModel" :rules="createRules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'LimitControlDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
addModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainModelList',
'tempSpeedLimitList',
'skinCode'
]),
form() {
const form = {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.temporaryLimit')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.tempSpeedLimitList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: []
}
}
};
return form;
},
formMake() {
const form = {
labelWidth: '150px',
items: [
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
};
return form;
},
createRules: function () {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('LimitControl');
const model = {
_type: 'LimitControl',
code: uid,
name: this.addModel.name,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'LimitControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

310
src/views/map/mapdraft/mapoperate/line.vue Normal file
View File

@ -0,0 +1,310 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="120px" :model="addModel" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.lineType')" prop="type">
<el-select v-model="addModel.type" filterable>
<el-option
v-for="item in LineTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.lineWidth')" prop="width">
<el-input-number v-model="addModel.width" :min="1" />px
</el-form-item>
<div class="coordinate">
<span class="title">{{ $t('map.linePoint') }}</span>
<div class="point-section">
<template v-for="(point, index) in addModel.points">
<div :key="index" style="overflow: hidden;">
<el-form-item
label=""
:prop="'points[' + index + '].x'"
style="display: table; float: left;"
label-width="0px"
>
<el-input-number v-model="point.x" />
</el-form-item>
<span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
, </span>
<el-form-item
label=""
:prop="'points[' + index + '].y'"
style="display: table; float: left; margin-right: 5px;"
label-width="10px"
>
<el-input-number v-model="point.y" />
</el-form-item>
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPoint(addModel.points, index)"
/>
<el-button
icon="el-icon-minus"
:disabled="index == 0 || index == addModel.points.length - 1"
circle
class="point-button"
@click="delPoint(addModel.points, index)"
/>
</div>
</template>
</div>
</div>
</el-form>
</el-scrollbar>
</div>
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
LineTypeList: [],
editModel: {
code: '',
type: '',
width: 1,
points: []
},
addModel: {
type: '',
width: 1,
points: [
{ x: 0, y: 0 },
{ x: 100, y: 100 }
]
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
},
makeRules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'lineList',
'stationList',
'skinCode'
]),
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.lineList, change: true, deviceChange: this.deviceChange },
{ prop: 'type', label: this.$t('map.lineType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.LineTypeList },
{ prop: 'width', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, addPoint: this.addPoint, delPoint: this.delPoint }
]
},
map: {
name: this.$t('map.mapData'),
item: [
]
}
}
};
return form;
},
isPointsShow() {
return this.editModel.points.length > 0;
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
this.$Dictionary.lineType().then(list => {
this.LineTypeList = list;
});
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
addPoint(index) {
const data = { x: 0, y: 0 };
this.editModel.points.splice(index + 1, 0, data);
},
delPoint(index) {
this.editModel.points.splice(index + 1, 0);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (JSON.stringify(this.addModel.points[0]) !== JSON.stringify(this.addModel.points[this.addModel.points.length - 1])) {
const pointArr = JSON.stringify(this.addModel.points);
const model = {
_type: 'Line',
code: getUID('Line'),
type: this.addModel.type,
width: this.addModel.width,
points: JSON.parse(pointArr)
};
this.$emit('addOrUpdateMapModel', model);
} else {
this.$message.console.error(this.$t('tip.cannotCoincide'));
}
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Line'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
overflow-y: auto;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
}
}
.point-section {
float: left;
width: calc(100% - 120px);
}
.point-button {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
float: left;
/deep/ {
.el-icon-plus,
.el-icon-minus {
transform: translateY(-5px);
}
}
}
.el-input-number--mini {
width: 110px;
}
</style>

549
src/views/map/mapdraft/mapoperate/link.vue Normal file
View File

@ -0,0 +1,549 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="120px" :model="addModel" size="mini">
<el-form-item :label="$t('map.linkType')">
<el-radio-group v-model="LinkType">
<el-radio
v-for="item in LinkTypeList"
:key="item.value"
:label="item.value"
border
:disabled="item.disabled"
size="mini"
>{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="isNew">
<config-data ref="make1" :form="formMake1" :form-model="addModel" :rules="makeRules1" />
</template>
<template v-if="isFd">
<config-data ref="make2" :form="formMake2" :form-model="addModel" :rules="makeRules2" />
</template>
<template v-if="isSd">
<config-data ref="make3" :form="formMake3" :form-model="addModel" :rules="makeRules3" />
</template>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button v-if="isNew" type="primary" size="small" @click="isNewCreate">{{ $t('map.create') }}</el-button>
<el-button v-if="isFd" type="primary" size="small" @click="isFdCreate">{{ $t('map.create') }}</el-button>
<el-button v-if="isSd" type="primary" size="small" @click="isSdCreate">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import { getUName } from '@/jmap/utils/Uname';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'LinkDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
linkLists: [],
activeName: 'first',
LinkType: '0',
LinkTypeList: [],
LinkDriectTypeList: [],
editModel: {
code: '',
type: '',
name: '',
lengthFact: 0,
leftFdCode: '',
leftSdCode: '',
rightFdCode: '',
rightSdCode: '',
lp: {
x: 0,
y: 0
},
rp: {
x: 0,
y: 0
}
},
addModel: {
code: '',
type: '01',
direct: 'R',
x: 0,
y: 0,
lengthShow: 200,
lengthFact: 0,
lfd: '',
rfd: ''
},
skins: [],
makeRules1: {
x: [
{ required: true, message: this.$t('rules.linkXCoordinate'), trigger: 'blur' }
],
y: [
{ required: true, message: this.$t('rules.linkYCoordinate'), trigger: 'blur' }
],
lengthShow: [
{ required: true, message: this.$t('rules.linkEnterLength'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
]
},
makeRules2: {
code: [
{ required: true, message: this.$t('rules.linkSelectBase'), trigger: 'change' }
],
lengthShow: [
{ required: true, message: this.$t('rules.linkEnterLength'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
]
},
makeRules3: {
lfd: [
{ required: true, message: this.$t('rules.linkEnterLeft'), trigger: 'blur' }
],
rfd: [
{ required: true, message: this.$t('rules.linkEnterRight'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkEnterDisplayLength'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'linkList'
]),
form() {
return {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.linkCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.linkName'), type: 'input' },
{ prop: 'lp', label: this.$t('map.linkLp'), type: 'coordinate', width: '119px', children: [
{ prop: 'lp.x', firstLevel: 'lp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'lp.y', firstLevel: 'lp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] },
{ prop: 'rp', label: this.$t('map.linkRp'), type: 'coordinate', width: '119px', children: [
{ prop: 'rp.x', firstLevel: 'rp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'rp.y', firstLevel: 'rp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] },
{ prop: 'leftFdCode', label: this.$t('map.linkLeftFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'leftSdCode', label: this.$t('map.linkLeftSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'rightFdCode', label: this.$t('map.linkRightFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'rightSdCode', label: this.$t('map.linkRightSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'lengthFact', label: this.$t('map.linkActualLength'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
}
}
};
},
rules() {
return {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'lp.x': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'lp.y': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'rp.x': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'rp.y': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
]
};
},
formMake1() {
return {
labelWidth: '120px',
items: [
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px' },
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') },
{ prop: 'x', label: this.$t('rules.pointX'), type: 'number', placeholder: 'px' },
{ prop: 'y', label: this.$t('rules.pointY'), type: 'number', placeholder: 'px' }
]
};
},
formMake2() {
return {
labelWidth: '120px',
items: [
{ prop: 'code', label: this.$t('rules.basisLink'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
{ prop: 'direct', label: this.$t('rules.direct'), type: 'radio', border: true, radioList: this.LinkDriectTypeList },
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px', isHidden: this.isSd },
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
};
},
formMake3() {
return {
labelWidth: '120px',
items: [
{ prop: 'lfd', label: '左侧正向Link:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
{ prop: 'rfd', label: '右侧正向Link:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.linkList },
{ prop: 'lengthShow', label: this.$t('rules.lengthShow'), type: 'number', min: 0, placeholder: 'px', isHidden: this.isSd },
{ prop: 'lengthFact', label: this.$t('rules.lengthFact'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
};
},
// 是否初始link
isNew() {
return this.LinkType === '0';
},
// 是否正向link
isFd() {
return this.LinkType === '1';
},
// 是否侧向link
isSd() {
return this.LinkType === '2';
}
},
watch: {
LinkType(val) {
this.addModel.type = val == '2' ? '02' : '01';
},
selected(val, oldVal) {
this.deviceSelect(val);
},
linkList(value) {
this.linkLists = JSON.parse(JSON.stringify(this.linkList));
this.linkLists.unshift({code: '', name: '无'});
}
},
mounted() {
this.LinkTypeList = this.$ConstSelect.LinkTypeList;
this.LinkDriectTypeList = this.$ConstSelect.LinkDriectTypeList;
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.$nextTick(() => {
if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected); // 深拷贝
this.addModel.code = selected.code;
}
});
},
isNewCreate() {
this.$refs['make1'].validate((valid) => {
if (valid) {
var uid = getUID('Link');
var uname = getUName(this.linkList);
const edits = [];
if (this.isNew) {
// 初始link
const x = this.addModel.x;
const y = this.addModel.y;
var model = {
_type: 'Link',
code: uid,
name: uname,
type: this.addModel.type,
lp: {
x: x,
y: y
},
rp: {
x: x + this.addModel.lengthShow,
y: y
},
lengthFact: this.addModel.lengthFact,
color: this.addModel.color ? this.addModel.color : '#4e8de6'
};
edits.push(model);
}
this.$emit('addOrUpdateMapModel', edits);
}
});
},
isFdCreate() {
this.$refs['make2'].validate((valid) => {
if (valid) {
var uid = getUID('Link');
var uname = getUName(this.linkList);
const edits = [];
var baseLink = null;
if (this.addModel) {
baseLink = this.$store.getters['map/getDeviceByCode'](this.addModel.code);
}
var leftFdCode = '';
var rightFdCode = '';
if (this.isFd) {
let lp = {};
let rp = {};
if (baseLink && baseLink._type.toUpperCase() === 'Link'.toUpperCase()) {
if (this.addModel.direct === 'L') {
lp = {
x: baseLink.lp.x - this.addModel.lengthShow,
y: baseLink.lp.y
};
rp = {
x: baseLink.lp.x,
y: baseLink.lp.y
};
rightFdCode = baseLink.code;
baseLink.leftFdCode = uid;
edits.push(baseLink);
} else {
lp = {
x: baseLink.rp.x,
y: baseLink.rp.y
};
rp = {
x: baseLink.rp.x + this.addModel.lengthShow,
y: baseLink.rp.y
};
leftFdCode = baseLink.code;
baseLink.rightFdCode = uid;
edits.push(baseLink);
}
const model = {
_type: 'Link',
code: uid,
name: uname,
type: this.addModel.type,
lp: lp,
rp: rp,
lengthFact: this.addModel.lengthFact,
leftFdCode: leftFdCode,
rightFdCode: rightFdCode
};
edits.push(model);
}
}
this.$emit('addOrUpdateMapModel', edits);
}
});
},
isSdCreate() {
this.$refs['make3'].validate((valid) => {
if (valid) {
var uid = getUID('Link');
var uname = getUName(this.linkList);
const edits = [];
if (this.isSd) {
var lnode = this.findLinkData(this.addModel.lfd);
var rnode = this.findLinkData(this.addModel.rfd);
if (lnode && rnode) {
const model = {
_type: 'Link',
code: uid,
name: uname,
type: this.addModel.type,
lp: {
x: lnode.rp.x,
y: lnode.rp.y
},
rp: {
x: rnode.lp.x,
y: rnode.lp.y
},
lengthFact: this.addModel.lengthFact,
color: this.addModel.color ? this.addModel.color : '#4e8de6',
leftFdCode: lnode.code,
rightFdCode: rnode.code
};
if (rnode.lp.y === lnode.rp.y) {
lnode.rightFdCode = uid;
rnode.leftFdCode = uid;
edits.push(lnode);
edits.push(rnode);
} else {
lnode.rightSdCode = uid;
rnode.leftSdCode = uid;
edits.push(lnode);
edits.push(rnode);
}
edits.push(model);
}
}
this.$emit('addOrUpdateMapModel', edits);
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Link'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
updateRelatedModel(node, code) {
const data = Object.assign({ _type: 'Link' }, node);
if (node.leftFdCode == code) {
data.leftFdCode = '';
return data;
}
if (node.leftSdCode == code) {
data.leftSdCode = '';
return data;
}
if (node.rightFdCode == code) {
data.rightFdCode = '';
return data;
}
if (node.rightSdCode == code) {
data.rightSdCode = '';
return data;
}
return { _type: 'Link', code: node.code };
},
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
var node = null;
var _that = this;
var updates = [];
// 清除link 关联关系
if (selected.leftFdCode) {
node = this.findLinkData(selected.leftFdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
if (selected.leftSdCode) {
node = this.findLinkData(selected.leftSdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
if (selected.rightFdCode) {
node = this.findLinkData(selected.rightFdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
if (selected.rightSdCode) {
node = this.findLinkData(selected.rightSdCode);
node && updates.push(this.updateRelatedModel(node, selected.code));
}
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('addOrUpdateMapModel', updates);
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
},
findLinkData(code) {
const linkList = this.linkList;
if (linkList && linkList.length) {
for (var i = 0; i < linkList.length; i++) {
if (code === linkList[i].code) {
return linkList[i];
}
}
}
return null;
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
margin-right: 7px;
}
}
</style>

1205
src/views/map/mapdraft/mapoperate/section.vue Normal file
View File

File diff suppressed because it is too large Load Diff

430
src/views/map/mapdraft/mapoperate/signal.vue Normal file
View File

@ -0,0 +1,430 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="130px" :model="addModel" size="mini" :rules="mergeRules">
<el-form-item :label="$t('map.physicalSegmentName')" prop="sectionCode">
<el-select v-model="addModel.sectionCode" filterable>
<el-option
v-for="item in PhysicalSectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type="field === 'selectSingalCode' ? 'danger' : 'primary'"
size="small"
@click="hover('selectSingalCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
<el-form-item :label="$t('map.leftOrRight')" prop="leftOrRight">
<el-select v-model="addModel.leftOrRight" filterable>
<el-option
v-for="item in SignalLeftOrRightList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.directionType')" prop="directionType">
<el-select v-model="addModel.directionType" filterable>
<el-option
v-for="item in SignalDirectionTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.signalDirectionTypeX')" prop="directionShowType">
<el-select v-model="addModel.directionShowType" filterable>
<el-option
v-for="item in SignalDirectionList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.positionType')" prop="positionType">
<el-select v-model="addModel.positionType" filterable>
<el-option
v-for="item in SignalPositionTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import JTriangle from '@/jmap/utils/JTriangle';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'SignalDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
SignalDirectionList: [
{ code: '01', name: '向左' },
{ code: '02', name: '向右' }
],
SignalLeftOrRightList: [],
SignalPotLampTypeList: [],
SignalLampPostTypeList: [],
SignalLampPositionTypeList: [],
SignalDirectionTypeList: [],
SignalPositionTypeList: [],
SignalUseTypeList: [],
failTypes: [
{ code: '00', name: this.$t('map.normal') },
{ code: '01', name: this.$t('map.signalFilamentAlarm') }
],
editModel: {
code: '',
name: '',
uniqueName: '',
nameShow: false,
lampPostType: '',
lampPositionType: '',
potLampType: '01',
directionShowType: '',
directionType: '',
positionType: '',
namePosition: { x: 0, y: 0 },
useType: '',
stationCode: '',
linkCode: '',
offset: 0,
rotate: 0,
guideShow: false,
buttonShow: false,
position: { x: 0, y: 0 },
buttonPosition: { x: 0, y: 0 },
guidePosition: { x: 0, y: 0 }
},
field: '',
addModel: {
sectionCode: '',
directionType: '01',
directionShowType: '01',
leftOrRight: '0',
positionType: '01'
},
mergeRules: {
sectionCode: [
{ required: true, message: this.$t('rules.selectPhysicalExtentName'), trigger: 'change' }
],
directionType: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.directionType'), trigger: 'change' }
],
directionShowType: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.directionType'), trigger: 'change' }
],
leftOrRight: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.leftOrRight'), trigger: 'change' }
],
positionType: [
{ required: true, message: this.$t('map.pleaseSelect') + '' + this.$t('map.positionType'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'linkList',
'signalList',
'sectionList',
'stationList',
'skinCode'
]),
PhysicalSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
}
return list;
},
form() {
return {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.signalCodeColon'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.signalList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.signalNameColon'), type: 'input' },
{ prop: 'position', label: this.$t('map.signalPosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'lampPostType', label: this.$t('map.lampPostType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalLampPostTypeList },
{ prop: 'lampPositionType', label: this.$t('map.lampPositionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalLampPositionTypeList },
{ prop: 'directionShowType', label: this.$t('map.signalDirectionTypeX'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalDirectionList },
{ prop: 'positionType', label: this.$t('map.signalPositionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalPositionTypeList },
{ prop: 'rotate', label: this.$t('map.rotateAngle'), type: 'number', min: -90, max: 90, placeholder: this.$t('tip.angle') },
{ prop: 'namePosition', label: this.$t('map.signalNamePosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'namePosition.x', firstLevel: 'namePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'buttonShow', label: this.$t('map.signalButtonShow'), type: 'checkbox' },
{ prop: 'buttonPosition', label: this.$t('map.signalButtonPosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'buttonPosition.x', firstLevel: 'buttonPosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'buttonPosition.y', firstLevel: 'buttonPosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'guideShow', label: this.$t('map.signalGuideShow'), type: 'checkbox' },
{ prop: 'guidePosition', label: this.$t('map.signalGuidePosition'), type: 'coordinate', width: '140px', children: [
{ prop: 'guidePosition.x', firstLevel: 'guidePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'guidePosition.y', firstLevel: 'guidePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
{ prop: 'directionType', label: this.$t('map.signalDirectionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalDirectionTypeList },
{ prop: 'uniqueName', label: this.$t('map.signalUniqueName'), type: 'input' },
{ prop: 'useType', label: this.$t('map.signalUseType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalUseTypeList },
{ prop: 'potLampType', label: this.$t('map.potLampType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalPotLampTypeList },
{ prop: 'linkCode', label: this.$t('map.signalLinkCode') + ':', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList },
{ prop: 'offset', label: this.$t('map.signalOffset'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]
}
}
};
},
rules() {
return {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterSemaphoreName'), trigger: 'blur' }
],
uniqueName: [
{ required: true, message: this.$t('rules.pleaseEnterSignalName'), trigger: 'blur' }
],
offset: [
{ required: true, message: this.$t('rules.pleaseEnterSignalOffset'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterSignalPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterSignalPositionY'), trigger: 'blur' }
],
'buttonPosition.x': [
{ required: true, message: this.$t('rules.signalButtonPositionX'), trigger: 'blur' }
],
'buttonPosition.y': [
{ required: true, message: this.$t('rules.signalButtonPositionY'), trigger: 'blur' }
],
'guidePosition.x': [
{ required: true, message: this.$t('rules.signalGuidePositionX'), trigger: 'blur' }
],
'guidePosition.y': [
{ required: true, message: this.$t('rules.signalGuidePositionY'), trigger: 'blur' }
]
};
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
this.SignalLeftOrRightList = this.$ConstSelect.SignalLeftOrRightList;
this.$Dictionary.signalPotLampType().then(list => {
this.SignalPotLampTypeList = list;
});
this.$Dictionary.signalLampPostType().then(list => {
this.SignalLampPostTypeList = list;
});
this.$Dictionary.signalLampPositionType().then(list => {
this.SignalLampPositionTypeList = list;
});
this.$Dictionary.signalDirectionType().then(list => {
this.SignalDirectionTypeList = list;
});
this.$Dictionary.signalPositionType().then(list => {
this.SignalPositionTypeList = list;
});
this.$Dictionary.signalUseType().then(list => {
this.SignalUseTypeList = list;
});
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
this.editModel.potLampType = selected.potLampType || '01';
this.editModel.rotate = selected.rotate || 0; // 角度
}
if (this.field.toUpperCase() === 'selectSingalCode'.toUpperCase()) {
this.addModel.sectionCode = selected.code;
this.activeName = 'second';
this.field = '';
this.$emit('signalSectionCode', '');
}
},
hover(field) {
this.field = field === this.field ? '' : field;
this.$emit('signalSectionCode', this.field);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (this.addModel.sectionCode) {
const uid = getUID('Singal');
var model = {
_type: 'Signal',
code: uid,
uniqueName: uid,
positionType: this.addModel.positionType,
directionType: this.addModel.directionType,
directionShowType: this.addModel.directionShowType,
nameShow: true,
namePosition: { x: 0, y: 0 },
buttonShow: true,
useType: '01',
potLampType: '01',
lampPostType: '01',
lampPositionType: '01',
guideShow: false
};
this.sectionList.forEach(elem => {
if (elem.code === this.addModel.sectionCode) {
model.name = 'Signal_' + elem.name.replace('Section_', '');
model.linkCode = elem.linkCode;
if (this.addModel.leftOrRight === '0') {
const beg = elem.points[0];
const end = elem.points[0 + 1];
const traingle = new JTriangle(beg, end);
model.rotate = Math.floor(traingle.getAngle());
model.position = { x: elem.points[0].x, y: elem.points[0].y };
model.guidePosition = { x: elem.points[0].x, y: elem.points[0].y };
model.buttonPosition = { x: elem.points[0].x, y: elem.points[0].y };
model.offset = elem.offsetLeft;
} else {
const r = elem.points.length - 1;
const beg = elem.points[r - 1];
const end = elem.points[r];
const traingle = new JTriangle(beg, end);
model.rotate = Math.floor(traingle.getAngle());
model.position = { x: elem.points[r].x, y: elem.points[r].y };
model.guidePosition = { x: elem.points[r].x, y: elem.points[r].y };
model.buttonPosition = { x: elem.points[r].x, y: elem.points[r].y };
model.offset = elem.offsetRight;
}
}
});
this.$emit('addOrUpdateMapModel', model);
} else {
this.$messageBox(this.$t('tip.selectedSectionEmpty'));
}
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Signal'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type === 'Signal') {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

284
src/views/map/mapdraft/mapoperate/station.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="140px" :model="addModel" size="mini" :rules="mergeRules">
<el-form-item :label="$t('map.physicalSegmentName')" prop="sectionCode">
<el-select v-model="addModel.sectionCode" filterable>
<el-option
v-for="item in PhysicalSectionList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
<el-button
:type="field === 'selectStationCode' ? 'danger' : 'primary'"
size="small"
@click="hover('selectStationCode')"
>{{ $t('map.activate') }}</el-button>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
field: '',
editModel: {
centralized: false,
concentrateStationCode: '',
code: '',
zcCode: '',
visible: true,
runPlanName: '',
name: '',
nameFont: '',
nameFontColor: '#FFFFFF',
kmPostShow: '',
kmRange: 0,
kmPost: '',
kmPostFont: '',
kmPostFontColor: '#FFFFFF',
isShowControlMode: '',
position: {
x: 0,
y: 0
}
},
addModel: {
sectionCode: ''
},
skins: [],
mergeRules: {
sectionCode: [
{ required: true, message: this.$t('rules.selectPhysicalExtentName'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'sectionList',
'zcList',
'skinCode'
]),
form() {
return {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.stationCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.stationName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stationPosition'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'visible', label: this.$t('map.stationstandShowName'), type: 'checkbox' },
{ prop: 'nameFont', label: this.$t('map.stationNameFont'), type: 'font', placeholder: this.$t('tip.stationFont') },
{ prop: 'nameFontColor', label: this.$t('map.stationNameFontColor'), type: 'color' },
{ prop: 'kmRange', label: this.$t('map.stationKmRange'), type: 'number', min: 0, placeholder: this.$t('tip.meter') },
{ prop: 'kmPost', label: this.$t('map.stationKmPost'), type: 'input' },
{ prop: 'kmPostFont', label: this.$t('map.stationKmPostFont'), type: 'font', placeholder: this.$t('tip.kilometerFont') },
{ prop: 'kmPostFontColor', label: this.$t('map.stationKmPostFontColor'), type: 'color' }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'concentrateStationCode', label: this.$t('map.concentrateStationCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.stationList },
{ prop: 'centralized', label: this.$t('map.centralized'), type: 'checkbox' },
{ prop: 'zcCode', label: this.$t('map.zcCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.zcList, isHidden: !this.isZcCode },
{ prop: 'runPlanName', label: this.$t('map.stationRunPlanName'), type: 'input' }
]
}
}
};
},
rules() {
return {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.stationName'), trigger: 'blur' }
],
kmRange: [
{ required: true, message: this.$t('rules.stationKmRange'), trigger: 'blur' }
],
kmPost: [
{ required: true, message: this.$t('rules.stationKmPost'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
},
PhysicalSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
}
return list;
},
isZcCode() {
return this.editModel.centralized;
}
},
watch: {
selected: function (val) {
this.deviceSelect(val);
}
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
this.editModel.runPlanName = selected.runPlanName || '';
}
if (this.field.toUpperCase() === 'selectStationCode'.toUpperCase()) {
this.addModel.sectionCode = selected.code;
this.activeName = 'second';
this.field = '';
this.$emit('stationSectionCode', '');
}
},
hover(field) {
this.field = field === this.field ? '' : field;
this.$emit('stationSectionCode', this.field);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (this.addModel.sectionCode) {
const uid = getUID('Station');
const model = {
_type: 'Station',
code: uid,
zcCode: '',
runPlanName: '',
visible: true,
nameFont: '14px consolas',
nameFontColor: '#FFFFFF',
kmPost: '1000km~2000km',
kmPostShow: true,
kmPostFont: '8px consolas',
kmPostFontColor: '#FFFFFF',
centralized: false,
concentrateStationCode: ''
};
this.sectionList.forEach(elem => {
if (elem.code === this.addModel.sectionCode) {
const l = 0;
const r = elem.points.length - 1;
model.name = 'Station_' + elem.name.replace('Station_', '');
model.position = {
x: elem.points[l].x + (elem.points[r].x - elem.points[l].x) / 2,
y: elem.points[l].y
};
}
});
this.$emit('addOrUpdateMapModel', model);
}
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Station'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

254
src/views/map/mapdraft/mapoperate/stationcontrol.vue Normal file
View File

@ -0,0 +1,254 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" :model="addModel" label-width="120px" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.stationstandName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationControlDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
editModel: {
code: '',
name: '',
position: {
x: 0,
y: 0
},
stationCode: '',
zokContent: '',
zakContent: '',
jjzkContent: '',
zbjkContent: '',
zzkContent: '',
lskContent: ''
},
addModel: {
stationCode: ''
},
makeRules: {
stationCode: [
{ required: true, message: this.$t('rules.stationControlStationName'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'stationControlList',
'skinCode'
]),
form() {
const form = {
labelWidth: '160px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.stationControlCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.stationControlList, change: true, deviceChange: this.deviceChange },
{ prop: 'zokContent', label: this.$t('map.zokContent'), type: 'input' },
{ prop: 'zakContent', label: this.$t('map.zakContent'), type: 'input' },
{ prop: 'jjzkContent', label: this.$t('map.jjzkContent'), type: 'input' },
{ prop: 'zzkContent', label: this.$t('map.zzkContent'), type: 'input' },
{ prop: 'lskContent', label: `${this.$t('map.interconnected')}:`, type: 'input' },
{ prop: 'position', label: this.$t('map.stationControlPosition'), type: 'coordinate', width: '150px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
},
rules() {
const rules = {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
],
zokContent: [
{ required: true, message: this.$t('rules.stationControlZokContent'), trigger: 'blur' }
],
zakContent: [
{ required: true, message: this.$t('rules.stationControlZakContent'), trigger: 'blur' }
],
jjzkContent: [
{ required: true, message: this.$t('rules.stationControlJjzkContent'), trigger: 'blur' }
],
zzkContent: [
{ required: true, message: this.$t('rules.stationControlZzkContent'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.stationControlPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.stationControlPositionY'), trigger: 'blur' }
]
};
// 清空表单验证提示信息
this.$nextTick(() => {
this.$refs.dataform &&
this.$refs.dataform.clearValidate();
});
return rules;
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (this.addModel.stationCode) {
const uid = getUID('StationControl');
const model = {
_type: 'StationControl',
code: uid,
zokContent: '中控',
zbjkContent: '总报警',
zakContent: '站控',
jjzkContent: '紧急站控',
zzkContent: '站中控按钮',
lskContent: '连锁控'
};
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.name = 'StationControl_' + elem.name.replace('Station_', '');
model.position = { x: elem.position.x, y: elem.position.y };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
} else {
this.$messageBox(this.$t('tip.selectedStationEmpty'));
}
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'StationControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', _that.selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

308
src/views/map/mapdraft/mapoperate/stationstand.vue Normal file
View File

@ -0,0 +1,308 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="140px" :model="addModel" :rules="createRules" size="mini">
<el-form-item :label="$t('map.stationstandName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.equipmentStation')" prop="deviceStationCode">
<el-select v-model="addModel.deviceStationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.stationstandDirection')" prop="doorLocationType">
<el-select v-model="addModel.doorLocationType" filterable :placeholder="$t('map.pleaseSelect')">
<el-option
v-for="item in DoorLocationTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.stationstandHasDoor')" prop="hasDoor">
<el-checkbox v-model="addModel.hasDoor" />
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
DoorLocationTypeList: [],
RunDirectionTypeList: [],
/*
{ code: '01', name: '朝下' },
{ code: '02', name: '朝上' }
*/
editModel: {
code: '',
name: '',
nameShow: '',
doorLocationType: '',
deviceStationCode: '',
hasDoor: false,
width: 0,
height: 0,
stationCode: '',
position: {
x: 0,
y: 0
},
visible: true,
direction: ''
},
addModel: {
stationCode: '',
doorLocationType: '01',
deviceStationCode: '',
hasDoor: true
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'stationStandList',
'skinCode'
]),
form() {
const form = {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.relStandCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationStandList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.stationstandNameColon'), type: 'input' },
{ prop: 'position', label: this.$t('map.stationstandPosition'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'direction', label: this.$t('map.stationstandTopBottom'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.RunDirectionTypeList },
{ prop: 'visible', label: this.$t('map.stationVisible'), type: 'checkbox' },
{ prop: 'doorLocationType', label: this.$t('map.stationstandDirection'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.DoorLocationTypeList },
{ prop: 'hasDoor', label: this.$t('map.stationstandHasDoor'), type: 'checkbox' },
{ prop: 'width', label: this.$t('map.stationstandWidth'), type: 'number', min: 0, max: 2000, placeholder: 'px' },
{ prop: 'height', label: this.$t('map.stationstandHeight'), type: 'number', min: 0, max: 2000, placeholder: 'px' }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'deviceStationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.stationList },
{ prop: 'stationCode', label: this.$t('map.belongsStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
},
rules() {
const rules = {
code: [
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'change' }
],
stationCode: [
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.stationstandCountName'), trigger: 'change' }
],
doorLocationType: [
{ required: true, message: this.$t('rules.doorLocationType'), trigger: 'change' }
],
deviceStationCode: [
{ required: true, message: this.$t('rules.deviceStationCode'), trigger: 'change' }
],
direction: [
{ required: true, message: this.$t('rules.stationstandDirection'), trigger: 'change' }
],
width: [
{ required: true, message: this.$t('rules.stationstandWidth'), trigger: 'change' }
],
height: [
{ required: true, message: this.$t('rules.stationstandHeight'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'change' }
],
'position.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'change' }
]
};
// 清空表单验证提示信息
this.$nextTick(() => {
this.$refs.dataform &&
this.$refs.dataform.clearValidate();
});
return rules;
},
createRules() {
return {
stationCode: [
{ required: true, message: this.$t('rules.stationCode'), trigger: 'change' }
],
doorLocationType: [
{ required: true, message: this.$t('rules.doorLocationType'), trigger: 'change' }
],
deviceStationCode: [
{ required: true, message: this.$t('rules.deviceStationCode'), trigger: 'change' }
]
};
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
this.$Dictionary.doorLocationType().then(list => {
this.DoorLocationTypeList = list;
});
this.$Dictionary.runDirectionType().then(list => {
this.RunDirectionTypeList = list;
});
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('StationStand');
const model = {
_type: 'StationStand',
code: uid,
width: 40,
height: 20,
doorLocationType: this.addModel.doorLocationType,
deviceStationCode: this.addModel.deviceStationCode,
visible: true,
direction: '01',
hasDoor: this.addModel.hasDoor
};
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
model.name = 'StationStand_' + elem.name.replace('Station_', '');
model.position = { x: elem.position.x, y: elem.position.y + 40 };
model.stationCode = elem.code;
}
});
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs.dataform.validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'StationStand'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

519
src/views/map/mapdraft/mapoperate/switch.vue Normal file
View File

@ -0,0 +1,519 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div class="flex_box">
<el-button type="primary" @click="create">{{ $t('map.createSwitch') }}</el-button>
<el-button type="" @click="questionList = []">{{ $t('map.clearHint') }}</el-button>
</div>
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-card v-if="questionList.length" class="box-card">
<div v-for="(item, index) in questionList" :key="index" class="text item">
{{ item }}
</div>
</el-card>
</el-scrollbar>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'SwitchDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
questionList: [],
editModel: {
code: '',
name: '',
turnTime: 0,
nameShow: false,
namePosition: { x: 0, y: 0 },
stationCode: '',
timeoutShow: false,
sectionACode: '',
sectionBCode: '',
sectionCCode: '',
tp: { x: 0, y: 0 }
}
};
},
computed: {
form() {
const form = {
labelWidth: '170px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.switchCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.switchList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.switchName'), type: 'input' },
{ prop: 'namePosition', label: this.$t('map.switchPosition'), type: 'coordinate', width: '160px', children: [
{ prop: 'namePosition.x', firstLevel: 'namePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] },
{ prop: 'tp', label: this.$t('map.switchTp'), type: 'coordinate', width: '160px', children: [
{ prop: 'tp.x', firstLevel: 'tp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'tp.y', firstLevel: 'tp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
{ prop: 'turnTime', label: this.$t('map.turnTime'), type: 'number', min: 0, max: 1000, placeholder: 's' }
]
}
}
};
return form;
},
rules() {
const rules = {
code: [
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.switchName'), trigger: 'blur' }
],
'namePosition.x': [
{ required: true, message: this.$t('rules.switchNamePointX'), trigger: 'blur' }
],
'namePosition.y': [
{ required: true, message: this.$t('rules.switchNamePointY'), trigger: 'blur' }
],
turnTime: [
{ required: true, message: this.$t('rules.switchTurnTime'), trigger: 'blur' }
],
'tp.x': [
{ required: true, message: this.$t('rules.switchTpX'), trigger: 'blur' }
],
'tp.y': [
{ required: true, message: this.$t('rules.switchTpY'), trigger: 'blur' }
]
};
// 清空表单验证提示信息
this.$nextTick(() => {
this.$refs.dataform &&
this.$refs.dataform.clearValidate();
});
return rules;
},
...mapGetters('map', [
'linkList',
'sectionList',
'switchList',
'stationList',
'skinCode'
])
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
filterSections(query, item) {
return item.pinyin.indexOf(query) > -1;
},
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() { // 一键生成道岔
this.questionList = []; // 有问题区段列表
const models = [];
const linkObj = {};
this.linkList.forEach(link => {
if (link && link.leftFdCode && link.leftSdCode) { // 左侧同时都有关联link
linkObj[`${link.code}`] = { name: '', num: 0 };
} else if (link && link.rightFdCode && link.rightSdCode) { // 右侧同时都有关联link
linkObj[`${link.code}`] = { name: '', num: 0 };
} else if (link && link.leftFdCode && !link.leftSdCode && link.rightFdCode && !link.rightSdCode) { // 左右正向link关联，侧向link不关联检测
linkObj[`${link.code}`] = { name: '', num: 0 };
}
});
this.sectionList.forEach(section => {
for (const link in linkObj) {
if (section.linkCode == link) {
linkObj[link].num++;
linkObj[link].name = section.name;
}
}
const uname = 'switch_' + section.name.replace('section_', '');
const link = this.findLinkData(section.linkCode);
if (link && link.leftFdCode && link.leftSdCode) {
const node = this.findLinkData(link.leftSdCode); // 寻找 侧段link
if (node) {
const lFdSection = this.findSectionDataByLinkCodeAndPoint(link.leftFdCode, section.points[0]);
const lSdSection = this.findSectionDataByLinkCodeAndPoint(link.leftSdCode, section.points[0]);
if (lFdSection && lSdSection) {
const model = {
_type: 'Switch',
code: getUID('Switch'),
name: uname,
nameShow: true,
timeoutShow: true,
sectionACode: section.code,
sectionBCode: lFdSection.code,
sectionCCode: lSdSection.code,
namePosition: { x: 0, y: 0 },
turnTime: 3,
tp: { x: 0, y: 0 },
lp: {
x: lFdSection.points[lFdSection.points.length - 1].x,
y: lFdSection.points[lFdSection.points.length - 1].y
},
rp: {
x: lSdSection.points[lSdSection.points.length - 2].x,
y: lSdSection.points[lSdSection.points.length - 2].y
},
intersection: {
x: section.points[0].x,
y: section.points[0].y
},
skew: {
x: lSdSection.points[lSdSection.points.length - 2].x,
y: lSdSection.points[lSdSection.points.length - 2].y
}
};
const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
!swch && models.push(model); // 已有的道岔不在创建
}
}
}
if (link && link.rightFdCode && link.rightSdCode) {
const node = this.findLinkData(link.rightSdCode);
if (node) {
const rFdSection = this.findSectionDataByLinkCodeAndPoint(link.rightFdCode, section.points[section.points.length - 1]);
const rSdSection = this.findSectionDataByLinkCodeAndPoint(link.rightSdCode, section.points[section.points.length - 1]);
if (rFdSection && rSdSection) {
const model = {
_type: 'Switch',
code: getUID('Switch'),
name: uname,
nameShow: true,
timeoutShow: true,
sectionACode: section.code,
sectionBCode: rFdSection.code,
sectionCCode: rSdSection.code,
namePosition: { x: 0, y: 0 },
turnTime: 3,
tp: { x: 0, y: 0 },
lp: {
x: rFdSection.points[0].x,
y: rFdSection.points[0].y
},
rp: {
x: rSdSection.points[1].x,
y: rSdSection.points[1].y
},
intersection: {
x: section.points[section.points.length - 1].x,
y: section.points[section.points.length - 1].y
},
skew: {
x: rSdSection.points[1].x,
y: rSdSection.points[1].y
}
};
const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
!swch && models.push(model);
}
}
}
});
const createArr = [];
models.forEach((item) => {
const sectionA = this.$store.getters['map/getDeviceByCode'](item.sectionACode);
const sectionB = this.$store.getters['map/getDeviceByCode'](item.sectionBCode);
const sectionC = this.$store.getters['map/getDeviceByCode'](item.sectionCCode);
if (linkObj[sectionA.linkCode].num != 1 && linkObj[sectionB.linkCode].num != 1 && linkObj[sectionC.linkCode].num != 1 ) {
createArr.push(item);
}
});
// console.log(models, createArr, '创建道岔list');
this.$confirm(this.$t('tip.confirmBatchGeneration'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
for (const link in linkObj) {
if (linkObj[link].num == 1) {
this.questionList.push(`${this.$t('map.section')}${linkObj[link].name}${this.$t('tip.linkNoneSplit')}, ${this.$t('tip.createSwitchPortion')}`);
}
}
this.$emit('addOrUpdateMapModel', createArr);
this.createSwitchSection(createArr);
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('tip.cancelGeneration')
});
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Switch'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.handleDelete(selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelGeneration'));
});
}
},
// 删除道岔/ 关联的道岔区段以及 道岔绑定关系
handleDelete(selected) {
const models = [];
const remove = [];
this.sectionList.forEach(elem => {
if (elem.type == '03' && elem.relSwitchCode == selected.code) {
remove.push({
_type: 'Section',
code: elem.code
});
}
if (elem.relSwitchCode == selected.code && elem.type != '03') {
elem.relSwitchCode = '';
elem.isSwitchSection = false;
models.push(elem);
}
});
this.$emit('delMapModel', selected);
this.$emit('delMapModel', remove);
this.$emit('addOrUpdateMapModel', models);
},
findLinkData(code) {
var rtn = null;
var linkList = this.linkList;
if (linkList && linkList.length) {
for (var i = 0; i < linkList.length; ++i) {
if (code === linkList[i].code) {
rtn = linkList[i];
break;
}
}
}
return rtn;
},
findSectionDataByLinkCodeAndPoint(code, point) {
var rtn = null;
var sectionList = this.sectionList;
if (sectionList && sectionList.length) {
for (var i = 0; i < sectionList.length; ++i) {
if (code === sectionList[i].linkCode && point) {
if (JSON.stringify(sectionList[i].points[0]) === JSON.stringify(point) ||
JSON.stringify(sectionList[i].points[sectionList[i].points.length - 1]) === JSON.stringify(point)) {
rtn = sectionList[i];
break;
}
}
}
}
return rtn;
},
findSwitchData(sectionACode, sectionBCode, sectionCCode) {
var rtn = null;
var switchList = this.switchList;
if (switchList && switchList.length) {
for (var i = 0; i < switchList.length; ++i) {
if (sectionACode === switchList[i].sectionACode &&
sectionBCode === switchList[i].sectionBCode &&
sectionCCode === switchList[i].sectionCCode) {
rtn = switchList[i];
break;
}
}
}
return rtn;
},
// 一键删除道岔区段
removeSwitchSection() {
const remove = [];
const models = [];
if (this.sectionList && this.sectionList.length) {
this.sectionList.forEach(elem => {
// 删除 道岔区段/ 恢复道岔绑定关系
if (elem.type === '03' && !elem.parentCode) {
remove.push({
_type: 'Section',
code: elem.code
});
}
if (elem.relSwitchCode) {
elem.relSwitchCode = '';
elem.isSwitchSection = false;
models.push(elem);
}
});
this.$emit('delMapModel', remove);
this.$emit('addOrUpdateMapModel', models);
}
},
// 一键生成道岔区段
createSwitchSection(list) {
const models = [];
// this.removeSwitchSection();
if (list && list.length && this.sectionList && this.sectionList.length) {
list.forEach(elem => {
const sectiona = this.$store.getters['map/getDeviceByCode'](elem.sectionACode);
const sectionb = this.$store.getters['map/getDeviceByCode'](elem.sectionBCode);
const sectionc = this.$store.getters['map/getDeviceByCode'](elem.sectionCCode);
if (sectiona && sectionb && sectionc) {
const uid = getUID('Section');
let point = {
x: sectiona.points[sectiona.points.length - 1].x,
y: sectiona.points[sectiona.points.length - 1].y
};
if (JSON.stringify(sectiona.points[0]) === JSON.stringify(sectionb.points[sectionb.points.length - 1])) {
point = { x: sectiona.points[0].x, y: sectiona.points[0].y };
}
models.push({
_type: 'Section',
code: uid,
name: sectiona.name || sectionb.name || sectionc.name,
type: '03',
axleShow: false,
namePosition: point,
isStandTrack: false,
kmRangeRight: '',
kmRangeLeft: '',
region: '',
standTrackName: '',
standTrackNamePosition: { x: 0, y: 0 },
isReentryTrack: false,
reentryTrackName: '',
reentryTrackNamePosition: { x: 0, y: 0 },
isTransferTrack: false,
transferTrackName: '',
transferTrackNamePosition: { x: 0, y: 0 },
isSegmentation: false,
segmentationPosition: { x: 0, y: 0 },
isSwitchSection: true,
relSwitchCode: elem.code,
points: [{ x: 0, y: 0 }, { x: 0, y: 0 }],
logicSectionNum: [0],
logicSectionShow: false,
sepTypeLeft: '00',
offsetLeft: 0,
sepTypeRight: '00',
offsetRight: 0,
parentCode: '',
stationCode: sectiona.stationCode,
trainPosType: sectiona.trainPosType,
isCurve: false,
linkCode: '0'
});
sectiona.parentCode = uid;
sectiona.relSwitchCode = elem.code;
sectiona.isSwitchSection = true;
sectionb.parentCode = uid;
sectionb.relSwitchCode = elem.code;
sectionb.isSwitchSection = true;
sectionc.parentCode = uid;
sectionc.relSwitchCode = elem.code;
sectionc.isSwitchSection = true;
models.push(sectiona);
models.push(sectionb);
models.push(sectionc);
}
});
}
this.$emit('addOrUpdateMapModel', models);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.flex_box{
display: flex;
justify-content: center;
}
.box-card {
width: calc(100% - 80px);
margin: 20px auto 0;
padding: 0 20px;
.text {
font-size: 14px;
}
.item {
padding: 6px 0;
}
}
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

272
src/views/map/mapdraft/mapoperate/text.vue Normal file
View File

@ -0,0 +1,272 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="110px" :model="addModel" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.textContent')" prop="content">
<el-input v-model="addModel.content" :placeholder="$t('map.pleaseEnter')" class="input-with-select">
<el-select slot="prepend" v-model="addModel.prepend" :placeholder="$t('map.pleaseSelect')">
<el-option :label="$t('map.horizontal')" value="H" />
<el-option :label="$t('map.vertical')" value="V" />
</el-select>
</el-input>
</el-form-item>
<div class="coordinate">
<span class="title" style="width: 110px">{{ $t('map.textPoints') }}</span>
<el-form-item
label="x:"
prop="position.x"
style="display: table; float: left; margin-right: 20px;"
label-width="25px"
>
<el-input-number v-model="addModel.position.x" label="x:" />
</el-form-item>
<el-form-item
label="y:"
prop="position.y"
style="display: table; float: left;"
label-width="25px"
>
<el-input-number v-model="addModel.position.y" label="y:" />
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
skins: [],
editModel: {
code: '',
prepend: 'H',
content: '',
font: '',
fontColor: '',
position: {
x: 0,
y: 0
}
},
addModel: {
prepend: 'H',
content: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
],
content: [
{ required: true, message: this.$t('rules.pleaseEnterContent'), trigger: 'blur' }
],
font: [
{ required: true, message: this.$t('rules.textFont'), trigger: 'blur' }
],
fontColor: [
{ required: true, message: this.$t('rules.textFontColor'), trigger: 'blur' }
]
},
makeRules: {
code: [
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
],
content: [
{ required: true, message: this.$t('rules.pleaseEnterContent'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'textList',
'stationList',
'skinCode'
]),
form() {
const form = {
labelWidth: '130px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.textCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.textList, change: true, deviceChange: this.deviceChange },
{ prop: 'content', label: this.$t('map.textContent'), type: 'fontContent', content: 'content', prepend: 'prepend', placeholder: this.$t('map.pleaseEnter') },
{ prop: 'font', label: this.$t('map.textFont'), type: 'font', placeholder: this.$t('map.font') },
{ prop: 'fontColor', label: this.$t('map.textFontColor'), type: 'color' },
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
[this.editModel.prepend, this.editModel.content] = selected.content.split('::');
}
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
const model = {
_type: 'Text',
code: getUID('Text'),
font: '14px consolas',
fontColor: '#FFFFFF',
content: `${this.addModel.prepend}::${this.addModel.content}`,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Text'}, this.editModel);
data.content = `${this.editModel.prepend}::${this.editModel.content}`;
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
margin-right: 7px;
}
}
/deep/ {
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
}
</style>

153
src/views/map/mapdraft/mapoperate/train/create.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<el-dialog
v-dialogDrag
:title="$t('map.createBatch')"
:visible.sync="visible"
width="400px"
:before-close="doClose"
>
<el-radio-group v-model="mode" class="radio-mode">
<el-radio label="01">{{ $t('map.create') }}</el-radio>
<el-radio label="02">{{ $t('map.createBatch') }}</el-radio>
</el-radio-group>
<el-form ref="form" :model="addModel" label-width="90px" size="mini" :rules="rules">
<el-form-item v-if="mode == '01'" :label="$t('map.groupNumber')" prop="groupNumber">
<el-input v-model="addModel.groupNumber" />
</el-form-item>
<el-form-item v-if="mode == '02'" :label="$t('map.groupNumberInterval')" prop="range">
<el-input-number v-model="addModel.range.beg" :min="1" :max="999" />
<el-input-number v-model="addModel.range.end" :min="1" :max="999" />
</el-form-item>
<el-form-item :label="$t('map.modelCode')" prop="modelCode">
<el-select v-model="addModel.modelCode" filterable>
<el-option
v-for="item in trainModelList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
<el-button-group>
<el-button type="primary" size="small" @click="newTrainMode">{{ $t('map.add') }}</el-button>
<el-button type="primary" size="small" @click="uptTrainMode(addModel.modelCode)">{{ $t('map.updata') }}
</el-button>
<el-button type="primary" size="small" @click="delTrainMode(addModel.modelCode)">{{ $t('map.deleteObj') }}
</el-button>
</el-button-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ $t('map.cancel') }}</el-button>
<el-button type="primary" @click="handleConfirm">{{ $t('map.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { getUID } from '@/jmap/utils/Uid';
export default {
props: {
trainModelList: {
type: Array,
required: true
}
},
data() {
return {
mode: '01',
visible: false,
addModel: {
range: {
beg: 1,
end: 1
},
groupNumber: '',
modelCode: ''
},
errorTip: this.$t('tip.selectValidInterval')
};
},
computed: {
rules() {
return {
range: [
{
validator(rule, range, callback) {
if (Number.isInteger(range.beg) &&
Number.isInteger(range.end) &&
range.beg > 0 &&
range.end >= range.beg) {
callback();
} else {
callback(new Error(this.errorTip));
}
},
trigger: 'blur'
}
],
modelCode: [
{ required: true, message: this.$t('rules.selectTrainType'), trigger: 'change' }
]
};
}
},
methods: {
doShow() {
this.visible = true;
},
doClose() {
this.visible = false;
},
newTrainMode() {
this.$emit('dispatch', { callback: 'newTrainMode', params: null});
},
uptTrainMode(code) {
this.$emit('dispatch', { callback: 'uptTrainMode', params: code});
},
delTrainMode(code) {
this.addModel.modelCode = '';
this.$emit('dispatch', { callback: 'delTrainMode', params: code});
},
handleConfirm() {
this.$refs['form'].validate((valid) => {
if (valid) {
const list = [];
switch (this.mode) {
case '01':
list.push({
_type: 'Train',
code: getUID('Train'),
modelCode: this.addModel.modelCode,
groupNumber: this.addModel.groupNumber
});
break;
case '02':
for (var num = this.addModel.range.beg; num <= this.addModel.range.end; num++) {
list.push({
_type: 'Train',
code: getUID('Train'),
modelCode: this.addModel.modelCode,
groupNumber: ('000' + num).slice(-3)
});
}
break;
}
this.$emit('dispatch', { callback: 'create', params: list});
this.doClose();
}
});
}
}
};
</script>
<style scoped>
.radio-mode {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
</style>

213
src/views/map/mapdraft/mapoperate/train/index.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.operation')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-table :data="trainList.filter(data => !search || data.groupNumber.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
<el-table-column :label="$t('map.trainNumber')" prop="groupNumber" />
<el-table-column :label="$t('map.codeC')" prop="code" />
<el-table-column align="right">
<template slot="header">
<el-input v-model="search" size="mini" :placeholder="$t('map.pleaseSelect')" />
</template>
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('map.deleteObj') }}</el-button>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="danger" size="small" @click="handleClear">{{ $t('map.clear') }}</el-button>
<el-button type="primary" size="small" @click="handleCreate">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<train-model ref="trainMode" />
<create ref="create" :train-model-list="trainModelList" @dispatch="dispatch" />
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import TrainModel from './trainmodel';
import Create from './create';
export default {
name: 'TrainDraft',
components: {
TrainModel,
Create
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'second',
mapData: null,
editModel: {
code: '',
groupNumber: '',
modelCode: ''
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'change' }
],
groupNumber: [
{ required: true, message: this.$t('rules.pleaseEnterGroupNumber'), trigger: 'blur' }
],
modelCode: [
{ required: true, message: this.$t('rules.selectTrainType'), trigger: 'change' }
]
},
search: ''
};
},
computed: {
...mapGetters('map', [
'trainList',
'trainModelList',
'skinCode'
])
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
},
$route() {
// this.activeName = 'first';
}
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Train'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.modelCode = selected.modelCode;
this.editModel.groupNumber = selected.groupNumber;
// this.activeName = 'first';
} else {
// this.activeName = 'second';
}
},
create(list) {
this.$emit('addOrUpdateMapModel', list);
},
// 修改对象
edit(elem) {
// this.$refs['form'].validate((valid) => {
// if (valid) {
// this.$emit('addOrUpdateMapModel', this.buildEditModel());
// }
// });
},
buildEditModel() {
// const model = {
// _type: 'Train',
// code: this.editModel.code,
// safeDistance: this.editModel.safeDistance,
// maxSafeDistance: this.editModel.maxSafeDistance,
// modelCode: this.editModel.modelCode,
// groupNumber: this.editModel.groupNumber
// };
// return model;
},
newTrainMode() {
if (Object.keys(this.$store.state.map.map || {}).length) {
this.$refs.trainMode.doShow({}, 'ADD');
} else {
this.$messageBox(this.$t('tip.selectMap'));
}
},
uptTrainMode(code) {
const index = this.trainModelList.findIndex(elem => { return elem.code == code; });
if (index >= 0) {
this.$refs.trainMode.doShow(this.trainModelList[index], 'UPT');
} else {
this.$messageBox(this.$t('tip.selectTrainType'));
}
},
delTrainMode(code) {
this.$confirm(this.$t('map.wellDelTrianModel'), this.$t('global.tips'), {
confirmButtonText: this.$t('global.confirm'),
cancelButtonText: this.$t('global.cancel'),
type: 'warning'
}).then(() => {
if (code) {
const model = { code };
this.$refs.trainMode.operateTrainModel({ model, type: 'DEL' });
}
});
},
handleEdit(index, row) {
},
handleDelete(index, row) {
const train = this.$store.getters['map/getDeviceByCode'](row.code);
if (train) {
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
this.$emit('delMapModel', train);
this.deviceSelect();
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});
}
},
handleCreate() {
this.$refs.create.doShow();
},
handleClear() {
this.$confirm(this.$t('tip.confirmBatchDelete'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
this.$emit('delMapModel', this.trainList);
this.deviceSelect();
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});
},
dispatch(opts) {
this[opts.callback](opts.params);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.button_box{
// width: 100%;
// background: #f0f0f0;
// overflow: hidden;
width: 100%;
background: #ffffff;
overflow: hidden;
border-top: 1px #f3f1f1 solid;
box-shadow: 4px 7px 10px #565656;
border-radius: 0;
border-bottom: 1px transparent solid;
}
</style>

0
src/views/map/mapdraft/mapedit/mapoperate/train/trainmodel.vue → src/views/map/mapdraft/mapoperate/train/trainmodel.vue
View File

306
src/views/map/mapdraft/mapoperate/trainwindow.vue Normal file
View File

@ -0,0 +1,306 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.batchOperation')" name="three">
<div style="height: 100%">
<el-scrollbar wrap-class="scrollbar-wrapper">
<!-- style="display: flex;justify-content: center;" -->
<div style="text-align:center;">
<el-button type="danger" size="big" @click="removeTrainWindow">{{ $t('map.deleteTrainWindow') }}</el-button>
<el-button type="primary" size="big" style="margin-top:10px" @click="createTrainWindow">{{ $t('map.createTrainWindow') }}</el-button>
</div>
</el-scrollbar>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import JTriangle from '@/jmap/utils/JTriangle';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'TrainWindowDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
point: {
x: 0,
y: 0
},
width: 0,
height: 0,
sectionCode: ''
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseReSelectDevice'), trigger: 'blur' }
],
'point.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
],
'point.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.trainWindowWidth'), trigger: 'blur' }
],
height: [
{ required: true, message: this.$t('rules.trainWindowHeight'), trigger: 'blur' }
],
sectionCode: [
{ required: true, message: this.$t('rules.trainWindowSectionCode'), trigger: 'change' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainWindowList'
]),
filterSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return !(elem.type == '03' && elem.parentCode); });
}
return list;
},
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.trainWindowCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.trainWindowList, change: true, deviceChange: this.deviceChange },
{ prop: 'width', label: this.$t('map.trainWindowWidth'), type: 'number', min: 0, placeholder: 'px' },
{ prop: 'height', label: this.$t('map.trainWindowHeight'), type: 'number', min: 0, placeholder: 'px' },
{ prop: 'point', label: this.$t('map.trainWindowPoints'), type: 'coordinate', width: '110px', children: [
{ prop: 'point.x', firstLevel: 'point', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
{ prop: 'point.y', firstLevel: 'point', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'sectionCode', label: this.$t('map.trainWindowSectionCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.filterSectionList }
]
}
}
};
return form;
},
style() {
return this.$jlmap.style;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
methods: {
filterSections(query, item) {
return item.pinyin.indexOf(query) > -1;
},
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
this.$refs.form.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
createModel(opts) {
const model = {
_type: 'TrainWindow',
code: getUID('TrainWindow'),
trainWindowShow: true,
point: {}
};
if (opts) {
var width = this.style.trainWindowWidth;
var height = this.style.trainWindowHeight;
const section = opts.section;
if (section) {
if (section.type !== '03' && opts.triangle) {
model.point = opts.triangle.middlePoint();
if (opts.triangle.getCosRate() == 1 && opts.triangle.absx < width) {
width = opts.triangle.absx;
}
if (opts.triangle.getCosRate() !== 0 && opts.triangle.getCosRate() !== 1) {
model.point.x = section.points[0].x;
model.point.y = section.points[section.points.length - 1].y;
}
} else {
model.point = {
x: section.namePosition.x,
y: section.namePosition.y
};
}
const distance = (this.style.trainDistance + this.style.trainConflictR * 2 + height);
let offsetx = 0;
let offsety = 0;
if (opts.triangle) {
if (opts.triangle.getCosRate() == 1 || opts.triangle.getCosRate() == 0) {
offsetx = distance * opts.triangle.getSinRate();
offsety = distance * opts.triangle.getCosRate();
} else {
offsetx = distance;
offsety = distance;
}
} else {
offsetx = 0;
offsety = distance;
}
if (section.trainPosType == '01') {
model.point.y = model.point.y - height - offsety;
model.point.x = model.point.x - offsetx;
} else {
model.point.x = model.point.x + offsetx;
model.point.y = model.point.y + offsety;
}
model.sectionCode = section.code;
model.height = height;
model.width = width;
}
}
return model;
},
// 一键删除车次窗
removeTrainWindow() {
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
const remove = [];
if (this.trainWindowList && this.trainWindowList.length) {
this.trainWindowList.forEach(elem => {
remove.push({
_type: 'TrainWindow',
code: elem.code
});
});
this.$emit('delMapModel', remove);
}
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});
},
// 一键创建车次窗
createTrainWindow() {
const models = [];
const collection = this.sectionList;
const remove = []; // 清空所有车次窗
if (this.trainWindowList && this.trainWindowList.length) {
this.trainWindowList.forEach(elem => {
remove.push({
_type: 'TrainWindow',
code: elem.code
});
});
this.$emit('delMapModel', remove);
}
if (collection && collection.length) {
collection.forEach(elem => {
if (elem.type !== '03' && !elem.isSwitchSection && (
elem.logicSectionNum.length == 0 || elem.logicSectionNum.length == 1 && elem.logicSectionNum[0] == 0)) {
const triangle = new JTriangle(elem.points[0], elem.points[elem.points.length - 1]);
models.push(this.createModel({
triangle: triangle,
section: elem
}));
} else if (elem.type === '03' && elem.isSwitchSection) {
models.push(this.createModel({
section: elem
}));
}
});
}
this.$emit('addOrUpdateMapModel', models);
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'TrainWindow'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
</style>

253
src/views/map/mapdraft/mapoperate/zcControl.vue Normal file
View File

@ -0,0 +1,253 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-data ref="make" :form="formMake" :form-model="addModel" :rules="createRules" />
</el-scrollbar>
</div>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
import ConfigData from './config/data';
import { deepAssign } from '@/utils/index';
export default {
name: 'ZcControlDraft',
components: {
ConfigList,
ConfigData
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
mapData: null,
editModel: {
code: '',
name: '',
visible: '',
position: {
x: 0,
y: 0
}
},
addModel: {
code: '',
name: '',
visible: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
visible: [
{ required: true, message: this.$t('rules.visible'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'sectionList',
'trainModelList',
'zcList',
'skinCode'
]),
form() {
const form = {
labelWidth: '150px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.zcZoneControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.zcList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'visible', label: this.$t('map.showZc'), type: 'checkboxx' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: []
}
}
};
return form;
},
formMake() {
const form = {
labelWidth: '150px',
items: [
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
] }
]
};
return form;
},
createRules: function () {
return {
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
]
};
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('ZcControl');
const model = {
_type: 'ZcControl',
code: uid,
visible: true,
name: this.addModel.name,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'ZcControl'}, this.editModel);
this.$emit('addOrUpdateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

250
src/views/mapsystem/common/index.vue
View File

@ -15,137 +15,137 @@ import JlmapVisual from '@/views/jlmap/index';
import TrainingTips from '@/views/mapsystem/plugin/trainingtip'; import TrainingTips from '@/views/mapsystem/plugin/trainingtip';
export default { export default {
name: 'LessonCanvas', name: 'LessonCanvas',
components: { components: {
JlmapVisual, JlmapVisual,
TrainingTips TrainingTips
}, },
data() { data() {
return { return {
selected: null, selected: null,
menus: null, menus: null,
point: { point: {
x: 0, x: 0,
y: 0 y: 0
} }
}; };
}, },
computed: { computed: {
...mapGetters('menuOperation', [ ...mapGetters('menuOperation', [
'buttonOperation' 'buttonOperation'
]), ]),
Signal() { Signal() {
return OperationEvent.Signal; return OperationEvent.Signal;
}, },
isScreen() { isScreen() {
return this.$route.params.mode === 'dp'; return this.$route.params.mode === 'dp';
}, },
group() { group() {
return this.$route.query.group; return this.$route.query.group;
} }
}, },
watch: { watch: {
'$store.state.map.mapDataLoadedCount': function () { '$store.state.map.mapDataLoadedCount': function () {
const skinCode = this.$jlmap.skinCode; const skinCode = this.$jlmap.skinCode;
if (skinCode) { if (skinCode) {
this.menus = this.$theme.loadMenuComponent(skinCode); this.menus = this.$theme.loadMenuComponent(skinCode);
} }
} }
}, },
beforeDestroy() { beforeDestroy() {
if (this.autoSaveTask) { if (this.autoSaveTask) {
clearInterval(this.autoSaveTask); clearInterval(this.autoSaveTask);
} }
}, },
methods: { methods: {
// 获取设备数据 // 获取设备数据
getDeviceByEm(em) { getDeviceByEm(em) {
var device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null; var device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
if (device) { if (device) {
device._viewVal = em.val; device._viewVal = em.val;
} }
return device; return device;
}, },
// 根据皮肤类型转换激活的菜单类型 // 根据皮肤类型转换激活的菜单类型
getSelectedBySkinCode(device) { getSelectedBySkinCode(device) {
const switchSectionIsWitchSkinCodeList = ['03']; const switchSectionIsWitchSkinCodeList = ['03'];
const skinCode = this.$store.getters['map/skinCode']; const skinCode = this.$store.getters['map/skinCode'];
if (switchSectionIsWitchSkinCodeList.includes(skinCode) && device._type == deviceType.Section) { if (switchSectionIsWitchSkinCodeList.includes(skinCode) && device._type == deviceType.Section) {
const section = this.$store.getters['map/getDeviceByCode'](device._code); const section = this.$store.getters['map/getDeviceByCode'](device._code);
if (section) { if (section) {
device = this.$store.getters['map/getDeviceByCode'](section.relSwitchCode); device = this.$store.getters['map/getDeviceByCode'](section.relSwitchCode);
} }
} }
return device; return device;
}, },
clickEvent(em) { clickEvent(em) {
var device = { _type: em.deviceType, _code: em.deviceCode }; var device = { _type: em.deviceType, _code: em.deviceCode };
var CanClickDeviceList = [ var CanClickDeviceList = [
deviceType.Switch, deviceType.Switch,
deviceType.Signal, deviceType.Signal,
deviceType.StationStand deviceType.StationStand
]; ];
if (em.deviceCode) { if (em.deviceCode) {
device = this.getDeviceByEm(em); device = this.getDeviceByEm(em);
if (CanClickDeviceList.includes(em.deviceType)) { if (CanClickDeviceList.includes(em.deviceType)) {
try { try {
letfMouseSelectDevice(em.deviceCode, this.group); letfMouseSelectDevice(em.deviceCode, this.group);
} catch (error) { } catch (error) {
console.log('send left mouse click error.'); console.log('send left mouse click error.');
} }
} }
} }
this.selected = device; this.selected = device;
this.$store.dispatch('menuOperation/setSelected', device); this.$store.dispatch('menuOperation/setSelected', device);
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}, },
contextmenu(em) { contextmenu(em) {
var menu = null; var menu = null;
var device = null; var device = null;
this.point = { x: em.clientX, y: em.clientY }; this.point = { x: em.clientX, y: em.clientY };
if (em.subType === 'TrainWindow') { if (em.subType === 'TrainWindow') {
device = { _type: deviceType.Train, code: em.deviceCode }; device = { _type: deviceType.Train, code: em.deviceCode };
this.$store.dispatch('map/setTrainWindowShow', true); this.$store.dispatch('map/setTrainWindowShow', true);
} else if (em.deviceCode && !this.isScreen) { } else if (em.deviceCode && !this.isScreen) {
device = this.getDeviceByEm(em); device = this.getDeviceByEm(em);
} }
if (device) { if (device) {
this.selected = device = this.getSelectedBySkinCode(device); this.selected = device = this.getSelectedBySkinCode(device);
if (!this.buttonOperation) { if (!this.buttonOperation) {
this.$store.dispatch('menuOperation/setSelected', device); this.$store.dispatch('menuOperation/setSelected', device);
if (!this.checkShouldPop(device)) { if (!this.checkShouldPop(device)) {
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: null }); this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: null });
} else { } else {
menu = getDeviceMenuByDeviceType(device._type); menu = getDeviceMenuByDeviceType(device._type);
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu }); this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
} }
} }
} else { } else {
menu = getDeviceMenuByDeviceType('Cancel'); menu = getDeviceMenuByDeviceType('Cancel');
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu }); this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
} }
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}, },
checkShouldPop(device) { checkShouldPop(device) {
const skinCode = this.$store.getters['map/skinCode']; const skinCode = this.$store.getters['map/skinCode'];
if (device._type === 'Signal') { if (device._type === 'Signal') {
return device._viewVal === '3'; return device._viewVal === '3';
} else if (device._type === 'StationControl' && skinCode == '01') { // 中控模式显示范围 } else if (device._type === 'StationControl' && skinCode == '01') { // 中控模式显示范围
return device._viewVal === '1'; return device._viewVal === '1';
} else { } else {
return true; return true;
} }
}, },
mapViewLoaded(loading) { mapViewLoaded(loading) {
this.$refs.jlmapVisual && this.$refs.jlmapVisual.mapViewLoaded(loading); this.$refs.jlmapVisual && this.$refs.jlmapVisual.mapViewLoaded(loading);
} }
} }
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>