传统物联网的三层架构来对目标进行实现

摘要经济的发展往往伴随着人民生活水平的提升。对蔬菜的需求也发生了变化，尤其是对反季节蔬菜的需求量连年增长。市场需求也悄然发生了转变，人们对蔬菜的需求逐渐变得多样化起来，消费水平也由大众化转变为了多元化，同时对蔬菜质量的需求也转为蔬菜的品质第一，并且营养无污染。系统采用传统物联网的三层架构来对目标进行实现。其中感知层单片机选用STM32单片机，运用传感器分别采集温度、湿度、光照强度和二氧化碳浓度的数值。然后传输层实现数据通过WIFI模块传输数据到相关云平台，进行数据存储。Web端可直观查询数据并且控制管理监控蔬菜生长的小环境，如果环境不是当前最适宜参数将进行调节，控制小范围内植物生长环境最适宜。系统实现了对环境进行全天候的监测，确保可以根据要求及时调整环境参数。该系统采用物联网技术对环境进行监测。实现了对无土温室生长环境的合理监控，确保可以调整到蔬菜最适宜的生长环境。运用科学技术达到合理控制蔬菜生长过程的目的。并且以以增产，提高质量，调节增长周期，提高经济效益为目的。进而实现集约化，高产，优质，高效，生态安全的农业生产目标。关键词：物联网，基质栽培，STM32，WIFI

AbstractEconomicdevelopmentisoftenaccompaniedbytheimprovementofpeople'slivingstandards.Thedemandforvegetableshasalsochanged,especiallyintheoff-season.Marketdemandhasalsoquietlychanged.People'sdemandforvegetableshasgraduallybecomediversified.Theconsumptionlevelhasalsochangedfrompopularitytodiversification.Atthesametime,thedemandforthequalityofvegetableshasalsochangedtothefirstqualityofvegetables,andthenutritionispollution-free.Thesystemusesthethree-tierarchitectureofthetraditionalInternetofthingstoachievethegoal.STM32singlechipcomputerisusedinthesensinglayer,andsensorsareusedtocollectthetemperature,humidity,lightintensityandcarbondioxideconcentration.ThenthetransmissionlayerrealizesdatatransmissiontotherelevantcloudplatformthroughWiFimodulefordatastorage.Thewebendcanquerythedatadirectlyandcontrolandmanagethesmallenvironmentformonitoringthegrowthofvegetables.Iftheenvironmentisnotthemostappropriateparameteratpresent,itwillbeadjusted,andtheplantgrowthenvironmentinasmallrangewillbemostappropriate.Thesystemrealizesall-weathermonitoringoftheenvironmenttoensurethattheenvironmentalparameterscanbeadjustedintimeaccordingtotherequirements.ThesystemusesInternetofthingstechnologytomonitortheenvironment.Thereasonablemonitoringofthegrowthenvironmentofthesoillessgreenhouseisrealizedtoensurethatthemostsuitablegrowthenvironmentforvegetablescanbeadjusted.Usingscienceandtechnologytoachieveareasonablecontrolofvegetablegrowthprocess.Theaimistoincreaseproduction,improvequality,adjustgrowthcycleandimproveeconomicefficiency.Thenrealizetheagriculturalproductiongoalofintensive,highyield,highquality,highefficiencyandecologicalsecurity. Keywords:internetofthings,substrateculture,wifi,stm32

目录第1章绪论 [20]。流程如图3-36所示。图3-36行业资讯流程图（3）应用接口行业资讯可提供用户了解最近时间内的行业资讯，和行业新闻，这里提供用户行业资讯的查询门户URL地址，用户可点击跳转查找和浏览当前资讯。行业资讯接口表如表3-20所示。表3-20行业资讯接口名称行业资讯接口说明本接口:managerinfo。输入无参（续表3-20）名称行业资讯接口输出行业资讯页面

第4章系统测试4.1感知层测试感知层以STM32单片机作为核心，通过I2C外设连接传感器采集温湿度和光照强度数据，以及通过SPI连接RC522采集农药和化肥用量的数据，并通过串口连接Ri模块。在调试感知层的时候，通过网络调试助和上位机测试了数据采集的感知层环节，如图4-1所示。图4-1感知测试图4.2传输层测试传输层数据模拟传入云端测试使用软件仿真模拟ESP8266传输数据的场景通过Json格式进行数据传输，给定OneNet设备唯一id和key配置连接OneNet后对数据进行配置传输对测试状态如图4-2，图4-3所示。图4-2云平台连接仿真图4-3上传模拟数据仿真

