role1.0
fanluyan
1 year ago
parent
a35c1912f2
commit
932f0e968a
@ -0,0 +1,700 @@
|
||||
<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.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="temperature" label="温度(℃)">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.temperature">{{
|
||||
scope.row.temperature
|
||||
}}</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">{{
|
||||
scope.row.humidity
|
||||
}}</span>
|
||||
<span v-else> - </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="windSpeed" label="瞬时风速(m/s)">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.windSpeed">{{
|
||||
scope.row.windSpeed
|
||||
}}</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">{{
|
||||
scope.row.windDirection
|
||||
}}</span>
|
||||
<span v-else> - </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rain" label="雨量(mm/hour)">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.rain">{{ scope.row.rain }}</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">{{
|
||||
scope.row.airPressure
|
||||
}}</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">{{
|
||||
scope.row.radiationIntensity
|
||||
}}</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.updateTime"
|
||||
>更多历史数据</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">
|
||||
<h3>当前监测终端</h3>
|
||||
<el-descriptions direction="vertical" :column="4" border>
|
||||
<el-descriptions-item label="线路">{{
|
||||
childMsg.lineName
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="杆塔">{{
|
||||
childMsg.towerName
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="终端">{{
|
||||
childMsg.cmdid
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</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">
|
||||
<h3>气象数据列表</h3>
|
||||
<el-table
|
||||
:data="childTableDate"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
height="calc(100% - 40px)"
|
||||
>
|
||||
<el-table-column prop="updateTime" label="时间">
|
||||
<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="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="precipitation"
|
||||
label="雨量(mm/hour)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="airPressure"
|
||||
label="气压(hPa(百帕))"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="radiationIntensity"
|
||||
label="日照(W/m2)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avgWindSpeed1Min"
|
||||
label="1分钟平均风速(m/s)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avgWindDir1Min"
|
||||
label="1分钟平均风向(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avgWindSpeed10Min"
|
||||
label="10分钟平均风速(m/s)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avgWindDir10Min"
|
||||
label="10分钟平均风向(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="maxSpeed10Min"
|
||||
label="10分钟最大风速(m/s)"
|
||||
></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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import leftTree from "../components/leftTree";
|
||||
import { getDataListJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
name: "weather",
|
||||
components: {
|
||||
leftTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
childFlag: false,
|
||||
tableData: [],
|
||||
childTableDate: [],
|
||||
formdata: {},
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
qt: "",
|
||||
id: "",
|
||||
paramsData: "",
|
||||
childpage: 1, // 当前页数
|
||||
childpageSize: 20, // 每页数量
|
||||
childtotal: 0, //总条数
|
||||
childParma: "",
|
||||
childMsg: "",
|
||||
echartsData: "", //echarts数据
|
||||
wdFlag: true,
|
||||
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;
|
||||
console.log(data);
|
||||
if (data.dyValue) {
|
||||
console.log("电压-公司");
|
||||
this.qt = "all";
|
||||
this.id = data.id;
|
||||
this.getWeatherData(data);
|
||||
} else if (data.bsManufacturer) {
|
||||
console.log("线路-电压");
|
||||
this.qt = "line";
|
||||
this.id = data.id;
|
||||
this.getWeatherData(data);
|
||||
} else {
|
||||
console.log("装置-杆塔");
|
||||
this.qt = "tower";
|
||||
this.id = data.towerid;
|
||||
this.getWeatherData(data);
|
||||
}
|
||||
//this.getAllData(data);
|
||||
},
|
||||
getWeatherData(data) {
|
||||
this.childFlag = false;
|
||||
console.log(data, this.qt);
|
||||
this.loading = true;
|
||||
getDataListJoggle({
|
||||
act: "meteo",
|
||||
qt: this.qt,
|
||||
id: this.id,
|
||||
p: this.page,
|
||||
ps: this.pageSize,
|
||||
latest: 1,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.tableData = res.data;
|
||||
this.total = Number(res.page.totalRecords);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.tableData = [];
|
||||
this.getWeatherData(this.paramsData);
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.tableData = [];
|
||||
this.getWeatherData(this.paramsData);
|
||||
},
|
||||
//点击查看更多历史数据
|
||||
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.qt = "terminal";
|
||||
this.id = row.termId;
|
||||
this.childParma = row;
|
||||
this.getchildWeatherData(row);
|
||||
},
|
||||
|
||||
//查询时间
|
||||
onSubmit() {
|
||||
this.getchildWeatherData(this.childParma);
|
||||
},
|
||||
getchildWeatherData(row) {
|
||||
this.loading = true;
|
||||
this.childMsg = row;
|
||||
const sTime = Math.floor(this.formdata.starttime / 1000);
|
||||
const eTime = Math.floor(this.formdata.endtime / 1000);
|
||||
getDataListJoggle({
|
||||
act: "meteo",
|
||||
qt: this.qt,
|
||||
id: this.id,
|
||||
bt: sTime,
|
||||
et: eTime,
|
||||
p: this.childpage,
|
||||
ps: this.childpageSize,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.childTableDate = res.data;
|
||||
this.childtotal = Number(res.page.totalRecords);
|
||||
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);
|
||||
getDataListJoggle({
|
||||
act: "meteo",
|
||||
qt: this.qt,
|
||||
id: this.id,
|
||||
bt: sTime,
|
||||
et: eTime,
|
||||
p: this.childpage,
|
||||
ps: 1000,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.echartsData = res.data;
|
||||
//获取温度折线图
|
||||
this.getEchart4(this.echartsData);
|
||||
this.getEchart5(this.echartsData);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
onWdLine() {
|
||||
this.wdFlag = true;
|
||||
this.sdFlag = false;
|
||||
},
|
||||
onSdLine() {
|
||||
this.wdFlag = false;
|
||||
this.sdFlag = true;
|
||||
},
|
||||
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("HH:mm:ss")
|
||||
);
|
||||
yData = wd.map((item) => item.temperature);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
//left: "6%", //图表距离容器左侧多少距离
|
||||
//right: "6%", //图表距离容器右侧侧多少距离
|
||||
bottom: "6%", //图表距离容器上面多少距离
|
||||
//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: {},
|
||||
},
|
||||
},
|
||||
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("HH:mm:ss")
|
||||
);
|
||||
yData = sd.map((item) => item.humidity);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
//left: "6%", //图表距离容器左侧多少距离
|
||||
//right: "6%", //图表距离容器右侧侧多少距离
|
||||
bottom: "6%", //图表距离容器上面多少距离
|
||||
//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: {},
|
||||
},
|
||||
},
|
||||
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;
|
||||
}
|
||||
.dataBox {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.fatherTableShowBox {
|
||||
height: calc(100% - 0px);
|
||||
}
|
||||
.childBox {
|
||||
height: 100%;
|
||||
.echartsBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.btnbox {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
.el-button--primary {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.chartClass {
|
||||
height: 450px;
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
.childTableShowBox {
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-top: 16px;
|
||||
}
|
||||
height: calc(100% - 200px);
|
||||
}
|
||||
.termalBox {
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
.el-descriptions {
|
||||
margin-bottom: 16px;
|
||||
.el-descriptions-item__label.is-bordered-label {
|
||||
color: #333;
|
||||
}
|
||||
.el-descriptions__body
|
||||
.el-descriptions__table
|
||||
.el-descriptions-item__cell {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,326 +0,0 @@
|
||||
<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
|
||||
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="onSubmit"
|
||||
>导出数据</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="childTableShowBox">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column
|
||||
prop="terminalNumber"
|
||||
label="监测终端编号"
|
||||
></el-table-column>
|
||||
<el-table-column prop="time" label="时间"></el-table-column>
|
||||
<el-table-column
|
||||
prop="functionalUnitIdentifier"
|
||||
label="功能单元识别码"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="maxPullForceKg"
|
||||
label="最大拉力(Kg)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="maxPullForceWindBiasAngle"
|
||||
label="最大拉力时风偏角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="maxPullForceTiltAngle"
|
||||
label="最大拉力时倾斜角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="minPullForceKg"
|
||||
label="最小拉力(Kg)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="minPullForceWindBiasAngle"
|
||||
label="最小拉力时风偏角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="minPullForceTiltAngle"
|
||||
label="最小拉力时倾斜角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="maxWindBiasAngle"
|
||||
label="最大风偏角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="maxWindBiasAngleTiltAngle"
|
||||
label="最大风偏角时倾斜角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="maxWindBiasAnglePullForceKg"
|
||||
label="最大风偏角时拉力(Kg)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="minWindBiasAngle"
|
||||
label="最小风偏角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="minWindBiasAngleTiltAngle"
|
||||
label="最小风偏角时倾斜角(°)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="minWindBiasAnglePullForceKg"
|
||||
label="最小风偏角时拉力(Kg)"
|
||||
></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: "icing",
|
||||
components: {
|
||||
leftTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
msg: "",
|
||||
childFlag: false,
|
||||
tableData: [],
|
||||
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.tableData = [
|
||||
{
|
||||
terminalNumber: "终端A",
|
||||
time: "2023-03-15 08:00:00",
|
||||
functionalUnitIdentifier: "功能单元1",
|
||||
maxPullForceKg: "20Kg",
|
||||
maxPullForceWindBiasAngle: "60°",
|
||||
maxPullForceTiltAngle: "30°",
|
||||
minPullForceKg: "5Kg",
|
||||
minPullForceWindBiasAngle: "30°",
|
||||
minPullForceTiltAngle: "20°",
|
||||
maxWindBiasAngle: "70°",
|
||||
maxWindBiasAngleTiltAngle: "45°",
|
||||
maxWindBiasAnglePullForceKg: "15Kg",
|
||||
minWindBiasAngle: "20°",
|
||||
minWindBiasAngleTiltAngle: "30°",
|
||||
minWindBiasAnglePullForceKg: "8Kg",
|
||||
},
|
||||
{
|
||||
terminalNumber: "终端A",
|
||||
time: "2023-03-15 08:00:00",
|
||||
functionalUnitIdentifier: "功能单元1",
|
||||
maxPullForceKg: "20Kg",
|
||||
maxPullForceWindBiasAngle: "60°",
|
||||
maxPullForceTiltAngle: "30°",
|
||||
minPullForceKg: "5Kg",
|
||||
minPullForceWindBiasAngle: "30°",
|
||||
minPullForceTiltAngle: "20°",
|
||||
maxWindBiasAngle: "70°",
|
||||
maxWindBiasAngleTiltAngle: "45°",
|
||||
maxWindBiasAnglePullForceKg: "15Kg",
|
||||
minWindBiasAngle: "20°",
|
||||
minWindBiasAngleTiltAngle: "30°",
|
||||
minWindBiasAnglePullForceKg: "8Kg",
|
||||
},
|
||||
{
|
||||
terminalNumber: "终端A",
|
||||
time: "2023-03-15 08:00:00",
|
||||
functionalUnitIdentifier: "功能单元1",
|
||||
maxPullForceKg: "20Kg",
|
||||
maxPullForceWindBiasAngle: "60°",
|
||||
maxPullForceTiltAngle: "30°",
|
||||
minPullForceKg: "5Kg",
|
||||
minPullForceWindBiasAngle: "30°",
|
||||
minPullForceTiltAngle: "20°",
|
||||
maxWindBiasAngle: "70°",
|
||||
maxWindBiasAngleTiltAngle: "45°",
|
||||
maxWindBiasAnglePullForceKg: "15Kg",
|
||||
minWindBiasAngle: "20°",
|
||||
minWindBiasAngleTiltAngle: "30°",
|
||||
minWindBiasAnglePullForceKg: "8Kg",
|
||||
},
|
||||
];
|
||||
} else if (data.bsManufacturer) {
|
||||
this.tableData = [
|
||||
{
|
||||
terminalNumber: "终端A",
|
||||
time: "2023-03-15 08:00:00",
|
||||
functionalUnitIdentifier: "功能单元1",
|
||||
maxPullForceKg: "20Kg",
|
||||
maxPullForceWindBiasAngle: "60°",
|
||||
maxPullForceTiltAngle: "30°",
|
||||
minPullForceKg: "5Kg",
|
||||
minPullForceWindBiasAngle: "30°",
|
||||
minPullForceTiltAngle: "20°",
|
||||
maxWindBiasAngle: "70°",
|
||||
maxWindBiasAngleTiltAngle: "45°",
|
||||
maxWindBiasAnglePullForceKg: "15Kg",
|
||||
minWindBiasAngle: "20°",
|
||||
minWindBiasAngleTiltAngle: "30°",
|
||||
minWindBiasAnglePullForceKg: "8Kg",
|
||||
},
|
||||
{
|
||||
terminalNumber: "终端A",
|
||||
time: "2023-03-15 08:00:00",
|
||||
functionalUnitIdentifier: "功能单元1",
|
||||
maxPullForceKg: "20Kg",
|
||||
maxPullForceWindBiasAngle: "60°",
|
||||
maxPullForceTiltAngle: "30°",
|
||||
minPullForceKg: "5Kg",
|
||||
minPullForceWindBiasAngle: "30°",
|
||||
minPullForceTiltAngle: "20°",
|
||||
maxWindBiasAngle: "70°",
|
||||
maxWindBiasAngleTiltAngle: "45°",
|
||||
maxWindBiasAnglePullForceKg: "15Kg",
|
||||
minWindBiasAngle: "20°",
|
||||
minWindBiasAngleTiltAngle: "30°",
|
||||
minWindBiasAnglePullForceKg: "8Kg",
|
||||
},
|
||||
];
|
||||
} else {
|
||||
console.log("杆塔");
|
||||
this.tableData = [
|
||||
{
|
||||
terminalNumber: "终端A",
|
||||
time: "2023-03-15 08:00:00",
|
||||
functionalUnitIdentifier: "功能单元1",
|
||||
maxPullForceKg: "20Kg",
|
||||
maxPullForceWindBiasAngle: "60°",
|
||||
maxPullForceTiltAngle: "30°",
|
||||
minPullForceKg: "5Kg",
|
||||
minPullForceWindBiasAngle: "30°",
|
||||
minPullForceTiltAngle: "20°",
|
||||
maxWindBiasAngle: "70°",
|
||||
maxWindBiasAngleTiltAngle: "45°",
|
||||
maxWindBiasAnglePullForceKg: "15Kg",
|
||||
minWindBiasAngle: "20°",
|
||||
minWindBiasAngleTiltAngle: "30°",
|
||||
minWindBiasAnglePullForceKg: "8Kg",
|
||||
},
|
||||
];
|
||||
}
|
||||
},
|
||||
onSubmit() {},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
// this.picList = [];
|
||||
// this.getPicData();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
//this.getPicData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
// .fatherTableShowBox {
|
||||
// height: calc(100% - 0px);
|
||||
// }
|
||||
.childBox {
|
||||
height: calc(100% - 50px);
|
||||
.childTableShowBox {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue