From e6f7d8a207689a125b8bbdb14e4ea73690f6aac5 Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Tue, 6 Apr 2021 10:19:23 +0800
Subject: [PATCH] =?UTF-8?q?iscs=20=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/iscs_new/core/form/allElments.js          |  19 -
 src/iscs_new/core/form/builderFactory.js      |  37 ++
 src/iscs_new/core/form/elementConst.js        |  19 +
 .../core/form/elementForm/lineForm.js         |   3 -
 src/iscs_new/core/form/form2Base.js           |  70 ++--
 src/views/iscs_new/components/dataForm.vue    |  81 ++++
 src/views/iscs_new/iscsDraw/index.vue         |  61 +--
 .../newMap/displayNew/demon/runPlanView2.vue  | 373 ++++++++++++++++++
 8 files changed, 579 insertions(+), 84 deletions(-)
 delete mode 100644 src/iscs_new/core/form/allElments.js
 create mode 100644 src/iscs_new/core/form/builderFactory.js
 create mode 100644 src/iscs_new/core/form/elementConst.js
 delete mode 100644 src/iscs_new/core/form/elementForm/lineForm.js
 create mode 100644 src/views/iscs_new/components/dataForm.vue
 create mode 100644 src/views/newMap/displayNew/demon/runPlanView2.vue

diff --git a/src/iscs_new/core/form/allElments.js b/src/iscs_new/core/form/allElments.js
deleted file mode 100644
index 6e51e78eb..000000000
--- a/src/iscs_new/core/form/allElments.js
+++ /dev/null
@@ -1,19 +0,0 @@
-
-// export const allElements = {
-//     elementsList:[
-//         {code:'line', name:'线段'},
-//         {code:'text', name:'文字'},
-//         {code:'rect', name:'矩形'},
-//         {code:'circle', name:'圆形'},
-//         {code:'polygon', name:'多边形'},
-//         {code:'triangle', name:'三角形'},
-//         {code:'arrow', name:'箭头'},
-//         {code:'polyline', name:'多边形折线段'},
-//         {code:'isogon', name:'正多边形'},
-//         {code:'ellipse', name:'椭圆'},
-//         {code:'arc', name:'圆弧'},
-//         {code:'sector', name:'扇形'},
-//         {code:'heart', name:'心形'},
-//         {code:'droplet', name:'水滴'}
-//     ]
-// };
diff --git a/src/iscs_new/core/form/builderFactory.js b/src/iscs_new/core/form/builderFactory.js
new file mode 100644
index 000000000..22d525f52
--- /dev/null
+++ b/src/iscs_new/core/form/builderFactory.js
@@ -0,0 +1,37 @@
+import {elementConst} from './elementConst';
+import form2Base from './form2Base';
+class BuilderFactory {
+    constructor() {
+        this.formList = [];
+    }
+    getFormList() {
+        const elementList = elementConst.elementsList;
+        elementList.forEach(element=>{
+            const temp = Object.assign({}, element);
+
+            temp.formGroup = [];
+            temp.model = {};
+            temp.rules = {};
+
+            // 添加通用配置
+            temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
+            form2Base.forEach(each=>{
+                temp.model[each.prop] = each.defValue;
+                temp.rules[each.prop] = each.rules;
+            });
+
+            // 添加绘图配置  shape
+            // temp.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
+            // temp.rules
+            // let ClassName=element.code;
+            // const  = elementTypeList[element];
+            // temp.formStyle=new ClassName();
+            // 添加样式配置  style
+
+            this.formList.push(temp);
+        });
+        return this.formList;
+    }
+}
+
+export default BuilderFactory;
diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js
new file mode 100644
index 000000000..6880d7112
--- /dev/null
+++ b/src/iscs_new/core/form/elementConst.js
@@ -0,0 +1,19 @@
+
+export const elementConst = {
+    elementsList:[
+        {code:'line', name:'线段', formList:{style:[], shape:[] }},
+        {code:'text', name:'文字', formList:{style:[], shape:[] }},
+        {code:'rect', name:'矩形', formList:{style:[], shape:[] }},
+        {code:'circle', name:'圆形', formList:{style:[], shape:[] }},
+        {code:'polygon', name:'多边形', formList:{style:[], shape:[] }},
+        {code:'triangle', name:'三角形', formList:{style:[], shape:[] }},
+        {code:'arrow', name:'箭头', formList:{style:[], shape:[] }},
+        {code:'polyline', name:'多边形折线段', formList:{style:[], shape:[] }},
+        {code:'isogon', name:'正多边形', formList:{style:[], shape:[] }},
+        {code:'ellipse', name:'椭圆', formList:{style:[], shape:[] }},
+        {code:'arc', name:'圆弧', formList:{style:[], shape:[] }},
+        {code:'sector', name:'扇形', formList:{style:[], shape:[] }},
+        {code:'heart', name:'心形', formList:{style:[], shape:[] }},
+        {code:'droplet', name:'水滴', formList:{style:[], shape:[] }}
+    ]
+};
diff --git a/src/iscs_new/core/form/elementForm/lineForm.js b/src/iscs_new/core/form/elementForm/lineForm.js
deleted file mode 100644
index f545a1fb2..000000000
--- a/src/iscs_new/core/form/elementForm/lineForm.js
+++ /dev/null
@@ -1,3 +0,0 @@
-class lineForm {
-
-}
diff --git a/src/iscs_new/core/form/form2Base.js b/src/iscs_new/core/form/form2Base.js
index 002e52015..8ebbac736 100644
--- a/src/iscs_new/core/form/form2Base.js
+++ b/src/iscs_new/core/form/form2Base.js
@@ -1,37 +1,33 @@
-export default {
-	// number 0	控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低，而且不会创建新的 Canvas。
-	z2: {
-		prop: 'z', label: '层级 z2', type: 'select', defValue: 10,
-	},
-	name: {
-
-	},
-	// boolean	false	是否进行裁剪。
-	culling: {
-
-	},
-	// string	'pointer'	鼠标移到元素上时的鼠标样式。
-	cursor: {
-
-	},
-	// boolean	false	图形是否可拖曳。
-	draggable: {
-
-	},
-	// boolean	false	图形是否不可见，为 true 时不绘制图形，但是仍能触发鼠标事件。
-	invisible: {
-
-	},
-	// number	-1	是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。
-	progressive: {
-
-	},
-	// boolean	false	是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。
-	rectHover: {
-
-	},
-	// boolean	false	是否响应鼠标事件。
-	silent: {
-
-	}
-}
+export default [
+    // number 0	控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。
+    { prop: 'z', label: '层级 z',
+        type: 'number', precisionFlag:0, min:0, max:100, step:1,
+        rules:[{ required: true, message:'请输入层级z', trigger: 'blur' }],
+        defValue: 1, required:true
+    },
+    // number 0	控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低，而且不会创建新的 Canvas。
+    { prop: 'z2', label: '层级 z2',
+        type: 'number', precisionFlag:0, min:0, max:100, step:1,
+        rules:[{ required: true, message:'请输入层级z2', trigger: 'blur' }],
+        defValue: 10, required:true
+    }
+    // boolean	false	图形是否不可见，为 true 时不绘制图形，但是仍能触发鼠标事件。
+    // {prop: 'invisible', label: '不可见', type: 'switch', defValue: false,required:true},
+    // // boolean	false	是否响应鼠标事件。
+    // {prop: 'silent', label: '响应鼠标事件', type: 'switch', defValue: false,required:true}
+    // // boolean	false	是否进行裁剪。
+    // culling: {
+    // },
+    // // string	'pointer'	鼠标移到元素上时的鼠标样式。
+    // cursor: {
+    // },
+    // // boolean	false	图形是否可拖曳。
+    // draggable: {
+    // },
+    // // number	-1	是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。
+    // progressive: {
+    // },
+    // // boolean	false	是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。
+    // rectHover: {
+    // },
+];
diff --git a/src/views/iscs_new/components/dataForm.vue b/src/views/iscs_new/components/dataForm.vue
new file mode 100644
index 000000000..5f0323576
--- /dev/null
+++ b/src/views/iscs_new/components/dataForm.vue
@@ -0,0 +1,81 @@
+<template>
+  <el-form ref="form" :model="formModel" :rules="rules" class="composeForm" label-width="auto">
+    <div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
+      <div class="styleGroupName">
+        {{ styleGroup.name }}
+      </div>
+      <template v-for="item in styleGroup.styleList">
+        <template v-if="checkFieldType(item, 'number')">
+          <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
+            <el-input-number
+              v-if="item.precisionFlag"
+              v-model="formModel[styleGroup.code][item.prop]"
+              size="mini"
+              :min="isNaN(item.min) ? -Infinity : item.min"
+              :max="isNaN(item.max)? Infinity : item.max"
+              :step="isNaN(item.step) ? -Infinity : item.step"
+              :precision="item.precision"
+            />
+            <el-input-number
+              v-else
+              v-model="formModel[styleGroup.code][item.prop]"
+              size="mini"
+              :min="isNaN(item.min) ? -Infinity : item.min"
+              :max="isNaN(item.max)? Infinity : item.max"
+              :step="isNaN(item.step) ? -Infinity : item.step"
+            />
+          </el-form-item>
+        </template>
+        <template v-else-if="checkFieldType(item, 'switch')">
+          <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
+            <el-switch
+              v-model="formModel[styleGroup.code][item.prop]"
+              :active-color="item.activeColor || '#409eff'"
+              :inactive-color="item.inactiveColor || '#dcdfe6'"
+            />
+          </el-form-item>
+        </template>
+      </template>
+    </div>
+  </el-form>
+</template>
+<script>
+export default {
+    name:'DataForm',
+    props: {
+        form: {
+            type: Object,
+            required: true
+        },
+        formModel: {
+            type: Object,
+            required: true
+        },
+        rules: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+    mounted() {
+    },
+    methods: {
+        checkFieldType(field, type) {
+            return field.type === type;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .composeForm{padding: 10px 15px;}
+    .styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;}
+    .formName .el-form-item__label {font-size:14px;}
+    .formName.el-form-item {margin-bottom:12px}
+    .styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
+</style>
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index ca49cd044..554778bfb 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -14,27 +14,35 @@
               @click="handleSave"
             >保存</el-button>
           </div>
-          <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <!-- <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
             <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">{{ element.name }}</el-tab-pane>
+          </el-tabs> -->
+          <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">
+              <data-form :ref="'dataform'+index" :form="element" :form-model="element.model" :rules="element.rules" />
+            </el-tab-pane>
           </el-tabs>
         </el-card>
       </div>
-      <div class="right-card" :class="{'hide': tableShow}">
+      <!-- <div class="right-card" :class="{'hide': tableShow}">
         <div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
-      </div>
+      </div> -->
     </div>
   </transition>
 </template>
 <script>
 import localStore from 'storejs';
 import IscsPlate from '@/views/iscsSystem/index';
-import {allElements} from '@/iscs_new/core/form/allElments';
+// import {allElements} from '@/iscs_new/core/form/allElments';
+import BuilderFactory from '@/iscs_new/core/form/builderFactory';
+import DataForm from '../components/dataForm';
 import { saveIscsElement } from '@/api/iscs';
 
 export default {
     name: 'IscsView',
     components: {
-        IscsPlate
+        IscsPlate,
+        DataForm
     },
     data() {
         return {
@@ -44,7 +52,7 @@ export default {
             },
             widthLeft: Number(localStore.get('LeftWidth')) || 450,
             draftShow: false,
-            tableShow: false,
+            // tableShow: false,
             enabledTab:'',
             elementList:[]
         };
@@ -60,10 +68,13 @@ export default {
         }
     },
     mounted() {
-        this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
-        this.$refs.iscsPlate.drawIscsInit();
-        debugger;
-        this.elementList = allElements.elementsList;
+        // this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
+        // this.$refs.iscsPlate.drawIscsInit();
+        // debugger;
+        // this.elementList = allElements.elementsList;
+        // this.enabledTab = this.elementList[0].code;
+        this.composeName = this.$route.query.composeName;
+        this.elementList = new BuilderFactory().getFormList();
         this.enabledTab = this.elementList[0].code;
     },
     beforeDestroy() {
@@ -77,22 +88,22 @@ export default {
         clickDraftBtn() {
             this.draftShow = !this.draftShow;
         },
-        clickTableBtn() {
-            this.tableShow = !this.tableShow;
-        },
+        // clickTableBtn() {
+        //     this.tableShow = !this.tableShow;
+        // },
         handleSave(data) {
-            const param = {
-                graphData: data,
-                mapId: this.$route.query.mapId,
-                system: this.$route.query.system,
-                totalSystem: this.$route.query.mode,
-                userInterface: this.$route.query.part
-            };
-            saveIscsElement(param).then(resp => {
-                this.$message.success('ISCS数据保存成功！');
-            }).catch(() => {
-                this.$message.error('ISCS数据保存异常！');
-            });
+            // const param = {
+            //     graphData: data,
+            //     mapId: this.$route.query.mapId,
+            //     system: this.$route.query.system,
+            //     totalSystem: this.$route.query.mode,
+            //     userInterface: this.$route.query.part
+            // };
+            // saveIscsElement(param).then(resp => {
+            //     this.$message.success('ISCS数据保存成功！');
+            // }).catch(() => {
+            //     this.$message.error('ISCS数据保存异常！');
+            // });
         },
         handleTabClick() {
 
diff --git a/src/views/newMap/displayNew/demon/runPlanView2.vue b/src/views/newMap/displayNew/demon/runPlanView2.vue
new file mode 100644
index 000000000..77a913d5f
--- /dev/null
+++ b/src/views/newMap/displayNew/demon/runPlanView2.vue
@@ -0,0 +1,373 @@
+<template>
+  <!-- v-dialogDrag -->
+  <el-dialog
+    v-dialogLoading="dialogLoading"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="100%"
+    :before-close="doClose"
+    :close-on-click-modal="false"
+    :modal="false"
+    fullscreen
+  >
+    <div :id="runPlanId" v-loading="loading" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getPublishMapInfo } from '@/api/jmap/map';
+import { timeFormat } from '@/utils/date';
+import echarts from 'echarts';
+import {toTimeStamp, formatDuring} from '@/utils/date';
+
+// 运行图预览
+export default {
+    name: 'RunPlanView',
+    props: {
+        group: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: true,
+            runPlanId: 'run-plan-view',
+            myChart: null,
+            PlanConvert: {},
+            series: [],
+            option: {
+                title: {
+                    text: '',
+                    left: 'center'
+                },
+                grid: {
+                    top: '30px',
+                    left: '120px',
+                    right: '40px',
+                    bottom: '80px',
+                    containLabel: true,
+                    backgroundColor: 'floralwhite'
+                },
+                toolbox: {
+                    // right: '20px',
+                    // feature: {
+                    //     dataZoom: {
+                    //         yAxisIndex: 'none'
+                    //     },
+                    //     restore: {},
+                    //     saveAsImage: {}
+                    // }
+                },
+                tooltip: {
+                    axisPointer: {
+                        trigger: 'item',
+                        type: 'cross'
+                    },
+                    formatter: this.axisTooltip,
+                    borderWidth: 1
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: [],
+                        axisLine: {
+                            onZero: false,
+                            lineStyle: {
+                                width: 2,
+                                color: '#d14a61'
+                            }
+                        },
+                        axisLabel: {
+                            formatter: this.xAxisLableFormat,
+                            textStyle: {
+                                color: '#333'
+                            }
+                        },
+                        axisPointer: {
+                            snap: true,
+                            label: {
+                                formatter: this.xAxisPointFormat,
+                                backgroundColor: 'rgb(255,0,0,0.5)',
+                                color: 'white'
+                            }
+                        }
+                    }
+                ],
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        onZero: false,
+                        lineStyle: {
+                            width: 2,
+                            color: '#d14a61'
+                        }
+                    },
+                    axisLabel: {
+                        interval: 'auto',
+                        formatter: this.yAxisLableFormat
+                    },
+                    axisPointer: {
+                        xAxisIndex: 'all',
+                        label: {
+                            formatter: this.yAxisPointFormat,
+                            backgroundColor: 'rgb(0,100,0,0.5)',
+                            color: 'white'
+                        }
+                    },
+                    min: 0,
+                    max: 0
+                },
+                // graphic: {
+                // 	type: 'line',
+                // 	progressive: true
+                // },
+                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: '25px'
+                    }
+                ]
+            },
+            absoluteTime: 2 * 3600,
+            indexKmRangeMap: {},
+            runPlanData: {},
+            dialogLoading: false,
+            initialPlanData: []
+        };
+    },
+    computed: {
+        ...mapGetters('runPlan', [
+            'stations'
+        ]),
+        title() {
+            return this.$t('display.runPlan.previewRunDiagram');
+        }
+    },
+    watch: {
+        '$store.state.runPlan.planLoadedCount': async function () {
+            try {
+                await this.loadChartPage();
+                if (this.dialogShow) {
+                    await this.loadInitData(this.series);
+                }
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+        '$store.state.runPlan.planUpdateCount': function () {
+            this.updateRunPlanData(this.$store.state.runPlan.updateData);
+        },
+        '$store.state.app.windowSizeCount': function() {
+            this.reSize({ width: this.$store.state.app.width, height: this.$store.state.app.height - 55 });
+        }
+    },
+    mounted() {
+        getPublishMapInfo(this.$route.query.mapId).then(res=>{
+            this.PlanConvert = this.$theme.loadPlanConvert(res.data.lineCode);
+            this.initialPlanData = this.$store.state.runPlan.planData;
+            this.loadChartPage();
+        });
+    },
+    beforeDestroy() {
+        if (this.myChart && this.myChart.isDisposed) {
+            this.myChart.dispose();
+            this.myChart = null;
+        }
+    },
+    methods: {
+        async  doShow() {
+            try {
+                this.dialogLoading = true;
+                this.dialogShow = true;
+                this.loadInitData(this.series);
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.dialogLoading = false;
+            }
+        },
+        async doClose() {
+            this.dialogShow = false;
+        },
+        async loadChartPage() {
+            const stations = this.$store.state.runPlan.stations;
+            const planData = this.$store.state.runPlan.planData;
+            this.series = [];
+            this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
+            this.pushModels(this.series, [this.PlanConvert.initializeYaxis(stations)]);
+            this.pushModels(this.series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 1, color: '#000' }));
+        },
+        async loadInitData(series) {
+            this.myChart && this.myChart.showLoading();
+            await this.xAxisInit();
+            await this.yAxisInit();
+            await this.loadInitChart(series);
+            this.myChart && this.myChart.hideLoading();
+        },
+        loadInitChart(series) {
+            return new Promise((resolve, reject) => {
+                try {
+                    if (this.myChart && this.myChart.isDisposed) {
+                        this.myChart.clear();
+                    }
+                    let startValue = 3600 + this.PlanConvert.TranslationTime;
+                    const offsetTime = 3600;
+                    const initTime = toTimeStamp(formatDuring(this.$store.state.training.initTime));
+                    startValue = initTime - this.PlanConvert.TranslationTime;
+                    this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
+                    this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
+                    this.option.series = series;
+                    this.myChart = echarts.init(document.getElementById(this.runPlanId));
+                    if (this.myChart) {
+                        this.myChart.setOption(this.option);
+                        this.reSize({ width: document.documentElement.clientWidth - 10, height: document.documentElement.clientHeight - 55 });
+                        this.myChart.on('click', this.mouseClick);
+                    }
+                    resolve(true);
+                } catch (error) {
+                    reject(error);
+                }
+            });
+        },
+        updateRunPlanData(data) {
+            const stations = this.$store.state.runPlan.stations;
+            const planData = this.$store.state.runPlan.planData;
+            const initialPlanData = this.$store.state.runPlan.initialPlanData;
+            if (data[0] && initialPlanData[data[0].serviceNumber]) {
+                Object.keys(initialPlanData[data[0].serviceNumber].trainMap).forEach(item => {
+                    if (initialPlanData[data[0].serviceNumber].trainMap[item + ''].tripNumber == data[0].tripNumber) {
+                        data[0].directionCode = initialPlanData[data[0].serviceNumber].trainMap[item + ''].directionCode;
+                    }
+                });
+            }
+            if (data[0]) {
+                data[0].secondTime = data[0].second;
+            }
+            this.series = this.PlanConvert.updateDataToModels(data, stations, this.kmRangeCoordMap,
+                planData, this.series, { color: '#FF00DE', width: 2 }
+            );
+            this.myChart && this.myChart.setOption({ series: this.series });
+        },
+        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;
+        },
+        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 = this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
+                list.push(time);
+            }
+            this.option.xAxis[0].data = list;
+        },
+        yAxisInit() {
+            if (Object.keys(this.PlanConvert).length) {
+                this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
+                this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
+            }
+        },
+        axisTooltip(param) {
+            const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
+            return [
+                `Point Data <hr size=1 style="margin: 3px 0">`,
+                `${this.$t('display.runPlan.stationName')}: ${station.name}<br>`,
+                `${this.$t('display.runPlan.stationMark')}: ${station.kmRange} km <br>`,
+                `${this.$t('display.runPlan.arrivalTime')}: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
+            ].join('');
+        },
+        settingExac(data) {
+            this.absoluteTime = Math.abs(parseInt(data.endValue) - parseInt(data.startValue)) / 1000;
+            this.myChart && this.myChart.setOption({
+                xAxis: this.option.xAxis,
+                yAxis: this.option.yAxis
+            });
+
+            this.myChart && this.myChart.dispatchAction({
+                type: 'dataZoom',
+                dataZoomIndex: [0, 1],
+                startValue: parseInt(data.startValue / 1000),
+                endValue: parseInt(data.endValue / 1000)
+            });
+        },
+        run(start) {
+            this.myChart && this.myChart.dispatchAction({
+                type: 'dataZoom',
+                dataZoomIndex: [0, 1],
+                startValue: parseInt(start - this.absoluteTime / 2),
+                endValue: parseInt(start + this.absoluteTime / 2)
+            });
+            this.loadInitData(this.series);
+        },
+        reSize(opt) {
+            if (this.myChart) {
+                this.myChart.resize({ width: opt.width, height: opt.height, silent: false });
+            }
+        }
+    }
+};
+</script>
+<style scoped rel="stylesheet/scss" lang="scss">
+    /deep/ {
+        .el-dialog__body {
+            padding: 0px !important;
+            background-color: floralwhite !important;
+        }
+    }
+</style>