admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flx：提交总览大屏数据接口

Browse Source
This commit is contained in:
X_Rian 2024-06-14 20:06:07 +08:00
parent 6181bc06c6
commit 89b0298466
7 changed files with 85 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/setVideoDialog.vue
View File

@ -46,13 +46,13 @@ import { onMounted, reactive, ref } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import type { UploadInstance } from "element-plus";
import { configWeekVideoSaveApi,configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
import { configWeekVideoSaveApi, configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
import { GlobalStore } from "@/stores";
import moment from "moment";
import { COMPANY } from "@/config/config";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL;
const emits = defineEmits(["updateConfig"])
const emits = defineEmits(["updateConfig"]);
const videoConfigData = ref();
const dialogInfo = reactive({
showDialog: false,
@ -89,7 +89,7 @@ const dialogInfo = reactive({
]
});
// 获取一周的配置视频数据
const configWeekVideoListFn = async (showLoading:boolean) => {
const configWeekVideoListFn = async (showLoading: boolean) => {
const res: any = await configWeekVideoListApi(
{
projectSn: store.sn
@ -97,35 +97,32 @@ const configWeekVideoListFn = async (showLoading:boolean) => {
showLoading
);
if (res.result) {
videoConfigData.value = res.result
videoConfigData.value = res.result;
}
}
};
// 修改一周内某一天的视频
const configWeekVideoEditFn = async (showLoading:boolean,url:any,weekIndex:number) => {
console.log(url)
let requestData:any = {
const configWeekVideoEditFn = async (showLoading: boolean, url: any, weekIndex: number) => {
console.log(url);
let requestData: any = {
projectSn: store.sn
}
};
// 星期参数
const today = weekIndex == 6?0:weekIndex + 1
const weekParamsKey = ["sun","mon","tues","wed","thur","fri","sat"]
const today = weekIndex == 6 ? 0 : weekIndex + 1;
const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
requestData[weekParamsKey[+today]] = url;
// type参数
if(COMPANY == "agjtProjectKanban"){
if (COMPANY == "agjtProjectKanban") {
requestData.type = 1;
} else if(COMPANY == "agjtOverviewScreen"){
} else if (COMPANY == "agjtOverviewScreen") {
requestData.type = 2;
} else if(COMPANY == "agjtLive"){
} else if (COMPANY == "agjtLive") {
requestData.type = 3;
}
// id参数
if(videoConfigData.value && videoConfigData.value.length){
requestData.id = videoConfigData.value[0].id
if (videoConfigData.value && videoConfigData.value.length) {
requestData.id = videoConfigData.value[0].id;
}
const res: any = await configWeekVideoSaveApi(
requestData,
showLoading
);
const res: any = await configWeekVideoSaveApi(requestData, showLoading);
if (res.success) {
console.log("修改成功", res);
ElMessage({
@ -134,9 +131,9 @@ const configWeekVideoEditFn = async (showLoading:boolean,url:any,weekIndex:numbe
type: "success"
});
configWeekVideoListFn(true);
emits("updateConfig")
emits("updateConfig");
}
}
};
// 视频文件上传 之前
function handleBeforeUploadVideo(file: any) {
console.log(file, "上传之前");
@ -158,7 +155,7 @@ function handleSuccess(file: any, index: number) {
console.log(file, "上传成功");
let url = file.data[0].imageUrl;
// this.imgUrl = url;
configWeekVideoEditFn(true,url,index);
configWeekVideoEditFn(true, url, index);
}
}
const closeDialog = () => {

4
src/config/config.ts
View File

@ -30,8 +30,8 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
// export const COMPANY: string = "agjt"; //鞍钢集团
// export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
// export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
// export const COMPANY: string = "slx"; //苏立信项目
// export const COMPANY: string = "hfqc"; //合肥启程项目
// export const COMPANY: string = "jsyc"; // 江苏盐城项目

4
src/routers/modules/staticRouter.ts
View File

@ -27,8 +27,8 @@ export const staticRouter: RouteRecordRaw[] = [
// // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [
{

45
src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerTop.vue
View File

@ -5,15 +5,15 @@
<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 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>
:name="index"
:poster="''"
:deviceIp="`http://${item.account}:${item.password}`"
:videoUrls="item.serialNumber"
:autoPlay="true"
></ckplayerComp>
</el-carousel-item>
</el-carousel>
</div>
@ -73,35 +73,36 @@ const showVideo = ref(1 as any);
const showChangeVideo = ref(false as any);
// 修改了视频配置
const updateConfig = () => {
configWeekVideoListFn(true)
}
configWeekVideoListFn(true);
};
// 获取一周的配置视频数据
const configWeekVideoListFn = async (showLoading:boolean) => {
const configWeekVideoListFn = async (showLoading: boolean) => {
const res: any = await configWeekVideoListApi(
{
projectSn: store.sn
projectSn: store.sn,
type: 1
},
showLoading
);
if (res.result) {
// 星期参数
const today = moment().format('d');
const weekParamsKey = ["sun","mon","tues","wed","thur","fri","sat"]
projectData.value.videoUrl = res.result[0][weekParamsKey[+today]]
const today = moment().format("d");
const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
projectData.value.videoUrl = res.result[0][weekParamsKey[+today]];
}
}
};
const getVideoList = async () => {
let res: any = await selectLiveVideoListApi({
projectSn: store.sn
});
console.log(res,'445566')
if(res.result && res.result.extend1){
console.log(res, "445566");
if (res.result && res.result.extend1) {
videoList.value = JSON.parse(res.result.extend1).result.videoList;
console.log(videoList.value,'112233')
console.log(videoList.value, "112233");
// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
setTimeout(() => {
// 获取所有的 video 元素
var videos = document.querySelectorAll(".href-content video")
var videos = document.querySelectorAll(".href-content video");
// var videos = document.getElementsByTagName("video");
// 遍历所有的 video 元素
for (var i = 0; i < videos.length; i++) {
@ -113,7 +114,7 @@ const getVideoList = async () => {
}
};
onMounted(async () => {
if(COMPANY !== 'agjt') showVideo.value = 2
if (COMPANY !== "agjt") showVideo.value = 2;
await getVideoList();
await configWeekVideoListFn(true);
});
@ -124,11 +125,11 @@ onMounted(async () => {
width: 100%;
height: 100%;
position: relative;
.video-config{
.video-config {
position: absolute;
top: 1.5%;
right: 1%;
.config-icon{
.config-icon {
cursor: pointer;
}
}

37
src/views/overviewScreen/commandCenter/centerTop.vue
View File

@ -9,16 +9,11 @@
<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>
<!-- src="https://v6.huanqiucdn.cn/4394989evodtranscq1500012236/77e4bc8a1253642698931109862/v.f100830.mp4" -->
<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>
@ -28,11 +23,11 @@ import setVideoDialog from "@/components/setVideoDialog.vue";
import { ref, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus";
import { configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
import { selectLiveVideoListApi } from "@/api/modules/video";
import { COMPANY } from "@/config/config";
import moment from "moment";
const store = GlobalStore();
const videoList = ref([] as any);
// ts
@ -53,6 +48,26 @@ const openPeopleCountDialog = () => {
title: "配置视频"
});
};
// 修改了视频配置
const updateConfig = () => {
configWeekVideoListFn(false);
};
// 获取一周的配置视频数据
const configWeekVideoListFn = async (showLoading: boolean) => {
const res: any = await configWeekVideoListApi(
{
projectSn: store.sn,
type: 2
},
showLoading
);
if (res.result) {
// 星期参数
const today = moment().format("d");
const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
projectData.value.videoUrl = res.result[0][weekParamsKey[+today]];
}
};
watch(
() => props.projectData,
@ -68,6 +83,7 @@ watch(
const picUrl = ref("" as any);
const BASEURL = import.meta.env.VITE_API_URL;
// 显示视频
const showVideo = ref(1 as any);
@ -252,6 +268,7 @@ onMounted(async () => {
if (COMPANY !== "agjt") showVideo.value = 2;
await getVideoList();
getQueryBySnData();
configWeekVideoListFn(false);
if (COMPANY != "agjt") {
showVideo.value = 2;
}

19
src/views/overviewScreen/commandCenter/index.vue
View File

@ -1,3 +1,4 @@
<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
<div class="projectContent">
<div class="left">
@ -15,9 +16,9 @@
<centerBottom class="centerBottom"></centerBottom>
</div>
<div class="right">
<rightAll class="rightAll"></rightAll>
<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
</div>
<!-- <dataDialog ref="partyBuildRef"></dataDialog> -->
<dataDialog ref="partyBuildRef"></dataDialog>
</div>
</template>
@ -29,7 +30,7 @@ import centerBottom from "@/views/overviewScreen/commandCenter/centerBottom.vue"
import rightAll from "@/views/overviewScreen/commandCenter/rightAll.vue";
import { GlobalStore } from "@/stores";
import { getCountTaskProgressApi } from "@/api/modules/agjtCommandApi";
// import dataDialog from "../dialogCompnnents/data-dialog.vue";
import dataDialog from "@/views/commandScreen/dialogCompnnents/data-dialog.vue";
// import * as mqtt from "mqtt/dist/mqtt.min";
// import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
@ -39,12 +40,12 @@ const store = GlobalStore();
// const projectData = ref(null as any);
// 弹窗
// const partyBuildRef = ref();
// const openPeopleCountDialog = (index: any) => {
// console.log("~~~~~~~~~~~~~~", index);
// partyBuildRef.value.openDialog(index);
// // console.log(partyBuildRef.value);
// };
const partyBuildRef = ref();
const openPeopleCountDialog = (index: any) => {
console.log("~~~~~~~~~~~~~~", index);
partyBuildRef.value.openDialog(index);
// console.log(partyBuildRef.value);
};
// const options = {
// connectTimeout: 40000,
// clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),

2
src/views/overviewScreen/indexCommand.vue
View File

@ -4,7 +4,7 @@
<div class="largeScreen" ref="dataScreenRef">
<div class="header">
<span class="projectTitle">
<p v-if="COMPANY === 'agjtCommand'">总览大屏</p>
<p v-if="COMPANY === 'agjtOverviewScreen'">总览大屏</p>
</span>
<div class="leftIcon">
<div class="info">数字化项目监管平台</div>