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 class="toolbar">
  			  <el-form  :inline="true" :model="pageindex"> 

  			    <!-- <el-form-item label="资源类型">

  			    <el-select  placeholder="全部"   v-model="pageindex.leaseType"
  			      style="width: 120px;margin-right: 15px">
  			     <el-option label="商铺" value="商铺" />
  				 <el-option label="场地" value="场地" />
  				 <el-option label="广告位" value="广告位" />
  			    </el-select>

  			    </el-form-item> -->

  			    <el-form-item label="日期">
  			      <el-date-picker
  			        v-model="pageindex.list"
  			        type="daterange"
  			        range-separator="至"
  			        start-placeholder="开始时间"
  			        end-placeholder="结束时间"
  			        value-format="yyyy-MM-dd"
  			      />
  			    </el-form-item>
  			
  			    <el-form-item label-width="0">
  			      <el-button   @click="search" style="background-color: #3F9B6A;color: #fff">查询</el-button>
  			      <el-button  @click="clear" class="buttonHover"
  			     style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
  			    </el-form-item>
  			  </el-form>
  			</div>
  			<div style="width: 100%;margin-bottom:30px;">
  				<div style="display:flex;margin-top:10px;">
  					<div style="width:50%;height: 400px;marigin-right:20px;">
  						<div style="display: flex;justify-content: space-between;">
  							<div style="line-height:35px;">月度签约趋势</div>
  						</div>
  						<div ref="shop1TJ" style="width:100%;height: 400px;"></div>
  					</div>
  					<div style="width:50%;height: 400px;marigin-right:20px;">
  						<div style="display: flex;justify-content: space-between;">
  							<div style="line-height:35px;">资源使用占比</div>
  						</div>
  						<div ref="shop1ZX" style="width:100%;height: 400px;"></div>
  
  					</div>
  
  				</div>
  			</div>
  			<div style="width: 100%;margin-bottom;20px;">
  				<div style="display:flex;margin-top:10px;">
  
  					<div style="width:50%;height: 400px;marigin-right:20px;">
  						<div style="display: flex;justify-content: space-between;">
  							<div style="line-height:35px;">商铺经营类型占比</div>
  						</div>
  						<div ref="shop2TJ" style="width:100%;height: 400px;"></div>
  					</div>
  					<div style="width:50%;height: 400px;marigin-right:20px;">
  						<div style="display: flex;justify-content: space-between;">
  							<div style="line-height:35px;">租金价格趋势</div>
  						</div>
  						<div ref="shop3QS" style="width:100%;height: 400px;"></div>
  					</div>
  				</div>
  			</div>
  		</div>
  
  	</div>
  </template>
  
  <script>
    import {

     getInvestmentPlanStatistics

    } from '@/api/cereBusinessInfo'
  	import * as echarts from 'echarts'
  	export default {
  		name: 'atmosphereGl',
  		data() {
  			return {
  				currentPage: 1,
  				radio1: 0,
  				total: 100,
  				flag: false,
  				pageSize: 10,
  				tableData: [],
  				pageindex: {
  				leaseType:'',
  				startTime:'',
  				endTime:'',
  				list:[]
  				},
  				listType:[]
  
  			}
  		},
  		computed: {},
  		mounted() {
  			this.getAll()
  			
  		},
  
  		methods: {
  			search(){
  				if(this.pageindex.list.length!=0){
  					this.pageindex.startTime = this.pageindex.list[0]+' 00:00:00'
  					this.pageindex.endTime = this.pageindex.list[1]+' 23:59:59'	
  				}
  				
  				this.getAll()
  			},
  			clear(){
  				this.pageindex={
  				leaseType:'',
  				startTime:'',
  				endTime:'',
  				list:[]
  				}
  				this.getAll()
  			},
  			charDam(val) {
  		
  
  				// 获取图表容器的 DOM 元素
  				const chartDom = this.$refs.shop2TJ
  				// 初始化 ECharts 实例
  				const myChart = echarts.init(chartDom);

  				
  		     const option = {
  		       tooltip: {
  		         trigger: 'item',

  		         formatter: function (params) {
  		           const dataItem = val.find(item => item.businessPurpose === params.name);
  		           return `${params.name}<br/>数量: ${dataItem.num}<br/>占比: ${dataItem.proportion}%`;
  		         }

  		       },
  		       legend: {
  		          orient: 'horizontal', // 横向展示
  		                 left: 'center', // 居中显示

  		         data: val.map(item => item.businessPurpose)

  		       },
  		       series: [
  		         {

  					 color: ['#4A90E2', '#37c954','#ff94e8', '#7a69d8','#aaffe7', '#8cd89b','#feff89', '#d8d6d5'],

  		           name: '资源分布',
  		           type: 'pie',

  				   radius: ['0%', '60%'],

  		           avoidLabelOverlap: false,
  		           label: {
  		             show: true,
  		             position: 'outside',

  		             formatter: '{b}: {c}%'

  		           },
  		           labelLine: {
  		             show: true
  		           },

  		          data: val.map(item => ({
  		            value: item.proportion,
  		            name: item.businessPurpose
  		          }))

  		         },

  		       ]
  		     };
  				// 使用刚指定的配置项和数据显示图表
  				option && myChart.setOption(option)
  				window.addEventListener('resize', function() {
  					myChart.resize();
  				})
  			},
  			charDam1(val) {
  
  				const chartDom = this.$refs.shop1ZX;
  				const myChart = echarts.init(chartDom)

  				 let shopCount = 0;
  				      let adCount = 0;
  				      let venueCount = 0;
  				      let totalCount = 0;
  		 val.forEach(item => {
  		        totalCount += item.num;
  		        if (item.businessPurpose === '商铺合同') {
  		          shopCount = item.proportion;
  		        } else if (item.businessPurpose === '场地合同') {
  		          venueCount = item.proportion;
  		        } else if (item.businessPurpose === '广告位合同') {
  		          adCount = item.proportion;
  		        }
  		      });

  		
  		      const option = {
  		        tooltip: {
  		          trigger: 'item',

  		          formatter: function (params) {
  		            const dataItem = val.find(item => item.businessPurpose === params.name);
  		            return `${params.name}<br/>数量: ${dataItem.num}<br/>占比: ${dataItem.proportion}%`;
  		          }

  		        },
  		        legend: {

  		          orient: 'horizontal',
  		          left: 'center',
  		          data: val.map(item => item.businessPurpose)

  		        },
  		        series: [

  		          {

  					  color: ['#4A90E2', '#37c954','#ff94e8', '#7a69d8','#aaffe7', '#8cd89b','#feff89', '#d8d6d5'],

  		            name: '资源分布',
  		            type: 'pie',
  		            radius: ['50%', '70%'],
  		            avoidLabelOverlap: false,
  		            label: {
  		              show: true,
  		              position: 'outside',

  		              formatter: '{b}: {c}%'

  		            },
  		            labelLine: {
  		              show: true
  		            },

  		            data: val.map(item => ({
  		              value: item.proportion,
  		              name: item.businessPurpose
  		            }))

  		          },
  		          {

  		            name: '总数',
  		            type: 'pie',
  		            radius: ['0%', '0%'],
  		            label: {
  		              show: true,
  		              position: 'center',
  		              formatter: `总数: ${totalCount}`,
  		              fontSize: 20
  		            },
  		            data: [{ value: totalCount, name: '总数' }]

  		          }
  		        ]
  		      };
  
  				    option && myChart.setOption(option,true);
  				    window.addEventListener('resize', () => myChart.resize());
  			},
  			charDam3(val) {
  				let Dom = this.$refs.shop1TJ
  				let myChart = echarts.init(Dom)

  			  // 处理数据
  			      const months = Object.keys(val).reverse(); // 反转月份顺序，最新月份在前
  			      const shopData = [];
  			      const venueData = [];
  			      const adData = [];
  			
  			      months.forEach(month => {
  			        const monthData = val[month];
  			        const shop = monthData.find(item => item.contractType === '商铺合同')?.contractCount || 0;
  			        const venue = monthData.find(item => item.contractType === '场地合同')?.contractCount || 0;
  			        const ad = monthData.find(item => item.contractType === '广告位合同')?.contractCount || 0;
  			        shopData.push(shop);
  			        venueData.push(venue);
  			        adData.push(ad);
  			      });

  			
  			      const option = {
  			        tooltip: {
  			          trigger: 'axis'
  			        },
  			        xAxis: {
  			          type: 'category',
  			          data: months,
  			          boundaryGap: false
  			        },
  			        yAxis: {
  			          type: 'value',

  			          name: '合同数量'

  			        },
  			        series: [
  			          {

  			            name: '商铺合同',

  			            type: 'line',

  			            data: shopData,

  			            symbol: 'circle',

  			            lineStyle: { color: '#4A90E2' },
  			            itemStyle: { color: '#4A90E2' }
  			          },
  			          {
  			            name: '场地合同',
  			            type: 'line',
  			            data: venueData,
  			            symbol: 'square',
  			            lineStyle: { color: '#52C41A' },
  			            itemStyle: { color: '#52C41A' }
  			          },
  			          {
  			            name: '广告位合同',
  			            type: 'line',
  			            data: adData,
  			            symbol: 'triangle',
  			            lineStyle: { color: '#FF7800' },
  			            itemStyle: { color: '#FF7800' }

  			          }
  			        ]
  			      };
  

  				option && myChart.setOption(option);
  				window.addEventListener('resize', function() {
  					myChart.resize();
  				})
  			},
  
  			charDam5(val) {
  			
  				// 获取图表容器的 DOM 元素
  				const chartDom = this.$refs.shop3QS
  				// 初始化 ECharts 实例
  				const myChart = echarts.init(chartDom);
  				 
  		

  		        const allDates = [];
  		             const leaseTerms = ['季', '年', '日', '月'];
  		             const seriesData = {
  		               '季': [],
  		               '年': [],
  		               '日': [],
  		               '月': []
  		             };
  		       
  		             // 收集所有日期
  		             leaseTerms.forEach(term => {
  		               val[term].forEach(item => {
  		                 if (!allDates.includes(item.createDay)) {
  		                   allDates.push(item.createDay);
  		                 }
  		               });
  		             });
  		       
  		             // 按日期排序
  		             allDates.sort();
  		       
  		             // 填充各租赁期限的数据
  		             leaseTerms.forEach(term => {
  		               allDates.forEach(date => {
  		                 const found = val[term].find(item => item.createDay === date);
  		                 seriesData[term].push(found ? found.rentalPrice : null);
  		               });
  		             });
  		       
  		             const option = {
  		               tooltip: {
  		                 trigger: 'axis',
  		                 axisPointer: {
  		                   type: 'cross',
  		                   crossStyle: {
  		                     color: '#999'
  		                   }
  		                 }
  		               },
  		               legend: {
  		                 data: leaseTerms
  		               },
  		               xAxis: {
  		                 type: 'category',
  		                 data: allDates
  		               },
  		               yAxis: {
  		                 type: 'value',

  		                 name: '租金价格',

  		                 axisLabel: {
  		                   formatter: '{value}'
  		                 }
  		               },
  		               series: leaseTerms.map(term => ({
  		                 name: term,

  		                 type: 'line',

  		                 data: seriesData[term],

  		                 symbol: 'circle',

  		                 label: {
  		                   show: false

  		                 },

  		                 lineStyle: {
  		                   width: 2

  		                 }

  		               }))
  		             };

  				// 使用刚指定的配置项和数据显示图表
  				option && myChart.setOption(option)
  				window.addEventListener('resize', function() {
  					myChart.resize();
  				})
  			
  			},
  
  			async getAll() {

  				const res = await getInvestmentPlanStatistics(this.pageindex)
  			this.charDam3(res.data.monthlyContractVOList)
  				this.charDam1(res.data.resourceUsageRatioVOList)
  				this.charDam(res.data.businessTypeProportionList)
  				this.charDam5(res.data.rentTrendMap)

  				
  			},
  	
  		}
  	}
  </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;
  	}
  
  	.tableBtn {
  		display: inline-block;
  		margin-right: 10px;
  	}
  
  	.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>