|
@@ -1,42 +1,33 @@
|
|
|
-<template>
|
|
|
- <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>
|
|
|
+import { ref, reactive, onMounted, watchEffect } from 'vue';
|
|
|
+
|
|
|
+import Echarts from '@/components/ReEcharts/index.vue';
|
|
|
+import { EChartsOption } from 'echarts';
|
|
|
+
|
|
|
+const chartOptions: EChartsOption = {
|
|
|
+ grid: { bottom: 30 },
|
|
|
+ legend: {},
|
|
|
+ tooltip: {},
|
|
|
+ dataset: {
|
|
|
+ dimensions: ['product', '2015', '2016', '2017'],
|
|
|
+ source: [
|
|
|
+ { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
|
|
|
+ { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
|
|
|
+ { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
|
|
|
+ { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ xAxis: { type: 'category' },
|
|
|
+ yAxis: {},
|
|
|
+ // Declare several bar series, each will be mapped
|
|
|
+ // to a column of dataset.source by default.
|
|
|
+ series: [
|
|
|
+ { type: 'bar', barWidth: 20 },
|
|
|
+ { type: 'bar', barWidth: 20 },
|
|
|
+ { type: 'bar', barWidth: 20 }
|
|
|
+ ]
|
|
|
+};
|
|
|
+
|
|
|
const dateOptions = [
|
|
|
{ label: '今天', value: '1' },
|
|
|
{ label: '昨天', value: '2' },
|
|
@@ -71,4 +62,48 @@ const dataSource = [
|
|
|
];
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<template>
|
|
|
+ <div class="m-5 bg-white h-full p-4 rounded">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <el-form class="flex gap-4">
|
|
|
+ <el-form-item class="w-28">
|
|
|
+ <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-28">
|
|
|
+ <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>
|
|
|
+ <el-tabs type="card">
|
|
|
+ <el-tab-pane label="客户总量分析" name="first" />
|
|
|
+ <el-tab-pane label="客户转化率分析" name="first" />
|
|
|
+ <el-tab-pane label="合同数量分析" name="first" />
|
|
|
+ </el-tabs>
|
|
|
+ <!-- <span class="mr-12 font-bold text-gray-900">客户总量分析</span> -->
|
|
|
+ </div>
|
|
|
+ <div class="h-96">
|
|
|
+ <Echarts :option="chartOptions"></Echarts>
|
|
|
+ </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>
|