zhgdyun/src/views/commandScreen/commandCenter/centerBottom.vue

<template>
	<div class="centerBottom">
		<div class="contentTop">
			<div class="cbHeader">
				<div class="cbHeaderInfo">
					<!-- <div class="cubeIcon"></div> -->
					<div class="cLeft title-tabs">
						<div class="title-color">应急处置（近七天）</div>
						<div>事故风险趋势预期</div>
					</div>
				</div>
				<div class="cbHeaderLine" style="margin-top: 1%"></div>
			</div>
			<div class="ctContent" style="margin-top: 1%; display: flex">
				<div style="width: 50%">
					<div id="eacherMess" style="width: 100%; height: 100%"></div>
					<!-- <div class="notoDta" v-if="dataList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div> -->
				</div>
				<div style="width: 50%">
					<div id="eacherMessCount" style="width: 100%; height: 100%"></div>
					<!-- <div class="notoDta" v-if="dataList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div> -->
				</div>
			</div>
		</div>
		<div class="cbHeader">
			<div class="cbHeaderInfo">
				<div class="cubeIcon"></div>
				<!-- <div class="cLeft">公告提示</div> -->
				<div class="cLeft">隐患检查推送</div>
			</div>
			<div class="cbHeaderLine"></div>
		</div>
		<div class="cbContent">
			<div v-if="listData.length < 10 && listData.length !== 0">
				<div class="item" v-for="(item, index) in listData" :key="index">
					<div class="itemHead">
						<div v-if="JSON.parse(item.payload).level">
							<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
							<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
							<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
							<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
						</div>
						<div v-else>
							<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
							<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
							<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
						</div>
						<div class="itemContent">
							<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
								<text style="margin-left: 10px">{{ item.msg }}</text>
							</el-tooltip>
						</div>
					</div>
					<!-- <div class="itemContent">
						<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
							{{item.content}}
						</el-tooltip>
					</div> -->
					<div class="itemTime">
						<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
					</div>
				</div>
			</div>
			<div v-else>
				<vue3-seamless-scroll
					v-if="listData.length > 0"
					:speed="1"
					:list="listData"
					:limitScrollNum="10"
					:step="0.3"
					:hover="true"
					class="scroll"
				>
					<div class="item" v-for="(item, index) in listData" :key="index">
						<div class="itemHead">
							<div v-if="JSON.parse(item.payload).level">
								<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
								<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
								<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
								<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
							</div>
							<div v-else>
								<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
								<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
								<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
							</div>
							<div class="itemContent">
								<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
									<text style="margin-left: 10px">{{ item.msg }}</text>
								</el-tooltip>
							</div>
						</div>
						<!-- <div class="itemContent">
						<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
							{{item.content}}
						</el-tooltip>
					</div> -->
						<div class="itemTime">
							<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
						</div>
					</div>
				</vue3-seamless-scroll>
			</div>
			<div class="notoDta" v-if="listData.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { getNoticeListApi } from "@/api/modules/projectOverview";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// import Card from "@/components/card.vue";
import { ref, onMounted } from "vue";
import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts";
import { GlobalStore } from "@/stores";
const store = GlobalStore();

let listData = ref([
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
]);

