feature(首页)：添加现场打卡频次、跟进记录频次、新增及转换项目、累计签约回款、出货金额表单

src/views/index/index.vue

@@ -2,7 +2,7 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-13 10:28:33
  * @LastEditors: wanglj
- * @LastEditTime: 2023-03-02 11:47:39
+ * @LastEditTime: 2023-03-27 16:41:46
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\index\index.vue
 -->
@@ -90,11 +90,57 @@
                 <el-radio-button label="4">三季度</el-radio-button>
                 <el-radio-button label="0">全年</el-radio-button>
               </el-radio-group>
-              <el-button v-show="!editFlag" type="text" @click="refresh(item, index)">刷新</el-button>
+              <el-radio-group
+                v-show="!editFlag && item.i == 20010"
+                v-model="item.searchType"
+                size="mini"
+                @change="refresh(item, index)">
+                <el-radio-button label="week">周</el-radio-button>
+                <el-radio-button label="month">月</el-radio-button>
+              </el-radio-group>
+              <el-select
+                v-show="!editFlag && item.i == 20009"
+                v-model="item.searchType"
+                placeholder="月份"
+                size="mini"
+                style="width: 100px"
+                @change="refresh(item, index)">
+                <el-option v-for="month in 12" :key="month" :label="month + '月'" :value="month" />
+              </el-select>
+              <el-button v-show="!editFlag" class="refreshBtn" type="text" @click="refresh(item, index)">
+                刷新
+              </el-button>
               <vab-icon v-show="editFlag" icon="close-fill" @click="gridDel(index)" />
             </div>
           </h4>
-          <div :id="item.i"></div>
+          <div :id="item.i">
+            <template v-if="item.i == 20009">
+              <!-- <el-form label-width="40px" size="mini">
+                <el-row justify="end" style="margin: 10px 0; padding: 0 5px" type="flex">
+                  <el-col :span="6">
+                    <el-form-item label="月份">
+                      <el-select
+                        v-show="!editFlag"
+                        v-model="item.searchType"
+                        placeholder="月份"
+                        size="mini"
+                        style="width: 100%"
+                        @change="refresh(item, index)">
+                        <el-option v-for="month in 12" :key="month" :label="month" :value="month" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form> -->
+
+              <el-table border :data="item.table" height="100%" size="mini" style="width: 100%">
+                <el-table-column align="center" label="周" prop="week" width="60px" />
+                <el-table-column align="center" label="邮件" prop="email" />
+                <el-table-column align="center" label="拜访" prop="payvisit" />
+                <el-table-column align="center" label="电话" prop="phone" />
+              </el-table>
+            </template>
+          </div>
         </grid-item>
       </grid-layout>
     </div>
@@ -128,7 +174,7 @@
               getDateList()
             " />
         </div>
-        <el-timeline>
+        <el-timeline v-if="activities.length">
           <el-timeline-item v-for="(activity, index) in activities" :key="index">
             <div class="detail" :class="{ active: activity.active }">
               <p class="time">
@@ -139,6 +185,7 @@
             </div>
           </el-timeline-item>
         </el-timeline>
+        <div class="timelineEmpty">暂无日程</div>
       </el-card>
       <el-card class="notice">
         <div slot="header" class="card-title">
@@ -367,7 +414,18 @@
               type: item.report_type,
               h: item.size_h,
               w: item.size_w,
-              searchType: item.id != 20006 && item.id != 20007 ? 'year' : '0',
+              searchType: (() => {
+                if (item.id == 20006 || item.id == 20007) {
+                  return '0'
+                } else if (item.id == 20010) {
+                  return 'week'
+                } else if (item.id == 20009) {
+                  return new Date().getMonth() + 1
+                } else {
+                  return 'year'
+                }
+                // item.id != 20006 && item.id != 20007 ? 'year' : '0'
+              })(),
             }
           })
         }
@@ -382,20 +440,52 @@
           this.getChartSize(this.layout[i].i)
           if (this.layout[i].i == 20006 || this.layout[i].i == 20007) {
             this.drawGoalChart(this.layout[i].i, i)
-          } else {
+          } else if (this.layout[i].i == 20008) {
+            this.drawCheckChart(this.layout[i].i, i)
+          } else if (this.layout[i].i == 20009) {
+            this.getTable(this.layout[i].i, i)
+          } else if (this.layout[i].i == 20010) {
+            this.drawProjectTrans(this.layout[i].i, i)
+          } else if (this.layout[i].i == 20011) {
+            this.drawMoneyAmount(this.layout[i].i, i)
+          } else if (this.layout[i].i == 20012) {
+            this.drawMoneyReturn(this.layout[i].i, i)
+          } else if (this.layout[i].i >= 20000 && this.layout[i].i <= 20003) {
             this.drawChart(this.layout[i].i, i)
           }
         }
       },
       //刷新
       refresh(item, index) {
-        this.charts[index].dispose()
+        if (this.charts[index]) {
+          this.charts[index].dispose && this.charts[index].dispose()
+        }
         if (item.i == 20006 || item.i == 20007) {
           this.drawGoalChart(item.i, index, item.searchType)
+        } else if (item.i == 20008) {
+          this.drawCheckChart(item.i, index, item.searchType)
+        } else if (item.i == 20009) {
+          this.getTable(item.i, index, item.searchType)
+        } else if (item.i == 20010) {
+          this.drawProjectTrans(item.i, index, item.searchType)
+        } else if (item.i == 20011) {
+          this.drawMoneyAmount(item.i, index, item.searchType)
+        } else if (item.i == 20012) {
+          this.drawMoneyReturn(item.i, index, item.searchType)
         } else {
           this.drawChart(item.i, index, item.searchType)
         }
       },
