嵌入式网页设计
主界面
主界面 campus_audio.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="./style.css"> <!--link rel="stylesheet" href="./index.css" /--> <title>校园铃声定制</title> </head> <body> <div> <canvas id="canvas" style="position: fixed; left: 0px; top: 0px; z-index:-8; pointer-events: none; width: 1536px; height: 1000px;background: rgb(36, 31, 61);cursor: none;padding: 0;margin: 0;list-style: none;border: none;outline: none;">您的浏览器不支持canvas</canvas> </div> <div id="container0" style="position: fixed; z-index: -1;opacity: 1; width: 1500px; height: 750px"> <div class="hbox" style="position: fixed; left: 0px; top: 0px;z-index: 2"> <canvas id="canvas1" width="300" height="225"></canvas> <img src="/tuku/ybrightness.png" id="sunormoon" width="50px" height="50" style="margin-left: 245px;margin-top: -60px;"> <div width="500" height="100" style=" color: #fff;margin-left: 10px;margin-top: -50px;" class="vbox"> <h1>校园广播站</h1> </div> <div class="laba" style="margin-left: 10px;margin-top: -34px;width: 90px;height: 80px;"> <img src="/tuku/voice_horn.png" width="50px" height="50" > <img src="/tuku/add_music.png" width="25px" height="25" class="addm" id="addCards" style="z-index: 4;"> <img src="/tuku/whitemusic.png" width="25px" height="25" class="addm1" id="insertMusic" style="z-index: 4;"> </div> </div> <div style="position: fixed; left: 23px; top: 250px;"> <div width="500" style=" color: #fff;" class="vbox ybbox"> <div id="main2" style="width: 250px; height:250px ;" ></div> </div> </div> <div style="position: fixed; left: 23px; top: 500px;"> <div width="300" height="225" style=" color: #fff;" class="vbox "> <h3>湿度</h3> <div id="main3" style="width: 250px; height:250px ;margin-top: -20px;" ></div> </div> </div> <div style="position: fixed; top: 130px; color: #fff;width: 100%;z-index: -2" class="hbox"> <div style="width: 750px; height:700px;overflow-y:auto;margin-left: 260px;" id="audioCards" class="audioCards"> </div> <div style="height:700px;overflow-y:auto;margin-left: 0px;"> <div id="main" style="width: 450px;height:300px;margin-left: 0px;margin-top: -50px;"> </div> <h2 style="margin-top: 0px;">通告：</h2> <div class="noticeCard"> <p>本次嵌入式课设由170810218-曲昭璇和170400115-金文敏完成。分工：金文敏：前端界面和动态处理，cgi对应前台的接口。曲昭璇：数据库、后台对接数据库的各函数。共同完成：温湿度传感器的驱动实现和音乐的现实播放。</p> </div> </div> </div> <script type="text/javascript" src="./mouse.js"></script> </div> <!--删除卡片弹窗--> <div id="deleteW" class="addWorkBack" style="z-index: 6;"> <div id="deW" class="addWorkWrapper"> <div id="addWorkClose"> <span id="addWClosebutton">X</span> <h2>确定删除吗</h2> </div> <div class="addWorkContent"> <form id="addm" class="workform"> <div class="newform0"> <div style="margin-left: 40%;"> <button type="button" id="delete_music" class="newbtn0">确定</button> </div> </div> </form> </div> </div> </div> <!--插播弹窗--> <div id="add_M" class="addWorkBack" style="z-index: 6;"> <div id="addM1" class="addWorkWrapper"> <div id="addWorkClose"> <span id="addMClosebutton">X</span> <h2>立即插播</h2> </div> <div class="addWorkContent"> <form id="addm" class="workform"> <label for="workdesc" class="text0-item">选择音源</label> <div class=""> <div class=""> <input type="file" name="mp3url1" id="mp3url1" class=""></input> </div> </div> <div class="newform0"> <div style="margin-left: 40%;"> <button type="button" id="add_inst_music" class="newbtn0">立即播出</button> </div> </div> </form> </div> </div> </div> <!--修改音乐卡片弹窗--> <div id="update_Work" class="addWorkBack" style="z-index: 8;"> <div id="updateWork1" class="addWorkWrapper"> <div id="addWorkClose"> <span id="updateWorkClosebutton">X</span> <h2>修改广播信息</h2> </div> <div class="addWorkContent"> <form id="update_work " class="workform"> <div class=""> <label for="type1" class="">广播类型</label> <div class=""> <div class="radio"> <label> <input type="radio" name="type2" value="0" > 每日定时 </label> </div> <div class="radio"> <label> <input type="radio" name="type2" value="1" > 某时 </label> </div> </div> </div> <div class="newform0"> <label for="workdesc" class="text0-item">选择音源</label> <div class=""> <div class=""> <input type="file" name="mp3url0" id="mp3url0" ></input> </div> </div> <div class="workdateselect"> <label for="workdesc" class="text0-item" style="margin-left: -79px;">选择时间</label> <input type="datetime-local" id="updatedate-btn" class="workdate"/> </div> <div class="newform0"> <div style="margin-left: 40%;"> <button type="button" id="add_update_btn" class="newbtn0">提交</button> </div> </div> </form> </div> </div> </div> <!--增加音乐卡片弹窗--> <div id="add_Work" class="addWorkBack" style="z-index: 5;"> <div id="addWork1" class="addWorkWrapper"> <div id="addWorkClose"> <span id="addWorkClosebutton">X</span> <h2>增加广播信息</h2> </div> <div class="addWorkContent"> <form id="add_work " class="workform"> <div class=""> <label for="type1" class="">广播类型</label> <div class=""> <div class="radio"> <label> <input type="radio" name="type1" value="0" checked="checked"> 每日定时 </label> </div> <div class="radio"> <label> <input type="radio" name="type1" value="1" > 某时 </label> </div> </div> </div> <div class="newform0"> <label for="workdesc" class="text0-item">选择音源</label> <div class=""> <div class=""> <input type="file" name="mp3url" id="mp3url" ></input> </div> </div> <div class="workdateselect"> <label for="workdesc" class="text0-item" style="margin-left: -79px;">选择时间</label> <input type="datetime-local" id="begindate-btn" class="workdate"/> </div> <div class="newform0"> <div style="margin-left: 40%;"> <button type="button" id="add_work_btn" class="newbtn0">提交</button> </div> </div> </form> </div> </div> </div> <script src="./jquery.min.js"></script> <script src="/tuku/echarts.js"></script> <script src="/starcontrol.js"></script> <script src="/gettth.js"></script> <script src="/audiocard.js"></script> <script> $(document).ready(function(){ tth.inittth(); playCards.initCards(); }) </script> </body> </html> 广播信息前端逻辑代码： var div = document.getElementById('add_Work'); $("#addCards").click(function(){ div.style.display = "block"; console.log("ksddjjvbt"); }); $("#addWorkClosebutton").click(function(){ div.style.display="none"; }); var di1 = document.getElementById('add_M'); $("#insertMusic").click(function(){ di1.style.display = "block"; console.log("ksddjjvbt"); }); $("#addMClosebutton").click(function(){ di1.style.display="none"; }); var di2 = document.getElementById('deleteW'); /*$("#insertMusic").click(function(){ di2.style.display = "block"; console.log("ksddjjvbt"); });*/ $("#addWClosebutton").click(function(){ di2.style.display="none"; }); var di3 = document.getElementById('add_M'); $("#insertMusic").click(function(){ di1.style.display = "block"; console.log("ksddjjvbt"); }); $("#addMClosebutton").click(function(){ di1.style.display="none"; }); var div4=document.getElementById('update_Work'); $("#updateWorkClosebutton").click(function(){ div4.style.display="none"; }); //播放天气语音 $("#sunormoon").click(function(){ $.post("./cgi-bin/index.py",{},function(resdata){ console.log(resdata); }); }); $("#add_work_btn").click(function(){ var atype1=document.getElementsByName("type1"); var type1=0; for(var i=0;i<atype1.length;i++){ if(atype1[i].checked==true){ type1=atype1[i].value; } } console.log(type1); var begindate = document.getElementById("begindate-btn"); console.log(begindate.value); var begintime = datetoformat(new Date(begindate.value)); var mp3url=document.getElementById("mp3url").files[0].name; var thisTime=new Date().getTime(); var actionType="1"; console.log(begintime); if(typeof(mp3url)=="undefined"){ alert("没有选择音频"); } if(type1=="每日定时"){ type1="0"; } if(type1=="某时"){ type1="1"; } if(type1=="1" && new Date(begindate).getTime()<thisTime){ alert("注意时间设置"); } if(begintime.length == 0||mp3url.length==0){ return alert("不能为空"); } var postData ={"actionType":actionType,"mp3name":mp3url,"type":type1,"playtime":begintime}; console.log(postData); $.post("/cgi-bin/audioService.py",postData,function(resdata){ console.log(resdata); }) ; }); $("#add_inst_music").click(function(){ var mp3url=document.getElementById("mp3url1").files[0].name; if(typeof(mp3url)=="undefined"){ alert("没有选择音频"); } if(mp3url.length==0){ return alert("不能为空"); } var postData ={"mp3name":mp3url}; console.log(postData); $.post("/cgi-bin/demo.py",postData,function(resdata){ console.log(resdata); }); }); function datetoformat(date){ let oYear = date.getFullYear(); let oMonth = date.getMonth()+1; let oDay = date.getDate(); let oHour = date.getHours(); let oMin = date.getMinutes(); let oSen = date.getSeconds(); let oTime = oYear +'-'+ oMonth +'-'+ oDay +' '+ oHour +':'+ oMin +':'+oSen;//拼接时间 return oTime; } /* *音乐卡片管理 */ var playCards={ initCards(){ var datas=[]; var cards=[]; $.post("/cgi-bin/audioService.py",{"actionType":3},function(resdata){ console.log(resdata); var data0=[]; data0=resdata.split("\n"); var data1=[]; data1=data0[1].split(")"); for(var i=0;i<data1.length-1;i++){ var cardp=[]; cardp=data1[i].split("'"); console.log(cardp); var tt=[]; tt=cardp[0].split("("); var tt0=[]; tt0=tt[1].split(","); var tt1=cardp[4].split(","); var newcard={cardid:parseInt(tt0[0]),mp3name:cardp[1],playtime:cardp[3],type1:parseInt(tt1[1]),status1:parseInt(tt1[2])}; cards.push(newcard); } console.log(cards); console.log("defrgth11111"); var pageHtml=""; for(var i=0;i<cards.length;i++){ pageHtml=pageHtml+"<div class='audioCard'><div class='left-container'><div class='title'><span>"+"广播-"+cards[i].type1+"-"+cards[i].mp3name+"</span></div><div class='title1'><span>"+cards[i].playtime+"</span></div></div><div class='right-container'><div class='regist-container'><div class='regist' data-id="+cards[i].cardid+" onclick='CangeCard(this)'>修改</div></div><div class='actoin-container' data-id="+cards[i].cardid+" onclick='update(this)'>删除</div></div></div>" } console.log(pageHtml); pageHtml=pageHtml+"<div style='margin-top:200px;'></div>"; var divv=document.getElementById("audioCards"); $("#audioCards").html(pageHtml); }); },} function CangeCard(e){ div4.style.display="block"; $("#add_update_btn").click(function(){ var id=e.getAttribute("data-id"); var atype1=document.getElementsByName("type2"); var type1=0; for(var i=0;i<atype1.length;i++){ if(atype1[i].checked==true){ type1=atype1[i].value; } } console.log(type1); var begindate = document.getElementById("updatedate-btn"); console.log(begindate.value); var begintime = datetoformat(new Date(begindate.value)); var mp3url=document.getElementById("mp3url0").files[0].name; var thisTime=new Date().getTime(); var actionType="4"; console.log(begintime); var postData ={"actionType":actionType,"mp3name":mp3url,"type":type1,"playtime":begintime,"cardid":id}; console.log(postData); $.post("/cgi-bin/audioService.py",postData,function(resdata){ console.log(resdata); }) ; console.log(id); });} function update(e){ var id=e.getAttribute("data-id"); $.post("/cgi-bin/audioService.py",{"actionType":5,"cardid":id},function(res){ console.log(res); }); console.log(id); } 温湿度数据逻辑代码gettth.js /* *温度仪表折线图 温湿度仪表 */ var myChart = echarts.init(document.getElementById('main')); var myChart1 = echarts.init(document.getElementById("main2")); var myChart2 = echarts.init(document.getElementById("main3")); var data=[] // 指定图表的配置项和数据 折线图 option = { color:["#ffedbc","#ed4264"], title: { text: '未来一周气温变化', }, tooltip: { trigger: 'axis' }, legend: { data: ['温度', '湿度'] }, toolbox: { show: true, color:["#ffedbc","#ed4264"], feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['9min前', '8min前', '7min前','6min前', '5min前', '4min前', '3min前', '2min前', '1min前', '此时'], axisLabel:{ color:"#ed4264", shadowColor: "#ed4264", } }, yAxis: { type: 'value', axisLabel: { formatter: '{value}', color:"#ffedbc", shadowColor: "#ffedbc", } }, series: [ { name: '最高气温', type: 'line', data: [7,10,10,11, 11, 15, 13, 12, 13, 10], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name: '湿度', type: 'line', data: [50,60,70,1, -2, 2, 5, 3, 2, 0], markPoint: { data: [ {name: '湿度', value: -2, xAxis: 1, yAxis: -1.5} ] }, markLine: { data: [ {type: 'average', name: '平均值'}, [{ symbol: 'none', x: '90%', yAxis: 'max', }, { symbol: 'circle', label: { position: 'start', formatter: '最大值' }, type: 'max', name: '最高点' }] ],shadowColor: "#ffedbc", } } ] }; //温度的设置 option1 = { title: { text: '温度', left:'center', top:40, textStyle:{ color:'#fff', fontStyle:'oblique', fontSize:15 } }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [ { name: '', min:-50, max:100, splitNumber: 10, title: { text: '温度', left:'center', top:40, textStyle:{ color:'#fff', fontStyle:'', fontSize:15 } }, type: 'gauge', pointer : { //指针样式 length: '65%', color:"#7DFFD1", width: 3, shadowColor : '#7DFFD1', //默认透明 shadowBlur: 70 }, detail: {formatter:'{value}℃',value:{color:"#fff",fontSize:15}}, data: [{value: 0, name: '当前气温'}], axisLine: { show: true, lineStyle: { // 属性lineStyle控制线条样式 color: [ [ 1, "#7DFFD1" ], ], width: 4, shadowColor : '#7DFFD1', //默认透明 shadowBlur: 70 }, }, axisLabel : { //文字样式（及“10”、“20”等文字样式） color : "white", distance : 5 //文字离表盘的距离 }, splitLine : { //分割线样式（及10、20等长线样式） length : 10, lineStyle : { // 属性lineStyle控制线条样式 width : 2, color:"#7DFFD1", shadowColor : '#7DFFD1', //默认透明 shadowBlur: 70, } }, axisTick : { //刻度线样式（及短线样式） length : 7, lineStyle : { // 属性lineStyle控制线条样式 width : 2, color:"#7DFFD1", shadowColor : '#7DFFD1', //默认透明 shadowBlur: 70, } }, } ] }; option2={ title: { text: '湿度', left:'center', textStyle:{ color:'#fff', fontSize:40 } }, color:["rgba(255,255,245,0.2)","#9144fc"], tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, graphic:{ //图形中间文字 type:"text", left:"center", top:"center", style:{ text:"", textAlign:"center", fill:"#fff", fontSize:30 } }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: 'pie', option: { funnel: { x: '0%', width: '100%', funnelAlign: 'center', max: 100 } } }, restore : {show: true}, saveAsImage : {show: true} } }, text:"温度", calculable : true, series : [ { name:'湿度', type:'pie', radius : ['62%', '70%'], title:{ text:"dkb", }, itemStyle : { normal : { label : { show : false }, labelLine : { show : false }, shadowColor : '#9144fc', //默认透明 shadowBlur: 40 }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '15', fontWeight : 'bold', color:'#fff' }, shadowColor : '#9144fc', //默认透明 shadowBlur: 40 } } }, data:[ {value:50, name:''}, {value:20,name:"",} ] } ] }; option1.series[0].data[0].value = 30; option2.series[0].data[0].value=80; myChart1.setOption(option1, true); shidu=[]; wendu=[]; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChart2.setOption(option2); var tth={ inittth:function(){ this.getlast10(); }, getlast10:function(){ $.post("http://192.168.124.10/cgi-bin/audioService.py",{"actionType":2},function(res){ console.log(res); var data0=[]; data0=res.split("\n"); var data1=[]; data1=data0[1].split(")"); console.log(data1); for(var i=0;i<10;i++){ var wsd=[]; wsd=data1[i].split("'"); console.log(wsd); wendu[i]=(parseInt(wsd[1])); shidu[i]=(parseInt(wsd[3])); } console.log(wendu); console.log(shidu); myChart1.clear(); console.log(wendu[0]); option1.series[0].data[0].value=wendu[0]; myChart1.setOption(option1); myChart2.clear(); option2.series[0].data[0].value=100-shidu[0]; option2.graphic.style.text=(100-shidu[0]).toString()+"%"; myChart2.setOption(option2); myChart.clear(); option.series[0].data=wendu; option.series[1].data=shidu; myChart.setOption(option); }); } }
