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
Split 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 @@ @@ -119,7 +119,7 @@
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
background: rgb(2 81 159);
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
@ -194,16 +194,71 @@ @@ -194,16 +194,71 @@
color: #FFF;
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>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
<!-- <div id="loader-wrapper">-->
<!-- <div id="loader"></div>-->
<!-- <div class="loader-section section-left"></div>-->
<!-- <div class="loader-section section-right"></div>-->
<!-- <div class="load_title">正在加载系统资源，请耐心等待</div>-->
<!-- </div>-->
<div class="loader-7">
<div class="load_title">正在加载中...</div>
</div>
</div>
</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 @@ @@ -1,5 +1,15 @@
#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 {
min-height: 100%;
transition: margin-left .28s;

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

@ -9,32 +9,63 @@ $yellow:#FEC171; @@ -9,32 +9,63 @@ $yellow:#FEC171;
$panGreen: #30B08F;
// 默认菜单主题风格
$base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5;
$base-menu-background:#304156;
$base-logo-title-color: #ffffff;
//$base-menu-color:#bfcbd9;
//$base-menu-color-active:#f4f4f5;
//$base-menu-background:#304156;
//$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-logo-light-title-color: #001529;
// 自定义暗色菜单风格
//$base-menu-color:hsla(0,0%,100%,.65);
//$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;
// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$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;
*/
// variable.scss
// 默认菜单主题风格
//$base-menu-color: #333333; // 菜单全部字体颜色
//$base-menu-color-active: #304156; // 父级菜单激活的字体颜色
//$base-menu-background: #fff; // 菜单栏背景颜色（非激活状态）
//$base-logo-title-color: #304156; // 系统标题颜色
//
//$base-menu-light-color: rgba(0, 0, 0, 0.7);
//$base-menu-light-background: #304156; // 选中菜单的字体颜色
//$base-logo-light-title-color: #fff; // 对应base-logo-title-color
//
//$base-sub-menu-background: #f5f7fa; // 选中的菜单的子菜单背景颜色
//$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;

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

@ -1,15 +1,12 @@ @@ -1,15 +1,12 @@
<template>
<div style="padding: 0 15px;" @click="toggleClick">
<svg
:class="{'is-active':isActive}"
<div style="padding: 0 15px; display: flex;background: #08518e" >
<img
src="../../assets/logo/svg.png"
@click="toggleClick"
:class="{ 'is-active': isActive }"
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
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 class="nabar-title">华双视频水位数据接收平台</div>
</div>
</template>
@ -34,11 +31,23 @@ export default { @@ -34,11 +31,23 @@ export default {
.hamburger {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-top: 18px;
width: 16px;
color: #304156;
height: 16px;
margin-left: 6px;
}
.hamburger.is-active {
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>

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

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

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

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

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

@ -14,7 +14,8 @@ @@ -14,7 +14,8 @@
</template>
<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'
export default {
@ -35,8 +36,8 @@ export default { @@ -35,8 +36,8 @@ export default {
},
data() {
return {
title: '华双视频水位数据接收平台',
logo: logoImg
title: 'HuaS',
logo: lImg
}
}
}
@ -66,21 +67,24 @@ export default { @@ -66,21 +67,24 @@ export default {
width: 100%;
& .sidebar-logo {
width: 32px;
height: 32px;
width: 28px;
height: 28px;
vertical-align: middle;
margin-right: 12px;
//margin-right: 8px;
margin: 0 6px 6px -20px
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
font-weight: bold;
line-height: 50px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 16px;
//font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
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 = { @@ -17,7 +17,7 @@ module.exports = {
/**
* 是否显示 tagsView
*/
tagsView: true,
tagsView: false,
/**
* 是否固定头部

12
src/views/index.vue
Unescape View File

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

4
src/views/login.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save