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 MapProduct from '@/views/system/product/index';
|
||||||
|
|
||||||
// import Mapdraft from '@/views/map/mapdraft/index';
|
// import Mapdraft from '@/views/map/mapdraft/index';
|
||||||
import Mapedit from '@/views/map/mapdraft/mapedit/index';
|
import Mapedit from '@/views/map/mapdraft/index';
|
||||||
// import Runplan from '@/views/map/runplan/index';
|
// import Runplan from '@/views/map/runplan/index';
|
||||||
import RunplanView from '@/views/map/runplan/chart';
|
import RunplanView from '@/views/map/runplan/chart';
|
||||||
|
|
||||||
|
|||||||
@ -37,7 +37,7 @@ import { postBuildMapImport, listMap } from '@/api/jmap/mapdraft';
|
|||||||
import { UrlConfig } from '@/router/index';
|
import { UrlConfig } from '@/router/index';
|
||||||
import { removeSessionStorage } from '@/utils/auth';
|
import { removeSessionStorage } from '@/utils/auth';
|
||||||
import localStore from 'storejs';
|
import localStore from 'storejs';
|
||||||
import MapOperateMenu from '@/views/map/mapdraft/mapmanage/operateMenu';
|
import MapOperateMenu from './mapmanage/operateMenu';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UserMapList',
|
name: 'UserMapList',
|
||||||
|
|||||||
@ -18,7 +18,7 @@ import drapLeft from '@/views/components/drapLeft/index';
|
|||||||
import { launchFullscreen } from '@/utils/screen';
|
import { launchFullscreen } from '@/utils/screen';
|
||||||
import localStore from 'storejs';
|
import localStore from 'storejs';
|
||||||
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
||||||
import MapCreate from '@/views/map/mapdraft/mapmanage/create';
|
import MapCreate from './mapmanage/create';
|
||||||
import { UrlConfig } from '@/router/index';
|
import { UrlConfig } from '@/router/index';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
303
src/views/designUser/mapmanage/create.vue
Normal file
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');
|
this.$refs.edit.show('editCode');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
updateObjAxis() {
|
// updateObjAxis() {
|
||||||
this.doClose();
|
// this.doClose();
|
||||||
if (this.$refs && this.$refs.axisEdit) {
|
// if (this.$refs && this.$refs.axisEdit) {
|
||||||
this.$refs.axisEdit.show('editPoint');
|
// this.$refs.axisEdit.show('editPoint');
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
saveAs() {
|
saveAs() {
|
||||||
this.doClose();
|
this.doClose();
|
||||||
if (this.$refs && this.$refs.saveAs) {
|
if (this.$refs && this.$refs.saveAs) {
|
||||||
108
src/views/designUser/mapmanage/publish.vue
Normal file
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>
|
||||||
@ -247,9 +247,9 @@ export default {
|
|||||||
mapViewLoaded(loading) {
|
mapViewLoaded(loading) {
|
||||||
this.loading = loading;
|
this.loading = loading;
|
||||||
if (loading) {
|
if (loading) {
|
||||||
this.$refs.progressBar&&this.$refs.progressBar.start();
|
this.$refs.progressBar && this.$refs.progressBar.start();
|
||||||
} else {
|
} else {
|
||||||
this.$refs.progressBar&&this.$refs.progressBar.end(true);
|
this.$refs.progressBar && this.$refs.progressBar.end(true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 设置地图加载进度
|
// 设置地图加载进度
|
||||||
@ -288,13 +288,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.zoom-view {
|
.zoom-view {
|
||||||
// position: fixed;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
border-bottom: 1px #f3f3f3 solid;
|
border-bottom: 1px #f3f3f3 solid;
|
||||||
|
border-right: 1px #f3f3f3 solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ {
|
/deep/ {
|
||||||
|
|||||||
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>
|
<template>
|
||||||
<div :style="{ height: cardHeight +'px' }">
|
<div style="height: 100%;">
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||||
<el-form ref="form" :model="addModel" :rules="rules" label-width="190px" size="mini">
|
<el-form ref="form" :model="addModel" :rules="rules" label-width="190px" size="mini">
|
||||||
<el-form-item :label="$t('map.routeName')" prop="name">
|
<el-form-item :label="$t('map.routeName')" prop="name">
|
||||||
@ -333,10 +333,6 @@ export default {
|
|||||||
default() {
|
default() {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
},
|
|
||||||
cardHeight: {
|
|
||||||
type: Number || String,
|
|
||||||
required: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
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">
|
<div class="map-view">
|
||||||
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
|
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
|
||||||
</div>
|
</div>
|
||||||
<!-- <map-create ref="mapCreate" :skin-code="skinCode" @refresh="refresh" @editmap="handleNodeClick" /> -->
|
|
||||||
<div class="map-draft">
|
<div class="map-draft">
|
||||||
<div v-show="viewDraft === 'draft'">
|
<div v-show="viewDraft === 'draft'" class="box">
|
||||||
<map-operate
|
<map-operate
|
||||||
ref="mapOperate"
|
ref="mapOperate"
|
||||||
:card-height="cardHeight"
|
|
||||||
:map-info="mapInfo"
|
:map-info="mapInfo"
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
:map-saveing="mapSaveing"
|
:map-saveing="mapSaveing"
|
||||||
@ -24,10 +22,9 @@
|
|||||||
@showMap="showMap"
|
@showMap="showMap"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="viewDraft != 'draft'">
|
<div v-show="viewDraft != 'draft'" class="box">
|
||||||
<data-relation
|
<data-relation
|
||||||
ref="dataRelation"
|
ref="dataRelation"
|
||||||
:card-height="cardHeight"
|
|
||||||
:map-info="mapInfo"
|
:map-info="mapInfo"
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@selectView="selectViewDraft"
|
@selectView="selectViewDraft"
|
||||||
@ -52,7 +49,6 @@ import { checkLoginLine } from '@/api/login';
|
|||||||
import JlmapVisual from '@/views/jlmap/index';
|
import JlmapVisual from '@/views/jlmap/index';
|
||||||
import MapOperate from './mapoperate/index';
|
import MapOperate from './mapoperate/index';
|
||||||
import { EventBus } from '@/scripts/event-bus';
|
import { EventBus } from '@/scripts/event-bus';
|
||||||
// import MapCreate from '../mapmanage/create';
|
|
||||||
|
|
||||||
import ConfigMap from './configMap';
|
import ConfigMap from './configMap';
|
||||||
|
|
||||||
@ -65,7 +61,6 @@ export default {
|
|||||||
MapOperate,
|
MapOperate,
|
||||||
DataRelation,
|
DataRelation,
|
||||||
ConfigMap
|
ConfigMap
|
||||||
// MapCreate,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -79,11 +74,6 @@ export default {
|
|||||||
timeDemon: null
|
timeDemon: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
cardHeight() {
|
|
||||||
return this.$store.state.app.height - 195 - 30;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
'$store.state.map.mapDataLoadedCount': function (val) {
|
'$store.state.map.mapDataLoadedCount': function (val) {
|
||||||
this.initAutoSaveTask();
|
this.initAutoSaveTask();
|
||||||
@ -352,6 +342,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.box{
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.mapPaint{
|
.mapPaint{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -366,7 +360,7 @@ export default {
|
|||||||
.map-draft {
|
.map-draft {
|
||||||
float: right;
|
float: right;
|
||||||
width: 520px;
|
width: 520px;
|
||||||
|
height: 100%;
|
||||||
// /deep/ .el-scrollbar__view {
|
// /deep/ .el-scrollbar__view {
|
||||||
// width: 510px !important;
|
// width: 510px !important;
|
||||||
// height: calc(100% - 40px);
|
// height: calc(100% - 40px);
|
||||||
@ -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>
|
<template>
|
||||||
<transition name="el-zoom-in-center">
|
<transition name="el-zoom-in-center">
|
||||||
<div class="map-control">
|
<div class="map-control">
|
||||||
<el-card type="border-card">
|
<div class="border-card">
|
||||||
<div slot="header" class="clearfix">
|
<div class="clearfix">
|
||||||
<span>
|
<span>
|
||||||
{{ $t('map.mapName') }}
|
{{ $t('map.mapName') }}
|
||||||
<b>{{ mapInfo.name }}</b>
|
<b>{{ mapInfo.name }}</b>
|
||||||
@ -13,20 +13,18 @@
|
|||||||
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
|
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-tabs v-model="enabledTab" class="mapEdit" type="card">
|
<el-tabs v-model="enabledTab" class="mapEdit" type="card">
|
||||||
<el-tab-pane :label="$t('map.link')" name="Link">
|
<el-tab-pane :label="$t('map.link')" class="tab_pane_box" name="Link">
|
||||||
<link-draft
|
<link-draft
|
||||||
ref="Link"
|
ref="Link"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.section')" name="Section">
|
<el-tab-pane :label="$t('map.section')" class="tab_pane_box" name="Section">
|
||||||
<section-draft
|
<section-draft
|
||||||
ref="Section"
|
ref="Section"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@ -34,20 +32,18 @@
|
|||||||
@fieldSelect="fieldSelect"
|
@fieldSelect="fieldSelect"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.switch')" name="Switch">
|
<el-tab-pane :label="$t('map.switch')" class="tab_pane_box" name="Switch">
|
||||||
<switch-draft
|
<switch-draft
|
||||||
ref="Switch"
|
ref="Switch"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.signal')" name="Signal">
|
<el-tab-pane :label="$t('map.signal')" class="tab_pane_box" name="Signal">
|
||||||
<signal-draft
|
<signal-draft
|
||||||
ref="Signal"
|
ref="Signal"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@ -55,10 +51,9 @@
|
|||||||
@signalSectionCode="selectEnabledTab"
|
@signalSectionCode="selectEnabledTab"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.station')" name="Station">
|
<el-tab-pane :label="$t('map.station')" class="tab_pane_box" name="Station">
|
||||||
<station-draft
|
<station-draft
|
||||||
ref="Station"
|
ref="Station"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@ -66,130 +61,117 @@
|
|||||||
@stationSectionCode="stationEnabledTab"
|
@stationSectionCode="stationEnabledTab"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.controlMode')" name="StationControl">
|
<el-tab-pane :label="$t('map.controlMode')" class="tab_pane_box" name="StationControl">
|
||||||
<station-control-draft
|
<station-control-draft
|
||||||
ref="StationControl"
|
ref="StationControl"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.platform')" name="StationStand">
|
<el-tab-pane :label="$t('map.platform')" class="tab_pane_box" name="StationStand">
|
||||||
<station-stand-draft
|
<station-stand-draft
|
||||||
ref="StationStand"
|
ref="StationStand"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.zcZoneControl')" name="ZcControl">
|
<el-tab-pane :label="$t('map.zcZoneControl')" class="tab_pane_box" name="ZcControl">
|
||||||
<zc-control-draft
|
<zc-control-draft
|
||||||
ref="ZcControl"
|
ref="ZcControl"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.temporaryLimit')" name="LimitControl">
|
<el-tab-pane :label="$t('map.temporaryLimit')" class="tab_pane_box" name="LimitControl">
|
||||||
<limit-control-draft
|
<limit-control-draft
|
||||||
ref="LimitControl"
|
ref="LimitControl"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.lcControl')" name="LcControl">
|
<el-tab-pane :label="$t('map.lcControl')" class="tab_pane_box" name="LcControl">
|
||||||
<lc-control-draft
|
<lc-control-draft
|
||||||
ref="LcControl"
|
ref="LcControl"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.counter')" name="Counter">
|
<el-tab-pane :label="$t('map.counter')" class="tab_pane_box" name="Counter">
|
||||||
<counter-draft
|
<counter-draft
|
||||||
ref="Counter"
|
ref="Counter"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.delayUnlock')" name="DelayUnlock">
|
<el-tab-pane :label="$t('map.delayUnlock')" class="tab_pane_box" name="DelayUnlock">
|
||||||
<delay-unlock-draft
|
<delay-unlock-draft
|
||||||
ref="DelayUnlock"
|
ref="DelayUnlock"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.train')" name="Train">
|
<el-tab-pane :label="$t('map.train')" class="tab_pane_box" name="Train">
|
||||||
<train-draft
|
<train-draft
|
||||||
ref="Train"
|
ref="Train"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.trainWindow')" name="TrainWindow">
|
<el-tab-pane :label="$t('map.trainWindow')" class="tab_pane_box" name="TrainWindow">
|
||||||
<train-window-draft
|
<train-window-draft
|
||||||
ref="TrainWindow"
|
ref="TrainWindow"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.line')" name="Line">
|
<el-tab-pane :label="$t('map.line')" class="tab_pane_box" name="Line">
|
||||||
<line-draft
|
<line-draft
|
||||||
ref="Line"
|
ref="Line"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.text')" name="Text">
|
<el-tab-pane :label="$t('map.text')" class="tab_pane_box" name="Text">
|
||||||
<text-draft
|
<text-draft
|
||||||
ref="Text"
|
ref="Text"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.image')" name="ImageControl">
|
<el-tab-pane :label="$t('map.image')" class="tab_pane_box" name="ImageControl">
|
||||||
<Image-control-draft
|
<Image-control-draft
|
||||||
ref="ImageControl"
|
ref="ImageControl"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane :label="$t('map.button')" name="ButtonControl">
|
<el-tab-pane :label="$t('map.button')" class="tab_pane_box" name="ButtonControl">
|
||||||
<button-draft
|
<button-draft
|
||||||
ref="ImageControl"
|
ref="ImageControl"
|
||||||
:card-height="cardHeights"
|
|
||||||
:selected="selected"
|
:selected="selected"
|
||||||
@addOrUpdateMapModel="addOrUpdateMapModel"
|
@addOrUpdateMapModel="addOrUpdateMapModel"
|
||||||
@delMapModel="delMapModel"
|
@delMapModel="delMapModel"
|
||||||
@ -197,7 +179,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
@ -257,10 +239,6 @@ export default {
|
|||||||
type: Object,
|
type: Object,
|
||||||
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
|
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
|
||||||
},
|
},
|
||||||
cardHeight: {
|
|
||||||
type: [String, Number],
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
mapSaveing: [Boolean]
|
mapSaveing: [Boolean]
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -284,8 +262,7 @@ export default {
|
|||||||
show: {
|
show: {
|
||||||
mapEditShow: false,
|
mapEditShow: false,
|
||||||
mapPaintShow: true
|
mapPaintShow: true
|
||||||
},
|
}
|
||||||
cardHeights: 0
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -293,13 +270,7 @@ export default {
|
|||||||
return this.mapInfo && this.mapInfo.id;
|
return this.mapInfo && this.mapInfo.id;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
cardHeight: function (val) {
|
|
||||||
this.resizeCardHeight();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.resizeCardHeight();
|
|
||||||
this.initPage();
|
this.initPage();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -323,10 +294,6 @@ export default {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
resizeCardHeight() {
|
|
||||||
var padding = 0;
|
|
||||||
this.cardHeights = this.cardHeight - padding - 74;
|
|
||||||
},
|
|
||||||
handleSelectControlPage(device) {
|
handleSelectControlPage(device) {
|
||||||
const type = device._type;
|
const type = device._type;
|
||||||
if (this.stationType) {
|
if (this.stationType) {
|
||||||
@ -384,6 +351,10 @@ export default {
|
|||||||
.map-control {
|
.map-control {
|
||||||
float: right;
|
float: right;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.border-card{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.physical-view {
|
.physical-view {
|
||||||
@ -398,10 +369,18 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clearfix{
|
||||||
|
height: 47px;
|
||||||
|
padding: 15px
|
||||||
|
}
|
||||||
|
.mapEdit{
|
||||||
|
height: calc(100% - 47px);
|
||||||
|
.tab_pane_box{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/deep/ .button_box{
|
/deep/ .button_box{
|
||||||
// width: 100%;
|
|
||||||
// background: #f0f0f0;
|
|
||||||
// overflow: hidden;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -431,6 +410,9 @@ export default {
|
|||||||
.mapEdit .el-tabs__active-bar{
|
.mapEdit .el-tabs__active-bar{
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
.mapEdit .el-tabs__content {
|
||||||
|
height: calc(100% - 56px);
|
||||||
|
}
|
||||||
|
|
||||||
.card .el-tabs__nav .el-tabs__item.is-active {
|
.card .el-tabs__nav .el-tabs__item.is-active {
|
||||||
border-bottom: 2px solid #E4E7ED;
|
border-bottom: 2px solid #E4E7ED;
|
||||||
@ -456,4 +438,27 @@ export default {
|
|||||||
box-shadow: 1px 1px 4px #ccc;
|
box-shadow: 1px 1px 4px #ccc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 页面页签样式
|
||||||
|
/deep/ {
|
||||||
|
.card .el-transfer-panel__filter{
|
||||||
|
margin: 5px 15px;
|
||||||
|
}
|
||||||
|
.card .el-transfer-panel__list.is-filterable{
|
||||||
|
height: 290px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .el-transfer-panel__body{
|
||||||
|
height: 328px;
|
||||||
|
}
|
||||||
|
.card .el-transfer__buttons{
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .el-transfer{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
255
src/views/map/mapdraft/mapoperate/lcControl.vue
Normal file
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