openatc-components 0.0.94 → 0.0.97

package/src/store/modules/globalParam.js

@@ -9,19 +9,59 @@
  * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  * See the Mulan PSL v2 for more details.
  **/
-// const Global = {
-//   state: {
-//     roadDirection: 'right' // 当前路口行车方向：默认右行
-//   },
-//   mutations: {
-//     SET_ROAD_RIRECTION: (state, DIR) => {
-//       state.roadDirection = DIR
-//     }
-//   },
-//   actions: {
-//     SetRoadDirection ({ commit }, DIR) {
-//       commit('SET_ROAD_RIRECTION', DIR)
-//     }
-//   }
-// }
-// export default Global
+const tscParam = {
+  phaseList: [],
+  patternList: [],
+  planList: [],
+  dateList: [],
+  overlaplList: [],
+  channelList: [],
+  detectorList: [],
+  pedestrainDetectorList: [],
+  channellock: [],
+  // customInfo: {
+  //   areaid: Number,
+  //   intersectionid: Number,
+  //   siteid: '',
+  //   selflearning: 0,
+  //   fixintersectioninfo: '',
+  //   commuport: 0,
+  //   commutype: '',
+  //   steptype: ''
+  // },
+  manualpanel: {
+    mingreen: 15
+  },
+  singleoptim: [
+  ]
+}
+const Global = {
+  state: {
+    tscParam: JSON.parse(JSON.stringify(tscParam)),
+    associatedPhaseList: [], // 关联相位列表
+    PhaseDataMgr: {} // 关联相位数据处理模型
+  },
+  mutations: {
+    SET_TSCPARAM: (state, tscParam) => {
+      state.tscParam = JSON.parse(JSON.stringify(tscParam))
+    },
+    SET_ASSOCIATED_PHASE_LIST: (state, Associatedphaselist) => {
+      state.associatedPhaseList = JSON.parse(JSON.stringify(Associatedphaselist))
+    },
+    INIT_PHASE_DATA_MGR: (state, PhaseDataMgrClass) => {
+      state.PhaseDataMgr = PhaseDataMgrClass
+    }
+  },
+  actions: {
+    SetTscParam ({ commit }, tscParam) {
+      commit('SET_TSCPARAM', tscParam)
+    },
+    SetAssociatedPhaseList ({ commit }, Associatedphaselist) {
+      commit('SET_ASSOCIATED_PHASE_LIST', Associatedphaselist)
+    },
+    InitPhaseDataMgr ({ commit }, PhaseDataMgrClass) {
+      commit('INIT_PHASE_DATA_MGR', PhaseDataMgrClass)
+    }
+  }
+}
+export default Global

package/src/views/customchannelization.vue

@@ -0,0 +1,49 @@
+<template>
+<!-- 渠化绘制demo -->
+  <div style="height: 100%;">
+      <!-- <custom-channelization
+        :AgentId="agentId" /> -->
+      <CustomChannelization
+        :AgentId="agentId"
+        :tscParam="tscParams"
+        @saveCallback="saveCallback" />
+  </div>
+</template>
+<script>
+import { getIntersectionInfo } from '../api/template.js'
+import CustomChannelization from '../kisscomps/components/DrawChannelization/drawsvg/index'
+export default {
+  name: 'custom-channelization-demo',
+  data () {
+    return {
+      agentId: '10003-391',
+      tscParams: {}
+    }
+  },
+  components: {
+    CustomChannelization
+  },
+  methods: {
+    getIntersectionInfo () {
+      // 获取路口信息
+      getIntersectionInfo(this.agentId).then(res => {
+        console.log('接口上载的参数', res.data.data.param)
+        this.tscParams = res.data.data.param
+      })
+    },
+    saveCallback (res) {
+      // 保存渠化图回调
+      console.log('保存接口返回的参数', res)
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.getIntersectionInfo()
+  },
+  destroyed () {
+  }
+}
+</script>
+<style lang="scss">
+</style>

package/src/views/intersection.vue

@@ -66,18 +66,28 @@
         :AgentId="agentId"
         :Token="Token"/> -->
 
+      <channelization-with-interface
+        ref="channelization"
+        :AgentId="agentId"
+        :reqUrl="reqUrl"
+        :Token="Token"
+        @getTscControl="getTscControl"
+        @onPhaseChange="onPhaseChange"/>
+      <!-- <ChannelizationWithInterface
+        :AgentId="agentId" /> -->
     </div>
   </div>
 </template>
 <script>
 import IntersectionWithInterface from '../kisscomps/components/IntersectionWithInterface'
+import ChannelizationWithInterface from '../kisscomps/components/ChannelizationWithInterface/ChannelizationWithInterface'
 export default {
   name: 'demo',
   data () {
     return {
       roadDirection: 'right',
       // reqUrl: 'http://192.168.13.103:10003/openatc',
-      agentId: '10002-994',
+      agentId: '10003-391',
       reqUrl: 'http://192.168.13.105:11003/openatc',
       Token: 'eyJraWQiOiIxNjUzMjgyODkwMDYxIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczOTY4Mjg5MCwiaWF0IjoxNjUzMjgyODkwfQ.emqFxXlot1Zk6TGkLMDx0zIp2B8toSz17xdZI_DrXZI',
       // agentId: '30003-352',
@@ -96,7 +106,8 @@ export default {
     }
   },
   components: {
-    IntersectionWithInterface
+    IntersectionWithInterface,
+    ChannelizationWithInterface
   },
   methods: {
     oncancle () {
@@ -172,11 +183,10 @@ export default {
       console.log('onPhaseChange:')
       console.log(res, index)
       this.stagesList = res
-      // this.currentStage = index;
+      // this.currentStage = index
     },
     getTscControl (res) {
-      console.log('getTscControl:')
-      console.log(res)
+      console.log('getTscControl:', res)
       // let control = res.data.data.control
       // let mode = res.data.data.mode
       // console.log("control,mode:",control,mode)
@@ -184,12 +194,10 @@ export default {
       // this.modeName = mode
     },
     registerMessage (res) {
-      console.log('registerMessage')
-      console.log(res)
+      console.log('registerMessage:', res)
     },
     queryDevice (res) {
-      console.log('queryDevice')
-      console.log(res)
+      console.log('queryDevice:', res)
     },
     clearInterVals () {
       this.$refs.intersection.clearInterVals()

package/static/apiconfig.json

@@ -332,5 +332,20 @@
   "key": "enumerateCheck",
   "url": "/fault/check",
   "method": "post"
+},
+{
+  "key": "getChannelizatonChart",
+  "url": "/devs/channelizatonchart",
+  "method": "get"
+},
+{
+  "key": "saveChannelizatonChart",
+  "url": "/devs/channelizatonchart",
+  "method": "post"
+},
+{
+  "key": "getDetectorStatus",
+  "url": "/devs/detectorstatus",
+  "method": "get"
 }
 ]

package/static/styles/channelizatioon.scss

@@ -0,0 +1,365 @@
+// 渠化图组件
+.custom-cross-part {
+  padding-top: 8PX;
+  // padding-left: 28PX;
+  height: 100%;
+  .first-import-crossmap {
+    height: 100%;
+    background-color: $--color-white;
+    position: relative;
+    margin-left: 28PX;
+    .import-btn {
+      min-width: 218PX;
+      text-align: center;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .el-button {
+        width: 220PX;
+        height: 60PX;
+        border-radius: 4PX;
+        line-height: 60PX;
+        padding: 0;
+        font-size: 20PX;
+        font-weight: 400;
+      }
+      .tip {
+        font-size: 14PX;
+        font-weight: 400;
+        color: $--color-text-regular;
+        line-height: 22PX;
+        margin-top: 22PX;
+      }
+    }
+  }
+  .custom-cross {
+    .custom-main {
+      width: 100%;
+      overflow: hidden;
+    }
+    .drawPanelAnimation {
+      transition-property: opacity , width;
+      transition-duration: 0.5s , 0.5s;
+    }
+    .custom-group {
+      // width: 980PX;
+      width: calc(64% - 28PX);
+      margin-left: 28PX;
+      float: left;
+      background-color: $--color-white;
+      border: solid 1PX $--border-color-lighter;
+      // margin-right: 20PX;
+      .draw-function {
+        overflow: hidden;
+        padding: 20PX;
+        .again-import {
+          float: left;
+          .import-label {
+            font-size: 14PX;
+            font-weight: 400;
+            color: $--color-text-primary;
+            margin-right: 23PX;
+          }
+          .again-import-btn {
+            padding: 0;
+            line-height: 32PX;
+            width: 90PX;
+            height: 32PX;
+          }
+        }
+        .draw-to-sketchpad {
+          float: right;
+          overflow: hidden;
+          .drawtip {
+            float: left;
+            font-size: 14PX;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #909399;
+            line-height: 22PX;
+            margin-right: 14PX;
+            line-height: 32PX;
+          }
+          .draw-operation {
+            float: left;
+          }
+        }
+      }
+      .sketchpad-area {
+        position: relative;
+        // min-height: 702PX;
+        height: 652PX;
+        overflow: auto;
+        .cross-map-part {
+          position: relative;
+          min-height: 650PX;
+        }
+        /* 删除hover的虚线框 */
+        .drr:hover:before {
+          outline: none;
+        }
+        .drr.active:before {
+          outline: 2PX dashed lightskyblue;
+        }
+        .channelization-elements-components {
+          border: 1px solid $--border-color-base;
+          margin: 0 auto;
+        }
+      }
+      .draw-end-function {
+        text-align: center;
+        padding-bottom: 60PX;
+        margin-top: 52PX;
+        .el-button {
+          width: 90PX;
+          height: 32PX;
+          padding: 0;
+          line-height: 32PX;
+        }
+      }
+    }
+    #sketchpadArea{
+      cursor: default;
+      overflow: hidden;
+    }
+    .custom-edit {
+      float: left;
+      // width: calc(100% - 980PX - 20PX);
+      // width: 515PX;
+      width: calc(36% - 20PX);
+      margin-left: 20PX;
+      background-color: $--color-white;
+      border: solid 1PX $--border-color-lighter;
+      padding: 22PX;
+      padding-right: 0PX;
+      min-height: 916PX;
+      .each-icon {
+        float: left;
+        .single-icon {
+          margin-right: 10PX;
+          text-align: center;
+          cursor:pointer;
+          width: 70PX;
+          height: 70PX;
+          background-color: #edf6ff;
+          border-radius: 6PX;
+          line-height: 1.15;
+          .patternWalk{
+            left: 14PX !important;
+          }
+          .closephase-icon {
+            margin-top: 10PX;
+            width: 56PX;
+            height: 24PX;
+          }
+          .direction-icon {
+            margin-top: 22PX;
+            width: 30PX;
+            height: 30PX;
+          }
+          .type-icon {
+            margin-top: 11PX;
+            width: 48PX;
+            height: 48PX;
+          }
+          .ped-icon {
+            margin-top: 11PX;
+            width: 48PX;
+            height: 48PX;
+          }
+        }
+        .single-icon-select {
+          text-align: center;
+          cursor:pointer;
+          width: 70PX;
+          height: 70PX;
+          background-color: #a2cfff;
+          border-radius: 6PX;
+        }
+        .single-icon-name {
+          width: 70PX;
+          margin-top: 3PX;
+          font-size: 12PX;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 22PX;
+          letter-spacing: 0PX;
+          color: $--color-text-regular;
+          text-align: center;
+          height: 40PX;
+        }
+      }
+      .tittle {
+        height: 20PX;
+        font-size: 20PX;
+        font-weight: 400;
+        color: $--color-text-primary;
+        line-height: 22PX;
+        margin-bottom: 17PX;
+      }
+      .lane-edit-panel {
+        position: relative;
+        .edit-id {
+          position: absolute;
+          right: 30PX;
+          top: 0PX;
+          color: $--color-text-primary;
+          font-size: 20PX;
+        }
+        .directions, .position, .lane-types, .ped-type, .ped-position, .detector-type, .detector-associated {
+          overflow: hidden;
+          margin-bottom: 55PX;
+        }
+        .delete-drawed-item {
+          text-align: center;
+          margin-top: 57PX;
+        }
+        .detector-threshold-formtext {
+          color: $--color-text-regular;
+        }
+      }
+      .phase-associated-component {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        .phase-box {
+          float: left;
+          margin-top: 10PX;
+            .single-phase {
+              margin-right: 10PX;
+              text-align: center;
+              cursor:pointer;
+              width: 70PX;
+              height: 70PX;
+              background-color: #edf6ff;
+              border-radius: 6PX;
+              line-height: 1.15;
+              position: relative;
+              .phase-icon {
+                position: absolute;
+                left: 14PX;
+                top: 15PX;
+              }
+              .ped-icon {
+                position: absolute;
+                left: 14PX;
+                top: 15PX;
+              }
+              .patternWalk{
+                left: 14PX !important;
+              }
+              .delete-phase-icon {
+                position: absolute;
+                right: 3PX;
+                top: 0PX;
+                z-index: 99;
+                .el-icon-close {
+                  font-size: 6PX;
+                }
+              }
+            }
+            .single-phase-select {
+              background-color: #a2cfff;
+            }
+            .single-phase-name {
+              width: 70PX;
+              margin-top: 3PX;
+              font-size: 12PX;
+              font-weight: normal;
+              font-stretch: normal;
+              line-height: 22PX;
+              letter-spacing: 0PX;
+              color: $--color-text-regular;
+              text-align: center;
+              height: 40PX;
+            }
+        }
+      
+        .add-phase {
+          padding-top: 23PX;
+        }
+        .icon-fangda {
+          font-size: 24PX;
+          color: #409EFF;
+        }
+        .add-disabled {
+          color: #bcbec2;
+          background-color: #f4f4f5;
+        }
+        .special-lane {
+          display:flex;
+          flex-direction:row;
+          justify-content:center;
+          align-items:center;
+        }
+      }
+    }
+    .footer-btn {
+      margin-bottom: 20PX;
+    }
+    .phaseText {
+      // color: $--color-text-regular;
+      color: #fff;
+      position: absolute;
+      height: 14PX;
+      font-size: 14PX;
+    }
+    .edit-icon-btn {
+      min-width: 128PX;
+      height: 32PX;
+      border: 1PX solid $--border-color-base;
+      border-radius: 4PX;
+      padding: 0;
+      color: $--color-text-regular;
+      &:hover {
+        color: $--color-text-regular;
+      }
+      .lane-icon-svg {
+        float: left;
+        position: relative;
+        top: 1PX;
+        left: 13PX;
+        > div {
+          float: left;
+        }
+      }
+      .btn-label {
+        float: left;
+        position: relative;
+        top: 2PX;
+        left: 23PX;
+      }
+      .highlightColor {
+        color: $--color-primary;
+      }
+      .defaultColor {
+        color: $--color-text-regular;
+      }
+    }
+    .phase-table {
+      margin-top: 20PX;
+    }
+  }
+}
+.show-channelization {
+  .channelization-elements-components {
+    .cross-map-part {
+      position: relative;
+      min-height: 650PX;
+    }
+    .drr:hover:before {
+      outline: none;
+    }
+    .drr.active:before {
+      outline: 2PX dashed lightskyblue;
+    }
+    .phaseText {
+      // color: $--color-text-regular;
+      color: #fff;
+      position: absolute;
+      height: 14PX;
+      font-size: 14PX;
+    }
+  }
+}

package/static/styles/common.scss

@@ -3,6 +3,7 @@
 @import './commonkanban.scss';
 @import './stages.scss';
 @import './overview.scss';
+@import './channelizatioon.scss';
 
  // 全局滚动条样式
  ::-webkit-scrollbar {

package/static/styles/schemeconfig.scss

@@ -273,6 +273,58 @@
     color: $--color-text-secondary;
   }
 } 
+.priority-control{
+  height: 100%;
+  padding: 21px 0px 21px 28px;
+  min-width: 360px;
+  overflow: auto;
+  .title {
+    margin-bottom: 24px;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 22px;
+    color: $--color-text-primary;
+    span {
+      font-size: 14px;
+      font-weight: 400;
+      color: $--color-text-secondary;
+    }
+  }
+  .footer {
+    float: right;
+    margin: 38px 24px 40px 0;
+    button {
+      width: 56px;
+      height: 32px;
+      padding: 0;
+      text-align: center;
+      line-height: 30px;
+      font-size: 12px;
+      font-weight: normal;
+      font-stretch: normal;
+    }
+  }
+  .el-input--mini{
+    width: 90%;
+  }
+  .el-form-item {
+    margin-bottom: 0px;
+  }
+  .el-form-item__label {
+    font-size: 14px;
+    font-weight: 400;
+    color: $--color-text-secondary;
+  }
+  .el-select {
+    width: 90%;
+  }
+  .el-input-number {
+    width: 100%;
+    .el-input__inner {
+      text-align: left;
+    }
+  }
+}
 .tentativeplan-control{
   height: 100%;
   padding: 21px 0px 21px 28px;