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 15:49:28
 * @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-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.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%"
          @current-change="handleTableChange"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />

          <el-table-column
            width="200"
            label="时间"
            align="center"
            prop="segmentName"
          >
            <template slot-scope="scope">
              <span class="table-index">asd</span>
              {{ scope.row.segmentName }}
            </template>
          </el-table-column>
          <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>
  </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: [],
      // 列表勾选数据
      checkIds: [],
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 列表总条数
      tableTotal: 0,
      // 列表加载状态
      loading: false,
      // 批量删除状态
      multiple: true,
    };
  },
  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.warningList = [{id:"1", segmentName: "sSSSSSS" }];
        this.loading = false;
      }, 100);
    },

    /**
     * @description: 点击列表行事件
     * @param {*} val
     * @return {*}
     */
    handleTableChange(val) {
      if (val) {
        console.log(val, "ddd");
        this.getList();
      }
    },

    /**
     * @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 deleteRoad(checkIds);
        })
        .then(() => {
          this.getList();
          this.$refs.warningTable.clearSelection();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    /**
     * @description: 全部已读事件
     * @return {*}
     */
    handleRead() {
      this.getList();
    },

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

.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>