热词功能补充提交

manager/public/config.js

@@ -3,10 +3,10 @@ var BASE = {
      * @description api请求基础路径
      */
     API_DEV: {
-      common: "https://common-api.pickmall.cn",
+      seller:  "http://127.0.0.1:8889",
-      buyer: "https://buyer-api.pickmall.cn",
+      manager: "http://127.0.0.1:8887",
-      seller: "https://store-api.pickmall.cn",
+      buyer:   "http://127.0.0.1:8888",
-      manager: "https://admin-api.pickmall.cn"
+      common:  "http://127.0.0.1:8890",
     },
     API_PROD: {
       common: "https://common-api.pickmall.cn",

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);
+};
+
 

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;
+}

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
+};

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>
+

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>
 

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" />
+          <affixTime :closeShop="true" @selected="clickBreadcrumb"/>
-          <Input
+
-            placeholder="关键词"
+          <InputNumber
-            style="width: 100px; margin-left: 10px"
+            placeholder="展示前N"
-            v-model="params.keyWords"
+            :max="200"
-          ></Input>
+            :min="10"
-          <Button style="margin-left: 10px" @click="init">搜索</Button>
+            v-model="params.top"
+          ></InputNumber>
+          <Button style="margin-left: 10px" @click="search">搜索</Button>
         </div>
       </Affix>
     </div>
-    <div v-if="!hotWords.length">请输入关键词进行查询</div>
+    <div id="container"></div>
-    <div v-else id="container"></div>
   </div>
 </template>
 
 <script>
-import { Chart } from "@antv/g2";
+import {Chart} from "@antv/g2";
-import { getHotWordsStatistics } from "@/api/index";
+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: {
+  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]
-        : "";
-    },
-  },
   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>