zfire-newmall-admin/src/views/workOrder/orderHome/index.vue

<template>
	<div class="dashboard_container">
		<div class="container_top">
			<div class="tab" v-for="(item,index) in tabs" :key='index'>
				<img :src="item.url" fit="fit"></img>
				<div class="text">
					<div class="title">{{item.title}}</div>
					<div class="num">{{item.num}}</div>
				</div>
			</div>
		</div>
		<div class="container_center">
			<div class="chart">
				<div class="head">
					<div class="title">近7天订单趋势</div>
					<div class="more">查看更多</div>
				</div>
				<div ref="chart1" style="width: 100%;height: 280px;"></div>
			</div>
			<div class="chart">
				<div class="head">
					<div class="title">未来7天需上门</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>
				<div ref="chart3" 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')},{title: '待接收',num: 22,url: require('@/assets/orderHome/djs.png')},{title: '服务中',num: 53,url: require('@/assets/orderHome/ffz.png')},{title: '异常待处理',num: 2,url: require('@/assets/orderHome/yc.png')},{title: '差评统计',num: 0,url: require('@/assets/orderHome/pj.png')}],
				qtsm: [],
				qtddqs: {},
				wglxfb: {}
			}
		},
		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('-'))
					}
					return t=='before'?daytimeArr.reverse():daytimeArr
				}
			},
			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
						})
					}
					return type=='name'?names:series
				}
			}
		},
		created() {
			this.getCount()
		},
		mounted() {
			// this.drawChat1()
		},
		methods: {
			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()
				})
			},
			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 = {
					tooltip: {
					    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'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.getDate(7,'after')
					},
					yAxis: {
						type: 'value'
					},
					min: 0,
					max: (value) => {  // 百位起最大值向上取整
						return Math.ceil(value.max / 100) * 100;
					},
					series: [
						{
							name: '工单数',
							data: this.qtsm,
							type: 'line',
							smooth: true
						}
					]
				};
				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)
			}
		}
	}
</script>

<style scoped lang="scss">
	.dashboard_container{
		background: #f5f5f5;
		padding: 20px;
		min-height: calc(100vh - 86px);
		box-sizing: border-box;
		.container_top{
			display: flex;
			.tab{
				display: flex;
				align-items: center;
				flex: 1;
				padding: 20px;
				margin-right: 20px;
				background-color: #ffffff;
				border-radius: 10px;
				.text{
					margin-left: 30px;
					.title{
						color: #666666;
						font-size: 16px;
						margin-bottom: 8px;
					}
					.num{
						font-size: 26px;
						font-weight: bold;
					}
				}
			}
			.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;
			}
			.chart:last-child{
				margin-right: 0;
			}
		}
		.container_bottom{
			width: 100%;
			height: 350px;
			background-color: #ffffff;
		}
		.head{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 16px 20px;
			font-weight: bold;
			.more{
				color: #1d82ff;
				cursor: pointer;
			}
		}
	}
</style>