fix Bug or esLink formatting

src/views/dashboard/console/components/FluxTrend.vue

@@ -2,110 +2,110 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, Ref } from 'vue';
+  import { defineComponent, onMounted, ref, Ref } from 'vue';
 
-import { useECharts } from '@/hooks/web/useECharts';
+  import { useECharts } from '@/hooks/web/useECharts';
 
-import { basicProps } from './props';
+  import { basicProps } from './props';
 
-export default defineComponent({
-  props: basicProps,
-  setup() {
-    const chartRef = ref<HTMLDivElement | null>(null);
-    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  export default defineComponent({
+    props: basicProps,
+    setup() {
+      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)'],
+      onMounted(() => {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            smooth: true,
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
             data: [
-              111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
-              22222, 11111, 4000, 2000, 500, 333, 222, 111,
+              '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',
             ],
-            type: 'line',
-            areaStyle: {},
-            itemStyle: {
-              color: '#5ab1ef',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                type: 'solid',
+                color: 'rgba(226,226,226,0.5)',
+              },
+            },
+            axisTick: {
+              show: false,
             },
           },
-          {
-            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',
+          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',
+              },
+            },
+          ],
+        });
       });
-    });
-    return { chartRef };
-  },
-});
+      return { chartRef };
+    },
+  });
 </script>

src/views/dashboard/console/components/Icons.ts

@@ -1,25 +1,25 @@
 import {
-    CaretUpOutlined,
-    CaretDownOutlined,
-    UsergroupAddOutlined,
-    BarChartOutlined,
-    ShoppingCartOutlined,
-    AccountBookOutlined,
-    CreditCardOutlined,
-    MailOutlined,
-    TagsOutlined,
-    SettingOutlined
-} from '@vicons/antd'
+  CaretUpOutlined,
+  CaretDownOutlined,
+  UsergroupAddOutlined,
+  BarChartOutlined,
+  ShoppingCartOutlined,
+  AccountBookOutlined,
+  CreditCardOutlined,
+  MailOutlined,
+  TagsOutlined,
+  SettingOutlined,
+} from '@vicons/antd';
 
 export default {
-    CaretUpOutlined,
-    CaretDownOutlined,
-    UsergroupAddOutlined,
-    BarChartOutlined,
-    ShoppingCartOutlined,
-    AccountBookOutlined,
-    CreditCardOutlined,
-    MailOutlined,
-    TagsOutlined,
-    SettingOutlined
-}
+  CaretUpOutlined,
+  CaretDownOutlined,
+  UsergroupAddOutlined,
+  BarChartOutlined,
+  ShoppingCartOutlined,
+  AccountBookOutlined,
+  CreditCardOutlined,
+  MailOutlined,
+  TagsOutlined,
+  SettingOutlined,
+};

src/views/dashboard/console/components/VisiTab.vue

@@ -3,17 +3,12 @@
     <NRow :gutter="24">
       <NCol :span="24">
         <n-card content-style="padding: 0;" :bordered="false">
-          <n-tabs
-              type="line"
-              size="large"
-              :tabs-padding="20"
-              pane-style="padding: 20px;"
-          >
+          <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;">
             <n-tab-pane name="流量趋势">
-              <FluxTrend/>
+              <FluxTrend />
             </n-tab-pane>
             <n-tab-pane name="访问量">
-              <VisitAmount/>
+              <VisitAmount />
             </n-tab-pane>
           </n-tabs>
         </n-card>
@@ -22,15 +17,14 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, Ref } from 'vue';
-import FluxTrend from './FluxTrend.vue'
-import VisitAmount from './VisitAmount.vue'
+  import { defineComponent } from 'vue';
+  import FluxTrend from './FluxTrend.vue';
+  import VisitAmount from './VisitAmount.vue';
 
-export default defineComponent({
-  components: { FluxTrend, VisitAmount },
-  setup() {
-
-    return {};
-  },
-});
+  export default defineComponent({
+    components: { FluxTrend, VisitAmount },
+    setup() {
+      return {};
+    },
+  });
 </script>

src/views/dashboard/console/components/VisitAmount.vue

@@ -2,60 +2,60 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, Ref } from 'vue';
-import { useECharts } from '@/hooks/web/useECharts';
-import { basicProps } from './props';
+  import { defineComponent, onMounted, ref, Ref } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { basicProps } from './props';
 
-export default defineComponent({
-  props: basicProps,
-  setup() {
-    const chartRef = ref<HTMLDivElement | null>(null);
-    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  export default defineComponent({
+    props: basicProps,
+    setup() {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-    onMounted(() => {
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
+      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,
+          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,
+            },
+          ],
+        });
       });
-    });
-    return { chartRef };
-  },
-});
+      return { chartRef };
+    },
+  });
 </script>

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

@@ -1,17 +1,17 @@
 import { PropType } from 'vue';
 
 export interface BasicProps {
-    width: string;
-    height: string;
+  width: string;
+  height: string;
 }
 
 export const basicProps = {
-    width: {
-        type: String as PropType<string>,
-        default: '100%',
-    },
-    height: {
-        type: String as PropType<string>,
-        default: '280px',
-    },
+  width: {
+    type: String as PropType<string>,
+    default: '100%',
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '280px',
+  },
 };

src/views/dashboard/console/console.vue

@@ -1,141 +1,152 @@
 <template>
   <div class="console">
-
     <!--数据卡片-->
     <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8" :cols="4">
       <n-grid-item>
-        <NCard title="访问量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="访问量"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="success">日</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl"/>
+            <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
           </div>
-          <div class="py-1 px-1 flex justify-between ">
+          <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
               日同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
               <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined"/>
+                <component is="CaretUpOutlined" />
               </n-icon>
             </div>
             <div class="text-sn">
               周同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
+              <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
               <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined"/>
+                <component is="CaretDownOutlined" />
               </n-icon>
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 总访问量： </div>
               <div class="text-sn">
-                总访问量：
-              </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" :endVal="visits.amount"/>
+                <CountTo :startVal="1" :endVal="visits.amount" />
               </div>
             </div>
           </template>
         </NCard>
       </n-grid-item>
       <n-grid-item>
-        <NCard title="销售额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="销售额"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="info">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl"/>
+            <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
           </div>
-          <div class="py-2 px-2 flex justify-between ">
+          <div class="py-2 px-2 flex justify-between">
             <div class="text-sn flex-1">
               <n-progress
-                  type="line"
-                  :percentage="saleroom.degree"
-                  :indicator-placement="'inside'"
-                  processing
+                type="line"
+                :percentage="saleroom.degree"
+                :indicator-placement="'inside'"
+                processing
               />
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 总销售额： </div>
               <div class="text-sn">
-                总销售额：
-              </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount"/>
+                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
               </div>
             </div>
           </template>
         </NCard>
       </n-grid-item>
       <n-grid-item>
-        <NCard title="订单量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="订单量"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="warning">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl"/>
+            <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
           </div>
-          <div class="py-1 px-1 flex justify-between ">
+          <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
               日同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
               <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined"/>
+                <component is="CaretUpOutlined" />
               </n-icon>
             </div>
             <div class="text-sn">
               周同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
               <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined"/>
+                <component is="CaretDownOutlined" />
               </n-icon>
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 转化率： </div>
               <div class="text-sn">
-                转化率：
-              </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount"/>
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
               </div>
             </div>
           </template>
         </NCard>
       </n-grid-item>
       <n-grid-item>
-        <NCard title="成交额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="成交额"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="error">月</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl"/>
+            <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
           </div>
-          <div class="py-1 px-1 flex justify-between ">
+          <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
               月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
               <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined"/>
+                <component is="CaretUpOutlined" />
               </n-icon>
             </div>
             <div class="text-sn">
               月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
+              <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
               <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined"/>
+                <component is="CaretDownOutlined" />
               </n-icon>
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 总成交额： </div>
               <div class="text-sn">
-                总成交额：
-              </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="volume.amount"/>
+                <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
               </div>
             </div>
           </template>
@@ -146,18 +157,20 @@
     <!--导航卡片-->
     <div class="mt-4">
       <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8" :cols="8">
-        <n-grid-item v-for="(item,index) in iconList" :key="index">
+        <n-grid-item v-for="(item, index) in iconList" :key="index">
           <NCard content-style="padding-top: 0;" size="small" :bordered="false">
             <template #footer>
               <div class="cursor-pointer">
                 <p class="flex justify-center">
