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.
439 lines
12 KiB
Vue
439 lines
12 KiB
Vue
<template>
|
|
<div class="homeBox">
|
|
<div class="filterBox">
|
|
<el-form
|
|
v-show="showDiv"
|
|
:inline="true"
|
|
:model="formdata"
|
|
class="demo-form-inline"
|
|
>
|
|
<div class="topSearch">
|
|
<el-form-item label="线路" class="xlbox">
|
|
<el-select v-model="formdata.lineId" @change="getSearchgt" filterable>
|
|
<el-option
|
|
v-for="item in xlOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
{{ item.vname + item.name }}
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="杆塔" class="gtbox">
|
|
<el-select v-model="formdata.towerId" filterable>
|
|
<el-option
|
|
v-for="item in gtOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="是否在线" class="isonLineClass">
|
|
<el-select v-model="formdata.isonline">
|
|
<el-option
|
|
v-for="item in onlineOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="bottomSearch">
|
|
<el-form-item label="出厂ID" class="oidbox">
|
|
<el-input
|
|
v-model="formdata.oidInput"
|
|
placeholder="请输入出厂ID"
|
|
clearable
|
|
></el-input>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
|
<el-checkbox
|
|
v-model="formdata.oidCheck"
|
|
:checked="formdata.oidCheck == 1 ? true : false"
|
|
true-label="1"
|
|
false-label="0"
|
|
></el-checkbox
|
|
>
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="装置编号" class="cmdibox">
|
|
<el-input
|
|
v-model="formdata.cmdidInput"
|
|
placeholder="请输入装置编号"
|
|
clearable
|
|
></el-input>
|
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
|
<el-checkbox
|
|
v-model="formdata.cmdidCheck"
|
|
:checked="formdata.cmdidCheck == 1 ? true : false"
|
|
true-label="1"
|
|
false-label="0"
|
|
></el-checkbox>
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="CMA服务器" class="cmabox">
|
|
<el-input
|
|
v-model="formdata.cmaInput"
|
|
placeholder="请输入CMA服务器"
|
|
clearable
|
|
></el-input>
|
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
|
<el-checkbox
|
|
v-model="formdata.cmaCheck"
|
|
:checked="formdata.cmaCheck == 1 ? true : false"
|
|
true-label="1"
|
|
false-label="0"
|
|
></el-checkbox>
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="版本" class="versionbox">
|
|
<el-input
|
|
v-model="formdata.versionInput"
|
|
placeholder="请输入版本"
|
|
clearable
|
|
></el-input>
|
|
<el-tooltip class="item" effect="dark" content="反选" placement="top">
|
|
<el-checkbox
|
|
v-model="formdata.versionCheck"
|
|
:checked="formdata.versionCheck == 1 ? true : false"
|
|
true-label="1"
|
|
false-label="0"
|
|
></el-checkbox>
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
<el-form-item class="btngrop">
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
<el-button type="primary" @click="onReset">重置</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
:content="showDiv ? '收起' : '展开'"
|
|
placement="top"
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
class="toggleClass"
|
|
:icon="showDiv ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
|
|
circle
|
|
@click="toggleDiv"
|
|
></el-button>
|
|
</el-tooltip>
|
|
</div>
|
|
<div
|
|
class="tableBox"
|
|
:style="{ height: showDiv ? 'calc(100% - 102px)' : 'calc(100% - 2px)' }"
|
|
>
|
|
<tableMain :tableData="dataList" :onlineNum="onlineNum" :offlineNum="offlineNum" :noPicNum="noPicNum" v-loading="tableLoaidng"></tableMain>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getqueryLineApi, getqueryTermsApi } from "@/utils/api/index";
|
|
import tableMain from "./components/tableMain";
|
|
export default {
|
|
name: "home",
|
|
components: {
|
|
tableMain,
|
|
},
|
|
data() {
|
|
return {
|
|
showDiv: true, // 控制div的显示与隐藏
|
|
nowTime: new Date().getTime() / 1000,
|
|
xlOptions: [{ id: 0, name: "全部" }], //线路数据
|
|
gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
|
|
onlineOptions: [
|
|
{ id: -1, name: "全部" },
|
|
{ id: 1, name: "在线" },
|
|
{ id: 0, name: "离线" },
|
|
],
|
|
formdata: {
|
|
lineId: 0,
|
|
towerId: 0,
|
|
isonline: -1,
|
|
oidInput: "",
|
|
oidCheck: 0,
|
|
cmdidInput: "",
|
|
cmdidCheck: 0,
|
|
cmaInput: "",
|
|
cmaCheck: 0,
|
|
versionInput: "",
|
|
versionCheck: 0,
|
|
},
|
|
dataList: [],
|
|
tableLoaidng: false,
|
|
onlineNum: "", //在线数量
|
|
offlineNum: "", //离线数量
|
|
noPicNum:'',//未上传图片数量
|
|
};
|
|
},
|
|
created() {
|
|
var that = this;
|
|
document.onkeydown = function (e) {
|
|
var key = window.event.keyCode;
|
|
if (key === 13) {
|
|
that.onSubmit(); // 触发事件
|
|
}
|
|
};
|
|
//this.fetchData(); // 初始化时获取数据
|
|
setInterval(this.fetchData, 60000); // 每10秒刷新数据
|
|
},
|
|
mounted() {
|
|
this.getLineList();
|
|
this.onSubmit();
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
//获取linelist 线路内容
|
|
getLineList() {
|
|
getqueryLineApi()
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.xlOptions = [{ id: 0, name: "全部", vname: "" }];
|
|
this.xlOptions = this.xlOptions.concat(res.data);
|
|
this.formdata.lineId = this.xlOptions[0].id;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//通过线路获取杆塔
|
|
getSearchgt() {
|
|
getqueryLineApi({ lineId: this.formdata.lineId })
|
|
.then((res) => {
|
|
this.gtOptions = [{ id: 0, name: "全部" }];
|
|
this.gtOptions = this.gtOptions.concat(res.data);
|
|
this.formdata.towerId = this.gtOptions[0].id;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
onSubmit() {
|
|
this.tableLoaidng = true;
|
|
getqueryTermsApi({
|
|
lineId: this.formdata.lineId,
|
|
towerId: this.formdata.towerId,
|
|
isonLine: this.formdata.isonline,
|
|
fc: 4,
|
|
fn1: "oid",
|
|
fv1: this.formdata.oidInput,
|
|
frev1: this.formdata.oidCheck,
|
|
fn2: "cmdid",
|
|
fv2: this.formdata.cmdidInput,
|
|
frev2: this.formdata.cmdidCheck,
|
|
fn3: "cma",
|
|
fv3: this.formdata.cmaInput,
|
|
frev3: this.formdata.cmaCheck,
|
|
fn4: "version",
|
|
fv4: this.formdata.versionInput,
|
|
frev4: this.formdata.versionCheck,
|
|
})
|
|
.then((res) => {
|
|
|
|
res.data = res.data.map(item => {
|
|
|
|
if (!item.raw_report.pic) {
|
|
item.raw_report.pic = 0;
|
|
}
|
|
return item;
|
|
});
|
|
|
|
if (this.formdata.isonline == "-1") {
|
|
//全部
|
|
this.dataList = res.data;
|
|
// console.log(this.dataList)
|
|
} else if (this.formdata.isonline == "1") {
|
|
//在线
|
|
this.dataList = res.data.filter(
|
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
|
);
|
|
|
|
} else if (this.formdata.isonline == "0") {
|
|
//离线
|
|
this.dataList = res.data.filter(
|
|
(item) => this.nowTime - item.last_heartbeat_ts > 720
|
|
);
|
|
|
|
}
|
|
this.onlineNum =this.dataList.filter(
|
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
|
).length;
|
|
this.offlineNum = this.dataList.length - this.onlineNum
|
|
this.noPicNum = this.dataList.filter(
|
|
(item) => item.raw_report.pic==undefined||item.raw_report.pic==0||item.raw_report.pic==-1
|
|
).length
|
|
this.tableLoaidng = false;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
fetchData() {
|
|
getqueryTermsApi({
|
|
lineId: this.formdata.lineId,
|
|
towerId: this.formdata.towerId,
|
|
isonLine: this.formdata.isonline,
|
|
fc: 4,
|
|
fn1: "oid",
|
|
fv1: this.formdata.oidInput,
|
|
frev1: this.formdata.oidCheck,
|
|
fn2: "cmdid",
|
|
fv2: this.formdata.cmdidInput,
|
|
frev2: this.formdata.cmdidCheck,
|
|
fn3: "cma",
|
|
fv3: this.formdata.cmaInput,
|
|
frev3: this.formdata.cmaCheck,
|
|
fn4: "version",
|
|
fv4: this.formdata.versionInput,
|
|
frev4: this.formdata.versionCheck,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
res.data = res.data.map(item => {
|
|
|
|
if (!item.raw_report.pic) {
|
|
item.raw_report.pic = 0;
|
|
}
|
|
return item;
|
|
});
|
|
if (this.formdata.isonline == "-1") {
|
|
//全部
|
|
this.dataList = res.data;
|
|
} else if (this.formdata.isonline == "1") {
|
|
//在线
|
|
|
|
this.dataList = res.data.filter(
|
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
|
);
|
|
} else if (this.formdata.isonline == "0") {
|
|
//离线
|
|
this.dataList = res.data.filter(
|
|
(item) => this.nowTime - item.last_heartbeat_ts > 720
|
|
);
|
|
}
|
|
this.onlineNum =this.dataList.filter(
|
|
(item) => this.nowTime - item.last_heartbeat_ts <= 720
|
|
).length;
|
|
this.offlineNum = this.dataList.length - this.onlineNum
|
|
this.noPicNum = this.dataList.filter(
|
|
(item) => item.raw_report.pic==undefined||item.raw_report.pic==0||item.raw_report.pic==-1
|
|
).length
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//重置
|
|
onReset() {
|
|
this.formdata = {
|
|
lineId: 0,
|
|
towerId: 0,
|
|
isonline: -1,
|
|
oidInput: "",
|
|
oidCheck: false,
|
|
cmdidInput: "",
|
|
cmdidCheck: false,
|
|
cmaInput: "",
|
|
cmaCheck: false,
|
|
versionInput: "",
|
|
versionCheck: false,
|
|
};
|
|
this.onSubmit();
|
|
},
|
|
//展开收起
|
|
toggleDiv() {
|
|
this.showDiv = !this.showDiv; // 切换showDiv的值
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.homeBox {
|
|
height: calc(100% - 24px);
|
|
width: calc(100% - 24px);
|
|
padding: 12px;
|
|
.filterBox {
|
|
position: relative;
|
|
.el-form {
|
|
display: flex;
|
|
// align-items: center;
|
|
// flex-wrap: wrap;
|
|
flex-direction: column;
|
|
.topSearch{
|
|
display:flex;
|
|
}
|
|
.bottomSearch{
|
|
display:flex;
|
|
align-items:center;
|
|
|
|
.el-form-item--small .el-form-item__label{
|
|
white-space: nowrap;
|
|
}
|
|
.btngrop{
|
|
.el-form-item__content{
|
|
display:flex;
|
|
flex-wrap:nowrap;
|
|
}
|
|
}
|
|
}
|
|
.isonLineClass {
|
|
.el-select {
|
|
width: 80px;
|
|
}
|
|
}
|
|
.oidbox,
|
|
.cmdibox,
|
|
.cmabox,
|
|
.versionbox {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #e9e9e9;
|
|
padding: 0px 12px;
|
|
border-radius: 3px;
|
|
.el-form-item__content {
|
|
display: flex;
|
|
align-items: center;
|
|
.el-input {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
.el-form-item__label,
|
|
.el-checkbox {
|
|
color: #333;
|
|
}
|
|
}
|
|
.toggleClass {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
.el-icon-d-arrow-left {
|
|
transform: rotate(-90deg);
|
|
}
|
|
.el-icon-d-arrow-right {
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
.tableBox {
|
|
//height: calc(100% - 102px);
|
|
}
|
|
}
|
|
.el-pagination{
|
|
color: #606262;
|
|
font-weight: normal;
|
|
.el-pager li.active{
|
|
font-weight:800;
|
|
}
|
|
}
|
|
.el-dialog__headerbtn .el-dialog__close{
|
|
font-size:20px;
|
|
&:hover{
|
|
background:#e2e2e2;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|