列表问题管理

src/views/dashboard/components/OneMap.vue

@@ -32,7 +32,7 @@
         >
           <div
             style="
-              width: 150px;
+              width: 195px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
@@ -72,10 +72,10 @@
     </div>
     <div v-else class="listDetail">
       <n-date-picker
-        :on-update:formatted-value="abc"
-        :default-formatted-value="efg"
+        :on-update:formatted-value="changeDate"
+        :default-formatted-value="lastSevenDateList"
         type="daterange"
-        :default-value="[Date.now() - 6.048e8, Date.now()]"
+
         :is-date-disabled="disablePreviousDate"
         style="margin-bottom: 15px"
       />
@@ -203,6 +203,8 @@ export default {
       listShow: false,
       // 时间范围是一周前至今天
       efg: '',
+      initDate: 0,
+      clickListNum: 0,
       listIcon: new URL(
         '../../../assets/images/listChecked.png',
         import.meta.url
@@ -229,7 +231,8 @@ export default {
       listChecked: false,
       airportSelected: true,
       problemLayerList: [],
-      airportPopupShow: false
+      airportPopupShow: false,
+      lastSevenDateList: []
     })
     watch(
       () => data.page,
@@ -385,6 +388,10 @@ export default {
 
       // console.log(new Date().getFullYear())
     }
+    // 获取近7天的日期
+    const initSevenDate = () => {
+      data.lastSevenDateList = [getDay(-7), getDay(0)]
+    }
     /**
      * 展示机场信息
      * @param {} e
@@ -473,10 +480,24 @@ export default {
         query: { rowInfo: JSON.stringify(item) }
       })
     }
-    const abc = (value) => {
+    const changeDate = (value) => {
+      if (value) {
+        data.lastSevenDateList = value
+      }
+      if (data.initDate == 0) {
+        // 默认加载近7天的问题图层
+        // 获取近7天的日期
+        getQuestionInfo(getDay(-7), getDay(0))
+      } else {
+        getQuestionInfo(value[0], value[1])
+      }
+      data.initDate += 1
+    }
+    // 获取问题图层数据
+    const getQuestionInfo = (startTime, endTime) => {
       getQuestionList({
-        startTime: value[0],
-        endTime: value[1]
+        startTime: startTime,
+        endTime: endTime
       }).then((res) => {
         if (res.code === 0) {
           const arr = res.data
@@ -499,6 +520,35 @@ export default {
         }
       })
     }
+    // 获取日期
+    const getDay = (day) => {
+      var today = new Date()
+
+      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
+
+      today.setTime(targetday_milliseconds) // 注意，这行是关键代码
+
+      var tYear = today.getFullYear()
+
+      var tMonth = today.getMonth()
+
+      var tDate = today.getDate()
+
+      tMonth = doHandleMonth(tMonth + 1)
+
+      tDate = doHandleMonth(tDate)
+
+      return tYear + '-' + tMonth + '-' + tDate
+    }
+    const doHandleMonth = (month) => {
+      var m = month
+
+      if (month.toString().length == 1) {
+        m = '0' + month
+      }
+
+      return m
+    }
     // 添加问题图层
     const addproblemLayer = (narr) => {
       if (data.problemLayerList.length > 0) {
@@ -614,6 +664,12 @@ export default {
      * @description:是否展示列表
      */
     const showList = () => {
+      // 判断是不是第一次点击列表按钮
+      if (data.clickListNum == 0) {
+        // 第一次点击列表按钮会显示问题图层
+        changeDate()
+      }
+      data.clickListNum += 1
       data.listChecked = !data.listChecked
     }
     /**
@@ -656,6 +712,7 @@ export default {
       initMap()
       initTaskList()
       initProblemType()
+      initSevenDate()
     })
 
     return {
@@ -683,7 +740,7 @@ export default {
         }
         return ts > Date.now()
       },
-      abc,
+      changeDate,
       showAirportList,
       handleProblemTypeValue,
       hideProblemInfo,
@@ -781,7 +838,7 @@ export default {
   position: absolute;
   top: 64px;
   right: 90px;
-  width: 355px;
+  width: 400px;
   height: 428px;
   background: #000000;
   box-sizing: border-box;
@@ -802,7 +859,7 @@ export default {
     }
   }
   .listDetail {
-    width: 345px;
+    width: 390px;
     height: 383px;
     background: #2c2c2c;
     font-size: 14px;