openatc-components 0.0.1

package/src/kisscomps/components/button/kissbutton.vue

@@ -0,0 +1,168 @@
+<template>
+  <button
+    @click="handleClick"
+    :class="inbtnType"
+    :style="btnstyle"
+    :disabled="disabled"
+    >
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'kiss-button',
+  props: {
+    btnType: {
+      type: String,
+      default: 'kiss-btn-single-bk'
+    },
+    FontSize: {
+      type: String,
+      default: '16px'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      btnstyle: {
+        'font-size': this.FontSize
+      },
+      inbtnType: ''
+    }
+  },
+  methods: {
+    handleClick (evt) {
+      this.$emit('click', evt)
+    }
+  },
+  mounted () {
+    this.inbtnType = this.btnType
+    if (this.disabled) {
+      this.inbtnType = this.btnType + '-disabled'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.kiss-btn-left-bk{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  color: #b6f0ff;
+  border: 0px;
+  /* font-size: 20px; */
+  background-color: transparent;
+  background: url("../image/button/btnLeft.png");
+  background-repeat: no-repeat;
+}
+
+.kiss-btn-left-bk:hover,
+.kiss-btn-left-bk:focus{
+  color: #fcffb6;
+  background: url("../image/button/btnLeftClick.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-center-bk{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  border: 0px;
+  color: #b6f0ff;
+  /* font-size: 16px; */
+  background-color: transparent;
+  background: url("../image/button/btnCenter.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-center-bk:hover,
+.kiss-btn-center-bk:focus{
+  color: #fcffb6;
+  background: url("../image/button/btnCenterClick.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-right-bk{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  border: 0px;
+  color: #b6f0ff;
+  /* font-size: 20px; */
+  background-color: transparent;
+  background: url("../image/button/btnRight.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-right-bk:hover,
+.kiss-btn-right-bk:focus{
+  color: #fcffb6;
+  background: url("../image/button/btnRightClick.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-single-bk{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  border: 0px;
+  /* font-size: 20px; */
+  color: #b6f0ff;
+  background-color:transparent;
+  background: url("../image/button/btnSingle.png");
+  background-repeat: no-repeat;
+}
+
+.kiss-btn-single-bk:hover,
+.kiss-btn-single-bk:focus{
+  color: #fcffb6;
+  background: url("../image/button/btnSingleClick.png");
+  background-repeat: no-repeat;
+}
+
+.kiss-btn-single-bk-disabled{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  border: 0px;
+  /* font-size: 20px; */
+  color: #0096ba;
+  background-color:transparent;
+  background: url("../image/button/btnSingleDisable.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-center-bk-disabled{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  border: 0px;
+  /* font-size: 20px; */
+  color: #0096ba;
+  background-color:transparent;
+  background: url("../image/button/btnCenterDisable.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-right-bk-disabled{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  border: 0px;
+  /* font-size: 20px; */
+  color: #0096ba;
+  background-color:transparent;
+  background: url("../image/button/btnRightDisable.png");
+  background-repeat: no-repeat;
+}
+.kiss-btn-left-bk-disabled{
+  width: 104px;
+  height: 43px;
+  outline: 0px;
+  border: 0px;
+  /* font-size: 20px; */
+  color: #0096ba;
+  background-color:transparent;
+  background: url("../image/button/btnLeftDisable.png");
+  background-repeat: no-repeat;
+}
+</style>

package/src/kisscomps/components/compass3D/compass.vue

@@ -0,0 +1,180 @@
+<template>
+   <div class="camera" ref='cubewraper'>
+      <div class="space" ref='cube'
+        @mousedown="onmousedown"
+        @mousemove="onmousemove"
+        @mouseup="onmouseup"
+        @mousewheel="onmousewheel"
+        @dblclick="doubleclick">
+        <div class="box1" >
+          <div class="face1"></div>
+          <div class="face2"></div>
+          <div class="face3"></div>
+          <div class="face4"></div>
+        </div>
+        <div class="box2">
+          <div class="face1"></div>
+          <div class="face2"></div>
+          <div class="face3"></div>
+          <div class="face4"></div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'kiss-compass',
+  data () {
+    return {
+      downX: 0,
+      downY: 0,
+      moveX: 0,
+      moveY: 0,
+      tempX: 0,
+      tempY: 0,
+      degX: 0,
+      degY: 0,
+      isMouseDown: false
+    }
+  },
+  methods: {
+    doTrag () {
+      setTimeout(function () {
+      }, 5000)
+    },
+    onmousedown (e) {
+      console.log('onmousedowm')
+      this.isMouseDown = true
+      e = e || event
+      this.downX = e.clientX // 获取鼠标点下去时的坐标
+      this.downY = e.clientY
+      // this.onmousemove(e)
+    },
+    onmousemove (e) {
+      console.log('onmousemove')
+      if (this.isMouseDown) {
+        e = e || event
+        this.moveX = e.clientX - this.downX // 算出鼠标移动的距离
+        this.moveY = e.clientY - this.downY
+        // 根据一定比例将变化反应在盒子上，改变比例5可以调节拖动的速度
+        this.tempX = this.degX + this.moveX * 5
+        this.tempY = this.degY - this.moveY * 5
+        this.$refs.cube.style.transform = 'rotatex(' + this.tempY + 'deg) rotatey(' + this.tempX + 'deg)'
+        this.$emit('rotateAndPitch', this.tempX, this.tempY)
+      }
+    },
+    onmouseup (e) {
+      console.log('onmouseup')
+      this.isMouseDown = false
+      e = e || event
+      this.degX += this.moveX * 5 // 鼠标松开时将拖动期间改变的最终结果保存
+      this.degY += -this.moveY * 5
+    },
+    onmousewheel (e) {
+      console.log('onmousewheel')
+    },
+    doubleclick (e) {
+      console.log('double click')
+      this.$emit('signalClick', e)
+      this.$refs.cube.style.transform = 'rotatex(0deg) rotatey(0deg)'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.camera{
+  width: 30px;
+  height: 30px;
+  perspective-origin: 50% -50%;
+  -webkit-perspective-origin: 50% -50%;
+  perspective:2000px;
+  -webkit-perspective:2000px;
+}
+.space{
+  position:relative;
+  width:100%;
+  height:100%;
+  transform-style:preserve-3d;
+  -moz-transform-style:preserve-3d;
+  -webkit-transform-style:preserve-3d;
+  transform: rotateY(0deg) rotateX(0deg);
+  transform-origin:center center -10px;
+  -moz-transform-origin:center center -10px;
+  -webkit-transform-origin:center center -10px;
+}
+
+.space div{
+  position:absolute;
+}
+.box1, .box2{
+  transform-style:preserve-3d;
+  -moz-transform-style:preserve-3d;
+  -webkit-transform-style:preserve-3d;
+}
+.box1 div,.box2 div{
+  width:0;
+  height:0;
+  border-width:0 10px 20px;
+  border-style:solid;
+  opacity:.4;
+}
+.box2{
+  transform-origin: center 17px -10px;
+  transform: rotateX(180deg) translateY(-25px);
+  -moz-transform-origin: center 17px -10px;
+  -moz-transform: rotateX(180deg) translateY(-25px);
+  -webkit-transform-origin: center 17px -10px;
+  -webkit-transform: rotateX(180deg) translateY(-25px);
+}
+.face1{
+  border-color:transparent transparent #41d3f7;
+  transform-origin:center bottom;
+  transform:translateX(10px) translateY(10px) rotateX(35.36deg);
+  -moz-transform-origin:center bottom;
+  -moz-transform:translateX(10px) translateY(10px) rotateX(35.36deg);
+  -webkit-transform-origin:center bottom;
+  -webkit-transform:translateX(10px) translateY(10px) rotateX(35.36deg);
+}
+.face2{
+  border-color:transparent transparent #173d47;
+  transform-origin:right bottom;
+  transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
+  -moz-transform-origin:right bottom;
+  -moz-transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
+  -webkit-transform-origin:right bottom;
+  -webkit-transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
+}
+.face3{
+  border-color:transparent transparent #1b748a;
+  transform-origin:left bottom;
+  transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
+  -moz-transform-origin:left bottom;
+  -moz-transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
+  -webkit-transform-origin:left bottom;
+  -webkit-transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
+}
+.face4{
+  border-color:transparent transparent #1c96b8;
+  transform-origin:left bottom;
+  transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
+  -moz-transform-origin:left bottom;
+  -moz-transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
+  -webkit-transform-origin:left bottom;
+  -webkit-transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
+}
+.box2 .face1{
+  border-color:transparent transparent #142f36;
+}
+.box2 .face2{
+  border-color:transparent transparent #724e01;
+}
+.box2 .face3{
+  border-color:transparent transparent yellow;
+}
+.box2 .face4{
+  border-color:transparent transparent #154d5c;
+}
+
+</style>

package/src/kisscomps/components/compass3D/index.js

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

package/src/kisscomps/components/header/index.js

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

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

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

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

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

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