openatc-components 0.0.2 → 0.0.3

package/src/kisscomps/components/KissMessageBox/KissMessageBox.vue

@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <el-dialog
-      center
-      :top="boxTop"
-      :width="boxWidth"
-      :visible.sync="boxVisible"
-      :title="title"
-      :close-on-click-modal="false"
-      custom-class="kissMessageBox"
-      @close="oncancle"
-      append-to-body>
-      <div class="text">{{text}}</div>
-      <div slot="footer" class="boxFooter">
-        <el-button class="btn canclebtn" type="primary" @click="oncancle">取 消</el-button>
-        <el-button class="btn okbtn" type="primary" @click="onok">确 认</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-export default {
-  name: 'kiss-message-box',
-  data () {
-    return {
-      boxVisible: this.visible
-    }
-  },
-  watch: {
-    visible: function (val) {
-      this.boxVisible = val
-    }
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: '提示'
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    boxTop: {
-      type: String,
-      default: '380px'
-    },
-    boxWidth: {
-      type: String,
-      default: '424px'
-    }
-  },
-  methods: {
-    onok () {
-      this.$emit('ok')
-    },
-    oncancle () {
-      this.$emit('cancle')
-    }
-  },
-  mounted () {
-  }
-}
-</script>
-<style>
-.kissMessageBox {
-  background: rgba(6, 63, 77, 0.8);
-  border: 1px solid #085c71;
-}
-.kissMessageBox .el-dialog__header {
-  border-bottom: 1px solid #004e61;
-}
-.kissMessageBox .el-dialog__header .el-dialog__headerbtn i {
-  color: #0096ba;
-}
-.kissMessageBox .el-dialog__body {
-  text-align: center;
-}
-.kissMessageBox .el-dialog__title {
-  font-size: 16px;
-  color: #42daff;
-}
-.kissMessageBox .text {
-  font-family: MicrosoftYaHei;
-  font-size: 14px;
-  color: #ffffff;
-}
-.kissMessageBox .boxFooter .btn {
-  font-size: 14px;
-  font-family: MicrosoftYaHei;
-  width: 64px;
-  height: 34px;
-  padding: 2px 10px;
-}
-.kissMessageBox .boxFooter .canclebtn {
-  background-color: #09647a;
-  color: #42daff;
-  border-color: #09647a;
-}
-.kissMessageBox .boxFooter .okbtn {
-  background-color: #0096ba;
-  color: #fff;
-  border-color: #0096ba;
-}
-</style>

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

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

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

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

package/src/kisscomps/components/KissSearchInput/kisssearchinput.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="kiss-search-input">
-      <div class="kiss-input-container">
-        <input type="text" class="kiss-input-default" :placeholder="placeHolder" v-model="textdata">
-        <button type="submit" @click="handleClick"></button>
-      </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'kiss-search-input',
-  props: {
-    placeHolder: {
-      type: String,
-      default: '请输入您要搜索的内容...'
-    },
-    textdata: {
-      type: String,
-      default: ''
-    }
-  },
-  methods: {
-    handleClick (evtFunc) { // 添加点击事件响应
-      this.$emit('click', evtFunc)
-    }
-  }
-}
-</script>
-<style scoped>
-  .kiss-input-default{
-    width: 230px;
-    height: 24px;
-    padding: 0;
-    margin: 10px 2px 0px 19px;
-    color: #42daff;
-    font-size: 14px;
-    outline: 0px;
-    border: 0px;
-    border-radius: 6px;
-    background-color: transparent;
-  }
-  .kiss-input-container{
-    display: block;
-    width: 248px;
-    height: 43px;
-    background: url("../image/KissSearchInput/searchinput.png");
-    /* background-size: cover; */
-    background-repeat: no-repeat;
-  }
-  .kiss-search-input button{
-    float: right;
-    display: inline;
-    margin-top: 10px;
-    margin-right: 10px;
-    width: 25px;
-    height: 25px;
-    background: url("../image/KissSearchInput/search.png");
-    background-repeat: no-repeat;
-    outline: none;
-    border: none;
-    cursor:pointer;
-  }
-
-  .kiss-search-input button:hover{
-    background: url("../image/KissSearchInput/searchhover.png");
-    background-repeat: no-repeat;
-  }
-  .kiss-search-input input{
-    width: 182px;
-    margin: 12px, 2px, 0px, 19px;
-  }
-  .kiss-search-input input::-webkit-input-placeholder {
-    color: #0096ba;
-    font-size: 15px;
-    text-align: left;
-  }
-</style>

package/src/kisscomps/components/KissSimulationProgress/KissSimulationProgress.vue

@@ -1,294 +0,0 @@
-<template>
-  <div id="progressBar">
-    <!-- 进度条 -->
-    <div class="bar">
-        <span class="curProcess" :style="{width:percentage+'%'}"></span>
-    </div>
-    <!-- 圆 -->
-    <span v-for="(item, index) in circleNomal" class="circle" :key="`circleNomal-${index}`" :class="item.className" :style="{left:item.left}"></span>
-    <!-- 菱形 -->
-    <span v-for="(item, index) in timeLine" class="diamond" :key="`timeLine-${index}`" :class="item.className" :style="{left:item.left}"></span>
-    <!-- 当前时间标记 -->
-    <div id="curTime" :style="{left:percentage+'%'}">
-      <div>{{curTime}}</div>
-      <span class="curTimeIcon"></span>
-    </div>
-    <!-- 时间节点 -->
-    <div style="width: 100%; position: relative;">
-      <span v-for="(item, index) in timeLine" :key="index" class="time" :style="{left:item.left}">
-        {{item.time}}
-      </span>
-    </div>
-    <div class="curText">已完成:{{percentage}}%</div>
-  </div>
-</template>
-<script>
-import moment from 'moment'
-export default {
-  name: 'kiss-simulation-progress',
-  data () {
-    return {
-      timeLine: [{ // 目前时间写死为一天五等分
-        left: '0%',
-        className: 'normalDiamond'
-      }, {
-        left: '25%',
-        className: 'normalDiamond'
-      }, {
-        left: '50%',
-        className: 'normalDiamond'
-      }, {
-        left: '75%',
-        className: 'normalDiamond'
-      }, {
-        left: '100%',
-        className: 'normalDiamond'
-      }],
-      circleNomal: [],
-      percentage: 0,
-      curTime: 0
-    }
-  },
-  props: {
-    totalseconds: {
-      type: Number,
-      default: 0
-    },
-    curseconds: {
-      type: Number,
-      default: 0
-    },
-    starttime: {
-      type: String,
-      default: '2019-01-01 00:00:00'
-    },
-    endtime: {
-      type: String,
-      default: '2019-01-01 00:00:00'
-    }
-  },
-  watch: {
-    curseconds: function (val) {
-      let mseconds = val + '000'
-      this.curstamp = Number(this.startstamp) + Number(mseconds)
-      this.curTime = this.stampToTime(this.curstamp)
-      this.percentage = (this.curseconds / this.totalseconds * 100).toFixed(0)
-      // this.createCircle()
-      this.changeProgressStyle()
-    }
-  },
-  directives: {
-    drag: function (el) {
-      let dragBox = el
-      dragBox.onmousedown = e => {
-        // 算出鼠标相对元素的位置
-        let disX = e.clientX - dragBox.offsetLeft
-        document.onmousemove = e => {
-          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-          let left = e.clientX - disX
-          // 移动当前元素
-          dragBox.style.left = left + 'px'
-        }
-        document.onmouseup = e => {
-          // 鼠标弹起来的时候不再移动
-          document.onmousemove = null
-          // 预防鼠标弹起来后还会循环(即预防鼠标放上去的时候还会移动)
-          document.onmouseup = null
-        }
-      }
-    }
-  },
-  methods: {
-    createCircle () {
-      this.circleNomal = []
-      let curCircleLeft = 0
-      while (curCircleLeft < 100) {
-        if (curCircleLeft % 25 !== 0) {
-          this.circleNomal.push({
-            left: `${curCircleLeft}%`,
-            className: 'normalCircle'
-          })
-        }
-        curCircleLeft = curCircleLeft + 6.25
-      }
-    },
-    changeProgressStyle () {
-      this.circleNomal.forEach(ele => {
-        if (Number(ele.left.split('%')[0]) > this.percentage) {
-          ele.className = 'abnormalCircle'
-        } else {
-          ele.className = 'normalCircle'
-        }
-      })
-      this.timeLine.forEach(ele => {
-        if (Number(ele.left.split('%')[0]) >= this.percentage) {
-          ele.className = 'abnormalDiamond'
-        } else {
-          ele.className = 'normalDiamond'
-        }
-      })
-    },
-    createTimeLine () {
-      // 根据起始时间，计算时间线（默认5个时间节点）
-      this.startstamp = this.timeToStamp(this.starttime)
-      this.endstamp = this.timeToStamp(this.endtime)
-      const step = (this.endstamp - this.startstamp) / 4
-      for (let i = 0; i < 5; i++) {
-        this.timeLine[i].time = this.computedDateTime(this.startstamp, step * i)
-      }
-    },
-    computedDateTime (startstamp, step) {
-      // 根据开始时间戳和可变步长，计算当前时间
-      const nowstamp = Number(startstamp) + Number(step)
-      const nowTime = this.stampToTime(nowstamp)
-      return nowTime
-    },
-    timeToStamp (timeString) {
-      // 将日期格式字符串转换为时间戳
-      const time = new Date(timeString)
-      return moment(time).valueOf()
-    },
-    stampToTime (stamp) {
-      // 将时间戳转为日期格式字符串
-      return moment(stamp).format('MM-DD HH:mm:ss')
-      // return moment(stamp).format('HH:mm:ss')
-    }
-  },
-  mounted () {
-    this.createTimeLine()
-    this.createCircle()
-  }
-}
-</script>
-<style scoped>
-#progressBar{
-  width: 80%;
-  height: 50px;
-  position: relative;
-  margin: 20px 0 0 30px;
-}
-#progressBar .bar{
-  width: 100%;
-  height: 3px;
-  position: absolute;
-  top:50%;
-  left: 0;
-  margin-top:-30px;
-  background: #0096ba;
-  z-index: 1;
-}
-#progressBar .bar  .curProcess{
-  position: absolute;
-  display: inline-block;
-  background: #42daff;
-  height: 3px;
-  z-index: 1;
-  transition: width 700ms linear;
-  -moz-transition: width 700ms linear; /* Firefox 4 */
-  -webkit-transition: width 700ms linear; /* Safari 和 Chrome */
-  -o-transition: width 700ms linear; /* Opera */
-}
-
-/* 圆 */
-.circle {
-  position: absolute;
-  top:0;
-  margin-top: -9px;
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  margin-left: -5px;
-  color:#fff;
-  z-index: 9;
-  box-sizing: border-box;
-  transition: background 600ms;
-  -moz-transition: background 600ms; /* Firefox 4 */
-  -webkit-transition: background 600ms; /* Safari 和 Chrome */
-  -o-transition: background 600ms; /* Opera */
-}
-.normalCircle{
-  border:2px solid #42daff;
-  background: #42daff;
-}
-.abnormalCircle {
-  border: 2px solid #0096ba;
-  background:#181818;
-}
-/* 菱形 */
-#progressBar>.diamond {
-  position: absolute;
-  top:0;
-  z-index: 10;
-  width: 10px;
-  height: 10px;
-  /* Rotate */
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  -webkit-transform-origin: 0 100%;
-  transform-origin: 0 100%;
-  border-radius: 0;
-  border: none;
-  margin-top: -7px;
-  margin-left: 0px;
-  transition: background 700ms linear;
-  -moz-transition: background 700ms linear; /* Firefox 4 */
-  -webkit-transition: background 700ms linear; /* Safari 和 Chrome */
-  -o-transition: background 700ms linear; /* Opera */
-}
-#progressBar>.normalDiamond {
-  background: #42daff;
-}
-#progressBar>.abnormalDiamond {
-  background: #0096ba;
-}
-/* 时间节点 */
-#progressBar .time {
-  position: absolute;
-  top: 0;
-  width: 48px;
-  height: 11px;
-  font-size: 12px;
-  font-family: 'MicrosoftYaHei';
-  line-height: 35px;
-  color: #999;
-  width: 100px;
-  white-space: nowrap;
-  height: 40px;
-  transform: translateX(-50%);
-}
-/* 当前时间 */
-#progressBar #curTime {
-  position: absolute;
-  top: -52px;
-  z-index: 20;
-  line-height: 35px;
-  color: #fff;
-  font-size: 14px;
-  transition: left 700ms linear;
-  -moz-transition: left 700ms linear; /* Firefox 4 */
-  -webkit-transition: left 700ms linear; /* Safari 和 Chrome */
-  -o-transition: left 700ms linear; /* Opera */
-}
-#progressBar #curTime>div {
-  /* min-width: 100px; */
-  transform: translateX(-50%);
-  white-space: nowrap;
-}
-#progressBar .curTimeIcon {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: #42daff;
-  border: 2px solid #0096ba;
-  transform: translateX(-50%);
-}
-#progressBar .curText {
-  position: absolute;
-  top: -16px;
-  right: -100px;
-  font-size: 14px;
-  color: #fff;
-  font-family: 'MicrosoftYaHei';
-}
-</style>

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

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

package/src/kisscomps/components/StatusBar/StatusBar.vue

@@ -1,222 +0,0 @@
-<template>
-  <div>
-    <svg
-      t="1545830627147"
-      class="icon"
-      style=""
-      :viewBox="`${ViewBox.x} ${ViewBox.y} ${ViewBox.w} ${ViewBox.h}`"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg" p-id="3189"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      :width="Width"
-      :height="Height">
-      <path d="M79.095172 436.788966c-15.889655 0-29.307586 10.24-34.251034 24.717241-0.706207 3.884138-1.05931 8.121379-1.05931 12.358621v2.824827c0 1.412414 0 2.824828 0.353103 4.237242 3.884138 15.889655 18.008276 27.895172 35.310345 27.895172h152.893793v-72.386207H79.095172z"
-            :fill="LevelsInfo[4].color" p-id="3190"></path>
-      <path d="M231.988966 436.788966H420.193103v72.386206H231.988966z"
-            :fill="LevelsInfo[3].color" p-id="3191"></path>
-      <path d="M420.193103 436.788966h188.204138v72.386206H420.193103z"
-            :fill="LevelsInfo[2].color" p-id="3192"></path>
-      <path d="M608.397241 436.788966h188.204138v72.386206h-188.204138z"
-            :fill="LevelsInfo[1].color" p-id="3193"></path>
-      <path d="M948.788966 436.788966h-152.187587v72.386206h152.187587c19.773793 0 36.016552-15.889655 36.016551-35.663448 0-1.412414 0-3.177931-0.353103-4.590345-2.118621-18.361379-17.302069-32.132414-35.663448-32.132413z"
-            :fill="LevelsInfo[0].color" p-id="3194"></path>
-      <path d="M139.475862 521.18069l-18.008276 31.426207h36.016552z"
-            :fill="ArrowColor" p-id="3195"
-            :class="CurLevelStatus === 0x0101 ? '' : 'invisible'"></path>
-      <path d="M342.863448 521.18069l-18.008276 31.426207h36.016552z"
-            :fill="ArrowColor" p-id="3196"
-            :class="CurLevelStatus === 0x0100 ? '' : 'invisible'"></path>
-      <path d="M532.48 521.18069l-18.008276 31.426207H550.841379z"
-            :fill="ArrowColor" p-id="3197"
-            :class="CurLevelStatus === 0x0011 ? '' : 'invisible'"></path>
-      <path d="M722.449655 521.18069l-18.361379 31.426207h36.369655z"
-            :fill="ArrowColor" p-id="3198"
-            :class="CurLevelStatus === 0x0010 ? '' : 'invisible'"></path>
-      <path d="M890.88 521.18069l-18.361379 31.426207h36.369655z"
-            :fill="ArrowColor" p-id="3199"
-            :class="CurLevelStatus === 0x0001 ? '' : 'invisible'"></path>
-      <text text-anchor='middle' x = "512" y = "650" :fill="CurLevelColor"  style="font-size:50px;">{{CurLevelName}}</text>
-    </svg>
-  </div>
-</template>
-<script>
-export default {
-  name: 'SatausBar',
-  props: {
-    LevelsInfo: {
-      type: Array,
-      default: function () {
-        return [
-          {
-            level: 1,
-            levelname: '',
-            color: '#EA423B'
-          },
-          {
-            level: 2,
-            levelname: '',
-            color: '#FCA824'
-          },
-          {
-            level: 3,
-            levelname: '',
-            color: '#F6D40A'
-          },
-          {
-            level: 4,
-            levelname: '',
-            color: '#31C750'
-          },
-          {
-            level: 5,
-            levelname: '',
-            color: '#00841C'
-          }
-        ]
-      }
-    },
-    ViewBox: {
-      type: Object,
-      default: function () {
-        return {
-          x: 0,
-          y: 0,
-          w: 1024,
-          h: 1024
-        }
-      }
-    },
-    ArrowColor: {
-      type: String,
-      default: 'yellow'
-    },
-    TotalLevel: {
-      type: Number,
-      default: 100
-    },
-    /**
-     * 说明：等分模式： 只需要传入五个等级的总数，和每个等级的颜色
-     *      自定义模式：不需要传入总数值，但是需要在LevelsInfo的对象中指出范围例如
-     *                [{
-     *                    level: 1,
-     *                    levelname: '',
-     *                    Upperlimit: Number,
-     *                    Lowerlimit: Number,
-     *                }]
-     */
-    Model: {
-      type: String,
-      default: 'Divide' // Custom
-    },
-    CurLevel: {
-      type: Number,
-      default: 0
-    },
-    Width: {
-      type: String,
-      default: '200px'
-    },
-    Height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data () {
-    return {
-      CurLevelStatus: 0x0001,
-      CurLevelName: 'status name',
-      CurLevelColor: 'red'
-    }
-  },
-  methods: {
-    SetCurLevelInfo (level) {
-      switch (level) {
-        case 1:
-          this.CurLevelStatus = 0x0001
-          this.CurLevelName = this.LevelsInfo[0].levelname
-          this.CurLevelColor = this.LevelsInfo[0].color
-          break
-        case 2:
-          this.CurLevelStatus = 0x0010
-          this.CurLevelName = this.LevelsInfo[1].levelname
-          this.CurLevelColor = this.LevelsInfo[1].color
-          break
-        case 3:
-          this.CurLevelStatus = 0x0011
-          this.CurLevelName = this.LevelsInfo[2].levelname
-          this.CurLevelColor = this.LevelsInfo[2].color
-          break
-        case 4:
-          this.CurLevelStatus = 0x0100
-          this.CurLevelName = this.LevelsInfo[3].levelname
-          this.CurLevelColor = this.LevelsInfo[3].color
-          break
-        case 5:
-          this.CurLevelStatus = 0x0101
-          this.CurLevelName = this.LevelsInfo[4].levelname
-          this.CurLevelColor = this.LevelsInfo[4].color
-          break
-        default: break
-      }
-    },
-    handleDivideModel (cur) {
-      if (this.TotalLevel === undefined) {
-        throw new Error('The TotalLevel not set!')
-      }
-      let interval = this.TotalLevel / 5
-      if (cur >= 0 && cur <= interval) {
-        this.SetCurLevelInfo(1)
-      } else if (interval < cur && cur <= 2 * interval) {
-        this.SetCurLevelInfo(2)
-      } else if (2 * interval < cur && cur <= 3 * interval) {
-        this.SetCurLevelInfo(3)
-      } else if (3 * interval < cur && cur < 4 * interval) {
-        this.SetCurLevelInfo(4)
-      } else {
-        this.SetCurLevelInfo(5)
-      }
-    },
-    handleCustomModel (cur) {
-      for (let i = 0; i < 0; i++) {
-        let Upperlimit = this.LevelsInfo[i].Upperlimit
-        let Lowerlimit = this.LevelsInfo[i].Lowerlimit
-        if (Upperlimit === undefined || Lowerlimit === undefined) {
-          throw new Error(`Do you define level${this.LevelsInfo[i].level}'s Upperlimit or Lowerlimit`)
-        }
-        if (Lowerlimit < cur <= Upperlimit) {
-          this.SetCurLevelInfo(i)
-        }
-      }
-    }
-  },
-  watch: {
-    CurLevel: {
-      handler: function (cur) {
-        if (this.Model === 'Divide') {
-          this.handleDivideModel(cur)
-        }
-        if (this.Model === 'Custom') {
-          this.handleCustomModel(cur)
-        }
-        // console.log(`the cur status: ${this.CurLevelStatus}`)
-      }
-    }
-  },
-  created () {
-    // console.log(this.ViewBox)
-    let cur = this.CurLevel
-    if (this.Model === 'Divide') {
-      this.handleDivideModel(cur)
-    }
-    if (this.Model === 'Custom') {
-      this.handleCustomModel(cur)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.invisible {
-  visibility: hidden;
-}
-</style>