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.
340 lines
10 KiB
Vue
340 lines
10 KiB
Vue
<template>
|
|
<div class="equipmentStatus">
|
|
<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="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="terminalStatus" label="终端状态">
|
|
<template slot-scope="scope">
|
|
<i
|
|
class="el-icon-success"
|
|
v-if="scope.row.terminalStatus == '在线'"
|
|
></i>
|
|
<i
|
|
class="el-icon-error"
|
|
v-if="scope.row.terminalStatus == '离线'"
|
|
></i>
|
|
<span style="margin-left: 10px">{{
|
|
scope.row.terminalStatus
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="tension" label="拉力"></el-table-column>
|
|
<el-table-column
|
|
prop="lastHeartbeatTime"
|
|
label="最后心跳时间"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="signalStrength"
|
|
label="信号强度"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="batteryVoltage"
|
|
label="蓄电池电压"
|
|
></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%"
|
|
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="terminalStatus" label="终端状态">
|
|
<template slot-scope="scope">
|
|
<i
|
|
class="el-icon-success"
|
|
v-if="scope.row.terminalStatus == '在线'"
|
|
></i>
|
|
<i
|
|
class="el-icon-error"
|
|
v-if="scope.row.terminalStatus == '离线'"
|
|
></i>
|
|
<span style="margin-left: 10px">{{
|
|
scope.row.terminalStatus
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="tension" label="拉力"></el-table-column>
|
|
<el-table-column
|
|
prop="lastHeartbeatTime"
|
|
label="最后心跳时间"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="signalStrength"
|
|
label="信号强度"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="batteryVoltage"
|
|
label="蓄电池电压"
|
|
></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 "../../components/leftTree";
|
|
import { getTerminalJoggle } from "@/utils/api/index";
|
|
export default {
|
|
name: "equipmentStatus",
|
|
components: {
|
|
leftTree,
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
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.terminalList();
|
|
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: "线路1",
|
|
pole: "杆塔1",
|
|
terminal: "终端1",
|
|
terminalStatus: "在线",
|
|
tension: 200,
|
|
lastHeartbeatTime: "2023-05-01 10:00:00",
|
|
signalStrength: 80,
|
|
batteryVoltage: 12.5,
|
|
},
|
|
{
|
|
line: "线路2",
|
|
pole: "杆塔2",
|
|
terminal: "终端2",
|
|
terminalStatus: "离线",
|
|
tension: 180,
|
|
lastHeartbeatTime: "2023-05-01 09:30:00",
|
|
signalStrength: 65,
|
|
batteryVoltage: 12.0,
|
|
},
|
|
{
|
|
line: "线路3",
|
|
pole: "杆塔3",
|
|
terminal: "终端3",
|
|
terminalStatus: "在线",
|
|
tension: 200,
|
|
lastHeartbeatTime: "2023-05-01 10:00:00",
|
|
signalStrength: 80,
|
|
batteryVoltage: 12.5,
|
|
},
|
|
];
|
|
} else if (data.bsManufacturer) {
|
|
this.msg = "杆塔下所有数据";
|
|
this.childFlag = false;
|
|
this.tableData = [
|
|
{
|
|
line: "线路1",
|
|
pole: "杆塔1",
|
|
terminal: "终端1",
|
|
terminalStatus: "在线",
|
|
tension: 200,
|
|
lastHeartbeatTime: "2023-05-01 10:00:00",
|
|
signalStrength: 80,
|
|
batteryVoltage: 12.5,
|
|
},
|
|
{
|
|
line: "线路2",
|
|
pole: "杆塔2",
|
|
terminal: "终端2",
|
|
terminalStatus: "离线",
|
|
tension: 180,
|
|
lastHeartbeatTime: "2023-05-01 09:30:00",
|
|
signalStrength: 65,
|
|
batteryVoltage: 12.0,
|
|
},
|
|
];
|
|
} else {
|
|
console.log("杆塔");
|
|
this.msg = "装置当天数据";
|
|
this.childFlag = true;
|
|
this.childTableDate = [
|
|
{
|
|
line: "线路1",
|
|
pole: "杆塔1",
|
|
terminal: "终端1",
|
|
terminalStatus: "在线",
|
|
tension: 200,
|
|
lastHeartbeatTime: "2023-05-01 10:00:00",
|
|
signalStrength: 80,
|
|
batteryVoltage: 12.5,
|
|
},
|
|
];
|
|
}
|
|
},
|
|
terminalList() {
|
|
this.loading = true;
|
|
this.$set(this.formdata, "pageindex", this.page);
|
|
this.$set(this.formdata, "pagesize", this.pageSize);
|
|
getTerminalJoggle(this.formdata)
|
|
.then((res) => {
|
|
console.log(res);
|
|
// this.terminalTableData = res.data.list;
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err); //代码错误、请求失败捕获
|
|
});
|
|
},
|
|
onSubmit() {},
|
|
//点击分页
|
|
handleCurrentChange(val) {
|
|
this.page = val;
|
|
// this.picList = [];
|
|
// this.getPicData();
|
|
},
|
|
//每页条数
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
//this.getPicData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.equipmentStatus {
|
|
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;
|
|
.el-icon-success {
|
|
color: #67c23a;
|
|
font-size: 14px;
|
|
}
|
|
.el-icon-error {
|
|
color: #909399;
|
|
font-size: 14px;
|
|
}
|
|
.dataBox {
|
|
width: calc(100% - 24px);
|
|
height: calc(100% - 24px);
|
|
padding: 12px 12px;
|
|
background: #fff;
|
|
}
|
|
.fatherTableShowBox {
|
|
height: calc(100% - 0px);
|
|
}
|
|
.childBox {
|
|
height: 100%;
|
|
.childTableShowBox {
|
|
height: calc(100% - 0px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|