Merge branch 'dev_tide_gybjyhglxt' into dev_tide_gybjyhglxt_xindao

zouyu

4 天以前 69250232abffb8b578d9b94c20f4d560492efa02

 src/views/alarmManagement/alarmConfig/alarmRule.vue

@@ -1,173 +1,222 @@
<template>
  <div class="alarm-rule-config">
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="规则名称">
          <el-input v-model="searchForm.ruleName" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="searchForm.equipmentType" placeholder="请选择设备类型">
            <el-option label="工艺设备" value="工艺设备" />
            <el-option label="检测设备" value="检测设备" />
            <el-option label="其他设备" value="其他设备" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="table-card">
      <template #header>
        <div class="card-header">
          <span>报警规则配置</span>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增规则</el-button>
        </div>
      </template>
      <el-table :data="ruleList" style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="ruleName" label="规则名称" />
        <el-table-column prop="equipmentType" label="设备类型" />
        <el-table-column prop="parameter" label="监控参数" />
        <el-table-column prop="alarmLevel" label="报警级别" />
        <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip/>
        <el-table-column prop="status" label="状态" width="150">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-text="启用" inactive-text="禁用" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="ruleList.length"
          :page-size="10"
          :page-sizes="[10, 20, 30, 50]"
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="规则名称">
        <el-input
          v-model="filters.deviceName"
          style="width: 240px"
          placeholder="请输入规则名称"
          clearable
          @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="设备类型">
        <el-input
            v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请输入设备类型"
            clearable
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="监控参数">
        <el-input
            v-model="filters.supplierName"
            style="width: 240px"
            placeholder="请输入监控参数"
            clearable
            @change="getTableData"
        />
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> 新增 </el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            @click="deleteRow(multipleList.map((item) => item.id))"
          >
            批量删除
          </el-button>
        </div>
      </div>
    </el-card>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
    <el-dialog v-model="qrDialogVisible" title="二维码" width="300px">
      <div style="text-align:center;">
        <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" />
        <div style="margin:10px 0;">
          <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AlarmRule',
  data() {
    return {
      searchForm: {
        ruleName: '',
        equipmentType: ''
      },
      ruleList: [
        {
          id: 1,
          ruleName: '温度过高报警',
          equipmentType: '工艺设备',
          parameter: '温度',
          alarmLevel: '严重',
          createTime: '2025-12-01 10:30:00',
          status: true
        },
        {
          id: 2,
          ruleName: '压力异常报警',
          equipmentType: '工艺设备',
          parameter: '压力',
          alarmLevel: '中等',
          createTime: '2025-12-02 14:20:00',
          status: true
        },
        {
          id: 3,
          ruleName: '流量过低报警',
          equipmentType: '检测设备',
          parameter: '流量',
          alarmLevel: '轻微',
          createTime: '2025-12-03 09:15:00',
          status: false
        },
        {
          id: 4,
          ruleName: '电压不稳定报警',
          equipmentType: '其他设备',
          parameter: '电压',
          alarmLevel: '中等',
          createTime: '2025-12-04 16:45:00',
          status: true
        },
        {
          id: 5,
          ruleName: '液位异常报警',
          equipmentType: '工艺设备',
          parameter: '液位',
          alarmLevel: '严重',
          createTime: '2025-12-05 11:20:00',
          status: true
        }
      ]
    }
<script setup>
import { usePaginationApi } from "../../../hooks/usePaginationApi.jsx";
import { getLedgerPage, delLedger } from "../../..//api/equipmentManagement/ledger.js";
import { onMounted, getCurrentInstance } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
import { ref } from "vue";

defineOptions({
  name: "设备台账",
});

// 表格多选框选中项
const multipleList = ref([]);
const { proxy } = getCurrentInstance();
const modalRef = ref();
const qrDialogVisible = ref(false);
const qrCodeUrl = ref("");
const qrRowData = ref(null);

const {
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  getLedgerPage,
  {
    deviceName: undefined,
    deviceModel: undefined,
    supplierName: undefined,
    unit: undefined,
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
  methods: {
    handleSearch() {
      console.log('搜索', this.searchForm)
  [
    {
      label: "规则名称",
      align: "center",
      prop: "deviceName",
    },
    handleReset() {
      this.searchForm = {
        ruleName: '',
        equipmentType: ''
      }
    {
      label: "设备类型",
      align: "center",
      prop: "deviceModel",
    },
    handleAdd() {
      console.log('新增规则')
    {
      label: "监控参数",
      align: "center",
      prop: "supplierName",
    },
    handleEdit(row) {
      console.log('编辑规则', row)
    {
      label: "报警级别",
      align: "center",
      prop: "unit",
    },
    handleDelete(row) {
      console.log('删除规则', row)
    {
      label: "创建时间",
      align: "center",
      prop: "createTime",
    },
    {
      label: "是否启用",
      align: "center",
      prop: "status",
    },
      {
         dataType: "action",
         label: "操作",
         align: "center",
         fixed: 'right',
         width: 150,
         operation: [
            {
               name: "编辑",
               type: "text",
               clickFun: (row) => {
                  edit(row.id)
               },
            },
         ],
      },
  ]
);

// 多选后做什么
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};

const add = () => {
  modalRef.value.openModal();
};
const edit = (id) => {
  modalRef.value.loadForm(id);
};
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
   pagination.pageSize = limit;
  onCurrentChange(page);
};
const deleteRow = (id) => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delLedger(id);
    if (code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getTableData();
    }
  });
};

const changeDaterange = (value) => {
  if (value) {
    filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
  } else {
    filters.entryDateStart = undefined;
    filters.entryDateEnd = undefined;
  }
}
  getTableData();
};


onMounted(() => {
  getTableData();
});
</script>

<style scoped>
.alarm-rule-config {
  padding: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}

.search-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 10px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

</style>