大屏项目也不难

项目环境搭建

使用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. 基于组件拆分

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

  3. 基于逻辑拆分

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

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

    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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/34855.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

rain-nowcasting-using-deep-learning github：使用深度学习进行临近降水预报

rain-nowcasting-using-deep-learning github：使用深度学习进行临近降水预报

来源 github地址 是什么 本资料库旨在阐述 "在应用于降雨预报的深度学习模型中合并雷达雨量图像和风速预测 "&#xff08; “Merging radar rain images and wind predictions in a deep learning model applied to rain nowcasting”&#xff09;一文中提出的深度…
阅读更多...
群晖NAS搭建WebDV服务手机ES文件浏览器远程访问

群晖NAS搭建WebDV服务手机ES文件浏览器远程访问

文章目录 1. 安装启用WebDAV2. 安装cpolar3. 配置公网访问地址4. 公网测试连接5. 固定连接公网地址 转载自cpolar极点云文章&#xff1a;群晖NAS搭建WebDAV服务手机ES文件浏览器远程访问 有时候我们想通过移动设备访问群晖NAS 中的文件,以满足特殊需求,我们在群辉中开启WebDav服…
阅读更多...
蓝桥杯专题-试题版含答案-【字母统计】【计算球体积】【16进制的简单运算】【C小加随机数】

蓝桥杯专题-试题版含答案-【字母统计】【计算球体积】【16进制的简单运算】【C小加随机数】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…
阅读更多...
JUC--CompletableFuture下

JUC--CompletableFuture下

