add home page

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/analysis/components/Divider.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="relative">
+    <div class="absolute inset-x-0 border-b border-gray-200" />
+    <div class="relative flex items-center">
+      <span class="absolute bg-white pr-2 text-sm font-medium">{{
+        title
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+}>();
+</script>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/analysis/components/SimpleCard.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    class="bg-gray-200 rounded-sm p-2 flex flex-col gap-1 text-xs text-gray-600"
+  >
+    <span>转成交易</span>
+    <span class="text-gray-900">
+      <span>{{ 1 }}</span>
+      {{ '个' }}
+    </span>
+  </div>
+</template>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/analysis/components/TrendCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="border-gray-200 border rounded p-3 flex flex-row justify-between">
+    <div class="flex flex-col justify-between text-gray-500 text-xs gap-1">
+      <div class="">{{ title }}</div>
+      <div class="text-gray-800">
+        <span class="text-sm">{{ number }}</span>
+        {{ unit }}
+      </div>
+      <div>
+        <span>较上月 </span>
+        <span class="text-xs text-red-600 inline-flex items-center">
+          <span>100%</span>
+          <el-icon><Top /></el-icon>
+        </span>
+      </div>
+    </div>
+    <div>11</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+type Props = {
+  title: string;
+  number: number;
+  unit: '个' | '人' | '元';
+};
+
+defineProps<Props>();
+</script>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/analysis/index.vue

@@ -1,17 +1,109 @@
-<template>
-  <div class="w-full h-full flex items-center justify-center analysis">
-    数据分析页面
-  </div>
-</template>
-
 <script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import TrendCard from './components/TrendCard.vue';
+import SimpleCard from './components/SimpleCard.vue';
+import Divider from './components/Divider.vue';
+import Echarts from '@/components/ReEcharts/index.vue';
+import { EChartsOption } from 'echarts';
 
+const prompt = reactive({ summary: {}, stage: {}, bulletin: {} });
+
+const option: EChartsOption = {
+  grid: { top: 0, bottom: 20, left: 60 },
+  yAxis: {
+    type: 'category',
+    data: ['验证客户', '赢单', '输单']
+  },
+  xAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      barWidth: 20,
+      data: [0, 20, 40, 60, 80, 100],
+      type: 'bar'
+    }
+  ]
+};
 </script>
 
-<style lang="scss" scoped>
-.analysis {
-  font-size: 40px;
-  color: #999;
-  font-weight: bold;
-}
-</style>
+<template>
+  <div
+    class="m-5 bg-white min-h-full p-4 rounded relative flex gap-12 items-start"
+  >
+    <section class="flex-[4]">
+      <div class="flex gap-3 mb-4">
+        <div class="w-40">
+          <el-select size="small"></el-select>
+        </div>
+        <div class="w-40">
+          <el-select size="small"></el-select>
+        </div>
+      </div>
+      <div class="border-gray-200 border rounded p-3">
+        <div class="flex gap-1.5 items-center mb-3">
+          <div class="text-sm font-medium">销售简报</div>
+          <el-icon><QuestionFilled class="text-gray-500 text-sm" /></el-icon>
+        </div>
+        <div class="grid xl:grid-cols-4 lg:grid-cols-3 grid-cols-2 gap-4">
+          <TrendCard title="新增客户" :number="4" unit="人" />
+          <TrendCard title="新增联系人" :number="4" unit="人" />
+          <TrendCard title="新增商机" :number="4" unit="个" />
+          <TrendCard title="新增销售订单" :number="4" unit="个" />
+          <TrendCard title="销售订单金额" :number="4" unit="元" />
+          <TrendCard title="商机金额" :number="4" unit="元" />
+          <TrendCard title="新增线索" :number="4" unit="个" />
+        </div>
+      </div>
+      <div class="my-8 flex gap-4 items-start">
+        <div class="border-gray-200 border rounded p-3 flex-1">
+          <div class="text-sm font-medium">数据汇总</div>
+          <div class="flex gap-3 mb-8 mt-2">
+            <div class="w-40">
+              <el-select size="small"></el-select>
+            </div>
+            <div class="w-40">
+              <el-select size="small"></el-select>
+            </div>
+          </div>
+          <Divider title="客户汇总" />
+          <div class="my-6 grid grid-cols-4 gap-2">
+            <SimpleCard />
+            <SimpleCard />
+            <SimpleCard />
+            <SimpleCard />
+          </div>
+          <Divider title="商机汇总" />
+          <div class="my-6 grid grid-cols-4 gap-2">
+            <SimpleCard />
+            <SimpleCard />
+            <SimpleCard />
+            <SimpleCard />
+          </div>
+          <Divider title="线索汇总" />
+          <div class="my-6 grid grid-cols-4 gap-2">
+            <SimpleCard />
+            <SimpleCard />
+            <SimpleCard />
+            <SimpleCard />
+          </div>
+        </div>
+        <div class="border-gray-200 border rounded p-3 flex-1">
+          <div class="text-sm font-medium">商机阶段</div>
+          <div class="flex gap-3 mb-8 mt-2">
+            <div class="w-40">
+              <el-select size="small"></el-select>
+            </div>
+            <div class="w-40">
+              <el-select size="small"></el-select>
+            </div>
+          </div>
+          <div class="h-60">
+            <Echarts :option="option"></Echarts>
+          </div>
+        </div>
+      </div>
+    </section>
+    <nav class="bg-green-200 flex-1 min-w-60">222</nav>
+  </div>
+</template>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/corpreport/index.vue

@@ -1,11 +1,74 @@
 <template>
-  <div>
-    corpreport
+  <div class="m-5 bg-white h-full p-4 rounded">
+    <div class="flex justify-start">
+      <span class="mr-12 font-bold text-gray-900">客户总量分析</span>
+      <el-form class="flex gap-4">
+        <el-form-item class="w-52">
+          <el-select>
+            <el-option
+              v-for="date in dateOptions"
+              :key="date.value"
+              :label="date.label"
+              :value="date.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="w-52">
+          <el-select>
+            <el-option label="按部门" value="1" />
+            <el-option label="按员工" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="w-52">
+          <el-select></el-select>
+        </el-form-item>
+        <el-button type="primary">搜索</el-button>
+      </el-form>
+    </div>
+    <el-table :data="dataSource">
+      <el-table-column prop="date" label="员工姓名" />
+      <el-table-column prop="date" label="新增客户数" />
+      <el-table-column prop="date" label="成交客户数" />
+      <el-table-column prop="date" label="客户成交率（%）" />
+      <el-table-column prop="date" label="合同总金额" />
+      <el-table-column prop="date" label="回款金额" />
+    </el-table>
   </div>
 </template>
 
 <script lang="ts" setup>
-
+const dateOptions = [
+  { label: '今天', value: '1' },
+  { label: '昨天', value: '2' },
+  { label: '本周', value: '3' },
+  { label: '上周', value: '4' },
+  { label: '本月', value: '5' },
+  { label: '上月', value: '6' },
+  { label: '本季度', value: '7' },
+  { label: '上季度', value: '8' }
+];
+const dataSource = [
+  {
+    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'
+  }
+];
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>