From 7ca2a339b22a51e713cbe0a1a108957cd3a5442e Mon Sep 17 00:00:00 2001
From: Jruome <2559028966@qq.com>
Date: Fri, 16 Jun 2023 17:11:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=AB=AF=20=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin/src/views/index.vue            |  74 ------
 .../views/statistics/statisticsData/index.vue | 221 ++++++++++++++++++
 2 files changed, 221 insertions(+), 74 deletions(-)
 create mode 100644 yudao-ui-admin/src/views/statistics/statisticsData/index.vue

diff --git a/yudao-ui-admin/src/views/index.vue b/yudao-ui-admin/src/views/index.vue
index cbf9bb091..3a8ec0e65 100644
--- a/yudao-ui-admin/src/views/index.vue
+++ b/yudao-ui-admin/src/views/index.vue
@@ -1,35 +1,4 @@
 <template>
-  <div class="app-container">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-    <el-form  :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="100px">
-      <el-form-item label="快速查看" class="width100" prop="type">
-        <el-radio-group v-model="queryParams.type" type="button"  class="mr20"  size="small" @change="handleChange">
-          <el-radio-button  v-for="(item,i) in lookList" :label=i+1 :key="i">{{item.name}}</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="选择日期" class="width100" prop="dateLimit">
-        <el-date-picker @change="onchangeTime" v-model="queryParams.dateLimit" value-format="yyyy-MM-dd HH:mm:ss"  format="yyyy-MM-dd HH:mm:ss"  size="small" type="datetimerange"   start-placeholder="开始时间"
-                        end-placeholder="结束时间" placement="bottom-end" placeholder="自定义时间" style="width: 220px;" ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-      </div>
-
-    <div class="statistics">
-      <div v-for="(item,index) in statisticsList" :key="index" :class="[item.class,'statistics_item']">
-        <span>{{item.name}}</span>
-        <span v-if="index<2">￥{{item.value}}</span>
-        <span v-else>{{item.value}} 单</span>
-      </div>
-    </div>
-
-    </el-card>
-
-  </div>
 <!--  <div class="dashboard-editor-container">-->
 
 <!--    <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
@@ -101,54 +70,11 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis,
-      queryParams: {
-        type:4
-      },
-      // list:[],
-      lookList:[{name:'今日'},{name:'上周'},{name:'上月'},{name:'全部'}],
-      statisticsList:[{name:'总销售金额',class:'totalMoney',value:0},{name:'总退款金额',class:'totalWithdrawMoney',value:0},{name:'总订单数量（单）',class:'totalNum',value:0},{name:'240档订单数量（单）',class:'threeTotalNum',value:0},{name:'400档订单数量（单）',class:'twoTotalNum',value:0},{name:'640档订单数量（单）',class:'oneTotalNum',value:0}],
     }
   },
   created() {
-    this.getList();
   },
   methods: {
-    handleChange(){
-      this.queryParams ={type:this.queryParams.type}
-      this.getList()
-    },
-    onchangeTime(value){
-      this.queryParams.type = null
-      this.queryParams.startTime = value[0]
-      this.queryParams.endTime = value[1]
-    },
-    /** 查询列表 */
-    getList() {
-      this.loading = true;
-      // 执行查询
-      statisticsAll(this.queryParams).then(response => {
-          this.statisticsList.forEach((item,index) =>{
-            for (let key in response.data){
-              if(item.class === key){
-                item.value = response.data[key] || 0
-              }
-            }
-          })
-        this.loading = false;
-      });
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.queryParams ={
-        type: 4
-      };
-      this.handleQuery();
-    },
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
     }
