zhouhui
/
lcny-vue3-antd-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改

new-map
ihzero 2022-11-04 20:18:45 +08:00
parent 7a59bd0a23
commit 357bf6d3b6
15 changed files with 139 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/api/sys/other.ts
View File

@ -320,3 +320,16 @@ export function getFriendLinks(params?, mode: ErrorMessageMode = 'modal') {
},
)
}
/**
* @description:区域详情
*/
export function getAgriculturalBasicDetails(params?, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: `/api/agricultural-basic/${params}`,
},
{
errorMessageMode: mode,
},
)
}

BIN
src/assets/fonts/pmzd.TTF 100644
View File

Binary file not shown.

7
src/design/index.less
View File

@ -17,6 +17,13 @@ html {
text-size-adjust: 100%;
}
@font-face {
font-family: 'pmzd';
src: url('../assets/fonts/pmzd.TTF');
}
html,
body {
width: 100%;

128
src/views/visualization/MapModal.vue
View File

@ -1,6 +1,6 @@
<template>
<a-modal
v-bind="$attrs"
v-bind="getBindValue"
:bodyStyle="{ background: '#233741', color: '#fff' }"
:width="modelWidth"
destroyOnClose
@ -34,22 +34,14 @@
<span>总产值：￥??</span></div
> -->
<div class="bg-[#1D2D35] mt-14px p-10px">
<div class="grid grid-cols-4 gap-10px">
<NZW
v-for="(item, index) in crops"
:key="index"
headHeight="34.5px"
:width="`${boxWidth}px`"
height="235px"
:title="item.name"
:id="item.id"
:chart="item.chart"
v-bind="$attrs"
/>
<SBYXZT headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
<QXSZ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
<SZJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
<TRJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
<div class="flex">
<div class="grid grid-cols-2 gap-10px flex-1">{{ cropsList }} </div>
<div class="grid grid-cols-2 gap-10px flex-1 ml-10px">
<SBYXZT headHeight="34.5px" :width="`${boxWidth}px`" height="280px" v-bind="$attrs" />
<QXSZ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
<SZJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
<TRJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
</div>
</div>
</div>
</div>
@ -58,59 +50,14 @@
<script lang="ts">
import { Modal } from 'ant-design-vue'
import { defineComponent, computed, onBeforeMount, reactive, toRefs, ref } from 'vue'
import NZW from './components/NZW.vue'
import { defineComponent, computed, reactive, toRefs, ref, watch, unref, watchEffect } from 'vue'
import SBYXZT from './components/SBYXZT.vue'
import QXSZ from './components/QXSZ.vue'
import SZJCSJ from './components/SZJCSJ.vue'
import TRJCSJ from './components/TRJCSJ.vue'
import { useVisualizationStore } from '/@/store/modules/visualization'
import { getKeywordsCropsCate } from '/@/api/sys/other'
import { chartLineColors } from './components/colors'
import { getAgriculturalBasicDetails } from '/@/api/sys/other'
const boxWidth = 400
// const defaultTab = ['渔业', '畜牧业', '农业', '林业']
const defaultTab = [
{
name: '渔业',
chart: {
serie: {
type: 'bar',
symbol: 'none',
},
colors: chartLineColors,
},
},
{
name: '畜牧业',
chart: {
serie: {
type: 'line',
symbol: 'none',
},
colors: chartLineColors,
},
},
{
name: '农业',
chart: {
serie: {
type: 'line',
symbol: 'none',
},
colors: chartLineColors,
},
},
{
name: '林业',
chart: {
serie: {
type: 'bar',
symbol: 'none',
},
colors: chartLineColors,
},
},
]
interface cropsType {
name: string
id: number
@ -119,51 +66,68 @@
export default defineComponent({
components: {
[Modal.name]: Modal,
NZW,
SBYXZT,
QXSZ,
SZJCSJ,
TRJCSJ,
},
props: {
baseId: {
type: [String, Number],
},
visible: {
type: Boolean,
},
baseData: {
type: Object,
default: () => {},
},
},
setup(props) {
setup(props, { attrs }) {
const modelVisible = ref(false)
const modelWidth = computed(() => boxWidth * 4 + 78)
const visualizationStore = useVisualizationStore()
const Data = reactive({
crops: ref<cropsType[]>([]),
})
const cropsList = ref([])
const year = computed(() => visualizationStore.getYear)
const baseData = computed(() => props.baseData)
async function getCrops() {
const resData = await getKeywordsCropsCate()
console.log(resData)
const a = resData
.filter((e) => defaultTab.findIndex(({ name }) => e.name == name) >= 0)
.map((e, i) => Object.assign({}, e, defaultTab[i]))
console.log(a)
Data.crops = a
async function getData() {
const resData = await getAgriculturalBasicDetails(props.baseId)
cropsList.value = resData.crops
}
onBeforeMount(() => {
getCrops()
const year = computed(() => visualizationStore.getYear)
const getBindValue = computed(() => {
const attr = {
...attrs,
...unref(props),
visible: unref(modelVisible),
}
return attr
})
watchEffect(() => {
modelVisible.value = !!props.visible
})
watch(
() => unref(modelVisible),
(v) => {
if (v) getData()
},
)
return {
cropsList,
getBindValue,
...toRefs(Data),
boxWidth,
modelWidth,
year,
baseData,
modelVisible,
}
},
})

27
src/views/visualization/components/BasicChart.vue 100644
View File

@ -0,0 +1,27 @@
<template>
<div> </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount } from 'vue'
import { getAgriculturalBasicDetails } from '/@/api/sys/other'
export default defineComponent({
props: {
baseId: {
type: [String, Number],
},
},
setup(props) {
async function getData() {
await getAgriculturalBasicDetails(props.baseId)
}
onBeforeMount(() => {
getData()
})
return {}
},
})
</script>
<style scoped></style>

2
src/views/visualization/components/Box.vue
View File

@ -8,7 +8,7 @@
class="flex items-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
>
<span class="block w-8.5px h-8.5px rounded-full bg-[#6CCDDA]"></span>
<span class="ml-10.5px text-18px">{{ title }}</span>
<span class="ml-10.5px text-18px font-pmzd">{{ title }}</span>
</div>
<div class="absolute left-100px right-100px">
<slot name="center"> </slot>

2
src/views/visualization/components/CZNYCY.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w-314px flex h-full flex-col">
<div
class="text-18px h-60px leading-60px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
class="font-pmzd text-18px h-60px leading-60px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
>城镇农业产业情况</div
>
<div class="text-right text-11px leading-17px text-white mr-42px"> 单位：万 </div>

1
src/views/visualization/components/DXLX.vue
View File

@ -52,6 +52,7 @@
data: data,
type: 'line',
symbol: 'none',
stack: 'Total',
itemStyle: {
color: color.itemColor,
},

14
src/views/visualization/components/DZWZ.vue
View File

@ -1,5 +1,5 @@
<template>
<Box title="大宗物质">
<Box title="大宗物资">
<div class="h-full flex flex-col">
<div class="py-10px">
<ul class="flex items-center justify-center m-0">
@ -82,6 +82,7 @@
obj.series.push({
name: 'Placeholder',
type: 'bar',
barGap: 0,
stack: 'Total' + index,
itemStyle: {
borderColor: 'transparent',
@ -115,8 +116,15 @@
},
},
formatter: function (params) {
var tar = params[1]
return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar?.value ?? 0)
const arr = []
params.forEach((e, index) => {
if (index % 2) arr.push(e)
})
let str = ''
arr.forEach((e: any) => {
str += e.name + '<br/>' + e.seriesName + ' : ' + (e?.value ?? 0)
})
return str
},
},
xAxis: {

10
src/views/visualization/components/JK.vue
View File

@ -85,8 +85,18 @@
if (resData.length) Data.currentTab = resData[0].id
}
async function getData() {
// const resData = await getDevicesNum({
// base_id: Data.currentTab,
// })
// Object.keys(resData).map((e, index) => {
// Data.list[index].value = resData[e].slice(1)
// })
}
onBeforeMount(() => {
getTabs()
getData()
})
return {

2
src/views/visualization/components/NCZQS.vue
View File

@ -101,7 +101,7 @@
for (const key in list) {
if (Object.prototype.hasOwnProperty.call(list, key)) {
arr.push({
y: list[key],
y: Number(list[key]) / 10000,
x: key,
})
}

13
src/views/visualization/components/NYQK.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w-314px">
<div
class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
class="font-pmzd text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
>隆昌农业产业情况</div
>
<div class="w-full h-250px mx-auto mt-10px" ref="chartRef"> </div>
@ -193,11 +193,12 @@
Data.cityData = temp
}
const countNumber = computed(() =>
Data.lyqkData.reduce((c, p) => {
c += Number(p.value)
return c
}, 0),
const countNumber = computed(
() =>
Data.lyqkData.reduce((c, p) => {
c += Number(p.value)
return c
}, 0) / 10000,
)
onBeforeMount(() => {

2
src/views/visualization/components/NZW.vue
View File

@ -39,7 +39,7 @@
},
props: {
id: {
type: Number,
type: [Number, String],
},
baseId: {
type: [Number, String],

16
src/views/visualization/index.vue
View File

@ -1,8 +1,12 @@
<template>
<ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="true">
<!-- <div class="overflow-y-scroll"> -->
<div class="flex flex-col h-full bg-img relative">
<canvas class="absolute left-0 top-0 w-full h-full" ref="cavsRef" id="canv"></canvas>
<!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
<div class="overflow-y-scroll">
<div class="flex flex-col h-full bg-img relative w-3120px h-760px">
<canvas
class="absolute left-0 top-0 w-full h-full overflow-hidden"
ref="cavsRef"
id="canv"
></canvas>
<div class="flex flex-col h-full w-full z-100">
<Head />
<div class="flex-1 flex justify-between px-20px">
@ -47,8 +51,8 @@
:baseId="baseId"
:baseData="baseData"
/>
<!-- </div> -->
</ScaleScreen>
</div>
<!-- </ScaleScreen> -->
</template>
<script lang="ts">

3
windi.config.ts
View File

@ -12,6 +12,9 @@ export default defineConfig({
colors: {
primary: primaryColor,
},
fontFamily: {
pmzd: ['pmzd'],
},
screens: {
sm: '576px',
md: '768px',