From 0cb102186f1010359664ab0faf27b91b0be0a8aa Mon Sep 17 00:00:00 2001 From: zyy <1787816799@qq.com> Date: Tue, 12 Nov 2019 17:20:23 +0800 Subject: [PATCH] =?UTF-8?q?desc:=20=E4=BF=AE=E6=94=B9echarts=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - public/index.html | 7 +- .../beijing_01/planSchedule/schedule.vue | 868 +++++++++--------- .../chengdu_03/planSchedule/schedule.vue | 849 +++++++++-------- .../chengdu_04/planSchedule/schedule.vue | 51 +- .../theme/fuzhou_01/planSchedule/schedule.vue | 834 +++++++++-------- src/main.js | 15 +- src/permission.js | 8 + src/router/index.js | 154 ++-- src/views/dashboard/echarts/demonstration.vue | 320 +++---- src/views/dashboard/echarts/exam.vue | 326 +++---- src/views/dashboard/echarts/lesson.vue | 322 +++---- src/views/dashboard/echarts/permission.vue | 342 +++---- src/views/display/demon/runPlanView.vue | 52 +- src/views/planMonitor/editTool/schedule.vue | 40 +- .../publish/runPlanEveryDay/runPlanView.vue | 36 +- vue.config.js | 6 +- 17 files changed, 2088 insertions(+), 2143 deletions(-) diff --git a/package.json b/package.json index f7539cc53..d56a100c6 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ }, "dependencies": { "axios": "0.18.0", - "echarts": "^4.2.1", "element-ui": "2.7.2", "file-saver": "^1.3.3", "js-cookie": "2.2.0", diff --git a/public/index.html b/public/index.html index b1302f38a..8a86dbf8a 100644 --- a/public/index.html +++ b/public/index.html @@ -5,11 +5,16 @@ + <%= webpackConfig.name %> + + - + diff --git a/src/jmap/theme/beijing_01/planSchedule/schedule.vue b/src/jmap/theme/beijing_01/planSchedule/schedule.vue index 3733445b4..71d229850 100644 --- a/src/jmap/theme/beijing_01/planSchedule/schedule.vue +++ b/src/jmap/theme/beijing_01/planSchedule/schedule.vue @@ -27,453 +27,471 @@ import { mapGetters } from 'vuex'; import { timeFormat } from '@/utils/date'; import { runDiagramGetTime } from '@/api/simulation'; import DataTable from '../menusPlan/components/dataTable'; +import echarts from 'echarts'; export default { - name: 'PlanSchedule', - components: { - DataTable - }, - props: { - group: { - type: String, - required: true - }, - skinCode: { - type: String, - required: true - }, - maxWidth: { - type: Number, - require: true - }, - maxHeight: { - type: Number, - required: true - } - }, - data() { - return { - top: 0, - height: 0, - heights: [100, 100], - runPlanId: 'plan-schedule-id', - myChart: null, - PlanConvert: {}, - serviceNumberConfig: { - data: [], - 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' - }, - 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, - borderWidth: 1 - }, - xAxis: [ - { - type: 'category', - boundaryGap: false, - data: [], - axisLine: { - onZero: false, - lineStyle: { - 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: { - onZero: false, - lineStyle: { - width: 2, - color: '#d14a61' - } - }, - 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 - }, - series: [], - 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: {} - }; - }, - computed: { - ...mapGetters('runPlan', [ - 'stations' - ]) - }, - 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; - }); + name: 'PlanSchedule', + components: { + DataTable + }, + props: { + group: { + type: String, + required: true + }, + skinCode: { + type: String, + required: true + }, + maxWidth: { + type: Number, + require: true + }, + maxHeight: { + type: Number, + required: true + } + }, + data() { + return { + top: 0, + height: 0, + heights: [100, 100], + runPlanId: 'plan-schedule-id', + myChart: null, + PlanConvert: {}, + serviceNumberConfig: { + data: [], + 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' + }, + 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, + borderWidth: 1 + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: [], + axisLine: { + onZero: false, + lineStyle: { + 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: { + onZero: false, + lineStyle: { + width: 2, + color: '#d14a61' + } + }, + 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 + }, + series: [], + 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: {} + }; + }, + computed: { + ...mapGetters('runPlan', [ + 'stations' + ]) + }, + 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]); - } - }, - 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); - } - } - }, - 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; - const width = this.maxWidth * 0.85; - let height = this.maxHeight; + 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]); + } + }, + 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); + } + } + }, + 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; + 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'); + 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 (titleBar) { + top += (titleBar.offsetHeight || 0); + } - if (menuBar) { - top += (menuBar.offsetHeight || 0); - } + if (menuBar) { + top += (menuBar.offsetHeight || 0); + } - if (menuTool) { - top += (menuTool.offsetHeight || 0); - } + if (menuTool) { + top += (menuTool.offsetHeight || 0); + } - if (statusBar) { - height -= (statusBar.offsetHeight || 0); - } + if (statusBar) { + height -= (statusBar.offsetHeight || 0); + } - height = height - top; - this.$store.dispatch('runPlan/resize', { width, height }); + height = height - top; + this.$store.dispatch('runPlan/resize', { width, height }); - if (this.top != top) { - this.top = top; - } + if (this.top != top) { + this.top = top; + } - if (this.height != height) { - this.height = height - 20 * 2; - } - }); - }, - async loadChartPage() { - try { - let series = []; - const stations = this.$store.state.runPlan.stations; - const planData = this.$store.state.runPlan.planData; + if (this.height != height) { + this.height = height - 20 * 2; + } + }); + }, + async loadChartPage() { + try { + let series = []; + const stations = this.$store.state.runPlan.stations; + const 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; + 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); - } - }); - } + } 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 => { - const index = series.indexOf(elem); - if (index >= 0) { - series.split(index, 1); - } - }); - } + 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 { - const that = this; - // 加载echart配置 - require.config( - { - paths: { - echarts: './js/dist' - } - } - ); - // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 - require( - [ - 'echarts', - 'echarts/lib/chart/line' - ], - function (ec) { - that.destroy(); + return series; + }, + loadInitChart(series) { + // return new Promise((resolve, reject) => { + // try { + // const 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; - const offsetTime = 3600; + // 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); - } - }); - }, - 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); - } + // 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(); - const startValue = 3600 * 6; - const offsetTime = 3600 * 1; + let startValue = 3600 + this.PlanConvert.TranslationTime; + const offsetTime = 3600; - this.option.xAxis[0].data = list; - if (!this.option.dataZoom[0].startValue) { - this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime; - } + 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); + } + }); + }, + 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) { - 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
`, - `车站名称: ${station.name}
`, - `车站公里标: ${station.kmRange} km
`, - `到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})
` - ].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() { + const startValue = 3600 * 6; + const offsetTime = 3600 * 1; - }, - trainNumTouch() { + 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
`, + `车站名称: ${station.name}
`, + `车站公里标: ${station.kmRange} km
`, + `到站时间: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})
` + ].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() { + + } + } }; \ No newline at end of file + diff --git a/src/jmap/theme/chengdu_04/planSchedule/schedule.vue b/src/jmap/theme/chengdu_04/planSchedule/schedule.vue index abe46d9aa..d0c181f27 100644 --- a/src/jmap/theme/chengdu_04/planSchedule/schedule.vue +++ b/src/jmap/theme/chengdu_04/planSchedule/schedule.vue @@ -27,6 +27,7 @@ import { mapGetters } from 'vuex'; import { timeFormat } from '@/utils/date'; import { runDiagramGetTime } from '@/api/simulation'; import DataTable from '../menusPlan/components/dataTable'; +import echarts from 'echarts'; export default { name: 'PlanSchedule', @@ -358,42 +359,24 @@ export default { loadInitChart(series) { return new Promise((resolve, reject) => { try { - const that = this; - // 加载echart配置 - require.config( - { - paths: { - echarts: './js/dist' - } - } - ); - // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 - require( - [ - 'echarts', - 'echarts/lib/chart/line' - ], - function (ec) { - that.destroy(); + this.destroy(); - let startValue = 3600 + that.PlanConvert.TranslationTime; - const offsetTime = 3600; + let startValue = 3600 + this.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); + 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); } @@ -476,7 +459,7 @@ export default { } }; -