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

<template>
  <div class="comom-title">
    <span class="title">线索研判盯办统计</span>
    <el-popover placement="right" :width="430">
      <template #reference>
        <div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;"></div>
      </template>
     <el-date-picker
        v-model="value2"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </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';
const contentItem = ref([
  { label: '线索总数', value: '82' },
  { label: '下发总数', value: '82' },
  { label: '已处置总数', value: '80' },
  { label: '反馈总数', value: '50' },
  { label: '未反馈总数', value: '30' },
  { label: '未处置总数', value: '2' },
])

const value2 = ref([])
const shortcuts = [
  {
    text: '近3天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 3)
      return [start, end]
    },
  },
 {
    text: '近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '近30天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
]
</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%;
  }
}
</style>