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

desc: 修改echarts加载方式

Browse Source
This commit is contained in:
zyy 2019-11-12 17:20:23 +08:00
parent 092603c2cc
commit 0cb102186f
17 changed files with 2088 additions and 2143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,7 +16,6 @@
}, },
"dependencies": { "dependencies": {
"axios": "0.18.0", "axios": "0.18.0",
"echarts": "^4.2.1",
"element-ui": "2.7.2", "element-ui": "2.7.2",
"file-saver": "^1.3.3", "file-saver": "^1.3.3",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",

5
public/index.html
View File

@ -5,9 +5,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.png"> <link rel="icon" href="<%= BASE_URL %>favicon.png">
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css"> -->
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<script src="/static/inflate.min.js"></script> <script src="/static/inflate.min.js"></script>
<script src="/static/three.min.js"></script> <script src="/static/three.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<!-- <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/locale/en.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/locale/zh-CN.min.js"></script> -->
</head> </head>
<body> <body>
<noscript> <noscript>

868
src/jmap/theme/beijing_01/planSchedule/schedule.vue
View File

@ -27,453 +27,471 @@ import { mapGetters } from 'vuex';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';
import { runDiagramGetTime } from '@/api/simulation'; import { runDiagramGetTime } from '@/api/simulation';
import DataTable from '../menusPlan/components/dataTable'; import DataTable from '../menusPlan/components/dataTable';
import echarts from 'echarts';
export default { export default {
name: 'PlanSchedule', name: 'PlanSchedule',
components: { components: {
DataTable DataTable
}, },
props: { props: {
group: { group: {
type: String, type: String,
required: true required: true
}, },
skinCode: { skinCode: {
type: String, type: String,
required: true required: true
}, },
maxWidth: { maxWidth: {
type: Number, type: Number,
require: true require: true
}, },
maxHeight: { maxHeight: {
type: Number, type: Number,
required: true required: true
} }
}, },
data() { data() {
return { return {
top: 0, top: 0,
height: 0, height: 0,
heights: [100, 100], heights: [100, 100],
runPlanId: 'plan-schedule-id', runPlanId: 'plan-schedule-id',
myChart: null, myChart: null,
PlanConvert: {}, PlanConvert: {},
serviceNumberConfig: { serviceNumberConfig: {
data: [], data: [],
highlightCurrentRow: true, highlightCurrentRow: true,
handleChange: this.serviceNumberChange, handleChange: this.serviceNumberChange,
showClose: false, showClose: false,
columns: [ columns: [
{ {
prop: 'serviceNumber', prop: 'serviceNumber',
label: '表号' label: '表号'
}, },
{ {
width: 40 width: 40
} }
] ]
}, },
tripNumberConfig: { tripNumberConfig: {
data: [], data: [],
highlightCurrentRow: true, highlightCurrentRow: true,
handleChange: this.tripNumberChange, handleChange: this.tripNumberChange,
showClose: false, showClose: false,
columns: [ columns: [
{ {
prop: 'tripNumber', prop: 'tripNumber',
label: '车次号' label: '车次号'
}, },
{ {
width: 40 width: 40
} }
] ]
}, },
realData: {}, realData: {},
kmRangeCoordMap: {}, kmRangeCoordMap: {},
option: { option: {
title: { title: {
text: '', text: '',
left: 'center' left: 'center'
}, },
grid: { grid: {
top: '30px', top: '30px',
left: '120px', left: '120px',
right: '40px', right: '40px',
bottom: '65px', bottom: '65px',
containLabel: true, containLabel: true,
backgroundColor: 'floralwhite' backgroundColor: 'floralwhite'
}, },
toolbox: { toolbox: {
right: '30px', right: '30px',
feature: { feature: {
dataZoom: { dataZoom: {
yAxisIndex: 'none' yAxisIndex: 'none'
}, },
restore: {}, restore: {},
saveAsImage: {} saveAsImage: {}
} }
}, },
tooltip: { tooltip: {
axisPointer: { axisPointer: {
trigger: 'item', trigger: 'item',
type: 'cross' type: 'cross'
}, },
formatter: this.axisTooltip, formatter: this.axisTooltip,
borderWidth: 1 borderWidth: 1
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: [], data: [],
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#d14a61' color: '#d14a61'
} }
}, },
axisLabel: { axisLabel: {
formatter: this.xAxisLableFormat, formatter: this.xAxisLableFormat,
textStyle: { textStyle: {
color: '#333' color: '#333'
} }
}, },
axisPointer: { axisPointer: {
snap: true, snap: true,
label: { label: {
formatter: this.xAxisPointFormat, formatter: this.xAxisPointFormat,
backgroundColor: 'rgb(255,0,0,0.5)', backgroundColor: 'rgb(255,0,0,0.5)',
color: 'white' color: 'white'
} }
} }
} }
], ],
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: { splitLine: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
}, },
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#d14a61' color: '#d14a61'
} }
}, },
axisLabel: { axisLabel: {
interval: 'auto', interval: 'auto',
formatter: this.yAxisLableFormat formatter: this.yAxisLableFormat
}, },
axisPointer: { axisPointer: {
xAxisIndex: 'all', xAxisIndex: 'all',
label: { label: {
formatter: this.yAxisPointFormat, formatter: this.yAxisPointFormat,
backgroundColor: 'rgb(0,100,0,0.5)', backgroundColor: 'rgb(0,100,0,0.5)',
color: 'white' color: 'white'
} }
}, },
min: 0, min: 0,
max: 0 max: 0
}, },
series: [], series: [],
dataZoom: [ dataZoom: [
{ {
type: 'inside' type: 'inside'
}, },
{ {
fiterMode: 'filter', fiterMode: 'filter',
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%', handleSize: '80%',
handleStyle: { handleStyle: {
color: '#fff', color: '#fff',
shadowBlur: 3, shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)', shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2, shadowOffsetX: 2,
shadowOffsetY: 2 shadowOffsetY: 2
}, },
bottom: '20px' bottom: '20px'
} }
] ]
}, },
absoluteTime: 2 * 3600, absoluteTime: 2 * 3600,
indexKmRangeMap: {} indexKmRangeMap: {}
}; };
}, },
computed: { computed: {
...mapGetters('runPlan', [ ...mapGetters('runPlan', [
'stations' 'stations'
]) ])
}, },
watch: { watch: {
maxWidth() { maxWidth() {
this.setPosition(); this.setPosition();
}, },
maxHeight() { maxHeight() {
this.setPosition(); this.setPosition();
}, },
'$store.state.runPlan.planLoadedCount': async function () { '$store.state.runPlan.planLoadedCount': async function () {
await this.loadChartPage(); await this.loadChartPage();
}, },
'$store.state.runPlan.planSizeCount': function () { '$store.state.runPlan.planSizeCount': function () {
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height }); this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
}, },
'$store.state.runPlan.selected.serviceNumber': function (val) { '$store.state.runPlan.selected.serviceNumber': function (val) {
const index = this.serviceNumberConfig.data.findIndex(elem => { const index = this.serviceNumberConfig.data.findIndex(elem => {
return elem.serviceNumber == val; return elem.serviceNumber == val;
}); });
this.$refs.serviceTable.setCurrentRow(this.serviceNumberConfig.data[index]); this.$refs.serviceTable.setCurrentRow(this.serviceNumberConfig.data[index]);
}, },
'$store.state.runPlan.selected.tripNumber': function (val) { '$store.state.runPlan.selected.tripNumber': function (val) {
const index = this.tripNumberConfig.data.findIndex(elem => { const index = this.tripNumberConfig.data.findIndex(elem => {
return elem.tripNumber == val; return elem.tripNumber == val;
}); });
this.$refs.tripTable.setCurrentRow(this.tripNumberConfig.data[index]); this.$refs.tripTable.setCurrentRow(this.tripNumberConfig.data[index]);
} }
}, },
mounted() { mounted() {
this.PlanConvert = this.$theme.loadPlanConvert(this.skinCode); this.PlanConvert = this.$theme.loadPlanConvert(this.skinCode);
}, },
beforeDestroy() { beforeDestroy() {
this.destroy(); this.destroy();
}, },
methods: { methods: {
serviceNumberChange(row) { serviceNumberChange(row) {
if (row) { if (row) {
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null }); this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber]; const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber];
if (serviceObj) { if (serviceObj) {
this.analyticalTripNumber(serviceObj.trainMap); this.analyticalTripNumber(serviceObj.trainMap);
} }
} }
}, },
tripNumberChange(row) { tripNumberChange(row) {
if (row) { if (row) {
this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber }); this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
} }
}, },
async analyticalServiceNumber(data) { async analyticalServiceNumber(data) {
this.serviceNumberConfig.data = Object.keys(data || {}) this.serviceNumberConfig.data = Object.keys(data || {})
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; }) .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
.map(serviceNumber => { return { serviceNumber }; }); .map(serviceNumber => { return { serviceNumber }; });
}, },
async analyticalTripNumber(data) { async analyticalTripNumber(data) {
this.tripNumberConfig.data = Object.keys(data || {}) this.tripNumberConfig.data = Object.keys(data || {})
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; }) .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
.map(tripNumber => { return { tripNumber }; }); .map(tripNumber => { return { tripNumber }; });
}, },
async setPosition() { async setPosition() {
this.$nextTick(() => { this.$nextTick(() => {
let top = 3; let top = 3;
const width = this.maxWidth * 0.85; const width = this.maxWidth * 0.85;
let height = this.maxHeight; let height = this.maxHeight;
const titleBar = document.getElementById('PlanTitleBar'); const titleBar = document.getElementById('PlanTitleBar');
const menuBar = document.getElementById('PlanMenuBar'); const menuBar = document.getElementById('PlanMenuBar');
const menuTool = document.getElementById('PlanMenuTool'); const menuTool = document.getElementById('PlanMenuTool');
const statusBar = document.getElementById('PlanStatusBar'); const statusBar = document.getElementById('PlanStatusBar');
if (titleBar) { if (titleBar) {
top += (titleBar.offsetHeight || 0); top += (titleBar.offsetHeight || 0);
} }
if (menuBar) { if (menuBar) {
top += (menuBar.offsetHeight || 0); top += (menuBar.offsetHeight || 0);
} }
if (menuTool) { if (menuTool) {
top += (menuTool.offsetHeight || 0); top += (menuTool.offsetHeight || 0);
} }
if (statusBar) { if (statusBar) {
height -= (statusBar.offsetHeight || 0); height -= (statusBar.offsetHeight || 0);
} }
height = height - top; height = height - top;
this.$store.dispatch('runPlan/resize', { width, height }); this.$store.dispatch('runPlan/resize', { width, height });
if (this.top != top) { if (this.top != top) {
this.top = top; this.top = top;
} }
if (this.height != height) { if (this.height != height) {
this.height = height - 20 * 2; this.height = height - 20 * 2;
} }
}); });
}, },
async loadChartPage() { async loadChartPage() {
try { try {
let series = []; let series = [];
const stations = this.$store.state.runPlan.stations; const stations = this.$store.state.runPlan.stations;
const planData = this.$store.state.runPlan.planData; const planData = this.$store.state.runPlan.planData;
this.viewDisabled = true; this.viewDisabled = true;
this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations); this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
series = this.pushModels(series, [this.PlanConvert.initializeYaxis(stations)]); series = this.pushModels(series, [this.PlanConvert.initializeYaxis(stations)]);
series = this.pushModels(series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { color: '#000', width: 0.5 })); series = this.pushModels(series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { color: '#000', width: 0.5 }));
await this.loadInitData(series); await this.loadInitData(series);
await this.analyticalServiceNumber(this.$store.state.runPlan.editData); await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
this.viewDisabled = false; this.viewDisabled = false;
} catch (error) { } catch (error) {
this.viewDisabled = false; this.viewDisabled = false;
this.$messageBox(`加载运行图数据失败`); this.$messageBox(`加载运行图数据失败`);
} }
}, },
async loadInitData(series) { async loadInitData(series) {
this.myChart && this.myChart.showLoading(); this.myChart && this.myChart.showLoading();
await this.xAxisInit(); await this.xAxisInit();
await this.yAxisInit(); await this.yAxisInit();
await this.loadInitChart(series); await this.loadInitChart(series);
this.myChart && this.myChart.hideLoading(); this.myChart && this.myChart.hideLoading();
}, },
pushModels(series, models) { pushModels(series, models) {
if (models && models.length) { if (models && models.length) {
models.forEach(elem => { models.forEach(elem => {
if (elem) { if (elem) {
series.push(elem); series.push(elem);
} }
}); });
} }
return series; return series;
}, },
popModels(series, models) { popModels(series, models) {
if (models && models.length) { if (models && models.length) {
models.forEach(elem => { models.forEach(elem => {
const index = series.indexOf(elem); const index = series.indexOf(elem);
if (index >= 0) { if (index >= 0) {
series.split(index, 1); series.split(index, 1);
} }
}); });
} }
return series; return series;
}, },
loadInitChart(series) { loadInitChart(series) {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
try { // try {
const that = this; // const that = this;
// 加载echart配置 // // 加载echart配置
require.config( // require.config(
{ // {
paths: { // paths: {
echarts: './js/dist' // echarts: './js/dist'
} // }
} // }
); // );
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 // // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
require( // require(
[ // [
'echarts', // 'echarts',
'echarts/lib/chart/line' // 'echarts/lib/chart/line'
], // ],
function (ec) { // function (ec) {
that.destroy(); // that.destroy();
let startValue = 3600 + that.PlanConvert.TranslationTime; // let startValue = 3600 + that.PlanConvert.TranslationTime;
const offsetTime = 3600; // const offsetTime = 3600;
runDiagramGetTime(that.group).then(resp => { // runDiagramGetTime(that.group).then(resp => {
startValue = resp.data - that.PlanConvert.TranslationTime; // startValue = resp.data - that.PlanConvert.TranslationTime;
that.option.dataZoom[0].startValue = that.option.dataZoom[1].startValue = startValue - offsetTime; // that.option.dataZoom[0].startValue = that.option.dataZoom[1].startValue = startValue - offsetTime;
that.option.dataZoom[0].endValue = that.option.dataZoom[1].endValue = startValue + offsetTime; // that.option.dataZoom[0].endValue = that.option.dataZoom[1].endValue = startValue + offsetTime;
that.option.series = series; // that.option.series = series;
that.myChart = ec.init(document.getElementById(that.runPlanId)); // that.myChart = ec.init(document.getElementById(that.runPlanId));
if (that.myChart) { // if (that.myChart) {
that.myChart.setOption(that.option); // that.myChart.setOption(that.option);
that.reSize({ width: that.$store.state.runPlan.width, height: that.$store.state.runPlan.height }); // that.reSize({ width: that.$store.state.runPlan.width, height: that.$store.state.runPlan.height });
that.myChart.on('click', that.mouseClick); // that.myChart.on('click', that.mouseClick);
} // }
}); // });
resolve(true); // resolve(true);
} // }
); // );
} catch (error) { // } catch (error) {
reject(error); // reject(error);
} // }
}); // });
}, this.destroy();
xAxisPointFormat(params) {
return timeFormat(params.value);
},
yAxisPointFormat(params) {
return this.PlanConvert.computedFormatYAxis(this.stations, params);
},
xAxisLableFormat(value, index) {
if (value % 60 === 0) {
return timeFormat(value);
}
},
yAxisLableFormat(value, index) {
return '';
},
xAxisInit() {
const list = [];
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time);
}
const startValue = 3600 * 6; let startValue = 3600 + this.PlanConvert.TranslationTime;
const offsetTime = 3600 * 1; const offsetTime = 3600;
this.option.xAxis[0].data = list; runDiagramGetTime(this.group).then(resp => {
if (!this.option.dataZoom[0].startValue) { startValue = resp.data - this.PlanConvert.TranslationTime;
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime; this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
} this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
this.option.series = series;
this.myChart = echarts.init(document.getElementById(this.runPlanId));
if (this.myChart) {
this.myChart.setOption(this.option);
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
this.myChart.on('click', this.mouseClick);
}
});
},
xAxisPointFormat(params) {
return timeFormat(params.value);
},
yAxisPointFormat(params) {
return this.PlanConvert.computedFormatYAxis(this.stations, params);
},
xAxisLableFormat(value, index) {
if (value % 60 === 0) {
return timeFormat(value);
}
},
yAxisLableFormat(value, index) {
return '';
},
xAxisInit() {
const list = [];
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time);
}
if (!this.option.dataZoom[0].endValue) { const startValue = 3600 * 6;
this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime; const offsetTime = 3600 * 1;
}
},
yAxisInit() {
if (Object.keys(this.PlanConvert).length) {
this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
}
},
axisTooltip(param) {
const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [
`Point Data <hr size=1 style=" margin: 3px 0">`,
`车站名称: ${station.name}<br>`,
`车站公里标: ${station.kmRange} km <br>`,
`到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
].join('');
},
mouseClick(params) {
const model = {
serviceNumber: params.seriesName
};
this.$store.dispatch('runPlan/setSelected', model);
},
reSize(opt) {
if (this.myChart) {
this.myChart.resize({
width: opt.width,
height: opt.height,
silent: false
});
}
},
destroy() {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.dispose();
this.myChart = null;
}
},
scheduleTouch() {
}, this.option.xAxis[0].data = list;
trainNumTouch() { if (!this.option.dataZoom[0].startValue) {
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
}
} if (!this.option.dataZoom[0].endValue) {
} this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
}
},
yAxisInit() {
if (Object.keys(this.PlanConvert).length) {
this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
}
},
axisTooltip(param) {
const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [
`Point Data <hr size=1 style=" margin: 3px 0">`,
`车站名称: ${station.name}<br>`,
`车站公里标: ${station.kmRange} km <br>`,
`到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
].join('');
},
mouseClick(params) {
const model = {
serviceNumber: params.seriesName
};
this.$store.dispatch('runPlan/setSelected', model);
},
reSize(opt) {
if (this.myChart) {
this.myChart.resize({
width: opt.width,
height: opt.height,
silent: false
});
}
},
destroy() {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.dispose();
this.myChart = null;
}
},
scheduleTouch() {
},
trainNumTouch() {
}
}
}; };
</script> </script>
<style scoped rel="stylesheet/scss" lang="scss" scoped> <style scoped rel="stylesheet/scss" lang="scss" scoped>

847
src/jmap/theme/chengdu_03/planSchedule/schedule.vue
View File

@ -1,153 +1,133 @@
<template> <template>
<div id="PlanSchedule" :style="{top: top+'px', height: height+'px'}"> <div id="PlanSchedule" :style="{top: top+'px', height: height+'px'}">
<div class="left"> <div class="left">
<div :id="runPlanId"></div> <div :id="runPlanId" />
</div>
<div class="right">
<data-table ref="serviceTable" :height="height/2" :config="serviceNumberConfig" @touch="scheduleTouch"
:style="{top: top-height/2+'px'}"></data-table>
<data-table ref="tripTable" :height="height/2" :config="tripNumberConfig" @touch="trainNumTouch"
:style="{top: top-height/2+'px'}"></data-table>
</div>
</div> </div>
<div class="right">
<data-table
ref="serviceTable"
:height="height/2"
:config="serviceNumberConfig"
:style="{top: top-height/2+'px'}"
@touch="scheduleTouch"
/>
<data-table
ref="tripTable"
:height="height/2"
:config="tripNumberConfig"
:style="{top: top-height/2+'px'}"
@touch="trainNumTouch"
/>
</div>
</div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';
import { runDiagramGetTime } from '@/api/simulation'; import { runDiagramGetTime } from '@/api/simulation';
import DataTable from '../menusPlan/components/dataTable'; import DataTable from '../menusPlan/components/dataTable';
import echarts from 'echarts';
export default { export default {
name: 'PlanSchedule', name: 'PlanSchedule',
props: { components: {
group: { DataTable
type: String, },
required: true props: {
}, group: {
skinCode: { type: String,
type: String, required: true
required: true
},
maxWidth: {
type: Number,
require: true
},
maxHeight: {
type: Number,
required: true
}
}, },
components: { skinCode: {
DataTable type: String,
required: true
}, },
data() { maxWidth: {
return { type: Number,
top: 0, require: true
height: 0, },
heights: [100, 100], maxHeight: {
runPlanId: 'plan-schedule-id', type: Number,
myChart: null, required: true
PlanConvert: {}, }
serviceNumberConfig: { },
data: [], data() {
highlightCurrentRow: true, return {
handleChange: this.serviceNumberChange, top: 0,
showClose: false, height: 0,
columns: [ heights: [100, 100],
{ runPlanId: 'plan-schedule-id',
prop: 'serviceNumber', myChart: null,
label: '表号', PlanConvert: {},
}, serviceNumberConfig: {
{ data: [],
width: 40 highlightCurrentRow: true,
} handleChange: this.serviceNumberChange,
] showClose: false,
columns: [
{
prop: 'serviceNumber',
label: '表号'
},
{
width: 40
}
]
},
tripNumberConfig: {
data: [],
highlightCurrentRow: true,
handleChange: this.tripNumberChange,
showClose: false,
columns: [
{
prop: 'tripNumber',
label: '车次号'
},
{
width: 40
}
]
},
realData: {},
kmRangeCoordMap: {},
option: {
title: {
text: '',
left: 'center'
}, },
tripNumberConfig: { grid: {
data: [], top: '30px',
highlightCurrentRow: true, left: '120px',
handleChange: this.tripNumberChange, right: '40px',
showClose: false, bottom: '65px',
columns: [ containLabel: true,
{ backgroundColor: 'floralwhite'
prop: 'tripNumber',
label: '车次号',
},
{
width: 40
}
]
}, },
realData: {}, toolbox: {
kmRangeCoordMap: {}, right: '30px',
option: { feature: {
title: { dataZoom: {
text: '', yAxisIndex: 'none'
left: 'center'
},
grid: {
top: '30px',
left: '120px',
right: '40px',
bottom: '65px',
containLabel: true,
backgroundColor: 'floralwhite'
},
toolbox: {
right: '30px',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
tooltip: {
axisPointer: {
trigger: 'item',
type: 'cross'
}, },
formatter: this.axisTooltip, restore: {},
borderWidth: 1, saveAsImage: {}
}
},
tooltip: {
axisPointer: {
trigger: 'item',
type: 'cross'
}, },
xAxis: [ formatter: this.axisTooltip,
{ borderWidth: 1
type: 'category', },
boundaryGap: false, xAxis: [
data: [], {
axisLine: { type: 'category',
onZero: false, boundaryGap: false,
lineStyle: { data: [],
width: 2,
color: '#d14a61'
}
},
axisLabel: {
formatter: this.xAxisLableFormat,
textStyle: {
color: '#333'
}
},
axisPointer: {
snap: true,
label: {
formatter: this.xAxisPointFormat,
backgroundColor: 'rgb(255,0,0,0.5)',
color: 'white',
}
}
}
],
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: false,
},
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
@ -156,317 +136,330 @@
} }
}, },
axisLabel: { axisLabel: {
interval: 'auto', formatter: this.xAxisLableFormat,
formatter: this.yAxisLableFormat, textStyle: {
color: '#333'
}
}, },
axisPointer: { axisPointer: {
xAxisIndex: 'all', snap: true,
label: { label: {
formatter: this.yAxisPointFormat, formatter: this.xAxisPointFormat,
backgroundColor: 'rgb(0,100,0,0.5)', backgroundColor: 'rgb(255,0,0,0.5)',
color: 'white', color: 'white'
} }
}, }
min: 0, }
max: 0, ],
yAxis: {
type: 'value',
splitLine: {
show: false
}, },
series: [], axisTick: {
dataZoom: [ show: false
{ },
type: 'inside', axisLine: {
}, onZero: false,
{ lineStyle: {
fiterMode: 'filter', width: 2,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', color: '#d14a61'
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
},
bottom: '20px'
} }
] },
axisLabel: {
interval: 'auto',
formatter: this.yAxisLableFormat
},
axisPointer: {
xAxisIndex: 'all',
label: {
formatter: this.yAxisPointFormat,
backgroundColor: 'rgb(0,100,0,0.5)',
color: 'white'
}
},
min: 0,
max: 0
}, },
absoluteTime: 2 * 3600, series: [],
indexKmRangeMap: {} dataZoom: [
{
type: 'inside'
},
{
fiterMode: 'filter',
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
},
bottom: '20px'
}
]
},
absoluteTime: 2 * 3600,
indexKmRangeMap: {}
};
},
watch: {
maxWidth() {
this.setPosition();
},
maxHeight() {
this.setPosition();
},
'$store.state.runPlan.planLoadedCount': async function () {
await this.loadChartPage();
},
'$store.state.runPlan.planSizeCount': function () {
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
},
'$store.state.runPlan.selected.serviceNumber': function (val) {
const index = this.serviceNumberConfig.data.findIndex(elem => {
return elem.serviceNumber == val;
});
this.$refs.serviceTable.setCurrentRow(this.serviceNumberConfig.data[index]);
},
'$store.state.runPlan.selected.tripNumber': function (val) {
const index = this.tripNumberConfig.data.findIndex(elem => {
return elem.tripNumber == val;
});
this.$refs.tripTable.setCurrentRow(this.tripNumberConfig.data[index]);
}
},
computed: {
...mapGetters('runPlan', [
'stations'
])
},
mounted() {
this.PlanConvert = this.$theme.loadPlanConvert(this.skinCode);
},
beforeDestroy() {
this.destroy();
},
methods: {
serviceNumberChange(row) {
if (row) {
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber];
if (serviceObj) {
this.analyticalTripNumber(serviceObj.trainMap);
}
} }
}, },
watch: { tripNumberChange(row) {
maxWidth() { if (row) {
this.setPosition(); this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
},
maxHeight() {
this.setPosition();
},
'$store.state.runPlan.planLoadedCount': async function () {
await this.loadChartPage();
},
'$store.state.runPlan.planSizeCount': function () {
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
},
'$store.state.runPlan.selected.serviceNumber': function (val) {
let index = this.serviceNumberConfig.data.findIndex(elem => {
return elem.serviceNumber == val;
})
this.$refs.serviceTable.setCurrentRow(this.serviceNumberConfig.data[index]);
},
'$store.state.runPlan.selected.tripNumber': function (val) {
let index = this.tripNumberConfig.data.findIndex(elem => {
return elem.tripNumber == val;
})
this.$refs.tripTable.setCurrentRow(this.tripNumberConfig.data[index]);
} }
}, },
computed: { async analyticalServiceNumber(data) {
...mapGetters('runPlan', [ this.serviceNumberConfig.data = Object.keys(data || {})
'stations' .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
]) .map(serviceNumber => { return { serviceNumber }; });
}, },
mounted() { async analyticalTripNumber(data) {
this.PlanConvert = this.$theme.loadPlanConvert(this.skinCode); this.tripNumberConfig.data = Object.keys(data || {})
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
.map(tripNumber => { return { tripNumber }; });
}, },
beforeDestroy() { async setPosition() {
this.destroy(); this.$nextTick(() => {
let top = 3;
const width = this.maxWidth * 0.85;
let height = this.maxHeight;
const titleBar = document.getElementById('PlanTitleBar');
const menuBar = document.getElementById('PlanMenuBar');
const menuTool = document.getElementById('PlanMenuTool');
const statusBar = document.getElementById('PlanStatusBar');
if (titleBar) {
top += (titleBar.offsetHeight || 0);
}
if (menuBar) {
top += (menuBar.offsetHeight || 0);
}
if (menuTool) {
top += (menuTool.offsetHeight || 0);
}
if (statusBar) {
height -= (statusBar.offsetHeight || 0);
}
height = height - top;
this.$store.dispatch('runPlan/resize', { width, height });
if (this.top != top) {
this.top = top;
}
if (this.height != height) {
this.height = height - 20 * 2;
}
});
}, },
methods: { async loadChartPage() {
serviceNumberChange(row) { try {
if (row) { let series = [];
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null }); const stations = this.$store.state.runPlan.stations;
let serviceObj = this.$store.state.runPlan.editData[row.serviceNumber] const planData = this.$store.state.runPlan.planData;
if (serviceObj) {
this.analyticalTripNumber(serviceObj.trainMap);
}
}
},
tripNumberChange(row) {
if (row) {
this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
}
},
async analyticalServiceNumber(data) {
this.serviceNumberConfig.data = Object.keys(data || {})
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex })
.map(serviceNumber => { return { serviceNumber } });
},
async analyticalTripNumber(data) {
this.tripNumberConfig.data = Object.keys(data || {})
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex })
.map(tripNumber => { return { tripNumber } });
},
async setPosition() {
this.$nextTick(() => {
let top = 3;
let width = this.maxWidth * 0.85;
let height = this.maxHeight;
let titleBar = document.getElementById('PlanTitleBar'); this.viewDisabled = true;
let menuBar = document.getElementById('PlanMenuBar'); this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
let menuTool = document.getElementById('PlanMenuTool'); series = this.pushModels(series, [this.PlanConvert.initializeYaxis(stations)]);
let statusBar = document.getElementById('PlanStatusBar'); series = this.pushModels(series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { color: '#000', width: 0.5 }));
await this.loadInitData(series);
await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
this.viewDisabled = false;
if (titleBar) { } catch (error) {
top += (titleBar.offsetHeight || 0); this.viewDisabled = false;
} this.$messageBox(`加载运行图数据失败`);
}
if (menuBar) { },
top += (menuBar.offsetHeight || 0); async loadInitData(series) {
} this.myChart && this.myChart.showLoading();
await this.xAxisInit();
if (menuTool) { await this.yAxisInit();
top += (menuTool.offsetHeight || 0); await this.loadInitChart(series);
} this.myChart && this.myChart.hideLoading();
},
if (statusBar) { pushModels(series, models) {
height -= (statusBar.offsetHeight || 0); if (models && models.length) {
} models.forEach(elem => {
if (elem) {
height = height - top; series.push(elem);
this.$store.dispatch('runPlan/resize', { width, height });
if (this.top != top) {
this.top = top;
}
if (this.height != height) {
this.height = height - 20 * 2;
}
})
},
async loadChartPage() {
try {
let series = [];
let stations = this.$store.state.runPlan.stations;
let planData = this.$store.state.runPlan.planData;
this.viewDisabled = true;
this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
series = this.pushModels(series, [this.PlanConvert.initializeYaxis(stations)]);
series = this.pushModels(series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { color: '#000', width: 0.5 }));
await this.loadInitData(series);
await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
this.viewDisabled = false;
} catch (error) {
this.viewDisabled = false;
this.$messageBox(`加载运行图数据失败`);
}
},
async loadInitData(series) {
this.myChart && this.myChart.showLoading();
await this.xAxisInit();
await this.yAxisInit();
await this.loadInitChart(series);
this.myChart && this.myChart.hideLoading();
},
pushModels(series, models) {
if (models && models.length) {
models.forEach(elem => {
if (elem) {
series.push(elem);
}
})
}
return series;
},
popModels(series, models) {
if (models && models.length) {
models.forEach(elem => {
let index = series.indexOf(elem);
if (index >= 0) {
series.split(index, 1);
}
})
}
return series;
},
loadInitChart(series) {
return new Promise((resolve, reject) => {
try {
let that = this;
//加载echart配置
require.config(
{
paths: {
echarts: './js/dist'
}
}
);
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
require(
[
'echarts',
'echarts/lib/chart/line',
],
function (ec) {
that.destroy();
let startValue = 3600 + that.PlanConvert.TranslationTime;
let offsetTime = 3600;
runDiagramGetTime(that.group).then(resp => {
startValue = resp.data - that.PlanConvert.TranslationTime;
that.option.dataZoom[0].startValue = that.option.dataZoom[1].startValue = startValue - offsetTime;
that.option.dataZoom[0].endValue = that.option.dataZoom[1].endValue = startValue + offsetTime;
that.option.series = series;
that.myChart = ec.init(document.getElementById(that.runPlanId));
if (that.myChart) {
that.myChart.setOption(that.option);
that.reSize({ width: that.$store.state.runPlan.width, height: that.$store.state.runPlan.height });
that.myChart.on('click', that.mouseClick);
}
})
resolve(true);
}
);
} catch (error) {
reject(error);
} }
}); });
},
xAxisPointFormat(params) {
return timeFormat(params.value);
},
yAxisPointFormat(params) {
return this.PlanConvert.computedFormatYAxis(this.stations, params);
},
xAxisLableFormat(value, index) {
if (value % 60 === 0) {
return timeFormat(value);
}
},
yAxisLableFormat(value, index) {
return '';
},
xAxisInit() {
let list = [];
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time);
}
let startValue = 3600 * 6;
let offsetTime = 3600 * 1;
this.option.xAxis[0].data = list;
if (!this.option.dataZoom[0].startValue) {
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
}
if (!this.option.dataZoom[0].endValue) {
this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
}
},
yAxisInit() {
if (Object.keys(this.PlanConvert).length) {
this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
}
},
axisTooltip(param) {
let station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [
`Point Data <hr size=1 style=" margin: 3px 0">`,
`车站名称: ${station.name}<br>`,
`车站公里标: ${station.kmRange} km <br>`,
`到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
].join('');
},
mouseClick(params) {
let model = {
serviceNumber: params.seriesName
}
this.$store.dispatch('runPlan/setSelected', model);
},
reSize(opt) {
if (this.myChart) {
this.myChart.resize({
width: opt.width,
height: opt.height,
silent: false
});
}
},
destroy() {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.dispose();
this.myChart = null;
}
},
scheduleTouch() {
},
trainNumTouch() {
} }
return series;
},
popModels(series, models) {
if (models && models.length) {
models.forEach(elem => {
const index = series.indexOf(elem);
if (index >= 0) {
series.split(index, 1);
}
});
}
return series;
},
loadInitChart(series) {
return new Promise((resolve, reject) => {
try {
this.destroy();
let startValue = 3600 + this.PlanConvert.TranslationTime;
const offsetTime = 3600;
runDiagramGetTime(this.group).then(resp => {
startValue = resp.data - this.PlanConvert.TranslationTime;
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
this.option.series = series;
this.myChart = echarts.init(document.getElementById(this.runPlanId));
if (this.myChart) {
this.myChart.setOption(this.option);
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
this.myChart.on('click', this.mouseClick);
}
});
resolve(true);
} catch (error) {
reject(error);
}
});
},
xAxisPointFormat(params) {
return timeFormat(params.value);
},
yAxisPointFormat(params) {
return this.PlanConvert.computedFormatYAxis(this.stations, params);
},
xAxisLableFormat(value, index) {
if (value % 60 === 0) {
return timeFormat(value);
}
},
yAxisLableFormat(value, index) {
return '';
},
xAxisInit() {
const list = [];
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time);
}
const startValue = 3600 * 6;
const offsetTime = 3600 * 1;
this.option.xAxis[0].data = list;
if (!this.option.dataZoom[0].startValue) {
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
}
if (!this.option.dataZoom[0].endValue) {
this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
}
},
yAxisInit() {
if (Object.keys(this.PlanConvert).length) {
this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
}
},
axisTooltip(param) {
const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [
`Point Data <hr size=1 style=" margin: 3px 0">`,
`车站名称: ${station.name}<br>`,
`车站公里标: ${station.kmRange} km <br>`,
`到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
].join('');
},
mouseClick(params) {
const model = {
serviceNumber: params.seriesName
};
this.$store.dispatch('runPlan/setSelected', model);
},
reSize(opt) {
if (this.myChart) {
this.myChart.resize({
width: opt.width,
height: opt.height,
silent: false
});
}
},
destroy() {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.dispose();
this.myChart = null;
}
},
scheduleTouch() {
},
trainNumTouch() {
} }
} }
};
</script> </script>
<style scoped rel="stylesheet/scss" lang="scss" scoped> <style scoped rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss"; @import "src/styles/mixin.scss";
#PlanSchedule { #PlanSchedule {

51
src/jmap/theme/chengdu_04/planSchedule/schedule.vue
View File

@ -27,6 +27,7 @@ import { mapGetters } from 'vuex';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';
import { runDiagramGetTime } from '@/api/simulation'; import { runDiagramGetTime } from '@/api/simulation';
import DataTable from '../menusPlan/components/dataTable'; import DataTable from '../menusPlan/components/dataTable';
import echarts from 'echarts';
export default { export default {
name: 'PlanSchedule', name: 'PlanSchedule',
@ -358,42 +359,24 @@ export default {
loadInitChart(series) { loadInitChart(series) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
const that = this; this.destroy();
// 加载echart配置
require.config(
{
paths: {
echarts: './js/dist'
}
}
);
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
require(
[
'echarts',
'echarts/lib/chart/line'
],
function (ec) {
that.destroy();
let startValue = 3600 + that.PlanConvert.TranslationTime; let startValue = 3600 + this.PlanConvert.TranslationTime;
const offsetTime = 3600; const offsetTime = 3600;
runDiagramGetTime(that.group).then(resp => { runDiagramGetTime(this.group).then(resp => {
startValue = resp.data - that.PlanConvert.TranslationTime; startValue = resp.data - this.PlanConvert.TranslationTime;
that.option.dataZoom[0].startValue = that.option.dataZoom[1].startValue = startValue - offsetTime; this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
that.option.dataZoom[0].endValue = that.option.dataZoom[1].endValue = startValue + offsetTime; this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
that.option.series = series; this.option.series = series;
that.myChart = ec.init(document.getElementById(that.runPlanId)); this.myChart = echarts.init(document.getElementById(this.runPlanId));
if (that.myChart) { if (this.myChart) {
that.myChart.setOption(that.option); this.myChart.setOption(this.option);
that.reSize({ width: that.$store.state.runPlan.width, height: that.$store.state.runPlan.height }); this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
that.myChart.on('click', that.mouseClick); this.myChart.on('click', this.mouseClick);
}
});
resolve(true);
} }
); });
resolve(true);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }
@ -476,7 +459,7 @@ export default {
} }
}; };
</script> </script>
<style scoped rel="stylesheet/scss" lang="scss" scoped> <style scoped rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss"; @import "src/styles/mixin.scss";
#PlanSchedule { #PlanSchedule {

