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");
 | 
			
		||||
| 
						 | 
				
			
			@ -61,7 +61,7 @@ const init = () => {
 | 
			
		|||
    texture.mapping = THREE.EquirectangularReflectionMapping;
 | 
			
		||||
    scene.background = texture
 | 
			
		||||
    scene.environment = texture
 | 
			
		||||
 
 | 
			
		||||
 | 
			
		||||
    const canvas = document.querySelector("#three");
 | 
			
		||||
    var cubeLoader = new THREE.CubeTextureLoader();
 | 
			
		||||
    // 创建一个渲染器并设置大小,WebGLRenderer将会使用电脑显卡来渲染场景
 | 
			
		||||
| 
						 | 
				
			
			@ -123,23 +123,55 @@ const modelMouseClick = (event) => {
 | 
			
		|||
    var intersects = raycaster.intersectObjects(scene.children);
 | 
			
		||||
    // 恢复其他物体的颜色 
 | 
			
		||||
    if (originalColors && originalColors.length > 0) {
 | 
			
		||||
        for (var i = 0; i < originalColors.length; i++) { 
 | 
			
		||||
            originalColors[i].object.material.color.set(originalColors[i].color); 
 | 
			
		||||
        } 
 | 
			
		||||
        for (var i = 0; i < originalColors.length; i++) {
 | 
			
		||||
            originalColors[i].object.material.color.set(originalColors[i].color);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    // 清空原始颜色数组 
 | 
			
		||||
    var originalColors = []; 
 | 
			
		||||
    var originalColors = [];
 | 
			
		||||
    // 如果有交点,改变其材质颜色并记录其他物体的颜色 
 | 
			
		||||
    if (intersects.length > 0) { 
 | 
			
		||||
        intersects[0].object.material.color.set(0xff0000); 
 | 
			
		||||
    if (intersects.length > 0) {
 | 
			
		||||
        intersects[0].object.material.color.set(0xff0000);
 | 
			
		||||
        // 设置选中物体的颜色 
 | 
			
		||||
        scene.traverse( (object) => { 
 | 
			
		||||
            if (object.isMesh && object !== intersects[0].object) { 
 | 
			
		||||
                originalColors.push({ object: object, color: object.material.color.clone() }); 
 | 
			
		||||
            } 
 | 
			
		||||
        }); 
 | 
			
		||||
        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