<template>
|
<div class="wulianbox">
|
<el-card class="box">
|
<div style="margin:5px">当前时间</div>
|
<div style="margin:2px">
|
<span>{{ syear }}</span>年<span>{{ smonth }}</span>月<span>{{ sday }}</span>日<span
|
style="margin-left:50px">{{ shour }} : {{ smi }}: {{ sec }}</span>
|
</div>
|
</el-card>
|
<el-collapse v-model="activeName" accordion style="margin-top:5px;height:100%">
|
<el-collapse-item title="交通监测" name="1">
|
<el-row style="width:100%;padding:5px">
|
<el-col :span="8">
|
11
|
</el-col>
|
<el-col :span="8">11
|
</el-col>
|
<el-col :span="8">
|
<el-button @click="showData(scope.row, scope.$index)" size="small">添加摄像头</el-button>
|
</el-col>
|
</el-row>
|
<el-table :data="tabledata" border size="mini"
|
style="width: 100%;background-color: transparent;margin-top:10px" rowKey="gid">
|
<el-table-column prop="xzq" header-align="center" align="center" label="监控名称">
|
</el-table-column>
|
<el-table-column prop="ydmj" header-align="center" align="center" label="监控类型">
|
</el-table-column>
|
<el-table-column prop="ssgm" header-align="center" align="center" label="监测点">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" width="60" label="状态"><template
|
slot-scope="scope">
|
<el-switch v-model="scope.row.status"> </el-switch>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
<el-collapse-item title="气象监测" name="2">
|
<el-row style="width:100%;padding:5px">
|
<el-col :span="12">
|
11
|
</el-col>
|
<el-col :span="12">11
|
</el-col>
|
</el-row>
|
|
<el-table :data="tabledata2" border size="mini"
|
style="width: 100%;background-color: transparent;margin-top:10px" rowKey="gid">
|
<el-table-column prop="xzq" header-align="center" align="center" label="监测点">
|
</el-table-column>
|
<el-table-column prop="ydmj" header-align="center" width="60" align="center" label="气温">
|
</el-table-column>
|
<el-table-column prop="ssgm" header-align="center" width="60" align="center" label="气压">
|
</el-table-column>
|
<el-table-column prop="ssgm" header-align="center" width="60" align="center" label="湿度">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" width="60" label="状态"><template
|
slot-scope="scope">
|
<el-switch v-model="scope.row.status"> </el-switch>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
<el-collapse-item title="市政设施监测" name="3"></el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
tabledata: [],
|
tabledata2: [],
|
timer: null,
|
|
activeName: "1",
|
syear: "2022",
|
smonth: "7",
|
sday: "13",
|
shour: "13",
|
smi: "20",
|
sec: "00"
|
}
|
},
|
mounted() {
|
let that = this;
|
this.timer = setInterval(res => {
|
let date = new Date();
|
that.syear = date.getFullYear();
|
that.smonth = date.getMonth() + 1;
|
that.sday = date.getDate();
|
that.shour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
|
that.smi = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
|
that.sec = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
|
}, 1000);
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.box {
|
background: rgba(121, 121, 121, 0.5) !important;
|
border: 0px;
|
margin: 2px;
|
padding: 5px;
|
color: white;
|
font-size: large;
|
font-weight: bold;
|
|
|
|
span {
|
color: rgb(233, 178, 0);
|
margin: 0px 5px
|
}
|
}
|
|
.wulianbox {
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: rgba(240, 250, 254, 0.65);
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(99, 99, 99, 1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
}
|
|
}
|
</style>
|
