<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>
|
|
<div class="right">
|
<div class="button searchBtn" @click="searchingBtn">搜索</div>
|
<div class="button resetBtn" @click="clearSearch">重置</div>
|
</div>
|
</div>
|
|
<div class="btns">
|
<div class="button add" @click="isShowAdd = true"><span>+</span>添加设备</div>
|
<div class="button export" @click="exportFile"><span class="iconfont"></span>导出</div>
|
</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="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="185" 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 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 bus from "@/plugin/bus"
|
|
export default {
|
components: {
|
AddBox,
|
UnbindBox,
|
QuitClusterBox,
|
JoinClusterBox
|
},
|
created() {
|
this.getCluster()
|
},
|
data() {
|
return {
|
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)
|
|
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.searchingBtn()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.FormList {
|
.search {
|
display: flex;
|
justify-content: space-between;
|
padding: 60px 0 30px 0;
|
font-size: 14px;
|
border-bottom: 1px solid #e9ebee;
|
background-color: #fff;
|
|
.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: 110px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
margin-right: 20px;
|
}
|
|
.resetBtn {
|
width: 110px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
color: #0065ff;
|
border: 1px solid #0065ff;
|
}
|
}
|
|
.btns {
|
display: flex;
|
margin: 30px 0;
|
text-align: center;
|
line-height: 40px;
|
|
.add {
|
margin-right: 20px;
|
width: 140px;
|
height: 40px;
|
background: #0065ff;
|
color: #fff;
|
span {
|
margin-right: 10px;
|
font-weight: 700;
|
font-size: 18px;
|
}
|
}
|
|
.export {
|
width: 140px;
|
height: 40px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
|
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: #f0f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !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>
|
