lc_tunnel/web/src/view/admin/dataDashboard/dataDashboard.vue

<template>
  <div class="screen">
    <div style="height: 10px"></div>
    <div class="titleImage">
      <el-image :src="titleUrl" />
      <span class="Heading">龙弛智慧隧道系统</span>
    </div>
    <div class="coreBox">
      <div ref="container" class="three-container"></div>
      <div class="formBox">
        <div class="panel">
          <span class="panel-title">亮度调整</span>
          <el-slider
              v-model="transparency"
              :step="50"
              show-stops
              :show-tooltip="false"
              class="panel-slider"
              @change="changeTransparency"
          />
          <div class="brightness" style="margin: 90px 0 0 25px;">
            <span>低</span>
            <span>中</span>
            <span>高</span>
          </div>
          <el-slider
              v-model="transparencyTwo"
              :step="50"
              show-stops
              :show-tooltip="false"
              class="panel-slider2"
              @change="changeTransparencyTwo"
          />
          <div class="brightness" style="margin: 50px 0 0 25px;">
            <span>低</span>
            <span>中</span>
            <span>高</span>
          </div>
          <div class="panel-bottom"></div>
        </div>
      </div>
      <div class="formBox_two">
        <div class="panel" style="height: 100px">
          <span class="panel-title">轴流式风机</span>
          <span class="panelSwitchTitle">风机开关</span>
          <el-switch class="panelSwitch" size="large"></el-switch>
          <div class="panel-bottom"></div>
        </div>
      </div>
      <div class="vehicleBox">
        <div class="panel" style="height: 190px">
          <span class="panel-title">车辆检测器</span>
          <el-form style="position: absolute;left: 40px;top: 50px">
            <el-form-item label="交通量" label-width="110" label-position="left">
              <el-row style="width: 120px">
                <el-col :span="15" class="vehicleData">
                  <span>123</span>
                </el-col>
                <el-col :span="9" class="vehicleUnit">
                  <span>辆</span>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="平均车速" label-width="110" label-position="left">
              <el-row style="width: 120px">
                <el-col :span="15" class="vehicleData">
                  <span>66</span>
                </el-col>
                <el-col :span="9" class="vehicleUnit">
                  <span>km/h</span>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="车道占有量" label-width="110" label-position="left">
              <el-row style="width: 120px">
                <el-col :span="15" class="vehicleData">
                  <span>12</span>
                </el-col>
                <el-col :span="9" class="vehicleUnit">
                  <span>%</span>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <div class="panel-bottom"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { useScreenStore } from '@/pinia/modules/screen'
// 单灯控制
import { updateTunnelLamp } from "@/api/tunnel";
// 四路控制
import { deviceSwitch } from "@/api/device";
// 标题图片
import titleUrl from '@/assets/title_bg.png'
import {ElMessage} from "element-plus";

const useScreen = useScreenStore()
// 获取容器引用
const container = ref(null);

// 定义 Three.js 相关变量
let scene, camera, renderer, controls;

// 创建场景
scene = new THREE.Scene();

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 1);

// 初始化 Three.js 场景
const initThree = () => {
  scene.background = null;
  // textureLoader.load('@/assets/OIP-C.jpg', (texture) => {
  //   // 将图片设置为场景的背景
  //   scene.background = texture;
  // });
  // 创建相机
  camera = new THREE.PerspectiveCamera(
      75,
      container.value.clientWidth / container.value.clientHeight,
      0.1,
      1000
  );
  camera.position.set(30, 20, 30);

  // 创建渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
  renderer.setClearAlpha(0);
  // renderer.setClearColor(222842);
  container.value.appendChild(renderer.domElement);

  // 添加轨道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; // 启用阻尼效果
  controls.dampingFactor = 0.05;

  scene.add(ambientLight);

  // 添加平行光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(5, 5, 5).normalize();
  scene.add(directionalLight);
};