4.3应用层测试应用层数据测试包括测试应用层登录，注册，实时数据，历史数据，故障信息上传，人员数据查询，节点查看，行业资讯，和调节反馈，这些模块的功能性测试。1.登录测试登录测试功能如图4-4。图4-4登录功能测试2.注册测试注册测试功能如图4-5。图4-5注册功能测试3.实时数据测试实时数据测试功能如图4-6。图4-6温湿度历史数据测试图4.历史数据测试历史数据测试功能如图4-7，4-8。图4-7温湿度历史数据测试图图4-8光照Co2历史数据测试图5.节点管理测试节点管理测试功能如图4-9。图4-9节点管理测试图6.故障申报测试故障申报测试功能如图4-10。图4-10故障申报页面测试图7.行业资讯查看测试行业资讯测试功能如图4-11。图4-11资讯接口页面测试图

结论基于物联网的基质栽培系统的设计，感知层通过STM32单片机，温湿度传感器DHT11,光照传感器GY-30,二氧化碳传感器MH-Z14，几个传感器来进行对温室内的环境监测，通过监测数据实时展示在OLED屏和上传到云端，云端通过Web程序对数据进行管理和查看，对异常环境参数可在Web端进行参数回控，完成了物联网的闭合状态。在功能实现中可在Web端通过登陆后对环境参数进行一个直观的了解选择Web端优势就在于在多个平台可复用一套系统不需要针对不同的平台进行各项研发，用户登陆可管理历史数据，实时数据，终端节点启用状态，和当前用户的查询。该系统主要的引用场景是城市周边对新鲜瓜果蔬菜的栽培控制，主要用于对错季蔬菜和安全可溯源绿色蔬菜的栽培，给与城市居民更优质的蔬菜提供源，减少异地蔬菜运输时需对蔬菜进行防腐，和保险处理，减少药物性的残留，由于源头可控管理易溯源，每一颗蔬菜都可作为数据进行管理。系统还存在许多的不足，比如节点多了后对数据的处理，在低密度数据下怎么发掘数据的利用价值，对终端假如一个大棚内节点全部失效缺少应急处理等。所以还需要更多的研究和处理。致谢马上就要毕业了，在黑龙江科技大学的四年里，是人生无经历最美好的四年，是值得珍视的四年，回顾这四年不仅学习到了知识，更多的是知识之外的东西和做人的道理。在说明书完成之际，首先要特别感谢我的指导老师郎老师，感谢她对我的悉心指导。她严谨的科研精神，认真负责的工作作风都给我留下了深刻的印象。指导老师对设计、实施和说明书的写作等进行了细致的指导，指出存在的问题，和解决的思路，都是不厌其烦的指导，给予了我很大的帮助。同样要感谢所有教过我的老师们，感谢你们这几年来对我的教诲与帮助，你们的帮助使我得以顺利完成学业。其次还要感谢学院的领导，为我们提供了良好的学习环境，对比毕业生的关怀呵护，还有就是感谢陪伴了我四年的同学们，在生活中对我的帮助和照顾。最后还要感谢我的家人，多年来对我的支持无论是生活还是精神经济上的支持。最后由衷的感谢百忙之中参加毕业答辩的老师和专家，幸苦您抽出时间来对论文进行审阅。参考文献潘小红,杨志勇.基于物联网技术的温室大棚种植园环境监测系统[J].现代电子技术,2019,42(14):127-130.刘皎,曹荣荣.基于物联网的环境监测系统设计[J].无线互联科技,2019,16(07):36-37.陈玉兵.基于物联网的农田环境监测及灌溉控制系统研制[D].西安邮电大学,2019.马丽红,高茜茜,常勇,于蕾.基于物联网技术的果园环境监测系统实现探究[J].农业与技术,2019,39(13):22-23.孙培君.基于单片机的温湿度测控系统设计[J].电子技术与软件工程,2016:256-257.舒泰歌,游乾乾,李慕凡,王瀚泽,张艺鼎.基于STM32无线信息采集系统设计[J].科技风,2020,(15):120-121.WuYu-kang,DengShi-jian.ApplicationofSHT11digitaltemperatureandhumiditysensor[J].IndustryandMineAutomation,2010(4):99-101.李长有,王文华.基于DHT11温湿度测控系统设计[J].机床与液压,2013,41(13):107-108+97.王志宏,白翠珍.基于DHT11的实验室多点温湿度报警系统设计[J].山西电子技术,2011,(04):45-46.张锋,刘丹.温室大棚数据采集与控制系统设计[J].现代化农业,2018,(04):2-4.刘博.基于BH1750光照强度数据采集系统的设计[J].河南科技,2016,(13):27-28.张开生,田开元,吕明,吕超.基于物联网技术的农业大棚环境监控系统设计[J].西安科技大学学报,2015,35(06):805-811.刘海泉,杨盛泉,黄姝娟,刘萍萍.基于物联网技术的温室大棚测量与控制系统的设计[J].价值工程,2017,36(17):108-110.韩岳,张晓娟,柳平增,陈军.温室大棚物联网智能测控系统研究[J].农业技术与装备,2017,(02):18-20+24.吴允强,吴由松.基于ESP8266的智能家居控制系统设计[J].电子测试,2017,(21):9+24.吴沧舟,兰逸正,张辉.基于MySQL数据库的优化[J].电子科技,2013,26(09):182-184.NunesR,DelgadoJ.AnArchitectureforaHomeAutomationSystem,Electronics,CircuitsandSystems[J]1998IEEEInternationalConference,1998,1:259262.叶朝辉,杨士元.智能家庭网络研究综述[J].计算机应用研究,2001,(09):1-6.南红权.基于WiFi的无线测控系统设计与实现[J].中国外资，2014杨云江,罗淑英,郭兰,邓周灰.基于Web环境的科研管理信息系统的设计与实现[J].贵州大学学报,2004,(02):205-210+215.附录附录1//温湿度DHT11的核心代码unsignedcharDHT11_ReadTempAndHumi(void){ unsignedchari=0,check._value=0.count=0; EA=0; dht11=0;拉低数据线大于18ms发送开始信号 Delay__1ms(20);/需大于18毫秒 dht11=1;释放数据线.用于检测低电平的应答信号 /延时20-40us,等待一段时间后检测应答信号.应答信号是从机拉低数据线80us DHT11__Delay_10us0); DHT11__Delay_10usO; DHT11_Delay_10us0; DHT11_Delay_10us0; if(dht11!=0)检测应答信号.应答信号是低电平 { //没应答信号 EA=1; returnERROR; } else { //有应答信号 while(dht11==0&&count++<NUMBER);//待应答信号结束 if(count>=NUMBER){检测计数器是否超过了设定的范围 dht11=1; EA=1; returnERROR;读数据出错退出函数 } count=0; dht11=1:释放数据线 //应答信号后会有一个80us的高电平，等待高电平结束 while(dht11!=0&&count++<NUMBER); if(count>=NUMBER) { dht11=1; EA=1: returmERROR;退出函数 } for(i=0;i<SIZE:i++) { value_array[i]=DHT11_ReadValueO; if(status==ERROR)调用ReadValue()读数据出错会设定status为ERROR { dht11=1; EA=1: returnERROR: } //读出的最后一一个值是校验值不需加上去 if(i!=SIZE-1) {//读出的五字节数据中的前四字节数据和等于第五字节数据表示成功 check__value+=value_array[]; }//endfor //在没用发生函数调用失败时进行校验 if(check_value=value_array[SIZE-1]) { //将温湿度扩大10倍方便分离出每一位. humi__value=value__array[0]*10: temp_value=value_array[2]*10; dht11=1; EA=1: retum0K;正确的读出dht11输出的数据 } else{ //校验数据出错 EA=1: returnERROR: } }}附录2//GY-30floatread_BH1750(void){ intdis_data;//变量 floattemp1; floattemp2; Single_Write_BH1750(0x01);//发送上电命令(0x01) Single_Write_BH1750(0x10);//发送高分辨率连续测量命令(0x10) delay_ms(180);//等待测量结束， mread();//连续读出数据，存储在BUF中 dis_data=BUF[0]; dis_data=(dis_data<<8)+BUF[1];//2个字节合成数据 temp1=dis_data/1.2;//计算光照度 temp2=10*dis_data/1.2;//把光照度放大10倍，目的是把小数点后一位数据也提取出来 temp2=(int)temp2%10;//求余得到小数点后一位 OLED_ShowString(87,2,".",12);//OLED显示小数点 OLED_ShowNum(94,2,temp2,1,12);//OLED显示小数 returntemp1;//返回整数部分} 附录3//二氧化碳//发送读取指令uint16_tCO2TxBuffer[9]={0xFF,0x01,0x86,0x00,0x00,0x00,0x00,0x00,0x79};voidCO2_Tx(){ inti;for(i=0;i<9;i++){ USART_ClearFlag(USART2,USART_FLAG_TC); USART_SendData(USART2,CO2TxBuffer[i]); while(USART_GetFlagStatus(USART2,USART_FLAG_TC)==RESET);}} 应用层代码如下数据Ajaxvarseries1=[];

