UA 整理提交

he wei

2025-04-23 b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf

 src/views/general/alarm/alarmRt.vue

@@ -1,23 +1,23 @@
<script setup name="alarmRt">
   import { ref, reactive, onMounted, watchEffect, } from "vue";
import { ref, reactive, onMounted, watchEffect, nextTick } from "vue";
   import useWebSocket from "@/hooks/useWebsocket.js";
   import useElement from "@/hooks/useElement.js";
   import { getAreaTreeApi } from "@/api/area";
   import { formatAreaTree } from "@/utils/tree";
   import { confirmAlm, cancelAlm, delAlm } from '@/api/alarm.js';
   import {
      getLinfById
   } from '@/api/lockManager.js';

    import useStation from "@/hooks/useStationList.js";
const { stationName1, stationName2, stationName3, stationName4,
   stationList1, stationList2, stationList3, stationList4, lockList
} = useStation();

   const { $loading, $message, $confirm } = useElement();
   const { sendData, message: listMessage } = useWebSocket("lockAlmRt");
   const pageCurr = ref(1);
   const pageSize = ref(10);
   const total = ref(0);
   const areaId = ref();
   const lockId = ref();
   const areaList = ref([]);
   const lockList = ref([]);
const lockName = ref();
  const confirmFlag = ref(0);
   const datas = reactive({
      tableData: [],
@@ -62,10 +62,13 @@
      const params = {
         pageNum: pageCurr.value,
         pageSize: pageSize.value,
         areaId: areaId.value?.length ? areaId.value[areaId.value.length - 1] : undefined,
         lockId: lockId.value || undefined,
      lockName: lockName.value || undefined,
         almIds: checkedTypes.value?.length ? checkedTypes.value.join(',') : 0,
      confirmFlag: confirmFlag.value,
    stationName1: stationName1.value || undefined,
    stationName2: stationName2.value || undefined,
    stationName3: stationName3.value || undefined,
    stationName4: stationName4.value || undefined
      };
      sendData(JSON.stringify(params));
   }
@@ -94,8 +97,7 @@
         // 告警来源[1-平台触发  2-手机APP触发  3-锁具触发]
         datas.tableData = list.map(v => ({
            ...v,
            areaPath: v.linf.areaPath,
            lockName: v.linf.lockName,
         lockName: v.lockName,
            almName: types.find(t => t.value == v.almId).label,
            alarmSource: v.almSource == 1 ? '平台触发' : v.almSource == 2 ? '手机APP触发' : '锁具触发',
            almConfirmedTime: v.almIsConfirmed ? v.almConfirmedTime : '--',
@@ -159,25 +161,6 @@
      // getLocks();
   }

   async function getAreaTree() {
      try {
         const res = await getAreaTreeApi();
         let _data = [];
         if (res.code === 1 && res.data) {
            _data = res.data2;
         }
         const treeList = [];
         let ids = _data.map((v) => v.id);
         for (let i = 0; i < _data.length; i++) {
            formatAreaTree(_data[i], ids, treeList);
         }
         // console.log(_data, 'data');
         // console.log(treeList, 'treeList');
         areaList.value = treeList;
      } catch (e) {
         console.log(e);
      }
   }

   function delAlarm(scope) {
      $confirm('删除告警', () => {
@@ -202,47 +185,84 @@
   }

   onMounted(() => {
      getAreaTree();
      sendMessage();
   });
</script>

<template>
  <div class="page-wrapper">
    <div class="page-header">
    </div>
    <div class="page-header"></div>
    <div class="page-content">
      <hdw-card is-full>
      <yc-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label">区域</div>
                <div class="filter-label">省：</div>
                <div class="filter-content">
                  <el-cascader class="select" filterable clearable v-model="areaId" @change="areaChange"
                    :props="{ value: 'id', checkStrictly: true }" :options="areaList"><template #default="{ node, data }">
                      <span>{{ data.label }}</span>
                      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                    </template></el-cascader>
                </div>
              </div>
              <!-- <div class="tools-filter-item">
                  <div class="filter-label">锁具</div>
                  <div class="filter-content">
                    <el-select v-model="lockId" clearable filterable @change="sendMessage" :placeholder="!areaId?.length ? '请选择区域' : '请选择锁具'">
                      <el-option v-for="item in lockList" :key="'lock_' + item.lockId" :label="item.lockName"
                        :value="item.lockId" />
                  <el-select v-model="stationName1" clearable  placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList1" :key="'province_' + idx" :label="item" :value="item" />
                    </el-select>
                  </div>
                </div> -->
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">市：</div>
                <div class="filter-content">
                  <el-select v-model="stationName2" clearable  placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList2" :key="'city_' + idx" :label="item" :value="item" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">区县：</div>
                <div class="filter-content">
                  <el-select v-model="stationName3" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList3" :key="'list2_' + idx" :label="item" :value="item" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">机房：</div>
                <div class="filter-content">
                  <el-select v-model="stationName4" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in stationList4" :key="'list3_' + idx" :label="item" :value="item" />
                  </el-select>
                </div>
              </div>

              <div class="tools-filter-item">
                <div class="filter-label">锁具名称：</div>
                <div class="filter-content">
                  <el-select v-model="lockName" clearable filterable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
                    style="width: 180px">
                    <el-option v-for="(item, idx) in lockList" :key="'list3_' + idx" :label="item.lockName" :value="item.lockName" />
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item flex-row">
                <div class="filter-label">告警类型</div>
                <el-checkbox class="select-all" v-model="checkAll" :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange">
                <el-checkbox
                  class="select-all"
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >
                  全选
                </el-checkbox>
                <el-checkbox-group v-model="checkedTypes" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="(item, idx) in types" :key="'type_' + idx" :label="item.label" :value="item.value">
                <el-checkbox-group
                  v-model="checkedTypes"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox
                    v-for="(item, idx) in types"
                    :key="'type_' + idx"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-checkbox>
                </el-checkbox-group>
              </div>
@@ -260,22 +280,90 @@
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="datas.tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="lockId" align="center" label="钥匙ID" width="120" />
                  <el-table-column prop="lockName" align="center" label="钥匙名称" width="140" />
                  <el-table-column prop="areaPath" align="center" label="所属区域" min-width="180" />
                  <el-table-column prop="almName" align="center" label="告警名称" width="180" />
                  <el-table-column prop="alarmSource" align="center" label="告警来源" width="180" />
                  <el-table-column prop="almIsConfirmedStr" align="center" label="是否确认" width="180" />
                  <el-table-column prop="almStartTime" width="160" label="告警开始时间" />
                  <el-table-column prop="almEndTime" width="160" label="告警结束时间" />
                  <el-table-column prop="almConfirmedTime" width="160" label="告警确认时间" />
                  <el-table-column align="center" fixed="right" label="操作" width="220">
                <el-table
                  :data="datas.tableData"
                  border
                  style="width: 100%; height: 100%"
                >
                  <el-table-column type="index" fixed="left" width="50" />
                  <el-table-column
                    prop="lockId"
                    align="center"
                    label="锁具ID"
                    width="120"
                  />
                  <el-table-column
                    prop="lockName"
                    align="center"
                    label="锁具名称"
                    width="140"
                  />
                  <el-table-column
                    prop="stationName"
                    align="center"
                    label="机房"
                    min-width="180"
                  />
                  <el-table-column
                    prop="almName"
                    align="center"
                    label="告警名称"
                    width="180"
                  />
                  <el-table-column
                    prop="alarmSource"
                    align="center"
                    label="告警来源"
                    width="180"
                  />
                  <el-table-column
                    prop="almIsConfirmedStr"
                    align="center"
                    label="是否确认"
                    width="180"
                  />
                  <el-table-column
                    prop="almStartTime"
                    width="160"
                    label="告警开始时间"
                  />
                  <el-table-column
                    prop="almEndTime"
                    width="160"
                    label="告警结束时间"
                  />
                  <el-table-column
                    prop="almConfirmedTime"
                    width="160"
                    label="告警确认时间"
                  />
                  <el-table-column
                    align="center"
                    fixed="right"
                    label="操作"
                    width="220"
                  >
                    <template #default="scope">
                      <el-button type="primary" v-if="scope.row.almIsConfirmed == 0" size="small" @click="confirmAlarm(scope)">确认</el-button>
                      <el-button type="warning" v-else size="small" @click="cancelAlarm(scope)">取消</el-button>
                      <el-button type="danger" size="small" @click="delAlarm(scope)">删除</el-button>
                      <el-button
                        type="primary"
                        v-if="scope.row.almIsConfirmed == 0"
                        size="small"
                        @click="confirmAlarm(scope)"
                        >确认</el-button
                      >
                      <el-button
                        type="warning"
                        v-else
                        size="small"
                        @click="cancelAlarm(scope)"
                        >取消</el-button
                      >
                      <el-button
                        type="danger"
                        size="small"
                        @click="delAlarm(scope)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
@@ -285,22 +373,23 @@
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination v-model:current-page="pageCurr" v-model:page-size="pageSize"
                :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small" :disabled="disabled"
                :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              <el-pagination
                v-model:current-page="pageCurr"
                v-model:page-size="pageSize"
                :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
                size="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
            <div class="page-tool"></div>
          </div>
        </div>
      </hdw-card>
      </yc-card>
    </div>
    <div class="page-footer"></div>
    <!-- 弹窗 -->
    <el-dialog :title="dialogTitle" v-model="addEditVisible" top="0" :close-on-click-modal="false" class="dialog-center"
      width="700px" center>
      <add-edit v-if="addEditVisible" @success="onOk" :info="datas.keyInfo" @cancel="onCanel"></add-edit>
    </el-dialog>
  </div>
</template>