dai
3 years ago
35 changed files with 2863 additions and 981 deletions
|
After Width: | Height: | Size: 504 B |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 688 B |
|
After Width: | Height: | Size: 895 B |
|
After Width: | Height: | Size: 651 B |
|
After Width: | Height: | Size: 725 B |
|
After Width: | Height: | Size: 807 B |
|
After Width: | Height: | Size: 963 B |
|
After Width: | Height: | Size: 612 B |
|
After Width: | Height: | Size: 680 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 621 B |
|
After Width: | Height: | Size: 748 B |
|
After Width: | Height: | Size: 692 B |
|
After Width: | Height: | Size: 826 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 754 B |
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,44 @@ |
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar { |
|||
width: 4px; |
|||
height: 4px; |
|||
&:hover { |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
/*滚动条里面小方块*/ |
|||
border-radius: 4px; |
|||
// box-shadow: inset 0 0 5px rgba(#00023f, 0.2); |
|||
box-shadow: none; |
|||
background: #07266b; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
/*滚动条里面轨道*/ |
|||
// box-shadow: inset 0 0 5px rgba(#00023f, 0.2); |
|||
box-shadow: none; |
|||
border-radius: 4px; |
|||
background: transparent; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar2 { |
|||
&::-webkit-scrollbar { |
|||
/*滚动条整体样式*/ |
|||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ |
|||
height: 1px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
/*滚动条里面小方块*/ |
|||
border-radius: 8px; |
|||
box-shadow: inset 0 0 5px rgba(#000, 0.1); |
|||
background: linear-gradient(270deg, #999, #ddd); |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
/*滚动条里面轨道*/ |
|||
box-shadow: inset 0 0 5px rgba(#000, 0.1); |
|||
border-radius: 8px; |
|||
background: darken(#999, 20); |
|||
} |
|||
} |
|||
@ -0,0 +1,158 @@ |
|||
@import "../../c/config"; |
|||
@import "../../c/function"; |
|||
@import "../c/common"; |
|||
|
|||
.g-row { |
|||
padding: 10px 6px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.g-left { |
|||
width: 480px; |
|||
} |
|||
.g-center { |
|||
width: 800px; |
|||
} |
|||
.g-right { |
|||
width: 480px; |
|||
} |
|||
} |
|||
|
|||
.m-map { |
|||
width: 100%; |
|||
height: 650px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.m-box { |
|||
.box-title { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 56px; |
|||
&-bg { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 56px; |
|||
height: 100%; |
|||
} |
|||
&-txt { |
|||
position: relative; |
|||
display: block; |
|||
padding-top: 8px; |
|||
padding-left: 24px; |
|||
font-size: 20px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 48px; |
|||
} |
|||
&-btn { |
|||
position: absolute; |
|||
z-index: 1; |
|||
top: 6px; |
|||
right: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
line-height: 48px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #6fdeff; |
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
margin: 0 8px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-subbox { |
|||
@include scrollBar; |
|||
height: 380px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.m-cate { |
|||
.list { |
|||
@include scrollBar; |
|||
padding-right: 5px; |
|||
height: 245px; |
|||
overflow-y: auto; |
|||
|
|||
.item { |
|||
margin-top: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 0.85); |
|||
line-height: 24px; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
|
|||
.item-name { |
|||
margin-left: 5px; |
|||
width: 80px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-div { |
|||
width: 1px; |
|||
height: 12px; |
|||
background: #d8d8d8; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.item-count { |
|||
margin-left: 20px; |
|||
width: 80px; |
|||
flex-shrink: 0; |
|||
b { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.item-per { |
|||
display: flex; |
|||
width: 160px; |
|||
align-items: center; |
|||
|
|||
b { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
img { |
|||
margin-left: 18px; |
|||
margin-right: 6px; |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
} |
|||
|
|||
.item-progress { |
|||
margin-right: 15px; |
|||
width: 416px; |
|||
height: 16px; |
|||
background: rgba(111, 222, 255, 0.15); |
|||
border-radius: 1px; |
|||
overflow: hidden; |
|||
b { |
|||
display: block; |
|||
height: 16px; |
|||
background: linear-gradient(270deg, #6fdeff 0%, rgba(111, 222, 255, 0.1) 100%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,157 @@ |
|||
@import "./c/config"; |
|||
@import "./c/function"; |
|||
|
|||
.g-fx { |
|||
background-color: #00023a; |
|||
} |
|||
|
|||
.g-pg { |
|||
position: relative; |
|||
} |
|||
|
|||
.i-corner { |
|||
position: absolute; |
|||
z-index: 0; |
|||
width: 121px; |
|||
&.z-left-top { |
|||
top: 15px; |
|||
left: 15px; |
|||
} |
|||
&.z-left-bottom { |
|||
bottom: 15px; |
|||
left: 15px; |
|||
} |
|||
&.z-right-top { |
|||
top: 15px; |
|||
right: 15px; |
|||
} |
|||
&.z-right-bottom { |
|||
bottom: 15px; |
|||
right: 15px; |
|||
} |
|||
} |
|||
|
|||
.m-topnav { |
|||
position: relative; |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 101px; |
|||
background-image: url(../images/shuju/main/top-bg.png); |
|||
background-repeat: no-repeat; |
|||
background-position: top center; |
|||
background-size: 100%; |
|||
.title { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
margin: 0 auto; |
|||
line-height: 70px; |
|||
text-align: center; |
|||
font-size: 32px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.nav-list { |
|||
position: absolute; |
|||
top: 40px; |
|||
left: 40px; |
|||
display: flex; |
|||
width: 500px; |
|||
|
|||
&.z-right { |
|||
left: auto; |
|||
right: 40px; |
|||
.nav-item { |
|||
background-image: url(../images/shuju/main/nav-right.png); |
|||
&.z-on { |
|||
&::before { |
|||
background-image: url(../images/shuju/main/nav-right-on.png); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.nav-item { |
|||
position: relative; |
|||
width: 120px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
background-image: url(../images/shuju/main/nav-left.png); |
|||
background-size: 100%; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
color: rgba(#fff, 0.85); |
|||
|
|||
span { |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
|
|||
&.z-on { |
|||
background-image: none; |
|||
&::before { |
|||
position: absolute; |
|||
z-index: -1; |
|||
content: ""; |
|||
display: block; |
|||
top: -2px; |
|||
left: -5px; |
|||
width: 132px; |
|||
height: 47px; |
|||
background-image: url(../images/shuju/main/nav-left-on.png); |
|||
background-size: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.msg { |
|||
position: absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
top: 40px; |
|||
right: 40px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
.weather { |
|||
display: flex; |
|||
align-items: center; |
|||
img { |
|||
position: relative; |
|||
width: 20px; |
|||
} |
|||
div { |
|||
margin-left: 3px; |
|||
} |
|||
} |
|||
.date { |
|||
margin-left: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
.date-div { |
|||
margin: 0 10px; |
|||
height: 22px; |
|||
width: 1px; |
|||
background-color: #fff; |
|||
opacity: 0.8; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.g-cnt { |
|||
padding: 15px; |
|||
} |
|||
@ -1,149 +1,684 @@ |
|||
@import "~@/element-ui/theme-variables.scss"; |
|||
@import "./shuju-variables.scss"; |
|||
@import "./c/config"; |
|||
@import "./c/function"; |
|||
@import "./modules/visual/c/common.scss"; |
|||
|
|||
.g-fx { |
|||
background-color: #00023a; |
|||
.g-main { |
|||
padding: 10px 20px 10px; |
|||
} |
|||
|
|||
.i-corner { |
|||
position: absolute; |
|||
z-index: 0; |
|||
width: 121px; |
|||
&.z-left-top { |
|||
top: 15px; |
|||
left: 15px; |
|||
.m-iframe { |
|||
position: relative; |
|||
box-sizing: content-box; |
|||
width: calc(100% + 20px); |
|||
margin: -10px -20px -10px; |
|||
z-index: 100; |
|||
} |
|||
|
|||
/* Reset element-ui |
|||
------------------------------ */ |
|||
.g-bd { |
|||
background-image: url(../img/shuju/bg.jpg); |
|||
background-size: cover; |
|||
background-position: center 0; |
|||
height: 100%; |
|||
@include scrollBar; |
|||
|
|||
.el-card + .el-card { |
|||
margin-top: 15px; |
|||
} |
|||
.el-input__prefix .el-input__icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.el-date-editor .el-range-separator { |
|||
width: 8%; |
|||
} |
|||
&.z-left-bottom { |
|||
bottom: 15px; |
|||
left: 15px; |
|||
.el-table th { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
} |
|||
&.z-right-top { |
|||
top: 15px; |
|||
right: 15px; |
|||
.el-pagination { |
|||
margin-top: 15px; |
|||
text-align: right; |
|||
} |
|||
&.z-right-bottom { |
|||
bottom: 15px; |
|||
right: 15px; |
|||
.el-table__expand-icon { |
|||
display: inline-block; |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.m-topnav { |
|||
/* Common |
|||
------------------------------ */ |
|||
// 图标 |
|||
.icon-svg { |
|||
width: 1em; |
|||
height: 1em; |
|||
fill: currentColor; |
|||
vertical-align: middle; |
|||
overflow: hidden; |
|||
} |
|||
// 卡片 |
|||
.aui-card--fill .el-card__header { |
|||
height: $content--card-header-height; |
|||
line-height: $content--card-header-height - 36px; |
|||
} |
|||
.aui-card__title { |
|||
font-size: 16px; |
|||
} |
|||
// 表单 |
|||
.aui-form__label-icon { |
|||
display: inline-block; |
|||
margin: 0 3px; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
// 按钮 |
|||
.aui-button--dashed { |
|||
border-style: dashed; |
|||
&:focus, |
|||
&:hover { |
|||
background-color: transparent; |
|||
} |
|||
&-add { |
|||
> span > *[class*="el-icon-"], |
|||
> span > *[class*="icon"] { |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Layout |
|||
------------------------------ */ |
|||
.g-bd { |
|||
position: relative; |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 101px; |
|||
background-image: url(../images/shuju/main/top-bg.png); |
|||
background-repeat: no-repeat; |
|||
background-position: top center; |
|||
background-size: 100%; |
|||
.title { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
margin: 0 auto; |
|||
line-height: 70px; |
|||
text-align: center; |
|||
font-size: 32px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
padding-top: $navbar--height; |
|||
|
|||
/* Sidebar fold |
|||
------------------------------ */ |
|||
&.z-sidebar--fold { |
|||
.navbar { |
|||
&__header, |
|||
&__brand { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__brand { |
|||
&-lg { |
|||
display: none; |
|||
} |
|||
&-mini { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
&__icon-menu--switch { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
.aui-sidebar { |
|||
&__inner { |
|||
width: $sidebar--width-fold + 20px; |
|||
} |
|||
&, |
|||
&__menu { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__menu > li > .el-submenu__title { |
|||
text-align: center; |
|||
} |
|||
&__menu-icon { |
|||
margin-right: 0; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: $sidebar--width-fold; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: $sidebar--width-fold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-sidebar--noside { |
|||
.aui-sidebar { |
|||
display: none !important; |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: 0 !important; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.nav-list { |
|||
position: absolute; |
|||
top: 40px; |
|||
left: 40px; |
|||
&.z-iframe { |
|||
padding-top: 0; |
|||
.aui-content--tabs { |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Navbar |
|||
------------------------------ */ |
|||
.m-navbar { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 1030; |
|||
display: flex; |
|||
align-items: stretch; |
|||
height: $navbar--height; |
|||
// background-color: $--color-primary; |
|||
// box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); |
|||
background: linear-gradient(180deg, #00023f, #176dec); |
|||
box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); |
|||
font-size: 19px; |
|||
.el-menu-item { |
|||
font-size: 19px; |
|||
} |
|||
|
|||
.navbar--colorful { |
|||
.navbar__body { |
|||
background-color: transparent; |
|||
} |
|||
.navbar__menu { |
|||
> .el-menu-item, |
|||
> .el-submenu > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: mix(#000, $--color-primary, 15%); |
|||
} |
|||
} |
|||
> .el-menu-item.is-active, |
|||
> .el-submenu.is-active > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
.el-menu-item i, |
|||
.el-submenu__title i, |
|||
.el-menu-item svg, |
|||
.el-submenu__title svg, |
|||
.el-menu-item .el-dropdown { |
|||
color: #fff !important; |
|||
} |
|||
.el-button { |
|||
color: #fff; |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
.navbar__search { |
|||
&-txt { |
|||
.el-input__inner { |
|||
color: #fff; |
|||
border-color: #fff; |
|||
&::-webkit-input-placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.navbar__header { |
|||
position: relative; |
|||
width: $sidebar--width; |
|||
height: $navbar--height; |
|||
transition: width 0.3s; |
|||
} |
|||
.navbar__brand { |
|||
position: relative; |
|||
display: flex; |
|||
width: 500px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10px 20px; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
white-space: nowrap; |
|||
// overflow: hidden; |
|||
transition: width 0.3s; |
|||
font-family: FZZCHJW; |
|||
color: #ffffff; |
|||
background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: rgba(#fff, 0.7); |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
z-index: 100000; |
|||
display: block; |
|||
bottom: -10px; |
|||
left: -920px; |
|||
right: -1000px; |
|||
margin: 0 auto; |
|||
width: 400px; |
|||
height: 20px; |
|||
// background-color: #fff; |
|||
background-image: url(../img/shuju/flash.png); |
|||
background-size: cover; |
|||
background-position: center center; |
|||
} |
|||
|
|||
&-lg, |
|||
&-mini { |
|||
max-width: 100%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
&-mini { |
|||
display: none; |
|||
} |
|||
} |
|||
.navbar__body { |
|||
position: relative; |
|||
display: flex; |
|||
flex: 1; |
|||
// background-color: #fff; |
|||
background-color: transparent; |
|||
// overflow: hidden; |
|||
} |
|||
.navbar__menu { |
|||
background-color: transparent; |
|||
border-bottom: 0 !important; |
|||
|
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: none; |
|||
} |
|||
&.z-div { |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
position: relative; |
|||
|
|||
&.z-right { |
|||
left: auto; |
|||
right: 40px; |
|||
.nav-item { |
|||
background-image: url(../images/shuju/main/nav-right.png); |
|||
&.is-active, |
|||
&.z-on { |
|||
&::before { |
|||
background-image: url(../images/shuju/main/nav-right-on.png); |
|||
position: absolute; |
|||
content: ""; |
|||
display: block; |
|||
bottom: -6px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
width: 50px; |
|||
height: 4px; |
|||
border: 0; |
|||
border-radius: 0 0 2px 2px; |
|||
background: #1effff; |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
&::after { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto 0; |
|||
width: 1px; |
|||
height: 18px; |
|||
background-color: rgba(#ffffff, 0.6); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.nav-item { |
|||
.sub-menu { |
|||
position: relative; |
|||
width: 120px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
background-image: url(../images/shuju/main/nav-left.png); |
|||
background-size: 100%; |
|||
text-align: center; |
|||
float: left; |
|||
cursor: pointer; |
|||
color: rgba(#fff, 0.85); |
|||
&:hover { |
|||
.sub-menu-list { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
span { |
|||
position: relative; |
|||
z-index: 1; |
|||
.sub-menu-list { |
|||
position: absolute; |
|||
display: none; |
|||
padding: 0 10px; |
|||
width: 160px; |
|||
left: -100px; |
|||
right: -100px; |
|||
margin: 0 auto; |
|||
background-color: rgba(#176dec, 0.9); |
|||
text-align: center; |
|||
cursor: pointer; |
|||
> div { |
|||
border-top: 1px dashed rgba(#fff, 0.4); |
|||
color: rgba(#fff, 0.7); |
|||
transition: all ease 0.5s; |
|||
padding: 10px 0; |
|||
line-height: $navbar--height * 0.5; |
|||
|
|||
&.z-on { |
|||
font-weight: bold; |
|||
} |
|||
&.z-on, |
|||
&:hover { |
|||
color: #ffd; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
height: $navbar--height; |
|||
padding: 0 15px; |
|||
line-height: $navbar--height; |
|||
border-color: transparent !important; |
|||
color: #fff; |
|||
} |
|||
.el-menu-item.is-active, |
|||
.sub-menu.z-on { |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
i { |
|||
color: #fff; |
|||
} |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: transparent !important; |
|||
|
|||
&.z-on { |
|||
background-image: none; |
|||
&::before { |
|||
position: absolute; |
|||
z-index: -1; |
|||
content: ""; |
|||
display: block; |
|||
top: -2px; |
|||
left: -5px; |
|||
width: 132px; |
|||
height: 47px; |
|||
background-image: url(../images/shuju/main/nav-left-on.png); |
|||
background-size: 100%; |
|||
.navbar__icon-menu { |
|||
color: #fff; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
.el-icon-arrow-down { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
} |
|||
* { |
|||
vertical-align: initial; |
|||
} |
|||
.navbar__icon-menu { |
|||
vertical-align: middle; |
|||
font-size: 20px; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
.el-icon-arrow-down { |
|||
width: auto; |
|||
font-size: 16px; |
|||
margin: 0 0 0 5px; |
|||
transition: transform 0.3s; |
|||
} |
|||
} |
|||
} |
|||
.el-badge { |
|||
display: inline; |
|||
z-index: 2; |
|||
&__content { |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.msg { |
|||
position: absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
top: 40px; |
|||
right: 40px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
.weather { |
|||
display: flex; |
|||
align-items: center; |
|||
img { |
|||
position: relative; |
|||
width: 16px; |
|||
.navbar__search { |
|||
> *[class*="el-icon-"], |
|||
> *[class*="icon"] { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
&-txt { |
|||
width: 0; |
|||
transition: width 0.3s, margin-left 0.3s; |
|||
&.is-show { |
|||
width: 210px; |
|||
margin-left: 8px; |
|||
} |
|||
div { |
|||
margin-left: 3px; |
|||
.el-input__inner { |
|||
height: $navbar--height - 20px; |
|||
padding: 0; |
|||
line-height: $navbar--height - 20px; |
|||
border-color: $--color-text-primary; |
|||
border-top: 0; |
|||
border-right: 0; |
|||
border-left: 0; |
|||
border-radius: 0; |
|||
background: transparent; |
|||
} |
|||
} |
|||
} |
|||
.navbar__avatar { |
|||
.el-dropdown-link { |
|||
> img { |
|||
width: 42px; |
|||
height: auto; |
|||
margin-right: 7px; |
|||
border-radius: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Content |
|||
------------------------------ */ |
|||
.g-cnt { |
|||
position: relative; |
|||
// padding: $content--padding; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: transparent; |
|||
|
|||
&__wrapper { |
|||
position: relative; |
|||
margin-left: $sidebar--width; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: $content--background-color; |
|||
transition: margin-left 0.3s; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&--tabs { |
|||
padding: $content--tabs-header-height 0 0; |
|||
} |
|||
&--tabs-tools { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
right: 0; |
|||
z-index: 931; |
|||
min-width: $content--tabs-header-height; |
|||
height: $content--tabs-header-height; |
|||
padding: 0 12px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
line-height: $content--tabs-header-height; |
|||
background-color: $--background-color-base; |
|||
cursor: pointer; |
|||
} |
|||
&--tabs-icon-nav { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 16px; |
|||
} |
|||
> .el-tabs { |
|||
> .el-tabs__header { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
left: $sidebar--width; |
|||
right: 0; |
|||
z-index: 930; |
|||
padding: 0 55px 0 15px; |
|||
margin: 0; |
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
|||
background-color: #fff; |
|||
transition: left 0.3s; |
|||
> .el-tabs__nav-wrap { |
|||
margin-bottom: 0; |
|||
&:after { |
|||
display: none; |
|||
} |
|||
> .el-tabs__nav-next, |
|||
> .el-tabs__nav-prev { |
|||
line-height: $content--tabs-header-height; |
|||
} |
|||
> .el-tabs__nav-scroll > .el-tabs__nav { |
|||
& > .el-tabs__active-bar { |
|||
display: none; |
|||
} |
|||
& > .el-tabs__item { |
|||
height: $content--tabs-header-height; |
|||
padding: 0 15px; |
|||
line-height: $content--tabs-header-height; |
|||
border: 0; |
|||
color: $--color-text-regular; |
|||
&:focus, |
|||
&:hover, |
|||
&.is-active { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
&:after { |
|||
display: block; |
|||
} |
|||
> .el-icon-close { |
|||
color: $--color-text-primary; |
|||
} |
|||
} |
|||
&:after { |
|||
display: none; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
content: ""; |
|||
width: 100%; |
|||
height: 2px; |
|||
background-color: $--color-primary; |
|||
} |
|||
+ .el-tabs__item { |
|||
margin-left: 1px; |
|||
} |
|||
> .el-icon-close { |
|||
width: 14px; |
|||
margin-left: 15px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
> i.icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.date { |
|||
margin-left: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
.date-div { |
|||
margin: 0 10px; |
|||
height: 22px; |
|||
width: 1px; |
|||
background-color: #fff; |
|||
opacity: 0.8; |
|||
> .el-tabs__content { |
|||
padding: $content--padding; |
|||
.el-loading-mask { |
|||
z-index: 830; |
|||
} |
|||
> .el-tab-pane { |
|||
min-height: calc(#{$content--fill-height-tabs}); |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&.is-iframe { |
|||
height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2}); |
|||
margin: -$content--padding; |
|||
min-height: auto; |
|||
> .aui-card--fill { |
|||
background-color: transparent; |
|||
} |
|||
> .aui-card--fill > .el-card__header { |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - 2px); |
|||
margin: $content--padding; |
|||
min-height: auto; |
|||
border: $--border-base; |
|||
border-color: $--border-color-lighter; |
|||
border-radius: $--border-radius-base; |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// quill富文本编辑器 |
|||
.ql-toolbar { |
|||
line-height: 20px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
.ql-formats { |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
.ql-container { |
|||
height: 150px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-loading-mask { |
|||
z-index: 5001 !important; |
|||
} |
|||
|
|||
/* Page |
|||
------------------------------ */ |
|||
*[class*="aui-page__"] { |
|||
padding-top: 0; |
|||
.aui-content { |
|||
min-height: auto; |
|||
&__wrapper { |
|||
min-height: 100vh; |
|||
margin-left: 0; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -1,684 +0,0 @@ |
|||
@import "~@/element-ui/theme-variables.scss"; |
|||
@import "./shuju-variables.scss"; |
|||
@import "./c/config"; |
|||
@import "./c/function"; |
|||
@import "./modules/visual/c/common.scss"; |
|||
|
|||
.g-main { |
|||
padding: 10px 20px 10px; |
|||
} |
|||
|
|||
.m-iframe { |
|||
position: relative; |
|||
box-sizing: content-box; |
|||
width: calc(100% + 20px); |
|||
margin: -10px -20px -10px; |
|||
z-index: 100; |
|||
} |
|||
|
|||
/* Reset element-ui |
|||
------------------------------ */ |
|||
.g-bd { |
|||
background-image: url(../img/shuju/bg.jpg); |
|||
background-size: cover; |
|||
background-position: center 0; |
|||
height: 100%; |
|||
@include scrollBar; |
|||
|
|||
.el-card + .el-card { |
|||
margin-top: 15px; |
|||
} |
|||
.el-input__prefix .el-input__icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.el-date-editor .el-range-separator { |
|||
width: 8%; |
|||
} |
|||
.el-table th { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
} |
|||
.el-pagination { |
|||
margin-top: 15px; |
|||
text-align: right; |
|||
} |
|||
.el-table__expand-icon { |
|||
display: inline-block; |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
/* Common |
|||
------------------------------ */ |
|||
// 图标 |
|||
.icon-svg { |
|||
width: 1em; |
|||
height: 1em; |
|||
fill: currentColor; |
|||
vertical-align: middle; |
|||
overflow: hidden; |
|||
} |
|||
// 卡片 |
|||
.aui-card--fill .el-card__header { |
|||
height: $content--card-header-height; |
|||
line-height: $content--card-header-height - 36px; |
|||
} |
|||
.aui-card__title { |
|||
font-size: 16px; |
|||
} |
|||
// 表单 |
|||
.aui-form__label-icon { |
|||
display: inline-block; |
|||
margin: 0 3px; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
// 按钮 |
|||
.aui-button--dashed { |
|||
border-style: dashed; |
|||
&:focus, |
|||
&:hover { |
|||
background-color: transparent; |
|||
} |
|||
&-add { |
|||
> span > *[class*="el-icon-"], |
|||
> span > *[class*="icon"] { |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Layout |
|||
------------------------------ */ |
|||
.g-bd { |
|||
position: relative; |
|||
padding-top: $navbar--height; |
|||
|
|||
/* Sidebar fold |
|||
------------------------------ */ |
|||
&.z-sidebar--fold { |
|||
.navbar { |
|||
&__header, |
|||
&__brand { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__brand { |
|||
&-lg { |
|||
display: none; |
|||
} |
|||
&-mini { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
&__icon-menu--switch { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
.aui-sidebar { |
|||
&__inner { |
|||
width: $sidebar--width-fold + 20px; |
|||
} |
|||
&, |
|||
&__menu { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__menu > li > .el-submenu__title { |
|||
text-align: center; |
|||
} |
|||
&__menu-icon { |
|||
margin-right: 0; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: $sidebar--width-fold; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: $sidebar--width-fold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-sidebar--noside { |
|||
.aui-sidebar { |
|||
display: none !important; |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: 0 !important; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-iframe { |
|||
padding-top: 0; |
|||
.aui-content--tabs { |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Navbar |
|||
------------------------------ */ |
|||
.m-navbar { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 1030; |
|||
display: flex; |
|||
align-items: stretch; |
|||
height: $navbar--height; |
|||
// background-color: $--color-primary; |
|||
// box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); |
|||
background: linear-gradient(180deg, #00023f, #176dec); |
|||
box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); |
|||
font-size: 19px; |
|||
.el-menu-item { |
|||
font-size: 19px; |
|||
} |
|||
|
|||
.navbar--colorful { |
|||
.navbar__body { |
|||
background-color: transparent; |
|||
} |
|||
.navbar__menu { |
|||
> .el-menu-item, |
|||
> .el-submenu > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: mix(#000, $--color-primary, 15%); |
|||
} |
|||
} |
|||
> .el-menu-item.is-active, |
|||
> .el-submenu.is-active > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
.el-menu-item i, |
|||
.el-submenu__title i, |
|||
.el-menu-item svg, |
|||
.el-submenu__title svg, |
|||
.el-menu-item .el-dropdown { |
|||
color: #fff !important; |
|||
} |
|||
.el-button { |
|||
color: #fff; |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
.navbar__search { |
|||
&-txt { |
|||
.el-input__inner { |
|||
color: #fff; |
|||
border-color: #fff; |
|||
&::-webkit-input-placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.navbar__header { |
|||
position: relative; |
|||
width: $sidebar--width; |
|||
height: $navbar--height; |
|||
transition: width 0.3s; |
|||
} |
|||
.navbar__brand { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10px 20px; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
white-space: nowrap; |
|||
// overflow: hidden; |
|||
transition: width 0.3s; |
|||
font-family: FZZCHJW; |
|||
color: #ffffff; |
|||
background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: rgba(#fff, 0.7); |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
z-index: 100000; |
|||
display: block; |
|||
bottom: -10px; |
|||
left: -920px; |
|||
right: -1000px; |
|||
margin: 0 auto; |
|||
width: 400px; |
|||
height: 20px; |
|||
// background-color: #fff; |
|||
background-image: url(../img/shuju/flash.png); |
|||
background-size: cover; |
|||
background-position: center center; |
|||
} |
|||
|
|||
&-lg, |
|||
&-mini { |
|||
max-width: 100%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
&-mini { |
|||
display: none; |
|||
} |
|||
} |
|||
.navbar__body { |
|||
position: relative; |
|||
display: flex; |
|||
flex: 1; |
|||
// background-color: #fff; |
|||
background-color: transparent; |
|||
// overflow: hidden; |
|||
} |
|||
.navbar__menu { |
|||
background-color: transparent; |
|||
border-bottom: 0 !important; |
|||
|
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: none; |
|||
} |
|||
&.z-div { |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
position: relative; |
|||
|
|||
&.is-active, |
|||
&.z-on { |
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
display: block; |
|||
bottom: -6px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
width: 50px; |
|||
height: 4px; |
|||
border: 0; |
|||
border-radius: 0 0 2px 2px; |
|||
background: #1effff; |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
&::after { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto 0; |
|||
width: 1px; |
|||
height: 18px; |
|||
background-color: rgba(#ffffff, 0.6); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sub-menu { |
|||
position: relative; |
|||
float: left; |
|||
cursor: pointer; |
|||
&:hover { |
|||
.sub-menu-list { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.sub-menu-list { |
|||
position: absolute; |
|||
display: none; |
|||
padding: 0 10px; |
|||
width: 160px; |
|||
left: -100px; |
|||
right: -100px; |
|||
margin: 0 auto; |
|||
background-color: rgba(#176dec, 0.9); |
|||
text-align: center; |
|||
cursor: pointer; |
|||
> div { |
|||
border-top: 1px dashed rgba(#fff, 0.4); |
|||
color: rgba(#fff, 0.7); |
|||
transition: all ease 0.5s; |
|||
padding: 10px 0; |
|||
line-height: $navbar--height * 0.5; |
|||
|
|||
&.z-on { |
|||
font-weight: bold; |
|||
} |
|||
&.z-on, |
|||
&:hover { |
|||
color: #ffd; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu-item, |
|||
.sub-menu { |
|||
height: $navbar--height; |
|||
padding: 0 15px; |
|||
line-height: $navbar--height; |
|||
border-color: transparent !important; |
|||
color: #fff; |
|||
} |
|||
.el-menu-item.is-active, |
|||
.sub-menu.z-on { |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
i { |
|||
color: #fff; |
|||
} |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: transparent !important; |
|||
|
|||
.navbar__icon-menu { |
|||
color: #fff; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
.el-icon-arrow-down { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
} |
|||
* { |
|||
vertical-align: initial; |
|||
} |
|||
.navbar__icon-menu { |
|||
vertical-align: middle; |
|||
font-size: 20px; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
.el-icon-arrow-down { |
|||
width: auto; |
|||
font-size: 16px; |
|||
margin: 0 0 0 5px; |
|||
transition: transform 0.3s; |
|||
} |
|||
} |
|||
} |
|||
.el-badge { |
|||
display: inline; |
|||
z-index: 2; |
|||
&__content { |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.navbar__search { |
|||
> *[class*="el-icon-"], |
|||
> *[class*="icon"] { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
&-txt { |
|||
width: 0; |
|||
transition: width 0.3s, margin-left 0.3s; |
|||
&.is-show { |
|||
width: 210px; |
|||
margin-left: 8px; |
|||
} |
|||
.el-input__inner { |
|||
height: $navbar--height - 20px; |
|||
padding: 0; |
|||
line-height: $navbar--height - 20px; |
|||
border-color: $--color-text-primary; |
|||
border-top: 0; |
|||
border-right: 0; |
|||
border-left: 0; |
|||
border-radius: 0; |
|||
background: transparent; |
|||
} |
|||
} |
|||
} |
|||
.navbar__avatar { |
|||
.el-dropdown-link { |
|||
> img { |
|||
width: 42px; |
|||
height: auto; |
|||
margin-right: 7px; |
|||
border-radius: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Content |
|||
------------------------------ */ |
|||
.g-cnt { |
|||
position: relative; |
|||
// padding: $content--padding; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: transparent; |
|||
|
|||
&__wrapper { |
|||
position: relative; |
|||
margin-left: $sidebar--width; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: $content--background-color; |
|||
transition: margin-left 0.3s; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&--tabs { |
|||
padding: $content--tabs-header-height 0 0; |
|||
} |
|||
&--tabs-tools { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
right: 0; |
|||
z-index: 931; |
|||
min-width: $content--tabs-header-height; |
|||
height: $content--tabs-header-height; |
|||
padding: 0 12px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
line-height: $content--tabs-header-height; |
|||
background-color: $--background-color-base; |
|||
cursor: pointer; |
|||
} |
|||
&--tabs-icon-nav { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 16px; |
|||
} |
|||
> .el-tabs { |
|||
> .el-tabs__header { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
left: $sidebar--width; |
|||
right: 0; |
|||
z-index: 930; |
|||
padding: 0 55px 0 15px; |
|||
margin: 0; |
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
|||
background-color: #fff; |
|||
transition: left 0.3s; |
|||
> .el-tabs__nav-wrap { |
|||
margin-bottom: 0; |
|||
&:after { |
|||
display: none; |
|||
} |
|||
> .el-tabs__nav-next, |
|||
> .el-tabs__nav-prev { |
|||
line-height: $content--tabs-header-height; |
|||
} |
|||
> .el-tabs__nav-scroll > .el-tabs__nav { |
|||
& > .el-tabs__active-bar { |
|||
display: none; |
|||
} |
|||
& > .el-tabs__item { |
|||
height: $content--tabs-header-height; |
|||
padding: 0 15px; |
|||
line-height: $content--tabs-header-height; |
|||
border: 0; |
|||
color: $--color-text-regular; |
|||
&:focus, |
|||
&:hover, |
|||
&.is-active { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
&:after { |
|||
display: block; |
|||
} |
|||
> .el-icon-close { |
|||
color: $--color-text-primary; |
|||
} |
|||
} |
|||
&:after { |
|||
display: none; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
content: ""; |
|||
width: 100%; |
|||
height: 2px; |
|||
background-color: $--color-primary; |
|||
} |
|||
+ .el-tabs__item { |
|||
margin-left: 1px; |
|||
} |
|||
> .el-icon-close { |
|||
width: 14px; |
|||
margin-left: 15px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
> i.icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
> .el-tabs__content { |
|||
padding: $content--padding; |
|||
.el-loading-mask { |
|||
z-index: 830; |
|||
} |
|||
> .el-tab-pane { |
|||
min-height: calc(#{$content--fill-height-tabs}); |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&.is-iframe { |
|||
height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2}); |
|||
margin: -$content--padding; |
|||
min-height: auto; |
|||
> .aui-card--fill { |
|||
background-color: transparent; |
|||
} |
|||
> .aui-card--fill > .el-card__header { |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - 2px); |
|||
margin: $content--padding; |
|||
min-height: auto; |
|||
border: $--border-base; |
|||
border-color: $--border-color-lighter; |
|||
border-radius: $--border-radius-base; |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// quill富文本编辑器 |
|||
.ql-toolbar { |
|||
line-height: 20px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
.ql-formats { |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
.ql-container { |
|||
height: 150px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-loading-mask { |
|||
z-index: 5001 !important; |
|||
} |
|||
|
|||
/* Page |
|||
------------------------------ */ |
|||
*[class*="aui-page__"] { |
|||
padding-top: 0; |
|||
.aui-content { |
|||
min-height: auto; |
|||
&__wrapper { |
|||
min-height: 100vh; |
|||
margin-left: 0; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<template> |
|||
<div class="m-404">页面未找到或无权访问</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-404 { |
|||
margin-top: 200px; |
|||
font-size: 60px; |
|||
color: rgba(#fff, 0.6); |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,754 @@ |
|||
<template> |
|||
<div class="m-map" :class="{ 'z-td': mapType == 'td' }"> |
|||
<div id="map"></div> |
|||
<div |
|||
class="btn" |
|||
v-if="mapStyleType == 'light'" |
|||
v-show="false" |
|||
@click="shiftMapStyle('dark')" |
|||
> |
|||
切换深色模式 |
|||
</div> |
|||
<div class="btn" v-show="false" v-else @click="shiftMapStyle('light')"> |
|||
切换浅色模式 |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { |
|||
Scene, |
|||
PolygonLayer, |
|||
LineLayer, |
|||
RasterLayer, |
|||
PointLayer, |
|||
} from "@antv/l7"; |
|||
import { GaodeMap, Map } from "@antv/l7-maps"; |
|||
import { spliceIntoChunks } from "@/utils/index"; |
|||
import { mapType, searchNearby } from "@/utils/dai-map"; |
|||
import tdtWp from "@/utils/tdt-wp"; |
|||
import tdtWpZw from "@/utils/tdt-wp-zw"; |
|||
|
|||
let myMap; |
|||
let scene; |
|||
let polygonLayer; |
|||
let lineLayer; |
|||
let textLayer; |
|||
let posLayer; |
|||
let circleLayer; |
|||
let dotLayer; |
|||
let dotBgLayer; |
|||
let dotLayer2; |
|||
|
|||
export default { |
|||
name: "l7", |
|||
inject: ["refresh"], |
|||
|
|||
data() { |
|||
return { |
|||
mapType, |
|||
|
|||
mapStyleType: localStorage.getItem("mapStyle") || "dark", |
|||
// srcGridData: {}, |
|||
darkStyle: { |
|||
style: "amap://styles/blue", |
|||
polygonColor: [ |
|||
"rgba(255, 100, 60, 0.5)", |
|||
"rgba(43, 231, 253, 0.35)", |
|||
"rgba(255, 255, 50, 0.35)", |
|||
], |
|||
lineColor: [ |
|||
"rgba(255, 180, 150, 0.9)", |
|||
"rgba(43, 231, 253, 0.7)", |
|||
"rgba(255, 255, 50, 0.7)", |
|||
], |
|||
circleColor: [ |
|||
"rgba(255, 180, 150, 0.99)", |
|||
"rgba(43, 231, 253, 0.99)", |
|||
"rgba(255, 255, 50, 0.99)", |
|||
], |
|||
textColor: [ |
|||
"rgba(255, 100, 60, 0.99)", |
|||
"rgba(43, 231, 253, 0.99)", |
|||
"rgba(255, 255, 50, 0.99)", |
|||
], |
|||
textStrokeColor: "#fff", |
|||
}, |
|||
|
|||
lightStyle: { |
|||
style: "amap://styles/whitesmoke", |
|||
polygonColor: [ |
|||
"rgba(255, 100, 60, 0.3)", |
|||
"rgba(43, 231, 253, 0.3)", |
|||
"rgba(255, 255, 50, 0.3)", |
|||
], |
|||
lineColor: [ |
|||
"rgba(220, 150, 120, 0.9)", |
|||
"rgba(33, 201, 223, 0.8)", |
|||
"rgba(200, 200, 50, 0.9)", |
|||
], |
|||
circleColor: [ |
|||
"rgba(255, 180, 150, 0.99)", |
|||
"rgba(13, 181, 203, 0.8)", |
|||
"rgba(255, 255, 50, 0.99)", |
|||
], |
|||
textColor: [ |
|||
"rgba(200, 50, 10, 0.99)", |
|||
"rgba(0, 130, 153, 0.99)", |
|||
"rgba(120, 120, 0, 0.99)", |
|||
], |
|||
textStrokeColor: "#666", |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
props: { |
|||
pitch: { |
|||
type: Number, |
|||
default: 60, |
|||
}, |
|||
|
|||
srcGridData: { |
|||
type: Object, |
|||
default: null, |
|||
}, |
|||
|
|||
dotList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
|
|||
dotIcoList: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
|
|||
dotList2: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
|
|||
dotIcoList2: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
}, |
|||
|
|||
computed: {}, |
|||
|
|||
components: {}, |
|||
|
|||
watch: {}, |
|||
|
|||
async mounted() { |
|||
// 临时这么用吧 |
|||
window._AMapSecurityConfig = { |
|||
securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2", |
|||
}; |
|||
|
|||
this.iniMap(); |
|||
}, |
|||
|
|||
computed: { |
|||
polygonData() { |
|||
const { srcGridData } = this; |
|||
if ( |
|||
!srcGridData || |
|||
!srcGridData.children || |
|||
!Array.isArray(srcGridData.children) |
|||
) { |
|||
return { type: "FeatureCollection", features: [] }; |
|||
} |
|||
const polygon = [ |
|||
...srcGridData.children |
|||
.filter((item) => item.coordinates.length > 0) |
|||
.map((item) => ({ |
|||
type: "Feature", |
|||
properties: { |
|||
// id: item.id, |
|||
// name: item.name, |
|||
// level: item.level, |
|||
center: [item.longitude, item.latitude], |
|||
...item, |
|||
}, |
|||
geometry: { |
|||
type: "Polygon", |
|||
coordinates: [ |
|||
spliceIntoChunks( |
|||
item.coordinates.split(",").map((item) => parseFloat(item)), |
|||
2 |
|||
).filter((item) => item.length == 2), |
|||
], |
|||
}, |
|||
})), |
|||
]; |
|||
return { type: "FeatureCollection", features: polygon }; |
|||
}, |
|||
|
|||
polygonDotData() { |
|||
const { srcGridData } = this; |
|||
if ( |
|||
!srcGridData || |
|||
!srcGridData.children || |
|||
!Array.isArray(srcGridData.children) |
|||
) { |
|||
return { type: "FeatureCollection", features: [] }; |
|||
} |
|||
const polygon = [ |
|||
...srcGridData.children |
|||
.filter((item) => item.coordinates.length > 0) |
|||
.map((item) => ({ |
|||
type: "Feature", |
|||
properties: { |
|||
// id: item.id, |
|||
// name: item.name, |
|||
// level: item.level, |
|||
center: [item.longitude, item.latitude], |
|||
...item, |
|||
}, |
|||
geometry: { |
|||
type: "Polygon", |
|||
coordinates: [ |
|||
item.latitude |
|||
? [[item.longitude, item.latitude]] |
|||
: spliceIntoChunks( |
|||
item.coordinates |
|||
.split(",") |
|||
.map((item) => parseFloat(item)), |
|||
2 |
|||
).filter((item) => item.length == 2), |
|||
], |
|||
}, |
|||
})), |
|||
]; |
|||
return { type: "FeatureCollection", features: polygon }; |
|||
}, |
|||
|
|||
dotData() { |
|||
const { dotList } = this; |
|||
return { |
|||
type: "FeatureCollection", |
|||
features: [ |
|||
...dotList |
|||
.filter((item) => item.latitude) |
|||
.map((item) => ({ |
|||
type: "Feature", |
|||
properties: { |
|||
...item, |
|||
}, |
|||
geometry: { |
|||
type: "Point", |
|||
coordinates: [ |
|||
parseFloat(item.longitude), |
|||
parseFloat(item.latitude), |
|||
], |
|||
}, |
|||
})), |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
dotData2() { |
|||
const { dotList2 } = this; |
|||
return { |
|||
type: "FeatureCollection", |
|||
features: [ |
|||
...dotList2 |
|||
.filter((item) => item.latitude) |
|||
.map((item) => ({ |
|||
type: "Feature", |
|||
properties: { |
|||
...item, |
|||
}, |
|||
geometry: { |
|||
type: "Point", |
|||
coordinates: [ |
|||
parseFloat(item.longitude), |
|||
parseFloat(item.latitude), |
|||
], |
|||
}, |
|||
})), |
|||
], |
|||
}; |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
srcGridData(val, oldValue) { |
|||
if (oldValue == null) { |
|||
this.iniMap(); |
|||
} else { |
|||
this.updateGrid(); |
|||
} |
|||
this.zoomInABit(); |
|||
}, |
|||
dotList(val, oldValue) { |
|||
this.updateDot(); |
|||
}, |
|||
dotList2(val, oldValue) { |
|||
this.updateDot(); |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
iniMap() { |
|||
const { darkStyle, lightStyle, srcGridData } = this; |
|||
if (!srcGridData) return false; |
|||
|
|||
let styleConfig = darkStyle; |
|||
if (this.mapStyleType == "light") { |
|||
styleConfig = lightStyle; |
|||
} |
|||
|
|||
const iniCenter = [ |
|||
srcGridData.longitude || |
|||
this.$store.state.user.longitude || |
|||
116.39743841556731, |
|||
srcGridData.latitude || |
|||
this.$store.state.user.latitude || |
|||
39.9088810666821, |
|||
]; |
|||
|
|||
if (mapType != "qq") { |
|||
myMap = new Map({ |
|||
center: iniCenter, |
|||
zoom: 18, |
|||
}); |
|||
} else { |
|||
myMap = new GaodeMap({ |
|||
// pitch: this.pitch, |
|||
style: styleConfig.style, |
|||
center: iniCenter, |
|||
token: "fc14b42e0ca18387866d68ebd4f150c1", |
|||
zoom: 18, |
|||
isHotspot: false, |
|||
resizeEnable: true, |
|||
doubleClickZoom: false, |
|||
}); |
|||
} |
|||
|
|||
scene = new Scene({ |
|||
id: "map", |
|||
logoVisible: false, |
|||
map: myMap, |
|||
}); |
|||
|
|||
scene.on("loaded", async () => { |
|||
if (mapType == "td") { |
|||
this.iniMapBase(scene); |
|||
} else if (mapType == "tdzw") { |
|||
this.iniMapBase2(scene); |
|||
} |
|||
|
|||
this.iniMapGrid(scene); |
|||
this.iniMapDot(scene); |
|||
this.iniMapDot2(scene); |
|||
await nextTick(0); |
|||
this.zoomInABit(); |
|||
}); |
|||
}, |
|||
|
|||
// 初始化底图 |
|||
iniMapBase(scene) { |
|||
console.log("-----------------iniMapBase"); |
|||
// 底图服务 |
|||
const baseLayer = new RasterLayer({ |
|||
zIndex: 1, |
|||
}); |
|||
baseLayer |
|||
.source( |
|||
"http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", |
|||
{ |
|||
parser: { |
|||
type: "rasterTile", |
|||
tileSize: 256, |
|||
// minZoom: 6, |
|||
// maxZoom: 15, |
|||
zoomOffset: 0, |
|||
}, |
|||
} |
|||
) |
|||
.style({ |
|||
opacity: 0.7, |
|||
}); |
|||
|
|||
// 注记服务 |
|||
const annotionLayer = new RasterLayer({ |
|||
zIndex: 2, |
|||
}); |
|||
annotionLayer |
|||
.source( |
|||
"http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", |
|||
{ |
|||
parser: { |
|||
type: "rasterTile", |
|||
tileSize: 256, |
|||
// minZoom: 6, |
|||
// maxZoom: 15, |
|||
zoomOffset: 0, |
|||
}, |
|||
} |
|||
) |
|||
.style({ |
|||
opacity: 0.5, |
|||
}); |
|||
|
|||
scene.addLayer(baseLayer); |
|||
scene.addLayer(annotionLayer); |
|||
}, |
|||
|
|||
// 初始化底图 天地图山东政务网瓦片 |
|||
iniMapBase2(scene) { |
|||
console.log("-----------------iniMapBase"); |
|||
// 底图服务 |
|||
const baseLayer = new RasterLayer({ |
|||
zIndex: 1, |
|||
}); |
|||
baseLayer |
|||
.source(tdtWpZw.vec, { |
|||
parser: { |
|||
type: "rasterTile", |
|||
tileSize: 256, |
|||
zoomOffset: 0, |
|||
}, |
|||
}) |
|||
.style({ |
|||
opacity: 0.7, |
|||
}); |
|||
|
|||
scene.addLayer(baseLayer); |
|||
}, |
|||
|
|||
iniMapGrid(scene) { |
|||
const { darkStyle, lightStyle, polygonData, polygonDotData } = this; |
|||
|
|||
let styleConfig = darkStyle; |
|||
if (this.mapStyleType == "light") { |
|||
styleConfig = lightStyle; |
|||
} |
|||
|
|||
console.log("地图初始化数据", polygonData); |
|||
|
|||
polygonLayer = new PolygonLayer({ |
|||
autoFit: true, |
|||
}) |
|||
// .size(0) |
|||
.source(polygonData) |
|||
.color("name", styleConfig.polygonColor) |
|||
// .shape("extrude") |
|||
.shape("fill") |
|||
.style({ |
|||
opacityLinear: { |
|||
enable: true, // true - false |
|||
dir: "out", // in - out |
|||
}, |
|||
opacity: 1, |
|||
// heightfixed: true, |
|||
// pickLight: true, |
|||
raisingHeight: 0, |
|||
// sourceColor: "#333", |
|||
// targetColor: "rgba(255,255,255, 0.5)", |
|||
}); |
|||
|
|||
scene.addLayer(polygonLayer); |
|||
|
|||
lineLayer = new LineLayer({ |
|||
zIndex: 2, |
|||
name: "line2", |
|||
}) |
|||
.source(polygonData) |
|||
.shape("line") |
|||
.size(1) |
|||
.color("name", styleConfig.lineColor) |
|||
.style({ |
|||
opacity: 1, |
|||
}) |
|||
.animate({ |
|||
interval: 1, // 间隔 |
|||
duration: 2, // 持续时间，延时 |
|||
trailLength: 2, // 流线长度 |
|||
}); |
|||
scene.addLayer(lineLayer); |
|||
|
|||
circleLayer = new PolygonLayer({ |
|||
zIndex: 3, |
|||
}) |
|||
.source(polygonDotData) |
|||
.color("name", styleConfig.circleColor) |
|||
.shape("circle") |
|||
.active(true) |
|||
.animate(true) |
|||
.size(50) |
|||
.style({ |
|||
offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直] |
|||
opacity: 1, |
|||
}); |
|||
scene.addLayer(circleLayer); |
|||
|
|||
scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png")); |
|||
scene.addImage( |
|||
"pos-green", |
|||
require("@/assets/img/shuju/grid/pos-green.png") |
|||
); |
|||
scene.addImage( |
|||
"pos-yellow", |
|||
require("@/assets/img/shuju/grid/pos-yellow.png") |
|||
); |
|||
posLayer = new PolygonLayer({ |
|||
zIndex: 4, |
|||
}) |
|||
.source(polygonDotData) |
|||
.shape("name", ["pos-red", "pos-green", "pos-yellow"]) |
|||
.size(12) |
|||
.style({ |
|||
offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直] |
|||
// rotation: 60, |
|||
// layerType: "fillImage", |
|||
}); |
|||
scene.addLayer(posLayer); |
|||
|
|||
textLayer = new PolygonLayer({ |
|||
zIndex: 20, |
|||
}) |
|||
.source(polygonDotData) |
|||
.color("name", styleConfig.textColor) |
|||
.shape("name", "text") |
|||
.size(16) |
|||
.style({ |
|||
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
|||
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
|||
spacing: 2, // 字符间距 |
|||
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|||
stroke: styleConfig.textStrokeColor, // 描边颜色 |
|||
strokeWidth: 0.1, // 描边宽度 |
|||
strokeOpacity: 0.8, |
|||
textAllowOverlap: true, |
|||
}) |
|||
.active(true); |
|||
scene.addLayer(textLayer); |
|||
|
|||
polygonLayer.on("mousemove", (e) => { |
|||
polygonLayer.style({ |
|||
raisingHeight: 0, |
|||
}); |
|||
}); |
|||
|
|||
polygonLayer.on("click", (e) => { |
|||
console.log(e.feature.properties); |
|||
this.$emit("clickAgency", e.feature.properties); |
|||
}); |
|||
|
|||
polygonLayer.on("unmousemove", (e) => { |
|||
polygonLayer.style({ |
|||
raisingHeight: 0, |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
iniMapDot(scene) { |
|||
const { darkStyle, lightStyle, dotIcoList, dotData } = this; |
|||
Object.keys(dotIcoList).forEach((k) => { |
|||
scene.addImage(k, dotIcoList[k]); |
|||
}); |
|||
dotBgLayer = new PointLayer({ |
|||
zIndex: 20, |
|||
}) |
|||
.source(dotData) |
|||
.shape("circle") |
|||
.color("rgba(255,255,255,0.8)") |
|||
.size(20) |
|||
.style({ |
|||
strokeWidth: 3, |
|||
strokeOpacity: 0.1, |
|||
stroke: "#000", |
|||
}); |
|||
scene.addLayer(dotBgLayer); |
|||
|
|||
dotLayer = new PointLayer({ |
|||
zIndex: 21, |
|||
}) |
|||
.source(dotData) |
|||
.shape("categoryKey", (k) => k) |
|||
.size(10) |
|||
.style({ |
|||
offsets: [0, 0], |
|||
layerType: "fillImage", |
|||
}); |
|||
scene.addLayer(dotLayer); |
|||
|
|||
dotBgLayer.on("click", (e) => { |
|||
console.log(e.feature.properties); |
|||
this.$emit("clickDot", e.feature.properties); |
|||
}); |
|||
|
|||
dotBgLayer.on("mousemove", (e) => { |
|||
// console.log(e); |
|||
if (e.feature.properties.content) { |
|||
const popup = new Popup({ |
|||
offsets: [0, -0], |
|||
closeButton: false, |
|||
}) |
|||
.setLnglat(e.feature.geometry.coordinates) |
|||
.setHTML(`<span>${e.feature.properties.content}</span>`); |
|||
scene.addPopup(popup); |
|||
} |
|||
}); |
|||
|
|||
dotBgLayer.on("unmousemove", (e) => {}); |
|||
}, |
|||
|
|||
iniMapDot2(scene) { |
|||
const { dotIcoList2: dotIcoList, dotData2: dotData } = this; |
|||
Object.keys(dotIcoList).forEach((k) => { |
|||
scene.addImage(k, dotIcoList[k]); |
|||
}); |
|||
|
|||
dotLayer2 = new PointLayer({ |
|||
zIndex: 21, |
|||
}) |
|||
.source(dotData) |
|||
.shape("categoryKey", (k) => k) |
|||
.size(20) |
|||
.style({ |
|||
offsets: [0, 0], |
|||
layerType: "fillImage", |
|||
}); |
|||
scene.addLayer(dotLayer2); |
|||
|
|||
dotLayer2.on("click", (e) => { |
|||
console.log(e.feature.properties); |
|||
this.$emit("clickDot", e.feature.properties); |
|||
}); |
|||
|
|||
dotLayer2.on("mousemove", (e) => { |
|||
// console.log(e); |
|||
if (e.feature.properties.content) { |
|||
const popup = new Popup({ |
|||
offsets: [0, -0], |
|||
closeButton: false, |
|||
}) |
|||
.setLnglat(e.feature.geometry.coordinates) |
|||
.setHTML(`<span>${e.feature.properties.content}</span>`); |
|||
scene.addPopup(popup); |
|||
} |
|||
}); |
|||
|
|||
dotLayer2.on("unmousemove", (e) => {}); |
|||
}, |
|||
|
|||
// 把地图缩放等级在原来基础上大一点 |
|||
zoomInABit() { |
|||
let current = scene.getZoom(); |
|||
scene.setZoomAndCenter(current + 0.5); |
|||
}, |
|||
|
|||
shiftMapStyle(type) { |
|||
this.mapStyleType = type; |
|||
localStorage.setItem("mapStyle", type); |
|||
this.refresh(); |
|||
}, |
|||
|
|||
updateMap() { |
|||
this.updateGrid(); |
|||
this.updateDot(); |
|||
this.updateDot2(); |
|||
}, |
|||
|
|||
updateGrid() { |
|||
const { polygonData, polygonDotData } = this; |
|||
if (polygonLayer) { |
|||
polygonLayer.setData(polygonData); |
|||
lineLayer.setData(polygonData); |
|||
textLayer.setData(polygonDotData); |
|||
posLayer.setData(polygonDotData); |
|||
circleLayer.setData(polygonDotData); |
|||
} |
|||
}, |
|||
|
|||
updateDot() { |
|||
const { dotData } = this; |
|||
if (dotLayer) { |
|||
console.log(dotData); |
|||
dotLayer.setData(dotData); |
|||
dotBgLayer.setData(dotData); |
|||
} |
|||
}, |
|||
|
|||
updateDot2() { |
|||
const { dotData2: dotData } = this; |
|||
if (dotLayer2) { |
|||
console.log(dotData); |
|||
dotLayer2.setData(dotData); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-map { |
|||
position: relative; |
|||
height: 100%; |
|||
border-radius: 50px; |
|||
overflow: hidden; |
|||
opacity: 0.9; |
|||
background-color: #020c38; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
display: block; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
pointer-events: none; |
|||
background: radial-gradient( |
|||
rgba(#020c38, 0) 0%, |
|||
rgba(#020c38, 0) 60%, |
|||
rgba(#020c38, 1) 90%, |
|||
rgba(#020c38, 1) 100% |
|||
); |
|||
} |
|||
|
|||
&.z-td { |
|||
#app { |
|||
/deep/ .l7-scene { |
|||
canvas { |
|||
background-color: rgba(43, 51, 73, 0.82); |
|||
background-image: radial-gradient( |
|||
rgba(0, 0, 0, 0), |
|||
rgba(0, 0, 0, 0.3), |
|||
#000 |
|||
); |
|||
} |
|||
.gray { |
|||
-webkit-filter: grayscale(100%); |
|||
filter: grayscale(100%); |
|||
opacity: 0.7; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#map { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.btn { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100px; |
|||
line-height: 36px; |
|||
height: 36px; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
font-size: 14px; |
|||
background-color: rgba(#000, 0.2); |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<div class="g-row"> |
|||
<div class="g-left"> |
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img |
|||
src="~@/assets/images/shuju/main/card-title-bg-480.png" |
|||
class="box-title-bg" |
|||
/> |
|||
<div class="box-title-txt">房屋概览</div> |
|||
</div> |
|||
|
|||
<div class="m-subbox"></div> |
|||
</div> |
|||
|
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img |
|||
src="~@/assets/images/shuju/main/card-title-bg-480.png" |
|||
class="box-title-bg" |
|||
/> |
|||
<div class="box-title-txt">居民概览</div> |
|||
</div> |
|||
|
|||
<div class="m-subbox"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="g-center"> |
|||
<div class="m-map"> |
|||
<grid-map |
|||
v-if="orgData.id" |
|||
@clickAgency="clickAgencyItem" |
|||
:srcGridData="orgData" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="m-box m-cate"> |
|||
<div class="box-title"> |
|||
<img |
|||
src="~@/assets/images/shuju/main/card-title-bg-800.png" |
|||
class="box-title-bg" |
|||
/> |
|||
<div class="box-title-txt">居民分类分析</div> |
|||
|
|||
<div class="box-title-btn"> |
|||
<img src="~@/assets/images/shuju/renfang/index/znyc.png" /> |
|||
<span>智能预测</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="list"> |
|||
<div |
|||
class="item" |
|||
:key="item.code" |
|||
v-for="(item, index) in warningData" |
|||
> |
|||
<div>{{ ("0" + (index + 1)).substr(-2) }}.</div> |
|||
<div class="item-name">{{ item.name }}</div> |
|||
<div class="item-count"> |
|||
<b>{{ item.count }}</b> 人 |
|||
</div> |
|||
<div class="item-progress"> |
|||
<b :style="{ width: item.count + '%' }"></b> |
|||
</div> |
|||
<div class="item-per"> |
|||
<span>较上月</span> |
|||
<img |
|||
v-if="false" |
|||
src="~@/assets/images/shuju/renfang/index/up.png" |
|||
/> |
|||
<img v-else src="~@/assets/images/shuju/renfang/index/down.png" /> |
|||
<b>{{ item.count }}</b> |
|||
<span>人</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="g-right"> |
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img |
|||
src="~@/assets/images/shuju/main/card-title-bg-480.png" |
|||
class="box-title-bg" |
|||
/> |
|||
<div class="box-title-txt">人口分析</div> |
|||
</div> |
|||
|
|||
<div class="m-subbox"></div> |
|||
</div> |
|||
|
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img |
|||
src="~@/assets/images/shuju/main/card-title-bg-480.png" |
|||
class="box-title-bg" |
|||
/> |
|||
<div class="box-title-txt">人口预警</div> |
|||
</div> |
|||
|
|||
<div class="m-subbox"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import gridMap from "@/views/dataBoard/cpts/map/index"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
components: { gridMap }, |
|||
|
|||
data() { |
|||
return { |
|||
orgData: {}, //当前组织对象 |
|||
orgId: "", |
|||
orgLevel: "", |
|||
subAgencyArray: [], |
|||
|
|||
warningData: [], |
|||
}; |
|||
}, |
|||
async mounted() { |
|||
const queryOrgId = getQueryPara("orgId"); |
|||
const queryOrgLevel = getQueryPara("orgLevel"); |
|||
console.log("orgId", queryOrgId); |
|||
if (queryOrgId) { |
|||
this.orgId = queryOrgId; |
|||
this.orgLevel = queryOrgLevel || "agency"; |
|||
} |
|||
|
|||
//加载组织数据 |
|||
await this.loadOrgData(); |
|||
this.getWarningList(); |
|||
}, |
|||
methods: { |
|||
//加载组织数据 |
|||
async getWarningList() { |
|||
const url = "/epmetuser/statsresiwarn/list"; |
|||
let params = { |
|||
id: this.orgData.id, |
|||
level: "agency", |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.warningData = data.map((item) => { |
|||
return { |
|||
code: item.columnName, |
|||
name: item.label, |
|||
count: item.count, |
|||
const: "const", |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async loadOrgData() { |
|||
const url = "/gov/org/agency/maporg"; |
|||
let params = { |
|||
orgId: this.orgId, |
|||
level: this.orgLevel, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.orgData = data; |
|||
this.orgId = this.orgData.id; |
|||
this.orgLevel = this.orgData.level; |
|||
if (data.children && data.children.length > 0) { |
|||
this.subAgencyArray = data.children; |
|||
} else { |
|||
this.subAgencyArray = []; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,129 @@ |
|||
<template> |
|||
<main class="g-main"> |
|||
<!-- tab展示内容 --> |
|||
<template> |
|||
<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<iframe |
|||
:src=" |
|||
$router.currentRoute.meta.iframeURL + |
|||
'?token=' + |
|||
token + |
|||
'&customerId=' + |
|||
customerId |
|||
" |
|||
ref="iframe" |
|||
class="m-iframe" |
|||
id="iframe" |
|||
width="100%" |
|||
height="100%" |
|||
frameborder="0" |
|||
scrolling="yes" |
|||
:style="{ height: $store.state.fixed1920.height - 100 + 'px' }" |
|||
/> |
|||
</template> |
|||
<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<router-view @changeCustomerName="changeCustomerName" /> |
|||
</keep-alive> |
|||
</template> |
|||
</main> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isURL } from "@/utils/validate"; |
|||
import Cookie from "js-cookie"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
iframeUrl: "", |
|||
token: "", |
|||
customerId: "", |
|||
}; |
|||
}, |
|||
watch: { |
|||
// "$router.currentRoute.name": function () { |
|||
// console.log($router.currentRoute); |
|||
// }, |
|||
}, |
|||
created() { |
|||
this.token = localStorage.getItem("token"); |
|||
this.customerId = localStorage.getItem("customerId"); |
|||
}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$emit("changeCustomerName", customerName); |
|||
}, |
|||
// tabs, 是否通过iframe展示 |
|||
tabIsIframe(url) { |
|||
// this.appendIframe(url) |
|||
// this.iframeUrl = |
|||
// url + |
|||
// "?token=" + |
|||
// localStorage.getItem("token") + |
|||
// "&customerId=" + |
|||
// localStorage.getItem("customerId"); |
|||
|
|||
// return /^http[s]?:\/\/.*/.test(url); |
|||
return isURL(url); |
|||
}, |
|||
// tabs, 选中tab |
|||
tabSelectedHandle(tab) { |
|||
tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === tab.name |
|||
)[0]; |
|||
if (tab) { |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { ...tab.params }, |
|||
query: { ...tab.query }, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 删除tab |
|||
tabRemoveHandle(tabName) { |
|||
if (tabName === "home") { |
|||
return false; |
|||
} |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name !== tabName |
|||
); |
|||
if (this.$store.state.contentTabs.length <= 0) { |
|||
this.$store.state.sidebarMenuActiveName = |
|||
this.$store.state.contentTabsActiveName = "home"; |
|||
return false; |
|||
} |
|||
// 当前选中tab被删除 |
|||
if (tabName === this.$store.state.contentTabsActiveName) { |
|||
let tab = |
|||
this.$store.state.contentTabs[ |
|||
this.$store.state.contentTabs.length - 1 |
|||
]; |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { ...tab.params }, |
|||
query: { ...tab.query }, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 关闭其它 |
|||
tabsCloseOtherHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => { |
|||
return ( |
|||
item.name === "home" || |
|||
item.name === this.$store.state.contentTabsActiveName |
|||
); |
|||
} |
|||
); |
|||
}, |
|||
// tabs, 关闭全部 |
|||
tabsCloseAllHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === "home" |
|||
); |
|||
this.$router.push({ name: "home" }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
|||
@ -0,0 +1,336 @@ |
|||
<template> |
|||
<div class="m-topnav"> |
|||
<div class="title">{{ customerName }}综合服务平台数据看板</div> |
|||
<div class="nav-list z-left"> |
|||
<div |
|||
class="nav-item" |
|||
:class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }" |
|||
@click="toPage('/board')" |
|||
> |
|||
<span>人房总览</span> |
|||
</div> |
|||
<div class="nav-item" @click="toPage('/')"> |
|||
<span>人口分析</span> |
|||
</div> |
|||
<div class="nav-item" @click="toPage('/')"> |
|||
<span>人口变化</span> |
|||
</div> |
|||
<div class="nav-item" @click="toPage('/')"> |
|||
<span>人口预警</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="nav-list z-right"> |
|||
<div class="nav-item" @click="toPage('/')"> |
|||
<span>回首页</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="msg"> |
|||
<div class="weather"> |
|||
<img |
|||
v-if="weather.weather == '小雨'" |
|||
src="~@/assets/images/shuju/main/weather/xiaoyu.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '中雨'" |
|||
src="~@/assets/images/shuju/main/weather/zhongyu.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '大雨'" |
|||
src="~@/assets/images/shuju/main/weather/dayu.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '雷雨'" |
|||
src="~@/assets/images/shuju/main/weather/leiyu.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '雷暴'" |
|||
src="~@/assets/images/shuju/main/weather/leibao.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '雨雪'" |
|||
src="~@/assets/images/shuju/main/weather/yuxue.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '阴'" |
|||
src="~@/assets/images/shuju/main/weather/yin.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '雾'" |
|||
src="~@/assets/images/shuju/main/weather/wu.png" |
|||
/> |
|||
<img |
|||
v-if="weather.weather == '风'" |
|||
src="~@/assets/images/shuju/main/weather/feng.png" |
|||
/> |
|||
<img |
|||
v-else-if="weather.weather == '雪'" |
|||
src="~@/assets/images/shuju/main/weather/xue.png" |
|||
/> |
|||
<img |
|||
v-else-if="weather.weather == '多云'" |
|||
src="~@/assets/images/shuju/main/weather/duoyun.png" |
|||
/> |
|||
<img v-else src="~@/assets/images/shuju/main/weather/qing.png" /> |
|||
|
|||
<div>{{ weather.temperature }}℃</div> |
|||
<div>{{ weather.weather }}</div> |
|||
</div> |
|||
|
|||
<div class="date"> |
|||
<div class="date-time">{{ showTime }}</div> |
|||
<div class="date-div"></div> |
|||
<div class="date-week">{{ showWeek }}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<nav v-if="false" class="m-navbar"> |
|||
<div class="navbar__header"> |
|||
<h1 class="navbar__brand" @click="$router.push({ name: 'home' })"> |
|||
<a class="navbar__brand-lg" href="javascript:;">{{ customerName }}</a> |
|||
<a class="navbar__brand-mini" href="javascript:;">{{ |
|||
customerName.slice(0, 2) |
|||
}}</a> |
|||
</h1> |
|||
</div> |
|||
<div class="navbar__body"> |
|||
<el-menu class="navbar__menu mr-auto" mode="horizontal"> |
|||
<el-menu-item |
|||
index="1" |
|||
@click="$store.state.sidebarFold = !$store.state.sidebarFold" |
|||
> |
|||
<svg |
|||
class="icon-svg navbar__icon-menu navbar__icon-menu--switch" |
|||
aria-hidden="true" |
|||
> |
|||
<use xlink:href="#icon-outdent"></use> |
|||
</svg> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item index="2" @click="refresh()"> |
|||
<svg class="icon-svg navbar__icon-menu" aria-hidden="true"> |
|||
<use xlink:href="#icon-sync"></use> |
|||
</svg> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
|
|||
<el-menu |
|||
:default-active="$store.state.mainShuju.activeName" |
|||
:unique-opened="true" |
|||
:collapseTransition="false" |
|||
mode="horizontal" |
|||
class="navbar__menu mr-auto z-div" |
|||
> |
|||
<el-menu-item index="index" @click="toIndexPage"> |
|||
<span>首页</span> |
|||
</el-menu-item> |
|||
|
|||
<template v-for="(menu, idx) in $store.state.mainShuju.menuList"> |
|||
<li |
|||
class="sub-menu" |
|||
:class=" |
|||
$store.state.mainShuju.activeName == menu.id ? 'z-on' : '' |
|||
" |
|||
v-if="menu.children" |
|||
:key="menu.id" |
|||
@click="gotoRouteHandle(menu.id, idx)" |
|||
> |
|||
<span>{{ menu.name }}</span> |
|||
<div class="sub-menu-list"> |
|||
<div |
|||
:class=" |
|||
$store.state.mainShuju.activeName == subMenu.id |
|||
? 'z-on' |
|||
: '' |
|||
" |
|||
:key="subMenu.id" |
|||
@click="gotoRouteHandle(subMenu.id, subIndex)" |
|||
v-for="(subMenu, subIndex) in menu.children" |
|||
> |
|||
{{ subMenu.name }} |
|||
</div> |
|||
</div> |
|||
</li> |
|||
<el-menu-item |
|||
v-else |
|||
:key="menu.id" |
|||
:menu="menu" |
|||
:index="menu.id" |
|||
@click="gotoRouteHandle(menu.id, idx)" |
|||
> |
|||
<span>{{ menu.name }}</span> |
|||
</el-menu-item> |
|||
</template> |
|||
</el-menu> |
|||
|
|||
<el-menu class="navbar__menu" mode="horizontal"> |
|||
<!-- <el-menu-item index="1"> |
|||
<el-dropdown placement="bottom" |
|||
:show-timeout="0"> |
|||
<el-button size="mini">{{ $t('_lang') }}</el-button> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item v-for="(val, key) in i18nMessages" |
|||
:key="key" |
|||
@click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</el-menu-item> --> |
|||
<!-- <el-menu-item index="2"> |
|||
<a href="//www.renren.io/" |
|||
target="_blank"> |
|||
<svg class="icon-svg navbar__icon-menu" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#icon-earth"></use> |
|||
</svg> |
|||
</a> |
|||
</el-menu-item> --> |
|||
<el-menu-item index="3" @click="fullscreenHandle()"> |
|||
<svg class="icon-svg navbar__icon-menu" aria-hidden="true"> |
|||
<use xlink:href="#icon-fullscreen"></use> |
|||
</svg> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item index="4" class="navbar__avatar"> |
|||
<el-dropdown placement="bottom" :show-timeout="0"> |
|||
<span class="el-dropdown-link"> |
|||
<img src="~@/assets/img/staff-default-avatar.png" /> |
|||
<span>{{ $store.state.user.realName }}</span> |
|||
<i class="el-icon-arrow-down"></i> |
|||
</span> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item @click.native="updatePasswordHandle()">{{ |
|||
$t("updatePassword.title") |
|||
}}</el-dropdown-item> |
|||
<el-dropdown-item @click.native="logoutHandle()">{{ |
|||
$t("logout") |
|||
}}</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</div> |
|||
<!-- 弹窗, 修改密码 --> |
|||
<update-password-work |
|||
v-if="updatePassowrdVisible" |
|||
ref="updatePassowrd" |
|||
></update-password-work> |
|||
</nav> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { messages } from "@/i18n"; |
|||
import UpdatePasswordWork from "@/views/main-navbar-update-password-work"; |
|||
import dateFormat from "dai-js/tools/dateFormat"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
inject: ["refresh"], |
|||
data() { |
|||
return { |
|||
showHeader: true, |
|||
i18nMessages: messages, |
|||
updatePassowrdVisible: false, |
|||
customerName: "", |
|||
|
|||
showWeek: "", |
|||
showTime: "", |
|||
|
|||
weather: { |
|||
weather: "晴", |
|||
temperature: "--", |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
UpdatePasswordWork, |
|||
}, |
|||
created() { |
|||
this.changeCustomerName(); |
|||
const customerId = localStorage.getItem("customerId"); |
|||
let siteconfigElement = window.SITE_CONFIG["menuShujuList"]; |
|||
//暂时 亿联街道和 微笑崂山显示 社区治理-》多元化菜单 |
|||
if ( |
|||
"04c0d396e298f13e57aa5904a657eaa6" != customerId && |
|||
"3fdd0380deff5b30f45376cdf995d1c1" != customerId |
|||
) { |
|||
for (let index in siteconfigElement) { |
|||
if (siteconfigElement[index].id == "6") { |
|||
let newMenuArr = siteconfigElement[index].children.filter( |
|||
(item) => item.id !== "duoyuanfuwufenxi" |
|||
); |
|||
siteconfigElement[index].children = newMenuArr; |
|||
} |
|||
} |
|||
} |
|||
this.$store.state.mainShuju.menuList = siteconfigElement; |
|||
|
|||
const pollTime = async () => { |
|||
this.computeCurrentTime(); |
|||
await nextTick(1000); |
|||
pollTime(); |
|||
}; |
|||
pollTime(); |
|||
|
|||
this.getWeatherData(); |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
computeCurrentTime() { |
|||
let now = new Date(); |
|||
let wk = now.getDay(); |
|||
this.showWeek = [ |
|||
"星期日", |
|||
"星期一", |
|||
"星期二", |
|||
"星期三", |
|||
"星期四", |
|||
"星期五", |
|||
"星期六", |
|||
][wk]; |
|||
this.showTime = dateFormat(now, "yyyy-MM-dd hh:mm:ss"); |
|||
}, |
|||
|
|||
toPage(path) { |
|||
this.$router.push({ path }); |
|||
}, |
|||
|
|||
toIndexPage() { |
|||
this.$router.replace("/"); |
|||
}, |
|||
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由 |
|||
gotoRouteHandle(menuId, idx) { |
|||
var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter( |
|||
(item) => item.meta.menuId === menuId |
|||
)[0]; |
|||
if (route) { |
|||
this.$router.push({ name: route.name }); |
|||
this.$store.state.mainShuju.activeName = menuId; |
|||
} |
|||
}, |
|||
|
|||
changeCustomerName() { |
|||
this.customerName = |
|||
localStorage.getItem("customerName") || "数据分析可视化平台"; |
|||
}, |
|||
|
|||
async getWeatherData() { |
|||
const url = |
|||
"https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e"; |
|||
const { data, code, msg } = await requestGet(url, { |
|||
city: this.$store.state.user.areaCode, |
|||
}); |
|||
if (code === 0) { |
|||
console.log("---------------weather", data); |
|||
this.weather = data.lives[0]; |
|||
} else { |
|||
// return this.$message.error("网络错误"); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
|||
@ -0,0 +1,156 @@ |
|||
<template> |
|||
<fixed1920 class="g-fx"> |
|||
<div |
|||
v-loading.fullscreen.lock="loading" |
|||
:element-loading-text="$t('loading')" |
|||
:class="[ |
|||
'g-pg', |
|||
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
|||
{ |
|||
'z-sidebar--noside': true, |
|||
}, |
|||
{ 'z-iframe': $store.state.inIframe }, |
|||
]" |
|||
> |
|||
<template v-if="!loading"> |
|||
<img |
|||
class="i-corner z-left-top" |
|||
src="~@/assets/images/shuju/main/corner-left-top.png" |
|||
/> |
|||
<img |
|||
class="i-corner z-right-top" |
|||
src="~@/assets/images/shuju/main/corner-right-top.png" |
|||
/> |
|||
<img |
|||
class="i-corner z-right-bottom" |
|||
src="~@/assets/images/shuju/main/corner-right-bottom.png" |
|||
/> |
|||
<img |
|||
class="i-corner z-left-bottom" |
|||
src="~@/assets/images/shuju/main/corner-left-bottom.png" |
|||
/> |
|||
|
|||
<main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" /> |
|||
|
|||
<div class="g-cnt"> |
|||
<main-content |
|||
v-if="!$store.state.contentIsNeedRefresh" |
|||
@changeCustomerName="changeCustomerName" |
|||
/> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</fixed1920> |
|||
</template> |
|||
|
|||
<script> |
|||
import MainNavbar from "./main-navbar"; |
|||
import MainContent from "./main-content"; |
|||
import debounce from "lodash/debounce"; |
|||
import { mapGetters } from "vuex"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import fixed1920 from "@/views/components/fixed1920.vue"; |
|||
|
|||
export default { |
|||
provide() { |
|||
return { |
|||
// 刷新 |
|||
refresh() { |
|||
this.$store.state.contentIsNeedRefresh = true; |
|||
this.$nextTick(() => { |
|||
this.$store.state.contentIsNeedRefresh = false; |
|||
}); |
|||
}, |
|||
}; |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
userType: localStorage.getItem("userType"), |
|||
}; |
|||
}, |
|||
components: { |
|||
MainNavbar, |
|||
MainContent, |
|||
fixed1920, |
|||
}, |
|||
|
|||
watch: { |
|||
$route: "routeHandle", |
|||
}, |
|||
async created() { |
|||
this.windowResizeHandle(); |
|||
this.routeHandle(this.$route); |
|||
Promise.all([this.getWorkUserInfo()]).then(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$refs["ref_navbar"].changeCustomerName(customerName); |
|||
}, |
|||
// 窗口改变大小 |
|||
windowResizeHandle() { |
|||
this.$store.state.sidebarFold = |
|||
document.documentElement["clientWidth"] <= 992 || false; |
|||
window.addEventListener( |
|||
"resize", |
|||
debounce(() => { |
|||
this.$store.state.sidebarFold = |
|||
document.documentElement["clientWidth"] <= 992 || false; |
|||
}, 150) |
|||
); |
|||
}, |
|||
// 路由, 监听 |
|||
routeHandle(route) { |
|||
if (!route.meta.isTab) { |
|||
this.$store.state.mainShuju.activeName = ""; |
|||
this.$store.state.mainShuju.contentTabsActiveName = ""; |
|||
return false; |
|||
} |
|||
var tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === route.name |
|||
)[0]; |
|||
if (!tab) { |
|||
tab = { |
|||
...window.SITE_CONFIG["contentTabDefault"], |
|||
...route.meta, |
|||
name: route.name, |
|||
params: { ...route.params }, |
|||
query: { ...route.query }, |
|||
}; |
|||
this.$store.state.contentTabs = |
|||
this.$store.state.contentTabs.concat(tab); |
|||
} |
|||
|
|||
this.$store.state.mainShuju.activeName = tab.menuId; |
|||
this.$store.state.mainShuju.contentTabsActiveName = tab.name; |
|||
}, |
|||
|
|||
// 获取当前管理员信息 |
|||
async getWorkUserInfo() { |
|||
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
|||
let params = {}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$store.state.user = { ...data }; |
|||
console.log("user---hahha", this.$store.state.user); |
|||
localStorage.setItem("roleList", data.roleList); |
|||
localStorage.setItem("customerId", data.customerId); |
|||
localStorage.setItem("staffId", data.id); |
|||
localStorage.setItem("agencyId", data.agencyId); |
|||
localStorage.setItem("level", data.level); |
|||
if (!localStorage.getItem("customerName")) { |
|||
localStorage.setItem("customerName", data.customerName || ""); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<div class="aui-theme-tools" v-show="false" :class="{ 'aui-theme-tools--open': isOpen }"> |
|||
<div class="aui-theme-tools__toggle" @click="isOpen = !isOpen"> |
|||
<svg class="icon-svg" aria-hidden="true"> |
|||
<use xlink:href="#icon-setting"></use> |
|||
</svg> |
|||
</div> |
|||
<div class="aui-theme-tools__content"> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Navbar</h3> |
|||
<el-checkbox |
|||
v-model="$store.state.navbarLayoutType" |
|||
true-label="colorful" |
|||
>colorful 鲜艳</el-checkbox |
|||
> |
|||
</div> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Sidebar</h3> |
|||
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark" |
|||
>dark 黑色</el-checkbox |
|||
> |
|||
</div> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Theme</h3> |
|||
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle"> |
|||
<el-radio |
|||
v-for="item in themeList" |
|||
:key="item.name" |
|||
:label="item.name" |
|||
>{{ `${item.name} ${item.desc}` }}</el-radio |
|||
> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isOpen: false, |
|||
themeList: require('@/element-ui/config.js'), |
|||
themeColor: '' |
|||
} |
|||
}, |
|||
created() { |
|||
let color = window.localStorage.getItem('themeColor') || 'blue' |
|||
this.themeColorChangeHandle(color) |
|||
this.themeColor = color |
|||
}, |
|||
methods: { |
|||
themeColorChangeHandle(val) { |
|||
window.localStorage.setItem('themeColor', val) |
|||
|
|||
var styleList = [ |
|||
{ |
|||
id: 'J_elementTheme', |
|||
url: `${ |
|||
process.env.BASE_URL |
|||
}element-theme/${val}/index.css?t=${new Date().getTime()}` |
|||
}, |
|||
{ |
|||
id: 'J_auiTheme', |
|||
url: `${ |
|||
process.env.BASE_URL |
|||
}element-theme/${val}/aui.css?t=${new Date().getTime()}` |
|||
} |
|||
] |
|||
for (var i = 0; i < styleList.length; i++) { |
|||
var el = document.querySelector(`#${styleList[i].id}`) |
|||
if (el) { |
|||
el.href = styleList[i].url |
|||
continue |
|||
} |
|||
el = document.createElement('link') |
|||
el.id = styleList[i].id |
|||
el.href = styleList[i].url |
|||
el.rel = 'stylesheet' |
|||
document.querySelector('head').appendChild(el) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue