openatc-components 0.0.88 → 0.0.91

package/src/kisscomps/components/DrawChannelization/drawsvg/iconSvg/pedroadIconSvg.vue

@@ -0,0 +1,195 @@
+/**
+ * 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 v-if="reset" class="pedroad-icon">
+    <!-- <div class="phaseText" :style="{'left': PedData.x - PedData.w / 2  - 10 + 'px', 'top': PedData.y - PedData.h / 2 - 10  + 'px'}">{{PedData.phaselabel}}</div> -->
+    <drr
+      :style="{'z-index': chooseIndex === PedData.index ? 9 : 0}"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :selected="chooseIndex === PedData.index"
+      :selectable="isSeletable"
+      :angle="item.angle"
+      @select="handleSelectIcon(item)"
+      @dragstop="boxDragStop(item, ...arguments)"
+      @resizestop="boxResizeStop(item, ...arguments)"
+      @rotatestop="boxRotateStop(item, ...arguments)"
+    >
+    <div class="phaseText"
+      style="top: -28px;"
+      :style="{'marginLeft': PedData.w / 2 + 'px', 'transform': `translateX(-50%) rotate(${-item.angle}deg)`}">{{PedData.phaselabel}}</div>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :viewBox="Viewbox.join(' ')"
+      :width="IconW"
+      :height="IconH"
+    >
+      <!-- 绘制模式 -->
+      <g v-if="UsageMode === 'draw'" :fill="chooseIndex === PedData.index ? highlightColor : defaultColor">
+        <rect v-for="(rectItem, index) in rectArr" :x="rectItem" :key="index" width="4" :height="IconH"></rect>
+      </g>
+      <!-- 展示模式 -->
+      <g v-if="UsageMode === 'show'" :fill="this.GreenFlashColor ? this.GreenFlashColor : (PedData.color ? PedData.color : showDefaultColor)">
+        <rect v-for="(rectItem, index) in rectArr" :x="rectItem" :key="index" width="4" :height="IconH"></rect>
+      </g>
+      </svg>
+    </drr>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ped-icon-svg',
+  data () {
+    return {
+      defaultColor: '#fff', // 默认状态颜色
+      highlightColor: '#409EFF', // 选中高亮状态颜色
+      item: {},
+      reset: true,
+      rectArr: [],
+      Viewbox: [0, 0, 206, 22],
+      showDefaultColor: '#fff', // 默认状态颜色
+      GreenFlashColor: undefined,
+      lastType: ''
+    }
+  },
+  watch: {
+    item: {
+      handler: function (newval, oldval) {
+        if ((JSON.stringify(oldval) !== '{}')) {
+          // 更改原数据的位置大小数据
+          let data = {
+            ...this.PedData,
+            ...newval,
+            viewbox: this.Viewbox
+          }
+          let fields = Object.keys(newval).concat('viewbox')
+          this.$emit('changePedItem', data, fields)
+        }
+      }
+    },
+    PedData: {
+      handler: function (val) {
+        if (!val.pedtype) return
+        if (val.pedtype === 4 && this.lastType === '') {
+          // 绿闪：绿-》灰-》绿 循环效果
+          this.GreenFlashColor = '#7bd66b'
+          this.GreenIntervalId = setInterval(() => {
+            this.GreenFlashColor =
+              !this.GreenFlashColor || this.GreenFlashColor === '#828282'
+                ? '#7bd66b'
+                : '#828282'
+          }, 500)
+          this.lastType = val.pedtype
+        }
+        if (
+          this.GreenIntervalId &&
+          val.pedtype !== 4 &&
+          val.pedtype !== this.lastType
+        ) {
+          clearInterval(this.GreenIntervalId)
+          this.GreenFlashColor = undefined
+          this.lastType = ''
+        }
+      },
+      deep: true
+    }
+    // ,
+    // chooseIndex: {
+    //   handler: function (val) {
+    //     debugger
+    //   }
+    // }
+  },
+  props: {
+    PedData: {
+      type: Object
+    },
+    isSeletable: {
+      type: Boolean
+    },
+    chooseIndex: {
+      type: Number
+    },
+    UsageMode: { // 当前图标模式： 绘制draw 展示show
+      type: String,
+      default: 'draw'
+    }
+  },
+  methods: {
+    boxDragStop (origin, final) {
+      this.item = JSON.parse(JSON.stringify(final))
+    },
+    boxResizeStop (origin, final) {
+      this.IconW = final.w + 'px'
+      this.IconH = final.h + 'px'
+      this.resetSvg()
+      this.drawRect(0, final.w, 8)
+      this.Viewbox[2] = final.w.toFixed(1)
+      this.Viewbox[3] = final.h.toFixed(1)
+      this.item = JSON.parse(JSON.stringify(final))
+    },
+    boxRotateStop (origin, final) {
+      this.item = JSON.parse(JSON.stringify(final))
+    },
+    resetSvg () {
+      this.reset = false
+      this.$nextTick(() => {
+        this.reset = true
+      })
+    },
+    drawRect (startX, length, step) {
+      this.rectArr = []
+      for (let i = startX; i < length; i = i + step) {
+        this.rectArr.push(i)
+      }
+    },
+    handleSelectIcon (iconparams) {
+      this.$emit('handleSelectIcon', this.PedData)
+    }
+  },
+  created () {
+    this.IconW = this.PedData.w
+    this.IconH = this.PedData.h
+    this.item = {
+      x: this.PedData.x,
+      y: this.PedData.y,
+      w: this.PedData.w,
+      h: this.PedData.h,
+      angle: this.PedData.angle
+    }
+    if (this.PedData.viewbox) {
+      this.Viewbox = this.PedData.viewbox
+    }
+    // this.drawRect(0, 206, 8)
+  },
+  mounted () {
+    if (this.PedData.w) {
+      // 按照加载后人行道的长绘制
+      this.drawRect(0, this.PedData.w, 8)
+    }
+  }
+}
+</script>
+<style scoped>
+.invisible {
+  visibility: hidden;
+}
+.hide {
+  display: none;
+}
+.st0 {
+fill: #ccc;
+}
+</style>

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

@@ -0,0 +1,71 @@
+/**
+ * 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>
+   <el-dialog
+      :title="$t('openatccomponents.plan.tip')"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
+      <input
+        v-if="dialogVisible"
+        type="file"
+        id="importimg"
+      />
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="dialogVisible = false">{{$t('openatccomponents.common.cancel')}}</el-button>
+        <el-button
+          type="primary"
+          @click="readAsText"
+        >{{$t('openatccomponents.common.confirm')}}</el-button>
+      </span>
+    </el-dialog>
+</template>
+<script>
+import Svgmethods from './utils/loadutils.js'
+export default {
+  name: 'import-dialog',
+  data () {
+    return {
+      dialogVisible: false
+    }
+  },
+  methods: {
+    clickOpen () {
+      this.dialogVisible = true
+    },
+    // 底图加载
+    readAsText () {
+      this.svgmethods = new Svgmethods()
+      this.svgmethods.clickOpen(this.loadSvgString)
+      this.dialogVisible = false
+    },
+    loadSvgString (type, content) {
+      if (type === 'error') {
+        if (content === 'size') {
+          this.$message.error(this.$t('openatccomponents.channelizationmap.importsizeerror'))
+        }
+        if (content === 'type') {
+          this.$message.error(this.$t('openatccomponents.channelizationmap.importtypeerror'))
+        }
+      } else {
+        this.$emit('loadSvgString', type, content)
+      }
+    }
+  },
+  mounted () {}
+}
+</script>
+<style scoped>
+</style>