# 2210

**Repository Path**: china__zzm/2210

## Basic Information

- **Project Name**: 2210
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-21
- **Last Updated**: 2025-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite

## vue 生命周期中都干了些什么事

- beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到 data、computed、watch、methods 上的方法和数据。
- created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。
- beforeMount【onBeforeMount（vue3）】（挂载前）：在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完成以下的配置：编译模板，把 data 里面的数据和模板生成 html。此时还没有挂载 html 到页面上。
- mounted[onMounted(vue3)]（挂载后）：在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。
- beforeUpdate【onBeforeUpdate（vue3）】（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
- updated【onUpdated(vue3)】（更新后） ：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
- beforeDestroy【onBeforeUnmount（vue3）】（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。
- destroyed【onUnmounted（vue3）】（销毁后）：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

# vue-router 配置流程

## 1.安装 vue-router

    执行命令

```
        pnpm i vue-router
```

## 2.在 src 下面创建 router 文件夹 文件夹下 创建 index.js 文件内容 见官网 "入门" 代码如下

```
        import { createWebHashHistory, createRouter } from 'vue-router'

        import HomeView from '../view/Home/index.vue'

        const routes = [
        { path: '/', component: HomeView },
        { path: '/about', component: () => import("../view/About/index.vue") },
        ]

        const router = createRouter({
        history: createWebHashHistory(),
        routes,
        })

        export default router

```

- 注意：需要确保组件存在 比如 view 下面是否存在 home 和 about 组件 注意需要将 router 进行抛出
- 官网默认的路由模式 是 memery 我们使用的是 hash

## 3.main.js 配置

需要引入 代码如下

```

import router from './router/index.js'

app.use(router)

```

## 4.配置 app.vue 文件 使其支持页面跳转 代码如下

```

<template>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>
```

# pinia 安装和使用 官网地址 https://pinia.web3doc.top/getting-started.html

## 1.安装 pinia

```
pnpm i pinia
```

## 2.创建 store/index.js 文件 【默认的测试文件 不要也可以】 内容如下

```
// 注意引入 defineStore 官网上是没有些引入的
import { defineStore } from "pinia"
export const useIndex = defineStore('index', {
    state: () => ({
      counter: 0,
    }),
    actions: {
      increment() {
        this.counter++
      },
      randomizeCounter() {
        this.counter = Math.round(100 * Math.random())
      },
    },
  })
```

## 3.main.js 配置

```
import { createPinia } from 'pinia'
app.use(createPinia())
```

## 4.vue 页面测试使用 示例如下

```
<template>
  <div>home</div>
  <div @click="indexStore.increment()">{{ indexStore.counter }}</div>
</template>
<script setup>
import { useIndex } from "../../store/index";
const indexStore = useIndex()

</script>

```

# 配置@ 符号路径代理/别名

## 1.安装 path

```
pnpm i path
```

## 2.配置 vite。config.js 文件内容如下

```
// const path = require('path')
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      '@': path.resolve(__dirname, 'src'),
    }
  }
})

```

# Vue3 中按照 1920\*1080 分辨率计算 rem 并设置根节点字体大小

## 在 Vue3 项目中，要实现基于 1920\*1080 分辨率的 rem 适配方案，可以通过以下步骤实现：

### 方案一：通过 JavaScript 动态计算

在项目的 public/index.html 或 main.js 中添加以下代码：

```
javascript
// 按设计稿宽度 1920px 计算，1rem = 设计稿宽度 / 19.2
function setRem() {
  const baseSize = 1920 / 19.2; // 1rem = 100px (1920/19.2=100)
  const scale = document.documentElement.clientWidth / 1920;
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}

// 初始化
setRem();

// 窗口大小变化时重置 rem
window.addEventListener('resize', setRem);
```

### 方案二：使用 postcss-pxtorem 插件

首先安装 postcss-pxtorem 插件：