+      // 获取表格
+      async getTable(id, i, searchType) {
+        console.log(id, i)
+        const [err, res] = await to(indexApi.getHomeDataReportData({ id, Params: { date: searchType } }))
+        if (err) this.drawMoneyReturn
+        this.layout.forEach((item) => {
+          if (item.i == id) item.table = res.data.data || []
+        })
+        this.$forceUpdate()
+      },
       getChartSize(id) {
         // console.log(id, 'id')
         const bar = document.getElementById(id)
@@ -404,10 +494,10 @@
         bar.style.width = bar.parentNode.clientWidth + 'px'
       },
       async drawChart(id, i, searchType) {
-        const chartBar = echarts.init(document.getElementById(id))
         const [err, res] = await to(indexApi.getHomeDataReportData({ id, Params: { searchType } }))
         if (err) return
-        console.log(res.data.data)
+        if (!res.data.data) return
+        const chartBar = echarts.init(document.getElementById(id))
         const option = {
           grid: {
             bottom: 30,
@@ -473,6 +563,202 @@
         chartBar.setOption(option)
         this.charts[i] = chartBar
       },
+      async drawCheckChart(id, i) {
+        const chartBar = echarts.init(document.getElementById(id))
+        const [err, res] = await to(indexApi.getHomeDataReportData({ id }))
+        if (err) return
+        console.log(res, 'res')
+        const option = {
+          grid: {
+            bottom: 30,
+            top: 40,
+            right: 10,
+            left: 10,
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: res.data.data.xData,
+              axisTick: {
+                alignWithLabel: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '打卡(次)',
+            },
+          ],
+          series: [
+            {
+              name: '打卡频次',
+              type: 'bar',
+              data: res.data.data.yDataTarget,
+            },
+          ],
+        }
+        chartBar.setOption(option)
+        this.charts[i] = chartBar
+      },
+      async drawProjectTrans(id, i, searchType = 'week') {
+        const [err, res] = await to(indexApi.getHomeDataReportData({ id, Params: { searchType } }))
+        if (err) return
+        const arr = res.data.data || []
+        const chartBar = echarts.init(document.getElementById(id))
+        const option = {
+          grid: {
+            bottom: 0,
+            top: 40,
+            right: 10,
+            left: 10,
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['新增', 'C转B', 'B转A', 'A转签约', 'C转A', 'C转签约', 'B转签约', '储备转A/B/C/签约'],
+              axisTick: {
+                alignWithLabel: true,
+              },
+              axisLabel: {
+                interval: 0,
+                rotate: 30,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '数量',
+            },
+          ],
+          series: arr.map((item, index) => {
+            return {
+              name: (() => {
+                if (index === 0) {
+                  return 'BIOBANK方案'
+                } else if (index === 1) {
+                  return 'CELLSOP方案'
+                } else {
+                  return 'LIMS方案'
+                }
+              })(),
+              type: 'bar',
+              data: item,
+            }
+          }),
+        }
+        chartBar.setOption(option)
+        this.charts[i] = chartBar
+      },
+      async drawMoneyAmount(id, i) {
+        const [err, res] = await to(indexApi.getHomeDataReportData({ id }))
+        if (err) return
+        const arr = res.data.data || []
+        const chartBar = echarts.init(document.getElementById(id))
+        const option = {
+          grid: {
+            bottom: 30,
+            top: 40,
+            right: 10,
+            left: 10,
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['BioBank', 'CellSOP', 'LIMS'],
+              axisTick: {
+                alignWithLabel: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '出货金额(元)',
+            },
+          ],
+          series: arr.map((item, index) => {
+            return {
+              name: (() => {
+                if (index === 0) {
+                  return 'A类项目'
+                } else {
+                  return 'B类项目'
+                }
+              })(),
+              type: 'bar',
+              data: item,
+            }
+          }),
+        }
+        chartBar.setOption(option)
+        this.charts[i] = chartBar
+      },
+      async drawMoneyReturn(id, i) {
+        const [err, res] = await to(indexApi.getHomeDataReportData({ id }))
+        if (err) return
+        const arr = res.data.data || []
+        const chartBar = echarts.init(document.getElementById(id))
+        const option = {
+          grid: {
+            bottom: 30,
+            top: 40,
+            right: 10,
+            left: 10,
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: 'axis',
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['BioBank', 'CellSOP', 'LIMS'],
+              axisTick: {
+                alignWithLabel: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '回款金额(元)',
+            },
+          ],
+          series: arr.map((item, index) => {
+            return {
+              name: (() => {
+                if (index === 0) {
+                  return '当月签约'
+                } else if (index === 1) {
+                  return '累计签约'
+                } else if (index === 2) {
+                  return '当月回款'
+                } else {
+                  return '累计回款'
+                }
+              })(),
+              type: 'bar',
+              data: item,
+            }
+          }),
+        }
+        chartBar.setOption(option)
+        this.charts[i] = chartBar
+      },
       async drawGoalChart(id, i, searchType) {
         const chartBar = echarts.init(document.getElementById(id))
         const [err, res] = await to(
@@ -587,7 +873,7 @@
         await this.$nextTick()
         for (let i = 0; i < this.layout.length; i++) {
           this.getChartSize(this.layout[i].i)
-          this.charts[i].resize()
+          if (this.charts[i]) this.charts[i].resize && this.charts[i].resize()
         }
       },
       layoutReadyEvent() {
@@ -916,11 +1202,16 @@
           padding-top: 4px;
           height: calc(100% - 72px);
           overflow: auto;
-
           .el-timeline-item {
             padding-bottom: 10px;
           }
         }
+        .timelineEmpty {
+          height: calc(100% - 72px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
 
       .notice {
@@ -981,7 +1272,9 @@
     border-radius: 4px;
     box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
     overflow: hidden;
-
+    .el-form-item--mini.el-form-item {
+      margin-bottom: 0;
+    }
     h4 {
       line-height: 22px;
       height: 54px;
@@ -1002,6 +1295,9 @@
         }
       }
     }
+    .refreshBtn {
+      margin-left: 8px;
+    }
   }
 
   .board-container {