feat:完成任务信息静态页面

src/components/pagination/index.vue

@@ -14,12 +14,10 @@
     @current-change="handleCurrentChange"
   />
 </template>
+
 <script lang="ts" setup>
 import { computed } from 'vue'
 defineOptions({ name: 'Pagination' })
-
-
-
 const props = defineProps({
   // 总条目数
   total: {

src/components/search/index.vue

 <template>
     <div>
-        <span>关键词搜索</span>
+        <span>关键词搜索:</span>
         <el-input v-model="input2" style="width: 240px" placeholder="Search" :prefix-icon="Search" />
     </div>
 </template>
 
-<script>
-const props = defineProps({
-    to: {
-        type: String,
-        required: true
-    }
-})
+<script setup lang="ts">
 
 </script>
\ No newline at end of file

src/layout/components/Navbar.vue

@@ -26,9 +26,7 @@ const logout = async () => {
 <template>
   <div class="navbar">
     <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
     <breadcrumb class="breadcrumb-container" />
-
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">

src/router/index.ts

@@ -208,6 +208,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
   {
     path: "/os-status",
+    redirect: "/os-status/list",
     component: Layout,
     children: [
       {
@@ -221,6 +222,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
   {
     path: "/os-taskInformation",
+    redirect: "/os-taskInformation/list",
     component: Layout,
     children: [
       {
@@ -234,6 +236,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
   {
     path: "/os-taskRecord",
+    redirect: "/os-taskRecord/list",
     component: Layout,
     children: [
       {
@@ -247,6 +250,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
   {
     path: "/os-dataDisplay",
+    redirect: "/os-dataDisplay/list",
     component: Layout,
     children: [
       {
@@ -260,6 +264,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
   {
     path: "/os-preprocessingRecord",
+    redirect: "/os-preprocessingRecord/list",
     component: Layout,
     children: [
       {
@@ -273,6 +278,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
   {
     path: "/os-system",
+    redirect: "/os-system/list",
     component: Layout,
     children: [
       {

src/views/home/home.vue

@@ -26,15 +26,12 @@ const resetData = (id: string) => {
       @on-init="handleSelectScrapydServerInit"
       @change="resetData"
     />
-
     <div class="mt-md">
       <home-data-info
         :key="scrapydServerId"
         :scrapyd-server-id="scrapydServerId"
       />
-
       <home-system-info />
-
       <!-- <home-config /> -->
     </div>
   </div>

src/views/job/index.vue

@@ -8,7 +8,6 @@
       @success="fetchJobList"
       @on-init="handleToolInit"
     />
-    
     <JobTable
       :data="jobList"
       :loading="loading"

src/views/os-dataDisplay/index.vue

+<template>
+    <div class="text-left p-10">
+        <el-form inline>
+            <el-form-item label="目标选择:">
+                <el-select v-model="taskValue" placeholder=" " style="width: 140px">
+                    <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="分类选择:">
+                <el-select v-model="errorValue" placeholder=" " style="width: 140px">
+                    <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="关键词搜索:">
+                <el-input v-model="searchInput" style="width: 240px" placeholder="Search" :prefix-icon="Search" />
+            </el-form-item>
+            <el-form-item label="时间:">
+                <el-date-picker v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
+                    end-placeholder="结束时间" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">批量导出</el-button>
+                <el-button type="danger">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column type="selection" width="55" />
+        <el-table-column property="name" label="序号" width="60" />
+        <el-table-column property="name" label="目标名称" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="标题" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="关键字" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="数据分类" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="数据时间" width="220" show-overflow-tooltip />
+        <el-table-column property="name" label="记录时间" width="220" show-overflow-tooltip />
+        <el-table-column label="操作">
+            <template #default="scope">
+                <el-button type="primary" plain @click="handleDetails(scope.row)">
+                    编辑
+                </el-button>
+                <el-button type="success" plain @click="handleDetails(scope.row)">
+                    详情
+                </el-button>
+                <el-button type="danger" plain @click="handleConfirm(scope.row)">
+                    删除
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
+        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
+            @pagination="getData" />
+        <!-- <el-pagination background v-model:current-page="currentPage4" v-model:page-size="pageSize4"
+            :page-sizes="[10, 20, 50, 100]" :size="paginationSize" :disabled="disabled"
+            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" /> -->
+    </div>
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Pagination from '@/components/pagination/index.vue'
+import { Search } from '@element-plus/icons-vue'
+const errorValue = ref('')
+const taskValue = ref('')
+const timeValue = ref('')
+const searchInput = ref('')
+const taskOptions = [
+    {
+        value: 'task1',
+        label: 'sk网',
+    },
+    {
+        value: 'task2',
+        label: 'nasa网',
+    },
+    {
+        value: 'task3',
+        label: '网',
+    },
+]
+const tableData = ref([
+    {
+        name: '1',
+        address: 'sk网',
+        address1: '成功',
+        address2: '100',
+        address3: '0',
+        address4: '无',
+        address5: '10s',
+        address6: '2023-05-13 10:00:00',
+    }
+])
+const pageObj = ref({
+    total: 10,
+    pageSize: 10,
+    pageNo: 1
+})
+const paginationSize = ref('default')
+const disabled = ref(false)
+const background = ref(false)
+const currentPage4 = ref(4)
+const pageSize4 = ref(10)
+const handleSizeChange = (val: number) => {
+}
+const handleCurrentChange = (val: number) => {
+}
+const handleDetails = (row: any) => {
+    console.log(row);
+}
+
+const handleConfirm = (row: any) => {
+    console.log(row);
+}
+
+const getData = () => {
+    console.log('getData');
+}
+</script>
+
+<style scoped>
+.el-button:focus {
+    outline: none;
+}
+</style>

src/views/os-preprocessingRecord/index.vue

+<template>
+    <div class="text-left p-10">
+        <el-form inline>
+            <el-form-item label="目标选择:">
+                <el-select v-model="taskValue" placeholder=" " style="width: 200px">
+                    <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="预处理结果选择:">
+                <el-select v-model="errorValue" placeholder=" " style="width: 200px">
+                    <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="时间:">
+                <el-date-picker v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
+                    end-placeholder="结束时间" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="danger">批量处理</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column type="selection" width="55" />
+        <el-table-column property="name" label="序号" width="60" />
+        <el-table-column property="name" label="目标名称" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="标题" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="关键字" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="数据分类" width="160" show-overflow-tooltip />
+        <el-table-column property="name" label="数据时间" width="220" show-overflow-tooltip />
+        <el-table-column property="name" label="记录时间" width="220" show-overflow-tooltip />
+        <el-table-column label="操作">
+            <template #default="scope">
+                <el-button  type="primary" @click="handleDetails(scope.row)">
+                    编辑
+                </el-button>
+                <el-button  type="success" @click="handleDetails(scope.row)">
+                    详情
+                </el-button>
+                <el-button  type="danger" @click="handleConfirm(scope.row)">
+                    删除
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
+        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
+            @pagination="getData" />
+        <!-- <el-pagination background v-model:current-page="currentPage4" v-model:page-size="pageSize4"
+            :page-sizes="[10, 20, 50, 100]" :size="paginationSize" :disabled="disabled"
+            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" /> -->
+    </div>
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Pagination from '@/components/pagination/index.vue'
+
+const errorValue = ref('')
+const taskValue = ref('')
+const timeValue = ref('')
+const searchInput = ref('')
+const taskOptions = [
+    {
+        value: 'task1',
+        label: 'sk网',
+    },
+    {
+        value: 'task2',
+        label: 'nasa网',
+    },
+    {
+        value: 'task3',
+        label: '网',
+    },
+]
+const tableData = ref([
+    {
+        name: '1',
+        address: 'sk网',
+        address1: '成功',
+        address2: '100',
+        address3: '0',
+        address4: '无',
+        address5: '10s',
+        address6: '2023-05-13 10:00:00',
+    }
+])
+const pageObj = ref({
+    total: 10,
+    pageSize: 10,
+    pageNo: 1
+})
+const paginationSize = ref('default')
+const disabled = ref(false)
+const background = ref(false)
+const currentPage4 = ref(4)
+const pageSize4 = ref(10)
+const handleSizeChange = (val: number) => {
+}
+const handleCurrentChange = (val: number) => {
+}
+const handleDetails = (row: any) => {
+    console.log(row);
+}
+
+const handleConfirm = (row: any) => {
+    console.log(row);
+}
+
+const getData = () => {
+    console.log('getData');
+}
+</script>
+
+<style scoped></style>

src/views/os-status/components/dataCard.vue

@@ -83,7 +83,7 @@ defineProps({
 
 <style lang="scss" scoped>
 .dataCard {
-    background: #eae6e6;
+    background: #c6ebfc;
     border: 1.5px solid rgb(193, 188, 188);
     width: 400px;
     height: 14vh;

src/views/os-status/components/taskMonitoringCard.vue

@@ -82,7 +82,7 @@ const options = [
 
 <style lang="scss" scoped>
 .taskCard {
-    background: #eae6e6;
+    background: #c6ebfc;
     margin-bottom: 20px;
     border: 1.5px solid rgb(193, 188, 188);
     width: 400px;

src/views/os-system/index.vue

+<template>
+    <div class="text-left p-10">
+        <el-form inline>
+            <el-form-item label="角色选择:">
+                <el-select v-model="taskValue" placeholder=" " style="width: 200px">
+                    <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">创建用户</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="danger">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column type="selection" width="55" />
+        <el-table-column property="name" label="序号" width="100" />
+        <el-table-column property="name" label="用户名" width="280" show-overflow-tooltip />
+        <el-table-column property="name" label="用户名称" width="280" show-overflow-tooltip />
+        <el-table-column property="name" label="角色" width="280" show-overflow-tooltip />
+        <el-table-column property="name" label="创建时间" width="280" show-overflow-tooltip />
+        <el-table-column label="操作">
+            <template #default="scope">
+                <el-button  type="primary" @click="handleDetails(scope.row)">
+                    编辑
+                </el-button>
+                <el-button  type="success" @click="handleDetails(scope.row)">
+                    详情
+                </el-button>
+                <el-button  type="danger" @click="handleConfirm(scope.row)">
+                    删除
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
+        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
+            @pagination="getData" />
+        <!-- <el-pagination background v-model:current-page="currentPage4" v-model:page-size="pageSize4"
+            :page-sizes="[10, 20, 50, 100]" :size="paginationSize" :disabled="disabled"
+            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" /> -->
+    </div>
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Pagination from '@/components/pagination/index.vue'
+
+const errorValue = ref('')
+const taskValue = ref('')
+const timeValue = ref('')
+const searchInput = ref('')
+const taskOptions = [
+    {
+        value: 'task1',
+        label: 'sk网',
+    },
+    {
+        value: 'task2',
+        label: 'nasa网',
+    },
+    {
+        value: 'task3',
+        label: '网',
+    },
+]
+const tableData = ref([
+    {
+        name: '1',
+        address: 'sk网',
+        address1: '成功',
+        address2: '100',
+        address3: '0',
+        address4: '无',
+        address5: '10s',
+        address6: '2023-05-13 10:00:00',
+    }
+])
+const pageObj = ref({
+    total: 10,
+    pageSize: 10,
+    pageNo: 1
+})
+const paginationSize = ref('default')
+const disabled = ref(false)
+const background = ref(false)
+const currentPage4 = ref(4)
+const pageSize4 = ref(10)
+const handleSizeChange = (val: number) => {
+}
+const handleCurrentChange = (val: number) => {
+}
+const handleDetails = (row: any) => {
+    console.log(row);
+}
+
+const handleConfirm = (row: any) => {
+    console.log(row);
+}
+
+const getData = () => {
+    console.log('getData');
+}
+</script>
+
+<style scoped></style>

src/views/os-taskInformation/components/taskCard.vue

+<!-- 任务执行统计卡片组件 -->
+<template>
+    <div class="taskCard m-r-16 p-6" v-for="i in options" :key="i.value">
+        <div class="titleStyle">
+            <span>xx任务</span>
+            <span> 启用 </span>
+            <el-switch v-model="taskSwitch"/>
+        </div>
+        <div class="flex justify-center">
+            <!-- <el-form-item> -->
+                <el-button type="primary">编辑</el-button>
+                <el-button type="success">详情</el-button>
+                <el-button type="danger">删除</el-button>
+            <!-- </el-form-item> -->
+        </div>
+        <div class="wordStyle ">
+            <span>目标网站: {{ successTask }} ; </span>
+            <span> 执行频率: {{ successTask }} </span>
+        </div>
+        <div class="wordStyle">
+            <span>执行次数: {{ failTask }} 个; </span>
+            <span> 成功次数: {{ failTask }} 个</span>
+        </div>
+        <div class="wordStyle">
+            <span>失败次数: {{ failTask }} 个; </span>
+            <span> 异常记录: {{ unusualTask }} 个</span>
+        </div>
+        
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+defineProps({
+    successTask: {
+        type: String,
+        default: ''
+    },
+    failTask: {
+        type: String,
+        default: ''
+    },
+    unusualTask: {
+        type: String,
+        default: ''
+    }
+})
+const taskSwitch = ref(false)
+const options = [
+    {
+        value: 'year',
+        label: '近一年',
+    },
+    {
+        value: 'month',
+        label: '近一月',
+    },
+    {
+        value: 'week',
+        label: '近一周',
+    },
+    {
+        value: 'day',
+        label: '近一日',
+    },
+    {
+        value: 'year',
+        label: '近一年',
+    },
+    {
+        value: 'month',
+        label: '近一月',
+    },
+    {
+        value: 'week',
+        label: '近一周',
+    },
+    {
+        value: 'day',
+        label: '近一日',
+    },
+    {
+        value: 'year',
+        label: '近一年',
+    },
+]
+</script>
+
+<style lang="scss" scoped>
+.taskCard {
+    background: #c6ebfc;
+    margin-bottom: 20px;
+    border: 1.5px solid rgb(255, 255, 255);
+    width: 400px;
+    font-size: 20px;
+    height: 15.5vh;
+    border-radius: 7px;
+    .titleStyle {
+        font-size: 22px;
+        margin-top: -5px;
+    }
+    .wordStyle {
+        font-size: 16px;
+    }
+}
+</style>

src/views/os-taskInformation/index.vue

 <template>
-111
+    <div class="text-left p-8">
+        <el-form inline>
+            <el-form-item label="关键词搜索:">
+                <el-input v-model="searchInput" style="width: 240px" placeholder="Search" :prefix-icon="Search" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">创建任务</el-button>
+            </el-form-item>
+        </el-form>
+
+    </div>
+    
+    <div class="flex flex-wrap m-t--2 justify-center">
+        <taskCard successTask="100" failTask="10" unusualTask="1" />
+    </div>
+
+    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4 ">
+        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
+            @pagination="getData" />
+    </div>
+
+
+
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import Pagination from '@/components/pagination/index.vue'
+import taskCard from './components/taskCard.vue'
+
+const errorValue = ref('')
+const taskValue = ref('')
+const timeValue = ref('')
+const searchInput = ref('')
+const taskOptions = [
+    {
+        value: 'task1',
+        label: 'sk网',
+    },
+    {
+        value: 'task2',
+        label: 'nasa网',
+    },
+    {
+        value: 'task3',
+        label: '网',
+    },
+]
+const tableData = ref([
+    {
+        name: '1',
+        address: 'sk网',
+        address1: '成功',
+        address2: '100',
+        address3: '0',
+        address4: '无',
+        address5: '10s',
+        address6: '2023-05-13 10:00:00',
+    }
+])
+const pageObj = ref({
+    total: 10,
+    pageSize: 10,
+    pageNo: 1
+})
+const paginationSize = ref('default')
+const disabled = ref(false)
+const background = ref(false)
+const currentPage4 = ref(4)
+const pageSize4 = ref(10)
+const handleSizeChange = (val: number) => {
+}
+const handleCurrentChange = (val: number) => {
+}
+const handleDetails = (row: any) => {
+    console.log(row);
+}
 
+const handleConfirm = (row: any) => {
+    console.log(row);
+}
+
+const getData = () => {
+    console.log('getData');
+}
 </script>
+
+<style scoped></style>

src/views/os-taskRecord/index.vue

@@ -61,6 +61,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Pagination from '@/components/pagination/index.vue'
+
 const errorValue = ref('')
 const taskValue = ref('')
 const timeValue = ref('')

src/views/schedule/index.vue

 <template>
   <div class="app-container">
     <schedule-tool @success="getData" />
-
     <div style="height: 20px"></div>
-
     <schedule-table
       :data="list"
       @success="getData"

src/views/scrapyd-server/index.vue

 <template>
   <div class="app-container">
-  
     <ScrapydServerTool @success="getData" />
-
     <div style="height:20px"></div>
-
     <ScrapydServerTable
       :data="list"
       :loading="listLoading"
       @success="getData"
     />
-
   </div>
 </template>
 

src/views/stats/index.vue

@@ -7,7 +7,6 @@
           <span>爬虫统计数据</span>
         </div>
       </template>
-      
       <!-- 工具栏组件 -->
       <stats-tool
         v-model:scrapyd-server-id="scrapydServerId"
@@ -17,14 +16,12 @@
         @spider-change="handleSpiderChange"
         @success="handleSuccess"
       />
-
       <!-- 统计数据表格 -->
       <stats-table
         :data="list"
         v-loading="listLoading"
         @sort-change="handleSortChange"
       />
-
       <!-- 分页控件 -->
       <div class="pagination-container">
         <el-config-provider :locale="zhCn">