desc: 调整地图绘制高度问题
This commit is contained in:
zyy
parent
de1b8d579e
commit
10565fdd6b
@ -24,7 +24,7 @@ import SkinCodeDraft from '@/views/system/skinCode/draft';
|
||||
import MapProduct from '@/views/system/product/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 RunplanView from '@/views/map/runplan/chart';
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ import { postBuildMapImport, listMap } from '@/api/jmap/mapdraft';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { removeSessionStorage } from '@/utils/auth';
|
||||
import localStore from 'storejs';
|
||||
import MapOperateMenu from '@/views/map/mapdraft/mapmanage/operateMenu';
|
||||
import MapOperateMenu from './mapmanage/operateMenu';
|
||||
|
||||
export default {
|
||||
name: 'UserMapList',
|
||||
|
||||
@ -18,7 +18,7 @@ import drapLeft from '@/views/components/drapLeft/index';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import localStore from 'storejs';
|
||||
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
||||
import MapCreate from '@/views/map/mapdraft/mapmanage/create';
|
||||
import MapCreate from './mapmanage/create';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
|
||||
export default {
|
||||
|
||||
303
src/views/designUser/mapmanage/create.vue
Normal file
303
src/views/designUser/mapmanage/create.vue
Normal 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
230
src/views/designUser/mapmanage/edit.vue
Normal 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>
|
||||
@ -124,12 +124,12 @@ export default {
|
||||
this.$refs.edit.show('editCode');
|
||||
}
|
||||
},
|
||||
updateObjAxis() {
|
||||
this.doClose();
|
||||
if (this.$refs && this.$refs.axisEdit) {
|
||||
this.$refs.axisEdit.show('editPoint');
|
||||
}
|
||||
},
|
||||
// updateObjAxis() {
|
||||
// this.doClose();
|
||||
// if (this.$refs && this.$refs.axisEdit) {
|
||||
// this.$refs.axisEdit.show('editPoint');
|
||||
// }
|
||||
// },
|
||||
saveAs() {
|
||||
this.doClose();
|
||||
if (this.$refs && this.$refs.saveAs) {
|
||||
108
src/views/designUser/mapmanage/publish.vue
Normal file
108
src/views/designUser/mapmanage/publish.vue
Normal 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
74
src/views/designUser/mapmanage/saveAs.vue
Normal 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>
|
||||
@ -288,13 +288,13 @@ export default {
|
||||
}
|
||||
|
||||
.zoom-view {
|
||||
// position: fixed;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
padding-top: 5px;
|
||||
height: 42px;
|
||||
border-bottom: 1px #f3f3f3 solid;
|
||||
border-right: 1px #f3f3f3 solid;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
|
||||
210
src/views/map/mapdraft/dataRelation/automaticoperate/detail.vue
Normal file
210
src/views/map/mapdraft/dataRelation/automaticoperate/detail.vue
Normal 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>
|
||||
@ -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>
|
||||
190
src/views/map/mapdraft/dataRelation/automaticoperate/route.vue
Normal file
190
src/views/map/mapdraft/dataRelation/automaticoperate/route.vue
Normal 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
234
src/views/map/mapdraft/dataRelation/index.vue
Normal 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
198
src/views/map/mapdraft/dataRelation/pathoperate/detail.vue
Normal 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
84
src/views/map/mapdraft/dataRelation/pathoperate/index.vue
Normal 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
200
src/views/map/mapdraft/dataRelation/pathoperate/pathRoute.vue
Normal 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
316
src/views/map/mapdraft/dataRelation/pathoperate/route.vue
Normal 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
598
src/views/map/mapdraft/dataRelation/routeoperate/detail.vue
Normal 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
85
src/views/map/mapdraft/dataRelation/routeoperate/index.vue
Normal 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>
|
||||
103
src/views/map/mapdraft/dataRelation/routeoperate/related.vue
Normal file
103
src/views/map/mapdraft/dataRelation/routeoperate/related.vue
Normal 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>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :style="{ height: cardHeight +'px' }">
|
||||
<div style="height: 100%;">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-form ref="form" :model="addModel" :rules="rules" label-width="190px" size="mini">
|
||||
<el-form-item :label="$t('map.routeName')" prop="name">
|
||||
@ -333,10 +333,6 @@ export default {
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
cardHeight: {
|
||||
type: Number || String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
251
src/views/map/mapdraft/dataRelation/routingoperate/detail.vue
Normal file
251
src/views/map/mapdraft/dataRelation/routingoperate/detail.vue
Normal 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
84
src/views/map/mapdraft/dataRelation/routingoperate/index.vue
Normal 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>
|
||||
377
src/views/map/mapdraft/dataRelation/routingoperate/route.vue
Normal file
377
src/views/map/mapdraft/dataRelation/routingoperate/route.vue
Normal 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
153
src/views/map/mapdraft/dataRelation/switchoperate/detail.vue
Normal 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
84
src/views/map/mapdraft/dataRelation/switchoperate/index.vue
Normal 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
192
src/views/map/mapdraft/dataRelation/switchoperate/route.vue
Normal 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>
|
||||
@ -4,12 +4,10 @@
|
||||
<div class="map-view">
|
||||
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
|
||||
</div>
|
||||
<!-- <map-create ref="mapCreate" :skin-code="skinCode" @refresh="refresh" @editmap="handleNodeClick" /> -->
|
||||
<div class="map-draft">
|
||||
<div v-show="viewDraft === 'draft'">
|
||||
<div v-show="viewDraft === 'draft'" class="box">
|
||||
<map-operate
|
||||
ref="mapOperate"
|
||||
:card-height="cardHeight"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
:map-saveing="mapSaveing"
|
||||
@ -24,10 +22,9 @@
|
||||
@showMap="showMap"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="viewDraft != 'draft'">
|
||||
<div v-show="viewDraft != 'draft'" class="box">
|
||||
<data-relation
|
||||
ref="dataRelation"
|
||||
:card-height="cardHeight"
|
||||
:map-info="mapInfo"
|
||||
:selected="selected"
|
||||
@selectView="selectViewDraft"
|
||||
@ -52,7 +49,6 @@ import { checkLoginLine } from '@/api/login';
|
||||
import JlmapVisual from '@/views/jlmap/index';
|
||||
import MapOperate from './mapoperate/index';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
// import MapCreate from '../mapmanage/create';
|
||||
|
||||
import ConfigMap from './configMap';
|
||||
|
||||
@ -65,7 +61,6 @@ export default {
|
||||
MapOperate,
|
||||
DataRelation,
|
||||
ConfigMap
|
||||
// MapCreate,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -79,11 +74,6 @@ export default {
|
||||
timeDemon: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
cardHeight() {
|
||||
return this.$store.state.app.height - 195 - 30;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||
this.initAutoSaveTask();
|
||||
@ -352,6 +342,10 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
@ -366,7 +360,7 @@ export default {
|
||||
.map-draft {
|
||||
float: right;
|
||||
width: 520px;
|
||||
|
||||
height: 100%;
|
||||
// /deep/ .el-scrollbar__view {
|
||||
// width: 510px !important;
|
||||
// height: calc(100% - 40px);
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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
276
src/views/map/mapdraft/mapoperate/ImageControl.vue
Normal 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
285
src/views/map/mapdraft/mapoperate/buttonDraft.vue
Normal 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>
|
||||
255
src/views/map/mapdraft/mapoperate/counter.vue
Normal file
255
src/views/map/mapdraft/mapoperate/counter.vue
Normal 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
237
src/views/map/mapdraft/mapoperate/delayunlock.vue
Normal 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>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="map-control">
|
||||
<el-card type="border-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="border-card">
|
||||
<div class="clearfix">
|
||||
<span>
|
||||
{{ $t('map.mapName') }}
|
||||
<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>
|
||||
</div>
|
||||
<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
|
||||
ref="Link"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="Section"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@ -34,20 +32,18 @@
|
||||
@fieldSelect="fieldSelect"
|
||||
/>
|
||||
</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
|
||||
ref="Switch"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="Signal"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@ -55,10 +51,9 @@
|
||||
@signalSectionCode="selectEnabledTab"
|
||||
/>
|
||||
</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
|
||||
ref="Station"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@ -66,130 +61,117 @@
|
||||
@stationSectionCode="stationEnabledTab"
|
||||
/>
|
||||
</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
|
||||
ref="StationControl"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="StationStand"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="ZcControl"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="LimitControl"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="LcControl"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="Counter"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="DelayUnlock"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="Train"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="TrainWindow"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="Line"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="Text"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="ImageControl"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</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
|
||||
ref="ImageControl"
|
||||
:card-height="cardHeights"
|
||||
:selected="selected"
|
||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||
@delMapModel="delMapModel"
|
||||
@ -197,7 +179,7 @@
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -257,10 +239,6 @@ export default {
|
||||
type: Object,
|
||||
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
|
||||
},
|
||||
cardHeight: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
mapSaveing: [Boolean]
|
||||
},
|
||||
data() {
|
||||
@ -284,8 +262,7 @@ export default {
|
||||
show: {
|
||||
mapEditShow: false,
|
||||
mapPaintShow: true
|
||||
},
|
||||
cardHeights: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -293,13 +270,7 @@ export default {
|
||||
return this.mapInfo && this.mapInfo.id;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cardHeight: function (val) {
|
||||
this.resizeCardHeight();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resizeCardHeight();
|
||||
this.initPage();
|
||||
},
|
||||
methods: {
|
||||
@ -323,10 +294,6 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
resizeCardHeight() {
|
||||
var padding = 0;
|
||||
this.cardHeights = this.cardHeight - padding - 74;
|
||||
},
|
||||
handleSelectControlPage(device) {
|
||||
const type = device._type;
|
||||
if (this.stationType) {
|
||||
@ -384,6 +351,10 @@ export default {
|
||||
.map-control {
|
||||
float: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.border-card{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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{
|
||||
// width: 100%;
|
||||
// background: #f0f0f0;
|
||||
// overflow: hidden;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
@ -431,6 +410,9 @@ export default {
|
||||
.mapEdit .el-tabs__active-bar{
|
||||
background: transparent;
|
||||
}
|
||||
.mapEdit .el-tabs__content {
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
.card .el-tabs__nav .el-tabs__item.is-active {
|
||||
border-bottom: 2px solid #E4E7ED;
|
||||
@ -456,4 +438,27 @@ export default {
|
||||
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>
|
||||
255
src/views/map/mapdraft/mapoperate/lcControl.vue
Normal file
255
src/views/map/mapdraft/mapoperate/lcControl.vue
Normal 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
246
src/views/map/mapdraft/mapoperate/limitControl.vue
Normal 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
310
src/views/map/mapdraft/mapoperate/line.vue
Normal 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
549
src/views/map/mapdraft/mapoperate/link.vue
Normal 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
1205
src/views/map/mapdraft/mapoperate/section.vue
Normal file
File diff suppressed because it is too large
Load Diff
430
src/views/map/mapdraft/mapoperate/signal.vue
Normal file
430
src/views/map/mapdraft/mapoperate/signal.vue
Normal 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
284
src/views/map/mapdraft/mapoperate/station.vue
Normal 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
254
src/views/map/mapdraft/mapoperate/stationcontrol.vue
Normal 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
308
src/views/map/mapdraft/mapoperate/stationstand.vue
Normal 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
519
src/views/map/mapdraft/mapoperate/switch.vue
Normal 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
272
src/views/map/mapdraft/mapoperate/text.vue
Normal 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
153
src/views/map/mapdraft/mapoperate/train/create.vue
Normal 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
213
src/views/map/mapdraft/mapoperate/train/index.vue
Normal 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>
|
||||
306
src/views/map/mapdraft/mapoperate/trainwindow.vue
Normal file
306
src/views/map/mapdraft/mapoperate/trainwindow.vue
Normal 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
253
src/views/map/mapdraft/mapoperate/zcControl.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user