修改成本汇总bug

src/locales/index.js

@@ -1,8 +1,8 @@
 import sysConfig from "@/config"
 import tool from '@/utils/tool'
 import { createI18n } from 'vue-i18n'
-import el_zh_cn from 'element-plus/lib/locale/lang/zh-cn'
-import el_en from 'element-plus/lib/locale/lang/en'
+import el_zh_cn from 'element-plus/dist/locale/zh-cn.mjs'
+import el_en from 'element-plus/dist/locale/en.mjs'
 
 import zh_cn from './lang/zh-cn.js'
 import en from './lang/en.js'

src/style/fix.scss

@@ -57,6 +57,12 @@
 .el-pagination{
 	--el-pagination-button-width-small:28px;
 	--el-pagination-button-height-small:28px;
+	.el-select--small{
+		height: 28px;
+		.el-select__wrapper{
+			height: 100%;
+		}
+	}
 }
 .el-tabs.role_tabs{
 	--el-tabs-header-height:42px;
@@ -108,7 +114,8 @@
 .el-main.nopadding .searchMainNoTop{margin-top: 0;}
 .el-main.nopadding .searchMain .searchItem{display: flex;flex-direction: column;align-items: flex-start;margin-right: 20px;margin-bottom: 10px;}
 .el-main.nopadding .searchMain .searchItem .name{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #303133;padding-bottom: 5px;text-align: right;}
-.el-main.nopadding .searchMain .searchItem .input{width: 230px;}
+.el-main.nopadding .searchMain .searchItem .input{width: 230px;height: 28px;}
+.el-main.nopadding .searchMain .searchItem .el-select--small .el-select__wrapper{height: 100%;}
 .el-main.nopadding .searchMain .searchItem.searchBtn{display: flex;flex-direction: row;}
 
 .el-drawer__body {overflow: auto;padding:0;}
@@ -161,8 +168,10 @@
 .el-tag {transition: all 0s !important;}
 
 /** 弹款的头部配置 */
-.el-dialog .el-dialog__header{margin-right: 0;padding-bottom: 20px;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06);}
-.el-dialog .el-dialog__footer{padding-top: 20px;box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.06);}
+.el-dialog{padding: 0;}
+.el-dialog .el-dialog__header{margin-right: 0;padding: 20px;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06);}
+.el-dialog .el-dialog__body{padding: 30px 20px;}
+.el-dialog .el-dialog__footer{padding: 20px;box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.06);}
 
 /* 覆盖tinymce样式 */
 .sceditor .tox-tinymce {border: 1px solid #DCDFE6;border-radius: 0;}

src/views/cost/shipmentStatistics/index.vue

@@ -12,7 +12,10 @@
 						</div>
 						<div class="searchItem">
 							<label class="name">时间范围</label>
-							<el-date-picker :size="size" class="input" type="daterange" v-model="reqParams.dateSelect" value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
+							<el-date-picker :size="size" class="input" :type="reqParams.date_type=='day'?'daterange':reqParams.date_type=='month'?'monthrange':reqParams.date_type=='year'?'yearrange':'datetimerange'" v-model="reqParams.dateSelect" value-format="YYYY-MM-DD"
+								start-placeholder="开始时间"
+								end-placeholder="结束时间">
+							</el-date-picker>
 						</div>
 					</scSearch>
 					<div class="searchItem searchBtn">
@@ -23,7 +26,7 @@
 						</scExport>
 					</div>
 				</div>
-				<div class="mainMiddle">
+				<div class="mainMiddle" v-loading="loading" element-loading-text="努力加载中...">
 					<div class="echartsView">
 						<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
 					</div>
@@ -47,6 +50,7 @@ export default {
 	data() {
 		return {
 			size:'small',
+			loading:false,
 			dialog: {
 				save: false,
 				show: false,
@@ -131,7 +135,9 @@ export default {
 		},
 
 		async getData() {
+			this.loading = true;
 			const res = await this.$API.finance.cost.summary.post(this.reqParams);
+			this.loading = false;
 			if(res.code == 200){
 				res.data.tableList.data = this.setTableList(res.data.tableList.data);
 				this.feesData = res.data;
@@ -143,11 +149,16 @@ export default {
 						},
 						formatter: function (params) {
 							const filteredParams = params.filter(param => param.value !== 0);
+							let totalData = 0;
+							filteredParams.map(em=> {
+								totalData += em.value
+							})
 							const formattedParams = filteredParams.map(param => {
+								const percentage =  (param.value/totalData*100).toFixed(2);
 								const seriesColor = param.color;
-								return `<span style="display: flex;justify-content: space-between"><span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${seriesColor};"></span> ${param.seriesName} </span><span style="font-weight: 500;margin-left: 10px">${param.value}</span></span>`;
+								return `<span style="display: flex;justify-content: space-between"><span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${seriesColor};"></span>${param.seriesName} </span><div style="display: flex;justify-content: space-between;margin-left: 15px"><span style="font-weight: 500;display: inline-block;text-align: right;">¥ ${param.value}</span><span style="display: inline-block;margin-left: 10px; width: 50px;text-align: left;font-weight: 500;">${percentage}%</span></div></span>`;
 							}).join('');
-							return params[0].name + '<br/>' + formattedParams;
+							return params[0].name + '<br/>总金额：¥ '+ totalData.toFixed(2) + '<br/>' + formattedParams;
 						}
 					},
 					toolbox:{
@@ -171,7 +182,14 @@ export default {
 					},
 					yAxis: [{
 						type: 'value',
+						show:true,
+						axisLabel:{
+							margin:this.feesData.dateRange.length<13? 56:20
+						},
 						name: '',
+						axisTick:{
+							show:false
+						},
 						splitLine: {
 							show: false
 						}