前端代码提交

src/api/project/statement.ts

-import { ProjectParams, ProjectListGetResultModel, ProjectModel } from './model/projectModel';
+import { ProjectParams, ProjectModel } from './model/projectModel';
 import { defHttp } from '@/utils/http/axios';
-
 enum Api {
-  GetList = '/statement/list/page',
+  GetList = '/pro/settlement/page',
 }
 export const getList = (params?: ProjectParams) =>
   defHttp.post<ProjectModel>({ url: Api.GetList, data: params });

src/views/dashboard/analysis/components/BasicBar.vue

+<template>
+  <Card title="形象进度占比" :loading="loading" size="small">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue';
+import { Card } from 'ant-design-vue';
+import { useECharts } from '@/hooks/web/useECharts';
+
+const props = defineProps({
+  loading: Boolean,
+  width: {
+    type: String as PropType<string>,
+    default: '100%',
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '300px',
+  },
+});
+const chartRef = ref<HTMLDivElement | null>(null);
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar'
+          }
+        ]
+
+      });
+    },
+    { immediate: true },
+);
+</script>

src/views/dashboard/analysis/components/GrowCard.vue

 <template>
   <div class="md:flex">
     <template v-for="(item, index) in growCardList" :key="item.title">
+      <div style="width: 10px;" :style="{ background: item.color }" >
+      </div>
       <Card
         size="small"
+        :bordered="false"
         :loading="loading"
-        :title="item.title"
         class="md:w-1/4 w-full !md:mt-0"
-        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
+        :class="{ '!md:mr-2': index + 1 < 5, '!mt-4': index > 0 }"
       >
-        <template #extra>
-          <Tag :color="item.color">{{ item.action }}</Tag>
-        </template>
+          <div>
+            <div class="  flex mt-1 ">
+              <Icon :icon="item.icon" :size="60" />
+              <div class="  text-color">
+                <span  class="px-2">总{{ item.title }}</span>
+               <div>
+                 <CountTo :startVal="1" :endVal="item.value" class="text-2xl font-bold text-color px-2 "/>
+                 <div>
 
-        <div class="py-4 px-4 flex justify-between items-center">
-          <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
-          <Icon :icon="item.icon" :size="40" />
-        </div>
-
-        <div class="p-2 px-4 flex justify-between">
-          <span>总{{ item.title }}</span>
-          <CountTo prefix="$" :startVal="1" :endVal="item.total" />
-        </div>
+                 </div>
+               </div>
+                <div class="flex items-center">
+<!--                  <CountTo prefix="较上月:" :startVal="1" :endVal="item.total"/>-->
+                  <span>较上月:{{item.total}}</span>
+                  <Icon icon="ant-design:arrow-up-outlined" color="#00C853" />
+                </div>
+              </div>
+            </div>
+          </div>
       </Card>
     </template>
   </div>
@@ -37,3 +45,13 @@
     },
   });
 </script>
+
+<style scoped>
+.text-color{
+  color: #666666;
+}
+.text-colo{
+  color: #00C853;
+}
+
+</style>

src/views/dashboard/analysis/components/SalesProductPie.vue

 <template>
-  <Card title="成交占比" :loading="loading">
+  <Card title="成交占比" :loading="loading" size="small">
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>

src/views/dashboard/analysis/components/VisitSource.vue

 <template>
-  <Card title="访问来源" :loading="loading">
+  <Card title="访问来源" :loading="loading" size="small">
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>

src/views/dashboard/analysis/data.ts

