<template>
|
<div class="sub-account" v-if="!isShowAdd">
|
<div class="search">
|
<div class="left">
|
<div class="id">
|
点位名称/企业编码/场景
|
<el-input v-model="inputText" placeholder="请输入" clearable></el-input>
|
</div>
|
</div>
|
|
<div class="right">
|
<div class="button searchBtn" @click="checkCamerasList(1)">搜索</div>
|
</div>
|
</div>
|
<div class="btns">
|
<div class="button add" @click="addPoint">
|
<span class="iconfont"></span>
|
<span>添加点位</span>
|
</div>
|
</div>
|
<div class="switchBox">
|
<span style="margin-right:10px">开启上报</span>
|
<el-switch v-model="value1" active-color="#0065ff" @change="changeAll($event)"> </el-switch>
|
</div>
|
<div class="table-area">
|
<el-table
|
v-loading="tbLoading"
|
id="pointTable"
|
ref="pointTable"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'companyCode', order: 'ascending' }"
|
>
|
<el-table-column prop="cameraName" label="点位名称" width="130px" show-overflow-tooltip></el-table-column>
|
<el-table-column
|
prop="channelCode"
|
label="报警通道编码"
|
min-width="250px"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column prop="companyCode" label="企业编码" width="150px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{ scope.row.companyCode | fillCompanyCode(companyCodeOptions) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="scenes" label="推送场景" min-width="100px" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="updatedAt" label="推送时间" width="100px" show-overflow-tooltip>
|
<template slot-scope="scope">{{ scope.row.startTime }}-{{ scope.row.endTime }}</template>
|
</el-table-column>
|
<el-table-column prop="Enable" label="开关" width="60px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<el-switch v-model="scope.row.enable" @change="changeSwitch($event, scope.row)" active-color="#0065ff">
|
</el-switch>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="100px">
|
<template slot-scope="scope">
|
<span class="iconfont option" @click="editCameras(scope.row)">编辑</span>
|
<span class="iconfont option" style="color:red" @click="delCameras(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>
|
<div class="sub-account" v-else-if="isShowAdd">
|
<div class="head-name" style="margin-bottom:20px">编辑点位</div>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
:label-position="'left'"
|
ref="ruleForm"
|
label-width="120px"
|
class="add-ruleForm"
|
>
|
<el-form-item label="点位名称" prop="CameraName">
|
<el-select filterable style="width: 350px" v-model="ruleForm.CameraName" placeholder="请选择">
|
<el-option v-for="item in cameraOptions" :key="item.id" :label="item.name" :value="item.name"> </el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="报警通道编码" prop="ChannelCode">
|
<el-input v-model="ruleForm.ChannelCode" placeholder="请输入报警通道编码" style="width: 350px"></el-input>
|
</el-form-item>
|
<el-form-item label="企业编码" prop="CompanyCode">
|
<el-select style="width: 350px" v-model="ruleForm.CompanyCode" placeholder="请选择">
|
<el-option v-for="item in companyCodeOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="推送场景" prop="Sceneslist">
|
<el-select multiple style="width: 350px" v-model="ruleForm.Sceneslist" filterable placeholder="请选择">
|
<el-option v-for="item in scene_nameOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="推送时间" required>
|
<el-col :span="12" style="width: 175px">
|
<el-form-item prop="StartTime">
|
<el-time-select
|
style="width: 175px"
|
placeholder="起始时间"
|
v-model="ruleForm.StartTime"
|
:picker-options="{
|
start: '00:00',
|
step: '00:30',
|
end: ruleForm.EndTime ? ruleForm.EndTime : '24:00',
|
maxTime: ruleForm.EndTime
|
}"
|
>
|
</el-time-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" style="width: 175px">
|
<el-form-item prop="EndTime">
|
<el-time-select
|
style="width: 175px"
|
placeholder="结束时间"
|
v-model="ruleForm.EndTime"
|
:picker-options="{
|
start: ruleForm.StartTime ? ruleForm.StartTime : '00:00',
|
step: '00:30',
|
end: '24:00',
|
minTime: ruleForm.StartTime
|
}"
|
>
|
</el-time-select>
|
</el-form-item>
|
</el-col>
|
</el-form-item>
|
</el-form>
|
<div class="right">
|
<div class="button searchBtn" @click="save">保存</div>
|
<div class="button resetBtn" @click="resetUser">重置</div>
|
<div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getLocalCameraTree } from "@/api/area"
|
import { getClusterDevList } from "@/api/clusterManage"
|
import { camerasList, camerasCreate, camerasConfig, camerasSwitch, camerasUpdate, camerasDelete } from "@/api/report"
|
import { traverse } from "./point/point"
|
import "./point/point.scss"
|
|
export default {
|
filters: {
|
fillCompanyCode(key, opts) {
|
let obj = opts.find((t) => t.value == key)
|
return obj ? obj.label : key
|
}
|
},
|
data() {
|
return {
|
tbLoading: false,
|
activeColor: "",
|
inactiveColor: "#f0f3f5",
|
value1: false,
|
query: {},
|
inputText: "", //输入框内容
|
cameraOptions: [],
|
scene_nameOptions: [],
|
isShowAdd: false, //是否展示新增弹窗
|
ruleForm: {
|
CameraName: "", // 摄像机名称
|
ChannelCode: "", // 报警通道编号
|
CompanyCode: "", // 所属企业编号
|
Scenes: "", // 推送场景
|
Sceneslist: [], // 推送场景
|
StartTime: "", // 开始时间
|
EndTime: "", // 结束时间
|
|
CameraId: "", // 摄像机id
|
Level: "",
|
Enable: false,
|
createdAt: "",
|
updatedAt: "",
|
id: ""
|
},
|
dataList: [],
|
tip: 1, // 区分保存还是编辑 但是现在没有编辑
|
rules: {
|
CameraName: [{ required: true, message: "请选择点位名称", trigger: "change" }],
|
ChannelCode: [{ required: true, message: "请输入报警通道编码", trigger: "blur" }],
|
CompanyCode: [{ required: true, message: "请输入企业编码", trigger: "blur" }],
|
Sceneslist: [{ type: "array", required: true, message: "请选择推送场景", trigger: "change" }],
|
StartTime: [{ type: "string", required: true, message: "请选择开始时间", trigger: "change" }],
|
EndTime: [{ type: "string", required: true, message: "请选择结束时间", trigger: "change" }]
|
},
|
page: 1,
|
size: 20, //分页相关
|
total: 0, //总数
|
companyCodeOptions: [
|
{
|
value: "370300010",
|
label: "370300010/汇丰"
|
},
|
{
|
value: "370300450",
|
label: "370300450/海益"
|
},
|
{
|
value: "370300440",
|
label: "370300440/金汇丰"
|
},
|
{
|
value: "370300480",
|
label: "370300480/中汇"
|
},
|
{
|
value: "370380545",
|
label: "370380545/锦汇"
|
}
|
]
|
}
|
},
|
async created() {
|
let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
|
this.query = query
|
let res = await camerasList(query)
|
this.dataList = res.data
|
this.total = res.total
|
this.scene_nameOptions = this.Constants.sceneNameOptions
|
this.pageInit()
|
},
|
|
methods: {
|
async changeAll(val) {
|
let enable
|
val ? (enable = 1) : (enable = 0)
|
let rsp = await camerasSwitch({ enable: enable })
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
message: "成功!"
|
})
|
// this.checkCamerasList()
|
}
|
},
|
changeSwitch(val, row) {
|
let params = {
|
CameraName: row.cameraName,
|
ChannelCode: row.channelCode,
|
CompanyCode: row.companyCode,
|
Scenes: row.scenes,
|
StartTime: row.startTime,
|
EndTime: row.endTime,
|
CameraId: row.cameraId, //
|
Level: row.level,
|
Enable: val,
|
createdAt: row.createdAt,
|
updatedAt: row.updatedAt,
|
id: row.id
|
}
|
camerasUpdate(params).then((res) => {
|
if (res && res.success) {
|
this.$message({
|
type: "success",
|
message: res.msg
|
})
|
}
|
})
|
},
|
editCameras(row) {
|
this.tip = 2
|
this.isShowAdd = true
|
this.resetUser()
|
this.ruleForm.StartTime = row.startTime
|
this.ruleForm.EndTime = row.endTime
|
this.ruleForm.CameraName = row.cameraName
|
this.ruleForm.ChannelCode = row.channelCode
|
this.ruleForm.CompanyCode = row.companyCode
|
this.ruleForm.Sceneslist = row.scenes.split(",")
|
|
this.ruleForm.Level = row.level
|
this.ruleForm.Enable = row.enable
|
this.ruleForm.createdAt = row.createdAt
|
this.ruleForm.updatedAt = row.updatedAt
|
this.ruleForm.id = row.id
|
},
|
async pageInit() {
|
// 进入页面前的初始化
|
let res = await camerasConfig()
|
// 总开关
|
if (res && res.success) {
|
res.data.enable === 0 ? (this.value1 = false) : (this.value1 = true)
|
}
|
let clusterId = ""
|
let clusterReq = await getClusterDevList()
|
// 查询
|
if (clusterReq && clusterReq.success) {
|
if (clusterReq.data.clusterList.length > 0) {
|
clusterId = clusterReq.data.clusterList[0].cluster_id
|
}
|
}
|
let camereReq = await getLocalCameraTree({ clusterId: clusterId })
|
// 这个是 添加时的点位 是从摄像机页面 来的
|
let array = []
|
this.cameraOptions = traverse(camereReq.data.treeMenu, array)
|
},
|
addPoint() {
|
this.isShowAdd = true
|
this.tip = 1
|
this.resetUser()
|
}, //y
|
save() {
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
if (this.tip !== 1) {
|
// tip1 是添加 其他是编辑
|
let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
|
let params = {
|
CameraName: this.ruleForm.CameraName,
|
ChannelCode: this.ruleForm.ChannelCode,
|
CompanyCode: this.ruleForm.CompanyCode,
|
Scenes: this.ruleForm.Sceneslist.toString(),
|
StartTime: this.ruleForm.StartTime,
|
EndTime: this.ruleForm.EndTime,
|
CameraId: obj.id, //
|
Level: this.ruleForm.Level,
|
Enable: this.ruleForm.Enable,
|
createdAt: this.ruleForm.createdAt,
|
updatedAt: this.ruleForm.updatedAt,
|
id: this.ruleForm.id
|
}
|
// 编辑
|
camerasUpdate(params).then((res) => {
|
if (res && res.success) {
|
this.$message({
|
type: "success",
|
message: res.msg
|
})
|
this.goback()
|
this.checkCamerasList()
|
}
|
})
|
} else {
|
let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
|
let params = {
|
CameraName: this.ruleForm.CameraName,
|
ChannelCode: this.ruleForm.ChannelCode,
|
CompanyCode: this.ruleForm.CompanyCode,
|
Scenes: this.ruleForm.Sceneslist.toString(),
|
StartTime: this.ruleForm.StartTime,
|
EndTime: this.ruleForm.EndTime,
|
CameraId: obj.id, //
|
Level: this.ruleForm.Level,
|
Enable: this.ruleForm.Enable
|
}
|
// 新建
|
camerasCreate(params).then((res) => {
|
if (res && res.success) {
|
this.$message({
|
type: "success",
|
message: res.msg
|
})
|
this.goback()
|
this.checkCamerasList()
|
}
|
})
|
}
|
} else {
|
return false
|
}
|
})
|
},
|
handleSizeChange(size) {
|
this.size = size
|
this.checkCamerasList(1)
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page
|
this.checkCamerasList(1)
|
},
|
delCameras(row) {
|
this.$confirm("确认要删除该点位吗, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(async () => {
|
let rsp = await camerasDelete({ id: row.id })
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
message: "删除成功!"
|
})
|
}
|
this.checkCamerasList()
|
})
|
},
|
async checkCamerasList(val) {
|
this.tbLoading = true
|
if (val === 1) {
|
let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
|
this.query = query
|
let res = await camerasList(query)
|
this.dataList = res.data
|
this.total = res.total
|
} else {
|
let res = await camerasList(this.query)
|
this.dataList = res.data
|
this.total = res.total
|
}
|
|
setTimeout(() => {
|
this.tbLoading = false
|
}, 300)
|
},
|
resetUser() {
|
// this.ruleForm. = {
|
this.ruleForm.CameraName = ""
|
this.ruleForm.ChannelCode = ""
|
this.ruleForm.CompanyCode = ""
|
this.ruleForm.Sceneslist = []
|
this.ruleForm.StartTime = ""
|
this.ruleForm.EndTime = ""
|
},
|
goback() {
|
this.isShowAdd = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.sub-account {
|
padding: 20px;
|
.head-name {
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 22px;
|
color: #3d3d3d;
|
border-left: 4px solid #0065ff;
|
padding-left: 10px;
|
}
|
.add-title {
|
font-weight: 700;
|
font-size: 16px;
|
cursor: pointer;
|
line-height: 22px;
|
color: #3d3d3d;
|
margin-bottom: 30px;
|
.iconfont {
|
margin-right: 10px;
|
}
|
}
|
.add-ruleForm::v-deep {
|
.el-input__inner {
|
color: #3d3d3d;
|
border-radius: 4px;
|
border-color: #c0c5cc;
|
height: 32px;
|
line-height: 32px;
|
border-color: #c0c5cc;
|
}
|
.user-tree {
|
.el-form-item__label:before {
|
content: "*";
|
color: #f52323;
|
margin-right: 4px;
|
}
|
.el-form-item__content {
|
display: flex;
|
.tree-box {
|
.t {
|
height: 32px;
|
background: #f0f5fa;
|
border-radius: 3px 3px 0px 0px;
|
line-height: 32px;
|
text-align: center;
|
border-bottom: 1px solid #c0c5cc;
|
}
|
width: 336px;
|
height: 480px;
|
border: 1px solid #c0c5cc;
|
margin-right: 20px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
.searchBtn {
|
width: 50px;
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
margin-right: 20px;
|
}
|
.right {
|
display: flex;
|
}
|
.resetBtn {
|
width: 50px;
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
text-align: center;
|
color: #0065ff;
|
box-sizing: border-box;
|
border: 1px solid #0065ff;
|
}
|
.search {
|
display: flex;
|
font-size: 14px;
|
border-bottom: 1px solid #e9ebee;
|
margin-top: 30px;
|
padding-bottom: 20px;
|
.left,
|
.right,
|
.id,
|
.time,
|
.cluster {
|
display: flex;
|
align-items: center;
|
.el-select {
|
width: auto;
|
}
|
}
|
|
.id .el-input ::v-deep {
|
width: 200px;
|
}
|
|
.cluster::v-deep .el-input {
|
width: 300px;
|
|
margin-left: 10px;
|
margin-right: 20px;
|
.el-input__icon {
|
line-height: 32px;
|
}
|
input {
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 200px;
|
margin-left: 10px;
|
margin-right: 20px;
|
height: 32px;
|
line-height: 32px;
|
input {
|
border-radius: 0;
|
height: 32px;
|
line-height: 32px;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor {
|
width: 318px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&.is-active {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.btns {
|
display: flex;
|
margin: 20px 0;
|
text-align: center;
|
justify-content: space-between;
|
|
.add {
|
margin-right: 20px;
|
width: 126px;
|
height: 32px;
|
background: #0065ff;
|
color: #fff;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
|
.export {
|
width: 126px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
box-sizing: border-box;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
}
|
.switchBox {
|
display: flex;
|
align-items: center;
|
float: right;
|
position: absolute;
|
right: 20px;
|
top: 130px;
|
font-size: 14px;
|
}
|
.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: 14px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: center;
|
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-select ::v-deep {
|
.el-select__tags-text {
|
color: #3d3d3d;
|
}
|
}
|
}
|
</style>
|
|
<style>
|
/* .el-switch__core {
|
height: 32px !important;
|
}
|
.el-switch__core::after {
|
height: 30px !important;
|
width: 30px !important;
|
} */
|
.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;
|
}
|
|
/* .el-switch__core {
|
width: 40px !important;
|
height: 20px;
|
}
|
.el-switch__core::after {
|
width: 16px;
|
height: 16px;
|
margin-top: -1px;
|
}
|
.el-switch.is-checked .el-switch__core::after {
|
margin-left: -17px;
|
} */
|
</style>
|
