openatc-components 0.0.1

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

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

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

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

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

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

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

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

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

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

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