wangqiujuan0808
/
hsgy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改问题

dev_zt
wangqiujuan0808 2023-10-31 17:59:16 +08:00
parent ec7afcfee1
commit 0f5ad0a898
15 changed files with 169 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

BIN
src/assets/index.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

14
src/components/Bindex.vue
View File

@ -9,32 +9,32 @@
<div class="one-card-content">
<div>
<p>生物滞留区域面积</p>
<font>75</font>
<font class="font30">75</font>
<font>㎡</font>
</div>
<div>
<p>滞留系统液位</p>
<font>323</font>
<font class="font30">323</font>
<font>mm</font>
</div>
<div>
<p>渗透量</p>
<font>1356</font>
<font class="font30">1356</font>
<font>m³</font>
</div>
<div>
<p>COD</p>
<font>19</font>
<font class="font30">19</font>
<font>mg/L</font>
</div>
<div>
<p>氨氮</p>
<font>8</font>
<font class="font30">8</font>
<font>mg/L</font>
</div>
<div>
<p>SS</p>
<font>9</font>
<font class="font30">9</font>
<font>mg/L</font>
</div>
</div>
@ -104,7 +104,7 @@
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 26px;
font-size: 20px;
line-height: 45px;
}
}

18
src/components/Cindex.vue
View File

@ -9,42 +9,42 @@
<div class="one-card-content">
<div>
<p>地块面积</p>
<font>730</font>
<font class="font30">730</font>
<font>㎡</font>
</div>
<div>
<p>地块调蓄容积</p>
<font>500</font>
<font class="font30">500</font>
<font>m³</font>
</div>
<div>
<p>调蓄池液位</p>
<font>3.6</font>
<font class="font30">3.6</font>
<font>m</font>
</div>
<div>
<p>溢流量</p>
<font>1.25</font>
<font class="font30"> 1.25</font>
<font>L/s</font>
</div>
<div>
<p>COD</p>
<font>8</font>
<font class="font30">8</font>
<font>mg/L</font>
</div>
<div>
<p>氨氮</p>
<font>12.5</font>
<font class="font30">12.5</font>
<font>mg/L</font>
</div>
<div>
<p>ss</p>
<font>20.7</font>
<p>SS</p>
<font class="font30">20.7</font>
<font>mg/L</font>
</div>
<div>
<p>地块剩余调蓄容积</p>
<font>316</font>
<font class="font30">316</font>
<font>m³</font>
</div>
</div>

20
src/components/Gindex.vue
View File

@ -9,42 +9,42 @@
<div class="one-card-content">
<div>
<p>径流系数</p>
<font>0.6</font>
<font class="font30">0.6</font>
</div>
<div>
<p>蒸腾量</p>
<font>32%</font>
<font class="font30">32</font>
<font>%</font>
</div>
<div>
<p>COD</p>
<font>27</font>
<font class="font30">27</font>
<font>mg/L</font>
</div>
<div>
<p>氨氮</p>
<font>11</font>
<font class="font30">11</font>
<font>mg/L</font>
</div>
<div>
<p>Ss</p>
<font>6</font>
<font class="font30">6</font>
<font>mg/L</font>
</div>
<div>
<p>屋面温度 无绿化</p>
<font>23</font>
<font class="font30">23</font>
<font>℃</font>
</div>
<div>
<p>屋面温度 有绿化</p>
<font>19</font>
<font class="font30">19</font>
<font>℃</font>
</div>
<div>
<p>热岛减率</p>
<font>21%</font>
<font class="font30">21</font>
<font>%</font>
</div>
</div>
</div>

62
src/components/Header.vue
View File

@ -5,26 +5,13 @@
<span style="font-size: 20px">{{ name }}</span>
</div>
<div class="div30" style="font-size: 24px;text-align: center;">{{modelName}}</div>
<div class="right div30">
<el-popover
placement="bottom"
:width="320"
trigger="click"
popper-class="popper-user-box"
>
<template #reference>
<div class="author">
<i class="icon el-icon-s-custom" />
{{ userInfo && userInfo.nickName || '' }}
<i class="el-icon-caret-bottom" />
</div>
</template>
<div class="nickname">
<p>登录名：{{ userInfo && userInfo.loginUserName || '' }}</p>
<p>昵称：{{ userInfo && userInfo.nickName || '' }}</p>
<el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
</div>
</el-popover>
<div class="right div30 ">
<p class="mr10">
{{ currentTime }}
</p>
<p class="mr10">登录名： admin</p>
<img src="../assets/index.png" alt="" class="mr10" @click="back"/>
<el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
</div>
</div>
</template>
@ -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;

