增加澳大利亚运行图编辑功能

src/api/rpTools.js

@@ -0,0 +1,67 @@
+import request from '@/utils/request';
+
+/**
+ * 获取运行图数据
+ */
+export function getRpTools() {
+    return request({
+        url: '/api/rpTools',
+        method: 'get'
+    });
+}
+
+/**
+ * 添加车次
+ */
+export function addRpTrip(data) {
+	return request({
+        url: '/api/rpTools/trip',
+		method: 'post',
+		data
+    });
+}
+
+/**
+ * 修改到站时间
+ */
+export function justTripNoArrival(tripNo, data) {
+	return request({
+		url: `/api/rpTools/${tripNo}/arrival`,
+		method: 'put',
+		data
+	})
+}
+
+
+/**
+ * 修改发车时间
+ */
+export function justTripNoDeparture(tripNo, data) {
+	return request({
+		url: `/api/rpTools/${tripNo}/departure`,
+		method: 'put',
+		data
+	})
+}
+
+/**
+ * 平移车次
+ */
+export function translateTripNo(tripNo, data) {
+	return request({
+		url: `/api/rpTools/${tripNo}/trip`,
+		method: 'put',
+		data
+	})
+}
+
+
+/**
+ * 删除车次
+ */
+export function deleteTripNo(tripNo) {
+	return request({
+		url: `/api/rpTools/${tripNo}/trip`,
+		method: 'delete'
+	})
+}

src/jmapNew/theme/aus_00/planConvert.js

