更新

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/components/headLayout.vue

@@ -39,7 +39,7 @@ const formSearch = ref({})
 const changeRadio = (val) =>{
   switch(val){
     case 0: //日
-      formSearch.value.dateRange = [timeValidate(),timeValidate()]
+      formSearch.value.dateRange = [timeValidate(null,'ymd'),timeValidate(null,'ymd')]
       break;
     case 1: //月
       formSearch.value.dateRange = timeSlotChange('本月')
@@ -69,7 +69,7 @@ const handleSubmit = () => {
 // 重置
 const resetForm = () => {
   radioTime.value = '';
-  formSearch.value = { ssbmdm: '', dateRange: null }
+  formSearch.value = {}
   emit('change', formSearch.value)
 }
 
@@ -97,4 +97,13 @@ const resetForm = () => {
         }
     }
 }
-</style>
+
+</style>
+
+<style lang="scss">
+.top-head {
+  .el-date-editor .el-range-separator{
+    color: #333 !important;
+  }
+}
+</style>

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/index.vue

@@ -21,7 +21,7 @@ import XxhjCount from './xxhjCount.vue'
 import QygktjCount from './qygktjCount.vue'
 import { ref } from "vue";
 const butList=ref(["情报统计分析","预警统计",'全域管控统计','信息汇聚统计'])
-const qh = ref('情报统计分析')
+const qh = ref('预警统计')
 
 </script>
 <style lang="scss" scoped>

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/yjCount.vue

@@ -16,11 +16,17 @@
                 <div class="right">
                     <div class="stat-row">
                         <span class="stat-label">环比</span>
-                        <span class="stat-val up">{{ item.hb }} <el-icon><CaretTop /></el-icon></span>
+                        <span class="stat-val up">
+                            {{ item.hbsl }}
+                            <img class="ml4" src="@/assets/images/icon-up.png" alt="">
+                        </span>
                     </div>
                     <div class="stat-row">
                         <span class="stat-label">同比</span>
-                        <span class="stat-val down">{{ item.tb }} <el-icon><CaretBottom /></el-icon></span>
+                        <span class="stat-val down">
+                            {{ item.tbsl }} 
+                            <img class="ml4" src="@/assets/images/icon-down.png" alt="">
+                        </span>
                     </div>
                 </div>
             </li>
@@ -63,6 +69,7 @@
 </template>
 
 <script setup>
+import { qcckGet } from '@/api/qcckApi'
 import HeadLayout from './components/headLayout.vue'
 import BqyjslCount from './components/bqyjslCount.vue'
 import CzztCount from './components/czztCount.vue'
@@ -76,10 +83,10 @@ const formSearch = ref({}) //查询条件
 const activeTab = ref('县局')
 const ketcount = ref(0)
 const countList = ref([
-    { label: '红色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-red.png') },
-    { label: '橙色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-orange.png') },
-    { label: '黄色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-yellow.png') },
-    { label: '蓝色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-blue.png') },
+    { zddm:'01',label: '红色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-red.png') },
+    { zddm:'02',label: '橙色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-orange.png') },
+    { zddm:'03',label: '黄色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-yellow.png') },
+    { zddm:'04',label: '蓝色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-blue.png') },
 ])
 const obj = reactive({
     bqyjslList: [
@@ -114,12 +121,37 @@ const obj = reactive({
 })
 
 onMounted(()=>{
-    tabHeightFn()
+    tabHeightFn();
+    init()
 })
 
 // 筛选
 const handleChange = (val) => {
-  formSearch.value = val
+  formSearch.value = {...val }
+  formSearch.value.startTime = val.dateRange ? val.dateRange[0] : ''
+  formSearch.value.endTime = val.dateRange ? val.dateRange[1] : ''
+  init()
+}
+
+const init = () =>{
+    handle_yjfl()
+}
+
+// 预警分类统计 同比、环比
+const handle_yjfl = async () =>{
+    let params = {...formSearch.value}
+    delete params.dateRange;
+    // let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjfltj');
+    // let list = res || [];
+    // countList.value = countList.value.map(item => {
+    //     let obj = list.find(i => i.zddm === item.zddm)
+    //     if(obj){
+    //         item.value = obj.value || '0'
+    //         item.hb = obj.hbsl || '0'
+    //         item.tb = obj.tbsl || '0'
+    //     }
+    //     return item
+    // })
 }
 
 // 表格高度计算
@@ -206,21 +238,11 @@ const tabHeightFn = () => {
                     font-weight: bold;
                     display: flex;
                     align-items: center;
-                    
                     &.up {
                         color: #F56C6C;
                     }
                     &.down {
-                        color: #67C23A; // Green for down in Chinese stocks usually, but commonly Red is up/bad, Green is down/good or vice versa. Image shows Red Up, Green Down.
-                                         // Image: Top one (red arrow) is Red. Bottom one (green arrow) is Green.
-                                         // 106,3 Red Arrow Up. 
-                                         // 106,3 Green Arrow Down.
-                        color: #00CC99; // Using a teal/green color often used in designs. Or #67C23A (Element Success).
-                                        // Let's use #00C853 or similar.
-                    }
-                    
-                    .el-icon {
-                        margin-left: 2px;
+                        color: #00CC99; 
                     }
                 }
             }