@@ -9,35 +9,43 @@ export interface GrowCardItem {
 
 export const growCardList: GrowCardItem[] = [
   {
-    title: '访问数',
+    title: '自建+委托建设',
     icon: 'visit-count|svg',
-    value: 2000,
+    value: 200,
     total: 120000,
-    color: 'green',
+    color: '#FB6260',
     action: '月',
   },
   {
-    title: '成交额',
+    title: '代建',
     icon: 'total-sales|svg',
-    value: 20000,
+    value: 124,
     total: 500000,
-    color: 'blue',
+    color: '#0099FF',
     action: '月',
   },
   {
-    title: '下载数',
+    title: '承建',
     icon: 'download-count|svg',
-    value: 8000,
+    value: 65,
     total: 120000,
-    color: 'orange',
+    color: '#8167F5',
     action: '周',
   },
   {
-    title: '成交数',
+    title: '储备项目',
     icon: 'transaction|svg',
-    value: 5000,
+    value: 60,
     total: 50000,
-    color: 'purple',
+    color: '#51D351',
     action: '年',
   },
+  {
+    title: '项目总数',
+    icon: 'transaction|svg',
+    value: 1200,
+    total: 50000,
+    color: '#FF7A8C',
+    action: '年',
+  }
 ];

src/views/dashboard/analysis/index.vue

 <template>
   <div class="p-4">
     <GrowCard :loading="loading" class="enter-y" />
-    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
-    <div class="md:flex enter-y">
+<!--    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />-->
+    <div class="md:flex enter-y p-3">
+<!--      形象进度占比-->
+      <BasicBar class="md:w-1/3 w-full" :loading="loading" />
+      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
+      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
+    </div>
+    <div class="md:flex enter-y  p-3">
       <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
       <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
       <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
@@ -13,6 +19,7 @@
   import { ref } from 'vue';
   import GrowCard from './components/GrowCard.vue';
   import SiteAnalysis from './components/SiteAnalysis.vue';
+  import BasicBar from "@/views/dashboard/analysis/components/BasicBar.vue";
   import VisitSource from './components/VisitSource.vue';
   import VisitRadar from './components/VisitRadar.vue';
   import SalesProductPie from './components/SalesProductPie.vue';

src/views/settlementManagement/data.tsx

@@ -3,56 +3,46 @@ import { h } from 'vue';
 import { Switch } from 'ant-design-vue';
 import { setRoleStatus } from '@/api/demo/system';
 import { useMessage } from '@/hooks/web/useMessage';
-
-
 type CheckedType = boolean | string | number;
-export const columns: (
-  | { dataIndex: string; width: number; title: string }
-  | { dataIndex: string; width: number; title: string }
-  | { dataIndex: string; width: number; title: string }
-  | { dataIndex: string; width: number; title: string }
-  | { dataIndex: string; width: number; title: string }
-  | { dataIndex: string; width: number; title: string }
-  | { dataIndex: string; width: number; title: string }
-)[] = [
+export const columns: BasicColumn[] = [
   {
     title: '填报周期',
-    dataIndex: 'project_name',
+    dataIndex: 'yearQuarter',
     width: 200,
   },
   {
     title: '项目数量',
-    dataIndex: 'implementing_entity',
+    dataIndex: 'uniqueProjectCount',
     width: 180,
   },
   {
     title: '公司名称',
-    dataIndex: 'construction_mode',
+    dataIndex: 'companyName',
     width: 180,
   },
   {
     title: '最新更新人',
-    dataIndex: 'project_type',
+    dataIndex: 'updateBy',
     width: 180,
   },
   {
     title: '最新更新时间',
-    dataIndex: 'funding_source',
+    dataIndex: 'updateTime',
     width: 180,
   },
   {
     title: '审核状态',
-    dataIndex: 'construction_purpose',
+    dataIndex: 'status',
     width: 180,
   },
   {
     title: '审核人',
-    dataIndex: '国construction_scale',
+    dataIndex: 'auditor',
     width: 180,
   },
   {
     title: '审核时间',
-    dataIndex: '国construction_scale',
+    dataIndex: 'auditTime',
     width: 180,
   },
 ];

src/views/settlementManagement/index.vue

@@ -5,6 +5,12 @@
         <a-button type="primary" @click="addSettlement"> 新建结算管理 </a-button>
       </template>
       <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'status'">
+          <Tag color="warning" v-if="record.status == '0'">  未审核 </Tag>
+        </template>
+        <template v-if="column.key === 'status'">
+          <Tag color="warning" v-if="record.status == '1'">  已审核 </Tag>
+        </template>
         <template v-if="column.key === 'action'">
           <TableAction
               :actions="[
@@ -39,14 +45,12 @@ import { getSettlementManageList } from '@/api/project/settlementManage';
 import { columns, searchFormSchema } from './data';
 import { useDrawer } from '@/components/Drawer';
 import {router} from "@/router";
+import {Tag} from "ant-design-vue";
 
 defineOptions({ name: 'SettlementManagement' });
-
-
 const [registerDrawer, { openDrawer }] = useDrawer();
 const [registerTable, { reload }] = useTable({
   api: getSettlementManageList,
-  title: '123',
   columns,
   formConfig: {
     labelWidth: 120,

src/views/settlementManagement/settlementManageEdit.vue

 <template>
+  <div class="m-4">
+    <PageCard >
+      <BasicForm
+          :labelWidth="100"
+          :schemas="schemas"
+          :actionColOptions="{ span: 24 }"
+          @submit="handleSubmit"
+      />
+    </PageCard>
+    <div  class="create-title">
+       <AButton>
+         <template>
+           <Icon icon="total-sales"></Icon>
+         </template>
+         添加合同</AButton>
 
+    </div>
+  </div>
 </template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { BasicForm, FormSchema } from '/@/components/Form';
+import { CollapseContainer } from '/@/components/Container';
+import { useMessage } from '/@/hooks/web/useMessage';
+import PageCard from "@/components/Page/src/PageCard.vue";
+import CardList from "@/components/CardList/src/CardList.vue";
+import Icon from "@/components/Icon/Icon.vue";
+const schemas: FormSchema[] = [
+  {
+    field: 'field',
+    component: 'Input',
+    label: '字段1',
+    colProps: {
+      span: 10,
+    },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '自定义placeholder',
+      onChange: (e) => {
+        console.log(e);
+      },
+    },
+  },
+];
 
-<script>
-export default {
-  name: "settlementManageEdit"
-}
+export default defineComponent({
+  components: {Icon, CardList, PageCard, BasicForm, CollapseContainer },
+  setup() {
+    const { createMessage } = useMessage();
+    return {
+      schemas,
+      handleSubmit: (values: any) => {
+        createMessage.success('click search,values:' + JSON.stringify(values));
+      },
+    };
+  },
+});
 </script>
+<style scoped >
+.create-title{
+  width: 100%;
+  height: 20%;
+  background-color: #00feff;
+}
 
-<style scoped>
 
-</style>
+</style>
\ No newline at end of file