首页

src/views/Index/index.vue

@@ -105,45 +105,46 @@
     <div class="rate-box boxsiz">
       <div class="rate-tab row bothSide verCenter">
         <div class="row">
-          <el-radio-group v-model="tabPosition" @change="change">
-            <el-radio-button label="1">询价报价率</el-radio-button>
+          <el-radio-group v-model="tabPosition" @change="change(tabPosition,'frqRates')">
+            <el-radio-button label="0">询价报价率</el-radio-button>
+            <el-radio-button label="1">报价选中率</el-radio-button>
             <el-radio-button label="2">报价选中率</el-radio-button>
-            <el-radio-button label="3">报价选中率</el-radio-button>
           </el-radio-group>
         </div>
         <div class="row">
-          <el-radio-group v-model="tabDate" @change="change">
-            <el-radio-button label="1">昨日</el-radio-button>
-            <el-radio-button label="2">本周</el-radio-button>
-            <el-radio-button label="3">本月</el-radio-button>
-            <el-radio-button label="4">本年</el-radio-button>
+          <el-radio-group v-model="tabDate" @change="change(tabDate,'frqRatesDate')">
+            <el-radio-button label="0">昨日</el-radio-button>
+            <el-radio-button label="1">本周</el-radio-button>
+            <el-radio-button label="2">本月</el-radio-button>
+            <el-radio-button label="3">本年</el-radio-button>
           </el-radio-group>
         </div>
       </div>
       <div class="progressbar-box">
-        <el-progress :text-inside="true" :stroke-width="26" :percentage="70" status="warning"></el-progress>
+        <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage" status="warning"></el-progress>
       </div>
     </div>
     <div class="offer boxsiz">
       <div class="offer-tab row verCenter bothSide">
         <div class="row">
-          <el-radio-group v-model="offerPosition" @change="change">
+          <el-radio-group v-model="offerPosition" @change="change(offerPosition,'offerPosition')">
             <el-radio-button label="1">询价量</el-radio-button>
             <el-radio-button label="2">报价量</el-radio-button>
             <el-radio-button label="3">成单量</el-radio-button>
           </el-radio-group>
         </div>
         <div class="row">
-          <el-radio-group v-model="offerDate" @change="change">
-            <el-radio-button label="1">本月</el-radio-button>
-            <el-radio-button label="2">本年</el-radio-button>
+          <el-radio-group v-model="offerDate" @change="change(offerDate,'offerDate')">
+            <el-radio-button label="1">近7天</el-radio-button>
+            <el-radio-button label="2">本月</el-radio-button>
+            <el-radio-button label="3">本年</el-radio-button>
           </el-radio-group>
         </div>
       </div>
       <div class="offer-content row bothSide verCenter">
         <div id="echarts_box" class="echarts-box"></div>
         <div class="list-box">
-          <el-table :data="tableData">
+          <el-table :data="inquiry_rank_list">
             <el-table-column prop="numbers" label="排名" align="center" width="50">
               <template slot-scope="scope">
                 <template v-if="scope.$index==0">
@@ -156,13 +157,13 @@
                   <span class="three row rowCenter verCenter">3</span>
                 </template>
                 <template v-else>
-                 <span class="num row rowCenter verCenter"> {{ scope.$index + 1 }}</span>
+                  <span class="num row rowCenter verCenter"> {{ scope.$index + 1 }}</span>
                 </template>
               </template>
             </el-table-column>
-            <el-table-column prop="goods" label="型号" width="180"></el-table-column>
-            <el-table-column prop="brand" label="品牌"></el-table-column>
-            <el-table-column prop="nums" label="询价次数"></el-table-column>
+            <el-table-column prop="goods_name" label="型号" width="180"></el-table-column>
+            <el-table-column prop="brand_name" label="品牌"></el-table-column>
+            <el-table-column prop="inquiry_count" label="询价次数"></el-table-column>
           </el-table>
         </div>
       </div>
