openatc-components 0.0.2 → 0.0.3

package/src/utils/pedphasedesc.js

@@ -0,0 +1,119 @@
+/**
+ * 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.
+ **/
+/**
+ * @Description: 根据行人相位的描述id获取对应的描述名字
+ */
+const images = [{
+  id: 1,
+  zname: '东人行横道',
+  ename: 'East-Pedestrian'
+},
+{
+  id: 2,
+  zname: '西人行横道',
+  ename: 'West-Pedestrian'
+},
+{
+  id: 3,
+  zname: '南人行横道',
+  ename: 'South-Pedestrian'
+},
+{
+  id: 4,
+  zname: '北人行横道',
+  ename: 'North-Pedestrian'
+},
+{
+  id: 5,
+  zname: '东人行横道-上',
+  ename: 'East-Top-Pedestrian'
+},
+{
+  id: 6,
+  zname: '东人行横道-下',
+  ename: 'East-Bottom-Pedestrian'
+},
+{
+  id: 7,
+  zname: '西人行横道-上',
+  ename: 'West-Top-Pedestrian'
+},
+{
+  id: 8,
+  zname: '西人行横道-下',
+  ename: 'West-Bottom-Pedestrian'
+},
+{
+  id: 9,
+  zname: '南人行横道-左',
+  ename: 'South-Left-Pedestrian'
+},
+{
+  id: 10,
+  zname: '南人行横道-右',
+  ename: 'South-Right-Pedestrian'
+},
+{
+  id: 11,
+  zname: '北人行横道-左',
+  ename: 'North-Left-Pedestrian'
+},
+{
+  id: 12,
+  zname: '北人行横道-右',
+  ename: 'North-Right-Pedestrian'
+},
+{
+  id: 13,
+  zname: 'X人行横道-/',
+  ename: 'X-/-Pedestrian'
+},
+{
+  id: 14,
+  zname: 'X人行横道-\\',
+  ename: 'X-\\-Pedestrian'
+},
+{
+  id: 15,
+  zname: '东西路段人行横道',
+  ename: 'East-West-Pedestrian'
+},
+{
+  id: 16,
+  zname: '南北路段人行横道',
+  ename: 'South-North-Pedestrian'
+}]
+
+export function getPedPhaseDesc (list, language) {
+  let str = ''
+  if (language === 'en') {
+    for (let ll of list) {
+      for (let image of images) {
+        if (image.id === ll) {
+          str = str + ',' + image.ename
+        }
+      }
+    }
+  } else {
+    for (let ll of list) {
+      for (let image of images) {
+        if (image.id === ll) {
+          str = str + ',' + image.zname
+        }
+      }
+    }
+  }
+  if (str !== '') {
+    str = str.substr(1)
+  }
+  return str
+}

package/src/utils/phasedesc.js

@@ -0,0 +1,124 @@
+/**
+ * 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.
+ **/
+/**
+ * @Description: 根据相位的描述id获取对应的描述名字
+ * @Author: yangdongyang
+ * @Date: Create in 13:41 2019/3/26
+ * @Modified By:
+ */
+const images = [{
+  id: 1,
+  zname: '东直行',
+  ename: 'East-Straight'
+},
+{
+  id: 2,
+  zname: '东左转',
+  ename: 'East-Left'
+},
+{
+  id: 3,
+  zname: '东右转',
+  ename: 'East-Right'
+},
+{
+  id: 4,
+  zname: '东掉头',
+  ename: 'East-Back'
+},
+{
+  id: 5,
+  zname: '西直行',
+  ename: 'West-Straight'
+},
+{
+  id: 6,
+  zname: '西左转',
+  ename: 'West-Left'
+},
+{
+  id: 7,
+  zname: '西右转',
+  ename: 'West-Right'
+},
+{
+  id: 8,
+  zname: '西掉头',
+  ename: 'West-Back'
+},
+{
+  id: 9,
+  zname: '北直行',
+  ename: 'North-Straight'
+},
+{
+  id: 10,
+  zname: '北左转',
+  ename: 'North-Left'
+},
+{
+  id: 11,
+  zname: '北右转',
+  ename: 'North-Right'
+},
+{
+  id: 12,
+  zname: '北掉头',
+  ename: 'North-Back'
+},
+{
+  id: 13,
+  zname: '南直行',
+  ename: 'South-Straight'
+},
+{
+  id: 14,
+  zname: '南左转',
+  ename: 'South-Left'
+},
+{
+  id: 15,
+  zname: '南右转',
+  ename: 'South-Right'
+},
+{
+  id: 16,
+  zname: '南掉头',
+  ename: 'South-Back'
+}]
+
+export function getPhaseDesc (list, language) {
+  // let language = this.$i18n.locale
+  // console.log(language)
+  let str = ''
+  if (language === 'en') {
+    for (let ll of list) {
+      for (let image of images) {
+        if (image.id === ll) {
+          str = str + ',' + image.ename
+        }
+      }
+    }
+  } else {
+    for (let ll of list) {
+      for (let image of images) {
+        if (image.id === ll) {
+          str = str + ',' + image.zname
+        }
+      }
+    }
+  }
+  if (str !== '') {
+    str = str.substr(1)
+  }
+  return str
+}

package/src/utils/responseMessage.js

@@ -0,0 +1,21 @@
+import i18n from '../i18n/index'
+import en from '../i18n/language/en'
+import zh from '../i18n/language/zh'
+
+function getMessageByCode (code, langusge) {
+  let res = i18n.t('openatccomponents.message.errorcode') + ' ' + code
+  let message = zh.openatccomponents.message
+  if (code && langusge) {
+    if (langusge === 'en') {
+      message = en.openatccomponents.message
+    }
+    if (message[code]) {
+      res = message[code]
+    }
+  }
+  return res
+}
+
+export {
+  getMessageByCode
+}

package/src/utils/validate.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ **/
+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+export function isvalidUsername (str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
+
+/* 合法uri */
+export function validateURL (textval) {
+  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return urlregex.test(textval)
+}
+
+/* 小写字母 */
+export function validateLowerCase (str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/* 大写字母 */
+export function validateUpperCase (str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/* 大小写字母 */
+export function validatAlphabets (str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}

package/src/views/home.vue

@@ -1,69 +1,8 @@
 <template>
   <div class="wrap">
-    <kiss-button></kiss-button>
     <xdr-dir-selector Width="300px"
                       Height="300px"
                       :showlist="dirshow"></xdr-dir-selector>
-
-    <div style="height:100px">
-      <kiss-horizontal :datalist="datalist"
-                       :mainwidth="mainwidth1"
-                       :mainheight="mainheight1"
-                       :display="display"
-                       horizontalDistance="3px">
-        <div class="phase-description"
-             slot="fatherslot">
-          <xdr-dir-selector Width="23px"
-                            Height="23px"
-                            :showlist="dirshow"></xdr-dir-selector>
-        </div>
-      </kiss-horizontal>
-    </div>
-    <div style="height:100%">
-      <kiss-horizontalchildren
-                               :name="name[2]"
-                               :dataList="list1"
-                               :display="display"
-                               mainheight="50px"
-                               backColor="#366069"
-                               horizontalDistance="3px">
-        <div class="phase-description"
-             slot="leftslot">
-          <xdr-dir-selector Width="23px"
-                            Height="23px"
-                            :showlist="dirshow"></xdr-dir-selector>
-        </div>
-        <!-- <div slot="leftslot" style="color: #fff; text-align:center; background: #0a4958; width: 25px; height: 23px;">55</div> -->
-      </kiss-horizontalchildren>
-      <kiss-horizontalchildren :name="name[0]"
-                               :dataList="list2"
-                               :display="display"
-                               mainheight="50px"
-                               backColor="rgba(87, 108, 113, 0.2)"
-                               horizontalDistance="3px">
-        <div class="phase-description"
-             slot="leftslot">
-          <xdr-dir-selector Width="23px"
-                            Height="23px"
-                            :showlist="dirshow"></xdr-dir-selector>
-        </div>
-        <!-- <div slot="leftslot" style="color: #fff; text-align:center; background: #0a4958; width: 25px; height: 23px;">55</div> -->
-      </kiss-horizontalchildren>
-      <kiss-horizontalchildren :name="name[1]"
-                               :dataList="list3"
-                               :display="display"
-                               mainheight="50px"
-                               horizontalDistance="10px">
-        <div style="position: relative"  slot="leftslot">
-          <div class="phase-description">
-          <xdr-dir-selector Width="23px"
-                            Height="23px"
-                            :showlist="dirshow"></xdr-dir-selector>
-        </div>
-        </div>
-      </kiss-horizontalchildren>
-      <kiss-simulation-progress :curseconds="curseconds" :totalseconds="totalseconds" :starttime="starttime" :endtime="endtime"></kiss-simulation-progress>
-    </div>
   </div>
 </template>
 
@@ -121,76 +60,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-.zindex {
-  position: absolute;
-  z-index: -1;
-}
-.select-containaer {
-  float: left;
-  margin: 0;
-  padding: 0;
-  width: 200px;
-  height: 300px;
-}
-
-.functionLayout {
-  position: fixed;
-  top: 100px;
-  width: 80px;
-  height: 550px;
-}
-.test {
-  width: 100px;
-  height: 100px;
-  left: 300px;
-  top: 300xp;
-  margin-left: 300px;
-}
-.leftpart > div {
-  float: left;
-  line-height: 50px;
-}
-.phase-description {
-  /* background: #43b4cf;
-  width: 25px;
-  height: 23px; */
-
-  /* width: 18px;
-  height: 30px;
-  background: yellow;
-  position: absolute;
-  top: 0;
-  left: 9px; */
-  width: 34px;
-  height: 30px;
-  background: url('../kisscomps/components/image/phaseHexagon/phasebg.png');
-  background-size: 34px 30px;
-  box-sizing: border-box;
-  padding-left: 5px;
-  padding-top: 4px;
-}
-/* .phase-description::before {
-  content: "";
-  width: 0;
-  height: 0;
-  border-right: 9px yellow solid;
-  border-left: none;
-  border-top: 15px solid transparent;
-  border-bottom: 15px solid transparent;
-  position: absolute;
-  top: 0;
-  left: -9px;
-}
-.phase-description::after {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: 9px yellow solid;
-  border-right: none;
-  border-top: 15px solid transparent;
-  border-bottom: 15px solid transparent;
-  position: absolute;
-  top: 0;
-  right: -9px;
-} */
 </style>

package/src/views/intersection.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <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="intersectionWithInterface"
+        :AgentId="agentId"
+        Token="eyJraWQiOiIxNjQ4NDMyMTY5NjExIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczNDgzMjE2OSwiaWF0IjoxNjQ4NDMyMTY5fQ.yNM6N0STwcNHE9tYi7fTfb0vqYLabjPntx7pQDS2zy4"
+        ></intersection-with-interface>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'demo',
+  data () {
+    return {
+      boxVisible: false,
+      dialogWidth: '80%',
+      agentId: '1640244524086'
+    }
+  },
+  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'
+      }
+    }
+  },
+  created () {
+    this.setDialogWidth()
+  },
+  mounted () {
+    window.onresize = () => {
+      return (() => {
+        this.setDialogWidth()
+      })()
+    }
+  },
+  destroyed () {
+  }
+}
+</script>
+<style lang="scss">
+.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>

