Merge branch 'test-tj' of https://git.code.tencent.com/lian-cbtc/jl-client into test-tj
This commit is contained in:
joylink_cuiweidong
commit
e9997a2f7f
@ -1,68 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="menu"
|
|
||||||
@click.self="onClick"
|
|
||||||
@mouseenter.self="onMouseEnter"
|
|
||||||
@mouseleave.self="onMouseLeave">
|
|
||||||
<slot name="prefix"/>
|
|
||||||
<span class="menu-label" :class="{'menu-check': check}" :style="{color: color}">{{menu.title}}</span>
|
|
||||||
<slot name="append"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'MenuItem',
|
|
||||||
props: {
|
|
||||||
menu: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
check: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click');
|
|
||||||
},
|
|
||||||
onMouseEnter() {
|
|
||||||
this.$emit('mouseenter');
|
|
||||||
},
|
|
||||||
onMouseLeave() {
|
|
||||||
this.$emit('mouseleave');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.menu {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0 17px;
|
|
||||||
margin: 0;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
&-label {
|
|
||||||
border: 1px dashed transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-check {
|
|
||||||
border: 1px dashed #8f8f8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #C4E1FF;
|
|
||||||
border: 1px solid #49A4FE;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background: #C4E1FF;
|
|
||||||
border: 1px solid #49A4FE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -2,12 +2,13 @@
|
|||||||
<div class="nav" :class="elNavClass" :style="{background: background}">
|
<div class="nav" :class="elNavClass" :style="{background: background}">
|
||||||
<div class="nav-menu" v-for="(el,i) in menus" :key="i">
|
<div class="nav-menu" v-for="(el,i) in menus" :key="i">
|
||||||
<menu-item :menu="el"
|
<menu-item :menu="el"
|
||||||
:check="active==i"
|
:actived="active==i"
|
||||||
@click="onClick(el, i)"
|
@click="onClick(el, i)"
|
||||||
@mouseenter="onMouseEnter(el, i)"
|
@mouseenter="onMouseEnter(el, i)"
|
||||||
@mouseleave="onMouseLeave(el, i)" :color="color" >
|
@mouseleave="onMouseLeave(el, i)" :color="color" >
|
||||||
<template v-if="el.children&&el.children.length" slot="append">
|
<template v-if="el.children&&el.children.length" slot="append">
|
||||||
<menu-list style="transform: translateY(-3px);" v-show="index==i" :menus="el.children" :background="background" :color="color" :elMenuClass="elMenuClass"/>
|
<menu-list style="transform: translateY(-3px);" v-show="index==i" :menus="el.children" :background="background" :color="color" :elMenuClass="elMenuClass"
|
||||||
|
@close="onClose(el, i)" />
|
||||||
</template>
|
</template>
|
||||||
</menu-item>
|
</menu-item>
|
||||||
</div>
|
</div>
|
||||||
@ -31,11 +32,11 @@ export default {
|
|||||||
},
|
},
|
||||||
background: {
|
background: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#F6F6F6'
|
default: '#fff'
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#222'
|
default: '#000'
|
||||||
},
|
},
|
||||||
elNavClass: {
|
elNavClass: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -54,7 +55,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClick(el, i){
|
onClick(el, i){
|
||||||
this.active = i;
|
this.active = i
|
||||||
if (el.disabled) return;
|
if (el.disabled) return;
|
||||||
if (el.handle) {
|
if (el.handle) {
|
||||||
el.handle(el);
|
el.handle(el);
|
||||||
@ -63,11 +64,13 @@ export default {
|
|||||||
},
|
},
|
||||||
onMouseEnter(el, i) {
|
onMouseEnter(el, i) {
|
||||||
this.index = i;
|
this.index = i;
|
||||||
console.log(333333333333333);
|
|
||||||
},
|
},
|
||||||
onMouseLeave(el, i) {
|
onMouseLeave(el, i) {
|
||||||
console.log(444444444444444);
|
|
||||||
this.index = -1;
|
this.index = -1;
|
||||||
|
},
|
||||||
|
onClose(el, i) {
|
||||||
|
this.active = i
|
||||||
|
this.onMouseLeave(el, i);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -77,8 +80,10 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
&-menu {
|
&-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div class="menu"
|
||||||
|
@click.stop="onClick"
|
||||||
|
@mouseenter.stop="onMouseEnter"
|
||||||
|
@mouseleave.stop="onMouseLeave">
|
||||||
|
<slot name="prefix"/>
|
||||||
|
<span class="menu-label" :class="{'__active': actived, '__disable': disabled}" :style="{color: color}">{{menu.title}}</span>
|
||||||
|
<slot name="append"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MenuItem',
|
||||||
|
props: {
|
||||||
|
menu: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
actived: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click');
|
||||||
|
},
|
||||||
|
onMouseEnter() {
|
||||||
|
this.$emit('mouseenter');
|
||||||
|
},
|
||||||
|
onMouseLeave() {
|
||||||
|
this.$emit('mouseleave');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.menu {
|
||||||
|
list-style: none;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 17px;
|
||||||
|
margin: 0;
|
||||||
|
&::after {
|
||||||
|
content:"";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
&-label {
|
||||||
|
border: 1px dashed transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #cfe1f6;
|
||||||
|
&::after {
|
||||||
|
border: 1px solid #49A4FE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background: #cfe1f6;
|
||||||
|
&::after {
|
||||||
|
border: 1px solid #49A4FE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.__active {
|
||||||
|
border: 1px dashed #8f8f8f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.__disable {
|
||||||
|
background: #f4f4f5 !important;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
span {
|
||||||
|
color: #bcbec2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,13 +3,14 @@
|
|||||||
<li class="menu-li" :class="elMenuClass" v-for="(el,i) in menus" :key="i">
|
<li class="menu-li" :class="elMenuClass" v-for="(el,i) in menus" :key="i">
|
||||||
<div v-if="el.isSeparation" class="menu-separation" />
|
<div v-if="el.isSeparation" class="menu-separation" />
|
||||||
<menu-item v-else :menu="el" :color="color"
|
<menu-item v-else :menu="el" :color="color"
|
||||||
:check="false"
|
:actived="false"
|
||||||
@click="onClick(el, i)"
|
@click="onClick(el, i)"
|
||||||
@mouseenter="onMouseEnter(el, i)"
|
@mouseenter="onMouseEnter(el, i)"
|
||||||
@mouseleave="onMouseLeave(el, i)">
|
@mouseleave="onMouseLeave(el, i)">
|
||||||
<template v-if="el.children&&el.children.length" slot="append">
|
<template v-if="el.children&&el.children.length" slot="append">
|
||||||
<span class="menu-arrow" />
|
<span class="menu-arrow" />
|
||||||
<menu-list class="menu-list" v-show="index==i" :background="background" :color="color" :menus="el.children"/>
|
<menu-list class="menu-list" v-show="index==i" :background="background" :color="color" :menus="el.children"
|
||||||
|
@close="onClose(el, i)"/>
|
||||||
</template>
|
</template>
|
||||||
</menu-item>
|
</menu-item>
|
||||||
</li>
|
</li>
|
||||||
@ -49,21 +50,21 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onMouseEnter(el, i) {
|
onMouseEnter(el, i) {
|
||||||
this.$emit('mouseenter', el, i);
|
|
||||||
this.index = i;
|
this.index = i;
|
||||||
},
|
},
|
||||||
onMouseLeave(el, i) {
|
onMouseLeave(el, i) {
|
||||||
this.$emit('mouseleave', el, i);
|
|
||||||
this.index = -1;
|
this.index = -1;
|
||||||
console.log(999999999999999)
|
|
||||||
},
|
},
|
||||||
onClick(el, i) {
|
onClick(el, i) {
|
||||||
this.$emit('click', el, i);
|
|
||||||
if (el.disabled) return;
|
if (el.disabled) return;
|
||||||
if (el.handle) {
|
if (el.handle) {
|
||||||
el.handle(el);
|
el.handle(el);
|
||||||
this.onMouseLeave(el, i);
|
this.onMouseLeave(el, i);
|
||||||
|
this.$emit('close', el, i);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
onClose(el, i) {
|
||||||
|
this.$emit('close', el, i);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -78,11 +79,11 @@ export default {
|
|||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
&-ul {
|
&-ul {
|
||||||
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border: 1px solid #d1d1d1;
|
border: 1px solid #d1d1d1;
|
||||||
box-shadow: 2px 2px 2px #999;
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
z-index: 999;
|
|
||||||
}
|
}
|
||||||
&-li {
|
&-li {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -100,15 +101,21 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-list {
|
&-list {
|
||||||
transform:translateX(100%);
|
transform:translate(100%, -1px);
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-separation {
|
&-separation {
|
||||||
height: 0px;
|
&::after {
|
||||||
border: 1px solid #bfbfbf;
|
content:"";
|
||||||
margin: 0 5px;
|
position: absolute;
|
||||||
|
left: -50%;
|
||||||
|
bottom: -1px;
|
||||||
|
width: 200%;
|
||||||
|
border: 1px solid #d1d1d1;
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,49 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plan-tool" style="width: 100%; height: 100%;">
|
<div class="plan">
|
||||||
<nav-bar ref="bar"/>
|
<div class="plan__header">
|
||||||
<!-- <nav-tool ref="tool" /> -->
|
<span class="title">运行图编辑工具</span>
|
||||||
<!-- <schedule ref="schedule" :max-height="height" :max-width="width" /> -->
|
<span class="close" @click="doClose"/>
|
||||||
<nav-state ref="state" />
|
</div>
|
||||||
</div>
|
<div class="plan__layer" style="width: 100%; height: 100%;">
|
||||||
|
<nav-bar class="noselect" ref="bar"/>
|
||||||
|
<nav-tool class="noselect" ref="tool"/>
|
||||||
|
<nav-schedule ref="schedule" />
|
||||||
|
<nav-state ref="state" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import NavBar from './navBar';
|
import NavBar from './navBar';
|
||||||
import NavTool from './navTool';
|
import NavTool from './navTool';
|
||||||
import NavState from './navState';
|
import NavState from './navState';
|
||||||
import Schedule from './schedule';
|
import NavSchedule from './navSchedule';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
NavBar,
|
NavBar,
|
||||||
NavTool,
|
NavTool,
|
||||||
NavState,
|
NavState,
|
||||||
Schedule,
|
NavSchedule,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
lineCode() {
|
|
||||||
return this.$route.query.lineCode;
|
|
||||||
},
|
|
||||||
width() {
|
|
||||||
return this.$store.state.app.width;
|
|
||||||
},
|
|
||||||
height() {
|
|
||||||
return this.$store.state.app.height;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
doClose() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
this.$emit('doClose');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||||
|
-khtml-user-select: none; /* Konqueror */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
|
user-select: none; /* Non-prefixed version, currently not supported by any browser */
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan {
|
||||||
|
padding: 40px 5px 5px 5px;
|
||||||
|
height: 100%;
|
||||||
|
background: #06c;
|
||||||
|
&__header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
|
||||||
|
background: #ff4b4b;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
&::before {
|
||||||
|
content: "\2716";
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #ff000066;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__layer {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="PlanMenuBar">
|
<div class="nav">
|
||||||
<menu-nav :menus="menuList" />
|
<menu-nav :menus="menuList" background="#fff" color="#333" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import MenuNav from './component/menuNav';
|
import MenuNav from './component/menuNav/index';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PlanNavBar',
|
name: 'PlanNavBar',
|
||||||
@ -75,11 +75,9 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '列车交路管理(S)',
|
title: '列车交路管理(S)',
|
||||||
handle: this.newRunPlan,
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'test1',
|
title: 'test1',
|
||||||
handle: this.newRunPlan,
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'test1',
|
title: 'test1',
|
||||||
@ -90,17 +88,16 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'test2',
|
title: 'test2',
|
||||||
handle: this.newRunPlan,
|
children: [
|
||||||
children: [
|
{
|
||||||
{
|
title: 'test1',
|
||||||
title: 'test1',
|
handle: this.newRunPlan
|
||||||
handle: this.newRunPlan
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'test2',
|
||||||
title: 'test2',
|
handle: this.newRunPlan
|
||||||
handle: this.newRunPlan
|
},
|
||||||
},
|
]
|
||||||
]
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -167,18 +164,10 @@ export default {
|
|||||||
|
|
||||||
<style scoped rel="stylesheet/scss" lang="scss">
|
<style scoped rel="stylesheet/scss" lang="scss">
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
$top: 0px;
|
.nav {
|
||||||
$width: 30px;
|
|
||||||
$height: 40px;
|
|
||||||
$menuPadding: 15px;
|
|
||||||
$menuItemHeight: 30px;
|
|
||||||
$menuItemWidth: 160px;
|
|
||||||
$menuItemPadding: 5px;
|
|
||||||
|
|
||||||
#PlanMenuBar {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: $height;
|
line-height: 40px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
30
src/views/planMonitor/editToolTJ/navSchedule.vue
Normal file
30
src/views/planMonitor/editToolTJ/navSchedule.vue
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div class="schedule">
|
||||||
|
context
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
width() {
|
||||||
|
return this.$store.state.app.width;
|
||||||
|
},
|
||||||
|
height() {
|
||||||
|
return this.$store.state.app.height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.schedule {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 70px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="PlanStatusBar">
|
<div class="state">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -20,12 +20,15 @@ export default {
|
|||||||
<style scoped rel="stylesheet/scss" lang="scss">
|
<style scoped rel="stylesheet/scss" lang="scss">
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
|
|
||||||
.PlanStatusBar {
|
.state {
|
||||||
z-index: 5;
|
z-index: 10;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
border: 1px solid #ffffee;
|
||||||
|
box-shadow: 0 -2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,11 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="PlanNavTool">
|
<!-- <div class="el-dialog__wrapper" v-dialogDrag> -->
|
||||||
<div class="nav">
|
<div class="el-dialog__wrapper">
|
||||||
<div v-for="(item,index) in tools" :key="index" class="tool">
|
<div class="bar el-dialog">
|
||||||
<img :src="item.src" :alt="item.title">
|
<div class="tool el-dialog__header" style="padding: 0">
|
||||||
</div>
|
<div class="tool-move" />
|
||||||
</div>
|
<div v-for="(el,i) in tools" :key="i" class="tool-elem"
|
||||||
</div>
|
:class="{'__active': active == i, '__disable': el.disabled}"
|
||||||
|
@click="doClick(el, i)" >
|
||||||
|
<img :src="el.src" />
|
||||||
|
<span>{{ el.title }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import logo_ from '@/assets/logo_.png';
|
import logo_ from '@/assets/logo_.png';
|
||||||
@ -14,89 +21,32 @@ export default {
|
|||||||
name: 'PlanNavTool',
|
name: 'PlanNavTool',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
active: -1,
|
||||||
tools: [
|
tools: [
|
||||||
{
|
{
|
||||||
title: this.$t('planMonitor.server1'),
|
title: "打开",
|
||||||
operate: '',
|
|
||||||
src: logo_,
|
src: logo_,
|
||||||
|
disabled: true,
|
||||||
click: this.undeveloped
|
click: this.undeveloped
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: this.$t('planMonitor.server2'),
|
title: "车站平面图",
|
||||||
operate: '',
|
src: logo_,
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
click: this.undeveloped
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: this.$t('planMonitor.frontMachine1'),
|
title: "列车信息",
|
||||||
operate: '',
|
src: logo_,
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
click: this.undeveloped
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: this.$t('planMonitor.frontMachine2'),
|
title: "底图管理",
|
||||||
operate: '',
|
src: logo_,
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
click: this.undeveloped
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: this.$t('planMonitor.mainDispatcher'),
|
title: "运行图编制",
|
||||||
operate: '',
|
src: logo_,
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.dispatcher1'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.dispatcher2'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.dispatcher3'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.bigScreen'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.maintenanceWorkstation'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.runGraphShowManualStation'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.jumpStop'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.detainTrain'),
|
|
||||||
operate: '',
|
|
||||||
src: '',
|
|
||||||
click: this.undeveloped
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$t('planMonitor.trainAlarm'),
|
|
||||||
operate: '',
|
|
||||||
src: logo_,
|
|
||||||
click: this.undeveloped
|
click: this.undeveloped
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -105,50 +55,101 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
doClick(el, i) {
|
||||||
|
if (!el.disabled) {
|
||||||
|
this.active = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped rel="stylesheet/scss" lang="scss">
|
<style scoped rel="stylesheet/scss" lang="scss">
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
$top: 32px;
|
$top: 40px;
|
||||||
$height: 30px;
|
$height: 30px;
|
||||||
$size: 22px;
|
$size: 22px;
|
||||||
$background: #F6F6F6;
|
$background: #ffffee;
|
||||||
$color: #0000;
|
$color: #0000;
|
||||||
$border-color: #B6BCCC;
|
|
||||||
|
|
||||||
#PlanNavTool {
|
.el-dialog__wrapper {
|
||||||
z-index: 5;
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
z-index: 60;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
|
||||||
top: $top;
|
top: $top;
|
||||||
height: $height;
|
height: $height;
|
||||||
line-height: $height;
|
line-height: $height;
|
||||||
border: 1px solid $border-color !important;
|
|
||||||
background: $background;
|
background: $background;
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
width: 100%;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.nav {
|
.tool {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0 17px;
|
cursor: move;
|
||||||
}
|
|
||||||
|
|
||||||
.tool {
|
&-move {
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
position: relative;
|
margin: 0 12px;
|
||||||
width: $size;
|
position: relative;
|
||||||
height:$size;
|
height: $height - 2px;
|
||||||
margin: 2px;
|
border: 1px dashed #ccc;
|
||||||
|
|
||||||
img {
|
}
|
||||||
display: block;
|
|
||||||
height: 100%;
|
&-elem {
|
||||||
width: 100%;
|
cursor: pointer;
|
||||||
}
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-right: 1px solid #d1d1d1;
|
||||||
|
&:nth-child(2) {
|
||||||
|
border-left: 1px solid #d1d1d1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: $size;
|
||||||
|
height:$size;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #111;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.__disable {
|
||||||
|
background: #f4f4f5 !important;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
span {
|
||||||
|
color: #bcbec2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.__active {
|
||||||
|
background: #cfe1f6 !important;
|
||||||
|
border-right: 1px outset #d1d1d1!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,574 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="Schedule">
|
|
||||||
<div class="left">
|
|
||||||
<div :id="runPlanId" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex';
|
|
||||||
import { timeFormat } from '@/utils/date';
|
|
||||||
import echarts from 'echarts';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Schedule',
|
|
||||||
props: {
|
|
||||||
maxWidth: {
|
|
||||||
type: Number,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
maxHeight: {
|
|
||||||
type: Number,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
top: 0,
|
|
||||||
height: 0,
|
|
||||||
runPlanId: 'plan-tool',
|
|
||||||
myChart: null,
|
|
||||||
showTrain: false,
|
|
||||||
serviceNumberConfig: {
|
|
||||||
data: [],
|
|
||||||
title: this.$t('planMonitor.serviceNumber'),
|
|
||||||
showHeader: false,
|
|
||||||
highlightCurrentRow: true,
|
|
||||||
handleChange: this.serviceNumberChange,
|
|
||||||
handleModify:this.serviceNumberModify,
|
|
||||||
handleTips:'单击数字选择表号，双击数字修改表号,<br/>有车次信息变动 车次号会重新自动排列',
|
|
||||||
showClose: false,
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
prop: 'serviceNumber',
|
|
||||||
label: this.$t('planMonitor.serviceNumber')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
tripNumberConfig: {
|
|
||||||
data: [],
|
|
||||||
title: this.$t('planMonitor.tripNumber'),
|
|
||||||
showHeader: false,
|
|
||||||
highlightCurrentRow: true,
|
|
||||||
handleChange: this.tripNumberChange,
|
|
||||||
handleModify:this.tripNumberModify,
|
|
||||||
handleTips:'单击数字选择车次号，双击数字修改车次号,<br/>有车次信息变动 车次号会重新自动排列',
|
|
||||||
showClose: false,
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
prop: 'tripNumber',
|
|
||||||
label: this.$t('planMonitor.tripNumber')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
realData: {},
|
|
||||||
kmRangeCoordMap: {},
|
|
||||||
option: {
|
|
||||||
title: {
|
|
||||||
text: '',
|
|
||||||
left: 'center',
|
|
||||||
top: '10px'
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '50px',
|
|
||||||
left: '120px',
|
|
||||||
right: '80px',
|
|
||||||
bottom: '60px',
|
|
||||||
containLabel: true,
|
|
||||||
backgroundColor: 'floralwhite'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
snap: true,
|
|
||||||
axis: 'x'
|
|
||||||
},
|
|
||||||
formatter: this.axisTooltip,
|
|
||||||
borderWidth: 1,
|
|
||||||
position: function (pt) {
|
|
||||||
const data = pt[0] + 10;
|
|
||||||
return [data, '20%'];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: [],
|
|
||||||
axisLine: {
|
|
||||||
onZero: false,
|
|
||||||
lineStyle: {
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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: {},
|
|
||||||
stationsObj: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('runPlan', [
|
|
||||||
'draftStations'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
maxWidth() {
|
|
||||||
this.setPosition();
|
|
||||||
},
|
|
||||||
maxHeight() {
|
|
||||||
this.setPosition();
|
|
||||||
},
|
|
||||||
'$store.state.runPlan.planSizeCount': function () {
|
|
||||||
this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
|
|
||||||
},
|
|
||||||
'$store.state.runPlan.refreshCount': function() {
|
|
||||||
this.loadChartPage();
|
|
||||||
},
|
|
||||||
$route() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.loadChartPage();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
loadRunPlanId() {
|
|
||||||
this.loadChartPage();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.setPosition();
|
|
||||||
this.loadChartPage();
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.destroy();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
displayTrain() {
|
|
||||||
this.showTrain = !this.showTrain;
|
|
||||||
},
|
|
||||||
serviceNumberChange(row) {
|
|
||||||
let serviceNumber = null;
|
|
||||||
let serviceObj = {};
|
|
||||||
if (row) {
|
|
||||||
serviceNumber = row.serviceNumber;
|
|
||||||
serviceObj = this.$store.state.runPlan.draftEditData[row.serviceNumber] || {};
|
|
||||||
|
|
||||||
const op = this.myChart.getOption();
|
|
||||||
op.series.forEach((item, index) => {
|
|
||||||
item.lineStyle.color = '#000';
|
|
||||||
switch (item.name) {
|
|
||||||
case serviceNumber: {
|
|
||||||
item.lineStyle.color = 'red';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'trainLabel': {
|
|
||||||
op.series.pop();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.myChart.setOption(op, true);
|
|
||||||
}
|
|
||||||
this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: null });
|
|
||||||
this.analyticalTripNumber(serviceObj.trainMap || {});
|
|
||||||
},
|
|
||||||
tripNumberChange(row) {
|
|
||||||
const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
|
|
||||||
let tripNumber = null;
|
|
||||||
if (row) {
|
|
||||||
const data = [];
|
|
||||||
tripNumber = row.tripNumber;
|
|
||||||
const op = this.myChart.getOption();
|
|
||||||
op.series.forEach((item, index) => {
|
|
||||||
switch (item.name) {
|
|
||||||
case serviceNumber: {
|
|
||||||
// const param = '\\[\\d*,\\d*,"Station_\\d*_[.\\d]*","' + tripNumber + '"\\]';
|
|
||||||
// const temp = JSON.stringify(item.data).match(new RegExp(param, 'g'));
|
|
||||||
// data = JSON.parse('[' + temp.toString() + ']');
|
|
||||||
item.data.forEach(nor => {
|
|
||||||
if (nor[3] == tripNumber) {
|
|
||||||
data.push(nor);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'trainLabel': {
|
|
||||||
op.series.pop();
|
|
||||||
this.myChart && this.myChart.setOption(op, true);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
op.series.push({
|
|
||||||
name: 'trainLabel',
|
|
||||||
lineStyle: {
|
|
||||||
color: 'green'
|
|
||||||
},
|
|
||||||
type: 'line',
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
this.myChart && this.myChart.setOption(op, true);
|
|
||||||
}, 50);
|
|
||||||
|
|
||||||
}
|
|
||||||
this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: 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;
|
|
||||||
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:height - 20 });
|
|
||||||
|
|
||||||
if (this.top != top) {
|
|
||||||
this.top = top;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.height != height) {
|
|
||||||
this.height = height - 20 * 2;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
serviceNumberModify(row) {
|
|
||||||
if (row) {
|
|
||||||
this.$refs.modifyService.doShow({serviceNumber:row.serviceNumber});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tripNumberModify(row) {
|
|
||||||
if (row) {
|
|
||||||
this.$refs.modifyService.doShow({serviceNumber:this.$store.state.runPlan.draftSelected.serviceNumber, tripNumber:row.tripNumber});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async loadChartPage() {
|
|
||||||
try {
|
|
||||||
this.$store.dispatch('runPlan/draftClear').then(() => {
|
|
||||||
// this.loadInitChart().then(() => {
|
|
||||||
if (this.$route.query.mapId) {
|
|
||||||
getStationList(this.$route.query.mapId).then(resp => {
|
|
||||||
this.$store.dispatch('runPlan/setDraftStations', resp.data).then(() => {
|
|
||||||
this.loadInitData();
|
|
||||||
if (this.loadRunPlanId) {
|
|
||||||
this.myChart && this.myChart.showLoading();
|
|
||||||
queryRunPlan(this.loadRunPlanId).then(rest => {
|
|
||||||
this.$store.dispatch('runPlan/setDraftPlanData', rest.data).then(() => {
|
|
||||||
this.analyticalServiceNumber(this.$store.state.runPlan.draftEditData);
|
|
||||||
this.loadChartData();
|
|
||||||
this.myChart && this.myChart.hideLoading();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
this.myChart && this.myChart.hideLoading();
|
|
||||||
this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// this.clearCanvas();
|
|
||||||
this.$store.dispatch('runPlan/setDraftPlanData', {serviceNumberDataList: []}).then(()=> {
|
|
||||||
this.analyticalServiceNumber(this.$store.state.runPlan.draftEditData);
|
|
||||||
this.loadChartData();
|
|
||||||
this.myChart && this.myChart.hideLoading();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
this.$messageBox(this.$t('tip.requestingStationDataFailed'));
|
|
||||||
this.$store.dispatch('runPlan/setDraftStations', []);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
this.$messageBox(this.$t('error.loadingOperationGraphFailed'));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async loadChartData() {
|
|
||||||
try {
|
|
||||||
const stations = this.$store.state.runPlan.draftStations;
|
|
||||||
const planData = this.$store.state.runPlan.draftPlanData;
|
|
||||||
this.stationsObj = {};
|
|
||||||
stations.forEach(item => {
|
|
||||||
this.stationsObj[Math.floor(item.kmRange)] = item;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.viewDisabled = true;
|
|
||||||
|
|
||||||
this.option.series = [];
|
|
||||||
this.kmRangeCoordMap = this.planConvert.convertStationsToMap(stations);
|
|
||||||
this.pushModels(this.option.series, [this.planConvert.initializeYaxis(this.draftStations)]);
|
|
||||||
this.pushModels(this.option.series, this.planConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 0.5, color: '#000' }));
|
|
||||||
await this.loadInitChart();
|
|
||||||
|
|
||||||
this.viewDisabled = false;
|
|
||||||
} catch (error) {
|
|
||||||
this.viewDisabled = false;
|
|
||||||
this.$messageBox(this.$t('error.loadingOperationGraphFailed') + this.$t('global.colon') + error.message);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async loadInitData() {
|
|
||||||
await this.xAxisInit();
|
|
||||||
await this.yAxisInit();
|
|
||||||
// await this.loadInitChart();
|
|
||||||
},
|
|
||||||
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;
|
|
||||||
},
|
|
||||||
loadInitChart() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
if (this.myChart && this.myChart.isDisposed) {
|
|
||||||
this.myChart.clear();
|
|
||||||
}
|
|
||||||
this.option.title.text = this.loadRunPlanName;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
clearCanvas() {
|
|
||||||
this.option.series = [];
|
|
||||||
this.option.title.text = '';
|
|
||||||
if (this.myChart) {
|
|
||||||
this.myChart.clear();
|
|
||||||
}
|
|
||||||
this.myChart && this.myChart.setOption(this.option);
|
|
||||||
},
|
|
||||||
xAxisPointFormat(params) {
|
|
||||||
return timeFormat(params.value);
|
|
||||||
},
|
|
||||||
yAxisPointFormat(params) {
|
|
||||||
return this.planConvert.computedFormatYAxis(this.draftStations, 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.pushModels(this.option.series, [this.planConvert.initializeYaxis(this.draftStations)]);
|
|
||||||
this.option.yAxis.min = this.planConvert.computedYaxisMinValue(this.draftStations);
|
|
||||||
this.option.yAxis.max = this.planConvert.computedYaxisMaxValue(this.draftStations);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTooltip(param) {
|
|
||||||
let data = '';
|
|
||||||
const arr = [];
|
|
||||||
param.forEach(item => {
|
|
||||||
const station = this.$store.getters['map/getDeviceByCode'](item.data[2]);
|
|
||||||
if (!arr.includes(`${item.data[0]}${item.data[1]}`)) {
|
|
||||||
arr.push(`${item.data[0]}${item.data[1]}`);
|
|
||||||
if (this.$route.query.lineCode == '06' || this.$route.query.lineCode == '08') {
|
|
||||||
const list = [
|
|
||||||
`${this.$t('planMonitor.stationName')}${station.name}<br>`,
|
|
||||||
`${this.$t('planMonitor.stationKilometerMark')}${station.kmRange} m <br>`,
|
|
||||||
`${this.$t('planMonitor.arriveTime')}${timeFormat(item.data[0] + this.planConvert.TranslationTime)}<br>`,
|
|
||||||
`${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}`,
|
|
||||||
`<hr size=1 style="margin: 3px 0">`
|
|
||||||
];
|
|
||||||
data += list.join('');
|
|
||||||
} else {
|
|
||||||
const list = [
|
|
||||||
`${this.$t('planMonitor.stationName')}${station.name}<br>`,
|
|
||||||
`${this.$t('planMonitor.stationKilometerMark')}${station.kmRange} m <br>`,
|
|
||||||
`${this.$t('planMonitor.arriveTime')}${timeFormat(item.data[0] + this.planConvert.TranslationTime)}<br>`,
|
|
||||||
`${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}(${item.data[3][0] == '2' ? '上行' : '下行'})`,
|
|
||||||
`<hr size=1 style="margin: 3px 0">`
|
|
||||||
];
|
|
||||||
data += list.join('');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
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">
|
|
||||||
@import "src/styles/mixin.scss";
|
|
||||||
|
|
||||||
#PlanSchedule {
|
|
||||||
z-index: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 45px);
|
|
||||||
position: relative;
|
|
||||||
margin-top: 45px;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.position {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: 50px;
|
|
||||||
width: 220px;
|
|
||||||
height: calc(100% - 45px);
|
|
||||||
}
|
|
||||||
.data_table_box{
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user