生产经营主体模块添加
This commit is contained in:
parent
225b9f5703
commit
5c701d1306
@ -34,8 +34,9 @@ const titles = ref([
|
||||
{ label: '生产经营主体', value: 'entities' },
|
||||
// { label: '智慧种植监测', value: 'plant' },
|
||||
// { label: '智慧养殖监测', value: 'breed' },
|
||||
{ label: '全流程溯源', value: 'trace' },
|
||||
{ label: '产业预警决策', value: 'early' },
|
||||
{ label: '生产经营主体', value: 'business' },
|
||||
{ label: '农产品溯源', value: 'trace' },
|
||||
// { label: '产业预警决策', value: 'early' },
|
||||
]);
|
||||
function handleChangeTitle(name) {
|
||||
router.push({ name: name });
|
||||
|
||||
@ -25,17 +25,19 @@ import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
||||
import { Select } from '@element-plus/icons-vue';
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: '首页',
|
||||
},
|
||||
markerData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
var aspectScale = 0.8807505292367753;
|
||||
// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
|
||||
// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
|
||||
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
|
||||
|
||||
const isShow = ref(false);
|
||||
@ -114,11 +116,6 @@ let mapConfig = reactive({
|
||||
// },
|
||||
});
|
||||
|
||||
const coordTransform = (lng, lat) => {
|
||||
// 这里需要实现具体转换算法
|
||||
// 示例伪代码，需替换真实转换逻辑
|
||||
return [lng + 0.003, lat + 0.002];
|
||||
};
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
title: {
|
||||
@ -163,25 +160,7 @@ const chartsData = reactive({
|
||||
name: '闪烁散点',
|
||||
type: 'effectScatter', // 使用 effectScatter 类型
|
||||
coordinateSystem: 'geo',
|
||||
data: [
|
||||
// 示例数据点，实际应用中应替换为真实的数据
|
||||
{
|
||||
name: '永星食品加工厂',
|
||||
value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
color: '#4bffb4', //
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '耿马镇',
|
||||
value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
color: '#4bffb4', // 勐永镇的颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
data: props.markerData,
|
||||
symbolSize: function (val) {
|
||||
return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
|
||||
},
|
||||
|
||||
@ -60,8 +60,9 @@ const props = defineProps({
|
||||
{ label: '产出品管理', value: 'entities' },
|
||||
// { label: '智慧种植监测', value: 'plant' },
|
||||
// { label: '智慧养殖监测', value: 'breed' },
|
||||
{ label: '全流程溯源', value: 'trace' },
|
||||
{ label: '产业预警决策', value: 'early' },
|
||||
{ label: '生产经营主体', value: 'business' },
|
||||
{ label: '农产品溯源', value: 'trace' },
|
||||
// { label: '产业预警决策', value: 'early' },
|
||||
];
|
||||
},
|
||||
},
|
||||
|
||||
@ -43,12 +43,18 @@ export default {
|
||||
// component: () => import('@/views/plant/index.vue'),
|
||||
// meta: { title: '', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: 'trace',
|
||||
// name: 'trace',
|
||||
// component: () => import('@/views/trace/index.vue'),
|
||||
// meta: { title: '', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: 'business',
|
||||
name: 'business',
|
||||
component: () => import('@/views/business/index.vue'),
|
||||
meta: { title: '生产经营主体', icon: '' },
|
||||
},
|
||||
{
|
||||
path: 'trace',
|
||||
name: 'trace',
|
||||
component: () => import('@/views/trace/index.vue'),
|
||||
meta: { title: '农产品溯源', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: 'early',
|
||||
// name: 'early',
|
||||
|
||||
119
src/views/business/components/businessMap.vue
Normal file
119
src/views/business/components/businessMap.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<centerMap :dialog-title="'投入品'" :marker-data="markerData" @mapclick="doMapclick">
|
||||
<template #header>
|
||||
<div class="land-map-pop-header">
|
||||
<div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #dialogContent>
|
||||
<!-- <div class="land-map-pop-content">
|
||||
<div v-for="(n, index) in list" :key="index" class="list-item">
|
||||
<div class="title">
|
||||
<span class="title-val"> {{ n.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ n.value }}{{ n.unit }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
</centerMap>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
|
||||
const list = reactive([
|
||||
{ title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
|
||||
{ title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
|
||||
]);
|
||||
|
||||
let currentRegion = ref(null);
|
||||
const doMapclick = (data) => {
|
||||
currentRegion.value = data;
|
||||
};
|
||||
|
||||
let markerData = reactive([
|
||||
[
|
||||
// 示例数据点，实际应用中应替换为真实的数据
|
||||
{
|
||||
name: '永星食品加工厂',
|
||||
value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
color: '#4bffb4', //
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '耿马镇',
|
||||
value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
color: '#4bffb4', // 勐永镇的颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-map-pop-header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
.title,
|
||||
.value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-white;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.land-map-pop-content {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.list-item {
|
||||
width: calc((100% - 10px) / 1);
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
.title {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.before {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-content {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.before,
|
||||
.title-val {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 2px;
|
||||
color: $color-custom-main;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
src/views/business/index.vue
Normal file
79
src/views/business/index.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<el-row class="data-home-index">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title=" " :top-postion="'left'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title=" " :top-postion="'left'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title=" " :top-postion="'left'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<businessMap></businessMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title=" " :top-postion="'right'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title=" " :top-postion="'right'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title=" " :top-postion="'right'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import businessMap from './components/businessMap.vue';
|
||||
|
||||
const app = useApp();
|
||||
const fiveRef = ref(null);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.right-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,7 +24,6 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
|
||||
const unit = ref('万亩');
|
||||
const list = reactive([
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user