wisdomisitezwfront-web/src/views/goverment/huizhou/largeScreen/largeScreenTwo/components/RigthBottLeftView.vue

<template>
	<div class="rigthBottLeft" ref="rigthBottLeft" @click="goDataManagement">
		<div class="titlecent">投资管理</div>
		<div class="tile" ref="rigttitle">
			<div class="tilein" ref="rigttitlein"></div>
		</div>
		<div class="jiant"></div>
		<div class="jjiantcent">月度统计</div>
		<div class="sixcent">
			<div class="sicentin">
				<div class="sicentintop">本月受理请款金额(万元)</div>
				<div class="sicentinbot">
					<div class="sicentinbottop">{{ dataObj.paymentByMonth }}</div>
					<!-- <div class="sicentinbotbot">
						<div>累计总额(万)</div>
						<div>206</div>
					</div> -->
				</div>
			</div>
			<div class="sicentin">
				<div class="sicentintop">本月核准应付金额(万元)</div>
				<div class="sicentinbot">
					<div class="sicentinbottop">{{ dataObj.applyAmountByMonth }}</div>
					<!-- <div class="sicentinbotbot">
						<div>累计总额(万)</div>
						<div>206</div>
					</div> -->
				</div>
			</div>
			<div class="sicentin">
				<div class="sicentintop">本月实际应付金额(万元)</div>
				<div class="sicentinbot">
					<div class="sicentinbottop">{{ dataObj.realPayAmountByMonth }}</div>
					<!-- <div class="sicentinbotbot">
						<div>累计总额(万)</div>
						<div>206</div>
					</div> -->
				</div>
			</div>
			<div class="sicentin">
				<div class="sicentintop">本月未付账款金额(万元)</div>
				<div class="sicentinbot">
					<div class="sicentinbottop">{{ dataObj.unPayAmountByMonth }}</div>
					<!-- <div class="sicentinbotbot">
						<div>累计总额(万)</div>
						<div>6</div>
					</div> -->
				</div>
			</div>
			<!-- <div class="sicentin">
				<div class="sicentintop">本月下达罚单金额(万元)</div>
				<div class="sicentinbot">
					<div class="sicentinbottop">0</div>
					<div class="sicentinbotbot">
						<div>累计总额(万)</div>
						<div>0</div>
					</div>
				</div>
			</div>
			<div class="sicentin">
				<div class="sicentintop">本月项目变更金额(万元)</div>
				<div class="sicentinbot">
					<div class="sicentinbottop">0</div>
					<div class="sicentinbotbot">
						<div>累计总额(万)</div>
						<div>0</div>
					</div>
				</div>
			</div> -->
		</div>
		<div class="jianta"></div>
		<div class="jiantacent">投资KPI</div>
		<div class="jiantb"></div>
		<div class="jiantbcent">支付KPI</div>
		<div class="botttwo">
			<div class="botttwoleft">
				<div id="jindua" class="jindua" ref="jindua"></div>
				<div id="jindub" class="jindub" ref="jindub"></div>
				<div id="jinduc" class="jinduc" ref="jinduc"></div>

				<div class="jt" style="top: 5%"></div>
				<div class="jt" style="top: 38.3%"></div>
				<div class="jt" style="top: 71.6%"></div>

				<div class="titcen" style="top: 7%">
					<div>总投资预算</div>
					<div>{{ dataObj.totalAmount }}万元</div>
				</div>
				<div class="titcen" style="top: 40.3%">
					<div>实际投资预算</div>
					<div>{{ dataObj.settlementAmount }}万元</div>
				</div>
				<div class="titcen" style="top: 73.6%">
					<div>年度投资预算</div>
					<div>{{ dataObj.settlementAmountByYear }}万元</div>
				</div>
			</div>
			<div class="botttworigt">
				<div class="jts" style="top: 6%"></div>
				<div class="jts" style="top: 31%"></div>
				<div class="jts" style="top: 56%"></div>
				<div class="jts" style="top: 81%"></div>

				<div class="jindud" ref="jindud"></div>
				<div class="jindue" ref="jindue"></div>

				<div class="letcent" style="top: 6%">
					<div>请款报审</div>
					<div>{{ dataObj.paymentTotal }}万元</div>
				</div>
				<div class="letcent" style="top: 31%">
					<div>审定应付</div>
					<div>{{ dataObj.applyAmountTotal }}万元</div>
				</div>
				<div class="letcent" style="top: 56%">
					<div>实际支付</div>
					<div>{{ dataObj.realPayAmountTotal }}万元</div>
				</div>
				<div class="letcent" style="top: 81%">
					<div>年度实际支付</div>
					<div>{{ dataObj.realPayAmountByYear }}万元</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import { screenInverstment } from "@/api/modules/huizhou";

