From 9e34b4416546e0cc4b60a9bef40a8bb78fdfea92 Mon Sep 17 00:00:00 2001
From: Chopper <liushuai711@gmail.com>
Date: Mon, 25 Apr 2022 18:09:49 +0800
Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E8=AF=8D=E5=8A=9F=E8=83=BD=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manager/public/config.js                      |   8 +-
 manager/src/api/index.js                      |   5 +
 .../src/views/page/article-manage/style.scss  |  22 +++
 .../src/views/page/article-manage/template.js |   8 ++
 .../template/historyHotWords.vue              | 108 ++++++++++++++
 .../article-manage/template/setupHotWords.vue |   2 +-
 .../template/statisticsHotWords.vue           | 132 +++++++-----------
 7 files changed, 198 insertions(+), 87 deletions(-)
 create mode 100644 manager/src/views/page/article-manage/style.scss
 create mode 100644 manager/src/views/page/article-manage/template.js

diff --git a/manager/public/config.js b/manager/public/config.js
index ada826fc..048f3158 100644
--- a/manager/public/config.js
+++ b/manager/public/config.js
@@ -3,10 +3,10 @@ var BASE = {
      * @description api请求基础路径
      */
     API_DEV: {
-      common: "https://common-api.pickmall.cn",
-      buyer: "https://buyer-api.pickmall.cn",
-      seller: "https://store-api.pickmall.cn",
-      manager: "https://admin-api.pickmall.cn"
+      seller:  "http://127.0.0.1:8889",
+      manager: "http://127.0.0.1:8887",
+      buyer:   "http://127.0.0.1:8888",
+      common:  "http://127.0.0.1:8890",
     },
     API_PROD: {
       common: "https://common-api.pickmall.cn",
diff --git a/manager/src/api/index.js b/manager/src/api/index.js
index 776f3f74..709bec3a 100644
--- a/manager/src/api/index.js
+++ b/manager/src/api/index.js
@@ -453,4 +453,9 @@ export const getHotWordsStatistics = (params) => {
   return getRequest(`/hotwords/hotwords/statistics`,params);
 };
 
+// 获取历史热词
+export const getHotWordsHistory = (params) => {
+  return getRequest(`/hotwords/hotwords/history`,params);
+};
+
 
diff --git a/manager/src/views/page/article-manage/style.scss b/manager/src/views/page/article-manage/style.scss
new file mode 100644
index 00000000..9994b8af
--- /dev/null
+++ b/manager/src/views/page/article-manage/style.scss
@@ -0,0 +1,22 @@
+/deep/ .ivu-input{
+  width: 200px !important;
+}
+
+.label-btns{
+  margin-left: 150px;
+}
+
+.ivu-form-item{
+  padding: 10px 0;
+}
+
+
+.ivu-input-wrapper {
+  width: 150px;
+  margin-right: 10px;
+}
+
+/deep/ .ivu-form-item-content {
+  margin-left: 0 !important;
+  display: flex;
+}
diff --git a/manager/src/views/page/article-manage/template.js b/manager/src/views/page/article-manage/template.js
new file mode 100644
index 00000000..9b1b1084
--- /dev/null
+++ b/manager/src/views/page/article-manage/template.js
@@ -0,0 +1,8 @@
+import HOTWORD_SETTING from "./HOTWORD_SETTING";
+import HOTWORDS_HISTORY from "./HOTWORDS_HISTORY";
+import HOTWORDS_TODAY from "./HOTWORDS_TODAY";
+export default {
+  HOTWORD_SETTING,
+  HOTWORDS_TODAY,
+  HOTWORDS_HISTORY
+};
diff --git a/manager/src/views/page/article-manage/template/historyHotWords.vue b/manager/src/views/page/article-manage/template/historyHotWords.vue
index e69de29b..09377c32 100644
--- a/manager/src/views/page/article-manage/template/historyHotWords.vue
+++ b/manager/src/views/page/article-manage/template/historyHotWords.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="box">
+    <Row class="operation">
+      <Col span="12">
+
+        <DatePicker @on-change="search" show-week-numbers type="date" placement="bottom-end" placeholder="选择查看日期"
+                    style="width: 200px"></DatePicker>
+
+      </Col>
+    </Row>
+    <Row>
+      <p>
+        <Alert type="success">
+          这里展示历史某一天的热词数据统计，可根据需求配置每日持久化多少条数据。
+        </Alert>
+      </p>
+    </Row>
+
+
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import {Chart} from "@antv/g2";
+import {getHotWordsHistory} from "@/api/index";
+import affixTime from "@/views/lili-components/affix-time";
+import {Message} from "view-design";
+
+export default {
+  components: {
+    affixTime,
+  },
+  data() {
+    return {
+      params: {
+        date:this.$options.filters.unixToDate(new Date().getTime() / 1000,'yyyy-MM-dd')
+      },
+      hotWordsChart: "", //图表
+      hotWordsData: [] //数据
+    };
+  },
+  computed: {},
+  methods: {
+    clickBreadcrumb(val) {
+      this.params = {...this.params, ...val}
+    },
+    // 初始化图表
+    async search(val) {
+
+      val ? this.params.date = val : ''
+      const res = await getHotWordsHistory(this.params);
+      if (res.success) {
+        this.hotWordsData = res.result;
+        this.hotWordsChart.data(this.hotWordsData)
+        this.hotWordsChart.render();
+        if (!this.hotWordsData) {
+          Message.error("暂无数据");
+        }
+      }
+    },
+    handleClickSearch() {
+
+    },
+    init() {
+      let chart = this.hotWordsChart
+      chart = new Chart({
+        container: "container",
+        autoFit: true,
+        height: 500,
+        padding: [50, 20, 50, 20],
+      });
+      chart.scale("score", {
+        alias: "搜索次数",
+      });
+
+      chart.axis("keywords", {
+        tickLine: {
+          alignTick: false,
+        },
+      });
+      chart.axis("score", false);
+
+      chart.tooltip({
+        showMarkers: false,
+      });
+      chart.interval().position("keywords*score");
+      chart.interaction("element-active");
+      this.hotWordsChart = chart;
+      this.search();
+    }
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.affix-time {
+  padding-left: 15px;
+}
+
+.box {
+  min-height: 400px;
+}
+</style>
+
diff --git a/manager/src/views/page/article-manage/template/setupHotWords.vue b/manager/src/views/page/article-manage/template/setupHotWords.vue
index 27f4af38..5bf45610 100644
--- a/manager/src/views/page/article-manage/template/setupHotWords.vue
+++ b/manager/src/views/page/article-manage/template/setupHotWords.vue
@@ -29,7 +29,7 @@
         </div>
         <Button @click="addSetItem">添加配置</Button>
       </FormItem>
-      <FormItem label="每日保存数量" prop="saveNum">
+      <FormItem label="每日持久化热词数量" prop="saveNum">
         <InputNumber :min="0" v-model="formValidate.saveNum" />
       </FormItem>
 
diff --git a/manager/src/views/page/article-manage/template/statisticsHotWords.vue b/manager/src/views/page/article-manage/template/statisticsHotWords.vue
index dd8afb5e..b78431a5 100644
--- a/manager/src/views/page/article-manage/template/statisticsHotWords.vue
+++ b/manager/src/views/page/article-manage/template/statisticsHotWords.vue
@@ -3,24 +3,25 @@
     <div class="affix-time">
       <Affix :offset-top="100">
         <div class="flex affix-box">
-          <affixTime :closeShop="true" @selected="clickBreadcrumb" />
-          <Input
-            placeholder="关键词"
-            style="width: 100px; margin-left: 10px"
-            v-model="params.keyWords"
-          ></Input>
-          <Button style="margin-left: 10px" @click="init">搜索</Button>
+          <affixTime :closeShop="true" @selected="clickBreadcrumb"/>
+
+          <InputNumber
+            placeholder="展示前N"
+            :max="200"
+            :min="10"
+            v-model="params.top"
+          ></InputNumber>
+          <Button style="margin-left: 10px" @click="search">搜索</Button>
         </div>
       </Affix>
     </div>
-    <div v-if="!hotWords.length">请输入关键词进行查询</div>
-    <div v-else id="container"></div>
+    <div id="container"></div>
   </div>
 </template>
 
 <script>
-import { Chart } from "@antv/g2";
-import { getHotWordsStatistics } from "@/api/index";
+import {Chart} from "@antv/g2";
+import {getHotWordsStatistics} from "@/api/index";
 import affixTime from "@/views/lili-components/affix-time";
 
 export default {
@@ -34,91 +35,58 @@ export default {
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
-        keywords: "",
+        top: 50
       },
+      hotWordsChart:"", //图表
+      hotWordsData:[] //数据
     };
   },
-  computed: {
-    hotWords() {
-      this.params.keyWords = this.$store.state.app.hotWords
-        ? this.$store.state.app.hotWords[0]
-        : "";
-      return this.$store.state.app.hotWords
-        ? this.$store.state.app.hotWords[0]
-        : "";
-    },
-  },
+  computed: {},
   methods: {
     clickBreadcrumb(val) {
-      console.log(val)
-      this.params = {...this.params,...val}
+      this.params = {...this.params, ...val}
     },
     // 初始化图表
-    async init() {
+    async search() {
       const res = await getHotWordsStatistics(this.params);
       if (res.success) {
+        this.hotWordsData=res.result;
+        this.hotWordsChart.data(this.hotWordsData)
+        this.hotWordsChart.render();
       }
     },
-    handleClickSearch() {},
+    handleClickSearch() {
+    },
+    init(){
+      let chart = this.hotWordsChart
+      chart = new Chart({
+        container: "container",
+        autoFit: true,
+        height: 500,
+        padding: [50, 20, 50, 20],
+      });
+      chart.scale("score", {
+        alias: "搜索次数",
+      });
+
+      chart.axis("keywords", {
+        tickLine: {
+          alignTick: false,
+        },
+      });
+      chart.axis("score", false);
+
+      chart.tooltip({
+        showMarkers: false,
+      });
+      chart.interval().position("keywords*score");
+      chart.interaction("element-active");
+      this.hotWordsChart=chart;
+      this.search();
+    }
   },
   mounted() {
     this.init();
-    const data = [
-      { type: "未知", value: 654, percent: 0.02 },
-      { type: "17 岁以下", value: 654, percent: 0.02 },
-      { type: "18-24 岁", value: 4400, percent: 0.2 },
-      { type: "25-29 岁", value: 5300, percent: 0.24 },
-      { type: "30-39 岁", value: 6200, percent: 0.28 },
-      { type: "40-49 岁", value: 3300, percent: 0.14 },
-      { type: "50 岁以上", value: 1500, percent: 0.06 },
-    ];
-
-    const chart = new Chart({
-      container: "container",
-      autoFit: true,
-      height: 500,
-      padding: [50, 20, 50, 20],
-    });
-    chart.data(data);
-    chart.scale("value", {
-      alias: "销售额(万)",
-    });
-
-    chart.axis("type", {
-      tickLine: {
-        alignTick: false,
-      },
-    });
-    chart.axis("value", false);
-
-    chart.tooltip({
-      showMarkers: false,
-    });
-    chart.interval().position("type*value");
-    chart.interaction("element-active");
-
-    // 添加文本标注
-    data.forEach((item) => {
-      chart
-        .annotation()
-        .text({
-          position: [item.type, item.value],
-          content: item.value,
-          style: {
-            textAlign: "center",
-          },
-          offsetY: -30,
-        })
-        .text({
-          position: [item.type, item.value],
-          content: (item.percent * 100).toFixed(0) + "%",
-          style: {
-            textAlign: "center",
-          },
-          offsetY: -12,
-        });
-    });
-    chart.render();
   },
 };
 </script>