巡更轨迹查询 -todo

2 years ago · c68cfd9bbc
7 changed files with 406 additions and 46 deletions
--- a/api/app/lib/controllers/report/index.js
+++ b/api/app/lib/controllers/report/index.js
@ -9,7 +9,7 @@ async function reportList (ctx) {
            where: {

            },
-            attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'roadSectionEnd', 'reportType', 'content'],
+            attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'roadSectionEnd', 'reportType', 'content', 'longitude','latitude'],
            include: [{
                model: models.User,
                attributes: ['name']
--- a/web/client/assets/images/worker.png
+++ b/web/client/assets/images/worker.png
--- a/web/client/index.html
+++ b/web/client/index.html
@ -1,43 +1,33 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <title></title>
-    <link rel="shortcut icon" href="/assets/images/favicon.ico" />
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="/assets/font_sc/iconfont.css"
-    />
-    <link rel="stylesheet" href="/assets/fontziti/font.css" />
-    <script type="text/javascript">
-      window._AMapSecurityConfig = {
-          securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
-      }
+
+<head>
+  <meta charset="UTF-8" />
+  <title></title>
+  <link rel="shortcut icon" href="/assets/images/favicon.ico" />
+  <link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css" />
+  <link rel="stylesheet" href="/assets/fontziti/font.css" />
+  <script type="text/javascript">
+    window._AMapSecurityConfig = {
+      securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
+    }
  </script>
-  <script src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer,Map3D,ElasticMarker"></script>
-  </head>
-  <body>
-    <link
-      rel="stylesheet/less"
-      type="text/css"
-      href="/assets/color.less"
-      rel="external nofollow"
-    />
-    <script>
-      window.less = {
-        async: false,
-        env: "production",
-      };
-    </script>
-    <script
-      type="text/javascript"
-      src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"
-    ></script>
-    <div id="App"></div>
-    <script
-      type="text/javascript"
-      src="http://localhost:5001/client/build/app.js"
-    ></script>
-  </body>
-</html>
+  <script
+    src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer,Map3D,ElasticMarker"></script>
+  <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script>
+</head>
+
+<body>
+  <link rel="stylesheet/less" type="text/css" href="/assets/color.less" rel="external nofollow" />
+  <script>
+    window.less = {
+      async: false,
+      env: "production",
+    };
+  </script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
+  <div id="App"></div>
+  <script type="text/javascript" src="http://localhost:5001/client/build/app.js"></script>
+</body>
+
+</html>
--- a/web/client/src/sections/fillion/components/gis/bounds.js
+++ b/web/client/src/sections/fillion/components/gis/bounds.js
@ -0,0 +1,188 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { geoJson } from './mock_data';
+
+export default class Bounds extends Component {
+    constructor(props) {
+        super(props);
+        this.map = props.map;
+        this.pl = {};
+        this.textMarker = {};
+    }
+    static propTypes = {
+        prop: PropTypes
+    }
+
+    componentDidMount() {
+        if (!window.BoundPl) {
+            this.drawBounds();
+        }
+    }
+
+    componentWillUnmount() {
+        if (window.local_)
+            window.local_.remove(this.pl);
+        this.textMarker = null;
+        window.BoundPl = null;
+    }
+
+    drawBounds = () => {
+        var map = this.map;
+        var loca = window.local_;
+        loca.ambLight = {
+            intensity: 0.3,
+            color: '#fff',
+        };
+        loca.dirLight = {
+            intensity: 0.6,
+            color: '#fff',
+            target: [0, 0, 0],
+            position: [0, -1, 1],
+        };
+        loca.pointLight = {
+            color: 'rgb(100,100,100)',
+            position: [120.24289, 30.341335, 20000],
+            intensity: 3,
+            // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
+            distance: 50000,
+        };
+        var geo = new Loca.GeoJSONSource({
+            data: geoJson
+        });
+
+        var colors = ['#04398c', '#04398c', '#0542a5'].reverse();
+        var height = [500];
+        var pl = new Loca.PolygonLayer({
+            // loca,
+            zIndex: 1,
+            opacity: 0.6,
+            // cullface: 'none',
+            shininess: 10,
+            hasSide: true,
+        });
+
+        pl.setSource(geo);
+        pl.setStyle({
+            topColor: function (index, feature) {
+                var i = index % 3;
+                return colors[i];
+            },
+            sideColor: function (index, feature) {
+                return '#023890';
+            },
+            borderColor: function () {
+                return '#24dcf7'
+            },
+            height: function (index, feature) {
+                return index == 0 ? height[0] : height[0] + index * 50;
+            },
+            altitude: 0,
+        });
+        loca.add(pl);
+
+        // 创建纯文本标记
+        var text = new AMap.Text({
+            text: '纯文本标记',
+            anchor: 'center', // 设置文本标记锚点
+            draggable: true,
+            cursor: 'pointer',
+            angle: 0,
+            visible: false,
+            offset: [60, 60],
+            extData: 'bounds_text',
+            style: {
+                'padding': '5px 10px',
+                'margin-bottom': '1rem',
+                'border-radius': '.25rem',
+                'background-color': 'rgba(0,0,0,0.5)',
+                // 'width': '12rem',
+                'border-width': 0,
+                'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
+                'text-align': 'center',
+                'font-size': '16px',
+                'color': '#fff',
+            },
+        });
+        // text.setMap(map);
+        if (!this.textMarker)
+            map.add(text);
+        this.textMarker = text;
+        console.log(text)
+        // 拾取
+        map.on('mousemove', (e) => {
+            var feat = pl.queryFeature(e.pixel.toArray());
+            // if (!text) {
+            map.add(text);
+            //     text = this.textMarker;
+            // }
+
+            if (feat) {
+                text.show();
+                text.setText(feat.properties.NAME);
+                text.setPosition(e.lnglat);
+
+                pl.setStyle({
+                    topColor: (index, feature) => {
+                        if (feature === feat) {
+                            return [19, 43, 77, 1];
+                        }
+                        // var v = feature.properties.health * 100;
+                        var i = index % 3;
+                        return colors[i];
+                    },
+                    sideColor: (index, feature) => {
+                        if (feature === feat) {
+                            return '#023890';
+                        }
+                        return '#023890';
+                    },
+                    borderColor: function () {
+                        return '#24dcf7'
+                    },
+                    height: function (index, feature) {
+                        return index == 0 ? height[0] : height[0] + index * 50;
+
+                    },
+                });
+            } else {
+                pl.setStyle({
+                    topColor: function (index, feature) {
+                        var i = index % 3;
+                        return colors[i];
+                    },
+                    sideColor: function (index, feature) {
+                        return '#023890';
+                    },
+                    borderColor: function () {
+                        return '#24dcf7'
+                    },
+                    height: function (index, feature) {
+                        return index == 0 ? height[0] : height[0] + index * 50;
+                    },
+                    altitude: 0,
+                });
+
+                text.hide();
+                map.remove(text);
+            }
+        });
+
+
+        map.setZoom(12.88)
+        map.setCenter([115.888149, 28.549851]);
+        map.setRotation(-68.7);
+        map.setPitch(42);
+
+        this.pl = pl;
+        window.BoundPl = pl;
+    }
+
+    render() {
+        return (
+            <div>
+            </div>
+        )
+    }
+}
+
+
--- a/web/client/src/sections/fillion/components/gis/mock_data.js
+++ b/web/client/src/sections/fillion/components/gis/mock_data.js
--- a/web/client/src/sections/fillion/components/gis/patrolGis.js
+++ b/web/client/src/sections/fillion/components/gis/patrolGis.js
@ -1,10 +1,133 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { DatePicker } from 'antd';
+import Bounds from './bounds';
+import moment from 'moment';
+const { RangePicker } = DatePicker;
 function PatrolGis(props) {
-  return (
-    <div>PatrolGis</div>
-  )
+    const { reportList, userId, dispatch } = props;
+    const [mapComplete, setMapComplete] = useState(false);
+    const [mapObj, setMapObj] = useState();
+    const [dateRange, setDateRange] = useState();
+
+    useEffect(() => {
+        if (AMap) loadMap();
+        return () => {
+            if (window.local_) {
+                window.local_ = null
+            }
+            if (mapObj)
+                mapObj.clearMap();
+        }
+    }, [true])
+
+    useEffect(() => {
+        if (userId) {
+
+        }
+    }, [userId, dateRange])
+
+    useEffect(() => {
+        if (reportList && mapObj) {
+            mapObj.clearMap();
+            renderMarkers();
+            renderPath();
+        }
+    }, [reportList, mapObj])
+
+    const loadMap = () => {
+        const map = new AMap.Map("amapId", {
+            resizeEnable: true,
+            center: [115.99255, 28.503617],//地图中心点，初始定位加载显示楼块
+            zoom: 8,//地图显示的缩放级别
+            zooms: [8, 18],
+            pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
+            viewMode: '3D', // 地图模式
+            mapStyle: 'amap://styles/light',
+        });
+
+        //主题样式
+        // var styleName = defaultStyleName;
+        // map.setMapStyle(styleName);
+
+        let windowOnload = false;
+        map.on('complete', function () {
+            console.log("map-complete")
+            if (!window.local_) {
+                window.local_ = new Loca.Container({ map });
+                setMapObj(map);
+            }
+        });
+        window.onload = function () {
+            console.log("window.onload")
+            windowOnload = true;
+        }
+    };
+
+    const renderMarkers = () => {
+        const map = mapObj;
+        if (reportList && reportList instanceof Array) {
+            reportList.map(item => {
+                const { longitude, latitude, user } = item;
+                if (!longitude || !latitude) {
+                    return;
+                }
+                const imageURL = '/assets/images/worker.png'
+                let icon = new AMap.Icon({
+                    size: new AMap.Size(24, 24),    // 图标尺寸
+                    image: imageURL,  // Icon的图像
+                    rotation: 270,
+                    // imageOffset: new AMap.Pixel(-14, -14),  // 图像相对展示区域的偏移量，适于雪碧图等
+                    imageSize: new AMap.Size(24, 24)   // 根据所设置的大小拉伸或压缩图片
+                });
+                let marker = new AMap.Marker({
+                    position: new AMap.LngLat(longitude, latitude),
+                    icon: icon,
+                    offset: new AMap.Pixel(-12, -12),
+                    extData: {
+                        name: user.name || '',
+                    }
+                });
+                // marker.setTitle(s.name);
+                map.add(marker);
+            })
+        }
+    }
+
+    const renderPath = () => {
+        const map = mapObj;
+        if (reportList && reportList instanceof Array) {
+            let list = reportList
+            list.sort((a, b) => {
+                const timeA = moment(a.time).valueOf();
+                const timeB = moment(b.time).valueOf();
+                return timeA - timeB;
+            })
+            let path = []
+            list.map(item => {
+                const { longitude, latitude, } = item;
+                if (longitude && latitude)
+                    path.push([item.longitude, item.latitude])
+            });
+            var polyline1 = new AMap.Polyline({
+                map: map,
+                path: path,            // 设置线覆盖物路径
+                showDir: true,
+                strokeColor: '#3366bb',   // 线颜色
+                strokeWeight: 7          // 线宽
+            });
+        }
+    }
+
+    return (
+        <div style={{ width: '100%', backgroundColor: '#101824', height: '100%', minHeight: 700 }}>
+            <div id='amapId' style={{ width: '100%', height: '100%', background: "#101824", minHeight: 700 }} />
+            <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} />
+            {mapObj ? <Bounds map={mapObj} /> : ''}
+        </div >
+    )
 }

 PatrolGis.propTypes = {}
--- a/web/client/src/sections/fillion/components/patrolTable.js
+++ b/web/client/src/sections/fillion/components/patrolTable.js
@ -301,7 +301,7 @@ const PatrolTable = (props) => {
                <DetailList reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen} handelRefresh={handelRefresh} />
            </Card>
        </div>],
-        tab2: <PatrolGis />
+        tab2: <PatrolGis userId={record.id} dispatch={dispatch} />
    };
    const [activeTabKey1, setActiveTabKey1] = useState('tab1');
    const onTab1Change = (key) => {