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-11-20 14:33:22
 * @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="carNo">
        <el-input
          v-model="warnForm.carNo"
          placeholder="请输入车牌号"
          clearable
        />
      </el-form-item>
      <el-form-item label="设备ID" prop="deviceId">
        <el-select
          v-model="warnForm.deviceId"
          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="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          clearable
        />
      </el-form-item>
      <el-form-item label="阅读状态" prop="readStatus">
        <el-select
          v-model="warnForm.readStatus"
          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-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="`tabs-${index}`"
          :label="item.title"
          :name="item.value"
        >
          <!-- 标签页头 -->
          <span slot="label"
            ><i
              v-if="item.status === '1'"
              style="color: #67c23a"
              class="el-icon-success"
            ></i>
            <i
              v-if="item.status === '2'"
              style="color: #e6a23c"
              class="el-icon-info"
            ></i>
            <i
              v-if="item.status === '3'"
              style="color: #909399"
              class="el-icon-warning"
            ></i>
            <i
              v-if="item.status === '4'"
              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%"
          >
            <el-table-column label="时间" align="center" prop="segmentName" />
            <el-table-column
              label="消息内容"
              align="center"
              prop="stakeStart"
            />
            <el-table-column label="车牌号" align="center" prop="stakeEnd" />
            <el-table-column label="设备id" align="center" prop="stakeEnd" />
          </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>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "WarningCenter",
  data() {
    return {
      // 查询表单绑定
      warnForm: {
        // 车牌号
        carNo: "",
        // 设备id
        deviceId: "",
        // 阅读状态
        readStatus: "",
      },
      // 设备列表
      deviceList: [],
      // 时间
      dateTime: [],
      // 阅读状态列表
      readStatusList: [
        { label: "已读", value: "1" },
        { label: "未读", value: "2" },
      ],
      // 导航栏选择绑定
      activeName: "1",
      // 导航栏列表
      editableTabs: [
        { title: "成功", value: "1", count: 10, status: "1" },
        { title: "提醒", value: "2", count: 10, status: "2" },
        { title: "告警", value: "3", count: 10, status: "3" },
        { title: "错误", value: "4", count: 10, status: "4" },
      ],
      // 预警列表
      warningList: [],
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 列表总条数
      tableTotal: 0,
      // 列表加载状态
      loading: false,
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val.params.status) {
          this.activeName = val.params.status;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * @description: 点击搜索事件
     * @return {*}
     */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.warnForm));
      this.getList();
    },

    /**
     * @description: 重置查询
     * @return {*}
     */
    resetQuery() {
      this.warnForm = {
        // 车牌号
        carNo: "",
        // 设备id
        deviceId: "",
        // 阅读状态
        readStatus: "",
      };
      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,
        activeName: this.activeName,
        startTime: this.dateTime ? this.dateTime[0] : "",
        endTime: this.dateTime ? this.dateTime[1] : "",
      };
      setTimeout(() => {
        this.loading = false;
      }, 100);
    },

    /**
     * @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;
}

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