环境准备

  • 后台接口
  • 前台开发环境
    • 解决ENOSPC报错
    • 迁移前台开发环境至内网，通过隧道统一访问
  • 端口号
    • 8080：前台端口
    • 18080：vscode端口
    • 9878/docs：后台接口路径

第三方库

代码目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
src
	layout
		home
			echarts // 首页模块对应的代码
            	index.vue // 路由组件
			jobs // 列表页对应的代码
            	index.vue // 路由组件
			index.vue // 左侧导航栏对应的代码
	utils
    	request.js // 封装axios
		global.js // 全局混入
    api
    	crawler.js // 实际请求的接口
	mixin
    	mixin.js // 混入

功能模块

首页

src/layout/home/echarts

template

引入Header公共组件

引入PageCard公共组件，显示图标

显示总数

显示告警文件

图一：显示每个爬虫文件的爬取总量，柱状图

图二：显示每个爬虫文件，按天爬取的数量，折线图

el-select与图二交互，支持按天查看数据

script

data

optionsAllCounter：柱状图的初始化配置，对应的data为空数组

lineOptions：折线图的初始化配合，对应的data为空数组

showLoadingA：柱状图交互优化

showLoadingB：折线图交互优化

selectOptions：el-select双向绑定的值

selectValue：el-select选中的值，默认值为7

selectShow：根据折叠状态，显示隐藏el-select

echartsInstance：折线图挂载的echarts实例对象

echartsMounted：echartsInstance对应的挂载状态，默认为false，每次折线图实例化后，状态变更为为true，每次直线图实例化前，判断是否已挂载，若挂载则需要移除echartsMounted实例重新生成实例挂载

totalNumber：所有爬虫的数量

alarmData：告警数据

methods

selectChange：el-select的change事件，调用getCounterByDays方法

getAllCounter：

getCounterByDays：按天获取爬虫数量

  • 显示加载状态
  • 调用getCounterByDays接口，then方法成功的回调中
    • 关闭加载状态
    • 获取到数据后，根据res.data处理数据，并存到lineOptions对应的配置项中
    • 判断是否已经有echarts实例挂载，若有，则移除
    • 拿到dom节点，根据新的配置项，实例化echarts，并挂载到this上(vm)
    • 通知已挂载，更改挂载状态

列表页

src/layout/home/echarts

template

引入Header公共组件

启停按钮组、爬虫调度的时间间隔输入框

搜索（搜索任务ID和任务中文名）

任务列表

script

data

searchInput：保存搜索框的值

methods

公共组件

Header组件

参数 说明 类型 可选值 默认值

PageCard组件

Attributes

参数 说明 类型 可选值 默认值
iconfontL 左侧显示的图标，需要先引入阿里图标库 string — —
iconfontR 右侧显示的图标，需要先引入阿里图标库 string — —
showloading 内容区正式显示前的加载图标 boolean — —
name 名称，必须值 string — —
height 自定义内容区高度 string | number — —

slots

参数 说明
text 内容区中显示的文本
chart 内容区中显示的echarts图表，已经固定好宽高

events

事件名称 说明 回调参数
collapse 通知父组件折叠状态，右侧图标点击触发 (boolean: ‘false’ | ‘true’)

公共方法

更新日志

时间 更新项 【bug】 【新增】 【优化】
2022年12月13日 1.修正首页折线图显示【bug】
2.新增预警功能展示【新增】
3.界面修改成中文【优化】
4.告警信息【优化】
5.修改爬虫调度默认值为3600【优化】		 1 1 3
2022年12月14日 1.告警页面优化【优化】
2.Echarts渲染模式更改为SVG【优化】
3.列表页搜索功能【新增】		 1 2
2022年12月19日 1.首页新增刷新功能【优化】 1
2022年12月21日 1.告警显示优化【优化】
2.柱状图支持左右拖拽【优化】
3.折线图显示优化【优化】		 3

2022年12月13日

1.修正首页折线图显示【bug】

现象描述：

堆叠折线图目前又两条折线，数据获取的是没问题的，但一起展示的时候，显示的有问题

绿色的只有最后一天有数据，但之前的都跟着蓝色的折线走了

1
2
3
4
5
6
lineOptions: {
    series: [
        {data: [0, 0, 0, 5, 4, 0]},
        {data: [0, 0, 0, 0, 0, 5]},
    ]
}

image-20221213114636630

原因：复制折线图演示demo时，demo中的stack配置项未注释，并且当时也不清楚其配置项的具体作用

方案：注释掉stack配置项即可

