openatc-components 0.0.103 → 0.0.104

package/package/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 === '') {
@@ -90,22 +83,13 @@ export default {
           }
           this.mapreset = true
         }
+        this.$nextTick(() => {
+          // 底图大小改变后，需要同步svg的宽高
+          this.synchroSVGSize()
+        })
       },
       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)
-        }
-      }
-    },
     pointchange: {
       handler: function (val) {
         // 解决光标样式被选区样式覆盖问题
@@ -132,17 +116,39 @@ export default {
     mapDragStop (origin, final) {
       // 底图拖动停止
       this.crossmapitem = JSON.parse(JSON.stringify(final))
+      this.handleChangeData()
     },
+    synchroSVGSize () {
+      let svgdoms = document.querySelectorAll('.cross-map svg')
+      if (svgdoms) {
+        for (let i = 0; i < svgdoms.length; i++) {
+          let svgdom = svgdoms[i]
+          // 解决svg源文件里有宽高属性，此时对svg父容器改变宽高，svg尺寸不会改变的问题
+          // 因此要修改svg文件的宽高属性
+          if (svgdom.getAttribute('width')) {
+            svgdom.setAttribute('width', this.crossmapitem.w + 'px')
+          }
+          if (svgdom.getAttribute('height')) {
+            svgdom.setAttribute('height', this.crossmapitem.h + 'px')
+          }
+        }
+      }
+    },
+
     mapResizeStop (origin, final) {
       // 底图改变大小停止
       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.synchroSVGSize()
+      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 +172,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/package/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 () {}

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

@@ -21,18 +21,19 @@
       :selectable="isSeletable"
       :angle="item.angle"
       :aspectRatio="true"
+      :rotatable="false"
       @select="handleSelectIcon(item)"
       @dragstop="boxDragStop(item, ...arguments)"
       @resizestop="boxResizeStop(item, ...arguments)"
       @rotatestop="boxRotateStop(item, ...arguments)"
     >
       <div v-if="UsageMode === 'draw'" class="centerText" :class="{'defaultBg': chooseIndex !== CountdownData.index, 'highlightBg': chooseIndex === CountdownData.index }" :style="{'width': item.w + 'px', 'height': item.h + 'px'}">
-        <div class="phaseCountdown drawPhaseCountdown" :style="{'width': item.w + 'px', 'fontSize': Fontsize + 'px'}">
+        <div class="phaseCountdown drawPhaseCountdown" :style="{'width': item.w + 'px', 'fontSize': textFontSize ? textFontSize + 'px' : Fontsize + 'px'}">
           {{$t('openatccomponents.channelizationmap.countdown')}}
         </div>
       </div>
-      <div v-if="UsageMode === 'show' && isHasPhase" class="centerText showCenterText" :class="{'defaultBg': chooseIndex !== CountdownData.index, 'highlightBg': chooseIndex === CountdownData.index }" :style="{'width': item.w + 'px', 'height': item.h + 'px'}">
-        <div class="phaseCountdown" :style="{'width': item.w + 'px', 'fontSize': Fontsize + 'px'}">
+      <div v-if="UsageMode === 'show' && isHasPhase && !customText" class="centerText showCenterText" :class="{'defaultBg': chooseIndex !== CountdownData.index, 'highlightBg': chooseIndex === CountdownData.index }" :style="{'width': item.w + 'px', 'height': item.h + 'px', 'backgroundColor': bcgColor}">
+        <div class="phaseCountdown" :style="{'width': item.w + 'px', 'fontSize': textFontSize ? textFontSize + 'px' : Fontsize + 'px'}">
           <div v-if="phaseCountdownList.length > 0">
             <div v-for="curPhase in phaseCountdownList" :key="curPhase.id" :style="{color: curPhase.phaseCountdownColor}">
               <span style="float: left;color: #fff;margin-right: 5px;">{{$t('openatccomponents.overview.phase')}}{{curPhase.id}}:</span>
@@ -41,6 +42,11 @@
           </div>
         </div>
       </div>
+      <div v-if="UsageMode === 'show' && customText"
+        class="defaultBg"
+        :style="{'width': item.w + 'px', 'height': item.h + 'px', 'fontSize': textFontSize ? textFontSize + 'px' : Fontsize + 'px', 'backgroundColor': bcgColor}">
+        <div class="customText">{{customText}}</div>
+      </div>
     </drr>
   </div>
 </template>
@@ -58,18 +64,28 @@ 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)
+    // 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
         }
-      }
+      },
+      deep: true
     },
     CountdownList: {
       handler: function (val) {
@@ -100,19 +116,35 @@ export default {
     isHasPhase: {
       type: Boolean,
       default: true
+    },
+    showCustomText: {
+      type: Boolean
+    },
+    customText: { // 圆内所显示自定义文字内容，如果传了，显示优先级高于倒计时文字
+      type: String
+    },
+    bcgColor: { // 圆背景色
+      type: String,
+      default: 'rgba(94, 90, 90, 0.8)'
+    },
+    textFontSize: { // 所显示文字大小，如果传了，优先级高于文字按宽度适配大小
+      type: String
     }
   },
   methods: {
     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
@@ -125,10 +157,20 @@ export default {
     },
     culculateFontsize () {
       // 根据倒计时图标大小，动态计算内部文字大小
+      if (this.textFontSize) return
       this.Fontsize = Math.floor(this.CountdownData.w / 140 * 20)
       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,6 +27,11 @@
     >
       <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>
@@ -61,12 +66,20 @@ 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
     },
@@ -114,16 +127,19 @@ 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'
             }
@@ -142,6 +158,7 @@ export default {
             // }
           },
           axisLine: {
+            show: false,
             lineStyle: {
               color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
             }
@@ -159,6 +176,7 @@ export default {
             // }
           },
           axisLabel: {
+            show: false,
             textStyle: {
               color: getTheme() === 'light' ? '#666666' : '#B9BABF'
             }
@@ -168,7 +186,14 @@ export default {
           type: 'bar',
           barWidth: '10',
           itemStyle: {
-            color: 'red'
+            color: 'red',
+            borderWidth: 0,
+            shadowBlur: {
+              shadowColor: 'rgba(255,255,255,0.31)',
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowOffsetY: 2
+            }
           },
           data: this.flowsaturation
         }, {

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

@@ -64,26 +64,29 @@ 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)
+    // 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
         }
-      }
+      },
+      deep: true
     }
