新版大屏调整，首页完，产出品管理未完
This commit is contained in:
2090205686@qq.com
parent
7c135ca70b
commit
3330fed4e9
@ -9,7 +9,7 @@
|
||||
></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">
|
||||
<el-dropdown :hide-on-click="true" 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>
|
||||
@ -167,7 +167,7 @@ const handleCommand = (data) => {
|
||||
.down-list {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
@ -178,6 +178,8 @@ const handleCommand = (data) => {
|
||||
border: 1px solid $color-custom-main;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,21 @@
|
||||
<template>
|
||||
<custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
|
||||
<custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
let dataList = reactive([
|
||||
{
|
||||
value: 10,
|
||||
name: '2020',
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty, sleep } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
{
|
||||
value: 66,
|
||||
name: '2021',
|
||||
query: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
value: 120,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
value: 150,
|
||||
name: '2024',
|
||||
},
|
||||
{
|
||||
value: 80,
|
||||
name: '2025',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
option: {
|
||||
color: ['#35D0C0'],
|
||||
@ -76,12 +63,12 @@ const state = reactive({
|
||||
// name: '',
|
||||
},
|
||||
},
|
||||
data: dataList,
|
||||
data: [],
|
||||
});
|
||||
|
||||
const refresData = () => {
|
||||
console.info('landPatrol********************refresData');
|
||||
state.data = dataList = reactive([
|
||||
state.data = reactive([
|
||||
{
|
||||
value: 20,
|
||||
name: '2020',
|
||||
@ -108,7 +95,53 @@ 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 = [
|
||||
{ value: 5, name: '2020' },
|
||||
{ value: 36, name: '2021' },
|
||||
{ value: 70, name: '2022' },
|
||||
{ value: 56, name: '2023' },
|
||||
{ value: 70, name: '2024' },
|
||||
{ value: 20, name: '2025' },
|
||||
];
|
||||
};
|
||||
|
||||
watch(
|
||||
() => 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,
|
||||
}
|
||||
);
|
||||
defineExpose({
|
||||
refresData,
|
||||
});
|
||||
|
||||
@ -26,6 +26,7 @@ const state = reactive({
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
|
||||
@ -2,9 +2,29 @@
|
||||
<el-row class="data-home-index">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<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="''"
|
||||
: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>
|
||||
<entitiesCategoryCharts></entitiesCategoryCharts>
|
||||
<entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
@ -16,9 +36,25 @@
|
||||
</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="''"
|
||||
:options="[
|
||||
{ label: '烟草', value: 1 },
|
||||
{ label: '甘蔗', value: 2 },
|
||||
{ label: '核桃', value: 3 },
|
||||
{ label: '蔬菜', value: 4 },
|
||||
{ label: '其他', value: 5 },
|
||||
]"
|
||||
:is-down="true"
|
||||
@command="handleContrast"
|
||||
>
|
||||
<template #back>
|
||||
<entitiesStatistics></entitiesStatistics>
|
||||
<entitiesStatistics ref="thirdRef" :data="state.data.third" :query="state.contrastCode"></entitiesStatistics>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
@ -52,6 +88,7 @@
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from 'vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import categoryCharts from './components/categoryCharts.vue';
|
||||
import entitieslist from './components/entitieslist.vue';
|
||||
@ -60,6 +97,57 @@ import benefitCharts from './components/benefitCharts.vue';
|
||||
import entitiesStatistics from './components/entitiesStatistics.vue';
|
||||
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
||||
import entitiesMap from './components/entitiesMap.vue';
|
||||
import { sleep } from '@/utils';
|
||||
|
||||
const oneRef = ref(null);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
data: {},
|
||||
queryCode: '',
|
||||
contrastCode: '',
|
||||
});
|
||||
const loadData = async () => {
|
||||
state.loading = true;
|
||||
await sleep(500);
|
||||
state.data = {
|
||||
one: [
|
||||
{ value: 5, name: '2020' },
|
||||
{ value: 36, name: '2021' },
|
||||
{ value: 70, name: '2022' },
|
||||
{ value: 56, name: '2023' },
|
||||
{ value: 70, name: '2024' },
|
||||
{ value: 20, name: '2025' },
|
||||
],
|
||||
third: [
|
||||
{ value: 78, value1: 128, 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: 79, value1: 184, name: '大兴乡' },
|
||||
],
|
||||
};
|
||||
};
|
||||
loadData();
|
||||
|
||||
const handleCommand = (data) => {
|
||||
state.queryCode = data.value;
|
||||
// console.info('data=', data);
|
||||
// nextTick(() => {
|
||||
// oneRef.value && oneRef.value.refresData();
|
||||
// });
|
||||
};
|
||||
const handleContrast = (data) => {
|
||||
state.contrastCode = data.value;
|
||||
// console.info('data=', data);
|
||||
// nextTick(() => {
|
||||
// thirdRef.value && thirdRef.value.refresData();
|
||||
// });
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="data-home-index">
|
||||
<template v-for="(n, index) in homeList" :key="n.name">
|
||||
<div class="home-enter-item" :style="n.style" @click="itemClick(index)">
|
||||
<div class="name">
|
||||
<span>{{ n.title || '--' }}</span>
|
||||
<div class="name" :style="n.nameStyle">
|
||||
<span :style="n.spanStyle">{{ n.title || '--' }}</span>
|
||||
</div>
|
||||
<div class="img-icon" :style="n.imgstyle"><img :src="getAssetsFile(n.img)" /></div>
|
||||
</div>
|
||||
@ -32,17 +32,21 @@ let homeList = reactive([
|
||||
linkType: 0,
|
||||
url: '',
|
||||
img: 'images/vsualized/home1.png',
|
||||
style: 'left: 20%;bottom:320px;',
|
||||
style: 'left: 21%;bottom:300px;',
|
||||
imgstyle: 'width:100px;height:100px',
|
||||
nameStyle: 'padding: 0 16px;margin: 16px 0;',
|
||||
spanStyle: 'font-size: 20px;',
|
||||
},
|
||||
{
|
||||
title: '农业产业运营服务平台',
|
||||
title: '产业运营平台',
|
||||
name: 'operation',
|
||||
linkType: 0,
|
||||
url: '',
|
||||
img: 'images/vsualized/home2.png',
|
||||
style: 'left: 20%;bottom: 64px;',
|
||||
style: 'left: 22%;bottom: 24px;',
|
||||
imgstyle: 'width:160px;height:160px',
|
||||
nameStyle: 'padding: 0 22px;margin: 24px 0;border-radius: 16px;',
|
||||
spanStyle: 'font-size: 28px;line-height: 66px',
|
||||
},
|
||||
{
|
||||
title: '数字大屏',
|
||||
@ -50,17 +54,21 @@ let homeList = reactive([
|
||||
linkType: 1,
|
||||
url: '/v2/land',
|
||||
img: 'images/vsualized/home3.png',
|
||||
style: 'right: 20%;bottom:320px;',
|
||||
style: 'right: 23%;bottom:300px;',
|
||||
imgstyle: 'width:100px;height:100px',
|
||||
nameStyle: 'padding: 0 16px;margin: 16px 0;',
|
||||
spanStyle: 'font-size: 20px;',
|
||||
},
|
||||
{
|
||||
title: '农业产业政务服务平台',
|
||||
title: '政务云平台',
|
||||
name: 'gov',
|
||||
linkType: 0,
|
||||
url: '',
|
||||
img: 'images/vsualized/home4.png',
|
||||
style: 'right: 20%;bottom: 64px;',
|
||||
style: 'right: 24%;bottom: 24px;',
|
||||
imgstyle: 'width:160px;height:160px',
|
||||
nameStyle: 'padding: 0 22px;margin: 24px 0;border-radius: 16px;',
|
||||
spanStyle: 'font-size: 28px;line-height: 66px',
|
||||
},
|
||||
// 更多项...
|
||||
]);
|
||||
@ -106,17 +114,24 @@ const itemClick = (index) => {
|
||||
.name {
|
||||
color: #fff;
|
||||
font-family: 'JinBuTi';
|
||||
margin: 24px 0;
|
||||
background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
|
||||
border: 2px solid #01fefd;
|
||||
border-radius: 8px;
|
||||
|
||||
padding: 0 24px;
|
||||
backdrop-filter: blur(8px);
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
|
||||
opacity: 0.16; // 仅背景透明
|
||||
z-index: -1; // 将背景置于底层
|
||||
border-radius: 6px; // 比主元素小，避免覆盖边框
|
||||
}
|
||||
span {
|
||||
backdrop-filter: blur(8px);
|
||||
line-height: 40px;
|
||||
text-shadow: 0px 4px 8px 0px #01fefd;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.img-icon {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user