api:input
This commit is contained in:
parent
4ff340c76c
commit
f5cf4b8554
11
src/apis/inputs.js
Normal file
11
src/apis/inputs.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import request from '@/utils/axios';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Title: 获取投入品信息
|
||||||
|
* https://doc.apipost.net/docs/detail/4516a8efdce0000?target_id=f010812312008&locale=zh-cn
|
||||||
|
*/
|
||||||
|
export function GetInputsInfo(code) {
|
||||||
|
return request('/inputGoods/inputView/getData', {
|
||||||
|
method: 'GET',
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -1,16 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
|
<custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
let dataList = [
|
import { isEmpty, sleep } from '@/utils';
|
||||||
{ value: 10, name: '2020' },
|
|
||||||
{ value: 66, name: '2021' },
|
const props = defineProps({
|
||||||
{ value: 100, name: '2022' },
|
data: {
|
||||||
{ value: 120, name: '2023' },
|
type: Array,
|
||||||
{ value: 150, name: '2024' },
|
default: () => [],
|
||||||
{ value: 80, name: '2025' },
|
},
|
||||||
];
|
query: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
option: {
|
option: {
|
||||||
color: ['#35D0C0'],
|
color: ['#35D0C0'],
|
||||||
@ -58,10 +63,21 @@ const state = reactive({
|
|||||||
// name: '',
|
// name: '',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: dataList,
|
data: [],
|
||||||
});
|
});
|
||||||
const lineCharts = ref(null);
|
|
||||||
const refresData = () => {
|
const loadData = async (code = '') => {
|
||||||
|
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 = [
|
state.data = [
|
||||||
{ value: 5, name: '2020' },
|
{ value: 5, name: '2020' },
|
||||||
{ value: 36, name: '2021' },
|
{ value: 36, name: '2021' },
|
||||||
@ -72,7 +88,29 @@ const refresData = () => {
|
|||||||
];
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
defineExpose({
|
watch(
|
||||||
refresData,
|
() => props.data,
|
||||||
});
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
state.data = val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.query,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
loadData(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -2,7 +2,15 @@
|
|||||||
<custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" @click="handleClick" />
|
<custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" @click="handleClick" />
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref, onMounted, computed } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
|
import { isEmpty } from '@/utils';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
option: {},
|
option: {},
|
||||||
@ -10,14 +18,6 @@ const state = reactive({
|
|||||||
text: '',
|
text: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const pieData = [
|
|
||||||
{ value: 33, name: '种源企业', itemStyle: { color: '#8fd7fce8' } },
|
|
||||||
{ value: 45, name: '肥料厂家', itemStyle: { color: '#466BE7e8' } },
|
|
||||||
{ value: 22, name: '农药厂家', itemStyle: { color: '#F4BB29e8' } },
|
|
||||||
{ value: 9, name: '其他', itemStyle: { color: '#FF8329' } },
|
|
||||||
];
|
|
||||||
|
|
||||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
|
||||||
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||||||
// 计算
|
// 计算
|
||||||
let midRatio = (startRatio + endRatio) / 2;
|
let midRatio = (startRatio + endRatio) / 2;
|
||||||
@ -95,7 +95,6 @@ function fomatFloat(num, n) {
|
|||||||
return s;
|
return s;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取3d丙图的最高扇区的高度
|
|
||||||
function getHeight3D(series, height) {
|
function getHeight3D(series, height) {
|
||||||
series.sort((a, b) => {
|
series.sort((a, b) => {
|
||||||
return b.pieData.value - a.pieData.value;
|
return b.pieData.value - a.pieData.value;
|
||||||
@ -103,7 +102,6 @@ function getHeight3D(series, height) {
|
|||||||
return (height * 20) / series[0].pieData.value;
|
return (height * 20) / series[0].pieData.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取配置项
|
|
||||||
function getPie3D(pieData, internalDiameterRatio) {
|
function getPie3D(pieData, internalDiameterRatio) {
|
||||||
let series = [];
|
let series = [];
|
||||||
let sumValue = 0;
|
let sumValue = 0;
|
||||||
@ -190,15 +188,6 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||||||
color: '#B8DDFF',
|
color: '#B8DDFF',
|
||||||
lineHeight: 20,
|
lineHeight: 20,
|
||||||
},
|
},
|
||||||
// formatter: function (name) {
|
|
||||||
// var target;
|
|
||||||
// for (var i = 0, l = pieData.length; i < l; i++) {
|
|
||||||
// if (pieData[i].name == name) {
|
|
||||||
// target = pieData[i].value;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// return `${name} ${target}`;
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: '',
|
text: '',
|
||||||
@ -218,25 +207,6 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
show: false,
|
|
||||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
|
||||||
borderColor: 'transparent',
|
|
||||||
formatter: (params) => {
|
|
||||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
|
||||||
let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) * 100).toFixed(2);
|
|
||||||
const value = option.series[params.seriesIndex].pieData.value;
|
|
||||||
return (
|
|
||||||
`<div style='color:rgba(214, 243, 255, 0.9);'>` +
|
|
||||||
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
|
||||||
`${params.seriesName}<br/>` +
|
|
||||||
`<span style='margin-right:20px'>${value}</span>` +
|
|
||||||
`<span >${bfb}%</span>` +
|
|
||||||
`</div>`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis3D: {
|
xAxis3D: {
|
||||||
min: -1,
|
min: -1,
|
||||||
max: 1,
|
max: 1,
|
||||||
@ -255,7 +225,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||||||
left: 0,
|
left: 0,
|
||||||
top: -30,
|
top: -30,
|
||||||
viewControl: {
|
viewControl: {
|
||||||
alpha: 45, //角度(这个很重要 调节角度的)
|
alpha: 55, //角度(这个很重要 调节角度的)
|
||||||
distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||||
rotateSensitivity: 1, //设置为0无法旋转
|
rotateSensitivity: 1, //设置为0无法旋转
|
||||||
zoomSensitivity: 0, //设置为0无法缩放
|
zoomSensitivity: 0, //设置为0无法缩放
|
||||||
@ -268,15 +238,35 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||||||
return option;
|
return option;
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClick = (params) => {
|
const initData = (pieData = []) => {
|
||||||
state.option.title.text = `{a|${params.dataIndex}%}{c|\n${params.seriesName}}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const option = getPie3D(pieData, 0.8);
|
const option = getPie3D(pieData, 0.8);
|
||||||
const { name, value } = option.series[0].pieData;
|
const { name, value } = option.series[0].pieData;
|
||||||
option.title.text = `{a|${value}%}{c|\n${name}}`;
|
option.title.text = `{a|${value}%}{c|\n${name}}`;
|
||||||
state.option = option;
|
state.option = option;
|
||||||
state.data = option.series;
|
state.data = option.series;
|
||||||
});
|
};
|
||||||
|
|
||||||
|
const handleClick = (params) => {
|
||||||
|
const findItem = state.data.find((el) => el.name === params.seriesName);
|
||||||
|
state.option.title.text = `{a|${findItem?.pieData?.value}%}{c|\n${params.seriesName}}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
const pieData = val.map((row) => {
|
||||||
|
return {
|
||||||
|
name: row.category,
|
||||||
|
value: row.percentage,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
initData(pieData);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col v-for="item in state.list" :key="item.label" :span="12">
|
<el-col v-for="(item, index) in state.list" :key="item.label" :span="12">
|
||||||
<div class="inputs-item flex-row">
|
<div class="inputs-item flex-row">
|
||||||
<span class="inputs-item-icon">
|
<span class="inputs-item-icon">
|
||||||
<img :src="item.icon" />
|
<img :src="getAssetsFile(`images/inputs/${index + 1}.png`)" />
|
||||||
</span>
|
</span>
|
||||||
<div class="inputs-item-info flex-column">
|
<div class="inputs-item-info flex-column">
|
||||||
<b>{{ item.label }}</b>
|
<b>{{ item.label }}</b>
|
||||||
@ -17,49 +17,33 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
import { getAssetsFile } from '@/utils';
|
import { getAssetsFile } from '@/utils';
|
||||||
|
import { isEmpty } from '@/utils';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
list: [
|
list: [],
|
||||||
{
|
|
||||||
label: '监管机构',
|
|
||||||
value: 88,
|
|
||||||
unit: '家',
|
|
||||||
icon: getAssetsFile('images/inputs/1.png'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '监管人员',
|
|
||||||
value: 106,
|
|
||||||
unit: '人',
|
|
||||||
icon: getAssetsFile('images/inputs/2.png'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '村级监管员',
|
|
||||||
value: 38,
|
|
||||||
unit: '人',
|
|
||||||
icon: getAssetsFile('images/inputs/3.png'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '农资经营单位',
|
|
||||||
value: 27,
|
|
||||||
unit: '家',
|
|
||||||
icon: getAssetsFile('images/inputs/4.png'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '生产主体',
|
|
||||||
value: 154,
|
|
||||||
unit: '家',
|
|
||||||
icon: getAssetsFile('images/inputs/5.png'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '检测机构',
|
|
||||||
value: 16,
|
|
||||||
unit: '家',
|
|
||||||
icon: getAssetsFile('images/inputs/6.png'),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
state.list = val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.inputs {
|
.inputs {
|
||||||
|
|||||||
@ -1,25 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="board">
|
<div class="board">
|
||||||
<custom-scroll-board :chart-config="options" />
|
<custom-scroll-board v-if="state.loading" :chart-config="state.options" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
|
import { isEmpty } from '@/utils';
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const header = ['白名单企业', '产品名称', '黑名单企业', '产品名称'];
|
const header = ['白名单企业', '产品名称', '黑名单企业', '产品名称'];
|
||||||
const len = header.length;
|
const len = header.length;
|
||||||
const options = ref({
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
options: {
|
||||||
attr: { w: 200, h: 240 },
|
attr: { w: 200, h: 240 },
|
||||||
option: {
|
option: {
|
||||||
header,
|
header,
|
||||||
dataset: [
|
dataset: [
|
||||||
['富农种源', '京科824', '南方农业', '京科824'],
|
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||||
['富农种源', '京科824', '南方农业', '京科824'],
|
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||||
['富农种源', '京科824', '南方农业', '京科824'],
|
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||||
['富农种源', '京科824', '南方农业', '京科824'],
|
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||||
['富农种源', '京科824', '南方农业', '京科824'],
|
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||||
['富农种源', '京科824', '南方农业', '京科824'],
|
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||||
['富农种源', '京科824', '南方农业', '京科824'],
|
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||||
],
|
],
|
||||||
index: false,
|
index: false,
|
||||||
columnWidth: [100, 100, 100, 100],
|
columnWidth: [100, 100, 100, 100],
|
||||||
@ -32,7 +42,40 @@ const options = ref({
|
|||||||
oddRowBGC: 'rgba(0, 59, 81, 0.1)',
|
oddRowBGC: 'rgba(0, 59, 81, 0.1)',
|
||||||
evenRowBGC: 'rgba(10, 39, 50, 0.1)',
|
evenRowBGC: 'rgba(10, 39, 50, 0.1)',
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const genBlankAndWihteList = (data = []) => {
|
||||||
|
const rList = data.filter((row) => row.currentRating === 'r');
|
||||||
|
const bList = data.filter((row) => row.currentRating === 'b');
|
||||||
|
const len = rList.length >= bList.length ? rList.length : bList.length;
|
||||||
|
let list = new Array(len).fill(['', '', '', '']);
|
||||||
|
rList.forEach((item, index) => {
|
||||||
|
let temp = new Array(4).fill('');
|
||||||
|
temp[0] = item.belongCompany;
|
||||||
|
temp[1] = item.comName;
|
||||||
|
list[index] = temp;
|
||||||
|
});
|
||||||
|
bList.forEach((item, index) => {
|
||||||
|
list[index][2] = item.belongCompany;
|
||||||
|
list[index][3] = item.comName;
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
state.options.option.dataset = genBlankAndWihteList(val);
|
||||||
|
state.loading = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.board {
|
.board {
|
||||||
|
|||||||
@ -2,7 +2,15 @@
|
|||||||
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
|
import { isEmpty } from '@/utils';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
option: {
|
option: {
|
||||||
@ -68,12 +76,19 @@ const state = reactive({
|
|||||||
// name: '面积(万亩)',
|
// name: '面积(万亩)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: [
|
data: [],
|
||||||
{ value: 530, name: '种子' },
|
|
||||||
{ value: 1215, name: '化肥' },
|
|
||||||
{ value: 2312, name: '农药' },
|
|
||||||
{ value: 916, name: '地膜' },
|
|
||||||
{ value: 108, name: '水' },
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
state.data = val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="inputs">
|
<div class="inputs">
|
||||||
<h2 class="inputs-title">检测批次：15684次</h2>
|
<h2 class="inputs-title">检测批次：{{ state.counts }}次</h2>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col v-for="item in state.list" :key="item.label" :span="12">
|
<el-col v-for="item in state.list" :key="item.label" :span="12">
|
||||||
<div class="inputs-item flex-column">
|
<div class="inputs-item flex-column">
|
||||||
<div class="inputs-item-value">{{ item.value }}</div>
|
<div class="inputs-item-value">{{ item.value }}%</div>
|
||||||
<div class="inputs-item-label">{{ item.label }}</div>
|
<div class="inputs-item-label">{{ item.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -12,9 +12,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
|
import { isEmpty } from '@/utils';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
counts: 0,
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
label: '检测合格率',
|
label: '检测合格率',
|
||||||
@ -26,6 +35,21 @@ const state = reactive({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
state.list[0].value = val[0].JCHGL;
|
||||||
|
state.list[1].value = val[0].JCFGL;
|
||||||
|
state.counts = val[0].JCYPPC;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.inputs {
|
.inputs {
|
||||||
|
|||||||
@ -4,21 +4,21 @@
|
|||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="投入品监管体系建设" :top-postion="'left'">
|
<customBack top-title="投入品监管体系建设" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<inputsOne />
|
<inputsOne :data="state.data.one" />
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="投入品检测监管" :top-postion="'left'">
|
<customBack top-title="投入品检测监管" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<inputsTwo />
|
<inputsTwo :data="state.data.InputDetector" />
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="投入品金额对比" :top-postion="'left'">
|
<customBack top-title="投入品金额对比" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<inputsThere />
|
<inputsThere :data="state.data.there" />
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
@ -30,7 +30,7 @@
|
|||||||
<div class="right-charts-item">
|
<div class="right-charts-item">
|
||||||
<customBack top-title="生产主体统计" :top-postion="'right'">
|
<customBack top-title="生产主体统计" :top-postion="'right'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<inputsFour />
|
<inputsFour :data="state.data.ProductEntity" />
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
@ -57,14 +57,14 @@
|
|||||||
@command="handleCommand"
|
@command="handleCommand"
|
||||||
>
|
>
|
||||||
<template #back>
|
<template #back>
|
||||||
<inputsFive ref="fiveRef" />
|
<inputsFive ref="fiveRef" :data="state.data.five" :query="state.queryCode" />
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-charts-item">
|
<div class="right-charts-item">
|
||||||
<customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
|
<customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<inputsSix />
|
<inputsSix :data="state.data.BlackWhite" />
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
@ -72,6 +72,7 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { nextTick, reactive, ref } from 'vue';
|
||||||
import inputsOne from './components/inputsOne.vue';
|
import inputsOne from './components/inputsOne.vue';
|
||||||
import inputsTwo from './components/inputsTwo.vue';
|
import inputsTwo from './components/inputsTwo.vue';
|
||||||
import inputsThere from './components/inputsThere.vue';
|
import inputsThere from './components/inputsThere.vue';
|
||||||
@ -79,14 +80,300 @@ import inputsFour from './components/inputsFour.vue';
|
|||||||
import inputsFive from './components/inputsFive.vue';
|
import inputsFive from './components/inputsFive.vue';
|
||||||
import inputsSix from './components/inputsSix.vue';
|
import inputsSix from './components/inputsSix.vue';
|
||||||
import inputsMap from './components/inputsMap.vue';
|
import inputsMap from './components/inputsMap.vue';
|
||||||
import { nextTick, ref } from 'vue';
|
import { useApp } from '@/hooks';
|
||||||
|
import { sleep } from '@/utils';
|
||||||
|
import { GetInputsInfo } from '@/apis/inputs';
|
||||||
|
|
||||||
|
const app = useApp();
|
||||||
const fiveRef = ref(null);
|
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) => {
|
const handleCommand = (data) => {
|
||||||
console.info('data=', data);
|
state.queryCode = data.value;
|
||||||
nextTick(() => {
|
// console.info('data=', data);
|
||||||
fiveRef.value && fiveRef.value.refresData();
|
// nextTick(() => {
|
||||||
});
|
// fiveRef.value && fiveRef.value.refresData();
|
||||||
|
// });
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user