You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xy-frontend/src/views/weather/index.vue

390 lines
12 KiB
Vue

2 years ago
<template>
<div class="weatherBox">
<div class="weatherContain">
<leftTree ref="sideTree"></leftTree>
<div class="rightTable">
<div class="dataBox">
<div class="fatherTableShowBox" v-if="!childFlag">
<el-table
:data="tableData"
style="width: 100%"
height="calc(100% - 40px)"
>
<el-table-column prop="line" label="线路"> </el-table-column>
<el-table-column prop="pole" label="杆塔"> </el-table-column>
<el-table-column prop="terminal" label="终端"> </el-table-column>
<el-table-column prop="time" label="时间"> </el-table-column>
<el-table-column prop="temperature" label="温度(℃)">
</el-table-column>
<el-table-column prop="humidity" label="湿度(%RH)">
</el-table-column>
<el-table-column prop="windSpeed" label="瞬时风速(m/s)">
</el-table-column>
<el-table-column prop="windDirection" label="瞬时风向(°)">
</el-table-column>
<el-table-column prop="rainfall" label="雨量(mm/hour)">
</el-table-column>
<el-table-column prop="pressure" label="气压(hPa(百帕))">
</el-table-column>
<el-table-column prop="sunlight" label="日照(W/m2)">
</el-table-column>
</el-table>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="page"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper,total"
:total="total"
>
</el-pagination>
</div>
</div>
<div class="childBox" v-else>
<div class="searchBox" ref="searchref">
<el-form
:inline="true"
:model="formdata"
class="demo-form-inline"
>
<el-form-item label="开始日期">
<el-date-picker
v-model="formdata.starttime"
type="date"
placeholder="开始日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="formdata.endtime"
type="date"
placeholder="结束日期"
class="ml10"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit"></el-button>
</el-form-item>
</el-form>
</div>
<div class="childTableShowBox">
<el-table :data="childTableDate" style="width: 100%">
<el-table-column prop="time" label="时间"></el-table-column>
<el-table-column
prop="temperature"
label="温度(℃)"
></el-table-column>
<el-table-column
prop="humidity"
label="湿度(%RH)"
></el-table-column>
<el-table-column
prop="windSpeed"
label="瞬时风速(m/s)"
></el-table-column>
<el-table-column
prop="windDirection"
label="瞬时风向(°)"
></el-table-column>
<el-table-column
prop="rainfall"
label="雨量(mm/hour)"
></el-table-column>
<el-table-column
prop="pressure"
label="气压(hPa(百帕))"
></el-table-column>
<el-table-column
prop="sunlight"
label="日照(W/m2)"
></el-table-column>
<el-table-column
prop="minuteAverageWindSpeed"
label="1分钟平均风速(m/s)"
></el-table-column>
<el-table-column
prop="minuteAverageWindDirection"
label="1分钟平均风向(°)"
></el-table-column>
<el-table-column
prop="tenMinuteAverageWindSpeed"
label="10分钟平均风速(m/s)"
></el-table-column>
<el-table-column
prop="tenMinuteAverageWindDirection"
label="10分钟平均风向(°)"
></el-table-column>
<el-table-column
prop="tenMinuteMaxWindSpeed"
label="10分钟最大风速(m/s)"
></el-table-column>
</el-table>
</div>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="page"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper,total"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import leftTree from "../../fubingCommon/leftTree";
export default {
name: "weather",
components: {
leftTree,
},
data() {
return {
msg: "",
childFlag: false,
tableData: [],
childTableDate: [],
formdata: {},
page: 1, // 当前页数
pageSize: 20, // 每页数量
total: 0, //总条数
};
},
created() {
var that = this;
document.onkeydown = function (e) {
var key = window.event.keyCode;
if (key === 13) {
that.onSubmit(); // 触发事件
}
};
},
mounted() {
this.$set(
this.formdata,
"starttime",
new Date(new Date().toLocaleDateString()).getTime()
);
this.$set(this.formdata, "endtime", new Date().getTime());
},
methods: {
getCurrentData(data) {
console.log("执行父组件", data);
if (data.dyValue) {
console.log("电压");
this.msg = "公司所有数据";
this.childFlag = false;
this.tableData = [
{
line: "线路A",
pole: "杆塔1",
terminal: "终端1",
time: "2023-03-15 08:00:00",
temperature: "25℃",
humidity: "60%",
windSpeed: "0.5m/s",
windDirection: "120°",
rainfall: "0mm/hour",
pressure: "1015hPa",
sunlight: "500W/m2",
},
{
line: "线路B",
pole: "杆塔2",
terminal: "终端2",
time: "2023-03-15 09:00:00",
temperature: "23℃",
humidity: "70%",
windSpeed: "0.3m/s",
windDirection: "90°",
rainfall: "0mm/hour",
pressure: "1013hPa",
sunlight: "350W/m2",
},
{
line: "线路C",
pole: "杆塔3",
terminal: "终端3",
time: "2023-03-15 10:00:00",
temperature: "27℃",
humidity: "55%",
windSpeed: "0.7m/s",
windDirection: "60°",
rainfall: "0mm/hour",
pressure: "1017hPa",
sunlight: "650W/m2",
},
{
line: "线路D",
pole: "杆塔4",
terminal: "终端4",
time: "2023-03-15 11:00:00",
temperature: "24℃",
humidity: "65%",
windSpeed: "0.4m/s",
windDirection: "30°",
rainfall: "0mm/hour",
pressure: "1016hPa",
sunlight: "450W/m2",
},
{
line: "线路E",
pole: "杆塔5",
terminal: "终端5",
time: "2023-03-15 12:00:00",
temperature: "28℃",
humidity: "50%",
windSpeed: "0.6m/s",
windDirection: "90°",
rainfall: "0mm/hour",
pressure: "1018hPa",
sunlight: "750W/m2",
},
];
} else if (data.bsManufacturer) {
this.msg = "杆塔下所有数据";
this.childFlag = false;
this.tableData = [
{
line: "线路F",
pole: "杆塔6",
terminal: "终端6",
time: "2023-03-15 13:00:00",
temperature: "26℃",
humidity: "60%",
windSpeed: "0.5m/s",
windDirection: "150°",
rainfall: "0mm/hour",
pressure: "1017hPa",
sunlight: "600W/m2",
},
{
line: "线路G",
pole: "杆塔7",
terminal: "终端7",
time: "2023-03-15 14:00:00",
temperature: "29℃",
humidity: "45%",
windSpeed: "0.7m/s",
windDirection: "180°",
rainfall: "mm/hour, ",
pressure: "184hPa百帕 ",
sunlight: "789W/m²",
},
{
line: "线路H",
pole: "杆塔8 ",
terminal: "终端8 ",
time: "24-Mar-23 16:45 ",
temperature: "24℃摄氏度 ",
humidity: "78% (百分比) ",
windSpeed: "1.8m/s米/秒) ",
windDirection: "88 °(度) ",
rainfall: "至今无数据 ",
pressure: "184hPa百帕 ",
sunlight: " 无数据 ",
comment: " 天气晴朗,适合户外活动。",
},
];
} else {
console.log("杆塔");
this.msg = "装置当天数据";
this.childFlag = true;
this.childTableDate = [
{
time: "2023-03-15 08:00:00",
temperature: "25℃",
humidity: "60%",
windSpeed: "0.5m/s",
windDirection: "120°",
rainfall: "0mm/hour",
pressure: "1015hPa",
sunlight: "500W/m2",
minuteAverageWindSpeed: "无数据",
minuteAverageWindDirection: "无数据",
tenMinuteAverageWindSpeed: "无数据",
tenMinuteAverageWindDirection: "无数据",
tenMinuteMaxWindSpeed: "无数据",
},
{
time: "2023-03-15 09:00:00",
temperature: "23℃",
humidity: "70%",
windSpeed: "0.3m/s",
windDirection: "90°",
rainfall: "0mm/hour",
pressure: "1013hPa",
sunlight: "350W/m2",
minuteAverageWindSpeed: "无数据",
minuteAverageWindDirection: "无数据",
tenMinuteAverageWindSpeed: "无数据",
tenMinuteAverageWindDirection: "无数据",
tenMinuteMaxWindSpeed: "无数据",
},
];
}
},
onSubmit() {},
//点击分页
handleCurrentChange(val) {
this.page = val;
// this.picList = [];
// this.getPicData();
},
//每页条数
handleSizeChange(val) {
this.pageSize = val;
//this.getPicData();
},
},
};
</script>
<style lang="less">
.weatherBox {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #fff;
.weatherContain {
display: flex;
height: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.rightTable {
display: flex;
width: 100%;
height: 100%;
flex: 1;
overflow: hidden;
border-left: 1px solid #ddd;
.dataBox {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #fff;
}
.fatherTableShowBox {
height: calc(100% - 0px);
}
.childBox {
height: calc(100% - 50px);
.childTableShowBox {
height: calc(100% - 50px);
}
}
}
}
</style>