new-map
parent
d72741c8bf
commit
8b56ab324d
|
|
@ -356,3 +356,15 @@ export function addcrops(data, mode: ErrorMessageMode = 'modal') {
|
|||
},
|
||||
)
|
||||
}
|
||||
|
||||
export function getCropYields(data, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.post(
|
||||
{
|
||||
url: `/api/crops`,
|
||||
data,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,85 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-bind="getBindValue"
|
||||
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
||||
:width="modelWidth"
|
||||
destroyOnClose
|
||||
>
|
||||
<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"
|
||||
>{{ year }}年</span
|
||||
<div class="modelRef">
|
||||
<a-modal
|
||||
v-bind="getBindValue"
|
||||
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
||||
destroyOnClose
|
||||
:width="modelWidth"
|
||||
:getContainer="getContainer"
|
||||
>
|
||||
<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"
|
||||
>{{ year }}年</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"
|
||||
>
|
||||
{{ baseData.name }}
|
||||
</div>
|
||||
</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"
|
||||
class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] mt-6px text-15px font-bold"
|
||||
><span>总面积：{{ data.areas }} 亩</span>
|
||||
<span class="mx-20px">就业人数：{{ data.workforce }} 人</span>
|
||||
<span>总产值：{{ data.cultivated }} ¥</span></div
|
||||
>
|
||||
{{ baseData.name }}
|
||||
</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>总面积：??亩</span> <span class="mx-20px">就业人数：??人</span>
|
||||
<span>总产值：￥??</span></div
|
||||
> -->
|
||||
<div class="bg-[#1D2D35] mt-14px p-10px">
|
||||
<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 class="bg-[#1D2D35] mt-14px p-10px">
|
||||
<div class="flex">
|
||||
<div class="grid grid-cols-2 gap-10px flex-1 mr-10px" v-if="cropsList.length">
|
||||
<BasicChart
|
||||
headHeight="34.5px"
|
||||
:width="`${boxWidth}px`"
|
||||
:height="`${boxHeight}px`"
|
||||
v-for="(item, index) in cropsList"
|
||||
:key="item.id"
|
||||
:data="item"
|
||||
:index="index"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-10px flex-1">
|
||||
<SBYXZT
|
||||
v-bind="getBindValue"
|
||||
headHeight="34.5px"
|
||||
:width="`${boxWidth}px`"
|
||||
:height="`${boxHeight}px`"
|
||||
/>
|
||||
<QXSZ
|
||||
headHeight="34.5px"
|
||||
:width="`${boxWidth}px`"
|
||||
:height="`${boxHeight}px`"
|
||||
v-bind="getBindValue"
|
||||
/>
|
||||
<SZJCSJ
|
||||
headHeight="34.5px"
|
||||
:width="`${boxWidth}px`"
|
||||
:height="`${boxHeight}px`"
|
||||
v-bind="getBindValue"
|
||||
/>
|
||||
<TRJCSJ
|
||||
headHeight="34.5px"
|
||||
:width="`${boxWidth}px`"
|
||||
:height="`${boxHeight}px`"
|
||||
v-bind="getBindValue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -55,14 +89,11 @@
|
|||
import QXSZ from './components/QXSZ.vue'
|
||||
import SZJCSJ from './components/SZJCSJ.vue'
|
||||
import TRJCSJ from './components/TRJCSJ.vue'
|
||||
import BasicChart from './components/BasicChart.vue'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { getAgriculturalBasicDetails } from '/@/api/sys/other'
|
||||
const boxWidth = 400
|
||||
interface cropsType {
|
||||
name: string
|
||||
id: number
|
||||
chart: any
|
||||
}
|
||||
const boxHeight = 280
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Modal.name]: Modal,
|
||||
|
|
@ -70,6 +101,7 @@
|
|||
QXSZ,
|
||||
SZJCSJ,
|
||||
TRJCSJ,
|
||||
BasicChart,
|
||||
},
|
||||
props: {
|
||||
baseId: {
|
||||
|
|
@ -85,21 +117,33 @@
|
|||
},
|
||||
setup(props, { attrs }) {
|
||||
const modelVisible = ref(false)
|
||||
const modelWidth = computed(() => boxWidth * 4 + 78)
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const Data = reactive({
|
||||
crops: ref<cropsType[]>([]),
|
||||
data: ref<any>({}),
|
||||
})
|
||||
const cropsList = ref([])
|
||||
const cropsList = ref<any[]>([])
|
||||
|
||||
const modelLeftCol = computed(() =>
|
||||
unref(cropsList).length >= 2 ? 2 : unref(cropsList).length,
|
||||
)
|
||||
const modelWidth = computed(
|
||||
() => (boxWidth + 10) * unref(modelLeftCol) + (boxWidth + 10) * 2 + 60,
|
||||
)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getAgriculturalBasicDetails(props.baseId)
|
||||
cropsList.value = resData.crops
|
||||
Data.data = resData
|
||||
console.log(modelLeftCol.value)
|
||||
}
|
||||
|
||||
const year = computed(() => visualizationStore.getYear)
|
||||
|
||||
const getContainer = () => {
|
||||
return document.body.querySelector(`.modelRef`)
|
||||
}
|
||||
|
||||
const getBindValue = computed(() => {
|
||||
const attr = {
|
||||
...attrs,
|
||||
|
|
@ -121,10 +165,12 @@
|
|||
)
|
||||
|
||||
return {
|
||||
getContainer,
|
||||
cropsList,
|
||||
getBindValue,
|
||||
...toRefs(Data),
|
||||
boxWidth,
|
||||
boxHeight,
|
||||
modelWidth,
|
||||
year,
|
||||
modelVisible,
|
||||
|
|
|
|||
|
|
@ -1,25 +1,147 @@
|
|||
<template>
|
||||
<div> </div>
|
||||
<Box :title="propsData.name" v-bind="$attrs">
|
||||
<div class="h-full flex flex-col w-full">
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onBeforeMount } from 'vue'
|
||||
import { getAgriculturalBasicDetails } from '/@/api/sys/other'
|
||||
|
||||
import { defineComponent, onBeforeMount, unref, reactive, Ref, ref } from 'vue'
|
||||
import { getCropYieldQuarterStatics } from '/@/api/sys/other'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import Box from './Box.vue'
|
||||
import { computed } from '@vue/reactivity'
|
||||
import { chartBarColors, chartLineColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
},
|
||||
props: {
|
||||
baseId: {
|
||||
type: [String, Number],
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const propsData: any = computed(() => props.data)
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
const Data = reactive({
|
||||
list: [] as any,
|
||||
})
|
||||
|
||||
async function getData() {
|
||||
await getAgriculturalBasicDetails(props.baseId)
|
||||
const { id } = unref(props.data) as any
|
||||
if (!id) return
|
||||
const resData = await getCropYieldQuarterStatics({
|
||||
crop_id: id,
|
||||
})
|
||||
const list: any[] = []
|
||||
for (const key in resData) {
|
||||
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
||||
const obj = resData[key]
|
||||
list.push({
|
||||
name: obj.name,
|
||||
list: Object.keys(obj.list).map((e) => obj.list[e]),
|
||||
axis: Object.keys(obj.list).map((e) => e),
|
||||
})
|
||||
}
|
||||
}
|
||||
Data.list = list
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
function chartsInit() {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
const i = Number(props.index) % 2
|
||||
const colors = i == 1 ? chartBarColors : chartLineColors
|
||||
const type = i == 1 ? 'bar' : 'line'
|
||||
Data.list.forEach(({ name, list }, index) => {
|
||||
const color = colors[index % colors.length]
|
||||
|
||||
obj.legendData.push(name)
|
||||
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: list,
|
||||
type: type,
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
show: false,
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Data.list[0]?.axis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#8EEEFF',
|
||||
opacity: 0.3,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: obj.series,
|
||||
})
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData()
|
||||
})
|
||||
return {}
|
||||
return {
|
||||
propsData,
|
||||
chartRef,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,249 @@
|
|||
<template>
|
||||
<div class="h-full flex flex-col w-full">
|
||||
<div class="px-10px">
|
||||
<tabs
|
||||
size="small"
|
||||
class="mytabs"
|
||||
v-model:activeKey="activeKey"
|
||||
:tab-position="mode"
|
||||
:tabBarGutter="10"
|
||||
:tabBarStyle="{ color: '#fff', margin: 0 }"
|
||||
@change="tabChange"
|
||||
>
|
||||
<tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
|
||||
</tabs>
|
||||
</div>
|
||||
<div class="h-400px w-full" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Tabs, TabPane } from 'ant-design-vue'
|
||||
import { defineComponent, ref, reactive, toRefs, Ref, computed, onBeforeMount } from 'vue'
|
||||
import type { TabsProps } from 'ant-design-vue'
|
||||
import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { chartBarColors } from './colors'
|
||||
const defaultCrops = [
|
||||
{
|
||||
name: '农业',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: '渔业',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: '畜牧业',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: '林业',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
id: 6,
|
||||
},
|
||||
]
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Tabs,
|
||||
TabPane,
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
},
|
||||
parentId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
name: {
|
||||
type: [String],
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
const mode = ref<TabsProps['tabPosition']>('top')
|
||||
const activeKey = ref(0)
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const Data = reactive({
|
||||
tabs: [] as any,
|
||||
list: [] as any,
|
||||
})
|
||||
|
||||
const title = computed(() => props.name)
|
||||
|
||||
const currentTab: any = computed(() => Data.tabs[activeKey.value])
|
||||
const cropsId = computed(() => defaultCrops.find((e) => e.name == props.name)?.id)
|
||||
|
||||
const tabChange = () => {
|
||||
const { is_end } = currentTab.value
|
||||
console.log(is_end)
|
||||
|
||||
getData()
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
const resData = await getCropYieldQuarterStatics({
|
||||
year: visualizationStore.getYear,
|
||||
base_id: visualizationStore.getAddresId,
|
||||
category_id: cropsId.value,
|
||||
crop_id: currentTab.value?.id ?? null,
|
||||
})
|
||||
const list: any[] = []
|
||||
for (const key in resData) {
|
||||
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
||||
const obj = resData[key]
|
||||
list.push({
|
||||
name: obj.name,
|
||||
list: Object.keys(obj.list).map((e) => obj.list[e]),
|
||||
axis: Object.keys(obj.list).map((e) => e),
|
||||
})
|
||||
}
|
||||
}
|
||||
Data.list = list
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
function chartsInit() {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
const colors = chartBarColors
|
||||
Data.list.forEach(({ name, list }, index) => {
|
||||
const color = colors[index % colors.length]
|
||||
|
||||
obj.legendData.push(name)
|
||||
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: list,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
show: false,
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Data.list[0]?.axis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#8EEEFF',
|
||||
opacity: 0.3,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: obj.series,
|
||||
})
|
||||
}
|
||||
|
||||
async function getTabs() {
|
||||
// const
|
||||
const resData = await getCates({
|
||||
parent_id: props.parentId,
|
||||
crop_type: 1,
|
||||
category_id: cropsId.value,
|
||||
type: 'top',
|
||||
})
|
||||
Data.tabs = [
|
||||
{
|
||||
name: '全部',
|
||||
id: null,
|
||||
},
|
||||
].concat(resData)
|
||||
|
||||
getData()
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getTabs()
|
||||
})
|
||||
|
||||
return {
|
||||
title,
|
||||
...toRefs(Data),
|
||||
chartRef,
|
||||
mode,
|
||||
tabChange,
|
||||
activeKey,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
::v-deep(.mytabs) {
|
||||
.ant-tabs-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
&:hover {
|
||||
color: #76e9f0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
.ant-tabs-tab-btn {
|
||||
color: #76e9f0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-nav {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +1,121 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-bind="$attrs"
|
||||
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
||||
:width="800"
|
||||
destroyOnClose
|
||||
>
|
||||
<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="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
|
||||
>
|
||||
222
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#1D2D35] mt-14px p-10px">
|
||||
<div class="h-full flex flex-col w-full">
|
||||
<div class="px-10px">
|
||||
<tabs
|
||||
size="small"
|
||||
class="mytabs"
|
||||
v-model:activeKey="activeKey"
|
||||
:tab-position="mode"
|
||||
:tabBarGutter="10"
|
||||
:tabBarStyle="{ color: '#fff', margin: 0 }"
|
||||
@change="tabChange"
|
||||
>
|
||||
<tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
|
||||
</tabs>
|
||||
<div class="cmodal">
|
||||
<a-modal
|
||||
v-bind="getBindValue"
|
||||
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
||||
:width="800"
|
||||
:getContainer="getContainer"
|
||||
>
|
||||
<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="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
|
||||
>
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#1D2D35] mt-14px p-10px">
|
||||
<div class="h-full flex flex-col w-full">
|
||||
<div class="px-10px">
|
||||
<tabs
|
||||
size="small"
|
||||
class="mytabs"
|
||||
v-model:activeKey="activeKey"
|
||||
:tab-position="mode"
|
||||
:tabBarGutter="10"
|
||||
:tabBarStyle="{ color: '#fff', margin: 0 }"
|
||||
@change="tabChange"
|
||||
>
|
||||
<tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
|
||||
</tabs>
|
||||
</div>
|
||||
<div class="h-400px w-full" ref="chartRef"></div>
|
||||
</div>
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<CModal
|
||||
:footer="null"
|
||||
v-model:visible="modelVisible1"
|
||||
:parentId="childParentId"
|
||||
:name="childPname"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import { defineComponent, ref, onBeforeMount, reactive, toRefs, Ref, computed } from 'vue'
|
||||
import { Tabs, TabPane } from 'ant-design-vue'
|
||||
import { Modal, Tabs, TabPane } from 'ant-design-vue'
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
reactive,
|
||||
toRefs,
|
||||
Ref,
|
||||
computed,
|
||||
unref,
|
||||
watchEffect,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import type { TabsProps } from 'ant-design-vue'
|
||||
import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
|
||||
import { chartBarColors } from './colors'
|
||||
const defaultCrops = [
|
||||
{
|
||||
name: '农业',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: '渔业',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: '畜牧业',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: '林业',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
id: 6,
|
||||
},
|
||||
]
|
||||
export default defineComponent({
|
||||
name: 'CModal',
|
||||
components: {
|
||||
[Modal.name]: Modal,
|
||||
Tabs,
|
||||
TabPane,
|
||||
},
|
||||
props: {
|
||||
parent: {
|
||||
type: Object,
|
||||
visible: {
|
||||
type: Boolean,
|
||||
},
|
||||
chart: {
|
||||
type: Object,
|
||||
parentId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
name: {
|
||||
type: [String],
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
setup(props, { attrs }) {
|
||||
const modelVisible = ref(false)
|
||||
const modelVisible1 = ref(false)
|
||||
|
||||
const childParentId = ref(null)
|
||||
|
||||
const childPname = computed(() => props.name)
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -81,32 +130,43 @@
|
|||
list: [] as any,
|
||||
})
|
||||
|
||||
const title = computed(() => props.name)
|
||||
|
||||
const currentTab: any = computed(() => Data.tabs[activeKey.value])
|
||||
const cropsId = computed(() => defaultCrops.find((e) => e.name == props.name)?.id)
|
||||
|
||||
const tabChange = () => {
|
||||
getData()
|
||||
const { is_end, id } = currentTab.value
|
||||
console.log(id)
|
||||
|
||||
if (is_end == 0) {
|
||||
childParentId.value = id
|
||||
modelVisible1.value = true
|
||||
} else {
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
// const resData = await getCropYieldQuarterStatics({
|
||||
// year: visualizationStore.getYear,
|
||||
// base_id: props.baseId,
|
||||
// category_id: props.id,
|
||||
// crop_id: currentTab.value?.id ?? null,
|
||||
// })
|
||||
// const list: any[] = []
|
||||
// for (const key in resData) {
|
||||
// if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
||||
// const obj = resData[key]
|
||||
// list.push({
|
||||
// name: obj.name,
|
||||
// list: Object.keys(obj.list).map((e) => obj.list[e]),
|
||||
// axis: Object.keys(obj.list).map((e) => e),
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// Data.list = list
|
||||
// chartsInit()
|
||||
const resData = await getCropYieldQuarterStatics({
|
||||
year: visualizationStore.getYear,
|
||||
base_id: visualizationStore.getAddresId,
|
||||
category_id: cropsId.value,
|
||||
crop_id: currentTab.value?.id ?? null,
|
||||
})
|
||||
const list: any[] = []
|
||||
for (const key in resData) {
|
||||
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
||||
const obj = resData[key]
|
||||
list.push({
|
||||
name: obj.name,
|
||||
list: Object.keys(obj.list).map((e) => obj.list[e]),
|
||||
axis: Object.keys(obj.list).map((e) => e),
|
||||
})
|
||||
}
|
||||
}
|
||||
Data.list = list
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
function chartsInit() {
|
||||
|
|
@ -114,11 +174,8 @@
|
|||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
return
|
||||
|
||||
const colors = chartBarColors
|
||||
Data.list.forEach(({ name, list }, index) => {
|
||||
const { colors, serie }: any = props.chart
|
||||
const color = colors[index % colors.length]
|
||||
|
||||
obj.legendData.push(name)
|
||||
|
|
@ -126,7 +183,7 @@
|
|||
obj.series.push({
|
||||
name: name,
|
||||
data: list,
|
||||
...serie,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
|
|
@ -189,9 +246,11 @@
|
|||
}
|
||||
|
||||
async function getTabs() {
|
||||
// const
|
||||
const resData = await getCates({
|
||||
category_id: props.id,
|
||||
parent_id: props.parentId,
|
||||
crop_type: 1,
|
||||
category_id: cropsId.value,
|
||||
type: 'top',
|
||||
})
|
||||
Data.tabs = [
|
||||
|
|
@ -200,18 +259,57 @@
|
|||
id: null,
|
||||
},
|
||||
].concat(resData)
|
||||
activeKey.value = 0
|
||||
getData()
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getTabs()
|
||||
getData()
|
||||
const getBindValue = computed(() => {
|
||||
const attr = {
|
||||
...attrs,
|
||||
...unref(props),
|
||||
visible: unref(modelVisible),
|
||||
}
|
||||
return attr
|
||||
})
|
||||
|
||||
const getChildBindValue = computed(() => {
|
||||
const attr = {
|
||||
...attrs,
|
||||
visible: unref(modelVisible1),
|
||||
parentId: unref(childParentId),
|
||||
}
|
||||
return attr
|
||||
})
|
||||
|
||||
const getContainer = () => {
|
||||
return document.body.querySelector(`.cmodal`)
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
modelVisible.value = !!props.visible
|
||||
})
|
||||
watch(
|
||||
() => unref(modelVisible),
|
||||
(e) => {
|
||||
if (e) {
|
||||
getTabs()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
childPname,
|
||||
childParentId,
|
||||
title,
|
||||
getContainer,
|
||||
...toRefs(Data),
|
||||
chartRef,
|
||||
mode,
|
||||
tabChange,
|
||||
activeKey,
|
||||
getBindValue,
|
||||
modelVisible1,
|
||||
getChildBindValue,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div class="cmodal">
|
||||
<a-modal
|
||||
v-bind="getBindValue"
|
||||
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
||||
:width="800"
|
||||
:getContainer="getContainer"
|
||||
destroyOnClose
|
||||
>
|
||||
<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="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
|
||||
>
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#1D2D35] mt-14px p-10px">
|
||||
<CChart v-bind="getBindValue" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import { defineComponent, ref, computed, unref, watchEffect } from 'vue'
|
||||
import CChart from './CChart.vue'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Modal.name]: Modal,
|
||||
CChart,
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
},
|
||||
parentId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
name: {
|
||||
type: [String],
|
||||
},
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const modelVisible = ref(false)
|
||||
|
||||
const title = computed(() => props.name)
|
||||
|
||||
const getBindValue = computed(() => {
|
||||
const attr = {
|
||||
...attrs,
|
||||
...unref(props),
|
||||
visible: unref(modelVisible),
|
||||
}
|
||||
return attr
|
||||
})
|
||||
|
||||
const getContainer = () => {
|
||||
return document.body.querySelector(`.cmodal`)
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
modelVisible.value = !!props.visible
|
||||
})
|
||||
|
||||
return {
|
||||
title,
|
||||
getContainer,
|
||||
getBindValue,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
::v-deep(.mytabs) {
|
||||
.ant-tabs-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
&:hover {
|
||||
color: #76e9f0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
.ant-tabs-tab-btn {
|
||||
color: #76e9f0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-nav {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -104,7 +104,6 @@
|
|||
[find?.value ?? '其他']: [...(acc[item.type] ?? []), item],
|
||||
}
|
||||
}, {})
|
||||
console.log(friendlinks.value)
|
||||
}
|
||||
|
||||
function onClick(e) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="relative h-full">
|
||||
<div class="relative h-full overflow-hidden">
|
||||
<div
|
||||
v-if="isBack"
|
||||
@click="onBack"
|
||||
|
|
@ -67,7 +67,6 @@
|
|||
|
||||
function mapInit() {
|
||||
const mapData: any = []
|
||||
console.log(baseData.value)
|
||||
|
||||
// baseData.value.map(({ name, address_lng, address_lat, areas, id }) => {
|
||||
baseData.value.map((e: any) => {
|
||||
|
|
|
|||
|
|
@ -30,11 +30,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CModal v-model:visible="modelVisible" :footer="null" :name="currentData.name" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch, computed } from 'vue'
|
||||
import {
|
||||
Ref,
|
||||
ref,
|
||||
defineComponent,
|
||||
onBeforeMount,
|
||||
reactive,
|
||||
toRefs,
|
||||
watch,
|
||||
computed,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import CModal from './CModal.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
|
||||
import { CountTo } from '/@/components/CountTo'
|
||||
|
|
@ -91,16 +103,20 @@
|
|||
export default defineComponent({
|
||||
components: {
|
||||
CountTo,
|
||||
CModal,
|
||||
},
|
||||
setup() {
|
||||
const modelVisible = ref(false)
|
||||
const visualizationStore = useVisualizationStore()
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const Data = reactive({
|
||||
cityData: [] as cityDataType[],
|
||||
lyqkData: [] as any,
|
||||
})
|
||||
|
||||
const currentData = ref<any>({})
|
||||
|
||||
const { rootEmitter } = useVContext()
|
||||
|
||||
function chatInit() {
|
||||
|
|
@ -201,6 +217,13 @@
|
|||
}, 0) / 10000,
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
getInstance()?.on('click', (e) => {
|
||||
currentData.value = e.data
|
||||
modelVisible.value = true
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
getCitydata()
|
||||
getCropYieldCategory()
|
||||
|
|
@ -231,8 +254,10 @@
|
|||
)
|
||||
|
||||
return {
|
||||
modelVisible,
|
||||
chartRef,
|
||||
countNumber,
|
||||
currentData,
|
||||
...toRefs(Data),
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
|
||||
</tabs>
|
||||
</div>
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
<div class="flex-1 w-full" ref="chartRef"> </div>
|
||||
</div>
|
||||
<CModal v-model:visible="visibleCModal" :footer="null" :parent="parent" />
|
||||
</Box>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import CModal from './CModal.vue'
|
||||
import CModal from './CModal1.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -104,11 +104,7 @@
|
|||
MenuItem: Menu.Item,
|
||||
DownOutlined,
|
||||
},
|
||||
props: {
|
||||
baseId: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
props: ['baseId'],
|
||||
setup(props) {
|
||||
console.log('===SBYZT')
|
||||
console.log(props.baseId)
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
|
||||
async function getData() {
|
||||
const resData = await getDeviceBaseDataStatics({
|
||||
base_id: Data.currentTab,
|
||||
base_id: props.baseId ?? Data.currentTab,
|
||||
device_type: 2,
|
||||
device_column: Data.currentMenu,
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue