openatc-components 0.0.100 → 0.0.103

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

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

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

@@ -128,11 +128,6 @@ export default {
       },
       CrossMapVisible: true, // 控制底图显示隐藏
       CrossMapData: {
-        x: 400,
-        y: 100,
-        w: 800,
-        h: 200,
-        angle: 0,
         svgstr: '',
         imgfilesrc: ''
       }, // 管理底图数据
@@ -302,6 +297,19 @@ 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
@@ -320,11 +328,6 @@ export default {
       this.Pedwalk = []
       this.Detector = []
       this.CrossMapData = {
-        x: 400,
-        y: 100,
-        w: 800,
-        h: 200,
-        angle: 0,
         svgstr: '',
         imgfilesrc: ''
       }

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

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

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

@@ -12,30 +12,31 @@
 <template>
 <!-- 自定义底图 -->
 <div class="cross-map-part" ref="crossmap">
-  <!-- 底图可缩放 -->
-  <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 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> -->
 
-    <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 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>
 </template>
 
@@ -54,9 +55,6 @@ export default {
     isSeletable: {
       type: Boolean
     },
-    chooseIndex: {
-      type: Number
-    },
     pointchange: {
       type: Boolean
     }
@@ -64,17 +62,26 @@ export default {
   watch: {
     CrossMapData: {
       handler: function (val) {
-        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
+        this.crossmapitem = {
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+          angle: 0
+        }
         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 === '') {
@@ -86,19 +93,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) {
         // 解决光标样式被选区样式覆盖问题
@@ -125,32 +132,17 @@ 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.handleChangeData()
+      // this.$refs.crossmap.style.height = final.w + 'px'
+      // this.$refs.crossmap.style.width = final.h + 'px'
     },
     mapRotateStop (origin, final) {
       // 底图旋转停止
-      this.crossmapitem = JSON.parse(JSON.stringify(final))// 第四象限的角度是负值（开源组件接口返回），转化为正值便于理解
-      if (this.crossmapitem.angle < 0) {
-        this.crossmapitem.angle = this.crossmapitem.angle + 360
-      }
-      this.handleChangeData()
+      this.crossmapitem = JSON.parse(JSON.stringify(final))
     },
     resetMapSvg () {
       // 重绘底图svg
@@ -174,18 +166,6 @@ 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/package/kisscomps/components/DrawChannelization/drawsvg/firstImportCrossmap.vue

@@ -11,7 +11,7 @@
  **/
 <template>
   <div class="first-import-crossmap">
-    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString" @loadMapSize="loadMapSize" />
+    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString" />
     <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,9 +39,6 @@ export default {
     },
     loadSvgString (type, imgstr) {
       this.$emit('loadSvgString', type, imgstr)
-    },
-    loadMapSize (type, mapsize) {
-      this.$emit('loadMapSize', type, mapsize)
     }
   },
   mounted () {}

package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/countdownSvg.vue

@@ -21,7 +21,6 @@
       :selectable="isSeletable"
       :angle="item.angle"
       :aspectRatio="true"
-      :rotatable="false"
       @select="handleSelectIcon(item)"
       @dragstop="boxDragStop(item, ...arguments)"
       @resizestop="boxResizeStop(item, ...arguments)"
@@ -59,28 +58,18 @@ export default {
     }
   },
   watch: {
-    // item: {
-    //   handler: function (newval, oldval) {
-    //     if ((JSON.stringify(oldval) !== '{}')) {
-    //       // 更改原数据的位置大小数据
-    //       let data = {
-    //         ...this.CountdownData,
-    //         ...newval
-    //       }
-    //       let fields = Object.keys(newval)
-    //       this.$emit('changeTimeItem', data, fields)
-    //     }
-    //   }
-    // },
-    CountdownData: {
-      handler: function (val) {
-        if (this.UsageMode === 'draw') {
-          this.item.x = val.x
-          this.item.y = val.y
-          this.item.angle = val.angle
+    item: {
+      handler: function (newval, oldval) {
+        if ((JSON.stringify(oldval) !== '{}')) {
+          // 更改原数据的位置大小数据
+          let data = {
+            ...this.CountdownData,
+            ...newval
+          }
+          let fields = Object.keys(newval)
+          this.$emit('changeTimeItem', data, fields)
         }
-      },
-      deep: true
+      }
     },
     CountdownList: {
       handler: function (val) {
@@ -117,16 +106,13 @@ export default {
     boxDragStop (origin, final) {
       this.item = JSON.parse(JSON.stringify(final))
       this.$emit('handleSelectIcon', this.CountdownData)
-      this.handleChangeData()
     },
     boxResizeStop (origin, final) {
       this.resetSvg()
       this.item = JSON.parse(JSON.stringify(final))
-      this.handleChangeData()
     },
     boxRotateStop (origin, final) {
       this.item = JSON.parse(JSON.stringify(final))
-      this.handleChangeData()
     },
     resetSvg () {
       this.reset = false
@@ -143,15 +129,6 @@ export default {
       if (this.Fontsize < 14) {
         this.Fontsize = 14
       }
-    },
-    handleChangeData () {
-      let data = {
-        ...this.CountdownData,
-        ...this.item
-      }
-      let fields = Object.keys(this.item)
-      this.$emit('changeTimeItem', data, fields)
-      this.handleSelectIcon()
     }
   },
   created () {

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

@@ -27,11 +27,6 @@
     >
       <div v-if="UsageMode === 'draw'" class="centerText" :class="{'defaultBg': chooseIndex !== DetectorChartData.index, 'highlightBg': chooseIndex === DetectorChartData.index }" :style="{'width': item.w + 'px', 'height': item.h + 'px'}">
         <div class="detector-statistics-echarts" :id="'detectorStatisticsEcharts' + DetectorChartData.index"></div>
-        <!-- <div>
-          <div class="detector-rect"
-          :class="{'defaultVehicleBorder': DetectorData.detectortype === 1,
-          'defaultPedBorder': DetectorData.detectortype === 2 }"></div>
-        </div> -->
       </div>
       <div v-if="UsageMode === 'show'" class="centerText" :class="{'defaultBg': chooseIndex !== DetectorChartData.index, 'highlightBg': chooseIndex === DetectorChartData.index }" :style="{'width': item.w + 'px', 'height': item.h + 'px'}">
       </div>
@@ -66,20 +61,12 @@ export default {
           this.$emit('changeDetectorItem', data, fields)
         }
       }
-    },
-    DetectorChartData: {
-      handler: function (newval, oldval) {
-        console.log(this.Detector)
-      }
     }
   },
   props: {
     DetectorChartData: {
       type: Object
     },
-    Detector: {
-      type: Array
-    },
     isSeletable: {
       type: Boolean
     },
@@ -127,19 +114,16 @@ export default {
         xAxis: {
           type: 'category',
           axisLabel: {
-            show: false,
             textStyle: {
               color: getTheme() === 'light' ? '#666666' : '#B9BABF'
             }
           },
           axisTick: {
-            show: false,
             lineStyle: {
               color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
             }
           },
           axisLine: {
-            show: false,
             lineStyle: {
               color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
             }
@@ -158,7 +142,6 @@ export default {
             // }
           },
           axisLine: {
-            show: false,
             lineStyle: {
               color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
             }
@@ -176,7 +159,6 @@ export default {
             // }
           },
           axisLabel: {
-            show: false,
             textStyle: {
               color: getTheme() === 'light' ? '#666666' : '#B9BABF'
             }
@@ -186,14 +168,7 @@ export default {
           type: 'bar',
           barWidth: '10',
           itemStyle: {
-            color: 'red',
-            borderWidth: 0,
-            shadowBlur: {
-              shadowColor: 'rgba(255,255,255,0.31)',
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowOffsetY: 2
-            }
+            color: 'red'
           },
           data: this.flowsaturation
         }, {

package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/detectorIconSvg.vue

@@ -64,29 +64,26 @@ export default {
     }
   },
   watch: {
-    // item: {
-    //   handler: function (newval, oldval) {
-    //     if ((JSON.stringify(oldval) !== '{}')) {
-    //       // 更改原数据的位置大小数据
-    //       let data = {
-    //         ...this.DetectorData,
-    //         ...newval
-    //       }
-    //       let fields = Object.keys(newval)
-    //       this.$emit('changeDetectorItem', data, fields)
-    //     }
-    //   }
-    // }
-    DetectorData: {
-      handler: function (val) {
-        if (this.UsageMode === 'draw') {
-          this.item.x = val.x
-          this.item.y = val.y
-          this.item.angle = val.angle
+    item: {
+      handler: function (newval, oldval) {
+        if ((JSON.stringify(oldval) !== '{}')) {
+          // 更改原数据的位置大小数据
+          let data = {
+            ...this.DetectorData,
+            ...newval
+          }
+          let fields = Object.keys(newval)
+          this.$emit('changeDetectorItem', data, fields)
         }
-      },
-      deep: true
+      }
     }
+    // DetectorData: {
+    // 监听失效，不明原因，有时间可以看下
+    //   handler: function (val) {
+    //     debugger
+    //   },
+    //   deep: true
+    // }
 
     // CurChooseIcon: {
     //   handler: function (data) {
@@ -117,12 +114,10 @@ export default {
     boxDragStop (origin, final) {
       this.item = JSON.parse(JSON.stringify(final))
       this.$emit('handleSelectIcon', this.DetectorData)
-      this.handleChangeData()
     },
     boxResize (final) {
       // this.resetSvg()
       this.item = JSON.parse(JSON.stringify(final))
-      this.handleChangeData()
     },
     boxResizeStop (origin, final) {
       // this.resetSvg()
@@ -130,11 +125,6 @@ export default {
     },
     boxRotateStop (origin, final) {
       this.item = JSON.parse(JSON.stringify(final))
-      // 第四象限的角度是负值（开源组件接口返回），转化为正值便于理解
-      if (this.item.angle < 0) {
-        this.item.angle = this.item.angle + 360
-      }
-      this.handleChangeData()
     },
     resetSvg () {
       this.reset = false
@@ -148,15 +138,6 @@ export default {
     culculateFontsize () {
       // 根据倒计时图标大小，动态计算内部文字大小
       this.Fontsize = Math.floor(this.DetectorData.w / 140 * 20)
-    },
-    handleChangeData () {
-      let data = {
-        ...this.DetectorData,
-        ...this.item
-      }
-      let fields = Object.keys(this.item)
-      this.$emit('changeDetectorItem', data, fields)
-      this.handleSelectIcon()
     }
   },
   created () {

package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/laneIcon.vue

@@ -23,6 +23,12 @@
           d="M13.473,12.000 L13.473,-0.000 L16.000,-0.000 L16.000,12.000 L13.473,12.000 ZM8.982,-0.000 L11.508,-0.000 L11.508,12.000 L8.982,12.000 L8.982,-0.000 ZM4.491,-0.000 L7.017,-0.000 L7.017,12.000 L4.491,12.000 L4.491,-0.000 ZM-0.000,-0.000 L2.526,-0.000 L2.526,12.000 L-0.000,12.000 L-0.000,-0.000 Z"/>
         </svg>
       </div>
+      <!-- <div :class="laneicon.type === 'bicyclelane' ? '' : 'hide'">
+        <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :width="laneicon.width ? laneicon.width : iconw" :height="laneicon.height ? laneicon.height : iconh">
+          <path fill-rule="evenodd"  :fill="laneicon.active === true ? highlightColor : defaultColor"
+          d="M6.994,6.074 L3.495,0.003 L-0.004,6.074 L2.091,6.074 L2.091,16.007 L4.898,16.007 L4.898,6.074 L6.994,6.074 Z"/>
+        </svg>
+      </div> -->
       <div :class="laneicon.type === 'countdown' ? '' : 'hide'">
         <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :width="laneicon.width ? laneicon.width : iconw" :height="laneicon.height ? laneicon.height : iconh">
           <path fill-rule="evenodd"  :fill="laneicon.active === true ? highlightColor : defaultColor"