webapp / GreenwayWeb

<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti ">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>招商资源监测</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">统计分析</span></div>
			</div>
			<div style="width: 100%;margin-bottom:30px;">
				<div style="display:flex;justify-content: space-between">
					<div style="display:flex;">
						<el-date-picker v-model="FormTime" value-format="yyyy-MM-dd" type="daterange"
							range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
							style="width: 300px;margin-right: 10px;" prefix-icon="none">
						</el-date-picker>
						<el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff;">查询
						</el-button>
						<el-button @click="resetting" class="buttonHover"
							style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
						</el-button>
					</div>
					<div>
						<el-button @click="gitOut" style="background-color: #3F9B6A;color: #fff">导出
						</el-button>
					</div>
				</div>
			</div>
			<div style="width: 100%;">
				<div style="width: 46%;">
					<div>
						<TitleWithCircle title="资源数量增长趋势" style="margin: 20px 0;" />
					</div>
					<div>
						<div ref="echarts1" style="width:100%;height: 400px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas'
	import jsPDF from 'jspdf'
	import TitleWithCircle from '@/components/top/index';
	import * as echarts from 'echarts'
	import {
	resourceQuantityGrowth,
    resourceDistributionStatistics,
    resourceSituationProportion,
    resourceUtilizationProportion,
  } from '@/api/newly.js'
	export default {
		components: {
			TitleWithCircle,
		},
		name: 'atmosphereGl',
		data() {
			return {
				currentPage: 1,
				radio1: 0,
				total: 100,
				flag: false,
				pageSize: 10,
				tableData: [],
				FormTime: [],
				pageindex: {
					startTime: "1990-09-11",
					endTime: "2024-11-09"
				},
				formSel: {

				}
			}
		},
		computed: {},
		created() {
			//获取今天日期和一个月前的日期
			let today = new Date();
			let monthAgo = new Date();
			monthAgo.setMonth(monthAgo.getMonth() - 1);
			monthAgo.setDate(monthAgo.getDate() + 1);
			this.pageindex.startTime = monthAgo.toISOString().slice(0, 10);
			this.pageindex.endTime = today.toISOString().slice(0, 10);
			this.FormTime = [
				this.pageindex.startTime,
				this.pageindex.endTime
			]
			console.error(this.pageindex)
			this.getAll()

		},
		mounted() {
		},
		methods: {
			initecharts1(datas) {
				console.error(datas)
				let allx = []
				let list1 = {
					cent:[],
					name:'商铺资源',
				}
				for (let index = 0; index < datas.shopTrend.length; index++) {
					const element = datas.shopTrend[index];
					allx.push(element.trendDate)
					list1.cent.push(element.trendQuantity)
				}
				let Dom = this.$refs.echarts1
				let myChart = echarts.init(Dom);  
				let option = {
					grid: {
						top: '3%',
						left: '6%',
						right: '6%',
						bottom: '6%',
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: allx
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: list1.name,
							type: 'line',
							stack: 'Total',
							data: list1.cent
						},
						
					]
				};
				option && myChart.setOption(option);
			},
			async getAll() {
				const res1 = await resourceQuantityGrowth({...this.pageindex})
				console.log(res1.data)
				this.initecharts1(res1.data)
			},
			resetting() {
				let today = new Date();
				let monthAgo = new Date();
				monthAgo.setMonth(monthAgo.getMonth() - 1);
				monthAgo.setDate(monthAgo.getDate() + 1);
				this.pageindex.startTime = monthAgo.toISOString().slice(0, 10);
				this.pageindex.endTime = today.toISOString().slice(0, 10);
				this.FormTime = [
					this.pageindex.startTime,
					this.pageindex.endTime
				]
				this.getAll()
			},
			async onSubmit() {

				let Msg = {
					startTime: this.FormTime[0],
					endTime: this.FormTime[1]
				}
				const res = await statistical(Msg)
				this.charDam(res.data.seekingIntentionStatistics)
				this.charDam2(res.data.seekingIntentionStatistics)
				this.charDam6(res.data.contractTrend)
				this.charDam7(res.data.basicQueryTrends)
				let trends = [...res.data.shopTrend, ...res.data.venueTrend, ...res.data.advertisingTrend]

				this.charDam1(trends)
				this.charDam3(trends)

			},
			async gitOut() {
				const content = this.$refs.contentToConvert;

				// 使用 html2canvas 将 div 渲染为画布
				const canvas = await html2canvas(content);

				// 获取画布的图像数据
				const imgData = canvas.toDataURL('image/png');

				// 创建一个新的 PDF 文档
				const pdf = new jsPDF('p', 'mm', 'a4');

				// 添加图像到 PDF，第二个参数是图像格式，第三个参数是缩放比例
				const imgWidth = 190; // 图像的宽度（mm）
				const imgHeight = (canvas.height * imgWidth) / canvas.width; // 保持图像的宽高比

				pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); // 10, 10 是图像在 PDF 中的位置（mm）

				// 保存 PDF 文件
				pdf.save('downloaded.pdf');
			},
		}
	}
</script>

<style scoped>
	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;

	}

	/deep/ .el-form-item__content {
		line-height: 0;
	}



	.formSearch {
		position: relative;
		margin-top: 30px;
		display: flex;
		width: 100%;
		height: 30px;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.greens {
		color: #3F9B6A;
	}


	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: flex-start;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}

	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}

	/deep/ .el-pagination__total {
		margin-top: 4px;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: #3F9B6A
	}

	/deep/ .el-dialog__header {
		background-color: #fff;
		padding: 0
	}

	/deep/ .el-radio__input.is-checked .el-radio__inner {
		border-color: #3F9B6A;
		background: #3F9B6A;
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}
</style>