lcw

src/views/home/model/dbCount.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="comom-title">
     <span class="title">线索研判盯办统计</span>
-  </div> 
+    <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 }}条
+      {{ item.label }}:{{ item.value }}条
     </li>
   </ul>
 </template>
@@ -12,29 +25,61 @@
 <script setup>
 import { ref } from 'vue';
 const contentItem = ref([
-    {label:'线索总数',value:'892'},
-    {label:'下发总数',value:'892'},
-    {label:'已处置总数',value:'892'},
-    {label:'反馈总数',value:'892'},
-    {label:'未反馈总数',value:'892'},
-    {label:'未处置总数',value:'892'},
+  { 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>
+.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>