feats

src/components/ScreenBox/utils.js

@@ -1 +1 @@
-export const colorArr = ['#FB9900', '#23E8AE', '#E63404', '#51D4FF', '#B8B2A9', '#C579FF'];
+export const colorArr = ['#FB9900', '#3D93FD', '#E63404', '#23E8AE', '#51D4FF', '#C579FF'];

src/pages/MonitoringScreen2/components/MachineryInfo.jsx

@@ -1,28 +1,23 @@
 import React from 'react';
 import { Col, Row } from 'antd';
+import { Link } from 'umi';
+import Styles from './style.less';
 
 export default React.forwardRef((props, ref) => {
   const { data = {}, onClose } = props;
-  console.log(data);
 
   return (
-    <div
-      ref={ref}
-      style={{
-        background: 'rgba(0,0,0,0.8)',
-        color: '#fff',
-        padding: '1em',
-        paddingTop: '0',
-        borderRadius: '4px',
-        width: '320px',
-      }}
-    >
+    <div ref={ref} className={Styles['info-window']}>
       <div style={{ textAlign: 'right', fontSize: '24px' }} onClick={onClose}>
         ×
       </div>
       <Row gutter={16}>
         <Col span={8}>农机名称</Col>
-        <Col span={16}>{data.machineryName || ''}</Col>
+        <Col span={16}>
+          <Link to={``} target="_blank">
+            {data.machineryName || ''}
+          </Link>
+        </Col>
       </Row>
       <Row gutter={16}>
         <Col span={8}>设备编号</Col>

src/pages/MonitoringScreen2/components/machinery.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { transform } from './map/coordinate';
 
+const iconB = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
+const iconR = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png';
+
 export default function makeMachinery(machines, markers, map, AMap, onClick) {
   if (!map) return;
   if (!machines || !machines.length) return;
@@ -23,7 +26,7 @@ export default function makeMachinery(machines, markers, map, AMap, onClick) {
     const marker = new AMap.Marker({
       map,
       position,
-      icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+      icon: item.deviceType === 'shensong' ? iconB : iconR,
       offset: new AMap.Pixel(-13, -30),
     });
 

src/pages/MonitoringScreen2/components/style.less

@@ -0,0 +1,26 @@
+@winWidth: 320px;
+@angWidth: 12px;
+
+.info-window {
+  position: relative;
+  width: @winWidth;
+  padding: 1em;
+  padding-top: 0;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 4px;
+
+  &::after {
+    position: absolute;
+    bottom: -@angWidth;
+    left: (@winWidth - @angWidth) / 2;
+    display: block;
+    width: 0;
+    height: 0;
+    margin: 0 auto;
+    border-top: @angWidth solid rgba(0, 0, 0, 0.8);
+    border-right: @angWidth / 2 solid transparent;
+    border-left: @angWidth / 2 solid transparent;
+    content: '';
+  }
+}

src/pages/MonitoringScreen2/index.jsx

@@ -42,7 +42,7 @@ export default (props) => {
         aMapRef.current,
         (machine, position) => {
           // 创建信息窗体
-          setCurMachine(machine);
+          setCurMachine({ ...machine });
           curPos.current = position;
         },
       );
@@ -58,7 +58,7 @@ export default (props) => {
         const infoWindow = new AMap.InfoWindow({
           isCustom: true, //使用自定义窗体
           content: infoWinRef.current,
-          offset: new AMap.Pixel(16, -45),
+          offset: new AMap.Pixel(0, -45),
         });
 
         infoWindow.on('close', () => {