JiaSu
/
sugarbreed-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加首页模块

Browse Source
master
贾肃 5 months ago
parent 748e4b3111
commit ebeb47ad6e
1 changed files with 589 additions and 183 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 432
      src/views/index.vue

432
src/views/index.vue
Unescape View File

@ -8,19 +8,151 @@
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<div class="card-header-left">
<div class="card-header-title card-header-left" style="line-height: 30px;">
<span>基地/资源圃统计</span>
</div>
<div class="card-header-right">
<el-select :model-value="1">
<el-option :value="1" label="2023年种植季"></el-option>
<el-select v-model="plantingSeason">
<el-option v-for="item in plantingSeasonList" :value="item.value" :label="item.label"></el-option>
</el-select>
</div>
</div>
</template>
<div class="body">
<el-divider border-style="dashed" />
<el-divider border-style="dashed" />
<el-row style="text-align: center">
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
个
</template>
</el-statistic>
</div>
基地/资源圃总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
块
</template>
</el-statistic>
</div>
地块总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
亩
</template>
</el-statistic>
</div>
地块总面积
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
个
</template>
</el-statistic>
</div>
网格地块总数量
</el-col>
</el-row>
<el-divider border-style="dashed"/>
<div class="card-header-title">
智能育种基地
</div>
<el-row class="card-body-row">
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
个
</template>
</el-statistic>
</div>
基地/资源圃总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
块
</template>
</el-statistic>
</div>
地块总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
亩
</template>
</el-statistic>
</div>
地块总面积
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
个
</template>
</el-statistic>
</div>
网格地块总数量
</el-col>
</el-row>
<el-divider border-style="dashed"/>
<div class="card-header-title">
种质资源圃
</div>
<el-row class="card-body-row">
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
个
</template>
</el-statistic>
</div>
基地/资源圃总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
块
</template>
</el-statistic>
</div>
地块总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
亩
</template>
</el-statistic>
</div>
地块总面积
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
个
</template>
</el-statistic>
</div>
网格地块总数量
</el-col>
</el-row>
</div>
</el-card>
</el-col>
@ -30,9 +162,56 @@
<div class="clearfix">
<span>数据采集设备统计</span>
</div>
</template>
<div class="body">
<div class="body" style="margin: -5px 0">
<el-row class="card-body-row" :gutter="20">
<el-col :xs="12" :sm="12" :md="6" :lg="6" style="border-right: 1px #dcdfe6 dashed;margin: 10px 0;padding-top: 10px">
<div class="card-body-number">
<el-statistic :value="4378">
<template #suffix>
台
</template>
</el-statistic>
</div>
数据采集设备总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-round">
<div class="card-body-number">
<el-statistic :value="43">
<template #suffix>
台
</template>
</el-statistic>
</div>
气象站
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-round">
<div class="card-body-number">
<el-statistic :value="43">
<template #suffix>
台
</template>
</el-statistic>
</div>
摄像头
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-round">
<div class="card-body-number">
<el-statistic :value="43">
<template #suffix>
台
</template>
</el-statistic>
</div>
其他设备
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
@ -44,6 +223,14 @@
</div>
</template>
<div class="body">
<el-row class="card-body-row" :gutter="20">
<el-col :span="8" v-for="link in Links">
<div class="links" @click="goTarget(link.url)">
<el-image :src="link.icon"/>
<p class="links-label">{{link.label}}</p>
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
@ -59,6 +246,50 @@
<span>表型/基因/环境数据</span>
</div>
</template>
<div class="body">
<el-row class="card-body-row" :gutter="20">
<el-col :xs="12" :sm="12" :md="6" :lg="6" style="border-right: 1px #dcdfe6 dashed;">
<div class="card-body-number">
<el-statistic :value="8300">
<template #suffix>
条
</template>
</el-statistic>
</div>
数据总量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="2300">
<template #suffix>
条
</template>
</el-statistic>
</div>
甘蔗表型数据总量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="2000">
<template #suffix>
条
</template>
</el-statistic>
</div>
环境数据总数量
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6">
<div class="card-body-number">
<el-statistic :value="4000">
<template #suffix>
条
</template>
</el-statistic>
</div>
基因型数据总数量
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
@ -67,10 +298,12 @@
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>基地气象数据</span>
<div class="card-header-left">基地气象数据</div>
<div class="card-header-right">单位：条</div>
</div>
</template>
<div class="body">
<div ref="meteorologicalCharts" class="charts"></div>
</div>
</el-card>
</el-col>
@ -78,10 +311,12 @@
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>基地土壤数据</span>
<div class="card-header-left">基地土壤数据</div>
<div class="card-header-right">单位：条</div>
</div>
</template>
<div class="body">
<div ref="soilCharts" class="charts"></div>
</div>
</el-card>
</el-col>
@ -91,10 +326,12 @@
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>基地表型数据</span>
<div class="card-header-left">基地表型数据</div>
<div class="card-header-right">单位：条</div>
</div>
</template>
<div class="body">
<div ref="tableCharts" class="charts"></div>
</div>
</el-card>
</el-col>
@ -106,6 +343,14 @@
</div>
</template>
<div class="body">
<el-row class="card-body-row" :gutter="20">
<el-col :span="12" v-for="link in Links">
<div class="links" @click="goTarget(link.url)">
<el-image :src="link.icon"/>
<p class="links-label">{{link.label}}</p>
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
@ -117,7 +362,122 @@
<script setup name="Index">
const version = ref('3.8.7')
import * as echarts from 'echarts';
const plantingSeason = ref(2023)
const plantingSeasonList = [
{value:2023,label:'2023年种植季'},
{value:2024,label:'2024年种植季'},
]
// 气象图表
const meteorologicalCharts = ref(null)
// 土壤图表
const soilCharts = ref(null)
// 表型图表
const tableCharts = ref(null)
onMounted(()=>{
const meteorologicalIntance = echarts.init(meteorologicalCharts.value, "macarons");
meteorologicalIntance.setOption({
color:['#567722'],
// 悬浮提示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['基地1', '基地2', '基地3', '基地4', '资源圃1', '资源圃2']
},
yAxis: {
type: 'value',
},
series: [
{
smooth: 0.6,
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130],
// 面积图
areaStyle: {
opacity:0.5
}
}
]
})
const soilIntance = echarts.init(soilCharts.value, "macarons");
soilIntance.setOption({
color:['#68BBC4'],
// 悬浮提示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['基地1', '基地2', '基地3', '基地4', '资源圃1', '资源圃2']
},
yAxis: {
type: 'value',
},
series: [
{
smooth: 0.6,
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130],
areaStyle: {
opacity:0.5
}
}
]
})
const tableIntance = echarts.init(tableCharts.value, "macarons");
tableIntance.setOption({
color:['#567722','#68BBC4'],
// 悬浮提示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 图例
legend: {},
xAxis: {
type: 'category',
data: ['基地1', '基地2', '基地3', '基地4', '资源圃1', '资源圃2']
},
yAxis: {
type: 'value',
},
series: [
{
name: '原始数据',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '表型数据',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
})
window.addEventListener("resize", () => {
meteorologicalIntance.resize();
soilIntance.resize();
tableIntance.resize();
});
})
// 友情链接
const Links = [
{icon:'https://tse1-mm.cn.bing.net/th/id/OIP-C.cLivP1ADLaJOrlhwQwWfvgHaEK?w=276&h=180&c=7&r=0&o=5&pid=1.7',label:'多组学数据库平台',url:'https://www.baidu.com'},
{icon:'https://tse1-mm.cn.bing.net/th/id/OIP-C.cLivP1ADLaJOrlhwQwWfvgHaEK?w=276&h=180&c=7&r=0&o=5&pid=1.7',label:'微生物资源库',url:'https://www.baidu.com'},
{icon:'https://tse1-mm.cn.bing.net/th/id/OIP-C.cLivP1ADLaJOrlhwQwWfvgHaEK?w=276&h=180&c=7&r=0&o=5&pid=1.7',label:'基因编辑中心',url:'https://www.baidu.com'},
]
function goTarget(url) {
window.open(url, '__blank')
}
@ -125,6 +485,23 @@ function goTarget(url) {
<style scoped lang="scss">
@import 'element-plus/theme-chalk/display.css';
.links{
position: relative;
//鼠标悬浮变成点击
cursor: pointer;
.el-image{
width: 100%; height: 100px;
border-radius: 10px;
}
.links-label{
position: absolute;
bottom: 0;
width: 100%;
}
}
.charts{
height: 250px;
}
.home {
blockquote {
padding: 10px 20px;
@ -132,12 +509,14 @@ function goTarget(url) {
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
@ -176,6 +555,7 @@ function goTarget(url) {
.update-log {
margin: 10px 0;
ol {
display: block;
list-style-type: decimal;
@ -186,14 +566,40 @@ function goTarget(url) {
padding-inline-start: 40px;
}
}
.card-header-right{
.card-header-right {
float: right;
}
.card-header-left{
line-height: 30px;
.card-header-left {
margin-bottom: 0;
float: left;
}
.card-header-title{
font-weight: 600;
}
//圆型边框
.card-round{
margin: 10px auto;
border: 3px solid rgb(86, 119, 34);
border-radius: 50%;
height: 90px;
padding-top: 8px;
width: 90px;
}
.card-body-row{
text-align: center;margin-top: 10px
}
.card-body-number {
display: flex;
align-items: flex-end;
justify-content: center;
margin: 10px 0;
:deep(.el-statistic__suffix){
font-size: 12px;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save