openatc-components 0.0.85 → 0.0.90

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>

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

@@ -0,0 +1,222 @@
+/**
+ * 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="detector-chart-icon">
+    <drr
+      :style="{'z-index': chooseIndex === DetectorChartData.index ? 9 : 0}"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :selected="chooseIndex === DetectorChartData.index"
+      :selectable="isSeletable"
+      :angle="item.angle"
+      :resizable="false"
+      :rotatable="false"
+      @select="handleSelectIcon(item)"
+      @dragstop="boxDragStop(item, ...arguments)"
+    >
+      <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 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>
+    </drr>
+  </div>
+</template>
+<script>
+import echart from 'echarts'
+import { getTheme } from '../../../../../utils/auth.js'
+export default {
+  name: 'countdownsvg',
+  data () {
+    return {
+      defaultColor: 'DeepSkyBlue', // 默认状态颜色
+      item: {},
+      reset: true,
+      Fontsize: 16, // 默认字号
+      flowsaturation: [100],
+      occupancysaturation: [50]
+    }
+  },
+  watch: {
+    item: {
+      handler: function (newval, oldval) {
+        if ((JSON.stringify(oldval) !== '{}')) {
+          // 更改原数据的位置大小数据
+          let data = {
+            ...this.DetectorChartData,
+            ...newval
+          }
+          let fields = Object.keys(newval)
+          this.$emit('changeDetectorItem', data, fields)
+        }
+      }
+    }
+  },
+  props: {
+    DetectorChartData: {
+      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))
+      this.$emit('handleSelectIcon', this.DetectorChartData)
+    },
+    resetSvg () {
+      this.reset = false
+      this.$nextTick(() => {
+        this.reset = true
+      })
+    },
+    handleSelectIcon (iconparams) {
+      this.$emit('handleSelectIcon', this.DetectorChartData)
+    },
+    culculateFontsize () {
+      // 根据倒计时图标大小，动态计算内部文字大小
+      this.Fontsize = Math.floor(this.DetectorChartData.w / 140 * 20)
+    },
+    initEcharts () {
+      this.detectorEcharts = echart.init(document.getElementById('detectorStatisticsEcharts' + this.DetectorChartData.index))
+    },
+    getEchartsData () {
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '10',
+          bottom: '10',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            textStyle: {
+              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
+            }
+          },
+          axisTick: {
+            lineStyle: {
+              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          max: 100,
+          axisTick: {
+            show: false
+            // lineStyle: {
+            //   color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
+            // }
+          },
+          axisLine: {
+            lineStyle: {
+              color: getTheme() === 'light' ? '#D7DFE1' : '#30384D'
+            }
+          },
+          splitLine: {
+            show: false
+            // lineStyle: {
+            //   color: getTheme() === 'light' ? '#DCDFE6' : '#30384d'
+            // }
+          },
+          splitArea: {
+            show: false
+            // areaStyle: {
+            //   color: getTheme() === 'light' ? ['#fafafa', '#fff'] : ['#202940', '#1a2338']
+            // }
+          },
+          axisLabel: {
+            textStyle: {
+              color: getTheme() === 'light' ? '#666666' : '#B9BABF'
+            }
+          }
+        },
+        series: [{
+          type: 'bar',
+          barWidth: '10',
+          itemStyle: {
+            color: 'red'
+          },
+          data: this.flowsaturation
+        }, {
+          type: 'bar',
+          barWidth: '10',
+          itemStyle: {
+            color: 'green'
+          },
+          data: this.occupancysaturation
+        }]
+      }
+      this.detectorEcharts.setOption(option)
+    },
+    handleTooltipEvent () {
+      let _this = this
+      this.detectorEcharts.on('mouseover', function (params) {
+        _this.detectorEcharts.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex,
+          position: ['0', '0']
+        })
+      })
+      this.detectorEcharts.on('mouseout', function (params) {
+        _this.detectorEcharts.dispatchAction({
+          type: 'hideTip'
+        })
+      })
+    }
+  },
+  created () {
+    this.item = {
+      x: this.DetectorChartData.x,
+      y: this.DetectorChartData.y,
+      w: this.DetectorChartData.w,
+      h: this.DetectorChartData.h,
+      angle: this.DetectorChartData.angle
+    }
+  },
+  mounted () {
+    this.initEcharts()
+    this.getEchartsData()
+    this.handleTooltipEvent()
+  }
+}
+</script>
+<style scoped>
+.detector-statistics-echarts {
+  height: 100%;
+}
+</style>