openatc-components 0.0.1 → 0.0.6

package/package/kisscomps/components/header/kissHead.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="headerStyle">
-    <div class="left" :style="{'max-width':sideWidth + 'px'}">
-      <div ref="leftPart">
-        <slot name="left"></slot>
-      </div>
-    </div>
-    <div class="title" v-text="title">
-    </div>
-    <div class="right" ref="rightPart" :style="{'max-width':sideWidth + 'px'}">
-      <slot name="right"></slot>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'kiss-head',
-  props: {
-    title: {
-      type: String,
-      default: null
-    },
-    Width: {
-      type: String,
-      default: '1920'
-    }
-  },
-  data () {
-    return {
-      centerWidth: '640'
-    }
-  },
-  created () {
-    if (this.Width) {
-      this.sideWidth = (Number(this.Width) - Number(this.centerWidth)) / 2
-    }
-  },
-  mounted () {
-    if (this.$refs.leftPart.clientWidth === this.sideWidth) {
-      console.log('头部左侧栏宽度过长，请调整')
-    }
-    if (this.$refs.rightPart.clientWidth === this.sideWidth) {
-      console.log('头部右侧栏宽度过长，请调整')
-    }
-  }
-}
-</script>
-<style scoped>
-.headerStyle {
-  width: 100%;
-  min-height: 74px;
-  background-image: url("../image/KissHead/headbg.png");
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-  color: #42daff;
-}
-.title{
-  position: absolute;
-  left: 50%;
-  top: 0;
-  font-size: 40px;
-  margin: 11px 0;
-  transform: translateX(-50%);
-  color: #ebfbff;
-}
-.left {
-  height: 50px;
-  float: left;
-  margin-left: 18px;
-  overflow: hidden;
-  white-space: nowrap;
-  max-height: 50px;
-}
-.right {
-  height: 50px;
-  float: right;
-  margin-right: 18px;
-  overflow: hidden;
-  white-space: nowrap;
-  max-height: 50px;
-}
-</style>

package/package/kisscomps/components/horizontalMenu/index.js

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

package/package/kisscomps/components/horizontalMenu/kissHorizontalMenu.vue

@@ -1,254 +0,0 @@
-<template>
-  <nav class="KissHorizontalMenuContainer">
-    <ul style="display: inline-block; margin: 0 10px;"  v-for="(item, index) in menuList" :key="index" >
-      <li class="KissHorizontalMenuItem" style="float:left;">
-        <div
-          :id="item.MenuName"
-          :class="menuSelList[index] ? 'KissHorizontalMenuBorderClick' : 'KissHorizontalMenuBorder'"
-          v-on:click="handleClick($event, index)"
-          v-on:mouseenter="onMouseEnter(item)"
-          v-on:mouseleave="onMouseLeave(item)"
-          ref="menu"
-        >
-          <div
-            class="KissHorizontalMenuIcon"
-            :style="getBg(item, index)"
-          ></div>
-        </div>
-        <div class="KissHorizontalMenuName" :style="getTextColor(item, index)">{{item.MenuName}}</div>
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script>
-export default {
-  name: 'kiss-horizontal-menu',
-  props: {
-    menuList: {
-      type: Array,
-      default: function () {
-        return [
-          {
-            MenuName: '强度',
-            BaseImgPosition: '0px 0px',
-            HoverImgPosition: '0px -40px',
-            isHv: 0,
-            BaseTextColor: '#0096ba',
-            ClickTextColor: '#fff'
-          },
-          {
-            MenuName: '流量',
-            BaseImgPosition: '-40px 0',
-            HoverImgPosition: '-40px -40px',
-            isHv: 0,
-            BaseTextColor: '#0096ba',
-            ClickTextColor: '#fff'
-          },
-          {
-            MenuName: '速度',
-            BaseImgPosition: '-80px 0',
-            HoverImgPosition: '-80px -40px',
-            isHv: 0,
-            BaseTextColor: '#0096ba',
-            ClickTextColor: '#fff'
-          },
-          {
-            MenuName: '饱和度',
-            BaseImgPosition: '-120px 0',
-            HoverImgPosition: '-120px -40px',
-            isHv: 0,
-            BaseTextColor: '#0096ba',
-            ClickTextColor: '#fff'
-          },
-          {
-            MenuName: '通行效率',
-            BaseImgPosition: '-160px 0',
-            HoverImgPosition: '-160px -40px',
-            isHv: 0,
-            BaseTextColor: '#0096ba',
-            ClickTextColor: '#fff'
-          },
-          {
-            MenuName: '排队长度',
-            BaseImgPosition: '-200px 0',
-            HoverImgPosition: '-200px -40px',
-            isHv: 0,
-            BaseTextColor: '#0096ba',
-            ClickTextColor: '#fff'
-          }
-        ]
-      }
-    }
-  },
-  data () {
-    return {
-      active: false,
-      styleObject: {
-        background: ''
-      },
-      style: {
-        background: ''
-      },
-      menuShowList: [],
-      menuSelList: [],
-      curSelIndex: -1
-    }
-  },
-  mounted () {
-    for (let menu of this.menuList.values()) {
-      this.menuShowList.push({
-        name: menu.MenuName,
-        show: false
-      })
-      this.menuSelList.push(false)
-    }
-    this.setActive(0)
-  },
-  methods: {
-    handleClick (event, index) {
-      this.$emit('click', event, index)
-      this.setActive(index)
-    },
-    setActive (index) {
-      if (this.curSelIndex !== -1) {
-        this.$set(this.menuSelList, this.curSelIndex, false)
-      }
-      this.menuSelList[index] = true
-      this.curSelIndex = index
-    },
-    addStyle (index) {
-      index.isHv = 1
-      this.styleObject.backgroundPosition = index.HoverImgPosition
-    },
-    removeStyle (index) {
-      index.isHv = 0
-      this.styleObject.backgroundPosition = index.BaseImgPosition
-    },
-    getBg (item, index) {
-      if (this.curSelIndex === -1 && index === 0) {
-        let position = (item.isHv === 0 && !this.menuSelList[index]) ? item.HoverImgPosition : item.BaseImgPosition
-        return {
-          backgroundPosition: position
-        }
-      }
-      let position = (item.isHv === 0 && !this.menuSelList[index]) ? item.BaseImgPosition : item.HoverImgPosition
-      return {
-        backgroundPosition: position
-      }
-    },
-    getTextColor (item, index) {
-      let color = (item.isHv === 0 && !this.menuSelList[index]) ? item.BaseTextColor : item.ClickTextColor
-      return {
-        color
-      }
-    },
-    onMouseEnter (menuData) {
-      let index = this.menuShowList.findIndex(val => val.name === menuData.MenuName)
-      this.menuShowList[index].show = true
-      this.addStyle(menuData)
-    },
-    onMouseLeave (menuData) {
-      let index = this.menuShowList.findIndex(val => val.name === menuData.MenuName)
-      this.menuShowList[index].show = false
-      this.removeStyle(menuData)
-    }
-  }
-}
-</script>
-
-<style scoped>
-* {
-  margin: 0px;
-  padding: 0px;
-}
-
-.KissHorizontalMenuContainer {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-}
-
-.KissHorizontalMenuItem {
-  outline: 0px;
-  border: 0px;
-  width: 68px;
-  height: 105px;
-  background-color: transparent;
-  list-style: none;
-}
-
-.KissHorizontalMenuBorder {
-  position: relative;
-  z-index: 1;
-  width: 68px;
-  height: 78px;
-  cursor: pointer;
-  background: url("../image/trafficJudgementMenu/bg.png");
-  background-size: 73px 78px;
-  background-repeat: no-repeat;
-  background-position-x: -2px;
-}
-
-.KissHorizontalMenuBorder:hover {
-  background: url("../image/trafficJudgementMenu/bgchoosed.png");
-  background-size: 73px 78px;
-  background-repeat: no-repeat;
-  background-position-x: -2px;
-}
-
-.KissHorizontalMenuBorderClick {
-  position: relative;
-  z-index: 1;
-  width: 68px;
-  height: 78px;
-  cursor: pointer;
-  background: url("../image/trafficJudgementMenu/bgchoosed.png");
-  background-size: 73px 78px;
-  background-repeat: no-repeat;
-  background-position-x: -2px;
-}
-
-.KissHorizontalMenuIcon {
-  position: relative;
-  z-index: 2;
-  pointer-events: none; /*这个属性为none  鼠标事件将不起作用直接响应父组件的鼠标事件*/
-  width: 40px;
-  height: 40px;
-  top: 19px;
-  left: 14px;
-  background-image: url("../image/trafficJudgementMenu/trafficJudgement.png");
-  background-repeat: no-repeat;
-}
-
-.KissHorizontalMenuName {
-  font-family: 'FZLTZHK--GBK1-0';
-  margin-top: 8px;
-  font-size: 14px;
-  color: #0096ba;
-  letter-spacing: 1px;
-}
-
-.KissHorizontalMenuBorder:hover .KissHorizontalMenuIcon {
-  -webkit-animation: toBig 0.4s linear 1;
-  -moz-animation: toBig 0.4s linear 1;
-  -ms-animation: toBig 0.4s linear 1;
-  -o-animation: toBig 0.4s linear 1;
-  animation: toBig 0.4s linear 1;
-}
-/* 定义keyframe动画效果：逐渐放大到原比例*/
-@keyframes toBig {
-  0% {
-    transform: scale(0.3);
-  }
-  33% {
-    transform: scale(0.7);
-  }
-  66% {
-    transform: scale(0.85);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-</style>

package/package/kisscomps/components/input/index.js

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

package/package/kisscomps/components/input/kissinput.vue

@@ -1,57 +0,0 @@
-<template>
-   <div class="kiss-input-container">
-        <input
-            v-model="inputData"
-            :type="inputType"
-            class = "kiss-input-default"
-            :placeholder="placeHolder"
-        >
-    </div>
-</template>
-<script>
-export default {
-  name: 'kiss-input',
-  props: {// 这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
-    placeHolder: {// 输入框默认显示的内容
-      type: String,
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    inputData: {// 输入框内容
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>
-<style scoped>
-.kiss-input-default{
-    width: 230px;
-    height: 24px;
-    padding:0;
-    margin: 17px 2px 0px 19px;
-    color: #42daff;
-    font-size: 14px;
-    outline: 0px;
-    border: 0px;
-    border-radius: 6px;
-    background-color:transparent;
-  }
-  .kiss-input-container{
-    display: block;
-    margin: 0;
-    padding: 0;
-    width: 270px;
-    height: 53px;
-    background: url("../image/KissInput/input.png");
-    background-size: cover;
-  }
-  .kiss-input-default::-webkit-input-placeholder{
-    color: #0096ba;;
-    font-size: 15px;
-    text-align: left;
-  }
-</style>

package/package/kisscomps/components/menu/index.js

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