386 lines
11 KiB
Vue
386 lines
11 KiB
Vue
<template>
|
||
<div class="table-box">
|
||
<div class="change-btn" @click="changeScreen">
|
||
<img class="changeImg" src="@/assets/images/screenImg/change.png" alt="" />
|
||
</div>
|
||
<div class="leftBox">
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<img src="@/assets/images/hzImg/xm/xmxx.png" alt="" class="title" />
|
||
</div>
|
||
<div class="blockContent" @click="showProjectDialog">
|
||
<projectInfo :engineeringSn="engineeringSn" @projectData="getProjectData"></projectInfo>
|
||
</div>
|
||
</div>
|
||
<projectInfoDialog v-show="projectDialog" @close="closeProjectDialog" :projectData="projectData"></projectInfoDialog>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<img src="@/assets/images/hzImg/xm/zfgl.png" alt="" class="title" />
|
||
</div>
|
||
<div class="blockContent chartContent">
|
||
<div class="chartBox">
|
||
<pieChart :colorArr="['#EEA959', '#4CC4F8']" title="支付率" :chartData="payData" :total="payRatio"></pieChart>
|
||
</div>
|
||
<div class="detailBox">
|
||
<!-- <div class="item">
|
||
<i class="rect"></i>
|
||
<span class="name">请款金额</span>
|
||
<span>607.5万</span>
|
||
</div>
|
||
<div class="item">
|
||
<i class="rect"></i>
|
||
<span class="name">变更金额</span>
|
||
<span>7.5万</span>
|
||
</div> -->
|
||
<div class="item">
|
||
<!-- <i class="color1 rect"></i> -->
|
||
<span class="name">申请金额</span>
|
||
<span>{{ dataObj.applyAmountTotal }}万</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- <i class="color2 rect"></i> -->
|
||
<span class="name">实际支付</span>
|
||
<span>{{ dataObj.payAmountTotal }}万</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- <i class="color1 rect"></i> -->
|
||
<span class="name">年度申请金额</span>
|
||
<span>{{ dataObj.applyAmountByYear }}万</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- <i class="color2 rect"></i> -->
|
||
<span class="name">年度实际支付</span>
|
||
<span>{{ dataObj.payAmountByYear }}万</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- <i class="color1 rect"></i> -->
|
||
<span class="name">当月申请金额</span>
|
||
<span>{{ dataObj.applyAmountByMonth }}万</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- <i class="color2 rect"></i> -->
|
||
<span class="name">当月实际支付</span>
|
||
<span>{{ dataObj.payAmountByMonth }}万</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<img src="@/assets/images/hzImg/xm/gdxcsp.png" alt="" class="title" />
|
||
</div>
|
||
<div class="blockContent" style="height: 260px">
|
||
<!-- <img src="@/assets/images/hzImg/xm/video.png" alt="" width="100%" height="100%" /> -->
|
||
<!-- <video style="width: 100%; height: 100%; object-fit: fill" controls :src="videoData.videoUrl"></video> -->
|
||
<!-- <div id="playWnd" class="playWnd"></div> -->
|
||
<div id="play_window" ref="playWndBox" class="main" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centerBox">
|
||
<div class="mapBox">
|
||
<!-- <maps :projectData="projectData"></maps> -->
|
||
<BDmaps :projectData="projectData"></BDmaps>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle blockTitle2">
|
||
<img src="@/assets/images/hzImg/xm/lcb.png" alt="" class="title" />
|
||
</div>
|
||
<div class="blockContent">
|
||
<milestone :engineeringSn="engineeringSn" :projectData="projectData"></milestone>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightBox">
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<img src="@/assets/images/hzImg/xm/aqgl.png" alt="" class="title" />
|
||
</div>
|
||
<div class="blockContent chartContent">
|
||
<div class="chartBox">
|
||
<pieChart
|
||
:colorArr="['#6375C7', '#EC6266']"
|
||
:chartData="saftyData"
|
||
title="安全问题总数"
|
||
:total="safetyTotal"
|
||
></pieChart>
|
||
</div>
|
||
<div class="detailBox">
|
||
<div class="item">
|
||
<i class="color3 rect"></i>
|
||
<span class="name">已整改安全问题</span>
|
||
<span>{{ saftyData[0].value }}</span>
|
||
</div>
|
||
<div class="item">
|
||
<i class="color4 rect"></i>
|
||
<span class="name">未整改安全问题</span>
|
||
<span>{{ saftyData[1].value }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<img src="@/assets/images/hzImg/xm/zlgl.png" alt="" class="title" />
|
||
</div>
|
||
<div class="blockContent chartContent">
|
||
<div class="chartBox">
|
||
<pieChart
|
||
:colorArr="['#82FBEA', '#4CC4F8']"
|
||
:chartData="qualityData"
|
||
title="质量问题总数"
|
||
:total="qualityTotal"
|
||
></pieChart>
|
||
</div>
|
||
<div class="detailBox">
|
||
<div class="item">
|
||
<i class="color5 rect"></i>
|
||
<span class="name">已整改质量问题</span>
|
||
<span>{{ qualityData[0].value }}</span>
|
||
</div>
|
||
<div class="item">
|
||
<i class="color6 rect"></i>
|
||
<span class="name">未整改质量问题</span>
|
||
<span>{{ qualityData[1].value }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<img src="@/assets/images/hzImg/xm/hjjc.png" alt="" class="title" />
|
||
</div>
|
||
<div class="blockContent">
|
||
<environment></environment>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="tsx" name="largeScreen">
|
||
import { ref, reactive, onMounted, getCurrentInstance, nextTick, onBeforeUnmount, Ref, watch } from "vue";
|
||
import projectInfo from "./components/projectInfo.vue";
|
||
import pieChart from "./components/pieChart.vue";
|
||
import milestone from "./components/milestone.vue";
|
||
import maps from "./components/maps.vue";
|
||
import BDmaps from "./components/BDmaps.vue";
|
||
import environment from "./components/environment.vue";
|
||
import projectInfoDialog from "./components/projectInfoDialog.vue";
|
||
import { screenEntPayment, getEntInspectInfo } from "@/api/modules/huizhou";
|
||
import { getpreviewURL } from "@/api/modules/common";
|
||
import { GlobalStore } from "@/stores";
|
||
import { getvideoEngTreeList } from "@/api/modules/goverment";
|
||
|
||
const store = GlobalStore();
|
||
const playWndBox = ref(null);
|
||
//获取项目信息
|
||
const projectData = ref({
|
||
latitude: "",
|
||
longitude: "",
|
||
totalDay: ""
|
||
});
|
||
let playWndHeight = ref("");
|
||
let playWndWidth = ref("");
|
||
let myPlugin = ref("");
|
||
let cameraIndexCode = ref([]);
|
||
let playUrl = ref();
|
||
let playIndex = ref(0);
|
||
const props = defineProps(["engineeringSn"]);
|
||
const emits = defineEmits(["change"]);
|
||
const changeScreen = () => {
|
||
emits("change");
|
||
};
|
||
const getProjectData = (data: any) => {
|
||
projectData.value = data;
|
||
};
|
||
const dataObj = ref({});
|
||
const getPayMentData = async () => {
|
||
const res = await screenEntPayment({ engineeringSn: props.engineeringSn });
|
||
console.log(res);
|
||
if (res && res.result) {
|
||
dataObj.value = res.result;
|
||
payRatio.value = res.result.payRatio;
|
||
payData.value = reactive([
|
||
{
|
||
name: "支付",
|
||
value: res.result.payAmount
|
||
},
|
||
{
|
||
name: "总和",
|
||
value: res.result.totalAmount
|
||
}
|
||
]);
|
||
}
|
||
};
|
||
// 视频弹框 --- start
|
||
const projectDialog = ref(false);
|
||
const showProjectDialog = () => {
|
||
projectDialog.value = true;
|
||
};
|
||
const closeProjectDialog = () => {
|
||
projectDialog.value = false;
|
||
};
|
||
// 视频弹框 --- end
|
||
|
||
// 支付管理 --- start
|
||
const payRatio = ref("");
|
||
let payData = ref([
|
||
{
|
||
name: "支付",
|
||
value: 0
|
||
},
|
||
{
|
||
name: "总和",
|
||
value: 0
|
||
}
|
||
]);
|
||
// 支付管理 --- end
|
||
|
||
// 安全质量 --- start
|
||
const safetyTotal = ref(0);
|
||
let saftyData = ref([
|
||
{
|
||
name: "已整改安全问题",
|
||
value: 0
|
||
},
|
||
{
|
||
name: "未整改安全问题",
|
||
value: 0
|
||
}
|
||
]);
|
||
const qualityTotal = ref(0);
|
||
let qualityData = ref([
|
||
{
|
||
name: "已整改质量问题",
|
||
value: 0
|
||
},
|
||
{
|
||
name: "未整改质量问题",
|
||
value: 0
|
||
}
|
||
]);
|
||
// 获取安全质量信息
|
||
const getInspect = async () => {
|
||
const res: any = await getEntInspectInfo({ engineeringSn: props.engineeringSn });
|
||
safetyTotal.value = res.result.safetyTotal;
|
||
saftyData.value[0].value = res.result.safetyCompleted;
|
||
saftyData.value[1].value = res.result.safetyUnCompleted;
|
||
qualityTotal.value = res.result.qualityTotal;
|
||
qualityData.value[0].value = res.result.qualityCompleted;
|
||
qualityData.value[1].value = res.result.qualityUnCompleted;
|
||
};
|
||
// 安全质量 --- end
|
||
// onBeforeUnmount(() => {
|
||
// if (oWebControl.value === undefined) {
|
||
// // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
// oWebControl.JS_HideWnd();
|
||
// // 销毁当前播放的视频
|
||
// oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
|
||
// // 断开与插件服务连接
|
||
// oWebControl.JS_Disconnect();
|
||
// }
|
||
// });
|
||
// 播放视频流
|
||
const playVideo = async () => {
|
||
let url = playUrl.value;
|
||
let newMyplugin = myPlugin.value;
|
||
console.log(url);
|
||
console.log(playIndex.value);
|
||
newMyplugin
|
||
.JS_Play(
|
||
url,
|
||
{
|
||
playURL: url, // 流媒体播放时必传
|
||
mode: 1 // 解码类型：0=普通模式; 1=高级模式 默认为0
|
||
// 设置直连时的认证参数等
|
||
// ...
|
||
},
|
||
playIndex.value //当前窗口下标
|
||
)
|
||
.then(
|
||
() => {
|
||
console.info("JS_Play success");
|
||
playIndex.value += 1;
|
||
// do you want...
|
||
},
|
||
() => {
|
||
console.info("JS_Play failed:");
|
||
// playIndex.value += 1;
|
||
// do you want...
|
||
}
|
||
);
|
||
};
|
||
// 获取视频流
|
||
const getVideo = async () => {
|
||
// await sendRequest({ code: cameraIndexCode.value });
|
||
const { result }: { result: any } = await getvideoEngTreeList({});
|
||
let defaultCode: string = "";
|
||
if (result.length > 0) {
|
||
defaultCode = result[0].code;
|
||
if (!defaultCode) {
|
||
cameraIndexCode.value = result[0].children.map((item: any) => {
|
||
return item.code;
|
||
});
|
||
defaultCode = cameraIndexCode.value[0];
|
||
}
|
||
}
|
||
const res = await getpreviewURL({ cameraIndexCode: defaultCode, protocol: "ws" });
|
||
playUrl.value = res.result;
|
||
playVideo();
|
||
console.log(res);
|
||
};
|
||
const BeginPlayer = () => {
|
||
console.log(666, "-----------------");
|
||
// 初始化插件
|
||
myPlugin.value = new JSPlugin({
|
||
szId: "play_window", //需要英文字母开头 必填
|
||
// szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
|
||
szBasePath: "/h5player", // 打包后的地址
|
||
// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
|
||
iWidth: playWndWidth.value + "px",
|
||
iHeight: playWndHeight.value + "px",
|
||
iMaxSplit: 4,
|
||
iCurrentSplit: 1,
|
||
openDebug: true
|
||
});
|
||
};
|
||
onMounted(async () => {
|
||
await getInspect();
|
||
await getPayMentData();
|
||
await BeginPlayer();
|
||
// 获取页面的实例对象 ee
|
||
const pageInstance = getCurrentInstance();
|
||
// 获取dom节点对象
|
||
const tagDomObj = pageInstance?.refs.playWndBox;
|
||
playWndHeight.value = tagDomObj?.clientHeight;
|
||
playWndWidth.value = tagDomObj?.clientWidth;
|
||
|
||
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||
window.addEventListener("scroll", () => {
|
||
if (myPlugin.value == undefined) {
|
||
setTimeout(function () {
|
||
myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||
}, 500);
|
||
// setWndCover();
|
||
}
|
||
});
|
||
|
||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||
window.addEventListener("resize", e => {
|
||
if (myPlugin.value == undefined) {
|
||
// console.log("wwwww", e);
|
||
setTimeout(function () {
|
||
myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||
}, 500);
|
||
// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||
// setWndCover();
|
||
}
|
||
});
|
||
getVideo();
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import url("./style.scss");
|
||
</style>
|