Skip to content

广
广东建设用地-前端
提交 af62e60d authored 作者: gjx's avatar gjx
浏览文件
操作

添加一张图，下载leaft地图

上级 800fb364
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 797 行增加 和 20 行删除
package.json
浏览文件 @ af62e60d
......@@ -151,6 +151,10 @@
"typescript": "^4.9.5",
"unocss": "^0.55.3",
"vite": "^4.4.9",
"leaflet": "^1.9.4",
"leaflet-measure-path": "^1.5.0",
"leaflet-side-by-side": "^2.2.0",
"leaflet.fullscreen": "^2.4.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-imagemin": "^0.6.1",
......
src/views/dashboard/OnePic/components/DkNum.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div class="w-100">
<Model title="地块调查阶段地块数量变更情况">
<a-radio-group v-model:value="value2" button-style="solid">
<a-radio-button value="1">按年</a-radio-button>
<a-radio-button value="2">按季度</a-radio-button>
<a-radio-button value="3">按月</a-radio-button>
<a-radio-button value="4">按周</a-radio-button>
<a-radio-button value="5">按天</a-radio-button>
</a-radio-group>
<Bar :chartData="chartData" height="240px" :option="option" v-if="chartData.length || chartData.length > 0" />
</Model>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Model from './model.vue';
import Bar from '/@/components/chart/Bar.vue';
const chartData = ref<any>([]);
const value2 = ref('3');
const option = ref({
grid: {
left: '1%',
right: '1%',
top: '12%',
bottom: '35px',
containLabel: true,
},
legend: {
bottom: 0,
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} %',
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#0096FF',
},
},
axisLabel: {
// interval: 0,
rotate: 330,
textStyle: {
color: '#fff',
},
},
},
yAxis: {
axisLine: {
lineStyle: {
color: '#0096FF',
type: 'dashed',
},
},
axisLabel: {
textStyle: {
color: '#fff',
},
},
splitLine: {
lineStyle: {
color: '#0096FF',
type: 'dashed',
},
},
},
series: [
{
name: '地块总数',
type: 'bar',
barWidth: '20%',
data: [
{
name: '广州市',
value: 9.68,
},
{
name: '深圳市',
value: 3.16,
},
{
name: '韶关市',
value: 80.42,
},
{
name: '江门市',
value: 15.28,
},
{
name: '惠州市',
value: 15.28,
},
],
},
{
name: '新增地块',
type: 'bar',
barWidth: '20%',
data: [
{
name: '广州市',
value: 5.68,
},
{
name: '深圳市',
value: 3.16,
},
{
name: '韶关市',
value: 6.42,
},
{
name: '江门市',
value: 15.28,
},
{
name: '惠州市',
value: 3.28,
},
],
},
{
name: '非污染地块',
type: 'bar',
barWidth: '20%',
data: [
{
name: '广州市',
value: 68,
},
{
name: '深圳市',
value: 3.16,
},
{
name: '韶关市',
value: 80.42,
},
{
name: '江门市',
value: 15.28,
},
{
name: '惠州市',
value: 34.28,
},
],
},
],
});
function init() {
chartData.value = [
{
name: '广州市',
value: 0.68,
},
{
name: '深圳市',
value: 3.16,
},
{
name: '韶关市',
value: 80.42,
},
{
name: '江门市',
value: 15.28,
},
{
name: '惠州市',
value: 15.28,
},
];
}
onMounted(() => {
init();
});
</script>
<style lang="less" scoped></style>
src/views/dashboard/OnePic/components/Fxgkxf.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div class="w-100">
<Model title="建设用地风险管控与修复名录变化情况">
<a-radio-group v-model:value="value2" button-style="solid">
<a-radio-button value="1">按年</a-radio-button>
<a-radio-button value="2">按季度</a-radio-button>
<a-radio-button value="3">按月</a-radio-button>
<a-radio-button value="4">按周</a-radio-button>
<a-radio-button value="5">按天</a-radio-button>
</a-radio-group>
<div class="grid grid-cols-5 text-center mt-3">
<div v-for="v in columns" :key="v.title">{{ v.title }}</div>
</div>
<a-carousel dot-position="left" :dots="false" autoplay>
<div class="text-[#fff] !grid !grid-cols-5 text-center" v-for="(v, index) in list" :key="v.name">
<div>{{ index + 1 }}</div>
<div>{{ v.name }}</div>
<div>{{ v.num }}</div>
<div>{{ v.xzdk }}</div>
<div>{{ v.ycdk }}</div>
</div>
</a-carousel>
</Model>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Model from './model.vue';
const value2 = ref('3');
const columns = ref([
{
title: '序号',
dataIndex: 'index',
},
{
title: '市',
dataIndex: 'name',
},
{
title: '地块总数',
dataIndex: 'dksl',
},
{
title: '新增地块',
dataIndex: 'dksl',
},
{
title: '移除地块',
dataIndex: 'dksl',
},
]);
const list = ref([
{
name: '广州市',
num: 18,
xzdk: 15,
ycdk: 2,
},
{
name: '深圳市',
num: 17,
xzdk: 15,
ycdk: 2,
},
{
name: '韶关市',
num: 16,
xzdk: 15,
ycdk: 2,
},
{
name: '惠州市',
num: 15,
xzdk: 15,
ycdk: 2,
},
{
name: '东莞市',
num: 12,
xzdk: 15,
ycdk: 2,
},
{
name: '中山市',
num: 9,
xzdk: 15,
ycdk: 2,
},
]);
</script>
<style lang="less" scoped>
.ant-carousel :deep(.slick-list) {
height: 200px !important;
}
.ant-carousel :deep(.slick-slide) {
height: 30px !important;
}
</style>
src/views/dashboard/OnePic/components/FxpgNum.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div class="w-100">
<Model title="风险评估阶段地块数量变更情况">
<a-radio-group v-model:value="value2" button-style="solid">
<a-radio-button value="1">按年</a-radio-button>
<a-radio-button value="2">按季度</a-radio-button>
<a-radio-button value="3">按月</a-radio-button>
<a-radio-button value="4">按周</a-radio-button>
<a-radio-button value="5">按天</a-radio-button>
</a-radio-group>
<Radar :chartData="chartData" height="360px" :option="option" v-if="chartData.length || chartData.length > 0" />
</Model>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Model from './model.vue';
import Radar from '/@/components/chart/Radar.vue';
const chartData = ref<any>([]);
const value2 = ref('3');
const option = ref({
title: {
show: false,
},
grid: {
left: '1%',
right: '1%',
top: '22%',
bottom: '35px',
containLabel: true,
},
legend: {
bottom: 0,
textStyle: {
color: '#fff',
},
data: ['地块总数', '新增地块', '非污染地块'],
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} %',
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#0096FF',
},
},
axisLabel: {
// interval: 0,
rotate: 330,
textStyle: {
color: '#fff',
},
},
},
yAxis: {
axisLine: {
lineStyle: {
color: '#0096FF',
type: 'dashed',
},
},
axisLabel: {
textStyle: {
color: '#fff',
},
},
splitLine: {
lineStyle: {
color: '#0096FF',
type: 'dashed',
},
},
},
indicator: [
{
name: '广州市',
},
{
name: '深圳市',
},
{
name: '韶关市',
},
{
name: '江门市',
value: 15.28,
},
],
series: [
{
name: '地块总数',
type: 'radar',
data: [9.68, , 3.16, 80.42, 15.28],
},
{
name: '新增地块',
type: 'radar',
data: [5.68, 3.16, 6.42, 15.28, 3.28],
},
{
name: '非污染地块',
type: 'radar',
data: [68, 3.16, 80.42, 15.28, 34.28],
},
],
});
function init() {
chartData.value = [
{
name: '广州市',
value: 0.68,
},
{
name: '深圳市',
value: 3.16,
},
{
name: '韶关市',
value: 80.42,
},
{
name: '江门市',
value: 15.28,
},
{
name: '惠州市',
value: 15.28,
},
];
}
onMounted(() => {
init();
});
</script>
<style lang="less" scoped></style>
src/views/dashboard/OnePic/components/industry.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div class="w-100">
<Model title="行业超标分析">
<div class="grid grid-cols-3 text-center">
<div v-for="v in columns" :key="v.title">{{ v.title }}</div>
</div>
<a-carousel dot-position="left" :dots="false" autoplay>
<div class="text-[#fff] !grid !grid-cols-3 text-center" v-for="(v, index) in list" :key="v.name">
<div>{{ index + 1 }}</div>
<div>{{ v.name }}</div>
<div>{{ v.num }}</div>
</div>
</a-carousel>
</Model>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Model from './model.vue';
const columns = ref([
{
title: '序号',
dataIndex: 'index',
},
{
title: '行业名称',
dataIndex: 'name',
},
{
title: '超标地块数量(个)',
dataIndex: 'dksl',
},
]);
const list = ref([
{
name: '基础化学原料制造',
num: 13,
},
{
name: '专用化学产品制造',
num: 4,
},
{
name: '皮革鞣制加工',
num: 4,
},
{
name: '金属制品业',
num: 4,
},
{
name: '铅锌冶炼',
num: 4,
},
{
name: '其他建筑、安全用金',
num: 4,
},
]);
</script>
<style lang="less" scoped>
.ant-carousel :deep(.slick-list) {
height: 160px !important;
}
.ant-carousel :deep(.slick-slide) {
height: 30px !important;
}
</style>
src/views/dashboard/OnePic/components/map/index.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div id="centerMap" class="map"></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';
// import 'leaflet.fullscreen/Control.FullScreen';
// import 'leaflet.fullscreen/Control.FullScreen.css';
import 'leaflet-measure-path/leaflet-measure-path.css';
import 'leaflet-measure-path/leaflet-measure-path.js';
onMounted(async () => {
await nextTick();
initMap();
});
const map = ref('');
function initMap() {
map.value = L.map('centerMap', {
center: [31.841309, 113.2],
zoom: 14,
zoomControl: true,
attributionControl: false,
crs: L.CRS.EPSG4326, // 默认3857
fullscreenControl: true,
maxZoom: 17,
});
//定义一个比例尺控件
let scale = L.control.scale();
scale.addTo(map.value);
scale.getContainer().childNodes[0].style.cssText =
'margin-bottom:-4px;color:#FFF;text-shadow:none;border:2px solid #FFF;background:none;border-top:0px;';
scale.getContainer().childNodes[1].hidden = true;
// // 经纬度投影
const IMG_C =
'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';
const CIA_C =
'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';
L.tileLayer(IMG_C, {
zoomOffset: 1, // 经纬度投影打开
maxZoom: 17,
tileSize: 256,
}).addTo(map.value);
L.tileLayer(CIA_C, {
zoomOffset: 1, // 经纬度投影打开
maxZoom: 17,
tileSize: 256,
}).addTo(map.vue);
}
</script>
<style>
.map {
height: 100%;
}
</style>
src/views/dashboard/OnePic/components/model.vue
浏览文件 @ af62e60d
<template>
<div class="model">
<div>标题</div>
<div>内容</div>
<div class="text-lg py-2">
<img src="@/assets/images/tb.png" class="ml-3" alt="" />
{{ title }}</div
>
<slot />
</div>
</template>
<script setup lang="ts">
defineProps({
title: String,
});
</script>
<style lang="less">
.model {
width: 200px;
height: 100px;
// background: // linear-gradient(to left, #0074d8, #0074d8) left top no-repeat,
// linear-gradient(to bottom, #0074D8#0074D8) left top no-repeat,
// linear-gradient(to left, #0074d8, #0074d8) right top no-repeat,
// linear-gradient(to bottom, #0074d8, #0074d8) right top no-repeat,
// linear-gradient(to left, #0074d8, #0074d8) left bottom no-repeat,
// linear-gradient(to bottom, #0074d8, #0074d8) left bottom no-repeat,
// linear-gradient(to left, #0074d8, #0074d8) right bottom no-repeat,
// linear-gradient(to left, #0074d8, #0074d8) right bottom no-repeat;;
// background-size:
// 2px 20px,
// 20px 2px,
// 2px 20px,
// 20px 2px;
// width: 200px;
// height: 100px;
background:
linear-gradient(to left, #0074d8, #0074d8) left top no-repeat,
linear-gradient(to bottom, #0074d8, #0074d8) left top no-repeat,
linear-gradient(to left, #0074d8, #0074d8) right top no-repeat,
linear-gradient(to bottom, #0074d8, #0074d8) right top no-repeat,
linear-gradient(to left, #0074d8, #0074d8) left bottom no-repeat,
linear-gradient(to bottom, #0074d8, #0074d8) left bottom no-repeat,
linear-gradient(to left, #0074d8, #0074d8) right bottom no-repeat,
linear-gradient(to left, #0074d8, #0074d8) right bottom no-repeat;
background-size:
0.2125rem 1rem,
1rem 0.2125rem,
0.2125rem 1rem,
1rem 0.2125rem;
transition: al1 0.4s ease;
border: 1px solid transparent;
}
......
src/views/dashboard/OnePic/components/region.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div class="w-100">
<Model title="地区超标分析">
<div class="grid grid-cols-3 text-center">
<div v-for="v in columns" :key="v.title">{{ v.title }}</div>
</div>
<a-carousel dot-position="left" :dots="false" autoplay>
<div class="text-[#fff] !grid !grid-cols-3 text-center" v-for="(v, index) in list" :key="v.name">
<div>{{ index + 1 }}</div>
<div>{{ v.name }}</div>
<div>{{ v.num }}</div>
</div>
</a-carousel>
</Model>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Model from './model.vue';
const columns = ref([
{
title: '序号',
dataIndex: 'index',
},
{
title: '市',
dataIndex: 'name',
},
{
title: '超标地块数量(个)',
dataIndex: 'dksl',
},
]);
const list = ref([
{
name: '广州市',
num: 18,
},
{
name: '深圳市',
num: 17,
},
{
name: '韶关市',
num: 16,
},
{
name: '惠州市',
num: 15,
},
{
name: '东莞市',
num: 12,
},
{
name: '中山市',
num: 9,
},
]);
</script>
<style lang="less" scoped>
.ant-carousel :deep(.slick-list) {
height: 160px !important;
}
.ant-carousel :deep(.slick-slide) {
height: 30px !important;
}
</style>
src/views/dashboard/OnePic/components/soil.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div class="w-100">
<Model title="土壤污染环境">
<Pie :chartData="chartData" height="240px" :option="option" v-if="chartData.length || chartData.length > 0" />
</Model>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Model from './model.vue';
import Pie from '/@/components/chart/Pie.vue';
const chartData = ref<any>([]);
const option = ref({
grid: {
left: '1%',
right: '1%',
top: '2%',
bottom: '35px',
containLabel: true,
},
legend: {
bottom: 0,
show: false,
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
series: [
{
name: '土壤污染环境',
type: 'pie',
radius: '50%',
// color: ['#FCBE00'],
},
],
});
function init() {
chartData.value = [
{
name: '超过筛选之及管控值',
value: 0.68,
},
{
name: '超过管制值地块',
value: 3.16,
},
{
name: '未超标地块',
value: 80.42,
},
{
name: '未确认',
value: 15.28,
},
];
}
onMounted(() => {
init();
});
</script>
<style lang="less" scoped></style>
src/views/dashboard/OnePic/components/water.vue 0 → 100644
浏览文件 @ af62e60d
<template>
<div class="w-100">
<Model title="地下水污染环境">
<Pie :chartData="chartData" height="240px" :option="option" v-if="chartData.length || chartData.length > 0" />
</Model>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Model from './model.vue';
import Pie from '/@/components/chart/Pie.vue';
const chartData = ref<any>([]);
const option = ref({
grid: {
left: '1%',
right: '1%',
top: '2%',
bottom: '35px',
containLabel: true,
},
legend: {
bottom: 0,
show: false,
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
series: [
{
name: '地下水污染地块',
type: 'pie',
radius: '50%',
// color: ['#FCBE00'],
},
],
});
function init() {
chartData.value = [
{
name: '地下水污染地块',
value: 160,
},
{
name: '地下水未污染地块',
value: 458,
},
];
}
onMounted(() => {
init();
});
</script>
<style lang="less" scoped></style>
src/views/dashboard/OnePic/index.vue
浏览文件 @ af62e60d
<template>
<div class="bg-[#0D0A50] text-#fff">
<Model />
<div class="bg-[#0D0A50] text-#fff h-full w-full">
<div class="py-5 text-center text-lg">广东省建设用地污染地块信息系统</div>
<div class="flex w-full">
<div class="ml-5 w-1/6">
<Region />
<Industry class="mt-10" />
<Soil class="mt-10" />
<Water class="mt-10" />
</div>
<div class="w-4/6">
<Map />
</div>
<div class="w-1/6 ml-3">
<DkNum />
<FxpgNum class="mt-10" />
<Fxgkxf class="mt-10" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Model from './components/model.vue';
import Region from './components/region.vue';
import Industry from './components/industry.vue';
import Soil from './components/soil.vue';
import Water from './components/water.vue';
// 右侧
import DkNum from './components/DkNum.vue';
import FxpgNum from './components/FxpgNum.vue';
import Fxgkxf from './components/Fxgkxf.vue';
//中间
import Map from './components/map/index.vue';
</script>
yarn.lock
浏览文件 @ af62e60d
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论