Skip to content

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

空间一张图页面构建

上级 0f917510
显示空白字符变更
内嵌 并排
正在显示 包含 245 行增加 和 401 行删除
index.html
浏览文件 @ 2d2d418d
......@@ -163,15 +163,16 @@
</div>
<script type="module" src="/src/main.ts"></script>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement('script');
// 百度站点统计 不需要
// var _hmt = _hmt || [];
// (function () {
// var hm = document.createElement('script');
// hm.src = "https://hm.baidu.com/hm.js?0febd9e3cacb3f627ddac64d52caac39";
hm.src = '/resource/hm.js';
var s = document.getElementsByTagName('script')[0];
// // hm.src = '/resource/hm.js';
// var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
// s.parentNode.insertBefore(hm, s);
// })();
</script>
</body>
</html>
src/components/registerGlobComp.ts
浏览文件 @ 2d2d418d
......@@ -54,6 +54,7 @@ import {
Popconfirm,
Skeleton,
Cascader,
Progress,
Rate,
} from 'ant-design-vue';
......@@ -121,6 +122,7 @@ export function registerGlobComp(app: App) {
.use(DragEngine)
.use(Skeleton)
.use(Cascader)
.use(Progress)
.use(Rate);
console.log("注册antd组件完成！");
}
src/views/dashboard/OnePic/components/DkNum.vue
浏览文件 @ 2d2d418d
<template>
<div class="w-100">
<div class="w-90% mx-auto right1">
<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" />
<div class="flex py-15 w-90% mx-auto">
<div>
<div class="flex mb-5">
<img class="w-13 h-15 mr-3" :src="img1" />
<div>
<div>未移出名录地块数量</div>
<div class="val text-2xl">1600 <span>家</span></div>
</div>
</div>
<div class="flex">
<img class="w-13 h-15 mr-3" :src="img2" />
<div>
<div>移出名录地块数量</div>
<div class="val text-2xl">1600 <span>家</span></div>
</div>
</div>
</div>
<div class="ml-20">
<div class="val bg-val text-4xl text-center py-4 px-6">
<div class="mb-5">2000</div>
</div>
<div class="text-2xl xf mt-3">修复名录总地块数量</div>
</div>
</div>
</Model>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref } 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();
});
import img1 from '@/assets/images/onePic/weiyichu_ic@2x.png';
import img2 from '@/assets/images/onePic/yichu_ic@2x.png';
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
// 自定义字体
@font-face {
font-family: 'zcool-gdh-Medium';
src: url('/@/assets/font/zcoo.TTF');
}
.right1 {
.val {
font-family: 'zcool-gdh-Medium';
color: #d8f0ff;
}
.xf {
font-family: 'zcool-gdh-Medium';
}
.bg-val {
background: url('@/assets/images/onePic/bg_xiuf@2x.png') no-repeat;
background-size: 100% 100%;
background-position: center;
}
}
</style>
src/views/dashboard/OnePic/components/Fxgkxf.vue
浏览文件 @ 2d2d418d
<template>
<div class="w-100">
<div class="w-90% mx-auto right2 text-base">
<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 class="w-95% mx-auto pb-5">
<div class="grid grid-cols-5 text-center mt-3 h-12 leading-12 titles">
<div v-for="v in columns" :key="v.title">{{ v.title }}</div>
</div>
<a-carousel dot-position="left" :dots="false" autoplay>
<!-- autoplay -->
<a-carousel dot-position="left" :dots="false">
<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>
......@@ -20,32 +15,33 @@
<div>{{ v.ycdk }}</div>
</div>
</a-carousel>
</div>
</Model>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Model from './model.vue';
const value2 = ref('3');
const columns = ref([
{
title: '序号',
title: '排名',
dataIndex: 'index',
},
{
title: '市',
title: '市级名称',
dataIndex: 'name',
},
{
title: '地块总数',
title: '移除地块数量',
dataIndex: 'dksl',
},
{
title: '新增地块',
title: '未移除地块数量',
dataIndex: 'dksl',
},
{
title: '移除地块',
title: '地块总数',
dataIndex: 'dksl',
},
]);
......@@ -90,9 +86,18 @@
</script>
<style lang="less" scoped>
.ant-carousel :deep(.slick-list) {
height: 200px !important;
height: 300px !important;
}
.ant-carousel :deep(.slick-slide) {
height: 30px !important;
height: 40px !important;
line-height: 40px;
background: rgba(0, 201, 216, 0.08);
margin-top: 5px;
font-size: 16px;
}
.right2 {
.titles {
background: linear-gradient(135deg, rgba(116, 136, 172, 0.55), rgba(129, 162, 224, 0.56));
}
}
</style>
src/views/dashboard/OnePic/components/FxpgNum.vue
浏览文件 @ 2d2d418d
<template>
<div class="w-100">
<div class="w-90% mx-auto right2 text-base">
<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" />
<div class="py-3">
<Pie :chartData="chartData" height="260px" :option="option" v-if="chartData.length || chartData.length > 0" />
</div>
</Model>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Model from './model.vue';
import Radar from '/@/components/chart/Radar.vue';
import Pie from '/@/components/chart/Pie.vue';
const chartData = ref<any>([]);
const value2 = ref('3');
const option = ref({
title: {
show: false,
},
label: {
show: false,
position: 'center',
},
labelLine: {
show: false,
},
grid: {
left: '1%',
right: '1%',
top: '22%',
top: '5%',
bottom: '35px',
containLabel: true,
},
legend: {
bottom: 0,
orient: 'vertical',
left: '8%',
icon: 'circle',
top: '30%',
textStyle: {
color: '#fff',
},
data: ['地块总数', '新增地块', '非污染地块'],
color: '#02FEFF',
fontSize: 16,
rich: {
a: {
color: '#FFFFFF',
width: 45,
fontSize: 14,
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} %',
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#0096FF',
},
},
axisLabel: {
// interval: 0,
rotate: 330,
textStyle: {
color: '#fff',
b: {
width: 35,
fontSize: 14,
color: '#FFFFFF',
},
},
},
yAxis: {
axisLine: {
lineStyle: {
color: '#0096FF',
type: 'dashed',
},
},
axisLabel: {
textStyle: {
color: '#fff',
},
},
splitLine: {
lineStyle: {
color: '#0096FF',
type: 'dashed',
},
},
},
indicator: [
{
name: '广州市',
},
{
name: '深圳市',
},
{
name: '韶关市',
formatter: function (name) {
for (var i = 0; i < chartData.value.length; i++) {
if (name == chartData.value[i].name) {
return `{a|${name}}{b|占比:}${chartData.value[i].value}%`;
}
}
},
{
name: '江门市',
value: 15.28,
},
],
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b} : {c} %',
// },
series: [
{
name: '地块总数',
type: 'radar',
data: [9.68, , 3.16, 80.42, 15.28],
type: 'pie',
radius: [50, 130],
center: ['60%', '50%'],
roseType: 'area',
labelLine: {
show: false,
},
{
name: '新增地块',
type: 'radar',
data: [5.68, 3.16, 6.42, 15.28, 3.28],
label: {
normal: {
show: false,
position: 'center',
},
{
name: '非污染地块',
type: 'radar',
data: [68, 3.16, 80.42, 15.28, 34.28],
},
// data: [
// { value: 40, name: 'rose 1' },
// { value: 38, name: 'rose 2' },
// { value: 32, name: 'rose 3' },
// { value: 30, name: 'rose 4' },
// ],
},
],
});
......@@ -114,23 +95,19 @@
chartData.value = [
{
name: '广州市',
value: 0.68,
value: 40,
},
{
name: '深圳市',
value: 3.16,
value: 38,
},
{
name: '韶关市',
value: 80.42,
value: 32,
},
{
name: '江门市',
value: 15.28,
},
{
name: '惠州市',
value: 15.28,
value: 30,
},
];
}
......
src/views/dashboard/OnePic/components/industry.vue
浏览文件 @ 2d2d418d
<template>
<div class="w-100">
<div class="w-90% mx-auto left2">
<Model title="行业超标分析">
<div class="grid grid-cols-3 text-center">
<div v-for="v in columns" :key="v.title">{{ v.title }}</div>
</div>
<div class="!w-90% mx-auto mt-4">
<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 class="text-[#D8F0FF] h-full" v-for="(v, index) in list" :key="v.name">
<div>
<div class="inline-block px-1 mr-1 border border-2" :class="`${index <= 2 ? ' border-[#008091] border-solid text-[#00C9D8] ' : ''}`"
>TOP{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</div
>
{{ v.name }}</div
>
<a-progress
:stroke-color="{
'20%': '#CCF7FF',
'100%': '#00D2FC',
}"
:percent="v.num"
/>
</div>
</a-carousel>
</div>
</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: '基础化学原料制造',
name: '深圳',
num: 13,
},
{
name: '专用化学产品制造',
num: 4,
name: '梅州',
num: 24,
},
{
name: '皮革鞣制加工',
num: 4,
name: '惠州',
num: 74,
},
{
name: '金属制品业',
num: 4,
name: '金属',
num: 54,
},
{
name: '铅锌冶炼',
num: 4,
num: 74,
},
{
name: '其他建筑、安全用金',
name: '其他建筑',
num: 4,
},
]);
</script>
<style lang="less" scoped>
.ant-carousel :deep(.slick-list) {
height: 160px !important;
height: 670px !important;
}
.ant-carousel :deep(.slick-slide) {
height: 30px !important;
height: 60px !important;
> div {
height: 60px !important;
}
}
:deep(.ant-progress-text) {
color: #d8f0ff;
}
</style>
src/views/dashboard/OnePic/components/map/index.vue
浏览文件 @ 2d2d418d
......@@ -95,6 +95,6 @@
</script>
<style>
.map {
height: 100%;
height: 69%;
}
</style>
src/views/dashboard/OnePic/components/model.vue
浏览文件 @ 2d2d418d
<template>
<div class="model">
<div class="text-lg py-2">
<img src="@/assets/images/tb.png" class="ml-3" alt="" />
<div class="text-lg py-2 title">
<!-- <img src="@/assets/images/tb.png" class="ml-3" alt="" /> -->
{{ title }}</div
>
<slot />
......@@ -14,23 +14,14 @@
</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:
0.2125rem 1rem,
1rem 0.2125rem,
0.2125rem 1rem,
1rem 0.2125rem;
transition: al1 0.4s ease;
border: 1px solid transparent;
background: rgba(0, 201, 216, 0.1);
box-shadow: inset 0px 0px 5px 0px rgba(0, 201, 216, 0.302);
.title {
background: url('@/assets/images/onePic/title.png') no-repeat;
background-size: 100% 100%;
background-position: center;
text-indent: 20px;
}
}
</style>
src/views/dashboard/OnePic/components/region.vue
浏览文件 @ 2d2d418d
<template>
<div class="w-100">
<div class="w-90% mx-auto left1">
<Model title="地区超标分析">
<div class="grid grid-cols-3 text-center">
<div v-for="v in columns" :key="v.title">{{ v.title }}</div>
<div class="w-98% mx-auto grid grid-cols-2 py-6 pt-1">
<div class="bg flex mt-5 p-3 mx-auto w-90%" v-for="v in list" :key="v.title">
<img class="w-20 h-15 mt-4 mx-1" :src="v.img" alt="" />
<div class="mt-2">
<p class="text-lg mb-2">{{ v.title }}</p>
<p class="text-3xl">{{ v.value }}</p>
</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',
},
]);
import img1 from '@/assets/images/onePic/ic_zongdikuai@2x.png';
import img2 from '@/assets/images/onePic/ic_diaochazhong@2x.png';
import img3 from '@/assets/images/onePic/ic_weichaobiao@2x.png';
import img4 from '@/assets/images/onePic/ic_chaobiao@2x.png';
const list = ref([
{
name: '广州市',
num: 18,
},
{
name: '深圳市',
num: 17,
},
{
name: '韶关市',
num: 16,
title: '总地块',
value: '1356',
img: img1,
},
{
name: '惠州市',
num: 15,
title: '未调查地块',
value: '1356',
img: img2,
},
{
name: '东莞市',
num: 12,
title: '未超标地块',
value: '1356',
img: img3,
},
{
name: '中山市',
num: 9,
title: '超标地块',
value: '1356',
img: img4,
},
]);
</script>
<style lang="less" scoped>
.ant-carousel :deep(.slick-list) {
height: 160px !important;
.left1 {
.bg {
background: url('@/assets/images/onePic/btn_ic_zongdikuai_bg@2x.png') no-repeat;
background-size: 100% 100%;
background-position: center;
}
.ant-carousel :deep(.slick-slide) {
height: 30px !important;
}
</style>
src/views/dashboard/OnePic/components/soil.vue
浏览文件 @ 2d2d418d
<template>
<div class="w-100">
<div class="w-100%">
<Model title="土壤污染环境">
<Pie :chartData="chartData" height="240px" :option="option" v-if="chartData.length || chartData.length > 0" />
<Line :chartData="chartData" height="260px" :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';
import Line from '/@/components/chart/Line.vue';
const chartData = ref<any>([]);
const option = ref({
......@@ -30,8 +30,8 @@
series: [
{
name: '土壤污染环境',
type: 'pie',
radius: '50%',
type: 'lien',
// color: ['#FCBE00'],
},
],
......
src/views/dashboard/OnePic/index.vue
浏览文件 @ 2d2d418d
<template>
<div class="bg-[#0D0A50] text-#fff h-full w-full">
<div class="onepic text-#fff h-full w-full">
<div class="py-5 text-center text-3xl titleBg">广东省建设用地污染地块信息系统</div>
<div class="flex w-full">
<div class="ml-5 w-1/6">
<div class="w-2/7">
<Region />
<Industry class="mt-10" />
<Soil class="mt-10" />
<Water class="mt-10" />
<!-- <Soil class="mt-10" />
<Water class="mt-10" /> -->
</div>
<div class="w-4/6">
<div class="w-3/7">
<Map />
<Soil class="mt-10" />
</div>
<div class="w-1/6 ml-3">
<div class="w-2/7 ml-3">
<DkNum />
<FxpgNum class="mt-10" />
<Fxgkxf class="mt-10" />
<FxpgNum class="mt-10" />
</div>
</div>
</div>
......@@ -23,7 +24,7 @@
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 Water from './components/water.vue';
// 右侧
import DkNum from './components/DkNum.vue';
import FxpgNum from './components/FxpgNum.vue';
......@@ -32,8 +33,17 @@
import Map from './components/map/index.vue';
</script>
<style lang="less" scoped>
.onepic {
background: url('@/assets/images/onePic/zhezhao_bg@2x.png') no-repeat;
background-size: 100% 100%;
background-position: center;
.titleBg {
background: url('@/assets/images/titleBg.png') no-repeat;
background: url('@/assets/images/onePic/titleBg.png') no-repeat;
background-size: 100% 100%;
background-position: center;
}
}
//
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论