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="left">
					<div :class="btnIndex==1?'activeBtn':''" @click="selectData(1)" class="type-style">新季</div>
					<div :class="btnIndex==2?'activeBtn':''" @click="selectData(2)" class="type-style">历史</div>  
				</view> -->
				<view class="right">
					<div :class="btnIndex==1?'activeBtn':''" @click="selectData(1)" class="btn-style">新季</div>
					<div :class="btnIndex==2?'activeBtn':''" @click="selectData(2)" class="btn-style">历史</div>  
					
					<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">
					{{moneyList[typeSelect].name}}
				</view>
				<view class="number">
					{{moneyList[typeSelect].count}}元
				</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" @click="goToPage(1)">
					<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" @click="goToPage(2)">
					<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" @click="goToPage(3)">
					<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">￥{{dataObj2.total}}</view>
							</view>
							<view class="bottom">
								<u-line-progress height="12" active-color="#5C75DF" :show-percent="false"
									:striped="true" :percent="dataObj2.percent" :striped-active="true">
								</u-line-progress>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content5 content-wrap" @click="goToPage(5)">
				<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">
						{{inventoryAct}}
					</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">
						{{inventoryBuy}}
					</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">
						{{inventorySale}}
					</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">
						{{inventoryTC}}
					</view>
				</view>
			</view>
			<view class="content3 content-wrap">
				<view class="title" @click="goToPage(4)">粮食品种占比</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="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> -->
			<!-- <view class="content7">
				<view ref='scroll' class='scroll' :style="{'top':'-'+scrollTop+'px'}">
					<view class="row1" v-for="(item,index) in ztList">
						<view class="zt">
							<view class="point"></view>在途
						</view>
						<view>{{item.startName}}</view>
						→
						<view class="">
							{{item.endName}}
						</view>
					</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 {
				btnIndex:1,
				scrollTop: 0,
				carInterval: null,
				inventoryAct: 0,
				inventoryBuy: 0,
				inventorySale: 0,
				inventoryTC: 0,
				contractSelect: '0',
				url: '',
				nowDate: '2022年1月',
				seachMoth: '2022',
				background: {
					backgroundColor: '#2E303A',
				},
				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: '2',
						label: '2022年'
					}],
					[{
							value: '01',
							label: '1月'
						},
						{
							value: '02',
							label: '2月'
						},
						{
							value: '03',
							label: '3月'
						},
						{
							value: '04',
							label: '4月'
						},
						{
							value: '05',
							label: '5月'
						},
						{
							value: '06',
							label: '6月'
						},
						{
							value: '07',
							label: '7月'
						},
						{
							value: '08',
							label: '8月'
						},
						{
							value: '09',
							label: '9月'
						},
						{
							value: '10',
							label: '10月'
						},
						{
							value: '11',
							label: '11月'
						},
						{
							value: '12',
							label: '12月'
						},
						{
							value: '0',
							label: '全年'
						},
					]
				],
				ztList: [],
				showNum: 8,
				lineHeight: 80,
				animationScroll: 5000,
				animation: 0,
			}
		},
		onLoad: function(option) {
			// uni.showLoading({
			// 	title: "数据加载中...",
			// 	mask: true
			// })
			// if (this.nowDate == '2022年1月') {
			// 	this.seachMoth = '2022-10-10'  
			// }
			this.seachMoth = '2022-10-10'  
			this.init()
		},
		destroyed() {
			clearInterval(this.carInterval)
		},
		onUnload() {
			clearInterval(this.carInterval)
		},
		methods: {
			 selectData(type){
			      this.seachMoth = ''
			      this.btnIndex = type
			      if(type==2){
			        this.seachMoth = '2021-10-10'  
			      }else{
			        this.seachMoth = '2022-10-10'  
			      }
			      this.init()
			},
			goToPage(index) {
				// console.log(index)
				if (index == 4) {
					uni.navigateTo({
						url: '/pages/user/contractLook/warehouseReserves'
					})
					return true
				} else if (index == 5) {
					uni.navigateTo({
						url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
					})
					return true
				}
				if (this.contractSelect == '0') {
					uni.navigateTo({
						url: '/pages/user/contractLook/purchaseContract'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/contractLook/salesContract'
					})
				}
			},
			init() {
				this.url = "https://liangxin.zthymaoyi.com/map_0105.html?id=" + uni.getStorageSync('pcUserInfo').compId +
					'&seachMoth=' + this.seachMoth
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.$api.doRequest('get', '/biInfoController//selectBiInfoNew?compId=' + uni.getStorageSync('pcUserInfo')
					.compId + '&seachMoth=' + this.seachMoth).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 = []
						let _x = []
						let _y = []
						if (i < 6) {
							if (res.data.data[i].biViewInfoList[0].percentage) {
								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)).toFixed(2)
								res.data.data[i].biViewInfoList[0].percentage = Number(res.data.data[i]
									.biViewInfoList[
										0]
									.percentage.substring(0, res.data.data[i].biViewInfoList[0].percentage
										.length -
										1)).toFixed(2) + '%'

							}
							res.data.data[i].total = Number(res.data.data[i].total).toFixed(2)
							switch (i) {
								case 0:
									// this.dataObj0 = {
									// 	percentage: res.data.data[i].biViewInfoList[0].percentage,
									// 	total: res.data.data[i].total,
									// 	percent: Number(res.data.data[i].biViewInfoList[0].percent)
									// }
									this.carCount1 = res.data.data[i].biViewInfoList[0] ? res.data.data[i]
										.biViewInfoList[0].count : ""
									this.carCount2 = res.data.data[i].biViewInfoList[1] ? res.data.data[i]
										.biViewInfoList[1].count : ""
									this.carCount3 = res.data.data[i].biViewInfoList[2] ? res.data.data[i]
										.biViewInfoList[2].count : ""

									
									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": []
											}
										}
									}
									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)
									// }
									this.inventoryAct = Number(res.data.data[i].biViewInfoList[0].count).toFixed(2)
									this.inventoryBuy = Number(res.data.data[i].biViewInfoList[1].count).toFixed(2)
									this.inventorySale = Number(res.data.data[i].biViewInfoList[2].count).toFixed(2)
									this.inventoryTC = Number(Number(this.inventoryAct) + Number(this.inventoryBuy) -
										Number(this.inventorySale)).toFixed(2)
									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)
									// }
									// let _x = []
									// let _y = []
									if (res.data.data[i].biViewInfoList) {
										for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
											if (Number(res.data.data[i].biViewInfoList[k].count).toFixed(2) != 0) {
												_x.push(res.data.data[i].biViewInfoList[k].name)
												_y.push(Number(res.data.data[i].biViewInfoList[k].count).toFixed(2))
											}
										}
									}
									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": []
											}
										}
									}
									
									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 == 10) { //销售已完成
							uni.hideLoading()
							this.dataObj0 = {
								percentage: Number(res.data.data[i].biViewInfoList[0].count).toFixed(2),
								total: Number(res.data.data[i].total).toFixed(2),
								percent: Number(res.data.data[i].biViewInfoList[0].percentage)
							}
							
						}else if (i == 11) { //销售已开票
							uni.hideLoading()
							this.dataObj1 = {
								percentage: Number(res.data.data[i].biViewInfoList[0].count).toFixed(2),
								total: Number(res.data.data[i].total).toFixed(),
								percent:Number(res.data.data[i].biViewInfoList[0].percentage)
							}
							
						}else if (i == 12) { //销售已结算
							uni.hideLoading()
							this.dataObj2 = {
								percentage: Number(res.data.data[i].biViewInfoList[0].count).toFixed(2) ,
								total: Number(res.data.data[i].total).toFixed(2),
								percent: Number(res.data.data[i].biViewInfoList[0].percentage)
							}
						}else if(i == 13){//采购已完成
							uni.hideLoading()
							this.dataObj3 = {
								percentage: Number(res.data.data[i].biViewInfoList[0].count),
								total: Number(res.data.data[i].total).toFixed(2),
								percent: Number(res.data.data[i].biViewInfoList[0].percentage)
							}
						}else if(i == 14){//采购已开票
							uni.hideLoading()
							this.dataObj4 = {
								percentage: Number(res.data.data[i].biViewInfoList[0].count).toFixed(2),
								total: Number(res.data.data[i].total).toFixed(2),
								percent: Number(res.data.data[i].biViewInfoList[0].percentage)
							}
						}else if(i == 15){//采购已结算
							uni.hideLoading()
							this.dataObj5 = {
								percentage: Number(res.data.data[i].biViewInfoList[0].count).toFixed(2) ,
								total: Number(res.data.data[i].total).toFixed(2),
								percent: Number(res.data.data[i].biViewInfoList[0].percentage)
							}
						}else if (i == 16) {
							uni.hideLoading()
							this.moneyList = res.data.data[i].biViewInfoList
							console.log('收入', this.moneyList)
						} 
						this.$forceUpdate()
					}
					this.chartlist = _list
					// this.scroll()
					uni.hideLoading()
				})
			},
			scroll() {
				let that = this
				let _outHeight = ''
				let _inHeight = ''
				let obj = uni.createSelectorQuery().select('.content7')
				obj.boundingClientRect(function(data) {
					// console.log(data)
					_outHeight = data.height
				}).exec()
				setTimeout(function() {
					let obj1 = uni.createSelectorQuery().select('.scroll')
					obj1.boundingClientRect(function(data) {
						console.log(data)
						_inHeight = data.height
					}).exec()
					that.carInterval = setInterval(() => {
						console.log('···················')
						console.log("_scroll", that.scrollTop)
						console.log('_inHeight', _inHeight)
						console.log('_outHeight', _outHeight)
						if (that.scrollTop < _inHeight - _outHeight) {
							that.scrollTop++
							// console.log(that.$refs)
							// that.$refs.scroll.$el.style.top = '-' + _scroll + 'px'
						} else {
							that.scrollTop = 0
						}
					}, 100)
				}, 10)
			},
			confirm(e) {
				
				console.log(e)
				this.nowDate = e[0].label + e[1].label
				let _year = e[0].label.substring(0, 4)

				if (e[1].label != '全年') {
					this.seachMoth = _year + '-' + e[1].value
				} else {
					this.seachMoth = _year
				}
				this.init()
			},
			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;
			}
		}
	}
	.btn-style{
		//   width: 70px;
		// height: 28px;
		background: rgba(47,108,233,0.2);
		border-radius: 4px;
		border: 1px solid rgba(0,220,255,0.2);
		padding: 5px 20px;
		box-sizing: border-box;
		// font-size: 16px;
		margin-right: 10px;
		cursor:pointer
	}
	.activeBtn{
	  color:#06DBF1
	}
	.content6 {
		.map {
			border: 0;
			width: 100%;
			height: 500rpx;
		}
	}

	.content7 {
		position: relative;
		overflow: hidden;
		height: 520rpx;
		margin-top: 20rpx;

		.scroll {
			position: absolute;
			width: 100%;
		}

		.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>