|
|
|
@ -42,7 +42,7 @@ |
|
|
|
<!-- 工作台 --> |
|
|
|
<div class="work-content"> |
|
|
|
<CommonTitle>工作台</CommonTitle> |
|
|
|
<el-row gutter="10" class="el-mt-5"> |
|
|
|
<el-row :gutter="10" class="el-mt-5"> |
|
|
|
<el-col |
|
|
|
v-for="(item, index) in workbenchItems" |
|
|
|
:key="index" |
|
|
|
@ -51,28 +51,137 @@ |
|
|
|
class="el-flex el-flex-center el-flex-y-center single" |
|
|
|
:style="{ backgroundColor: item.color }" |
|
|
|
> |
|
|
|
<!-- <el-image style="width:28px; height: 33px" :src="item.icon" ></el-image> --> |
|
|
|
<img |
|
|
|
style="width: 28px; height: 33px" |
|
|
|
<el-image |
|
|
|
style="width: 21px; height: 28px; margin-right: 8px" |
|
|
|
:src="item.icon" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
></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"> |
|
|
|
<div |
|
|
|
class="el-flex el-flex-space-around text item" |
|
|
|
v-for="item in 2" |
|
|
|
> |
|
|
|
<div class="clearfix el-mr-6">入住办理:</div> |
|
|
|
<div class="el-mr-9 el-mb-3 label">5号楼-1单元-805-南卧1</div> |
|
|
|
<div class="el-mr-9 el-mb-3 info">张三 男 187*****8989</div> |
|
|
|
<div class="el-mr-9 el-mb-3 id">37*************12</div> |
|
|
|
<div class="el-mr-8 el-mb-3 status">等待签订电子合同</div> |
|
|
|
<div |
|
|
|
class="el-mr-9 el-mb-3 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> |
|
|
|
</div> |
|
|
|
</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: 28px; 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="width: 100%; height: 37vh;margin-top: 20px" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<!-- 右侧 --> |
|
|
|
<el-col :span="8"><div class="grid-content-r">2</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-divider /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { color } from "echarts"; |
|
|
|
import * as Echarts from "echarts"; |
|
|
|
import CommonTitle from "./components/CommonTitle.vue"; |
|
|
|
export default { |
|
|
|
name: "Index", |
|
|
|
@ -81,6 +190,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
input2:'', |
|
|
|
// 记录当前激活的标签 |
|
|
|
activeTab: "talent", |
|
|
|
// 工作台数据 |
|
|
|
@ -107,17 +217,94 @@ export default { |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "退房提醒", |
|
|
|
icon:require("../assets/images/antFill-phone.png"), |
|
|
|
color: "#fdddf1", |
|
|
|
icon: require("../assets/images/antFill-phone.png"), |
|
|
|
color: "#fdd1d1", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "报修提醒", |
|
|
|
icon: require("../assets/images/antFill-phone.png"), |
|
|
|
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, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.setEcharts(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
goTarget(href) { |
|
|
|
window.open(href, "_blank"); |
|
|
|
@ -128,6 +315,92 @@ export default { |
|
|
|
|
|
|
|
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(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@ -137,19 +410,18 @@ export default { |
|
|
|
background-color: #f7f7f7; |
|
|
|
.grid-content-l { |
|
|
|
background-color: #fff; |
|
|
|
padding: 30px 20px; |
|
|
|
} |
|
|
|
.grid-content-r { |
|
|
|
background-color: #fff; |
|
|
|
// padding: 30px 20px; |
|
|
|
padding: 20px 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bt-l { |
|
|
|
width: 104px; |
|
|
|
height: 40px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.bt-r { |
|
|
|
width: 104px; |
|
|
|
height: 40px; |
|
|
|
cursor: pointer; |
|
|
|
// margin-left: 30px; |
|
|
|
} |
|
|
|
.active { |
|
|
|
@ -170,9 +442,156 @@ export default { |
|
|
|
} |
|
|
|
.work-content { |
|
|
|
background-color: #fff; |
|
|
|
padding-left: 14px ; |
|
|
|
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: 15px 20px 0px 20px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.box-card { |
|
|
|
margin-top: 1%; |
|
|
|
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; |
|
|
|
} |
|
|
|
.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 { |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
