代码提交12.29

.env.dev

@@ -1,13 +1,13 @@
 NODE_ENV = development
 
 # 正式服务器
-VUE_APP_BASE_API =http://221.2.83.254:9001/api
+VUE_APP_BASE_API = http://221.2.83.254:9001/api
-UE_APP_BASE_IMG_URL =http://221.2.83.254:9001
+VUE_APP_BASE_IMG_URL = http://221.2.83.254:9001
 VUE_APP_WEBSOCKET_URL = ws://221.2.83.254:9002/ws
 
 # 本地测试
-#VUE_APP_BASE_API = http://192.168.10.111:81/api
+#VUE_APP_BASE_API = http://221.2.83.254:9013/api
-#VUE_APP_BASE_IMG_URL = http://192.168.10.117:81
+#VUE_APP_BASE_IMG_URL = http://221.2.83.254:901
 #VUE_APP_WEBSOCKET_URL = ws://221.2.83.254:9002/ws
 
 

package.json

@@ -10,6 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@easydarwin/easyplayer": "^5.1.1",
     "@geoman-io/leaflet-geoman-free": "^2.11.2",
     "@packy-tang/vue-tinymce": "^2.0.0-beta.1",
     "@riophae/vue-treeselect": "^0.4.0",
@@ -37,6 +38,7 @@
     "nprogress": "0.2.0",
     "proj4leaflet": "^1.0.2",
     "terraformer-wkt-parser": "^1.2.1",
+    "video.js": "^8.6.1",
     "videojs-contrib-hls": "^5.15.0",
     "vue": "^2.6.11",
     "vue-codemirror-lite": "^1.0.4",

public/config/app.json

@@ -29,7 +29,7 @@
         "appname":"费县智慧林业防灭火平台",
         "area":"费县",
         "baseUrl":"http://223.99.16.253:9001",
-        "layerurl":"http://223.99.16.253:9006/applicationMars/getApplicationInfo/feixian",
+        "layerurl":"http://221.2.83.254:9006/applicationMars/getApplicationInfo/feixian",
         "uavWebSocketUrl":"ws://123.132.248.154:9211/",
         "map":{
             "center":[],

public/config/feixianConfig.json

@@ -119,6 +119,26 @@
 				"noCenter": true,
 				"show": false
 			},{
+				"pid": 10,
+				"name": "北部山区高清影像（最新）",
+				"type": "wms",
+				"url": "http://221.2.83.254:9007/geoserver/feixian/wms",
+				"layers": "feixian:beibuyx",
+				"crs": "EPSG:4326",
+				"parameters": {
+					"transparent": "true",
+					"format": "image/png"
+				},
+				"showClickFeature": true,
+				"pickFeatureStyle": {
+					"clampToGround": true
+				},
+				"mapSplit": false,
+				"noCenter": true,
+				"show": false
+			},
+			
+			{
 				"pid": 10,
 				"name": "天地图注记",
 				"icon": "img/basemaps/tdt_vec.png",

public/crossdomain.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<cross-domain-policy> 
+	<allow-access-from domain="*"/>  
+</cross-domain-policy> 

public/index.html

@@ -45,6 +45,8 @@
     <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
     <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
 
+    <!--  -->
+    <script src="./EasyPlayer-lib.min.js"></script>
     <script  type="text/javascript" src="imouPlayer.js"></script>
     
     <link rel="stylesheet" href="index.css">

public/lib/jquery/ztree/css/mars/ztree-mars.css

@@ -1,4 +1,4 @@
-.ztree li span.node_name{color:#FFFFFF;}
+.ztree li span.node_name{color:#ccc;}
 .ztree li a{padding:2px 3px 16px 0 !important;}
 .ztree li span.button.switch{height:26px!important;}
 .ztree li span.button.center_docu{background-position: -56px -18px !important;}

public/lib/jquery/ztree/css/zTreeStyle/zTreeStyle.css

@@ -12,8 +12,9 @@ website:	http://code.google.com/p/jquerytree/
 .ztree {margin:0; padding:5px; color:#333}
 .ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
 .ztree li ul{ margin:0; padding:0 0 0 18px}
-.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
+.ztree li ul.line{ 
-
+	/* background:url(./img/line_conn.gif) 0 0 repeat-y; */
+}
 .ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
 	text-decoration:none; vertical-align:top; display: inline-block}
 .ztree li a:hover {text-decoration:underline}

public/lib/layer/theme/mars/layer.css

@@ -11,19 +11,22 @@
 .layer-mars-dialog {
     background-color: transparent !important; 
     /* border: 1px solid rgba(32,160,255,0.6); */
-    border:1px solid #56fefe;
+    border:1px solid #127272;
-    border-radius: 5px !important;
+    border-radius: 0px !important;
 }
 
 .layer-mars-dialog .layui-layer-title {
     padding: 0 80px 0 10px; 
     /* border-color: rgba(32,160,255,0.3);  */
-    border-color:#56fefe;
+    border-color:#127272;
-    background: rgba(30,36,50,0.6);
+    background: #127272;
+    background-image: url(./img/layer-tree-title.png);
+    background-size:100% 100%;
     height: 40px;
     line-height: 40px;
     color: #FFFFFF;
     font-size: 16px;
+    text-indent:12px;
 }
 
 .layer-mars-dialog .layui-layer-content {

public/monitor/hk/index.html

@@ -319,7 +319,7 @@
 
     //视频预览功能
     $("#startPreview").click(function () {
-        var cameraIndexCode  = 'bbe9c64699174953828ce4fa8bb41b8f';     //获取输入的监控点编号值，必填
+        var cameraIndexCode  = cameraIndexCode;     //获取输入的监控点编号值，必填
         var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
         var transMode = 1;                                      //传输协议：0-UDP，1-TCP
         var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用

public/monitor/hk/mulIndex.html

@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>preview_demo</title>
+</head>
+<style>
+    html, body {
+        padding: 0;
+        margin: 0;
+    }
+
+    .camera-box{
+        width: 1200px;
+        height: 700px;
+        border-radius: 5px;
+        position: relative;
+        z-index:100000000000000000000000000000000!important;
+         position: fixed;
+        left: 50%;
+        top: 50%;
+        z-index: 9999;
+        transform: translate(-50%,-50%);
+        padding:0px;
+    }
+
+
+
+    .playWnd {
+        width: 1200px;                  /*播放容器的宽和高设定*/
+        height: 700px;
+    }
+</style>
+
+<body>
+    <div class="camera-box">
+
+        <!-- 视口区域 -->
+        <div class="camera-body">
+            <div id="playWnd" class="playWnd"></div>
+        </div>
+    </div>
+</body>
+
+    <!--三个必要的js文件引入-->
+<script src="jquery-1.12.4.min.js"></script>
+<script src="jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
+<script src="jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
+
+<script type="text/javascript">
+    let carmerCard = "";
+    // 窗口加载结束事件
+    window.onload = () => {
+        // 子页面接收消息
+        window.addEventListener('message', function (e) {
+            if (e.data) {
+                carmerCard = e.data[1]
+                $("#carmerName").text(e.data[0])  // 设备名称
+                $("#carmerCard").text(e.data[1])  // 设备编号
+                $("#carmerAppKey").text(e.data[2])// appkey
+                $("#carmerIp").text(e.data[3])    // 设备ip
+                $("#carmerPort").text(e.data[4])  // 网络端口
+                $("#appSecret").text(e.data[5])   // 秘钥
+            }
+        }, false)
+
+        // 创建视频播放插件
+        initPlugin();
+    }
+
+    // 关闭按钮 调用父页面的关闭函数
+    $("#closeBtn").click(function(){
+        window.parent.postMessage(
+            {
+                cmd: 'close'
+            }
+        )
+    })
+
+    //声明公用变量
+    var initCount = 0;
+    var pubKey = '';
+
+    // 创建播放器方法实例
+    function initPlugin () {
+        oWebControl = new WebControl({
+            szPluginContainer: "playWnd",                       // 指定容器id
+			iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
+			iServicePortEnd: 15909,                             
+			szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
+			cbConnectSuccess: function () {                     // 创建WebControl实例成功后的回调函数											
+				
+                oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动VideoPluginPlugin.exe服务
+					dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死 
+				}).then(function () {                           // 启动插件服务成功
+
+					oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
+						cbIntegrationCallBack: cbIntegrationCallBack
+					});
+					
+					oWebControl.JS_CreateWnd("playWnd", 1200, 700).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
+						init();  // 创建播放实例成功后初始化
+					});
+
+				}, function () { // 创建播放实例失败回调
+                    console.log("创建播放实例失败！！！");
+				});
+			},
+			cbConnectError: function () { // 创建WebControl实例失败
+				oWebControl = null;
+				$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
+				WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
+				initCount ++;
+				if (initCount < 3) {                             
+					setTimeout(function () {
+						initPlugin();
+					}, 3000)
+				} else {
+					$("#playWnd").html("插件启动失败，请检查插件是否安装！");
+				}
+			},
+			cbConnectClose: function (bNormalClose) {            
+				// 异常断开：bNormalClose = false
+				// JS_Disconnect正常断开：bNormalClose = true	
+				oWebControl = null;
+			}
+		});
+        
+    }
+
+	// 设置窗口控制回调
+    function setCallbacks() {
+        oWebControl.JS_SetWindowControlCallback({
+            cbIntegrationCallBack: cbIntegrationCallBack
+        });
+    }
+
+    // 推送消息
+    function cbIntegrationCallBack(oData) {
+        // showCBInfo(JSON.stringify(oData.responseMsg));
+    }
+	
+    //初始化播放内容
+    function init()
+    {
+        getPubKey(function () {
+			
+			////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////	
+
+            // var appkey = "21274765";                        //综合安防管理平台提供的appkey，必填
+            // var ip = "223.99.16.253";                       //综合安防管理平台IP地址，必填
+            // var port = 1443;                                //综合安防管理平台端口，若启用HTTPS协议，默认443
+
+
+            var appkey = "23604396";            //综合安防管理平台提供的appkey，必填
+            var ip = "221.2.83.54";                    //综合安防管理平台IP地址，必填
+            var port = 1443;  
+            var appSecret = "NZJ8L3bxCOOV6rtTFjsx";
+            var secret = setEncrypt(appSecret);                //综合安防管理平台提供的secret，必填
+
+            let cameraCount = carmerCard.split(",").length;
+            
+            let layerOut = "1x1";
+
+            if(cameraCount<=1){
+                layerOut = "1x1";
+            }else if(cameraCount>1 && cameraCount<=4){
+                layerOut = "2x2";
+            }else if(cameraCount>4 && cameraCount<=9){
+                layerOut = "3x3";
+            }else if(cameraCount>9 && cameraCount<=16){
+                layerOut = "4x4";
+            }else if(cameraCount>16 && cameraCount<=25){
+                layerOut = "5x5";
+            }
+           
+
+            var playMode = 0;                                  //初始播放模式：0-预览，1-回放
+            var snapDir = "D:\\SnapDir";                       //抓图存储路径
+            var videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
+            var layout = layerOut;                                //playMode指定模式的布局 默认1*1
+            var enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+            var encryptedFields = 'secret';					   //加密字段，默认加密领域为secret
+			var showToolbar = 1;                               //是否显示工具栏，0-不显示，非0-显示
+			var showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+			var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
+
+			////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////
+
+            oWebControl.JS_RequestInterface({
+                funcName: "init",
+                argument: JSON.stringify({
+                    appkey: appkey,                            //API网关提供的appkey
+                    secret: secret,                            //API网关提供的secret
+                    ip: ip,                                    //API网关IP地址
+                    playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
+                    port: port,                                //端口
+                    snapDir: snapDir,                          //抓图存储路径
+                    videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
+                    layout: layout,                            //布局
+                    enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
+                    encryptedFields: encryptedFields,          //加密字段
+					showToolbar: showToolbar,                  //是否显示工具栏
+					showSmart: showSmart,                      //是否显示智能信息
+					buttonIDs: buttonIDs                       //自定义工具条按钮
+                })
+            }).then(function (oData) {
+				oWebControl.JS_Resize(1200, 700);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+                setWndCover();
+            });
+
+                
+            var cameraIndexCode  = carmerCard;          //获取输入的监控点编号值，必填
+            var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
+            var transMode = 1;                                      //传输协议：0-UDP，1-TCP
+            var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
+            var wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
+
+            // 封装传入需要播放的监控信息
+            let monitors = {list:[]};
+            var cameraIndexCodes = cameraIndexCode.split(",")
+            cameraIndexCodes.forEach((item,index)=>{
+                let obj = {
+                    cameraIndexCode:item,                //监控点编号
+                    streamMode: streamMode,                         //主子码流标识
+                    transMode: transMode,                           //传输协议
+                    gpuMode: gpuMode,                               //是否开启GPU硬解
+                    wndId:index+1                                 //可指定播放窗口
+                }
+                monitors.list.push(obj);
+            })
+
+            // 开始预览多个视频
+            oWebControl.JS_RequestInterface({
+                funcName: "startMultiPreviewByCameraIndexCode",
+                argument: JSON.stringify(monitors)
+            })
+
+        });
+    }
+
+    //获取公钥
+    function getPubKey (callback) {
+        oWebControl.JS_RequestInterface({
+            funcName: "getRSAPubKey",
+            argument: JSON.stringify({
+                keyLength: 1024
+            })
+        }).then(function (oData) {
+            if (oData.responseMsg.data) {
+                pubKey = oData.responseMsg.data;
+                callback()
+            }
+        })
+    }
+
+    //RSA加密 
+    function setEncrypt (value) {
+        var encrypt = new JSEncrypt();
+        encrypt.setPublicKey(pubKey);
+        return encrypt.encrypt(value);
+    }
+	
+	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+	 $(window).resize(function (event) { 
+        console.log(event);
+        if (oWebControl != null) {
+            oWebControl.JS_Resize(1200, 700);
+            setWndCover();
+        }
+    });
+	
+	// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+	$(window).scroll(function () {
+        if (oWebControl != null) {
+            oWebControl.JS_Resize(360, 230);
+            setWndCover();
+        }
+    });
+	
+	
+	// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
+    function setWndCover() {
+        var iWidth = $(window).width();
+        var iHeight = $(window).height();
+        var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
+
+        var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
+        var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
+        var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
+        var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
+
+        iCoverLeft = (iCoverLeft > 360) ? 360 : iCoverLeft;
+        iCoverTop = (iCoverTop > 230) ? 230 : iCoverTop;
+        iCoverRight = (iCoverRight > 360) ? 360 : iCoverRight;
+        iCoverBottom = (iCoverBottom > 230) ? 230 : iCoverBottom;
+
+		oWebControl.JS_RepairPartWindow(0, 0, 1001, 230);    // 多1个像素点防止还原后边界缺失一个像素条
+        if (iCoverLeft != 0) {
+			oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 230);
+        }
+        if (iCoverTop != 0) {
+            oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
+        }
+        if (iCoverRight != 0) {
+            oWebControl.JS_CuttingPartWindow(360 - iCoverRight, 0, iCoverRight, 230);
+        }
+        if (iCoverBottom != 0) {
+            oWebControl.JS_CuttingPartWindow(0, 230 - iCoverBottom, 360, iCoverBottom);
+        }
+    }
+
+    //视频预览功能
+    $("#startPreview").click(function () {
+        var cameraIndexCode  = cameraIndexCode;     //获取输入的监控点编号值，必填
+        var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
+        var transMode = 1;                                      //传输协议：0-UDP，1-TCP
+        var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
+        var wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
+
+        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
+        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
+
+        oWebControl.JS_RequestInterface({
+            funcName: "startPreview",
+            argument: JSON.stringify({
+                cameraIndexCode:cameraIndexCode,                //监控点编号
+                streamMode: streamMode,                         //主子码流标识
+                transMode: transMode,                           //传输协议
+                gpuMode: gpuMode,                               //是否开启GPU硬解
+                wndId:wndId                                     //可指定播放窗口
+            })
+        })
+    });
+
+    //停止全部预览
+    $("#stopAllPreview").click(function () {
+        oWebControl.JS_RequestInterface({
+            funcName: "stopAllPreview"
+        });
+    });
+
+    // 标签关闭
+    $(window).unload(function () {
+        if (oWebControl != null){
+			oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
+            oWebControl.JS_Disconnect().then(function(){  // 断开与插件服务连接成功
+			}, 
+			function() {  // 断开与插件服务连接失败
+			});
+        }
+    });
+
+</script>
+<!-- 
+
+
+ -->
+ </html>

public/widgets/manageLayers/view.html

@@ -35,10 +35,11 @@
   </head>
 
   <body>
-    <div id="view" style="width: 100%; height: calc(100% - 40px); overflow: auto">
+    <div id="view" style="width: 100%; height: calc(100% - 20px); overflow-y: auto;overflow-x:hidden;background:#0c3a3d7c;">
       <ul id="treeOverlays" class="ztree"></ul>
     </div>
-    <div style="position: absolute; bottom: 0; padding: 5px; color: #a59d9d">提示：双击可定位视域至其所在位置</div>
+
+    <div style="width:100%;height:21px;position: absolute; bottom: 0; padding: 5px;background-image: url('/widgets/manageLayers/img/layer-tree-footer.png');background-size:100% 100%;"></div>
 
     <div id="content_layer_manager_rMenu" class="layersctl_rMenu">
       <ul>
@@ -48,7 +49,6 @@
         <li data-type="bottom">图层置为底层</li>
       </ul>
     </div>
-
     <!--页面js-->
     <script src="view.js?time=20210803"></script>
   </body>

public/widgets/toolBarRight/widget.js

@@ -16,7 +16,7 @@
       //此数据也可以放在widget.json的配置中，但是发现很多人容易引起同名误解，所以还是放在这里
       this.data = this.config.data || [
         // { name: "底图", icon: "fa fa-map", widget: "widgets/manageBasemaps/widget.js" },
-        { name: "图层", icon: "fa fa-tasks", widget: "widgets/manageLayers/widget.js"},
+        { name: "数据资源", icon: "", widget: "widgets/manageLayers/widget.js"},
         {
           name: "工具",
           icon: "fa fa-cubes",

src/App.vue

@@ -79,6 +79,7 @@ export default {
     async setOnmessageMessage(event) {
       // console.log(event.data, "获得消息");
       this.reset();
+      
       // 自定义全局监听事件
       window.dispatchEvent(
         new CustomEvent("onmessageWS", {

src/components/mars3d/Map.vue

@@ -96,9 +96,21 @@ export default {
                         "clampToGround": true
                       }
                   attribute.zIndex = 10000000000;
-                  console.log("attribute",attribute);
                 }
-
+                if(attribute.name == '引水上山水管网'){
+                  attribute.type = "geojson";
+                  attribute.url = "http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ayinshuishangshanshuiguanwang&maxFeatures=100000&outputFormat=application%2Fjson";
+                  delete attribute.layers;
+                  delete attribute.parameters;
+                  delete attribute.highlight;
+                  attribute.symbol.styleOptions =  {
+                        "opacity": 0.8,
+                        "color": "",
+                        "width": 2,
+                        "clampToGround": true
+                      }
+                  attribute.zIndex = 10000000000;
+                }
                 if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label){
                   attribute.symbol.styleOptions.label.pixelOffsetY = -40
                 }

src/store/modules/user.js

@@ -31,6 +31,14 @@ const user = {
       const username = userInfo.username.trim()
       return new Promise((resolve, reject) => {
         login(username, userInfo.password).then(response => {
+
+           // 判断是否是普通移动端护林员
+           if(response.userInfo.userRole == 2){
+              reject("error");
+              return;
+            }else{
+              resolve()
+            }
           const data = response
           setToken(data.token)
           localStorage.setItem("userId",response.userInfo.id);
@@ -41,8 +49,8 @@ const user = {
           localStorage.setItem("areaCNName",response.userInfo.areaCNName);
           localStorage.setItem("unitName",response.userInfo.unitName);
           commit('SET_TOKEN', data.token)
-          resolve()
         }).catch(error => {
+          console.log(error);
           reject(error)
         })
       })

src/utils/base64.js

@@ -0,0 +1,102 @@
+function Base64() {
+    // private property
+    _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+    // 公共编码方法
+    this.encode = function (input) {
+      var output = "";
+      var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+      var i = 0;
+      input = _utf8_encode(input);
+      while (i < input.length) {
+        chr1 = input.charCodeAt(i++);
+        chr2 = input.charCodeAt(i++);
+        chr3 = input.charCodeAt(i++);
+        enc1 = chr1 >> 2;
+        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+        enc4 = chr3 & 63;
+        if (isNaN(chr2)) {
+            enc3 = enc4 = 64;
+        } else if (isNaN(chr3)) {
+            enc4 = 64;
+        }
+        output = output +
+        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
+        _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
+      }
+      return output;
+    }
+  
+    // 公共解码方法
+    this.decode = function (input) {
+      var output = "";
+      var chr1, chr2, chr3;
+      var enc1, enc2, enc3, enc4;
+      var i = 0;
+      input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+      while (i < input.length) {
+        enc1 = _keyStr.indexOf(input.charAt(i++));
+        enc2 = _keyStr.indexOf(input.charAt(i++));
+        enc3 = _keyStr.indexOf(input.charAt(i++));
+        enc4 = _keyStr.indexOf(input.charAt(i++));
+        chr1 = (enc1 << 2) | (enc2 >> 4);
+        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+        chr3 = ((enc3 & 3) << 6) | enc4;
+        output = output + String.fromCharCode(chr1);
+        if (enc3 != 64) {
+          output = output + String.fromCharCode(chr2);
+        }
+        if (enc4 != 64) {
+          output = output + String.fromCharCode(chr3);
+        }
+      }
+      output = _utf8_decode(output);
+      return output;
+    }
+  
+    // UTF-8编码的私有方法
+    _utf8_encode = function (string) {
+      string = string.replace(/\r\n/g,"\n");
+      var utftext = "";
+      for (var n = 0; n < string.length; n++) {
+        var c = string.charCodeAt(n);
+        if (c < 128) {
+          utftext += String.fromCharCode(c);
+        } else if((c > 127) && (c < 2048)) {
+          utftext += String.fromCharCode((c >> 6) | 192);
+          utftext += String.fromCharCode((c & 63) | 128);
+        } else {
+          utftext += String.fromCharCode((c >> 12) | 224);
+          utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+          utftext += String.fromCharCode((c & 63) | 128);
+        }
+      }
+      return utftext;
+    }
+  
+    // UTF-8解码的私有方法
+    _utf8_decode = function (utftext) {
+      var string = "";
+      var i = 0;
+      var c = c1 = c2 = 0;
+      while ( i < utftext.length ) {
+        c = utftext.charCodeAt(i);
+        if (c < 128) {
+          string += String.fromCharCode(c);
+          i++;
+        } else if((c > 191) && (c < 224)) {
+          c2 = utftext.charCodeAt(i+1);
+          string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+          i += 2;
+        } else {
+          c2 = utftext.charCodeAt(i+1);
+          c3 = utftext.charCodeAt(i+2);
+          string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+          i += 3;
+        }
+      }
+      return string;
+    }
+}
+
+export { Base64 }

src/views/adminmanager/index.vue

@@ -58,6 +58,15 @@
             >
               <el-table-column type="selection" align="center" width="55">
               </el-table-column>
+              
+              <el-table-column
+                prop="xzqmc"
+                label="乡镇"
+                show-overflow-tooltip
+                align="center"
+              >
+              </el-table-column>
+
               <el-table-column
                 prop="Account"
                 label="账号"
@@ -65,6 +74,9 @@
                 align="center"
               >
               </el-table-column>
+              
+              
+
               <el-table-column
                 prop="Name"
                 label="姓名"

src/views/adminmanager/widget/AddForm.vue

@@ -118,7 +118,7 @@
       var querys = {
         regionName: localStorage.getItem("areaENName")
       }
-      getMethodCommon("/Grid/LoadAllGrid", querys).then(res => {
+      getMethodCommon("/Grid/LoadAllTown", querys).then(res => {
         console.log("data", res.data);
         if (res.code == 200) {
           var list = res.data

src/views/adminmanager/widget/EditForm.vue

@@ -10,7 +10,7 @@
         </el-form-item>
 
         <el-form-item label="密码: " prop="password">
-          <el-input v-model="addForm.password" style="width:300px ;"></el-input>
+          <el-input type="password" v-model="addForm.password" style="width:300px ;"></el-input>
         </el-form-item>
 
   
@@ -115,11 +115,14 @@
           if (res.code == 200) {
             var list = res.data
             var arr = this.traverse(list)
-            console.log(arr)
+            if(localStorage.getItem("userRole") == 1){
+              arr[0].children = [];
+            }
             _this.orgsTree = arr;
           }
         })
       },
+      // 
       methods: {
         getDetail() {
           getMethodCommon("/FireCodeApp/GetForestryUserById?id=" + this.detailInfo.Id).then(res => {
@@ -157,6 +160,16 @@
           var _this = this
           this.$refs['form'].validate((valid) => {
             if (valid) {
+
+                if(typeof _this.addForm.areaId == 'string'){
+                  _this.addForm.areaId = _this.addForm.areaId.split(",")  
+                  _this.addForm.areaId = _this.addForm.areaId.map((item)=>{
+                    return parseInt(item);
+                  })
+                }
+
+                
+
                 // 编辑
                 postMethodCommon("/FireCodeApp/EditForestryUser", _this.addForm).then(response => {
                   if (response.code == 200) {

src/views/gridman/clockin/index.vue

@@ -215,7 +215,7 @@ export default {
             this.getTaskList();
         },
         gethlyList(){
-            getMethodCommon("/FireGrid/LoadUsers").then(res =>{
+            getMethodCommon("/FireGrid/LoadUsersArea").then(res =>{
                 this.orgs = res.data;
                 this.handleOrgs();
             })

src/views/gridman/clockin/widget/AddForm.vue

@@ -102,7 +102,6 @@
         if (res.code == 200) {
           var list = res.data
           var arr = this.traverse(list)
-          console.log(arr)
           _this.orgsTree = arr;
         }
       })

src/views/gridman/clockin/widget/clockIn.vue

@@ -88,6 +88,7 @@ export default {
             }
         },
         gethlyList(){
+
             getMethodCommon("/FireGrid/LoadUsers").then(res =>{
                 this.hlyList = res.data
                 
@@ -99,7 +100,7 @@ export default {
                 }
                 console.log('this.paramForm',this.hlyList)
             })
-            getMethodCommon("/FireGrid/LoadUsers").then(res =>{
+            getMethodCommon("/FireGrid/LoadUsersArea").then(res =>{
                 [...this.orgs] =res.data;
                 this.handleOrgs();
 

src/views/gridman/forestranger/index.vue

@@ -20,6 +20,7 @@
         <el-button type="warning" size="mini" @click="react()" icon="el-icon-edit">编辑</el-button>
         <el-button type="danger" size="mini" @click="del()" icon="el-icon-delete">删除</el-button>
         <el-button type="primary" size="mini" icon="el-icon-upload2"  @click="importVisible = true">导入</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-download" @click="exportExcel">导出</el-button>
 
         <permission-btn
           moduleName="modulemanager"
@@ -179,6 +180,7 @@ import clockInDia from "./widget/clockIn";
 import Sticky from "@/components/Sticky";
 import ImportForestranger from './widget/ImportForestranger.vue'
 import EditForm  from './widget/EditForm.vue'
+import axios from 'axios'
 export default {
   name: "module",
   components: {
@@ -229,6 +231,28 @@ export default {
   },
   mounted() {},
   methods: {
+    exportExcel(){
+      axios({
+        method:"get",
+        url:process.env.VUE_APP_BASE_API +"/FireCodeApp/ExportForestryUser",
+        headers:{
+          "X-Token":localStorage.getItem("X-Token")
+        },
+        responseType:"blob"
+      }).then(res=>{
+          console.log("excel",res);
+          let fileName = "护林员统计导出" + new Date().getTime() + ".xls";
+          const elink = document.createElement('a')
+          elink.download = fileName;
+          elink.style.display = 'none'
+          elink.href = URL.createObjectURL(res.data)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href)
+          document.body.removeChild(elink)
+
+      })
+    },
     importSuccess(){
         this.importVisible = false;
         this.getList();

src/views/gridman/forestranger/widget/EditForm.vue

@@ -91,7 +91,8 @@
       computed: {
         selectOrgs: {
           get: function () {
-            return this.addForm.areaId.split(",")
+            return this.addForm.areaId
+            // return this.addForm.areaId.split(",")
           },
           set: function (v) {
             var _this = this
@@ -126,7 +127,7 @@
               this.addForm.account = detail.Account;
               this.addForm.sex = detail.Sex;
               this.addForm.userRole = detail.UserRole ? detail.UserRole : 2;
-              this.addForm.areaId = detail.areaId;
+              this.addForm.areaId = detail.zrcId.split(",");
 
               this.formRandom = true;
             }

src/views/gridman/record/index.vue

@@ -39,7 +39,8 @@
         </el-input>
 
         <el-button type="default" size="mini" @click="resetListQuery">重置</el-button>
-        <el-button type="primary" size="mini" @click="getList()">搜索</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-search" @click="getList()">搜索</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-download" @click="exportExcel()">导出</el-button>
 
         <permission-btn moduleName='modulemanager' :size="'mini'" v-on:btn-event="onBtnClicked"></permission-btn>
 
@@ -128,6 +129,7 @@ import iconData from '@/assets/public/css/comIconfont/iconfont/iconfont.json'
 import {getMethodCommon,postMethodCommon } from "@/api/common";
 // import AddForm from './widget/AddForm';
 import AddForm from './widget/Examine';
+import axios from 'axios'
 
 export default {
   name: 'module',
@@ -157,16 +159,7 @@ export default {
           label:"防火",
         }
       ],
-      tableData:[
+      tableData:[],
-        {
-          name:"徐景良",
-          phone:"17861857725",
-          time:"2023-04-19 10:00:00",
-          site:"塔山防火站",
-          method:"本人登记",
-          user:"徐景良",
-        }
-      ],
       addServiceVisible:false,
       editServiceVisible:false,
       selectRolesVisible:false,
@@ -438,7 +431,29 @@ export default {
         }
       })
     },
+    exportExcel(){
+      axios({
+        method:"get",
+        url:process.env.VUE_APP_BASE_API +"/FireCodeApp/ExportInUser",
+        params:this.listQuery,
+        headers:{
+          "X-Token":localStorage.getItem("X-Token")
+        },
+        responseType:"blob"
+      }).then(res=>{
+          console.log("excel",res);
+          let fileName = "进出山人员统计导出" + new Date().getTime() + ".xls";
+          const elink = document.createElement('a')
+          elink.download = fileName;
+          elink.style.display = 'none'
+          elink.href = URL.createObjectURL(res.data)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href)
+          document.body.removeChild(elink)
 
+      })
+    },
     handleFilter() {
       this.listQuery.pageIndexIndex = 1
       this.getList()

src/views/gridman/site/index.vue

@@ -17,6 +17,7 @@
         <el-button type="primary" size="mini" @click="getList()" icon="el-icon-search">搜索</el-button>
         <el-button type="primary" size="mini" @click="add()" icon="el-icon-plus">添加</el-button>
         <el-button type="primary" size="mini" @click="edit()" icon="el-icon-edit">编辑</el-button>
+        <el-button type="primary" size="mini" @click="exportExcel()" icon="el-icon-download">导出</el-button>
         <!-- <el-button type="danger" size="mini"  icon="el-icon-delete" @click="handleDelete">删除</el-button> -->
 
 
@@ -131,6 +132,7 @@
   import EditForm from './widget/EditForm';
   import SelectRoles from './widget/SelectRoles'
   import Sticky from '@/components/Sticky'
+  import axios from 'axios'
 
   export default {
     name: 'module',
@@ -280,6 +282,29 @@
 
     },
     methods: {
+      exportExcel(){
+        axios({
+          method:"get",
+          url:process.env.VUE_APP_BASE_API +"/FireCodePC/ExportSite",
+          params:this.listQuery,
+          headers:{
+            "X-Token":localStorage.getItem("X-Token")
+          },
+          responseType:"blob"
+        }).then(res=>{
+            console.log("excel",res);
+            let fileName = "站点统计导出" + new Date().getTime() + ".xls";
+            const elink = document.createElement('a')
+            elink.download = fileName;
+            elink.style.display = 'none'
+            elink.href = URL.createObjectURL(res.data)
+            document.body.appendChild(elink)
+            elink.click()
+            URL.revokeObjectURL(elink.href)
+            document.body.removeChild(elink)
+        
+        })
+      },
       goBack() {
         this.$router.push({ 'path': '/gridman' })
       },

src/views/gridman/site/widget/AddForm.vue

@@ -119,6 +119,7 @@ export default {
     return {
       BASE_IMAGE_URL:BASE_IMAGE_URL,
       addForm:{
+        state:1,
         siteUser:[
           
         ]

src/views/gridman/statistics/index.vue

@@ -26,7 +26,7 @@
         end-placeholder="结束日期">
         </el-date-picker>
         
-        <el-input type="text" v-model="listQuery.name" placeholder="请输入搜索关键字" style="width: calc(25% - 15px);margin-right:15px;" size="mini" round></el-input>
+        <!-- <el-input type="text" v-model="listQuery.name" placeholder="请输入搜索关键字" style="width: calc(25% - 15px);margin-right:15px;" size="mini" round></el-input> -->
         
         <div style="float:right;text-align:center;">
             <el-button type="default" size="mini" @click="resetListQuery"><i class="el-icon el-icon-refresh-left"></i> 重置</el-button>
@@ -175,7 +175,7 @@ export default {
             this.listQuery.endtime = e[1];
         },
         gethlyList(){
-            getMethodCommon("/FireGrid/LoadUsers").then(res =>{
+            getMethodCommon("/FireGrid/LoadUsersArea").then(res =>{
                 this.orgs = res.data;
                 this.handleOrgs();
             })

src/views/home/index.vue

@@ -7,14 +7,9 @@
     <!-- 头部 -->
     <div class="el-header">
       <div class="app-name">{{ appName }}</div>
-      <div class="header-info" style="z-index: 9999999999999999">
+      <div class="header-info" style="z-index: 99">
-                <!-- 天气中心 -->
-                <div class="weather-info">
-          <!-- <div class="weater">{{ weater }}</div>
-          <div class="temperature">{{ temperature }}</div> -->
-        </div>
 
-        <!-- 时间中心 -->
+        <!-- 时间 -->
         <div class="time-info">
           <div class="time-time-info" style="margin-right: 15px">
             {{ time }}
@@ -27,8 +22,6 @@
           </div>
         </div>
 
-
-
         <div class="newworkstate">
           网络状态：<span :style="{
             color: newworkstate == '网络正常' ? '#67C23A' : '#E6A23C',
@@ -37,33 +30,21 @@
 
         <!-- 退出按钮 -->
         <div class="logout-button" style="position: relative; z-index: 999999999999" @click="logout()"></div>
+
       </div>
     </div>
 
-    <search id="search-box" v-if="finishLoadMap" />
 
-    <!-- 快捷按钮 -->
-    <div class="shortcut-button" id="shortcutbutton">
-      <!-- <div class="quick-button" v-if="appTools['toolsbox']" @click="toolsShow = !toolsShow">常用工具</div> -->
-
-      <!-- <div class="quick-button" v-if="appTools['uavbox']" @click="uavShow = !uavShow">视频巡航</div> -->
-
-      <!-- <div class="quick-button" v-if="appTools['routebox']" @click="routeShow = !routeShow">路线规划</div> -->
-
-      <!-- <div class="quick-button" v-if="appTools['monitorbox']" @click="monitorShow = !monitorShow">视频监控</div> -->
-
-      <!-- <div class="quick-button" v-if="appTools['griderbox']" @click="griderShow = !griderShow">网格管理</div> -->
-
-      <!-- <div class="quick-button" v-if="appTools['reportbox']" @click=" reportlistShow = !reportlistShow">线索上报</div>
-
-          <div class="quick-button" @click="socketBoxVisible = !socketBoxVisible">现场人员</div> -->
-    </div>
 
     <!-- 地图 -->
     <Map style="width: 100%; height: 100vh" :url="configUrl" :widgetUrl="widgetUrl" @onload="onMapload" />
 
-    <!-- 图上测量 -->
+    
-    <div class="tools-boxs" v-show="toolsShow && appTools['toolsbox'] && finishLoadMap">
+    <!-- 地图搜索工具 -->
+    <search id="search-box" v-if="finishLoadMap" />
+
+    <!-- 左下角 图上测量工具箱 -->
+    <div class="tools-boxs" v-show="toolsShow && appTools['toolsbox']">
       <toolbox @historyShow="showHistoryLabel" @drawLable="drawLable"></toolbox>
     </div>
 
@@ -73,7 +54,6 @@
         :checkList="checkList" :checkNumber="checkNumber"></mergebox>
     </div>
 
-    <!-- 工具箱 -->
     <div class="tools">
       <!-- 火情调度 -->
       <div class="situation" v-if="reportSituationShow">
@@ -114,26 +94,25 @@
             物资调度
           </div>
         </div>
-        <!-- 火情动态 -->
-        <trendsbox v-show="active == 1"></trendsbox>
 
         <!-- 任务下发 -->
         <taskbox v-show="active == 2"></taskbox>
-        <!--  -->
+
+
       </div>
     </div>
-    <!-- 人员 -->
+
+    <!-- 周边人员 -->
     <div class="personnel-container" v-drag v-if="personVisible && finishLoadMap">
       <personnel :fireData="currentInfo" @close="personVisible = false" @videoCall="videoCall">
       </personnel>
     </div>
-    <!-- 物资 -->
+    <!-- 周边物资 -->
     <div class="goods-container" v-if="goodsVisible" v-drag>
       <goodsbox :endLngLat="endLngLat" :firePopup='firePopupClosed' :visible='goodsVisible' @close="goodsVisible = false">
       </goodsbox>
     </div>
-
+    <!-- 周边水源 -->
-    <!-- 水源 -->
     <div class="water-container" v-if="waterVisible" v-drag>
       <waterbox
         :waterCenter="waterCenter"
@@ -143,17 +122,8 @@
       ></waterbox>
     </div>
 
-    <!-- 网格化管理 -->
-    <!-- <div class="grid-container" v-show="appTools['griderbox'] && griderShow">
-      <gridbox></gridbox>
-    </div> -->
 
     <div class="bottom-tools-container" style="display: none" v-if="finishLoadMap">
-      <!-- 最优路线规划 -->
-      <div class="route" >
-        <routebox></routebox>
-      </div>
-
       <!-- 监控列表 -->
       <div class="monitor" v-if="monitorShow && appTools['monitorbox']">
         <monitorbox @showLCmonitorbox="showLCmonitorbox"></monitorbox>
@@ -173,28 +143,19 @@
         <LCmonitorbox v-if="LCmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></LCmonitorbox>
       </div>
     </div>
+
     <!-- 右键点击设置 -->
     <div v-if="setVisibleShow">
       <rightclicksetting :type="rightType" :clickdata="setDatas" @close="rightType = 0;setVisibleShow=false;"></rightclicksetting>
     </div>
-    <!-- socket -->
+
-    <div class="socket-container" v-if="socketBoxVisible && finishLoadMap">
+    <!-- 右侧：数据统计、火情线索、视频巡航 -->
-      <socketDiaBox @close="socketBoxVisible = false" @videoCall="videoCall"></socketDiaBox>
-    </div>
-    <!-- 数据图层 -->
-    <div class="layercontainer flex column jc-c ai-c" id="layercontainer" v-if="false">
-      <div class="layerplugbox" v-if="layerPlugVisible">
-        <layerPlugInUnit></layerPlugInUnit>
-      </div>
-      <div class="layerControlBtn flex ai-c jc-c cursor" @click="layerPlugVisible = !layerPlugVisible">
-        <img style="width: 18px; height: 18px" src="/img/layercontrol.png" />
-      </div>
-    </div>
-    <!-- 右侧弹窗 -->
     <div class="rightdiabox flex column jc-sb" id="rightdiabox" v-show="rightDiaVisible && finishLoadMap">
+      <!-- 数据统计 -->
       <div class="rightbox1">
         <rightEchartsData></rightEchartsData>
       </div>
+      <!-- 火情线索 && 监控预警 -->
       <div class="rightbox2" v-if="finishLoadMap">
         <div class="tab-header" >
           <div class="item" @click="earlywarningTabShow = 1;" :style="{'background-image':earlywarningTabShow == 1 ? 'url(/img/monitor-warning-tab-1.png)' : 'url()'}">火情线索</div>
@@ -211,25 +172,32 @@
         </div>
       </div>
 
+      <!-- 视频巡航 -->
       <div class="rightbox1" v-if="finishLoadMap">
+        <div class="allMonitorButton" @click="allMonitorShow = true">视频监控</div>
         <uavbox></uavbox>
       </div>
     </div>
-    <!-- 呼叫中心 -->
+
-    <div class="callCenterBox" v-show="callCenterVisible && finishLoadMap">
+    <!-- 呼叫中心弹窗 -->
+    <div class="callCenterBox" v-if="callCenterVisible">
       <callCenter @callUser="callUser" @getOnlineUser="onlineUserBoxShow = true"></callCenter>
     </div>
-    <!-- 展开收起两边弹窗 -->
+
+    <!-- 展开收起两边弹窗按钮 -->
     <div class="diatoggleBtn" id="diatoggleBtn" @click="diaToggle"></div>
 
     <!-- 火情上报 -->
     <!-- <div class="report" v-if="appTools['reportbox']">
           <reportbox @getAllReportList="getAllReportList"></reportbox>
         </div> -->
+
+
     <!-- 任务下发 -->
     <div class="task" v-if="taskDeliveryShow && finishLoadMap" v-drag>
       <taskDelivery @closeTask="closeTask" :lng="tasklng" :lat="tasklat"></taskDelivery>
     </div>
+
     <!-- 脚部 -->
     <div class="footer" id="footer">
       <div class="base-layer-change-button" @click="addTileLayer('vec_d')">
@@ -240,14 +208,15 @@
       </div>
     </div>
 
-    <!-- 呼叫中心 -->
+    <!-- 呼叫中心 && 注册人员弹窗 -->
     <div class="one-button-container" v-drag v-if="oneButtonCallShow">
       <div class="close-button" style="margin-right: 8px; z-index: 9999" @click="oneButtonCallShow = false">
         <i class="el-icon el-icon-close"></i>
       </div>
       <onebuttoncall></onebuttoncall>
     </div>
-    <!-- 视频监控 -->
+
+    <!-- 海康视频监控 -->
     <div style="
         width: 100vw;
         height: 100vh;
@@ -267,6 +236,7 @@
         <i class="el-icon el-icon-close"></i>
       </div>
       <HKmonitorbox v-if="HKmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></HKmonitorbox>
+      <!-- <HKmonitorbox v-if="HKmonitorboxShow" :deviceId="'8dd8c8727b534b678fc717cb9a0c1a93'" :channelId="'8dd8c8727b534b678fc717cb9a0c1a93'"></HKmonitorbox> -->
     </div>
 
     <!-- 在线人员 -->
@@ -274,18 +244,26 @@
       <div class="close-button" style="margin-right: 8px; z-index: 9999" @click="onlineUserBoxShow = false">
         <i class="el-icon el-icon-close"></i>
       </div>
-      <Onlineuserbox></Onlineuserbox>
+      <Onlineuserbox ></Onlineuserbox>
     </div>
 
-    <!-- 巡检轨迹 -->
+    <!-- 查找周边条件筛选弹窗 -->
-    <div class="trajectory-box" v-drag v-if="trajectoryShow">
+    <div class="find-source" v-drag v-if="findsourceShow">
-      <div class="close-button" style="margin-right: 8px; z-index: 9999" @click="trajectoryShow = false">
+      <div class="close-button" @click="findsourceShow=false;" style="width:30px;height:30px;line-height:28px;position:absolute;top:-30px;right:-20px;border-radius: 50%;font-weight:bold;border:2px solid #23DBEC;background: none; z-index: 9999;color:#23DBEC;" >
         <i class="el-icon el-icon-close"></i>
       </div>
-      <trajectory :phone="trajectory_phone"></trajectory>
+      <findsource @setFilterOptions="setFilterOptions"></findsource>
     </div>
 
-    <!-- 图层信息编辑 -->
+    <!-- 查找周边结果弹窗 -->
+    <div class="find-source-item" v-drag v-if="findsourceitemShow">
+      <div class="close-button" @click="findsourceitemShow = false;" style="width:30px;height:30px;line-height:28px;position:absolute;top:-30px;right:-20px;border-radius: 50%;font-weight:bold;border:2px solid #23DBEC;background: none; z-index: 9999;color:#23DBEC;" >
+        <i class="el-icon el-icon-close"></i>
+      </div>
+      <findsourceitem :options="filterOptions" :currentInfo="currentInfo" ></findsourceitem>
+    </div>
+
+    <!-- 图层属性编辑弹窗 -->
     <div class="editor-box" v-drag v-if="editorVisible">
       <editorbox
         :editData="editData"
@@ -295,11 +273,29 @@
       ></editorbox>
     </div>
 
-    <!-- 火情预警信息弹窗 -->
+    <!-- 监控设备火情预警详情弹窗 -->
     <div class="early-warning-box-container" v-drag v-if="earlyWarningBoxShow">
       <earlyWarningBox @close="closeEarlyWarning" :info="monitrowarningdetail"></earlyWarningBox>
     </div>
 
+    <!-- 视频监控弹窗 -->
+    <div class="monitor-box-container" v-drag v-if="allMonitorShow">
+
+        <div class="close-button" style="right:40px;top:20px;" @click="allMonitorShow = false">
+          <i class="el-icon el-icon-close"></i>
+        </div>
+
+      <monitor @previewHkMonitor="previewHkMonitor"></monitor>
+    </div>
+
+    <!-- 海康视频监控分屏 -->
+    <div class="mul-hk-monitor-container" v-if="showMulHKMonitorShow">
+      <div class="close-button" style="right:40px;top:20px;" @click="showMulHKMonitorShow = false">
+          <i class="el-icon el-icon-close"></i>
+        </div>
+        
+      <mulHKmonitor :deviceId="hkMulDeviceIds"></mulHKmonitor>
+    </div>
   </div>
 </template>
 
@@ -318,17 +314,19 @@ import Map from "@/components/mars3d/Map.vue";
 import Uavbox from "./widget/uavbox.vue";
 import toolbox from "./widget/toolbox.vue";
 import monitorbox from "./widget/monitorbox.vue";
-import routebox from "./widget/routebox.vue";
+import mulHKmonitor from "./widget/mulHKmonitor.vue";
+
 import waterbox from "./widget/waterbox.vue";
 // import reportbox from './widget/reportbox.vue'
 import reportlist from "./widget/reportlist.vue";
 import monitorwarning from "./widget/monitorwarning.vue";
 import goodsbox from "./widget/goodsbox.vue";
-import trendsbox from "./widget/trendsbox.vue";
+
 import taskbox from "./widget/taskbox.vue";
 // import gridbox from './widget/gridbox.vue';
 import LCmonitorbox from "./widget/LCmonitorbox.vue";
 import HKmonitorbox from "./widget/HKmonitorbox.vue";
+import monitor from "./widget/monitor.vue";
 import videocall from "./widget/videocallbox.vue";
 import personnel from "./widget/personnel.vue";
 import taskDelivery from "./widget/taskDelivery.vue";
@@ -336,8 +334,8 @@ import axios from "axios";
 import jQuery from "jquery";
 import mergebox from "./widget/mergebox.vue";
 import rightclicksetting from "./widget/rightclick.vue";
-import socketDiaBox from "./widget/socketdiabox.vue";
+
-import layerPlugInUnit from "./widget/layerplug.vue";
+
 import callCenter from "./widget/callcenter.vue";
 // import fireClues from './widget/fireclues.vue';
 import rightEchartsData from "./widget/rightechartsdata.vue";
@@ -345,11 +343,15 @@ import search from "./widget/search.vue";
 import drag from "../../utils/draged";
 import Onebuttoncall from "./widget/onebuttoncall.vue";
 import Onlineuserbox from "./widget/onlineuserbox.vue";
-import trajectory from './widget/trajectory.vue';
+
 import { getMethodCommon, postMethodCommon } from '../../api/common';
 import editorbox from './widget/editorbox.vue';
 import earlyWarningBox from './widget/earlywarningbox.vue'
 import {compareArray} from "./lib/compareArray"
+
+import findsource from './widget/findsource.vue'
+import findsourceitem from './widget/findsourceitem.vue'
+
 let BASE_URL = process.env.VUE_APP_BASE_API;
 const areaName = localStorage.getItem("areaName");
 export default {
@@ -360,13 +362,12 @@ export default {
     Uavbox,
     toolbox,
     monitorbox,
-    routebox,
+    mulHKmonitor,
     waterbox,
     // reportbox,
     goodsbox,
     reportlist,
     monitorwarning,
-    trendsbox,
     taskbox,
     // gridbox,
     LCmonitorbox,
@@ -375,18 +376,18 @@ export default {
     personnel,
     videocall,
     rightclicksetting,
-    socketDiaBox,
     taskDelivery,
-    layerPlugInUnit,
     callCenter,
     // fireClues,
     rightEchartsData,
     search,
     Onebuttoncall,
     Onlineuserbox,
-    trajectory,
+    monitor,
     editorbox,
-    earlyWarningBox
+    earlyWarningBox,
+    findsource,
+    findsourceitem
   },
 
   data() {
@@ -430,12 +431,10 @@ export default {
       setDatas: {},
       setVisibleShow: false,
       videoCallShow: false,
-      socketBoxVisible: false,
       taskDeliveryShow: false,
       tasklng: "",
       tasklat: "",
       friePointLayer: null,
-      layerPlugVisible: true,
       rightDiaVisible: true,
       callCenterVisible: true,
       oneButtonCallShow: false,
@@ -444,8 +443,7 @@ export default {
       taskGraphicLayer:null,
       taskList:[],
       oldTaskList:[],
-      trajectoryShow:false,
+
-      trajectory_phone:null,
       // 图层编辑相关代码
       editorVisible: false,
       tableName: null,
@@ -457,6 +455,13 @@ export default {
       monitrowarningdetail:{},
       earlywarningTabShow:1,
       monitorwarningLayer:null,
+      filterOptions:[],
+      findsourceitemShow:false,
+      findsourceShow:false,
+      allMonitorShow:false,
+      showMulHKMonitorShow:false,
+      hkMulDeviceIds:null,
+
     };
   },
 
@@ -481,7 +486,7 @@ export default {
       _this.handlerTime();
     }, 1000);
 
-    // 获取天气
+    // 获取天气数据
     this.getWeater();
 
     // 获取网络状态
@@ -497,16 +502,14 @@ export default {
       e.innerHTML = e.getAttribute("data-phone");
     };
 
+    // 
     window.lookMonitorByMonitorLayer = this.lookMonitorByMonitorLayer;
-
     // 视频通话
     window.videoCall = this.videoCall;
-
     // 附近水源地
     window.shuiyuan = this.shuiyuan;
-
+    // 删除火点函数
     window.delFirePoint = this.delFirePoint;
-
     // 图层属性编辑
     window.editlayerinfo = this.editlayerinfo;
   },
@@ -529,6 +532,14 @@ export default {
     }
   },
   methods: {
+    previewHkMonitor(val){
+      this.hkMulDeviceIds = val;
+      this.showMulHKMonitorShow = true;
+    },
+    setFilterOptions(val){
+      this.filterOptions = val
+      this.findsourceitemShow = true;
+    },  
     loadFireCenterEntity(){
       // 灭火专班
       let graphic = new mars3d.graphic.BillboardEntity({
@@ -906,6 +917,7 @@ export default {
     getAllReportList() {
       this.reportlistShow = !this.reportlistShow;
     },
+
     // 退出登录
     logout() {
       // localStorage.setItem("X-Token", "");
@@ -956,12 +968,12 @@ export default {
     // 地图构造完成回调
     onMapload(map) {
       let _self = this;
-
       // 创建全局地图
       window.globalmap = map;
+      _self.finishLoadMap = true;
+
 
       // 地图加载完毕
-      _self.finishLoadMap = true;
 
       // 创建全局entity存放图层
       window.graphicLayer = new this.mars3d.layer.GraphicLayer({pid:1})
@@ -974,13 +986,21 @@ export default {
       _self.getTaskList();
 
       // 绑定地图点击事件
-      map.on(this.mars3d.EventType.click, this.onMapClick);
+      // map.on(this.mars3d.EventType.click, this.onMapClick);
-      map.on(this.mars3d.EventType.clickTileGraphic, this.onMapClick);
+      // map.on(this.mars3d.EventType.clickTileGraphic, this.onMapClick);
 
-       //监听pop弹窗
+      //  监听pop弹窗
        _self.handlerlistenPopup(map);
       
+      window.globalmap.on(mars3d.EventType.clickGraphic, function (event) {
+        _self.loadUserList(event,"graphicClick");
+      });
+      window.globalmap.on(mars3d.EventType.clickTileGraphic,function(event){
+        _self.loadUserList(event,"layerClick");
+      })
+
       _self.bindShowTilesParts();
+
       const mapContextmenuItems = [
         {
           text: "设为火点",
@@ -1037,6 +1057,14 @@ export default {
           show: function (e) {
             return Cesium.defined(e.cartesian);
           },
+          callback: (e) => {
+            const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
+            this.currentInfo = {
+              lng: mpt._lng,
+              lat: mpt._lat,
+            };
+            // this.findsourceShow = true
+          },
           children: [
             {
               text: "人员",
@@ -1149,7 +1177,9 @@ export default {
 
       // 查询火点
       _self.getFirePointList();
+
     },
+
     //监听点击图层事件
     handlerlistenPopup(map) {
       let _this = this
@@ -1242,13 +1272,7 @@ export default {
     },
     // 邦定地图点击事件
     bindShowTilesParts() {
-      let _this = this;
+     
-      window.globalmap.on(mars3d.EventType.clickGraphic, function (event) {
-        _this.loadUserList(event,"graphicClick");
-      });
-      window.globalmap.on(mars3d.EventType.clickTileGraphic,function(event){
-        _this.loadUserList(event,"layerClick");
-      })
     },
     editlayerinfo() {
       this.editorVisible = true;
@@ -1290,43 +1314,8 @@ export default {
       }
       
       
-      // console.log("Evenvnnnn",event);
-      // 图层信息编辑相关
-      if(clickType== 'graphicClick'){
-        let url = event.layer.options.url;
-        this.editData = event.graphic.options.attr;
-        this.currentGraphic = event.graphic;
-        this.tableName =url ? url.match(/shp_[0-9]+/)[0] : null;
-        this.showFields = event.layer.options.popup;
-      }else if(clickType == 'layerClick'){
-        if(!event.layer){
-          return;
-        }
-        this.editData = event.attr
-        this.tableName = event.layer.options.layers.split(":")[1];
-        this.showFields = event.layer.options.popup;
-      }
-      // 样式一添加编辑按钮
-      $(".mars3d-popup-content-wrapper").append(
-        `<el-button type='primary' size='mini' onclick='editlayerinfo()' style='background:#108eff;padding:4px 6px;color:#fff;border-radius:4px;margin-left:12px;'>编辑</el-button>`
-      );
-      // 样式二添加编辑按钮
-      $(".marsBlackPanel-text").append(
-        `<el-button type='primary' size='mini' onclick='editlayerinfo()' style='background:#108eff;padding:4px 6px;color:#fff;border-radius:4px;margin-left:12px;'>编辑</el-button>`
-      );
-
-    
-      // 如果是护林员图层
-      // if(layerName.match("护林员管护区域")){
-      //   this.trajectory_phone = event.attr.lianxifangshi;
-      //   this.trajectoryShow = true;
-      //   return;
-      // }
-      // 如果是监控图层
-      
-      
       // 其他图层
-      let queryName = event.graphic.options.attr["name2"];
+      let queryName = event.graphic && event.graphic.options ?  event.graphic.options.attr["name2"] : null;
       let url = null;
       switch (layerName) {
         case "检查点":
@@ -1352,6 +1341,33 @@ export default {
         // 查询人员列表
         this.loadUserListApi(url, queryName);
       }
+
+
+      // 添加图层编辑操作
+
+      // 图层信息编辑相关
+      if(clickType== 'graphicClick'){
+        let url = event.layer.options.url;
+        this.editData = event.graphic.options.attr;
+        this.currentGraphic = event.graphic;
+        this.tableName =url ? url.match(/shp_[0-9]+/)[0] : null;
+        this.showFields = event.layer.options.popup;
+      }else if(clickType == 'layerClick'){
+        if(!event.layer){
+          return;
+        }
+        this.editData = event.attr
+        this.tableName = event.layer.options.layers.split(":")[1];
+        this.showFields = event.layer.options.popup;
+      }
+      // 样式一添加编辑按钮
+      $(".mars3d-popup-content-wrapper").append(
+        `<el-button type='primary' size='mini' onclick='editlayerinfo()' style='background:#108eff;padding:4px 6px;color:#fff;border-radius:4px;margin-left:12px;'>编辑</el-button>`
+      );
+      // 样式二添加编辑按钮
+      $(".marsBlackPanel-text").append(
+        `<el-button type='primary' size='mini' onclick='editlayerinfo()' style='background:#108eff;padding:4px 6px;color:#fff;border-radius:4px;margin-left:12px;'>编辑</el-button>`
+      );
     },
     // 获取监控
     getMonitorList(lng, lat) {
@@ -1480,7 +1496,7 @@ export default {
   height: 30px;
   position: absolute;
   top: 30px;
-  right: 0px;
+  right: -140px;
 }
 
 .weather-info {
@@ -1870,6 +1886,21 @@ export default {
   height: 32%;
   background-image: url(/img/commonbg1.png);
   background-size: 100% 100%;
+  position:relative;
+}
+
+.allMonitorButton{
+  width:100px;
+  height:60px;
+  float:right;
+  line-height:50px;
+  position:absolute;
+  top:0px;
+  right:0px;
+  font-size:18px;
+  color:#fff;
+  cursor: pointer;
+  z-index:99999;
 }
 
 .rightbox2 {
@@ -1945,6 +1976,28 @@ export default {
   z-index: 999999999;
 }
 
+.find-source{
+  width: 558px;
+  height: 280px;
+  padding:0px 15px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999999999;
+}
+
+.find-source-item{
+  width: 458px;
+  height: 560px;
+  padding:0px 15px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999999999;
+}
+
 .editor-box {
   width: 400px;
   height: 320px;
@@ -1966,6 +2019,25 @@ export default {
   z-index:  99;
 }
 
+/* 视频监控弹窗 */
+.monitor-box-container{
+  width:1200px;
+  height:600px;
+  position:fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index:  99;
+}
+
+/* 海康分屏查看 */
+.mul-hk-monitor-container{
+  width:100vw;
+  height:100vh;
+  position:relative;
+  z-index:9999;
+  background:rgba(0,0,0,0.4);
+}
 :root {
         --alert-size: 120px;
       }

src/views/home/widget/editorbox.vue

@@ -58,7 +58,7 @@ import { isJson } from "../../../utils/index";
           this.formData = this.editData;
           this.formData.tableName = this.tableName;
           this.formData.spaceType = "EPSG:4326";
-          postMethodCommon("http://223.99.16.253:9006/geoserver/updateLayerData",this.formData).then(res=>{
+          postMethodCommon("http://221.2.83.254:9006/geoserver/updateLayerData",this.formData).then(res=>{
             let name = this.formData.name ? this.formData.name : null; 
             this.$message({type:"success",message:"修改成功"});
             this.$emit("close",name);

src/views/home/widget/findsource.vue

@@ -0,0 +1,209 @@
+<template>
+<div class='find-source-container'>
+    <div class="title">设置查找类型
+        <div class="all-checkbox" @click="selectAll">
+            <div class="checkbox" >
+                <i class="el-icon el-icon-check"  v-show="checkAll"></i>
+            </div>
+             &nbsp;&nbsp;&nbsp;全选
+        </div>
+    </div>
+    <div class="content-container">
+        <div class="item" v-for="(item,index) in checkOptions" :key="index">
+            <div class="checkbox" @click="selectOne(index)">
+                <i class="el-icon el-icon-check" v-show="item.checked"></i>
+            </div>
+            <div class="label"> {{ item.label }} </div>
+        </div>
+    </div>
+    <div class="operate-container">
+        <el-button type="primary" size="small" style="margin-right:12px;" @click="submit">确定</el-button>
+    </div>
+</div>
+</template>
+
+<script>
+
+export default {
+   components: {},
+   props:[],
+   data() {
+    return {
+        checkAll:false,
+        checkedList:[],
+        checkOptions:[
+            {
+                label:"护林员",
+                checked:false,
+                tableRef:"hulinyuan"
+            },
+            {
+                label:"消防员",
+                checked:false,
+                tableRef:"xiaofangyuan"
+            },{
+                label:"网格员",
+                checked:false,
+                tableRef:"wanggeyuan"
+            },
+            {
+                label:"水库",
+                checked:false,
+                tableRef:"shp_1686208472"
+            },{
+                label:"蓄水池",
+                checked:false,
+                tableRef:"shp_1686209056"
+            },{
+                label:"塘坝",
+                checked:false,
+                tableRef:"shp_1686208946"
+            },{
+                label:"防火驿站",
+                checked:false,
+                tableRef:"shp_1686204679"
+            },{
+                label:"护林点",
+                checked:false,
+                tableRef:"shp_1686204804"
+            },{
+                label:"检查点",
+                checked:false,
+                tableRef:"shp_1686204937"
+            },{
+                label:"检查站",
+                checked:false,
+                tableRef:"shp_1686205018"
+            },{
+                label:"瞭望台",
+                checked:false,
+                tableRef:"shp_1686205091"
+            },{
+                label:"向导",
+                checked:false,
+                tableRef:"shp_1686205251"
+            },{
+                label:"物资储备",
+                checked:false,
+                tableRef:"shp_1686205187"
+            },{
+                label:"驻防队伍",
+                checked:false,
+                tableRef:"shp_1692148217"
+            },{
+                label:"视频监控",
+                checked:false,
+                tableRef:"monitornest"
+            }
+        ],
+        
+    };
+   },
+   computed: {},
+   watch: {},
+   methods: {
+    selectAll(){
+        this.checkAll = !this.checkAll
+        if(this.checkAll){
+            this.checkOptions.forEach((item,index)=>{
+                this.checkOptions[index].checked = true
+            })
+        }else{
+            this.checkOptions.forEach((item,index)=>{
+                this.checkOptions[index].checked = false
+            })
+        }
+    },
+    selectOne(index){
+        this.checkOptions[index].checked = !this.checkOptions[index].checked
+    },
+    submit(){
+        let resultArr = [];
+        this.checkOptions.forEach((item,index)=>{
+            if(item.checked){
+                resultArr.push(item);
+            }
+        })
+        this.$emit("setFilterOptions",resultArr)
+    }
+   },
+   created() {
+   
+   },
+   mounted() {
+    
+   },
+   destroyed() {
+   
+   },
+}
+</script>
+
+<style scoped>
+.find-source-container{
+    width:100%;
+    height:100%;
+    background-size:100% 100%;
+    background:url(/img/find_source_bg.png);
+    background-repeat: no-repeat;
+}
+.title{
+    height:60px;
+    line-height:60px;
+    font-size:20px;
+    text-indent: 12px;
+    color:#fff;
+}
+
+.title .all-checkbox{
+    height:40px;
+    padding:10px;
+    line-height:36px;
+    float:right;
+    font-size:14px;
+    margin-right:12px;
+    text-indent:0px;
+    cursor:pointer;
+}
+.content-container{
+    width:100%;
+    height: calc( 100% - 100px);
+
+}
+
+.content-container .item{
+    width:120px;
+    height:42px;
+    line-height:34px;
+    padding:0px 8px;
+    float:left;
+    background:#0E2320;
+    border:1px solid #1C4D49;
+    border-radius:3px;
+    margin:6px;
+    cursor: pointer;
+}
+ .checkbox{
+    width:16px;
+    height:16px;
+    border:1px solid #07A0AD;
+    background:#0F3D41;
+    float:left;
+    padding:0px;
+    line-height:16px;
+    text-align: center;
+    color:#E8A700;
+    font-weight: bold;
+}
+
+.content-container .item .label{
+    font-size:14px;
+    color:#E8A700;
+}
+.operate-container{
+    width:100%;
+    height:40px;
+    text-align: right;
+    text-indent: 12px;
+}
+</style>

src/views/home/widget/findsourceitem.vue

@@ -0,0 +1,426 @@
+<template>
+    <div class='find-source-container'>
+        <div class="title">
+            防火资源
+            <div class="setButton" @click="selectAll" v-if="false">
+                <div class="checkbox" >
+                    <i class="el-icon el-icon-check"  v-show="checkAll"></i>
+                </div>
+                 &nbsp;&nbsp;&nbsp;设置
+            </div>
+        </div>
+
+        <div class="distance-container">
+            <div class="distance-item" v-for="(item,index) in distanceOptins" :key="index" @click="distanceChange(item,index)">
+                <div class="checkbox" :style="{'background': item.checked ? '#108eff':'none'}"></div>
+                {{ item.label }}
+            </div>
+        </div>
+
+        <div class="operate-container">
+            <div class="filter-button"  v-for="(item,index) in filterOptions" :key="index" :style="{'background':item.checked?'linear-gradient(180deg, #3C9C92 0%, #1C6359 100%)':'#0E2320','color':item.checked?'#ffffff':''}"
+                @click="filterChange(index)"
+            >{{ item.label }}</div>
+        </div>
+
+        <!--  -->
+    
+        <div class="content-container">
+            <div class="content-item" v-for="(item,index) in list" :key="index">
+                <p class="content-item-name">{{ item.name }}</p>
+                <p class="info">
+                    <span style="padding:4px 6px;background:#14332F;color:#fff;margin-right:12px;">距离：<span style="color:#E8A700;">{{ item.distance }}Km</span></span>
+                    <span style="padding:4px 6px;background:#14332F;color:#fff;margin-right:12px;">预计时间：<span style="color:#E8A700;">25分钟</span></span>
+                </p>
+                <div class="icon-container">
+                    <img src="/img/homeimg/to-position-icon.png" @click="toPosition([item.lng,item.lat],item.name)" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+    </template>
+    <script>
+import { getMethodCommon } from '../../../api/common';
+import { parse } from '../lib/handleGeojson';
+import * as turf from '@turf/turf'
+    
+    export default {
+       components: {},
+       props:["options","currentInfo"],
+       data() {
+        return {
+            filterOptions:[],
+            distanceOptins:[
+                {
+                    label:"全部",
+                    value:0,
+                    checked:true,
+                },{
+                    label:"1Km",
+                    value:1000,
+                    checked:false,
+                },{
+                    label:"5Km",
+                    value:5000,
+                    checked:false,
+                },{
+                    label:"10Km",
+                    value:10000,
+                    checked:false,
+                }
+            ],
+            checkAll:false,
+            checkedList:[],
+            //   
+            checkOptions:[
+                {
+                    label:"检查站",
+                    checked:true
+                },{
+                    label:"防火驿站",
+                    checked:false
+                },{
+                    label:"护林点",
+                    checked:false
+                },{
+                    label:"检查点",
+                    checked:false
+                },{
+                    label:"检查站",
+                    checked:false
+                },{
+                    label:"瞭望台",
+                    checked:false
+                },{
+                    label:"向导",
+                    checked:false
+                },{
+                    label:"物资储备",
+                    checked:false
+                },{
+                    label:"水库",
+                    checked:false
+                },{
+                    label:"塘坝",
+                    checked:false
+                },{
+                    label:"蓄水池",
+                    checked:false
+                }
+            ],
+            listQuery:{
+                distance:0,
+                tablename:null,
+                pageIndex:1,
+                pageSize:12,
+            },
+            list:[],
+            markGraphicLayer:null,
+        };
+       },
+       computed: {},
+       watch: {},
+        methods: {
+            toPosition(lngLat,name){
+                window.globalmap.flyToPoint(lngLat,{radius:2000,"pitch":-90});
+                // 第一次添加时叠加图层
+                if (this.markGraphicLayer == null) {
+                    this.markGraphicLayer = new mars3d.layer.GraphicLayer();
+                    window.globalmap.addLayer(this.markGraphicLayer);
+                }else{
+                    this.markGraphicLayer.clear();
+                }
+
+                let graphic = new mars3d.graphic.BillboardEntity({
+                        position: lngLat,
+                        style: {
+                            image: "/img/xiangdao.png",
+                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                            clampToGround: true,
+                            scale: 0.4,
+                            label: {
+                                text: name,
+                                font_size: 12,
+                                color: "#ffffff",
+                                pixelOffsetY: -48,
+                            },
+                        },
+                        pointerEvents: true,
+                    });
+                    
+                    this.markGraphicLayer.addGraphic(graphic);
+            },
+            distanceChange(item,index){
+                this.distanceOptins.forEach((it,idx)=>{
+                    this.distanceOptins[idx].checked = false;
+                })
+                this.distanceOptins[index].checked = true;
+                this.listQuery.distance = this.distanceOptins[index].value;
+                this.getList();
+            },
+            filterChange(index){
+                this.filterOptions.forEach((it,idx)=>{
+                    this.filterOptions[idx].checked = false;
+                })
+                this.filterOptions[index].checked = true;
+                this.listQuery.tablename = this.filterOptions[index].tableRef;
+                this.getList();
+            },
+            selectAll(){
+                this.checkAll = !this.checkAll
+                if(this.checkAll){
+                    this.checkOptions.forEach((item,index)=>{
+                        this.checkOptions[index].checked = true
+                    })
+                }else{
+                    this.checkOptions.forEach((item,index)=>{
+                        this.checkOptions[index].checked = false
+                    })
+                }
+            },
+            selectOne(index){
+                this.checkOptions[index].checked = !this.checkOptions[index].checked
+            },
+            getList(){
+                getMethodCommon("/DataMaintenance/LoadDataInfo",this.listQuery).then(res=>{
+                    if(res.code == 200){
+                        this.list = res.data;
+                        this.list.forEach((item,index)=>{
+                            let coordinates = parse(item.geom).coordinates;
+                            item.lng = coordinates[0]
+                            item.lat = coordinates[1]
+                            if(item.lng && item.lat){
+                                let from = turf.point([item.lng,item.lat]);
+                                let to = turf.point([this.currentInfo.lng,this.currentInfo.lat]);
+                                let options = {units: 'kilometers'};
+                                let distance = turf.distance(from, to, options);
+                                item.distance = distance.toFixed(2)
+                                console.log("distance",distance)
+                            }else{
+                                item.distance = 0
+                            }
+                        })
+                        
+                    }
+                })
+            },  
+            submit(){
+                
+            }
+        },
+        created() {
+            this.filterOptions = [...this.options]
+            console.log("currentInfo",this.currentInfo);
+            this.listQuery.lat = this.currentInfo.lat;
+            this.listQuery.lng = this.currentInfo.lng;
+            this.filterChange(0)
+        },
+        mounted() {
+            
+        },
+        destroyed() {
+        
+        },
+    }
+    </script>
+    
+    <style scoped>
+    .find-source-container{
+        width:100%;
+        height:100%;
+        background-size:100% 80%;
+        background:url(/img/find-source-item.png);
+        background-repeat: no-repeat;
+    }
+    
+    .title{
+        height:60px;
+        line-height:60px;
+        font-size:20px;
+        text-indent: 12px;
+        color:#fff;
+    }
+    
+    .title .all-checkbox{
+        height:40px;
+        padding:10px;
+        line-height:36px;
+        float:right;
+        font-size:14px;
+        margin-right:12px;
+        text-indent:0px;
+        cursor:pointer;
+    }
+
+    .distance-container{
+        width:100%;
+        height:40px;
+        padding:20px 20px;
+    }
+
+    .distance-container .distance-item{
+        float:left;
+        margin:0px;
+        margin-right:12px;
+    }
+
+    .distance-item .checkbox{
+        width:12px;
+        height:12px;
+        border-radius: 50%;
+        margin-top:5px;
+        margin-right:5px;
+        cursor:pointer;
+    }
+    .content-container{
+        width:100%;
+        height: calc( 100% - 100px);
+        padding-right:15px;
+    }
+    
+    .content-container .item{
+        width:120px;
+        height:42px;
+        line-height:34px;
+        padding:0px 8px;
+        float:left;
+        background:#0E2320;
+        border:1px solid #1C4D49;
+        border-radius:3px;
+        margin:6px;
+        cursor: pointer;
+    }
+     .checkbox{
+        width:16px;
+        height:16px;
+        border:1px solid #07A0AD;
+        background:#0F3D41;
+        float:left;
+        padding:0px;
+        line-height:16px;
+        text-align: center;
+        color:#E8A700;
+        font-weight: bold;
+    }
+    
+    .content-container .item .label{
+        font-size:14px;
+        color:#E8A700;
+    }
+    .operate-container{
+        width: calc( 100% - 15px);
+        height:54px;
+        text-align:left;
+        line-height:30px;
+        /* overflow-y:hidden; */
+        padding:10px 0px;
+        margin:0px 15px;
+        overflow: hidden;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+
+    ::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 0;
+}
+
+::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+  background: transparent;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  padding-top: 100px;
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.2);
+  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 0 rgba(0, 0, 0, 0.1),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+::-webkit-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+    .filter-button{
+        width:70px;
+        height:30px;
+        border:1px solid #07A0AD;
+        border-radius: 20px;
+        background:#0E2320;
+        border:10px;
+        margin-right:12px;
+        margin-bottom:12px;
+        cursor:pointer;
+        display: inline-block;
+        text-align: center;
+    }
+
+
+    .content-container{
+        width: calc( 100% - 24px);
+        max-height:360px;
+        padding:0px;
+        overflow-y:auto;
+        margin:15px;
+        padding-right:6px;
+        margin-right:6px;
+    }
+    .content-container .content-item{
+        width:100%;
+        height:90px;
+        background: linear-gradient(179deg, #0E2320 0%, #122E2A 100%);
+        box-shadow: inset 0px 4px 5px 0px rgba(0,0,0,0);
+        border-radius: 1px;
+        border: 1px dashed #666;
+        margin-bottom:12px;
+        padding:0px 12px;
+        position:relative;
+    }
+    .content-container .content-item p{
+        width: calc( 100% - 80px);
+    }
+    .content-container .content-item .content-item-name{
+        font-size:15px;
+        color:#fff;
+        padding:8px 0px;
+        border-bottom: 1px solid #224C47;
+        width: calc( 100% - 80px);
+    }
+
+    .icon-container{
+        float:right;
+        width:78px;
+        height:80px;
+        line-height:80px;
+        position:absolute;
+        right:0px;
+        top:4px;
+        text-align:center;
+    }
+
+    .icon-container img{
+        width:36px;
+        height:36px;
+        margin-top:15px;
+        cursor:pointer;
+    }
+/* 
+
+*/
+    </style>

src/views/home/widget/layerplug.vue

@@ -148,7 +148,7 @@ export default {
             _this.checkPidArr = []
             axios({
                 method: "get",
-                url: "http://223.99.16.253:9006/applicationMars/getApplicationInfo/feixian"
+                url: "http://221.2.83.254:9006/applicationMars/getApplicationInfo/feixian"
             }).then(res=>{
                 this.listData = res.data.data
                 this.listData.forEach(item =>{

src/views/home/widget/monitor.vue

@@ -0,0 +1,391 @@
+<template>
+    <div class="monitor-container">
+        <div class="monitor-list-title">
+            <span @click="active = 1;" :style="{color:active==1? '#e48f19':'#fff'}">市应急指挥视频监控</span>
+            <span @click="active = 2;"  :style="{color:active==2? '#e48f19':'#fff',margin:'0px 20px'}">费县森林防火视频监控</span>
+
+            <el-input v-model="searchKeyWord" type="text" placeholder="请输入监控名称……" size="mini" style="width:300px;margin-right:50px;margin-left:200px;"></el-input>
+
+            <el-button icon="el-icon-search" size="mini" @click="search()" >搜索</el-button>
+        </div>
+        
+        <div class="yj-monitors" v-if="active == 1">
+            <div class="monitor-list-container">
+                <div class="monitor-list-scroll-container">
+                    <div class="monitor-class-name" @click="monitor2Show = !monitor2Show">
+                        <i class="el-icon el-icon-s-grid"></i>
+                        市应急指挥视频监控({{ monitorList2.length }})
+                        <i class="el-icon  el-icon-arrow-down" style="float:right;margin-top:16px;"></i>
+                    </div>
+                    <div  v-show="monitor2Show" :key="playRandom">
+                        <div class="monitor-item" v-for="(item,index) in monitorList2" :key="index" @click="playVideo(item,index)" v-show="item.show" :style="{color:playArrays[0].match(item.jkdgbidzlkjg)?'rgb(228, 143, 25)':'#cfcfcf'}">
+                            <i class="el-icon el-icon-video-camera"></i>
+                            {{ item.jkdmckjg }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="video-container">
+                <div >
+                    <EasyPlayer 
+                    v-for="(item,index) in playArrays" :key="index"
+                    style="width:900px;height:500px;"
+                    :videoUrl="item"
+                    :aspect="aspect"
+                    live
+                    @message="$message"
+                    :fluent="fluent"
+                    :autoplay="true"
+                    stretch
+                    ></EasyPlayer>
+                </div>
+            </div>
+        </div>
+
+        <div class="hk-monitors" v-if="active == 2">
+        
+            <div class="hk-monitor-list-container">
+                <div v-for="(item,index) in monitorList" :key="index" class="hk-monitor-item" v-show="item.show">
+                    <p style="font-size:14px;color:#cfcfcf">
+                        <i class="el-icon el-icon-video-camera" style="font-size:20px;"></i>&nbsp;&nbsp;{{ item.cameraname }}
+                    </p>
+                    <p style="font-size:14px;text-align:right;">
+                        
+                        <i class="el-icon-plus" @click="addPlayeList(item)">添加</i>
+                        <!-- &nbsp;&nbsp;
+                        <i class="el-icon-location-outline">定位</i> -->
+                    </p>
+                </div>
+            </div>
+            <div class="hk-monitor-mang">
+                <el-tag
+                    v-for="(tag,index) in hkPlayList"
+                    :key="index"
+                    closable
+                    size="mini"
+                    :disable-transitions="false"
+                    style="margin-right:6px;"
+                    @close="handleClose(index)">
+                    {{tag.cameraname}}
+                </el-tag>
+                <el-button type="primary" size="mini" style="float:right;margin-left:12px;" icon="el-icon-video-camera" @click="previewHkMonitor">预览</el-button>
+                &nbsp;
+                <el-button type="warning" size="mini" style="float:right;" @click="HKMonitorClear" icon="el-icon-delete">清除</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import EasyPlayer from '@easydarwin/easyplayer'
+import axios  from 'axios';
+import { getMethodCommon } from '../../../api/common';
+
+import 'video.js/dist/video-js.css'
+import videojs from "video.js";
+import "videojs-contrib-hls";
+
+export default{
+    components:{
+        EasyPlayer,
+    },
+    data(){
+        return {
+            active:1,
+            diviceIds:"550810a41e024bc884fcbd750529b3ce,d0442e062c6c4c5982ee6fe0b5935126,9039ca8768b7412aae7a6a46b6dec3a5",
+            ids:["550810a41e024bc884fcbd750529b3ce","d0442e062c6c4c5982ee6fe0b5935126","9039ca8768b7412aae7a6a46b6dec3a5"],
+            videoUrl:"http://221.2.83.254:7012/live/37130100181328000390.m3u8",
+            aspect:"16:9",
+            fluent:true,
+            playArrays:[],
+            monitorShow:false,
+            monitor2Show:true,
+            monitorList:[],
+            monitorList2:[],
+            player:null,
+            hkPlayList:[],
+            searchKeyWord:null,
+            playRandom:1,
+        }
+    },
+    created(){
+        this.getHKmonitorlist();
+        this.getYJmonitorlist();
+    }, 
+    mounted() {
+        let _this = this;
+        setTimeout(()=>{
+            
+        },5000)
+    },
+ 
+    methods:{
+        search(){
+            this.playRandom = Math.random();
+
+            // 如果关键字为空
+            if(!this.searchKeyWord){
+                this.monitorList.forEach((item,index)=>{
+                    this.monitorList[index].show = true;
+                })
+
+                this.monitorList2.forEach((item,index)=>{
+                    this.monitorList2[index].show = true;
+                })
+                return;
+            }
+
+            if(this.active == 1 && this.searchKeyWord){
+                this.monitorList2.forEach((item,index)=>{
+                    this.monitorList2[index].show = false;
+                    if(item.jkdmckjg.match(this.searchKeyWord)){
+                        this.monitorList2[index].show = true;
+                    }
+                })
+                
+            }
+            
+            if(this.active == 2 && this.searchKeyWord){
+                this.monitorList.forEach((item,index)=>{
+                    this.monitorList[index].show = false;
+                    if(item.cameraname.match(this.searchKeyWord)){
+                        this.monitorList[index].show = true;
+                    }
+                })
+            }
+
+
+            
+        },
+        HKMonitorClear(){
+            this.hkPlayList = [];
+        },
+        previewHkMonitor(){
+            let ids = "";
+            this.hkPlayList.forEach((item,index)=>{
+                if(index<this.hkPlayList.length - 1){
+                    ids=ids+item.cameraindexcode+","
+                }else{
+                    ids=ids+item.cameraindexcode
+                }
+            })
+            this.$emit("previewHkMonitor",ids)
+        },
+        handleClose(index){
+            this.hkPlayList.splice(index,1);
+        },
+        addPlayeList(obj){
+            if(this.hkPlayList.length>=25){
+                this.$message({
+                    type:"error",
+                    message:"当前最多支持25路视频同时播放"
+                })
+                return;
+            }
+            let it = this.hkPlayList.find((item,index)=>{
+                return item.cameraindexcode == obj.cameraindexcode;
+            })
+
+            if(it){
+                this.$message({
+                    type:"warning",
+                    message:"列表中已存在",
+                });
+            }else{
+                this.hkPlayList.push(obj);
+            }
+        },
+        getVideo() {
+            videojs("myvideo",{
+                bigPlayButton: false,
+                textTrackDisplay: false,
+                posterImage: true,
+                errorDisplay: false,controlBar: true
+            },
+            function() {
+                this.play();
+            });
+        },
+        playVideo(item,index){
+            this.playRandom = Math.random();
+            if(this.playArrays.find((it,idx)=>{
+                return it == "http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8"
+            })){
+                this.$message({
+                    type:"error",
+                    message:"已经添加至播放列表"
+                })
+                return;
+            }
+           
+            this.playArrays[0] = "http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8"
+        },
+
+        // 获取海康监控列表
+        getHKmonitorlist(){
+            axios({
+                method:"get",
+                url:"http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Amonitornest&maxFeatures=10000&outputFormat=application%2Fjson",
+            }).then(res=>{
+                res.data.features.forEach((item,index)=>{
+                    let obj = item.properties;
+                    obj.show = true;
+                    this.monitorList.push(obj);
+                    
+                })
+                
+            })
+        },
+        // 市应急局监控设备
+        getYJmonitorlist(){
+            getMethodCommon("/YingJiJu/LoadCameraInfo?county=费县&pageIndex=1&pageSize=999").then(res=>{
+                if(res.code ==  200){
+                    this.monitorList2 = [...res.data];
+                    this.monitorList2.forEach((item,index)=>{
+                        this.monitorList2[index].show = true;
+                        if(index==0){
+                            this.playArrays.push("http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8")
+                        }
+                    })
+                }
+            })
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+
+.monitor-container{
+    width:100%;
+    height:100%;
+    background:#30645eaa;
+    padding:15px;
+    background-image: url(/img/biaohui.png);
+    background-size:100% 100%;
+}
+
+.hk-monitors{
+    width:100%;
+    height: calc( 100% - 140px);
+}
+
+.yj-monitors{
+    width:100%;
+    height: calc( 100% - 60px);
+}
+.hk-monitor-list-container{
+    width:100%;
+    height:100%;
+    overflow-y: auto;
+}
+
+.hk-monitor-mang{
+    width:100%;
+    padding:15px 10px;
+}
+.monitor-list-container{
+    width:240px;
+    height:100%;
+    float:left;
+}
+
+.monitor-list-title{
+    width:100%;
+    height:60px;
+    font-size:20px;
+    text-indent:40px;
+    color:#fff;
+    cursor:pointer;
+}
+
+.monitor-list-scroll-container{
+    width: calc( 100% - 12px);
+    height: calc(100% - 10px);
+    overflow-y: auto;
+    padding-right:12px;
+}
+
+.monitor-class-name{
+    width:100%;
+    height:42px;
+    line-height:42px;
+    color:#fff;
+}
+.monitor-item{
+    width:100%;
+    height:24px;
+    line-height:24px;
+    color:#cfcfcf;
+    font-size:12px;
+    text-indent: 4px;
+    overflow: hidden;
+    cursor: pointer;
+}
+.monitor-item:hover{
+    background:#30645e;
+}
+
+.video-container{
+    width: calc( 100% - 240px);
+    float:right;
+    height:100%;
+}
+
+.layout-container{
+    width:100%;
+    height:50px;
+}
+
+.hk-monitor-item{
+    width:270px;
+    height:90px;
+    background:#30645eaa;
+    float:left;
+    margin:8px;
+    padding:12px;
+    color:#cfcfcf;
+}
+::-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 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.4);
+  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 0 rgba(0, 0, 0, 0.1),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+  background-color: #797979;
+}
+
+::-webkit-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+::v-deep .el-tag{
+    background-color:#30645eaa !important;
+    border-color:#30645eaa !important;
+}
+</style>

src/views/home/widget/mulHKmonitor.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="box-container">
+          <iframe
+              id = "iframe"
+              ref="fIframe"
+              scrolling="no"
+              frameborder ="0"
+              width="100%"
+              height="100%"
+              src="/monitor/hk/mulindex.html"     
+              >
+          </iframe>
+      </div>
+  </template>
+  
+  <script>
+    export default {
+      name: 'monitorbox',
+      props:["deviceId","channelId"],
+      data(){
+          return{
+              list:[],
+              monitorPlayer:null,
+          }
+      },
+      mounted(){
+          let arr = [
+              this.deviceId,
+              this.deviceId,
+              "23604396",
+              "221.2.83.54",
+              1443,
+              "NZJ8L3bxCOOV6rtTFjsx"
+          ]
+  
+          let _this = this;
+  
+          this.$refs.fIframe.onload = function () {
+              _this.$refs.fIframe.contentWindow.postMessage(arr)
+          }
+  
+          window.addEventListener('message', (e)=>{
+              this.$emit("closeMonitor")
+          })
+      }
+    }
+  </script>
+  
+  <style scoped>
+
+      .box-container{
+          width: 100vw;
+          height: 100vh;
+      }
+
+      .table-header{
+          width: calc( 100% - 10px);
+          height:25px;
+          color:#fff;
+          text-align: center;
+      }
+      .table-header div{
+          float:left;
+          width:25%;
+          border-bottom:1px dashed #00FFF0;
+          padding-bottom:8px;
+      }
+      .table-body{
+          width:100%;
+          height: calc( 100% - 40px);
+          overflow-y: auto;
+      }
+  
+       .table-body .item{
+           width:100%;
+           height:36px;
+           background: #00ffee2f;
+           font-size:12px;
+           text-align: center;
+           line-height:36px;
+           cursor:pointer;
+       }
+  
+       .table-body .item:nth-child(2n){
+           background:#00ffee50;
+       }
+      
+      .table-body .item div{
+          float:left;
+          width:25%;
+          color:#eee;
+          overflow: hidden;
+          height:36px;
+      }
+  
+       ::-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)
+  }
+  
+  ::-webkit-scrollbar-thumb:active {
+    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
+    background-color: rgba(0, 0, 0, .5)
+  }
+  
+  </style>

src/views/home/widget/mulMonitorManagement.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class="monitor-container">
+        <div class="monitor-list-container">
+            <div class="monitor-list-title">
+                费县森林防火视频监控
+            </div>
+            <div class="monitor-list-scroll-container">
+                <div class="monitor-class-name" @click="monitorShow = !monitorShow">
+                    <i class="el-icon el-icon-s-grid"></i>
+                    费县森林防火视频监控({{ monitorList.length }})
+                    <i class="el-icon  el-icon-arrow-down" style="float:right;margin-top:16px;"></i>
+                </div>
+                <div v-show="monitorShow">
+                    <div class="monitor-item" v-for="(item,index) in monitorList" :key="index" >
+                        <i class="el-icon el-icon-video-camera"></i>
+                        {{ item.cameraname }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import axios  from 'axios';
+import { getMethodCommon } from '../../../api/common';
+
+import 'video.js/dist/video-js.css'
+import videojs from "video.js";
+import "videojs-contrib-hls";
+
+export default{
+    components:{
+
+    },
+    data(){
+        return {
+            diviceIds:"550810a41e024bc884fcbd750529b3ce,d0442e062c6c4c5982ee6fe0b5935126,9039ca8768b7412aae7a6a46b6dec3a5",
+            ids:["550810a41e024bc884fcbd750529b3ce","d0442e062c6c4c5982ee6fe0b5935126","9039ca8768b7412aae7a6a46b6dec3a5"],
+            videoUrl:"http://221.2.83.254:7012/live/37130100181328000390.m3u8",
+            aspect:"16:9",
+            fluent:true,
+            playArrays:[],
+            monitorShow:false,
+            monitor2Show:true,
+            monitorList:[],
+            monitorList2:[],
+            player:null,
+        }
+    },
+    created(){
+        this.getHKmonitorlist();
+        this.getYJmonitorlist();
+    }, 
+    mounted() {
+        let _this = this;
+        setTimeout(()=>{
+            
+        },5000)
+    },
+ 
+    methods:{
+        getVideo() {
+            videojs("myvideo",{
+                bigPlayButton: false,
+                textTrackDisplay: false,
+                posterImage: true,
+                errorDisplay: false,controlBar: true
+            },
+            function() {
+                this.play();
+            });
+        },
+        playVideo(item,index){
+            if(this.playArrays.find((it,idx)=>{
+                return it == "http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8"
+            })){
+                this.$message({
+                    type:"error",
+                    message:"已经添加至播放列表"
+                })
+                return;
+            }
+            if(this.playArrays.length>=4){
+                this.playArrays.shift();
+            }
+            this.playArrays.push("http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8")
+        },
+
+        // 获取海康监控列表
+        getHKmonitorlist(){
+            axios({
+                method:"get",
+                url:"http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Amonitornest&maxFeatures=10000&outputFormat=application%2Fjson",
+            }).then(res=>{
+                res.data.features.forEach((item,index)=>{
+                    let obj = item.properties;
+                    this.monitorList.push(obj);
+                    if(index<=3){
+                        this.playArrays.push("http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8")
+                    }
+                })
+                
+            })
+        },
+        // 市应急局监控设备
+        getYJmonitorlist(){
+            getMethodCommon("/YingJiJu/LoadCameraInfo?county=费县&pageIndex=1&pageSize=999").then(res=>{
+                if(res.code ==  200){
+                    this.monitorList2 = res.data;
+
+                }
+            })
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+
+.monitor-container{
+    width:100%;
+    height:100%;
+    background:#30645eaa;
+    padding:15px;
+    background-image: url(/img/biaohui.png);
+    background-size:100% 100%;
+}
+
+.monitor-list-container{
+    width:240px;
+    height:100%;
+    float:left;
+}
+
+.monitor-list-title{
+    width:100%;
+    height:60px;
+    font-size:20px;
+    text-indent:15px;
+    color:#fff;
+    cursor:pointer;
+}
+
+.monitor-list-scroll-container{
+    width: calc( 100% - 12px);
+    height: calc(100% - 70px);
+    overflow-y: auto;
+    padding-right:12px;
+}
+
+.monitor-class-name{
+    width:100%;
+    height:42px;
+    line-height:42px;
+    color:#fff;
+}
+.monitor-item{
+    width:100%;
+    height:24px;
+    line-height:24px;
+    color:#cfcfcf;
+    font-size:12px;
+    text-indent: 4px;
+    overflow: hidden;
+    cursor: pointer;
+}
+.monitor-item:hover{
+    background:#30645e;
+}
+
+.video-container{
+    width: calc( 100% - 240px);
+    float:right;
+    height:100%;
+}
+
+.layout-container{
+    width:100%;
+    height:50px;
+}
+
+::-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 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.4);
+  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 0 rgba(0, 0, 0, 0.1),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+  background-color: #797979;
+}
+
+::-webkit-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+</style>

src/views/home/widget/onlineuserbox.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="onebuttoncall-container">
-      <div class="title">在线人员 <span style="font-size:14px;color:#aaa;">（{{ list.length }}人）</span></div>
+      <div class="title">在线人员 
+        <span style="font-size:14px;color:#aaa;">（{{ list.length }}人）</span>
+
+           <span style="font-size:14px;float:right;margin-right:30px;">
+
+            显示人员位置：
+            <el-switch
+            v-model="showLayer"
+            active-color="#13ce66"
+            >
+            </el-switch>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+           </span>
+        </div>
 
         <div class="call-text-container" v-if="callTextShow">
             <div class="call-title">呼叫内容</div>
@@ -11,6 +24,7 @@
                 <el-button type="primary" size="small" :disabled="loading" @click="callPhone">呼叫</el-button>
             </div>
         </div>
+
       <div class="box-container">
             <el-input type="text" size="mini" v-model="onlineusername" style="width:250px;margin-left:15px;margin-right:15px;" placeholder="请输入人员姓名" ></el-input>
             <el-button type="primary" size="mini" icon="el-icon-search" @click="filterList">搜索</el-button>
@@ -66,6 +80,7 @@ import {compareArray} from '../lib/compareArray.js'
                 pageIndex:1,
                 pageSize:12
             },
+            showLayer:false,
             checkPhoneArr:[],
             checkRandom:1,
             checkList:[],
@@ -76,9 +91,15 @@ import {compareArray} from '../lib/compareArray.js'
             phones:null,
             markGraphicLayerArr:null,
             topList:[],
+            teamIcons:{
+
+            }
         }
     },
     created(){
+        // 获取队伍图标信息
+        // this.getTeamIcon();
+
         this.topList =  localStorage.getItem("topList") ? JSON.parse(localStorage.getItem("topList")) : [];
         
         if(window.globalmap){
@@ -96,9 +117,26 @@ import {compareArray} from '../lib/compareArray.js'
 
       onlineusername:function(e){
         this.filterList();
+      },
+      showLayer:function(e){
+        if(!e){
+            if(this.markGraphicLayer){
+                this.markGraphicLayer.clear();
+                this.oldList = [];
+            }
+        }
       }
     },
     methods:{
+        getTeamIcon(){
+            getMethodCommon("/FireCodePC/GetUserUnit").then(res=>{
+                if(res.code == 200){
+                    res.data.forEach((item,index)=>{
+                        this.teamIcons.item['unitName'] = item.imaUrl
+                    })
+                }
+            })
+        },
         filterList(){
             this.showList = [];
             this.list.forEach((item,index)=>{
@@ -244,22 +282,29 @@ import {compareArray} from '../lib/compareArray.js'
           })
         },
         addLayerPoint() {
+            if(!this.showLayer){
+                if(this.markGraphicLayer){
+                    this.markGraphicLayer.clear();
+                }
+                return;
+            }
             // 通过新老数组比较，获取新增、删除、更新的数据
             let compareResult = compareArray(this.oldList,this.list,'createId')
             // 如果有新增的人员，则添加图标
             if(compareResult.add.length > 0){
                 // 第一次添加时叠加图层
-                // if (this.markGraphicLayer == null) {
+                if (this.markGraphicLayer == null) {
-                //     this.markGraphicLayer = new mars3d.layer.GraphicLayer();
+                    this.markGraphicLayer = new mars3d.layer.GraphicLayer();
-                //     window.globalmap.addLayer(this.markGraphicLayer);
+                    window.globalmap.addLayer(this.markGraphicLayer);
-                // }
+                }
                 compareResult.add.forEach((item, index) => {
                     let showVideo = item.type == '人员' ? 'block':'none';
+                    let img = item.type == '人员' ? 'jiuyuanrenyuan' : 'duijiangji'
                     let graphic = new mars3d.graphic.BillboardEntity({
                         id:item.createId,
                         position: [item.lng, item.lat],
                         style: {
-                            image: "/img/jiuyuanrenyuan.png",
+                            image: "/img/"+img+".png",
                             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                             clampToGround: true,
@@ -313,26 +358,27 @@ import {compareArray} from '../lib/compareArray.js'
                         pointerEvents: true,
                     });
 
-                    window.graphicLayer.addGraphic(graphic);
+                    this.markGraphicLayer.addGraphic(graphic);
                     // 初始化位置
-                    graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),0);
+                    // graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),0);
                 });
             }
             // 如果相同的数据，则更新坐标信息
             if(compareResult.same.length > 0){
                 compareResult.same.forEach((item,index)=>{
-                    let graphic = window.graphicLayer.getGraphicById(item.createId);
+                    let graphic = this.markGraphicLayer.getGraphicById(item.createId);
-                    if (graphic.isPrivate) {
+                    graphic.setCallbackPosition([item.lng,item.lat]);
-                        return
+                    // if (graphic.isPrivate) {
-                    } 
+                    //     return
-                    graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),5);
+                    // } 
+                    // graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),5);
                 })
             }
             // 如果有删除的数据，则删除图标
             if(compareResult.delete.length > 0){
                 compareResult.delete.forEach((item,index)=>{
-                    let graphic = window.graphicLayer.getGraphicById(item.createId);
+                    let graphic = this.markGraphicLayer.getGraphicById(item.createId);
-                    window.graphicLayer.removeGraphic(graphic);
+                    this.markGraphicLayer.removeGraphic(graphic);
                 })
             }
             // 拷贝最新数据为老数据
@@ -340,7 +386,6 @@ import {compareArray} from '../lib/compareArray.js'
         },
         videoCall(phone){
             let userId = localStorage.getItem("userName");
-
             let wind = window.open("https://ssl.hopetrytech.com:9237?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
             wind.onload = function(){
                 wind.document.title = "视频通话";

src/views/home/widget/rightechartsdata.vue

@@ -63,211 +63,208 @@
         this.getList();
       },
       methods:{
-          getList(){
+        getList(){
-              let params= [];
+            let params= [];
-              this.query.forEach((item,index)=>{
+            this.query.forEach((item,index)=>{
-                  params.push(item.tableRef);
+                params.push(item.tableRef);
-              })
-              axios({
-                  method:"post",
-                  url:BASE_URL+"/FirePrevention/GetTableListCountByTableName",
-                  data:params,
-                  headers:{
-                      'X-Token':localStorage.getItem("X-Token")
-                  }
-              }).then(res=>{
-                  let rel = res.data.data
-                  this.handleEcharts(rel)
-              })
-          },
-          handleEcharts(data){
-            let xData = []
-            let yData = []
-            data.forEach(item =>{
-                let obj = this.query.find((it,idx)=>{
-                    return it.tableRef == item.name;
-                })
-                xData.push(obj.severName)
-                yData.push(item.value)
             })
-            let option = {
+            axios({
-                tooltip: {
+                method:"post",
-                    trigger: 'axis',
+                url:BASE_URL+"/FirePrevention/GetTableListCountByTableName",
-                    axisPointer: {
+                data:params,
-                        type: 'shadow',
+                headers:{
-                    },
+                    'X-Token':localStorage.getItem("X-Token")
+                }
+            }).then(res=>{
+                let rel = res.data.data
+                this.handleEcharts(rel)
+            })
+        },
+        handleEcharts(data){
+        let xData = []
+        let yData = []
+        data.forEach(item =>{
+            let obj = this.query.find((it,idx)=>{
+                return it.tableRef == item.name;
+            })
+            xData.push(obj.severName)
+            yData.push(item.value)
+        })
+        let option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow',
                 },
-                grid: {
+            },
-                    top: '20%',
+            grid: {
-                    right: '6%',
+                top: '20%',
-                    left: '10%',
+                right: '6%',
-                    bottom: '12%',
+                left: '10%',
-                },
+                bottom: '12%',
-                xAxis: [
+            },
-                    {
+            xAxis: [
-                        type: 'category',
+                {
-                        data: xData,
+                    type: 'category',
-                        axisLine: {
+                    data: xData,
-                            lineStyle: {
+                    axisLine: {
-                                color: '#666',
+                        lineStyle: {
-                                width: 1,
+                            color: '#666',
-                            },
+                            width: 1,
-                        },
-                        axisTick: {
-                            show: false,
-                        },
-                        axisLabel: {
-                            margin: 10,
-                            color: '#D8F0FF',
-                            textStyle: {
-                                fontSize: 10,
-                            },
                         },
                     },
-                ],
+                    axisTick: {
-                yAxis: [
+                        show: false,
-                    {
+                    },
-                        axisLabel: {
+                    axisLabel: {
-                            formatter: '{value}',
+                        margin: 10,
-                            color: '#D8F0FF',
+                        color: '#D8F0FF',
-                            textStyle: {
+                        textStyle: {
-                                fontSize: 10,
+                            fontSize: 10,
-                            },
                         },
-                        axisLine: {
+                    },
+                },
+            ],
+            yAxis: [
+                {
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#D8F0FF',
+                        textStyle: {
+                            fontSize: 10,
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 0,
+                            color: '#184D9A',
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dashed',
+                            // 使用深浅的间隔色
+                            color: '#666',
+                        },
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: '数据统计',
+                    type: 'bar',
+                    data: yData,
+                    barWidth: '15px',
+                    itemStyle: {
+                        normal: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#1978E5', //  0%  处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: '#1978E5', //  100%  处的颜色
+                                    },
+                                ],
+                                global: false, //  缺省为  false
+                            },
+                            barBorderRadius: [0, 0, 0, 0],
+                            shadowColor: 'rgba(0,160,221,1)',
+                            shadowBlur: 0,
+                        },
+                    },
+                    label: {
+                        normal: {
                             show: true,
-                            lineStyle: {
+                            lineHeight: 20,
-                                width: 0,
+                            width: 80,
-                                color: '#184D9A',
+                            height: 20,
-                            },
+                            borderRadius: 200,
-                        },
+                            position: ['-0', '-20'],
-                        axisTick: {
+                            color: '#fff',
-                            show: false,
-                        },
-                        splitLine: {
-                            lineStyle: {
-                                type: 'dashed',
-                                // 使用深浅的间隔色
-                                color: '#666',
-                            },
                         },
                     },
-                ],
+                }
-                series: [
+            ],
-                    {
+        };
-                        name: '数据统计',
+        let myChart = this.$echarts.init(
-                        type: 'bar',
+            document.getElementById("echartsId")
-                        data: yData,
+        );
-                        barWidth: '15px',
+        myChart.setOption(option);
-                        itemStyle: {
+        }
-                            normal: {
-                                color: {
-                                    type: 'linear',
-                                    x: 0,
-                                    y: 0,
-                                    x2: 0,
-                                    y2: 1,
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#1978E5', //  0%  处的颜色
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#1978E5', //  100%  处的颜色
-                                        },
-                                    ],
-                                    global: false, //  缺省为  false
-                                },
-                                barBorderRadius: [0, 0, 0, 0],
-                                shadowColor: 'rgba(0,160,221,1)',
-                                shadowBlur: 0,
-                            },
-                        },
-                        label: {
-                            normal: {
-                                show: true,
-                                lineHeight: 20,
-                                width: 80,
-                                height: 20,
-                                borderRadius: 200,
-                                position: ['-0', '-20'],
-                                color: '#fff',
-                            },
-                        },
-                    }
-                ],
-            };
-            let myChart = this.$echarts.init(
-                document.getElementById("echartsId")
-            );
-            myChart.setOption(option);
-          }
-           
       }
     }
   </script>
   
   <style scoped>
-    .box{
+.box{
-        width:100%;
+    width:100%;
-        height:100%;
+    height:100%;
+}
  
-    }
+.box-title{
+    width:100%;
+    height: 17%;
+    padding-left: 35px;
+    font-size: 18px;
+    color: #fff;
+    padding-top: 4px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+}
 
-    .box-title{
+.box-container{
-        width:100%;
+    width: calc( 100% - 20px);
-        height: 17%;
+    margin:0px 15px;
-        padding-left: 35px;
+    height: 80%;
-        font-size: 18px;
+    overflow:hidden;
-        color: #fff;
+}
-        padding-top: 4px;
-        text-align: left;
-        display: flex;
-        align-items: center;
-    }
-    .box-container{
-        width: calc( 100% - 20px);
-        margin:0px 15px;
-        height: 80%;
-        overflow:hidden;
-    }
 
-  
+::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-  
-       ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
     border: 0
-  }
+}
 
-  ::-webkit-scrollbar {
+::-webkit-scrollbar {
-    height: 10px;
+height: 10px;
-    width: 10px;
+width: 10px;
-    background: transparent;
+background: transparent;
-    border-radius: 5px
+border-radius: 5px
-  }
+}
 
-  ::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
-    padding-top: 100px;
+padding-top: 100px;
-    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
+-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
-    background-color: #797979;
+background-color: #797979;
-    min-height: 28px;
+min-height: 28px;
-    border-radius: 4px;
+border-radius: 4px;
-    background-clip: padding-box
+background-clip: padding-box
-  }
+}
 
-  ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-    border: 0
+border: 0
-  }
+}
 
-  ::-webkit-scrollbar-thumb:hover {
+::-webkit-scrollbar-thumb:hover {
-    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
+-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
-    background-color: rgba(0, 0, 0, .4)
+background-color: rgba(0, 0, 0, .4)
-  }
+}
 
-  ::-webkit-scrollbar-thumb:active {
+::-webkit-scrollbar-thumb:active {
-    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
+-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
-    background-color: rgba(0, 0, 0, .5)
+background-color: rgba(0, 0, 0, .5)
-  }
+}
 
 #echartsId{
     width:400px;

src/views/home/widget/waterbox.vue

@@ -82,6 +82,8 @@ export default {
   },
   created() {
     this.getWaterList();
+
+    window.flyToPosition = this.flyToPosition
   },
   methods: {
     close() {
@@ -155,8 +157,59 @@ export default {
             ), // 按视距距离显示
             scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
             clampToGround: true,
+            label: {
+                text:"水源地"+(index+1)+"("+item.distance+")km",
+                font_size: 12,
+                color: "#ffffff",
+                pixelOffsetY: -78,
+                pixelOffsetX:20,
+                distanceDisplayCondition: true,
+                distanceDisplayCondition_far: 6000,
+                distanceDisplayCondition_near: 0,
+            },
           },
-          pointerEvents: true,
+          popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
+                                <div class="marsTiltPanel-wrap">
+                                    <div class="area">
+                                        <div class="arrow-lt"></div>
+                                        <div class="b-t"></div>
+                                        <div class="b-r"></div>
+                                        <div class="b-b"></div>
+                                        <div class="b-l"></div>
+                                        <div class="arrow-rb"></div>
+                                        <div class="label-wrap">
+                                            <div class="title">水源地${index+1}</div>
+                                            <div class="label-content">
+                                                <div class="data-li">
+                                                    <div class="data-label" >距离：</div>
+                                                    <div class="data-value">${item.distance}km</div>
+                                                </div>
+                                                <div class="data-li">
+                                                    <div class="data-label" >预计用时：</div>
+                                                    <div class="data-value">${item.time}</div>
+                                                </div>
+                                                <div class="data-li">
+                                                    <div class="data-label"></div>
+                                                    <div class="data-value"  title="导航" >
+                                                      <span id="lablSBZT1" onclick="flyToPosition([${item.lngLat[0]}, ${item.lngLat[1]}]);" class="label-tag data-value-status-1" >导航</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="b-t-l"></div>
+                                    <div class="b-b-r"></div>
+                                </div>
+                                <div class="arrow" ></div>
+                            </div>`,
+                        popupOptions: {
+                            offsetY: -60,
+                            offsetX:20,
+                            template: "{content}",
+                            horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
+                            verticalOrigin: "Cesium.VerticalOrigin.CENTER",
+                        },
+                        pointerEvents: true,
         });
         this.waterGraphicLayerArr.push(graphic);
         this.waterGraphicLayer.addGraphic(graphic);

src/views/iconmanager/index.vue

@@ -0,0 +1,565 @@
+<template>
+  <div class="site-content">
+    <sticky :className="'sub-navbar'">
+      <div class="filter-container">
+
+        <el-input
+          @keyup.enter.native="handleFilter"
+          size="mini"
+          prefix-icon="el-icon-search"
+          style="width: 200px; margin-bottom: 0; margin: 0px 12px"
+          class="filter-item"
+          :placeholder="'名称'"
+          v-model="listQuery.name"
+        >
+        </el-input>
+
+        <el-button type="primary" size="mini" @click="getList()" icon="el-icon-search"
+          >查询</el-button
+        >
+        <el-button type="primary" size="mini" @click="add()" icon="el-icon-plus">添加</el-button>
+        <el-button type="warning" size="mini" @click="react()" icon="el-icon-edit">编辑</el-button>
+        <el-button type="danger" size="mini" @click="del()" icon="el-icon-delete">删除</el-button>
+
+        <permission-btn
+          moduleName="modulemanager"
+          :size="'mini'"
+          v-on:btn-event="onBtnClicked"
+        ></permission-btn>
+      </div>
+    </sticky>
+    <div class="app-container flex-item">
+      <div class="fh">
+        <div class="flex jc-sb" style="height: calc(100% - 100px)">
+          <div class="mr-1 max-h" style="width:100%;">
+            <el-table
+              ref="mainTable"
+              :key="tableKey"
+              :data="tableData"
+              v-loading="listLoading"
+              border
+              fit
+              highlight-current-row
+              style="width: 100%"
+              height="100%"
+              @row-click="rowClick"
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" align="center" width="55">
+              </el-table-column>
+              <el-table-column
+                prop="imaUrl"
+                label="图标"
+                show-overflow-tooltip
+                align="center"
+              >
+                <template  slot-scope="scope">
+                  <img :src="image_base+'/'+scope.row.imaUrl" alt="">
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="unitName"
+                label="队伍名称"
+                show-overflow-tooltip
+                align="center"
+              >
+              </el-table-column>
+
+              <el-table-column
+                prop="createTime"
+                label="创建时间"
+                show-overflow-tooltip
+                align="center"
+              >
+              </el-table-column>
+
+            </el-table>
+          </div>
+        </div>
+
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="listQuery.pageIndex"
+          :limit.sync="listQuery.pageSize"
+          @pagination="handleCurrentChange"
+        />
+      </div>
+    </div>
+
+    <el-dialog
+      width="40%"
+      height="60%"
+      top=" calc(50vh - 340px)"
+      class="dialog-mini body-small addWindow"
+      v-el-drag-dialog
+      :title="titleStr"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="addServiceVisible"
+    >
+      <AddForm
+        v-if="addServiceVisible"
+        @addSuccess="addSuccess"
+        :detailInfo="detailInfo"
+        @close="addServiceVisible = false"
+      ></AddForm>
+    </el-dialog>
+
+    <el-dialog
+      width="40%"
+      height="60%"
+      top=" calc(50vh - 340px)"
+      class="dialog-mini body-small addWindow"
+      v-el-drag-dialog
+      :title="titleStr"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="editServiceVisible"
+    >
+      <EditForm
+        v-if="editServiceVisible"
+        @addSuccess="editSuccess"
+        :detailInfo="editForm"
+        @close="editServiceVisible = false"
+      ></EditForm>
+    </el-dialog>
+
+    <!-- 导入护林员 -->
+    <el-dialog
+      width="400px"
+      height="60%"
+      top=" calc(50vh - 340px)"
+      class="dialog-mini body-small addWindow"
+      v-el-drag-dialog
+      :title="'导入信息'"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="importVisible"
+    >
+      <ImportForestranger v-if="importVisible" @importSuccess="importSuccess"></ImportForestranger>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import AppConfigInfo from "/public/config/app.json";
+import Pagination from "@/components/Pagination";
+import { listToTreeSelect } from "@/utils";
+import extend from "@/extensions/delRows.js";
+import * as modules from "@/api/modules";
+import * as login from "@/api/login";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import waves from "@/directive/waves"; // 水波纹指令
+import permissionBtn from "@/components/PermissionBtn";
+import elDragDialog from "@/directive/el-dragDialog";
+import iconData from "@/assets/public/css/comIconfont/iconfont/iconfont.json";
+import { getMethodCommon, postMethodCommon } from "@/api/common";
+import AddForm from "./widget/AddForm";
+
+import Sticky from "@/components/Sticky";
+import ImportForestranger from './widget/ImportForestranger.vue'
+import EditForm  from './widget/EditForm.vue'
+let VUE_APP_BASE_IMG_URL = process.env.VUE_APP_BASE_IMG_URL
+export default {
+  name: "module",
+  components: {
+    permissionBtn,
+    Pagination,
+    AddForm,
+    Sticky,
+    ImportForestranger,
+    EditForm
+  },
+  mixins: [extend],
+  directives: {
+    waves,
+    elDragDialog,
+  },
+  data() {
+    return {
+      image_base:VUE_APP_BASE_IMG_URL,
+      areaId:null,
+      orgs:[],
+      cascaderProps:{label:'name',value:'id',children:'child',checkStrictly: true},
+      importVisible:false,
+      rowdata: {},
+      tableKey: 0,
+      titleStr: "添加",
+      tableData: [],
+      addServiceVisible: false,
+      editServiceVisible:false,
+      total: 0,
+      listQuery: {
+        // 查询条件
+        pageIndex: 1,
+        pageSize: 20,
+        name: null,
+      },
+      detailInfo: [],
+      clocklnglat: "",
+      clockInList: [],
+      clockInName: "",
+      clockInVisible: false,
+      rowdataKey: 1,
+      flyCenter: [],
+      clockDetail: {},
+    };
+  },
+  computed: {},
+  filters: {},
+  created() {
+    this.getList();
+  },
+  mounted() {},
+  methods: {
+    handleChange(e){
+            this.listQuery.areaId = e && e[e.length-1];
+            this.getList();
+        },
+    gethlyList(){
+            getMethodCommon("/FireGrid/LoadUsers").then(res =>{
+                this.orgs = res.data;
+                this.handleOrgs();
+            })
+        },
+        handleOrgs(orgs){
+            for(let i=0;i<this.orgs[0].child.length;i++){
+                if(this.orgs[0].child[i]){
+                  if(this.orgs[0].child[i].child){
+                            this.orgs[0].child[i].child = null;
+                        }
+
+                    // for(let j=0;j<this.orgs[0].child[i].child.length;j++){
+                        
+                    // }
+                }
+                
+            }
+        },
+    importSuccess(){
+        this.importVisible = false;
+        this.getList();
+    },  
+    rightClick(e) {
+      console.log("rightClick", e);
+      this.clockInVisible = true;
+      this.clocklnglat = e;
+      this.clockDetail = null;
+    },
+    editClock(e) {
+      console.log("223311", e);
+      this.clockDetail = e;
+      this.clockInVisible = true;
+    },
+    gofly(item) {
+      console.log("iii", item);
+      this.flyCenter = [item.lng, item.lat];
+    },
+    delItem(item) {
+      console.log("123", item);
+      let param = {
+        id: item.id,
+      };
+      this.$confirm("确定删除本条数据?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          postMethodCommon("/FireGrid/DeleteCheckPoint?id=" + param.id).then(
+            (res) => {
+              if (res.code == 200) {
+                this.$message({
+                  type: "success",
+                  message: "删除成功",
+                });
+              }
+              this.rowdataKey++;
+              this.getClockInList();
+            }
+          );
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    clockInSuccess() {
+      this.rowdataKey++;
+      this.getClockInList();
+    },
+    getClockInList() {
+      let param = {
+        name: this.clockInName,
+      };
+      getMethodCommon("/FireGrid/GetTotalCheckPoint", param).then((res) => {
+        this.clockInList = res.result;
+      });
+    },
+    add() {
+      this.addServiceVisible = true;
+      this.detailInfo = [];
+      this.titleStr = "添加";
+    },
+    addSuccess() {
+      this.addServiceVisible = false;
+      this.getList();
+    },
+    editSuccess(){
+      this.editServiceVisible = false;
+      this.getList();
+    },
+    del() {
+      var _this = this;
+      if (this.multipleSelection.length != 1) {
+        this.$message({
+          type: "info",
+          message: "请选择一条数据进行删除",
+        });
+        return;
+      }
+      this.$confirm("确定删除所选数据?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+          postMethodCommon("/FireCodePC/DeleteUserUnitById?id=" +
+              _this.multipleSelection[0].id,
+            {}
+          ).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                type: "success",
+                message: "删除成功",
+              });
+            }
+            _this.getList();
+          });
+        }).catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    react() {
+      if (this.multipleSelection.length != 1) {
+        this.$message({
+          type: "info",
+          message: "请选择一条数据进行编辑",
+        });
+        return;
+      }
+      this.editForm = this.multipleSelection[0];
+      this.editServiceVisible = true;
+      this.titleStr = "编辑";
+    },
+    rowClick(row) {
+      this.$refs.mainTable.clearSelection();
+      this.$refs.mainTable.toggleRowSelection(row);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    onBtnClicked: function (domId) {
+      console.log("you click:" + domId);
+      switch (domId) {
+        case "btnAdd":
+          this.addServiceVisible = true;
+          break;
+        case "btnEdit":
+          if (this.multipleSelection.length != 1) {
+            this.$message({
+              message: "只能选中一个进行编辑",
+              type: "error",
+            });
+            return;
+          }
+          this.handleUpdate();
+          break;
+        case "btnDel":
+          if (this.multipleSelection.length < 1) {
+            this.$message({
+              message: "至少删除一个",
+              type: "error",
+            });
+            return;
+          }
+          this.handleDelete();
+          break;
+        case "btnAddMenu":
+          this.handleAddMenu();
+          break;
+        case "btnEditMenu":
+          if (this.selectMenus.length !== 1) {
+            this.$message({
+              message: "只能选中一个进行编辑",
+              type: "error",
+            });
+            return;
+          }
+          this.handleEditMenu(this.selectMenus[0]);
+          break;
+        case "btnDelMenu":
+          if (this.selectMenus.length < 1) {
+            this.$message({
+              message: "至少删除一个",
+              type: "error",
+            });
+            return;
+          }
+          this.handleDelMenus(this.selectMenus);
+          break;
+        default:
+          break;
+      }
+    },
+    getList() {
+      this.listLoading = true;
+      getMethodCommon("/FireCodePC/GetUserUnit", this.listQuery).then(
+        (res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.tableData = res.data;
+
+            this.total = res.count;
+            this.listLoading = false;
+          }
+        }
+      );
+    },
+    handleFilter() {
+      this.listQuery.pageIndex = 1;
+      this.getList();
+    },
+    handleSizeChange(val) {
+      this.listQuery.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.listQuery.pageIndex = val.page;
+      this.listQuery.pageSize = val.limit;
+      this.getList();
+    },
+
+    handleUpdate() {
+      this.editForm = this.multipleSelection[0];
+      this.editServiceVisible = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+
+.filter-container {
+  text-align: right;
+}
+
+.site-container {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+}
+
+.site-header {
+  width: 100%;
+  height: 99px;
+  background-image: url(/img/gridman/header.png);
+  background-size: 100% 100%;
+  text-align: center;
+  color: #fff;
+  line-height: 90px;
+  font-size: 36px;
+  letter-spacing: 5px;
+}
+
+.header-btn {
+  width: 100px;
+  height: 50px;
+  position: absolute;
+  top: 4%;
+  left: 2%;
+}
+
+.site-content {
+  width: 100%;
+  height: 94%;
+  background: rgba(0, 9, 34, 0.6);
+}
+
+.app-container {
+  height: 100%;
+}
+
+
+
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.el-card__header {
+  padding: 12px 20px;
+}
+
+.selectIcon-box {
+  text-align: center;
+  border: 1px solid #eeeeee;
+  border-right: 0;
+  border-bottom: 0;
+
+  .el-col {
+    padding: 10px 0;
+    border-right: 1px solid #eeeeee;
+    border-bottom: 1px solid #eeeeee;
+
+    &.active {
+      .iconfont {
+        color: #409eff;
+      }
+    }
+  }
+
+  .iconfont {
+    cursor: pointer;
+    font-size: 20px;
+  }
+}
+
+.custom-icon-input::before {
+  font-size: 18px;
+  position: absolute;
+  right: 10px;
+  top: 0;
+}
+.forestlistbox {
+  height: calc(100% - 30px);
+  padding: 10px;
+  overflow: auto;
+}
+.forestUl {
+  margin-bottom: 10px;
+  padding: 10px 20px;
+}
+
+
+</style>

src/views/iconmanager/widget/AddForm.vue

@@ -0,0 +1,231 @@
+<template>
+  <div style="width:100%;height:50vh;padding:0px 23px; z-index:10;">
+    <el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">
+
+      <el-form-item label="队伍名称: " prop="unitName">
+        <el-input v-model="addForm.unitName" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="队伍类型: " prop="unitType">
+        <el-input v-model="addForm.unitType" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="队伍描述：" prop="description">
+        <el-input v-model="addForm.description" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="队伍图标：" prop="iocn">
+
+        <el-upload
+          class="avatar-uploader"
+          name="files"
+          :action="upload_url"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload">
+          <img v-if="addForm.imaUrl" :src="imaUrl_base+'/'+addForm.imaUrl" class="">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+
+
+      <el-form-item style="margin-top: 16%;">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="submitForm('form')" >保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+  import { listToTreeSelect } from '@/utils'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  import { postMethodCommon, getMethodCommon } from '../../../api/common';
+  import { validateMobile, validID, validateStock } from './validate.js'
+  import form from '../../../store/modules/form';
+  let BASE_IMAGE_URL = process.env.VUE_APP_BASE_API;
+  let VUE_APP_BASE_IMG_URL = process.env.VUE_APP_BASE_IMG_URL
+
+  // let BASE_IMAGE_URL = BASE_IMAGE_API_URL;
+  export default {
+    name: "AddForm",
+    props: ['detailInfo'],
+    components: {
+
+    },
+    data() {
+      return {
+        imaUrl_base:VUE_APP_BASE_IMG_URL,
+        upload_url:BASE_IMAGE_URL+"/Files/Upload",
+        BASE_IMAGE_URL: BASE_IMAGE_URL,
+        addForm: {
+          unitName:null,
+          unitType:null,
+          description:null,
+          imaUrl:null,
+          createTime:new Date(),
+          id:0,
+          createUserId:"1",
+
+        },
+        rules: {
+          name: [
+            { required: true, message: '姓名不能为空', trigger: 'blur' },
+          ],
+          phone: [
+            { required: true, message: '电话不能为空', trigger: 'blur' },
+            { validator: validateMobile.bind(this), trigger: 'blur' }
+          ],
+          gender: [
+            { required: true, message: '性别不能为空', trigger: 'blur' },
+          ],
+        },
+        dialogFormVisible: false,
+        orgsTree: [], // 用户可访问到的所有机构组成的树
+        selectRoles: [], // 用户分配的角色
+        selectRoleNames: '',
+        level:0,
+      }
+    },
+    created() {
+      if (this.detailInfo.length == 1) {
+        // this.addForm = this.detailInfo[0];
+        this.getDetail()
+      } else {
+        
+      }
+    },
+    computed: {
+      selectOrgs: {
+        get: function () {
+          if (this.detailInfo.length == 1) {
+            return this.addForm.areaId
+          } else {
+            return []
+          }
+        },
+        set: function (v) {
+          var _this = this
+          _this.addForm.areaId = v
+        }
+      }
+    },
+    mounted() {
+
+     
+    },
+    methods: {
+      handleAvatarSuccess(e){
+        this.addForm.imaUrl = e.result[0].filePath
+      },
+      beforeAvatarUpload(e){
+        console.log(e);
+        return;
+      },
+      getDetail() {
+        getMethodCommon("/FireCodeApp/GetForestryUserById?id=" + this.detailInfo[0].Id, {}).then(res => {
+          if (res.code == 200) {
+            let detail  = {...res.data[0]};
+            this.addForm.id = detail.Id;
+            this.addForm.name = detail.Name;
+            this.addForm.account = detail.Account;
+            this.addForm.sex = detail.Sex;
+            this.addForm.userRole = detail.UserRole;
+            this.addForm.areaId = detail.areaId;
+            // if(this.addForm.areaId){
+            //   var areaId = this.addForm.areaId.split(',')
+            //   this.addForm.areaId = turnNum(areaId)
+            // }
+            // var turnNum = function (nums) {
+            //   return nums.map(Number);
+            // }
+          }
+        })
+      },
+      traverse(arr) {
+        this.level++;
+        if(this.level<3){
+          if (arr && arr.length > 0) {
+            var list = []
+            arr.forEach(childelement => {
+              list.push({
+                id: childelement.id,
+                label: childelement.areaName,
+                parentId: childelement.pId || null,
+                children: this.traverse(childelement.child)
+              })
+            });
+            return list
+          }
+        }
+      },
+      submitForm() {
+        var _this = this
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            // 添加
+            postMethodCommon("/FireCodePC/AddOrUpdateUserUnit", _this.addForm).then(response => {
+                if (response.code == 200) {
+                  // 上传shp
+                  this.$emit("addSuccess");
+                  this.$message({
+                    type: "success",
+                    message: "添加成功"
+                  })
+                }
+              })
+
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      createForm() {
+        var _this = this
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+
+            // delete this.addForm.zrclist
+            postMethodCommon("/FireCodeApp/EditForestryUser ", _this.addForm).then(response => {
+              if (response.code == 200) {
+                // 上传shp
+                this.$emit("addSuccess");
+                this.$message({
+                  type: "success",
+                  message: "编辑成功"
+                })
+              }
+            })
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      close() {
+        this.$emit("close");
+      }
+    }
+  }
+</script>
+<style scoped>
+  ::v-deep .vue-treeselect__control {
+    background: rgba(0, 9, 34, 0);
+  }
+
+  ::v-deep .el-form-item__label {
+    color: #333;
+  }
+
+  ::v-deep .el-radio {
+    color: #333;
+
+  }
+
+  .service-type-btn {
+    width: 100%;
+    height: 180px;
+    text-align: center;
+    margin-top: 100px;
+  }
+</style>

src/views/iconmanager/widget/EditForm.vue

@@ -0,0 +1,228 @@
+<template>
+  <div style="width:100%;height:50vh;padding:0px 23px; z-index:10;">
+    <el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">
+
+      <el-form-item label="队伍名称: " prop="unitName">
+        <el-input v-model="addForm.unitName" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="队伍类型: " prop="unitType">
+        <el-input v-model="addForm.unitType" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="队伍描述：" prop="description">
+        <el-input v-model="addForm.description" style="width:300px ;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="队伍图标：" prop="iocn">
+
+        <el-upload
+          class="avatar-uploader"
+          name="files"
+          :action="upload_url"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload">
+          <img v-if="addForm.imaUrl" :src="imaUrl_base+'/'+addForm.imaUrl" class="">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+
+
+      <el-form-item style="margin-top: 16%;">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="submitForm('form')" >保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+  import { listToTreeSelect } from '@/utils'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  import { postMethodCommon, getMethodCommon } from '../../../api/common';
+  import { validateMobile, validID, validateStock } from './validate.js'
+  import form from '../../../store/modules/form';
+  let BASE_IMAGE_URL = process.env.VUE_APP_BASE_API;
+  let VUE_APP_BASE_IMG_URL = process.env.VUE_APP_BASE_IMG_URL
+
+  // let BASE_IMAGE_URL = BASE_IMAGE_API_URL;
+  export default {
+    name: "AddForm",
+    props: ['detailInfo'],
+    components: {
+
+    },
+    data() {
+      return {
+        imaUrl_base:VUE_APP_BASE_IMG_URL,
+        upload_url:BASE_IMAGE_URL+"/Files/Upload",
+        BASE_IMAGE_URL: BASE_IMAGE_URL,
+        addForm: {
+          unitName:null,
+          unitType:null,
+          description:null,
+          imaUrl:null,
+          createTime:new Date(),
+          id:0,
+          createUserId:"1",
+
+        },
+        rules: {
+          name: [
+            { required: true, message: '姓名不能为空', trigger: 'blur' },
+          ],
+          phone: [
+            { required: true, message: '电话不能为空', trigger: 'blur' },
+            { validator: validateMobile.bind(this), trigger: 'blur' }
+          ],
+          gender: [
+            { required: true, message: '性别不能为空', trigger: 'blur' },
+          ],
+        },
+        dialogFormVisible: false,
+        orgsTree: [], // 用户可访问到的所有机构组成的树
+        selectRoles: [], // 用户分配的角色
+        selectRoleNames: '',
+        level:0,
+      }
+    },
+    created() {
+      this.addForm = this.detailInfo;
+      
+    },
+    computed: {
+      selectOrgs: {
+        get: function () {
+          if (this.detailInfo.length == 1) {
+            return this.addForm.areaId
+          } else {
+            return []
+          }
+        },
+        set: function (v) {
+          var _this = this
+          _this.addForm.areaId = v
+        }
+      }
+    },
+    mounted() {
+
+     
+    },
+    methods: {
+      handleAvatarSuccess(e){
+        this.addForm.imaUrl = e.result[0].filePath
+      },
+      beforeAvatarUpload(e){
+        console.log(e);
+        return;
+      },
+      getDetail() {
+        getMethodCommon("/FireCodeApp/GetForestryUserById?id=" + this.detailInfo[0].Id, {}).then(res => {
+          if (res.code == 200) {
+            let detail  = {...res.data[0]};
+            this.addForm.id = detail.Id;
+            this.addForm.name = detail.Name;
+            this.addForm.account = detail.Account;
+            this.addForm.sex = detail.Sex;
+            this.addForm.userRole = detail.UserRole;
+            this.addForm.areaId = detail.areaId;
+            // if(this.addForm.areaId){
+            //   var areaId = this.addForm.areaId.split(',')
+            //   this.addForm.areaId = turnNum(areaId)
+            // }
+            // var turnNum = function (nums) {
+            //   return nums.map(Number);
+            // }
+          }
+        })
+      },
+      traverse(arr) {
+        this.level++;
+        if(this.level<3){
+          if (arr && arr.length > 0) {
+            var list = []
+            arr.forEach(childelement => {
+              list.push({
+                id: childelement.id,
+                label: childelement.areaName,
+                parentId: childelement.pId || null,
+                children: this.traverse(childelement.child)
+              })
+            });
+            return list
+          }
+        }
+      },
+      submitForm() {
+        var _this = this
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            // 添加
+            postMethodCommon("/FireCodePC/AddOrUpdateUserUnit", _this.addForm).then(response => {
+                if (response.code == 200) {
+                  // 上传shp
+                  this.$emit("addSuccess");
+                  this.$message({
+                    type: "success",
+                    message: "添加成功"
+                  })
+                }
+              })
+
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      createForm() {
+        var _this = this
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+
+            // delete this.addForm.zrclist
+            postMethodCommon("/FireCodeApp/EditForestryUser ", _this.addForm).then(response => {
+              if (response.code == 200) {
+                // 上传shp
+                this.$emit("addSuccess");
+                this.$message({
+                  type: "success",
+                  message: "编辑成功"
+                })
+              }
+            })
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      close() {
+        this.$emit("close");
+      }
+    }
+  }
+</script>
+<style scoped>
+  ::v-deep .vue-treeselect__control {
+    background: rgba(0, 9, 34, 0);
+  }
+
+  ::v-deep .el-form-item__label {
+    color: #333;
+  }
+
+  ::v-deep .el-radio {
+    color: #333;
+
+  }
+
+  .service-type-btn {
+    width: 100%;
+    height: 180px;
+    text-align: center;
+    margin-top: 100px;
+  }
+
+</style>

src/views/iconmanager/widget/ImportForestranger.vue

@@ -0,0 +1,132 @@
+<template>
+<div class=''>
+    <el-upload
+    size="mini"
+        class="upload-demo"
+        action="#"
+        drag
+        :limit="limit"
+        :on-preview="handlePreview"
+        :file-list="fileList"
+        :auto-upload="false"
+        :before-upload="beforeUpload"
+        :on-remove="handleRemove"
+        :on-exceed="handleExceed"
+        :on-change="handleChange"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+    >
+    <i class="el-icon-upload" style="font-size:60px;line-height:0px;"></i>
+    <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+
+    <p style="text-align: right;margin-top:18px;">
+    <el-button type="primary" size="mini"  @click="onSubmit">导入信息</el-button>
+    </p>
+</div>
+</template>
+
+<script>
+import { postMethodCommon } from '../../../api/common';
+
+
+export default {
+   components: {},
+   props:[],
+   data() {
+    return {
+        limit:1,
+        fileList:[],
+        form:{},
+    };
+   },
+   computed: {},
+   watch: {},
+   methods: {
+        //文件上传时的钩子
+        handlePreview(file) {
+
+        },
+        // 删除文件
+        handleRemove(file, fileList) {
+        this.fileList = fileList
+        },
+        // 文件上传成功
+        handleSuccess(res, file, fileList) {
+        this.$message.success('文件上传成功')
+        },
+        // 文件超出个数限制
+        handleExceed(files, fileList) {
+        this.$message.warning(`只能选择 ${this.limit} 个文件进行上传!!`)
+        },
+        // 文件状态改变
+        handleChange(file, fileList) {
+            this.form.name = file.name.split(".")[0]
+            if (file) {
+                this.fileList = fileList
+            }
+        },
+        // 文件上传失败
+        handleError(err, file, fileList) {
+            this.$message.error('文件上传失败')
+        },
+        beforeUpload(file) {
+            let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
+            let size = file.size / 1024 / 1024;
+            if (extension !== 'apk') {
+
+                this.$message.warning('只能上传后缀是.apk的文件')
+                return false
+            }
+            if (size > 100) {
+                this.$message.warning('文件大小不得超过100M')
+                return false
+            }
+            return true
+        },
+        onSubmit() {
+            let _this = this
+            let formData = new FormData();
+            this.fileList.forEach(item => {
+                formData.append("files", item.raw);
+            });
+            if (this.fileList.length === 0) {
+                this.$message.warning(`请选择上传文件!!`)
+                return
+            }
+            postMethodCommon("/Files/Upload", formData).then(res => {
+                if (res.code === 200) {
+                    _this.form.filepath = res.result[0].filePath
+
+                    let param = {
+                        "file_path": res.result[0].filePath,
+                        "token": ""
+                    }
+                    postMethodCommon('/FireCodeApp/BatchExportRanger',param).then(res2 => {
+
+                        _this.$emit("importSuccess")
+                      
+                        _this.fileList = []
+
+                    })
+                } else {
+                    _this.$message.warning(`接口错误!!`)
+                }
+            })
+        },
+   },
+   created() {
+   
+   },
+   mounted() {
+   
+   },
+   destroyed() {
+   
+   },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/iconmanager/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/navigation/index.vue

@@ -107,10 +107,10 @@
         },
         goDetail(item) {
             if (item.lable == '数据中心') {
-                window.open('http://223.99.16.253:9003/#/dashboard?id=' + localStorage.getItem("X-Token"), '_blank')
+                window.open('http://221.2.83.254:9003/#/dashboard?id=' + localStorage.getItem("X-Token"), '_blank')
             }else  if (item.lable == '监测中心') {
                 window.open('http://60.213.14.14:6088/forestry/', '_blank')
-            }  else {
+            }else{
                 this.$router.push({ 'path': item.url })
             }
         },