package/src/views/schemeconfig.vue

@@ -0,0 +1,125 @@
+/**
+ * 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>
+    <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>
+      <scheme-config
+        ref="rightpanel"
+        agentId="1640244524086"
+        :statusData="crossStatusData"
+        :realtimeStatusModalvisible="false" />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getTscControl } from '../api/control.js'
+import { getMessageByCode } from '../utils/responseMessage.js'
+import {
+  getIframdevid
+} from '../utils/auth'
+export default {
+  name: 'democonfig',
+  data () {
+    return {
+      boxVisible: false,
+      dialogWidth: '80%',
+      crossStatusData: {} // 路口状态数据
+    }
+  },
+  methods: {
+    oncancle () {
+      this.boxVisible = false
+    },
+    handleOpenConfigPanel () {
+      this.boxVisible = true
+    },
+    setDialogWidth () {
+      var val = document.body.offsetWidth
+      const def = 450 // 默认宽度
+      if (val < def) {
+        this.dialogWidth = '80%'
+      } else {
+        this.dialogWidth = def + 'px'
+      }
+    },
+    initData () {
+      let iframdevid = getIframdevid()
+      getTscControl(iframdevid).then((data) => {
+        if (!data.data.success) {
+          if (data.data.code === '4003') {
+            this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
+            return
+          }
+          let parrenterror = getMessageByCode(data.data.code, this.$i18n.locale)
+          if (data.data.data) {
+            // 子类型错误
+            let childErrorCode = data.data.data.errorCode
+            if (childErrorCode) {
+              let childerror = getMessageByCode(data.data.data.errorCode, this.$i18n.locale)
+              this.$message.error(parrenterror + ',' + childerror)
+            }
+          } else {
+            this.$message.error(parrenterror)
+          }
+          return
+        }
+        this.crossStatusData = JSON.parse(JSON.stringify(data.data.data.data))
+      }).catch(error => {
+        console.log(error)
+      })
+    }
+  },
+  created () {
+    this.setDialogWidth()
+  },
+  mounted () {
+    this.initData()
+    window.onresize = () => {
+      return (() => {
+        this.setDialogWidth()
+      })()
+    }
+  }
+}
+</script>
+<style lang="scss">
+.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>