// 存储模型数据
let materialOne = reactive({})
let materialTwo = reactive({})

const relayList = reactive([])


// 加载 GLB 模型
const loadModel = () => {
  const loader = new GLTFLoader();
  loader.load('../../public/隧道1.glb', function (gltf){
      let object = gltf.scene
      console.log(object.children)
      object.children.forEach(item => {
        if (item.name === '柱体') {
          materialOne = item.children[3].material
        } else if(item.name === '柱体001') {
          materialTwo = item.children[3].material
        }
      })
      //gltf.scene获取gltf文件包含的模型数据
      scene.add(gltf.scene)
    }, function (xhr) {
        // 加载进度回调
        // console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      }, function (error) {
        // 加载错误回调
        // console.error('An error happened', error);
      }
  )
};

// 动画循环
const animate = () => {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制器
  renderer.render(scene, camera);
};

// 亮度调整
const transparency = ref(0)
const changeTransparency = (e) => {
  let option = {
    0: [0.8, 33, 1],
    50: [0.5, 66, 2],
    100: [0.2, 100, 3]
  }
  materialOne.opacity = option[e][0]
  if (lampData.switchType === '单灯控制器') {
    updateTunnelLamp({
      id: lampData.ID,
      tunnelSn: lampData.tunnelSn,
      lampValue1: option[e][1]
    }).then(res => {
      if (res.code === 0) {
        ElMessage.success('已发送')
      }
    })
  } else {
    let relay = relayList[0].deviceRelays
    for (let i = 0; i < relay.length; i++) {
      relay[i].state = i < option[e][2];
    }
    for (let j = 0; j < relay.length; j++) {
      deviceSwitch({
        tunnelSn: lampData.tunnelSn,
        radarId: relayList[0].radarId,
        relayId: relay[j].relayId,
        state: relay[j].state
      }).then(res => {
        if (res.code === 0) {
          console.log('发送成功')
        }
      })
    }
  }
}

const transparencyTwo = ref(0)
const changeTransparencyTwo = (e) => {
  let option = {
    0: [0.8, 33, 1],
    50: [0.5, 66, 2],
    100: [0.2, 100, 3]
  }
  materialTwo.opacity = option[e][0]
  if (lampData.switchType === '单灯控制器') {
    updateTunnelLamp({
      id: lampData.ID,
      tunnelSn: lampData.tunnelSn,
      lampValue2: option[e][1]
    }).then(res => {
      if (res.code === 0) {
        ElMessage.success('已发送')
      }
    })
  } else {
    let relay = relayList[1].deviceRelays
    for (let i = 0; i < relay.length; i++) {
      relay[i].state = i < option[e][2];
    }
    for (let j = 0; j < relay.length; j++) {
      deviceSwitch({
        tunnelSn: lampData.tunnelSn,
        radarId: relayList[1].radarId,
        relayId: relay[j].relayId,
        state: relay[j].state
      }).then(res => {
        if (res.code === 0) {
          console.log('发送成功');
        }
      })
    }
  }
}

// 灯光数据
const lampData = reactive({})

const judgeLamp = () => {
  relayList.length = 0
  if (lampData.switchType === '单灯控制器') {
    let val1 = lampData.lampValue1
    let val2 = lampData.lampValue2
    let judge = {
      33: [0.8,0],
      66: [0.5,50],
      100: [0.2,100],
    }
    transparency.value = judge[val1][1]
    materialOne.opacity = judge[val1][0]
    transparencyTwo.value = judge[val1][1]
    materialTwo.opacity = judge[val2][0]
  } else if(lampData.switchType === '四路控制器') {
    lampData.devices.forEach(item => {
      if (item.genre === 6) {
        relayList.push(item)
      }
    })
    let deviceLamp1 = relayList[0].deviceRelays
    let deviceLamp2 = relayList[1].deviceRelays
      let count1 = 0
      let count2 = 0
      deviceLamp1.forEach(item => {
        item.state ? count1++ : count1
      })
      deviceLamp2.forEach(item => {
        item.state ? count2++ : count2
      })
      let judgeWay = {
        1: [0.8,0],
        2: [0.5,50],
        3: [0.2,100],
        4: [0.2,100]
      }
    transparency.value = judgeWay[count1][1]
    materialOne.opacity = judgeWay[count1][0]
    transparencyTwo.value = judgeWay[count2][1]
    materialTwo.opacity = judgeWay[count2][0]
  }

}