834
src/jmap/theme/fuzhou_01/planSchedule/schedule.vue
View File

@ -27,453 +27,437 @@ import { mapGetters } from 'vuex';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';
import { runDiagramGetTime } from '@/api/simulation'; import { runDiagramGetTime } from '@/api/simulation';
import DataTable from '../menusPlan/components/dataTable'; import DataTable from '../menusPlan/components/dataTable';
import echarts from 'echarts';
export default { export default {
name: 'PlanSchedule', name: 'PlanSchedule',
components: { components: {
DataTable DataTable
}, },
props: { props: {
group: { group: {
type: String, type: String,
required: true required: true
}, },
skinCode: { skinCode: {
type: String, type: String,
required: true required: true
}, },
maxWidth: { maxWidth: {
type: Number, type: Number,
required: true required: true
}, },
maxHeight: { maxHeight: {
type: Number, type: Number,
required: true required: true
} }
}, },
data() { data() {
return { return {
top: 0, top: 0,
height: 0, height: 0,
heights: [100, 100], heights: [100, 100],
runPlanId: 'plan-schedule-id', runPlanId: 'plan-schedule-id',
myChart: null, myChart: null,
PlanConvert: {}, PlanConvert: {},
serviceNumberConfig: { serviceNumberConfig: {
data: [], data: [],
highlightCurrentRow: true, highlightCurrentRow: true,
handleChange: this.serviceNumberChange, handleChange: this.serviceNumberChange,
showClose: false, showClose: false,
columns: [ columns: [
{ {
prop: 'serviceNumber', prop: 'serviceNumber',
label: this.$t('menu.serviceNumber') label: this.$t('menu.serviceNumber')
}, },
{ {
width: 40 width: 40
} }
] ]
}, },
tripNumberConfig: { tripNumberConfig: {
data: [], data: [],
highlightCurrentRow: true, highlightCurrentRow: true,
handleChange: this.tripNumberChange, handleChange: this.tripNumberChange,
showClose: false, showClose: false,
columns: [ columns: [
{ {
prop: 'tripNumber', prop: 'tripNumber',
label: this.$t('menu.tripNumber') label: this.$t('menu.tripNumber')
}, },
{ {
width: 40 width: 40
} }
] ]
}, },
realData: {}, realData: {},
kmRangeCoordMap: {}, kmRangeCoordMap: {},
option: { option: {
title: { title: {
text: '', text: '',
left: 'center' left: 'center'
}, },
grid: { grid: {
top: '30px', top: '30px',
left: '120px', left: '120px',
right: '40px', right: '40px',
bottom: '65px', bottom: '65px',
containLabel: true, containLabel: true,
backgroundColor: 'floralwhite' backgroundColor: 'floralwhite'
}, },
toolbox: { toolbox: {
right: '30px', right: '30px',
feature: { feature: {
dataZoom: { dataZoom: {
yAxisIndex: 'none' yAxisIndex: 'none'
}, },
restore: {}, restore: {},
saveAsImage: {} saveAsImage: {}
} }
}, },
tooltip: { tooltip: {
axisPointer: { axisPointer: {
trigger: 'item', trigger: 'item',
type: 'cross' type: 'cross'
}, },
formatter: this.axisTooltip, formatter: this.axisTooltip,
borderWidth: 1 borderWidth: 1
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: [], data: [],
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#d14a61' color: '#d14a61'
} }
}, },
axisLabel: { axisLabel: {
formatter: this.xAxisLableFormat, formatter: this.xAxisLableFormat,
textStyle: { textStyle: {
color: '#333' color: '#333'
} }
}, },
axisPointer: { axisPointer: {
snap: true, snap: true,
label: { label: {
formatter: this.xAxisPointFormat, formatter: this.xAxisPointFormat,
backgroundColor: 'rgb(255,0,0,0.5)', backgroundColor: 'rgb(255,0,0,0.5)',
color: 'white' color: 'white'
} }
} }
} }
], ],
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: { splitLine: {
show: false show: false
}, },
axisTick: { axisTick: {
show: false show: false
}, },
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#d14a61' color: '#d14a61'
} }
}, },
axisLabel: { axisLabel: {
interval: 'auto', interval: 'auto',
formatter: this.yAxisLableFormat formatter: this.yAxisLableFormat
}, },
axisPointer: { axisPointer: {
xAxisIndex: 'all', xAxisIndex: 'all',
label: { label: {
formatter: this.yAxisPointFormat, formatter: this.yAxisPointFormat,
backgroundColor: 'rgb(0,100,0,0.5)', backgroundColor: 'rgb(0,100,0,0.5)',
color: 'white' color: 'white'
} }
}, },
min: 0, min: 0,
max: 0 max: 0
}, },
series: [], series: [],
dataZoom: [ dataZoom: [
{ {
type: 'inside' type: 'inside'
}, },
{ {
fiterMode: 'filter', fiterMode: 'filter',
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%', handleSize: '80%',
handleStyle: { handleStyle: {
color: '#fff', color: '#fff',
shadowBlur: 3, shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)', shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2, shadowOffsetX: 2,
shadowOffsetY: 2 shadowOffsetY: 2
}, },
bottom: '20px' bottom: '20px'
} }
] ]
}, },
absoluteTime: 2 * 3600, absoluteTime: 2 * 3600,
indexKmRangeMap: {} indexKmRangeMap: {}
}; };
}, },
computed: { computed: {
...mapGetters('runPlan', [ ...mapGetters('runPlan', [
'stations' 'stations'
]) ])
}, },
watch: { watch: {
maxWidth() { maxWidth() {
this.setPosition(); this.setPosition();
}, },
maxHeight() { maxHeight() {
this.setPosition(); this.setPosition();
}, },
'$store.state.runPlan.planLoadedCount': async function () { '$store.state.runPlan.planLoadedCount': async function () {
await this.loadChartPage(); await this.loadChartPage();
}, },
'$store.state.runPlan.planSizeCount': function () { '$store.state.runPlan.planSizeCount': function () {
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height }); this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
}, },
'$store.state.runPlan.selected.serviceNumber': function (val) { '$store.state.runPlan.selected.serviceNumber': function (val) {
const index = this.serviceNumberConfig.data.findIndex(elem => { const index = this.serviceNumberConfig.data.findIndex(elem => {
return elem.serviceNumber == val; return elem.serviceNumber == val;
}); });
this.$refs.serviceTable.setCurrentRow(this.serviceNumberConfig.data[index]); this.$refs.serviceTable.setCurrentRow(this.serviceNumberConfig.data[index]);
}, },
'$store.state.runPlan.selected.tripNumber': function (val) { '$store.state.runPlan.selected.tripNumber': function (val) {
const index = this.tripNumberConfig.data.findIndex(elem => { const index = this.tripNumberConfig.data.findIndex(elem => {
return elem.tripNumber == val; return elem.tripNumber == val;
}); });
this.$refs.tripTable.setCurrentRow(this.tripNumberConfig.data[index]); this.$refs.tripTable.setCurrentRow(this.tripNumberConfig.data[index]);
} }
}, },
mounted() { mounted() {
this.PlanConvert = this.$theme.loadPlanConvert(this.skinCode); this.PlanConvert = this.$theme.loadPlanConvert(this.skinCode);
}, },
beforeDestroy() { beforeDestroy() {
this.destroy(); this.destroy();
}, },
methods: { methods: {
serviceNumberChange(row) { serviceNumberChange(row) {
if (row) { if (row) {
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null }); this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber]; const serviceObj = this.$store.state.runPlan.editData[row.serviceNumber];
if (serviceObj) { if (serviceObj) {
this.analyticalTripNumber(serviceObj.trainMap); this.analyticalTripNumber(serviceObj.trainMap);
} }
} }
}, },
tripNumberChange(row) { tripNumberChange(row) {
if (row) { if (row) {
this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber }); this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
} }
}, },
async analyticalServiceNumber(data) { async analyticalServiceNumber(data) {
this.serviceNumberConfig.data = Object.keys(data || {}) this.serviceNumberConfig.data = Object.keys(data || {})
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; }) .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
.map(serviceNumber => { return { serviceNumber }; }); .map(serviceNumber => { return { serviceNumber }; });
}, },
async analyticalTripNumber(data) { async analyticalTripNumber(data) {
this.tripNumberConfig.data = Object.keys(data || {}) this.tripNumberConfig.data = Object.keys(data || {})
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; }) .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
.map(tripNumber => { return { tripNumber }; }); .map(tripNumber => { return { tripNumber }; });
}, },
async setPosition() { async setPosition() {
this.$nextTick(() => { this.$nextTick(() => {
let top = 3; let top = 3;
const width = this.maxWidth * 0.85; const width = this.maxWidth * 0.85;
let height = this.maxHeight; let height = this.maxHeight;
const titleBar = document.getElementById('PlanTitleBar'); const titleBar = document.getElementById('PlanTitleBar');
const menuBar = document.getElementById('PlanMenuBar'); const menuBar = document.getElementById('PlanMenuBar');
const menuTool = document.getElementById('PlanMenuTool'); const menuTool = document.getElementById('PlanMenuTool');
const statusBar = document.getElementById('PlanStatusBar'); const statusBar = document.getElementById('PlanStatusBar');
if (titleBar) { if (titleBar) {
top += (titleBar.offsetHeight || 0); top += (titleBar.offsetHeight || 0);
} }
if (menuBar) { if (menuBar) {
top += (menuBar.offsetHeight || 0); top += (menuBar.offsetHeight || 0);
} }
if (menuTool) { if (menuTool) {
top += (menuTool.offsetHeight || 0); top += (menuTool.offsetHeight || 0);
} }
if (statusBar) { if (statusBar) {
height -= (statusBar.offsetHeight || 0); height -= (statusBar.offsetHeight || 0);
} }
height = height - top; height = height - top;
this.$store.dispatch('runPlan/resize', { width, height }); this.$store.dispatch('runPlan/resize', { width, height });
if (this.top != top) { if (this.top != top) {
this.top = top; this.top = top;
} }
if (this.height != height) { if (this.height != height) {
this.height = height - 20 * 2; this.height = height - 20 * 2;
} }
}); });
}, },
async loadChartPage() { async loadChartPage() {
try { try {
let series = []; let series = [];
const planData = this.$store.state.runPlan.planData || []; const planData = this.$store.state.runPlan.planData || [];
const stations = this.$store.state.runPlan.stations || []; const stations = this.$store.state.runPlan.stations || [];
this.viewDisabled = true; this.viewDisabled = true;
this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations); this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
series = this.pushModels(series, [this.PlanConvert.initializeYaxis(stations)]); series = this.pushModels(series, [this.PlanConvert.initializeYaxis(stations)]);
series = this.pushModels(series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 0.5 })); series = this.pushModels(series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 0.5 }));
await this.loadInitData(series); await this.loadInitData(series);
await this.analyticalServiceNumber(this.$store.state.runPlan.editData); await this.analyticalServiceNumber(this.$store.state.runPlan.editData);
this.viewDisabled = false; this.viewDisabled = false;
} catch (error) { } catch (error) {
this.viewDisabled = false; this.viewDisabled = false;
this.$messageBox(this.$t('error.loadingOperationGraphFailed')); this.$messageBox(this.$t('error.loadingOperationGraphFailed'));
} }
}, },
async loadInitData(series) { async loadInitData(series) {
this.myChart && this.myChart.showLoading(); this.myChart && this.myChart.showLoading();
await this.xAxisInit(); await this.xAxisInit();
await this.yAxisInit(); await this.yAxisInit();
await this.loadInitChart(series); await this.loadInitChart(series);
this.myChart && this.myChart.hideLoading(); this.myChart && this.myChart.hideLoading();
}, },
pushModels(series, models) { pushModels(series, models) {
if (models && models.length) { if (models && models.length) {
models.forEach(elem => { models.forEach(elem => {
if (elem) { if (elem) {
series.push(elem); series.push(elem);
} }
}); });
} }
return series; return series;
}, },
popModels(series, models) { popModels(series, models) {
if (models && models.length) { if (models && models.length) {
models.forEach(elem => { models.forEach(elem => {
const index = series.indexOf(elem); const index = series.indexOf(elem);
if (index >= 0) { if (index >= 0) {
series.split(index, 1); series.split(index, 1);
} }
}); });
} }
return series; return series;
}, },
loadInitChart(series) { loadInitChart(series) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
const that = this; this.destroy();
// 加载echart配置
require.config(
{
paths: {
echarts: './js/dist'
}
}
);
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
require(
[
'echarts',
'echarts/lib/chart/line'
],
function (ec) {
that.destroy();
let startValue = 3600 + that.PlanConvert.TranslationTime; let startValue = 3600 + this.PlanConvert.TranslationTime;
const offsetTime = 3600; const offsetTime = 3600;
runDiagramGetTime(that.group).then(resp => { runDiagramGetTime(this.group).then(resp => {
startValue = resp.data - that.PlanConvert.TranslationTime; startValue = resp.data - this.PlanConvert.TranslationTime;
that.option.dataZoom[0].startValue = that.option.dataZoom[1].startValue = startValue - offsetTime; this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
that.option.dataZoom[0].endValue = that.option.dataZoom[1].endValue = startValue + offsetTime; this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
that.option.series = series; this.option.series = series;
that.myChart = ec.init(document.getElementById(that.runPlanId)); this.myChart = echarts.init(document.getElementById(this.runPlanId));
if (that.myChart) { if (this.myChart) {
that.myChart.setOption(that.option); this.myChart.setOption(this.option);
that.reSize({ width: that.$store.state.runPlan.width, height: that.$store.state.runPlan.height }); this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
that.myChart.on('click', that.mouseClick); this.myChart.on('click', this.mouseClick);
} }
resolve(true); });
}); resolve(true);
} } catch (error) {
); reject(error);
} catch (error) { }
reject(error); });
}
});
},
xAxisPointFormat(params) {
return timeFormat(params.value);
},
yAxisPointFormat(params) {
return this.PlanConvert.computedFormatYAxis(this.stations, params);
},
xAxisLableFormat(value, index) {
if (value % 60 === 0) {
return timeFormat(value);
}
},
yAxisLableFormat(value, index) {
return '';
},
xAxisInit() {
const list = [];
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time);
}
const startValue = 3600 * 6; },
const offsetTime = 3600 * 1; xAxisPointFormat(params) {
return timeFormat(params.value);
},
yAxisPointFormat(params) {
return this.PlanConvert.computedFormatYAxis(this.stations, params);
},
xAxisLableFormat(value, index) {
if (value % 60 === 0) {
return timeFormat(value);
}
},
yAxisLableFormat(value, index) {
return '';
},
xAxisInit() {
const list = [];
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time);
}
this.option.xAxis[0].data = list; const startValue = 3600 * 6;
if (!this.option.dataZoom[0].startValue) { const offsetTime = 3600 * 1;
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
}
if (!this.option.dataZoom[0].endValue) { this.option.xAxis[0].data = list;
this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime; if (!this.option.dataZoom[0].startValue) {
} this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
}, }
yAxisInit() {
if (Object.keys(this.PlanConvert).length) {
this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
}
},
axisTooltip(param) {
const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [
`Point Data <hr size=1 style=" margin: 3px 0">`,
`${this.$t('menu.stationName') + station.name}<br>`,
`${this.$t('menu.stationKilometerMark') + station.kmRange} km <br>`,
`${this.$t('menu.arrivalTime2') + timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
].join('');
},
mouseClick(params) {
const model = {
serviceNumber: params.seriesName
};
this.$store.dispatch('runPlan/setSelected', model);
},
reSize(opt) {
if (this.myChart) {
this.myChart.resize({
width: opt.width,
height: opt.height,
silent: false
});
}
},
destroy() {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.dispose();
this.myChart = null;
}
},
scheduleTouch() {
}, if (!this.option.dataZoom[0].endValue) {
trainNumTouch() { this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
}
},
yAxisInit() {
if (Object.keys(this.PlanConvert).length) {
this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
}
},
axisTooltip(param) {
const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [
`Point Data <hr size=1 style=" margin: 3px 0">`,
`${this.$t('menu.stationName') + station.name}<br>`,
`${this.$t('menu.stationKilometerMark') + station.kmRange} km <br>`,
`${this.$t('menu.arrivalTime2') + timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
].join('');
},
mouseClick(params) {
const model = {
serviceNumber: params.seriesName
};
this.$store.dispatch('runPlan/setSelected', model);
},
reSize(opt) {
if (this.myChart) {
this.myChart.resize({
width: opt.width,
height: opt.height,
silent: false
});
}
},
destroy() {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.dispose();
this.myChart = null;
}
},
scheduleTouch() {
} },
} trainNumTouch() {
}
}
}; };
</script> </script>
<style scoped rel="stylesheet/scss" lang="scss"> <style scoped rel="stylesheet/scss" lang="scss">

15
src/main.js
View File

@ -3,6 +3,7 @@ import Vue from 'vue';
import 'normalize.css/normalize.css'; // A modern alternative to CSS resets import 'normalize.css/normalize.css'; // A modern alternative to CSS resets
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
// import ELEMENT from 'element-ui';
import ElementLocale from 'element-ui/lib/locale'; import ElementLocale from 'element-ui/lib/locale';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
@ -34,17 +35,17 @@ Vue.use(VueI18n);
Vue.config.productionTip = false; Vue.config.productionTip = false;
export const i18n = new VueI18n({ export const i18n = new VueI18n({
locale: LangStorage.getLang('zh'), locale: LangStorage.getLang('zh'),
messages messages
}); });
ElementLocale.i18n((key, value) => i18n.t(key, value)); ElementLocale.i18n((key, value) => i18n.t(key, value));
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
store, store,
i18n, i18n,
render: h => h(App) render: h => h(App)
}); });

8
src/permission.js
View File

@ -126,6 +126,14 @@ router.beforeEach((to, from, next) => {
} }
}); });
NProgress.configure({
easing: 'ease', // 动画方式
speed: 500, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3 // 初始化时的最小百分比
});
router.afterEach(() => { router.afterEach(() => {
// 结束Progress // 结束Progress
NProgress.done(); NProgress.done();

154
src/router/index.js
View File

@ -4,101 +4,101 @@ import Router from 'vue-router';
Vue.use(Router); Vue.use(Router);
/* Layout */ /* Layout */
import Layout from '@/layout'; const Layout = () => import('@/layout');
import Login from '@/views/login/index'; const Login = () => import('@/views/login/index');
import Jlmap3dedit from '@/views/jlmap3d/edit/jlmap3dedit'; const Jlmap3dedit = () => import('@/views/jlmap3d/edit/jlmap3dedit');
import Jlmap3d from '@/views/jlmap3d/drive/jl3ddrive'; const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive');
import Display from '@/views/display/index'; const Display = () => import('@/views/display/index');
import DesignDisplay from '@/views/display/designIndex'; const DesignDisplay = () => import('@/views/display/designIndex');
import TrainRoom from '@/views/trainRoom/index'; const TrainRoom = () => import('@/views/trainRoom/index');
import JointTraining from '@/views/jointTraining/index'; const JointTraining = () => import('@/views/jointTraining/index');
import Error401 from '@/views/error-page/401'; const Error401 = () => import('@/views/error-page/401');
import Errpr404 from '@/views/error-page/404'; const Errpr404 = () => import('@/views/error-page/404');
import MapProduct from '@/views/system/product/index'; const MapProduct = () => import('@/views/system/product/index');
import Dictionary from '@/views/system/dictionary/index'; const Dictionary = () => import('@/views/system/dictionary/index');
import DictionaryDetail from '@/views/system/dictionaryDetail/index'; const DictionaryDetail = () => import('@/views/system/dictionaryDetail/index');
import UserControl from '@/views/system/userControl/index'; const UserControl = () => import('@/views/system/userControl/index');
import UserTraining from '@/views/system/userTraining/index'; const UserTraining = () => import('@/views/system/userTraining/index');
import UserExam from '@/views/system/userExam/index'; const UserExam = () => import('@/views/system/userExam/index');
import UserSimulation from '@/views/system/userSimulation/index'; const UserSimulation = () => import('@/views/system/userSimulation/index');
import ExistingSimulation from '@/views/system/existingSimulation/index'; const ExistingSimulation = () => import('@/views/system/existingSimulation/index');
import CacheControl from '@/views/system/cacheControl/index'; const CacheControl = () => import('@/views/system/cacheControl/index');
import SystemGenerate from '@/views/system/systemGenerate/index'; const SystemGenerate = () => import('@/views/system/systemGenerate/index');
import IbpDraw from '@/views/system/ibpDraw/index'; const IbpDraw = () => import('@/views/system/ibpDraw/index');
import Mapedit from '@/views/mapdraft/index'; const Mapedit = () => import('@/views/mapdraft/index');
import Taskmanage from '@/views/lesson/taskmanage/list'; const Taskmanage = () => import('@/views/lesson/taskmanage/list');
import TrainingRuleList from '@/views/lesson/trainingRule/list'; const TrainingRuleList = () => import('@/views/lesson/trainingRule/list');
import TrainingRuleEdit from '@/views/lesson/trainingRule/detail/index'; const TrainingRuleEdit = () => import('@/views/lesson/trainingRule/detail/index');
import Trainingmanage from '@/views/lesson/trainingmanage/index'; const Trainingmanage = () => import('@/views/lesson/trainingmanage/index');
import LessonEdit from '@/views/lesson/lessoncategory/index'; const LessonEdit = () => import('@/views/lesson/lessoncategory/index');
import LessonHome from '@/views/lesson/home'; const LessonHome = () => import('@/views/lesson/home');
import LessonDetail from '@/views/lesson/details'; const LessonDetail = () => import('@/views/lesson/details');
import ScriptmanageHome from '@/views/scriptManage/home'; const ScriptmanageHome = () => import('@/views/scriptManage/home');
import ScriptDisplay from '@/views/scriptManage/display/index'; const ScriptDisplay = () => import('@/views/scriptManage/display/index');
import TeachDetail from '@/views/teach/detail/index'; const TeachDetail = () => import('@/views/teach/detail/index');
import TeachHome from '@/views/teach/index'; const TeachHome = () => import('@/views/teach/index');
import Pay from '@/views/components/pay/index'; const Pay = () => import('@/views/components/pay/index');
import ExamHome from '@/views/exam/index'; const ExamHome = () => import('@/views/exam/index');
import ExamResult from '@/views/exam/result'; const ExamResult = () => import('@/views/exam/result');
import ExamDetail from '@/views/exam/detail/examDetail'; const ExamDetail = () => import('@/views/exam/detail/examDetail');
import ExamCourseDetail from '@/views/exam/detail/courseDetail'; const ExamCourseDetail = () => import('@/views/exam/detail/courseDetail');
import DemonstrationDetail from '@/views/demonstration/detail/index'; const DemonstrationDetail = () => import('@/views/demonstration/detail/index');
import PlanMonitorEditTool from '@/views/planMonitor/editTool/index'; const PlanMonitorEditTool = () => import('@/views/planMonitor/editTool/index');
import PlanMonitorEditUserTool from '@/views/planMonitor/editTool/userindex'; const PlanMonitorEditUserTool = () => import('@/views/planMonitor/editTool/userindex');
import PlanMonitorDetail from '@/views/planMonitor/detail'; const PlanMonitorDetail = () => import('@/views/planMonitor/detail');
import DesignPlatformHome from '@/views/designPlatform/home'; const DesignPlatformHome = () => import('@/views/designPlatform/home');
import DesignPlatform from '@/views/designPlatform/index'; const DesignPlatform = () => import('@/views/designPlatform/index');
import MapPreview from '@/views/designPlatform/mapPreview'; const MapPreview = () => import('@/views/designPlatform/mapPreview');
import DesignPlatformUser from '@/views/designUser/index'; const DesignPlatformUser = () => import('@/views/designUser/index');
import Package from '@/views/package/index'; const Package = () => import('@/views/package/index');
import PackageDraft from '@/views/package/draft/ruleForm'; const PackageDraft = () => import('@/views/package/draft/ruleForm');
import PackageDetail from '@/views/package/detail'; const PackageDetail = () => import('@/views/package/detail');
import PublishMap from '@/views/publish/publishMap/index'; const PublishMap = () => import('@/views/publish/publishMap/index');
import PublishMapDetail from '@/views/publish/publishMap/list'; // 发布历史 const PublishMapDetail = () => import('@/views/publish/publishMap/list'); // 发布历史
import ProductStatus from '@/views/publish/productStatus/index'; const ProductStatus = () => import('@/views/publish/productStatus/index');
import PublishLesson from '@/views/publish/publishLesson/index'; const PublishLesson = () => import('@/views/publish/publishLesson/index');
import RunPlanTemplate from '@/views/publish/runPlanTemplate/index'; const RunPlanTemplate = () => import('@/views/publish/runPlanTemplate/index');
import RunPlanCommon from '@/views/publish/runPlanCommon/index'; const RunPlanCommon = () => import('@/views/publish/runPlanCommon/index');
import RunPlanCommonDraft from '@/views/publish/runPlanCommon/draft'; const RunPlanCommonDraft = () => import('@/views/publish/runPlanCommon/draft');
import RunPlanEveryDay from '@/views/publish/runPlanEveryDay/index'; const RunPlanEveryDay = () => import('@/views/publish/runPlanEveryDay/index');
import RunplanView from '@/views/publish/runPlanEveryDay/runPlanView'; const RunplanView = () => import('@/views/publish/runPlanEveryDay/runPlanView');
import PublishExamRule from '@/views/publish/examRule/index'; const PublishExamRule = () => import('@/views/publish/examRule/index');
import PublishExamRuleDraft from '@/views/publish/examRule/draft/index'; const PublishExamRuleDraft = () => import('@/views/publish/examRule/draft/index');
import TrainingPlatform from '@/views/trainingPlatform/index'; const TrainingPlatform = () => import('@/views/trainingPlatform/index');
import Commodity from '@/views/orderauthor/commodity/index'; const Commodity = () => import('@/views/orderauthor/commodity/index');
import CommodityDraft from '@/views/orderauthor/commodity/draft'; const CommodityDraft = () => import('@/views/orderauthor/commodity/draft');
import OrderList from '@/views/orderauthor/order/list'; const OrderList = () => import('@/views/orderauthor/order/list');
import OrderDraft from '@/views/orderauthor/order/draft'; const OrderDraft = () => import('@/views/orderauthor/order/draft');
import Author from '@/views/orderauthor/author/index'; const Author = () => import('@/views/orderauthor/author/index');
import AuthorDraft from '@/views/orderauthor/author/draft/ruleForm'; const AuthorDraft = () => import('@/views/orderauthor/author/draft/ruleForm');
import Permission from '@/views/orderauthor/permission/index'; const Permission = () => import('@/views/orderauthor/permission/index');
import PermissionDetail from '@/views/orderauthor/permission/detail'; const PermissionDetail = () => import('@/views/orderauthor/permission/detail');
import PermissionDraft from '@/views/orderauthor/permission/package/ruleForm'; const PermissionDraft = () => import('@/views/orderauthor/permission/package/ruleForm');
import PermissionCreate from '@/views/orderauthor/permission/create/index'; const PermissionCreate = () => import('@/views/orderauthor/permission/create/index');
import UserRules from '@/views/orderauthor/rules/index'; const UserRules = () => import('@/views/orderauthor/rules/index');
import UserRulesDetail from '@/views/orderauthor/rules/detail'; const UserRulesDetail = () => import('@/views/orderauthor/rules/detail');
import LessonApproval from '@/views/approval/lesson/index'; const LessonApproval = () => import('@/views/approval/lesson/index');
import ScriptApproval from '@/views/approval/script/index'; const ScriptApproval = () => import('@/views/approval/script/index');
import RunPlanApproval from '@/views/approval/runPlan/index'; const RunPlanApproval = () => import('@/views/approval/runPlan/index');
import News from '@/views/news/index'; const News = () => import('@/views/news/index');
import { loginTitle } from '@/scripts/ConstDic'; import { loginTitle } from '@/scripts/ConstDic';
import { getSessionStorage } from '@/utils/auth'; import { getSessionStorage } from '@/utils/auth';

320
src/views/dashboard/echarts/demonstration.vue
View File

@ -7,169 +7,169 @@ import echarts from 'echarts';
import { getRelevanceMapList, getSimulationPrdList } from '@/api/statistics'; import { getRelevanceMapList, getSimulationPrdList } from '@/api/statistics';
export default { export default {
props: { props: {
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart'
}, },
size: { size: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
option: { option: {
backgroundColor: '#F0F2F5', backgroundColor: '#F0F2F5',
title: { title: {
top: 20, top: 20,
text: this.$t('dashboard.simulationStatistics'), text: this.$t('dashboard.simulationStatistics'),
textStyle: { textStyle: {
fontWeight: 'normal', fontWeight: 'normal',
fontSize: 18, fontSize: 18,
color: '#000000' color: '#000000'
}, },
left: 'center' left: 'center'
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
} }
}, },
legend: { legend: {
top: 20, top: 20,
orient: 'vertical', orient: 'vertical',
icon: 'rect', icon: 'rect',
itemWidth: 14, itemWidth: 14,
itemHeight: 5, itemHeight: 5,
itemGap: 13, itemGap: 13,
data: [], data: [],
right: '4%', right: '4%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#C0C0C0' color: '#C0C0C0'
} }
}, },
grid: { grid: {
top: 100, top: 100,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true
}, },
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
boundaryGap: true, boundaryGap: true,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
}, },
data: [] data: []
}], }],
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name: '(s)', name: '(s)',
axisTick: { axisTick: {
show: false show: false
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
}, },
axisLabel: { axisLabel: {
margin: 10, margin: 10,
textStyle: { textStyle: {
fontSize: 14 fontSize: 14
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
} }
}], }],
series: [] series: []
}, },
chart: null chart: null
}; };
}, },
watch: { watch: {
size() { size() {
return this.chart.resize({...this.size, silent: false}); return this.chart.resize({...this.size, silent: false});
} }
}, },
async created() { async created() {
await this.loadExamData(); await this.loadExamData();
}, },
mounted() { mounted() {
this.initChart(); this.initChart();
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return; return;
} }
this.chart.dispose(); this.chart.dispose();
this.chart = null; this.chart = null;
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption(this.option); this.chart.setOption(this.option);
}, },
async loadExamData() { async loadExamData() {
const data = []; const data = [];
const resp = await getRelevanceMapList(); const resp = await getRelevanceMapList();
if (resp) { if (resp) {
const info = resp.data || []; const info = resp.data || [];
for (var i = 0; i < info.length; i++) { for (var i = 0; i < info.length; i++) {
const item = { ...info[i], data: []}; const item = { ...info[i], data: []};
const rest = await getSimulationPrdList(info[i].id); const rest = await getSimulationPrdList(info[i].id);
if (rest) { if (rest) {
item.data = rest.data || []; item.data = rest.data || [];
} }
data.push(item); data.push(item);
} }
} }
this.option.series = []; this.option.series = [];
this.option.legend.data = []; this.option.legend.data = [];
this.option.xAxis[0].data = [this.$t('dashboard.comprehensiveExerciseCloudPlatform'), this.option.xAxis[0].data = [this.$t('dashboard.comprehensiveExerciseCloudPlatform'),
this.$t('dashboard.driverSimulatedDrivingSystem'), this.$t('dashboard.ATSLineAdjustmentWorkstation'), this.$t('dashboard.ATSLocalWorkstation')]; this.$t('dashboard.driverSimulatedDrivingSystem'), this.$t('dashboard.ATSLineAdjustmentWorkstation'), this.$t('dashboard.ATSLocalWorkstation')];
data.forEach(elem => { data.forEach(elem => {
this.option.legend.data.push(elem.name); this.option.legend.data.push(elem.name);
this.option.series.push({ this.option.series.push({
name: elem.name, name: elem.name,
type: 'bar', type: 'bar',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
symbolSize: 5, symbolSize: 5,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1
} }
}, },
data: [0, 0, 0, 0] data: [0, 0, 0, 0]
}); });
}); });
data.forEach((elem, i) => { data.forEach((elem, i) => {
elem.data.forEach(item => { elem.data.forEach(item => {
const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; }); const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; });
if (index >= 0) { if (index >= 0) {
this.option.series[i].data[index] = item.duration; this.option.series[i].data[index] = item.duration;
} }
}); });
}); });
this.chart.setOption(this.option); this.chart.setOption(this.option);
} }
} }
}; };
</script> </script>

