| | <template> |
---|
| | <div id="shipingjiankong"> |
---|
| | <div class="leftbox" v-if="!videoList.includes(dataCode)"> |
---|
| | <div class="leftSub"> |
---|
| | <div class="leftTabs"> |
---|
| | <div class="tab" :class="serchParms.groupId==i.id?'active':''" v-for="i in tabsArray" :key="i" @click="changeCamera(i)">{{i.name}}</div> |
---|
| | </div> |
---|
| | <!-- 一级分类 --> |
---|
| | <el-form :model="serchParms" class="serchForm"> |
---|
| | <el-form-item label="类型"> |
---|
| | <el-select |
---|
| | v-model="serchParms.accessType" |
---|
| | placeholder="请选择类型" |
---|
| | style="width: 100%" |
---|
| | > |
---|
| | <el-option :label="i.label" :value="i.value" v-for="i in accessType" :key="i"/> |
---|
| | </el-select> |
---|
| | </el-form-item> |
---|
| | <el-form-item label="名称"> |
---|
| | <el-input v-model="serchParms.name" placeholder="请输入名字" clearable/> |
---|
| | </el-form-item> |
---|
| | <el-form-item> |
---|
| | <el-button type="primary" @click="GetcameraList">搜索</el-button> |
---|
| | </el-form-item> |
---|
| | </el-form> |
---|
| | <div class="onLine flex"> |
---|
| | <div class="flex-1" :class="cameraStatus==i.cameraStatusName?'active':''" @click="cameraStatus=i.cameraStatusName,serchCamera(i.cameraStatus)" v-for="i in state" :key="i">{{i.cameraStatusName}}({{i.number}})</div> |
---|
| | </div> |
---|
| | <div class="cameraTable"> |
---|
| | <el-table :data="cameraList" style="height: 100%" class="dispatchTable" stripe> |
---|
| | <el-table-column label="摄像头名称" show-overflow-tooltip> |
---|
| | <template #default="{row}"> |
---|
| | <span @click="tableActive=row.id,tableSelect(row)" class="blue" :class="tableActive==row.id?'active':''">{{row.name}}</span> |
---|
| | </template> |
---|
| | </el-table-column> |
---|
| | <el-table-column label="类型" width="50"> |
---|
| | <template #default="{row}"> |
---|
| | <svg-icon icon-class="qiangj" class="el-input__icon input-icon" v-if="row.cameraType==1"/> |
---|
| | <svg-icon icon-class="qiuj" class="el-input__icon input-icon" v-if="row.cameraType==2"/> |
---|
| | </template> |
---|
| | </el-table-column> |
---|
| | <el-table-column label="类型" width="50"> |
---|
| | <template #default="{row}"> |
---|
| | {{row.accessType=='owner'?'自建':'共享'}} |
---|
| | </template> |
---|
| | </el-table-column> |
---|
| | <el-table-column label="收藏" width="50"> |
---|
| | <template #default="{row}"> |
---|
| | <span class="pointer" @click="setLike(row)"><el-icon><StarFilled v-if="row.collectFlag"/><Star v-else/></el-icon></span> |
---|
| | </template> |
---|
| | </el-table-column> |
---|
| | </el-table> |
---|
| | </div> |
---|
| | </div> |
---|
| | <!-- <div class="leftbox" v-if="!videoList.includes(dataCode)"> |
---|
| | <div |
---|
| | class="boxitem" |
---|
| | :class="item.cameraId == AllData.cameraIndexCode ? 'actived' : ''" |
---|
| | v-for="item in leftList" |
---|
| |
---|
| | @click="leftclick(item)" |
---|
| | > |
---|
| | {{ item.cameraName }} |
---|
| | </div> |
---|
| | </div> |
---|
| | <div :class="videoList.includes(dataCode) ? 'onebox' : 'rightbox'"> |
---|
| | </div> --> |
---|
| | <!-- <div :class="videoList.includes(dataCode) ? 'onebox' : 'rightbox'"> --> |
---|
| | <div class="rightbox"> |
---|
| | <videoDHone :channelId="AllData.cameraIndexCode"></videoDHone> |
---|
| | </div> |
---|
| | </div> |
---|
| | </template> |
---|
| | |
---|
| | <script setup name="shipingjiankong"> |
---|
| | import { getdataCamera } from '@/api/MonitorAssetsOnMap'; |
---|
| | import { getdataCamera , groupList,listCameraStatus,pageCameraInfoByCameraStatus,collect_uncollect} from '@/api/MonitorAssetsOnMap'; |
---|
| | import videoDHone from '@/components/videoDHone/index.vue'; //实时视频 |
---|
| | import useUserStore from "@/store/modules/user"; |
---|
| | |
---|
| | const props = defineProps({ |
---|
| | // 数据id |
---|
| | dataID: { |
---|
| |
---|
| | }, |
---|
| | }); |
---|
| | |
---|
| | const AllData = reactive({ |
---|
| | |
---|
| | tabsArray:[], |
---|
| | serchParms:{ |
---|
| | cameraUserId: useUserStore().userInfo.userId, |
---|
| | groupId:'', |
---|
| | pageNum:1, |
---|
| | pageSize:999, |
---|
| | cameraStatus:'', |
---|
| | }, |
---|
| | cameraStatus:'全部', |
---|
| | |
---|
| | cameraIndexCode: '', |
---|
| | layout: '1x1', |
---|
| | defaultList: [ |
---|
| | // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 }, |
---|
| | // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 }, |
---|
| | ], |
---|
| | }); |
---|
| | |
---|
| | const { serchParms,cameraStatus,tabsArray} = toRefs(AllData) |
---|
| | |
---|
| | |
---|
| | const accessType=[ |
---|
| | { |
---|
| | label:'自建', |
---|
| | value:'owner', |
---|
| | }, |
---|
| | { |
---|
| | label:'接入', |
---|
| | value:'access', |
---|
| | } |
---|
| | ] |
---|
| | |
---|
| | const cameraName = ref(''); |
---|
| | const leftList = ref([]); |
---|
| | const cameraList = ref([]); |
---|
| | const state = ref([]); |
---|
| | const tableActive = ref(''); |
---|
| | |
---|
| | function getOneLevel(){ |
---|
| | groupList({cameraUserId:serchParms.value.cameraUserId}).then(res=>{ |
---|
| | tabsArray.value=res.data |
---|
| | serchParms.value.groupId=tabsArray.value[1]?.id |
---|
| | GetcameraList() |
---|
| | }) |
---|
| | } |
---|
| | |
---|
| | // 左侧点击 |
---|
| | function leftclick(item) { |
---|
| | AllData.cameraIndexCode = item.cameraId; |
---|
| | } |
---|
| | |
---|
| | // 获取监控视频列表 |
---|
| | function GetcameraList() { |
---|
| | |
---|
| | pageCamera() |
---|
| | |
---|
| | console.log('props.videoList', props.videoList); |
---|
| | // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode |
---|
| | if (props.videoList.includes(props.dataCode)) { |
---|
| | AllData.cameraIndexCode = props.dataID; |
---|
| |
---|
| | // leftclick(res.data[0]); |
---|
| | AllData.cameraIndexCode = res.data[0].cameraId; |
---|
| | }); |
---|
| | } |
---|
| | |
---|
| | function pageCamera(){ |
---|
| | let parms={ |
---|
| | groupId:serchParms.value.groupId, |
---|
| | cameraUserId:serchParms.value.cameraUserId |
---|
| | } |
---|
| | listCameraStatus(parms).then(res=>{ |
---|
| | state.value=res.data |
---|
| | }) |
---|
| | pageCameraInfoByCameraStatus(serchParms.value).then(res=>{ |
---|
| | cameraList.value=res.data |
---|
| | }) |
---|
| | } |
---|
| | |
---|
| | function changeCamera(data){ |
---|
| | serchParms.value.groupId=data.id |
---|
| | pageCamera() |
---|
| | } |
---|
| | function serchCamera(num){ |
---|
| | serchParms.value.cameraStatus=num |
---|
| | pageCamera() |
---|
| | } |
---|
| | |
---|
| | function setLike(row){ |
---|
| | let parms={ |
---|
| | cameraId:row.id, |
---|
| | userId:serchParms.value.cameraUserId |
---|
| | } |
---|
| | collect_uncollect(parms).then(res=>{ |
---|
| | pageCamera() |
---|
| | }) |
---|
| | |
---|
| | } |
---|
| | onMounted(() => { |
---|
| | console.log('搞什么啊', props, props.dataId); |
---|
| | GetcameraList(); |
---|
| | getOneLevel() |
---|
| | // GetcameraList(); |
---|
| | }); |
---|
| | |
---|
| | function tableSelect(row){ |
---|
| | AllData.cameraIndexCode=row.indexCode |
---|
| | } |
---|
| | |
---|
| | onBeforeUnmount(() => { |
---|
| | if (AllData.myVideoPlayer) { |
---|
| | hideDHPlayer(); |
---|
| |
---|
| | width: 100%; |
---|
| | height: 100%; |
---|
| | display: flex; |
---|
| | color: #ccefff; |
---|
| | } |
---|
| | |
---|
| | padding: 0 10px 10px 10px; |
---|
| | overflow: hidden; |
---|
| | } |
---|
| | .leftSub{ |
---|
| | width:360px; |
---|
| | height: 100%; |
---|
| | position: relative; |
---|
| | padding-left:50px; |
---|
| | padding-right: 10px; |
---|
| | .leftTabs{ |
---|
| | position: absolute; |
---|
| | top: 0; |
---|
| | left: 0; |
---|
| | bottom: 0; |
---|
| | width:40px; |
---|
| | .tab{ |
---|
| | padding:10px; |
---|
| | text-align: center; |
---|
| | cursor: pointer; |
---|
| | &.active{ |
---|
| | background: #1fa9f6; |
---|
| | } |
---|
| | } |
---|
| | } |
---|
| | .onLine{ |
---|
| | font-size: 14px; |
---|
| | margin-bottom:10px; |
---|
| | border: 1px solid #53a7ff; |
---|
| | line-height:32px; |
---|
| | cursor: pointer; |
---|
| | text-align: center; |
---|
| | div.active{ |
---|
| | background: #c5e1ff; |
---|
| | color: #53a7ff; |
---|
| | } |
---|
| | } |
---|
| | .cameraTable{ |
---|
| | width: 100%; |
---|
| | height: calc(100% - 200px); |
---|
| | } |
---|
| | } |
---|
| | .leftbox { |
---|
| | width: 200px; |
---|
| | padding: 0 5px; |
---|
| | |
---|
| |
---|
| | } |
---|
| | } |
---|
| | .rightbox { |
---|
| | width: calc(100% - 200px); |
---|
| | height: 100%; |
---|
| | } |
---|
| | |
---|
| | .onebox { |
---|
| | width: 100%; |
---|
| | } |
---|
| | .blue{ |
---|
| | color: #1fa9f6; |
---|
| | cursor: pointer; |
---|
| | &.active{ |
---|
| | color: green; |
---|
| | } |
---|
| | } |
---|
| | .pointer{ |
---|
| | |
---|
| | cursor: pointer; |
---|
| | } |
---|
| | :deep(.el-form-item__label){ |
---|
| | color: #ccefff; |
---|
| | } |
---|
| | :deep(.el-input__inner){ |
---|
| | color: #ccefff; |
---|
| | } |
---|
| | </style> |
---|
| | |
---|
| | |