<template>
|
<div class="EquipmentForm">
|
<div class="back"><span class="iconfont" @click="hiddenList"></span>{{ name }}</div>
|
<div class="header">
|
<div class="search">
|
<el-input v-model="searchInput" placeholder="请输入内容"></el-input>
|
<div class="button searchBtn" @click="getDevice">搜索</div>
|
<div class="button settingBtn" @click="showSettingBox = true">设置</div>
|
</div>
|
|
<div class="polling">
|
<div class="label">轮询时间 :</div>
|
<div class="data">五分钟</div>
|
<div class="label">轮询周期 :</div>
|
<div class="data">五分钟</div>
|
<div class="label">轮询开关 :</div>
|
<div class="data">已开启</div>
|
</div>
|
</div>
|
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
tooltip-effect="dark"
|
:data="dataList"
|
:fit="true"
|
:stripe="true"
|
>
|
<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
|
<el-table-column label="摄像机名称" align="center" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span>{{ scope.row.alias !== "" ? scope.row.alias : scope.row.name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="摄像机地址" prop="addr" align="center" show-overflow-tooltip></el-table-column>
|
<el-table-column label="摄像机IP" prop="ip" align="center"></el-table-column>
|
<el-table-column label="摄像机类型" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.runType | cameraType }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="执行算法" align="center" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span v-if="scope.row.tasks != null">{{ scope.row.tasks | taskList }}</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="运行设备" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.runServerName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" align="center" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span v-if="scope.row.isRunning">{{ "处理中" }}</span>
|
<span v-else>{{ "等待处理" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="实时/轮询" align="center" width="100px">
|
<template slot-scope="scope">
|
<span v-if="scope.row.runType == -1">-</span>
|
<toggle-button
|
v-else
|
:value="scope.row.runType == 1"
|
:width="60"
|
:labels="{ checked: '实时', unchecked: '轮询' }"
|
:color="{
|
checked: '#4D88FF',
|
unchecked: '#FF7733',
|
disabled: '#CCCCCC'
|
}"
|
:sync="true"
|
@change="pollSwitch(scope.row)"
|
/>
|
</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
|
:small="true"
|
></el-pagination>
|
</div>
|
</div>
|
|
<SettingBox v-if="showSettingBox" @close="showSettingBox = false" :id="id"></SettingBox>
|
</div>
|
</template>
|
|
<script>
|
import SettingBox from "./SettingBox"
|
import { getCameraByPage } from "@/api/clusterManage"
|
import { changeRunType } from "@/api/pollConfig"
|
|
export default {
|
props: {
|
id: {},
|
name: {}
|
},
|
components: {
|
SettingBox
|
},
|
created() {
|
this.getDevice()
|
},
|
data() {
|
return {
|
searchInput: "",
|
showSettingBox: false,
|
dataList: [],
|
page: 1,
|
size: 10,
|
total: 100
|
}
|
},
|
methods: {
|
async getDevice() {
|
const res = await getCameraByPage({
|
deviceId: this.id,
|
inputText: this.searchInput,
|
page: this.page,
|
size: this.size
|
})
|
if (res && res.success) {
|
this.dataList = res.data.lists
|
this.total = res.data.total
|
}
|
// 根据rtsp 提取ip地址
|
const ipReg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
|
this.dataList.forEach((cam) => {
|
// 国标摄像机不显示ip
|
if (cam.type === 1) {
|
cam.ip = "-"
|
return
|
}
|
let ip = ipReg.exec(cam.rtsp)
|
if (ip.length > 0) {
|
cam.ip = ip[0]
|
}
|
})
|
},
|
handleSizeChange(size) {
|
this.size = size
|
this.getDevice()
|
},
|
refrash(page) {
|
this.page = page
|
this.getDevice()
|
},
|
hiddenList() {
|
this.$emit("hiddenList")
|
},
|
pollSwitch(row) {
|
row.runType = row.runType ^ 1
|
changeRunType({
|
camera_ids: [row.id],
|
run_type: row.runType ^ 1,
|
clusterId: row.clusterId
|
}).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "配置成功"
|
})
|
} else {
|
this.$notify({
|
type: "error",
|
message: "配置失败"
|
})
|
}
|
|
// this.PollData.fetchPollList();
|
})
|
}
|
},
|
filters: {
|
cameraType(type) {
|
return type === -1 ? "监控摄像机" : "AI摄像机"
|
},
|
taskList(tasks) {
|
return tasks
|
.map((task) => {
|
return task.taskname
|
})
|
.join(",")
|
},
|
switchText(type) {
|
return type ? "已开启" : "未开启"
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.EquipmentForm {
|
box-sizing: border-box;
|
padding: 20px;
|
background-color: #fff;
|
.back {
|
margin-bottom: 30px;
|
font-size: 18px;
|
font-weight: 700;
|
span {
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
}
|
|
.header {
|
display: flex;
|
height: 32px;
|
justify-content: space-between;
|
|
.search {
|
display: flex;
|
.el-input ::v-deep {
|
height: 32px;
|
width: 300px;
|
.el-input__inner {
|
height: 32px;
|
width: 300px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.searchBtn {
|
height: 32px;
|
width: 80px;
|
background: #0065ff;
|
font-size: 14px;
|
color: #fff;
|
line-height: 32px;
|
text-align: center;
|
}
|
|
.settingBtn {
|
margin-left: 20px;
|
width: 60px;
|
height: 32px;
|
background: #0065ff;
|
font-size: 14px;
|
color: #fff;
|
line-height: 32px;
|
text-align: center;
|
}
|
}
|
|
.polling {
|
display: flex;
|
font-size: 14px;
|
color: #666;
|
|
.label {
|
margin-right: 5px;
|
}
|
|
.data {
|
font-weight: 700;
|
margin-right: 20px;
|
}
|
}
|
}
|
|
.el-table ::v-deep {
|
margin-top: 20px;
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::before {
|
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: rgba(240, 245, 250, 0.6) !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: rgba(240, 245, 250, 0.6) !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 24px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
}
|
|
.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;
|
height: 22px;
|
line-height: 22px;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
|
.el-input__suffix {
|
height: 120%;
|
top: -1px;
|
}
|
|
.el-pagination__total {
|
font-weight: 700;
|
}
|
}
|
|
.el-switch ::v-deep {
|
height: 24px;
|
.el-switch__core {
|
height: 24px;
|
border-radius: 16px;
|
}
|
.el-switch__core::after {
|
margin-top: 2px;
|
margin-left: 3px;
|
width: 16px;
|
height: 16px;
|
background-color: #ff6a00;
|
}
|
}
|
.el-switch.is-checked ::v-deep {
|
.el-switch__core::after {
|
margin-left: -20px;
|
|
background-color: #0065ff;
|
}
|
}
|
|
.switch {
|
position: relative;
|
.activeText {
|
position: absolute;
|
top: 1px;
|
left: 5px;
|
font-size: 12px;
|
color: #0065ff;
|
cursor: pointer;
|
user-select: none;
|
}
|
|
.inactiveText {
|
position: absolute;
|
top: 1px;
|
left: 26px;
|
font-size: 12px;
|
color: #ff6a00;
|
cursor: pointer;
|
user-select: none;
|
}
|
}
|
}
|
</style>
|
