openatc-components 0.0.1

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "openatc-components",
+  "version": "0.0.1",
+  "description": "A Vue.js project",
+  "author": "openatc developer",
+  "private": false,
+  "main": "package/kissui.min.js",
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
+    "build": "node build/build.js",
+    "package:dev": "webpack --config build/package.dev.config.js",
+    "package:prod": "webpack --config build/package.prod.config.js",
+    "package": "npm run package:prod && npm publish && npm run build",
+    "npm2taobao": "npm config set registry https://registry.npm.taobao.org",
+    "npm2npm": "npm config set registry https://registry.npmjs.org/",
+    "npm2yuanqu": "npm config set registryhttp://nexus.ctsp.kedacom.com/content/groups/npm-host-yuanqu/"
+  },
+  "dependencies": {
+    "flatpickr": "^4.5.1",
+    "jquery": "^3.3.1",
+    "pend": "^1.2.0",
+    "v-tooltip": "^2.0.0-rc.33",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "element-ui": "^2.7.2",
+    "moment": "^2.24.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^21.0.2",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^2.0.1",
+    "chromedriver": "^2.40.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "jest": "^22.0.4",
+    "jest-serializer-vue": "^0.3.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "nightwatch": "^0.9.12",
+    "node-notifier": "^5.1.2",
+    "node-sass": "^4.9.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "sass-loader": "^7.0.3",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "style-loader": "^0.21.0",
+    "stylus-loader": "^3.0.2",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-jest": "^1.0.2",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "directories": {
+    "test": "test"
+  },
+  "license": "ISC"
+}

package/src/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#app {
+  /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50; */
+}
+</style>

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

@@ -0,0 +1,398 @@
+<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/src/kisscomps/components/CircleMenu/index.js

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

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

@@ -0,0 +1,84 @@
+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
+  }
+}