dev_zt
parent
942dafaf39
commit
ccbaaed0aa
|
|
@ -5,7 +5,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="index-right">
|
<div class="index-right">
|
||||||
<div class="one-card">
|
<div class="one-card">
|
||||||
<h2>数据显示</h2>
|
|
||||||
<div class="one-card-content">
|
<div class="one-card-content">
|
||||||
<div>
|
<div>
|
||||||
<p>生物滞留区域面积</p>
|
<p>生物滞留区域面积</p>
|
||||||
|
|
@ -86,7 +85,7 @@
|
||||||
}
|
}
|
||||||
.one-card-content {
|
.one-card-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="index-bottom">
|
<div class="index-bottom">
|
||||||
<div class="one-card">
|
<div class="one-card">
|
||||||
<h2>数据显示</h2>
|
|
||||||
<div class="one-card-content">
|
<div class="one-card-content">
|
||||||
<div>
|
<div>
|
||||||
<p>地块面积</p>
|
<p>地块面积</p>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="index-bottom">
|
<div class="index-bottom">
|
||||||
<div class="one-card">
|
<div class="one-card">
|
||||||
<h2>数据显示</h2>
|
|
||||||
<div class="one-card-content">
|
<div class="one-card-content">
|
||||||
<div>
|
<div>
|
||||||
<p>径流系数</p>
|
<p>径流系数</p>
|
||||||
|
|
|
||||||
|
|
@ -1,127 +1,137 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="div30 left" @click="back" style="cursor: pointer">
|
<div class="div30 left" @click="back" style="cursor: pointer">
|
||||||
<i v-if="hasBack" class="el-icon-back" ></i>
|
<i v-if="hasBack" class="el-icon-back"></i>
|
||||||
<span style="font-size: 20px">{{ name }}</span>
|
<span style="font-size: 20px">{{ projectName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="div30" style="font-size: 24px;text-align: center;">{{modelName}}</div>
|
<div class="div30" style="font-size: 24px; text-align: center">
|
||||||
<div class="right div30 ">
|
{{ modelName }}
|
||||||
|
</div>
|
||||||
|
<div class="right div30">
|
||||||
<p class="mr10">
|
<p class="mr10">
|
||||||
{{ currentTime }}
|
{{ currentTime }}
|
||||||
</p>
|
</p>
|
||||||
<p class="mr10">登录名： admin</p>
|
<p class="mr10">登录名： admin</p>
|
||||||
<img src="../assets/index.png" alt="" class="mr10" @click="back"/>
|
<img src="../assets/index.png" alt="" class="mr10" @click="back"/>
|
||||||
<el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
|
<el-icon size="32" class="mr10" @click="setting"><Setting /></el-icon>
|
||||||
|
<el-icon size="32" class="mr10" @click="logout"><SwitchButton /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { onMounted, reactive, toRefs } from 'vue'
|
import { onMounted, reactive, toRefs } from "vue";
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from "vue-router";
|
||||||
import { localRemove, pathMap } from '@/utils'
|
import { localRemove, pathMap } from "@/utils";
|
||||||
import myApi from '@/api/myApi.js'
|
import myApi from "@/api/myApi.js";
|
||||||
import {useStore} from 'vuex';
|
import { useStore } from "vuex";
|
||||||
import dayjs from 'dayjs';
|
import dayjs from "dayjs";
|
||||||
|
import { localSet,localGet } from '@/utils';
|
||||||
export default {
|
export default {
|
||||||
name: 'Header',
|
name: "Header",
|
||||||
setup() {
|
setup() {
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
name: 'dashboard',
|
name: "dashboard",
|
||||||
userInfo: null,
|
userInfo: null,
|
||||||
hasBack: false,
|
hasBack: false,
|
||||||
modelName: '',
|
modelName: "",
|
||||||
currentTime: '',
|
currentTime: "",
|
||||||
interval: ''
|
interval: "",
|
||||||
})
|
projectName: ''
|
||||||
|
});
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// const pathname = window.location.hash.split('/')[1] || ''
|
// const pathname = window.location.hash.split('/')[1] || ''
|
||||||
// if (!['login'].includes(pathname)) {
|
// if (!['login'].includes(pathname)) {
|
||||||
|
|
||||||
// }
|
|
||||||
state.interval = setInterval(updateTime, 1000)
|
|
||||||
})
|
|
||||||
const getUserInfo = async () => {
|
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
state.interval = setInterval(updateTime, 1000);
|
||||||
|
state.projectName = localGet('projectName') || "世博浦西区活水公园";
|
||||||
|
});
|
||||||
|
const getUserInfo = async () => {};
|
||||||
const logout = async () => {
|
const logout = async () => {
|
||||||
router.push('/login')
|
router.push("/login");
|
||||||
}
|
};
|
||||||
const back = () => {
|
const back = () => {
|
||||||
router.push('/home')
|
router.push("/home");
|
||||||
store.commit("setModelName", '');
|
store.commit("setModelName", "");
|
||||||
}
|
};
|
||||||
const updateTime = () => {
|
const updateTime = () => {
|
||||||
state.currentTime = dayjs().format('YYYY年 MM月 DD日 HH:mm:ss')
|
state.currentTime = dayjs().format("YYYY年 MM月 DD日 HH:mm:ss");
|
||||||
|
};
|
||||||
|
|
||||||
|
const setting = () => {
|
||||||
|
router.push("/config");
|
||||||
}
|
}
|
||||||
router.afterEach((to) => {
|
router.afterEach((to) => {
|
||||||
console.log('to', to)
|
console.log("to", to);
|
||||||
const { id } = to.query
|
const { id } = to.query;
|
||||||
state.name = pathMap[to.name];
|
state.name = pathMap[to.name];
|
||||||
state.modelName = store.state.modelName;
|
state.modelName = store.state.modelName;
|
||||||
// state.hasBack = ['level2', 'level3', 'order_detail'].includes(to.name)
|
// state.hasBack = ['level2', 'level3', 'order_detail'].includes(to.name)
|
||||||
})
|
});
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
logout,
|
logout,
|
||||||
back
|
back,
|
||||||
}
|
setting
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.header {
|
.header {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-bottom: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
.div30 {
|
.div30 {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.el-icon-back {
|
}
|
||||||
border: 1px solid #e9e9e9;
|
.el-icon-back {
|
||||||
padding: 4px;
|
border: 1px solid #e9e9e9;
|
||||||
border-radius: 50px;
|
padding: 4px;
|
||||||
margin-right: 10px;
|
border-radius: 50px;
|
||||||
}
|
margin-right: 10px;
|
||||||
.right {
|
}
|
||||||
display: flex;
|
.right {
|
||||||
justify-content: end;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: end;
|
||||||
cursor: pointer;
|
align-items: center;
|
||||||
img {
|
cursor: pointer;
|
||||||
width: 32px;
|
img {
|
||||||
}
|
width: 32px;
|
||||||
}
|
|
||||||
.right > div > .icon{
|
|
||||||
font-size: 18px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
.author {
|
|
||||||
margin-left: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.right > div > .icon {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.author {
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.popper-user-box {
|
.popper-user-box {
|
||||||
background: url('https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png') 50% 50% no-repeat!important;
|
background: url("https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png")
|
||||||
background-size: cover!important;
|
50% 50% no-repeat !important;
|
||||||
border-radius: 0!important;
|
background-size: cover !important;
|
||||||
}
|
border-radius: 0 !important;
|
||||||
.popper-user-box .nickname {
|
}
|
||||||
position: relative;
|
.popper-user-box .nickname {
|
||||||
color: #000;
|
position: relative;
|
||||||
}
|
color: #000;
|
||||||
.popper-user-box .nickname .logout {
|
}
|
||||||
position: absolute;
|
.popper-user-box .nickname .logout {
|
||||||
right: 0;
|
position: absolute;
|
||||||
top: 0;
|
right: 0;
|
||||||
cursor: pointer;
|
top: 0;
|
||||||
}
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,205 +1,134 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="index">
|
<div class="index">
|
||||||
<div class="index-left">
|
<div class="index-left"></div>
|
||||||
|
<div class="index-right">
|
||||||
</div>
|
<div class="one-card">
|
||||||
<div class="index-right">
|
<div class="one-card-content">
|
||||||
<div class="one-card">
|
<div>
|
||||||
<div class="one-card-left">
|
<p>节水量</p>
|
||||||
|
<font><span class="font26">4.00</span>m³</font>
|
||||||
<div class="one-card-content">
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>节水量</p>
|
<p>节碳量</p>
|
||||||
<font><span class="font26">4.00</span>m³</font>
|
<font><span class="font26">0.67</span>kg</font>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>节碳量</p>
|
<p>原水箱液位：<span class="font26">0.39</span>m</p>
|
||||||
<font><span class="font26">0.67</span>kg</font>
|
<p>历史最高：<span class="font26">0.50</span>m</p>
|
||||||
</div>
|
<p>历史最低：<span class="font26">0.24</span>m</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<p>UF产水</p>
|
||||||
|
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||||
|
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>自来水前端</p>
|
||||||
|
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||||
|
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||||
|
</div>
|
||||||
|
<div >
|
||||||
|
<p>供水</p>
|
||||||
|
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||||
|
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||||
|
</div>
|
||||||
|
<div >
|
||||||
|
<p>自来水后端</p>
|
||||||
|
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
||||||
|
<p>累计流量：<span class="font26">4</span>m³</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>原水水质</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>余氯：<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>
|
</div>
|
||||||
<div class="color0 one-card-right">
|
|
||||||
<h3>
|
|
||||||
节水与节碳
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="one-card">
|
|
||||||
<div class="one-card-left">
|
|
||||||
|
|
||||||
<div class="one-card-content">
|
|
||||||
<div>
|
|
||||||
<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>净水箱液位：<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>
|
|
||||||
<div class="color1 one-card-right">
|
|
||||||
<h3>
|
|
||||||
液位
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="one-card">
|
|
||||||
<div class="one-card-left">
|
|
||||||
|
|
||||||
<div class="one-card-content">
|
|
||||||
<div>
|
|
||||||
<p>UF产水</p>
|
|
||||||
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
|
||||||
<p>累计流量：<span class="font26">4</span>m³</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>自来水前端</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>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
|
||||||
<p>累计流量：<span class="font26">4</span>m³</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt10">
|
|
||||||
<p>自来水后端</p>
|
|
||||||
<p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
|
|
||||||
<p>累计流量：<span class="font26">4</span>m³</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="color2 one-card-right">
|
|
||||||
<h3>
|
|
||||||
流量
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="one-card">
|
|
||||||
<div class="one-card-left">
|
|
||||||
|
|
||||||
<div class="one-card-content">
|
|
||||||
<div>
|
|
||||||
<p>原水水质</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>余氯：<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>
|
|
||||||
<div class="color3 one-card-right">
|
|
||||||
<h3>
|
|
||||||
水质
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Menus from "@/components/Menus.vue";
|
import Menus from "@/components/Menus.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
export default {
|
export default {
|
||||||
name: 'index',
|
name: "index",
|
||||||
components: {
|
components: {
|
||||||
Menus
|
Menus,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const state = reactive({
|
const state = reactive({});
|
||||||
})
|
},
|
||||||
}
|
};
|
||||||
}
|
</script>
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.mt10 {
|
.mt10 {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.index {
|
.index {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height:100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.index-left {
|
.index-left {
|
||||||
width: 69%;
|
width: 69%;
|
||||||
border: 1px solid rgb(179, 174, 174);
|
border: 1px solid rgb(179, 174, 174);
|
||||||
}
|
}
|
||||||
.index-right {
|
.index-right {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.one-card {
|
.one-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 260px;
|
height: 100%;
|
||||||
box-shadow: 0 0 8px #99ACB0 inset;
|
box-shadow: 0 0 8px #99ACB0 inset;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.one-card-left {
|
|
||||||
width: 80%;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
.one-card-content {
|
.one-card-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
// border: 1px solid #1840af;
|
justify-content: space-around;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
|
|
||||||
>div {
|
>div {
|
||||||
width: 48%;
|
width: 46%;
|
||||||
// height: 48%;
|
// height: 22%;
|
||||||
border: 1px solid rgb(197, 195, 195);
|
border: 1px solid rgb(197, 195, 195);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
background:#d8e8f7;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: left;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
|
line-height: 40px;
|
||||||
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.one-card-right {
|
}
|
||||||
width: 20%;
|
}
|
||||||
background: #ddd;
|
</style>
|
||||||
h3 {
|
|
||||||
width: 100%;
|
|
||||||
height:100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.color0 {
|
|
||||||
background: linear-gradient(to right, rgb(171, 187, 187), #7BB7B7);
|
|
||||||
}
|
|
||||||
.color1 {
|
|
||||||
background: linear-gradient(to right, #e2eff1, #99ACB0);
|
|
||||||
}
|
|
||||||
.color2 {
|
|
||||||
background: linear-gradient(to right, #b8e5f5, #6ED2F6);
|
|
||||||
}
|
|
||||||
.color3 {
|
|
||||||
background: linear-gradient(to right, #bfdad9, #A3D8D6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -31,7 +31,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="index-right">
|
<div class="index-right">
|
||||||
<div class="one-card">
|
<div class="one-card">
|
||||||
<h2>数据显示</h2>
|
|
||||||
<div class="one-card-content">
|
<div class="one-card-content">
|
||||||
<div>
|
<div>
|
||||||
<p>透水铺装面积</p>
|
<p>透水铺装面积</p>
|
||||||
|
|
@ -143,7 +142,7 @@
|
||||||
box-shadow: 0 0 8px #99ACB0 inset;
|
box-shadow: 0 0 8px #99ACB0 inset;
|
||||||
.one-card-content {
|
.one-card-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="index-right">
|
<div class="index-right">
|
||||||
<div class="one-card">
|
<div class="one-card">
|
||||||
<h2>数据显示</h2>
|
|
||||||
<div class="one-card-content">
|
<div class="one-card-content">
|
||||||
<div>
|
<div>
|
||||||
<p>降雨量</p>
|
<p>降雨量</p>
|
||||||
|
|
@ -86,7 +85,7 @@
|
||||||
}
|
}
|
||||||
.one-card-content {
|
.one-card-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,11 @@ const router = createRouter({
|
||||||
path: '/chuxu',
|
path: '/chuxu',
|
||||||
name: 'chuxu',
|
name: 'chuxu',
|
||||||
component: () => import(/* webpackChunkName: "link" */ '../views/Chuxu.vue')
|
component: () => import(/* webpackChunkName: "link" */ '../views/Chuxu.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/config',
|
||||||
|
name: 'config',
|
||||||
|
component: () => import(/* webpackChunkName: "link" */ '../views/Config.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -36,5 +36,6 @@ export const pathMap = {
|
||||||
green: '世博浦西区活水公园',
|
green: '世博浦西区活水公园',
|
||||||
biology: '世博浦西区活水公园',
|
biology: '世博浦西区活水公园',
|
||||||
shentou: '世博浦西区活水公园',
|
shentou: '世博浦西区活水公园',
|
||||||
chuxu: '世博浦西区活水公园'
|
chuxu: '世博浦西区活水公园',
|
||||||
|
config: '世博浦西区活水公园'
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:model="ruleForm"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="180px"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
>
|
||||||
|
<el-form-item label="项目名称配置：" prop="name">
|
||||||
|
<el-input v-model="ruleForm.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登陆背景配置：" prop="loginImage">
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="ruleForm.loginImage"
|
||||||
|
:src="ruleForm.loginImage"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="主页背景配置：" prop="bgImage">
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="ruleForm.bgImage"
|
||||||
|
:src="ruleForm.bgImage"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="submitForm()"> 提交 </el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { localSet,localGet } from '@/utils'
|
||||||
|
export default {
|
||||||
|
name: "home",
|
||||||
|
setup() {
|
||||||
|
const ruleFormRef = ref(null);
|
||||||
|
const router = useRouter();
|
||||||
|
const store = useStore();
|
||||||
|
const state = reactive({
|
||||||
|
ruleForm: {
|
||||||
|
name: '',
|
||||||
|
loginImage: "",
|
||||||
|
bgImage: "",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入项目名称",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
state.ruleForm.name = localGet('projectName') || '世博浦西区活水公园';
|
||||||
|
})
|
||||||
|
const submitForm = async () => {
|
||||||
|
ruleFormRef.value.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
localSet('projectName', state.ruleForm.name);
|
||||||
|
router.go(0);
|
||||||
|
} else {
|
||||||
|
console.log("error submit!!");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
submitForm,
|
||||||
|
ruleFormRef,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.home {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// background: url(../assets/bg2.png) left top no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
// border: 1px solid rgb(180, 20, 180);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.avatar-uploader {
|
||||||
|
::v-deep .el-upload {
|
||||||
|
border: 1px dashed #99acb0;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
::v-deep .el-upload:hover {
|
||||||
|
border-color: #99acb0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon.avatar-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,20 +4,38 @@
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
|
<!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<div class="title">世博浦西区活水公园</div>
|
<div class="title">{{projectName}}</div>
|
||||||
<!-- <div class="tips">Vue3.0 后台管理系统</div> -->
|
<!-- <div class="tips">Vue3.0 后台管理系统</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form">
|
<el-form
|
||||||
|
label-position="top"
|
||||||
|
:rules="rules"
|
||||||
|
:model="ruleForm"
|
||||||
|
ref="loginForm"
|
||||||
|
class="login-form"
|
||||||
|
>
|
||||||
<el-form-item label="账号" prop="username">
|
<el-form-item label="账号" prop="username">
|
||||||
<el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" @keyup.enter="submitForm"></el-input>
|
<el-input
|
||||||
|
type="text"
|
||||||
|
v-model.trim="ruleForm.username"
|
||||||
|
autocomplete="off"
|
||||||
|
@keyup.enter="submitForm"
|
||||||
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="密码" prop="password">
|
<el-form-item label="密码" prop="password">
|
||||||
<el-input type="password" v-model.trim="ruleForm.password" autocomplete="off" @keyup.enter="submitForm" ></el-input>
|
<el-input
|
||||||
|
type="password"
|
||||||
|
v-model.trim="ruleForm.password"
|
||||||
|
autocomplete="off"
|
||||||
|
@keyup.enter="submitForm"
|
||||||
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<!-- <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div> -->
|
<!-- <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div> -->
|
||||||
<el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
|
<el-button style="width: 100%" type="primary" @click="submitForm" @keyup.enter="submitForm"
|
||||||
|
>立即登录</el-button
|
||||||
|
>
|
||||||
<!-- <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox> -->
|
<!-- <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
@ -26,106 +44,111 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import md5 from 'js-md5';
|
import md5 from "js-md5";
|
||||||
import { reactive, ref, toRefs } from 'vue'
|
import { reactive, ref, toRefs, onMounted } from "vue";
|
||||||
import { localSet } from '@/utils'
|
|
||||||
import myApi from "@/api/myApi.js";
|
import myApi from "@/api/myApi.js";
|
||||||
|
import { localSet, localGet } from "@/utils";
|
||||||
export default {
|
export default {
|
||||||
name: 'Login',
|
name: "Login",
|
||||||
setup() {
|
setup() {
|
||||||
const loginForm = ref(null)
|
const loginForm = ref(null);
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
projectName: "",
|
||||||
ruleForm: {
|
ruleForm: {
|
||||||
username: '',
|
username: "",
|
||||||
password: ''
|
password: "",
|
||||||
},
|
},
|
||||||
checked: true,
|
checked: true,
|
||||||
rules: {
|
rules: {
|
||||||
username: [
|
username: [
|
||||||
{ required: 'true', message: '账户不能为空', trigger: 'blur' }
|
{ required: "true", message: "账户不能为空", trigger: "blur" },
|
||||||
],
|
],
|
||||||
password: [
|
password: [
|
||||||
{ required: 'true', message: '密码不能为空', trigger: 'blur' }
|
{ required: "true", message: "密码不能为空", trigger: "blur" },
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
state.projectName = localGet("projectName") || "世博浦西区活水公园";
|
||||||
|
});
|
||||||
const submitForm = async () => {
|
const submitForm = async () => {
|
||||||
loginForm.value.validate(async (valid) => {
|
loginForm.value.validate(async (valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
const param = {
|
const param = {
|
||||||
userName: state.ruleForm.username || '',
|
userName: state.ruleForm.username || "",
|
||||||
passwordMd5: md5(state.ruleForm.password)
|
passwordMd5: md5(state.ruleForm.password),
|
||||||
}
|
};
|
||||||
// const res = await myApi.login(param);
|
// const res = await myApi.login(param);
|
||||||
localSet('token', "81527a9e9e2594b58babdd7f623f112f")
|
localSet("token", "81527a9e9e2594b58babdd7f623f112f");
|
||||||
window.location.href = '/';
|
window.location.href = "/";
|
||||||
} else {
|
} else {
|
||||||
console.log('error submit!!')
|
console.log("error submit!!");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
loginForm.value.resetFields();
|
loginForm.value.resetFields();
|
||||||
}
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
loginForm,
|
loginForm,
|
||||||
submitForm,
|
submitForm,
|
||||||
resetForm
|
resetForm,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.login-body {
|
.login-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* background-color: #fff; */
|
/* background-color: #fff; */
|
||||||
/* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
|
/* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
|
||||||
background: url('../assets/bg1.png') no-repeat;
|
background: url("../assets/bg1.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.login-container {
|
.login-container {
|
||||||
width: 420px;
|
width: 420px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
|
box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.head {
|
.head {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 40px 0 20px 0;
|
padding: 40px 0 20px 0;
|
||||||
}
|
}
|
||||||
.head img {
|
.head img {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
.head .title {
|
.head .title {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
color: #1BAEAE;
|
color: #1baeae;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.head .tips {
|
.head .tips {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
.login-form {
|
.login-form {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.el-form--label-top .el-form-item__label {
|
.el-form--label-top .el-form-item__label {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.login-form .el-form-item {
|
.login-form .el-form-item {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue