Large-Visual-Screen
/
vehicle-monitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 大屏完成

This commit is contained in:
Bunny 2025-02-26 22:04:47 +08:00
parent d2c3715feb
commit a67a74d33c
13 changed files with 245 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -1,9 +1,9 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8" />
<link href="/vite.svg" rel="icon" type="image/svg+xml"/> <link href="/vite.svg" rel="icon" type="image/svg+xml" />
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>%VITE_APP_TITLE%</title> <title>%VITE_APP_TITLE%</title>
</head> </head>
<body> <body>

3
package.json
View File

@ -22,7 +22,7 @@
"axios": "^1.7.9", "axios": "^1.7.9",
"boxen": "^8.0.1", "boxen": "^8.0.1",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"echarts": "^5.5.1", "echarts": "^5.6.0",
"eslint": "^9.9.1", "eslint": "^9.9.1",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-define-config": "^2.1.0", "eslint-define-config": "^2.1.0",
@ -50,6 +50,7 @@
"vite-plugin-remove-console": "^2.2.0", "vite-plugin-remove-console": "^2.2.0",
"vite-plugin-vue-inspector": "^5.3.1", "vite-plugin-vue-inspector": "^5.3.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-echarts": "^7.0.3",
"vue-eslint-parser": "^9.4.3", "vue-eslint-parser": "^9.4.3",
"vue-router": "^4.4.3", "vue-router": "^4.4.3",
"vue-types": "^6.0.0" "vue-types": "^6.0.0"

40
pnpm-lock.yaml
View File

@ -39,7 +39,7 @@ importers:
specifier: ^1.11.13 specifier: ^1.11.13
version: 1.11.13 version: 1.11.13
echarts: echarts:
specifier: ^5.5.1 specifier: ^5.6.0
version: 5.6.0 version: 5.6.0
eslint: eslint:
specifier: ^9.9.1 specifier: ^9.9.1
@ -122,6 +122,9 @@ importers:
vue: vue:
specifier: ^3.5.13 specifier: ^3.5.13
version: 3.5.13(typescript@5.7.3) version: 3.5.13(typescript@5.7.3)
vue-echarts:
specifier: ^7.0.3
version: 7.0.3(@vue/runtime-core@3.5.13)(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))
vue-eslint-parser: vue-eslint-parser:
specifier: ^9.4.3 specifier: ^9.4.3
version: 9.4.3(eslint@9.21.0(jiti@2.4.2)) version: 9.4.3(eslint@9.21.0(jiti@2.4.2))
@ -2464,6 +2467,17 @@ packages:
vscode-uri@3.1.0: vscode-uri@3.1.0:
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==} resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
vue-demi@0.13.11:
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
engines: {node: '>=12'}
hasBin: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
vue-demi@0.14.10: vue-demi@0.14.10:
resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
engines: {node: '>=12'} engines: {node: '>=12'}
@ -2475,6 +2489,16 @@ packages:
'@vue/composition-api': '@vue/composition-api':
optional: true optional: true
vue-echarts@7.0.3:
resolution: {integrity: sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==}
peerDependencies:
'@vue/runtime-core': ^3.0.0
echarts: ^5.5.1
vue: ^2.7.0 || ^3.1.1
peerDependenciesMeta:
'@vue/runtime-core':
optional: true
vue-eslint-parser@9.4.3: vue-eslint-parser@9.4.3:
resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==} resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
engines: {node: ^14.17.0 || >=16.0.0} engines: {node: ^14.17.0 || >=16.0.0}
@ -4916,10 +4940,24 @@ snapshots:
vscode-uri@3.1.0: {} vscode-uri@3.1.0: {}
vue-demi@0.13.11(vue@3.5.13(typescript@5.7.3)):
dependencies:
vue: 3.5.13(typescript@5.7.3)
vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)): vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)):
dependencies: dependencies:
vue: 3.5.13(typescript@5.7.3) vue: 3.5.13(typescript@5.7.3)
vue-echarts@7.0.3(@vue/runtime-core@3.5.13)(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3)):
dependencies:
echarts: 5.6.0
vue: 3.5.13(typescript@5.7.3)
vue-demi: 0.13.11(vue@3.5.13(typescript@5.7.3))
optionalDependencies:
'@vue/runtime-core': 3.5.13
transitivePeerDependencies:
- '@vue/composition-api'
vue-eslint-parser@9.4.3(eslint@9.21.0(jiti@2.4.2)): vue-eslint-parser@9.4.3(eslint@9.21.0(jiti@2.4.2)):
dependencies: dependencies:
debug: 4.4.0 debug: 4.4.0

