Merge branch 'FJC' into 'dev'

feat: 报警消息列表页面

See merge request skyeye/skyeye_frontend/skyeye-admin!102

src/views/message/alarmMessages/alarmMessages.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="alarmMessagePage">
+    <SearchBar />
+
+    <el-button
+      type="primary"
+      @click="createAlarm"
+      style="margin-top: 24px; margin-bottom: 16px; width: 138px"
+    >
+      <img src="./img/create.png" style="margin-top: -1px; margin-right: 5px" /><span
+        >新建报警消息</span
+      >
+    </el-button>
+
+    <el-table
+      :data="alarmDataList"
+      stripe
+      height="500px"
+      :cell-style="{ textAlign: 'center' }"
+      :header-cell-style="{ 'text-align': 'center' }"
+      style="--el-table-border-color: none"
+    >
+      <el-table-column prop="alarmType" width="230" label="报警类型" />
+
+      <el-table-column prop="alarmLevel" label="报警等级">
+        <template #default="scope">
+          <span
+            :class="
+              scope.row.alarmLevel === '一般问题'
+                ? 'generalIssue'
+                : scope.row.alarmLevel === '中等问题'
+                ? 'mediumIssue'
+                : 'seriousIssue'
+            "
+          >
+            {{ scope.row.alarmLevel }}
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="pushChannel" label="推送渠道" />
+
+      <el-table-column prop="status" label="是否启用">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.status"
+            @click="updateStatus(scope.row.id, scope.row.status)"
+          />
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="operationTime" width="230" label="操作时间" />
+
+      <el-table-column label="操作">
+        <template #default="scope">
+          <div class="operation">
+            <el-tooltip class="box-item" effect="light" content="查看" placement="bottom">
+              <img src="./img/view.png" @click="handleView(scope.$index, scope.row)" />
+            </el-tooltip>
+            <el-tooltip class="box-item" effect="light" content="编辑" placement="bottom">
+              <img src="./img/edit.png" @click="handleEdit(scope.$index, scope.row)" />
+            </el-tooltip>
+            <el-tooltip class="box-item" effect="light" content="删除" placement="bottom">
+              <img src="./img/delete.png" @click="handleDelete(scope.row.id)" />
+            </el-tooltip>
+          </div>
+        </template>
+      </el-table-column>
+
+      <template #empty>
+        <div class="emptyDiv">
+          <img src="./img/empty.png" class="emptyImg" />
+          <span class="emptySpan">目前暂无数据，请<a>新建</a>报警消息</span>
+        </div>
+      </template>
+    </el-table>
+
+    <div class="pagination" v-if="totalRow != 0">
+      <el-pagination
+        v-model:currentPage="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40, 50, 80]"
+        :small="false"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalRow"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+    <el-dialog v-model="deleteDialog" width="424px" top="20%" class="deleteDialog">
+      <template #header="">
+        <div class="deleteDialogHeader">
+          <img src="./img/deleteTip.png" class="deleteTip" />
+          <span class="titleSpan">请确认是否删除</span>
+        </div>
+      </template>
+      <span style="margin-left: 37px">删除之后，该条数据将无法恢复</span>
+      <div class="dialogBottom">
+        <el-button class="dialogBtn" @click="deleteDialog = false">取消</el-button>
+        <el-button class="dialogBtn" type="primary" @click="confirmDelete">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import SearchBar from './components/SearchBar.vue';
+  import { useAlarmDataList } from './hook/index.ts';
+  import { storeToRefs } from 'pinia';
+
+  const useAlarmDataListFun = useAlarmDataList();
+  const { alarmDataList, currentPage, pageSize, totalRow } = storeToRefs(useAlarmDataListFun);
+  const { getAlarmData, deleteAlarm, updateStatus } = useAlarmDataListFun;
+
+  const deleteDialog = ref(false);
+
+  const createAlarm = () => {
+    console.log(alarmDataList);
+  };
+  const handleView = (index: number, row) => {
+    console.log(index, row);
+  };
+  const handleEdit = (index: number, row) => {
+    console.log(index, row);
+  };
+
+  const deleteId = ref<number>();
+  const handleDelete = (id: number) => {
+    deleteDialog.value = true;
+    deleteId.value = id;
+  };
+
+  const confirmDelete = () => {
+    deleteAlarm(deleteId.value!);
+    deleteDialog.value = false;
+  };
+
+  const handleSizeChange = (newPageSize: number) => {
+    pageSize.value = newPageSize;
+    getAlarmData();
+  };
+  const handleCurrentChange = (newCurrentPage: number) => {
+    currentPage.value = newCurrentPage;
+    getAlarmData();
+  };
+</script>
+
+<style lang="scss" scoped>
+  .alarmMessagePage {
+    height: calc(100vh - 64px - 18px);
+    background-color: rgba(255, 255, 255, 1);
+    padding: 24px 44px 35px 21px;
+    position: relative;
+    .pagination {
+      position: absolute;
+      bottom: 35px;
+      right: 67px;
+    }
+
+    .deleteDialog {
+      .deleteDialogHeader {
+        display: flex;
+        .deleteTip {
+          height: 24px;
+          width: 24px;
+        }
+        .titleSpan {
+          height: 24px;
+          font-size: 16px;
+          color: rgba(0, 0, 0, 0.88);
+          line-height: 24px;
+          text-align: center;
+          margin-left: 12px;
+        }
+      }
+      .dialogBottom {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 12px;
+      }
+    }
+
+    .generalIssue {
+      width: 64px;
+      height: 22px;
+      text-align: center;
+      line-height: 22px;
+      color: #507df7;
+      background-color: #e9f3fe;
+      border-radius: 2px;
+      border: 1px solid #e9f3fe;
+    }
+    .mediumIssue {
+      width: 64px;
+      height: 22px;
+      text-align: center;
+      line-height: 22px;
+      color: #faad14;
+      background-color: #fffbe6;
+      border-radius: 2px;
+      border: 1px solid #fffbe6;
+    }
+    .seriousIssue {
+      width: 64px;
+      height: 22px;
+      text-align: center;
+      line-height: 22px;
+      color: #ed6863;
+      background-color: #fdf1f0;
+      border-radius: 2px;
+      border: 1px solid #fdf1f0;
+    }
+
+    .operation {
+      display: flex;
+      justify-content: center;
+      :first-child {
+        margin-right: 20px;
+      }
+      :nth-child(2) {
+        margin-right: 20px;
+      }
+    }
+
+    .emptyDiv {
+      margin-top: 78px;
+      margin: auto;
+      width: 396px;
+      .emptyImg {
+        height: 257px;
+      }
+      .emptySpan {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        text-align: left;
+        font-style: normal;
+      }
+    }
+  }
+
+  :deep(.el-dialog) {
+    border-radius: 8px;
+  }
+</style>

