日历状态颜色标记

src/api/forest.js

@@ -48,3 +48,11 @@ export function getEventDetail(param) {
     data: param
   })
 }
+// 获取日历颜色状态
+export function getEventByCalendar(param) {
+  return request({
+    url: '/center-fire/VisuForestCloudMapController/getEventByCalendar',
+    method: 'post',
+    data: param
+  })
+}

src/views/date.vue

@@ -38,7 +38,7 @@
 						</div>
 
 						<p>{{Number(item.date)}}
-						<div class="date-state-pointer d-state-zc"></div>
+						<div :class="calendarDaycount(item.year,item.month,item.date)"></div>
 						</p>
 					</div>
 
@@ -76,6 +76,9 @@
 </template>
 
 <script>
+import {
+  getEventByCalendar
+} from '@/api/forest'
 	export default {
 		name: "ren-calendar",
 		props: {
@@ -127,10 +130,11 @@
 				monthOpen: false,
 				choose: "",
 				isCurM: true,
+        eventByCalendarList:[]
 			};
 		},
 		created() {
-			this.dates = this.monthDay(this.y, this.m);
+      this.monthDay(this.y, this.m);
 			// !this.open && this.toggle();
 		},
 		watch: {
@@ -140,7 +144,7 @@
 					this.choose = this.selectDate
 					this.y = Number(this.selectDate.split('-')[0])
 					this.m = Number(this.selectDate.split('-')[1])
-					this.dates = this.monthDay(this.y, this.m);
+					this.monthDay(this.y, this.m);
 					if (!this.monthOpen) {
 						let index = -1;
 						this.dates.forEach((i, x) => {
@@ -184,6 +188,20 @@
 			},
 		},
 		methods: {
+      // 标记日期状态颜色
+      calendarDaycount(y, m, d) {
+        let day=y + "-" + this.formatNum(m) + "-" + this.formatNum(d)
+        if(this.eventByCalendarList!=null&&this.eventByCalendarList.length>0){
+          for (let i = 0; i < this.eventByCalendarList.length; i++) {
+            if(this.eventByCalendarList[i].day==day&&this.eventByCalendarList[i].daycount>0&&this.eventByCalendarList[i].daycount<=10){
+              return "date-state-pointer d-state-t10"
+            }else if(this.eventByCalendarList[i].day==day&&this.eventByCalendarList[i].daycount>10){
+              return "date-state-pointer d-state-b10"
+            }
+          }
+        }
+        return "date-state-pointer d-state-zc";
+      },
 			formatNum(num) {
 				let res = Number(num);
 				return res < 10 ? "0" + res : res;
@@ -203,10 +221,15 @@
 				return today;
 			},
 			// 获取当前月份数据
-			monthDay(y, month) {
-				let dates = [];
-				let m = Number(month);
-				let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
+      async monthDay(y, month) {
+        let param={ day: y+"-"+this.formatNum(Number(month)) }
+        await getEventByCalendar(param).then(res => {
+          //获取日历颜色状态
+          this.eventByCalendarList=res.data;
+        })
+        this.dates = [];
+        let m = Number(month);
+        let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
 				let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
 				let lastDayOfLastMonth = new Date(y, m - 1, 0).getDate(); // 上一月的最后一天
 				let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
@@ -222,7 +245,7 @@
 				})();
 				let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
 				for (let i = 1; i <= startDay; i++) {
-					dates.push({
+          this.dates.push({
 						date: this.formatNum(lastDayOfLastMonth - startDay + i),
 						day: weekstart + i - 1 || 7,
 						month: m - 1 >= 1 ? this.formatNum(m - 1) : 12,
@@ -231,7 +254,7 @@
 					});
 				}
 				for (let j = 1; j <= lastDateOfMonth; j++) {
-					dates.push({
+          this.dates.push({
 						date: this.formatNum(j),
 						day: (j % 7) + firstDayOfMonth - 1 || 7,
 						month: this.formatNum(m),
@@ -240,7 +263,7 @@
 					});
 				}
 				for (let k = 1; k <= endDay; k++) {
-					dates.push({
+          this.dates.push({
 						date: this.formatNum(k),
 						day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
 						month: m + 1 <= 12 ? this.formatNum(m + 1) : 1,
@@ -248,8 +271,6 @@
 						isCurM: false
 					});
 				}
-				// console.log(dates);
-				return dates;
 			},
 			isFutureDay(y, m, d) {
 				//是否未来日期
@@ -341,7 +362,7 @@
 					} else {
 						this.y = i.year
 						this.m = i.month
-						this.dates = this.monthDay(this.y, this.m);
+            this.monthDay(this.y, this.m);
 						this.$emit("onDayClick", response);
 					}
 				}
@@ -351,7 +372,7 @@
 			},
 			//改变年月
 			changYearMonth(y, m) {
-				this.dates = this.monthDay(y, m);
+        this.monthDay(y, m);
 				this.y = y;
 				this.m = m;
 			},
@@ -374,7 +395,7 @@
 						this.m = this.m + 1;
 					}
 				}
-				this.dates = this.monthDay(this.y, this.m);
+        this.monthDay(this.y, this.m);
 				// this.$emit("changeMonth");
 			},
 		},