@ -0,0 +1,4 @@ |
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||
NODE_ENV = 'development' |
||||
VITE_APP_TITLE = '大屏数据' |
||||
VITE_APP_BASE_API = 'http://10.115.6.28:18083/' |
@ -0,0 +1,4 @@ |
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||
NODE_ENV = 'development' |
||||
VITE_APP_TITLE = '大屏数据' |
||||
VITE_APP_BASE_API = '/api' |
@ -0,0 +1,24 @@ |
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
dist |
||||
dist-ssr |
||||
*.local |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
.DS_Store |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
@ -0,0 +1,3 @@ |
||||
{ |
||||
"recommendations": ["Vue.volar"] |
||||
} |
@ -0,0 +1,5 @@ |
||||
# Vue 3 + TypeScript + Vite |
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
@ -0,0 +1,14 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>Vite + Vue + TS</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.ts"></script> |
||||
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script> |
||||
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.4/echarts-gl.min.js"></script> |
||||
</html> |
@ -0,0 +1,34 @@ |
||||
{ |
||||
"name": "vite-project", |
||||
"private": true, |
||||
"version": "0.0.0", |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite --open", |
||||
"build": "vue-tsc -b && vite build", |
||||
"preview": "vite preview" |
||||
}, |
||||
"dependencies": { |
||||
"@kjgl77/datav-vue3": "^1.7.3", |
||||
"axios": "^1.7.2", |
||||
"element-plus": "^2.9.5", |
||||
"lib-flexible": "^0.3.2", |
||||
"pinia": "^2.1.7", |
||||
"postcss-plugin-px2rem": "^0.8.1", |
||||
"sass": "^1.77.6", |
||||
"sass-loader": "^14.2.1", |
||||
"vue": "^3.4.29", |
||||
"vue-router": "4" |
||||
}, |
||||
"devDependencies": { |
||||
"@types/node": "^20.14.9", |
||||
"@vitejs/plugin-vue": "^5.0.5", |
||||
"postcss": "^8.4.39", |
||||
"postcss-html": "^1.7.0", |
||||
"postcss-scss": "^4.0.9", |
||||
"px2rem-loader": "^0.1.9", |
||||
"typescript": "^5.2.2", |
||||
"vite": "^5.3.1", |
||||
"vue-tsc": "^2.0.21" |
||||
} |
||||
} |
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,16 @@ |
||||
<template> |
||||
<router-view></router-view> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
// import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
// window.addEventListener("beforeunload", function (e) { |
||||
// e.preventDefault(); |
||||
// e.returnValue = ""; |
||||
// return ""; |
||||
// }); |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
@ -0,0 +1,2 @@ |
||||
import request from '@/utils/request' |
||||
|
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 407 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,48 @@ |
||||
<template> |
||||
<div class="container-bgc"> |
||||
<div class="top"> |
||||
<div class="title">{{ setting.title }}</div> |
||||
</div> |
||||
<router-view v-slot="{ Component }"> |
||||
<keep-alive > |
||||
<component :is="Component"></component> |
||||
</keep-alive> |
||||
</router-view> |
||||
<keep-alive> </keep-alive> |
||||
<div class="bottom"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; |
||||
import settingStore from "@/store/modules/setting"; |
||||
const setting = settingStore(); |
||||
console.log(setting.title); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container-bgc { |
||||
position: relative; |
||||
width: 100%; |
||||
// height: 1080px; |
||||
height: 1080px; |
||||
background-color: #091d22; |
||||
background: url("../assets//images/bg2.png") no-repeat; |
||||
|
||||
|
||||
.top { |
||||
width: 100%; |
||||
height: 75px; |
||||
text-align: center; |
||||
font-size: 42px; |
||||
line-height: 75px; |
||||
font-style: italic; |
||||
background: url("../assets/images/topbgc.png") no-repeat; |
||||
// background-position: center bottom -10px; |
||||
.title { |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
@ -0,0 +1,15 @@ |
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
import router from '@/router' |
||||
import '@/styles/index.scss' |
||||
import ElementPlus from 'element-plus'; |
||||
import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件
|
||||
import '@/utils/rem.js' |
||||
import DataVVue3 from '@kjgl77/datav-vue3' |
||||
import pinia from '@/store/index' |
||||
const app = createApp(App) |
||||
app.use(ElementPlus) |
||||
app.use(pinia) |
||||
app.use(DataVVue3) |
||||
app.use(router) |
||||
app.mount('#app') |
@ -0,0 +1,27 @@ |
||||
import { createRouter, createWebHashHistory } from "vue-router"; |
||||
import layout from '@/layout/index.vue' |
||||
const routerList :any = [ |
||||
{ |
||||
path: "/", |
||||
component: layout, |
||||
children:[ |
||||
{ |
||||
path:'', |
||||
name:'Home', |
||||
component:() => import('@/views/largeDataScreen/home.vue') |
||||
}, |
||||
|
||||
] |
||||
}, |
||||
]; |
||||
const router :any = createRouter({ |
||||
history: createWebHashHistory(), |
||||
routes: routerList, |
||||
scrollBehavior() { |
||||
return { |
||||
left: 0, |
||||
top: 0, |
||||
} |
||||
}, |
||||
}) |
||||
export default router |
@ -0,0 +1,6 @@ |
||||
// 引入仓库
|
||||
import { createPinia } from 'pinia' |
||||
// 创建仓库
|
||||
const pinia = createPinia() |
||||
// 暴露仓库
|
||||
export default pinia |
@ -0,0 +1,15 @@ |
||||
import { defineStore } from "pinia" |
||||
const settingStore = defineStore("settingStore", { |
||||
state: ():any => { |
||||
return { |
||||
title: "虚拟仿真实验项目", |
||||
}; |
||||
}, |
||||
actions: { |
||||
setTitle(name: any) { |
||||
this.title = name; |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
export default settingStore; |
@ -0,0 +1,27 @@ |
||||
@import url('./reset.scss'); |
||||
/* 滚动条整体宽度 */ |
||||
::-webkit-scrollbar { |
||||
width: 10px; |
||||
} |
||||
|
||||
/* 滚动条滑块样式 */ |
||||
::-webkit-scrollbar-thumb { |
||||
background-color: darkgrey; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* 滑块处于活动状态时的样式 */ |
||||
::-webkit-scrollbar-thumb:active { |
||||
background-color: lightgrey; |
||||
} |
||||
|
||||
/* 滚动条轨道样式 */ |
||||
::-webkit-scrollbar-track { |
||||
background-color: #f1f1f1; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* 轨道悬停样式 */ |
||||
::-webkit-scrollbar-track:hover { |
||||
background-color: #e1e1e1; |
||||
} |
@ -0,0 +1,188 @@ |
||||
/** |
||||
* ENGINE |
||||
* v0.2 | 20150615 |
||||
* License: none (public domain) |
||||
*/ |
||||
|
||||
*, |
||||
*:after, |
||||
*:before { |
||||
box-sizing: border-box; |
||||
|
||||
outline: none; |
||||
} |
||||
|
||||
html, |
||||
body, |
||||
div, |
||||
span, |
||||
applet, |
||||
object, |
||||
iframe, |
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6, |
||||
p, |
||||
blockquote, |
||||
pre, |
||||
a, |
||||
abbr, |
||||
acronym, |
||||
address, |
||||
big, |
||||
cite, |
||||
code, |
||||
del, |
||||
dfn, |
||||
em, |
||||
img, |
||||
ins, |
||||
kbd, |
||||
q, |
||||
s, |
||||
samp, |
||||
small, |
||||
strike, |
||||
strong, |
||||
sub, |
||||
sup, |
||||
tt, |
||||
var, |
||||
b, |
||||
u, |
||||
i, |
||||
center, |
||||
dl, |
||||
dt, |
||||
dd, |
||||
ol, |
||||
ul, |
||||
li, |
||||
fieldset, |
||||
form, |
||||
label, |
||||
legend, |
||||
table, |
||||
caption, |
||||
tbody, |
||||
tfoot, |
||||
thead, |
||||
tr, |
||||
th, |
||||
td, |
||||
article, |
||||
aside, |
||||
canvas, |
||||
details, |
||||
embed, |
||||
figure, |
||||
figcaption, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
menu, |
||||
nav, |
||||
output, |
||||
ruby, |
||||
section, |
||||
summary, |
||||
time, |
||||
mark, |
||||
audio, |
||||
video { |
||||
font: inherit; |
||||
font-size: 100%; |
||||
|
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
vertical-align: baseline; |
||||
|
||||
border: 0; |
||||
} |
||||
|
||||
article, |
||||
aside, |
||||
details, |
||||
figcaption, |
||||
figure, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
menu, |
||||
nav, |
||||
section { |
||||
display: block; |
||||
} |
||||
|
||||
body { |
||||
line-height: 1; |
||||
} |
||||
|
||||
ol, |
||||
ul { |
||||
list-style: none; |
||||
} |
||||
|
||||
blockquote, |
||||
q { |
||||
quotes: none; |
||||
&:before, |
||||
&:after { |
||||
content: ''; |
||||
content: none; |
||||
} |
||||
} |
||||
|
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
|
||||
position: relative; |
||||
|
||||
vertical-align: baseline; |
||||
} |
||||
sup { |
||||
top: -.5em; |
||||
} |
||||
sub { |
||||
bottom: -.25em; |
||||
} |
||||
|
||||
table { |
||||
border-spacing: 0; |
||||
border-collapse: collapse; |
||||
} |
||||
|
||||
input, |
||||
textarea, |
||||
button { |
||||
font-family: inhert; |
||||
font-size: inherit; |
||||
|
||||
color: inherit; |
||||
} |
||||
|
||||
select { |
||||
text-indent: .01px; |
||||
text-overflow: ''; |
||||
|
||||
border: 0; |
||||
border-radius: 0; |
||||
|
||||
-webkit-appearance: none; |
||||
-moz-appearance: none; |
||||
} |
||||
select::-ms-expand { |
||||
display: none; |
||||
} |
||||
|
||||
code, |
||||
pre { |
||||
font-family: monospace, monospace; |
||||
font-size: 1em; |
||||
} |
@ -0,0 +1,118 @@ |
||||
|
||||
;(function(win, lib) { |
||||
var doc = win.document; |
||||
var docEl = doc.documentElement; |
||||
var metaEl = doc.querySelector('meta[name="viewport"]'); |
||||
var flexibleEl = doc.querySelector('meta[name="flexible"]'); |
||||
var dpr = 0; |
||||
var scale = 0; |
||||
var tid; |
||||
var flexible = lib.flexible || (lib.flexible = {}); |
||||
|
||||
if (metaEl) { |
||||
console.warn('将根据已有的meta标签来设置缩放比例'); |
||||
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); |
||||
if (match) { |
||||
scale = parseFloat(match[1]); |
||||
dpr = parseInt(1 / scale); |
||||
} |
||||
} else if (flexibleEl) { |
||||
var content = flexibleEl.getAttribute('content'); |
||||
if (content) { |
||||
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); |
||||
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); |
||||
if (initialDpr) { |
||||
dpr = parseFloat(initialDpr[1]); |
||||
scale = parseFloat((1 / dpr).toFixed(2)); |
||||
} |
||||
if (maximumDpr) { |
||||
dpr = parseFloat(maximumDpr[1]); |
||||
scale = parseFloat((1 / dpr).toFixed(2)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (!dpr && !scale) { |
||||
var isAndroid = win.navigator.appVersion.match(/android/gi); |
||||
var isIPhone = win.navigator.appVersion.match(/iphone/gi); |
||||
var devicePixelRatio = win.devicePixelRatio; |
||||
if (isIPhone) { |
||||
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
|
||||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
||||
dpr = 3; |
||||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ |
||||
dpr = 2; |
||||
} else { |
||||
dpr = 1; |
||||
} |
||||
} else { |
||||
// 其他设备下,仍旧使用1倍的方案
|
||||
dpr = 1; |
||||
} |
||||
scale = 1 / dpr; |
||||
} |
||||
|
||||
docEl.setAttribute('data-dpr', dpr); |
||||
if (!metaEl) { |
||||
metaEl = doc.createElement('meta'); |
||||
metaEl.setAttribute('name', 'viewport'); |
||||
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); |
||||
if (docEl.firstElementChild) { |
||||
docEl.firstElementChild.appendChild(metaEl); |
||||
} else { |
||||
var wrap = doc.createElement('div'); |
||||
wrap.appendChild(metaEl); |
||||
doc.write(wrap.innerHTML); |
||||
} |
||||
} |
||||
|
||||
function refreshRem(){ |
||||
var width = docEl.getBoundingClientRect().width; |
||||
if (width / dpr > 1920) { |
||||
width = 1920 * dpr; |
||||
} |
||||
var rem = width / 10; |
||||
docEl.style.fontSize = rem + 'px'; |
||||
flexible.rem = win.rem = rem; |
||||
} |
||||
|
||||
win.addEventListener('resize', function() { |
||||
clearTimeout(tid); |
||||
tid = setTimeout(refreshRem, 300); |
||||
}, false); |
||||
win.addEventListener('pageshow', function(e) { |
||||
if (e.persisted) { |
||||
clearTimeout(tid); |
||||
tid = setTimeout(refreshRem, 300); |
||||
} |
||||
}, false); |
||||
|
||||
if (doc.readyState === 'complete') { |
||||
doc.body.style.fontSize = 12 * dpr + 'px'; |
||||
} else { |
||||
doc.addEventListener('DOMContentLoaded', function(e) { |
||||
doc.body.style.fontSize = 12 * dpr + 'px'; |
||||
}, false); |
||||
} |
||||
|
||||
|
||||
refreshRem(); |
||||
|
||||
flexible.dpr = win.dpr = dpr; |
||||
flexible.refreshRem = refreshRem; |
||||
flexible.rem2px = function(d) { |
||||
var val = parseFloat(d) * this.rem; |
||||
if (typeof d === 'string' && d.match(/rem$/)) { |
||||
val += 'px'; |
||||
} |
||||
return val; |
||||
} |
||||
flexible.px2rem = function(d) { |
||||
var val = parseFloat(d) / this.rem; |
||||
if (typeof d === 'string' && d.match(/px$/)) { |
||||
val += 'rem'; |
||||
} |
||||
return val; |
||||
} |
||||
|
||||
})(window, window['lib'] || (window['lib'] = {})); |
@ -0,0 +1,23 @@ |
||||
// 引入第三方请求库axios
|
||||
import axios from 'axios' |
||||
// 创建axios实例
|
||||
const server = axios.create({ |
||||
baseURL:import.meta.env.VITE_APP_BASE_API, |
||||
timeout:10000, |
||||
}) |
||||
// 创建请求拦截器
|
||||
server.interceptors.request.use((config) => { |
||||
return config |
||||
|
||||
}) |
||||
// 创建相应拦截器
|
||||
server.interceptors.response.use((response:any) => { |
||||
if(response.status === 200){ |
||||
return response.data |
||||
} |
||||
// return response
|
||||
}) |
||||
|
||||
// 暴露axios实例
|
||||
|
||||
export default server |
@ -0,0 +1 @@ |
||||
/// <reference types="vite/client" />
|
@ -0,0 +1,27 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"composite": true, |
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||
"target": "ES2020", |
||||
"useDefineForClassFields": true, |
||||
"module": "ESNext", |
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"resolveJsonModule": true, |
||||
"isolatedModules": true, |
||||
"moduleDetection": "force", |
||||
"noEmit": true, |
||||
"jsx": "preserve", |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"noFallthroughCasesInSwitch": true |
||||
}, |
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] |
||||
} |
@ -0,0 +1,31 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"target": "ES2020", |
||||
"useDefineForClassFields": true, |
||||
"module": "ESNext", |
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||
"skipLibCheck": true, |
||||
|
||||
/* Bundler mode */ |
||||
"moduleResolution": "bundler", |
||||
"allowImportingTsExtensions": true, |
||||
"resolveJsonModule": true, |
||||
"isolatedModules": true, |
||||
"noEmit": true, |
||||
"jsx": "preserve", |
||||
|
||||
/* Linting */ |
||||
"strict": true, |
||||
"noUnusedLocals": true, |
||||
"noUnusedParameters": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录 |
||||
"paths": { |
||||
//路径映射,相对于baseUrl |
||||
"@/*": ["src/*"] |
||||
}, |
||||
"types": ["vite/client"] |
||||
}, |
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], |
||||
"references": [{ "path": "./tsconfig.node.json" }] |
||||
} |
@ -0,0 +1,11 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"composite": true, |
||||
"skipLibCheck": true, |
||||
"module": "ESNext", |
||||
"moduleResolution": "bundler", |
||||
"allowSyntheticDefaultImports": true, |
||||
"strict": true |
||||
}, |
||||
"include": ["vite.config.ts"] |
||||
} |
@ -0,0 +1,47 @@ |
||||
import { defineConfig } from "vite"; |
||||
import vue from "@vitejs/plugin-vue"; |
||||
import path from "path"; |
||||
// @ts-ignore
|
||||
import postcssPluginPx2rem from "postcss-plugin-px2rem"; //引入插件
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
//配置参数
|
||||
const px2remOptions = { |
||||
rootValue: 192, //换算基数, 默认100 ,也就是1440px ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
|
||||
unitPrecision: 5, //允许REM单位增长到的十进制数字,其实就是精度控制
|
||||
// propWhiteList: [], // 默认值是一个空数组,这意味着禁用白名单并启用所有属性。
|
||||
// propBlackList: [], // 黑名单
|
||||
// exclude:false, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
|
||||
// selectorBlackList: [], //要忽略并保留为px的选择器
|
||||
// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
|
||||
// replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
|
||||
mediaQuery: false, //(布尔值)允许在媒体查询中转换px
|
||||
minPixelValue: 0 , //设置要替换的最小像素值(3px会被转rem)。 默认 0
|
||||
} |
||||
export default defineConfig({ |
||||
plugins: [vue()], |
||||
server:{ |
||||
host: '0.0.0.0', |
||||
port: 8866, |
||||
}, |
||||
resolve: { |
||||
alias: { |
||||
"@": path.resolve("./src"), // 相对路径别名配置,使用 @ 代替 src
|
||||
}, |
||||
}, |
||||
css: { |
||||
preprocessorOptions: { |
||||
scss: { |
||||
javascriptEnabled: true, |
||||
additionalData: '@import "./src/styles/variable.scss";', |
||||
}, |
||||
}, |
||||
postcss: { |
||||
plugins: [ |
||||
// 配置响应式插件
|
||||
postcssPluginPx2rem(px2remOptions) |
||||
|
||||
], |
||||
}, |
||||
}, |
||||
}); |