openatc-components 0.0.1 → 0.0.6

package/package/kisscomps/components/Horizontal/KissHorizontal.vue

@@ -1,146 +0,0 @@
-<template>
-<div>
-  <div v-for="(item, index) in datalist" :key="index" style="margin-bottom: 14px">
-    <kiss-horizontalchildren :dataList="[{value: item.value, color: item.color, maxNum: theMaxNum}]" :name="item.name" :horizontalDistance="horizontalDistance" :display="display" :mainwidth="mainwidth" :mainheight="mainheight">
-      <div slot="leftslot">
-        <slot name="fatherslot"></slot>
-      </div>
-    </kiss-horizontalchildren>
-  </div>
-</div>
-</template>
-<script>
-export default {
-  name: 'kiss-horizontal',
-  props: {
-    datalist: { // 数据集合
-      type: Array,
-      default: function () {
-        return [
-          {
-            value: 5,
-            name: '',
-            color: '#43b4cf'
-          },
-          {
-            value: 5,
-            name: '',
-            color: '#43b4cf'
-          }
-        ]
-      }
-    },
-    maxNum: { // 最大数值(如果不传的话就以datalist中的最大value值为最大值)
-      type: Number,
-      default: 0
-    },
-    horizontalDistance: { // 上下两个的间距
-      type: String,
-      default: '3px'
-    },
-    mainwidth: {
-      type: String,
-      default: '400px'
-    },
-    mainheight: {
-      type: String,
-      default: '25px'
-    },
-    display: { // 是否展示右侧数值
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {
-      bgStyle: {
-        'position': 'relative',
-        'marginBottom': '',
-        'width': '',
-        'height': ''
-      },
-      theMaxNum: 0
-      // rightNum: {
-      //   'color': '#fff',
-      //   'display': 'block'
-      // }
-    }
-  },
-  watch: {
-    datalist: {
-      handler: function (val) {
-        this.init()
-        // this.theMaxNum = this.getMaxnum()
-      },
-      deep: true
-    }
-  },
-  methods: {
-    getMaxnum () {
-      let max = this.maxNum
-      if (max !== 0) return max
-      let temp = 0
-      for (let data of this.datalist) {
-        if (data.value > temp) {
-          max = data.value
-          temp = max
-        }
-      }
-      return max
-    },
-    init () {
-      if (this.maxNum === 0) {
-        this.theMaxNum = this.getMaxnum()
-      } else {
-        this.theMaxNum = this.maxNum
-      }
-    }
-    // isShowrightnum () {
-    //   if (this.display) return
-    //   this.rightNum.display = 'none'
-    // }
-  },
-  mounted () {
-    this.bgStyle.width = this.mainwidth
-    this.bgStyle.height = this.mainheight
-    this.bgStyle.marginBottom = this.horizontalDistance
-    this.init()
-    // if (this.maxNum === 0) {
-    //   this.theMaxNum = this.getMaxnum()
-    // } else {
-    //   this.theMaxNum = this.maxNum
-    // }
-    // this.isShowrightnum()
-  }
-}
-</script>
-<style scoped>
-.horizontalcontext {
-  position: absolute;
-  width: 85%;
-  height: 100%;
-  left: 10%;
-  top: 0;
-}
-.horizontal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 80%;
-  height: 50%;
-}
-.hor_num {
-  position: absolute;
-  top: 0;
-  left: 85%;
-  width: 10%;
-  height: 66.6%;
-}
-.hor_text {
-  position: absolute;
-  top: 30%;
-  left: 0;
-  /* width: 20px; */
-  height: 42%;
-}
-</style>

package/package/kisscomps/components/Horizontal/index.js

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

package/package/kisscomps/components/HorizontalChildren/KissHorizontalChildren.vue

@@ -1,196 +0,0 @@
-<template>
-    <div :style="bgStyle" :ref="domName">
-        <div class="horizontalconimg">
-          <slot name="leftslot"></slot>
-        </div>
-        <div class="horizontalcontext">
-          <div class="horizontalContextBox" v-for="(data, index) in dataList" :key="index">
-            <div class="horizontal">
-              <el-progress :color="data.color" :percentage="data.horizontalWidth" :show-text="false"></el-progress>
-            </div>
-            <div class="hor_num"><span :style="rightNum">{{data.value}}</span></div>
-          </div>
-          <div class="hor_text">{{this.name}}</div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-  name: 'kiss-horizontalchildren',
-  props: {
-    dataList: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    // value: {
-    //   type: Number,
-    //   default: 0
-    // },
-    // color: {
-    //   type: String,
-    //   default: '#43b4cf'
-    // },
-    // maxNum: { // 最大数值
-    //   type: Number,
-    //   default: 1
-    // },
-    horizontalDistance: { // 上下两个的间距
-      type: String,
-      default: '3px'
-    },
-    mainwidth: {
-      type: String,
-      default: '400px'
-    },
-    mainheight: {
-      type: String,
-      default: '25px'
-    },
-    display: { // 是否展示右侧数值
-      type: Boolean,
-      default: true
-    },
-    backColor: { // 背景色。默认没有背景，可用rgba形式加背景色的透明度。
-      type: String,
-      default: 'rgba(0, 0, 0, 0)'
-    }
-  },
-  data () {
-    return {
-      bgStyle: {
-        'position': 'relative',
-        'marginBottom': '',
-        'width': '',
-        'height': ''
-      },
-      rightNum: {
-        'line-height': '80%',
-        'color': '#fff',
-        'display': 'block',
-        'font-size': '13px'
-      },
-      horizontalWidth: 0,
-      domName: 'progress'
-    }
-  },
-  watch: {
-    dataList: {
-      handler: function (val) {
-        this.getDatalist()
-      },
-      deep: true
-    }
-  },
-  methods: {
-    isShowrightnum () {
-      if (this.display) return
-      this.rightNum.display = 'none'
-    },
-    getDatalist () {
-      if (this.display) {
-        if (!this.dataList.length) return
-        this.dataList.forEach(ele => {
-          if (ele.value > ele.maxNum) {
-            ele.horizontalWidth = 80
-          } else {
-            ele.horizontalWidth = ele.value / ele.maxNum * 80 // 如果展示右侧数字的话，横条的最大长度占80%
-          }
-          if (ele.color === undefined) {
-            ele.color = '#43b4cf'
-          }
-        })
-      } else {
-        if (!this.dataList.length) return
-        this.dataList.forEach(ele => {
-          if (ele.value > ele.maxNum) {
-            ele.horizontalWidth = 100
-          } else {
-            ele.horizontalWidth = ele.value / ele.maxNum * 100 // 如果不展示右侧数字的话，横条的最大长度占100%
-          }
-          if (ele.color === undefined) {
-            ele.color = '#43b4cf'
-          }
-        })
-      }
-    },
-    changeBackColor () {
-      const domName = this.domName
-      // 设置背景色
-      const clsObjs = this.$refs[domName].getElementsByClassName('el-progress-bar__outer')
-      for (var i = 0; i < clsObjs.length; i++) {
-        clsObjs[i].style.backgroundColor = this.backColor
-      }
-    }
-  },
-  created () {
-    this.domName = `progress_${Math.random()}`
-  },
-  mounted () {
-    this.bgStyle.width = this.mainwidth
-    this.bgStyle.height = this.mainheight
-    this.bgStyle.marginBottom = this.horizontalDistance
-    this.changeBackColor()
-    this.getDatalist()
-    this.isShowrightnum()
-  }
-}
-</script>
-<style scoped>
-.horizontalstyle {
-  float: left;
-  margin: 0px auto;
-  padding: 0px;
-  /* width: 20%; */
-  height: 15%;
-  /* background: red; */
-  overflow: hidden;
-  margin-top: 0%;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  width:100px;
-  transition: width 1s;
-  -moz-transition: width 1s; /* Firefox 4 */
-  -webkit-transition: width 1s; /* Safari 和 Chrome */
-  -o-transition: width 1s; /* Opera */
-}
-.horizontalcontext {
-  float: left;
-  width: 85%;
-}
-.horizontalconimg {
-  float: left;
-  margin-right: 6px;
-  /* min-width: 34px;
-  min-height: 30px; */
-}
-.horizontal {
-  float: left;
-  width: 80%;
-}
-.horizontalContextBox {
-  overflow: hidden;
-  margin-bottom: 5px;
-  position: relative;
-  min-height:10px;
-}
-.hor_num {
-  /*float: left;
-  width: 10%;*/
-  margin-left: 15px;
-  position: absolute;
-  right: 0;
-}
-.hor_text {
-  margin-top: -5px;
-  color: #bbb;
-  font-size: 10px;
-  margin-top: 2px;
-  text-align: left;
-}
-</style>

