优化数据大屏页面

pengwei

2025-03-20 e0a31f7013898540948f4d4d86ade1a5414b44d4

 ÏîÄ¿´úÂë/client/src/views/tts/TheCurrentJob/Startjob.vue

@@ -1,7 +1,7 @@
<template>
  <div class="Startjob">
    <div class="rect">
      <div class="rect-top" style="position: relative">
    <div class="rect" style="position: relative">
      <div class="rect-top">
        <img src="@/assets/TheCurrentJob/left.png" alt="" />
        <img
          style="margin-left: -1.5rem; margin-right: 4rem"
@@ -111,6 +111,7 @@
                  >任务详情：</span
                >
                <span
                  ref="spanHide1"
                  @click="showDetail(!contentShow1)"
                  style="color: #1ac2f7; font-size: 0.88rem; cursor: pointer"
                  >查看</span
@@ -192,6 +193,7 @@
              >
                <template #default="scope">
                  <span
                    ref="spanHide"
                    @click="showDetail1(!contentShow)"
                    style="
                      color: #1ac2f7;
@@ -277,27 +279,27 @@
            </div>
          </div>
        </div>
        <div class="rect-item3">
          <div style="overflow: hidden">
        <div class="rect-item3" style="position: relative">
          <div style="overflow: hidden; padding-bottom: 1rem">
            <img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
            <span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
              >力矩值显示</span
            >

            <el-scrollbar>
            <el-scrollbar ref="scrollbarRef" height="130rpx">
              <div
                ref="innerRef"
                style="
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                  padding-left: 1.5rem;
                  padding-top: 0.5rem;
                  padding-bottom: 1.5rem;
                  padding-bottom: 1rem;
                  box-sizing: border-box;
                "
              >
                <span
                  style="color: #ffffff; font-size: 1rem; margin: 0.5rem 0"
                  style="color: #ffffff; font-size: 1rem; margin: 0.4rem 0"
                  v-for="(item, index) in Torque"
                  :key="item.id"
                  >{{
@@ -305,7 +307,44 @@
                  }}</span
                >
              </div>
              <el-input
                v-if="isTorque"
                v-model.number="torqueFrom.torqueSize"
                style="font-size: 0.75rem; height: 2rem"
                placeholder="请输入扭力值"
              />
              <!-- @blur="addTorque" -->
            </el-scrollbar>
          </div>
          <div
            style="
              position: absolute;
              bottom: -2.3rem;
              left: -0.1rem;
              width: 100%;
            "
          >
            <el-button
              v-if="!isTorque"
              type="primary"
              style="font-size: 0.75rem; width: 100%; height: 2rem"
              @click="showTorque"
              >手动模拟扭力值</el-button
            >
            <div v-else style="display: flex; justify-content: space-between">
              <el-button
                type="primary"
                style="font-size: 0.75rem; width: 100%; height: 2rem"
                @click="addTorque"
                >确认</el-button
              >
              <el-button
                type="primary"
                style="font-size: 0.75rem; width: 100%; height: 2rem"
                @click="isTorque = false"
                >取消</el-button
              >
            </div>
          </div>
        </div>
      </div>
@@ -316,13 +355,14 @@
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 999;
          position: absolute;
          top: 42%;
          left: 15%;
          top: 33%;
          left: 50%;
          transform: translateX(-50%);
        "
      >
        <model-gltf
        <div ref="container" style="width: 100%; height: 100%"></div>
        <!-- <model-gltf
          :width="400"
          :height="400"
          :backgroundAlpha="0"
@@ -331,14 +371,17 @@
          :controlsOptions="{
            enableZoom,
          }"
        />
        /> -->
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30rem;
          position: absolute;
          bottom: 5%;
          left: 50%;
          transform: translateX(-50%);
        "
      >
        <el-button
@@ -409,7 +452,7 @@
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, nextTick } from "vue";
import {
  GetScreenData,
  GetPre,
@@ -417,11 +460,20 @@
  Complete,
  GetTorque,
  ChangeStatus,
  AddTorque, //添加扭力值接口
} from "@/api/newapi/Thecurrentjob";
import { GetPageData } from "@/api/newapi/NjTask";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ModelCollada, ModelGltf } from "vue-3d-model";
import { formatTime } from "@/utils/index.js";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //gltf

const container = ref(null);

let scene, camera, renderer, controls;

const router = useRouter();
const gridData = ref([]);
@@ -451,7 +503,26 @@
  takeid: "",
  setnum: 0,
});

//扭力值
const torqueFrom = ref({
  creater: JSON.parse(localStorage.getItem("user")).userName, //当前登陆人
  createDate: formatTime(new Date()), //当前时间
  modifier: JSON.parse(localStorage.getItem("user")).userName,
  modifyDate: formatTime(new Date()),
  id: 0,
  deviceCode: "", //设备编号
  takeId: "", //任务id
  groupOp: "", //班组
  processSte: 0, //当前步骤
  torqueSize: null, //输入的扭力值
});

const isTorque = ref(false);
const flag = ref(false);

const innerRef = ref();
const scrollbarRef = ref();
//上一步
const Previous = (val) => {
  from.value.group = info.value.grouptype;
@@ -513,7 +584,6 @@
};
//查看数据
const checko = () => {
  console.log(info.value);
  GetPageData({
    page: 1,
    rows: 10,
@@ -532,7 +602,6 @@
      },
    ],
  }).then((res) => {
    console.log(res);
    taskData.value = res.rows;
  });
};
@@ -542,6 +611,7 @@
  setnum: "",
});
const initData = () => {
  console.log(obj.value);
  GetScreenData({
    group: info.value.grouptype,
    takeid: info.value.njtakeid,
@@ -566,8 +636,165 @@
  });
};

const showModel = () => {
  scene = new THREE.Scene();
  console.log("model", window.innerWidth, window.innerHeight);

  // åˆ›å»ºç›¸æœº (视角，宽高比，近裁剪面，远裁剪面)
  camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);

  // åˆ›å»ºæ¸²æŸ“器
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
  });
  renderer.setSize(400, 400); // è®¾ç½®æ¸²æŸ“器的大小
  container.value.appendChild(renderer.domElement);
  scene.background = null;
  // åŠ è½½GLTF模型
  const loader = new GLTFLoader();
  loader.load(
    "ThreeModel/test.gltf",
    (gltf) => {
      const model = gltf.scene;

      // è®¡ç®—模型的边界框并获取中心点
      const box = new THREE.Box3().setFromObject(model);
      const center = box.getCenter(new THREE.Vector3());

      // åˆ›å»ºä¸€ä¸ªç©ºå¯¹è±¡ä½œä¸ºçˆ¶èŠ‚点，将坐标轴和模型添加到这个父节点
      const parent = new THREE.Object3D();
      scene.add(parent);

      // å°†æ¨¡åž‹çš„位置设置为模型的边界框的中心，确保它居中
      model.position.sub(center); // è®©æ¨¡åž‹çš„中心与父节点对齐

      // å°†åæ ‡è½´åŠ©æ‰‹æ·»åŠ åˆ°çˆ¶èŠ‚点
      // const axesHelper = new THREE.AxesHelper(100); // è½´çš„长度为100  x,y,z的颜色分别为（红色，绿色，蓝色）
      // parent.add(axesHelper); // å°†åæ ‡è½´æ·»åŠ åˆ°çˆ¶èŠ‚点

      // å°†æ¨¡åž‹æ·»åŠ åˆ°çˆ¶èŠ‚点
      parent.add(model);

      // ç¡®ä¿æ¨¡åž‹çš„大小适当，可以调整模型的大小
      model.scale.set(1, 1, 1); // å¦‚果需要的话可以缩放模型
    },
    undefined,
    (error) => {
      console.error("模型加载失败", error);
    }
  );

  const metalMaterial = new THREE.MeshStandardMaterial({
    color: 0xaaaaaa,
    metalness: 1,
    roughness: 0.2,
  });

  const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
  const metalSphere = new THREE.Mesh(sphereGeometry, metalMaterial);
  scene.add(metalSphere);

  // åˆ›å»ºç¯å…‰
  const light = new THREE.AmbientLight(0xffffff); // çŽ¯å¢ƒå…‰æ˜¯ä¸€ç§å…¨å±€æ€§çš„光源，均匀地照亮整个场景，并且不会有阴影效果
  scene.add(light);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 3); //这段代码创建了一个白色、强度为 1 çš„平行光源
  directionalLight.position.set(300, 300, 300).normalize(); //并将其位置设置在 (300, 300, 300)。然后，通过 normalize() æ–¹æ³•ï¼Œç¡®ä¿å¹³è¡Œå…‰æºçš„光线以一个标准的方向照射
  scene.add(directionalLight);

  // è®¾ç½®ç›¸æœºåˆå§‹ä½ç½®ï¼ˆx,y,z）
  camera.position.set(100, 100, 50); // è®¾ç½®ç›¸æœºä½ç½®ï¼Œç¡®ä¿å¯ä»¥çœ‹åˆ°æ¨¡åž‹

  // åˆ›å»º OrbitControls å®žä¾‹
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableZoom = false;
  controls.enablePan = false;
  controls.enableDamping = true; // å¯ç”¨é˜»å°¼æ•ˆæžœ
  controls.dampingFactor = 0.25; // é˜»å°¼ç³»æ•°
  controls.screenSpacePanning = false; // ç¦ç”¨å±å¹•ç©ºé—´å¹³ç§»
  controls.maxPolarAngle = Math.PI / 2; // é™åˆ¶ç›¸æœºåž‚直旋转的角度，防止翻转
  controls.target.set(0, 0, 0); // ç¡®ä¿ç›¸æœºå§‹ç»ˆå›´ç»•åœºæ™¯ä¸­å¿ƒï¼ˆæ¨¡åž‹ä½ç½®ï¼‰
  controls.minDistance = 2; // æœ€å°è·ç¦»ï¼Œé˜²æ­¢ç¼©å¾—太近
  controls.maxDistance = 500; // æœ€å¤§è·ç¦»ï¼Œé˜²æ­¢ç¼©å¾—太远

  // æ¸²æŸ“循环
  function animate() {
    requestAnimationFrame(animate);

    // æ›´æ–°æŽ§åˆ¶å™¨
    controls.update(); // åªæœ‰åœ¨å¯ç”¨é˜»å°¼çš„时候需要调用此函数

    // æ¸²æŸ“场景
    renderer.render(scene, camera);
  }

  animate();

  // å“åº”窗口大小变化;
  window.addEventListener("resize", onWindowResize, false);

  function onWindowResize() {
    console.log(window.innerWidth, window.innerHeight);

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
  }
};
const spanHide = ref();
const spanHide1 = ref();
const handleClickOutside = () => {
  if (spanHide.value && !spanHide.value.contains(event.target)) {
    contentShow.value = false;
  }
  if (spanHide1.value && !spanHide1.value.contains(event.target)) {
    contentShow1.value = false;
  }
};
const showTorque = () => {
  isTorque.value = true;
  nextTick(() => {
    if (innerRef.value.clientHeight > 150) {
      scrollbarRef.value.setScrollTop(innerRef.value.clientHeight);
    }
  });
};
//添加扭力值
const addTorque = () => {
  torqueFrom.value.processSte = Torque.value[0].processSte;
  torqueFrom.value.takeId = Torque.value[0].takeId;
  torqueFrom.value.groupOp = Torque.value[0].groupOp;
  if (
    torqueFrom.value.torqueSize == null ||
    torqueFrom.value.torqueSize == "" ||
    torqueFrom.value.torqueSize == 0
  ) {
    ElMessage({
      message: "请输入力矩值",
      type: "warning",
    });
    return;
  }

  AddTorque(torqueFrom.value)
    .then((res) => {
      console.log("添加成功", res);
      ElMessage({
        message: "添加成功",
        type: "success",
      });
      isTorque.value = false;
      initData();
    })
    .catch((error) => {
      console.error("添加失败", error);
    });
};
onMounted(() => {
  document.addEventListener("click", handleClickOutside);
  initData();
  showModel();
});
</script>
<style lang="scss" scoped>
@@ -625,7 +852,7 @@
    .rect-center {
      display: flex;
      justify-content: space-between;
      width: 170vh;
      width: 80%;
      margin: 0 auto;
      padding: 0.8rem 2.15rem;
      box-sizing: border-box;