vue2-client 1.22.2 → 1.22.4

package/src/components/card/ChartCard.vue

@@ -1,79 +1,79 @@
-<template>
-  <a-card :loading="loading" :body-style="{padding: '20px 24px 8px'}" :bordered="false">
-    <div class="chart-card-header">
-      <div class="meta">
-        <span class="chart-card-title">{{ title }}</span>
-        <span class="chart-card-action">
-          <slot name="action"></slot>
-        </span>
-      </div>
-      <div class="total"><span>{{ total }}</span></div>
-    </div>
-    <div class="chart-card-content">
-      <div class="content-fix">
-        <slot></slot>
-      </div>
-    </div>
-    <div class="chart-card-footer">
-      <slot name="footer"></slot>
-    </div>
-  </a-card>
-</template>
-
-<script>
-export default {
-  name: 'ChartCard',
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['title', 'total', 'loading']
-}
-</script>
-
-<style scoped lang="less">
-  .chart-card-header{
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-  }
-  .chart-card-header .meta{
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    color: @text-color-second;
-    font-size: 14px;
-    line-height: 22px;
-  }
-  .chart-card-action{
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  .total {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    margin-top: 4px;
-    margin-bottom: 0;
-    font-size: 30px;
-    line-height: 38px;
-    height: 38px;
-  }
-  .chart-card-footer{
-    border-top: 1px solid @border-color-base;
-    padding-top: 9px;
-    margin-top: 8px;
-  }
-  .chart-card-content{
-    margin-bottom: 12px;
-    position: relative;
-    height: 46px;
-    width: 100%;
-  }
-  .chart-card-content .content-fix{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-</style>
+<template>
+  <a-card :loading="loading" :body-style="{padding: '20px 24px 8px'}" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">{{ title }}</span>
+        <span class="chart-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
+      <div class="total"><span>{{ total }}</span></div>
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <slot name="footer"></slot>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ChartCard',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title', 'total', 'loading']
+}
+</script>
+
+<style scoped lang="less">
+  .chart-card-header{
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+  .chart-card-header .meta{
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    color: @text-color-second;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  .chart-card-action{
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
+  }
+  .chart-card-footer{
+    border-top: 1px solid @border-color-base;
+    padding-top: 9px;
+    margin-top: 8px;
+  }
+  .chart-card-content{
+    margin-bottom: 12px;
+    position: relative;
+    height: 46px;
+    width: 100%;
+  }
+  .chart-card-content .content-fix{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+</style>

package/src/components/chart/Bar.vue

@@ -1,60 +1,60 @@
-<template>
-  <div class="bar">
-    <h4>{{ title }}</h4>
-    <div class="chart">
-      <v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
-        <v-tooltip />
-        <v-axis />
-        <v-bar position="x*y"/>
-      </v-chart>
-    </div>
-  </div>
-</template>
-
-<script>
-
-const data = []
-for (let i = 0; i < 12; i += 1) {
-  data.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200
-  })
-}
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-
-const scale = [{
-  dataKey: 'x',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '时间',
-  min: 1,
-  max: 22
-}]
-export default {
-  name: 'Bar',
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['title'],
-  data () {
-    return {
-      data,
-      scale,
-      tooltip
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-  .bar{
-    position: relative;
-    .chart{
-    }
-  }
-</style>
+<template>
+  <div class="bar">
+    <h4>{{ title }}</h4>
+    <div class="chart">
+      <v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
+        <v-tooltip />
+        <v-axis />
+        <v-bar position="x*y"/>
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+
+const data = []
+for (let i = 0; i < 12; i += 1) {
+  data.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+}
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+export default {
+  name: 'Bar',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title'],
+  data () {
+    return {
+      data,
+      scale,
+      tooltip
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .bar{
+    position: relative;
+    .chart{
+    }
+  }
+</style>

package/src/components/chart/MiniArea.vue

@@ -1,67 +1,67 @@
-<template>
-  <div class="mini-chart">
-    <div class="chart-content" :style="{height: 46}">
-      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
-        <v-tooltip />
-        <v-smooth-area position="x*y" />
-      </v-chart>
-    </div>
-  </div>
-</template>
-
-<script>
-import { format } from 'date-fns'
-
-const data = []
-const beginDay = new Date().getTime()
-
-const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
-for (let i = 0; i < fakeY.length; i += 1) {
-  data.push({
-    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
-    y: fakeY[i]
-  })
-}
-
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-
-const scale = [{
-  dataKey: 'x',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '时间',
-  min: 1,
-  max: 22
-}]
-
-export default {
-  name: 'MiniArea',
-  data () {
-    return {
-      data,
-      scale,
-      tooltip,
-      height: 100
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .mini-chart {
-    position: relative;
-    width: 100%
-  }
-  .mini-chart .chart-content{
-    position: absolute;
-    bottom: -28px;
-    width: 100%;
-  }
-</style>
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format } from 'date-fns'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniArea',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .mini-chart {
+    position: relative;
+    width: 100%
+  }
+  .mini-chart .chart-content{
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+  }
+</style>

package/src/components/chart/MiniBar.vue

@@ -1,59 +1,59 @@
-<template>
-  <div class="mini-chart">
-    <div class="chart-content" :style="{height: 46}">
-      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
-        <v-tooltip />
-        <v-bar position="x*y" />
-      </v-chart>
-    </div>
-  </div>
-</template>
-
-<script>
-import { format } from 'date-fns'
-
-const data = []
-const beginDay = new Date().getTime()
-
-const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
-for (let i = 0; i < fakeY.length; i += 1) {
-  data.push({
-    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
-    y: fakeY[i]
-  })
-}
-
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-
-const scale = [{
-  dataKey: 'x',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '时间',
-  min: 1,
-  max: 22
-}]
-
-export default {
-  name: 'MiniBar',
-  data () {
-    return {
-      data,
-      scale,
-      tooltip,
-      height: 100
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "index.less";
-</style>
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-bar position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format } from 'date-fns'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniBar',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+</style>

package/src/components/chart/MiniProgress.vue

@@ -1,57 +1,57 @@
-<template>
-  <div class="mini-progress">
-    <a-tooltip :title="'目标值：' + target + '%'">
-      <div class="target" :style="{left: target + '%'}">
-        <span :style="{backgroundColor: color}" />
-        <span :style="{backgroundColor: color}" />
-      </div>
-    </a-tooltip>
-    <div class="wrap">
-      <div class="progress" :style="{backgroundColor: color, width: percent + '%', height: height}" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MiniProgress',
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['target', 'color', 'percent', 'height']
-}
-</script>
-
-<style lang="less"  scoped>
-  .mini-progress {
-    padding: 5px 0;
-    position: relative;
-    width: 100%;
-    .wrap {
-      background-color: @layout-bg-color;
-      position: relative;
-    }
-    .progress {
-      transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-      border-radius: 1px 0 0 1px;
-      background-color: #13C2C2;
-      width: 0;
-      height: 100%;
-    }
-    .target {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      span {
-        border-radius: 100px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 4px;
-        width: 2px;
-      }
-      span:last-child {
-        top: auto;
-        bottom: 0;
-      }
-    }
-  }
-</style>
+<template>
+  <div class="mini-progress">
+    <a-tooltip :title="'目标值：' + target + '%'">
+      <div class="target" :style="{left: target + '%'}">
+        <span :style="{backgroundColor: color}" />
+        <span :style="{backgroundColor: color}" />
+      </div>
+    </a-tooltip>
+    <div class="wrap">
+      <div class="progress" :style="{backgroundColor: color, width: percent + '%', height: height}" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniProgress',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['target', 'color', 'percent', 'height']
+}
+</script>
+
+<style lang="less"  scoped>
+  .mini-progress {
+    padding: 5px 0;
+    position: relative;
+    width: 100%;
+    .wrap {
+      background-color: @layout-bg-color;
+      position: relative;
+    }
+    .progress {
+      transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+      border-radius: 1px 0 0 1px;
+      background-color: #13C2C2;
+      width: 0;
+      height: 100%;
+    }
+    .target {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      span {
+        border-radius: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 4px;
+        width: 2px;
+      }
+      span:last-child {
+        top: auto;
+        bottom: 0;
+      }
+    }
+  }
+</style>