openatc-components 0.0.88 → 0.0.91

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

@@ -0,0 +1,91 @@
+/**
+ * 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="text" :class="{  'hasborder': bordervisible, 'noborder': !bordervisible}" @active="onActive()" v-if="!textActive">
+    {{text}}
+  </div>
+  <textarea ref="area" v-model="text" class="textarea" @blur="onBlur" v-else>
+  </textarea>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: '',
+      textActive: false,
+      bordervisible: true
+    }
+  },
+  props: {
+    content: {
+      type: String
+    }
+  },
+  watch: {
+    content: {
+      handler: function (val) {
+        this.text = val
+        if (val === '') {
+          this.bordervisible = true
+        } else {
+          this.bordervisible = false
+        }
+      }
+    }
+  },
+  mounted () {
+    this.text = this.content
+    if (this.content === '') {
+      this.bordervisible = true
+    } else {
+      this.bordervisible = false
+    }
+    this.$on('active', this.onActive)
+  },
+  methods: {
+    onActive () {
+      this.textActive = true
+      this.$nextTick(() => {
+        this.$refs.area.focus()
+      })
+    },
+    onBlur () {
+      this.textActive = false
+      this.$parent.$emit('content-inactive')
+      this.$emit('changeText', this.text)
+    }
+  }
+}
+</script>
+
+<style>
+  .text {
+    width: 100%;
+    height: 100%;
+    font-size: 20px; /*默认字体大小*/
+  }
+
+  .hasborder {
+    border: 1px solid  #ccc;
+  }
+
+  .noborder  {
+    border: none;
+  }
+
+  .textarea {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+</style>

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

@@ -0,0 +1,176 @@
+/**
+ * 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="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> -->
+
+    <!-- 底图取消操作 -->
+    <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>
+
+<script>
+export default {
+  data () {
+    return {
+      crossmapitem: {},
+      mapreset: false
+    }
+  },
+  props: {
+    CrossMapData: {
+      type: Object
+    },
+    isSeletable: {
+      type: Boolean
+    },
+    pointchange: {
+      type: Boolean
+    }
+  },
+  watch: {
+    CrossMapData: {
+      handler: function (val) {
+        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 === '') {
+            this.mapreset = false
+            return
+          }
+          this.mapreset = true
+        }
+      },
+      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) {
+        // 解决光标样式被选区样式覆盖问题
+        let dom = document.getElementById('crossmapdrr')
+        if (dom === null || dom === undefined) return
+        if (val) {
+          dom.style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,crosshair'
+          return
+        }
+        dom.style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,default'
+      }
+    }
+  },
+  created () {
+    this.crossmapitem = {
+      x: this.CrossMapData.x,
+      y: this.CrossMapData.y,
+      w: this.CrossMapData.w,
+      h: this.CrossMapData.h,
+      angle: this.CrossMapData.angle
+    }
+  },
+  methods: {
+    mapDragStop (origin, final) {
+      // 底图拖动停止
+      this.crossmapitem = JSON.parse(JSON.stringify(final))
+    },
+    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'
+    },
+    mapRotateStop (origin, final) {
+      // 底图旋转停止
+      this.crossmapitem = JSON.parse(JSON.stringify(final))
+    },
+    resetMapSvg () {
+      // 重绘底图svg
+      this.mapreset = false
+      this.$nextTick(() => {
+        this.mapreset = true
+      })
+    },
+    isEqual (obj1, obj2) {
+      if (!(obj1 instanceof Object) || !(obj2 instanceof Object)) {
+        return obj1 === obj2
+      }
+      if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+        return false
+      }
+      for (var attr in obj1) { // 逐个值进行判断
+        if (obj1[attr] instanceof Object && obj2[attr] instanceof Object) {
+          return this.isEqual(obj1[attr], obj2[attr])
+        } else if (obj1[attr] !== obj2[attr]) {
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,108 @@
+/**
+ * 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">
+  <drr
+    :x="item.x"
+    :y="item.y"
+    :w="item.w"
+    :h="item.h"
+    :angle="item.angle"
+    :selectable="isSeletable"
+    :aspectRatio="true"
+    :hasActiveContent="isSeletable"
+    @dragstop="boxDragStop(item, ...arguments)"
+    @resizestop="boxResizeStop(item, ...arguments)"
+    @rotatestop="boxRotateStop(item, ...arguments)"
+  >
+    <TextBox :content="TextData.text" @changeText="changeText" />
+  </drr>
+</div>
+</template>
+
+<script>
+import TextBox from './TextBox'
+export default {
+  data () {
+    return {
+      reset: true,
+      item: {}
+    }
+  },
+  props: {
+    TextData: {
+      type: Object
+    },
+    isSeletable: {
+      type: Boolean
+    }
+  },
+  components: {
+    TextBox
+  },
+  watch: {
+    item: {
+      handler: function (newval, oldval) {
+        if ((JSON.stringify(oldval) !== '{}')) {
+          // 更改原数据的位置大小数据
+          let data = {
+            ...this.TextData,
+            ...newval
+          }
+          let fields = Object.keys(newval)
+          this.$emit('changeText', data, fields)
+        }
+      }
+    }
+  },
+  created () {
+    this.IconW = this.TextData.w
+    this.IconH = this.TextData.h
+    this.item = {
+      x: this.TextData.x,
+      y: this.TextData.y,
+      w: this.TextData.w,
+      h: this.TextData.h,
+      angle: this.TextData.angle
+    }
+  },
+  methods: {
+    changeText (text) {
+      let textobj = JSON.parse(JSON.stringify(this.TextData))
+      textobj.text = text
+      this.$emit('changeText', textobj, ['text'])
+    },
+    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.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
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,48 @@
+/**
+ * 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="first-import-crossmap">
+    <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>
+    </div>
+  </div>
+</template>
+<script>
+import ImportDialog from './importDialog'
+export default {
+  name: 'first-import-crossmap',
+  components: {
+    ImportDialog
+  },
+  data () {
+    return {
+    }
+  },
+  watch: {
+  },
+  props: {
+  },
+  methods: {
+    clickOpen () {
+      this.$refs.importDialog.clickOpen()
+    },
+    loadSvgString (type, imgstr) {
+      this.$emit('loadSvgString', type, imgstr)
+    }
+  },
+  mounted () {}
+}
+</script>
+<style scoped>
+</style>

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

@@ -0,0 +1,182 @@
+/**
+ * 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="countdown-icon">
+    <drr
+      style="z-index: 10"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :selected="chooseIndex === CountdownData.index"
+      :selectable="isSeletable"
+      :angle="item.angle"
+      :aspectRatio="true"
+      @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'}">
+          {{$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="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>
+              <span style="float: left;">{{curPhase.phaseCountdown}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </drr>
+  </div>
+</template>
+<script>
+export default {
+  name: 'countdownsvg',
+  data () {
+    return {
+      defaultColor: '#ccc', // 默认状态颜色
+      item: {},
+      reset: true,
+      phaseCountdownList: [],
+      phaseCountdownIcon: 999,
+      Fontsize: 20 // 倒计时默认字号
+    }
+  },
+  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)
+        }
+      }
+    },
+    CountdownList: {
+      handler: function (val) {
+        // 接收倒计时数据进行显示
+        this.phaseCountdownList = val
+        this.culculateFontsize()
+      },
+      deep: true
+    }
+  },
+  props: {
+    CountdownData: {
+      type: Object
+    },
+    isSeletable: {
+      type: Boolean
+    },
+    CountdownList: {
+      type: Array
+    },
+    chooseIndex: {
+      type: Number
+    },
+    UsageMode: { // 当前图标模式： 绘制draw 展示show
+      type: String,
+      default: 'draw'
+    },
+    isHasPhase: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    boxDragStop (origin, final) {
+      this.item = JSON.parse(JSON.stringify(final))
+      this.$emit('handleSelectIcon', this.CountdownData)
+    },
+    boxResizeStop (origin, final) {
+      this.resetSvg()
+      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
+      })
+    },
+    handleSelectIcon (iconparams) {
+      this.$emit('handleSelectIcon', this.CountdownData)
+    },
+    culculateFontsize () {
+      // 根据倒计时图标大小，动态计算内部文字大小
+      this.Fontsize = Math.floor(this.CountdownData.w / 140 * 20)
+      if (this.Fontsize < 14) {
+        this.Fontsize = 14
+      }
+    }
+  },
+  created () {
+    this.item = {
+      x: this.CountdownData.x,
+      y: this.CountdownData.y,
+      w: this.CountdownData.w,
+      h: this.CountdownData.h,
+      angle: this.CountdownData.angle
+    }
+  }
+}
+</script>
+<style scoped>
+.centerText {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  z-index: 9;
+  display: flex;
+  align-items: center;
+}
+.showCenterText {
+  padding-left: 16px;
+}
+.phaseCountdown {
+  font-family: SourceHanSansCN-Regular;
+  font-weight: normal;
+  font-stretch: normal;
+  letter-spacing: 0px;
+  color: #fff;
+  margin: 0 auto;
+}
+.drawPhaseCountdown {
+  text-align: center;
+}
+.defaultBg {
+  border-radius: 50%;
+  background-color: rgba(94, 90, 90, 0.8);
+}
+.highlightBg {
+  border-radius: 50%;
+  background-color: #409eff;
+}
+.centerText .text {
+  display: inline-block;
+  color: #409eff;
+  margin-top: 20px;
+}
+</style>