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-17 19:39:21 +08:00
parent 4184f1c55d
commit 9a95e2b7e3
74 changed files with 1942 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,183 +1,234 @@
<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 class="scale-container">
<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">
<el-image :src="item.icon"></el-image>
</div>
<div class="infobox">
<div class="infoTitle">{{ item.name }}</div>
<div class="infoNum">{{ item.value }}</div>
</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 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="quickly_item add">
<el-icon><Plus /></el-icon>
<span>添加</span>
<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 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>
</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">北境碧桂园小区</div>
<div class="week">2025-08-20 星期三</div>
</div>
</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>
<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" @click="handleRouter(item.url)">
<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 class="noticeNav">
<div>创建办事记录</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"
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>
</el-col>
</el-row>
<!-- table -->
<el-row class="mt-20px">
<el-col>
<div class="userBox">
<div class="title">住户查询</div>
<div class="searbox">
<div>精准查询</div>
<el-select v-model="seachervalue" placeholder="住户姓名" style="width: 240px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="searchInput" placeholder="请输入">
<template #prefix>
<el-icon><Search /></el-icon>
</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"
/>
</el-input>
<el-button type="primary" @click="handleSearch">查询 </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="name" align="center" label="姓名" width="180" />
<el-table-column prop="type" align="center" label="类型" width="180">
<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">
<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="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>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:background="false"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
</template>
<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 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 { UploadUserFile } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
const list = ref([
{
name: '住户总数量',
value: 10000
},
{
name: '房屋总数量',
value: 458
},
{
name: '车位总数量',
value: 2539
},
{
name: '设备总数量',
value: 22
},
{
name: '物料总数量',
value: 458
},
{
name: '投诉总数量',
value: 458
}
{ 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: 458, icon: icon6 }
]);
// ! echarts 切换
const active_index = ref(0);
const actions = ref([
{
@@ -193,13 +244,13 @@ const actions = ref([
function changeActive_index(val: number) {
active_index.value = val;
}
// ! echarts 切换
// ! 侧边栏
const Sideactive = ref(1);
function handleSelect(val: number) {
Sideactive.value = val;
console.log(Sideactive.value);
}
// ! 侧边栏
// ! 快捷入口
const quickBox = ref([
{
@@ -227,21 +278,33 @@ const quickBox = ref([
url: '/repair/visitorList'
}
]);
const router = useRouter();
function handleRouter(val: string) {
router.push({
path: val
});
}
// ! table
const value = ref('');
const loading = ref(true);
// ! 快捷入口
// ! 创建办事记录
const noticForm = ref({
seekName: '',
phone: '',
handleTime: '',
content: '',
handlePosition: '',
file: ''
});
const fileList = ref<UploadUserFile[]>([]);
// ! 创建办事记录
// ! table
const seachervalue = ref('');
const searchInput = ref('');
const loading = ref(true);
const total = ref(100);
const data = reactive({
queryParams: {
villageId: Number(localStorage.getItem('villageid')),
pageNum: 1,
pageSize: 10
}
@@ -253,54 +316,42 @@ const indexMethod = (index) => {
};
const options = [
{
value: 'Option1',
value: 'name',
label: '住户姓名'
},
{
value: 'Option2',
value: 'phone',
label: '住户手机号'
},
{
value: 'Option3',
value: 'idCard',
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'
}
]);
function handleSearch() {
queryParams[seachervalue.value] = searchInput.value;
getList();
}
const tableData = ref([]);
async function getList() {
const res = await listResident(queryParams.value);
tableData.value = res.rows;
}
getList();
// ! table
</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;
margin-bottom: 10px;
.title {
height: 25px;
font-weight: 500;
@@ -313,15 +364,19 @@ const tableData = ref([
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap; /* 自动换行 */
gap: 16px;
.village_items {
margin-right: 20px;
min-width: 185px;
height: 109px;
flex: 1;
min-width: 160px; /* 小屏自动单列 */
margin-right: 10px;
min-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;
padding-left: 20px;
display: flex;
align-items: center;
.icon {
@@ -332,11 +387,14 @@ const tableData = ref([
border-radius: 10px 10px 10px 10px;
border: 1px solid #ffffff;
margin-right: 15px;
.el-image {
width: 100%;
height: 100%;
}
}
.infobox {
margin-right: 20px;
.infoTitle {
width: 70px;
height: 18px;
font-weight: 400;
font-size: 14px;
@@ -344,7 +402,6 @@ const tableData = ref([
line-height: 18px;
}
.infoNum {
width: 87px;
height: 35px;
font-weight: 600;
font-size: 28px;
@@ -358,10 +415,11 @@ const tableData = ref([
// echarts
.echartsbox {
height: inherit;
.echarts {
margin-right: 20px;
flex: 1;
height: 425px;
height: 450px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
border: 2px solid #ffffff;
border-radius: 12px;
@@ -469,7 +527,6 @@ const tableData = ref([
// 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;
@@ -478,7 +535,7 @@ const tableData = ref([
align-items: center;
div {
flex: 1;
border-bottom: 2px solid #fff;
border-bottom: 4px solid;
border-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)) 100% 1;
text-align: center;
padding: 14px;
@@ -497,7 +554,7 @@ const tableData = ref([
position: absolute;
right: 10px;
top: 0;
width: $width / 2;
width: calc($width / 2);
height: 100%;
transform: skew(30deg);
background: white;
@@ -529,7 +586,7 @@ const tableData = ref([
position: absolute;
left: 10px;
top: 0;
width: $width / 2;
width: calc($width / 2);
height: 100%;
transform: skew(-30deg);
background: white;
@@ -576,12 +633,17 @@ const tableData = ref([
.body {
font-size: 16px;
color: #222222;
padding: 30px;
padding: 20px;
.quicly_box {
display: grid;
grid-template-columns: repeat(3, 1fr);
display: flex;
align-items: center;
justify-content: start;
flex-wrap: wrap;
gap: 10px;
.quickly_item {
width: 125px;
min-width: 30%;
max-width: 33%;
margin-bottom: 20px;
height: 56px;
background: #ffffff;
@@ -590,6 +652,10 @@ const tableData = ref([
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background-color: #0084ff09;
}
.quickly_item_content {
margin-left: 5px;
width: 64px;
@@ -610,6 +676,37 @@ const tableData = ref([
}
}
}
.noticeNav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.noticeBox {
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
width: 100%;
}
.upload-demo,
:deep(.el-upload.el-upload--text) {
width: 100%;
}
.uploadBtn {
height: 30px;
line-height: 20px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
padding-left: 20px;
font-size: 14px;
border: 1px solid rgba(204, 204, 204, 1);
width: 100%;
border: 1px solid #ccc;
span {
margin-left: 10px;
}
}
}
}
}
@@ -617,13 +714,12 @@ const tableData = ref([
.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;
margin-bottom: 10px;
}
.searbox {
height: 35px;
@@ -631,7 +727,7 @@ const tableData = ref([
font-size: 16px;
display: flex;
align-items: center;
margin-bottom: 30px;
margin-bottom: 20px;
div {
width: 70px;
margin-right: 20px;