epmet-apartment-pc/src/views/index.vue

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 左侧 -->
      <el-col :span="16"
        ><div class="grid-content-l el-mb-5">
          <div class="el-flex el-mb-4">
            <div
              class="el-flex el-flex-center el-flex-y-center bt-l"
              :class="{ active: activeTab === 'talent' }"
              @click="setActive('talent')"
            >
              查人才
            </div>
            <div
              class="el-flex el-flex-center el-flex-y-center el-ml-6 bt-r"
              :class="{ active: activeTab === 'house' }"
              @click="setActive('house')"
            >
              查房屋
            </div>
          </div>
          <!-- 人才显示 -->
          <div class="el-flex" v-if="activeTab === 'talent'">
            <el-input
              placeholder="  输入姓名/联系电话/证件号查询"
              v-model="input2"
            >
            </el-input>
            <el-button type="primary">查询</el-button>
          </div>
          <!-- 房屋显示 -->
          <div class="el-flex" v-if="activeTab === 'house'">
            <el-input
              placeholder="   输入小区名称/楼栋/房间号查询"
              v-model="input2"
            >
            </el-input>
            <el-button type="primary">查询</el-button>
          </div>
        </div>
        <!-- 工作台 -->
        <div class="work-content">
          <CommonTitle>工作台</CommonTitle>
          <el-row :gutter="10" class="el-mt-5">
            <el-col
              v-for="(item, index) in workbenchItems"
              :key="index"
              :span="4"
              ><div
                class="el-flex el-flex-center el-flex-y-center single"
                :style="{ backgroundColor: item.color }"
                @click="handleClick(item.url, item.label)"
              >
                <el-image
                  style="width: 21px; height: 28px; margin-right: 8px"
                  :src="item.icon"
                ></el-image>

                {{ item.label }}
                <span v-if="item.count > 0" class="badge">
                  {{ item.count }}
                </span>
              </div></el-col
            >
          </el-row>
          <div>
            <el-card class="el-flex box-card" shadow="always">
              <div class="card-cont">
                <el-row :gutter="10" wrap="no-wrap" v-for="item in 2" :key="item" class="el-mt-3">
                  <!-- 入住办理 -->
                  <el-col :span="2.5">
                    <div class="clearfix">入住办理:</div>
                  </el-col>
                  <!-- 房间信息 -->
                  <el-col :span="5.5">
                    <div class="label">5号楼-1单元-805-南卧1</div>
                  </el-col>
                  <!-- 姓名信息 -->
                  <el-col :span="2">
                    <div class="info">张三四</div>
                  </el-col>
                  <!-- 性别信息 -->
                  <el-col :span="1">
                    <div class="sex">男</div>
                  </el-col>
                  <!-- 电话信息 -->
                  <el-col :span="2.5">
                    <div class="phone">187*****8989</div>
                  </el-col>
                  <!-- 身份证信息 -->
                  <el-col :span="3.5">
                    <div class="id">37*************12</div>
                  </el-col>
                  <!-- 状态信息 -->
                  <el-col :span="3">
                    <div class="status">等待签订电子合同</div>
                  </el-col>
                  <!-- 继续办理操作 -->
                  <el-col :span="4">
                    <div class="el-flex el-flex-center el-flex-y-center menu">
                      继续办理<el-image
                        style="width: 20px; height: 20px; margin-left: 8px"
                        :src="rightIcon"
                      ></el-image>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </div>
        <!-- 实际统计、月度趋势 -->
        <div class="data-content">
          <CommonTitle>实际统计/月度趋势</CommonTitle>
          <el-row
            type="flex"
            justify="space-between"
            :gutter="20"
            class="el-mt-5"
          >
            <el-col :span="5" v-for="(item, index) in statistics" :key="index">
              <div
                class="el-flex el-flex-center el-flex-y-center statistic-item"
                :style="{ backgroundColor: item.color }"
              >
                <el-image
                  style="width: 23px; margin-right: 8px"
                  :src="item.icon"
                ></el-image>
                <div
                  class="el-flex el-flex-column el-flex-center el-flex-y-center info"
                >
                  <div class="num" :style="{ color: item.fontcolor }">158</div>
                  <div class="tit">{{ item.label }}</div>
                </div>
                <div>{{ item.unit }}</div>
              </div>
            </el-col>
          </el-row>
          <div
            id="mycharts"
            ref="chart"
            style="height: 320px; margin-top: 20px"
          ></div>
        </div>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="8"
        ><div class="grid-content-r">
          <!-- 消息提醒 -->
          <div class="message-content">
            <CommonTitle :showMore="isShowMore">消息提醒</CommonTitle>
            <div class="el-mt-4" v-for="item in 4">
              <div class="time">2024-09-24 11:29:31</div>
              <div class="mess-cont el-flex el-flex-space-between">
                <div class="mess-info">您有一条退房提醒</div>
                <!-- 未读 -->
                <el-tag type="danger">未读</el-tag>
              </div>
              <el-divider></el-divider>
            </div>
          </div>
          <!-- 入住评价排行 -->
          <div class="evaluation-content">
            <CommonTitle>入住评价排行</CommonTitle>
            <div>
              <div
                class="eva-item el-mt-5"
                v-for="(item, index) in evaluationList"
                :key="index"
              >
                <div class="el-flex">
                  <div class="rank-circle" :class="`rank-${index + 1}`">
                    {{ index + 1 }}
                  </div>
                  <div class="eva-tit">{{ item.title }}</div>
                </div>

                <div class="eva-info el-flex el-flex-space-around el-mt-2">
                  <div>
                    入住人次 <span>{{ item.checkInCount }}</span>
                  </div>
                  <div>
                    非常满意 <span>{{ item.verySatisfied }}</span>
                  </div>
                  <div>
                    满意 <span>{{ item.satisfied }}</span>
                  </div>
                  <div>
                    不满意 <span>{{ item.unsatisfied }}</span>
                  </div>
                </div>
                <el-divider v-if="index === 1 || index > 1"></el-divider>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 退房提醒 -->
    <CommonReminder
      :dialogTitle="'退房提醒'"
      :visible.sync="visible"
      :queryParams="queryParams"
      :tableData="tableData"
      :total="total"
      :actions="checkOutActions"
      @handleQuery="handleQuery"
      @handleAction="handleEdit"
      @getList="getList"
    />
    <!-- 入住预约 -->
    <CommonReminder
      :dialogTitle="'入住预约'"
      :visible.sync="reservationVisible"
      :queryParams="reservationQueryParams"
      :tableData="reservationTableData"
      :total="reservationTotal"
      :actions="reservationActions"
      @handleQuery="handleReservationQuery"
      @handleAction="handleReservationAction"
      @getList="getReservationList"
    />
  </div>
</template>

<script>
import * as Echarts from "echarts";
import CommonTitle from "./components/CommonTitle.vue";
import CommonReminder from "./components/CommonReminder.vue";
export default {
  name: "Index",
  components: {
    CommonTitle,
    CommonReminder,
  },
  data() {
    return {
      input2: "",
      // 记录当前激活的标签
      activeTab: "talent",
      // 工作台数据
      workbenchItems: [
        {
          label: "入住办理",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#fbd5d5",
          url: "/residence/check_in",
        },
        {
          label: "退房办理",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#c2e2f9",
          url: "/residence/check_out",
        },
        {
          label: "入住预约",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#fbedc8",
        },
        {
          label: "看房预约",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#eceeed",
        },
        {
          label: "退房提醒",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#fdd1d1",
        },
        {
          label: "报修提醒",
          icon: require("../assets/images/fa-gavel.png"),
          color: "#fbedc8",
          count: 3,
        },
      ],
      rightIcon: require("../assets/images/circle-right.png"),
      statistics: [
        {
          icon: require("../assets/images/antOutline-home.png"),
          count: 158,
          label: "总房间",
          unit: "间",
          color: "#d3e7fd",
          fontcolor: "#5D76FB ",
        },
        {
          icon: require("../assets/images/pin-user.png"),
          count: 100,
          label: "已入住房间",
          color: "#d2f9e2",
          unit: "间",
          fontcolor: "#19BC7F",
        },
        {
          icon: require("../assets/images/fa-clock.png"),
          count: 50,
          label: "空闲房间",
          color: "#fde7ed",
          unit: "间",
          fontcolor: "#F25656 ",
        },
        {
          icon: require("../assets/images/mb-users.png"),
          count: 8,
          label: "入住人次",
          color: "#f7f7ca",
          unit: "间",
          fontcolor: "#D7980D ",
        },
      ],
      isShowMore: true, //控制更多内容显示隐藏的状态
      evaluationList: [
        {
          title: "国信上月云邸 1201",
          checkInCount: 50,
          verySatisfied: 30,
          satisfied: 14,
          unsatisfied: 16,
        },
        {
          title: "国信上月云邸 1202",
          checkInCount: 40,
          verySatisfied: 25,
          satisfied: 10,
          unsatisfied: 25,
        },
        {
          title: "国信上月云邸 1203",
          checkInCount: 30,
          verySatisfied: 20,
          satisfied: 8,
          unsatisfied: 22,
        },
        {
          title: "国信上月云邸 1204",
          checkInCount: 25,
          verySatisfied: 15,
          satisfied: 5,
          unsatisfied: 20,
        },
        {
          title: "国信上月云邸 1205",
          checkInCount: 20,
          verySatisfied: 12,
          satisfied: 4,
          unsatisfied: 16,
        },
      ],
      visible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData:[],
      total: 0,
      // 遮罩层
      reservationVisible: false,
      reservationQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      reservationTotal: 4,

      // 入住预约数据
      reservationTableData: [
        {
          checkOutTime: "2025-06-01",
          roomName: "8号楼-4单元-1108-东卧1",
          userName: "赵六",
          sex: "女",
          phonenumber: "138****1234",
          idNumber: "42*************45",
          status: "待办理",
        },
        {
          checkOutTime: "2025-06-05",
          roomName: "9号楼-5单元-1209-西卧2",
          userName: "孙七",
          sex: "男",
          phonenumber: "139****5678",
          idNumber: "43*************56",
          status: "办理中",
        },
        {
          checkOutTime: "2025-06-10",
          roomName: "10号楼-6单元-1310-中卧3",
          userName: "周八",
          sex: "女",
          phonenumber: "150****9012",
          idNumber: "44*************67",
          status: "办理完成",
        },
        {
          checkOutTime: "2025-05-20",
          roomName: "7号楼-3单元-1007-南卧4",
          userName: "吴九",
          sex: "男",
          phonenumber: "151****3456",
          idNumber: "45*************78",
          status: "已超期",
        },
      ],
      checkOutActions: [
        {
          label: "释放房源",
          type: "primary",
          condition: (row) => row.status === "办理完成",
        },
        {
          label: "继续办理",
          type: "primary",
          condition: (row) => row.status === "办理中",
        },
        {
          label: "退房办理",
          type: "primary",
          condition: (row) =>
            row.status === "待办理" || row.status === "已超期",
        },
      ],
      reservationActions: [
        {
          label: "继续办理",
          type: "primary",
          condition: (row) => true, // 根据实际情况修改条件
        },
        {
          label: "入住办理",
          type: "primary",
          condition: (row) => true, // 根据实际情况修改条件
        },
      ],
    };
  },
  mounted() {
    this.setEcharts();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 跳转
    handleClick(url, label) {
      console.log("label", label);
      console.log(url);

      if (url) {
        this.$router.push(url);
      }
      if (label === "退房提醒") {
        this.visible = true; // 显示遮罩层
      }
      if (label === "入住预约") {
        this.reservationVisible = true; // 显示遮罩层
      }
    },
    // 设置当前激活的标签
    setActive(tab) {
      console.log(tab);

      this.activeTab = tab;
    },
    setEcharts() {
      // 生成从 2024-02 到最近月份的数据
      const startYear = 2024;
      const startMonth = 5;
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth() + 1;

      const xAxisData = [];
      for (let year = startYear; year <= currentYear; year++) {
        let monthStart = year === startYear ? startMonth : 1;
        let monthEnd = year === currentYear ? currentMonth : 12;
        for (let month = monthStart; month <= monthEnd; month++) {
          xAxisData.push(`${year}-${month.toString().padStart(2, "0")}`);
        }
      }
      let myChart = Echarts.init(document.getElementById("mycharts"));
      let option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["选房", "看房", "入住", "退住"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false,
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "选房",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
            // symbol: "circle",
            // symbolSize: 10,
          },
          {
            name: "看房",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
            // symbol: "rect",
            // symbolSize: 10,
          },
          {
            name: "入住",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
            // symbol: "triangle",
            // symbolSize: 10,
          },
          {
            name: "退住",
            type: "line",
            stack: "Total",
            data: [
              320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330,
              320,
            ],
            // symbol: "roundRect",
            // symbolSize: 10,
          },
        ],
      };
      myChart.setOption(option);
      myChart.resize();
    },
    handleReservationQuery() {
      // 处理入住预约搜索逻辑
    },
    handleReservationAction(action, row) {
      // 处理入住预约操作逻辑
    },
    getReservationList() {
      // 获取入住预约列表逻辑
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #f7f7f7;
  .grid-content-l {
    background-color: #fff;
    padding: 20px 20px;
  }

  .bt-l {
    width: 104px;
    height: 40px;
    cursor: pointer;
  }
  .bt-r {
    width: 104px;
    height: 40px;
    cursor: pointer;
    // margin-left: 30px;
  }
  .active {
    background-color: rgba(12, 94, 232, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px; // 调整下三角位置
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid rgba(12, 94, 232, 1); // 下三角颜色
    }
  }
  .work-content {
    background-color: #fff;
    padding: 10px 14px;
    .single {
      height: 52px;
      position: relative;
      padding: 10px;
      cursor: pointer;
    }
    .badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background-color: red;
      color: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ::v-deep .el-card__body {
      padding:14px 20px;
      width: 100%;
    }
    .box-card {
      margin: 2% 0;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      -radius: 4px;
      background-color: #e1fff4;
      // box-shadow: 0 2px 4px rgba(0, 0, 0, 0, 0.1);
    }
    .card-cont {
      width: 100%;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px; // 小竖条宽度
        height: 100%; // 小竖条高度
        background-color: #9df7d6; // 小竖条颜色
      }
    }
    .clearfix {
      font-weight: 600;
    }
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
    .text {
      div {
      }
    }
    .label {
    }
    .info,
    .id {
      color: #909399;
    }
    .status {
      color: #ff2e2e;
      font-size: 14px;
      display: flex;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .menu {
      color: #2f50ff;
    }
    .item {
      margin-bottom: 10px;
    }
  }
  .data-content {
    background-color: #fff;
    margin-top: 20px;
    padding: 10px 14px;
    .statistic-item {
      height: 80px;
    }
    .info {
      margin: 0 10px;
      .num {
        font-size: 26px;
        margin-bottom: 4px;
      }
      .tit {
        color: #848383;
        font-size: 14px;
      }
    }
  }
  .grid-content-r {
    // padding:  20px;
  }
  .message-content {
    padding: 20px;
    background-color: #fff;

    .time {
      font-size: 14px;
      color: #999898;
    }
    .mess-info {
      line-height: 40px;
    }
    ::v-deep .el-divider--horizontal {
      margin: 0 0;
      margin-top: 8px;
    }
  }
  .evaluation-content {
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
    ::v-deep .el-divider--horizontal {
      margin: 0 0;
      margin-top: 20px;
    }
    .eva-info {
      div {
        font-size: 14px;
      }
      span {
        color: #f25656;
        font-size: 18px;
      }
    }
    .rank-circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      margin-right: 10px;
      color: white;
    }
    .rank-1 {
      background-color: red;
    }
    .rank-2 {
      background-color: orange;
    }
    .rank-3 {
      background-color: gray;
    }
    .rank-4,
    .rank-5 {
      background-color: #ccc;
    }
  }
}
</style>