main
parent
8a5ab2fcb6
commit
23e081053f
|
@ -1,7 +1,7 @@
|
|||
#app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: url(../image/bg1.jpg) no-repeat;
|
||||
// background: url(../image/bg1.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
|
|
|
@ -8,13 +8,13 @@
|
|||
<template v-if="appStore.device !== 'mobile'">
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
|
||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</el-tooltip> -->
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
<div>{{ week }}</div>
|
||||
</div>
|
||||
</p>
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
<!-- <header-search id="header-search" class="right-menu-item" />
|
||||
|
||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
||||
|
@ -27,8 +27,8 @@
|
|||
|
||||
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
</el-tooltip> -->
|
||||
<el-icon size="28" @click="goHome"><HomeFilled /></el-icon>
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
|
@ -74,6 +74,7 @@ import useAppStore from '@/store/modules/app'
|
|||
import useUserStore from '@/store/modules/user'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import dayjs from "dayjs";
|
||||
const router = useRouter();
|
||||
|
||||
const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
|
@ -121,6 +122,10 @@ function logout() {
|
|||
})
|
||||
}).catch(() => { });
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
router.push('/index');
|
||||
}
|
||||
const updateTime = () => {
|
||||
currentTime.value = dayjs().format("YYYY年 MM月 DD日");
|
||||
time.value = dayjs().format("HH:mm");
|
||||
|
|
|
@ -113,7 +113,7 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
|
|||
}
|
||||
},
|
||||
formatter: data => {
|
||||
return data.value ? `{title|${data.data.name}:}
|
||||
return data.value ? `{title|${data.data.name}}
|
||||
{rich|${data.data.rate}%}` : ''
|
||||
} // 值为0的就不展示默认的示例
|
||||
},
|
||||
|
|
|
@ -43,7 +43,7 @@ const { buildInfo } = toRefs(data);
|
|||
right: 10px;
|
||||
// background: #0a1f2e;
|
||||
// border: 1px solid red;
|
||||
width: 320px;
|
||||
width: 360px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -67,7 +67,8 @@ const openDialog = () => {
|
|||
<style lang='scss' scoped>
|
||||
.deviceDiv {
|
||||
position: absolute;
|
||||
top: 410px;
|
||||
// top: 410px;
|
||||
bottom: 40px;
|
||||
right: 10px;
|
||||
width: 360px;
|
||||
// height: 460px;
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
<div class="deviceDiv">
|
||||
<TopDiv title="资产信息"></TopDiv>
|
||||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||
<div class="container1">
|
||||
<!-- <div class="container1">
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="chartsGl" id="charts"></div>
|
||||
</div>
|
||||
|
@ -24,9 +24,9 @@ const emit = defineEmits(['openDialog'])
|
|||
const data = reactive({
|
||||
optionsData: [
|
||||
{ value: 34, name: "A类设备" },
|
||||
{ value: 20, name: "B类设备" },
|
||||
{ value: 200, name: "B类设备" },
|
||||
{ value: 16, name: "C类设备" },
|
||||
{ value: 40, name: "D类设备" }]
|
||||
{ value: 50, name: "D类设备" }]
|
||||
});
|
||||
|
||||
const { optionsData } = toRefs(data);
|
||||
|
@ -34,7 +34,7 @@ const { optionsData } = toRefs(data);
|
|||
const optionData = optionsData.value.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: (item.value / 100) *100,
|
||||
rate: ((item.value / 300).toFixed(1)) *100,
|
||||
};
|
||||
});
|
||||
|
||||
|
@ -67,10 +67,10 @@ const openDialog = () => {
|
|||
<style lang='scss' scoped>
|
||||
.deviceDiv {
|
||||
position: absolute;
|
||||
top: 410px;
|
||||
bottom: 40px;
|
||||
right: 10px;
|
||||
width: 360px;
|
||||
height: 460px;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
@ -79,15 +79,13 @@ const openDialog = () => {
|
|||
|
||||
:deep(.border-box-content) {
|
||||
padding: 10px;
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
>div {
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
border: 1px solid red;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
@ -38,7 +38,7 @@ const { equipmentInfo } = toRefs(data);
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 320px;
|
||||
width: 360px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -61,9 +61,10 @@ const openDialog = () => {
|
|||
<style lang='scss' scoped>
|
||||
.deviceDiv {
|
||||
position: absolute;
|
||||
top: 410px;
|
||||
// top: 410px;
|
||||
bottom: 40px;
|
||||
right: 10px;
|
||||
width: 320px;
|
||||
width: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
|
@ -53,7 +53,7 @@ onMounted(() => {
|
|||
loadSence();
|
||||
// 启动动画
|
||||
renderScene();
|
||||
document.addEventListener("click", modelMouseClick);
|
||||
document.addEventListener("click", onMouseDown);
|
||||
});
|
||||
const init = () => {
|
||||
scene = new THREE.Scene("#00ffff");
|
||||
|
@ -133,13 +133,45 @@ const modelMouseClick = (event) => {
|
|||
if (intersects.length > 0) {
|
||||
intersects[0].object.material.color.set(0xff0000);
|
||||
// 设置选中物体的颜色
|
||||
scene.traverse( (object) => {
|
||||
scene.traverse((object) => {
|
||||
if (object.isMesh && object !== intersects[0].object) {
|
||||
originalColors.push({ object: object, color: object.material.color.clone() });
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 储存被选中的模型和材质
|
||||
let selectedObject = null;
|
||||
let selectedMaterial = null;
|
||||
|
||||
// const mouse = new THREE.Vector2();
|
||||
const onMouseDown = (event) => {
|
||||
var raycaster = new THREE.Raycaster()
|
||||
// 恢复之前被选中模型的材质
|
||||
if (selectedObject && selectedMaterial) {
|
||||
selectedObject.material = selectedMaterial;
|
||||
selectedObject = null;
|
||||
selectedMaterial = null;
|
||||
}
|
||||
// 计算鼠标点击位置的归一化设备坐标
|
||||
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
// 更新射线的起点和方向
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
// 计算射线和场景中所有可点击物体的相交情况
|
||||
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||
// 如果找到了模型,将其材质修改为绿色
|
||||
if (intersects.length > 0) {
|
||||
const clickedObject = intersects[0].object;
|
||||
// 储存被选中的模型和材质
|
||||
selectedObject = clickedObject;
|
||||
selectedMaterial = clickedObject.material;
|
||||
// 修改材质为绿色
|
||||
selectedObject.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
#three {
|
||||
|
|
Loading…
Reference in New Issue