From 0f5ad0a8986a349d09b903958a9c5b4e40204c3a Mon Sep 17 00:00:00 2001 From: wangqiujuan0808 <578331299@qq.com> Date: Tue, 31 Oct 2023 17:59:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 13 ++++---- package.json | 1 + src/assets/index.png | Bin 0 -> 2836 bytes src/components/Bindex.vue | 14 ++++----- src/components/Cindex.vue | 18 +++++------ src/components/Gindex.vue | 20 ++++++------ src/components/Header.vue | 62 +++++++++++++++++++------------------- src/components/Index.vue | 52 +++++++++++++++----------------- src/components/Liquid.vue | 57 ++++++++++++++++++++++------------- src/components/Menus.vue | 3 ++ src/components/Sindex.vue | 24 +++++++-------- src/components/Windex.vue | 14 ++++----- src/css/index.scss | 10 ++++++ src/utils/dayjs.js | 8 +++++ src/views/Login.vue | 6 ++-- 15 files changed, 169 insertions(+), 133 deletions(-) create mode 100644 src/assets/index.png create mode 100644 src/utils/dayjs.js diff --git a/package-lock.json b/package-lock.json index c380bba..e0d7f22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@sentry/browser": "^6.3.1", "@sentry/tracing": "^6.3.1", "axios": "^0.21.1", + "dayjs": "^1.11.10", "echarts": "^5.4.2", "element-plus": "^2.3.4", "js-base64": "^3.7.5", @@ -2512,9 +2513,9 @@ "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==" }, "node_modules/dayjs": { - "version": "1.11.7", - "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", - "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==" + "version": "1.11.10", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", + "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==" }, "node_modules/debug": { "version": "2.6.9", @@ -8915,9 +8916,9 @@ "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==" }, "dayjs": { - "version": "1.11.7", - "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", - "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==" + "version": "1.11.10", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", + "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==" }, "debug": { "version": "2.6.9", diff --git a/package.json b/package.json index 45d9aad..e6c8c00 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@sentry/browser": "^6.3.1", "@sentry/tracing": "^6.3.1", "axios": "^0.21.1", + "dayjs": "^1.11.10", "echarts": "^5.4.2", "element-plus": "^2.3.4", "js-base64": "^3.7.5", diff --git a/src/assets/index.png b/src/assets/index.png new file mode 100644 index 0000000000000000000000000000000000000000..3bce389941710df94aec27cb11c1c1c5eea5b10e GIT binary patch literal 2836 zcmV+v3+wcWP)Px<&PhZ;RCr$PTYZpJ#S#DY+XWFxj2bOJh+4S&-f|X}@z}Q<@^Ksx0SluQ{Env7 zs3FFvgp{$8N-Bw!(rAJqY7A;(Dfy7Z1fx-+Vosyp?OV?1DR(=wi((`c7V!%?guC6> zsd;bSal7o@?s6YOvGdp6%)FlN-*oqM_skLw@J0u?{HOs?(|}J1fr%5Rp1}FsHyNlS zpd-)jU75_fH%6MBPs9XF(>|MkKL8k0ATaUyLZnuWBnTr8fMvzc1JlD=$ZZ6^gF)8; zI8^m9aE_GD>X8CrL;qYljnoVF$p9#=i%mANxY^W)Mvi!g5OzX`INtt_Ad$ehW6}P*QHt6Y;u#g^HKY55Ed8HBH-GzbnevJF%L{n z>N(q8Hs)k9t;wMVp>hDC_Bs&iJq8GBH@dw)8Dkho=>F$~a2icB{%ZnVrI{6>FgJE| zq_%j1nYMC-R|LQSxSRlW_8;wA2^NctbC3En7KtxpgZ`%Jd}z2vQ)jmI<)H+jasW&_ z3*aOGtA%vVDNuFOR*tF(Kqo+L0DoDJx08XUblQ2>7e4V&Fs7ova1S-T{$}zW%bIL~ z4Q1z_^?{@-gh>8IYmy3@{;KJ1V_=4q&Z|QOLNx$v05Ac}cZf{th5`UA`yMc^E@G;E zS9kZ!jT>M2ps}$ryk+x_RVv8QJHH;tH%i&|zu+6wtd9{w&jUCTfD7VFg-HF*HwVxB z{s1|GXh^49H-}qnvpqLr|J%cXriPMwgK9&1oTU%St`0)(~ zA98T+2@o}UL(I)xABPtxU@B#_C^Rm}4=gLb7)*C-TAT7NH3Ua&rSyY&dkMgaOJnB7 zmAi$Ghz*)ZX@FT8^<(W)ModN~TH0|j`SffEueq?r#Bw3byBN(^%T82z$6wjy@gz5nR zcJ>xBh<__Y>T+at5446(U2Bxn>F*9)!gMU(LmxyUmI+J{4Pr&RZF#M#5 zu!9-%q;&qJ{w>TkD4ln^XJoVg-dd>^>GUfJygf9L7mv`ngqkV`FWS@v6C9M9ktQl<(b zN6WO82F(WHDIpv$rYKD#u9Bq30E7V)Zz`v5mT9X{_B;R|x$K@A)COX)_*8aDg}_R8ZWS5lJ7sAV7FXYO z*_fWmw03&@nTZt)_RNrh)-hvt&IuyZV!9;(@CqN~DzAHtPlT_LGUWvxv6yYL3k8fG zqaR3_{82fEy>I*4df)^ZhxQ(+gdMpY$2M$8yR2aNoTAW1S!`vC$x zN36p0L$>GVw{33QQ5FF0(O(B}l&?m+Q`1N!Q5Q1!pTQV`m!@UvXO%D;%(1M*bt06T_q*v;AbhJ3FK*r&dZuZAm4JJFZN)px?$q6- zH+vNb=lWxOm6R!OUeHPbpww?XX!kj<<8tMt5A)b%x;mXnuGkx9hwB?FYJUxcUupVp z8=>&@&d!(K@;5Ku<_Bo>q>xEJGu5pW0IJYn0eC`4=Si+83TLOJ`CK43{8- zp&N_Z*D|43D;fDCRnaA8+K>D7hzbBO&BW~l{+4D$MP$bXOfmQ-DN}yzy^l82w3n;m zs?Q#821v=^$Upk@L!A5e3G2l6SP%VAz=X)tj>EY>iI-MmVvr{oe+dM`VR1u#u}2?1V#WuF0H zC?dg=PKtjn9HRgDX4L;fNYhMQLtyWTjF67H1}|A%9>^;8$xyfkKurT`CQ$PMH78g* z1@_Zpu)e;2)b@`;-m6dsmPqLYuf8h|Qb+U{H0_@=px!ZV71Hrr^GSI))j>5G-Na)D6acRxW*znlPl$Ll84AD<70)H>?LsdukY?)!=WFwOXt z1oCcz)YTJ!RR&P@@qwD}f=3fb-PC%|U>WWLDc1#$pbPl3Ec*&D)LUZJ-UQQ1B6iCO z;n5`=4aSAR`$95|S?P4Ey2Ks42KZW#xC`K~mm^qiJn!}#)!!SQx=8%wyg}+>c2KPv zQ>{n?0&XlTJ`XMy>-T^DOU}w$JA;>$`vr*pUC|Hq!|aNwYt2-@Gg?;7W9q5^sF<7m mXkrb3{b;j>h1COI1O5+K4iB4?*E?+h0000

