openatc-components 0.1.102 → 0.1.104

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

@@ -0,0 +1,258 @@
+<template>
+    <div class="tentativeplan-control">
+      <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.azimuthlocking')}}</div>
+      <el-row>
+        <el-col :span="12">
+           <el-form
+             ref="manual"
+             label-position="left"
+             :model="manualInfo"
+             label-width="100px">
+             <el-form-item
+                  :label="$t('openatccomponents.overview.duration') + ':'"
+                  prop="count">
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.duration" size="mini"></el-input-number>
+              </el-form-item>
+              <el-form-item
+                  :label="$t('openatccomponents.overview.yellowflash') + ':'"
+                  prop="intersection">
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.yellowflash" size="mini"></el-input-number>
+              </el-form-item>
+              <el-form-item
+                  :label="$t('openatccomponents.overview.mingreen') + ':'"
+                  prop="intersection">
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.mingreen" size="mini"></el-input-number>
+              </el-form-item>
+             </el-form>
+        </el-col>
+        <el-col :span="12">
+           <el-form
+             ref="manual"
+             label-position="left"
+             :model="manualInfo"
+             label-width="100px">
+             <el-form-item
+                  :label="$t('openatccomponents.overview.greenclear') + ':'"
+                  prop="count">
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.greenclear" size="mini"></el-input-number>
+              </el-form-item>
+              <el-form-item
+                  :label="$t('openatccomponents.overview.allred') + ':'"
+                  prop="intersection">
+                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.allred" size="mini"></el-input-number>
+              </el-form-item>
+             </el-form>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="5">
+            <span class="model-label-title">{{$t('openatccomponents.overview.indirection')}}:</span>
+        </el-col>
+        <el-col :span="19">
+            <div class="control-model" v-for="(item, index) in imgs" :key="index">
+                <div :class="{'single-model-select':spanIndex.indexOf(index)>-1}" class="single-model"  @click="boxShow(index,item)">
+                    <div v-if="item.class" :class="item.class" style="border:0px"></div>
+                    <div class="single-model-name">{{item.name}}</div>
+                </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="position:relative;"  class="single-model">
+                <xdr-dir-selector Width="40PX" Height="40PX" :Data="showStyle" :showlist="item"></xdr-dir-selector>
+                <div style="height:65px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
+                    <div class="current-stage-num" style="width:20%;">{{index + 1}}</div>
+                    <div style="width:70%;">
+                    <i class="iconfont icon-feijidongche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
+                    <i class="iconfont icon-lukouzhilu" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
+                    <i class="iconfont icon-BRT" 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="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
+                    </div>
+                    <i class="iconfont icon-gongjiaoche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
+                    <i class="iconfont icon-youguidianche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
+                    </div>
+                </div>
+                </div>
+            </div>
+        </div>
+        <!-- </div> -->
+        </el-col>
+      </el-row>
+      <!-- <div class="model-label" style="width: auto;overflow: hidden;">
+        <span class="intitle">{{$t('openatccomponents.overview.indirection')}}:</span>
+        <div class="control-model" v-for="(item, index) in imgs" :key="index">
+            <div :class="{'single-model-select':spanIndex.indexOf(index)>-1}" class="single-model"  @click="boxShow(index,item)">
+                <div v-if="item.class" :class="item.class" style="border:0px"></div>
+                <div class="single-model-name">{{item.name}}</div>
+            </div>
+        </div>
+      </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.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>
+      </div>
+    </div>
+  </template>
+
+<script>
+import { getPhase } from './utils'
+// import { getIframdevid } from '../../../../utils/auth'
+import { getlockPhase, lockPhase } from '../../../../api/control'
+import Stages from '../../Stages/index'
+import RingDataModel from '../../../../utils/RingDataModel.js'
+import { getMessageByCode } from '../../../../utils/responseMessage'
+export default {
+  name: 'tentativeplancontrol',
+  components: {
+    Stages
+  },
+  props: {
+    realtimeStatusModalvisible: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    sidewalkPhaseData: {
+      handler: function (val, oldVal) {
+        this.sidewalkPhaseData = val
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  computed: {
+    tankuangSize () {
+      let widths = ((100 / 2) - 2) + '%'
+      let styleObj = {
+        width: widths
+      }
+      return styleObj
+    },
+    imgs () {
+      let arrays = []
+      let images = getPhase()
+      images.forEach(v => {
+        let obj = Object.assign({}, v)
+        obj.name = this.$t(obj.name)
+        arrays.push(obj)
+      })
+      return arrays
+    }
+  },
+  data () {
+    return {
+      showStyle: {
+        top: '5PX',
+        left: '14px'
+      },
+      sidewalkPhaseData: [],
+      currentName: '',
+      lockList: [],
+      patternCycleEqual: true,
+      spanIndex: [],
+      directions: [],
+      manualInfo: {
+        allred: 2,
+        greenclear: 6,
+        mingreen: 15,
+        duration: 600,
+        yellowflash: 3
+      }
+    }
+  },
+  created () {
+  },
+  methods: {
+    checkId (val) {
+      if (val.id === 1) {
+        return 2
+      } else if (val.id === 5) {
+        return 1
+      } else if (val.id === 13) {
+        return 4
+      } else if (val.id === 9) {
+        return 3
+      } else if (val.id === 17) {
+        return 8
+      } else if (val.id === 21) {
+        return 5
+      } else if (val.id === 25) {
+        return 7
+      } else if (val.id === 29) {
+        return 6
+      }
+    },
+    getLockPhase (val) {
+      this.directions = [this.checkId(val)]
+      let param = {
+        'agentid': 'config_test',
+        'direction': this.directions
+      }
+      getlockPhase(param).then(res => {
+        if (res.data.success !== true) {
+          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
+          return
+        }
+        this.lockList = res.data.data
+        let ringDataModel = new RingDataModel({}, res.data.data)
+        this.sidewalkPhaseData = ringDataModel.getlockData()
+      })
+    },
+    boxShow (index, data) {
+      this.spanIndex = []
+      let arrIndex = this.spanIndex.indexOf(index)
+      if (arrIndex > -1) {
+        this.spanIndex.splice(arrIndex, 1)
+      } else {
+        this.spanIndex.push(index)
+      }
+      this.getLockPhase(data)
+      this.currentName = data.name
+    },
+    handleClose () {
+      this.$emit('closePhaseBack')
+    },
+    handleManualControl () {
+      if (this.directions.length === 0) {
+        this.$message.error(this.$t('openatccomponents.overview.directionnull'))
+        return
+      }
+      let submitdata = {
+        agentid: 'config_test',
+        direction: this.directions,
+        greenflash: this.manualInfo.greenclear,
+        duration: this.manualInfo.duration,
+        yellow: this.manualInfo.yellowflash,
+        redclear: this.manualInfo.allred,
+        mingreen: this.manualInfo.mingreen
+
+      }
+      lockPhase(submitdata).then(res => {
+        if (res.data.success !== true) {
+          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
+        }
+        this.$alert(this.$t('openatccomponents.common.download'), { type: 'success' })
+      })
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+.single-model-select {
+    margin-right: 10px;
+    text-align: center;
+    cursor:pointer;
+    width: 70px;
+    height: 65px;
+    background-color: #a2cfff;
+    border-radius: 6px;
+    // border: solid 1PX #409eff;
+  }
+  </style>

package/src/kisscomps/components/SchemeConfig/azimuthlocking/utils.js

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ **/
+import store from '../../../../store/index'
+let images = [
+  {
+    id: 1,
+    // name: 'East-Straight',
+    name: 'openatccomponents.overview.es',
+    // img: require('./images/East-Straight.svg'),
+    class: 'iconfont icon-dongzhihang'
+  },
+  {
+    id: 5,
+    // name: 'West-Straight',
+    name: 'openatccomponents.overview.ws',
+    // img: require('./images/West-Straight.svg'),
+    class: 'iconfont icon-xizhihang'
+  },
+  {
+    id: 13,
+    // name: 'South-Straight',
+    name: 'openatccomponents.overview.ss',
+    // img: require('./images/South-Straight.svg'),
+    class: 'iconfont icon-nanzhihang'
+  },
+  {
+    id: 9,
+    // name: 'North-Straight',
+    name: 'openatccomponents.overview.ns',
+    // img: require('./images/North-Straight.svg'),
+    class: 'iconfont icon-beizhihang'
+  },
+  {
+    id: 17,
+    // name: 'South-Back',
+    name: 'openatccomponents.overview.ses',
+    // img: require('./images/South-Back.svg'),
+    class: 'iconfont icon-dongnanzhihang'
+  },
+  {
+    id: 21,
+    // name: 'South-Back',
+    name: 'openatccomponents.overview.sws',
+    // img: require('./images/South-Back.svg'),
+    class: 'iconfont icon-xinanzhihang'
+  },
+  {
+    id: 25,
+    // name: 'South-Back',
+    name: 'openatccomponents.overview.nes',
+    // img: require('./images/South-Back.svg'),
+    class: 'iconfont icon-dongbeizhihang'
+  },
+  {
+    id: 29,
+    // name: 'South-Back',
+    name: 'openatccomponents.overview.nws',
+    // img: require('./images/South-Back.svg'),
+    class: 'iconfont icon-xibeizhihang'
+  }
+]
+const getPhase = () => {
+  if (store.getters.roadDirection === 'left') {
+    // 左行下，掉头图标替换
+    images.forEach((img) => {
+      if (img.id === 4) {
+        img.class = 'iconfont icon-dongtiaotou-yinni'
+      }
+      if (img.id === 8) {
+        img.class = 'iconfont icon-xitiaotou-yinni'
+      }
+      if (img.id === 12) {
+        img.class = 'iconfont icon-beitiaotou-yinni'
+      }
+      if (img.id === 16) {
+        img.class = 'iconfont icon-nantiaotou-yinni'
+      }
+    })
+  }
+  return images
+}
+
+export {getPhase}

package/src/kisscomps/components/Stages/index.vue

@@ -125,6 +125,8 @@ export default {
           this.currentStage = this.crossStatusData.current_stage
         }
       }
+      console.log(list,'list')
+      console.log(this.phaseList,'this.phaseList')
       return list
     },
     stageStyle () {

package/src/utils/RingDataModel.js

@@ -145,9 +145,45 @@ export default class RingDataModel {
     this.busPhaseData = result
     return this.busPhaseData
   }
-
+  getlockData () {
+    let stagesTemp = []
+    let directionList = []
+    let sidewalkPhaseData = this.getPedPhasePos()
+    for (let phase of this.phaseList) {
+      let tempList = []
+      directionList = phase.direction
+      let peddirections = []
+      if (directionList) {
+        for (let walk of sidewalkPhaseData) {
+          for (let ped of phase.peddirection) {
+          // if (stg === walk.phaseid) {
+            let obj = {}
+            obj.name = walk.name
+            obj.id = walk.id
+            if (ped === walk.id) {
+              peddirections.push(obj)
+              peddirections = Array.from(new Set(peddirections))
+            }
+          // }
+          }
+        }
+      } else {
+        peddirections = []
+      }
+      tempList = directionList.map(dir => ({
+        id: dir,
+        color: '#606266',
+        controltype: phase.controltype,
+        peddirection: peddirections,
+        sidewalkPhaseData: sidewalkPhaseData
+      }))
+      stagesTemp.push(tempList)
+    }
+    return stagesTemp
+  }
   getStageData () {
     let data = this.crossStatusData
+    console.log(data, 'data')
     let stagesTemp = []
     let busPhaseData = this.getBusPos()
     let sidewalkPhaseData = this.getPedPhasePos()
@@ -210,7 +246,6 @@ export default class RingDataModel {
       stagesTemp.push(tempList)
     }
     this.stagesList = JSON.parse(JSON.stringify(stagesTemp))
-    // console.log('this.stagesList', this.stagesList)
     return this.stagesList
   }
 }

package/src/views/intersection.vue

@@ -94,7 +94,7 @@ export default {
     return {
       roadDirection: 'right',
       // reqUrl: 'http://192.168.13.103:10003/openatc',
-      agentId: '10002-739',
+      agentId: '12007_390',
       // agentId: '0351-01',
       reqUrl: 'http://192.168.13.103:10003/openatc',
       Token: 'eyJraWQiOiIxNjcwNTUzNTE1MDc3IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTc1Njk1MzUxNSwiaWF0IjoxNjcwNTUzNTE1fQ.oR9e2Fn5mVmJ4CjZV6zUOdq_23Y84RkuyhK_WppsD_o',

package/static/apiconfig.json

@@ -104,6 +104,16 @@
   "url": "/devs",
   "method": "get"
 },
+{
+  "key": "getlockPhase",
+  "url": "/devs/direction/phases",
+  "method": "post"
+},
+{
+  "key": "lockPhase",
+  "url": "/devs/direction/lockPhases",
+  "method": "post"
+},
 {
   "key": "gettimeplan",
   "url": "/fixedtimeplan",

package/static/styles/schemeconfig.scss

@@ -62,6 +62,13 @@
     line-height: 28PX;
     padding-right: 12PX;
   }
+  .model-label-title {
+    font-size: 14PX;
+    font-weight: 400;
+    line-height: 28PX;
+    color: $--color-text-secondary;
+    padding-right: 12PX;
+  }
   .single-model {
     margin-right: 10PX;
     text-align: center;
@@ -335,6 +342,9 @@
     margin: 10px auto;
     color: $--color-text-primary;
   }
+  .optimizetype {
+    color: $--color-text-primary;
+  }
   .stage-item {
     cursor: pointer;
     width: 100%;