优化覆冰微气象展示河南
fanluyan
7 months ago
parent
4c8da93533
commit
35bf58297d
@ -0,0 +1,198 @@
|
|||||||
|
<template>
|
||||||
|
<div class="icingBox">
|
||||||
|
<div class="icingContain">
|
||||||
|
<leftTree ref="sideTree"></leftTree>
|
||||||
|
<div class="rightTable">
|
||||||
|
<div class="dataBox">
|
||||||
|
<div class="childBox">
|
||||||
|
<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
|
||||||
|
@change="changedate"
|
||||||
|
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-item>
|
||||||
|
<el-button type="primary" @click="exportExcl"
|
||||||
|
>导出数据</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
v-if="!echartsShow"
|
||||||
|
type="primary"
|
||||||
|
@click="lookLineCharts"
|
||||||
|
>曲线图</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-if="echartsShow"
|
||||||
|
type="primary"
|
||||||
|
@click="lookTableCharts"
|
||||||
|
>列表数据</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import leftTree from "../components/leftTree.vue";
|
||||||
|
import {
|
||||||
|
LeadPullJoggle,
|
||||||
|
leadpullsListJoggle,
|
||||||
|
exportJoggle,
|
||||||
|
} from "@/utils/api/iceApi";
|
||||||
|
export default {
|
||||||
|
name: "icing",
|
||||||
|
components: {
|
||||||
|
leftTree,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
echartsShow: false,
|
||||||
|
formdata: {},
|
||||||
|
paramsData: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
endtime(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
const date = new Date(newVal);
|
||||||
|
date.setHours(23);
|
||||||
|
date.setMinutes(59);
|
||||||
|
date.setSeconds(59);
|
||||||
|
this.formdata.endtime = date.getTime();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
var that = this;
|
||||||
|
document.onkeydown = function (e) {
|
||||||
|
var key = window.event.keyCode;
|
||||||
|
if (key === 13) {
|
||||||
|
that.onSubmit(); // 触发事件
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.$set(
|
||||||
|
this.formdata,
|
||||||
|
"starttime",
|
||||||
|
new Date(new Date().toLocaleDateString()).getTime()
|
||||||
|
);
|
||||||
|
const currentDate = new Date(); // 获取当前时间
|
||||||
|
currentDate.setHours(23); // 设置小时为23
|
||||||
|
currentDate.setMinutes(59); // 设置分钟为59
|
||||||
|
currentDate.setSeconds(59); // 设置秒数为59
|
||||||
|
this.$set(this.formdata, "endtime", currentDate.getTime());
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
//结束日期
|
||||||
|
changedate() {
|
||||||
|
console.log(new Date(this.formdata.endtime));
|
||||||
|
const currentDate = new Date(this.formdata.endtime); // 获取当前时间
|
||||||
|
currentDate.setHours(23); // 设置小时为23
|
||||||
|
currentDate.setMinutes(59); // 设置分钟为59
|
||||||
|
currentDate.setSeconds(59); // 设置秒数为59
|
||||||
|
this.formdata.endtime = currentDate;
|
||||||
|
console.log("结束时间", this.formdata.endtime);
|
||||||
|
},
|
||||||
|
//点击左侧tree 获取信息
|
||||||
|
getCurrentData(data) {
|
||||||
|
console.log("执行父组件", data);
|
||||||
|
this.paramsData = data;
|
||||||
|
let pullParams;
|
||||||
|
console.log(data);
|
||||||
|
const sTime = Math.floor(this.formdata.starttime / 1000);
|
||||||
|
const eTime = Math.floor(this.formdata.endtime / 1000);
|
||||||
|
if (data.dyValue) {
|
||||||
|
console.log("电压-公司");
|
||||||
|
pullParams = {
|
||||||
|
devType: "2",
|
||||||
|
dyId: data.id,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
start: sTime,
|
||||||
|
end: eTime,
|
||||||
|
};
|
||||||
|
this.getIcingData(pullParams);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSubmit() {},
|
||||||
|
exportExcl() {
|
||||||
|
const sTime = Math.floor(this.formdata.starttime / 1000);
|
||||||
|
const eTime = Math.floor(this.formdata.endtime / 1000);
|
||||||
|
window.location.href =
|
||||||
|
"/api/xymanager/leadpulls/export?+" +
|
||||||
|
"lineId=" +
|
||||||
|
this.paramsData.lineid +
|
||||||
|
"&termId=" +
|
||||||
|
this.paramsData.id +
|
||||||
|
"&towerId=" +
|
||||||
|
this.paramsData.towerid +
|
||||||
|
"&start=" +
|
||||||
|
sTime +
|
||||||
|
"&end=" +
|
||||||
|
eTime;
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
lookTableCharts() {},
|
||||||
|
//查看折线图
|
||||||
|
lookLineCharts() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.icingBox {
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
height: calc(100% - 24px);
|
||||||
|
padding: 12px 12px;
|
||||||
|
background: #fff;
|
||||||
|
.icingContain {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,914 @@
|
|||||||
|
<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%"
|
||||||
|
v-loading="loading"
|
||||||
|
height="calc(100% - 40px)"
|
||||||
|
>
|
||||||
|
<el-table-column prop="lineName" label="线路"> </el-table-column>
|
||||||
|
<el-table-column prop="towerName" label="杆塔"> </el-table-column>
|
||||||
|
<el-table-column prop="cmdid" label="终端"> </el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="updateTime" label="时间">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.lastWeathers !== null">
|
||||||
|
{{
|
||||||
|
$moment(scope.row.lastWeathers.updateTime * 1000).format(
|
||||||
|
"YYYY-MM-DD HH:mm:ss"
|
||||||
|
)
|
||||||
|
}}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="温度(℃)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.lastWeathers !== null">{{
|
||||||
|
scope.row.lastWeathers.airTemperature.toFixed(1)
|
||||||
|
}}</span>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="humidity" label="湿度(%RH)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.lastWeathers !== null"
|
||||||
|
><span
|
||||||
|
v-if="
|
||||||
|
scope.row.lastWeathers.humidity != 65535 &&
|
||||||
|
scope.row.lastWeathers.humidity != 255
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ scope.row.lastWeathers.humidity.toFixed(1) }}</span
|
||||||
|
><span v-else> - </span></span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="maxWindSpeed" label="最大风速(m/s)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.lastWeathers !== null">{{
|
||||||
|
scope.row.lastWeathers.maxWindSpeed.toFixed(1)
|
||||||
|
}}</span>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="windDirection" label="瞬时风向(°)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.lastWeathers !== null &&
|
||||||
|
scope.row.lastWeathers.windDirection !== null
|
||||||
|
"
|
||||||
|
>{{ scope.row.lastWeathers.windDirection.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="precipitation" label="雨量(mm/hour)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.lastWeathers !== null &&
|
||||||
|
scope.row.lastWeathers.precipitation != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.lastWeathers.precipitation.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="airPressure" label="气压(hPa(百帕))">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.lastWeathers !== null &&
|
||||||
|
scope.row.lastWeathers.airPressure != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.lastWeathers.airPressure.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="radiationIntensity" label="日照(W/m2)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.lastWeathers !== null"
|
||||||
|
><span
|
||||||
|
v-if="
|
||||||
|
scope.row.lastWeathers.radiationIntensity != 255 &&
|
||||||
|
scope.row.lastWeathers.radiationIntensity != 65535
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
scope.row.lastWeathers.radiationIntensity.toFixed(0)
|
||||||
|
}}</span
|
||||||
|
><span v-else> - </span></span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="moreDataClick(scope.row)"
|
||||||
|
v-if="scope.row.lastWeathers !== null"
|
||||||
|
>更多历史数据</el-button
|
||||||
|
>
|
||||||
|
<span v-else> 没有数据</span>
|
||||||
|
</template>
|
||||||
|
</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
|
||||||
|
@change="changedate"
|
||||||
|
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="termalBox">
|
||||||
|
<p>
|
||||||
|
<span class="text"
|
||||||
|
>线路:{{ childMsg.lineName || childMsg.lineName }}</span
|
||||||
|
>
|
||||||
|
<span class="text"
|
||||||
|
>杆塔:{{ childMsg.towerName || childMsg.name }}</span
|
||||||
|
>
|
||||||
|
<span class="text">终端:{{ childMsg.cmdid }}</span>
|
||||||
|
</p>
|
||||||
|
<div class="gropBtn">
|
||||||
|
<el-button type="text" @click="onWdLine" icon="el-icon-odometer"
|
||||||
|
>温度趋势</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="onSdLine"
|
||||||
|
icon="el-icon-heavy-rain"
|
||||||
|
>湿度趋势</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="echartsBox">
|
||||||
|
<div class="btnbox">
|
||||||
|
<el-button type="primary" @click="onWdLine"
|
||||||
|
>温度变化趋势</el-button
|
||||||
|
>
|
||||||
|
<el-button type="primary" @click="onSdLine"
|
||||||
|
>湿度变化趋势</el-button
|
||||||
|
>
|
||||||
|
<el-button type="primary" @click="onHidden">隐藏图表</el-button>
|
||||||
|
</div>
|
||||||
|
<div id="wDechart" class="chartClass" v-show="wdFlag"></div>
|
||||||
|
<div id="sDechart" class="chartClass" v-show="sdFlag"></div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="childTableShowBox">
|
||||||
|
<el-table
|
||||||
|
:data="childTableDate"
|
||||||
|
style="width: 100%"
|
||||||
|
v-loading="loading"
|
||||||
|
height="calc(100% - 2px)"
|
||||||
|
>
|
||||||
|
<el-table-column prop="updateTime" label="时间" width="138px">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.updateTime">
|
||||||
|
{{
|
||||||
|
$moment(scope.row.updateTime * 1000).format(
|
||||||
|
"YYYY-MM-DD HH:mm:ss"
|
||||||
|
)
|
||||||
|
}}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="airTemperature" label="温度(℃)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.airTemperature !== null &&
|
||||||
|
scope.row.airTemperature != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.airTemperature.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="humidity" label="湿度(%RH)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.humidity !== null && scope.row.humidity != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.humidity.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="maxWindSpeed" label="瞬时风速(m/s)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.maxWindSpeed !== null &&
|
||||||
|
scope.row.maxWindSpeed != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.maxWindSpeed.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template></el-table-column
|
||||||
|
>
|
||||||
|
<el-table-column prop="windDirection" label="瞬时风向(°)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.windDirection !== null &&
|
||||||
|
scope.row.windDirection != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.windDirection.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="precipitation" label="雨量(mm/hour)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.precipitation !== null &&
|
||||||
|
scope.row.precipitation != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.precipitation.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="airPressure" label="气压(hPa(百帕))">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.airPressure !== null &&
|
||||||
|
scope.row.airPressure != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.airPressure.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="radiationIntensity" label="日照(W/m2)">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.radiationIntensity !== null &&
|
||||||
|
scope.row.radiationIntensity != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.radiationIntensity.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="avgWindDir1min"
|
||||||
|
label="1分钟平均风速(m/s)"
|
||||||
|
></el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="avgWindSpeed1min"
|
||||||
|
label="1分钟平均风向(°)"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
scope.row.avgWindSpeed1min !== null &&
|
||||||
|
scope.row.avgWindSpeed1min != 255
|
||||||
|
"
|
||||||
|
>{{ scope.row.avgWindSpeed1min.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="avgWindSpeed10min"
|
||||||
|
label="10分钟平均风速(m/s)"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span> {{ scope.row.avgWindSpeed10min.toFixed(1) }} </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="avgWindDir10min"
|
||||||
|
label="10分钟平均风向(°)"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.avgWindDir10min !== 65535">
|
||||||
|
{{ scope.row.avgWindDir10min.toFixed(1) }}</span
|
||||||
|
>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="maxWindSpeed" label="10分钟最大风速(m/s)"
|
||||||
|
><template slot-scope="scope">
|
||||||
|
<span> {{ scope.row.maxWindSpeed.toFixed(1) }} </span>
|
||||||
|
</template></el-table-column
|
||||||
|
>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="pageNation">
|
||||||
|
<el-pagination
|
||||||
|
@current-change="handlechildCurrentChange"
|
||||||
|
@size-change="handlechildSizeChange"
|
||||||
|
:current-page="childpage"
|
||||||
|
:page-size="childpageSize"
|
||||||
|
layout="sizes, prev, pager, next, jumper,total"
|
||||||
|
:total="childtotal"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="温度折线图" :visible.sync="wdFlag">
|
||||||
|
<div id="wDechart" class="chartClass"></div>
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog title="湿度折线图" :visible.sync="sdFlag">
|
||||||
|
<div id="sDechart" class="chartClass"></div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import leftTree from "../components/leftTree";
|
||||||
|
import { weatherJoggle, weatherListJoggle } from "@/utils/api/iceApi";
|
||||||
|
export default {
|
||||||
|
name: "weather",
|
||||||
|
components: {
|
||||||
|
leftTree,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
childFlag: false,
|
||||||
|
tableData: [],
|
||||||
|
childTableDate: [],
|
||||||
|
formdata: {},
|
||||||
|
page: 1, // 当前页数
|
||||||
|
pageSize: 20, // 每页数量
|
||||||
|
total: 0, //总条数
|
||||||
|
|
||||||
|
paramsData: "",
|
||||||
|
childpage: 1, // 当前页数
|
||||||
|
childpageSize: 20, // 每页数量
|
||||||
|
childtotal: 0, //总条数
|
||||||
|
childParma: "",
|
||||||
|
childMsg: "",
|
||||||
|
echartsData: "", //echarts数据
|
||||||
|
wdFlag: false,
|
||||||
|
sdFlag: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
var that = this;
|
||||||
|
document.onkeydown = function (e) {
|
||||||
|
var key = window.event.keyCode;
|
||||||
|
if (key === 13) {
|
||||||
|
that.onSubmit(); // 触发事件
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
endtime(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
const date = new Date(newVal);
|
||||||
|
date.setHours(23);
|
||||||
|
date.setMinutes(59);
|
||||||
|
date.setSeconds(59);
|
||||||
|
this.formdata.endtime = date.getTime();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
//this.getWeatherData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCurrentData(data) {
|
||||||
|
console.log("执行父组件", data);
|
||||||
|
this.paramsData = data;
|
||||||
|
let weatherParams;
|
||||||
|
console.log(data);
|
||||||
|
if (data.dyValue) {
|
||||||
|
console.log("电压-公司");
|
||||||
|
weatherParams = {
|
||||||
|
devType: "3",
|
||||||
|
dyId: data.id,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
} else if (data.bsManufacturer) {
|
||||||
|
console.log("线路-电压");
|
||||||
|
weatherParams = {
|
||||||
|
devType: "3",
|
||||||
|
lineId: data.id,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
} else {
|
||||||
|
console.log("装置-杆塔");
|
||||||
|
// weatherParams = {
|
||||||
|
// pageNum: 1,
|
||||||
|
// pageSize: this.pageSize,
|
||||||
|
// towerId: data.towerid,
|
||||||
|
// };
|
||||||
|
this.childpage = 1;
|
||||||
|
this.moreDataClick(data);
|
||||||
|
// this.getWeatherData(weatherParams);
|
||||||
|
}
|
||||||
|
//this.getAllData(data);
|
||||||
|
},
|
||||||
|
getWeatherData(data) {
|
||||||
|
console.log(data);
|
||||||
|
this.childFlag = false;
|
||||||
|
this.loading = true;
|
||||||
|
weatherJoggle(data)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.tableData = res.data.list;
|
||||||
|
this.total = res.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//点击分页
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.page = val;
|
||||||
|
let data = this.paramsData;
|
||||||
|
let weatherParams;
|
||||||
|
this.tableData = [];
|
||||||
|
if (data.dyValue) {
|
||||||
|
console.log("电压-公司");
|
||||||
|
weatherParams = {
|
||||||
|
devType: "3",
|
||||||
|
dyId: data.id,
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
} else if (data.bsManufacturer) {
|
||||||
|
console.log("线路-电压");
|
||||||
|
weatherParams = {
|
||||||
|
devType: "3",
|
||||||
|
lineId: data.id,
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
} else {
|
||||||
|
console.log("装置-杆塔");
|
||||||
|
weatherParams = {
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
towerId: data.towerid,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
}
|
||||||
|
//this.getCurrentData(this.paramsData);
|
||||||
|
},
|
||||||
|
//每页条数
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.pageSize = val;
|
||||||
|
this.tableData = [];
|
||||||
|
let data = this.paramsData;
|
||||||
|
let weatherParams;
|
||||||
|
this.tableData = [];
|
||||||
|
if (data.dyValue) {
|
||||||
|
console.log("电压-公司");
|
||||||
|
weatherParams = {
|
||||||
|
devType: "3",
|
||||||
|
dyId: data.id,
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
} else if (data.bsManufacturer) {
|
||||||
|
console.log("线路-电压");
|
||||||
|
weatherParams = {
|
||||||
|
devType: "3",
|
||||||
|
lineId: data.id,
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
} else {
|
||||||
|
console.log("装置-杆塔");
|
||||||
|
weatherParams = {
|
||||||
|
pageNum: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
towerId: data.towerid,
|
||||||
|
};
|
||||||
|
this.getWeatherData(weatherParams);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//点击查看更多历史数据
|
||||||
|
moreDataClick(row) {
|
||||||
|
this.childFlag = true;
|
||||||
|
console.log(row);
|
||||||
|
this.$set(
|
||||||
|
this.formdata,
|
||||||
|
"starttime",
|
||||||
|
new Date(new Date().toLocaleDateString()).getTime()
|
||||||
|
);
|
||||||
|
const currentDate = new Date(); // 获取当前时间
|
||||||
|
currentDate.setHours(23); // 设置小时为23
|
||||||
|
currentDate.setMinutes(59); // 设置分钟为59
|
||||||
|
currentDate.setSeconds(59); // 设置秒数为59
|
||||||
|
this.$set(this.formdata, "endtime", currentDate.getTime());
|
||||||
|
|
||||||
|
this.childParma = row;
|
||||||
|
this.getchildWeatherData(row);
|
||||||
|
},
|
||||||
|
|
||||||
|
//查询时间
|
||||||
|
onSubmit() {
|
||||||
|
this.getchildWeatherData(this.childParma);
|
||||||
|
},
|
||||||
|
getchildWeatherData(row) {
|
||||||
|
this.loading = true;
|
||||||
|
this.childMsg = row;
|
||||||
|
console.log("我是子数据", row);
|
||||||
|
const sTime = Math.floor(this.formdata.starttime / 1000);
|
||||||
|
const eTime = Math.floor(this.formdata.endtime / 1000);
|
||||||
|
weatherListJoggle({
|
||||||
|
// lineId: row.lineId,
|
||||||
|
termId: row.id,
|
||||||
|
towerId: row.towerId,
|
||||||
|
start: sTime,
|
||||||
|
end: eTime,
|
||||||
|
pageNum: this.childpage,
|
||||||
|
pageSize: this.childpageSize,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.childTableDate = res.data.list;
|
||||||
|
this.childtotal = res.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
//获取温度折线图
|
||||||
|
this.getAllData(row);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getAllData(row) {
|
||||||
|
const sTime = Math.floor(this.formdata.starttime / 1000);
|
||||||
|
const eTime = Math.floor(this.formdata.endtime / 1000);
|
||||||
|
weatherListJoggle({
|
||||||
|
// lineId: row.lineId,
|
||||||
|
termId: row.id,
|
||||||
|
towerId: row.towerId,
|
||||||
|
start: sTime,
|
||||||
|
end: eTime,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.echartsData = res.data.list;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onWdLine() {
|
||||||
|
this.wdFlag = true;
|
||||||
|
this.sdFlag = false;
|
||||||
|
//获取温度折线图
|
||||||
|
this.getEchart4(this.echartsData);
|
||||||
|
},
|
||||||
|
onSdLine() {
|
||||||
|
this.wdFlag = false;
|
||||||
|
this.sdFlag = true;
|
||||||
|
this.getEchart5(this.echartsData);
|
||||||
|
},
|
||||||
|
onHidden() {
|
||||||
|
this.wdFlag = false;
|
||||||
|
this.sdFlag = false;
|
||||||
|
},
|
||||||
|
//获取当天告警分类统计
|
||||||
|
getEchart4(wd) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$echarts.init(document.getElementById("wDechart"));
|
||||||
|
this.mywDechart = this.$echarts.init(
|
||||||
|
document.getElementById("wDechart")
|
||||||
|
);
|
||||||
|
console.log(wd);
|
||||||
|
var xData = [];
|
||||||
|
var yData = [];
|
||||||
|
xData = wd.map((item) =>
|
||||||
|
this.$moment(item.updateTime * 1000).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
);
|
||||||
|
yData = wd.map((item) => item.airTemperature);
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
//left: "6%", //图表距离容器左侧多少距离
|
||||||
|
//right: "6%", //图表距离容器右侧侧多少距离
|
||||||
|
bottom: "15%", //图表距离容器上面多少距离
|
||||||
|
//top: "2%", //图表距离容器下面多少距离
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: "温度变化趋势",
|
||||||
|
x: "center", //设置标题位置居中
|
||||||
|
textStyle: {
|
||||||
|
//设置主标题的文字风格
|
||||||
|
color: "#333", //字体颜色
|
||||||
|
fontSize: 16, //文字大小
|
||||||
|
fontWeight: "normal",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
dataView: { readOnly: false },
|
||||||
|
magicType: { type: ["line", "bar"] },
|
||||||
|
restore: {},
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
show: true,
|
||||||
|
realtime: true,
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "inside",
|
||||||
|
realtime: true,
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: {
|
||||||
|
name: "时间", // 坐标轴名称
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: xData,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "温度", // 坐标轴名称
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value} °C",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "温度",
|
||||||
|
symbol: "none",
|
||||||
|
type: "line",
|
||||||
|
data: yData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.mywDechart.setOption(option);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
this.mywDechart.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getEchart5(sd) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$echarts.init(document.getElementById("sDechart"));
|
||||||
|
this.mysDechart = this.$echarts.init(
|
||||||
|
document.getElementById("sDechart")
|
||||||
|
);
|
||||||
|
console.log(sd);
|
||||||
|
var xData = [];
|
||||||
|
var yData = [];
|
||||||
|
xData = sd.map((item) =>
|
||||||
|
this.$moment(item.updateTime * 1000).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
);
|
||||||
|
yData = sd.map((item) => item.humidity);
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
//left: "6%", //图表距离容器左侧多少距离
|
||||||
|
//right: "6%", //图表距离容器右侧侧多少距离
|
||||||
|
bottom: "15%", //图表距离容器上面多少距离
|
||||||
|
//top: "2%", //图表距离容器下面多少距离
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: "湿度变化趋势",
|
||||||
|
x: "center", //设置标题位置居中
|
||||||
|
textStyle: {
|
||||||
|
//设置主标题的文字风格
|
||||||
|
color: "#333", //字体颜色
|
||||||
|
fontSize: 16, //文字大小
|
||||||
|
fontWeight: "normal",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
dataView: { readOnly: false },
|
||||||
|
magicType: { type: ["line", "bar"] },
|
||||||
|
restore: {},
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
show: true,
|
||||||
|
realtime: true,
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "inside",
|
||||||
|
realtime: true,
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: {
|
||||||
|
name: "时间", // 坐标轴名称
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: xData,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "湿度", // 坐标轴名称
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value} %RH",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "湿度",
|
||||||
|
symbol: "none",
|
||||||
|
type: "line",
|
||||||
|
data: yData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.mysDechart.setOption(option);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
this.mysDechart.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changedate() {
|
||||||
|
console.log(new Date(this.formdata.endtime));
|
||||||
|
const currentDate = new Date(this.formdata.endtime); // 获取当前时间
|
||||||
|
currentDate.setHours(23); // 设置小时为23
|
||||||
|
currentDate.setMinutes(59); // 设置分钟为59
|
||||||
|
currentDate.setSeconds(59); // 设置秒数为59
|
||||||
|
this.formdata.endtime = currentDate;
|
||||||
|
console.log("结束时间", this.formdata.endtime);
|
||||||
|
},
|
||||||
|
//点击child分页
|
||||||
|
handlechildCurrentChange(val) {
|
||||||
|
this.childpage = val;
|
||||||
|
this.childTableDate = [];
|
||||||
|
this.getchildWeatherData(this.childParma);
|
||||||
|
},
|
||||||
|
//每页条数child分页
|
||||||
|
handlechildSizeChange(val) {
|
||||||
|
this.childpageSize = val;
|
||||||
|
this.childTableDate = [];
|
||||||
|
this.getchildWeatherData(this.childParma);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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: auto;
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
.el-table .el-table__cell {
|
||||||
|
text-align: center;
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
-ms-user-select: text;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
.dataBox {
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
height: calc(100% - 24px);
|
||||||
|
padding: 12px 12px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.fatherTableShowBox {
|
||||||
|
height: calc(100% - 0px);
|
||||||
|
}
|
||||||
|
.childBox {
|
||||||
|
height: 100%;
|
||||||
|
.chartClass {
|
||||||
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
// .echartsBox {
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// align-items: center;
|
||||||
|
|
||||||
|
// .btnbox {
|
||||||
|
// display: flex;
|
||||||
|
// margin-bottom: 8px;
|
||||||
|
// .el-button--primary {
|
||||||
|
// width: auto;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
.childTableShowBox {
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
height: calc(100% - 124px);
|
||||||
|
}
|
||||||
|
.termalBox {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 32px;
|
||||||
|
p {
|
||||||
|
.text {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gropBtn {
|
||||||
|
//margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue