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

<template>
	<div class="centerTop">
		<div class="top-content">
			<div class="content-div aq">
				<div class="circle-box">
					<span>20分</span>
				</div>
				<span>安全隐患治理</span>
			</div>
			<div class="content-div wd">
				<div class="circle-box">
					<span>20分</span>
				</div>
				<span>危大工程</span>
			</div>
			<div class="content-div jy">
				<div class="circle-box">
					<span>20分</span>
				</div>
				<span>安全教育</span>
			</div>
			<div class="content-div fx">
				<div class="circle-box">
					<span>20分</span>
				</div>
				<span>风险管理</span>
			</div>
			<div class="content-div zn">
				<div class="circle-box">
					<span>20分</span>
				</div>
				<span>智能硬件分析</span>
			</div>
			<div class="count-div">
				<div class="count-div-item">
					<span>上月安全综合评分</span>
					<span>65</span>
					<span>分</span>
				</div>
				<div class="count-div-item">
					<span>相较上月上升20%</span>
					<span></span>
				</div>
			</div>
			<div class="score-div">
				<div class="score-part">
					<span>78</span>
					<span>分</span>
				</div>
				<span>安全评分</span>
			</div>
			<div class="classify-div">
				<div class="classify-div-item">
					<span>危大工程&nbsp;&nbsp;+20</span>
				</div>
				<div class="classify-div-item">
					<span>安全教育&nbsp;&nbsp;+20</span>
				</div>
				<div class="classify-div-item">
					<span>极端恶劣天气&nbsp;&nbsp;+20</span>
				</div>
				<div class="classify-div-item">
					<span>风险统计&nbsp;&nbsp;+20</span>
				</div>
				<div class="classify-div-item">
					<span>安全隐患&nbsp;&nbsp;+20</span>
				</div>
				<div class="classify-div-item">
					<span>硬件报警&nbsp;&nbsp;+20</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus";

import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
import { selectLiveVideoListApi } from "@/api/modules/video";
import ckplayerComp from "./ckplayerComp.vue";
import { COMPANY } from "@/config/config";

const store = GlobalStore();
const videoList = ref([] as any);
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);

watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
		}
	}
);
//效果图
const picUrl = ref("" as any);

const BASEURL = import.meta.env.VITE_API_URL;
// 显示视频
const showVideo = ref(1 as any);

// 显示更换图片
const showChangeImg = ref(false as any);

// 显示更换视频
const showChangeVideo = ref(false as any);

let topText2 = ref([
	{ id: 1, title: "现场视频", isActive: true },
	{ id: 2, title: "宣传视频", isActive: false },
	{ id: 3, title: "效果图", isActive: false }
]);
let topText = ref([
	// { id: 1, title: "现场视频", isActive: true },
	{ id: 2, title: "宣传视频", isActive: false },
	{ id: 3, title: "效果图", isActive: false }
]);
const getVideoList = async () => {
	let res: any = await selectLiveVideoListApi({
		projectSn: store.sn
	});
		console.log(res,'445566')
	if(res.result && res.result.extend1){
		videoList.value = JSON.parse(res.result.extend1).result.videoList;
		console.log(videoList.value,'112233')
		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
		setTimeout(() => {
			// 获取所有的 video 元素
			var videos = document.querySelectorAll(".href-content video")
			// var videos = document.getElementsByTagName("video");
			// 遍历所有的 video 元素
			for (var i = 0; i < videos.length; i++) {
				// 修改视频元素的样式
				videos[i].style.width = "99.9%";
				videos[i].style.height = "99.9%";
			}
		}, 2000);
	}
};

function boxStyle(item: any) {
	if (item.isActive) {
		let choiseStyle = {
			color: "#fff"
		};
		return choiseStyle;
	}
	return {};
}
let tabIndex = ref(1 as any);
function activeBtn(item: any) {
	let currentState = item.isActive;
	if (!currentState) {
		topText.value.forEach(el => {
			el.isActive = false;
		});
		item.isActive = !currentState;
		tabIndex.value = item.id;
	}
	showVideo.value = item.id;
	console.log(showVideo.value)
}

const uploadFail = () => {
	ElMessage({
		showClose: true,
		message: "上传失败，请重试",
		type: "warning"
	});
};

const fileTypeFail = (text: any) => {
	ElMessage({
		showClose: true,
		message: text,
		type: "warning"
	});
};

const uploadSuccess = () => {
	ElMessage({
		showClose: true,
		message: "上传成功",
		type: "success"
	});
};
// 查询效果图
function getQueryBySnData() {
	queryBySnData({
		projectSn: store.sn,
		showType: 3
	}).then((res: any) => {
		console.log(res, "效果图");
		if (res.result) {
			picUrl.value = res.result.configValue;
		}
	});
}
// //保存或删除宣传视频
function saveOrDeleteVideo(url) {
	editProjectInfo({
		projectSn: store.sn,
		videoUrl: url
	}).then(res => {
		console.log("保存成功", res);
		uploadSuccess(); //"上传成功"
		projectData.value.videoUrl = url;
	});
}
//将方法暴露给父组件
defineExpose({
	getQueryBySnData
})
onMounted(async () => {
	await getVideoList();
	getQueryBySnData();
});
</script>

<style lang="scss" scoped>
.centerTop {
	// background-color: darkred;
	.top-content{
		height: 100%;
		position: relative;
		background-image: url("@/assets/images/commandScreen/top-bg.png");
		background-position: center;
		background-repeat: no-repeat;
		.content-div{
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			.circle-box{
				color: white;
				font-size: 14px;
				text-align: center;
				
				padding: 23px 20px;
				border: 2px solid #318FF7;
				border-radius: 50%;
			}
			>span{
				margin-top: 10px;
				color: white;
			}
		}
		.aq{
			left: 40px;
			top: 180px;
		}
		.wd{
			left: 200px;
			top: 80px;
		}
		.jy{
			left: 400px;
			top: 5px;
		}
		.fx{
			right: 180px;
			top: 80px;
		}
		.zn{
			right: 40px;
			top: 180px;
		}
		.count-div{
			width: 60%;
			color: white;
			position: absolute;
			bottom: 95px;
			left: 170px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-item{
				font-size: 14px;
				>span:nth-child(2){
					color: #2983E1;
				}
			}
		}
		.score-div{
			color: white;
			position: absolute;
			bottom: 210px;
			left: 383px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.score-part{
				span:nth-child(1){
					font-size: 72px;
				}
				span:nth-child(2){
					font-size: 18px;
				}
			}
			>span{
				color: white;
				font-size: 18px;
			}
		}
		.classify-div{
			width: 100%;
			color: white;
			position: absolute;
			bottom: 0px;
			left: 0px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-item{
				background-color: #0090D8;
				padding: 10px 20px;
				border-radius: 24px;
			}
		}
	}
}
</style>