From 878094582227a79832bbc90eea1fc86fd13f560d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=81=E4=B8=87=E6=88=90?= <wcyuh@isoftstone.com>
Date: Mon, 28 Oct 2024 16:49:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E9=9D=99=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/dasadmin/src/api/backend/alarms/request.ts |  11 +
 ui/dasadmin/src/lang/common/en/alarm.ts       |   6 +
 ui/dasadmin/src/lang/common/zh-cn/alarm.ts    |   6 +
 .../src/views/backend/alarms/index.vue        | 340 ++++++++++++++++++
 ui/dasadmin/src/views/backend/alarms/type.ts  |  38 ++
 5 files changed, 401 insertions(+)
 create mode 100644 ui/dasadmin/src/api/backend/alarms/request.ts
 create mode 100644 ui/dasadmin/src/lang/common/en/alarm.ts
 create mode 100644 ui/dasadmin/src/lang/common/zh-cn/alarm.ts
 create mode 100644 ui/dasadmin/src/views/backend/alarms/index.vue
 create mode 100644 ui/dasadmin/src/views/backend/alarms/type.ts

diff --git a/ui/dasadmin/src/api/backend/alarms/request.ts b/ui/dasadmin/src/api/backend/alarms/request.ts
new file mode 100644
index 00000000..c0d1c07d
--- /dev/null
+++ b/ui/dasadmin/src/api/backend/alarms/request.ts
@@ -0,0 +1,11 @@
+import createAxios from '/@/utils/axios'
+import { RequestReturnRowType, GetAlarmsTableParam, AlarmsTableType } from '/@/views/backend/alarms/type'
+
+// 告警列表
+export const getAlarmListReq = (data: GetAlarmsTableParam) => {
+    return createAxios<never, RequestReturnRowType<AlarmsTableType[]>>({
+        url: '/api/alarm/list',
+        method: 'post',
+        data: data,
+    })
+}
diff --git a/ui/dasadmin/src/lang/common/en/alarm.ts b/ui/dasadmin/src/lang/common/en/alarm.ts
new file mode 100644
index 00000000..06572377
--- /dev/null
+++ b/ui/dasadmin/src/lang/common/en/alarm.ts
@@ -0,0 +1,6 @@
+export default {
+    select: 'please select',
+    selectDate: 'select date and time',
+    type: 'category',
+    alarmTime: 'alarm time',
+}
diff --git a/ui/dasadmin/src/lang/common/zh-cn/alarm.ts b/ui/dasadmin/src/lang/common/zh-cn/alarm.ts
new file mode 100644
index 00000000..dcca6c6f
--- /dev/null
+++ b/ui/dasadmin/src/lang/common/zh-cn/alarm.ts
@@ -0,0 +1,6 @@
+export default {
+    select: '请选择',
+    selectDate: '选择日期时间',
+    type: '类别',
+    alarmTime: '告警时间',
+}
diff --git a/ui/dasadmin/src/views/backend/alarms/index.vue b/ui/dasadmin/src/views/backend/alarms/index.vue
new file mode 100644
index 00000000..2e5bfd36
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/alarms/index.vue
@@ -0,0 +1,340 @@
+<template>
+    <div class="alarms">
+        <el-container class="mainContainer">
+            <el-header class="mainHeader">
+                <el-space class="mainHeaderCenter">
+                    <div style="width: fit-content; min-width: 60px">{{ t('alarm.alarmTime') }}</div>
+                    <el-date-picker
+                        style="height: 40px"
+                        v-model="timeRange"
+                        type="daterange"
+                        format="YYYY-MM-DD"
+                        value-format="YYYY-MM-DD"
+                        range-separator="-"
+                        :start-placeholder="t('alarm.selectDate')"
+                        :end-placeholder="t('alarm.selectDate')"
+                        :shortcuts="shortcuts"
+                    />
+                    <div style="width: 20px"></div>
+                    <div style="width: fit-content; min-width: 60px">{{ t('airBlower.airBlowerNumber') }}</div>
+                    <el-select v-model="airBlowerNumberValue" :placeholder="t('alarm.select') + t('airBlower.airBlowerNumber')" class="alarmSelect">
+                        <el-option v-for="v in airBlowerList" :key="v.value" :label="v.label" :value="v.value"></el-option>
+                    </el-select>
+                    <div style="width: 20px"></div>
+                    <div style="width: fit-content; min-width: 30px">{{ t('alarm.type') }}</div>
+                    <el-select v-model="alarmTypeValue" :placeholder="t('alarm.select') + t('alarm.type')" class="alarmSelect">
+                        <el-option v-for="v in alarmTypes" :key="v.value" :label="v.label" :value="v.value"></el-option>
+                    </el-select>
+                    <div style="width: 20px"></div>
+                    <el-button :icon="Search" type="primary" @click="getalarmsList">查询</el-button>
+                </el-space>
+            </el-header>
+            <el-main class="mainMain">
+                <div class="tabsPart">
+                    <el-table :data="alarmsTableData" class="tablePart" highlight-current-row>
+                        <el-table-column prop="alarmTime" :label="AlarmsFieldsEnums['alarmTime']" align="center"> </el-table-column>
+                        <el-table-column prop="airBlowerNumber" :label="AlarmsFieldsEnums['airBlowerNumber']" align="center"> </el-table-column>
+                        <el-table-column prop="faultDescription" :label="AlarmsFieldsEnums['faultDescription']" align="center"> </el-table-column>
+                        <el-table-column prop="alarmGrade" :label="AlarmsFieldsEnums['alarmGrade']" align="center"> </el-table-column>
+                        <el-table-column prop="alarmType" :label="AlarmsFieldsEnums['alarmType']" align="center"> </el-table-column>
+
+                        <el-table-column label="操作" width="200" align="center">
+                            <template #default="scope">
+                                <div class="tableOperate">
+                                    <a @click="okSubmit(scope.row)">确认</a>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+                <div class="mainFooter">
+                    <el-pagination
+                        v-model:current-page="paginationOptions.current"
+                        v-model:page-size="paginationOptions.pageSize"
+                        :total="paginationOptions.total"
+                        :page-sizes="paginationOptions.pageSizes"
+                        background
+                        :pager-count="7"
+                        layout="prev, pager, next, jumper,sizes,total"
+                        @change="getcurrentPage"
+                    ></el-pagination>
+                </div>
+            </el-main>
+        </el-container>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, nextTick, onMounted } from 'vue'
+import { ElMessage, TableInstance, TreeInstance } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
+import { AlarmsFieldsEnums, AlarmsTableType, GetAlarmsTableParam } from './type'
+import { getAlarmListReq } from '/@/api/backend/alarms/request'
+import { debounce, cloneDeep } from 'lodash'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+// 告警时间
+
+const timeRange = ref([])
+const shortcuts = [
+    {
+        text: '昨天',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setDate(start.getDate() - 1)
+            return [start, end]
+        },
+    },
+    {
+        text: '前3天',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setDate(start.getDate() - 3)
+            return [start, end]
+        },
+    },
+    {
+        text: '上周',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setDate(start.getDate() - 7)
+            return [start, end]
+        },
+    },
+    {
+        text: '上个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 1)
+            return [start, end]
+        },
+    },
+]
+
+// 风机编号
+const airBlowerNumberValue = ref('')
+const airBlowerList = ref([
+    { label: 'sc-001', value: '001' },
+    { label: 'sc-001', value: '002' },
+])
+// 类别
+const alarmTypeValue = ref('')
+const alarmTypes = ref([
+    { label: '故障', value: 1 },
+    { label: '告警', value: 2 },
+])
+
+const searchalarms = (): GetAlarmsTableParam => {
+    const start = timeRange.value[0]
+    const end = timeRange.value[1]
+    return {
+        startTime: start || '',
+        endTime: end || '',
+        airBlowerNumber: airBlowerNumberValue.value,
+        alarmType: alarmTypeValue.value,
+        pageNum: paginationOptions.current,
+        pageSize: paginationOptions.pageSize,
+    }
+}
+
+const alarmsTableData = ref<AlarmsTableType[]>([])
+
+// 告警列表
+const paginationOptions = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    pageSizes: [10, 20, 30],
+})
+const getcurrentPage = () => {
+    getalarmsList()
+}
+
+const getalarmsList = () => {
+    const transparams = searchalarms()
+    console.log('🚀 ~ getalarmsList ~ transparams:', transparams)
+    setTimeout(() => {
+        alarmsTableData.value = [
+            {
+                alarmTime: '2024-09-30 14:08:00',
+                airBlowerNumber: 'sc-001',
+                faultDescription: '变桨轴1处于紧急模式',
+                alarmGrade: '一级',
+                alarmType: '故障',
+            },
+            {
+                alarmTime: '2024-09-30 14:08:00',
+                airBlowerNumber: 'sc-001',
+                faultDescription: '变桨轴1处于紧急模式',
+                alarmGrade: '一级',
+                alarmType: '故障',
+            },
+            {
+                alarmTime: '2024-09-30 14:08:00',
+                airBlowerNumber: 'sc-001',
+                faultDescription: '变桨轴1处于紧急模式',
+                alarmGrade: '一级',
+                alarmType: '故障',
+            },
+        ]
+        paginationOptions.total = 3
+    })
+    // getAlarmListReq(transparams)
+    //     .then((res) => {
+    //         if (res.rows) {
+    //             paginationOptions.total = res.total
+    //         } else {
+    //             ElMessage.error(res.msg ?? '查询失败')
+    //         }
+    //     })
+    //     .catch((err) => {
+    //         ElMessage.error(err?.response?.data?.msg ?? '查询失败')
+    //     })
+}
+
+const okSubmit = (val) => {
+    console.log(val)
+    getalarmsList()
+}
+const getTodayAndYesterday = () => {
+    const today = new Date()
+    const yesterday = new Date()
+    yesterday.setDate(today.getDate() - 1)
+    const formatDate = (date) => {
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        return `${year}-${month}-${day}`
+    }
+
+    return {
+        today: formatDate(today),
+        yesterday: formatDate(yesterday),
+    }
+}
+onMounted(() => {
+    console.log(getTodayAndYesterday(), 999)
+
+    // timeRange[0] = getTodayAndYesterday().yesterday
+    // timeRange[1] = getTodayAndYesterday().today
+    getalarmsList()
+})
+</script>
+
+<style lang="scss" scoped>
+$headerHeight: 60px;
+$defaultBackgroundColor: #fff;
+$defaultAsideWidth: 260px;
+$paginationHeight: 32px;
+.alarms {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .mainContainer {
+        width: 100%;
+        height: 100%;
+        .mainHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: $headerHeight;
+            padding: 0 20px;
+            border-bottom: 1px solid #eaebed;
+            .alarmsInput {
+                height: 40px;
+                width: 220px;
+            }
+            .mainHeaderCenter {
+                width: 100%;
+                display: flex;
+                // overflow-x: auto;
+                // justify-content: flex-start;
+                align-items: center;
+                // width: 320px;
+                .alarmSelect {
+                    width: 200px;
+                    :deep(.el-select__wrapper) {
+                        height: 40px;
+                    }
+                }
+            }
+        }
+        .mainMain {
+            height: calc(100% - $headerHeight);
+            .tabsPart {
+                height: calc(100% - $paginationHeight);
+                padding-bottom: 5px;
+                :deep(.el-tabs__content) {
+                    height: calc(100% - 55px);
+                    .el-tab-pane {
+                        height: 100%;
+                    }
+                }
+                .tablePart {
+                    height: 100%;
+                }
+                .tableOperate {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    a {
+                        margin: 5px;
+                        color: #0064aa;
+                        font-weight: 600;
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+            .mainFooter {
+                display: flex;
+                justify-content: right;
+                background-color: #fff;
+            }
+        }
+    }
+    .modelOperate {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        width: 80px;
+        height: 150px;
+        .el-button {
+            margin: 0;
+        }
+    }
+}
+
+// 状态
+.status-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.status-dot-online,
+.status-dot-offline {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.status-dot-online {
+    background-color: #06b429;
+}
+
+.status-dot-offline {
+    background-color: red;
+}
+.highlight {
+    background-color: yellow; /* 高亮背景颜色 */
+    color: red; /* 字体颜色 */
+    font-weight: bold; /* 加粗字体 */
+}
+</style>
diff --git a/ui/dasadmin/src/views/backend/alarms/type.ts b/ui/dasadmin/src/views/backend/alarms/type.ts
new file mode 100644
index 00000000..5bbfe03d
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/alarms/type.ts
@@ -0,0 +1,38 @@
+export type RequestReturnType<T = never> = Promise<{
+    code: number
+    msg: string
+    success: boolean
+    data?: T
+}>
+
+export type RequestReturnRowType<T = never> = Promise<{
+    code: number
+    msg: string
+    rows: T
+    total: number
+}>
+export type AlarmsTableType = {
+    id?: string
+    alarmTime: string
+    airBlowerNumber: string
+    faultDescription: string
+    alarmGrade: string
+    alarmType: string
+}
+export type GetAlarmsTableParam = {
+    startTime: string
+    endTime: string
+    airBlowerNumber: string
+    alarmType: string
+    pageNum: number
+    pageSize: number
+}
+
+export enum AlarmsFieldsEnums {
+    'id' = 'id',
+    'alarmTime' = '报警时间',
+    'airBlowerNumber' = '风机编号',
+    'faultDescription' = '故障描述',
+    'alarmGrade' = '报警等级',
+    'alarmType' = '报警类别',
+}