openatc-components 0.0.25 → 0.0.28

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

@@ -0,0 +1,1304 @@
+<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.value">
+                  </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 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 v-model="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 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')}}: {{patternOne.length===0?allPatternList[0].cycle:patternOne[0].cycle}}  {{$t('openatccomponents.overview.patternoffset')}}: {{controlData.patternoffset}})</span>
+        </div>
+        <stage-status
+        :patternStatusList="patternOne.length===0?allPatternList[0].rings:patternOne[0].rings"
+        >
+        </stage-status>
+        <pattern-list
+        :patternList="patternOne.length===0?allPatternList:patternOne"
+        :patternStatusList="patternOne.length===0?allPatternList[0].rings:patternOne[0].rings"
+        :cycles="patternOne.length===0?allPatternList[0].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?allPatternList[0].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="false">
+                <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?allPatternList[0].rings[j-1]:patternOne[0].rings[j-1]"
+                    >
+                    </expend-config>
+                <!-- </el-col> -->
+                <!-- <el-col :span="12"> -->
+                    <el-row style="width: 60%;margin: 10px auto;">
+                        {{$t('openatccomponents.pattern.forbiddenstage')}}
+                        <el-input class="stage-value" size="small" v-model="forbiddenstage"></el-input>
+                    </el-row>
+                    <el-row style="width: 60%;margin: 10px auto;">
+                        {{$t('openatccomponents.pattern.screenstage')}}
+                        <el-input class="stage-value" size="small" v-model="screenstage"></el-input>
+                    </el-row>
+                    <el-row style="width: 60%;margin: 10px auto;">
+                        <!-- <el-col :span="8"> -->
+                        {{$t('openatccomponents.pattern.coordinatestage')}}
+                        <el-input class="stage-value" size="small" v-model="coordinatestage"></el-input>
+                        <!-- </el-col> -->
+                    </el-row>
+                <!-- </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="patternOne.length===0?allPatternList[0].stagesList:patternOne[0].stagesList"
+                    :overlap="overlap"
+                    :checked="true"
+                    :tentative="true"
+                    :cycle="patternOne.length===0?allPatternList[0].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
+    // },
+    // phaseRings: {
+    //   type: Array
+    // }
+    // planPattern: {
+    //   type: Array
+    // }
+    // patternSelect: {
+    //   type: Array
+    // }
+  },
+  computed: {
+    offset () {
+      return this.patternOne.length === 0 ? 0 : 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 {
+      patternSelect: [{
+        value: 1
+      }, {
+        value: 2
+      }, {
+        value: 3
+      }],
+      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
+          ]
+        }
+      ],
+      activeList: 'ring',
+      ringCount: 1,
+      ringCounts: 1,
+      coordphaseOption: [],
+      patternOne: [],
+      planPattern: [
+        [
+          {
+            'name': 'Phase 1',
+            'desc': [
+              {
+                'id': 13,
+                'color': '#454545'
+              }
+            ],
+            'id': 1,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          },
+          {
+            'name': 'Phase 2',
+            'desc': [
+              {
+                'id': 3,
+                'color': '#454545'
+              },
+              {
+                'id': 12,
+                'color': '#454545'
+              }
+            ],
+            'id': 2,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          },
+          {
+            'name': 'Phase 3',
+            'desc': [
+              {
+                'id': 1,
+                'color': '#454545'
+              }
+            ],
+            'id': 3,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          },
+          {
+            'name': 'Phase 4',
+            'desc': [
+              {
+                'id': 6,
+                'color': '#454545'
+              },
+              {
+                'id': 8,
+                'color': '#454545'
+              }
+            ],
+            'id': 4,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          }
+        ],
+        [
+          {
+            'name': 'Phase 5',
+            'desc': [
+              {
+                'id': 9,
+                'color': '#454545'
+              }
+            ],
+            'id': 5,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          },
+          {
+            'name': 'Phase 6',
+            'desc': [
+              {
+                'id': 14,
+                'color': '#454545'
+              },
+              {
+                'id': 16,
+                'color': '#454545'
+              }
+            ],
+            'id': 6,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          },
+          {
+            'name': 'Phase 7',
+            'desc': [],
+            'id': 7,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          },
+          {
+            'name': 'Phase 8',
+            'desc': [
+              {
+                'id': 2,
+                'color': '#454545'
+              },
+              {
+                'id': 4,
+                'color': '#454545'
+              }
+            ],
+            'id': 8,
+            'value': 30,
+            'mode': 2,
+            'options': [],
+            'delaystart': 0,
+            'advanceend': 0
+          }
+        ],
+        [],
+        []
+      ],
+      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': [
+            {
+              'key': 0,
+              'split': 30,
+              'stages': [
+                1,
+                5
+              ]
+            },
+            {
+              'key': 1,
+              'split': 30,
+              'stages': [
+                2,
+                6
+              ]
+            },
+            {
+              'key': 2,
+              'split': 30,
+              'stages': [
+                3,
+                7
+              ]
+            },
+            {
+              'key': 3,
+              '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': [
+            {
+              'key': 0,
+              'split': 20,
+              'stages': [
+                1,
+                5
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 1,
+              'split': 7,
+              'stages': [
+                2,
+                5
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 2,
+              'split': 28,
+              'stages': [
+                2,
+                6
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 3,
+              'split': 30,
+              'stages': [
+                3,
+                7
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 4,
+              'split': 5,
+              'stages': [
+                4,
+                7
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 5,
+              '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': [
+            {
+              'key': 0,
+              'split': 20,
+              'stages': [
+                1,
+                5
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 1,
+              'split': 20,
+              'stages': [
+                1,
+                6
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 2,
+              'split': 20,
+              'stages': [
+                2,
+                6
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 3,
+              'split': 30,
+              'stages': [
+                3,
+                7
+              ],
+              'delaystart': 0,
+              'advanceend': 0
+            },
+            {
+              'key': 4,
+              '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.initData()
+  },
+  methods: {
+    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, newList) {
+    //   this.allPatternList[index - 1].rings[index - 1] = newList
+    //   this.planPattern[index - 1] = newList
+    //   let currPattern = this.patternList[index]
+    //   setTimeout(() => {
+    //     this.handleStageData(currPattern.rings, this.patternList[index].id, currPattern.stagesList)
+    //   }, 50)
+    },
+    selectPattern () {
+      this.patternOne = this.allPatternList.filter(item => {
+        return item.id === this.manualInfo.tempPatternid
+      })
+    },
+    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
+    },
+    handleManualControl () {
+      let submitdata = {
+        control: 100,
+        delay: this.manualInfo.tempDelay !== undefined ? Number(this.manualInfo.tempDelay) : 0,
+        duration: this.manualInfo.tempDuration !== undefined ? Number(this.manualInfo.tempDuration) : 0,
+        data: {}
+      }
+      //   submitdata.data.phases = this.handleSubmitPhaseClose()
+      this.$emit('closePhaseControl', submitdata)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>