openatc-components 0.0.14 → 0.0.17

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

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

package/src/kisscomps/components/SchemeConfig/SchemeConfig.vue

@@ -48,16 +48,15 @@
                 :realtimeStatusModalvisible="realtimeStatusModalvisible"
                 :roadDirection="roadDirection"
                 @closePhaseBack="closePhaseBack"
-                @closePhaseControl= "closePhaseControl" />
+                @closePhaseControl="closePhaseControl" />
               <LockingPhaseControlModal
                 v-if="specialPage === 'lockingphase'"
-                :controlData="controlData"
-                :closePhaseRings="phaseRings"
-                :sidewalkPhaseData="sidewalkPhaseData"
-                :realtimeStatusModalvisible="realtimeStatusModalvisible"
                 :roadDirection="roadDirection"
+                :phaseList="phaseList"
+                :patternStatus="statusData"
+                :lockPhaseBtnName="lockPhaseBtnName"
                 @closePhaseBack="closePhaseBack"
-                @closePhaseControl= "closePhaseControl" />
+                @closePhaseControl="closePhaseControl" />
             </div>
           </transition>
 
@@ -104,6 +103,7 @@ import { GetAllFaultRange } from '../../../api/fault'
 import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
 import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
 import { setToken } from '../../../utils/auth.js'
+import RingDataModel from '../../../utils/RingDataModel.js'
 export default {
   name: 'scheme-config',
   components: {
@@ -143,6 +143,9 @@ export default {
       type: Boolean,
       default: true
     },
+    lockPhaseBtnName: {
+      type: String
+    },
     Token: {
       type: String,
       default: ''
@@ -315,23 +318,25 @@ export default {
       }, 30000)
     },
     getPedPhasePos () {
-      // 行人相位信息
-      this.sidewalkPhaseData = []
-      this.phaseList.forEach((ele, i) => {
-        if (ele.peddirection) {
-          ele.peddirection.forEach((dir, index) => {
-          // 行人相位
-            if (this.PhaseDataModel.getSidePos(dir)) {
-              this.sidewalkPhaseData.push({
-                key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
-                phaseid: ele.id, // 相位id，用于对应相位状态
-                id: dir,
-                name: this.PhaseDataModel.getSidePos(dir).name
-              })
-            }
-          })
-        }
-      })
+      let ringDataModel = new RingDataModel(this.statusData, this.phaseList)
+      this.sidewalkPhaseData = ringDataModel.getPedPhasePos()
+      // // 行人相位信息
+      // this.sidewalkPhaseData = []
+      // this.phaseList.forEach((ele, i) => {
+      //   if (ele.peddirection) {
+      //     ele.peddirection.forEach((dir, index) => {
+      //     // 行人相位
+      //       if (this.PhaseDataModel.getSidePos(dir)) {
+      //         this.sidewalkPhaseData.push({
+      //           key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
+      //           phaseid: ele.id, // 相位id，用于对应相位状态
+      //           id: dir,
+      //           name: this.PhaseDataModel.getSidePos(dir).name
+      //         })
+      //       }
+      //     })
+      //   }
+      // })
     },
     clearFaultInterval () {
       if (this.faultTimer !== null) {
@@ -415,8 +420,9 @@ export default {
           peddirection: peddirections
         }))
         stagesTemp.push(tempList)
-        this.stagesList = JSON.parse(JSON.stringify(stagesTemp))
       }
+      this.stagesList = JSON.parse(JSON.stringify(stagesTemp))
+      console.log('stagesList', this.stagesList)
     },
     lockScreen () {
       this.loading = this.$loading({
@@ -518,6 +524,9 @@ export default {
       })
       this.toPage = 1
     },
+    handleManualConfirm (manualInfo) {
+      this.$emit('handleManualConfirm', manualInfo)
+    },
     patternCommit (manualInfo) {
       let that = this
       let control = {}
@@ -537,6 +546,7 @@ export default {
       }
       if (!this.realtimeStatusModalvisible) {
         console.log(control)
+        this.$emit('patternCommit', control)
         return
       }
       this.lockScreen()
@@ -575,7 +585,7 @@ export default {
     getPhase () {
       let _this = this
       return new Promise(function (resolve, reject) {
-        uploadSingleTscParam('phase').then(data => {
+        uploadSingleTscParam('phase', _this.agentId).then(data => {
           let res = data.data
           if (!res.success) {
             if (res.code === '4003') {
@@ -626,15 +636,16 @@ export default {
       }
     },
     selectSpecialModel (id) {
+      let ringDataModel = new RingDataModel(this.statusData, this.phaseList)
       if (id === 23) {
         this.toPage = 3
         this.isClosePhase = true
-        this.initRingPhaseData()
+        this.phaseRings = ringDataModel.initRingPhaseData()
         this.specialPage = 'closephase'
       } else if (id === 22) {
         this.toPage = 3
         this.isClosePhase = true
-        this.initRingPhaseData()
+        this.phaseRings = ringDataModel.initRingPhaseData()
         this.specialPage = 'lockingphase'
       } else {
         this.isClosePhase = false
@@ -642,12 +653,17 @@ export default {
       }
     },
     closePhaseBack () {
+      // if (!this.realtimeStatusModalvisible) {
+      //   this.$emit('closePhaseBack')
+      //   return
+      // }
       this.toPage = 3
       this.isClosePhase = false
     },
     closePhaseControl (controldata) {
       if (!this.realtimeStatusModalvisible) {
         console.log(controldata)
+        this.$emit('closePhaseControl', controldata)
         return
       }
       this.lockScreen()
@@ -672,57 +688,57 @@ export default {
         console.log(error)
       })
     },
-    initRingPhaseData () {
-      // 环信息从单独上载相位信息里获取，以免相位锁定后，方案状态数据里没有rings，导致相位锁定控制列表无法显示
-      this.phaseRings = []
-      let map = {}
-      let dest = []
-      for (let i = 0; i < this.phaseList.length; i++) {
-        let ai = this.phaseList[i]
-        if (!map[ai.ring]) {
-          let addphse = this.addPhaseInfo(ai)
-          dest.push({
-            num: ai.ring,
-            phases: [{...ai, ...addphse}]
-          })
-          map[ai.ring] = ai
-        } else {
-          for (var j = 0; j < dest.length; j++) {
-            var dj = dest[j]
-            if (dj.num === ai.ring) {
-              let addphse = this.addPhaseInfo(ai)
-              dj.phases.push({...ai, ...addphse})
-              break
-            }
-          }
-        }
-      }
-      this.phaseRings = JSON.parse(JSON.stringify(dest))
-    },
-    addPhaseInfo (phase) {
-      let addphse = {}
-      addphse.name = this.$t('openatccomponents.overview.phase') + phase.id
-      addphse.desc = this.getPhaseDescription(phase.direction)
-      // 相位锁定选项默认都按照解锁状态显示
-      addphse.locktype = 0
-      addphse.close = 0
-      if (this.crossStatusData !== null && this.crossStatusData.phase) {
-        // 如果方案状态相位有close字段，这边就需要对应close状态进相位关断控制的选项里
-        let phaseStatus = this.crossStatusData.phase.filter(ele => ele.id === phase.id)[0]
-        addphse = {...addphse, ...phaseStatus}
-      }
-      return addphse
-    },
-    getPhaseDescription (phaseList) {
-      let list = []
-      for (let id of phaseList) {
-        let obj = {}
-        obj.id = id
-        obj.color = '#454545'
-        list.push(obj)
-      }
-      return list
-    },
+    // initRingPhaseData () {
+    //   // 环信息从单独上载相位信息里获取，以免相位锁定后，方案状态数据里没有rings，导致相位锁定控制列表无法显示
+    //   this.phaseRings = []
+    //   let map = {}
+    //   let dest = []
+    //   for (let i = 0; i < this.phaseList.length; i++) {
+    //     let ai = this.phaseList[i]
+    //     if (!map[ai.ring]) {
+    //       let addphse = this.addPhaseInfo(ai)
+    //       dest.push({
+    //         num: ai.ring,
+    //         phases: [{...ai, ...addphse}]
+    //       })
+    //       map[ai.ring] = ai
+    //     } else {
+    //       for (var j = 0; j < dest.length; j++) {
+    //         var dj = dest[j]
+    //         if (dj.num === ai.ring) {
+    //           let addphse = this.addPhaseInfo(ai)
+    //           dj.phases.push({...ai, ...addphse})
+    //           break
+    //         }
+    //       }
+    //     }
+    //   }
+    //   this.phaseRings = JSON.parse(JSON.stringify(dest))
+    // },
+    // addPhaseInfo (phase) {
+    //   let addphse = {}
+    //   addphse.name = this.$t('openatccomponents.overview.phase') + phase.id
+    //   addphse.desc = this.getPhaseDescription(phase.direction)
+    //   // 相位锁定选项默认都按照解锁状态显示
+    //   addphse.locktype = 0
+    //   addphse.close = 0
+    //   if (this.crossStatusData !== null && this.crossStatusData.phase) {
+    //     // 如果方案状态相位有close字段，这边就需要对应close状态进相位关断控制的选项里
+    //     let phaseStatus = this.crossStatusData.phase.filter(ele => ele.id === phase.id)[0]
+    //     addphse = {...addphse, ...phaseStatus}
+    //   }
+    //   return addphse
+    // },
+    // getPhaseDescription (phaseList) {
+    //   let list = []
+    //   for (let id of phaseList) {
+    //     let obj = {}
+    //     obj.id = id
+    //     obj.color = '#454545'
+    //     list.push(obj)
+    //   }
+    //   return list
+    // },
     getFaultById () {
       let param = {
         agentId: this.agentId,

package/src/kisscomps/components/SchemeConfig/lockingPhaselControlModal/index.vue

@@ -76,57 +76,29 @@
           </common-kanban>
         </div>
     </el-row>
-    <div class="footer" v-if="realtimeStatusModalvisible">
+    <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 class="footer" v-if="!realtimeStatusModalvisible">
-        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
-        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
+        <el-button type="primary" @click="handleLockPhase()">{{lockPhaseBtnName}}</el-button>
     </div>
   </div>
 </template>
 
 <script>
+import RingDataModel from '../../../../utils/RingDataModel.js'
 export default {
-  name: 'closePhaselControl',
+  name: 'LockPhaselControl',
   props: {
-    Visible: {
-      type: Boolean
-    },
-    controlData: {
-      type: Object
-    },
-    modelList: {
-      type: Array
-    },
-    stagesList: {
-      type: Array
-    },
-    currModel: {
-      type: Number
-    },
-    preselectModel: {
-      type: Number
-    },
-    currentStage: {
-      type: Number
-    },
-    preselectStages: {
-      type: Number
-    },
-    specialcontrolList: {
-      type: Array
-    },
-    closePhaseRings: {
+    phaseList: {
       type: Array
     },
-    realtimeStatusModalvisible: {
-      type: Boolean,
-      default: true
+    patternStatus: {
+      type: Object
     },
-    sidewalkPhaseData: {
-      type: Array
+    lockPhaseBtnName: {
+      type: String,
+      default () {
+        return this.$t('openatccomponents.overview.implement')
+      }
     },
     roadDirection: {
       type: String
@@ -134,7 +106,8 @@ export default {
   },
   data () {
     return {
-      visible: this.Visible,
+      closePhaseRings: [],
+      sidewalkPhaseData: [],
       manualInfo: {
         tempGreenflash: 6,
         tempDuration: 600, // 控制方式手动操作的情况下的持续时间的临时值。
@@ -153,11 +126,18 @@ export default {
       }]
     }
   },
+  mounted () {
+    if (this.patternStatus && this.phaseList && this.phaseList.length > 0) {
+      let ringDataModel = new RingDataModel(this.patternStatus, this.phaseList)
+      this.closePhaseRings = ringDataModel.initRingPhaseData()
+      this.sidewalkPhaseData = ringDataModel.getPedPhasePos()
+    }
+  },
   methods: {
     handleClose () {
       this.$emit('closePhaseBack')
     },
-    handleManualControl () {
+    handleLockPhase () {
       let submitdata = {
         control: 22,
         data: {}

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

@@ -0,0 +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="main-statgestatus">
+        <div class="stage-line" v-show="stageLineStatus"></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: 'stagestatus',
+  components: {},
+  data () {
+    return {
+      // stageList: [],
+      numList: [],
+      stateList: [],
+      narr: [],
+      max: '',
+      stageStatusList: [],
+      stageLineStatus: false
+    }
+  },
+  props: {
+    patternStatusList: {
+      type: Array
+    },
+    contrloType: {
+      type: Boolean
+    },
+    localPatternList: {
+      type: Array
+    },
+    controlData: {
+      type: Object
+    }
+  },
+  watch: {
+    controlData: {
+      handler: function (val, oldVal) {
+        // this.handleStages() // 计算屏障高度
+        if (this.contrloType) {
+          this.getStageLine()
+        } else {
+          this.getPhaseId(this.controlData)
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    patternStatusList: {
+      handler: function (val, oldVal) {
+        // this.handleStages() // 计算屏障高度
+        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.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 () {
+      for (let i = 0; i < this.localPatternList.length; i++) {
+        if (this.controlData.patternid === this.localPatternList[i].id) {
+          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
+              } else {
+                sum = sum + ring[n].value
+              }
+              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 (!rings.rings) return
+        let mapAdd = rings.phase.map(item => {
+          return {
+            id: item.id,
+            split: 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.split
+          })
+        })
+        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 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>

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

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

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

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