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

公告，活动，投诉接口对接完成

Browse Source
This commit is contained in:
Zy
2026-04-14 17:34:33 +08:00
parent 2701b02c59
commit 40f13be704
41 changed files with 2499 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/views/workbench/components/HouseUser.vue Normal file
View File

@@ -0,0 +1,144 @@
<script setup lang="ts">
import { ref } from 'vue';
const searchFilterType = ['住户姓名', '住户编号', '手机号', '身份证号'];
const SearchForm = ref({
searchFilter: 0,
searchText: ''
});
const Search = () => {
console.log(SearchForm.value);
};
const Reset = () => {
SearchForm.value = {
searchFilter: 0,
searchText: ''
};
};
// ! ==================================================
const queryParams = ref({
pageSize: 10,
pageNum: 1
});
const userlist = Array.from({ length: 10 }).fill({
id: 1,
name: '张三',
phone: '13888888888',
type: '普通用户',
address: '湖北省武汉市武昌区',
status: '正常',
idcard: '420000000000000000'
});
const total = ref(100);
const columns = [
{
prop: 'name',
label: '用户名称'
},
{
prop: 'type',
label: '用户类型'
},
{
prop: 'status',
label: '用户状态'
},
{
prop: 'idcard',
label: '身份证号',
width: 200
},
{
prop: 'phone',
label: '手机号'
},
{
prop: 'address',
label: '用户地址',
width: 200
}
];
function handleEdit(row: any) {
console.log(row);
}
function handleDelete(row: any) {
console.log(row);
}
function handleReview(row: any) {
console.log(row);
}
</script>
<template>
<div class="houseUserBox w-full mt-4">
<div class="houseUserTitle">住户查询</div>
<div class="houseUserContent flex flex-col">
<div class="houserUser_SearchBox flex items-center mb-2">
<div class="flex-1 flex items-center">
<div class="min-w-20">精准查询</div>
<!-- 下拉筛选 -->
<el-select class="max-w-40" v-model="SearchForm.searchFilter" placeholder="请选择">
<el-option v-for="(item, index) in searchFilterType" :key="index" :label="item" :value="index"></el-option>
</el-select>
<!-- 搜索框 -->
<el-input style="flex: 0.5" class="ml-4" placeholder="请输入" v-model="SearchForm.searchText"></el-input>
</div>
<div>
<el-button class="SearchBtn" type="primary" @click="Search">搜索</el-button>
<el-button class="ml-4 ResetBtn" @click="Reset">重置</el-button>
</div>
</div>
<div class="houseUser_Search_ListBox flex-1">
<el-table :data="userlist">
<el-table-column type="index" width="80" />
<el-table-column prop="name" align="center" label="住户姓名" />
<el-table-column prop="name" align="center" label="类型" />
<el-table-column prop="name" align="center" label="状态" />
<el-table-column prop="name" align="center" label="证件号码" />
<el-table-column prop="name" align="center" label="手机号" />
<el-table-column prop="name" align="center" label="房间" />
<el-table-column label="操作" align="center" width="350">
<template #default="scope">
<el-button text>审核</el-button>
<el-button text>编辑</el-button>
<el-button 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" />
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.houseUserBox {
border-radius: 10px;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 20px;
.houseUserTitle {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.houseUserContent {
.houserUser_SearchBox {
justify-content: space-between;
.ResetBtn {
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
}
}
.houseUser_Search_ListBox {
margin-top: 10px;
height: 100%;
:deep(.el-table) {
height: calc(100% - 100px);
}
}
}
}
</style>

55
src/views/workbench/components/repairEcharts.vue Normal file
View File

@@ -0,0 +1,55 @@
<script name="repairEcharts" setup lang="ts">
import { ref } from 'vue';
import Echarts from '@/components/Echarts/index.vue';
import { EChartsOption } from 'echarts';
// 生成过去7天的日期
const getLast7Days = (days = 7) => {
const dates = [];
for (let i = days - 1; i >= 0; i--) {
dates.push(new Date(new Date().getTime() - i * 24 * 60 * 60 * 1000).toLocaleDateString());
}
return dates;
};
const chartConfig = shallowRef<EChartsOption>({
grid: {
left: '1%',
right: '1%',
top: '3%',
bottom: '1%',
containLabel: true
},
xAxis: {
data: getLast7Days()
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {
color: '#d1e3ff'
},
lineStyle: {
color: '#1a75ff'
},
label: {
show: true,
color: '#3f8afc',
position: 'top'
}
}
]
});
// 图表配置不应该被深度响应式劫持，会导致性能下降 + 类型错误。
</script>
<template>
<div class="w-full h-full">
<Echarts :options="chartConfig" />
</div>
</template>
<style scoped lang="scss"></style>