@@ -185,20 +186,14 @@ export default {
     return {
       isDisabled: true,
       date: '',
-      tabPosition: 1,
-      tabDate: 1,
+      tabPosition: 0,
+      tabDate: 0,
       offerPosition: 1,
       offerDate: 1,
-      tableData: [
-        {numbers: 1, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10},
-        {numbers: 2, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10},
-        {numbers: 3, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10},
-        {numbers: 4, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10},
-        {numbers: 5, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10},
-        {numbers: 6, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10},
-        {numbers: 7, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10},
-        {numbers: 8, goods: 'CFD321324ASC12', brand: 'Ti', nums: 10}
-      ],
+      percentage: 0,
+      inquiry_rank_list: [],
+      xAxis: [],
+      series: [],
       data: {
         weekly_quote_selected_count: 100,
         weekly_spu_count: 100,
@@ -218,15 +213,36 @@ export default {
   },
   mounted() {
     this.getData();
+    this.getFrqRates();
+    this.getFrqStatInfo();
   },
   methods: {
-    change(e) {
-      console.log(e)
+    change(index, type) {
+      console.log(index, type)
+      if (type == 'frqRates') {
+        this.getFrqRates(this.tabDate);
+      }
+      if (type == 'frqRatesDate') {
+        this.getFrqRates(this.tabDate);
+      }
+      if (type == 'offerPosition') {
+        this.getFrqStatInfo(this.offerDate);
+      }
+      if (type == 'offerDate') {
+        this.getFrqStatInfo(this.offerDate);
+      }
     },
-    getData() {
-      this.$http('get', "/api/statistics/index", {}).then(res => {
+    getFrqRates(type) {
+      //首页询报价比率信息
+      this.$http('GET', "/api/statistics/getFrqRates", {type: type}).then(res => {
         if (res.code === 0) {
-          this.data = res.data
+          if (this.tabPosition == 0) {
+            this.percentage = parseInt(res.data.inquiry_quote_rate);
+          } else if (this.tabPosition == 1) {
+            this.percentage = parseInt(res.data.quote_selected_rate);
+          } else if (this.tabPosition == 2) {
+            this.percentage = parseInt(res.data.quote_ordered_rate);
+          }
         } else {
           this.$message({
             message: res.msg,
@@ -234,22 +250,58 @@ export default {
           });
         }
       })
-
+    },
+    getFrqStatInfo(type) {
+      //首页询报价数量统计信息
+      this.$http('GET', "/api/statistics/getFrqStatInfo", {type: type}).then(res => {
+        if (res.code === 0) {
+          this.inquiry_rank_list = res.data.inquiry_rank_list;
+          if (this.offerPosition == 1) {
+            let step_name = res.data.inquiry_num_step_list.map(obj => {
+              return obj.step_name;
+            });
+            let step_count = res.data.inquiry_num_step_list.map(obj => {
+              return obj.step_count;
+            });
+            this.echartsChange(step_name, step_count, '询价量');
+          } else if (this.offerPosition == 2) {
+            let step_name = res.data.quote_num_step_list.map(obj => {
+              return obj.step_name;
+            });
+            let step_count = res.data.quote_num_step_list.map(obj => {
+              return obj.step_count;
+            });
+            this.echartsChange(step_name, step_count, '报价量');
+          } else if (this.offerPosition == 3) {
+            let step_name = res.data.order_num_step_list.map(obj => {
+              return obj.step_name;
+            });
+            let step_count = res.data.order_num_step_list.map(obj => {
+              return obj.step_count;
+            });
+            this.echartsChange(step_name, step_count, '成单量');
+          }
+        } else {
+          this.$message({
+            message: res.msg,
+            type: 'warning'
+          });
+        }
+      })
+    },
+    echartsChange(xAxis, series, text) {
       var myChart = echarts.init(document.getElementById('echarts_box'));
       var option = {
-        title: {
-          text: '近七天数据'
-        },
         tooltip: {},
         xAxis: {
-          data: ['10-1', '10-2', '10-3', '10-4', '10-5', '10-6']
+          data: xAxis
         },
         yAxis: {},
         series: [
           {
-            name: '询价量',
+            name: text,
             type: 'bar',
-            data: [5, 20, 36, 10, 10, 20]
+            data: series
           }
         ]
       };
@@ -258,6 +310,18 @@ export default {
       window.onresize = function () {
         myChart.resize();
       };
+    },
+    getData() {
+      this.$http('get', "/api/statistics/index", {}).then(res => {
+        if (res.code === 0) {
+          this.data = res.data
+        } else {
+          this.$message({
+            message: res.msg,
+            type: 'warning'
+          });
+        }
+      })
     }
   },
   components: {