openatc-components 0.4.60 → 0.4.61

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

@@ -1,303 +1,303 @@
-/**
- * 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 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="isRing" 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="6">
-            {{this.$t('openatccomponents.overview.phasesplit')}}
-          </el-col>
-          <el-col :span="18">
-            <el-input-number
-              v-if="isRing"
-              class="stage-value"
-              :controls="false"
-              size="small"
-              :disabled="true"
-              ref="type"
-              v-model.number="stage.stageSplit">
-            </el-input-number>
-            <el-input-number
-              v-if="!isRing"
-              class="stage-value"
-              :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="6">
-            {{this.$t('openatccomponents.pattern.phase')}}
-          </el-col>
-          <el-col :span="18">
-            <SelectCrossPhase
-            v-if="isRing"
-            type="phases"
-            :pattern="false"
-            :phaseOption="coordphaseOption"
-            multiple
-            :row="stage"
-            style="width:100%;">
-          </SelectCrossPhase>
-            <!-- <el-select v-if="isRing" 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="!isRing"
-              class="stage-value"
-              size="small"
-              :value="stage.phases.join(',')"
-              ref="type"
-              style="width:100%;align:left;"
-              :disabled="true">
-            </el-input>
-          </el-col>
-        </el-row>
-        <el-row :gutter="0" v-if="isRing">
-          <el-col :span="6">
-            {{this.$t('openatccomponents.pattern.green')}}
-          </el-col>
-          <el-col :span="18">
-            <el-input-number
-              class="stage-value"
-              size="small"
-              :controls="false"
-              :min="0"
-              v-model.number="stage.green"
-              @change="stageSplitChange">
-            </el-input-number>
-          </el-col>
-        </el-row>
-        <el-row :gutter="0" v-if="isRing">
-          <el-col :span="6">
-            {{this.$t('openatccomponents.pattern.stageno')}}
-          </el-col>
-          <el-col :span="18">
-            <el-input-number
-              class="stage-value"
-              size="small"
-              :controls="false"
-              :min="0"
-              v-model.number="stage.stageNo"
-              @change="stageSplitChange">
-            </el-input-number>
-          </el-col>
-        </el-row>
-        <el-row :gutter="0" v-if="isRing">
-          <el-col :span="6">
-            {{this.$t('openatccomponents.pattern.yellow')}}
-          </el-col>
-          <el-col :span="18">
-            <el-input-number
-              class="stage-value"
-              size="small"
-              :controls="false"
-              :min="0"
-              v-model.number="stage.yellow"
-              @change="stageSplitChange">
-            </el-input-number>
-          </el-col>
-        </el-row>
-        <el-row :gutter="0" v-if="isRing">
-          <el-col :span="6">
-            {{this.$t('openatccomponents.pattern.red')}}
-          </el-col>
-          <el-col :span="18">
-            <el-input-number
-              class="stage-value"
-              size="small"
-              :controls="false"
-              :min="0"
-              v-model.number="stage.red"
-              @change="stageSplitChange">
-            </el-input-number>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-  </div>
-</div>
-</template>
-<script>
-import draggable from 'vuedraggable'
-import SelectCrossPhase from '../SelectCrossPhase/index.vue'
-export default {
-  name: 'stage-bord',
-  components: {
-    draggable,
-    SelectCrossPhase
-  },
-  data () {
-    return {
-    }
-  },
-  props: {
-    // headerText: {
-    //   type: String,
-    //   default: 'Header'
-    // },
-    stageInfo: {
-      type: Array
-    },
-    coordphaseOption: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    isRing: {
-      type: Boolean
-    },
-    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.isRing) {
-    //       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)
-      this.stageInfo.forEach((item, index) => {
-        item.key = index
-      })
-      // let n = this.rowIndex
-      // const globalParamModel = this.$store.getters.globalParamModel
-      // let pattern = globalParamModel.getParamsByType('patternList')[n]
-      // globalParamModel.getParamsByType('patternList')[n].cycle = this.getMaxCycle(pattern)
-    },
-    getMaxCycle (pattern) {
-      let rings = pattern.stagesList
-      let stageCycleList = rings.map(item => {
-        return (item.stageSplit || item.stageSplit === 0) ? item.stageSplit : item.split
-      })
-      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;
-    text-align: left;
-    line-height: 40px;
-    padding: 1px 1px;
-    box-sizing: border-box;
-    font-size: 14PX;
-  }
-  .el-button--primary:hover, .el-button--primary:focus{
-    background: #299BCC;
-    border-color: #299BCC;
-    color: #FFFFFF;
-  }
-  .stage-value {
-    text-align: left;
-    width: 100%;
-  }
-</style>
-<style lang="scss">
-.stage-value .el-input__inner {
-    text-align: center;
-  }
-</style>
+/**
+ * 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 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="isRing" 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="6">
+            {{this.$t('openatccomponents.overview.phasesplit')}}
+          </el-col>
+          <el-col :span="18">
+            <el-input-number
+              v-if="isRing"
+              class="stage-value"
+              :controls="false"
+              size="small"
+              :disabled="true"
+              ref="type"
+              v-model.number="stage.stageSplit">
+            </el-input-number>
+            <el-input-number
+              v-if="!isRing"
+              class="stage-value"
+              :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="6">
+            {{this.$t('openatccomponents.pattern.phase')}}
+          </el-col>
+          <el-col :span="18">
+            <SelectCrossPhase
+            v-if="isRing"
+            type="phases"
+            :pattern="false"
+            :phaseOption="coordphaseOption"
+            multiple
+            :row="stage"
+            style="width:100%;">
+          </SelectCrossPhase>
+            <!-- <el-select v-if="isRing" 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="!isRing"
+              class="stage-value"
+              size="small"
+              :value="stage.phases.join(',')"
+              ref="type"
+              style="width:100%;align:left;"
+              :disabled="true">
+            </el-input>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0" v-if="isRing">
+          <el-col :span="6">
+            {{this.$t('openatccomponents.pattern.green')}}
+          </el-col>
+          <el-col :span="18">
+            <el-input-number
+              class="stage-value"
+              size="small"
+              :controls="false"
+              :min="0"
+              v-model.number="stage.green"
+              @change="stageSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0" v-if="isRing">
+          <el-col :span="6">
+            {{this.$t('openatccomponents.pattern.stageno')}}
+          </el-col>
+          <el-col :span="18">
+            <el-input-number
+              class="stage-value"
+              size="small"
+              :controls="false"
+              :min="0"
+              v-model.number="stage.stageNo"
+              @change="stageSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0" v-if="isRing">
+          <el-col :span="6">
+            {{this.$t('openatccomponents.pattern.yellow')}}
+          </el-col>
+          <el-col :span="18">
+            <el-input-number
+              class="stage-value"
+              size="small"
+              :controls="false"
+              :min="0"
+              v-model.number="stage.yellow"
+              @change="stageSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0" v-if="isRing">
+          <el-col :span="6">
+            {{this.$t('openatccomponents.pattern.red')}}
+          </el-col>
+          <el-col :span="18">
+            <el-input-number
+              class="stage-value"
+              size="small"
+              :controls="false"
+              :min="0"
+              v-model.number="stage.red"
+              @change="stageSplitChange">
+            </el-input-number>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+import SelectCrossPhase from '../SelectCrossPhase/index.vue'
+export default {
+  name: 'stage-bord',
+  components: {
+    draggable,
+    SelectCrossPhase
+  },
+  data () {
+    return {
+    }
+  },
+  props: {
+    // headerText: {
+    //   type: String,
+    //   default: 'Header'
+    // },
+    stageInfo: {
+      type: Array
+    },
+    coordphaseOption: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    isRing: {
+      type: Boolean
+    },
+    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.isRing) {
+    //       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)
+      this.stageInfo.forEach((item, index) => {
+        item.key = index
+      })
+      // let n = this.rowIndex
+      // const globalParamModel = this.$store.getters.globalParamModel
+      // let pattern = globalParamModel.getParamsByType('patternList')[n]
+      // globalParamModel.getParamsByType('patternList')[n].cycle = this.getMaxCycle(pattern)
+    },
+    getMaxCycle (pattern) {
+      let rings = pattern.stagesList
+      let stageCycleList = rings.map(item => {
+        return (item.stageSplit || item.stageSplit === 0) ? item.stageSplit : item.split
+      })
+      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;
+    text-align: left;
+    line-height: 40px;
+    padding: 1px 1px;
+    box-sizing: border-box;
+    font-size: 14PX;
+  }
+  .el-button--primary:hover, .el-button--primary:focus{
+    background: #299BCC;
+    border-color: #299BCC;
+    color: #FFFFFF;
+  }
+  .stage-value {
+    text-align: left;
+    width: 100%;
+  }
+</style>
+<style lang="scss">
+.stage-value .el-input__inner {
+    text-align: center;
+  }
+</style>