<template>
|
<div class="FormList">
|
<div class="search">
|
<div class="left">
|
<div class="id">
|
<div class="left-txt">设备名称/ID</div>
|
<el-input class="id-input" v-model="inputText" placeholder="请输入设备名称/ID"></el-input>
|
</div>
|
|
<div class="time">
|
<div class="left-txt">设备安装时间</div>
|
|
<el-date-picker
|
style="width: 380px"
|
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">
|
<div class="left-txt">所属集群</div>
|
<div class="cluster-select">
|
<el-select style="width: 200px" 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>
|
</div>
|
<div class="right">
|
<div class="button searchBtn" @click="searchingBtn">搜索</div>
|
<div class="button resetBtn" @click="clearSearch">重置</div>
|
</div>
|
</div>
|
<div class="line"></div>
|
<div class="btns">
|
<div class="button add" @click="isShowAdd = true">
|
<img src="@/assets/img/add.png" alt="" />
|
<div class="button-txt">添加设备</div>
|
</div>
|
<div class="button export" @click="exportFile">
|
<div class="iconfont"></div>
|
<div class="button-txt">导出</div>
|
</div>
|
</div>
|
|
<!-- <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> -->
|
|
<!-- <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> -->
|
|
<!-- height="50"
|
-->
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
:header-cell-style="{ height: '50px' }"
|
ref="multipleTable"
|
tooltip-effect="dark"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
:stripe="true"
|
>
|
<el-table-column label="序号" width="80" 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="210" 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="所属集群" show-overflow-tooltip min-width="154">
|
<template slot-scope="scope"> {{ scope.row.clusterName }} </template>
|
</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">
|
<el-tooltip content="加入集群" placement="top" v-if="!scope.row.clusterId">
|
<span
|
class="iconfont option"
|
@click="joinCluster(scope.row)"
|
:class="{ disable: scope.row.isOnline != 1 }"
|
></span
|
>
|
</el-tooltip>
|
|
<el-tooltip content="退出集群" placement="top" v-else>
|
<span
|
class="iconfont option"
|
@click="quitCluster(scope.row)"
|
:class="{ disable: scope.row.isOnline != 1 }"
|
></span
|
>
|
</el-tooltip>
|
|
<el-tooltip content="应用详情" placement="top">
|
<span
|
class="iconfont option"
|
:class="{ disable: scope.row.isOnline != 1 }"
|
@click="algorithmDetail(scope.row)"
|
></span
|
>
|
</el-tooltip>
|
|
<el-tooltip content="设备详情" placement="top">
|
<span
|
class="iconfont option"
|
:class="{ disable: scope.row.isOnline != 1 }"
|
@click="checkDetail(scope.row)"
|
></span
|
>
|
</el-tooltip>
|
|
<el-tooltip content="解除绑定" placement="top">
|
<span class="iconfont option" @click="Untying(scope.row)" :class="{ disable: scope.row.isOnline != 1 }"
|
></span
|
>
|
</el-tooltip>
|
</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>
|
|
<!-- 解绑弹窗 -->
|
<UnbindBox @close="closeUnbindBox" v-if="isShowUnbind" :id="unbindId" @reflash="reflash"></UnbindBox>
|
|
<!-- 添加设备弹窗 -->
|
<AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox>
|
|
<!-- 退出集群弹窗 -->
|
<QuitClusterBox :equipment="activeEquipment" v-if="showQuit" @close="showQuit = false"></QuitClusterBox>
|
|
<!-- 加入集群弹窗 -->
|
<JoinClusterBox :equipment="activeEquipment" v-if="showJoin" @close="showJoin = false"></JoinClusterBox>
|
</div>
|
</template>
|
|
<script>
|
import { findDevList, findClustersBySearch, exportDevListExcel } from "@/api/device"
|
import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox"
|
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox"
|
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox"
|
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox"
|
import add from "@/assets/img/add.png"
|
import bus from "@/plugin/bus"
|
import "./FormList.scss"
|
export default {
|
components: {
|
AddBox,
|
UnbindBox,
|
QuitClusterBox,
|
JoinClusterBox
|
},
|
created() {
|
this.getCluster()
|
},
|
data() {
|
return {
|
add,
|
searchTime: [], //搜索时间
|
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({
|
InputText: "",
|
Page: 1,
|
Size: 10000,
|
userId: JSON.parse(sessionStorage.getItem("userInfo")).id
|
})
|
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: "/equipmentDetail",
|
query: {
|
id: row.devId
|
}
|
})
|
},
|
|
// 跳到算法详情
|
algorithmDetail(row) {
|
if (row.isOnline != 1) {
|
return
|
}
|
this.$router.push({
|
path: "/algorithmDetail",
|
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()
|
},
|
|
//解绑按钮
|
Untying(row) {
|
if (row.isOnline != 1) {
|
return
|
}
|
this.unbindId = row.devId
|
this.isShowUnbind = true
|
},
|
|
//获得默认时间
|
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")]
|
},
|
|
//关闭新增弹窗
|
closeAddBox() {
|
this.isShowAdd = false
|
this.searchingBtn()
|
},
|
// 关闭解绑弹窗
|
closeUnbindBox() {
|
this.isShowUnbind = false
|
},
|
|
//解绑成功回调
|
reflash() {
|
this.isShowUnbind = false
|
this.searchingBtn()
|
},
|
|
clearSearch() {
|
this.searchTime = this.getDateInit()
|
this.inputText = ""
|
this.cluster = ""
|
this.searchingBtn()
|
},
|
|
//退出集群
|
quitCluster(equipment) {
|
if (equipment.isOnline != 1) {
|
return
|
}
|
this.activeEquipment = equipment
|
this.showQuit = true
|
},
|
|
//加入集群
|
joinCluster(equipment) {
|
if (equipment.isOnline != 1) {
|
return
|
}
|
this.activeEquipment = equipment
|
this.showJoin = true
|
},
|
|
//导出列表文件
|
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)
|
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.searchingBtn()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.FormList {
|
// width: 100%;
|
min-width: 1280px;
|
// padding: 0 24px;
|
// background: #36b24a;
|
background-color: #1f2a3e;
|
border-radius: 18px;
|
// background: #34405a;
|
.search {
|
// margin-bottom: ;
|
display: flex;
|
justify-content: space-between;
|
padding: 24px;
|
.left {
|
display: flex;
|
align-items: center;
|
.left-txt {
|
// height: 20px;
|
white-space: nowrap;
|
font-family: PingFang SC Regular;
|
font-size: 14px;
|
font-weight: normal;
|
line-height: 20px;
|
letter-spacing: 0px;
|
color: #ffffff;
|
margin-right: 16px;
|
}
|
.id,
|
.time,
|
.cluster {
|
display: flex;
|
align-items: center;
|
padding-right: 24px;
|
}
|
.id ::v-deep .el-input .el-input__inner {
|
width: 150px;
|
height: 32px;
|
border-radius: 3px;
|
background: rgb(0, 0, 0, 0.2) !important;
|
}
|
.cluster::v-deep .el-input {
|
width: 250px;
|
height: 32px;
|
// margin-left: 10px;
|
// margin-right: 20px;
|
|
input {
|
border-radius: 1px;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
// &:focus {
|
// border-color: #0065ff;
|
// }
|
}
|
}
|
.cluster {
|
// .cluster-select {
|
// width: 150px;
|
// }
|
.el-select {
|
width: 150px;
|
.el-input .el-input--suffix {
|
width: 150px !important;
|
// border-radius: 3px;
|
}
|
// height: 32px;
|
// line-height: 32px;
|
|
// ::v-deep input {
|
// height: 32px;
|
// }
|
// el-select__caret el-input__icon el-icon-arrow-up
|
::v-deep .el-input__icon {
|
line-height: 28px !important;
|
}
|
}
|
}
|
}
|
.right {
|
display: flex;
|
align-items: center;
|
.button {
|
font-family: PingFang SC Regular;
|
font-size: 14px;
|
font-weight: normal;
|
line-height: 32px;
|
letter-spacing: 0px;
|
padding: 0 16px;
|
border-radius: 3px;
|
margin: 0 4px;
|
}
|
.searchBtn {
|
background: #0082bc;
|
color: #ffffff;
|
}
|
.resetBtn {
|
border: 1px solid #0082bc;
|
color: #0082bc;
|
}
|
}
|
}
|
.line {
|
border: 1px solid #ffffff;
|
opacity: 0.2;
|
margin: 0 24px;
|
}
|
.btns {
|
padding: 24px 24px;
|
display: flex;
|
justify-content: flex-start;
|
.button {
|
padding: 0 16px;
|
margin: 0 4px;
|
|
border-radius: 3px;
|
font-family: PingFang SC Regular;
|
font-size: 14px;
|
font-weight: normal;
|
line-height: 32px;
|
letter-spacing: 0px;
|
display: flex;
|
align-items: center;
|
.button-txt {
|
margin-left: 10px;
|
}
|
.iconfont {
|
// width: 12px;
|
// height: 12px;
|
// line-height: 12px;
|
font-size: 16px;
|
}
|
}
|
.add {
|
background: #0082bc;
|
color: #ffffff;
|
}
|
.export {
|
border: 1px solid #0082bc;
|
color: #0082bc;
|
}
|
}
|
|
.table-area {
|
// min-height: 600px;
|
padding: 0 24px 24px;
|
}
|
.table-area >>> .el-table__row > td {
|
border: none !important;
|
}
|
.el-table::before {
|
height: 0; //表格的线
|
}
|
// .el-table,
|
.el-table ::v-deep {
|
// background-color: rgb(233, 235, 238);
|
padding: 1px;
|
// .el-table__expanded-cell {
|
// background-color: transparent !important;
|
// }
|
// .el-table__header {
|
// background: rgba(255, 255, 255, 0.18) !important;
|
// }
|
|
// .el-table th,
|
// .el-table tr {
|
// background-color: transparent !important;
|
// }
|
|
// .el-table tr
|
// &::after {
|
// display: none;
|
// }
|
|
// td.index .cell {
|
// padding-left: 16px;
|
// padding-right: 4px;
|
// }
|
|
.has-gutter tr th {
|
// background: #f0f3f5;
|
font-size: 16px;
|
color: #ffffff;
|
font-weight: 700;
|
|
font-family: PingFangSC-Bold;
|
font-size: 12px;
|
font-weight: normal;
|
line-height: 20px;
|
letter-spacing: 0px;
|
}
|
|
// td .cell {
|
// color: #3d3d3d;
|
// }
|
|
tr:hover > td.el-table__cell {
|
background: rgba(255, 255, 255, 0.08) !important;
|
}
|
|
.el-table__row .el-table__cell {
|
background-color: transparent !important;
|
}
|
// tr:hover > td.el-table__cell {
|
// // background-color: #fff;
|
// }
|
|
.el-table__row--striped .el-table__cell {
|
background-color: transparent !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 24px;
|
color: #0082bc;
|
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>
|
