SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改大屏总览病害统计

Browse Source
This commit is contained in:
SunTao 2025-03-18 15:01:40 +08:00
parent a95d620c96
commit 29829779e8
2 changed files with 25 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/big-screen/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-01-21 11:32:51
* @LastEditTime: 2025-03-18 14:58:10
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@ -533,7 +533,7 @@ export default {
},
{
width: "100%",
height: "29%",
height: "34%",
title: "病害统计",
component: DiseaseCurrent,
selectIsShow: true,
@ -1427,7 +1427,7 @@ export default {
},
{
width: "100%",
height: "29%",
height: "34%",
title: "病害统计",
component: DiseaseCurrent,
selectIsShow: true,

76
src/views/big-screen/overview-components/disease-current.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:19:56
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-01-08 13:50:00
* @LastEditTime: 2025-03-18 15:00:17
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
* @Description: 总览大屏-病害三维饼图
-->
@ -10,66 +10,29 @@
<template>
<div class="content">
<div class="content-select">
<el-button
type="info"
size="mini"
round
v-if="clickType !== ''"
@click="changeEchart()"
>返回</el-button
>
<el-select
v-model="itemSelect"
placeholder="请选择"
@change="getChartList"
popper-class="screen-select"
>
<el-option
v-for="item in currentList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-button type="info" size="mini" round v-if="clickType !== ''" @click="changeEchart()">返回</el-button>
<el-select v-model="itemSelect" placeholder="请选择" @change="getChartList" popper-class="screen-select">
<el-option v-for="item in currentList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="echart" ref="currentChart"></div>
<div class="food-legend">
<fssm-scroll
v-if="!clickType"
style="display: flex; justify-content: center; flex-wrap: wrap"
>
<div
class="legend-div-first"
v-for="(item, index) in dataList"
:key="`chart-${index}`"
@click="clickType === '' ? changeEchart(item) : ''"
>
<div
class="index"
:style="{ backgroundColor: colorList[index] }"
></div>
<fssm-scroll v-if="!clickType" style="display: flex; justify-content: center; flex-wrap: wrap">
<div class="legend-div-first" v-for="(item, index) in dataList" :key="`chart-${index}`"
@click="clickType === '' ? changeEchart(item) : ''">
<div class="index" :style="{ backgroundColor: colorList[index] }"></div>
<div class="name" :title="item.typeName">{{ item.typeName }}</div>
<div class="rate">{{ item.rate }}%</div>
<div class="value">{{ item.value }}</div>
</div>
</fssm-scroll>
<fssm-scroll
v-else
:style="{
<fssm-scroll v-else :style="{
display: 'flex',
flexWrap: 'wrap',
}"
>
<div
class="legend-div"
v-for="(item, index) in dataList"
:key="`chart-${index}`"
@click="clickType === '' ? changeEchart(item) : ''"
>
<div
class="index"
:style="{ backgroundColor: colorList[index] }"
></div>
}">
<div class="legend-div" v-for="(item, index) in dataList" :key="`chart-${index}`"
@click="clickType === '' ? changeEchart(item) : ''">
<div class="index" :style="{ backgroundColor: colorList[index] }"></div>
<div class="name" :title="item.typeName">{{ item.typeName }}</div>
<div class="rate">{{ item.rate }}%</div>
<div class="value">{{ item.value }}</div>
@ -79,7 +42,7 @@
</div>
</template>
<script>
<script>
import * as echarts from "echarts";
import "echarts-gl";
import { roadCurrent, getDropList } from "@/api/xj/screen/disease-screen";
@ -231,8 +194,7 @@ export default {
color: "#ffffff",
},
formatter: (params) => {
return `${params.marker}${params.seriesName}：${
data[params.seriesIndex].value
return `${params.marker}${params.seriesName}：${data[params.seriesIndex].value
}`;
},
},
@ -436,7 +398,7 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
@ -464,7 +426,7 @@ export default {
.echart {
width: 100%;
height: 60%;
height: 55%;
z-index: 0;
background-image: url("../../../assets/screen/index/disease-current-echart.png");
background-repeat: no-repeat;
@ -473,14 +435,14 @@ export default {
}
.food-legend {
height: 40%;
height: 45%;
width: 100%;
display: flex;
flex-wrap: wrap;
.legend-div-first {
width: 45%;
height: 50%;
height: 32%;
display: flex;
align-items: center;
cursor: pointer;