工程师费用结算首页统计

src/api/engineerFeeSettlementHome.js

@@ -0,0 +1,17 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+export function getData(params) {
+  return request({
+    url: '/settle/expense/data/board',
+    method: 'post',
+    params
+  })
+}
+
+export function getMonthData(params) {
+  return request({
+    url: '/settle/expense/month/send/data',
+    method: 'post',
+    params
+  })
+}

src/views/engineerFeeSettlement/home/index.vue

@@ -4,299 +4,473 @@
 			<span style="color: #1d82ff;">刷新数据</span>
 			<i class="el-icon-refresh-left" style="color: #1d82ff;"></i>
 		</div>
-		<div class="container_top">
-			<div class="tab" v-for="(item,index) in tabs" :key='index' @click="openOrder(item.type)">
-				<el-image class="img" :src="item.url" fit="fit"></el-image>
-				<div class="text">
-					<div class="title">{{item.title}}</div>
-					<div class="num">{{item.num}}</div>
+		<div class="flex">
+			<div class="mode" @click="openOrder('costPerDimension')">
+				<div class="title">待汇总</div>
+				<div class="flex head">
+					<div class="tab">
+						<el-image class="img" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="title">待汇总数量</div>
+							<div class="num">{{collectData.waitGatherCount}}</div>
+						</div>
+					</div>
+					<div class="tab">
+						<el-image class="img" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="title">待汇总金额</div>
+							<div class="num">{{collectData.waitGatherAmount}}</div>
+						</div>
+					</div>
 				</div>
-			</div>
-		</div>
-		<div class="container_center">
-			<div class="chart">
-				<div class="head">
-					<div class="title">近7天订单趋势</div>
-					<div class="more" @click="openOrder()">查看更多</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherInstallHomeCount}}</div>
+							<div class="title">安装费用-家用空调</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherInstallHomeAmount}}</div>
+							<div class="title">安装费用-家用空调</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherInstallCount}}</div>
+							<div class="title">安装费用-非空调</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherInstallHomeAmount}}</div>
+							<div class="title">安装费用-非空调</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherRepairCount}}</div>
+							<div class="title">维修费用</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherRepairAmount}}</div>
+							<div class="title">维修费用</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherOtherCount}}</div>
+							<div class="title">其它费用</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitGatherOtherAmount}}</div>
+							<div class="title">其它费用</div>
+						</div>
+					</div>
 				</div>
-				<div ref="chart1" style="width: 100%;height: 280px;"></div>
 			</div>
-			<div class="chart">
-				<div class="head">
-					<div class="title">未来7天需上门</div>
+			<div class="mode" @click="openOrder('monthlyPayrollSummary')">
+				<div class="title">待发放</div>
+				<div class="flex head">
+					<div class="tab">
+						<el-image class="img" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="title">待发放人数</div>
+							<div class="num">{{collectData.waitSendByCount}}</div>
+						</div>
+					</div>
+					<div class="tab">
+						<el-image class="img" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="title">待发放金额</div>
+							<div class="num">{{collectData.waitSendAmount}}</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendByInstallHomeCount}}</div>
+							<div class="title">安装费用-家用空调</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendInstallHomeAmount}}</div>
+							<div class="title">安装费用-家用空调</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendByInstallCount}}</div>
+							<div class="title">安装费用-非空调</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendInstallAmount}}</div>
+							<div class="title">安装费用-非空调</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendByRepairCount}}</div>
+							<div class="title">维修费用</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendRepairAmount}}</div>
+							<div class="title">维修费用</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex head">
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_13.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendByOtherCount}}</div>
+							<div class="title">其它费用</div>
+						</div>
+					</div>
+					<div class="tab child">
+						<el-image class="img opacity" :src="require('@/assets/home/icon_14.png')" fit="fit"></el-image>
+						<div class="text">
+							<div class="num">{{collectData.waitSendOtherAmount}}</div>
+							<div class="title">其它费用</div>
+						</div>
+					</div>
 				</div>
-				<div ref="chart2" style="width: 100%;height: 280px;"></div>
 			</div>
 		</div>
 		<div class="container_bottom">
 			<div class="chart">