varseries2=[];

varseries3=[];

varseries4=[];

//varxTime=['20201212','20201213','20201214','20201215','20201216','20201217','20201218'];

varxTime=[];

window.onload=function(){

varvm=newVue({

el:"#app",

methods:{

send:function(){

axios({

method:'get',

url:'/sensorDate/historydate'

}).then(function(res){

for(leti=0;i<res.data.datas.length;i++){

series1[i]=res.data.datas[i].temperature;

series2[i]=res.data.datas[i].humidity;

series3[i]=res.data.datas[i].light;

series4[i]=res.data.datas[i].carbon;

xTime[i]=res.data.datas[i].timesx;

}

})

.catch(function(error){

console.log(error);

});

}

}

});

setInterval(vm.send,1000);//定时器每秒调用send

}

//这里发送一个Ajax把数据拿下来就行了

newChart(document.getElementById("linechart"),{

type:'line',

data:{

labels:xTime,

datasets:[{

label:'温度',

backgroundColor:window.chartColors.navy,

borderColor:window.chartColors.navy,

data:series1,

fill:false,

},{

label:'湿度',

fill:false,

backgroundColor:window.chartColors.purple,

borderColor:window.chartColors.purple,

data:series2,

}]

},

options:{

responsive:true,

title:{

display:true,

text:'Chart.jsLineChart'

},

tooltips:{

mode:'index',

intersect:false,

},

hover:{

mode:'nearest',

intersect:true

},

scales:{

xAxes:[{

display:true,

scaleLabel:{

display:true,

labelString:'时间'

}

}],

yAxes:[{

display:true,

scaleLabel:{

display:true,

labelString:'参数值'

}

}]

}

}

});

