feat:首页+子系统静态代码

1 year ago · 404bf5b1a3
18 changed files with 354 additions and 85 deletions
--- a/weapp/app.json
+++ b/weapp/app.json
@ -20,8 +20,8 @@
                "troubleshooting/shootingForm/index",
                "inspectionReport/inspectionReport",
                "pointsStatus/pointsStatus",
-                "homePage/homePage",
-                "pie/index"
+                "pie/index",
+                "subSystem/subSystem"
            ]
        }
    ],
@ -54,11 +54,12 @@
                "iconPath": "images/tabBar/icon_person.png",
                "selectedIconPath": "images/tabBar/icon_person_active.png",
                "text": "我的"
-            },
+            }
+            ,
            {
                "pagePath": "pages/home/home",
-                "iconPath": "images/tabBar/icon_polling.png",
-                "selectedIconPath": "images/tabBar/icon_polling_active.png",
+                "iconPath": "/images/tabBar/icon_home.png",
+                "selectedIconPath": "/images/tabBar/icon_home_active.png",
                "text": "首页"
            }
        ]
--- a/weapp/images/check.png
+++ b/weapp/images/check.png
--- a/weapp/images/elevator.png
+++ b/weapp/images/elevator.png
--- a/weapp/images/sevenDays.png
+++ b/weapp/images/sevenDays.png
--- a/weapp/images/tabBar/icon_home.png
+++ b/weapp/images/tabBar/icon_home.png
--- a/weapp/images/tabBar/icon_home_active.png
+++ b/weapp/images/tabBar/icon_home_active.png
--- a/weapp/images/xunjian.png
+++ b/weapp/images/xunjian.png
--- a/weapp/package/homePage/homePage.js
+++ b/weapp/package/homePage/homePage.js
@ -1,66 +0,0 @@
-// package/homePage/homePage.js
-Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
-})
--- a/weapp/package/homePage/homePage.json
+++ b/weapp/package/homePage/homePage.json
@ -1,3 +0,0 @@
-{
-  "usingComponents": {}
-}
--- a/weapp/package/homePage/homePage.wxml
+++ b/weapp/package/homePage/homePage.wxml
@ -1,2 +0,0 @@
-<!--package/homePage/homePage.wxml-->
-<text>package/homePage/homePage.wxml</text>
--- a/weapp/package/homePage/homePage.wxss
+++ b/weapp/package/homePage/homePage.wxss
@ -1 +0,0 @@
-/* package/homePage/homePage.wxss */
--- a/weapp/package/subSystem/subSystem.js
+++ b/weapp/package/subSystem/subSystem.js
@ -0,0 +1,182 @@
+// package/subSystem/subSystem.js
+import * as echarts from 'echarts' // 从 npm 引入 echarts
+let chart = null;
+
+function initChart(canvas, width, height, dpr) {
+  chart = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+    devicePixelRatio: dpr // new
+  });
+  canvas.setChart(chart);
+
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+      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,
+            position: 'inside'
+          }
+        },
+        data: [300, 270, 340, 344, 300, 320, 310],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#37a2da'
+          // }
+        }
+      },
+      {
+        name: '正面',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true
+          }
+        },
+        data: [120, 102, 141, 174, 190, 250, 220],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#32c5e9'
+          // }
+        }
+      },
+      {
+        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: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.setNavigationBarTitle({
+      title: options.key,
+    });
+    // 其他渲染逻辑
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
--- a/weapp/package/subSystem/subSystem.json
+++ b/weapp/package/subSystem/subSystem.json
@ -0,0 +1,5 @@
+{
+  
+  "usingComponents": {
+  }
+}
--- a/weapp/package/subSystem/subSystem.wxml
+++ b/weapp/package/subSystem/subSystem.wxml
@ -0,0 +1,15 @@
+<!--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>
+    <view>本月巡检次数</view>
+    <view class="number">0</view>
+</view>
+<view>
+    <view>本月维修次数</view>
+    <view  class="number">0</view>
+</view>
+</view>
+<view class="card">
+    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" echarts="{{ echarts }}" ec="{{ ec }}"></ec-canvas>
+</view>
--- a/weapp/package/subSystem/subSystem.wxss
+++ b/weapp/package/subSystem/subSystem.wxss
@ -0,0 +1,23 @@
+/* package/subSystem/subSystem.wxss */
+.number{
+    width: 40px;
+    height: 26px;
+    font-family: D-DINExp;
+    font-weight: DINExp;
+    font-size: 24px;
+    color: #FFFFFF;
+    letter-spacing: 0;
+}
+
+.card {
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px 0px;
+    margin: 5px 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
--- a/weapp/pages/home/home.js
+++ b/weapp/pages/home/home.js
@ -1,10 +1,58 @@
 // pages/home/home.js
 Page({
-
+    jumpToSubSystem (options) {
+        console.log('1sadsdasd',options)
+        const key = options.currentTarget.dataset.key;
+        wx.navigateTo({
+            url: `/package/subSystem/subSystem?key=${key}`,
+        })
+    },
    /**
     * 页面的初始数据
     */
    data: {
+        itemList:[{
+            picPath:'/images/conduct.png',
+            itemName:'指挥中心'
+        },
+        {
+            picPath:'/images/waterSupply.png',
+            itemName:'给水仓'
+        },
+        {
+            picPath:'/images/pipeGallery.png',
+            itemName:'管廊本体'
+        },
+        {
+            picPath:'/images/elevator.png',
+            itemName:'电梯系统'
+        },
+        {
+            picPath:'/images/power.png',
+            itemName:'供配电系统'
+        },
+        {
+            picPath:'/images/gas.png',
+            itemName:'燃气仓'
+        },
+        {
+            picPath:'/images/security.png',
+            itemName:'安防系统'
+        },
+        {
+            picPath:'/images/highTension.png',
+            itemName:'高压电力仓'
+        },
+        {
+            picPath:'/images/electricalStorageRoom.png',
+            itemName:'电气仓'
+        },
+        {
+            picPath:'/images/lightningProtection.png',
+            itemName:'防雷与接地'
+        }
+    
+    ],

    },

@ -12,9 +60,14 @@ Page({
     * 生命周期函数--监听页面加载
     */
    onLoad (options) {
-
+        const {windowHeight}=wx.getSystemInfoSync()
+        const pageHeight=windowHeight - 48
+        this.setData({
+            pageHeight:pageHeight+'px'
+        })
+        console.log('xxxx',pageHeight)
    },
-
+   
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
--- a/weapp/pages/home/home.wxml
+++ b/weapp/pages/home/home.wxml
@ -1,5 +1,52 @@
 <!--pages/home/home.wxml-->
-<view>
-    <image src="/images/email.svg"  />
-</view>
-<text>pages/home/home.wxml</text>
+<view style="height:{{pageHeight}} ; overflow: auto;">
+    <!--顶部图片-->
+    <view class="top">
+        <image src="/images/email.svg" style="width: 100px;height: 100px;" />
+    </view>
+    <!--子系统列表-->
+    <view class="list card" style="display: flex; flex-wrap: wrap;">
+        <view style="min-width: 25%;  margin: 10px 0px;text-align: center;" wx:for="{{itemList}}" wx:for-item="item" wx:key="*this" data-key="{{item.itemName}}" bindtap="jumpToSubSystem">
+            <image src="{{item.picPath}}" style="width: 29.97px;height: 28.93px;" />
+            <view>{{item.itemName}}</view>
+        </view>
+    </view>
+    <!--最近7天统计-->
+    <view class="card">
+        最近7天统计
+        <view style="background-image:url('/images/sevenDays.png');width: 100%; height: 99px; background-repeat: no-repeat;display: flex">
+            <view>
+                <image src="/images/check.png" style="width:36px;height:36px;margin:40px 10px 20px 10px" />
+            </view>
+            <view style="margin:40px 10px 20px 10px">
+                <view>巡检次数</view>
+                <view>次</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>
+    </view>
+    <!--总巡巡检统计-->
+    <view class="card">
+        总巡巡检统计
+        <view style="background-image:url('/images/xunjian.png');width: 100%; height: 99px; background-repeat: no-repeat;display: flex;">
+            <view>
+                <image src="/images/check.png" style="width:36px;height:36px;margin:40px 10px 20px 10px" />
+            </view>
+            <view style="margin:40px 10px 20px 10px">
+                <view>巡检次数</view>
+                <view>次</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>
+    </view>
+</view>
--- a/weapp/pages/home/home.wxss
+++ b/weapp/pages/home/home.wxss
@ -1 +1,16 @@
-/* pages/home/home.wxss */
+/* pages/home/home.wxss */
+.list {
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 12px;
+    color: #333333;
+    letter-spacing: 0;
+}
+.card {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    /* padding: 10px; */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    margin: 10px;
+  }