|
|
|
@ -1,199 +1,605 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container home">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<!--左侧栏目-->
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="8" :lg="8">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<div class="card-header-left">
|
|
|
|
|
<span>基地/资源圃统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-header-right">
|
|
|
|
|
<el-select :model-value="1">
|
|
|
|
|
<el-option :value="1" label="2023年种植季"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="body">
|
|
|
|
|
<el-divider border-style="dashed" />
|
|
|
|
|
<el-divider border-style="dashed" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>数据采集设备统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<div class="body">
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24" class="hidden-sm-and-down">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>友情链接</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="body">
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!--右侧栏目-->
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="16" :lg="16">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>表型/基因/环境数据</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>基地气象数据</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="body">
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>基地土壤数据</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="body">
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>基地表型数据</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="body">
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24" class="hidden-sm-and-up">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>友情链接</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="body">
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="app-container home">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<!--左侧栏目-->
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="8" :lg="8">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<div class="card-header-title card-header-left" style="line-height: 30px;">
|
|
|
|
|
<span>基地/资源圃统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-header-right">
|
|
|
|
|
<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-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>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>数据采集设备统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<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>
|
|
|
|
|
<el-col :span="24" class="hidden-sm-and-down">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>友情链接</span>
|
|
|
|
|
</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>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!--右侧栏目-->
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="16" :lg="16">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<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>
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<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>
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<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>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<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>
|
|
|
|
|
<el-col :span="24" class="hidden-sm-and-up">
|
|
|
|
|
<el-card class="update-log">
|
|
|
|
|
<template v-slot:header>
|
|
|
|
|
<div class="clearfix">
|
|
|
|
|
<span>友情链接</span>
|
|
|
|
|
</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>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<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')
|
|
|
|
|
window.open(url, '__blank')
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<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;
|
|
|
|
|
margin: 0 0 20px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #676a6c;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
font-weight: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-log {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
ol {
|
|
|
|
|
display: block;
|
|
|
|
|
list-style-type: decimal;
|
|
|
|
|
margin-block-start: 1em;
|
|
|
|
|
margin-block-end: 1em;
|
|
|
|
|
margin-inline-start: 0;
|
|
|
|
|
margin-inline-end: 0;
|
|
|
|
|
padding-inline-start: 40px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-header-right{
|
|
|
|
|
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
.card-header-left{
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
blockquote {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
margin: 0 0 20px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #676a6c;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
font-weight: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-log {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
|
|
|
|
|
ol {
|
|
|
|
|
display: block;
|
|
|
|
|
list-style-type: decimal;
|
|
|
|
|
margin-block-start: 1em;
|
|
|
|
|
margin-block-end: 1em;
|
|
|
|
|
margin-inline-start: 0;
|
|
|
|
|
margin-inline-end: 0;
|
|
|
|
|
padding-inline-start: 40px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-header-right {
|
|
|
|
|
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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>
|
|
|
|
|
|
|
|
|
|