feat:首页+子系统

weapp/package/subSystem/subSystem.js

@@ -1,124 +1,98 @@
 // package/subSystem/subSystem.js
-import * as echarts from 'echarts' // 从 npm 引入 echarts
+import * as echarts from '../components/ec-canvas/echarts';
 let chart = null;
 
 function initChart(canvas, width, height, dpr) {
-  chart = echarts.init(canvas, null, {
+    const chart = echarts.init(canvas, null, {
-    width: width,
+      width: 300,
-    height: height,
+      height: 300,
       devicePixelRatio: dpr // new
     });
     canvas.setChart(chart);
   
     var option = {
-    tooltip: {
+      backgroundColor: "#ffffff",
-      trigger: 'axis',
+      series: [{
-      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-      },
-      confine: true
-    },
-    legend: {
-      data: ['热度', '正面', '负面']
-    },
-    grid: {
-      left: 20,
-      right: 20,
-      bottom: 15,
-      top: 40,
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'value',
-        axisLine: {
-          lineStyle: {
-            color: '#999'
-          }
-        },
-        axisLabel: {
-          color: '#666'
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'category',
-        axisTick: { show: false },
-        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
-        axisLine: {
-          lineStyle: {
-            color: '#999'
-          }
-        },
-        axisLabel: {
-          color: '#666'
-        }
-      }
-    ],
-    series: [
-      {
-        name: '热度',
-        type: 'bar',
         label: {
           normal: {
-            show: true,
+            fontSize: 14
-            position: 'inside'
-          }
-        },
-        data: [300, 270, 340, 344, 300, 320, 310],
-        itemStyle: {
-          // emphasis: {
-          //   color: '#37a2da'
-          // }
           }
         },
-      {
+        type: 'pie',
-        name: '正面',
+        center: ['50%', '50%'],
-        type: 'bar',
+        radius: ['20%', '40%'],
-        stack: '总量',
+        data: [{
-        label: {
+          value: 55,
-          normal: {
+          name: '北京'
-            show: true
+        }, {
-          }
+          value: 20,
-        },
+          name: '武汉'
-        data: [120, 102, 141, 174, 190, 250, 220],
+        }, {
-        itemStyle: {
+          value: 10,
-          // emphasis: {
+          name: '杭州'
-          //   color: '#32c5e9'
+        }, {
-          // }
+          value: 20,
-        }
+          name: '广州'
-      },
+        }, {
-      {
+          value: 38,
-        name: '负面',
+          name: '上海'
-        type: 'bar',
+        }]
-        stack: '总量',
+      }]
-        label: {
-          normal: {
-            show: true,
-            position: 'left'
-          }
-        },
-        data: [-20, -32, -21, -34, -90, -130, -110],
-        itemStyle: {
-          // emphasis: {
-          //   color: '#67e0e3'
-          // }
-        }
-      }
-    ]
     };
   
     chart.setOption(option);
     return chart;
-}
+  }
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    ec: {
+        onInit: initChart
+      },
+      date: '',
+      show: true,
+      selectedDate: new Date(),// 设置默认选中的日期为当前日期
+      formatter(day) {
+          console.log('xxasaasas',day)
+        const month = day.date.getMonth() + 1;
+        const date = day.date.getDate();
+        const style = {};
+        if (month === 10) {
+          if (date === 1) {
+            day.bottomInfo = '.';
+            day.className='dayClass'
+            style.backgroundColor = 'red';
+            // document.getElementsByClassName('van-calendar__bottom-info')
+          } 
+        }
   
+        if (day.type === 'start') {
+          day.bottomInfo = '入住';
+        } else if (day.type === 'end') {
+          day.bottomInfo = '离店';
+        }
+        day.style = style;
+        console.log('day111',day)
+        return day;
+      },
+
+  },
+  
+  onDisplay() {
+    this.setData({ show: true });
+  },
+  onClose() {
+    this.setData({ show: false });
+  },
+
+  onConfirm(event) {
+    this.setData({
+      show: false,
+      date: this.formatDate(event.detail),
+    });
   },
 
   /**
@@ -129,6 +103,23 @@ Page({
       title: options.key,
     });
     // 其他渲染逻辑
+     // 创建一个 Date 对象来获取当前日期
+     const currentDate = new Date();
+     // 获取当前年份
+     const currentYear = currentDate.getFullYear();
+     // 获取当前月份（注意，月份是从 0 到 11 表示，所以需要加 1）
+     const currentMonth = currentDate.getMonth() + 1;
+      // 获取当前月份的第一天和最后一天
+      const nextMonth = new Date().getMonth() + 1;
+      const firstDay = new Date().setDate(1);
+      const lastDay = new Date().setMonth(nextMonth,1) - 86400000;
+      // 更新数据，将年份和月份传递给 WXML 页面
+    this.setData({
+        currentYear: currentYear,
+        currentMonth: currentMonth,
+        lastDay:lastDay,
+        firstDay:firstDay
+      });
   },
 
   /**

weapp/package/subSystem/subSystem.json

@@ -1,5 +1,8 @@
 {
   
   "usingComponents": {  
+        "ec-canvas": "../components/ec-canvas/ec-canvas",
+        "van-calendar": "@vant/weapp/calendar/index"
+
   }
 }

weapp/package/subSystem/subSystem.wxml

@@ -1,15 +1,34 @@
 <!--package/subSystem/subSystem.wxml-->
-
+<!--总览图-->
-<view style="display: flex;justify-content: space-around;padding-top: 10px; background-image: linear-gradient(179deg, #006BE3 0%, #4E87FF 16%, #4e87ff00 93%);">
+<view style="display: flex;justify-content: space-around;margin-bottom: 10px; padding-top: 10px; background-image: linear-gradient(179deg, #006BE3 0%, #4E87FF 16%, #4e87ff00 93%);">
-<view>
+    <view>
         <view>本月巡检次数</view>
         <view class="number">0</view>
-</view>
+    </view>
-<view>
+    <view>
         <view>本月维修次数</view>
         <view class="number">0</view>
+    </view>
 </view>
+<!--饼图-->
+<view class="card" >
+    <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
 </view>
+<!--巡检日历-->
 <view class="card">
-    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" echarts="{{ echarts }}" ec="{{ ec }}"></ec-canvas>
+    <view class="header">
+        <view class="xunjian">巡检日历</view>
+        <view class="yearMonth">{{currentYear+'年'+currentMonth+'月'}}</view>
+    </view>
+    <van-calendar
+     max-date="{{lastDay}}"
+    v-model="selectedDate"
+        readonly 	 
+    show-title="{{false}}" 
+    show-subtitle="{{false}}" 
+     poppable="{{ false }}" 
+     show-confirm="{{ false }}"
+     :default-date="defaultDate"
+     formatter="{{formatter}}"
+      class="calendar" />
 </view>

weapp/package/subSystem/subSystem.wxss

@@ -17,7 +17,44 @@
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 8px;
-    padding: 10px 0px;
+    /* padding: 10px 10px; */
     margin: 5px 5px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    width: 300px;
