{
- map.clearInfoWindow();
- }} />
-
,
- document.getElementById(`contentidheatmap${random}`));
- }
- }, 50)
+ { lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' },
+ { lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' },
+ { lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' },
+ { lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' },
+ { lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' },
+ ]
- }
+ //zoom14以上显示详情
+ const databig = [
+ { lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' },
+ { lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' },
+ { lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' },
+ ]
+ //初始点位显示
+ data.filter(s => s.type == tab).map((x, index) => {
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(x.lng, x.lat),
+ // 将一张图片的地址设置为 icon
+ icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+ // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+ offset: new AMap.Pixel(-13, -30),
+ zooms: [3, 14],
});
- } else {
- //初始层级 zoom14以下显示聚合点
- const data = [
- { lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' },
- { lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' },
- { lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' },
- { lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', kind: 'markergreen' },
- { lng: 115.989847, lat: 28.484411, type: 'home', name: '廉租房5', kind: 'markergreen' },
-
- { lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' },
- { lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' },
- { lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' },
- { lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' },
- { lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' },
- ]
-
- //zoom14以上显示详情
- const databig = [
- { lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' },
- { lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' },
- { lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' },
- ]
- //初始点位显示
- data.filter(s => s.type == tab).map((x, index) => {
- var marker = new AMap.Marker({
- position: new AMap.LngLat(x.lng, x.lat),
- // 将一张图片的地址设置为 icon
- icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
- // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
- offset: new AMap.Pixel(-13, -30),
- zooms: [3, 14],
- });
- marker.setTitle(x.name);
- map.add(marker);
- marker.on('click', () => {
- map.setZoom(17.4)
- map.setCenter([115.922069, 28.554867])
- map.setPitch(47.30)
- map.setRotation(1.7000)
- })
- })
- //下钻点位显示
- databig.map((x, index) => {
- var marker = new AMap.Marker({
- position: new AMap.LngLat(x.lng, x.lat),
- // 将一张图片的地址设置为 icon
- icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
- // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
- offset: new AMap.Pixel(-13, -30),
- zooms: [15, 19],
- });
- marker.setTitle(x.name);
- map.add(marker);
-
- let infowindow = new AMap.InfoWindow({
- isCustom: true, //使用自定义窗体
- content: `
- 小区名称
- 小区名称
-
-
- 人口
- 2344人
-
-
- 新生儿
- 23人
-
-
- 老人
- 342人
-
-
-
`,
- offset: new AMap.Pixel(233, 260)
- });
-
- marker.on('click', () => {
- let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
- infowindow.open(map, position);
- map.setCenter(position)
- setTimeout(() => {
- if (document.getElementById(`contentid${x.name}`)) {
- render(
-
,
- document.getElementById(`alarmcontentid${x.name}`));
+ document.getElementById(`contentid${x.name}`));
}
}, 50)
})
})
+
+ }
+
+ const renderDevices = () => {
+ map.clearMap()
+ var style = [{
+ url: '/assets/images/homepage/communtity/gishydrant.png',
+ anchor: new AMap.Pixel(6, 6),
+ size: new AMap.Size(11, 11)
+ }, {
+ url: '/assets/images/homepage/communtity/giswatertank.png',
+ anchor: new AMap.Pixel(4, 4),
+ size: new AMap.Size(11, 11)
+ }, {
+ url: '/assets/images/homepage/communtity/gissmoke.png',
+ anchor: new AMap.Pixel(3, 3),
+ size: new AMap.Size(11, 11)
+ }, {
+ url: '/assets/images/homepage/communtity/giselectricity.png',
+ anchor: new AMap.Pixel(3, 3),
+ size: new AMap.Size(11, 11)
+ }];
+ let points = [], markers = [];
+ devices?.filter(x => x.type == type)?.map(x => {
+ let data = JSON.parse(x.data)
+ data?.map((s, index) => {
+ points.push(
+ {
+ lnglat: new AMap.LngLat(s.lng, s.lat),
+ style: x.type - 1,//对应的status相对应的样式style
+ name: s.address,
+ id: s.address + s.type + index,
+ data: s,
+ }
+ );
+ // if (index < 2000 && s.lng && s.lat) {
+ // const marker = new AMap.Marker({
+ // icon: '/assets/images/homepage/fire/leader.png',
+ // // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+ // position: [s.lng, s.lat],
+ // // offset: new AMap.Pixel(-13, -30),
+ // // content: ''
+ // // size: [13, 13]
+ // });
+ // marker.setTitle(index);
+ // marker.setMap(map);
+ // }
+
+ });
+ })
+
+ var mass = new AMap.MassMarks(points, {
+ opacity: 0.8,
+ zIndex: 11111111,
+ cursor: 'pointer',
+ style: style
+ });
+
+ mass.on('click', function (e) {
+ let id = Math.random(1000)
+ map.setCenter(e.data.lnglat)
+ let infowindow = new AMap.InfoWindow({
+ isCustom: true, //使用自定义窗体
+ content: `
{
- map.setCenter([115.922069, 28.554867])
- map.clearInfoWindow();
- }} />
-
,
- document.getElementById(`contentid${x.name}`));
- }
- }, 50)
- })
+ marker.setTitle(x.name);
+ map.add(marker);
+ marker.on('click', () => {
+ map.setZoom(17.4)
+ map.setCenter([115.922069, 28.554867])
+ map.setPitch(47.30)
+ map.setRotation(1.7000)
})
-
- if (tab == 'device') {
- const data = [
- { lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' },
- { lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' },
- { lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' },
- { lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' },
- { lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' },
- { lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' },
- { lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' },
- ]
-
- data.filter(s => s.type == tab).map((x, index) => {
- var marker = new AMap.Marker({
- position: new AMap.LngLat(x.lng, x.lat),
- // 将一张图片的地址设置为 icon
- icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
- // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
- offset: new AMap.Pixel(-13, -30),
- zooms: [15, 19],
- });
- marker.setTitle(x.name);
- map.add(marker);
- })
- }
- }
-
- }
-
- const renderAlarms = () => {
- if (tab == 'person') {
- return;
- }
-
- const alarms = [
- { lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' },
- ]
-
- alarms.map((x, index) => {
+ })
+ //下钻点位显示
+ databig.map((x, index) => {
var marker = new AMap.Marker({
position: new AMap.LngLat(x.lng, x.lat),
// 将一张图片的地址设置为 icon
@@ -317,24 +155,17 @@ function Map(props) {
let infowindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
- content: `
- 小区名称
- {x.name}
-
-
- 人流量
- 123次
- 房龄
- 9年
-
-
- 租赁中房屋
- 165套
-
-
- 网格员
- 张三
-
-
- 手机号码
- 15765845845
-
-
-
`,
+ content: `
+
`,
offset: new AMap.Pixel(233, 260)
});
- let alarmOk = new AMap.InfoWindow({
- isCustom: true, //使用自定义窗体
- // content: `
- //
`,
- offset: new AMap.Pixel(233, 440)
- });
-
marker.on('click', () => {
let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
infowindow.open(map, position);
map.setCenter(position)
setTimeout(() => {
- if (document.getElementById(`alarmcontentid${x.name}`)) {
+ if (document.getElementById(`contentid${x.name}`)) {
render( {
map.setCenter([115.922069, 28.554867])
@@ -362,18 +193,115 @@ function Map(props) {
手机号码
15765845845
-
- 人流量较大，确认是否安装消防设施？
-
-
否
- 是
-
+
`,
+ offset: new AMap.Pixel(181, 260)
+ });
+ infowindow.open(map, e.data.lnglat)
+
+ setTimeout(() => {
+ if (document.getElementById('info-window' + id)) {
+ render(
+
+
{ map.clearInfoWindow() }} />
+
+
+ ,
+ document.getElementById('info-window' + id));
+ }
+ }, 50)
+
+ window.closeTooltip = () => {
+ testDiv.close();
+ }
+ })
+
+ mass.setMap(map)
}
const renderLeftTop = () => {
@@ -405,24 +333,19 @@ function Map(props) {
}
const renderRightBottom = () => {
- return tab == 'person' ?
-
+
+
+
+
+ {TYPES[type]}
+
+
+ 地址
+
+ {e.data.name?.length > 20 ? e.data.name?.substring(0, 20) + '...' : e.data.name}
+
+
+
+
+ 状态
正常
+
-
-
- 特殊人群
-
-
- 新生儿热力图
- 单位：人/平方公里
-
-
-
-
- 0
- 10
- 20
- 30
- 40
-
+ // | type | 设备类型 | 1-获取消防栓 2-水箱 3-烟感 4-配电箱
+ return tab == 'device' ?
+
+ {[
+ { name: '烟感设备', icon: 'gissmoke', type: 3 },
+ { name: '配电箱', icon: 'giselectricity', type: 4 },
+ { name: '消火栓', icon: 'gishydrant', type: 1 },
+ { name: '水箱', icon: 'giswatertank', type: 2 }
+ ].map(s =>
:
+ 
+ {s.name}
+
)}
{ setType(s.type) }} className={`checkbox`} >{s.type == type ? '✓' : ''}
+
+ {s.name}
+
@@ -440,6 +363,7 @@ function Map(props) {
}
+
return (
<>
{/* 延缓加载遮罩 */}
@@ -447,17 +371,21 @@ function Map(props) {
{/* 地图容器 */}
- {map && renderMarkers()}
- {map && renderAlarms()}
+
{/* 底部按钮 */}
- {!delay && [
+ {[
{ name: '房屋分布', tab: 'home' },
{ name: '人口分布', tab: 'person' },
{ name: '基础设施', tab: 'device' }
].map((s, index) => {
- return { setTab(s.tab) }}
+
+ return index == 1 ? '' :
{
+ if (delay) return
+ setTab(s.tab)
+ }}
+ style={{ zIndex: 1001 }}
>
{s.name}
diff --git a/super-screen/client/src/sections/community-safty/containers/gis.less b/super-screen/client/src/sections/community-safty/containers/gis.less
index 9903780..d667a8b 100644
--- a/super-screen/client/src/sections/community-safty/containers/gis.less
+++ b/super-screen/client/src/sections/community-safty/containers/gis.less
@@ -28,7 +28,7 @@
.gis-bottom {
position: absolute;
left: 0;
- bottom: 0;
+ bottom: -1px;
height: 10%;
width: 100%;
background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
@@ -37,7 +37,7 @@
.gis-button1 {
position: absolute;
left: 39%;
- bottom: -5%;
+ bottom: -2%;
font-family: YouSheBiaoTiHei;
font-size: 12px;
color: #ECF7FF;
@@ -91,7 +91,7 @@
.gis-button3 {
position: absolute;
left: 57%;
- bottom: -5%;
+ bottom: -2%;
font-family: YouSheBiaoTiHei;
font-size: 12px;
color: #ECF7FF;
@@ -458,64 +458,47 @@
}
}
-.person_home_right {
+.device_home_right {
position: absolute;
right: 26%;
bottom: 7%;
z-index: 999;
- width: 224px;
- height: 96px;
- background-image: linear-gradient(270deg, rgba(4, 55, 126, 0.65) 0%, rgba(0, 18, 65, 0.69) 50%, rgba(0, 18, 65, 0.65) 96%);
+ width: 106px;
+ height: 126px;
+ background: rgba(2, 29, 51, 0.68);
padding-left: 5px;
+ border: 1px solid #1e5899;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding-top: 8px;
- ._right_row1 {
- width: 100%;
- display: flex;
- align-items: center;
- padding-right: 22px;
- justify-content: flex-end;
-
- .monitor_text {
- background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
- background-clip: border-box;
- -webkit-background-clip: text;
- color: transparent;
- font-family: YouSheBiaoTiHei;
- font-size: 16px;
- letter-spacing: 0;
- }
-
- ._monitor {
- width: 7.39px;
- height: 6px;
- background: url('/assets/images/homepage/communtity/monitor.png') no-repeat;
- background-size: 100% 100%;
- margin-right: 13px;
- }
- }
-
- .legend_color {
- width: 210.77px;
- height: 3px;
- background-image: linear-gradient(90deg, #A1FF00 1%, #FFF800 23%, #EF8C00 74%, #FF0000 100%);
+ img {
+ width: 13px;
+ height: 13px;
+ margin-right: 3px;
}
- ._title_1 {
- background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
- background-clip: border-box;
- -webkit-background-clip: text;
- color: transparent;
+ span {
font-family: YouSheBiaoTiHei;
- font-size: 16px;
+ font-size: 14px;
+ color: #FFFFFF;
}
- ._title_2 {
- font-family: SourceHanSansCN-Medium;
- font-weight: 500;
- font-size: 12px;
- color: #93ABC0;
+ .checkbox {
+ width: 12px;
+ height: 12px;
+ background: url(/assets/images/homepage/communtity/checkbox.png) no-repeat;
+ background-size: 100% 100%;
+ cursor: pointer;
+ margin-right: 4px;
+ display: inline-block;
+ color: #b4d2ed;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 11px;
}
-
}
@@ -537,4 +520,69 @@
width: 753px;
height: 753px;
}
+}
+
+.markerClass {
+
+ width: 12px;
+ height: 12px;
+
+ background-color: #dd524d;
+ border-radius: 6px;
+ opacity: 0.7;
+}
+
+.device-infowindow {
+ width: 302px;
+ height: 338.43px;
+ background: url('/assets/images/homepage/communtity/deviceinfowindow.png') no-repeat;
+ background-size: 100% 100%;
+ opacity: 0.8;
+ padding-left: 69px;
+ padding-left: 22px;
+ padding-top: 157px;
+ color: #fff;
+
+ .gis_exit {
+ cursor: pointer;
+ position: absolute;
+ right: 9px;
+ top: 42px;
+ width: 30.75px;
+ height: 23px;
+ background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .gis_item {
+ border-bottom: 1px solid #125DB0;
+ width: 93%;
+ display: flex;
+ align-items: center;
+ padding-left: 20px;
+ margin-bottom: 10px;
+ min-height: 35px;
+ display: flex;
+
+ .gis_title {
+ font-family: SourceHanSansCN-Regular;
+ font-weight: 400;
+ font-size: 14px;
+ color: #C3E6FF;
+ letter-spacing: 0;
+ margin-right: 12px;
+ width: 65px;
+ }
+
+ .gis_text {
+ width: 188px;
+ font-family: SourceHanSansCN-Regular;
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ line-height: 21px;
+ }
+ }
+
}
\ No newline at end of file
diff --git a/super-screen/client/src/sections/community-safty/containers/homePage.js b/super-screen/client/src/sections/community-safty/containers/homePage.js
index 2783d46..25bb03f 100644
--- a/super-screen/client/src/sections/community-safty/containers/homePage.js
+++ b/super-screen/client/src/sections/community-safty/containers/homePage.js
@@ -3,10 +3,10 @@ import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import LeftTop from '../components/basic-info'
import LeftMiddle from '../components/population-dynamics'
-import LeftBottom from '../components/infrastructure'
-import RightTop from '../components/city-safty'
+import RightTop from '../components/infrastructure'
+import RightBottom from '../components/city-safty'
import RightMiddle from '../components/special-person'
-import RightBottom from '../components/traffic-ranking'
+import LeftBottom from '../components/traffic-ranking'
import Gis from './gis';
import Weather from '../../water-prevention/components/weather';
import { FullScreenContainer } from '$components'
@@ -42,8 +42,13 @@ function homePage(props) {
-
+ {/*
房屋分布
+ 基础设施
+
diff --git a/super-screen/client/src/sections/community-safty/containers/style.less b/super-screen/client/src/sections/community-safty/containers/style.less
index 8d80168..82890ba 100644
--- a/super-screen/client/src/sections/community-safty/containers/style.less
+++ b/super-screen/client/src/sections/community-safty/containers/style.less
@@ -65,7 +65,7 @@
z-index: 300;
}
- .homepage-center {
+ .community-homepage-center {
width: 93.9%;
height: 84%;
position: absolute;
@@ -259,3 +259,21 @@
height: 100%;
}
+.homeTextLeft {
+ position: absolute;
+ bottom: -18px;
+ left: 40%;
+ font-family: YouSheBiaoTiHei;
+ font-size: 12px;
+ color: #ECF7FF;
+}
+
+
+.homeTextRight {
+ position: absolute;
+ bottom: -18px;
+ right: 39.9%;
+ font-family: YouSheBiaoTiHei;
+ font-size: 12px;
+ color: #ECF7FF;
+}
\ No newline at end of file
diff --git a/super-screen/client/src/sections/community-safty/routes.js b/super-screen/client/src/sections/community-safty/routes.js
index 09d45b8..95cfcff 100644
--- a/super-screen/client/src/sections/community-safty/routes.js
+++ b/super-screen/client/src/sections/community-safty/routes.js
@@ -1,6 +1,6 @@
'use strict';
import homePage from './containers/index';
-
+import CommunityGis from './containers/gis';
export default [{
type: 'outer',
route: {
@@ -10,4 +10,15 @@ export default [{
// 不设置 component 则面包屑禁止跳转
component: homePage
}
-}];
\ No newline at end of file
+},
+{
+ type: 'outer',
+ route: {
+ path: '/watergis',
+ key: 'watergis',
+ breadcrumb: 'GIS',
+ // 不设置 component 则面包屑禁止跳转
+ component: CommunityGis
+ }
+}
+];
\ No newline at end of file
diff --git a/super-screen/client/src/sections/fire-control/containers/gis.less b/super-screen/client/src/sections/fire-control/containers/gis.less
index bbdcd1b..23b1b9f 100644
--- a/super-screen/client/src/sections/fire-control/containers/gis.less
+++ b/super-screen/client/src/sections/fire-control/containers/gis.less
@@ -28,95 +28,12 @@
.gis-bottom {
position: absolute;
left: 0;
- bottom: 0;
+ bottom: -1px;
height: 10%;
width: 100%;
background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
}
-.gis-button1 {
- position: absolute;
- left: 39%;
- bottom: -5%;
- font-family: YouSheBiaoTiHei;
- font-size: 12px;
- color: #ECF7FF;
- letter-spacing: 0;
- width: 76.95px;
- text-align: center;
- cursor: pointer;
- z-index: 999;
-
- .button_img {
- background: url('/assets/images/homepage/communtity/home.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- width: 76.95px;
- height: 64px;
- }
-
- .button_img_select {
- background: url('/assets/images/homepage/communtity/homeselect.png') no-repeat;
- background-size: 100% 100%;
- }
-
-
-}
-
-.gis-button2 {
- position: absolute;
- left: 48%;
- bottom: -3%;
- font-family: YouSheBiaoTiHei;
- font-size: 12px;
- color: #ECF7FF;
- letter-spacing: 0;
- width: 76.95px;
- text-align: center;
- cursor: pointer;
- z-index: 999;
-
- .button_img {
- background: url('/assets/images/homepage/communtity/personbutton.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- width: 76.95px;
- height: 64px;
- }
-
- .button_img_select {
- background: url('/assets/images/homepage/communtity/personbuttonselect.png');
- }
-}
-
-.gis-button3 {
- position: absolute;
- left: 57%;
- bottom: -5%;
- font-family: YouSheBiaoTiHei;
- font-size: 12px;
- color: #ECF7FF;
- letter-spacing: 0;
- width: 76.95px;
- text-align: center;
- cursor: pointer;
- z-index: 999;
-
- .button_img {
- background: url('/assets/images/homepage/communtity/devicebutton.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- width: 76.95px;
- height: 64px;
- }
-
- .button_img_select {
- background: url('/assets/images/homepage/communtity/devicebuttonselect.png');
- }
-
-
-}
-
.fire-gis-infowindow {
width: 302px;
height: 420px;
diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.less b/super-screen/client/src/sections/water-prevention/containers/gis.less
index afcbdd1..0850739 100644
--- a/super-screen/client/src/sections/water-prevention/containers/gis.less
+++ b/super-screen/client/src/sections/water-prevention/containers/gis.less
@@ -28,7 +28,7 @@
.gis-bottom {
position: absolute;
left: 0;
- bottom: 0;
+ bottom: -1px;
height: 10%;
width: 100%;
background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
diff --git a/super-screen/client/src/utils/hooks.js b/super-screen/client/src/utils/hooks.js
index 37a7deb..1368a7c 100644
--- a/super-screen/client/src/utils/hooks.js
+++ b/super-screen/client/src/utils/hooks.js
@@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
import { useRequest } from 'ahooks';
import { Request } from '@peace/utils';
+import { Request as MockRequest } from './webapi';
export const useFsRequest = ({ ...props }) => {
const {
@@ -23,8 +24,34 @@ export const useFsRequest = ({ ...props }) => {
});
};
+// 第三方系统 获取数据hook , 第三方系统api用这个，包括apiFox 的mock数据 传入不同method即可
+export const useMockRequest = ({ ...props }) => {
+ const {
+ method = 'get', header, body, query, url, ...rest
+ } = props;
+ return useRequest(() => {
+ if (method === 'post') {
+ return MockRequest.post(url, body || {}, query || {});
+ }
+ if (method === 'put') {
+ return MockRequest.put(url, body || {}, query || {});
+ }
+ if (method === 'mockGet') {
+ return MockRequest.mockGet(url, query || {}, header || {});
+ }
+ if (method === 'mockPost') {
+ return MockRequest.mockPost(url, body || {}, query || {}, header || {});
+ }
+
+ return MockRequest.get(url, query || {});
+ }, {
+ loadingDelay: 500,
+ ...rest,
+ });
+};
export default {
useFsRequest,
+ useMockRequest
};
diff --git a/super-screen/client/src/utils/index.js b/super-screen/client/src/utils/index.js
index 790cd5d..b7346eb 100644
--- a/super-screen/client/src/utils/index.js
+++ b/super-screen/client/src/utils/index.js
@@ -2,12 +2,14 @@
import { AuthorizationCode } from './authCode';
import { ApiTable, RouteTable, } from './webapi'
import Func from './func';
-import { useFsRequest } from './hooks';
+import { useFsRequest, useMockRequest } from './hooks';
import { getName, getPhone } from './userDisplayHandle';
export {
AuthorizationCode,
Func,
ApiTable, RouteTable,
useFsRequest,
- getName, getPhone
+ getName,
+ getPhone,
+ useMockRequest
}
\ No newline at end of file
diff --git a/super-screen/client/src/utils/webapi.js b/super-screen/client/src/utils/webapi.js
index 9b322f0..61a1281 100644
--- a/super-screen/client/src/utils/webapi.js
+++ b/super-screen/client/src/utils/webapi.js
@@ -163,6 +163,7 @@ const resultHandler = (resolve, reject) => (err, res) => {
resolve(res.body);
}
};
+
export const buildRoute = (url) => {
const user = JSON.parse(sessionStorage.getItem('user'));
if (user == null) {
@@ -186,5 +187,42 @@ export class RouteRequest {
new Promise((resolve, reject) => {
request.delete(buildRoute(url)).query(query).send(data).end(resultHandler(resolve, reject));
});
+
+ static mockPost = (url, data, query, header) => new Promise((resolve, reject) => {
+ request.post(url).set(header).query(query).send(data)
+ .end(resultHandler(resolve, reject));
+ });
+}
+
+export class Request {
+ static get = (url, query) => new Promise((resolve, reject) => {
+ request.get(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+ .end(resultHandler(resolve, reject));
+ });
+
+ static post = (url, data, query) => new Promise((resolve, reject) => {
+ request.post(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+ .send(data)
+ .end(resultHandler(resolve, reject));
+ });
+
+ static put = (url, data, query) => new Promise((resolve, reject) => {
+ request.put(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+ .send(data)
+ .end(resultHandler(resolve, reject));
+ });
+
+ static delete = (url) => new Promise((resolve, reject) => {
+ request.delete(buildUrl(url)).set(setHeader()).use(noCache).end(resultHandler(resolve, reject));
+ });
+
+ static mockGet = (url, query, header) => new Promise((resolve, reject) => {
+ request.get(url).set(header).query(query).end(resultHandler(resolve, reject));
+ });
+
+ static mockPost = (url, data, query, header) => new Promise((resolve, reject) => {
+ request.post(url).set(header).query(query).send(data)
+ .end(resultHandler(resolve, reject));
+ });
}