zhgdlarge/src/views/commandScreen/commandCenter/leftBottom.vue

<template>
	<div class="leftBottom">
		<div class="header">
			<div class="hLeft">项目人员考勤</div>
		</div>
		<div class="content">
			<div class="contentTop">
				<div class="line1">
					<span>出勤人员总数:</span>
					<div class="numberCard" v-for="(item,i) in '0234'" :key="i">{{item}}</div>
					<span style="margin-left:15px">考勤日环比</span>
					<div class="dayRadio">0.22%</div>
					<div class="iconCenter"><el-icon size="20" color="#0262c7"><Top/></el-icon></div>
				</div>
				<div class="line2">
					<div :class="['line2Item',activeIndex === '0' ? 'activeTab' : '']" @click="handleTab('0')">总包出勤情况分析</div>
					<div :class="['line2Item',activeIndex === '1' ? 'activeTab' : '']" @click="handleTab('1')">人员风险趋势分析</div>
				</div>
				<div class="barContent">
					<div id="bar" style="width:98%;height:100%" ref="bar"></div>
				</div>
			</div>
			<div class="centerBottom">
				<div class="cbTop">
					<div class="header"><div class="hLeft">进度情况分析</div></div>
					<div class="content" style="backgound:black">
						<div class="cbLine1">
							<div style="display:flex">
								<span>项目总进度:</span>
								<div class="numberCard" v-for="(item,i) in '023'" :key="i">{{item}}</div>
								<span style="margin-left:5px">%</span>
							</div>
							<div style="display:flex">
								<span style="margin-left:15px">项目剩余天数</span>
								<div class="numberCard" v-for="(item,i) in '0234'" :key="i">{{item}}</div>
								<span style="margin-left:5px">天</span>
							</div>
						</div>
						<div class="cbProcess">
							<vue3-seamless-scroll 
							v-if="listData.length>0" :list="listData" 
							:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll">
								<div class="pItem" v-for="(item,i) in listData" :key="i">
									<div class="pLeft">
										<span :class="['plInner','plBgc'+(i+1)%12]">
											<span style="margin-left:10px">Top{{i+1}}</span>
										</span>
									</div>
									<div class="pRight">
										<div class="prTop">
											<div class="prtLeft">{{item.a}}</div>
											<div class="prtRight">{{item.b}}%</div>
										</div>
										<div class="prBottom">
											<div class="processLineBg">
												<div :class="['processLine','plBtnBgc'+(i+1)%12]" :style="{width:item.b+'%'}">
													<div class="processLineBtn"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</vue3-seamless-scroll>
						</div>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
import { getMemberJobStatusApi, getInspectManStatusApi, getEnterpriseStatusApi } from "@/api/modules/agjtCommandApi";
import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
import type { TabsPaneContext, ElMessageBox } from "element-plus";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { GlobalStore } from "@/stores";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const store = GlobalStore();
const activeName = ref("总包出勤情况分析");
const activeIndex = ref("0" as any);

