new-map
parent
3fbe2b253c
commit
e23d2a6fbc
|
|
@ -1,6 +1,6 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { defHttp } from '/@/utils/http/axios'
|
||||
|
||||
import { ErrorMessageMode } from '/#/axios';
|
||||
import { ErrorMessageMode } from '/#/axios'
|
||||
|
||||
/**
|
||||
* @description:设备列表
|
||||
|
|
@ -14,7 +14,7 @@ export function getDevices(params, mode: ErrorMessageMode = 'modal') {
|
|||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:设备类型
|
||||
|
|
@ -27,7 +27,7 @@ export function getDeviceTypes(mode: ErrorMessageMode = 'modal') {
|
|||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:添加设备
|
||||
|
|
@ -41,7 +41,7 @@ export function createDevice(data, mode: ErrorMessageMode = 'modal') {
|
|||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:更新设备
|
||||
|
|
@ -55,7 +55,7 @@ export function updateDevice(device, data, mode: ErrorMessageMode = 'modal') {
|
|||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:删除设备
|
||||
|
|
@ -68,7 +68,7 @@ export function deleteDevice(device, mode: ErrorMessageMode = 'modal') {
|
|||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:基地数据列表
|
||||
|
|
@ -85,5 +85,33 @@ export function getAgriculturalBasic(
|
|||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:基础数据统计
|
||||
* 镇街数据根据城基地数据列表
|
||||
*/
|
||||
export function getCitydataStatistics(mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/citydata-statistics',
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:行业产值统计（镇街）
|
||||
*/
|
||||
export function getCropYieldCategoryStatics(params, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/crop-yield-category-statics',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="6240px" height="1520px">
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 126 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-bind="$attrs"
|
||||
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
||||
:width="modelWidth"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<img
|
||||
class="w-22px h-22px inline text-0"
|
||||
src="../../assets/images/model-close-icon.png"
|
||||
alt=""
|
||||
srcset=""
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<div class="relative -mt-6px h-30px flex items-center">
|
||||
<div class="flex items-center">
|
||||
<span class="block w-8px h-8px bg-[#6CCDDA] rounded-full mr-10px"></span>
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-18px"
|
||||
>2022年</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
|
||||
>
|
||||
隆昌基地情况
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] mt-6px text-15px font-bold"
|
||||
><span>总面积：1000亩</span> <span class="mx-20px">就业人数：5人</span>
|
||||
<span>总产值：￥54000000</span></div
|
||||
>
|
||||
<div class="bg-[#1D2D35] mt-14px p-10px">
|
||||
<div class="grid grid-cols-2 gap-10px">
|
||||
<Fisheries :width="`${boxWidth}px`" height="235px" />
|
||||
<Husbandry :width="`${boxWidth}px`" height="235px" />
|
||||
<Agriculture :width="`${boxWidth}px`" height="235px" />
|
||||
<Forestry :width="`${boxWidth}px`" height="235px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import Fisheries from './components/Fisheries.vue'
|
||||
import Husbandry from './components/Husbandry.vue'
|
||||
import Forestry from './components/Forestry.vue'
|
||||
import Agriculture from './components/Agriculture.vue'
|
||||
const boxWidth = 275
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Modal.name]: Modal,
|
||||
Fisheries,
|
||||
Husbandry,
|
||||
Forestry,
|
||||
Agriculture,
|
||||
},
|
||||
setup() {
|
||||
const modelWidth = computed(() => boxWidth * 2 + 78)
|
||||
return {
|
||||
boxWidth,
|
||||
modelWidth,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div class="text-4xl text-white flex items-center justify-center relative">
|
||||
<div class="w-1325px h-43px mt-3.5px relative">
|
||||
<div class="absolute left-0 bottom-0 w-1/4 text-10px h-28px flex items-center justify-end">
|
||||
2022-10-22 10:10
|
||||
<div class="w-1099px h-43px relative">
|
||||
<div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
|
||||
{{ state.date }} {{ state.time }}
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 w-1/4 text-10px h-28px flex items-center justify-start">
|
||||
<div
|
||||
class="absolute right-0 bottom-0 w-340px text-10px h-28px flex items-center justify-start"
|
||||
>
|
||||
<div>多云</div>
|
||||
<div class="mx-20px">PM2.5</div>
|
||||
<div class="flex items-center">
|
||||
|
|
@ -18,7 +20,42 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import headTitleImg from '/@/assets/images/head-title.png'
|
||||
|
||||
const state = reactive({
|
||||
date: '',
|
||||
time: '',
|
||||
week: '',
|
||||
showIndex: 0,
|
||||
})
|
||||
// 获取时间接口
|
||||
const getTime = async () => {
|
||||
var myDate = new Date()
|
||||
let month = (myDate.getMonth() + 1).toString().padStart(2, '0')
|
||||
let day = myDate.getDate().toString().padStart(2, '0')
|
||||
let hour = myDate.getHours().toString().padStart(2, '0')
|
||||
let minutes = myDate.getMinutes().toString().padStart(2, '0')
|
||||
let seconed = myDate.getSeconds().toString().padStart(2, '0')
|
||||
state.date = myDate.getFullYear() + '-' + month + '-' + day
|
||||
state.time = hour + ':' + minutes + ':' + seconed
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
getTime()
|
||||
}, 1000)
|
||||
|
||||
// 获取当前星期几
|
||||
|
||||
const getWeekDate = () => {
|
||||
var now = new Date()
|
||||
var day = now.getDay()
|
||||
var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
state.week = weeks[day]
|
||||
}
|
||||
setInterval(() => {
|
||||
getWeekDate()
|
||||
}, 1000 * 60 * 60 * 24)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -6,21 +6,20 @@
|
|||
class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
|
||||
>返回</div
|
||||
>
|
||||
<div ref="chartRef" :style="{ height, width }"> </div>
|
||||
<div ref="chartRef" class="w-full h-[calc(100% - 2px)]"> </div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'
|
||||
|
||||
import { defineComponent, ref, Ref, onMounted } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { registerMap } from 'echarts'
|
||||
import { deepMerge } from '/@/utils'
|
||||
// import icon from '/@/assets/images/data-address.png'
|
||||
|
||||
import { useVContext } from '../useVContext'
|
||||
import { getAgriculturalBasic } from '/@/api/sys/other'
|
||||
const domImg = document.createElement('img')
|
||||
domImg.style.height = '8px'
|
||||
domImg.src =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII='
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAOlJREFUKFPFkN9qwjAUh09OkzRN0lrbOllhIOxd9h678a0HwkbFWmtsq17I2pE6iuKNbIOdqx/nD+fjI8nL6xxsISPQnrpzRgJte507JP2MtB0ZjvrOfTUchcns0RSLJYADfjhNapMVlHtciEA11WrrqbFGpM6+Xu9+9+k+sPPW8CmePD9t1m/vVsIoTCe78iPnrnKFF+jKLDeejnwHGbWo/4AXPczSMl9kvb1omtRlVnCmXK60bIy1F2tE/BN7DgB8fku8zLdeBxF+lPZIFk8GcXiockOpYExIcWzK2pUjiQTxuN82P7L3BSnVXLvzcNTUAAAAAElFTkSuQmCC'
|
||||
|
||||
const domImgHover = document.createElement('img')
|
||||
domImgHover.style.height = '8px'
|
||||
|
|
@ -28,22 +27,15 @@
|
|||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
|
||||
const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%',
|
||||
},
|
||||
},
|
||||
setup(_, { emit }) {
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const isBack = ref<boolean>(false)
|
||||
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const mapJSON = ref()
|
||||
const tempMapJSON = ref()
|
||||
|
||||
const { rootEmitter } = useVContext()
|
||||
|
||||
const mapData = [
|
||||
{
|
||||
name: '古湖街道',
|
||||
|
|
@ -54,6 +46,7 @@
|
|||
]
|
||||
|
||||
function onBack() {
|
||||
rootEmitter.emit('map:back')
|
||||
isBack.value = false
|
||||
tempMapJSON.value = deepMerge(mapJSON.value)
|
||||
mapInit()
|
||||
|
|
@ -62,72 +55,79 @@
|
|||
function mapInit() {
|
||||
registerMap('lcxz', tempMapJSON.value)
|
||||
setOptions({
|
||||
backgroundColor: '#012248',
|
||||
backgroundColor: 'transparent',
|
||||
stateAnimation: {
|
||||
duration: 100,
|
||||
},
|
||||
geo: {
|
||||
map: 'lcxz',
|
||||
aspectScale: 0.75,
|
||||
layoutCenter: ['50%', '50.5%'],
|
||||
layoutSize: '100%',
|
||||
silent: true,
|
||||
roam: false,
|
||||
silent: false,
|
||||
z: 0,
|
||||
label: {
|
||||
color: '#fff',
|
||||
show: true,
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#53D9FF',
|
||||
borderWidth: 1.3,
|
||||
shadowBlur: 15,
|
||||
shadowColor: 'rgb(58,115,192)',
|
||||
shadowOffsetX: 7,
|
||||
shadowOffsetY: 6,
|
||||
areaColor: {
|
||||
image: domImg,
|
||||
},
|
||||
areaColor: 'rgba(0, 15, 40, 0.5)',
|
||||
shadowColor: 'rgba(0, 0, 0, 1)',
|
||||
shadowBlur: 0,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
borderColor: 'rgba(0, 0, 0, 0.7)',
|
||||
borderWidth: 0.5,
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#8dd7fc',
|
||||
color: '#fff',
|
||||
areaColor: '#2AB8FF',
|
||||
borderWidth: 1,
|
||||
color: 'green',
|
||||
},
|
||||
label: {
|
||||
color: '#012248',
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
zoom: 1.1,
|
||||
roam: false,
|
||||
map: 'lcxz',
|
||||
select: {
|
||||
disabled: true,
|
||||
},
|
||||
label: {
|
||||
// show: false,
|
||||
show: false,
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#2ab8ff',
|
||||
areaColor: {
|
||||
image: domImg,
|
||||
repeat: 'repeat',
|
||||
},
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
shadowBlur: 0,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 1,
|
||||
|
||||
// shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowOffsetX: -2,
|
||||
// shadowOffsetY: 2,
|
||||
// shadowBlur: 10,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: {
|
||||
image: domImgHover,
|
||||
image: domImg,
|
||||
repeat: 'repeat',
|
||||
},
|
||||
borderColor: '#2ab8ff',
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
shadowColor: 'rgba(0, 255, 255, 0.7)',
|
||||
shadowBlur: 10,
|
||||
|
|
@ -257,14 +257,23 @@
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const resData = (await (await import('./lcxz1.json')).default) as any
|
||||
mapJSON.value = resData
|
||||
const _resData = await getAgriculturalBasic()
|
||||
const _mapData = (await (await import('./lcxz1.json')).default) as any
|
||||
_mapData.features.reduce((p, c) => {
|
||||
const item = _resData.find((e) => e.name == c.properties.name)
|
||||
if (item) {
|
||||
p.push(Object.assign(c, { properties: item }))
|
||||
}
|
||||
return p
|
||||
}, [])
|
||||
mapJSON.value = _mapData
|
||||
tempMapJSON.value = deepMerge(mapJSON.value)
|
||||
mapInit()
|
||||
getInstance()?.on('click', (e) => {
|
||||
if (e.seriesType == 'map') {
|
||||
const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
|
||||
emit('onMapChange', deepMerge(temp[0].properties))
|
||||
|
||||
rootEmitter.emit('map:click', deepMerge(temp[0].properties))
|
||||
|
||||
if (temp) {
|
||||
isBack.value = true
|
||||
|
|
|
|||
|
|
@ -4,96 +4,197 @@
|
|||
class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
||||
>隆昌农业产业情况</div
|
||||
>
|
||||
<div class="w-200px h-200px mx-auto mt-10px" ref="chartRef"> </div>
|
||||
<div class="w-full h-200px mx-auto mt-10px" ref="chartRef"> </div>
|
||||
<div
|
||||
class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
|
||||
>
|
||||
总产值：2200202万元
|
||||
总产值：
|
||||
<CountTo
|
||||
:startVal="0"
|
||||
:endVal="2200202"
|
||||
class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
||||
/>
|
||||
万元
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-y-20px gap-x-10px mx-10px mt-18px">
|
||||
<div class="flex items-center">
|
||||
<SvgIcon name="mj-icon" :size="40" color="transparent" />
|
||||
<div class="flex items-center" v-for="item in cityData" :key="item.slug">
|
||||
<!-- <SvgIcon :name="item.slug" :size="40" color="transparent" /> -->
|
||||
<img :src="item.icon" alt="" class="w-40px h-40px" srcset="" />
|
||||
<div class="text-white ml-6px">
|
||||
<div class="text-12px font-bold">面积</div>
|
||||
<div class="text-10px font-bold mt-4px">794.41 平方公里</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SvgIcon name="mj-icon" :size="40" color="transparent" />
|
||||
<div class="text-white ml-6px">
|
||||
<div class="text-12px font-bold">人口</div>
|
||||
<div class="text-10px font-bold mt-4px">794.41 万人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SvgIcon name="mj-icon" :size="40" color="transparent" />
|
||||
<div class="text-white ml-6px">
|
||||
<div class="text-12px font-bold">镇街</div>
|
||||
<div class="text-10px font-bold mt-4px">13个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SvgIcon name="mj-icon" :size="40" color="transparent" />
|
||||
<div class="text-white ml-6px">
|
||||
<div class="text-12px font-bold">耕地</div>
|
||||
<div class="text-10px font-bold mt-4px">794.41 平方公里</div>
|
||||
<div class="text-12px font-bold">{{ item.name }}</div>
|
||||
<div class="text-10px font-bold mt-4px">
|
||||
<CountTo :startVal="0" :endVal="item.value" class="text-10px font-bold" />
|
||||
<span>{{ item.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
<script lang="ts">
|
||||
import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { SvgIcon } from '/@/components/Icon'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
width: {
|
||||
type: String as PropType<string>,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return
|
||||
}
|
||||
setOptions({
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '90%',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' },
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
|
||||
import { CountTo } from '/@/components/CountTo'
|
||||
import { useVContext } from '../useVContext'
|
||||
import { deepMerge } from '/@/utils'
|
||||
import cityIcon1 from '/@/assets/images/city-1.png'
|
||||
import cityIcon2 from '/@/assets/images/city-2.png'
|
||||
import cityIcon3 from '/@/assets/images/city-3.png'
|
||||
import cityIcon4 from '/@/assets/images/city-4.png'
|
||||
|
||||
interface cityDataType {
|
||||
name: string
|
||||
slug: string
|
||||
unit: string
|
||||
value: number
|
||||
icon: string
|
||||
}
|
||||
|
||||
const cityDefaultData = [
|
||||
{
|
||||
slug: 'city_data_area',
|
||||
name: '面积',
|
||||
value: '0',
|
||||
unit: '平方公里',
|
||||
icon: cityIcon1,
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
slug: 'city_data_population',
|
||||
name: '人口',
|
||||
value: '0',
|
||||
unit: '万人',
|
||||
icon: cityIcon2,
|
||||
},
|
||||
)
|
||||
{
|
||||
slug: 'city_data_street',
|
||||
name: '镇街',
|
||||
value: '0',
|
||||
unit: '个',
|
||||
icon: cityIcon3,
|
||||
},
|
||||
{
|
||||
slug: 'city_data_cultivated_area',
|
||||
name: '耕地',
|
||||
value: '0',
|
||||
unit: '万亩',
|
||||
icon: cityIcon4,
|
||||
},
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
CountTo,
|
||||
},
|
||||
setup() {
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const Data = reactive({
|
||||
cityData: [] as cityDataType[],
|
||||
lyqkData: [] as any,
|
||||
})
|
||||
|
||||
const { rootEmitter } = useVContext()
|
||||
|
||||
function chatInit() {
|
||||
setOptions({
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '隆昌农业产业情况',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
data: Data.lyqkData,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
async function getCropYieldCategory(params = { year: '2022', base_id: null }) {
|
||||
const { list } = await getCropYieldCategoryStatics(params)
|
||||
const arr = [] as { value: string; name: string }[]
|
||||
for (const key in list) {
|
||||
if (Object.prototype.hasOwnProperty.call(list, key)) {
|
||||
arr.push({
|
||||
value: list[key],
|
||||
name: key,
|
||||
})
|
||||
}
|
||||
}
|
||||
Data.lyqkData = arr
|
||||
}
|
||||
|
||||
//获取所有
|
||||
async function getCitydata() {
|
||||
const resData = await getCitydataStatistics()
|
||||
const temp = [] as cityDataType[]
|
||||
cityDefaultData.forEach((e) => {
|
||||
const obj = deepMerge({}, e)
|
||||
const item: cityDataType = resData.find((r) => r.slug == e.slug)
|
||||
if (item) {
|
||||
obj.value = Number(item.value)
|
||||
obj.unit = item.unit
|
||||
}
|
||||
temp.push(obj)
|
||||
})
|
||||
Data.cityData = temp
|
||||
}
|
||||
|
||||
function onChangeMap(el) {
|
||||
const keys = ['city_data_street']
|
||||
const temp = [] as cityDataType[]
|
||||
cityDefaultData.forEach((e) => {
|
||||
const obj = deepMerge({}, e)
|
||||
if (!keys.includes(e.slug)) {
|
||||
//面积
|
||||
if (e.slug == 'city_data_area') {
|
||||
obj.value = Number(el.areas)
|
||||
obj.unit = '亩'
|
||||
} else if (e.slug == 'city_data_population') {
|
||||
obj.value = el.workforce
|
||||
} else if (e.slug == 'city_data_cultivated_area') {
|
||||
obj.value = el.cultivated
|
||||
}
|
||||
temp.push(obj)
|
||||
}
|
||||
})
|
||||
Data.cityData = temp
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getCitydata()
|
||||
getCropYieldCategory()
|
||||
//地图点击
|
||||
rootEmitter.on('map:click', (e) => {
|
||||
onChangeMap(e)
|
||||
})
|
||||
//地图返回
|
||||
rootEmitter.on('map:back', () => {
|
||||
getCitydata()
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => Data.lyqkData,
|
||||
() => {
|
||||
chatInit()
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
...toRefs(Data),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,48 @@
|
|||
<template>
|
||||
<!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
|
||||
<div class="overflow-y-scroll bg-[#020603]">
|
||||
<div class="overflow-y-scroll bg-[#020603] bg-img">
|
||||
<div class="flex flex-col h-full w-3120px h-760px">
|
||||
<Head />
|
||||
<div class="flex-1 flex justify-between py-11px px-20px">
|
||||
<div class="flex-1 flex justify-between px-20px">
|
||||
<div class="flex">
|
||||
<div class="grid grid-cols-2 gap-x-16px gap-y-16px">
|
||||
<Fisheries width="440px" height="337px" />
|
||||
<Husbandry width="440px" height="337px" />
|
||||
<Agriculture width="440px" height="337px" />
|
||||
<Forestry width="440px" height="337px" />
|
||||
<div class="grid grid-cols-2 gap-x-10px gap-y-10px">
|
||||
<Fisheries width="440px" height="353px" />
|
||||
<Husbandry width="440px" height="353px" />
|
||||
<Agriculture width="440px" height="353px" />
|
||||
<Forestry width="440px" height="353px" />
|
||||
</div>
|
||||
<div class="bg-[#10272F] bg-opacity-80 ml-16px">
|
||||
</div>
|
||||
<div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-5">
|
||||
<div class="bg-[10272f] bg-opacity-50">
|
||||
<NYQK />
|
||||
<NCZQS class="mt-37px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Map @onMapChange="onMapChange" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="bg-[#10272F] bg-opacity-80">
|
||||
<div class="flex-1">
|
||||
<Map />
|
||||
</div>
|
||||
<div class="bg-[10272f] bg-opacity-50">
|
||||
<CZNYCY />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="mx-16px">
|
||||
<JK width="440px" height="379px" />
|
||||
<SBYXZT class="mt-16px" width="440px" height="295px" />
|
||||
<JK width="440px" height="387px" />
|
||||
<SBYXZT class="mt-16px" width="440px" height="310px" />
|
||||
</div>
|
||||
<div class="">
|
||||
<QXSZ width="440px" height="222px" />
|
||||
<SZJCSJ class="mt-11px" width="440px" height="222px" />
|
||||
<TRJCSJ class="mt-11px" width="440px" height="222px" />
|
||||
<QXSZ width="440px" height="230px" />
|
||||
<SZJCSJ class="mt-11px" width="440px" height="230px" />
|
||||
<TRJCSJ class="mt-11px" width="440px" height="230px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal v-model:visible="visible" :bodyStyle="{ background: '#233741', color: '#fff' }">
|
||||
<template #closeIcon> 1 </template>
|
||||
</a-modal>
|
||||
<MapModal v-model:visible="visibleMapModal" :footer="null" />
|
||||
</div>
|
||||
<!-- </ScaleScreen> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { defineComponent, ref, onBeforeMount, reactive } from 'vue'
|
||||
import Map from './components/Map.vue'
|
||||
import ScaleScreen from '/@/components/ScaleScreen'
|
||||
import Fisheries from './components/Fisheries.vue'
|
||||
|
|
@ -61,6 +59,9 @@
|
|||
import SZJCSJ from './components/SZJCSJ.vue'
|
||||
import TRJCSJ from './components/TRJCSJ.vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import MapModal from './MapModal.vue'
|
||||
import { createVContext } from './useVContext'
|
||||
import mitt from '/@/utils/mitt'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Modal.name]: Modal,
|
||||
|
|
@ -79,17 +80,30 @@
|
|||
SZJCSJ,
|
||||
TRJCSJ,
|
||||
Head,
|
||||
MapModal,
|
||||
},
|
||||
setup() {
|
||||
const visible = ref<boolean>(false)
|
||||
const mapData = reactive([])
|
||||
const vEmitter = mitt()
|
||||
|
||||
createVContext({
|
||||
rootEmitter: vEmitter,
|
||||
})
|
||||
|
||||
const visibleMapModal = ref<boolean>(false)
|
||||
|
||||
function onMapChange(e) {
|
||||
console.log(e)
|
||||
visible.value = true
|
||||
vEmitter.emit('map:click')
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
vEmitter.on('map:click', (e) => {
|
||||
console.log(e)
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
visible,
|
||||
visibleMapModal,
|
||||
onMapChange,
|
||||
}
|
||||
},
|
||||
|
|
@ -97,6 +111,13 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.cu {
|
||||
.bg-img {
|
||||
// background-image: url('../../assets/images/map-bg.png') no-repeat;
|
||||
// background-position: center;
|
||||
}
|
||||
|
||||
// .bg {
|
||||
// background: linear-gradient(90deg, #658eb4 1%, #658eb4 100%);
|
||||
// opacity: 0.2;
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import type { InjectionKey } from 'vue'
|
||||
import type { Emitter } from '/@/utils/mitt'
|
||||
import { createContext, useContext } from '/@/hooks/core/useContext'
|
||||
|
||||
export interface VContextProps {
|
||||
rootEmitter: Emitter
|
||||
}
|
||||
|
||||
const key: InjectionKey<VContextProps> = Symbol()
|
||||
|
||||
export function createVContext(context: VContextProps) {
|
||||
return createContext<VContextProps>(context, key, { readonly: false, native: true })
|
||||
}
|
||||
|
||||
export function useVContext() {
|
||||
return useContext<VContextProps>(key)
|
||||
}
|
||||
Loading…
Reference in New Issue