new-map
parent
1c5ad744c0
commit
d5b02989e4
|
|
@ -74,7 +74,7 @@ export function deleteDevice(device, mode: ErrorMessageMode = 'modal') {
|
|||
* @description:基地数据列表
|
||||
*/
|
||||
export function getAgriculturalBasic(
|
||||
params: any = { per_page: 999999, page: 1, parent_id: 0, type: 2 },
|
||||
params: any = { parent_id: 0, type: 2 },
|
||||
mode: ErrorMessageMode = 'modal',
|
||||
) {
|
||||
return defHttp.get(
|
||||
|
|
@ -220,3 +220,89 @@ export function getRiceShrimpIndustry(params, mode: ErrorMessageMode = 'modal')
|
|||
},
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description:重点产业报表 - 稻虾流向
|
||||
*/
|
||||
export function getRiceShrimpFlow(params, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/charts/rice-shrimp-flow',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description:重点产业报表 - 大宗物资
|
||||
*/
|
||||
export function getMateriel(params, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/charts/materiel',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:重点产业报表 - 稻虾价格
|
||||
*/
|
||||
export function getRiceShrimpPrice(params?, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/charts/rice-shrimp-price',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:农作物产业分类
|
||||
*/
|
||||
export function getKeywordsCropsCate(params?, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/keywords-crops-cate',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:农作物
|
||||
*/
|
||||
export function getCates(params?, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/crops',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:农作物统计（季度）
|
||||
*/
|
||||
export function getCropYieldQuarterStatics(params?, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/crop-yield-quarter-statics',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
v-bind="$attrs"
|
||||
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
||||
:width="modelWidth"
|
||||
destroyOnClose
|
||||
>
|
||||
<template #closeIcon>
|
||||
<img
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
<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
|
||||
>{{ year }}年</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -33,11 +34,17 @@
|
|||
<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 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,25 +53,96 @@
|
|||
|
||||
<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
|
||||
import { defineComponent, computed, onBeforeMount, reactive, toRefs, ref } from 'vue'
|
||||
import NZW from './components/NZW.vue'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { getKeywordsCropsCate } from '/@/api/sys/other'
|
||||
import { chartLineColors } from './components/colors'
|
||||
const boxWidth = 300
|
||||
// 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
|
||||
chart: any
|
||||
}
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Modal.name]: Modal,
|
||||
Fisheries,
|
||||
Husbandry,
|
||||
Forestry,
|
||||
Agriculture,
|
||||
NZW,
|
||||
},
|
||||
setup() {
|
||||
const modelWidth = computed(() => boxWidth * 2 + 78)
|
||||
const modelWidth = computed(() => boxWidth * 4 + 78)
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const Data = reactive({
|
||||
crops: ref<cropsType[]>([]),
|
||||
})
|
||||
|
||||
const year = computed(() => visualizationStore.getYear)
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getCrops()
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(Data),
|
||||
boxWidth,
|
||||
modelWidth,
|
||||
year,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,64 +1,69 @@
|
|||
<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">
|
||||
<li
|
||||
class="mx-11px text-white text-12px cursor-pointer"
|
||||
:class="{ active: currentTab == item.key }"
|
||||
@click="changeTab(item.key)"
|
||||
v-for="item in tabList"
|
||||
:key="item.key"
|
||||
>{{ item.value }}</li
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getRiceShrimpFlow } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { chartLineColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
},
|
||||
setup() {
|
||||
const tabList = reactive([
|
||||
{
|
||||
key: '0',
|
||||
value: '全部',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
value: '猪',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
value: '牛',
|
||||
},
|
||||
])
|
||||
|
||||
const currentTab = ref<String>('0')
|
||||
const Data = reactive({
|
||||
x_axis: [],
|
||||
series: [],
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const changeTab = (key: String) => {
|
||||
if (currentTab.value == key) return
|
||||
currentTab.value = key
|
||||
chartsInit()
|
||||
}
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getRiceShrimpFlow({
|
||||
year: visualizationStore.getYear,
|
||||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
Data.series.forEach(({ name, data }, index) => {
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
obj.legendData.push(name)
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
areaStyle: {
|
||||
color: color.areaColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: ['销售水量', '主营业务'],
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
|
|
@ -76,7 +81,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Data.x_axis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -105,44 +110,21 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '销售水量',
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#00F4B9',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(0, 244, 185, 0.4)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '主营业务',
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30].reverse(),
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#28F2E6',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(40, 242, 230, 0.4)',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: obj.series,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
chartsInit()
|
||||
onBeforeMount(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => visualizationStore.getYear,
|
||||
() => getData(),
|
||||
)
|
||||
|
||||
return {
|
||||
tabList,
|
||||
currentTab,
|
||||
chartRef,
|
||||
changeTab,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="bg-[#0A404E] bg-opacity-40 flex flex-col w-full" :style="{ width, height }">
|
||||
<div class="flex items-center justify-between h-49px px-14px relative">
|
||||
<div class="flex items-center justify-between px-14px relative" :style="{ height: headHeight }">
|
||||
<div
|
||||
class="flex items-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
||||
>
|
||||
|
|
@ -37,6 +37,10 @@
|
|||
type: String as PropType<string>,
|
||||
default: '200px',
|
||||
},
|
||||
headHeight: {
|
||||
type: String as PropType<string>,
|
||||
default: '49px',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<Box title="稻虾产业">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getRiceShrimpIndustry } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { chartLineColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
},
|
||||
setup() {
|
||||
const Data = reactive({
|
||||
x_axis: [],
|
||||
series: [],
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getRiceShrimpIndustry({
|
||||
year: visualizationStore.getYear,
|
||||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
Data.series.forEach(({ name, data }, index) => {
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
obj.legendData.push(name)
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Data.x_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()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => visualizationStore.getYear,
|
||||
() => getData(),
|
||||
)
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.active {
|
||||
@apply font-bold text-15px text-[#76E9F0];
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<Box title="稻虾价格">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getRiceShrimpPrice } from '/@/api/sys/other'
|
||||
import { chartLineColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
},
|
||||
setup() {
|
||||
const tabList = reactive([
|
||||
{
|
||||
key: '0',
|
||||
value: '全部',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
value: '鱼',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
value: '虾',
|
||||
},
|
||||
])
|
||||
|
||||
const Data = reactive({
|
||||
x_axis: [],
|
||||
series: [],
|
||||
})
|
||||
|
||||
const currentTab = ref<String>('0')
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const changeTab = (key: String) => {
|
||||
if (currentTab.value == key) return
|
||||
currentTab.value = key
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
Data.series.forEach(({ name, data }, index) => {
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
obj.legendData.push(name + '')
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
type: 'line',
|
||||
// symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
areaStyle: {
|
||||
color: color.areaColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Data.x_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 getData() {
|
||||
const resData = await getRiceShrimpPrice()
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
return {
|
||||
tabList,
|
||||
currentTab,
|
||||
chartRef,
|
||||
changeTab,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.active {
|
||||
@apply font-bold text-15px text-[#76E9F0];
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<Box title="稻虾流向">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getRiceShrimpFlow } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { chartLineColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
},
|
||||
setup() {
|
||||
const Data = reactive({
|
||||
x_axis: [],
|
||||
series: [],
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getRiceShrimpFlow({
|
||||
year: visualizationStore.getYear,
|
||||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
Data.series.forEach(({ name, data }, index) => {
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
obj.legendData.push(name)
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
areaStyle: {
|
||||
color: color.areaColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Data.x_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()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => visualizationStore.getYear,
|
||||
() => getData(),
|
||||
)
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.active {
|
||||
@apply font-bold text-15px text-[#76E9F0];
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<Box title="大宗物质">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="py-10px">
|
||||
<ul class="flex items-center justify-center m-0">
|
||||
<li
|
||||
class="mx-11px text-white text-12px cursor-pointer"
|
||||
:class="{ active: currentTab == item.key }"
|
||||
@click="changeTab(item.key)"
|
||||
v-for="item in tabList"
|
||||
:key="item.key"
|
||||
>{{ item.value }}</li
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getMateriel } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { chartBarColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
},
|
||||
setup() {
|
||||
const tabList = reactive([
|
||||
{
|
||||
key: '1',
|
||||
value: '饲料',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
value: '肥料',
|
||||
},
|
||||
])
|
||||
|
||||
const Data = reactive({
|
||||
x_axis: [],
|
||||
series: [],
|
||||
})
|
||||
|
||||
const currentTab = ref<String>('1')
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const changeTab = (key: String) => {
|
||||
if (currentTab.value == key) return
|
||||
currentTab.value = key
|
||||
getData()
|
||||
}
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getMateriel({
|
||||
year: visualizationStore.getYear,
|
||||
type: currentTab.value,
|
||||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
Data.series.forEach(({ name, data, diffs }, index) => {
|
||||
const color = chartBarColors[index % chartBarColors.length]
|
||||
obj.legendData.push(name)
|
||||
|
||||
obj.series.push({
|
||||
name: 'Placeholder',
|
||||
type: 'bar',
|
||||
stack: 'Total' + index,
|
||||
itemStyle: {
|
||||
borderColor: 'transparent',
|
||||
color: 'transparent',
|
||||
},
|
||||
data: data,
|
||||
})
|
||||
obj.series.push({
|
||||
name: name,
|
||||
type: 'bar',
|
||||
stack: 'Total' + index,
|
||||
itemStyle: {
|
||||
color: color.itemColor1,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
},
|
||||
data: diffs,
|
||||
})
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
var tar = params[1]
|
||||
return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar?.value ?? 0)
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Data.x_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 {
|
||||
tabList,
|
||||
currentTab,
|
||||
chartRef,
|
||||
changeTab,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.active {
|
||||
@apply font-bold text-15px text-[#76E9F0];
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +1,18 @@
|
|||
<template>
|
||||
<Box title="稻虾价格">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="py-10px">
|
||||
<ul class="flex items-center justify-center m-0">
|
||||
<li
|
||||
class="mx-11px text-white text-12px cursor-pointer"
|
||||
:class="{ active: currentTab == item.key }"
|
||||
@click="changeTab(item.key)"
|
||||
v-for="item in tabList"
|
||||
:key="item.key"
|
||||
>{{ item.value }}</li
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
import { getRiceShrimpPrice } from '/@/api/sys/other'
|
||||
import { chartLineColors } from './colors'
|
||||
import { array } from 'vue-types'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
|
|
@ -43,6 +33,11 @@
|
|||
},
|
||||
])
|
||||
|
||||
const Data = reactive({
|
||||
x_axis: [],
|
||||
series: [],
|
||||
})
|
||||
|
||||
const currentTab = ref<String>('0')
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
|
@ -56,8 +51,37 @@
|
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
Data.series.forEach(({ name, data }, index) => {
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
obj.legendData.push(name + '')
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
areaStyle: {
|
||||
color: color.areaColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
|
|
@ -69,7 +93,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Data.x_axis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -98,34 +122,19 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#76E9F0',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#1A3537',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
series: obj.series,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
async function getData() {
|
||||
const resData = await getRiceShrimpPrice()
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -19,43 +19,91 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
import { getMateriel } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { chartBarColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
},
|
||||
setup() {
|
||||
const tabList = reactive([
|
||||
{
|
||||
key: '0',
|
||||
value: '全部',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
value: '鱼',
|
||||
value: '饲料',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
value: '虾',
|
||||
value: '肥料',
|
||||
},
|
||||
])
|
||||
|
||||
const currentTab = ref<String>('0')
|
||||
const Data = reactive({
|
||||
x_axis: [],
|
||||
series: [],
|
||||
})
|
||||
|
||||
const currentTab = ref<String>('1')
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const changeTab = (key: String) => {
|
||||
if (currentTab.value == key) return
|
||||
currentTab.value = key
|
||||
chartsInit()
|
||||
getData()
|
||||
}
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getMateriel({
|
||||
year: visualizationStore.getYear,
|
||||
type: currentTab.value,
|
||||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
Data.series.forEach(({ name, data, diffs }, index) => {
|
||||
const color = chartBarColors[index % chartBarColors.length]
|
||||
obj.legendData.push(name)
|
||||
|
||||
obj.series.push({
|
||||
name: 'Placeholder',
|
||||
type: 'bar',
|
||||
stack: 'Total' + index,
|
||||
itemStyle: {
|
||||
borderColor: 'transparent',
|
||||
color: 'transparent',
|
||||
},
|
||||
data: data,
|
||||
})
|
||||
obj.series.push({
|
||||
name: name,
|
||||
type: 'bar',
|
||||
stack: 'Total' + index,
|
||||
itemStyle: {
|
||||
color: color.itemColor1,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
},
|
||||
data: diffs,
|
||||
})
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
|
||||
tooltip: {
|
||||
|
|
@ -66,10 +114,14 @@
|
|||
color: '#019680',
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
var tar = params[1]
|
||||
return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar?.value ?? 0)
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Data.x_axis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -98,34 +150,12 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#76E9F0',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#1A3537',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
series: obj.series,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
chartsInit()
|
||||
onBeforeMount(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getRiceShrimpIndustry } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
|
||||
import { chartLineColors } from './colors'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
|
|
@ -35,21 +35,32 @@
|
|||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
console.log(Data)
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
const chartsInit = () => {
|
||||
const legendData = []
|
||||
const series = []
|
||||
Data.series.forEach((e) => {
|
||||
legendData.push(e.name)
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
Data.series.forEach(({ name, data }, index) => {
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
obj.legendData.push(name)
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
return
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: ['销售水量', '主营业务'],
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
|
|
@ -96,32 +107,7 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '销售水量',
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#00F4B9',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(0, 244, 185, 0.4)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '主营业务',
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30].reverse(),
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#28F2E6',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(40, 242, 230, 0.4)',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: obj.series,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, Ref, onMounted } from 'vue'
|
||||
import { defineComponent, ref, Ref, onMounted, watch } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { registerMap } from 'echarts'
|
||||
import { deepMerge } from '/@/utils'
|
||||
import { useVContext } from '../useVContext'
|
||||
import { getAgriculturalBasic } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
const domImg = document.createElement('img')
|
||||
domImg.style.height = '8px'
|
||||
domImg.src =
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const visualizationStore = useVisualizationStore()
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const isBack = ref<boolean>(false)
|
||||
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -36,16 +38,10 @@
|
|||
|
||||
const { rootEmitter } = useVContext()
|
||||
|
||||
const mapData = [
|
||||
{
|
||||
name: '古湖街道',
|
||||
value: [105.243227, 29.340601],
|
||||
datas: 768,
|
||||
img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
|
||||
},
|
||||
]
|
||||
const baseData = ref([])
|
||||
|
||||
function onBack() {
|
||||
visualizationStore.setAddressId(null)
|
||||
rootEmitter.emit('map:back')
|
||||
isBack.value = false
|
||||
tempMapJSON.value = deepMerge(mapJSON.value)
|
||||
|
|
@ -53,7 +49,20 @@
|
|||
}
|
||||
|
||||
function mapInit() {
|
||||
const mapData = [] as any
|
||||
console.log(baseData.value)
|
||||
|
||||
baseData.value.map(({ name, address_lng, address_lat, areas, id }) => {
|
||||
mapData.push({
|
||||
name: name,
|
||||
value: [address_lng, address_lat],
|
||||
datas: areas,
|
||||
id: id,
|
||||
img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
|
||||
})
|
||||
})
|
||||
registerMap('lcxz', tempMapJSON.value)
|
||||
|
||||
setOptions({
|
||||
backgroundColor: 'transparent',
|
||||
stateAnimation: {
|
||||
|
|
@ -257,8 +266,19 @@
|
|||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const _resData = await getAgriculturalBasic()
|
||||
async function getBase() {
|
||||
try {
|
||||
const resData = await getAgriculturalBasic({
|
||||
parent_id: visualizationStore.getAddresId,
|
||||
type: 1,
|
||||
})
|
||||
baseData.value = resData ?? []
|
||||
} finally {
|
||||
mapInit()
|
||||
}
|
||||
}
|
||||
async function getData() {
|
||||
const _resData = await getAgriculturalBasic({ type: 2 })
|
||||
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)
|
||||
|
|
@ -269,25 +289,39 @@
|
|||
}, [])
|
||||
mapJSON.value = _mapData
|
||||
tempMapJSON.value = deepMerge(mapJSON.value)
|
||||
mapInit()
|
||||
getBase()
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getData()
|
||||
|
||||
getInstance()?.on('click', (e) => {
|
||||
if (e.seriesType == 'effectScatter' || e.seriesType == 'scatter') {
|
||||
rootEmitter.emit('base:click', e.data)
|
||||
}
|
||||
|
||||
if (e.seriesType == 'map') {
|
||||
const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
|
||||
|
||||
visualizationStore.setAddressId(temp[0].properties?.id)
|
||||
rootEmitter.emit('map:click', deepMerge(temp[0].properties))
|
||||
|
||||
if (temp) {
|
||||
isBack.value = true
|
||||
tempMapJSON.value = deepMerge({
|
||||
type: 'FeatureCollection',
|
||||
features: temp,
|
||||
})
|
||||
mapInit()
|
||||
// mapInit()
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => visualizationStore.getAddresId,
|
||||
() => {
|
||||
getBase()
|
||||
},
|
||||
)
|
||||
|
||||
return { chartRef, isBack, onBack }
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -204,13 +204,11 @@
|
|||
getCropYieldCategory()
|
||||
//地图点击
|
||||
rootEmitter.on('map:click', (e) => {
|
||||
visualizationStore.setAddressId(e.id)
|
||||
onChangeMap(e)
|
||||
getCropYieldCategory()
|
||||
})
|
||||
//地图返回
|
||||
rootEmitter.on('map:back', () => {
|
||||
visualizationStore.setAddressId(null)
|
||||
getCitydata()
|
||||
getCropYieldCategory()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<Box title="农作物" v-bind="$attrs">
|
||||
<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="flex-1" ref="chartRef"> </div>
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Box from './Box.vue'
|
||||
import { defineComponent, ref, onBeforeMount, reactive, toRefs, Ref, computed } from 'vue'
|
||||
import { Tabs, TabPane } from 'ant-design-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'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
Tabs,
|
||||
TabPane,
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
},
|
||||
baseId: {
|
||||
type: Number,
|
||||
},
|
||||
chart: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
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 currentTab: any = computed(() => Data.tabs[activeKey.value])
|
||||
|
||||
const tabChange = () => {
|
||||
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()
|
||||
}
|
||||
|
||||
function chartsInit() {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
series: [] as any,
|
||||
}
|
||||
|
||||
Data.list.forEach(({ name, list }, index) => {
|
||||
const { colors, serie }: any = props.chart
|
||||
const color = colors[index % colors.length]
|
||||
|
||||
obj.legendData.push(name)
|
||||
|
||||
obj.series.push({
|
||||
name: name,
|
||||
data: list,
|
||||
...serie,
|
||||
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 resData = await getCates({
|
||||
category_id: props.id,
|
||||
crop_type: 1,
|
||||
type: 'top',
|
||||
})
|
||||
Data.tabs = [
|
||||
{
|
||||
name: '全部',
|
||||
id: null,
|
||||
},
|
||||
].concat(resData)
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getTabs()
|
||||
getData()
|
||||
})
|
||||
return {
|
||||
...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>
|
||||
|
|
@ -167,7 +167,7 @@
|
|||
|
||||
const chartsInit = () => {
|
||||
const data = Data.list.map((e, index) => {
|
||||
const color = chartBarColors[index % Data.list.length]
|
||||
const color = chartBarColors[index % chartBarColors.length]
|
||||
return {
|
||||
axis: e.data.map((e) => dateUtil(e.key).format('HH:mm')),
|
||||
name: e.name,
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@
|
|||
|
||||
const chartsInit = () => {
|
||||
const data = Data.list.map((e, index) => {
|
||||
const color = chartLineColors[index % Data.list.length]
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
return {
|
||||
axis: e.data.map((e) => dateUtil(e.key).format('HH:mm')),
|
||||
name: e.name,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export const chartLineColors = [
|
|||
]
|
||||
export const chartBarColors = [
|
||||
{
|
||||
itemColor: '#76E9F0',
|
||||
itemColor1: '#76E9F0',
|
||||
itemColor2: '#1A3537',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
<div class="flex-1 flex justify-between px-20px">
|
||||
<div class="flex">
|
||||
<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" />
|
||||
<DXJG width="440px" height="353px" />
|
||||
<DXCY width="440px" height="353px" />
|
||||
<DXLX width="440px" height="353px" />
|
||||
<DZWZ width="440px" height="353px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
<MapModal v-model:visible="visibleMapModal" :footer="null" />
|
||||
<MapModal v-model:visible="visibleMapModal" :footer="null" :baseId="baseId" />
|
||||
</div>
|
||||
<!-- </ScaleScreen> -->
|
||||
</template>
|
||||
|
|
@ -47,10 +47,10 @@
|
|||
import { defineComponent, ref, onBeforeMount, reactive } from 'vue'
|
||||
import Map from './components/Map.vue'
|
||||
import ScaleScreen from '/@/components/ScaleScreen'
|
||||
import Fisheries from './components/Fisheries.vue'
|
||||
import Husbandry from './components/Husbandry.vue'
|
||||
import Forestry from './components/Forestry.vue'
|
||||
import Agriculture from './components/Agriculture.vue'
|
||||
import DXJG from './components/DXJG.vue'
|
||||
import DXCY from './components/DXCY.vue'
|
||||
import DZWZ from './components/DZWZ.vue'
|
||||
import DXLX from './components/DXLX.vue'
|
||||
import Head from './components/Head.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
import NYQK from './components/NYQK.vue'
|
||||
|
|
@ -71,10 +71,10 @@
|
|||
[Modal.name]: Modal,
|
||||
Map,
|
||||
ScaleScreen,
|
||||
Fisheries,
|
||||
Husbandry,
|
||||
Forestry,
|
||||
Agriculture,
|
||||
DXJG,
|
||||
DXCY,
|
||||
DZWZ,
|
||||
DXLX,
|
||||
NYQK,
|
||||
NCZQS,
|
||||
CZNYCY,
|
||||
|
|
@ -88,9 +88,7 @@
|
|||
MapModal,
|
||||
},
|
||||
setup() {
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
console.log(visualizationStore.getYear)
|
||||
const baseId = ref('')
|
||||
|
||||
const vEmitter = mitt()
|
||||
|
||||
|
|
@ -98,21 +96,21 @@
|
|||
rootEmitter: vEmitter,
|
||||
})
|
||||
|
||||
const visibleMapModal = ref<boolean>(false)
|
||||
|
||||
function onMapChange(e) {
|
||||
vEmitter.emit('map:click')
|
||||
}
|
||||
const visibleMapModal = ref<boolean>(true)
|
||||
|
||||
onBeforeMount(() => {
|
||||
vEmitter.on('map:click', (e) => {
|
||||
console.log(e)
|
||||
vEmitter.on('map:click', () => {
|
||||
// visibleMapModal.value = true
|
||||
})
|
||||
vEmitter.on('base:click', (e) => {
|
||||
baseId.value = e.id
|
||||
visibleMapModal.value = true
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
visibleMapModal,
|
||||
onMapChange,
|
||||
baseId,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue