|
|
@@ -3,14 +3,14 @@
|
|
|
<div class="abnormal-wrapper">
|
|
|
<div class="title-pane">
|
|
|
<div class="title"><span>异常告警</span></div>
|
|
|
- <img src="@/assets/images/video-grid/title-decoration.png" alt="" />
|
|
|
+ <img src="@/assets/images/institute-safety/title-decoration.png" alt="" />
|
|
|
<el-icon class="close-icon" @click="handleClose"><Close /></el-icon>
|
|
|
</div>
|
|
|
<div class="content-container">
|
|
|
<div class="list-pane">
|
|
|
- <el-scrollbar class="list-scroll">
|
|
|
+ <el-scrollbar class="list-scroll" ref="scrollRef">
|
|
|
<div
|
|
|
- v-for="(it, idx) in items"
|
|
|
+ v-for="(it, idx) in requestRes"
|
|
|
:key="it.id"
|
|
|
class="list-item"
|
|
|
:class="{ active: idx === selectedIndex }"
|
|
|
@@ -34,7 +34,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="!items.length" class="empty-tip">暂无数据</div>
|
|
|
+ <div v-if="!requestRes.length" class="empty-tip">暂无数据</div>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
|
|
|
@@ -89,31 +89,70 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { computed, onMounted, ref, watch } from 'vue';
|
|
|
+ import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
|
|
|
import { ElIcon, ElScrollbar } from 'element-plus';
|
|
|
import { Close } from '@element-plus/icons-vue';
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
import urlJoin from 'url-join';
|
|
|
import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
|
|
|
+ import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
|
|
|
import ImageViewer from './ImageViewer.vue';
|
|
|
import LiveVideo from '@/components/live/LiveVideoFlv.vue';
|
|
|
- import { QueryTodayIssueListByWorkspaceRes, getTodayQuestionListApi } from '@/apis/splitScreenRetrieval';
|
|
|
- import { getCameraInfoDetail } from '@/apis/camera/camera';
|
|
|
+ import { getCameraInfoDetail } from '@/api/camera/camera';
|
|
|
+ import type { IssueItem } from '@/views/institute-safety/modules/safety-company-home/types';
|
|
|
+ import type { QueryPageRequest, QueryPageResponse } from '@/types/basic-query';
|
|
|
+ import { getIssueListByCameraId, getIssueListByWorkshopCode } from '../safety-company-home/apis';
|
|
|
+ import { useInfiniteScroll } from '@vueuse/core';
|
|
|
|
|
|
const { isFullScreen } = storeToRefs(userSplitScreenFullScreen());
|
|
|
const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();
|
|
|
|
|
|
- const props = defineProps<{
|
|
|
- id: number;
|
|
|
- }>();
|
|
|
+ const questionListStore = useQuestionListStore();
|
|
|
+ const { getState, clearStore } = questionListStore;
|
|
|
+
|
|
|
+ const { type, workshopCodes, cameraId } = getState();
|
|
|
+ function getRequestParams() {
|
|
|
+ if (type === 'camera') {
|
|
|
+ return cameraId;
|
|
|
+ } else {
|
|
|
+ return { workshopCodeList: workshopCodes };
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const DEFAULT_SIZE = 10;
|
|
|
+ const requestPage = ref(1);
|
|
|
+ const requestTotal = ref(0);
|
|
|
+
|
|
|
+ const scrollRef = useTemplateRef<HTMLElement>('scrollRef');
|
|
|
+ const { reset } = useInfiniteScroll(
|
|
|
+ scrollRef,
|
|
|
+ () => {
|
|
|
+ requestParams.value.pageNumber++;
|
|
|
+ load();
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 10,
|
|
|
+ canLoadMore: () => {
|
|
|
+ const noMoreContent = requestPage.value * DEFAULT_SIZE >= requestTotal.value;
|
|
|
+ if (noMoreContent) return false;
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ );
|
|
|
|
|
|
const emits = defineEmits<{
|
|
|
(e: 'close'): void;
|
|
|
}>();
|
|
|
|
|
|
- const items = ref<QueryTodayIssueListByWorkspaceRes[]>([]);
|
|
|
+ const requestRes = ref<IssueItem[]>([]);
|
|
|
+ const requestParams = ref<QueryPageRequest<{ workshopCodeList: string[] } | number>>({
|
|
|
+ pageNumber: requestPage.value,
|
|
|
+ pageSize: DEFAULT_SIZE,
|
|
|
+ queryParam: getRequestParams(),
|
|
|
+ } as QueryPageRequest<{ workshopCodeList: string[] } | number>);
|
|
|
+
|
|
|
const selectedIndex = ref<number>(0);
|
|
|
- const current = computed<QueryTodayIssueListByWorkspaceRes | undefined>(() => items.value[selectedIndex.value]);
|
|
|
+ const current = computed<IssueItem | undefined>(() => requestRes.value[selectedIndex.value]);
|
|
|
const currentImageUrl = ref('');
|
|
|
const currentStreamIp = ref('');
|
|
|
|
|
|
@@ -159,7 +198,18 @@
|
|
|
};
|
|
|
|
|
|
const load = async (): Promise<void> => {
|
|
|
- items.value = await getTodayQuestionListApi(props.id);
|
|
|
+ if (type === 'camera') {
|
|
|
+ const res = await getIssueListByCameraId(requestParams.value as QueryPageRequest<number>);
|
|
|
+ requestRes.value = res.records;
|
|
|
+ requestTotal.value = res.totalRow;
|
|
|
+ } else {
|
|
|
+ const res = await getIssueListByWorkshopCode(
|
|
|
+ requestParams.value as QueryPageRequest<{ workshopCodeList: string[] }>,
|
|
|
+ );
|
|
|
+ requestRes.value = res.records;
|
|
|
+ requestTotal.value = res.totalRow;
|
|
|
+ }
|
|
|
+
|
|
|
selectedIndex.value = 0;
|
|
|
activeTab.value = 'image';
|
|
|
};
|
|
|
@@ -174,17 +224,13 @@
|
|
|
},
|
|
|
);
|
|
|
|
|
|
- watch(
|
|
|
- () => props.id,
|
|
|
- () => {
|
|
|
- load();
|
|
|
- },
|
|
|
- { immediate: false },
|
|
|
- );
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
load();
|
|
|
});
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ clearStore();
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -195,11 +241,15 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
.abnormal-wrapper {
|
|
|
- width: 78.5%;
|
|
|
- height: 71.5%;
|
|
|
+ // width: 78.5%;
|
|
|
+ // height: 71.5%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
padding: 15px 12px 12px 12px;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
backdrop-filter: blur(10px);
|
|
|
@@ -215,7 +265,7 @@
|
|
|
.title {
|
|
|
width: 370px;
|
|
|
height: 100%;
|
|
|
- background: url(@/assets/icons/violation-title-bg.png) no-repeat;
|
|
|
+ background: url(@/assets/images/institute-safety/violation-title-bg.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: relative;
|
|
|
|
|
|
@@ -233,6 +283,7 @@
|
|
|
}
|
|
|
|
|
|
.close-icon {
|
|
|
+ color: #fff;
|
|
|
font-size: 24px;
|
|
|
margin-left: auto;
|
|
|
cursor: pointer;
|
|
|
@@ -277,12 +328,12 @@
|
|
|
}
|
|
|
.list-item:hover {
|
|
|
transform: translateY(-1px);
|
|
|
- background-image: url('@/assets/images/video-grid/item-hover.png');
|
|
|
+ background-image: url('@/assets/images/institute-safety/item-hover.png');
|
|
|
background-size: 100% 100%;
|
|
|
background-position: center;
|
|
|
}
|
|
|
.list-item.active {
|
|
|
- background-image: url('@/assets/images/video-grid/item-active.png');
|
|
|
+ background-image: url('@/assets/images/institute-safety/item-active.png');
|
|
|
background-size: 100% 100%;
|
|
|
background-position: center;
|
|
|
}
|
|
|
@@ -351,6 +402,7 @@
|
|
|
line-height: 40px;
|
|
|
cursor: pointer;
|
|
|
margin-right: 2px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.tab:last-child {
|