openatc-components 0.0.23 → 0.0.26

package/package/kisscomps/components/KanBan/kanban.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="common-board-column">
+    <div class="common-board-column-header">
+      {{headerText}}
+    </div>
+    <div class="common-board-table-header">
+      <el-row :gutter="13">
+        <el-col :span="6">{{this.$t('openatccomponents.overview.phase')}}
+        </el-col>
+        <el-col :span="9">{{this.$t('openatccomponents.overview.phasesplit')}}
+        </el-col>
+        <el-col :span="9">{{this.$t('openatccomponents.detector.mode')}}
+        </el-col>
+      </el-row>
+    </div>
+    <draggable
+      class="common-board-column-content"
+      :list="list"
+      :options="options">
+      <div class="common-board-item" v-for="element in list" :key="element.id">
+        <el-row :gutter="13">
+          <el-col :span="6">
+            <el-tooltip class="item" effect="dark" placement="left">
+              <div slot="content">{{element.name}}</div>
+              <div class="common-phase-description">
+                <xdrdirselector Width="40px" Height="40px" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
+              </div>
+            </el-tooltip>
+        </el-col>
+        <el-col :span="9">
+          <el-input-number :controls="false" class="col-content" size="small" :min="element.minSplit" :max="255" :step="1" v-model.number="element.value" ref="type" :disabled="element.mode === 7"></el-input-number>
+        </el-col>
+        <el-col :span="9">
+          <el-select v-model="element.mode" class="col-content"  size="small" @change="doChange(element)" :placeholder="$t('openatccomponents.common.select')">
+            <el-option
+              v-for="item in modeOption"
+              :key="item.value"
+              :label="$t('openatccomponents.pattern.modeOption' + item.value)"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-col>
+        </el-row>
+      </div>
+    </draggable>
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
+
+export default {
+  name: 'kan-ban',
+  components: {
+    draggable,
+    xdrdirselector
+  },
+  data () {
+    return {
+      modeOption: [{
+        value: 1
+      }, {
+        value: 2
+      }, {
+        value: 3
+      }, {
+        value: 4
+      }, {
+        value: 5
+      }, {
+        value: 6
+      }, {
+        value: 7
+      }],
+      coordphaseOption: [{
+        value: 1
+      }, {
+        value: 2
+      }, {
+        value: 4
+      }]
+    }
+  },
+  props: {
+    headerText: {
+      type: String,
+      default: 'Header'
+    },
+    options: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    phaseList: {
+      type: Array
+    },
+    list: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    index: {
+      type: Number
+    },
+    ISActiveMask: {
+      type: Boolean,
+      default: true
+    },
+    // 当phase的描述为空时，显示的图形颜色。
+    MaskColor: {
+      type: String,
+      default: '#000000'
+    }
+  },
+  created () {
+    // this.addMinSplit()
+    // console.log(this.list, 'list')
+  },
+  watch: {
+    list: {
+      handler: function () {
+        let newList = this.list
+        // let list = this.$refs.type
+        // let cycle = 0
+        let n = this.index
+        // for (let i = 0; i < list.length; i++) {
+        //   cycle = cycle + Number(list[i].currentValue)
+        // }
+        // const globalParamModel = this.$store.getters.globalParamModel
+        // let MaxCycle = globalParamModel.getParamsByType('patternList')[n].cycle
+        // let pattern = globalParamModel.getParamsByType('patternList')[n]
+        // globalParamModel.getParamsByType('patternList')[n].cycle = this.getMaxCycle(pattern)
+        // this.addMinSplit()
+        this.$emit('handleSplit', n, newList)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    addMinSplit () {
+    //   const globalParamModel = this.$store.getters.globalParamModel
+    //   let phaseList = globalParamModel.getParamsByType('phaseList')
+      for (let ls of this.list) {
+        let phase = this.phaseList.filter((item) => {
+          return item.id === ls.id
+        })[0]
+        if (!phase.redyellow) {
+          phase.redyellow = 0
+        }
+        if (!phase.yellow) {
+          phase.yellow = 0
+        }
+        if (!phase.redclear) {
+          phase.redclear = 0
+        }
+        if (!phase.flashgreen) {
+          phase.flashgreen = 0
+        }
+        if (!phase.phasewalk) {
+          phase.phasewalk = 0
+        }
+        if (!phase.pedclear) {
+          phase.pedclear = 0
+        }
+        // let temp1 = phase.redyellow + phase.yellow + phase.redclear + phase.flashgreen // 绿信比的最小值要大于最小绿+黄灯+全红+绿闪
+        // let temp2 = phase.phasewalk + phase.pedclear
+        // if (temp1 > temp2) {
+        //   ls.minSplit = temp1
+        // } else {
+        //   ls.minSplit = temp2
+        // }
+        // if (ls.mode !== 7 && ls.value < ls.minSplit) {
+        //   ls.value = ls.minSplit
+        // }
+        // let temp1 = phase.yellow + phase.redclear + phase.flashgreen // 绿信比的最小值要大于最小绿+黄灯+全红+绿闪
+        let temp1 = phase.yellow + phase.redclear + phase.mingreen
+        let temp2 = phase.yellow + phase.redclear + phase.phasewalk + phase.pedclear
+        ls.minSplit = temp1 > temp2 ? temp1 : temp2
+        if (ls.mode !== 7 && ls.value < ls.minSplit) {
+          ls.value = ls.minSplit
+          this.$message.error(this.$t('edge.pattern.splitCheckMsg'))
+        }
+      }
+    },
+    getMaxCycle (pattern) {
+      let rings = pattern.rings
+      let maxCycle = 0
+      for (let ring of rings) {
+        if (ring.length === 0) continue
+        let cycle = 0
+        for (let r of ring) {
+          if (r.mode === 7) { // 忽略相位不计周期
+            continue
+          }
+          cycle = cycle + r.value
+        }
+        if (cycle > maxCycle) {
+          maxCycle = cycle
+        }
+      }
+      return maxCycle
+    },
+    doChange (val) {
+      // if (val.mode === 7) {
+      //   val.value = 0
+      // } else {
+      //   val.value = 30
+      // }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.col-content {
+  width: 100%;
+}
+</style>

package/package/kisscomps/components/OverLap/OverLap.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="overLap" v-if="checked" :style="{'width':'852px','margin':this.controlData ? '20px 0 0 0' : '0 0 0 377px'}">
+<div class="overLap" v-if="checked" :style="{'width':tentative?'100%':'852px','margin':this.controlData ? '20px 0 0 0' :tentative ? '0' : '0 0 0 377px'}">
     <div class="ring-first" v-for="(list, index1) in this.overlapDatas" :key="index1">
         <div v-for="(item,index2) in list.stageLists" :key="index2" >
             <div class="first-2">
@@ -62,6 +62,9 @@ export default {
     checked: {
       type: Boolean
     },
+    tentative: {
+      type: Boolean
+    },
     cycle: {
       type: Number
     },
@@ -76,6 +79,13 @@ export default {
       },
       // 深度观察监听
       deep: true
+    },
+    stageList: {
+      handler: function (val, oldVal) {
+        this.doAdd(this.stageList, this.overlap)
+      },
+      // 深度观察监听
+      deep: true
     }
   },
   created () {

package/package/kisscomps/components/PatternStatus/PatternStatus.vue

@@ -121,6 +121,9 @@ export default {
     phaseList: {
       type: Array
     },
+    patternList: {
+      type: Array
+    },
     localPatternList: {
       type: Array
     },
@@ -220,6 +223,14 @@ export default {
       // 深度观察监听
       deep: true
     },
+    patternList: {
+      handler: function (val, oldVal) {
+        this.handleCurrentChange(this.patternList[0].rings)
+        this.handleBarrierHeight()
+      },
+      // 深度观察监听
+      deep: true
+    },
     patternStatusList: {
       handler: function (val, oldVal) {
         this.handleBarrierHeight() // 计算屏障高度
@@ -293,8 +304,10 @@ export default {
       return stagesTemp
     },
     getIndexStage () {
+      if (this.localPatternList.length === 0) return
       for (let i = 0; i < this.localPatternList.length; i++) {
         if (this.controlData.patternid === this.localPatternList[i].id) {
+          if (!this.localPatternList[i].stagesList) return
           let stageCycleList = this.localPatternList[i].stagesList.map(item => {
             return item.stageSplit ? item.stageSplit : 0
           })
@@ -492,7 +505,6 @@ export default {
           if (ring.sum) {
             obj.split = split + ring.sum
             obj.greenWidth = ((split - currPhase.redclear - currPhase.yellow - currPhase.flashgreen + ring.sum) / (this.max ? this.max : this.newCycle) * 100).toFixed(3) + '%'
-            // obj.hideWidth = (ring.sum / (this.max ? this.max : this.newCycle) * 100).toFixed(3) + '%'
           } else {
             obj.split = split
             obj.greenWidth = ((split - currPhase.redclear - currPhase.yellow - currPhase.flashgreen) / (this.max ? this.max : this.newCycle) * 100).toFixed(3) + '%'
@@ -511,8 +523,7 @@ export default {
       }
     },
     setBarrier (ringTeam, val) { // 添加特征参数barrier
-      // let patternList = this.globalParamModel.getParamsByType('patternList')
-      this.patternStatusList.map(item => {
+      this.patternList.map(item => {
         if (item.id === this.patternIds) {
           const patternObjs = {}
           val.forEach(l => {

package/package/kisscomps/components/PhaseMarker/index.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import PhaseM from './phasemarker.vue'
+
+let PhaseMarker = Vue.extend(PhaseM)
+Vue.component('phase-marker', PhaseMarker)
+export default PhaseMarker

package/package/kisscomps/components/PhaseMarker/phasemarker.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="wrap" style="width: 200px; height: 60px;"
+                    v-if="isdestroy"
+                    v-show="PhaseMarkerState.isShow">
+    <phase v-if="showLevel === 1"></phase>
+    <phaseCount v-if="showLevel === 2"></phaseCount>
+    <phaseCountCycle v-if="showLevel === 3"></phaseCountCycle>
+    <div class="dirwrap">
+      <xdrdirselector
+        Width="40px" Height="40px"
+        :showlist="dirshow">
+      </xdrdirselector>
+    </div>
+    <div class="operation-pattern" v-if="showLevel > 1">
+        <div class="cutdown-num" :style="phaseCountdownColor">
+            <span>{{params.countdown}}/{{params.split}}</span>
+        </div>
+        <div class="cutdown-name">
+            <span>{{params.control}}</span>
+        </div>
+    </div>
+    <div class="pattern-name" v-if="showLevel > 2">
+        <div class="planname-top">
+        <div class="cycle">
+          <span style="margin-left: 6px;">{{params.cycle}}</span>
+        </div>
+        <div class="offset">
+          <span style="margin-right: 6px;">{{params.offset}}</span>
+        </div>
+      </div>
+      <div class="planname-bottom">
+        <span>{{params.curpattern}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import xdrdirselector from '../XRDDirSelector'
+import PatternSvg from './svg/patternSvg'
+import PhaseSvg from './svg/phaseSvg'
+import phase from './svg/phase'
+import phaseCount from './svg/phaseCount'
+import phaseCountCycle from './svg/phaseCountCycle'
+export default {
+  name: 'phasemarker',
+  components: {
+    xdrdirselector,
+    PatternSvg,
+    PhaseSvg,
+    phaseCountCycle,
+    phaseCount,
+    phase
+  },
+  props: {
+    dirshow: {
+      type: Array,
+      default: () => []
+    },
+    params: {
+      type: Object,
+      default: function () {
+        return {
+          countdown: 0,
+          split: 0,
+          control: 0,
+          cycle: 0,
+          offset: 0,
+          curpattern: 'NO PLAN'
+        }
+      }
+    },
+    showLevel: {
+      type: Number,
+      default: 3
+    }
+  },
+  data () {
+    return {
+      timer: 0,
+      isdestroy: true,
+      phaseCountdownColor: { // 控制倒计时的颜色与相位方向颜色一致
+        color: '#333333'
+      },
+      PhaseMarkerState: {
+        isShow: true
+      }
+    }
+  },
+  computed: {
+  },
+  methods: {
+    show (dirshow, params, showLevel) {
+      this.dirshow = dirshow
+      this.params = params
+      this.showLevel = showLevel
+      this.phaseCountdownColor = {
+        color: params.phaseCountdownColor
+      }
+      clearInterval(this.timer)
+      let countdown = params.countdown
+      if (countdown) {
+        this.timer = setInterval(() => {
+          params.countdown = params.countdown > 0 ? params.countdown - 1 : 0
+        }, 1000)
+      }
+    }
+  },
+  mounted () {
+  },
+  created () {
+  },
+  destroyed () {
+    clearInterval(this.timer)
+  }
+}
+</script>
+
+<style scoped>
+.patternsvg {
+  height: 60PX;
+  position: relative;
+}
+.pattern-mess {
+  float: left;
+}
+.dirwrap {
+  position:relative;
+  margin-top: -45PX;
+  left: 7PX;
+  width: 40PX;
+  height: 39PX;
+  z-index: 9;
+}
+.operation-pattern {
+  position:relative;
+  margin-top: -45PX;
+  width: 60PX;
+  height: 39PX;
+  left: 60PX;
+  z-index: 9;
+}
+.pattern-name {
+  position:relative;
+  margin-top: -43PX;
+  width: 79PX;
+  height: 39PX;
+  margin-left: 110PX;
+  z-index: 9;
+}
+.cycle {
+  position:absolute;
+  width: 39.5PX;
+  height: 18PX;
+  font-size: 15PX;
+  text-align: center;
+  margin-right: 5PX;
+  color: #666666;
+}
+.offset {
+  position:absolute;
+  width: 39.5PX;
+  height: 18PX;
+  font-size: 15PX;
+  text-align: center;
+  color: #666666;
+  margin-left: 39.5PX;
+}
+.cutdown-num {
+  width: 50PX;
+  height: 19PX;
+  margin-left: auto;
+  margin-top: 2PX;
+  margin-right: auto;
+  font-size: 15PX;
+  text-align: center;
+}
+.cutdown-name {
+  width: 50PX;
+  height: 19PX;
+  margin-left: auto;
+  margin-bottom: 2PX;
+  margin-right: auto;
+  font-size: 12PX;
+  text-align: center;
+  color: #333333;
+}
+.planname-top {
+  height: 18PX;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2PX;
+  font-size: 15PX;
+  text-align: center;
+  color: #666666;
+}
+.planname-bottom {
+  height: 18PX;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2PX;
+  font-size: 12PX;
+  text-align: center;
+  color: #333333;
+}
+.wrap span{
+  -moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -o-user-select:none;
+  -khtml-user-select:none;
+  -webkit-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+}
+</style>

package/package/kisscomps/components/PhaseMarker/svg/patternSvg.vue

@@ -0,0 +1,121 @@
+/**
+ * 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>
+    <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 150.09 46.54">
+            <defs>
+            <filter id="luminosity-invert" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/></filter>
+            <mask id="mask" x="1.15" y="1.03" width="44" height="44" maskUnits="userSpaceOnUse"><g class="cls-7">
+                <image width="44" height="44" transform="translate(1.15 1.03)" xlink:href="data:image/png;base64,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"/></g>
+                </mask>
+                </defs>
+                <title>资源 72</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1">
+                    <path :style="{'fill':backgroundColor}" id="更换颜色1" class="cls-1" d="M23.27,4A19.28,19.28,0,1,0,42.55,23.27,19.28,19.28,0,0,0,23.27,4Z"/>
+                    <path :style="{'fill':backgroundColor}" id="更换颜色" class="cls-2" d="M143.14,7.67H40.06a23.23,23.23,0,0,1,.46,30.68H143.15l6.44-4.86V13.09Z"/>
+                    <path class="cls-3" d="M14.45,43.72A22.27,22.27,0,0,1,11,4.67.5.5,0,0,0,11.16,4a.49.49,0,0,0-.69-.15,23.28,23.28,0,0,0,3.58,40.81.45.45,0,0,0,.2,0,.5.5,0,0,0,.46-.3A.51.51,0,0,0,14.45,43.72Z"/>
+                    <path class="cls-3" d="M15,2.59A22.3,22.3,0,0,1,35.11,4.41a.52.52,0,0,0,.27.07.5.5,0,0,0,.26-.92,23.31,23.31,0,0,0-21-1.9.5.5,0,0,0-.28.65A.5.5,0,0,0,15,2.59Z"/>
+                    <path class="cls-3" d="M3.49,23.27A19.78,19.78,0,1,0,23.27,3.49,19.8,19.8,0,0,0,3.49,23.27Zm38.56,0A18.78,18.78,0,1,1,23.27,4.49,18.8,18.8,0,0,1,42.05,23.27Z"/>
+                    <path class="cls-3" d="M143.32,7.17H40a.5.5,0,0,0-.59.06.5.5,0,0,0,0,.71,22.27,22.27,0,0,1-16.15,37.6,22.44,22.44,0,0,1-4.41-.44.51.51,0,0,0-.59.39.5.5,0,0,0,.39.59,23,23,0,0,0,4.61.46,23.2,23.2,0,0,0,17.26-7.69H143.32l6.77-5.11V12.85Zm5.77,26.07L143,37.85H41.57a23.73,23.73,0,0,0-.41-29.68H143l6.13,5.15Z"/>
+                    <path class="cls-3" d="M9.5,34.08c.22.28.45.55.68.81l.37-.33c-.22-.26-.44-.52-.65-.79Z"/>
+                    <path class="cls-3" d="M7.32,30.48c.14.32.3.64.46.95l.44-.24c-.16-.3-.31-.6-.45-.92Z"/>
+                    <path class="cls-3" d="M6.55,26.37l-.5.09c.07.35.14.69.23,1l.48-.12C6.68,27,6.61,26.7,6.55,26.37Z"/>
+                    <path class="cls-3" d="M10.91,35.66c.25.25.5.49.77.72L12,36c-.26-.23-.51-.46-.75-.7Z"/>
+                    <path class="cls-3" d="M7,28.36l-.48.15c.11.34.22.67.35,1l.47-.18C7.25,29,7.14,28.69,7,28.36Z"/>
+                    <path class="cls-3" d="M8.3,32.35c.18.3.37.59.58.88L9.29,33c-.2-.28-.39-.57-.56-.86Z"/>
+                    <path class="cls-3" d="M21.11,5.9l.06.49,1-.09,0-.5C21.81,5.82,21.46,5.85,21.11,5.9Z"/>
+                    <path class="cls-3" d="M12.49,37.06c.28.22.56.43.85.63l.28-.42c-.28-.19-.55-.39-.82-.6Z"/>
+                    <path class="cls-3" d="M6.3,24.33l-.5,0c0,.35,0,.7.1,1.05l.49-.06Q6.33,24.84,6.3,24.33Z"/>
+                    <path class="cls-3" d="M20.13,40.49c.35.07.7.12,1.05.16l.06-.5q-.51-.06-1-.15Z"/>
+                    <path class="cls-3" d="M14.23,38.26c.3.18.61.36.92.52l.23-.44c-.3-.16-.6-.33-.89-.51Z"/>
+                    <path class="cls-3" d="M16.1,39.24c.32.15.65.28,1,.41l.18-.47c-.33-.12-.64-.25-1-.39Z"/>
+                    <path class="cls-3" d="M18.08,40c.34.11.68.2,1,.28l.12-.48c-.34-.08-.67-.18-1-.28Z"/>
+                    <path class="cls-3" d="M16.25,7.78,16,7.32c-.32.15-.63.3-.95.47l.24.44C15.63,8.07,15.94,7.92,16.25,7.78Z"/>
+                    <path class="cls-3" d="M14.44,8.74l-.26-.43c-.3.18-.6.38-.89.58l.29.41A9.74,9.74,0,0,1,14.44,8.74Z"/>
+                    <path class="cls-3" d="M12.75,9.91l-.31-.4-.81.68.34.38Q12.35,10.23,12.75,9.91Z"/>
+                    <path class="cls-3" d="M11.22,11.27l-.35-.35c-.25.25-.49.51-.73.77l.38.33C10.75,11.76,11,11.51,11.22,11.27Z"/>
+                    <path class="cls-3" d="M18.16,7.05,18,6.57c-.33.1-.67.22-1,.35l.18.46C17.51,7.26,17.84,7.15,18.16,7.05Z"/>
+                    <path class="cls-3" d="M20.16,6.55l-.09-.49c-.35.06-.7.14-1,.22l.12.49C19.48,6.69,19.82,6.61,20.16,6.55Z"/>
+                    <path class="cls-3" d="M6.29,22.28l-.5,0c0,.34,0,.68,0,1v0l.5,0C6.27,22.94,6.28,22.61,6.29,22.28Z"/>
+                    <path class="cls-3" d="M9.86,12.81l-.39-.31c-.22.28-.43.56-.63.85l.41.29C9.45,13.36,9.65,13.08,9.86,12.81Z"/>
+                    <path class="cls-3" d="M6.54,20.24,6,20.15c-.06.35-.11.69-.15,1.05l.49.05C6.42,20.91,6.47,20.58,6.54,20.24Z"/>
+                    <path class="cls-3" d="M7,18.25l-.48-.15c-.1.33-.2.67-.28,1l.49.12Q6.87,18.73,7,18.25Z"/>
+                    <path class="cls-3" d="M7.75,16.32l-.46-.2c-.15.32-.28.65-.41,1l.47.17C7.47,17,7.61,16.63,7.75,16.32Z"/>
+                    <path class="cls-3" d="M8.7,14.5l-.43-.26c-.18.31-.36.61-.52.93l.44.23C8.35,15.09,8.52,14.8,8.7,14.5Z"/>
+                    <path class="cls-3" d="M40,20.14l.5-.09c-.07-.35-.14-.7-.23-1l-.48.13C39.85,19.47,39.92,19.8,40,20.14Z"/>
+                    <path class="cls-3" d="M37,12.43a10.41,10.41,0,0,0-.68-.81L36,12c.23.26.45.52.66.79Z"/>
+                    <path class="cls-3" d="M40.24,22.17l.5,0c0-.35-.06-.7-.1-1.05l-.5.06C40.18,21.49,40.22,21.83,40.24,22.17Z"/>
+                    <path class="cls-3" d="M34,9.46c-.28-.22-.56-.43-.85-.63l-.28.41c.28.2.56.4.83.61Z"/>
+                    <path class="cls-3" d="M35.61,10.85q-.37-.37-.78-.72l-.33.38c.26.22.51.46.76.7Z"/>
+                    <path class="cls-3" d="M39.21,16c-.15-.32-.3-.64-.47-1l-.44.23c.16.3.31.61.45.92Z"/>
+                    <path class="cls-3" d="M39.49,18.15,40,18c-.1-.34-.22-.67-.34-1l-.47.18C39.27,17.5,39.38,17.82,39.49,18.15Z"/>
+                    <path class="cls-3" d="M22.26,40.24l0,.5,1,0h.05l0-.5C22.93,40.27,22.59,40.26,22.26,40.24Z"/>
+                    <path class="cls-3" d="M32.28,8.26c-.3-.18-.61-.35-.92-.52l-.23.45c.3.15.6.32.89.5Z"/>
+                    <path class="cls-3" d="M26.37,6c-.34-.06-.69-.11-1-.15l-.06.49c.34,0,.68.09,1,.15Z"/>
+                    <path class="cls-3" d="M23.22,5.77l.05.5c.33,0,.65,0,1,0l0-.5c-.33,0-.66,0-1,0Z"/>
+                    <path class="cls-3" d="M25.4,40.65l-.07-.5q-.49.06-1,.09l0,.5C24.7,40.72,25.05,40.69,25.4,40.65Z"/>
+                    <path class="cls-3" d="M28.42,6.54c-.33-.11-.67-.2-1-.28l-.11.48,1,.27Z"/>
+                    <path class="cls-3" d="M30.41,7.28c-.33-.14-.65-.28-1-.4l-.18.47c.32.12.64.25.95.39Z"/>
+                    <path class="cls-3" d="M38.22,14.16c-.18-.3-.38-.59-.58-.88l-.41.28c.2.28.38.57.56.86Z"/>
+                    <path class="cls-3" d="M32.07,37.82l.26.43c.3-.19.6-.38.89-.58l-.29-.41C32.65,37.46,32.37,37.64,32.07,37.82Z"/>
+                    <path class="cls-3" d="M30.26,38.77l.2.46c.33-.14.64-.3.95-.46l-.23-.45C30.88,38.48,30.57,38.63,30.26,38.77Z"/>
+                    <path class="cls-3" d="M33.76,36.65l.31.4c.27-.22.55-.45.81-.68L34.55,36C34.29,36.22,34,36.44,33.76,36.65Z"/>
+                    <path class="cls-3" d="M35.29,35.29l.36.36c.25-.25.49-.51.72-.77L36,34.54C35.77,34.8,35.54,35.05,35.29,35.29Z"/>
+                    <path class="cls-3" d="M40.27,23.27c0,.34,0,.69,0,1l.5,0c0-.34,0-.7,0-1.05V23.2h-.5Z"/>
+                    <path class="cls-3" d="M28.34,39.5l.15.48c.34-.1.67-.22,1-.34l-.18-.47C29,39.29,28.67,39.4,28.34,39.5Z"/>
+                    <path class="cls-3" d="M26.35,40l.09.5c.35-.07.69-.14,1-.23l-.12-.48C27,39.86,26.69,39.93,26.35,40Z"/>
+                    <path class="cls-3" d="M40,26.33l.49.09c.06-.34.11-.69.16-1l-.5-.06C40.11,25.66,40.06,26,40,26.33Z"/>
+                    <path class="cls-3" d="M39.51,28.32l.47.15c.11-.33.2-.67.29-1l-.49-.12C39.7,27.67,39.61,28,39.51,28.32Z"/>
+                    <path class="cls-3" d="M37.82,32.06l.43.26c.18-.3.36-.6.52-.92l-.44-.23C38.17,31.47,38,31.77,37.82,32.06Z"/>
+                    <path class="cls-3" d="M36.66,33.75l.39.31c.22-.27.42-.56.63-.85l-.41-.28C37.07,33.21,36.87,33.49,36.66,33.75Z"/>
+                    <path class="cls-3" d="M38.78,30.25l.46.2c.14-.32.27-.64.4-1l-.47-.18C39.05,29.62,38.92,29.94,38.78,30.25Z"/>
+                    <g class="cls-4"><g class="cls-5"><path class="cls-6" d="M23.27,4A19.28,19.28,0,1,0,42.55,23.27,19.28,19.28,0,0,0,23.27,4Z"/></g></g></g></g>
+            </svg>
+</template>
+<script>
+export default {
+  name: 'patternsvg',
+  data () {
+    return {
+    }
+  },
+  props: {
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    }
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+<style scoped>
+.cls-2 {
+    opacity:0.85;
+}
+.cls-3 {
+    fill:#4c9fe8;
+}
+.cls-4 {
+    mask:url(#mask);
+}
+.cls-5 {
+    opacity:0.59;
+}
+.cls-6 {
+    fill:#4c9fe8;
+}
+.cls-7 {
+    filter:url(#luminosity-invert);
+}
+</style>