openatc-components 0.0.1

package/src/kisscomps/components/tip/kisstips.1.vue

@@ -0,0 +1,154 @@
+<template>
+  <div :class="kisstipsbgclass" :value="value" v-if="visable" :style="bgstyle">
+    <div class="kiss-tips-close" @click="handleClose" v-if="isClose" ref="close" style=""></div>
+    <div class="kiss-tips-contents"><slot></slot></div>
+  </div>
+</template>
+<script>
+import $ from 'jquery'
+import './Tdrag.js'
+export default {
+  name: 'kiss-tip',
+  data () {
+    return {
+      visable: true,
+      bgstyle: {
+        width: '',
+        height: ''
+      },
+      kisstipsbgclass: ''
+    }
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    isClose: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '523px'
+    },
+    height: {
+      type: String,
+      default: '364px'
+    },
+    type: {
+      type: String,
+      default: 'default' // alarm
+    }
+  },
+  watch: {
+    value: function (val) {
+      this.visable = val
+    },
+    visable: function (val) {
+      this.change(val)
+    },
+    deep: true,
+    immediate: true
+  },
+  methods: {
+    handleClose () {
+      this.visable = false
+    },
+    change (val) {
+      this.$emit('input', val)
+    }
+  },
+  mounted () {
+    this.visable = this.value
+    switch (this.type) {
+      case 'default':
+        this.bgstyle.height = this.height
+        this.bgstyle.width = this.width
+        this.kisstipsbgclass = 'kiss-tips-bg'
+        break
+      case 'alarm':
+        this.bgstyle.height = '99px'
+        this.bgstyle.width = '276px'
+        this.kisstipsbgclass = 'kiss-alarm-tips-bg'
+        this.$refs.close.style.marginRight = '-1px'
+        this.$refs.close.style.marginTop = '0.5px'
+        break
+      default: break
+    }
+    var self = this
+    if (this.isTrag) {
+      $(function () {
+        $('.' + self.kisstipsbgclass).Tdrag({})
+      })
+    }
+  },
+  updated () {
+    this.bgstyle.height = this.height
+    this.bgstyle.width = this.width
+    if (this.type === 'alarm') {
+      if (this.$refs.close === undefined) {
+        return false
+      }
+      this.$refs.close.style.marginRight = '-1px'
+      this.$refs.close.style.marginTop = '0.5px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .kiss-tips-bg{
+    /* display: inline-block; */
+    display: block;
+    /* text-align: center; */
+    position: relative;
+    z-index: 100;
+    margin: 0;
+    padding: none;
+    /* background: #1f2e2e;
+    opacity: 0.8; */
+    background: rgb(31, 46, 46, 0.8);
+    border: 1px solid #0096ba;
+    box-shadow: 0.1 0.1 0.1 0.1 #0096ba;
+  }
+  /* alarm 报警的弹框 */
+  .kiss-alarm-tips-bg{
+    /* display: inline-block; */
+    display: block;
+    /* text-align: center; */
+    position: relative;
+    z-index: 9999;
+    margin: 0;
+    padding: none;
+    background: url("../image/tipdlg/alarmbg.png");
+    background-repeat: no-repeat;
+  }
+/* .kips-tips-header{
+    padding-top: 1px;
+    display: block;
+    width:522px;
+    height: 50;
+} */
+.kiss-tips-close{
+    width:47px;
+    height: 47px;
+    margin-right: -2px;
+    margin-top: -1px;
+    cursor:pointer;
+    float: right;
+    background: url("../image/tipdlg/close.png");
+    background-repeat: no-repeat;
+}
+
+.kiss-tips-close:hover{
+    background: url("../image/tipdlg/closehover.png");
+    background-repeat: no-repeat;
+}
+
+.kiss-tips-contents{
+    width: 100%;
+    height: 100%;
+}
+
+</style>

package/src/kisscomps/components/tip/kisstips.vue

@@ -0,0 +1,154 @@
+<template>
+  <div :class="kisstipsbgclass" :value="value" v-if="visable" :style="bgstyle">
+    <div class="kiss-tips-close" @click="handleClose" v-if="isClose" ref="close" style=""></div>
+    <div class="kiss-tips-contents"><slot></slot></div>
+  </div>
+</template>
+<script>
+import $ from 'jquery'
+import './Tdrag.js'
+export default {
+  name: 'kiss-tip',
+  data () {
+    return {
+      visable: true,
+      bgstyle: {
+        width: '',
+        height: ''
+      },
+      kisstipsbgclass: ''
+    }
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    isClose: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '523px'
+    },
+    height: {
+      type: String,
+      default: '364px'
+    },
+    type: {
+      type: String,
+      default: 'default' // alarm
+    }
+  },
+  watch: {
+    value: function (val) {
+      this.visable = val
+    },
+    visable: function (val) {
+      this.change(val)
+    },
+    deep: true,
+    immediate: true
+  },
+  methods: {
+    handleClose () {
+      this.visable = false
+    },
+    change (val) {
+      this.$emit('input', val)
+    }
+  },
+  mounted () {
+    this.visable = this.value
+    switch (this.type) {
+      case 'default':
+        this.bgstyle.height = this.height
+        this.bgstyle.width = this.width
+        this.kisstipsbgclass = 'kiss-tips-bg'
+        break
+      case 'alarm':
+        this.bgstyle.height = '99px'
+        this.bgstyle.width = '276px'
+        this.kisstipsbgclass = 'kiss-alarm-tips-bg'
+        this.$refs.close.style.marginRight = '-1px'
+        this.$refs.close.style.marginTop = '0.5px'
+        break
+      default: break
+    }
+    var self = this
+    if (this.isTrag) {
+      $(function () {
+        $('.' + self.kisstipsbgclass).Tdrag({})
+      })
+    }
+  },
+  updated () {
+    this.bgstyle.height = this.height
+    this.bgstyle.width = this.width
+    if (this.type === 'alarm') {
+      if (this.$refs.close === undefined) {
+        return false
+      }
+      this.$refs.close.style.marginRight = '-1px'
+      this.$refs.close.style.marginTop = '0.5px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .kiss-tips-bg{
+    /* display: inline-block; */
+    display: block;
+    /* text-align: center; */
+    position: relative;
+    z-index: 100;
+    margin: 0;
+    padding: none;
+    /* background: #1f2e2e;
+    opacity: 0.8; */
+    background: rgb(31, 46, 46, 0.8);
+    border: 1px solid #0096ba;
+    box-shadow: 0.1 0.1 0.1 0.1 #0096ba;
+  }
+  /* alarm 报警的弹框 */
+  .kiss-alarm-tips-bg{
+    /* display: inline-block; */
+    display: block;
+    /* text-align: center; */
+    position: relative;
+    z-index: 9999;
+    margin: 0;
+    padding: none;
+    background: url("../image/tipdlg/alarmbg.png");
+    background-repeat: no-repeat;
+  }
+/* .kips-tips-header{
+    padding-top: 1px;
+    display: block;
+    width:522px;
+    height: 50;
+} */
+.kiss-tips-close{
+    width:47px;
+    height: 47px;
+    margin-right: -2px;
+    margin-top: -1px;
+    cursor:pointer;
+    float: right;
+    background: url("../image/tipdlg/close.png");
+    background-repeat: no-repeat;
+}
+
+.kiss-tips-close:hover{
+    background: url("../image/tipdlg/closehover.png");
+    background-repeat: no-repeat;
+}
+
+.kiss-tips-contents{
+    width: 100%;
+    height: 100%;
+}
+
+</style>

package/src/kisscomps/components/tip/kisstips.vue.bak

@@ -0,0 +1,211 @@
+<template>
+  <!-- <vue-draggable-resizable
+    ref="drag"
+    :w="dragAreaW"
+    :h="dragAreaH"
+    @dragging="onDrag"
+    @resizing="onResize"
+    :draggable="dragable"
+    :resizable="resizeable"> -->
+  <div
+    :class="kisstipsbgclass"
+    :value="value"
+    v-if="visable"
+    :style="bgstyle"
+    ref="main"
+  >
+    <div
+      class="kiss-tips-close"
+      @click="handleClose"
+      v-if="isClose"
+      ref="close"
+      style=""
+    ></div>
+    <div class="kiss-tips-contents">
+      <slot></slot>
+    </div>
+  </div>
+  <!-- </vue-draggable-resizable> -->
+</template>
+<script>
+import $ from 'jquery'
+import './Tdrag.js'
+// import VueDraggableResizable from '../TragResize/index'
+export default {
+  // components: {
+  //   VueDraggableResizable
+  // },
+  name: 'kiss-tip',
+  data () {
+    return {
+      visable: true,
+      bgstyle: {
+        width: '',
+        height: ''
+      },
+      // dragAreaW: 0,
+      // dragAreaH: 0,
+      kisstipsbgclass: ''
+    }
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    isClose: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '523px'
+    },
+    height: {
+      type: String,
+      default: '364px'
+    },
+    type: {
+      type: String,
+      default: 'default' // alarm
+    },
+    zindex: {
+      type: Number,
+      default: 100
+    }
+    // dragable: {
+    //   type: Boolean,
+    //   default: false
+    // },
+    // resizeable: {
+    //   type: Boolean,
+    //   default: false
+    // }
+  },
+  watch: {
+    value: function (val) {
+      this.visable = val
+    },
+    visable: function (val) {
+      this.change(val)
+    },
+    deep: true,
+    immediate: true
+  },
+  methods: {
+    handleClose () {
+      this.visable = false
+    },
+    // onDrag () {
+    // },
+    change (val) {
+      this.$emit('input', val)
+    }
+    // onResize (x, y, width, height) {
+    //   this.bgstyle.width = width + 'px'
+    //   this.bgstyle.height = height + 'px'
+    // }
+  },
+  // created () {
+  //   this.dragAreaW = parseInt(this.width)
+  //   this.dragAreaH = parseInt(this.height)
+  // },
+  mounted () {
+    this.visable = this.value
+    let zindex = 100
+    switch (this.type) {
+      case 'default':
+        this.bgstyle.height = this.height + 'px'
+        this.bgstyle.width = this.width + 'px'
+        this.kisstipsbgclass = 'kiss-tips-bg'
+        zindex = this.zindex === undefined ? 100 : this.zindex
+        break
+      case 'alarm':
+        this.bgstyle.height = '99px'
+        this.bgstyle.width = '276px'
+        this.kisstipsbgclass = 'kiss-alarm-tips-bg'
+        this.$refs.close.style.marginRight = '-1px'
+        this.$refs.close.style.marginTop = '0.5px'
+        zindex = 9999
+        break
+      default: break
+    }
+    this.$refs.main.style.zIndex = zindex
+    console.log(this.$refs.main.style)
+
+    var self = this
+    if (this.isTrag) {
+      $(function () {
+        $('.' + self.kisstipsbgclass).Tdrag({})
+      })
+    }
+  },
+  updated () {
+    // this.bgstyle.height = '99px'
+    // this.bgstyle.width = '276px'
+    if (this.type === 'alarm') {
+      if (this.$refs.close === undefined) {
+        return false
+      }
+      this.$refs.close.style.marginRight = '-1px'
+      this.$refs.close.style.marginTop = '0.5px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.kiss-tips-bg {
+  /* display: inline-block; */
+  display: block;
+  /* text-align: center; */
+  position: relative;
+  /* z-index: 100; */
+  margin: 0;
+  padding: none;
+  /* background: #1f2e2e;
+    opacity: 0.8; */
+  background: rgb(31, 46, 46, 0.8);
+  border: 1px solid #0096ba;
+  box-shadow: 0.1 0.1 0.1 0.1 #0096ba;
+}
+/* alarm 报警的弹框 */
+.kiss-alarm-tips-bg {
+  /* display: inline-block; */
+  display: block;
+  /* text-align: center; */
+  position: relative;
+  /* z-index: 9999; */
+  margin: 0;
+  padding: none;
+  background: url("../image/tipdlg/alarmbg.png");
+  background-repeat: no-repeat;
+}
+/* .kips-tips-header{
+    padding-top: 1px;
+    display: block;
+    width:522px;
+    height: 50;
+} */
+.kiss-tips-close {
+  width: 47px;
+  height: 47px;
+  margin-right: -2px;
+  margin-top: -1px;
+  /* position: relative; */
+  cursor: pointer;
+  float: right;
+  background: url("../image/tipdlg/close.png");
+  background-repeat: no-repeat;
+}
+
+.kiss-tips-close:hover {
+  background: url("../image/tipdlg/closehover.png");
+  background-repeat: no-repeat;
+}
+
+.kiss-tips-contents {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/kisscomps/index.js

@@ -0,0 +1,71 @@
+import Button from './components/button/index'
+import KissMenu from './components/menu/index'
+import KissInput from './components/input/index'
+import KissSearchInput from './components/KissSearchInput/index'
+import KissSelect from './components/select/index'
+import KissTips from './components/tip/index'
+import KissMutipleTips from './components/mutipletips/index'
+import KissDatePicker from './components/timectrl/index'
+import KissCompass from './components/compass3D/index'
+// import KissCircleMenu from './components/CircleMenu/index'
+// import CircleMenu from './components/KissCircleMenu/index'
+import KissDragResize from './components/TragResize/index'
+import XRDDirSelector from './components/XRDDirSelector/index'
+import SatausBar from './components/StatusBar/index'
+import DashBoard from './components/DashBoard/index'
+import KissPanel from './components/panel/index'
+import KissTableButton from './components/tablebutton/index'
+import KissHead from './components/header/index'
+import KissHorizontal from './components/Horizontal/index'
+import KissHorizontalChildren from './components/HorizontalChildren/index'
+import KissHorizontalMenu from './components/horizontalMenu/index'
+import KissSimulationProgress from './components/KissSimulationProgress/index'
+import KissMessageBox from './components/KissMessageBox/index'
+// 第三方插件
+import VTooltip from 'v-tooltip'
+
+const components = {
+  Button,
+  KissMenu,
+  KissInput,
+  KissSearchInput,
+  KissSelect,
+  KissTips,
+  KissMutipleTips,
+  KissDatePicker,
+  KissCompass,
+  // KissCircleMenu,
+  // CircleMenu,
+  KissDragResize,
+  XRDDirSelector,
+  SatausBar,
+  DashBoard,
+  KissPanel,
+  KissTableButton,
+  KissHead,
+  KissHorizontal,
+  KissHorizontalChildren,
+  KissHorizontalMenu,
+  KissSimulationProgress,
+  KissMessageBox
+}
+
+const install = function (Vue) {
+  if (install.installed) return
+  Vue.use(VTooltip)
+  // components.map(component => Vue.component(component.name, component))
+  Object.keys(components).forEach(key => {
+    Vue.component(components[key].name, components[key])
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+const API = {
+  install,
+  ...components
+}
+
+export default API

package/src/main.js

@@ -0,0 +1,23 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import kissui from './kisscomps/index'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+// import chosen from 'chosen-js'
+Vue.use(kissui)
+Vue.use(ElementUI)
+// Vue.use(chosen)
+// Vue.use($)
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

package/src/router/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: (resolve) => {
+        require(['@/views/home'], resolve)
+      }
+    }
+  ]
+})