467010279
/
water-monitor-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
blank 2 years ago
parent
df91d9c86a
commit
ac0f2aefdf
18 changed files with 219 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/favicon.ico
  2. 67
      public/index.html
  3. BIN
      src/assets/logo/ai.png
  4. BIN
      src/assets/logo/l.png
  5. BIN
      src/assets/logo/logo.png
  6. BIN
      src/assets/logo/logo1.png
  7. BIN
      src/assets/logo/logo2.png
  8. BIN
      src/assets/logo/svg.png
  9. BIN
      src/assets/logo/svg1.png
  10. 10
      src/assets/styles/sidebar.scss
  11. 77
      src/assets/styles/variables.scss
  12. 33
      src/components/Hamburger/index.vue
  13. 2
      src/layout/components/AppMain.vue
  14. 63
      src/layout/components/Navbar.vue
  15. 24
      src/layout/components/Sidebar/Logo.vue
  16. 2
      src/settings.js
  17. 12
      src/views/index.vue
  18. 4
      src/views/login.vue

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

67
public/index.html
Unescape View File

@ -119,7 +119,7 @@
top: 0; top: 0;
width: 51%; width: 51%;
height: 100%; height: 100%;
background: #7171C6; background: rgb(2 81 159);
z-index: 1000; z-index: 1000;
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
-ms-transform: translateX(0); -ms-transform: translateX(0);
@ -194,16 +194,71 @@
color: #FFF; color: #FFF;
opacity: 0.5; opacity: 0.5;
} }
.load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
.loader-7 {
width: 100%;
height: 99%;
background: rgb(20, 123, 227);
display: inline-block;
position: relative;
}
.loader-7::after, .loader-7::before {
content: "";
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 45.5%;
top: 39%;
-webkit-animation: animloader7 2s linear infinite;
animation: animloader7 2s linear infinite;
}
.loader-7::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@keyframes animloader7 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <!-- <div id="loader-wrapper">-->
<div id="loader"></div> <!-- <div id="loader"></div>-->
<div class="loader-section section-left"></div> <!-- <div class="loader-section section-left"></div>-->
<div class="loader-section section-right"></div> <!-- <div class="loader-section section-right"></div>-->
<div class="load_title">正在加载系统资源，请耐心等待</div> <!-- <div class="load_title">正在加载系统资源，请耐心等待</div>-->
<!-- </div>-->
<div class="loader-7">
<div class="load_title">正在加载中...</div>
</div> </div>
</div> </div>
</body> </body>

BIN
src/assets/logo/ai.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/logo/l.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/logo/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/logo/logo1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/logo/logo2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/assets/logo/svg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
src/assets/logo/svg1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 B

10
src/assets/styles/sidebar.scss
Unescape View File

@ -1,5 +1,15 @@
#app { #app {
.el-menu-item.is-active {
color: rgb(2, 18, 38) !important;
//background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
&:hover {
background-color: $base-sub-menu-hover !important;
}
}
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;

77
src/assets/styles/variables.scss
Unescape View File

@ -9,32 +9,63 @@ $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; //$base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5; //$base-menu-color-active:#f4f4f5;
$base-menu-background:#304156; //$base-menu-background:#304156;
$base-logo-title-color: #ffffff; //$base-logo-title-color: #ffffff;
//
//$base-menu-light-color:rgba(0,0,0,.70);
//$base-menu-light-background:#ffffff;
//$base-logo-light-title-color: #001529;
//
//$base-sub-menu-background:#1f2d3d;
//$base-sub-menu-hover:#001528;
$base-menu-light-color:rgba(0,0,0,.70); // 自定义暗色菜单风格
$base-menu-light-background:#ffffff; //$base-menu-color:hsla(0,0%,100%,.65);
$base-logo-light-title-color: #001529; //$base-menu-color-active:#fff;
//$base-menu-background:#001529;
//$base-logo-title-color: #ffffff;
//
//$base-menu-light-color:rgba(0,0,0,.70);
//$base-menu-light-background:#ffffff;
//$base-logo-light-title-color: #001529;
//
//$base-sub-menu-background:#000c17;
//$base-sub-menu-hover:#001528;
$base-sub-menu-background:#1f2d3d;
$base-sub-menu-hover:#001528;
// 自定义暗色菜单风格 // variable.scss
/** // 默认菜单主题风格
$base-menu-color:hsla(0,0%,100%,.65); //$base-menu-color: #333333; // 菜单全部字体颜色
$base-menu-color-active:#fff; //$base-menu-color-active: #304156; // 父级菜单激活的字体颜色
$base-menu-background:#001529; //$base-menu-background: #fff; // 菜单栏背景颜色（非激活状态）
$base-logo-title-color: #ffffff; //$base-logo-title-color: #304156; // 系统标题颜色
//
$base-menu-light-color:rgba(0,0,0,.70); //$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background:#ffffff; //$base-menu-light-background: #304156; // 选中菜单的字体颜色
$base-logo-light-title-color: #001529; //$base-logo-light-title-color: #fff; // 对应base-logo-title-color
//
$base-sub-menu-background:#000c17; //$base-sub-menu-background: #f5f7fa; // 选中的菜单的子菜单背景颜色
$base-sub-menu-hover:#001528; //$base-sub-menu-hover: #f7f0f1; // 子菜单hover背景颜色
*/ //
//$base-sidebar-width: 200px;
$base-menu-color: #dedede; // 菜单全部字体颜色
$base-menu-color-active: #ffffff; // 父级菜单激活的字体颜色
//$base-menu-background: rgb(20, 123, 227); // 菜单栏背景颜色（非激活状态）
$base-menu-background: #08518e; // 菜单栏背景颜色（非激活状态）
$base-logo-title-color: #304156; // 系统标题颜色
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #b4b1b1; // 选中菜单的字体颜色
$base-logo-light-title-color: #fff; // 对应 base-logo-title-color
//$base-sub-menu-background: rgb(2 81 159); // 选中的菜单的子菜单背景颜色
$base-sub-menu-background: #1667ab; // 选中的菜单的子菜单背景颜色
$base-sub-menu-hover: rgb(7, 56, 105); // 子菜单hover背景颜色 rgb(7, 56, 105)
$base-sidebar-width: 200px; $base-sidebar-width: 200px;

33
src/components/Hamburger/index.vue
Unescape View File

@ -1,15 +1,12 @@
<template> <template>
<div style="padding: 0 15px;" @click="toggleClick"> <div style="padding: 0 15px; display: flex;background: #08518e" >
<svg <img
:class="{'is-active':isActive}" src="../../assets/logo/svg.png"
@click="toggleClick"
:class="{ 'is-active': isActive }"
class="hamburger" class="hamburger"
viewBox="0 0 1024 1024" />
xmlns="http://www.w3.org/2000/svg" <div class="nabar-title">华双视频水位数据接收平台</div>
width="64"
height="64"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div> </div>
</template> </template>
@ -34,11 +31,23 @@ export default {
.hamburger { .hamburger {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 20px; margin-top: 18px;
height: 20px; width: 16px;
color: #304156;
height: 16px;
margin-left: 6px;
} }
.hamburger.is-active { .hamburger.is-active {
transform: rotate(180deg); transform: rotate(180deg);
} }
.nabar-title {
font-size: 18px;
margin-left: 18px;
height: 100%;
line-height: 54px;
color: rgb(255, 255, 255);
font-weight: 600;
vertical-align: middle;
}
</style> </style>

2
src/layout/components/AppMain.vue
Unescape View File

@ -25,7 +25,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
/* 50= navbar 50 */ /* 50= navbar 50 */
min-height: calc(100vh - 50px); min-height: calc(100vh - 100px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;

63
src/layout/components/Navbar.vue
Unescape View File

@ -1,42 +1,22 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <div style="height: 50px; background: #08518e">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> @toggleClick="toggleSideBar"
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> />
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <el-dropdown style="background: #08518e" class="avatar-container right-menu-item hover-effect" trigger="click">
<search id="header-search" class="right-menu-item" />
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="avatar" class="user-avatar"> <img :src="avatar" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<router-link to="/user/profile"> <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item @click.native="setting = true"> <!-- <el-dropdown-item @click.native="setting = true">-->
<span>布局设置</span> <!-- <span>布局设置</span>-->
</el-dropdown-item> <!-- </el-dropdown-item>-->
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span>退出登录</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>
@ -44,6 +24,15 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<!-- 自定义面包屑 -->
<div class="new-breadcrumb">
<i
class="el-icon-location-outline"
style="margin-left: 20px; margin-top: 16px"
></i>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
</div>
</div>
</template> </template>
<script> <script>
@ -102,21 +91,28 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$store.dispatch('LogOut').then(() => { this.$store.dispatch('LogOut').then(() => {
location.href = '/control/index'; location.href = '/control/index'
})
}).catch(() => {
}) })
}).catch(() => {});
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .new-breadcrumb {
height: 50px; height: 50px;
display: flex;
//background: rgba(20, 123, 227, 0.3);
}
.navbar {
height: 100px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08); box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
@ -124,7 +120,7 @@ export default {
float: left; float: left;
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background .3s;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color: transparent;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, .025)
@ -149,6 +145,7 @@ export default {
float: right; float: right;
height: 100%; height: 100%;
line-height: 50px; line-height: 50px;
background: #08518e;
&:focus { &:focus {
outline: none; outline: none;

24
src/layout/components/Sidebar/Logo.vue
Unescape View File

@ -14,7 +14,8 @@
</template> </template>
<script> <script>
import logoImg from '@/assets/logo/logo.png' import aiImg from '@/assets/logo/ai.png'
import lImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
export default { export default {
@ -35,8 +36,8 @@ export default {
}, },
data() { data() {
return { return {
title: '华双视频水位数据接收平台', title: 'HuaS',
logo: logoImg logo: lImg
} }
} }
} }
@ -66,21 +67,24 @@ export default {
width: 100%; width: 100%;
& .sidebar-logo { & .sidebar-logo {
width: 32px; width: 28px;
height: 32px; height: 28px;
vertical-align: middle; vertical-align: middle;
margin-right: 12px; //margin-right: 8px;
margin: 0 6px 6px -20px
} }
& .sidebar-title { & .sidebar-title {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
color: #fff; font-weight: bold;
font-weight: 600;
line-height: 50px; line-height: 50px;
font-size: 14px; font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; //font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle; vertical-align: middle;
//color: rgb(0,151,255) !important;
color: #FFFFFF !important;
//font-style: oblique;
} }
} }

2
src/settings.js
Unescape View File

@ -17,7 +17,7 @@ module.exports = {
/** /**
* 是否显示 tagsView * 是否显示 tagsView
*/ */
tagsView: true, tagsView: false,
/** /**
* 是否固定头部 * 是否固定头部

12
src/views/index.vue
Unescape View File

@ -5,7 +5,7 @@
<div class="main"> <div class="main">
<!-- 标题栏 --> <!-- 标题栏 -->
<header> <header>
<h1>视频水位计数据监控大屏</h1> <!-- <h1>视频水位计数据监控大屏</h1>-->
</header> </header>
<div class="left" @click="closeBox"> <div class="left" @click="closeBox">
<!-- 实时水位 --> <!-- 实时水位 -->
@ -111,7 +111,7 @@ export default {
level: {}, level: {},
status: [], status: [],
dist: { dist: {
stnms: ['鄞州公园', '横溪镇-上街'], stnms: ['鄞州公园', '横溪镇-上'],
values: [ values: [
{ isLive: '在线', value: [1, 2]}, { isLive: '在线', value: [1, 2]},
{ isLive: '离线', value: [1, 1]} { isLive: '离线', value: [1, 1]}
@ -163,6 +163,7 @@ export default {
.then(e => e.json()) .then(e => e.json())
.then(e => { .then(e => {
this.station = e this.station = e
console.log(this.station)
e.forEach(station => { e.forEach(station => {
if(this.showLevel.some(item => item.id == station.id)) return if(this.showLevel.some(item => item.id == station.id)) return
this.showLevel.push({ this.showLevel.push({
@ -179,6 +180,7 @@ export default {
.then(e => e.json()) .then(e => e.json())
.then(e => { .then(e => {
this.level = e.data this.level = e.data
this.dist.stnms = e.data.stnms
this.setLine() this.setLine()
}) })
.catch(e => { console.error(e) }) .catch(e => { console.error(e) })
@ -198,6 +200,12 @@ export default {
}) })
.catch(e => { console.error(e) }) .catch(e => { console.error(e) })
fetch(this.api + 'count')
.then(e => e.json())
.then(e => {
console.log(e)
})
.catch(e => { console.log(e) })
return this.getList return this.getList
}, },

4
src/views/login.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="login"> <div class="login">
<div class="title"> <div class="t">
<h2>华双视频水位数据接收平台</h2> <h2>华双视频水位数据接收平台</h2>
<h3>Huashuang video water level data receiving platform</h3> <h3>Huashuang video water level data receiving platform</h3>
</div> </div>
@ -160,7 +160,7 @@ export default {
background: url("../assets/images/login-background.jpg") center center/cover; background: url("../assets/images/login-background.jpg") center center/cover;
} }
.title { .t {
position: fixed; position: fixed;
left: 26%; left: 26%;
top: 34%; top: 34%;

Write Preview
Loading…
Cancel
Save