小程序布设展示

api/app/lib/controllers/pointDeploy/index.js

@@ -126,7 +126,7 @@ async function getProjectPoints(ctx) {
         const projectId = ctx.params.projectId;
         const models = ctx.fs.dc.models;
         rslt = await models.Point.findAll({
-            attributes: ['id', 'name'],
+            attributes: ['id', 'name', 'equipmentNo', 'equipmentModel'],
             where: { projectId: projectId }
         })
         ctx.status = 200;

weapp/package/pointsStatus/pointsStatus.js

@@ -1,18 +1,66 @@
 // package/pointsStatus/pointsStatus.js
+import { getProjectGraph, getDeployPoints } from "../../utils/getApiUrl";
+import { Request } from "../../common";
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    imgUrl: getApp().globalData.imgUrl,
+    image: '',
+    allPoints: [],
+    setedPoints: [],
+  },
+
+  getData(projectId) {
+    const that = this;
+    wx.showLoading({ title: '加载中...' });
+    Request.get(getProjectGraph(projectId)).then(res => {
+      if (res) {
+        Request.get(getDeployPoints(res.id)).then(pointsRes => {
+          that.setData({
+            image: res.graph,
+            allPoints: pointsRes.allPoints,
+            setedPoints: pointsRes.setedPoints.map(p => ({
+              ...p,
+              position: JSON.parse(p.position),
+              pointInfo: pointsRes.allPoints.find(a => a.id === p.pointId),
+            })),
+          })
+        })
+      } else {
+        // 未布设
+      }
+      wx.hideLoading()
+    })
+  },
 
+  calcTooltip(e) {
+    const pointNodeId = e.currentTarget.id;
+    const pointId = e.currentTarget.dataset.id;
+    const windowWidth = wx.getSystemInfoSync().windowWidth;
+    const query = this.createSelectorQuery().in(this);
+    query.select('#' + pointNodeId).boundingClientRect(data => {
+      const sub = windowWidth - data.left < 100 ? 100 - (windowWidth - data.left) : 0;
+      const nextSetedPoints = this.data.setedPoints.map(p => {
+        if (p.id == pointId) {
+          p.sub = sub;
+          p.show = !p.show;
+        }
+        return p;
+      })
+      this.setData({ setedPoints: nextSetedPoints })
+    }).exec()
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    console.log(options, 'options')
+    const { projectId } = options;
+    this.getData(projectId);
   },
 
   /**

weapp/package/pointsStatus/pointsStatus.json

@@ -1,3 +1,9 @@
 {
-  "usingComponents": {}
+  "navigationBarBackgroundColor": "#1979ff",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "点位状态",
+  "enablePullDownRefresh": true,
+  "usingComponents": {
+    "van-empty": "@vant/weapp/empty/index"
+  }
 }

weapp/package/pointsStatus/pointsStatus.wxml

@@ -1,2 +1,25 @@
-<!--package/pointsStatus/pointsStatus.wxml-->
-<text>package/pointsStatus/pointsStatus.wxml</text>
+<!-- package/pointsStatus/pointsStatus.wxml -->
+<view wx:if="{{image}}" class="image-box">
+    <image src="{{imgUrl + image}}" class="image"></image>
+    <view wx:for="{{setedPoints}}">
+        <image 
+            src="/images/circle.png" 
+            id="{{'point' + item.id}}" 
+            data-id="{{item.id}}" 
+            class="point" 
+            style="left:{{(item.position.relativeX * 100) + '%'}}; top:{{(item.position.relativeY * 100) + '%'}}"
+            bind:tap="calcTooltip"
+        ></image>
+        <view 
+            wx:if="{{item.show}}"
+            class="tooltip" 
+            style="left:calc({{(item.position.relativeX * 100) + '%'}} - {{item.sub}}px); top:calc({{(item.position.relativeY * 100) + '%'}} + 10px);"
+        >
+            <view>设备编号：{{item.pointInfo.equipmentNo || '--'}}</view>
+            <view>设备型号：{{item.pointInfo.equipmentModel || '--'}}</view>
+            <view>设备状态：正常</view>
+        </view>
+    </view>
+</view>
+<van-empty wx:else description="暂无布设图" />
+<view id="dddd" class="fixed-selector">结构物介绍</view>

weapp/package/pointsStatus/pointsStatus.wxss

@@ -1 +1,23 @@
-/* package/pointsStatus/pointsStatus.wxss */
+/* package/pointsStatus/pointsStatus.wxss */
+.image-box {
+    width: 100%;
+    position: relative;
+}
+
+.image-box .image {
+    width: 100%;
+}
+
+.image-box .point {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+}
+
+.image-box .tooltip {
+    position: absolute;
+    font-size: 12px;
+    background-color: white;
+    border: 1px solid gainsboro;
+    width: 98px;
+}

weapp/pages/index/index.js

@@ -74,7 +74,6 @@ Page({
   },
 
   onMarkerTap(e) {
-    console.log(e.detail.markerId, 'e.detail.markerId')
     wx.navigateTo({url: `/package/pointsStatus/pointsStatus?projectId=${e.detail.markerId}`})
   },
 

weapp/utils/getApiUrl.js

@@ -13,6 +13,14 @@ exports.getProjectList = () => {
     return `/projectList`
 }
 
+// 获取点位布设信息
+exports.getProjectGraph = (projectId) => {
+    return `/project/${projectId}/planarGraph`
+}
+exports.getDeployPoints = (pictureId) => {
+    return `/picture/${pictureId}/deploy/points`
+}
+
 // 获取巡检计划
 exports.getPatrolPlan = () => {
     return `/patrolPlan`