效果
![text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEwNjMzNA==,size_16,color_FFFFFF,t_70)](https://i-blog.csdnimg.cn/blog_migrate/531993c0e43e67ef1295a903ffe574d0.png)
demo.html
<html>
<head>
<meta charset="UTF-8">
<title>数据大屏</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<header>
物联网平台数据统计page
<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
</header>
<div id="page">
<div class="center_bot">
<table class="panel-table" bordercolor="#0d48e0" border="1">
<thead bgcolor="#0e4ae0" align="center">
<tr height="40">
<th colspan="6"><img src="images/icon04.png" /> 监控列表</th>
</tr>
</thead>
<tbody>
<tr class="aaa" align="center">
<td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{
{
item.categories }}</td>
</tr>
<div height="168px">
<tr v-for="point in factory" :key="point.pointId" class="aaa" style="font-size: 16px;" align="center">
<td>{
{
point.enterpriseName}}</td>
<td>{
{
point.pointName}}</td>
<td>
<div v-if="point.isErrorType==0">无</div>
<div v-if="point.isErrorType==1"><a style="color: #FF6F05;">断线</div>
<div v-if="point.isErrorType==2"><a style="color:#FF0000 ;">超标</div>
<div v-if="point.isErrorType==3"><a style="color:#FF6F05 ;">异常</div>
<div v-if="point.isErrorType==4"><a style="color: #00F6FF;">正常</a></div>
</td>
<td width="250">
<button class="b1 click_pop" @click="goWarnData(point.pointId)">超标数据</button>
<button class