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

feat

Browse Source
This commit is contained in:
李想 2025-04-25 11:38:46 +08:00
commit 5d1e1a15a3
12 changed files with 321 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script>
import { ref, reactive, watchEffect } from 'vue';
import { ref, reactive, watchEffect, watch } from 'vue';
import { cloneDeep } from 'lodash';
import { useEcharts } from '@/hooks/useEcharts';
@ -66,6 +66,18 @@ export default {
props.chartData && initCharts();
});
watch(
() => props.chartData,
() => {
console.info('props.chartData变化', props.chartData);
props.chartData && initCharts();
},
{
deep: true,
immediate: true,
}
);
function hexToRGBA(hex, alpha = 1) {
let hexCode = hex.replace('#', '');
if (hexCode.length === 3) {

2
src/components/custom-scroll-title/index.vue
View File

@ -48,7 +48,7 @@ const props = defineProps({
return [
{ label: '首页', value: 'home' },
{ label: '土地资源', value: 'land' },
{ label: '投入品', value: 'inputs' },
{ label: '投入品监管', value: 'inputs' },
{ label: '生产经营主体', value: 'entities' },
// { label: '智慧种植监测', value: 'plant' },
// { label: '智慧养殖监测', value: 'breed' },

52
src/components/customBack.vue
View File

@ -1,6 +1,16 @@
<template>
<div class="custom-back-warp">
<subTop :title="topTitle" :postion="topPostion"></subTop>
<subTop
:title="topTitle"
:postion="topPostion"
:is-down="isDown"
:down-title="downTitle"
:label-field="labelField"
:value-field="valueField"
:down-width="downWidth"
:options="options"
@command="handeleCommand"
></subTop>
<div class="custom-back-content">
<slot name="back"></slot>
</div>
@ -23,7 +33,47 @@ const props = defineProps({
type: String,
default: 'left',
},
options: {
type: Array,
default: () => {
return [
{ label: '耿马镇', value: '42611' },
{ label: '勐撒镇', value: '9259' },
{ label: '勐永镇', value: '17787' },
{ label: '孟定镇', value: '42610' },
{ label: '勐简乡', value: '17788' },
{ label: '贺派乡', value: '40161' },
{ label: '四排山乡', value: '40163' },
{ label: '大兴乡', value: '40159' },
];
},
},
isDown: {
type: Boolean,
default: false,
},
downTitle: {
type: String,
default: '全县',
},
labelField: {
type: String,
default: 'label',
},
valueField: {
type: String,
default: 'value',
},
downWidth: {
type: String,
default: '100px',
},
});
const emit = defineEmits(['command']);
const handeleCommand = (data) => {
emit('command', data);
};
</script>
<style lang="scss" scoped>
.custom-back-warp {

108
src/components/subTop.vue
View File

@ -8,6 +8,18 @@
class="title-top-bg"
></div>
<span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
<div v-if="isDown" class="down-list" :style="{ width: downWidth }">
<el-dropdown :hide-on-click="true" :style="{ width: '90%' }" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ currentVal && currentVal[labelField] ? currentVal[labelField] : downTitle }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu class="down-menu">
<el-dropdown-item v-for="(n, index) in optionsList" :key="n[valueField]" :command="n[valueField]">{{ n[labelField] }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script setup>
@ -26,24 +38,97 @@ const props = defineProps({
type: String,
default: 'left',
},
options: {
type: Array,
default: () => {
return [
{ label: '耿马镇', value: '42611' },
{ label: '勐撒镇', value: '9259' },
{ label: '勐永镇', value: '17787' },
{ label: '孟定镇', value: '42610' },
{ label: '勐简乡', value: '17788' },
{ label: '贺派乡', value: '40161' },
{ label: '四排山乡', value: '40163' },
{ label: '大兴乡', value: '40159' },
];
},
},
isDown: {
type: Boolean,
default: false,
},
downTitle: {
type: String,
default: '全县',
},
labelField: {
type: String,
default: 'label',
},
valueField: {
type: String,
default: 'value',
},
downWidth: {
type: String,
default: '100px',
},
});
const emit = defineEmits(['command']);
let topTitle = ref('');
let pos = ref('');
let optionsList = reactive(props.options);
let currentVal = reactive(null);
watch(
() => (props.title, props.postion),
() => (props.title, props.postion, props.options),
() => {
topTitle.value = props.title;
pos.value = props.postion;
optionsList = props.options;
},
{
deep: true,
immediate: true,
}
);
const handleCommand = (data) => {
let index = optionsList.findIndex((m) => {
return m[props.valueField] == data;
});
if (index > -1) {
currentVal = optionsList[index];
}
// console.info('handleCommand', currentVal);
emit('command', currentVal);
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.down-menu {
background: transparent;
}
.el-dropdown-link {
color: $color-custom-main !important;
i {
color: $color-custom-main !important;
}
}
.el-dropdown__popper {
background: rgba(0, 0, 0, 0.8) !important;
border: 0 !important;
}
.el-popper__arrow::before {
background: rgba(0, 0, 0, 0.8) !important;
}
.el-dropdown-menu__item:hover,
.el-dropdown-menu__item:active {
background: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
}
.title-top-warp {
position: relative;
height: 38px;
@ -77,5 +162,22 @@ watch(
top: 0;
z-index: 2;
}
.down-list {
display: inline-block;
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
border: 1px solid $color-custom-main;
border-radius: 4px;
padding: 6px;
text-align: center;
::v-deep() {
.el-dropdown {
display: inline-block;
}
}
}
}
</style>

7
src/layouts/index.vue
View File

@ -57,12 +57,13 @@ onMounted(() => {
url('@/assets/images/basic/containerBotBG.png') no-repeat bottom center;
&-header {
width: 100%;
height: 60px;
// margin-bottom: 60px;
margin-bottom: 16px;
}
&-main {
flex: 1;
min-height: calc(100vh - 60px);
min-height: calc(100vh - 90px - 16px);
padding: 0 40px;
box-sizing: border-box;
}
.base-laytout-header {
height: 90px;

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

@ -20,12 +20,6 @@ export default [
component: () => import('@/views/demo/rank.vue'),
meta: { title: '滚动排名列表', icon: 'document' },
},
// {
// path: '/page',
// component: () => import('@/views/demo/test.vue'),
// name: 'page',
// meta: { title: '测试', icon: 'document' },
// },
],
},
];

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

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

4
src/styles/global.scss
View File

@ -1,6 +1,6 @@
// color
$legacy-ie: 10;
$color-primary: #20a0ff;
$color-primary: #35D0C0;
$color-success: #13ce66;
$color-warning: #f7ba2a;
$color-danger: #ff4949;
@ -58,4 +58,6 @@ $color-types: (
),
);
$color-custom-main: #35D0C0;
@import 'utils/utils';

2
src/styles/style.scss
View File

@ -5,7 +5,7 @@
position: relative;
width: 100%;
height: 100%;
font-family: Avenir, sans-serif;
font-family: JinBuTi, Sans, Avenir, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #000;

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

@ -1,57 +1,55 @@
<template>
<div class="data-home-index">
<el-row style="width: 100%; height: 100%">
<el-col :span="6" class="left-charts">
<div class="left-charts-item">
<customBack top-title="投入品分类统计" :top-postion="'left'">
<template #back>
<inputsType></inputsType>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="投入品生产企业统计" :top-postion="'left'">
<template #back>
<inputsGmp></inputsGmp>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="种养殖数据统计" :top-postion="'left'">
<template #back>
<landbreedCharts></landbreedCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12">
<centerMap></centerMap>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="案件次数" :top-postion="'right'">
<template #back>
<casesAlerts></casesAlerts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="投入品月度使用统计" :top-postion="'right'">
<template #back>
<monthlyuseCharts></monthlyuseCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="投入品经销商分布" :top-postion="'right'">
<template #back>
<dealerDistributionCharts></dealerDistributionCharts>
</template>
</customBack>
</div>
</el-col>
</el-row>
</div>
<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>
<inputsType></inputsType>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="投入品检测监管" :top-postion="'left'">
<template #back>
<inputsGmp></inputsGmp>
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="农资监管" :top-postion="'left'">
<template #back>
<landbreedCharts></landbreedCharts>
</template>
</customBack>
</div>
</el-col>
<el-col :span="12">
<centerMap></centerMap>
</el-col>
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="生产主体统计" :top-postion="'right'">
<template #back>
<casesAlerts></casesAlerts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="历年投入品规模对比" :top-postion="'right'">
<template #back>
<monthlyuseCharts></monthlyuseCharts>
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
<template #back>
<dealerDistributionCharts></dealerDistributionCharts>
</template>
</customBack>
</div>
</el-col>
</el-row>
</template>
<script setup>
import centerMap from '@/components/centerMap.vue';
@ -64,6 +62,9 @@ import inputsType from './components/inputsType.vue';
</script>
<style lang="scss" scoped>
.data-home-index {
width: 100%;
height: 100%;
.left-charts {
display: flex;
justify-content: space-around;

54
src/views/land/components/landPatrol.vue
View File

@ -1,9 +1,34 @@
<template>
<custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
<custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
</template>
<script setup>
import { reactive } from 'vue';
let dataList = reactive([
{
value: 10,
name: '2020',
},
{
value: 66,
name: '2021',
},
{
value: 100,
name: '2022',
},
{
value: 120,
name: '2023',
},
{
value: 150,
name: '2024',
},
{
value: 80,
name: '2025',
},
]);
const state = reactive({
option: {
color: ['#35D0C0'],
@ -49,31 +74,40 @@ const state = reactive({
// name: '',
},
},
data: [
data: dataList,
});
const refresData = () => {
console.info('landPatrol********************refresData');
state.data = dataList = reactive([
{
value: 10,
value: 20,
name: '2020',
},
{
value: 66,
value: 86,
name: '2021',
},
{
value: 100,
value: 120,
name: '2022',
},
{
value: 120,
value: 140,
name: '2023',
},
{
value: 150,
value: 170,
name: '2024',
},
{
value: 80,
value: 100,
name: '2025',
},
],
]);
};
defineExpose({
refresData,
});
</script>

33
src/views/land/index.vue
View File

@ -16,9 +16,29 @@
</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="[
{ 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="landPatrolCommand"
>
<template #back>
<landPatrol></landPatrol>
<landPatrol ref="landPatrolRef"></landPatrol>
</template>
</customBack>
</div>
@ -61,6 +81,15 @@ import landPlan from './components/landPlan.vue';
import landPatrol from './components/landPatrol.vue';
import LandAera from './components/LandAera.vue';
import cake from './components/cake.vue';
import { nextTick, ref } from 'vue';
const landPatrolRef = ref(null);
const landPatrolCommand = (data) => {
console.info('landPatrolCommand', data);
nextTick(() => {
landPatrolRef.value && landPatrolRef.value.refresData();
});
};
</script>
<style lang="scss" scoped>
.data-home-index {