src/views/message/alarmMessages/api/index.ts

@@ -0,0 +1,23 @@
+import { http } from '@/utils/http/axios';
+
+export function getAlarmMessageList(params) {  // 获取报警数据列表
+    return http.request({
+        url: '/alarmMessage/getAlarmMessageList',
+        method: 'get',
+        params
+    });
+}
+
+export function deleteAlarmMessage(id) {  // 删除报警数据
+    return http.request({
+        url: `/alarmMessage/deleteAlarmMessage?id=${id}`,
+        method: 'post',
+    });
+}
+
+export function updateAlarmStatus(params) {  // 修改报警数据状态
+    return http.request({
+        url: `/alarmMessage/updateStatus?id=${params.id}&status=${params.status}`,
+        method: 'post',
+    });
+}

src/views/message/alarmMessages/components/SearchBar.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="searchBar">
+    <el-input
+      v-model="searchContent"
+      style="width: 294px; height: 32px"
+      placeholder="请输入搜索内容"
+      :prefix-icon="Search"
+    />
+    <div>
+      <el-button type="primary" class="allBtn" @click="getAlarmMessages"> 搜索 </el-button>
+      <el-button class="allBtn" @click="resetSearch"> 重置 </el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { storeToRefs } from 'pinia';
+  import { Search } from '@element-plus/icons-vue';
+  import { useAlarmDataList } from '../hook/index.ts';
+
+  const useAlarmDataListFun = useAlarmDataList();
+  const { searchContent } = storeToRefs(useAlarmDataListFun);
+  const { getAlarmData } = useAlarmDataListFun;
+
+  const resetSearch = () => {
+    searchContent.value = '';
+    getAlarmData();
+  };
+
+  const getAlarmMessages = () => {
+    getAlarmData();
+  };
+</script>
+
+<style scoped>
+  .searchBar {
+    display: flex;
+  }
+
+  .allBtn {
+    margin-left: 15px;
+    width: 65px;
+    height: 32px;
+  }
+</style>

src/views/message/alarmMessages/hook/index.ts

@@ -0,0 +1,74 @@
+import { alarmTableData, alarmInfoRes, alarmLevelMapping, pushChannelMapping } from '../type'
+import {getAlarmMessageList, deleteAlarmMessage, updateAlarmStatus} from '../api/index'
+import { reactive, ref, onMounted } from 'vue';
+import { defineStore } from "pinia";
+
+export const useAlarmDataList = defineStore('useAlarmDataList', () => {
+    
+    const alarmDataList = reactive<alarmTableData[]>([]);
+    const searchContent = ref<string>('');
+    const pageSize = ref<number>(10);
+    const currentPage = ref<number>(1);
+    const totalPage = ref<number>(0);
+    const totalRow = ref<number>(0);
+
+    function getAlarmData(){
+        getAlarmMessageList({content:searchContent.value, pageNumber:currentPage.value, pageSize:pageSize.value})
+        .then((res: alarmInfoRes) => {
+            console.log('res', res);
+            if(res === null){
+                currentPage.value = 1
+                totalPage.value = 0
+                totalRow.value = 0
+                alarmDataList.length = 0;
+                return
+            }
+            alarmDataList.length = 0;
+            totalPage.value = res.totalPage
+            totalRow.value = res.totalRow
+            for (let alarmMessage of res.records){
+                alarmDataList.push({
+                    id: alarmMessage.id,
+                    alarmType: alarmMessage.violationName,
+                    alarmLevel: alarmLevelMapping[alarmMessage.violationLevel],
+                    pushChannel: alarmMessage.pushChannel.split(',').map((channel)=>pushChannelMapping[Number(channel)]),
+                    status: Boolean(alarmMessage.status),
+                    operationTime: alarmMessage.updatedAt
+                })
+            }
+        })
+    }
+
+    function deleteAlarm(id: number){
+        deleteAlarmMessage(id)
+        .then((res) => {
+            getAlarmData();
+        })
+    }
+
+    function updateStatus(id: number, rowStatus: boolean){
+        let status = Number(rowStatus)
+        updateAlarmStatus({id, status})
+        .then((res) => {
+            getAlarmData();
+        })
+    }
+
+    onMounted(() => {
+        getAlarmData();
+        console.log("alarmDataList", alarmDataList);
+        
+    });
+
+    return {
+        alarmDataList,
+        searchContent,
+        currentPage,
+        pageSize,
+        totalPage,
+        totalRow,
+        getAlarmData,
+        deleteAlarm,
+        updateStatus
+      };
+})

src/views/message/alarmMessages/mock.ts

@@ -0,0 +1,121 @@
+import {
+    alarmTypeEnum,
+    alarmLevelEnum,
+    pushChannelEnum,
+  } from './type.ts';
+
+  
+  export const mockTableData = [
+    {
+      alarmType: alarmTypeEnum.flameAlarm,
+      alarmLevel: alarmLevelEnum.general,
+      pushChannel: [pushChannelEnum.lanxin],
+      status: true,
+      operationTime: '2024.1.1 HH:MM:SS',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.worker,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin],
+      status: false,
+      operationTime: '2024.12.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.irrupt,
+      alarmLevel: alarmLevelEnum.general,
+      pushChannel: [pushChannelEnum.lanxin],
+      status: true,
+      operationTime: '2024.5.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+    {
+      alarmType: alarmTypeEnum.safetyHat,
+      alarmLevel: alarmLevelEnum.serious,
+      pushChannel: [pushChannelEnum.lanxin, pushChannelEnum.platform],
+      status: false,
+      operationTime: '2024.3.1',
+      id: 0,
+    },
+  ]

src/views/message/alarmMessages/type.ts

@@ -0,0 +1,79 @@
+export interface alarmTableData {
+    id: number,
+    //报警类型
+    alarmType: alarmTypeEnum|string,
+    //报警等级
+    alarmLevel: alarmLevelEnum,
+    //推送渠道
+    pushChannel: pushChannelEnum[],
+    //是否启用
+    status: boolean,
+    //操作时间
+    operationTime: string
+}
+
+
+export enum alarmTypeEnum {
+    safetyHat = 1,
+    worker = 2,
+    irrupt = 3,
+    flameAlarm = 4,
+}
+
+export const alarmTypeMapping = {
+    [alarmTypeEnum.safetyHat] : '安全帽违规',
+    [alarmTypeEnum.worker] : '工人违规',
+    [alarmTypeEnum.irrupt] : '人员闯入',
+    [alarmTypeEnum.flameAlarm] : '明火报警',
+};
+
+export enum alarmLevelEnum {
+    general = 1,
+    medium = 2,
+    serious = 3,
+}
+
+export const alarmLevelMapping = {
+    [alarmLevelEnum.general] : '一般问题',
+    [alarmLevelEnum.medium] : '中等问题',
+    [alarmLevelEnum.serious] : '严重问题',
+};
+
+export enum pushChannelEnum {
+    platform = 1,
+    lanxin = 2,
+}
+
+export const pushChannelMapping = {
+    [pushChannelEnum.platform] : '平台',
+    [pushChannelEnum.lanxin] : '蓝信',
+};
+
+export enum statuslEnum {
+    activate = 1,
+    deactivate = 0,
+}
+
+export interface alarmInfoRes {
+    records: alarmMessageList[],
+    pageNumber: number,
+    pageSize: number,
+    totalPage: number,
+    totalRow: number
+}
+
+export interface alarmMessageList {
+    id: number,
+    //报警类型
+    violationType: number,
+    //报警名称
+    violationName: string,
+    //报警等级
+    violationLevel: number,
+    //推送渠道
+    pushChannel: string,
+    //是否启用
+    status: statuslEnum,
+    //操作时间
+    updatedAt: string
+}