feat
This commit is contained in:
commit
d0f9f11c30
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -17,7 +17,6 @@ declare module 'vue' {
|
||||
CustomEchartBar: typeof import('./src/components/custom-echart-bar/index.vue')['default']
|
||||
CustomEchartBubble: typeof import('./src/components/custom-echart-bubble/index.vue')['default']
|
||||
CustomEchartColumnLine: typeof import('./src/components/custom-echart-column-line/index.vue')['default']
|
||||
CustomEchartHyaline: typeof import('./src/components/custom-echart-hyaline/index.vue')['default']
|
||||
CustomEchartHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/index.vue')['default']
|
||||
CustomEchartLine: typeof import('./src/components/custom-echart-line/index.vue')['default']
|
||||
CustomEchartLineLine: typeof import('./src/components/custom-echart-line-line/index.vue')['default']
|
||||
|
||||
@ -5,7 +5,18 @@
|
||||
<custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="isShow" :title="currentMap.name + dialogTitle" width="360" :before-close="handleClose" custom-class="map-info-dialog">
|
||||
<el-dialog
|
||||
v-model="isShow"
|
||||
:title="currentMap.name + dialogTitle"
|
||||
width="360"
|
||||
:show-close="false"
|
||||
:before-close="handleClose"
|
||||
custom-class="map-info-dialog"
|
||||
>
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<slot name="header"></slot>
|
||||
</template>
|
||||
<slot name="dialogContent"></slot>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -163,7 +174,7 @@ let currentMap = reactive({});
|
||||
const mapClick = (data) => {
|
||||
isShow.value = true;
|
||||
currentMap = data;
|
||||
console.info('mapClick', data);
|
||||
emit('mapclick', currentMap);
|
||||
};
|
||||
const handleClose = () => {
|
||||
isShow.value = false;
|
||||
@ -171,6 +182,8 @@ const handleClose = () => {
|
||||
onMounted(() => {
|
||||
console.info('iconUrl', iconUrl);
|
||||
});
|
||||
|
||||
const emit = defineEmits(['mapclick']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
@ -184,6 +197,7 @@ div {
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100%;
|
||||
padding: 16px;
|
||||
margin-top: 15%;
|
||||
}
|
||||
.el-dialog__header {
|
||||
margin-top: 10px;
|
||||
@ -197,6 +211,14 @@ div {
|
||||
top: 8px !important;
|
||||
}
|
||||
}
|
||||
.map-dialog-my-header {
|
||||
margin-top: 4px;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
h4 {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-center-warp {
|
||||
width: 100%;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, reactive, watchEffect, watch } from 'vue';
|
||||
import { ref, reactive, watchEffect } from 'vue';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
|
||||
@ -66,18 +66,6 @@ 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) {
|
||||
@ -155,8 +143,8 @@ export default {
|
||||
seriesIndex: 0,
|
||||
showTooltip: true,
|
||||
});
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
// getInstance()?.off('click', onClick);
|
||||
// getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
function onClick(params) {
|
||||
|
||||
@ -141,14 +141,13 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
function setOptions(options = {}, clear = true) {
|
||||
const mergedOptions = {
|
||||
animation: true,
|
||||
animationDuration: 3000,
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicOut',
|
||||
...unref(options),
|
||||
animationThreshold: 2000, // 数据量超过2000自动关闭动画
|
||||
animationDelayUpdate: (idx) => idx * 50, // 数据项延迟
|
||||
};
|
||||
cacheOptions.value = mergedOptions;
|
||||
cacheOptions.value = options;
|
||||
if (unref(elRef)?.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
setOptions(unref(getOptions));
|
||||
@ -164,7 +163,6 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
}
|
||||
clear && chartInstance?.clear();
|
||||
chartInstance?.setOption(unref(getOptions));
|
||||
|
||||
// 立即绑定事件
|
||||
chartInstance.off('click');
|
||||
chartInstance.on('click', handleMapClick);
|
||||
|
||||
102
src/views/inputs/components/inputsMap.vue
Normal file
102
src/views/inputs/components/inputsMap.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
|
||||
<template #header>
|
||||
<div class="land-map-pop-header">
|
||||
<div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #dialogContent>
|
||||
<div class="land-map-pop-content">
|
||||
<div v-for="(n, index) in list" :key="index" class="list-item">
|
||||
<div class="title">
|
||||
<span class="title-val"> {{ n.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ n.value }}{{ n.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</centerMap>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
|
||||
const unit = ref('家');
|
||||
const list = reactive([
|
||||
{ title: '监管机构', value: '1', color: '#01FEFD', unit: '家' },
|
||||
{ title: '监管人员', value: '2', color: '#FEF906', unit: '人' },
|
||||
{ title: '村级监管员', value: '5', color: '#02FD94', unit: '人' },
|
||||
{ title: '农资经营单位', value: '42', color: '#FE7F03', unit: '家' },
|
||||
{ title: '生产主体', value: '2', color: '#41BDFC', unit: '家' },
|
||||
{ title: '投入品规模', value: '3000', color: '#FC0003', unit: '万元' },
|
||||
]);
|
||||
|
||||
let currentRegion = reactive(null);
|
||||
const doMapclick = (data) => {
|
||||
currentRegion = data;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-map-pop-header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
.title,
|
||||
.value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-white;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.land-map-pop-content {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.list-item {
|
||||
width: calc((100% - 10px) / 2);
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
.title {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.before {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-content {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.before,
|
||||
.title-val {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 2px;
|
||||
color: $color-custom-main;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap></centerMap>
|
||||
<inputsMap></inputsMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
@ -59,6 +59,7 @@ import monthlyuseCharts from './components/monthlyuseCharts.vue';
|
||||
import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
|
||||
import casesAlerts from './components/casesAlerts.vue';
|
||||
import inputsType from './components/inputsType.vue';
|
||||
import inputsMap from './components/inputsMap.vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
|
||||
101
src/views/land/components/landMap.vue
Normal file
101
src/views/land/components/landMap.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<centerMap :dialog-title="'土地类型'">
|
||||
<template #header>
|
||||
<div class="land-map-pop-header">
|
||||
<div class="title">土地类型</div>
|
||||
<div class="value">总：88.5{{ unit }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #dialogContent>
|
||||
<div class="land-map-pop-content">
|
||||
<div v-for="(n, index) in list" :key="index" class="list-item">
|
||||
<div class="title">
|
||||
<div class="before">
|
||||
<div class="b-content" :style="{ background: n.color }"></div>
|
||||
</div>
|
||||
<span class="title-val"> {{ n.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ n.value }}{{ unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</centerMap>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
|
||||
const unit = ref('万亩');
|
||||
const list = reactive([
|
||||
{ title: '望天田', value: '60.8', color: '#01FEFD' },
|
||||
{ title: '菜地', value: '60.8', color: '#FEF906' },
|
||||
{ title: '水浇地', value: '60.8', color: '#02FD94' },
|
||||
{ title: '果园', value: '60.8', color: '#FE7F03' },
|
||||
{ title: '灌溉水田', value: '60.8', color: '#41BDFC' },
|
||||
{ title: '旱地', value: '60.8', color: '#FC0003' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-map-pop-header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
.title,
|
||||
.value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-white;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.land-map-pop-content {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.list-item {
|
||||
width: calc((100% - 10px) / 2);
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
.title {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.before {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-content {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.before,
|
||||
.title-val {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 2px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,34 +1,16 @@
|
||||
<template>
|
||||
<custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
|
||||
<custom-echart-line ref="lineCharts" :chart-data="state.data" 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',
|
||||
},
|
||||
]);
|
||||
import { reactive, ref } from 'vue';
|
||||
let dataList = [
|
||||
{ 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'],
|
||||
@ -76,35 +58,16 @@ const state = reactive({
|
||||
},
|
||||
data: dataList,
|
||||
});
|
||||
|
||||
const lineCharts = ref(null);
|
||||
const refresData = () => {
|
||||
console.info('landPatrol********************refresData');
|
||||
state.data = dataList = reactive([
|
||||
{
|
||||
value: 20,
|
||||
name: '2020',
|
||||
},
|
||||
{
|
||||
value: 86,
|
||||
name: '2021',
|
||||
},
|
||||
{
|
||||
value: 120,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
value: 140,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
value: 170,
|
||||
name: '2024',
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
name: '2025',
|
||||
},
|
||||
]);
|
||||
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' },
|
||||
];
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap :dialog-title="'土地资源'"></centerMap>
|
||||
<landMap></landMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
@ -81,6 +81,7 @@ 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 landMap from './components/landMap.vue';
|
||||
import { nextTick, ref } from 'vue';
|
||||
|
||||
const landPatrolRef = ref(null);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user