gis模块
This commit is contained in:
xc
56
src/views/visualiz/atmosphere/acid/components/mapNominal.vue
Normal file
56
src/views/visualiz/atmosphere/acid/components/mapNominal.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{item.common}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{item.data}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
87
src/views/visualiz/atmosphere/acid/components/mapTable.vue
Normal file
87
src/views/visualiz/atmosphere/acid/components/mapTable.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '属性',
|
||||
className: 'attribute',
|
||||
dataIndex: 'attribute',
|
||||
},
|
||||
{
|
||||
title: 'ph',
|
||||
dataIndex: 'ph',
|
||||
}
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="酸雨点位" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
84
src/views/visualiz/atmosphere/acid/components/tipTool.vue
Normal file
84
src/views/visualiz/atmosphere/acid/components/tipTool.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{data.place}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位编号 {{data.placeCode}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位属性 {{data.attribute}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
PH {{data.ph}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default:30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data:{
|
||||
type:Object
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user