// 组件挂载时初始化
onMounted(() => {
  Object.assign(lampData, useScreen.controllerData)
  initThree();
  loadModel();
  animate();
  setTimeout(function () {
    judgeLamp()
  },500)
});

// 组件卸载时清理资源
onUnmounted(() => {
  if (renderer) {
    renderer.dispose();
  }
});
</script>

<style scoped lang="less">
.horn {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
}
.screen{
  width: 100%;
  height: 970px;
  //background-image: url("@/assets/back.jpeg");
  background-size:100% 100%;
  background: #1d2b56 url("@/assets/line.png");

  .titleImage {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .Heading{
      position: absolute;
      left: 42%;
      top: 25%;
      text-align: center;
      font-size: 1.7vw;
      font-weight: bold;
      color: #0EFCFF;
    }
  }
  .coreBox{
    width: 100%;
    height: 900px;
    margin-top: 20px;
    position: relative;
    .three-container {
      z-index: 1;
      position: absolute;
      height: 800px;
      width: 100%;
    }
    .formBox{
      position: absolute;
      right: 20px;
      z-index:2;
    }
    .formBox_two{
      position: absolute;
      right: 20px;
      top: 250px;
      z-index:2;
    }
    .vehicleBox{
      position: absolute;
      right: 20px;
      top: 380px;
      z-index:2;
      .vehicleData{
        display: flex;
        justify-content: end;
        align-items: center;
        span {
          font-size: 18px;
          font-weight: bold;
          color: #0EFCFF;
        }
      }
      .vehicleUnit{
        display: flex;
        justify-content: end;
        align-items: center;
        span {
          color: #909399;
        }
      }
    }
    .panel{
      position: relative;
      width: 300px;
      height: 200px;
      border: 1px solid rgba(25,186,139,0.17);
      padding: 0 0.1875rem 0.5rem;
      margin-bottom: 0.1875rem;
      background: url(@/assets/line.png) rgba(255,255,255,0.04);
      &::before{
        .horn;
        top: 0;
        left: 0;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
      }
      &::after{
        .horn;
        top: 0;
        right: 0;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
      }
      .panel-bottom{
        &::before{
          .horn;
          bottom: 0;
          left: 0;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
        }
        &::after{
          .horn;
          bottom: 0;
          right: 0;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
        }
      }
      .panel-title{
        position: absolute;
        left: 110px;
        top: 10px;
        font-size: 20px;
        font-weight: bold;
        color: #0EFCFF;
      }
      .panelSwitchTitle{
        color: #ffffff;
        font-size: 16px;
        position: absolute;
        bottom: 30px;
        font-weight: bold;
        left:25px;
      }
      .panelSwitch{
        position: absolute;
        right: 25px;
        bottom: 20px;
      }
      .panel-slider{
        width: 250px;
        position: absolute;
        top: 60px;
        left: 25px;
      }
      .panel-slider2{
        width: 250px;
        position: absolute;
        top: 120px;
        left: 25px;
      }
      .brightness{
        width: 250px;
        display: flex;
        justify-content: space-between;
        color: #909399;
        font-size: 14px;
      }
    }
  }
}

/* ::v-deep是vue3提供的深度选择器，.el-form-item__label是element-plus官方定义的类 */
/deep/ .el-form-item__label{
  color: white;
  font-size: 16px;
}

.el-slider__runway{ // 滑块的进度条颜色
  background-color: #000000;
}
</style>