```
bash
npm install postcss-pxtorem -D
在项目根目录创建或修改 postcss.config.js：

javascript
export default{
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, // 1rem = 100px (1920/19.2)
      propList: ['*'],
      selectorBlackList: [],
      minPixelValue: 2
    }
  }
}
```

同样需要在入口文件添加动态计算 rem 的代码（同方案一）

### 方案三：使用 lib-flexible + postcss-pxtorem（推荐）

安装依赖：

```

npm install amfe-flexible postcss-pxtorem -D
在 main.js 中引入：

javascript
import 'amfe-flexible';
修改 postcss.config.js：

javascript
export default {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 192, // 1920/10
      propList: ['*'],
      // 忽略转换正则匹配项
      selectorBlackList: ['.norem']
    }
  }
}
```

使用说明
在 CSS 中直接按照设计稿的像素值书写即可，例如设计稿上是 20px，就写 20px，插件会自动转换为 rem
对于不想转换的样式，可以使用大写 PX 或添加特定类名排除
注意事项
此方案基于宽度适配，高度可能需要额外处理
对于非常小的屏幕（如移动端），可能需要设置最大缩放比例
在开发时，可以直接按照 1920px 设计稿的尺寸写 px 单位
以上方案可以根据项目需求选择使用，方案三是最为成熟和推荐的解决方案。

# js 的深浅拷贝

## 深拷贝 即赋值了指针 又复制了值

比如基本数据类型 字符串 数值 Boolean 。。 存在占内存
eg：
let a = 1
let b = a
a=2
console.log(b)//1
//变量分配过程 在栈内存中 设置 一个值 1 在设置一个 指针 在定义一个变量 a

## 浅拷贝(只赋值了指针 或者 只复制了 栈内存里面的东西)

复杂数据类型 的值是存在堆内存 指针和变量存栈内存
let obj = {age:20}
let obj1 = obj
obj.age=21
console.log(obj.age) //21

数据类型 es6 symbol bigint 基本数据类型
复杂 对象 数组 函数  
特殊数据类型 new Date() 时间类型 正则 blob
let obj = {age:20,arr:{name:"张三"}}
let obj1 = {...obj}
obj.age =21
obj.arr.name = "李四"
console.log(obj1)

let obj2 = {age:20,time:new Date()}
JSON.stringify
JSON.pase
当他遇到特殊的数据类型的时候不能创建值

# 大屏项目开发

## 项目详解

### 技术栈： vue3 vite element-plus echarts threejs sse axios vue-router pinia postcss

### 技术点

#### 适配解决方案

主要利用了 postcss 按照 1920\*1080 的分辨率 进行 rem 的重新计算，我们配置的是 将 px 单位重新覆盖 如果使用大写的 PX 还保留之前的像素值 小写的 px 等同于 rem 同时 最外层也利用了 vw vh 控制整个盒子的宽高，里面大量应用了 flex 布局

#### 请求

- 对 axios 进行了二次封装 主要设置了 请求拦截器和响应拦截器 ，响应拦截器中做了统一数据返回。
- SSE 因为有设备数据实时展示，所以应用了 sse 进行实时数据推送（单项推送，不支持客户端像服务端推送，只能服务端向客户端推送，如果客户端需要和服务端进行交互的话 直接通过 axios 调接口即可）

#### 虚拟列表

该项目因为有长列表的渲染，因此需要虚拟列表技术对项目进行优化，主要原理 保障 dom 渲染数量可控，不会因为数据的数量改变 dom 的数量。特点 大数据下列表展示不会产生卡顿。
代码原理：
获取显示容器高度，获取每条数据显示高度  
 容器高度/单条高度 = 容器数据显示数量
单条高度 \* 总数据条数 = 容器虚拟高度 （用于展示滚动条，计算偏移量）
监听滚动事件 计算偏移量 从总数据中截取响应的数据进行展示

#### Echarts 组件封装

