上海电力
This commit is contained in:
parent
4df30a4ec2
commit
2d01a7e2e3
@ -53,7 +53,8 @@ NODE_ENV = 'development'
|
||||
# VITE_API_URL = 'http://101.43.164.214:11126'
|
||||
# 上海电力
|
||||
# VITE_API_URL = 'http://121.37.106.37:9840'
|
||||
VITE_API_URL = 'http://jxj.zhgdyun.com:100'
|
||||
VITE_API_URL = 'http://120.205.46.66:9840'
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:100'
|
||||
# 上传
|
||||
VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ NODE_ENV = "production"
|
||||
# 注：切换部署环境时需更改src\routers\modules\staticRouter里的路径 改src\config\config.ts里的项目标识
|
||||
# VITE_API_URL = "http://139.9.66.234:6688"
|
||||
# VITE_API_URL = "http://jxj.zhgdyun.com:6688"
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:100'
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:100' #演示环境
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:33981'
|
||||
# 沈阳合盈线上
|
||||
# VITE_API_URL = "http://101.43.164.214:45022"
|
||||
@ -54,7 +54,7 @@ NODE_ENV = "production"
|
||||
# VITE_API_URL = 'http://121.37.106.37:9820'
|
||||
# VITE_API_URL = 'http://121.37.106.37:9809'
|
||||
# 上海电力
|
||||
VITE_API_URL = 'http://121.37.106.37:9840'
|
||||
VITE_API_URL = 'http://120.205.46.66:9840'
|
||||
# 打包
|
||||
VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='
|
||||
|
||||
|
||||
@ -358,7 +358,7 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
],
|
||||
meta: {
|
||||
// title: "数字化项目监管平台"
|
||||
title: "智慧工厂安全生产监管平台" //鞍钢项目
|
||||
title: "上海电力120万于瓦风电项目" //鞍钢项目
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="项目展示">
|
||||
<div class="top-tab" v-if="COMPANY === 'agjt'">
|
||||
<div
|
||||
class="tab-box"
|
||||
:style="boxStyle(item)"
|
||||
v-for="(item, index) in topText2"
|
||||
:key="item.id"
|
||||
@click="activeBtn(item, index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-tab" v-else>
|
||||
<div
|
||||
class="tab-box"
|
||||
:style="boxStyle(item)"
|
||||
v-for="(item, index) in topText"
|
||||
:key="item.id"
|
||||
@click="activeBtn(item, index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="href-content" v-if="showVideo == 1">
|
||||
<el-carousel indicator-position="none" height="450px" style="width: 76%;">
|
||||
<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">
|
||||
<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>
|
||||
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
|
||||
</div>
|
||||
<div class="imgBox" v-if="showVideo == 3">
|
||||
<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
|
||||
<el-upload
|
||||
:action="BASEURL + '/upload/image'"
|
||||
:on-success="file => handleSuccess(file, 1)"
|
||||
:on-error="file => handleError(file, 1)"
|
||||
:beforeUpload="file => handleBeforeUploadPic(file, 1)"
|
||||
name="files"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<!-- 更换图片 -->
|
||||
<span class="change-video" v-if="showChangeImg">更换图片</span>
|
||||
</el-upload>
|
||||
<img :src="BASEURL + '/image/' + picUrl" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</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: 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);
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
})
|
||||
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;
|
||||
.videoBox {
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
margin-top: 8%;
|
||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.videos {
|
||||
width: 78%;
|
||||
height: 90%;
|
||||
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 {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .h-card .content {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,72 +1,23 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="项目展示">
|
||||
<div class="top-tab" v-if="COMPANY === 'agjt'">
|
||||
<div
|
||||
class="tab-box"
|
||||
:style="boxStyle(item)"
|
||||
v-for="(item, index) in topText2"
|
||||
:key="item.id"
|
||||
@click="activeBtn(item, index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-tab" v-else>
|
||||
<div
|
||||
class="tab-box"
|
||||
:style="boxStyle(item)"
|
||||
v-for="(item, index) in topText"
|
||||
:key="item.id"
|
||||
@click="activeBtn(item, index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="href-content" v-if="showVideo == 1">
|
||||
<el-carousel indicator-position="none" height="450px" style="width: 76%;">
|
||||
<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">
|
||||
<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>
|
||||
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
|
||||
</div>
|
||||
<div class="imgBox" v-if="showVideo == 3">
|
||||
<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
|
||||
<el-upload
|
||||
:action="BASEURL + '/upload/image'"
|
||||
:on-success="file => handleSuccess(file, 1)"
|
||||
:on-error="file => handleError(file, 1)"
|
||||
:beforeUpload="file => handleBeforeUploadPic(file, 1)"
|
||||
name="files"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<!-- 更换图片 -->
|
||||
<span class="change-video" v-if="showChangeImg">更换图片</span>
|
||||
</el-upload>
|
||||
<img :src="BASEURL + '/image/' + picUrl" alt="" />
|
||||
</div>
|
||||
<!-- 全屏icon -->
|
||||
<div class="fullScreen" @click="handleFullScreen">
|
||||
<el-icon :size="20" color="#fff">
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- <div class="map-box" id="mapContainer"></div> -->
|
||||
<!-- 旧沙盘地址 http://jxjzw.zhgdyun.com:6080/review1/#/login?projectId=2 -->
|
||||
<!-- http://121.37.106.37:9812/#/login?projectId=2 -->
|
||||
<!-- projectId=2 木垒标准版，projectId=3 木垒古尔班 -->
|
||||
<iframe
|
||||
style="width: 100%; height: 100%"
|
||||
id="iframeDom"
|
||||
src="http://120.205.46.66:6080/#/login?projectId=3"
|
||||
allowfullscreen
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
@ -74,16 +25,7 @@
|
||||
<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);
|
||||
import { FullScreen } from "@element-plus/icons-vue";
|
||||
// ts
|
||||
type Props = {
|
||||
projectData?: any; // 传入项目信息
|
||||
@ -92,9 +34,46 @@ type Props = {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
projectData: {}
|
||||
});
|
||||
let map = null;
|
||||
// 项目信息
|
||||
const projectData = ref({} as any);
|
||||
|
||||
const handleFullScreen = () => {
|
||||
const dom = document.getElementById('iframeDom');
|
||||
requestFullScreen(dom)
|
||||
};
|
||||
|
||||
/**
|
||||
* 进入全屏
|
||||
* @param element
|
||||
*/
|
||||
function requestFullScreen(element) {
|
||||
var requestMethod =
|
||||
element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
|
||||
if (requestMethod) {
|
||||
requestMethod.call(element);
|
||||
} else if (typeof window.ActiveXObject !== "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript !== null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出全屏
|
||||
*/
|
||||
function exitFullscreen() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.projectData,
|
||||
newVal => {
|
||||
@ -105,198 +84,25 @@ watch(
|
||||
}
|
||||
}
|
||||
);
|
||||
//效果图
|
||||
const picUrl = ref("" as any);
|
||||
onMounted(async () => {
|
||||
// initMap();
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
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 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;
|
||||
// 围栏定位地图
|
||||
function initMap() {
|
||||
//地图加载
|
||||
map = new AMap.Map("mapContainer", {
|
||||
// viewMode: '3D',
|
||||
resizeEnable: true,
|
||||
center: [90.604822, 44.329273],
|
||||
// layers: [new AMap.TileLayer.Satellite()],
|
||||
zoom: 15
|
||||
// center: [116.39, 39.9],
|
||||
// offset: new AMap.Pixel(-10, -10) // 设置地图偏移量
|
||||
});
|
||||
}
|
||||
//将方法暴露给父组件
|
||||
defineExpose({
|
||||
getQueryBySnData
|
||||
})
|
||||
onMounted(async () => {
|
||||
if(COMPANY !== 'agjt') showVideo.value = 2
|
||||
await getVideoList();
|
||||
getQueryBySnData();
|
||||
if(COMPANY != 'agjt'){
|
||||
showVideo.value = 2;
|
||||
}
|
||||
});
|
||||
defineExpose({});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -304,83 +110,28 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.videoBox {
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
margin-top: 8%;
|
||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.videos {
|
||||
width: 78%;
|
||||
height: 90%;
|
||||
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 {
|
||||
// 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%;
|
||||
.map-box {
|
||||
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;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .h-card .content {
|
||||
background: none;
|
||||
}
|
||||
.fullScreen {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.amap-logo {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.amap-copyright {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,7 +11,8 @@ import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
|
||||
import { getXzSecurityQualitylnspectionRecordlistApi } from "@/api/modules/projectOverview";
|
||||
// import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
|
||||
import * as echarts from "echarts";
|
||||
const echartsTest = ref();
|
||||
let questionTotal = ref(0 as any);
|
||||
@ -333,12 +334,13 @@ function drawEchart() {
|
||||
//获取安全管理
|
||||
// const safeData = ref(null as any);
|
||||
const getSafeInfo = async () => {
|
||||
const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
|
||||
// const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
|
||||
const res: any = await getXzSecurityQualitylnspectionRecordlistApi({ projectSn: store.sn, pageNo: 1, pageSize: 10 });
|
||||
// console.log("获取安全管理", res);
|
||||
// safeData.value = res.result;
|
||||
dataList.value[0].value = res.result.rectificationNum;
|
||||
dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
|
||||
questionTotal.value = res.result.totalNum;
|
||||
dataList.value[0].value = res.result.total.rectificationNum;
|
||||
dataList.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
|
||||
questionTotal.value = res.result.total.totalNum;
|
||||
drawEchart();
|
||||
};
|
||||
//将方法暴露给父组件
|
||||
|
||||
@ -1256,8 +1256,12 @@ function getCrewListData() {
|
||||
if (res.code == 200) {
|
||||
console.log("👇智能安全帽--分类查询设备列表--结果集");
|
||||
console.log(res.result);
|
||||
|
||||
const filterArray = res.result
|
||||
|
||||
let personList = [];
|
||||
res.result.forEach(item => {
|
||||
personList = personList.concat(item.safetyHatDevs);
|
||||
});
|
||||
const filterArray = personList
|
||||
.filter(item => item.workerName !== "")
|
||||
.map(item => ({ devSn: item.devSn, workerName: item.workerName }));
|
||||
let nameOption = filterArray.map(item => {
|
||||
|
||||
@ -90,7 +90,8 @@ const getMoreSmokeRecordList = async () => {
|
||||
const load = async () => {
|
||||
console.log("加载", pageNo.value * pageSize.value);
|
||||
if (pageNo.value > 1 && list.value.length == 0) return;
|
||||
if (pageNo.value * pageSize.value > list.value.length) return ElMessage.warning("到底部了！");
|
||||
if (pageNo.value * pageSize.value > list.value.length) return;
|
||||
// ElMessage.warning("到底部了！");
|
||||
pageNo.value += 1;
|
||||
await getMoreSmokeRecordList();
|
||||
};
|
||||
|
||||
@ -198,9 +198,10 @@ const getDateitem = (type: any) => {
|
||||
|
||||
const load = async () => {
|
||||
console.log("加载", pageNo.value * pageSize.value);
|
||||
if(pageNo.value > 1 && vehicleData.value.length == 0) return
|
||||
if(pageNo.value * pageSize.value > vehicleData.value.length) return ElMessage.warning("到底部了！");
|
||||
if(checked.value == 1 || checked.value == 2){
|
||||
if (pageNo.value > 1 && vehicleData.value.length == 0) return;
|
||||
if (pageNo.value * pageSize.value > vehicleData.value.length) return;
|
||||
// ElMessage.warning("到底部了！");
|
||||
if (checked.value == 1 || checked.value == 2) {
|
||||
getVehicleList();
|
||||
} else {
|
||||
getAndExitListApi();
|
||||
|
||||
@ -408,7 +408,7 @@ const initPlugin = () => {
|
||||
// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
|
||||
// console.log(0);
|
||||
// oWebControl.value = null;
|
||||
console.log(oWebControl.value);
|
||||
console.log(oWebControl.value, "创建失败");
|
||||
// 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
window.WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||
initCount.value++;
|
||||
|
||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user