444 lines
12 KiB
Vue
444 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
|
<update-operate ref='updateMapName' @reloadTable="reloadTable" @create="handleUpdateMap" :title="$t('publish.updateMapName')" type="updateMapName">
|
|
</update-operate>
|
|
<update-operate ref='updateCityName' @reloadTable="reloadTable" @create="handleCityUpdate" :title="$t('publish.updateCityName')" type="updateCityName">
|
|
</update-operate>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getPublishMapList, delPublishMap, getPublishMapExport, putMapOnLine, putMapOffLine,updatePublishMapName,updatePublishMapCity } from '@/api/jmap/map';
|
|
import { getSkinCodeList } from '@/api/management/mapskin';
|
|
import { UrlConfig } from '@/router/index';
|
|
import localStore from 'storejs';
|
|
import UpdateOperate from './draft.vue';
|
|
|
|
export default {
|
|
name: 'PublishMap',
|
|
components:{
|
|
UpdateOperate
|
|
},
|
|
data() {
|
|
return {
|
|
cityList: [],
|
|
skinCodeList: [],
|
|
pagerConfig: {
|
|
pageSize: 'pageSize',
|
|
pageIndex: 'pageNum'
|
|
},
|
|
queryForm: {
|
|
labelWidth: '80px',
|
|
reset: true,
|
|
queryObject: {
|
|
name: {
|
|
type: 'text',
|
|
label: this.$t('global.name')
|
|
},
|
|
cityCode: {
|
|
type: 'select',
|
|
label: this.$t('publish.city'),
|
|
config: {
|
|
data: []
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
queryList: {
|
|
query: getPublishMapList,
|
|
selectCheckShow: false,
|
|
indexShow: true,
|
|
columns: [
|
|
{
|
|
title: this.$t('global.name'),
|
|
prop: 'name'
|
|
},
|
|
{
|
|
title: this.$t('publish.city'),
|
|
prop: 'cityCode',
|
|
type: 'tag',
|
|
columnValue: (row) => { return this.$convertField(row.cityCode, this.cityList, ['code', 'name']); },
|
|
tagType: (row) => { return 'success'; }
|
|
},
|
|
{
|
|
title: this.$t('publish.skinType'),
|
|
prop: 'skinCode',
|
|
type: 'tag',
|
|
columnValue: (row) => { return this.$convertField(row.skinCode, this.skinCodeList, ['code', 'name']); },
|
|
tagType: (row) => { return ''; }
|
|
},
|
|
// {
|
|
// title: this.$t('publish.updateTime'),
|
|
// prop: 'updateTime'
|
|
// },
|
|
{
|
|
type: 'button',
|
|
title: this.$t('global.operate'),
|
|
width: this.$i18n.locale == 'en' ? '650': '650',
|
|
buttons: [
|
|
{
|
|
name: this.$t('publish.publishHistory'),
|
|
handleClick: this.publicList,
|
|
type: ''
|
|
},
|
|
{
|
|
name: this.$t('global.putaway'),
|
|
handleClick: this.handlePutaway,
|
|
type: '',
|
|
showControl: (row) => { return row.status != 1; }
|
|
},
|
|
{
|
|
name: this.$t('global.soldOut'),
|
|
handleClick: this.handleSoldOut,
|
|
type: 'warning',
|
|
showControl: (row) => { return row.status == 1; }
|
|
},
|
|
{
|
|
name: this.$t('global.delete'),
|
|
handleClick: this.handleDelete,
|
|
type: 'danger',
|
|
showControl: () => { return this.isShow != -1; }
|
|
},
|
|
{
|
|
name: this.$t('publish.updateMapName'),
|
|
handleClick: this.handleUpdate
|
|
},
|
|
{
|
|
name: this.$t('publish.updateCityName'),
|
|
handleClick: this.handleUpdateCity
|
|
},
|
|
{
|
|
name: this.$t('global.exportMap'),
|
|
handleClick: this.handleExportMap
|
|
},
|
|
{
|
|
name: this.$t('global.export'),
|
|
handleClick: this.handleExportMapSame,
|
|
showControl: () => { return process.env.NODE_ENV === 'development'; }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
currentModel: {}
|
|
};
|
|
},
|
|
computed: {
|
|
isShow() {
|
|
return this.$store.getters['roles'].indexOf('05');
|
|
}
|
|
},
|
|
created() {
|
|
this.loadInitData();
|
|
},
|
|
methods: {
|
|
loadInitData() {
|
|
this.cityList = [];
|
|
this.$Dictionary.cityType().then(list => {
|
|
this.cityList = list;
|
|
this.cityList.forEach(elem => {
|
|
this.queryForm.queryObject.cityCode.config.data.push({ value: elem.code, label: elem.name });
|
|
});
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('error.loadingCityListFailed'));
|
|
});
|
|
|
|
this.skinCodeList = [];
|
|
getSkinCodeList().then(response => {
|
|
this.skinCodeList = response.data;
|
|
});
|
|
},
|
|
// 编辑名称
|
|
handleUpdate(index, row) {
|
|
// this.$router.push({ path: `${UrlConfig.publish.mapDraft}/edit/${row.id}`, query: { name: row.name } });
|
|
this.$refs.updateMapName.doShow(row);
|
|
},
|
|
// 编辑城市
|
|
handleUpdateCity(index, row){
|
|
this.$refs.updateCityName.doShow(row);
|
|
},
|
|
// 删除
|
|
handleDelete(index, row) {
|
|
this.$confirm(this.$t('publish.wellDelType'), this.$t('global.tips'), {
|
|
confirmButtonText: this.$t('global.confirm'),
|
|
cancelButtonText: this.$t('global.cancel'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
delPublishMap(row.id).then(response => {
|
|
this.$message.success(this.$t('publish.deleteSuccess'));
|
|
this.reloadTable();
|
|
localStore.remove('mapId');
|
|
}).catch(() => {
|
|
this.reloadTable();
|
|
this.$messageBox(this.$t('error.deleteFailed'));
|
|
});
|
|
}).catch(() => { });
|
|
},
|
|
handleUpdateMap(data){
|
|
delete data.cityCode;
|
|
updatePublishMapName(data).then(response => {
|
|
this.reloadTable();
|
|
this.$message.success(this.$t('publish.updateSuccess'));
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('error.updateFailed'));
|
|
});
|
|
},
|
|
handleCityUpdate(data){
|
|
delete data.name;
|
|
updatePublishMapCity(data).then(response => {
|
|
this.reloadTable();
|
|
this.$message.success(this.$t('publish.updateSuccess'));
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('error.updateFailed'));
|
|
});
|
|
},
|
|
reloadTable() {
|
|
this.queryList.reload();
|
|
},
|
|
|
|
publicList(index, row) {
|
|
this.$router.push({ path: `/publish/map/detail`, query: { code: row.skinCode } });
|
|
},
|
|
|
|
handlePutaway(index, row) {
|
|
this.$confirm(this.$t('publish.wellPutawayMap'), this.$t('global.tips'), {
|
|
confirmButtonText: this.$t('global.confirm'),
|
|
cancelButtonText: this.$t('global.cancel'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
putMapOnLine(row.id).then(response => {
|
|
this.$message.success(this.$t('publish.operationSuccess'));
|
|
this.reloadTable();
|
|
}).catch(() => {
|
|
this.reloadTable();
|
|
this.$messageBox(this.$t('error.operationError'));
|
|
});
|
|
}).catch(() => { });
|
|
},
|
|
|
|
handleSoldOut(index, row) {
|
|
this.$confirm(this.$t('publish.wellSoldOutMap'), this.$t('global.tips'), {
|
|
confirmButtonText: this.$t('global.confirm'),
|
|
cancelButtonText: this.$t('global.cancel'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
putMapOffLine(row.id).then(response => {
|
|
this.$message.success(this.$t('publish.operationSuccess'));
|
|
this.reloadTable();
|
|
localStore.remove('mapId');
|
|
}).catch(() => {
|
|
this.reloadTable();
|
|
this.$messageBox(this.$t('error.operationError'));
|
|
});
|
|
}).catch(() => { });
|
|
},
|
|
|
|
// 导出地图
|
|
async handleExportMap(index, row) {
|
|
const res = await getPublishMapExport(row.id);
|
|
const resultData = res.data;
|
|
if (resultData === false) {
|
|
return;
|
|
}
|
|
|
|
// const self = this;
|
|
// import('@/utils/Export2Excel').then(excel => {
|
|
// self.queryExportData(resultData).then(data => {
|
|
// excel.export_json_excel(data, resultData.name);
|
|
// }).catch(error => {
|
|
// self.$message.error(`${this.$t('error.exportException')}:${error.message}`);
|
|
// });
|
|
// });
|
|
|
|
const content = new Blob([JSON.stringify(resultData)]);
|
|
const urlObject = window.URL || window.webkitURL || window;
|
|
const url = urlObject.createObjectURL(content);
|
|
const el = document.createElement('a');
|
|
el.href = url;
|
|
el.download =`${resultData.name}.json`;
|
|
el.click();
|
|
urlObject.revokeObjectURL(url);
|
|
},
|
|
|
|
// 部分导出
|
|
async handleExportMapSame(index, row) {
|
|
const res = await getPublishMapExport(row.id);
|
|
const resultData = res.data;
|
|
if (resultData === false) {
|
|
return;
|
|
}
|
|
|
|
const self = this;
|
|
import('@/utils/Export2Excel').then(excel => {
|
|
self.queryExportDataSame(resultData).then(data => {
|
|
excel.export_json_excel_same(data, resultData.name);
|
|
}).catch(error => {
|
|
self.$message.error(`${this.$t('error.exportException')}:${error.message}`);
|
|
});
|
|
});
|
|
},
|
|
|
|
formatJson(filterVal, jsonData) {
|
|
return jsonData.map(v => filterVal.map(j => v[j]));
|
|
},
|
|
// 格式化数据列表
|
|
queryExportData(data) {
|
|
return new Promise((resolve, reject) => {
|
|
const result = {
|
|
base: []
|
|
};
|
|
const obj = {};
|
|
const list = ['graphData', 'logicData'];
|
|
for (const i in data) {
|
|
if (list.includes(i)) {
|
|
for (const v in data[i]) {
|
|
if (data[i][v].length) {
|
|
result[v] = [...data[i][v]];
|
|
} else if (v == 'skinVO') {
|
|
result[v] = [data[i][v]];
|
|
}
|
|
}
|
|
} else if (data[i] instanceof Object || typeof data[i] != 'object') {
|
|
obj[i] = data[i];
|
|
} else if (data[i] instanceof Array) {
|
|
if (data[i].length) {
|
|
obj[i] = [...data[i]];
|
|
}
|
|
}
|
|
}
|
|
|
|
result.base.push(obj);
|
|
resolve(result);
|
|
});
|
|
},
|
|
// 格式化数据列表
|
|
queryExportDataSame(data) {
|
|
const mapProps = {};
|
|
|
|
mapProps['stationStandList'] = {
|
|
filter: item => { return true; },
|
|
propList: {
|
|
'direction': item => {
|
|
switch (item.direction) {
|
|
case '01': return '下行';
|
|
case '02': return '上行';
|
|
default: return '未知';
|
|
}
|
|
},
|
|
'name': (item, devices) =>{
|
|
let name = '';
|
|
if (item.stationCode) {
|
|
const stationList = devices['stationList'];
|
|
const station = stationList.find(elem => { return item.stationCode == elem.code; });
|
|
if (station) {
|
|
name = station.name;
|
|
}
|
|
}
|
|
return name;
|
|
},
|
|
'code': item => {
|
|
return item.code;
|
|
}
|
|
}
|
|
};
|
|
mapProps['switchList'] = {
|
|
filter: item => { return true; },
|
|
propList: {
|
|
'name': item =>{
|
|
return item.name;
|
|
},
|
|
'code': item => {
|
|
return item.code;
|
|
}
|
|
}
|
|
};
|
|
mapProps['signalList'] = {
|
|
filter: item => { return true; },
|
|
propList: {
|
|
'name': item =>{
|
|
return item.name;
|
|
},
|
|
'code': item => {
|
|
return item.code;
|
|
}
|
|
}
|
|
};
|
|
mapProps['sectionList'] = {
|
|
filter: item => { return item.type == '01'; },
|
|
propList: {
|
|
'name': (item, devices) =>{
|
|
let name = item.name;
|
|
if (item.isSwitchSection) {
|
|
const swchList = devices['switchList'];
|
|
const swch = swchList.find(elem => { return item.relSwitchCode == elem.code; });
|
|
if (swch) {
|
|
if (item.code == swch.sectionACode) {
|
|
name = `${name} (${swch.name}-A)`;
|
|
} else if (item.code == swch.sectionBCode) {
|
|
name = `${name} (${swch.name}-B)`;
|
|
} else if (item.code == swch.sectionCCode) {
|
|
name = `${name} (${swch.name}-C)`;
|
|
}
|
|
}
|
|
}
|
|
|
|
return name;
|
|
},
|
|
'code': item => {
|
|
return item.code;
|
|
}
|
|
}
|
|
};
|
|
|
|
return new Promise((resolve, reject) => {
|
|
const result = {
|
|
base: []
|
|
};
|
|
const obj = {};
|
|
const list = ['graphData', 'logicData'];
|
|
for (const i in data) {
|
|
if (list.includes(i)) {
|
|
for (const v in data[i]) {
|
|
if (data[i][v].length) {
|
|
if (mapProps[v]) {
|
|
const list = [];
|
|
data[i][v].forEach(device => {
|
|
if (mapProps[v].filter(device)) {
|
|
const obj = {};
|
|
Object.keys(mapProps[v].propList || []).forEach(key => {
|
|
obj[key] = mapProps[v].propList[key](device, data[i]);
|
|
});
|
|
list.push(obj);
|
|
}
|
|
});
|
|
result[v] = list;
|
|
}
|
|
}
|
|
}
|
|
} else if (data[i] instanceof Object || typeof data[i] != 'object') {
|
|
obj[i] = data[i];
|
|
} else if (data[i] instanceof Array) {
|
|
if (data[i].length) {
|
|
obj[i] = [...data[i]];
|
|
}
|
|
}
|
|
}
|
|
|
|
result.base.push(obj);
|
|
resolve(result);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
/deep/
|
|
.el-button+.el-button{
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|