优化覆冰微气象展示河南
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