326
src/views/dashboard/echarts/exam.vue
View File

@ -14,171 +14,171 @@ import echarts from 'echarts';
import { getExamTree, getstatsExamList, getExamChart } from '@/api/statistics'; import { getExamTree, getstatsExamList, getExamChart } from '@/api/statistics';
export default { export default {
props: { props: {
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart'
}, },
size: { size: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
lessonId: '', lessonId: '',
lessonList: [], lessonList: [],
option: { option: {
backgroundColor: '#F0F2F5', backgroundColor: '#F0F2F5',
title: { title: {
top: 20, top: 20,
text: this.$t('dashboard.testStatistics'), text: this.$t('dashboard.testStatistics'),
textStyle: { textStyle: {
fontWeight: 'normal', fontWeight: 'normal',
fontSize: 18, fontSize: 18,
color: '#000000' color: '#000000'
}, },
left: 'center' left: 'center'
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
} }
}, },
legend: { legend: {
top: 20, top: 20,
orient: 'vertical', orient: 'vertical',
icon: 'rect', icon: 'rect',
itemWidth: 14, itemWidth: 14,
itemHeight: 5, itemHeight: 5,
itemGap: 13, itemGap: 13,
data: [], data: [],
right: '4%', right: '4%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#C0C0C0' color: '#C0C0C0'
} }
}, },
grid: { grid: {
top: 100, top: 100,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true
}, },
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
boundaryGap: true, boundaryGap: true,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
}, },
data: [] data: []
}], }],
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name: '(score)', name: '(score)',
axisTick: { axisTick: {
show: false show: false
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
}, },
axisLabel: { axisLabel: {
margin: 10, margin: 10,
textStyle: { textStyle: {
fontSize: 14 fontSize: 14
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
} }
}], }],
series: [] series: []
}, },
chart: null chart: null
}; };
}, },
watch: { watch: {
size() { size() {
return this.chart.resize({...this.size, silent: false}); return this.chart.resize({...this.size, silent: false});
}, },
async lessonId(val) { async lessonId(val) {
await this.loadExamData(val); await this.loadExamData(val);
} }
}, },
mounted() { mounted() {
this.initChart(); this.initChart();
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return; return;
} }
this.chart.dispose(); this.chart.dispose();
this.chart = null; this.chart = null;
}, },
methods: { methods: {
initChart() { initChart() {
getExamTree().then(resp => { getExamTree().then(resp => {
this.lessonList = resp.data || []; this.lessonList = resp.data || [];
this.$nextTick(() => { this.$nextTick(() => {
if (this.lessonList[0]) { if (this.lessonList[0]) {
this.lessonId = this.lessonList[0].statsProjectId; this.lessonId = this.lessonList[0].statsProjectId;
} }
}); });
}); });
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption(this.option); this.chart.setOption(this.option);
}, },
async loadExamData(lessonId) { async loadExamData(lessonId) {
const serieName = (this.lessonList[this.lessonList.findIndex(elem => { return elem.statsProjectId == lessonId; })] || {}).statsProjectName || ''; const serieName = (this.lessonList[this.lessonList.findIndex(elem => { return elem.statsProjectId == lessonId; })] || {}).statsProjectName || '';
this.option.series = []; this.option.series = [];
this.option.xAxis[0].data = []; this.option.xAxis[0].data = [];
this.option.legend.data = [serieName]; this.option.legend.data = [serieName];
this.option.series = [{ this.option.series = [{
name: serieName, name: serieName,
type: 'bar', type: 'bar',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
symbolSize: 5, symbolSize: 5,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1
} }
}, },
data: [] data: []
}]; }];
if (lessonId) { if (lessonId) {
const resp = await getstatsExamList({lessonId}); const resp = await getstatsExamList({lessonId});
if (resp) { if (resp) {
const info = resp.data || []; const info = resp.data || [];
for (var i = 0; i < info.length; i++) { for (var i = 0; i < info.length; i++) {
var scores = []; var scores = [];
const exam = info[i]; const exam = info[i];
this.option.xAxis[0].data.push(exam.statsProjectName); this.option.xAxis[0].data.push(exam.statsProjectName);
const rest = await getExamChart({examId: exam.statsProjectId}); const rest = await getExamChart({examId: exam.statsProjectId});
if (rest) { if (rest) {
scores = (rest.data || []).map(elem => { return elem.score; }); scores = (rest.data || []).map(elem => { return elem.score; });
} }
this.option.series[0].data = scores; this.option.series[0].data = scores;
} }
} }
} }
this.chart.setOption(this.option); this.chart.setOption(this.option);
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>

