xjsaas-ui/src/views/xj/inspection-warn/warning-center/index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-20 11:58:33
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-05 15:03:52
 * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-center\index.vue
 * @Description: 预警中心-信息中心
-->

<template>
  <div class="content">
    <!-- 搜索表单 -->
    <el-form :model="warnForm" ref="queryForm" size="small" :inline="true" label-width="5rem">
      <!-- <el-form-item label="消息类型" prop="type">
        <el-select v-model="warnForm.type" placeholder="请选择消息类型" filterable clearable>
          <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="时间" prop="dateTime">
        <el-date-picker v-model="dateTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable />
      </el-form-item>
      <el-form-item label="阅读状态" prop="read">
        <el-select v-model="warnForm.read" placeholder="请选择阅读状态" clearable>
          <el-option v-for="item in readStatusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-check" size="mini" @click="handleRead"
          v-hasPermi="['system:defect:add']">全部已读
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete(null)" v-hasPermi="['system:defect:remove']">批量删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 导航栏 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in editableTabs" :key="`tabs-${index}`" :label="item.title" :name="item.code">
        <!-- 标签页头 -->
        <span slot="label">
          <!-- <i
            v-if="item.code === 'SUCCESS'"
            style="color: #67c23a"
            class="el-icon-success"
          ></i> -->
          <i v-if="item.code === 'REMIND'" style="color: #e6a23c" class="el-icon-info"></i>
          <i v-if="item.code === 'WARNING'" style="color: #909399" class="el-icon-warning"></i>
          <!-- <i
            v-if="item.title === '错误'"
            style="color: #f56c6c"
            class="el-icon-error"
          ></i
          > -->
          {{ item.title }}({{ item.count }})</span>
        <!-- 表格 -->
        <el-table ref="warningTable" :data="warningList" v-loading="loading" style="width: 100%"
          @current-change="handleTableChange" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />

          <el-table-column width="180" label="时间" align="center" prop="createdTime">
            <template slot-scope="scope">
              <span :class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`">{{ scope.row.createdTime }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="消息标题" width="150" align="center" prop="title">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="消息内容" align="left" prop="content">
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pagination-part">
          <el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getWarningList,
  getWarningNav,
  markNoticeRead,
  noticeReadAll,
  deleteNotice
} from "@/api/xj/inspection/center";
export default {
  name: "WarningCenter",
  data() {
    return {
      // 查询表单绑定
      warnForm: {
        // 设备id
        type: "",
        // 阅读状态
        read: "",
      },
      // 设备列表
      deviceList: [],
      // 时间
      dateTime: [],
      // 阅读状态列表
      readStatusList: [
        { label: "未读", value: 1 },
        { label: "已读", value: 2 },
      ],
      // 导航栏选择绑定
      activeName: "WARNING",
      // 导航栏列表
      editableTabs: [],
      // 预警列表
      warningList: [],
      // 列表勾选数据
      checkIds: [],
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 列表总条数
      tableTotal: 0,
      // 列表加载状态
      loading: false,
      // 批量删除状态
      multiple: true,
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val.params.title) {
          this.activeName = val.params.title;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getNav();
    this.getList();
  },
  methods: {
    /**
     * @description: 获取导航栏数据
     * @return {*}
     */
    getNav() {
      getWarningNav().then(({ code, data }) => {
        if (code === 200) {
          this.editableTabs = data;
        }
      });
    },

    /**
     * @description: 点击搜索事件
     * @return {*}
     */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.warnForm));
      this.getList();
    },

    /**
     * @description: 重置查询
     * @return {*}
     */
    resetQuery() {
      this.warnForm = {
        // 设备id
        type: "",
        // 阅读状态
        read: "",
      };
      this.dateTime = [];
      this.getList();
    },

    /**
     * @description: 切换标签事件
     * @return {*}
     */
    handleClick() {
      this.pagination.page = 1;
      this.getList();
    },

    /**
     * @description: 获取列表数据
     * @return {*}
     */
    getList() {
      this.loading = true;
      const data = {
        ...this.pagination,
        ...this.warnForm,
        notificationType: this.activeName,
        startTime: this.dateTime ? this.dateTime[0] : "",
        endTime: this.dateTime ? this.dateTime[1] : "",
      };
      getWarningList(data)
        .then(({ code, rows, total }) => {
          if (code === 200) {
            this.warningList = rows;
            this.tableTotal = total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
     * @description: 点击列表行事件
     * @param {*} val
     * @return {*}
     */
    handleTableChange(val) {
      if (val) {
        markNoticeRead(val.id).then(({ code }) => {
          if (code === 200) {
            this.getList();
            this.getNav();
          }
        });
      }
    },

    /**
     * @description: 列表选择改变事件
     * @param {*} val
     * @return {*}
     */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },

    /**
     * @description: 批量删除事件
     * @return {*}
     */
    handleDelete(row) {
      const checkIds = row ? [row.id] : this.checkIds;
      if (!checkIds.length) {
        this.$modal.msgWarning("请选择要删除的记录");
        return;
      }
      this.$modal
        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
        .then(() => {
          return deleteNotice(checkIds);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          this.getList();
          this.$refs.warningTable.clearSelection();
        })
        .catch(() => { });
    },

    /**
     * @description: 全部已读事件
     * @return {*}
     */
    handleRead() {
      noticeReadAll().then(({ code }) => {
        if (code === 200) {
          this.getList();
          this.getNav();
        }
      });
    },

    /**
     * @description: 切换分页
     * @param {*} arg
     * @return {*}
     */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getList();
    },

    /**
     * @description: 切换每页条数
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.size = arg;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
  overflow-y: auto;
}

.el-table {
  .table-index {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      background-color: #f56c6c;
    }
  }
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}
</style>