const getNoticeList = async () => {
	// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
	// const res: any = await getNoticeListApi({ isBigScreen: 1, type: 32 }); // 公告
	const res: any = await getNoticeListApi({ isBigScreen: 1, type: 31 });

	console.log("隐患智能分析", res);
	listData.value = res.result.records;

	// listData.value.push({
	// 	accountId:"1779721457571291137",
	// 	id:"1789601398432559107",
	// 	imageUrl:null,
	// 	isRead:0,
	// 	msg:"区域1检查到一条四川成润智慧科技的雨落管安全隐患问题，请注意监督整改！",
	// 	payload:"{\"level\":4,\"time\":\"2024-05-12 18:19:40\"}",
	// 	sendTime: "2024-05-12 18:19:57",
	// 	title: "大屏通知",
	// 	type: "31",
	// })

	console.log("================center================", listData.value);
};
const dataListAlarm = ref([]);
// 应急处置
function getMessEchart() {
	console.log("我是应急处置11");
	const echartsTest = echarts.init(document.getElementById("eacherMess"));
	// 抽出企业
	const dataList = dataListAlarm.value.map((item: any) => {
		return {
			name: item.enterpriseName,
			type: "line",
			stack: "Total",
			smooth: true,
			symbol: "none",
			data: item.dataList
		};
	});
	// const dataList = [
	// 	{
	// 		name: "中东责任有限公司1",
	// 		type: "line",
	// 		stack: "Total",
	// 		smooth: true,
	// 		symbol: "none",
	// 		data: [120, 132, 101, 134, 90, 230, 210]
	// 	},
	// 	{
	// 		name: "中东责任有限公司2",
	// 		type: "line",
	// 		stack: "Total",
	// 		smooth: true,
	// 		symbol: "none",
	// 		data: [120, 99, 101, 78, 90, 230, 210]
	// 	},
	// 	{
	// 		name: "中东责任有限公司3",
	// 		type: "line",
	// 		stack: "Total",
	// 		smooth: true,
	// 		symbol: "none",
	// 		data: [120, 57, 101, 134, 78, 230, 210]
	// 	},
	// 	{
	// 		name: "中东责任有限公司4",
	// 		type: "line",
	// 		stack: "Total",
	// 		smooth: true,
	// 		symbol: "none",
	// 		data: [120, 42, 42, 14, 90, 230, 210]
	// 	}
	// ];
	let option = {
		tooltip: {
			trigger: "axis"
		},
		legend: {
			x: "center",
			textStyle: {
				color: "#fff"
			},
			icon: "rect",
			data: dataList.map((item: any) => item.name),
			formatter: function (params: any) {
				let val = "";
				if (params.length > 4) {
					val = params.substr(0, 4) + "...";
					return val;
				} else {
					return params;
				}
			}
		},
		color: ["#FF3232", "#FF9901", "#FFE500", "#3A3AE7"],
		grid: {
			left: "3%",
			right: "6%",
			bottom: "4%",
			top: "18%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: ["5.30", "5.31", "6.1", "6.2", "6.3", "6.4"],
			axisLabel: {
				color: "#fff"
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#2079A0"
				}
			}
		},
		yAxis: {
			// name: "数量",
			nameTextStyle: {
				color: "#fff"
			},
			axisLabel: {
				color: "#fff"
			},
			splitLine: {
				lineStyle: {
					color: "#2079A0"
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false,
				lineStyle: {
					color: "#2079A0"
				}
			}
			// type: 'value'
		},
		// dataZoom: [
		// 	{
		// 		id: "dataZoomX",
		// 		type: "inside",
		// 		xAxisIndex: [0],
		// 		brushSelect: false,
		// 		zoomOnMouseWheel: false,
		// 		moveOnMouseWheel: true, // 开启滚轮平移
		// 		moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
		// 		preventDefaultMouseMove: false,
		// 		// start:100,
		// 		startValue: 1,
		// 		endValue: 4,
		// 		// 滚动条高度
		// 		width: 8,
		// 		// 滚动条显示位置
		// 		// height: "80%",
		// 		// 距离右边
		// 		right: 3,
		// 		// 控制手柄的尺寸
		// 		handleSize: 0,
		// 		filterMode: "empty"
		// 		// top: "top",
		// 	}
		// ],
		series: dataList
	};
	echartsTest.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest);
		echartsTest.resize();
	});
	console.log(echartsTest);
}

function Pie() {
	let dataArr = [];
	for (var i = 0; i < 150; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "#7cf4f1",
						borderWidth: 0,
						borderColor: "#7f6546"
					}
				}
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)"
					}
				}
			});
		}
	}
	return dataArr;
}

// let dataList2 = ref([
// 	{
// 		enumType: "",
// 		value: 30,
// 		show: true,
// 		name: "重大隐患",
// 		itemStyle: {
// 			normal: {
// 				color: "#038cf5",
// 				borderWidth: 20
// 			}
// 		}
// 	},
// 	{
// 		enumType: "",
// 		value: 2,
// 		show: false,
// 		name: "",
// 		itemStyle: {
// 			color: "rgba(0,0,0,0)"
// 		}
// 	},
// 	{
// 		value: 70,
// 		show: true,
// 		name: "一般隐患",
// 		itemStyle: {
// 			normal: {
// 				color: "#01d6f4",
// 				borderWidth: 20
// 			}
// 		}
// 	},
// 	{
// 		enumType: "",
// 		value: 2,
// 		show: false,
// 		name: "",
// 		itemStyle: {
// 			color: "rgba(0,0,0,0)"
// 		}
// 	}
// ]);
const messCountType = ref({
	count: 0,
	data: []
});
function getMessCountEchart() {
	let echartsTest = echarts.init(document.getElementById("eacherMessCount"));
	let option = {
		tooltip: {
			trigger: "item"
		},
		title: {
			text: messCountType.value.count,
			// text: '100%',
			subtext: "今日应急次数",
			x: "24%",
			y: "center",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 26,
				fontWeight: "normal",
				// align: "center",
				// width: "200px",
				fontFamily: "sadigitalNumber"
			},
			subtextStyle: {
				color: "#ccc",
				fontSize: 12,
				fontWeight: "normal"
				// align: "center",
			}
		},
		legend: {
			selectedMode: true, // 取消图例上的点击事件
			icon: "rect",
			type: "plain",
			orient: "vertical",
			left: "55%",
			top: "20%",
			align: "left",
			itemGap: 20,
			itemWidth: 8, // 设置宽度
			itemHeight: 7, // 设置高度
			symbolKeepAspect: false,
			textStyle: {
				color: "#fff",
				rich: {
					name: {
						verticalAlign: "right",
						align: "left",
						fontSize: 14,
						color: "#FFFFFF"
					},
					value: {
						align: "left",
						fontSize: 14,
						color: "#FFFFFF"
					}
				}
			},
			data: messCountType.value.data.map((item: any) => {
				if (item.show) {
					return item.name;
				}
			})
			// formatter: function (params: any) {
			// 	let val = "";
			// 	if (params.length > 4) {
			// 		val = params.substr(0, 5) + "...";
			// 		return val;
			// 	} else {
			// 		return params;
			// 	}
			// }
		},
		series: [
			// 外侧光线
			{
				name: "",
				type: "gauge",
				center: ["25%", "55%"],
				radius: "80%",
				startAngle: 235,
				endAngle: -50,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								100 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: "#526277"
									},
									{
										offset: 0.25,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 0.7,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 1,
										color: "#526277"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "gauge",
				center: ["25%", "55%"],
				radius: "80%",
				startAngle: 245,
				endAngle: -115,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								200 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0.8,
										color: "#52bef0"
									},
									{
										offset: 0.5,
										color: "#13356b"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "pie",
				radius: [65, 75],
				center: ["25%", "55%"],
				hoverAnimation: true,
				// padAngle: 20,
				itemStyle: {
					borderRadius: 10,
					borderWidth: 10
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: messCountType.value.data
			},
			{
				type: "pie",
				radius: ["57", "60"],
				center: ["25%", "55%"],
				label: {
					show: false
				},

				data: Pie()
			}
		]
	};
	echartsTest.setOption(option, true);
	window.addEventListener("resize", () => {
		echartsTest.resize();
	});
}

const getMessCountEchartType = async () => {
	const res: any = await getCountEmergencyTypedApi({
		projectSn: store.sn,
		type: 1
	});
	console.log("应急统计图", res);
	messCountType.value.data = res.result.data.map((item: any) => {
		return {
			...item,
			value: item.count,
			show: true,
			itemStyle: {
				normal: {
					// color: "#01d6f4",
					borderWidth: 20
				}
			}
		};
	});
	messCountType.value.count = res.result.count;
	getMessCountEchart();
};

const getCountAlarmNumByEnterprise = async () => {
	const res: any = await getCountAlarmNumByEnterpriseApi({
		projectSn: store.sn,
		type: 1
	});
	dataListAlarm.value = res.result.reduce((prev: any[], item: any) => {
		console.log("1111", prev);
		item.list.forEach((ele: any) => {
			const findIndex = prev.findIndex((option: any) => option.enterpriseId == ele.enterpriseId);
			if (findIndex == -1) {
				prev.push({ ...ele, dataList: [ele.alarmNum] });
			} else {
				prev[findIndex].dataList.push(ele.alarmNum);
			}
		});
		return prev;
	}, []);
	console.log("应急处置统计图", res);
	getMessEchart();
};

onMounted(async () => {
	await getNoticeList();
	getCountAlarmNumByEnterprise();
	getMessCountEchartType();
});
</script>

<style lang="scss" scoped>
.title-tabs {
	width: initial !important;
	display: flex;
	align-items: center;
	// margin-left: 4%;
	color: white !important;

	> div {
		// padding: 2px 0;
		height: 13%;
		// font-size: 16px;
		font-size: 13px;
		font-weight: normal;
		line-height: 25px;
		width: 140px;
		text-align: center;
		// background-color: #315296;
		background: rgb(0, 33, 116);
		background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
		cursor: pointer;
	}

	.title-color {
		// background-color: #1449b6;
		background: rgb(0, 33, 116);
		background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
	}
}

.notoDta {
	top: 50%;
	// width: 50%;
	// left: 40%;
	position: absolute;
	text-align: center;
	left: 50%;
	transform: translate(-50%, -50%);

	img {
		width: 30%;
		margin: 5% 22%;
	}

	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 30%;
	}
}

.scroll {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.contentTop {
	margin-top: 10px;
	width: 100%;
	height: 55%;

	.ctHead {
		background-color: #002f69;
		padding-bottom: 5px;
		color: #fff;
		height: 13%;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		cursor: pointer;

		text {
			font-size: 24px;
			color: #fc4c4c;
		}
	}

	.ctContent {
		height: 85%;
		// background-color: darkred;
	}
}

.centerBottom {
	background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
	// background: #fff;
	background-size: 100% 100%;
	// width: 100%;
	// height: 60%;
	// background-color: #fff;
	padding: 10px 20px;
	position: relative;

	// padding-top: 15px;
	.cbHeader {
		width: 100%;
		height: 40px;

		// background-color: darkred;
		.cbHeaderInfo {
			color: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.cLeft {
				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;
			}

			.cubeIcon {
				width: 36px;
				height: 36px;
				// background-color: #fff;
				background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
				background-size: 100% 100%;
				// margin-left: -5px;
				margin: 0 3px 0 -5px;
			}
		}

		.cbHeaderLine {
			height: 4px;
			width: 100%;
			// background-color: darkblue;
			background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
			background-size: 100% 100%;
		}
	}

	.cbContent {
		width: 100%;
		height: calc(45% - 40px);
		overflow: hidden;
		position: relative;

		// background: #fff;
		.item {
			width: 100%;
			line-height: 110%;
			display: flex;
			align-items: center;
			// justify-content: flex-start;
			justify-content: space-between;
			// background-color: green;
			color: #fff;

			.itemHead {
				white-space: nowrap;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				width: 75%;

				.itemHeadInner1 {
					border: 1px solid #e02020;
					box-shadow: 0 0 0 1px #e02020;
					background: rgba(224, 32, 32, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}

				.itemHeadInner2 {
					font-size: 16px;
					border: 1px solid #f46649;
					box-shadow: 0 0 0 1px #f46649;
					background: rgba(244, 102, 73, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}

				.itemHeadInner3 {
					font-size: 16px;
					border: 1px solid #ecbe45;
					box-shadow: 0 0 0 1px #ecbe45;
					background: rgba(236, 190, 69, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}

				.itemHeadInner4 {
					font-size: 16px;
					border: 1px solid #5394f7;
					box-shadow: 0 0 0 1px #5394f7;
					background: rgba(83, 148, 247, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}

				.itemHeadInner5 {
					font-size: 16px;
					border: 1px solid #9400d3;
					box-shadow: 0 0 0 1px #9400d3;
					background: rgba(148, 0, 211, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}

				.itemHeadInner6 {
					font-size: 16px;
					border: 1px solid #00ced1;
					box-shadow: 0 0 0 1px #00ced1;
					background: rgba(0, 206, 209, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}

				.itemContent {
					margin-left: 10px;
					font-size: 15px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					line-height: 30px;
				}
			}

			.itemTime {
				// background-color: #fff;
				width: 25%;
				font-size: 16px;

				.timeInfo {
					display: flex;
					justify-content: flex-start;
					margin-right: 10px;
				}
			}
		}
	}
}
</style>