zhgdyun/src/views/sevenLargeScreen/laborManagement/leftBottom.vue

<template>
	<div class="leftBottomBox">
		<div class="leftEchars">
			<Card title="出勤分析">
				<div class="selectRight">
					<el-date-picker
						style="width: 100%"
						v-model="value1"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
					<!-- <el-select v-model="value" class="m-2" placeholder="Select" size="small">
						<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select> -->
				</div>

				<div id="myEchartsBottom" ref="myEchartsBottom" style="width: 100%; height: 100%"></div>
			</Card>
		</div>
		<div class="rightEchars">
			<CardBig title="劳务班组出勤分析">
				<div class="box">
					<div class="circularG">
						<CircularGraph></CircularGraph>
					</div>
					<div class="horizontaL">
						<HorizontaL></HorizontaL>
					</div>
				</div>
			</CardBig>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { getQueryTodayOfTheLastWeekApi } from "@/api/modules/labor";
import HorizontaL from "@/views/sevenLargeScreen/laborManagement/horizontaL.vue";
import CircularGraph from "@/views/sevenLargeScreen/laborManagement/circularGraph.vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import CardBig from "@/components/cardBig.vue";
import { onMounted, reactive, ref } from "vue";
import { GlobalStore } from "@/stores";

const store = GlobalStore();
const value = ref("周计划14");

const noiseList = [
	{
		value: 0,
		label: "周计划14"
	}
];
let xData = ref([]);
let yData = ref([]);
const option = reactive({
	// backgroundColor: '#071c3a',
	title: {
		// text: '日用气量分析',
		textStyle: {
			align: "center",
			color: "#fff",
			fontSize: 20
		},
		top: "10%",
		left: "center"
	},
	//  legend: {
	//     color: ["#17B4FA", "#47D8BE", "#F9A589"],
	//     // data: ['日用气量分析'],
	//     left: 'center',
	//      top: "8%",
	//      textStyle: {
	//         color: "#ffffff"
	//     }
	// },
	tooltip: {
		trigger: "axis",
		axisPointer: {
			lineStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "rgba(0, 255, 233,0)"
						},
						{
							offset: 0.5,
							color: "rgba(255, 255, 255,1)"
						},
						{
							offset: 1,
							color: "rgba(0, 255, 233,0)"
						}
					],
					global: false
				}
			}
		}
	},
	grid: {
		top: "30%",
		left: "12%",
		right: "5%",
		bottom: "15%"
		// containLabel: true
	},
	xAxis: [
		{
			type: "category",
			axisLine: {
				show: true,
				lineStyle: {
					color: "#14346C"
				}
			},
			splitArea: {
				// show: true,
				color: "#f00",
				lineStyle: {
					color: "#f00"
				}
			},
			axisLabel: {
				color: "#fff"
			},
			splitLine: {
				show: false
			},
			boundaryGap: false,
			data: xData.value
		}
	],

	yAxis: [
		{
			type: "value",
			// name: "单位:ug/m³",
			nameTextStyle: {
				color: "#fff",
				nameLocation: "start"
			},
			min: 0,
			// max: 140,
			splitNumber: 3,
			splitLine: {
				show: true,
				lineStyle: {
					color: "#14346C"
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#14346C"
				}
			},
			axisLabel: {
				show: true,
				margin: 20,
				textStyle: {
					color: "#fff"
				}
			},
			axisTick: {
				show: true
			}
		}
	],
	series: [
		{
			type: "line",
			// smooth: true, //是否平滑
			showAllSymbol: true,
			// symbol: 'image://./static/images/guang-circle.png',
			symbol: "circle",
			symbolSize: 10,
			lineStyle: {
				normal: {
					color: "#fff",
					shadowBlur: 0
				}
			},
			label: {
				show: false,
				position: "top",
				textStyle: {
					color: "#fff"
				}
			},
			itemStyle: {
				color: "#A3EAFF",
				borderColor: "#82FBEA",
				borderWidth: 5,
				shadowColor: "rgba(0, 0, 0, .6)",
				shadowBlur: 0
			},
			lineStyle: {
				normal: {
					width: 1
				}
			},
			tooltip: {
				show: true
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: "rgba(130, 251, 234,0.5)"
							},
							{
								offset: 1,
								color: "rgba(130, 251, 234,0.1)"
							}
						],
						false
					),
					shadowColor: "rgba(130, 251, 234, 0.2",
					shadowBlur: 20
				}
			},
			data: yData.value
		}
	]
});
function drawChart() {
	let myEchartsBottom = echarts.init(document.getElementById("myEchartsBottom"));
	myEchartsBottom.setOption(option);
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}

//获取出勤分析数据
const getOfTheLastWeekList = async () => {
	const res = await getQueryTodayOfTheLastWeekApi({
		projectSn: store.sn
	});
	if (res.result) {
		res.result.forEach(item => {
			xData.value.push(item.time);
			yData.value.push(item.num);
		});
	}
	drawChart();
	console.log("获取出勤分析数据", res);
};

onMounted(async () => {
	getOfTheLastWeekList();
});
</script>

<style lang="scss" scoped>
.leftBottomBox {
	width: 100%;
	height: 100%;
	display: flex;
	.leftEchars {
		width: 35%;
		.selectRight {
			position: absolute;
			left: 15%;
			width: 9%;
			top: 75%;
			z-index: 9;
		}
	}
	.rightEchars {
		width: 65%;
		margin: 0 1.7% 0 1%;
		.box {
			width: 100%;
			height: 100%;
			display: flex;
		}
		.circularG {
			width: 50%;
		}
		.horizontaL {
			width: 50%;
		}
	}
}
// ::v-deep .el-input__wrapper {
// 	background: #112d59;
// }
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
::v-deep .el-input__wrapper {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
</style>