|
|
@@ -1,83 +1,84 @@
|
|
|
- // 筛选弹框
|
|
|
- var layer = layui.layer;
|
|
|
- var layerCreateIndex = '';
|
|
|
- var layerCreateIndex2 = '';
|
|
|
- layui.use('layer', function () {
|
|
|
- layerCreateIndex = layer.open({
|
|
|
- type: 1,
|
|
|
- title: false,
|
|
|
- closeBtn: 0,
|
|
|
- // shadeClose: true,
|
|
|
- skin: 'yourclass',
|
|
|
- area: [
|
|
|
- '380px', '300px'
|
|
|
- ],
|
|
|
- content: $(".reportOut"),
|
|
|
- success: function () {
|
|
|
- $('.clsBtn,.cancel').click(function () {
|
|
|
- layer.close(layerCreateIndex);
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- layui.use([
|
|
|
- 'form', 'layedit', 'laydate'
|
|
|
- ], function () {
|
|
|
- });
|
|
|
-
|
|
|
- //时间日期选择
|
|
|
- layui.use('laydate', function () {
|
|
|
- var laydate = layui.laydate;
|
|
|
- // 开始日期
|
|
|
- var insStart = laydate.render({
|
|
|
- elem: '#startTime',
|
|
|
- trigger: 'click',
|
|
|
- done: function (value, date) { // 更新结束日期的最小日期
|
|
|
- insEnd.config.min = lay.extend({}, date, {
|
|
|
- month: date.month - 1
|
|
|
- });
|
|
|
- // 自动弹出结束日期的选择器
|
|
|
- insEnd.config.elem[0].focus();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 结束日期
|
|
|
- var insEnd = laydate.render({
|
|
|
- elem: '#endTime',
|
|
|
- trigger: 'click',
|
|
|
- done: function (value, date) { // 更新开始日期的最大日期
|
|
|
- insStart.config.max = lay.extend({}, date, {
|
|
|
- month: date.month - 1
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- getNameList()
|
|
|
- // 单位下拉 ajax请求
|
|
|
- function getNameList() {
|
|
|
- ajaxRequest(DEVICE_TYPE_COMPANYLIST, "POST", {}, function (result) {
|
|
|
- let data = result.RESULT;
|
|
|
- let items = '';
|
|
|
- data.forEach(function (item, key) {
|
|
|
- items += `<option value=''>请选择</option><option value="${
|
|
|
+// 筛选弹框
|
|
|
+var layer = layui.layer;
|
|
|
+var layerCreateIndex = '';
|
|
|
+var layerCreateIndex2 = '';
|
|
|
+layui.use('layer', function() {
|
|
|
+ layerCreateIndex = layer.open({
|
|
|
+ type: 1,
|
|
|
+ // title: false,
|
|
|
+ closeBtn: 0,
|
|
|
+ // shadeClose: true,
|
|
|
+ skin: 'yourclass',
|
|
|
+ area: [
|
|
|
+ '380px', '300px'
|
|
|
+ ],
|
|
|
+ content: $(".reportOut"),
|
|
|
+ success: function() {
|
|
|
+ $('.clsBtn,.cancel').click(function() {
|
|
|
+ layer.close(layerCreateIndex);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+//时间日期选择
|
|
|
+layui.use([
|
|
|
+ 'form', 'layedit', 'laydate'
|
|
|
+], function() {});
|
|
|
+layui.use('laydate', function() {
|
|
|
+ var laydate = layui.laydate;
|
|
|
+ // 开始日期
|
|
|
+ var insStart = laydate.render({
|
|
|
+ elem: '#startTime',
|
|
|
+ trigger: 'click',
|
|
|
+ value: '2021-04-01',
|
|
|
+ isInitValue: true,
|
|
|
+ done: function(value, date) { // 更新结束日期的最小日期
|
|
|
+ insEnd.config.min = lay.extend({}, date, {
|
|
|
+ month: date.month - 1
|
|
|
+ });
|
|
|
+ // 自动弹出结束日期的选择器
|
|
|
+ insEnd.config.elem[0].focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 结束日期
|
|
|
+ var insEnd = laydate.render({
|
|
|
+ elem: '#endTime',
|
|
|
+ trigger: 'click',
|
|
|
+ value: '2021-04-30',
|
|
|
+ done: function(value, date) { // 更新开始日期的最大日期
|
|
|
+ insStart.config.max = lay.extend({}, date, {
|
|
|
+ month: date.month - 1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+// 单位下拉 ajax请求
|
|
|
+getNameList()
|
|
|
+
|
|
|
+function getNameList() {
|
|
|
+ ajaxRequest(DEVICE_TYPE_COMPANYLIST, "POST", {}, function(result) {
|
|
|
+ let data = result.RESULT;
|
|
|
+ let items = '';
|
|
|
+ data.forEach(function(item, key) {
|
|
|
+ items += `<option value=''>请选择</option><option value="${
|
|
|
item.owner_id
|
|
|
}">${
|
|
|
item.owner_name
|
|
|
}</option>`
|
|
|
- })
|
|
|
- $('#getNameList').html(items);
|
|
|
+ })
|
|
|
+ $('#getNameList').html(items);
|
|
|
|
|
|
- }, function (errorMsg) {
|
|
|
- alert("请求数据失败!");
|
|
|
- })
|
|
|
- }
|
|
|
+ }, function(errorMsg) {
|
|
|
+ alert("请求数据失败!");
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
|
|
|
- /* 筛选提交发送请求 */
|
|
|
+/* 筛选提交发送请求 */
|
|
|
$('#nextStep').click(function() {
|
|
|
-
|
|
|
//获取表单的值 并转换成对象
|
|
|
let allParam = serializeArrayToObj($("#reportOutForm").serializeArray());
|
|
|
|
|
|
@@ -91,55 +92,776 @@ $('#nextStep').click(function() {
|
|
|
alert(res.msg);
|
|
|
return;
|
|
|
}
|
|
|
- //验证通过 请求ajax
|
|
|
- ajaxRequest(MONTH_REPORT, "POST", allParam, function(result) {
|
|
|
- layer.close(layerCreateIndex);
|
|
|
- layer.msg('添加成功!', { icon: 6 });
|
|
|
- $('#reportOutForm')[0].reset();
|
|
|
-
|
|
|
- layui.use('layer', function () {
|
|
|
- layerCreateIndex2 = layer.open({
|
|
|
- type: 1,
|
|
|
- title: false,
|
|
|
- closeBtn: 0,
|
|
|
- skin: 'yourclass',
|
|
|
- area: [
|
|
|
- '700px', '800px'
|
|
|
- ],
|
|
|
- content: $(".reportContentOut"),
|
|
|
- success: function () {
|
|
|
- $('.clsBtn,.cancel').click(function () {
|
|
|
- window.open("./index.html");
|
|
|
+ // //验证通过 请求ajax
|
|
|
+ // ajaxRequest(MONTH_REPORT, "POST", allParam, function(result) {
|
|
|
+ // layer.close(layerCreateIndex);
|
|
|
+ // layer.msg('添加成功!', { icon: 6 });
|
|
|
+ // $('#reportOutForm')[0].reset();
|
|
|
+
|
|
|
+ // layui.use('layer', function () {
|
|
|
+ // layerCreateIndex2 = layer.open({
|
|
|
+ // type: 1,
|
|
|
+ // title: false,
|
|
|
+ // closeBtn: 0,
|
|
|
+ // skin: 'yourclass',
|
|
|
+ // area: [
|
|
|
+ // '700px', '800px'
|
|
|
+ // ],
|
|
|
+ // content: $(".reportContentOut"),
|
|
|
+ // success: function () {
|
|
|
+
|
|
|
+ // console.log(result.data);
|
|
|
+ // var data=result.data;
|
|
|
+ // var deviceStatistic=data.deviceStatistic;//告警处理情况统计
|
|
|
+ // var deviceOnly=data.deviceOnly; //设备离线情况统计
|
|
|
+
|
|
|
+ // (function(){
|
|
|
+ // var companyInfo=data.companyInfo; //单位信息
|
|
|
+ // $('#companyName').html(companyInfo.ownerName);
|
|
|
+ // })();
|
|
|
+
|
|
|
+ // (function(){
|
|
|
+ // var typeList=data.typeList; //设备类型统计信息
|
|
|
+ // let items = '';
|
|
|
+ // console.log(typeList)
|
|
|
+ // typeList.forEach(function(item, key) {
|
|
|
+ // items+= `
|
|
|
+ // <tr>
|
|
|
+ // <td>${item.TypeName} </td>
|
|
|
+ // <td>${item.Num}</td>
|
|
|
+ // <td>${item.TransmissionModel}</td>
|
|
|
+ // <td>${item.Business}</td>
|
|
|
+ // </tr>`
|
|
|
+ // })
|
|
|
+ // $('#typeList').html(items);
|
|
|
+
|
|
|
+ // })()
|
|
|
+
|
|
|
+
|
|
|
+ // //关闭弹框
|
|
|
+ // $('.clsBtn,.cancel').click(function () {
|
|
|
+ // window.open("./index.html");
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // }, function(errorMsg) {
|
|
|
+ // alert("异常错误!");
|
|
|
+ // })
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//验证通过 请求ajax
|
|
|
+ajaxRequest(MONTH_REPORT, "POST", {
|
|
|
+ 'companyId': 10012,
|
|
|
+ 'startTime': 2021 - 04 - 01,
|
|
|
+ 'endTime': 2021 - 04 - 30
|
|
|
+}, function(result) {
|
|
|
+ // layer.close(layerCreateIndex);
|
|
|
+ // layer.msg('添加成功!', { icon: 6 });
|
|
|
+ $('#reportOutForm')[0].reset();
|
|
|
+
|
|
|
+ layui.use('layer', function() {
|
|
|
+ layerCreateIndex2 = layer.open({
|
|
|
+ type: 1,
|
|
|
+ title: false,
|
|
|
+ closeBtn: 0,
|
|
|
+ skin: 'yourclass',
|
|
|
+ area: [
|
|
|
+ '700px', '800px'
|
|
|
+ ],
|
|
|
+ content: $(".reportContentOut"),
|
|
|
+ success: function() {
|
|
|
+
|
|
|
+ console.log(result.data);
|
|
|
+ var data = result.data;
|
|
|
+ var deviceOnly = data.deviceOnly; //设备离线情况统计
|
|
|
+ var companyInfo = data.companyInfo; //单位信息
|
|
|
+ // 大标题
|
|
|
+ (function() {
|
|
|
+ $('#companyName').html(companyInfo.ownerName);
|
|
|
+ })();
|
|
|
+
|
|
|
+ //设备类型统计信息
|
|
|
+ (function() {
|
|
|
+ var typeList = data.typeList.deviceType;
|
|
|
+ let items = '';
|
|
|
+ let items2 = ''
|
|
|
+ typeList.forEach(function(item, key) {
|
|
|
+ items += ` <tr>
|
|
|
+ <td>${item.TypeName} </td>
|
|
|
+ <td>${item.Num}</td>
|
|
|
+ <td>${item.TransmissionModel}</td>
|
|
|
+ <td>${item.Business}</td>
|
|
|
+ </tr>`
|
|
|
})
|
|
|
- }
|
|
|
- })
|
|
|
+ items2 = ` <tr>
|
|
|
+ <td>统计总数</td>
|
|
|
+ <td>${data.typeList.deviceNum} </td>
|
|
|
+ <td ></td>
|
|
|
+ <td ></td>
|
|
|
+ </tr>`
|
|
|
+ $('#typeList').html(items + items2);
|
|
|
+ })();
|
|
|
+
|
|
|
+ //单位信息
|
|
|
+ (function() {
|
|
|
+ let items = '';
|
|
|
+ items = ` <tr>
|
|
|
+ <td>${companyInfo.ownerName}</td>
|
|
|
+ <td>${companyInfo.ownerAddress} </td>
|
|
|
+ </tr>`
|
|
|
+ $('#companyData').html(items);
|
|
|
+ })();
|
|
|
+
|
|
|
+ //告警处理情况统计
|
|
|
+ (function() {
|
|
|
+ var deviceStatistic = data.deviceStatistic; //告警处理情况统计
|
|
|
+ var waterAlarm = deviceStatistic.waterAlarm;
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 告警处理水系统折线图
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#waterChart1"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["水系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .3)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "水系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
+ lineStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ // 渐变色，只需要复制即可
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ // 影子效果
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
+ },
|
|
|
+ // 设置拐点形状
|
|
|
+ symbol: "circle",
|
|
|
+ // 拐点大小
|
|
|
+ symbolSize: 8,
|
|
|
+ // 刚开始时不显示拐点，鼠标经过才显示
|
|
|
+ showSymbol: false,
|
|
|
+ // 设置拐点颜色以及边框
|
|
|
+ itemStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ borderColor: "rgba(221, 220, 107, .1)",
|
|
|
+ borderWidth: 12,
|
|
|
+ },
|
|
|
+ data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 50, 40, 30, 40, 20, 50, 40, 30, ]
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ //echarts赋值到src
|
|
|
+ var img1 = document.getElementById('waterChart1_img');
|
|
|
+ setTimeout(function() {
|
|
|
+ img1.src = myChart.getDataURL();
|
|
|
+ }, 1200)
|
|
|
+
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 告警处理火系统折线图
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#fireChart1"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["火系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .3)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "火系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ // 渐变色，只需要复制即可
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(237,63,53, 0.4)", // 渐变色的起始颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(237,63,53, 0.1)", // 渐变线的结束颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ // 影子效果
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
+ },
|
|
|
+ // 设置拐点形状
|
|
|
+ symbol: "circle",
|
|
|
+ // 拐点大小
|
|
|
+ symbolSize: 8,
|
|
|
+ // 刚开始时不显示拐点，鼠标经过才显示
|
|
|
+ showSymbol: false,
|
|
|
+ // 设置拐点颜色以及边框
|
|
|
+ itemStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ borderColor: "rgba(221, 220, 107, .1)",
|
|
|
+ borderWidth: 12,
|
|
|
+ },
|
|
|
+ data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20, ],
|
|
|
+ }, ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ //echarts赋值到src
|
|
|
+ var img1 = document.getElementById('fireChart1_img');
|
|
|
+ setTimeout(function() {
|
|
|
+ img1.src = myChart.getDataURL();
|
|
|
+ }, 1200)
|
|
|
+
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 设备离线水系统折线图
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#waterOnlyChart"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["水系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .3)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "水系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
+ lineStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ // 渐变色，只需要复制即可
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ // 影子效果
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
+ },
|
|
|
+ // 设置拐点形状
|
|
|
+ symbol: "circle",
|
|
|
+ // 拐点大小
|
|
|
+ symbolSize: 8,
|
|
|
+ // 刚开始时不显示拐点，鼠标经过才显示
|
|
|
+ showSymbol: false,
|
|
|
+ // 设置拐点颜色以及边框
|
|
|
+ itemStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ borderColor: "rgba(221, 220, 107, .1)",
|
|
|
+ borderWidth: 12,
|
|
|
+ },
|
|
|
+ data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 50, 40, 30]
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ //echarts赋值到src
|
|
|
+ var img1 = document.getElementById('waterOnlyChart_img');
|
|
|
+ setTimeout(function() {
|
|
|
+ img1.src = myChart.getDataURL();
|
|
|
+ }, 1200)
|
|
|
+
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 设备离线火系统折线图
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#fireOnlyChart"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["火系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .3)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "火系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ // 渐变色，只需要复制即可
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(237,63,53, 0.4)", // 渐变色的起始颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(237,63,53, 0.1)", // 渐变线的结束颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ // 影子效果
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
+ },
|
|
|
+ // 设置拐点形状
|
|
|
+ symbol: "circle",
|
|
|
+ // 拐点大小
|
|
|
+ symbolSize: 8,
|
|
|
+ // 刚开始时不显示拐点，鼠标经过才显示
|
|
|
+ showSymbol: false,
|
|
|
+ // 设置拐点颜色以及边框
|
|
|
+ itemStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ borderColor: "rgba(221, 220, 107, .1)",
|
|
|
+ borderWidth: 12,
|
|
|
+ },
|
|
|
+ data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20, ],
|
|
|
+ }, ],
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ //echarts赋值到src
|
|
|
+ var img1 = document.getElementById('fireOnlyChart_img');
|
|
|
+ setTimeout(function() {
|
|
|
+ img1.src = myChart.getDataURL();
|
|
|
+ }, 1200)
|
|
|
+
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 设备离线烟感折线图
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#smokeOnlyChart"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["烟感"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#F4A460",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .3)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "烟感",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
+ lineStyle: {
|
|
|
+ color: "#F4A460",
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ // 渐变色，只需要复制即可
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(244,164,96, 0.4)", // 渐变色的起始颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(244,164,96, 0.1)", // 渐变线的结束颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ // 影子效果
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
+ },
|
|
|
+ // 设置拐点形状
|
|
|
+ symbol: "circle",
|
|
|
+ // 拐点大小
|
|
|
+ symbolSize: 8,
|
|
|
+ // 刚开始时不显示拐点，鼠标经过才显示
|
|
|
+ showSymbol: false,
|
|
|
+ // 设置拐点颜色以及边框
|
|
|
+ itemStyle: {
|
|
|
+ color: "#F4A460",
|
|
|
+ borderColor: "rgba(221, 220, 107, .1)",
|
|
|
+ borderWidth: 12,
|
|
|
+ },
|
|
|
+ data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20, ],
|
|
|
+ }, ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ //echarts赋值到src
|
|
|
+ var img1 = document.getElementById('smokeOnlyChart_img');
|
|
|
+ setTimeout(function() {
|
|
|
+ img1.src = myChart.getDataURL();
|
|
|
+ }, 1200)
|
|
|
+ })();
|
|
|
+
|
|
|
+ //关闭弹框
|
|
|
+ $('.clsBtn,.cancel').click(function() {
|
|
|
+ window.open("./index.html");
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
- }, function(errorMsg) {
|
|
|
- alert("异常错误!");
|
|
|
})
|
|
|
-})
|
|
|
+}, function(errorMsg) {
|
|
|
+ alert("异常错误!");
|
|
|
+});
|
|
|
|
|
|
|
|
|
+// 打印
|
|
|
+(function() {
|
|
|
|
|
|
-layui.use('layer', function () {
|
|
|
- layerCreateIndex2 = layer.open({
|
|
|
- type: 1,
|
|
|
- title: false,
|
|
|
- closeBtn: 0,
|
|
|
- skin: 'yourclass',
|
|
|
- area: [
|
|
|
- '700px', '800px'
|
|
|
- ],
|
|
|
- content: $(".reportContentOut"),
|
|
|
- success: function () {
|
|
|
- $('.clsBtn,.cancel').click(function () {
|
|
|
- layer.close(layerCreateIndex2);
|
|
|
+ $("#btnPrint").click(function() {
|
|
|
+ print_detail()
|
|
|
+ });
|
|
|
|
|
|
- // window.open("./index.html");
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
+ var print_detail = function() {
|
|
|
|
|
|
+ //打印前echarts图表转换成图片 start
|
|
|
+ $('#waterChart1_img,#fireChart1_img,#waterOnlyChart_img,#fireOnlyChart_img,#smokeOnlyChart_img').show()
|
|
|
+ $('waterChart1,#fireChart1,#waterOnlyChart,#fireOnlyChart,#smokeOnlyChart').hide()
|
|
|
|
|
|
+ // end
|
|
|
|
|
|
+ var div1_label1 = document.getElementById('printArea').innerHTML;
|
|
|
+ var hkey_key;
|
|
|
+ var hkey_root = 'HKEY_CURRENT_USER';
|
|
|
+ var hkey_path = '\\Software\\Micorsoft\\Internet Explorer\\PageSetup\\';
|
|
|
+ var print_win = window.open('打印窗口', '_blank');
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.setAttribute('width', '100%');
|
|
|
+ div.setAttribute('height', '100%');
|
|
|
+ var div_print = document.createElement('div');
|
|
|
+ div_print.setAttribute('style', 'width:595px;height:842px;padding:50px 20px;margin:0px auto 0px auto');
|
|
|
+ div_print.innerHTML = div1_label1;
|
|
|
+ div.appendChild(div_print);
|
|
|
+
|
|
|
+ print_win.document.write(div.innerHTML);
|
|
|
+ print_win.document.close();
|
|
|
+ try {
|
|
|
+ var RegWsh = new ActiveXObject('WScript.Shell');
|
|
|
+ hkey_key = 'header';
|
|
|
+ RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
|
|
|
+ hkey_key = 'footer';
|
|
|
+ RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
|
|
|
+ } catch (e) {}
|
|
|
+ print_win.print();
|
|
|
+ print_win.close();
|
|
|
+ }
|
|
|
+})()
|
Ming