openatc-components 0.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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