467
src/views/workbench/index.vue Normal file
View File

@@ -0,0 +1,467 @@
<template>
<div class="home">
<div class="navbar flex flex-items-center">
<svg-icon icon-class="viliageIcon" />
<span class="ml-2">北境碧桂园小区</span>
</div>
<el-row class="mt-20px">
<el-col :span="24">
<div class="viliageBox">
<div class="title">小区概况</div>
<div class="viliageInfo">
<div class="vilage_item">
<div class="info">
<div class="info_title">住户总数量</div>
<div class="info_value">10000</div>
</div>
<div class="icon">
<svg-icon icon-class="viliageIcon" />
</div>
</div>
<div class="vilage_item">
<div class="info">
<div class="info_title">住户总数量</div>
<div class="info_value">10000</div>
</div>
<div class="icon">123</div>
</div>
<div class="vilage_item">
<div class="info">
<div class="info_title">住户总数量</div>
<div class="info_value">10000</div>
</div>
<div class="icon">123</div>
</div>
<div class="vilage_item">
<div class="info">
<div class="info_title">住户总数量</div>
<div class="info_value">10000</div>
</div>
<div class="icon">123</div>
</div>
<div class="vilage_item">
<div class="info">
<div class="info_title">住户总数量</div>
<div class="info_value">10000</div>
</div>
<div class="icon">123</div>
</div>
<div class="vilage_item">
<div class="info">
<div class="info_title">住户总数量</div>
<div class="info_value">10000</div>
</div>
<div class="icon">123</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="mt-20px">
<el-col :span="9">
<el-card>
<div class="titlebox">
<div>近一周报修量趋势</div>
<div class="actionbox">
<span>全部报修</span>
<i class="arrow"></i>
</div>
</div>
<div class="echartbox">
<repairEcharts></repairEcharts>
</div>
</el-card>
</el-col>
<el-col :span="9">
<el-card>
<div class="titlebox">
<div>近一周收入支出趋势</div>
<div class="arrowto echartTypes">
<div class="echarsActions">
<div
v-for="(item, index) in echartType"
:key="index"
class="echarsAction"
:class="{
active: index === currentEchartType
}"
@click="echartTypeChange(index)"
>
{{ item }}
</div>
</div>
</div>
</div>
<div class="echartbox">
<repairEcharts></repairEcharts>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<div class="quickBox">
<div class="quickBox_title">快捷入口</div>
<div class="quickBox_body">
<div class="quick_item" v-for="(item, index) in quickBox" @click="handleRouter(item.url)" :key="index">
{{ item.name }}
</div>
<div class="quick_item quick_add">+ 添加</div>
</div>
</div>
</el-card>
<el-card class="mt-20px">
<div class="todoBox">
<div class="todoBox_title">
<div>创建办事记录</div>
<el-button size="small" type="primary">提交</el-button>
</div>
<div class="todoBox_body">
<el-form label-width="80px" label-position="top" size="small" v-model="Todo">
<el-form-item label="需求方姓名">
<el-input v-model="Todo.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="办事时间">
<el-date-picker
v-model="Todo.createtime"
type="datetime"
placeholder="yyyy-mm-dd --:--"
format="YYYY-MM-DD HH:mm"
date-format="YYYY MM DD"
time-format="HH:mm"
>
<template #prev-month>
<el-icon><CaretLeft /></el-icon>
</template>
<template #next-month>
<el-icon><CaretRight /></el-icon>
</template>
<template #prev-year>
<el-icon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</el-icon>
</template>
<template #next-year>
<el-icon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</el-icon>
</template>
</el-date-picker>
</el-form-item>
<el-form-item label="办事内容">
<el-input v-model="Todo.todoContent" placeholder="请输入办事内容"></el-input>
</el-form-item>
<el-form-item label="附件">
<el-upload ref="uploadRef" class="upload-demo" action="" :auto-upload="false" style="width: 100% !important">
<template #trigger>
<div class="uploadFileBox" style="width: 100%">
<el-button type="default" style="width: 100%">
<template #icon>
<el-icon><Upload /></el-icon>
</template>
上传文件
</el-button>
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card class="mt-20px">
<HouseUser></HouseUser>
</el-card>
</div>
</template>
<script setup name="Index" lang="ts">
import repairEcharts from './components/repairEcharts.vue';
import HouseUser from './components/HouseUser.vue';
// ! 快捷入口
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
});
}
// ! 快捷入口
// ! 代办事项
const Todo = ref({
name: '',
createtime: '',
todoContent: '',
file: null
});
// ! 代办事项
// ! 切换echarts
// 切换echarts
const echartType = ['全部', '收入', '支出'];
const currentEchartType = ref(0);
const echartTypeChange = (type: number) => {
currentEchartType.value = type;
};
// ! 切换echarts
</script>
<style lang="scss" scoped>
.home {
color: rgba(51, 51, 51, 1);
padding: 20px;
.navbar {
height: 40px;
line-height: 40px;
font-size: 20px;
}
.viliageBox {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.15);
height: 220px;
background-color: #fff;
.title {
margin-bottom: 30px;
color: rgba(51, 51, 51, 1);
font-size: 18px;
}
.viliageInfo {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr;
gap: 40px;
.vilage_item {
display: flex;
align-items: center;
justify-content: space-between;
height: 120px;
border-radius: 10px;
box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.2);
border: 1px solid rgba(26, 117, 255, 0.2);
padding: 25px 20px;
.info_title {
margin-bottom: 10px;
font-size: 14px;
}
.info_value {
font-size: 25px;
}
.icon {
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.titlebox {
height: 35px;
line-height: 35px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
.actionbox {
cursor: pointer;
width: 80px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
&:hover {
color: #1975ff;
.arrow {
border-top-color: #1975ff;
border-right-color: #1975ff;
}
}
.arrow {
display: block;
width: 10px;
height: 10px;
border: 1px solid transparent;
transform: rotateZ(45deg);
border-top-color: #ccc;
border-right-color: #ccc;
}
}
}
.echartbox {
height: 492px;
}
.arrowto {
display: flex;
align-items: center;
&.echartTypes {
&::after {
display: none;
}
.echarsActions {
display: flex;
align-items: center;
.echarsAction {
height: 30px;
line-height: 30px;
width: 60px;
flex: 1;
text-align: center;
border: 1px solid #1a75ff;
margin-left: -1px;
font-size: 12px;
cursor: pointer;
color: #1a75ff;
&.active {
background-color: #1a75ff;
color: #fff;
}
&:nth-child(1) {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
&:nth-child(3) {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
}
}
}
// 快捷入口
.quickBox {
width: 100%;
box-sizing: border-box;
padding: 10px;
border-radius: 50%;
margin-bottom: 10px;
.quickBox_title {
line-height: 25px;
color: rgba(51, 51, 51, 1);
font-size: 18px;
margin-bottom: 10px;
}
.quickBox_body {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
.quick_item {
height: 40px;
color: rgba(51, 51, 51, 1);
line-height: 40px;
text-align: center;
border-radius: 5px;
cursor: pointer;
border: 1px solid transparent;
&:hover {
border: 1px solid rgba(26, 117, 255, 1);
color: #1975ff;
}
@media (max-width: 1920px) {
font-size: 12px;
}
@media (max-width: 1500px) {
font-size: 10px;
}
@media (max-width: 1400px) {
font-size: 8px;
}
}
.quick_add {
border: 1px solid rgba(26, 117, 255, 1);
color: rgba(26, 117, 255, 1);
}
}
}
// 待办事项
.todoBox {
width: 100%;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 5px;
.todoBox_title {
line-height: 30px;
color: rgba(51, 51, 51, 1);
font-size: 20px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.todoBox_body {
&:deep(.el-form-item__label) {
margin-bottom: 10px;
}
&:deep(.el-form-item) {
margin-bottom: 10px;
}
&:deep(.el-upload, ) {
width: 100%;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
width: 100% !important;
}
// 上传文件
.uploadFileBox {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
}
</style>