fix: 日常支出统计及收益相关页面优化。

2024-10-22 11:22:27 +08:00
parent 49a9b06380
commit cbad076e3b
10 changed files with 299 additions and 68 deletions
--- a/src/views/invest/accountDealAnalysis/index.vue
+++ b/src/views/invest/accountDealAnalysis/index.vue
@@ -423,17 +423,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -497,7 +505,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',
--- a/src/views/invest/accountDealRecord/index.vue
+++ b/src/views/invest/accountDealRecord/index.vue
@@ -23,6 +23,11 @@
            <el-option v-for="dict in deal_category" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
+        <el-form-item label="交易子类别" style="width: 240px" prop="childCategory">
+          <el-select v-model="queryParams.childCategory" placeholder="请选择交易子类别" clearable>
+            <el-option v-for="dict in daily_expenses" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
        <el-form-item label="交易时间" prop="time">
          <el-date-picker v-model="queryParams.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
--- a/src/views/invest/accountsBalance/index.vue
+++ b/src/views/invest/accountsBalance/index.vue
@@ -290,17 +290,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -364,7 +372,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',
--- a/src/views/invest/creditCardDealAnalysis/index.vue
+++ b/src/views/invest/creditCardDealAnalysis/index.vue
@@ -472,17 +472,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -546,7 +554,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',
--- a/src/views/invest/dailyExpensesAnalysis/index.vue
+++ b/src/views/invest/dailyExpensesAnalysis/index.vue
@@ -111,19 +111,99 @@
            </div>
          </div>
        </div>
+        <div class="right-con" v-show="account.top5Name != null">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top5Name }}</div>
+            <div>
+              <span class="num">{{ account.top5 }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="summary-con" v-show="account.top6Name != null" style="height: 115px">
+        <div class="right-con" v-show="account.top6Name != null">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top6Name }}</div>
+            <div>
+              <span class="num">{{ account.top6 }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top7Name != null">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top7Name }}</div>
+            <div>
+              <span class="num">{{ account.top7 }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top8Name != null">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top8Name }}</div>
+            <div>
+              <span class="num">{{ account.top8 }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top9Name != null">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top9Name }}</div>
+            <div>
+              <span class="num">{{ account.top9 }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top10Name != null">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top10Name }}</div>
+            <div>
+              <span class="num">{{ account.top10 }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top11Name != null">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top11Name }}</div>
+            <div>
+              <span class="num">{{ account.top11 }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
      </div>
      <div class="title-con" style="margin-top: 15px">
        <div class="title">日常支出统计</div>
        <div class="operate-btn-con">
          <el-radio-group v-model="radioVal" @change="handleRadioChange">
-            <el-radio-button label="表格" />
-            <el-radio-button label="柱状图" />
-            <el-radio-button label="折线图" />
+            <el-radio-button label="分类柱状图" />
+            <el-radio-button label="分类表格" />
+            <el-radio-button label="日期折线图" />
+            <el-radio-button label="日期表格" />
          </el-radio-group>
        </div>
      </div>
      <div class="content-con">
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.accountsList" height="calc(100% - 170px)">
+        <el-table v-show="radioVal === '分类表格'" v-loading="loading" :data="account.accountsList" height="calc(100% - 245px)">
          <el-table-column label="序号" width="50" type="index" align="center">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
@@ -132,8 +212,17 @@
          <el-table-column label="交易子类别" align="center" prop="time" />
          <el-table-column label="支出金额" align="center" prop="value" />
        </el-table>
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px); margin-top: -10px"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px); margin-top: -10px"></div>
+        <div v-show="radioVal === '分类柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
+        <div v-show="radioVal === '日期折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
+        <el-table v-show="radioVal === '日期表格'" v-loading="loading" :data="account.tableAccountsDateList" height="calc(100% - 245px)">
+          <el-table-column label="序号" width="50" type="index" align="center">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="交易日期" align="center" prop="time" />
+          <el-table-column label="支出金额" align="center" prop="value" />
+        </el-table>
      </div>
    </div>
  </div>
@@ -166,7 +255,7 @@ const dates = [
 const accountsList = ref([])
 const loading = ref(true)
 const total = ref(0)
-const radioVal = ref('表格')
+const radioVal = ref('分类柱状图')
 const dateValidate = (rules, value, callback) => {
  const dateType = rules.dateType || 'days'
  const num = rules.num || 31
@@ -264,6 +353,10 @@ const chartData = ref({
  name: [],
  value1: []
 })
+const lineData = ref({
+  name: [],
+  value1: []
+})

 /** 查询管理列表 */
 function getAcccountsList() {
@@ -275,6 +368,7 @@ function getAcccountsList() {
 function getList() {
  loading.value = true
  chartData.value = { name: [], value1: [] }
+  lineData.value = { name: [], value1: [] }
  const { type, time, id, dataType, dealType, dealCategory } = queryParams.value
  let formatValue = 'YYYY-MM-DD'
  if (type === 1) {
@@ -306,6 +400,10 @@ function getList() {
      chartData.value.name.push(item.time)
      chartData.value.value1.push(item.value)
    })
+    response.data.acccountsDateList.map((item) => {
+      lineData.value.name.push(item.time)
+      lineData.value.value1.push(item.value)
+    })
    handleRadioChange(currentType.value)
  })
 }
@@ -429,7 +527,7 @@ const drawLine = (data) => {
        type: 'shadow'
      },
      formatter: function (params) {
-        return params[0].name + '<br>' + '交易金额：' + params[0].value + '元'
+        return params[0].name + '<br>' + '支出金额：' + params[0].value + '元'
      }
    },
    xAxis: {
@@ -498,15 +596,15 @@ const drawLine = (data) => {
  myChart.setOption(option)
 }

-const currentType = ref('柱状图')
+const currentType = ref('分类柱状图')
 const handleRadioChange = (type) => {
  currentType.value = type
  switch (type) {
-    case '柱状图':
+    case '分类柱状图':
      drawBar(chartData.value)
      break
-    case '折线图':
-      drawLine(chartData.value)
+    case '日期折线图':
+      drawLine(lineData.value)
      break
    default:
      break
--- a/src/views/invest/debitDealAnalysis/index.vue
+++ b/src/views/invest/debitDealAnalysis/index.vue
@@ -467,17 +467,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -541,7 +549,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',
--- a/src/views/invest/futuresAnalysis/index.vue
+++ b/src/views/invest/futuresAnalysis/index.vue
@@ -379,17 +379,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -453,7 +461,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',
--- a/src/views/invest/investAnalysis/index.vue
+++ b/src/views/invest/investAnalysis/index.vue
@@ -380,17 +380,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -454,7 +462,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',
--- a/src/views/invest/investDealAnalysis/index.vue
+++ b/src/views/invest/investDealAnalysis/index.vue
@@ -400,17 +400,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -474,7 +482,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',
--- a/src/views/invest/stocksAnalysis/index.vue
+++ b/src/views/invest/stocksAnalysis/index.vue
@@ -380,17 +380,25 @@ const drawBar = (data) => {
        type: 'bar',
        barWidth: 20, // 根据需求调整数值大小，单位是像素
        itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        }
      }
    ],
    // 添加点击事件的处理函数
    emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
    }
  }

@@ -454,7 +462,15 @@ const drawLine = (data) => {
          color: '#4181c9'
        },
        itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
        },
        smooth: true,
        symbol: 'emptyCircle',