'admin-21.02.20:新增大数据图表界面、修复页面切换时滚动条不置顶问题'
This commit is contained in:
lyt-Top
parent
067089e0b2
commit
88510d48f3
@ -7,6 +7,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"clipboard": "^2.0.6",
|
||||
"echarts": "^5.0.2",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "^1.0.2-beta.32",
|
||||
"mitt": "^2.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
@ -29,4 +31,4 @@
|
||||
"typescript": "^4.1.5",
|
||||
"vite": "^2.0.0-beta.69"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -183,7 +183,7 @@ export const dynamicRoutes = [
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-xitongshezhi'
|
||||
icon: 'iconfont icon-caidan'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
||||
@ -498,33 +498,33 @@
|
||||
@include Tag(danger, whites, danger-light-3);
|
||||
}
|
||||
|
||||
/* Tag 标签
|
||||
/* Progress 进度条
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-progress-bar__inner {
|
||||
background-color: set-color(primary);
|
||||
background-color: set-color(primary) !important;
|
||||
}
|
||||
// success
|
||||
.el-progress.is-success .el-progress-bar__inner {
|
||||
background-color: set-color(success);
|
||||
background-color: set-color(success) !important;
|
||||
}
|
||||
.el-progress.is-success .el-progress__text {
|
||||
color: set-color(success);
|
||||
color: set-color(success) !important;
|
||||
}
|
||||
// warning
|
||||
.el-progress.is-warning .el-progress-bar__inner {
|
||||
background-color: set-color(warning);
|
||||
background-color: set-color(warning) !important;
|
||||
}
|
||||
.el-progress.is-warning .el-progress__text {
|
||||
color: set-color(warning);
|
||||
color: set-color(warning) !important;
|
||||
}
|
||||
// danger
|
||||
.el-badge__content,
|
||||
.el-progress.is-exception .el-progress-bar__inner {
|
||||
background-color: set-color(danger);
|
||||
background-color: set-color(danger) !important;
|
||||
}
|
||||
.el-progress.is-exception .el-progress__text {
|
||||
color: set-color(danger);
|
||||
color: set-color(danger) !important;
|
||||
}
|
||||
|
||||
/* Pagination 分页
|
||||
@ -920,7 +920,7 @@
|
||||
background-color: set-color(primary-light-9);
|
||||
}
|
||||
|
||||
/* Tag 标签
|
||||
/* Backtop 回到顶部
|
||||
------------------------------- */
|
||||
.el-backtop {
|
||||
color: set-color(primary);
|
||||
|
||||
90
vue-admin-wonderful-next/src/theme/media/chart.scss
Normal file
90
vue-admin-wonderful-next/src/theme/media/chart.scss
Normal file
@ -0,0 +1,90 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.big-data-down-left {
|
||||
width: 100% !important;
|
||||
flex-direction: unset !important;
|
||||
flex-wrap: wrap;
|
||||
.flex-warp-item {
|
||||
min-height: 196.24px;
|
||||
padding: 0 7.5px 15px 15px !important;
|
||||
.flex-warp-item-box {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #ebeef5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center {
|
||||
width: 100% !important;
|
||||
.big-data-down-center-one,
|
||||
.big-data-down-center-two {
|
||||
min-height: 196.24px;
|
||||
padding-left: 15px !important;
|
||||
.big-data-down-center-one-content {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #ebeef5 !important;
|
||||
}
|
||||
.flex-warp-item-box {
|
||||
@extend .big-data-down-center-one-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-right {
|
||||
.flex-warp-item {
|
||||
&:nth-of-type(2) {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
&:last-of-type {
|
||||
.flex-warp-item-box {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度大于768px小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $sm) and (max-width: $lg) {
|
||||
.chart-warp-bottom {
|
||||
.big-data-down-left {
|
||||
width: 50% !important;
|
||||
}
|
||||
.big-data-down-center {
|
||||
width: 50% !important;
|
||||
}
|
||||
.big-data-down-right {
|
||||
.flex-warp-item {
|
||||
width: 50% !important;
|
||||
&:nth-of-type(2) {
|
||||
padding-left: 7.5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $lg) {
|
||||
.chart-warp-top {
|
||||
.up-left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.chart-warp-bottom {
|
||||
overflow-y: auto !important;
|
||||
flex-wrap: wrap;
|
||||
.big-data-down-right {
|
||||
width: 100% !important;
|
||||
flex-direction: unset !important;
|
||||
flex-wrap: wrap;
|
||||
.flex-warp-item {
|
||||
min-height: 196.24px;
|
||||
padding: 0 7.5px 15px 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,3 +4,4 @@
|
||||
@import './personal.scss';
|
||||
@import './tagsView.scss';
|
||||
@import './home.scss';
|
||||
@import './chart.scss';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// 字体图标 url
|
||||
const cssCdnUrlList: Array<string> = ['//at.alicdn.com/t/font_2298093_ri4yz1f9b7o.css']
|
||||
// 第三方 js url
|
||||
const jsCdnUrlList: Array<string> = ['https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js']
|
||||
const jsCdnUrlList: Array<string> = []
|
||||
|
||||
// 动态设置字体图标
|
||||
export function setCssCdn() {
|
||||
|
||||
430
vue-admin-wonderful-next/src/views/chart/chart.scss
Normal file
430
vue-admin-wonderful-next/src/views/chart/chart.scss
Normal file
@ -0,0 +1,430 @@
|
||||
.chart-scrollbar {
|
||||
.chart-warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.chart-warp-bottom {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.big-data-down-left,
|
||||
.big-data-down-right {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.flex-warp-item {
|
||||
padding: 0 7.5px 15px 15px;
|
||||
width: 100%;
|
||||
height: 33.33%;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.flex-title {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.flex-title-small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.flex-content {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
.flex-content-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-left {
|
||||
color: #303133;
|
||||
.sky {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sky-left {
|
||||
font-size: 30px;
|
||||
}
|
||||
.sky-center {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
font {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.span {
|
||||
background: #22bc76;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.sky-right {
|
||||
span {
|
||||
font-size: 30px;
|
||||
}
|
||||
font {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sky-dd {
|
||||
.sky-dl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
div {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.sky-dl-first {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.d-states {
|
||||
display: flex;
|
||||
.d-states-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
i {
|
||||
font-size: 20px;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 1;
|
||||
color: #ffffff;
|
||||
}
|
||||
.i-bg1 {
|
||||
background: #22bc76;
|
||||
}
|
||||
.i-bg2 {
|
||||
background: #e2356d;
|
||||
}
|
||||
.i-bg3 {
|
||||
background: #43bbef;
|
||||
}
|
||||
.d-states-flex {
|
||||
overflow: hidden;
|
||||
padding: 0 10px 0;
|
||||
.d-states-item-label {
|
||||
color: var(--color-primary);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.d-states-item-value {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d-btn {
|
||||
margin-top: 5px;
|
||||
.d-btn-item {
|
||||
border: 1px solid var(--color-primary);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 35px;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
color: var(--color-primary);
|
||||
.d-btn-item-left {
|
||||
font-size: 20px;
|
||||
border: 1px solid var(--color-primary);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.d-btn-item-center {
|
||||
padding: 0 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.d-btn-item-eight {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.big-data-down-center-one {
|
||||
height: 66.67%;
|
||||
padding: 0 7.5px 15px;
|
||||
.big-data-down-center-one-content {
|
||||
height: 100%;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-center-two {
|
||||
padding: 0 7.5px 15px;
|
||||
height: 33.33%;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.flex-title {
|
||||
margin-bottom: 15px;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.flex-title-small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.flex-content {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
height: calc(100% - 30px);
|
||||
.flex-content-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
.monitor-item {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.monitor-wave {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #f4f4f4;
|
||||
animation: roateOne 10s linear infinite;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
bottom: 10px;
|
||||
border-radius: 60%;
|
||||
}
|
||||
&::after {
|
||||
bottom: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: 37%;
|
||||
}
|
||||
.monitor-z-index {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: var(--color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@keyframes roateOne {
|
||||
0% {
|
||||
transform: translate(-50%, 0) rotateZ(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -2%) rotateZ(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, 0%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
.monitor-active {
|
||||
background-color: #22bc76;
|
||||
.monitor-z-index {
|
||||
color: #22bc76;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-content-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-data-down-right {
|
||||
.flex-warp-item {
|
||||
padding: 0 15px 15px 7.5px;
|
||||
.flex-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.task {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
.task-item {
|
||||
flex: 1;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.task-item-box {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50% 50%, 50% 50%;
|
||||
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
||||
background-image: linear-gradient(#19d4ae, #19d4ae),
|
||||
linear-gradient(#5ab1ef, #5ab1ef),
|
||||
linear-gradient(#fa6e86, #fa6e86),
|
||||
linear-gradient(#ffb980, #ffb980);
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.task-item-value {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.task-item-label {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.task1 {
|
||||
&::after {
|
||||
background: #5492be;
|
||||
}
|
||||
}
|
||||
.task2 {
|
||||
&::after {
|
||||
background: #43a177;
|
||||
}
|
||||
}
|
||||
.task3 {
|
||||
&::after {
|
||||
background: #a76077;
|
||||
}
|
||||
}
|
||||
}
|
||||
.task-first-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
color: var(--color-primary);
|
||||
.task-first {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
color: #303133;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
.progress-item {
|
||||
height: 33.33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.progress-box {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
::v-deep(.el-progress__text) {
|
||||
color: #303133;
|
||||
font-size: 12px !important;
|
||||
text-align: right;
|
||||
}
|
||||
::v-deep(.el-progress-bar__outer) {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
::v-deep(.el-progress-bar) {
|
||||
margin-right: -22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
78
vue-admin-wonderful-next/src/views/chart/chart.ts
Normal file
78
vue-admin-wonderful-next/src/views/chart/chart.ts
Normal file
@ -0,0 +1,78 @@
|
||||
// sky 天气
|
||||
export const skyList = [
|
||||
{
|
||||
v1: "时间",
|
||||
v2: "天气",
|
||||
v3: "温度",
|
||||
v5: "降水",
|
||||
v7: "风力",
|
||||
type: "title",
|
||||
},
|
||||
{
|
||||
v1: "今天",
|
||||
v2: "el-icon-cloudy-and-sunny",
|
||||
v3: "20°/26°",
|
||||
v5: "50%",
|
||||
v7: "13m/s",
|
||||
},
|
||||
{
|
||||
v1: "明天",
|
||||
v2: "el-icon-lightning",
|
||||
v3: "20°/26°",
|
||||
v5: "50%",
|
||||
v7: "13m/s",
|
||||
},
|
||||
];
|
||||
|
||||
// 当前设置状态
|
||||
export const dBtnList = [
|
||||
{
|
||||
v2: "阳光玫瑰种植",
|
||||
v3: "126天",
|
||||
v4: "设备在线",
|
||||
}
|
||||
];
|
||||
|
||||
// 当前设备监测
|
||||
export const chartData4List = [
|
||||
{
|
||||
label: "温度",
|
||||
},
|
||||
{
|
||||
label: "光照",
|
||||
},
|
||||
{
|
||||
label: "湿度",
|
||||
},
|
||||
{
|
||||
label: "风力",
|
||||
}
|
||||
];
|
||||
|
||||
// 3DEarth 地图周围按钮组
|
||||
export const earth3DBtnList = [
|
||||
{
|
||||
topLevelClass: "fixed-top",
|
||||
icon: "el-icon-s-marketing",
|
||||
label: "环境监测",
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
topLevelClass: "fixed-right",
|
||||
icon: "el-icon-s-cooperation",
|
||||
label: "精准管理",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
topLevelClass: "fixed-bottom",
|
||||
icon: "el-icon-s-order",
|
||||
label: "数据报表",
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
topLevelClass: "fixed-left",
|
||||
icon: "el-icon-s-claim",
|
||||
label: "产品追溯",
|
||||
type: 3,
|
||||
},
|
||||
];
|
||||
117
vue-admin-wonderful-next/src/views/chart/head.vue
Normal file
117
vue-admin-wonderful-next/src/views/chart/head.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="big-data-up mb15">
|
||||
<div class="up-left">
|
||||
<i class="el-icon-time mr5"></i>
|
||||
<span>{{ time.txt }}</span>
|
||||
</div>
|
||||
<div class="up-center">
|
||||
<span>智慧农业系统平台</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs, onBeforeMount, onUnmounted } from 'vue'
|
||||
import { formatDate } from "/@/utils/formatTime"
|
||||
export default {
|
||||
name: "chartHead",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
time: {
|
||||
txt: "",
|
||||
fun: null,
|
||||
}
|
||||
})
|
||||
// 初始化时间
|
||||
const initTime = () => {
|
||||
state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||||
state.time.fun = setInterval(() => {
|
||||
state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||||
}, 1000);
|
||||
}
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
initTime()
|
||||
})
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
clearInterval(state.time.fun)
|
||||
})
|
||||
return {
|
||||
...toRefs(state)
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.big-data-up {
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
color: var(--color-primary);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.up-left {
|
||||
position: absolute;
|
||||
}
|
||||
.up-center {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
background-image: -webkit-linear-gradient(
|
||||
left,
|
||||
var(--color-primary),
|
||||
var(--color-primary-light-1) 25%,
|
||||
var(--color-primary) 50%,
|
||||
var(--color-primary-light-1) 75%,
|
||||
var(--color-primary)
|
||||
);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
background-size: 200% 100%;
|
||||
-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||
animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||
-webkit-box-reflect: below -2px -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
from(transparent),
|
||||
to(hsla(0, 0%, 100%, 0.1))
|
||||
);
|
||||
position: relative;
|
||||
@keyframes masked-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 1px transparent solid;
|
||||
border-image: linear-gradient(
|
||||
to right,
|
||||
var(--color-primary-light-9),
|
||||
var(--color-primary)
|
||||
)
|
||||
1 10;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,21 +1,476 @@
|
||||
<template>
|
||||
<div>
|
||||
chartIndex
|
||||
<el-input v-model="val"></el-input>
|
||||
<div class="chart-scrollbar" :style="{height: `calc(100vh - ${initTagViewHeight}`}">
|
||||
<div class="chart-warp layout-view-bg-white">
|
||||
<div class="chart-warp-top">
|
||||
<ChartHead />
|
||||
</div>
|
||||
<div class="chart-warp-bottom">
|
||||
<!-- 左边 -->
|
||||
<div class="big-data-down-left">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">天气预报</div>
|
||||
<div class="flex-content">
|
||||
<div class="sky">
|
||||
<i class="sky-left el-icon-cloudy-and-sunny"></i>
|
||||
<div class="sky-center">
|
||||
<div class="mb2">
|
||||
<span>多云转晴</span>
|
||||
<span>东南风</span>
|
||||
<span class="span ml5">良</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sky-right">
|
||||
<span>25</span>
|
||||
<span>°C</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sky-dd">
|
||||
<div class="sky-dl" v-for="(v,k) in skyList" :key="k" :class="{'sky-dl-first': k === 1}">
|
||||
<div>{{v.v1}}</div>
|
||||
<div v-if="v.type === 'title'">{{v.v2}}</div>
|
||||
<div v-else>
|
||||
<i :class="v.v2"></i>
|
||||
</div>
|
||||
<div>{{v.v3}}</div>
|
||||
<div class="tip">{{v.v5}}</div>
|
||||
<div>{{v.v7}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">当前设备状态</div>
|
||||
<div class="flex-content flex-content-overflow">
|
||||
<div class="d-states">
|
||||
<div class="d-states-item">
|
||||
<i class="el-icon-odometer i-bg1"></i>
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">设备</div>
|
||||
<div class="d-states-item-value">99</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<i class="el-icon-first-aid-kit i-bg2"></i>
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">预警</div>
|
||||
<div class="d-states-item-value">10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<i class="el-icon-video-play i-bg3"></i>
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">运行</div>
|
||||
<div class="d-states-item-value">20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-btn">
|
||||
<div class="d-btn-item" v-for="(v,k) in dBtnList" :key="k">
|
||||
<i class="d-btn-item-left el-icon-money"></i>
|
||||
<div class="d-btn-item-center">
|
||||
<div>{{v.v2}}|{{v.v3}}</div>
|
||||
</div>
|
||||
<div class="d-btn-item-eight">{{v.v4}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">近30天预警总数</div>
|
||||
<div class="flex-content">
|
||||
<div id="chartsWarning" style="height:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间 -->
|
||||
<div class="big-data-down-center">
|
||||
<div class="big-data-down-center-one">
|
||||
<div class="big-data-down-center-one-content">
|
||||
<div id="chartsCenterOne" style="height:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-data-down-center-two">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>当前设备监测</span>
|
||||
<span class="flex-title-small">单位：次</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div class="flex-content-left">
|
||||
<div class="monitor-item" v-for="(v,k) in chartData4List" :key="k">
|
||||
<div class="monitor-wave">
|
||||
<div class="monitor-z-index">
|
||||
<div class="monitor-item-label">{{v.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-content-right">
|
||||
<div id="chartsMonitor" style="height:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边 -->
|
||||
<div class="big-data-down-right">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>近7天产品追溯扫码统计</span>
|
||||
<span class="flex-title-small">单位：次</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div id="chartsSevenDays" style="height:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">当前任务统计</div>
|
||||
<div class="flex-content">
|
||||
<div class="task">
|
||||
<div class="task-item task-first-item">
|
||||
<div class="task-item-value task-first">25</div>
|
||||
<div class="task-item-label">待办任务</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task1">
|
||||
<div class="task-item-value">12</div>
|
||||
<div class="task-item-label">施肥</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task2">
|
||||
<div class="task-item-value">3</div>
|
||||
<div class="task-item-label">施药</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<div class="task-item-box task3">
|
||||
<div class="task-item-value">5</div>
|
||||
<div class="task-item-label">农事</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-item">
|
||||
<span>施肥率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="70" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>施药率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="36" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>农事率</span>
|
||||
<div class="progress-box">
|
||||
<el-progress :percentage="91" color="#43bdf0"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="flex-title">
|
||||
<span>近7天投入品记录</span>
|
||||
<span class="flex-title-small">单位：件</span>
|
||||
</div>
|
||||
<div class="flex-content">
|
||||
<div id="chartsInvestment" style="height:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from "vue";
|
||||
import { toRefs, reactive, computed, onMounted } from "vue";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import ChartHead from "/@/views/chart/head.vue";
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-wordcloud";
|
||||
import {
|
||||
skyList,
|
||||
dBtnList,
|
||||
chartData4List,
|
||||
earth3DBtnList,
|
||||
} from "/@/views/chart/chart.ts";
|
||||
export default {
|
||||
name: "chartIndex",
|
||||
components: { ChartHead },
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
val: "",
|
||||
tagViewHeight: "",
|
||||
skyList,
|
||||
dBtnList,
|
||||
chartData4List,
|
||||
earth3DBtnList,
|
||||
});
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
});
|
||||
// 初始化中间图表1
|
||||
const initChartsCenterOne = () => {
|
||||
const myChart = echarts.init(document.getElementById("chartsCenterOne"));
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: "wordCloud",
|
||||
sizeRange: [12, 40],
|
||||
rotationRange: [0, 0],
|
||||
rotationStep: 45,
|
||||
gridSize: Math.random() * 20 + 5,
|
||||
shape: "circle",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
textStyle: {
|
||||
fontFamily: "sans-serif",
|
||||
fontWeight: "bold",
|
||||
color: function () {
|
||||
return `rgb(${[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(",")})`;
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: "vue-admin-wonderful-next", value: 520 },
|
||||
{ name: "lyt", value: 520 },
|
||||
{ name: "wonderful", value: 520 },
|
||||
{ name: "智慧农业", value: 520 },
|
||||
{ name: "男神", value: 2.64 },
|
||||
{ name: "好身材", value: 4.03 },
|
||||
{ name: "校草", value: 24.95 },
|
||||
{ name: "酷", value: 4.04 },
|
||||
{ name: "时尚", value: 5.27 },
|
||||
{ name: "阳光活力", value: 5.8 },
|
||||
{ name: "初恋", value: 3.09 },
|
||||
{ name: "英俊潇洒", value: 24.71 },
|
||||
{ name: "霸气", value: 6.33 },
|
||||
{ name: "腼腆", value: 2.55 },
|
||||
{ name: "蠢萌", value: 3.88 },
|
||||
{ name: "青春", value: 8.04 },
|
||||
{ name: "网红", value: 5.87 },
|
||||
{ name: "萌", value: 6.97 },
|
||||
{ name: "认真", value: 2.53 },
|
||||
{ name: "古典", value: 2.49 },
|
||||
{ name: "温柔", value: 3.91 },
|
||||
{ name: "有个性", value: 3.25 },
|
||||
{ name: "可爱", value: 9.93 },
|
||||
{ name: "幽默诙谐", value: 3.65 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 初始化近7天产品追溯扫码统计
|
||||
const initChartsSevenDays = () => {
|
||||
const myChart = echarts.init(document.getElementById("chartsSevenDays"));
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "邮件营销",
|
||||
type: "line",
|
||||
stack: "总量",
|
||||
data: [12, 32, 11, 34, 90, 23, 21],
|
||||
},
|
||||
{
|
||||
name: "联盟广告",
|
||||
type: "line",
|
||||
stack: "总量",
|
||||
data: [22, 82, 91, 24, 90, 30, 30],
|
||||
},
|
||||
{
|
||||
name: "视频广告",
|
||||
type: "line",
|
||||
stack: "总量",
|
||||
data: [50, 32, 18, 14, 90, 30, 50],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 初始化近30天预警总数
|
||||
const initChartsWarning = () => {
|
||||
const myChart = echarts.init(document.getElementById("chartsWarning"));
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "面积模式",
|
||||
type: "pie",
|
||||
radius: [20, 50],
|
||||
center: ["50%", "50%"],
|
||||
roseType: "area",
|
||||
itemStyle: {
|
||||
borderRadius: 8,
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: "监测设备预警" },
|
||||
{ value: 38, name: "天气预警" },
|
||||
{ value: 32, name: "任务预警" },
|
||||
{ value: 30, name: "病虫害预警" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 初始化当前设备监测
|
||||
const initChartsMonitor = () => {
|
||||
const myChart = echarts.init(document.getElementById("chartsMonitor"));
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle: {
|
||||
color: "#289df5",
|
||||
borderColor: "#289df5",
|
||||
areaStyle: {
|
||||
type: "default",
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
data: [20, 32, 31, 34, 12, 13, 20],
|
||||
type: "line",
|
||||
areaStyle: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 初始化近7天投入品记录
|
||||
const initChartsInvestment = () => {
|
||||
const myChart = echarts.init(document.getElementById("chartsInvestment"));
|
||||
const option = {
|
||||
grid: {
|
||||
top: 15,
|
||||
right: 15,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20, 15, 80, 70, 11, 30],
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initChartsCenterOne();
|
||||
initChartsSevenDays();
|
||||
initChartsWarning();
|
||||
initChartsMonitor();
|
||||
initChartsInvestment();
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./chart.scss";
|
||||
</style>
|
||||
@ -28,7 +28,7 @@
|
||||
</el-row>
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="mb15">
|
||||
<el-card shadow="hover" header="实验室使用情况">
|
||||
<el-card shadow="hover" header="商品销售情况">
|
||||
<div id="homeLaboratory" style="height:200px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -50,8 +50,8 @@
|
||||
</el-row>
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-warning-media">
|
||||
<el-card shadow="hover" header="预警信息">
|
||||
<el-table :data="tableData.data" style="width: 100%;" height="200" stripe>
|
||||
<el-card shadow="hover" header="预警信息" class="home-warning-card">
|
||||
<el-table :data="tableData.data" style="width: 100%;" stripe>
|
||||
<el-table-column prop="date" label="时间"></el-table-column>
|
||||
<el-table-column prop="name" label="实验室名称"></el-table-column>
|
||||
<el-table-column prop="address" label="报警内容"></el-table-column>
|
||||
@ -95,6 +95,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { topCardItemList, environmentList, activitiesList } from "./mock.ts";
|
||||
export default {
|
||||
name: "home",
|
||||
@ -329,6 +330,12 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-warning-card {
|
||||
height: 292px;
|
||||
::v-deep(.el-card) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.home-dynamic {
|
||||
height: 200px;
|
||||
.home-dynamic-item {
|
||||
|
||||
@ -72,6 +72,7 @@ export default defineComponent({
|
||||
() => route.path,
|
||||
() => {
|
||||
initCurrentRouteMeta(route.meta);
|
||||
proxy.$refs.layoutScrollbarRef.wrap.scrollTop = 0;
|
||||
}
|
||||
);
|
||||
return {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<Aside />
|
||||
<el-container class="flex-center layout-backtop">
|
||||
<Header v-if="isFixedHeader" />
|
||||
<el-scrollbar>
|
||||
<el-scrollbar ref="layoutDefaultsScrollbarRef">
|
||||
<Header v-if="!isFixedHeader" />
|
||||
<Main />
|
||||
</el-scrollbar>
|
||||
@ -13,7 +13,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed } from 'vue'
|
||||
import { computed, getCurrentInstance, watch } from 'vue'
|
||||
import { useRoute } from "vue-router";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import Aside from '/@/views/layout/component/aside.vue';
|
||||
import Header from '/@/views/layout/component/header.vue';
|
||||
@ -22,10 +23,19 @@ export default {
|
||||
name: 'layoutDefaults',
|
||||
components: { Aside, Header, Main },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const isFixedHeader = computed(() => {
|
||||
return store.state.themeConfig.isFixedHeader;
|
||||
});
|
||||
// 监听路由的变化
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
proxy.$refs.layoutDefaultsScrollbarRef.wrap.scrollTop = 0;
|
||||
}
|
||||
);
|
||||
return {
|
||||
isFixedHeader
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user