生物滞留区域面积

- 75 + 75 ㎡

滞留系统液位

- 323 + 323 mm

渗透量

- 1356 + 1356 m³

COD

- 19 + 19 mg/L

氨氮

- 8 + 8 mg/L

SS

- 9 + 9 mg/L
@@ -104,7 +104,7 @@ text-align: center; padding: 10px; border-radius: 10px; - font-size: 26px; + font-size: 20px; line-height: 45px; } } diff --git a/src/components/Cindex.vue b/src/components/Cindex.vue index 1690fe4..0a33f72 100644 --- a/src/components/Cindex.vue +++ b/src/components/Cindex.vue @@ -9,42 +9,42 @@

地块面积

- 730 + 730 ㎡

地块调蓄容积

- 500 + 500 m³

调蓄池液位

- 3.6 + 3.6 m

溢流量

- 1.25 + 1.25 L/s

COD

- 8 + 8 mg/L

氨氮

- 12.5 + 12.5 mg/L
-

ss

- 20.7 +

SS

+ 20.7 mg/L

地块剩余调蓄容积

- 316 + 316 m³
diff --git a/src/components/Gindex.vue b/src/components/Gindex.vue index d44ed46..160d3a5 100644 --- a/src/components/Gindex.vue +++ b/src/components/Gindex.vue @@ -9,42 +9,42 @@

径流系数

- 0.6 + 0.6

蒸腾量

- 32% - + 32 + %

COD

- 27 + 27 mg/L

氨氮

- 11 + 11 mg/L

Ss

- 6 + 6 mg/L

屋面温度 无绿化

- 23 + 23 ℃

屋面温度 有绿化

- 19 + 19 ℃

热岛减率

