给vue-office打补丁包

mock/disaster-warning/info.ts

@@ -8,6 +8,7 @@ const defenseNoticeInfo = {
   disasterType: '暴雨',
   disasterLevel: '黄色',
   publishTime: '2024-03-20 10:00:00',
+  createUser: 'XXX',
   noticeAttachment: [
     {
       id: 1,
@@ -25,7 +26,7 @@ const defenseNoticeInfo = {
     },
     {
       id: 3,
-      fileName: '应急预案说明.docx',
+      fileName: '应急预案说明.pptx',
       fileType: 'ppt',
       fileSize: '39KB',
       downloadUrl: 'http://192.168.13.102:9000/skyeye-v4/TEST/test.pptx',
@@ -42,7 +43,7 @@ const defenseNoticeInfo = {
 
 export default [
   {
-    url: '/eye_api_bak/api/admin/warning/getDefenseNoticeInfo',
+    url: '/eye_api_bak/api/admin/warning/getDefenseNoticeDetail',
     timeout: 1000,
     method: 'get',
     response: () => {

package.json

@@ -30,6 +30,7 @@
     "@vicons/antd": "0.12.0",
     "@vicons/ionicons5": "0.12.0",
     "@vitejs/plugin-vue": "5.2.1",
+    "@vue-office/docx": "1.6.3",
     "@vueuse/core": "8.9.4",
     "@vueuse/router": "10.6.1",
     "@wangeditor/editor-for-vue": "5.1.12",
@@ -53,6 +54,7 @@
     "uid": "2.0.2",
     "url-join": "5.0.0",
     "vue": "3.5.13",
+    "vue-demi": "0.14.6",
     "vue-echarts": "^6.7.3",
     "vue-hooks-plus": "1.8.6",
     "vue-router": "4.1.2",
@@ -93,9 +95,11 @@
     "less": "4.1.3",
     "less-loader": "11.1.3",
     "lint-staged": "13.0.3",
+    "patch-package": "^8.0.0",
     "picocolors": "1.0.0",
     "postcss": "8.4.14",
     "postcss-px-to-viewport": "1.1.1",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "2.7.1",
     "pretty-quick": "3.1.3",
     "rimraf": "3.0.2",
@@ -148,6 +152,9 @@
         "rollup",
         "webpack"
       ]
+    },
+    "patchedDependencies": {
+      "@vue-office/docx": "patches/@vue-office__docx.patch"
     }
   }
 }

src/api/disaster-warning/index.ts

@@ -1,5 +1,5 @@
 import { http } from '@/utils/http/axios';
-import type { WarningInfoListResponse, DefenseNoticeListResponse } from '@/types/disaster-warning';
+import type { WarningInfoListResponse, DefenseNoticeListResponse, DefenseNoticeDetailResponse } from '@/types/disaster-warning';
 /**
  * 获取预警信息列表
  */
@@ -28,3 +28,21 @@ export function getDefenseNoticeList() {
     },
   );
 }
+
+/**
+ * 查看防御通知详情
+ */
+export function getDefenseNoticeDetail(id: number) {
+  return http.request<DefenseNoticeDetailResponse>(
+    {
+      url: 'admin/warning/getDefenseNoticeDetail',
+      method: 'get',
+      params: {
+        id,
+      },
+    },
+    {
+      ignoreTargetTenantId: true,
+    },
+  );
+}

src/router/modules/dashboard.ts

@@ -32,16 +32,16 @@ const routes: Array<RouteRecordRaw> = [
       sort: 0,
     },
     children: [
-      {
-        path: 'console',
-        name: `${routeName}_console`,
-        meta: {
-          title: '主控台',
-          permissions: ['dashboard_console'],
-          affix: true,
-        },
-        component: () => import('@/views/dashboard/console/console.vue'),
-      },
+      // {
+      //   path: 'console',
+      //   name: `${routeName}_console`,
+      //   meta: {
+      //     title: '主控台',
+      //     permissions: ['dashboard_console'],
+      //     affix: true,
+      //   },
+      //   component: () => import('@/views/dashboard/console/console.vue'),
+      // },
       // {
       //   path: 'monitor',
       //   name: `${routeName}_monitor`,
@@ -50,16 +50,16 @@ const routes: Array<RouteRecordRaw> = [
       //   },
       //   component: () => import('@/views/dashboard/monitor/monitor.vue'),
       // },
-      {
-        path: 'workplace',
-        name: `${routeName}_workplace`,
-        meta: {
-          title: '工作台',
-          keepAlive: true,
-          permissions: ['dashboard_workplace'],
-        },
-        component: () => import('@/views/dashboard/workplace/workplace.vue'),
-      },
+      // {
+      //   path: 'workplace',
+      //   name: `${routeName}_workplace`,
+      //   meta: {
+      //     title: '工作台',
+      //     keepAlive: true,
+      //     permissions: ['dashboard_workplace'],
+      //   },
+      //   component: () => import('@/views/dashboard/workplace/workplace.vue'),
+      // },
     ],
   },
 ];

src/types/disaster-warning/index.ts

@@ -15,3 +15,21 @@ export interface WarningInfoListResponse extends BasicResponse {
 export interface DefenseNoticeListResponse extends BasicResponse {
   noticeTitle: string;
 }
+
+export interface DefenseNoticeAttachment {
+  id: number;
+  fileName: string;
+  fileType: string;
+  fileSize: string;
+  downloadUrl: string;
+}
+export interface DefenseNoticeDetailResponse {
+  id: number;
+  noticeTitle: string;
+  noticeContent: string;
+  disasterType: string;
+  disasterLevel: string;
+  publishTime: string;
+  createUser: string;
+  noticeAttachment: DefenseNoticeAttachment[];
+}

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

@@ -1,218 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
-  import { useECharts } from '@/hooks/web/useECharts';
-  import type { EChartsOption } from 'echarts';
-
-  let data: any[] = [
-    {
-      name: '四川省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '江西省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '湖南省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '浙江省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '广东省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '山西省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '上海市',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '江苏省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '福建省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-    {
-      name: '河南省',
-      value: (Math.random() * 10).toFixed(0),
-      sum: 10,
-    },
-  ];
-  const getArrByKey = (data, k) => {
-    let key = k || 'value';
-    let res: string[] = [];
-    if (data) {
-      data.forEach(function (t) {
-        res.push(t[key]);
-      });
-    }
-    return res;
-  };
-  const opt = {
-    index: 0,
-  };
-  const color = ['#FC619D', '#FF904D', '#48BFE3'];
-  data = data.sort((a: any, b: any) => {
-    return b.value - a.value;
-  });
-
-  const option: EChartsOption = {
-    grid: {
-      top: '2%',
-      bottom: -15,
-      right: 30,
-      left: -30,
-      containLabel: true,
-    },
-    xAxis: {
-      show: false,
-    },
-    yAxis: [
-      {
-        triggerEvent: true,
-        show: true,
-        inverse: true,
-        data: getArrByKey(data, 'name'),
-        axisLine: {
-          show: false,
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          interval: 0,
-          color: '#666',
-          align: 'left',
-          margin: 80,
-          fontSize: 13,
-          formatter: function (value, index) {
-            if (opt.index === 0 && index < 3) {
-              return '{idx' + index + '|' + (1 + index) + '} {title|' + value + '}';
-            } else if (opt.index !== 0 && index + opt.index < 9) {
-              return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}';
-            } else {
-              return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}';
-            }
-          },
-          rich: {
-            idx0: {
-              color: '#FB375E',
-              backgroundColor: '#FFE8EC',
-              borderRadius: 100,
-              padding: [5, 8],
-            },
-            idx1: {
-              color: '#FF9023',
-              backgroundColor: '#FFEACF',
-              borderRadius: 100,
-              padding: [5, 8],
-            },
-            idx2: {
-              color: '#01B599',
-              backgroundColor: '#E1F7F3',
-              borderRadius: 100,
-              padding: [5, 8],
-            },
-            idx: {
-              color: '#333',
-              borderRadius: 100,
-              padding: [5, 8],
-            },
-            title: {
-              width: 165,
-            },
-          },
-        },
-      },
-      {
-        triggerEvent: true,
-        show: true,
-        inverse: true,
-        data: getArrByKey(data, 'name'),
-        axisLine: {
-          show: false,
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          interval: 0,
-          color: '#666',
-          align: 'left',
-          margin: 20,
-          fontSize: 13,
-          formatter: function (_, index) {
-            return '转化率：' + ((data[index].value / data[index].sum) * 100).toFixed(2) + '%';
-          },
-        },
-      },
-    ],
-    series: [
-      {
-        name: '条',
-        type: 'bar',
-        yAxisIndex: 0,
-        data: data,
-        barWidth: 10,
-        itemStyle: {
-          color: (val) => {
-            if (val.dataIndex < 3 && opt.index === 0) {
-              return color[val.dataIndex];
-            } else {
-              return '#1990FF';
-            }
-          },
-          borderRadius: 30,
-        },
-      },
-    ],
-  };
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '350px',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      onMounted(() => {
-        setOptions(option);
-      });
-      return { chartRef };
-    },
-  });
-</script>

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

@@ -1,111 +0,0 @@
-<template>
-  <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';
-
-  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)'],
-                },
-              },
-            },
-          ],
-          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 };
-    },
-  });
-</script>

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

@@ -1,25 +0,0 @@
-import {
-  CaretUpOutlined,
-  CaretDownOutlined,
-  UsergroupAddOutlined,
-  BarChartOutlined,
-  ShoppingCartOutlined,
-  AccountBookOutlined,
-  CreditCardOutlined,
-  MailOutlined,
-  TagsOutlined,
-  SettingOutlined,
-} from '@arco-design/web-vue/es/icon';
-
-export default {
-  CaretUpOutlined,
-  CaretDownOutlined,
-  UsergroupAddOutlined,
-  BarChartOutlined,
-  ShoppingCartOutlined,
-  AccountBookOutlined,
-  CreditCardOutlined,
-  MailOutlined,
-  TagsOutlined,
-  SettingOutlined,
-};

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

@@ -1,141 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
-  import { useECharts } from '@/hooks/web/useECharts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '250px',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      const option = {
-        tooltip: {},
-        grid: {
-          top: '10%',
-          left: '1%',
-          right: '1%',
-          bottom: '8%',
-          containLabel: true,
-        },
-        legend: {
-          top: '-2%',
-          itemGap: 50, //图例每项之间的间隔
-          data: ['粉丝总量', '月销量'],
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: true,
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                //color: '#f9f9f9',
-              },
-            },
-            axisLabel: {
-              //坐标轴刻度标签的相关设置
-            },
-            axisTick: {
-              show: false,
-            },
-            data: [
-              '1月',
-              '2月',
-              '3月',
-              '4月',
-              '5月',
-              '6月',
-              '7月',
-              '8月',
-              '9月',
-              '10月',
-              '11月',
-              '12月',
-            ],
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            min: 0,
-            // max: 140,
-            splitNumber: 7,
-            // splitLine: {
-            //   show: true,
-            //   lineStyle: {
-            //     color: '#0a3256',
-            //   },
-            // },
-            axisLine: {
-              show: false,
-            },
-            axisLabel: {
-              margin: 20,
-            },
-            axisTick: {
-              show: false,
-            },
-          },
-        ],
-        series: [
-          {
-            name: '粉丝总量',
-            type: 'line',
-            // smooth: true, //是否平滑曲线显示
-            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
-            showAllSymbol: true,
-            symbol: 'emptyCircle',
-            symbolSize: 6,
-            lineStyle: {},
-            label: {
-              show: true,
-              position: 'top',
-            },
-            itemStyle: {
-              color: '#FC619D',
-            },
-            tooltip: {
-              show: false,
-            },
-            data: [105, 180, 208, 284, 343, 388, 435, 465, 487, 531, 589, 669],
-          },
-          {
-            name: '月销量',
-            type: 'bar',
-            barWidth: 10,
-            tooltip: {
-              show: false,
-            },
-            label: {
-              show: true,
-              position: 'top',
-            },
-            itemStyle: {
-              color: '#1990FF',
-              borderRadius: 5,
-            },
-            data: [200, 282, 302, 367, 386, 315, 316, 386, 395, 416, 377, 509],
-          },
-        ],
-      };
-
-      onMounted(() => {
-        setOptions(option as any);
-      });
-      return { chartRef };
-    },
-  });
-</script>

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

