feat:故障风险管理

1 year ago · 6fd8a54be0
17 changed files with 450 additions and 5 deletions
--- a/weapp/app.json
+++ b/weapp/app.json
@ -21,7 +21,9 @@
        "troubleshooting/shootingForm/index",
        "inspectionReport/inspectionReport",
        "pointsStatus/pointsStatus",
-        "subSystem/subSystem"
+        "subSystem/subSystem",
+        "riskManagement/riskManagement",
+        "riskManagement/riskCalendar/riskCalendar"
      ]
    }
  ],
--- a/weapp/app.wxss
+++ b/weapp/app.wxss
@ -17,3 +17,37 @@
    padding: 200rpx 0;
    box-sizing: border-box;
 }
+
+/* 弹性布局 */
+.flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-start {
+    justify-content: flex-start;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-between {
+    justify-content: space-between;
+}
+
+.flex-evenly {
+    justify-content: space-evenly;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+/* 字体省略号 */
+.text--- {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
--- a/weapp/images/workbench/expert_systems.png
+++ b/weapp/images/workbench/expert_systems.png
--- a/weapp/images/workbench/issues.png
+++ b/weapp/images/workbench/issues.png
--- a/weapp/images/workbench/report.png
+++ b/weapp/images/workbench/report.png
--- a/weapp/package/riskManagement/riskCalendar/riskCalendar.js
+++ b/weapp/package/riskManagement/riskCalendar/riskCalendar.js
@ -0,0 +1,66 @@
+// package/riskManagement/riskCalendar/riskCalendar.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
--- a/weapp/package/riskManagement/riskCalendar/riskCalendar.json
+++ b/weapp/package/riskManagement/riskCalendar/riskCalendar.json
@ -0,0 +1,9 @@
+{
+  "navigationBarBackgroundColor": "#1979ff",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "故障日历",
+  "enablePullDownRefresh": false,
+  "usingComponents": {
+    "ec-canvas": "../../components/ec-canvas/ec-canvas"
+  }
+}
--- a/weapp/package/riskManagement/riskCalendar/riskCalendar.wxml
+++ b/weapp/package/riskManagement/riskCalendar/riskCalendar.wxml
@ -0,0 +1,2 @@
+<!--package/riskManagement/riskCalendar/riskCalendar.wxml-->
+<text>package/riskManagement/riskCalendar/riskCalendar.wxml</text>
--- a/weapp/package/riskManagement/riskCalendar/riskCalendar.wxss
+++ b/weapp/package/riskManagement/riskCalendar/riskCalendar.wxss
@ -0,0 +1 @@
+/* package/riskManagement/riskCalendar/riskCalendar.wxss */
--- a/weapp/package/riskManagement/riskManagement.js
+++ b/weapp/package/riskManagement/riskManagement.js
@ -0,0 +1,126 @@
+// package/riskManagement/riskManagement.js
+import * as echarts from '../components/ec-canvas/echarts';
+
+function setOption(chart, data) {
+  const option = {
+    grid: {
+      top: '5%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: data,
+        type: 'line'
+      }
+    ]
+  };
+  chart.setOption(option);
+}
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    ec: {
+      // onInit: initChart,
+      lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
+    },
+    isLoaded: false,
+    list: [1,2,3]
+  },
+
+  // 初始化图表
+  initChart: function (data) {
+    this.ecComponent.init((canvas, width, height, dpr) => {
+      // 获取组件的 canvas、width、height 后的回调函数
+      // 在这里初始化图表
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height,
+        devicePixelRatio: dpr // new
+      });
+      setOption(chart, data);
+
+      // 将图表实例绑定到 this 上，可以在其他成员函数中访问
+      this.chart = chart;
+
+      this.setData({
+        isLoaded: true,
+      });
+
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+      return chart;
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    // 请求数据
+    setTimeout(() => {
+      this.initChart([250, 300, 100, 147, 260, 123, 311])
+    }, 1000)
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+    this.ecComponent = this.selectComponent('#risk-trend-chart');
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
--- a/weapp/package/riskManagement/riskManagement.json
+++ b/weapp/package/riskManagement/riskManagement.json
@ -0,0 +1,9 @@
+{
+  "navigationBarBackgroundColor": "#006BE3",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "故障风险管理",
+  "enablePullDownRefresh": false,
+  "usingComponents": {
+    "ec-canvas": "../components/ec-canvas/ec-canvas"
+  }
+}
--- a/weapp/package/riskManagement/riskManagement.wxml
+++ b/weapp/package/riskManagement/riskManagement.wxml
@ -0,0 +1,41 @@
+<!-- package / riskManagement / riskManagement.wxml -->
+<view class="risk-management">
+  <view class="icon"><text class="icon-text">故障统计</text></view>
+
+  <view class="flex flex-between">
+    <view class="title-item flex flex-col">
+      <view>本月上报风险</view>
+      <view><text class="title-num">{{86}}</text><text class="title-unit">个</text></view>
+    </view>
+    <view class="title-item flex flex-col">
+      <view>故障风险管理</view>
+      <view><text class="title-num">{{300}}</text><text class="title-unit">个</text></view>
+    </view>
+  </view>
+
+  <view class="card">
+    <view class="flex flex-start">
+      <!-- <image src="" class="card-img" /> -->
+      <view class="card-img" style="background: blue;"></view>
+      <view class="card-title">历史风险趋势</view>
+    </view>
+    <view class="chart">
+      <ec-canvas id="risk-trend-chart" canvas-id="risk-trend-chart" ec="{{ ec }}"></ec-canvas>
+    </view>
+  </view>
+
+  <view class="card">
+    <view class="flex flex-between">
+      <!-- <image src="" class="card-img" /> -->
+      <view class="flex">
+        <view class="card-img" style="background: blue;"></view>
+        <view class="card-title">故障排行榜</view>
+      </view>
+      <view class="card-link">查看详情 ></view>
+    </view>
+    <view>【故障次数统计】</view>
+    <view class="list" wx:for="{{list}}">
+      <view class="list-title">设备{{item}}</view>
+    </view>
+  </view>
+</view>
--- a/weapp/package/riskManagement/riskManagement.wxss
+++ b/weapp/package/riskManagement/riskManagement.wxss
@ -0,0 +1,76 @@
+/* package/riskManagement/riskManagement.wxss */
+.risk-management {
+  height: 100vh;
+  background-image: linear-gradient(179deg, #006BE3 0%, #4E87FF 16%, #4e87ff00 93%);
+  padding: 0 15px;
+}
+
+.icon {
+  width: 61px;
+  height: 31.86px;
+  background-image: linear-gradient(0deg, #EAF2FF 5%, #2578F0 100%);
+  box-shadow: 0 3px 4px 1px #bfdbfa4f;
+}
+
+.icon-text {
+  width: 48px;
+  height: 17px;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+.title-item {
+  width: 150px;
+  color: #ffffffd9;
+}
+
+.title-num {
+  font-size: 20px;
+  color: #FFFFFF;
+}
+
+.title-unit {
+  font-size: 10px;
+  color: #FFFFFE;
+  margin-left: 10px;
+}
+
+.card {
+  background: #FFFFFF;
+  box-shadow: 2px 2px 11px 0 #00000008, 0 0 4px 0 #00000012;
+  border-radius: 4px;
+  padding: 12px;
+  margin-top: 12px;
+}
+
+.card-img {
+  width: 18px;
+  height: 18px;
+  margin-right: 13px;
+}
+
+.card-title {
+  font-weight: 500;
+  font-size: 16px;
+  color: #383A3B;
+}
+
+.card-link {
+  font-weight: 500;
+  font-size: 14px;
+  color: #1684FF;
+}
+
+.chart {
+  width: 100%;
+  height: 195px;
+  margin-top: 20px;
+}
+
+.list {
+  margin-top: 10px;
+  padding: 10px 7px;
+  background-color: #F1F7FF;
+}
--- a/weapp/pages/workbench/workbench.js
+++ b/weapp/pages/workbench/workbench.js
@ -5,7 +5,44 @@ Page({
   * 页面的初始数据
   */
  data: {
+    itemList: [
+      {
+        iconPath: '/images/workbench/report.png',
+        text: '故障及风险管理',
+        page: '/package/riskManagement/riskManagement'
+      },
+      {
+        iconPath: '/images/workbench/report.png',
+        text: '设备大数据图谱',
+        page: '/package/riskManagement/riskCalendar/riskCalendar'
+      },
+      {
+        iconPath: '/images/workbench/report.png',
+        text: '智能诊断',
+        page: '/package/riskManagement/riskManagement'
+      },
+      {
+        iconPath: '/images/workbench/expert_systems.png',
+        text: '专家系统',
+        page: '/package/riskManagement/riskManagement'
+      },
+      {
+        iconPath: '/images/workbench/report.png',
+        text: '巡检报告',
+        page: '/package/riskManagement/riskManagement'
+      },
+      {
+        iconPath: '/images/workbench/issues.png',
+        text: '发现问题',
+        page: '/package/riskManagement/riskManagement'
+      },
+    ]
+  },

+  navigator(e) {
+    wx.navigateTo({
+      url: e.currentTarget.dataset.page,
+    })
  },

  /**
--- a/weapp/pages/workbench/workbench.json
+++ b/weapp/pages/workbench/workbench.json
@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "navigationBarBackgroundColor": "#1979ff",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "控制台",
+  "enablePullDownRefresh": false
 }
--- a/weapp/pages/workbench/workbench.wxml
+++ b/weapp/pages/workbench/workbench.wxml
@ -1,2 +1,9 @@
-<!--pages/workbench/workbench.wxml-->
-<text>pages/workbench/workbench.wxml</text>
+<!-- pages/workbench/workbench.wxml -->
+<view class="workbench-page">
+    <view class="workbench">
+        <view class="workbench-item" wx:for="{{itemList}}" data-page="{{item.page}}" bindtap="navigator">
+            <image src="{{item.iconPath}}" class="item-img" />
+            <View class="item-text">{{item.text}}</View>
+        </view>
+    </view>
+</view>
--- a/weapp/pages/workbench/workbench.wxss
+++ b/weapp/pages/workbench/workbench.wxss
@ -1 +1,33 @@
 /* pages/workbench/workbench.wxss */
+.workbench-page {
+    width: 100vw;
+    height: 100vh;
+    background-color: #EDF1F8;
+}
+
+.workbench {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: flex-start;
+}
+
+.workbench-item {
+    width: 166px;
+    height: 138px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    margin-top: 12px;
+}
+
+.item-img {
+    width: 40px;
+    height: 40px;
+    margin: 16px 0px 44px 12px;
+}
+
+.item-text {
+    font-size: 16px;
+    color: #333333;
+    margin-left: 12px;
+}
			`@ -0,0 +1 @@`
			`/* package/riskManagement/riskCalendar/riskCalendar.wxss */`