openatc-components 0.0.2 → 0.0.3

package/package/kisscomps/components/CircleMenu/KissCircleMenu.vue

@@ -1,398 +0,0 @@
-<template>
-  <div class='quick-menu' ref='quickMenu' :style='quickMenuStyle'>
-    <div v-for='(n,key) in menuCount' class='sub-menu' :style='getSubMenu(n-1)' :key='key'>
-        <router-link v-if='menuUrlList[n-1].isLink' :to='menuUrlList[n-1].url' :target='openNewTab' :style='subMenuStyle' @mouseover.stop='mouseEnterSubMenu' @mouseout.stop='mouseOutSubMenu'>
-          <i :class='iconClass[n-1]' ref='icon'></i>
-        </router-link>
-        <a v-else :style='subMenuStyle' @mouseover.stop='mouseEnterSubMenu' @mouseout.stop='mouseOutSubMenu' @click='processCallback(key)'>
-          <i :class='iconClass[n-1]' ref='icon'></i>
-        </a>
-      </div>
-      <div class='menu' :style='menuStyle'>
-        <div class='core-menu' @click='toggleMenu'>
-          <div class='bar'></div>
-        </div>
-      </div>
-    </div>
-</template>
-<script>
-export default{
-  name: 'kiss-circle-menu',
-  props: {
-    menuCount: {
-      type: Number,
-      required: true,
-      default: 4
-    },
-    iconClass: {
-      type: Array,
-      required: true
-    },
-    menuUrlList: {
-      type: Array,
-      required: true
-    },
-    backgroundColor: {
-      type: String,
-      default: '#20babb'
-    },
-    color: {
-      type: String,
-      default: '#fff'
-    },
-    isOpenNewTab: {
-      type: Boolean,
-      default: false
-    },
-    position: {
-      type: String,
-      default: 'top-left'
-    }
-  },
-  computed: {
-    openNewTab () {
-      return this.isOpenNewTab ? '_blank' : '_self'
-    },
-    quickMenuStyle () {
-      const topPosition = { top: '30px' }
-      const bottomPosition = { bottom: '30px' }
-      const leftPosition = { left: '30px' }
-      const rightPosition = { right: '30px' }
-      let style = this.isTop ? topPosition : bottomPosition
-      Object.assign(style, this.isLeft ? leftPosition : rightPosition)
-      Object.assign(style, {transform: this.isLeft ? 'rotate(-180deg)' : 'rotate(180deg)'})
-      return style
-    },
-    menuStyle () {
-      return {
-        backgroundColor: this.backgroundColor,
-        color: this.color
-      }
-    },
-    subMenuStyle () {
-      const style = {
-        backgroundColor: this.backgroundColor,
-        color: this.color
-      }
-      return style
-    },
-
-    isTop () {
-      return !!~this.position.toLowerCase().indexOf('top')
-    },
-    isLeft () {
-      return !!~this.position.toLowerCase().indexOf('left')
-    }
-  },
-  data () {
-    return {
-      menuSize: 60,
-      subMenu4: [[['0', '-160'], ['-80', '-138.6'], ['-138.6', '-80'], ['-160', '0']], [['0', '-160'], ['80', '-138.6'], ['138.6', '-80'], ['160', '0']], [['0', '160'], ['138.6', '80'], ['80', '138.6'], ['160', '0']], [['-160', '0'], ['-138.6', '80'], ['-80', '138.6'], ['0', '160']]],
-      subMenu3: [[['-160', '0'], ['-113', '-113'], ['0', '-160']], [['0', '-160'], ['113', '-113'], ['160', '0']], [['0', '160'], ['113', '113'], ['160', '0']], [['-160', '0'], ['-113', '113'], ['0', '160']]],
-      subMenu2: [[['-160', '0'], ['0', '-160']], [['0', '-160'], ['160', '0']], [['0', '160'], ['160', '0']], [['-160', '0'], ['0', '160']]]
-    }
-  },
-  methods: {
-    getSubMenu (n) {
-      let menuPosition = this.menuCount === 4 ? this.subMenu4 : this.menuCount === 3 ? this.subMenu3 : this.subMenu2
-      menuPosition = this.isTop && this.isLeft ? menuPosition[2] : this.isTop && !this.isLeft ? menuPosition[1] : !this.isTop && this.isLeft ? menuPosition[3] : menuPosition[0]
-      return {
-        top: menuPosition[n][0] + 'px', left: menuPosition[n][1] + 'px'
-      }
-    },
-    toggleMenu (e) {
-      let menuEl = this.$refs.quickMenu
-      let menuIconEl = this.$refs.icon
-      if (!~menuEl.className.indexOf(' active')) {
-        menuEl.className += ' active'
-        menuIconEl.forEach(function (element, index) {
-          element.className += ' menu-animate'
-        })
-      } else {
-        menuEl.className = menuEl.className.replace(' active', '')
-        menuIconEl.forEach(function (element, index) {
-          element.className = element.className.replace(' menu-animate', '')
-        })
-      }
-    },
-    processCallback (key) {
-      console.log(key)
-      this.$emit('process', key)
-    },
-    mouseEnterSubMenu (e) {
-      if (e.target.tagName === 'A') {
-        e.target.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
-        // e.target.firstElementChild.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
-      } else if (e.target.tagName === 'I') {
-        e.target.parentElement.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
-        // e.target.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
-      }
-    },
-    mouseOutSubMenu (e) {
-      if (e.target.tagName === 'A') {
-        e.target.style.backgroundColor = this.backgroundColor
-        // e.target.firstElementChild.style.backgroundColor = this.backgroundColor
-      } else if (e.target.tagName === 'I') {
-        e.target.parentElement.style.backgroundColor = this.backgroundColor
-        // e.target.style.backgroundColor = this.backgroundColor
-      }
-    },
-    lightenColor (hex, amt) {
-      var usePound = false
-      if (hex[0] === '#') {
-        hex = hex.slice(1)
-        usePound = true
-      }
-      var num = parseInt(hex, 16)
-      var r = (num >> 16) + amt
-
-      if (r > 255) r = 255
-      else if (r < 0) r = 0
-
-      var b = ((num >> 8) & 0x00FF) + amt
-      if (b > 255) b = 255
-      else if (b < 0) b = 0
-
-      var g = (num & 0x0000FF) + amt
-      if (g > 255) g = 255
-      else if (g < 0) g = 0
-      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
-    }
-  }
-}
-</script>
-<style lang='less'>
-.menu-animate {
-  -webkit-animation: bounce 1s linear 1s;
-  -moz-animation: bounce 1s linear 1s;
-  animation: bounce 1s linear 1s;
-}
-
-.quick-menu {
-  color: #fff;
-  position: fixed;
-  width: 60px;
-  height: 60px;
-  -webkit-transition: all 1s ease;
-  -moz-transition: all 1s ease;
-  transition: all 1s ease;
-  right: 30px;
-  > .menu {
-    display: block;
-    position: absolute;
-    border-radius: 50% !important;
-    width: 60px;
-    height: 60px;
-    text-align: center;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-    color: #fff;
-    -webkit-transition: all 1s ease;
-    -moz-transition: all 1s ease;
-    transition: all 1s ease;
-    .core-menu {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0px;
-      top: 0px;
-      width: 60px;
-      height: 60px;
-      -webkit-transform: rotate(180deg);
-      -moz-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-      -o-transform: rotate(180deg);
-      transform: rotate(180deg);
-      -webkit-transition: all 1s ease;
-      -moz-transition: all 1s ease;
-      transition: all 1s ease;
-      .bar {
-        -webkit-transition: all 1s ease;
-        -moz-transition: all 1s ease;
-        transition: all 1s ease;
-        width: 28px;
-        height: 3px;
-        background: #fff;
-        position: absolute;
-        top: 35%;
-        margin-top: -1.5px;
-        left: 16px;
-        -webkit-transform-origin: 0% 50%;
-        -moz-transform-origin: 0% 50%;
-        -ms-transform-origin: 0% 50%;
-        -o-transform-origin: 0% 50%;
-        transform-origin: 0% 50%;
-        &:before ,&:after{
-          -webkit-transition: all 1s ease;
-          -moz-transition: all 1s ease;
-          transition: all 1s ease;
-          content: '';
-          width: 28px;
-          height: 3px;
-          background: #fff;
-          position: absolute;
-          left: 0px;
-          -webkit-transform-origin: 0% 50%;
-          -moz-transform-origin: 0% 50%;
-          -ms-transform-origin: 0% 50%;
-          -o-transform-origin: 0% 50%;
-          transform-origin: 0% 50%;
-        }
-        &:before{
-          margin-top: 30%;
-        }
-        &:after {
-          margin-top: 60%;
-        }
-      }
-    }
-  }
-  .sub-menu{
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    position: absolute;
-    width: 60px;
-    height: 60px;
-    font-size: 30px;
-    text-align: center;
-    border-radius: 50% !important;
-    a{
-      outline: none;
-      text-decoration: none;
-      display: inline-block;
-      border-radius: 50% !important;
-      width: 100%;
-      height: 100%;
-      i {
-        outline: none;
-        font-size:30px;
-        margin-top:12px;
-        background:transparent;
-        &:before{
-          vertical-align: middle;
-        }
-      }
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-  &.active{
-    -webkit-transform: rotate(0deg)!important;
-      -moz-transform: rotate(0deg)!important;
-      -ms-transform: rotate(0deg)!important;
-      -o-transform: rotate(0deg)!important;
-      transform: rotate(0deg)!important;
-      .menu{
-        -webkit-transform: scale(0.7);
-        -moz-transform: scale(0.7);
-        -ms-transform: scale(0.7);
-        -o-transform: scale(0.7);
-        transform: scale(0.7);
-        .bar {
-          top: 50%;
-          margin-top: -1.5px;
-          left: 50%;
-          margin-left: -12px;
-          -webkit-transform-origin: 50% 50%;
-          -moz-transform-origin: 50% 50%;
-          -ms-transform-origin: 50% 50%;
-          -o-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-          -webkit-transform: rotate(405deg);
-          -moz-transform: rotate(405deg);
-          -ms-transform: rotate(405deg);
-          -o-transform: rotate(405deg);
-          transform: rotate(405deg);
-              &:before {
-                -webkit-transform-origin: 50% 50%;
-                -moz-transform-origin: 50% 50%;
-                -ms-transform-origin: 50% 50%;
-                -o-transform-origin: 50% 50%;
-                transform-origin: 50% 50%;
-                -webkit-transform: rotate(-450deg);
-                -moz-transform: rotate(-450deg);
-                -ms-transform: rotate(-450deg);
-                -o-transform: rotate(-450deg);
-                transform: rotate(-450deg);
-                margin-top: 0px;
-              }
-          &:after{
-            opacity: 0;
-          }
-        }
-      }
-    }
-}
-@-webkit-keyframes bounce {
-  0%,100% {
-    -webkit-transform: translateY(0px);
-  }
-  10% {
-    -webkit-transform: translateY(6px);
-  }
-  30% {
-    -webkit-transform: translateY(-4px);
-  }
-  70% {
-    -webkit-transform: translateY(3px);
-  }
-  90% {
-    -webkit-transform: translateY(-2px);
-  }
-}
-@-moz-keyframes bounce {
-  0%,100% {
-    -moz-transform: translateY(0px);
-  }
-  10% {
-    -moz-transform: translateY(6px);
-  }
-  30% {
-    -moz-transform: translateY(-4px);
-  }
-  70% {
-    -moz-transform: translateY(3px);
-  }
-  90% {
-    -moz-transform: translateY(-2px);
-  }
-}
-@keyframes bounce {
-  0%,100% {
-    -webkit-transform: translateY(0px);
-    -moz-transform: translateY(0px);
-    -ms-transform: translateY(0px);
-    -o-transform: translateY(0px);
-    transform: translateY(0px);
-  }
-  10% {
-    -webkit-transform: translateY(6px);
-    -moz-transform: translateY(6px);
-    -ms-transform: translateY(6px);
-    -o-transform: translateY(6px);
-    transform: translateY(6px);
-  }
-  30% {
-    -webkit-transform: translateY(-4px);
-    -moz-transform: translateY(-4px);
-    -ms-transform: translateY(-4px);
-    -o-transform: translateY(-4px);
-    transform: translateY(-4px);
-  }
-  70% {
-    -webkit-transform: translateY(3px);
-    -moz-transform: translateY(3px);
-    -ms-transform: translateY(3px);
-    -o-transform: translateY(3px);
-    transform: translateY(3px);
-  }
-  90% {
-    -webkit-transform: translateY(-2px);
-    -moz-transform: translateY(-2px);
-    -ms-transform: translateY(-2px);
-    -o-transform: translateY(-2px);
-    transform: translateY(-2px);
-  }
-}
-</style>

package/package/kisscomps/components/CircleMenu/index.js

@@ -1,2 +0,0 @@
-import CircleMenu from './KissCircleMenu.vue'
-export default CircleMenu

package/package/kisscomps/components/DashBoard/MakeGradientColor.js

@@ -1,84 +0,0 @@
-export default function MakeGradientColor (startColor, endColor, step) {
-  let startRGB = colorRgb(startColor) // 转换为rgb数组模式
-  let startR = startRGB[0]
-  let startG = startRGB[1]
-  let startB = startRGB[2]
-
-  let endRGB = colorRgb(endColor)
-  let endR = endRGB[0]
-  let endG = endRGB[1]
-  let endB = endRGB[2]
-
-  let sR = (endR - startR) / step // 总差值
-  let sG = (endG - startG) / step
-  let sB = (endB - startB) / step
-
-  var colorArr = []
-  for (let i = 0; i < step; i++) {
-    // 计算每一步的hex值
-    let hex = colorHex('rgb(' + parseInt((sR * i + startR)) +
-      ',' + parseInt((sG * i + startG)) +
-      ',' + parseInt((sB * i + startB)) + ')')
-    colorArr.push(hex)
-  }
-  return colorArr
-}
-
-// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
-function colorRgb (sColor) {
-  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
-  sColor = sColor.toLowerCase()
-
-  if (sColor && reg.test(sColor)) {
-    if (sColor.length === 4) {
-      let sColorNew = '#'
-      for (let i = 1; i < 4; i += 1) {
-        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
-      }
-      sColor = sColorNew
-    }
-    // 处理六位的颜色值
-    var sColorChange = []
-    for (let i = 1; i < 7; i += 2) {
-      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
-    }
-    return sColorChange
-  } else {
-    return sColor
-  }
-}
-
-// 将rgb表示方式转换为hex表示方式
-function colorHex (rgb) {
-  let _this = rgb
-  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
-  if (/^(rgb|RGB)/.test(_this)) {
-    let aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, '').split(',')
-    let strHex = '#'
-    for (let i = 0; i < aColor.length; i++) {
-      var hex = Number(aColor[i]).toString(16)
-      hex = hex < 10 ? 0 + '' + hex : hex // 保证每个rgb的值为2位
-      if (hex === '0') {
-        hex += hex
-      }
-      strHex += hex
-    }
-    if (strHex.length !== 7) {
-      strHex = _this
-    }
-    return strHex
-  } else if (reg.test(_this)) {
-    var aNum = _this.replace(/#/, '').split('')
-    if (aNum.length === 6) {
-      return _this
-    } else if (aNum.length === 3) {
-      var numHex = '#'
-      for (var i = 0; i < aNum.length; i += 1) {
-        numHex += (aNum[i] + aNum[i])
-      }
-      return numHex
-    }
-  } else {
-    return _this
-  }
-}