From a67a74d33c78ac0a5fcc7854d6f707c82b10fbac Mon Sep 17 00:00:00 2001 From: Bunny <1319900154@qq.com> Date: Wed, 26 Feb 2025 22:04:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E5=B1=8F=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 +- package.json | 3 +- pnpm-lock.yaml | 40 ++++++- src/assets/images/bg/bg-frame-2.png | Bin 0 -> 785 bytes src/assets/images/bg/bg-frame-3.png | Bin 0 -> 967 bytes src/layout/components/AppMain/MainLeft.vue | 40 +++---- src/layout/components/AppMain/MainRight.vue | 83 ++++++++----- .../AppMain/components/MainCenterPercent.vue | 12 +- src/layout/components/AppMain/data.ts | 111 ++++++++++++++++++ src/layout/components/Footer/index.vue | 2 +- src/layout/components/NavBar/index.vue | 10 +- src/layout/index.vue | 4 +- src/main.ts | 4 +- 13 files changed, 245 insertions(+), 72 deletions(-) create mode 100644 src/assets/images/bg/bg-frame-2.png create mode 100644 src/assets/images/bg/bg-frame-3.png create mode 100644 src/layout/components/AppMain/data.ts diff --git a/index.html b/index.html index ec3d116..49b9baf 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - - - - %VITE_APP_TITLE% + + + + %VITE_APP_TITLE%
diff --git a/package.json b/package.json index 5c76db1..523a728 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "axios": "^1.7.9", "boxen": "^8.0.1", "dayjs": "^1.11.13", - "echarts": "^5.5.1", + "echarts": "^5.6.0", "eslint": "^9.9.1", "eslint-config-prettier": "^9.1.0", "eslint-define-config": "^2.1.0", @@ -50,6 +50,7 @@ "vite-plugin-remove-console": "^2.2.0", "vite-plugin-vue-inspector": "^5.3.1", "vue": "^3.5.13", + "vue-echarts": "^7.0.3", "vue-eslint-parser": "^9.4.3", "vue-router": "^4.4.3", "vue-types": "^6.0.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4fabb79..75ddf29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,7 +39,7 @@ importers: specifier: ^1.11.13 version: 1.11.13 echarts: - specifier: ^5.5.1 + specifier: ^5.6.0 version: 5.6.0 eslint: specifier: ^9.9.1 @@ -122,6 +122,9 @@ importers: vue: specifier: ^3.5.13 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: specifier: ^9.4.3 version: 9.4.3(eslint@9.21.0(jiti@2.4.2)) @@ -2464,6 +2467,17 @@ packages: vscode-uri@3.1.0: 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: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} engines: {node: '>=12'} @@ -2475,6 +2489,16 @@ packages: '@vue/composition-api': 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: resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==} engines: {node: ^14.17.0 || >=16.0.0} @@ -4916,10 +4940,24 @@ snapshots: 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)): dependencies: 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)): dependencies: debug: 4.4.0 diff --git a/src/assets/images/bg/bg-frame-2.png b/src/assets/images/bg/bg-frame-2.png new file mode 100644 index 0000000000000000000000000000000000000000..db4055701969ce0c7a69f23cba6e8ac8318fb9e9 GIT binary patch literal 785 zcmV+s1Md8ZP)L~I>bo5aAVlRpj1VzjwBSFv}w0dwo z2u+e;pk^TiTCBJJAw;DZ2BAU&A3_LUM3@leLj|Q^52J8yw5>b6oh#h%&wZ8i)9Al$?Zd2x&RC)` z5&u0r6&V@X*Uj_5!YhCPKnMneCjbbAR{#Nk5DW-Uz!}2DWY?cmD!efDe*DMBrB&f7Awb#$ z4ixM8XRcmqJ*XE|=6O6%|89EkuwX3tP-Er|+x7CNFEg{R-p)vy0*nbwpec0iO7US| z^?wnjHp%#X<2A-uk$rI^XQW5_B7H)YVsmK|Xuo&s{%&(DxVX+|8g{N1;h`RBQ-Cp{ z30%J0J?L_~^KB8PX(sqP;resNv<~}XeEH`>^wG<4p-Qp2vzvRt09#-SF9r@m*61eBKoo24>8DPj6MrN!( z(kqp7m?4vZ;{XHyJUGCoXl~moG0H`zFDZpMj&fN}JNZy+CYcJ)Ph+T6%H|1~vW8mE zb~LwnOA9MpF3+>9<{iLq(GV&~6)E_Ri7HJK_6Z0Hm!pa_K&VR7gna@+!sVzU4G^l* zG-02BkZ?JwNCSkbG)>qiAS7IlD$)RIO81G z6r0p8#NzL&nmAn{`SYcv8NZo%WOSFU*l_l2LUK*@yn{~H*M0h1XMg{DvA~^!&;Qo# zkE^KKcYa1<{KS%r(d(~GT6X+ZaozD&R=yI(Jc-$>ZyrfHVgBw;yQTfHOGg(5>HUB6 zwzpcJ@5{3vk0TDmJ;+HpQvNE);KQ$1FO4S%cyUBB2yxAnHNU%?L8XQNka$DOAwdNo zlbIUK4DCdf;C<0IZ&gjH`ctF#|L^f_AEt0Plr`S_{CpR)vGBvgv2$&gJ^lIS(L0IF z@^AZ%jy*bi&3=0LJ(cBY`zORQ9&OPx*t5l;a?SUY|MLVi-48YCCWe1LT(x$W_51x| zqO(NI)ps9wvE5%k`t(MRWhwJ(Z`GfT-C^Ta#wsGb>ww3rziX~uym*)Apyl~n|2e%i zkM%fwK71%j@3WrCECGn-qwU}S-dot1czILb4JNTzw(d>VnRSPfrz|hOX3nPldiMTF z{*S$<-rs4T67FEADfZzm-`DhK$^3H+dW(;rOWpN1QS*{wiy8No?D%*`r`&?mks?B; zPP(oRnGm3Tr)XMhOHt89Em4&#T-)cQDlVK8v&D;*bL%19^hgg4b@8=9j!tWVTEqxw z`RecVywd4(XkF0Be4ckV&I>PF_E`R-&B8D}4$a-~D-U_>`f{*t)rTr$&UtIZ4!O*p zZ8mSsKBI!uCDHCX4|40BOR`8_#9L?CwQZiEAV_cM2AE#0(NV2`D$d&-gp+Z=9R zF0&~2;oW?vHtM`=ao!q}b2BXR6K-t1e_+B9X^AIl9tv|mv$Z`qlX9bY&*tY7Qgw|F z%N`Zi5n@;!#kxnp(=>_Yvy)R(K -
    -
  • - car-1 -

    入卡口（西北门）

    +
      +
    • + car-1 +

      入卡口（西北门）

      畅通
      • -
    • - car-1 -

      入卡口（东北门）

      +
    • + car-1 +

      入卡口（东北门）

      畅通
      • -
    • - car-1 -

      入卡口（东北门）

      +
    • + car-1 +

      入卡口（东北门）

      拥堵
      • -
    • - car-1 -

      入卡口（东南门）

      +
    • + car-1 +

      入卡口（东南门）

      畅通
    @@ -49,14 +49,12 @@ .left { transform: rotateY(180deg); - .car-list { - li { - width: 330px; - height: 60px; - margin: 0 0 9px 0; - background: url('@/assets/images/bg/bg-frame.png') no-repeat center; - background-size: cover; - } + .car-item { + width: 330px; + height: 61px; + margin: 0 0 9px 0; + background: url('@/assets/images/bg/bg-frame.png') no-repeat center; + background-size: cover; } .suggest { diff --git a/src/layout/components/AppMain/MainRight.vue b/src/layout/components/AppMain/MainRight.vue index 1cc23a8..92242b0 100644 --- a/src/layout/components/AppMain/MainRight.vue +++ b/src/layout/components/AppMain/MainRight.vue @@ -1,4 +1,14 @@ - + - + diff --git a/src/layout/components/AppMain/components/MainCenterPercent.vue b/src/layout/components/AppMain/components/MainCenterPercent.vue index 5b22441..db42ef9 100644 --- a/src/layout/components/AppMain/components/MainCenterPercent.vue +++ b/src/layout/components/AppMain/components/MainCenterPercent.vue @@ -8,14 +8,14 @@ import ArrowUp from '@/assets/images/layout/arrow/arrow-up.png'; const calPercentItem: Element = (percent: number) => { return percent > 25 ? ( -
    - arrow - {percent}% +
    + arrow + {percent}%
    ) : ( -
    - arrow - {percent}% +
    + arrow + {percent}%
    ); }; diff --git a/src/layout/components/AppMain/data.ts b/src/layout/components/AppMain/data.ts new file mode 100644 index 0000000..3c71e49 --- /dev/null +++ b/src/layout/components/AppMain/data.ts @@ -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({ + 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) => { + // 基于准备好的dom，初始化echarts实例 + const myChart = echarts.init(element.value, null, { + renderer: 'svg', + }); + + // 使用刚指定的配置项和数据显示图表。 + myChart.setOption(option.value); +}; diff --git a/src/layout/components/Footer/index.vue b/src/layout/components/Footer/index.vue index 9a9b03e..0454da7 100644 --- a/src/layout/components/Footer/index.vue +++ b/src/layout/components/Footer/index.vue @@ -9,7 +9,7 @@ class="rectangle w-[138px] h-[125px] flex-y-center bg-[#0E094D55]" > 车辆管理 - 车辆管理 + 车辆管理
diff --git a/src/layout/components/NavBar/index.vue b/src/layout/components/NavBar/index.vue index 8afe163..424e5dd 100644 --- a/src/layout/components/NavBar/index.vue +++ b/src/layout/components/NavBar/index.vue @@ -11,11 +11,11 @@
    -
  • icon-1
    • -
  • icon-2
    • -
  • icon-3
    • +
  • icon-1
    • +
  • icon-2
    • +
  • icon-3
- 王菠萝 + 王菠萝
@@ -42,7 +42,7 @@ header { h2 { font-size: 24px; line-height: 45px; - color: var(); + font-weight: lighter; } } diff --git a/src/layout/index.vue b/src/layout/index.vue index 3e369aa..64d8f21 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -7,13 +7,13 @@ import NavBar from '@/layout/components/NavBar/index.vue'; diff --git a/src/main.ts b/src/main.ts index 27f5259..a55041b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,4 +9,6 @@ import plugins from '@/plugins'; import App from './App.vue'; -createApp(App).use(plugins).mount('#app'); +const app = createApp(App); + +app.use(plugins).mount('#app');