|
|
@@ -11,223 +11,40 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Dialog v-if="showListDialog" v-model="showListDialog" type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
|
|
|
- <div class="search-box">
|
|
|
- <div class="box-left">
|
|
|
- <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px" label-position="left">
|
|
|
- <!-- <el-form-item label="实景视频" prop="eventType">-->
|
|
|
- <!-- <el-select-->
|
|
|
- <!-- v-model="queryParams.realisticVideoType"-->
|
|
|
- <!-- class="custom-select"-->
|
|
|
- <!-- popper-class="custom-select
|
|
|
-<!-- :teleported="false"-->
|
|
|
- <!-- placeholder="全部"-->
|
|
|
- <!-- >-->
|
|
|
- <!-- <el-option label="全部" value=""></el-option>-->
|
|
|
- <!-- <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />-->
|
|
|
- <!-- </el-select>-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <el-form-item prop="name">
|
|
|
- <el-input v-model="queryParams.name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 200px" @input="getList" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <div class="common-btn-primary" @click="handleQuery">搜索</div>
|
|
|
- <div class="common-btn" @click="resetQuery">重置</div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div v-show="!editVideo" class="common-btn-primary2 edit-icon" style="margin-top: -20px" @click="activeEdit">编辑首页视频</div>
|
|
|
- <div v-show="editVideo" class="edit-box">
|
|
|
- <div class="flex">
|
|
|
- <div v-for="(item, index) in editData" :key="index" class="box-item">
|
|
|
- <div class="edit-img" :title="item.name">
|
|
|
- <span class="edit-title">{{ item.name }}</span>
|
|
|
- <div class="close-btn" @click="deleteItem(index)"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex" style="flex-direction: column; align-items: center">
|
|
|
- <div class="common-btn-primary3" @click="handleSave">保存</div>
|
|
|
- <div class="common-btn-danger2" @click="handleCancel">取消</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="border"></div>
|
|
|
- <div class="video-list2">
|
|
|
- <div v-for="(item, index) in dialogListData" :key="index" class="video-box" @click="selectItem(item)">
|
|
|
- <div class="video-label">
|
|
|
- <span class="label">{{ item.name }}</span>
|
|
|
- </div>
|
|
|
- <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
|
|
|
- <div v-if="editVideo">
|
|
|
- <div v-if="item.sort" class="active-tag"></div>
|
|
|
- <div :class="item.sort ? 'common-checked-active' : 'common-checked'"></div>
|
|
|
- <div class="img"></div>
|
|
|
- </div>
|
|
|
- <HKVideo v-else autoplay :dot_data="item" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="footer">
|
|
|
- <pagination
|
|
|
- v-show="total > queryParams.size"
|
|
|
- v-model:page="queryParams.current"
|
|
|
- v-model:limit="queryParams.size"
|
|
|
- :total="total"
|
|
|
- layout="total, prev, pager, next"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div id="container" style="display: none"></div>
|
|
|
- </Dialog>
|
|
|
- <div v-if="showTip" class="danger-tip" :style="{ zIndex: zIndex }">首页视频数量已达4个上限，如需继续操作请先取消已选择视频。</div>
|
|
|
+ <VideoMonitorEdit v-if="showListDialog" v-model="showListDialog" :lngLat="lngLat" />
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="VideoMonitor">
|
|
|
-import { getEmergencyVideoCata, getUserVideoPoints, getVideoListByUser, updateUserVideoPoints } from '@/api/videoMonitor';
|
|
|
-import { deepClone } from '@/utils';
|
|
|
-import useAppStore from '@/store/modules/app';
|
|
|
+import { getVideoListByUser } from '@/api/videoMonitor';
|
|
|
+import VideoMonitorEdit from './VideoMonitorEdit.vue';
|
|
|
|
|
|
const props = defineProps({
|
|
|
- longitude: String,
|
|
|
- latitude: String
|
|
|
+ longitude: Number,
|
|
|
+ latitude: Number
|
|
|
});
|
|
|
-const proxy = getCurrentInstance()?.proxy;
|
|
|
-const { realistic_video } = toRefs<any>(proxy?.useDict('realistic_video'));
|
|
|
let listData = ref([]);
|
|
|
-let map;
|
|
|
+let showListDialog = ref(false);
|
|
|
+let lngLat = reactive({
|
|
|
+ longitude: 110.925176,
|
|
|
+ latitude: 21.678993
|
|
|
+});
|
|
|
const initData = () => {
|
|
|
- const longitude = props.longitude ? props.longitude : 110.925176;
|
|
|
- const latitude = props.latitude ? props.latitude : 21.678993;
|
|
|
- queryParams.longitude = longitude;
|
|
|
- queryParams.latitude = latitude;
|
|
|
+ lngLat.longitude = props.longitude ? props.longitude : 110.925176;
|
|
|
+ lngLat.latitude = props.latitude ? props.latitude : 21.678993;
|
|
|
getVideoListByUser({
|
|
|
- longitude: longitude,
|
|
|
- latitude: latitude,
|
|
|
+ longitude: lngLat.longitude,
|
|
|
+ latitude: lngLat.latitude,
|
|
|
page: 1,
|
|
|
pageSize: 4
|
|
|
}).then((res) => {
|
|
|
listData.value = res.rows;
|
|
|
});
|
|
|
};
|
|
|
+initData();
|
|
|
|
|
|
-//查看更多数据
|
|
|
-const queryFormRef = ref();
|
|
|
-const queryParams = reactive({
|
|
|
- latitude: '',
|
|
|
- longitude: '',
|
|
|
- current: 1,
|
|
|
- size: 8,
|
|
|
- realisticVideoType: '',
|
|
|
- name: ''
|
|
|
-});
|
|
|
-let showListDialog = ref(false);
|
|
|
-let total = ref(0);
|
|
|
-let editVideo = ref(false);
|
|
|
-// 选中的视频
|
|
|
-let selectData = ref([]);
|
|
|
-let editData = ref([]);
|
|
|
-let dialogListData = ref([]);
|
|
|
-let showTip = ref(false);
|
|
|
-const appStore = useAppStore();
|
|
|
-let zIndex = ref(999);
|
|
|
-watch(
|
|
|
- showTip,
|
|
|
- () => {
|
|
|
- if (showTip.value) {
|
|
|
- zIndex.value = appStore.getZIndex();
|
|
|
- }
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
-);
|
|
|
const showVideoMonitorList = () => {
|
|
|
- getList();
|
|
|
showListDialog.value = true;
|
|
|
};
|
|
|
-
|
|
|
-const getList = async () => {
|
|
|
- await getUserVideoPoints().then((res) => {
|
|
|
- selectData.value = res.data.videoInfos;
|
|
|
- });
|
|
|
- let newParams = {
|
|
|
- latitude: queryParams.latitude,
|
|
|
- longitude: queryParams.longitude,
|
|
|
- current: queryParams.current,
|
|
|
- size: queryParams.size,
|
|
|
- query: {
|
|
|
- name: queryParams.name,
|
|
|
- realisticVideoType: queryParams.realisticVideoType
|
|
|
- }
|
|
|
- };
|
|
|
- getEmergencyVideoCata(newParams).then((res) => {
|
|
|
- selectData.value.forEach((item) => {
|
|
|
- for (let i = 0; i < res.rows.length; i++) {
|
|
|
- if (item.video_code_int === res.rows[i].video_code) {
|
|
|
- res.rows[i].sort = true;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- dialogListData.value = res.rows;
|
|
|
- total.value = res.total;
|
|
|
- });
|
|
|
-};
|
|
|
-const selectItem = (item) => {
|
|
|
- if (editVideo.value) {
|
|
|
- if (editData.value.length >= 4) {
|
|
|
- showTip.value = true;
|
|
|
- setTimeout(() => {
|
|
|
- showTip.value = false;
|
|
|
- }, 2500);
|
|
|
- } else {
|
|
|
- editData.value.push(item);
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-const deleteItem = (index) => {
|
|
|
- editData.value.splice(index, 1);
|
|
|
-};
|
|
|
-/** 表单重置 */
|
|
|
-const reset = () => {
|
|
|
- queryParams.current = 1;
|
|
|
- queryParams.realisticVideoType = '';
|
|
|
- queryParams.name = '';
|
|
|
-};
|
|
|
-
|
|
|
-/** 搜索按钮操作 */
|
|
|
-const handleQuery = () => {
|
|
|
- queryParams.current = 1;
|
|
|
- getList();
|
|
|
-};
|
|
|
-
|
|
|
-/** 重置按钮操作 */
|
|
|
-const resetQuery = () => {
|
|
|
- queryFormRef.value?.resetFields();
|
|
|
- handleQuery();
|
|
|
-};
|
|
|
-
|
|
|
-// 开启编辑视频
|
|
|
-const activeEdit = () => {
|
|
|
- editData.value = deepClone(selectData.value);
|
|
|
- editVideo.value = true;
|
|
|
-};
|
|
|
-// 关闭编辑
|
|
|
-const handleCancel = () => {
|
|
|
- editVideo.value = false;
|
|
|
-};
|
|
|
-// 保存编辑
|
|
|
-const handleSave = () => {
|
|
|
- const data = [];
|
|
|
- editData.value.forEach((item) => {
|
|
|
- data.push(item.video_code_int);
|
|
|
- });
|
|
|
- updateUserVideoPoints(data).then(() => {
|
|
|
- getList();
|
|
|
- handleCancel();
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-initData();
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -298,15 +115,6 @@ initData();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.search-box {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .el-form--inline .el-form-item {
|
|
|
- margin-right: 15px;
|
|
|
- }
|
|
|
-}
|
|
|
.more-btn {
|
|
|
position: absolute;
|
|
|
top: 22px;
|
|
|
@@ -316,206 +124,4 @@ initData();
|
|
|
cursor: pointer;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
-.video-list2 {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 10px;
|
|
|
- .video-box {
|
|
|
- width: 288px;
|
|
|
- height: 200px;
|
|
|
- margin-right: 15px;
|
|
|
- cursor: pointer;
|
|
|
- cursor: pointer;
|
|
|
- background: url('@/assets/images/video/videoBg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding: 9.5px 3.8px 9px 5.5px;
|
|
|
- position: relative;
|
|
|
- margin-bottom: 15px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- &:nth-child(4),
|
|
|
- &:nth-child(8) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .video-label {
|
|
|
- position: absolute;
|
|
|
- bottom: 8px;
|
|
|
- right: 4px;
|
|
|
- z-index: 901;
|
|
|
- display: flex;
|
|
|
- .label {
|
|
|
- width: 186px;
|
|
|
- height: 24px;
|
|
|
- padding-right: 5px;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 14px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- padding-left: 10px;
|
|
|
- color: #fff;
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-bottom: 24px solid rgba(0, 0, 0, 0.4);
|
|
|
- border-left: 24px solid transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.img {
|
|
|
- width: 278.5px;
|
|
|
- height: 183px;
|
|
|
- margin-left: 1px;
|
|
|
- background-color: #000;
|
|
|
-}
|
|
|
-.active-tag {
|
|
|
- position: absolute;
|
|
|
- top: 13px;
|
|
|
- left: 10px;
|
|
|
- width: 83px;
|
|
|
- height: 25px;
|
|
|
- background: url('@/assets/images/video/indexTag.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-.edit-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 3px 5px;
|
|
|
- width: 545px;
|
|
|
- height: 83px;
|
|
|
- background: url('@/assets/images/video/editBg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top: 27px;
|
|
|
-}
|
|
|
-.box-item {
|
|
|
- position: relative;
|
|
|
- margin-left: 8px;
|
|
|
- &:first-child {
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
- .edit-img {
|
|
|
- width: 65px;
|
|
|
- height: 65px;
|
|
|
- background-color: #000;
|
|
|
- }
|
|
|
- .edit-title {
|
|
|
- color: #fff;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 3; /* 设置显示的行数 */
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .close-btn {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- cursor: pointer;
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- background: url('@/assets/images/video/close.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-.footer {
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-bottom: 30px;
|
|
|
- .pagination-container {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- :deep(.el-pagination__total) {
|
|
|
- color: #a7ccdf !important;
|
|
|
- }
|
|
|
- :deep(.el-pagination) {
|
|
|
- .btn-next,
|
|
|
- .btn-prev {
|
|
|
- background-color: transparent !important;
|
|
|
- border: none !important;
|
|
|
- .el-icon {
|
|
|
- color: #a7ccdf !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-prev:disabled,
|
|
|
- .btn-next:disabled {
|
|
|
- background-color: transparent !important;
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
- .el-pager li {
|
|
|
- text-align: center;
|
|
|
- color: #a7ccdf !important;
|
|
|
- background-color: #0e3064 !important;
|
|
|
- border: 1px solid #0c57a7 !important;
|
|
|
- &:hover {
|
|
|
- background-color: #038dff !important;
|
|
|
- border: 1px solid #038dff !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-pager li.is-active {
|
|
|
- background-color: #038dff !important;
|
|
|
- border: 1px solid #038dff !important;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.flex {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.border {
|
|
|
- background-color: #15428d;
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-.edit-icon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- display: inline-block;
|
|
|
- width: 18px;
|
|
|
- height: 16px;
|
|
|
- background: url('@/assets/images/video/setting.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-.common-checked,
|
|
|
-.common-checked-active {
|
|
|
- position: absolute;
|
|
|
- top: 13px;
|
|
|
- right: 12px;
|
|
|
- z-index: 9;
|
|
|
-}
|
|
|
-:deep(.el-form) {
|
|
|
- .el-form-item__label {
|
|
|
- color: #ffffff !important;
|
|
|
- }
|
|
|
-}
|
|
|
-//.dialog {
|
|
|
-// :deep(.dialog-header) {
|
|
|
-// min-height: 150px;
|
|
|
-// }
|
|
|
-//}
|
|
|
-.common-btn-primary {
|
|
|
- width: 94px;
|
|
|
- height: 60px;
|
|
|
-}
|
|
|
-.common-btn {
|
|
|
- width: 66px;
|
|
|
- height: 32px;
|
|
|
-}
|
|
|
</style>
|
