feat(组件): 数据看板接口

package.json

@@ -32,7 +32,6 @@
     "prepare": "husky install",
     "gen:icon": "esno ./build/generate/icon/index.ts",
     "commit": "git cz"
-
   },
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
@@ -61,7 +60,8 @@
     "vue": "^3.2.21",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.12",
-    "vue-types": "^4.1.1"
+    "vue-types": "^4.1.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^14.1.0",
@@ -93,6 +93,7 @@
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
+    "cz-customizable": "^7.0.0",
     "dotenv": "^10.0.0",
     "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
@@ -121,7 +122,6 @@
     "stylelint-order": "^5.0.0",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.4.0",
-    "cz-customizable": "^7.0.0",
     "typescript": "^4.4.4",
     "vite": "^2.6.13",
     "vite-plugin-compression": "^0.3.5",

src/utils/file/download.ts

@@ -1,5 +1,23 @@
 import { openWindow } from '..';
 import { dataURLtoBlob, urlToBase64 } from './base64Conver';
+import * as XLSX from 'xlsx' // Vue3 版本
+/**
+ * Download online pictures
+ * @param data
+ * @param filename
+ */
+ export function exportElsxFile(handle:string[],list: Array, filename: string) {
+  // 创建工作表
+  const data = XLSX.utils.json_to_sheet(list,{
+    header:handle
+  })
+  // 创建工作簿
+  const wb = XLSX.utils.book_new()
+  // 将工作表放入工作簿中
+  XLSX.utils.book_append_sheet(wb, data, 'data')
+  // 生成文件并下载
+  XLSX.writeFile(wb, filename+'.xlsx')
+}
 
 /**
  * Download online pictures

src/views/dashboard/analysis/components/lineEcharts.vue

@@ -26,6 +26,7 @@ import { useECharts } from '/@/hooks/web/useECharts';
 const colorList = ['#38a0ff', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const shadowColor = ['rgba(158,135,255, 0.3)','rgba(115,221,255, 0.3)','rgba(254,154,139, 0.3)']
 const emit = defineEmits(["alertSome"])
+import { exportElsxFile, } from '/@/utils/file/download';
 const props = defineProps({
   loading: Boolean,
   width: {
@@ -65,7 +66,15 @@ function handleChange(val){
     emit('change',{type:'user',value:val})
 }
 function handleExport(){
-  emit('export','user')
+  console.log('props',props.propsData)
+  let hader = ['日期', '数量']
+    let data = props.propsData.xData.map((ele,index) => {
+      return {
+        '日期':ele,
+        '数量':props.propsData.yData && props.propsData.yData[index] || 0,
+      }
+    })
+    exportElsxFile(hader,data,'用户趋势')
 }
 watch(
   () => props.propsData,
@@ -94,67 +103,11 @@ watch(
         extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
       },
 
-      xAxis: [
-        {
+      xAxis: {
           type: 'category',
           data: propsData.xData,
-          axisLine: {
-            lineStyle: {
-              color: '#DCE2E8',
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            interval: 0,
-            textStyle: {
-              color: '#556677',
-            },
-            // 默认x轴字体大小
-            fontSize: 12,
-            // margin:文字到x轴的距离
-            margin: 15,
-          },
-          axisPointer: {
-            label: {
-              // padding: [11, 5, 7],
-              padding: [0, 0, 10, 0],
-              margin: 10,
-              // 移入时的字体大小
-              fontSize: 12,
-              backgroundColor: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#fff', // 0% 处的颜色
-                  },
-                  {
-                    // offset: 0.9,
-                    offset: 0.86,
-                    color: '#fff', // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.86,
-                    color: '#33c0cd', // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: '#33c0cd', // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-          },
-          boundaryGap: false,
+         
         },
-      ],
       yAxis: [
         {
           type: 'value',

src/views/dashboard/analysis/components/lineEcharts2.vue

@@ -27,6 +27,7 @@
   import { ref, Ref, watch, defineEmits } from 'vue';
   // import type { dataItemType } from './props';
   import { useECharts } from '/@/hooks/web/useECharts';
+  import { exportElsxFile, } from '/@/utils/file/download';
   const props = defineProps({
   loading: Boolean,
     ...basicProps,
@@ -60,7 +61,16 @@
     emit('change',{type:'order',value:val})
   }
   function handleExport(){
-    emit('export','order')
+    let hader = ['时间', ...nameList.value]
+    let data = yixStringData.value.map((ele,index) => {
+      return {
+        '时间':ele,
+        '下载订单':downOrderData.value && downOrderData.value[index] || 0,
+        '权益订单':incrementOrderData.value && incrementOrderData.value[index] || 0,
+        '配件订单':partsOrderData.value && partsOrderData.value[index] || 0,
+      }
+    })
+    exportElsxFile(hader,data,'订单趋势')
   }
   function handlesetOptions() {
     setOptions({

src/views/dashboard/analysis/components/orderEchart.vue

@@ -24,6 +24,7 @@
   import { Card, DatePicker, Select } from 'ant-design-vue';
   import { ref, Ref, watch, defineEmits } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
+  import { exportElsxFile, } from '/@/utils/file/download';
   const props = defineProps({
   loading: Boolean,
     ...basicProps,
@@ -44,12 +45,13 @@
     },
     ]);
   const emit = defineEmits(["alertSome"])
-  const downOrderData = ref<number[]>([]);
-  const incrementOrderData = ref<number[]>([]);
-  const partsOrderData = ref<number[]>([]);
+  const kjList = ref<number[]>([]);
+  const kkList = ref<number[]>([]);
+  const ssList = ref<number[]>([]);
+  const ssobjList = ref<number[]>([]);
   const yixStringData = ref<string[]>([]);
   const echartTypr = ref('line')
-  const nameList = ref<string[]>(['下载订单','权益订单','配件订单']);
+  const nameList = ref<string[]>(['看见场景','看看场景','深时场景','点云场景']);
   const maxSize = ref(0);
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -59,11 +61,21 @@
   }
   
   function handleExport(){
-    emit('export','scene')
+    let hader = ['时间', '看见场景','看看场景','深时场景','点云场景']
+    let data = yixStringData.value.map((ele,index) => {
+      return {
+        '时间':ele,
+        '看见场景':kjList.value && kjList.value[index] || 0,
+        '看看场景':kkList.value && kkList.value[index] || 0,
+        '深时场景':ssList.value && ssList.value[index] || 0,
+        '点云场景':ssobjList.value && ssobjList.value[index] || 0,
+      }
+    })
+    exportElsxFile(hader,data,'场景趋势')
   }
 
   function handlesetOptions() {
-    console.log('handlesetOptions',downOrderData.value,partsOrderData.value,partsOrderData.value,yixStringData.value)
+    console.log('handlesetOptions',kjList.value,ssList.value,ssList.value,yixStringData.value)
     setOptions({
       tooltip: {
         trigger: 'axis',
@@ -86,40 +98,48 @@
       },
       yAxis: {
         type: 'value',
-        max: maxSize.value,
+        // max: maxSize.value,
         splitNumber: 4,
       },
       series: [
         {
-          data: downOrderData.value,
+          data: kjList.value,
           type: echartTypr.value,
           itemStyle: { color: '#38a0ff' },
           barMaxWidth: 80,
           name: nameList.value[0],
         },
         {
-          data: incrementOrderData.value,
+          data: kkList.value,
           type: echartTypr.value,
           itemStyle: { color: '#4cca73' },
           barMaxWidth: 80,
           name: nameList.value[1],
         },
         {
-          data: partsOrderData.value,
+          data: ssList.value,
           type: echartTypr.value,
           itemStyle: { color: '#FDD56A' },
           barMaxWidth: 80,
           name: nameList.value[2],
         },
+        {
+          data: ssobjList.value,
+          type: echartTypr.value,
+          itemStyle: { color: '#d58b55' },
+          barMaxWidth: 80,
+          name: nameList.value[3],
+        },
       ],
     });
   }
   watch(
     () => props.echartData,
     (echartData) => {
-      downOrderData.value = echartData.downOrder ||[]
-      incrementOrderData.value = echartData.incrementOrder ||[]
-      partsOrderData.value = echartData.partOrder ||[]
+      kjList.value = echartData.kjList ||[]
+      kkList.value = echartData.kkList ||[]
+      ssList.value = echartData.ssList ||[]
+      ssobjList.value = echartData.ssobjList ||[]
       yixStringData.value = echartData.xdata ||[]
       if(echartData.nameList){
         nameList.value = echartData.nameList
@@ -127,9 +147,9 @@
       if(echartData.echartTypr){
         echartTypr.value = echartData.echartTypr
       }
-      const maxNumber = Math.max(...echartData.downOrder.concat(echartData.incrementOrder));
-      const pow = Math.pow(10, maxNumber.toString().length - 1);
-      maxSize.value = maxNumber > 10 ? Math.floor(maxNumber / 10) * 10 + pow * 2 : 10;
+      // const maxNumber = Math.max(...echartData.downOrder.concat(echartData.incrementOrder));
+      // const pow = Math.pow(10, maxNumber.toString().length - 1);
+      // maxSize.value = maxNumber > 10 ? Math.floor(maxNumber / 10) * 10 + pow * 2 : 10;
       handlesetOptions();
     },
     {

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

@@ -14,6 +14,10 @@ export type echartData = {
   incrementOrder: number[];
   partOrder: number[];
   nameList?:string[];
+  kjList?:number[];
+  kkList?:number[];
+  ssList?:number[];
+  ssobjList?:number[];
   echartTypr?:string;
 };
 export const basicProps = {

src/views/dashboard/analysis/index.vue

@@ -23,7 +23,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, reactive } from 'vue';
-import { userTotal, orderTotal, orderTrend,userTrend, cameraExport, downExport, incrementExport } from '/@/api/statistics/index';
+import { userTotal, orderTotal, orderTrend,userTrend,sceneTrend, cameraExport, downExport, incrementExport } from '/@/api/statistics/index';
 import GrowCard from './components/GrowCard.vue';
 import SiteAnalysis from './components/SiteAnalysis.vue';
 import sceneEchart from './components/orderEchart.vue';
@@ -32,7 +32,6 @@ import VisitRadar from './components/VisitRadar.vue';
 import lineEcharts from './components/lineEcharts.vue';
 import lineEcharts2 from './components/lineEcharts2.vue';
 import SalesProductPie from './components/SalesProductPie.vue';
-import { downloadByData, } from '/@/utils/file/download';
 import { Row, Col } from 'ant-design-vue';
 const loading = ref(true);
 interface GrowCardItem {
@@ -43,6 +42,11 @@ interface GrowCardItem {
   color: string;
   action: string;
 }
+const exportData = reactive({
+  orderData:[],
+  sceneData:[],
+  cameraData:[],
+})
 const orderData = reactive({
     xdata:[],
     downOrder:[],
@@ -55,9 +59,10 @@ const echartData = reactive({
   })
 const scenetData = reactive({
     xdata:[],
-    downOrder:[],
-    incrementOrder:[],
-    partOrder:[],
+    kjList:[],
+    kkList:[],
+    ssList:[],
+    ssobjList:[],
     echartTypr:'bar',
   })
 const SearchData = reactive({
@@ -137,11 +142,15 @@ async function getData() {
   }
 }
 async function getAddUser() {
-  let xdata = []
+  let xdata = [], yData=[]
     loading.value = true;
-    const {downOrder,incrementOrder,partOrder} = await userTrend({...SearchData,type:SearchData.userType});
+    const data = await userTrend({...SearchData,type:SearchData.userType});
+    data.map(ele => {
+      xdata.push(ele.groupKey)
+      yData.push(ele.count)
+    })
     echartData.xData = xdata
-    echartData.yData = incrementOrder.map(ele => ele.count)
+    echartData.yData = yData
     loading.value = false;
 }
 
@@ -164,15 +173,16 @@ async function getOrder() {
   async function getSceneList() {
     let downlist = [],xdata = []
     loading.value = true;
-    const {downOrder,incrementOrder,partOrder} = await orderTrend({...SearchData,type:SearchData.sceneType});
-    downOrder.map(ele => {
+    const {kjList,kkList,ssList,ssobjList} = await sceneTrend({...SearchData,type:SearchData.sceneType});
+    kjList.map(ele => {
       xdata.push(ele.groupKey)
       downlist.push(ele.count)
     })
     scenetData.xdata = xdata
-    scenetData.downOrder = downlist
-    scenetData.incrementOrder = incrementOrder.map(ele => ele.count)
-    scenetData.partOrder = partOrder &&partOrder.map(ele => ele.count)|| []
+    scenetData.kjList = downlist
+    scenetData.kkList = kkList.map(ele => ele.count)
+    scenetData.ssList = ssList &&ssList.map(ele => ele.count)|| []
+    scenetData.ssobjList = ssobjList.map(ele => ele.count)|| []
     loading.value = false;
   }
   function handleExport(val){
@@ -182,11 +192,7 @@ async function getOrder() {
       'order':incrementExport,
       'scene':downExport,
     }
-    let apiSrc = obj[val] || cameraExport
-    apiSrc({}).then(res => {
-      console.log('handlerowClick',res)
-      downloadByData(res.data,'导出文件.xls')
-    })
+    console.log('exportElsxFile',obj[val])
   }
 
   function Search(val){

src/views/statistics/camera/index.vue

@@ -48,7 +48,8 @@
     SearchData.startTime = startTime
     SearchData.endTime = endTime
     SearchData.dataType = dataType
-    SearchData.type = type
+    SearchData.type = dataType
+    // SearchData.type = type
     getList()
   }
   // setTimeout(() => {

src/views/statistics/components/orderEchart.vue

@@ -12,6 +12,7 @@
   import { Card, DatePicker } from 'ant-design-vue';
   import { ref, Ref, watch, defineEmits } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
+  import { exportElsxFile, } from '/@/utils/file/download';
   const props = defineProps({
   loading: Boolean,
     ...basicProps,
@@ -31,7 +32,17 @@
     emit('change',val)
   }
   function expor(val){
-    emit('expor',val)
+    // emit('expor',val)
+    let hader = ['时间', ...nameList.value]
+    let data = yixStringData.value.map((ele,index) => {
+      return {
+        '时间':ele,
+        '下载订单':downOrderData.value && downOrderData.value[index] || 0,
+        '权益订单':incrementOrderData.value && incrementOrderData.value[index] || 0,
+        '配件订单':partsOrderData.value && partsOrderData.value[index] || 0,
+      }
+    })
+    exportElsxFile(hader,data,'订单趋势')
   }
   function handlesetOptions() {
     console.log('handlesetOptions',downOrderData.value,partsOrderData.value,partsOrderData.value,yixStringData.value)

src/views/statistics/components/props.ts

@@ -14,6 +14,10 @@ export type echartData = {
   incrementOrder: number[];
   partOrder: number[];
   nameList?:string[];
+  kjList?:number[];
+  kkList?:number[];
+  ssList?:number[];
+  ssobjList?:number[];
   echartTypr?:string;
 };
 export const basicProps = {

src/views/statistics/components/sceneEchart.vue

@@ -0,0 +1,128 @@
+<template>
+  <Card :title="title||'订单数据统计'">
+    <template #extra>
+      <condition @change="Search" @expor="expor" />
+    </template>
+    <div ref="chartRef" :style="{ height, width }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { basicProps } from './props';
+  import condition from './condition.vue';
+  import { Card, DatePicker } from 'ant-design-vue';
+  import { ref, Ref, watch, defineEmits } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { exportElsxFile, } from '/@/utils/file/download';
+  const props = defineProps({
+  loading: Boolean,
+    ...basicProps,
+  });
+  const emit = defineEmits(["alertSome"])
+  const kjList = ref<number[]>([]);
+  const kkList = ref<number[]>([]);
+  const ssList = ref<number[]>([]);
+  const ssobjList = ref<number[]>([]);
+  const yixStringData = ref<string[]>([]);
+  const echartTypr = ref('line')
+  const nameList = ref<string[]>(['看见场景','看看场景','深时场景','点云场景']);
+  const maxSize = ref(0);
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+  function Search(val){
+    emit('change',val)
+  }
+  function expor(val){
+    // emit('expor',val)
+    let hader = ['时间', ...nameList.value]
+    let data = yixStringData.value.map((ele,index) => {
+      return {
+        '时间':ele,
+        '看见场景':kjList.value && kjList.value[index] || 0,
+        '看看场景':kkList.value && kkList.value[index] || 0,
+        '深时场景':ssList.value && ssList.value[index] || 0,
+        '点云场景':ssobjList.value && ssobjList.value[index] || 0,
+      }
+    })
+    exportElsxFile(hader,data,'订单数据')
+  }
+  function handlesetOptions() {
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
+          },
+        },
+      },
+      legend: {
+        orient: 'horizontal',
+        bottom: 0,
+      },
+      // grid: { left: '2%', right: '2%', top: '10%', bottom: '10%', containLabel: true },
+      xAxis: {
+        type: 'category',
+        // data: [...new Array(30)].map((_item, index) => `${index + 1}日`),
+        data: yixStringData.value,
+      },
+      yAxis: {
+        type: 'value',
+        // max: maxSize.value,
+        splitNumber: 4,
+      },
+      series: [
+          {
+          data: kjList.value,
+          type: echartTypr.value,
+          itemStyle: { color: '#38a0ff' },
+          barMaxWidth: 80,
+          name: nameList.value[0],
+        },
+        {
+          data: kkList.value,
+          type: echartTypr.value,
+          itemStyle: { color: '#4cca73' },
+          barMaxWidth: 80,
+          name: nameList.value[1],
+        },
+        {
+          data: ssList.value,
+          type: echartTypr.value,
+          itemStyle: { color: '#FDD56A' },
+          barMaxWidth: 80,
+          name: nameList.value[2],
+        },
+        {
+          data: ssobjList.value,
+          type: echartTypr.value,
+          itemStyle: { color: '#d58b55' },
+          barMaxWidth: 80,
+          name: nameList.value[3],
+        },
+      ],
+    });
+  }
+  watch(
+    () => props.echartData,
+    (echartData) => {
+      kjList.value = echartData.kjList ||[]
+      kkList.value = echartData.kkList ||[]
+      ssList.value = echartData.ssList ||[]
+      ssobjList.value = echartData.ssobjList ||[]
+      yixStringData.value = echartData.xdata ||[]
+      if(echartData.nameList){
+        nameList.value = echartData.nameList
+      }
+      if(echartData.echartTypr){
+        echartTypr.value = echartData.echartTypr
+      }
+      handlesetOptions();
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+</script>

src/views/statistics/components/scenelineEcharts.vue

@@ -6,7 +6,6 @@
             <span style="margin-right:15px">颗粒度</span>
             <Select
             v-model:value="value"
-            label-in-value
             style="width: 100px;margin-right:30px"
             placeholder="请选择颗粒度"
             :options="options"
@@ -14,7 +13,7 @@
             @change="handleChange"
           ></Select>
           </div>
-          <a-button type="primary" >导出</a-button>
+          <a-button type="primary" @click="handleExport">导出</a-button>
       </div>
     </template>
       <div ref="chartRef" :style="{ height, width }"></div>
@@ -27,9 +26,11 @@
   import type { SelectProps } from 'ant-design-vue';
 </script>
 <script lang="ts" setup>
-  import { ref, Ref, watch } from 'vue';
+  import { ref, Ref, watch, onMounted } from 'vue';
+  import { userTrend } from '/@/api/statistics/index';
   // import type { dataItemType } from './props';
   import { useECharts } from '/@/hooks/web/useECharts';
+  import { exportElsxFile, } from '/@/utils/file/download';
   const props = defineProps({
   loading: Boolean,
     ...basicProps,
@@ -49,14 +50,41 @@
           label: '月',
         },
       ]);
-  const viewStaticsData = ref<number[]>([1,5,6,8,55,1,5,6,8,1]);
-  const shareStaticsData = ref<number[]>([2,55,10,2,6,1,5,6,8,1]);
-  const yixStringData = ref<string[]>(['11','22','33','44','ss','11','22','33','44','ss']);
+  const viewStaticsData = ref<number[]>([]);
+  const shareStaticsData = ref<number[]>([]);
+  const yixStringData = ref<string[]>([]);
   const maxSize = ref(0);
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  onMounted(() => {
+    getAddUser();
+  });
   function handleChange(val){
     console.log('handleChange',val)
+    value.value = val
+    getAddUser()
+  }
+  function handleExport(){
+  console.log('props',props.propsData)
+  let hader = ['日期', '数量']
+    let data = yixStringData.value.map((ele,index) => {
+      return {
+        '日期':ele,
+        '数量':viewStaticsData.value && viewStaticsData.value[index] || 0,
+      }
+    })
+    exportElsxFile(hader,data,'用户趋势')
+}
+  async function getAddUser() {
+    let xdata = [], yData=[]
+      const data = await userTrend({type:value.value});
+      data.map(ele => {
+        xdata.push(ele.groupKey)
+        yData.push(ele.count)
+      })
+      yixStringData.value = xdata
+      viewStaticsData.value = yData
+      handlesetOptions()
   }
   function handlesetOptions() {
     setOptions({
@@ -90,15 +118,15 @@
           type: 'line',
           itemStyle: { color: '#38a0ff' },
           // barMaxWidth: 80,
-          name: '用户浏览量',
-        },
-        {
-          data: shareStaticsData.value,
-          type: 'line',
-          itemStyle: { color: '#4cca73' },
-          // barMaxWidth: 80,
-          name: '用户分享数',
+          name: '用户趋势',
         },
+        // {
+        //   data: shareStaticsData.value,
+        //   type: 'line',
+        //   itemStyle: { color: '#4cca73' },
+        //   // barMaxWidth: 80,
+        //   name: '用户分享数',
+        // },
       ],
     });
   }

src/views/statistics/register/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="p-4">
     <GrowCard :loading="loading" :list="growCardList" class="enter-y" />
-    <lineEcharts2  name="chartRef2" class="!my-4 enter-y" :loading="loading" />
-    <scenelineEcharts class="!my-4 enter-y" ref="myRefs" :loading="loading" />
+    <!-- <lineEcharts2  name="chartRef2" class="!my-4 enter-y" :loading="loading" /> -->
+    <scenelineEcharts class="!my-4 enter-y" ref="myRefs" :loading="loading" /> 
   </div>
 </template>
 <script lang="ts" setup>
-import { userTotal, sceneTrend } from '/@/api/statistics/index';
+import { userTotal, } from '/@/api/statistics/index';
 import { ref, onMounted, reactive } from 'vue';
 import { GrowCardItem } from '../data';
 import GrowCard from '../components/GrowCard.vue';
@@ -27,22 +27,21 @@ const SearchData = reactive({
   })
 onMounted(() => {
   getData();
-  getList()
 });
-async function getList() {
-    let downlist = [],xdata = []
-    loading.value = true;
-    const {downOrder,incrementOrder,partOrder} = await sceneTrend(SearchData);
-    downOrder.map(ele => {
-      xdata.push(ele.groupKey)
-      downlist.push(ele.count)
-    })
-    echartData.xdata = xdata
-    echartData.downOrder = downlist
-    echartData.incrementOrder = incrementOrder.map(ele => ele.count)
-    echartData.partOrder = partOrder &&partOrder.map(ele => ele.count)|| []
-    loading.value = false;
-  }
+// async function getList() {
+//     let downlist = [],xdata = []
+//     loading.value = true;
+//     const {downOrder,incrementOrder,partOrder} = await sceneTrend(SearchData);
+//     downOrder.map(ele => {
+//       xdata.push(ele.groupKey)
+//       downlist.push(ele.count)
+//     })
+//     echartData.xdata = xdata
+//     echartData.downOrder = downlist
+//     echartData.incrementOrder = incrementOrder.map(ele => ele.count)
+//     echartData.partOrder = partOrder &&partOrder.map(ele => ele.count)|| []
+//     loading.value = false;
+//   }
 async function getData() {
   try {
     loading.value = true;
@@ -88,8 +87,4 @@ async function getData() {
     loading.value = false;
   }
 }
-
-setTimeout(() => {
-  loading.value = false;
-}, 1500);
 </script>

src/views/statistics/scene/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-4">
     <GrowCard :loading="loading" :list="growCardList" class="enter-y" />
-    <orderEchart
+    <sceneEchart
       title="订单数据统计"
       class="!my-4 enter-y"
       @change="Search"
@@ -15,14 +15,15 @@ import { ref, onMounted, reactive } from 'vue';
 import { orderTotal, sceneTrend } from '/@/api/statistics/index';
 import { GrowCardItem } from '../data';
 import GrowCard from '../components/GrowCard.vue';
-import orderEchart from '../components/orderEchart.vue';
+import sceneEchart from '../components/sceneEchart.vue';
 const loading = ref(true);
 const growCardList = ref<GrowCardItem[]>([]);
 const echartData = reactive({
   xdata: [],
-  downOrder: [],
-  incrementOrder: [],
-  partOrder: [],
+  kjList:[],
+  kkList:[],
+  ssList:[],
+  ssobjList:[],
 });
 const SearchData = reactive({
   startTime: '',
@@ -38,15 +39,16 @@ async function getList() {
   let downlist = [],
     xdata = [];
   loading.value = true;
-  const { downOrder, incrementOrder, partOrder } = await sceneTrend(SearchData);
-  downOrder.map((ele) => {
+  const {kjList,kkList,ssList,ssobjList} = await sceneTrend({...SearchData,type:SearchData.sceneType});
+  kjList.map((ele) => {
     xdata.push(ele.groupKey);
     downlist.push(ele.count);
   });
   echartData.xdata = xdata;
-  echartData.downOrder = downlist;
-  echartData.incrementOrder = incrementOrder.map((ele) => ele.count);
-  echartData.partOrder = (partOrder && partOrder.map((ele) => ele.count)) || [];
+  echartData.kjList = downlist
+  echartData.kkList = kkList.map(ele => ele.count)
+  echartData.ssList = ssList &&ssList.map(ele => ele.count)|| []
+  echartData.ssobjList = ssobjList.map(ele => ele.count)|| []
   loading.value = false;
 }
 function Search(val) {

yarn.lock

@@ -2469,6 +2469,11 @@ add-stream@^1.0.0:
   resolved "https://registry.npmmirror.com/add-stream/-/add-stream-1.0.0.tgz"
   integrity sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==
 
+adler-32@~1.3.0:
+  version "1.3.1"
+  resolved "http://192.168.0.47:4873/adler-32/-/adler-32-1.3.1.tgz#1dbf0b36dda0012189a32b3679061932df1821e2"
+  integrity sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz"
@@ -3176,6 +3181,14 @@ caw@^2.0.0, caw@^2.0.1:
     tunnel-agent "^0.6.0"
     url-to-options "^1.0.1"
 
+cfb@~1.2.1:
+  version "1.2.2"
+  resolved "http://192.168.0.47:4873/cfb/-/cfb-1.2.2.tgz#94e687628c700e5155436dac05f74e08df23bc44"
+  integrity sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==
+  dependencies:
+    adler-32 "~1.3.0"
+    crc-32 "~1.2.0"
+
 chalk@^1.0.0, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz"
@@ -3370,6 +3383,11 @@ co@^4.6.0:
   resolved "https://registry.npmmirror.com/co/-/co-4.6.0.tgz"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
+codepage@~1.15.0:
+  version "1.15.0"
+  resolved "http://192.168.0.47:4873/codepage/-/codepage-1.15.0.tgz#2e00519024b39424ec66eeb3ec07227e692618ab"
+  integrity sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz"
@@ -3755,6 +3773,11 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+crc-32@~1.2.0, crc-32@~1.2.1:
+  version "1.2.2"
+  resolved "http://192.168.0.47:4873/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"
+  integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
+
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/create-require/-/create-require-1.1.1.tgz"
@@ -5410,6 +5433,11 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+frac@~1.1.2:
+  version "1.1.2"
+  resolved "http://192.168.0.47:4873/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
+  integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
+
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz"
@@ -9796,6 +9824,13 @@ squeak@^1.0.0:
     console-stream "^0.1.1"
     lpad-align "^1.0.1"
 
+ssf@~0.11.2:
+  version "0.11.2"
+  resolved "http://192.168.0.47:4873/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"
+  integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
+  dependencies:
+    frac "~1.1.2"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.npmmirror.com/stable/-/stable-0.1.8.tgz"
@@ -11281,11 +11316,21 @@ with@^7.0.0:
     assert-never "^1.2.1"
     babel-walk "3.0.0-canary-5"
 
+wmf@~1.0.1:
+  version "1.0.2"
+  resolved "http://192.168.0.47:4873/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"
+  integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==
+
 word-wrap@^1.0.3, word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.3.tgz"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+word@~0.3.0:
+  version "0.3.0"
+  resolved "http://192.168.0.47:4873/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961"
+  integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==
+
 wordwrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/wordwrap/-/wordwrap-1.0.0.tgz"
@@ -11495,6 +11540,19 @@ ws@^7.4.6:
   resolved "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
+xlsx@^0.18.5:
+  version "0.18.5"
+  resolved "http://192.168.0.47:4873/xlsx/-/xlsx-0.18.5.tgz#16711b9113c848076b8a177022799ad356eba7d0"
+  integrity sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==
+  dependencies:
+    adler-32 "~1.3.0"
+    cfb "~1.2.1"
+    codepage "~1.15.0"
+    crc-32 "~1.2.1"
+    ssf "~0.11.2"
+    wmf "~1.0.1"
+    word "~0.3.0"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz"