getIndexDate() /* ajax请求数据 */ // setInterval(getIndexDate(), 1000) // ajax请求 function getIndexDate(queryParam = {}) { ajaxRequest(INDEX_LIST, "POST", queryParam, function(result) { /* 饼图 */ (function() { //饼图数据赋值 var pie = result.pie; $("#loading").empty() var totalNum = 0; pie.forEach(function(value) { totalNum += value.value; }) /* 饼图初始化 */ var myChartPie = echarts.init(document.querySelector(".pie-bar .chart")); optionPie = { grid: { // width:'20%' }, title: [{ //text: '{name|3800}\n{val|设备总数}', text: '{name|' + totalNum + '}\n{val|设备总数}', top: 'center', left: 'center', textStyle: { rich: { name: { fontSize: 25, fontWeight: 'normal', color: '#37FF01', }, val: { fontSize: 14, fontWeight: 'bold', color: '#02DDF2', } } } }], tooltip: { trigger: 'item', formatter: function(params) { return params.name + ':' + params.value + '
占比:' + params.percent.toFixed(2) + '%' } }, series: [{ label: { "normal": { "show": true, "formatter": ' {b}:{c} ' }, "emphasis": { "show": true } }, name: '访问来源', radius: ['45%', '60%'], type: 'pie', // 设置图表类型为饼图 // data: [] data: pie, }], color: ['#EAF665', '#FF5801', '#6F99FA'] }; myChartPie.setOption(optionPie); window.addEventListener("resize", function() { myChartPie.resize(); }); })(); /* 柱状图 */ (function() { //bar柱状图 赋值 var bar = result.bar var barName = [] var barValue = [] for (var key in bar) { barName.push(key) barValue.push(bar[key]) } /* 柱状图初始化*/ var myChartBar = echarts.init(document.querySelector(".pie.chart")); var optionBar = { grid: { left: '4%', bottom: '16%', top: '15', // height: "70%", // right: '4%', containLabel: true }, tooltip: { trigger: 'axis', formatter: "{b}
{c}", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'line' // 默认为直线,可选为:'line' | 'shadow' } }, textStyle: { "color": "red", "fontSize": 14 //20 14 15字体大小 }, //"color": ["#63caff", "#49beff", "#03387a"], color: ["rgba(0,212,233,.2)", "rgba(0,212,233,.2)"], xAxis: { "nameTextStyle": { "color": "#c0c3cd", "padding": [0, 0, -10, 0], "fontSize": 100 }, "axisLabel": { "color": "#c0c3cd", "fontSize": 14, "interval": 0 }, "axisLine": { "show": false }, // "data": [], "data": barName, "type": "category" }, yAxis: { show: false }, series: [{ // "data": [20, 40, 15], "data": barValue, "type": "bar", "barMaxWidth": "auto", "barWidth": 20, "itemStyle": { "color": '#00D4E9', 'barBorderRadius': [30, 30, 0, 0], }, "label": { //aa标签数值 "show": true, "position": "top", "distance": 10, //标签数值的距离 20 40 15 "color": "#fff" } }, { "data": [100, 100, 100], "type": "bar", "barMaxWidth": "auto", "barWidth": 20, "barGap": "-100%", "zlevel": -1 }, ], }; myChartBar.setOption(optionBar); window.addEventListener("resize", function() { myChartBar.resize(); }); })(); /* 折线图 */ (function() { //折线图数据赋值 var line = result.line; var lineData = []; for (var key in line) { for (const key2 in line[key]) { lineData.indexOf } } var lineDate = [] var seriesData = [] for (var key in line) { var lineKey = []; for (var date in line[key]) { if ($.inArray(date, lineDate) == -1) { lineDate.push(date) } lineKey.push(line[key][date]) } seriesData.push({ 'name': key, 'data': lineKey }); } // console.log(seriesData) /* 折线图初始化 */ var myChart = echarts.init(document.querySelector(".line .chart")); var option = { legend: { itemGap: 20, // 图例每项之间的间隔。 icon: 'stack', padding: 0, // 图例内边距 textStyle: { color: '#fff', align: 'center', }, }, color: ['#6F99FA', '#FF5801', '#EAF665'], grid: { bottom: '0', right: '10', left: '10', top: '35', containLabel: true, }, tooltip: { trigger: 'axis', confine: true, textStyle: { fontSize: 12 } }, xAxis: { type: "category", boundaryGap: false, // data: ["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"], data: lineDate, "axisLabel": { "color": "#c0c3cd", }, "axisLine": { lineStyle: { color: 'rgba(0,130,255,.2)' } }, axisTick: { show: false }, }, yAxis: { type: "value", "axisLabel": { "color": "#c0c3cd", }, axisTick: { show: false }, "axisLine": { lineStyle: { color: 'rgba(0,130,255,.2)' } }, "splitLine": { lineStyle: { color: "rgba(255,255,255,.1)" } } }, series: [{ // name: "火灾", name: seriesData[0].name, type: "line", areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(111,153,250,0.3)' }, { offset: 1, color: 'rgba(111,153,250,0)' } ], false), shadowColor: 'rgba(111,153,250, 0.9)', shadowBlur: 20 } }, data: seriesData[0].data //data: [1, 5, 8, 3, 3, 5] }, { // name: "水系统", name: seriesData[1].name, type: "line", areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(255,88,1,0.3)' }, { offset: 1, color: 'rgba(255,88,1,0)' } ], false), shadowColor: 'rgba(255,88,1, 0.9)', shadowBlur: 20 } }, //data: [9, 5, 3, 7, 6, 3] data: seriesData[1].data }, { //name: "烟雾", name: seriesData[2].name, type: "line", areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(234,246,101,0.3)' }, { offset: 1, color: 'rgba(234,246,101,0)' } ], false), shadowColor: 'rgba(234,246,101, 0.9)', shadowBlur: 20 } }, data: seriesData[1].data //data: [4, 6, 3, 9, 7, 3] }] }; myChart.setOption(option); myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); })(); /* 横向柱状图 */ (function() { var pie = result.warning; var totalNum = pie.wait_handle + pie.is_handled; var data = [totalNum, pie.is_handled, pie.wait_handle] var myChartWaring = echarts.init(document.querySelector(".right-top .chart")); option = { grid: { // width: '100%', top: '15%', right: '10%', bottom: '0%', left: '10%' }, color: ['#6F99FA', '#EAF665', '#FF5801'], xAxis: [{ show: false, max: totalNum ? totalNum : 100, }], yAxis: [{ axisTick: 'none', axisLine: 'none', axisLabel: { verticalAlign: 'bottom', align: 'left', padding: [0, 0, 15, 5], textStyle: { color: '#FFFFFF', } }, data: ['总报警数', '已处置数', '待处置数'], }, { //左侧柱状图的Y轴 axisTick: 'none', axisLine: 'none', // data: [1357, 1260, 36], data: data, axisLabel: { show: true, verticalAlign: 'bottom', align: 'right', padding: [0, 15, 15, 0], textStyle: { color: '#fff', }, formatter: function(value) { return value + '个' } } }, ], series: [{ type: 'bar', // data: [1357, , ], data: [totalNum, , ], barWidth: 10, itemStyle: {}, z: 2 }, { type: 'bar', // data: [, 1260, ], data: [, pie.is_handled, ], barWidth: 10, itemStyle: {}, z: 2 }, { type: 'bar', // data: [, , 36], data: [, , pie.wait_handle], barWidth: 10, itemStyle: {}, z: 2 }, { type: 'bar', barGap: '-100%', // data: [1054, 1054, 1054], // data: [totalNum, totalNum, totalNum], data: totalNum ? [totalNum, totalNum, totalNum] : [100, 100, 100], barWidth: 10, itemStyle: { normal: { color: 'rgba(255, 255, 255, 0.15)', // barBorderRadius: 6, } }, z: 0 }, ] }; myChartWaring.setOption(option); window.addEventListener("resize", function() { myChartWaring.resize(); }); })(); // 设备隐患 (function() { var colorGroup = ['color-green', 'color-red', 'color-yellow', 'color-blue']; var handle = result.handle var items = ''; handle.forEach(function(item, key) { items += '
  • ' + item.value + '

    ' + item.name + '

  • '; }) $('#pop').html(items) })(); // 异常设备数 (function() { var colorGroup = ['color-green', 'color-red', 'color-yellow', 'color-blue']; var Abnormal = result.Abnormal; var items = ''; Abnormal.forEach(function(item, key) { var processClassName = item.status == '超时' ? 'unprocess' : 'processed'; items += ` ${item.id} ${item.name} ${item.status} ${item.time} ` }) $('.abnormal').html(items) // setInterval(getDate(), 1000) })(); }, function(errorMsg) { alert("请求数据失败!"); }) } //园区实时报警统计 时间获取 (function() { time(); var t = null; t = setTimeout(time, 1000); function time() { clearTimeout(t); //清除定时器 dt = new Date(); var h = Appendzero(dt.getHours()).toString().split(""); //获取时 var m = Appendzero(dt.getMinutes()).toString().split(""); //获取分 // var aa = h.toString().split(""); // var bb = m.toString(h).split(""); var times = h.concat(m) var list = ""; for (var i = 0; i < times.length; i++) { list += `
    ${times[i]}
    ` } document.querySelector(".total-squares").innerHTML = list; t = setTimeout(time, 1000); //设定定时器,循环运行 } //个位数补零 function Appendzero(obj) { if (obj < 10) return "0" + obj; else return obj; } })(); // 实时告警信息 (function() { function getDate() { $.ajax({ url: "data/pie.json", type: "GET", dataType: "json", //返回数据格式为json beforeSend: function(XMLHttpRequest) { // $("#loading").html("") }, success: function(result) { var warningInfo = result.warningInfo; var items = ''; warningInfo.forEach(function(item, key) { var statusMessage = item.status ? '已处理' : '未处理'; var processClassName = item.status ? 'processed' : 'unprocess'; items += ` ${item.id} ${item.time} ${item.type} ${item.details} ${statusMessage} ` }) $('.warning-info').html(items) }, error: function(errorMsg) { // alert("图表请求数据失败!"); $("#loading").empty(); // myChart1.hideLoading(); } }); } getDate() // setInterval(getDate(), 1000) })(); //实时告警信息 (websocket实时推送) (function() { var arrData = []; var wsUri = "wss://iot.usky.cn:55120"; function initWebSocket() { try { if (typeof MozWebSocket == 'function') WebSocket = MozWebSocket; websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { var json = {}; json.agentid = 'admin'; // console.log("Connected."); (function() {})() websocket.send(JSON.stringify(json)); }; websocket.onclose = function(evt) { // console.log("DisConnected."); (function() {})() initWebSocket(); }; websocket.onmessage = function(evt) { var warningInfo = eval('(' + evt.data + ')'); if (warningInfo.dwtype) { arrData.push(warningInfo) console.log('arrData') // console.log(arrData) } var items = ''; arrData.forEach(function(item, index) { items += ` ${index+1} ${item.time} ${item.dwtype} ${item.evtname} ${item.insertid} ` }) $('.warning-info').html(items) }; websocket.onerror = function(evt) { // console.log("Error:", evt.data); (function() {})() }; } catch (exception) { // console.log("Exception:", exception); (function() {})() } } initWebSocket(); })()