echarts 的使用流程
第一步 初始化 init 第二部 setoption 第三步 放到 dom 中去 第四步 监听 resize 适配浏览器窗口变化
第五部 销毁的生命周期中 去掉 resize 的监听 以及 调用 echarts 的 clear 方法 释放内存
在这个组件中 需要 2 个参数 一个是 option 另外一个是 autopaly 通过 watch 监听 option 的数据变化 进行 图表的数据渲染，同时通过 autoplay 属性 控制是否默认开启自动切换动画 （通过 echarts 的 dispatchAction 方法 设置 列的高亮和显示提示框 动画效果 true 的话 就会开启定时器）销毁的生命周期中 也会将这个定时器进行销毁

#### Select 组件封装

##### 组件接收三个主要属性：

modelValue：用于 v-model 双向绑定
options：选项列表，格式为 [{value: '值', label: '标签'}]
placeholder：占位符文本，默认为"请选择"

##### 组件触发两个事件：

update:modelValue：更新选中值
change：选项变更时触发

##### 样式特点：

使用自定义背景图片
支持选项悬停和选中效果
下拉箭头有旋转动画
选项列表有最大高度限制，超出时可滚动

##### 实现效果：

这是一个自定义的下拉选择框组件，具有以下特点：
支持自定义背景图片
支持自定义选项列表
支持双向绑定（v-model）
具有下拉展开/收起动画效果
支持选中项高亮显示
支持自定义占位符文本

##### 核心功能：

通过 props 接收外部传入的数据（选项列表、当前值、占位符）
使用 ref 管理下拉框的开关状态
使用 computed 计算当前选中项的标签文本
通过 emit 向父组件发送值更新和选择变更事件

#### 容器类组件封装 主要利用 父子组件传值 和 默认插槽 具名插槽等技术实现

#### echarts 的 地图下钻

技术栈：
使用 Vue 3 的 Composition API（<script setup>）
使用 ECharts 和 ECharts-GL 实现 3D 地图可视化
通过自定义 API（getMap）获取地图数据
核心功能：
3D 中国地图展示
地图交互（点击下钻）
返回顶层功能
自适应窗口大小
数据流转：
初始加载时获取全国地图数据（code: 100000）
点击省份时获取对应省份的地图数据
通过 chinaRegionCodes 数组维护行政区划代码映射
交互设计：
鼠标悬停效果（高亮显示）
点击下钻功能
3D 视角控制（旋转、缩放、平移）
返回顶层按钮
展示效果
视觉呈现：
3D 立体地图效果
使用紫色系配色（#6554C0 作为基础色）
真实感渲染（shading: "realistic"）
光照和阴影效果
鼠标悬停时显示地区名称
交互体验：
地图可以自由旋转（使用鼠标左键）
支持缩放（通过鼠标滚轮）
支持平移（使用鼠标右键）
点击省份可以下钻到省级地图
右上角有返回顶层按钮
性能优化：
组件卸载时清理图表实例
窗口大小变化时自动调整图表大小
使用 nextTick 确保 DOM 更新后再初始化图表
特色功能
3D 效果：
使用 map3D 类型实现立体效果
可配置地图厚度（regionHeight）
支持真实感材质渲染
视角控制：
限制视角范围（minAlpha、maxAlpha、minBeta、maxBeta）
控制缩放范围（minDistance、maxDistance）
自定义鼠标操作方式
样式定制：
可自定义地图颜色
支持纹理贴图
可配置边框样式
支持动画效果

#### threejs 隧道模型展示 模型格式 glb

##### 实现效果

这是一个基于 Three.js 的 3D 隧道可视化组件，主要功能包括：
3D 场景展示
展示隧道模型及其相关设备（监控设备、水泵、通风口等）
支持模型缩放、位置调整
具有抗锯齿效果的 WebGL 渲染

##### 交互功能

相机位置实时显示（X、Y、Z 坐标）
支持轨道控制器（OrbitControls）进行视角调整
点击场景可获取当前相机位置信息

##### 动画效果

