大屏项目也不难

项目环境搭建

使用create-vue初始化项目

npm init vue@latest

准备utils模块

业务背景：大屏项目属于后台项目的一个子项目，用户的token是共享的

后台项目 - token - cookie

大屏项目要以同样的方式把token获取到，然后拼接到axios的请求头中

1. 封装cookies存取模块

npm i js-cookie

utils/cookie.js

import Cookies from 'js-cookie'const KEY = 'token_key'export function getCookie () {return Cookies.get(KEY)
}export function setCookie (value) {Cookies.set(KEY, value)
}export function removeCookie () {Cookies.remove(KEY)
}

2. 封装request请求模块

npm i axios

utils/request.js

import axios from 'axios'
import { getCookie } from './cookie'
const service = axios.create({baseURL: 'https://api-hmzs.itheima.net/v1',timeout: 5000 // request timeout
})// 请求拦截器
service.interceptors.request.use(config => {const token = getCookie()if (token) {config.headers.Authorization = token}return config},error => {return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {return response.data},error => {return Promise.reject(error)}
)export default service

路由搭建

1- 创建路由组件

<script setup></script><template><div>我是大屏显示组件</div>
</template>

2- 绑定路由

// createRouter: 创建路由实例对象
// createWebHistory: 创建history模式的路由（hash / history）import { createRouter, createWebHistory } from 'vue-router'// 导入路由级别的组件
import HomeView from '../views/HomeView.vue'
import BigScreenView from '../views/BigScreenView.vue'const router = createRouter({// 类似于mode:history 指定路由为history模式history: createWebHistory(import.meta.env.BASE_URL),// 配置路由path和component对应关系routes: [{path: '/',redirect: '/big-screen',name: 'home',component: HomeView,},{path: '/big-screen',name: 'big-screen',component: BigScreenView}]
})export default router

初始化样式

1.备初始化文件

styles/common.scss

html,
body,
#app {height: 100vh;overflow: hidden;
}* {margin: 0;padding: 0;box-sizing: border-box;
}

2. 安装sass

create-vue创建的项目默认不支持scss语法，需要我们手动安装sass

npm i sass

2D可视化

cookie共享问题

1. 前提 cookie / ls / session 本身会有跨域问题 不同域下的cookie信息是不共享的
2. 在主域名一致的情况下，可以让cookie信息实现共享
3. 把后台项目启动起来登录一下，把token存入本地

1. 准备静态模版

2. 封装接口并请求数据

3. 渲染图表

1- 安装echarts

npm install echarts

2- 封装初始化方法并在mounted中执行

三步走()

import * as echarts from 'echarts'
// 渲染年度收入分析图表
const initBarChart = () => {// 1. 解构图表数据const { parkIncome } = parkInfo.value// 2. 准备options数据const barOptions = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},},grid: {// 让图表占满容器top: '10px',left: '0px',right: '0px',bottom: '0px',containLabel: true,},xAxis: [{type: 'category',axisTick: {alignWithLabel: true,show: false,},data: parkIncome.xMonth,},],yAxis: [{type: 'value',splitLine: {show: false,},},],series: [{name: '园区年度收入',type: 'bar',barWidth: '10px',data: parkIncome.yIncome.map((item, index) => {const color =index % 2 === 0? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0.23, color: '#74c0f8' },{ offset: 1, color: 'rgba(116,192,248,0.00)' },]): new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0.23, color: '#ff7152' },{ offset: 1, color: 'rgba(255,113,82,0.00)' },])return { value: item, itemStyle: { color } }}),},],textStyle: {color: '#B4C0CC',},}// 3. 渲染图表const myBarChart = echarts.init(barChart.value)myBarChart.setOption(barOptions)
}

拆分优化对比

1. 基于组件拆分

2. 1. 解决什么问题：复用 + 增加可维护性
   2. 拆分的是什么：.vue = HTML + JS + CSS
   3. 带来问题：一旦组件从一个变成了多个 必定形成嵌套关系 增加通信成本

3. 基于逻辑拆分

4. 1. 解决什么问题：复用(逻辑) + 增加可维护性
   2. 拆分的是什么: 拆分的只有js
   3. 带来的问题：对原生js函数的理解要求高了

5. 基于逻辑的通用拆分思想

6. 1. 找到组件中属于同一个业务逻辑的所有代码（响应式数据 + 修改数据的方法）
   2. 定义一个以 use 打头的方法，把第一步所有的业务逻辑代码都放入
   3. 在use函数内部，把组件中要用到的数据或者方法以对象的方式导出
   4. 在组件的setup语法糖中，通过调用函数配合解构赋值把函数内部的数据和方法在组件中可用