BIN
src/assets/images/bg/bg-frame-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 785 B

BIN
src/assets/images/bg/bg-frame-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 B

32
src/layout/components/AppMain/MainLeft.vue
View File

@ -9,25 +9,25 @@
</div> </div>
<!-- 汽车列表 --> <!-- 汽车列表 -->
<ul class="car-list mt-[32px]"> <ul class="mt-[32px]">
<li class="flex-x-around w-[330px] h-[60px]"> <li class="car-item flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" /> <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
<p class="c-white">入卡口（西北门）</p> <p class="c-white font-size-[14px]">入卡口（西北门）</p>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span> <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li> </li>
<li class="flex-x-around w-[330px] h-[60px]"> <li class="car-item flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" /> <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
<p class="c-white">入卡口（东北门）</p> <p class="c-white font-size-[14px]">入卡口（东北门）</p>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span> <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li> </li>
<li class="flex-x-around w-[330px] h-[60px]"> <li class="car-item flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-2.png" /> <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-2.png" />
<p class="c-white">入卡口（东北门）</p> <p class="c-white font-size-[14px]">入卡口（东北门）</p>
<span class="dashed-circle c-warning border-b-warning">拥堵</span> <span class="dashed-circle c-warning border-b-warning">拥堵</span>
</li> </li>
<li class="flex-x-around w-[330px] h-[60px]"> <li class="car-item flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" /> <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
<p class="c-white">入卡口（东南门）</p> <p class="c-white font-size-[14px]">入卡口（东南门）</p>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span> <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li> </li>
</ul> </ul>
@ -49,15 +49,13 @@
.left { .left {
transform: rotateY(180deg); transform: rotateY(180deg);
.car-list { .car-item {
li {
width: 330px; width: 330px;
height: 60px; height: 61px;
margin: 0 0 9px 0; margin: 0 0 9px 0;
background: url('@/assets/images/bg/bg-frame.png') no-repeat center; background: url('@/assets/images/bg/bg-frame.png') no-repeat center;
background-size: cover; background-size: cover;
} }
}
.suggest { .suggest {
margin: 24px 0 0 0; margin: 24px 0 0 0;

83
src/layout/components/AppMain/MainRight.vue
View File

@ -1,4 +1,14 @@
<script lang="ts" setup></script> <script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { renderEcharts } from '@/layout/components/AppMain/data';
const weekDataChart = ref<HTMLDivElement>();
onMounted(async () => {
renderEcharts(weekDataChart);
});
</script>
<template> <template>
<div class="right ml-[20px]"> <div class="right ml-[20px]">
@ -9,40 +19,53 @@
</div> </div>
<!-- 汽车列表 --> <!-- 汽车列表 -->
<ul class="car-list mt-[32px]"> <ul class="flex-x-around mt-[32px] w-[331px]">
<li class="flex-x-around w-[330px] h-[60px]"> <li class="detail-item flex-y-between">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" /> <span class="bg-frame c-white">最高进园车流量</span>
<p class="c-white">入卡口（西北门）</p> <span class="bg-frame c-[#66FFFF]">897</span>
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
</li> </li>
<li class="flex-x-around w-[330px] h-[60px]"> <li class="detail-item flex-y-between">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" /> <span class="bg-frame c-white">最高进园车流量</span>
<p class="c-white">入卡口（东北门）</p> <span class="bg-frame c-[#66FFFF]">494</span>
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
</li>
<li class="flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-2.png" />
<p class="c-white">入卡口（东北门）</p>
<span class="dashed-circle c-[#FFBE44] border-b-[#FFBE44]">拥堵</span>
</li>
<li class="flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
<p class="c-white">入卡口（东南门）</p>
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
</li> </li>
</ul> </ul>
<!-- 建议 --> <!-- 七天数据 -->
<div class="suggest"> <div ref="weekDataChart" class="week-data" />
<h5>车流量建议</h5>
<p>
高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
<span class="c-warning-secondary">可建议XXX企业向后延迟15min错峰入园。</span>
高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
</p>
</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.detail-item {
width: 162px;
height: 111px;
text-align: center;
span:nth-child(1) {
width: 161px;
height: 40px;
line-height: 40px;
font-size: 16px;
background: url('@/assets/images/bg/bg-frame-2.png') no-repeat center;
background-size: cover;
}
span:nth-child(2) {
width: 161px;
height: 66px;
line-height: 66px;
font-size: 34px;
background: url('@/assets/images/bg/bg-frame-3.png') no-repeat center;
background-size: cover;
}
}
.week-data {
margin: 71px 0 0 0;
width: 325px;
height: 205px;
transform: scale(1);
transform-origin: 0 0;
}
</style>

12
src/layout/components/AppMain/components/MainCenterPercent.vue
View File

@ -8,14 +8,14 @@ import ArrowUp from '@/assets/images/layout/arrow/arrow-up.png';
const calPercentItem: Element = (percent: number) => { const calPercentItem: Element = (percent: number) => {
return percent > 25 ? ( return percent > 25 ? (
<div class="flex-center font-size-[20px] c-warning"> <div class="flex-center c-warning">
<img alt="arrow" class="mt-2 h-[23px]" src={ArrowUp} /> <img alt="arrow" class="mt-[6px] w-[13px] h-[23px]" src={ArrowUp} />
<span>{percent}%</span> <span className="font-size-[15px]">{percent}%</span>
</div> </div>
) : ( ) : (
<div class="flex-center font-size-[20px] c-primary-secondary"> <div class="flex-center c-primary-secondary">
<img alt="arrow" class="mt-2 h-[23px]" src={ArrowDown} /> <img alt="arrow" class="mt-[6px] w-[13px] h-[23px]" src={ArrowDown} />
<span>{percent}%</span> <span className="font-size-[15px]">{percent}%</span>
</div> </div>
); );
}; };

111
src/layout/components/AppMain/data.ts Normal file
View File

@ -0,0 +1,111 @@
import 'echarts/lib/component/dataZoom';
import type { EChartsOption } from 'echarts';
import * as echarts from 'echarts';
import { type Ref, ref } from 'vue';
const option = ref<EChartsOption>({
backgroundColor: 'transparent',
grid: { right: 10, left: 10, bottom: 20 },
title: {
text: '近7天车辆数据',
textStyle: { fontSize: 18, color: '#fff', fontWeight: 'lighter' },
},
tooltip: {},
legend: {
data: ['出园', '入园'],
icon: 'rect',
right: 0,
top: 0,
itemGap: 34,
orient: 'horizontal',
align: 'left',
textStyle: { fontSize: 14, color: '#fff' },
data: [
{ name: '出园', icon: 'rect', itemStyle: { color: '#4182FF' } },
{ name: '入园', icon: 'rect', itemStyle: { color: '#00FFFF' } },
],
},
xAxis: {
type: 'category',
show: true,
data: ['02.01', '02.02', '02.03', '02.04', '02.05', '02.06', '02.07'],
itemStyle: { color: '#ccc' },
splitLine: {
show: true,
lineStyle: {
color: '#333',
width: 1,
type: 'solid', // 'solid' ||'dashed'||'dotted'
},
},
splitArea: {
show: false,
},
},
yAxis: { show: false, type: 'value' },
series: [
{
name: '入园',
type: 'line',
data: [3, 9, 2, 8, 3, 4, 8],
smooth: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00FFFF' },
{ offset: 1, color: 'rgba(0,255,255,0)' },
]),
},
symbol: 'circle',
symbolSize: 10,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#4182FF' },
{ offset: 1, color: 'rgba(0,255,255,0)' },
],
},
},
itemStyle: { borderColor: '#00FFFF', borderWidth: 4, color: '#142745' },
lineStyle: { color: '#00FFFF', width: 3 },
},
{
name: '出园',
type: 'line',
data: [2, 8, 3, 7, 1, 9, 6],
smooth: true,
symbol: 'circle',
symbolSize: 10,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#4182FF' },
{ offset: 1, color: 'rgba(0,255,255,0)' },
],
},
},
itemStyle: { borderColor: '#4182FF', borderWidth: 4, color: '#142745' },
lineStyle: { color: '#4182FF', width: 3 },
},
],
});
export const renderEcharts = (element: Ref<HTMLDivElement>) => {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(element.value, null, {
renderer: 'svg',
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option.value);
};

2
src/layout/components/Footer/index.vue
View File

@ -9,7 +9,7 @@
class="rectangle w-[138px] h-[125px] flex-y-center bg-[#0E094D55]" class="rectangle w-[138px] h-[125px] flex-y-center bg-[#0E094D55]"
> >
<img alt="车辆管理" src="@/assets/images/layout/footer-39.png" /> <img alt="车辆管理" src="@/assets/images/layout/footer-39.png" />
<span class="text-white font-100">车辆管理</span> <span class="font-size-[15px] font-100 text-white">车辆管理</span>
</li> </li>
</ul> </ul>
</footer> </footer>

10
src/layout/components/NavBar/index.vue
View File

@ -11,11 +11,11 @@
<div class="bar-op flex items-center h-[36px]"> <div class="bar-op flex items-center h-[36px]">
<ul class="float-left flex-x-around w-[148px]"> <ul class="float-left flex-x-around w-[148px]">
<li><img alt="icon-1" src="@/assets/images/layout/icon-1.png" /></li> <li><img alt="icon-1" class="w-[36px]" src="@/assets/images/layout/icon-1.png" /></li>
<li><img alt="icon-2" src="@/assets/images/layout/icon-2.png" /></li> <li><img alt="icon-2" class="w-[36px]" src="@/assets/images/layout/icon-2.png" /></li>
<li><img alt="icon-3" src="@/assets/images/layout/icon-3.png" /></li> <li><img alt="icon-3" class="w-[36px]" src="@/assets/images/layout/icon-3.png" /></li>
</ul> </ul>
<span class="float-left c-primary">王菠萝</span> <span class="float-left font-size-[12px] c-primary">王菠萝</span>
</div> </div>
</header> </header>
</template> </template>
@ -42,7 +42,7 @@ header {
h2 { h2 {
font-size: 24px; font-size: 24px;
line-height: 45px; line-height: 45px;
color: var(); font-weight: lighter;
} }
} }

4
src/layout/index.vue
View File

@ -7,13 +7,13 @@ import NavBar from '@/layout/components/NavBar/index.vue';
<template> <template>
<div class="layout w-full h-full"> <div class="layout w-full h-full">
<div class="arrow left-[38px]"> <div class="arrow left-[38px]">
<img alt="左箭头" src="@/assets/images/layout/arrow/arrow-left.png" /> <img alt="左箭头" class="w-[65px]" src="@/assets/images/layout/arrow/arrow-left.png" />
</div> </div>
<NavBar /> <NavBar />
<AppMain /> <AppMain />
<Footer /> <Footer />
<div class="arrow right-[38px]"> <div class="arrow right-[38px]">
<img alt="左箭头" src="@/assets/images/layout/arrow/arrow-right.png" /> <img alt="左箭头" class="w-[65px]" src="@/assets/images/layout/arrow/arrow-right.png" />
</div> </div>
</div> </div>
</template> </template>

4
src/main.ts
View File

@ -9,4 +9,6 @@ import plugins from '@/plugins';
import App from './App.vue'; import App from './App.vue';
createApp(App).use(plugins).mount('#app'); const app = createApp(App);
app.use(plugins).mount('#app');