2.新增预警功能展示【新增】

  • 封装预警接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // crawler.js

    // 爬虫告警，获取7天内所有爬虫数量小于7的job
    export function getAlarmAdmin() {
      return request({
        url: "/admin/alarm",
      });
    }

  • 首页图标页的路由组件引入，挂载时调用该接口，获取告警数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    // 获取告警信息
        getAlarmAdmin() {
          this.showLoadingC = true;
          getAlarmAdmin().then(
            (res) => {
              this.showLoadingC = false;
              if (res.errcode == 200) {
                // console.log(res.data);
                let keys = this.getKeys(res.data);
                let values = this.getValues(res.data);
                console.log(keys, values);
                keys.forEach((item, index) => {
                  this.alarmData.push({
                    fileName: item,
                    nums: values[index],
                  });
                });
              } else {
                this.$message({
                  message: "告警数据获取失败",
                  type: "error",
                });
              }
            },
            (err) => {
              console.log(err);
              this.$message({
                message: "告警数据获取失败",
                type: "error",
              });
            }
          );
        },
      },

  • 在页面上合适的地方，以表格的形式展示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <PageCard iconfontL="icon-tishi" name="统计" :height="100">
            <template v-slot:text>
              <!-- <span>
                This view displays real-time statistics about the spider jobs
              </span> -->
              <div class="total-number">
                <div class="text-container">
                  <span>总数:</span>
                  <span class="text">{{ totalNumber }}</span>
                </div>
                <div class="alarm-container" v-show="alarmData.length">
                  <el-table :data="alarmData" style="width: 100%" :max-height="90">
                    <el-table-column
                      prop="fileName"
                      label="告警文件"
                      sortable
                    ></el-table-column>
                    <el-table-column
                      prop="nums"
                      label="数量"
                      sortable
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
          </PageCard>

  • 样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .total-number {
      position: relative;
      // font-family: electronicFont;
      font-size: 18px;
      // float: right;
      .text-container {
        .text {
          font-size: 30px;
        }
      }
      .alarm-container {
        position: absolute;
        top: -20px;
        right: 0;
        width: 20%;
      }
    }

3.界面修改成中文【优化】

需求：只要中文，不要英文，不要支持中英文切换

原因：无UI稿

方案：手动将每个页面的英文，修改成对应的中文

4.告警信息【优化】

告警一

警告信息如下：[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

在这里插入图片描述

解决办法：

1、直接在项目终端下载安装npm install default-passive-events

2、在main.js中引入就可以了import "default-passive-events";

添加事件管理者’passive’，来阻止’touchstart’事件，让页面更加流畅。 解决chrome下的warning问题

告警二

   Unchecked runtime.lastError: The message port closed before a response was received.

解决办法：重启下已安装的插件（不确定是哪个，所有的都点一下）

5.修改爬虫调度默认值为3600【优化】

新增变量defaultInterval，值为3600，在操作里需要重置默认值的，直接使用该值，此后如果需要修改默认值，只要修改这一处即可

2022年12月14日

1.告警页面优化【优化】

需要实现的效果：在总条数显示的地方右边，按单元格显示告警数据，从左到右展示，多余数据撑开父元素（不要下拉框）

image-20221214111952107

2.Echarts渲染模式更改为SVG【优化】

1
2
3
4
5
6
7
8
9
10
initChart(ref, options) {
      let myChart = this.$echarts.init(this.$refs[ref], null, {
        renderer: "svg",
      });
      myChart.setOption(options);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      return myChart;
    },

注意：echarts按需导入里，要引入svg渲染器

1
2
3
4
5
import { SVGRenderer } from "echarts/renderers";
echarts.use([
  SVGRenderer,
]);

3.列表页搜索功能【新增】

获取列表数据后，需要另存一份副本allSpiderDataCopy

el-table绑定的是需要操作的那一份数据allSpiderData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
inputChange() {
      let arg = this.searchInput;
      let filter = this.allSpiderDataCopy.filter((item, index, arr) => {
        if (
          item.job_chinese_name.indexOf(arg) > -1 ||
          item.job_id.indexOf(arg) > -1
        ) {
          return item;
        }
      });
      if (filter.length == 0) {
        this.allSpiderData = [];
        this.$message({
          message: "搜索结果为空",
          type: "warn",
        });
        return;
      } else {
        this.allSpiderData = filter;
        this.$message({
          message: "搜索成功",
          type: "success",
        });
      }
      if (arg.length == 0) {
        this.allSpiderData = this.allSpiderDataCopy;
      }
    },
    clearInput() {
      if (this.searchInput) {
        this.searchInput = "";
      }
    },

2022年12月19日

1.首页新增刷新功能【优化】

主要逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
refreshData() {
    if (this.echartsAMounted) {
        this.showLoadingA = true;
        this.getAllCounter();
    }
    if (this.echartsMounted) {
        this.showLoadingB = true;
        this.getCounterByDays();
    }

    this.alarmData = [];
    this.getAlarmAdmin();
},

2022年12月21日

1.告警显示优化【优化】

2.柱状图支持左右拖拽【优化】

3.折线图显示优化【优化】