From c7e75739c33b43e1c772fb0179cbf2739120d1ea Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Thu, 1 Jul 2021 10:06:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A5=BF=E5=AE=89=E4=B8=89=E5=8A=A0=E7=BA=BF?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/runplan.js                            |   8 +
 src/jmapNew/theme/xian_01/menus/menuBar.vue   |   9 +-
 .../menus/menuDialog/addRunplanLine.vue       | 314 ++++++++++++++++++
 src/store/modules/runplan.js                  |  85 ++++-
 src/store/modules/socket.js                   |   9 +-
 .../newMap/displayNew/demon/runPlanView.vue   |   1 +
 src/views/newMap/displayNew/menuSchema.vue    |  16 +-
 src/views/newMap/mapsystemNew/index.vue       |   1 +
 8 files changed, 438 insertions(+), 5 deletions(-)
 create mode 100644 src/jmapNew/theme/xian_01/menus/menuDialog/addRunplanLine.vue

diff --git a/src/api/runplan.js b/src/api/runplan.js
index f0ccc4795..5aa70ac98 100644
--- a/src/api/runplan.js
+++ b/src/api/runplan.js
@@ -148,6 +148,14 @@ export function listUserRoutingData(mapId) {
     });
 }
 
+/** 根据目的地码查询用户交路数据（新版） */
+export function getUserRoutingDataByDes(mapId, destinationCode) {
+    return request({
+        url: `/api/runPlan/userData/${mapId}/routing/select?destinationCode=${destinationCode}`,
+        method: 'get'
+    });
+}
+
 /** 根据交路查询交路区段列表*/
 export function querySectionListByRouting(routingCode) {
     return request({
diff --git a/src/jmapNew/theme/xian_01/menus/menuBar.vue b/src/jmapNew/theme/xian_01/menus/menuBar.vue
index aab0162ed..6ae207fb1 100644
--- a/src/jmapNew/theme/xian_01/menus/menuBar.vue
+++ b/src/jmapNew/theme/xian_01/menus/menuBar.vue
@@ -15,6 +15,7 @@
     <train-delete ref="trainDelete" />
     <manage-user ref="manageUser" />
     <help-about ref="helpAbout" />
+    <add-runplan-line ref="addRunplanLine" />
   </div>
 </template>
 <script>
@@ -22,6 +23,7 @@ import MenuBar from '@/jmapNew/theme/components/menus/menuBar';
 import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler.js';
 import StationControlConvert from './menuDialog/stationControlConvert';
 import TrainAdd from './menuDialog/trainAdd';
+import AddRunplanLine from './menuDialog/addRunplanLine';
 import TrainTranstalet from './menuDialog/trainTranstalet';
 import TrainDelete from './menuDialog/trainDelete';
 import PasswordBox from './menuDialog/passwordBox';
@@ -42,6 +44,7 @@ export default {
         ViewName,
         ViewDevice,
         TrainAdd,
+        AddRunplanLine,
         TrainTranstalet,
         TrainDelete,
         ManageUser,
@@ -403,7 +406,11 @@ export default {
             this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                 if (valid) {
                     this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
-                    this.$refs.trainAdd.doShow(operate);
+                    if (this.$route.query.lineCode == '10') {
+                        this.$refs.trainAdd.doShow(operate);
+                    } else {
+                        this.$refs.addRunplanLine.doShow(operate);
+                    }
                 }
             });
         },
diff --git a/src/jmapNew/theme/xian_01/menus/menuDialog/addRunplanLine.vue b/src/jmapNew/theme/xian_01/menus/menuDialog/addRunplanLine.vue
new file mode 100644
index 000000000..8b3d7a7fe
--- /dev/null
+++ b/src/jmapNew/theme/xian_01/menus/menuDialog/addRunplanLine.vue
@@ -0,0 +1,314 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="xian-01__systerm stand-stop-time"
+    :title="title"
+    :visible.sync="show"
+    width="430px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-form ref="form" size="small" label-width="100px" :model="addModel" :rules="rules">
+      <el-form-item prop="serviceNumber">
+        <span id="rpServiceNumber" slot="label">表号: </span>
+        <el-input v-model="addModel.serviceNumber" style="width:260px" />
+      </el-form-item>
+      <el-form-item prop="tripNumber">
+        <span id="rpTripNumber" slot="label">车次号: </span>
+        <el-input v-model="addModel.tripNumber" style="width:260px" />
+      </el-form-item>
+      <el-form-item prop="destinationCode">
+        <span id="rpDestinationCode" slot="label">目的地码: </span>
+        <el-select ref="destinationCode" v-model="addModel.destinationCode" filterable :placeholder="$t('menu.menuDialog.pleaseSelect')" style="width:260px" @change="changeDestination">
+          <el-option
+            v-for="item in destinationCodeList"
+            :key="item.code"
+            :label="item.code"
+            :value="item.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="routeCode">
+        <span slot="label">交路: </span>
+        <el-select ref="routing" v-model="addModel.routing" value-key="id" filterable :placeholder="$t('menu.menuDialog.pleaseSelect')" style="width:260px">
+          <el-option
+            v-for="item in routeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="startTime">
+        <span slot="label">开始时间: </span>
+        <el-time-picker ref="startTime" v-model="addModel.startTime" size="small" value-format="HH:mm:ss" :clearable="false" :picker-options="{selectableRange:'02:00:00-23:59:59'}" style="width:260px" />
+      </el-form-item>
+    </el-form>
+    <el-row justify="center" class="button-group">
+      <el-col :span="8" :offset="4">
+        <el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">{{ $t('menu.menuDialog.confirm') }}</el-button>
+      </el-col>
+      <el-col :span="8" :offset="4">
+        <el-button :id="domIdCancel" @click="cancel">{{ $t('menu.menuDialog.cancel') }}</el-button>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
+import {getUserRoutingDataByDes, querySectionListByRouting, getMapStationRunUser, getStationStopTime} from '@/api/runplan';
+import { getRunplanConfig } from '@/api/jmap/mapdraft';
+import { formatTime } from '@/jmapNew/theme/parser/util';
+import { sendCommandNew } from '@/api/jmap/training';
+export default {
+    name:'AddRunplanLine',
+    data() {
+        return {
+            dialogShow:false,
+            loading:false,
+            operate: null,
+            operation:'',
+            destinationCodeList:[],
+            routeList:[],
+            stopStationMap:{},
+            stopTimeMap:{},
+            reentryData: {},
+            addModel:{
+                serviceNumber:'',
+                tripNumber:'',
+                destinationCode:'',
+                startTime:'',
+                routing:{
+                    startStationCode:'',
+                    endStationCode:'',
+                    endSectionCode:'',
+                    startSectionCode:'',
+                    id:'',
+                    startTbFront: null,
+                    endTbFront: null
+                }
+                // planId: "472"
+
+                // routingCode
+                // startTbFront
+                // endTbFront
+                // arriveConfigList
+            },
+            rules: {
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList'
+        ]),
+        show() {
+            return this.dialogShow && !this.$store.state.menuOperation.break;
+        },
+        domIdCancel() {
+            return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
+        },
+        domIdConfirm() {
+            return this.dialogShow ? OperationEvent.Command.planTrain.addPlanTrain.domId : '';
+        },
+        title() {
+            return this.$t('menu.menuDialog.addPlanTrain');
+        },
+        group() {
+            return this.$route.query.group;
+        }
+    },
+    mounted() {
+        const destinationList = this.sectionList.filter(section=>{
+            return section.destinationCode != '' && section.destinationCode != undefined;
+        });
+        this.destinationCodeList = destinationList.map(section=>{
+            const destination = {};
+            destination['code'] = section.destinationCode;
+            return destination;
+        });
+        const mapId = this.$route.query.mapId;
+        const that = this;
+        if (mapId) {
+            getMapStationRunUser(mapId).then(resp =>{
+                const list = resp.data.list;
+                list.forEach(elem => {
+                    that.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
+                });
+                getStationStopTime(mapId).then(response=>{
+                    const stopTimeList = response.data.list;
+                    stopTimeList.forEach(element=>{
+                        that.stopTimeMap[element.stationCode] = {parkingTime:element.parkingTime};
+                    });
+                    getRunplanConfig(mapId).then(resp => {
+                        const data = resp.data;
+                        this.reentryData = data.config.reentryData;
+                    });
+                });
+            });
+        }
+
+    },
+    methods:{
+        doShow(operate) {
+            this.operate = operate || {};
+            this.operation = operate.operation;
+
+            if (!this.dialogShow) {
+                this.loading = false;
+            }
+
+            this.dialogShow = true;
+            this.$nextTick(function () {
+                this.$store.dispatch('training/emitTipFresh');
+            });
+        },
+        doClose() {
+            this.$refs['routing'].blur();
+            this.$refs['destinationCode'].blur();
+            this.$refs['startTime'].hidePicker();
+            this.loading = false;
+            this.dialogShow = false;
+            this.$store.dispatch('training/emitTipFresh');
+        },
+        changeDestination(destinationCode) {
+            this.addModel.routing = {};
+            const mapId = this.$route.query.mapId;
+            if (mapId) {
+                getUserRoutingDataByDes(mapId, destinationCode).then(resp => {
+                    this.routeList = resp.data;
+                }).catch((error) => {
+                    this.routeList = [];
+                    console.log(error);
+                });
+            }
+        },
+        commit() {
+            const runplanLine = {serviceNumber:this.addModel.serviceNumber, tripConfigList:[{
+                startStationCode:this.addModel.routing.startStationCode,
+                endStationCode:this.addModel.routing.endStationCode,
+                endSectionCode:this.addModel.routing.endSectionCode,
+                startSectionCode:this.addModel.routing.startSectionCode,
+                routingCode:this.addModel.routing.id,
+                id:1,
+                tripNumber:this.addModel.tripNumber,
+                startTime:this.addModel.startTime
+            }] };
+            //
+            // startTbFront
+            // startTbFront
+            // endTbFront
+            const arriveConfigList = [];
+            const that = this;
+            querySectionListByRouting(that.addModel.routing.id).then(resp=>{
+                const length = resp.data.length - 1;
+                resp.data.forEach((parkSectionCode, index)=>{
+                    const arriveConfig = {arriveTime:'', departureTime:'', sectionCode:parkSectionCode.sectionCode, stationCode:parkSectionCode.stationCode};
+                    const prev = arriveConfigList[index - 1];
+                    const reentryData = that.reentryData[parkSectionCode.stationCode] || {};
+                    if (index == 0) {
+                        arriveConfig.departureTime = that.addModel.startTime;
+                    } else if (index < length) {
+                        if (String(that.addModel.routing.startTbFront) == 'false' && index == 1) {
+                            // const reentryData = that.reentryData[parkSectionCode.stationCode] || {};
+                            arriveConfig.arriveTime = formatTime(this.computedTimeByString(prev.departureTime) / 1000 + (reentryData.tbTo || 0));
+                        } else {
+                            const runLevel = that.stopStationMap[[prev.sectionCode, parkSectionCode.sectionCode].toString()] || {};
+                            arriveConfig.arriveTime = formatTime(this.computedTimeByString(prev.departureTime) / 1000 + (runLevel.l3 || 0));
+                        }
+                        const nowParking = that.stopTimeMap[parkSectionCode.stationCode] || {};
+                        arriveConfig.departureTime = formatTime(this.computedTimeByString(arriveConfig.arriveTime) / 1000 + nowParking.parkingTime || 0 );
+                    } else {
+                        if (String(that.addModel.routing.endTbFront) == 'false') {
+                            // const reentryData = that.reentryData[parkSectionCode.stationCode] || {};
+                            arriveConfig.arriveTime = formatTime(this.computedTimeByString(prev.departureTime) / 1000 + (reentryData.tbTo || 0));
+                        } else {
+                            const runLevel = that.stopStationMap[[prev.sectionCode, parkSectionCode.sectionCode].toString()] || {};
+                            arriveConfig.arriveTime = formatTime(this.computedTimeByString(prev.departureTime) / 1000 + (runLevel.l3 || 0));
+                        }
+                        arriveConfig.departureTime = '';
+                    }
+                    // if (index == 0) {
+                    //     arriveConfig.departureTime = that.addModel.startTime;
+                    // } else if (index < resp.data.length - 1) {
+                    //     const prev = arriveConfigList[index - 1];
+                    //     // startSectionCode;
+                    //     // endSectionCode;
+                    //     const runLevel = that.stopStationMap[[prev.sectionCode, parkSectionCode.sectionCode].toString()] || 0;
+                    //     arriveConfig.arriveTime = prev.departureTime + that.stopTimeMap[prev.stationCode] || 0 + runLevel ? runLevel.l3 : 0;
+                    //
+                    //     // elem.stopTime = this.stopTimeMap[elem.stationCode].parkingTime;
+                    // } else {
+                    //     arriveConfig.arriveTime = '';
+                    // }
+                    // {  }
+                    arriveConfigList.push(arriveConfig);
+                });
+                runplanLine.tripConfigList[0].arriveConfigList = arriveConfigList;
+                runplanLine.tripConfigList[0].endTime = arriveConfigList[arriveConfigList.length - 1].arriveTime;
+
+                if (this.group) {
+                    sendCommandNew(this.group, 'RunPlan_Add_Trip', runplanLine).then((response) => {
+                        this.$message.success('添加计划车成功');
+                        this.doClose();
+                        // 重新加载 仿真运行图
+                    }).catch(error => {
+                        this.$messageBox('添加计划车失败：' + error.$message);
+                    });
+                }
+            });
+        },
+        computedTimeByString(timeStr) {
+            const bTime = +new Date(`2019-01-01 00:00:00`);
+            const eTime = +new Date(`2019-01-01 ${timeStr}`);
+            return Number(eTime) - Number(bTime);
+        },
+        cancel() {
+            const operate = {
+                operation: OperationEvent.Command.cancel.menu.operation
+            };
+
+            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
+                if (valid) {
+                    this.doClose();
+                }
+            }).catch(() => { this.doClose(); });
+        }
+
+        // serviceNumber: "001",
+        // tripConfigList:[
+        //     {
+        // arriveConfigList[]
+        // {
+        // arriveTime: "06:00:00"
+        // departureTime: "06:00:00"
+        // sectionCode: "T2"
+        // speedLevel: "等级一"
+        // speedLevelTime: 123
+        // stationCode: "Station1478"
+        // stopTime: 0
+        // }
+
+        // startStationCode
+        // endStationCode
+        // endSectionCode
+        // startSectionCode
+        // endTime
+        // id
+        // routingCode: 3615
+        // serviceNumber: "001"
+        // startTime: "06:00:00"
+        // tripNumber: ""
+        //     }
+        // ]
+    }
+};
+</script>
+<style lang="scss" scoped>
+.rpServiceNumber{}
+.rpTripNumber{}
+.rpDestinationCode{}
+</style>
diff --git a/src/store/modules/runplan.js b/src/store/modules/runplan.js
index f86ad70be..0b04156ec 100644
--- a/src/store/modules/runplan.js
+++ b/src/store/modules/runplan.js
@@ -113,7 +113,86 @@ const runPlan = {
                 state.planData[serviceNumber] = { oldIndex, serviceNumber, trainMap: {} };
                 state.planLoadedCount++;
             }
-        }, 
+        },
+        updateTrainRunplan:(state, updateServiceNumber) => {
+            const dataList = updateServiceNumber.serviceNumberDataList;
+            const length = dataList.length;
+            if (length > 0) {
+                dataList.forEach(data=>{
+                    const {serviceNumber, tripNumberDataList} = data;
+                    const serviceNumberDataList = state.planData.serviceNumberDataList;
+                    const serviceObj = serviceNumberDataList.find(serviceNumberData=>{ return serviceNumberData.serviceNumber == serviceNumber; });
+                    if (!serviceObj) {
+                        // 原始计划不存在
+                        state.editData[serviceNumber] = { oldIndex: serviceNumberDataList.length, serviceNumber: serviceNumber, backup: undefined, trainMap: {}};
+                        tripNumberDataList.forEach(tripNumberData=>{
+                            state.editData[serviceNumber].trainMap[tripNumberData.tripNumber] = Object.assign({oldIndex:tripNumberDataList.length }, tripNumberData);
+                        });
+                        state.planData.serviceNumberDataList.push({
+                            serviceNumber: serviceNumber,
+                            tripNumberDataList:[...tripNumberDataList]
+                        });
+                    } else {
+                        // 原始计划存在
+                        tripNumberDataList.forEach(tripNumberData=>{
+                            if (tripNumberData.add) {
+                                // 添加计划
+                                state.editData[serviceNumber].trainMap[tripNumberData.tripNumber] = Object.assign({oldIndex:serviceObj.tripNumberDataList.length }, tripNumberData);
+                                serviceObj.tripNumberDataList.push(tripNumberData);
+                            } else if (tripNumberData.invalid) {
+                                // 删除计划
+                                if (tripNumberData.firstInvalid) {
+                                    // 删除的第一条数据处理
+                                } else {
+
+                                }
+                            }
+                        });
+                        // 删除  刷新  绘制
+                        // if (tripNumberData.invalid) {
+                        //     if (tripNumberData.firstInvalid) {
+                        //     } else {
+                        //         // delete state.editData[serviceNumber].trainMap[tripNumberData.tripNumber];
+                        //     }
+                        // } else {
+                        // }
+                    }
+                    // if (tripNumberDataList.length > 0) {
+                    //     tripNumberDataList.forEach(tripNumberData=>{
+                    //         if (tripNumberData.add) {
+                    //             const trainLength = Object.keys(state.initialPlanData[serviceNumber].trainMap).length;
+                    //             state.initialPlanData[serviceNumber].trainMap[tripNumberData.tripNumber] = {
+                    //                 directionCode:tripNumberData.directionCode,
+                    //                 endSecondTime:tripNumberData.endSecondTime,
+                    //                 endSectionCode:tripNumberData.endSectionCode,
+                    //                 oldIndex:trainLength,
+                    //                 right:tripNumberData.right,
+                    //                 reentry: tripNumberData.reentry,
+                    //                 startSecondTime:tripNumberData.startSecondTime,
+                    //                 startSectionCode:tripNumberData.startSectionCode,
+                    //                 stationTimeList:tripNumberData.stationTimeList,
+                    //                 tripNumber:tripNumberData.tripNumber
+                    //             };
+                    //         } else if (tripNumberData.invalid) {
+                    //             if (tripNumberData.firstInvalid) {
+                    //                 // 处理被删除的前一段的最后一个点的问题
+                    //                 // state.initialPlanData[serviceNumber].trainMap[tripNumberData.tripNumber]
+                    //             } else {
+                    //                 delete state.initialPlanData[serviceNumber].trainMap[tripNumberData.tripNumber];
+                    //             }
+                    //         }
+                    //     });
+                    // }
+                });
+            }
+            state.planLoadedCount++;
+            // const serviceObj = state.planData[serviceNumber];
+            // if (serviceObj) {
+            //     const oldIndex = serviceObj.oldIndex;
+            //     state.planData[serviceNumber] = { oldIndex, serviceNumber, trainMap: {} };
+            //     state.planLoadedCount++;
+            // }
+        },
         clear: (state) => {
             // state.stations = [];
             state.planData = {};
@@ -188,6 +267,10 @@ const runPlan = {
         addServiceNumber: ({ commit }, serviceNumber) => {
             commit('addServiceNumber', serviceNumber);
         },
+        /** 更新仿真里的运行图（西安三加线抽线逻辑） */
+        updateTrainRunplan: ({ commit }, updateServiceNumber) => {
+            commit('updateTrainRunplan', updateServiceNumber);
+        },
         /** 选择车次*/
         setSelected: ({ commit }, selected) => {
             commit('setSelected', selected);
diff --git a/src/store/modules/socket.js b/src/store/modules/socket.js
index 9b22616fa..1b6321e14 100644
--- a/src/store/modules/socket.js
+++ b/src/store/modules/socket.js
@@ -189,9 +189,13 @@ function handle(state, data) {
             store.dispatch('training/over');
         }
         break;
-    case 'Simulation_PslStatus': 
+    case 'Simulation_PslStatus':
         state.simulationPslStatus = msg;
         break;
+        // 运行图加线/抽线/变化推送消息
+    case 'Simulation_Trip_Plan_Change':
+        state.simulationPlanChange = msg;
+        break;
     }
 
 }
@@ -337,7 +341,8 @@ const socket = {
         deviceStateMessages: null, // 新版订阅设备状态消息
         simulationSpeed: 1, // 仿真倍速
         simulationPause: false,
-        simulationPslStatus: [],    //PSL面板按钮状态信息
+        simulationPslStatus: [], // PSL面板按钮状态信息
+        simulationPlanChange:{} // 运行图加线/抽线/变化推送消息
     },
     getters: {
     },
diff --git a/src/views/newMap/displayNew/demon/runPlanView.vue b/src/views/newMap/displayNew/demon/runPlanView.vue
index fda0188dc..6231b01d9 100644
--- a/src/views/newMap/displayNew/demon/runPlanView.vue
+++ b/src/views/newMap/displayNew/demon/runPlanView.vue
@@ -254,6 +254,7 @@ export default {
                 this.staticSeries = [];
                 const stations = this.$store.state.runPlan.stations;
                 const planData = this.$store.state.runPlan.planData;
+                debugger;
                 this.kmRangeMap = this.PlanParser.convertStationsToMap(stations);
                 if (this.$route.query.lineCode === '07') {
                     this.pushModels(this.staticSeries, [this.PlanParser.initializeAxisX(stations)]);
diff --git a/src/views/newMap/displayNew/menuSchema.vue b/src/views/newMap/displayNew/menuSchema.vue
index a2d4e9c69..1511b2ea9 100644
--- a/src/views/newMap/displayNew/menuSchema.vue
+++ b/src/views/newMap/displayNew/menuSchema.vue
@@ -142,9 +142,22 @@ export default {
                 this.swch = '01';
             }
         },
-        '$store.state.map.mapDataLoadedCount': function () {
+        // '$store.state.map.mapDataLoadedCount': function () {
+        //     this.loadRunData();
+        // },
+        '$store.state.training.subscribeCount': function () {
+            debugger;
             this.loadRunData();
         },
+        '$store.state.socket.simulationPlanChange': function (val) {
+            // debugger;
+            // 判断是否已经加载运行图，若加载只处理运行图数据，否则，缓存数据
+            if (JSON.stringify(this.$store.state.runPlan.planData) == '{}') {
+
+            } else {
+                this.$store.dispatch('runPlan/updateTrainRunplan', val);
+            }
+        },
         '$store.state.training.triggerFaultCount': function () {
             this.setFault();
         },
@@ -170,6 +183,7 @@ export default {
                     // 获取排序的车站列表
                     getByGroupStationList(this.group).then(response => {
                         this.$store.dispatch('runPlan/setStations', response.data).then(() => {
+                            debugger;
                             loadRunPlanData(this.group, this.dataError);
                         });
                     }).catch(() => {
diff --git a/src/views/newMap/mapsystemNew/index.vue b/src/views/newMap/mapsystemNew/index.vue
index 70f3d0a47..b2c899967 100644
--- a/src/views/newMap/mapsystemNew/index.vue
+++ b/src/views/newMap/mapsystemNew/index.vue
@@ -116,6 +116,7 @@ export default {
             });
         },
         async subscribe() {
+            debugger;
             this.clearSubscribe();
             const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
             creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);