package/package/kisscomps/components/HorizontalChildren/index.js

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

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

@@ -1,113 +0,0 @@
-<template>
-  <div id='CircleMenu'>
-    <div :class="type" :animate='animate'>
-      <div class="oy-mask-black" v-show="MaskToggle" v-if="mask==='black'" @click="toggle"></div>
-      <div class="oy-mask-white" v-show="MaskToggle" v-if="mask==='white'" @click="toggle"></div>
-      <div class="oy-menu-group" :class="{'open':open}">
-        <button class="oy-menu-btn btn-toggle"  :class="{'oy-menu-btn-Circle':circle}" :style='{}' @click="toggle">
-          <i class="icon-bars" v-if="btn"></i>
-          <slot name="item_btn"></slot>
-        </button>
-        <div class="btn-list">
-          <div  class="oy-menu-item oy-menu-item_1 yellow" :class="AnimateClass" :style='{background:Item1Color}' v-show="number > 1 && number < 5">
-            <slot name="item_1"></slot>
-          </div>
-          <div  class="oy-menu-item oy-menu-item_2 purple" :class="AnimateClass" :style='{background:Item2Color}' v-show="number > 1 && number < 5">
-            <slot name="item_2"></slot>
-          </div>
-          <div  class="oy-menu-item oy-menu-item_3 green" :class="AnimateClass" :style='{background:Item3Color}' v-show="isShow">
-            <slot name="item_3"></slot>
-          </div>
-          <div  class="oy-menu-item oy-menu-item_4 blue" :class="AnimateClass" :style='{background:Item4Color}' v-show="number === 4">
-            <slot name="item_4"></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isColors } from './utils/colorRE.js'
-export default {
-  name: 'CirleMenu',
-  props: {
-    type: {
-      type: String,
-      required: true
-    },
-    number: {
-      type: Number,
-      required: true,
-      validator: function (value) {
-        return value > 1 && value < 5
-      }
-    },
-    animate: String,
-    mask: String,
-    circle: Boolean,
-    btn: Boolean,
-    colors: Array
-  },
-  data () {
-    return {
-      open: false,
-      toggleAnimate: false,
-      MaskToggle: false,
-      BtnColor: '',
-      Item1Color: '',
-      Item2Color: '',
-      Item3Color: '',
-      Item4Color: ''
-    }
-  },
-  methods: {
-    toggle () {
-      this.open = !this.open
-      this.toggleAnimate = !this.toggleAnimate
-      this.MaskToggle = !this.MaskToggle
-    }
-  },
-  computed: {
-    AnimateClass () {
-      return this.toggleAnimate ? this.animate : ''
-    },
-    isShow () {
-      if (this.number === 3) {
-        if (this.type === 'middle' || this.type === 'middle-around') {
-          console.error("when type is 'middle' or 'middle-around',this number can not 3 ---VueCircleMenu")
-        } else {
-          return true
-        }
-      } else if (this.number === 4) {
-        return true
-      } else {
-        return false
-      }
-    }
-  },
-  mounted () {
-    if (this.colors) {
-      if (this.colors.every(isColors) && this.colors.length === 5) {
-        for (let i = 0, length = this.colors.length; i < length; i++) {
-          this.BtnColor = this.colors[0]
-          this.Item1Color = this.colors[1]
-          this.Item2Color = this.colors[2]
-          this.Item3Color = this.colors[3]
-          this.Item4Color = this.colors[4]
-        }
-      } else {
-        console.error('this Array of colors must be hexcolor or rgbcolor and Array length must be 5 ---VueCircleMenu')
-      }
-    } else {
-      return {}
-    }
-  }
-}
-</script>
-
-<style lang="less">
-
-@import './style/index.less';
-
-</style>

package/package/kisscomps/components/KissCircleMenu/index.js

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

package/package/kisscomps/components/KissCircleMenu/style/index.less

@@ -1,2 +0,0 @@
-@import "./main/core.less";
-@import "./main/other.less";

package/package/kisscomps/components/KissCircleMenu/style/main/core.less

@@ -1,162 +0,0 @@
-@import "../mixin/mixin.less";
-@import "../var/var.less";
-
-.oy-menu-group .btn-list .oy-menu-item{
-  @{top} &{
-    .CircleItem();
-  }
-  @{bottom} &{
-    .CircleItem();
-  }
-  @{left} &{
-    .CircleItem();
-  }
-  @{right} &{
-    .CircleItem();
-  }
-  @{middle} &{
-    .CircleItem();
-  } 
-  .middle-around &{
-    .CircleItem();
-  } 
-  
-}
-.oy-menu-group.open .btn-list .oy-menu-item{
-  @{top} &{
-    opacity: 1;
-  }
-  @{bottom} &{
-    opacity: 1;
-  }
-  @{left} &{
-    opacity: 1;
-  }
-  @{right} &{
-    opacity: 1;
-  }
-  @{middle} &{
-    opacity: 1;
-  } 
-  .middle-around &{
-    opacity: 1;
-  } 
-  
-}
-
-// tope 样式
-.top-open(@n, @i: 1) when (@i =< @n) {
-  .top .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    top: (@i * @MenuPrepSpace);
-    transition: 0.2s 0.1s;
-  }
-  .top-open(@n, (@i + 1));
-}
-.top(@n, @i: 1) when (@i =< @n) {
-  .top .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .top(@n, (@i + 1));
-}
-
-.top(4);
-.top-open(4);
-
-// bottom的样式
-.bottom-open(@n, @i: 1) when (@i =< @n) {
-  .bottom .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    top: (@i * @MenuSpace);
-  }
-  .bottom-open(@n, (@i + 1));
-}
-.bottom(@n, @i: 1) when (@i =< @n) {
-  .bottom .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .bottom(@n, (@i + 1));
-}
-.bottom(4);
-.bottom-open(4);
-
-//left的样式
-.left-open(@n, @i: 1) when (@i =< @n) {
-  .left .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    left: (@i * @MenuSpace);
-  }
-  .left-open(@n, (@i + 1));
-}
-.left(@n, @i: 1) when (@i =< @n) {
-  .left .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .left(@n, (@i + 1));
-}
-.left(4);
-.left-open(4);
-
-//right的样式
-.right-open(@n, @i: 1) when (@i =< @n) {
-  .right .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    left: (@i * @MenuPrepSpace);
-  }
-  .right-open(@n, (@i + 1));
-}
-.right(@n, @i: 1) when (@i =< @n) {
-  .right .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .right(@n, (@i + 1));
-}
-.right-open(4);
-.right(4);
-
-//middle的样式
-.middle(@n, @i: 1) when (@i =< @n) {
-  .middle .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .middle(@n, (@i + 1));
-}
-.middle(4);
-.middle .oy-menu-group.open .btn-list{
-  & .oy-menu-item.oy-menu-item_1{
-    left: @MenuPrepSpace;
-  }
-  & .oy-menu-item.oy-menu-item_2{
-    left: @MenuSpace;
-  }
-  & .oy-menu-item.oy-menu-item_3{
-    left: 2*@MenuPrepSpace;
-  }
-  & .oy-menu-item.oy-menu-item_4{
-    left: 2*@MenuSpace;
-  }
-}
-
-
-//middle-around的样式
-.middle-around(@n, @i: 1) when (@i =< @n) {
-  .middle-around .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .middle-around(@n, (@i + 1));
-}
-.middle-around(4);
-.middle-around .oy-menu-group.open .btn-list{
-  & .oy-menu-item.oy-menu-item_1{
-    left: (@MenuPrepSpace)-20px;
-    top: 0px;
-  }
-  & .oy-menu-item.oy-menu-item_2{
-    left: @MenuSpace+20px;
-    top: 0px;
-  }
-  & .oy-menu-item.oy-menu-item_3{
-    left: (@MenuSpace)-15px;
-    top: (@MenuPrepSpace)-10px;
-  }
-  & .oy-menu-item.oy-menu-item_4{
-    left: @MenuPrepSpace+15px;
-    top: (@MenuPrepSpace)-10px;
-  }
-}