|
|
|
|
<template>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="centerImg"></div>
|
|
|
|
|
<BoardTopNav nowMenu="3"></BoardTopNav>
|
|
|
|
|
<div class="leftMenu">
|
|
|
|
|
<div v-for="i in 10" class="item">
|
|
|
|
|
<span>温度传感器</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div ref="right" class="right">
|
|
|
|
|
<div ref="search" class="search">
|
|
|
|
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
|
|
|
|
<el-form-item label="传感器编号">
|
|
|
|
|
<el-input v-model="form.data1" placeholder="传感器编号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="传感器名称">
|
|
|
|
|
<el-input v-model="form.data2" placeholder="传感器名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="采集时间">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="form.data3"
|
|
|
|
|
placeholder="选择日期时间"
|
|
|
|
|
type="datetime">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
|
|
<el-button @click="onSubmit">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div :style="{height:maxHeight+'px'}" class="table">
|
|
|
|
|
<el-table
|
|
|
|
|
v-if='tableShow'
|
|
|
|
|
:cell-style="setStyle"
|
|
|
|
|
:data="tableData"
|
|
|
|
|
:header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
|
|
|
|
|
:max-height="maxHeight">
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="序号"
|
|
|
|
|
prop="data1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="传感器ID"
|
|
|
|
|
prop="data2">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="传感器名称"
|
|
|
|
|
prop="data3">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="标号"
|
|
|
|
|
prop="data4">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="温度"
|
|
|
|
|
prop="data4">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="排名"
|
|
|
|
|
prop="data6">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="湿度"
|
|
|
|
|
prop="data7">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="压力"
|
|
|
|
|
prop="data8">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="传感器"
|
|
|
|
|
prop="data9">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<div ref="pagination" style="margin-top: 12px;height: 36px;">
|
|
|
|
|
<el-pagination :total="1000" background layout="prev, pager, next" style="display: inline-block;float:right;">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import BoardTopNav from '@/components/BoardTopNav'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
BoardTopNav
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
tableShow: false,
|
|
|
|
|
form: {
|
|
|
|
|
data1: '',
|
|
|
|
|
data2: '',
|
|
|
|
|
data3: null
|
|
|
|
|
},
|
|
|
|
|
maxHeight: 0,
|
|
|
|
|
tableData: [
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: 'data1',
|
|
|
|
|
data2: 'data2',
|
|
|
|
|
data3: 'data3',
|
|
|
|
|
data4: 'data4',
|
|
|
|
|
data5: 'data5',
|
|
|
|
|
data6: 'data6',
|
|
|
|
|
data7: 'data7',
|
|
|
|
|
data8: 'data8',
|
|
|
|
|
data9: 'data9',
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.maxHeight = this.$refs.right.clientHeight - this.$refs.search.clientHeight - this.$refs.pagination.clientHeight - 12
|
|
|
|
|
this.tableShow = true
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
setStyle(e) {
|
|
|
|
|
if (e.rowIndex % 2 === 0) {
|
|
|
|
|
return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
|
|
|
|
|
} else {
|
|
|
|
|
return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.container {
|
|
|
|
|
background-image: url("~@/assets/board/equipmentMonitoring/bg.jpg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh);
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.leftMenu::-webkit-scrollbar {
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.leftMenu {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 14%;
|
|
|
|
|
height: 84%;
|
|
|
|
|
top: 12%;
|
|
|
|
|
left: 2%;
|
|
|
|
|
padding: 1vw;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
background-image: url("~@/assets/board/equipmentMonitoring/item.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 12vw;
|
|
|
|
|
height: 5.1vw;
|
|
|
|
|
margin-bottom: 1vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 44%;
|
|
|
|
|
line-height: 5.1vw;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
color: #f1f3f5;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 78.5%;
|
|
|
|
|
height: 84%;
|
|
|
|
|
top: 12%;
|
|
|
|
|
left: 19%;
|
|
|
|
|
|
|
|
|
|
.search {
|
|
|
|
|
/deep/ .el-form-item__label {
|
|
|
|
|
color: #25bffc !important;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-input__inner {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
border-color: #25bffc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-button--default {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
color: #25bffc;
|
|
|
|
|
border-color: #25bffc;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table th.el-table__cell.is-leaf {
|
|
|
|
|
border-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table tr {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table td.el-table__cell {
|
|
|
|
|
border-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table::before {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th {
|
|
|
|
|
color: #05ecf3;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
