<template>
	<div class="gwdb-container">
		<pie style="height: 100%;width: 100%;" ids="lawPie" :pieNum="pieData" v-if="pieData.length > 0"></pie>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import pie from "@/views/law/components/charts/pie.vue";

const key2 = ref(1)
/* 饼图数据 */
const pieData = ref([]); const serData = ref([
	{ name: "已达标", type: "bar", data: [0, 0, 0] },
	{ name: "未达标", type: "bar", data: [0, 0, 0] },
	{ name: "不达标", type: "bar", data: [0, 0, 0] }
])
function getcount() {
	getApi({}, `/mosty-jcgl/gwdb/getGwdbState`).then((res) => {
		if (res) {
			pieData.value = [
				{ name: "已达标", value: res.dbtotal },
				{ name: "可达标", value: res.kdbtotal },
				{ name: "不达标", value: res.bdbtotal }
			];
			serData.value[0].data = [res.db03, res.db02, res.db01],
				serData.value[1].data = [res.kdb03, res.kdb02, res.kdb01],
				serData.value[2].data = [res.bdb03, res.bdb02, res.bdb01]
			key2.value++
		}
	});
}
onMounted(() => {
	getcount();
})
</script>

<style lang="scss" scope>
.gwdb-container {
	width: 100%;
	height: 100%;
}

.echar {
	height: calc(100% - 10px);
	width: 100%;
	border: 1px solid #ECECEC;
	margin-bottom: 20px;
}
</style>