openatc-components 0.0.1

package/src/kisscomps/components/DashBoard/dashboard.js

@@ -0,0 +1,471 @@
+/**
+ * @Description: 这个类封装了仪表盘
+ * @Author: chengcheng
+ * @Date: Create in 10:26 2019/04/03
+ * @Modified By:
+ */
+import MakeGradientColot from './MakeGradientColor'
+const PIDEG = Math.PI / 180
+export default class DashBoard {
+  constructor (id, options) {
+    this.m_id = id // id 用来获取dom节点
+    this.m_options = options // 设置的选项
+    this.m_canvas = null // canvas
+    this.m_save_canvas = null // 用来保存状态的canvas  暂时还不理解
+    this.m_context = null
+    this.m_save_context = null // canvas绘制环境
+    this.m_percent = 0
+    this.m_target_percent = 0
+    this.m_tickmask_offset = 0
+    this.m_halfCanvasWidth = 0
+    this.m_halfCanvasHeight = 0
+    this.m_rotation_deg = 0
+
+    this.default_option = {
+      style: 'bar',
+      bar_radius: 200,
+      bar_bg_w: 20,
+      bar_w: 18,
+      bar_bg_color: '#193b43',
+      bar_bg_ring_color: '#193b43',
+      bar_start_color: '#42daff',
+      bar_stop_color: 'yellow',
+      title: '交通强度',
+      title_font_color: '#FFFFFF',
+      title_font_size: 40,
+      title_show: true,
+      title_font_family: 'HanHei SC, PingFang SC, Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif',
+      sides_font_color: '#FFFFFF',
+      sides_font_size: 30,
+      sides_show: true,
+      sides_font_family: 'HanHei SC, PingFang SC, Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif',
+      tick_length: 12,
+      large_tick_length: 22,
+      tick_thickness: 1,
+      tick_group_length: 9,
+      ticks_groups_begin: 0,
+      total_degrees: 200,
+      total_tick: 101,
+      tick_color: '#555962',
+      tick_on_color: '#527d98',
+      on_color_gradient: null,
+      bg_color: 'rgba(255, 255, 255, 0)',
+      gauge_scale: 1,
+      animation_duration: 2000,
+      show_num: true,
+      show_center_num: true,
+      center_font_size: 100,
+      center_font_color: '#FFFFFF',
+      cur_score_circle_color: '#555962',
+      center_offset: {
+        x: 0,
+        y: -30
+      },
+      center_num_font_family: 'HanHei SC, PingFang SC, Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif',
+      num_gap: 1,
+      num_begin: 0,
+      num_font_size: 18,
+      tickmask_offset: 0,
+      num_font_family: 'HanHei SC, PingFang SC, Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif',
+      circle_radius: 5,
+      circle_offset: 0,
+      center_text_unit: '%',
+      center_text_offset: {
+        x: 16,
+        y: 8 - 30
+      }
+    } // 默认选项
+    this.m_default_option = {}
+    Object.assign(this.m_default_option, this.default_option, options)
+    // 初始化绘制环境
+    this.InitCanvas()
+  }
+
+  /**
+   * 初始化绘图环境
+   */
+  InitCanvas () {
+    this.m_canvas = document.getElementById(this.m_id)
+    this.m_save_canvas = document.createElement('canvas')
+
+    let canvas = this.m_canvas
+
+    this.m_save_canvas.width = canvas.width
+    this.m_save_canvas.height = canvas.height
+    this.delatLength = this.m_default_option.large_tick_length - this.m_default_option.tick_length
+
+    this.m_save_context = this.m_save_canvas.getContext('2d')
+    this.m_context = canvas.getContext('2d')
+    // this.m_save_context.scale(4, 4)
+    this.m_percent = this.m_default_option.percent || 0
+    this.m_target_percent = this.m_percent
+    this.m_tickmask_offset = this.getTickMarkOffset()
+    this.m_halfCanvasHeight = this.m_save_canvas.height / 2
+    this.m_halfCanvasWidth = this.m_save_canvas.width / 2
+    this.m_rotation_deg = this.getRotationDeg()
+  }
+
+  getTickMarkOffset () {
+    return this.m_default_option.tickmask_offset + this.m_default_option.circle_radius * 2 + this.m_default_option.circle_offset
+  }
+  getRotationDeg () {
+    return this.m_default_option.total_degrees / (this.m_default_option.total_tick - 1) * PIDEG
+  }
+  /**
+   * 准备舞台, 绘制背景和中间数值
+   */
+  prepareStage () {
+    let saveCanvas = this.m_save_canvas
+    let saveContext = this.m_save_context
+    // 清除canvas画布
+    saveContext.clearRect(0, 0, saveCanvas.width, saveCanvas.height)
+    // 设置背景
+    this.applyBg()
+    // 设置旋转中心
+    saveContext.translate(this.m_halfCanvasWidth,
+      this.m_halfCanvasHeight - this.m_default_option.tick_thickness / 2)
+    // 设置缩放比例
+    saveContext.scale(this.m_default_option.gauge_scale,
+      this.m_default_option.gauge_scale)
+    // 绘制内容
+    this.drawContent()
+  }
+
+  /**
+   * 绘制弧度
+   * @param {*} r  半径
+   * @param {*} start 开始角度
+   * @param {*} end 结束角度
+   * @param {*} w 弧宽度
+   * @param {*} colorStyle 圆环颜色 支持渐变
+   */
+  drawDonuts (r, start, end, w, colorStyle) {
+    let saveContext = this.m_save_context
+    saveContext.lineWidth = w
+    saveContext.lineCap = 'round'
+    saveContext.beginPath()
+    saveContext.arc(0, 0, r, start, end, false)
+    saveContext.strokeStyle = colorStyle// '#DC143C'
+    saveContext.stroke()
+    saveContext.closePath()
+  }
+
+  // 绘制中间数字
+  drawContent () {
+    let saveCanvas = this.m_save_canvas
+    let saveContext = this.m_save_context
+
+    if (this.m_default_option.show_center_num) {
+      let fillColor = this.m_default_option.center_font_color
+        ? this.m_default_option.center_font_color.split('-') : [this.m_default_option.tick_on_color]
+      let centerText = Math.floor(
+        this.m_percent * ((this.m_default_option.total_tick - 1) *
+        this.m_default_option.num_gap +
+        this.m_default_option.num_begin) / 100)
+
+      var gaugeWidth = saveCanvas.width / 2 -
+        this.m_default_option.circle_radius * 2 -
+        this.m_default_option.circle_offset - this.m_default_option.large_tick_length - this.m_default_option.tickmask_offset
+
+      saveContext.save()
+      if (fillColor.length === 2) {
+        var gradient = saveContext.createLinearGradient(-gaugeWidth, 0, gaugeWidth, 0)
+        gradient.addColorStop('0', fillColor[0])
+        gradient.addColorStop('0.7', fillColor[1])
+        gradient.addColorStop('1', fillColor[1])
+        saveContext.fillStyle = gradient
+      } else {
+        saveContext.fillStyle = fillColor[0]
+      }
+      saveContext.font = this.m_default_option.center_font_size + 'px ' + this.m_default_option.center_num_font_family
+      saveContext.textAlign = 'center'
+      saveContext.textBaseline = 'middle'
+      var centerTextWidth = Math.floor(saveContext.measureText(centerText).width)
+      saveContext.fillText(centerText, this.m_default_option.center_offset.x, this.m_default_option.center_offset.y)
+      saveContext.font = '30px ' + this.m_default_option.num_font_family
+      saveContext.textAlign = 'center'
+      saveContext.textBaseline = 'middle'
+      saveContext.fillText(this.m_default_option.center_text_unit, centerTextWidth / 2 +
+        this.m_default_option.center_text_offset.x, this.m_default_option.center_text_offset.y)
+    }
+    let x, y, titleY
+    let totalDegrees = this.m_default_option.total_degrees
+    if (totalDegrees < 180) {
+      x = this.m_default_option.bar_radius * Math.sin(totalDegrees / 2 * PIDEG)
+      y = this.m_default_option.bar_radius * Math.cos(totalDegrees / 2 * PIDEG)
+      y = -y
+      titleY = 0
+    } else if (totalDegrees === 180) {
+      x = this.m_default_option.bar_radius
+      y = 0
+      titleY = 0
+    } else {
+      x = this.m_default_option.bar_radius * Math.cos((totalDegrees - 180) / 2 * PIDEG)
+      y = this.m_default_option.bar_radius * Math.sin((totalDegrees - 180) / 2 * PIDEG)
+      titleY = y
+    }
+    if (this.m_default_option.sides_show) {
+      // 绘制最大值和最小值
+      saveContext.font = this.m_default_option.sides_font_size + 'px ' + this.m_default_option.sides_font_family
+      saveContext.fillStyle = this.m_default_option.sides_font_color
+      saveContext.fillText(0, -x, y + 30)
+      saveContext.fillText(this.m_default_option.total_tick, x, y + 30)
+    }
+    if (this.m_default_option.title_show) {
+      saveContext.font = this.m_default_option.title_font_size + 'px ' + this.m_default_option.title_font_family
+      saveContext.fillStyle = this.m_default_option.title_font_color
+      saveContext.fillText(this.m_default_option.title, 0, titleY + 30)
+    }
+    saveContext.restore()
+  }
+  /**
+   * 绘制刻度帧数， 刻度长度 和 第几个数字
+   * @param {*} tickLength
+   * @param {*} tickIndex
+   */
+  drawGaugeNum (tickLength, tickIndex) {
+    let saveContext = this.m_save_context
+    let text = this.m_default_option.num_begin + this.m_default_option.num_gap * tickIndex - 1
+    // saveContext.measureText(text)
+    saveContext.save()
+    saveContext.translate(-1 * this.m_halfCanvasWidth +
+      tickLength + this.m_default_option.circle_radius * 2 +
+      this.m_default_option.circle_offset +
+      this.m_default_option.num_font_size / 2, -this.m_default_option.tick_thickness / 2)
+    saveContext.rotate(-90 * PIDEG)
+    saveContext.font = this.m_default_option.num_font_size + 'px ' + this.m_default_option.num_font_family
+    saveContext.textAlign = 'center'
+    saveContext.textBaseline = 'middle'
+    saveContext.fillText(text, 0, this.m_default_option.tickmask_offset)
+    saveContext.restore()
+  }
+  /**
+   * 应用背景
+   */
+  applyBg () {
+    let saveCanvas = this.m_save_canvas
+    let saveContext = this.m_save_context
+    saveContext.save()
+    saveContext.fillStyle = this.m_default_option.bg_color // 填充绘画的颜色
+    saveContext.fillRect(0, 0, saveCanvas.width, saveCanvas.height) // 绘制“被填充”的矩形
+    saveContext.restore() // 返回之前保存过的路径状态和属性
+  }
+  /**
+   * 绘制提示圆点
+   * @param {*} beginX
+   * @param {*} beginY
+   */
+  drawScoreTipCircle (beginX, beginY) {
+    let saveContext = this.m_save_context
+    saveContext.save()
+    saveContext.fillStyle = this.m_percent > 0.01
+      ? this.m_default_option.cur_score_circle_color : this.m_default_option.tick_color
+    saveContext.rotate(this.m_percent * this.m_default_option.total_degrees / 100 * PIDEG)
+    saveContext.beginPath()
+    /**
+     * arc方法用来绘制圆
+     *   参数1 圆心的x坐标
+     *   参数2 圆心的y坐标
+     *   参数3 圆的半径
+     *   参数4 起始角 弧度单位
+     *   参数5 结束角 弧度
+     *   参数6 False = 顺时针 True = 逆时针
+     */
+    saveContext.arc(-beginX, -beginY, this.m_default_option.circle_radius, 0, Math.PI * 2, true)
+    saveContext.closePath()
+    saveContext.fill()
+    saveContext.restore()
+  }
+  /**
+   * 样式一  bar样式
+   */
+  drawProgressBar () {
+    let dutyCycle = this.m_default_option.total_degrees
+    let startAngle = (270 - dutyCycle / 2) * PIDEG
+    let endAngle = startAngle + dutyCycle * PIDEG
+
+    // bar_bg_color: '#193b43',
+    let baroffset = 3
+    this.drawDonuts(this.m_default_option.bar_radius,
+      startAngle, endAngle,
+      this.m_default_option.bar_bg_w, this.m_default_option.bar_bg_color)
+    this.drawDonuts(this.m_default_option.bar_radius + this.m_default_option.bar_bg_w + baroffset,
+      startAngle, endAngle,
+      3, this.m_default_option.bar_bg_ring_color)
+
+    if (this.m_percent === 0) return
+    let curNum = this.m_percent
+    if (curNum >= this.m_default_option.total_tick) curNum = this.m_default_option.total_tick
+    let curendAngle = startAngle + dutyCycle * curNum / 100 * PIDEG
+
+    let saveContext = this.m_save_context
+    let ring = saveContext.createLinearGradient(-205, 0, 205, 0)
+    ring.addColorStop('0', this.m_default_option.bar_start_color)
+    ring.addColorStop('1.0', this.m_default_option.bar_stop_color)
+    this.drawDonuts(this.m_default_option.bar_radius,
+      startAngle, curendAngle, this.m_default_option.bar_w, ring)
+  }
+
+  /**
+   * 绘制刻度盘的样式
+   */
+  drawTickType () {
+    let saveContext = this.m_save_context
+    let startingDeg = (180 - this.m_default_option.total_degrees) / 2 // 计算开始旋转度数
+    saveContext.rotate(startingDeg * PIDEG) // 旋转到初始位置
+    // 绘制提示原点
+    this.drawScoreTipCircle(this.m_halfCanvasWidth - this.m_default_option.circle_radius,
+      this.m_default_option.circle_radius)
+
+    let numTicks = this.m_default_option.total_tick // 总刻度
+    for (let i = 1; i <= numTicks; i++) {
+      // should this tick be on or off?
+      let isOn = (((i - 1) / numTicks) * 100 < this.m_percent)
+
+      // 判断是否最大
+      let isLargeTick = this.isLargeTick(i)
+      // let rectScale = isLargeTick ? this.large_tick_scale : 1
+      let tickLength = isLargeTick ? this.m_default_option.large_tick_length : this.m_default_option.tick_length
+
+      // 获取刻度颜色
+      var color = this.getTickColor(isOn, i)
+      saveContext.fillStyle = color
+      if (isLargeTick) {
+        saveContext.fillRect(-1 * this.m_halfCanvasWidth + this.m_default_option.circle_radius * 2 +
+        this.m_default_option.circle_offset,
+        -this.m_default_option.tick_thickness / 2,
+        tickLength, this.m_default_option.tick_thickness)
+        if (this.m_default_option.show_num) {
+          this.drawGaugeNum(tickLength, i)
+        }
+      } else {
+        saveContext.fillRect(-1 * this.m_halfCanvasWidth +
+          this.m_default_option.circle_radius * 2 + this.m_default_option.circle_offset +
+          this.delatLength,
+        -this.m_default_option.tick_thickness / 2,
+        tickLength, this.m_default_option.tick_thickness)
+      }
+      // rotate for next tick to be placed
+      saveContext.rotate(this.m_rotation_deg)
+    }
+  }
+
+  /**
+   * @param {*} currentNum
+   * 判断当前最大刻度
+   */
+  isLargeTick (currentNum) {
+    return (currentNum + this.m_default_option.ticks_groups_begin - 1) % (this.m_default_option.tick_group_length + 1) === 0
+  }
+
+  gradientColorArray = function () {
+    let colorArray = []
+    if (!this.m_default_option.on_color_gradient || !this.m_target_percent) {
+      return
+    }
+    for (let i = 0; i < this.m_default_option.on_color_gradient.length - 1; i++) {
+      let next = this.m_default_option.on_color_gradient[i + 1]
+      let cur = this.m_default_option.on_color_gradient[i]
+      let colorStep = (next.percent - cur.percent) / 100 * this.total_tick
+      colorArray = colorArray.concat(MakeGradientColot(cur.color, next.color, colorStep))
+    }
+    return colorArray
+  }
+
+  /**
+   * 获取刻度颜色
+   * @param {*} isOn
+   * @param {*} index
+   */
+  getTickColor (isOn, index) {
+    let indexTemp = index < 1 ? 1 : index
+    if (isOn) {
+      if (this.colorArray && this.colorArray.length > 0) {
+        return this.colorArray[indexTemp - 1]
+      } else {
+        return this.m_default_option.tick_on_color
+      }
+    } else {
+      return this.m_default_option.tick_color
+    }
+  }
+  /**
+   * 进行渲染绘制
+   * @param percent
+   */
+  render (percent) {
+    if (percent !== undefined) {
+      this.m_percent = percent
+    }
+
+    // let saveCanvas = this.m_save_canvas
+    let saveContext = this.m_save_context
+    saveContext.save() // 用来保存Canvas的状态. save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作
+
+    // 绘制基本舞台  包括当前分值
+    this.prepareStage()
+    switch (this.m_default_option.style) {
+      case 'bar': this.drawProgressBar(); break
+      case 'tick': this.drawTickType(); break
+      default: break
+    }
+    this.m_context.clearRect(0, 0, this.m_canvas.width, this.m_canvas.height)
+    this.m_context.drawImage(this.m_save_canvas, 0, 0)
+    saveContext.restore()
+  }
+
+  /**
+   * 更新百分比以及实时显示信息
+   */
+  updatedPercent (percent, options = {}) {
+    if (percent - 0.1 < 0) {
+      return
+    }
+    let that = this
+    this.m_target_percent = percent
+    options = options || {}
+    let duration = ('animation_duration' in options) ? options.animation_duration : that.m_default_option.animation_duration
+    if (duration) {
+      let lastUpdate = new Date()
+      let start = this.m_percent
+      let end = this.m_target_percent
+      let changePerms = (end - start) / duration
+      var increasing = changePerms > 0 ? 1 : 0
+      this.colorArray = this.gradientColorArray()
+      let update = () => {
+        let now = new Date()
+        let elapsed = now - lastUpdate
+        that.m_percent += elapsed * changePerms
+        lastUpdate = now
+        // check if we've made it to our stopping point
+        if ((increasing && that.m_percent < that.m_target_percent) ||
+        (!increasing && that.m_percent > that.m_target_percent)) {
+          that.render()
+          that.requestAnimFrame(update)
+        } else {
+          that.m_percent = that.m_target_percent
+          that.render()
+        }
+      }
+      that.requestAnimFrame(update)
+    } else {
+      that.m_percent = percent
+      that.render()
+    }
+  }
+  requestAnimFrame (f) {
+    let anim = window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (callback, element) {
+      window.setTimeout(function () {
+        callback(new Date())
+      }, 1000 / 60)
+    }
+    anim(f)
+  }
+
+  mergeOption () {}
+}

