spider_creater/frontend/src/components/spider/RunSpider.vue

<template>
    <div class="dialog-content">
        <div class="flex gap-2">
            <el-space class="edit-tag-list">
                <el-tag class="edit-tag" type="primary"> {{ formData.code }}</el-tag>
                <el-tag class="edit-tag" type="success"> {{ formData.site }}</el-tag>
                <el-tag class="edit-tag" type="info"> {{ formData.channel }}</el-tag>
                <el-tag class="edit-tag" type="warning">{{ formData.href }}</el-tag>
                <el-tag class="edit-tag" type="primary"> {{ formData.modifyuser }}</el-tag>
            </el-space>
        </div>
        <div class="space"></div>
        <el-form ref="form" :model="formData" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="URL">
                        <el-input v-model="formData.href" disabled :title="formData.href"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8"><el-form-item label="代理地址">
                        <el-input v-model="formData.proxyServe"></el-input>
                    </el-form-item></el-col>
                <el-col :span="8"><el-form-item label="最大页数">
                        <el-input v-model="formData.maxPages"></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="8"><el-form-item label="列表延时(MS)">
                        <el-input v-model="formData.listDelay"></el-input>
                    </el-form-item></el-col>
                <el-col :span="8"><el-form-item label="翻页延时(MS)">
                        <el-input v-model="formData.trunPageDelay"></el-input>
                    </el-form-item></el-col>
                <el-col :span="8"><el-form-item label="详情延时(MS)">
                        <el-input v-model="formData.contentDelay"></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row>
                <el-col :span="8"><el-form-item label="浏览器">
                        <el-radio-group v-model="formData.headless">
                            <el-radio :value="true">无头</el-radio>
                            <el-radio :value="false">显式</el-radio>
                        </el-radio-group> </el-form-item>
                </el-col>
                <el-col :span="8"><el-form-item label="显示图像">
                        <el-radio-group v-model="formData.showImage">
                            <el-radio :value="true">显示</el-radio>
                            <el-radio :value="false">不显示</el-radio>
                        </el-radio-group> </el-form-item>
                </el-col>
                <el-col :span="8"><el-form-item label="开启线程数">
                        <el-input v-model="formData.threads"></el-input>
                    </el-form-item></el-col>

            </el-row>

        </el-form>
        <div style="text-align: center;">
            <el-space>
                <el-button type="primary" @click="handleDebug"><el-icon>
                        <VideoPlay />
                    </el-icon>执行</el-button>
                <el-button type="primary" @click="handleStop"><el-icon>
                        <VideoPause />
                    </el-icon>终止</el-button>
                <el-button type="primary" @click="handleRefersh"><el-icon>
                        <Refresh />
                    </el-icon>刷新结果</el-button>
                <!-- <el-button type="primary" @click="handleCountYestday"><el-icon>
                        <Refresh />
                    </el-icon>统计昨日信息发布量</el-button> -->
                <el-dropdown>
                    <el-button type="primary">
                        结果导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleExportEpub">导出EPUB格式文件</el-dropdown-item>
                            <el-dropdown-item @click="handleExportJson">导出JSON格式文件</el-dropdown-item>
                            <el-dropdown-item @click="handleExportExcel">导出Excel格式文件</el-dropdown-item>
                            <!-- <el-dropdown-item>补录/上推至平台</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown></el-space>
        </div>
        <el-divider />
        <div id="debugEventContian">执行日志:&nbsp;{{ debugLogLine }}</div>
        <el-divider />
        <el-table :data="tableData" style="width: 100%" :height="tableHeight" @row-click="handleRowClick">
            <el-table-column prop="no" label="序号" width="90" />
            <el-table-column prop="title" label="标题" width="240" show-overflow-tooltip />
            <el-table-column prop="href" label="链接" show-overflow-tooltip />
            <el-table-column prop="contentShort" label="正文" show-overflow-tooltip />
        </el-table>
    </div>
    <ViewArticle ref="articleDialog" />
</template>
<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import ViewArticle from "./ViewArticle.vue"

import {ViewCurrentSpiderConfig, DebugSpider, StopDebugSpider, ExportJsonFile} from "../../../wailsjs/go/main/App"
import { ViewResultItemAll, SelectSaveFilePath, ExportEpubFile, ExportExcelFile, CountYestodayArts } from "../../../wailsjs/go/main/App"
import { EventsOn, EventsOff } from "../../../wailsjs/runtime"

let originData = {}
const defaultFormValue = {
    maxPages: 1,
}

const formData = ref({
    // tags
    code: '',
    site: '',
    channel: '',
    href: '',
    modifyuser: '',

    // form
    proxyServe: '',
    maxPages: defaultFormValue.maxPages,
    listDelay: '',
    trunPageDelay: '',
    contentDelay: '',
    headless: false,
    showImage: false,
    threads: '1',

    cssmark: {}
})

const articleDialog = ref(null)

const debugLogLine = ref("")
const tableData = ref([])
const tableHeight = computed(() => window.innerHeight - 480 + 'px');

const setPageData = (e) => {
    originData = e
    const cssMark = e.cssmark
    formData.value.code = e.code
    formData.value.site = e.site
    formData.value.channel = e.channel
    formData.value.href = e.href
    formData.value.modifyuser = e.modifyuser
    if (cssMark) {
        // form
        // formData.value.maxPages = cssMark.maxPages
        formData.value.listDelay = cssMark.listDelayTime
        formData.value.trunPageDelay = cssMark.listTurnDelayTime
        formData.value.contentDelay = cssMark.contentDelayTime
        formData.value.cssmark = cssMark
    }
}

//开始调试
const handleDebug = () => {
    ElMessage({
        message: `${[formData.value.href, formData.value.listDelay, formData.value.contentDelay,parseInt(formData.value.trunPageDelay),
        formData.value.headless, formData.value.showImage, formData.value.proxyServe, formData.value.threads,
        formData.value.maxPages].join("//")}！`,
        showClose: true,
        duration: 3000,
    });
    const mark = {
        ...formData.value.cssmark,
        code: formData.value.code,
        site: formData.value.site,
        channel: formData.value.channel,
        href: formData.value.href,
        modifyuser: formData.value.modifyuser,
    }
    DebugSpider(
        formData.value.href,
        formData.value.proxyServe,
        parseInt(formData.value.maxPages),
        parseInt(formData.value.listDelay),
        parseInt(formData.value.trunPageDelay),
        parseInt(formData.value.contentDelay),
        formData.value.headless,
        formData.value.showImage,
        parseInt(formData.value.threads),
        mark,
    )
}
//停止调试
const handleStop = () => {
    StopDebugSpider()
}
//
const truncateString = (str, maxLength) => {
    return str.substring(0, maxLength) + "..";
}
//刷新加载数据
const handleRefersh = () => {
    ViewResultItemAll(formData.value.code).then(result => {
        //result = result.slice(-20);
        result.forEach((v, i) => {
            v.contentShort = truncateString(v.content, 50)
        })
        tableData.value = result
    })
}
//handleExportEpub导出文件
const handleExportEpub = () => {
  ElMessageBox.prompt('请输入文件名称', '文件名', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    SelectSaveFilePath("", value,"epub").then(save2file => {
      if (save2file == "") {
        console.log("无效的文件存储路径", save2file)
        return
      }
      ExportEpubFile(value, save2file, formData.value.code).then(d => {
        if (d.err === 1) {
          ElMessage({
            message: d.msg || `导出epub文件${save2file}完成！`,
            type: 'success',
            duration: 3000,
          });
        } else {
          ElMessage({
            message: d.msg || `导出epub文件${save2file}失败！`,
            type: 'error',
            duration: 3000,
          });
        }
      })
    })
  })
}

const handleExportJson = () => {
  ElMessageBox.prompt('请输入文件名称', '文件名', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    SelectSaveFilePath("", value,"json").then(save2file => {
      console.log("json",save2file)
      if (save2file == "") {
        console.log("无效的文件存储路径", save2file)
        return
      }
      ExportJsonFile(save2file, formData.value.code).then(d => {
        if (d.err === 1) {
          ElMessage({
            message: d.msg || `导出excel文件${save2file}完成！`,
            type: 'success',
            duration: 3000,
          });
        } else {
          ElMessage({
            message: d.msg || `导出excel文件${save2file}失败！`,
            type: 'error',
            duration: 3000,
          });
        }
      })
    })
  })
}

const handleExportExcel = () => {
  ElMessageBox.prompt('请输入文件名称', '文件名', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    SelectSaveFilePath("", value,"xlsx").then(save2file => {
      console.log("excel",save2file)
      if (save2file == "") {
        console.log("无效的文件存储路径", save2file)
        return
      }
      ExportExcelFile(save2file, formData.value.code).then(d => {
        if (d.err === 1) {
            ElMessage({
                message: d.msg || `导出excel文件${save2file}完成！`,
                type: 'success',
                duration: 3000,
            });
        } else {
            ElMessage({
                message: d.msg || `导出excel文件${save2file}失败！`,
                type: 'error',
                duration: 3000,
            });
        }
      })
    })
  })
}

const replaceAll = function (src, search, replacement) {
    return src.split(search).join(replacement);
};
//行点击事件
const handleRowClick = (row, column, event) => {
    articleDialog.value.dialogVisible = true
    row.content = replaceAll(row.content, '\n', '<br/>')
    articleDialog.value.formData = row
    articleDialog.value.scrollTop()
}
//
const handleCountYestday = () => {
    if (formData.value.listNextPageCss != "" && formData.value.listPublishTimeCss != "") {
        ElMessage({
            message: `${[formData.value.url, formData.value.listDelay, formData.value.contentDelay,
            formData.value.headless, formData.value.showImage, formData.value.proxyServe].join("//")}！`,
            showClose: true,
            duration: 3000,
        });
        CountYestodayArts(formData.value.url, parseInt(formData.value.listDelay), parseInt(formData.value.contentDelay),
            formData.value.headless == 'true', formData.value.showImage == 'true')
    } else {
        ElMessage({
            message: "当前爬虫设置，CSS选择器，不具备列表页发布时间+列表页翻页。",
            type: 'error',
            showClose: true,
            duration: 3000,
        });
    }
}
//Wails事件绑定
EventsOff('debug_event')
EventsOn("debug_event", data => {
    debugLogLine.value = data
})
//加载当前爬虫配置
// ViewCurrentSpiderConfig().then(result => {
//     console.log(result)
//     // result['listDelay'] = 500
//     // result['contentDelay'] = 500
//     // result['proxyServe'] = ''
//     // result['showImage'] = 'false'
//     // result['headless'] = 'false'
//     // formData.value = { ...result }
// })

defineExpose({
    setPageData,
})
</script>
<style scoped>
.dialog-content {
    max-height: 60vh;
    overflow-y: scroll;
}
.edit-tag-list {
    flex-wrap: wrap;
}
.edit-tag {
    margin-bottom: 4px;
}
</style>