@@ -1,182 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
-  import { useECharts } from '@/hooks/web/useECharts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '350px',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      const option = {
-        xAxis: {
-          type: 'category',
-          data: [
-            '1月',
-            '2月',
-            '3月',
-            '4月',
-            '5月',
-            '6月',
-            '7月',
-            '8月',
-            '9月',
-            '10月',
-            '11月',
-            '12月',
-          ],
-        },
-        yAxis: {
-          type: 'value',
-        },
-        tooltip: {
-          show: true,
-        },
-        series: [
-          {
-            data: [
-              {
-                value: 8765,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 4598,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 13567,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 4789,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 9876,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 5478,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 3289,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 13423,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 6543,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 7689,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 8235,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-              {
-                value: 6578,
-                itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#83bff6' },
-                  ]),
-                },
-              },
-            ],
-            type: 'bar',
-          },
-        ],
-      };
-
-      onMounted(() => {
-        setOptions(option as any);
-      });
-      return { chartRef };
-    },
-  });
-</script>

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

@@ -1,134 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
-  import { useECharts } from '@/hooks/web/useECharts';
-  import type { EChartsOption } from 'echarts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '320px',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      const option: EChartsOption = {
-        //color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
-        tooltip: {
-          trigger: 'axis',
-          backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
-          borderWidth: '0', //边框为0
-          textStyle: {
-            color: '#fff', //字体颜色
-          },
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
-        },
-        legend: {
-          data: ['当月销售额', '月均销售额'],
-          right: 20,
-          top: 10,
-        },
-        // 设置网格样式
-        grid: {
-          left: '1%',
-          right: '2%',
-          bottom: '1%',
-          top: '12%',
-          containLabel: true, // 包含刻度文字在内
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: true, //坐标轴两端空白策略
-            axisTick: {
-              show: false, //隐藏X轴刻度
-            },
-            data: [
-              '1月',
-              '2月',
-              '3月',
-              '4月',
-              '5月',
-              '6月',
-              '7月',
-              '8月',
-              '9月',
-              '10月',
-              '11月',
-              '12月',
-            ],
-          },
-        ],
-        yAxis: [
-          {
-            name: '单位:元',
-            type: 'value',
-            axisLabel: {
-              color: '#666',
-            },
-            //name的样式设计
-            nameTextStyle: {
-              color: '#333',
-              align: 'left',
-            },
-            splitLine: {
-              lineStyle: {
-                type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
-                color: '#E9E9E9',
-              },
-            },
-            axisLine: {
-              show: false, //隐藏Y轴线
-            },
-            axisTick: {
-              show: false, //隐藏Y轴刻度
-            },
-          },
-        ],
-        series: [
-          {
-            name: '当月销售额',
-            type: 'line',
-            areaStyle: {
-              color: '#3DB2FF',
-            },
-            emphasis: {
-              focus: 'series',
-            },
-            data: [820, 932, 1002, 901, 954, 934, 1290, 1360, 1450, 1400, 1350, 1320],
-          },
-          {
-            name: '月均销售额',
-            type: 'line',
-            areaStyle: {
-              color: '#78DEC7',
-            },
-            emphasis: {
-              focus: 'series',
-            },
-            data: [620, 712, 802, 701, 734, 734, 1090, 1160, 1250, 1220, 1150, 1120],
-          },
-        ],
-      };
-
-      onMounted(() => {
-        setOptions(option);
-      });
-      return { chartRef };
-    },
-  });
-</script>

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

@@ -1,105 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
-  import { useECharts } from '@/hooks/web/useECharts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '209px',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-      let echartData = [
-        {
-          name: '互联网',
-          value: 525,
-        },
-        {
-          name: '实体门店',
-          value: 305,
-        },
-        {
-          name: '境外',
-          value: 134,
-        },
-        {
-          name: '其他',
-          value: 60,
-        },
-      ];
-
-      // let formatNumber = function (num) {
-      //   let reg = /(?=(\B)(\d{3})+$)/g;
-      //   return num.toString().replace(reg, ',');
-      // };
-      let total = echartData.reduce((a, b) => {
-        return a + b.value * 1;
-      }, 0);
-      let maxObj = echartData.reduce((prev, cur) => {
-        return prev.value > cur.value ? prev : cur;
-      });
-      let maxPerNum = Math.floor((maxObj.value / total) * 100) + '%';
-      const option = {
-        color: color,
-        // tooltip: {
-        //     trigger: 'item'
-        // },
-        title: [
-          {
-            text: maxPerNum,
-            x: '50%',
-            y: '40%',
-            textAlign: 'center',
-            textStyle: {
-              fontSize: '24',
-              fontWeight: '500',
-              color: '#000000',
-              textAlign: 'center',
-            },
-          },
-          {
-            text: '最大来源占比',
-            left: '50%',
-            top: '52%',
-            textAlign: 'center',
-            textStyle: {
-              fontSize: '12',
-              fontWeight: '400',
-              color: '#5c5a68',
-              textAlign: 'center',
-            },
-          },
-        ],
-        series: [
-          {
-            type: 'pie',
-            radius: ['45%', '60%'],
-            center: ['50%', '50%'],
-            data: echartData,
-            itemStyle: {
-              borderColor: '#fff',
-              borderWidth: 2,
-            },
-          },
-        ],
-      };
-
-      onMounted(() => {
-        setOptions(option as any);
-      });
-      return { chartRef };
-    },
-  });
-</script>

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

@@ -1,16 +0,0 @@
-<template>
-  <el-row :gutter="12">
-    <el-col :span="24">
-      <el-tabs v-model="activeKey">
-        <el-tab-pane label="流量趋势" name="1"> <FluxTrend /></el-tab-pane>
-        <el-tab-pane label="访问量" name="2"> <VisitAmount /></el-tab-pane>
-      </el-tabs>
-    </el-col>
-  </el-row>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import FluxTrend from './FluxTrend.vue';
-  import VisitAmount from './VisitAmount.vue';
-  const activeKey = ref('1');
-</script>

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

@@ -1,61 +0,0 @@
-<template>
-  <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';
-
-  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',
-              },
-            },
-          },
-          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 };
-    },
-  });
-</script>

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

@@ -1,65 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
-  import { useECharts } from '@/hooks/web/useECharts';
-
-  const option = {
-    title: {
-      text: '访问来源',
-      subtext: '全站来源统计',
-      left: 'center',
-    },
-    tooltip: {
-      trigger: 'item',
-    },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-    },
-    series: [
-      {
-        name: '访问来源',
-        type: 'pie',
-        radius: '50%',
-        data: [
-          { value: 1048, name: '搜索引擎' },
-          { value: 735, name: '直接访问' },
-          { value: 580, name: '邮件营销' },
-          { value: 484, name: '联盟广告' },
-          { value: 300, name: '视频广告' },
-        ],
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)',
-          },
-        },
-      },
-    ],
-  };
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '320px',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      onMounted(() => {
-        setOptions(option as any);
-      });
-      return { chartRef };
-    },
-  });
-</script>

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

@@ -1,17 +0,0 @@
-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/console/console.vue

