hxgksystemapp/src/views/dashboard/components/sanlianping.vue

<!--
@ 作者: 秦东
@ 时间: 2023-11-08 08:44:54
@ 备注: 三联屏
-->
<script lang='ts' setup>
import * as echarts from 'echarts';	//引入图形界面
import { bdTtsyoy,getCompanyDeparment,targetListForDepartment,bdBdtTs,bDtTsatTryoy } from '@/api/displayboardapi/indexapi'

const dlhbLoading = ref(false)
const dlhbLoadingMb = ref(false)
const mainOrgList = ref<any[]>([])
const targetListAry = ref<any[]>([])
const targetListAryes = ref<any[]>([])

const targetXingListAry = ref<any[]>([])
//定性同比环比分析
const dingXingYear = ref<number>()
const dingXingOrg = ref<any>()
const dingXingTarget = ref<any>()
//定量指标目标达成
const dingLiangDaChengYear = ref<number>()
const dingLiangDaChengOrg = ref<any>()
const dingLiangDaChengTarget = ref<any>()
//定量同比环比分析
const dingLiangYear = ref<number>()
const dingLiangOrg = ref<any>()
const dingLiangTarget = ref<any>()
//获取公司下的主部门
const getCompanyMainSunOrg = () =>{
	let sendIfo = {
		"idstr":"309" //userStore.userInfoCont.company
	}
	getCompanyDeparment(sendIfo)
		.then((data:any) =>{
			console.log("获取行政组织-1-->",data)
			mainOrgList.value = data.data
			if(data.data && data.data.length > 0){
				dingXingOrg.value = data.data[0].id
				dingLiangDaChengOrg.value = data.data[0].id
				dingLiangOrg.value = data.data[0].id
				orgAboutTarget(data.data[0].id.toString(),1)
				orgAboutTarget(data.data[0].id.toString(),2)
			}
			
		})
}
//根据行政组织获取指标
const orgAboutTarget = (orgId:string,tarAttribute:number,types?:number) =>{
	let sendIfo = {
		id:orgId,
		attribute:tarAttribute
	}
	targetListForDepartment(sendIfo)
		.then((data:any) =>{
			console.log("获取指标-1-->",data)
			if(tarAttribute==1){
				targetXingListAry.value = data.data
				if(data.data&&data.data.length>0){
					dingXingTarget.value = data.data[0].id
					darwDxTargetChart()
				}
			}else{
				
				if(data.data&&data.data.length>0){
					switch (types) {
						case 1:
							targetListAryes.value =  data.data
							dingLiangTarget.value = data.data[0].id.toString()
							drawDlTbHbFx();
							break;
						case 2:
							targetListAry.value = data.data
							dingLiangDaChengTarget.value = data.data[0].id
							bdBdtTsMubiao();
							break
						default:
							targetListAryes.value =  data.data
							targetListAry.value = data.data
							dingLiangDaChengTarget.value = data.data[0].id
							dingLiangTarget.value = data.data[0].id.toString()
							drawDlTbHbFx();
							bdBdtTsMubiao();
							break;
					}
					
				}
			}
			
		})
}
//定量指标同比环比分析
const dlDbHbFx = ref<any>()
const dlTargetThChart  = ref<any>(null)
const drawDlTbHbFx = () =>{
	dlhbLoading.value=true
	let timeYears = dingLiangYear.value.getFullYear()
	let sendInfo = {
		orgid:dingLiangOrg.value.toString(),
		targetid:dingLiangTarget.value,
		datetime:[timeYears]
	}
	bdTtsyoy(sendInfo)
		.then((data)=>{
			if(data.code == 0){
				let seriesAry = new Array
				if(data.data.series&&data.data.series.length>0){
					data.data.series.forEach((item:any)=>{
						seriesAry.push({
							type:'bar',
							data:item.data,
							tooltip:item.tooltip,
							name:item.name,
							itemStyle: {
								normal: {
									label: {
										show: true,		//开启显示
										position: 'top',	//在上方显示
									}
								}
							}
						})
					})
				}
				let optionData = {
					tooltip: {
					    trigger: 'axis',
					    axisPointer: {
					      type: 'shadow'
					    }
					},
					label:{
						normal:{
							show:true,
							position:"top"
						}
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid:{
						bottom: "1%",
						left: "3%",
						right: "1%",
						top:"15%",
						containLabel: true
					},
					xAxis: {
					    type: 'category',
					    data: data.data.xaxis,
					    axisPointer: {
					  		type: 'shadow'
					  	},
						axisLabel:{
							interval: 0
						}
					},
					yAxis: {
					    type: data.data.yaxis.type,
					    name:"定量指标同比环比",
					    max:data.data.yaxis.max,
					    min:data.data.yaxis.min,
					    nameTextStyle:{
							padding:[0,0,0,0]
						},
					    axisLabel: {
							formatter: '{value} '+data.data.yaxis.formatter
						}
					},
					series:seriesAry
				}
				dlDbHbFx.value.clear();
				dlDbHbFx.value.setOption(optionData)
				dlhbLoading.value=false
				
			}
		})
}
//定量指标目标达成分析
const dlDbHbFxMubiao = ref<any>()
const dlTargetThChartMubiao  = ref<any>(null)
const bdBdtTsMubiao = () =>{
	dlhbLoadingMb.value = true
	let timeYears = dingLiangDaChengYear.value.getFullYear()
	let sendInfo = {
		orgid:dingLiangDaChengOrg.value.toString(),
		targetid:dingLiangDaChengTarget.value,
		datetime:timeYears.toString()
	}
	bdBdtTs(sendInfo)
		.then((data:any) =>{
			console.log("val.toString",data)
			if(data.code == 0){
				let chartMapDateJixiaoDuo =  {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						  type: 'cross',
						  crossStyle: {
							color: '#999'
						  }
						}
					},
					grid:{
						bottom: "1%",
						containLabel: true,
						left: "0%",
						right: "0%"
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					legend: {
						data: data.data.legend
					},
					xAxis: [
						{
							type: 'category',
							data: data.data.xaxis,
							axisPointer: {
								type: 'shadow'
							},
							axisLabel:{
								interval: 0
							}
						}
					],
					yAxis: [
						{
							type: data.data.yaxis[0].type,
							name: data.data.yaxis[0].name,
							min: data.data.yaxis[0].min,
							max: data.data.yaxis[0].max,
							nameTextStyle:{
								padding:[0,0,0,100]
							},
							axisLabel: {
								formatter: '{value} '+data.data.yaxis[0].formatter,
								interval: 0
							}
						},
						{
							type: data.data.yaxis[1].type,
							name: data.data.yaxis[1].name,
							min: data.data.yaxis[1].min,
							max: data.data.yaxis[1].max,
				
							axisLabel: {
								formatter: '{value} '+data.data.yaxis[1].formatter,
								interval: 0
							},
							splitLine: {
								show: false
							}
						}
					],
					series: [
						{
							name: data.data.series[0].name,
							type: data.data.series[0].type,
							tooltip: {
								valueFormatter: function (value) {
									return value + data.data.series[0].tooltip;
								}
							},
							data: data.data.series[0].data
						},
						{
						  name: data.data.series[1].name,
						  type: data.data.series[1].type,
						  tooltip: {
							valueFormatter: function (value) {
							  return value + data.data.series[1].tooltip;
							}
						  },
						  data: data.data.series[1].data
						},
						{
						  name: data.data.series[2].name,
						  type: data.data.series[2].type,
						  yAxisIndex: 1,
						  tooltip: {
							valueFormatter: function (value) {
							  return value + data.data.series[2].tooltip;
							}
						  },
						  data: data.data.series[2].data
						}
					]
				}
				dlDbHbFxMubiao.value.clear();
				dlDbHbFxMubiao.value.setOption(chartMapDateJixiaoDuo)
				dlhbLoadingMb.value=false
			}
		})
}
//定性指标同比环比分析
const dxTargetDarw = ref<any>()
const dxTargetChart  = ref<any>(null)
const dxTargetLoad = ref(false)
const darwDxTargetChart = () => {
	dxTargetLoad.value = true
	let timeYears = dingXingYear.value.getFullYear()
	let sendInfo = {
		orgid:dingXingOrg.value.toString(),
		targetid:dingXingTarget.value,
		datetime:[timeYears]
	}
	bDtTsatTryoy(sendInfo)
		.then((data:any)=>{
			if(data.code == 0){
				let seriesAry = new Array
				if(data.data.series&&data.data.series.length>0){
					data.data.series.forEach((item:any)=>{
						seriesAry.push({
							type:'bar',
							data:item.data,
							tooltip:item.tooltip,
							name:item.name,
							itemStyle: {
								normal: {
									label: {
										show: true,		//开启显示
										position: 'bottom',	//在上方显示
									}
								}
							}
						})
					})
				}
				let optionData = {
					tooltip: {
					    trigger: 'axis',
					    axisPointer: {
					      type: 'shadow'
					    }
					},
					label:{
						normal:{
							show:true,
							position:"top"
						}
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid:{
						bottom: "1%",
						left: "3%",
						right: "1%",
						top:"15%",
						containLabel: true
					},
					xAxis: {
					    type: 'category',
					    data: data.data.xaxis,
					    axisPointer: {
					  		type: 'shadow'
					  	},
						axisLabel:{
							interval: 0
						}
					},
					yAxis: {
					    type: data.data.yaxis.type,
					    name:"定性指标同比环比分析",
					    max:data.data.yaxis.max,
					    min:data.data.yaxis.min,
					    nameTextStyle:{
							padding:[0,0,0,0]
						},
					    axisLabel: {
							formatter: '{value} '+data.data.yaxis.formatter
						}
					},
					series:seriesAry
				}
				dxTargetDarw.value.clear();
				dxTargetDarw.value.setOption(optionData)
			}
			dxTargetLoad.value = false
		})
}
onMounted(() => {
	let dataTime:any = new Date();
	dingXingYear.value = dataTime
	dingLiangDaChengYear.value = dataTime
	dingLiangYear.value = dataTime
	getCompanyMainSunOrg();
	dlDbHbFx.value = markRaw(echarts.init(dlTargetThChart.value));
	dlDbHbFxMubiao.value = markRaw(echarts.init(dlTargetThChartMubiao.value));
	dxTargetDarw.value = markRaw(echarts.init(dxTargetChart.value));
	// 大小自适应
	window.addEventListener('resize', () => {
		dlDbHbFx.value.resize();
		dlDbHbFxMubiao.value.resize();
		dxTargetDarw.value.resize();
	});
})


//历史同比获取指标列表
const alterDlTbhb = () => {
	drawDlTbHbFx();
}
const alterDlTbhbOrg = (id:any) => {
	orgAboutTarget(id.toString(),2,1)
}
//定量指标目标达成分析
const dlMuBiaoZhiBiao = () => {
	bdBdtTsMubiao()
}
const dlMuBiaoOrg = (id:any) => {
	orgAboutTarget(id.toString(),2,2)
}
//定性指标同比环比分析
const dxTargetGaibian = () => {
	darwDxTargetChart();
}
const dxOrgGaibian = (id:any) => {
	orgAboutTarget(id.toString(),1)
}
</script>
<template>
	<el-row :gutter="10">
		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
			<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
				<div class="orgAllMothsTitle">
					<el-row>
						<el-col :span="8">
							<el-date-picker
								v-model="dingXingYear"
								type="year"
								placeholder="请选择时间"
								style="width:100%"
							/>
						</el-col>
						<el-col :span="8">
							<el-select v-model="dingXingOrg" placeholder="" style="width:100%" @change="dxOrgGaibian">
								<el-option
									v-for="item in mainOrgList"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="8">
							<el-select v-model="dingXingTarget" placeholder="" style="width:100%" @change="dxTargetGaibian">
								<el-option
									v-for="item in targetXingListAry"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
					</el-row>
				</div>
				<div ref="dxTargetChart" v-loading="dxTargetLoad" element-loading-text="Loading..." class="allOrgAxisCares">
					
				</div>
			</el-card>
		</el-col>
		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
			<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
				<div class="orgAllMothsTitle">
					<el-row>
						<el-col :span="8">
							<el-date-picker
								v-model="dingLiangDaChengYear"
								type="year"
								placeholder="请选择时间"
								style="width:100%"
							/>
						</el-col>
						<el-col :span="8">
							<el-select v-model="dingLiangDaChengOrg" placeholder="" style="width:100%" @change="dlMuBiaoOrg">
								<el-option
									v-for="item in mainOrgList"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="8">
							<el-select v-model="dingLiangDaChengTarget" placeholder="" style="width:100%" @change="dlMuBiaoZhiBiao">
								<el-option
									v-for="item in targetListAry"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
					</el-row>
				</div> 
				<div ref="dlTargetThChartMubiao" v-loading="dlhbLoadingMb" element-loading-text="Loading..." class="allOrgAxisCares">
					
				</div>
			</el-card>
		</el-col>
		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
			<!--定量指标同比环比-->
			<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
				<div class="orgAllMothsTitle">
					<el-row>
						<el-col :span="8">
							<el-date-picker
								v-model="dingLiangYear"
								type="year"
								placeholder="请选择时间"
								style="width:100%"
								
							/>
						</el-col>
						<el-col :span="8">
							<el-select v-model="dingLiangOrg" placeholder="" style="width:100%" @change="alterDlTbhbOrg">
								<el-option
									v-for="item in mainOrgList"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="8">
							<el-select v-model="dingLiangTarget" placeholder="" style="width:100%" @change="alterDlTbhb">
								<el-option
									v-for="item in targetListAryes"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
					</el-row>
				</div>
				<div ref="dlTargetThChart"  v-loading="dlhbLoading" element-loading-text="Loading..." class="allOrgAxisCares">
					
				</div>
			</el-card>
		</el-col>
	</el-row>
</template>
<style  lang='scss' scoped>
.readback{
	// background-color:#FF0000;
	.allOrgAxisCares{
		display: block;
		width:100%;
		height:280px;
		overflow:auto;
	}
	
}
.orgAllMothsTitle{
	width:100%;
	display: flex;
	align-items: center;
	justify-content:space-between;
		
}
.greenColor{
	// background-color:#FFAC52;
	
	// padding:0 10px 0 10px;
}
.span_icon_left{
	margin-right:10px;
}
.cart_top_juLi{
	// margin-top:10px;
}
.titleInfo{
	font-size: 20px;
	font-weight: bold;
	
}
</style>