322
src/views/dashboard/echarts/lesson.vue
View File

@ -7,169 +7,169 @@ import echarts from 'echarts';
import { getLessonList, getLessonTimeChart } from '@/api/statistics'; import { getLessonList, getLessonTimeChart } from '@/api/statistics';
export default { export default {
props: { props: {
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart'
}, },
size: { size: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
option: { option: {
backgroundColor: '#F0F2F5', backgroundColor: '#F0F2F5',
title: { title: {
top: 20, top: 20,
text: this.$t('dashboard.courseStatistics'), text: this.$t('dashboard.courseStatistics'),
textStyle: { textStyle: {
fontWeight: 'normal', fontWeight: 'normal',
fontSize: 18, fontSize: 18,
color: '#000000' color: '#000000'
}, },
left: 'center' left: 'center'
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
} }
}, },
legend: { legend: {
top: 20, top: 20,
orient: 'vertical', orient: 'vertical',
icon: 'rect', icon: 'rect',
itemWidth: 14, itemWidth: 14,
itemHeight: 5, itemHeight: 5,
itemGap: 13, itemGap: 13,
data: [], data: [],
right: '4%', right: '4%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#C0C0C0' color: '#C0C0C0'
} }
}, },
grid: { grid: {
top: 100, top: 100,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
containLabel: true containLabel: true
}, },
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
boundaryGap: true, boundaryGap: true,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
}, },
data: [] data: []
}], }],
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name: '(s)', name: '(s)',
axisTick: { axisTick: {
show: false show: false
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
}, },
axisLabel: { axisLabel: {
margin: 10, margin: 10,
textStyle: { textStyle: {
fontSize: 14 fontSize: 14
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#57617B' color: '#57617B'
} }
} }
}], }],
series: [] series: []
}, },
chart: null chart: null
}; };
}, },
watch: { watch: {
size() { size() {
return this.chart.resize({...this.size, silent: false}); return this.chart.resize({...this.size, silent: false});
} }
}, },
async created() { async created() {
await this.loadLessonData(); await this.loadLessonData();
}, },
mounted() { mounted() {
this.initChart(); this.initChart();
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return; return;
} }
this.chart.dispose(); this.chart.dispose();
this.chart = null; this.chart = null;
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption(this.option); this.chart.setOption(this.option);
}, },
async loadLessonData() { async loadLessonData() {
const data = []; const data = [];
const resp = await getLessonList(); const resp = await getLessonList();
if (resp) { if (resp) {
const info = resp.data || []; const info = resp.data || [];
for (var i = 0; i < info.length; i++) { for (var i = 0; i < info.length; i++) {
const item = { ...info[i], data: []}; const item = { ...info[i], data: []};
const rest = await getLessonTimeChart({id: info[i].statsProjectId}); const rest = await getLessonTimeChart({id: info[i].statsProjectId});
if (rest) { if (rest) {
item.data = rest.data || []; item.data = rest.data || [];
} }
data.push(item); data.push(item);
} }
} }
this.option.series = []; this.option.series = [];
this.option.legend.data = []; this.option.legend.data = [];
this.option.xAxis[0].data = [this.$t('dashboard.controlRightsTraining'), this.option.xAxis[0].data = [this.$t('dashboard.controlRightsTraining'),
this.$t('dashboard.signalTraining'),this.$t('dashboard.turnoutTraining'), this.$t('dashboard.sectionTraining'), this.$t('dashboard.stationTraining')]; this.$t('dashboard.signalTraining'), this.$t('dashboard.turnoutTraining'), this.$t('dashboard.sectionTraining'), this.$t('dashboard.stationTraining')];
data.forEach(elem => { data.forEach(elem => {
this.option.legend.data.push(elem.statsProjectName); this.option.legend.data.push(elem.statsProjectName);
this.option.series.push({ this.option.series.push({
name: elem.statsProjectName, name: elem.statsProjectName,
type: 'bar', type: 'bar',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
symbolSize: 5, symbolSize: 5,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1
} }
}, },
data: [0, 0, 0, 0, 0] data: [0, 0, 0, 0, 0]
}); });
}); });
data.forEach((elem, i) => { data.forEach((elem, i) => {
elem.data.forEach(item => { elem.data.forEach(item => {
const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; }); const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; });
if (index >= 0) { if (index >= 0) {
this.option.series[i].data[index] = item.duration; this.option.series[i].data[index] = item.duration;
} }
}); });
}); });
this.chart.setOption(this.option); this.chart.setOption(this.option);
} }
} }
}; };
</script> </script>

342
src/views/dashboard/echarts/permission.vue
View File

@ -14,184 +14,184 @@ import echarts from 'echarts';
import { listUserPermision } from '@/api/management/author'; import { listUserPermision } from '@/api/management/author';
export default { export default {
props: { props: {
id: { id: {
type: String, type: String,
default: 'chart' default: 'chart'
}, },
size: { size: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
option: { option: {
backgroundColor: '#fefefe', backgroundColor: '#fefefe',
title: { title: {
text: '', text: '',
subtext: '', subtext: '',
subtextStyle: { subtextStyle: {
color: '#909399' color: '#909399'
}, },
y: 20, y: 20,
left: 'center' left: 'center'
}, },
tooltip: { tooltip: {
}, },
grid: [{ grid: [{
top: '17%', top: '17%',
width: '45%', width: '45%',
bottom: '5%', bottom: '5%',
left: 50, left: 50,
containLabel: true containLabel: true
}], }],
xAxis: { xAxis: {
type: 'category', type: 'category',
show: false, show: false,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 60 rotate: 60
}, },
splitLine: { splitLine: {
show: false show: false
}, },
data: [] data: []
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
show: false, show: false,
minInterval: 1, minInterval: 1,
name: this.$t('dashboard.permissions') name: this.$t('dashboard.permissions')
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
z: 3, z: 3,
barWidth: 25, barWidth: 25,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, 0, 0, 0, 1,
[ [
{offset: 0, color: '#83bff6'}, {offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'}, {offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'} {offset: 1, color: '#188df0'}
] ]
) )
}, },
emphasis: { emphasis: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, 0, 0, 0, 1,
[ [
{offset: 0, color: '#2378f7'}, {offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'}, {offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'} {offset: 1, color: '#83bff6'}
] ]
) )
} }
}, },
tooltip: { tooltip: {
formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; } formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
}, },
data: [] data: []
}, { }, {
type: 'pie', type: 'pie',
radius: [0, '72%'], radius: [0, '72%'],
center: ['74%', '55%'], center: ['74%', '55%'],
tooltip: { tooltip: {
formatter: params => { return `${params.marker} ${params.name}: ${params.percent}% （${params.value}个）`; } formatter: params => { return `${params.marker} ${params.name}: ${params.percent}% （${params.value}个）`; }
}, },
data: [] data: []
}] }]
}, },
mapName: null, mapName: null,
mapNameList: [], mapNameList: [],
permissionList: [], permissionList: [],
chart: null chart: null
}; };
}, },
watch: { watch: {
size() { size() {
return this.chart.resize({...this.size, silent: false}); return this.chart.resize({...this.size, silent: false});
}, },
async mapName(val) { async mapName(val) {
await this.loadExamData(val); await this.loadExamData(val);
} }
}, },
mounted() { mounted() {
this.initChart(); this.initChart();
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return; return;
} }
this.chart.dispose(); this.chart.dispose();
this.chart = null; this.chart = null;
}, },
methods: { methods: {
initChart() { initChart() {
listUserPermision({pageSize: 9000, pageNum: 1}).then(resp => { listUserPermision({pageSize: 9000, pageNum: 1}).then(resp => {
this.permissionList = resp.data.list.filter(elem => { return parseInt(elem.status) > 0; }); this.permissionList = resp.data.list.filter(elem => { return parseInt(elem.status) > 0; });
this.mapNameList = [...new Set(this.permissionList.filter(elem => { return elem.mapName; }).map(elem => { return elem.mapName; }))]; this.mapNameList = [...new Set(this.permissionList.filter(elem => { return elem.mapName; }).map(elem => { return elem.mapName; }))];
this.$nextTick(() => { this.mapName = this.mapNameList[0] || ''; }); this.$nextTick(() => { this.mapName = this.mapNameList[0] || ''; });
}); });
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption(this.option); this.chart.setOption(this.option);
}, },
async loadExamData(mapName) { async loadExamData(mapName) {
if (mapName) { if (mapName) {
var permissionDict = {}; var permissionDict = {};
var permissionList = await this.$Dictionary.permissionType(); var permissionList = await this.$Dictionary.permissionType();
(permissionList ||[]).forEach(elem => { (permissionList || []).forEach(elem => {
permissionDict[elem.code] = elem.name; permissionDict[elem.code] = elem.name;
}); });
var permissionMap = { var permissionMap = {
'ATS现地工作站-课程权限': 0, 'ATS现地工作站-课程权限': 0,
'ATS行调工作站-课程权限': 0, 'ATS行调工作站-课程权限': 0,
'ATS现地工作站-考试权限': 0, 'ATS现地工作站-考试权限': 0,
'ATS行调工作站-考试权限': 0, 'ATS行调工作站-考试权限': 0,
'ATS现地工作站-仿真权限': 0, 'ATS现地工作站-仿真权限': 0,
'ATS行调工作站-仿真权限': 0, 'ATS行调工作站-仿真权限': 0,
'综合演练云平台-仿真权限': 0, '综合演练云平台-仿真权限': 0,
'司机模拟驾驶系统-仿真权限': 0, '司机模拟驾驶系统-仿真权限': 0,
'大屏系统权限': 0 '大屏系统权限': 0
}; };
(this.permissionList.filter(elem => { return elem.mapName == mapName; })|| []).forEach(elem => { (this.permissionList.filter(elem => { return elem.mapName == mapName; }) || []).forEach(elem => {
if (elem.prdName == Object.keys(permissionMap)[Object.keys(permissionMap).length -1]) { if (elem.prdName == Object.keys(permissionMap)[Object.keys(permissionMap).length - 1]) {
permissionMap[`${elem.prdName}`] = elem.remains; permissionMap[`${elem.prdName}`] = elem.remains;
} else { } else {
permissionMap[`${elem.prdName}-${permissionDict[elem.permissionType]}`] = elem.remains; permissionMap[`${elem.prdName}-${permissionDict[elem.permissionType]}`] = elem.remains;
} }
}); });
const keys = Object.keys(permissionMap); const keys = Object.keys(permissionMap);
const values = Object.values(permissionMap); const values = Object.values(permissionMap);
const sum = values.reduce((total, num) => { return total + num; }); const sum = values.reduce((total, num) => { return total + num; });
this.option.title.text = this.$t('dashboard.residualPermissionDistributionMap') + ` —— ${mapName}`; this.option.title.text = this.$t('dashboard.residualPermissionDistributionMap') + ` —— ${mapName}`;
this.option.title.subtext = this.$t('dashboard.totalPermissions') + `${sum}` + this.$t('dashboard.individual'); this.option.title.subtext = this.$t('dashboard.totalPermissions') + `${sum}` + this.$t('dashboard.individual');
this.option.xAxis.show = true; this.option.xAxis.show = true;
this.option.yAxis.show = true; this.option.yAxis.show = true;
this.option.xAxis.data = keys; this.option.xAxis.data = keys;
this.option.series[0].data = values; this.option.series[0].data = values;
this.option.series[1].data = keys.filter(name => { return permissionMap[name]; } ).map(name => { return {name, value: permissionMap[name]}; }); this.option.series[1].data = keys.filter(name => { return permissionMap[name]; } ).map(name => { return {name, value: permissionMap[name]}; });
} else { } else {
this.option.title.text =this.$t('dashboard.residualPermissionDistributionMap') + `（`+ this.$t('dashboard.noMapLineDataYetAvailable') +`）`; this.option.title.text = this.$t('dashboard.residualPermissionDistributionMap') + `（` + this.$t('dashboard.noMapLineDataYetAvailable') + `）`;
this.option.title.subtext = this.$t('dashboard.totalPermissions') + `0` + this.$t('dashboard.individual'); this.option.title.subtext = this.$t('dashboard.totalPermissions') + `0` + this.$t('dashboard.individual');
this.option.xAxis.show = false; this.option.xAxis.show = false;
this.option.yAxis.show = false; this.option.yAxis.show = false;
this.option.xAxis.data = []; this.option.xAxis.data = [];
this.option.series[0].data = []; this.option.series[0].data = [];
this.option.series[1].data = []; this.option.series[1].data = [];
} }
this.chart.setOption(this.option); this.chart.setOption(this.option);
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>

52
src/views/display/demon/runPlanView.vue
View File

@ -18,6 +18,7 @@ import { mapGetters } from 'vuex';
import { runDiagramGetTime } from '@/api/simulation'; import { runDiagramGetTime } from '@/api/simulation';
import { getPublishMapInfo } from '@/api/jmap/map'; import { getPublishMapInfo } from '@/api/jmap/map';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';
import echarts from 'echarts';
export default { export default {
name: 'RunPlanView', name: 'RunPlanView',
@ -214,46 +215,29 @@ export default {
loadInitChart(series) { loadInitChart(series) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
const that = this; if (this.myChart && this.myChart.isDisposed) {
// 加载echart配置 this.myChart.clear();
require.config( }
{
paths: {
echarts: './js/dist'
}
}
);
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
require(
[
'echarts',
'echarts/lib/chart/line'
],
function (ec) {
if (that.myChart && that.myChart.isDisposed) {
that.myChart.clear();
}
let startValue = 3600 + that.PlanConvert.TranslationTime; let startValue = 3600 + this.PlanConvert.TranslationTime;
const offsetTime = 3600; const offsetTime = 3600;
runDiagramGetTime(that.group).then(resp => { runDiagramGetTime(this.group).then(resp => {
startValue = resp.data - that.PlanConvert.TranslationTime; startValue = resp.data - this.PlanConvert.TranslationTime;
that.option.dataZoom[0].startValue = that.option.dataZoom[1].startValue = startValue - offsetTime; this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
that.option.dataZoom[0].endValue = that.option.dataZoom[1].endValue = startValue + offsetTime; this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
that.option.series = series; this.option.series = series;
that.myChart = ec.init(document.getElementById(that.runPlanId)); this.myChart = echarts.init(document.getElementById(this.runPlanId));
if (that.myChart) { if (this.myChart) {
that.myChart.setOption(that.option); this.myChart.setOption(this.option);
that.reSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight - 55 }); this.reSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight - 55 });
}
resolve(true);
});
} }
); });
resolve(true);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }
}); });
}, },
updateRunPlanData(data) { updateRunPlanData(data) {
const stations = this.$store.state.runPlan.stations; const stations = this.$store.state.runPlan.stations;

40
src/views/planMonitor/editTool/schedule.vue
View File

@ -30,6 +30,7 @@ import {getRpDetailByUserMapId, getUserMapDetailByMapId} from '@/api/designPlatf
import { loadMapDataById } from '@/utils/loaddata'; import { loadMapDataById } from '@/utils/loaddata';
import { getPublishMapInfo } from '@/api/jmap/map'; import { getPublishMapInfo } from '@/api/jmap/map';
import DataTable from './menus/components/dataTable'; import DataTable from './menus/components/dataTable';
import echarts from 'echarts';
export default { export default {
name: 'PlanSchedule', name: 'PlanSchedule',
@ -467,35 +468,16 @@ export default {
loadInitChart() { loadInitChart() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
const that = this; if (this.myChart && this.myChart.isDisposed) {
// 加载echart配置 this.myChart.clear();
require.config( }
{ if (this.$route.query.planName) {
paths: { this.option.title.text = this.mapName;
echarts: './js/dist' }
} this.myChart = echarts.init(document.getElementById(this.runPlanId));
} this.myChart.setOption(this.option);
); this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 resolve(true);
require(
[
'echarts',
'echarts/lib/chart/line'
],
function (ec) {
if (that.myChart && that.myChart.isDisposed) {
that.myChart.clear();
}
if (that.$route.query.planName) {
that.option.title.text = that.mapName;
}
that.myChart = ec.init(document.getElementById(that.runPlanId));
that.myChart.setOption(that.option);
that.reSize({ width: that.$store.state.runPlan.width, height: that.$store.state.runPlan.height });
// that.myChart.on('click', that.mouseClick);
resolve(true);
}
);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }

36
src/views/publish/runPlanEveryDay/runPlanView.vue
View File

@ -14,6 +14,7 @@ import { mapGetters } from 'vuex';
import { getStationList, queryRunPlan, queryRunPlanTemplate, queryRunPlanDaily } from '@/api/runplan'; import { getStationList, queryRunPlan, queryRunPlanTemplate, queryRunPlanDaily } from '@/api/runplan';
import { timeFormat } from '@/utils/date'; import { timeFormat } from '@/utils/date';
import { UrlConfig } from '@/router/index'; import { UrlConfig } from '@/router/index';
import echarts from 'echarts';
export default { export default {
name: 'RunPlan', name: 'RunPlan',
@ -279,32 +280,15 @@ export default {
loadInitChart() { loadInitChart() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
const that = this;
// 加载echart配置 if (this.myChart && this.myChart.isDisposed) {
require.config( this.myChart.clear();
{ }
paths: { this.myChart = echarts.init(document.getElementById(this.runPlanId));
echarts: './js/dist' this.myChart.setOption(this.option);
} this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
} // this.myChart.on('click', this.mouseClick);
); resolve(true);
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
require(
[
'echarts',
'echarts/lib/chart/line'
],
function (ec) {
if (that.myChart && that.myChart.isDisposed) {
that.myChart.clear();
}
that.myChart = ec.init(document.getElementById(that.runPlanId));
that.myChart.setOption(that.option);
that.reSize({ width: that.$store.state.runPlan.width, height: that.$store.state.runPlan.height });
// that.myChart.on('click', that.mouseClick);
resolve(true);
}
);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }

6
vue.config.js
View File

@ -65,7 +65,11 @@ module.exports = {
ignore: ['.*'] ignore: ['.*']
} }
]) ])
] ],
externals: {
'echarts': 'echarts' // 配置使用CDN
// 'element-ui': 'ELEMENT'
}
}, },
chainWebpack(config) { chainWebpack(config) {
config.plugins.delete('preload'); // TODO: need test config.plugins.delete('preload'); // TODO: need test