绘图点吸附、影像更换、遮罩添加

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+.history/
 .svn
 # local env files
 .env.local

package-lock.json

@@ -9642,6 +9642,14 @@
         }
       }
     },
+    "mapbox-gl-draw-snap-mode": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/mapbox-gl-draw-snap-mode/-/mapbox-gl-draw-snap-mode-0.2.0.tgz",
+      "integrity": "sha512-c6u8wL1cHgzFAAi6wtuoJVBKAF4qzGorpCn4IeninkzkUaYGVrNtUNPky3ECx9C3P9QbNOwD60j8bYj5wQI8hA==",
+      "requires": {
+        "@turf/turf": "^6.5.0"
+      }
+    },
     "mapbox-gl-utils": {
       "version": "0.39.0",
       "resolved": "https://registry.npmmirror.com/mapbox-gl-utils/-/mapbox-gl-utils-0.39.0.tgz",

package.json

@@ -19,7 +19,8 @@
     "element-ui": "^2.15.8",
     "jquery": "^3.6.4",
     "less-loader": "^6.0.0",
-    "mapbox-gl": "^2.13.0",
+    "mapbox-gl": "^2.0.0",
+    "mapbox-gl-draw-snap-mode": "^0.2.0",
     "mapbox-gl-utils": "^0.39.0",
     "qs": "^6.11.1",
     "terraformer-wkt-parser": "^1.2.1",

public/index.html

@@ -20,7 +20,7 @@
     <script type="text/javascript" src="./lib/mars3d/mars3d.js"></script>
     <link rel='stylesheet' type='text/css' href="./lib/mars3d/mars3d.css" />
     <link rel='stylesheet' type='text/css' href="./lib/Cesium/Widgets/widgets.css" />
-    <title>费县森林防灭火数据管理系统</title>
+    <title>沂水县森林防灭火数据管理系统</title>
     <script src="js/jquery.min.js"></script>
     <script src="js/shp.min.js"></script>
     

public/settings/config.js

@@ -1,6 +1,6 @@
 const CONFIG = {
-    // TITLE: (localStorage.getItem("areaCNName") || '费县') + "森林防灭火数据管理系统",
-    TITLE:"费县森林防灭火数据管理系统",
+    // TITLE: (localStorage.getItem("areaCNName") || '平邑县') + "森林防灭火数据管理系统",
+    TITLE:"沂水县森林防灭火数据管理系统",
     LOGO_URL: "/images/img25.png",
     BASE_API: "127.0.0.1",
     MAPBOX_OPTIONS: {

src/api/Datadetails.js

@@ -37,3 +37,18 @@ export const getGeomData = (tableValue) => {
         method: 'get'
     })
 }
+export const addLayer = (data) => {
+    return request({
+        url: '/geoserver/createDataStore',
+        method: 'post',
+        data:data
+    })
+}
+// 下载shp
+export const downLoadShpZip = (tableValue) => {
+    return request({
+        url: '/geoserver/downLoadShpZip/'+ tableValue,
+        method: 'get'
+    })
+}
+

src/api/datamange.js

@@ -42,7 +42,7 @@ export const getLayerStyle = () => {
         method: 'get'
     })
 }
-// 样式编辑
+// 样式添加
 export const saveLayerStyle = (params) => {
     return request({
         url: '/geoserver/saveLayerStyle',
@@ -50,6 +50,36 @@ export const saveLayerStyle = (params) => {
         data: params
     })
 }
+// 样式编辑
+export const updateLayerStyle = (params) => {
+    return request({
+        url: '/geoserver/updateLayerStyle',
+        method: 'post',
+        data: params
+    })
+}
+// 删除样式
+export const deleteLayerStyle = (tableName) => {
+    return request({
+        url: '/geoserver/deleteLayerStyle/' + tableName,
+        method: 'get'
+    })
+}
+// 发布样式
+export const publishLayerPost = (params) => {
+    return request({
+        url: '/geoserver/publishLayer',
+        method: 'post',
+        data: params
+    })
+}
+// 获取样式列表
+export const getLayerStyleAndType = () => {
+    return request({
+        url: '/geoserver/getLayerStyleAndType',
+        method: 'get'
+    })
+}
 // 服务名校验
 export const checkServerName = (name) => {
     return request({
@@ -57,6 +87,13 @@ export const checkServerName = (name) => {
         method: 'get'
     })
 }
+// 表名效验
+export const checkTableName = (name) => {
+    return request({
+        url: '/geoserver/checkTableName/' + name,
+        method: 'get'
+    })
+}
 // 文件上传
 export const uploadFile = (formData) => {
     return request({

src/api/marsinterface.js

@@ -19,7 +19,7 @@ export const createApplication = (data) => {
 // 获取树结构
 export const getApplicationInfo = () => {
     return request({
-        url: '/applicationMars/getApplicationInfo',
+        url: '/applicationMars/getApplicationInfo/'+localStorage.getItem('areaENName') ,
         method: 'get',
     })
 }
@@ -33,7 +33,7 @@ export const applicationdelete = (id) => {
 //获取所有分类
 export const getProjectName = (id) => {
     return request({
-        url: '/applicationMars/getProjectName',
+        url: '/applicationMars/getProjectName/'+localStorage.getItem('areaENName'),
         method: 'get',
     })
 }
@@ -100,4 +100,19 @@ export const getGeomData = (tableValue) => {
         method: 'get'
     })
 }
+// 获取
+export const getShpRelation = (tableName) => {
+    return request({
+        url: '/geoserver/getShpRelation/'+ tableName,
+        method: 'get'
+    })
+}
+// 获取字段值
+export const getColumnByName = (data) => {
+    return request({
+        url: '/geoserver/getColumnByName',
+        method: 'post',
+        data
+    })
+}
 

src/api/monitor.js

@@ -33,6 +33,34 @@ export const addGrid = (data) =>{
         data: data
     })
 }
+export const editGrid = (data) =>{
+    return request({
+        url: '/api/Grid/EditGrid',
+        method: 'post',
+        data: data
+    })
+}
+export const DeleteGrid = (data)=>{
+    return  request({
+        url: '/api/Grid/DeleteGrid',
+        method: 'post',
+        params: data
+    })
+}
+export const getGridUserInfo = (data)=>{
+    return  request({
+        url: '/api/Grid/LoadGridById',
+        method: 'post',
+        params: data
+    })
+}
+export const getWGYTypes = (data)=>{
+    return  request({
+        url: '/api/Grid/GetWGYTypes',
+        method: 'get',
+        params: data
+    })
+}
 
 
 

src/api/urlPatterns.js

@@ -1,16 +1,28 @@
 export const globalApi = {
     // 本地测试
-    // BASE_URL: "http://192.168.10.136:8909", //测试 卢国栋
+    // BASE_URL: "http://192.168.10.113:8909", //测试 卢国栋
     // GEOSERVER_URL: "http://192.168.10.136:8180",
-    // netBASE_URL: "http://123.132.248.154:9111", //测试.net
+    // netBASE_URL: "http://123.132.248.154:9224", //测试.net
 
     // 测试服务器
-    BASE_URL: "http://123.132.248.154:9217", //测试 服务器
-    GEOSERVER_URL:"http://123.132.248.154:9205",
-    netBASE_URL: "http://123.132.248.154:9224", //测试.net
+    // BASE_URL: "http://123.132.248.154:9217", //测试 服务器
+    // GEOSERVER_URL:"http://123.132.248.154:9205",
+    // netBASE_URL: "http://123.132.248.154:9224", //测试.net
+
+
+    // 1240 测试服务器
+    // BASE_URL: "http://123.132.248.154:9236", //测试 服务器
+    // GEOSERVER_URL:"http://123.132.248.154:9235",
+    // netBASE_URL: "http://123.132.248.154:9231", //测试.net
+
 
     //正式环境
     // BASE_URL: "http://223.99.16.253:9006", // java
     // GEOSERVER_URL:"http://223.99.16.253:9007", // geoserver
     // netBASE_URL: "http://223.99.16.253:9001", //.net
+    
+    // 沂水县
+    BASE_URL: "http://60.217.22.153:9006", // java
+    GEOSERVER_URL:"http://60.217.22.153:9007", // geoserver
+    netBASE_URL: "http://60.217.22.153:9001", //.net
 }

src/router/index.js

@@ -35,13 +35,13 @@ export const constantRoutes = [
                 show: false, //在导航栏是否显示
                 component: () => import('@/views/data_draw/index'),
                 meta: { name: "数据采集", iconfont: "/images/img6.png" },
-            },{
+            }, {
                 path: "/excel_data_upload",
                 name: "excel_data_upload",
                 show: false, //在导航栏是否显示
                 component: () => import('@/views/data_draw/excel_data_upload'),
                 meta: { name: "Excel", iconfont: "/images/img6.png" },
-            },{
+            }, {
                 path: "/shp_data_upload",
                 name: "shp_data_upload",
                 show: false, //在导航栏是否显示
@@ -54,32 +54,32 @@ export const constantRoutes = [
                 show: false,//在导航栏是否显示
                 component: () => import('@/views/big_scene/BigScene'),
                 meta: { name: "监控中心", iconfont: "/images/img7.png" },
-            },{
+            }, {
                 path: "/monitor",
                 name: "monitor",
-                show: true,//在导航栏是否显示
+                show: false,//在导航栏是否显示
                 component: () => import('@/views/monitor/index'),
                 meta: { name: "监控中心", iconfont: "/images/img7.png" },
-            },{
+            }, {
                 path: "/upload_type_selected",
                 name: "upload_type_selected",
                 show: true, //在导航栏是否显示
                 component: () => import('@/views/data_manage/upload_type_selected'),
                 meta: { name: "数据上传", iconfont: "/images/img6.png" },
-            },{
+            }, {
                 path: "/layer_style_config",
                 name: "layer_style_config",
                 show: false, //在导航栏是否显示
                 component: () => import('@/views/data_manage/yangshi'),
                 meta: { name: "样式配置", iconfont: "/images/img6.png" },
             },
-            // {
-            //     path: "/grid",
-            //     name: "Grid",
-            //     show: true,//在导航栏是否显示
-            //     component: () => import('@/views/grid'),
-            //     meta: { name: "网格员管理", iconfont: "/images/img9.png" },
-            // },
+            {
+                path: "/grid",
+                name: "Grid",
+                show: false,//在导航栏是否显示
+                component: () => import('@/views/grid'),
+                meta: { name: "网格员管理", iconfont: "/images/img9.png" },
+            },
             {
                 path: "/burst-upload",
                 name: "NewBurstUpload",
@@ -108,6 +108,13 @@ export const constantRoutes = [
                 show: true,//在导航栏是否显示
                 meta: { name: "应用管理", iconfont: "/images/img9.png" },
             },
+            {
+                path: "/layer_style",
+                name: "layer_style",
+                component: () => import('@/views/layer_style/layer'),
+                show: true,//在导航栏是否显示
+                meta: { name: "图层样式", iconfont: "/images/img10.png" },
+            },
             {
                 path: "/mars3dcopy",
                 name: "mars3dcopy",
@@ -149,19 +156,30 @@ export function resetRouter() {
 }
 
 // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
-
+// router.beforeEach((to, from, next) => {
+//     // console.log(to);
+//     if (to.path == '/') {
+//         next();
+//     } else {
+//         let token = localStorage.getItem('X-Token');
+//         // console.log(!token);
+//         if (!token) {
+//             next('/');
+//         } else {
+//             next();
+//         }
+//     }
+// });
 router.beforeEach((to, from, next) => {
-    // console.log(to);
-    if (to.path == '/') {
-        next();
+    let token = localStorage.getItem('X-Token');
+    let hrefIdx = window.location.href.indexOf('token='); // url中是否携带token
+    if (hrefIdx > -1 && (token === '' || token === undefined || token === null)) { // 如果url携带token,并且没有登录后的用户信息
+        let token = window.location.href.slice(hrefIdx + 3); // 截取token
+        let defaultUrl = "/dashboard";
+            next(defaultUrl);
     } else {
-        let token = localStorage.getItem('X-Token');
-        // console.log(!token);
-        if (!token) {
-            next('/');
-        } else {
-            next();
-        }
+        next()
     }
-});
+})
+
 export default router

src/views/ServiceList/components/ditu.vue

@@ -5,6 +5,7 @@
 <script>
 import mapboxgl from "mapbox-gl";
 import { globalApi } from "../../../api/urlPatterns.js";
+import { waiData } from "../../data_draw/lib/xianjiewai";
 import { getLayer, getGeomData } from "../../../api/Datadetails";
 mapboxgl.accessToken =
   "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
@@ -56,18 +57,111 @@ export default {
       let _this = this;
       this.map = new mapboxgl.Map({
         container: this.$refs.datamap,
-        style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
-        center: [117.977325, 35.265961],
-        zoom: 14,
+        style: {
+            glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+            "version": 8,
+            "sources": {
+                "raster-tiles": {
+                    "type": "raster",
+                    "tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
+                    "tileSize": 256,
+                  }
+            },
+            "layers": [
+                {
+                    "id": "tdt-img-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                },
+            ]
+        },
+        center: [118.628869, 35.895011],
+        zoom: 8.4,
+        maxZoom: 20,
+        minZoom: 5,
+        pitch: 0,
         language: "zh-cmn",
         projection: "globe",
       });
       this.map.on("load", () => {
+        _this.loadGaoQingLayer();
+        _this.loadDianZiLayer();
+
         _this.addGeoJsonLayer(url, jwd);
+        _this.loadMengban();
+        
       });
     },
+    loadDianZiLayer() {
+      this.map.addLayer({
+        id: "tiandituzhuji",
+        type: "raster",
+        source: {
+          type: "raster",
+          tiles: [
+            "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9",
+          ],
+          tileSize: 256,
+        },
+        layout: {
+          visibility: "visible",
+        },
+      });
+    },
+    loadGaoQingLayer() {
+        this.map.addLayer({
+          'id': 'gaoqingyingxiang',
+          'type': 'raster',
+          'source': {
+            'type': 'raster',
+            'tiles': ["http://60.217.22.153:9007/geoserver/yishui/wms?service=WMS&version=1.1.0&request=GetMap&layers=yishui:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
+            'tileSize': 256
+          },
+          'layout': {
+            'visibility': 'visible'
+          },
+          'paint': {
+
+          }
+        });
+      },
     // 'http://localhost:8080/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png'
     // http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/ksp:shp_1681969689@EPSG:4326@png
+    loadMengban(){
+        this.map.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': '#1a274b',
+            'fill-opacity': 1 /* 透明度 */,
+          },
+          layout: {
+            visibility: 'visible',
+          },
+        });
+      },
     addGeoJsonLayer(url, jwd) {
       // console.log(Object(url));
       this.map.addSource("wmsSource", {
@@ -94,7 +188,7 @@ export default {
       });
       this.map.flyTo({
         center: [Number(jwd[0]), Number(jwd[1])],
-        zoom: 10,
+        zoom: 9.2,
         speed: 5,
       });
     },

src/views/data_draw/widget/Editor.vue

@@ -25,7 +25,7 @@
           <div class="layer-container">
             <div class="layer-button" @click="toggleLayer('tiandituzhuji')" :style="{'background':layerShow['tiandituzhuji'] == 'visible'?'#108eff':'none','color':layerShow['tiandituzhuji'] == 'visible'?'#fff':'#108eff'}"> <i class="el-icon el-icon-circle-check"></i> 电子底图</div>
             <div class="layer-button"  @click="toggleLayer('gaoqingyingxiang')" :style="{'background':layerShow['gaoqingyingxiang'] == 'visible'?'#108eff':'none','color':layerShow['gaoqingyingxiang'] == 'visible'?'#fff':'#108eff'}"> <i class="el-icon el-icon-circle-check"></i> 高清影像</div>
-            <div class="layer-button"  @click="toggleLayer('xianjie')" :style="{'background':layerShow['xianjie'] == 'visible'?'#108eff':'none','color':layerShow['xianjie'] == 'visible'?'#fff':'#108eff'}"> <i class="el-icon el-icon-circle-check"></i> 费县县界</div>
+            <div class="layer-button"  @click="toggleLayer('xianjie')" :style="{'background':layerShow['xianjie'] == 'visible'?'#108eff':'none','color':layerShow['xianjie'] == 'visible'?'#fff':'#108eff'}"> <i class="el-icon el-icon-circle-check"></i> 平邑县县界</div>
           </div>
           <div id="mapEditorContainer" class="map-container">
 

src/views/grid/widget/validate.js

@@ -0,0 +1,28 @@
+const validateMobile = function (rule, value, callback) {
+    let newValue = value.replace(/[^0-9]/gi, '')
+    if (value !== newValue) {
+      callback(new Error('请输入正确的手机号'))
+    } else if (newValue.length !== 11) {
+      callback(new Error('请输入正确的手机号'))
+    } else {
+      callback()
+    }
+  }
+  const validID = function(rule, value, callback) {
+    // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+    let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
+    if (reg.test(value)) {
+      callback();
+    } else {
+      callback(new Error("请输入正确的身份证号码"));
+    }
+  }
+  var validateStock = (rule, value, callback) => {
+    if (!value || value == 0) {
+      callback(new Error("不能为空"));
+    } else {
+      callback();
+    }
+  };
+
+  export { validateMobile ,validID,validateStock}

src/views/layer_style/layer.vue

@@ -0,0 +1,696 @@
+<template>
+    <div class="grid-container">
+        <div class="operate-container">
+            <!-- <el-input type="text" size="mini" style="width:300px;margin-right:14px;" placeholder='请输入搜索关键字'></el-input> -->
+            <!-- <el-button icon="el-icon-search" size="mini" type="default">查询</el-button> -->
+            <el-button icon="el-icon-plus" size="mini" type="primary" @click="addDialog">添加</el-button>
+            <el-button icon="el-icon-edit" size="mini" type="primary" @click="createDialog">编辑</el-button>
+            <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteWg">删除</el-button>
+        </div>
+        <el-table :data="tableData" size="mini" height=" " border style="width: 100%;height: 65%; background: rgb(26, 39, 75);;"
+            @selection-change="handleSelectionChange">
+
+            <el-table-column type="selection" width="55">
+            </el-table-column>
+
+            <el-table-column prop="styleName" label="样式名称">
+            </el-table-column>
+
+            <el-table-column prop="typeName" label="数据格式">
+            </el-table-column>
+
+        </el-table>
+        <!-- <div class="page-container">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :current-page="listQuery.pageNum" :page-sizes="[20,50,100, 200, 300, 400]"
+                :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+        </div> -->
+        <el-dialog :title="titleStr" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+            <!-- ------------------------------------------- -- 配置页------------------------------------------------------------------------------- -->
+            <div class="tuceng_ys">
+                <div class="tuceng_ys_son">
+                    <el-form ref="forms" :model="form" label-width="80px" size="mini">
+                        <template v-if="typeName == 'add'">
+                            <el-form-item label="样式名称">
+                                <el-input style="width: 300px" v-model="form.styleName"></el-input>
+                            </el-form-item>
+                            <el-form-item label="数据格式">
+                                <el-select style="width: 300px" v-model="form.type" placeholder="请选择数据格式">
+                                    <el-option label="线" value="1"></el-option>
+                                    <el-option label="面" value="2"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </template>
+                        <template v-else>
+                            <el-form-item label="样式名称">
+                                <el-input style="width: 300px" v-model="form.styleName" disabled></el-input>
+                            </el-form-item>
+                            <el-form-item label="数据格式">
+                                <el-input style="width: 300px" v-model="form.typeName" disabled></el-input>
+                            </el-form-item>
+                        </template>
+                       
+
+                        <el-form-item v-show="form.type == 2" label="填充颜色">
+                            <el-color-picker v-model="form.fillColor"></el-color-picker>
+                        </el-form-item>
+                        <el-form-item v-show="form.type == 2" label="透明度">
+                            <el-input style="width: 300px" v-model="form.fillOpacity"></el-input>
+                        </el-form-item>
+                        <el-form-item v-show="form.type == 2 || form.type == 1" label="线条颜色">
+                            <el-color-picker v-model="form.strokeColor"></el-color-picker>
+                        </el-form-item>
+                        <el-form-item v-show="form.type == 2 || form.type == 1" label="线条宽度">
+                            <el-input style="width: 300px" v-model="form.strokeWidth"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="onSubmit" v-if="typeName == 'add'">创建</el-button>
+                            <el-button type="primary" @click="onCreate" v-else>编辑</el-button>
+                            <el-button @click="dialogVisible = false">取消</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import { getMethodCommon } from '../../api/Api'
+    import { saveLayerStyle,getLayerStyleAndType ,deleteLayerStyle,updateLayerStyle} from "../../api/datamange";
+
+    export default {
+        name: 'index',
+        data() {
+            return {
+                titleStr: '添加',
+                rules: {
+
+                },
+                dialogVisible: false,
+                total: 100,
+                listQuery: {
+                    pageSize: 10,
+                    pageNum: 1,
+                },
+                data: null,
+                defaultProps: {
+                    children: 'child',
+                    label: 'areaName'
+                },
+                tableData: [
+                    {
+                        name: "样式一",
+                        geshi: '面',
+                        toumingdu: '0.1',
+                        tianchong: '0.1',
+                        kuandu: '0.1',
+                        yanse: '0.1',
+                    }
+                ],
+                checkTreeId: null,
+                selectIdList: [],
+                WGYTypesList: [],
+                typeName: 'add',
+                form: {
+                    type: "1",
+                    styleName: "",
+                    fillColor: "",
+                    fillOpacity: "",
+                    strokeColor: "",
+                    strokeWidth: "",
+                },
+                selectItem:[]
+            }
+        },
+        created() {
+           
+        },
+        mounted() {
+            this.getList()
+        },
+        methods: {
+            getList(){
+                getLayerStyleAndType().then((res) => {
+                    console.log(res)
+                    var list = res.data.data.data
+                    list.forEach(element => {
+                        element.typeName = element.type == 1 ? '线' : '面'
+                    });
+                    this.tableData= list;
+            });
+            },
+            onSubmit() {
+                // console.log(this.form);
+                var _this = this
+                if (!/[\u4E00-\u9FA5]/g.test(this.form.styleName)) {
+                    saveLayerStyle(this.form).then((res) => {
+                        if (res.data.code == 200) {
+                            this.$message.success("创建成功");
+                            this.dialogVisible = false
+                            _this.getList()
+                        } else {
+                            this.$message.error("创建失败");
+                        }
+                        // console.log(res);
+                    });
+                } else {
+                    this.$message.error('不能输入中文')
+                }
+            },
+            handleSizeChange(e) {
+                this.listQuery.pageSize = e;
+                this.getList();
+            },
+            handleCurrentChange(e) {
+                this.listQuery.pageNum = e;
+                this.getList();
+            },
+            submitForm() {
+                var _this = this
+                console.log(this.ruleForm)
+                this.ruleForm.pId = this.checkTreeId
+                this.ruleForm.households = Number(this.ruleForm.households)
+                this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
+                this.$refs['ruleForm'].validate((valid) => {
+                    if (valid) {
+                        addGrid(_this.ruleForm).then(res => {
+                            if (res.data.code == 200) {
+                                this.$message.success(res.data.msg);
+                                _this.dialogVisible = false
+                                _this.getUserList({ id: _this.checkTreeId });
+                            }
+                        })
+                    }
+                })
+            },
+            createForm() {
+                var _this = this
+                console.log(this.ruleForm)
+                this.ruleForm.areaId = this.selectIdList[0]
+                this.ruleForm.pId = this.checkTreeId
+                this.ruleForm.households = Number(this.ruleForm.households)
+                this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
+                this.$refs['ruleForm'].validate((valid) => {
+                    if (valid) {
+                        editGrid(_this.ruleForm).then(res => {
+                            if (res.data.code == 200) {
+                                this.$message.success(res.data.msg);
+                                _this.dialogVisible = false
+                                _this.getUserList({ id: _this.checkTreeId });
+                            }
+                        })
+                    }
+                })
+            },
+            handleSelectionChange(e) {
+                this.selectItem = e
+                console.log("handleSelectionChange",e);
+                this.selectIdList = []
+                e.forEach(item => {
+                    this.selectIdList.push(item.styleName)
+                })
+            },
+            // 关闭弹窗
+            handleClose(done) {
+                done();
+            },
+            addDialog() {
+                this.dialogVisible = true;
+                this.titleStr = '添加'
+                this.typeName = 'add'
+                this.form = {
+                    type: "1",
+                    styleName: "",
+                    fillColor: "",
+                    fillOpacity: "",
+                    strokeColor: "",
+                    strokeWidth: "",
+                }
+
+            },
+            createDialog() {
+                if (this.selectIdList.length == 0) {
+                    this.$message.warning('至少选中一个进行编辑');
+                    return
+                } else if (this.selectIdList.length > 1) {
+                    this.$message.warning('只能选中一个进行编辑');
+                    return
+                }
+
+                var _this = this
+                this.dialogVisible = true;
+                this.titleStr = '编辑'
+                this.typeName = 'create'
+                this.form = this.selectItem[0]
+                this.form.type = this.form.type.toString()
+              
+            },
+            deleteWg() {
+                var _this = this
+                if (this.selectIdList.length == 0) {
+                    this.$message.warning('至少选中一个进行删除');
+                    return
+                } else if (this.selectIdList.length > 1) {
+                    this.$message.warning('只能选中一个进行删除');
+                    return
+                }
+                this.$confirm("确认删除？")
+                    .then(() => {
+                        console.log("selectIdList",this.selectIdList);
+                        deleteLayerStyle(this.selectIdList[0]).then(res => {
+                            if (res.data.code == 200) {
+                                this.$message.success(res.data.msg);
+                                _this.dialogVisible = false
+                                _this.getList()
+                            }
+                        })
+                    })
+                    .catch((_) => { });
+
+            },
+            onCreate(){
+                updateLayerStyle(this.form).then((res) => {
+                        if (res.data.code == 200) {
+                            this.$message.success("编辑成功");
+                            this.dialogVisible = false
+                            _this.getList()
+                        } else {
+                            this.$message.error("编辑失败");
+                        }
+                        // console.log(res);
+                    });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .page-container {
+        width: 100%;
+        height: 40px;
+        padding: 15px;
+    }
+
+    ::v-deep .el-pagination__total {
+        color: #fff;
+    }
+
+    ::v-deep .el-pagination__jump {
+        color: #fff;
+    }
+
+    ::v-deep .el-pagination button:disabled {
+        background: none;
+    }
+
+
+
+    .tuceng_ys ::v-deep.tuceng_ys_son .el-input__inner {
+        background-color: transparent;
+        border: 1px solid #10a2e1;
+        color: #fff;
+    }
+
+    .tuceng_ys ::v-deep.tuceng_ys_son .el-form-item__label {
+        color: #10a2e1;
+    }
+
+    .tuceng_ys ::v-deep.tuceng_ys_son .el-color-picker__trigger {
+        width: 300px;
+    }
+
+    ::v-deep .el-checkbox {
+        margin-top: 4px !important;
+    }
+
+    ::v-deep .el-checkbox__inner {
+        background-color: transparent;
+        border: 0.0625rem solid #00b2ff;
+        color: #fff;
+        border-radius: 0px
+    }
+
+    ::v-deep .el-dialog__title {
+        color: #fff;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-dialog {
+        background: rgba(0, 0, 0, 0.7);
+        color: #fff;
+    }
+
+    .operate-container {
+        text-align: right;
+        width: 100%;
+        height: 44px;
+        border-bottom: 1px solid #108eff;
+        margin-bottom: 10px;
+    }
+
+    .grid-container {
+        width: calc(100% - 0px);
+        min-height: 500px;
+        padding: 40px;
+        padding-bottom: 0;
+    }
+
+    /*  */
+    ::v-deep .el-tree {
+
+        color: #ffffff;
+        /* // 整体背景透明 */
+        background: rgba(0, 0, 0, 0);
+    }
+
+    ::v-deep .el-checkbox__inner {
+        /*// checkbox 背景透明  */
+        background: rgba(0, 0, 0, 0);
+    }
+
+    ::v-deep .el-tree-node__content:hover {
+        /* // hover 节点背景色，否则是白色 */
+        background: rgba(104, 147, 215, 0.4);
+    }
+
+    ::v-deep .el-tree-node:focus>.el-tree-node__content {
+        /*  // focus 节点背景透明，否则是白色 */
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+
+    ::v-deep .el-table {
+        background: none;
+    }
+
+    ::v-deep .el-form-item__label {
+        /* padding:0px; */
+    }
+
+    ::v-deep .el-form-item {
+        /* margin-bottom:5px; */
+    }
+
+
+    ::v-deep .el-table__fixed-right::before,
+    .el-table__fixed::before {
+        height: 0px;
+    }
+
+    ::v-deep .el-table::before {
+        height: 0px;
+    }
+
+    ::v-deep .el-form--inline {
+        height: 30px;
+    }
+
+    ::v-deep .mapboxgl-ctrl {
+        display: block;
+    }
+
+    ::v-deep .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+        border-bottom: 1px solid hsl(240, 100%, 37%, 0.2);
+    }
+
+
+    ::v-deep .el-input__inner {
+        background-color: transparent;
+        border: 0.0625rem solid #00b2ff;
+        color: #fff;
+        border-radius: 0px;
+    }
+
+    ::v-deep .el-button {
+        border-radius: 0px;
+    }
+
+    ::v-deep .el-form-item__label {
+        color: #00b2ff;
+        /* line-height: 2.1875rem; */
+    }
+
+    ::v-deep .el-button--small {
+        padding: 0.625rem 2.1875rem;
+    }
+
+    ::v-deep .el-form--inline .el-form-item {
+        /* margin-left: 1.875rem; */
+    }
+
+ 
+
+    /* “表格内背景颜色“ */
+    ::v-deep.el-table th,
+    ::v-deep.el-table tr,
+    ::v-deep.el-table td {
+        background-color: transparent !important;
+    }
+
+    /*  按钮样式修改 */
+    ::v-deep .el-button--success {
+        background: #266a94;
+        color: #00f261;
+        border: 0;
+    }
+
+    ::v-deep .el-button--info {
+        background: #482c27;
+        color: #8ac2da;
+        border: 0;
+    }
+
+    ::v-deep.el-button--primary {
+        background: #266a94;
+        color: #8ac2da;
+        border: 0;
+    }
+
+    ::v-deep.el-button--primary {
+        background: #578ef0;
+        color: #fff;
+        border: 0;
+    }
+
+    /*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
+    ::v-deep.el-table tbody tr:hover>td {
+        background-color: black !important;
+    }
+
+    /* 第一个 dialog修改  */
+    ::v-deep.dialog_one .el-dialog {
+        background: #266a94 !important;
+        border: 1px solid #10a2e1;
+    }
+
+    ::v-deep.dialog_one .el-dialog__title {
+        color: #00b2ff;
+        font-size: 2rem;
+    }
+
+    ::v-deep.dialog_one .el-dialog__header {
+        text-align: center;
+    }
+
+    /* 第二个 dialog 修改 */
+    ::v-deep.dialog_two .el-dialog {
+        background: rgba(37, 61, 75, 0.7) !important;
+        border: 1px solid #797979;
+    }
+
+    ::v-deep.dialog_two .el-dialog__body {
+        padding: 10px 0;
+    }
+
+    ::v-deep.dialog_two .el-dialog__header {
+        padding: 0;
+    }
+
+
+    ::v-deep .el-table__cell {
+        background: none;
+        padding: 0px;
+        font-size: 14px;
+        color: #ccc;
+    }
+
+    ::v-deep .cell {
+        padding: 0px;
+        height: 40px;
+        line-height: 40px;
+        /* background:hsl(212, 43%, 49%,0.5); */
+        text-align: center;
+        font-size: 12px;
+    }
+
+    ::v-deep .number {
+        background: none;
+        color: #fff;
+    }
+
+    ::v-deep .btn-next {
+        background: none;
+        color: #fff;
+    }
+
+    ::v-deep .btn-prev {
+        background: none;
+        color: #fff;
+    }
+
+    ::v-deep .el-pagination__total {
+        color: #fff;
+    }
+
+    ::v-deep .el-pagination__jump {
+        color: #fff;
+    }
+
+    ::v-deep .el-pagination button:disabled {
+        background: none;
+    }
+
+    ::v-deep .disabled {
+        background: none;
+    }
+
+    ::v-deep .el-descriptions__body {
+        background: none;
+        color: #ccc;
+    }
+
+    ::v-deep .el-descriptions-row {
+        background: none;
+        color: #eee;
+    }
+
+
+    ::v-deep .el-descriptions-item__label {
+        background: hsl(212, 43%, 49%, 0.5);
+        color: #eee;
+        font-weight: bold;
+    }
+
+    ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
+        border-color: hsl(212, 43%, 49%, 1);
+    }
+
+
+
+    ::v-deep .el-checkbox {
+        margin-top: 14px;
+    }
+
+    ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
+        overflow-x: auto;
+        overflow-y: auto;
+    }
+
+    ::v-deep .el-table--scrollable-x .el-table__body-wrapper {}
+
+    ::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
+        display: block !important;
+        z-index: 99999999999999;
+    }
+
+    /* 滑道样式 */
+    ::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
+        width: 0px;
+        height: 10px;
+        background: #304156;
+        border-radius: 6px;
+        z-index: 99999999999999;
+    }
+
+    /* 定义滑块的样式 */
+    ::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        border-radius: 0px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background-color: rgba(0, 0, 0, 0.3);
+        z-index: 99999999999999;
+    }
+
+    /* 定义滑块鼠标移入时的样式 */
+    ::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover {
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background-color: rgba(0, 0, 0, 0.4);
+        z-index: 99999999999999;
+    }
+
+    ::v-deep .el-pagination__jump {
+        margin-left: 0px;
+    }
+
+
+    ::v-deep .el-pagination .el-select {
+        width: 80px;
+    }
+
+    ::v-deep .el-pager li {
+        width: 10px !important;
+    }
+
+    ::v-deep .el-pager .number {
+        padding: 0px;
+        width: 10px !important;
+    }
+
+    ::v-deep .el-pagination .el-input__inner {
+        width: 80px;
+    }
+
+    ::v-deep .mapboxgl-ctrl {
+        /* display:none; */
+    }
+
+    ::v-deep .mapboxgl-ctrl-attrib-inner {
+        display: none;
+    }
+
+    ::v-deep .el-form-item__content .is-disabled .el-input__inner {
+        background-color: none !important;
+    }
+
+    ::v-deep .mapboxgl-map canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    ::v-deep .el-pager li {
+        min-width: 25px !important;
+    }
+
+    ::v-deep .el-table--border::after,
+    .el-table--group::after,
+    .el-table::before {
+        background: none;
+    }
+
+    ::v-deep .el-table--border,
+    .el-table--group {
+        border: 0px;
+    }
+
+    ::v-deep .el-table--border th.el-table__cell,
+    .el-table__fixed-right-patch {
+        /* border:0px; */
+    }
+
+    ::v-deep .el-table--border .el-table__cell,
+    .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
+        border: 0px;
+    }
+
+    .page-container {
+        width: 100%;
+        height: 60px;
+        padding: 15px 0px;
+        border-top: 1px solid #ccc;
+    }
+</style>

src/views/login/index.vue

@@ -40,6 +40,7 @@ export default {
           // console.log(res);
           // localStorage.setItem("X-Token", res.data.msg);
           localStorage.setItem("areaName",res.data.userInfo.areaENName);
+          localStorage.setItem("areaENName",res.data.userInfo.areaENName);
           localStorage.setItem("X-Token", res.data.token);
           this.$message.success("登录成功");
           this.loading = false

src/views/monitor/index.vue

@@ -136,7 +136,7 @@ import monitor from './monitor'
             monitorShow:false,
             formInline:{},
             listQuery:{
-                areaname: localStorage.getItem("areaENName"),
+                areaname: localStorage.getItem("areaName"),
                 querystr:null,
                 pageIndex:1,
                 pageSize:20,
@@ -170,14 +170,14 @@ import monitor from './monitor'
             this.$mapboxgl.accessToken = "pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
             this.globalMap = new this.$mapboxgl.Map({
                 container:"mapContainer",
-                center:[118.0075,35.42222222],
+                center:[117.7075,35.43222222],
                 zoom:12,
                 maxZoom:20,
                 minZoom:5,
                 pitch:0,
                 // style:"mapbox://styles/mapbox/satellite-v9"
                 // style:"mapbox://styles/mapbox/streets-v11"
-                style:"mapbox://styles/xujingliang/cli9pwr6x00y601q1a2w47kwg"
+                style:"mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k"
             });
             let _this = this;
             _this.globalMap.on("load",function(){

src/views/monitor/monitor.vue

@@ -23,14 +23,26 @@
         }
     },
     mounted(){
-        let arr = [
-            this.monitorInfo.cameraindexcode,
-            this.monitorInfo.cameraindexcode,
-            "23604396",
-            "221.2.83.54",
-            1443,
-            "NZJ8L3bxCOOV6rtTFjsx"
-        ]
+      let arr = [];
+        if(localStorage.getItem("areaName")=='feixian'){
+            arr = [
+              this.monitorInfo.cameraindexcode,
+              this.monitorInfo.cameraindexcode,
+              "23604396",
+              "221.2.83.54",
+              1443,
+              "NZJ8L3bxCOOV6rtTFjsx"
+          ]
+        }else{
+          arr = [
+              this.monitorInfo.cameraindexcode,
+              this.monitorInfo.cameraindexcode,
+              "21274765",
+              "223.99.16.253",
+              1443,
+              "CraRtGvpNB2xOcYSFTov"
+          ]
+        }
 
         let _this = this;