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"/>
  <TotalNumberDistributions v-model="openShow.xszs" />
</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 { qbcjDpxsCount } from "@/api/model.js"
const contentItem = ref([
  { label: '线索总数', value: '0', type: 'xszs' },
  { label: '下发总数', value: '0', type: 'xfzs' },
  { label: '已处置总数', value: '0', type: 'yczzs' },
  { label: '反馈总数', value: '0', type: 'fkzs' },
  { label: '未反馈总数', value: '0', type: 'wfks' },
  { label: '未处置总数', value: '0', type: 'wczzs' },
])
const visible = ref(false)
const changeTime = (val) => {
  listQuery.value = {
    ...val
  }
  getCount()
}
const title = ref('下发总数')
onMounted(() => {

  qbcjDpxsCount({}, '/mosty-gsxt/tbXs/getXsCount').then(res => {
    res = res || {}
    // 根据API返回的数据更新contentItem
    contentItem.value = [
      { label: '线索总数', value: res.xszs || 0, type: 'xszs' },
      { label: '下发总数', value: res.xfzs || 0, type: 'xfzs' },
      { label: '已处置总数', value: res.yczzs || 0, type: 'yczzs' },
      { label: '反馈总数', value: res.fkzs || 0, type: 'fkzs' },
      { label: '未反馈总数', value: res.wfkzs || 0, type: 'wfks' },
      { label: '未处置总数', value: res.wczzs || 0, type: 'wczzs' },
    ]
  })
})

const openShow=reactive({
  xszs: false,
  xfzs: false,
  yczzs: false,
  fkzs: false,
  wfks: false,
  wczzs: false,
})
const openTc = (val) => {
  console.log(val);

  switch (val) {
    case 'xszs':
      openShow.xszs = true
      break;
    case 'xfzs':
      openShow.xfzs = true
      title.value = '下发总数'
      break;
    case 'yjzs': break;
    case 'yczzs': break;
    case 'fkzs': break;
    case 'wfks':
      openShow.xfzs = true
      title.value = '未反馈数'
      break;
    case 'wczzs': 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>