big-model-web/src/views/manage/app/monitor/index.vue

<template>
  <div class="flex h-full w-full flex-col">
    <div
      class="__hover flex items-center text-sm text-[var(--czr-main-color)]"
      @click="toBack"
    >
      <SvgIcon
        name="czr_arrow"
        rotate="180"
        size="13"
        :active="true"
        class="mr-1"
      />应用中心
    </div>
    <div class="bm-main-box mt-4">
      <div class="mb-4 flex items-center">
        <img
          src="@/assets/images/app-default-logo.png"
          class="mr-[var(--czr-gap)] h-[3.25rem] w-[3.25rem]"
        />
        <div>
          <div class="flex items-center">
            <div class="text-[20px] font-bold">应用名称</div>
            <div
              class="ml-1 rounded-2xl bg-gradient-to-r from-[#C3E3FC] to-[#86C4FF] px-3 py-1 text-xs text-[#0876FF]"
            >
              简洁
            </div>
            <div
              class="ml-1 rounded-xs bg-[#5AD8A6] px-2.5 py-1 text-xs text-white"
            >
              已发布
            </div>
          </div>
          <div class="mt-2 text-sm text-[#6F7889]">(用户名称)</div>
        </div>
        <CzrButton
          :type="state.tab == 1 ? 'primary' : 'normal'"
          title="分析"
          class="ml-auto"
          @click="state.tab = 1"
        />
        <CzrButton
          :type="state.tab == 2 ? 'primary' : 'normal'"
          title="日志"
          class="ml-4"
          @click="state.tab = 2"
        />
      </div>
      <template v-if="state.tab == 1"></template>
      <template v-else-if="state.tab == 2">
        <CzrDialogDrag
          v-model:show="state.logs.showFilter"
          title="高级查询"
          :show-submit="false"
          :show-close="false"
          class="w-[500px]"
          :layout="{ mouse: true }"
        >
          <div>
            <CzrForm>
              <CzrFormColumn
                :span="24"
                label="消息ID"
                v-model:param="state.logs.texts.p1"
                placeholder="输入内容以查询"
              />
              <CzrFormColumn
                :span="24"
                label="会话ID"
                v-model:param="state.logs.texts.p2"
                placeholder="输入内容以查询"
              />
              <CzrFormColumn
                :span="24"
                label="用户ID"
                v-model:param="state.logs.texts.p3"
                placeholder="输入内容以查询"
              />
              <CzrFormColumn
                :span="24"
                label="意图识别"
                v-model:param="state.logs.texts.p4"
                placeholder="输入内容以查询"
              />
              <CzrFormColumn
                :span="24"
                label="输入"
                v-model:param="state.logs.texts.p5"
                placeholder="输入内容以查询"
              />
              <CzrFormColumn
                :span="24"
                label="输出"
                v-model:param="state.logs.texts.p6"
                placeholder="输入内容以查询"
              />
              <CzrFormColumn
                :span="13"
                label="输入token"
                v-model:param="state.logs.texts.p7"
                link="number"
                placeholder="token数量"
              />
              <CzrFormColumn
                :span="11"
                label="到"
                label-width="40px"
                v-model:param="state.logs.texts.p8"
                link="number"
                placeholder="token数量"
              />
              <CzrFormColumn
                :span="13"
                label="输出token"
                v-model:param="state.logs.texts.p9"
                link="number"
                placeholder="token数量"
              />
              <CzrFormColumn
                :span="11"
                label="到"
                label-width="40px"
                v-model:param="state.logs.texts.p10"
                link="number"
                placeholder="token数量"
              />
              <CzrFormColumn
                :span="13"
                label="整体耗时(ms)"
                v-model:param="state.logs.texts.p11"
                link="number"
                placeholder="输入耗时"
              />
              <CzrFormColumn
                :span="11"
                label="到"
                label-width="40px"
                v-model:param="state.logs.texts.p12"
                link="number"
                placeholder="输入耗时"
              />
            </CzrForm>
          </div>
        </CzrDialogDrag>
        <div class="log flex-1">
          <CzrContent
            v-model:tableHead="state.logs.query.head"
            @handleReset="onReset"
            @handleSearch="onSearch"
          >
            <template #tableTitle>
              <div class="flex flex-1 gap-2">
                <CzrFormColumn
                  class="__czr-table-form-column"
                  width="10%"
                  label-width="0px"
                  v-model:param="state.logs.query.form.dateType"
                  link="select"
                  :options="[
                    { label: '近7天', value: 1 },
                    { label: '近30天', value: 2 },
                    { label: '近90天', value: 3 },
                    { label: '近180天', value: 4 },
                  ]"
                  placeholder="应用状态"
                />
                <CzrFormColumn
                  class="__czr-table-form-column"
                  width="10%"
                  label-width="0px"
                  v-model:param="state.logs.query.form.p1"
                  link="select"
                  :options="[]"
                  placeholder="反馈"
                />
                <CzrFormColumn
                  class="__czr-table-form-column"
                  width="10%"
                  label-width="0px"
                  v-model:param="state.logs.query.form.p1"
                  link="select"
                  :options="[]"
                  placeholder="回答效果"
                />
                <CzrFormColumn
                  class="__czr-table-form-column"
                  width="10%"
                  label-width="0px"
                  v-model:param="state.logs.query.form.p1"
                  link="select"
                  :options="[]"
                  placeholder="渠道"
                />
                <CzrFormColumn
                  class="__czr-table-form-column"
                  width="24%"
                  label-width="0px"
                  v-model:param="state.logs.query.form.p2"
                  link="datetime"
                  type="datetimerange"
                  placeholder="请求时间"
                />
                <CzrFormColumn
                  class="__czr-table-form-column"
                  width="15%"
                  label-width="0px"
                  v-model:param="state.logs.texts.keyword"
                  placeholder="输入关键词以检索"
                  :prefix-icon="Search"
                />
              </div>
            </template>
            <template #buttons>
              <div
                class="__hover flex h-9 w-9 items-center justify-center rounded-sm bg-[var(--czr-main-color)]"
                @click="state.logs.showFilter = true"
              >
                <SvgIcon name="filter" color="#ffffff" />
              </div>
            </template>
            <template #table>
              <CzrTable
                v-loading="state.logs.query.loading"
                :data="state.logs.query.result.data"
                :head="state.logs.query.head"
                :total="state.logs.query.result.total"
                :page="state.logs.query.page.pageNum"
                :pageSize="state.logs.query.page.pageSize"
                @handlePage="onPage"
                v-model:selected="state.logs.query.selected"
              >
              </CzrTable>
            </template>
          </CzrContent>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  watch,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import lineChart from './line-chart.vue'
import pieChart from './pie-chart.vue'
import { pluginDetail } from '@/api/modules/model'
import { useDictionaryStore } from '@/stores'
import { YMDHms } from '@/utils/czr-util'
import { debounce } from 'lodash'
import { documentGetDocumentsByPage } from '@/api/modules/knowledge/document'
import { Search } from '@element-plus/icons-vue'
import CzrDialogDrag from '@/components/czr-ui/CzrDialogDrag.vue'
import CzrContent from '@/components/czr-ui/CzrContent.vue'

const DictionaryStore = useDictionaryStore()
const route = useRoute()
const router = useRouter()
const emit = defineEmits([])
const props = defineProps({})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  ID: route.params.id,
  tab: 2,
  detail: {},
  analysis: {},
  logs: {
    texts: {},
    query: {
      init: false,
      loading: false,
      head: [
        { value: 'p1', label: '消息ID', show: false },
        { value: 'p1', label: '会话ID', show: false },
        { value: 'p1', label: '用户ID', show: false },
        { value: 'p1', label: '意图识别', show: true },
        { value: 'p1', label: '输入', show: true },
        { value: 'p1', label: '输出', show: true },
        { value: 'p1', label: '输入token', show: true },
        { value: 'p1', label: '输出token', show: true },
        { value: 'p1', label: '请求时间', show: true },
        { value: 'p1', label: '整体耗时', show: true },
        { value: 'p1', label: '反馈', show: true },
        { value: 'p1', label: '回答效果', show: true },
        { value: 'p1', label: '渠道', show: true },
        {
          value: 'caozuo',
          label: '操作',
          show: true,
          width: 100,
          fixed: 'right',
          popover: false,
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 20,
      },
      form: {},
      formReal: {},
      result: {
        total: 0,
        data: [],
      },
      selected: [],
    },
    showFilter: false,
  },
})
const initDetail = () => {
  if (state.ID) {
    state.detail = {}
    // pluginDetail(state.ID)
    //   .then(({ data }: any) => {
    //     state.detail = data
    //   })
    //   .catch(() => {})
    //   .finally(() => {})
    initStatistic()
  } else {
    router.push({ name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe' })
  }
}

const toBack = () => {
  router.push({
    name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe',
  })
}
const initStatistic = () => {
  // state.statistic.table.query.loading = true
  // setTimeout(() => {
  //   const arr: any = []
  //   for (let i = 1; i <= 100; i++) {
  //     arr.push({
  //       id: i + '',
  //       p1: '文件' + i + '.md',
  //     })
  //   }
  //   state.statistic.table.query.result.data = arr
  //   // setTimeout(() => {
  //   //   state.query.selected = [arr[1], arr[5]]
  //   // })
  //   state.statistic.table.query.loading = false
  // }, 1000)
}

const setTexts = debounce((obj) => {
  Object.entries(obj).forEach(([k, v]) => {
    state.logs.query.form[k] = v
  })
}, 1000)
watch(
  () => state.logs.texts,
  (n) => {
    setTexts(n)
  },
  { deep: true },
)
watch(
  () => state.logs.query.form,
  (n) => {
    if (state.logs.query.init) {
      onSearch()
    }
  },
  { deep: true },
)
const onPage = (pageNum, pageSize) => {
  setTimeout(() => {
    state.logs.query.init = true
  }, 100)
  state.logs.query.page = {
    pageNum: pageNum,
    pageSize: pageSize,
  }
  const params = {
    page: state.logs.query.page.pageNum,
    size: state.logs.query.page.pageSize,
  }
  //  添加表单参数
  for (const [k, v] of Object.entries(state.logs.query.formReal)) {
    if (proxy.$czrUtil.isValue(v)) {
      params[k] = v
    }
  }
  console.log(params)
  // state.logs.query.loading = true
  // documentGetDocumentsByPage(params)
  //   .then(({ data }: any) => {
  //     state.logs.query.result.total = data.totalElements
  //     state.logs.query.result.data = data.content
  //   })
  //   .catch(() => {})
  //   .finally(() => {
  //     state.logs.query.loading = false
  //   })
}
const onSearch = () => {
  state.logs.query.selected = []
  state.logs.query.formReal = JSON.parse(JSON.stringify(state.logs.query.form))
  onPage(1, state.logs.query.page.pageSize)
}
const onReset = () => {
  state.logs.query.page = {
    pageNum: 1,
    pageSize: 20,
  }
  state.logs.query.form = {
    dateType: 1,
  }
  state.logs.texts = {}
  state.logs.query.init = false
  onSearch()
}
onMounted(() => {
  initDictionary()
  initDetail()
  onReset()
})
const initDictionary = () => {
  // DictionaryStore.initModelProvides()
  // DictionaryStore.initModelTypes()
}
</script>

<style lang="scss" scoped>
:deep(.log) {
  .cc-bottom {
    padding: 0;
  }
}
</style>