const router = useRouter();
// import pinia from "@/store/index";
// import { useStore } from "@/store/module";
// const store = useStore(pinia);
const jindua = ref();
const jindub = ref();
const jinduc = ref();
const jindud = ref();
const jindue = ref();
const shousuo = ref(false);
const rigttitle = ref();
const rigttitlein = ref();
const dataObj = ref({});

const rigthBottLeft = ref();
const getInvestMentData = async () => {
	const res = await screenInverstment({});
	console.log(res);
	if (res && res.result) {
		dataObj.value = res.result;
	}
};
onMounted(async () => {
	console.log(666);
	await getInvestMentData();
	setjindua();
	setjindub();
	setjinduc();
	setjindud();
	setjindue();
});

// watch(	() => store.shousuo,
// 	(newl, _) => {
// 		if (newl== true) {
// 		rigthBottLeft.value.style.animation = 'slide-rigthBottLefta 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'
// 		rigttitle.value.style.animation = 'slide-rigttitlea 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'
// 		rigttitlein.value.style.animation = 'slide-rigttitleina 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'
// 	} else {
// 		rigthBottLeft.value.style.animation = 'slide-rigthBottLeftb 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'
// 		rigttitle.value.style.animation = 'slide-rigttitleb 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'
// 		rigttitlein.value.style.animation = 'slide-rigttitleinb 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'
// 	}
// })
const goDataManagement = () => {
	router.push("/goverment/huizhou/progressManagement/investmentPayment/index");
};
const setjindua = () => {
	let myChart = echarts.init(jindua.value);
	myChart.setOption({
		title: [
			{
				top: "40%",
				left: "center",
				text: dataObj.value.payRatio + "%",
				textStyle: {
					color: "#fff",
					fontSize: 16
					// fontWeight: 300
				}
			}
		],
		series: [
			{
				type: "pie",
				center: ["50%", "50%"],
				radius: ["79%", "80%"],
				borderCap: "round",
				data: [
					{
						name: "",
						value: dataObj.value.realPayAmountTotal,
						labelLine: {
							show: false
						},
						itemStyle: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "#42aef5"
								},
								{
									offset: 0.8,
									color: "#00feff"
								}
							]),
							borderWidth: 6
						},
						label: {
							show: false,
							position: "center"
						}
					},

					{
						//画中间的图标
						name: "",
						value: 0,
						label: {
							position: "inside",
							backgroundColor: {
								image:
									"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAA57GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMjEtMTEtMjZUMTQ6MjU6MDcrMDg6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAyMS0xMS0zMFQxMDozNDoyNyswODowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMjEtMTEtMzBUMTA6MzQ6MjcrMDg6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6OWJlNGIzODEtZTAyMS0zOTRkLTlmN2MtN2JlZjRmMTI3YWUwPC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD5hZG9iZTpkb2NpZDpwaG90b3Nob3A6MDYxOWM0NDEtNTE4Ni0xMWVjLTgyZWItYTIzZGQ0MjVlMWI5PC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06T3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6MjNhNzdkYWUtMTdlYS0xNjQyLTgyMzEtOTg3NDYwYjQxZjQ0PC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+Y3JlYXRlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6aW5zdGFuY2VJRD54bXAuaWlkOjIzYTc3ZGFlLTE3ZWEtMTY0Mi04MjMxLTk4NzQ2MGI0MWY0NDwvc3RFdnQ6aW5zdGFuY2VJRD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAyMS0xMS0yNlQxNDoyNTowNyswODowMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC9zdEV2dDpzb2Z0d2FyZUFnZW50PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDo5YmU0YjM4MS1lMDIxLTM5NGQtOWY3Yy03YmVmNGYxMjdhZTA8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMjEtMTEtMzBUMTA6MzQ6MjcrMDg6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MzI8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MzI8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICA
							},
							shadowColor: "rgba(18, 64, 123, 0.38)",
							shadowBlur: 4,
							padding: 10,
							distance: 0
						}
					},
					{
						//画剩余的刻度圆环
						name: "",
						value: dataObj.value.totalAmount - dataObj.value.realPayAmountTotal,

						itemStyle: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "#084073"
								},
								{
									offset: 1,
									color: "#084073"
								}
							]),
							borderWidth: 4
						},
						label: {
							show: false,
							position: "center"
						},
						labelLine: {
							show: false
						}
					},
					{
						// 解决叠加明显的问题
						name: "",
						value: 0.2,
						itemStyle: {
							color: "rgba(0,0,0,0)"
						}
					}
				]
			}
		]
	});
};
const setjindub = () => {
	let myChart = echarts.init(jindub.value);
	myChart.setOption({
		title: [
			{
				top: "40%",
				left: "center",
				text: dataObj.value.payRatio1 + "%",
				textStyle: {
					color: "#fff",
					fontSize: 16
					// fontWeight: 300
				}
			}
		],
		series: [
			{
				type: "pie",
				center: ["50%", "50%"],
				radius: ["79%", "80%"],
				borderCap: "round",
				data: [
					{
						name: "",
						value: dataObj.value.realPayAmountTotal,
						labelLine: {
							show: false
						},
						itemStyle: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "#aaffd0"
								},
								{
									offset: 0.8,
									color: "#07fe77"
								}
							]),
							borderWidth: 6
						},
						label: {
							show: false,
							position: "center"
						}
					},

					{
						//画中间的图标
						name: "",
						value: 0,
						label: {
							position: "inside",
							backgroundColor: {
								image:
									"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAA57GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMjEtMTEtMjZUMTQ6MjU6MDcrMDg6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAyMS0xMS0zMFQxMDozNDoyNyswODowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMjEtMTEtMzBUMTA6MzQ6MjcrMDg6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6OWJlNGIzODEtZTAyMS0zOTRkLTlmN2MtN2JlZjRmMTI3YWUwPC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD5hZG9iZTpkb2NpZDpwaG90b3Nob3A6MDYxOWM0NDEtNTE4Ni0xMWVjLTgyZWItYTIzZGQ0MjVlMWI5PC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06T3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6MjNhNzdkYWUtMTdlYS0xNjQyLTgyMzEtOTg3NDYwYjQxZjQ0PC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+Y3JlYXRlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6aW5zdGFuY2VJRD54bXAuaWlkOjIzYTc3ZGFlLTE3ZWEtMTY0Mi04MjMxLTk4NzQ2MGI0MWY0NDwvc3RFdnQ6aW5zdGFuY2VJRD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAyMS0xMS0yNlQxNDoyNTowNyswODowMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC9zdEV2dDpzb2Z0d2FyZUFnZW50PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDo5YmU0YjM4MS1lMDIxLTM5NGQtOWY3Yy03YmVmNGYxMjdhZTA8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMjEtMTEtMzBUMTA6MzQ6MjcrMDg6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MzI8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MzI8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICA
							},
							shadowColor: "rgba(18, 64, 123, 0.38)",
							shadowBlur: 4,
							padding: 10,
							distance: 0
						}
					},
					{
						//画剩余的刻度圆环
						name: "",
						value: dataObj.value.settlementAmount - dataObj.value.realPayAmountTotal,

						itemStyle: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "#084073"
								},
								{
									offset: 1,
									color: "#084073"
								}
							]),
							borderWidth: 4
						},
						label: {
							show: false,
							position: "center"
						},
						labelLine: {
							show: false
						}
					},
					{
						// 解决叠加明显的问题
						name: "",
						value: 0.2,
						itemStyle: {
							color: "rgba(0,0,0,0)"
						}
					}
				]
			}
		]
	});
};
const setjinduc = () => {
	let myChart = echarts.init(jinduc.value);
	myChart.setOption({
		title: [
			{
				top: "40%",
				left: "center",
				text: dataObj.value.payRatio2 + "%",
				textStyle: {
					color: "#fff",
					fontSize: 16
					// fontWeight: 300
				}
			}
		],
		series: [
			{
				type: "pie",
				center: ["50%", "50%"],
				radius: ["79%", "80%"],
				// hoverAnimation: false,
				borderCap: "round",
				data: [
					{
						name: "",
						value: dataObj.value.realPayAmountByYear,
						labelLine: {
							show: false
						},
						itemStyle: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "#ffdbaa"
								},
								{
									offset: 0.8,
									color: "#ffa524"
								}
							]),
							borderWidth: 6
						},
						label: {
							show: false,
							position: "center"
						}
					},

					{
						//画中间的图标
						name: "",
						value: 0,
						label: {
							position: "inside",
							backgroundColor: {
								image:
									"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAA57GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMjEtMTEtMjZUMTQ6MjU6MDcrMDg6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAyMS0xMS0zMFQxMDozNDoyNyswODowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMjEtMTEtMzBUMTA6MzQ6MjcrMDg6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6OWJlNGIzODEtZTAyMS0zOTRkLTlmN2MtN2JlZjRmMTI3YWUwPC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD5hZG9iZTpkb2NpZDpwaG90b3Nob3A6MDYxOWM0NDEtNTE4Ni0xMWVjLTgyZWItYTIzZGQ0MjVlMWI5PC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06T3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6MjNhNzdkYWUtMTdlYS0xNjQyLTgyMzEtOTg3NDYwYjQxZjQ0PC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+Y3JlYXRlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6aW5zdGFuY2VJRD54bXAuaWlkOjIzYTc3ZGFlLTE3ZWEtMTY0Mi04MjMxLTk4NzQ2MGI0MWY0NDwvc3RFdnQ6aW5zdGFuY2VJRD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAyMS0xMS0yNlQxNDoyNTowNyswODowMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC9zdEV2dDpzb2Z0d2FyZUFnZW50PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDo5YmU0YjM4MS1lMDIxLTM5NGQtOWY3Yy03YmVmNGYxMjdhZTA8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMjEtMTEtMzBUMTA6MzQ6MjcrMDg6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MzI8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MzI8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICA
							},
							shadowColor: "rgba(18, 64, 123, 0.38)",
							shadowBlur: 4,
							padding: 10,
							distance: 0
						}
					},
					{
						//画剩余的刻度圆环
						name: "",
						value: dataObj.value.totalAmountByYear - dataObj.value.realPayAmountByYear,

						itemStyle: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "#084073"
								},
								{
									offset: 1,
									color: "#084073"
								}
							]),
							borderWidth: 4
						},
						label: {
							show: false,
							position: "center"
						},
						labelLine: {
							show: false
						}
					},
					{
						// 解决叠加明显的问题
						name: "",
						value: 0.2,
						itemStyle: {
							color: "rgba(0,0,0,0)"
						}
					}
				]
			}
		]
	});
};
const setjindud = () => {
	let myChart = echarts.init(jindud.value);
	let data = [
		{
			name: "请款报审",
			value: dataObj.value.paymentTotal
		},
		{
			name: "",
			value: dataObj.value.totalAmount - dataObj.value.paymentTotal
		}
	];
	myChart.setOption({
		title: {
			text: "请款情况",
			top: "52%",
			left: "center",
			textStyle: {
				color: "white",
				fontSize: 14
			}
		},
		color: [
			{
				type: "linear",
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: "#12FFE0" // 0% 处的颜色
					},
					{
						offset: 1,
						color: "#3BFE9B" // 100% 处的颜色
					}
				],
				global: false // 缺省为 false
			},
			{
				type: "linear",
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: "#14B4C8" // 0% 处的颜色
					},
					{
						offset: 1,
						color: "#415286" // 100% 处的颜色
					}
				],
				global: false // 缺省为 false
			}
		],
		tooltip: {
			show: true
		},
		series: [
			// 主要展示层的
			{
				radius: ["50%", "81%"],
				center: ["50%", "60%"],
				type: "pie",
				label: {
					show: false
				},

				labelLine: {
					show: true,
					length: 20,
					length2: 35,
					itemStyle: {
						show: false
					}
				},
				data: data
			}
		]
	});
};
const setjindue = () => {
	let myChart = echarts.init(jindue.value);
	let data = [
		{
			name: "实际支付",
			value: dataObj.value.realPayAmountTotal
		},
		{
			name: "",
			value: dataObj.value.totalAmount - dataObj.value.realPayAmountTotal
		}
	];
	myChart.setOption({
		title: {
			text: "支付情况",
			top: "52%",
			left: "center",
			textStyle: {
				color: "white",
				fontSize: 14
			}
		},
		color: [
			{
				type: "linear",
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: "#FE8D61" // 0% 处的颜色
					},
					{
						offset: 1,
						color: "#FD5F6B" // 100% 处的颜色
					}
				],
				global: false // 缺省为 false
			},
			{
				type: "linear",
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: "#E4CB8B" // 0% 处的颜色
					},
					{
						offset: 1,
						color: "#E4A45D" // 100% 处的颜色
					}
				],
				global: false // 缺省为 false
			}
		],
		tooltip: {
			show: true
		},
		series: [
			// 主要展示层的
			{
				radius: ["50%", "81%"],
				center: ["50%", "60%"],
				type: "pie",
				label: {
					show: false
				},

				labelLine: {
					show: true,
					length: 20,
					length2: 35,
					itemStyle: {
						show: false
					}
				},
				data: data
			}
		]
	});
};
</script>
<style scoped lang="scss">
.rigthBottLeft {
	width: 100%;
	height: 683px;
	background-color: #060f2c;
	border: 1px solid #084b60;
	cursor: pointer;
	.titlecent {
		position: absolute;
		top: 10px;
		left: 30px;
		font-size: 24px;
		color: #a6b8d2;
		letter-spacing: 5px;
	}
	.tile {
		position: absolute;
		top: 6px;
		width: 99%;
		height: 43px;
		background: url("@/assets/images/xmgl/title_01.png") top left no-repeat,
			url("@/assets/images/xmgl/title_05.png") top right no-repeat;
		.tilein {
			width: 88.4%;
			height: 43px;
			margin-left: 4.6%;
			background: url("@/assets/images/xmgl/title_03.png") center repeat-x;
		}
	}
	.jiant {
		position: absolute;
		top: 65px;
		left: 30px;
		width: 19px;
		height: 15px;
		background: url("@/assets/images/xmgl/little_01.png") no-repeat;
		background-size: 100% 100%;
	}
	.jjiantcent {
		position: absolute;
		top: 61px;
		left: 60px;
		font-size: 20px;
		color: #e8e9ef;
	}
	.sixcent {
		position: absolute;
		top: 90px;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 220px;
		.sicentin {
			display: flex;
			flex-wrap: wrap;
			width: 49.5%;
			height: 50%;
			.sicentintop {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;

				// border: 1px solid red;
				height: 50%;
				font-size: 21px;
				color: #f5f5f5;
			}
			.sicentinbot {
				display: flex;
				width: 100%;
				height: 50%;
				justify-content: center;
				.sicentinbottop {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 60%;
					height: 100%;
					font-size: 36px;
					font-weight: 600;
					color: #00ccff;
				}
				.sicentinbotbot {
					// border: 1px solid red;
					display: flex;
					flex-wrap: wrap;
					width: 40%;
					height: 100%;
					div {
						display: flex;
						align-items: center;
					}
					div:nth-child(1) {
						width: 100%;
						height: 50%;
						font-size: 18px;
						color: #02a1cd;
					}
					div:nth-child(2) {
						width: 100%;
						height: 50%;
						font-weight: bold;
						color: #ffa200;
					}
				}
			}
		}
	}
	.jianta {
		position: absolute;
		top: 330px;
		left: 30px;
		width: 19px;
		height: 15px;
		background: url("@/assets/images/xmgl/little_01.png") no-repeat;
		background-size: 100% 100%;
	}
	.jiantacent {
		position: absolute;
		top: 326px;
		left: 60px;
		font-size: 20px;
		color: #e8e9ef;
	}
	.jiantb {
		position: absolute;
		top: 330px;
		left: 50%;
		width: 19px;
		height: 15px;
		background: url("@/assets/images/xmgl/little_01.png") no-repeat;
		background-size: 100% 100%;
	}
	.jiantbcent {
		position: absolute;
		top: 326px;
		left: 55%;
		font-size: 20px;
		color: #e8e9ef;
	}
	.botttwo {
		position: absolute;
		top: 350px;
		display: flex;
		width: 100%;
		height: 341px;
		.botttwoleft {
			width: 50%;
			height: 100%;
			.jindua {
				width: 50%;
				height: 33.3%;
			}
			.jindub {
				width: 50%;
				height: 33.3%;
			}
			.jinduc {
				width: 50%;
				height: 33.3%;

				// border: 1px solid red;
			}
			.jt {
				position: absolute;
				left: 25%;
				width: 11px;
				height: 11px;
				background: url("@/assets/images/xmgl/jt.png") no-repeat;
			}
			.titcen {
				position: absolute;
				left: 27%;
				display: flex;
				flex-direction: column;
				width: 140px;
				font-size: 22px;
				font-weight: 500;
				color: #ffffff;
				white-space: nowrap;
				div:nth-child(2) {
					font-size: 20px;
				}
			}
		}
		.botttworigt {
			position: relative;
			width: 50%;
			height: 100%;
			.jts {
				position: absolute;
				right: 45%;
				width: 11px;
				height: 11px;
				background: url("@/assets/images/xmgl/jt.png") no-repeat;
			}
			.jindud {
				width: 50%;
				height: 50%;
			}
			.jindue {
				width: 50%;
				height: 50%;
			}
			.letcent {
				position: absolute;
				right: 0;
				display: flex;
				flex-direction: column;
				float: right;
				width: 45%;
				height: 19%;
				div {
					display: flex;
					align-items: center;
					width: 100%;
					height: 50%;
					color: #ffffff;
					white-space: nowrap;
				}
				div:nth-child(1) {
					font-size: 22px;
				}
				div:nth-child(2) {
					font-size: 20px;
				}
			}
		}
	}
}
</style>