|
|
@@ -1,12 +1,321 @@
|
|
|
<template>
|
|
|
- <div class="alarm-all"> 测试 </div>
|
|
|
+ <div class="alarm-all">
|
|
|
+ <a-grid :cols="4" :col-gap="20" :row-gap="16" class="grid-demo-grid">
|
|
|
+ <a-grid-item class="demo-item">
|
|
|
+ <label>{{ $t('previewList.bjlx') }}</label>
|
|
|
+ <a-select
|
|
|
+ v-model="paramObj.AlertType"
|
|
|
+ allow-clear
|
|
|
+ :style="{ width: '320px' }"
|
|
|
+ :placeholder="$t('previewList.qxz')"
|
|
|
+ >
|
|
|
+ <a-option
|
|
|
+ v-for="item in typeAlarmOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ >{{ item.label }}</a-option
|
|
|
+ >
|
|
|
+ </a-select>
|
|
|
+ </a-grid-item>
|
|
|
+ <a-grid-item class="demo-item" :span="2">
|
|
|
+ <label>{{ $t('previewList.bjsj') }}</label>
|
|
|
+ <a-range-picker
|
|
|
+ show-time
|
|
|
+ :time-picker-props="{ defaultValue: ['00:00:00', '00:00:00'] }"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ @ok="onOk"
|
|
|
+ />
|
|
|
+ </a-grid-item>
|
|
|
+ <a-grid-item class="demo-item">
|
|
|
+ <a-radio-group
|
|
|
+ type="button"
|
|
|
+ :model-value="radioActive"
|
|
|
+ @change="(v) => (radioActive = v)"
|
|
|
+ >
|
|
|
+ <a-radio value="bg">{{ $t('previewList.bg') }}</a-radio>
|
|
|
+ <a-radio value="gg">{{ $t('previewList.gg') }}</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ <a-button type="primary" size="small" @click="searchBtn">{{
|
|
|
+ $t('previewList.cx')
|
|
|
+ }}</a-button>
|
|
|
+ </a-grid-item>
|
|
|
+ </a-grid>
|
|
|
+ <template v-if="radioActive === 'bg'">
|
|
|
+ <a-table
|
|
|
+ :data="alarmData"
|
|
|
+ :scroll="{ y: '100%' }"
|
|
|
+ :pagination="false"
|
|
|
+ :bordered="{ cell: true }"
|
|
|
+ :loading="loading"
|
|
|
+ style="height: calc(100% - 114px)"
|
|
|
+ >
|
|
|
+ <template #columns>
|
|
|
+ <a-table-column
|
|
|
+ :title="$t('previewList.bjlx')"
|
|
|
+ :ellipsis="true"
|
|
|
+ :tooltip="true"
|
|
|
+ data-index="type"
|
|
|
+ >
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column
|
|
|
+ :title="$t('previewList.bjsj')"
|
|
|
+ data-index="timeN"
|
|
|
+ :width="180"
|
|
|
+ ></a-table-column>
|
|
|
+ <a-table-column
|
|
|
+ :title="$t('previewList.status')"
|
|
|
+ data-index="status"
|
|
|
+ :width="150"
|
|
|
+ :body-cell-style="
|
|
|
+ (record) => ({
|
|
|
+ background: record.status ? '' : '#7e2d2d',
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template #cell="{ record }">
|
|
|
+ <span>{{
|
|
|
+ record.status ? $t('previewList.ycl') : $t('previewList.wcl')
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column
|
|
|
+ :title="$t('previewList.dqstatus')"
|
|
|
+ data-index="isRead"
|
|
|
+ :width="150"
|
|
|
+ :body-cell-style="
|
|
|
+ (record) => ({
|
|
|
+ background: record.isRead ? '' : '#2d4f7e',
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template #cell="{ record }">
|
|
|
+ <span>{{
|
|
|
+ record.isRead ? $t('previewList.yd') : $t('previewList.wd')
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column :title="$t('previewList.cz')" :width="150">
|
|
|
+ <template #cell="{ record }">
|
|
|
+ <a-button type="text" size="mini" @click="showView(record)">{{
|
|
|
+ $t('previewList.ck')
|
|
|
+ }}</a-button>
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <a-scrollbar>
|
|
|
+ <ul class="img-list">
|
|
|
+ <li
|
|
|
+ v-for="(item, i) in alarmImgData"
|
|
|
+ :key="i"
|
|
|
+ class="img-list-item"
|
|
|
+ @click="showView(item)"
|
|
|
+ >
|
|
|
+ <img :src="item.tImg" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </a-scrollbar>
|
|
|
+ </template>
|
|
|
+ <div class="pagination">
|
|
|
+ <a-pagination
|
|
|
+ :total="total"
|
|
|
+ show-total
|
|
|
+ show-jumper
|
|
|
+ show-page-size
|
|
|
+ @change="pageChange"
|
|
|
+ @page-size-change="pageSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <a-drawer
|
|
|
+ class="show-view-drawer"
|
|
|
+ unmount-on-close
|
|
|
+ :width="340"
|
|
|
+ :visible="tpckVisible"
|
|
|
+ :footer="false"
|
|
|
+ :mask-closable="false"
|
|
|
+ :mask="false"
|
|
|
+ @ok="handleOk"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ >
|
|
|
+ <template #title>{{ $t('previewList.tpck') }}</template>
|
|
|
+ <ViewAlarm :data="viewData" />
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref } from 'vue';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import { useAppStore } from '@/store';
|
|
|
+ import { ref, reactive, onMounted } from 'vue';
|
|
|
+ import {
|
|
|
+ getAlarmImgFiles,
|
|
|
+ getAlarmLog,
|
|
|
+ getAlgorithmList,
|
|
|
+ } from '@/api/system';
|
|
|
+ import ViewAlarm from './view-alarm.vue';
|
|
|
+
|
|
|
+ const app = useAppStore();
|
|
|
+ const props = defineProps<{
|
|
|
+ guid?: string;
|
|
|
+ }>();
|
|
|
+ const radioActive = ref<any>('bg');
|
|
|
+ const paramObj = reactive<{
|
|
|
+ PageNum: number;
|
|
|
+ PageSize: number;
|
|
|
+ AlertType: string;
|
|
|
+ StartDate: string | number;
|
|
|
+ EndDate: string | number;
|
|
|
+ }>({
|
|
|
+ PageNum: 1,
|
|
|
+ PageSize: 10,
|
|
|
+ AlertType: '',
|
|
|
+ StartDate: '',
|
|
|
+ EndDate: '',
|
|
|
+ });
|
|
|
+ const loading = ref(false);
|
|
|
+ const total = ref(0);
|
|
|
+ const typeAlarmOptions = ref<any[]>([]);
|
|
|
+ const viewData = ref({});
|
|
|
+
|
|
|
+ const alarmData = ref<{ [key: string]: number | string | boolean }[]>([
|
|
|
+ // {
|
|
|
+ // type: '行人闯入',
|
|
|
+ // timeN: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ // status: 0,
|
|
|
+ // isRead: false,
|
|
|
+ // },
|
|
|
+ ]);
|
|
|
+ const alarmImgData = ref<any[]>([
|
|
|
+ // {
|
|
|
+ // url: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
|
|
|
+ // time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ // },
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const getList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+ alarmImgData.value = [];
|
|
|
+ try {
|
|
|
+ const alarmLog = await getAlarmLog(paramObj, { GUID: props.guid });
|
|
|
+ total.value = alarmLog.data.TotalCount;
|
|
|
+ const jsonPromises = alarmLog.data.AlarmList.map((v: any) =>
|
|
|
+ getAlarmImgFiles(v.JsonFile, { GUID: props.guid })
|
|
|
+ );
|
|
|
+ Promise.all(jsonPromises)
|
|
|
+ .then((results) => {
|
|
|
+ alarmData.value = alarmLog.data.AlarmList.map(
|
|
|
+ (item: any, i: number) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ type: item.Name,
|
|
|
+ timeN: item.CreatedAt,
|
|
|
+ status: 0,
|
|
|
+ isRead: false,
|
|
|
+ img: `${app.ip}/rpc/rabbitMQ/KunPengYun/Files/${item.OriginPicture}&GUID=${props.guid}`,
|
|
|
+ tImg: `${app.ip}/rpc/rabbitMQ/KunPengYun/Files/${item.Thumbnail}&GUID=${props.guid}`,
|
|
|
+ imgJson: results[i],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ alarmImgData.value = alarmData.value;
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const onOk = (value: any[], date: any[], dateString: any[]) => {
|
|
|
+ paramObj.StartDate = new Date(dateString[0]).getTime() / 1000;
|
|
|
+ paramObj.EndDate = new Date(dateString[1]).getTime() / 1000;
|
|
|
+ };
|
|
|
+ const pageChange = (current: number) => {
|
|
|
+ paramObj.PageNum = current;
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+ const pageSizeChange = (pageSize: number) => {
|
|
|
+ paramObj.PageSize = pageSize;
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const tpckVisible = ref(false);
|
|
|
+
|
|
|
+ const handleOk = () => {
|
|
|
+ tpckVisible.value = false;
|
|
|
+ };
|
|
|
+ const handleCancel = () => {
|
|
|
+ tpckVisible.value = false;
|
|
|
+ };
|
|
|
+ const showView = (record: any) => {
|
|
|
+ viewData.value = record;
|
|
|
+ tpckVisible.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const searchBtn = () => {
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+ onMounted(async () => {
|
|
|
+ const algorithmList = await getAlgorithmList({}, { GUID: props.guid });
|
|
|
+ // eslint-disable-next-line no-restricted-syntax, guard-for-in
|
|
|
+ for (const key in algorithmList.data) {
|
|
|
+ typeAlarmOptions.value.push({
|
|
|
+ label: algorithmList.data[key],
|
|
|
+ value: key,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ getList();
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.alarm-all {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ gap: 15px;
|
|
|
+ .pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .demo-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ & > label {
|
|
|
+ min-width: 65px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arco-scrollbar {
|
|
|
+ height: calc(100% - 114px);
|
|
|
+ :deep(.arco-scrollbar-container) {
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-list {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
|
+ grid-template-rows: repeat(auto-fill, 135px);
|
|
|
+ gap: 15px;
|
|
|
+ .img-list-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 135px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
gitboyzcf