mapbox地图
parent
1e879a20ab
commit
35286fb26d
|
|
@ -5,7 +5,7 @@
|
|||
<script>
|
||||
import { postMethodCommon, getMethodCommon } from "../../../../api/common";
|
||||
import mapboxgl from "mapbox-gl";
|
||||
import { waiData } from "../xianjiewai";
|
||||
import { waiData } from "../../../../assets/xianjiewai";
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,358 +1,503 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="grid-list-container">
|
||||
<div class="search-container">
|
||||
<!-- 人员名称 -->
|
||||
<el-input clearable size="mini" prefix-icon="el-icon-search" style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'人员姓名'"
|
||||
<div class="search-container">
|
||||
<!-- 人员名称 -->
|
||||
<el-input
|
||||
clearable
|
||||
size="mini"
|
||||
prefix-icon="el-icon-search"
|
||||
style="width: 200px; margin-bottom: 0; margin: 0px 12px"
|
||||
class="filter-item"
|
||||
:placeholder="'人员姓名'"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
<el-button type="default" size="mini">重置</el-button>
|
||||
<el-button type="primary" size="mini">搜索</el-button>
|
||||
</div>
|
||||
<div class="list-header">
|
||||
<div class="list-item-box" style="width: 15%">名称</div>
|
||||
<div class="list-item-box" style="width: 15%">类型</div>
|
||||
<div class="list-item-box" style="width: 15%">督查长</div>
|
||||
<div class="list-item-box" style="width: 45%">副督查长</div>
|
||||
<div class="list-item-box" style="width: 10%">操作</div>
|
||||
</div>
|
||||
<div class="list-box">
|
||||
<div
|
||||
class="list-item"
|
||||
v-for="(item, index) in listData"
|
||||
:key="index * tableRandom"
|
||||
>
|
||||
<div class="list-item-box" style="width: 15%">
|
||||
{{ item.xzqmc ? item.xzqmc : "暂无数据" }}
|
||||
</div>
|
||||
<div class="list-item-box" style="width: 15%">
|
||||
{{ item.type ? item.type : " 暂无数据" }}
|
||||
</div>
|
||||
<div class="list-item-box" style="width: 15%">
|
||||
{{ item.dcz ? item.dcz : " 暂无数据" }}
|
||||
</div>
|
||||
<div class="list-item-box" style="width: 45%">
|
||||
{{ item.fdcz ? item.fdcz : "暂无数据 " }}
|
||||
</div>
|
||||
<div class="list-item-box" style="width: 10%">
|
||||
<div
|
||||
class="operate-button operate-edit"
|
||||
@click="getUserlist(item.gid)"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
<el-button type="default" size="mini" >重置</el-button>
|
||||
<el-button type="primary" size="mini" >搜索</el-button>
|
||||
</div>
|
||||
<div class="list-header" >
|
||||
<div class="list-item-box" style="width:15%;">名称</div>
|
||||
<div class="list-item-box" style="width:15%;">类型</div>
|
||||
<div class="list-item-box" style="width:15%;">督查长</div>
|
||||
<div class="list-item-box" style="width:45%;">副督查长</div>
|
||||
<div class="list-item-box" style="width:10%;">操作</div>
|
||||
<i class="el-icon el-icon-edit"></i>
|
||||
</div>
|
||||
<div class="list-box">
|
||||
<div class="list-item" v-for="(item,index) in listData" :key="index*tableRandom" >
|
||||
<div class="list-item-box" style="width:15%;">{{item.xzqmc ? item.xzqmc : '暂无数据'}}</div>
|
||||
<div class="list-item-box" style="width:15%;">{{item.type ? item.type : ' 暂无数据'}}</div>
|
||||
<div class="list-item-box" style="width:15%;">{{item.dcz ? item.dcz : ' 暂无数据'}}</div>
|
||||
<div class="list-item-box" style="width:45%;">{{item.fdcz ? item.fdcz : '暂无数据 '}}</div>
|
||||
<div class="list-item-box" style="width:10%;">
|
||||
<div class="operate-button operate-edit" @click="getUserlist(item.gid)"><i class="el-icon el-icon-edit"></i></div>
|
||||
<div class="operate-button operate-delete"><i class="el-icon el-icon-delete"></i></div>
|
||||
</div>
|
||||
<div class="operate-button operate-delete">
|
||||
<i class="el-icon el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-container">
|
||||
<el-pagination background layout="prev, pager, next" :total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-container" id="mapContainer">
|
||||
|
||||
</div>
|
||||
<div class="map-container" id="mapContainer"></div>
|
||||
<div class="grider-list-container" v-if="userListContainer">
|
||||
<div class="grid-info-contianer">
|
||||
<p>名称：东蒙镇</p>
|
||||
<p>名称：类型</p>
|
||||
<p>督察长：徐景良</p>
|
||||
</div>
|
||||
<div class="grid-list-box">
|
||||
<div class="grider-list-item" v-for="(item,index) in userList" :key="index">
|
||||
<el-form :model="item" size="mini" label-width="90px" class="demo-ruleForm">
|
||||
<el-form-item label="人员姓名：" prop="areaName">
|
||||
<el-input v-model="item.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属单位：" prop="households">
|
||||
<el-input v-model="item.workunit"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="防火职务：" prop="households">
|
||||
<el-input v-model="item.fireduties"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="督察职务：" prop="households">
|
||||
<el-input v-model="item.supervision"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="height:40px;">
|
||||
<div class="operate-button operate-edit"><i class="el-icon el-icon-folder-checked" @click="saveUser(item)"></i></div>
|
||||
<div class="operate-button operate-delete" @click="deleteUser(item.id)"><i class="el-icon el-icon-delete"></i></div>
|
||||
</div>
|
||||
<div class="grid-info-contianer">
|
||||
<p>名称：东蒙镇</p>
|
||||
<p>名称：类型</p>
|
||||
<p>督察长：徐景良</p>
|
||||
</div>
|
||||
<div class="grid-list-box">
|
||||
<div
|
||||
class="grider-list-item"
|
||||
v-for="(item, index) in userList"
|
||||
:key="index"
|
||||
>
|
||||
<el-form
|
||||
:model="item"
|
||||
size="mini"
|
||||
label-width="90px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="人员姓名：" prop="areaName">
|
||||
<el-input v-model="item.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属单位：" prop="households">
|
||||
<el-input v-model="item.workunit"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="防火职务：" prop="households">
|
||||
<el-input v-model="item.fireduties"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="督察职务：" prop="households">
|
||||
<el-input v-model="item.supervision"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="height: 40px">
|
||||
<div class="operate-button operate-edit">
|
||||
<i
|
||||
class="el-icon el-icon-folder-checked"
|
||||
@click="saveUser(item)"
|
||||
></i>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" round @click="addUser">添加</el-button>
|
||||
<div
|
||||
class="operate-button operate-delete"
|
||||
@click="deleteUser(item.id)"
|
||||
>
|
||||
<i class="el-icon el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
round
|
||||
@click="addUser"
|
||||
>添加</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMethodCommon, postMethodCommon } from '../../../api/common';
|
||||
export default {
|
||||
name: 'index',
|
||||
data(){
|
||||
return {
|
||||
listData : [],
|
||||
ruleForm:{
|
||||
import { waiData } from "../../../assets/xianjiewai";
|
||||
import { getMethodCommon, postMethodCommon } from "../../../api/common";
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
ruleForm: {},
|
||||
userListContainer: false,
|
||||
userList: [],
|
||||
mapboxMap: null,
|
||||
tableRandom: 1,
|
||||
currentStreetId: null,
|
||||
listQuery: {
|
||||
pageindex: 1,
|
||||
pagesize: 20,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
this.initMap();
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
//mapbox 2.0以后的版本需要accessToken 到官网注册下载
|
||||
this.$mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
this.mapboxMap = new this.$mapboxgl.Map({
|
||||
container: "mapContainer",
|
||||
style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
|
||||
center: [117.999325, 35.265961],
|
||||
zoom: 10,
|
||||
language: "zh-cmn",
|
||||
projection: "globe",
|
||||
});
|
||||
|
||||
},
|
||||
userListContainer:false,
|
||||
userList:[
|
||||
|
||||
],
|
||||
mapboxMap:null,
|
||||
tableRandom:1,
|
||||
currentStreetId:null,
|
||||
listQuery:{
|
||||
pageindex:1,
|
||||
pagesize:20
|
||||
}
|
||||
// 地图加载完毕事件
|
||||
let _this = this;
|
||||
|
||||
_this.mapboxMap.addControl(
|
||||
new this.$mapboxgl.NavigationControl(),
|
||||
"top-right"
|
||||
);
|
||||
|
||||
this.mapboxMap.on("load", function () {
|
||||
_this.loadGaoQingLayer();
|
||||
_this.loadMengban();
|
||||
_this.loadZhenJieLayer();
|
||||
_this.loadXianJieLayer();
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
getMethodCommon("/FireGrid/GetTowInfo", this.listQuery).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.listData = res.data;
|
||||
this.tableRandom = Math.random();
|
||||
}
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
this.getList();
|
||||
this.initMap();
|
||||
getUserlist(id) {
|
||||
this.currentStreetId = id;
|
||||
getMethodCommon("/FireGrid/GetInspectorByTown", { id: id }).then(
|
||||
(res) => {
|
||||
if (res.code == 200) {
|
||||
this.userList = res.result;
|
||||
this.userListContainer = true;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
methods:{
|
||||
initMap() {
|
||||
//mapbox 2.0以后的版本需要accessToken 到官网注册下载
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
this.mapboxMap = new this.$mapboxgl.Map({
|
||||
container: "mapContainer",
|
||||
center: [117.7075, 35.43222222],
|
||||
zoom: 9.7,
|
||||
maxZoom: 20,
|
||||
minZoom: 5,
|
||||
pitch: 0,
|
||||
style: "mapbox://styles/mapbox/streets-v11"
|
||||
});
|
||||
|
||||
// 地图加载完毕事件
|
||||
let _this = this;
|
||||
|
||||
_this.mapboxMap.addControl(new this.$mapboxgl.NavigationControl(), 'top-right');
|
||||
|
||||
this.mapboxMap.on("load", function () {
|
||||
|
||||
_this.mapboxMap.addSource('mapbox-dem', {
|
||||
'type': 'raster-dem',
|
||||
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
|
||||
'tileSize': 512,
|
||||
'maxzoom': 14
|
||||
deleteUser(id) {
|
||||
postMethodCommon("/FireGrid/DeleteInspectors", { id: id }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功！",
|
||||
});
|
||||
// add the DEM source as a terrain layer with exaggerated height
|
||||
_this.mapboxMap.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
|
||||
|
||||
})
|
||||
},
|
||||
getList(){
|
||||
getMethodCommon("/FireGrid/GetTowInfo",this.listQuery).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.listData = res.data;
|
||||
this.tableRandom = Math.random();
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserlist(id){
|
||||
this.currentStreetId = id;
|
||||
getMethodCommon("/FireGrid/GetInspectorByTown",{id:id}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.userList = res.result;
|
||||
this.userListContainer = true;
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteUser(id){
|
||||
postMethodCommon("/FireGrid/DeleteInspectors",{id:id}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"删除成功！"
|
||||
})
|
||||
this.getUserlist(this.currentStreetId);
|
||||
}
|
||||
})
|
||||
},
|
||||
saveUser(item){
|
||||
console.log("item",item);
|
||||
item.id = 0;
|
||||
item.townid = [this.currentStreetId];
|
||||
postMethodCommon("/FireGrid/AddInspector",item).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"添加成功！"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
addUser(){
|
||||
this.userList.push({});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.getUserlist(this.currentStreetId);
|
||||
}
|
||||
});
|
||||
},
|
||||
saveUser(item) {
|
||||
console.log("item", item);
|
||||
item.id = 0;
|
||||
item.townid = [this.currentStreetId];
|
||||
postMethodCommon("/FireGrid/AddInspector", item).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "添加成功！",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
addUser() {
|
||||
this.userList.push({});
|
||||
},
|
||||
loadMengban() {
|
||||
this.mapboxMap.addLayer({
|
||||
//蒙版图层 //通过边界数据反选 达到挖洞效果
|
||||
id: "mb-tag",
|
||||
type: "fill",
|
||||
source: {
|
||||
type: "geojson",
|
||||
data: {
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
|
||||
[-180, 90],
|
||||
[180, 90],
|
||||
[180, -90],
|
||||
[-180, -90],
|
||||
],
|
||||
waiData.DATA,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
paint: {
|
||||
"fill-color": "rgba(0,10,36,1)",
|
||||
// 'fill-opacity': 1 /* 透明度 */,
|
||||
},
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
});
|
||||
},
|
||||
loadGaoQingLayer() {
|
||||
this.mapboxMap.addLayer({
|
||||
id: "gaoqingyingxiang",
|
||||
type: "raster",
|
||||
source: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
paint: {},
|
||||
});
|
||||
},
|
||||
loadXianJieLayer() {
|
||||
this.mapboxMap.addLayer({
|
||||
id: "xianjie",
|
||||
type: "line",
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
source: {
|
||||
type: "geojson",
|
||||
data: "http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson",
|
||||
},
|
||||
paint: {
|
||||
"line-width": 2,
|
||||
"line-color": "orange",
|
||||
},
|
||||
});
|
||||
},
|
||||
loadZhenJieLayer() {
|
||||
this.mapboxMap.addSource("shp_1691822212", {
|
||||
type: "vector",
|
||||
scheme: "tms", //new
|
||||
tiles: [
|
||||
"http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
|
||||
],
|
||||
});
|
||||
this.mapboxMap.addLayer({
|
||||
id: "zhenjieline",
|
||||
type: "line",
|
||||
source: "shp_1691822212",
|
||||
"source-layer": "shp_1691822212",
|
||||
paint: {
|
||||
"line-color": "#0000ff",
|
||||
"line-width": 2,
|
||||
},
|
||||
});
|
||||
this.mapboxMap.addLayer({
|
||||
id: "zhenjiepoint",
|
||||
type: "symbol",
|
||||
source: "shp_1691822212",
|
||||
"source-layer": "shp_1691822212",
|
||||
layout: {
|
||||
"text-field": "{xzqmc}",
|
||||
"text-size": 18,
|
||||
},
|
||||
paint: {
|
||||
"text-color": "#000000", // 文本的颜色（可选，默认值为 #000000）
|
||||
"text-halo-color": "#FFFFFF",
|
||||
"text-halo-width": 1,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
padding:20px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.grid-list-container{
|
||||
width:50%;
|
||||
height:100%;
|
||||
background:#11192e;
|
||||
float:left;
|
||||
}
|
||||
.search-container{
|
||||
width:100%;
|
||||
height:50px;
|
||||
padding:10px 15px;
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list-box{
|
||||
width: calc( 100% - 0px);
|
||||
height: calc(100% - 150px);
|
||||
padding:20px;
|
||||
overflow: auto;
|
||||
.grid-list-container {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: #11192e;
|
||||
float: left;
|
||||
}
|
||||
.search-container {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.list-header{
|
||||
width:calc( 100% - 60px);
|
||||
padding:0px 20px;
|
||||
margin:0px auto;
|
||||
height:50px;
|
||||
background:#1c2746;
|
||||
}
|
||||
.page-container{
|
||||
width:100%;
|
||||
height:50px;
|
||||
padding-left:15px;
|
||||
.list-box {
|
||||
width: calc(100% - 0px);
|
||||
height: calc(100% - 150px);
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
width: calc(100% - 60px);
|
||||
padding: 0px 20px;
|
||||
margin: 0px auto;
|
||||
height: 50px;
|
||||
background: #1c2746;
|
||||
}
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.list-item{
|
||||
width:100%;
|
||||
height:50px;
|
||||
background:#1c2746;
|
||||
margin-bottom:12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color:#ccc;
|
||||
}
|
||||
.list-item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #1c2746;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.list-item-header{
|
||||
background:#121c38;
|
||||
}
|
||||
.list-item:hover{
|
||||
background:#261e31;
|
||||
}
|
||||
.list-item-header {
|
||||
background: #121c38;
|
||||
}
|
||||
.list-item:hover {
|
||||
background: #261e31;
|
||||
}
|
||||
|
||||
.list-item-box{
|
||||
float:left;
|
||||
width:20%;
|
||||
line-height:50px;
|
||||
text-align: center;
|
||||
}
|
||||
.list-item-box {
|
||||
float: left;
|
||||
width: 20%;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.operate-button{
|
||||
float:left;
|
||||
width:30px;
|
||||
height:30px;
|
||||
border-radius:4px;
|
||||
line-height:30px;
|
||||
margin:10px 5px;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
}
|
||||
.operate-edit{
|
||||
color:#32cd80;
|
||||
background:#32cd8065;
|
||||
}
|
||||
.operate-button {
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
line-height: 30px;
|
||||
margin: 10px 5px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.operate-edit {
|
||||
color: #32cd80;
|
||||
background: #32cd8065;
|
||||
}
|
||||
|
||||
.operate-delete{
|
||||
color:#fd5252;
|
||||
background:#fd52524f;
|
||||
}
|
||||
/* 地图 */
|
||||
.map-container{
|
||||
width:50%;
|
||||
float:left;
|
||||
height:100%;
|
||||
}
|
||||
.operate-delete {
|
||||
color: #fd5252;
|
||||
background: #fd52524f;
|
||||
}
|
||||
/* 地图 */
|
||||
.map-container {
|
||||
width: 50%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 人员 */
|
||||
.grider-list-container{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
right:0px;
|
||||
width:26%;
|
||||
float:right;
|
||||
height: calc( 100% - 40px);
|
||||
background:#11192e;
|
||||
padding:15px;
|
||||
overflow-y:auto;
|
||||
z-index:99999;
|
||||
}
|
||||
/* 人员 */
|
||||
.grider-list-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0px;
|
||||
width: 26%;
|
||||
float: right;
|
||||
height: calc(100% - 40px);
|
||||
background: #11192e;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.grid-info-contianer{
|
||||
width:100%;
|
||||
height:120px;
|
||||
padding:15px;
|
||||
background:#1c2746;
|
||||
color:#fff;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
.grid-info-contianer {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding: 15px;
|
||||
background: #1c2746;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid-list-box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 135px);
|
||||
overflow:auto;
|
||||
}
|
||||
.grid-list-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 135px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.grider-list-item{
|
||||
width: 100%;
|
||||
background:#1c2746;
|
||||
margin:0px auto;
|
||||
padding:30px 15px;
|
||||
border-radius:6px;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
.grider-list-item {
|
||||
width: 100%;
|
||||
background: #1c2746;
|
||||
margin: 0px auto;
|
||||
padding: 30px 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
|
||||
margin-bottom:8px;
|
||||
}
|
||||
::v-deep .el-form-item--mini.el-form-item,
|
||||
.el-form-item--small.el-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
font-weight: 400;
|
||||
color:#ccc;
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
font-weight: 400;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
color:#ccc;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: none;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
</style>
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
|
||||
inset -1px -1px 0 rgba(0, 0, 0, 0.07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue