2024-04-12 09:26:48 +08:00
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="ydool_body">
|
|
|
|
|
<!-- <div id="header">
|
|
|
|
|
<img class="title" src="../assets/img_07.png" alt="" />
|
|
|
|
|
</div> -->
|
|
|
|
|
<Header />
|
2024-04-15 09:15:31 +08:00
|
|
|
|
<router-view />
|
2024-04-12 09:26:48 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import Header from "../components/header.vue";
|
|
|
|
|
import eBubble from "./echarts/bubble.vue";
|
|
|
|
|
import ePie from "./echarts/pie.vue";
|
|
|
|
|
import ePie2 from "./echarts/pie2.vue";
|
|
|
|
|
import eGraph from "./echarts/graph.vue";
|
|
|
|
|
import { ref, onMounted, onBeforeMount } from "vue";
|
|
|
|
|
|
|
|
|
|
// 监听缩放
|
|
|
|
|
window.addEventListener("resize", () =>
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
//监测分辨率发生改变就对页面进行刷新,可以改变zoom的值
|
|
|
|
|
location.reload();
|
2024-04-15 09:15:31 +08:00
|
|
|
|
// bodyScale();
|
2024-04-12 09:26:48 +08:00
|
|
|
|
}, 10)
|
|
|
|
|
);
|
|
|
|
|
|
2024-04-15 09:15:31 +08:00
|
|
|
|
const insertCss = (select, styles) => {
|
|
|
|
|
console.log(styles);
|
|
|
|
|
if (document.styleSheets.length === 0) {
|
|
|
|
|
//如果没有style标签,则创建一个style标签
|
|
|
|
|
var style = document.createElement("style");
|
|
|
|
|
document.head.appendChild(style);
|
|
|
|
|
}
|
|
|
|
|
var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
|
|
|
|
|
var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
|
|
|
|
|
for (var prop in styles) {
|
|
|
|
|
str +=
|
|
|
|
|
prop.replace(/([A-Z])/g, function (item) {
|
|
|
|
|
//使用正则把大写字母替换成 '-小写字母'
|
|
|
|
|
return "-" + item.toLowerCase();
|
|
|
|
|
}) +
|
|
|
|
|
":" +
|
|
|
|
|
styles[prop] +
|
|
|
|
|
";";
|
|
|
|
|
}
|
|
|
|
|
str += "}";
|
|
|
|
|
styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
|
|
|
|
|
};
|
2024-04-12 09:26:48 +08:00
|
|
|
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
|
|
let zoom = document.body.clientWidth / 1920;
|
|
|
|
|
document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
|
2024-04-15 09:15:31 +08:00
|
|
|
|
//解决zoom放大缩小导致echarts位置偏移问题
|
|
|
|
|
let strScale = `scale(${zoom})`;
|
|
|
|
|
var obj = {
|
|
|
|
|
zoom: 1 / zoom,
|
|
|
|
|
transform: strScale,
|
|
|
|
|
transformOrigin: "0 0",
|
|
|
|
|
};
|
|
|
|
|
insertCss("canvas", obj);
|
2024-04-12 09:26:48 +08:00
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.content {
|
2024-04-15 09:43:44 +08:00
|
|
|
|
background-image: url("../assets/bgImg.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
2024-04-12 09:26:48 +08:00
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--zoom: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ydool_body {
|
|
|
|
|
zoom: var(--zoom);
|
|
|
|
|
}
|
|
|
|
|
</style>
|