openatc-components 0.1.192 → 0.1.194

package/package.json

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

package/src/kisscomps/components/DirectionListConfiguration/DirectionListConfiguration.vue

@@ -247,11 +247,29 @@ export default {
           this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
           return
         }
-        this.channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
+        let channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
+        this.channelList = this.handleRepeatRealdir(channelList)
         console.log('this.channelList', this.channelList)
         this.handleChannelDirection()
       })
     },
+    handleRepeatRealdir (channelList) {
+      let map = new Map()
+      channelList.forEach(ele => {
+        ele.realdir.forEach(dir => {
+          if (map.get(dir) === undefined) {
+            map.set(dir, ele)
+          }
+        })
+      })
+      let arr = Array.from(map)
+      let newarr = []
+      arr.forEach(ele => {
+        newarr.push(ele[1])
+      })
+      // console.log(newarr)
+      return newarr
+    },
     handleChannelDirection () {
       this.LanePhaseData = []
       this.sidewalkPhaseData = []

package/src/kisscomps/components/DrawChannelization/drawsvg/iconSvg/detectorChart.vue

@@ -39,7 +39,7 @@
   </div>
 </template>
 <script>
-import echart from 'echarts'
+import * as echart from 'echarts'
 import { getTheme } from '../../../../../utils/auth.js'
 export default {
   name: 'countdownsvg',

package/src/kisscomps/components/IntersectionDirectionSelection/IntersectionDirectionSelection.vue

@@ -106,7 +106,7 @@ export default {
         } else {
           this.isThirdSignal = false
         }
-        if (this.thirdSignal !== undefined) {
+        if (this.thirdSignal) {
           this.isThirdSignal = this.thirdSignal
         }
       })

package/src/kisscomps/components/IntersectionMap/crossDirection/crossDiagram.vue

@@ -958,11 +958,30 @@ export default {
           this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
           return
         }
-        this.channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
-        // console.log('this.channelList', this.channelList)
+        let channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
+        this.channelList = this.handleRepeatRealdir(channelList)
+        console.log('this.channelList', this.channelList)
         this.handleChannelDirection()
       })
     },
+    handleRepeatRealdir (channelList) {
+      // 按realdir去掉重复方向的数据
+      let map = new Map()
+      channelList.forEach(ele => {
+        ele.realdir.forEach(dir => {
+          if (map.get(dir) === undefined) {
+            map.set(dir, ele)
+          }
+        })
+      })
+      let arr = Array.from(map)
+      let newarr = []
+      arr.forEach(ele => {
+        newarr.push(ele[1])
+      })
+      // console.log(newarr)
+      return newarr
+    },
     handleChannelDirection () {
       this.LanePhaseData = []
       this.sidewalkPhaseData = []
@@ -1057,7 +1076,6 @@ export default {
         }
       }
       this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
-      // console.log(this.compLanePhaseData)
       let clickedDirection = this.compLanePhaseData.filter(ele => ele.clicked && !ele.disabled)
       this.inneChoosedDirection = clickedDirection.map(ele => ele.id)
       this.EmitAllChoosedDirection(curClickedPhase)

package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/LphaseIconSvg.vue

@@ -13,8 +13,8 @@
   <div :id="Data.key" :style="{position: 'absolute', left: Data.left, top: Data.top}">
     <div :class="Data.id < 9 ? '' : 'hide'">
       <svg v-if="Data.id === 4 || Data.id === 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18.1 14.5" :width="IconLenghDiaoTou" :height="IconWdithDiaoTou">
-        <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M0,8.8c0,3.1,2.2,5.7,4.9,5.7h13.2v-2.5H4.9c-1.3,0-2.4-1.4-2.4-3.1s1.1-3.1,2.4-3.1h3.6v3.1l7.7-4.4L8.6,0v3.1H4.9C2.2,3.1,0,5.7,0,8.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-        <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M18.1,5.7c0-3.1-2.2-5.7-4.9-5.7H0v2.5h13.3c1.3,0,2.4,1.4,2.4,3.1s-1.1,3.1-2.4,3.1H9.7V5.6L2,10l7.6,4.5v-3.2h3.6C15.9,11.3,18.1,8.8,18.1,5.7z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+        <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M4.876,3.054H8.5V0.039L16.07,4.276,8.411,8.513V5.5H4.792C3.53,5.5,2.436,6.883,2.436,8.513s1.094,3.015,2.357,3.015H18.006v2.444H4.876A5.2,5.2,0,0,1-.005,8.513,5.2,5.2,0,0,1,4.876,3.054Z" transform="translate(0 -0.031)" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+        <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M13.124,10.964H9.5v3.028L1.93,9.736,9.589,5.48V8.508h3.619c1.262,0,2.357-1.391,2.357-3.028S14.47,2.452,13.208,2.452H-0.006V0H13.124c2.693,0,4.881,2.455,4.881,5.483S15.817,10.964,13.124,10.964Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
       </svg>
       <svg v-else version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 36 26" style="enable-background:new 0 0 36 26;" xml:space="preserve" :width="IconLengh" :height="IconWdith">
