fake pics

web/client/src/sections/quanju/containers/example.js

@@ -15,12 +15,7 @@ const Example = (props) => {
    const [tabKey, setTabKey] = useState('leadership')
    const [mapObj, setMapObj] = useState();
 
-    // useEffect(() => {
-    //     dispatch(actions.example.getMembers(user.orgId))
-    // }, [])
    const tabChange = (tab) => {
-        //leader 领导驾驶舱 site 工地 toilet 公厕 light 照明  water水质  encomic经济 environment 生态环境  security 智慧安监
-        // setCurrentTab(tab);
       setTabKey(tab)
       // dispatch({ type: 'TAB-CHANGE', data: tab })
    }
@@ -40,7 +35,7 @@ const Example = (props) => {
                <Header tabChange={tabChange} tabKey={tabKey} dispatch={dispatch} />
             </div>
             <div style={{ position: 'absolute', width: "100%", height: "90%" }}>
-                    <Gis />
+               <Gis tabKey={tabKey}/>
                <Footer tabKey={tabKey} dispatch={dispatch} />
 
             </div>
@@ -50,7 +45,7 @@ const Example = (props) => {
    )
 }
 
-function mapStateToProps(state) {
+function mapStateToProps (state) {
    const { auth, global, members } = state;
    return {
       loading: members.isRequesting,

web/client/src/sections/quanju/containers/footer/gis/gis.js

@@ -1,12 +1,478 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import Bounds from './bounds';
 
-const MAPID = 'screenGis'
+const markerArr = {
-const Gis = (props) => {
+   guanli: [{
+      longitude: 115.910831,
+      latitude: 28.354804,
+      title: '广福非现场检测点',
+      data: [{
+         title: '检测',
+         value: '27970 条'
+      }, {
+         title: '已处理',
+         value: '3.47 %'
+      }]
+   }, {
+      longitude: 115.944728,
+      latitude: 28.506873,
+      title: '向塘非现场检测点',
+      data: [{
+         title: '检测',
+         value: '12477 条'
+      }, {
+         title: '已处理',
+         value: '4.1 %'
+      }]
+   }, {
+      longitude: 116.194391,
+      latitude: 28.652307,
+      title: '泾口非现场检测点',
+      data: [{
+         title: '检测',
+         value: '6789 条'
+      }, {
+         title: '已处理',
+         value: '7.14 %'
+      }]
+   }, {
+      longitude: 115.967866,
+      latitude: 28.564967,
+      title: '八一非现场检测点',
+      data: [{
+         title: '检测',
+         value: '3125 条'
+      }, {
+         title: '已处理',
+         value: '8.8 %'
+      }]
+   }],
+   build: [{
+      longitude: 115.972472,
+      latitude: 28.564967,
+      title: '程扬线至万王电站公路重建工程',
+      data: [{
+         title: '里程(公里)',
+         value: '3.089'
+      }, {
+         title: '建设单位',
+         value: '南昌县南新乡人民政府'
+      }]
+   }, {
+      longitude: 115.893419,
+      latitude: 28.547622,
+      title: '村委会至下徐公路重建工程',
+      data: [{
+         title: '里程(公里)',
+         value: '1.586'
+      }, {
+         title: '建设单位',
+         value: '昌县南新乡人民政府'
+      }]
+   }, {
+      longitude: 116.094463,
+      latitude: 28.754601,
+      title: '滁北大桥至塘里龚家公路及支线重建工程',
+      data: [{
+         title: '里程(公里)',
+         value: '4.231'
+      }, {
+         title: '建设单位',
+         value: '蒋巷镇人民政府'
+      }]
+   }, {
+      longitude: 116.026707,
+      latitude: 28.475733,
+      title: '塘新公路至西联公路改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '1.8'
+      }, {
+         title: '建设单位',
+         value: '塘南镇人民政府'
+      }]
+   }, {
+      longitude: 115.898934,
+      latitude: 28.425624,
+      title: '滁协线至梓溪公路重建工程',
+      data: [{
+         title: '里程(公里)',
+         value: '4.2'
+      }, {
+         title: '建设单位',
+         value: '塘南镇人民政府'
+      }]
+   }, {
+      longitude: 116.050607,
+      latitude: 28.402986,
+      title: '德昌高速泾口连接线至东升公路拓宽改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '3.322'
+      }, {
+         title: '建设单位',
+         value: '泾口乡人民政府'
+      }]
+   }, {
+      longitude: 115.956845,
+      latitude: 28.361741,
+      title: '马泾公路至岗背村公路拓宽改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '2.82'
+      }, {
+         title: '建设单位',
+         value: '泾口乡人民政府'
+      }]
+   }, {
+      longitude: 116.04693,
+      latitude: 28.317242,
+      title: '幽兰至少城公路提升改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '7.8'
+      }, {
+         title: '建设单位',
+         value: '昌县幽兰镇人民政府'
+      }]
+   }, {
+      longitude: 115.80793,
+      latitude: 28.444215,
+      title: '渡头至郭上公路改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '5.492'
+      }, {
+         title: '建设单位',
+         value: '武阳镇人民政府'
+      }]
+   }, {
+      longitude: 116.09473,
+      latitude: 28.471693,
+      title: '湾庄线至南洲公路改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '1.746'
+      }, {
+         title: '建设单位',
+         value: '塔城乡人民政府'
+      }]
+   }, {
+      longitude: 116.091972,
+      latitude: 28.369829,
+      title: '湾庄线至青岚湖公路改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '1.962'
+      }, {
+         title: '建设单位',
+         value: '塔城乡人民政府'
+      }]
+   }, {
+      longitude: 115.872276,
+      latitude: 28.555696,
+      title: '新坊至涂埠公路改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '2.08'
+      }, {
+         title: '建设单位',
+         value: '八一乡人民政府'
+      }]
+   }, {
+      longitude: 115.982584,
+      latitude: 28.573458,
+      title: '埂头至后曲公路改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '2.359'
+      }, {
+         title: '建设单位',
+         value: '八一乡人民政府'
+      }]
+   }, {
+      longitude: 115.878711,
+      latitude: 28.597673,
+      title: '105国道至涂家公路重建工程',
+      data: [{
+         title: '里程(公里)',
+         value: '2.19'
+      }, {
+         title: '建设单位',
+         value: '银三角管委会'
+      }]
+   }, {
+      longitude: 116.023949,
+      latitude: 28.499163,
+      title: '剑霞至团结公路改造工程',
+      data: [{
+         title: '里程(公里)',
+         value: '0.398'
+      }, {
+         title: '建设单位',
+         value: '南昌县向塘镇人民政府'
+      }]
+   },],
+   operation: [{
+      longitude: 115.83529,
+      latitude: 28.583314,
+      title: '赣AB8019',
+      data: [{
+         title: '所属车队',
+         value: '四车队'
+      }, {
+         title: '所属线路',
+         value: '106路'
+      }]
+   }, {
+      longitude: 115.956477,
+      latitude: 28.421436,
+      title: '赣AB8280',
+      data: [{
+         title: '所属车队',
+         value: '三车队'
+      }, {
+         title: '所属线路',
+         value: '23路'
+      }]
+   }, {
+      longitude: 115.954861,
+      latitude: 28.544287,
+      title: '赣AC2987',
+      data: [{
+         title: '所属车队',
+         value: '三车队'
+      }, {
+         title: '所属线路',
+         value: '118路'
+      }]
+   }, {
+      longitude: 115.974251,
+      latitude: 28.513765,
+      title: '赣AB8235',
+      data: [{
+         title: '所属车队',
+         value: '二车队'
+      }, {
+         title: '所属线路',
+         value: '109路'
+      }]
+   }, {
+      longitude: 116.008991,
+      latitude: 28.478264,
+      title: '赣AE0588',
+      data: [{
+         title: '所属车队',
+         value: '一车队'
+      }, {
+         title: '所属线路',
+         value: '15路'
+      }]
+   }, {
+      longitude: 116.074432,
+      latitude: 28.388747,
+      title: '赣AD3176',
+      data: [{
+         title: '所属车队',
+         value: '三车队'
+      }, {
+         title: '所属线路',
+         value: '112路'
+      }]
+   }, {
+      longitude: 115.863567,
+      latitude: 28.384482,
+      title: '赣AB8273',
+      data: [{
+         title: '所属车队',
+         value: '三车队'
+      }, {
+         title: '所属线路',
+         value: '122路'
+      }]
+   }, {
+      longitude: 115.973443,
+      latitude: 28.285637,
+      title: '赣AC2935',
+      data: [{
+         title: '所属车队',
+         value: '一车队'
+      }, {
+         title: '所属线路',
+         value: '131路'
+      }]
+   }, {
+      longitude: 116.055042,
+      latitude: 28.500986,
+      title: '赣A03871D',
+      data: [{
+         title: '所属车队',
+         value: '一车队'
+      }, {
+         title: '所属线路',
+         value: '16路'
+      }]
+   }, {
+      longitude: 115.898307,
+      latitude: 28.579057,
+      title: '赣A09606D',
+      data: [{
+         title: '所属车队',
+         value: '四车队'
+      }, {
+         title: '所属线路',
+         value: '11路'
+      }]
+   }, {
+      longitude: 115.990409,
+      latitude: 28.570543,
+      title: '赣AN9900',
+      data: [{
+         title: '所属车队',
+         value: '一车队'
+      }, {
+         title: '所属线路',
+         value: '116路'
+      }]
+   },],
+   conserve: [{
+      longitude: 115.948963,
+      latitude: 28.556655,
+      title: '沙潭至五星',
+      data: [{
+         title: '养护时间',
+         value: '2022.04.09 14:16'
+      }, {
+         title: '养护内容',
+         value: '刷石灰'
+      }]
+   }, {
+      longitude: 115.92641,
+      latitude: 28.56433,
+      title: '滁槎至协城',
+      data: [{
+         title: '养护时间',
+         value: '2022.05.21 09:31'
+      }, {
+         title: '养护内容',
+         value: '砍树枝'
+      }]
+   }, {
+      longitude: 115.938906,
+      latitude: 28.536912,
+      title: '瓜山至广福',
+      data: [{
+         title: '养护时间',
+         value: '2022.06.01 12:02'
+      }, {
+         title: '养护内容',
+         value: '打草'
+      }]
+   }, {
+      longitude: 115.959316,
+      latitude: 28.576649,
+      title: '泾口-塘山',
+      data: [{
+         title: '养护时间',
+         value: '2022.06.05 09:42'
+      }, {
+         title: '养护内容',
+         value: '砍树枝'
+      }]
+   }, {
+      longitude: 115.910689,
+      latitude: 28.344683,
+      title: '罗舍至泗洪',
+      data: [{
+         title: '养护时间',
+         value: '2022.06.08 07:30'
+      }, {
+         title: '养护内容',
+         value: '打草'
+      }]
+   }, {
+      longitude: 115.784252,
+      latitude: 28.292816,
+      title: '渔业至万州',
+      data: [{
+         title: '养护时间',
+         value: '2022.06.14 08:14'
+      }, {
+         title: '养护内容',
+         value: '清路基'
+      }]
+   }, {
+      longitude: 115.853238,
+      latitude: 28.436127,
+      title: '向塘-西洛',
+      data: [{
+         title: '养护时间',
+         value: '2022.06.16 07:03'
+      }, {
+         title: '养护内容',
+         value: '扫杂草'
+      }]
+   }, {
+      longitude: 116.011835,
+      latitude: 28.479896,
+      title: '协成-塘南',
+      data: [{
+         title: '养护时间',
+         value: '2022.05.25 16:01'
+      }, {
+         title: '养护内容',
+         value: '砍树枝'
+      }]
+   }, {
+      longitude: 115.996189,
+      latitude: 28.499273,
+      title: '小蓝-东新',
+      data: [{
+         title: '养护时间',
+         value: '2022.05.24 08:31'
+      }, {
+         title: '养护内容',
+         value: '砍树枝'
+      }]
+   }, {
+      longitude: 115.955651,
+      latitude: 28.588613,
+      title: '新坊-土坊',
+      data: [{
+         title: '养护时间',
+         value: '2022.05.24 16:44'
+      }, {
+         title: '养护内容',
+         value: '砍树枝'
+      }]
+   }, {
+      longitude: 115.958495,
+      latitude: 28.432375,
+      title: '合乞-璜溪',
+      data: [{
+         title: '养护时间',
+         value: '2022.05.27 07:17'
+      }, {
+         title: '养护内容',
+         value: '打草'
+      }]
+   },]
+}
 
