大屏项目也不难

news2024/11/25 7:45:43

项目环境搭建

使用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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mac 的vue项目新建并启动访问

mac 的vue项目新建并启动访问

mac 安装、配置vue开发环境&新建vue项目并启动访问 一、 安装hbuilderx二、 安装node.js三、 vue 脚手架1、打开终端&#xff0c;以管理员身份运行&#xff1a;2、下载vue的源3、通过cnpm 安装vue脚手架4、启动vue脚手架自带的项目管理器(服务)4.1、创建空的vue项目4.2、安…
阅读更多...
scratch 恐龙抓恐龙

scratch 恐龙抓恐龙

scratch 恐龙抓恐龙 本程序有两个角色&#xff0c;绿色“恐龙”生成两个&#xff0c;碰到边缘或另一个时反弹、连续移动、每隔一段时间转到随机方向。红色“恐龙”连续生成、持续移动、碰到边缘反弹、接近绿色恐龙时转向、碰到绿色恐龙时删除。 具体内容如下 绿色恐龙 红色恐…
阅读更多...
Robot Framework工具RIDE搜索关键字

Robot Framework工具RIDE搜索关键字

RIDE工具 选择“Tools-Search Keywords” 输入搜索内容、选择库&#xff0c;搜索关键字
阅读更多...
ts全局类型（interface）

ts全局类型（interface）

引入全局interface 首先先创建全局类型文件 命名以 xxx.d.ts 结尾 在项目中找到 tsconfig.json 配置文件 在 compilerOptions 下添加typeRoot属性&#xff0c;值为新创建的文件路径。 项目启动的时候就会自动读取该文件。 文件内容 declare xxx {interface xxx {...} } …
阅读更多...
正向代理与反向代理：解密网络代理的两种不同姿态

正向代理与反向代理：解密网络代理的两种不同姿态

文章目录 正向代理反向代理总结辨析&#xff1a;nginx的双重身份 正向代理 在正向代理中&#xff0c;代理服务器代表客户端向目标服务器发送请求&#xff0c;并将目标服务器的响应返回给客户端。 客户端通常需要配置使用正向代理来访问外部资源&#xff0c;而目标服务器对代理…
阅读更多...
React03-props 和 state 详解

React03-props 和 state 详解

一、props 组件传参 1. props 基本使用 我们在使用组件时可以向组件传递数据&#xff0c;在组件内可以使用 props 对象来调用传入的数据。 function Person(props) {return <div><h3>姓名&#xff1a;{props.name}</h3><h3>年龄&#xff1a;{props.…
阅读更多...
MySQL原理探索——25 MySQL是怎么保证高可用的

MySQL原理探索——25 MySQL是怎么保证高可用的

在上一篇文章中&#xff0c;介绍了 binlog 的基本内容&#xff0c;在一个主备关系中&#xff0c;每个备库接收主库的 binlog 并执行。 正常情况下&#xff0c;只要主库执行更新生成的所有 binlog&#xff0c;都可以传到备库并被正确地执行&#xff0c;备库就能达到跟主库一致的…
阅读更多...
某嘀APP签名分析

某嘀APP签名分析

sign解密，为header及data中的key-value拼接，并进行前后和盐值拼接，进行MD5加密； 本章记录定位的算法位置，方便后续观看； demo: # -*- coding: utf-8 -*- # @Author : Codeooo # @Time : 2022-11-23 import hashlib import random
阅读更多...
MySQL-分库分表详解（三）

MySQL-分库分表详解（三）

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️努力不一定有回报&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xf…
阅读更多...
开始编写Python程序之Python小工具:word转pdf、压缩文件、解压文件、jpg转png

开始编写Python程序之Python小工具:word转pdf、压缩文件、解压文件、jpg转png

1、下载Python编译器 PyCharm官网下载地址对于个人编程&#xff0c;下载免费版的Community即可 2、创建一个Python项目 Python的最佳实现是为每个项目创建virtualenv。为此&#xff0c;请展开Project Interpreter&#xff1a;New Virtualenv Environment节点&#xff0c;然后…
阅读更多...
SSM框架模板（高配：一次性配完所有需要的配置文件）

SSM框架模板（高配：一次性配完所有需要的配置文件）

目录 一、pom.xml文件配置&#xff08;基本不需要修改&#xff09; 二、applicationContex.xml文件的配置。&#xff08;这里只有一个地方需要修改&#xff09; 三、mybatis-config.xml文件配置&#xff08;根据需要修改&#xff09; 四、配置web.xml文件&#xff08;基本不…
阅读更多...
Redis实战案例10-优惠券1-全局唯一ID

Redis实战案例10-优惠券1-全局唯一ID

1. 全局ID生成器 id的规律性明显造成某些信息的泄露&#xff1b; 使用自增ID作为主键会导致一些问题。首先&#xff0c;由于自增ID必须是唯一的&#xff0c;因此当达到最大值时&#xff0c;无法再向表中插入新的数据&#xff0c;这限制了表的数据量。例如&#xff1a;订单如果一…
阅读更多...
基本介绍实施工程师，以及实施工程师在软件开发的作用

基本介绍实施工程师，以及实施工程师在软件开发的作用

一.软件实施介绍 1.什么是软件实施&#xff1f; 软件实施是指将软件开发完成后&#xff0c;按照计划进行部署和安装&#xff0c;使软件能够在目标环境中正常运行的过程。下面是软件实施的一般步骤&#xff1a; 1. 规划和准备&#xff1a;确定实施的范围、目标和计划&#xff0…
阅读更多...
如何将PNG格式照片转换为JPG格式

如何将PNG格式照片转换为JPG格式

如何将PNG格式照片转换为JPG格式 当您需要在网络上共享或存储图像时&#xff0c;将PNG格式的照片转换为JPG格式是一个常见的需求。本文将介绍一些关于将PNG格式照片转换为JPG格式的相关知识。 问题与解决方案 图像质量损失 在将PNG格式照片转换为JPG格式的过程中&#xff0…
阅读更多...
IMX6ULL 移植篇-uboot 网络命令NFS

IMX6ULL 移植篇-uboot 网络命令NFS

一. uboot 网络操作命令 本文介绍 nfs 命令的使用&#xff0c;具体是&#xff1a;通过 NFS服务向开发板下载 zImage内核镜像文件。 二. nfs 命令 nfs命令使用的目的&#xff1a;为了方便开发板调试。 nfs(Network File System) 网络文件系统&#xff0c;通过 nfs 可以在计算…
阅读更多...
MyBatis实现主键ID、创建时间、更新时间的自动填充

MyBatis实现主键ID、创建时间、更新时间的自动填充

注意事项 一&#xff1a;如果插入时有设置的值就使用之前设置的值&#xff0c;不带时才自动赋值。 二&#xff1a;xml文件中必须带有需要自动赋值的字段&#xff0c;否则无法知道赋值&#xff08;如id、create_time、update_time&#xff09; 代码详解 注解&#xff1a; …
阅读更多...
【vue2+echarts】树状图（标签显示不全、节点文本过长换行等问题解决）

【vue2+echarts】树状图（标签显示不全、节点文本过长换行等问题解决）

前言 树状图的使用。官方文档 正文 关于根节点标签显示不全问题解决 一开始的series->边距设置的如下。所以根节点的标签只显示了一半多出来。 top: "1%",left: "7%",bottom: "1%",right: "20%",后面修改成 top: "1%"…
阅读更多...
css基础知识十八：CSS如何画一个三角形？原理是什么？

css基础知识十八：CSS如何画一个三角形？原理是什么？

一、前言 在前端开发的时候&#xff0c;我们有时候会需要用到一个三角形的形状&#xff0c;比如地址选择或者播放器里面播放按钮 通常情况下&#xff0c;我们会使用图片或者svg去完成三角形效果图&#xff0c;但如果单纯使用css如何完成一个三角形呢&#xff1f; 实现过程似乎…
阅读更多...
Maven安装与配置以及idea配置Maven

Maven安装与配置以及idea配置Maven

文章目录 一、安装本地Maven 二、安装 三、配置环境变量 四、配置settings文件 五、idea配置 一、安装本地Maven 选择你需要的maven版本下载&#xff1a;官网下载传送门 我使用的是3.6.1版本&#xff1a;maven-3.6.1-bin.zip ​ 二、安装 把下载好的maven压缩包解压到…
阅读更多...
小样本目标检测综述__刘浩宇(导航与控制2021)论文阅读

小样本目标检测综述__刘浩宇(导航与控制2021)论文阅读

小样本目标检测综述__刘浩宇(导航与控制2021)阅读 0、引言 早期采用了大量标注样本回归候选框的位置&#xff0c;但后来目标集和训练集数据分布不同导致检测效果下降。 对于没有大量样本支持的小样本检测应用就需要使用先验知识来弥补样本的不足。 可以分为三类&#xff1a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023