3D可视化

3D可视化的搭建流程说明

前端加载3D模型

需求：在浏览器中渲染出来3D模型

1. 下载模型解析包

说明：模型解析包和制作3D的软件是配套的

npm i @splinetool/runtime

2. 拉取模型并渲染

说明：spline实例既可以拉取模型同时拉取完毕之后会在canvas节点上渲染画布

<script setup>
// 导入模型解析构造函数
import { Application } from '@splinetool/runtime'
import { onMounted, ref } from 'vue'// 初始化3d模型
const ref3d = ref(null)
const publicPath = 'https://fe-hmzs.itheima.net'
const init3dModel = () => {// 实例化解析器实例let spline = new Application(ref3d.value)// 拉取模型spline.load(`${publicPath}/scene.splinecode`).then(() => {console.log('3D模型加载并渲染完毕')})
}
// dom节点渲染完毕再加载
onMounted(() => {init3dModel()
})</script><template><div class="model-container"><!-- 准备3D渲染节点 --><canvas class="canvas-3d" ref="ref3d" /></div>
</template><style scoped lang="scss">
.model-container {height: 100%;background-color: black;width: 100%;flex-shrink: 0;
}
</style>

3. 添加进入条

纯展示类组件，只需要设计一个参数，显示隐藏

loading prop true 显示 false 隐藏

1- 封装组件

LoadingComponent.vue

<script setup>
defineProps({loading: {type: Boolean,default: false}
})
</script><template><div v-if="loading" class="loading"><p class="text">园区资源加载中…</p><div class="loading-process"><div class="process-wrapper"></div></div></div>
</template><style lang="scss">
.loading {position: absolute;left: 66%;top: 40%;transform: translateX(-50%);text-align: center;.text {font-size: 14px;color: #909399;margin-bottom: 16px;}.loading-process {width: 280px;height: 4px;background: rgba(255, 255, 255, 0.16);border-radius: 20px;overflow: hidden;}.process-wrapper {height: 100%;width: 5%;background: linear-gradient(90deg, #48ffff 0%, #3656ff 100%);animation-duration: 1000s;animation-name: loading;}@keyframes loading {0% {transform: scaleX(1);}1% {transform: scaleX(38);}100% {transform: scaleX(40);}}
}
</style>

2- 导入loading根据状态控制显示

<script setup>
import { onMounted, ref } from 'vue'
// 导入模型解析构造函数
import { Application } from '@splinetool/runtime'
// 导入loading组件
import LoadingComponent from '@/components/LoadingComponent.vue'// 调用接口拉取3d模型 渲染视图中
const publisPath = 'https://fe-hmzs.itheima.net'
const ref3d = ref(null)
const showLoading = ref(false)
const init3dModel = () => {// 开启loading showLoading.value = true// 1. 实例解析器对象(传入模型将来渲染的节点对象)const spline = new Application(ref3d.value)// 2. 使用对象load方法去拉取3大模型资源spline.load(`${publisPath}/scene.splinecode`).then(() => {showLoading.value = false// 模型渲染完毕之后后续的逻辑操作// 3. 拉取资源之后.then方法中可以做后续的逻辑操作})
}onMounted(async () => {// 获取原生的dom对象// 这个方法执行的时候 虽然在mounted中执行的 但是不能保证依赖的数据已经通过接口返回了// 解决方案：等到数据返回之后才进行初始化操作await getParkInfo()initBarChart()initPieChart()init3dModel()
})</script><template><!-- 3d模型渲染节点 --><div class="model-container"><!-- 进度条 --><LoadingComponent :loading="showLoading" /><!-- 准备3D渲染节点 --><canvas class="canvas-3d" ref="ref3d" /></div>
</template>

大屏适配

适配方案说明

缩放方案：接入难度非常小 效果中上

GitHub - Alfred-Skyblue/v-scale-screen: Vue large screen adaptive component vue大屏自适应组件

使用组件

1.安装组件

npm i v-scale-screen

2. 使用组件并制定宽高

注：以 1920 * 1080 为标准尺寸比

<v-scale-screen width="1920" height="1080">主体内容盒子
</v-scale-screen>

=“showLoading” />

```

大屏适配

适配方案说明

缩放方案：接入难度非常小 效果中上

GitHub - Alfred-Skyblue/v-scale-screen: Vue large screen adaptive component vue大屏自适应组件

使用组件

1.安装组件

npm i v-scale-screen

2. 使用组件并制定宽高

注：以 1920 * 1080 为标准尺寸比

<v-scale-screen width="1920" height="1080">主体内容盒子
</v-scale-screen>