修改配置
This commit is contained in:
ival
parent
fd2b66e984
commit
68c8757dad
@ -391,7 +391,7 @@ class Signal extends Group {
|
||||
}
|
||||
|
||||
// 信号机进路自动触发模式状态类型
|
||||
setAutoRouteOpen() {
|
||||
setAutoTriggerOpen() {
|
||||
this.sigAuto.setColor(this.style.Signal.auto.autoTrigger);
|
||||
if (this.model.atsAutoTriggerShow) {
|
||||
this.sigAuto.show();
|
||||
@ -462,7 +462,7 @@ class Signal extends Group {
|
||||
case '01': this.setAutoClose(); break; // 隐藏 隐藏自动信号和自动进路
|
||||
case '02': this.setAutoSignalOpen(); break; // 显示 设置自动信号模式状态类型
|
||||
case '03': this.setAutoRouteOpen(); break; // 显示 设置自动进路模式状态类型
|
||||
case '04': this.setAutoRouteOpen(); break; // 显示 信号机进路自动触发模式状态类型
|
||||
case '04': this.setAutoTriggerOpen(); break; // 显示 信号机进路自动触发模式状态类型
|
||||
}
|
||||
|
||||
/** 延时解锁*/
|
||||
|
||||
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div :id="id" :style="{height: height+'px',width: width+'px'}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
backgroundColor: '#394056',
|
||||
title: {
|
||||
top: 20,
|
||||
text: 'Requests',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16,
|
||||
color: '#F1F1F3'
|
||||
},
|
||||
left: '1%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: ['CMCC', 'CTCC', 'CUCC'],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#F1F1F3'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(%)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'CMCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
||||
}, {
|
||||
name: 'CTCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 136, 212, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(0, 136, 212, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(0,136,212)',
|
||||
borderColor: 'rgba(0,136,212,0.2)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
||||
}, {
|
||||
name: 'CUCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(219, 50, 51, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(219, 50, 51, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(219,50,51)',
|
||||
borderColor: 'rgba(219,50,51,0.2)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
|
||||
}]
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
return parseInt(this.size.width) * 2;
|
||||
},
|
||||
height() {
|
||||
return this.size.height;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({width: this.width, height: this.height, silent: false});
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
<div :id="id" :style="{height: height+'px', width: width+'px'}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -7,21 +7,13 @@ import echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -205,9 +197,15 @@ export default {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
watch: {
|
||||
size() {
|
||||
return this.resize(this.width, this.height);
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
},
|
||||
width() {
|
||||
return this.size.width;
|
||||
},
|
||||
height() {
|
||||
return this.size.height;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -224,9 +222,6 @@ export default {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
resize(opt) {
|
||||
this.myChart.resize({...opt, silent: false});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,50 +1,45 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="12">
|
||||
<echarts-lesson id="lesson" ref="lesson" :width="width + 'px'" :height="height+ 'px'" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<echarts-lesson id="exam" ref="exam" :width="width + 'px'" :height="height+ 'px'" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<echarts-lesson id="deomon" ref="deomon" :width="width + 'px'" :height="height+ 'px'" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<echarts-lesson id="test" ref="test" :width="width + 'px'" :height="height+ 'px'" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="item-row" style="margin-top: 20px">
|
||||
<div class="item-col">
|
||||
<echarts-lesson id="lesson" ref="lesson" :size="size" />
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<echarts-lesson id="exam" ref="exam" :size="size" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<echarts-demon id="demon" ref="demon" :size="size" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import EchartsLesson from './echarts/lesson';
|
||||
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
|
||||
import EchartsLesson from './echarts/lesson';
|
||||
import EchartsDemon from './echarts/demonstration';
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
EchartsLesson
|
||||
EchartsLesson,
|
||||
EchartsDemon
|
||||
},
|
||||
mixins: [WindowResizeHandler],
|
||||
data() {
|
||||
return {
|
||||
width: 0,
|
||||
height: 0
|
||||
size: {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
resizeHandler() {
|
||||
this.width = this._clientWidth / 2;
|
||||
this.height = this._clientHeight - 80;
|
||||
this.size = {
|
||||
width: (this._clientWidth - 60) / 2,
|
||||
height: (this._clientHeight - 100) / 2
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -53,7 +48,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
&-container {
|
||||
margin: 30px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
@ -61,4 +56,19 @@ export default {
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-col {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user