<template>
|
<div class="FormList">
|
<div class="search">
|
<div class="left">
|
<div class="id">
|
设备名称/ID
|
<el-input v-model="inputText" placeholder="请输入"></el-input>
|
</div>
|
|
<div class="time">
|
设备安装时间
|
<el-date-picker
|
v-model="searchTime"
|
@change="searchingBtn"
|
type="datetimerange"
|
size="small"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="['00:00:00', '23:59:59']"
|
></el-date-picker>
|
</div>
|
|
<div class="cluster">
|
所属集群
|
<el-select v-model="cluster" placeholder="请选择">
|
<el-option
|
v-for="item in clusterArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div class="button searchBtn" @click="searchingBtn">搜索</div>
|
<div class="button resetBtn" @click="clearSearch">重置</div>
|
</div>
|
|
<div class="right">
|
<div class="button export" @click="exportFile">
|
<span class="iconfont"></span>导出
|
</div>
|
</div>
|
</div>
|
|
<div class="btns"></div>
|
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
tooltip-effect="dark"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
:stripe="true"
|
>
|
<el-table-column label="序号" width="48" class-name="index">
|
<template slot-scope="scope">{{
|
scope.$index + 1 + (page - 1) * size
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
prop="devId"
|
label="设备ID"
|
min-width="180"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
prop="devName"
|
label="设备名称"
|
min-width="140"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
prop="devIp"
|
label="IP地址"
|
min-width="150"
|
></el-table-column>
|
<el-table-column label="安装时间" min-width="159">
|
<template slot-scope="scope">
|
<div v-if="scope.row.installTime.length > 1">
|
<div>{{ scope.row.installTime[0] }}</div>
|
<div>{{ scope.row.installTime[1] }}</div>
|
</div>
|
<div v-else>--</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="首次使用时间" min-width="159">
|
<template slot-scope="scope">
|
<div v-if="scope.row.firstUseTime.length > 1">
|
<div>{{ scope.row.firstUseTime[0] }}</div>
|
<div>{{ scope.row.firstUseTime[1] }}</div>
|
</div>
|
<div v-else>--</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="所属集群" show-overflow-tooltip min-width="154">
|
<template slot-scope="scope"> {{ scope.row.clusterName }} </template>
|
</el-table-column>
|
|
<el-table-column
|
prop="installUsername"
|
label="所属用户"
|
min-width="140"
|
show-overflow-tooltip
|
></el-table-column>
|
|
<el-table-column label="状态" min-width="70">
|
<template slot-scope="scope">
|
<div v-if="scope.row.isOnline == 1" class="status green">在线</div>
|
<div v-else class="status">离线</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="180">
|
<template slot-scope="scope">
|
<!-- 设备详情 -->
|
<span
|
class="iconfont option"
|
:class="{ disable: scope.row.isOnline != 1 }"
|
@click="checkDetail(scope.row)"
|
></span
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
:total="total"
|
background
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
findDevList,
|
findClustersBySearch,
|
exportDevListExcel,
|
} from "@/api/device";
|
|
import bus from "@/plugin/bus";
|
|
export default {
|
created() {
|
this.getCluster();
|
},
|
data() {
|
return {
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
], //搜索时间
|
page: 1,
|
size: 10, //分页相关
|
inputText: "", //输入框内容
|
total: 0, //总数
|
dataList: [],
|
isShowAdd: false, //是否展示新增弹窗
|
isShowUnbind: false, //是否展示解绑弹窗
|
unbindId: "",
|
clusterArr: [], //所属集群下拉框
|
cluster: null, //选中的集群类型
|
showQuit: false, //展示退出集群的弹窗
|
showJoin: false, //展示加入集群的弹窗
|
activeEquipment: null, //处理中的设备
|
};
|
},
|
methods: {
|
async getCluster() {
|
const res = await findClustersBySearch();
|
if (res && res.success) {
|
res.data.list.forEach((item) => {
|
this.clusterArr.push({
|
label: item.clusterName,
|
value: item.clusterId,
|
});
|
});
|
}
|
},
|
|
// 跳到设备详情
|
checkDetail(row) {
|
if (row.isOnline != 1) {
|
return;
|
}
|
this.$router.push({
|
path: "/Layout/EquipmentDetail",
|
query: {
|
id: row.devId,
|
},
|
});
|
},
|
|
// 查询列表
|
searchingBtn() {
|
let param = {};
|
|
if (!this.searchTime) {
|
param = {
|
page: this.page,
|
size: this.size,
|
startTime: "",
|
endTime: "",
|
clusterId: this.cluster,
|
inputText: this.inputText,
|
};
|
} else {
|
param = {
|
page: this.page,
|
size: this.size,
|
startTime: this.searchTime[0],
|
endTime: this.searchTime[1],
|
clusterId: this.cluster,
|
inputText: this.inputText,
|
};
|
}
|
|
findDevList(param)
|
.then((res) => {
|
this.dataList = res.data.list;
|
//时间分行显示
|
this.dataList.forEach((item) => {
|
item.installTime = item.installTime.split(" ");
|
item.firstUseTime = item.firstUseTime.split(" ");
|
});
|
this.total = res.data.total;
|
if (res.data.total <= this.size) {
|
this.page = 1;
|
}
|
|
bus.$emit("refleshNode", this.dataList);
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
|
//分页功能
|
handleSizeChange(size) {
|
this.size = size;
|
this.searchingBtn();
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page;
|
this.searchingBtn();
|
},
|
|
//获得默认时间
|
getDateInit() {
|
// 要求 默认一个月
|
const end = new Date();
|
const start = new Date();
|
const nowDate = new Date();
|
nowDate.setHours(0);
|
nowDate.setMinutes(0);
|
nowDate.setSeconds(0);
|
nowDate.setMilliseconds(0);
|
start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
|
end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
|
return [
|
this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
|
this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
|
];
|
},
|
|
clearSearch() {
|
this.searchTime = this.getDateInit();
|
this.inputText = "";
|
this.cluster = "";
|
this.searchingBtn();
|
},
|
|
//导出列表文件
|
async exportFile() {
|
let param = {};
|
|
if (!this.searchTime) {
|
param = {
|
page: this.page,
|
size: this.size,
|
startTime: "",
|
endTime: "",
|
clusterId: this.cluster,
|
inputText: this.inputText,
|
};
|
} else {
|
param = {
|
page: this.page,
|
size: this.size,
|
startTime: this.searchTime[0],
|
endTime: this.searchTime[1],
|
clusterId: this.cluster,
|
inputText: this.inputText,
|
};
|
}
|
const result = await exportDevListExcel(param);
|
|
var blob = new Blob([result.body.data], {
|
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
|
}),
|
Temp = document.createElement("a");
|
|
Temp.href = window.URL.createObjectURL(blob);
|
|
console.log(result);
|
console.log(result.fileName);
|
|
Temp.download = window.decodeURI(result.fileName);
|
|
Temp.setAttribute("download", result.fileName);
|
|
document.body.appendChild(Temp);
|
|
Temp.click();
|
|
document.body.removeChild(Temp);
|
|
window.URL.revokeObjectURL(Temp);
|
},
|
},
|
mounted() {
|
this.searchTime = this.getDateInit();
|
this.searchingBtn();
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.FormList {
|
margin: 24px;
|
padding: 0 20px;
|
background-color: #fff;
|
|
.search {
|
display: flex;
|
justify-content: space-between;
|
padding: 24px 0 24px 0;
|
font-size: 14px;
|
border-bottom: 1px solid #e9ebee;
|
|
.left,
|
.right,
|
.id,
|
.time,
|
.cluster {
|
display: flex;
|
align-items: center;
|
}
|
|
.cluster {
|
.el-select {
|
width: 190px;
|
height: 40px;
|
line-height: 40px;
|
|
::v-deep input {
|
height: 40px;
|
}
|
|
.el-icon-arrow-up {
|
line-height: 40px;
|
}
|
|
::v-deep .el-icon-arrow-up {
|
height: 40px;
|
}
|
}
|
}
|
|
.id .el-input ::v-deep {
|
width: 180px;
|
}
|
|
.cluster::v-deep .el-input {
|
width: 156px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
|
input {
|
border-radius: 0;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 270px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
|
input {
|
border-radius: 0;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor {
|
width: 340px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&.is-active {
|
border-color: #0065ff;
|
}
|
}
|
|
.searchBtn {
|
width: 60px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
margin-right: 8px;
|
margin-left: 20px;
|
border-radius: 3px;
|
}
|
|
.resetBtn {
|
width: 60px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
color: #0065ff;
|
border: 1px solid #0065ff;
|
border-radius: 3px;
|
}
|
|
.export {
|
width: 84px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
border-radius: 3px;
|
|
span {
|
margin-right: 10px;
|
font-size: 18px;
|
}
|
}
|
}
|
|
.el-table ::v-deep {
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::after {
|
display: none;
|
}
|
|
td.index .cell {
|
padding-left: 16px;
|
padding-right: 4px;
|
}
|
|
.has-gutter tr th {
|
background: #f0f3f5;
|
font-size: 16px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
td .cell {
|
color: #3d3d3d;
|
}
|
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f5f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f5f5fa !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 24px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
|
&.disable {
|
color: #666;
|
cursor: default;
|
}
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: right;
|
height: 24px;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: #fff;
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: #fff;
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
|
.el-pagination__jump {
|
margin-left: 12px;
|
.el-pagination__editor {
|
width: 37px;
|
input {
|
width: 32px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
|
<style >
|
.el-date-table td.start-date span,
|
.el-date-table td.end-date span {
|
background-color: #0065ff;
|
}
|
|
.el-button--text span {
|
color: #0065ff;
|
}
|
|
.el-button.is-plain:hover,
|
.el-button.is-plain:focus {
|
color: #0065ff;
|
border-color: #0065ff;
|
}
|
</style>
|
