fix(首页)：编辑布局回显、图表添加时间字段和回款率折线图

src/views/index/index.vue

@@ -1,16 +1,8 @@
-<!--
- * @Author: wanglj 471442253@qq.com
- * @Date: 2023-01-11 15:52:49
- * @LastEditors: wanglj
- * @LastEditTime: 2023-02-27 16:42:36
- * @Description: file content
- * @FilePath: \opms_frontend\src\views\index\index.vue
--->
 <!--
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-13 10:28:33
  * @LastEditors: wanglj
- * @LastEditTime: 2023-02-15 17:52:56
+ * @LastEditTime: 2023-03-02 11:47:39
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\index\index.vue
 -->
@@ -22,7 +14,7 @@
           <span>个人看板</span>
           <div class="buttons">
             <el-button v-show="!editFlag" type="text" @click="editFlag = true">编辑布局</el-button>
-            <el-button v-show="editFlag" type="text" @click="visible = true">添加指标</el-button>
+            <el-button v-show="editFlag" type="text" @click="visible = true">编辑指标</el-button>
             <el-button v-show="editFlag" type="text" @click="saveLayout">保存布局</el-button>
           </div>
         </div>
@@ -78,6 +70,15 @@
               </el-select>
             </div> -->
             <div class="buttons">
+              <el-radio-group
+                v-show="!editFlag && (item.i == 20002 || item.i == 20003)"
+                v-model="item.searchType"
+                size="mini"
+                @change="refresh(item, index)">
+                <el-radio-button label="year">年</el-radio-button>
+                <el-radio-button label="quarter">季度</el-radio-button>
+                <el-radio-button label="month">月</el-radio-button>
+              </el-radio-group>
               <el-button v-show="!editFlag" type="text" @click="refresh(item, index)">刷新</el-button>
               <vab-icon v-show="editFlag" icon="close-fill" @click="gridDel(index)" />
             </div>
@@ -152,8 +153,8 @@
         </ul>
       </el-card>
     </div>
-    <!-- 添加个人看板 -->
-    <el-dialog title="添加个人看板" :visible.sync="visible" @open="getBoardOptions">
+    <!-- 编辑指标 -->
+    <el-dialog title="编辑指标" :visible.sync="visible" @open="getBoardOptions">
       <el-tabs v-model="activeName" type="card">
         <el-tab-pane label="看板数据" name="first">
           <ul class="add-board">
@@ -161,7 +162,7 @@
               <div class="board-container">
                 <vab-icon class="icon" :icon="item.reportIcon" />
                 <div class="text">
-                  <p class="num">{{ item.id }}</p>
+                  <p class="num">*</p>
                   <p>{{ item.reportName }}</p>
                 </div>
                 <vab-icon v-show="item.checked" class="check" icon="check-fill" />
@@ -175,7 +176,7 @@
               <div class="board-container">
                 <vab-icon class="icon" :icon="item.reportIcon" />
                 <div class="text">
-                  <p class="num">{{ item.id }}</p>
+                  <p class="num">*</p>
                   <p>{{ item.reportName }}</p>
                 </div>
                 <vab-icon v-show="item.checked" class="check" icon="check-fill" />
@@ -355,6 +356,7 @@
               type: item.report_type,
               h: item.size_h,
               w: item.size_w,
+              searchType: 'year',
             }
           })
         }
@@ -373,7 +375,7 @@
       //刷新
       refresh(item, index) {
         this.charts[index].dispose()
-        this.drawChart(item.i, index)
+        this.drawChart(item.i, index, item.searchType)
       },
       getChartSize(id) {
         // console.log(id, 'id')
@@ -382,15 +384,17 @@
         bar.style.height = bar.parentNode.clientHeight - 65 + 'px'
         bar.style.width = bar.parentNode.clientWidth + 'px'
       },
-      async drawChart(id, i) {
+      async drawChart(id, i, searchType) {
         const chartBar = echarts.init(document.getElementById(id))
-        const [err, res] = await to(indexApi.getHomeDataReportData({ id }))
+        const [err, res] = await to(indexApi.getHomeDataReportData({ id, Params: { searchType } }))
         if (err) return
         const option = {
           grid: {
             bottom: 30,
             top: 40,
             right: 10,
+            left: 10,
+            containLabel: true,
           },
           tooltip: {
             trigger: 'axis',
@@ -407,7 +411,19 @@
           yAxis: [
             {
               type: 'value',
-              name: '(元)',
+              name: '金额(元)',
+              alignTicks: true,
+            },
+            {
+              type: 'value',
+              name: '回款率(%)',
+              min: 0,
+              max: 100,
+              alignTicks: true,
+              interval: 20,
+              axisLabel: {
+                formatter: '{value} %',
+              },
             },
           ],
           series: [
@@ -421,6 +437,17 @@
               type: 'bar',
               data: res.data.data.yDataReal,
             },
+            {
+              name: '回款率',
+              type: 'line',
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value + '%'
+                },
+              },
+              data: res.data.data.percentData,
+            },
           ],
         }
         chartBar.setOption(option)
@@ -498,6 +525,7 @@
       },
       async save() {
         const board = this.addBoard.filter((item) => item.checked == true)
+        this.privateBoard = []
         for (const item of board) {
           this.privateBoard.push({
             report_name: item.reportName,
@@ -509,7 +537,16 @@
         for (const item of layout) {
           const index = this.layout.findIndex((each) => each.i == item.id)
           if (index > -1) continue
-          this.layout.push({ x: 0, y: 0, w: 12, h: 10, i: item.id, type: 'bar', name: item.reportName })
+          this.layout.push({
+            x: 0,
+            y: 0,
+            w: 12,
+            h: 10,
+            i: item.id,
+            type: 'bar',
+            name: item.reportName,
+            searchType: 'year',
+          })
         }
         this.visible = false
         await this.$nextTick()
@@ -537,6 +574,7 @@
         const [err, res] = await to(indexApi.setUpHomeConfig(params))
         if (err) return
         this.$message.success(res.msg)
+        this.getHomeNumReportData()
       },
       getDateList() {
         const now = new Date()
@@ -573,7 +611,15 @@
         const arr = res.data.list || []
         arr.forEach((item) => (item.checked = false))
         this.addLayout = arr.filter((item) => item.reportType == 20)
+        this.addLayout.forEach((item) => {
+          const index = this.layout.findIndex((each) => each.i == item.id)
+          if (index > -1) item.checked = true
+        })
         this.addBoard = arr.filter((item) => item.reportType == 10)
+        this.addBoard.forEach((item) => {
+          const index = this.privateBoard.findIndex((each) => each.id == item.id)
+          if (index > -1) item.checked = true
+        })
       },
       getOptions() {
         this.getDicts('sys_msg_type').then((response) => {
@@ -635,7 +681,11 @@
       margin-right: 10px;
       overflow-x: hidden;
       overflow-y: auto;
-
+      .buttons {
+        .el-radio-group {
+          margin-right: 4px;
+        }
+      }
       .board {
         display: flex;
         flex-direction: column;