-  const [mapObj, setMapObj] = useState();
+const markerIcon = {
+   build: '/assets/images/gis/marker_icon_jianshe.png',
+   guanli: '/assets/images/gis/marker_icon_zaizhong.png',
+   operation: '/assets/images/gis/marker_icon_gongjiao.png',
+   conserve: '/assets/images/gis/marker_icon_yanghu.png'
+}
 
+const MAPID = 'screenGis'
+const Gis = ({ tabKey }) => {
+   console.log(tabKey);
+   const [mapObj, setMapObj] = useState();
+   const [markers, serMarkers] = useState([])
+   const curInfoWindow = useRef(null)
    useEffect(() => {
       if (AMap) loadMap();
       return () => {
@@ -18,6 +484,55 @@ const Gis = (props) => {
       }
    }, [true])
 
+   useEffect(() => {
+      if (mapObj) {
+         if (markers.length) {
+            mapObj.remove(markers)
+         }
+         if (curInfoWindow.current) {
+            curInfoWindow.current.close();
+         }
+         if (tabKey && markerArr[tabKey]) {
+            let icon = new AMap.Icon({
+               size: new AMap.Size(32, 40),    // 图标尺寸
+               image: markerIcon[tabKey],  // Icon的图像
+               // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
+               imageSize: new AMap.Size(32, 40)   // 根据所设置的大小拉伸或压缩图片
+            });
+            let nextMarkers = markerArr[tabKey]?.map(mk => {
+               let marker = new AMap.Marker({
+                  position: new AMap.LngLat(mk.longitude, mk.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                  title: mk.title,
+                  icon: icon,
+               })
+               marker.on('click', function (ev) {
+                  console.log(ev);
+                  const infoWindow = new AMap.InfoWindow({
+                     anchor: 'bottom-center',
+                     content: `
+                        <div style="min-height:120px; width:300px; background-color:#002785; border: 2px solid #0171f69e; color: #fff">
+                           <div style="height:24px; border-bottom: 2px solid #0171f69e; padding-left: 12px">
+                              ${mk.title}
+                           </div>
+                           <div style="padding: 8px 12px; font-weight: bold">
+                              ${mk.data.map(t => {
+                        return `<p style="display:inline-block; width:25%; text-align-last:justify; text-align:justify">${t.title}</p> : <p style="display:inline-block; width:50%">${t.value}</p>`
+                     })}
+                           </div>
+                        </div>
+                     ` //传入 dom 对象，或者 html 字符串
+                  });
+                  infoWindow.open(mapObj, [mk.longitude, mk.latitude]);
+                  curInfoWindow.current = infoWindow
+               })
+               return marker
+            })
+            mapObj.add(nextMarkers);
+            serMarkers(nextMarkers)
+         }
+      }
+   }, [mapObj, tabKey])
+
    const loadMap = () => {
       const map = new AMap.Map(MAPID, {
          resizeEnable: true,
@@ -35,6 +550,7 @@ const Gis = (props) => {
             window.local_ = new Loca.Container({ map });
             setMapObj(map);
          }
+
       });
       window.onload = function () {
          windowOnload = true;
@@ -43,7 +559,7 @@ const Gis = (props) => {
 
    return (
       <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
-      <div id={MAPID} style={{ width: '100%', height: '100%',}} />
+         <div id={MAPID} style={{ width: '100%', height: '100%', }} />
          {mapObj ? <Bounds map={mapObj} /> : ''}
       </div >
    )

web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js

@@ -10,18 +10,12 @@ const Leftcenter = () => {
    const [tu, setTu] = useState("");
    const [name, setName] = useState("");
    const [list, setList] = useState([
-        { name: '静夜思', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
-        { name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
-        { name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
-        { name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
-        { name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
-        { name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" },
+      // { name: '小蓝至东新', img: "/assets/images/leadership/shiyantu.png" },
-        { name: '静夜思', img: "/assets/images/leadership/shiyantu.png" },
-        { name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" },
-        { name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" },
-        { name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" },
-        { name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" },
-        { name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" },
    ])
    useEffect(() => {
       const timer = setInterval(() => {
@@ -70,12 +64,12 @@ const Leftcenter = () => {
          </div>
          <div style={{ width: "100%", height: "100%", marginTop: "3%" }}>
             <div style={{ width: "60%", height: "100%", float: "left", marginLeft: "1%" }}>
-                    {/* {
+               {
                   list.map((item, index) => {
                      return index + 1 == num ?
                         <div style={{ width: "100%", height: "100%", position: "relative" }}>
 
-                                    <img style={{ width: "100%", position: "absolute", bottom: "5%" }} src={item.img} />
+                           <img style={{ width: "100%",height:'100%', position: "absolute", bottom: "5%" }} src={item.img} />
                            <p style={{
                               width: "100%", height: "3vh", position: "absolute", bottom: "3%",
                               backgroundColor: "rgba(0,0,0,0.26)", lineHeight: "3vh", textAlign: ""
@@ -85,16 +79,15 @@ const Leftcenter = () => {
                         </div> : ""
 
                   })
-
+               }
-                    } */}
             </div>
-                {/* <Lunbo
+            <Lunbo
                // canScroll={true}
                content={renderBody()}
                containerStyle={{ position: "relative", height: "100%", width: "35%", float: "right", marginRight: "2%", marginTop: "1%" }}
                divHeight={"100%"}
                divId={"screen-slope-midde-top-jiangxi"}
-                /> */}
+            />
          </div>
       </>
    )

web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import './left.less';
 class ReactCarousel extends Component {
-    chunk(arr, size) {
+   chunk (arr, size) {
       var arr1 = new Array();
       for (var i = 0; i < Math.ceil(arr.length / size); i++) {
          arr1[i] = new Array();
@@ -12,13 +12,10 @@ class ReactCarousel extends Component {
          if (!((i % size == 0) && (i != 0))) {
             arr1[j][x] = arr[i];
             x++;
-                // console.log("j=" + j + "  " + "x=" + x);
          } else {
             j++;
             x = 0;
-                // console.log("else:" + "j=" + j + "  " + "x=" + x);
             arr1[j][x] = arr[i];
-                // console.log(arr1);
             x++;
          }
       }
@@ -28,15 +25,18 @@ class ReactCarousel extends Component {
    constructor() {
       super();
       this.state = {
-            shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+         shuzu: [
-            { name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" },
+            { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
-            { name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" },
+            { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
-            { name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" },
+            { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
-            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
-            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
-            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
-            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
-            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }],
+            { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
+            { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
+            { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
+         ],
          imgs: [],
          showIndex: 0, //显示第几个图片
          timer: null,  // 定时器
@@ -47,9 +47,7 @@ class ReactCarousel extends Component {
       this.state.imgs = this.chunk((this.state.shuzu), 4)
    }
 
-
+   render () {
-
-    render() {
       return (
          <div className="ReactCarousel" style={{ width: "100%", height: "100%" }}>
             <div className="contain"
@@ -58,13 +56,12 @@ class ReactCarousel extends Component {
             >
                <ul className="ul">
                   {
-
                      this.state.imgs.map((value, index) => {
                         return (
                            <li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''}
                               key={index}
                            >
-                                        <div style={{ width: "45%", height: "40%", backgroundColor: "red", position: "absolute", left: "-3%", top: "5%" }}>
+                              <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[0].img})`, backgroundSize: 'cover', position: "absolute", left: "-3%", top: "5%" }}>
                                  <div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
                                     <div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                                        <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
@@ -73,7 +70,7 @@ class ReactCarousel extends Component {
                                  </div>
 
                               </div>
-                                        {value[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "#fff", position: "absolute", left: "45%", top: "5%" }}>
+                              {value[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[1].img})`, backgroundSize: 'cover', position: "absolute", left: "45%", top: "5%" }}>
                                  <div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
                                     <div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                                        <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
@@ -81,7 +78,7 @@ class ReactCarousel extends Component {
                                     </div>
                                  </div>
                               </div> : ""}
-                                        {value[2]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "bule", position: "absolute", left: "-3%", top: "49%" }}>
+                              {value[2]?.name ? <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[0].img})`, backgroundSize: 'cover', position: "absolute", left: "-3%", top: "49%" }}>
                                  <div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
                                     <div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                                        <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
@@ -89,7 +86,7 @@ class ReactCarousel extends Component {
                                     </div>
                                  </div>
                               </div> : ""}
-                                        {value[3]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "pink", position: "absolute", left: "45%", top: "49%" }}>
+                              {value[3]?.name ? <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[3].img})`, backgroundSize: 'cover', position: "absolute", left: "45%", top: "49%" }}>
                                  <div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
                                     <div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                                        <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
@@ -112,7 +109,8 @@ class ReactCarousel extends Component {
                                     <li key={index}
                                         className={index === this.state.showIndex ? 'active' : ''}
                                         onClick={() => { this.change(index) }}>
-                                    </li>)
+                                    </li>
+                                 )
                             })
                         }
 
@@ -129,11 +127,11 @@ class ReactCarousel extends Component {
          </div>
       )
    }
-    componentDidMount() { //一开始自动播放
+   componentDidMount () { //一开始自动播放
       this.start();
    }
 
-    componentWillUnmount() { //销毁前清除定时器
+   componentWillUnmount () { //销毁前清除定时器
       this.stop();
    }
    stop = () => { //暂停

web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js

@@ -17,23 +17,23 @@ const Righttop = () => {
       // console.log(`Selected: ${value}`);
       setSize(value)
    };
-    for (let i = 10; i < 36; i++) {
+
-        children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
-    }
    const [list, setList] = useState([
-        { name: '静夜思', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
-        { name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
-        { name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
-        { name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
-        { name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
-        { name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
-        { name: '静夜思', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
-        { name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
-        { name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
-        { name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" },
+      { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
-        { name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" },
-        { name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" },
    ])
+   for (let i = 0; i < list.length; i++) {
+      children.push(<Option key={i.toString(36) + i}>{list[i].name}</Option>);
+   }
+
    // useEffect(() => {
    //     const timer = setInterval(() => {
    //         if (num == 12) {
@@ -51,20 +51,24 @@ const Righttop = () => {
          <div id='op' style={{ width: "100%", height: "55%" }}>{
             list.map((item, index) => {
                return (
-                        // <div style={{ width: "100%", height: "100%" }} >
+                  <div style={{ width: "100%", height: "100%" }} >
-                        // {/* <div style={{ width: "100%", height: "100%", }}> */}
+                     <div style={{ width: "100%", height: "100%", }}>
-                        <li className={index} style={{ height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px" }} onMouseEnter={() => {
+                        <li className={index} style={{
+                           height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
+                        }} onMouseEnter={() => {
                            // setTu(item.img);
                            setNum(index);
                         }} onMouseLeave={() => {
                            setNum()
                         }}>
-                            {num == index ? <img src='/assets/images/leadership/red.png' style={{ width: "100%", height: "120%", position: "absolute", }} /> : ""}
+                           {num == index ? <img src={item.img} style={{ width: "100%", height: "120%", position: "absolute", }} /> : ""}
-                            {num == index ? <img src='/assets/images/leadership/wangluo.png' style={{ width: "5%", height: "100%", position: "absolute", left: "-0.5%", top: "20%" }} /> : ""}
+                           {num == index ? <img src={item.img} style={{ width: "5%", height: "100%", position: "absolute", left: "-0.5%", top: "20%" }} /> : ""}
 
-                            <p style={{ position: "absolute", left: "5%", color: num == index ? "#FFFFFF" : "rgba(216,240,255,0.8)" }} >{item.name}</p><p style={{ position: "absolute", right: "5%", color: num == index ? "#FFFFFF" : "rgba(216,240,255,0.8)" }}>{item.name}</p></li>
+                           <p style={{ position: "absolute", left: "5%", color: num == index ? "#FFFFFF" : "rgba(216,240,255,0.8)" }} >{item.name}</p>
-                        // {/* </div> */}
+                           <p style={{ position: "absolute", right: "5%", color: num == index ? "#FFFFFF" : "rgba(216,240,255,0.8)" }}>{item.name}</p>
-                        // </div>
+                        </li>
+                     </div>
+                  </div>
                )
 
             })
@@ -77,13 +81,13 @@ const Righttop = () => {
 
          <Module style={style} title={"路面执法监控"}>
             <div style={{ width: "100%", height: "65%", position: "relative" }}>
-                    {/* <p style={{ position: "absolute", left: "25%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>监控总数</p><p style={{ position: "absolute", left: "37%", fontSize: "24px", marginLeft: "1%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>129</p>
+               <p style={{ position: "absolute", left: "25%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>监控总数</p><p style={{ position: "absolute", left: "37%", fontSize: "24px", marginLeft: "1%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>129</p>
-                    <p style={{ position: "absolute", left: "55%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>在线率</p><p style={{ position: "absolute", right: "15%", fontSize: "24px", marginLeft: "2%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>88.87%</p> */}
+               <p style={{ position: "absolute", left: "55%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>在线率</p><p style={{ position: "absolute", right: "15%", fontSize: "24px", marginLeft: "2%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>88.87%</p>
                <div style={{ width: "100%", height: "10%", position: "relative" }}>
-                        {/* <img src='/assets/images/leadership/head.png' style={{ width: "15%", marginLeft: "5%" }} /> */}
+                  <img src='/assets/images/leadership/head.png' style={{ width: "15%", marginLeft: "5%" }} />
 
                   <div className='wy-rightTop' style={{ position: "absolute", right: "5%", top: "130%" }}>
-                            {/* <Select
+                     <Select
                         size={size}
                         defaultValue="选择路段"
                         onChange={handleChange}
@@ -94,32 +98,32 @@ const Righttop = () => {
                         }}
                      >
                         {children}
-                            </Select> */}
+                     </Select>
-                            {/* <div>{size}</div> */}
+                     <div>{size}</div>
 
                   </div>
 
                </div>
                <div style={{ width: "100%", height: "80%", position: "relative", top: "10%" }}>
-                        {/* <Huadong /> */}
+                  <Huadong />
                </div>
             </div>
             <div style={{ width: "100%", height: "35%" }}>
                <div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}>
-                        {/* <p>{title || []}</p> */}
+                  {/* <p>{title || ''}</p> */}
                   <img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "20px", top: "18%" }} />
                   <span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "50px" }}>离线详情</span>
                   <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "94%", height: "34px", position: "absolute", top: "8px", left: "35px" }} />
                </div>
-                    {/* <Spin tip="Loading..." spinning={num ? true : false} style={{ width: "100%", height: "100%" }}> */}
+               <Spin tip="Loading..." spinning={num ? true : false} style={{ width: "100%", height: "100%" }}>
-                    {/* <Lunbo
+                  <Lunbo
                      // canScroll={true}
                      content={renderBody()}
                      containerStyle={{ position: "relative", height: "100%", width: "90%", left: "5%", top: "5%" }}
                      divHeight={"100%"}
                      divId={"screen-slope"}
-                    /> */}
+                  />
-                    {/* </Spin> */}
+               </Spin>
             </div>
 
          </Module>

web/client/src/sections/quanju/containers/footer/operation/right.js

@@ -1,32 +1,32 @@
 import React, { useState } from 'react'
-// import { Carousel } from 'antd';
+import { Carousel } from 'antd';
 import Module from '../../public/module'
 
 const Right = () => {
-    // const [dataLists, setDataList] = useState([
+   const [dataLists, setDataList] = useState([
-    //     {
+      {
-    //         route: '147',
+         route: '147',
-    //         plate: '赣APJ090'
+         plate: '赣APJ090'
-    //     }, {
+      }, {
-    //         route: '166',
+         route: '166',
-    //         plate: '赣APJ087'
+         plate: '赣APJ087'
-    //     }, {
+      }, {
-    //         route: '171',
+         route: '171',
-    //         plate: '赣APJ184'
+         plate: '赣APJ184'
-    //     }, {
+      }, {
-    //         route: '186',
+         route: '186',
-    //         plate: '赣APJ241'
+         plate: '赣APJ241'
-    //     }, {
+      }, {
-    //         route: '199',
+         route: '199',
-    //         plate: '赣APJ337'
+         plate: '赣APJ337'
-    //     }
+      }
-    // ])
+   ])
    const style = { height: "97%", marginTop: "3%" }
    return (
-        <div style={{ position:'absolute',right:0, width: "23%", height: "100%", marginRight: "1%", }}>
+      <div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}>
          <Module style={style} customize={true} title={"车辆视频监控"}>
             <div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}>
-                    {/* <Carousel
+               <Carousel
                   autoplay
                   infinite
                   autoplaySpeed={300000}
@@ -35,9 +35,9 @@ const Right = () => {
                >
                   {
                      dataLists.map((data, index) => (
-                                <div key={index} style={{width:'100%',height:'40%'}}>
+                        <div key={index} style={{ width: '100%', height: '40%' }}>
                            <div className='busInformation'>
-                                        <img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display:'block',float:'left' }} />
+                              <img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} />
                               <span>
                                  <h3>所属线路</h3>
                                  <h4>{data.route}</h4>
@@ -47,22 +47,22 @@ const Right = () => {
                            </div>
                            <div className='busVideo'>
                               <div style={{
-                                            width:'98%',margin:'1% 1%',height:152,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE',
+                                 width: '98%', margin: '1% 1%', height: 152, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
-                                            border:'1px solid #1C60FE'
+                                 border: '1px solid #1C60FE'
-                                            }}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div>
+                              }}><img src='/assets/images/quanju/fake/gj1.png' style={{ width: '100%', height: '100%' }} /></div>
                               <div style={{
-                                            width:'48%',margin:'1% 1%',height:100,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE',
+                                 width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
-                                            border:'1px solid #1C60FE'
+                                 border: '1px solid #1C60FE'
-                                            }}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div>
+                              }}><img src='/assets/images/quanju/fake/gj2.png' style={{ width: '100%', height: '100%' }} /></div>
                               <div style={{
-                                            width:'48%',margin:'1% 1%',height:100,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE',
+                                 width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE',
-                                            border:'1px solid #1C60FE'
+                                 border: '1px solid #1C60FE'
-                                            }}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div>
+                              }}><img src='/assets/images/quanju/fake/gj3.png' style={{ width: '100%', height: '100%' }} /></div>
                            </div>
                         </div>
                      ))
                   }
-                    </Carousel> */}
+               </Carousel>
             </div>
          </Module>
       </div>

web/client/src/sections/quanju/containers/heand/style.less

@@ -1,10 +1,11 @@
-.tabKey-map{
+.tabKey-map {
    width: 12%;
    height: 4.7vh;
    text-align: center;
    position: absolute;
    top: 3vh;
-    a{
+
+   a {
       color: #FFFFFF;
       font-size: 2vh;
       font-family: PingFangSC-Medium, PingFang SC;
@@ -12,13 +13,15 @@
       font-weight: 500;
    }
 }
-.notabKey{
+
-    width:12%;
+.notabKey {
+   width: 12%;
    height: 4.7vh;
    position: absolute;
    top: 3vh;
    text-align: center;
-    a{
+
+   a {
       color: #6593c6;
       font-size: 2vh;
       font-family: PingFangSC-Medium, PingFang SC;
@@ -27,3 +30,11 @@
    }
 
 }
+
+.amap-info-content {
+   padding: 0;
+}
+
+.amap-info-sharp {
+   display: none;
+}