sgxt_web/src/views/home/model/dbCount.vue

<template>
  <div class="comom-title">
    <span class="title">线索研判盯办统计</span>
    <el-popover placement="right" :width="430" :visible="visible">
      <template #reference>
        <div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;" @click="visible = true">
        </div>
      </template>
      <div>
        <div class="qbltData">
          <div>查询</div>
          <div class="close" @click.stop="close()">X</div>
        </div>
        <TimeData v-if="visible" @changeTime="changeTime" />
      </div>
    </el-popover>
  </div>
  <ul class="comom-cnt xsBox flex flex-warp just-between align-center">
    <li class="xs-item" v-for="(item, idx) in contentItem" :key="idx" @click="openTc(item.type)">
      {{ item.label }}:{{ item.value }}条
    </li>
  </ul>
  <TotalNumberClues v-model="openShow.xfzs" :title="title" :sfqs="sfqs" :sffk="sffk" />
  <TotalNumberDistributions v-model="openShow.xszs" />
  <informationCollection v-model="openShow.cjzs"  :title="title"/>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import TimeData from '@/views/home/model/mesgSwitch/timeData.vue'
import TotalNumberClues from '@/views/home/components/totalNumberClues.vue'
import TotalNumberDistributions from '@/views/home/components/totalNumberDistributions.vue'
import informationCollection from '@/views/home/components/informationCollection.vue'
import { qbcjDpxsCount } from "@/api/model.js"

const contentItem = ref([
  { label: '信息采集总数', value: '0', type: 'cjzs' },
  { label: '线索总数', value: '0', type: 'xszs' },
  { label: '下发总数', value: '0', type: 'xfzs' },
  { label: '已签收', value: '0', type: 'yqss' },
  { label: '未签收', value: '0', type: 'wqss' },
  { label: '已反馈', value: '0', type: 'fkzs' },
])
const visible = ref(false)
const changeTime = (val) => {
  listQuery.value = {
    ...val
  }
  getCount()
}
const title = ref('线索总数')
onMounted(() => {

  qbcjDpxsCount({}, '/mosty-gsxt/qbcj/dpxsCount').then(res => {
    res = res || {}
    // 根据API返回的数据更新contentItem
    contentItem.value = [
      { label: '信息采集总数', value: res.cjzs || 0, type: 'cjzs' },
      { label: '线索总数', value: res.xszs || 0, type: 'xszs' },
      { label: '下发总数', value: res.xfzs || 0, type: 'xfzs' },
      { label: '已签收', value: res.yqss || 0, type: 'yqss' },
      { label: '未签收', value: res.wfkzs || 0, type: 'wqss' },
      { label: '已反馈', value: res.fkzs || 0, type: 'fkzs' },
    ]
  })
})

const openShow = reactive({
  cjzs: false,
  xszs: false,
  xfzs: false,
  yqss: false,
  wqss: false,
  fkzs: false,
})
const sfqs = ref('')
const sffk = ref('')
const openTc = (val) => {
      sfqs.value = ''
      sffk.value = ''
  switch (val) {
    case 'cjzs':
      openShow.cjzs = true
      title.value = '信息采集总数'
      break;
    case 'xszs':

      openShow.xszs = true
      title.value = '线索总数'
      break;
    case 'wqss':
      sfqs.value = '0'
      sffk.value = ''
      openShow.xfzs = true
      title.value = '未签收'
      break;
    case 'xfzs':
      openShow.xfzs = true
      title.value = '下发总数'
      break;
    case 'yqss':
      sfqs.value = '1'
      sffk.value = ''
      openShow.xfzs = true
      title.value = '已签收'
      break;
    case 'fkzs':
      sfqs.value = ''
      sffk.value = '1'
      openShow.xfzs = true
      title.value = '已反馈'
      break;
  }
}


// // 信息采集总数
// const xsCount = () => {
//   xxcjQbcjSelectPage({}).then(res => {
//   console.log(res);
//   })
// }
// // 线索总数
// const xfxsCount = () => {
//   xxcjXfxsSelectPage({}).then(res => {
//     console.log(res);
//   })
// }
const close = () => {
  visible.value = false
}
</script>


<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.xsBox {
  background: url("~@/assets/images/bg_12.png") no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  z-index: 299;

  .xs-item {
    cursor: pointer;
    width: 31%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: url("~@/assets/images/content-item.png") no-repeat center center;
    background-size: 100% 100%;
  }
}

.qbltData {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px 10px
}

.close {
  cursor: pointer;
}
</style>