//这里发送一个Ajax把数据拿下来就行了

newChart(document.getElementById("carbonline"),{

type:'line',

data:{

labels:xTime,

datasets:[{

label:'光照强度',

fill:false,

backgroundColor:window.chartColors.purple,

borderColor:window.chartColors.green,

data:series3,

},{

label:'二氧化碳浓度',

fill:false,

backgroundColor:window.chartColors.purple,

borderColor:window.chartColors.blue,

data:series4,

}]

},

options:{

responsive:true,

title:{

display:true,

text:'Chart.jsLineChart'

},

tooltips:{

mode:'index',

intersect:false,

},

hover:{

mode:'nearest',

intersect:true

},

scales:{

xAxes:[{

display:true,

scaleLabel:{

display:true,

labelString:'时间'

}

}],

yAxes:[{

display:true,

scaleLabel:{

display:true,

labelString:'参数值'

}

}]

}

}

});数据查询packagecom.bishe.text1.dao;

importcom.bishe.text1.entities.Sensor;

importorg.apache.ibatis.annotations.Mapper;

importorg.apache.ibatis.annotations.Select;

importjava.util.List;

@Mapper

publicinterfaceSensorDao{

//查询的数值历史和实时数据

@Select("select*fromt_sensororderbydesclimit1")//查询实时数据一条数据

SensorselectReal();

@Select("select*fromt_sensororderbyiddesclimit10")//查询历史胡数据

List<Sensor>selectHistory();

}节点@Mapper

publicinterfaceTerminalStatusDao{

@Update("updatet_statussetlightstatus=#{updatestatus}")

publicintupdateLight(intupdatestatus);

@Update("updatet_statussetwindowstatus=#{updatestatus}")

publicintupdatewindow(intupdatestatus);

}@Mapper

@Repository

publicinterfaceUsersDao{

@Select("select*fromuserswhereusername=#{username}")//登录

UsersfindByUsername(Stringusername);

@Select("select*fromuserswhereusername=#{username}andpassword=#{password}")//登录查询

Userslogin(@Param("username")Stringusername,@Param("password")Stringpassword);

@Insert("insertintousers(username,password,createtime)value(#{password},#{username}),Date(0)")//插入注册信息

intregister(@Param("username")Stringusername,@Param("password")Stringpassword);

}@Configuration

publicclassMyConfigimplementsWebMvcConfigurer{

@Override

publicvoidaddViewControllers(ViewControllerRegistryregistry){

registry.addViewController("/").setViewName("login");

registry.addViewController("/index.html").setViewName("login");

registry.addViewController("/main.html").setViewName("dashboard");

}

@Bean

LocaleResolverlocaleResolver(){

returnnewMyLocaleResolver();

}

@Override

publicvoidaddInterceptors(InterceptorRegistryregistry){

registry.addInterceptor(newLoginHandlerInterceptor())

.addPathPatterns("/**")

.excludePathPatterns("/index.html","/","/user/login","/user/register","/webjars/**","/asserts/**","/templates/**");

}

}//登录拦截

publicclassLoginHandlerInterceptorimplementsHandlerInterceptor{

@Override

publicbooleanpreHandle(HttpServletRequestrequest,HttpServletResponseresponse,Objecthandler)throwsException{

Objectusers=request.getSession().getAttribute("loginUser");

if(users==null){

request.setAttribute("msg","没有权限请先登录");

request.getRequestDispatcher("/index.html").forward(request,response);

returnfalse;

}else{

returntrue;

}

}

}publicclassMyLocaleResolverimplementsLocaleResolver{

@Override

publicLocaleresolveLocale(HttpServletRequestrequest){

Stringl=request.getParameter("l");

Localelocale=Locale.getDefault();

if(!StringUtils.isEmpty(l)){

String[]split=l.split("_");

locale=newLocale(split[0],split[1]);

}

returnlocale;

}

@Override

publicvoidsetLocale(HttpServletRequestrequest,HttpServletResponseresponse,Localelocale){

}

}//实时数据Ajaxwindow.onload=function(){

varvm=newVue({

el:"#datasreal",

data:{

temperature:'25',

humidity:'35',

light:'1200',

carbon:'1300',

timesx:'',

num:''

},

methods:{

send:function(){

axios({

method:'get',

url:'/sensorDate/realtime'

}).then(function(res){

console.log(res)

console.log(res.data)

console.log("####fenge")

console.log(res.data.timesx)

console.log("####fenge")

vm.temperature=res.data.temperature;

this.humidity=res.data.humidity;

vm.light=res.data.light;

vm.carbon=res.data.carbon;

vm.timesx=res.data.timesx;

console.log("##########")

vm.humidity=res.data.humidity;

console.log(this.humidity)

console.log(humidity)

console.log(humidity)

console.log("##########")

}).catch(function(error){

console.log(error);

});

}

}

});

setInterval(vm.send,3000);//定时器每秒调用send

}//页面UI提取头<ulclass="navflex-column">

<liclass="nav-item">

<aclass="nav-linkactive"

th:class="${activeUri=='main.html'?'nav-linkactive':'nav-link'}"

href="#"th:href="@{/sensor/real}">

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-home">

<pathd="M39l9-797v11a22001-22H5a22001-2-2z"></path>

<polylinepoints="92291215121522"></polyline>

</svg>

首页<spanclass="sr-only">(current)</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link"

th:class="${activeUri=='emps'?'nav-linkactive':'nav-link'}"

href="#"th:href="@{/sensor/real}">

<!--<aclass="nav-link"-->

<!--href="#"th:href="@{/main.html}">-->

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-users">

<pathd="M1721v-2a44000-4-4H5a44000-44v2"></path>

<circlecx="9"cy="7"r="4"></circle>

<pathd="M2321v-2a44000-3-3.87"></path>

<pathd="M163.13a4400107.75"></path>

</svg>

蔬菜节点数据查看

</a>

</li>

<liclass="nav-item">

<aclass="nav-linkactive"

th:class="${activeUri=='emps'?'nav-linkactive':'nav-link'}"

href="#"th:href="@{/test/history}">

<!--<aclass="nav-link"-->

<!--href="#"th:href="@{/main.html}">-->

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-users">

<pathd="M1721v-2a44000-4-4H5a44000-44v2"></path>

<circlecx="9"cy="7"r="4"></circle>

<pathd="M2321v-2a44000-3-3.87"></path>

<pathd="M163.13a4400107.75"></path>

</svg>

历史数据查看

</a>

</li>

<liclass="nav-item">

<aclass="nav-linkactive"

th:class="${activeUri=='emps'?'nav-linkactive':'nav-link'}"

href="#"th:href="@{/emps}">

<!--<aclass="nav-link"-->

<!--href="#"th:href="@{/main.html}">-->

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-users">

<pathd="M1721v-2a44000-4-4H5a44000-44v2"></path>

<circlecx="9"cy="7"r="4"></circle>

<pathd="M2321v-2a44000-3-3.87"></path>

<pathd="M163.13a4400107.75"></path>

</svg>

人员管理

</a>

</li>

<liclass="nav-itemglyphiconglyphicon-tint">

<!--<aclass="nav-link"href="/docs/4.0/examples/dashboard/#">-->

<aclass="nav-link"

href="#"th:href="@{/node}">

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-bar-chart-2">

<linex1="18"y1="20"x2="18"y2="10"></line>

<linex1="12"y1="20"x2="12"y2="4"></line>

<linex1="6"y1="20"x2="6"y2="14"></line>

</svg>

终端节点查看

</a>

</li>

<liclass="nav-itemglyphiconglyphicon-tint">

<!--<aclass="nav-link"href="/docs/4.0/examples/dashboard/#">-->

<aclass="nav-link"

href="#"th:href="@{/guzhang}">

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-bar-chart-2">

<linex1="18"y1="20"x2="18"y2="10"></line>

<linex1="12"y1="20"x2="12"y2="4"></line>

<linex1="6"y1="20"x2="6"y2="14"></line>

</svg>

故障管理

</a>

</li>

<liclass="nav-itemglyphiconglyphicon-tint">

<!--<aclass="nav-link"href="/docs/4.0/examples/dashboard/#">-->

<aclass="nav-link"

href="#"th:href="@{/ziun}">

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-bar-chart-2">

<linex1="18"y1="20"x2="18"y2="10"></line>

<linex1="12"y1="20"x2="12"y2="4"></line>

<linex1="6"y1="20"x2="6"y2="14"></line>

</svg>

行业资讯

</a>

</li>

<liclass="nav-itemglyphiconglyphicon-tint">

<!--<aclass="nav-link"href="/docs/4.0/examples/dashboard/#">-->

<aclass="nav-link"

href="#"th:href="@{/ziun}">

<svgxmlns="/2000/svg"width="24"height="24"viewBox="002424"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="featherfeather-bar-chart-2">

<linex1="18"y1="20"x2="18"y2="10"></line>

<linex1="12"y1="20"x2="12"y2="4"></line>

<linex1="6"y1="20"x2="6"y2="14"></line>

</svg>

新闻导航

</a>

</li>

</ul>//实时数据HTML<!DOCTYPEhtml>

<htmllang="en"xmlns:th="">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no">

<metaname="description"content="">

<metaname="author"content="">

<title>DashboardTemplateforBootstrap</title>

<linkhref="../../static/asserts/css/bootstrap.min.css"th:href="@{/webjars/bootstrap/4.4.1-1/css/bootstrap.css}"rel="stylesheet">

<linkhref="../../static/asserts/css/dashboard.css"th:href="@{/asserts/css/dashboard.css}"rel="stylesheet">

<styletype="text/css">

@-webkit-keyframeschartjs-render-animation{

from{

opacity:0.99

}

to{

opacity:1

}

}

@keyframeschartjs-render-animation{

from{

opacity:0.99

}

to{

opacity:1

}

}

.chartjs-render-monitor{

-webkit-animation:chartjs-render-animation0.001s;

animation:chartjs-render-animation0.001s;

}

</style>

</head>

<bodyclass="sidebar-menu-collapsed"id="apps">

<!--引入topbar-->

<divth:replace="commons/bar::#topbar"></div>

ivclass="container-fluid">

<divclass="row">

<!--引入sidebar-->

<divth:replace="commons/bar::#sidebar(activeUri='emps')"></div>

<mainrole="main"class="col-md-9ml-sm-autocol-lg-10pt-3px-4">

<h3><divclass="labellabel-default"align="center">实时数据展示</div></h3>

<br>

<divclass="row"id="datasreal">

<divclass="col-sm-6col-md-3">

<divclass="thumbnail">

<imgclass="mb-4"th:src="@{/asserts/img/wendu.png}"src="asserts/img/wendu.png"alt=""width="72"height="72">

<divclass="caption">

<h3>温度{{temperature}}℃</h3>

<div></div>

<p><ahref="#"th:href="@{/shenwen?status=0}"class="btnbtn-primary"role="button