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

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',

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>

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',

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="chartBar" style="height: calc(100% - 225px); 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="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 '折线图':
+    case '日期折线图':
-      drawLine(chartData.value)
+      drawLine(lineData.value)
       break
     default:
       break

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',

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: {
+      // itemStyle: {
-        color: '#2283cf',
+      //   color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
+      // },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // 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',