You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1001 lines
27 KiB
1001 lines
27 KiB
<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 colItem">
|
|
<el-col
|
|
v-for="(item, index) in workbenchItems"
|
|
:key="index"
|
|
:span="5"
|
|
><div
|
|
class="el-flex el-flex-center el-flex-y-center single"
|
|
:style="{ backgroundColor: item.color }"
|
|
@click="handleClick(item.url, item.id)"
|
|
>
|
|
<el-image
|
|
style="width: 21px; 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 style="display: none">
|
|
<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="height: 23px" :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>
|
|
|
|
<!-- 入住预约弹框 -->
|
|
<el-dialog
|
|
:title="'入住预约'"
|
|
:visible.sync="reservationVisible"
|
|
v-if="reservationVisible"
|
|
width="1000px"
|
|
top="5vh"
|
|
append-to-body
|
|
>
|
|
<CommonReminder @close="reservationVisible = !reservationVisible" />
|
|
</el-dialog>
|
|
<!-- 退房提醒弹框 -->
|
|
<el-dialog
|
|
:title="'退房提醒'"
|
|
:visible.sync="visible"
|
|
v-if="visible"
|
|
width="1000px"
|
|
top="5vh"
|
|
append-to-body
|
|
>
|
|
<CheckOutDialog @close="visible = !visible" />
|
|
</el-dialog>
|
|
<!-- 延租提醒弹框 -->
|
|
<el-dialog
|
|
:title="'延租提醒'"
|
|
:visible.sync="renewalVisible"
|
|
v-if="renewalVisible"
|
|
width="1000px"
|
|
top="5vh"
|
|
append-to-body
|
|
>
|
|
<RenewalDialog @close="renewalVisible = !renewalVisible;openRenew=true " />
|
|
</el-dialog>
|
|
<!-- 续期办理弹框 -->
|
|
<el-dialog title="续期办理" :visible.sync="openRenew" width="55%">
|
|
<el-form :model="renewForm" ref="renewForm" label-width="100px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8" class="mb-10"
|
|
>姓名{{ renewInfo.graduateName }}</el-col
|
|
>
|
|
<el-col :span="8" class="mb-10"
|
|
>性别：{{ renewInfo.gender == 1 ? "男" : "女" }}</el-col
|
|
>
|
|
<el-col :span="8" class="mb-10"
|
|
>手机号：{{ renewInfo.telephone }}</el-col
|
|
>
|
|
|
|
<el-col :span="8" class="mb-10"
|
|
>身份证：{{ renewInfo.idCard }}</el-col
|
|
>
|
|
<el-col :span="8" class="mb-10"
|
|
>当前入住房间：{{ renewInfo.renewalRoom }}</el-col
|
|
>
|
|
<el-col :span="24">
|
|
<div class="line"></div>
|
|
</el-col>
|
|
<el-col :span="8" class="mb-10"
|
|
>申请续期时间：{{ renewInfo.renewalApplyTime }}</el-col
|
|
>
|
|
<el-col :span="8" class="mb-10"
|
|
>申请续期至：{{ renewInfo.renewalEndDate }}</el-col
|
|
>
|
|
|
|
<el-col :span="8" class="mb-10"
|
|
>工作状态：{{
|
|
renewInfo.employState === "0"
|
|
? "求职中"
|
|
: renewInfo.employState === "1"
|
|
? "已就业"
|
|
: renewInfo.employState === "2"
|
|
? "已创业"
|
|
: "未知"
|
|
}}</el-col
|
|
>
|
|
<el-col :span="8" class="mb-10"
|
|
>续期房间：{{ renewInfo.renewalRoom }}</el-col
|
|
>
|
|
<el-col :span="16" class="mb-10">
|
|
签订续期合同：
|
|
<span
|
|
:class="{
|
|
'waiting-sign': renewInfo.employState == '1',
|
|
signed: renewInfo.employState != '1',
|
|
}"
|
|
>
|
|
{{
|
|
renewInfo.employState == "1"
|
|
? "等待签订(需毕业生从微信小程序短确认签订)"
|
|
: "已签订"
|
|
}}
|
|
</span>
|
|
</el-col>
|
|
|
|
<!-- 备注说明 -->
|
|
<el-col :span="24" class="mb-10">
|
|
<el-form-item label="备注说明" prop="remark">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="renewForm.remark"
|
|
placeholder="请输入备注说明"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="8" class="mb-10"></el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="handleRenewSubmit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 释放房源提醒弹框 -->
|
|
<el-dialog
|
|
:title="'释放房源提醒'"
|
|
:visible.sync="releaseVisible"
|
|
v-if="releaseVisible"
|
|
width="1000px"
|
|
top="5vh"
|
|
append-to-body
|
|
>
|
|
<ReleaseRoomDia
|
|
ref="releaseRoomDia"
|
|
@close="releaseVisible = !releaseVisible"
|
|
@update-count="updateWorkbenchCount"
|
|
/>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listWaitingReleaseRooms,
|
|
listCheckoutAlert,
|
|
} from "@/api/residence/checkout";
|
|
import { checkInReservation } from "@/api/recs";
|
|
import { listRenewRec } from "@/api/mz/rec";
|
|
|
|
import * as Echarts from "echarts";
|
|
import CommonTitle from "./components/CommonTitle.vue";
|
|
import CommonReminder from "./components/CommonReminder.vue";
|
|
import CheckOutDialog from "./components/CheckOutDialog.vue";
|
|
import ReleaseRoomDia from "./components/ReleaseRoomDia.vue";
|
|
import RenewalDialog from "./components/RenewalDialog.vue";
|
|
export default {
|
|
name: "Index",
|
|
components: {
|
|
CommonTitle,
|
|
CommonReminder,
|
|
CheckOutDialog,
|
|
ReleaseRoomDia,
|
|
RenewalDialog,
|
|
},
|
|
data() {
|
|
return {
|
|
input2: "",
|
|
// 记录当前激活的标签
|
|
activeTab: "talent",
|
|
// 工作台数据
|
|
workbenchItems: [
|
|
{
|
|
id: 1,
|
|
label: "入住办理",
|
|
icon: require("../assets/images/fa-university.png"),
|
|
color: "#FBD5D5",
|
|
url: "/residence/check_in",
|
|
},
|
|
{
|
|
id: 2,
|
|
label: "退房办理",
|
|
icon: require("../assets/images/credit-card.png"),
|
|
color: "#c2e2f9",
|
|
url: "/residence/check_out",
|
|
},
|
|
{
|
|
id: 3,
|
|
label: "预约记录",
|
|
icon: require("../assets/images/fa5-address-card-fas.png"),
|
|
color: "#FBEDC8",
|
|
},
|
|
// {
|
|
// label: "看房预约",
|
|
// icon: require("../assets/images/antFill-phone.png"),
|
|
// color: "#eceeed",
|
|
// },
|
|
{
|
|
id: 4,
|
|
label: "退房提醒",
|
|
icon: require("../assets/images/fas fa-sign-out-alt.png"),
|
|
color: "#FDDDF1",
|
|
},
|
|
{
|
|
id: 5,
|
|
label: "延租提醒",
|
|
icon: require("../assets/images/fa-history.png"),
|
|
color: "#FBEDC8",
|
|
count: "",
|
|
},
|
|
{
|
|
id: 6,
|
|
label: "释放房源提醒",
|
|
icon: require("../assets/images/home.png"),
|
|
color: "#D2F9E2",
|
|
count: 0,
|
|
},
|
|
{
|
|
id: 7,
|
|
label: "水电预警",
|
|
icon: require("../assets/images/iconPark-water.png"),
|
|
color: "#FDE7ED ",
|
|
count: 0,
|
|
},
|
|
// 居住率预警
|
|
{
|
|
id: 8,
|
|
label: "居住率预警",
|
|
icon: require("../assets/images/fas fa-exclamation.png"),
|
|
color: "#FBEDC8",
|
|
count: 0,
|
|
},
|
|
{
|
|
id: 9,
|
|
label: "报修",
|
|
icon: require("../assets/images/fas fa-cut.png"),
|
|
color: "#FBEDC8",
|
|
},
|
|
{
|
|
id: 10,
|
|
label: "报事",
|
|
icon: require("../assets/images/fa-envelope-square.png"),
|
|
color: "#CFFFDC",
|
|
count: 0,
|
|
},
|
|
],
|
|
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: 3,
|
|
// 遮罩层
|
|
reservationVisible: false,
|
|
|
|
// 入住预约数据
|
|
reservationTableData: [],
|
|
checkOutActions: [
|
|
{
|
|
label: "释放房源",
|
|
type: "primary",
|
|
condition: (row) => row.status === "办理完成",
|
|
},
|
|
{
|
|
label: "继续办理",
|
|
type: "primary",
|
|
condition: (row) => row.status === "办理中",
|
|
},
|
|
{
|
|
label: "退房办理",
|
|
type: "primary",
|
|
condition: (row) =>
|
|
row.status === "待办理" || row.status === "已超期",
|
|
},
|
|
],
|
|
// 释放房源列表
|
|
releaseTableData: [],
|
|
releaseVisible: false,
|
|
renewalVisible: false, // 延租提醒
|
|
openRenew: false, // 续期办理弹框
|
|
renewForm: {
|
|
renewalId: "", // 续期ID
|
|
remark: "", // 备注说明
|
|
},
|
|
renewInfo: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.setEcharts();
|
|
this.$nextTick(() => {
|
|
console.log("this.$refs.releaseRoomDia", this.$refs.releaseRoomDia);
|
|
if (this.$refs.releaseRoomDia) {
|
|
this.$refs.releaseRoomDia.getList();
|
|
}
|
|
});
|
|
},
|
|
created() {
|
|
this.getlistWaitingReleaseRooms();
|
|
this.getReservationList();
|
|
this.getCheckoutAlertList();
|
|
this.getRenewRecList();
|
|
},
|
|
methods: {
|
|
goTarget(href) {
|
|
window.open(href, "_blank");
|
|
},
|
|
// 跳转
|
|
handleClick(url, id) {
|
|
console.log(url);
|
|
|
|
if (url) {
|
|
this.$router.push(url);
|
|
}
|
|
if (id === 4) {
|
|
this.visible = !this.visible;
|
|
}
|
|
if (id === 3) {
|
|
this.reservationVisible = !this.reservationVisible;
|
|
}
|
|
if (id === 6) {
|
|
this.releaseVisible = !this.releaseVisible;
|
|
}
|
|
if (id === 5) {
|
|
this.renewalVisible = !this.renewalVisible;
|
|
}
|
|
},
|
|
// 设置当前激活的标签
|
|
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) {
|
|
// 处理入住预约操作逻辑
|
|
},
|
|
|
|
handleQuery() {
|
|
// 处理退房提醒搜索逻辑
|
|
},
|
|
handleEdit(action, row) {
|
|
// 处理退房提醒操作逻辑
|
|
console.log(action, row);
|
|
if (action.label === "释放房源") {
|
|
this.$confirm(
|
|
"请先确认房间已经完成清洁、维修、达到入住标准方可进行释放房源。",
|
|
"提示",
|
|
{
|
|
confirmButtonText: "确定释放",
|
|
cancelButtonText: "暂不释放",
|
|
type: "warning",
|
|
}
|
|
)
|
|
.then(() => {
|
|
// 用户点击确定释放按钮后执行的逻辑
|
|
console.log("用户确认释放房源");
|
|
// 这里可以添加实际释放房源的 API 调用代码
|
|
})
|
|
.catch(() => {
|
|
// 用户点击暂不释放按钮后执行的逻辑
|
|
console.log("用户取消释放房源");
|
|
});
|
|
}
|
|
},
|
|
updateWorkbenchCount(count) {
|
|
const releaseItem = this.workbenchItems.find((item) => item.id === 6);
|
|
if (releaseItem) {
|
|
releaseItem.count = count;
|
|
}
|
|
},
|
|
async getCheckoutAlertList() {
|
|
try {
|
|
const response = await listCheckoutAlert(this.queryParams);
|
|
if (response.code === 200) {
|
|
this.workbenchItems = this.workbenchItems.map((item) => {
|
|
if (item.id === 4) {
|
|
return {
|
|
...item,
|
|
count: response.total,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
} catch (error) {}
|
|
},
|
|
// 延租提醒
|
|
async getRenewRecList() {
|
|
const response = await listRenewRec(this.queryParams);
|
|
if (response.code === 200) {
|
|
this.workbenchItems = this.workbenchItems.map((item) => {
|
|
if (item.id === 5) {
|
|
return {
|
|
...item,
|
|
count: response.total,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
},
|
|
// 释放房源列表
|
|
async getlistWaitingReleaseRooms() {
|
|
console.log("zhixing");
|
|
|
|
const response = await listWaitingReleaseRooms(this.queryParams);
|
|
if (response.code === 200) {
|
|
this.workbenchItems = this.workbenchItems.map((item) => {
|
|
if (item.id === 6) {
|
|
return {
|
|
...item,
|
|
count: response.total,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
},
|
|
// 入住预约列表
|
|
async getReservationList() {
|
|
const response = await checkInReservation(this.reservationQueryParams);
|
|
if (response.code === 200) {
|
|
this.workbenchItems = this.workbenchItems.map((item) => {
|
|
if (item.id === 3) {
|
|
return {
|
|
...item,
|
|
count: response.total,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</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: 70px;
|
|
position: relative;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
.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;
|
|
padding: 0 10px;
|
|
}
|
|
.info {
|
|
margin: 0 10px;
|
|
.num {
|
|
font-size: 26px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.tit {
|
|
color: #848383;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .colItem .el-col-5 {
|
|
width: 19.766667%;
|
|
}
|
|
</style>
|
|
|