zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

物业之前，新工作台

Browse Source
This commit is contained in:
Zy
2026-04-16 21:03:35 +08:00
parent cf9a1f1585
commit 4184f1c55d
91 changed files with 1781 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

670
src/views/workbench/index2.vue Normal file
View File

@@ -0,0 +1,670 @@
<template>
<div class="w-full h-full workBenchBox">
<el-row>
<el-col :span="18">
<div class="villageBox">
<div class="title">小区概况</div>
<div class="villageBody">
<div class="village_items" v-for="(item, index) in list" :key="index">
<div class="icon"></div>
<div class="infobox">
<div class="infoTitle">{{ item.name }}</div>
<div class="infoNum">{{ item.value }}</div>
</div>
</div>
</div>
</div>
<div class="echartsbox flex flex-items-center">
<div class="echarts">
<div class="nav flex flex-items-center justify-between">
<div>
<span class="ecarts_title">近一周报修量趋势</span>
<span class="echarts_units">单位（个）</span>
</div>
<div class="flex flex-items-center justify-center">
<span class="echarts_all_baoxiu">全部保修</span>
<i class="echarts_all_arrow"></i>
</div>
</div>
<div class="echartsbody">
<repairEcharts />
</div>
</div>
<div class="echarts">
<div class="nav flex flex-items-center justify-between">
<div>
<span class="ecarts_title">近一周收入支出趋势</span>
<span class="echarts_units">单位（个）</span>
</div>
<div class="flex flex-items-center justify-center">
<div
class="actions"
@click="changeActive_index(index)"
:class="{ active: active_index === index }"
v-for="(item, index) in actions"
:key="index"
>
{{ item.name }}
</div>
</div>
</div>
<div class="echartsbody">
<repairEcharts />
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="villageInfoBox">
<div class="iconbox">
<el-image :src="summicon"></el-image>
</div>
<div class="villageinfo">
<div class="villagename">北境碧桂园小区</div>
<div class="week">2025-08-20 星期三</div>
</div>
</div>
<div class="tabsbox">
<div class="topbox">
<div
:class="{
active: Sideactive === 1
}"
@click="handleSelect(1)"
>
<span>快捷入口</span>
<i></i>
</div>
<div
:class="{
active: Sideactive === 2
}"
@click="handleSelect(2)"
>
<span>创建办事记录</span>
<i class="righti"></i>
</div>
</div>
<div class="body">
<div class="quicly_box" v-if="Sideactive === 1">
<div class="quickly_item" v-for="(item, index) in quickBox" :key="index">
<div class="quickly_item_icon"></div>
<div class="quickly_item_content">{{ item.name }}</div>
</div>
<div class="quickly_item add">
<el-icon><Plus /></el-icon>
<span>添加</span>
</div>
</div>
<div v-else></div>
</div>
</div>
</el-col>
</el-row>
<el-row class="mt-20px">
<el-col>
<div class="userBox">
<div class="title">住户查询</div>
<div class="searbox">
<div>精准查询</div>
<el-select v-model="value" placeholder="住户姓名" style="width: 240px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input placeholder="请输入">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">查询 </el-button>
<el-button>重置</el-button>
</div>
<div class="tablebox">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
<el-table-column prop="date" align="center" label="姓名" width="180" />
<el-table-column prop="date" align="center" label="类型" width="180" />
<el-table-column prop="date" align="center" label="状态" width="180" />
<el-table-column prop="date" align="center" label="证件号码" />
<el-table-column prop="date" align="center" label="手机号" />
<el-table-column prop="name" align="center" label="房间" />
<el-table-column prop="address" align="center" label="操作">
<template #default>
<el-button type="primary" text> 审核</el-button>
<el-button type="primary" text> 编辑</el-button>
<el-button type="primary" text> 删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script lang="ts" setup>
import summicon from '@/assets/images/index/summer.png';
import repairEcharts from './components/repairEcharts.vue';
const list = ref([
{
name: '住户总数量',
value: 10000
},
{
name: '房屋总数量',
value: 458
},
{
name: '车位总数量',
value: 2539
},
{
name: '设备总数量',
value: 22
},
{
name: '物料总数量',
value: 458
},
{
name: '投诉总数量',
value: 458
}
]);
const active_index = ref(0);
const actions = ref([
{
name: '全部'
},
{
name: '收入'
},
{
name: '支出'
}
]);
function changeActive_index(val: number) {
active_index.value = val;
}
// ! 侧边栏
const Sideactive = ref(1);
function handleSelect(val: number) {
Sideactive.value = val;
console.log(Sideactive.value);
}
// ! 快捷入口
const quickBox = ref([
{
name: '新建用户',
url: '/house/resident'
},
{
name: '车位管理',
url: '/carArea/parking'
},
{
name: '新建月卡',
url: '/carArea/monthCard'
},
{
name: '新建报修',
url: '/repair/repairlist'
},
{
name: '访客记录',
url: '/repair/visitorList'
},
{
name: '账单管理',
url: '/repair/visitorList'
}
]);
const router = useRouter();
function handleRouter(val: string) {
router.push({
path: val
});
}
// ! table
const value = ref('');
const loading = ref(true);
const total = ref(100);
const data = reactive({
queryParams: {
villageId: Number(localStorage.getItem('villageid')),
pageNum: 1,
pageSize: 10
}
});
const { queryParams } = toRefs(data);
// 核心：计算连续序号
const indexMethod = (index) => {
return (queryParams.value.pageNum - 1) * queryParams.value.pageSize + index + 1;
};
const options = [
{
value: 'Option1',
label: '住户姓名'
},
{
value: 'Option2',
label: '住户手机号'
},
{
value: 'Option3',
label: '住户身份证'
}
];
function getList() {}
const tableData = ref([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
]);
</script>
<style scoped lang="scss">
.workBenchBox {
padding: 20px;
background-color: #eaf2ff;
// 小区概况
.villageBox {
height: 198px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
border-radius: 16px 16px 16px 16px;
border: 2px solid #ffffff;
padding: 20px;
margin-bottom: 20px;
.title {
height: 25px;
font-weight: 500;
font-size: 20px;
color: #303133;
line-height: 25px;
margin-bottom: 20px;
}
.villageBody {
display: flex;
align-items: center;
justify-content: space-around;
.village_items {
margin-right: 20px;
min-width: 185px;
height: 109px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
box-shadow: 0px 4px 8px 0px rgba(0, 104, 255, 0.06);
border-radius: 8px 8px 8px 8px;
border: 1px solid #ffffff;
padding: 30px 20px;
display: flex;
align-items: center;
.icon {
width: 40px;
height: 46px;
background: #f4f0ff;
box-shadow: inset 0px 0px 20px 0px #ffffff;
border-radius: 10px 10px 10px 10px;
border: 1px solid #ffffff;
margin-right: 15px;
}
.infobox {
margin-right: 20px;
.infoTitle {
width: 70px;
height: 18px;
font-weight: 400;
font-size: 14px;
color: #4e5969;
line-height: 18px;
}
.infoNum {
width: 87px;
height: 35px;
font-weight: 600;
font-size: 28px;
color: #303133;
line-height: 39px;
}
}
}
}
}
// echarts
.echartsbox {
.echarts {
margin-right: 20px;
flex: 1;
height: 425px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
border: 2px solid #ffffff;
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
&:last-child {
margin-right: 0;
}
.nav {
.ecarts_title {
font-weight: 500;
font-size: 20px;
color: #303133;
line-height: 25px;
}
.echarts_units {
margin-left: 10px;
font-weight: 400;
font-size: 12px;
color: #98a4b2;
line-height: 15px;
text-align: left;
}
.echarts_all_baoxiu {
height: 18px;
font-weight: 400;
font-size: 14px;
color: #98a4b2;
line-height: 18px;
margin-right: 7px;
}
.echarts_all_arrow {
display: block;
width: 10px;
height: 10px;
border: 1px solid #ccc;
transform: rotateZ(45deg);
border-bottom-color: transparent;
border-left-color: transparent;
}
.actions {
width: 60px;
height: 22px;
border-radius: 4px 4px 4px 4px;
background-color: #f6f7fb;
color: #99a5b3;
text-align: center;
line-height: 22px;
font-size: 14px;
cursor: pointer;
margin-right: 10px;
&:hover {
color: #036aff;
background-color: #036cff25;
}
}
.actions.active {
color: white;
background-color: #036aff;
}
}
.echartsbody {
flex: 1;
margin-top: 20px;
}
}
}
// 小区
.villageInfoBox {
height: 127px;
margin-left: 20px;
display: flex;
align-items: center;
padding: 0 35px;
background: #036aff;
border-radius: 16px 16px 16px 16px;
margin-bottom: 20px;
.iconbox {
width: 70px;
height: 70px;
}
.villageinfo {
margin-left: 30px;
.villagename {
height: 30px;
font-weight: 500;
font-size: 24px;
color: #ffffff;
line-height: 30px;
}
.week {
margin-top: 5px;
height: 23px;
font-weight: 400;
font-size: 18px;
color: #ffffff;
line-height: 23px;
}
}
}
// tabs
.tabsbox {
margin-left: 20px;
height: 497px;
border: 2px solid;
background: linear-gradient(180deg, #ebf4ff 0%, rgba(247, 252, 255, 0.5) 21.14%);
border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
.topbox {
display: flex;
align-items: center;
div {
flex: 1;
border-bottom: 2px solid #fff;
border-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)) 100% 1;
text-align: center;
padding: 14px;
cursor: pointer;
color: #98a4b2;
&.active {
border-bottom-color: transparent;
border-image: none;
position: relative;
color: #000;
$width: 8px;
$greePer: 60%;
& i {
display: block;
position: absolute;
right: 10px;
top: 0;
width: $width / 2;
height: 100%;
transform: skew(30deg);
background: white;
transition: all 0.3s;
z-index: 10;
&::after {
content: '';
display: block;
width: $width;
height: $width;
background: radial-gradient(circle at bottom left, #ecf4fe $greePer, #ffffff (1 - $greePer));
position: absolute;
left: -$width;
top: 0;
}
&::before {
content: '';
display: block;
width: $width;
height: $width;
background: radial-gradient(circle at top right, #ecf4fe $greePer, #ffffff (1 - $greePer));
position: absolute;
right: -$width;
bottom: 0;
}
}
& i.righti {
display: block;
position: absolute;
left: 10px;
top: 0;
width: $width / 2;
height: 100%;
transform: skew(-30deg);
background: white;
z-index: 10;
&::after {
content: '';
display: block;
width: $width;
height: $width;
background: radial-gradient(circle at bottom right, #ecf4fe $greePer, #ffffff (1 - $greePer));
position: absolute;
right: -$width;
left: initial;
top: 0;
}
&::before {
content: '';
display: block;
width: $width;
height: $width;
background: radial-gradient(circle at top left, #ecf4fe $greePer, #ffffff (1 - $greePer));
position: absolute;
left: -$width;
right: none;
bottom: 0;
}
}
&::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 24px;
height: 4px;
background: #036aff;
border-radius: 3px 3px 3px 3px;
transform: translateX(-50%);
}
}
}
}
.body {
font-size: 16px;
color: #222222;
padding: 30px;
.quicly_box {
display: grid;
grid-template-columns: repeat(3, 1fr);
.quickly_item {
width: 125px;
margin-bottom: 20px;
height: 56px;
background: #ffffff;
border-radius: 12px 12px 12px 12px;
border: 1px solid #c0daff;
display: flex;
align-items: center;
justify-content: center;
.quickly_item_content {
margin-left: 5px;
width: 64px;
height: 23px;
font-weight: 500;
font-size: 16px;
color: #222222;
line-height: 23px;
}
&.add {
text-align: center;
color: #036aff;
vertical-align: baseline;
span {
margin-left: 5px;
}
}
}
}
}
}
// 住户查询
.userBox {
border-radius: 10px;
padding: 20px;
height: 550px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
border: 2px solid #ffffff;
display: flex;
flex-direction: column;
.title {
margin-bottom: 15px;
}
.searbox {
height: 35px;
line-height: 35px;
font-size: 16px;
display: flex;
align-items: center;
margin-bottom: 30px;
div {
width: 70px;
margin-right: 20px;
}
.el-select {
width: 160px;
margin-right: 10px;
}
.el-input {
flex: 0.3;
}
.el-button {
color: #0083ff;
border-color: #0083ff;
width: 60px;
height: 25px;
border-radius: 5px;
font-weight: 400;
font-size: 14px;
line-height: 18px;
text-align: left;
&.el-button--primary {
color: #fff;
}
}
}
.tablebox {
flex: 1;
.el-table {
height: calc(100% - 60px);
}
}
}
}
</style>