fix: BUG修改

This commit is contained in:
kun 2024-03-25 20:57:41 +08:00
parent cf991171e6
commit af3e4871d5
6 changed files with 176 additions and 79 deletions

View File

@ -452,6 +452,10 @@ function drawChart() {
] ]
}; };
leftTopEcharts.setOption(option); leftTopEcharts.setOption(option);
// window.addEventListener("resize", () => {
// console.log(666)
// leftTopEcharts.resize();
// })
// window.onresize = function () { // window.onresize = function () {
// myEchart.resize(); // myEchart.resize();
// } // }

View File

@ -290,6 +290,10 @@ function drawEchart() {
] ]
}; };
echartsTest.setOption(option, true); echartsTest.setOption(option, true);
// window.addEventListener("resize", () => {
// console.log(666)
// echartsTest.resize();
// })
} }
// //
// const safeData = ref(null as any); // const safeData = ref(null as any);

View File

@ -13,7 +13,7 @@ import { GlobalStore } from "@/stores";
const store = GlobalStore(); const store = GlobalStore();
import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview"; import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts"; import * as echarts from "echarts";
const echartsTest = ref();
let questionTotal = ref(0 as any); let questionTotal = ref(0 as any);
let dataList = ref([ let dataList = ref([
@ -74,7 +74,7 @@ function Pie() {
} }
function drawEchart() { function drawEchart() {
let echartsTest = echarts.init(document.getElementById("echartsSafe")); echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
let option = { let option = {
tooltip: { tooltip: {
trigger: "item" trigger: "item"
@ -281,12 +281,53 @@ function drawEchart() {
label: { label: {
show: false show: false
}, },
data: Pie() data: Pie()
} }
] ]
}; };
echartsTest.setOption(option, true); // let option = {
// tooltip: {
// trigger: 'item'
// },
// legend: {
// top: '5%',
// left: 'center'
// },
// series: [
// {
// name: 'Access From',
// type: 'pie',
// radius: ['40%', '70%'],
// avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: 40,
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false
// },
// data: [
// { value: 1048, name: 'Search Engine' },
// { value: 735, name: 'Direct' },
// { value: 580, name: 'Email' },
// { value: 484, name: 'Union Ads' },
// { value: 300, name: 'Video Ads' }
// ]
// }
// ]
// };
echartsTest.value.setOption(option, true);
window.addEventListener("resize", () => {
console.log(echartsTest)
echartsTest.value.resize();
})
} }
// //
@ -301,8 +342,13 @@ const getSafeInfo = async () => {
drawEchart(); drawEchart();
}; };
onMounted(() => { onMounted(async () => {
getSafeInfo(); await getSafeInfo();
// window.onresize = function(){
// if(echartsTest.value){
// echartsTest.value.resize();
// }
// }
}); });
</script> </script>

View File

@ -113,7 +113,7 @@ onBeforeUnmount(() => {
oWebControl.JS_RequestInterface({ funcName: "destroyWnd" }); oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
// //
oWebControl.JS_Disconnect(); oWebControl.JS_Disconnect();
})
const initPlugin = () => { const initPlugin = () => {
oWebControl = new WebControl({ oWebControl = new WebControl({
szPluginContainer: "playWnd", // id szPluginContainer: "playWnd", // id

View File

@ -1,21 +1,22 @@
<template> <template>
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false" @scaleChange="scaleChange"> <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false" @scaleChange="scaleChange">
<div class="largeScreen" ref="dataScreenRef"> <!-- <div class="container"> -->
<div class="header"> <div class="largeScreen" ref="dataScreenRef" style="width: 100%;height: 100%;">
<!-- <div class="hearderIcon"><img src="@/assets/images/jxjLogo.png" alt="" /></div> --> <div class="header">
<span class="projectTitle"> <!-- <div class="hearderIcon"><img src="@/assets/images/jxjLogo.png" alt="" /></div> -->
<!-- 新建宁波项目要打开 --> <span class="projectTitle">
<p v-if="COMPANY === 'xjnb'">智慧工地项目监管平台</p> <!-- 新建宁波项目要打开 -->
<p v-else>数字化项目监管平台</p> <p v-if="COMPANY === 'xjnb'">智慧工地项目监管平台</p>
<!-- <p>江坑110kv变电站智慧工地</p> --> <p v-else>数字化项目监管平台</p>
</span> <!-- <p>江坑110kv变电站智慧工地</p> -->
</span>
<span class="projectSmallTitle"> <span class="projectSmallTitle">
<p>{{ projectTimeInfo.name || "" }}</p> <p>{{ projectTimeInfo.name || "" }}</p>
</span> </span>
<div class="rightIcon" @click.stop> <div class="rightIcon" @click.stop>
<div class="time">{{ nowTime }}</div> <div class="time">{{ nowTime }}</div>
<!-- <div class="Icon"> <!-- <div class="Icon">
<img src="@/assets/images/dustNoise/jobIcon.png" alt="" /> <img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
</div> </div>
<div class="Icon"> <div class="Icon">
@ -27,72 +28,73 @@
<div class="Icon"> <div class="Icon">
<img src="@/assets/images/dustNoise/dpIcon.png" alt="" /> <img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
</div> --> </div> -->
<div class="Icon"> <div class="Icon">
<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" /> <img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
</div> </div>
<div class="Icon" @click="showUserBox = !showUserBox"> <div class="Icon" @click="showUserBox = !showUserBox">
<img src="@/assets/images/dustNoise/ryIcon.png" alt="" /> <img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
</div> </div>
<!-- <el-dropdown trigger="click"> <!-- <el-dropdown trigger="click">
<template #dropdown> <template #dropdown>
<div class="userDialog" @click="loginOut">退出登录</div> <div class="userDialog" @click="loginOut">退出登录</div>
</template> </template>
</el-dropdown> --> </el-dropdown> -->
</div> </div>
<div class="userBox" v-show="showUserBox"> <div class="userBox" v-show="showUserBox">
<div class="userItem"> <div class="userItem">
<div class="sanJiao"></div> <div class="sanJiao"></div>
<div class="userIcon"> <div class="userIcon">
<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div> <div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
<div class="userName">{{ adminName }}</div> <div class="userName">{{ adminName }}</div>
</div> </div>
<div class="loginOut" @click="jumpBgd"> <div class="loginOut" @click="jumpBgd">
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/jumpIcon.png" /></div> <div class="loginOutIcon"><img src="@/assets/images/dustNoise/jumpIcon.png" /></div>
<div class="userName">项目后台</div> <div class="userName">项目后台</div>
</div> </div>
<div class="loginOut" @click="loginOut"> <div class="loginOut" @click="loginOut">
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/loginOut.png" /></div> <div class="loginOutIcon"><img src="@/assets/images/dustNoise/loginOut.png" /></div>
<div class="userName">退出登录</div> <div class="userName">退出登录</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="menuList">
<div v-for="(item, index) in menuList" :key="index" class="menStyle">
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
</div>
</div>
<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
<el-scrollbar class="scrollItem">
<div class="subMenuItem">
<div class="subItem" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
</div>
</div>
</el-scrollbar>
</div>
</div>
<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
<span
>{{ projectTimeInfo.contractPeriodStartTime }}起开始计算至今日{{ nowDate }}<span class="numColor">{{
projectPassDay
}}</span
>个日历天</span
>
</div>
<div class="dataBoardContent">
<router-view></router-view>
</div>
</div> </div>
<div class="menuList">
<div v-for="(item, index) in menuList" :key="index" class="menStyle">
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
</div>
</div>
<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
<el-scrollbar class="scrollItem">
<div class="subMenuItem">
<div class="subItem" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
</div>
</div>
</el-scrollbar>
</div>
</div>
<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
<span
>{{ projectTimeInfo.contractPeriodStartTime }}起开始计算至今日{{ nowDate }}<span class="numColor">{{
projectPassDay
}}</span
>个日历天</span
>
</div>
<div class="dataBoardContent">
<router-view></router-view>
</div>
</div>
<!-- </div> -->
</ScaleBox> </ScaleBox>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ScaleBox from "vue3-scale-box"; import ScaleBox from "vue3-scale-box";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue"; import { ref, reactive, onMounted, onBeforeUnmount, computed } from "vue";
import { getTaskTimeDetail } from "@/api/modules/schedulePlan"; import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
import { jumpLargeUserInfoApi } from "@/api/modules/login"; import { jumpLargeUserInfoApi } from "@/api/modules/login";
import { JSYCMenu, XJNBMenu, AHSAMenu } from "@/config/staticMenu"; import { JSYCMenu, XJNBMenu, AHSAMenu } from "@/config/staticMenu";
@ -109,6 +111,31 @@ let projectPassDay = ref(0 as any);
// //
const projectTimeInfo = ref({} as any); const projectTimeInfo = ref({} as any);
const scaleValue = ref(1); const scaleValue = ref(1);
const contentWidth = ref(0);
const contentHeight = ref(0);
const calculateAspectRatio = () => {
const container = document.querySelector('.largeScreen');
// const containerWidth = document.body.offsetWidth;
const containerWidth = document.documentElement.offsetWidth;
// const containerWidth: number = (<HTMLElement>container).offsetWidth;
// const containerHeight = document.body.offsetHeight;
const containerHeight = document.documentElement.offsetHeight;
// const containerHeight: number = (<HTMLElement>container).offsetHeight;
console.log(containerWidth, containerHeight)
const aspectRatio = 16 / 9; // 16:9
const containerAspectRatio = containerWidth / containerHeight;
if (containerAspectRatio > aspectRatio) {
//
contentHeight.value = containerHeight;
contentWidth.value = Math.floor(containerHeight * aspectRatio);
} else {
//
contentWidth.value = containerWidth;
contentHeight.value = Math.floor(containerWidth / aspectRatio);
}
console.log('contentWidth',contentWidth.value)
console.log('contentHeight',contentHeight.value)
};
const scaleChange = (data:any) => { const scaleChange = (data:any) => {
scaleValue.value = data; scaleValue.value = data;
} }
@ -395,7 +422,10 @@ const itemList = ref([]);
const activeTab = ref(0); const activeTab = ref(0);
const activeTab2 = ref(0); const activeTab2 = ref(0);
const router = useRouter(); const router = useRouter();
const getAspectRatioStyle = computed(() => ({
width: `${contentWidth.value}px`,
height: `${contentHeight.value}px`
}))
//tab //tab
const getAllModelMenu = () => { const getAllModelMenu = () => {
let half = store.projectDateAuth.moduleList; let half = store.projectDateAuth.moduleList;
@ -462,12 +492,17 @@ onMounted(async () => {
subMenus[4].style.marginLeft = "30%"; subMenus[4].style.marginLeft = "30%";
} }
await getProjectInfo(); await getProjectInfo();
calculateAspectRatio();
window.addEventListener('resize', calculateAspectRatio);
}); });
let timer = ref(null as any); let timer = ref(null as any);
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
document.removeEventListener("click", bodyCloseMenus); document.removeEventListener("click", bodyCloseMenus);
window.removeEventListener('resize', calculateAspectRatio);
}); });
function bodyCloseMenus() { function bodyCloseMenus() {
@ -518,11 +553,17 @@ function jumpBgd() {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.largeScreen { .largeScreen {
width: 100%;
height: 100%;
background: url("@/assets/images/bigImg.gif") no-repeat; background: url("@/assets/images/bigImg.gif") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative;
.header { .header {
width: 100%; width: 100%;
height: 12%; height: 12%;
@ -561,10 +602,12 @@ function jumpBgd() {
left: 70%; left: 70%;
color: #fff; color: #fff;
top: 1%; top: 1%;
display: flex;
align-items: center;
.time { .time {
font-size: 13px; font-size: 13px;
font-family: sadigitalNumber; font-family: sadigitalNumber;
margin: 1% 40% 0 10%; margin: 0.5% 33% 0 6%;
} }
.Icon { .Icon {
margin-right: 2%; margin-right: 2%;

View File

@ -50,10 +50,10 @@ import Card from "@/components/card.vue";
import CardBig from "@/components/cardBig.vue"; import CardBig from "@/components/cardBig.vue";
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import moment from "moment";
const store = GlobalStore(); const store = GlobalStore();
const value = ref("周计划14"); const value = ref("周计划14");
let rangeTime = ref([new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date()] as any); let rangeTime = ref([moment(new Date(new Date().getFullYear(), new Date().getMonth(), 1)).format("YYYY-MM-DD"), moment(new Date()).format("YYYY-MM-DD")] as any);
const noiseList = [ const noiseList = [
{ {