|
|
@@ -5,7 +5,7 @@ var layerCreateIndex2 = '';
|
|
|
layui.use('layer', function() {
|
|
|
layerCreateIndex = layer.open({
|
|
|
type: 1,
|
|
|
- // title: false,
|
|
|
+ title: false,
|
|
|
closeBtn: 0,
|
|
|
// shadeClose: true,
|
|
|
skin: 'yourclass',
|
|
|
@@ -16,6 +16,8 @@ layui.use('layer', function() {
|
|
|
success: function() {
|
|
|
$('.clsBtn,.cancel').click(function() {
|
|
|
layer.close(layerCreateIndex);
|
|
|
+ //关闭弹框
|
|
|
+ window.open("./index.html");
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
@@ -55,6 +57,8 @@ layui.use('laydate', function() {
|
|
|
});
|
|
|
});
|
|
|
|
|
|
+
|
|
|
+
|
|
|
// 单位下拉 ajax请求
|
|
|
getNameList()
|
|
|
|
|
|
@@ -79,6 +83,10 @@ function getNameList() {
|
|
|
|
|
|
/* 筛选提交发送请求 */
|
|
|
$('#nextStep').click(function() {
|
|
|
+
|
|
|
+ var startTimes = $('#startTime').val();
|
|
|
+ var endTimes = $('#endTime').val();
|
|
|
+
|
|
|
//获取表单的值 并转换成对象
|
|
|
let allParam = serializeArrayToObj($("#reportOutForm").serializeArray());
|
|
|
|
|
|
@@ -92,745 +100,765 @@ $('#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 () {
|
|
|
-
|
|
|
- // 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>
|
|
|
+ //验证通过 请求ajax
|
|
|
+ ajaxRequest(MONTH_REPORT, "POST", allParam, function(result) {
|
|
|
+ // layer.close(layerCreateIndex);
|
|
|
+ $('#reportOutForm')[0].reset();
|
|
|
+
|
|
|
+ layui.use('layer', function() {
|
|
|
+ layerCreateIndex2 = layer.open({
|
|
|
+ type: 1,
|
|
|
+ title: false,
|
|
|
+ closeBtn: 0,
|
|
|
+ skin: 'yourclass',
|
|
|
+ area: [
|
|
|
+ '700px', '700px'
|
|
|
+ ],
|
|
|
+ content: $(".reportContentOut"),
|
|
|
+ success: function() {
|
|
|
+
|
|
|
+ var data = result.data;
|
|
|
+
|
|
|
+ var companyInfo = data.companyInfo; //单位信息
|
|
|
+ var deviceStatistic = data.deviceStatistic; //告警处理
|
|
|
+ var deviceOnly = data.deviceOnly; //设备离线情况统计
|
|
|
+
|
|
|
+
|
|
|
+ //大标题和时间动态赋值
|
|
|
+ (function() {
|
|
|
+ $('#companyName').html(companyInfo.ownerName);
|
|
|
+ $('#staticTime').text(`${startTimes}日 到 ${endTimes}日`);
|
|
|
+ })();
|
|
|
+
|
|
|
+ //单位信息
|
|
|
+ (function() {
|
|
|
+ let items = '';
|
|
|
+ items = ` <tr>
|
|
|
+ <td>${companyInfo.ownerName}</td>
|
|
|
+ <td>${companyInfo.ownerAddress} </td>
|
|
|
+ </tr>`
|
|
|
+ $('#companyData').html(items);
|
|
|
+ $('#staticTime').html()
|
|
|
+ })();
|
|
|
+
|
|
|
+ //设备类型统计信息
|
|
|
+ (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>
|
|
|
+ })
|
|
|
+ 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>
|
|
|
+ $('#typeList').html(items + items2);
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 告警处理水系统
|
|
|
+ (function() {
|
|
|
+ var waterAlarm = JSON.parse(deviceStatistic.waterAlarm);
|
|
|
+ waterAlarm = waterAlarm.RESULT[0];
|
|
|
+
|
|
|
+ let items = '';
|
|
|
+ items = ` <tr>
|
|
|
+ <td>${waterAlarm.count}</td>
|
|
|
+ <td>${waterAlarm.sum} </td>
|
|
|
+ <td>${waterAlarm.count- waterAlarm.sum} </td>
|
|
|
+ <td>${waterAlarm.count?(waterAlarm.sum/waterAlarm.count)*100:0}% </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,
|
|
|
+ $('#water_statistics').html(items);
|
|
|
+
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#waterChart1"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255, 255, 255, .1)",
|
|
|
+ legend: {
|
|
|
+ data: ["水系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ fontSize: "12",
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- }, ],
|
|
|
- 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,
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- },
|
|
|
- // 修改分割线的颜色
|
|
|
- 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)", // 渐变色的起始颜色
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: waterAlarm.day_list,
|
|
|
+ // 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,
|
|
|
},
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .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: {
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#444",
|
|
|
+ opacity: .3
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "水系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
lineStyle: {
|
|
|
- color: "red",
|
|
|
+ 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: waterAlarm.count_list
|
|
|
+ // 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 fireAlarm = JSON.parse(deviceStatistic.fireAlarm);
|
|
|
+ fireAlarm = fireAlarm.RESULT[0];
|
|
|
+
|
|
|
+ let items = '';
|
|
|
+ items = ` <tr>
|
|
|
+ <td>${ fireAlarm.count}</td>
|
|
|
+ <td>${ fireAlarm.sum} </td>
|
|
|
+ <td>${ fireAlarm.count- fireAlarm.sum} </td>
|
|
|
+ <td>${ fireAlarm.count? (fireAlarm.sum/ fireAlarm.count)*100:0}% </td>
|
|
|
+ </tr>`
|
|
|
+ $('#fire_statistics').html(items);
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#fireChart1"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
},
|
|
|
- },
|
|
|
- }, ],
|
|
|
- yAxis: [{
|
|
|
- type: "value",
|
|
|
- // 去除刻度线
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- // y轴的线颜色
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255, 255, 255, .1)",
|
|
|
+ legend: {
|
|
|
+ data: ["火系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- // 文字的颜色
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "rgba(255, 255, 255, .6)",
|
|
|
- fontSize: 12,
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- },
|
|
|
- // 修改分割线的颜色
|
|
|
- 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)", // 渐变色的起始颜色
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: fireAlarm.day_list,
|
|
|
+ // 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,
|
|
|
},
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(237,63,53, 0.1)", // 渐变线的结束颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
},
|
|
|
- ],
|
|
|
- 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: {
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#444",
|
|
|
+ opacity: .3
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "火系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
lineStyle: {
|
|
|
- color: "red",
|
|
|
+ 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: fireAlarm.count_list
|
|
|
+ // 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 waterDeviceOnly = JSON.parse(deviceOnly.waterDeviceOnly);
|
|
|
+ waterDeviceOnly = waterDeviceOnly.RESULT[0];
|
|
|
+
|
|
|
+ let items = '';
|
|
|
+ items = ` <tr>
|
|
|
+ <td>${ waterDeviceOnly.count}</td>
|
|
|
+ <td>${ waterDeviceOnly.sum} </td>
|
|
|
+ <td>${ waterDeviceOnly.count- waterDeviceOnly.sum} </td>
|
|
|
+ <td>${ waterDeviceOnly.count? (waterDeviceOnly.sum/ waterDeviceOnly.count)*100:0}% </td>
|
|
|
+ </tr>`
|
|
|
+ $('#waterDeviceOnly').html(items);
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#waterOnlyChart"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
},
|
|
|
- },
|
|
|
- }, ],
|
|
|
- yAxis: [{
|
|
|
- type: "value",
|
|
|
- // 去除刻度线
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- // y轴的线颜色
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255, 255, 255, .1)",
|
|
|
+ legend: {
|
|
|
+ data: ["水系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#0184d5",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- // 文字的颜色
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "rgba(255, 255, 255, .6)",
|
|
|
- fontSize: 12,
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- },
|
|
|
- // 修改分割线的颜色
|
|
|
- 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)", // 渐变色的起始颜色
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: waterDeviceOnly.day_list,
|
|
|
+ // 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,
|
|
|
},
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
},
|
|
|
- ],
|
|
|
- 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: {
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#444",
|
|
|
+ opacity: .3
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "水系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
lineStyle: {
|
|
|
- color: "red",
|
|
|
+ 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: waterDeviceOnly.count_list,
|
|
|
+ // 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 fireOnly = JSON.parse(deviceOnly.fireOnly);
|
|
|
+ fireOnly = fireOnly.RESULT[0];
|
|
|
+
|
|
|
+ let items = '';
|
|
|
+ items = ` <tr>
|
|
|
+ <td>${ fireOnly.count}</td>
|
|
|
+ <td>${ fireOnly.sum} </td>
|
|
|
+ <td>${ fireOnly.count- fireOnly.sum} </td>
|
|
|
+ <td>${ fireOnly.count? (fireOnly.sum/ fireOnly.count)*100:0}% </td>
|
|
|
+ </tr>`
|
|
|
+ $('#fireOnly').html(items);
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#fireOnlyChart"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
},
|
|
|
- },
|
|
|
- }, ],
|
|
|
- yAxis: [{
|
|
|
- type: "value",
|
|
|
- // 去除刻度线
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- // y轴的线颜色
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255, 255, 255, .1)",
|
|
|
+ legend: {
|
|
|
+ data: ["火系统"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#ed3f35",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- // 文字的颜色
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "rgba(255, 255, 255, .6)",
|
|
|
- fontSize: 12,
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- },
|
|
|
- // 修改分割线的颜色
|
|
|
- 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)", // 渐变色的起始颜色
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: fireOnly.day_list,
|
|
|
+ // 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,
|
|
|
},
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(237,63,53, 0.1)", // 渐变线的结束颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
},
|
|
|
- ],
|
|
|
- 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: {
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#444",
|
|
|
+ opacity: .3
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, .6)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 修改分割线的颜色
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#aaa", // 分割线颜色
|
|
|
+ opacity: .5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ series: [{
|
|
|
+ name: "火系统",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // 单独修改当前线条的样式
|
|
|
lineStyle: {
|
|
|
- color: "red",
|
|
|
+ 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: fireOnly.count_list,
|
|
|
+ // 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 smokeOnly = JSON.parse(deviceOnly.smokeOnly);
|
|
|
+ smokeOnly = smokeOnly.RESULT[0];
|
|
|
+
|
|
|
+ let items = '';
|
|
|
+ items = ` <tr>
|
|
|
+ <td>${ smokeOnly.count}</td>
|
|
|
+ <td>${ smokeOnly.sum} </td>
|
|
|
+ <td>${ smokeOnly.count- smokeOnly.sum} </td>
|
|
|
+ <td>${ smokeOnly.count? (smokeOnly.sum/ smokeOnly.count)*100:0}% </td>
|
|
|
+ </tr>`
|
|
|
+ $('#smokeOnly').html(items);
|
|
|
+ (function() {
|
|
|
+ var myChart = echarts.init(document.querySelector("#smokeOnlyChart"));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
},
|
|
|
- },
|
|
|
- }, ],
|
|
|
- yAxis: [{
|
|
|
- type: "value",
|
|
|
- // 去除刻度线
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- // y轴的线颜色
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255, 255, 255, .1)",
|
|
|
+ legend: {
|
|
|
+ data: ["烟感"],
|
|
|
+ bottom: "0",
|
|
|
+ textStyle: {
|
|
|
+ color: "#F4A460",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- // 文字的颜色
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "rgba(255, 255, 255, .6)",
|
|
|
- fontSize: 12,
|
|
|
+ grid: {
|
|
|
+ left: "10",
|
|
|
+ right: "10",
|
|
|
+ top: "30",
|
|
|
+ bottom: "30",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- },
|
|
|
- // 修改分割线的颜色
|
|
|
- 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)", // 渐变色的起始颜色
|
|
|
+ xAxis: [{
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: smokeOnly.day_list,
|
|
|
+ // 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,
|
|
|
},
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(244,164,96, 0.1)", // 渐变线的结束颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
},
|
|
|
- ],
|
|
|
- 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");
|
|
|
- })
|
|
|
- }
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ type: "value",
|
|
|
+ // 去除刻度线
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // y轴的线颜色
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#444",
|
|
|
+ opacity: .3
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 文字的颜色
|
|
|
+ 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: smokeOnly.count_list,
|
|
|
+ // 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() {
|
|
|
-
|
|
|
$("#btnPrint").click(function() {
|
|
|
print_detail()
|
|
|
});
|
|
|
-
|
|
|
var print_detail = function() {
|
|
|
|
|
|
//打印前echarts图表转换成图片 start
|
Ming