add(api): 添加查询最新物联网分组实时最新数据列表功能

- 在 recordIOTInstant.js 中新增 selectLastTWTempertureDataList 函数 - 该函数通过 POST 请求获取最新物联网实时数据列表
8 months ago · bbe0e7c59b
parent ec26c5d2cc
commit bbe0e7c59b
2 changed files with 207 additions and 0 deletions
--- a/src/api/ems/record/recordIOTInstant.js
+++ b/src/api/ems/record/recordIOTInstant.js
@ -51,3 +51,12 @@ export function iotInstantList(query) {
    params: query
  })
 }
+
+// 查询最新物联网实时数据列表
+export function selectLastTWTempertureDataList(query) {
+  return request({
+    url: '/ems/record/recordIOTInstant/selectLastTWTempertureDataList',
+    method: 'post',
+    params: query
+  })
+}
--- a/src/views/board/参考/隐藏.vue
+++ b/src/views/board/参考/隐藏.vue
@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+  <title>three.js css2d - label</title>
+  <link type="text/css" rel="stylesheet" href="main.css">
+  <style>
+    .label {
+
+
+      color: #FFF;
+      font-family: sans-serif;
+      padding: 2px;
+      background: transparent;
+    }
+
+    .content {
+
+
+      background: red;
+    }
+  </style>
+</head>
+
+<body>
+<script type="importmap">
+  {
+
+
+      "imports": {
+
+
+      "three": "https://unpkg.com/three@0.163.0/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.163.0/examples/jsm/"
+      }
+  }
+</script>
+<script type="module">
+
+  import * as THREE from 'three';
+
+  import {
+
+    OrbitControls } from 'three/addons/controls/OrbitControls.js';
+  import {
+
+    CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
+
+  import {
+
+    GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+  let gui;
+
+  let camera, scene, renderer, labelRenderer;
+
+  const layers = {
+
+
+    'Toggle Name': function () {
+
+
+      camera.layers.toggle(0);
+    },
+    'Toggle Mass': function () {
+
+
+      camera.layers.toggle(1);
+    },
+    'Enable All': function () {
+
+
+      camera.layers.enableAll();
+    },
+    'Disable All': function () {
+
+
+      camera.layers.disableAll();
+    }
+
+  };
+
+  init();
+
+  function init() {
+
+
+    // 设置地球半径大小
+    const EARTH_RADIUS = 2;
+
+    // 定义相机和场景
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
+    camera.position.set(10, 5, 20);
+    camera.layers.enableAll();
+
+    scene = new THREE.Scene();
+    // 添加光源和坐标轴助手
+    const dirLight = new THREE.DirectionalLight(0xffffff, 3);
+    dirLight.position.set(0, 0, 1);
+    dirLight.layers.enableAll();
+    scene.add(dirLight);
+
+    // 创建地球对象，并设置材质
+    const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16);
+    const textureLoader = new THREE.TextureLoader();
+    const earthMaterial = new THREE.MeshPhongMaterial({
+
+
+      specular: 0x333333,
+      shininess: 5,
+      map: textureLoader.load('./textures/earth_atmos_2048.jpg'),
+      specularMap: textureLoader.load('./textures/earth_specular_2048.jpg'),
+      normalMap: textureLoader.load('./textures/earth_normal_2048.jpg'),
+      normalScale: new THREE.Vector2(0.85, 0.85)
+    });
+    // 设置地球材质的贴图颜色空间为SRGB色彩空间
+    earthMaterial.map.colorSpace = THREE.SRGBColorSpace;
+    // 创建地球mesh对象
+    const earth = new THREE.Mesh(earthGeometry, earthMaterial);
+    earth.layers.enableAll();
+    scene.add(earth);
+
+
+    const earthDiv = document.createElement('div');
+    earthDiv.className = 'label';
+    earthDiv.innerHTML = `<div>地球<span style='color:red'>简介</span></div>`;
+
+    const earthLabel = new CSS2DObject(earthDiv);
+    earthLabel.position.set(1.5 * EARTH_RADIUS, 0, 0);
+    earthLabel.center.set(0, 1);
+    earth.add(earthLabel);
+    earthLabel.layers.set(0);
+
+    const earthMassDiv = document.createElement('div');
+    earthMassDiv.className = 'content';
+    earthMassDiv.innerHTML = `<div>重所周知,地球是地球!望周知!</div>`;
+
+    const earthMassLabel = new CSS2DObject(earthMassDiv);
+    earthMassLabel.position.set(1.5 * EARTH_RADIUS, 0, 0);
+    earthMassLabel.center.set(0, 0);
+    earth.add(earthMassLabel);
+    earthMassLabel.layers.set(1);
+    //
+    renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    labelRenderer = new CSS2DRenderer();
+    labelRenderer.setSize(window.innerWidth, window.innerHeight);
+    labelRenderer.domElement.style.position = 'absolute';
+    labelRenderer.domElement.style.top = '0px';
+    document.body.appendChild(labelRenderer.domElement);
+
+    const controls = new OrbitControls(camera, labelRenderer.domElement);
+    controls.minDistance = 5;
+    controls.maxDistance = 100;
+
+    window.addEventListener('resize', onWindowResize);
+    initGui();
+    animate();
+  }
+
+  function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    labelRenderer.setSize(window.innerWidth, window.innerHeight);
+  }
+
+
+  function animate() {
+
+
+    requestAnimationFrame(animate)
+    renderer.render(scene, camera);
+    labelRenderer.render(scene, camera);
+  }
+
+  function initGui() {
+
+
+    gui = new GUI();
+    gui.title('Camera Layers');
+    gui.add(layers, 'Toggle Name');
+    gui.add(layers, 'Toggle Mass');
+    gui.add(layers, 'Enable All');
+    gui.add(layers, 'Disable All');
+    gui.open();
+
+  }
+
+</script>
+</body>
+
+</html>