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">
      {{ item.label }}:{{ item.value }}条
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
import TimeData from '@/views/home/model/mesgSwitch/timeData.vue'
const contentItem = ref([
  { label: '线索总数', value: '82' },
  { label: '下发总数', value: '82' },
  { label: '已处置总数', value: '80' },
  { label: '反馈总数', value: '50' },
  { label: '未反馈总数', value: '30' },
  { label: '未处置总数', value: '2' },
])
const visible = ref(false)
const changeTime = (val) => {
  listQuery.value = {
    ...val
  }
  getCount()
}
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%;

  .xs-item {
    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>