52
src/components/Index.vue
View File

@ -10,11 +10,11 @@
<div class="one-card-content">
<div>
<p>节水量</p>
<font>4.00m³</font>
<font><span class="font26">4.00</span>m³</font>
</div>
<div>
<p>节碳量</p>
<font>0.67KG</font>
<font><span class="font26">0.67</span>kg</font>
</div>
</div>
</div>
@ -30,16 +30,14 @@
<div class="one-card-content">
<div>
<p>原水箱液位</p>
<p>0.39m</p>
<p>历史最高：0.50m</p>
<p>历史最低：0.24m</p>
<p>原水箱液位：<span class="font26">0.39</span>m</p>
<p>历史最高：<span class="font26">0.50</span>m</p>
<p>历史最低：<span class="font26">0.24</span>m</p>
</div>
<div>
<p>净水箱液位</p>
<p>0.81m</p>
<p>历史最高：1.63m</p>
<p>历史最低：0.48m</p>
<p>净水箱液位：<span class="font26">0.81</span>m</p>
<p>历史最高：<span class="font26">1.63</span>m</p>
<p>历史最低：<span class="font26">0.48</span>m</p>
</div>
</div>
</div>
@ -56,23 +54,23 @@
<div class="one-card-content">
<div>
<p>UF产水</p>
<p>瞬时流量：0.00 m³/H</p>
<p>累计流量：4m³</p>
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
<p>累计流量：<span class="font26">4</span>m³</p>
</div>
<div>
<p>自来水前端</p>
<p>瞬时流量：0.00 m³/H</p>
<p>累计流量：4m³</p>
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
<p>累计流量：<span class="font26">4</span>m³</p>
</div>
<div class="mt10">
<p>供水</p>
<p>瞬时流量：0.00 m³/H</p>
<p>累计流量：4m³</p>
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
<p>累计流量：<span class="font26">4</span>m³</p>
</div>
<div class="mt10">
<p>自来水后端</p>
<p>瞬时流量：0.00 m³/H</p>
<p>累计流量：4m³</p>
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
<p>累计流量：<span class="font26">4</span>m³</p>
</div>
</div>
</div>
@ -89,17 +87,17 @@
<div class="one-card-content">
<div>
<p>原水水质</p>
<p>余氯：0.00 mg/L</p>
<p>浊度：1.63 mg/L</p>
<p>氨氮：1.41 mg/L</p>
<p>COD：4.80 mg/L</p>
<p>余氯：<span class="font26">0.00</span> mg/L</p>
<p>浊度：<span class="font26">1.63</span> mg/L</p>
<p>氨氮：<span class="font26">1.41</span> mg/L</p>
<p>COD：<span class="font26">4.80</span> mg/L</p>
</div>
<div>
<p>净水水质</p>
<p>余氯：-0.73 mg/L</p>
<p>浊度：3.56 mg/L</p>
<p>氨氮：41.89 mg/L</p>
<p>COD：3.53 mg/L</p>
<p>余氯：<span class="font26">-0.73</span> mg/L</p>
<p>浊度：<span class="font26">3.56</span> mg/L</p>
<p>氨氮：<span class="font26">41.89</span> mg/L</p>
<p>COD：<span class="font26">3.53</span> mg/L</p>
</div>
</div>
</div>
@ -174,7 +172,7 @@
text-align: left;
padding: 10px;
border-radius: 10px;
font-size: 16px;
}
}
}

57
src/components/Liquid.vue
View File

@ -4,23 +4,25 @@
<div class="date">
<Date />
</div>
<div
v-for="(item, index) of listData"
:key="index"
class="echart-content"
>
<div v-for="(item, index) of listData" :key="index" class="echart-content">
<BarEchart :echartData="item" />
</div>
</div>
<div class="right-div">
<div
v-for="(item, index) of dataList"
:key="index"
:class="'div' + index"
>
<div>{{ item.title }}</div>
<div v-for="(it, i) of item.data" :key="i">
<Process :itemData="it"></Process>
<div class="height46">
<div v-for="(item, index) of olddataList" :key="index" :class="'div' + index">
<div>{{ item.title }}</div>
<div v-for="(it, i) of item.data" :key="i">
<Process :itemData="it"></Process>
</div>
</div>
</div>
<div class="height46">
<div v-for="(item, index) of puredataList" :key="index" :class="'div' + index">
<div>{{ item.title }}</div>
<div v-for="(it, i) of item.data" :key="i">
<Process :itemData="it"></Process>
</div>
</div>
</div>
</div>
@ -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%;
}
}
</style>

3
src/components/Menus.vue
View File

@ -67,6 +67,9 @@ ul {
&.active-menu {
background: #a7dcf5;
}
&:hover {
transform: scale(1.1);
}
}
}
</style>

24
src/components/Sindex.vue
View File

@ -8,22 +8,22 @@
<div class="one-card-content">
<div>
<p>透水铺砖储水量</p>
<font>200</font>
<font class="font30">200</font>
<font>m³</font>
</div>
<div>
<p>透水铺砖表面温度</p>
<font>16.5</font>
<font class="font30">16.5</font>
<font>℃</font>
</div>
<div>
<p>热岛消减率</p>
<font>19.6</font>
<font class="font30">19.6</font>
<font>%</font>
</div>
<div>
<p>孔隙率</p>
<font>10</font>
<font class="font30">10</font>
<font>%</font>
</div>
</div>
@ -35,32 +35,32 @@
<div class="one-card-content">
<div>
<p>透水铺装面积</p>
<font>500</font>
<font class="font30">500</font>
<font>㎡</font>
</div>
<div>
<p>入渗系统面积</p>
<font>437</font>
<font class="font30">437</font>
<font>㎡</font>
</div>
<div>
<p>透水系数</p>
<font>10</font>
<font class="font30">10</font>
<font>mm/min</font>
</div>
<div>
<p>入渗系数</p>
<font>1.3</font>
<font class="font30">1.3</font>
<font>mm/min</font>
</div>
<div>
<p>透水层厚度</p>
<font>300</font>
<font class="font30">300</font>
<font>mm</font>
</div>
<div>
<p>渗透量</p>
<font>362</font>
<font class="font30">362</font>
<font>m³</font>
</div>
</div>
@ -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;
}
}

14
src/components/Windex.vue
View File

@ -9,32 +9,32 @@
<div class="one-card-content">
<div>
<p>降雨量</p>
<font>12</font>
<font class="font30">12</font>
<font>mm/s</font>
</div>
<div>
<p>温度</p>
<font>23</font>
<font class="font30">23</font>
<font>℃</font>
</div>
<div>
<p>空气湿度</p>
<font>22</font>
<font class="font30">22</font>
<font>%</font>
</div>
<div>
<p>蒸发量</p>
<font>9</font>
<font class="font30">9</font>
<font>mm</font>
</div>
<div>
<p>土壤湿度</p>
<font>56</font>
<font class="font30">56</font>
<font>%</font>
</div>
<div>
<p>风速</p>
<font>3</font>
<font class="font30">3</font>
<font>m/s</font>
</div>
</div>
@ -104,7 +104,7 @@
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 26px;
font-size: 20px;
line-height: 45px;
}
}

10
src/css/index.scss
View File

@ -64,6 +64,16 @@ s {
{
margin-right: 20px;
}
.mr10
{
margin-right: 10px;
}
.font30 {
font-size: 30px;
}
.font26 {
font-size: 26px;
}
.btns {
text-align: center;
}

8
src/utils/dayjs.js Normal file
View File

@ -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') // 设置语言为中文

6
src/views/Login.vue
View File

@ -4,16 +4,16 @@
<div class="head">
<!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
<div class="name">
<div class="title">海绵城市智能监测井</div>
<div class="title">世博浦西区活水公园</div>
<!-- <div class="tips">Vue3.0 后台管理系统</div> -->
</div>
</div>
<el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form">
<el-form-item label="账号" prop="username">
<el-input type="text" v-model.trim="ruleForm.username" autocomplete="off"></el-input>
<el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" @keyup.enter="submitForm"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model.trim="ruleForm.password" autocomplete="off"></el-input>
<el-input type="password" v-model.trim="ruleForm.password" autocomplete="off" @keyup.enter="submitForm" ></el-input>
</el-form-item>
<el-form-item>
<!-- <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div> -->