对计算速度进行选用 import java.util.concurrent.CompletableFuture; import java.util.concurrent.TimeUnit;public class Test4 {public static void main(String[] args) {CompletableFuture<String> a CompletableFuture.supplyAsync(() -> {try { TimeUnit.SE…
阅读更多...
详解JAVA Socket

详解JAVA Socket

目录 1.概述 2.使用 3.使用场景 3.1.web server中的网络通信 3.2.长连接 3.3.性能问题 1.概述 什么是网络通信&#xff1a; 就像打电话一样&#xff0c;两点间要通信&#xff0c;两点间就必须有连接&#xff0c;为了实现任意两个节点之间的通信&#xff0c;我们就必须采…
阅读更多...
第三十九章Java成员方法的声明和调用

第三十九章Java成员方法的声明和调用

声明成员方法可以定义类的行为&#xff0c;行为表示一个对象能够做的事情或者能够从一个对象取得的信息。类的各种功能操作都是用方法来实现的&#xff0c;属性只不过提供了相应的数据。一个完整的方法通常包括方法名称、方法主体、方法参数和方法返回值类型&#xff0c;其结构…
阅读更多...
C# PaddleInference 文字检测（只检测不识别）

C# PaddleInference 文字检测（只检测不识别）

效果 项目 Demo下载 代码 using OpenCvSharp.Extensions; using OpenCvSharp; using Sdcb.PaddleInference.Native; using Sdcb.PaddleInference; using System; using System.Collections.Generic; using System.Data; using System.Drawing; using System.Linq; using Sys…
阅读更多...
phar协议文件包含

phar协议文件包含

实验目的 通过本实验&#xff0c;了解php封装伪协议&#xff0c;掌握phar协议文件包含的用法 实验环境 操作机&#xff1a;kali 靶机&#xff1a;Windows 2007 实验地址&#xff1a;http://靶机ip/exp/include2/phar/phar1/ 用户名&#xff1a;college 密码&#xff1a;360C…
阅读更多...
Vue ：在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程

Vue ：在 VSCode 中安装 yarn 并用 yarn 工具来控制 Vue 项目的详细过程

Ⅰ、 Yarn 工具简介&#xff1a; 1、什么是 yarn 工具: Yarn 是 facebook 发布的一款取代 npm 的资源包管理工具&#xff0c;是一个快速、可靠、安全的依赖管理工具&#xff0c;一款新的 JavaScript 资源包管理工具(吐槽下&#xff1a;最大的弊端是&#xff0c;要通过 npm 来…
阅读更多...
在blender中使用python程序化建模

在blender中使用python程序化建模

blender中&#xff0c;所有可以在Blender软件中的手动操作&#xff0c;基本都可以通过Python API 完成 那么就可以用这个完成程序化生成 下面我给出一个简单的方块建模程序&#xff1a; 在scripting中&#xff0c;可以添加file&#xff0c;然后向场景中心放置一个正方体 首…
阅读更多...
RK3588平台开发系列讲解（Camera篇）OV569摄像头调试

RK3588平台开发系列讲解（Camera篇）OV569摄像头调试

文章目录 一、摄像头识别检测二、查看摄像头支持的格式三、摄像头采集格式查询四、摄像头采集格式查询沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇章主要讲解OV569摄像头调试。 OV5695 是一种图像传感器，用于摄像头设备。要进行 OV5695 摄像头的调试，通常涉…
阅读更多...
100种思维模型之能力圈思维模型-91

100种思维模型之能力圈思维模型-91

芒格说&#xff1a; “ 一个人在一生中可以真正得到的真见卓识仍然非常有限&#xff0c;所以正确的决策必须局限在自己的 ‘ 能力圈’ 以内。 ” 巴菲特说&#xff1a; “对你的 能力圈 来说&#xff0c;最重要的不是能力圈的范围大小&#xff0c;而是你如何能够 确定能…
阅读更多...
Django核心

Django核心

安装django pip install django # pip install django3.1.6创建django项目 在一个项目中可以包含多个应用程序。 django-admin startapp app_name #创建一个应用程序 django-admin startproject project_name #创建一个项目运行django项目 python manage.py runserver 80…
阅读更多...
2. PS基本操作

2. PS基本操作

因为网页美工大部分效果图都是利用PS ( Photoshop )来做的,所以以后我们大部分切图工作都是在PS里面完成 ●文件—>打开&#xff1a;可以打开我们要测量的图片 ●CtrlR : 可以打开标尺&#xff0c;或者视图—>标尺 ●右击标尺&#xff0c;把里面的单位改为像素 ●Ctrl加号…
阅读更多...
Spring Boot实战：拦截器和监听器的应用指南

Spring Boot实战：拦截器和监听器的应用指南

当使用Spring Boot时&#xff0c;我们可以通过拦截器&#xff08;Interceptor&#xff09;和监听器&#xff08;Listener&#xff09;来实现对请求和响应的处理。拦截器和监听器提供了一种可插拔的机制&#xff0c;用于在请求处理过程中进行自定义操作&#xff0c;例如记录日志…
阅读更多...
【保姆级教程】PyCharm通过SSH远程连接ModelArts

【保姆级教程】PyCharm通过SSH远程连接ModelArts

文章目录 一、创建Notebook二、配置SSH三、配置远程Python解释器四、成果展示 一、创建Notebook 首先&#xff0c;找到云资源下面的 ModelArts&#xff0c;然后点击并进入 ModelArts控制台。 在ModelArts控制台中&#xff0c;点击开发环境下的 Notebook 。然后点击创建&#x…
阅读更多...
NB-IoT学习笔记 —— NB-IoT介绍

NB-IoT学习笔记 —— NB-IoT介绍

一、简介 NB-IoT 是指窄带物联网&#xff08;Narrow Band Internet of Things&#xff09;技术&#xff0c;是一种低功耗广域&#xff08;LPWA&#xff09;网络技术标准&#xff0c;基于蜂窝技术&#xff0c;用于连接使用无线蜂窝网络的各种智能传感器和设备&#xff0c;聚焦于…
阅读更多...
Airtest：Windows桌面应用自动化测试四【Airtest之python本地环境安装、独立IDE运行】

Airtest：Windows桌面应用自动化测试四【Airtest之python本地环境安装、独立IDE运行】

Airtest之python本地环境安装、独立IDE运行 一、环境配置二、安装Airtest三、安装poco四、常见问题4.1若运行代码时&#xff0c;在cv2模块报ImportError: DLL load failed: 找不到指定模块的错&#xff0c;有几种解决方案&#xff1a;4.1.1.本问题的根本原因应该是DLL文件的缺失…
阅读更多...
供应链管理系统有哪些模块？

供应链管理系统有哪些模块？

先弄搞清楚&#xff1a;供应链管理的概念与定义 供应链管理(Supply Chain Management ,简称SCM)&#xff1a;就是指在满足一定的客户服务水平的条件下&#xff0c;为了使整个供应链系统成本达到最小而把供应商、制造商、仓库、配送中心和渠道商等有效地组织在一起来进行的产品…
阅读更多...
list容器语法

list容器语法

文章目录 listlist基本概念list的优点&#xff1a;list的缺点&#xff1a;重要性质 list 的使用方法list构造函数list 赋值和交换list 长度/大小操作list 插入元素和删除元素访问list 反转和排序sort链表排序案例forward_list&#xff08;C11&#xff09;forward_list 的使用方…
阅读更多...
最新文章

Copyright @ 2022~2023