@@ -1,541 +0,0 @@
-<template>
-  <PageWrapper>
-    <el-row :gutter="12" class="pt-0">
-      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-        <el-card shadow="hover" class="custom-box-card card-1">
-          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
-            <template #default>
-              <el-row justify="space-between" align="middle">
-                <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="17">
-                  <div>
-                    <h3 class="my-2 text-3xl">Element Plus</h3>
-                    <p class="mb-2">开箱即用的中台前端/设计解决方案</p>
-                    <ul class="text-xs leading-6">
-                      <li class="truncate"
-                        ><el-badge
-                          is-dot
-                          type="info"
-                          class="mr-2"
-                        />内置常用模板，无需考虑交互排版，助你高效开发</li
-                      >
-                      <li class="truncate"
-                        ><el-badge is-dot type="info" class="mr-2" />样式美观大方，无缝对接 Element
-                        Plus，随意组合页面，随心所欲</li
-                      >
-                      <li class="truncate"
-                        ><el-badge
-                          is-dot
-                          type="info"
-                          class="mr-2"
-                        />丰富的布局模式，具有高可配性，满足您的各类布局需求</li
-                      >
-                      <li class="truncate"
-                        ><el-badge
-                          is-dot
-                          type="info"
-                          class="mr-2"
-                        />优质的售后技术支持，完善的文档，让您事半功倍</li
-                      >
-                    </ul>
-                  </div>
-                  <div class="flex items-center mt-3">
-                    <div class="text-xs">评价：</div>
-                    <div
-                      ><el-rate
-                        v-model="rateValue"
-                        disabled
-                        show-score
-                        text-color="#ff9900"
-                        score-template="{value}分"
-                        size="large"
-                      />
-                    </div>
-                  </div>
-                  <div class="flex items-center">
-                    <div class="text-xs">畅销：</div>
-                    <div
-                      ><el-rate
-                        v-model="rateValue"
-                        disabled
-                        show-score
-                        text-color="#ff9900"
-                        score-template="{value}分"
-                        size="large"
-                      />
-                    </div>
-                  </div>
-                </el-col>
-                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="7">
-                  <el-image :src="salesDashboard" fit="contain" />
-                </el-col>
-              </el-row>
-            </template>
-          </el-skeleton>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-        <el-row :gutter="12">
-          <el-col :span="12">
-            <el-card shadow="hover" class="custom-box-card">
-              <el-skeleton :rows="2" :loading="loading" style="width: 100%">
-                <template #default>
-                  <div class="flex justify-between mb-3">
-                    <div>
-                      <h3 class="text-base">访问量</h3>
-                      <div class="pt-1">
-                        <CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-2xl" />
-                      </div>
-                    </div>
-                    <div>
-                      <el-icon :size="30" :color="`var(--el-color-primary)`">
-                        <SignalFilled />
-                      </el-icon>
-                    </div>
-                  </div>
-                  <div class="summary"
-                    >增长幅度<el-tag class="ml-2" type="success">+7%</el-tag></div
-                  >
-                </template>
-              </el-skeleton>
-            </el-card>
-          </el-col>
-          <el-col :span="12">
-            <el-card shadow="hover" class="custom-box-card"
-              ><el-skeleton :rows="2" :loading="loading" style="width: 100%">
-                <template #default>
-                  <div class="flex justify-between mb-3">
-                    <div>
-                      <h3 class="text-base">销售额</h3>
-                      <div class="pt-1">
-                        <CountTo
-                          prefix="￥"
-                          :startVal="1"
-                          :endVal="info.saleroom.weekSaleroom"
-                          class="text-2xl"
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <el-icon :size="30" :color="`var(--el-color-warning)`">
-                        <TrophyTwotone />
-                      </el-icon>
-                    </div>
-                  </div>
-                  <div class="summary">下降幅度<el-tag class="ml-2" type="danger">-3%</el-tag></div>
-                </template>
-              </el-skeleton></el-card
-            >
-          </el-col>
-          <el-col :span="12">
-            <el-card shadow="hover" class="custom-box-card"
-              ><el-skeleton :rows="2" :loading="loading" style="width: 100%">
-                <template #default>
-                  <div class="flex justify-between mb-3">
-                    <div>
-                      <h3 class="text-base">订单量</h3>
-                      <div class="pt-1">
-                        <CountTo
-                          :startVal="1"
-                          :endVal="info.orderLarge.weekLarge"
-                          class="text-2xl"
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <el-icon :size="30" :color="`var(--el-color-success)`">
-                        <AccountBookTwotone />
-                      </el-icon>
-                    </div>
-                  </div>
-                  <div class="summary"
-                    >下降幅度<el-tag class="ml-2" type="danger">-35%</el-tag></div
-                  >
-                </template>
-              </el-skeleton></el-card
-            >
-          </el-col>
-          <el-col :span="12">
-            <el-card shadow="hover" class="custom-box-card"
-              ><el-skeleton :rows="2" :loading="loading" style="width: 100%">
-                <template #default>
-                  <div class="flex justify-between mb-3">
-                    <div>
-                      <h3 class="text-base">成交额</h3>
-                      <div class="pt-1">
-                        <CountTo
-                          prefix="￥"
-                          :startVal="1"
-                          :endVal="info.volume.weekLarge"
-                          class="text-2xl"
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <el-icon :size="30" :color="`var(--el-color-danger)`">
-                        <DollarCircleTwotone />
-                      </el-icon>
-                    </div>
-                  </div>
-                  <div class="summary"
-                    >增长幅度<el-tag class="ml-2" type="success">+23%</el-tag></div
-                  >
-                </template>
-              </el-skeleton></el-card
-            >
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="12">
-      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
-        <el-card shadow="hover" class="custom-box-card">
-          <template #header>
-            <div class="card-header">
-              <span class="text-base">会员增长趋势</span>
-            </div>
-          </template>
-          <el-skeleton :rows="6" :loading="loading" style="width: 100%">
-            <template #default>
-              <NewVisitAmount />
-            </template>
-          </el-skeleton>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
-        <el-card shadow="hover" class="custom-box-card card-4">
-          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
-            <!-- 自定义骨架屏 start -->
-            <template #template>
-              <el-skeleton-item
-                variant="image"
-                style="width: 60px; height: 60px; margin: 14px auto 0"
-              />
-              <div style="padding-top: 20px">
-                <el-skeleton-item variant="h3" style="width: 60%; height: 28px; margin: 0 auto" />
-              </div>
-              <div style="padding-top: 20px">
-                <el-skeleton-item variant="p" style="width: 50%; height: 14px; margin: 0 auto" />
-              </div>
-              <div style="padding-top: 10px">
-                <el-skeleton-item variant="p" style="width: 40%; height: 14px; margin: 0 auto" />
-              </div>
-              <div style="padding-top: 10px">
-                <el-skeleton-item
-                  variant="button"
-                  style="width: 50%; height: 30px; margin: 0 auto"
-                />
-              </div>
-              <div
-                style="
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-                  padding: 20px;
-                "
-              >
-                <el-skeleton-item variant="text" style="width: 30%" />
-                <el-skeleton-item variant="text" style="width: 30%" />
-                <el-skeleton-item variant="text" style="width: 30%" />
-              </div>
-            </template>
-            <!-- 自定义骨架屏 end -->
-            <template #default>
-              <div class="pt-4 logo">
-                <img src="~@/assets/images/logo.png" alt="Admin Pro" class="img" />
-              </div>
-              <h3>NaiveAdmin</h3>
-              <p class="mt-4 word">开箱即用的中台前端<br />设计解决方案</p>
-              <div class="btn">
-                <el-button type="primary" size="large" round @click="goUrl"
-                  >去官网看看</el-button
-                ></div
-              >
-              <div class="mt-6">
-                <el-space wrap>
-                  <el-tag effect="dark" :hit="true" color="#7816ff">多生态支持</el-tag>
-                  <el-tag effect="dark" color="#00b42a">丰富功能</el-tag>
-                  <el-tag effect="dark" color="#ff7d00" class="hidden-lg-only">实用组件</el-tag>
-                </el-space>
-              </div>
-            </template>
-          </el-skeleton>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="12">
-      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
-        <el-card shadow="hover" class="custom-box-card">
-          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
-            <template #default>
-              <el-table :data="tableData" style="width: 100%">
-                <el-table-column prop="date" label="姓名">
-                  <template #default="scope">
-                    <div class="flex items-center">
-                      <el-avatar :size="40" :alt="scope.row.name" :src="scope.row.avatar" />
-                      <p class="ml-4">{{ scope.row.name }}</p>
-                    </div>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="isMember" label="是否会员" align="center">
-                  <template #default="scope">
-                    <el-tag :type="scope.row.isMember ? 'success' : 'danger'">{{
-                      scope.row.isMember ? '是' : '否'
-                    }}</el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="telephone" label="手机" align="center" />
-                <el-table-column prop="date" label="购买日期" align="center" />
-
-                <el-table-column label="操作" align="center">
-                  <template #default="scope">
-                    <el-link href="javascript:;" type="primary">编辑</el-link>
-                    <el-divider direction="vertical" />
-                    <el-popconfirm :title="`您确认要删除 ${scope.row.name} 吗？`">
-                      <template #reference>
-                        <el-link href="javascript:;" type="primary">删除</el-link>
-                      </template>
-                    </el-popconfirm>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </template>
-          </el-skeleton>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
-        <el-card shadow="hover" class="custom-box-card card-6">
-          <template #header>
-            <div class="flex items-center justify-between card-header">
-              <span class="text-base">评论</span>
-              <el-link href="#" target="_blank" type="primary">更多</el-link>
-            </div>
-          </template>
-          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
-            <template #default>
-              <ul>
-                <li v-for="(item, index) of comment" :key="index" class="flex py-3 items-top">
-                  <el-avatar :size="36" :src="item.avatar" />
-                  <div class="flex-grow ml-3">
-                    <div class="flex items-center justify-between">
-                      <span>{{ item.name }}</span>
-                      <span :style="`color: var(--el-text-color-secondary)`" class="text-xs">{{
-                        item.datetime
-                      }}</span>
-                    </div>
-                    <p>{{ item.content }}</p>
-                  </div>
-                </li>
-              </ul>
-            </template>
-          </el-skeleton>
-        </el-card>
-      </el-col>
-    </el-row>
-  </PageWrapper>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref, onMounted } from 'vue';
-  import 'element-plus/theme-chalk/display.css';
-  import NewVisitAmount from './components/NewVisitAmount.vue';
-  import { getConsoleInfo } from '@/api/dashboard/console';
-  import { CountTo } from '@/components/CountTo/index';
-
-  import salesDashboard from '@/assets/images/sales-dashboard.svg';
-  import schoolboy from '@/assets/images/schoolboy.png';
-  import {
-    SignalFilled,
-    TrophyTwotone,
-    DollarCircleTwotone,
-    AccountBookTwotone,
-  } from '@vicons/antd';
-
-  const loading = ref(true);
-  const rateValue = ref(5);
-  const info = reactive<any>({
-    saleroom: {},
-    orderLarge: {},
-    visits: {},
-    volume: {},
-  });
-
-  onMounted(async () => {
-    const res = await getConsoleInfo();
-    info.saleroom = res.saleroom;
-    info.orderLarge = res.orderLarge;
-    info.visits = res.visits;
-    info.volume = res.volume;
-    loading.value = false;
-  });
-
-  function goUrl() {
-    window.open('https://www.naiveadmin.com', '_blank');
-  }
-
-  const comment = [
-    {
-      id: 1,
-      name: '武军',
-      avatar: schoolboy,
-      content: '这个系统太好用了',
-      datetime: '5分钟前',
-    },
-    {
-      id: 2,
-      name: '顾平',
-      avatar: schoolboy,
-      content: 'UI界面有两下子',
-      datetime: '1小时前',
-    },
-    {
-      id: 3,
-      name: '何军',
-      avatar: schoolboy,
-      content: '颜值有点高呀',
-      datetime: '1天前',
-    },
-    {
-      id: 4,
-      name: '朱一龙',
-      avatar: schoolboy,
-      content: '给作者点赞',
-      datetime: '2个月前',
-    },
-    {
-      id: 5,
-      name: '夏勇',
-      avatar: schoolboy,
-      content: '还是多提宝贵建议吧',
-      datetime: '3年前',
-    },
-  ];
-
-  const tableData = [
-    {
-      id: 1,
-      name: '黎磊',
-      avatar: schoolboy,
-      isMember: true,
-      telephone: '1281391234',
-      date: '2021-12-14',
-    },
-    {
-      id: 2,
-      name: '周强',
-      avatar: schoolboy,
-      isMember: true,
-      telephone: '1281391234',
-      date: '2021-12-14',
-    },
-    {
-      id: 3,
-      name: '常静',
-      avatar: schoolboy,
-      isMember: true,
-      telephone: '1281391234',
-      date: '2021-12-14',
-    },
-    {
-      id: 4,
-      name: '尹丽',
-      avatar: schoolboy,
-      isMember: true,
-      telephone: '1281391234',
-      date: '2021-12-14',
-    },
-    {
-      id: 5,
-      name: '江秀英',
-      avatar: schoolboy,
-      isMember: false,
-      telephone: '1281391234',
-      date: '2021-12-14',
-    },
-    {
-      id: 6,
-      name: '杜杰',
-      avatar: schoolboy,
-      isMember: true,
-      telephone: '1281391234',
-      date: '2021-12-14',
-    },
-  ];
-</script>
-
-<style lang="scss" scoped>
-  // 右侧内容区域背景色
-  .admin-layout-content-main {
-    background: var(--el-bg-color);
-  }
-  // 处理栅格
-  .el-row {
-    padding-top: 6px;
-    margin: -6px;
-    .el-row {
-      padding-top: 0;
-    }
-  }
-  .el-col {
-    padding-top: 6px;
-    padding-bottom: 6px;
-  }
-  // 卡片定制
-  .custom-box-card {
-    border: none;
-  }
-
-  .el-rate--large {
-    height: 20px;
-  }
-  .el-rate .el-rate__decimal {
-    position: absolute;
-  }
-
-  @media (max-width: 1199px) {
-    .mb12 {
-      margin-bottom: 12px;
-    }
-  }
-
-  .card-1 {
-    min-height: 286px;
-    li {
-      sup {
-        top: auto;
-      }
-    }
-  }
-  .prefix {
-    font-size: 20px;
-  }
-
-  .card-4 {
-    height: 351px;
-    text-align: center;
-    h3 {
-      margin: 10px 0;
-      font-size: 28px;
-    }
-    .logo {
-      width: 60px;
-      margin: 0 auto;
-    }
-    .price {
-      margin: 15px 0;
-    }
-    .word {
-      margin-bottom: 15px;
-    }
-    .el-tag--dark {
-      border: none;
-    }
-  }
-
-  .card-6 {
-    .el-card__body {
-      padding: 15px 20px;
-    }
-  }
-</style>

src/views/dashboard/home/Home.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="home-page">
-    <div class="header">
-      <Header />
-    </div>
-    <div class="content">
-      <div class="content-left">
-        <div class="content-algorithm">
-          <AlgoData :data="violationData" :get-violations="getViolationCount" />
-        </div>
-        <div class="content-scores">
-          <Score />
-        </div>
-      </div>
-      <div class="content-right">
-        <div class="content-click">
-          <ClickShow />
-        </div>
-        <div class="content-operate">
-          <QuickAction />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import AlgoData from './components/AlgoDataPanel.vue';
-  import ClickShow from './components/ClickShow.vue';
-  import Score from './components/Score.vue';
-  import Header from './components/Header.vue';
-  import useHomeInfo from './hooks/useHomeInfo';
-  import QuickAction from './components/QuickAction.vue';
-
-  const homeInfos = useHomeInfo();
-  const { violationData, getViolationCount } = homeInfos;
-</script>
-
-<style scoped>
-  .home-page {
-    width: 100%;
-    height: 91vh;
-    padding-bottom: 24px;
-    display: flex;
-    flex-direction: column;
-    /* background: #ffffff; */
-  }
-
-  .header {
-    height: 128px;
-    width: 100%;
-    background: #ffffff;
-    margin-bottom: 10px;
-  }
-  .content {
-    flex-grow: 1;
-    display: flex;
-    width: 100%;
-    /* background: #ffffff; */
-  }
-
-  .content-left {
-    flex-grow: 1;
-    margin-right: 10px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .content-algorithm {
-    height: 392px;
-    margin-bottom: 10px;
-    background: #ffffff;
-  }
-
-  .content-scores {
-    flex-grow: 1;
-    background: #ffffff;
-  }
-
-  .content-right {
-    /* flex-grow: 0; */
-    width: 280px;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-  }
-
-  .content-click {
-    height: 203px;
-    margin-bottom: 10px;
-    background: #ffffff;
-  }
-
-  .content-operate {
-    flex-grow: 1;
-    background: #ffffff;
-  }
-</style>

src/views/dashboard/home/components/AlgoCensusTabs copy.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="flex justify-between" style="width: 100%">
-    <div class="text-tabs">
-      <div
-        v-for="item in timeTypeList"
-        class="tab-item"
-        @click="onClickTab(item)"
-        :key="item.label"
-      >
-        <span> {{ item.label }} </span>
-        <div v-if="activeTab == item.value" class="tab-underline"></div>
-      </div>
-    </div>
-    <el-date-picker
-      v-model="timeSlot"
-      type="daterange"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      @change="onDateChnage"
-    >
-      <template #range-separator>
-        <img src="@/assets/images/date-to.png" />
-      </template>
-    </el-date-picker>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import { TimeTabEnum, timeTypeList } from '../types';
-  import dayjs from 'dayjs';
-
-  const activeTab = ref<TimeTabEnum>(TimeTabEnum.DAY);
-
-  const emits = defineEmits(['checkTab', 'changeDateRange']);
-
-  const today = dayjs().format('YYYY-MM-DD');
-  const weekDay = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD');
-  const monthDay = dayjs().startOf('month').format('YYYY-MM-DD');
-
-  const timeSlot = ref([today, today]);
-
-  const onClickTab = (tabItem: any) => {
-    activeTab.value = tabItem.value;
-    switch (tabItem.value) {
-      case TimeTabEnum.DAY:
-        timeSlot.value = [today, today];
-        break;
-
-      case TimeTabEnum.WEEK:
-        timeSlot.value = [weekDay, today];
-        break;
-
-      case TimeTabEnum.MONTH:
-        timeSlot.value = [monthDay, today];
-        break;
-    }
-    emits('checkTab', { tab: tabItem.value, data: timeSlot.value });
-  };
-
-  const onDateChnage = (date) => {
-    timeSlot.value = date.map((item) => dayjs(item).format('YYYY-MM-DD'));
-    onClickTab(TimeTabEnum.RANGE);
-  };
-</script>
-
-<style scoped>
-  .text-tabs {
-    width: 132px;
-    height: 26px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .tab-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    font-weight: 400;
-    color: #2e2e2e;
-    line-height: 20px;
-    cursor: pointer;
-  }
-
-  .tab-underline {
-    width: 100%;
-    height: 2px;
-    background: #1677ff;
-  }
-
-  :deep(.el-date-editor .el-range__icon) {
-    display: none;
-  }
-  :deep(.el-date-editor .el-range__close-icon--hidden) {
-    display: none;
-  }
-
-  :deep(.el-range-editor.el-input__wrapper) {
-    width: 236px;
-    flex: unset;
-    height: 32px;
-  }
-
-  :deep(.el-input__wrapper) {
-    padding: 0;
-  }
-</style>

src/views/dashboard/home/components/AlgoCensusTabs.vue

@@ -1,120 +0,0 @@
-<template>
-  <div style="display: flex">
-    <div class="text-tabs">
-      <!-- <div
-        v-for="item in timeTypeList"
-        class="tab-item"
-        @click="onClickTab(item)"
-        :key="item.label"
-      >
-        <span> {{ item.label }} </span>
-        <div v-if="activeTab == item.value" class="tab-underline"></div>
-      </div> -->
-      <el-radio-group v-model="activeTab" class="score-select" @change="onClickTab">
-        <el-radio-button
-          v-for="item in timeTypeList"
-          :value="item.value"
-          :key="item.value"
-          :label="item.label"
-        ></el-radio-button>
-      </el-radio-group>
-    </div>
-    <el-date-picker
-      v-model="timeSlot"
-      type="daterange"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      @change="onDateChnage"
-    >
-      <template #range-separator>
-        <img src="@/assets/images/date-to.png" />
-      </template>
-    </el-date-picker>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import { TimeTabEnum, timeTypeList } from '../types';
-  import dayjs from 'dayjs';
-
-  const activeTab = ref<TimeTabEnum>(TimeTabEnum.DAY);
-
-  const emits = defineEmits(['checkTab', 'changeDateRange']);
-
-  const today = dayjs().format('YYYY-MM-DD');
-  const weekDay = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD');
-  const monthDay = dayjs().startOf('month').format('YYYY-MM-DD');
-
-  const timeSlot = ref([today, today]);
-
-  const onClickTab = () => {
-    switch (activeTab.value) {
-      case TimeTabEnum.DAY:
-        timeSlot.value = [today, today];
-        break;
-
-      case TimeTabEnum.WEEK:
-        timeSlot.value = [weekDay, today];
-        break;
-
-      case TimeTabEnum.MONTH:
-        timeSlot.value = [monthDay, today];
-        break;
-    }
-    emits('checkTab', { tab: activeTab.value, data: timeSlot.value });
-  };
-
-  const onDateChnage = (date) => {
-    timeSlot.value = date.map((item) => dayjs(item).format('YYYY-MM-DD'));
-    onClickTab();
-  };
-</script>
-
-<style scoped>
-  .text-tabs {
-    /* width: 132px; */
-    height: 23px;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 15px;
-    margin-right: 24px;
-  }
-
-  .tab-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    font-weight: 400;
-    color: #2e2e2e;
-    line-height: 20px;
-    cursor: pointer;
-  }
-
-  .tab-underline {
-    width: 100%;
-    height: 2px;
-    background: #1677ff;
-  }
-
-  :deep(.el-date-editor .el-range__icon) {
-    display: none;
-  }
-  :deep(.el-date-editor .el-range__close-icon--hidden) {
-    display: none;
-  }
-
-  :deep(.el-range-editor.el-input__wrapper) {
-    width: 236px;
-    flex: unset;
-    height: 32px;
-    margin-top: 13px;
-    margin-right: 10px;
-  }
-
-  :deep(.el-input__wrapper) {
-    padding: 0;
-  }
-</style>

src/views/dashboard/home/components/AlgoDataPanel copy.vue

