优化数据大屏页面

pengwei

2025-03-20 e0a31f7013898540948f4d4d86ade1a5414b44d4

优化数据大屏页面

 ÏîÄ¿´úÂë/client/dist.7z

Binary files differ

 ÏîÄ¿´úÂë/client/package-lock.json

@@ -17,6 +17,8 @@
        "element-plus": "^2.9.6",
        "pinia": "^2.3.0",
        "scss": "^0.2.4",
        "three": "^0.174.0",
        "three-orbit-controls": "^82.1.0",
        "vue": "^3.5.13",
        "vue-3d-model": "2.0.0-alpha.4",
        "vue-chartjs": "^5.3.2",
@@ -8145,9 +8147,15 @@
      }
    },
    "node_modules/three": {
      "version": "0.141.0",
      "resolved": "https://registry.npmmirror.com/three/-/three-0.141.0.tgz",
      "integrity": "sha512-JaSDAPWuk4RTzG5BYRQm8YZbERUxTfTDVouWgHMisS2to4E5fotMS9F2zPFNOIJyEFTTQDDKPpsgZVThKU3pXA==",
      "version": "0.174.0",
      "resolved": "https://registry.npmmirror.com/three/-/three-0.174.0.tgz",
      "integrity": "sha512-p+WG3W6Ov74alh3geCMkGK9NWuT62ee21cV3jEnun201zodVF4tCE5aZa2U122/mkLRmhJJUQmLLW1BH00uQJQ==",
      "license": "MIT"
    },
    "node_modules/three-orbit-controls": {
      "version": "82.1.0",
      "resolved": "https://registry.npmmirror.com/three-orbit-controls/-/three-orbit-controls-82.1.0.tgz",
      "integrity": "sha512-hIWxGoHqIbeq0S2lA14m9VRzo7SamKKVJ9mKMT/rdh0Qa3nV5Umvhlx4zsHl0Y6jLKVZhjatJfeD/K08Tr/g4A==",
      "license": "MIT"
    },
    "node_modules/through": {
@@ -8824,6 +8832,12 @@
        "vue": ">=3.0.0"
      }
    },
    "node_modules/vue-3d-model/node_modules/three": {
      "version": "0.141.0",
      "resolved": "https://registry.npmmirror.com/three/-/three-0.141.0.tgz",
      "integrity": "sha512-JaSDAPWuk4RTzG5BYRQm8YZbERUxTfTDVouWgHMisS2to4E5fotMS9F2zPFNOIJyEFTTQDDKPpsgZVThKU3pXA==",
      "license": "MIT"
    },
    "node_modules/vue-chartjs": {
      "version": "5.3.2",
      "resolved": "https://registry.npmmirror.com/vue-chartjs/-/vue-chartjs-5.3.2.tgz",

 ÏîÄ¿´úÂë/client/package.json

@@ -18,6 +18,8 @@
    "element-plus": "^2.9.6",
    "pinia": "^2.3.0",
    "scss": "^0.2.4",
    "three": "^0.174.0",
    "three-orbit-controls": "^82.1.0",
    "vue": "^3.5.13",
    "vue-3d-model": "2.0.0-alpha.4",
    "vue-chartjs": "^5.3.2",

 ÏîÄ¿´úÂë/client/src/api/newapi/Thecurrentjob.js

@@ -26,3 +26,6 @@

//获取力矩值
export const GetTorque = (data) => http.post(`/api/TorqueOp/Checkvalue`, data)

//添加扭力值
export const AddTorque = (data) => http.post(`/api/TorqueOp/AddData`, data)

 ÏîÄ¿´úÂë/client/src/utils/index.js

@@ -1,7 +1,7 @@
import { dayjs } from "element-plus";
// import XLSX from "xlsx"; //导入xlsx

export const baseUrl = "http://192.168.0.80:5000/"
export const baseUrl = "http://115.159.85.185:9098/"
// http://115.159.85.185:9091/
// http://192.168.0.80:5000/
// 115.159.85.185:9091

 ÏîÄ¿´úÂë/client/src/views/tts/CraftCenter/Craftcenter.vue

@@ -446,13 +446,13 @@
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><el-form-item prop="sort">
            ><el-form-item prop="setnum">
              <template #label>
                <span style="font-size: 0.88rem; color: black">排序</span>
              </template>
              <el-input
                size="small"
                v-model="form.setpNum"
                v-model.number="form.setnum"
                placeholder="请输入"
                style="height: 2rem"
              /> </el-form-item
@@ -461,9 +461,6 @@
            ><el-form-item prop="tools">
              <template #label>
                <div style="display: flex; align-items: center">
                  <span style="display: flex; color: red; margin-right: 0.25rem"
                    >*</span
                  >
                  <span style="font-size: 0.88rem; color: black">工具</span>
                </div>
              </template>
@@ -484,6 +481,20 @@
                  :label="item.toolName"
                  :value="item"
                /> </el-select></el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8"
            ><el-form-item prop="nodal">
              <template #label>
                <span style="font-size: 0.88rem; color: black">序号</span>
              </template>
              <el-input
                size="small"
                v-model.number="form.nodal"
                placeholder="请输入"
                style="height: 2rem"
              /> </el-form-item
          ></el-col>
        </el-row>
        <!-- <el-row>
@@ -560,9 +571,6 @@
          <el-form-item prop="checkList">
            <template #label>
              <div style="display: flex; align-items: center">
                <span style="display: flex; color: red; margin-right: 0.25rem"
                  >*</span
                >
                <span style="font-size: 0.88rem; color: black">选择套筒</span>
              </div>
            </template>
@@ -770,24 +778,24 @@
  craftstype: [
    { required: true, message: "请选择工艺类型", trigger: "change" },
  ],
  nodal: [{ required: true, message: "请选择节点", trigger: "change" }],
  craftsStep: [{ required: true, message: "请输入工艺步骤", trigger: "blur" }],
  craftContent: [
    { required: true, message: "请输入工艺内容", trigger: "blur" },
  ],
  sleeveNum: [{ required: true, message: "请输入套筒数量", trigger: "blur" }],
  nodal: [{ required: true, message: "请输入序号", trigger: "blur" }],
  setnum: [{ required: true, message: "请输入排序号", trigger: "blur" }],
});

// isinvolved: "", //是否涉及
//新增工艺/编辑工艺表单数据
const form = ref({
  craftstype: "", //工艺类型（组）
  nodal: 0, //节点
  nodal: null, //节点
  craftsStep: "", //工艺步骤
  craftContent: "", //工艺内容
  sleeveNum: "", //套筒数量
  tools: "", //工具
  isinvolved: "", //是否涉及
  setpNum: "",
  setnum: null,
  torqueOne: 0,
  torqueOneQuantity: 0,
  articleOne: "",
@@ -802,6 +810,7 @@
    : "",
  createDate: formatTime(new Date()),
});

const props = { multiple: true };
const userName = ref("");

@@ -914,25 +923,33 @@
const addprocess = async (formEl) => {
  userName.value = JSON.parse(localStorage.getItem("user")).userName;
  let string = "";
  if (tools.value.length == 0) {
    ElMessage({
      message: "请选择工具",
      type: "warning",
    });
    return;
  }
  // if (tools.value.length == 0) {
  //   ElMessage({
  //     message: "请选择工具",
  //     type: "warning",
  //   });
  //   return;
  // }
  string = tools.value
    .map((item) => {
      return item.toolName;
    })
    .join(",");
  if (checkList.value.length == 0) {
  // if (checkList.value.length == 0) {
  //   ElMessage({
  //     message: "请选择套筒",
  //     type: "warning",
  //   });
  //   return;
  // }
  if (form.value.nodal == 0) {
    ElMessage({
      message: "请选择套筒",
      message: "序号最小为1",
      type: "warning",
    });
    return;
  }

  form.value.articleOneid = checkList.value[0].id;
  form.value.articleOne = checkList.value[0].num;
  form.value.articleTowid = checkList.value[1].id;
@@ -941,7 +958,7 @@
  form.value.tools = string;
  form.value.craftstype = title.value;
  form.value.torqueOneQuantity = tools.value.length;
  form.value.id = form.value.craftID ? form.value.craftID : "";
  form.value.id = form.value.craftID ? form.value.craftID : 0;
  console.log(form.value);

  if (!formEl) return;
@@ -997,7 +1014,7 @@
//分页请求参数
const pageQuery = ref({
  page: 1, //当前页面
  rows: 10, //每页显示条数
  rows: 100, //每页显示条数
  order: "desc", //排序方式
  sort: "", //排序字段
  wheres: "", //条件查询

 ÏîÄ¿´úÂë/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 @@
  });
};

onMounted(() => {
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;