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

Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen

Browse Source
This commit is contained in:
李想 2025-04-25 09:07:54 +08:00
commit 1bedb1ac49
11 changed files with 442 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/custom-rank-list/index.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<div :class="`custom-rank-list rank-${type}`" :style="`color: ${textColor}`"> <div :class="`custom-rank-list rank-${type}`" :style="`color: ${textColor}`">
<div v-for="(item, i) in status.rows" :key="item.toString() + item.scroll" class="row-item" :style="`height: ${status.heights[i]}px;`"> <div
v-for="(item, i) in status.rows"
:key="item.toString() + item.scroll"
:class="`row-item row-item-${item.ranking}`"
:style="`height: ${status.heights[i]}px;`"
>
<div class="ranking-info"> <div class="ranking-info">
<div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">{{ indexPrefix }}{{ item.ranking }}</div> <div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">{{ indexPrefix }}{{ item.ranking }}</div>
<div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" /> <div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
@ -223,7 +228,7 @@ onUnmounted(() => {
height: 2px; height: 2px;
background: radial-gradient(rgb(40 248 255) 5%, transparent 80%); background: radial-gradient(rgb(40 248 255) 5%, transparent 80%);
transform: translateX(-100%); transform: translateX(-100%);
animation: shine 3s ease-in-out infinite alternate; // animation: shine 3s ease-in-out infinite alternate;
} }
} }

67
src/router/index.js
View File

@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from 'vue-router';
import Layout from '@/layouts/index.vue'; import Layout from '@/layouts/index.vue';
import demoRouters from './modules/demo'; import demoRouters from './modules/demo';
import path from 'path-browserify';
import v2 from './modules/v2'; import v2 from './modules/v2';
export const constantRoutes = [ export const constantRoutes = [
@ -22,67 +21,17 @@ export const constantRoutes = [
path: '/', path: '/',
name: 'layout', name: 'layout',
component: Layout, component: Layout,
redirect: '/home', redirect: '/v2/land',
meta: { title: '首页', icon: 'House' }, meta: { title: '首页', icon: 'House' },
// children: [
// {
// path: '/home',
// component: () => import('@/views/home/index.vue'),
// name: 'home',
// meta: { title: '首页', icon: 'House' },
// },
// {
// path: '/land',
// component: () => import('@/views/land/index.vue'),
// name: 'land',
// meta: { title: '土地资源', icon: 'House' },
// },
// {
// path: '/inputs',
// name: 'inputs',
// component: () => import('@/views/inputs/index.vue'),
// hidden: true,
// },
// {
// path: '/entities',
// name: 'entities',
// component: () => import('@/views/entities/index.vue'),
// hidden: true,
// },
// {
// path: '/breed',
// name: 'breed',
// component: () => import('@/views/breed/index.vue'),
// hidden: true,
// },
// {
// path: '/plant',
// name: 'plant',
// component: () => import('@/views/plant/index.vue'),
// hidden: true,
// },
// {
// path: '/trace',
// name: 'trace',
// component: () => import('@/views/trace/index.vue'),
// hidden: true,
// },
// {
// path: '/early',
// name: 'early',
// component: () => import('@/views/early/index.vue'),
// hidden: true,
// },
// ],
}, },
...demoRouters, // ...demoRouters,
v2, v2,
{ // {
path: '/test', // path: '/test',
name: 'test', // name: 'test',
component: () => import('@/views/test/index.vue'), // component: () => import('@/views/test/index.vue'),
hidden: true, // hidden: true,
}, // },
]; ];
/** /**

12
src/router/modules/demo.js
View File

@ -3,9 +3,9 @@ import Layout from '@/layouts/index.vue';
export default [ export default [
{ {
path: '/demo', path: '/demo',
name: 'layout', name: 'demo',
component: Layout, component: Layout,
redirect: '/demo/scrollBoard', redirect: '/scrollBoard',
meta: { title: '案例', icon: 'document' }, meta: { title: '案例', icon: 'document' },
children: [ children: [
{ {
@ -21,10 +21,10 @@ export default [
meta: { title: '滚动排名列表', icon: 'document' }, meta: { title: '滚动排名列表', icon: 'document' },
}, },
{ {
path: '/demo/test', path: '/page',
component: () => import('@/views/land/index.vue'), component: () => import('@/views/demo/test.vue'),
name: 'demo-land', name: 'page',
meta: { title: '土地资源', icon: 'document' }, meta: { title: '测试', icon: 'document' },
}, },
], ],
}, },

88
src/router/modules/v2.js
View File

@ -2,58 +2,58 @@ import Layout from '@/layouts/index.vue';
export default { export default {
path: '/v2', path: '/v2',
name: 'layout', name: 'v2',
component: Layout, component: Layout,
redirect: '/v2/home', redirect: '/v2/home',
meta: { title: '首页', icon: 'House' }, meta: { title: '首页', icon: 'House' },
children: [ children: [
// {
// path: '/v2/home',
// component: () => import('@/views/home/index.vue'),
// name: 'home',
// meta: { title: '首页', icon: 'House' },
// },
{ {
path: 'home', path: '/v2/land',
component: () => import('@/views/home/index.vue'),
name: 'home',
meta: { title: '首页', icon: 'House' },
},
{
path: 'land',
component: () => import('@/views/land/index.vue'), component: () => import('@/views/land/index.vue'),
name: 'land', name: 'land',
meta: { title: '土地资源', icon: 'House' }, meta: { title: '土地资源', icon: 'House' },
}, },
{ // {
path: 'inputs', // path: 'inputs',
name: 'inputs', // name: 'inputs',
component: () => import('@/views/inputs/index.vue'), // component: () => import('@/views/inputs/index.vue'),
hidden: true, // hidden: true,
}, // },
{ // {
path: 'entities', // path: 'entities',
name: 'entities', // name: 'entities',
component: () => import('@/views/entities/index.vue'), // component: () => import('@/views/entities/index.vue'),
hidden: true, // hidden: true,
}, // },
{ // {
path: 'breed', // path: 'breed',
name: 'breed', // name: 'breed',
component: () => import('@/views/breed/index.vue'), // component: () => import('@/views/breed/index.vue'),
hidden: true, // hidden: true,
}, // },
{ // {
path: 'plant', // path: 'plant',
name: 'plant', // name: 'plant',
component: () => import('@/views/plant/index.vue'), // component: () => import('@/views/plant/index.vue'),
hidden: true, // hidden: true,
}, // },
{ // {
path: 'trace', // path: 'trace',
name: 'trace', // name: 'trace',
component: () => import('@/views/trace/index.vue'), // component: () => import('@/views/trace/index.vue'),
hidden: true, // hidden: true,
}, // },
{ // {
path: 'early', // path: 'early',
name: 'early', // name: 'early',
component: () => import('@/views/early/index.vue'), // component: () => import('@/views/early/index.vue'),
hidden: true, // hidden: true,
}, // },
], ],
}; };

152
src/views/breed/index.vue
View File

@ -1,88 +1,84 @@
<template> <template>
<div class="data-home-index"> <div class="data-home-index">
<baseBg :name-val="'breed'" top-title="智慧养殖管理系统"> <el-row style="width: 100%; height: 100%">
<template #center> <el-col :span="6" class="left-charts">
<el-row style="width: 100%; height: 100%"> <div class="left-charts-item">
<el-col :span="6" class="left-charts"> <customBack top-title="存栏数据分析" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="存栏数据分析" :top-postion="'left'"> <InventoryCharts></InventoryCharts>
<template #back> </template>
<InventoryCharts></InventoryCharts> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
<customBack top-title="饲料与饮水量监测" :top-postion="'left'">
<template #back>
<waterIntakeCharts></waterIntakeCharts>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="生长指标监测" :top-postion="'left'">
<template #back>
<growthIndexesCharts></growthIndexesCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<el-row style="height: 67%">
<el-col :span="24" class="center-top" style="height: 100%">
<div class="notice">
<noticeBar :height="'40px'"></noticeBar>
</div> </div>
<div class="left-charts-item"> <div class="top">
<customBack top-title="饲料与饮水量监测" :top-postion="'left'"> <environment></environment>
<template #back>
<waterIntakeCharts></waterIntakeCharts>
</template>
</customBack>
</div> </div>
<div class="left-charts-item"> <div class="map-gis">
<customBack top-title="生长指标监测" :top-postion="'left'"> <plantgs></plantgs>
<template #back>
<growthIndexesCharts></growthIndexesCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<el-row style="height: 67%">
<el-col :span="24" class="center-top" style="height: 100%">
<div class="notice">
<noticeBar :height="'40px'"></noticeBar>
</div>
<div class="top">
<environment></environment>
</div>
<div class="map-gis">
<plantgs></plantgs>
</div>
</el-col>
</el-row>
<el-row style="height: 33%" :gutter="30">
<el-col :span="12" style="height: 100%">
<customBack top-title="健康状况指标" :top-postion="'left'">
<template #back>
<healthStatusCharts></healthStatusCharts>
</template>
</customBack>
</el-col>
<el-col :span="12" style="height: 100%">
<customBack top-title="智慧投喂控制" :top-postion="'right'">
<template #back>
<irrigationCharts></irrigationCharts>
</template>
</customBack>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="智慧监控" :top-postion="'right'">
<template #back>
<monitoringScreen></monitoringScreen>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="生产性能与效益数额" :top-postion="'right'">
<template #back>
<benefitCharts></benefitCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="设备数据统计" :top-postion="'right'">
<template #back>
<deviceCharts></deviceCharts>
</template>
</customBack>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</template> <el-row style="height: 33%" :gutter="30">
</baseBg> <el-col :span="12" style="height: 100%">
<customBack top-title="健康状况指标" :top-postion="'left'">
<template #back>
<healthStatusCharts></healthStatusCharts>
</template>
</customBack>
</el-col>
<el-col :span="12" style="height: 100%">
<customBack top-title="智慧投喂控制" :top-postion="'right'">
<template #back>
<irrigationCharts></irrigationCharts>
</template>
</customBack>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="智慧监控" :top-postion="'right'">
<template #back>
<monitoringScreen></monitoringScreen>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="生产性能与效益数额" :top-postion="'right'">
<template #back>
<benefitCharts></benefitCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="设备数据统计" :top-postion="'right'">
<template #back>
<deviceCharts></deviceCharts>
</template>
</customBack>
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script setup> <script setup>

92
src/views/early/index.vue
View File

@ -1,53 +1,49 @@
<template> <template>
<div class="data-home-index"> <div class="data-home-index">
<baseBg :name-val="'early'" top-title="产业预警管理系统"> <el-row style="width: 100%; height: 100%">
<template #center> <el-col :span="6" class="left-charts">
<el-row style="width: 100%; height: 100%"> <div class="left-charts-item">
<el-col :span="6" class="left-charts"> <customBack top-title="舆情数据统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="舆情数据统计" :top-postion="'left'"> <popularFeelings></popularFeelings>
<template #back> </template>
<popularFeelings></popularFeelings> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="追溯主体统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="追溯主体统计" :top-postion="'left'"> <backToCharts></backToCharts>
<template #back> </template>
<backToCharts></backToCharts> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="追溯产品分类" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="追溯产品分类" :top-postion="'left'"> <productTypeWordClould></productTypeWordClould>
<template #back> </template>
<productTypeWordClould></productTypeWordClould> </customBack>
</template> </div>
</customBack> </el-col>
</div> <el-col :span="12">
</el-col> <centerMap></centerMap>
<el-col :span="12"> </el-col>
<centerMap></centerMap> <el-col :span="6" class="right-charts">
</el-col> <div class="right-charts-item" style="height: 67%">
<el-col :span="6" class="right-charts"> <customBack top-title="农场品实时价格" :top-postion="'right'">
<div class="right-charts-item" style="height: 67%"> <template #back>
<customBack top-title="农场品实时价格" :top-postion="'right'"> <realTimePrice></realTimePrice>
<template #back> </template>
<realTimePrice></realTimePrice> </customBack>
</template> </div>
</customBack> <div class="right-charts-item" style="height: 33%">
</div> <customBack top-title="农产品价格数据分析" :top-postion="'right'">
<div class="right-charts-item" style="height: 33%"> <template #back>
<customBack top-title="农产品价格数据分析" :top-postion="'right'"> <priceCharts></priceCharts>
<template #back> </template>
<priceCharts></priceCharts> </customBack>
</template> </div>
</customBack> </el-col>
</div> </el-row>
</el-col>
</el-row>
</template>
</baseBg>
</div> </div>
</template> </template>
<script setup> <script setup>

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

@ -1,60 +1,56 @@
<template> <template>
<div class="data-home-index"> <div class="data-home-index">
<baseBg :name-val="'entities'" top-title="生产经主体管理系统"> <el-row style="width: 100%; height: 100%">
<template #center> <el-col :span="6" class="left-charts">
<el-row style="width: 100%; height: 100%"> <div class="left-charts-item">
<el-col :span="6" class="left-charts"> <customBack top-title="生产经营主体类别统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="生产经营主体类别统计" :top-postion="'left'"> <entitiesCategoryCharts></entitiesCategoryCharts>
<template #back> </template>
<entitiesCategoryCharts></entitiesCategoryCharts> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="各乡镇经营主体统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="各乡镇经营主体统计" :top-postion="'left'"> <entitiesStatistics></entitiesStatistics>
<template #back> </template>
<entitiesStatistics></entitiesStatistics> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="生产经营主体信息" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="生产经营主体信息" :top-postion="'left'"> <entitieslist></entitieslist>
<template #back> </template>
<entitieslist></entitieslist> </customBack>
</template> </div>
</customBack> </el-col>
</div> <el-col :span="12">
</el-col> <centerMap></centerMap>
<el-col :span="12"> </el-col>
<centerMap></centerMap> <el-col :span="6" class="right-charts">
</el-col> <div class="right-charts-item">
<el-col :span="6" class="right-charts"> <customBack top-title="经营类目统计" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="经营类目统计" :top-postion="'right'"> <categoryCharts></categoryCharts>
<template #back> </template>
<categoryCharts></categoryCharts> </customBack>
</template> </div>
</customBack> <div class="right-charts-item">
</div> <customBack top-title="类目效益统计(亿元)" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="类目效益统计(亿元)" :top-postion="'right'"> <benefitCharts></benefitCharts>
<template #back> </template>
<benefitCharts></benefitCharts> </customBack>
</template> </div>
</customBack> <div class="right-charts-item">
</div> <customBack top-title="热门产品" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="热门产品" :top-postion="'right'"> <hotCharts></hotCharts>
<template #back> </template>
<hotCharts></hotCharts> </customBack>
</template> </div>
</customBack> </el-col>
</div> </el-row>
</el-col>
</el-row>
</template>
</baseBg>
</div> </div>
</template> </template>
<script setup> <script setup>

106
src/views/inputs/index.vue
View File

@ -1,60 +1,56 @@
<template> <template>
<div class="data-home-index"> <div class="data-home-index">
<baseBg :name-val="'inputs'" top-title="投入品管理系统"> <el-row style="width: 100%; height: 100%">
<template #center> <el-col :span="6" class="left-charts">
<el-row style="width: 100%; height: 100%"> <div class="left-charts-item">
<el-col :span="6" class="left-charts"> <customBack top-title="投入品分类统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="投入品分类统计" :top-postion="'left'"> <inputsType></inputsType>
<template #back> </template>
<inputsType></inputsType> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="投入品生产企业统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="投入品生产企业统计" :top-postion="'left'"> <inputsGmp></inputsGmp>
<template #back> </template>
<inputsGmp></inputsGmp> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="种养殖数据统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="种养殖数据统计" :top-postion="'left'"> <landbreedCharts></landbreedCharts>
<template #back> </template>
<landbreedCharts></landbreedCharts> </customBack>
</template> </div>
</customBack> </el-col>
</div> <el-col :span="12">
</el-col> <centerMap></centerMap>
<el-col :span="12"> </el-col>
<centerMap></centerMap> <el-col :span="6" class="right-charts">
</el-col> <div class="right-charts-item">
<el-col :span="6" class="right-charts"> <customBack top-title="案件次数" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="案件次数" :top-postion="'right'"> <casesAlerts></casesAlerts>
<template #back> </template>
<casesAlerts></casesAlerts> </customBack>
</template> </div>
</customBack> <div class="right-charts-item">
</div> <customBack top-title="投入品月度使用统计" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="投入品月度使用统计" :top-postion="'right'"> <monthlyuseCharts></monthlyuseCharts>
<template #back> </template>
<monthlyuseCharts></monthlyuseCharts> </customBack>
</template> </div>
</customBack> <div class="right-charts-item">
</div> <customBack top-title="投入品经销商分布" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="投入品经销商分布" :top-postion="'right'"> <dealerDistributionCharts></dealerDistributionCharts>
<template #back> </template>
<dealerDistributionCharts></dealerDistributionCharts> </customBack>
</template> </div>
</customBack> </el-col>
</div> </el-row>
</el-col>
</el-row>
</template>
</baseBg>
</div> </div>
</template> </template>
<script setup> <script setup>

62
src/views/land/components/landCirculation.vue
View File

@ -55,39 +55,41 @@ const options = ref({
font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular'; font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
font-weight: 700; font-weight: 700;
} }
}
&:nth-child(1) { &:deep(.row-item-1) {
.ranking-info { .ranking-info {
color: #fe7f03 !important; color: #fe7f03 !important;
}
.ranking-value {
color: #fe7f03 !important;
}
.inside-column {
background: linear-gradient(90deg, rgba(254, 127, 3, 0), #fe7f03) !important;
}
} }
&:nth-child(2) { .ranking-value {
.ranking-info { color: #fe7f03 !important;
color: #fef906 !important;
}
.ranking-value {
color: #fef906 !important;
}
.inside-column {
background: linear-gradient(90deg, rgba(254, 249, 6, 0), #fef906) !important;
}
} }
&:nth-child(3) { .inside-column {
.ranking-info { background: linear-gradient(90deg, rgba(254, 127, 3, 0), #fe7f03) !important;
color: #02fd94 !important; }
} }
.ranking-value {
color: #02fd94 !important; &:deep(.row-item-2) {
} .ranking-info {
.inside-column { color: #fef906 !important;
background: linear-gradient(90deg, rgba(2, 253, 148, 0), #02fd94) !important; }
} .ranking-value {
color: #fef906 !important;
}
.inside-column {
background: linear-gradient(90deg, rgba(254, 249, 6, 0), #fef906) !important;
}
}
&:deep(.row-item-3) {
.ranking-info {
color: #02fd94 !important;
}
.ranking-value {
color: #02fd94 !important;
}
.inside-column {
background: linear-gradient(90deg, rgba(2, 253, 148, 0), #02fd94) !important;
} }
} }
} }

152
src/views/plant/index.vue
View File

@ -1,88 +1,84 @@
<template> <template>
<div class="data-plant-index"> <div class="data-plant-index">
<baseBg :name-val="'plant'" top-title="智慧种植管理系统"> <el-row style="width: 100%; height: 100%">
<template #center> <el-col :span="6" class="left-charts">
<el-row style="width: 100%; height: 100%"> <div class="left-charts-item">
<el-col :span="6" class="left-charts"> <customBack top-title="智慧种植种类分析" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="智慧种植种类分析" :top-postion="'left'"> <plantTypeCharts></plantTypeCharts>
<template #back> </template>
<plantTypeCharts></plantTypeCharts> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
<customBack top-title="昆虫害监测" :top-postion="'left'">
<template #back>
<insectPestsCharts></insectPestsCharts>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="病理害监测" :top-postion="'left'">
<template #back>
<pathologyCharts></pathologyCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<el-row style="height: 67%">
<el-col :span="24" class="center-top" style="height: 100%">
<div class="notice">
<noticeBar :height="'40px'"></noticeBar>
</div> </div>
<div class="left-charts-item"> <div class="top">
<customBack top-title="昆虫害监测" :top-postion="'left'"> <environment></environment>
<template #back>
<insectPestsCharts></insectPestsCharts>
</template>
</customBack>
</div> </div>
<div class="left-charts-item"> <div class="map-gis">
<customBack top-title="病理害监测" :top-postion="'left'"> <plantgs></plantgs>
<template #back>
<pathologyCharts></pathologyCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<el-row style="height: 67%">
<el-col :span="24" class="center-top" style="height: 100%">
<div class="notice">
<noticeBar :height="'40px'"></noticeBar>
</div>
<div class="top">
<environment></environment>
</div>
<div class="map-gis">
<plantgs></plantgs>
</div>
</el-col>
</el-row>
<el-row style="height: 33%" :gutter="30">
<el-col :span="12" style="height: 100%">
<customBack top-title="水肥检测分析" :top-postion="'left'">
<template #back>
<waterfertilizerCharts></waterfertilizerCharts>
</template>
</customBack>
</el-col>
<el-col :span="12" style="height: 100%">
<customBack top-title="智慧水肥灌溉" :top-postion="'right'">
<template #back>
<irrigationCharts></irrigationCharts>
</template>
</customBack>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="智慧监控 A区 QQI" :top-postion="'right'">
<template #back>
<monitoringScreen></monitoringScreen>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="种植产量分析" :top-postion="'right'">
<template #back>
<yieldCharts></yieldCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="水质检测分析" :top-postion="'right'">
<template #back>
<waterdetectionCharts></waterdetectionCharts>
</template>
</customBack>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</template> <el-row style="height: 33%" :gutter="30">
</baseBg> <el-col :span="12" style="height: 100%">
<customBack top-title="水肥检测分析" :top-postion="'left'">
<template #back>
<waterfertilizerCharts></waterfertilizerCharts>
</template>
</customBack>
</el-col>
<el-col :span="12" style="height: 100%">
<customBack top-title="智慧水肥灌溉" :top-postion="'right'">
<template #back>
<irrigationCharts></irrigationCharts>
</template>
</customBack>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="智慧监控 A区 QQI" :top-postion="'right'">
<template #back>
<monitoringScreen></monitoringScreen>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="种植产量分析" :top-postion="'right'">
<template #back>
<yieldCharts></yieldCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="水质检测分析" :top-postion="'right'">
<template #back>
<waterdetectionCharts></waterdetectionCharts>
</template>
</customBack>
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script setup> <script setup>

106
src/views/trace/index.vue
View File

@ -1,60 +1,56 @@
<template> <template>
<div class="data-home-index"> <div class="data-home-index">
<baseBg :name-val="'trace'" top-title="全程溯源管理系统"> <el-row style="width: 100%; height: 100%">
<template #center> <el-col :span="6" class="left-charts">
<el-row style="width: 100%; height: 100%"> <div class="left-charts-item">
<el-col :span="6" class="left-charts"> <customBack top-title="溯源码数据统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="溯源码数据统计" :top-postion="'left'"> <codeNumCharts></codeNumCharts>
<template #back> </template>
<codeNumCharts></codeNumCharts> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="追溯主体类型统计" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="追溯主体类型统计" :top-postion="'left'"> <principalTypeCharts></principalTypeCharts>
<template #back> </template>
<principalTypeCharts></principalTypeCharts> </customBack>
</template> </div>
</customBack> <div class="left-charts-item">
</div> <customBack top-title="追溯产品分类" :top-postion="'left'">
<div class="left-charts-item"> <template #back>
<customBack top-title="追溯产品分类" :top-postion="'left'"> <productTypeCharts></productTypeCharts>
<template #back> </template>
<productTypeCharts></productTypeCharts> </customBack>
</template> </div>
</customBack> </el-col>
</div> <el-col :span="12">
</el-col> <centerMap></centerMap>
<el-col :span="12"> </el-col>
<centerMap></centerMap> <el-col :span="6" class="right-charts">
</el-col> <div class="right-charts-item">
<el-col :span="6" class="right-charts"> <customBack top-title="溯源主体信息统计" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="溯源主体信息统计" :top-postion="'right'"> <mainPartCharts></mainPartCharts>
<template #back> </template>
<mainPartCharts></mainPartCharts> </customBack>
</template> </div>
</customBack> <div class="right-charts-item">
</div> <customBack top-title="溯源码数据统计" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="溯源码数据统计" :top-postion="'right'"> <traceBarCharts></traceBarCharts>
<template #back> </template>
<traceBarCharts></traceBarCharts> </customBack>
</template> </div>
</customBack> <div class="right-charts-item">
</div> <customBack top-title="最新溯源检测信息" :top-postion="'right'">
<div class="right-charts-item"> <template #back>
<customBack top-title="最新溯源检测信息" :top-postion="'right'"> <detectionCharts></detectionCharts>
<template #back> </template>
<detectionCharts></detectionCharts> </customBack>
</template> </div>
</customBack> </el-col>
</div> </el-row>
</el-col>
</el-row>
</template>
</baseBg>
</div> </div>
</template> </template>
<script setup> <script setup>