横向展示:通过设置div的宽度及display:inline行内元素展示,从而实现先横向,再纵向的分布
v-for: v-for="(item, index) in list" ,迭代对象数组,list是进行迭代的数组,(item, index)是迭代出的数组,数组中的每一个元素都是类的对象,item为数值,index为索引
<template>
<div class="app-container">
<div class="filter-container">
<div style="width: 1200px">
//设置的单个列表大小及显示方式,通过inline横向展示
<fieldset
style="width: 200px; display: inline"
v-for="(item, index) in list"
:key="item"
:label="item"
:value="item"
>
<legend>
//通过v-if判断数值对比,设置颜色状态
<el-tooltip
effect="dark"
placement="top"
v-if="
list[index].nowTemp >= list[index].temp ||
list[index].nowHum >= list[index].hum
"
>
//鼠标移动到指示灯时可以看见的对应信息
<div slot="content">
设备名称:{{ list[index].name }}
<br />
预警温度:{{ list[index].temp }}
<br />
预警湿度:{{ list[index].hum }}
<br />
位置:{{ list[index].position }}
</div>
//设置指示灯的位置及颜色
<div
style="float: left; margin-left: 80px"
:class="stateColor[2]"
></div>
</el-tooltip>
<el-tooltip
effect="dark"
placement="top"
v-else-if="
list[index].nowTemp == null || list[index].nowHum == null
"
>
<div slot="content">
设备名称:{{ list[index].name }}
<br />
预警温度:{{ list[index].temp }}
<br />
预警湿度:{{ list[index].hum }}
<br />
位置:{{ list[index].position }}
</div>
<div
style="float: left; margin-left: 80px"
:class="stateColor[0]"
></div>
</el-tooltip>
<el-tooltip effect="dark" placement="top" v-else>
<div slot="content">
设备名称:{{ list[index].name }}
<br />
预警温度:{{ list[index].temp }}
<br />
预警湿度:{{ list[index].hum }}
<br />
位置:{{ list[index].position }}
</div>
<div
style="float: left; margin-left: 80px"
:class="stateColor[1]"
></div>
</el-tooltip>
</legend>
<el-form
:model="renew"
label-width="100px"
style="border-radius: 0px; margin: 0"
>
<el-form-item
label-width="60px"
label="编号:"
prop="no"
style="background-color: #b4b5b529"
>
<span>{{ list[index].no }}</span>
<!-- <el-input
v-model="list[index].no"
style="width: 80px"
:disabled="true"
/> -->
</el-form-item>
<el-form-item
label-width="60px"
label="温度:"
prop="temp"
style="background-color: #b4b5b529"
>
<span v-if="list[index].nowTemp != null"
>{{ list[index].nowTemp }}℃</span
>
<span v-else>空值</span>
<!-- <el-input
v-model="list[index].nowTemp"
style="width: 80px"
:disabled="true"
/> -->
</el-form-item>
<el-form-item
label-width="60px"
label="湿度:"
prop="hum"
style="background-color: #b4b5b529"
>
<span v-if="list[index].nowHum != null"
>{{ list[index].nowHum }}%</span
>
<span v-else>空值</span>
</el-form-item>
</el-form>
</fieldset>
</div>
</div>
</div>
</template>
//设置警示灯的大小样式
<style>
.el-form-item {
margin-bottom: 0px;
}
#group {
display: flex;
justify-content: space-around;
width: 800px;
}
.green {
width: 20px;
height: 20px;
background: #009405;
border: 1px solid #009405;
border-radius: 50%;
margin: 0 auto;
}
.red {
width: 20px;
height: 20px;
background: #be1508;
border: 1px solid #be1508;
border-radius: 50%;
margin: 0 auto;
}
.yellow {
width: 20px;
height: 20px;
background: #e7ff13d7;
border: 1px solid #e7ff13d7;
border-radius: 50%;
margin: 0 auto;
}
</style>
<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Cookies from "js-cookie";
const calendarTypeOptions = [
{ key: "CN", display_name: "China" },
{ key: "US", display_name: "USA" },
{ key: "JP", display_name: "Japan" },
{ key: "EU", display_name: "Eurozone" },
];
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name;
return acc;
}, {});
export default {
name: "MainTable",
components: { Pagination },
directives: { waves },
data() {
return {
list: [],
url: process.env.VUE_APP_BASE_API,
no: [],
temp: "",
hum: "",
tempList: [],
humList: [],
count: "",
countList: [],
stateColor: ["yellow", "green", "red"],
};
},
created() {
this.getAll();
},
methods: {
// 获取总数
getAll() {
var self = this;
request({
url: self.url + "/api/Main/GetAll",
method: "get",
headers: {
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
self.list = response;
});
},
// 获取温度
getTemp() {
var self = this;
request({
url:self.url + "/api/Main/GetTemp",
method: "get",
headers: {
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
self.tempList = response;
});
},
// 获取湿度
getHum() {
var self = this;
request({
url: self.url + "/api/Main/GetHum",
method: "get",
headers: {
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
self.humList = response;
});
},
//得到机器编号
getCount() {
var self = this;
request({
url: self.url + "/api/Main/GetCount",
method: "get",
headers: {
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
self.countList = response;
});
},
},
};
</script>
效果展示