企业应急空间优化，三道防线优化

linwe

2024-11-13 9ee3f349fbbcaeed2694a46744fe14862ed09d7c

 src/views/companyInfo/components/box/occurStatistics.vue

@@ -30,169 +30,13 @@
  data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
  getLists()
})
// 表格样式
const tableCellStyle = ({ row, column }) => {
  return { background: "#152851", color: "#fff" }
}
// 表格表头样式
const headerCellStyle = ({ }) => {
  return {
    background: "#152851",
    color: "#fff",
  }
}
// 搜索条件
const formInline = reactive({
  perInCha: "",
  type: ''
})

// 提交查询
const onSubmit = () => {
  pages.page = 1
  pages.pageSize = 13
  pages.total = 0
  console.log("submit!")
  getLists(formInline)
}

// 分页树改变
const handleSizeChange = (val) => {
  pages.pageSize = val
  getLists(formInline)
}
// 分页改变
const handleCurrentChange = (val) => {
  pages.page = val
  getLists(formInline)
}
// 重置条件
const clearBtn = () => {
  formInline.perInCha = ''
  formInline.type = ''
  pages.page = 1
  pages.pageSize = 13
  pages.total = 0
  getLists(formInline)
}

// 查询分页数据
function getLists (param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  param.firmId = data.companyInfo.id
  loading.value = true
  getList(param)
    .then((res) => {
      const data = res.data.data
      data.records.forEach((element) => {
        if (element.type == 1) {
          element.ownership = "园区"
        } else {
          element.ownership = "企业"
        }
      })
      tableData.value = data.records
      pages.total = data.total
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
      console.log(err)
    })
}
</script>

<template>
  <div class="search-box">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="" class="form-item-input">
        <el-input v-model="formInline.perInCha" placeholder="请输入姓名" clearable style="width: 120px" />
      </el-form-item>
      <!-- <el-form-item label="归属">
                        <el-select v-model="formInline.type" placeholder="请选择" clearable style="width: 120px">
                            <el-option label="园区" value="1" />
                            <el-option label="企业" value="2" />
                        </el-select>
                    </el-form-item> -->
      <el-form-item class="search-btn">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="clearBtn">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="tableCellStyle"
      v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.1)">
      <el-table-column fixed prop="perInCha" label="责任人姓名" />
      <el-table-column prop="perInChaPho" label="联系电话" />
      <!-- <el-table-column prop="firmName" label="单位名称" /> -->
      <el-table-column prop="perInCha" label="负责人" width="100" />
    </el-table>
    <div class="el-page">
      <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    1111111111111111
  </div>
</template>

<style lang="scss" scoped>
.el-form-item__label {
  color: #fff !important;
}

/* 当表格没有数据时，修改表格的背景颜色 */
.el-table--empty .el-table__body {
  background-color: #19284e !important;
  /* 你想要的背景颜色 */
}

.search-box {
  padding: 10px;

  ::v-deep .el-table__body-wrapper {
    background-color: #152851;
  }
}

.el-page {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // margin-bottom:10px;
}

.form-item-input {
  width: 160px;

  ::v-deep(.el-input) {
    width: 0;
    flex: 1;

    .el-input__wrapper {
      font-size: 16px;
      font-weight: 400;
      border-radius: 0;
      background: rgba(135, 158, 199, 0.3);
      box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);

      .el-input__inner {
        color: #BFD3E5;
      }
    }
  }

}

.search-btn {
  ::v-deep .el-button--primary {
    background-color: transparent;
    border-color: none;
    border: none;
    cursor: pointer;
    color: #edffff;
    background: rgba(135, 158, 199, 0.3);
    box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
  }
}
</style>
<style lang="scss" scoped></style>