openatc-components 0.1.7 → 0.1.9

package/package/kisscomps/components/SchemeConfig/tentativeplancontrolmodal/index.vue

@@ -1,1387 +1,1387 @@
-<template>
-  <div class="tentativeplan-control">
-    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.tentativeplan')}}</div>
-    <el-row>
-      <el-col :span="12">
-         <el-form
-           ref="manual"
-           label-position="left"
-           :model="manualInfo"
-           label-width="100px">
-           <el-form-item
-                :label="$t('openatccomponents.overview.patternid') + ':'"
-                prop="count">
-                <el-select @change="selectPattern()" v-model="manualInfo.tempPatternid" class="col-inner"  size="small" :placeholder="$t('openatccomponents.common.select')">
-                  <el-option
-                    v-for="item in patternSelect"
-                    :key="item.value"
-                    :value="item.desc">
-                  </el-option>
-                </el-select>
-               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
-            </el-form-item>
-            <el-form-item
-                :label="$t('openatccomponents.overview.delay') + ':'"
-                prop="intersection">
-                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempDelay" size="mini"></el-input-number>
-               <!-- <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
-            </el-form-item>
-           </el-form>
-      </el-col>
-      <el-col :span="12">
-         <el-form
-           ref="manual"
-           label-position="left"
-           :model="manualInfo"
-           label-width="100px">
-           <el-form-item
-                :label="$t('openatccomponents.overview.patternoffset') + ':'"
-                prop="count">
-                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.offset" size="mini"></el-input-number>
-               <!-- <el-input v-model="manualInfo.offset" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
-            </el-form-item>
-            <el-form-item
-                :label="$t('openatccomponents.overview.duration') + ':'"
-                prop="intersection">
-                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.duration" size="mini"></el-input-number>
-               <!-- <el-input v-model="manualInfo.duration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
-            </el-form-item>
-           </el-form>
-      </el-col>
-    </el-row>
-    <el-row>
-        <div class="title" style="margin-top:18px; margin-bottom:10px">{{$t('openatccomponents.overview.patternstate')}}:
-            <span>({{$t('openatccomponents.overview.cycle')}}: {{cycle}}  {{$t('openatccomponents.overview.patternoffset')}}: {{offset}})</span>
-        </div>
-        <stage-status
-        :patternStatusList="patternOne.length===0?planPattern.rings:patternOne[0].rings"
-        >
-        </stage-status>
-        <pattern-list
-        :patternList="patternOne.length===0?planPattern.rings:patternOne"
-        :patternStatusList="patternOne.length===0?planPattern.rings:patternOne[0].rings"
-        :cycles="patternOne.length===0?planPattern.cycle:patternOne[0].cycle"
-        :phaseList="phaseList">
-        </pattern-list>
-    </el-row>
-    <el-row>
-    <el-tabs v-model="activeList" type="card">
-        <el-tab-pane :label="$t('openatccomponents.pattern.ringConfig')" name="ring">
-            <!-- <el-row :gutter="20"> -->
-                <!-- <el-col :span="12" > -->
-                    <!-- <div class="components-container board" > -->
-                        <div style="width: 100%; overflow: hidden;margin-top: 20px;">
-                            <kan-ban v-for="n in ringCount"
-                            :key="n" class="closephasekanban"
-                            :index="n"
-                            :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
-                            :list="patternOne.length===0?planPattern.rings[n-1]:patternOne[0].rings[n-1]"
-                            :phaseList="phaseList"
-                            :header-text="$t('openatccomponents.pattern.ring')+n"
-                            @handleSplit="handleSplit">
-                            </kan-ban>
-                        </div>
-                <!-- </el-col> -->
-            <!-- </el-row> -->
-        </el-tab-pane>
-        <el-tab-pane :label="$t('openatccomponents.pattern.stageConfig')" name="kanban">
-            <el-scrollbar :vertical="true">
-                <div class="stage-panel-contener">
-                    <stage-board v-for="(stage,index) in patternOne.length===0?allPatternList[0].stagesList:patternOne[0].stagesList"
-                        class="closephasekanban"
-                        :key="index"
-                        :stage="stage"
-                        :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
-                        :stageInfo="patternOne.length===0?allPatternList[0].stagesList:patternOne[0].stagesList"
-                        :coordphaseOption="coordphaseOption"
-                        :subIndex="index"
-                        @onStageSplitChange="onStageSplitChange"
-                        @stageSplitChange="stageSplitChange"
-                        @onStageDelaystartChange="onStageDelaystartChange"
-                        @onStageAdvanceendChange="onStageAdvanceendChange"
-                        >
-                    </stage-board>
-                </div>
-            </el-scrollbar>
-        </el-tab-pane>
-            <el-tab-pane :label="$t('openatccomponents.pattern.parameters')" name="parame">
-                <el-row>
-                <!-- <el-col :span="12"> -->
-                    <expend-config
-                    v-for="(j,index) in ringCounts"
-                    :key="index"
-                    class="closephasekanban"
-                    :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
-                    :header-text="$t('openatccomponents.pattern.ring')+j"
-                    :list="patternOne.length===0?planPattern.rings[j-1]:patternOne[0].rings[j-1]"
-                    >
-                    </expend-config>
-                <!-- </el-col> -->
-                <!-- <el-col :span="12"> -->
-                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
-                        {{$t('openatccomponents.pattern.forbiddenstage')}}
-                        <el-input class="stage-value" size="small" v-model="forbiddenstage"></el-input>
-                    </div>
-                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
-                        {{$t('openatccomponents.pattern.screenstage')}}
-                        <el-input class="stage-value" size="small" v-model="screenstage"></el-input>
-                    </div>
-                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
-                        <!-- <el-col :span="8"> -->
-                        {{$t('openatccomponents.pattern.coordinatestage')}}
-                        <el-input class="stage-value" size="small" v-model="coordinatestage"></el-input>
-                        <!-- </el-col> -->
-                    </div>
-                <!-- </el-col> -->
-                </el-row>
-            </el-tab-pane>
-            <el-tab-pane :label="$t('openatccomponents.pattern.overLap')" name="overlap">
-                <el-row :gutter="20">
-                <el-col :span="24" >
-                    <over-lap
-                    :stageList="stagesList"
-                    :overlap="overlap"
-                    :checked="true"
-                    :tentative="true"
-                    :cycle="patternOne.length===0?planPattern.cycle:patternOne[0].cycle"
-                    >
-                    </over-lap>
-                </el-col>
-                </el-row>
-            </el-tab-pane>
-        </el-tabs>
-    </el-row>
-    <div class="footer">
-        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
-        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'tentativeplancontrol',
-  props: {
-    controlData: {
-      type: Object
-    },
-    phaseList: {
-      type: Array
-    },
-    overlap: {
-      type: Array
-    },
-    allPatternList: {
-      type: Array
-    },
-    patternSelect: {
-      type: Array
-    }
-  },
-  computed: {
-    rings () {
-      return this.patternOne.length === 0 ? this.planPattern.rings : this.patternOne[0].rings
-    },
-    cycle () {
-      return this.patternOne.length === 0 ? this.max : (this.patternOne.length > 0 && (this.patternOne[0].cycle < this.max)) ? this.max : this.patternOne[0].cycle
-    },
-    offset () {
-      return Number((this.patternOne.length === 0 || this.manualInfo.offset > 0) ? this.manualInfo.offset : this.patternOne[0].offset)
-    },
-    forbiddenstage () {
-      return this.patternOne.length === 0 ? this.allPatternList[0].forbiddenstage : this.patternOne[0].forbiddenstage
-    },
-    screenstage () {
-      return this.patternOne.length === 0 ? this.allPatternList[0].screenstage : this.patternOne[0].screenstage
-    },
-    coordinatestage () {
-      return this.patternOne.length === 0 ? this.allPatternList[0].coordinatestage : this.patternOne[0].coordinatestage
-    }
-  },
-  data () {
-    return {
-      stagesList: [],
-      phaseRings: [],
-      options: {
-        group: 'pattern'
-      },
-      // overlap: [
-      //   {
-      //     'id': 1,
-      //     'desc': '东方向南半测行人相位',
-      //     'includedphases': [
-      //       1,
-      //       8
-      //     ],
-      //     'peddirection': [
-      //       6
-      //     ]
-      //   },
-      //   {
-      //     'id': 2,
-      //     'desc': '东方向北半测行人相位',
-      //     'includedphases': [
-      //       1,
-      //       2
-      //     ],
-      //     'peddirection': [
-      //       5
-      //     ]
-      //   },
-      //   {
-      //     'id': 3,
-      //     'desc': '西方向南半测行人相位',
-      //     'includedphases': [
-      //       5,
-      //       6
-      //     ],
-      //     'peddirection': [
-      //       8
-      //     ]
-      //   },
-      //   {
-      //     'id': 4,
-      //     'desc': '西方向北半测行人相位',
-      //     'includedphases': [
-      //       4,
-      //       5
-      //     ],
-      //     'peddirection': [
-      //       7
-      //     ]
-      //   },
-      //   {
-      //     'id': 5,
-      //     'desc': '南方向东半测行人相位',
-      //     'includedphases': [
-      //       7,
-      //       8
-      //     ],
-      //     'peddirection': [
-      //       10
-      //     ]
-      //   },
-      //   {
-      //     'id': 6,
-      //     'desc': '南方向西半测行人相位',
-      //     'includedphases': [
-      //       6,
-      //       7
-      //     ],
-      //     'peddirection': [
-      //       9
-      //     ]
-      //   },
-      //   {
-      //     'id': 7,
-      //     'desc': '北方向东半测行人相位',
-      //     'includedphases': [
-      //       2,
-      //       3
-      //     ],
-      //     'peddirection': [
-      //       12
-      //     ]
-      //   },
-      //   {
-      //     'id': 8,
-      //     'desc': '北方向西半测行人相位',
-      //     'includedphases': [
-      //       3,
-      //       4
-      //     ],
-      //     'peddirection': [
-      //       11
-      //     ]
-      //   }
-      // ],
-      max: '',
-      patternCycleEqual: true,
-      activeList: 'ring',
-      ringCount: 1,
-      ringCounts: 1,
-      coordphaseOption: [],
-      patternOne: [],
-      planPattern: {},
-      // allPatternList: [
-      //   {
-      //     'id': 1,
-      //     'desc': '',
-      //     'offset': 10,
-      //     'cycle': 120,
-      //     'rings': [
-      //       [
-      //         {
-      //           'name': 'phase1',
-      //           'id': 1,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 13,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         },
-      //         {
-      //           'name': 'phase2',
-      //           'id': 2,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 10,
-      //               'color': '#454545'
-      //             },
-      //             {
-      //               'id': 12,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         },
-      //         {
-      //           'name': 'phase3',
-      //           'id': 3,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 1,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         },
-      //         {
-      //           'name': 'phase4',
-      //           'id': 4,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 6,
-      //               'color': '#454545'
-      //             },
-      //             {
-      //               'id': 8,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         }
-      //       ],
-      //       [
-      //         {
-      //           'name': 'phase5',
-      //           'id': 5,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 9,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         },
-      //         {
-      //           'name': 'phase6',
-      //           'id': 6,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 14,
-      //               'color': '#454545'
-      //             },
-      //             {
-      //               'id': 16,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         },
-      //         {
-      //           'name': 'phase7',
-      //           'id': 7,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 5,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         },
-      //         {
-      //           'name': 'phase8',
-      //           'id': 8,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [],
-      //           'minSplit': 20,
-      //           'desc': [
-      //             {
-      //               'id': 2,
-      //               'color': '#454545'
-      //             },
-      //             {
-      //               'id': 4,
-      //               'color': '#454545'
-      //             }
-      //           ]
-      //         }
-      //       ],
-      //       [],
-      //       []
-      //     ],
-      //     'barriers': [
-      //       {
-      //         'barrier': 1,
-      //         'length': 60,
-      //         'items': [
-      //           {
-      //             'ring': 2,
-      //             'data': [
-      //               5,
-      //               6
-      //             ]
-      //           },
-      //           {
-      //             'ring': 1,
-      //             'data': [
-      //               1,
-      //               2
-      //             ]
-      //           }
-      //         ]
-      //       },
-      //       {
-      //         'barrier': 2,
-      //         'length': 60,
-      //         'items': [
-      //           {
-      //             'ring': 2,
-      //             'data': [
-      //               7,
-      //               8
-      //             ]
-      //           },
-      //           {
-      //             'ring': 1,
-      //             'data': [
-      //               3,
-      //               4
-      //             ]
-      //           }
-      //         ]
-      //       }
-      //     ],
-      //     'stagesList': [
-      //       {
-      //         'split': 30,
-      //         'stages': [
-      //           1,
-      //           5
-      //         ]
-      //       },
-      //       {
-      //         'split': 30,
-      //         'stages': [
-      //           2,
-      //           6
-      //         ]
-      //       },
-      //       {
-      //         'split': 30,
-      //         'stages': [
-      //           3,
-      //           7
-      //         ]
-      //       },
-      //       {
-      //         'split': 30,
-      //         'stages': [
-      //           4,
-      //           8
-      //         ]
-      //       }
-      //     ],
-      //     'stages': [
-      //       [
-      //         1,
-      //         5
-      //       ],
-      //       [
-      //         2,
-      //         6
-      //       ],
-      //       [
-      //         3,
-      //         7
-      //       ],
-      //       [
-      //         4,
-      //         8
-      //       ]
-      //     ]
-      //   },
-      //   {
-      //     'id': 2,
-      //     'desc': '方案2',
-      //     'offset': 0,
-      //     'cycle': 110,
-      //     'rings': [
-      //       [
-      //         {
-      //           'name': 'phase1',
-      //           'id': 1,
-      //           'value': 20,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'phase2',
-      //           'id': 2,
-      //           'value': 35,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'phase3',
-      //           'id': 3,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'phase4',
-      //           'id': 4,
-      //           'value': 25,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         }
-      //       ],
-      //       [
-      //         {
-      //           'name': 'Phase 5',
-      //           'id': 5,
-      //           'value': 27,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'Phase 6',
-      //           'id': 6,
-      //           'value': 28,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'Phase 7',
-      //           'id': 7,
-      //           'value': 35,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'Phase 8',
-      //           'id': 8,
-      //           'value': 20,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         }
-      //       ],
-      //       [],
-      //       []
-      //     ],
-      //     'stagesList': [
-      //       {
-      //         'split': 20,
-      //         'stages': [
-      //           1,
-      //           5
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 7,
-      //         'stages': [
-      //           2,
-      //           5
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 28,
-      //         'stages': [
-      //           2,
-      //           6
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 30,
-      //         'stages': [
-      //           3,
-      //           7
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 5,
-      //         'stages': [
-      //           4,
-      //           7
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 20,
-      //         'stages': [
-      //           4,
-      //           8
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       }
-      //     ],
-      //     'stages': [
-      //       [
-      //         1,
-      //         5
-      //       ],
-      //       [
-      //         2,
-      //         5
-      //       ],
-      //       [
-      //         2,
-      //         6
-      //       ],
-      //       [
-      //         3,
-      //         7
-      //       ],
-      //       [
-      //         4,
-      //         7
-      //       ],
-      //       [
-      //         4,
-      //         8
-      //       ]
-      //     ],
-      //     'barriers': [
-      //       {
-      //         'barrier': 1,
-      //         'length': 55,
-      //         'items': [
-      //           {
-      //             'ring': 2,
-      //             'data': [
-      //               5,
-      //               6
-      //             ]
-      //           },
-      //           {
-      //             'ring': 1,
-      //             'data': [
-      //               1,
-      //               2
-      //             ]
-      //           }
-      //         ]
-      //       },
-      //       {
-      //         'barrier': 2,
-      //         'length': 55,
-      //         'items': [
-      //           {
-      //             'ring': 2,
-      //             'data': [
-      //               7,
-      //               8
-      //             ]
-      //           },
-      //           {
-      //             'ring': 1,
-      //             'data': [
-      //               3,
-      //               4
-      //             ]
-      //           }
-      //         ]
-      //       }
-      //     ]
-      //   },
-      //   {
-      //     'id': 3,
-      //     'desc': '方案3',
-      //     'offset': 0,
-      //     'cycle': 120,
-      //     'rings': [
-      //       [
-      //         {
-      //           'name': 'phase1',
-      //           'id': 1,
-      //           'value': 40,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'phase2',
-      //           'id': 2,
-      //           'value': 20,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'phase3',
-      //           'id': 3,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'phase4',
-      //           'id': 4,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         }
-      //       ],
-      //       [
-      //         {
-      //           'name': 'Phase 5',
-      //           'id': 5,
-      //           'value': 20,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'Phase 6',
-      //           'id': 6,
-      //           'value': 40,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'Phase 7',
-      //           'id': 7,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         },
-      //         {
-      //           'name': 'Phase 8',
-      //           'id': 8,
-      //           'value': 30,
-      //           'mode': 2,
-      //           'options': [
-      //             0,
-      //             0,
-      //             0
-      //           ],
-      //           'minSplit': 13,
-      //           'delaystart': 0,
-      //           'advanceend': 0
-      //         }
-      //       ],
-      //       [],
-      //       []
-      //     ],
-      //     'stagesList': [
-      //       {
-      //         'split': 20,
-      //         'stages': [
-      //           1,
-      //           5
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 20,
-      //         'stages': [
-      //           1,
-      //           6
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 20,
-      //         'stages': [
-      //           2,
-      //           6
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 30,
-      //         'stages': [
-      //           3,
-      //           7
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       },
-      //       {
-      //         'split': 30,
-      //         'stages': [
-      //           4,
-      //           8
-      //         ],
-      //         'delaystart': 0,
-      //         'advanceend': 0
-      //       }
-      //     ],
-      //     'stages': [
-      //       [
-      //         1,
-      //         5
-      //       ],
-      //       [
-      //         1,
-      //         6
-      //       ],
-      //       [
-      //         2,
-      //         6
-      //       ],
-      //       [
-      //         3,
-      //         7
-      //       ],
-      //       [
-      //         4,
-      //         8
-      //       ]
-      //     ],
-      //     'barriers': [
-      //       {
-      //         'barrier': 1,
-      //         'length': 60,
-      //         'items': [
-      //           {
-      //             'ring': 2,
-      //             'data': [
-      //               5,
-      //               6
-      //             ]
-      //           },
-      //           {
-      //             'ring': 1,
-      //             'data': [
-      //               1,
-      //               2
-      //             ]
-      //           }
-      //         ]
-      //       },
-      //       {
-      //         'barrier': 2,
-      //         'length': 60,
-      //         'items': [
-      //           {
-      //             'ring': 2,
-      //             'data': [
-      //               7,
-      //               8
-      //             ]
-      //           },
-      //           {
-      //             'ring': 1,
-      //             'data': [
-      //               3,
-      //               4
-      //             ]
-      //           }
-      //         ]
-      //       }
-      //     ]
-      //   }
-      // ],
-      manualInfo: {
-        tempPatternid: '',
-        offset: 0,
-        duration: 300,
-        tempDelay: 0 // 控制方式手动操作的情况下的延迟时间的临时值。
-        // tempDuration: 300 // 控制方式手动操作的情况下的持续时间的临时值。
-      }
-    }
-  },
-  created () {
-    this.patternPlan()
-    this.getCycle()
-    if (this.patternOne.length === 0) {
-      this.handleStageData(this.planPattern.rings)
-    }
-    this.initData()
-  },
-  methods: {
-    patternPlan () {
-      let Pattern = {
-        offset: 0,
-        cycle: 0,
-        rings: [[], [], [], []]
-      }
-      var newPattern = JSON.parse(JSON.stringify(Pattern))
-      for (let phase of this.phaseList) {
-        let ring = {}
-        ring.name = 'Phase ' + phase.id
-        ring.desc = this.getPhaseDescription(phase.direction)
-        ring.id = phase.id
-        ring.value = 30
-        ring.mode = 2
-        ring.options = []
-        ring.delaystart = 0
-        ring.advanceend = 0
-        if (phase.ring === 1) {
-          newPattern.rings[0].push(ring)
-        } else if (phase.ring === 2) {
-          newPattern.rings[1].push(ring)
-        } else if (phase.ring === 3) {
-          newPattern.rings[2].push(ring)
-        } else if (phase.ring === 4) {
-          newPattern.rings[3].push(ring)
-        }
-      }
-      this.planPattern = newPattern
-    },
-    getCycle () {
-      for (let rings of this.planPattern.rings) {
-        let num = 0
-        for (let i = 0; i < rings.length; i++) {
-          if (rings[i].length !== 0) {
-            if (rings[i].mode === 7) { // 忽略相位不计周期
-              continue
-            }
-            num = num + Number(rings[i].value)
-          }
-        }
-        if (num !== 0) {
-          this.planPattern.cycle = num
-          break
-        }
-      }
-    },
-    getPhaseDescription (phaseList) {
-      if (!phaseList) return
-      let list = []
-      for (let id of phaseList) {
-        let obj = {}
-        obj.id = id
-        obj.color = '#454545'
-        list.push(obj)
-      }
-      return list
-    },
-    handleClose () {
-      this.$emit('closePhaseBack')
-    },
-    onStageSplitChange (diff, rowIndex, subIndex) {
-      let stageArr = this.stagesList[subIndex].stages
-      let row = this.patternList[rowIndex]
-      let ringsList = row.rings
-      for (let rings of ringsList) {
-        for (let ring of rings) {
-          if (stageArr.includes(ring.id)) {
-            ring.value = (ring.value ? ring.value : 0) + diff
-            continue
-          }
-        }
-      }
-    },
-    stageSplitChange (diff, rowIndex, subIndex) {
-      let row = this.patternList[rowIndex]
-      let ringsList = row.stagesList
-      for (let rings of ringsList) {
-        if (subIndex === rings.key) {
-          rings.stageSplit = (rings.green ? rings.green : 0) + (rings.yellow ? rings.yellow : 0) + (rings.red ? rings.red : 0)
-          continue
-        }
-      }
-    },
-    onStageDelaystartChange (diff, rowIndex, subIndex) {
-      let stageArr = this.stagesList[subIndex].stages
-      let row = this.patternList[rowIndex]
-      let ringsList = row.rings
-      for (let rings of ringsList) {
-        for (let ring of rings) {
-          if (stageArr.includes(ring.id)) {
-            ring.delaystart = (ring.delaystart ? ring.delaystart : 0) + diff
-            continue
-          }
-        }
-      }
-    },
-    onStageAdvanceendChange (diff, rowIndex, subIndex) {
-      let stageArr = this.stagesList[subIndex].stages
-      let row = this.patternList[rowIndex]
-      let ringsList = row.rings
-      for (let rings of ringsList) {
-        for (let ring of rings) {
-          if (stageArr.includes(ring.id)) {
-            ring.advanceend = (ring.advanceend ? ring.advanceend : 0) + diff
-            continue
-          }
-        }
-      }
-    },
-    handleSplit (index) {
-      if (this.patternOne.length > 0) {
-        let currPattern = this.patternOne[0].rings
-        setTimeout(() => {
-          this.handleStageData(currPattern)
-        }, 50)
-      } else {
-        let currPattern = this.planPattern.rings
-        setTimeout(() => {
-          this.handleStageData(currPattern)
-        }, 50)
-      }
-    },
-    selectPattern () {
-      this.manualInfo.offset = 0
-      let selectId = isNaN(parseInt(this.manualInfo.tempPatternid)) ? Number(this.manualInfo.tempPatternid.replace(/[^0-9]/ig, '')) : this.manualInfo.tempPatternid
-      this.patternOne = this.allPatternList.filter(item => {
-        return item.id === selectId
-      })
-      this.manualInfo.offset = this.offset
-      for (let rings of this.patternOne[0].rings) {
-        if (rings.length === 0) continue
-        for (let ring of rings) {
-          if (ring.value === 0) continue
-          let currPhase = this.phaseList.filter((item) => {
-            return item.id === ring.id
-          })[0]
-          ring.desc = currPhase.direction.map(item => {
-            return {
-              id: item,
-              color: '#454545'
-            }
-          })
-        }
-      }
-      this.handleStageData(this.patternOne[0].rings)
-    },
-    handleStageData (rings) { // stagesList
-      for (let i = 0; i < rings.length; i++) {
-        if (rings[i].length > 0) {
-          let phaseList = []
-          let stagesList = []
-          // rings = JSON.parse(JSON.stringify(rings))
-          let mapAdd = rings.map(item => {
-            return item.map(val => {
-              return val.value + (val.sum ? val.sum : 0)
-            })
-          })
-          let maxCycle = mapAdd.length > 0 ? mapAdd.map(item => {
-            return item.length > 0 ? item.reduce((a, b) => {
-              return a + b
-            }) : 0
-          }) : 0
-          this.max = Math.max(...maxCycle)// 每个环的周期最大值
-          this.stateList = [0]
-          this.narr = []
-          let currentIds = ''
-          let lastCurrentIds = ''
-          for (let j = 0; j <= this.max; j++) { // 指针长度
-            for (let i = 0; i < rings.length; i++) { // 环列表
-              let ring = rings[i]// 每个环对象
-              let sum = 0
-              for (let n = 0; n < ring.length; n++) { // 相位累计长度
-                if (ring[n].mode !== 7) {
-                  sum = sum + ring[n].value + (ring[n].sum ? ring[n].sum : 0)
-                  if (j < sum) {
-                    let phaseId = ring[n].id
-                    currentIds = currentIds + '-' + phaseId
-                    break
-                  }
-                }
-              }
-            }
-            if (lastCurrentIds !== currentIds && lastCurrentIds !== '') { // 当前相位id和上一个相比不同说明相位变化了
-              phaseList.push(lastCurrentIds)
-              this.stateList.push(j)// 阶段累计长度的集合
-            }
-            lastCurrentIds = currentIds
-            currentIds = ''
-          }
-          let newPhaselist = []
-          phaseList.forEach(i => {
-            let rangeArr = i.split('-').map(Number)
-            if (rangeArr.length > 2) {
-              newPhaselist.push([
-                JSON.parse(JSON.stringify(rangeArr[1])),
-                JSON.parse(JSON.stringify(rangeArr[2]))
-              ])
-            } else {
-              newPhaselist.push([
-                JSON.parse(JSON.stringify(rangeArr[1]))
-              ])
-            }
-          })
-          for (let i = this.stateList.length - 1; i >= 1; i--) {
-            this.narr.push(this.stateList[i] - this.stateList[i - 1])
-          }
-          // newPhaselist
-          this.narr.reverse()// 阶段差
-          for (let i = 0; i < newPhaselist.length; i++) {
-            let stage = JSON.parse(JSON.stringify(newPhaselist[i]))
-            let stageItem = this.getStageItem(stage, rings, i)
-            stagesList.push(JSON.parse(JSON.stringify(stageItem)))
-          }
-          this.stagesList = JSON.parse(JSON.stringify(stagesList))
-        }
-      }
-    },
-    getStageItem (stageArr, ringsList, i) {
-      let res = {
-        key: i,
-        split: this.narr[i], // 阶段绿性比
-        stages: stageArr,
-        delaystart: 0,
-        advanceend: 0
-      }
-      // let splitArr = []
-      let delaystartArr = []
-      let advanceendArr = []
-      for (let rings of ringsList) {
-        for (let ring of rings) {
-          if (stageArr.includes(ring.id)) {
-            // let split = ring.value
-            let delaystart = ring.delaystart
-            let advanceend = ring.advanceend
-            // splitArr.push(split)
-            delaystartArr.push(delaystart)
-            advanceendArr.push(advanceend)
-          }
-        }
-      }
-      // splitArr.sort(function (a, b) { return a - b })
-      delaystartArr.sort(function (a, b) { return b - a })
-      advanceendArr.sort(function (a, b) { return a - b })
-      // res.split = splitArr.length > 0 ? splitArr[0] : 0
-      res.delaystart = delaystartArr.length > 0 ? delaystartArr[0] : 0
-      res.advanceend = advanceendArr.length > 0 ? advanceendArr[0] : 0
-      return res
-    },
-    initData () {
-      // 判断有几个环，就创建几个看板
-      //   let phaseList = this.globalParamModel.getParamsByType('phaseList')
-      this.coordphaseOption = this.phaseList.map(ele => {
-        return {
-          value: ele.id
-        }
-      })
-      //   this.overlap = this.globalParamModel.getParamsByType('overlaplList')
-      //   this.agentId = getIframdevid()
-      let rings = []
-      if (this.phaseList.length === 0) {
-        // this.$store.getters.tscParam.patternList = []
-        return
-      }
-      for (let phase of this.phaseList) {
-        rings.push(phase.ring)
-      }
-      this.ringCount = Array.from(new Set(rings)) // 去除数组重复的元素
-      this.ringCount = this.ringCount.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
-      this.ringCounts = Array.from(new Set(rings)) // 去除数组重复的元素
-      this.ringCounts = this.ringCounts.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
-    //   this.increaseId()
-    //   this.getCycle()
-    //   this.updatePhaseDescription()
-    //   this.getOptionsOfRing()
-    },
-    sortNumbers (a, b) {
-      return a - b
-    },
-    isRingCycleEqual (rings) {
-      let isequal = true
-      // this.patternmsg = []
-      let maxCycle = 0
-      for (let ring of rings) {
-        if (ring.length === 0) continue
-        let cycle = 0
-        for (let r of ring) {
-          if (r.mode === 7) { // 忽略相位不计周期
-            continue
-          }
-          cycle = cycle + r.value
-        }
-        if (cycle > maxCycle && maxCycle === 0) {
-          maxCycle = cycle
-        }
-        if (cycle !== maxCycle) {
-          // this.patternmsg.push(rings.id)
-          isequal = false
-        }
-      }
-      return isequal
-    },
-    checkPatternRules (rings) {
-      if (!this.isRingCycleEqual(rings)) {
-        this.patternCycleEqual = false
-      } else {
-        this.patternCycleEqual = true
-      }
-      if (!this.patternCycleEqual) {
-        let mess = `方案中存在环周期时长不一致`
-        if (this.$i18n.locale === 'en') {
-          mess = `Inconsistent loop cycle durations exist in the scheme`
-        }
-        this.$message({
-          message: mess,
-          type: 'error',
-          dangerouslyUseHTMLString: true
-        })
-        return false
-      }
-    },
-    handleManualControl () {
-      let submitdata = {
-        control: 100,
-        delay: this.manualInfo.tempDelay !== undefined ? Number(this.manualInfo.tempDelay) : 0,
-        duration: Number(this.manualInfo.duration),
-        // duration: this.manualInfo.tempDuration !== undefined ? Number(this.manualInfo.tempDuration) : 0,
-        data: {}
-      }
-      submitdata.data.offset = this.offset
-      submitdata.data.cycle = this.cycle
-      submitdata.data.rings = this.rings
-      this.checkPatternRules(submitdata.data.rings)
-      if (this.patternCycleEqual) {
-        this.$emit('closePhaseControl', submitdata)
-      }
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>
+<template>
+  <div class="tentativeplan-control">
+    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.tentativeplan')}}</div>
+    <el-row>
+      <el-col :span="12">
+         <el-form
+           ref="manual"
+           label-position="left"
+           :model="manualInfo"
+           label-width="100px">
+           <el-form-item
+                :label="$t('openatccomponents.overview.patternid') + ':'"
+                prop="count">
+                <el-select @change="selectPattern()" v-model="manualInfo.tempPatternid" class="col-inner"  size="small" :placeholder="$t('openatccomponents.common.select')">
+                  <el-option
+                    v-for="item in patternSelect"
+                    :key="item.value"
+                    :value="item.desc">
+                  </el-option>
+                </el-select>
+               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+            <el-form-item
+                :label="$t('openatccomponents.overview.delay') + ':'"
+                prop="intersection">
+                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempDelay" size="mini"></el-input-number>
+               <!-- <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+           </el-form>
+      </el-col>
+      <el-col :span="12">
+         <el-form
+           ref="manual"
+           label-position="left"
+           :model="manualInfo"
+           label-width="100px">
+           <el-form-item
+                :label="$t('openatccomponents.overview.patternoffset') + ':'"
+                prop="count">
+                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.offset" size="mini"></el-input-number>
+               <!-- <el-input v-model="manualInfo.offset" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+            <el-form-item
+                :label="$t('openatccomponents.overview.duration') + ':'"
+                prop="intersection">
+                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.duration" size="mini"></el-input-number>
+               <!-- <el-input v-model="manualInfo.duration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+           </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+        <div class="title" style="margin-top:18px; margin-bottom:10px">{{$t('openatccomponents.overview.patternstate')}}:
+            <span>({{$t('openatccomponents.overview.cycle')}}: {{cycle}}  {{$t('openatccomponents.overview.patternoffset')}}: {{offset}})</span>
+        </div>
+        <stage-status
+        :patternStatusList="patternOne.length===0?planPattern.rings:patternOne[0].rings"
+        >
+        </stage-status>
+        <pattern-list
+        :patternList="patternOne.length===0?planPattern.rings:patternOne"
+        :patternStatusList="patternOne.length===0?planPattern.rings:patternOne[0].rings"
+        :cycles="patternOne.length===0?planPattern.cycle:patternOne[0].cycle"
+        :phaseList="phaseList">
+        </pattern-list>
+    </el-row>
+    <el-row>
+    <el-tabs v-model="activeList" type="card">
+        <el-tab-pane :label="$t('openatccomponents.pattern.ringConfig')" name="ring">
+            <!-- <el-row :gutter="20"> -->
+                <!-- <el-col :span="12" > -->
+                    <!-- <div class="components-container board" > -->
+                        <div style="width: 100%; overflow: hidden;margin-top: 20px;">
+                            <kan-ban v-for="n in ringCount"
+                            :key="n" class="closephasekanban"
+                            :index="n"
+                            :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
+                            :list="patternOne.length===0?planPattern.rings[n-1]:patternOne[0].rings[n-1]"
+                            :phaseList="phaseList"
+                            :header-text="$t('openatccomponents.pattern.ring')+n"
+                            @handleSplit="handleSplit">
+                            </kan-ban>
+                        </div>
+                <!-- </el-col> -->
+            <!-- </el-row> -->
+        </el-tab-pane>
+        <el-tab-pane :label="$t('openatccomponents.pattern.stageConfig')" name="kanban">
+            <el-scrollbar :vertical="true">
+                <div class="stage-panel-contener">
+                    <stage-board v-for="(stage,index) in patternOne.length===0?allPatternList[0].stagesList:patternOne[0].stagesList"
+                        class="closephasekanban"
+                        :key="index"
+                        :stage="stage"
+                        :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
+                        :stageInfo="patternOne.length===0?allPatternList[0].stagesList:patternOne[0].stagesList"
+                        :coordphaseOption="coordphaseOption"
+                        :subIndex="index"
+                        @onStageSplitChange="onStageSplitChange"
+                        @stageSplitChange="stageSplitChange"
+                        @onStageDelaystartChange="onStageDelaystartChange"
+                        @onStageAdvanceendChange="onStageAdvanceendChange"
+                        >
+                    </stage-board>
+                </div>
+            </el-scrollbar>
+        </el-tab-pane>
+            <el-tab-pane :label="$t('openatccomponents.pattern.parameters')" name="parame">
+                <el-row>
+                <!-- <el-col :span="12"> -->
+                    <expend-config
+                    v-for="(j,index) in ringCounts"
+                    :key="index"
+                    class="closephasekanban"
+                    :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
+                    :header-text="$t('openatccomponents.pattern.ring')+j"
+                    :list="patternOne.length===0?planPattern.rings[j-1]:patternOne[0].rings[j-1]"
+                    >
+                    </expend-config>
+                <!-- </el-col> -->
+                <!-- <el-col :span="12"> -->
+                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
+                        {{$t('openatccomponents.pattern.forbiddenstage')}}
+                        <el-input class="stage-value" size="small" v-model="forbiddenstage"></el-input>
+                    </div>
+                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
+                        {{$t('openatccomponents.pattern.screenstage')}}
+                        <el-input class="stage-value" size="small" v-model="screenstage"></el-input>
+                    </div>
+                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
+                        <!-- <el-col :span="8"> -->
+                        {{$t('openatccomponents.pattern.coordinatestage')}}
+                        <el-input class="stage-value" size="small" v-model="coordinatestage"></el-input>
+                        <!-- </el-col> -->
+                    </div>
+                <!-- </el-col> -->
+                </el-row>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('openatccomponents.pattern.overLap')" name="overlap">
+                <el-row :gutter="20">
+                <el-col :span="24" >
+                    <over-lap
+                    :stageList="stagesList"
+                    :overlap="overlap"
+                    :checked="true"
+                    :tentative="true"
+                    :cycle="patternOne.length===0?planPattern.cycle:patternOne[0].cycle"
+                    >
+                    </over-lap>
+                </el-col>
+                </el-row>
+            </el-tab-pane>
+        </el-tabs>
+    </el-row>
+    <div class="footer">
+        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tentativeplancontrol',
+  props: {
+    controlData: {
+      type: Object
+    },
+    phaseList: {
+      type: Array
+    },
+    overlap: {
+      type: Array
+    },
+    allPatternList: {
+      type: Array
+    },
+    patternSelect: {
+      type: Array
+    }
+  },
+  computed: {
+    rings () {
+      return this.patternOne.length === 0 ? this.planPattern.rings : this.patternOne[0].rings
+    },
+    cycle () {
+      return this.patternOne.length === 0 ? this.max : (this.patternOne.length > 0 && (this.patternOne[0].cycle < this.max)) ? this.max : this.patternOne[0].cycle
+    },
+    offset () {
+      return Number((this.patternOne.length === 0 || this.manualInfo.offset > 0) ? this.manualInfo.offset : this.patternOne[0].offset)
+    },
+    forbiddenstage () {
+      return this.patternOne.length === 0 ? this.allPatternList[0].forbiddenstage : this.patternOne[0].forbiddenstage
+    },
+    screenstage () {
+      return this.patternOne.length === 0 ? this.allPatternList[0].screenstage : this.patternOne[0].screenstage
+    },
+    coordinatestage () {
+      return this.patternOne.length === 0 ? this.allPatternList[0].coordinatestage : this.patternOne[0].coordinatestage
+    }
+  },
+  data () {
+    return {
+      stagesList: [],
+      phaseRings: [],
+      options: {
+        group: 'pattern'
+      },
+      // overlap: [
+      //   {
+      //     'id': 1,
+      //     'desc': '东方向南半测行人相位',
+      //     'includedphases': [
+      //       1,
+      //       8
+      //     ],
+      //     'peddirection': [
+      //       6
+      //     ]
+      //   },
+      //   {
+      //     'id': 2,
+      //     'desc': '东方向北半测行人相位',
+      //     'includedphases': [
+      //       1,
+      //       2
+      //     ],
+      //     'peddirection': [
+      //       5
+      //     ]
+      //   },
+      //   {
+      //     'id': 3,
+      //     'desc': '西方向南半测行人相位',
+      //     'includedphases': [
+      //       5,
+      //       6
+      //     ],
+      //     'peddirection': [
+      //       8
+      //     ]
+      //   },
+      //   {
+      //     'id': 4,
+      //     'desc': '西方向北半测行人相位',
+      //     'includedphases': [
+      //       4,
+      //       5
+      //     ],
+      //     'peddirection': [
+      //       7
+      //     ]
+      //   },
+      //   {
+      //     'id': 5,
+      //     'desc': '南方向东半测行人相位',
+      //     'includedphases': [
+      //       7,
+      //       8
+      //     ],
+      //     'peddirection': [
+      //       10
+      //     ]
+      //   },
+      //   {
+      //     'id': 6,
+      //     'desc': '南方向西半测行人相位',
+      //     'includedphases': [
+      //       6,
+      //       7
+      //     ],
+      //     'peddirection': [
+      //       9
+      //     ]
+      //   },
+      //   {
+      //     'id': 7,
+      //     'desc': '北方向东半测行人相位',
+      //     'includedphases': [
+      //       2,
+      //       3
+      //     ],
+      //     'peddirection': [
+      //       12
+      //     ]
+      //   },
+      //   {
+      //     'id': 8,
+      //     'desc': '北方向西半测行人相位',
+      //     'includedphases': [
+      //       3,
+      //       4
+      //     ],
+      //     'peddirection': [
+      //       11
+      //     ]
+      //   }
+      // ],
+      max: '',
+      patternCycleEqual: true,
+      activeList: 'ring',
+      ringCount: 1,
+      ringCounts: 1,
+      coordphaseOption: [],
+      patternOne: [],
+      planPattern: {},
+      // allPatternList: [
+      //   {
+      //     'id': 1,
+      //     'desc': '',
+      //     'offset': 10,
+      //     'cycle': 120,
+      //     'rings': [
+      //       [
+      //         {
+      //           'name': 'phase1',
+      //           'id': 1,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 13,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         },
+      //         {
+      //           'name': 'phase2',
+      //           'id': 2,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 10,
+      //               'color': '#454545'
+      //             },
+      //             {
+      //               'id': 12,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         },
+      //         {
+      //           'name': 'phase3',
+      //           'id': 3,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 1,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         },
+      //         {
+      //           'name': 'phase4',
+      //           'id': 4,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 6,
+      //               'color': '#454545'
+      //             },
+      //             {
+      //               'id': 8,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         }
+      //       ],
+      //       [
+      //         {
+      //           'name': 'phase5',
+      //           'id': 5,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 9,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         },
+      //         {
+      //           'name': 'phase6',
+      //           'id': 6,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 14,
+      //               'color': '#454545'
+      //             },
+      //             {
+      //               'id': 16,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         },
+      //         {
+      //           'name': 'phase7',
+      //           'id': 7,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 5,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         },
+      //         {
+      //           'name': 'phase8',
+      //           'id': 8,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [],
+      //           'minSplit': 20,
+      //           'desc': [
+      //             {
+      //               'id': 2,
+      //               'color': '#454545'
+      //             },
+      //             {
+      //               'id': 4,
+      //               'color': '#454545'
+      //             }
+      //           ]
+      //         }
+      //       ],
+      //       [],
+      //       []
+      //     ],
+      //     'barriers': [
+      //       {
+      //         'barrier': 1,
+      //         'length': 60,
+      //         'items': [
+      //           {
+      //             'ring': 2,
+      //             'data': [
+      //               5,
+      //               6
+      //             ]
+      //           },
+      //           {
+      //             'ring': 1,
+      //             'data': [
+      //               1,
+      //               2
+      //             ]
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         'barrier': 2,
+      //         'length': 60,
+      //         'items': [
+      //           {
+      //             'ring': 2,
+      //             'data': [
+      //               7,
+      //               8
+      //             ]
+      //           },
+      //           {
+      //             'ring': 1,
+      //             'data': [
+      //               3,
+      //               4
+      //             ]
+      //           }
+      //         ]
+      //       }
+      //     ],
+      //     'stagesList': [
+      //       {
+      //         'split': 30,
+      //         'stages': [
+      //           1,
+      //           5
+      //         ]
+      //       },
+      //       {
+      //         'split': 30,
+      //         'stages': [
+      //           2,
+      //           6
+      //         ]
+      //       },
+      //       {
+      //         'split': 30,
+      //         'stages': [
+      //           3,
+      //           7
+      //         ]
+      //       },
+      //       {
+      //         'split': 30,
+      //         'stages': [
+      //           4,
+      //           8
+      //         ]
+      //       }
+      //     ],
+      //     'stages': [
+      //       [
+      //         1,
+      //         5
+      //       ],
+      //       [
+      //         2,
+      //         6
+      //       ],
+      //       [
+      //         3,
+      //         7
+      //       ],
+      //       [
+      //         4,
+      //         8
+      //       ]
+      //     ]
+      //   },
+      //   {
+      //     'id': 2,
+      //     'desc': '方案2',
+      //     'offset': 0,
+      //     'cycle': 110,
+      //     'rings': [
+      //       [
+      //         {
+      //           'name': 'phase1',
+      //           'id': 1,
+      //           'value': 20,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'phase2',
+      //           'id': 2,
+      //           'value': 35,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'phase3',
+      //           'id': 3,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'phase4',
+      //           'id': 4,
+      //           'value': 25,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         }
+      //       ],
+      //       [
+      //         {
+      //           'name': 'Phase 5',
+      //           'id': 5,
+      //           'value': 27,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'Phase 6',
+      //           'id': 6,
+      //           'value': 28,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'Phase 7',
+      //           'id': 7,
+      //           'value': 35,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'Phase 8',
+      //           'id': 8,
+      //           'value': 20,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         }
+      //       ],
+      //       [],
+      //       []
+      //     ],
+      //     'stagesList': [
+      //       {
+      //         'split': 20,
+      //         'stages': [
+      //           1,
+      //           5
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 7,
+      //         'stages': [
+      //           2,
+      //           5
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 28,
+      //         'stages': [
+      //           2,
+      //           6
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 30,
+      //         'stages': [
+      //           3,
+      //           7
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 5,
+      //         'stages': [
+      //           4,
+      //           7
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 20,
+      //         'stages': [
+      //           4,
+      //           8
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       }
+      //     ],
+      //     'stages': [
+      //       [
+      //         1,
+      //         5
+      //       ],
+      //       [
+      //         2,
+      //         5
+      //       ],
+      //       [
+      //         2,
+      //         6
+      //       ],
+      //       [
+      //         3,
+      //         7
+      //       ],
+      //       [
+      //         4,
+      //         7
+      //       ],
+      //       [
+      //         4,
+      //         8
+      //       ]
+      //     ],
+      //     'barriers': [
+      //       {
+      //         'barrier': 1,
+      //         'length': 55,
+      //         'items': [
+      //           {
+      //             'ring': 2,
+      //             'data': [
+      //               5,
+      //               6
+      //             ]
+      //           },
+      //           {
+      //             'ring': 1,
+      //             'data': [
+      //               1,
+      //               2
+      //             ]
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         'barrier': 2,
+      //         'length': 55,
+      //         'items': [
+      //           {
+      //             'ring': 2,
+      //             'data': [
+      //               7,
+      //               8
+      //             ]
+      //           },
+      //           {
+      //             'ring': 1,
+      //             'data': [
+      //               3,
+      //               4
+      //             ]
+      //           }
+      //         ]
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     'id': 3,
+      //     'desc': '方案3',
+      //     'offset': 0,
+      //     'cycle': 120,
+      //     'rings': [
+      //       [
+      //         {
+      //           'name': 'phase1',
+      //           'id': 1,
+      //           'value': 40,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'phase2',
+      //           'id': 2,
+      //           'value': 20,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'phase3',
+      //           'id': 3,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'phase4',
+      //           'id': 4,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         }
+      //       ],
+      //       [
+      //         {
+      //           'name': 'Phase 5',
+      //           'id': 5,
+      //           'value': 20,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'Phase 6',
+      //           'id': 6,
+      //           'value': 40,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'Phase 7',
+      //           'id': 7,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         },
+      //         {
+      //           'name': 'Phase 8',
+      //           'id': 8,
+      //           'value': 30,
+      //           'mode': 2,
+      //           'options': [
+      //             0,
+      //             0,
+      //             0
+      //           ],
+      //           'minSplit': 13,
+      //           'delaystart': 0,
+      //           'advanceend': 0
+      //         }
+      //       ],
+      //       [],
+      //       []
+      //     ],
+      //     'stagesList': [
+      //       {
+      //         'split': 20,
+      //         'stages': [
+      //           1,
+      //           5
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 20,
+      //         'stages': [
+      //           1,
+      //           6
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 20,
+      //         'stages': [
+      //           2,
+      //           6
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 30,
+      //         'stages': [
+      //           3,
+      //           7
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       },
+      //       {
+      //         'split': 30,
+      //         'stages': [
+      //           4,
+      //           8
+      //         ],
+      //         'delaystart': 0,
+      //         'advanceend': 0
+      //       }
+      //     ],
+      //     'stages': [
+      //       [
+      //         1,
+      //         5
+      //       ],
+      //       [
+      //         1,
+      //         6
+      //       ],
+      //       [
+      //         2,
+      //         6
+      //       ],
+      //       [
+      //         3,
+      //         7
+      //       ],
+      //       [
+      //         4,
+      //         8
+      //       ]
+      //     ],
+      //     'barriers': [
+      //       {
+      //         'barrier': 1,
+      //         'length': 60,
+      //         'items': [
+      //           {
+      //             'ring': 2,
+      //             'data': [
+      //               5,
+      //               6
+      //             ]
+      //           },
+      //           {
+      //             'ring': 1,
+      //             'data': [
+      //               1,
+      //               2
+      //             ]
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         'barrier': 2,
+      //         'length': 60,
+      //         'items': [
+      //           {
+      //             'ring': 2,
+      //             'data': [
+      //               7,
+      //               8
+      //             ]
+      //           },
+      //           {
+      //             'ring': 1,
+      //             'data': [
+      //               3,
+      //               4
+      //             ]
+      //           }
+      //         ]
+      //       }
+      //     ]
+      //   }
+      // ],
+      manualInfo: {
+        tempPatternid: '',
+        offset: 0,
+        duration: 300,
+        tempDelay: 0 // 控制方式手动操作的情况下的延迟时间的临时值。
+        // tempDuration: 300 // 控制方式手动操作的情况下的持续时间的临时值。
+      }
+    }
+  },
+  created () {
+    this.patternPlan()
+    this.getCycle()
+    if (this.patternOne.length === 0) {
+      this.handleStageData(this.planPattern.rings)
+    }
+    this.initData()
+  },
+  methods: {
+    patternPlan () {
+      let Pattern = {
+        offset: 0,
+        cycle: 0,
+        rings: [[], [], [], []]
+      }
+      var newPattern = JSON.parse(JSON.stringify(Pattern))
+      for (let phase of this.phaseList) {
+        let ring = {}
+        ring.name = 'Phase ' + phase.id
+        ring.desc = this.getPhaseDescription(phase.direction)
+        ring.id = phase.id
+        ring.value = 30
+        ring.mode = 2
+        ring.options = []
+        ring.delaystart = 0
+        ring.advanceend = 0
+        if (phase.ring === 1) {
+          newPattern.rings[0].push(ring)
+        } else if (phase.ring === 2) {
+          newPattern.rings[1].push(ring)
+        } else if (phase.ring === 3) {
+          newPattern.rings[2].push(ring)
+        } else if (phase.ring === 4) {
+          newPattern.rings[3].push(ring)
+        }
+      }
+      this.planPattern = newPattern
+    },
+    getCycle () {
+      for (let rings of this.planPattern.rings) {
+        let num = 0
+        for (let i = 0; i < rings.length; i++) {
+          if (rings[i].length !== 0) {
+            if (rings[i].mode === 7) { // 忽略相位不计周期
+              continue
+            }
+            num = num + Number(rings[i].value)
+          }
+        }
+        if (num !== 0) {
+          this.planPattern.cycle = num
+          break
+        }
+      }
+    },
+    getPhaseDescription (phaseList) {
+      if (!phaseList) return
+      let list = []
+      for (let id of phaseList) {
+        let obj = {}
+        obj.id = id
+        obj.color = '#454545'
+        list.push(obj)
+      }
+      return list
+    },
+    handleClose () {
+      this.$emit('closePhaseBack')
+    },
+    onStageSplitChange (diff, rowIndex, subIndex) {
+      let stageArr = this.stagesList[subIndex].stages
+      let row = this.patternList[rowIndex]
+      let ringsList = row.rings
+      for (let rings of ringsList) {
+        for (let ring of rings) {
+          if (stageArr.includes(ring.id)) {
+            ring.value = (ring.value ? ring.value : 0) + diff
+            continue
+          }
+        }
+      }
+    },
+    stageSplitChange (diff, rowIndex, subIndex) {
+      let row = this.patternList[rowIndex]
+      let ringsList = row.stagesList
+      for (let rings of ringsList) {
+        if (subIndex === rings.key) {
+          rings.stageSplit = (rings.green ? rings.green : 0) + (rings.yellow ? rings.yellow : 0) + (rings.red ? rings.red : 0)
+          continue
+        }
+      }
+    },
+    onStageDelaystartChange (diff, rowIndex, subIndex) {
+      let stageArr = this.stagesList[subIndex].stages
+      let row = this.patternList[rowIndex]
+      let ringsList = row.rings
+      for (let rings of ringsList) {
+        for (let ring of rings) {
+          if (stageArr.includes(ring.id)) {
+            ring.delaystart = (ring.delaystart ? ring.delaystart : 0) + diff
+            continue
+          }
+        }
+      }
+    },
+    onStageAdvanceendChange (diff, rowIndex, subIndex) {
+      let stageArr = this.stagesList[subIndex].stages
+      let row = this.patternList[rowIndex]
+      let ringsList = row.rings
+      for (let rings of ringsList) {
+        for (let ring of rings) {
+          if (stageArr.includes(ring.id)) {
+            ring.advanceend = (ring.advanceend ? ring.advanceend : 0) + diff
+            continue
+          }
+        }
+      }
+    },
+    handleSplit (index) {
+      if (this.patternOne.length > 0) {
+        let currPattern = this.patternOne[0].rings
+        setTimeout(() => {
+          this.handleStageData(currPattern)
+        }, 50)
+      } else {
+        let currPattern = this.planPattern.rings
+        setTimeout(() => {
+          this.handleStageData(currPattern)
+        }, 50)
+      }
+    },
+    selectPattern () {
+      this.manualInfo.offset = 0
+      let selectId = isNaN(parseInt(this.manualInfo.tempPatternid)) ? Number(this.manualInfo.tempPatternid.replace(/[^0-9]/ig, '')) : this.manualInfo.tempPatternid
+      this.patternOne = this.allPatternList.filter(item => {
+        return item.id === selectId
+      })
+      this.manualInfo.offset = this.offset
+      for (let rings of this.patternOne[0].rings) {
+        if (rings.length === 0) continue
+        for (let ring of rings) {
+          if (ring.value === 0) continue
+          let currPhase = this.phaseList.filter((item) => {
+            return item.id === ring.id
+          })[0]
+          ring.desc = currPhase.direction.map(item => {
+            return {
+              id: item,
+              color: '#454545'
+            }
+          })
+        }
+      }
+      this.handleStageData(this.patternOne[0].rings)
+    },
+    handleStageData (rings) { // stagesList
+      for (let i = 0; i < rings.length; i++) {
+        if (rings[i].length > 0) {
+          let phaseList = []
+          let stagesList = []
+          // rings = JSON.parse(JSON.stringify(rings))
+          let mapAdd = rings.map(item => {
+            return item.map(val => {
+              return val.value + (val.sum ? val.sum : 0)
+            })
+          })
+          let maxCycle = mapAdd.length > 0 ? mapAdd.map(item => {
+            return item.length > 0 ? item.reduce((a, b) => {
+              return a + b
+            }) : 0
+          }) : 0
+          this.max = Math.max(...maxCycle)// 每个环的周期最大值
+          this.stateList = [0]
+          this.narr = []
+          let currentIds = ''
+          let lastCurrentIds = ''
+          for (let j = 0; j <= this.max; j++) { // 指针长度
+            for (let i = 0; i < rings.length; i++) { // 环列表
+              let ring = rings[i]// 每个环对象
+              let sum = 0
+              for (let n = 0; n < ring.length; n++) { // 相位累计长度
+                if (ring[n].mode !== 7) {
+                  sum = sum + ring[n].value + (ring[n].sum ? ring[n].sum : 0)
+                  if (j < sum) {
+                    let phaseId = ring[n].id
+                    currentIds = currentIds + '-' + phaseId
+                    break
+                  }
+                }
+              }
+            }
+            if (lastCurrentIds !== currentIds && lastCurrentIds !== '') { // 当前相位id和上一个相比不同说明相位变化了
+              phaseList.push(lastCurrentIds)
+              this.stateList.push(j)// 阶段累计长度的集合
+            }
+            lastCurrentIds = currentIds
+            currentIds = ''
+          }
+          let newPhaselist = []
+          phaseList.forEach(i => {
+            let rangeArr = i.split('-').map(Number)
+            if (rangeArr.length > 2) {
+              newPhaselist.push([
+                JSON.parse(JSON.stringify(rangeArr[1])),
+                JSON.parse(JSON.stringify(rangeArr[2]))
+              ])
+            } else {
+              newPhaselist.push([
+                JSON.parse(JSON.stringify(rangeArr[1]))
+              ])
+            }
+          })
+          for (let i = this.stateList.length - 1; i >= 1; i--) {
+            this.narr.push(this.stateList[i] - this.stateList[i - 1])
+          }
+          // newPhaselist
+          this.narr.reverse()// 阶段差
+          for (let i = 0; i < newPhaselist.length; i++) {
+            let stage = JSON.parse(JSON.stringify(newPhaselist[i]))
+            let stageItem = this.getStageItem(stage, rings, i)
+            stagesList.push(JSON.parse(JSON.stringify(stageItem)))
+          }
+          this.stagesList = JSON.parse(JSON.stringify(stagesList))
+        }
+      }
+    },
+    getStageItem (stageArr, ringsList, i) {
+      let res = {
+        key: i,
+        split: this.narr[i], // 阶段绿性比
+        stages: stageArr,
+        delaystart: 0,
+        advanceend: 0
+      }
+      // let splitArr = []
+      let delaystartArr = []
+      let advanceendArr = []
+      for (let rings of ringsList) {
+        for (let ring of rings) {
+          if (stageArr.includes(ring.id)) {
+            // let split = ring.value
+            let delaystart = ring.delaystart
+            let advanceend = ring.advanceend
+            // splitArr.push(split)
+            delaystartArr.push(delaystart)
+            advanceendArr.push(advanceend)
+          }
+        }
+      }
+      // splitArr.sort(function (a, b) { return a - b })
+      delaystartArr.sort(function (a, b) { return b - a })
+      advanceendArr.sort(function (a, b) { return a - b })
+      // res.split = splitArr.length > 0 ? splitArr[0] : 0
+      res.delaystart = delaystartArr.length > 0 ? delaystartArr[0] : 0
+      res.advanceend = advanceendArr.length > 0 ? advanceendArr[0] : 0
+      return res
+    },
+    initData () {
+      // 判断有几个环，就创建几个看板
+      //   let phaseList = this.globalParamModel.getParamsByType('phaseList')
+      this.coordphaseOption = this.phaseList.map(ele => {
+        return {
+          value: ele.id
+        }
+      })
+      //   this.overlap = this.globalParamModel.getParamsByType('overlaplList')
+      //   this.agentId = getIframdevid()
+      let rings = []
+      if (this.phaseList.length === 0) {
+        // this.$store.getters.tscParam.patternList = []
+        return
+      }
+      for (let phase of this.phaseList) {
+        rings.push(phase.ring)
+      }
+      this.ringCount = Array.from(new Set(rings)) // 去除数组重复的元素
+      this.ringCount = this.ringCount.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
+      this.ringCounts = Array.from(new Set(rings)) // 去除数组重复的元素
+      this.ringCounts = this.ringCounts.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
+    //   this.increaseId()
+    //   this.getCycle()
+    //   this.updatePhaseDescription()
+    //   this.getOptionsOfRing()
+    },
+    sortNumbers (a, b) {
+      return a - b
+    },
+    isRingCycleEqual (rings) {
+      let isequal = true
+      // this.patternmsg = []
+      let maxCycle = 0
+      for (let ring of rings) {
+        if (ring.length === 0) continue
+        let cycle = 0
+        for (let r of ring) {
+          if (r.mode === 7) { // 忽略相位不计周期
+            continue
+          }
+          cycle = cycle + r.value
+        }
+        if (cycle > maxCycle && maxCycle === 0) {
+          maxCycle = cycle
+        }
+        if (cycle !== maxCycle) {
+          // this.patternmsg.push(rings.id)
+          isequal = false
+        }
+      }
+      return isequal
+    },
+    checkPatternRules (rings) {
+      if (!this.isRingCycleEqual(rings)) {
+        this.patternCycleEqual = false
+      } else {
+        this.patternCycleEqual = true
+      }
+      if (!this.patternCycleEqual) {
+        let mess = `方案中存在环周期时长不一致`
+        if (this.$i18n.locale === 'en') {
+          mess = `Inconsistent loop cycle durations exist in the scheme`
+        }
+        this.$message({
+          message: mess,
+          type: 'error',
+          dangerouslyUseHTMLString: true
+        })
+        return false
+      }
+    },
+    handleManualControl () {
+      let submitdata = {
+        control: 100,
+        delay: this.manualInfo.tempDelay !== undefined ? Number(this.manualInfo.tempDelay) : 0,
+        duration: Number(this.manualInfo.duration),
+        // duration: this.manualInfo.tempDuration !== undefined ? Number(this.manualInfo.tempDuration) : 0,
+        data: {}
+      }
+      submitdata.data.offset = this.offset
+      submitdata.data.cycle = this.cycle
+      submitdata.data.rings = this.rings
+      this.checkPatternRules(submitdata.data.rings)
+      if (this.patternCycleEqual) {
+        this.$emit('closePhaseControl', submitdata)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>