|
@@ -1,15 +1,23 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="surveillance-list">
|
|
<div class="surveillance-list">
|
|
|
<header class="list-header">
|
|
<header class="list-header">
|
|
|
- <img class="config-btn" src="@/assets/images/institute-safety/config.png" alt="" @click="handleToPlatform" />
|
|
|
|
|
|
|
+ <img
|
|
|
|
|
+ class="config-btn"
|
|
|
|
|
+ v-if="surveillanceSafetyManagePermission"
|
|
|
|
|
+ src="@/assets/images/institute-safety/config.png"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ @click="handleToPlatform"
|
|
|
|
|
+ />
|
|
|
|
|
+ <div v-else style="width: 16px"></div>
|
|
|
<span> 重点监控区域 </span>
|
|
<span> 重点监控区域 </span>
|
|
|
<img class="close-btn" src="@/assets/images/institute-safety/close.png" alt="" @click="emits('close')" />
|
|
<img class="close-btn" src="@/assets/images/institute-safety/close.png" alt="" @click="emits('close')" />
|
|
|
</header>
|
|
</header>
|
|
|
<main class="surveillance-list-main">
|
|
<main class="surveillance-list-main">
|
|
|
<div class="surveillance-group" v-for="group in surveillanceAreaList" :key="group.id">
|
|
<div class="surveillance-group" v-for="group in surveillanceAreaList" :key="group.id">
|
|
|
- <div class="group-title">
|
|
|
|
|
- {{ group.groupName }}
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <el-tooltip placement="top" :content="group.groupName">
|
|
|
|
|
+ <div class="group-title"> {{ group.groupName }} </div>
|
|
|
|
|
+ </el-tooltip>
|
|
|
|
|
+
|
|
|
<div
|
|
<div
|
|
|
class="surveillance-camera"
|
|
class="surveillance-camera"
|
|
|
:class="{ 'surveillance-camera_active': cam.code === curCamera?.code }"
|
|
:class="{ 'surveillance-camera_active': cam.code === curCamera?.code }"
|
|
@@ -41,6 +49,8 @@
|
|
|
import type { PositionMonitorCameraListRes } from '@/api/security-confidentiality-position';
|
|
import type { PositionMonitorCameraListRes } from '@/api/security-confidentiality-position';
|
|
|
import type { CameraInfo } from '@/api/disaster-overview';
|
|
import type { CameraInfo } from '@/api/disaster-overview';
|
|
|
import useCameraStore from '../stores/use-camera-store';
|
|
import useCameraStore from '../stores/use-camera-store';
|
|
|
|
|
+ import { useUserInfoHook } from '@/hooks/useUserInfoHook';
|
|
|
|
|
+ import { SURVEILLANCE_MANAGEMENT_PERMISSIONS } from '@/views/system/surveillance/constant';
|
|
|
|
|
|
|
|
const emits = defineEmits<{
|
|
const emits = defineEmits<{
|
|
|
(e: 'close'): void;
|
|
(e: 'close'): void;
|
|
@@ -67,9 +77,18 @@
|
|
|
|
|
|
|
|
function handleChangeCamera(camera: CameraInfo) {
|
|
function handleChangeCamera(camera: CameraInfo) {
|
|
|
cameraStore.setCurCamera(camera);
|
|
cameraStore.setCurCamera(camera);
|
|
|
|
|
+ emits('close');
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ const { permissions } = useUserInfoHook();
|
|
|
|
|
+ const surveillanceSafetyManagePermission = ref<boolean>(false);
|
|
|
|
|
+
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
|
+ surveillanceSafetyManagePermission.value = Boolean(
|
|
|
|
|
+ permissions.find(
|
|
|
|
|
+ (item: { code: string }) => item.code === SURVEILLANCE_MANAGEMENT_PERMISSIONS.SURVEILLANCE_SECURITY_MANAGEMENT,
|
|
|
|
|
+ ),
|
|
|
|
|
+ );
|
|
|
getListData();
|
|
getListData();
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
@@ -115,13 +134,19 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.group-title {
|
|
.group-title {
|
|
|
- width: 86px;
|
|
|
|
|
|
|
+ max-width: 100px;
|
|
|
height: 28px;
|
|
height: 28px;
|
|
|
line-height: 26px;
|
|
line-height: 26px;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
border: 1px solid #000000;
|
|
border: 1px solid #000000;
|
|
|
|
|
|
|
|
|
|
+ padding: 0 10px;
|
|
|
|
|
+
|
|
|
|
|
+ white-space: nowrap; /* 防止文本换行 */
|
|
|
|
|
+ overflow: hidden; /* 隐藏溢出的文本 */
|
|
|
|
|
+ text-overflow: ellipsis; /* 显示省略号 */
|
|
|
|
|
+
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|