@@ -38,8 +38,8 @@ L3.3,16l9,5.3v-3.8h4.3C19.8,17.5,22.4,14.5,22.4,10.8z" :fill="this.FlashColor ?
       </div>
       <div :class="Data.id >= 9 ? '' : 'hide'">
         <svg v-if="Data.id === 12 || Data.id === 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14.5 18.1" :width="IconWdithDiaoTou" :height="IconLenghDiaoTou">
-          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'"  d="M5.7,0C2.5,0,0,2.2,0,4.9l0,13.2h2.5V4.9c0-1.3,1.4-2.4,3.1-2.4s3.1,1.1,3.1,2.4v3.6H5.7l4.4,7.7l4.4-7.7h-3.2V4.9C11.3,2.2,8.8,0,5.7,0z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-          <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M8.8,18.1c3.1,0,5.7-2.2,5.7-4.9V0l-2.5,0v13.3c0,1.3-1.4,2.4-3.1,2.4s-3.1-1.1-3.1-2.4V9.7h3.1L4.4,2L0,9.6h3.1v3.6C3.1,15.9,5.7,18.1,8.8,18.1z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'"  d="M10.946,4.876V8.5h3.015L9.724,16.07,5.487,8.411H8.5V4.792c0-1.262-1.385-2.357-3.015-2.357S2.472,3.53,2.472,4.792V18.006H0.028V4.876A5.2,5.2,0,0,1,5.487-.005,5.2,5.2,0,0,1,10.946,4.876Z" transform="translate(-0.031)" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+          <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M3.036,13.124V9.5H0.008L4.264,1.93,8.52,9.589H5.492v3.619c0,1.262,1.391,2.357,3.028,2.357s3.028-1.094,3.028-2.357V-0.006H14V13.124c0,2.693-2.455,4.881-5.483,4.881S3.036,15.817,3.036,13.124Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
         </svg>
         <svg  v-else version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 26 36" style="enable-background:new 0 0 26 36;" xml:space="preserve" :width="IconWdith" :height="IconLengh">

package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/phaseIconSvg.vue

@@ -12,9 +12,9 @@
 <template>
   <div :id="Data.key" :style="{position: 'absolute', left: Data.left, top: Data.top}">
     <div :class="Data.id < 9 ? '' : 'hide'">
-      <svg v-if="Data.id === 4 || Data.id === 8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.11 14.47" :width="IconLenghDiaoTou" :height="IconWdithDiaoTou">
-        <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M4.91,11.34H8.55v3.13l7.7-4.4-7.7-4.4V8.8H4.91c-1.27,0-2.37-1.44-2.37-3.13s1.1-3.13,2.37-3.13h13.2V0H4.91C2.2,0,0,2.54,0,5.67S2.2,11.34,4.91,11.34Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-        <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M13.2,3.22H9.56V0L2,4.48l7.7,4.4V5.75h3.63c1.27,0,2.37,1.44,2.37,3.13S14.55,12,13.28,12H0v2.53H13.2c2.71,0,4.91-2.53,4.91-5.67S15.91,3.22,13.2,3.22Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+      <svg v-if="Data.id === 4 || Data.id === 8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 14" :width="IconLenghDiaoTou" :height="IconWdithDiaoTou">
+        <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M4.876,10.981H8.5v3.042L16.07,9.748,8.411,5.474V8.515H4.792c-1.262,0-2.357-1.4-2.357-3.042S3.53,2.432,4.792,2.432H18.006V-0.034H4.876c-2.693,0-4.881,2.466-4.881,5.508S2.183,10.981,4.876,10.981Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+        <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M13.124,3.036H9.5V0.008L1.93,4.264,9.589,8.52V5.492h3.619c1.262,0,2.357,1.391,2.357,3.028s-1.094,3.028-2.357,3.028H-0.006V14H13.124c2.693,0,4.881-2.455,4.881-5.483S15.817,3.036,13.124,3.036Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
       </svg>
       <svg v-else xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 36 26" :width="IconLengh" :height="IconWdith">
           <!-- 东相位 -->
@@ -36,9 +36,9 @@
         </svg>
       </div>
       <div :class="Data.id >= 9 ? '' : 'hide'">
-        <svg v-if="Data.id === 12 || Data.id === 16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.47 18.11" :width="IconWdithDiaoTou" :height="IconLenghDiaoTou">
-          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M3.22,4.91V8.55H0l4.4,7.7,4.4-7.7H5.67V4.91c0-1.27,1.44-2.37,3.13-2.37s3.13,1.1,3.13,2.37v13.2h2.54V4.91C14.47,2.2,11.93,0,8.8,0S3.22,2.2,3.22,4.91Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" />
-          <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M11.34,13.2V9.56h3.13L10.07,2l-4.4,7.7H8.8v3.63c0,1.27-1.44,2.37-3.13,2.37s-3.13-1.1-3.13-2.37V0H0V13.2c0,2.71,2.54,4.91,5.67,4.91S11.34,15.91,11.34,13.2Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" />
+        <svg v-if="Data.id === 12 || Data.id === 16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 18" :width="IconWdithDiaoTou" :height="IconLenghDiaoTou">
+          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M3.036,4.876V8.5H0.008L4.264,16.07,8.52,8.411H5.492V4.792c0-1.262,1.391-2.357,3.028-2.357s3.028,1.094,3.028,2.357V18.006H14V4.876C14,2.183,11.548-.005,8.52-0.005S3.036,2.183,3.036,4.876Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" />
+          <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M10.981,13.124V9.5h3.042L9.748,1.93,5.474,9.589H8.515v3.619c0,1.262-1.4,2.357-3.042,2.357S2.432,14.47,2.432,13.208V-0.006H-0.034V13.124c0,2.693,2.466,4.881,5.508,4.881S10.981,15.817,10.981,13.124Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" />
         </svg>
         <svg v-else xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
           viewBox="0 0 26 36" style="enable-background:new 0 0 26 36;" xml:space="preserve" :width="IconWdith" :height="IconLengh">
@@ -119,11 +119,11 @@ export default {
     },
     IconLenghDiaoTou: {
       type: String,
-      default: '18.11px'
+      default: '18px'
     },
     IconWdithDiaoTou: {
       type: String,
-      default: '14.47px'
+      default: '14px'
     },
     Data: {
       type: Object

package/src/kisscomps/components/IntersectionMap/crossDirection/posJson/phasePos.json

@@ -24,8 +24,8 @@
       "id": 4,
       "name": "东掉头",
       "ename": "East-Back",
-      "x": "601px",
-      "y": "297.8px"
+      "x": "602px",
+      "y": "300px"
     },
     {
       "id": 5,
@@ -52,8 +52,8 @@
       "id": 8,
       "name": "西掉头",
       "ename": "West-Back",
-      "x": "246px",
-      "y": "330.8px"
+      "x": "247px",
+      "y": "333px"
     },
     {
       "id": 9,
@@ -80,8 +80,8 @@
       "id": 12,
       "name": "北掉头",
       "ename": "North-Back",
-      "x": "411px",
-      "y": "136px"
+      "x": "412px",
+      "y": "137px"
     },
     {
       "id": 13,
@@ -109,7 +109,7 @@
       "name": "南掉头",
       "ename": "South-Back",
       "x": "444px",
-      "y": "490px"
+      "y": "489px"
     }
   ]
 }

package/src/kisscomps/components/IntersectionMap/crossDirection/posJson/phasePos.left.json

@@ -24,8 +24,8 @@
       "id": 4,
       "name": "东掉头",
       "ename": "East-Back",
-      "x": "605px",
-      "y": "331px"
+      "x": "604px",
+      "y": "334px"
     },
     {
       "id": 5,
@@ -53,7 +53,7 @@
       "name": "西掉头",
       "ename": "West-Back",
       "x": "248px",
-      "y": "299px"
+      "y": "301px"
     },
     {
       "id": 9,
@@ -108,7 +108,7 @@
       "id": 16,
       "name": "南掉头",
       "ename": "South-Back",
-      "x": "411px",
+      "x": "412px",
       "y": "495px"
     }
   ]

