import { layuiObj,boroughGradeArr } from "./index.js"; var inschool_echart = null; var outschool_echart = null; var postschool_echart=null; var roomschool_echart=null; var carschool_echart=null; var alarmschool_echart=null; var systemgradechart=null; //告警 function drawSystemGradeChart(){ var option= { color: ['#e7b755', '#a16afe'], grid: { // 图表位置 top: '40px', left: '50px', right: '25px', bottom: '60px' }, legend: { data: ['预警', '告警'], icon: 'circle', top: '10px', right: '20px', textStyle: { color: '#fff', // 文字颜色 fontFamily: 'myRegular' }, itemWidth: 12, itemHeight: 12 }, 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', '27', '28', '29', '30', '31'], axisLine: { // 坐标轴 lineStyle: { // 坐标轴样式 color: '#4d76b2', fontFamily: 'myRegular' } }, axisLabel: { textStyle: { color: '#fff', //更改坐标轴文字颜色 fontFamily: 'myRegular' } }, splitLine: { // 网格线 show: false, }, axisTick: { // 刻度 show: false // 控制刻度的显示与隐藏 }, }, yAxis: { type: 'value', interval: 100 /5, // 强制设置坐标轴分割间隔 splitNumber: 5, // 坐标轴的分割段数 max: 100, axisLabel: { textStyle: { color: '#fff', //更改坐标轴文字颜色 } }, axisLine: { // 坐标轴 show: false, lineStyle: { // 坐标轴样式 color: '#ebebf7' } }, splitLine: { // 网格线 show: true, // 显示隐藏 true false lineStyle: { // 坐标轴样式 color: '#4d76b2' } }, axisTick: { // 刻度 show: false // 控制刻度的显示与隐藏 }, }, series: [ { name: '预警', data: [75, 78, 89, 66, 78, 85, 83, 84, 86, 89, 91, 90, 95, 98, 87, 74, 87, 77, 85, 79, 87, 82, 86, 74, 75, 76, 70, 80, 85, 80, 74], type: 'line', smooth: true, symbol: 'none' // 点点样式 }, { name: '告警', data: [10, 8, 3, 4, 11, 16, 7, 7, 8, 9, 6, 2, 15, 7, 12, 15, 4, 3, 0, 0, 0, 12, 3, 8, 6, 0, 2, 10, 10, 11, 4], type: 'line', smooth: true, symbol: 'none' // 点点样式 } ] } systemgradechart=echarts.init(document.getElementById('systemgradechart')); //使用制定的配置项和数据显示图表 systemgradechart.setOption(option); } //校内 function drawInschoolChart(data,schoolInfo){ var option={ color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',], tooltip: { trigger: 'item' }, legend: { top: '7%', right: '40px', icon: 'circle', width: '260px', orient: 'vertical', // 排列方式 horizontal(水平) vertical(垂直) itemHeight: 10, // 控制小圆点的大小 itemWidth: 12, itemGap: 20, textStyle: { color: '#fff', // 文字颜色 lineHeight: 16, fontFamily: 'myRegular' }, formatter: (name) => { let total = 0 // 总数,用来计算百分比 let number = 0 // 数字 let pec = 0 // 百分比 for (let i = 0; i < data.length; i++) { total += data[i].value } for (let i = 0; i < data.length; i++) { if (data[i].name == name) { number = data[i].value pec = (number / total * 100).toFixed(2) } } return [ `${name}`, `${number} (${pec})%`, ].join("\n"); } }, title: { // 用title显示环中间固定的文字 text: `170`, // \n 换行 subtext: '校园数量', // 子标题 top: '30%', left: '24%', textAlign: 'center', // 字体居中对齐 textStyle: { color: '#fff', fontSize: 30, lineHeight: 20, fontWeight: 'normal', }, subtextStyle: { // 子标题样式 color: '#fff', fontSize: 14, fontFamily: 'myRegular' } }, series: [ { type: 'pie', radius: ['60%', '80%'], center: ['25%', '45%'], // 环形图中心点 label: { show: false, }, data: data } ] } inschool_echart=echarts.init(document.getElementById('inschool_echart')); //使用制定的配置项和数据显示图表 inschool_echart.setOption(option); updateInschoolInfo(schoolInfo) } //校内数据更新轮播 function updateInschoolInfo(schoolInfo){ var sealzone_number=0; var collision_number=0; var alarmpush_number=0; var ipclinked_number=0; var schoolbox_number=0; var kitchensystem_number=0; for(let i=0;i0?sealzone_number++:sealzone_number; schoolInfo[i]["collision"]>0?collision_number++:collision_number; schoolInfo[i]["alarmpush"]>0?alarmpush_number++:alarmpush_number; schoolInfo[i]["ipclinked"]>0?ipclinked_number++:ipclinked_number; schoolInfo[i]["schoolbox"]>0?schoolbox_number++:schoolbox_number; schoolInfo[i]["kitchensystem"]>0?kitchensystem_number++:kitchensystem_number; } $(".sealzone_number").html(sealzone_number); $(".collision_number").html(collision_number); $(".alarmpush_number").html(alarmpush_number); $(".ipclinked_number").html(ipclinked_number); $(".schoolbox_number").html(schoolbox_number); $(".kitchensystem_number").html(kitchensystem_number); } //校外 function drawOutSchoolChart(){ var data=[ { value: 54, name: '省部重点人员预警' }, { value: 100, name: '涉校黑名单预警' }, { value: 300, name: '异常行为预警' }, { value: 200, name: '电子围栏预警' }, ]; var option={ color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',], tooltip: { trigger: 'item' }, legend: { top: '7%', right: '40px', icon: 'circle', width: '260px', orient: 'vertical', // 排列方式 horizontal(水平) vertical(垂直) itemHeight: 10, // 控制小圆点的大小 itemWidth: 12, itemGap: 20, textStyle: { color: '#fff', // 文字颜色 lineHeight: 16, fontFamily: 'myRegular' }, formatter: (name) => { let total = 0 // 总数,用来计算百分比 let number = 0 // 数字 let pec = 0 // 百分比 for (let i = 0; i < data.length; i++) { total += data[i].value } for (let i = 0; i < data.length; i++) { if (data[i].name == name) { number = data[i].value pec = (number / total * 100).toFixed(2) } } return [ `${name}`, `${number} (${pec})%`, ].join("\n"); } }, title: { // 用title显示环中间固定的文字 text: `654`, // \n 换行 subtext: '校园周边预警', // 子标题 top: '30%', left: '24%', textAlign: 'center', // 字体居中对齐 textStyle: { color: '#fff', fontSize: 30, lineHeight: 20, fontWeight: 'normal', }, subtextStyle: { // 子标题样式 color: '#fff', fontSize: 14, fontFamily: 'myRegular' } }, series: [ { type: 'pie', radius: ['60%', '80%'], center: ['25%', '45%'], // 环形图中心点 label: { show: false, }, data: data } ] } outschool_echart=echarts.init(document.getElementById('schoolTypeProp')); //使用制定的配置项和数据显示图表 outschool_echart.setOption(option); } //校岗 function drawPostSchoolChart(data,schoolInfo){ var total=0; for(var i=0;i { let total = 0 // 总数,用来计算百分比 let number = 0 // 数字 let pec = 0 // 百分比 for (let i = 0; i < data.length; i++) { total += data[i].value } for (let i = 0; i < data.length; i++) { if (data[i].name == name) { number = data[i].value pec = (number / total * 100).toFixed(2) } } return [ `${name}`, `${number} (${pec})%`, ].join("\n"); } }, title: { // 用title显示环中间固定的文字 text:total, // \n 换行 subtext: '校岗人员', // 子标题 top: '30%', left: '24%', textAlign: 'center', // 字体居中对齐 textStyle: { color: '#fff', fontSize: 30, lineHeight: 20, fontWeight: 'normal', }, subtextStyle: { // 子标题样式 color: '#fff', fontSize: 14, fontFamily: 'myRegular' } }, series: [ { type: 'pie', radius: ['60%', '80%'], center: ['25%', '45%'], // 环形图中心点 label: { show: false, }, data: data } ] } postschool_echart=echarts.init(document.getElementById('postschool_echart')); //使用制定的配置项和数据显示图表 postschool_echart.setOption(option); updatePostSchoolInfo(schoolInfo); } //校岗数据更新轮播 function updatePostSchoolInfo(schoolInfo){ var police_percent_number=0; var guarder_percent_number=0; var staff_percent_number=0; var protector_percent_number=0; for(var i=0;i { let total = 0 // 总数,用来计算百分比 let number = 0 // 数字 let pec = 0 // 百分比 for (let i = 0; i < data.length; i++) { total += data[i].value } for (let i = 0; i < data.length; i++) { if (data[i].name == name) { number = data[i].value pec = (number / total * 100).toFixed(2) } } return [ `${name}`, `${number} (${pec})%`, ].join("\n"); } }, title: { // 用title显示环中间固定的文字 text: `88`, // \n 换行 subtext: '预警总数', // 子标题 top: '30%', left: '24%', textAlign: 'center', // 字体居中对齐 textStyle: { color: '#fff', fontSize: 30, lineHeight: 20, fontWeight: 'normal', }, subtextStyle: { // 子标题样式 color: '#fff', fontSize: 14, fontFamily: 'myRegular' } }, series: [ { type: 'pie', radius: ['60%', '80%'], center: ['25%', '45%'], // 环形图中心点 label: { show: false, }, data: data } ] } roomschool_echart=echarts.init(document.getElementById('roomschool_echart')); //使用制定的配置项和数据显示图表 roomschool_echart.setOption(option); } //校车 function drawCarSchoolChart(data,schoolInfo){ var option={ color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',], tooltip: { trigger: 'item' }, legend: { top: '12%', right: '40px', icon: 'circle', width: '260px', orient: 'vertical', // 排列方式 horizontal(水平) vertical(垂直) itemHeight: 10, // 控制小圆点的大小 itemWidth: 12, itemGap: 20, textStyle: { color: '#fff', // 文字颜色 lineHeight: 16, fontFamily: 'myRegular' }, formatter: (name) => { let total = 0 // 总数,用来计算百分比 let number = 0 // 数字 let pec = 0 // 百分比 for (let i = 0; i < data.length; i++) { total += data[i].value } for (let i = 0; i < data.length; i++) { if (data[i].name == name) { number = data[i].value pec = (number / total * 100).toFixed(2) } } return [ `${name}`, `${number} (${pec})%`, ].join("\n"); } }, title: { // 用title显示环中间固定的文字 text: `88`, // \n 换行 subtext: '预警总数', // 子标题 top: '30%', left: '24%', textAlign: 'center', // 字体居中对齐 textStyle: { color: '#fff', fontSize: 30, lineHeight: 20, fontWeight: 'normal', }, subtextStyle: { // 子标题样式 color: '#fff', fontSize: 14, fontFamily: 'myRegular' } }, series: [ { type: 'pie', radius: ['60%', '80%'], center: ['25%', '45%'], // 环形图中心点 label: { show: false, }, data: data } ] } carschool_echart=echarts.init(document.getElementById('carschool_echart')); //使用制定的配置项和数据显示图表 carschool_echart.setOption(option); updateCarSchoolInfo(schoolInfo) } function updateCarSchoolInfo(schoolInfo){ var schoolbus_number=0; var busdrivers_number=0; var busteachers_number=0; for(var i=0;i { let total = 0 // 总数,用来计算百分比 let number = 0 // 数字 let pec = 0 // 百分比 for (let i = 0; i < data.length; i++) { total += data[i].value } for (let i = 0; i < data.length; i++) { if (data[i].name == name) { number = data[i].value pec = (number / total * 100).toFixed(2) } } return [ `${name}`, `${number} (${pec})%`, ].join("\n"); } }, title: { // 用title显示环中间固定的文字 text: `65`, // \n 换行 subtext: '告警总数', // 子标题 top: '30%', left: '24%', textAlign: 'center', // 字体居中对齐 textStyle: { color: '#fff', fontSize: 30, lineHeight: 20, fontWeight: 'normal', }, subtextStyle: { // 子标题样式 color: '#fff', fontSize: 14, fontFamily: 'myRegular' } }, series: [ { type: 'pie', radius: ['60%', '80%'], center: ['25%', '45%'], // 环形图中心点 label: { show: false, }, data: data } ] } alarmschool_echart=echarts.init(document.getElementById('alarmschool_echart')); //使用制定的配置项和数据显示图表 alarmschool_echart.setOption(option); } function initCarschool(){ drawOutSchoolChart(); drawRoomSchoolChart(); drawAlarmSchoolChart(); drawSystemGradeChart(); brigadeSchoolChart(); brigadePostSchoolChart(); brigadeCarSchoolChart(); } function brigadeSchoolChart(){ var inschoolData=[ { value: 0, name:'中学'}, { value: 0, name:'小学'}, { value: 0, name:'幼儿园'}, ]; var schoolInfoArr=[]; boroughGradeArr.forEach(item=>{ var schoolInfo=item.schoolInfo; for(var i=0;i{ if(borough==item.borough){ var schoolInfo=item.schoolInfo; for(var i=0;i{ var schoolInfo=item.schoolInfo; for(var i=0;i{ if(borough==item.borough){ var schoolInfo=item.schoolInfo; for(var i=0;i{ var schoolInfo=item.schoolInfo; for(var i=0;i{ if(borough==item.borough){ var schoolInfo=item.schoolInfo; for(var i=0;iul>li").on('click',function(){ var index=$(this).attr("index"); updateReload(index) }) function updateReload(index){ updateBackground(index); if(layuiObj["ins"].timer){ clearInterval(layuiObj["ins"].timer); } reload(index); } function reload(index){ $("#carousel .layui-this").removeClass(); var options=layuiObj["ins"].config; options["index"]=parseInt(index); options["anim"]='default'; layuiObj["ins"].reload(options); } function updateBackground(index){ resizeChart(); var index=parseInt(index)+1; $(".mainContentR_t_box>ul>li").removeClass(); $(".mainContentR_t_box>ul>li>img").remove(); $(".mainContentR_t_box>ul>li:nth-child("+index+")").addClass("bg").addClass("selectColor") $(".mainContentR_t_box>ul>li:nth-child("+index+")").append(""); updateMainContentR_t_title(index); } function updateMainContentR_t_title(index){ var text="---" switch(index){ case 1: text+="校内"; break; case 2: text+="校外"; break; case 3: text+="校岗"; break; case 4: text+="校餐"; break; case 5: text+="校车"; break; case 6: text+="告警"; break; default: break; } $(".mainContentR_t_title").html(text); } function resizeChart(){ setTimeout(()=>{ if(inschool_echart!=null) inschool_echart.resize(); if(outschool_echart!=null) outschool_echart.resize(); if(postschool_echart!=null) postschool_echart.resize(); if(roomschool_echart!=null) roomschool_echart.resize(); if(carschool_echart!=null) carschool_echart.resize(); if(alarmschool_echart!=null) alarmschool_echart.resize(); }) } //多图时自适应 window.addEventListener("resize", function () { if(systemgradechart!=null){ systemgradechart.resize(); } }); export { initCarschool, updateBackground, boroughSchoolChart, brigadeSchoolChart, brigadePostSchoolChart, boroughPostSchoolChart, brigadeCarSchoolChart, boroughCarSchoolChart }