物业后台框架基本完成
This commit is contained in:
Zy
@@ -1,9 +1,106 @@
|
||||
<template>
|
||||
<div class=" "></div>
|
||||
<el-card style="margin-top: 20px; height: 100%">
|
||||
<div class="p-2 flex flex-col cashierbox h-full">
|
||||
<div class="flex">
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
<div style="margin: 0 80px">小区： 北境碧桂园小区</div>
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
</div>
|
||||
<div class="actionsbox">
|
||||
<el-button type="primary">收款</el-button>
|
||||
<el-button>添加临时收费</el-button>
|
||||
<el-button>预存</el-button>
|
||||
<el-button>打印</el-button>
|
||||
<el-button @click="emit('Back')">返回</el-button>
|
||||
</div>
|
||||
<div class="tablebox">
|
||||
<el-table>
|
||||
<el-table-column align="center" label="序号" width="80">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="房屋/车位/车辆">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费项目">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费周期">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="单价">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应收金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="缴费状态">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="应缴金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</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-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const total = ref(100);
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const getList = () => {
|
||||
console.log('getList');
|
||||
};
|
||||
|
||||
const emit = defineEmits(['Back']);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.cashierbox {
|
||||
font-size: 0.8rem;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actionsbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tablebox {
|
||||
margin-top: 20px;
|
||||
height: 100%;
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,95 @@
|
||||
<template>
|
||||
<div class=" "></div>
|
||||
<div class="p-2 flex flex-col cashierbox h-full">
|
||||
<div class="flex">
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
<div style="margin: 0 80px">小区： 北境碧桂园小区</div>
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
</div>
|
||||
<div class="tablebox">
|
||||
<el-table>
|
||||
<el-table-column align="center" label="序号" width="80">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="房屋/车位/车辆">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费项目">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费周期">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="单价">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应收金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="缴费状态">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="应缴金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const total = ref(100);
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const getList = () => {
|
||||
console.log('getList');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.cashierbox {
|
||||
font-size: 0.8rem;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actionsbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tablebox {
|
||||
margin-top: 20px;
|
||||
height: 100%;
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="p-2 h-full flex flex-col">
|
||||
<Pageheader title="收银台管理"></Pageheader>
|
||||
<div class="">
|
||||
<div class="" v-if="isSearch">
|
||||
<p class="actionsmain">
|
||||
功能说明：可根据住户姓名、住户手机号、房屋号、车位号、车牌号，快速搜索对应的未缴费用，修改未缴费用的优惠及滞纳金金额，完成对未缴费用的收取。
|
||||
</p>
|
||||
@@ -34,39 +34,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div v-else style="margin-top: 20px; height: calc(100% - 210px)">
|
||||
<div class="tabsbox">
|
||||
<div @click="handleChecout(index)" v-for="(item, index) in tabs" :key="index" class="tabs_item" :class="{ active: checkouttabs === index }">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<component :is="tabs[checkouttabs].component" :key="checkouttabs"></component>
|
||||
<div class="h-full">
|
||||
<el-card style="height: 100%; margin-top: 20px" v-if="checkouttabs === 0">
|
||||
<cashier @Back="handleBack"></cashier>
|
||||
</el-card>
|
||||
<el-card style="height: 100%; margin-top: 20px" shadow="never" v-if="checkouttabs === 1">
|
||||
<history></history>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// TODO 收银台
|
||||
// TODO 历史缴费
|
||||
// TODO 添加临时收费
|
||||
// TODO 预存
|
||||
// TODO 缴费
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import cashier from './cashier.vue';
|
||||
import history from './history.vue';
|
||||
|
||||
const isSearch = ref(false);
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_cashier_type } = toRefs<any>(proxy?.useDict('com_cashier_type'));
|
||||
const searchform = ref({
|
||||
type: '0'
|
||||
});
|
||||
const list = ref([]);
|
||||
|
||||
// ! ===================================================================================
|
||||
const checkouttabs = ref(0);
|
||||
const tabs = [
|
||||
{
|
||||
name: "'收银台'",
|
||||
name: '收银台',
|
||||
component: cashier
|
||||
},
|
||||
{
|
||||
@@ -78,6 +87,22 @@ function handleChecout(index: number) {
|
||||
checkouttabs.value = index;
|
||||
}
|
||||
// ! ===================================================================================
|
||||
|
||||
// ! ===================================================================================
|
||||
const total = ref(100);
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const tableData1 = ref([]);
|
||||
const getList = () => {
|
||||
console.log('getList');
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
isSearch.value = true;
|
||||
};
|
||||
// ! ===================================================================================
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -171,4 +196,27 @@ function handleChecout(index: number) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
.cashierbox {
|
||||
font-size: 0.8rem;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actionsbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tablebox {
|
||||
margin-top: 20px;
|
||||
height: 100%;
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Upload">批量更新固件</el-button>
|
||||
<!-- <el-button type="success" plain icon="Upload">批量更新固件</el-button> -->
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="p-2 flex flex-col h-full">
|
||||
<pageheader></pageheader>
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
|
||||
@@ -87,6 +87,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// TODO 缴费分析
|
||||
import { ref } from 'vue';
|
||||
import Echarts from '@/components/Echarts/index.vue';
|
||||
import { EChartsOption } from 'echarts';
|
||||
@@ -225,11 +226,12 @@ const bgData2 = agesData.map((item) => middleHeight);
|
||||
/** 年龄分布 */
|
||||
const options3 = shallowRef<EChartsOption>({
|
||||
title: {
|
||||
text: '住户年龄分布',
|
||||
left: '0',
|
||||
top: '0',
|
||||
textStyle: { fontSize: 16, fontWeight: 'bold' }
|
||||
text: '年龄分布',
|
||||
left: 0,
|
||||
top: 0,
|
||||
textStyle: { fontSize: 14, fontWeight: 'normal' }
|
||||
},
|
||||
xAxis: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
@@ -237,59 +239,40 @@ const options3 = shallowRef<EChartsOption>({
|
||||
bottom: '8%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
// 鼠标悬浮高亮当前，其他隐藏
|
||||
|
||||
xAxis: { type: 'category', data: agesX, axisLabel: { interval: 0 } },
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: true, lineStyle: { color: '#eee' } }
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
// 蓝色真实数据
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: barwidth,
|
||||
data: agesData,
|
||||
itemStyle: {
|
||||
color: '#409eff',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
stack: 'total'
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: barwidth,
|
||||
data: bgData2,
|
||||
tooltip: { show: false }, // 关键：不显示提示
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
stack: 'total'
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: barwidth,
|
||||
data: bgData,
|
||||
tooltip: { show: false }, // 关键：不显示提示
|
||||
itemStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
},
|
||||
stack: 'total'
|
||||
symbolSize: 20,
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[8.07, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.05, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 7.66],
|
||||
[13.4, 6.81],
|
||||
[10.0, 6.33],
|
||||
[14.0, 8.96],
|
||||
[12.5, 6.82],
|
||||
[9.15, 7.2],
|
||||
[11.5, 7.2],
|
||||
[3.03, 4.23],
|
||||
[12.2, 7.83],
|
||||
[2.02, 4.47],
|
||||
[1.05, 3.33],
|
||||
[4.05, 4.96],
|
||||
[6.03, 7.24],
|
||||
[12.0, 6.26],
|
||||
[12.0, 8.84],
|
||||
[7.08, 5.82],
|
||||
[5.02, 5.68]
|
||||
],
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
});
|
||||
// ! 年龄分布 -------------------------------------------------------------------------------------
|
||||
|
||||
// ! 职业分布比例 -------------------------------------------------------------------------------------
|
||||
|
||||
// ! 职业分布比例 -------------------------------------------------------------------------------------
|
||||
|
||||
// ! 人员流动情况 -------------------------------------------------------------------------------------
|
||||
// ! 进十日缴费数量情况 -------------------------------------------------------------------------------------
|
||||
// 近10天日期
|
||||
const dayX = getLast7Days(10);
|
||||
|
||||
@@ -383,7 +366,7 @@ const flowLineOption = shallowRef<EChartsOption>({
|
||||
}
|
||||
]
|
||||
});
|
||||
// ! 人员流动情况 -------------------------------------------------------------------------------------
|
||||
// ! 进十日缴费数量情况 -------------------------------------------------------------------------------------
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -69,6 +69,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// TODO 人员分析
|
||||
|
||||
import { ref } from 'vue';
|
||||
import Echarts from '@/components/Echarts/index.vue';
|
||||
import { EChartsOption } from 'echarts';
|
||||
|
||||
Reference in New Issue
Block a user