//切换tab
const handleTab = (val:string) => {
	activeIndex.value = val
}
//绘画柱状图
let testData = ref({
	xData:['中铝山东','中冶沈勘','鞍山电力','鞍钢矿业','上海建工','辽宁普凡','沈阳隆基','中科过程','宏大爆破','鞍钢设计'],
	yData:[78,56,66,33,53,11,77,51,78,90,],
	hData:[
		{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
		{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
		{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
		{a:120,b:100,c:'12%',d:'45%'},
	]
} as any)
function drawBar() {
	console.log("---------------------bar--------")
	type EChartsOption = echarts.EChartsOption;
	var chartDom = document.getElementById('bar')!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;

	option = {
		xAxis: {
			type: 'category',
			// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			data: testData.value.xData,
			axisLabel: {
				fontSize: 8, // 设置字体大小为12px
			},
			axisLine: {
				lineStyle: {
					color: 'white' // 设置X轴刻度线的颜色为灰色
				}
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				fontSize: 8, // 设置字体大小为12px
			},
			axisLine: {
				lineStyle: {
					color: 'white' // 设置Y轴刻度线的颜色为灰色
				}
			},
			// show:false
		},
		grid: {
			top: "8%", 
			right: "0",
			left:"5%",
			bottom: "12%",
			
		},
		series: [{
			// data: [120, 200, 150, 80, 70, 110, 130],
			data: testData.value.yData,
			type: 'bar',
			itemStyle: {
				color: '#3398DB' // 设置柱状图颜色为蓝色
			},
			emphasis: {
				itemStyle: {
					// color: '#8B0000' // 设置鼠标悬浮时的颜色为深红色
					// color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
					color: '#00008B' // 设置鼠标悬浮时的颜色为深蓝色
				}
			}
		}],
		tooltip: {
			borderColor: 'rgba(50,50,50, 0.5)',
			backgroundColor: 'rgba(50,50,50, 0.5)', 
			textStyle: { color: '#fff',fontSize:'13'},
			formatter: function(params) {
				console.log(params)
				return '<div style="font-weight:bold">'+params.name+'</div>' + 
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:darkred">●</span>在册人员：'+params.data+'</div>' + 
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:yellow">●</span>出勤人员总数：'+params.data+'</div>' +
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:darkblue">●</span>出勤率：'+params.data+'%</div>' +
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:green">●</span>出勤率日环比：'+params.data+'%</div>';
			}
		}
	};
	// window.addEventListener('resize',function(){
    //       myChart.resize()
    //   })

	option && myChart.setOption(option);
}

//进度数据
let listData = ref([
	{a:'新地能源工程技术有限公司',b:'54'},{a:'中冶沈勘秦皇岛工程设计研究总院有限公司',b:'23'},{a:'鞍山电力实业有限公司',b:'49'},{a:'鞍钢矿业资源利用（鞍山）有限公司',b:'35'},
	{a:'上海建工五建集团有限公司',b:'34'},{a:'辽宁普凡建设有限公司',b:'67'},{a:'沈阳隆基电磁科技股份有限公司',b:'56'},{a:'中国科学院过程工程研究所',b:'78'},
	{a:'宏大爆破工程集团有限责任公司',b:'45'},{a:'鞍钢集团矿业设计研究院有限公司',b:'23'},{a:'辽宁电力能源发展集团监理有限公司鞍山分公司',b:'69'},{a:'辽宁五寰特种材料与智能装备产业技术研究院有限公司',b:'27'},
	{a:'中铝山东工程技术有限公司',b:'59'},{a:'中国华冶科工集团有限公司',b:'14'},{a:'沈阳岩土工程技术测试开发有限公司',b:'38'},{a:'永明项目管理有限公司',b:'41'},
] as any)

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

<style lang="scss" scoped>
.leftBottom {
	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
	background-size: 100% 100%;
	height: 100%;

	.header {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #0059ff;
		.hLeft {
			width: 50%;
			font-size: 20px;
			font-weight: bold;
			background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
	}

	.content {
		// background-color: darkred;
		height: 92.5%;
		.contentTop {
			padding: 0 10px;
			height: 40%;
			// background-color: #fff;
			font-size: 13px;
			.line1{
				color: #fff;
				padding-top: 5px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				line-height: 30px;
				height: 30px;
				font-size: 15px;
				.numberCard{
					font-size: 15px;
					padding: 0 8px;
					margin-left: 3px;
					font-weight: bold;
					color: #47bcec;
					background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
					background-size: 100% 100%;
				}
				.dayRadio{
					font-size: 15px;
					margin-left: 15px;
					font-weight: bold;
					color: #47bcec;
				}
				.iconCenter{
					display:flex;
					justify-content:center;
					align-items:center
				}
			}
			.line2{
				padding-top: 5px;
				display:flex;
				justify-content:flex-start;
				align-items:center;
				line-height:25px;
				height: 25px;
				.line2Item{
					color: #fff;
					width: 120px;
					text-align: center;
					cursor: pointer;
					// background-color: #fff;
					background: rgb(0,33,116);
					background: linear-gradient(270deg, rgba(0,33,116,0.8) 0%, rgba(40,88,184,0.3) 96%);
				}
				.activeTab{
					background: rgb(0,33,116);
					background: linear-gradient(270deg, rgba(0,33,116,1) 0%, rgba(40,88,184,1) 96%);
				}
			}
			.barContent{
				height: calc(100% - 65px);
			}
		}

		.centerBottom {
			height: 60%;
			position: relative;

			.cbTop {
				width: 100%;
				height: 100%;

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// padding: 20px 20px;
					border-bottom: 1px solid #0059ff;

					.hLeft {
						width: 50%;
						font-size: 20px;
						font-weight: bold;
						background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
					}
				}

				.content {
					padding: 0 10px;
					height: 90%;
					// background-color: rgba($color: #fff, $alpha: 0.1);
					.cbLine1{
						color: #fff;
						padding-top: 5px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						line-height: 30px;
						height: 30px;
						font-size: 15px;
						.numberCard{
							font-size: 15px;
							padding: 0 8px;
							margin-left: 3px;
							font-weight: bold;
							color: #47bcec;
							background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
							background-size: 100% 100%;
						}
					}
					.cbProcess{
						padding-top: 5px;
						height: calc(100% - 55px);
						overflow: hidden;
						// background-color: #fff;
						.pItem{
							width: 100%;
							height: 55px;
							display: flex;
							// background-color: #fff;
							font-size: 13px;
							color: #fff;
							.pLeft{
								width: 20%;
								height: 55px;
								display: flex;
								justify-content: center;
								align-items: center;
								.plInner{
									width: 80px;
									// text-align: center;
									line-height: 30px;
									// background-color: darkred;
									border-radius: 100px;
								}
								
							}
							.pRight{
								width: 80%;
								height: 55px;
								.prTop{
									// background-color: darkblue;
									display: flex;
									justify-content: space-between;
									height: 30px;
									.prtLeft{
										display: flex;
										justify-content: center;
										align-items: flex-end;
									}
									.prtRight{
										display: flex;
										justify-content: center;
										align-items: flex-end;
									}
								}
								.prBottom{
									// background-color: purple;
									height: 15px;
									.processLineBg{
										background-color: rgba(50,50,50,0.5);
										// transform: scaleX(-1);
										.processLine{
											margin-top: 10px;
											// padding-top: 10px;
											height: 5px;
											display: flex;
											justify-content: flex-end;
											.processLineBtn{
												width:3px;
												height:9px;
												background:#fff;
												transform: translateY(-2px);
											}
										}
										// .plBgc1{
										// 	background: rgb(150,0,0);
										// 	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
										// }
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.scroll {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.plBgc1{
	background: rgb(139,0,0);
	background: linear-gradient(90deg, rgba(139,0,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc1{
	background: rgb(139,0,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,0,1) 100%);
}
.plBgc2{
	background: rgb(155,155,0);
	background: linear-gradient(90deg, rgba(155,155,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc2{
	background: rgb(155,155,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(155,0,0,1) 100%);
}
.plBgc3{
	background: rgb(0,0,139);
	background: linear-gradient(90deg, rgba(0,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc3{
	background: rgb(0,0,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,0,139,1) 100%);
}
.plBgc4{
	background: rgb(139,0,139);
	background: linear-gradient(90deg, rgba(139,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc4{
	background: rgb(139,0,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,139,1) 100%);
}
.plBgc5{
	background: rgb(72,61,139);
	background: linear-gradient(90deg, rgba(72,61,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc5{
	background: rgb(72,61,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(72,61,139,1) 100%);
}
.plBgc6{
	background: rgb(0,206,209);
	background: linear-gradient(90deg, rgba(0,206,209,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc6{
	background: rgb(0,206,209);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,206,209,1) 100%);
}
.plBgc7{
	background: rgb(47,79,79);
	background: linear-gradient(90deg, rgba(47,79,79,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc7{
	background: rgb(47,79,79);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(47,79,79,1) 100%);
}
.plBgc8{
	background: rgb(0,100,0);
	background: linear-gradient(90deg, rgba(0,100,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc8{
	background: rgb(0,100,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,100,0,1) 100%);
}
.plBgc9{
	background: rgb(189,183,107);
	background: linear-gradient(90deg, rgba(189,183,107,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc9{
	background: rgb(189,183,107);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(189,183,107,1) 100%);
}
.plBgc10{
	background: rgb(255,140,0);
	background: linear-gradient(90deg, rgba(255,140,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc10{
	background: rgb(255,140,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(255,140,0,1) 100%);
}
.plBgc11{
	background: rgb(233,150,122);
	background: linear-gradient(90deg, rgba(233,150,122,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc11{
	background: rgb(233,150,122);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(233,150,122,1) 100%);
}
.plBgc0{
	background: rgb(0,139,139);
	background: linear-gradient(90deg, rgba(0,139,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc0{
	background: rgb(0,139,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,139,139,1) 100%);
}

</style>