vue2-client 1.18.39 → 1.18.41

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>

package/src/components/chart/Radar.vue

@@ -1,80 +1,80 @@
-<template>
-  <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
-    <v-tooltip />
-    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
-    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
-    <v-legend dataKey="user" marker="circle" :offset="30" />
-    <v-coord type="polar" radius="0.8" />
-    <v-line position="item*score" color="user" :size="2" />
-    <v-point position="item*score" color="user" :size="4" shape="circle" />
-  </v-chart>
-</template>
-
-<script>
-const DataSet = require('@antv/data-set')
-
-const sourceData = [
-  { item: '引用', a: 70, b: 30, c: 40 },
-  { item: '口碑', a: 60, b: 70, c: 40 },
-  { item: '产量', a: 50, b: 60, c: 40 },
-  { item: '贡献', a: 40, b: 50, c: 40 },
-  { item: '热度', a: 60, b: 70, c: 40 },
-  { item: '引用', a: 70, b: 50, c: 40 }
-]
-
-const dv = new DataSet.View().source(sourceData)
-dv.transform({
-  type: 'fold',
-  fields: ['a', 'b', 'c'],
-  key: 'user',
-  value: 'score'
-})
-
-const scale = [{
-  dataKey: 'score',
-  min: 0,
-  max: 80
-}]
-
-const data = dv.rows
-
-const axis1Opts = {
-  dataKey: 'item',
-  line: null,
-  tickLine: null,
-  grid: {
-    lineStyle: {
-      lineDash: null
-    },
-    hideFirstLine: false
-  }
-}
-const axis2Opts = {
-  dataKey: 'score',
-  line: null,
-  tickLine: null,
-  grid: {
-    type: 'polygon',
-    lineStyle: {
-      lineDash: null
-    }
-  }
-}
-
-export default {
-  name: 'Radar',
-  data () {
-    return {
-      sourceData,
-      data,
-      axis1Opts,
-      axis2Opts,
-      scale
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+    <v-tooltip />
+    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
+    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
+    <v-legend dataKey="user" marker="circle" :offset="30" />
+    <v-coord type="polar" radius="0.8" />
+    <v-line position="item*score" color="user" :size="2" />
+    <v-point position="item*score" color="user" :size="4" shape="circle" />
+  </v-chart>
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: '引用', a: 70, b: 30, c: 40 },
+  { item: '口碑', a: 60, b: 70, c: 40 },
+  { item: '产量', a: 50, b: 60, c: 40 },
+  { item: '贡献', a: 40, b: 50, c: 40 },
+  { item: '热度', a: 60, b: 70, c: 40 },
+  { item: '引用', a: 70, b: 50, c: 40 }
+]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'fold',
+  fields: ['a', 'b', 'c'],
+  key: 'user',
+  value: 'score'
+})
+
+const scale = [{
+  dataKey: 'score',
+  min: 0,
+  max: 80
+}]
+
+const data = dv.rows
+
+const axis1Opts = {
+  dataKey: 'item',
+  line: null,
+  tickLine: null,
+  grid: {
+    lineStyle: {
+      lineDash: null
+    },
+    hideFirstLine: false
+  }
+}
+const axis2Opts = {
+  dataKey: 'score',
+  line: null,
+  tickLine: null,
+  grid: {
+    type: 'polygon',
+    lineStyle: {
+      lineDash: null
+    }
+  }
+}
+
+export default {
+  name: 'Radar',
+  data () {
+    return {
+      sourceData,
+      data,
+      axis1Opts,
+      axis2Opts,
+      scale
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/chart/RankingList.vue

@@ -1,60 +1,60 @@
-<template>
-  <div class="rank">
-    <h4 class="title">{{ title }}</h4>
-    <ul class="list">
-      <li :key="index" v-for="(item, index) in list">
-        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
-        <span >{{ item.name }}</span>
-        <span >{{ item.total }}</span>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RankingList',
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['title', 'list']
-}
-</script>
-
-<style lang="less" scoped>
-  .rank{
-    padding: 0 32px 32px 72px;
-    .title{
-    }
-    .list{
-      margin: 25px 0 0;
-      padding: 0;
-      list-style: none;
-      li {
-        margin-top: 16px;
-        span {
-          color: @text-color-second;
-          font-size: 14px;
-          line-height: 22px;
-        }
-        span:first-child {
-          background-color: @layout-bg-color;
-          border-radius: 20px;
-          display: inline-block;
-          font-size: 12px;
-          font-weight: 600;
-          margin-right: 24px;
-          height: 20px;
-          line-height: 20px;
-          width: 20px;
-          text-align: center;
-        }
-        span.active {
-          background-color: #314659 !important;
-          color: @text-color-inverse !important;
-        }
-        span:last-child {
-          float: right;
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <div class="rank">
+    <h4 class="title">{{ title }}</h4>
+    <ul class="list">
+      <li :key="index" v-for="(item, index) in list">
+        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+        <span >{{ item.name }}</span>
+        <span >{{ item.total }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankingList',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title', 'list']
+}
+</script>
+
+<style lang="less" scoped>
+  .rank{
+    padding: 0 32px 32px 72px;
+    .title{
+    }
+    .list{
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+      li {
+        margin-top: 16px;
+        span {
+          color: @text-color-second;
+          font-size: 14px;
+          line-height: 22px;
+        }
+        span:first-child {
+          background-color: @layout-bg-color;
+          border-radius: 20px;
+          display: inline-block;
+          font-size: 12px;
+          font-weight: 600;
+          margin-right: 24px;
+          height: 20px;
+          line-height: 20px;
+          width: 20px;
+          text-align: center;
+        }
+        span.active {
+          background-color: #314659 !important;
+          color: @text-color-inverse !important;
+        }
+        span:last-child {
+          float: right;
+        }
+      }
+    }
+  }
+</style>

package/src/components/chart/Trend.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="chart-trend">
-    {{ term }}
-    <span>{{ rate }}%</span>
-    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Trend',
-  props: {
-    term: {
-      type: String,
-      required: true
-    },
-    target: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    value: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    isIncrease: {
-      type: Boolean,
-      required: false,
-      default: null
-    },
-    percent: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    scale: {
-      type: Number,
-      required: false,
-      default: 2
-    }
-  },
-  data () {
-    return {
-      trend: this.isIncrease ? 'up' : 'down',
-      rate: this.percent
-    }
-  },
-  created () {
-    this.trend = this.caulateTrend()
-    this.rate = this.caulateRate()
-  },
-  methods: {
-    caulateRate () {
-      return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
-    },
-    caulateTrend () {
-      const isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
-      return isIncrease ? 'up' : 'down'
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .chart-trend{
-    display: inline-block;
-    font-size: 14px;
-    .chart-trend-icon{
-      font-size: 12px;
-      &.up{
-        color: @red-6;
-      }
-      &.down{
-        color: @green-6;
-      }
-    }
-  }
-</style>
+<template>
+  <div class="chart-trend">
+    {{ term }}
+    <span>{{ rate }}%</span>
+    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    term: {
+      type: String,
+      required: true
+    },
+    target: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    isIncrease: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    percent: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      trend: this.isIncrease ? 'up' : 'down',
+      rate: this.percent
+    }
+  },
+  created () {
+    this.trend = this.caulateTrend()
+    this.rate = this.caulateRate()
+  },
+  methods: {
+    caulateRate () {
+      return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
+    },
+    caulateTrend () {
+      const isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
+      return isIncrease ? 'up' : 'down'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-trend{
+    display: inline-block;
+    font-size: 14px;
+    .chart-trend-icon{
+      font-size: 12px;
+      &.up{
+        color: @red-6;
+      }
+      &.down{
+        color: @green-6;
+      }
+    }
+  }
+</style>