410 lines
10 KiB
Vue
410 lines
10 KiB
Vue
<template>
|
|
<el-row class="data-home-index">
|
|
<el-col :span="6" class="left-charts">
|
|
<div class="left-charts-item">
|
|
<customBack top-title="投入品监管体系建设" :top-postion="'left'">
|
|
<template #back>
|
|
<inputsOne :data="state.data.one" />
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="left-charts-item">
|
|
<customBack top-title="投入品检测监管" :top-postion="'left'">
|
|
<template #back>
|
|
<inputsTwo :data="state.data.InputDetector" />
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="left-charts-item">
|
|
<customBack top-title="投入品金额对比" :top-postion="'left'">
|
|
<template #back>
|
|
<inputsThere :data="state.data.there" />
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<inputsMap></inputsMap>
|
|
</el-col>
|
|
|
|
<el-col :span="6" class="right-charts">
|
|
<div class="right-charts-item">
|
|
<customBack top-title="生产主体统计" :top-postion="'right'">
|
|
<template #back>
|
|
<inputsFour :data="state.data.ProductEntity" />
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="right-charts-item">
|
|
<customBack
|
|
top-title="历年投入品规模对比"
|
|
:top-postion="'right'"
|
|
:down-title="'全县'"
|
|
:label-field="'label'"
|
|
:value-field="'value'"
|
|
:down-width="'100px'"
|
|
:options="[
|
|
{ label: '全县', value: '530926' },
|
|
{ label: '耿马镇', value: '42611' },
|
|
{ label: '勐撒镇', value: '9259' },
|
|
{ label: '勐永镇', value: '17787' },
|
|
{ label: '孟定镇', value: '42610' },
|
|
{ label: '勐简乡', value: '17788' },
|
|
{ label: '贺派乡', value: '40161' },
|
|
{ label: '四排山乡', value: '40163' },
|
|
{ label: '大兴乡', value: '40159' },
|
|
]"
|
|
:is-down="true"
|
|
@command="handleCommand"
|
|
>
|
|
<template #back>
|
|
<inputsFive ref="fiveRef" :data="state.data.five" :query="state.queryCode" />
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="right-charts-item">
|
|
<customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
|
|
<template #back>
|
|
<inputsSix :data="state.data.BlackWhite" />
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<script setup>
|
|
import { nextTick, reactive, ref } from 'vue';
|
|
import inputsOne from './components/inputsOne.vue';
|
|
import inputsTwo from './components/inputsTwo.vue';
|
|
import inputsThere from './components/inputsThere.vue';
|
|
import inputsFour from './components/inputsFour.vue';
|
|
import inputsFive from './components/inputsFive.vue';
|
|
import inputsSix from './components/inputsSix.vue';
|
|
import inputsMap from './components/inputsMap.vue';
|
|
import { useApp } from '@/hooks';
|
|
import { sleep } from '@/utils';
|
|
import { GetInputsInfo } from '@/apis/inputs';
|
|
|
|
const app = useApp();
|
|
const fiveRef = ref(null);
|
|
|
|
const state = reactive({
|
|
loading: false,
|
|
data: {},
|
|
queryCode: '',
|
|
});
|
|
|
|
// 加载
|
|
const loadData = async () => {
|
|
state.loading = true;
|
|
// GetInputsInfo()
|
|
// .then((res) => {
|
|
// if (res.code === 200) {
|
|
// state.data = res.data;
|
|
// }
|
|
// })
|
|
// .catch((err) => {
|
|
// app.$message.error(err.msg);
|
|
// });
|
|
await sleep(500);
|
|
state.data = {
|
|
one: [
|
|
{
|
|
label: '监管机构',
|
|
value: 88,
|
|
unit: '家',
|
|
},
|
|
{
|
|
label: '监管人员',
|
|
value: 106,
|
|
unit: '人',
|
|
},
|
|
{
|
|
label: '村级监管员',
|
|
value: 38,
|
|
unit: '人',
|
|
},
|
|
{
|
|
label: '农资经营单位',
|
|
value: 27,
|
|
unit: '家',
|
|
},
|
|
{
|
|
label: '生产主体',
|
|
value: 154,
|
|
unit: '家',
|
|
},
|
|
{
|
|
label: '检测机构',
|
|
value: 16,
|
|
unit: '家',
|
|
},
|
|
],
|
|
InputDetector: [{ JCFGL: 33.33, JCYPPC: 15, zero_count: 13, JCHGL: 86.67, counts: 45 }],
|
|
there: [
|
|
{ value: 530, name: '种子' },
|
|
{ value: 1215, name: '化肥' },
|
|
{ value: 2312, name: '农药' },
|
|
{ value: 916, name: '地膜' },
|
|
{ value: 108, name: '水' },
|
|
],
|
|
ProductEntity: [
|
|
{ manufacturerCount: 2, percentage: 16.67, category: '种源企业' },
|
|
{ manufacturerCount: 5, percentage: 41.67, category: '农药厂家' },
|
|
{ manufacturerCount: 5, percentage: 41.67, category: '肥料厂家' },
|
|
],
|
|
five: [
|
|
{ value: 10, name: '2020' },
|
|
{ value: 66, name: '2021' },
|
|
{ value: 100, name: '2022' },
|
|
{ value: 120, name: '2023' },
|
|
{ value: 150, name: '2024' },
|
|
{ value: 80, name: '2025' },
|
|
],
|
|
BlackWhite: [
|
|
{
|
|
id: 43,
|
|
dataType: '2',
|
|
currentRating: 'r',
|
|
comName: '灭百草',
|
|
totalScore: '99',
|
|
companyType: '经销商',
|
|
belongCompany: '灭百草集团',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 42,
|
|
dataType: '2',
|
|
currentRating: 'r',
|
|
comName: '欧锰化肥',
|
|
totalScore: '99',
|
|
companyType: '经销商',
|
|
belongCompany: '灭百草集团',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 41,
|
|
dataType: '2',
|
|
currentRating: 'r',
|
|
comName: '史丹欧化肥',
|
|
totalScore: '99',
|
|
companyType: '经销商',
|
|
belongCompany: '康瑞企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 40,
|
|
dataType: '2',
|
|
currentRating: 'r',
|
|
comName: '史丹力气化肥',
|
|
totalScore: '99',
|
|
companyType: '经销商',
|
|
belongCompany: '康瑞企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 39,
|
|
dataType: '2',
|
|
currentRating: 'r',
|
|
comName: '史丹蒙化肥',
|
|
totalScore: '99',
|
|
companyType: '经销商',
|
|
belongCompany: '康瑞企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 38,
|
|
dataType: '2',
|
|
currentRating: 'r',
|
|
comName: '史丹利化肥',
|
|
totalScore: '99',
|
|
companyType: '生产商',
|
|
belongCompany: '康瑞企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 37,
|
|
dataType: '2',
|
|
currentRating: 'r',
|
|
comName: '丹正企化肥',
|
|
totalScore: '99',
|
|
companyType: '生产商',
|
|
belongCompany: '康瑞企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 36,
|
|
dataType: '1',
|
|
currentRating: 'r',
|
|
comName: '丹正企化肥',
|
|
totalScore: '99',
|
|
companyType: '生产商',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 35,
|
|
dataType: '1',
|
|
currentRating: 'r',
|
|
comName: '丹非化肥',
|
|
totalScore: '99',
|
|
companyType: '生产商',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 34,
|
|
dataType: '1',
|
|
currentRating: 'r',
|
|
comName: '史丹化肥',
|
|
totalScore: '99',
|
|
companyType: '生产商',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 22,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '泰龙药业',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 23,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '泰龙药业',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 20,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '猪得壮',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 21,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '泰龙药业',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 19,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '龙飞起药业',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 18,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '正阳药业',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '正阳企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 16,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '九九药业',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '九九企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 17,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '蒙发利',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 15,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '史丹利',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '史丹利企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
{
|
|
id: 13,
|
|
dataType: '2',
|
|
currentRating: 'b',
|
|
comName: '玖梦药业',
|
|
totalScore: '22',
|
|
companyType: '',
|
|
belongCompany: '泰富企业',
|
|
ratingReason: '效果不明显',
|
|
},
|
|
],
|
|
};
|
|
state.loading = false;
|
|
};
|
|
|
|
loadData();
|
|
|
|
const handleCommand = (data) => {
|
|
state.queryCode = data.value;
|
|
// console.info('data=', data);
|
|
// nextTick(() => {
|
|
// fiveRef.value && fiveRef.value.refresData();
|
|
// });
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.data-home-index {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.left-charts {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
}
|
|
.left-charts-item {
|
|
width: 100%;
|
|
height: calc((100% - 30px) / 3);
|
|
}
|
|
|
|
.right-charts {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
}
|
|
.right-charts-item {
|
|
width: 100%;
|
|
height: calc((100% - 30px) / 3);
|
|
}
|
|
}
|
|
</style>
|