Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5

feat: 更新保洁页面
2025-06-26 18:03:07 +08:00 · 2025-06-26 18:02:43 +08:00
5 changed files with 533 additions and 42 deletions
--- a/apps/web-antd/src/views/property/clean/cleanOrders/clean-detail-modal.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/clean-detail-modal.vue
@ -193,7 +193,10 @@ async function handleConfirm() {
    const selectedService = cleanListData.find(item => item.id === data.name);
    if (selectedService) {
      data.name = selectedService.name;
+      data.id = selectedService.id
    }
+    console.log(data);
+    
    handleClosed()
    await markInitialized();
    emit('reload', data);
--- a/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
@ -7,16 +7,24 @@ import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';

 import { useVbenForm } from '#/adapter/form';
-import { cleanList } from '#/api/property/clean';
+import { cleanAdd, cleanInfo, cleanUpdate, cleanList } from '#/api/property/clean';
 import type { CleanVO } from '#/api/property/clean/model';
 import { clean_orderAdd, clean_orderInfo, clean_orderUpdate } from '#/api/property/clean_order';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 import { resident_unitList } from '#/api/property/resident/unit';
-
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import cleanDetailModal from './clean-detail-modal.vue';
+import { Table, Button } from 'ant-design-vue';
 import { modalSchema } from './data';

-const emit = defineEmits<{ reload: [] }>();
+const totalSumPeices = computed(() => {
+  return detailTable.value
+    .reduce((total: number, item: any) => total + (Number(item.sumPeices) || 0), 0)
+    .toFixed(2);
+});

+const emit = defineEmits<{ reload: [] }>();
 const isUpdate = ref(false);
 const title = computed(() => {
  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
@ -99,8 +107,9 @@ const [BasicModal, modalApi] = useVbenModal({

    const { id } = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;
+
    if (isUpdate.value && id) {
-      const record = await clean_orderInfo(id);
+      const record:any = await clean_orderInfo(id);
      if (record.starTime) record.starTime = dayjs(record.starTime);
      if (record.endTime) record.endTime = dayjs(record.endTime);
      editUnitId.value = record.unitId || '';
@ -112,6 +121,134 @@ const [BasicModal, modalApi] = useVbenModal({
  },
 });

+// 添加订单详情表格配置
+const detailGridOptions: VxeGridProps = {
+  height: '300px',
+  columns: [
+
+    {
+      title: '序号',
+      field: 'index',
+          width: 'auto',
+      slots: {
+        default: ({ rowIndex }) => {
+          return (rowIndex + 1).toString();
+        },
+      },
+    },
+    {
+      title: '劳务名称',
+      field: 'name',
+          width: 'auto',
+    },
+    {
+      title: '计量单位',
+      field: 'measure',
+          width: 'auto',
+    },
+    {
+      title: '计算方式',
+      field: 'method',
+          width: 'auto',
+    },
+    {
+      title: '申报单价含税（元）',
+      field: 'peices',
+          width: 'auto',
+    },
+    {
+      title: '保洁频率',
+      field: 'frequency',
+          width: 'auto',
+    },
+    {
+      title: '保洁标准',
+      field: 'standard',
+          width: 'auto',
+    },
+    {
+      title: '备注',
+      field: 'remark',
+          width: 'auto',
+    },
+    {
+      title: '状态',
+      field: 'stater',
+          width: 'auto',
+      slots: {
+        default: ({ row }) => row.stater === 1 ? '启用' : '禁用',
+      },
+    },
+    {
+      title: '保洁面积',
+      field: 'area',
+          width: 'auto',
+    },
+    {
+      title: '合计费用',
+      field: 'sumPeices',
+          width: 'auto',
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: '操作',
+    width: 'auto',
+    },
+  ],
+  data: [],
+};
+const detailColumns = [
+  { title: '序号', key: 'index', width: 'auto'},
+  { title: '劳务名称', dataIndex: 'name', key: 'name', width: 'auto' },
+  { title: '计量单位', dataIndex: 'measure', key: 'measure', width: 'auto' },
+  { title: '计算方式', dataIndex: 'method', key: 'method', width: 'auto' },
+  { title: '申报单价含税（元）', dataIndex: 'peices', key: 'peices' , width: 'auto'},
+  { title: '保洁频率', dataIndex: 'frequency', key: 'frequency' , width: 'auto'},
+  { title: '保洁标准', dataIndex: 'standard', key: 'standard' , width: 'auto'},
+  { title: '备注', dataIndex: 'remark', key: 'remark' , width: 'auto'},
+  {
+    title: '状态',
+    dataIndex: 'stater',
+    key: 'stater',
+    width: 'auto',
+    customRender: ({ value }: { value: number }) => (value === 1 ? '启用' : '禁用')
+    
+  },
+  { title: '保洁面积', dataIndex: 'area', key: 'area', width: 'auto' },
+  { title: '合计费用', dataIndex: 'sumPeices', key: 'sumPeices', width: 'auto' },
+  {
+    title: '操作',
+    key: 'action',
+    fixed: 'right' as const,
+    width: 'auto',
+  },
+]
+
+const [DetailTable, detailTableApi] = useVbenVxeGrid({
+  gridOptions: detailGridOptions,
+});
+const detailTable = ref<any>([])
+
+const [CleanDetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: cleanDetailModal,
+});
+
+function handleAddDetail() {
+  detailModalApi.setData({});
+  detailModalApi.open();
+}
+
+function handleDetailReload(data: any) {
+  detailTable.value.push(data)
+}
+
+function handleDeleteDetail(record: any,index: number) {
+  console.log(record,index);
+  detailTable.value.splice(index,1)
+}
+
 async function handleConfirm() {
  try {
    modalApi.lock(true);
@ -120,15 +257,13 @@ async function handleConfirm() {
      return;
    }
    const data = cloneDeep(await formApi.getValues());
-console.log(data);
-
+    console.log(data);
    // 单位数据缓存
    if (unitListData.length === 0) {
      const res = await resident_unitList();
      unitListData = res.rows || [];
    }
    // 劳务数据缓存 cleanListData 已有
-
    // 查找label
    const unitObj = unitListData.find(item => item.id === data.unit);
    const cleanObj = cleanListData.find(item => item.id === data.name);
@ -138,9 +273,9 @@ console.log(data);
    data.unitId = unitObj ? unitObj.id : (isUpdate.value ? editUnitId.value : '');
    data.cleanId = cleanObj ? cleanObj.id : (isUpdate.value ? editCleanId.value : '');

-    // 如不需要原字段可删除
-    // delete data.unit;
-    // delete data.name;
+    // 组装 cleanIds
+    data.cleanIds = detailTable.value.map((item: any) => item.id);
+    data.details = detailTable.value;

    await (isUpdate.value ? clean_orderUpdate(data) : clean_orderAdd(data));
    resetInitialized();
@ -154,15 +289,60 @@ console.log(data);
 }

 async function handleClosed() {
-  detailTable.value = []
  await formApi.resetForm();
  resetInitialized();
 }
 </script>

 <template>
-  <BasicModal :title="title">
+  <BasicModal :title="title" >
    <BasicForm />
+    <!-- 添加订单详情部分 -->
+    <div class="mt-4">
+      <div class="flex items-center justify-between mb-2">
+        <h3 class="text-lg font-medium">添加保洁订单详情</h3>
+        <a-button type="primary" @click="handleAddDetail">
+          {{ $t('pages.common.add') }}
+        </a-button>
+      </div>
+    <Table :dataSource="detailTable" :columns="detailColumns" :pagination="false"  >
+  <template #bodyCell="{ column, index,record }">
+    <template v-if="column.key === 'index'">
+      {{ index + 1 }}
+    </template>
+        <template v-else-if="column.key === 'action'">
+          <Button danger @click="handleDeleteDetail(record,index)">删除</Button>        
+        </template>
+  </template>
+</Table>
+<div>费用合计：{{ totalSumPeices }}元</div>
+      </div>
+    <CleanDetailModal @reload="handleDetailReload" />
  </BasicModal>
 </template>

+<style scoped>
+.mt-4 {
+  margin-top: 1rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.font-medium {
+  font-weight: 500;
+}
+</style>
+
--- a/apps/web-antd/src/views/property/clean/cleanOrders/data.ts
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/data.ts
@ -39,10 +39,10 @@ export const querySchema: FormSchemaGetter = () => [
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
  {
    title: '序号',
    field: 'id',
+    width:'60',
        slots: {
      default: ({ rowIndex }) => {
        return (rowIndex + 1).toString();
@ -52,26 +52,32 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '服务地址',
    field: 'location',
+    width: 'auto',
  },
  {
    title: '服务面积（㎡）',
    field: 'area',
+    width: 'auto',
  },
  {
    title: '劳务名称',
    field: 'name',
+    width: 'auto',
  },
  {
    title: '申报单价含税（元）',
    field: 'prices',
+    width: 'auto',
  },
  {
    title: '合计费用',
    field: 'sumPeices',
+    width: 'auto',
  },
  {
    title: '支付状态',
    field: 'payState',
+    width: 'auto',
        slots: {
      default: ({ row }) => row.stater === 1 ? '已支付' : '待支付',
    },
@ -79,22 +85,30 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '服务开始时间',
    field: 'starTime',
+    width: 'auto',
+
+    
  },
  {
    title: '服务结束时间',
    field: 'endTime',
+    width: 'auto',
+
  },
    {
    title: '申请单位',
    field: 'unit',
+    width: 'auto',
  },
  {
    title: '申请人',
    field: 'persion',
+    width: 'auto',
  },
  {
    title: '联系电话',
    field: 'phone',
+    width: 'auto',
  },
  //   {
  //   title: '提交时间',
@ -105,7 +119,6 @@ export const columns: VxeGridProps['columns'] = [
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
-    width: 180,
  },
 ];

@ -131,28 +144,28 @@ export const modalSchema: FormSchemaGetter = () => [
    component: 'Input',
    rules: 'required',
  },
-  {
-    label: '劳务名称',
-    fieldName: 'name',
-    component: 'ApiSelect',
-    componentProps: {
-      api: cleanList,
-      resultField: 'rows',
-      labelField: 'name',
-      valueField: 'id',
-    },
-    rules: 'required',
-  },
-  {
-    label: '服务单价',
-    fieldName: 'prices',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '',
-      disabled: true,
-    },
-  },
+  // {
+  //   label: '劳务名称',
+  //   fieldName: 'name',
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     api: cleanList,
+  //     resultField: 'rows',
+  //     labelField: 'name',
+  //     valueField: 'id',
+  //   },
+  //   rules: 'required',
+  // },
+  // {
+  //   label: '服务单价',
+  //   fieldName: 'prices',
+  //   component: 'Input',
+  //   rules: 'required',
+  //   componentProps: {
+  //     placeholder: '',
+  //     disabled: true,
+  //   },
+  // },
  // {
  //   label: '保洁频率',
  //   fieldName: 'frequency',
--- a/apps/web-antd/src/views/property/clean/cleanSettings/data.ts
+++ b/apps/web-antd/src/views/property/clean/cleanSettings/data.ts
@ -31,11 +31,9 @@ export const querySchema: FormSchemaGetter = () => [
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
  {
    title: '序号',
    field: 'id',
-    width: 60,
        slots: {
      default: ({ rowIndex }) => {
        return (rowIndex + 1).toString();
@ -45,22 +43,27 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '劳务名称',
    field: 'name',
+    width:'120'
  },
  {
    title: '计量单位',
    field: 'measure',
+        width:'120'
  },
  {
    title: '计算方式',
    field: 'method',
+        width:'120'
  },
  {
    title: '申报单价含税（元）',
    field: 'peices',
+    width: 'auto',
  },
  {
    title: '保洁频率',
    field: 'frequency',
+        width:'120'
  },
  // {
  //   title: '保洁内容',
@ -69,14 +72,17 @@ export const columns: VxeGridProps['columns'] = [
    {
    title: '保洁标准',
    field: 'standard',
+     width:'200'
  },
  {
    title: '备注',
    field: 'remark',
+         width:'200'
  },
  {
    title: '状态',
    field: 'stater',
+         width:'120',
    slots: {
      default: ({ row }) => row.stater === 1 ? '上架' : '下架',
    },
@ -90,7 +96,7 @@ export const columns: VxeGridProps['columns'] = [
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
-    width: 180,
+    width: 'auto',
  },
 ];

@ -127,6 +133,7 @@ export const modalSchema: FormSchemaGetter = () => [
    fieldName: 'peices',
    component: 'Input',
    rules: 'required',
+    width: 300,
  },
  {
    label: '保洁频率',
--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue
@ -1,5 +1,293 @@
+<script setup lang="ts">
+import { Button } from 'ant-design-vue';
+import { ref, onMounted } from 'vue';
+import { EchartsUI, useEcharts, type EchartsUIType } from '@vben/plugins/echarts';
+
+const orderLineRef = ref<EchartsUIType>();
+const leasePieRef = ref<EchartsUIType>();
+const customerTypesBarRef = ref<EchartsUIType>();
+const customerRenewalLineRef = ref<EchartsUIType>();
+const conservationTasksBarRef = ref<EchartsUIType>();
+const maintenanceQualityScoresPeiRef = ref<EchartsUIType>();
+
+const { renderEcharts } = useEcharts(orderLineRef);
+const { renderEcharts: renderLeasePie } = useEcharts(leasePieRef);
+const {renderEcharts: renderCustomerTypesBar} = useEcharts(customerTypesBarRef);
+const {renderEcharts: renderCustomerRenewalLine} = useEcharts(customerRenewalLineRef);
+const {renderEcharts: renderConservationTasksBar} = useEcharts(conservationTasksBarRef);
+const {renderEcharts: renderMaintenanceQualityScoresPei} = useEcharts(maintenanceQualityScoresPeiRef);
+
+onMounted(() => {
+  renderEcharts({
+    title: { text: '订单数量趋势' },
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      boundaryGap: false,
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '订单数',
+        type: 'line',
+        data: [120, 132, 101, 134, 90, 230],
+        smooth: true,
+      },
+    ],
+  });
+  renderLeasePie({
+    title: { text: '租赁金额分布', left: 'center' },
+    tooltip: { trigger: 'item' },
+    legend: { orient: 'vertical', left: 'left' },
+    series: [
+      {
+        name: '金额',
+        type: 'pie',
+        radius: '60%',
+        center: ['50%', '50%'],
+        data: [
+          { value: 1048, name: '办公楼' },
+          { value: 735, name: '商场' },
+          { value: 580, name: '酒店' },
+          { value: 484, name: '医院' },
+          { value: 300, name: '其他' },
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+        label: {
+          formatter: '{b}: {c} ({d}%)',
+          show: true,
+        },
+      },
+    ],
+  });
+  renderCustomerTypesBar({
+    title: { text: '客户类型分配' },
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      boundaryGap: false,
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '订单数',
+        type: 'bar',
+        data: [120, 132, 101, 134, 90, 230],
+      },
+    ],
+  });
+  renderCustomerRenewalLine({
+     title: { text: '客户续租率趋势' },
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      boundaryGap: false,
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '订单数',
+        type: 'line',
+        data: [120, 132, 101, 134, 90, 230],
+        smooth: true,
+      },
+    ],
+  });
+  renderConservationTasksBar({
+  title: { text: '养护任务完成情况' },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' }
+  },
+  legend: {
+    data: ['计划任务数', '已完成数', '完成率']
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['朝阳区', '海淀区', '西城区', '东城区']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      name: '任务数',
+      min: 0,
+      max: 200,
+      position: 'left'
+    },
+    {
+      type: 'value',
+      name: '完成率',
+      min: 0,
+      max: 100,
+      position: 'right',
+      axisLabel: {
+        formatter: '{value}%'
+      }
+    }
+  ],
+  series: [
+    {
+      name: '计划任务数',
+      type: 'bar',
+      data: [156, 140, 130, 120]
+    },
+    {
+      name: '已完成数',
+      type: 'bar',
+      data: [152, 135, 125, 110]
+    },
+    {
+      name: '完成率',
+      type: 'line',
+      yAxisIndex: 1,
+      data: [97.4, 96.4, 96.2, 91.7]
+    }
+  ]
+  });
+  renderMaintenanceQualityScoresPei({
+  title: { text: '养护质量评分分布', left: 'center' },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b} : {d}%'
+  },
+  legend: {
+    orient: 'horizontal',
+    left: 'center',
+    bottom: 10,
+    data: ['一星', '两星', '三星', '四星', '五星']
+  },
+  series: [
+    {
+      name: '评分',
+      type: 'pie',
+      radius: '60%',
+      center: ['50%', '50%'],
+      data: [
+        { value: 12.43, name: '一星' },
+        { value: 12.26, name: '两星' },
+        { value: 16.87, name: '三星' },
+        { value: 25.75, name: '四星' },
+        { value: 32.68, name: '五星' }
+      ],
+      label: {
+        formatter: '{b} {d}%',
+        show: true
+      }
+    }
+  ]
+});
+});
+</script>
 <template>
-    <div>
-        报表统计
+  <div class="main">
+    <div class="box">
+        <div class="title">
+            <div class="title-text">绿植租赁业务统计报表：</div>
+            <div class="title-operate">
+                <div class="export">
+                    <Button size="large" style="background-color: #22C55E; color: #fff;">导出数据</Button>
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="row">
+            </div>
+            <div class="row-first">
+                <div class="item1">
+                <EchartsUI ref="orderLineRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
+                </div>
+                <div class="item2">
+                  <EchartsUI ref="leasePieRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
+                </div>
+            </div>
+            <div class="row-second">
+                <div class="item1">
+                <EchartsUI ref="customerTypesBarRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
+                </div>
+                <div class="item2">
+                <EchartsUI ref="customerRenewalLineRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
+                </div>
+            </div>
+            <div class="row-third">
+              <EchartsUI ref="conservationTasksBarRef" height="100%" width="100%" style="background:#fff;border-radius:8px;" />
+            </div>
+            <div class="row-fouth">
+              <EchartsUI ref="maintenanceQualityScoresPeiRef" height="100%" width="100%" style="background:#fff;border-radius:8px;" />
+            </div>
+        </div>
    </div>
-</template>
+    
+  </div>
+</template>
+<style lang="scss" scoped>
+.main {
+  width: 100%;
+  .box{
+    margin: 40px;
+    height: 100%;
+    .title{
+        display: flex;
+        justify-content: space-between;
+        .title-text{
+            font-size: 25px;
+            font-weight: bold;
+        }
+        .title-operate{
+            display: flex;
+            .calendar{
+            }
+            .export{
+                margin-left: 20px;
+            }
+        }
+    }
+    .content{
+        flex:1;
+        padding: 10px;
+        background-color: #962020;
+        height: 100%;
+        .row{
+          display: flex;
+          justify-content: space-between;
+        }
+        .row-first{
+            display: flex;
+            justify-content: space-between;
+            height: 400px;      
+         }
+        .row-second{
+            display: flex;
+            justify-content: space-between;
+            height: 400px;
+        }
+        .row-third{
+            height: 400px;
+            margin-bottom: 50px;
+        }
+        .row-fouth{
+            height: 400px;
+        }
+        .item1{
+          width: 45%;
+          height: 100%;
+        }
+        .item2{
+            width: 50%;
+            height: 100%;
+        } 
+        
+    }
+  }
+}
+</style>
Author	SHA1	Message	Date
fyy	e06f8861cc	Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5 Some checks failed Gitea Actions Demo / Explore-Gitea-Actions (push) Has been cancelled Details	2025-06-26 18:03:07 +08:00
fyy	730d8ca6f2	feat: 更新保洁页面	2025-06-26 18:02:43 +08:00