Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen
This commit is contained in:
commit
58f934bdca
BIN
src/assets/images/vsualized/home/mapopup.png
Normal file
BIN
src/assets/images/vsualized/home/mapopup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 7.5 KiB |
@ -4,6 +4,48 @@
|
|||||||
<div class="map-pos">
|
<div class="map-pos">
|
||||||
<custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
|
<custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
|
||||||
</div>
|
</div>
|
||||||
|
<section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
|
||||||
|
<i class="el-icon-close" @click="handleCloseInfo"></i>
|
||||||
|
<section>
|
||||||
|
<section class="info_box">
|
||||||
|
<div>
|
||||||
|
<span>产品名称</span>
|
||||||
|
<span>{{ info.productName }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>产品批次号</span>
|
||||||
|
<span>{{ info.productCode }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>产品规格</span>
|
||||||
|
<span>{{ info.specs }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>产品类型</span>
|
||||||
|
<span>{{ info.productType }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>生产厂家</span>
|
||||||
|
<span>{{ info.info && info.info.manufacturer }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>生产时间</span>
|
||||||
|
<span>{{ info.info && info.info.productTime }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>终端零售店</span>
|
||||||
|
<span>{{ info.info && info.info.shop }}</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="route_box">
|
||||||
|
<div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
|
||||||
|
<div class="_circle"></div>
|
||||||
|
<div class="_name">{{ item.name }}</div>
|
||||||
|
<div class="_time">{{ item.time }}</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -46,9 +88,9 @@ const chartsData = reactive({
|
|||||||
geo3D: {
|
geo3D: {
|
||||||
map: mapName.value,
|
map: mapName.value,
|
||||||
roam: true,
|
roam: true,
|
||||||
zoom: 0.9,
|
zoom: 1.2,
|
||||||
show: true,
|
show: true,
|
||||||
zlevel: -2, // 必须设置，
|
zlevel: -1, // 必须设置，
|
||||||
viewControl: {
|
viewControl: {
|
||||||
distance: 110,
|
distance: 110,
|
||||||
alpha: 60,
|
alpha: 60,
|
||||||
@ -62,7 +104,7 @@ const chartsData = reactive({
|
|||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||||
color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
|
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||||
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||||
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||||
borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
||||||
@ -88,19 +130,7 @@ const chartsData = reactive({
|
|||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// show: false,
|
color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
||||||
color: {
|
|
||||||
type: 'linear', // 线性渐变
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: '#45bfe9' },
|
|
||||||
{ offset: 1, color: '#01589c' },
|
|
||||||
],
|
|
||||||
global: false, // 默认为 false
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -152,7 +182,7 @@ const chartsData = reactive({
|
|||||||
show: true,
|
show: true,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||||
color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
|
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||||
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||||
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||||
borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
|
borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
|
||||||
@ -171,27 +201,27 @@ const chartsData = reactive({
|
|||||||
borderColor: '#000',
|
borderColor: '#000',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
emphasis: {
|
// emphasis: {
|
||||||
//高亮状态的效果
|
// //高亮状态的效果
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
color: '#fff',
|
// color: '#fff',
|
||||||
},
|
// },
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
// show: false,
|
// // show: false,
|
||||||
color: {
|
// areaColor: {
|
||||||
type: 'linear', // 线性渐变
|
// type: 'linear',
|
||||||
x: 0,
|
// x: 0,
|
||||||
y: 0,
|
// y: 0,
|
||||||
x2: 0,
|
// x2: 1,
|
||||||
y2: 1,
|
// y2: 0,
|
||||||
colorStops: [
|
// colorStops: [
|
||||||
{ offset: 0, color: '#45bfe9' },
|
// { offset: 0, color: '#4bffb4' },
|
||||||
{ offset: 1, color: '#01589c' },
|
// { offset: 1, color: '#4bffb4' },
|
||||||
],
|
// ],
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
// 闪烁散点图系列
|
// 闪烁散点图系列
|
||||||
{
|
{
|
||||||
@ -258,12 +288,104 @@ div {
|
|||||||
max-height: 1000px;
|
max-height: 1000px;
|
||||||
}
|
}
|
||||||
.map-pos {
|
.map-pos {
|
||||||
width: 80%;
|
width: 100%;
|
||||||
height: 80%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-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>
|
</style>
|
||||||
|
|||||||
@ -3,11 +3,11 @@
|
|||||||
<div
|
<div
|
||||||
:style="{
|
:style="{
|
||||||
'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
|
'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
|
||||||
transform: pos == 'right' ? 'rotateY(180deg)' : '',
|
transform: pos == 'right' ? 'rotateY(0deg)' : '',
|
||||||
}"
|
}"
|
||||||
class="title-top-bg"
|
class="title-top-bg"
|
||||||
></div>
|
></div>
|
||||||
<span class="title-top-content" :style="{ 'text-align': pos }">{{ topTitle || '--' }}</span>
|
<span class="title-top-content" :style="{ 'text-align': left }">{{ topTitle || '--' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -70,7 +70,7 @@ watch(
|
|||||||
letter-spacing: 4px;
|
letter-spacing: 4px;
|
||||||
text-shadow: -2px 0 0 1px #add8f1;
|
text-shadow: -2px 0 0 1px #add8f1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 36px;
|
padding: 0 36px 0 72px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|||||||
@ -1,57 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<el-row style="width: 100%; height: 100%" class="data-home-index">
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-col :span="6" class="left-charts">
|
||||||
<el-col :span="6" class="left-charts">
|
<div class="left-charts-item">
|
||||||
<div class="left-charts-item">
|
<customBack top-title="耕地面积统计" :top-postion="'left'">
|
||||||
<customBack top-title="耕地面积统计" :top-postion="'left'">
|
<template #back>
|
||||||
<template #back>
|
<distributionCharts></distributionCharts>
|
||||||
<distributionCharts></distributionCharts>
|
</template>
|
||||||
</template>
|
</customBack>
|
||||||
</customBack>
|
</div>
|
||||||
</div>
|
<div class="left-charts-item">
|
||||||
<div class="left-charts-item">
|
<customBack top-title="农村土地资源" :top-postion="'left'">
|
||||||
<customBack top-title="农村土地资源" :top-postion="'left'">
|
<template #back>
|
||||||
<template #back>
|
<landCirculation></landCirculation>
|
||||||
<landCirculation></landCirculation>
|
</template>
|
||||||
</template>
|
</customBack>
|
||||||
</customBack>
|
</div>
|
||||||
</div>
|
<div class="left-charts-item">
|
||||||
<div class="left-charts-item">
|
<customBack top-title="项目效益分析" :top-postion="'left'">
|
||||||
<customBack top-title="项目效益分析" :top-postion="'left'">
|
<template #back>
|
||||||
<template #back>
|
<landPatrol></landPatrol>
|
||||||
<landPatrol></landPatrol>
|
</template>
|
||||||
</template>
|
</customBack>
|
||||||
</customBack>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
</el-col>
|
<el-col :span="12">
|
||||||
<el-col :span="12">
|
<centerMap></centerMap>
|
||||||
<centerMap></centerMap>
|
</el-col>
|
||||||
</el-col>
|
<el-col :span="6" class="right-charts">
|
||||||
<el-col :span="6" class="right-charts">
|
<div class="right-charts-item">
|
||||||
<div class="right-charts-item">
|
<customBack top-title="农用地数据统计" :top-postion="'right'">
|
||||||
<customBack top-title="农用地数据统计" :top-postion="'right'">
|
<template #back>
|
||||||
<template #back>
|
<landuseCharts></landuseCharts>
|
||||||
<landuseCharts></landuseCharts>
|
</template>
|
||||||
</template>
|
</customBack>
|
||||||
</customBack>
|
</div>
|
||||||
</div>
|
<div class="right-charts-item">
|
||||||
<div class="right-charts-item">
|
<customBack top-title="年度农用地规划面积" :top-postion="'right'">
|
||||||
<customBack top-title="年度农用地规划面积" :top-postion="'right'">
|
<template #back>
|
||||||
<template #back>
|
<landPlan></landPlan>
|
||||||
<landPlan></landPlan>
|
</template>
|
||||||
</template>
|
</customBack>
|
||||||
</customBack>
|
</div>
|
||||||
</div>
|
<div class="right-charts-item">
|
||||||
<div class="right-charts-item">
|
<customBack top-title="各地农用地利用面积" :top-postion="'right'">
|
||||||
<customBack top-title="各地农用地利用面积" :top-postion="'right'">
|
<template #back>
|
||||||
<template #back>
|
<landareaCharts></landareaCharts>
|
||||||
<landareaCharts></landareaCharts>
|
</template>
|
||||||
</template>
|
</customBack>
|
||||||
</customBack>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
</el-col>
|
</el-row>
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import centerMap from '@/components/centerMap.vue';
|
import centerMap from '@/components/centerMap.vue';
|
||||||
@ -61,7 +59,6 @@ import landareaCharts from './components/landareaCharts.vue';
|
|||||||
import landCirculation from './components/landCirculation.vue';
|
import landCirculation from './components/landCirculation.vue';
|
||||||
import landPlan from './components/landPlan.vue';
|
import landPlan from './components/landPlan.vue';
|
||||||
import landPatrol from './components/landPatrol.vue';
|
import landPatrol from './components/landPatrol.vue';
|
||||||
import { reactive } from 'vue';
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.data-home-index {
|
.data-home-index {
|
||||||
@ -73,7 +70,7 @@ import { reactive } from 'vue';
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.left-charts-item {
|
.left-charts-item {
|
||||||
width: 100%;
|
width: calc(100% - 5px);
|
||||||
height: calc((100% - 30px) / 3);
|
height: calc((100% - 30px) / 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -85,7 +82,7 @@ import { reactive } from 'vue';
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.right-charts-item {
|
.right-charts-item {
|
||||||
width: 100%;
|
width: calc(100% - 5px);
|
||||||
height: calc((100% - 30px) / 3);
|
height: calc((100% - 30px) / 3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user