初始化项目
This commit is contained in:
434
src/views/chart/chart.scss
Normal file
434
src/views/chart/chart.scss
Normal file
@@ -0,0 +1,434 @@
|
||||
.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: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
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: var(--el-text-color-primary);
|
||||
.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: var(--el-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(--el-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: var(--el-color-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.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(--el-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(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d-btn {
|
||||
margin-top: 5px;
|
||||
.d-btn-item {
|
||||
border: 1px solid var(--el-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(--el-color-primary);
|
||||
.d-btn-item-left {
|
||||
font-size: 20px;
|
||||
border: 1px solid var(--el-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: var(--el-color-white);
|
||||
padding: 15px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
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: var(--el-color-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
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: var(--el-text-color-primary);
|
||||
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(--el-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(--el-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-title {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.flex-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.task {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
.task-item {
|
||||
flex: 1;
|
||||
color: var(--el-color-white);
|
||||
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(--el-color-primary);
|
||||
.task-first {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
color: var(--el-text-color-primary);
|
||||
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;
|
||||
:deep(.el-progress__text) {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 12px !important;
|
||||
text-align: right;
|
||||
}
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
:deep(.el-progress-bar) {
|
||||
margin-right: -22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/views/chart/chart.ts
Normal file
59
src/views/chart/chart.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* sky 天气
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const skyList = [
|
||||
{
|
||||
v1: '时间',
|
||||
v2: '天气',
|
||||
v3: '温度',
|
||||
v5: '降水',
|
||||
v7: '风力',
|
||||
type: 'title',
|
||||
},
|
||||
{
|
||||
v1: '今天',
|
||||
v2: 'ele-Sunny',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
},
|
||||
{
|
||||
v1: '明天',
|
||||
v2: 'ele-Lightning',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 当前设置状态
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const dBtnList = [
|
||||
{
|
||||
v2: '阳光玫瑰种植',
|
||||
v3: '126天',
|
||||
v4: '设备在线',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 当前设备监测
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const chartData4List = [
|
||||
{
|
||||
label: '温度',
|
||||
},
|
||||
{
|
||||
label: '光照',
|
||||
},
|
||||
{
|
||||
label: '湿度',
|
||||
},
|
||||
{
|
||||
label: '风力',
|
||||
},
|
||||
];
|
||||
107
src/views/chart/head.vue
Normal file
107
src/views/chart/head.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<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 lang="ts">
|
||||
import { reactive, toRefs, onBeforeMount, onUnmounted, defineComponent } from 'vue';
|
||||
import { formatDate } from '/@/utils/formatTime';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'chartHead',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
time: {
|
||||
txt: '',
|
||||
fun: 0,
|
||||
},
|
||||
});
|
||||
// 初始化时间
|
||||
const initTime = () => {
|
||||
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||
state.time.fun = window.setInterval(() => {
|
||||
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||
}, 1000);
|
||||
};
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
initTime();
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.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(--el-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(--el-color-primary),
|
||||
var(--el-color-primary-light-3) 25%,
|
||||
var(--el-color-primary) 50%,
|
||||
var(--el-color-primary-light-3) 75%,
|
||||
var(--el-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(--el-color-primary-light-9), var(--el-color-primary)) 1 10;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
492
src/views/chart/index.vue
Normal file
492
src/views/chart/index.vue
Normal file
@@ -0,0 +1,492 @@
|
||||
<template>
|
||||
<div class="chart-scrollbar layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="chart-warp">
|
||||
<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">
|
||||
<SvgIcon name="ele-Sunny" class="sky-left" />
|
||||
<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>
|
||||
<SvgIcon :name="v.v2" />
|
||||
</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">
|
||||
<SvgIcon name="ele-Odometer" class="i-bg1" />
|
||||
<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">
|
||||
<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
|
||||
<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">
|
||||
<SvgIcon name="ele-VideoPlay" class="i-bg3" />
|
||||
<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 style="height: 100%" ref="chartsWarningRef"></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 style="height: 100%" ref="chartsCenterOneRef"></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 style="height: 100%" ref="chartsMonitorRef"></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 style="height: 100%" ref="chartsSevenDaysRef"></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 style="height: 100%" ref="chartsInvestmentRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, onActivated, defineComponent } from 'vue';
|
||||
import ChartHead from '/@/views/chart/head.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-wordcloud';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import { skyList, dBtnList, chartData4List } from '/@/views/chart/chart';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'chartIndex',
|
||||
components: { ChartHead },
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
skyList,
|
||||
dBtnList,
|
||||
chartData4List,
|
||||
myCharts: [],
|
||||
});
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 初始化中间图表1
|
||||
const initChartsCenterOne = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsCenterOneRef);
|
||||
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: 'gfastV3', value: 520 },
|
||||
{ name: 'lyt', value: 520 },
|
||||
{ name: 'next-admin', value: 500 },
|
||||
{ name: '更名', value: 420 },
|
||||
{ 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);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化近7天产品追溯扫码统计
|
||||
const initChartsSevenDays = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsSevenDaysRef);
|
||||
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);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化近30天预警总数
|
||||
const initChartsWarning = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsWarningRef);
|
||||
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);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化当前设备监测
|
||||
const initChartsMonitor = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
|
||||
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);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 初始化近7天投入品记录
|
||||
const initChartsInvestment = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsInvestmentRef);
|
||||
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);
|
||||
(<any>state.myCharts).push(myChart);
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResizeFun = () => {
|
||||
nextTick(() => {
|
||||
for (let i = 0; i < state.myCharts.length; i++) {
|
||||
(<any>state.myCharts[i]).resize();
|
||||
}
|
||||
});
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', initEchartsResizeFun);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initChartsCenterOne();
|
||||
initChartsSevenDays();
|
||||
initChartsWarning();
|
||||
initChartsMonitor();
|
||||
initChartsInvestment();
|
||||
initEchartsResize();
|
||||
});
|
||||
// 由于页面缓存原因，keep-alive
|
||||
onActivated(() => {
|
||||
initEchartsResizeFun();
|
||||
});
|
||||
// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
|
||||
watch(
|
||||
() => isTagsViewCurrenFull.value,
|
||||
() => {
|
||||
initEchartsResizeFun();
|
||||
}
|
||||
);
|
||||
return {
|
||||
initTagViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './chart.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user