openatc-components 0.0.23 → 0.0.26

package/src/kisscomps/components/StageBord/StageBord.vue

@@ -0,0 +1,242 @@
+<template>
+<div class="components-container board">
+  <div class="common-board-column">
+    <div class="common-board-column-header" style="position:relative">
+      <span>{{$t('openatccomponents.pattern.stage')+(subIndex+1)}}</span>
+      <span v-if="contrloType" style="position: absolute;right: 0;">
+        <el-button type="primary" @click="deleteStage(subIndex)" icon="el-icon-close"></el-button>
+      </span>
+    </div>
+    <div
+      class="common-board-column-content"
+      :options="options">
+      <div class="stage-item" >
+        <el-row :gutter="0">
+          <el-col :span="12">
+            {{this.$t('openatccomponents.overview.phasesplit')}}
+          </el-col>
+          <el-col :span="12">
+            <el-input-number
+              v-if="contrloType"
+              :controls="false"
+              size="small"
+              :disabled="true"
+              ref="type"
+              v-model.number="stage.stageSplit">
+            </el-input-number>
+            <el-input-number
+              v-if="!contrloType"
+              :controls="false"
+              size="small"
+              v-model.number="stage.split"
+              ref="type"
+              :disabled="true"
+              @change="onSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0">
+          <el-col :span="12">
+            {{this.$t('openatccomponents.pattern.phase')}}
+          </el-col>
+          <el-col :span="12">
+            <el-select v-if="contrloType" v-model="stage.phases" multiple :placeholder="$t('openatccomponents.common.select')">
+              <el-option
+                v-for="item in coordphaseOption"
+                :key="item.value"
+                :label="$t('openatccomponents.pattern.phase') + item.value"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <el-input
+              v-if="!contrloType"
+              size="small"
+              :value="stage.stages.join(',')"
+              ref="type"
+              :disabled="true">
+            </el-input>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0" v-if="contrloType">
+          <el-col :span="12">
+            {{this.$t('openatccomponents.pattern.green')}}
+          </el-col>
+          <el-col :span="12">
+            <el-input-number
+              size="small"
+              :controls="false"
+              v-model.number="stage.green"
+              @change="stageSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0" v-if="contrloType">
+          <el-col :span="12">
+            {{this.$t('openatccomponents.pattern.yellow')}}
+          </el-col>
+          <el-col :span="12">
+            <el-input-number
+              size="small"
+              :controls="false"
+              v-model.number="stage.yellow"
+              @change="stageSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0" v-if="contrloType">
+          <el-col :span="12">
+            {{this.$t('openatccomponents.pattern.red')}}
+          </el-col>
+          <el-col :span="12">
+            <el-input-number
+              size="small"
+              :controls="false"
+              v-model.number="stage.red"
+              @change="stageSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'stage-board',
+  components: {
+    draggable
+  },
+  data () {
+    return {
+    }
+  },
+  props: {
+    // headerText: {
+    //   type: String,
+    //   default: 'Header'
+    // },
+    stageInfo: {
+      type: Array
+    },
+    coordphaseOption: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    contrloType: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    stage: {
+      type: Object,
+      default () {
+        return {
+          split: 0,
+          stages: [],
+          phases: [],
+          stageSplit: 0,
+          green: 0,
+          yellow: 0,
+          red: 0,
+          delaystart: 0,
+          advanceend: 0
+        }
+      }
+    },
+    rowIndex: {
+      type: Number
+    },
+    subIndex: {
+      type: Number
+    }
+  },
+  created () {
+  },
+  watch: {
+    stage: {
+      handler: function () {
+        if (this.contrloType) {
+          let n = this.rowIndex
+          const globalParamModel = this.$store.getters.globalParamModel
+          let pattern = globalParamModel.getParamsByType('patternList')[n]
+          globalParamModel.getParamsByType('patternList')[n].cycle = this.getMaxCycle(pattern)
+        }
+      },
+      deep: true
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    deleteStage (index) {
+      this.stageInfo.splice(index, 1)
+    },
+    getMaxCycle (pattern) {
+      let rings = pattern.stagesList
+      let stageCycleList = rings.map(item => {
+        return item.stageSplit
+      })
+      let maxCycle = stageCycleList.reduce((a, b) => {
+        return a + b
+      }, 0)
+      return maxCycle
+    },
+    onSplitChange (newVal, oldVal) {
+      let diff = newVal - (oldVal || 0)
+      if (diff === 0) {
+        return false
+      }
+      this.$emit('onStageSplitChange', diff, this.rowIndex, this.subIndex)
+    },
+    stageSplitChange (newVal, oldVal) {
+      let diff = newVal - (oldVal || 0)
+      if (diff === 0) {
+        return false
+      }
+      this.$emit('stageSplitChange', diff, this.rowIndex, this.subIndex)
+    },
+    onDelaystartChange (newVal, oldVal) {
+      let diff = newVal - (oldVal || 0)
+      if (diff === 0) {
+        return false
+      }
+      this.$emit('onStageDelaystartChange', diff, this.rowIndex, this.subIndex)
+    },
+    onAdvanceendChange (newVal, oldVal) {
+      let diff = newVal - (oldVal || 0)
+      if (diff === 0) {
+        return false
+      }
+      this.$emit('onStageAdvanceendChange', diff, this.rowIndex, this.subIndex)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .stage-item {
+    cursor: pointer;
+    width: 100%;
+    height: auto;
+    margin: 5px 0;
+    line-height: 40px;
+    padding: 1px 1px;
+    box-sizing: border-box;
+  }
+  .el-button--primary:hover, .el-button--primary:focus{
+    background: #409EFF;
+    border-color: #409EFF;
+    color: #FFFFFF;
+  }
+</style>
+<style lang="scss">
+</style>

package/src/kisscomps/components/StageBord/index.js

@@ -0,0 +1,2 @@
+import StageBord from './StageBord.vue'
+export default StageBord

package/src/kisscomps/components/StageStatus/StageStatus.vue

@@ -11,7 +11,7 @@
  **/
 <template>
     <div class="main-statgestatus">
-        <div class="stage-line"></div>
+        <div class="stage-line" v-show="numList.length>0"></div>
         <div v-for="(item, index) in numList" :key="index + '1'">
           <div class="stage-verticalline" :style="{'margin-left':item}"></div>
         </div>
@@ -23,7 +23,7 @@
 <script>
 
 export default {
-  name: 'stagestatus',
+  name: 'stage-status',
   components: {},
   data () {
     return {
@@ -95,8 +95,10 @@ export default {
   },
   methods: {
     getStageLine () {
+      if (this.localPatternList.length === 0) return
       for (let i = 0; i < this.localPatternList.length; i++) {
         if (this.controlData.patternid === this.localPatternList[i].id) {
+          if (!this.localPatternList[i].stagesList) return
           let stageCycleList = this.localPatternList[i].stagesList.map(item => {
             return item.stageSplit ? item.stageSplit : 0
           })

package/src/kisscomps/components/Stages/index.vue

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2020 kedacom
+ * OpenATC is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ * http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ **/
+<template>
+  <div id="intersection-stages" class="intersection-stages">
+    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{'当前阶段'}}:</div> -->
+      <div style="margin-left: 10PX;" >
+        <div style="width: 100%; height: auto;">
+          <div class="control-model" v-for="(item, index) in stagesList" :key="index">
+            <div style="position:relative;" :style="singleStyle" class="single-model" @click="selectStages(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
+              <template v-for="(side, index) in item[0].sidewalkPhaseData" >
+                <PatternWalkSvg class="patternWalk" v-if="item[0].peddirection.includes(side.id)" :key="side.key + '-' + index" :Data="side" :Width="'55'" :Height="'55'" />
+              </template>
+              <xdr-dir-selector Width="40PX" Height="40PX" :showlist="item"></xdr-dir-selector>
+              <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
+                <div class="current-stage-num" style="width:20%;">{{index + 1}}</div>
+                <div style="width:70%;">
+                  <i class="iconfont icon-BRT" style="font-size:11PX;color:#606266;" v-if="item[item.length-1].controltype === 4"></i>
+                  <i class="iconfont icon-feijidongche" style="font-size:11PX;color:#606266;" v-if="item[item.length-1].controltype === 6"></i>
+                  <i class="iconfont icon-gongjiaoche" style="font-size:11PX;color:#606266;" v-if="item[item.length-1].controltype === 3"></i>
+                  <i class="iconfont icon-youguidianche" style="font-size:11PX;color:#606266;" v-if="item[item.length-1].controltype === 5"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
+export default {
+  name: 'Stages',
+  components: {
+    PatternWalkSvg
+  },
+  props: {
+    stagesList: {
+      type: Array,
+      default: []
+    },
+    currentStage: {
+      type: Number,
+      default: -1
+    },
+    StageWidth: {
+      type: String,
+      default: '70px'
+    },
+    StageHeight: {
+      type: String,
+      default: '65px'
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  computed: {
+    singleStyle () {
+      return {
+        width: this.StageWidth,
+        height: this.StageHeight
+      }
+    }
+  },
+  methods: {
+    selectStages (value) {
+      this.currentStage = value
+      this.$emit('onSelectStages', value)
+    }
+  },
+  mounted () {
+  }
+};
+</script>