466 lines
11 KiB
Vue
466 lines
11 KiB
Vue
<template>
|
|
<div class="centerTop">
|
|
<div class="top-content">
|
|
<div class="content-div aq">
|
|
<div class="circle-box">
|
|
<span>{{ statScore.hiddenDangerScore }}分</span>
|
|
</div>
|
|
<span>安全隐患治理</span>
|
|
</div>
|
|
<div class="content-div wd">
|
|
<div class="circle-box">
|
|
<span>{{ statScore.dangerEngScore }}分</span>
|
|
</div>
|
|
<span>危大工程</span>
|
|
</div>
|
|
<div class="content-div jy">
|
|
<div class="circle-box">
|
|
<!-- <span>{{statScore}}分</span> -->
|
|
<span>25分</span>
|
|
</div>
|
|
<span>安全教育</span>
|
|
</div>
|
|
<div class="content-div fx">
|
|
<div class="circle-box">
|
|
<span>{{ statScore.riskScore }}分</span>
|
|
</div>
|
|
<span>风险管理</span>
|
|
</div>
|
|
<div class="content-div zn">
|
|
<div class="circle-box">
|
|
<span>{{ statScore.aiScore }}分</span>
|
|
</div>
|
|
<span>AI警报</span>
|
|
</div>
|
|
<div class="count-div">
|
|
<div class="count-div-item">
|
|
<span>上月安全综合评分</span>
|
|
<span>{{ statScore.lastMonthTotal }}</span>
|
|
<span>分</span>
|
|
</div>
|
|
<div class="count-div-item">
|
|
<span
|
|
>相较上月{{
|
|
statScore.radio > 0
|
|
? "上升" + (statScore.radio ? statScore.radio : 0)
|
|
: "下降" + (statScore.radio ? statScore.radio.toString().substr(1) : 0)
|
|
}}
|
|
%</span
|
|
>
|
|
<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? "↑" : "↓" }} </span>
|
|
</div>
|
|
</div>
|
|
<div class="score-div" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
|
|
<div class="score-part">
|
|
<span>{{ statScore.total }}</span>
|
|
<span>分</span>
|
|
</div>
|
|
<span>安全评分</span>
|
|
</div>
|
|
<div class="classify-div">
|
|
<div class="classify-div-item" @click="openDialogData({ index: 1, title: '危大工程' })">
|
|
<span style="font-size: 12px">危大工程 {{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
|
|
</div>
|
|
<div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })">
|
|
<span style="font-size: 12px">安全教育 {{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
|
|
</div>
|
|
<div class="classify-div-item" style="width: 280px" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
|
|
<span style="font-size: 12px">影响进度计划因素 {{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
|
|
</div>
|
|
<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
|
|
<span style="font-size: 12px"
|
|
>风险统计 {{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
|
|
>
|
|
</div>
|
|
<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
|
|
<span style="font-size: 12px"
|
|
>安全隐患 {{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
|
|
>
|
|
</div>
|
|
<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
|
|
<span style="font-size: 12px">AI警报 {{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="background-title">
|
|
<span @click="openDialogData({ index: 9, title: '月度安全综合评分' })">查看月度安全评分报告详情</span>
|
|
</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 { getStatsDirectorateBigScreenApi, getStatScoreApi } from "@/api/modules/agjtCommandApi";
|
|
import { selectLiveVideoListApi } from "@/api/modules/video";
|
|
import ckplayerComp from "./ckplayerComp.vue";
|
|
import { COMPANY } from "@/config/config";
|
|
|
|
const emits = defineEmits(["openDialog"]);
|
|
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);
|
|
// 打开弹窗
|
|
const openDialogData = (obj: any) => {
|
|
emits("openDialog", obj);
|
|
};
|
|
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 (showLoading: boolean) => {
|
|
let res: any = await selectLiveVideoListApi(
|
|
{
|
|
projectSn: store.sn
|
|
},
|
|
showLoading
|
|
);
|
|
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);
|
|
}
|
|
};
|
|
let statsDirectorateBigScreen = ref({} as any);
|
|
//获取centerTop底部按钮显示数据
|
|
const getStatsDirectorateBigScreen = async (showLoading: boolean) => {
|
|
const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn }, showLoading);
|
|
statsDirectorateBigScreen.value = res.result;
|
|
};
|
|
let statScore = ref({
|
|
dangerEngScore: 0,
|
|
hiddenDangerScore: 0,
|
|
aiScore: 0,
|
|
riskScore: 0,
|
|
total: 0,
|
|
lastMonthTotal: 0
|
|
} as any);
|
|
//获取centerTop底部按钮显示数据
|
|
const getStatScore = async (showLoading: boolean) => {
|
|
const res = await getStatScoreApi({ projectSn: store.sn }, showLoading);
|
|
console.log("获取项目信息6666666666666666666666666666666666", res);
|
|
statScore.value = res.result;
|
|
};
|
|
|
|
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(showLoading: boolean) {
|
|
queryBySnData(
|
|
{
|
|
projectSn: store.sn,
|
|
showType: 3
|
|
},
|
|
showLoading
|
|
).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
|
|
});
|
|
const setIntervalFn = (showLoading: boolean) => {
|
|
getVideoList(showLoading);
|
|
getQueryBySnData(showLoading);
|
|
getStatsDirectorateBigScreen(showLoading);
|
|
getStatScore(showLoading);
|
|
};
|
|
onMounted(async () => {
|
|
setIntervalFn(false);
|
|
// 定时三十秒刷新
|
|
setInterval(() => {
|
|
setIntervalFn(true);
|
|
}, 30000);
|
|
});
|
|
</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 {
|
|
width: 30%;
|
|
height: 30%;
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.circle-box {
|
|
width: 70px;
|
|
height: 70px;
|
|
color: white;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
|
|
// padding: 23px 20px;
|
|
// border: 2px solid #318FF7;
|
|
background: url("@/assets/images/commandScreen/bg10.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
span {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
> span {
|
|
margin-top: 10px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.aq {
|
|
// left: 40px;
|
|
// top: 180px;
|
|
left: 0%;
|
|
top: 45%;
|
|
}
|
|
|
|
.wd {
|
|
// left: 200px;
|
|
// top: 80px;
|
|
left: 12%;
|
|
top: 20%;
|
|
}
|
|
|
|
.jy {
|
|
// left: 400px;
|
|
// top: 5px;
|
|
left: 35%;
|
|
top: 0%;
|
|
}
|
|
|
|
.fx {
|
|
// right: 180px;
|
|
// top: 80px;
|
|
right: 12%;
|
|
top: 20%;
|
|
}
|
|
|
|
.zn {
|
|
// right: 40px;
|
|
// top: 180px;
|
|
right: 0%;
|
|
top: 45%;
|
|
}
|
|
|
|
.count-div {
|
|
width: 60%;
|
|
color: white;
|
|
position: absolute;
|
|
// bottom: 95px;
|
|
// left: 170px;
|
|
bottom: 19%;
|
|
left: 18%;
|
|
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;
|
|
width: 30%;
|
|
height: 30%;
|
|
bottom: 33%;
|
|
left: 35.5%;
|
|
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: 10px;
|
|
left: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&-item {
|
|
width: 180px;
|
|
height: 75px;
|
|
// background-color: #0090D8;
|
|
// padding: 10px 20px;
|
|
// border-radius: 24px;
|
|
background: url("@/assets/images/commandScreen/bg9.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 5px;
|
|
|
|
span {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.background-title {
|
|
width: 100%;
|
|
height: 40px;
|
|
position: absolute;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
color: #00e2f9;
|
|
font-size: 14px;
|
|
bottom: -10px;
|
|
left: 0px;
|
|
background-image: url("@/assets/images/commandScreen/title-bg.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
</style>
|