openatc-components 0.5.11 → 0.5.12

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

@@ -1,341 +1,341 @@
-/**
- * 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="main-statgestatus">
-        <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>
-        <div v-for="(item, index) in narr" :key="index + '2'">
-          <div class="stage-text" :style="{'left':item}"><span class="stage-span">S{{index + 1}}</span></div>
-        </div>
-    </div>
-</template>
-<script>
-
-export default {
-  name: 'stage-status',
-  components: {},
-  data () {
-    return {
-      // stageList: [],
-      numList: [],
-      stateList: [],
-      narr: [],
-      max: '',
-      stageStatusList: []
-      // stageLineStatus: false
-    }
-  },
-  props: {
-    patternStatusList: {
-      type: Array
-    },
-    contrloType: {
-      type: String
-    },
-    localPatternList: {
-      type: Array
-    },
-    controlData: {
-      type: Object
-    }
-  },
-  watch: {
-    controlData: {
-      handler: function (val, oldVal) {
-        // this.handleStages() // 计算屏障高度
-        if (this.contrloType === 'stage') {
-          this.getStageLine()
-        } else {
-          if (this.controlData) {
-            this.getPhaseId(this.controlData)
-          }
-        }
-      },
-      // 深度观察监听
-      deep: true
-    },
-    patternStatusList: {
-      handler: function (val, oldVal) {
-        // this.handleStages() // 计算屏障高度
-        if (this.patternStatusList) {
-          this.getPhaseId(this.patternStatusList)
-        }
-      },
-      // 深度观察监听
-      deep: true
-    }
-  },
-  created () {
-    if (this.patternStatusList && this.patternStatusList.length > 1) {
-      this.getPhaseId(this.patternStatusList)
-    }
-    if (this.localPatternList) {
-      this.getStageLine()
-    }
-    if (this.controlData) {
-      // this.stageLineStatus = true
-      this.getPhaseId(this.controlData)
-    }
-  },
-  mounted () {
-  },
-  beforeUpdate () {
-    if (this.patternStatusList && this.patternStatusList.length > 1) {
-      this.getPhaseId(this.patternStatusList)
-    } else if (this.patternStatusList && this.patternStatusList.length === 1) {
-      this.handleStages()
-    }
-  },
-  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
-          })
-          let stageMaxCyle = stageCycleList.reduce((a, b) => {
-            return a + b
-          }, 0)
-          this.addList(stageCycleList, stageMaxCyle)
-          this.stageLists = this.localPatternList[i].stagesList.map(item => {
-            return {
-              ...item,
-              greenWidth: (item.green / stageMaxCyle * 100).toFixed(3) + '%',
-              yellowWidth: (item.yellow / stageMaxCyle * 100).toFixed(3) + '%',
-              redWidth: (item.red / stageMaxCyle * 100).toFixed(3) + '%'
-            }
-          })
-        }
-      }
-    },
-    addList (baseArr, maxCycle) {
-      this.narr = []
-      // this.stageLineStatus = true
-      let setArr = []
-      let currNum = 0
-      baseArr.forEach((item, index) => {
-        if (index === 0) {
-          setArr.push(baseArr[index])
-        } else {
-          if (currNum) {
-            currNum = baseArr[index] + currNum
-          } else {
-            currNum = baseArr[index] + baseArr[index - 1]
-          }
-          setArr.push(currNum)
-        }
-      })
-      this.numList = setArr.map(item => {
-        return (item / maxCycle * 100).toFixed(3) + '%'
-      })
-      this.numList.unshift(0)
-      for (let i = this.numList.length - 1; i >= 1; i--) {
-        this.narr.push((Number.parseFloat(this.numList[i]) - Number.parseFloat(this.numList[i - 1])) / 2 + Number.parseFloat(this.numList[i - 1]) - 1 + '%')
-      }
-      this.narr = JSON.parse(JSON.stringify(this.narr.reverse()))
-    },
-    getControl (newList) { // 总揽实时数据
-      let currentIds = ''
-      let lastCurrentIds = ''
-      this.stateList = [0]
-      this.narr = []
-      for (let j = 0; j <= this.max; j++) { // 指针长度
-        for (let i = 0; i < newList.length; i++) { // 环列表
-          let ring = newList[i]// 每个环对象
-          let sum = 0
-          for (let n = 0; n < ring.length; n++) { // 相位累计长度
-            // if (ring[n].mode !== 7) {
-            // if (this.controlData) {
-            // sum = sum + ring[n].split
-            sum = sum + ring[n].value + (ring[n].sum ? ring[n].sum : 0)
-            // } else {
-            // sum = sum + ring[n].value
-            // 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和上一个相比不同说明相位变化了
-          this.stateList.push(j)// 阶段累计长度的集合
-        }
-        lastCurrentIds = currentIds
-        currentIds = ''
-        this.numList = this.stateList.map(item => {
-          return (item / this.max * 100).toFixed(3) + '%'
-        })
-      }
-    },
-    getPhaseId (rings) { // 画阶段方法
-      rings = JSON.parse(JSON.stringify(rings))
-      if (rings.length === 0) {
-        // this.stageLineStatus = false
-        return
-      }
-      // this.stageLineStatus = true
-      if (this.controlData) {
-        if (this.localPatternList.length === 0) return
-        let idPattern = this.localPatternList.filter(item => item.id === this.controlData.patternid)
-        if (idPattern.length === 0) {
-          let mapAdd = rings.phase.map(item => {
-            return {
-              id: item.id,
-              value: item.split
-            }
-          })
-          let newRings = rings.rings.map(j => {
-            return j.sequence
-          })
-          let newList = newRings.map(item => {
-            let ret = []
-            item.map(i => {
-              const find = mapAdd.find(j => j.id === i)
-              if (find) {
-                ret.push(find)
-              }
-            })
-            return ret
-          })
-          let mapAdds = newList.map(item => {
-            return item.map(val => {
-              return val.value
-            })
-          })
-          let maxCycle = mapAdds.length > 0 ? mapAdds.map(item => {
-            return item.length > 0 ? item.reduce((a, b) => {
-              return a + b
-            }) : 0
-          }) : 0
-          this.max = Math.max(...maxCycle)// 每个环的周期最大值
-          this.getControl(newList)
-        } else {
-          let ringList = this.localPatternList.filter(item => {
-            return item.id === this.controlData.patternid
-          })[0].rings
-          if (!rings.rings) return
-          let filterPattern = []
-          for (let i of ringList) {
-            for (let j of this.controlData.rings) {
-              let filterSequence = i.filter(item => j.sequence.includes(item.id))
-              if (filterSequence.length > 0) {
-                filterPattern.push(filterSequence)
-              }
-            }
-          }
-          let mapAdd = filterPattern.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.getControl(filterPattern)
-        }
-      } else {
-        let mapAdd = rings.map(item => {
-          return item.map(val => {
-            return val.value
-          })
-        })
-        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.getControl(rings)
-      }
-      for (let i = this.numList.length - 1; i >= 1; i--) {
-        this.narr.push((Number.parseFloat(this.numList[i]) - Number.parseFloat(this.numList[i - 1])) / 2 + Number.parseFloat(this.numList[i - 1]) - 1 + '%')
-      }
-      this.narr = JSON.parse(JSON.stringify(this.narr.reverse()))
-    },
-    handleStages () {
-      this.numList = [0]
-      this.narr = []
-      if (this.patternStatusList.length === 0) {
-        // this.stageLineStatus = false
-        return
-      }
-      // this.stageLineStatus = true
-      let firstPatternStatusList = this.patternStatusList[0]
-      let stageLength = 0
-      let stageStatusLength = 0
-      for (let i = 0; i < firstPatternStatusList.length; i++) {
-        let tempLength = Number.parseFloat(firstPatternStatusList[i].greenWidth) + Number.parseFloat(firstPatternStatusList[i].redWidth) + Number.parseFloat(firstPatternStatusList[i].yellowWidth)
-        stageStatusLength = stageLength + tempLength / 2 - 1
-        stageLength = stageLength + tempLength
-        this.numList.push(stageLength + '%')
-        this.narr.push(stageStatusLength + '%')
-      }
-    }
-  },
-  computed: {
-  }
-}
-</script>
-<style lang="scss" scoped>
-.main-statgestatus {
-  position: relative;
-  margin-bottom: 30px;
-}
-.stage-line {
-  position: relative;
-  top: 7px;
-  width: 100%;
-  height: 1px;
-  background-color: #FFFFFF;
-  z-index:1;
-}
-.stage-verticalline {
-  position: absolute;
-  float: left;
-  width: 1px;
-  height: 14px;
-  background-color: #FFFFFF;
-  z-index:2;
-}
-.stage-text {
-  position: absolute;
-  float: left;
-  width: 25px;
-  text-align: center;
-  background-color: #202940;
-  z-index:3;
-}
-.stage-span {
-  // position: relative;
-  bottom: 3px;
-  left: 5px;
-  width: 15px;
-  height: 14px;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  line-height: 20px;
-  letter-spacing: 0px;
-  background-color: #202940;
-  color: #FFFFFF;
-}
-</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="main-statgestatus">
+        <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>
+        <div v-for="(item, index) in narr" :key="index + '2'">
+          <div class="stage-text" :style="{'left':item}"><span class="stage-span">S{{index + 1}}</span></div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+  name: 'stage-status',
+  components: {},
+  data () {
+    return {
+      // stageList: [],
+      numList: [],
+      stateList: [],
+      narr: [],
+      max: '',
+      stageStatusList: []
+      // stageLineStatus: false
+    }
+  },
+  props: {
+    patternStatusList: {
+      type: Array
+    },
+    contrloType: {
+      type: String
+    },
+    localPatternList: {
+      type: Array
+    },
+    controlData: {
+      type: Object
+    }
+  },
+  watch: {
+    controlData: {
+      handler: function (val, oldVal) {
+        // this.handleStages() // 计算屏障高度
+        if (this.contrloType === 'stage') {
+          this.getStageLine()
+        } else {
+          if (this.controlData) {
+            this.getPhaseId(this.controlData)
+          }
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    patternStatusList: {
+      handler: function (val, oldVal) {
+        // this.handleStages() // 计算屏障高度
+        if (this.patternStatusList) {
+          this.getPhaseId(this.patternStatusList)
+        }
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  created () {
+    if (this.patternStatusList && this.patternStatusList.length > 1) {
+      this.getPhaseId(this.patternStatusList)
+    }
+    if (this.localPatternList) {
+      this.getStageLine()
+    }
+    if (this.controlData) {
+      // this.stageLineStatus = true
+      this.getPhaseId(this.controlData)
+    }
+  },
+  mounted () {
+  },
+  beforeUpdate () {
+    if (this.patternStatusList && this.patternStatusList.length > 1) {
+      this.getPhaseId(this.patternStatusList)
+    } else if (this.patternStatusList && this.patternStatusList.length === 1) {
+      this.handleStages()
+    }
+  },
+  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
+          })
+          let stageMaxCyle = stageCycleList.reduce((a, b) => {
+            return a + b
+          }, 0)
+          this.addList(stageCycleList, stageMaxCyle)
+          this.stageLists = this.localPatternList[i].stagesList.map(item => {
+            return {
+              ...item,
+              greenWidth: (item.green / stageMaxCyle * 100).toFixed(3) + '%',
+              yellowWidth: (item.yellow / stageMaxCyle * 100).toFixed(3) + '%',
+              redWidth: (item.red / stageMaxCyle * 100).toFixed(3) + '%'
+            }
+          })
+        }
+      }
+    },
+    addList (baseArr, maxCycle) {
+      this.narr = []
+      // this.stageLineStatus = true
+      let setArr = []
+      let currNum = 0
+      baseArr.forEach((item, index) => {
+        if (index === 0) {
+          setArr.push(baseArr[index])
+        } else {
+          if (currNum) {
+            currNum = baseArr[index] + currNum
+          } else {
+            currNum = baseArr[index] + baseArr[index - 1]
+          }
+          setArr.push(currNum)
+        }
+      })
+      this.numList = setArr.map(item => {
+        return (item / maxCycle * 100).toFixed(3) + '%'
+      })
+      this.numList.unshift(0)
+      for (let i = this.numList.length - 1; i >= 1; i--) {
+        this.narr.push((Number.parseFloat(this.numList[i]) - Number.parseFloat(this.numList[i - 1])) / 2 + Number.parseFloat(this.numList[i - 1]) - 1 + '%')
+      }
+      this.narr = JSON.parse(JSON.stringify(this.narr.reverse()))
+    },
+    getControl (newList) { // 总揽实时数据
+      let currentIds = ''
+      let lastCurrentIds = ''
+      this.stateList = [0]
+      this.narr = []
+      for (let j = 0; j <= this.max; j++) { // 指针长度
+        for (let i = 0; i < newList.length; i++) { // 环列表
+          let ring = newList[i]// 每个环对象
+          let sum = 0
+          for (let n = 0; n < ring.length; n++) { // 相位累计长度
+            // if (ring[n].mode !== 7) {
+            // if (this.controlData) {
+            // sum = sum + ring[n].split
+            sum = sum + ring[n].value + (ring[n].sum ? ring[n].sum : 0)
+            // } else {
+            // sum = sum + ring[n].value
+            // 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和上一个相比不同说明相位变化了
+          this.stateList.push(j)// 阶段累计长度的集合
+        }
+        lastCurrentIds = currentIds
+        currentIds = ''
+        this.numList = this.stateList.map(item => {
+          return (item / this.max * 100).toFixed(3) + '%'
+        })
+      }
+    },
+    getPhaseId (rings) { // 画阶段方法
+      rings = JSON.parse(JSON.stringify(rings))
+      if (rings.length === 0) {
+        // this.stageLineStatus = false
+        return
+      }
+      // this.stageLineStatus = true
+      if (this.controlData) {
+        if (this.localPatternList.length === 0) return
+        let idPattern = this.localPatternList.filter(item => item.id === this.controlData.patternid)
+        if (idPattern.length === 0) {
+          let mapAdd = rings.phase.map(item => {
+            return {
+              id: item.id,
+              value: item.split
+            }
+          })
+          let newRings = rings.rings.map(j => {
+            return j.sequence
+          })
+          let newList = newRings.map(item => {
+            let ret = []
+            item.map(i => {
+              const find = mapAdd.find(j => j.id === i)
+              if (find) {
+                ret.push(find)
+              }
+            })
+            return ret
+          })
+          let mapAdds = newList.map(item => {
+            return item.map(val => {
+              return val.value
+            })
+          })
+          let maxCycle = mapAdds.length > 0 ? mapAdds.map(item => {
+            return item.length > 0 ? item.reduce((a, b) => {
+              return a + b
+            }) : 0
+          }) : 0
+          this.max = Math.max(...maxCycle)// 每个环的周期最大值
+          this.getControl(newList)
+        } else {
+          let ringList = this.localPatternList.filter(item => {
+            return item.id === this.controlData.patternid
+          })[0].rings
+          if (!rings.rings) return
+          let filterPattern = []
+          for (let i of ringList) {
+            for (let j of this.controlData.rings) {
+              let filterSequence = i.filter(item => j.sequence.includes(item.id))
+              if (filterSequence.length > 0) {
+                filterPattern.push(filterSequence)
+              }
+            }
+          }
+          let mapAdd = filterPattern.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.getControl(filterPattern)
+        }
+      } else {
+        let mapAdd = rings.map(item => {
+          return item.map(val => {
+            return val.value
+          })
+        })
+        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.getControl(rings)
+      }
+      for (let i = this.numList.length - 1; i >= 1; i--) {
+        this.narr.push((Number.parseFloat(this.numList[i]) - Number.parseFloat(this.numList[i - 1])) / 2 + Number.parseFloat(this.numList[i - 1]) - 1 + '%')
+      }
+      this.narr = JSON.parse(JSON.stringify(this.narr.reverse()))
+    },
+    handleStages () {
+      this.numList = [0]
+      this.narr = []
+      if (this.patternStatusList.length === 0) {
+        // this.stageLineStatus = false
+        return
+      }
+      // this.stageLineStatus = true
+      let firstPatternStatusList = this.patternStatusList[0]
+      let stageLength = 0
+      let stageStatusLength = 0
+      for (let i = 0; i < firstPatternStatusList.length; i++) {
+        let tempLength = Number.parseFloat(firstPatternStatusList[i].greenWidth) + Number.parseFloat(firstPatternStatusList[i].redWidth) + Number.parseFloat(firstPatternStatusList[i].yellowWidth)
+        stageStatusLength = stageLength + tempLength / 2 - 1
+        stageLength = stageLength + tempLength
+        this.numList.push(stageLength + '%')
+        this.narr.push(stageStatusLength + '%')
+      }
+    }
+  },
+  computed: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main-statgestatus {
+  position: relative;
+  margin-bottom: 30px;
+}
+.stage-line {
+  position: relative;
+  top: 7px;
+  width: 100%;
+  height: 1px;
+  background-color: #FFFFFF;
+  z-index:1;
+}
+.stage-verticalline {
+  position: absolute;
+  float: left;
+  width: 1px;
+  height: 14px;
+  background-color: #FFFFFF;
+  z-index:2;
+}
+.stage-text {
+  position: absolute;
+  float: left;
+  width: 25px;
+  text-align: center;
+  background-color: #202940;
+  z-index:3;
+}
+.stage-span {
+  // position: relative;
+  bottom: 3px;
+  left: 5px;
+  width: 15px;
+  height: 14px;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 20px;
+  letter-spacing: 0px;
+  background-color: #202940;
+  color: #FFFFFF;
+}
+</style>