bonus-ui/src/views/screen/cityScreen-old/RetirementWarning.vue

<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-loading="isLoading"
      :visible.sync="dialogVisible"
      width="65%"
      :modal="false"
      class="dlg-box"
    >
      <div>
        <!-- 自定义title -->
        <i class="close-btn" @click="dialogVisible = false" />
        <div class="dlg-title">退役预警</div>

        <!-- 表单 -->
        <!-- <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
              <el-option v-for="item in statusList" :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" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
          </el-form-item>
        </el-form> -->

        <!-- <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
        </el-row> -->

        <el-table
          v-loading="isLoading"
          :data="tableList"
          stripe
          highlight-current-row
          style="width: 100%"
          height="546"
          class="table-container"
        >
          <el-table-column
            type="index"
            width="60"
            label="序号"
            align="center"
            :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
          />
          <el-table-column
            v-for="(column, index) in tableColumns"
            show-overflow-tooltip
            :key="index"
            :label="column.label"
            :prop="column.prop"
            align="center"
          >
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { retirementAlarmApi } from '@/api/screen/cityScreen'
export default {
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: '', // 状态
      },
      equipList: [
        { label: '全网省', value: 1 },
        { label: '合肥市', value: 2 },
      ],
      statusList: [
        { label: '在库', value: 1 },
        { label: '自用', value: 2 },
        { label: '共享', value: 3 },
        { label: '退役', value: 4 },
        { label: '维修', value: 5 },
      ],

      tableColumns: [
        { label: '工序', prop: 'procedureName' },
        { label: '设备', prop: 'deviceName' },
        { label: '预警情况', prop: 'situation' },
      ],
      tableList: [],
      total: 0,
    }
  },
  created() {},
  methods: {
    openDialog() {
      this.dialogVisible = true
      this.getList()
    },
    async getList() {
      try {
        // 获取设备列表
        const res = await retirementAlarmApi({ ...this.queryParams, companyId: sessionStorage.getItem('companyId') })
        this.tableList = res.data?.list || []
        this.total = res.data?.total || 0
      } catch (error) {
        this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
        console.error(error)
      }
    },
    getFeatureValue(row, prop) {
      const match = prop.match(/feature(Item|Value)(\d+)/)
      if (!match) return '-'

      const type = match[1] // 'Item' or 'Value'
      const index = Number(match[2]) - 1
      const list = row.propertyVoList || []

      if (!list[index]) return '-'

      return type === 'Item' ? list[index].propertyName : list[index].propertyValue
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.queryForm.resetFields()
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  // 启用斑马纹
  &.el-table--striped .el-table__body {
    tr.el-table__row--striped td {
      background-color: #0d214580 !important; // 浅紫色
    }
  }

  .el-table__header {
    background: transparent;
  }

  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
    background-color: rgba(16, 37, 81, 0.9) !important;
  }
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
  border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

::v-deep .el-table__body-wrapper {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog {
  background: transparent !important;
}

::v-deep .el-dialog .el-dialog__body {
  background-image: url('../wsScreenWidescreen/img/all-dialog.png');
  background-size: 100% 100%;
  color: #fff;
}
::v-deep .el-dialog__header {
  display: none;
}
// 输入框
::v-deep .el-input__inner {
  background: rgba(3, 16, 44, 0.5) !important;
}
::v-deep .el-button--primary {
  background: #3165d6;
  border-color: #3165d6;
}
::v-deep .el-button--mini.is-circle {
  background-color: rgba(16, 37, 81, 0.5);
  color: #fff;
}
// 表格 - 单元格
::v-deep .el-table th.el-table__cell {
  color: #fff;
  background-color: transparent !important;
}
// 表格 - 每一行
::v-deep .el-table tr {
  background-color: transparent !important;
}
// 表头
::v-deep .el-table thead tr {
  background: url('../wsScreenWidescreen/img/all-table-tr.png');
  background-size: 100% 100%;
}
// 点击后背景色
::v-deep .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background: #10264a;
}
// 鼠标移入
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(16, 37, 81, 0.9);
}
// stripe - 斑马线
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #0d214580;
}
// 分页背景
::v-deep .pagination-container {
  background-color: transparent;
}
// 分页-按钮-选中
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3165d6;
}
// 分页-按钮-未选中
::v-deep .el-pagination.is-background .el-pager li {
  background-color: rgba(16, 37, 81, 0.5);
}
// 分页-上一页
::v-deep .el-pagination.is-background .btn-prev {
  background-color: rgba(16, 37, 81, 0.5);
}
// 分页-下一页
::v-deep .el-pagination.is-background .btn-next {
  background-color: rgba(16, 37, 81, 0.5);
}
::v-deep .el-select-dropdown {
  background-color: #0c1837 !important;
  border: 1px solid #0c1837 !important;
  overflow: hidden;
}
::v-deep .el-scrollbar {
  /* height: 184px !important; */
  background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
  color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #0c1837 !important;
}

// --
.btn {
  background-color: rgba(16, 37, 81, 0.5);
  color: #fff;
  border: none;
  // 选中颜色
  &:hover {
    background-color: rgba(16, 37, 81, 0.5);
  }
  // 点击颜色
  &:active {
    background-color: rgba(16, 37, 81, 0.5);
  }
}
.table-container {
  color: #fff;
  background-color: #04112a80;
}
.dlg-box {
  position: absolute;
  .close-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-image: url('../wsScreenWidescreen/img/close.png');
    background-size: 100% 100%;
  }
  .dlg-title {
    margin-top: -25px;
    margin-bottom: 45px;
    font-size: 21px;
    text-align: center;
    font-weight: 800;
  }
}
</style>