desc: 修改echarts加载方式

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

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",

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>

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',
@ -356,46 +357,63 @@ export default {
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;
// 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);
// }
// });
this.destroy();
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);
}
);
} catch (error) {
reject(error);
} }
}); });
}, },

View File

@ -1,13 +1,23 @@
<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>
<div class="right"> <div class="right">
<data-table ref="serviceTable" :height="height/2" :config="serviceNumberConfig" @touch="scheduleTouch" <data-table
:style="{top: top-height/2+'px'}"></data-table> ref="serviceTable"
<data-table ref="tripTable" :height="height/2" :config="tripNumberConfig" @touch="trainNumTouch" :height="height/2"
:style="{top: top-height/2+'px'}"></data-table> :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>
</div> </div>
</template> </template>
@ -17,9 +27,13 @@
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: {
DataTable
},
props: { props: {
group: { group: {
type: String, type: String,
@ -38,9 +52,6 @@
required: true required: true
} }
}, },
components: {
DataTable
},
data() { data() {
return { return {
top: 0, top: 0,
@ -57,7 +68,7 @@
columns: [ columns: [
{ {
prop: 'serviceNumber', prop: 'serviceNumber',
label: '表号', label: '表号'
}, },
{ {
width: 40 width: 40
@ -72,7 +83,7 @@
columns: [ columns: [
{ {
prop: 'tripNumber', prop: 'tripNumber',
label: '车次号', label: '车次号'
}, },
{ {
width: 40 width: 40
@ -110,7 +121,7 @@
type: 'cross' type: 'cross'
}, },
formatter: this.axisTooltip, formatter: this.axisTooltip,
borderWidth: 1, borderWidth: 1
}, },
xAxis: [ xAxis: [
{ {
@ -135,7 +146,7 @@
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'
} }
} }
} }
@ -146,7 +157,7 @@
show: false show: false
}, },
axisTick: { axisTick: {
show: false, show: false
}, },
axisLine: { axisLine: {
onZero: false, onZero: false,
@ -157,23 +168,23 @@
}, },
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',
@ -192,7 +203,7 @@
}, },
absoluteTime: 2 * 3600, absoluteTime: 2 * 3600,
indexKmRangeMap: {} indexKmRangeMap: {}
} };
}, },
watch: { watch: {
maxWidth() { maxWidth() {
@ -208,16 +219,16 @@
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) {
let 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) {
let 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]);
} }
}, },
@ -236,7 +247,7 @@
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 });
let 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);
} }
@ -249,24 +260,24 @@
}, },
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;
let width = this.maxWidth * 0.85; const width = this.maxWidth * 0.85;
let height = this.maxHeight; let height = this.maxHeight;
let titleBar = document.getElementById('PlanTitleBar'); const titleBar = document.getElementById('PlanTitleBar');
let menuBar = document.getElementById('PlanMenuBar'); const menuBar = document.getElementById('PlanMenuBar');
let menuTool = document.getElementById('PlanMenuTool'); const menuTool = document.getElementById('PlanMenuTool');
let statusBar = document.getElementById('PlanStatusBar'); const statusBar = document.getElementById('PlanStatusBar');
if (titleBar) { if (titleBar) {
top += (titleBar.offsetHeight || 0); top += (titleBar.offsetHeight || 0);
@ -294,13 +305,13 @@
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 = [];
let stations = this.$store.state.runPlan.stations; const stations = this.$store.state.runPlan.stations;
let 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);
@ -328,7 +339,7 @@
if (elem) { if (elem) {
series.push(elem); series.push(elem);
} }
}) });
} }
return series; return series;
@ -336,11 +347,11 @@
popModels(series, models) { popModels(series, models) {
if (models && models.length) { if (models && models.length) {
models.forEach(elem => { models.forEach(elem => {
let 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;
@ -348,46 +359,28 @@
loadInitChart(series) { loadInitChart(series) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
let that = this; this.destroy();
//echart let startValue = 3600 + this.PlanConvert.TranslationTime;
require.config( const offsetTime = 3600;
{
paths: {
echarts: './js/dist'
}
}
);
//
require(
[
'echarts',
'echarts/lib/chart/line',
],
function (ec) {
that.destroy();
let startValue = 3600 + that.PlanConvert.TranslationTime; runDiagramGetTime(this.group).then(resp => {
let offsetTime = 3600; startValue = resp.data - this.PlanConvert.TranslationTime;
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
runDiagramGetTime(that.group).then(resp => { this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
startValue = resp.data - that.PlanConvert.TranslationTime; this.option.series = series;
that.option.dataZoom[0].startValue = that.option.dataZoom[1].startValue = startValue - offsetTime; this.myChart = echarts.init(document.getElementById(this.runPlanId));
that.option.dataZoom[0].endValue = that.option.dataZoom[1].endValue = startValue + offsetTime; if (this.myChart) {
that.option.series = series; this.myChart.setOption(this.option);
that.myChart = ec.init(document.getElementById(that.runPlanId)); this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
if (that.myChart) { this.myChart.on('click', this.mouseClick);
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); resolve(true);
}
);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }
}); });
}, },
xAxisPointFormat(params) { xAxisPointFormat(params) {
return timeFormat(params.value); return timeFormat(params.value);
@ -404,13 +397,13 @@
return ''; return '';
}, },
xAxisInit() { xAxisInit() {
let list = []; const list = [];
for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) { for (var time = 0 + this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time); list.push(time);
} }
let startValue = 3600 * 6; const startValue = 3600 * 6;
let offsetTime = 3600 * 1; const offsetTime = 3600 * 1;
this.option.xAxis[0].data = list; this.option.xAxis[0].data = list;
if (!this.option.dataZoom[0].startValue) { if (!this.option.dataZoom[0].startValue) {
@ -428,7 +421,7 @@
} }
}, },
axisTooltip(param) { axisTooltip(param) {
let station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' }; const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [ return [
`Point Data <hr size=1 style=" margin: 3px 0">`, `Point Data <hr size=1 style=" margin: 3px 0">`,
`车站名称: ${station.name}<br>`, `车站名称: ${station.name}<br>`,
@ -437,9 +430,9 @@
].join(''); ].join('');
}, },
mouseClick(params) { mouseClick(params) {
let model = { const model = {
serviceNumber: params.seriesName serviceNumber: params.seriesName
} };
this.$store.dispatch('runPlan/setSelected', model); this.$store.dispatch('runPlan/setSelected', model);
}, },
reSize(opt) { reSize(opt) {
@ -464,9 +457,9 @@
} }
} }
} };
</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 {

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 {

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,46 +359,29 @@ 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);
} }
}); });
}, },
xAxisPointFormat(params) { xAxisPointFormat(params) {
return timeFormat(params.value); return timeFormat(params.value);

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';

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();

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';

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;

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(
{
paths: {
echarts: './js/dist'
} }
if (this.$route.query.planName) {
this.option.title.text = this.mapName;
} }
); this.myChart = echarts.init(document.getElementById(this.runPlanId));
// this.myChart.setOption(this.option);
require( this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
[
'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); resolve(true);
}
);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }

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: {
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 });
require( // this.myChart.on('click', this.mouseClick);
[
'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); resolve(true);
}
);
} catch (error) { } catch (error) {
reject(error); reject(error);
} }

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