xx-doctor-web-html/src/views/database/components/tableLogList.vue

<template>
  <div class="table-box">
    <div class="table-bodyer">
      <div class="table-bodyer-option">
        <el-form :inline="true" size="medium" :model="listQuery">
          <el-form-item label="时间范围:">
            <el-date-picker
              v-model="listQuery.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="日志类型:">
            <el-radio-group v-model="listQuery.radio1">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="错误"></el-radio-button>
              <el-radio-button label="普通"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="关键字:">
            <el-input
              v-model="listQuery.user"
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>



          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-bodyer-detail">
        <div class="table-bodyer-detail-data">
          <div class="table-bodyer-detail-data-list ronin-table-box">
            <el-table :data="tableData" style="width: 100%" height="100%" stripe>
                <el-table-column prop="updateTime" label="日志时间" width="200">
              </el-table-column>

              <el-table-column prop="name" label="类型" width="120">
                <template slot-scope="{row}">
                    <el-tag>普通</el-tag>
                    </template>
              </el-table-column>


              <el-table-column prop="p_sex" label="内容" >
                <template>
                    refresh failed; error: 'Could not open file '/var/log/mysqld.log' for error logging.'
                </template>
              </el-table-column>



              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button @click="onTapDetail(scope.row)" type="text"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

  <script>
import TableDataList from "../components/tableDataList.vue";
export default {
  name: "operate",
  components: { TableDataList },
  data() {
    return {
      isShowQueryData: false,
      mode: "",
      listQuery: [],
      tableData: [
        {
          code: "1",
          name: "血常规",
          p_name: "李先生",
          p_sex: "男",
          updateTime: "2023-09-20 18:02",
        },
        {
          code: "1",
          name: "血常规",
          p_name: "李先生",
          p_sex: "男",
          updateTime: "2023-09-20 18:02",
        },
        {
          code: "1",
          name: "血常规",
          p_name: "李先生",
          p_sex: "男",
          updateTime: "2023-09-20 18:02",
        },
      ],
    };
  },
  watch: {},
  created() {},
  methods: {
    onTapQueryData(e) {
      this.isShowQueryData = true;
    },
  },
};
</script>

  <style lang="scss" scoped>
.table-box {
  background: #fff;
  .table-header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }
}
.table-bodyer-option {
  margin-bottom: 20px;
  .el-form-item {
    margin-bottom: 0px;
  }
}
.table-bodyer-detail {
  display: flex;
  align-content: space-between;
  margin-bottom: 14px;
  .table-bodyer-detail-data {
    flex: 1;
    margin-bottom: 16px;
    &-dashboard {
      display: flex;
      align-items: center;
      min-height: 60px;
      justify-content: flex-start;
      background: #f7f9fe;
      width: 100%;
      .ai {
        margin: 0px 10px;
        img {
          width: 44px;
        }
      }
      .text {
      }
    }
  }
}

.operate-dashboard {
  height: 140px;
  margin-top: 14px;
  background: #f9faff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  background-image: url("../../../assets/images/img-operate-dashboard-bg.png");
  margin-bottom: 24px;
  .operate-dashboard-nums {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50%;
    margin-left: 20px;
    .nums-box {
      width: 33%;
      .title {
        font-size: 14px;
        color: #999;
        font-weight: 400;
      }
      .nums {
        font-size: 28px;
        font-family: "DIN Alternate";
        margin-bottom: 4px;
        font-weight: bold;
      }
    }
  }
  .operate-dashboard-info {
    margin-left: 20px;
    width: 24%;
    .room-name {
      font-size: 24px;
      font-weight: bold;
      line-height: 32px;
      margin-bottom: 10px;
    }
    .room-des {
      font-size: 14px;
      color: #999;
      font-weight: normal;
    }
  }
}

.drawer-content {
  padding: 20px;
}
.ronin-table-box{
  height: calc(100vh - 200px);
}
</style>