yiliangyiyun-app/pages/user/report.vue

<template>
	<view class="content">
		<view class="content1">
			<u-navbar back-text="" title="数据统计" :border-bottom='false' :background="background" back-icon-color='white'
				title-color='white'>
			</u-navbar>
			<view class="row2">
				<view class="left" @click="dateClick">
					{{nowDate}}
					<u-icon name="arrow-down-fill" size="16" class="icon"></u-icon>
				</view>
				<view class="right">
					<view :class="typeSelect==index?'type-bgc':''" class="type-style" v-for="(item,index) in moneyList"
						@click="typeClick(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="row3">
				<view class="title">
					总收入
				</view>
				<view class="number">
					核算中
				</view>
			</view>
		</view>
		<view class="move-content">
			<view class="content2 content-wrap">
				<view class="row1">
					<view class="left title">
						合同完成进度
					</view>
					<view class="right">
						<view class="item" :class="contractSelect=='0'?'item-Select':''" @click="htClick(0)">采购</view>
						<view class="item" :class="contractSelect=='1'?'item-Select':''" @click="htClick(1)">销售</view>
					</view>
				</view>
				<u-line color="#EEEEEE" class="u-line" />
				<view class="row2">
					<view class="top">
						合同总量
					</view>
					<view class="bottom">
						<view class="left">
							<image src="../../static/img/report/hetongzongliang.png" mode=""></image>
						</view>
						<view class="right" v-if="contractSelect=='0'">
							<view class="top">
								<view class="left">
									已完成量
									<view class="number">{{dataObj3.percentage}}</view>
								</view>
								<view class="right-number">{{dataObj3.total}}吨</view>
							</view>
							<view class="bottom">
								<u-line-progress height="12" active-color="#22C572" :show-percent="false"
									:striped="true" :percent="dataObj3.percent" :striped-active="true">
								</u-line-progress>
							</view>
						</view>
						<view class="right" v-if="contractSelect=='1'">
							<view class="top">
								<view class="left">
									已完成量
									<view class="number">{{dataObj0.percentage}}</view>
								</view>
								<view class="right-number">{{dataObj0.total}}吨</view>
							</view>
							<view class="bottom">
								<u-line-progress height="12" active-color="#22C572" :show-percent="false"
									:striped="true" :percent="dataObj0.percent" :striped-active="true">
								</u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<view class="row3">
					<view class="top">
						合同总额
					</view>
					<view class="bottom">
						<view class="left">
							<image src="../../static/img/report/kaipiao.png" mode=""></image>
						</view>
						<view class="right" v-if="contractSelect=='0'">
							<view class="top">
								<view class="left">
									已开票
									<view class="number">{{dataObj4.percentage}}</view>
								</view>
								<view class="right-number">￥{{dataObj4.total}}</view>
							</view>
							<view class="bottom">
								<u-line-progress height="12" active-color="#FD714F" :show-percent="false"
									:striped="true" :percent="dataObj4.percent" :striped-active="true">
								</u-line-progress>
							</view>
						</view>
						<view class="right" v-if="contractSelect=='1'">
							<view class="top">
								<view class="left">
									已开票
									<view class="number">{{dataObj1.percentage}}</view>
								</view>
								<view class="right-number">￥{{dataObj1.total}}</view>
							</view>
							<view class="bottom">
								<u-line-progress height="12" active-color="#FD714F" :show-percent="false"
									:striped="true" :percent="dataObj1.percent" :striped-active="true">
								</u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<view class="row4">
					<view class="top">
						合同总额
					</view>
					<view class="bottom">
						<view class="left">
							<image src="../../static/img/report/hetongzongliang.png" mode=""></image>
						</view>
						<view class="right" v-if="contractSelect=='0'">
							<view class="top">
								<view class="left">
									已结算
									<view class="number">{{dataObj5.percentage}}</view>
								</view>
								<view class="right-number">￥{{dataObj5.total}}</view>
							</view>
							<view class="bottom">
								<u-line-progress height="12" active-color="#5C75DF" :show-percent="false"
									:striped="true" :percent="dataObj5.percent" :striped-active="true">
								</u-line-progress>
							</view>
						</view>
						<view class="right" v-if="contractSelect=='1'">
							<view class="top">
								<view class="left">
									已结算
									<view class="number">{{dataObj2.percentage}}</view>
								</view>
								<view class="right-number">￥{{dataObj5.total}}</view>
							</view>
							<view class="bottom">
								<u-line-progress height="12" active-color="#5C75DF" :show-percent="false"
									:striped="true" :percent="dataObj5.percent" :striped-active="true">
								</u-line-progress>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="content3 content-wrap">
				<view class="title">粮食品种占比</view>
				<u-line color="#EEEEEE" class="u-line" />
				<qiun-data-charts type="line" class='line-chart' :chartData="chartData" :opts='zringoptions'
					background="none" :ontouch="true" />
			</view>
			<view class="content4 content-wrap">
				<view class="title">在途信息统计表</view>
				<u-line color="#EEEEEE" class="u-line" />
				<qiun-data-charts type="column" class='line-chart' :chartData="carChartData" :opts='ringoptions'
					background="none" />
			</view>
			<view class="content5 content-wrap">
				<view class="title">库存成本</view>
				<u-line color="#EEEEEE" class="u-line" />
				<view class="row1">
					<view class="left">
						<image src="../../static/img/report/kuncunliang.png" mode=""></image>
						<view class="text">
							总库存量（吨）
						</view>
					</view>
					<view class="right">
						{{inventoryCost}}
					</view>
				</view>
				<view class="row2">
					<view class="left">
						<image src="../../static/img/report/jiazhi.png" mode=""></image>
						<view class="text">
							库存价值（元）
						</view>
					</view>
					<view class="right">
						{{inventoryValue}}
					</view>
				</view>
			</view>
			<view class="content6 content-wrap">
				<view class="title">库点流向分布</view>
				<u-line color="#EEEEEE" class="u-line" />
				<iframe class='map' :src='url'></iframe>
			</view>

			<view class="content7">
				<maoScroll :data="ztList" :showNum="showNum" :lineHeight="lineHeight" :animationScroll="animationScroll" :animation="animation">
					<template v-slot="{line}">
						<view class="row1">
							<view class="zt">
							<view class="point"></view>在途
							</view>
							<view>{{line.startName}}</view>
							<img src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jiantou.png" alt="">
							<view class="">
								{{line.endName}}
							</view>
						</view>
					</template>
				</maoScroll>
				<!-- <view class="row1" v-for="(item,index) in ztList">
					<view class="zt">
						<view class="point"></view>在途
					</view>
					<view>{{item.startName}}</view>
					<img src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jiantou.png" alt="">
					<view class="">
						{{item.endName}}
					</view>
				</view> -->
			</view>
		</view>

		<u-select v-model="showDate" mode="mutil-column" confirm-color='#22C572' :list="dateList" @confirm="confirm">
		</u-select>
	</view>
</template>

<script>
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	export default {
		components:{
			maoScroll
		},
		data() {
			return {
				inventoryCost: '',
				inventoryValue: '',
				contractSelect: '0',
				url: '',
				nowDate: '2021年全年',
				background: {
					backgroundColor: '#2E303A',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				typeSelect: '0',
				contractSelect: '0',
				showDate: false,
				chartData: {},
				carChartData: {},
				carRingoptions: {},
				ringoptions: {},
				zringoptions: {},
				moneyList: [{
					name: '收入'
				}, {
					name: '支出'
				}, {
					name: '毛利润'
				}],
				dataList: [],
				dataObj0: {
					percentage: '',
					total: '',
					percentage: ''
				},
				dataObj1: {
					percentage: '',
					total: '',
					percentage: ''
				},
				dataObj2: {
					percentage: '',
					total: '',
					percentage: ''
				},
				dataObj3: {
					percentage: '',
					total: '',
					percentage: ''
				},
				dataObj4: {
					percentage: '',
					total: '',
					percentage: ''
				},
				dataObj5: {
					percentage: '',
					total: '',
					percentage: ''
				},
				dateList: [
					[{
							value: '1',
							label: '2020年'
						},
						{
							value: '2',
							label: '2021年'
						}
					],
					[{
							value: '0',
							label: '全年'
						},
						{
							value: '1',
							label: '1月'
						},
						{
							value: '2',
							label: '2月'
						},
						{
							value: '3',
							label: '3月'
						},
						{
							value: '4',
							label: '4月'
						},
						{
							value: '5',
							label: '5月'
						},
						{
							value: '6',
							label: '6月'
						},
						{
							value: '7',
							label: '7月'
						},
						{
							value: '8',
							label: '8月'
						},
						{
							value: '9',
							label: '9月'
						},
						{
							value: '10',
							label: '10月'
						},
						{
							value: '11',
							label: '11月'
						},
						{
							value: '12',
							label: '12月'
						},
					]
				],
				ztList: [],
				//向上滚动
				showNum: 8,
				lineHeight: 80,
				animationScroll: 5000,
				animation: 0,
			}
		},
		onLoad: function(option) {
			uni.showLoading({
				title:"数据加载中...",
				mask:true
			})
			this.url = "https://liangxin.zthymaoyi.com/map.html?id=" + uni.getStorageSync('pcUserInfo').compId
			this.init()
		},
		methods: {
			init() {
				this.$api.doRequest('get', '/biInfoController/selectBiInfo?compId=' + uni.getStorageSync('pcUserInfo')
					.compId).then(res => {
					console.log(res)
					uni.hideLoading()
					let _list = []
					this.dataList = res.data.data
					for (let i = 0; i < res.data.data.length; i++) {
						let _obj = {}
						let _color = []
						let _title = ""
						let _subtitle = ''
						let _name = ''
						let _count = ''
						let _data = []
						if (i < 6) {
							res.data.data[i].biViewInfoList[0].percent = Number(res.data.data[i].biViewInfoList[0]
								.percentage.substring(0, res.data.data[i].biViewInfoList[0].percentage.length -
									1))

							switch (i) {
								case 0:
									this.dataObj0 = {
										percentage: res.data.data[i].biViewInfoList[0].percentage,
										total: Number(res.data.data[i].total),
										percent: Number(res.data.data[i].biViewInfoList[0].percent)
									}
									break;
								case 1:
									this.dataObj1 = {
										percentage: res.data.data[i].biViewInfoList[0].percentage,
										total: Number(res.data.data[i].total),
										percent: Number(res.data.data[i].biViewInfoList[0].percent)
									}
									break;
								case 2:
									this.dataObj2 = {
										percentage: res.data.data[i].biViewInfoList[0].percentage,
										total: Number(res.data.data[i].total),
										percent: Number(res.data.data[i].biViewInfoList[0].percent)
									}
									break;
								case 3:
									this.dataObj3 = {
										percentage: res.data.data[i].biViewInfoList[0].percentage,
										total: Number(res.data.data[i].total),
										percent: Number(res.data.data[i].biViewInfoList[0].percent)
									}
									break;
								case 4:
									this.dataObj4 = {
										percentage: res.data.data[i].biViewInfoList[0].percentage,
										total: Number(res.data.data[i].total),
										percent: Number(res.data.data[i].biViewInfoList[0].percent)
									}
									break;
								case 5:
									this.dataObj5 = {
										percentage: res.data.data[i].biViewInfoList[0].percentage,
										total: Number(res.data.data[i].total),
										percent: Number(res.data.data[i].biViewInfoList[0].percent)
									}
									break;
							}
						} else if (i == 6) {
							this.carCount1 = res.data.data[i].biViewInfoList[0].count
							this.carCount2 = res.data.data[i].biViewInfoList[1].count
							this.carCount3 = res.data.data[i].biViewInfoList[2].count

							let _x = []
							let _y = []
							for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
								_x.push(res.data.data[i].biViewInfoList[k].name)
								_y.push(Number(res.data.data[i].biViewInfoList[k].count))
							}
							this.carChartData = {
								categories: _x,
								series: [{
									"name": '车辆',
									"data": _y
								}]
							}
							this.ringoptions = {
								"type": "column",
								"canvasId": "",
								"canvas2d": false,
								"background": "none",
								"animation": true,
								"timing": "easeOut",
								"duration": 1000,
								"color": [
									"#22C572"
								],
								"padding": [
									15,
									15,
									0,
									5
								],
								"rotate": false,
								"errorReload": true,
								"fontSize": 13,
								"fontColor": "#666666",
								"enableScroll": false,
								"touchMoveLimit": 60,
								"enableMarkLine": false,
								"dataLabel": true,
								"dataPointShape": true,
								"dataPointShapeType": "solid",
								"tapLegend": true,
								"xAxis": {
									"disabled": false,
									"axisLine": false,
									"axisLineColor": "#CCCCCC",
									"calibration": false,
									"fontColor": "#666666",
									"fontSize": 13,
									"rotateLabel": false,
									"itemCount": 5,
									"boundaryGap": "center",
									"disableGrid": true,
									"gridColor": "#CCCCCC",
									"gridType": "solid",
									"dashLength": 4,
									"gridEval": 1,
									"scrollShow": false,
									"scrollAlign": "left",
									"scrollColor": "#A6A6A6",
									"scrollBackgroundColor": "#EFEBEF",
									"format": ""
								},
								"yAxis": {
									"disabled": true,
									"disableGrid": true,
									"splitNumber": 5,
									"gridType": "solid",
									"dashLength": 8,
									"gridColor": "#CCCCCC",
									"padding": 10,
									"showTitle": false,
									"data": []
								},
								"legend": {
									"show": false,
									"position": "bottom",
									"float": "center",
									"padding": 5,
									"margin": 5,
									"backgroundColor": "rgba(0,0,0,0)",
									"borderColor": "rgba(0,0,0,0)",
									"borderWidth": 0,
									"fontSize": 13,
									"fontColor": "#666666",
									"lineHeight": 11,
									"hiddenColor": "#CECECE",
									"itemGap": 10
								},
								"extra": {
									"column": {
										"type": "group",
										"width": 30,
										"seriesGap": 2,
										"categoryGap": 3,
										"barBorderCircle": true,
										"linearType": "none",
										"linearOpacity": 1,
										"colorStop": 0,
										"meterBorder": 1,
										"meterFillColor": "#FFFFFF",
										"activeBgColor": "#000000",
										"activeBgOpacity": 0.08,
										"meterBorde": 1
									},
									"tooltip": {
										"showBox": true,
										"showArrow": true,
										"showCategory": false,
										"borderWidth": 0,
										"borderRadius": 0,
										"borderColor": "#000000",
										"borderOpacity": 0.7,
										"bgColor": "#000000",
										"bgOpacity": 0.7,
										"gridType": "solid",
										"dashLength": 4,
										"gridColor": "#CCCCCC",
										"fontColor": "#FFFFFF",
										"splitLine": true,
										"horizentalLine": false,
										"xAxisLabel": false,
										"yAxisLabel": false,
										"labelBgColor": "#FFFFFF",
										"labelBgOpacity": 0.7,
										"labelFontColor": "#666666"
									},
									"markLine": {
										"type": "solid",
										"dashLength": 4,
										"data": []
									}
								}
							}

						} else if (i == 7) {
							this.inventoryCost = Number(res.data.data[i].biViewInfoList[0].count)
							this.inventoryValue = Number(res.data.data[i].biViewInfoList[1].count)

						} else if (i == 8) {
							let _x = []
							let _y = []
							for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
								_x.push(res.data.data[i].biViewInfoList[k].name)
								_y.push(Number(res.data.data[i].biViewInfoList[k].count))
							}
							this.chartData = {
								categories: _x,
								series: [{
									"name": '储量',
									"data": _y
								}]
							}
							this.zringoptions = {
								"type": "line",
								"canvasId": "",
								"canvas2d": false,
								"background": "none",
								"animation": true,
								"timing": "easeOut",
								"duration": 1000,
								"color": [
									"#91CB74",
								],
								"padding": [
									15,
									10,
									0,
									15
								],
								"rotate": false,
								"errorReload": true,
								"fontSize": 13,
								"fontColor": "#666666",
								"enableScroll": true,
								"touchMoveLimit": 60,
								"enableMarkLine": true,
								"dataLabel": true,
								"dataPointShape": true,
								"dataPointShapeType": "hollow",
								"tapLegend": true,
								"xAxis": {
									"disabled": false,
									"axisLine": false,
									"axisLineColor": "#CCCCCC",
									"calibration": false,
									"fontColor": "#666666",
									"fontSize": 13,
									"rotateLabel": false,
									"itemCount": 4,
									"boundaryGap": "center",
									"disableGrid": false,
									"gridColor": "#CCCCCC",
									"gridType": "dash",
									"dashLength": 4,
									"gridEval": 1,
									"scrollShow": false,
									"scrollAlign": "left",
									"scrollColor": "#A6A6A6",
									"scrollBackgroundColor": "#EFEBEF",
									"format": ""
								},
								"yAxis": {
									"disabled": true,
									"disableGrid": true,
									"splitNumber": 5,
									"gridType": "dash",
									"dashLength": 2,
									"gridColor": "#CCCCCC",
									"padding": 10,
									"showTitle": false,
									"data": []
								},
								"legend": {
									"show": false,
									"position": "bottom",
									"float": "center",
									"padding": 5,
									"margin": 5,
									"backgroundColor": "rgba(0,0,0,0)",
									"borderColor": "rgba(0,0,0,0)",
									"borderWidth": 0,
									"fontSize": 13,
									"fontColor": "#666666",
									"lineHeight": 11,
									"hiddenColor": "#CECECE",
									"itemGap": 10
								},
								"extra": {
									"line": {
										"type": "straight",
										"width": 2
									},
									"tooltip": {
										"showBox": true,
										"showArrow": true,
										"showCategory": false,
										"borderWidth": 0,
										"borderRadius": 0,
										"borderColor": "#000000",
										"borderOpacity": 0.7,
										"bgColor": "#000000",
										"bgOpacity": 0.7,
										"gridType": "dash",
										"dashLength": 4,
										"gridColor": "#22C572",
										"fontColor": "#FFFFFF",
										"splitLine": true,
										"horizentalLine": false,
										"xAxisLabel": false,
										"yAxisLabel": false,
										"labelBgColor": "#FFFFFF",
										"labelBgOpacity": 0.7,
										"labelFontColor": "#666666"
									},
									"markLine": {
										"type": "solid",
										"dashLength": 4,
										"data": []
									}
								}
							}

						} else if (i == 9) {
							for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
								var obj = res.data.data[i].biViewInfoList[k]
								obj.startName = obj.name.split('→')[0].substring(0, 5) + '...'
								obj.endName = obj.name.split('→')[1]
							}
							this.ztList = res.data.data[i].biViewInfoList
							// this.prizeScroll();
						}
					}
					this.chartlist = _list
					uni.hideLoading()
				})
			},
			getHeight(Class) {
				let query = uni.createSelectorQuery().in(this);
				query
					.selectAll(Class)
					.boundingClientRect(data => {
						this.height = data[0].height;
					})
					.exec();
			},
			prizeScroll() {
				let speed = 50;
				let animation = uni.createAnimation({
					duration: this.getHeight('.content7') / speed,
					timingFunction: 'linear',
					delay: 0
				});
				// this.animation = animation;
				setInterval(() => {
					if (this.scrollHeight >= this.height) {
						animation.translateY(0).step();
						this.scrollHeight = 0;
						this.animationData = animation.export();
					} else {
						this.scrollHeight = this.scrollHeight + 1;
						animation.translateY(-this.scrollHeight).step();
						this.animationData = animation.export();
					}
				}, speed);
			},
			confirm(e) {
				console.log(e)
			},
			dateClick() {
				this.showDate = true
			},
			typeClick(index) {
				this.typeSelect = index

				console.log(index)
			},
			htClick(index) {
				// this.itemSelect = index
				this.contractSelect = index
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-size: 32rpx;
		font-weight: 400;
		color: #343434;
	}

	.content-wrap {
		background: white;
		margin: 0 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.u-line {
		margin: 20rpx 0 !important;
	}

	.line-chart {
		height: 200px;
	}

	.content1 {
		background: #2E303A;
		padding: 0 20rpx 180rpx 20rpx;

		.row2 {
			display: flex;
			justify-content: space-between;
			color: white;
			font-size: 32rpx;
			align-items: center;
			color: #FFFFFF;

			.icon {
				margin: 0 10rpx;
			}

			.right {
				display: flex;
				font-size: 26rpx;

				.type-style {
					margin-left: 38rpx;
					padding: 6rpx 16rpx;
					border-radius: 10rpx;
					color: #A6A6A6;
				}

				.type-bgc {
					background: rgba(255, 255, 255, 0.3);
					color: white;
				}
			}
		}

		.row3 {
			.title {
				font-size: 26rpx;
				font-weight: 400;
				color: #C5C5C5;
				margin: 35rpx 0 20rpx 0;
			}

			.number {
				font-size: 32rpx;
				font-weight: 400;
				color: #E2C4A1;
			}
		}
	}

	.move-content {
		position: relative;
		top: -136rpx;
	}

	.content2 {
		.row1 {
			display: flex;
			justify-content: space-between;

			.left {}

			.right {
				display: flex;

				.item {
					background: #F1F1F1;
					border-radius: 30px;
					margin-left: 20rpx;
					font-size: 2rpx;
					color: #333333;
					padding: 13rpx 27rpx;
				}

				.item-Select {
					background-color: black;
					color: white;
				}
			}
		}

		.row2,
		.row3,
		.row4 {
			.top {
				font-size: 26rpx;
				color: #929292;
				margin: 0;
			}

			.bottom {
				display: flex;
				align-items: center;
				margin: 10rpx;

				.left {
					margin-left: 20rpx;

					image {
						width: 45rpx;
						height: 45rpx;
					}
				}

				.right {
					width: 100%;
					padding-left: 20rpx;

					.top {
						display: flex;
						justify-content: space-between;
						width: 100%;
						margin-top: 10px;

						.left,
						.right-number {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: #343434;

							.number {
								font-size: 26rpx;
								font-weight: 400;
								color: #929292;
								margin-left: 10rpx;
							}
						}
					}

					.bottom {
						margin: 30rpx 0 30rpx 20rpx;
					}
				}
			}
		}
	}

	.content3,
	.content4,
	.content5,
	.content6 {
		margin-top: 20rpx;
	}

	.content5 {

		.row1,
		.row2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 40rpx 0;

			.left {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					font-weight: 400;
					color: #707575;
					margin-left: 20rpx;
				}
			}

			.right {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
			}

			image {
				width: 54rpx;
				height: 54rpx;
			}
		}
	}

	.content6 {
		.map {
			border: 0;
			width: 100%;
			height: 500rpx;
		}
	}

	.content7 {
		position: relative;

		.row1 {
			background: #FAFAFA;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			padding: 20rpx;
			color: #707575;

			.point {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				background: #22C572;
				margin-right: 10px;
			}

			.zt {
				display: flex;
				align-items: center;
			}
		}
	}
</style>