From 8fd59e41115d591a4c683956b8c61c4626a4b165 Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Sat, 8 Dec 2018 16:05:04 +0800
Subject: [PATCH] add border box 6 & polyline chart

---
 src/components/borderBox6/index.vue    | 84 ++++++++++++++++++++++++++
 src/components/index.js                |  4 ++
 src/components/polylineChart/index.vue | 51 ++++++++++++++++
 3 files changed, 139 insertions(+)
 create mode 100644 src/components/borderBox6/index.vue
 create mode 100644 src/components/polylineChart/index.vue

diff --git a/src/components/borderBox6/index.vue b/src/components/borderBox6/index.vue
new file mode 100644
index 0000000..a7297ec
--- /dev/null
+++ b/src/components/borderBox6/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="border-box-6" :ref="ref">
+    <svg class="svg-container">
+      <circle cx="5" cy="5" r="2"/>
+      <circle :cx="width - 5" cy="5" r="2" />
+      <circle :cx="width - 5" :cy="height - 5" r="2" />
+      <circle cx="5" :cy="height - 5" r="2" />
+      <polyline :points="`10, 4 ${width - 10}, 4`" />
+      <polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
+      <polyline :points="`5, 70 5, ${height - 70}`" />
+      <polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
+      <polyline :points="`3, 10, 3, 50`" />
+      <polyline :points="`7, 30 7, 80`" />
+      <polyline :points="`${width - 3}, 10 ${width - 3}, 50`" />
+      <polyline :points="`${width - 7}, 30 ${width - 7}, 80`" />
+      <polyline :points="`3, ${height - 10} 3, ${height - 50}`" />
+      <polyline :points="`7, ${height - 30} 7, ${height - 80}`" />
+      <polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
+      <polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BorderBox6',
+  data () {
+    return {
+      ref: `border-box-6-${(new Date()).getTime()}`,
+      width: 0,
+      height: 0
+    }
+  },
+  methods: {
+    init () {
+      const { $nextTick, $refs, ref } = this
+
+      $nextTick(e => {
+        this.width = $refs[ref].clientWidth
+        this.height = $refs[ref].clientHeight
+      })
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style lang="less">
+@import url('../../assets/style/index.less');
+
+.border-box-6 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 10px;
+
+  .reverse {
+    transform: rotate(180deg);
+  }
+
+  .svg-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+
+    circle {
+      fill: gray;
+    }
+
+    polyline {
+      fill: none;
+      stroke-width: 1;
+      stroke: fade(#fff, 35);
+    }
+  }
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 37a2fa8..02edcf3 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -3,6 +3,7 @@ import borderBox2 from './borderBox2/index'
 import borderBox3 from './borderBox3/index'
 import borderBox4 from './borderBox4/index'
 import borderBox5 from './borderBox5/index'
+import borderBox6 from './borderBox6/index'
 
 import decoration1 from './decoration1/index'
 import decoration2 from './decoration2/index'
@@ -12,6 +13,7 @@ import numberShow from './numberShow/index.vue'
 
 import capsuleChart from './capsuleChart/index.vue'
 import ringChart from './ringChart/index.vue'
+import polylineChart from './polylineChart/index.vue'
 
 import loading from './loading/index.vue'
 
@@ -21,11 +23,13 @@ export default function (Vue) {
   Vue.component('borderBox3', borderBox3)
   Vue.component('borderBox4', borderBox4)
   Vue.component('borderBox5', borderBox5)
+  Vue.component('borderBox6', borderBox6)
   Vue.component('decoration1', decoration1)
   Vue.component('decoration2', decoration2)
   Vue.component('decoration3', decoration3)
   Vue.component('numberShow', numberShow)
   Vue.component('capsuleChart', capsuleChart)
+  Vue.component('polylineChart', polylineChart)
   Vue.component('ringChart', ringChart)
   Vue.component('loading', loading)
 }
diff --git a/src/components/polylineChart/index.vue b/src/components/polylineChart/index.vue
new file mode 100644
index 0000000..1b3a9e6
--- /dev/null
+++ b/src/components/polylineChart/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="polyline-chart">
+    <canvas :ref="ref" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PolylineChart',
+  props: ['data'],
+  data () {
+    return {
+      ref: `ring-chart-${(new Date()).getTime()}`,
+      canvasDom: '',
+      canvasWH: [0, 0],
+      ctx: ''
+    }
+  },
+  methods: {
+    init () {
+      const { $nextTick, initCanvas } = this
+
+      $nextTick(e => {
+        initCanvas()
+      })
+    },
+    initCanvas () {
+      const { $refs, ref, canvasWH } = this
+
+      const canvas = this.canvasDom = $refs[ref]
+
+      canvasWH[0] = canvas.clientWidth
+      canvasWH[1] = canvas.clientHeight
+
+      canvas.setAttribute('width', canvasWH[0])
+      canvas.setAttribute('height', canvasWH[1])
+
+      this.ctx = canvas.getContext('2d')
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style>
+
+</style>