diff --git a/yudao-ui-admin/src/views/statistics/statisticsData/index.vue b/yudao-ui-admin/src/views/statistics/statisticsData/index.vue
new file mode 100644
index 000000000..dc11072f8
--- /dev/null
+++ b/yudao-ui-admin/src/views/statistics/statisticsData/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-form  :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="100px">
+          <el-form-item label="快速查看" class="width100" prop="type">
+            <el-radio-group v-model="queryParams.type" type="button"  class="mr20"  size="small" @change="handleChange">
+              <el-radio-button  v-for="(item,i) in lookList" :label=i+1 :key="i">{{item.name}}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="选择日期" class="width100" prop="dateLimit">
+            <el-date-picker @change="onchangeTime" v-model="queryParams.dateLimit" value-format="yyyy-MM-dd HH:mm:ss"  format="yyyy-MM-dd HH:mm:ss"  size="small" type="datetimerange"   start-placeholder="开始时间"
+                            end-placeholder="结束时间" placement="bottom-end" placeholder="自定义时间" style="width: 220px;" ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="statistics">
+        <div v-for="(item,index) in statisticsList" :key="index" :class="[item.class,'statistics_item']">
+          <span>{{item.name}}</span>
+          <span v-if="index<2">￥{{item.value}}</span>
+          <span v-else>{{item.value}} 单</span>
+        </div>
+      </div>
+
+    </el-card>
+
+  </div>
+  <!--  <div class="dashboard-editor-container">-->
+
+  <!--    <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
+
+  <!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
+  <!--      <line-chart :chart-data="lineChartData" />-->
+  <!--    </el-row>-->
+
+  <!--    <el-row :gutter="32">-->
+  <!--      <el-col :xs="24" :sm="24" :lg="8">-->
+  <!--        <div class="chart-wrapper">-->
+  <!--          <raddar-chart />-->
+  <!--        </div>-->
+  <!--      </el-col>-->
+  <!--      <el-col :xs="24" :sm="24" :lg="8">-->
+  <!--        <div class="chart-wrapper">-->
+  <!--          <pie-chart />-->
+  <!--        </div>-->
+  <!--      </el-col>-->
+  <!--      <el-col :xs="24" :sm="24" :lg="8">-->
+  <!--        <div class="chart-wrapper">-->
+  <!--          <bar-chart />-->
+  <!--        </div>-->
+  <!--      </el-col>-->
+  <!--    </el-row>-->
+
+
+  <!--  </div>-->
+</template>
+
+<script>
+import PanelGroup from '@/views/dashboard/PanelGroup'
+import LineChart from '@/views/dashboard/LineChart'
+import RaddarChart from '@/views/dashboard/RaddarChart'
+import PieChart from '@/views/dashboard/PieChart'
+import BarChart from '@/views/dashboard/BarChart'
+import creatComment from "@/views/mall/product/comment/creatComment.vue";
+import {
+  statisticsAll
+} from '@/api/index';
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
+export default {
+  name: 'Index',
+  components: {
+    creatComment,
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis,
+      queryParams: {
+        type:4
+      },
+      // list:[],
+      lookList:[{name:'今日'},{name:'上周'},{name:'上月'},{name:'全部'}],
+      statisticsList:[{name:'总销售金额',class:'totalMoney',value:0},{name:'总退款金额',class:'totalWithdrawMoney',value:0},{name:'总订单数量（单）',class:'totalNum',value:0},{name:'240档订单数量（单）',class:'threeTotalNum',value:0},{name:'400档订单数量（单）',class:'twoTotalNum',value:0},{name:'640档订单数量（单）',class:'oneTotalNum',value:0}],
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    handleChange(){
+      this.queryParams ={type:this.queryParams.type}
+      this.getList()
+    },
+    onchangeTime(value){
+      this.queryParams.type = null
+      this.queryParams.startTime = value[0]
+      this.queryParams.endTime = value[1]
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      statisticsAll(this.queryParams).then(response => {
+        this.statisticsList.forEach((item,index) =>{
+          for (let key in response.data){
+            if(item.class === key){
+              item.value = response.data[key] || 0
+            }
+          }
+        })
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams ={
+        type: 4
+      };
+      this.handleQuery();
+    },
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics{
+  width: 100%;
+  height: 30%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #e6ebf5;
+  .statistics_item{
+    border-radius: 10px;
+    width: 240px;
+    min-height: 90px;
+    margin: 10px 6%;
+    font-size: 20px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    word-wrap: break-word;
+    span:nth-of-type(1){
+      margin-left: 20px;
+    }
+    span:nth-of-type(2){
+      margin-left: 40px;
+    }
+  }
+  .totalMoney{
+    background: rgb(77,157,255);
+  }
+  .totalNum{
+    background: rgb(95,212,89);
+  }
+  .totalWithdrawMoney{
+    background: rgb(171,109,234);
+  }
+  .threeTotalNum{
+    background: rgb(255,154,1);
+  }
+  .twoTotalNum{
+    background: rgb(10,193,224);
+  }
+  .oneTotalNum{
+    background: rgb(10,196,160);
+  }
+}
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>