Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen
This commit is contained in:
commit
4319058cd5
BIN
src/assets/images/business/bg_title.png
Normal file
BIN
src/assets/images/business/bg_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
|
||||
export default {
|
||||
name: 'customEchartWaterDroplet',
|
||||
name: 'CustomEchartWaterDroplet',
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
|
||||
@ -171,10 +171,14 @@ const handleCommand = (data) => {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
border: 1px solid $color-custom-main;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
.el-dropdown {
|
||||
border: 1px solid $color-custom-main;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,78 +1,210 @@
|
||||
<template>
|
||||
<div class="business">
|
||||
<custom-echart-water-droplet width="100%" height="100%" :option="option" />
|
||||
<div class="business-left">
|
||||
<custom-echart-water-droplet width="100%" height="100%" :option="state.option" />
|
||||
<div class="business-title">证件齐全率</div>
|
||||
</div>
|
||||
<div class="business-right">
|
||||
<div class="business-title">临期预警</div>
|
||||
<ul class="business-info">
|
||||
<li class="success">
|
||||
<b>正常</b>
|
||||
<span>253家</span>
|
||||
</li>
|
||||
<li class="warning">
|
||||
<b>临期</b>
|
||||
<span>5家</span>
|
||||
</li>
|
||||
<li class="danger">
|
||||
<b>已过期</b>
|
||||
<span>0家</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
let percent = ref(0.6);
|
||||
const option = ref({
|
||||
backgroundColor: 'transparent', //背景色
|
||||
series: [
|
||||
{
|
||||
name: '预估量',
|
||||
type: 'liquidFill',
|
||||
radius: '80%',
|
||||
center: ['50%', '50%'],
|
||||
backgroundStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
data: [percent.value, percent.value],
|
||||
amplitude: 12, //水波振幅
|
||||
label: {
|
||||
//标签设置
|
||||
position: ['50%', '45%'],
|
||||
formatter: percent.value * 100 + '%', //显示文本,
|
||||
textStyle: {
|
||||
fontSize: '20px', //文本字号,
|
||||
color: '#fff',
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
option: {
|
||||
backgroundColor: 'transparent', //背景色
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'liquidFill',
|
||||
radius: '80%',
|
||||
center: ['50%', '50%'],
|
||||
backgroundStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
data: [],
|
||||
amplitude: 12, //水波振幅
|
||||
label: {
|
||||
position: ['50%', '45%'],
|
||||
// formatter: 0.3998 * 100 + '%', //显示文本,
|
||||
textStyle: {
|
||||
fontSize: '20px', //文本字号,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
outline: {
|
||||
borderDistance: 2,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(71, 202, 219, 0.5)',
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
color: 'rgba(45, 209, 185, 0.5)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(13, 204, 163, 0.5)',
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
outline: {
|
||||
borderDistance: 3,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
},
|
||||
{ offset: 0, color: 'rgba(13, 204, 163, 0.6)' },
|
||||
{ offset: 1, color: 'rgba(71, 202, 219, 1)' },
|
||||
],
|
||||
globalCoord: false,
|
||||
global: false, // 默认为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#45bfe9' },
|
||||
{ offset: 1, color: '#01589c' },
|
||||
],
|
||||
global: false, // 默认为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.option.series[0].data = [0, val.percent];
|
||||
state.option.series[0].label.formatter = val.percent * 100 + '%';
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.business {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include flex-row();
|
||||
|
||||
&-title {
|
||||
width: 160px;
|
||||
margin: 0 auto;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
text-shadow: 2px 0px 10px 0px #01eeff;
|
||||
background: url('@/assets/images/business/bg_title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
text-shadow:
|
||||
0 0 10px #01eeff,
|
||||
0 0 20px #01eeff,
|
||||
0 0 30px #01eeff,
|
||||
0 0 40px #01eeff;
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
@include flex-column();
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-info {
|
||||
width: 100%;
|
||||
@include flex-column();
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
@include flex-column();
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
margin-top: 16px;
|
||||
|
||||
b {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
span {
|
||||
color: #02fd94;
|
||||
}
|
||||
b {
|
||||
&::before {
|
||||
background-color: #02fd94;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
span {
|
||||
color: #fef906;
|
||||
}
|
||||
b {
|
||||
&::before {
|
||||
background-color: #fef906;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger {
|
||||
span {
|
||||
color: #fc0003;
|
||||
}
|
||||
b {
|
||||
&::before {
|
||||
background-color: #fc0003;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,23 @@
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="生产经营主体数量" :top-postion="'left'">
|
||||
<customBack
|
||||
top-title="生产经营主体数量"
|
||||
:top-postion="'left'"
|
||||
:down-title="'农资企业'"
|
||||
:label-field="'label'"
|
||||
:value-field="'value'"
|
||||
:down-width="'100px'"
|
||||
:options="[
|
||||
{ value: 1, label: '农企/合作社' },
|
||||
{ value: 2, label: '农资企业' },
|
||||
{ value: 3, label: '种源企业' },
|
||||
{ value: 4, label: '生产加工企业' },
|
||||
{ value: 5, label: '农户' },
|
||||
]"
|
||||
:is-down="true"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<template #back>
|
||||
<businessTwo :data="state.data.two" :query="state.queryCode" />
|
||||
</template>
|
||||
@ -111,18 +127,12 @@ const loadData = async () => {
|
||||
{ value: 150, name: '2024' },
|
||||
{ value: 80, name: '2025' },
|
||||
],
|
||||
four: [
|
||||
{ value: 58.9, label: '灌溉水田' },
|
||||
{ value: 56.1, label: '基地地' },
|
||||
{ value: 60.8, label: '望天田' },
|
||||
{ value: 60.6, label: '水浇地' },
|
||||
{ value: 32.6, label: '林地' },
|
||||
{ value: 25.8, label: '育苗地' },
|
||||
{ value: 56.0, label: '果园' },
|
||||
{ value: 52.4, label: '草地' },
|
||||
{ value: 6.3, label: '观测用地' },
|
||||
{ value: 6.1, label: '监测用地' },
|
||||
],
|
||||
four: {
|
||||
percent: 0.3998,
|
||||
success: 253,
|
||||
warning: 5,
|
||||
danger: 0,
|
||||
},
|
||||
five: [
|
||||
{ name: '耿马镇', value: 87.84 },
|
||||
{ name: '勐撒镇', value: 60.7 },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user