- 21% - + 21 + %
diff --git a/src/components/Header.vue b/src/components/Header.vue index 733a333..e29dbb0 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -5,26 +5,13 @@ {{ name }}
{{modelName}}
-
- - -
-

登录名：{{ userInfo && userInfo.loginUserName || '' }}

-

昵称：{{ userInfo && userInfo.nickName || '' }}

- 退出 -
- +
+

+ {{ currentTime }} +

+

登录名： admin

+ + 退出
@@ -35,6 +22,7 @@ import { useRouter } from 'vue-router' import { localRemove, pathMap } from '@/utils' import myApi from '@/api/myApi.js' import {useStore} from 'vuex'; +import dayjs from 'dayjs'; export default { name: 'Header', setup() { @@ -44,27 +32,30 @@ export default { name: 'dashboard', userInfo: null, hasBack: false, - modelName: '' + modelName: '', + currentTime: '', + interval: '' }) onMounted(() => { - const pathname = window.location.hash.split('/')[1] || '' - if (!['login'].includes(pathname)) { - // getUserInfo() - } + // const pathname = window.location.hash.split('/')[1] || '' + // if (!['login'].includes(pathname)) { + + // } + state.interval = setInterval(updateTime, 1000) }) const getUserInfo = async () => { - const userInfo = await myApi.getUserInfo(); - state.userInfo = userInfo + } const logout = async () => { - await myApi.logout(); - localRemove('token') - window.location.reload() + router.push('/login') } const back = () => { router.push('/home') store.commit("setModelName", ''); } + const updateTime = () => { + state.currentTime = dayjs().format('YYYY年 MM月 DD日 HH:mm:ss') + } router.afterEach((to) => { console.log('to', to) const { id } = to.query @@ -99,6 +90,15 @@ export default { border-radius: 50px; margin-right: 10px; } + .right { + display: flex; + justify-content: end; + align-items: center; + cursor: pointer; + img { + width: 32px; + } + } .right > div > .icon{ font-size: 18px; margin-right: 6px; @@ -116,7 +116,7 @@ export default { } .popper-user-box .nickname { position: relative; - color: #ffffff; + color: #000; } .popper-user-box .nickname .logout { position: absolute; diff --git a/src/components/Index.vue b/src/components/Index.vue index 666fe70..99c64f0 100644 --- a/src/components/Index.vue +++ b/src/components/Index.vue @@ -10,11 +10,11 @@

节水量

- 4.00m³ + 4.00m³

节碳量

- 0.67KG + 0.67kg
@@ -30,16 +30,14 @@
-

原水箱液位

-

0.39m

-

历史最高：0.50m

-

历史最低：0.24m

+

原水箱液位：0.39m

+

历史最高：0.50m

+

历史最低：0.24m

-

净水箱液位

-

0.81m

-

历史最高：1.63m

-

历史最低：0.48m

+

净水箱液位：0.81m

+

历史最高：1.63m

+

历史最低：0.48m

@@ -56,23 +54,23 @@

UF产水

-

瞬时流量：0.00 m³/H

-

累计流量：4m³

+

瞬时流量：0.00 m³/H

+

累计流量：4m³

自来水前端

-

瞬时流量：0.00 m³/H

-

累计流量：4m³

+

瞬时流量：0.00 m³/H

+

累计流量：4m³

供水

-

瞬时流量：0.00 m³/H

-

累计流量：4m³

+

瞬时流量：0.00 m³/H

+

累计流量：4m³

自来水后端

-

瞬时流量：0.00 m³/H

-

累计流量：4m³

+

瞬时流量：0.00 m³/H

+

累计流量：4m³

@@ -89,17 +87,17 @@

原水水质

-

余氯：0.00 mg/L

-

浊度：1.63 mg/L

-

氨氮：1.41 mg/L

-

COD：4.80 mg/L

+

余氯：0.00 mg/L

+

浊度：1.63 mg/L

+

氨氮：1.41 mg/L

+

COD：4.80 mg/L

净水水质

-

余氯：-0.73 mg/L

-

浊度：3.56 mg/L

-

氨氮：41.89 mg/L

-

COD：3.53 mg/L

+

余氯：-0.73 mg/L

+

浊度：3.56 mg/L

+

氨氮：41.89 mg/L

+

COD：3.53 mg/L

@@ -174,7 +172,7 @@ text-align: left; padding: 10px; border-radius: 10px; - + font-size: 16px; } } } diff --git a/src/components/Liquid.vue b/src/components/Liquid.vue index 972fdd6..f0186ff 100644 --- a/src/components/Liquid.vue +++ b/src/components/Liquid.vue @@ -4,23 +4,25 @@
-
+
-
-
{{ item.title }}
-
- +
+
+
{{ item.title }}
+
+ +
+
+
+
+
+
{{ item.title }}
+
+ +
@@ -57,7 +59,7 @@ export default { color: ["#308286", "#eafbf7"], } ], - dataList: [ + olddataList: [ { title: "原水箱液位数据（m）:", data: [ @@ -90,7 +92,9 @@ export default { value: "80", }, ], - }, + } + ], + puredataList: [ { title: "净水箱液位数据（m）:", data: [ @@ -126,7 +130,7 @@ export default { } ], }); - onMounted(async () => {}); + onMounted(async () => { }); return { ...toRefs(state), @@ -142,6 +146,7 @@ export default { display: flex; justify-content: space-between; padding: 10px; + .left-div { width: 75%; height: 100%; @@ -149,20 +154,30 @@ export default { flex-wrap: wrap; align-items: center; justify-content: space-between; + .echart-content { width: 100%; height: 46%; } } + .right-div { width: 22%; height: 100%; + .height46 { + height: 46%; + display: flex; + flex-direction: column; + justify-content: end; + padding: 10px; + } } + .date { - width: 100%; - display: flex; - justify-content: end; - height: 3%; -} + width: 100%; + display: flex; + justify-content: end; + height: 3%; + } } diff --git a/src/components/Menus.vue b/src/components/Menus.vue index 3d8b1c7..5a39e06 100644 --- a/src/components/Menus.vue +++ b/src/components/Menus.vue @@ -67,6 +67,9 @@ ul { &.active-menu { background: #a7dcf5; } + &:hover { + transform: scale(1.1); + } } } diff --git a/src/components/Sindex.vue b/src/components/Sindex.vue index 2d4931a..d6aa387 100644 --- a/src/components/Sindex.vue +++ b/src/components/Sindex.vue @@ -8,22 +8,22 @@

透水铺砖储水量

- 200 + 200 m³

透水铺砖表面温度

- 16.5 + 16.5 ℃

热岛消减率

- 19.6 + 19.6 %

孔隙率

- 10 + 10 %
@@ -35,32 +35,32 @@

透水铺装面积

- 500 + 500 ㎡

入渗系统面积

- 437 + 437 ㎡

透水系数

- 10 + 10 mm/min

入渗系数

- 1.3 + 1.3 mm/min

透水层厚度

- 300 + 300 mm

渗透量

- 362 + 362 m³
@@ -126,7 +126,7 @@ text-align: center; padding: 10px; border-radius: 10px; - font-size: 26px; + font-size: 20px; line-height: 45px; } } @@ -161,7 +161,7 @@ text-align: center; padding: 10px; border-radius: 10px; - font-size: 26px; + font-size: 20px; line-height: 45px; } } diff --git a/src/components/Windex.vue b/src/components/Windex.vue index 3718cc8..565e24a 100644 --- a/src/components/Windex.vue +++ b/src/components/Windex.vue @@ -9,32 +9,32 @@