-    // DetectorData: {
-    // 监听失效，不明原因，有时间可以看下
-    //   handler: function (val) {
-    //     debugger
-    //   },
-    //   deep: true
-    // }
 
     // CurChooseIcon: {
     //   handler: function (data) {
@@ -114,10 +117,12 @@ 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()
@@ -125,6 +130,11 @@ 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
@@ -138,6 +148,15 @@ 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,12 +23,6 @@
           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"

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

@@ -323,41 +323,48 @@ export default {
     }
   },
   watch: {
-    item: {
-      handler: function (newval, oldval) {
-        if (JSON.stringify(oldval) !== '{}') {
-          // 更改原数据的位置大小数据
-          let data = {
-            ...this.Data,
-            ...newval
-          }
-          let fields = Object.keys(newval)
-          this.$emit('changeMotorwayItem', data, fields)
-        }
-      }
-    },
+    // item: {
+    //   handler: function (newval, oldval) {
+    //     if (JSON.stringify(oldval) !== '{}') {
+    //       // 更改原数据的位置大小数据
+    //       let data = {
+    //         ...this.Data,
+    //         ...newval
+    //       }
+    //       let fields = Object.keys(newval)
+    //       this.$emit('changeMotorwayItem', data, fields)
+    //     }
+    //   }
+    // },
     Data: {
       handler: function (val) {
         this.iconnameArr = val.icondirename
-        if (val.type === 4 && this.lastType === '') {
+        if (this.UsageMode === 'draw') {
+          this.item.x = val.x
+          this.item.y = val.y
+          this.item.angle = val.angle
+        }
+        if (this.UsageMode === 'show') {
+          if (val.type === 4 && this.lastType === '') {
           // 绿闪：绿-》灰-》绿 循环效果
-          this.GreenFlashColor = '#77fb65'
-          this.GreenIntervalId = setInterval(() => {
-            this.GreenFlashColor =
+            this.GreenFlashColor = '#77fb65'
+            this.GreenIntervalId = setInterval(() => {
+              this.GreenFlashColor =
               !this.GreenFlashColor || this.GreenFlashColor === '#828282'
                 ? '#77fb65'
                 : '#828282'
-          }, 500)
-          this.lastType = val.type
-        }
-        if (
-          this.GreenIntervalId &&
+            }, 500)
+            this.lastType = val.type
+          }
+          if (
+            this.GreenIntervalId &&
           val.type !== 4 &&
           val.type !== this.lastType
-        ) {
-          clearInterval(this.GreenIntervalId)
-          this.GreenFlashColor = undefined
-          this.lastType = ''
+          ) {
+            clearInterval(this.GreenIntervalId)
+            this.GreenFlashColor = undefined
+            this.lastType = ''
+          }
         }
       },
       deep: true
@@ -388,16 +395,22 @@ export default {
   methods: {
     boxDragStop (origin, final) {
       this.item = JSON.parse(JSON.stringify(final))
-      this.$emit('handleSelectIcon', this.Data)
+      this.handleChangeData()
     },
     boxResizeStop (origin, final) {
       this.IconW = final.w + 'px'
       this.IconH = final.h + 'px'
       this.resetSvg()
       this.item = JSON.parse(JSON.stringify(final))
+      this.handleChangeData()
     },
     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
@@ -405,8 +418,17 @@ export default {
         this.reset = true
       })
     },
-    handleSelectIcon (iconparams) {
+    handleSelectIcon () {
       this.$emit('handleSelectIcon', this.Data)
+    },
+    handleChangeData () {
+      let data = {
+        ...this.Data,
+        ...this.item
+      }
+      let fields = Object.keys(this.item)
+      this.$emit('changeMotorwayItem', data, fields)
+      this.handleSelectIcon()
     }
   },
   created () {