提供预设的相机路径动画
支持开始/停止动画控制
平滑的相机移动过渡效果

##### 性能优化

模型缓存机制，避免重复加载
加载进度显示
响应式窗口大小调整

- 创建 Three.js 场景、相机、渲染器
- 设置环境光和平行光
- 配置轨道控制器
- 初始化事件监听
- 使用 GLTFLoader 加载 3D 模型
- 实现模型缓存系统（modelCache）
- 支持从缓存或网络加载模型
- 处理加载进度显示
- 使用 TWEEN.js 实现平滑动画
- 预设相机路径点数组
- 通过 setInterval 控制相机移动
- 支持动画开始/停止控制
- 使用 modelCache 缓存已加载的模型
- 实现模型复用机制
- 优化渲染性能（抗锯齿、设备像素比等）

- onMounted：初始化场景、加载模型、启动动画
- onBeforeUnmount：清理资源、移除事件监听
- 响应式处理窗口大小变化

##### 特色功能

- 多模型加载
  支持加载多个相关模型（隧道、监控设备、水泵、通风口）
  每个模型可以独立设置位置和缩放
- 智能缓存
  使用 modelCache 工具类管理模型缓存
  避免重复下载，提升加载速度
- 交互体验
  实时显示相机位置信息
  提供直观的开始/停止控制
  加载进度可视化
- 可配置性
  支持通过 props 配置模型路径、缩放比例、位置等
  可自定义背景颜色
  灵活的相机路径配置

#### threejs 设备模型展示 格式 模型文件.obj 纹理文件 .mtl

##### 1. 组件整体架构

这是一个基于 Vue 3 + Three.js 的 3D 模型展示组件，主要用于展示机械臂模型，具有以下核心功能：

###### 模型展示

支持两种模型状态：arm.obj/arm.mtl 和 arm_op.obj/arm_op.mtl
使用 OBJ + MTL 格式的 3D 模型
支持模型的旋转、缩放等交互操作

###### 交互功能

模型切换功能
润滑动画效果
模型部件提示
轨道控制器（OrbitControls）实现视角控制

##### 2. 技术实现细节

- Three.js：3D 渲染核心库
- MTLLoader：材质加载器
- OBJLoader：模型加载器
- OrbitControls：视角控制器
- FontLoader：字体加载器（用于 3D 文字）

- 创建透视相机（PerspectiveCamera）
- 设置场景（Scene）
- 配置光照（环境光 + 点光源）
- 初始化渲染器（WebGLRenderer）
- 设置轨道控制器（OrbitControls）

- 支持两种模型状态：arm.obj/arm.mtl 和 arm_op.obj/arm_op.mtl
- 模型切换时进行状态检查（确保润滑状态已结束）
- 动态更新模型材质和纹理

- 使用定时器实现纹理切换动画
- 支持三种不同类型的动画效果：

  - 分配器动画（fpq）：4 种状态循环
  - 电磁阀动画（dc）：3 种状态循环
  - 管路动画（line）：5 种状态循环

- 实现鼠标悬停提示
- 使用射线检测（Raycaster）实现精确的交互检测
- 动态显示提示文本和位置

- 组件卸载时清理所有资源
- 使用 dispose() 方法释放 Three.js 资源
- 清理定时器和动画帧

- 使用 requestAnimationFrame 实现动画循环
- 设置合适的相机参数和渲染器配置
- 优化模型加载和切换逻辑

- 底部操作菜单设计
- 状态切换按钮
- 润滑控制按钮
- 悬停提示效果

- 模型状态切换动画
- 润滑效果动画
- 交互提示显示

###### 6. 使用效果

- 模型展示
  支持模型的自由旋转、缩放
  清晰的模型细节展示
  流畅的模型切换效果

* 润滑效果
  生动的动画效果
  清晰的状态指示
  流畅的切换过程
* 交互体验
  直观的操作界面
  即时的状态反馈
  清晰的提示信息