@@ -0,0 +1,129 @@
+import { createMartPointReverse, createSeriesModel, createMarkLineModels, hexColor, convertSheetToList, prefixTime } from '@/utils/runPlan';
+
+export default {
+    /** 边缘高度*/
+    EdgeHeight: 600,
+
+    /** 间隔高度*/
+    CoordMultiple: 1,
+
+    /** 偏移时间*/
+	TranslationTime: 0,
+
+    /** 将后台数据解析成图表*/
+    convertDataToModels(tripList, stations, kmRangeCoordMap, lineStyle) {
+        var models = [];
+		/** 按车次遍历数据*/
+		if (tripList && tripList.length) {
+			tripList.forEach(trip => {
+				const opt = { name: `run-${trip.tripNo}`, type: 'line', markPoint: { data: [] }, data: []};
+
+				if (trip.tripNo &&
+					trip.stationTimeList.length) {
+					opt.markPoint.data.push(createMartPointReverse({
+						name: `${trip.tripNo}`,
+						color: '#000' || lineStyle.color,
+						coord: [
+							trip.stationTimeList[0].arrivalTime,
+							this.getCoordYByElem(stations, kmRangeCoordMap, trip.stationTimeList[0])
+						]
+					}));
+				}
+
+				/** 计算停站点坐标集合*/
+				trip.stationTimeList.forEach(elem => {
+					if (elem.arrivalTime) {
+						opt.data.push([elem.arrivalTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
+					}
+
+					if (elem.departureTime) {
+						opt.data.push([elem.departureTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
+					}
+				});
+
+				models.push(opt);
+			});
+		}
+
+		console.log(models);
+
+		return models;
+},
+
+    /** 更新数据并解析成图表*/
+    updateDataToModels(tripList, stations, kmRangeCoordMap, runPlanData, series, lineStyle) {
+        if (tripList && tripList.length) {
+        }
+        return series;
+    },
+
+    /** 初始化Y轴*/
+    initializeYaxis(stations) {
+        return createMarkLineModels(stations, (elem) => {
+            return this.EdgeHeight + elem.kmRange * this.CoordMultiple;
+        });
+    },
+
+    /** 将后台数据转换为试图序列模型*/
+    convertStationsToMap(stations) {
+        var map = {};
+        if (stations && stations.length) {
+            stations.forEach((elem) => {
+                map[`${elem.kmRange}`] = this.EdgeHeight + elem.kmRange * this.CoordMultiple;
+            });
+        }
+
+        return map;
+    },
+
+    /** 计算y轴最小值*/
+    computedYaxisMinValue(stations) {
+        return stations[0].kmRange * this.CoordMultiple;
+    },
+
+    /** 计算y轴最大值*/
+    computedYaxisMaxValue(stations) {
+        return stations[stations.length - 1].kmRange * this.CoordMultiple + this.EdgeHeight * 2;
+    },
+
+    /** 格式化y轴数据*/
+    computedFormatYAxis(stations, params) {
+        var yText = '0m';
+
+        stations.forEach(elem => {
+            if (elem.kmRange < parseInt(params.value) / this.CoordMultiple - this.EdgeHeight) {
+                yText = Math.floor(elem.kmRange) + 'm';
+            }
+        });
+
+        return yText;
+    },
+
+    /** 根据是否和上一个车次是否相交，计算下一个车次的折返的高度*/
+    computedReentryNumber(code) {
+        // return parseInt(code || 1) % 2 ? 1 : 2;
+        return 1;
+    },
+
+    /** 根据方向计算y折返偏移量*/
+    getYvalueByDirectionCode(defaultVlue, directionCode, num) {
+        if (directionCode === '1') {
+            defaultVlue += this.EdgeHeight / 2 * num;
+        } else if (directionCode === '2') {
+            defaultVlue -= this.EdgeHeight / 2 * num;
+        }
+
+        return defaultVlue;
+    },
+
+    /** 根据elem计算y值*/
+    getCoordYByElem(stations, kmRangeCoordMap, elem) {
+        var defaultVlue = 0;
+        var station = stations.find(it => { return it.code == elem.stationCode; });
+        if (station) {
+            defaultVlue = kmRangeCoordMap[`${station.kmRange}`];
+        }
+
+        return defaultVlue;
+    }
+};

src/jmapNew/theme/factory.js

@@ -2,6 +2,7 @@ class Theme {
     constructor(code) {
         this._code = '02';
         this._mapMenu = {
+			'00': 'aus_00',
             '01': 'chengdu_01',
             '02': 'fuzhou_01',
             '03': 'beijing_01',

src/router/index_Common.js

@@ -86,6 +86,7 @@ const DemonstrationDetail = () => import('@/views/demonstration/detail/index');
 
 const PlanMonitorEditTool = () => import('@/views/planMonitor/editTool/index');
 const PlanMonitorEditUserTool = () => import('@/views/planMonitor/editTool/userindex');
+const PlanMonitorEditAUSTool = () => import('@/views/planMonitor/editToolAUS/index');
 const PlanMonitorDetail = () => import('@/views/planMonitor/detail');
 
 const DesignPlatformHome = () => import('@/views/designPlatform/home');
@@ -369,12 +370,17 @@ export const publicAsyncRoute = [
         path: '/plan/usertool',
         component: PlanMonitorEditUserTool,
         hidden: true
+	},
+	{ // 运行图编辑
+        path: '/plan/AUStool',
+        component: PlanMonitorEditAUSTool,
+        hidden: true
     },
     { // 运行图编辑
         path: '/plan/tool',
         component: PlanMonitorEditTool,
         hidden: true
-    },
+	},
     {
         path: '/displayIscs/system',
         component: IscsSystem,

src/scripts/ConstDic.js

@@ -128,7 +128,9 @@ export const DeviceMenu = {
     SetDriver: '106',
     Script: '107',
     IscsSystem: '108',
-    IscsInterface: '109'
+	IscsInterface: '109',
+
+	planAusContextMenu: '200'
 };
 
 /**

src/store/index_Common.js

@@ -16,6 +16,7 @@ import scriptRecord from './modules/scriptRecord';
 import ibp from './modules/ibp';
 import order from './modules/order';
 import iscs from './modules/iscs';
+import rpTools from './modules/rpTools';
 
 import getters from './getters';
 
@@ -38,7 +39,8 @@ const store = new Vuex.Store({
         scriptRecord,
         ibp,
         order,
-        iscs
+		iscs,
+		rpTools
     },
     getters
 });

src/store/modules/rpTools.js

@@ -0,0 +1,93 @@
+const runPlan = {
+    namespaced: true,
+
+    state: {
+        stations: [],			// 车站列表
+        planData: {},			// 运行图原始数据
+        editData: {},			// 运行图编辑数据
+        planSizeCount: 0,		// 运行图canvas 大小变更标识
+        planLoadedCount: 0,		// 运行图数据更新
+        planUpdateCount: 0,		// 运行图更新标识
+        selected: {},			// 选择的对象
+		refreshCount: 0,		// 刷新页面重新加载
+		width: 800, 			// 运行图canvas 容器 宽度
+        height: 600, 			// 运行图canvas 容器 高度
+    },
+    getters: {
+        stations: (state) => {
+            return state.stations || [];
+        }
+    },
+    mutations: {
+		setWidth: (state, width) => {
+            state.width = width;
+            state.planSizeCount += 1;
+        },
+        setHeight: (state, height) => {
+            state.height = height;
+            state.planSizeCount += 1;
+        },
+        setStations: (state, stations) => {
+            state.stations = stations;
+        },
+        setPlanData: (state, data) => {
+            state.planData = data;
+            state.editData = {};
+            state.planLoadedCount++;
+        },
+        setSelected: (state, selected) => {
+            state.selected = selected;
+        },
+        clear: (state) => {
+            state.planData = {};
+            state.editData = {};
+            state.selected = {};
+        },
+        refresh: (state) => {
+            state.refreshCount++;
+        }
+    },
+    actions: {
+        /** 设置运行图大小*/
+        resize({ commit }, opt) {
+            if (opt.width) {
+                commit('setWidth', opt.width);
+            }
+            if (opt.height) {
+                commit('setHeight', opt.height);
+            }
+        },
+        /** 设置stations数据 */
+        setStations: ({ commit }, mapModel) => {
+            return new Promise((resolve) => {
+                commit('setStations', mapModel);
+                resolve(mapModel);
+            });
+        },
+        /** 设置运行图数据 */
+        setPlanData: ({ commit }, data) => {
+            commit('setPlanData', data);
+        },
+        /** 选择车次*/
+        setSelected: ({ commit }, selected) => {
+            commit('setSelected', selected);
+        },
+        /** 更新数据*/
+        updateRunPlanData: ({ commit }, data) => {
+            commit('updateRunPlanData', data);
+        },
+        /** 清空数据*/
+        clear: ({ commit }) => {
+            return new Promise((resolve) => {
+                commit('clear');
+                resolve();
+            });
+        },
+        /** 刷新页面*/
+        refresh: ({commit}) => {
+            commit('refresh');
+        }
+    }
+};
+
+export default runPlan;

src/utils/baseUrl.js

@@ -2,8 +2,8 @@ export function getBaseUrl() {
     let BASE_API;
     if (process.env.NODE_ENV === 'development') {
         // BASE_API = 'https://joylink.club/jlcloud';
-        BASE_API = 'https://test.joylink.club/jlcloud';
-        // BASE_API = 'http://192.168.3.5:9000'; // 袁琪
+        // BASE_API = 'https://test.joylink.club/jlcloud';
+        BASE_API = 'http://192.168.3.5:9000'; // 袁琪
         // BASE_API = 'http://192.168.3.6:9000'; // 旭强
         // BASE_API = 'http://192.168.3.175:9000'; // 张赛
         // BASE_API = 'http://192.168.3.82:9000'; // 杜康

src/views/planMonitor/editToolAUS/contextMenu.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <pop-menu ref="popMenu" :menu="menu" pop-menu-class="popMenuClass" />
+  </div>
+</template>
+
+<script>
+import PopMenu from '@/components/PopMenu';
+import { Notification } from 'element-ui';
+import { DeviceMenu } from '@/scripts/ConstDic';
+import { deleteTripNo,  justTripNoArrival, justTripNoDeparture} from '@/api/rpTools';
+
+export default {
+	props: {
+		tripNo: {
+			type: [String, Number]
+		}
+	},
+    components: {
+        PopMenu
+    },
+    data() {
+        return {
+			menu: [
+				{
+                    label: '调整起始时间',
+                    handler: this.doJustBeginTime,
+                    disabled: false
+				},
+				{
+                    label: '调整停站时间',
+                    handler: this.doJustStopTime,
+                    disabled: false
+				},
+				{
+					label: '删除',
+                    handler: this.doDeleteTrip,
+                    disabled: false
+				}
+			]
+		};
+    },
+    watch: {
+        '$store.state.menuOperation.menuCount': function (val) {
+            if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.planAusContextMenu)) {
+                this.doShow(this.$store.state.menuOperation.menuPosition);
+            } else {
+                this.doClose();
+            }
+        }
+    },
+    methods: {
+        clickEvent() {
+            const self = this;
+            window.onclick = function (e) {
+                self.doClose();
+            };
+        },
+        doShow(point) {
+            this.clickEvent();
+            if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {
+                this.$refs.popMenu.resetShowPosition(point);
+            }
+        },
+        doClose() {
+            if (this.$refs && this.$refs.popMenu) {
+                this.$refs.popMenu.close();
+            }
+		},
+		doDeleteTrip() {
+			if (this.tripNo) {
+				deleteTripNo(this.tripNo).then(resp => {
+					this.$emit('reload')
+				}).catch(error => {
+					this.$message.error('delete error');
+				})
+			}
+		},
+		doJustBeginTime() {
+		},
+		doJustStopTime() {
+		}
+    }
+};
+</script>
+<style lang="scss" scoped>
+	.popMenuClass{
+		background: #fff;
+	}
+</style>

src/views/planMonitor/editToolAUS/index.vue

@@ -0,0 +1,392 @@
+<template>
+  <div class="plan-tool">
+    <schedule
+      ref="schedule"
+      :line-code="lineCode"
+      :plan-convert="PlanConvert"
+      :max-height="height"
+      :max-width="width"
+    />
+  </div>
+</template>
+
+<script>
+import Schedule from './schedule';
+
+export default {
+    components: {
+		Schedule
+    },
+    data() {
+        return {
+            PlanConvert: {}
+        };
+    },
+    computed: {
+        lineCode() {
+            return '00';
+        },
+        width() {
+            return this.$store.state.app.width;
+        },
+        height() {
+            return this.$store.state.app.height - 60;
+        }
+    },
+    created() {
+        this.PlanConvert = this.$theme.loadPlanConvert(this.lineCode);
+    },
+    methods: {
+        setPosition() {
+            this.$nextTick(() => {
+                this.$refs.schedule.setPosition();
+            });
+		},
+        dispatchDialog(dialogObj) {
+            this.$nextTick(() => {
+                if (this.$refs[dialogObj.name]) {
+                    this.$refs[dialogObj.name].doShow(dialogObj.params);
+                }
+            });
+        },
+        dispatchOperate(operateObj) {
+            this.$nextTick(() => {
+                if (this.$refs[operateObj.dialogName]) {
+                    this.$refs[operateObj.dialogName][operateObj.operate](operateObj.params);
+                }
+            });
+		}
+    }
+};
+</script>
+
+<style>
+    .plan-tool {
+        position: absolute;
+    }
+
+    .plan-tool .pop-menu {
+        background: #F0F0F0;
+    }
+
+    .plan-tool .pop-menu span {
+        color: #000;
+    }
+
+    .plan-tool .system-close {
+        cursor: pointer;
+        height: 25px;
+        width: 25px;
+        background: -webkit-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: -o-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: -moz-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        border: 1px solid white;
+        border-radius: 4px;
+    }
+
+    .plan-tool .system-close::before {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        font-size: x-large;
+    }
+
+    .planEdit__tool {
+        overflow: hidden !important;
+    }
+
+    /* .planEdit__tool .el-dialog {
+        overflow: hidden !important;
+        background: rgba(202, 221, 253, 0.88);;
+        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
+        border: 2px solid #727375;
+        border-radius: 4px;
+        color: #000;
+        font-size: 14px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__header {
+        height: 30px;
+        padding: 5px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__footer {
+        background: #ECE9D8;
+        opacity: 1;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__body {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        margin: 0px 3px 3px 3px;
+        border: 2px solid rgba(120, 121, 123, 0.5);
+        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
+        color: #000;
+        background: #ECE9D8;
+        opacity: 1;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__title {
+        font-size: 16px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn {
+        background: -webkit-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: -o-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: -moz-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        border: 1px solid white;
+        border-radius: 4px;
+        top: 0px;
+        right: 3px;
+        line-height: 26px;
+        width: 26px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn .el-icon-close:before {
+        font-size: 16px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn .el-dialog__close {
+        color: #fff;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--top {
+        border: 2px outset #FEFEFD;
+        border-radius: 4px;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs__item {
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        color: #000 !important;
+        border-right: 2px outset #fff;
+        padding-left: 10px !important;
+        padding-right: 10px !important;
+    }
+
+    .planEdit__tool .el-dialog .el-tab-pane {
+        margin: 10px !important;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+        border-bottom: none
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--card>.el-tabs__header .el-tabs__item:not(.is-active) {
+        border-bottom: 2px inset #fff
+    }
+
+    .planEdit__tool .el-dialog .el-form {
+        background: #ECE9D8 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-card {
+        background: #ECE9D8 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-button {
+        height: 32px;
+        line-height: 32px;
+        padding: 0px;
+        width: 80px;
+        border: 2px outset #E2E2E2;
+        border-radius: 0px !important;
+        color: #000;
+        background: #ECE9D8;
+    }
+
+    .planEdit__tool .el-dialog .expand {
+        width: 120px;
+    }
+
+    .planEdit__tool .el-dialog .el-button:focus span {
+        border: 1px dashed gray;
+    }
+
+    .planEdit__tool .el-dialog .el-button:active {
+        border: 2px inset #E2E2E2;
+    }
+
+    .planEdit__tool .el-dialog .el-button:disabled {
+        border: 2px inset #E2E2E2;
+    }
+
+    .planEdit__tool .el-dialog .el-button:disabled span {
+        border: 0px;
+    }
+
+    .planEdit__tool .el-dialog .button-group {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .el-input {
+        border: 2px inset #E9E9E9;
+    }
+
+    .planEdit__tool .el-dialog .el-input .el-input__inner {
+        color: #000;
+        background: #fff !important;
+        border: 0px;
+        border-radius: 0px !important;
+        box-sizing: border-box;
+    }
+
+    .planEdit__tool .el-dialog .el-input.is-disabled .el-input__inner {
+        background: #F0F0F0 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea {
+        border: 2px inset #E9E9E9;
+        border-radius: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea .el-textarea__inner {
+        color: #000;
+        background: #fff !important;
+        border: 0px;
+        border-radius: 0px !important;
+        box-sizing: border-box;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea.is-disabled .el-textarea__inner {
+        background: #F0F0F0 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table {
+        border: 2px inset #E9E9E9;
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table .cell {
+        line-height: unset !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table th.is-leaf {
+        background: #ECE9D8 !important;
+        border-right: 1px solid #BDBDBD !important;
+        border-bottom: 1px solid #BDBDBD !important;
+        color: #000 !important;
+        height: 20px !important;
+        padding: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-table tr td {
+        height: 20px !important;
+        padding: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-table .el-table__empty-text {
+        top: 15px !important;
+    }
+
+    .planEdit__tool .el-dialog .current-row>td {
+        background: #316AC5 !important;
+        color: #fff !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__inner {
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__label {
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
+        background: #E6E6E6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
+        color: #C5C9CC !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
+        background: #fff !important;
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        position: absolute;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+        content: "";
+        border: 1px solid #000;
+        border-left: 0;
+        border-top: 0;
+        height: 7px;
+        left: 4px;
+        top: 1px;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__inner {
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__label {
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__input.is-checked .el-radio__inner {
+        background: #fff !important;
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__input.is-checked .el-radio__inner::after {
+        width: 4px;
+        height: 4px;
+        border-radius: 100%;
+        background-color: #000 !important;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+    }
+
+    .planEdit__tool .el-dialog .el-radio.is-disabled .el-radio__inner {
+        background: #E6E6E6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio.is-disabled .el-radio__label {
+        color: #C5C9CC !important;
+    }
+
+    .planEdit__tool .el-dialog .base-label {
+        background: rgba(0, 0, 0, x);
+        position: relative;
+        left: -15px;
+        top: -18px;
+    }
+
+    .planEdit__tool .el-dialog .el-form-item label {
+        font-weight: normal !important;
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .context {
+        height: 100px;
+        border: 2px inset #E2E2E2;
+        overflow-y: scroll;
+    }
+
+    .planEdit__tool .el-dialog .table {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .notice {
+        margin-left: 62px;
+        line-height: 30px;
+    }
+
+    .planEdit__tool .el-dialog .button-group {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .el-tree__empty-block {
+        background: #E9E9E9 !important;
+        color: #000 !important;
+    } */
+</style>

src/views/planMonitor/editToolAUS/monitor.js

@@ -0,0 +1,160 @@
+import { DeviceMenu } from '@/scripts/ConstDic';
+import { timeFormat } from '@/utils/date';
+
+export default {
+	data() {
+		return {
+			isDragging: false,
+			createModel: {
+				endStationCode: '',
+				startStationCode: '',
+				startTime: {
+					hour: '',
+					minute: '',
+					second: ''
+				}
+			}
+		}
+	},
+	watch: {
+		myChart: function() {
+			this.listenersBind();
+		}
+	},
+	beforeDestroy() {
+		this.listenersOff();
+	},
+	methods: {
+		getStationByCoord(stations, y) {
+			for(var i = stations.length-1; i >= 0; i--) {
+				const station = stations[i];
+				if (station.kmRange <= y) {
+					return station;
+				}
+			}
+			return null;
+		},
+		pixelExecCb(e, cb) {
+			let myChart = this.myChart;
+			let pointInPixel= [e.offsetX, e.offsetY];
+			if (myChart.containPixel('grid', pointInPixel) && this.planConvert) {
+				let pointInGrid = myChart.convertFromPixel({seriesIndex:0},pointInPixel);
+				let xIndex = pointInGrid[0];
+				let yIndex = pointInGrid[1];
+				let op = myChart.getOption();
+				let minY = op.yAxis[0].min;
+				let xVal = op.xAxis[0].data[xIndex];
+				let edgeOffset = this.planConvert.EdgeHeight/6;
+				let yObj = this.getStationByCoord(this.stations, yIndex-minY-edgeOffset);
+				if (yObj && cb) {
+					cb(yObj, xVal, pointInPixel);
+				}
+			}
+		},
+		listenersBind() {
+			if (this.myChart) {
+				const zr = 	this.myChart.getZr();
+				zr.on('click', this.onClick, this)
+				zr.on('contextmenu', this.onContextMenu, this);
+				this.myChart.on('mousedown', this.onDragStart);
+				this.myChart.on('mouseup', this.onDragEnd);
+				this.myChart.on('click', 'series', this.onSelect);
+				this.myChart.on('datazoom', this.onClearMarks);
+			}
+		},
+		listenersOff() {
+			if (this.myChart) {
+				const zr = this.myChart.getZr();
+				zr.off('click', this.onClick);
+				zr.off('contextmenu', this.onContextMenu);
+				this.myChart.off('mousedown', this.onDragStart);
+				this.myChart.off('mouseup', this.onDragEnd);
+				this.myChart.off('click', 'series', this.onSelect);
+				this.myChart.off('datazoom', this.onClearMarks);
+			}
+		},
+		onClick(e) {
+			this.pixelExecCb(e, this.handleMarkPoint)
+		},
+		onContextMenu(e) {
+			console.log(e, 'onContextMenu');
+			this.onClearMarks();
+			if(e.target) {
+				const event = e.event;
+				const point = {
+					x: event.clientX,
+					y: event.clientY
+				}
+				this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: DeviceMenu.planAusContextMenu });
+			} else {
+				this.$message.info('No train number selected')
+			}
+		},
+		onClearMarks() {
+			if (this.myChart) {
+				let op = this.myChart.getOption();
+				op.graphic[0].elements = [];
+				this.myChart.setOption(op, {notMerge: true})
+			}
+		},
+		onSelect(e) {
+			console.log(e, 'select')
+		},
+		onDragStart(e) {
+			console.log(e, 'dragStart');
+		},
+		onDragEnd(e) {
+			console.log(e, 'dragEnd');
+		},
+		createMarkPoint(point, text) {
+			return {
+            	type: 'group',
+				z: 100,
+				children: [
+					{
+						type: 'circle',
+						z: 100,
+						shape: {
+							cx: point[0],
+							cy: point[1],
+							r: 5
+						},
+						style: {
+							fill: 'rgba(0,0,0,0.3)'
+						}
+					},
+					{
+						type: 'circle',
+						z: 100,
+						shape: {
+							cx: point[0],
+							cy: point[1],
+							r: 10
+						},
+						style: {
+							fill: 'rgba(0,0,0,0.3)'
+						}
+					}
+				]
+			}
+		},
+		handleMarkPoint(yObj, xVal, pointInPixel) {
+			let myChart = this.myChart;
+			if (myChart) {
+				let op = myChart.getOption();
+				let graphic = op.graphic[0];
+				if (graphic) {
+					graphic.elements.push(this.createMarkPoint(pointInPixel, 'hello world'))
+					myChart.setOption(op);
+					if (graphic.elements.length == 1) {
+						this.createModel.startStationCode = yObj.code;
+						this.createModel.startTime = timeFormat(xVal);
+					} else if (graphic.elements.length >= 2) {
+						this.createModel.endStationCode = yObj.code;
+						this.createRpTrip(this.createModel);
+					}
+				}
+			}
+		}
+	}
+}

src/views/planMonitor/editToolAUS/schedule.vue

@@ -0,0 +1,599 @@
+<template>
+  <div id="PlanSchedule">
+    <div class="left">
+      <div :id="runPlanId" />
+	  <context-menu  :tripNo="tripNo" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Monitor from './monitor.js';
+import ContextMenu from './contextMenu.vue';
+import { mapGetters } from 'vuex';
+import { timeFormat } from '@/utils/date';
+import { getStationList } from '@/api/runplan';
+import { getRpTools, addRpTrip } from '@/api/rpTools';
+import { loadMapDataById } from '@/utils/loaddata';
+import { getPublishMapInfo } from '@/api/jmap/map';
+import echarts from 'echarts';
+
+export default {
+    props: {
+        planConvert: {
+            type: Object,
+            required: true
+        },
+        maxWidth: {
+            type: Number,
+            required: true
+        },
+        maxHeight: {
+            type: Number,
+            required: true
+        },
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
+        loadRunPlanName: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+	},
+	mixins: [Monitor],
+	components: {
+		ContextMenu
+	},
+    data() {
+        return {
+            top: 0,
+            height: 0,
+            mapName: 'XXX',
+            runPlanId: 'plan-tool',
+            myChart: null,
+			showTrain: false,
+			tripNo: '',
+            serviceNumberConfig: {
+                data: [],
+                title: this.$t('planMonitor.serviceNumber'),
+                showHeader: false,
+                highlightCurrentRow: true,
+                handleChange: this.serviceNumberChange,
+                showClose: false,
+                columns: [
+                    {
+                        prop: 'serviceNumber',
+                        label: this.$t('planMonitor.serviceNumber')
+                    }
+                ]
+            },
+            tripNumberConfig: {
+                data: [],
+                title: this.$t('planMonitor.tripNumber'),
+                showHeader: false,
+                highlightCurrentRow: true,
+                handleChange: this.tripNumberChange,
+                showClose: false,
+                columns: [
+                    {
+                        prop: 'tripNumber',
+                        label: this.$t('planMonitor.tripNumber')
+                    }
+                ]
+            },
+            realData: {},
+            kmRangeCoordMap: {},
+            option: {
+                title: {
+                    text: '',
+                    left: 'center',
+                    top: '10px'
+                },
+                grid: {
+                    top: '60px',
+                    left: '160px',
+                    right: '100px',
+                    bottom: '80px',
+                    containLabel: true,
+                    backgroundColor: 'floralwhite'
+                },
+                toolbox: {
+                },
+                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
+				},
+				graphic: [{
+					id: 'static',
+					elements: []
+				}],
+				markPoint: [{
+					id: 'mark',
+					data: []
+				}],
+                series: [],
+                dataZoom: [
+                    {
+						type: 'inside',
+						zoomOnMouseWheel : 'ctrl',
+						moveOnMouseMove : 'ctrl',
+						moveOnMouseWheel: 'ctrl'
+                    },
+                    {
+                        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('rpTools', [
+            'stations'
+        ]),
+        planId() {
+            return this.$route.query.planId;
+		},
+		mapId() {
+			return 9;
+		}
+    },
+    watch: {
+        maxWidth() {
+            this.setPosition();
+        },
+        maxHeight() {
+            this.setPosition();
+        },
+        '$store.state.rpTools.planSizeCount': function () {
+            this.reSize({ width: this.$store.state.rpTools.width, height: this.$store.state.rpTools.height });
+        },
+        '$store.state.rpTools.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.rpTools.editData[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('rpTools/setSelected', { serviceNumber: serviceNumber, tripNumber: null });
+            this.analyticalTripNumber(serviceObj.trainMap || {});
+        },
+        tripNumberChange(row) {
+            const serviceNumber = this.$store.state.rpTools.selected.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: {
+                        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('rpTools/setSelected', { 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('rpTools/resize', { width, height });
+
+                if (this.top != top) {
+                    this.top = top;
+                }
+
+                if (this.height != height) {
+                    this.height = height - 20 * 2;
+                }
+            });
+        },
+        async loadChartPage() {
+            try {
+                this.$store.dispatch('rpTools/clear').then(() => {
+                    this.loadInitChart().then(() => {
+                        if (this.mapId) {
+							loadMapDataById(this.mapId);
+							getStationList(this.mapId).then(resp => {
+								const stations = resp.data.filter(el => {
+									return ['车辆段', '停车场'].findIndex(it => {
+										return el.name.includes(it)
+									}) < 0;
+								});
+								this.$store.dispatch('rpTools/setStations', stations).then(() => {
+									this.loadInitData();
+									this.myChart && this.myChart.showLoading();
+									getRpTools().then(rest => {
+										this.$store.dispatch('rpTools/setPlanData', rest.data).then(() => {
+											this.analyticalServiceNumber(this.$store.state.rpTools.editData);
+											this.loadChartData();
+											this.myChart && this.myChart.hideLoading();
+										});
+									}).catch(() => {
+										this.myChart && this.myChart.hideLoading();
+										this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
+									});
+								});
+							}).catch(() => {
+								this.$messageBox(this.$t('tip.requestingStationDataFailed'));
+								this.$store.dispatch('rpTools/setStations', []);
+							});
+                        }
+                    });
+                });
+            } catch (error) {
+                this.$messageBox(this.$t('error.loadingOperationGraphFailed'));
+            }
+        },
+        async loadChartData() {
+            try {
+                const stations = this.$store.state.rpTools.stations;
+                const planData = this.$store.state.rpTools.planData;
+                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.stations)]);
+                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();
+                    }
+                    if (this.$route.query.planName || this.$route.query.prdType === '05') {
+                        this.option.title.text = this.mapName;
+                    }
+                    this.myChart = echarts.init(document.getElementById(this.runPlanId));
+					this.myChart.setOption(this.option, {notMerge: true});
+                    this.reSize({ width: this.$store.state.rpTools.width, height: this.$store.state.rpTools.height });
+                    resolve(true);
+                } catch (error) {
+                    reject(error);
+                }
+            });
+        },
+		destroy() {
+            if (this.myChart && this.myChart.isDisposed) {
+				this.myChart.dispose();
+                this.myChart = null;
+            }
+		},
+        clearCanvas() {
+            this.option.series = [];
+            this.option.title.text = '';
+            if (this.myChart) {
+                this.myChart.clear();
+            }
+            this.myChart.setOption(this.option);
+        },
+        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.pushModels(this.option.series, [this.planConvert.initializeYaxis(this.stations)]);
+                this.option.yAxis.min = this.planConvert.computedYaxisMinValue(this.stations);
+                this.option.yAxis.max = this.planConvert.computedYaxisMaxValue(this.stations);
+            }
+        },
+        axisTooltip(param) {
+            let data = '';
+            const arr = [];
+            param.forEach(item => {
+                const station = this.stationsObj[Math.floor((item.data[1] - this.planConvert.EdgeHeight) / this.planConvert.CoordMultiple)] || { name: '', kmRange: '' };
+                if (!arr.includes(`${item.data[0]}${item.data[1]}`)) {
+                    arr.push(`${item.data[0]}${item.data[1]}`);
+                        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' ? 'Up' : 'Down'})`,
+                            `<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
+                });
+            }
+		},
+		createRpTrip(data) {
+			addRpTrip(data).then(resp => {
+				this.loadChartData();
+			}).catch(error => {
+				if (this.myChart) {
+					const op = this.myChart.getOption();
+					op.graphic[0].elements = [];
+					this.myChart.setOption(op, {notMerge: true});
+				}
+			})
+		}
+    }
+};
+</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>