desc: 修改echarts加载方式
This commit is contained in:
zyy
parent
092603c2cc
commit
0cb102186f
@ -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",
|
||||
|
||||
@ -5,11 +5,16 @@
|
||||
<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">
|
||||
<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>
|
||||
<script src="/static/inflate.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>
|
||||
<body>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
|
||||
@ -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 <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() {
|
||||
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 <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>
|
||||
<style scoped rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@ -1,153 +1,133 @@
|
||||
<template>
|
||||
<div id="PlanSchedule" :style="{top: top+'px', height: height+'px'}">
|
||||
<div class="left">
|
||||
<div :id="runPlanId"></div>
|
||||
</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 id="PlanSchedule" :style="{top: top+'px', height: height+'px'}">
|
||||
<div class="left">
|
||||
<div :id="runPlanId" />
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { runDiagramGetTime } from '@/api/simulation';
|
||||
import DataTable from '../menusPlan/components/dataTable';
|
||||
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',
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
skinCode: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
maxWidth: {
|
||||
type: Number,
|
||||
require: true
|
||||
},
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
export default {
|
||||
name: 'PlanSchedule',
|
||||
components: {
|
||||
DataTable
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
components: {
|
||||
DataTable
|
||||
skinCode: {
|
||||
type: String,
|
||||
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
|
||||
}
|
||||
]
|
||||
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'
|
||||
},
|
||||
tripNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.tripNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'tripNumber',
|
||||
label: '车次号',
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
grid: {
|
||||
top: '30px',
|
||||
left: '120px',
|
||||
right: '40px',
|
||||
bottom: '65px',
|
||||
containLabel: true,
|
||||
backgroundColor: 'floralwhite'
|
||||
},
|
||||
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'
|
||||
toolbox: {
|
||||
right: '30px',
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: 'none'
|
||||
},
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1,
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
trigger: 'item',
|
||||
type: 'cross'
|
||||
},
|
||||
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,
|
||||
},
|
||||
formatter: this.axisTooltip,
|
||||
borderWidth: 1
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
@ -156,317 +136,330 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
formatter: this.yAxisLableFormat,
|
||||
formatter: this.xAxisLableFormat,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
xAxisIndex: 'all',
|
||||
snap: true,
|
||||
label: {
|
||||
formatter: this.yAxisPointFormat,
|
||||
backgroundColor: 'rgb(0,100,0,0.5)',
|
||||
color: 'white',
|
||||
formatter: this.xAxisPointFormat,
|
||||
backgroundColor: 'rgb(255,0,0,0.5)',
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 0,
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
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'
|
||||
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
|
||||
},
|
||||
absoluteTime: 2 * 3600,
|
||||
indexKmRangeMap: {}
|
||||
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: {}
|
||||
};
|
||||
},
|
||||
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: {
|
||||
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) {
|
||||
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]);
|
||||
tripNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: this.$store.state.runPlan.selected.serviceNumber, tripNumber: row.tripNumber });
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('runPlan', [
|
||||
'stations'
|
||||
])
|
||||
async analyticalServiceNumber(data) {
|
||||
this.serviceNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
|
||||
.map(serviceNumber => { return { serviceNumber }; });
|
||||
},
|
||||
mounted() {
|
||||
this.PlanConvert = this.$theme.loadPlanConvert(this.skinCode);
|
||||
async analyticalTripNumber(data) {
|
||||
this.tripNumberConfig.data = Object.keys(data || {})
|
||||
.sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
|
||||
.map(tripNumber => { return { tripNumber }; });
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy();
|
||||
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');
|
||||
|
||||
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: {
|
||||
serviceNumberChange(row) {
|
||||
if (row) {
|
||||
this.$store.dispatch('runPlan/setSelected', { serviceNumber: row.serviceNumber, tripNumber: null });
|
||||
let 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;
|
||||
let width = this.maxWidth * 0.85;
|
||||
let height = this.maxHeight;
|
||||
async loadChartPage() {
|
||||
try {
|
||||
let series = [];
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
const planData = this.$store.state.runPlan.planData;
|
||||
|
||||
let titleBar = document.getElementById('PlanTitleBar');
|
||||
let menuBar = document.getElementById('PlanMenuBar');
|
||||
let menuTool = document.getElementById('PlanMenuTool');
|
||||
let statusBar = document.getElementById('PlanStatusBar');
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
})
|
||||
},
|
||||
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);
|
||||
} 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);
|
||||
}
|
||||
});
|
||||
},
|
||||
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>
|
||||
<style scoped rel="stylesheet/scss" lang="scss" scoped>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
#PlanSchedule {
|
||||
@ -486,4 +479,4 @@
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -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 {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped rel="stylesheet/scss" lang="scss" scoped>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
#PlanSchedule {
|
||||
|
||||
@ -27,453 +27,437 @@ 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,
|
||||
required: 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: this.$t('menu.serviceNumber')
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
tripNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.tripNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'tripNumber',
|
||||
label: this.$t('menu.tripNumber')
|
||||
},
|
||||
{
|
||||
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,
|
||||
required: 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: this.$t('menu.serviceNumber')
|
||||
},
|
||||
{
|
||||
width: 40
|
||||
}
|
||||
]
|
||||
},
|
||||
tripNumberConfig: {
|
||||
data: [],
|
||||
highlightCurrentRow: true,
|
||||
handleChange: this.tripNumberChange,
|
||||
showClose: false,
|
||||
columns: [
|
||||
{
|
||||
prop: 'tripNumber',
|
||||
label: this.$t('menu.tripNumber')
|
||||
},
|
||||
{
|
||||
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 planData = this.$store.state.runPlan.planData || [];
|
||||
const stations = this.$store.state.runPlan.stations || [];
|
||||
if (this.height != height) {
|
||||
this.height = height - 20 * 2;
|
||||
}
|
||||
});
|
||||
},
|
||||
async loadChartPage() {
|
||||
try {
|
||||
let series = [];
|
||||
const planData = this.$store.state.runPlan.planData || [];
|
||||
const stations = this.$store.state.runPlan.stations || [];
|
||||
|
||||
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, { 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, { 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(this.$t('error.loadingOperationGraphFailed'));
|
||||
}
|
||||
},
|
||||
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(this.$t('error.loadingOperationGraphFailed'));
|
||||
}
|
||||
},
|
||||
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 {
|
||||
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);
|
||||
});
|
||||
}
|
||||
);
|
||||
} 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(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);
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
if (!this.option.dataZoom[0].startValue) {
|
||||
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
}
|
||||
const startValue = 3600 * 6;
|
||||
const offsetTime = 3600 * 1;
|
||||
|
||||
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">`,
|
||||
`${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() {
|
||||
this.option.xAxis[0].data = list;
|
||||
if (!this.option.dataZoom[0].startValue) {
|
||||
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
|
||||
}
|
||||
|
||||
},
|
||||
trainNumTouch() {
|
||||
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">`,
|
||||
`${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>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
|
||||
15
src/main.js
15
src/main.js
@ -3,6 +3,7 @@ import Vue from 'vue';
|
||||
import 'normalize.css/normalize.css'; // A modern alternative to CSS resets
|
||||
|
||||
import ElementUI from 'element-ui';
|
||||
// import ELEMENT from 'element-ui';
|
||||
import ElementLocale from 'element-ui/lib/locale';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
@ -34,17 +35,17 @@ Vue.use(VueI18n);
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
export const i18n = new VueI18n({
|
||||
locale: LangStorage.getLang('zh'),
|
||||
messages
|
||||
locale: LangStorage.getLang('zh'),
|
||||
messages
|
||||
});
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value));
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
render: h => h(App)
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
render: h => h(App)
|
||||
});
|
||||
|
||||
|
||||
@ -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(() => {
|
||||
// 结束Progress
|
||||
NProgress.done();
|
||||
|
||||
@ -4,101 +4,101 @@ import Router from 'vue-router';
|
||||
Vue.use(Router);
|
||||
|
||||
/* Layout */
|
||||
import Layout from '@/layout';
|
||||
import Login from '@/views/login/index';
|
||||
const Layout = () => import('@/layout');
|
||||
const Login = () => import('@/views/login/index');
|
||||
|
||||
import Jlmap3dedit from '@/views/jlmap3d/edit/jlmap3dedit';
|
||||
import Jlmap3d from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
import Display from '@/views/display/index';
|
||||
import DesignDisplay from '@/views/display/designIndex';
|
||||
const Jlmap3dedit = () => import('@/views/jlmap3d/edit/jlmap3dedit');
|
||||
const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive');
|
||||
const Display = () => import('@/views/display/index');
|
||||
const DesignDisplay = () => import('@/views/display/designIndex');
|
||||
|
||||
import TrainRoom from '@/views/trainRoom/index';
|
||||
import JointTraining from '@/views/jointTraining/index';
|
||||
const TrainRoom = () => import('@/views/trainRoom/index');
|
||||
const JointTraining = () => import('@/views/jointTraining/index');
|
||||
|
||||
import Error401 from '@/views/error-page/401';
|
||||
import Errpr404 from '@/views/error-page/404';
|
||||
const Error401 = () => import('@/views/error-page/401');
|
||||
const Errpr404 = () => import('@/views/error-page/404');
|
||||
|
||||
import MapProduct from '@/views/system/product/index';
|
||||
import Dictionary from '@/views/system/dictionary/index';
|
||||
import DictionaryDetail from '@/views/system/dictionaryDetail/index';
|
||||
import UserControl from '@/views/system/userControl/index';
|
||||
import UserTraining from '@/views/system/userTraining/index';
|
||||
import UserExam from '@/views/system/userExam/index';
|
||||
import UserSimulation from '@/views/system/userSimulation/index';
|
||||
import ExistingSimulation from '@/views/system/existingSimulation/index';
|
||||
import CacheControl from '@/views/system/cacheControl/index';
|
||||
import SystemGenerate from '@/views/system/systemGenerate/index';
|
||||
import IbpDraw from '@/views/system/ibpDraw/index';
|
||||
const MapProduct = () => import('@/views/system/product/index');
|
||||
const Dictionary = () => import('@/views/system/dictionary/index');
|
||||
const DictionaryDetail = () => import('@/views/system/dictionaryDetail/index');
|
||||
const UserControl = () => import('@/views/system/userControl/index');
|
||||
const UserTraining = () => import('@/views/system/userTraining/index');
|
||||
const UserExam = () => import('@/views/system/userExam/index');
|
||||
const UserSimulation = () => import('@/views/system/userSimulation/index');
|
||||
const ExistingSimulation = () => import('@/views/system/existingSimulation/index');
|
||||
const CacheControl = () => import('@/views/system/cacheControl/index');
|
||||
const SystemGenerate = () => import('@/views/system/systemGenerate/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';
|
||||
import TrainingRuleList from '@/views/lesson/trainingRule/list';
|
||||
import TrainingRuleEdit from '@/views/lesson/trainingRule/detail/index';
|
||||
import Trainingmanage from '@/views/lesson/trainingmanage/index';
|
||||
import LessonEdit from '@/views/lesson/lessoncategory/index';
|
||||
import LessonHome from '@/views/lesson/home';
|
||||
import LessonDetail from '@/views/lesson/details';
|
||||
const Taskmanage = () => import('@/views/lesson/taskmanage/list');
|
||||
const TrainingRuleList = () => import('@/views/lesson/trainingRule/list');
|
||||
const TrainingRuleEdit = () => import('@/views/lesson/trainingRule/detail/index');
|
||||
const Trainingmanage = () => import('@/views/lesson/trainingmanage/index');
|
||||
const LessonEdit = () => import('@/views/lesson/lessoncategory/index');
|
||||
const LessonHome = () => import('@/views/lesson/home');
|
||||
const LessonDetail = () => import('@/views/lesson/details');
|
||||
|
||||
import ScriptmanageHome from '@/views/scriptManage/home';
|
||||
import ScriptDisplay from '@/views/scriptManage/display/index';
|
||||
const ScriptmanageHome = () => import('@/views/scriptManage/home');
|
||||
const ScriptDisplay = () => import('@/views/scriptManage/display/index');
|
||||
|
||||
import TeachDetail from '@/views/teach/detail/index';
|
||||
import TeachHome from '@/views/teach/index';
|
||||
import Pay from '@/views/components/pay/index';
|
||||
const TeachDetail = () => import('@/views/teach/detail/index');
|
||||
const TeachHome = () => import('@/views/teach/index');
|
||||
const Pay = () => import('@/views/components/pay/index');
|
||||
|
||||
import ExamHome from '@/views/exam/index';
|
||||
import ExamResult from '@/views/exam/result';
|
||||
import ExamDetail from '@/views/exam/detail/examDetail';
|
||||
import ExamCourseDetail from '@/views/exam/detail/courseDetail';
|
||||
const ExamHome = () => import('@/views/exam/index');
|
||||
const ExamResult = () => import('@/views/exam/result');
|
||||
const ExamDetail = () => import('@/views/exam/detail/examDetail');
|
||||
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';
|
||||
import PlanMonitorEditUserTool from '@/views/planMonitor/editTool/userindex';
|
||||
import PlanMonitorDetail from '@/views/planMonitor/detail';
|
||||
const PlanMonitorEditTool = () => import('@/views/planMonitor/editTool/index');
|
||||
const PlanMonitorEditUserTool = () => import('@/views/planMonitor/editTool/userindex');
|
||||
const PlanMonitorDetail = () => import('@/views/planMonitor/detail');
|
||||
|
||||
import DesignPlatformHome from '@/views/designPlatform/home';
|
||||
import DesignPlatform from '@/views/designPlatform/index';
|
||||
import MapPreview from '@/views/designPlatform/mapPreview';
|
||||
const DesignPlatformHome = () => import('@/views/designPlatform/home');
|
||||
const DesignPlatform = () => import('@/views/designPlatform/index');
|
||||
const MapPreview = () => import('@/views/designPlatform/mapPreview');
|
||||
|
||||
import DesignPlatformUser from '@/views/designUser/index';
|
||||
const DesignPlatformUser = () => import('@/views/designUser/index');
|
||||
|
||||
import Package from '@/views/package/index';
|
||||
import PackageDraft from '@/views/package/draft/ruleForm';
|
||||
import PackageDetail from '@/views/package/detail';
|
||||
const Package = () => import('@/views/package/index');
|
||||
const PackageDraft = () => import('@/views/package/draft/ruleForm');
|
||||
const PackageDetail = () => import('@/views/package/detail');
|
||||
|
||||
import PublishMap from '@/views/publish/publishMap/index';
|
||||
import PublishMapDetail from '@/views/publish/publishMap/list'; // 发布历史
|
||||
import ProductStatus from '@/views/publish/productStatus/index';
|
||||
import PublishLesson from '@/views/publish/publishLesson/index';
|
||||
import RunPlanTemplate from '@/views/publish/runPlanTemplate/index';
|
||||
import RunPlanCommon from '@/views/publish/runPlanCommon/index';
|
||||
import RunPlanCommonDraft from '@/views/publish/runPlanCommon/draft';
|
||||
import RunPlanEveryDay from '@/views/publish/runPlanEveryDay/index';
|
||||
import RunplanView from '@/views/publish/runPlanEveryDay/runPlanView';
|
||||
import PublishExamRule from '@/views/publish/examRule/index';
|
||||
import PublishExamRuleDraft from '@/views/publish/examRule/draft/index';
|
||||
const PublishMap = () => import('@/views/publish/publishMap/index');
|
||||
const PublishMapDetail = () => import('@/views/publish/publishMap/list'); // 发布历史
|
||||
const ProductStatus = () => import('@/views/publish/productStatus/index');
|
||||
const PublishLesson = () => import('@/views/publish/publishLesson/index');
|
||||
const RunPlanTemplate = () => import('@/views/publish/runPlanTemplate/index');
|
||||
const RunPlanCommon = () => import('@/views/publish/runPlanCommon/index');
|
||||
const RunPlanCommonDraft = () => import('@/views/publish/runPlanCommon/draft');
|
||||
const RunPlanEveryDay = () => import('@/views/publish/runPlanEveryDay/index');
|
||||
const RunplanView = () => import('@/views/publish/runPlanEveryDay/runPlanView');
|
||||
const PublishExamRule = () => import('@/views/publish/examRule/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';
|
||||
import CommodityDraft from '@/views/orderauthor/commodity/draft';
|
||||
import OrderList from '@/views/orderauthor/order/list';
|
||||
import OrderDraft from '@/views/orderauthor/order/draft';
|
||||
import Author from '@/views/orderauthor/author/index';
|
||||
import AuthorDraft from '@/views/orderauthor/author/draft/ruleForm';
|
||||
import Permission from '@/views/orderauthor/permission/index';
|
||||
import PermissionDetail from '@/views/orderauthor/permission/detail';
|
||||
import PermissionDraft from '@/views/orderauthor/permission/package/ruleForm';
|
||||
import PermissionCreate from '@/views/orderauthor/permission/create/index';
|
||||
import UserRules from '@/views/orderauthor/rules/index';
|
||||
import UserRulesDetail from '@/views/orderauthor/rules/detail';
|
||||
const Commodity = () => import('@/views/orderauthor/commodity/index');
|
||||
const CommodityDraft = () => import('@/views/orderauthor/commodity/draft');
|
||||
const OrderList = () => import('@/views/orderauthor/order/list');
|
||||
const OrderDraft = () => import('@/views/orderauthor/order/draft');
|
||||
const Author = () => import('@/views/orderauthor/author/index');
|
||||
const AuthorDraft = () => import('@/views/orderauthor/author/draft/ruleForm');
|
||||
const Permission = () => import('@/views/orderauthor/permission/index');
|
||||
const PermissionDetail = () => import('@/views/orderauthor/permission/detail');
|
||||
const PermissionDraft = () => import('@/views/orderauthor/permission/package/ruleForm');
|
||||
const PermissionCreate = () => import('@/views/orderauthor/permission/create/index');
|
||||
const UserRules = () => import('@/views/orderauthor/rules/index');
|
||||
const UserRulesDetail = () => import('@/views/orderauthor/rules/detail');
|
||||
|
||||
import LessonApproval from '@/views/approval/lesson/index';
|
||||
import ScriptApproval from '@/views/approval/script/index';
|
||||
import RunPlanApproval from '@/views/approval/runPlan/index';
|
||||
import News from '@/views/news/index';
|
||||
const LessonApproval = () => import('@/views/approval/lesson/index');
|
||||
const ScriptApproval = () => import('@/views/approval/script/index');
|
||||
const RunPlanApproval = () => import('@/views/approval/runPlan/index');
|
||||
const News = () => import('@/views/news/index');
|
||||
|
||||
import { loginTitle } from '@/scripts/ConstDic';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
|
||||
@ -7,169 +7,169 @@ import echarts from 'echarts';
|
||||
import { getRelevanceMapList, getSimulationPrdList } from '@/api/statistics';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: this.$t('dashboard.simulationStatistics'),
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
color: '#000000'
|
||||
},
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: [],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#C0C0C0'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(s)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: []
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.loadExamData();
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadExamData() {
|
||||
const data = [];
|
||||
const resp = await getRelevanceMapList();
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
const item = { ...info[i], data: []};
|
||||
const rest = await getSimulationPrdList(info[i].id);
|
||||
if (rest) {
|
||||
item.data = rest.data || [];
|
||||
}
|
||||
data.push(item);
|
||||
}
|
||||
}
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: this.$t('dashboard.simulationStatistics'),
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
color: '#000000'
|
||||
},
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: [],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#C0C0C0'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(s)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: []
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.loadExamData();
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadExamData() {
|
||||
const data = [];
|
||||
const resp = await getRelevanceMapList();
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
const item = { ...info[i], data: []};
|
||||
const rest = await getSimulationPrdList(info[i].id);
|
||||
if (rest) {
|
||||
item.data = rest.data || [];
|
||||
}
|
||||
data.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
this.option.series = [];
|
||||
this.option.legend.data = [];
|
||||
this.option.xAxis[0].data = [this.$t('dashboard.comprehensiveExerciseCloudPlatform'),
|
||||
this.option.series = [];
|
||||
this.option.legend.data = [];
|
||||
this.option.xAxis[0].data = [this.$t('dashboard.comprehensiveExerciseCloudPlatform'),
|
||||
this.$t('dashboard.driverSimulatedDrivingSystem'), this.$t('dashboard.ATSLineAdjustmentWorkstation'), this.$t('dashboard.ATSLocalWorkstation')];
|
||||
data.forEach(elem => {
|
||||
this.option.legend.data.push(elem.name);
|
||||
this.option.series.push({
|
||||
name: elem.name,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0]
|
||||
});
|
||||
});
|
||||
data.forEach(elem => {
|
||||
this.option.legend.data.push(elem.name);
|
||||
this.option.series.push({
|
||||
name: elem.name,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0]
|
||||
});
|
||||
});
|
||||
|
||||
data.forEach((elem, i) => {
|
||||
elem.data.forEach(item => {
|
||||
const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; });
|
||||
if (index >= 0) {
|
||||
this.option.series[i].data[index] = item.duration;
|
||||
}
|
||||
});
|
||||
});
|
||||
data.forEach((elem, i) => {
|
||||
elem.data.forEach(item => {
|
||||
const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; });
|
||||
if (index >= 0) {
|
||||
this.option.series[i].data[index] = item.duration;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -14,171 +14,171 @@ import echarts from 'echarts';
|
||||
import { getExamTree, getstatsExamList, getExamChart } from '@/api/statistics';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lessonId: '',
|
||||
lessonList: [],
|
||||
option: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: this.$t('dashboard.testStatistics'),
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
color: '#000000'
|
||||
},
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: [],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#C0C0C0'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(score)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: []
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
},
|
||||
async lessonId(val) {
|
||||
await this.loadExamData(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
getExamTree().then(resp => {
|
||||
this.lessonList = resp.data || [];
|
||||
this.$nextTick(() => {
|
||||
if (this.lessonList[0]) {
|
||||
this.lessonId = this.lessonList[0].statsProjectId;
|
||||
}
|
||||
});
|
||||
});
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadExamData(lessonId) {
|
||||
const serieName = (this.lessonList[this.lessonList.findIndex(elem => { return elem.statsProjectId == lessonId; })] || {}).statsProjectName || '';
|
||||
this.option.series = [];
|
||||
this.option.xAxis[0].data = [];
|
||||
this.option.legend.data = [serieName];
|
||||
this.option.series = [{
|
||||
name: serieName,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}];
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lessonId: '',
|
||||
lessonList: [],
|
||||
option: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: this.$t('dashboard.testStatistics'),
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
color: '#000000'
|
||||
},
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: [],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#C0C0C0'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(score)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: []
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
},
|
||||
async lessonId(val) {
|
||||
await this.loadExamData(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
getExamTree().then(resp => {
|
||||
this.lessonList = resp.data || [];
|
||||
this.$nextTick(() => {
|
||||
if (this.lessonList[0]) {
|
||||
this.lessonId = this.lessonList[0].statsProjectId;
|
||||
}
|
||||
});
|
||||
});
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadExamData(lessonId) {
|
||||
const serieName = (this.lessonList[this.lessonList.findIndex(elem => { return elem.statsProjectId == lessonId; })] || {}).statsProjectName || '';
|
||||
this.option.series = [];
|
||||
this.option.xAxis[0].data = [];
|
||||
this.option.legend.data = [serieName];
|
||||
this.option.series = [{
|
||||
name: serieName,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}];
|
||||
|
||||
if (lessonId) {
|
||||
const resp = await getstatsExamList({lessonId});
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
var scores = [];
|
||||
const exam = info[i];
|
||||
this.option.xAxis[0].data.push(exam.statsProjectName);
|
||||
const rest = await getExamChart({examId: exam.statsProjectId});
|
||||
if (rest) {
|
||||
scores = (rest.data || []).map(elem => { return elem.score; });
|
||||
}
|
||||
this.option.series[0].data = scores;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (lessonId) {
|
||||
const resp = await getstatsExamList({lessonId});
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
var scores = [];
|
||||
const exam = info[i];
|
||||
this.option.xAxis[0].data.push(exam.statsProjectName);
|
||||
const rest = await getExamChart({examId: exam.statsProjectId});
|
||||
if (rest) {
|
||||
scores = (rest.data || []).map(elem => { return elem.score; });
|
||||
}
|
||||
this.option.series[0].data = scores;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -7,169 +7,169 @@ import echarts from 'echarts';
|
||||
import { getLessonList, getLessonTimeChart } from '@/api/statistics';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: this.$t('dashboard.courseStatistics'),
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
color: '#000000'
|
||||
},
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: [],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#C0C0C0'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(s)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: []
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.loadLessonData();
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadLessonData() {
|
||||
const data = [];
|
||||
const resp = await getLessonList();
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
const item = { ...info[i], data: []};
|
||||
const rest = await getLessonTimeChart({id: info[i].statsProjectId});
|
||||
if (rest) {
|
||||
item.data = rest.data || [];
|
||||
}
|
||||
data.push(item);
|
||||
}
|
||||
}
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: this.$t('dashboard.courseStatistics'),
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
color: '#000000'
|
||||
},
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: [],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#C0C0C0'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(s)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: []
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.loadLessonData();
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadLessonData() {
|
||||
const data = [];
|
||||
const resp = await getLessonList();
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
const item = { ...info[i], data: []};
|
||||
const rest = await getLessonTimeChart({id: info[i].statsProjectId});
|
||||
if (rest) {
|
||||
item.data = rest.data || [];
|
||||
}
|
||||
data.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
this.option.series = [];
|
||||
this.option.legend.data = [];
|
||||
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')];
|
||||
data.forEach(elem => {
|
||||
this.option.legend.data.push(elem.statsProjectName);
|
||||
this.option.series.push({
|
||||
name: elem.statsProjectName,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0, 0]
|
||||
});
|
||||
});
|
||||
this.option.series = [];
|
||||
this.option.legend.data = [];
|
||||
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')];
|
||||
data.forEach(elem => {
|
||||
this.option.legend.data.push(elem.statsProjectName);
|
||||
this.option.series.push({
|
||||
name: elem.statsProjectName,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0, 0]
|
||||
});
|
||||
});
|
||||
|
||||
data.forEach((elem, i) => {
|
||||
elem.data.forEach(item => {
|
||||
const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; });
|
||||
if (index >= 0) {
|
||||
this.option.series[i].data[index] = item.duration;
|
||||
}
|
||||
});
|
||||
});
|
||||
data.forEach((elem, i) => {
|
||||
elem.data.forEach(item => {
|
||||
const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; });
|
||||
if (index >= 0) {
|
||||
this.option.series[i].data[index] = item.duration;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -14,184 +14,184 @@ import echarts from 'echarts';
|
||||
import { listUserPermision } from '@/api/management/author';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
backgroundColor: '#fefefe',
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
subtextStyle: {
|
||||
color: '#909399'
|
||||
},
|
||||
y: 20,
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
grid: [{
|
||||
top: '17%',
|
||||
width: '45%',
|
||||
bottom: '5%',
|
||||
left: 50,
|
||||
containLabel: true
|
||||
}],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
show: false,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 60
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
minInterval: 1,
|
||||
name: this.$t('dashboard.permissions')
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
z: 3,
|
||||
barWidth: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#83bff6'},
|
||||
{offset: 0.5, color: '#188df0'},
|
||||
{offset: 1, color: '#188df0'}
|
||||
]
|
||||
)
|
||||
},
|
||||
emphasis: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#2378f7'},
|
||||
{offset: 0.7, color: '#2378f7'},
|
||||
{offset: 1, color: '#83bff6'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
|
||||
},
|
||||
data: []
|
||||
}, {
|
||||
type: 'pie',
|
||||
radius: [0, '72%'],
|
||||
center: ['74%', '55%'],
|
||||
tooltip: {
|
||||
formatter: params => { return `${params.marker} ${params.name}: ${params.percent}% （${params.value}个）`; }
|
||||
},
|
||||
data: []
|
||||
}]
|
||||
},
|
||||
mapName: null,
|
||||
mapNameList: [],
|
||||
permissionList: [],
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
},
|
||||
async mapName(val) {
|
||||
await this.loadExamData(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
listUserPermision({pageSize: 9000, pageNum: 1}).then(resp => {
|
||||
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.$nextTick(() => { this.mapName = this.mapNameList[0] || ''; });
|
||||
});
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadExamData(mapName) {
|
||||
if (mapName) {
|
||||
var permissionDict = {};
|
||||
var permissionList = await this.$Dictionary.permissionType();
|
||||
(permissionList ||[]).forEach(elem => {
|
||||
permissionDict[elem.code] = elem.name;
|
||||
});
|
||||
var permissionMap = {
|
||||
'ATS现地工作站-课程权限': 0,
|
||||
'ATS行调工作站-课程权限': 0,
|
||||
'ATS现地工作站-考试权限': 0,
|
||||
'ATS行调工作站-考试权限': 0,
|
||||
'ATS现地工作站-仿真权限': 0,
|
||||
'ATS行调工作站-仿真权限': 0,
|
||||
'综合演练云平台-仿真权限': 0,
|
||||
'司机模拟驾驶系统-仿真权限': 0,
|
||||
'大屏系统权限': 0
|
||||
};
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
backgroundColor: '#fefefe',
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
subtextStyle: {
|
||||
color: '#909399'
|
||||
},
|
||||
y: 20,
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
grid: [{
|
||||
top: '17%',
|
||||
width: '45%',
|
||||
bottom: '5%',
|
||||
left: 50,
|
||||
containLabel: true
|
||||
}],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
show: false,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 60
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
minInterval: 1,
|
||||
name: this.$t('dashboard.permissions')
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
z: 3,
|
||||
barWidth: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#83bff6'},
|
||||
{offset: 0.5, color: '#188df0'},
|
||||
{offset: 1, color: '#188df0'}
|
||||
]
|
||||
)
|
||||
},
|
||||
emphasis: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#2378f7'},
|
||||
{offset: 0.7, color: '#2378f7'},
|
||||
{offset: 1, color: '#83bff6'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
|
||||
},
|
||||
data: []
|
||||
}, {
|
||||
type: 'pie',
|
||||
radius: [0, '72%'],
|
||||
center: ['74%', '55%'],
|
||||
tooltip: {
|
||||
formatter: params => { return `${params.marker} ${params.name}: ${params.percent}% （${params.value}个）`; }
|
||||
},
|
||||
data: []
|
||||
}]
|
||||
},
|
||||
mapName: null,
|
||||
mapNameList: [],
|
||||
permissionList: [],
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
},
|
||||
async mapName(val) {
|
||||
await this.loadExamData(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
listUserPermision({pageSize: 9000, pageNum: 1}).then(resp => {
|
||||
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.$nextTick(() => { this.mapName = this.mapNameList[0] || ''; });
|
||||
});
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadExamData(mapName) {
|
||||
if (mapName) {
|
||||
var permissionDict = {};
|
||||
var permissionList = await this.$Dictionary.permissionType();
|
||||
(permissionList || []).forEach(elem => {
|
||||
permissionDict[elem.code] = elem.name;
|
||||
});
|
||||
var permissionMap = {
|
||||
'ATS现地工作站-课程权限': 0,
|
||||
'ATS行调工作站-课程权限': 0,
|
||||
'ATS现地工作站-考试权限': 0,
|
||||
'ATS行调工作站-考试权限': 0,
|
||||
'ATS现地工作站-仿真权限': 0,
|
||||
'ATS行调工作站-仿真权限': 0,
|
||||
'综合演练云平台-仿真权限': 0,
|
||||
'司机模拟驾驶系统-仿真权限': 0,
|
||||
'大屏系统权限': 0
|
||||
};
|
||||
|
||||
(this.permissionList.filter(elem => { return elem.mapName == mapName; })|| []).forEach(elem => {
|
||||
if (elem.prdName == Object.keys(permissionMap)[Object.keys(permissionMap).length -1]) {
|
||||
permissionMap[`${elem.prdName}`] = elem.remains;
|
||||
} else {
|
||||
permissionMap[`${elem.prdName}-${permissionDict[elem.permissionType]}`] = elem.remains;
|
||||
}
|
||||
});
|
||||
(this.permissionList.filter(elem => { return elem.mapName == mapName; }) || []).forEach(elem => {
|
||||
if (elem.prdName == Object.keys(permissionMap)[Object.keys(permissionMap).length - 1]) {
|
||||
permissionMap[`${elem.prdName}`] = elem.remains;
|
||||
} else {
|
||||
permissionMap[`${elem.prdName}-${permissionDict[elem.permissionType]}`] = elem.remains;
|
||||
}
|
||||
});
|
||||
|
||||
const keys = Object.keys(permissionMap);
|
||||
const values = Object.values(permissionMap);
|
||||
const sum = values.reduce((total, num) => { return total + num; });
|
||||
const keys = Object.keys(permissionMap);
|
||||
const values = Object.values(permissionMap);
|
||||
const sum = values.reduce((total, num) => { return total + num; });
|
||||
|
||||
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.text = this.$t('dashboard.residualPermissionDistributionMap') + ` —— ${mapName}`;
|
||||
this.option.title.subtext = this.$t('dashboard.totalPermissions') + `${sum}` + this.$t('dashboard.individual');
|
||||
|
||||
this.option.xAxis.show = true;
|
||||
this.option.yAxis.show = true;
|
||||
this.option.xAxis.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[1].data = keys.filter(name => { return permissionMap[name]; } ).map(name => { return {name, value: permissionMap[name]}; });
|
||||
} else {
|
||||
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.xAxis.show = false;
|
||||
this.option.yAxis.show = false;
|
||||
this.option.xAxis.data = [];
|
||||
this.option.series[0].data = [];
|
||||
this.option.series[1].data = [];
|
||||
}
|
||||
this.option.series[0].data = values;
|
||||
this.option.series[1].data = keys.filter(name => { return permissionMap[name]; } ).map(name => { return {name, value: permissionMap[name]}; });
|
||||
} else {
|
||||
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.xAxis.show = false;
|
||||
this.option.yAxis.show = false;
|
||||
this.option.xAxis.data = [];
|
||||
this.option.series[0].data = [];
|
||||
this.option.series[1].data = [];
|
||||
}
|
||||
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -18,6 +18,7 @@ import { mapGetters } from 'vuex';
|
||||
import { runDiagramGetTime } from '@/api/simulation';
|
||||
import { getPublishMapInfo } from '@/api/jmap/map';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'RunPlanView',
|
||||
@ -214,46 +215,29 @@ 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) {
|
||||
if (that.myChart && that.myChart.isDisposed) {
|
||||
that.myChart.clear();
|
||||
}
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.clear();
|
||||
}
|
||||
|
||||
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: document.documentElement.clientWidth, height: document.documentElement.clientHeight - 55 });
|
||||
}
|
||||
resolve(true);
|
||||
});
|
||||
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: document.documentElement.clientWidth, height: document.documentElement.clientHeight - 55 });
|
||||
}
|
||||
);
|
||||
});
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
updateRunPlanData(data) {
|
||||
const stations = this.$store.state.runPlan.stations;
|
||||
|
||||
@ -30,6 +30,7 @@ import {getRpDetailByUserMapId, getUserMapDetailByMapId} from '@/api/designPlatf
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { getPublishMapInfo } from '@/api/jmap/map';
|
||||
import DataTable from './menus/components/dataTable';
|
||||
import echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'PlanSchedule',
|
||||
@ -467,35 +468,16 @@ export default {
|
||||
loadInitChart() {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const that = this;
|
||||
// 加载echart配置
|
||||
require.config(
|
||||
{
|
||||
paths: {
|
||||
echarts: './js/dist'
|
||||
}
|
||||
}
|
||||
);
|
||||
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
|
||||
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);
|
||||
}
|
||||
);
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.clear();
|
||||
}
|
||||
if (this.$route.query.planName) {
|
||||
this.option.title.text = this.mapName;
|
||||
}
|
||||
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);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@ import { mapGetters } from 'vuex';
|
||||
import { getStationList, queryRunPlan, queryRunPlanTemplate, queryRunPlanDaily } from '@/api/runplan';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'RunPlan',
|
||||
@ -279,32 +280,15 @@ export default {
|
||||
loadInitChart() {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const that = this;
|
||||
// 加载echart配置
|
||||
require.config(
|
||||
{
|
||||
paths: {
|
||||
echarts: './js/dist'
|
||||
}
|
||||
}
|
||||
);
|
||||
// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
|
||||
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);
|
||||
}
|
||||
);
|
||||
|
||||
if (this.myChart && this.myChart.isDisposed) {
|
||||
this.myChart.clear();
|
||||
}
|
||||
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 });
|
||||
// this.myChart.on('click', this.mouseClick);
|
||||
resolve(true);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
|
||||
@ -65,7 +65,11 @@ module.exports = {
|
||||
ignore: ['.*']
|
||||
}
|
||||
])
|
||||
]
|
||||
],
|
||||
externals: {
|
||||
'echarts': 'echarts' // 配置使用CDN
|
||||
// 'element-ui': 'ELEMENT'
|
||||
}
|
||||
},
|
||||
chainWebpack(config) {
|
||||
config.plugins.delete('preload'); // TODO: need test
|
||||
|
||||
Loading…
Reference in New Issue
Block a user