feat:完成现场大屏中上部分安全教育接口对接
fix:调整左下部分特殊作业情况、中上部分安全教育、中下左部分劳务实名制、中下右部分质量待办、右上部分应急记录、右下部分安全待办的细节样式
This commit is contained in:
Vce
parent
9872ca236e
commit
fb286c173f
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomBox">
|
||||
<el-scrollbar style="height:100%">
|
||||
<el-scrollbar style="height:101.5%">
|
||||
<div class="listItem" v-for="(item,i) in 10 " :key="i">
|
||||
<div class="itemInfo1">
|
||||
<div style="width:50px;text-align:center">1</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="centerBottomRight">
|
||||
<Card title="质量待办">
|
||||
<div class="mainContainer">
|
||||
<el-scrollbar style="height:102.5%">
|
||||
<el-scrollbar style="height:107%">
|
||||
<div class="itemBox" v-for="(item,i) in 10" :key="i">
|
||||
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝</div>
|
||||
<div class="itemLine2">
|
||||
|
||||
322
src/views/agjtLiveScreen/liveScreen/centerTop(旧版2).vue
Normal file
322
src/views/agjtLiveScreen/liveScreen/centerTop(旧版2).vue
Normal file
@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="安全教育">
|
||||
<div class="set-icon" @click="openPeopleCountDialog"></div>
|
||||
<div class="videoBox" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
|
||||
<!-- <el-upload :action="BASEURL + '/upload/image'" :on-success="(file) => handleSuccessTwo(file, 1)"
|
||||
:on-error="(file) => handleError(file, 1)" :beforeUpload="(file) => handleBeforeUploadVideo(file, 1)"
|
||||
name="files" :show-file-list="false">
|
||||
<span class="change-video" v-if="showChangeVideo">更换视频</span>
|
||||
</el-upload> -->
|
||||
<!-- BASEURL + '/image/' + projectData.videoUrl -->
|
||||
<video
|
||||
src="https://v6.huanqiucdn.cn/4394989evodtranscq1500012236/77e4bc8a1253642698931109862/v.f100830.mp4"
|
||||
class="videos"
|
||||
autoplay
|
||||
controls
|
||||
loop
|
||||
></video>
|
||||
</div>
|
||||
</Card>
|
||||
<setVideoDialog ref="partyBuildRef"></setVideoDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import setVideoDialog from "@/components/setVideoDialog.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 { 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);
|
||||
|
||||
// 弹窗
|
||||
const partyBuildRef = ref();
|
||||
const openPeopleCountDialog = () => {
|
||||
partyBuildRef.value.openDialog({
|
||||
title: "配置视频"
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.projectData,
|
||||
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: true },
|
||||
{ id: 3, title: "效果图", isActive: false }
|
||||
]);
|
||||
const getVideoList = async () => {
|
||||
let res: any = await selectLiveVideoListApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result && res.result.extend1) {
|
||||
videoList.value = JSON.parse(res.result.extend1).result.videoList;
|
||||
// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
|
||||
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;
|
||||
}
|
||||
|
||||
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 handleBeforeUploadVideo(file: any) {
|
||||
let fileType = file.type.split("/")[0];
|
||||
if (fileType == "video") {
|
||||
return true;
|
||||
} else {
|
||||
fileTypeFail("请选择正确的视频文件"); //"请选择正确的文件"
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片文件上传 之前
|
||||
function handleBeforeUploadPic(file: any) {
|
||||
let fileType = file.type.split("/")[0];
|
||||
if (fileType == "image") {
|
||||
return true;
|
||||
} else {
|
||||
fileTypeFail("请选择正确的图片文件"); //"请选择正确的文件"
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
//上传失败
|
||||
function handleError(file: any) {
|
||||
uploadFail(); //"上传失败，请重试"
|
||||
}
|
||||
// 效果图上传成功
|
||||
function handleSuccess(file: any) {
|
||||
if (file.code == 200 || file.status == "SUCCESS") {
|
||||
let url = file.data[0].imageUrl;
|
||||
saveEffectData(url);
|
||||
}
|
||||
}
|
||||
|
||||
// 视频上传成功
|
||||
function handleSuccessTwo(file: any) {
|
||||
if (file.code == 200 || file.status == "SUCCESS") {
|
||||
let url = file.data[0].imageUrl;
|
||||
// this.imgUrl = url;
|
||||
saveOrDeleteVideo(url);
|
||||
}
|
||||
}
|
||||
//效果图 保存
|
||||
function saveEffectData(url: any) {
|
||||
// let configValue = JSON.stringify(url);
|
||||
let data = {
|
||||
projectSn: store.sn,
|
||||
showType: 3,
|
||||
showTitle: "效果图", //'效果图'
|
||||
configValue: url
|
||||
};
|
||||
eidtProjectShowConfig(data).then((res: any) => {
|
||||
if (res.code == 200) {
|
||||
getQueryBySnData();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查询效果图
|
||||
function getQueryBySnData() {
|
||||
queryBySnData({
|
||||
projectSn: store.sn,
|
||||
showType: 3
|
||||
}).then((res: any) => {
|
||||
if (res.result) {
|
||||
picUrl.value = res.result.configValue;
|
||||
}
|
||||
});
|
||||
}
|
||||
// //保存或删除宣传视频
|
||||
function saveOrDeleteVideo(url) {
|
||||
editProjectInfo({
|
||||
projectSn: store.sn,
|
||||
videoUrl: url
|
||||
}).then(res => {
|
||||
uploadSuccess(); //"上传成功"
|
||||
projectData.value.videoUrl = url;
|
||||
});
|
||||
}
|
||||
//将方法暴露给父组件
|
||||
defineExpose({
|
||||
getQueryBySnData
|
||||
});
|
||||
onMounted(async () => {
|
||||
if (COMPANY !== "agjt") showVideo.value = 2;
|
||||
// await getVideoList();
|
||||
getQueryBySnData();
|
||||
if (COMPANY != "agjt") {
|
||||
showVideo.value = 2;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.set-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url("@/assets/images/overviewScreen/set-icon.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 1.2%;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.videoBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// margin-top: 8%;
|
||||
// background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
.videos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
z-index: 9;
|
||||
// margin-left: 11%;
|
||||
// margin-top: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .href-content {
|
||||
// width: 95%;
|
||||
// height: 92%;
|
||||
// margin: 0 auto;
|
||||
// margin-top: 8%;
|
||||
// }
|
||||
|
||||
.change-video {
|
||||
position: absolute;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 1% 2%;
|
||||
font-size: 16px;
|
||||
left: 45%;
|
||||
top: 55%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-tab {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.tab-box {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.h-card .content) {
|
||||
margin-top: 1%;
|
||||
height: 92%;
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,38 +1,41 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="安全教育">
|
||||
<div class="set-icon" @click="openPeopleCountDialog"></div>
|
||||
<div class="videoBox" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
|
||||
<!-- <el-upload :action="BASEURL + '/upload/image'" :on-success="(file) => handleSuccessTwo(file, 1)"
|
||||
:on-error="(file) => handleError(file, 1)" :beforeUpload="(file) => handleBeforeUploadVideo(file, 1)"
|
||||
name="files" :show-file-list="false">
|
||||
<span class="change-video" v-if="showChangeVideo">更换视频</span>
|
||||
</el-upload> -->
|
||||
<!-- BASEURL + '/image/' + projectData.videoUrl -->
|
||||
<video
|
||||
src="https://v6.huanqiucdn.cn/4394989evodtranscq1500012236/77e4bc8a1253642698931109862/v.f100830.mp4"
|
||||
class="videos"
|
||||
autoplay
|
||||
controls
|
||||
loop
|
||||
></video>
|
||||
<div class="video-config" @click="openPeopleCountDialog" v-if="store.accountType == 10">
|
||||
<el-icon class="config-icon" color="#57BCE8" size="24"><Setting /></el-icon>
|
||||
</div>
|
||||
<!-- <div class="href-content" v-if="showVideo == 1">
|
||||
<el-carousel indicator-position="none" height="450px" style="width: 100%">
|
||||
<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
|
||||
<ckplayerComp
|
||||
:name="index"
|
||||
:poster="''"
|
||||
:deviceIp="`http://${item.account}:${item.password}`"
|
||||
:videoUrls="item.serialNumber"
|
||||
:autoPlay="true"
|
||||
></ckplayerComp>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div> -->
|
||||
<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
|
||||
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
|
||||
</div>
|
||||
</Card>
|
||||
<setVideoDialog ref="partyBuildRef"></setVideoDialog>
|
||||
<setVideoDialog ref="partyBuildRef" @updateConfig="updateConfig"></setVideoDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import setVideoDialog from "@/components/setVideoDialog.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";
|
||||
|
||||
import setVideoDialog from "@/components/setVideoDialog.vue";
|
||||
import { configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
|
||||
import moment from "moment";
|
||||
const store = GlobalStore();
|
||||
const videoList = ref([] as any);
|
||||
// ts
|
||||
@ -45,7 +48,6 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
});
|
||||
// 项目信息
|
||||
const projectData = ref({} as any);
|
||||
|
||||
// 弹窗
|
||||
const partyBuildRef = ref();
|
||||
const openPeopleCountDialog = () => {
|
||||
@ -53,208 +55,76 @@ const openPeopleCountDialog = () => {
|
||||
title: "配置视频"
|
||||
});
|
||||
};
|
||||
|
||||
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 showVideo = ref(1 as any);
|
||||
const showVideo = ref(2 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: true },
|
||||
{ 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);
|
||||
// 修改了视频配置
|
||||
const updateConfig = () => {
|
||||
configWeekVideoListFn(true);
|
||||
};
|
||||
// 获取一周的配置视频数据
|
||||
const configWeekVideoListFn = async (showLoading: boolean) => {
|
||||
const res: any = await configWeekVideoListApi(
|
||||
{
|
||||
projectSn: store.sn,
|
||||
type: 3
|
||||
},
|
||||
showLoading
|
||||
);
|
||||
if (res.result) {
|
||||
console.log("===================")
|
||||
console.log(res)
|
||||
console.log("===================")
|
||||
// 星期参数
|
||||
const today = moment().format("d");
|
||||
const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
|
||||
// projectData.value.videoUrl = res.result[0][weekParamsKey[+today]];
|
||||
if(today == 0) projectData.value.videoUrl = res.result[0].sun
|
||||
if(today == 1) projectData.value.videoUrl = res.result[0].mon
|
||||
if(today == 2) projectData.value.videoUrl = res.result[0].tues
|
||||
if(today == 3) projectData.value.videoUrl = res.result[0].wed
|
||||
if(today == 4) projectData.value.videoUrl = res.result[0].thur
|
||||
if(today == 5) projectData.value.videoUrl = res.result[0].fri
|
||||
if(today == 6) projectData.value.videoUrl = res.result[0].sat
|
||||
}
|
||||
};
|
||||
|
||||
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 handleBeforeUploadVideo(file: any) {
|
||||
console.log(file, "上传之前");
|
||||
let fileType = file.type.split("/")[0];
|
||||
if (fileType == "video") {
|
||||
return true;
|
||||
} else {
|
||||
fileTypeFail("请选择正确的视频文件"); //"请选择正确的文件"
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片文件上传 之前
|
||||
function handleBeforeUploadPic(file: any) {
|
||||
console.log(file, "上传之前");
|
||||
let fileType = file.type.split("/")[0];
|
||||
if (fileType == "image") {
|
||||
return true;
|
||||
} else {
|
||||
fileTypeFail("请选择正确的图片文件"); //"请选择正确的文件"
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
//上传失败
|
||||
function handleError(file: any) {
|
||||
console.log(file, "上传失败");
|
||||
uploadFail(); //"上传失败，请重试"
|
||||
}
|
||||
// 效果图上传成功
|
||||
function handleSuccess(file: any) {
|
||||
console.log("效果图上传成功", file);
|
||||
if (file.code == 200 || file.status == "SUCCESS") {
|
||||
console.log(file);
|
||||
let url = file.data[0].imageUrl;
|
||||
saveEffectData(url);
|
||||
}
|
||||
}
|
||||
|
||||
// 视频上传成功
|
||||
function handleSuccessTwo(file: any) {
|
||||
if (file.code == 200 || file.status == "SUCCESS") {
|
||||
console.log(file, "上传成功");
|
||||
let url = file.data[0].imageUrl;
|
||||
// this.imgUrl = url;
|
||||
saveOrDeleteVideo(url);
|
||||
}
|
||||
}
|
||||
//效果图 保存
|
||||
function saveEffectData(url: any) {
|
||||
// let configValue = JSON.stringify(url);
|
||||
let data = {
|
||||
projectSn: store.sn,
|
||||
showType: 3,
|
||||
showTitle: "效果图", //'效果图'
|
||||
configValue: url
|
||||
};
|
||||
eidtProjectShowConfig(data).then((res: any) => {
|
||||
if (res.code == 200) {
|
||||
getQueryBySnData();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查询效果图
|
||||
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
|
||||
});
|
||||
// const getVideoList = async () => {
|
||||
// let res: any = await selectLiveVideoListApi({
|
||||
// projectSn: store.sn
|
||||
// });
|
||||
// if (res.result && res.result.extend1) {
|
||||
// videoList.value = JSON.parse(res.result.extend1).result.videoList;
|
||||
// // 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
|
||||
// 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);
|
||||
// }
|
||||
// };
|
||||
onMounted(async () => {
|
||||
if (COMPANY !== "agjt") showVideo.value = 2;
|
||||
// if (COMPANY !== "agjt") showVideo.value = 2;
|
||||
// await getVideoList();
|
||||
getQueryBySnData();
|
||||
if (COMPANY != "agjt") {
|
||||
showVideo.value = 2;
|
||||
}
|
||||
await configWeekVideoListFn(true);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -263,32 +133,51 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.set-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url("@/assets/images/overviewScreen/set-icon.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.video-config {
|
||||
position: absolute;
|
||||
top: 1.2%;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
top: 1.5%;
|
||||
right: 1%;
|
||||
.config-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.videoBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// margin-top: 8%;
|
||||
// background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
height: 103.255%;
|
||||
transform: translateY(-11px);
|
||||
.videos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
z-index: 9;
|
||||
// margin-left: 11%;
|
||||
// margin-top: 1%;
|
||||
}
|
||||
}
|
||||
.imgBox {
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
margin-top: 8%;
|
||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.imgs {
|
||||
width: 78%;
|
||||
height: 82%;
|
||||
margin: 3% 11%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.href-content {
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
margin-top: 8%;
|
||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// .href-content {
|
||||
@ -318,7 +207,6 @@ onMounted(async () => {
|
||||
padding: 0 30%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.tab-box {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
@ -326,9 +214,7 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.h-card .content) {
|
||||
margin-top: 1%;
|
||||
height: 92%;
|
||||
::v-deep .h-card .content {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -54,11 +54,11 @@ const rightTopRef = ref();
|
||||
const rightBottomRef = ref();
|
||||
const callChildFn = async () => {
|
||||
nextTick( async ()=>{
|
||||
leftTopRef.value.projectTypeEnum()
|
||||
centerTopRef.value.getQueryBySnData()
|
||||
centerBottomLeftRef.value.getProgressOption()
|
||||
rightTopRef.value.getSafeInfo()
|
||||
rightBottomRef.value.getList()
|
||||
// leftTopRef.value.projectTypeEnum()
|
||||
// centerTopRef.value.getQueryBySnData()
|
||||
// centerBottomLeftRef.value.getProgressOption()
|
||||
// rightTopRef.value.getSafeInfo()
|
||||
// rightBottomRef.value.getList()
|
||||
})
|
||||
}
|
||||
//定时器
|
||||
@ -66,8 +66,8 @@ const interval = ref(null as any);
|
||||
//定时调用
|
||||
const startInterval = async () => {
|
||||
interval.value= setInterval(() => {
|
||||
getPersonDetail();
|
||||
getProjectInfo();
|
||||
// getPersonDetail();
|
||||
// getProjectInfo();
|
||||
callChildFn();
|
||||
}, 30 * 1000);
|
||||
}
|
||||
|
||||
@ -89,8 +89,11 @@ function drawPie(){
|
||||
label: {
|
||||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
||||
formatter: function(params: any){
|
||||
return '{name|'+ tempList.value[params.dataIndex].name +'}{abg|} {per|'+ tempList.value[params.dataIndex].per +'%}\n{hr|}\n已完成：'
|
||||
+ tempList.value[params.dataIndex].value+' 进行中：' + tempList.value[params.dataIndex].doing
|
||||
let done = '已完成：'+ tempList.value[params.dataIndex].value + ' '
|
||||
return '{name|'+ tempList.value[params.dataIndex].name +'}{abg|} {per|'+ tempList.value[params.dataIndex].per +'%}\n{hr|}\n{done|'+ done
|
||||
+'} 进行中：' + tempList.value[params.dataIndex].doing
|
||||
// return '{name|'+ tempList.value[params.dataIndex].name +'}{abg|} {per|'+ tempList.value[params.dataIndex].per +'%}\n{hr|}\n已完成：'
|
||||
// + tempList.value[params.dataIndex].value+' 进行中：' + tempList.value[params.dataIndex].doing
|
||||
},
|
||||
// backgroundColor: '#1c447b',
|
||||
backgroundColor: 'rgba(28,68,123,0.5)',
|
||||
@ -100,8 +103,13 @@ function drawPie(){
|
||||
},
|
||||
rich: {
|
||||
name:{
|
||||
color: '#fff',
|
||||
align: 'center',
|
||||
lineHeight: 10
|
||||
lineHeight: 20
|
||||
},
|
||||
done:{
|
||||
color: '#fff',
|
||||
lineHeight: 20
|
||||
},
|
||||
// a: {
|
||||
// color: '#fff',
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<div class="headerContainer">
|
||||
<span>距离完工还有</span>
|
||||
<div class="numberCard" v-for="(item, i) in '120'" :key="i"><span>{{ item }}</span></div>
|
||||
<span style="margin-left: 5px">天</span>
|
||||
</div>
|
||||
<Card title="承包商项目信息">
|
||||
<!-- <div class="projectInfo">
|
||||
<div><span>项目名称：</span> {{ projectData.projectName || "" }}</div>
|
||||
@ -130,8 +135,6 @@ watch(
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// .projectInfo {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
@ -152,6 +155,27 @@ watch(
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.headerContainer{
|
||||
display: flex;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
transform: translateY(-53px);
|
||||
align-items: center;
|
||||
.numberCard {
|
||||
font-size: 20px;
|
||||
width: 12px;
|
||||
height: 30px;
|
||||
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%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="rightTop">
|
||||
<Card title="应急记录">
|
||||
<div class="mainContainer">
|
||||
<el-scrollbar style="height:102.5%">
|
||||
<el-scrollbar style="height:104.5%">
|
||||
<div class="itemBox" v-for="(item,i) in 10" :key="i">
|
||||
<div class="itemLeft">
|
||||
<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
<div class="itemRight">
|
||||
<div class="rightTop">
|
||||
<div class="overHiddenText" style="width:60%">被困电梯，需要救援的风景和深刻搭街坊后来空手道解放螺丝钉顺利打开飞机螺丝钉看见分列式雕刻技法</div>
|
||||
<div class="overHiddenText" style="width:60%">被困电梯，需要救援</div>
|
||||
<div style="width:20%">检查人：张三</div>
|
||||
</div>
|
||||
<div class="rightCenter">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user