$(window).load(function () { $(".loading").fadeOut() // 返回上一级 视图处理 C_keys_list = C_keys.split(",") if (C_keys_list.length <= 1){ $("#v_back").hide(); }else { $("#v_back").show(); } f_kf_open() }) /****/ $(document).ready(function () { var whei = $(window).width() $("html").css({fontSize: whei / 20}) $(window).resize(function () { var whei = $(window).width() $("html").css({fontSize: whei / 20}) }); }); // 返回 function f_v_back() { C_keys_list = C_keys.split(",") C_keys_list.pop() hrefurl = "?T_key="+C_keys_list.join(",") if (false != C_modex){ hrefurl += "&T_mode="+C_modex } document.location.href = hrefurl } var V_kf_yd = 1 function f_kf_open() { $("#v_3d").show(); $("#v_trail").hide(); $(".R_KF_Column").show(); $(".R_YD_Column").hide(); V_kf_yd = 1 f_view() } function f_yd_open() { $("#v_3d").hide(); $("#v_trail").show(); $(".R_KF_Column").hide(); $(".R_YD_Column").show(); V_kf_yd = 2 f_view() } // 视图数据改变 function f_view() { if(C_json == null) return // 3D加载 f_v3d_loadProject(C_json.Company_v3d.split("|")[1]) f_v_v3d() // 屏蔽按钮 if(C_json.Device.T_库房总数 == 0){ $("#v_open_KF").hide(); } if(C_json.Device.T_移动总数 == 0){ $("#v_open_YD").hide(); } $("#T_公司名称").html(C_json.Company_name + "-冷链药品质量安全智慧中台") $("title").html(C_json.Company_name + "-冷链药品质量安全智慧中台") // 设备类 $("#T_终端总数").html(C_json.Device.T_库房总数 + C_json.Device.T_移动总数) $("#T_库房总数").html(C_json.Device.T_库房总数) $("#T_移动总数").html(C_json.Device.T_移动总数) $("#T_移动离线总数").html(C_json.Device.T_移动离线总数) $("#T_移动监控总数").html(C_json.Device.T_移动监控总数) $("#T_移动总数s").html(C_json.Device.T_移动总数) $("#T_移动设备报警数_今天s").html(C_json.Warning.T_移动设备报警数_今天) $("#T_任务总数_今天s").html(C_json.Task.T_任务总数_今天) w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天) if (w_x_ != 0) { w_x_ = w_x_ / (C_json.Device.T_库房总数) w_x_ *= 100 } w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天) + parseInt(C_json.Warning.T_移动报警设备数_今天) if (w_x_ != 0) { w_x_ = w_x_ / (C_json.Device.T_库房总数 + C_json.Device.T_移动总数) w_x_ *= 100 } w_x_ = parseInt(C_json.Task.T_任务设备数_今天) if (w_x_ != 0) { w_x_ = w_x_ / C_json.Device.T_移动总数 w_x_ *= 100 } $("#T_今日闲置设备s").html(w_x_.toFixed(1) + "%") // 报警类 // $("#T_库房报警总数").html(C_json.Warning.T_库房报警总数) $("#T_库房未处理总数").html(C_json.Warning.T_库房未处理总数) $("#T_库房设备报警数_今天").html(C_json.Warning.T_库房设备报警数_今天) $("#T_库房报警设备数_今天").html(C_json.Warning.T_库房报警设备数_今天) // $("#T_库房设备报警数_昨天").html(C_json.Warning.T_库房设备报警数_昨天) // $("#T_库房设备报警数_近7天").html(C_json.Warning.T_库房设备报警数_近7天) // $("#T_库房设备报警数_本月").html(C_json.Warning.T_库房设备报警数_本月) // $("#T_库房设备报警数_上一月").html(C_json.Warning.T_库房设备报警数_上一月) // $("#T_移动警数总数").html(C_json.Warning.T_移动警数总数) $("#T_移动未处理总数").html(C_json.Warning.T_移动未处理总数) $("#T_移动设备报警数_今天").html(C_json.Warning.T_移动设备报警数_今天) // $("#T_移动设备报警数_昨天").html(C_json.Warning.T_移动设备报警数_昨天) // $("#T_移动设备报警数_近7天").html(C_json.Warning.T_移动设备报警数_近7天) // $("#T_移动设备报警数_本月").html(C_json.Warning.T_移动设备报警数_本月) // $("#T_移动设备报警数_上一月").html(C_json.Warning.T_移动设备报警数_上一月) w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天) if (w_x_ != 0) { w_x_ = w_x_ / (C_json.Device.T_库房总数) w_x_ *= 100 } $("#T_今日库房报警率").html(w_x_.toFixed(1) + "%") $("#T_今日报警总数").html(parseInt(C_json.Warning.T_库房设备报警数_今天) + parseInt(C_json.Warning.T_移动设备报警数_今天)) w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天) + parseInt(C_json.Warning.T_移动报警设备数_今天) if (w_x_ != 0) { w_x_ = w_x_ / (C_json.Device.T_库房总数 + C_json.Device.T_移动总数) w_x_ *= 100 } $("#T_今日报警率").html(w_x_.toFixed(1) + "%") // $("#T_今日报警率").html(parseInt(w_x_) + "%") $("#T_今日未处理总数").html(parseInt(C_json.Warning.T_库房未处理总数) + parseInt(C_json.Warning.T_移动未处理总数)) // 任务类 $("#T_任务总数_今天").html(C_json.Task.T_任务总数_今天) // $("#T_任务总数_昨天").html(C_json.Task.T_任务总数_昨天) // $("#T_任务总数_近7天").html(C_json.Task.T_任务总数_近7天) // $("#T_任务总数_本月").html(C_json.Task.T_任务总数_本月) // $("#T_任务总数_上一月").html(C_json.Task.T_任务总数_上一月) $("#T_任务设备数_今天").html(C_json.Task.T_任务设备数_今天) // $("#T_任务设备数_昨天").html(C_json.Task.T_任务设备数_昨天 ) // $("#T_任务设备数_近7天").html(C_json.Task.T_任务设备数_近7天) // $("#T_任务设备数_本月").html(C_json.Task.T_任务设备数_本月 ) // $("#T_任务设备数_上一月").html(C_json.Task.T_任务设备数_上一月) echarts_探头报警率排名() echarts_库房端报警类型统计() echarts_报警设备数近7天曲线图() w_x_ = parseInt(C_json.Task.T_任务设备数_今天) if (w_x_ != 0) { w_x_ = w_x_ / C_json.Device.T_移动总数 w_x_ *= 100 } $("#T_今日闲置设备").html(w_x_.toFixed(1) + "%") // 中间 视图显示 // 库房端 $("#T_C_1").html(C_json.Device.T_库房总数)// 公司下一级统计 $("#T_C_2").html(C_json.Warning.T_库房设备报警数_今天)// 公司下一级统计 w_x_ = parseInt(C_json.Warning.T_库房报警设备数_今天) if (w_x_ != 0) { w_x_ = w_x_ / C_json.Device.T_库房总数 w_x_ *= 100 } $("#T_C_3").html(w_x_.toFixed(1) + "%")// 公司下一级统计 $("#T_Cn_1").html("设备数量") $("#T_Cn_2").html("今日库房报警次数") $("#T_Cn_3").html("今日库房报警率") // 设备列表 $('#Company_DeviceG').liMarquee('destroy'); // 清除滚动 $("#Company_DeviceL").html("")// 清除内容 Company_Device_l = [] f_Company_Device(C_json) // console.log("Company_Next_T_l:",Company_Next_T_l) // 开始滚动 $('#Company_DeviceG').liMarquee({ direction: 'up',//身上滚动 runshort: false,//内容不足时不滚动 scrollamount: 20//速度 }); let isKf =true document.getElementById('transportButton').addEventListener('click', function (){ console.log("点击了按钮") if (isKf){ isKf = false document.getElementById('kf_Column').style.display="none" document.getElementById('yd_Column').style.display="block" document.getElementById('transportButton').innerText = '库房端' document.getElementById('title').innerText= "移动端汇总统计" }else{ isKf = true document.getElementById('yd_Column').style.display="none" document.getElementById('kf_Column').style.display="block" document.getElementById('transportButton').innerText = '移动端' document.getElementById('title').innerText= "库房端汇总统计" } }) } function Jump(){ window.open("https://cold.coldbaozhida.com/#/dataDisplay/mapShow", '_blank'); } function f_Company_Device(C_j) { for (var C_key in C_j.Device.DeviceList) { T_t = "" T_rh = "" C_b = C_j.Device.DeviceList[C_key] t_w_ = "" if (C_b.T_DeviceSensorParameter.T_free == 0){ if (( C_b.T_DeviceSensorParameter.T_Tlower > C_b.T_DeviceSensorData.T_t) || ( C_b.T_DeviceSensorData.T_t > C_b.T_DeviceSensorParameter.T_Tupper)){ t_w_ = " style='color: #f93fff' " console.log("温度超标", C_b.T_DeviceSensorParameter.T_Tlower , C_b.T_DeviceSensorData.T_t , C_b.T_DeviceSensorData.T_t , C_b.T_DeviceSensorParameter.T_Tupper) } } h_w_ = "" if (C_b.T_DeviceSensorParameter.T_free == 0){ if (( C_b.T_DeviceSensorParameter.T_RHlower > C_b.T_DeviceSensorData.T_rh) || ( C_b.T_DeviceSensorData.T_rh > C_b.T_DeviceSensorParameter.T_RHupper)){ h_w_ = " style='color: #f93fff' " console.log("湿度超标", C_b.T_DeviceSensorParameter.T_RHlower , C_b.T_DeviceSensorData.T_rh , C_b.T_DeviceSensorData.T_rh , C_b.T_DeviceSensorParameter.T_RHupper) } } T_t = C_b.T_DeviceSensorData.T_t + "°C" h_w_title = "" if(C_b.T_DeviceSensorData.T_rh == 0){ T_rh = "无" }else { T_rh = C_b.T_DeviceSensorData.T_rh + "%" h_w_title = " title=\""+C_b.T_DeviceSensorParameter.T_RHlower+"% ~ "+C_b.T_DeviceSensorParameter.T_RHupper+"%\" " } if(C_b.T_online != 1 && C_b.T_online_s != 1 ){ T_t = "离线" T_rh = "离线" t_w_ = " style='color: rgba(255, 255, 255, .6)' " h_w_ = " style='color: rgba(255, 255, 255, .6)' " } $("#Company_DeviceL").append("
  • " + C_b.T_name + "" + T_t + "" + T_rh + "

  • ") } } function f_d_onclick(T_3dview) { if(T_3dview.length > 0){ f_DeviceonDblclick(T_3dview) } } function echarts_探头报警率排名() { var myChart = echarts.init(document.getElementById('echarts_探头报警率排名')); yAxis_data = [] series_data = [] yAxis_dataMonth = [] series_dataMonth = [] yAxis_dataQuarter = [] series_dataQuarter = [] // Company_Next_W_l_ = Company_Next_W_l.sort((a, b) => a.Warning - b.Warning).slice(-10); //每日排名 let dataOneday = []; for (var C_key in C_json.Warning.T_探头报警类型统计) { C_b = C_json.Warning.T_探头报警类型统计[C_key] dataOneday.push([C_key, C_b]) } dataOneday.sort((a, b) => a[1] - b[1]); dataOneday.forEach(([key, value]) => { yAxis_data.push(key) series_data.push(value) }); //月度排名 let dataMonth = []; for (var C_key in C_json.Warning.T_探头报警类型统计_30天) { C_b = C_json.Warning.T_探头报警类型统计_30天[C_key] dataMonth.push([C_key, C_b]) } dataMonth.sort((a, b) => a[1] - b[1]); dataMonth.forEach(([key, value]) => { yAxis_dataMonth.push(key) series_dataMonth.push(value) }); //季度排名 let dataQuarter = []; for (var C_key in C_json.Warning.T_探头报警类型统计_90天) { C_b = C_json.Warning.T_探头报警类型统计_90天[C_key] dataQuarter.push([C_key, C_b]); } dataQuarter.sort((a, b) => a[1] - b[1]); dataQuarter.forEach(([key, value]) => { yAxis_dataQuarter.push(key); series_dataQuarter.push(value); }); let option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { top: '0%', left: '0%', right: '0%', bottom: '0%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01], show: false }, yAxis: { type: 'category', data: yAxis_data }, series: [ { name: '报警数量', type: 'bar', itemStyle: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ {offset: 0, color: '#596db0'}, {offset: 0.5, color: '#4a63b4'}, {offset: 1, color: '#435eb7'} ]) }, data: series_data } ] }; let option1 = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { top: '0%', left: '0%', right: '0%', bottom: '0%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01], show: false }, yAxis: { type: 'category', data: yAxis_dataMonth }, series: [ { name: '报警数量', type: 'bar', itemStyle: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ {offset: 0, color: '#596db0'}, {offset: 0.5, color: '#4a63b4'}, {offset: 1, color: '#435eb7'} ]) }, data: series_dataMonth } ] }; let option2 = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { top: '0%', left: '0%', right: '0%', bottom: '0%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01], show: false }, yAxis: { type: 'category', data: yAxis_dataQuarter }, series: [ { name: '报警数量', type: 'bar', itemStyle: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ {offset: 0, color: '#596db0'}, {offset: 0.5, color: '#4a63b4'}, {offset: 1, color: '#435eb7'} ]) }, data: series_dataQuarter } ] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); document.getElementById('onedays').addEventListener('click', function (){ myChart.setOption(option); document.getElementById('deviceRanking').innerText = '每日探头报警率排名'; }) document.getElementById('month').addEventListener('click', function (){ myChart.setOption(option1); document.getElementById('deviceRanking').innerText = '月探头报警率排名'; }) document.getElementById('quarter').addEventListener('click', function (){ myChart.setOption(option2); document.getElementById('deviceRanking').innerText = '季度探头报警率排名'; }) $(".sebtn a").click(function () { $(this).addClass("active").siblings().removeClass("active") }) $(".sebtn a").eq(0).click(function () { myChart.setOption(option1); }) $(".sebtn a").eq(1).click(function () { myChart.setOption(option2); }) $(".sebtn a").eq(2).click(function () { myChart.setOption(option3); }) } function echarts_库房端报警类型统计() { const myChart = echarts.init(document.getElementById('echarts_库房端报警类型统计')); data = [] datas = [] data_num = 0 data_nums = 0 for (var C_key in C_json.Warning.T_库房报警类型统计) { data_num += C_json.Warning.T_库房报警类型统计[C_key] data.push({value: C_json.Warning.T_库房报警类型统计[C_key], name: C_key}) console.log("C_json.Warning.T_库房报警类型统计",C_json.Warning.T_库房报警类型统计) } for (var C_key in C_json.Warning.T_移动报警类型统计) { data_nums += C_json.Warning.T_移动报警类型统计[C_key] datas.push({value: C_json.Warning.T_移动报警类型统计[C_key], name: C_key}) console.log("C_json.Warning.T_移动报警类型统计",data_nums) } data.push({ // make an record to fill the bottom 50% value: data_num, itemStyle: { // stop the chart from rendering this piece color: 'none', decal: { symbol: 'none' } }, label: { show: false } }) let option = { tooltip: { trigger: 'item' }, // legend: { // top: '5%', // left: 'center', // // doesn't perfectly work with our tricks, disable it // selectedMode: false // }, color: ['#45C2E0', '#C1EBDD', '#c0a9fa', '#75bef3', '#FF9393', '#e9aaff', '#ffc1a7'], series: [ { name: '报警类型', type: 'pie', radius: ['40%', '70%'], center: ['50%', '74%'], // adjust the start angle startAngle: 180, label: { color: "#C1EBDD", show: true, formatter(param) { // correct the percentage return param.name + ' (' + param.percent * 2 + '%)'; } }, data: data } ] }; let option2 = { tooltip: { trigger: 'item' }, color: ['#0f7dec', '#07c5ea', '#e3378d', '#ff0000', '#FF9393', '#e9aaff', '#ffc1a7'], series: [ { name: '报警类型', type: 'pie', radius: ['40%', '70%'], center: ['50%', '74%'], // adjust the start angle startAngle: 360, label: { color: "#C1EBDD", show: true, formatter(param) { // correct the percentage return param.name + ' (' + param.percent * 2 + '%)'; } }, data: [{ value: data_nums, itemStyle: { color: 'none', decal: { symbol: 'none' } }, label: { show: false } }, ...datas] } ] } myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); //添加按钮点击切换 let isoption = true document.getElementById('transportChartButton').addEventListener('click', function (){ if (isoption===true){ myChart.setOption(option2); document.getElementById('transportChartButton').innerText = '库房端' document.getElementById('kftitle').innerText = '移动端报警类型统计' isoption=false }else{ myChart.setOption(option); document.getElementById('transportChartButton').innerText = '移动端' document.getElementById('kftitle').innerText = '库房端报警类型统计' isoption = true } }) $(".sebtn a").click(function () { $(this).addClass("active").siblings().removeClass("active") }) $(".sebtn a").eq(0).click(function () { myChart.setOption(option1); }) $(".sebtn a").eq(1).click(function () { myChart.setOption(option2); }) $(".sebtn a").eq(2).click(function () { myChart.setOption(option3); }) } function echarts_报警设备数近7天曲线图() { var myChart = echarts.init(document.getElementById('echarts_报警设备数近7天曲线图')); xAxis_data = [] yAxis_data = [] xAxis_data30 = [] yAxis_data30 = [] xAxis_data90 = [] yAxis_data90 = [] for (var C_key in C_json.Warning.T_报警设备数_近7天) { C_b = C_json.Warning.T_报警设备数_近7天[C_key] xAxis_data.push(C_key) yAxis_data.push(C_b) } for (var C_key in C_json.Warning.T_报警设备数_近30天) { C_b = C_json.Warning.T_报警设备数_近30天[C_key] xAxis_data30.push(C_key) yAxis_data30.push(C_b) } for (var C_key in C_json.Warning.T_报警设备数_近90天) { C_b = C_json.Warning.T_报警设备数_近90天[C_key] xAxis_data90.push(C_key) yAxis_data90.push(C_b) } let option = { // legend: { // icon:"circle", // top: "0", // width:'100%', // right: 'center', // itemWidth: 10, // itemHeight: 10, // data: ['库房端'], // textStyle: { // color: "rgba(255,255,255,.5)" }, // }, tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#dddc6b' } } }, grid: { left: '0', top: '5', right: '15', bottom: '0', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { textStyle: { color: "rgba(255,255,255,.5)", // fontSize:10 }, }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, data: xAxis_data }, { axisPointer: {show: false}, axisLine: {show: false}, position: 'bottom', offset: 20, }], yAxis: [{ type: 'value', axisTick: {show: false}, splitNumber: 4, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.5)", //fontSize:10 }, }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)', type: 'dotted', } } }], series: [ { name: '库房端', type: 'line', smooth: true, symbol: 'circle', symbolSize: 5, showSymbol: false, lineStyle: { normal: { color: 'rgba(31, 174, 234, 1)', width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(31, 174, 234, 0.4)' }, { offset: 0.8, color: 'rgba(31, 174, 234, 0.1)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', } }, itemStyle: { normal: { color: '#1f7eea', borderColor: 'rgba(31, 174, 234, .1)', borderWidth: 5 } }, data: yAxis_data }, // { // name: '移动端', // type: 'line', // smooth: true, // symbol: 'circle', // symbolSize: 5, // showSymbol: false, // lineStyle: { // // normal: { // color: '#6bdd9b', // width: 2 // } // }, // areaStyle: { // normal: { // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // offset: 0, // color: 'rgba(107, 221, 155, 0.4)' // }, { // offset: 0.8, // color: 'rgba(107, 221, 155, 0.1)' // }], false), // shadowColor: 'rgba(0, 0, 0, 0.1)', // } // }, // itemStyle: { // normal: { // color: '#6bdd9b', // borderColor: 'rgba(107, 221, 155, .1)', // borderWidth: 5 // } // }, // data: [ 5, 3, 7, 1, 8, 3, 5] // // }, ] }; let option1 = { // legend: { // icon:"circle", // top: "0", // width:'100%', // right: 'center', // itemWidth: 10, // itemHeight: 10, // data: ['库房端'], // textStyle: { // color: "rgba(255,255,255,.5)" }, // }, tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#dddc6b' } } }, grid: { left: '0', top: '5', right: '15', bottom: '0', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { textStyle: { color: "rgba(255,255,255,.5)", // fontSize:10 }, }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, data: xAxis_data30 }, { axisPointer: {show: false}, axisLine: {show: false}, position: 'bottom', offset: 20, }], yAxis: [{ type: 'value', axisTick: {show: false}, splitNumber: 4, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.5)", //fontSize:10 }, }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)', type: 'dotted', } } }], series: [ { name: '库房端', type: 'line', smooth: true, symbol: 'circle', symbolSize: 5, showSymbol: false, lineStyle: { normal: { color: 'rgba(31, 174, 234, 1)', width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(31, 174, 234, 0.4)' }, { offset: 0.8, color: 'rgba(31, 174, 234, 0.1)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', } }, itemStyle: { normal: { color: '#1f7eea', borderColor: 'rgba(31, 174, 234, .1)', borderWidth: 5 } }, data: yAxis_data30 }, // { // name: '移动端', // type: 'line', // smooth: true, // symbol: 'circle', // symbolSize: 5, // showSymbol: false, // lineStyle: { // // normal: { // color: '#6bdd9b', // width: 2 // } // }, // areaStyle: { // normal: { // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // offset: 0, // color: 'rgba(107, 221, 155, 0.4)' // }, { // offset: 0.8, // color: 'rgba(107, 221, 155, 0.1)' // }], false), // shadowColor: 'rgba(0, 0, 0, 0.1)', // } // }, // itemStyle: { // normal: { // color: '#6bdd9b', // borderColor: 'rgba(107, 221, 155, .1)', // borderWidth: 5 // } // }, // data: [ 5, 3, 7, 1, 8, 3, 5] // // }, ] }; let option2 = { // legend: { // icon:"circle", // top: "0", // width:'100%', // right: 'center', // itemWidth: 10, // itemHeight: 10, // data: ['库房端'], // textStyle: { // color: "rgba(255,255,255,.5)" }, // }, tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#dddc6b' } } }, grid: { left: '0', top: '5', right: '15', bottom: '0', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { textStyle: { color: "rgba(255,255,255,.5)", // fontSize:10 }, }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, data: xAxis_data90 }, { axisPointer: {show: false}, axisLine: {show: false}, position: 'bottom', offset: 20, }], yAxis: [{ type: 'value', axisTick: {show: false}, splitNumber: 4, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.5)", //fontSize:10 }, }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)', type: 'dotted', } } }], series: [ { name: '库房端', type: 'line', smooth: true, symbol: 'circle', symbolSize: 5, showSymbol: false, lineStyle: { normal: { color: 'rgba(31, 174, 234, 1)', width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(31, 174, 234, 0.4)' }, { offset: 0.8, color: 'rgba(31, 174, 234, 0.1)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', } }, itemStyle: { normal: { color: '#1f7eea', borderColor: 'rgba(31, 174, 234, .1)', borderWidth: 5 } }, data: yAxis_data90 }, // { // name: '移动端', // type: 'line', // smooth: true, // symbol: 'circle', // symbolSize: 5, // showSymbol: false, // lineStyle: { // // normal: { // color: '#6bdd9b', // width: 2 // } // }, // areaStyle: { // normal: { // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // offset: 0, // color: 'rgba(107, 221, 155, 0.4)' // }, { // offset: 0.8, // color: 'rgba(107, 221, 155, 0.1)' // }], false), // shadowColor: 'rgba(0, 0, 0, 0.1)', // } // }, // itemStyle: { // normal: { // color: '#6bdd9b', // borderColor: 'rgba(107, 221, 155, .1)', // borderWidth: 5 // } // }, // data: [ 5, 3, 7, 1, 8, 3, 5] // // }, ] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); document.getElementById('days7').addEventListener('click', function (){ myChart.setOption(option); document.getElementById('deviceWarning').innerText = '周设备报警曲线图'; }) document.getElementById('days30').addEventListener('click', function (){ myChart.setOption(option1); document.getElementById('deviceWarning').innerText = '月设备报警曲线图'; }) document.getElementById('days120').addEventListener('click', function (){ myChart.setOption(option2); document.getElementById('deviceWarning').innerText = '季度设备报警曲线图'; }) $(".sebtn a").click(function () { $(this).addClass("active").siblings().removeClass("active") }) $(".sebtn a").eq(0).click(function () { myChart.setOption(option1); }) $(".sebtn a").eq(1).click(function () { myChart.setOption(option2); }) $(".sebtn a").eq(2).click(function () { myChart.setOption(option3); }) } let isfull = true; function Full() { const fullElements = document.getElementsByClassName('full'); if (isfull) { for (let i = 0; i < fullElements.length; i++) { fullElements[i].classList.add('hidden'); } isfull = false; } else { for (let i = 0; i < fullElements.length; i++) { fullElements[i].classList.remove('hidden'); } isfull = true; } }