dypid/web/src/views/TokenDetailView.vue

<script setup lang="ts">
import {useCounterStore} from "@/stores/counter.ts";
import {ref, watch} from 'vue'
import axios from "@/axios.ts";
import {useRoute} from "vue-router"


// 创建响应式引用，用于存储API请求结果
const result = ref()

// 创建响应式引用，用于存储当前选中的token值
const value = ref('')
value.value = useCounterStore().token

// 创建响应式引用，用于存储下拉选项列表
const options = ref([] as string[])

// 控制删除指定Redis键的确认对话框的显示状态
const deleteSpecifyDataVisible = ref(false)
const inputSpecifyData = ref('')

const deleteSpecifyDedupVisible = ref(false)
const inputSpecifyDedup = ref('')
const deleteSpecifyRawVisible = ref(false)
const inputSpecifyRaw = ref('')

const getInfo = () => {
  if (value.value != '') {
    axios.get('/api/token/info', {
      params: {
        token: value.value
      }
    }).then(res => {
      if (res.status == 200) {
        result.value = res.data.result
      }
    })
  }
}

const deleteDedup = () => {
  axios.delete('/api/token/info', {
    params: {
      token: value.value,
      dedup_bf: "all"
    }
  }).then(res => {
    getInfo()
  })
}

const deleteRedis = () => {
  axios.delete('/api/token/info', {
    params: {
      token: value.value,
      cache_list: "all",
    }
  }).then(res => {
    getInfo()
  })
}

getInfo()
setInterval(getInfo, 5000)

watch(value, (newValue) => {
  getInfo()
})


axios.get('/api/token').then(res => {
  if (res.status == 200) {
    res.data.result.forEach((item: any) => {
      options.value.push(item.token)
    })
  }
})

const deleteSpecifyData = () => {
  axios.delete('/api/token/info', {
    params: {
      token: value.value,
      both_number: inputSpecifyData.value,
    }
  }).then(res => {
    getInfo()
    deleteSpecifyDataVisible.value = false
  })
}
const deleteSpecifyDedup = () => {
  axios.delete('/api/token/info', {
    params: {
      token: value.value,
      dedup_bf: inputSpecifyDedup.value,
    }
  }).then(res => {
    getInfo()
    deleteSpecifyDedupVisible.value = false
  })
}
const deleteSpecifyRaw = () => {
  axios.delete('/api/token/info', {
    params: {
      token: value.value,
      cache_list: inputSpecifyRaw.value,
    }
  }).then(res => {
    getInfo()
    deleteSpecifyRawVisible.value = false
  })
}
</script>


<template>
  <div v-if="!useCounterStore().isAdmin">
    <el-alert title="您没有权限访问此页面" type="error" center show-icon/>
  </div>


  <div v-if="useCounterStore().isAdmin">
    <b>当前Token：</b>
    <el-select v-model="value" placeholder="选择Token" style="width: 240px">
      <el-option
          v-for="item in options"
          :key="item"
          :value="item"
      />
    </el-select>

    <el-divider/>

    <b>Token信息（每5秒刷新）</b>
    <el-button type="primary" plain @click="getInfo">手动刷新</el-button>
    <el-descriptions
        direction="vertical"
        :column="4"
        border
    >
      <el-descriptions-item label="去重对象" label-width="150px">
        <el-tag>{{ result?.dedup_object }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="上传数据格式" label-width="150px">
        {{ result?.data_format }}
      </el-descriptions-item>
      <el-descriptions-item label="去重参考值数量" label-width="150px">
        {{ result?.dedup_items_number }} 条
      </el-descriptions-item>
      <el-descriptions-item label="原始数据数量" label-width="150px">
        {{ result?.cache_list_number }} 条
      </el-descriptions-item>
    </el-descriptions>

    <p><b>管理</b></p>
    <el-button type="danger" @click="deleteDedup">删除全部去重参考值</el-button>
    <el-button type="danger" @click="deleteRedis">删除全部原始数据</el-button>
    <div style="margin-top: 10px">
      <el-button type="danger" @click="deleteSpecifyDedupVisible=true">删除指定数量去重参考值</el-button>
      <el-button type="danger" @click="deleteSpecifyRawVisible=true">删除指定数量原始数据</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-button type="danger" @click="deleteSpecifyDataVisible=true">
        删除指定数量的数据（去重参考值+原始数据）
      </el-button>
    </div>


    <!--弹窗输入-->
    <el-dialog v-model="deleteSpecifyDedupVisible" title="删除指定数量去重参考值" width="400">
      <el-input v-model="inputSpecifyDedup" style="width: 200px" placeholder="请输入删除数量"/>
      <template #footer>
        <el-button type="primary" @click="deleteSpecifyDedup">
          确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="deleteSpecifyRawVisible" title="删除指定数量原始数据" width="400">
      <el-input v-model="inputSpecifyRaw" style="width: 200px" placeholder="请输入删除数量"/>
      <template #footer>
        <el-button type="primary" @click="deleteSpecifyRaw">
          确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="deleteSpecifyDataVisible" title="删除指定数量的数据" width="400">
      <el-input v-model="inputSpecifyData" style="width: 200px" placeholder="请输入删除数量"/>
      <template #footer>
        <el-button type="primary" @click="deleteSpecifyData">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>