+    height: 300px;
   }
+  .xunjian{
+    width: 64px;
+    height: 22px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000d9;
+    letter-spacing: 0;
+  }
+  .yearMonth{
+    width: 85px;
+    height: 20px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 14px;
+    color: #1684FF;
+    letter-spacing: 0;
+    text-align: right;
+  }
+  .header{
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+    margin-top:10px;
+  }
+  .dayClass .van-calendar__bottom-info{
+      font-size: large;
+      color:blue;
+  }
+  
+
+ 
+
+  
+

weapp/pages/home/home.js

@@ -1,7 +1,10 @@
 // pages/home/home.js
+import { getPatrolRecord } from "../../utils/getApiUrl";
+import { Request } from "../../common";
+const moment = require("../../utils/moment");
+
 Page({
     jumpToSubSystem (options) {
-        console.log('1sadsdasd',options)
         const key = options.currentTarget.dataset.key;
         wx.navigateTo({
             url: `/package/subSystem/subSystem?key=${key}`,
@@ -11,6 +14,15 @@ Page({
      * 页面的初始数据
      */
     data: {
+        sevenDaysCount:0,//过去七天的巡检次数
+        sevenDaysQuestionCount:0,//过去七天发现问题个数
+        sevenDaysHandleCount:0,//过去七天问题解决个数
+        allCount:0,//总的巡检次数
+        allQuestionCount:0,//总的发现问题个数
+        allHandleCount:0,//总的问题解决个数
+        todayRecord: [], // 今日巡检记录
+        markers: [],
+        isShowCallout: false,
         itemList:[{
             picPath:'/images/conduct.png',
             itemName:'指挥中心'
@@ -60,14 +72,28 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad (options) {
+        const userInfo=wx.getStorageSync('userInfo');
         const {windowHeight}=wx.getSystemInfoSync()
         const pageHeight=windowHeight - 48
-        this.setData({
+        console.log('todayRecord1',this.todayRecord)
+        const promiseArr = [];
+        const that = this;
+        wx.showLoading({ title: '加载中' })
+        promiseArr.push(Request.get(getPatrolRecord('all', moment('1970-1-1').format('YYYY-MM-DD') + ' 00:00:00', moment('2099-12-31').format('YYYY-MM-DD') + ' 23:59:59', 'null', 'null')));
+        Promise.all(promiseArr).then(res => {
+            console.log('xxxaxax',userInfo)
+            console.log('xxxaxax',res[0]?.filter(item=>item?.points?.user.id===userInfo.id))
+            wx.hideLoading()
+            that.setData({
+                allCount:res[0]?.filter(item=>item?.points?.user.id===userInfo.id)?.length || 0,
+                
+                todayRecord: res[0],
                 pageHeight:pageHeight+'px'
             })
-        console.log('xxxx',pageHeight)
+        })
     },
     
+   
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

weapp/pages/home/home.wxml

@@ -26,7 +26,7 @@
         <view style="display: flex; justify-content: space-around;">
             <view style="margin:10px 0px;">发现问题个数</view>
             <view style="margin:10px 0px;">个</view>
-            <view style="margin:10px 0px;">发现问题个数</view>
+            <view style="margin:10px 0px;">问题处理个数</view>
             <view style="margin:10px 0px;">个</view>
         </view>
     </view>
@@ -39,14 +39,14 @@
             </view>
             <view style="margin:40px 10px 20px 10px">
                 <view>巡检次数</view>
-                <view>次</view>
+                <view>{{allCount}}次</view>
             </view>
         </view>
         <view style="display: flex; justify-content: space-around;">
             <view style="margin:10px 0px;">发现问题个数</view>
             <view style="margin:10px 0px;">个</view>
-            <view style="margin:10px 0px;">发现问题个数</view>
+            <view style="margin:10px 0px;">问题处理个数</view>
-            <view style="margin:10px 0px;">个</view>
+            <view style="margin:10px 0px;">{{todayRecord.length}}个</view>
         </view>
     </view>
 </view>