openatc-components 0.2.89 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openatc-components",
-  "version": "0.2.89",
+  "version": "0.3.1",
   "description": "A Vue.js project",
   "author": "openatc developer",
   "private": false,

package/src/i18n/language/en.js

@@ -426,6 +426,7 @@ const en = {
       'mostdata': 'There are at most 16 data !'
     },
     'pattern': {
+      'stageno': 'Stage number',
       'property': 'Property',
       'desc': 'Description',
       'offset': 'Offset',

package/src/i18n/language/zh.js

@@ -425,6 +425,7 @@ const zh = {
     },
     'pattern': {
       'property': '属性',
+      'stageno': '阶段号',
       'desc': '描述',
       'offset': '相位差',
       'cycle': '周期',

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

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

package/src/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/src/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/src/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/src/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/src/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/src/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"

package/src/views/schemeconfig.vue

@@ -22,6 +22,7 @@
       append-to-body>
       <scheme-config
             ref="rightpanel"
+            :fromPage="fromPage"
             :agentId="agentId"
             :statusData="crossStatusData"
             :phaseList="phaseList2"/>
@@ -51,13 +52,14 @@ export default {
   },
   data () {
     return {
+      fromPage: 2,
       timer: 0,
       phaseList2: [],
       phaseList: [],
       showWalk: [ 1, 2 ],
       sidewalkPhaseData: [{key: 'pedphase1653873194007699', phaseid: 1, id: 1, name: '东人行横道', isshow: false}],
       lockPhaseBtnName: this.$t('openatccomponents.overview.comfirm'),
-      agentId: 'cslsnl',
+      agentId: 'gjnlahql',
       Token: 'eyJraWQiOiIxNzAxODMyOTQ3MTUwIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJxeXl0aCIsImV4cCI6MTc2OTc4ODgwMCwiaWF0IjoxNzAxMzYwMDAwfQ.RIQpNEkJibL-RYllirDeNLi8G9-t8PecM_m7KlZNQXg',
       Token103: 'eyJraWQiOiIxNjcwMzc0ODA4MTcyIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTc1Njc3NDgwOCwiaWF0IjoxNjcwMzc0ODA4fQ.xsRoye_tk_Xf60w5Mpigm8vrPgQJCLN-W_IW4U7dafA',
       boxVisible: true,

package/static/styles/PhasePedSelect.scss

@@ -1,169 +1,68 @@
-// 公共面板组件通用样式
-.common-board-column {
-  min-width: 260PX;
-  max-width: 380PX;
-  min-height: 100PX;
+// phasepedselect
+.PhasePedSelect {
+  width: 100%;
   height: auto;
-  overflow: hidden;
-  // background: #f0f0f0;
-  border-radius: 3PX;
-  border: 1PX solid $--border-color-base;
-  // min-width: 180PX;
-  // min-height: 100PX;
-  // max-width: 350PX;
-  // height: auto;
-  // overflow: hidden;
-  // background: #f0f0f0;
-  // border: 1PX solid $--border-color-base;
-.common-phase-description {
-  position: relative;
-  background: rgb(217, 236, 255);
-  width: 42PX;
-  height: 40PX;
-}
-
-// .board-column-header {
-//   height: 50PX;
-//   line-height: 50PX;
-//   overflow: hidden;
-//   padding: 0 10PX;
-//   text-align: center;
-//   background: $--color-primary;
-//   color: #FFFFFF;
-//   border-radius: 3PX 3PX 0 0;
-// }
-// .board-table-header {
-//   height: 30PX;
-//   line-height: 30PX;
-//   overflow: hidden;
-//   text-align: center;
-//   padding: 0 6PX;
-//   margin-bottom: -20PX;
-//   font-size: 12PX;
-//   color: $--color-info;
-//   background-color: $--color-black;
-// }
-.common-board-column-header {
-  line-height: 40PX;
-  overflow: hidden;
-  text-align: center;
-  background: $--color-primary;
-  color: #FFFFFF;
-  height: 40PX;
-}
-.common-board-table-header {
-  height: 30PX;
-  line-height: 30PX;
-  overflow: hidden;
-  text-align: center;
-  padding: 0 6PX;
-  margin-bottom: -10PX;
-  font-size: 12PX;
-  color: $--color-info;
-  background-color: $--color-black;
-  // height: 42PX;
-  // overflow: hidden;
-  // text-align: center;
-  // margin-bottom: -12PX;
-  // font-size: 14PX;
-  // color: $--color-info;
-  // background-color: $--color-black;
-  // border: 20PX solid transparent;
-  // border-bottom-width: 0PX;
-  .common-titlecolumn {
-    float: left;
-    text-align: left;
-  }
-  .phaseId{
-    width: 20px;
-  }
-  .phase {
-    text-align: center;
-    width: 50PX;
-  }
-  .mode {
-    text-align: center;
-    width: calc(100% - 80PX)
-  }
-}
-
-.common-board-column-content {
-  height: auto;
-  overflow: hidden;
-  border: 10PX solid transparent;
-  min-height: 60PX;
+  // margin-top: 10PX;
+  // border: 1PX solid red;
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  align-items: center;
-  background-color: $--color-black;
-
-  // .board-item {
-    // cursor: pointer;
-    // width: 100%;
-    // height: 48PX;
-    // margin: 5PX 0;
-    // // background-color: rgba(31,46,46,0.9);
-    // text-align: left;
-    // line-height: 40PX;
-    // padding: 1PX 1PX;
-    // box-sizing: border-box;
-  // }
-  // height: auto;
-  // overflow: hidden;
-  // border: 10PX solid transparent;
-  // min-height: 60PX;
-  // display: flex;
-  // justify-content: flex-start;
-  // flex-direction: column;
-  // align-items: center;
-  // background-color: $--color-black;
-  // border-width: 20PX;
-  // border-top-width: 16PX;
-  // border-bottom-width: 15PX;
-  .common-contentcolumn {
-    float: left;
-  }
-  .index{
-    height: 40px;
-    line-height: 40px;
-    width: 20px;
-  }
-  .phase {
-    width: 40PX;
-  }
-  .mode {
-    margin-left: 10PX;
-    width: calc(100% - 80PX);
-  }
-
-  .common-board-item {
-    cursor: pointer;
+  justify-content: flex-start;
+  align-items: flex-start;
+  .item {
     width: 100%;
-    height: 48PX;
-    // margin: 5PX 0;
-    // background-color: rgba(31,46,46,0.9);
-    text-align: left;
-    line-height: 37PX;
-    padding: 1PX 1PX;
-    box-sizing: border-box;
-    // cursor: pointer;
-    // width: 100%;
-    // height: 40PX;
-    // margin-top: 10PX;
-    // text-align: left;
-    // box-sizing: border-box;
-    .index{
-      color: $--color-text-primary;
+    height: 50%;
+    // border: 1PX solid green;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .name {
+      width: 100%;
+      height: 20%;
+      // border: 1PX solid green;
+      display: flex;
+      align-items: center;
       font-size: 14PX;
+      color: $--color-text-secondary;
+      padding: 10PX 0;
     }
-    .el-input {
+    .content {
       width: 100%;
-      .el-input__inner {
-        height: 40PX;
-        line-height: 40PX;
+      height: 80%;
+      // border: 1PX solid green;
+      display: flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      gap: 10PX;
+      cursor: pointer;
+      .card {
+        width: 70PX;
+        height: 80PX;
+        // border: 1PX solid red;
+        position: relative;
+        // background-color: #243d59;
+        background-color: $--color-black;
+        border-radius: 5PX;
+        .num {
+          position: absolute;
+          left: 5PX;
+          bottom: 5PX;
+        }
+      }
+      .card-selected {
+        width: 70PX;
+        height: 80PX;
+        // border: 1PX solid red;
+        position: relative;
+        // background-color: #0082ac;
+        background-color: $--color-primary;
+        border-radius: 5PX;
+        .num {
+          position: absolute;
+          left: 5PX;
+          bottom: 5PX;
+        }
       }
     }
   }
 }
-}

package/static/styles/common.scss

@@ -7,6 +7,7 @@
 @import './uiComponents.scss';
 @import './xiaokanban.scss';
 @import './patternConfig.scss';
+@import './PhasePedSelect.scss';
 
  // 全局滚动条样式
  ::-webkit-scrollbar {

package/static/styles/dark/theme/element-dark.scss

@@ -14,6 +14,8 @@
 $--color-primary: #299BCC;
 $--color-white: #091F40;
 $--color-black: #243D59;
+// $--card-background-base: #243d59;
+// $--card-background-selected: #0082ac;
 $--background-color-base: #021026;
 $--color-text-primary: #FFFFFF;
 $--color-text-regular: #FFFFFF;

package/static/styles/light/theme/element-light.scss

@@ -12,6 +12,8 @@
 /* 改变主题色变量 */
 $--color-black: #f7f8fa;
 $--color-primary: #299BCC;
+// $--card-background-base: #edf6ff;
+// $--card-background-selected: #c1e0ff;
 // $--color-white: #202940;
 // $--color-black: #f7f8fa;
 // $--background-color-base: #191F34;