FeiXianKuangChanJianGuan/public/bigScreen/js/index.js

1596 lines
41 KiB
JavaScript
Raw Normal View History

2026-02-04 11:06:40 +08:00
var news_drow_dtu_num = {}
var news_drow_plc_num = {}
var news_report = [];
var old_news_report = [];
var news_del = [];
var news_industy = {
labelDatas: [],
valueDatas: []
}
var news_alarm = {}
var news_online = {
labelDatas: [],
valueDatas: []
}
// var BASE_URL = "http://192.168.10.102:9023";
// var APP_URL = "http://192.168.10.134:10002";
var BASE_URL = window.BASE_URL;
var APP_URL = window.APP_URL;
$("#logoutButton").click(function () {
// if (localStorage.getItem("X-Token")) {
// $.ajax({
// type: "POST",
// url: BASE_URL + "/api/Check/Logout",
// dataType: "json",
// headers: { "X-Token": localStorage.getItem("X-Token") },
// async: false,
// beforeSend: function (xhr) { },
// success: function (data) {
// if (data.result == true) {
// localStorage.setItem("X-Token", "")
// window.location.href = "login.html";
// }
// }
// });
// } else {
// window.location.href = "login.html";
// }
window.location.href = APP_URL
})
var jiankongJson
// 监控
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneClueReporting/GetCamerInfos",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
console.log('ddd', data)
var arr = data.result
jiankongJson = {
type: 'FeatureCollection',
features: []
}
arr.forEach((element, index) => {
jiankongJson.features.push({
type: "Feature",
id: "shipinjiankong." + (index + 1),
geometry: {
type: "Point",
coordinates: element.lnglat.split(',')
},
geometry_name: "geom",
properties: element
})
});
console.log(jiankongJson)
}
});
//无人机数量-起飞率
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneCaseCompleteCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
// console.log('ddd',data)
news_drow_dtu_num.cluesCount = data.result.cluesCount; //总数
news_drow_dtu_num.inHandCount = data.result.inHandCount; //正在处理中
news_drow_dtu_num.unHandCount = data.result.unHandCount; //未处理
news_drow_dtu_num.completeCount = data.result.completeCount;//已完成
news_drow_dtu_num.unDealCount = data.result.unDealCount;//已完成
news_drow_dtu_num.on = data.result.inHandCount
news_drow_dtu_num.off = data.result.cluesCount
news_drow_plc_num.on = data.result.completeCount
news_drow_plc_num.off = data.result.cluesCount
}
});
function getDealingAndCompleteData() {
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneCaseCompleteCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
// console.log('ddd',data)
news_drow_dtu_num.cluesCount = data.result.cluesCount; //总数
news_drow_dtu_num.inHandCount = data.result.inHandCount; //正在处理中
news_drow_dtu_num.unHandCount = data.result.unHandCount; //未处理
news_drow_dtu_num.completeCount = data.result.completeCount;//已完成
news_drow_dtu_num.unDealCount = data.result.unDealCount;//已完成
news_drow_dtu_num.on = data.result.inHandCount
news_drow_dtu_num.off = data.result.cluesCount
news_drow_plc_num.on = data.result.completeCount
news_drow_plc_num.off = data.result.cluesCount
loadDealingCaseCountCharts(news_drow_dtu_num);
loadCompleteCaseCountCharts(news_drow_dtu_num);
}
});
}
//乡镇统计
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneOrgCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
data.result.forEach(item => {
news_online.labelDatas.push(item.name)
news_online.valueDatas.push({
value: item.reportCount,
name: item.name
})
})
}
});
function getVillageData() {
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneOrgCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
news_online = {
labelDatas: [],
valueDatas: []
}
data.result.forEach(item => {
news_online.labelDatas.push(item.name)
news_online.valueDatas.push({
value: item.reportCount,
name: item.name
})
})
loadVillageData(news_online);
}
});
}
//分类统计
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneTypeCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
data.result.forEach(item => {
if (item.typename.includes('-')) {
news_industy.labelDatas.push(item.typename.split('-')[1])
news_industy.valueDatas.push({
value: item.count,
name: item.typename.split('-')[1]
})
} else {
news_industy.labelDatas.push(item.typename)
news_industy.valueDatas.push({
value: item.count,
name: item.typename
})
}
})
}
});
function getCaseClassData() {
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneTypeCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
news_industy = {
labelDatas: [],
valueDatas: []
}
data.result.forEach(item => {
if (item.typename.includes('-')) {
news_industy.labelDatas.push(item.typename.split('-')[1])
news_industy.valueDatas.push({
value: item.count,
name: item.typename.split('-')[1]
})
} else {
news_industy.labelDatas.push(item.typename)
news_industy.valueDatas.push({
value: item.count,
name: item.typename
})
}
})
loadCaseClassCharts(news_industy);
}
});
}
//今日图斑处理
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/LoadDroneCaseDeal",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: { today: 1 },
async: false,
beforeSend: function (xhr) { },
success: function (data) {
news_del = data.result;
console.log("factory",data.result);
}
});
function getTodayCaseDeal() {
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/LoadDroneCaseDeal",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: { today: 1 },
async: false,
beforeSend: function (xhr) { },
success: function (data) {
news_del = data.result;
console.log("new_del",news_del);
var target1 = $("#todayCaseDeal1");
var target2 = $("#todayCaseDeal2");
target1.empty();
target2.empty();
for (var i = 0; i < news_del.length; i++) {
var htmlStr = `<tr class="aaa click_pop2" data-caseId='${news_del[i].id}' align="center" style="font-size: 14px;">
<td>${news_del[i].examine_time}</td>
<td>${news_del[i].typename}</td>
<td>${news_del[i].case_description}</td>
<td>${news_del[i].streetname} ${news_del[i].communityname}</td>
<td>${news_del[i].result_name ? news_del[i].result_name : "--"}</td>
</tr>`
target1.append(htmlStr);
target2.append(htmlStr);
}
// target2.on("click", ".click_pop2", function(){
// 今日图斑处理详情
$(".click_pop2").click(function () {
$('.bgPop3,.pop3').show();
var IMAGE_BASE_URL = " http://60.213.14.14:6070";
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: { id: $(this).attr("data-caseId") },
async: false,
beforeSend: function (xhr) { },
success: function (data) {
if (data.code == 200) {
$('.caseinfoNo').text(data.result.info.case_no);
$('.caseinfoDesc').text(data.result.info.case_description);
$('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
$('.caseinfoType').text(data.result.info.typename);
$('.caseinfoMarker').text(data.result.info.remark);
$(".caseinfoImages").empty();
for (var i = 0; i < data.result.pic_list.length; i++) {
var appendStr = "<img src='" + IMAGE_BASE_URL + "/" + data.result.pic_list[i] + "' data-imgSrc='" + data.result.pic_list[i] + "' class='caseInfoImg' style='width:230px;height:100px;margin-right:15px;'/>";
$(".caseinfoImages").append(appendStr);
}
}
$(".caseInfoImg").click(function () {
$(".imgContainers").empty();
$(".imgDetail").show();
$(".imgDetail").css({ "display": "flex" });
var imgPath = $(this).attr("data-imgSrc");
var appendStrPath = "<img src='" + imgPath + "' style='width:100%;height:100%;'/>";
$(".imgContainers").append(appendStrPath);
})
}
});
$.ajax({
type: "GET",
url: " http://60.213.14.14:6050/api/DroneCaseinfo/GetDroneCaseDeal?X-Token=bc249a62&caseid=" + $(this).attr("data-caseId"),
// url: " http://192.168.10.124:9020/api/DroneCaseinfo/GetDroneCaseDeal?X-Token=bc249a62&caseid=" + $(this).attr("data-caseId"),
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
// data:{id:,
async: false,
beforeSend: function (xhr) { },
success: function (data) {
if (data.code == 200) {
$('.dealTime').text(data.result.info.examine_time);
$('.dealResult').text(data.result.info.result_name);
$(".dealImages").empty();
for (var i = 0; i < data.result.pic_info_list.length; i++) {
var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + data.result.pic_info_list[i].filePath + "' data-imgSrc='" + data.result.pic_info_list[i].filePath + "' class='caseInfoImg' style='width:230px;height:100px;margin:8px;'/>";
$(".dealImages").append(appendStr);
}
$(".caseInfoImg").click(function () {
$(".imgContainers").empty();
$(".imgDetail").show();
$(".imgDetail").css({ "display": "flex" });
var imgPath = $(this).attr("data-imgSrc");
var appendStrPath = "<img src='" + IMAGE_BASE_URL + "/" + imgPath + "' style='width:100%;height:100%;'/>";
$(".imgContainers").append(appendStrPath);
})
}
}
})
});
}
});
}
//今日上报今日处理数量
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetTodayReportAndDealCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: {},
async: false,
beforeSend: function (xhr) { },
success: function (data) {
news_alarm = data.result;
}
});
function getTodayReportAndDealCount() {
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetTodayReportAndDealCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: {},
async: false,
beforeSend: function (xhr) { },
success: function (data) {
news_alarm = data.result;
// console.log("news_alarm",news_alarm);
$("#todayReport").text(news_alarm.reportCount + "条");
$("#todayDeal").text(news_alarm.dealCount + "条");
}
});
}
//最新上报
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/LoadDroneCase",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
old_news_report = [];
for (var i = 0; i < data.result.length; i++) {
// console.log(data.result[i].identification_time)
old_news_report.push(data.result[i]);
}
news_report = data.result;
// console.log("news_report",news_report);
for (var i = 0; i < news_report.length; i++) {
var date = new Date(news_report[i].identification_time);
// news_report[i].identification_time = friendlyDate(date.getTime());
news_report[i].rep_time = friendlyDate(date.getTime());
// console.log(news_report[i]);
}
}
});
function timingHandleFriendlyData() {
setInterval(function () {
for (var i = 0; i < news_report.length; i++) {
var date = new Date(news_report[i].identification_time);
// news_report[i].identification_time = friendlyDate(date.getTime());
news_report[i].rep_time = friendlyDate(date.getTime());
}
var target = $("#newestReport");
target.empty();
for (var i = 0; i < news_report.length; i++) {
var htmlStr = '<li class="li02" data-caseId="' + news_report[i].id + '"><span style="width:220px;overflow: hidden;display: block;float:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + news_report[i].streetname + '&nbsp;' + news_report[i].case_description + '</span><span style="float:right;font-size:12px;">' + news_report[i].rep_time + '</span></li>';
target.append(htmlStr);
}
// target.on("click", ".li02", function(){
$(".li02").click(function () {
// console.log($(this));
var IMAGE_BASE_URL = " http://60.213.14.14:6070";
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: { id: $(this).attr("data-caseId") },
async: false,
beforeSend: function (xhr) { },
success: function (data) {
console.log(data)
if (data.code == 200) {
$('.caseinfoNo').text(data.result.info.case_no);
$('.caseinfoDesc').text(data.result.info.case_description);
$('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
$('.caseinfoType').text(data.result.info.typename);
$('.caseinfoMarker').text(data.result.info.remark);
$(".caseinfoAddress").text(data.result.info.address);
$(".caseinfoTime").text(data.result.info.createtime);
$(".caseinfoArea").text(data.result.info.area);
$(".caseinfoImages").empty();
for (var i = 0; i < data.result.pic_list.length; i++) {
var url = IMAGE_BASE_URL + "/" + data.result.pic_list[i];
var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + data.result.pic_list[i] + "' class='caseInfoImg' data-imgSrc='" + url + "' style='width:230px;height:100px;margin-right:15px;'/>";
$(".caseinfoImages").append(appendStr);
}
}
$(".caseInfoImg").click(function () {
$(".imgContainers").empty();
$(".imgDetail").show();
$(".imgDetail").css({ "display": "flex" });
var imgPath = $(this).attr("data-imgSrc");
var appendStrPath = "<img src='" + imgPath + "' style='width:100%;height:100%;'/>";
$(".imgContainers").append(appendStrPath);
})
getkmcamera(data.result)
}
});
//console.log($(this).attr("data-caseId"));
$('.bgPop2,.pop2').show();
});
}, 60000);
}
timingHandleFriendlyData();
//时间差计算函数
function friendlyDate(timestamp) {
var formats = {
'year': '%n% 年前',
'month': '%n% 月前',
'day': '%n% 天前',
'hour': '%n% 小时前',
'minute': '%n% 分钟前',
'second': '%n% 秒前',
};
var now = Date.now();
var seconds = Math.floor((now - timestamp) / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
var months = Math.floor(days / 30);
var years = Math.floor(months / 12);
var diffType = '';
var diffValue = 0;
if (years > 0) {
diffType = 'year';
diffValue = years;
} else {
if (months > 0) {
diffType = 'month';
diffValue = months;
} else {
if (days > 0) {
diffType = 'day';
diffValue = days;
} else {
if (hours > 0) {
diffType = 'hour';
diffValue = hours;
} else {
if (minutes > 0) {
diffType = 'minute';
diffValue = minutes;
} else {
diffType = 'second';
diffValue = seconds === 0 ? (seconds = 1) : seconds;
}
}
}
}
}
return formats[diffType].replace('%n%', diffValue);
}
function getNewestReport() {
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/LoadDroneCase",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
data: {},
beforeSend: function (xhr) { },
success: function (data) {
old_news_report = [];
for (var i = 0; i < data.result.length; i++) {
// console.log(data.result[i].identification_time)
old_news_report.push(data.result[i]);
}
news_report = data.result;
for (var i = 0; i < news_report.length; i++) {
var date = new Date(news_report[i].identification_time);
// news_report[i].identification_time = friendlyDate(date.getTime());
news_report[i].rep_time = friendlyDate(date.getTime());
}
var target = $("#newestReport");
target.empty();
for (var i = 0; i < news_report.length; i++) {
var htmlStr = '<li class="li02" data-caseId="' + news_report[i].id + '"><span style="width:220px;overflow: hidden;display: block;float:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + news_report[i].streetname + '&nbsp;' + news_report[i].case_description + '</span><span style="float:right;font-size:12px;">' + news_report[i].rep_time + '</span></li>';
target.append(htmlStr);
}
// target.on("click", ".li02", function(){
$(".li02").click(function () {
// console.log($(this));
var IMAGE_BASE_URL = " http://60.213.14.14:6070";
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: { id: $(this).attr("data-caseId") },
async: false,
beforeSend: function (xhr) { },
success: function (data) {
if (data.code == 200) {
$('.caseinfoNo').text(data.result.info.case_no);
$('.caseinfoDesc').text(data.result.info.case_description);
$('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
$('.caseinfoType').text(data.result.info.typename);
$('.caseinfoMarker').text(data.result.info.remark);
$(".caseinfoAddress").text(data.result.info.address);
$(".caseinfoTime").text(data.result.info.examine_time);
$(".caseinfoArea").text(data.result.info.area);
$(".caseinfoImages").empty();
if(data.result.casepic){
var imgList = data.result.casepic.split(',')
for (var i = 0; i < imgList.length; i++) {
var url = IMAGE_BASE_URL + "/" + imgList[i];
var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + imgList[i] + "' class='caseInfoImg' data-imgSrc='" + url + "' style='width:230px;height:100px;margin-right:15px;'/>";
$(".caseinfoImages").append(appendStr);
}
}
getkmcamera(data.result)
}
$(".caseInfoImg").click(function () {
$(".imgContainers").empty();
$(".imgDetail").show();
$(".imgDetail").css({ "display": "flex" });
var imgPath = $(this).attr("data-imgSrc");
var appendStrPath = "<img src='" + imgPath + "' style='width:100%;height:100%;'/>";
$(".imgContainers").append(appendStrPath);
})
}
});
//console.log($(this).attr("data-caseId"));
$('.bgPop2,.pop2').show();
});
}
});
}
// setInterval(function(){
// var audioText =news_report[0].streetname+""+news_report[0].communityname+",发现一条"+news_report[0].case_description+"线索,请及时处理。";
// playAudio(audioText);
// },2000);
var audio = null;
var myWebSocket = null;
var lockReconnect = false
var myWebSocketTimer = null;
function websocketReconnect() {
if (lockReconnect) { // 是否已经执行重连
return;
};
lockReconnect = true;
// 没连接上会一直重连,设置延迟避免请求过多
var tt = null;
tt && clearTimeout(tt);
var _this = this;
tt = setTimeout(function () {
initWebSocket();
lockReconnect = false;
// console.log("正在发起1次WebSocket重连")
}, 120000)
}
function initWebSocket() {
if ("WebSocket" in window) {
// var ws = new WebSocket("ws://123.132.248.154:9003/echo");
// var ws = new WebSocket("ws://192.168.10.123:1235/echo");
// myWebSocket = new WebSocket("ws://192.168.10.124:9250/echo");
myWebSocket = new WebSocket("ws://60.213.14.14:6090/echo");
myWebSocket.onopen = function () {
// loadUAVBox()
console.log("websocket连接成功");
// myWebSocket.send("发送数据");
if (myWebSocketTimer) {
clearInterval(myWebSocketTimer);
}
webSocketHeart();
};
myWebSocket.onmessage = function (evt) {
// console.log("websock-message", evt)
// loadUAVBox(JSON.parse(evt.data))
if (evt.data != "发送数据") {
var received_msg = JSON.parse(evt.data)
// 无人机推流
loadUAVBox(received_msg)
// 马庄镇
// var data = {
// "account": "17853305026",
// "createtime": "2023-11-08 09:58:16",
// "height": 185,
// "ip": "192.168.10.101",
// "lat": 35.104007,
// "lng": 118.01002,
// "model": "airPlaneModel"
// }
// loadUAVBox(data)
if (received_msg.type == 'newcase') {
// 更新所有图表数据
updateData();
// 重新加载地图数据
loadMainMap();
//重新加载数据点
loadNewestReportPoint();
// 加载最新数据点
loadLastReportPoint(received_msg.caseid, false);
// audio = "../audio/"+news_report[0].streetname+".mp3";
// // audio = "../css/tishi.mp3";
// audio = new Audio(audio);
// audio.play();
// var audioText =news_report[0].streetname+""+news_report[0].communityname+",发现一条"+news_report[0].case_description+"线索,请及时处理。";
// playAudio(audioText);
} else if (received_msg.type == 'newdeal') {
// audio = "../audio/"+news_del[0].caseinfo.streetname+".mp3";
// audio = new Audio(audio);
// audio.play();
updateData();
}
// setTimeout(function(){
// audio.pause()
// },5000);
}
};
myWebSocket.onclose = function () {
// 如果断开则重新连接
// console.log("websocket已断开正在重新连接...");
websocketReconnect();
// initWebSocket();
};
} else {
alert("您的浏览器不支持 WebSocket!");
}
}
// var globalTimer = null;
// if(globalTimer){
// clearInterval(globalTimer);
// }else{
// globalTimer = setInterval(function(){
// updateData();
// },6000000)
// }
function webSocketHeart() { //长连接心跳检测
let _this = this;
let total = 1;
myWebSocketTimer = setInterval(function () {
if (_this.myWebSocket) {
// console.log("WebSocket","向服务器发送了第"+total+"条心跳检测消息");
_this.myWebSocket.send("发送数据");
// console.log("发送了",localStorage.getItem("UID")+","+localStorage.getItem("X-Token"));
// _this.myWebSocket.send("HelloWorld");
total++;
}
}, 30000);
}
function playAudio(text) {
var synth = window.speechSynthesis;
var msg = new SpeechSynthesisUtterance();
msg.text = text; // 文字内容
msg.lang = "zh-CN"; // 使用的语言:中文
msg.volume = 1; // 声音音量0-1
msg.rate = 2.2; // 语速0-10
msg.pitch = 1.5; // 音高0-1
synth.speak(msg); // 播放
}
initWebSocket();
$("#localtime").click(function () {
// loadNewestReportPoint();
// updateData();
// console.log(news_report[0]);
// var audioText =news_report[0].streetname+" "+news_report[0].communityname+"发现一条新线索,请及时处理。"; //"+news_report[0].case_description+"
// playAudio(audioText);
// audio = "../audio/"+news_report[0].streetname+".mp3";
// // audio = "../css/tishi.mp3";
// audio = new Audio(audio);
// audio.play();
loadLastReportPoint('ce257e0b-f47b-444b-917c-50d5922b0c9e', false);
// audio = "../css/tishi.mp3";
// audio = new Audio(audio);
// audio.play();
})
function updateData() {
//获取今日上报和今日处理数量
getTodayReportAndDealCount();
// 获取最新上报
getNewestReport();
//获取今日图斑处理
getTodayCaseDeal();
//线索办理图表数据更新
getDealingAndCompleteData();
//图斑线索统计表数据更新
getVillageData();
//图斑分类统计表数据更新
getCaseClassData();
//本周图表数据更新
loadThisWeekData();
//本月图表数据更新
loadThisMonthDataCharts();
}
var scn_data = {
alarm: news_alarm,
dtu: news_drow_dtu_num,
plc: news_drow_plc_num,
industy: news_industy,
online: news_online,
almMsg: news_report,
msgCnt: [{ msg: 100, alm: 20 },
{ msg: 200, alm: 40 },
{ msg: 300, alm: 50 },
{ msg: 400, alm: 35 },
{ msg: 400, alm: 40 },
{ msg: 400, alm: 11 },
{ msg: 400, alm: 66 },
{ msg: 100, alm: 77 },
{ msg: 200, alm: 88 },
{ msg: 300, alm: 22 },
{ msg: 400, alm: 99 },
{ msg: 400, alm: 100 },
{ msg: 400, alm: 111 },
{ msg: 400, alm: 222 },
{ msg: 100, alm: 333 },
{ msg: 200, alm: 11 },
{ msg: 300, alm: 33 },
{ msg: 400, alm: 55 },
{ msg: 400, alm: 77 },
{ msg: 400, alm: 90 }
],
map: [{ area: "山东", cnt: 20 },
{ area: "浙江", cnt: 40 },
{ area: "江苏", cnt: 50 },
{ area: "辽宁", cnt: 50 }
],
factoryHeader: [
{ "categories": "处理时间" },
// {"categories":"上报时间"},
{ "categories": "图斑类型" },
{ "categories": "图斑描述" },
{ "categories": "乡镇" },
{ "categories": "处理结果" }
],
factory: news_del,
iframeVisble: false
};
var vm = new Vue({
el: '#content',
data: scn_data,
methods: {
details: function () {
}
}
})
//加载线索办理图表数据 --- 处理中
var dealingCaseCountCharts = null;
function loadDealingCaseCountCharts(dtu) {
var option = {
tooltip: {
trigger: 'item',
formatter: "{b}: {c} "
},
legend: {
orient: 'horizontal',
x: 'center',
data: ['未处理', '处理中', '已完成'],
// data:['核查定性','处置办理','监督审核','查验归档'],
itemWidth: 8,
itemHeight: 8,
textStyle: {//图例文字的样式
color: '#fff',
fontSize: 12
}
},
color: ['#0C6CFF', '#FF9C12', '#BB2DF0'],
graphic: [{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '45%',
style: {
text: "办结:" + dtu.completeCount + " 条",
textAlign: 'center',
fill: '#ffffff', //文字的颜色
width: 30,
height: 30,
fontSize: 14,
fontFamily: "Microsoft YaHei"
}
}],
series: [
{
name: '',
type: 'pie',
radius: ['50%', '65%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
color: "#66ccff",
rotate: 120,
extraCssText: 'white-space: normal; word-break: break-all;'
// position: 'center'
},
// emphasis: {
// show: false,
// textStyle: {
// fontSize: '16',
// color:'#00fcff',
// fontWeight: 'bold'
// }
// }
},
labelLine: {
normal: {
show: true,
length: 5, // 改变标示线的长度
lineStyle: {
color: "#66ccff" // 改变标示线的颜色
}
}
},
itemStyle: {
borderRadius: 20,
borderColor: '#0E1C3B',
borderWidth: 0
},
// data:['核查定性','处置办理','监督审核','查验归档'],
// data:[
// {value:dtu.unHandCount, name:'核查定性',
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: "#6b0ed4"
// },
// {
// offset: 1,
// color: "#901de1"
// }
// ])
// },
// },
// {value:dtu.unDealCount, name:'处置办理',
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: "#FF5A03"
// },
// {
// offset: 1,
// color: "#FFD920"
// }
// ])
// },
// },
// {value:dtu.inHandCount, name:'监督审核',
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: "#089FFF"
// },
// {
// offset: 1,
// color: "#1037FF"
// }
// ])
// },
// },
// {value:dtu.completeCount, name:'查验归档',
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: "#3ba272"
// },
// {
// offset: 1,
// color: "#3ba223"
// }
// ])
// },
// }
// ]
data: [
{
value: dtu.unHandCount, name: '未处理',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#FF5A03"
},
{
offset: 1,
color: "#FFD920"
}
])
},
},
{
value: dtu.inHandCount, name: '处理中',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#089FFF"
},
{
offset: 1,
color: "#1037FF"
}
])
},
},
{
value: dtu.completeCount, name: '已完成',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#BB2DF0"
},
{
offset: 1,
color: "#BB2DF0"
}
])
},
}
]
}
]
};
if (dealingCaseCountCharts == null) {
var dom = document.getElementById("container");
dealingCaseCountCharts = echarts.init(dom);
dealingCaseCountCharts.setOption(option);
} else {
dealingCaseCountCharts.clear();
dealingCaseCountCharts.setOption(option, true);
}
}
loadDealingCaseCountCharts(news_drow_dtu_num);
//加载线索办理图表数据 --- 已完成
var completeCaseCountCharts = null;
function loadCompleteCaseCountCharts(plc) {
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['图斑总数', '已处理数'],
axisLine: {
show: true,
lineStyle: {
color: '#5879A4'
}
},
axisLabel: {
color: '#CFD5E5',
fontSize: 12,
interval: 0,
rotate: 0,
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
color: "#fff",
axisLabel: {
color: '#CFD5E5',
fontSize: 0,
interval: 0,
rotate: 0,
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#21387F',
type: 'dashed',
}
},
axisLine: {
show: false,
lineStyle: {
color: '#CFD5E5',
fontsize: 12
}
},
axisTick: {
show: false
},
},
series: [
{
data: [plc.cluesCount, plc.completeCount],
type: 'bar',
barWidth: 30,
barHeight: 100,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#fff',
fontSize: 12,
},
},
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: "#cd7cf3"
// }, {
// offset: 1,
// color: "#de5df2"
// }]),
color: function (params) {
// 定义一个颜色数组colorList
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#0e3fff"
}, {
offset: 1,
color: "#0e3f95"
}]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#04a2b0"
}, {
offset: 1,
color: "#04a2ff"
}])
];
return colorList[params.dataIndex]
},
},
},
showBackground: true,
backgroundStyle: {
color: 'rgba(110, 193, 244, 0.2)',
},
}
]
};
if (completeCaseCountCharts == null) {
var dom = document.getElementById("container1");
completeCaseCountCharts = echarts.init(dom);
completeCaseCountCharts.setOption(option);
} else {
completeCaseCountCharts.clear();
completeCaseCountCharts.setOption(option, true);
}
}
loadCompleteCaseCountCharts(news_drow_dtu_num);
//加载乡镇图斑线索统计表
var villageCharts = null;
function loadVillageData(online) {
let option = {
// color:['#FF6C00','#00FFFF','#7627CB','#FFFC00','#0E4AE0','#C933F4'],
color: ['#00FFFF'],
grid: {
bottom: '40',
top: '20'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
data: online.labelDatas,
axisLine: {
show: true,
lineStyle: {
color: '#5879A4'
}
},
axisLabel: {
color: '#CFD5E5',
fontSize: 8,
interval: 0,
rotate: 25,
},
axisTick: {
show: false
},
},
yAxis: {
color: "#fff",
splitLine: {
lineStyle: {
color: '#21387F',
type: 'dashed',
}
},
axisLine: {
show: false,
lineStyle: {
color: '#CFD5E5',
fontsize: 12
}
},
axisTick: {
show: false
},
},
series: [
{
name: '乡镇图斑数量',
type: 'pictorialBar',
pictorialBar: '40%',
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
normal: {
opacity: 0.6
},
emphasis: {
opacity: 1
}
},
barWidth: 60,
data: online.valueDatas,
z: 10
}
]
};
if (villageCharts == null) {
var dom = document.getElementById("container2");
villageCharts = echarts.init(dom);
if (online.valueDatas.length > 14) {
option.dataZoom = {
type: 'slider',
width: 300,
height: 9,
zoomlock: true,
startValue: 0,
endValue: 9,
xAxisIndex: 0,
bottom: 5,
borderColor: 'rgba(255,255,255, 0.0)',
fillerColor: 'rgb(46,92,177)',
backgroundColor: 'rgba(0,0,0,0.04)', //两边未选中的滑动条区域的颜色
showDetail: true,
}
} else {
option.dataZoom = {
show: false
}
}
villageCharts.setOption(option);
} else {
villageCharts.clear();
villageCharts.setOption(option, true);
}
}
loadVillageData(news_online);
//加载图斑分类统计
var caseClassCharts = null;
function loadCaseClassCharts(industy) {
var option = {
color: ['#FF6C00', '#00FFFF', '#7627CB', '#FFFC00', '#0E4AE0', '#C933F4', "#e34fbb", "#69c99c", "#f9be39", "#73c0de", "#3a56ad", "#42b57f", "#9a1111", "#3ba272",],
tooltip: {
trigger: 'item'
},
legend: {
x: 'center',
bottom: '10',
itemWidth: 8,
itemHeight: 8,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 12
},
data: industy.labelDatas
},
calculable: true,
series: [
{
name: '图斑分类统计',
type: 'pie',
radius: ['35%', '55%'],
center: ['50%', '40%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 20,
borderColor: '#0E1C3B',
borderWidth: 5
},
data: industy.valueDatas
}
]
};
if (caseClassCharts == null) {
var dom = document.getElementById("container3");
caseClassCharts = echarts.init(dom);
caseClassCharts.setOption(option);
} else {
caseClassCharts.clear();
caseClassCharts.setOption(option, true);
}
}
loadCaseClassCharts(news_industy);
//加载本周图表数据
var thisWeekDataCharts = null;
function loadThisWeekData() {
var news_data_statistics_label = []
var news_data_statistics_report_num = []
var news_data_statistics_deal_num = []
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneCaseDateCount",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: { type: 'week' },
async: false,
beforeSend: function (xhr) { },
success: function (data) {
data.result.forEach(item => {
news_data_statistics_label.push(item.day)
news_data_statistics_report_num.push(item.reportCount)
news_data_statistics_deal_num.push(item.dealCount)
})
news_data_statistics = data.result;
}
});
var option = {
grid: {
bottom: '30',
top: '50'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['上报数', '处理数'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: news_data_statistics_label,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [{
name: '处理数',
type: 'bar',
barGap: 0,
barCategoryGap: 20,
barWidth: 12,
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#BE2FF1' },
{ offset: 1, color: '#630BD1' }
]
)
}
},
data: news_data_statistics_deal_num
}, {
name: '上报数',
type: 'bar',
barWidth: 12,
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00E4FF' },
{ offset: 1, color: '#0079FE' }
]
)
}
},
data: news_data_statistics_report_num
}]
};
if (thisWeekDataCharts == null) {
var dom = document.getElementById("container4");
thisWeekDataCharts = echarts.init(dom);
thisWeekDataCharts.setOption(option);
} else {
thisWeekDataCharts.clear();
thisWeekDataCharts.setOption(option, true);
}
// option
}
loadThisWeekData();
//加载本月图表数据
var thisMonthDataCharts = null;
function loadThisMonthDataCharts() {
var news_data_statistics_label = []
var news_data_statistics_report_num = []
var news_data_statistics_deal_num = []
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneCaseDateCount",
dataType: "json",
data: { type: 'month' },
headers: { "X-Token": localStorage.getItem("X-Token") },
async: false,
beforeSend: function (xhr) { },
success: function (data) {
data.result.forEach(item => {
news_data_statistics_label.push(item.day)
news_data_statistics_report_num.push(item.reportCount)
news_data_statistics_deal_num.push(item.dealCount)
})
news_data_statistics = data.result;
}
});
let option = {
grid: {
bottom: '30',
top: '50'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['上报数', '处理数'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: news_data_statistics_label,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
dataZoom: [
{
type: 'slider',
width: 300,
height: 9,
zoomlock: true,
startValue: 0,
endValue: 9,
xAxisIndex: 0,
bottom: 0,
borderColor: 'rgba(255,255,255, 0.0)',
fillerColor: '#00E4FF',
backgroundColor: 'rgba(0,0,0,0.04)', //两边未选中的滑动条区域的颜色
showDetail: true,
},
],
series: [{
name: '处理数',
type: 'bar',
barWidth: 12,
barGap: 0,
barCategoryGap: 20,
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#BE2FF1' },
{ offset: 1, color: '#630BD1' }
]
)
}
},
data: news_data_statistics_deal_num,
}, {
name: '上报数',
type: 'bar',
barWidth: 12,
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00E4FF' },
{ offset: 1, color: '#0079FE' }
]
)
}
},
data: news_data_statistics_report_num
}]
};
if (thisMonthDataCharts == null) {
var dom = document.getElementById("container5");
thisMonthDataCharts = echarts.init(dom);
thisMonthDataCharts.setOption(option);
} else {
thisMonthDataCharts.clear();
thisMonthDataCharts.setOption(option, true);
}
}
loadThisMonthDataCharts();
function getkmcamera(data) {
console.log(data)
$.ajax({
type: "GET",
url: BASE_URL + "/api/DroneClueReporting/GetCamerInfoByLngLat",
dataType: "json",
headers: { "X-Token": localStorage.getItem("X-Token") },
data: {
lng: data.lng,
lat: data.lat,
distince: 2000
},
async: false,
beforeSend: function (xhr) { },
success: function (data) {
console.log(data)
if (data.code == 200) {
var arr = data.result
$(".caseinfocameras").empty();
arr.forEach(element => {
// var appendStr = "<img src='" + IMAGE_BASE_URL + "/" + data.result.pic_list[i] + "' data-imgSrc='" + data.result.pic_list[i] + "' class='caseInfoImg' style='width:230px;height:100px;margin-right:15px;'/>";
var appendStr = ` <div class='caseCamera' data='` + JSON.stringify(element) + `'>
<img src="./images/monitor.png" alt="">
<span>`+ element.deviceName + `</span>
</div>`
$(".caseinfocameras").append(appendStr);
});
}
$('.caseCamera').on('click', function (e) {
console.log($(this).attr("data"))
$('.bgPop2,.pop2').hide();
var data = $(this).attr("data")
$('.bgPop4,.pop4').show();
vm.iframeVisble = true
localStorage.setItem("monitorTwoLayerData", data)
child.window.childFunction();
})
}
});
}