openatc-components 0.2.89 → 0.3.1

package/package/kisscomps/components/PhasePedSelect/index.js

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

package/package/kisscomps/components/PhasePedSelect/index.vue

@@ -0,0 +1,192 @@
+/**
+ * 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="PhasePedSelect">
+    <div class="item">
+      <div class="name">{{$t('openatccomponents.channel.phaseVehicle')}}：</div>
+      <div class="content">
+        <template v-for="(ring, index) in phaseDirection">
+          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)" :style="getStyle(ring)">
+            <xdrdirselector
+                  Width="75PX"
+                  Height="75PX"
+                  Widths="95PX"
+                  Heights="65PX"
+                  :showlist="ring.desc"
+                  :roadDirection="roadDirection"></xdrdirselector>
+            <div class="num">{{ring.id}}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="item">
+      <div class="name">{{$t('openatccomponents.channel.phasePedestrian')}}：</div>
+      <div class="content">
+        <template v-for="(ring, index) in pedDirection">
+          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)">
+            <xdrdirselector
+                  Width="75PX"
+                  Height="75PX"
+                  Widths="65PX"
+                  Heights="65PX"
+                  :showlist="ring.desc"
+                  :roadDirection="roadDirection"></xdrdirselector>
+            <div class="num">{{ring.id}}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import xdrdirselector from '../XRDDirSelector/XRDDirSelector.vue'
+import { getTheme } from '../../../utils/auth'
+
+export default {
+  name: 'PhasePedSelect',
+  components: {
+    xdrdirselector
+    // patternwalksvg
+  },
+  props: {
+    closePhaseRings: {
+      type: Array,
+      default: () => []
+    },
+    sidewalkPhaseData: {
+      type: Array,
+      default: () => []
+    },
+    headerText: {
+      type: String
+    },
+    list: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    roadDirection: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
+      backgroundBase: getTheme() === 'light' ? '#606266' : '#fff',
+      backgroundSelected: getTheme() === 'light' ? '#606266' : '#fff',
+      phaseList: [],
+      pedPhaseList: [],
+      phaseDirection: [],
+      pedDirection: [],
+      params: {
+        'phases':
+          [
+            {
+              'id': 1,
+              'type': 0
+            },
+            {
+              'id': 2,
+              'type': 2
+            },
+            {
+              'id': 3,
+              'type': 3
+            }
+          ]
+      }
+    }
+  },
+  watch: {
+    closePhaseRings (val) {
+      console.log('closePhaseRings', val)
+      console.log('sidewalkPhaseData', this.sidewalkPhaseData)
+      let tempPhaseList = []
+      for (let ring of this.closePhaseRings) {
+        let phases = ring.phases
+        tempPhaseList = [...tempPhaseList, ...phases]
+      }
+      tempPhaseList = tempPhaseList.sort((a, b) => a.id - b.id)
+      let tempPhaseListCopy = JSON.parse(JSON.stringify(tempPhaseList))
+      tempPhaseList = tempPhaseList.map(item => {
+        item.selected = false
+        item.desc.map(des => {
+          des.color = this.themeColor
+          des.peddirection = []
+          return des
+        })
+        return item
+      })
+      this.phaseDirection = JSON.parse(JSON.stringify(tempPhaseList))
+      let tempPedList = tempPhaseListCopy.filter(item => item.peddirection && item.peddirection.length > 0)
+      console.log('tempPhaseList', tempPedList)
+      tempPedList = tempPedList.map(item => {
+        item.selected = false
+        item.desc.map(des => {
+          des.id = 0
+          des.color = this.themeColor
+          des.peddirection = des.peddirection.map(dir => {
+            dir.color = this.themeColor
+            return dir
+          })
+          return des
+        })
+        return item
+      })
+      this.pedDirection = JSON.parse(JSON.stringify(tempPedList))
+    }
+  },
+  methods: {
+    onCardClick (item, index) {
+      item.selected = !item.selected
+      let res = this.getParams()
+      this.$emit('onPhasePedSelectChange', res)
+    },
+    getParams () {
+      console.log('phaseDirection', this.phaseDirection)
+      console.log('pedDirection', this.pedDirection)
+      console.log('closePhaseRings', this.closePhaseRings)
+      this.params.phases = []
+      for (let i = 0; i < this.phaseDirection.length; i++) {
+        let type = 0
+        let phase = this.phaseDirection[i]
+        let id = phase.id
+        let isPhaseSelected = phase.selected
+        if (isPhaseSelected) {
+          type = 2
+        }
+        let ped = this.pedDirection.find(item => item.id === id)
+        if (ped) {
+          let isPedSelected = ped.selected
+          if (isPhaseSelected && isPedSelected) {
+            type = 1
+          } else if (isPhaseSelected && !isPedSelected) {
+            type = 2
+          } else if (!isPhaseSelected && isPedSelected) {
+            type = 3
+          } else if (!isPhaseSelected && !isPedSelected) {
+            type = 0
+          }
+        }
+        let phaseItem = {
+          id: id,
+          type: type
+        }
+        this.params.phases.push(phaseItem)
+      }
+      let res = this.params.phases
+      return res
+    }
+  }
+}
+</script>

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

@@ -56,23 +56,23 @@
                 </div>
             </div>
             <div v-if="currentName !==''" style="width: 100%; height: auto;overflow: hidden;">
-            <div style="margin-top:20px" class="model-label-title">{{currentName}}{{$t('openatccomponents.overview.currentphase')}}:</div>
-            <div class="control-model" v-for="(item, index) in sidewalkPhaseData" :key="index">
+              <div style="margin-top:20px" class="model-label-title">{{currentName}}{{$t('openatccomponents.overview.currentphase')}}:</div>
+              <div class="control-model" v-for="(item, index) in sidewalkPhaseData" :key="index">
                 <div style="position:relative;"  class="single-model" :style="{'backgroundColor': item[0].bgcolor}">
-                <xdr-dir-selector Width="75PX" Height="75PX"  Widths="65PX" Heights="65PX" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
-                <div style="height:80px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
-                    <div class="current-stage-num" :style="{color: themeColor}" style="width:20%;">{{index + 1}}</div>
-                    <div style="width:70%;">
-                    <i class="iconfont icon-feijidongche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
-                    <i class="iconfont icon-lukouzhilu" :style="{color: themeColor2}" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
-                    <i class="iconfont icon-BRT" :style="{color: themeColor2}" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
-                    <div style="transform:scale(0.65);margin-left:10PX">
-                        <i class="iconfont icon-xuxiangwei-xin" :style="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
-                    </div>
-                    <i class="iconfont icon-gongjiaoche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
-                    <i class="iconfont icon-youguidianche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
-                    </div>
-                </div>
+                  <xdr-dir-selector Width="75PX" Height="75PX"  Widths="65PX" Heights="65PX" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
+                  <div style="height:80px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
+                      <div class="current-stage-num" :style="{color: themeColor}" style="width:20%;">{{index + 1}}</div>
+                      <div style="width:70%;">
+                        <i class="iconfont icon-feijidongche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
+                        <i class="iconfont icon-lukouzhilu" :style="{color: themeColor2}" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
+                        <i class="iconfont icon-BRT" :style="{color: themeColor2}" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
+                        <div style="transform:scale(0.65);margin-left:10PX">
+                            <i class="iconfont icon-xuxiangwei-xin" :style="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
+                        </div>
+                        <i class="iconfont icon-gongjiaoche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
+                        <i class="iconfont icon-youguidianche" :style="{color: themeColor}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
+                      </div>
+                  </div>
                 </div>
             </div>
         </div>

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

@@ -60,15 +60,13 @@
      </el-col>
     </el-row>
     <el-row>
-        <div class="model-label">{{$t('openatccomponents.overview.mode')}}:</div>
+        <!-- <div class="model-label">{{$t('openatccomponents.overview.mode')}}:</div>
         <div style="width: 100%; overflow: hidden;margin-top: 20px;">
           <common-kanban
             v-for="ring in closePhaseRings"
             :key="ring.num" class="closephasekanban"
             :list="ring.phases"
             :header-text="$t('openatccomponents.pattern.ring') + ring.num"
-            :Draggable="false"
-            :sidewalkPhaseData="sidewalkPhaseData"
             :roadDirection="roadDirection"
             @handleSort="handleSort">
               <template v-slot:kanbantitle>
@@ -85,7 +83,12 @@
                 </el-select>
             </template>
           </common-kanban>
-        </div>
+        </div> -->
+      <PhasePedSelect :closePhaseRings="closePhaseRings"
+                      :sidewalkPhaseData="sidewalkPhaseData"
+                      :roadDirection="roadDirection"
+                      @onPhasePedSelectChange="onPhasePedSelectChange"
+                      ></PhasePedSelect>
     </el-row>
     <div class="footer">
         <el-button v-if="isShowBack" @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
@@ -98,9 +101,13 @@
 <script>
 import RingDataModel from '../../../../utils/RingDataModel.js'
 import { hasPermission } from '../../../../utils/auth'
+import PhasePedSelect from '../../PhasePedSelect/index'
 
 export default {
   name: 'LockPhaselControl',
+  components: {
+    PhasePedSelect
+  },
   props: {
     phaseList: {
       type: Array
@@ -124,6 +131,7 @@ export default {
   },
   data () {
     return {
+      params: {},
       closePhaseRings: [],
       sidewalkPhaseData: [],
       manualInfo: {
@@ -152,6 +160,9 @@ export default {
     }
   },
   methods: {
+    onPhasePedSelectChange (params) {
+      this.phases = params
+    },
     handleClose () {
       this.$emit('closePhaseBack')
     },
@@ -175,7 +186,7 @@ export default {
       if (this.manualInfo.tempMingreen !== undefined) {
         submitdata.data.mingreen = Number(this.manualInfo.tempMingreen)
       }
-      submitdata.data.phases = this.handleSubmitPhaseLocking()
+      submitdata.data.phases = this.phases
       this.$emit('closePhaseControl', submitdata)
     },
     handleSubmitPhaseLocking () {

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

@@ -467,6 +467,7 @@ export default {
           green: 25,
           yellow: 3,
           red: 2,
+          stageNo: 0,
           phases: [],
           stageSplit: 30
         })
@@ -556,6 +557,7 @@ export default {
           res.yellow = rings.yellow ? rings.yellow : rings.yellow === 0 ? 0 : 3
           res.red = rings.red ? rings.red : rings.red === 0 ? 0 : 2
           res.phases = rings.phases ? rings.phases : stageArr
+          res.stageNo = rings.stageNo ? rings.stageNo : 0
           // res.stageSplit = rings.split ? rings.split : 30
           if (rings.split) {
             res.stageSplit = rings.split

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

@@ -96,6 +96,21 @@
             </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')}}

package/package/kisscomps/components/XRDDirSelector/XRDDirSelector.vue

@@ -10,7 +10,7 @@
  * See the Mulan PSL v2 for more details.
  **/
 <template>
-<div :style="{position: 'reletive'}">
+<div :style="{position: 'reletive', width: '100%', height: '100%'}">
   <div :style="{position: 'absolute', left: Data?Data.left:0, top: Data?Data.top:0}">
     <svg
     version="1.1"