Web/new-digital-agriculture-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

投入品监管和生产经营主体(未完)

Browse Source
This commit is contained in:
2090205686@qq.com 2025-05-15 15:00:12 +08:00
parent 05249ceca6
commit 6b04fa3055
15 changed files with 89 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@ -42,8 +42,6 @@ declare module 'vue' {
CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
IndexCo: typeof import('./src/components/custom-echart-line/index-co.vue')['default']
IndexRe: typeof import('./src/components/new-hyaline-cake/index-re.vue')['default']
NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

10
src/components/custom-echart-column-line/index.vue
View File

@ -128,11 +128,11 @@ export default {
option.series[1].data = yDataLine.value;
option.xAxis.data = xData.value;
setOptions(option);
// startAutoPlay({
// interval: 2000,
// seriesIndex: 0,
// showTooltip: true,
// });
startAutoPlay({
interval: 2000,
seriesIndex: 0,
showTooltip: true,
});
getInstance()?.off('click', onClick);
getInstance()?.on('click', onClick);
}

4
src/components/custom-echart-hyaline-cake/index.vue
View File

@ -183,7 +183,9 @@ export default {
const option = Object.assign(
{
tooltip: {
backgroundColor: 'rgba(18, 55, 85, 0.8);',
// tooltip样式调整添加这个类名
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0',
color: '#fff',
position: function (point, params, dom, rect, size) {

46
src/components/custom-echart-triangle/index.vue
View File

@ -56,8 +56,9 @@ export default {
zlevel: 1,
name: '漏斗图',
type: 'funnel',
top: '11%',
left: 'center',
width: '28%',
width: '25%',
sort: 'ascending',
gap: 0,
label: {
@ -66,38 +67,51 @@ export default {
width: '200px',
align: 'right',
formatter: function (params) {
if (!params.data.reaVal) return '';
let arr = [`{a|${params.data.name}}`, `{b| ${params.data.reaVal}%}`];
return arr.join('\n');
// params.data.name + ':' + params.data.reaVal + '%'};
},
rich: {
a: { color: '#fff', fontSize: '16px' },
b: { color: '#05FCC6', fontSize: '16px' },
b: { color: '#05FCC6', fontSize: '16px', marginTop: '10px' },
},
verticalAlign: 'middle',
padding: [5, 10], // 增加标签内边距
padding: [5, 6], // 增加标签内边距
},
labelLine: {
show: true,
length: 20,
length2: 30,
length: 10,
length2: 50,
smooth: true,
lineStyle: {
width: 2,
width: 1,
color: '#ffffff',
opacity: 1,
type: 'solid',
},
// 自定义折线路径（从标签到数据点的像素坐标）
// 参数：idx-数据索引, params-包含标签位置信息的对象
// formatter: function (idx, params) {
// return [
// [params.labelRect.x, params.labelRect.y], // 起点（标签位置）
// [params.labelRect.x + 20, params.labelRect.y], // 水平线段
// [params.labelRect.x + 20, params.dataCoord[1]] // 垂直线段
// ];
// },
},
// 添加第二段折线
// markLine: {
// symbol: 'none', // 隐藏端点
// lineStyle: {
// type: 'solid',
// color: '#fff',
// width: 1,
// },
// data: [
// // 从默认 labelLine 的终点到自定义位置
// [
// {
// coord: [50, 50], // 第一段线的终点（需动态计算）
// name: 'Label1',
// },
// {
// coord: [80, 50], // 第二段线的终点
// name: 'Label1',
// },
// ],
// ],
// },
itemStyle: {
show: false,
borderColor: '#fff',

2
src/components/subTop.vue
View File

@ -155,7 +155,7 @@ const handleCommand = (data) => {
-webkit-background-clip: text;
color: #fff;
letter-spacing: 4px;
text-shadow: -2px 0 0 1px #add8f1;
text-shadow: -2px 0 10px #add8f1;
width: 100%;
padding: 0 36px 0 72px;
box-sizing: border-box;

13
src/styles/common/define.scss
View File

@ -9,6 +9,19 @@
}
}
.custom-tooltip-container{
border-radius: 8px !important;
padding: 6px 16px 6px 8px !important;
background-color: rgba(0,0,0,0.7) !important;
backdrop-filter: blur(8px) !important;
& span{
width: 8px !important;
height: 8px !important;
vertical-align: middle;
margin-top: -4px;
}
}
.custom-echarts-tips {
color: #fff;
}

2
src/views/business/components/businessFour.vue
View File

@ -127,7 +127,7 @@ watch(
width: 160px;
margin: 0 auto;
height: 32px;
line-height: 32px;
line-height: 26px;
font-size: 16px;
font-weight: 400;
text-align: center;

4
src/views/business/components/businessOne.vue
View File

@ -199,7 +199,9 @@ function getPie3D(pieData, internalDiameterRatio) {
},
},
tooltip: {
backgroundColor: 'rgba(18, 55, 85, 0.8);',
// tooltip样式调整添加这个类名
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0',
color: '#fff',
position: function (point, params, dom, rect, size) {

4
src/views/business/components/businessThere.vue
View File

@ -27,7 +27,9 @@ const state = reactive({
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(18, 55, 85, 0.8);',
// tooltip样式调整添加这个类名
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0',
formatter: (data) => {
const params = data[0];

4
src/views/business/components/businessTwo.vue
View File

@ -30,7 +30,9 @@ const state = reactive({
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(18, 55, 85, 0.8);',
// tooltip样式调整添加这个类名
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0',
formatter: (data) => {
const params = data[0];

8
src/views/entities/components/categoryCharts.vue
View File

@ -12,22 +12,22 @@ const data = ref([
{
name: ' 企业',
value: 10.8,
itemStyle: { color: '#3c5fc4', opacity: 0.8 },
itemStyle: { color: '#5b7bc7', opacity: 0.8 },
},
{
name: ' 合作社',
value: 18.4,
itemStyle: { color: '#8fd8ff', opacity: 0.8 },
itemStyle: { color: '#8ed0f3', opacity: 0.8 },
},
{
name: ' 村集体',
value: 14.3,
itemStyle: { color: '#55d9a4', opacity: 0.8 },
itemStyle: { color: '#65be97', opacity: 0.8 },
},
{
name: ' 个体',
value: 23.7,
itemStyle: { color: '#d2a823', opacity: 0.8 },
itemStyle: { color: '#f0c94d', opacity: 0.8 },
},
]);

4
src/views/entities/components/entitiesCategoryCharts.vue
View File

@ -31,7 +31,9 @@ const state = reactive({
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(18, 55, 85, 0.8);',
// tooltip样式调整添加这个类名
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5);',
borderColor: '#35d0c0',
formatter: (data) => {
const params = data[0];

30
src/views/entities/components/entitiesStatistics.vue
View File

@ -22,7 +22,7 @@ const state = reactive({
option: {
grid: {
left: '3%',
right: '10%',
right: '1%',
bottom: '10%',
top: '15%',
containLabel: true,
@ -33,7 +33,9 @@ const state = reactive({
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(18, 55, 85, 0.8);',
// tooltip样式调整添加这个类名
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0',
formatter: (data) => {
console.log('data', data);
@ -133,14 +135,14 @@ const state = reactive({
},
],
legend: {
itemWidth: 12,
itemHeight: 8,
itemWidth: 16,
itemHeight: 16,
itemGap: 20,
right: '2%',
top: '3%',
x: 'center',
textStyle: {
fontSize: 14,
fontSize: 16,
color: '#fff',
},
data: ['总产量（吨）', '平均产量（吨）'],
@ -159,12 +161,12 @@ const state = reactive({
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(53,208,192,1)',
color: 'rgba(1,254,253,1)',
},
{
offset: 1,
color: 'rgba(53,208,192,0)',
color: 'rgba(1,254,253,0)',
},
]),
},
@ -183,20 +185,18 @@ const state = reactive({
name: '平均产量（吨）',
type: 'line',
yAxisIndex: 1,
showSymbol: true,
showSymbol: false,
symbolSize: 8,
smooth: true,
smooth: false,
symbol: 'circle',
max: 100,
lineStyle: {
normal: {
color: 'rgba(53,208,192,1)',
color: '#FEF906',
},
},
itemStyle: {
color: 'rgba(254,249,6,1)',
borderColor: '#fff',
borderWidth: 1,
color: '#FEF906',
},
},
],
@ -216,14 +216,14 @@ const loadData = async (code = '') => {
// });
await sleep(500);
state.data = [
{ value: 103, value1: 208, name: '耿马镇' },
{ value: 103, value1: 102, name: '耿马镇' },
{ value: 72, value1: 157, name: '勐撒镇' },
{ value: 50, value1: 125, name: '勐永镇' },
{ value: 60, value1: 146, name: '孟定镇' },
{ value: 40, value1: 86, name: '勐简乡' },
{ value: 111, value1: 172, name: '贺派乡' },
{ value: 81, value1: 180, name: '四排山乡' },
{ value: 55, value1: 99, name: '芒洪乡' },
{ value: 55, value1: 66, name: '芒洪乡' },
{ value: 68, value1: 84, name: '大兴乡' },
];
};

6
src/views/entities/components/hotCharts.vue
View File

@ -12,9 +12,9 @@
import { ref, reactive, onMounted } from 'vue';
const data = ref([
{ value: 40, name: '一级', reaVal: '20' },
{ value: 80, name: '二级', reaVal: '30' },
{ value: 120, name: '三级', reaVal: '50' },
{ value: 40, name: '一级', reaVal: '20', itemStyle: { color: '#56b1c0' } },
{ value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } },
{ value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } },
]);
const option = reactive({});
onMounted(() => {});

4
src/views/entities/index.vue
View File

@ -121,14 +121,14 @@ const loadData = async () => {
{ value: 20, name: '2025' },
],
third: [
{ value: 78, value1: 128, name: '耿马镇' },
{ value: 98, value1: 88, name: '耿马镇' },
{ value: 55, value1: 117, name: '勐撒镇' },
{ value: 65, value1: 145, name: '勐永镇' },
{ value: 60, value1: 126, name: '孟定镇' },
{ value: 40, value1: 86, name: '勐简乡' },
{ value: 81, value1: 152, name: '贺派乡' },
{ value: 41, value1: 130, name: '四排山乡' },
{ value: 63, value1: 109, name: '芒洪乡' },
{ value: 100, value1: 101, name: '芒洪乡' },
{ value: 79, value1: 184, name: '大兴乡' },
],
};