openatc-components 0.0.102 → 0.0.105

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

@@ -0,0 +1,190 @@
+<template>
+  <div class="priority-control">
+    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.prioritycontrol')}}</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.delay') + ':'"
+                prop="intersection">
+                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.delay" size="mini"></el-input-number>
+               <!-- <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+            <el-form-item
+                :label="$t('openatccomponents.overview.priorityType') + ':'"
+                prop="count">
+                <el-select v-model="manualInfo.type" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
+                  <el-option
+                    v-for="item in typeSelect"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </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.duration') + ':'"
+                prop="intersection">
+                <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-input v-model="manualInfo.duration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+            <el-form-item
+                :label="$t('openatccomponents.overview.priorityPhase') + ':'"
+                prop="count">
+                <el-select v-model="manualInfo.phase" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
+                  <el-option
+                    v-for="(item, index) in phaseSelect"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value">
+                    <div class="single-model">
+                        <xdrdirselector Width="40px" Height="40px" :showlist="item.item"></xdrdirselector>
+                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
+                    </div>
+                  </el-option>
+                </el-select>
+               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+           </el-form>
+      </el-col>
+    </el-row>
+    <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.level') + ':'"
+                prop="count">
+                <el-select v-model="manualInfo.level" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
+                  <el-option
+                    v-for="item in levelOption"
+                    :key="item.value"
+                    :label="$t('openatccomponents.overview.levelOption' + item.value)"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
+            </el-form-item>
+           </el-form>
+      </el-col>
+    </el-row>
+    <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>
+</template>
+
+<script>
+import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
+import { getTheme } from '../../../../utils/auth'
+import { getDirName } from './utils'
+export default {
+  name: 'prioritycontrol',
+  components: {
+    xdrdirselector
+  },
+  props: {
+    phaseList: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      levelOption: [{
+        value: 1,
+        label: 1
+      }, {
+        value: 2,
+        label: 2
+      }, {
+        value: 3,
+        label: 3
+      }, {
+        value: 4,
+        label: 4
+      }, {
+        value: 5,
+        label: 5
+      }],
+      typeSelect: [{
+        value: 0,
+        label: this.$t('openatccomponents.overview.typeOption0')
+      }, {
+        value: 1,
+        label: this.$t('openatccomponents.overview.typeOption1')
+      }],
+      phaseSelect: [],
+      manualInfo: {
+        level: 1,
+        phase: 1,
+        type: 0,
+        duration: 300,
+        delay: 0
+      }
+    }
+  },
+  created () {
+    this.getSelect(this.phaseList)
+  },
+  methods: {
+    getSelect (list) {
+      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
+      this.phaseSelect = list.map((item, index) => {
+        let dirArr = []
+        for (let rec of item.direction) {
+          let recd = {
+            id: rec,
+            color: color
+          }
+          dirArr.push(recd)
+        }
+        let nameArr = getDirName(dirArr)
+        let name = ''
+        nameArr = nameArr.map(record => this.$t(record))
+        name = nameArr.join(',')
+        return {
+          label: name,
+          item: dirArr,
+          value: item.id
+        }
+      })
+    },
+    handleClose () {
+      this.$emit('closePhaseBack')
+    },
+    handleManualControl () {
+      let submitdata = {
+        control: 24,
+        delay: this.manualInfo.delay,
+        duration: this.manualInfo.duration,
+        type: this.manualInfo.type,
+        phase: this.manualInfo.phase,
+        level: this.manualInfo.level
+      }
+      console.log(submitdata, 'submitdata')
+      this.$emit('closePhaseControl', submitdata)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,163 @@
+/**
+ * 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 Edgebase from '@openatc/edgebase-front'
+let images = [{
+  id: 1,
+  // name: 'East-Straight',
+  name: 'openatccomponents.overview.es',
+  // img: require('./images/East-Straight.svg'),
+  class: 'iconfont icon-icon-test2'
+},
+{
+  id: 2,
+  // name: 'East-Left',
+  name: 'openatccomponents.overview.el',
+  // img: require('./images/East-Left.svg'),
+  class: 'iconfont icon-icon-test4'
+},
+{
+  id: 3,
+  // name: 'East-Right',
+  name: 'openatccomponents.overview.er',
+  // img: require('./images/East-Right.svg'),
+  class: 'iconfont icon-icon-test3'
+},
+{
+  id: 4,
+  // name: 'East-Back',
+  name: 'openatccomponents.overview.eb',
+  // img: require('./images/East-Back.svg'),
+  class: 'iconfont icon-icon-test6'
+},
+{
+  id: 5,
+  // name: 'West-Straight',
+  name: 'openatccomponents.overview.ws',
+  // img: require('./images/West-Straight.svg'),
+  class: 'iconfont icon-icon-test5'
+},
+{
+  id: 6,
+  // name: 'West-Left',
+  name: 'openatccomponents.overview.wl',
+  // img: require('./images/West-Left.svg'),
+  class: 'iconfont icon-icon-test7'
+},
+{
+  id: 7,
+  // name: 'West-Right',
+  name: 'openatccomponents.overview.wr',
+  // img: require('./images/West-Right.svg'),
+  class: 'iconfont icon-icon-test9'
+},
+{
+  id: 8,
+  // name: 'West-Back',
+  name: 'openatccomponents.overview.wb',
+  // img: require('./images/West-Back.svg'),
+  class: 'iconfont icon-icon-test8'
+},
+{
+  id: 9,
+  // name: 'North-Straight',
+  name: 'openatccomponents.overview.ns',
+  // img: require('./images/North-Straight.svg'),
+  class: 'iconfont icon-icon-test10'
+},
+{
+  id: 10,
+  // name: 'North-Left',
+  name: 'openatccomponents.overview.nl',
+  // img: require('./images/North-Left.svg'),
+  class: 'iconfont icon-icon-test12'
+},
+{
+  id: 11,
+  // name: 'North-Right',
+  name: 'openatccomponents.overview.nr',
+  // img: require('./images/North-Right.svg'),
+  class: 'iconfont icon-icon-test13'
+},
+{
+  id: 12,
+  // name: 'North-Back',
+  name: 'openatccomponents.overview.nb',
+  // img: require('./images/North-Back.svg'),
+  class: 'iconfont icon-icon-test11'
+},
+{
+  id: 13,
+  // name: 'South-Straight',
+  name: 'openatccomponents.overview.ss',
+  // img: require('./images/South-Straight.svg'),
+  class: 'iconfont icon-icon-test15'
+},
+{
+  id: 14,
+  // name: 'South-Left',
+  name: 'openatccomponents.overview.sl',
+  // img: require('./images/South-Left.svg'),
+  class: 'iconfont icon-icon-test14'
+},
+{
+  id: 15,
+  // name: 'South-Right',
+  name: 'openatccomponents.overview.sr',
+  // img: require('./images/South-Right.svg'),
+  class: 'iconfont icon-icon-test'
+},
+{
+  id: 16,
+  // name: 'South-Back',
+  name: 'openatccomponents.overview.sb',
+  // img: require('./images/South-Back.svg'),
+  class: 'iconfont icon-icon-test1'
+}]
+
+const getImages = () => {
+  if (Edgebase.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
+}
+
+const getDirName = (arr) => {
+  let res = ''
+  let nameArr = []
+  for (let item of arr) {
+    let id = item.id
+    for (let img of images) {
+      if (id === img.id) {
+        let name = img.name
+        nameArr.push(name)
+      }
+    }
+  }
+  res = nameArr
+  return res
+}
+
+export {getImages, getDirName}

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

@@ -57,7 +57,9 @@ export default {
         if (this.contrloType === 'stage') {
           this.getStageLine()
         } else {
-          this.getPhaseId(this.controlData)
+          if (this.controlData) {
+            this.getPhaseId(this.controlData)
+          }
         }
       },
       // 深度观察监听
@@ -66,7 +68,9 @@ export default {
     patternStatusList: {
       handler: function (val, oldVal) {
         // this.handleStages() // 计算屏障高度
-        this.getPhaseId(this.patternStatusList)
+        if (this.patternStatusList) {
+          this.getPhaseId(this.patternStatusList)
+        }
       },
       // 深度观察监听
       deep: true

package/src/kisscomps/components/patternList/patternList.vue

@@ -10,6 +10,7 @@
     :patternList="patternList"
     :localPatternList="localPatternList"
     :phaseList="phaseList"
+    :showBarrier="showBarrier"
     :agentId="agentId"
     :controlData="controlData"
     :syncTime="syncTime"
@@ -507,6 +508,10 @@ export default {
     phaseList: {
       type: Array
     },
+    showBarrier: {
+      type: Boolean,
+      default: false
+    },
     controlData: {
       type: Object
     },

package/src/kisscomps/index.js

@@ -5,6 +5,7 @@ import IntersectionMap from './components/IntersectionMap/index'
 import SchemeConfig from './components/SchemeConfig/index'
 import lockingPhaselControlModal from './components/SchemeConfig/lockingPhaselControlModal/index'
 import Channelization from './components/Channelization/index'
+import ChannelizationFlowStatistic from './components/ChannelizationFlowStatistic/index'
 import DrawChannelization from './components/DrawChannelization/index'
 import FaultDetailModal from './components/FaultDetailModal/index'
 import CommonKanban from './components/CommonKanban/index'
@@ -21,6 +22,7 @@ import StageBord from './components/StageBord/index'
 import ExpendConfig from './components/ExpendConfig/index'
 import PatternWalkSvg from './components/PatternWalkSvg/index'
 import tentativeplancontrolmodal from './components/SchemeConfig/tentativeplancontrolmodal/index'
+import priorityControl from './components/SchemeConfig/priorityControl/index'
 import { setToken, setHost } from '../utils/auth.js'
 import componentsGlobalParam from '../store/modules/globalParam'
 
@@ -36,6 +38,7 @@ const components = {
   SchemeConfig,
   lockingPhaselControlModal,
   Channelization,
+  ChannelizationFlowStatistic,
   DrawChannelization,
   FaultDetailModal,
   PatternStatus,
@@ -51,6 +54,7 @@ const components = {
   StageBord,
   ExpendConfig,
   PatternWalkSvg,
+  priorityControl,
   tentativeplancontrolmodal
 }
 

package/src/router/index.js

@@ -4,13 +4,12 @@ Vue.use(Router)
 
 export default new Router({
   routes: [
-    // {
-    //   path: '/',
-    //   name: 'home',
-    //   component: (resolve) => {
-    //     require(['@/views/home'], resolve)
-    //   }
-    // },
+    {
+      path: '/',
+      component: (resolve) => {
+        require(['@/views/intersection'], resolve)
+      }
+    },
     {
       path: '/cross',
       name: 'cross',
@@ -19,7 +18,7 @@ export default new Router({
       }
     },
     {
-      path: '/',
+      path: '/config',
       name: 'config',
       component: (resolve) => {
         require(['@/views/schemeconfig'], resolve)

package/src/views/customchannelization.vue

@@ -16,7 +16,7 @@ export default {
   name: 'custom-channelization-demo',
   data () {
     return {
-      agentId: '10003-391',
+      agentId: '13001-460',
       tscParams: {}
     }
   },

package/src/views/intersection.vue

@@ -37,6 +37,7 @@
       </intersection-with-interface> -->
     <!-- </el-dialog> -->
   <div class="layout-container2">
+      <h2 style="color: #fff;">路口图</h2>
       <intersection-with-interface
         ref="intersection"
         :AgentId="agentId"
@@ -45,6 +46,7 @@
         :roadDirection="roadDirection"
         :modeName="modeName"
         :controlName="controlName"
+        :isShowState="isShowState"
         :isShowMode="isShowMode"
         :isShowInterval="isShowInterval"
         :isShowMessage ="isShowMessage"
@@ -61,11 +63,7 @@
               :currentStage="currentStage"
               @onSelectStages="onSelectStages"></Stages> -->
 
-      <!-- 本地调试，不要删除 -->
-      <!-- <IntersectionWithInterface
-        :AgentId="agentId"
-        :Token="Token"/> -->
-
+      <h2 style="color: #fff;">渠化图</h2>
       <channelization-with-interface
         ref="channelization"
         :AgentId="agentId"
@@ -73,12 +71,21 @@
         :Token="Token"
         @getTscControl="getTscControl"
         @onPhaseChange="onPhaseChange"/>
-      <!-- <ChannelizationWithInterface
-        :AgentId="agentId" /> -->
+
+    <h2 style="color: #fff;">流量统计渠化路口图</h2>
+      <channelization-flow-statistic
+      :AgentId="agentId"
+      :phasesStatisticsList="phasesStatisticsList"
+      bcgColor="#009900"
+      :customText="customText"
+      textFontSize="50"/>
     </div>
   </div>
 </template>
 <script>
+import {
+  setToken
+} from '../utils/auth'
 import IntersectionWithInterface from '../kisscomps/components/IntersectionWithInterface'
 import ChannelizationWithInterface from '../kisscomps/components/ChannelizationWithInterface/ChannelizationWithInterface'
 export default {
@@ -87,9 +94,9 @@ export default {
     return {
       roadDirection: 'right',
       // reqUrl: 'http://192.168.13.103:10003/openatc',
-      agentId: '10003-391',
+      agentId: '13001-460',
       reqUrl: 'http://192.168.13.105:11003/openatc',
-      Token: 'eyJraWQiOiIxNjUzMjgyODkwMDYxIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczOTY4Mjg5MCwiaWF0IjoxNjUzMjgyODkwfQ.emqFxXlot1Zk6TGkLMDx0zIp2B8toSz17xdZI_DrXZI',
+      Token: 'eyJraWQiOiIxNjYwNjQwMDMyMzc0IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTc0NzAzOTk3OCwiaWF0IjoxNjYwNjM5OTc4fQ.I2O7bJPOFWDU9ZE8BqE6p-fsn-Kuj2i0z5lRgvvkzgA',
       // agentId: '30003-352',
       // reqUrl: 'https://kints-dev.devdolphin.com/openatc',
       // Token: 'eyJraWQiOiIxNjUwNTA5MDI2ODk2IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJ4aWFvbWluZyIsImV4cCI6MTczNjkwOTAyNiwiaWF0IjoxNjUwNTA5MDI2fQ.-s4T-uMRmB2zf9yer87USKQXLY1a12Zq5lCOnqjNmfA',
@@ -97,12 +104,40 @@ export default {
       dialogWidth: '80%',
       modeName: '交警遥控',
       controlName: '步进',
+      isShowState: true,
       isShowMode: true,
       isShowMessage: true,
       isShowPatternStatus: false,
       isShowIntersection: true,
       isShowInterval: true,
-      isShowStages: true
+      isShowStages: true,
+      customText: 'A',
+      phasesStatisticsList: [
+        {
+          'phaseno': 1,
+          'time': '2020-08-09 15:44:22',
+          'phasestatistics': {
+            'totalflow': 49,
+            'averageflow': 12,
+            'saturation': 1,
+            'occupyrate': 69,
+            'congestionindex': 'A',
+            'greenusage': 10
+          }
+        },
+        {
+          'phaseno': 2,
+          'time': '2020-08-09 15:44:22',
+          'phasestatistics': {
+            'totalflow': 62,
+            'averageflow': 31,
+            'saturation': 3,
+            'occupyrate': 98,
+            'congestionindex': 'F',
+            'greenusage': 10
+          }
+        }
+      ]
     }
   },
   components: {
@@ -205,6 +240,12 @@ export default {
     onSelectStages (res) {
       console.log('onSelectStages')
       console.log(res)
+    },
+    setPropsToken (token) {
+      // 获取组件外传入的token，便于独立组件调用接口
+      if (token && token !== '') {
+        setToken(token)
+      }
     }
   },
   created () {
@@ -216,6 +257,7 @@ export default {
     //   alert('Hello')
     //   _this.agentId = 'scats1'
     // }, 5 * 1000)
+    this.setPropsToken(this.Token)
     window.onresize = () => {
       return (() => {
         this.setDialogWidth()
@@ -226,7 +268,21 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang='scss'>
+.layout-container {
+  width: 800PX;
+}
+.layout-container1 {
+  width: 242PX;
+  height: 176PX;
+  border: 1PX solid green;
+}
+.layout-container2 {
+  /* height: 600px; */
+  width: 1020px;
+  border: 1PX solid yellow;
+  position: relative;
+}
 .abow_dialog {
     display: flex;
     justify-content: center;
@@ -250,35 +306,3 @@ export default {
     }
 }
 </style>
-
-<style scoped lang='scss'>
-.layout-container {
-  width: 800PX;
-  // width: 300rem;
-  // height: 390PX;
-  border: 1PX solid red;
-  // color: green;
-}
-.layout-container1 {
-  // width: 12.5rem;
-  // height: 12.5rem;
-  // width: 275px;
-  // height: 202px;
-  // width: 330.33px;
-  // height: 242.67px;
-  width: 242PX;
-  height: 176PX;
-  border: 1PX solid green;
-  // background: green;
-}
-.layout-container2 {
-  // width: 25.6rem;
-  // height: 25.6rem;
-  // width: 600px;
-  height: 600px;;
-  width: 1020px;
-  border: 1PX solid yellow;
-  position: relative;
-  // background: white;
-}
-</style>

package/src/views/schemeconfig.vue

@@ -51,8 +51,8 @@ export default {
       showWalk: [ 1, 2 ],
       sidewalkPhaseData: [{key: 'pedphase1653873194007699', phaseid: 1, id: 1, name: '东人行横道', isshow: false}],
       lockPhaseBtnName: this.$t('openatccomponents.overview.comfirm'),
-      agentId: '10002-994',
-      Token: 'eyJraWQiOiIxNjUzMjgyODkwMDYxIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczOTY4Mjg5MCwiaWF0IjoxNjUzMjgyODkwfQ.emqFxXlot1Zk6TGkLMDx0zIp2B8toSz17xdZI_DrXZI',
+      agentId: '13001-460',
+      Token: 'eyJraWQiOiIxNjYwMjgzMzQwMzM4IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTc0NjY4MzM0MCwiaWF0IjoxNjYwMjgzMzQwfQ.xmgkrjwcdwT_miC3krjqL27Tv4txJ9FQuDEKlfWdtzU',
       Token103: 'eyJraWQiOiIxNjQ5MzM4NzA5MTA0IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczNTczODcwOSwiaWF0IjoxNjQ5MzM4NzA5fQ.JDSkpT1SbB61dEKvorhVdZJHKJzoQZEY5DPKHs1Imo0',
       boxVisible: false,
       dialogWidth: '80%',

package/static/styles/channelizatioon.scss

@@ -399,5 +399,14 @@
       height: 14PX;
       font-size: 14PX;
     }
+    .customText {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      z-index: 9;
+      align-items: center;
+      color: #fff;
+    }
   }
 }