降雨量

- 12 + 12 mm/s

温度

- 23 + 23 ℃

空气湿度

- 22 + 22 %

蒸发量

- 9 + 9 mm

土壤湿度

- 56 + 56 %

风速

- 3 + 3 m/s
@@ -104,7 +104,7 @@ text-align: center; padding: 10px; border-radius: 10px; - font-size: 26px; + font-size: 20px; line-height: 45px; } } diff --git a/src/css/index.scss b/src/css/index.scss index 2435bf1..47c7ea7 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -64,6 +64,16 @@ s { { margin-right: 20px; } +.mr10 +{ + margin-right: 10px; +} +.font30 { + font-size: 30px; +} +.font26 { + font-size: 26px; +} .btns { text-align: center; } diff --git a/src/utils/dayjs.js b/src/utils/dayjs.js new file mode 100644 index 0000000..ea88657 --- /dev/null +++ b/src/utils/dayjs.js @@ -0,0 +1,8 @@ +import dayjs from 'dayjs' +import 'dayjs/locale/zh-cn' // 导入中文语言包 +import weekOfYear from 'dayjs/plugin/weekOfYear' +import weekday from 'dayjs/plugin/weekday' + +dayjs.extend(weekOfYear) +dayjs.extend(weekday) +dayjs.locale('zh-cn') // 设置语言为中文 diff --git a/src/views/Login.vue b/src/views/Login.vue index 482780d..df6c7f6 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -4,16 +4,16 @@
-
海绵城市智能监测井
+
世博浦西区活水公园