-                     <span>
-                      <n-icon :size="item.size" class="flex-1" :style="{color:`${item.color}`}">
-                        <component :is="item.icon" v-on="item.eventObject || {}"/>
-                      </n-icon>
-                    </span>
+                  <span>
+                    <n-icon :size="item.size" class="flex-1" :style="{ color: `${item.color}` }">
+                      <component :is="item.icon" v-on="item.eventObject || {}" />
+                    </n-icon>
+                  </span>
                 </p>
-                <p class="flex justify-center"><span>{{ item.title }}</span></p>
+                <p class="flex justify-center"
+                  ><span>{{ item.title }}</span></p
+                >
               </div>
             </template>
           </NCard>
@@ -166,128 +179,117 @@
     </div>
 
     <!--访问量 | 流量趋势-->
-    <VisiTab></VisiTab>
-
+    <VisiTab />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
-import Icons from './components/Icons'
-import VisiTab from './components/VisiTab.vue'
-import { CountTo } from '@/components/CountTo/index'
-import { getConsoleInfo } from '@/api/dashboard/console'
+  import { defineComponent, onMounted, reactive, toRefs } from 'vue';
+  import Icons from './components/Icons';
+  import VisiTab from './components/VisiTab.vue';
+  import { CountTo } from '@/components/CountTo/index';
+  import { getConsoleInfo } from '@/api/dashboard/console';
 
-export default defineComponent({
-  components: { ...Icons, VisiTab, CountTo },
-  setup() {
-    const state = reactive({
-      cardHeaderStyle: {
-        'border-bottom': '1px solid #eee',
-        'font-size': '16px'
-      },
-      visits: {},
-      saleroom: {},
-      orderLarge: {},
-      volume: {},
-    })
-    // 图标列表
-    const iconList = [
-      {
-        icon: 'UsergroupAddOutlined',
-        size: '32',
-        title: '用户',
-        color: '#69c0ff',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'BarChartOutlined',
-        size: '32',
-        title: '分析',
-        color: '#69c0ff',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'ShoppingCartOutlined',
-        size: '32',
-        title: '商品',
-        color: '#ff9c6e',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'AccountBookOutlined',
-        size: '32',
-        title: '订单',
-        color: '#b37feb',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'CreditCardOutlined',
-        size: '32',
-        title: '票据',
-        color: '#ffd666',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'MailOutlined',
-        size: '32',
-        title: '消息',
-        color: '#5cdbd3',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'TagsOutlined',
-        size: '32',
-        title: '标签',
-        color: '#ff85c0',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'SettingOutlined',
-        size: '32',
-        title: '配置',
-        color: '#ffc069',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-    ]
-    onMounted(async () => {
-      const { visits, saleroom, orderLarge, volume } = await getConsoleInfo()
-      state.visits = visits
-      state.saleroom = saleroom
-      state.orderLarge = orderLarge
-      state.volume = volume
-    })
-    return {
-      ...toRefs(state),
-      iconList
-    }
-  }
-})
+  export default defineComponent({
+    components: { ...Icons, VisiTab, CountTo },
+    setup() {
+      const state = reactive({
+        cardHeaderStyle: {
+          'border-bottom': '1px solid #eee',
+          'font-size': '16px',
+        },
+        visits: {},
+        saleroom: {},
+        orderLarge: {},
+        volume: {},
+      });
+      // 图标列表
+      const iconList = [
+        {
+          icon: 'UsergroupAddOutlined',
+          size: '32',
+          title: '用户',
+          color: '#69c0ff',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'BarChartOutlined',
+          size: '32',
+          title: '分析',
+          color: '#69c0ff',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'ShoppingCartOutlined',
+          size: '32',
+          title: '商品',
+          color: '#ff9c6e',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'AccountBookOutlined',
+          size: '32',
+          title: '订单',
+          color: '#b37feb',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'CreditCardOutlined',
+          size: '32',
+          title: '票据',
+          color: '#ffd666',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'MailOutlined',
+          size: '32',
+          title: '消息',
+          color: '#5cdbd3',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'TagsOutlined',
+          size: '32',
+          title: '标签',
+          color: '#ff85c0',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'SettingOutlined',
+          size: '32',
+          title: '配置',
+          color: '#ffc069',
+          eventObject: {
+            click: () => {},
+          },
+        },
+      ];
+      onMounted(async () => {
+        const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
+        state.visits = visits;
+        state.saleroom = saleroom;
+        state.orderLarge = orderLarge;
+        state.volume = volume;
+      });
+      return {
+        ...toRefs(state),
+        iconList,
+      };
+    },
+  });
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/views/dashboard/monitor/monitor.vue

@@ -3,16 +3,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+  import { defineComponent } from 'vue';
 
-export default defineComponent({
-  components: {},
-  setup() {
-    return {}
-  }
-})
+  export default defineComponent({
+    components: {},
+    setup() {
+      return {};
+    },
+  });
 </script>
 
-<style lang='less' scoped>
-
-</style>
+<style lang="less" scoped></style>

src/views/dashboard/workplace/workplace.vue

@@ -6,11 +6,7 @@
           <n-gi>
             <div class="flex items-center">
               <div>
-                <n-avatar
-                    circle
-                    :size="64"
-                    :src="schoolboy"
-                />
+                <n-avatar circle :size="64" :src="schoolboy" />
               </div>
               <div>
                 <p class="px-4 text-xl">早安，Ah jung，开始您一天的工作吧！</p>
@@ -37,15 +33,32 @@
         </n-grid>
       </n-card>
     </div>
-    <n-grid class="mt-4" cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9" :cols="2">
+    <n-grid
+      class="mt-4"
+      cols="2 s:1 m:1 l:2 xl:2 2xl:2"
+      responsive="screen"
+      :x-gap="12"
+      :y-gap="9"
+      :cols="2"
+    >
       <n-gi>
-        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small" title="项目">
+        <n-card
+          :segmented="{ content: 'hard' }"
+          content-style="padding: 0;"
+          :bordered="false"
+          size="small"
+          title="项目"
+        >
           <div class="flex flex-wrap project-card">
-            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
               <div class="flex">
                 <span>
                   <n-icon size="30">
-                    <GithubOutlined/>
+                    <GithubOutlined />
                   </n-icon>
                 </span>
                 <span class="text-lg ml-4">Github</span>
@@ -53,169 +66,159 @@
               <div class="flex mt-2 h-10 text-gray-400">
                 是一个面向开源及私有软件项目的托管平台。
               </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                开源君，2021-07-04
-              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 开源君，2021-07-04 </div>
             </n-card>
-            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
               <div class="flex">
                 <span>
                   <n-icon size="30" style="color: #42b983">
-                    <LogoVue/>
+                    <LogoVue />
                   </n-icon>
                 </span>
                 <span class="text-lg ml-4">Vue</span>
               </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                渐进式 JavaScript 框架
-              </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                学不动也要学，2021-07-04
-              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 渐进式 JavaScript 框架 </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 学不动也要学，2021-07-04 </div>
             </n-card>
-            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
               <div class="flex">
                 <span>
                   <n-icon size="30" style="color: #e44c27">
-                    <Html5Outlined/>
+                    <Html5Outlined />
                   </n-icon>
                 </span>
                 <span class="text-lg ml-4">Html5</span>
               </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                HTML5是互联网的下一代标准。
-              </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                撸码也是一种艺术 2021-04-01
-              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> HTML5是互联网的下一代标准。 </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 撸码也是一种艺术 2021-04-01 </div>
             </n-card>
-            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
               <div class="flex">
                 <span>
                   <n-icon size="30" style="color: #dd0031">
-                    <LogoAngular/>
+                    <LogoAngular />
                   </n-icon>
                 </span>
                 <span class="text-lg ml-4">Angular</span>
               </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                现代 Web 开发平台，百万粉丝热捧。
-              </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                铁粉君 2021-07-04。
-              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 现代 Web 开发平台，百万粉丝热捧。 </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 铁粉君 2021-07-04。 </div>
             </n-card>
-            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
               <div class="flex">
                 <span>
                   <n-icon size="30" style="color: #61dafb">
-                    <LogoReact/>
+                    <LogoReact />
                   </n-icon>
                 </span>
                 <span class="text-lg ml-4">React</span>
               </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                用于构建用户界面的 JavaScript 库。
-              </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                技术牛 2021-07-04。
-              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 用于构建用户界面的 JavaScript 库。 </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 技术牛 2021-07-04。 </div>
             </n-card>
-            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
               <div class="flex">
                 <span>
                   <n-icon size="30">
-                    <LogoJavascript/>
+                    <LogoJavascript />
                   </n-icon>
                 </span>
                 <span class="text-lg ml-4">Js</span>
               </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                路是走出来的，而不是空想出来的。
-              </div>
-              <div class="flex mt-2 h-10 text-gray-400">
-                架构组 2021-07-04
-              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 路是走出来的，而不是空想出来的。 </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 架构组 2021-07-04 </div>
             </n-card>
           </div>
         </n-card>
 
-        <n-card :segmented="{ content: 'hard' }" content-style="padding-top: 0;padding-bottom: 0;" :bordered="false"
-                size="small" title="动态" class="mt-4">
+        <n-card
+          :segmented="{ content: 'hard' }"
+          content-style="padding-top: 0;padding-bottom: 0;"
+          :bordered="false"
+          size="small"
+          title="动态"
+          class="mt-4"
+        >
           <template #header-extra><a href="javascript:;">更多</a></template>
           <n-list>
             <n-list-item>
               <template #prefix>
-                <n-avatar
-                    circle
-                    :size="40"
-                    :src="schoolboy"
-                />
+                <n-avatar circle :size="40" :src="schoolboy" />
               </template>
               <n-thing title="Ah Jung 刚才把工作台页面随便写了一些，凑合能看了！">
-                <template #description><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template>
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
+                >
               </n-thing>
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar
-                    circle
-                    :size="40"
-                    :src="schoolboy"
-                />
+                <n-avatar circle :size="40" :src="schoolboy" />
               </template>
               <n-thing title="Ah Jung 在 开源组 创建了项目 naive-ui-admin？">
-                <template #description><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template>
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
+                >
               </n-thing>
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar
-                    circle
-                    :size="40"
-                    :src="schoolboy"
-                />
+                <n-avatar circle :size="40" :src="schoolboy" />
               </template>
               <n-thing title="@It界风清扬，向naive-ui-admin提交了一个bug，抽时间看看吧！">
-                <template #description><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template>
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
+                >
               </n-thing>
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar
-                    circle
-                    :size="40"
-                    :src="schoolboy"
-                />
+                <n-avatar circle :size="40" :src="schoolboy" />
               </template>
               <n-thing title="技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！">
-                <template #description><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template>
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
+                >
               </n-thing>
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar
-                    circle
-                    :size="40"
-                    :src="schoolboy"
-                />
+                <n-avatar circle :size="40" :src="schoolboy" />
               </template>
               <n-thing title="上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！">
-                <template #description><p class="text-xs text-gray-500">2021-07-04 20:37:16</p></template>
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 20:37:16</p></template
+                >
               </n-thing>
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar
-                    circle
-                    :size="40"
-                    :src="schoolboy"
-                />
+                <n-avatar circle :size="40" :src="schoolboy" />
               </template>
               <n-thing title="页面切换其实也支持缓存，只是加了过度效果，看起来像是重新渲染了">
                 <template #description>
                   <p class="text-gray-400">
-                    <n-input type="text" placeholder="不信，输点文字试试"></n-input>
+                    <n-input type="text" placeholder="不信，输点文字试试" />
                   </p>
                 </template>
               </n-thing>
@@ -224,56 +227,61 @@
         </n-card>
       </n-gi>
       <n-gi>
-        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small"
-                title="快捷操作">
+        <n-card
+          :segmented="{ content: 'hard' }"
+          content-style="padding: 0;"
+          :bordered="false"
+          size="small"
+          title="快捷操作"
+        >
           <div class="flex flex-wrap project-card">
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
-                  <span class="text-center">
-                    <n-icon size="30" style="color: #68c755">
-                      <DashboardOutlined/>
-                    </n-icon>
-                  </span>
+                <span class="text-center">
+                  <n-icon size="30" style="color: #68c755">
+                    <DashboardOutlined />
+                  </n-icon>
+                </span>
                 <span class="text-lx text-center">主控台</span>
               </div>
             </n-card>
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
-                  <span class="text-center">
-                    <n-icon size="30" style="color: #fab251">
-                      <ProfileOutlined/>
-                    </n-icon>
-                  </span>
+                <span class="text-center">
+                  <n-icon size="30" style="color: #fab251">
+                    <ProfileOutlined />
+                  </n-icon>
+                </span>
                 <span class="text-lx text-center">列表</span>
               </div>
             </n-card>
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
-                  <span class="text-center">
-                    <n-icon size="30" style="color: #1890ff">
-                      <FileProtectOutlined/>
-                    </n-icon>
-                  </span>
+                <span class="text-center">
+                  <n-icon size="30" style="color: #1890ff">
+                    <FileProtectOutlined />
+                  </n-icon>
+                </span>
                 <span class="text-lx text-center">表单</span>
               </div>
             </n-card>
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
-                  <span class="text-center">
-                    <n-icon size="30" style="color: #f06b96">
-                      <ApartmentOutlined/>
-                    </n-icon>
-                  </span>
+                <span class="text-center">
+                  <n-icon size="30" style="color: #f06b96">
+                    <ApartmentOutlined />
+                  </n-icon>
+                </span>
                 <span class="text-lx text-center">权限管理</span>
               </div>
             </n-card>
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
-                  <span class="text-center">
-                    <n-icon size="30" style="color: #7238d1">
-                      <SettingOutlined/>
-                    </n-icon>
-                  </span>
+                <span class="text-center">
+                  <n-icon size="30" style="color: #7238d1">
+                    <SettingOutlined />
+                  </n-icon>
+                </span>
                 <span class="text-lx text-center">系统管理</span>
               </div>
             </n-card>
@@ -281,7 +289,7 @@
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
                   <n-icon size="30" color="">
-                    <DashboardOutlined/>
+                    <DashboardOutlined />
                   </n-icon>
                 </span>
                 <span class="text-lx text-center">主控台</span>
@@ -290,7 +298,7 @@
           </div>
         </n-card>
         <n-card :segmented="{ content: 'hard' }" :bordered="false" size="small" class="mt-4">
-          <img src="~@/assets/images/Business.svg" class="w-full"/>
+          <img src="~@/assets/images/Business.svg" class="w-full" />
         </n-card>
       </n-gi>
     </n-grid>
@@ -298,55 +306,50 @@
 </template>
 
 <script lang="ts">
-import schoolboy from '@/assets/images/schoolboy.png';
-import {
-  GithubOutlined,
-  DashboardOutlined,
-  ProfileOutlined,
-  FileProtectOutlined,
-  SettingOutlined,
-  ApartmentOutlined,
-  Html5Outlined
-} from '@vicons/antd'
-import {
-  LogoVue,
-  LogoAngular,
-  LogoReact,
-  LogoJavascript
-} from '@vicons/ionicons5'
-
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'dashboard_workplace',
-  components: {
+  import schoolboy from '@/assets/images/schoolboy.png';
+  import {
     GithubOutlined,
-    LogoVue,
     DashboardOutlined,
     ProfileOutlined,
     FileProtectOutlined,
     SettingOutlined,
     ApartmentOutlined,
     Html5Outlined,
-    LogoAngular,
-    LogoReact,
-    LogoJavascript
-  },
-  setup() {
-    return {
-      schoolboy
-    }
-  }
-})
+  } from '@vicons/antd';
+  import { LogoVue, LogoAngular, LogoReact, LogoJavascript } from '@vicons/ionicons5';
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'DashboardWorkplace',
+    components: {
+      GithubOutlined,
+      LogoVue,
+      DashboardOutlined,
+      ProfileOutlined,
+      FileProtectOutlined,
+      SettingOutlined,
+      ApartmentOutlined,
+      Html5Outlined,
+      LogoAngular,
+      LogoReact,
+      LogoJavascript,
+    },
+    setup() {
+      return {
+        schoolboy,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.project-card {
-  margin-right: -6px;
+  .project-card {
+    margin-right: -6px;
 
-  &-item {
-    margin: -1px;
-    width: 33.333333%
+    &-item {
+      margin: -1px;
+      width: 33.333333%;
+    }
   }
-}
 </style>