yiliangyiyun-app/pages/user/report.vue

<template>
	<view class="content">
		<view class="title">库点流向分布</view>
		<iframe id="mainIframe" ref="mainIframe" name="mainIframe" :src="url" class="map"></iframe>
		<view class="charts-box" v-for="(item,index) in chartlist" :key='index'>
			<div class="bottom-tip" v-if='index==0||index==3'>统计单位：吨</div>
			<div class="bottom-tip" v-if='index!=0&&index!=3' :class='index==2?"title-margin":""'>统计单位：元</div>
			<view v-if="index==0" class="title">采购合同完成进度</view>
			<qiun-data-charts type="ring" :opts='item.ringoptions' :chartData="item.Ring" background="#24262D" />
			<view v-if="index==2" class="title">销售合同完成进度</view>
		</view>
		<view class="content2">
			<view class="title">在途信息统计</view>
			<view class="row">
				<view class="item">
					<view class="item-top">在途车辆</view>
					<view class="item-bottom">
						<view style="color: #50cad4;font-size: 50rpx;">{{carCount1}} </view>台
					</view>
				</view>
				<view class="item">
					<view class="item-top">装车车辆</view>
					<view class="item-bottom">
						<view style="color: rgb(255, 165, 35);font-size: 50rpx;">{{carCount2}}</view>台
					</view>
				</view>
				<view class="item">
					<view class="item-top">卸货车辆</view>
					<view class="item-bottom">
						<view style="color: rgb(36, 131, 255);font-size: 50rpx;">{{carCount3}}</view>台
					</view>
				</view>
			</view>
		</view>
		<view class="content3">
			<view class="title">粮食总储量</view>
			<qiun-data-charts type="column" :chartData="chartData" :opts='ringoptions' background="none" />
		</view>
		<view class="content4">
			<view class="title">库存成本</view>
			<view class="row">
				<view class="item">
					<view class="item-top">总库存量</view>
					<view class="item-bottom">
						<view style="color: #50cad4;font-size: 50rpx;">{{inventoryCost}}</view>吨
					</view>
				</view>
				<view class="item">
					<view class="item-top">库存价值</view>
					<view class="item-bottom">
						<view style="color: rgb(255, 165, 35);font-size: 50rpx;">{{inventoryValue}}</view>元
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartlist: [],
				carCount1: '',
				carCount2: '',
				carCount3: '',
				inventoryCost: '',
				inventoryValue: '',
				ZChart: {},
				// url:"https://datav.aliyuncs.com/share/235518097ffd673bc1eb05011b9a02b6",
				url: 'http://192.168.1.116:8011',
				flag: true,
				chartData: {},
				ringoptions: {},
			}
		},
		onLoad: function(option) {
			uni.showLoading({
				title: "加载中",
				mask: true
			})
			if (option.url) {
				this.url = option.url;
				uni.setNavigationBarTitle({
					title: "库点监控"
				})
				this.flag = false
			}
			this.init()
		},
		methods: {
			init() {
				this.$api.doRequest('get', '/biInfoController/selectBiInfo').then(res => {
					console.log(res)
					uni.hideLoading()
					let _list = []
					for (let i = 0; i < res.data.data.length; i++) {
						let _obj = {}
						let _color = []
						let _title = ""
						let _subtitle = ''
						let _name = ''
						let _count = ''
						let _data = []
						switch (i) {
							case 0:
								_color = ['#75d1f4', '#3a3b40'];
								_title = '总量合计'
								_data = [{
									name: '已完成量',
									data: Number(res.data.data[i].biViewInfoList[0].count)
								}, {
									name: '待完成量',
									data: Number(res.data.data[i].biViewInfoList[1].count)
								}]
								break;
							case 1:
								_color = ['#247ef4', '#3a3b40'];
								_title = '开票合计'
								_data = [{
									name: '已开票',
									data: Number(res.data.data[i].biViewInfoList[0].count)
								}, {
									name: '待开票',
									data: Number(res.data.data[i].biViewInfoList[1].count)
								}]
								break;
							case 2:
								_color = ['#f49f23', '#3a3b40'];
								_title = '付款合计'
								_data = [{
									name: '已付款',
									data: Number(res.data.data[i].biViewInfoList[0].count)
								}, {
									name: '待付款',
									data: Number(res.data.data[i].biViewInfoList[1].count)
								}]
								break;
							case 3:
								_color = ['#75d1f4', '#3a3b40'];
								_title = '总量合计'
								_data = [{
									name: '已完成量',
									data: Number(res.data.data[i].biViewInfoList[0].count)
								}, {
									name: '待完成量',
									data: Number(res.data.data[i].biViewInfoList[1].count)
								}]
								break;
							case 4:
								_color = ['#247ef4', '#3a3b40'];
								_title = '开票合计'
								_data = [{
									name: '已开票',
									data: Number(res.data.data[i].biViewInfoList[0].count)
								}, {
									name: '待开票',
									data: Number(res.data.data[i].biViewInfoList[1].count)
								}]
								break;
							case 5:
								_color = ['#f49f23', '#3a3b40'];
								_title = '付款合计'
								_data = [{
									name: '待付款',
									data: Number(res.data.data[i].biViewInfoList[0].count)
								}, {
									name: '待完成量',
									data: Number(res.data.data[i].biViewInfoList[1].count)
								}]
								break;
						}

						if (i < 6) {
							_subtitle = Number(res.data.data[i].total)
							_obj.ringoptions = {
									"type": "ring",
									"animation": true,
									"timing": "easeOut",
									"duration": 1000,
									"color": _color,
									"fontSize": 13,
									"fontColor": "#666666",
									"legend": {
										"show": true,
										"position": "top",
										"padding": 5,
										"margin": 5,
										"backgroundColor": "rgba(0,0,0,0)",
										"borderColor": "rgba(0,0,0,0)",
										"fontSize": 13,
										"fontColor": "#CECECE",
										"hiddenColor": "#CECECE",
									},
									"title": {
										"name": _title,
										"fontSize": 15,
										"color": "#fff",
									},
									"subtitle": {
										"name": _subtitle,
										"fontSize": 25,
										"color": "#fff",
									},
									"extra": {
										"ring": {
											"ringWidth": 15,
											"centerColor": "#24262D",
											"activeOpacity": 0.5,
											"activeRadius": 10,
											"borderColor": "#24262D",
											"linearType": "none"
										},
									}
								},
								_obj.Ring = {
									"series": _data
								}

							_list.push(_obj)
						} 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
						} else if (i == 7) {
							this.inventoryCost = res.data.data[i].biViewInfoList[0].count
							this.inventoryValue = 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(res.data.data[i].biViewInfoList[k].count)
							}
							this.chartData = {
								categories: _x,
								series: [{
									"name": '储量',
									"data": _y
								}]
							}
							this.ringoptions = {
								"type": "column",
								"canvasId": "",
								"canvas2d": false,
								"background": "none",
								"animation": true,
								"timing": "easeOut",
								"duration": 1000,
								"color": [
									"#1890FF",
									"#91CB74",
									"#FAC858",
									"#EE6666",
									"#73C0DE",
									"#3CA272",
									"#FC8452",
									"#9A60B4",
									"#ea7ccc"
								],
								"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": true,
									"axisLineColor": "#CCCCCC",
							 	"calibration": false,
									"fontColor": "#666666",
									"fontSize": 13,
									"itemCount": 5,
									"boundaryGap": "center",
									"disableGrid": true,
									"gridColor": "#CCCCCC",
									"gridType": "solid",
									"dashLength": 4,
									"gridEval": 1,
									"scrollShow": false,
									"scrollAlign": "left",
									"scrollColor": "#A6A6A6",
									"scrollBackgroundColor": "#EFEBEF",
									"rotateLabel": true,
								},
								"yAxis": {
									"disabled": false,
									"disableGrid": false,
									"splitNumber": 5,
									"gridType": "solid",
									"dashLength": 8,
							  "gridColor": "#CCCCCC",
									"padding": 10,
									"showTitle": false,
									"data": [{
										"type": "value",
										"position": "left",
							  	"disabled": false,
										"axisLine": false,
										"axisLineColor": "#CCCCCC",
										"calibration": false,
										"fontColor": "#666666",
										"fontSize": 13,
										"textAlign": "right",
										"titleFontSize": 13,
										"titleFontColor": "#666666",
									}]
								},
								"extra": {
									"column": {
										"type": "group",
										"width": 30,
										"seriesGap": 2,
										"categoryGap": 3,
										"barBorderCircle": false,
							   "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"
									}
								}
							}
						} else if (i == 9) {
							document.getElementById('mainIframe').contentWindow.postMessage(res.data.data[i], '*')

						}
					}
					this.chartlist = _list

				})
			},
			getdata(e) {
				console.log(e)
			}
		}
	}
</script>



<style scoped lang="scss">
	.map {
		top: 90rpx;
		height: 60vh;
		width: 100%;
		border: 0;
	}

	.title {
		background: black;
		color: white;
		text-align: center;
		font-size: 1.25rem;
		padding: 0.625rem;
	}

	.content {
		background: black;
		padding-bottom: 100rpx;
	}

	.charts-box {
		// background: black;
		position: relative;
		// top: 70vh;
	}

	.content2 .row,
	.content4 .row {
		display: flex;
		justify-content: space-around;
		background: #24262d;
		padding: 40rpx 20rpx;

		.item-top,
		.item-bottom {
			color: #d5d5d5;
		}

		.item-bottom {
			display: flex;
			align-items: center;
		}
	}

	.bottom-tip {
		position: absolute;
		z-index: 11;
		color: #8c8c8d;
		right: 10px;
		bottom: 10px;
	}

	.title-margin {
		bottom: 120rpx;
	}
</style>