openatc-components 0.0.1 → 0.0.6

package/src/views/home.vue

@@ -1,196 +1,63 @@
-<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>
-
-<script>
-export default {
-  data () {
-    return {
-      dirshow: [
-        {
-          id: 1,
-          color: '#77FB65'
-        }, {
-          id: 2,
-          color: '#E24B4B'
-        }
-      ],
-      datalist: [
-        {
-          value: 5,
-          name: '测试',
-          color: '#77FB65'
-        },
-        {
-          value: 1,
-          name: '吃饭'
-        }
-      ],
-      mainwidth1: '400px',
-      mainheight1: '25px',
-      mainwidth: '400px',
-      mainheight: '25px',
-      display: true,
-      name: ['曹操', '刘备', '孙权'],
-      list1: [{value: 39, maxNum: 50}],
-      list2: [{value: 55, maxNum: 50}],
-      list3: [{value: 7, maxNum: 10, color: 'red'}, {value: 80, maxNum: 100}],
-      progressPercentage: 0,
-      curseconds: 0,
-      totalseconds: 86400,
-      starttime: '2019-04-25 00:00:00',
-      endtime: '2019-04-26 00:00:00'
-    }
-  },
-  methods: {
-  },
-  watch: {
-  },
-  mounted () {
-  }
-}
-</script>
-<style scoped>
-.wrap {
-  /* background: #333333; */
-  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>
+<template>
+  <div class="wrap">
+    <xdr-dir-selector Width="300px"
+                      Height="300px"
+                      :showlist="dirshow"></xdr-dir-selector>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dirshow: [
+        {
+          id: 1,
+          color: '#77FB65'
+        }, {
+          id: 2,
+          color: '#E24B4B'
+        }
+      ],
+      datalist: [
+        {
+          value: 5,
+          name: '测试',
+          color: '#77FB65'
+        },
+        {
+          value: 1,
+          name: '吃饭'
+        }
+      ],
+      mainwidth1: '400px',
+      mainheight1: '25px',
+      mainwidth: '400px',
+      mainheight: '25px',
+      display: true,
+      name: ['曹操', '刘备', '孙权'],
+      list1: [{value: 39, maxNum: 50}],
+      list2: [{value: 55, maxNum: 50}],
+      list3: [{value: 7, maxNum: 10, color: 'red'}, {value: 80, maxNum: 100}],
+      progressPercentage: 0,
+      curseconds: 0,
+      totalseconds: 86400,
+      starttime: '2019-04-25 00:00:00',
+      endtime: '2019-04-26 00:00:00'
+    }
+  },
+  methods: {
+  },
+  watch: {
+  },
+  mounted () {
+  }
+}
+</script>
+<style scoped>
+.wrap {
+  /* background: #333333; */
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/views/intersection.vue

@@ -0,0 +1,85 @@
+<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"
+        roadDirection="left"
+        Token="eyJraWQiOiIxNjQ4ODAyNTk2Nzc4IiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTczNTIwMjU5NiwiaWF0IjoxNjQ4ODAyNTk2fQ.TMA7MaKDDwGxOrzyRIFbfrsH-_UyPGFz2Uqnnwsc8nk"
+        ></intersection-with-interface>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'demo',
+  data () {
+    return {
+      boxVisible: false,
+      dialogWidth: '80%',
+      agentId: '10001-928'
+    }
+  },
+  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,126 @@
+/**
+ * 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="10001-928"
+        roadDirection="right"
+        :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>