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-22 16:05:44 +08:00
parent 48852a33ec
commit 04eb40d0e4
55 changed files with 1583 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
src/views/workbench/index2.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- 外层缩放容器 -->
<div class="scale-container">
<div class="scale-container h-full">
<div class="w-full h-full workBenchBox">
<el-row>
<el-col :span="18">
@@ -60,89 +60,104 @@
</el-col>
<!-- tabs -->
<el-col :span="6">
<div class="villageInfoBox">
<div class="iconbox">
<el-image :src="summicon"></el-image>
</div>
<div class="villageinfo">
<div class="villagename">{{ villageinfo.villageName }}</div>
<div class="week">{{ new Date().toLocaleDateString().replaceAll('/', '-') }} {{ numToWeek2(new Date().getDay()) }}</div>
</div>
<i class="white1"></i>
<i class="white2"></i>
<i class="white3"></i>
</div>
<div class="tabsbox flex flex-col">
<div class="topbox">
<div
:class="{
active: Sideactive === 1
}"
@click="handleSelect(1)"
>
<span>快捷入口</span>
<i></i>
<div class="flex flex-col h-full">
<div class="villageInfoBox">
<div class="iconbox">
<el-image :src="summicon"></el-image>
</div>
<div
:class="{
active: Sideactive === 2
}"
@click="handleSelect(2)"
>
<span>创建办事记录</span>
<i class="righti"></i>
</div>
</div>
<div class="body flex-1">
<div class="quicly_box" v-if="Sideactive === 1">
<div class="quickly_item" v-for="(item, index) in quickBox" :key="index" @click="handleRouter(item.url)">
<div class="quickly_item_icon"></div>
<div class="quickly_item_content">{{ item.name }}</div>
<div class="villageinfo">
<div class="villagename">{{ villageinfo.villageName }}</div>
<div class="week">
<span>{{ new Date().toLocaleDateString().replaceAll('/', '-') }}</span>
<span>{{ numToWeek2(new Date().getDay()) }}</span>
</div>
<!-- <div class="quickly_item add">
<el-icon><Plus /></el-icon>
<span>添加</span>
</div> -->
</div>
<div v-else>
<div class="noticeNav">
<div>创建办事记录</div>
<el-button type="primary">提交</el-button>
<i class="white1"></i>
<i class="white2"></i>
<i class="white3"></i>
</div>
<div class="tabbox1 flex flex-col flex-1 h-full">
<div class="tabsbox flex flex-col flex-1">
<div
class="topbox"
:class="{
quickbg: Sideactive === 1,
todobg: Sideactive === 2
}"
>
<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="noticeBox">
<el-form label-position="top">
<el-form-item label="需求方姓名">
<el-input placeholder="请输入姓名" v-model="noticForm.seekName"></el-input>
</el-form-item>
<el-form-item label="办事时间">
<el-date-picker
v-model="noticForm.handleTime"
type="datetime"
clearable
placeholder="年-月-日 时:分"
value-format="YYYY-MM-DD HH:MM"
format="YYYY-MM-DD HH:MM"
>
</el-date-picker>
</el-form-item>
<el-form-item label="办事内容">
<el-input type="textarea" v-model="noticForm.content" :rows="2" placeholder="请输入办事内容"></el-input>
</el-form-item>
<el-form-item label="附件">
<el-upload
v-model:file-list="fileList"
:auto-upload="false"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
>
<div class="uploadBtn flex flex-items-center">
<el-icon><Upload /></el-icon>
<span>上传文件</span>
</div>
</el-upload>
</el-form-item>
</el-form>
<div class="body flex-1">
<div class="quicly_box" v-if="Sideactive === 1">
<div class="quickly_item" v-for="(item, index) in quickBox" :key="index" @click="handleRouter(item.url)">
<div class="quickly_item_icon">
<el-image :src="item.img"></el-image>
</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 class="noticeNav">
<div class="noticNav_title">创建办事记录</div>
<el-button type="primary">提交</el-button>
</div>
<div class="noticeBox">
<el-form label-position="top">
<el-form-item label="需求方姓名">
<el-input placeholder="请输入姓名" v-model="noticForm.seekName"></el-input>
</el-form-item>
<el-form-item label="办事时间">
<el-date-picker
v-model="noticForm.handleTime"
type="datetime"
clearable
placeholder="年-月-日 时:分"
value-format="YYYY-MM-DD HH:MM"
format="YYYY-MM-DD HH:MM"
>
</el-date-picker>
</el-form-item>
<el-form-item label="办事内容">
<el-input type="textarea" v-model="noticForm.content" :rows="2" placeholder="请输入办事内容"></el-input>
</el-form-item>
<el-form-item label="附件">
<el-upload
v-model:file-list="fileList"
:auto-upload="false"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
>
<div class="uploadBtn flex flex-items-center">
<el-icon><Upload /></el-icon>
<span>上传文件</span>
</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</div>
@@ -170,25 +185,25 @@
<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="name" align="center" label="姓名" width="180" />
<el-table-column prop="type" align="center" label="类型" width="180">
<el-table-column prop="name" align="center" label="姓名" width="80" />
<el-table-column prop="type" align="center" label="类型" width="100">
<template #default="scope">
<DictTag :options="com_resident_type" :value="scope.row.status"></DictTag>
</template>
</el-table-column>
<el-table-column prop="status" align="center" label="状态" width="180">
<el-table-column prop="status" align="center" label="状态" width="120">
<template #default="scope">
<DictTag :options="com_review" :value="scope.row.type"></DictTag>
</template>
</el-table-column>
<el-table-column prop="idCard" align="center" label="证件号码" />
<el-table-column prop="phone" align="center" label="手机号" />
<el-table-column prop="phone" align="center" label="手机号" width="120" />
<el-table-column prop="houseName" 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 #default="scope">
<el-button type="primary" text @click="shenhe(scope.row)"> 审核</el-button>
<el-button type="primary" text @click="edit(scope.row)"> 编辑</el-button>
<el-button type="primary" text @click="deleteFun(scope.row)"> 删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -211,7 +226,7 @@
<script lang="ts" setup>
import summicon from '@/assets/images/index/summer.png';
import repairEcharts from './components/repairEcharts.vue';
import { listResident } from '@/api/system/resident';
import { delResident, listResident } from '@/api/system/resident';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
@@ -221,11 +236,20 @@ const villageinfo = ref({
'villageName': ''
});
import icon1 from '@/assets/images/index/1.png';
import icon2 from '@/assets/images/index/2.png';
import icon3 from '@/assets/images/index/3.png';
import icon5 from '@/assets/images/index/5.png';
import icon6 from '@/assets/images/index/6.png';
import icon1 from './assets/user.png';
import icon2 from './assets/user.png';
import icon3 from './assets/car.png';
import icon4 from './assets/device.png';
import icon5 from './assets/wuliao.png';
import icon6 from './assets/tousu.png';
import home from './assets/home.png';
import chart from './assets/chart.png';
import add from './assets/add.png';
import info from './assets/info.png';
import profile from './assets/profile.png';
import star from './assets/star.png';
import { UploadUserFile } from 'element-plus';
import { getVillageByIdAPI } from '@/api/system/community';
import { getLast7Days, numToWeek2 } from '@/utils/time';
@@ -240,8 +264,8 @@ const list = ref([
{ name: '住户总数量', value: 10000, icon: icon1 },
{ name: '房屋总数量', value: 458, icon: icon2 },
{ name: '车位总数量', value: 2539, icon: icon3 },
{ name: '设备总数量', value: 22, icon: icon5 },
{ name: '物料总数量', value: 458, icon: icon6 },
{ name: '设备总数量', value: 22, icon: icon4 },
{ name: '物料总数量', value: 458, icon: icon5 },
{ name: '投诉总数量', value: 458, icon: icon6 }
]);
@@ -376,27 +400,33 @@ function handleSelect(val: number) {
const quickBox = ref([
{
name: '新建用户',
url: '/house/resident'
url: '/house/resident',
img: home
},
{
name: '车位管理',
url: '/carArea/parking'
url: '/carArea/parking',
img: chart
},
{
name: '新建月卡',
url: '/carArea/monthCard'
url: '/carArea/monthCard',
img: add
},
{
name: '新建报修',
url: '/repair/repairlist'
url: '/repair/repairlist',
img: info
},
{
name: '访客记录',
url: '/repair/visitorList'
url: '/repair/visitorList',
img: profile
},
{
name: '账单管理',
url: '/sdb/sdbbill'
url: '/sdb/sdbbill',
img: star
}
]);
const router = useRouter();
@@ -420,14 +450,17 @@ const fileList = ref<UploadUserFile[]>([]);
// ! 创建办事记录
// ! table
const seachervalue = ref('');
const seachervalue = ref('name');
const searchInput = ref('');
const loading = ref(true);
const total = ref(100);
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
name: '',
idCard: '',
phone: ''
}
});
const { queryParams } = toRefs(data);
@@ -450,7 +483,15 @@ const options = [
}
];
function handleSearch() {
queryParams[seachervalue.value] = searchInput.value;
queryParams.value = {
pageNum: 1,
pageSize: 10,
name: '',
idCard: '',
phone: ''
};
queryParams.value[seachervalue.value] = searchInput.value;
console.log(queryParams.value);
getList();
}
const tableData = ref([]);
@@ -459,6 +500,30 @@ async function getList() {
tableData.value = res.rows;
}
getList();
function shenhe(row) {
router.push({
path: '/house/ResidentMain',
query: {
id: row.id
}
});
}
function edit(row) {
router.push({
path: '/house/addResident',
query: {
id: row.id
}
});
}
async function deleteFun(row) {
const _ids = row?.id;
await proxy?.$modal.confirm('该信息删除后无法恢复，确定要删除吗？').finally(() => (loading.value = false));
await delResident(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
}
// ! table
</script>
@@ -490,7 +555,6 @@ getList();
.village_items {
flex: 1;
min-width: 160px; /* 小屏自动单列 */
margin-right: 10px;
min-height: 109px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
@@ -503,7 +567,6 @@ getList();
.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;
@@ -520,7 +583,7 @@ getList();
font-weight: 400;
color: #4e5969;
line-height: 18px;
font-size: 14px;
font-size: 0.85rem;
}
.infoNum {
height: 35px;
@@ -550,10 +613,11 @@ getList();
&:last-child {
margin-right: 0;
}
.nav {
.ecarts_title {
font-weight: 500;
font-size: 20px;
font-size: 1rem;
color: #303133;
line-height: 25px;
}
@@ -632,7 +696,7 @@ getList();
.villagename {
height: 30px;
font-weight: 500;
font-size: 24px;
font-size: 1.55rem;
color: #ffffff;
line-height: 30px;
}
@@ -643,6 +707,8 @@ getList();
font-size: 18px;
color: #ffffff;
line-height: 23px;
display: flex;
flex-wrap: wrap;
}
}
@@ -676,18 +742,21 @@ getList();
}
// tabs
.tabsbox {
.tabbox1 {
margin-left: 20px;
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;
background-image: url(./assets/Rectangle.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tabsbox {
background-size: 100% auto;
background-blend-mode: multiply;
overflow: hidden;
.topbox {
display: flex;
align-items: center;
div {
flex: 1;
border-bottom: 4px solid;
border-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)) 100% 1;
text-align: center;
padding: 14px;
cursor: pointer;
@@ -697,75 +766,6 @@ getList();
border-image: none;
position: relative;
color: #000;
$width: 8px;
$greePer: 60%;
& i {
display: block;
position: absolute;
right: 10px;
top: 0;
width: calc($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: calc($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;
@@ -780,41 +780,59 @@ getList();
}
}
}
&.quickbg {
background-image: url(./assets/tabs/Union_tabl.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
&.todobg {
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(./assets/tabs/Union_tabr.png);
}
}
.body {
color: #222222;
padding: 20px;
font-size: 0.7rem;
font-size: 0.75rem;
background-image: url(./assets/tabs/Union_body.png);
background-repeat: no-repeat;
background-size: 100% 100%;
.quicly_box {
display: flex;
align-items: center;
justify-content: start;
flex-wrap: wrap;
padding-top: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
@media (max-width: 1750px) {
grid-template-columns: repeat(2, 1fr);
}
gap: 10px;
.quickly_item {
min-width: 30%;
max-width: 33%;
margin-bottom: 20px;
text-align: center;
height: 56px;
background: #ffffff;
border-radius: 12px 12px 12px 12px;
border: 1px solid #c0daff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background-color: #0084ff09;
}
.quickly_item_icon {
width: 25px;
height: 25px;
}
.quickly_item_content {
margin-left: 5px;
width: 64px;
height: 23px;
margin-left: 8px;
font-weight: 500;
color: #222222;
line-height: 23px;
}
&.add {
@@ -833,6 +851,9 @@ getList();
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
& .noticNav_title {
font-size: 1rem;
}
}
.noticeBox {
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
@@ -909,7 +930,7 @@ getList();
.tablebox {
flex: 1;
.el-table {
height: calc(100% - 60px);
min-height: calc(100% - 60px);
}
}
}