package/src/kisscomps/components/DashBoard/dashboard.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="wrap" ref="body">
+    <canvas :width="cw" :height="ch" :id="id" style="margin: auto; width: 100%;"></canvas>
+  </div>
+</template>
+
+<script>
+import DashBoard from './dashboard.js'
+export default {
+  name: 'DashBoard',
+  data () {
+    return {
+      dashboard: Object,
+      cw: 510,
+      ch: 510
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    curPercent: {
+      type: Number,
+      default: 50
+    },
+    id: {
+      type: String,
+      default: 'dashboard'
+    }
+  },
+  watch: {
+    curPercent (newVal, oldVal) {
+      this.dashboard.updatedPercent(this.curPercent)
+    }
+  },
+  created () {
+  },
+  mounted () {
+    // let screenWidth = window.screen.width
+    // let screenHeight = window.screen.height
+    // console.log(this.$refs.body.offsetHeight)
+    // console.log(this.$refs.body.offsetWeight)
+    // this.cw = parseInt(this.$refs.body.style.weight)
+    // // console.log(this.$refs.body)
+    // this.ch = parseInt(this.$refs.body.style.height)
+    this.dashboard = new DashBoard(this.id, this.option)
+    this.dashboard.render()
+    // document.getElementById(this.id).width = 300
+    // document.getElementById(this.id).height = 300
+  }
+}
+</script>
+<style scoped>
+</style>

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

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

package/src/kisscomps/components/Horizontal/KissHorizontal.vue

@@ -0,0 +1,146 @@
+<template>
+<div>
+  <div v-for="(item, index) in datalist" :key="index" style="margin-bottom: 14px">
+    <kiss-horizontalchildren :dataList="[{value: item.value, color: item.color, maxNum: theMaxNum}]" :name="item.name" :horizontalDistance="horizontalDistance" :display="display" :mainwidth="mainwidth" :mainheight="mainheight">
+      <div slot="leftslot">
+        <slot name="fatherslot"></slot>
+      </div>
+    </kiss-horizontalchildren>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  name: 'kiss-horizontal',
+  props: {
+    datalist: { // 数据集合
+      type: Array,
+      default: function () {
+        return [
+          {
+            value: 5,
+            name: '',
+            color: '#43b4cf'
+          },
+          {
+            value: 5,
+            name: '',
+            color: '#43b4cf'
+          }
+        ]
+      }
+    },
+    maxNum: { // 最大数值(如果不传的话就以datalist中的最大value值为最大值)
+      type: Number,
+      default: 0
+    },
+    horizontalDistance: { // 上下两个的间距
+      type: String,
+      default: '3px'
+    },
+    mainwidth: {
+      type: String,
+      default: '400px'
+    },
+    mainheight: {
+      type: String,
+      default: '25px'
+    },
+    display: { // 是否展示右侧数值
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      bgStyle: {
+        'position': 'relative',
+        'marginBottom': '',
+        'width': '',
+        'height': ''
+      },
+      theMaxNum: 0
+      // rightNum: {
+      //   'color': '#fff',
+      //   'display': 'block'
+      // }
+    }
+  },
+  watch: {
+    datalist: {
+      handler: function (val) {
+        this.init()
+        // this.theMaxNum = this.getMaxnum()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getMaxnum () {
+      let max = this.maxNum
+      if (max !== 0) return max
+      let temp = 0
+      for (let data of this.datalist) {
+        if (data.value > temp) {
+          max = data.value
+          temp = max
+        }
+      }
+      return max
+    },
+    init () {
+      if (this.maxNum === 0) {
+        this.theMaxNum = this.getMaxnum()
+      } else {
+        this.theMaxNum = this.maxNum
+      }
+    }
+    // isShowrightnum () {
+    //   if (this.display) return
+    //   this.rightNum.display = 'none'
+    // }
+  },
+  mounted () {
+    this.bgStyle.width = this.mainwidth
+    this.bgStyle.height = this.mainheight
+    this.bgStyle.marginBottom = this.horizontalDistance
+    this.init()
+    // if (this.maxNum === 0) {
+    //   this.theMaxNum = this.getMaxnum()
+    // } else {
+    //   this.theMaxNum = this.maxNum
+    // }
+    // this.isShowrightnum()
+  }
+}
+</script>
+<style scoped>
+.horizontalcontext {
+  position: absolute;
+  width: 85%;
+  height: 100%;
+  left: 10%;
+  top: 0;
+}
+.horizontal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80%;
+  height: 50%;
+}
+.hor_num {
+  position: absolute;
+  top: 0;
+  left: 85%;
+  width: 10%;
+  height: 66.6%;
+}
+.hor_text {
+  position: absolute;
+  top: 30%;
+  left: 0;
+  /* width: 20px; */
+  height: 42%;
+}
+</style>

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

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