大小写改动导致丢失的首页

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

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

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

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

src/views/dashboard/Analysis/components/SiteAnalysis.vue

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

src/views/dashboard/Analysis/components/VisitAnalysis.vue

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

src/views/dashboard/Analysis/components/VisitAnalysisBar.vue

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

src/views/dashboard/Analysis/components/VisitRadar.vue

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

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

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

src/views/dashboard/Analysis/components/props.ts

@@ -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',
+  },
+};

src/views/dashboard/Analysis/data.ts

@@ -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,
+    }
+};

src/views/dashboard/Analysis/index.vue

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