地图显示

plugs/think-plugs-inspection/src/controller/Record.php

@@ -29,6 +29,21 @@ class Record extends Controller
         });
     }
 
+    public function detail()
+    {
+        $id = $this->request->get('id');
+        $record = InspectionRecord::query()->with(['points'])->where('id', $id)->findOrEmpty();
+        if ($record->isEmpty()) $this->error('记录不存在');
+        $this->vo = $record;
+        $this->fetch();
+    }
+
+    /**
+     * 状态修改
+     * @auth true
+     * @menu true
+     * @return void
+     */
     public function status()
     {
         InspectionRecord::mSave($this->_vali([
@@ -38,6 +53,12 @@ class Record extends Controller
         ]), 'id');
     }
 
+    /**
+     * 删除记录
+     * @auth true
+     * @menu true
+     * @return void
+     */
     public function delete()
     {
         InspectionRecord::mDelete('id');

plugs/think-plugs-inspection/src/view/record/detail.html

@@ -0,0 +1,71 @@
+<div class="layui-card">
+    <div class="layui-card-header">巡检情况</div>
+    <div class="layui-card-body">
+        <div id="map" style="height: 320px;"></div>
+    </div>
+</div>
+<script src="https://map.qq.com/api/gljs?v=1.exp&key=T6XBZ-L33CB-TMFUL-JQ4D6-MKBTK-KNBED"></script>
+<script>
+    function initMap() {
+        //定义地图中心点坐标
+        var center = new TMap.LatLng("{$vo.points[0]['lat']}", "{$vo.points[0]['lng']}")
+        var points = JSON.parse('{$vo.points|raw|json_encode}')
+        //定义map变量，调用 TMap.Map() 构造函数创建地图
+        var map = new TMap.Map(document.getElementById('map'), {
+            center: center,//设置地图中心点坐标
+            zoom: 17.2,   //设置地图缩放级别
+            pitch: 30,  //设置俯仰角
+        });
+        var marker = new TMap.MultiMarker({
+            map: map,
+            styles: {
+                // 点标记样式
+                marker: new TMap.MarkerStyle({
+                    width: 20, // 样式宽
+                    height: 30, // 样式高
+                    anchor: { x: 10, y: 30 }, // 描点位置
+                }),
+            },
+            geometries: [
+                // 点标记数据数组
+                {
+                    // 标记位置(纬度，经度，高度)
+                    position: center,
+                    id: 'marker',
+                },
+            ],
+        });
+
+        var polylineLayer = new TMap.MultiPolyline({
+            id: 'polylineLayer',
+            map: map,
+            styles: {
+                'style_red': new TMap.PolylineStyle({
+                    'color': '#CC0000', //线填充色
+                    'width': 8, //折线宽度
+                    'showArrow': true,
+                    'lineCap': 'butt' //线端头方式
+                })
+            },
+        });
+        points.forEach(function (point, index) {
+            if (index === points.length - 1) {
+                return
+            }
+            polylineLayer.add({
+                id: 'polyline_' + index,
+                styleId: 'style_red',
+                paths: [
+                    new TMap.LatLng(point.lat, point.lng),
+                    new TMap.LatLng(points[index + 1].lat, points[index + 1].lng)
+                ]
+            });
+        })
+    }
+    var mapInit = setInterval(function () {
+        if (window.TMap) {
+            clearInterval(mapInit)
+            initMap()
+        }
+    }, 500)
+</script>

plugs/think-plugs-inspection/src/view/record/index.html

@@ -12,15 +12,16 @@
 </div>
 
 <script type="text/html" id="toolbar">
-
+    <!--{if auth("detail")}-->
+    <a class="layui-btn layui-btn-xs layui-btn-normal" data-title="结束" data-modal='{:url("detail")}?id={{ d.id }}'>详情</a>
+    <!--{/if}-->
     <!--{if auth("status")}-->
     {{#  if(d.status == 0){ }}
     <a class="layui-btn layui-btn-xs layui-btn-normal" data-title="结束" data-modal='{:url("status")}?id={{ d.id }}&status=1'>结 束</a>
     {{#  } }}
     <!--{/if}-->
-
     <!--{if auth("remove")}-->
-    <a data-confirm="确定要永久删除此巡检员吗？" data-action="{:url('remove')}"  data-value="id#{{ d.id }}" data-csrf="{:systoken('remove')}" class="layui-btn layui-btn-xs layui-btn-danger" title="删除">删除</a>
+    <a data-confirm="确定要永久删除此巡检吗？" data-action="{:url('remove')}"  data-value="id#{{ d.id }}" data-csrf="{:systoken('remove')}" class="layui-btn layui-btn-xs layui-btn-danger" title="删除">删除</a>
     <!--{/if}-->
 </script>
 {/block}