-				<div class="head">
-					<div class="title">近30天完工类型分布</div>
+				<div class="flex_asb">
+					<div class="title">已发放的人数和金额</div>
+					<el-date-picker v-model="date" @change="selectDate" value-format="yyyy-MM" type="monthrange"
+						range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
+					</el-date-picker>
+					</el-form-item>
 				</div>
-				<div ref="chart3" style="width: 100%;height: 330px;"></div>
+				<div ref="chart" style="width: 100%;height: 330px;"></div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-	import { getCount } from "@/api/workOrder/orderHome";
-	export default{
-		data(){
-			return {
-				tabs: [{title: '待派工',num: 12,url: require('@/assets/orderHome/dpg.png'),type: 'DWDPG'},{title: '待接收',num: 22,url: require('@/assets/orderHome/djs.png'),type: 'DJD'},{title: '服务中',num: 53,url: require('@/assets/orderHome/ffz.png'),type: 'FWZ'},{title: '异常待处理',num: 2,url: require('@/assets/orderHome/yc.png'),type: 'YCD'},{title: '差评统计',num: 0,url: require('@/assets/orderHome/pj.png'),type: 'appraise'}],
-				qtsm: [],
-				qtddqs: {},
-				wglxfb: {}
+	import {
+		getMonthData,
+		getData
+	} from "@/api/engineerFeeSettlementHome";
+	export default {
+		data() {
+			return{
+				collectData: {},
+				date: [],
+				dataList: [],
+				series1: [],
+				series2: []
 			}
 		},
 		computed: {
-			getDate(){
-				return function(d,t){
-					var date = new Date();
-					var base = Date.parse(date); // 转换为时间戳
-					var year = date.getFullYear(); //获取当前年份
-					var mon = date.getMonth() + 1; //获取当前月份
-					var day = date.getDate(); //获取当前日
-					var oneDay = 24 * 3600 *1000
-
-					var daytimeArr = []
-					for (var i = 0; i < d ; i++) { //前七天的时间
-						var now = new Date(t=='before'?(base - oneDay*i):(base + oneDay*i));
-						var myear = now.getFullYear();
-						var month = now.getMonth() + 1;
-						var mday = now.getDate()
-						daytimeArr.push([month >=10 ?month :'0'+ month, mday>=10?mday:'0'+mday].join('-'))
+			getMonth() {
+				return function(start, end) {
+					let result = '';
+					const starts = start.split('-');
+					let staYear = parseInt(starts[0]);
+					const staMon = parseInt(starts[1]);
+					const ends = end.split('-');
+					const endYear = parseInt(ends[0]);
+					const endMon = parseInt(ends[1]);
+					const yf = (endYear - staYear) * 12 + (endMon - staMon);
+					let mon = staMon;
+					for (var i = staMon; i <= (staMon + yf); i++) {
+						if (mon <= 12) {
+							if (mon < 10) {
+								result += staYear + '-0' + mon + ',';
+							} else {
+								result += staYear + '-' + mon + ',';
+							}
+						} else {
+							staYear++;
+							mon = 1;
+							result += staYear + '-01,';
+						}
+						mon++;
 					}
-					return t=='before'?daytimeArr.reverse():daytimeArr
+					result = result.split(',').filter(v => v !== '');
+					return result;
 				}
 			},
-			filterOrderType(){
-				return function(obj,type){
-					let names = []
-					let series = []
-					for(let key in this[obj]){
-						names.push(key)
-						series.push({
-							name: key,
-							data: this[obj][key],
-							type: 'line',
-							smooth: true
-						})
+			getMonth12() {
+				return function() {
+					let currentMonth = new Date().getMonth() + 1; // 获取当前月份（0-11）
+					let currentYear = new Date().getFullYear(); // 获取当前年份
+					let last12Months = [];
+
+					for (let i = 0; i < 12; i++) {
+						let month = currentMonth - i; // 从当前月份向前计数
+						let year = currentYear; // 初始化年份为当前年份
+
+						// 处理月份溢出（小于0的情况）
+						if (month <= 0) {
+							month += 12; // 月份减去12
+							year--; // 年份减1
+						}
+
+						// 将月份和年份组合成格式化的字符串
+						last12Months.unshift(`${year}-${month.toString().padStart(2, '0')}`);
 					}
-					return type=='name'?names:series
+					return [last12Months[0], last12Months.pop()];
 				}
 			}
 		},
 		created() {
-			this.getCount()
+			this.date = this.getMonth12()
+			this.getData()
+			this.getMonthData()
 		},
 		mounted() {
 			// this.drawChat1()
 		},
 		methods: {
-			refreshData(){
-				this.$echarts.init(this.$refs.chart1).dispose()
-				this.$echarts.init(this.$refs.chart2).dispose()
-				this.$echarts.init(this.$refs.chart3).dispose()
-				this.getCount()
+			refreshData() {
+				this.$echarts.init(this.$refs.chart).dispose()
+				this.getMonthData()
+				this.getData()
 			},
-			openOrder(type){
-				if(!type){
-					this.$router.push({
-						name: "workOrderPool",
-						query: {}
-					})
-				}else if(type == 'appraise'){
-					this.$router.push({
-						name: "appraise",
-						query: {
-							type: 1
+			selectDate(e) {
+				this.getMonthData()
+			},
+			openOrder(name) {
+				this.$router.push({
+					name,
+					query: {}
+				})
+			},
+			getData() {
+				getData().then(res => {
+					this.collectData = res.data
+				})
+			},
+			getMonthData() {
+				getMonthData({
+					startMonth: this.date.length > 0 ? this.date[0] : '',
+					endMonth: this.date.length > 0 ? this.date[1] : ''
+				}).then(res => {
+					let data = this.getMonth(this.date[0],this.date[1])
+					let series1 = []
+					let series2 = []
+					data.forEach(item=>{
+						if(res.data.dataList.length > 0){
+							res.data.dataList.forEach(it=>{
+								if(item == it.yearMonth){
+									series1.push(it.endSendByCount)
+									series2.push(it.endSendAmount)
+								}else{
+									series1.push(0)
+									series2.push(0)
+								}
+							})
+						}else{
+							series1.push(0)
+							series2.push(0)
 						}
 					})
-				}else{
-					this.$router.push({
-						name: 'workOrderPool',
-						params: {
-							pageName: '-',
-							pageType: 'orderStatus',
-							pageCode: type,
-						},
-					})
-				}
-				
-			},
-			getCount(){
-				getCount().then(res => {
-					this.tabs[0].num = res.data.dpg
-					this.tabs[1].num = res.data.djs
-					this.tabs[2].num = res.data.fwz
-					this.tabs[3].num = res.data.ycdcl
-					this.tabs[4].num = res.data.cp
-					this.qtsm = res.data.qtsm
-					this.qtddqs = res.data.qtddqs
-					this.wglxfb = res.data.wglxfb
-					this.drawChat1()
+					this.drawChat(series1,series2)
 				})
 			},
-			drawChat1(){
-				let chart1 = this.$echarts.init(this.$refs.chart1)
-				let chart2 = this.$echarts.init(this.$refs.chart2)
-				let chart3 = this.$echarts.init(this.$refs.chart3)
-				let option1 = {
+			drawChat(series1,series2) {
+				console.log(series1,series2)
+				let chart = this.$echarts.init(this.$refs.chart)
+				let option = {
 					tooltip: {
-					    trigger: 'axis'
+						trigger: 'axis'
 					},
 					legend: {
-					    data: this.filterOrderType('qtddqs','name')
-					},
-					xAxis: {
-						type: 'category',
-						boundaryGap: false,
-						data: this.getDate(7,'before')
-					},
-					yAxis: {
-						type: 'value'
-					},
-					min: 0,
-					max: (value) => {  // 百位起最大值向上取整
-						return Math.ceil(value.max / 100) * 100;
-					},
-					series: this.filterOrderType('qtddqs','series')
-				};
-				let option2 = {
-					tooltip: {
-					    trigger: 'axis'
+						data: ['已发放人数','已发放金额']
 					},
 					xAxis: {
 						type: 'category',
 						boundaryGap: false,
-						data: this.getDate(7,'after')
-					},
-					yAxis: {
-						type: 'value'
-					},
-					min: 0,
-					max: (value) => {  // 百位起最大值向上取整
-						return Math.ceil(value.max / 100) * 100;
+						data: this.getMonth(this.date[0],this.date[1])
 					},
+					yAxis: [{
+							min: 0,
+							max: (value) => { // 百位起最大值向上取整
+								return Math.ceil(value.max / 100) * 100;
+							},
+							name: '左边',
+							type: 'value',
+						},
+						{
+							min: 0,
+							max: (value) => { // 百位起最大值向上取整
+								return Math.ceil(value.max / 100) * 100;
+							},
+							name: '右边',
+							type: 'value',
+						}
+					],
 					series: [
 						{
-							name: '工单数',
-							data: this.qtsm,
+							name: '已发放人数',
+							data: series1,
+							type: 'line',
+							smooth: true,
+							yAxisIndex: 0
+						},
+						{
+							name: '已发放金额',
+							data: series2,
 							type: 'line',
-							smooth: true
+							smooth: true,
+							yAxisIndex: 1
 						}
 					]
 				};
-				let option3 = {
-					tooltip: {
-					    trigger: 'axis'
-					},
-					legend: {
-					    data: this.filterOrderType('wglxfb','name')
-					},
-					xAxis: {
-						type: 'category',
-						boundaryGap: false,
-						data: this.getDate(30,'before')
-					},
-					min: 0,
-					max: (value) => {  // 百位起最大值向上取整
-						return Math.ceil(value.max / 100) * 100;
-					},
-					yAxis: {
-						type: 'value'
-					},
-					series: this.filterOrderType('wglxfb','series')
-				};
-				chart1.setOption(option1)
-				chart2.setOption(option2)
-				chart3.setOption(option3)
+				chart.setOption(option)
 			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.dashboard_container{
+	.dashboard_container {
 		background: #f5f5f5;
 		padding: 20px;
 		min-height: calc(100vh - 86px);
 		box-sizing: border-box;
-		.refresh{
+
+		.refresh {
 			text-align: right;
 			margin-bottom: 10px;
-			span{
+
+			span {
 				cursor: pointer;
 			}
-			i{
+
+			i {
 				font-weight: bold;
 				margin-left: 4px;
 				cursor: pointer;
 			}
 		}
-		.container_top{
+
+		.flex {
+			display: flex;
+		}
+
+		.flex_asb {
 			display: flex;
-			.tab{
+			justify-content: space-between;
+		}
+
+		.mode {
+			flex: 1;
+			padding: 10px;
+			margin-right: 10px;
+			background-color: #ffffff;
+			border-radius: 10px;
+
+			.title {
+				font-weight: bold;
+			}
+
+			.head {
+				border-bottom: 1px solid #dddddd;
+				padding: 14px 0;
+			}
+
+			.opacity {
+				opacity: 0;
+			}
+
+			.tab {
 				display: flex;
 				align-items: center;
 				flex: 1;
-				padding: 20px;
-				margin-right: 20px;
-				background-color: #ffffff;
-				border-radius: 10px;
 				cursor: pointer;
-				.text{
+
+				.text {
 					margin-left: 30px;
-					.title{
-						color: #666666;
-						font-size: 16px;
+
+					.title {
+						color: #999999;
+						font-size: 14px;
 						margin-bottom: 8px;
 					}
-					.num{
+
+					.num {
 						font-size: 26px;
 						font-weight: bold;
 					}
 				}
-				.img{
-					width: 36px;
-					height: 36px;
+
+				.img {
+					width: 46px;
+					height: 46px;
+					margin-left: 20px;
 				}
 			}
-			.tab:last-child{
-				margin-right: 0;
-			}
-		}
-		.container_center{
-			display: flex;
-			margin: 10px 0;
-			margin-top: 20px;
-			.chart{
-				flex: 1;
-				height: 300px;
-				background-color: #ffffff;
-				margin-right: 20px;
+
+			.child {
+				border-right: 1px solid #dddddd;
+
+				.text {
+					.title {
+						margin-top: 8px;
+						margin-bottom: 0;
+					}
+				}
 			}
-			.chart:last-child{
-				margin-right: 0;
+
+			.child:last-child {
+				border-right: none;
 			}
 		}
-		.container_bottom{
+
+		.mode:last-child {
+			margin-right: 0;
+		}
+
+		.container_bottom {
 			width: 100%;
 			height: 350px;
+			padding: 10px;
 			background-color: #ffffff;
-		}
-		.head{
-			width: 100%;
-			display: flex;
-			justify-content: space-between;
-			padding: 16px 20px;
-			font-weight: bold;
-			.more{
-				color: #1d82ff;
-				cursor: pointer;
-			}
+			margin-top: 10px;
+			border-radius: 10px;
 		}
 	}
 </style>