代码提交12.29
parent
46ccf3df06
commit
4bfb8739eb
8
.env.dev
8
.env.dev
|
|
@ -1,13 +1,13 @@
|
|||
NODE_ENV = development
|
||||
|
||||
# 正式服务器
|
||||
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_API = http://221.2.83.254:9001/api
|
||||
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_IMG_URL = http://192.168.10.117:81
|
||||
#VUE_APP_BASE_API = http://221.2.83.254:9013/api
|
||||
#VUE_APP_BASE_IMG_URL = http://221.2.83.254:901
|
||||
#VUE_APP_WEBSOCKET_URL = ws://221.2.83.254:9002/ws
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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":[],
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<cross-domain-policy>
|
||||
<allow-access-from domain="*"/>
|
||||
</cross-domain-policy>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -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">
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 8.0 KiB |
|
|
@ -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;}
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
.ztree li span.button.root_open{background-position: -92px -61px !important;}
|
||||
.ztree li span.button.root_close{background-position: -74px -61px !important;}
|
||||
.ztree li span.button.roots_docu{background-position: -56px 6px !important;}
|
||||
.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
|
||||
border:0 none; cursor: pointer;outline:none;
|
||||
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
|
||||
.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
|
||||
border:0 none; cursor: pointer;outline:none;
|
||||
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
|
||||
background-image:url("./images/zTreeStandard.png"); *background-image:url("./images/zTreeStandard.gif")}
|
||||
.ztree li a.curSelectedNode { background-color: #483a1f;}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -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-radius: 5px !important;
|
||||
border:1px solid #127272;
|
||||
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;
|
||||
background: rgba(30,36,50,0.6);
|
||||
border-color:#127272;
|
||||
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 {
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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-启用
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ export default {
|
|||
async setOnmessageMessage(event) {
|
||||
// console.log(event.data, "获得消息");
|
||||
this.reset();
|
||||
|
||||
// 自定义全局监听事件
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("onmessageWS", {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default {
|
|||
url: AppInfo[localStorage.getItem("areaName")].layerurl,
|
||||
}).then((res) => {
|
||||
let configLayers = [
|
||||
|
||||
|
||||
];
|
||||
res.data.data.forEach((item, index) => {
|
||||
let group = null;
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
@ -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="姓名"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
})
|
||||
|
|
|
|||
|
|
@ -102,7 +102,6 @@
|
|||
if (res.code == 200) {
|
||||
var list = res.data
|
||||
var arr = this.traverse(list)
|
||||
console.log(arr)
|
||||
_this.orgsTree = arr;
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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:[
|
||||
{
|
||||
name:"徐景良",
|
||||
phone:"17861857725",
|
||||
time:"2023-04-19 10:00:00",
|
||||
site:"塔山防火站",
|
||||
method:"本人登记",
|
||||
user:"徐景良",
|
||||
}
|
||||
],
|
||||
tableData:[],
|
||||
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()
|
||||
|
|
|
|||
|
|
@ -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' })
|
||||
},
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@ export default {
|
|||
return {
|
||||
BASE_IMAGE_URL:BASE_IMAGE_URL,
|
||||
addForm:{
|
||||
state:1,
|
||||
siteUser:[
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,14 +7,9 @@
|
|||
<!-- 头部 -->
|
||||
<div class="el-header">
|
||||
<div class="app-name">{{ appName }}</div>
|
||||
<div class="header-info" style="z-index: 9999999999999999">
|
||||
<!-- 天气中心 -->
|
||||
<div class="weather-info">
|
||||
<!-- <div class="weater">{{ weater }}</div>
|
||||
<div class="temperature">{{ temperature }}</div> -->
|
||||
</div>
|
||||
<div class="header-info" style="z-index: 99">
|
||||
|
||||
<!-- 时间中心 -->
|
||||
<!-- 时间 -->
|
||||
<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="close-button" style="margin-right: 8px; z-index: 9999" @click="trajectoryShow = false">
|
||||
<!-- 查找周边条件筛选弹窗 -->
|
||||
<div class="find-source" v-drag v-if="findsourceShow">
|
||||
<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.clickTileGraphic, this.onMapClick);
|
||||
// map.on(this.mars3d.EventType.click, 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
全选
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
设置
|
||||
</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>
|
||||
|
|
@ -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 =>{
|
||||
|
|
|
|||
|
|
@ -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> {{ item.cameraname }}
|
||||
</p>
|
||||
<p style="font-size:14px;text-align:right;">
|
||||
|
||||
<i class="el-icon-plus" @click="addPlayeList(item)">添加</i>
|
||||
<!--
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
</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) {
|
||||
// this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
// window.globalmap.addLayer(this.markGraphicLayer);
|
||||
// }
|
||||
if (this.markGraphicLayer == null) {
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
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);
|
||||
if (graphic.isPrivate) {
|
||||
return
|
||||
}
|
||||
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),5);
|
||||
let graphic = this.markGraphicLayer.getGraphicById(item.createId);
|
||||
graphic.setCallbackPosition([item.lng,item.lat]);
|
||||
// if (graphic.isPrivate) {
|
||||
// return
|
||||
// }
|
||||
// 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);
|
||||
window.graphicLayer.removeGraphic(graphic);
|
||||
let graphic = this.markGraphicLayer.getGraphicById(item.createId);
|
||||
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 = "视频通话";
|
||||
|
|
|
|||
|
|
@ -63,211 +63,208 @@
|
|||
this.getList();
|
||||
},
|
||||
methods:{
|
||||
getList(){
|
||||
let params= [];
|
||||
this.query.forEach((item,index)=>{
|
||||
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)
|
||||
getList(){
|
||||
let params= [];
|
||||
this.query.forEach((item,index)=>{
|
||||
params.push(item.tableRef);
|
||||
})
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
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 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '6%',
|
||||
left: '10%',
|
||||
bottom: '12%',
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666',
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: '#D8F0FF',
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '6%',
|
||||
left: '10%',
|
||||
bottom: '12%',
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666',
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: '#D8F0FF',
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: '#D8F0FF',
|
||||
textStyle: {
|
||||
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: {
|
||||
width: 0,
|
||||
color: '#184D9A',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
// 使用深浅的间隔色
|
||||
color: '#666',
|
||||
},
|
||||
lineHeight: 20,
|
||||
width: 80,
|
||||
height: 20,
|
||||
borderRadius: 200,
|
||||
position: ['-0', '-20'],
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
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,
|
||||
lineHeight: 20,
|
||||
width: 80,
|
||||
height: 20,
|
||||
borderRadius: 200,
|
||||
position: ['-0', '-20'],
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
};
|
||||
let myChart = this.$echarts.init(
|
||||
document.getElementById("echartsId")
|
||||
);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
};
|
||||
let myChart = this.$echarts.init(
|
||||
document.getElementById("echartsId")
|
||||
);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
.box{
|
||||
width: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{
|
||||
width:100%;
|
||||
height: 17%;
|
||||
padding-left: 35px;
|
||||
font-size: 18px;
|
||||
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 {
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
height: 80%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
::-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)
|
||||
}
|
||||
}
|
||||
|
||||
::-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)
|
||||
}
|
||||
|
||||
#echartsId{
|
||||
width:400px;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
|
|
@ -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 })
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue