Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen
This commit is contained in:
commit
e61cdf3a89
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
@ -10,15 +10,15 @@
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
||||
const route = useRoute();
|
||||
|
||||
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);
|
||||
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
||||
let geoData = geoJsonData;
|
||||
let mapName = ref('ZJ' + route.name);
|
||||
const chartsData = reactive({
|
||||
@ -50,11 +50,12 @@ const chartsData = reactive({
|
||||
geo3D: {
|
||||
map: mapName.value,
|
||||
roam: true,
|
||||
zoom: 1.2,
|
||||
zoom: 1,
|
||||
left: '30px',
|
||||
show: true,
|
||||
zlevel: -1, // 必须设置，
|
||||
viewControl: {
|
||||
distance: 110,
|
||||
distance: 115,
|
||||
alpha: 60,
|
||||
beta: 0,
|
||||
minBeta: -360,
|
||||
@ -97,7 +98,54 @@ const chartsData = reactive({
|
||||
},
|
||||
},
|
||||
series: [
|
||||
// 闪烁散点图系列
|
||||
{
|
||||
type: 'map3D',
|
||||
map: mapName.value,
|
||||
zoom: 1,
|
||||
left: '30px',
|
||||
viewControl: {
|
||||
distance: 115,
|
||||
alpha: 60,
|
||||
beta: 0,
|
||||
minBeta: -360,
|
||||
maxBeta: 720,
|
||||
// 限制视角，使不能旋转缩放平移
|
||||
// rotateSensitivity: 0,
|
||||
// zoomSensitivity: 0,
|
||||
// panSensitivity: 0,
|
||||
},
|
||||
itemStyle: {
|
||||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||
borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
distance: 0,
|
||||
color: '#000',
|
||||
padding: [6, 4, 2, 4],
|
||||
borderRadius: 4,
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#E87813', // 地图初始化区域字体颜色
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
//高亮状态的效果
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
@ -106,12 +154,9 @@ const mapClick = (data) => {
|
||||
isShow.value = true;
|
||||
console.info('mapClick', data);
|
||||
};
|
||||
|
||||
const infoHide = () => {
|
||||
isShow.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {});
|
||||
onMounted(() => {
|
||||
console.info('iconUrl', iconUrl);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
@ -141,97 +186,5 @@ div {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.line_info {
|
||||
position: fixed;
|
||||
padding: 32px 10px 20px 20px;
|
||||
left: 60px;
|
||||
top: var(--top);
|
||||
max-height: 74vh;
|
||||
width: 400px;
|
||||
color: #fff;
|
||||
background-color: rgb(42 125 235 / 40%);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 9999;
|
||||
transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
> section {
|
||||
padding-right: 10px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #dddddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #959191;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #a0a0a0;
|
||||
}
|
||||
.info_box {
|
||||
> div {
|
||||
margin-bottom: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
span {
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.route_box {
|
||||
padding: 0 34px;
|
||||
> div {
|
||||
position: relative;
|
||||
padding-bottom: 16px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: -11px;
|
||||
height: 100%;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
&:last-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
._circle {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 3px #fff;
|
||||
}
|
||||
._name {
|
||||
margin-bottom: 6px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-family: '黑体';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -38,6 +38,7 @@ import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
onMounted(() => {
|
||||
handleWidth();
|
||||
activeTitle.value = router.currentRoute.value.name;
|
||||
});
|
||||
// const emit = defineEmits(['changeTitle']);
|
||||
const props = defineProps({
|
||||
@ -91,6 +92,7 @@ watch(
|
||||
);
|
||||
function handleWidth() {
|
||||
let ld = document.querySelector('.left_titles_container');
|
||||
if (ld) {
|
||||
let w = ld.clientWidth;
|
||||
itemW.value = (w - 2 * gap.value) / 3;
|
||||
titleContentW.value = itemW.value * leftTitles.value.length + leftTitles.value.length * gap.value;
|
||||
@ -99,6 +101,7 @@ function handleWidth() {
|
||||
right.value = l * itemW.value + (l - 1) * gap.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleTitleBtn(t = -1) {
|
||||
if (props.titles.length > 6) {
|
||||
if (leftNum.value > -1) leftNum.value = leftNum.value + t;
|
||||
@ -165,7 +168,7 @@ function handleTitleClick(val) {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 60px;
|
||||
line-height: 90px;
|
||||
.title_content {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}"
|
||||
class="title-top-bg"
|
||||
></div>
|
||||
<span class="title-top-content" :style="{ 'text-align': 'left' }">{{ topTitle || '--' }}</span>
|
||||
<span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
@ -58,11 +58,14 @@ onMounted(() => {
|
||||
&-header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin-bottom: 60px;
|
||||
// margin-bottom: 60px;
|
||||
}
|
||||
&-main {
|
||||
flex: 1;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
.base-laytout-header {
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
import demoRouters from './modules/demo';
|
||||
import path from 'path-browserify';
|
||||
import v2 from './modules/v2';
|
||||
|
||||
export const constantRoutes = [
|
||||
// {
|
||||
@ -20,60 +22,61 @@ export const constantRoutes = [
|
||||
path: '/',
|
||||
name: 'layout',
|
||||
component: Layout,
|
||||
// redirect: '/home',
|
||||
redirect: '/home',
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
children: [
|
||||
{
|
||||
path: '/home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
name: 'home',
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
},
|
||||
{
|
||||
path: '/land',
|
||||
component: () => import('@/views/land/index.vue'),
|
||||
name: 'land',
|
||||
meta: { title: '土地资源', icon: 'House' },
|
||||
},
|
||||
{
|
||||
path: '/inputs',
|
||||
name: 'inputs',
|
||||
component: () => import('@/views/inputs/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/entities',
|
||||
name: 'entities',
|
||||
component: () => import('@/views/entities/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/breed',
|
||||
name: 'breed',
|
||||
component: () => import('@/views/breed/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/plant',
|
||||
name: 'plant',
|
||||
component: () => import('@/views/plant/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/trace',
|
||||
name: 'trace',
|
||||
component: () => import('@/views/trace/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/early',
|
||||
name: 'early',
|
||||
component: () => import('@/views/early/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
// children: [
|
||||
// {
|
||||
// path: '/home',
|
||||
// component: () => import('@/views/home/index.vue'),
|
||||
// name: 'home',
|
||||
// meta: { title: '首页', icon: 'House' },
|
||||
// },
|
||||
// {
|
||||
// path: '/land',
|
||||
// component: () => import('@/views/land/index.vue'),
|
||||
// name: 'land',
|
||||
// meta: { title: '土地资源', icon: 'House' },
|
||||
// },
|
||||
// {
|
||||
// path: '/inputs',
|
||||
// name: 'inputs',
|
||||
// component: () => import('@/views/inputs/index.vue'),
|
||||
// hidden: true,
|
||||
// },
|
||||
// {
|
||||
// path: '/entities',
|
||||
// name: 'entities',
|
||||
// component: () => import('@/views/entities/index.vue'),
|
||||
// hidden: true,
|
||||
// },
|
||||
// {
|
||||
// path: '/breed',
|
||||
// name: 'breed',
|
||||
// component: () => import('@/views/breed/index.vue'),
|
||||
// hidden: true,
|
||||
// },
|
||||
// {
|
||||
// path: '/plant',
|
||||
// name: 'plant',
|
||||
// component: () => import('@/views/plant/index.vue'),
|
||||
// hidden: true,
|
||||
// },
|
||||
// {
|
||||
// path: '/trace',
|
||||
// name: 'trace',
|
||||
// component: () => import('@/views/trace/index.vue'),
|
||||
// hidden: true,
|
||||
// },
|
||||
// {
|
||||
// path: '/early',
|
||||
// name: 'early',
|
||||
// component: () => import('@/views/early/index.vue'),
|
||||
// hidden: true,
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
...demoRouters,
|
||||
v2,
|
||||
{
|
||||
path: '/test',
|
||||
name: 'test',
|
||||
|
||||
59
src/router/modules/v2.js
Normal file
59
src/router/modules/v2.js
Normal file
@ -0,0 +1,59 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
export default {
|
||||
path: '/v2',
|
||||
name: 'layout',
|
||||
component: Layout,
|
||||
redirect: '/v2/home',
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
name: 'home',
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
},
|
||||
{
|
||||
path: 'land',
|
||||
component: () => import('@/views/land/index.vue'),
|
||||
name: 'land',
|
||||
meta: { title: '土地资源', icon: 'House' },
|
||||
},
|
||||
{
|
||||
path: 'inputs',
|
||||
name: 'inputs',
|
||||
component: () => import('@/views/inputs/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: 'entities',
|
||||
name: 'entities',
|
||||
component: () => import('@/views/entities/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: 'breed',
|
||||
name: 'breed',
|
||||
component: () => import('@/views/breed/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: 'plant',
|
||||
name: 'plant',
|
||||
component: () => import('@/views/plant/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: 'trace',
|
||||
name: 'trace',
|
||||
component: () => import('@/views/trace/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: 'early',
|
||||
name: 'early',
|
||||
component: () => import('@/views/early/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -10,6 +10,9 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #000;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.el-dialog__body {
|
||||
overflow: hidden auto;
|
||||
height: auto;
|
||||
@ -36,3 +39,25 @@
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 2);
|
||||
}
|
||||
._scroll {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #dddddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #959191;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #a0a0a0;
|
||||
}
|
||||
}
|
||||
.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
.h100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
135
src/views/land/components/LandAera.vue
Normal file
135
src/views/land/components/LandAera.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<section class="land_area_all">
|
||||
<section class="_left">
|
||||
<section class="_circle"></section>
|
||||
<section class="_text"></section>
|
||||
</section>
|
||||
<section class="_right _scroll">
|
||||
<section v-for="(item, i) in list" :key="`right_${i}`" class="list_item w100" :class="[item.id == ac ? 'active' : '']">
|
||||
<span class="_label">
|
||||
<span class="_spot" :style="{ background: item.color }"></span>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<span class="_value">{{ item.value }}</span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
{ value: 60.8, label: '望天田' },
|
||||
{ value: 60.6, label: '水浇地' },
|
||||
{ value: 58.9, label: '灌溉水田' },
|
||||
{ value: 56.1, label: '基地地' },
|
||||
{ value: 56.0, label: '果园' },
|
||||
{ value: 52.4, label: '草地' },
|
||||
{ value: 32.6, label: '林地' },
|
||||
{ value: 25.8, label: '育苗地' },
|
||||
{ value: 6.3, label: '观测用地' },
|
||||
{ value: 6.1, label: '监测用地' },
|
||||
];
|
||||
},
|
||||
},
|
||||
});
|
||||
const list = ref([]);
|
||||
const ac = ref(0);
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
list.value = props.data.map((v, i) => {
|
||||
return {
|
||||
id: i,
|
||||
...v,
|
||||
color: randomColor(),
|
||||
};
|
||||
});
|
||||
console.log('list', list.value);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
function randomColor() {
|
||||
let obj = {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
};
|
||||
Object.keys(obj).forEach((key) => {
|
||||
obj[key] = Math.floor(Math.random() * 256);
|
||||
});
|
||||
return `rgb(${obj.r},${obj.g},${obj.b})`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land_area_all {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
._left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
._circle {
|
||||
width: 80%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
background: url('../../../assets/images/land/countCircleBG.png') no-repeat center center / cover;
|
||||
}
|
||||
._text {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: url('../../../assets/images/land/countTextBG.png') no-repeat center center / cover;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
._right {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
.list_item {
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
grid-template-columns: 60% 40%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
.active {
|
||||
background-color: rgba($color: #008f32, $alpha: 0.4);
|
||||
box-shadow: 0 0 1px rgba($color: #008f32, $alpha: 08);
|
||||
._label,
|
||||
._value {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
._label {
|
||||
._spot {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-25%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
._value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-row style="width: 100%; height: 100%" class="data-home-index">
|
||||
<el-row class="data-home-index">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="耕地面积统计" :top-postion="'left'">
|
||||
@ -28,9 +28,9 @@
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="农用地数据统计" :top-postion="'right'">
|
||||
<customBack top-title="全县耕地面积" :top-postion="'right'">
|
||||
<template #back>
|
||||
<landuseCharts></landuseCharts>
|
||||
<LandAera />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
@ -59,9 +59,12 @@ import landareaCharts from './components/landareaCharts.vue';
|
||||
import landCirculation from './components/landCirculation.vue';
|
||||
import landPlan from './components/landPlan.vue';
|
||||
import landPatrol from './components/landPatrol.vue';
|
||||
import LandAera from './components/LandAera.vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.left-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user