feat(年工时基准表): 完成基本功能

src/api/task/task.js

@@ -41,3 +41,13 @@ export function exportExcel(parameter) {
     data: parameter,
   })
 }
+
+/**
+ * 年度工时统计
+ */
+export function getAnnualConsume(year) {
+  return axios({
+    url: `${baseUrl.taskEstimate}/annual-consume/${year}`,
+    method: 'get'
+  });
+}
\ No newline at end of file

src/views/task/annualConsume/AnnualConsume.vue

+<template>
+  <a-card class="cust-list-cart">
+    <div>
+      <a-form layout="horizontal" class="ant-advanced-search-form">
+        <div>
+          <a-row>
+            <a-col :span="6">
+              <a-form-item
+                label="年份"
+                :labelCol="{ span: 8 }"
+                :wrapperCol="{ span: 16 }"
+              >
+                <a-select
+                  @change="yearChange"
+                  :options="yearOptions"
+                  v-model="year"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+      </a-form>
+    </div>
+    <div class="annual-consume-chart-container">
+      <v-chart :forceFit="true" :height="height" :data="data">
+        <v-coord type="rect" direction="LB" />
+        <!-- <v-tooltip /> -->
+        <v-legend 
+          :itemFormatter="itemFormatter"
+        />
+        <v-axis dataKey="name" :label="label" />
+        <v-stack-bar position="name*工时" color="类型" />
+        <v-guide
+          type="line"
+          :top="true"
+          :start="['max', standard]"
+          :end="['min', standard]"
+          :lineStyle="{
+            fill: '#8c8c8c',
+            fontSize: 12,
+            fontWeight: 500,
+            lineWidth: 2,
+            lineDash: [5,1]
+          }"
+          :text="{
+            position: 'start',
+            style: {
+              fill: '#5d5d5d',
+              fontSize: 16,
+              fontWeight: 600,
+            },
+            offsetX: 5,
+            content: `基准工时: ${this.standard}小时`,
+          }"
+        />
+      </v-chart>
+    </div>
+  </a-card>
+</template>
+<script>
+import { getAnnualConsume } from "@/api/task/task";
+import moment from "moment";
+const DataSet = require("@antv/data-set");
+
+const label = { offset: 12 };
+export default {
+  name: "AnnualConsume",
+  data() {
+    return {
+      year: parseInt(moment().format("YYYY")),
+      data: [],
+      standard: 0,
+      height: 800,
+      label,
+      legendMap: {
+        beforeJoin: '入职前标准工时',
+        value: '已消耗工时'
+      }
+    };
+  },
+  methods: {
+    loadData() {
+      getAnnualConsume(this.year).then(({ data }) => {
+        console.info(data);
+        const dv = new DataSet.View().source(data[1]);
+        this.standard = data[0];
+        dv.transform({
+          type: "fold",
+          fields: ["beforeJoin", "value"],
+          key: "类型",
+          value: "工时",
+          retains: ["name"],
+        });
+        this.data = dv.rows;
+      });
+    },
+    itemFormatter(text) {
+      return this.legendMap[text];
+    },
+    yearChange(value) {
+      console.info("year", value);
+      this.loadData();
+    },
+  },
+  computed: {
+    yearOptions() {
+      const currentYear = parseInt(moment().format("YYYY"));
+      const startYear = 2018;
+      const yearOptions = [];
+      for (let i = currentYear; i >= startYear; i--) {
+        yearOptions.push({ value: i, title: i });
+      }
+      return yearOptions;
+    },
+  },
+  activated() {
+    this.loadData();
+  },
+};
+</script>
+
+<style scoped>
+.annual-consume-chart-container {
+  width: 85%;
+}
+</style>
\ No newline at end of file

src/views/task/annualConsume/AnnualConsumeRouteView.vue

+<template>
+  <keep-alive v-if="keepAlive">
+    <router-view />
+  </keep-alive>
+  <router-view v-else />
+</template>
+
+<script>
+    export default {
+        name: "AnnualConsumeRouteView",
+        computed: {
+            keepAlive () {
+                return this.$route.meta.keepAlive
+            }
+        },
+    }
+</script>
\ No newline at end of file

src/views/task/taskEstimate/TaskEstimateList.vue

@@ -171,6 +171,7 @@ export default {
         page: 1,
         size: 10,
       },
+      defaultPageSize: 50,
       month: null,
       dayOfTheMonth: 31,
       total: 0,
@@ -188,9 +189,6 @@ export default {
     };
   },
   computed: {
-    defaultPageSize: function () {
-      return this.$defaultPageSize();
-    },
     reactiveColumns() {
       const dateColumns = [];