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

<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>

<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="flex-1 min-w-60 sticky right-0 top-9">
      <div class="border border-gray-200 rounded w-3/4 text-sm text-gray-500">
        <div class="p-2 bg-sky-100 border-l-2 border-blue-700">仅本人</div>
        <div class="p-2">本人及下属</div>
        <div class="p-2">仅本部门</div>
        <div class="p-2">本部门及下属</div>
      </div>
      <div class="border border-gray-200 rounded text-sm text-gray-500 mt-4">
        <div class="p-2 bg-sky-100 border-l-2 border-blue-700">本月</div>
        <div class="p-2">本周</div>
        <div class="p-2">本年</div>
        <div class="p-2">
          <div>自定义</div>
          <el-date-picker
            type="daterange"
            class="max-w-full mt-2"
          ></el-date-picker>
        </div>
      </div>
    </nav>
  </div>
</template>