feat: 目标展板联调

src/api/powerdistribution/power-outage-control.js

@@ -0,0 +1,28 @@
+import request from "@/utils/request";
+
+// 停电预算下载模板
+export function downloadTemplate() {
+  return request({
+    url: "/power/stopTarge/downloadTemplate",
+    method: "post",
+  });
+}
+// 导入
+export function importF(data) {
+  return request({
+    url: "/power/stopTarge/import",
+    method: "post",
+    data: data,
+    headers: {
+      "content-type": "multipart/form-data",
+    },
+  });
+}
+// 列表
+export function list(params) {
+  return request({
+    url: "/power/stopTarge/list",
+    method: "get",
+    params,
+  });
+}

src/views/distributionnetwork/power-outage-control/target-display-board/components/TargetBar.vue

@@ -0,0 +1,114 @@
+<template>
+  <div ref="barChart" :id="id" :style="{ height: height, width: width }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    chartOptions: {
+      type: Object,
+      default: () => {},
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+    id: {
+      type: String,
+      default: "barChart",
+    },
+  },
+  mounted() {
+    // this.initEcharts();
+  },
+  watch: {
+    chartOptions: {
+      handler(newVal, oldVal) {
+        this.initEcharts();
+      },
+      // 这里的deep是深度监听，因为我们传递过来的是一个对象
+      deep: true,
+    },
+  },
+  methods: {
+    initEcharts(data, title) {
+      let legend = [];
+      let source = [
+        [
+          "product",
+          "平均停电时长目标",
+          "等效总用户数",
+          "停电总时长目标",
+          "3年占比",
+          "预安排停电总时长目标",
+          "预安排平均停电时长目标",
+          "故障停电总时长目标",
+          "故障平均停电时长目标",
+        ],
+      ];
+      (data || []).forEach((e, i) => {
+        legend.push(e.companyName);
+        source.push([
+          e.companyName,
+          e.stopTimeAvg ?? 0,
+          e.userTotal ?? 0,
+          e.stopTimeTotal ?? 0,
+          e.threeYearRatio,
+          e.planStopTimeTotal ?? 0,
+          e.planStopTimeAvg ?? 0,
+          e.errorStopTimeTotal ?? 0,
+          e.errorStopTimeAvg ?? 0,
+        ]);
+      });
+      let myChart = echarts.getInstanceByDom(document.getElementById(this.id));
+      if (myChart == null) {
+        myChart = echarts.init(document.getElementById(this.id));
+      }
+      // 指定图表的配置项和数据
+      var option = {
+        legend: {
+          type: "scroll",
+        },
+        grid: {
+          left: "1%",
+          right: "1%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        tooltip: {},
+        dataset: {
+          source: source,
+        },
+        xAxis: { type: "category" },
+        yAxis: {},
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [
+          { type: "bar" },
+          { type: "bar" },
+          { type: "bar" },
+          { type: "bar" },
+          { type: "bar" },
+          { type: "bar" },
+          { type: "bar" },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      setTimeout(() => {
+        myChart.resize();
+      }, 100);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/distributionnetwork/power-outage-control/target-display-board/components/TargetLine.vue

@@ -0,0 +1,101 @@
+<template>
+  <div ref="barChart" :id="id" :style="{ height: height, width: width }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    chartOptions: {
+      type: Object,
+      default: () => {},
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+    id: {
+      type: String,
+      default: "barChart",
+    },
+  },
+  mounted() {
+    // this.initEcharts();
+  },
+  watch: {
+    chartOptions: {
+      handler(newVal, oldVal) {
+        this.initEcharts();
+      },
+      // 这里的deep是深度监听，因为我们传递过来的是一个对象
+      deep: true,
+    },
+  },
+  methods: {
+    initEcharts(data, title) {
+      let legend = [];
+      let series = [];
+      (data || []).forEach((e, i) => {
+        legend.push(e.companyName);
+        series.push({
+          name: e.companyName,
+          type: "line",
+          stack: "Total",
+          data: Array(12)
+            .fill(0)
+            .map((it, ii) => {
+              return e[`${this.id}${ii < 10 ? "0" + (ii + 1) : ii + 1}`] || 0;
+            }),
+        });
+      });
+      let myChart = echarts.getInstanceByDom(document.getElementById(this.id));
+      if (myChart == null) {
+        myChart = echarts.init(document.getElementById(this.id));
+      }
+      // 指定图表的配置项和数据
+      var option = {
+        title: {
+          text: title,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: legend,
+        },
+        grid: {
+          left: "1%",
+          right: "1%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: Array(12)
+            .fill(0)
+            .map((it, i) => `${i + 1}月`),
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: series,
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option, true);
+      setTimeout(() => {
+        myChart.resize();
+      }, 100);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/distributionnetwork/power-outage-control/target-display-board/index.vue

@@ -1,16 +1,21 @@
 <template>
   <!-- 目标展板 -->
   <div class="app-container" style="overflow-y: scroll">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
-      <el-form-item label="" prop="year">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
+      <el-form-item label="" prop="reportYear">
         <el-date-picker
-          v-model="queryParams.year"
+          v-model="queryParams.reportYear"
           type="year"
           format="yyyy"
           value-format="yyyy"
           placeholder="选择年"
           :clearable="false"
-          @change="getList"
         >
         </el-date-picker>
       </el-form-item>
@@ -27,184 +32,308 @@
         >
       </el-form-item>
     </el-form>
-    <div class="table">
-      <el-table ref="renewalTable" v-loading="loading" :data="dataList">
-        <el-table-column
-          label="单位"
-          align="center"
-          prop="city"
-          width="150"
-          fixed
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          >导出模版</el-button
         >
-        </el-table-column>
-        <el-table-column
-          label="中压用户平均停电时长目标（小时）"
-          align="center"
-          prop=""
-          :show-overflow-tooltip="true"
-          width="100"
-          fixed
-        />
-        <el-table-column
-          label="等效总用户数"
-          align="center"
-          prop=""
-          :show-overflow-tooltip="true"
-          width="80"
-          fixed
-        />
-        <el-table-column
-          label="中压用户停电总时长目标（小时）"
-          align="center"
-          prop=""
-          width="100"
-          fixed
-        />
-        <el-table-column label="近三年占比" align="center" prop="" fixed />
-        <el-table-column
-          label="中压用户预安排停电总时长目标（小时）"
-          align="center"
-          prop=""
-          width="100"
-          fixed
-        />
-        <el-table-column
-          label="中压用户预安排停电平均时长目标（小时）"
-          align="center"
-          prop=""
-          width="100"
-          fixed
-        />
-        <el-table-column
-          label="中压用户故障停电总时长目标（小时）"
-          align="center"
-          width="100"
-          prop=""
-          fixed
-        />
-        <el-table-column
-          label="中压用户故障停电平均时长目标（小时）"
-          align="center"
-          prop=""
-          width="100"
-          fixed
+        <el-upload
+          class="upload-demo"
+          style="display: inline; margin-left: 10px"
+          :data="flelist"
+          :action="url"
+          :headers="headers"
+          :on-success="handleImportSuccess"
+          :before-upload="handleBeforeUpload"
+          :show-file-list="false"
+          :auto-upload="true"
         >
-        </el-table-column>
-        <el-table-column label="中压用户停电月度总时长目标" align="center">
+          <el-button type="primary" size="mini">导入</el-button>
+        </el-upload>
+      </el-col>
+      <el-radio-group
+        style="margin-left: 8px"
+        size="mini"
+        v-model="hasList"
+        @change="getList"
+      >
+        <el-radio-button label="列表"></el-radio-button>
+        <el-radio-button label="图表"></el-radio-button>
+      </el-radio-group>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+    <template v-if="hasList == '列表'">
+      <div class="table">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="单位"
+            align="center"
+            prop="companyName"
+            width="150"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column
+            label="中压用户平均停电时长目标（小时）"
+            align="center"
+            prop="stopTimeAvg"
+            :show-overflow-tooltip="true"
+            width="100"
+            fixed
+          />
+          <el-table-column
+            label="等效总用户数"
+            align="center"
+            prop="userTotal"
+            :show-overflow-tooltip="true"
+            width="80"
+            fixed
+          />
+          <el-table-column
+            label="中压用户停电总时长目标（小时）"
+            align="center"
+            prop="stopTimeTotal"
+            width="100"
+            fixed
+          />
+          <el-table-column
+            label="近三年占比"
+            align="center"
+            prop="threeYearRatio"
+            fixed
+          />
+          <el-table-column
+            label="中压用户预安排停电总时长目标（小时）"
+            align="center"
+            prop="planStopTimeTotal"
+            width="100"
+            fixed
+          />
+          <el-table-column
+            label="中压用户预安排停电平均时长目标（小时）"
+            align="center"
+            prop="planStopTimeAvg"
+            width="100"
+            fixed
+          />
+          <el-table-column
+            label="中压用户故障停电总时长目标（小时）"
+            align="center"
+            width="100"
+            prop="errorStopTimeTotal"
+            fixed
+          />
+          <el-table-column
+            label="中压用户故障停电平均时长目标（小时）"
+            align="center"
+            prop="errorStopTimeAvg"
+            width="100"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column label="中压用户停电月度总时长目标" align="center">
+            <el-table-column
+              v-for="(ite, i) in 12"
+              :key="i"
+              :label="`${ite}月`"
+              align="center"
+              :prop="`stopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            label="中压用户预安排停电月度总时长目标"
+            align="center"
+          >
+            <el-table-column
+              v-for="(ite, i) in 12"
+              :key="i"
+              :label="`${ite}月`"
+              align="center"
+              :prop="`planStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            label="中压用户故障停电月度总时长目标"
+            align="center"
+          >
+            <el-table-column
+              v-for="(ite, i) in 12"
+              :key="i"
+              :label="`${ite}月`"
+              align="center"
+              :prop="`errorStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+            >
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- <el-divider></el-divider>
+      <div class="table">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="月度占比"
+            align="center"
+            prop="companyName"
+            width="150"
+            fixed
+          >
+          </el-table-column>
           <el-table-column
             v-for="(ite, i) in 12"
             :key="i"
             :label="`${ite}月`"
             align="center"
-            prop="powerOutageDuringHouseholds"
+            :prop="`stopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-divider></el-divider>
+      <div class="table">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="月度预安排占比"
+            align="center"
+            prop="companyName"
+            width="150"
+            fixed
           >
           </el-table-column>
-        </el-table-column>
-        <el-table-column
-          label="中压用户预安排停电月度总时长目标"
-          align="center"
-        >
           <el-table-column
             v-for="(ite, i) in 12"
             :key="i"
             :label="`${ite}月`"
             align="center"
-            prop="powerOutageDuringHouseholds"
+            :prop="`planStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-divider></el-divider>
+      <div class="table">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="月度故障占比"
+            align="center"
+            prop="companyName"
+            width="150"
+            fixed
           >
           </el-table-column>
-        </el-table-column>
-        <el-table-column label="中压用户故障停电月度总时长目标" align="center">
           <el-table-column
             v-for="(ite, i) in 12"
             :key="i"
             :label="`${ite}月`"
             align="center"
-            prop="powerOutageDuringHouseholds"
+            :prop="`errorStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
           >
           </el-table-column>
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-divider></el-divider>
-    <div class="table">
-      <el-table ref="renewalTable" v-loading="loading" :data="dataList">
-        <el-table-column
-          label="月度占比"
-          align="center"
-          prop="city"
-          width="150"
-          fixed
-        >
-        </el-table-column>
-        <el-table-column
-          v-for="(ite, i) in 12"
-          :key="i"
-          :label="`${ite}月`"
-          align="center"
-          prop="powerOutageDuringHouseholds"
-        >
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-divider></el-divider>
-    <div class="table">
-      <el-table ref="renewalTable" v-loading="loading" :data="dataList">
-        <el-table-column
-          label="月度预安排占比"
-          align="center"
-          prop="city"
-          width="150"
-          fixed
-        >
-        </el-table-column>
-        <el-table-column
-          v-for="(ite, i) in 12"
-          :key="i"
-          :label="`${ite}月`"
-          align="center"
-          prop="powerOutageDuringHouseholds"
-        >
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-divider></el-divider>
-    <div class="table">
-      <el-table ref="renewalTable" v-loading="loading" :data="dataList">
-        <el-table-column
-          label="月度故障占比"
-          align="center"
-          prop="city"
-          width="150"
-          fixed
-        >
-        </el-table-column>
-        <el-table-column
-          v-for="(ite, i) in 12"
-          :key="i"
-          :label="`${ite}月`"
-          align="center"
-          prop="powerOutageDuringHouseholds"
-        >
-        </el-table-column>
-      </el-table>
-    </div>
+        </el-table>
+      </div> -->
+    </template>
+    <el-row :gutter="10" v-show="hasList != '列表'" v-loading="loading">
+      <el-col :span="24">
+        <el-card header="" class="mb8">
+          <TargetBar height="250px" ref="targetBarRef"></TargetBar>
+        </el-card>
+      </el-col>
+      <!-- <el-col :span="6">
+        <el-card header="中压用户停电月度总时长目标" class="mb8">
+          <TargetLine
+            height="250px"
+            id="zyStopTimeMonth"
+            ref="zyStopTargetLineRef"
+          ></TargetLine>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card header="中压用户预安排停电月度总时长目标" class="mb8">
+          <TargetLine
+            height="250px"
+            id="zyPlanStopTimeMonth"
+            ref="zyPlanStopTimeMonthRef"
+          ></TargetLine>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card header="中压用户故障停电月度总时长目标" class="mb8">
+          <TargetLine
+            height="250px"
+            id="zyErrorStopTimeMonth"
+            ref="zyErrorStopTimeMonthRef"
+          ></TargetLine>
+        </el-card>
+      </el-col> -->
+      <el-col :span="24">
+        <el-card class="mb8">
+          <TargetLine
+            height="250px"
+            id="stopTimeMonth"
+            ref="stopTargetLineRef"
+          ></TargetLine>
+        </el-card>
+      </el-col>
+      <el-col :span="24">
+        <el-card class="mb8">
+          <TargetLine
+            height="250px"
+            id="planStopTimeMonth"
+            ref="planStopTargetLineRef"
+          ></TargetLine>
+        </el-card>
+      </el-col>
+      <el-col :span="24">
+        <el-card>
+          <TargetLine
+            height="250px"
+            id="errorStopTimeMonth"
+            ref="errorStopTargetLineRef"
+          ></TargetLine>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { listMaintenanceStatistics } from "@/api/powerdistribution/maintenance";
+import {
+  list,
+  importF,
+  downloadTemplate,
+} from "@/api/powerdistribution/power-outage-control";
+import TargetLine from "./components/TargetLine.vue";
+import TargetBar from "./components/TargetBar.vue";
+import { getToken } from "@/utils/auth";
 export default {
+  components: { TargetLine, TargetBar },
   data() {
     return {
       dataList: [],
+      showSearch: true,
       // 遮罩层
       loading: true,
       total: 0,
+      flelist: null,
+      url: "",
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        year: `${new Date().getFullYear()}`,
+        reportYear: `${new Date().getFullYear()}`,
       },
+      hasList: "列表",
     };
   },
   created() {
@@ -214,14 +343,61 @@ export default {
     /** 查询列表 */
     getList() {
       this.loading = true;
-      listMaintenanceStatistics({
+      list({
         ...this.queryParams,
       }).then((response) => {
         this.dataList = response.rows;
-        this.total = response.total;
         this.loading = false;
+        this.$refs.targetBarRef.initEcharts(response.rows, "xxx");
+        this.$refs.stopTargetLineRef.initEcharts(response.rows, "月度占比");
+        this.$refs.planStopTargetLineRef.initEcharts(
+          response.rows,
+          "月度预安排占比"
+        );
+        this.$refs.errorStopTargetLineRef.initEcharts(
+          response.rows,
+          "月度故障占比"
+        );
+        this.$refs.errorStopTargetLineRef.initEcharts(
+          response.rows,
+          "月度故障占比"
+        );
+        this.$refs.zyPlanStopTargetLineRef.initEcharts(response.rows);
+        this.$refs.zyStopTargetLineRef.initEcharts(response.rows);
+        this.$refs.zyErrorStopTargetLineRef.initEcharts(response.rows);
       });
     },
+    //导入
+    handleImportSuccess(res) {
+      console.log(res, "res");
+    },
+    //导入前
+    async handleBeforeUpload(val) {
+      let data = new FormData();
+      data.append("file", val);
+      data.append("reportYear", this.queryParams.reportYear);
+      let res = await importF(data);
+      if (res.code == 200) {
+        this.$message.success("导入成功");
+      } else {
+        this.$message.error("导入失败" || res.msg);
+      }
+    },
+    async handleExport() {
+      const res = await downloadTemplate();
+      if (res) {
+        const elink = document.createElement("a");
+        elink.download = `停电预设模版.xlsx`;
+        elink.style.display = "none";
+        const blob = new Blob([res], { type: "application/x-msdownload" });
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      } else {
+        this.$message.error("导出异常请联系管理员");
+      }
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;

src/views/home/components/box1 copy/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="w-full h-full">
-    <div class="c-title">可靠性完成情况</div>
+    <div class="c-title">
+      <span>风险辩识</span>
+      <span class="ml20">作业单位：1</span>
+      <span class="ml10">风险作业：2</span>
+    </div>
     <div
       ref="barChart2"
       id="barChart2"
@@ -68,7 +72,6 @@ export default {
         },
         series: [
           {
-            name: "Access From",
             type: "pie",
             center: ["50%", "60%"],
             radius: ["40%", "70%"],
@@ -88,11 +91,8 @@ export default {
               show: false,
             },
             data: [
-              { value: 1048, name: "Search Engine" },
-              { value: 735, name: "Direct" },
-              { value: 580, name: "Email" },
-              { value: 484, name: "Union Ads" },
-              { value: 300, name: "Video Ads" },
+              { value: 1048, name: "风险作业" },
+              { value: 735, name: "作业单位" },
             ],
           },
         ],

src/views/home/components/box1/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full">
-    <div class="c-title">风险辩识</div>
+    <div class="c-title">可靠性完成情况</div>
     <div
       ref="barChart"
       id="barChart"

src/views/home/components/points-ranking/index.vue

@@ -1,23 +1,59 @@
 <template>
   <div class="ranking-c">
-    <div class="c-title">积分排行榜</div>
+    <div class="c-title flex-center">
+      <span>积分排行榜</span>
+      <el-radio-group size="mini" v-model="current" @change="getList">
+        <el-radio-button label="红榜"></el-radio-button>
+        <el-radio-button label="黑榜"></el-radio-button>
+      </el-radio-group>
+    </div>
     <el-table
+      :v-loading="loading"
       :data="tableData"
       style="width: 100%; margin-top: 8px"
       height="100%"
     >
-      <el-table-column prop="date" label="排名" width="80"> </el-table-column>
-      <el-table-column prop="name" label="单位"> </el-table-column>
-      <el-table-column prop="name" label="工作负责人"> </el-table-column>
-      <el-table-column prop="address" label="积分"> </el-table-column>
+      <el-table-column prop="rankNum" label="排名" width="80" align="center">
+        <template slot-scope="scope">
+          <img
+            class="icon-box"
+            v-if="scope.$index < 3"
+            :src="iconMap[`no${scope.$index + 1}`]"
+          />
+          <span v-else> {{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="单位" align="center">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="工作负责人"
+        align="center"
+        v-if="current == '红榜'"
+      >
+      </el-table-column>
+      <el-table-column prop="name" label="作业人员" align="center" v-else>
+      </el-table-column>
+      <el-table-column prop="address" label="得分" align="center">
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
+import no1 from "@/assets/images/名次-第1名.png";
+import no2 from "@/assets/images/名次-第2名.png";
+import no3 from "@/assets/images/名次-第3名.png";
 export default {
   data() {
     return {
+      iconMap: {
+        no1,
+        no2,
+        no3,
+      },
+      loading: false,
+      current: "红榜",
       tableData: [
         {
           date: "1",
@@ -42,6 +78,12 @@ export default {
       ],
     };
   },
+  methods: {
+    getList() {
+      this.loading = true;
+      this.loading = false;
+    },
+  },
 };
 </script>
 
@@ -59,4 +101,13 @@ export default {
     background-color: transparent !important;
   }
 }
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.icon-box {
+  width: 23px;
+  height: 23px;
+}
 </style>

src/views/home/index.vue

@@ -61,16 +61,12 @@ export default {
   },
   methods: {
     init() {
-      this.chartOptions.data = [120, 200, 150, 80, 70, 110, 130];
-      this.chartOptions.xData = [
-        "Mon",
-        "Tue",
-        "Wed",
-        "Thu",
-        "Fri",
-        "Sat",
-        "Sun",
+      this.chartOptions.data = [
+        120, 200, 150, 80, 70, 110, 130, 70, 110, 130, 200, 150,
       ];
+      this.chartOptions.xData = Array(12)
+        .fill(0)
+        .map((it, i) => `${i + 1}月`);
     },
   },
 };