You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 lines
18 KiB
525 lines
18 KiB
|
|
<!DOCTYPE html>
|
|
<html style="height:100%;">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>巡查数据统计</title>
|
|
<link href="/js/layui/css/layui.css" rel="stylesheet" />
|
|
<link type="text/css" href="../../css/zhgl-style2.css" rel="stylesheet" />
|
|
<link href="../../css/jquery.easy_slides.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="../../css/public.css" media="all" />
|
|
<link rel="stylesheet" href="../../css/ztree/metro/ztree.css">
|
|
<style>
|
|
.slider_four_in_line {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.layui-form-select dl {
|
|
background-color: #02203a;
|
|
color: #fff;
|
|
}
|
|
|
|
.layui-icon {
|
|
color: #fff;
|
|
}
|
|
|
|
.layui-icon {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="border: 1px solid #0c6f89;
|
|
background: rgba(12, 70, 100, 0.8);
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
">
|
|
<div style="
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0px;
|
|
left: 0;
|
|
width: 270px;
|
|
min-height: 500px;
|
|
border: 1px solid #0c6f89;
|
|
background: rgba(12, 70, 100, 0.8);
|
|
border-radius:4px;
|
|
">
|
|
|
|
<blockquote class="layui-elem-quote title">机构目录</blockquote>
|
|
<div style="width: 100%;height: calc(100% - 52px);overflow: auto">
|
|
<ul id="ztree" class="ztree"></ul>
|
|
</div>
|
|
</div>
|
|
<!--<div class="zh-row1" style="width:calc(100%);text-align:center;height:10px;font-size:24px;font-weight:bold;">
|
|
巡查数据统计
|
|
</div>-->
|
|
<div class="layui-col-lg10 layui-col-md10 layui-col-xs10" style="
|
|
position: absolute;
|
|
left: 290px;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 998;
|
|
width: auto;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
border: 1px solid #0c6f89;
|
|
background: rgba(12, 70, 100, 0.8);
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
">
|
|
<blockquote class="layui-elem-quote quoteBox">
|
|
<form class="layui-form">
|
|
<div class="layui-input-inline">
|
|
<input type="checkbox" id="is_content" name='is_content' lay-filter="is_content" value="1" title="包含下级所属单位" />
|
|
</div>
|
|
<div class="layui-inline">
|
|
查询时间
|
|
</div>
|
|
<div class="layui-inline">
|
|
<input type="text" class="layui-input" id="dayTime" placeholder="yyyy-MM-DD">
|
|
</div>
|
|
<div class="layui-inline">
|
|
<button type="button" class="layui-btn layui-btn-normal" id="btn_Query">查询</button>
|
|
<button type="button" class="layui-btn layui-btn-normal" id="btn_Export">导出</button>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</blockquote>
|
|
|
|
<div class="zh-content" style="top: 0px; height: calc(80%);">
|
|
|
|
<div class="zh-row1" style="height: calc(60%);">
|
|
<div id="timescore" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
|
|
<div class="zh-row1" style="height: calc(20%); width: calc(100%);">
|
|
|
|
|
|
<table id="myOrganizationTab" lay-filter="myOrganizationTab"></table>
|
|
|
|
</div>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="divID" style="display:none; width:500px;">
|
|
<table id="wxcSpotTab" lay-filter="wxcSpotTab"></table>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<script src="../../js/jquery-2.1.3.min.js"></script>
|
|
<script src="/js/layui/layui.js"></script>
|
|
<script src="../../js/echarts.min.js" charset="UTF-8"></script>
|
|
<script src="../../js/table2excel_ext.js"></script>
|
|
<script>
|
|
|
|
layui.config({
|
|
base: '../../js/'
|
|
}).use(['form', 'layer', 'table', 'laytpl', 'laydate', 'upload', 'element', 'treetable', 'ztree'], function () {
|
|
var form = layui.form,
|
|
layer = parent.layer === undefined ? layui.layer : top.layer,
|
|
laytpl = layui.laytpl,
|
|
table = layui.table,
|
|
upload = layui.upload,
|
|
laydate = layui.laydate,
|
|
treetable = layui.treetable,
|
|
element = layui.element;
|
|
|
|
var OrgId = JSON.parse(window.sessionStorage.getItem("userInfo")).OrgID;
|
|
|
|
//var OrgId = "fc21743dcaad4225b8be141dd47d8a2f";
|
|
|
|
//var OrgId = "fbbb44bb458c4336a84e009df74c8598";
|
|
|
|
//年月选择框
|
|
laydate.render({
|
|
elem: '#dayTime',
|
|
type: 'date',
|
|
max: 0,
|
|
value: new Date()
|
|
});
|
|
|
|
var selTreeID = "";
|
|
var $zTree, OrgList = [];
|
|
var setting = {
|
|
view: {
|
|
selectedMulti: false
|
|
},
|
|
data: {
|
|
key: {
|
|
name: "NAME"
|
|
},
|
|
simpleData: {
|
|
enable: true,
|
|
type: "TYPE",
|
|
idKey: "ID",
|
|
pIdKey: "PID"
|
|
}
|
|
},
|
|
edit: {
|
|
enable: false
|
|
},
|
|
callback: {
|
|
onClick: function (e, treeId, treeNode) {
|
|
selTreeID = treeNode.ID;
|
|
OrgId = treeNode.ID;
|
|
dbQuery();
|
|
}
|
|
}
|
|
};
|
|
|
|
//初始化树
|
|
$(function () {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/ashx/SysEmpHandler.ashx",
|
|
data: { Action: "getOrgOnlyTree", OrgId: OrgId },
|
|
dataType: "json",
|
|
success: function (result) {
|
|
var zNodes = result.data;
|
|
if (zNodes.length > 0) {
|
|
for (var i in zNodes) {
|
|
OrgList.push(zNodes[i].ID);
|
|
}
|
|
}
|
|
$zTree = $.fn.zTree.init($("#ztree"), setting, zNodes);
|
|
var nodes = $zTree.getNodes();
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
$zTree.expandNode($zTree.getNodes()[i], true, false, false);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function UpdTreeTable(treeData, treeSpid) {
|
|
//获取机构表格数据(Tree形式)
|
|
treetable.render({
|
|
treeColIndex: 1, //树形图标显示在第几列
|
|
treeSpid: treeSpid, //最上级的父级id
|
|
treeIdName: 'ORG_ID', //id字段的名称
|
|
treePidName: 'PID', //pid字段的名称，父级菜单id
|
|
treeDefaultClose: false, //是否默认折叠
|
|
treeLinkage: false, //父级展开时是否自动展开所有子级
|
|
elem: '#myOrganizationTab',
|
|
where: {
|
|
Action: 'OrgList',
|
|
OrgId: OrgId,
|
|
random: new Date().getTime()
|
|
},
|
|
data: treeData
|
|
, toolbar: true
|
|
, defaultToolbar: ['filter', 'print', 'exports']
|
|
//cellMinWidth: 95,
|
|
, height: "400px",
|
|
//width:'110%',
|
|
id: "myOrganizationTabTable",
|
|
cols: [[
|
|
{ type: "checkbox" },
|
|
{ field: 'ORG_NAME', title: '单位名称', minWidth: 260, align: "left" },
|
|
// { field: 'ADDR', title: '单位地址', minWidth: 150, align: "center" },
|
|
//{ field: 'CONT', title: '联系人员', minWidth: 150, align: "center" },
|
|
//{ field: 'PHONE', title: '联系电话', minWidth: 150, align: "center" },
|
|
{
|
|
field: 'TYPE', title: '机构类型', width: 120, align: "center", templet: function (d) {
|
|
if (d.TYPE == "0") {
|
|
return ' <div class="layui-table-cell laytable-cell-1-LPPL_NAME">消防机构</div>';
|
|
} else if (d.TYPE == "1") {
|
|
return ' <div class="layui-table-cell laytable-cell-1-LPPL_NAME">部门</div>';
|
|
} else if (d.TYPE == "2") {
|
|
return ' <div class="layui-table-cell laytable-cell-1-LPPL_NAME">消防站</div>';
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
},
|
|
{
|
|
field: 'SpotCPRatioStr', title: '查铺', width: 120, align: "center", templet: function (d) {
|
|
return '<span lay-event="colCP" style="cursor:pointer;">' + d.SpotCPRatioStr + '</span>';
|
|
}
|
|
},
|
|
{ field: 'SpotCPRatio', title: '查铺完成率', width: 120, align: "center" },
|
|
{
|
|
field: 'SpotCSRatioStr', title: '查哨', width: 120, align: "center", templet: function (d) {
|
|
return '<span lay-event="colCS" style="cursor:pointer;">' + d.SpotCSRatioStr + '</span>';
|
|
}
|
|
},
|
|
{ field: 'SpotCSRatio', title: '查哨完成率', width: 120, align: "center" },
|
|
{
|
|
field: 'SpotXCRatioStr', title: '巡查巡检', width: 120, align: "center", templet: function (d) {
|
|
return '<span lay-event="colXC" style="cursor:pointer;">' + d.SpotXCRatioStr + '</span>';
|
|
}
|
|
},
|
|
{ field: 'SpotXCRatio', title: '巡查完成率', width: 120, align: "center" },
|
|
]]
|
|
});
|
|
}
|
|
|
|
|
|
//UpdTreeTable([]);
|
|
//查询
|
|
$("#btn_Query").click(function () {
|
|
dbQuery();
|
|
});
|
|
//导出
|
|
$("#btn_Export").click(function () {
|
|
var table2Excel = new Table2Excel();
|
|
table2Excel.append($("#myOrganizationTab"));
|
|
let fileName = '巡查数据统计';
|
|
table2Excel.exportLayTable($('#myOrganizationTab'), fileName);
|
|
});
|
|
|
|
function UpdWXCSpotFunShow(data, cType) {
|
|
UpdWXCSpotFun(data, cType);
|
|
layui.layer.open({
|
|
type: 1,
|
|
area: ['600px', '400px'],
|
|
shadeClose: true,
|
|
title: cType + '—未巡查点',
|
|
content: $('#divID') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
|
|
});
|
|
|
|
}
|
|
|
|
//监听单元格事件
|
|
table.on('tool(myOrganizationTab)', function (obj) {
|
|
var data = obj.data;
|
|
console.log(obj);
|
|
switch (obj.event) {
|
|
case 'colCP':
|
|
//alert('查铺');
|
|
UpdWXCSpotFunShow(obj.data.spotCPInfo.listNotCKSpot, '查铺');
|
|
break;
|
|
case 'colCS':
|
|
//alert('查哨');
|
|
UpdWXCSpotFunShow(obj.data.spotCSInfo.listNotCKSpot, '查哨');
|
|
break;
|
|
case 'colXC':
|
|
//alert('巡查');
|
|
UpdWXCSpotFunShow(obj.data.spotXCInfo.listNotCKSpot, '巡查巡检');
|
|
break;
|
|
}
|
|
|
|
});
|
|
|
|
//数据查询
|
|
function dbQuery() {
|
|
var is_content = "";
|
|
$("input:checkbox[name='is_content']:checked").each(function (i) {
|
|
is_content = $(this).val();
|
|
});
|
|
var dayStr = $("#dayTime").val();
|
|
|
|
//var dayStr = '2021/4/6';
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/ashx/OaPatrolSentryTaskHandler.ashx",
|
|
data: { Action: "GetInspectEcharsData", OrgId: OrgId, day: dayStr, is_content: is_content },
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (result) {
|
|
UpdTreeTable(result.data.tbData, result.data.treeSpid);
|
|
|
|
if (result.data.echarData.listOrgName.length > 20) {
|
|
option_Inspect.dataZoom[0].end = 20;
|
|
}
|
|
|
|
option_Inspect.xAxis[0].data = result.data.echarData.listOrgName;
|
|
|
|
option_Inspect.series[0].data = result.data.echarData.listCPData;
|
|
option_Inspect.series[1].data = result.data.echarData.listCSData;
|
|
option_Inspect.series[2].data = result.data.echarData.listXCData;
|
|
|
|
myCharttime.setOption(option_Inspect, true);
|
|
myCharttime.resize();
|
|
}
|
|
});
|
|
};
|
|
|
|
dbQuery();
|
|
|
|
UpdWXCSpotFun([], '');
|
|
|
|
function UpdWXCSpotFun(data, cType) {
|
|
|
|
var dayStr = $("#dayTime").val();
|
|
//第一个实例
|
|
table.render({
|
|
elem: '#wxcSpotTab'
|
|
, title: cType + '_' + dayStr + '_未巡查点信息'
|
|
, toolbar: true
|
|
, data: data
|
|
, width: 580
|
|
, limit: 2000
|
|
, cols: [[ //表头
|
|
{ field: 'TASK_Name', title: '任务', width: 310 }
|
|
, { field: 'SPOT_Name', title: '点名', width: 260 }
|
|
]]
|
|
});
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
var myCharttime = echarts.init(document.getElementById('timescore'));
|
|
|
|
$(function () {
|
|
window.onresize = function () {
|
|
myCharttime.resize();
|
|
};
|
|
});
|
|
|
|
var date = new Date();
|
|
var yarNum = date.getFullYear();
|
|
var subYar = yarNum - 1;
|
|
var option_Inspect = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: [{ name: '查铺次数', textStyle: { color: '#fff' } }, { name: '查哨次数', textStyle: { color: '#fff' } }, { name: '巡查次数', textStyle: { color: '#fff' } }]
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: { show: true, readOnly: false },
|
|
magicType: { show: true, type: ['line', 'bar'] },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',
|
|
xAxisIndex: 0,
|
|
filterMode: 'none',
|
|
height: '5%',
|
|
bottom: '2%',
|
|
start: 0, //数据窗口范围的起始百分比,表示30%
|
|
end: 100 //数据窗口范围的结束百分比,表示70%
|
|
}
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['a', 'b'],
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 20,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '查铺次数',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [],
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{ offset: 0, color: '#52AEFE' }, //柱图渐变色
|
|
{ offset: 0.5, color: '#417FF0' }, //柱图渐变色
|
|
{ offset: 1, color: '#2E47DF' }, //柱图渐变色
|
|
]
|
|
),
|
|
//柱形图圆角，初始化效果
|
|
barBorderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '查哨次数',
|
|
type: 'bar',
|
|
stack: '广告',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [],
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{ offset: 0, color: '#78FE45' }, //柱图渐变色
|
|
{ offset: 0.5, color: '#54DA29' }, //柱图渐变色
|
|
{ offset: 1, color: '#27B007' }, //柱图渐变色
|
|
]
|
|
),
|
|
//柱形图圆角，初始化效果
|
|
barBorderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '巡查次数',
|
|
type: 'bar',
|
|
data: [],
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{ offset: 0, color: '#66FCED' }, //柱图渐变色
|
|
{ offset: 0.5, color: '#2DCFF9' }, //柱图渐变色
|
|
{ offset: 1, color: '#00A9FF' }, //柱图渐变色
|
|
]
|
|
),
|
|
//柱形图圆角，初始化效果
|
|
barBorderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myCharttime.setOption(option_Inspect, true)
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style type="text/css">
|
|
.layui-icon {
|
|
color: #808080;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/css/right-list.css" media="all" />
|
|
<link rel="stylesheet" href="/css/bulletframebg.css" media="all" />
|