@@ -1,204 +0,0 @@
-<template>
-  <div class="algo-data">
-    <span class="algo-tit">算法数据分析</span>
-    <CensusTabs @check-tab="onCheckTab" />
-    <v-chart class="chart" :option="option" />
-    <div class="stat-show">
-      <ViolationStatItem :data="getVioStatData(0)" />
-      <div class="stat-divider"></div>
-      <ViolationStatItem :data="getVioStatData(1)" />
-      <div class="stat-divider"></div>
-      <ViolationStatItem :data="getVioStatData(2)" />
-      <div class="stat-divider"></div>
-      <ViolationStatItem :data="getVioStatData(3)" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed, ref } from 'vue';
-  import CensusTabs from './AlgoCensusTabs.vue';
-  import ViolationStatItem from './ViolationStatItem.vue';
-  import { TimeTabEnum, violationHandleCounts } from '../types';
-  import { use } from 'echarts/core';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { PieChart } from 'echarts/charts';
-  import { TooltipComponent, LegendComponent } from 'echarts/components';
-  import { ViolationCount } from '@/api/home/home.ts';
-  import VChart from 'vue-echarts';
-
-  const props = defineProps<{
-    data: ViolationCount;
-    getViolations: (range: string[]) => void;
-  }>();
-
-  use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);
-
-  const algoData = computed(() => {
-    let newData: any[] = [];
-    const vioList = props.data.violationAlgoList;
-    if (vioList && vioList.length) {
-      newData = vioList.map((item) => {
-        return {
-          value: item.proportion,
-          name: item.name,
-        };
-      });
-    }
-    console.log(newData);
-
-    return newData;
-  });
-  //  [
-  //   { value: 335, name: "人员闯入" },
-  //   { value: 310, name: "未穿反光背心" },
-  //   { value: 2, name: "明火烟雾" },
-  //   { value: 135, name: "机翼保护垫" },
-  //   { value: 148, name: "工装未归位" },
-  //   { value: 335, name: "人员闯入1" },
-  //   { value: 310, name: "未穿反光背心1" },
-  //   { value: 2, name: "明火烟雾1" },
-  //   { value: 135, name: "机翼保护垫1" },
-  //   { value: 148, name: "工装未归位1" },
-  // ];
-
-  const statData = computed(() => props.data.statusCountList);
-
-  const getVioStatData = (index) => {
-    let count = 0;
-    if (statData.value && statData.value.length) {
-      const matchItem = statData.value.find(
-        (item) => item.name === violationHandleCounts[index].value,
-      );
-      if (matchItem) {
-        count = matchItem.value;
-      }
-    }
-    return { ...violationHandleCounts[index], count };
-  };
-
-  const option = computed(() => {
-    return {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)',
-      },
-      legend: {
-        orient: 'horizontial',
-        x: 'center',
-        y: 'bottom',
-        icon: 'circle',
-        width: '80%',
-        height: '28%',
-        type: 'scroll',
-        data: algoData.value.map((item) => item.name),
-        formatter: function (name) {
-          let total = 0;
-          let target;
-          for (let i = 0; i < algoData.value.length; i++) {
-            total += algoData.value[i].value;
-            if (algoData.value[i].name === name) {
-              target = algoData.value[i].value;
-            }
-          }
-          var arr = [
-            '{a|' + name + '}',
-            '{b|' + ' | ' + ((target / total) * 100).toFixed(0) + '%}\n',
-          ];
-          return arr.join('  ');
-        },
-        textStyle: {
-          padding: [8, 0, 0, 0],
-          fontSize: 14,
-          rich: {
-            a: {
-              fontSize: 15,
-            },
-            b: {
-              fontSize: 15,
-              color: '#c1c1c1',
-            },
-          },
-        },
-      },
-      series: [
-        {
-          name: '违规统计',
-          type: 'pie',
-          radius: ['40%', '65%'],
-          center: ['50%', '40%'],
-          labelLine: {
-            show: false,
-          },
-
-          label: {
-            show: false,
-            position: 'center',
-          },
-          data: algoData.value,
-          itemStyle: {
-            borderColor: '#fff',
-            borderWidth: 5,
-          },
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: 20,
-              fontWeight: 'bold',
-            },
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
-          },
-        },
-      ],
-    };
-  });
-
-  const timeTab = ref<TimeTabEnum>(TimeTabEnum.DAY);
-
-  const onCheckTab = (info: { tab: TimeTabEnum; data: string[] }) => {
-    timeTab.value = info.tab;
-    props.getViolations(info.data);
-  };
-</script>
-
-<style scoped>
-  .algo-data {
-    width: 484px;
-    padding: 12px 27px;
-    border-left: 2px solid #e8e8e8;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .chart {
-    width: 100%;
-    height: 450px;
-  }
-
-  .algo-tit {
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 10px;
-    line-height: 44px;
-    color: #2e2e2e;
-  }
-
-  .stat-show {
-    width: 100%;
-    margin-top: 32px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .stat-divider {
-    width: 1px;
-    height: 40px;
-    background: #e9e9e9;
-  }
-</style>

src/views/dashboard/home/components/AlgoDataPanel.vue

@@ -1,354 +0,0 @@
-<template>
-  <div>
-    <div class="algo-header">
-      <span class="algo-tit">算法数据分析</span>
-      <CensusTabs @check-tab="onCheckTab" />
-    </div>
-    <el-divider />
-    <div style="flex-grow: 1; display: flex">
-      <v-chart
-        ref="myChart"
-        class="chart"
-        :option="option"
-        @highlight="handleHighlight"
-        @downplay="handleDownPlay"
-        @click="handleClickChart"
-        @mouseover="handleMouseOver"
-        @mouseout="handleMouseOut" />
-      <el-divider direction="vertical" border-style="solid" />
-      <div class="stat-show">
-        <ViolationStatItem :data="getVioStatData(0)" class="stat-data" />
-        <div class="stat-divider"></div>
-        <ViolationStatItem :data="getVioStatData(1)" class="stat-data" />
-        <ViolationStatItem :data="getVioStatData(2)" class="stat-data" />
-        <div class="stat-divider"></div>
-        <ViolationStatItem :data="getVioStatData(3)" class="stat-data" /> </div
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed, ref, onMounted, onUnmounted } from 'vue';
-  import CensusTabs from './AlgoCensusTabs.vue';
-  import ViolationStatItem from './ViolationStatItem.vue';
-  import { TimeTabEnum, violationHandleCounts } from '../types';
-  import { use } from 'echarts/core';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { PieChart } from 'echarts/charts';
-  import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
-  import { ViolationCount } from '@/api/home/home.ts';
-  import VChart from 'vue-echarts';
-  import * as echarts from 'echarts'; // 保留此行引入，防止诸如*labelLayout*等属性打包后不生效问题
-
-  console.log(echarts); // 此行仅为消除上一行import代码的eslint警告
-
-  const props = defineProps<{
-    data: ViolationCount;
-    getViolations: (range: string[]) => void;
-  }>();
-
-  use([CanvasRenderer, PieChart, TooltipComponent, TitleComponent, LegendComponent]);
-
-  const algoData = computed(() => {
-    let newData: any[] = [];
-    const vioList = props.data.violationAlgoList;
-    if (vioList && vioList.length) {
-      newData = vioList.map((item) => {
-        return {
-          value: item.proportion,
-          name: item.name,
-        };
-      });
-    }
-    return newData;
-  });
-
-  const algoLegendData = computed(() => {
-    return algoData.value.map((item) => item.name);
-  });
-
-  const statData = computed(() => props.data.statusCountList);
-
-  const getVioStatData = (index) => {
-    let count = 0;
-    if (statData.value && statData.value.length) {
-      const matchItem = statData.value.find(
-        (item) => item.name === violationHandleCounts[index].value,
-      );
-      if (matchItem) {
-        count = matchItem.value;
-      }
-    }
-    return { ...violationHandleCounts[index], count };
-  };
-
-  // const titleLeft = ref('');
-  const myChart = ref();
-  let timer;
-  const index = ref(0);
-
-  onMounted(() => {
-    // const contentChart = document.querySelector('.echarts.chart') as HTMLDivElement;
-    // titleLeft.value = contentChart?.offsetWidth * 0.3 + 'px';
-    if (myChart.value !== null) startAutoPlay();
-  });
-
-  onUnmounted(() => {
-    if (myChart.value !== null) stopAutoPlay();
-  });
-
-  function startAutoPlay() {
-    stopAutoPlay();
-    timer = setInterval(function () {
-      myChart.value.dispatchAction({
-        type: 'highlight',
-        dataIndex: index.value,
-      });
-      myChart.value.dispatchAction({
-        type: 'downplay',
-        dataIndex: index.value === 0 ? algoData.value.length - 1 : index.value - 1,
-      });
-      index.value++;
-
-      if (index.value === algoData.value.length) {
-        index.value = 0;
-      }
-    }, 2500);
-  }
-
-  function stopAutoPlay() {
-    clearInterval(timer);
-    let length = algoData.value.length;
-    myChart.value.dispatchAction({
-      type: 'downplay',
-      dataIndex: Array.from({ length }, (_, i) => i),
-    });
-  }
-
-  function pauseAutoPlay(argIndex) {
-    if (myChart.value) {
-      let length = algoData.value.length;
-      index.value = argIndex;
-      stopAutoPlay();
-      myChart.value.dispatchAction({
-        type: 'highlight',
-        dataIndex: index.value,
-      });
-      myChart.value.dispatchAction({
-        type: 'downplay',
-        dataIndex: Array.from({ length }, (_, i) => i).filter((item) => item !== index.value),
-      });
-    }
-  }
-
-  function continueAutoPlay(argIndex) {
-    if (myChart.value) {
-      let length = algoData.value.length;
-      myChart.value.dispatchAction({
-        type: 'downplay',
-        dataIndex: argIndex,
-      });
-      index.value = argIndex + 1 === length ? 0 : argIndex + 1;
-      startAutoPlay();
-    }
-  }
-
-  const handleHighlight = (event) => {
-    if ('name' in event) {
-      const tempIndex = algoData.value.findIndex((item) => item.name === event.name);
-      if (myChart.value) pauseAutoPlay(tempIndex);
-    }
-  };
-
-  const handleDownPlay = (event) => {
-    if ('name' in event) {
-      const tempIndex = algoData.value.findIndex((item) => item.name === event.name);
-      if (myChart.value) continueAutoPlay(tempIndex);
-    }
-  };
-
-  const handleClickChart = (event) => {
-    const { dataIndex } = event;
-    if (myChart.value) pauseAutoPlay(dataIndex);
-  };
-
-  const handleMouseOver = (event) => {
-    const { dataIndex } = event;
-    if (myChart.value) pauseAutoPlay(dataIndex);
-  };
-
-  const handleMouseOut = (event) => {
-    const { dataIndex } = event;
-    if (myChart.value) continueAutoPlay(dataIndex);
-  };
-
-  const option = computed(() => {
-    return {
-      title: {
-        text: '问题占比', // 设置标题文本
-        // left: titleLeft.value, // 标题居中对齐
-        left: '32.5%',
-        top: '37%',
-        textAlign: 'center',
-        textStyle: {
-          fontSize: 20,
-        },
-      },
-      grid: {
-        left: '10px',
-        right: '4%',
-        bottom: '3%',
-      },
-      legend: [
-        {
-          icon: 'circle',
-          orient: 'vertical',
-          type: 'scroll',
-          left: '65%',
-          top: 'center',
-          itemWidth: 10,
-          itemHeight: 10,
-          align: 'left',
-          textStyle: {
-            fontSize: 14,
-            color: '#6e69b2',
-          },
-          data: algoLegendData.value,
-          formatter: function (name) {
-            let maxNameLength = 0;
-            algoData.value.forEach((item) => {
-              if (item.name.length > maxNameLength) maxNameLength = item.name.length;
-            });
-            if (algoData.value && algoData.value.length) {
-              for (var i = 0; i < algoData.value.length; i++) {
-                if (name === algoData.value[i].name) {
-                  return (
-                    '' +
-                    name +
-                    '   '.repeat(maxNameLength - name.length) +
-                    '      ' +
-                    (algoData.value[i].value * 100).toFixed(2) +
-                    '%'
-                  );
-                }
-              }
-            }
-          },
-        },
-      ],
-      series: [
-        {
-          type: 'pie',
-          radius: ['44%', '55%'],
-          center: ['33%', '40%'],
-          avoidLabelOverlap: false,
-          label: {
-            show: false,
-            position: 'outside',
-            fontSize: 16,
-            color: '#000',
-          },
-          labelLine: {
-            show: false,
-          },
-          labelLayout() {
-            return {
-              x: '33%',
-              y: '86%',
-              verticalAlign: 'bottom',
-              align: 'center',
-            };
-          },
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: 16,
-              fontWeight: 'bold',
-              formatter: '{b}:   {d}%',
-            },
-            itemStyle: {
-              borderColor: '#f3f3f3',
-              borderWidth: 3,
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
-          },
-          data: algoData.value,
-        },
-      ],
-    };
-  });
-
-  const timeTab = ref<TimeTabEnum>(TimeTabEnum.DAY);
-
-  const onCheckTab = (info: { tab: TimeTabEnum; data: string[] }) => {
-    timeTab.value = info.tab;
-    props.getViolations(info.data);
-    index.value = 0;
-    startAutoPlay();
-  };
-</script>
-
-<style scoped>
-  .algo-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
-
-  .chart {
-    width: 100%;
-    min-width: 550px;
-    flex-grow: 1;
-    height: 340px;
-  }
-  .el-divider--horizontal {
-    margin: 0px;
-  }
-
-  .algo-tit {
-    font-size: 16px;
-    margin-top: 17px;
-    margin-left: 18px;
-  }
-
-  .stat-show {
-    flex-grow: 0;
-    width: 266px;
-    flex-shrink: 0;
-    font-size: 14px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: 0;
-    margin-top: 72px;
-    margin-bottom: 82px;
-  }
-
-  .stat-data {
-    flex-basis: calc(50% - 1px);
-    padding-bottom: 35px;
-  }
-
-  .stat-divider {
-    width: 1px;
-    height: 40px;
-    background: #e9e9e9;
-  }
-
-  .el-divider--vertical {
-    margin: 0px;
-    height: 339px;
-  }
-
-  /* 控制图例的样式 */
-  ::v-deep .echarts-legend {
-    display: flex;
-    flex-wrap: wrap; /* 图例换行 */
-  }
-
-  ::v-deep .echarts-legend-item {
-    flex: 0 0 50%; /* 每行显示两个图例 */
-  }
-</style>

src/views/dashboard/home/components/CameraInfo.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="camera-info">
-    <span class="info-tit">相机视频流</span>
-    <div>
-      <el-tree-select
-        v-model="selectedCamera"
-        :data="props.data"
-        :render-after-expand="false"
-        :props="treeProp"
-        node-key="code"
-        :default-expand-all="true"
-        @node-click="handleNodeClick"
-      />
-    </div>
-    <div class="video-block">
-      <LiveVideo :url="streamIp" v-if="selectedCamera" />
-      <div v-else style="margin-top: 50px; text-align: center">请选择相机</div>
-    </div>
-    <div class="flex" style="width: 100%">
-      <span class="algo-text">相关算法：</span>
-      <div class="tag-list">
-        <el-tag v-for="item in algoList" class="algo-name" :key="item.id">
-          {{ item.algoInfo.name }}
-        </el-tag>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import LiveVideo from '@/components/LiveVideo/LiveVideo.vue';
-  import { CompanyInfoItem, AlgoConfig } from '@/api/home/home.ts';
-
-  const streamIp = ref('');
-
-  const props = defineProps<{
-    data: CompanyInfoItem[];
-    getAlgoes: (cameraId: number) => Promise<AlgoConfig[]>;
-  }>();
-
-  const treeProp = {
-    label: 'name',
-    disabled: (_, node) => node?.data && node.data.nodeType !== 'camera',
-  };
-
-  const selectedCamera = ref('');
-  const algoList = ref<AlgoConfig[]>([]);
-
-  const handleNodeClick = (node) => {
-    console.log(node);
-    streamIp.value = node.pushstreamIp;
-    props.getAlgoes(node.id).then((res) => {
-      algoList.value = res;
-    });
-  };
-</script>
-
-<style scoped>
-  .camera-info {
-    padding: 12px 30px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .info-tit {
-    font-size: 16px;
-    font-weight: 500;
-    color: #2e2e2e;
-    line-height: 44px;
-    margin-bottom: 10px;
-  }
-
-  .video-block {
-    /* width: 889px;
-  height: 500px; */
-    min-width: 444.5;
-    width: 100%;
-    margin-top: 16px;
-    margin-bottom: 28px;
-    aspect-ratio: 1920/1080;
-    border: 1px solid #e8e8e8;
-  }
-
-  .algo-text {
-    font-size: 14px;
-    font-weight: 400;
-    color: #2e2e2e;
-    line-height: 20px;
-  }
-
-  .tag-list {
-    max-width: 60%;
-    display: flex;
-    margin-left: 16px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
-  .algo-name {
-    margin-right: 12px;
-    margin-bottom: 12px;
-  }
-</style>

src/views/dashboard/home/components/ClickShow.vue

@@ -1,112 +0,0 @@
-<template>
-  <div>
-    <div class="click-header">
-      <div class="click-title">点击量</div>
-      <el-tag type="success" class="click-time">日</el-tag>
-    </div>
-    <el-divider />
-    <div>
-      <div class="click-number">{{ clickData?.todayClicks }}</div>
-      <div class="click-compare">
-        <div class="click-detail">日同比</div>
-        <div>{{ ratio === undefined? '':ratio + '%' }}</div>
-        <el-icon v-if="Number(ratio) > 0" class="ratio-ico-up"><Top /></el-icon>
-        <el-icon v-else-if="Number(ratio) < 0" class="ratio-ico-down"><Bottom /></el-icon>
-      </div>
-    </div>
-    <el-divider />
-    <div class="click-total">
-      <div class="click-detail">总点击量</div>
-      <div style="margin-left: 22px">{{ clickData?.allClicks }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { Top, Bottom } from '@element-plus/icons-vue';
-  import { computed, onMounted } from 'vue';
-  import usePanel from '../hooks/usePanel';
-
-  const usePanelInfo = usePanel();
-  const { getPanelUserRecord, clickData } = usePanelInfo;
-  onMounted(() => {
-    getPanelUserRecord();
-  });
-  const ratio = computed(() => {
-    if (!clickData.value?.yesterdayClicks) {
-      return undefined;
-    }
-    if (clickData.value?.yesterdayClicks! === 0 && clickData.value?.todayClicks! !== 0) {
-      return 100;
-    } else if (clickData.value?.yesterdayClicks! === 0 && clickData.value?.todayClicks! === 0) {
-      return 0;
-    } else {
-      return Number(
-        ((clickData.value?.todayClicks! - clickData.value?.yesterdayClicks!) * 100) /
-          clickData.value?.yesterdayClicks!,
-      ).toFixed(2);
-    }
-  });
-</script>
-
-<style scoped>
-  .click-header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .click-title {
-    font-size: 16px;
-    margin-left: 24px;
-    margin-top: 17px;
-    margin-bottom: 10px;
-  }
-  .click-time {
-    margin-top: 18px;
-    margin-right: 23px;
-    font-size: 12px;
-  }
-
-  .el-divider--horizontal {
-    margin: 0px;
-  }
-
-  .click-number {
-    margin-top: 8px;
-    margin-left: 24px;
-    margin-bottom: 20px;
-    font-size: 30px;
-  }
-
-  .click-compare {
-    margin-left: 24px;
-    margin-bottom: 20px;
-    display: flex;
-  }
-
-  .click-detail {
-    font-size: 14px;
-    margin-right: 8px;
-    color: rgba(0, 0, 0, 0.65);
-  }
-
-  .ratio-ico-up {
-    color: red;
-    margin-top: 4px;
-  }
-
-  .ratio-ico-right {
-    margin-top: 4px;
-  }
-
-  .ratio-ico-down {
-    color: green;
-    margin-top: 3px;
-  }
-
-  .click-total {
-    margin-left: 24px;
-    margin-top: 8px;
-    display: flex;
-  }
-</style>

src/views/dashboard/home/components/Header.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="header">
-    <div class="header-data">
-      <div>
-        <div class="data-title">算法总量</div>
-        <div class="algorithm-total">{{ panelData?.algoCount }}</div>
-      </div>
-      <el-divider direction="vertical" border-style="solid" />
-      <div>
-        <div class="data-title">在线相机</div>
-        <div class="camera-data">
-          <div class="camera-online">{{ panelData?.onlineCameraCount }}</div>
-          <div class="camera-total">/{{ panelData?.totalCameraCount }}</div>
-        </div>
-      </div>
-      <el-divider direction="vertical" border-style="solid" />
-      <div>
-        <div style="margin-left: 20px" class="data-title">用户总量</div>
-        <div class="user-total">{{ panelData?.userCount }}</div>
-      </div>
-    </div>
-    <!-- <div class="header-user">
-      <div class="user-greet">
-        <img src="~@/assets/icons/user-logo.png" class="img-user" alt="" />
-        <div class="greet-content">早安,{{ getUsername }},祝你开心每一天</div>
-      </div>
-      <div class="user-guide">天眼管理中台 | 配置安全管控平台</div>
-    </div> -->
-  </div>
-</template>
-
-<script setup lang="ts">
-  // import { useUserStore } from '@/store/modules/user';
-  import { onMounted } from 'vue';
-  import usePanel from '../hooks/usePanel';
-
-  const usePanelInfo = usePanel();
-  const { panelData, getPanelCount } = usePanelInfo;
-  onMounted(() => {
-    getPanelCount();
-  });
-
-  // const userStore = useUserStore();
-
-  // const getUsername = computed(() => {
-  //   // return userStore.getUserInfo.username;
-  //   return userStore.getUserInfo.nickname;
-  // });
-</script>
-
-<style scoped>
-  .header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .header-data {
-    margin-left: 28px;
-    margin-top: 32px;
-    display: flex;
-  }
-  .header-user {
-    margin-top: 28px;
-    margin-right: 32px;
-    /* display: flex; */
-  }
-
-  .algorithm-total {
-    font-size: 30px;
-    color: #1890ff;
-    margin-left: 22px;
-    margin-top: 4px;
-    text-align: center;
-  }
-
-  .el-divider--vertical {
-    height: 40px;
-    margin-left: 32px;
-    margin-top: 11px;
-    margin-right: 32px;
-  }
-
-  .camera-data {
-    display: flex;
-    margin-top: 4px;
-    text-align: center;
-  }
-
-  .camera-online {
-    font-size: 30px;
-    color: #1890ff;
-  }
-
-  .camera-total {
-    color: rgb(0, 0, 0, 0.45);
-    font-size: 20px;
-    margin-left: 4px;
-    margin-top: 9px;
-  }
-
-  .user-total {
-    font-size: 30px;
-    color: #1890ff;
-    margin-top: 4px;
-    text-align: center;
-  }
-
-  .data-title {
-    color: rgb(0, 0, 0, 0.65);
-    font-size: 14px;
-  }
-
-  .user-greet {
-    display: flex;
-  }
-
-  .greet-content {
-    margin-top: 5px;
-    margin-left: 16px;
-    margin-bottom: 9px;
-    color: rgb(0, 0, 0, 0.85);
-    font-size: 20px;
-  }
-
-  .user-guide {
-    color: rgb(0, 0, 0, 0.45);
-    font-size: 14px;
-    margin-left: 52px;
-  }
-
-  .img-user {
-    width: 36px;
-    height: 36px;
-  }
-</style>

src/views/dashboard/home/components/QuickAction.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <div class="quick-title">快捷操作</div>
-    <!-- <el-divider /> -->
-    <div class="quick-content">
-      <div v-for="item in quickList" class="quick-go" @click="goPage(item.address)">
-        <img :src="item.img" alt="" />
-        <div class="quick-name">{{ item.name }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-  // import CameraConfig from '@/assets/camera/camera-config.png';
-  // import CameraPlayback from '@/assets/camera/camera-playback.png';
-  import CameraPreview from '@/assets/camera/camera-preview.png';
-  // import AlgoManage from '@/assets/camera/algorithm-manage.png';
-  import UserManage from '@/assets/camera/user-manage.png';
-  import OrgaManage from '@/assets/camera/organization-manage.png';
-  import { useRouter } from 'vue-router';
-  import { ElMessage } from 'element-plus';
-
-  const router = useRouter();
-
-  const quickList = ref([
-    // { name: '相机配置', img: CameraConfig, address: '/cameras/overview' },
-    // { name: '相机回放', img: CameraPlayback, address: '' },
-    { name: '相机预览', img: CameraPreview, address: '/algorithm/config' },
-    // { name: '算法管理', img: AlgoManage, address: '/cameras/algo-manager' },
-    { name: '用户管理', img: UserManage, address: '/user/account' },
-    { name: '组织管理', img: OrgaManage, address: '/user/department' },
-  ]);
-
-  const goPage = (address) => {
-    if (!address) {
-      ElMessage({
-        message: '该通道暂未开放',
-        type: 'warning',
-      });
-      return;
-    }
-    router.push(address);
-  };
-</script>
-
-<style scoped>
-  .quick-title {
-    font-size: 16px;
-    margin-top: 19px;
-    margin-left: 24px;
-    margin-bottom: 10px;
-  }
-
-  /* .el-divider--horizontal {
-    margin: 0px;
-  } */
-
-  .quick-go {
-    width: 280px;
-    height: 149px;
-    margin-top: 2px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: white;
-  }
-
-  .quick-go:hover {
-    box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-  }
-
-  .quick-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    background-color: #f0f2f5;
-  }
-
-  .quick-name {
-    margin-top: 19px;
-    font-size: 16px;
-  }
-</style>

src/views/dashboard/home/components/Score.vue

@@ -1,300 +0,0 @@
-<template>
-  <div class="score-layout">
-    <div class="score-left">
-      <div class="score-header">
-        <span class="score-title">综合评分</span>
-        <el-radio-group v-model="timeSelect" class="score-select" @change="changeTime">
-          <el-radio-button v-for="item in ScoreTimeList" :label="item.label" :value="item.value" />
-        </el-radio-group>
-      </div>
-      <el-divider />
-      <div class="score-show">
-        <VChart
-          v-if="scoreInfoList.length > 0"
-          class="pic-show"
-          :option="options"
-          :style="{ height: updateChartHeight }"
-        />
-        <div v-else class="pic-none">暂无数据</div>
-      </div>
-    </div>
-    <div class="score-divider" :style="{ height: updateLineHeight }"></div>
-    <div class="score-right">
-      <div class="concern-title">重点关注车间</div>
-      <ul v-if="workshopList.length > 0" class="concern-workspace">
-        <li v-for="workshop in workshopList">{{ workshop }}</li>
-      </ul>
-      <div class="score-tip">
-        <el-icon><Warning /></el-icon>
-        <div class="tip-content">动态显示当前安全评分最低的三个车间</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, onMounted } from 'vue';
-  import { ScoreTimeList, TimeEnum } from '../types';
-  import { computed } from 'vue';
-  import VChart from 'vue-echarts';
-  import { use } from 'echarts/core';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { BarChart } from 'echarts/charts';
-  import { Warning } from '@element-plus/icons-vue';
-  import {
-    TooltipComponent,
-    LegendComponent,
-    GridComponent,
-    DataZoomComponent,
-  } from 'echarts/components';
-  import useScore from '../hooks/useScoreInfo';
-  import useWorkshopTop from '../hooks/useWorkshopTop';
-
-  const useTop = useWorkshopTop();
-  const { openTopWs, workshopList } = useTop;
-
-  onMounted(() => {
-    openTopWs();
-    console.log('workshopList', workshopList.value);
-
-    const contentDom = document.querySelector('.content') as HTMLDivElement;
-    if (contentDom) {
-      updateChartHeight.value = contentDom.offsetHeight - 454 + 'px';
-      updateLineHeight.value = contentDom.offsetHeight - 404 + 'px';
-    } else {
-      console.error('@@@@');
-    }
-
-   
-
-  });
-
-  const useHomeScore = useScore();
-  const {
-    scoreInfoList,
-    getDailyScoreList,
-    getWeeklyScoreList,
-    getMonthlyScoreList,
-    getQuarterlyScoreList,
-  } = useHomeScore;
-
-  use([
-    CanvasRenderer,
-    BarChart,
-    TooltipComponent,
-    LegendComponent,
-    GridComponent,
-    DataZoomComponent,
-  ]);
-  const timeSelect = ref<TimeEnum>(TimeEnum.DAY);
-  //const workspaceList = ['车间1', '车间2', '车间3'];
-
-  // const updateChartHeight = computed(() => window.innerHeight - 670 + 'px');
-  // const updateLineHeight = computed(() => window.innerHeight - 618 + 'px');
-  const updateChartHeight = ref('');
-  const updateLineHeight = ref('');
-
-  const dataZoomConfig = computed(() => [
-    {
-      type: 'slider',
-      show: true,
-      showDetail: false,
-      showDataShadow: false,
-      xAxisIndex: [0],
-      start: 0,
-      end: Number(9 / scoreInfoList.value.length) * 100,
-      handleSize: 1,
-      height: 7,
-      bottom: 2,
-      brushSelect: false,
-      handleStyle: {
-        opacity: 0,
-      },
-    },
-    {
-      // 没有下面这块的话，只能拖动滚动条，
-      // 鼠标滚轮在区域内不能控制外部滚动条
-      type: 'inside',
-      // 控制哪个轴，如果是number表示控制一个轴，
-      // 如果是Array表示控制多个轴。此处控制第二根轴
-      xAxisIndex: [0, 1],
-      // 滚轮是否触发缩放
-      zoomOnMouseWheel: false,
-      // 鼠标移动能否触发平移
-      moveOnMouseMove: true,
-      // 鼠标滚轮能否触发平移
-      moveOnMouseWheel: true,
-    },
-  ]);
-
-  const options = computed(() => {
-    return {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'none',
-        },
-        formatter: (v) => {
-          let [a] = v;
-          const workshopList = scoreInfoList.value.find(
-            (item) => item.date === a.name,
-          )?.workshopList;
-          return `
-            <div class='u-p-2'>
-                <div>评分最低的三个车间</div>
-                ${workshopList?.map((t) => `<span style="color: blue;">•</span> ${t}`).join('<br>')}
-            </div>
-        `;
-        },
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '4%',
-        top: '10%',
-        containLabel: true,
-      },
-      xAxis: {
-        type: 'category',
-        data: scoreInfoList.value.map((item) => item.date),
-        axisLabel: {
-          interval: 0, // 强制显示所有标签
-          //rotate: dataChart.value.map((item) => item.name).length > 10 ? 45 : 0, // 旋转角度
-          margin: 20, // 调整标签与轴线的距离，避免标签被遮挡
-        },
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [
-        {
-          data: scoreInfoList.value.map((item) => item.score),
-          type: 'bar',
-        },
-      ],
-      dataZoom: scoreInfoList.value.length > 9 ? dataZoomConfig.value : null,
-      // 启用数据区域缩放
-    };
-  });
-
-  const changeTime = () => {
-    switch (timeSelect.value) {
-      case TimeEnum.DAY:
-        getDailyScoreList();
-        break;
-
-      case TimeEnum.WEEK:
-        getWeeklyScoreList();
-        break;
-
-      case TimeEnum.MONTH:
-        getMonthlyScoreList();
-        break;
-      case TimeEnum.QUARTER:
-        getQuarterlyScoreList();
-        break;
-    }
-  };
-</script>
-
-<style scoped>
-  .score-layout {
-    display: flex;
-  }
-
-  .score-left {
-    display: flex;
-    /* width: 965px; */
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .score-right {
-    width: 158px;
-    flex-shrink: 0;
-  }
-
-  .score-header {
-    display: flex;
-    justify-content: space-between;
-    height: 50px;
-  }
-
-  .score-show {
-    flex-grow: 1;
-    /* width: calc(100% - 660px); */
-    width: 100%;
-    min-width: 500px;
-    overflow-x: auto;
-  }
-
-  .score-title {
-    font-size: 16px;
-    margin-top: 17px;
-    margin-left: 18px;
-  }
-  .score-select {
-    /* flex-grow: 1; */
-    margin-right: 10px;
-  }
-
-  .score-divider {
-    width: 1px;
-    background: #e9e9e9;
-  }
-
-  .el-divider--horizontal {
-    margin: 0px;
-  }
-
-  .pic-show {
-    flex-grow: 1;
-  }
-
-  .concern-title {
-    margin-left: 20px;
-    margin-top: 51px;
-    font-size: 14px;
-  }
-  .concern-workspace {
-    margin-left: 23px;
-    margin-top: 24px;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.65);
-  }
-
-  li {
-    margin-bottom: 16px;
-  }
-  li:before {
-    content: '•';
-    color: red;
-    display: inline-block;
-    margin-right: 20px;
-    width: 8px;
-    height: 8px;
-    font-size: 16px;
-    line-height: 1;
-  }
-
-  .score-tip {
-    display: flex;
-    margin-top: 20px;
-    margin-left: 14px;
-  }
-
-  .tip-content {
-    margin-left: 16px;
-    margin-right: 14px;
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 10px;
-  }
-
-  .pic-none {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    font-size: 20px;
-  }
-</style>

src/views/dashboard/home/components/ViolationStatItem.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="stat-item">
-    <span class="stat-type" :style="{ color: props.data.color }">
-      {{ props.data.label }}
-    </span>
-    <span class="stat-count">{{ props.data.count }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = defineProps<{
-    data: { label: string; value: string; color: string; count: number };
-  }>();
-</script>
-
-<style scoped>
-  .stat-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .stat-type {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    margin-bottom: 4px;
-  }
-
-  .stat-count {
-    font-size: 24px;
-    color: #2e2e2e;
-    line-height: 32px;
-  }
-</style>

src/views/dashboard/home/hooks/useHomeInfo.ts

@@ -1,67 +0,0 @@
-import { ref, onMounted, computed } from 'vue';
-import {
-  CompanyInfoItem,
-  getAuthSceneList,
-  getAlgoByCameraId,
-  ViolationsQueryParam,
-  ViolationCount,
-  getViolation,
-} from '@/api/home/home.ts';
-import dayjs from 'dayjs';
-import { useUserStore } from '@/store/modules/user.ts';
-import { storeToRefs } from 'pinia';
-
-export function useHomeInfo() {
-  const userStore = useUserStore();
-  const { info } = storeToRefs(userStore);
-
-  const userName = computed(() => info.value.username);
-
-  const sceneData = ref<CompanyInfoItem[]>([]);
-  const violationData = ref<ViolationCount>({} as ViolationCount);
-
-  const getSceneData = () => {
-    getAuthSceneList().then((res) => {
-      sceneData.value = res;
-    });
-  };
-
-  const getAlgoList = (cameraId: number) => {
-    return getAlgoByCameraId({ cameraId }).then((res) => {
-      return res;
-    });
-  };
-
-  const getViolationCount = (range: string[]) => {
-    const params: ViolationsQueryParam = {
-      startDate: range[0],
-      endDate: range[1],
-      userName: userName.value,
-    };
-    getViolation(params.startDate, params.endDate).then((res) => {
-      violationData.value = res;
-    });
-  };
-
-  const formatDay = (day) => {
-    return dayjs(day).format('YYYY-MM-DD');
-  };
-
-  onMounted(() => {
-    //场景树不再首页拉取
-    // getSceneData();
-
-    const today = formatDay(dayjs());
-    getViolationCount([today, today]);
-  });
-
-  return {
-    sceneData,
-    violationData,
-    getSceneData,
-    getAlgoList,
-    getViolationCount,
-  };
-}
-
-export default useHomeInfo;

src/views/dashboard/home/hooks/usePanel.ts

@@ -1,33 +0,0 @@
-import { onMounted, ref } from 'vue';
-import { CountType, RecordType, getCount, getUserRecord } from '@/api/home/home-panel';
-
-export function usePanelInfo() {
-  const panelData = ref<CountType>();
-  const clickData = ref<RecordType>();
-
-  const getPanelCount = () => {
-    getCount().then((res) => {
-      panelData.value = res;
-    });
-  };
-
-  const getPanelUserRecord = () => {
-    getUserRecord().then((res) => {
-      clickData.value = res;
-    });
-  };
-
-  // onMounted(() => {
-  //   getPanelCount();
-  //   getPanelUserRecord();
-  // });
-
-  return {
-    panelData,
-    clickData,
-    getPanelCount,
-    getPanelUserRecord,
-  };
-}
-
-export default usePanelInfo;

src/views/dashboard/home/hooks/useScoreInfo.ts

@@ -1,49 +0,0 @@
-import { ref, onMounted } from 'vue';
-import {
-  ScoreType,
-  getDailyScore,
-  getWeeklyScore,
-  getMonthlyScore,
-  getQuarterlyScore,
-} from '@/api/home/home-score.ts';
-
-export function useScoreInfo() {
-  const scoreInfoList = ref<ScoreType[]>([]);
-
-  const getDailyScoreList = () => {
-    getDailyScore().then((res) => {
-      scoreInfoList.value = res;
-    });
-  };
-
-  const getWeeklyScoreList = () => {
-    getWeeklyScore().then((res) => {
-      scoreInfoList.value = res;
-    });
-  };
-
-  const getMonthlyScoreList = () => {
-    getMonthlyScore().then((res) => {
-      scoreInfoList.value = res;
-    });
-  };
-
-  const getQuarterlyScoreList = () => {
-    getQuarterlyScore().then((res) => {
-      scoreInfoList.value = res;
-    });
-  };
-
-  onMounted(() => {
-    getDailyScoreList();
-  });
-  return {
-    scoreInfoList,
-    getDailyScoreList,
-    getWeeklyScoreList,
-    getMonthlyScoreList,
-    getQuarterlyScoreList,
-  };
-}
-
-export default useScoreInfo;

src/views/dashboard/home/hooks/useWorkshopTop.ts

@@ -1,26 +0,0 @@
-import { ref } from 'vue';
-import useWebsocket from '@/hooks/setting/useWebsocket.ts';
-
-export const useWorkshopTop = () => {
-  const workshopList = ref<Array<string>>([]);
-  const { start } = useWebsocket(handleWorkshopData);
-  const openTopWs = () => {
-    const msg = JSON.stringify({
-      biz_type: 'workshop_score_ranking',
-    });
-    start({ msg });
-  };
-
-  function handleWorkshopData(data: string) {
-    const res = JSON.parse(data).data;
-    workshopList.value = res['workshopList'];
-    console.log('workshopList', workshopList.value);
-  }
-
-  return {
-    openTopWs,
-    workshopList,
-  };
-};
-
-export default useWorkshopTop;

src/views/dashboard/home/types/index.ts

@@ -1,73 +0,0 @@
-export enum TimeTabEnum {
-  DAY = 'day',
-  WEEK = 'week',
-  MONTH = 'month',
-  RANGE = 'range',
-}
-
-export enum TimeEnum {
-  DAY = 'day',
-  WEEK = 'week',
-  MONTH = 'month',
-  QUARTER = 'quarter',
-}
-
-export const timeTypeList = [
-  {
-    label: '今日',
-    value: TimeTabEnum.DAY,
-  },
-  {
-    label: '本周',
-    value: TimeTabEnum.WEEK,
-  },
-  {
-    label: '本月',
-    value: TimeTabEnum.MONTH,
-  },
-];
-
-export const ScoreTimeList = [
-  {
-    label: '日',
-    value: TimeEnum.DAY,
-  },
-  {
-    label: '周',
-    value: TimeEnum.WEEK,
-  },
-  {
-    label: '月',
-    value: TimeEnum.MONTH,
-  },
-  {
-    label: '季度',
-    value: TimeEnum.QUARTER,
-  },
-];
-
-export enum ViolationHandleStat {
-  // UNTREAT = 'untreat',
-  // TREATED = 'treated',
-  // OVERTIME = 'overtime',
-  // LONGTIME = 'longtime',
-  UNTREAT = '1',
-  TREATED = '2',
-  OVERTIME = '3',
-  LONGTIME = '4',
-}
-
-export const violationHandleCounts = [
-  { label: '未处理', value: ViolationHandleStat.UNTREAT, color: '#FAAD14' },
-  { label: '已处理', value: ViolationHandleStat.TREATED, color: '#52C41A' },
-  {
-    label: '超期未处理',
-    value: ViolationHandleStat.OVERTIME,
-    color: '#FF4D4F',
-  },
-  {
-    label: '长期未处理',
-    value: ViolationHandleStat.LONGTIME,
-    color: '#FF4D4F',
-  },
-];

src/views/dashboard/workplace/workplace.vue

@@ -1,303 +0,0 @@
-<template>
-  <PageWrapper>
-    <el-card shadow="hover" class="custom-box-card">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <span class="text-base">工作台</span>
-        </div>
-      </template>
-      <el-row :gutter="12">
-        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-          <div class="flex items-center">
-            <div>
-              <el-avatar :size="64" :src="schoolboy" />
-            </div>
-            <div>
-              <p class="px-4 text-xl">早安，Ah jung，开始您一天的工作吧！</p>
-              <p class="px-4 font-extralight">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
-            </div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-          <div class="flex justify-end w-full mt-4 sm:mt-0">
-            <div class="flex flex-col justify-center flex-1 text-center md:text-right">
-              <span class="text-secondary">项目数</span>
-              <span class="text-2xl">16</span>
-            </div>
-            <div class="flex flex-col justify-center flex-1 text-center md:text-right">
-              <span class="text-secondary">待办</span>
-              <span class="text-2xl">3/15</span>
-            </div>
-            <div class="flex flex-col justify-center flex-1 text-center md:text-right">
-              <span class="text-secondary">消息</span>
-              <span class="text-2xl">35</span>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-    </el-card>
-
-    <el-row :gutter="12" class="mt-0">
-      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mt-2">
-        <!-- 项目 -->
-        <el-card shadow="hover" class="custom-box-card project-card-wrap">
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-base">项目</span>
-            </div>
-          </template>
-          <div class="flex flex-wrap project-card">
-            <el-card shadow="hover" class="cursor-pointer project-card-item" hoverable>
-              <div class="flex flex-row items-center">
-                <GithubOutlined class="w-10" />
-                <span class="ml-4 text-lg">Github</span>
-              </div>
-              <div class="flex h-10 mt-2 overflow-hidden font-extralight">
-                是一个面向开源及私有软件项目的托管平台。
-              </div>
-              <div class="flex h-10 mt-2 font-extralight"> 开源君，2021-07-04 </div>
-            </el-card>
-            <el-card
-              shadow="hover"
-              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-              hoverable
-            >
-              <div class="flex items-center">
-                <TaobaoCircleOutlined class="w-10" style="color: #42b983" />
-                <span class="ml-4 text-lg">淘宝网</span>
-              </div>
-              <div class="flex h-10 mt-2 overflow-hidden font-extralight">
-                只有你想不到，没有你淘不到
-              </div>
-              <div class="flex h-10 mt-2 font-extralight"> 购物天地 2021-04-01</div>
-            </el-card>
-            <el-card
-              shadow="hover"
-              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-              hoverable
-            >
-              <div class="flex items-center">
-                <Html5Outlined class="w-10" style="color: #e44c27" />
-                <span class="ml-4 text-lg">Html5</span>
-              </div>
-              <div class="flex h-10 mt-2 overflow-hidden font-extralight">
-                HTML5是互联网的下一代标准。
-              </div>
-              <div class="flex h-10 mt-2 font-extralight"> 撸码也是一种艺术 2021-04-01 </div>
-            </el-card>
-            <el-card
-              shadow="hover"
-              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-              hoverable
-            >
-              <div class="flex items-center">
-                <WeiboCircleOutlined class="w-10" style="color: #dd0031" />
-                <span class="ml-4 text-lg">微博</span>
-              </div>
-              <div class="flex h-10 mt-2 overflow-hidden font-extralight">
-                分享简短实时信息的社交平台。
-              </div>
-              <div class="flex h-10 mt-2 font-extralight"> 分享君 2021-07-04。 </div>
-            </el-card>
-            <el-card
-              shadow="hover"
-              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-              hoverable
-            >
-              <div class="flex items-center">
-                <QqOutlined class="w-10" style="color: #61dafb" />
-                <span class="ml-4 text-lg">腾讯QQ</span>
-              </div>
-              <div class="flex h-10 mt-2 overflow-hidden font-extralight">
-                一款基于互联网的即时通信软件。
-              </div>
-              <div class="flex h-10 mt-2 font-extralight"> 00后天地 2021-07-04。 </div>
-            </el-card>
-            <el-card
-              shadow="hover"
-              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-              hoverable
-            >
-              <div class="flex items-center">
-                <AlipayCircleOutlined class="w-10" style="color: #61dafb" />
-                <span class="ml-4 text-lg">支付宝</span>
-              </div>
-              <div class="flex h-10 mt-2 overflow-hidden font-extralight">
-                致力于为企业和个人提供，简单、安全、快速、支付解决方案。
-              </div>
-              <div class="flex h-10 mt-2 font-extralight"> 支付工具 2021-07-04 </div>
-            </el-card>
-          </div>
-        </el-card>
-        <!-- 动态 -->
-        <el-card shadow="hover" class="mt-3 custom-box-card">
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-base">动态</span>
-            </div>
-          </template>
-          <ul class="divide-y divide-gray-300 divide-solid">
-            <li v-for="(item, index) in dynamicList" :key="index" class="flex p-4">
-              <div>
-                <el-avatar :size="40" :src="schoolboy" />
-              </div>
-              <div class="ml-4">
-                <p class="text-base">{{ item.title }}</p>
-                <p class="text-sm font-extralight">{{ item.date }}</p>
-              </div>
-            </li>
-          </ul>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mt-2">
-        <el-card shadow="hover" class="custom-box-card project-card-wrap">
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-base">快捷操作</span>
-            </div>
-          </template>
-          <div class="flex flex-wrap project-card">
-            <el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
-              <div class="flex flex-col justify-center font-extralight">
-                <span class="text-center">
-                  <DashboardOutlined class="w-8" style="color: #68c755" />
-                </span>
-                <span class="text-center text-lx">主控台</span>
-              </div>
-            </el-card>
-            <el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
-              <div class="flex flex-col justify-center font-extralight">
-                <span class="text-center">
-                  <ProfileOutlined class="w-8" style="color: #fab251" />
-                </span>
-                <span class="text-center text-lx">列表</span>
-              </div>
-            </el-card>
-            <el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
-              <div class="flex flex-col justify-center font-extralight">
-                <span class="text-center">
-                  <FileProtectOutlined class="w-8" style="color: #1890ff" />
-                </span>
-                <span class="text-center text-lx">表单</span>
-              </div>
-            </el-card>
-            <el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
-              <div class="flex flex-col justify-center font-extralight">
-                <span class="text-center">
-                  <ApartmentOutlined class="w-8" style="color: #f06b96" />
-                </span>
-                <span class="text-center text-lx">权限管理</span>
-              </div>
-            </el-card>
-            <el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
-              <div class="flex flex-col justify-center font-extralight">
-                <span class="text-center">
-                  <SettingOutlined class="w-8" style="color: #7238d1" />
-                </span>
-                <span class="text-center text-lx">系统管理</span>
-              </div>
-            </el-card>
-            <el-card shadow="hover" size="small" class="cursor-pointer project-card-item" hoverable>
-              <div class="flex flex-col justify-center font-extralight">
-                <span class="text-center">
-                  <MailOutlined class="w-8" style="color: #5cdbd3" />
-                </span>
-                <span class="text-center text-lx">消息</span>
-              </div>
-            </el-card>
-          </div>
-        </el-card>
-        <!-- 图片 -->
-        <el-card shadow="hover" class="mt-3 custom-box-card"
-          ><img src="~@/assets/images/Business.svg" class="w-full"
-        /></el-card>
-      </el-col>
-    </el-row>
-  </PageWrapper>
-</template>
-
-<script lang="ts" setup>
-  import schoolboy from '@/assets/images/schoolboy.png';
-  import {
-    GithubOutlined,
-    DashboardOutlined,
-    ProfileOutlined,
-    FileProtectOutlined,
-    SettingOutlined,
-    ApartmentOutlined,
-    Html5Outlined,
-    MailOutlined,
-    TaobaoCircleOutlined,
-    WeiboCircleOutlined,
-    QqOutlined,
-    AlipayCircleOutlined,
-  } from '@vicons/antd';
-
-  const dynamicList = [
-    {
-      title: 'Ah Jung 刚才把工作台页面随便写了一些，凑合能看了！',
-      date: '2021-07-04 22:37:16',
-    },
-    {
-      title: 'Ah Jung 在 开源组 创建了项目 naive-ui-admin？',
-      date: '2021-07-04 09:37:16',
-    },
-    {
-      title: '@风清扬，向naive-ui-admin提交了一个bug，抽时间看看吧！',
-      date: '2021-07-04 22:37:16',
-    },
-    {
-      title: '技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！',
-      date: '2021-07-04 09:37:16',
-    },
-    {
-      title: '上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！',
-      date: '2021-07-04 20:37:16',
-    },
-  ];
-</script>
-
-<style lang="scss" scoped>
-  // 处理栅格
-  .el-row {
-    padding-top: 6px;
-    margin: -6px;
-    .el-row {
-      padding-top: 0;
-    }
-  }
-  .el-col {
-    padding-top: 6px;
-    padding-bottom: 6px;
-  }
-  // 卡片定制
-  .custom-box-card {
-    border: none;
-  }
-  .project-card-wrap {
-    > :deep(.el-card__body) {
-      padding: 0;
-      .project-card {
-        &-item {
-          width: 33.333333%;
-          border: none;
-          border-radius: inherit;
-          border-right: 1px solid var(--el-border-color-base);
-          border-bottom: 1px solid var(--el-border-color-base);
-          &:nth-child(3n) {
-            border-right: none;
-          }
-          &:nth-child(n + 4) {
-            border-bottom: none;
-          }
-        }
-      }
-    }
-    .el-card.is-always-shadow {
-      box-shadow: none;
-    }
-    svg {
-      display: inline-block;
-    }
-  }
-</style>

src/views/disaster/disaster-warning/src/components/ViewDefenseNoticeItem.vue

@@ -1,13 +1,180 @@
 <template>
   <div class="info-container">
-    {{ id }}
+    <header class="info-container__header">
+      <span class="title">{{ defenseNoticeDetail?.noticeTitle }}</span>
+      <div class="disaster">
+        <p class="info-item">
+          类型：<span class="info-content">{{ defenseNoticeDetail?.disasterType }}</span>
+        </p>
+        <p class="info-item">
+          灾害等级：<span class="info-content">{{ defenseNoticeDetail?.disasterLevel }}</span>
+        </p>
+      </div>
+      <span class="publish-info">
+        <p class="info-item">
+          发布人：<span class="info-content"
+            >{{ defenseNoticeDetail?.createUser }}{{ defenseNoticeDetail?.publishTime }}</span
+          >
+        </p>
+      </span>
+    </header>
+    <section class="divider"></section>
+    <section class="content">
+      <div v-html="defenseNoticeDetail?.noticeContent"></div>
+    </section>
+    <section class="attachment">
+      <span class="info-content">附件（{{ defenseNoticeDetail?.noticeAttachment.length }}）</span>
+      <a @click="handleDownloadAll">下载全部</a>
+      <div class="attachment-list">
+        <div
+          class="attachment-item"
+          v-for="item in defenseNoticeDetail?.noticeAttachment"
+          :key="item.id"
+          @click="handlePreview(item)"
+        >
+          <span class="attachment-item--name">{{ item.fileName }}</span>
+          <div class="attachment-item--footer">
+            <div class="info">
+              <img :src="FILE_TYPE_ICON[item.fileType as keyof typeof FILE_TYPE_ICON]" />
+              <span>{{ item.fileSize }}</span>
+            </div>
+            <a @click="handleDownload(item.downloadUrl)">下载</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section>
+      <vue-office-docx src="http://192.168.13.102:9000/skyeye-v4/TEST/test.docx" style="width: 100%; height: 500px;" />
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-  const porps = defineProps<{
+  import { ref, onMounted } from 'vue';
+  import { FILE_TYPE_ICON } from '@/views/disaster/constant';
+  import { getDefenseNoticeDetail } from '@/api/disaster-warning';
+  import type { DefenseNoticeDetailResponse, DefenseNoticeAttachment } from '@/types/disaster-warning';
+  import VueOfficeDocx from '@vue-office/docx'
+  import '@vue-office/docx/lib/index.css'
+
+
+  const props = defineProps<{
     id: number;
   }>();
+
+  const defenseNoticeDetail = ref<DefenseNoticeDetailResponse>();
+  const handleDownloadAll = () => {
+    defenseNoticeDetail.value?.noticeAttachment.forEach((item) => {
+      if (item.downloadUrl) {
+        window.open(item.downloadUrl, '_blank');
+      }
+    });
+  };
+  const handleDownload = (fileUrl: string) => {
+    window.open(fileUrl, '_blank');
+  };
+  const handlePreview = (item: DefenseNoticeAttachment) => {
+    if (item.fileType === 'pdf') {
+      window.open(item.downloadUrl, '_blank');
+    }
+  };
+
+  onMounted(() => {
+    getDefenseNoticeDetail(props.id).then((res) => {
+      defenseNoticeDetail.value = res;
+    });
+  });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .info-container {
+    width: 100%;
+    height: 100%;
+    &__header {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .title {
+    font-size: 20cpx;
+    font-weight: 600;
+    color: rgba($text-color, 0.85);
+    margin-bottom: 18cpx;
+  }
+  .disaster {
+    display: flex;
+    gap: 370cpx;
+    margin-bottom: 8cpx;
+  }
+  .info-item {
+    color: rgba($text-color, 0.85);
+  }
+  .info-content,
+  .content {
+    color: rgba($text-color, 0.65);
+  }
+
+  .content {
+    max-height: 500cpx;
+    overflow-y: auto;
+    white-space: pre-wrap;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: #979797;
+    margin-top: 18cpx;
+    margin-bottom: 18cpx;
+  }
+  .attachment {
+    max-height: 150cpx;
+    overflow-y: auto;
+    margin-top: 18cpx;
+    a {
+      color: $primary-color;
+      cursor: pointer;
+    }
+  }
+  .attachment-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10cpx;
+    margin-top: 10cpx;
+  }
+  .attachment-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 220cpx;
+    height: 81cpx;
+    padding: 16cpx 10cpx;
+    background: #eee;
+    border-radius: 8cpx;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    &:hover {
+      background: #ddd;
+      box-shadow: 0 0 10cpx rgba(0, 0, 0, 0.1);
+    }
+    &--name {
+      font-size: 14cpx;
+      color: #333;
+    }
+    &--footer {
+      @include flex-center;
+      justify-content: space-between;
+      .info {
+        @include flex-center;
+        gap: 2cpx;
+        img {
+          width: 16cpx;
+          height: 16cpx;
+        }
+        span {
+          color: #999;
+        }
+      }
+    }
+  }
+</style>