大小写改动导致丢失的首页
zhangdaiscott
parent
d0517b81c9
commit
c2cbe510cc
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div class="md:flex">
|
||||||
|
<template v-for="(item, index) in growCardList" :key="item.title">
|
||||||
|
<Card
|
||||||
|
size="small"
|
||||||
|
:loading="loading"
|
||||||
|
:title="item.title"
|
||||||
|
class="md:w-1/4 w-full !md:mt-0 !mt-4"
|
||||||
|
:class="[index + 1 < 4 && '!md:mr-4']"
|
||||||
|
:canExpan="false"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<Tag :color="item.color">{{ item.action }}</Tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="py-4 px-4 flex justify-between">
|
||||||
|
<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>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { CountTo } from '/@/components/CountTo/index';
|
||||||
|
import { Icon } from '/@/components/Icon';
|
||||||
|
import { Tag, Card } from 'ant-design-vue';
|
||||||
|
import { growCardList } from '../data';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<Card title="成交占比" :loading="loading">
|
||||||
|
<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({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '80%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
|
||||||
|
data: [
|
||||||
|
{ value: 500, name: '电子产品' },
|
||||||
|
{ value: 310, name: '服装' },
|
||||||
|
{ value: 274, name: '化妆品' },
|
||||||
|
{ value: 400, name: '家居' },
|
||||||
|
].sort(function (a, b) {
|
||||||
|
return a.value - b.value;
|
||||||
|
}),
|
||||||
|
roseType: 'radius',
|
||||||
|
animationType: 'scale',
|
||||||
|
animationEasing: 'exponentialInOut',
|
||||||
|
animationDelay: function () {
|
||||||
|
return Math.random() * 400;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<Card
|
||||||
|
:tab-list="tabListTitle"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:active-tab-key="activeKey"
|
||||||
|
@tabChange="onTabChange"
|
||||||
|
>
|
||||||
|
<p v-if="activeKey === 'tab1'">
|
||||||
|
<VisitAnalysis />
|
||||||
|
</p>
|
||||||
|
<p v-if="activeKey === 'tab2'">
|
||||||
|
<VisitAnalysisBar />
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { Card } from 'ant-design-vue';
|
||||||
|
import VisitAnalysis from './VisitAnalysis.vue';
|
||||||
|
import VisitAnalysisBar from './VisitAnalysisBar.vue';
|
||||||
|
|
||||||
|
const activeKey = ref('tab1');
|
||||||
|
|
||||||
|
const tabListTitle = [
|
||||||
|
{
|
||||||
|
key: 'tab1',
|
||||||
|
tab: '流量趋势',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'tab2',
|
||||||
|
tab: '访问量',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function onTabChange(key) {
|
||||||
|
activeKey.value = key;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref, Ref } from 'vue';
|
||||||
|
import { useECharts } from '/@/hooks/web/useECharts';
|
||||||
|
import { basicProps } from './props';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
...basicProps,
|
||||||
|
});
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setOptions({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: '#019680',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
'6:00',
|
||||||
|
'7:00',
|
||||||
|
'8:00',
|
||||||
|
'9:00',
|
||||||
|
'10:00',
|
||||||
|
'11:00',
|
||||||
|
'12:00',
|
||||||
|
'13:00',
|
||||||
|
'14:00',
|
||||||
|
'15:00',
|
||||||
|
'16:00',
|
||||||
|
'17:00',
|
||||||
|
'18:00',
|
||||||
|
'19:00',
|
||||||
|
'20:00',
|
||||||
|
'21:00',
|
||||||
|
'22:00',
|
||||||
|
'23:00',
|
||||||
|
],
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
type: 'solid',
|
||||||
|
color: 'rgba(226,226,226,0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
max: 80000,
|
||||||
|
splitNumber: 4,
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
smooth: true,
|
||||||
|
data: [
|
||||||
|
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222,
|
||||||
|
11111, 4000, 2000, 500, 333, 222, 111,
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#5ab1ef',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
smooth: true,
|
||||||
|
data: [
|
||||||
|
33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
|
||||||
|
198, 60, 30, 22, 11,
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#019680',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref, Ref } from 'vue';
|
||||||
|
import { useECharts } from '/@/hooks/web/useECharts';
|
||||||
|
import { basicProps } from './props';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
...basicProps,
|
||||||
|
});
|
||||||
|
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||||
|
onMounted(() => {
|
||||||
|
setOptions({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: '#019680',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'1月',
|
||||||
|
'2月',
|
||||||
|
'3月',
|
||||||
|
'4月',
|
||||||
|
'5月',
|
||||||
|
'6月',
|
||||||
|
'7月',
|
||||||
|
'8月',
|
||||||
|
'9月',
|
||||||
|
'10月',
|
||||||
|
'11月',
|
||||||
|
'12月',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
max: 8000,
|
||||||
|
splitNumber: 4,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 80,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<template>
|
||||||
|
<Card title="转化率" :loading="loading">
|
||||||
|
<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({
|
||||||
|
legend: {
|
||||||
|
bottom: 0,
|
||||||
|
data: ['访问', '购买'],
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
radar: {
|
||||||
|
radius: '60%',
|
||||||
|
splitNumber: 8,
|
||||||
|
indicator: [
|
||||||
|
{
|
||||||
|
text: '电脑',
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '充电器',
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '耳机',
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '手机',
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Ipad',
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '耳机',
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'radar',
|
||||||
|
symbolSize: 0,
|
||||||
|
areaStyle: {
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowColor: 'rgba(0,0,0,.2)',
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 10,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: [90, 50, 86, 40, 50, 20],
|
||||||
|
name: '访问',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#b6a2de',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [70, 75, 70, 76, 20, 85],
|
||||||
|
name: '购买',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#5ab1ef',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
<template>
|
||||||
|
<Card title="访问来源" :loading="loading">
|
||||||
|
<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({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom: '1%',
|
||||||
|
left: 'center',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: '12',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '搜索引擎' },
|
||||||
|
{ value: 735, name: '直接访问' },
|
||||||
|
{ value: 580, name: '邮件营销' },
|
||||||
|
{ value: 484, name: '联盟广告' },
|
||||||
|
],
|
||||||
|
animationType: 'scale',
|
||||||
|
animationEasing: 'exponentialInOut',
|
||||||
|
animationDelay: function () {
|
||||||
|
return Math.random() * 100;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
|
||||||
|
export interface BasicProps {
|
||||||
|
width: string;
|
||||||
|
height: string;
|
||||||
|
}
|
||||||
|
export const basicProps = {
|
||||||
|
width: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '280px',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
export interface GrowCardItem {
|
||||||
|
icon: string;
|
||||||
|
title: string;
|
||||||
|
value?: number;
|
||||||
|
total: number;
|
||||||
|
color?: string;
|
||||||
|
action?: string;
|
||||||
|
footer?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const growCardList: GrowCardItem[] = [
|
||||||
|
{
|
||||||
|
title: '访问数',
|
||||||
|
icon: 'visit-count|svg',
|
||||||
|
value: 2000,
|
||||||
|
total: 120000,
|
||||||
|
color: 'green',
|
||||||
|
action: '月',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '成交额',
|
||||||
|
icon: 'total-sales|svg',
|
||||||
|
value: 20000,
|
||||||
|
total: 500000,
|
||||||
|
color: 'blue',
|
||||||
|
action: '月',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '下载数',
|
||||||
|
icon: 'download-count|svg',
|
||||||
|
value: 8000,
|
||||||
|
total: 120000,
|
||||||
|
color: 'orange',
|
||||||
|
action: '周',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '成交数',
|
||||||
|
icon: 'transaction|svg',
|
||||||
|
value: 5000,
|
||||||
|
total: 50000,
|
||||||
|
color: 'purple',
|
||||||
|
action: '年',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const chartCardList: GrowCardItem[] = [
|
||||||
|
{
|
||||||
|
title: '总销售额',
|
||||||
|
icon: 'visit-count|svg',
|
||||||
|
total: 126560,
|
||||||
|
value: 234.56,
|
||||||
|
footer: '日均销售额',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '订单量',
|
||||||
|
icon: 'total-sales|svg',
|
||||||
|
value: 1234,
|
||||||
|
total: 8846,
|
||||||
|
color: 'blue',
|
||||||
|
footer: '日订单量',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '支付笔数',
|
||||||
|
icon: 'download-count|svg',
|
||||||
|
value: 60,
|
||||||
|
total: 6560,
|
||||||
|
color: 'orange',
|
||||||
|
footer: '转化率',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '运营活动效果',
|
||||||
|
icon: 'transaction|svg',
|
||||||
|
total: 78,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export const bdcCardList: GrowCardItem[] = [
|
||||||
|
{
|
||||||
|
title: '受理量',
|
||||||
|
icon: 'ant-design:info-circle-outlined',
|
||||||
|
total: 100,
|
||||||
|
value: 60,
|
||||||
|
footer: '今日受理量',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '办结量',
|
||||||
|
icon: 'ant-design:info-circle-outlined',
|
||||||
|
value: 54,
|
||||||
|
total: 87,
|
||||||
|
color: 'blue',
|
||||||
|
footer: '今日办结量',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户受理量',
|
||||||
|
icon: 'ant-design:info-circle-outlined',
|
||||||
|
value: 13,
|
||||||
|
total: 15,
|
||||||
|
color: 'orange',
|
||||||
|
footer: '用户今日受理量',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户办结量',
|
||||||
|
icon: 'ant-design:info-circle-outlined',
|
||||||
|
total: 9,
|
||||||
|
value: 7,
|
||||||
|
footer: '用户今日办结量',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const table = {
|
||||||
|
dataSource : [
|
||||||
|
{reBizCode:"1",type:"转移登记",acceptBy:'张三',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:60},
|
||||||
|
{reBizCode:"2",type:"抵押登记",acceptBy:'李四',acceptDate:"2019-01-23",curNode:"领导审核",flowRate:30},
|
||||||
|
{reBizCode:"3",type:"转移登记",acceptBy:'王武',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:20},
|
||||||
|
{reBizCode:"4",type:"转移登记",acceptBy:'赵楼',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:80},
|
||||||
|
{reBizCode:"5",type:"转移登记",acceptBy:'钱就',acceptDate:"2019-12-12",curNode:"任务分派",flowRate:90},
|
||||||
|
{reBizCode:"6",type:"转移登记",acceptBy:'孙吧',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||||||
|
{reBizCode:"7",type:"抵押登记",acceptBy:'周大',acceptDate:"2019-04-13",curNode:"任务分派",flowRate:100},
|
||||||
|
{reBizCode:"8",type:"抵押登记",acceptBy:'吴二',acceptDate:"2019-05-09",curNode:"任务上报",flowRate:50},
|
||||||
|
{reBizCode:"9",type:"抵押登记",acceptBy:'郑爽',acceptDate:"2019-07-12",curNode:"任务处理",flowRate:63},
|
||||||
|
{reBizCode:"20",type:"抵押登记",acceptBy:'林有',acceptDate:"2019-12-12",curNode:"任务打回",flowRate:59},
|
||||||
|
{reBizCode:"11",type:"转移登记",acceptBy:'码云',acceptDate:"2019-09-10",curNode:"任务签收",flowRate:87}
|
||||||
|
],
|
||||||
|
columns: [{
|
||||||
|
title: '业务号',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'reBizCode'
|
||||||
|
},{
|
||||||
|
title: '业务类型',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'type'
|
||||||
|
},{
|
||||||
|
title: '受理人',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptBy'
|
||||||
|
},{
|
||||||
|
title: '受理时间',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptDate'
|
||||||
|
},{
|
||||||
|
title: '当前节点',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'curNode'
|
||||||
|
},{
|
||||||
|
title: '办理时长',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'flowRate',
|
||||||
|
slots: { customRender: 'flowRate' }
|
||||||
|
}],
|
||||||
|
ipagination:{
|
||||||
|
current: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
showTotal: (total, range) => {
|
||||||
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||||
|
},
|
||||||
|
showQuickJumper: true,
|
||||||
|
showSizeChanger: true,
|
||||||
|
total: 0,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export const table1 = {
|
||||||
|
dataSource : [
|
||||||
|
{reBizCode:"A001",type:"转移登记",acceptBy:'张四',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:12},
|
||||||
|
{reBizCode:"A002",type:"抵押登记",acceptBy:'李吧',acceptDate:"2019-01-23",curNode:"任务签收",flowRate:3},
|
||||||
|
{reBizCode:"A003",type:"转移登记",acceptBy:'王三',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:24},
|
||||||
|
{reBizCode:"A004",type:"转移登记",acceptBy:'赵二',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:10},
|
||||||
|
{reBizCode:"A005",type:"转移登记",acceptBy:'钱大',acceptDate:"2019-12-12",curNode:"任务签收",flowRate:8},
|
||||||
|
{reBizCode:"A006",type:"转移登记",acceptBy:'孙就',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||||||
|
{reBizCode:"A007",type:"抵押登记",acceptBy:'周晕',acceptDate:"2019-04-13",curNode:"部门审核",flowRate:24},
|
||||||
|
{reBizCode:"A008",type:"抵押登记",acceptBy:'吴有',acceptDate:"2019-05-09",curNode:"部门审核",flowRate:30},
|
||||||
|
{reBizCode:"A009",type:"抵押登记",acceptBy:'郑武',acceptDate:"2019-07-12",curNode:"任务分派",flowRate:1},
|
||||||
|
{reBizCode:"A0010",type:"抵押登记",acceptBy:'林爽',acceptDate:"2019-12-12",curNode:"部门审核",flowRate:16},
|
||||||
|
{reBizCode:"A0011",type:"转移登记",acceptBy:'码楼',acceptDate:"2019-09-10",curNode:"部门审核",flowRate:7},
|
||||||
|
],
|
||||||
|
columns: [{
|
||||||
|
title: '业务号',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'reBizCode'
|
||||||
|
},{
|
||||||
|
title: '受理人',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptBy'
|
||||||
|
},{
|
||||||
|
title: '发起时间',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'acceptDate'
|
||||||
|
},{
|
||||||
|
title: '当前节点',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'curNode'
|
||||||
|
},{
|
||||||
|
title: '超时时间',
|
||||||
|
align:"center",
|
||||||
|
dataIndex: 'flowRate',
|
||||||
|
slots: { customRender: 'flowRate' }
|
||||||
|
}],
|
||||||
|
ipagination:{
|
||||||
|
current: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
showTotal: (total, range) => {
|
||||||
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||||
|
},
|
||||||
|
showQuickJumper: true,
|
||||||
|
showSizeChanger: true,
|
||||||
|
total: 0,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<IndexDef v-if="indexStyle===0"></IndexDef>
|
||||||
|
<IndexChart v-if="indexStyle===1"></IndexChart>
|
||||||
|
<IndexBdc v-if="indexStyle==2"></IndexBdc>
|
||||||
|
<IndexTask v-if="indexStyle==3"></IndexTask>
|
||||||
|
<div style="width: 100%;text-align: right;margin-top: 20px">
|
||||||
|
请选择首页样式：
|
||||||
|
<a-radio-group v-model:value="indexStyle">
|
||||||
|
<a-radio :value="0">默认</a-radio>
|
||||||
|
<a-radio :value="1">销量统计</a-radio>
|
||||||
|
<a-radio :value="2">业务统计</a-radio>
|
||||||
|
<a-radio :value="3">我的任务</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {ref} from 'vue';
|
||||||
|
import IndexDef from './homePage/IndexDef.vue';
|
||||||
|
import IndexChart from './homePage/IndexChart.vue';
|
||||||
|
import IndexBdc from './homePage/IndexBdc.vue';
|
||||||
|
import IndexTask from './homePage/IndexTask.vue';
|
||||||
|
|
||||||
|
const indexStyle = ref(0);
|
||||||
|
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue