feat 支持蹲库存和历史库存

src/api/tracer.js

@@ -0,0 +1,22 @@
+import {mande} from "mande";
+import {provider} from "@/api/provider.js";
+import {queryRemoveZero} from "@/api/utils.js";
+
+const tracers = mande('/api/v2/tracers')
+
+export const ListTracers = (q) => {
+    const query = queryRemoveZero(q)
+    return tracers.get({query:query})
+}
+
+export const CreateTracer = (providerId, skuID)=>{
+    return provider.post(`${providerId}/ats-trace/${encodeURIComponent(skuID)}`)
+}
+
+export const DeleteTracer = (providerId, skuID)=>{
+    return provider.delete(`${providerId}/ats-trace/${encodeURIComponent(skuID)}`)
+}
+
+export const StopTracer = (providerId,skuID)=>{
+    return provider.post(`${providerId}/ats-trace/stop/${encodeURIComponent(skuID)}`)
+}

src/componse/history-ats/history-ats.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-chart class="h-400px w-full" :option="options" />
+</template>
+
+<script setup>
+import {computed} from "vue";
+import dayjs from "dayjs";
+import VChart from "vue-echarts";
+
+import { use } from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, TitleComponent, TooltipComponent, LegendComponent  } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+use([GridComponent, LineChart, CanvasRenderer, TitleComponent , TooltipComponent, LegendComponent ])
+
+const props = defineProps(
+    {
+      ats : {
+        type: Array,
+        default: () => {
+          return []
+        }
+      }
+    }
+)
+
+const options = computed(()=> {
+  return {
+    title: {
+      text: "历史价格",
+      left: "center"
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c}'
+    },
+    legend: {
+      left: 'left'
+    },
+    xAxis: {
+      type: 'category',
+      name: '日期',
+      data: (props.ats|| []).map(p => dayjs(p.createdAt).format('YYYY-MM-DD HH:mm'))
+    },
+    yAxis: {
+      name: '价格'
+    },
+    series: [
+      {
+        type: 'line',
+        name: '库存',
+        data: (props.ats|| []).map(p => p.ats)
+      },
+    ]
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/componse/provider-article/provider-article-panel.vue

@@ -5,6 +5,7 @@
         <div>更新时间：{{dayjs(provider.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
         <div v-if="provider.skuID">抓取：<a-switch :checked="!provider.exclude" @click="onClickExclude"/></div>
         <div v-if="provider.skuID">蹲货：<a-switch :checked="provider.watch" @click="onClickWatch"/></div>
+        <div v-if="provider.skuID">库存：<a-switch :checked="provider.traceAts" @click="onClickTrace"/></div>
       </div>
     </template>
     <template #header>
@@ -41,7 +42,7 @@
           <a-button type="primary" @click="fetchArticle(provider)" :loading="fetchLoading">拉取价格</a-button>
         </div>
         <div class="w-full flex items-center space-x-4">
-          <div>库存：{{provider.ast }}</div>
+          <div>库存：{{provider.ats }}</div>
           <a-button type="primary" @click="fetchArticleAts(provider)" :loading="fetchLoading">拉取库存</a-button>
         </div>
       </div>
@@ -119,6 +120,22 @@ const onClickWatch = (checked, e) => {
   })
 }
 
+const onClickTrace = (checked, e) => {
+  const api = props.provider.traceAts ? StopTracer : CreateTracer;
+  api(props.provider.providerId, props.provider.skuID).then(res => {
+    if (res.code !== 200) {
+      message.error(`更新失败:${res.msg}`)
+    } else {
+      message.success('更新成功')
+    }
+  }).catch(err => {
+    message.error('更新失败')
+    console.log(err)
+  }).finally(()=>{
+    emits('fetched')
+  })
+}
+
 watch(() => props.open, (newVal) => {
   if (newVal && !(props.provider.historyPrice?.length > 0)) {
     GetProviderHistory(props.provider.id).then(res => {
@@ -139,6 +156,7 @@ import { GridComponent, TitleComponent, TooltipComponent, LegendComponent  } fro
 import { CanvasRenderer } from 'echarts/renderers'
 import {FetchProviderArticleAts, FetchProviderArticlePrice} from "@/api/provider.js";
 import {CreateWatcher, StopWatcher} from "@/api/watcher.js";
+import {CreateTracer, StopTracer} from "@/api/tracer.js";
 
 use([GridComponent, LineChart, CanvasRenderer, TitleComponent , TooltipComponent, LegendComponent ])
 

src/views/ats-tracer/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4 overflow-auto">
+    <div class="flex justify-between">
+      <a-button type="primary" @click="fetchArticle.visible=true" :disabled="loading">添加</a-button>
+      <div class="flex space-x-4">
+        <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
+        <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
+      </div>
+    </div>
+    <div class="h-full border-0 border-t-1 border-solid border-gray-300 pt-4 overflow-auto">
+      <a-spin :spinning="loading" :indicator="indicator">
+        <a-table :dataSource="data.list" :columns="columns" :pagination="false" rowKey="id">
+          <template #expandedRowRender="{ record }">
+            <history-ats :ats="record.historyAts"></history-ats>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'traceAts'">
+              <a-switch :checked="record.traceAts" @click="onClickTrace(!record.traceAts,record.providerId,record.skuID)"/>
+            </template>
+            <template v-else-if="column.key === 'image'">
+              <div class="w-75px h-75px">
+                <a-image  :src="record.image"/>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'skuID'">
+              <a v-if="record.skuID !== '' " :href="record.link" target="_blank">{{record.skuID}}</a>
+              <span v-else>正在抓取信息</span>
+            </template>
+            <template v-else-if="column.key === 'updatedAt'">
+              <span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
+            </template>
+            <template v-else-if="column.key === 'opt'">
+              <a-button type="link" danger @click="onDelete(record)">删除</a-button>
+            </template>
+          </template>
+        </a-table>
+      </a-spin>
+    </div>
+    <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" v-model:page-size="query.size" :total="data.total" show-less-items @change="list"/>
+  </div>
+  <fetch-article-panel v-model:visible="fetchArticle.visible" @reload="addTracer"></fetch-article-panel>
+</template>
+<script setup>
+import {h, onMounted, reactive, ref} from "vue";
+import {CreateTracer, DeleteTracer, ListTracers, StopTracer} from "@/api/tracer.js";
+import {LoadingOutlined} from "@ant-design/icons-vue";
+import moment from "moment";
+import {message} from "ant-design-vue";
+import FetchArticlePanel from "@/componse/fetch-article/fetch-article-panel.vue";
+import HistoryAts from "@/componse/history-ats/history-ats.vue";
+
+const query = reactive({
+  keyword: '',
+  watch: null,
+  providerId: null,
+  brand: null,
+  page: 1,
+  size:10
+})
+
+
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '32px',
+  },
+  spin: true,
+});
+
+const loading = ref(false)
+
+const data = ref({
+  total: 0,
+  list:[]
+})
+
+onMounted(()=>{
+  list()
+})
+
+const list = ()=>{
+  loading.value = true
+  ListTracers(query).then(res=>{
+    if (res.code !== 200) {
+      message.error(res.msg)
+    }else {
+      data.value.list = res.data.list
+      data.value.total = res.data.total
+    }
+  }).catch(err => {
+    console.log(err)
+  }).finally(()=>{
+    loading.value = false
+  })
+}
+
+const columns = [
+  {
+    title: '货号',
+    dataIndex: 'skuID',
+    key: 'skuID',
+  },
+  {
+    title: '图片',
+    key: 'image',
+  },
+  {
+    title: '品牌',
+    dataIndex: 'brand',
+    key: 'brand',
+  },
+    {
+    title: '网站',
+    dataIndex: 'providerId',
+    key: 'providerId',
+  },
+  {
+    title: '抓取库存',
+    dataIndex: 'traceAts',
+    key: 'traceAts',
+  },
+  {
+    title: '抓取时间',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+  },
+  {
+    title: '操作',
+    key: 'opt',
+  },
+]
+
+const onClickTrace = (checked, providerId, skuID) => {
+  const api = checked ? CreateTracer : StopTracer;
+  api(providerId, skuID).then(res => {
+    if (res.code !== 200) {
+      message.error(`更新失败:${res.msg}`)
+    } else {
+      message.success('更新成功')
+    }
+  }).catch(err => {
+    message.error('更新失败')
+    console.log(err)
+  }).finally(()=>{
+    list()
+  })
+}
+
+const onDelete = (providerArticle) => {
+  DeleteTracer(providerArticle.providerId, providerArticle.skuID).then(res => {
+    if (res.code !== 200) {
+      message.error(`删除失败:${res.msg}`)
+    } else {
+      message.success('删除成功')
+    }
+  }).catch(err => {
+    message.error('删除失败')
+    console.log(err)
+  }).finally(()=>{
+    list()
+  })
+}
+
+//添加商品
+const fetchArticle = reactive({
+  visible: false,
+})
+
+const addTracer = (providerId, skuID)=>{
+  loading.value = true
+  CreateTracer(providerId, skuID).then(res => {
+    if (res.code !== 200) {
+      message.error(`更新失败:${res.msg}`)
+    } else {
+      message.success('更新成功')
+    }
+  }).catch(err => {
+    message.error('更新失败')
+    console.log(err)
+  }).finally(()=>{
+    list()
+  })
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/views/layout/Aside.vue

@@ -8,7 +8,7 @@
   ></a-menu>
 </template>
 <script setup>
-import {AccountBookOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined, ToolOutlined} from "@ant-design/icons-vue";
+import {AccountBookOutlined,FundOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined, ToolOutlined} from "@ant-design/icons-vue";
 import {h} from "vue";
 import {useRouter} from "vue-router";
 
@@ -21,6 +21,12 @@ const onclick = ({key}) => {
 }
 
 const items = [
+  {
+    key: 'article',
+    icon: () => h(DollarCircleOutlined),
+    label: '商品',
+    title: '商品',
+  },
   {
     key: 'watcher-v2',
     icon: () => h(AccountBookOutlined),
@@ -28,10 +34,10 @@ const items = [
     title: '蹲货',
   },
   {
-    key: 'article',
+    key: 'ats-tracer',
-    icon: () => h(DollarCircleOutlined),
+    icon: () => h(FundOutlined),
-    label: '商品',
+    label: '追踪库存',
-    title: '商品',
+    title: '追踪库存',
   },
   {
     key: 'pusher',

vite.config.js

@@ -75,6 +75,13 @@ export default defineConfig({
         changeOrigin: true,
         secure: false,
         ws: true,
+      },
+      '/api/v2/tracers': {
+        // target: 'https://ht.timerzz.com:20443/',
+        target: 'http://localhost:8087/',
+        changeOrigin: true,
+        secure: false,
+        ws: true,
       }
     },
   },