471 lines
11 KiB
Vue
471 lines
11 KiB
Vue
<!--
|
|
* @Author: SunTao 328867980@qq.com
|
|
* @Date: 2024-10-29 15:17:58
|
|
* @LastEditors: SunTao 328867980@qq.com
|
|
* @LastEditTime: 2024-10-30 13:55:08
|
|
* @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
|
|
* @Description: 首页-病害识别
|
|
-->
|
|
|
|
<template>
|
|
<div class="content">
|
|
<div class="title">病害识别</div>
|
|
<div class="disease-content">
|
|
<div class="left">
|
|
<div>
|
|
<div class="name">病害识别总数</div>
|
|
<div class="value"><span>57875</span>个</div>
|
|
</div>
|
|
<div>
|
|
<div class="name">新增病害数</div>
|
|
<div class="value"><span>57875</span>个</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div ref="statisticsChart"></div>
|
|
<div>
|
|
<el-select
|
|
v-model="diseaseType"
|
|
@change="getChartData"
|
|
placeholder="请选择"
|
|
size="mini"
|
|
>
|
|
<el-option
|
|
v-for="item in diseaseOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<div class="distribution-div" ref="distributionChart"></div>
|
|
<div class="distribution-legnd">
|
|
<fssm-scroll>
|
|
<div
|
|
class="legnd-div"
|
|
v-for="(item, index) in distributionList"
|
|
:key="`distribution-${index}`"
|
|
>
|
|
<div class="name">
|
|
<span
|
|
class="index"
|
|
:style="{ backgroundColor: distributionColor[index] }"
|
|
></span>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
<div class="rate">{{ item.rate }}</div>
|
|
</div>
|
|
</fssm-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
|
import * as echarts from "echarts";
|
|
export default {
|
|
name: "DiseaseIndex",
|
|
components: {
|
|
FssmScroll,
|
|
},
|
|
data() {
|
|
return {
|
|
// 下拉框数据绑定
|
|
diseaseType: "",
|
|
// 下拉框数据
|
|
diseaseOptions: [],
|
|
// 病害类型颜色盘
|
|
distributionColor: [
|
|
"#3678FF",
|
|
"#F8A74E",
|
|
"#04DAD7",
|
|
"#00D669",
|
|
"#8448FF",
|
|
"#F6D566",
|
|
"#00B1FF",
|
|
"#62CFFF",
|
|
"#6A9BFF",
|
|
"#B38EFF",
|
|
],
|
|
// 病害类型分布数据
|
|
distributionList: [],
|
|
};
|
|
},
|
|
created() {
|
|
this.getOptions();
|
|
this.getChartData();
|
|
},
|
|
methods: {
|
|
/* 获取病害类别下拉 */
|
|
getOptions() {
|
|
this.diseaseOptions = [
|
|
{
|
|
value: "选项1",
|
|
label: "黄金糕",
|
|
},
|
|
{
|
|
value: "选项2",
|
|
label: "双皮奶",
|
|
},
|
|
{
|
|
value: "选项3",
|
|
label: "蚵仔煎",
|
|
},
|
|
{
|
|
value: "选项4",
|
|
label: "龙须面",
|
|
},
|
|
{
|
|
value: "选项5",
|
|
label: "北京烤鸭",
|
|
},
|
|
];
|
|
},
|
|
/* 获取echart图数据 */
|
|
getChartData() {
|
|
this.distributionList = [
|
|
{
|
|
value: 15461,
|
|
name: "一类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 1,
|
|
name: "二类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 6546,
|
|
name: "三类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 2718,
|
|
name: "四类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 1704,
|
|
name: "五类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 1,
|
|
name: "二类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 6546,
|
|
name: "三类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 2718,
|
|
name: "四类",
|
|
rate: "10%",
|
|
},
|
|
{
|
|
value: 1704,
|
|
name: "五类",
|
|
rate: "10%",
|
|
},
|
|
];
|
|
this.$nextTick(() => {
|
|
this.drawStatisticsChart();
|
|
this.drawDistributionChart();
|
|
});
|
|
},
|
|
/* 绘制新增病害统计echart图 */
|
|
drawStatisticsChart() {
|
|
if (this.$refs.statisticsChart) {
|
|
const chart = echarts.init(this.$refs.statisticsChart);
|
|
chart.setOption({
|
|
color: ["#388BD8", "#FFC400"],
|
|
title: [
|
|
// 中心比例
|
|
{
|
|
text: "新增病害统计",
|
|
x: "1%",
|
|
y: "1%",
|
|
textStyle: {
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "20%",
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
right: "5%",
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
|
|
axisTick: {
|
|
show: false, //隐藏X轴刻度
|
|
},
|
|
axisLabel: { color: "#A2B0B8" },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#3C6579",
|
|
width: 1,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: "",
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#A2B0B8",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
// "formatter": "{value} T/h"
|
|
// formatter: "{value}",
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "新增病害数",
|
|
type: "line",
|
|
symbolSize: 5,
|
|
smooth: 1,
|
|
data: [400, 600, 1400, 1700],
|
|
},
|
|
],
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
chart.resize();
|
|
});
|
|
}
|
|
},
|
|
/* 绘制病害类型分布图 */
|
|
drawDistributionChart() {
|
|
if (this.$refs.distributionChart) {
|
|
const chart = echarts.init(this.$refs.distributionChart);
|
|
chart.setOption({
|
|
color: this.distributionColor,
|
|
title: [
|
|
// 中心比例
|
|
{
|
|
text: "新增病害类型分布",
|
|
x: "1%",
|
|
y: "1%",
|
|
textStyle: {
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
// hoverAnimation: true,
|
|
minAngle: 1,
|
|
padAngle: 4,
|
|
hoverOffset: 0,
|
|
startAngle: 0, //起始角度
|
|
clockwise: false, //是否顺时针
|
|
radius: ["55%", "70%"],
|
|
center: ["50%", "56%"],
|
|
avoidLabelOverlap: false,
|
|
animationDuration: 3000,
|
|
emphasis: {
|
|
label: {
|
|
formatter: ["{a|{c}}" + "\n" + "{b|{b}}"].join("\n"),
|
|
show: true,
|
|
fontSize: "30",
|
|
fontWeight: "bold",
|
|
rich: {
|
|
a: {
|
|
fontSize: 40,
|
|
lineHeight: 50,
|
|
color: "#000",
|
|
},
|
|
b: {
|
|
color: "#000",
|
|
fontSize: 30,
|
|
lineHeight: 30,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
color: "rgba(13, 17, 29,0)",
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: this.distributionList,
|
|
zlevel: 30,
|
|
},
|
|
{
|
|
type: "pie",
|
|
radius: ["35%", "55%"],
|
|
center: ["50%", "56%"],
|
|
// hoverAnimation: true,
|
|
hoverOffset: 0,
|
|
startAngle: 0, //起始角度
|
|
clockwise: false, //是否顺时针
|
|
padAngle: 4,
|
|
minAngle: 1,
|
|
animationDuration: 3000,
|
|
emphasis: { scale: false },
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
color: "#E4EDFD",
|
|
},
|
|
data: this.distributionList,
|
|
z: 1,
|
|
},
|
|
],
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
chart.resize();
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1rem;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 10%;
|
|
padding-left: 3rem;
|
|
font-family: "DouYu";
|
|
}
|
|
|
|
.disease-content {
|
|
width: 100%;
|
|
height: 90%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
width: 20%;
|
|
height: 100%;
|
|
|
|
> div {
|
|
height: 50%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px red solid;
|
|
|
|
.name {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.value {
|
|
line-height: 4rem;
|
|
|
|
span {
|
|
margin-right: 0.3rem;
|
|
font-weight: 600;
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 78%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.el-select {
|
|
width: 8rem;
|
|
position: absolute;
|
|
right: 2%;
|
|
top: 5%;
|
|
z-index: 1;
|
|
}
|
|
|
|
> div {
|
|
height: 50%;
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
position: relative;
|
|
border: 1px red solid;
|
|
|
|
.distribution-div {
|
|
width: 30%;
|
|
height: 100%;
|
|
}
|
|
|
|
.distribution-legnd {
|
|
width: 70%;
|
|
height: 100%;
|
|
padding: 2.6rem 2rem 2rem 2rem;
|
|
|
|
.scroll-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.legnd-div {
|
|
width: 47%;
|
|
height: 2rem;
|
|
padding: 0 1rem;
|
|
margin: 0.2rem 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #f6f6fa;
|
|
border-radius: 0.2rem;
|
|
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.index {
|
|
width: 0.7rem;
|
|
height: 0.7rem;
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
border-radius: 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|