智慧园区前端大屏
shuishen
2024-11-08 a528da8558e414fa30ba0c01ef9e7603eb870139
src/views/rt/components/box/dataContent.vue
@@ -30,7 +30,7 @@
  return { background: "#152851", color: "#fff" };
};
// 表格表头样式
const headerCellStyle = ({}) => {
const headerCellStyle = ({ }) => {
  return {
    background: "#152851",
    color: "#fff",
@@ -39,14 +39,14 @@
// 搜索条件
const formInline = reactive({
  perInCha: "",
  type:''
  type: ''
});
// 提交查询
const onSubmit = () => {
  pages.page = 1
  pages.pageSize=13
  pages.total= 0
  pages.pageSize = 13
  pages.total = 0
  console.log("submit!");
  getLists(formInline);
};
@@ -62,12 +62,12 @@
  getLists(formInline);
}
// 重置条件
const clearBtn = ()=>{
const clearBtn = () => {
  formInline.perInCha = ''
  formInline.type = ''
  pages.page = 1
  pages.pageSize=13
  pages.total= 0
  pages.pageSize = 13
  pages.total = 0
  getLists(formInline);
}
@@ -80,7 +80,7 @@
    .then((res) => {
      const data = res.data.data;
      data.records.forEach((element) => {
        if (element.type==1) {
        if (element.type == 1) {
          element.ownership = "园区";
        } else {
          element.ownership = "企业";
@@ -103,20 +103,10 @@
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input
              v-model="formInline.perInCha"
              placeholder="请输入姓名"
              clearable
              style="width: 120px"
            />
            <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-select v-model="formInline.type" placeholder="请选择" clearable style="width: 120px">
              <el-option label="园区" value="1" />
              <el-option label="企业" value="2" />
            </el-select>
@@ -126,27 +116,16 @@
            <el-button type="" @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"
        >
        <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="tableCellStyle"
          v-loading="loading">
          <el-table-column fixed prop="perInCha" label="责任人姓名" />
          <el-table-column prop="perInChaPho" label="联系电话" />
          <!-- <el-table-column prop="firmName" label="单位名称" /> -->
          <el-table-column prop="ownership" 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"
          />
          <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </template>
@@ -154,13 +133,18 @@
</template>
<style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  background-color: #152851;
}
.el-form-item__label {
  color: #fff !important;
}
/* 当表格没有数据时,修改表格的背景颜色 */
.el-table--empty .el-table__body {
  background-color: #19284e !important; /* 你想要的背景颜色 */
  background-color: rgba(135, 158, 199, 0.3) !important;
  /* 你想要的背景颜色 */
}
.el-page {
@@ -168,6 +152,7 @@
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // margin-bottom:10px;
}
</style>