yiliangyiyun-app/pages/user/newReport.vue

<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="top-nav">
			<u-icon name="arrow-left" size="38" class="back" @click="back"></u-icon>
			<view class="right" :class="index==2?'nav-active':''" @click="navClick(2)">
				新季
			</view>
			<view class="left" :class="index==1?'nav-active':''" @click="navClick(1)">
				全部
			</view>

		</view>
		<view class="content1 content-item">
			<view class="title">
				收支核算
			</view>
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSHowContent1">
				<u-line color="#EEEEEE" />
				<view class="row1 mtb40">
					<view class="left">
						<view class="">
							{{ym1Change}}
						</view>
						<view class="" style="font-size: 12px; color:#9E9E9E; margin-top: 10rpx;">
							单位：万元
						</view>
					</view>
					<view class="right" v-if="index!=2">
						<text class="text" :class="textIndex==1?'text-active':''" @click="accounting(1)">
							按月
						</text>
						<text class="text" :class="textIndex==2?'text-active':''" @click="accounting(2)">按年</text>
					</view>
				</view>
				<view class="row2" @click='godetail(2)'>
					<view class="text">
						收入(万元)
					</view>
					<view class="price">
						{{sr?Number(sr).toFixed(2):0}}
					</view>
				</view>
				<view class="row3" @click='godetail(2)'>
					<view class="left">
						<view class="text">
							支出(万元)
						</view>
						<view class="number">
							{{zc?Number(zc).toFixed(2):0}}
						</view>
					</view>
					<view class="center">

					</view>
					<view class="right">
						<view class="text">
							差额(万元)
						</view>
						<view class="number">
							{{Number(sr-zc).toFixed(2)}}
						</view>
					</view>
				</view>
				<view class="row5 flex alc">
					<view class="left">
						<text class="point-left flex alc"></text>收入(万元)：<text
							class="text-left">{{Number(sr).toFixed(2)}}</text>
						<!-- <text class="point-left flex alc"></text>收入(万元)：<text class="text-left">2000.00</text> -->
					</view>
					<view class="right">
						<text class="point-right"></text>支出(万元)：<text
							class="text-right">{{Number(zc).toFixed(2)}}</text>
						<!-- <text class="point-left flex alc"></text>收入(万元)：<text class="text-left">2000.00</text> -->
					</view>
				</view>
				<view class="row4">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
						@getIndex="getIndex" />
				</view>
			</uni-transition>
			<view class="zd flex alc" @click="foldClcik('fade',1)">
				{{this.isSHowContent1?'点击收起':'点击展开'}}
				<image v-if="this.isSHowContent1" src="../../static/sq.png" mode="widthFix"
					style="width: 30rpx;margin-left: 10rpx;"></image>
				<image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
				</image>
				<!-- 
				<u-icon :name="iconName1" size="30" style="margin-left: 10rpx;">
				</u-icon> -->
			</view>

		</view>
		<view class="content2 content-item">
			<view class="title">
				合同数据
			</view>
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSHowContent2">
				<u-line color="#EEEEEE" />
				<view class="row1 flex jcsb" style="margin-top: 40rpx;">
					<view class="left title-lv2">
						数量统计
					</view>
					<view @click='godetail(0)' class="right-btn" style="position: relative;z-index: 999;">
						合同明细
					</view>
				</view>
				<!-- 		<view class="row2 flex jcse">
					<view class="left flex alc">
						<view class="color1"></view>
						<text class="text">{{index==1?'过去12个月累计签订数量':'本季累计签订合同数量'}}</text>
					</view>
					<view class="right flex alc">
						<view class="color2"></view>
						<text class="text">{{index==1?'当前执行中数量':'本季执行中数量'}}</text>
					</view>
				</view> -->
				<view class="row3">
					<qiun-data-charts type="bar" :opts="opts2" :chartData="chartData1" />
				</view>
				<view class="row4 flex jcsb mtb40">
					<view class="left title-lv2">
						利润核算
					</view>
					<view @click='godetail(1)' class="right-btn">
						利润明细
					</view>
				</view>
				<view class="row5">
					<view class="left flex">
						<view class="" v-if="index==1">
							<u-icon name="arrow-left" size="26" style="margin-right: 10rpx;" color="#969696"
								@click="yearClick('1')">
							</u-icon>
							<text @click="showYear=true">{{year}}年</text>
							<u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
								:color="nowYear!=year?'#969696':'#DBDBDB'" @click="yearClick('2')" v-if="nowYear!=year">
							</u-icon>
							<u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
								:color="nowYear!=year?'#969696':'#DBDBDB'" v-if="nowYear==year">
							</u-icon>
						</view>
						<view class="" v-else>
							新季利润
						</view>

					</view>
					<view class="right">
						单位：元
					</view>
				</view>
				<view class="row6" v-if="isHaveData3">
					<qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
				</view>
			</uni-transition>
			<view class="zd flex" @click="foldClcik('fade',2)">
				{{this.isSHowContent2?'点击收起':'点击展开'}}
				<image v-if="this.isSHowContent2" src="../../static/sq.png" mode="widthFix"
					style="width: 30rpx;margin-left: 10rpx;"></image>
				<image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
				</image>
			</view>
		</view>
		<view class="content3 content-item">
			<view class="title flex jcsb">
				<view class="">
					仓储数据
				</view>
				<view @click='goToPage(5)' class="right-btn">
					库存明细
				</view>
			</view>
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSHowContent3">
				<u-line color="#EEEEEE" />
				<view class="row1 flex jcsb mtb40">
					<view class="left title-lv2">
						库存储量
					</view>
					<view class="right">
						单位：吨
					</view>
				</view>
				<view class="row2">
					<view class="" v-for="(item,index) in clList">
						<view class="name">
							{{item.name}}
						</view>
						<view class="bottom flex alc jcsb">
							<u-line-progress :percent="item.percent" :active-color="color4(index)" :show-percent='false'
								class='left' height='12'>
							</u-line-progress>
							<view class="weight">
								{{item.weight}}
							</view>
						</view>

					</view>

					<!-- <qiun-data-charts type="bar" :opts="opts4" :chartData="chartData4" :ontouch="true" /> -->
				</view>
				<view class="row3">
					<view class="list-item flex jcsb" v-for="(item,index) in InventoryList">
						<view class="flex alc">
							<image :src="item.src" mode="widthFix" style="width: 40rpx;margin-right: 20rpx;"></image>
							<text style="color:#707575;">{{item.name}}</text>
						</view>
						<view class="number">
							{{item.number}}
						</view>
					</view>
				</view>
				<view class="row5 flex jcsb mtb40">
					<view class="left title-lv2">
						当期货值
					</view>
					<view class="right">
						单位：万元
					</view>
				</view>
				<view class="row6">
					<qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" :ontouch="true" />
				</view>
				<view class="row7">
					<view class="left title-lv2" style="margin: 30rpx;">
						平均成本
					</view>
					<view class="list-item" v-for="item in averageCostList">
						<view class="flex jcsb alc">
							<view class="left" style="color: #7A7A7A;">
								{{item.name}}
							</view>
							<view class="">
								{{Number(item.result).toFixed(0)}}
							</view>
						</view>

					</view>
				</view>
			</uni-transition>
			<view class="zd flex" @click="foldClcik('fade',3)">
				{{this.isSHowContent3?'点击收起':'点击展开'}}
				<image v-if="this.isSHowContent3" src="../../static/sq.png" mode="widthFix"
					style="width: 30rpx;margin-left: 10rpx;"></image>
				<image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
				</image>
			</view>
		</view>
		<view class="content4 content-item">
			<view class="title flex jcsb">
				<view class="">
					今日入库
				</view>
				<view @click='godetail(3)' class="right-btn">
					入库明细
				</view>
			</view>
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSHowContent4">
				<u-line color="#EEEEEE" />
				<view class="" style="color: #9E9E9E;margin: 30rpx 0 0 30rpx; font-size: 12px;">
					单位：吨
				</view>
				<view class="flex alc">
					<view class="" style="width:40%;height: 160px;">
						<qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" class='opts6' />
					</view>
					<view class="zt-right">
						<view class="flex jcsb alc" v-for="item in rkList" style="font-weight: 700;">
							<view class="left">
								<text :style="item.style"></text>{{item.name}}
							</view>
							<view class="right">
								{{Number(item.value).toFixed(2)}}
							</view>
						</view>
					</view>

				</view>
			</uni-transition>
			<view class="zd flex" @click="foldClcik('fade',4)">
				{{this.isSHowContent4?'点击收起':'点击展开'}}
				<image v-if="this.isSHowContent4" src="../../static/sq.png" mode="widthFix"
					style="width: 30rpx;margin-left: 10rpx;"></image>
				<image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
				</image>
			</view>
		</view>
		<view class="content5 content-item">
			<view class="title">
				在途数据
			</view>
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSHowContent5">
				<u-line color="#EEEEEE" />
				<view class="row1 days-nav">
					<view class="item" :class="carIndex==index?'item-active':''" v-for="(item, index) in dayList"
						@click="clickNav(index)">
						{{item}}
					</view>
				</view>
				<view class="flex alc">
					<view class="" style="width:40%;height: 160px;">
						<qiun-data-charts type="ring" :opts="opts7" :chartData="chartData7" />
					</view>
					<view class="zt-right">
						<view class="flex jcsb alc" v-for="item in ztList" style="font-weight: 700;">
							<view class="left">
								<text :style="item.style"></text>{{item.name}}
							</view>
							<view class="right">
								{{item.value}}
							</view>
						</view>
					</view>

				</view>


			</uni-transition>
			<view class="zd flex" @click="foldClcik('fade',5)">
				{{this.isSHowContent5?'点击收起':'点击展开'}}
				<image v-if="this.isSHowContent5" src="../../static/sq.png" mode="widthFix"
					style="width: 30rpx;margin-left: 10rpx;"></image>
				<image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
				</image>
			</view>
		</view>
		<view class="content6 content-item">
			<view class="title">
				用户增长
			</view>
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSHowContent6">
				<u-line color="#EEEEEE" />
				<view class="row1 flex jcsb" style="padding:0 12rpx 0 5rpx;">
					<view class="left">
						app注册
					</view>
					<view class="right">
						<text>合计：</text>
						<text style="color: #EC6666;">{{appTotal}}</text>
						<text>人</text>
					</view>
				</view>
				<view class="row2">
					<qiun-data-charts type="area" :opts="opts8" :chartData="chartData8" />
				</view>

				<view class="row1 flex jcsb" style="margin-top: 90rpx;padding:0 12rpx 0 5rpx;">
					<view class="left">
						粮脉入驻
					</view>
					<view class="right">
						<text>合计：</text>
						<text style="color: #22C572;">{{lmTotal}}</text>
						<text>人</text>
					</view>
				</view>
				<view class="row2">
					<qiun-data-charts type="area" :opts="opts9" :chartData="chartData9" />
				</view>
			</uni-transition>
			<view class="zd flex" @click="foldClcik('fade',6)">
				{{this.isSHowContent6?'点击收起':'点击展开'}}
				<image v-if="this.isSHowContent6" src="../../static/sq.png" mode="widthFix"
					style="width: 30rpx;margin-left: 10rpx;"></image>
				<image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
				</image>
			</view>
		</view>
		<u-picker v-model="showYear" mode="selector" :range="selector" :default-selector="[2]"></u-picker>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				rkList: [],
				ztList: [],
				ztColor: ['#38CA80', '#8D9EE9', '#FFBB6E'],
				color: ['#FFBB6E', '#8D9EE9', '#FF8B95', '#38CA80', '#FFDD85', "#1890FF", "#91CB74", "#FAC858", "#EE6666",
					"#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					"#ea7ccc"
				],
				clList: [],
				isHaveData3: true,
				val: 1000,
				carIndex: 0,
				appTotal: '',
				lmTotal: '',
				ym1: '',
				ym1Change: '',
				sr: '',
				zc: '',
				seachYear: '',
				seachMoth: '2022-10-10',
				dayList: ['1天', '7天', '30天'],
				averageCostList: [{
						name: '玉米',
						number: '2000.00'
					},
					{
						name: '玉米(潮粮)',
						number: '2000.00'
					},
					{
						name: '高粱',
						number: '2000.00'
					},
					{
						name: '高粱(潮粮)',
						number: '2000.00'
					},
					{
						name: '小麦',
						number: '2000.00'
					},
					{
						name: '大豆',
						number: '2000.00'
					},
				],
				InventoryList: [{
						name: '合计储量',
						number: '1000.00',
						src: '../../static/img/cl.png'
					}, {
						name: '采购待执行',
						number: '1000.00',
						src: '../../static/img/cg.png'
					},
					{
						name: '销待执行售',
						number: '1000.00',
						src: '../../static/img/xs.png'
					},
					{
						name: '头寸',
						number: '1000.00',
						src: '../../static/img/tc.png'
					},

				],
				year: 2022,
				selector: [2020, 2021, 2022],
				showYear: false,
				iconName1: 'arrow-up',
				iconName2: 'arrow-up',
				iconName3: 'arrow-up',
				iconName4: 'arrow-up',
				iconName5: 'arrow-up',
				iconName6: 'arrow-up',
				styles: {},
				modeClass: 'fade',
				isSHowContent1: true,
				isSHowContent2: true,
				isSHowContent3: true,
				isSHowContent4: true,
				isSHowContent5: true,
				isSHowContent6: true,
				chartData: {},
				chartData1: {},
				chartData3: {},
				chartData4: {},
				chartData5: {},
				chartData6: {},
				chartData7: {},
				chartData8: {},
				chartData9: {},
				opts: {
					enableScroll: true,
					color: ["#E84A55", "#22C572"],
					padding: [15, 15, 0, 15],
					dataPointShapeType: "hollow",
					legend: {
						show: false

					},
					xAxis: {
						gridType: "dash",
						disableGrid: true,
						itemCount: 6,
					},
					yAxis: {
						// gridType: "dash",
						gridType: 'solid',
						gridColor: "#E9E9E9",
						splitNumber: 5,
						data: [{
							// disabled: true,
							axisLine: false,
							fontColor: "#BEBEBE",
							textAlign: 'right'
						}],

					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.3,
							addLine: true,
							width: 2,
							gradient: true
						},
						tooltip: {
							showBox: false,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "dash",
							dashLength: 4,
							gridColor: "#E9E9E9",
							fontColor: "#FFFFFF",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						}
					},
				},
				opts2: {
					color: ["#D2F3E2", "#22C572"],
					padding: [15, 30, 0, 5],
					legend: {
						fontSize: 12,
						position: 'top',
						itemGap: 20,
						padding: 20
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						axisLine: false,
						gridType: "dash",
						dashLength: 10,

					},

					extra: {
						// tooltip: {
						// 	showBox: false,
						// },
						bar: {
							type: "group",
							width: 10,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							// linearType: "custom",
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 6
						}
					}
				},
				opts3: {
					color: ["#8D9EE9"],
					padding: [15, 15, 0, 5],
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						gridType: "dash",
					},
					yAxis: {
						gridType: "dash",
						data: [{
							min: 0,
							fontColor: '#BEBEBE',
							textAlign: 'right'
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 15,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,
							barBorderCircle: true,
							customColor: [
								"#8D9EE9",
								"#8D9EE9"
							]
						}
					}
				},
				opts4: {
					enableScroll: true,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					legend: {
						show: false,
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						axisLine: false,
						itemCount: 4,
					},
					yAxis: {

					},
					extra: {
						bar: {
							type: "group",
							width: 15,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							// linearType: "custom",
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 6
						}
					}
				},
				opts5: {
					enableScroll: true,
					color: ["#8D9EE9"],
					padding: [15, 15, 0, 5],
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						itemCount: 4,
						gridType: "dash",
					},
					yAxis: {
						gridType: "dash",
						data: [{
							min: 0,
							fontColor: "#BEBEBE",
							axisLine: false
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 15,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							// linearType: "custom",
							seriesGap: 5,
							// linearOpacity: 0.5,
							barBorderCircle: true,
							customColor: [
								"#8D9EE9",
								"#8D9EE9"
							]
						}
					}
				},
				opts6: {
					dataLabel: false,
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				opts7: {
					dataLabel: false,
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				opts8: {
					color: ["#EC6666"],
					padding: [15, 15, 0, 15],
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							// disabled: true,
							axisLine: false,
							fontColor: "#BEBEBE",
						}],
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true
						},
						tooltip: {
							showBox: false,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "dash",
							dashLength: 4,
							gridColor: "#E9E9E9",
							fontColor: "#FFFFFF",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						}
					}
				},
				opts9: {
					color: ["#22C572"],
					padding: [15, 15, 0, 15],
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							// disabled: true,
							axisLine: false,
							fontColor: "#BEBEBE",
						}],
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true
						},
						tooltip: {
							showBox: false,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "dash",
							dashLength: 4,
							gridColor: "#E9E9E9",
							fontColor: "#FFFFFF",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						}
					}
				},
				textIndex: 1,
				index: 2,
				background: {
					backgroundColor: '#2E303A',
					backgroundColor: 'red',
				},
				nowYear: ''

			}
		},
		onLoad: function(option) {
			this.nowYear = new Date().getFullYear()
		},
		destroyed() {

		},
		onUnload() {

		},
		onReady() {
			this.getServerData();
		},
		methods: {
			color4(index) {
				console.log(index)
				index = index + 1
				switch (index) {
					case 1:
						return '#FFBB6E'
					case 2:
						return '#8D9EE9'
					case 3:
						return '#FF8B95'
					case 4:
						return '#38CA80'
					case 5:
						return '#FFDD85'
					case 6:
						return '#FFBB6E'
					case 7:
						return '#FFBB6E'
					case 8:
						return '#FFBB6E'
					case 9:
						return '#FFBB6E'
					case 10:
						return '#FFBB6E'
				}
			},
			goToPage(index) {

				uni.navigateTo({
					url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
				})
			},
			clickNav(index) {
				this.carIndex = index
				let _data = ""
				if (index == 0) {
					_data = 1
				} else if (index == 1) {
					_data = 7
				} else {
					_data = 30
				}
				this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
					seachMoth: _data,
				}).then(res => {
					console.log(res.data)
					this.selectMakeDate7(res.data.data[0])


				})
			},
			yearClick(type) {

				if (type == 1) {
					this.year--
				} else {
					this.year++
				}
				this.$api.doRequest('get', '/biInfoController/profitAccount', {
					compId: uni.getStorageSync('pcUserInfo').compId,
					seachYear: this.year,
					// biViewInfoList: {weight:''}
				}).then(res => {
					console.log("利润切换", res.data.data[0])
					// this.makeDate3(res.data[0])
					this.chartData3.series = [];
					let _categorieslr = []
					let _countlr = []
					if (res.data.data[0].biViewInfoList.length > 0) {
						for (let i = 0; i < res.data.data[0].biViewInfoList.length; i++) {
							_categorieslr.push(res.data.data[0].biViewInfoList[i].name)
							_countlr.push(res.data.data[0].biViewInfoList[i].weight ? res.data.data[0]
								.biViewInfoList[
									i].weight :
								0)
							//利润核算

						}
					}
					let res3 = {
						categories: _categorieslr,
						series: [{
							name: "利润金额",
							data: _countlr
						}]
					};
					this.chartData3 = JSON.parse(JSON.stringify(res3));
				})
			},
			godetail(status) {
				var url = ''
				switch (status) {
					case 0:
						url = '/pages/dataReport/contractdetails/contractdetails'
						break;
					case 1:
						url = '/pages/dataReport/breakdownofprofit'
						break;
					case 2:
						url = '/pages/dataReport/costbreakdown?data=' + this.ym1 + '&type=' + this.index
						break;
					case 3:
						url = '/pages/dataReport/Inventoryentrydetails'
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			foldClcik(type, index) {
				switch (index) {
					case 1:
						this.isSHowContent1 = !this.isSHowContent1
						this.iconName1 = this.isSHowContent1 ? "arrow-up" : 'arrow-down'
						break;
					case 2:
						this.isSHowContent2 = !this.isSHowContent2
						this.iconName2 = this.isSHowContent2 ? "arrow-up" : 'arrow-down'
						break;
					case 3:
						this.isSHowContent3 = !this.isSHowContent3
						this.iconName3 = this.isSHowContent3 ? "arrow-up" : 'arrow-down'
						break;
					case 4:
						this.isSHowContent4 = !this.isSHowContent4
						this.iconName4 = this.isSHowContent4 ? "arrow-up" : 'arrow-down'
						break;
					case 5:
						this.isSHowContent5 = !this.isSHowContent5
						this.iconName5 = this.isSHowContent5 ? "arrow-up" : 'arrow-down'
						break;
					case 6:
						this.isSHowContent6 = !this.isSHowContent6
						this.iconName6 = this.isSHowContent6 ? "arrow-up" : 'arrow-down'
						break;


				}


				this.modeClass = type
			},
			getIndex(e) {
				console.log(e)
				// 点击图表
				if (this.textIndex == 1) {
					this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
					this.ym1Change = this.chartList[0].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
					this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
					this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
				} else {
					this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
					this.ym1Change = this.chartList[1].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
					this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
					this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
				}

			},
			makeYData(max) {
				if (max <= 100) {
					return Math.ceil(max * 1.05 / 20) * 20
				} else if (max <= 1000) {
					return Math.ceil(max * 1.05 / 100) * 100
				} else if (max > 1000) {
					console.log(111)
					return Math.ceil(max * 1.05 / 500) * 500
				}
				// Math.ceil(_max * 1.05 / 500) * 500
			},
			makeDate1(val) {
				console.log("val", val)
				// 按月1
				let _categories = []
				let _price1 = []
				let _price2 = []
				this.chartData.series = [];
				// 设置x轴数据
				let _ySRPriceMax = 0
				let _yZCPriceMax = 0
				let _max = 0
				if (this.textIndex == 1) {

					if (val[0].biViewInfoList && val[0].biViewInfoList.length > 0) {
						for (let i = 0; i < val[0].biViewInfoList.length; i++) {
							val[0].biViewInfoList[i].weight = Number(val[0].biViewInfoList[i].weight).toFixed(2)
							_price1.push(val[0].biViewInfoList[i].weight)
						}
						//月收入最大值
						_ySRPriceMax = Math.max(..._price1)
						for (let i = 0; i < val[2].biViewInfoList.length; i++) {
							val[2].biViewInfoList[i].weight = Number(val[2].biViewInfoList[i].weight).toFixed(2)
							_price2.push(val[2].biViewInfoList[i].weight)
							_categories.push(new Date(val[2].biViewInfoList[i].name).getMonth() + 1)
						}
						//月收入最大值
						_yZCPriceMax = Math.max(..._price2)
						// 判断收入支出最大值构建y坐标轴刻度
						_max = _ySRPriceMax > _yZCPriceMax ? _ySRPriceMax : _yZCPriceMax
						this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
						this.ym1Change = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name.replace(/-/g, ".");
						this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
						this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight

					}
				} else {
					if (val[1].biViewInfoList && val[1].biViewInfoList.length > 0) {

						this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
						this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
						this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
						for (let i = 0; i < val[1].biViewInfoList.length; i++) {
							_categories.push(val[1].biViewInfoList[i].name)
							_price1.push(val[1].biViewInfoList[i].weight)
						}
						for (let i = 0; i < val[3].biViewInfoList.length; i++) {
							_price2.push(val[3].biViewInfoList[i].weight)
						}
					}
					_max = _price1 > _price2 ? _price1 : _price2
				}
				let res = {
					categories: _categories,
					series: [{
							name: "收入",
							data: _price1,
							textColor: "transparent"
						}, {
							name: "支出",
							data: _price2,
							textColor: "transparent"
						}

					]
				};
				// this.opts.yAxis.data[0].max = Math.ceil(_max / 1000) * 1000
				// 处理y轴最大值
				console.log("max1", _max)
				let _newMax = this.makeYData(_max)
				console.log('max1', _newMax)
				// this.opts.yAxis.data[0].max = Math.ceil(_max * 1.05 / 500) * 500
				this.opts.yAxis.data[0].max = _newMax
				this.chartData = JSON.parse(JSON.stringify(res));

			},
			makeDate2(val) {
				let _categories = []
				let _count1 = []
				let _count2 = []
				let _xMax1 = 0
				let _xMax2 = 0
				let _max = 0
				if (val[4].biViewInfoList && val[4].biViewInfoList.length > 0) {
					for (let i = 0; i < val[4].biViewInfoList.length; i++) {
						_categories.push(val[4].biViewInfoList[i].name.substring(0, 2))
						_count1.push(Number(val[4].biViewInfoList[i].weight).toFixed(0))
						_count2.push(val[4].biViewInfoList[i].count ? Number(val[4].biViewInfoList[i].count).toFixed(0) :
							0)
					}
				}
				_xMax1 = Math.max(..._count1)
				_xMax2 = Math.max(..._count2)
				_max = _xMax1 > _xMax2 ? _xMax1 : _xMax2
				console.log(_xMax1)
				console.log(_xMax2)
				// this.opts2.xAxis.max = Math.ceil(_max / 100) * 100
				let _newMax = this.makeYData(_max)
				console.log('max2', _newMax)
				this.opts2.xAxis.max = _newMax


				let res1 = {
					categories: _categories,
					series: [{
							name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
							data: _count1,
							legendShape: "circle",
							textColor: "transparent"
						},
						{
							name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
							data: _count2,
							legendShape: "circle",
							textColor: "transparent"
						}

					]
				};
				this.chartData1 = JSON.parse(JSON.stringify(res1));
			},
			makeDate3(val) {
				let _max = 0
				let _categorieslr = []
				let _countlr = []
				if (val[5].biViewInfoList.length > 0) {
					for (let i = 0; i < val[5].biViewInfoList.length; i++) {
						_categorieslr.push(val[5].biViewInfoList[i].name.substring(0, 2))
						_countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
					}
					_max = Math.max(..._countlr)
				} else {
					this.isHaveData3 = false
				}
				let _newMax = this.makeYData(_max)
				console.log('max3', _newMax)
				this.opts3.yAxis.data[0].max = _newMax
				//利润核算
				let res3 = {
					categories: _categorieslr,
					series: [{
						name: "利润金额",
						data: _countlr
					}]
				};
				this.chartData3 = JSON.parse(JSON.stringify(res3));

			},
			makeDate4(val) {

				let _categorieslr = []
				let _countlr = []
				// this.clList =
				let _weightList = []
				let _maxWeight = ''
				if (val[8].biViewInfoList && val[8].biViewInfoList.length > 0) {
					for (let i = 0; i < val[8].biViewInfoList.length; i++) {
						_weightList.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8].biViewInfoList[
								i]
							.weight).toFixed(0) : 0)
					}
					_maxWeight = Math.max(..._weightList) + Math.max(..._weightList) * 0.05
					for (let i = 0; i < val[8].biViewInfoList.length; i++) {
						let _obj = {
							percent: Number(val[8].biViewInfoList[i].weight).toFixed(0) / _maxWeight * 100,
							name: val[8].biViewInfoList[i].name,
							weight: Number(val[8].biViewInfoList[i].weight).toFixed(0)
						}
						console.log("库存储量", _obj)
						this.clList.push(_obj)
						// _categorieslr.push(val[8].biViewInfoList[i].name)
						// _countlr.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8]
						// 	.biViewInfoList[i]
						// 	.weight).toFixed(0) : 0)
					}
				}
				// let res4 = {
				// 	categories: _categorieslr,
				// 	series: [{
				// 		name: '库存储量',
				// 		data: _countlr
				// 	}]
				// };
				// this.chartData4 = JSON.parse(JSON.stringify(res4));
				let _tc = Number(val[6].biViewInfoList[0].count) + Number(val[6].biViewInfoList[1].count) - Number(
					val[6].biViewInfoList[2].count)
				this.InventoryList = [{
						name: '合计储量',
						number: Number(val[6].biViewInfoList[0].count).toFixed(3),
						src: '../../static/img/cl.png'
					}, {
						name: '采购待执行',
						number: Number(val[6].biViewInfoList[1].count).toFixed(3),
						src: '../../static/img/cg.png'
					},
					{
						name: '销待执行售',
						number: Number(val[6].biViewInfoList[2].count).toFixed(3),
						src: '../../static/img/xs.png'
					},
					{
						name: '头寸',
						number: Number(_tc).toFixed(3),
						src: '../../static/img/tc.png'
					},

				]
			},
			makeDate5(val) {
				let _max = 0
				let _categorieslr = []
				let _count = []
				let count = []
				if (val[7].biViewInfoList && val[9].biViewInfoList.length > 0) {
					for (let i = 0; i < val[9].biViewInfoList.length; i++) {
						let _obj = {
							value: Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0)
								.toFixed(
									0),
							color: this.color[i]
						}
						_categorieslr.push(val[9].biViewInfoList[i].name)
						_count.push(_obj)
						count.push(Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0))
					}
					_max = Math.max(...count)

				}
				let _newMax = this.makeYData(_max)
				console.log('max5', _newMax)
				this.opts5.yAxis.data[0].max = _newMax
				// 		data: [{
				// 				value: 10000,
				// 				color: "#FFBB6E"
				// 			},
				// 			{
				// 				value: 40000,
				// 				color: "#8D9EE9"
				// 			}, {
				// 				value: 70000,
				// 				color: "#FF8B95"
				// 			}, {
				// 				value: 90000,
				// 				color: "#38CA80"
				// 			},
				// 			{
				// 				value: 100000,
				// 				color: "#FFDD85"
				// 			}
				// 		]
				let res5 = {
					categories: _categorieslr,
					series: [{
						name: "货值（万元）",
						data: _count
					}]
				};
				this.chartData5 = JSON.parse(JSON.stringify(res5));

				this.averageCostList = val[9].biViewInfoList
			},
			makeDate6(val) {
				let _data = []
				if (val[10].biViewInfoList && val[10].biViewInfoList.length > 0) {
					for (let i = 0; i < val[10].biViewInfoList.length; i++) {
						let _obj = {
							name: val[10].biViewInfoList[i].name,
							value: val[10].biViewInfoList[i].weight,
							color: this.color[i],
							style: {
								'background': this.color[i],
								'border-radius': '50%',
								'width': '20rpx',
								'height': '20rpx',
								'display': 'inline-block',
								'margin-right': '10rpx'
							},
						}
						_data.push(_obj)
						this.rkList = _data
					}
				}
				let res6 = {
					width: 200,
					series: [{
						data: _data
					}]
				};
				this.chartData6 = JSON.parse(JSON.stringify(res6));
			},
			selectMakeDate7(val) {
				console.log(11)
				console.log(val)
				this.chartData7.series = [];
				let _data = []
				this.ztList = []
				for (let i = 0; i < val.biViewInfoList.length; i++) {
					let _obj = {
						name: val.biViewInfoList[i].name,
						value: Number(val.biViewInfoList[i].count),
						color: this.ztColor[i],
						style: {
							'background': this.ztColor[i],
							'border-radius': '50%',
							'width': '20rpx',
							'height': '20rpx',
							'display': 'inline-block',
							'margin-right': '10rpx'
						},
					}
					_data.push(_obj)
					this.ztList = _data
				}
				console.log(_data)
				let res7 = {
					series: [{
						data: _data
					}]
				};
				this.chartData7 = JSON.parse(JSON.stringify(res7));
			},
			makeDate7(val) {
				let _data = []
				this.ztList = []
				if (val[11].biViewInfoList && val[11].biViewInfoList.length) {
					for (let i = 0; i < val[11].biViewInfoList.length; i++) {
						let _obj = {
							name: val[11].biViewInfoList[i].name,
							value: Number(val[11].biViewInfoList[i].count),
							color: this.ztColor[i],
							style: {
								'background': this.ztColor[i],
								'border-radius': '50%',
								'width': '20rpx',
								'height': '20rpx',
								'display': 'inline-block',
								'margin-right': '10rpx'
							},
						}
						_data.push(_obj)
						this.ztList = _data
					}
				}

				console.log(_data)
				let res7 = {
					series: [{
						data: _data
					}]
				};
				this.chartData7 = JSON.parse(JSON.stringify(res7));

			},
			makeDate8(val) {
				let _categories = []
				let _data = []
				let _categories1 = []
				let _data1 = []
				this.appTotal = val[12].count
				this.lmTotal = val[13].count
				let _max1 = 0
				let _max2 = 0
				if (val[12].biViewInfoList && val[12].biViewInfoList.length) {
					for (let i = 0; i < val[12].biViewInfoList.length; i++) {
						_categories.push(new Date(val[12].biViewInfoList[i].name).getMonth() + 1 + '月')
						_data.push(val[12].biViewInfoList[i].weight)
					}
				}
				_max1 = Math.max(..._data)
				if (val[13].biViewInfoList && val[13].biViewInfoList.length > 0) {
					for (let i = 0; i < val[13].biViewInfoList.length; i++) {
						_categories1.push(new Date(val[13].biViewInfoList[i].name).getMonth() + 1 + '月')
						_data1.push(val[13].biViewInfoList[i].weight)
					}
				}
				_max2 = Math.max(..._data1)
				let _newMax1 = this.makeYData(_max1)
				console.log('max8', _newMax1)
				this.opts8.yAxis.data[0].max = _newMax1
				let _newMax2 = this.makeYData(_max2)
				console.log('max9', _newMax2)
				this.opts9.yAxis.data[0].max = _newMax2
				let res8 = {
					categories: _categories,
					series: [{
						name: "成交量A",
						data: _data,
						textColor: "transparent"
					}]
				}
				let res9 = {
					categories: _categories1,
					series: [{
						name: "成交量A",
						data: _data1,
						textColor: "transparent"
					}]
				}
				this.chartData8 = JSON.parse(JSON.stringify(res8))
				this.chartData9 = JSON.parse(JSON.stringify(res9))
			},
			isShowChart(val, index) {
				if (val.length == 0) {
					return false
					switch (index) {
						case 3:
							this.isHaveData3 = false
					}
				}
				return true
			},
			getServerData() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
						'pcUserInfo')
					.compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
					res => {
						console.log("数据报表", res)
						uni.hideLoading()
						this.chartList = res.data.data
						// 收支核算数据处理
						this.makeDate1(res.data.data)
						//合同数据
						this.makeDate2(res.data.data)
						//利润核算
						this.makeDate3(res.data.data)
						//库存储量
						this.makeDate4(res.data.data)
						//当期货值
						this.makeDate5(res.data.data)
						//今日入库
						this.makeDate6(res.data.data)
						//在途数据
						this.makeDate7(res.data.data)
						//APP注册
						this.makeDate8(res.data.data)
						// uni.hideLoading()


					})
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						// let res = {
						// 	categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
						// 	series: [{
						// 			name: "收入",
						// 			data: [70, 40, 65, 100, 44, 68, 90, 240]
						// 		}, {
						// 			name: "支出",
						// 			data: [35, 8, 25, 37, 4, 20, 56, 30]
						// 		}

						// 	]
						// };
						// this.chartData = JSON.parse(JSON.stringify(res));
						// let res1 = {
						// 	categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						// 	series: [{
						// 			name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
						// 			data: [35, 36, 31, 33, 13, 34],
						// 			legendShape: "circle",
						// 		},
						// 		{
						// 			name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
						// 			data: [18, 27, 21, 24, 6, 28],
						// 			legendShape: "circle"
						// 		}

						// 	]
						// };
						// this.chartData1 = JSON.parse(JSON.stringify(res1));
						// let res3 = {
						// 	categories: ["销售", "采购", "收购", "代收", "代储"],
						// 	series: [{
						// 		name: "利润金额",
						// 		data: [35, 36, 31, 33, 13]
						// 	}]
						// };
						// this.chartData3 = JSON.parse(JSON.stringify(res3));
						let res4 = {
							categories: ["小麦", "高粱（潮粮）", "高粱", "玉米（潮粮）", "玉米"],
							series: [{
								name: '库存储量',
								data: [{
										value: 35,
										color: "#FFBB6E"
									},
									{
										value: 36,
										color: "#8D9EE9"
									}, {
										value: 31,
										color: "#FF8B95"
									}, {
										value: 33,
										color: "#38CA80"
									},
									{
										color: "#FFDD85"
									}
								]
							}]
						};
						this.chartData4 = JSON.parse(JSON.stringify(res4));
						// let res5 = {
						// 	categories: ["小麦", "高粱（潮粮）", "高粱", "玉米（潮粮）", "玉米"],
						// 	series: [{
						// 		name: "利润金额",
						// 		data: [{
						// 				value: 10000,
						// 				color: "#FFBB6E"
						// 			},
						// 			{
						// 				value: 40000,
						// 				color: "#8D9EE9"
						// 			}, {
						// 				value: 70000,
						// 				color: "#FF8B95"
						// 			}, {
						// 				value: 90000,
						// 				color: "#38CA80"
						// 			},
						// 			{
						// 				value: 100000,
						// 				color: "#FFDD85"
						// 			}
						// 		]
						// 	}]
						// };
						// this.chartData5 = JSON.parse(JSON.stringify(res5));
						// let res6 = {
						// 	series: [{
						// 		data: [{
						// 			"name": "一班",
						// 			"value": 50
						// 		}, {
						// 			"name": "二班",
						// 			"value": 30
						// 		}, {
						// 			"name": "三班",
						// 			"value": 20
						// 		}, {
						// 			"name": "四班",
						// 			"value": 18
						// 		}, {
						// 			"name": "五班",
						// 			"value": 8
						// 		}]
						// 	}]
						// };
						// this.chartData6 = JSON.parse(JSON.stringify(res6));
						// let res7 = {
						// 	series: [{
						// 		data: [{
						// 			"name": "一班",
						// 			"value": 50
						// 		}, {
						// 			"name": "二班",
						// 			"value": 30
						// 		}, {
						// 			"name": "三班",
						// 			"value": 20
						// 		}, {
						// 			"name": "四班",
						// 			"value": 18
						// 		}, {
						// 			"name": "五班",
						// 			"value": 8
						// 		}]
						// 	}]
						// };
						// this.chartData7 = JSON.parse(JSON.stringify(res7));
						// let res8 = {
						// 	categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						// 	series: [{
						// 			name: "成交量A",
						// 			data: [35, 8, 25, 37, 4, 20]
						// 		}

						// 	]
						// };
						// this.chartData8 = JSON.parse(JSON.stringify(res8));
						// let res9 = {
						// 	categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						// 	series: [{
						// 			name: "成交量A",
						// 			data: [35, 8, 25, 37, 4, 20]
						// 		},
						// 		{
						// 			name: "成交量B",
						// 			data: [70, 40, 65, 100, 44, 68]
						// 		},
						// 		{
						// 			name: "成交量C",
						// 			data: [100, 80, 95, 150, 112, 132]
						// 		}
						// 	]
						// };
						// this.chartData9 = JSON.parse(JSON.stringify(res9));
					},
					500);
			},
			back() {
				uni.navigateBack()
			},
			navClick(val) {
				this.clList = []
				this.index = val
				if (val == 1) {
					this.seachMoth = ''
				} else {
					this.seachMoth = '2022-10-10'
				}
				this.getServerData();
			},
			accounting(val) {
				this.textIndex = val
				if (val == 1) {
					console.log("按月")
				} else {
					console.log("按年")
				}
				this.makeDate1(this.chartList)
			}
		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
	}

	.alc {
		align-items: center;
	}

	.jcse {
		justify-content: space-evenly;
	}

	.jcsb {
		justify-content: space-between;
	}

	.mtb40 {
		margin: 40rpx 0;
	}

	.title-lv2 {
		font-weight: bold;
		color: #333333;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top-nav {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		position: relative;
	}

	.back {
		position: absolute;
		left: 20rpx;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.zd {
		color: #969696;
		margin-top: 20rpx;
		justify-content: center;
	}

	.top-nav {
		font-size: 36rpx;
		background: white;
		padding: 20rpx;
	}

	.nav-active {
		font-weight: 700;
		position: relative;
	}

	.nav-active:after {
		content: "";
		position: absolute;
		bottom: -20rpx;
		left: 0;
		right: 0;
		margin: auto;
		height: 10rpx;
		width: 60%;
		background: #262626;
		border-radius: 40rpx;
	}

	.content-item {
		background: white;
		margin: 20rpx 25rpx 0 25rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

	}

	.title {
		margin-bottom: 22rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #343434;
	}

	.right-btn {
		width: 120rpx;
		height: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F1F1F1;
		border-radius: 30px;
		font-size: 22rpx;
		color: #707575;
	}

	.content1 {
		.content1-wrap {}

		.row1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				color: #868686;
			}

			.text {
				margin-left: 38rpx;
				color: #2E303A;
				height: 60rpx;
				display: inline-block;
				line-height: 60rpx;
				padding: 0 26rpx;

			}

			.text-active {
				// margin-left: 38rpx;
				color: #FFF;
				background: #2E303A;
				// padding: 1rpx 26rpx;
				height: 60rpx;
				display: inline-block;
				line-height: 60rpx;
				padding: 0 26rpx;
				border-radius: 10rpx;
			}
		}

		.row2 {
			display: flex;
			flex-direction: column;
			align-items: center;

			.text {
				color: #636363;
				margin-bottom: 10rpx
			}

			.price {
				font-size: 56rpx;
				font-weight: 700;
				color: #D79C58;
			}

		}

		.row3 {
			display: flex;
			justify-content: space-between;
			margin-top: 27rpx;
			align-items: center;

			.center {
				width: 2px;
				height: 61rpx;
				border: 2rpx solid #EEEEEE;
			}

			.left,
			.right {
				// background: green;
				width: calc(50% - 1px);
				text-align: center;

				.text {
					color: #636363
				}

				.number {
					margin-top: 12rpx;
					font-size: 34rpx;
					font-weight: 700;
					color: #343434;
				}
			}
		}

		.row4 {
			margin-top: 20rpx;
		}

		.row5 {
			background: #F6F6F6;
			border-radius: 8px;
			padding: 16rpx 0;
			box-sizing: border-box;
			margin: 20rpx 0;

			.left,
			.right {
				width: 50%;
				text-align: center;
			}

			.point-left {
				width: 11rpx;
				height: 11rpx;
				background: #E84A55;
				display: inline-block;
				border-radius: 50%;
				margin: 6rpx;
			}

			.point-right {
				width: 11rpx;
				height: 11rpx;
				background: #22C572;
				display: inline-block;
				border-radius: 50%;
				margin: 6rpx;
			}

			.text-left {
				color: #E84A55;
				font-weight: 700;
			}

			.text-right {
				color: #22C572;
				font-weight: 700;
			}
		}
	}

	.content2 {
		.row1 {}

		.row2 {
			color: #707575;
			font-size: 22rpx;

			.color1 {
				width: 16rpx;
				height: 12rpx;
				background: #D2F3E2;
				border-radius: 7rpx;
				margin-right: 10rpx;
			}

			.color2 {
				width: 16rpx;
				height: 12rpx;
				background: #2CC778;
				border-radius: 7rpx;
				margin-right: 10rpx;
			}
		}

		.row3 {
			position: relative;
			top: -40rpx;
		}

		.row5 {
			display: flex;
			justify-content: space-between;
			color: #9E9E9E;
			margin-bottom: 20rpx;

			.left {}
		}
	}

	.content3 {
		.right {
			color: #9E9E9E;
		}

		.row2 {
			.name {
				color: #7A7A7A;
				margin: 17rpx 0;
			}

			.bottom {
				display: flex;
			}

			.left {
				width: 80%;
			}

			.weight {
				margin-left: 20rpx;
			}
		}

		.row3 {
			padding: 31rpx 25rpx 51rpx 25rpx;
			border-radius: 15rpx;
			margin-top: 31rpx;
			background: #FAFAFA;




			.list-item {
				margin-top: 20rpx;

				.number {
					font-weight: 700;
				}
			}
		}

		.row7 {
			.list-item {
				font-size: 24rpx;
				display: inline-block;
				padding: 20rpx;
				box-sizing: border-box;
				background: #FAFAFA;
				width: calc(50% - 40rpx);
				margin: 20rpx;
				border-radius: 8rpx;

			}
		}
	}

	.content4 {
		.row1 {
			display: flex;

			.opts6 uni-canvas {
				width: 200px;
			}
		}
	}

	.content5 {
		.days-nav {
			display: flex;
			justify-content: space-evenly;
		}


	}

	.zt-right {
		flex-direction: column;
		justify-content: space-evenly;
		height: 100px;
		display: flex;
		width: 100%;
	}

	.content6 {
		.row1 {
			margin: 20rpx 0;
		}

		.left {
			// font-weight: 700;
			// margin
		}

	}

	.days-nav {
		margin: 20rpx;
		background: #F5F6FA;
		border-radius: 8rpx;
		padding: 4rpx 0;

		.item {
			width: 33%;
			display: flex;
			justify-content: center;
			padding: 6px 0;
		}

		.item-active {
			background: #fff;

		}
	}
</style>