openatc-components 0.0.99 → 0.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openatc-components",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "description": "A Vue.js project",
   "author": "openatc developer",
   "private": false,
@@ -21,25 +21,24 @@
     "npm2yuanqu": "npm config set registry http://nexus.ctsp.kedacom.com/content/groups/npm-host-yuanqu/"
   },
   "dependencies": {
-    "@minogin/vue-drag-resize-rotate": "^1.0.5",
-    "@openatc/edgebase-front": "^2.4.0",
-    "animate.css": "^3.7.2",
-    "axios": "0.21.1",
-    "echarts": "^4.9.0",
-    "element-ui": "^2.7.2",
     "flatpickr": "^4.5.1",
     "jquery": "^3.3.1",
-    "js-cookie": "2.2.0",
-    "localStorage": "^1.0.4",
-    "moment": "^2.24.0",
     "pend": "^1.2.0",
-    "scss-loader": "0.0.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.5.2",
-    "vue-i18n": "^8.7.0",
     "vue-router": "^3.0.1",
+    "element-ui": "^2.7.2",
+    "moment": "^2.24.0",
+    "axios": "0.21.1",
+    "js-cookie": "2.2.0",
+    "localStorage": "^1.0.4",
+    "vue-i18n": "^8.7.0",
+    "vuex": "3.0.1",
+    "scss-loader": "0.0.1",
     "vuedraggable": "^2.16.0",
-    "vuex": "3.0.1"
+    "animate.css": "^3.7.2",
+    "echarts": "^4.9.0",
+    "@minogin/vue-drag-resize-rotate": "^1.0.5"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

package/src/i18n/language/en.js

@@ -129,7 +129,6 @@ const en = {
       'phaseclose': 'Close Phase',
       'phaselocking': 'Priority Control',
       'tentativeplan': 'Tentative Plan',
-      'prioritycontrol': 'Priority Control',
       'implement': 'Execute',
       'comfirm': 'Comfirm',
       'ipaddress': 'IP',
@@ -207,34 +206,7 @@ const en = {
       'modelList22': 'Priority Control',
       'modelList23': 'Close Phase',
       'modelList100': 'Tentative Plan',
-      'modelList24': 'Priority Control',
-      'priorityType': 'Priority Type',
-      'priorityPhase': 'Priority Phase',
-      'typeOption0': 'Regular Priority',
-      'typeOption1': 'Urgent Priority',
-      'es': 'East-Straight',
-      'el': 'East-Left',
-      'er': 'East-Right',
-      'eb': 'East-Back',
-      'ws': 'West-Straight',
-      'wl': 'West-Left',
-      'wr': 'West-Right',
-      'wb': 'West-Back',
-      'ns': 'North-Straight',
-      'nl': 'North-Left',
-      'nr': 'North-Right',
-      'nb': 'North-Back',
-      'ss': 'South-Straight',
-      'sl': 'South-Left',
-      'sr': 'South-Right',
-      'sb': 'South-Back',
-      'level': 'Level',
-      'levelOption': 'LevelOption',
-      'levelOption1': '1',
-      'levelOption2': '2',
-      'levelOption3': '3',
-      'levelOption4': '4',
-      'levelOption5': '5',
+      'modelList24': 'Emergency Control',
       'modelList99': 'Device Mantenance',
       'tips': 'Tips',
       'exitmanul': 'It is necessary to restore self-control before exiting. Do you want to exit?',
@@ -1184,6 +1156,7 @@ const en = {
       'xpedestrian': 'X Pedestrian',
       'sectionpedestrian': 'Section Pedestrian',
       'delete': 'Delete',
+      'clone': 'Clone',
       'drawtips': 'Click add on the intersection map after selection',
       'canclesetting': 'Cancel the channelization setting of the current intersection?',
       'phaseassociated': 'Phase Associated',
@@ -1197,8 +1170,8 @@ const en = {
       'pedestriandetector': 'Pedestrian Detector',
       'detectorassociated': 'Detector Associated',
       'detectorthreshold': 'Detector Threshold',
-      'occupancythreshold': 'Occupancy threshold',
-      'saturationthreshold': 'Flow Saturation threshold',
+      'occupancythreshold': 'Greenlight Utilization Threshold',
+      'saturationthreshold': 'Flow Saturation Threshold',
       'checkthreshold': 'The threshold value cannot be blank. Please fill in a positive integer within the range of 0-100！',
       'pedestriancrossing': 'Pedestrian crossing',
       'pedestriansecondarycrossing': 'Pedestrian secondary crossing',
@@ -1206,7 +1179,9 @@ const en = {
       'sectionpedestriancrossing': 'Section pedestrian crossing',
       'flipdisplay': 'Flip display',
       'vehiclelane': 'Vehicle lane',
-      'sidewalk': 'Sidewalk'
+      'sidewalk': 'Sidewalk',
+      'angle': 'Angle',
+      'basicinfo': 'Basic information'
     }
   }
 }

package/src/i18n/language/zh.js

@@ -129,34 +129,6 @@ const zh = {
       'phaseclose': '相位关断',
       'phaselocking': '相位锁定',
       'tentativeplan': '临时方案',
-      'prioritycontrol': '优先控制',
-      'priorityType': '优先类型',
-      'priorityPhase': '优先相位',
-      'typeOption0': '常规优先',
-      'typeOption1': '紧急优先',
-      'es': '东直行',
-      'el': '东左转',
-      'er': '东右转',
-      'eb': '东掉头',
-      'ws': '西直行',
-      'wl': '西左转',
-      'wr': '西右转',
-      'wb': '西掉头',
-      'ns': '北直行',
-      'nl': '北左转',
-      'nr': '北右转',
-      'nb': '北掉头',
-      'ss': '南直行',
-      'sl': '南左转',
-      'sr': '南右转',
-      'sb': '南掉头',
-      'level': '优先级',
-      'levelOption': 'levelOption',
-      'levelOption1': '1',
-      'levelOption2': '2',
-      'levelOption3': '3',
-      'levelOption4': '4',
-      'levelOption5': '5',
       'implement': '执行',
       'comfirm': '确定',
       'ipaddress': 'IP地址',
@@ -234,7 +206,7 @@ const zh = {
       'modelList22': '相位锁定',
       'modelList23': '相位关断',
       'modelList100': '临时方案',
-      'modelList24': '优先控制',
+      'modelList24': '紧急控制',
       'modelList99': '设备维护',
       'tips': '提示',
       'exitmanul': '退出前需要先恢复自主控制, 是否退出?',
@@ -1183,6 +1155,7 @@ const zh = {
       'xpedestrian': '斜向行人',
       'sectionpedestrian': '路段行人',
       'delete': '删除',
+      'clone': '克隆',
       'drawtips': '选择后在路口图上点击添加',
       'canclesetting': '是否取消当前路口渠化设置?',
       'phaseassociated': '相位关联',
@@ -1196,7 +1169,7 @@ const zh = {
       'pedestriandetector': '行人检测器',
       'detectorassociated': '检测器关联',
       'detectorthreshold': '检测器阈值',
-      'occupancythreshold': '占有率阈值',
+      'occupancythreshold': '绿灯利用率阈值',
       'saturationthreshold': '流量饱和度阈值',
       'checkthreshold': '阈值不可为空，请填0-100范围内的正整数！',
       'pedestriancrossing': '行人过街',
@@ -1205,7 +1178,9 @@ const zh = {
       'sectionpedestriancrossing': '路段行人过街',
       'flipdisplay': '翻转显示',
       'vehiclelane': '车道',
-      'sidewalk': '人行道'
+      'sidewalk': '人行道',
+      'angle': '旋转角度',
+      'basicinfo': '基础信息'
     }
   }
 }

package/src/kisscomps/components/BoardCard/BoardCard.vue

@@ -8,7 +8,6 @@
         :patternStatusList="patternStatusList">
         </StageStatus>
         <PatternStatus
-        :showBarrier="showBarrier"
         :localPatternList="localPatternList"
         :contrloType="contrloType"
         :stagesChange="stagesChange"
@@ -18,7 +17,7 @@
         :phaseList="phaseList"
         :cycle="cycle"
         :syncTime="syncTime"
-        :style="{'margin-top':(cycle || !showBarrier)? '25px':'0'}"
+        :style="{'margin-top':cycle ? '25px':'0'}"
         :patternStatusList="patternStatusList"
         :patternId="patternId"
         :cycles="cycles">
@@ -53,10 +52,6 @@ export default {
     stagesChange: {
       type: Array
     },
-    showBarrier: {
-      type: Boolean,
-      default: false
-    },
     phaseList: {
       type: Array
     },

package/src/kisscomps/components/Channelization/Channelization.vue

@@ -128,6 +128,11 @@ export default {
       },
       CrossMapVisible: true, // 控制底图显示隐藏
       CrossMapData: {
+        x: 400,
+        y: 100,
+        w: 800,
+        h: 200,
+        angle: 0,
         svgstr: '',
         imgfilesrc: ''
       }, // 管理底图数据
@@ -297,19 +302,6 @@ export default {
           }
           if (key === 'crossMap') {
             this.CrossMapData = JSON.parse(JSON.stringify(value))
-            if (value.type === 'vectorgraph') {
-            // svg底图，只加载底图870*650区域范围内的元素
-              let { svgstr, ...allitem } = value
-              this.allitem = allitem
-            } else {
-              this.allitem = {
-                x: 435,
-                y: 325,
-                w: 870,
-                h: 650,
-                angle: 0
-              }
-            }
           }
         }
         this.isSeletable = false
@@ -328,6 +320,11 @@ export default {
       this.Pedwalk = []
       this.Detector = []
       this.CrossMapData = {
+        x: 400,
+        y: 100,
+        w: 800,
+        h: 200,
+        angle: 0,
         svgstr: '',
         imgfilesrc: ''
       }

package/src/kisscomps/components/DrawChannelization/drawsvg/basicCoordInfo.vue

@@ -0,0 +1,113 @@
+/**
+ * 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 class="basic-coodinfo-component">
+    <el-form
+      :inline="true"
+      :model="basicCoodInfo"
+       label-position="left">
+       <el-form-item
+            label="X:"
+            prop="intersection">
+          <el-input-number :min="0" :controls="false"
+            ref="refNumber-x"
+            v-model="basicCoodInfo.x"
+            @input.native="eventChange('x')" />
+        </el-form-item>
+        <el-form-item
+            label="Y:"
+            prop="count">
+          <el-input-number :min="0" :controls="false"
+            ref="refNumber-y"
+            v-model="basicCoodInfo.y"
+            @input.native="eventChange('y')" />
+        </el-form-item>
+        <el-form-item
+            v-if="showAngle"
+            :label="$t('openatccomponents.channelizationmap.angle') + ':'"
+            prop="count">
+          <el-input-number :min="0" :max="360" :controls="false"
+            ref="refNumber-angle"
+            v-model="basicCoodInfo.angle"
+            @input.native="eventChange('angle')" />
+        </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  name: 'basic-coodinfo-component',
+  components: {
+  },
+  data () {
+    return {
+      showAngle: true,
+      basicCoodInfo: {
+        x: 0,
+        y: 0,
+        angle: 0
+      }
+    }
+  },
+  props: {
+    drawingObjInfo: {
+      type: Object
+    }
+  },
+  computed: {
+  },
+  watch: {
+    drawingObjInfo: {
+      handler: function (obj) {
+        this.basicCoodInfo = {
+          x: obj.x,
+          y: obj.y,
+          angle: obj.angle
+        }
+        this.isShowAngleSetting()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    eventChange (field) {
+      const key = this.$refs[`refNumber-${field}`].displayValue
+      this.basicCoodInfo[field] = Number(key)
+      this.$emit('handleChangeBasicCoord', this.basicCoodInfo)
+    },
+    isShowAngleSetting () {
+      this.showAngle = true
+      if (this.drawingObjInfo.icontype === 'countdown') {
+        this.showAngle = false
+      }
+      if (this.drawingObjInfo.icontype === 'detector' && this.drawingObjInfo.detailtype === 'detectorChart') {
+        this.showAngle = false
+      }
+    }
+  },
+  mounted () {
+    if (this.drawingObjInfo) {
+      this.icontype = this.drawingObjInfo.icontype
+      this.basicCoodInfo = {
+        x: this.drawingObjInfo.x,
+        y: this.drawingObjInfo.y,
+        angle: this.drawingObjInfo.angle
+      }
+      this.isShowAngleSetting()
+    }
+  },
+  destroyed () {
+  }
+}
+</script>
+<style lang="scss">
+</style>

package/src/kisscomps/components/DrawChannelization/drawsvg/channelizationElements.vue

@@ -30,9 +30,11 @@
       v-if="CrossMapVisible"
       :UsageMode="UsageMode"
       :CrossMapData="CrossMapData"
-      :isSeletable="isSeletable"
+      :isSeletable="!isLockedCrossMap"
       :pointchange="pointchange"
+      :chooseIndex="curChooseIconIndex"
       @changeCrossMap="changeCrossMap"
+      @handleSelectIcon="handleSelectIcon"
     />
     <!-- 机动车图标 -->
     <div v-if="resetflag">
@@ -47,18 +49,6 @@
       @handleSelectIcon="handleSelectIcon"
     />
     </div>
-
-    <!-- 非机动车图标 -->
-    <!-- <BicyclelanesIconSvg
-            :UsageMode="UsageMode"
-            v-for="bicycleitem in Bicyclelanes"
-            :key="bicycleitem.index"
-            :chooseIndex="curChooseIconIndex"
-            :Data="bicycleitem"
-            :isSeletable="isSeletable"
-            @changeBicyclelaneItem="changeBicyclelaneItem"
-            @handleSelectIcon="handleSelectIcon"
-    />-->
     <!-- 文字图标 -->
     <!-- <EditableText
       :UsageMode="UsageMode"
@@ -105,15 +95,16 @@
       @changeDetectorItem="changeDetectorItem"
       @handleSelectIcon="handleSelectIcon"
       />
-    <DetectorChart
+    <!-- <DetectorChart
       :UsageMode="UsageMode"
       v-for="detchartitem in DetectorChart"
       :key="'detectorchart-' + detchartitem.index"
       :chooseIndex="curChooseIconIndex"
       :DetectorChartData="detchartitem"
+      :Detector="Detector"
       :isSeletable="isSeletable"
       @changeDetectorChartItem="changeDetectorChartItem"
-      @handleSelectIcon="handleSelectIcon" />
+      @handleSelectIcon="handleSelectIcon" /> -->
   </drr>
   </div>
 </template>
@@ -133,7 +124,6 @@ export default {
     CrossMap,
     EditableText,
     MotorwayIconSvg,
-    // BicyclelanesIconSvg,
     CountdownIcon,
     PedroadIconSvg,
     DetectorIconSvg,
@@ -192,6 +182,9 @@ export default {
     },
     CurChooseIcon: {
       type: Object
+    },
+    isLockedCrossMap: { // 是否锁定底图（是否允许编辑底图位置，角度等）
+      type: Boolean
     }
   },
   data () {
@@ -206,8 +199,8 @@ export default {
     changeMotorwayItem (MotorwayItem, fields) {
       this.$emit('changeMotorwayItem', MotorwayItem, fields)
     },
-    handleSelectIcon (iconobj) {
-      this.$emit('handleSelectIcon', iconobj)
+    handleSelectIcon (iconobj, isCrossMap) {
+      this.$emit('handleSelectIcon', iconobj, isCrossMap)
     },
     changeText (textobj, fields) {
       this.$emit('changeText', textobj, fields)

package/src/kisscomps/components/DrawChannelization/drawsvg/drawElement/crossMap.vue

@@ -12,31 +12,30 @@
 <template>
 <!-- 自定义底图 -->
 <div class="cross-map-part" ref="crossmap">
-  <div v-if="mapreset && CrossMapData.type === 'vectorgraph'">
-    <!-- 底图可缩放 -->
-    <!-- <drr
-      id="crossmapdrr"
-      :selectable="isSeletable"
-      :x="crossmapitem.x"
-      :y="crossmapitem.y"
-      :w="crossmapitem.w"
-      :h="crossmapitem.h"
-      :angle="crossmapitem.angle"
-      :aspectRatio="true"
-      @dragstop="mapDragStop(crossmapitem, ...arguments)"
-      @resizestop="mapResizeStop(crossmapitem, ...arguments)"
-      @rotatestop="mapRotateStop(crossmapitem, ...arguments)"
-    >
-      <div class="cross-map" v-html="CrossMapData.svgstr"></div>
-    </drr> -->
+  <!-- 底图可缩放 -->
+  <drr
+    id="crossmapdrr"
+    :x="crossmapitem.x"
+    :y="crossmapitem.y"
+    :w="crossmapitem.w"
+    :h="crossmapitem.h"
+    :angle="crossmapitem.angle"
+    :selected="chooseIndex === CrossMapData.index"
+    :selectable="isSeletable"
+    :aspectRatio="true"
+    @select="handleSelectIcon(crossmapitem)"
+    @dragstop="mapDragStop(crossmapitem, ...arguments)"
+    @resizestop="mapResizeStop(crossmapitem, ...arguments)"
+    @rotatestop="mapRotateStop(crossmapitem, ...arguments)"
+  >
+    <div v-if="mapreset && CrossMapData.type === 'vectorgraph'">
+      <div class="cross-map" :style="{'width': crossmapitem.w + 'px', 'height': crossmapitem.h + 'px'}" v-html="CrossMapData.svgstr"></div>
+    </div>
 
-    <!-- 底图取消操作 -->
-    <div class="cross-map" :style="{'width': crossmapitem.w + 'px', 'height': crossmapitem.h + 'px'}" v-html="CrossMapData.svgstr"></div>
-  </div>
-
-  <div v-if="mapreset && CrossMapData.type === 'picture'" class="cross-map">
-    <img height="100%" :src="CrossMapData.imgfilesrc">
-  </div>
+    <div v-if="mapreset && CrossMapData.type === 'picture'" class="cross-map" >
+      <img id="pngMap" :src="CrossMapData.imgfilesrc" :style="{'width': crossmapitem.w + 'px', 'height': crossmapitem.h + 'px'}">
+    </div>
+  </drr>
  </div>
 </template>
 
@@ -55,6 +54,9 @@ export default {
     isSeletable: {
       type: Boolean
     },
+    chooseIndex: {
+      type: Number
+    },
     pointchange: {
       type: Boolean
     }
@@ -62,26 +64,17 @@ export default {
   watch: {
     CrossMapData: {
       handler: function (val) {
-        this.crossmapitem = {
-          x: 0,
-          y: 0,
-          w: 0,
-          h: 0,
-          angle: 0
-        }
+        this.crossmapitem.x = val.x
+        this.crossmapitem.y = val.y
+        this.crossmapitem.w = val.w
+        this.crossmapitem.h = val.h
+        this.crossmapitem.angle = val.angle
         if (val.type === 'vectorgraph') {
           if (val.svgstr === '') {
             this.mapreset = false
             return
           }
           this.mapreset = true
-          this.crossmapitem = {
-            x: val.x,
-            y: val.y,
-            w: val.w,
-            h: val.h,
-            angle: val.angle
-          }
         }
         if (val.type === 'picture') {
           if (val.imgfilesrc === undefined || val.imgfilesrc === '') {
@@ -93,19 +86,19 @@ export default {
       },
       deep: true
     },
-    crossmapitem: {
-      handler: function (newval, oldval) {
-        if ((JSON.stringify(oldval) !== '{}') && !this.isEqual(newval, oldval)) {
-          // 更改原数据的位置大小数据
-          let data = {
-            ...this.CrossMapData,
-            ...newval
-          }
-          let fields = Object.keys(newval)
-          this.$emit('changeCrossMap', data, fields)
-        }
-      }
-    },
+    // crossmapitem: {
+    //   handler: function (newval, oldval) {
+    //     if ((JSON.stringify(oldval) !== '{}') && !this.isEqual(newval, oldval)) {
+    //       // 更改原数据的位置大小数据
+    //       let data = {
+    //         ...this.CrossMapData,
+    //         ...newval
+    //       }
+    //       let fields = Object.keys(newval)
+    //       this.$emit('changeCrossMap', data, fields)
+    //     }
+    //   }
+    // },
     pointchange: {
       handler: function (val) {
         // 解决光标样式被选区样式覆盖问题
@@ -132,17 +125,32 @@ export default {
     mapDragStop (origin, final) {
       // 底图拖动停止
       this.crossmapitem = JSON.parse(JSON.stringify(final))
+      this.handleChangeData()
     },
     mapResizeStop (origin, final) {
       // 底图改变大小停止
+      let svgdom = document.querySelector('.cross-map svg')
+      if (svgdom) {
+        // 解决svg源文件里有宽高属性，此时对svg父容器改变宽高，svg尺寸不会改变的问题
+        // 因此要修改svg文件的宽高属性
+        if (svgdom.getAttribute('width')) {
+          svgdom.setAttribute('width', final.w + 'px')
+        }
+        if (svgdom.getAttribute('height')) {
+          svgdom.setAttribute('height', final.h + 'px')
+        }
+      }
       this.resetMapSvg()
       this.crossmapitem = JSON.parse(JSON.stringify(final))
-      // this.$refs.crossmap.style.height = final.w + 'px'
-      // this.$refs.crossmap.style.width = final.h + 'px'
+      this.handleChangeData()
     },
     mapRotateStop (origin, final) {
       // 底图旋转停止
-      this.crossmapitem = JSON.parse(JSON.stringify(final))
+      this.crossmapitem = JSON.parse(JSON.stringify(final))// 第四象限的角度是负值（开源组件接口返回），转化为正值便于理解
+      if (this.crossmapitem.angle < 0) {
+        this.crossmapitem.angle = this.crossmapitem.angle + 360
+      }
+      this.handleChangeData()
     },
     resetMapSvg () {
       // 重绘底图svg
@@ -166,6 +174,18 @@ export default {
         }
       }
       return true
+    },
+    handleSelectIcon (iconparams) {
+      this.$emit('handleSelectIcon', this.CrossMapData, 'crossmap')
+    },
+    handleChangeData () {
+      let data = {
+        ...this.CrossMapData,
+        ...this.crossmapitem
+      }
+      let fields = Object.keys(this.crossmapitem)
+      this.$emit('changeCrossMap', data, fields)
+      this.handleSelectIcon()
     }
   }
 }

package/src/kisscomps/components/DrawChannelization/drawsvg/firstImportCrossmap.vue

@@ -11,7 +11,7 @@
  **/
 <template>
   <div class="first-import-crossmap">
-    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString" />
+    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString" @loadMapSize="loadMapSize" />
     <div class="import-btn">
       <el-button type="primary" @click="clickOpen">{{$t('openatccomponents.channelizationmap.importpicture')}}</el-button>
       <div class="tip">{{$t('openatccomponents.channelizationmap.importtip')}}</div>
@@ -39,6 +39,9 @@ export default {
     },
     loadSvgString (type, imgstr) {
       this.$emit('loadSvgString', type, imgstr)
+    },
+    loadMapSize (type, mapsize) {
+      this.$emit('loadMapSize', type, mapsize)
     }
   },
   mounted () {}