package/src/router/index.js

@@ -17,6 +17,13 @@ export default new Router({
         require(['@/views/intersection'], resolve)
       }
     },
+    {
+      path: '/intersection',
+      name: 'intersection',
+      component: (resolve) => {
+        require(['@/views/intersection2'], resolve)
+      }
+    },
     {
       path: '/pattern',
       name: 'pattern',

package/src/utils/conflct.js

@@ -6,7 +6,7 @@ import i18n from '../i18n/index'
 export async function computedRelation (id) {
   let uploadData = await UploadTscParam(id)
   if (!uploadData) return
-  let result = []
+  let results = []
   let channel = uploadData.channelList
   // let channel = store.getters.globalParamModel.getParamsByType('channelList')
   let tableData = channel.map(item => {
@@ -23,7 +23,7 @@ export async function computedRelation (id) {
         // 处理peddirection
         itemA.peddirection.forEach(pedDir => {
           if (pedDir > 0) {
-            result.push({
+            results.push({
               direction: pedDir,
               type: 'pedphase',
               laneConflictList: [],
@@ -35,7 +35,7 @@ export async function computedRelation (id) {
         // 处理phasedirection
         itemA.phasedirection.forEach(phaseDir => {
           if (phaseDir > 0) {
-            result.push({
+            results.push({
               direction: phaseDir,
               type: 'phase',
               conflictchannel: itemB.greenconflict,
@@ -47,7 +47,7 @@ export async function computedRelation (id) {
       }
     })
   })
-  result.forEach(item => {
+  results.forEach(item => {
     item.conflictchannel.forEach(aaaValue => {
       channel.forEach(cha => {
         if (cha.id === aaaValue) {
@@ -61,7 +61,24 @@ export async function computedRelation (id) {
     })
     delete item.conflictchannel
   })
-  console.log(result, 'result')
+  const uniqueDirections = new Set()
+  const doChange = results.filter(obj => {
+    if (uniqueDirections.has(obj.direction)) {
+      return false
+    }
+    uniqueDirections.add(obj.direction)
+    return true
+  })
+  let result = doChange.map(item => {
+    let uniqueLaneConflictList = [...new Set(item.laneConflictList)]
+    let uniquePedConflictList = [...new Set(item.pedConflictList)]
+    return {
+      ...item,
+      laneConflictList: uniqueLaneConflictList,
+      pedConflictList: uniquePedConflictList
+    }
+  })
+  console.log('result', result)
   return result
 }
 export function getDefaul (data) {

package/src/views/intersection.vue

@@ -138,7 +138,7 @@ export default {
       // agentId: '12007_390',
       // agentId: '12014',
       reqUrl: 'http://192.168.13.103:10003/openatc',
-      Token: 'eyJraWQiOiIxNzExNTg4NzM3MDczIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTcxMTYzMTkzNywiaWF0IjoxNzExNTg4NzM3fQ.gzdE_LOpS5rYTipJhvP9nvf5_Yg6CFr8mvV9_EWOGXg',
+      Token: 'eyJraWQiOiIxNzEwNzU4MTU3Njk0IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiIxMjM0NTYiLCJleHAiOjE3MTM4ODgwMDAsImlhdCI6MTcxMDY5MTIwMH0.vicLABPjoZEWmHr12-5FXMbjYmEKv-WSTVRROR1eOME',
       // agentId: '30003-352',
       // reqUrl: 'https://kints-dev.devdolphin.com/openatc',
       // Token: 'eyJraWQiOiIxNjUwNTA5MDI2ODk2IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJ4aWFvbWluZyIsImV4cCI6MTczNjkwOTAyNiwiaWF0IjoxNjUwNTA5MDI2fQ.-s4T-uMRmB2zf9yer87USKQXLY1a12Zq5lCOnqjNmfA',

package/src/views/intersection2.vue

@@ -0,0 +1,329 @@
+<template>
+  <div>
+    <!-- <h2>静态路口图</h2> -->
+    <!-- <intersection-base-map
+            ref="intersectionMap"
+            :crossStatusData="crossStatusData"
+            :agentId="agentId"
+            :clickMode="true" /> -->
+
+      <!-- <button @click="lockPhase" >相位锁定</button><br/>
+      <button @click="unlockPhase" >解锁相位</button><br/>
+      <button @click="changeControlPattern" >改变控制方案</button><br/>
+      <button @click="getPhaseInfo" >获取相位参数信息</button><br/>
+      <button @click="getControlInfo" >获取当前方案信息</button>
+      <button @click="clearInterVals" >清除定时器</button> -->
+    <!-- <el-button type="primary" @click="handleOpenConfigPanel" style="margin: 20px;">打开路口图面板</el-button>
+    <el-dialog
+      refs="intersectionMapDialog"
+      class="abow_dialog"
+      :width="dialogWidth"
+      :visible.sync="boxVisible"
+      :close-on-click-modal="false"
+      @close="oncancle"
+      append-to-body> -->
+      <!-- <intersection-with-interface
+        ref="intersection"
+        :AgentId="agentId"
+        :reqUrl="reqUrl"
+        :Token="Token"
+        :roadDirection="roadDirection"
+        :modeName="modeName"
+        :controlName="controlName"
+        :isShowMode="isShowMode"
+        :isShowInterval="isShowInterval"
+        :isShowMessage ="isShowMessage"
+        :isShowPatternStatus="isShowPatternStatus"
+        :isShowIntersection="isShowIntersection"
+        :isShowStages="isShowStages"
+        @getTscControl="getTscControl"
+        @registerMessage="registerMessage"
+        @queryDevice="queryDevice"
+        @onPhaseChange="onPhaseChange"
+        @onSelectStages="onSelectStages">
+      </intersection-with-interface> -->
+    <!-- </el-dialog> -->
+  <div class="layout-container2">
+      <h2 style="color: #fff;">路口图</h2>
+      <intersection-with-interface
+        ref="intersection"
+        :AgentId="agentId"
+        :reqUrl="reqUrl"
+        :Token="Token"
+        :roadDirection="roadDirection"
+        :modeName="modeName"
+        :controlName="controlName"
+        :isShowState="isShowState"
+        :isShowMode="isShowMode"
+        :isShowInterval="isShowInterval"
+        :isShowMessage ="isShowMessage"
+        :isShowPatternStatus="isShowPatternStatus"
+        :isShowIntersection="isShowIntersection"
+        :isShowStages="isShowStages"
+        @getTscControl="getTscControl"
+        @registerMessage="registerMessage"
+        @queryDevice="queryDevice"
+        @onPhaseChange="onPhaseChange"
+        @onSelectStages="onSelectStages">
+      </intersection-with-interface>
+      <!-- <Stages :stagesList="stagesList"
+              :currentStage="currentStage"
+              @onSelectStages="onSelectStages"></Stages> -->
+
+      <!-- <h2 style="color: #fff;">渠化图</h2>
+      <channelization-with-interface
+        ref="channelization"
+        :AgentId="agentId"
+        :reqUrl="reqUrl"
+        :Token="Token"
+        @getTscControl="getTscControl"
+        @onPhaseChange="onPhaseChange"/>
+
+    <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 {
+  name: 'demo',
+  data () {
+    return {
+      roadDirection: 'left',
+      // reqUrl: 'http://192.168.13.103:10003/openatc',
+      agentId: 'cllzpl',
+      // agentId: '13013',
+      // agentId: '12007_390',
+      // agentId: '12014',
+      reqUrl: 'http://192.168.13.103:10003/openatc',
+      Token: 'eyJraWQiOiIxNzEwNzU4MTU3Njk0IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiIxMjM0NTYiLCJleHAiOjE3MTM4ODgwMDAsImlhdCI6MTcxMDY5MTIwMH0.vicLABPjoZEWmHr12-5FXMbjYmEKv-WSTVRROR1eOME',
+      // agentId: '30003-352',
+      // reqUrl: 'https://kints-dev.devdolphin.com/openatc',
+      // Token: 'eyJraWQiOiIxNjUwNTA5MDI2ODk2IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJ4aWFvbWluZyIsImV4cCI6MTczNjkwOTAyNiwiaWF0IjoxNjUwNTA5MDI2fQ.-s4T-uMRmB2zf9yer87USKQXLY1a12Zq5lCOnqjNmfA',
+      boxVisible: false,
+      dialogWidth: '80%',
+      modeName: '交警遥控',
+      controlName: '步进',
+      isShowState: true,
+      isShowMode: true,
+      isShowMessage: true,
+      isShowPatternStatus: false,
+      isShowIntersection: true,
+      isShowInterval: 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
+          }
+        }
+      ],
+      crossStatusData: {}
+    }
+  },
+  components: {
+    IntersectionWithInterface,
+    ChannelizationWithInterface
+  },
+  methods: {
+    oncancle () {
+      this.boxVisible = false
+    },
+    handleOpenConfigPanel () {
+      this.boxVisible = true
+    },
+    setDialogWidth () {
+      var val = document.body.offsetWidth
+      const def = 1200 // 默认宽度
+      if (val < def) {
+        this.dialogWidth = '80%'
+      } else {
+        this.dialogWidth = def + 'px'
+      }
+    },
+    async lockPhase (reqData) {
+      console.log('lock')
+      reqData = {
+        'mode': 0,
+        'control': 4,
+        'terminal': 1,
+        'delay': null,
+        'duration': null,
+        'value': 1
+      }
+      let res = await this.$refs.intersection.lockPhase(reqData)
+      console.log(res)
+      console.log(reqData)
+    },
+    async unlockPhase (reqData) {
+      console.log('unlock')
+      reqData = {
+        'mode': 0,
+        'control': 0,
+        'terminal': 1,
+        'delay': null,
+        'duration': null,
+        'value': 0
+      }
+      let res = await this.$refs.intersection.unlockPhase(reqData)
+      console.log(res)
+      console.log(reqData)
+    },
+    async changeControlPattern (reqData) {
+      console.log('changeControlPattern')
+      reqData = {
+        'mode': 0,
+        'control': 1,
+        'terminal': 1,
+        'delay': null,
+        'duration': null,
+        'value': 0
+      }
+      let res = await this.$refs.intersection.changeControlPattern(reqData)
+      console.log(res)
+      console.log(reqData)
+    },
+    async getPhaseInfo () {
+      console.log('getPhaseInfo')
+      let res = await this.$refs.intersection.getPhaseInfo()
+      console.log(res)
+      return res
+    },
+    async getControlInfo () {
+      console.log('getControlInfo')
+      let res = await this.$refs.intersection.getControlInfo()
+      console.log(res)
+      return res
+    },
+    onPhaseChange (res, index) {
+      console.log('onPhaseChange:')
+      console.log(res, index)
+      this.stagesList = res
+      // this.currentStage = index
+    },
+    getTscControl (res) {
+      console.log('getTscControl:', res)
+      // let control = res.data.data.control
+      // let mode = res.data.data.mode
+      // console.log("control,mode:",control,mode)
+      // this.controlName = control
+      // this.modeName = mode
+    },
+    registerMessage (res) {
+      console.log('registerMessage:', res)
+    },
+    queryDevice (res) {
+      console.log('queryDevice:', res)
+    },
+    clearInterVals () {
+      this.$refs.intersection.clearInterVals()
+    },
+    onSelectStages (res) {
+      console.log('onSelectStages')
+      console.log(res)
+    },
+    setPropsToken (token) {
+      // 获取组件外传入的token，便于独立组件调用接口
+      if (token && token !== '') {
+        setToken(token)
+      }
+    },
+    handleClickCrossIcon (allChoosedDir, curClickedPhase) {
+      debugger
+      console.log('handleClickCrossIcon', allChoosedDir, curClickedPhase)
+    }
+  },
+  created () {
+    this.setDialogWidth()
+  },
+  mounted () {
+    // let _this = this
+    // setTimeout(function () {
+    //   alert('Hello')
+    //   _this.agentId = 'scats1'
+    // }, 5 * 1000)
+    this.setPropsToken(this.Token)
+    window.onresize = () => {
+      return (() => {
+        this.setDialogWidth()
+      })()
+    }
+  },
+  destroyed () {
+  }
+}
+</script>
+<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;
+    align-items: Center;
+    overflow: hidden;
+    .el-dialog {
+        margin: 0 auto !important;
+        height: 90%;
+        overflow: hidden;
+        .el-dialog__body {
+            position: absolute;
+            left: 0;
+            top: 54px;
+            bottom: 0;
+            right: 0;
+            padding: 0;
+            z-index: 1;
+            overflow-y: auto;
+            overflow-x: auto;
+        }
+    }
+}
+</style>
+<style lang="scss" scoped>
+  .text {
+    color: #fff;
+  }
+</style>