From eaa0cc657c3e31a0ea4dd3db414d8bb16cee2a68 Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Sat, 28 Jan 2023 22:25:43 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=8E=82=E5=95=86-=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/rank/list.vue | 107 +++++++++++++++++++++++++++++
 src/views/manufacturer/index.vue   |  73 +++-----------------
 src/views/manufacturer/rank.vue    | 106 ++++++++++++++++++++++++++++
 3 files changed, 221 insertions(+), 65 deletions(-)
 create mode 100644 src/views/components/rank/list.vue
 create mode 100644 src/views/manufacturer/rank.vue

diff --git a/src/views/components/rank/list.vue b/src/views/components/rank/list.vue
new file mode 100644
index 0000000..7c15421
--- /dev/null
+++ b/src/views/components/rank/list.vue
@@ -0,0 +1,107 @@
+<template>
+  <component :is="type">
+    <el-row class="select" type="flex">
+      <el-col :span="4" class="title">{{ title }}</el-col>
+
+      <el-col :offset="12" :span="8" v-if="showQuery">
+          <span v-for="item in dict.type.time_granularity" :key="item.value">{{
+              item.label
+            }}</span>
+      </el-col>
+    </el-row>
+    <el-row type="flex" class="rank-item" v-for="item in rank" :key="item" :gutter="20">
+      <el-col :span="4" :class="{ 'black': item <= 3, 'gray': item > 3 }">
+        {{ item }}
+      </el-col>
+      <el-col :span="18" class="align-center">
+        联想笔记本
+      </el-col>
+      <el-col :span="2" :offset="3">
+        99999
+      </el-col>
+    </el-row>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  props: {
+    type: String,
+    title: String,
+    rank: Number,
+    showQuery: Boolean
+  },
+  dicts: ['time_granularity'],
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.title {
+  color: rgba(16, 16, 16, 1);
+  font-size: 16px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.rank {
+  display: flex;
+  justify-content: space-around;
+}
+
+.select {
+  align-items: center;
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  font-family: SourceHanSansSC-regular;
+  padding: 0 20px;
+
+  & > div:last-child {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.rank-item {
+  margin-top: 30px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+  padding: 0 20px;
+
+
+  & > div:nth-child(1) {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .black {
+    color: #fff;
+    background-color: rgba(0, 0, 0);
+  }
+
+  .gray {
+    color: #fff;
+    background-color: rgba(190, 190, 190, 1);
+  }
+
+
+  & > div:nth-child(3) {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/views/manufacturer/index.vue b/src/views/manufacturer/index.vue
index 9e26b92..1c07805 100644
--- a/src/views/manufacturer/index.vue
+++ b/src/views/manufacturer/index.vue
@@ -51,27 +51,11 @@
               <div>我的直营门店</div>
             </el-col>
           </el-row>
-          <div class="title mt">销售数据</div>
-          <div ref="chart" class="chart"></div>
-          <el-row class="title mt" type="flex" justify="space-between">
-            <el-col>商品销售排行榜top5</el-col>
-            <el-col class="query">
-              <span class="active">今日</span>
-              <span>昨日</span>
-              <span>本周</span>
-              <span>上周</span>
-              <span>本月</span>
-              <span>上月</span>
-            </el-col>
-          </el-row>
-          <el-row type="flex" class="rank-item mt-3" v-for="item in 5" :key="item">
-            <el-col :span="3">
-              <div class="circle" :class="{default:item>3}">{{ item }}</div>
-            </el-col>
-            <el-col :span="5">联想笔记本</el-col>
-            <el-col :offset="12" class="num">99999</el-col>
-          </el-row>
-        </el-card>
+            <div class="title mt">销售数据</div>
+            <div ref="chart" class="chart"></div>
+
+            <list title="商品销售排行榜 top5" :rank="5" :show-query="true" type="div"/>
+          </el-card>
       </el-col>
       <el-col :span="6">
         <el-card class="time">
@@ -126,9 +110,11 @@ import Pay from './components/pay'
 import Notice from './components/notice'
 import NoticeContent from './components/notice-content'
 
+import List from '@/views/components/rank/list'
+
 export default {
   name: 'index.vue',
-  components: { Pay, Notice, NoticeContent },
+  components: { Pay, Notice, NoticeContent, List },
   data() {
     return {
       type: 'list'
@@ -236,49 +222,6 @@ $circle-radius: 25px;
   margin-top: 30px;
 }
 
-.rank-item {
-  align-items: center;
-  color: rgba(16, 16, 16, 1);
-  font-size: 14px;
-  text-align: left;
-  font-family: SourceHanSansSC-regular;
-
-
-  .circle {
-    background-color: #000;
-    color: white;
-    border-radius: 50%;
-    width: $circle-radius;
-    height: $circle-radius;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .circle.default {
-    background-color: rgba(190, 190, 190, 1);
-  }
-
-  & > .num {
-    text-align: right;
-    padding-right: 10%;
-  }
-
-}
-
-.query {
-  text-align: right;
-
-  & > span {
-    margin-right: 10px;
-
-  }
-
-  & > span.active {
-    color: blue;
-  }
-}
-
 .chart {
   height: 400px;
 }
diff --git a/src/views/manufacturer/rank.vue b/src/views/manufacturer/rank.vue
new file mode 100644
index 0000000..50df0a2
--- /dev/null
+++ b/src/views/manufacturer/rank.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="12">
+        <el-form inline>
+          <el-form-item>
+            <el-autocomplete class="inline-input" v-model="queryParams.storeName"
+                             :fetch-suggestions="querySearch" placeholder="全部店铺"></el-autocomplete>
+          </el-form-item>
+          <el-form-item prop="dateRange">
+            <el-date-picker v-model="queryParams.dateRange" value-format="yyyy-MM-dd" type="daterange"
+                            range-separator="-" start-placeholder="开始日期"
+                            end-placeholder="结束日期"></el-date-picker>
+          </el-form-item>
+        </el-form>
+        <list title="商品销售数量 top20" :rank="20" :show-query="false" type="div"/>
+      </el-col>
+      <el-col :span="12">
+        <div ref="chart" class="chart"></div>
+        <div ref="chart2" class="chart mt50"></div>
+      </el-col>
+
+    </el-row>
+  </div>
+</template>
+
+<script>
+import echarts from '@/plugins/echarts'
+import List from '@/views/components/rank/list'
+
+export default {
+  name: 'rank',
+  components: { List },
+  data() {
+    return {
+      queryParams: {
+        storeName: undefined,
+        dateRange: undefined
+      }
+
+    }
+  },
+  mounted() {
+    this.initCharts(this.$refs.chart, '商品分类交易占比')
+    this.initCharts(this.$refs.chart2, '门店销售量排行榜')
+  },
+  methods: {
+    initCharts(chart, title) {
+      let myChart = echarts.init(chart)
+      let option
+
+      option = {
+        title: {
+          text: title,
+          bottom: '0',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          left: 'center',
+          textStyle: {
+            fontSize: 16
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: '60%',
+            data: Array.from(new Array(5).keys()).map(item => {
+              return { value: Math.round(Math.random() * 1000), name: `分类名称${item}` }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              fontSize: 16,
+              formatter: '{b}\n{c}'
+            }
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    },
+    querySearch() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.mt50 {
+  margin-top: 50px;
+}
+
+.chart {
+  height: 500px;
+}
+</style>