flx：视频监控新增批量导入、移动、删除
This commit is contained in:
parent
31e082a4ba
commit
d38f0b6325
@ -84,4 +84,14 @@ export const addOcrZonePlaceApi = data => post('xmgl/ocrZonePlace/add', data);
|
||||
// 编辑ocr识别区域位置信息
|
||||
export const editOcrZonePlaceApi = data => post('xmgl/ocrZonePlace/edit', data);
|
||||
// 删除ocr识别区域位置信息
|
||||
export const deleteOcrZonePlaceApi = data => post('xmgl/ocrZonePlace/delete', data);
|
||||
export const deleteOcrZonePlaceApi = data => post('xmgl/ocrZonePlace/delete', data);
|
||||
|
||||
// 摄像机列表
|
||||
// 批量删除
|
||||
export const deleteVideoItemBatchApi = data => post('xmgl/videoItem/deleteBatch', data);
|
||||
// 下载模版
|
||||
export const downloadExcelTemplateApi = data => get('xmgl/videoItem/downloadExcelTemplate', data);
|
||||
// 导入模版
|
||||
export const importExcelApi = data => post('xmgl/videoItem/importExcel', data);
|
||||
// 移动分组
|
||||
export const moveGroupApi = data => post('xmgl/videoItem/moveGroup', data);
|
||||
@ -1,48 +1,87 @@
|
||||
<template>
|
||||
<div style="padding-top:15px">
|
||||
<el-table class="tables" :data="cameraList">
|
||||
<el-table-column prop="videoName" align="center"
|
||||
:label="$t('message.videoManage.equipment_list.name')"
|
||||
></el-table-column>
|
||||
<!-- 直播url -->
|
||||
<el-table-column v-if="videoInfo.videoType==2" prop="liveRadioUrl" :label="$t('message.videoManage.liveUrl')"
|
||||
align="center"></el-table-column>
|
||||
<el-table-column v-else prop="serialNumber" :label="videoInfo.videoType==3?$t('message.videoManage.dialog_newVideo.cameraCode'):$t('message.videoManage.equipment_list.serial_number')"
|
||||
align="center"></el-table-column>
|
||||
<el-table-column prop="deviceState" align="center" label="设备在线状态">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.deviceState == 1 ? '在线' : '离线'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ip" align="center"
|
||||
label="设备ip"
|
||||
></el-table-column>
|
||||
<el-table-column prop="nvrSn" align="center" label="nvr编号">
|
||||
</el-table-column>
|
||||
<el-table-column prop="serialNumber" :label="$t('message.videoManage.equipment_list.deviceTypeTitle')"
|
||||
align="center">
|
||||
<template slot-scope="scope">
|
||||
{{$t('message.videoManage.deviceType')[scope.row.deviceType-1]}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="250"
|
||||
:label="$t('message.alarmValueSet.operation')">
|
||||
<template slot-scope="scope">
|
||||
<div class="tableBtns">
|
||||
|
||||
<div @click="beforeEdit(scope.row)" class="operationText">
|
||||
<img src="@/assets/images/icon-edit.png" width="15px" height="15px"/>
|
||||
<span>{{$t('message.alarmValueSet.edit')}}</span>
|
||||
</div>
|
||||
<div @click="beforeDelete(scope.row)" class="operationText">
|
||||
<img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
|
||||
<span>{{$t('message.videoManage.delete')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <div class="alarm-container" v-for="(i,index) in cameraList" :key="index" @mousemove="current=index"
|
||||
<div style="padding-top: 15px">
|
||||
<el-table
|
||||
class="tables"
|
||||
@select="onSelect"
|
||||
@select-all="onSelect"
|
||||
ref="multipleTable"
|
||||
:data="cameraList"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
align="center"
|
||||
width="55"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="videoName"
|
||||
align="center"
|
||||
:label="$t('message.videoManage.equipment_list.name')"
|
||||
></el-table-column>
|
||||
<!-- 直播url -->
|
||||
<el-table-column
|
||||
v-if="videoInfo.videoType == 2"
|
||||
prop="liveRadioUrl"
|
||||
:label="$t('message.videoManage.liveUrl')"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
v-else
|
||||
prop="serialNumber"
|
||||
:label="
|
||||
videoInfo.videoType == 3
|
||||
? $t('message.videoManage.dialog_newVideo.cameraCode')
|
||||
: $t('message.videoManage.equipment_list.serial_number')
|
||||
"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column prop="deviceState" align="center" label="设备在线状态">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.deviceState == 1 ? "在线" : "离线" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ip"
|
||||
align="center"
|
||||
label="设备ip"
|
||||
></el-table-column>
|
||||
<el-table-column prop="nvrSn" align="center" label="nvr编号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="serialNumber"
|
||||
:label="$t('message.videoManage.equipment_list.deviceTypeTitle')"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ $t("message.videoManage.deviceType")[scope.row.deviceType - 1] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
width="250"
|
||||
:label="$t('message.alarmValueSet.operation')"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div class="tableBtns">
|
||||
<div @click="beforeEdit(scope.row)" class="operationText">
|
||||
<img
|
||||
src="@/assets/images/icon-edit.png"
|
||||
width="15px"
|
||||
height="15px"
|
||||
/>
|
||||
<span>{{ $t("message.alarmValueSet.edit") }}</span>
|
||||
</div>
|
||||
<div @click="beforeDelete(scope.row)" class="operationText">
|
||||
<img
|
||||
src="@/assets/images/icon-delete.png"
|
||||
width="15px"
|
||||
height="15px"
|
||||
/>
|
||||
<span>{{ $t("message.videoManage.delete") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <div class="alarm-container" v-for="(i,index) in cameraList" :key="index" @mousemove="current=index"
|
||||
@mouseleave="current=-1">
|
||||
<ul class="alarm-left">
|
||||
<li class="alarm-item alarm-item-title">
|
||||
@ -74,7 +113,7 @@
|
||||
<img src="@/assets/images/noData2.png" alt="" srcset="">
|
||||
<p>{{$t('message.videoManage.empty')}}</p>
|
||||
</div> -->
|
||||
<!--<el-pagination style="text-align: center;"
|
||||
<!--<el-pagination style="text-align: center;"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
@ -83,7 +122,7 @@
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="400">
|
||||
</el-pagination>-->
|
||||
<!--<tag text="默认"></tag>
|
||||
<!--<tag text="默认"></tag>
|
||||
<tag type="normal" text="normal"></tag>
|
||||
<tag type="grey" text="grey"></tag>
|
||||
<tag type="violet" text="violet"></tag>
|
||||
@ -92,285 +131,323 @@
|
||||
<tag type="success" text="success"></tag>
|
||||
<tag type="info" text="info"></tag>-->
|
||||
|
||||
<el-dialog :modal-append-to-body="false" :title="$t('message.videoManage.dialog_play_title')" :visible.sync="play.show" width="90%"
|
||||
class="play" @close="close">
|
||||
<div style="height: 600px;">
|
||||
<ck-play v-if="playType==='pt'" :showSelectBtn="false" :url="play.params.url"></ck-play>
|
||||
<ysy-play v-if="playType==='ysy'" :ysy-params="play.params"></ysy-play>
|
||||
<el-dialog
|
||||
:modal-append-to-body="false"
|
||||
:title="$t('message.videoManage.dialog_play_title')"
|
||||
:visible.sync="play.show"
|
||||
width="90%"
|
||||
class="play"
|
||||
@close="close"
|
||||
>
|
||||
<div style="height: 600px">
|
||||
<ck-play
|
||||
v-if="playType === 'pt'"
|
||||
:showSelectBtn="false"
|
||||
:url="play.params.url"
|
||||
></ck-play>
|
||||
<ysy-play
|
||||
v-if="playType === 'ysy'"
|
||||
:ysy-params="play.params"
|
||||
></ysy-play>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--删除弹窗-->
|
||||
<el-dialog
|
||||
:modal-append-to-body="false"
|
||||
:title="$t('message.videoManage.dialog_delete_title')"
|
||||
:visible.sync="Popup.delete"
|
||||
width="667px"
|
||||
>
|
||||
<div class="dialog_content">
|
||||
<div class="platforms-title">
|
||||
{{ $t("message.videoManage.prompt_before_deleting")[0] }}“{{
|
||||
Popup.title
|
||||
}}”{{ $t("message.videoManage.prompt_before_deleting")[1] }}？
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<el-button
|
||||
class="zdy-btn"
|
||||
@click="Popup.delete = false"
|
||||
size="medium"
|
||||
>
|
||||
<div>
|
||||
<img src="../../../assets/images/cancel.png" alt="" />
|
||||
<span>{{ $t("message.videoManage.btn_cancel") }}</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--删除弹窗-->
|
||||
<el-dialog :modal-append-to-body="false" :title="$t('message.videoManage.dialog_delete_title')" :visible.sync="Popup.delete" width="667px">
|
||||
<div class="dialog_content">
|
||||
<div class="platforms-title">
|
||||
{{$t('message.videoManage.prompt_before_deleting')[0]}}“{{Popup.title}}”{{$t('message.videoManage.prompt_before_deleting')[1]}}？
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="zdy-btn" @click="Popup.delete=false" size="medium">
|
||||
<div>
|
||||
<img src="../../../assets/images/cancel.png" alt="">
|
||||
<span>{{$t('message.videoManage.btn_cancel')}}</span>
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-circle-check"
|
||||
@click="ToDelete"
|
||||
size="medium">{{$t('message.videoManage.btn_determine')}}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-circle-check"
|
||||
@click="ToDelete"
|
||||
size="medium"
|
||||
>{{ $t("message.videoManage.btn_determine") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
selectVideoItemListByTypeApi,
|
||||
deleteVideoItemApi,
|
||||
editVideoItemApi
|
||||
} from '@/assets/js/api/equipmentCenter/cameraList'
|
||||
import tag from '../../../components/tag'
|
||||
import ysyPlay from '../../../views/projectFront/videoManage/ysyPlayAndPlayback'
|
||||
import ckPlay from '@/components/videoModule/ckPlayer'
|
||||
import {
|
||||
selectVideoItemListByTypeApi,
|
||||
deleteVideoItemApi,
|
||||
editVideoItemApi,
|
||||
} from "@/assets/js/api/equipmentCenter/cameraList";
|
||||
import tag from "../../../components/tag";
|
||||
import ysyPlay from "../../../views/projectFront/videoManage/ysyPlayAndPlayback";
|
||||
import ckPlay from "@/components/videoModule/ckPlayer";
|
||||
|
||||
export default {
|
||||
name: "cameraList",
|
||||
components: {
|
||||
tag,
|
||||
ysyPlay,
|
||||
ckPlay
|
||||
},
|
||||
mounted() {
|
||||
// this.getSelectVideoItemListByTypeApi();
|
||||
},
|
||||
props: {
|
||||
// videoInfo: Object,//videoType,projectSn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*videoItemInfo: {},
|
||||
export default {
|
||||
name: "cameraList",
|
||||
components: {
|
||||
tag,
|
||||
ysyPlay,
|
||||
ckPlay,
|
||||
},
|
||||
mounted() {
|
||||
// this.getSelectVideoItemListByTypeApi();
|
||||
},
|
||||
props: {
|
||||
// videoInfo: Object,//videoType,projectSn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*videoItemInfo: {},
|
||||
deviceTypeList: this.$t('message.videoManage.equipment_list.deviceType'),//['枪机', '球机', '热成像', '单兵', '全景', '无人机']*/
|
||||
tag_exception: ['normal', 'info', 'violet', 'danger', 'warning', 'info', 'normal'],
|
||||
// tag_deviceType: ['info'],
|
||||
playType: '',
|
||||
Popup: {
|
||||
delete: false,
|
||||
params: {}
|
||||
},
|
||||
play: {
|
||||
show: false,
|
||||
params: {
|
||||
url: '',
|
||||
accessToken: ''
|
||||
}
|
||||
},
|
||||
current: -1,
|
||||
icon: {
|
||||
video: require('../../../assets/images/icon-watch-video.png'),
|
||||
video_gray: require('../../../assets/images/icon-watch-video-gray.png')
|
||||
},
|
||||
currentPage: 1,
|
||||
videoInfo: {},
|
||||
cameraList: []
|
||||
}
|
||||
tag_exception: [
|
||||
"normal",
|
||||
"info",
|
||||
"violet",
|
||||
"danger",
|
||||
"warning",
|
||||
"info",
|
||||
"normal",
|
||||
],
|
||||
// tag_deviceType: ['info'],
|
||||
playType: "",
|
||||
Popup: {
|
||||
delete: false,
|
||||
params: {},
|
||||
},
|
||||
play: {
|
||||
show: false,
|
||||
params: {
|
||||
url: "",
|
||||
accessToken: "",
|
||||
},
|
||||
methods: {
|
||||
setVideoInfo(obj) {
|
||||
this.videoInfo = {videoType: obj.videoType, projectSn: obj.projectSn};
|
||||
// console.log('参数', this.videoInfo);
|
||||
this.getSelectVideoItemListByTypeApi();
|
||||
},
|
||||
getSelectVideoItemListByTypeApi(id) {
|
||||
console.log('参数', this.videoInfo);
|
||||
this.videoInfo.groupId=id
|
||||
selectVideoItemListByTypeApi(this.videoInfo).then(result => {
|
||||
if (result.success) {
|
||||
console.log('下面的列表渲染',result)
|
||||
this.cameraList = result.result;
|
||||
// console.log('videoInfo', this.videoInfo, '视频列表', this.cameraList);
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange() {
|
||||
},
|
||||
handleCurrentChange() {
|
||||
},
|
||||
toPlay(type, params) {
|
||||
this.play.show = true;
|
||||
this.playType = type;
|
||||
this.play.params = params;
|
||||
console.log('打印params', params)
|
||||
},
|
||||
close() {
|
||||
this.play = {
|
||||
show: false,
|
||||
params: {
|
||||
url: '',
|
||||
accessToken: ''
|
||||
}
|
||||
}
|
||||
console.log('打印play', this.play)
|
||||
},
|
||||
beforeEdit(obj) {
|
||||
// this.Popup.editDevice = true;
|
||||
// this.Popup.params.itemId = itemId;
|
||||
this.$emit('editDevice', obj);
|
||||
console.log('编辑的item', obj)
|
||||
},
|
||||
beforeDelete(itemId) {
|
||||
//groupId
|
||||
this.Popup.delete = true;
|
||||
this.Popup.params.itemId = itemId.itemId;
|
||||
this.Popup.title = itemId.videoName;
|
||||
this.Popup.groupId = itemId.groupId
|
||||
console.log('删除的设备',itemId.videoName)
|
||||
},
|
||||
ToDelete() {
|
||||
deleteVideoItemApi({itemId: this.Popup.params.itemId}).then(result => {
|
||||
console.log('删除成功', result);
|
||||
if (result.success) {
|
||||
this.$message.success(result.message);
|
||||
this.Popup.delete = false;
|
||||
this.getSelectVideoItemListByTypeApi(this.Popup.groupId)
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
current: -1,
|
||||
icon: {
|
||||
video: require("../../../assets/images/icon-watch-video.png"),
|
||||
video_gray: require("../../../assets/images/icon-watch-video-gray.png"),
|
||||
},
|
||||
currentPage: 1,
|
||||
videoInfo: {},
|
||||
cameraList: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSelect() {
|
||||
this.$emit("selectDevice", this.$refs.multipleTable.selection);
|
||||
},
|
||||
setVideoInfo(obj) {
|
||||
this.videoInfo = { videoType: obj.videoType, projectSn: obj.projectSn };
|
||||
// console.log('参数', this.videoInfo);
|
||||
this.getSelectVideoItemListByTypeApi();
|
||||
},
|
||||
getSelectVideoItemListByTypeApi(id) {
|
||||
console.log("参数", this.videoInfo);
|
||||
this.videoInfo.groupId = id;
|
||||
selectVideoItemListByTypeApi(this.videoInfo).then((result) => {
|
||||
if (result.success) {
|
||||
console.log("下面的列表渲染", result);
|
||||
this.cameraList = result.result;
|
||||
// console.log('videoInfo', this.videoInfo, '视频列表', this.cameraList);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSizeChange() {},
|
||||
handleCurrentChange() {},
|
||||
toPlay(type, params) {
|
||||
this.play.show = true;
|
||||
this.playType = type;
|
||||
this.play.params = params;
|
||||
console.log("打印params", params);
|
||||
},
|
||||
close() {
|
||||
this.play = {
|
||||
show: false,
|
||||
params: {
|
||||
url: "",
|
||||
accessToken: "",
|
||||
},
|
||||
};
|
||||
console.log("打印play", this.play);
|
||||
},
|
||||
beforeEdit(obj) {
|
||||
// this.Popup.editDevice = true;
|
||||
// this.Popup.params.itemId = itemId;
|
||||
this.$emit("editDevice", obj);
|
||||
console.log("编辑的item", obj);
|
||||
},
|
||||
beforeDelete(itemId) {
|
||||
//groupId
|
||||
this.Popup.delete = true;
|
||||
this.Popup.params.itemId = itemId.itemId;
|
||||
this.Popup.title = itemId.videoName;
|
||||
this.Popup.groupId = itemId.groupId;
|
||||
console.log("删除的设备", itemId.videoName);
|
||||
},
|
||||
ToDelete() {
|
||||
deleteVideoItemApi({ itemId: this.Popup.params.itemId }).then(
|
||||
(result) => {
|
||||
console.log("删除成功", result);
|
||||
if (result.success) {
|
||||
this.$message.success(result.message);
|
||||
this.Popup.delete = false;
|
||||
this.getSelectVideoItemListByTypeApi(this.Popup.groupId);
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.play /deep/ .el-dialog {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.Playable {
|
||||
//可播放
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NotPlayable {
|
||||
//不可播放
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.current_selected {
|
||||
background-color: rgba(243, 245, 255, 1);
|
||||
box-shadow: 0 1px 8px 2px rgba(81, 129, 246, 0.16);
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: rgba(38, 45, 71, 0.6);
|
||||
}
|
||||
|
||||
.alarm-container:hover {
|
||||
.current_selected;
|
||||
}
|
||||
|
||||
.alarm-container {
|
||||
.flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid rgba(233, 233, 233, 1);
|
||||
border-radius: 3px;
|
||||
margin: 15px 0;
|
||||
|
||||
> ul {
|
||||
flex: 1;
|
||||
|
||||
.alarm-item-title {
|
||||
color: rgba(38, 45, 71, 1);
|
||||
font-size: 16px !important;
|
||||
font-weight: bold;
|
||||
/*font-family: PingFangSC-Medium;*/
|
||||
}
|
||||
|
||||
.play /deep/ .el-dialog {
|
||||
height: 90%;
|
||||
}
|
||||
.alarm-item {
|
||||
font-size: 14px;
|
||||
word-break: break-word;
|
||||
margin: 18px 0 18px 27px;
|
||||
|
||||
.Playable { //可播放
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NotPlayable { //不可播放
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.current_selected {
|
||||
background-color: rgba(243, 245, 255, 1);
|
||||
box-shadow: 0 1px 8px 2px rgba(81, 129, 246, 0.16);
|
||||
}
|
||||
|
||||
.gray {
|
||||
> p {
|
||||
height: 20px;
|
||||
color: rgba(38, 45, 71, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-container:hover {
|
||||
.current_selected;
|
||||
}
|
||||
> div {
|
||||
padding: 7px 0;
|
||||
|
||||
.alarm-container {
|
||||
> img {
|
||||
margin: 0 6px -2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
.flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid rgba(233, 233, 233, 1);
|
||||
border-radius: 3px;
|
||||
margin: 15px 0;
|
||||
justify-content: flex-end;
|
||||
margin-right: 30px;
|
||||
|
||||
> ul {
|
||||
flex: 1;
|
||||
|
||||
.alarm-item-title {
|
||||
color: rgba(38, 45, 71, 1);
|
||||
font-size: 16px !important;
|
||||
font-weight: bold;
|
||||
/*font-family: PingFangSC-Medium;*/
|
||||
}
|
||||
|
||||
.alarm-item {
|
||||
font-size: 14px;
|
||||
word-break: break-word;
|
||||
margin: 18px 0 18px 27px;
|
||||
|
||||
> p {
|
||||
height: 20px;
|
||||
color: rgba(38, 45, 71, 0.6);
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 7px 0;
|
||||
|
||||
> img {
|
||||
margin: 0 6px -2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
.flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 30px;
|
||||
|
||||
i {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin-left: 50px;
|
||||
color: rgba(38, 45, 73, 0.6);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
.flex;
|
||||
|
||||
> div > span {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
> div:last-child > span {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
i {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin-left: 50px;
|
||||
color: rgba(38, 45, 73, 0.6);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zdy-btn {
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn-box {
|
||||
.flex;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
> div > span {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
> div:last-child > span {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zdy-radio-group {
|
||||
/deep/ .el-form-item__label {
|
||||
line-height: normal;
|
||||
}
|
||||
.zdy-btn {
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/deep/ .el-radio-group {
|
||||
.flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> label {
|
||||
width: 50%;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zdy-radio-group-3rows {
|
||||
.zdy-radio-group;
|
||||
.zdy-radio-group {
|
||||
/deep/ .el-form-item__label {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/deep/ .el-radio-group > label {
|
||||
width: 30%;
|
||||
}
|
||||
/deep/ .el-radio-group {
|
||||
.flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> label {
|
||||
width: 50%;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zdy-radio-group-3rows {
|
||||
.zdy-radio-group;
|
||||
|
||||
/deep/ .el-radio-group > label {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -140,6 +140,39 @@
|
||||
<el-button type="primary" @click="accountServerObj" size="medium"
|
||||
>{{ $t("message.videoManage.configAccount") }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="exportBtnTemplate" size="medium"
|
||||
>模版下载
|
||||
</el-button>
|
||||
<el-upload
|
||||
style="margin: 0px 15px; display: inline"
|
||||
class="upload-demo expintBtn"
|
||||
name="excelFile"
|
||||
:on-success="handleImportSuccess"
|
||||
:action="$http.defaults.baseURL + 'xmgl/videoItem/importExcel'"
|
||||
:data="{ projectSn: projectSn, videoType: videoType }"
|
||||
:show-file-list="false"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="headers"
|
||||
>
|
||||
<el-button size="medium" type="primary">批量导入</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
:disabled="selectionList.length == 0"
|
||||
:type="selectionList.length == 0 ? 'info' : 'primary'"
|
||||
@click="moveGroupClick"
|
||||
plain
|
||||
size="medium"
|
||||
>批量移动
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="selectionList.length == 0"
|
||||
:type="selectionList.length == 0 ? 'info' : 'danger'"
|
||||
size="medium"
|
||||
class="delete_btn"
|
||||
plain
|
||||
@click="deleteAttendanceBatch"
|
||||
>删除</el-button
|
||||
>
|
||||
<!-- AI布防 -->
|
||||
<!-- <el-button
|
||||
v-if="videoType == 3"
|
||||
@ -204,12 +237,82 @@
|
||||
this.videoType === 4
|
||||
"
|
||||
@editDevice="edit"
|
||||
@selectDevice="selectDevice"
|
||||
ref="cameralc"
|
||||
></camera-list-lc>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 批量移动 -->
|
||||
<el-dialog
|
||||
:modal-append-to-body="false"
|
||||
title="批量移动"
|
||||
:visible.sync="moveGroupDialog"
|
||||
width="667px"
|
||||
>
|
||||
<div class="dialog_content">
|
||||
<el-form
|
||||
class="dialogFormBox"
|
||||
ref="moveGroupDialog"
|
||||
label-width="100px"
|
||||
size="medium"
|
||||
:model="currentVideoTypeDetail"
|
||||
:rules="formRules"
|
||||
>
|
||||
<!-- 所属分组 -->
|
||||
<el-form-item :label="$t('message.videoManage.group')" prop="groupId">
|
||||
<el-select
|
||||
v-model="selectFormVal"
|
||||
placeholder="请选择"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="filterData"
|
||||
@visible-change="visibleChange"
|
||||
clearable
|
||||
@change="selectFormChange"
|
||||
ref="searchSelect"
|
||||
>
|
||||
<el-option style="height: auto" :value="[]">
|
||||
<el-tree
|
||||
:data="videoTreeDataUp"
|
||||
node-key="id"
|
||||
ref="groupFormTree"
|
||||
highlight-current
|
||||
:props="defaultProps"
|
||||
:default-expand-all="false"
|
||||
@node-click="treeFormClick"
|
||||
:filter-node-method="filterNode"
|
||||
>
|
||||
</el-tree>
|
||||
<!-- :default-expanded-keys="defaultExpandArr" -->
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer">
|
||||
<!--取消-->
|
||||
<el-button
|
||||
class="zdy-btn"
|
||||
@click="moveGroupDialog = false"
|
||||
size="medium"
|
||||
>
|
||||
<div>
|
||||
<img src="../../../assets/images/cancel.png" alt="" />
|
||||
<span>{{ $t("message.videoManage.btn_cancel") }}</span>
|
||||
</div>
|
||||
</el-button>
|
||||
<!--确定-->
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-circle-check"
|
||||
@click="setMoveGroup"
|
||||
size="medium"
|
||||
>{{ $t("message.videoManage.btn_determine") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- nvr -->
|
||||
<el-dialog
|
||||
:modal-append-to-body="false"
|
||||
@ -610,7 +713,7 @@
|
||||
v-if="videoType == '3' || videoType == '7'"
|
||||
:label="$t('message.videoManage.dialog_newVideo.cameraCode')"
|
||||
>
|
||||
<!-- :disabled="operation === 'edit'" -->
|
||||
<!-- :disabled="operation === 'edit'" -->
|
||||
<el-input
|
||||
v-model="currentVideoTypeDetail.serialNumber"
|
||||
:placeholder="$t('message.videoManage.placeholder')"
|
||||
@ -1244,6 +1347,10 @@ import {
|
||||
editPluginApi,
|
||||
delPluginApi,
|
||||
getAllNvrApi,
|
||||
deleteVideoItemBatchApi,
|
||||
downloadExcelTemplateApi,
|
||||
importExcelApi,
|
||||
moveGroupApi,
|
||||
} from "@/assets/js/api/equipmentCenter/cameraList";
|
||||
import { getEnterpriseInfoListApi } from "@/assets/js/api/specialWork";
|
||||
import { getProjectChilderSystemUserListApi } from "@/assets/js/api/configManage";
|
||||
@ -1554,6 +1661,8 @@ export default {
|
||||
isRouterAlive: false,
|
||||
laborManagementInfoList: [],
|
||||
filterText: "",
|
||||
selectionList: [],
|
||||
moveGroupDialog: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -1568,15 +1677,133 @@ export default {
|
||||
components: { cameraList, cameraListLc, gdMap },
|
||||
computed: {
|
||||
videoTreeDataUp() {
|
||||
const resultList = this.recursion(this.videoTreeData)
|
||||
console.log(11111222, resultList)
|
||||
const resultList = this.recursion(this.videoTreeData);
|
||||
console.log(11111222, resultList);
|
||||
return resultList;
|
||||
},
|
||||
headers() {
|
||||
return { Authorization: this.$store.state.userInfo.token };
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
visibleChange(event){
|
||||
console.log(event)
|
||||
if(event){
|
||||
moveGroupClick() {
|
||||
this.selectFormVal = "";
|
||||
this.currentVideoTypeDetail.groupId = "";
|
||||
this.moveGroupDialog = true;
|
||||
},
|
||||
setMoveGroup() {
|
||||
this.$refs.moveGroupDialog.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.selectionList.length === 0)
|
||||
return this.$message.warning("请勾选需要移动的数据！");
|
||||
const itemIds = this.selectionList.map((item) => item.itemId);
|
||||
const params = {
|
||||
itemIds,
|
||||
videoGroupId: this.currentVideoTypeDetail.groupId,
|
||||
projectSn: this.projectSn,
|
||||
};
|
||||
moveGroupApi(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
this.moveGroupDialog = false;
|
||||
this.getVideoList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 导入成功
|
||||
handleImportSuccess(res) {
|
||||
if (res.code == 200) {
|
||||
this.$message.success(res.message);
|
||||
if (this.videoType === 1) {
|
||||
this.$refs.camera.setVideoInfo(this.configInfoParams);
|
||||
} else {
|
||||
this.$refs.cameralc.setVideoInfo(this.configInfoParams);
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
console.log("导入", res);
|
||||
},
|
||||
// 导出模版
|
||||
exportBtnTemplate() {
|
||||
const requestData = {
|
||||
projectSn: this.projectSn,
|
||||
videoType: this.videoType,
|
||||
};
|
||||
fetch(
|
||||
this.$http.defaults.baseURL +
|
||||
`xmgl/videoItem/downloadExcelTemplate?projectSn=${this.projectSn}&videoType=${this.videoType}`,
|
||||
{
|
||||
method: "get",
|
||||
headers: {
|
||||
Authorization: this.$store.state.userInfo.token,
|
||||
"Content-Type": "application/json", // 设置请求头的内容类型为JSON
|
||||
},
|
||||
// body: JSON.stringify(requestData),
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
// 处理响应
|
||||
if (!response.ok) {
|
||||
throw new Error("导出失败");
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then((blob) => {
|
||||
console.log("导出成功");
|
||||
// 创建一个下载链接
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
// 创建一个<a>元素
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "视频监控点模板.xlsx"; // 指定下载文件的文件名
|
||||
// 模拟点击下载链接
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
// 释放URL对象
|
||||
window.URL.revokeObjectURL(url);
|
||||
// 处理导出的文件
|
||||
// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
|
||||
})
|
||||
.catch((error) => {
|
||||
// 处理错误
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
selectDevice(event) {
|
||||
console.log(event);
|
||||
this.selectionList = event;
|
||||
},
|
||||
deleteAttendanceBatch() {
|
||||
if (this.selectionList.length === 0)
|
||||
return this.$message.warning("请勾选需要删除的数据！");
|
||||
this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
console.log(this.selectionList);
|
||||
|
||||
const itemIds = this.selectionList
|
||||
.map((item) => item.itemId)
|
||||
.join(",");
|
||||
deleteVideoItemBatchApi({ itemIds }).then((res) => {
|
||||
this.selectionList = [];
|
||||
this.$refs.cameralc.setVideoInfo(this.configInfoParams);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
visibleChange(event) {
|
||||
console.log(event);
|
||||
if (event) {
|
||||
this.filterText = "";
|
||||
}
|
||||
},
|
||||
@ -1588,13 +1815,13 @@ export default {
|
||||
},
|
||||
recursion(array) {
|
||||
// 递归 筛选出节点的id
|
||||
return array.filter(item => {
|
||||
return array.filter((item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.recursion(item.children);
|
||||
}
|
||||
console.log(item.groupName, item.groupName.indexOf(this.filterText));
|
||||
return item.groupName.indexOf(this.filterText) !== -1;
|
||||
})
|
||||
});
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
@ -1749,7 +1976,7 @@ export default {
|
||||
// appSecret: '0a5836c68a7edabcc78e6a18f05bb317'
|
||||
};
|
||||
this.isRouterAlive = false;
|
||||
if(this.currentGroupInfo.id) {
|
||||
if (this.currentGroupInfo.id) {
|
||||
this.treeFormClick(this.currentGroupInfo);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user