1007 lines
45 KiB
Vue
1007 lines
45 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="changeVideoTypeBox whiteBlock" v-if="COMPANY!='zhongjian'"><!--#{{videoType}}-->
|
||
<p class="tips">{{$t('message.videoManage.video_type_tips')}}</p>
|
||
<div class="videoType">
|
||
<p v-for="(item,index) in videoTypeList" :key="index" @click="beforeCut(index+1,item)">
|
||
<span>{{item}}</span>
|
||
<img v-show="videoType!=index+1" src="@/assets/images/switch.png" class="switch">
|
||
<img v-show="videoType==index+1" src="@/assets/images/switch_active.png" class="switch">
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="videoList" :class="COMPANY=='zhongjian'?'zhongjianvideoList':''">
|
||
<!--视频列表-->
|
||
<div class="fullHeight">
|
||
<div class="videoGroupBox fullHeight whiteBlock">
|
||
<div class="title">
|
||
<!-- 视频分组 -->
|
||
<span>{{$t('message.videoManage.videoGrouping')}}</span>
|
||
</div>
|
||
<div class="list_content">
|
||
<vue-scroll v-if="groupList.length>0">
|
||
<div
|
||
class="flex content_data"
|
||
:class="{'active':activeGroupIndex==='' }"
|
||
@click="changeGroupFn(null,'')"
|
||
>
|
||
<!-- 全部 -->
|
||
{{$t('message.videoManage.whole')}}
|
||
</div>
|
||
<div
|
||
class="flex content_data"
|
||
v-for="(item,index) in groupList"
|
||
:key="index"
|
||
:class="{'active':activeGroupIndex===index }"
|
||
@click="changeGroupFn(item,index)"
|
||
>
|
||
<div :title="item.groupName" style="width: 110px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.groupName}}</div>
|
||
<div class="flex2">
|
||
<img
|
||
@click.stop="editGroupFn(item)"
|
||
src="@/assets/images/icon-edit.png"
|
||
style="margin-right:16px"
|
||
class="icon"
|
||
/>
|
||
<img
|
||
@click.stop="deleteGroupFn(item)"
|
||
src="@/assets/images/icon-delete.png"
|
||
class="icon"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-else>{{$t('message.personnelPosition.mapManage.no_data')}}</div>
|
||
</div>
|
||
<div class="addFirm" @click="addGroupDialog=true;isAddGroup=true;addGroupForm.groupName=''">
|
||
<!-- 新增分组 -->
|
||
{{$t('message.videoManage.newGrouping')}}
|
||
</div>
|
||
</div>
|
||
<div class="rightVideo whiteBlock">
|
||
<div>
|
||
<el-button
|
||
type="primary"
|
||
@click="Popup.newVideo=true"
|
||
size="medium"
|
||
>{{$t('message.videoManage.dialog_newVideo.operation.add')}}
|
||
<!-- {{$t('message.videoManage.add')}}{{$t('message.videoManage.video')}} -->
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="Popup.accountConfig=true"
|
||
size="medium"
|
||
>{{$t('message.videoManage.configAccount')}}
|
||
</el-button>
|
||
<el-button v-if="videoType==3"
|
||
type="primary"
|
||
@click="aiOperate"
|
||
size="medium"
|
||
>
|
||
<!-- AI布防 -->
|
||
{{$t('message.videoManage.aiDeployment')}}
|
||
</el-button>
|
||
<el-button v-if="videoType==3"
|
||
type="primary"
|
||
@click="getOrganizationID"
|
||
size="medium"
|
||
>
|
||
<!-- 获取组织id -->
|
||
{{$t('message.videoManage.getOrganId')}}
|
||
</el-button>
|
||
<el-button v-if="videoType==3"
|
||
type="primary"
|
||
@click="Popup.equipment=true"
|
||
size="medium"
|
||
>{{$t('message.videoManage.syncDev')}}
|
||
</el-button>
|
||
<el-button v-if="videoType==1"
|
||
type="primary"
|
||
@click="Popup.playPattern=true"
|
||
size="medium"
|
||
>{{$t('message.videoManage.configPlayMode')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="uploadThirdParty"
|
||
size="medium"
|
||
>
|
||
<!-- 上传第三方平台 -->
|
||
{{$t('message.videoManage.uploadThirdParty')}}
|
||
</el-button>
|
||
</div>
|
||
<vue-scroll style="height:calc(100% - 34px)">
|
||
<camera-list v-if="videoType===1" @editDevice="edit" ref="camera"></camera-list>
|
||
<camera-list-lc v-if="videoType===2||videoType===3" @editDevice="edit" ref="cameralc"></camera-list-lc>
|
||
</vue-scroll>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 配置视频类型 -->
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.videoManage.dialog_video_config.title')" :visible.sync="configDialog"
|
||
width="667px" :close-on-click-modal="false"
|
||
:show-close="false">
|
||
<div class="dialog_content">
|
||
<p>{{$t('message.videoManage.dialog_video_config.content')}}</p>
|
||
<el-radio-group v-model="videoType" class="videoTypeGroup">
|
||
<el-radio :label="index+1" v-for="(item,index) in videoTypeList" :key="index">{{item}}</el-radio>
|
||
</el-radio-group>
|
||
<p style="opacity: 0.5;font-size: 13px;">{{$t('message.videoManage.dialog_video_config.tips')}}</p>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveVideoConfigFn"
|
||
size="medium"
|
||
>{{$t('message.companyDiagram.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!--新增设备--><!--:title="operation==='edit'?'编辑设备':'新增设备'"-->
|
||
<el-dialog :modal-append-to-body="false" @close="emptyInfo" :title="$t('message.videoManage.dialog_newVideo.operation')[operation]"
|
||
:visible.sync="Popup.newVideo"
|
||
width="667px">
|
||
<div class="dialog_content">
|
||
<el-form class="dialogFormBox" label-width="100px" size="medium" :model="currentVideoTypeDetail" :rules="formRules">
|
||
<!-- 所属分组 -->
|
||
<el-form-item
|
||
:label="$t('message.videoManage.group')"
|
||
prop="groupId"
|
||
>
|
||
<el-select
|
||
v-model="currentVideoTypeDetail.groupId"
|
||
:placeholder="$t('message.videoManage.pleaseSelect')" :clearable="true"
|
||
>
|
||
<el-option
|
||
v-for="item in groupList"
|
||
:key="item.id"
|
||
:label="item.groupName"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.videoManage.dialog_newVideo.equipment_name')" prop="videoName">
|
||
<el-input v-model="currentVideoTypeDetail.videoName"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="videoType=='1'" :label="$t('message.videoManage.dialog_newVideo.serialNumber')">
|
||
<el-input :disabled="operation==='edit'"
|
||
v-model="currentVideoTypeDetail.serialNumber"
|
||
:placeholder="$t('message.videoManage.dialog_newVideo.serialNumber_placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="videoType=='3'" :label="$t('message.videoManage.dialog_newVideo.cameraCode')">
|
||
<el-input :disabled="operation==='edit'"
|
||
v-model="currentVideoTypeDetail.serialNumber"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="videoType=='1'" :label="$t('message.videoManage.dialog_newVideo.verificationCode')">
|
||
<el-input :disabled="operation==='edit'"
|
||
v-model="currentVideoTypeDetail.verificationCode"
|
||
:placeholder="$t('message.videoManage.dialog_newVideo.verificationCode_placeholder')"></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item v-else :label="$t('message.videoManage.dialog_newVideo.channelId')">
|
||
<el-input :disabled="operation==='edit'"
|
||
v-model="currentVideoTypeDetail.channelId"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item :label="$t('message.videoManage.dialog_newVideo.deviceType')"
|
||
class="zdy-radio-group-3rows">
|
||
<el-radio-group v-model="currentVideoTypeDetail.deviceType">
|
||
<el-radio :label="index+1" v-for="(item,index) in deviceTypeList" :key="index">{{item}}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<!-- 是否具有AI识别功能 -->
|
||
<el-form-item :label="$t('message.videoManage.isAiDistinguish')"
|
||
class="zdy-radio-group-3rows">
|
||
<el-radio-group v-model="currentVideoTypeDetail.aiFunctionType">
|
||
<el-radio :label="item.value" v-for="(item,index) in isCreateNewUser" :key="index">{{item.label}}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<!-- 直播url -->
|
||
<el-form-item :label="$t('message.videoManage.liveUrl')" v-if="videoType=='2'">
|
||
<el-input
|
||
v-model="currentVideoTypeDetail.liveRadioUrl"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<!-- 视频封面 -->
|
||
<el-form-item :label="$t('message.videoManage.videoCover')">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
:action="$store.state.UPLOADURL"
|
||
:show-file-list="false"
|
||
:before-upload="beforeAvatarUpload"
|
||
:on-success="handleUploadSuccess"
|
||
name="files"
|
||
>
|
||
<div v-if="currentVideoTypeDetail.coverUrl" class="imgBox">
|
||
<img
|
||
:src="currentVideoTypeDetail.coverUrl"
|
||
class="avatar"
|
||
/>
|
||
<i class="el-icon-error redText" @click.stop="currentVideoTypeDetail.coverUrl=''"></i>
|
||
</div>
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<!-- 报警推送人 -->
|
||
<el-form-item
|
||
:label="$t('message.videoManage.alarmPusher')"
|
||
prop="roleId"
|
||
>
|
||
<el-select
|
||
v-model="currentVideoTypeDetail.alarmPushWorkerId"
|
||
:placeholder="$t('message.videoManage.pleaseSelect')" multiple
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="item in accountList"
|
||
:key="item.workerId"
|
||
:label="item.workerName"
|
||
:value="item.userId+''"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- 排序 -->
|
||
<el-form-item :label="$t('message.videoManage.sort')">
|
||
<el-input-number style="width:auto" v-model="currentVideoTypeDetail.sortNum" :placeholder="$t('message.videoManage.theSmaller')"></el-input-number>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="dialog-footer">
|
||
<!--取消-->
|
||
<el-button class="zdy-btn" @click="Popup.newVideo=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="addVideo"
|
||
size="medium">{{$t('message.videoManage.btn_determine')}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!--配置账号-->
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.videoManage.dialog_account_config.title')" :visible.sync="Popup.accountConfig"
|
||
width="667px">
|
||
<div class="dialog_content">
|
||
<el-form label-width="100px" class="dialogFormBox" size="medium">
|
||
<el-form-item :label="videoType=='3'?'ip':$t('message.videoManage.dialog_account_config.account')">
|
||
<el-input v-model="currentVideoTypeDetail.account"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="videoType=='3'?'port':$t('message.videoManage.dialog_account_config.password')">
|
||
<el-input v-model="currentVideoTypeDetail.password"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="videoType=='3'?'APP Key':$t('message.videoManage.dialog_account_config.appId')">
|
||
<el-input v-model="currentVideoTypeDetail.appId"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.videoManage.dialog_account_config.appSecret')">
|
||
<el-input v-model="currentVideoTypeDetail.appSecret"
|
||
:placeholder="$t('message.videoManage.placeholder')"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="dialog-footer">
|
||
<el-button class="zdy-btn" @click="Popup.accountConfig=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="saveAccountConfig"
|
||
size="medium">{{$t('message.videoManage.btn_determine')}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 同步设备 -->
|
||
<el-dialog :modal-append-to-body="false" :ltitle="$t('message.videoManage.syncEquipment')" :visible.sync="Popup.equipment" width="667px">
|
||
<div class="dialog_content zdy-radio-group">
|
||
<!-- <el-form label-position="right" label-width="100px">
|
||
<div style="display: flex;justify-content: center;align-items: center;">
|
||
<img src="../../../assets/images/sync_success.png" alt="">
|
||
<img src="../../../assets/images/sync_error.png" alt="">
|
||
</div>
|
||
</el-form> -->
|
||
|
||
<!-- 请输入组织ID -->
|
||
<el-input v-model="organizationID" :placeholder="$t('message.videoManage.organizationId')"></el-input>
|
||
<div class="dialog-footer">
|
||
<el-button class="zdy-btn" @click="Popup.equipment=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="pullEquipmentFn"
|
||
size="medium">
|
||
<!-- 拉取设备 -->
|
||
{{$t('message.videoManage.pullingEquipment')}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!--配置播放模式-->
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.videoManage.dialog_play_config.title')" :visible.sync="Popup.playPattern"
|
||
width="667px" :close-on-click-modal="false"
|
||
:show-close="false">
|
||
<div class="dialog_content zdy-radio-group">
|
||
<el-form label-position="right" label-width="100px">
|
||
<el-form-item :label="$t('message.videoManage.dialog_play_config.playTypeTitle')">
|
||
<el-radio-group v-model="currentVideoTypeDetail.playType">
|
||
<el-radio :label="index+1" v-for="(item,index) in playTypeList" :key="index">{{item}}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="dialog-footer">
|
||
<el-button class="zdy-btn" @click="Popup.playPattern=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="saveAccountConfig"
|
||
size="medium">{{$t('message.videoManage.btn_determine')}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!--切换其它平台之前的提示-->
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.videoManage.switch_platforms.title')" :visible.sync="Popup.platforms"
|
||
width="667px">
|
||
<div class="dialog_content">
|
||
<div class="platforms-title">
|
||
{{$t('message.videoManage.switch_platforms.platformsTitle')}}"{{Popup.name}}"？
|
||
</div>
|
||
<div class="platforms-msg">{{$t('message.videoManage.switch_platforms.platformsMsg')}}</div>
|
||
<div class="dialog-footer">
|
||
<el-button class="zdy-btn" @click="Popup.platforms=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="cut"
|
||
size="medium">{{$t('message.videoManage.btn_determine')}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加视频分组 -->
|
||
<!-- '添加分组':'编辑分组' -->
|
||
<el-dialog :modal-append-to-body="false" :title="isAddGroup?$t('message.videoManage.addGroup'):$t('message.videoManage.editGroup')" :visible.sync="addGroupDialog" width="667px">
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="addGroupForm"
|
||
ref="addGroupForm"
|
||
:rules="addGroupFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<!-- 分组名称 -->
|
||
<el-form-item :label="$t('message.videoManage.groupName')" prop="groupName">
|
||
<el-input v-model="addGroupForm.groupName"
|
||
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="addGroupDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveGroupFn"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
addVideoItemApi,
|
||
editVideoItemApi,
|
||
deleteVideoItemApi,
|
||
selectVideoItemListByTypeApi,
|
||
selectEnableVideoItemListApi,
|
||
updateVideoConfigEnableApi, editProjectVideoConfigApi,
|
||
projectVideoConfigListApi,setHikSubscriptionByEventApi,
|
||
getHikVideoRegionsApi,saveHikVideoCamerasInfoListApi,
|
||
addVideoGroupApi,deleteVideoGroupApi,editVideoGroupApi,
|
||
getVideoGroupApi,
|
||
sendVideoInfoApi
|
||
} from "@/assets/js/api/equipmentCenter/cameraList";
|
||
import {
|
||
getProjectChilderSystemUserListApi
|
||
} from "@/assets/js/api/configManage";
|
||
import cameraList from "./cameraList";
|
||
import cameraListLc from "./cameraList_lc";
|
||
export default {
|
||
data() {
|
||
return {
|
||
configInfoParams: {},//储存配置信息参数，给新增和编辑使用
|
||
operation: 'add',//新增或者编辑的判断
|
||
Popup: {
|
||
platforms: false,
|
||
newVideo: false,
|
||
accountConfig: false,
|
||
equipment: false,
|
||
playPattern: false,
|
||
name: ''
|
||
},
|
||
account_Config: {},
|
||
projectVideoConfigList: [],
|
||
configDialog: false,
|
||
deviceType: '',
|
||
deviceTypeList: this.$t('message.videoManage.deviceType'),//['枪机', '球机', '热成像', '单兵', '全景', '无人机']
|
||
videoTypeList: this.$t('message.videoManage.videoTypeList'),//['萤石云', '乐橙', 'ISC', '大华', '宇视', '国标']
|
||
playTypeList: this.$t('message.videoManage.playTypeList'),//['RTMP（高清）', 'RTMP（流畅）', 'HLS（高清）', 'HLS（流畅）', '高清轻量级插件（高清）', '流畅轻量级插件（流畅）']
|
||
videoType: 1,//默认为1吗?
|
||
currentVideoTypeDetail: {
|
||
videoName:'',
|
||
alarmPushWorkerId:[],
|
||
sortNum:'',
|
||
groupId:'',
|
||
aiFunctionType:0
|
||
// appSecret: '0a5836c68a7edabcc78e6a18f05bb317'
|
||
},
|
||
isCreateNewUser: [
|
||
{ label: this.$t('message.videoManage.yes'), value: 1 }, // 是
|
||
{ label: this.$t('message.videoManage.deny'), value: 0 } // 否
|
||
],
|
||
formRules:{
|
||
videoName:[
|
||
{ required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' }, // 必填
|
||
]
|
||
},COMPANY:COMPANY,
|
||
accountList:[],
|
||
organizationID:'',
|
||
groupList:[],
|
||
activeGroupIndex:'',
|
||
currentGroupInfo:null,
|
||
isAddGroup:true,
|
||
addGroupDialog:false,
|
||
addGroupForm:{
|
||
groupName:''
|
||
},
|
||
addGroupFormRules:{
|
||
groupName:[
|
||
{ required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' }, // 必填
|
||
]
|
||
},
|
||
projectSn: ''
|
||
}
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getProjectVideoConfigList();
|
||
this.getAccountList()
|
||
this.getVideoGroup()
|
||
},
|
||
components: {cameraList,cameraListLc},
|
||
methods: {
|
||
uploadThirdParty(){
|
||
sendVideoInfoApi({projectSn: this.projectSn}).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.videoManage.uploadSuccess')) // 上传成功！
|
||
}
|
||
})
|
||
},
|
||
editGroupFn(item) {
|
||
this.isAddGroup = false;
|
||
this.addGroupDialog = true;
|
||
this.addGroupForm = JSON.parse(JSON.stringify(item));
|
||
},
|
||
deleteGroupFn(item){
|
||
// 确定删除分组
|
||
this.$confirm(this.$t('message.videoManage.determineDelGroup')+"【" + item.groupName + "】?", this.$t('message.personnelPosition.mapManage.Tips'), {//确定删除楼栋
|
||
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
|
||
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
|
||
type: "warning",
|
||
}).then(() => {
|
||
deleteVideoGroupApi({id: item.id}).then((res) => {
|
||
let a = parseInt(this.activeGroupIndex)
|
||
if(a==this.groupList.length-1){
|
||
a--
|
||
this.activeGroupIndex=a
|
||
this.getVideoList()
|
||
}
|
||
if(this.activeGroupIndex===-1){
|
||
this.activeGroupIndex=''
|
||
}
|
||
this.getVideoGroup();
|
||
|
||
this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
|
||
});
|
||
});
|
||
},
|
||
//新增或编辑楼栋
|
||
saveGroupFn() {
|
||
this.$refs["addGroupForm"].validate((valid) => {
|
||
if (valid) {
|
||
if (this.isAddGroup) {
|
||
this.addGroupForm.projectSn=this.$store.state.projectSn
|
||
addVideoGroupApi(this.addGroupForm).then((res) => {
|
||
this.addGroupDialog = false;
|
||
this.getVideoGroup();
|
||
this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
|
||
});
|
||
} else {
|
||
editVideoGroupApi(this.addGroupForm).then((res) => {
|
||
this.addGroupDialog = false;
|
||
this.getVideoGroup();
|
||
this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
|
||
});
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
//切换分组
|
||
changeGroupFn(item,index){
|
||
this.activeGroupIndex = index;
|
||
this.currentGroupInfo = item;
|
||
this.getVideoList();
|
||
},
|
||
//获取视频分组列表
|
||
getVideoGroup(){
|
||
getVideoGroupApi({ projectSn: this.$store.state.projectSn }).then(res=>{
|
||
this.groupList=res.result
|
||
})
|
||
},
|
||
getOrganizationID(){
|
||
getHikVideoRegionsApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(result) => {
|
||
var dw;
|
||
dw=window.open();
|
||
dw.document.open();
|
||
// 一个新的窗口
|
||
dw.document.write("<html><head><title>"+this.$t('message.videoManage.aNewWindow')+"</title>");
|
||
dw.document.write("<body>");
|
||
// dw.document.write("<img name='i1' src='Temp.jpg'> <br>")
|
||
dw.document.write(result.result+"<br>");
|
||
dw.document.write("</body></html>");
|
||
dw.document.close();
|
||
}
|
||
);
|
||
|
||
},
|
||
pullEquipmentFn(){
|
||
saveHikVideoCamerasInfoListApi({ projectSn: this.$store.state.projectSn,regionIndexCode:this.organizationID }).then(
|
||
(result) => {
|
||
this.$message.success(this.$t('message.videoManage.success1')) // 拉取设备成功！
|
||
this.Popup.equipment=false
|
||
this.$refs.cameralc.getSelectVideoItemListByTypeApi();
|
||
}
|
||
);
|
||
},
|
||
getAccountList() {
|
||
getProjectChilderSystemUserListApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(result) => {
|
||
this.accountList = result.result;
|
||
}
|
||
);
|
||
},
|
||
aiOperate(){
|
||
setHikSubscriptionByEventApi({projectSn: this.$store.state.projectSn}).then(res=>{
|
||
this.$message.success(this.$t('message.videoManage.success2')) // AI布防成功！
|
||
})
|
||
},
|
||
beforeAvatarUpload(file) {
|
||
if (
|
||
file.type != "image/jpeg" &&
|
||
file.type != "image/png" &&
|
||
file.type != "image/jpg" &&
|
||
file.type != "image/bmp"
|
||
) {
|
||
this.$message.error(this.$t('message.companyDiagram.uploadMsg'));//只能上传图片
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
},
|
||
handleUploadSuccess(res) {
|
||
console.log(res);
|
||
this.currentVideoTypeDetail.coverUrl =
|
||
this.$store.state.FILEURL + res.data[0].imageUrl;
|
||
},
|
||
//获取视频列表
|
||
getVideoList(){
|
||
let id = ''
|
||
if(this.activeGroupIndex!==''){
|
||
id=this.groupList[parseInt(this.activeGroupIndex)].id
|
||
}
|
||
this.$nextTick(()=>{
|
||
if (this.videoType === 1) {//萤石云
|
||
this.$refs.camera.getSelectVideoItemListByTypeApi(id);
|
||
}
|
||
if (this.videoType === 2||this.videoType === 3) {//乐橙云、isc
|
||
this.$refs.cameralc.getSelectVideoItemListByTypeApi(id);
|
||
}
|
||
})
|
||
},
|
||
//查询项目各类型的视频配置信息
|
||
getProjectVideoConfigList() {
|
||
projectVideoConfigListApi({projectSn: this.$store.state.projectSn}).then((res) => {
|
||
// this.projectVideoConfigList = res.result;
|
||
//
|
||
if (!res.result) {
|
||
if(COMPANY=='zhongjian'){
|
||
this.videoType=3
|
||
this.saveVideoConfigFn()
|
||
}else{
|
||
this.configDialog = true
|
||
}
|
||
|
||
} else {
|
||
// this.currentVideoTypeDetail = res.result[0];
|
||
this.currentVideoTypeDetail = res.result;
|
||
console.log('配置信息', res.result);
|
||
this.configInfoParams = res.result;
|
||
// this.videoType = res.result[0].videoType;
|
||
this.videoType = res.result.videoType;
|
||
// console.log('查询项目各类型的视频配置信息', res.result)
|
||
this.$nextTick(()=>{
|
||
if (this.videoType === 1) {//萤石云
|
||
this.$refs.camera.setVideoInfo(res.result);
|
||
}
|
||
if (this.videoType === 2||this.videoType === 3) {//乐橙云、isc
|
||
this.$refs.cameralc.setVideoInfo(res.result);
|
||
}
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
saveVideoConfigFn() {
|
||
updateVideoConfigEnableApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
videoType: this.videoType
|
||
}).then((res) => {
|
||
this.configDialog = false
|
||
this.getProjectVideoConfigList()
|
||
});
|
||
},
|
||
addVideo() {
|
||
// this.currentVideoTypeDetail.videoId = this.currentVideoTypeDetail.id;
|
||
let params = {
|
||
videoName: this.currentVideoTypeDetail.videoName,
|
||
serialNumber: this.currentVideoTypeDetail.serialNumber,
|
||
verificationCode: this.currentVideoTypeDetail.verificationCode,
|
||
deviceType: this.currentVideoTypeDetail.deviceType,
|
||
channelId: this.currentVideoTypeDetail.channelId,
|
||
videoId: this.configInfoParams.id,
|
||
appSecret: this.configInfoParams.appSecret,
|
||
liveRadioUrl:this.currentVideoTypeDetail.liveRadioUrl,
|
||
coverUrl:this.currentVideoTypeDetail.coverUrl,
|
||
groupId:this.currentVideoTypeDetail.groupId,
|
||
sortNum:this.currentVideoTypeDetail.sortNum,
|
||
aiFunctionType:this.currentVideoTypeDetail.aiFunctionType,
|
||
}
|
||
console.log(this.currentVideoTypeDetail.aiFunctionType);
|
||
if(this.currentVideoTypeDetail.alarmPushWorkerId&&this.currentVideoTypeDetail.alarmPushWorkerId.length>0){
|
||
params.alarmPushWorkerId=this.currentVideoTypeDetail.alarmPushWorkerId.join(',')
|
||
}
|
||
|
||
if (this.operation === 'edit') {//编辑
|
||
params.projectSn = this.configInfoParams.projectSn;
|
||
params.itemId = this.currentVideoTypeDetail.itemId;
|
||
console.log('编辑内容', this.currentVideoTypeDetail)
|
||
editVideoItemApi(params).then(res => {
|
||
console.log('编辑成功', res)
|
||
if (res.success) {
|
||
this.$message.success(res.message);
|
||
this.Popup.newVideo = false;
|
||
this.getVideoList()
|
||
}
|
||
})
|
||
} else {//新增
|
||
addVideoItemApi(params).then(res => {
|
||
console.log('新增成功', res);
|
||
if (res.success) {
|
||
this.$message.success(res.message);
|
||
this.Popup.newVideo = false;
|
||
this.getVideoList()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
saveAccountConfig() {
|
||
// console.log('saveAccountConfig', this.currentVideoTypeDetail.appId)
|
||
// this.currentVideoTypeDetail.account = 'C86695622';
|
||
// this.currentVideoTypeDetail.password = '123456';
|
||
// this.currentVideoTypeDetail.appId = '66b4fc1d6703468c8ee93b2919a3f20b';
|
||
// this.currentVideoTypeDetail.appSecret = '0a5836c68a7edabcc78e6a18f05bb317';
|
||
editProjectVideoConfigApi(this.currentVideoTypeDetail).then(res => {
|
||
// console.log('res', res)
|
||
this.Popup.playPattern=false
|
||
this.Popup.accountConfig=false
|
||
})
|
||
// console.log('this.currentVideoTypeDetail', this.currentVideoTypeDetail)
|
||
},
|
||
beforeCut(index, item) {
|
||
if (index !== this.videoType) {
|
||
this.Popup.platforms = true;
|
||
this.Popup.name = item;
|
||
this.Popup.videoType = index;
|
||
}
|
||
},
|
||
cut() {
|
||
this.videoType = this.Popup.videoType;
|
||
this.Popup.platforms = false;
|
||
console.log('当前videoType', this.videoType);
|
||
this.saveVideoConfigFn();
|
||
},
|
||
edit(obj) {
|
||
this.operation = 'edit';
|
||
this.Popup.newVideo = true;
|
||
this.currentVideoTypeDetail = JSON.parse(JSON.stringify(obj));
|
||
if(this.currentVideoTypeDetail.alarmPushWorkerId){
|
||
if(this.currentVideoTypeDetail.alarmPushWorkerId.indexOf(',')!=-1){
|
||
this.currentVideoTypeDetail.alarmPushWorkerId=this.currentVideoTypeDetail.alarmPushWorkerId.split(',')
|
||
}else{
|
||
this.currentVideoTypeDetail.alarmPushWorkerId=[this.currentVideoTypeDetail.alarmPushWorkerId]
|
||
}
|
||
}else{
|
||
this.currentVideoTypeDetail.alarmPushWorkerId=[]
|
||
}
|
||
console.log('编辑内容', obj);
|
||
},
|
||
emptyInfo() {
|
||
this.operation = 'add';//关闭弹窗就默认设置为add，编辑会设置edit
|
||
this.currentVideoTypeDetail = {};//关闭弹窗就清除数据避免影响了编辑被禁止修改的内容
|
||
// console.log('查看', this.currentVideoTypeDetail, '和', this.configInfoParams);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.changeVideoTypeBox {
|
||
padding: 17px 30px 21px;
|
||
|
||
.videoType {
|
||
margin-top: 14px;
|
||
font-size: 15px;
|
||
|
||
> p > img {
|
||
cursor: pointer;
|
||
}
|
||
|
||
p {
|
||
display: inline-flex;
|
||
align-content: center;
|
||
margin-right: 68px;
|
||
|
||
.switch {
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.platforms-title {
|
||
color: rgba(42, 46, 63, 1);
|
||
font-size: 17px;
|
||
}
|
||
|
||
.platforms-msg {
|
||
color: rgba(230, 69, 69, 1);
|
||
font-size: 14px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.videoList {
|
||
// padding: 22px 25px;
|
||
margin-top: 14px;
|
||
height: calc(100% - 14px - 97px);
|
||
position: relative;
|
||
}
|
||
.zhongjianvideoList{
|
||
height: calc(100% - 14px);
|
||
}
|
||
.zdy-radio-group {
|
||
/deep/ .el-form-item__label {
|
||
line-height: normal;
|
||
}
|
||
|
||
/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%;
|
||
}
|
||
}
|
||
|
||
.zdy-btn {
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.videoTypeGroup {
|
||
margin: 30px 0;
|
||
}
|
||
.avatar-uploader {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
// overflow: hidden;
|
||
height: 178px;
|
||
width: 178px;
|
||
}
|
||
|
||
.avatar-uploader:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
line-height: 178px;
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
.imgBox {
|
||
position: relative;
|
||
|
||
.el-icon-error {
|
||
font-size: 20px;
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.videoGroupBox {
|
||
width: 212px;
|
||
float: left;
|
||
}
|
||
.rightVideo{
|
||
width: calc(100% - 212px - 15px - 30px);
|
||
height: calc(100% - 30px);
|
||
margin-left: 15px;
|
||
float: left;
|
||
padding: 15px;
|
||
}
|
||
.list_content {
|
||
padding: 10px 0;
|
||
height: calc(100% - 87px - 20px);
|
||
position: relative;
|
||
}
|
||
|
||
.content_data {
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
height: 43px;
|
||
line-height: 43px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
&.active {
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
background-color: @--color-primary;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
.addFirm {
|
||
height: 45px;
|
||
line-height: 45px;
|
||
color: @--color-primary;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
background: #fff;
|
||
border-top: 1px solid #dce6fd;
|
||
font-family: PingFangSC-Regular;
|
||
cursor: pointer;
|
||
}
|
||
.title {
|
||
border-bottom: 1px solid rgba(220, 230, 253, 1);
|
||
color: @--color-primary;
|
||
padding-left: 24px;
|
||
font-size: 14px;
|
||
|
||
span {
|
||
position: relative;
|
||
padding: 16px 0 5px;
|
||
display: inline-block;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: @--color-primary;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|