diff --git a/web/client/assets/images/leadership/diguang.png b/web/client/assets/images/leadership/diguang.png new file mode 100644 index 00000000..727c132e Binary files /dev/null and b/web/client/assets/images/leadership/diguang.png differ diff --git a/web/client/assets/images/leadership/handong.png b/web/client/assets/images/leadership/handong.png new file mode 100644 index 00000000..19947b09 Binary files /dev/null and b/web/client/assets/images/leadership/handong.png differ diff --git a/web/client/assets/images/leadership/head.png b/web/client/assets/images/leadership/head.png new file mode 100644 index 00000000..9eb1b2d8 Binary files /dev/null and b/web/client/assets/images/leadership/head.png differ diff --git a/web/client/assets/images/leadership/juxing.png b/web/client/assets/images/leadership/juxing.png new file mode 100644 index 00000000..a62244f0 Binary files /dev/null and b/web/client/assets/images/leadership/juxing.png differ diff --git a/web/client/assets/images/leadership/lan.png b/web/client/assets/images/leadership/lan.png new file mode 100644 index 00000000..0fce0bd9 Binary files /dev/null and b/web/client/assets/images/leadership/lan.png differ diff --git a/web/client/assets/images/leadership/lu.png b/web/client/assets/images/leadership/lu.png new file mode 100644 index 00000000..6baaa8c7 Binary files /dev/null and b/web/client/assets/images/leadership/lu.png differ diff --git a/web/client/assets/images/leadership/qiao.png b/web/client/assets/images/leadership/qiao.png new file mode 100644 index 00000000..0e6e1fc8 Binary files /dev/null and b/web/client/assets/images/leadership/qiao.png differ diff --git a/web/client/assets/images/leadership/red.png b/web/client/assets/images/leadership/red.png new file mode 100644 index 00000000..3fb42a29 Binary files /dev/null and b/web/client/assets/images/leadership/red.png differ diff --git a/web/client/assets/images/leadership/shezhi.png b/web/client/assets/images/leadership/shezhi.png new file mode 100644 index 00000000..98cf77e5 Binary files /dev/null and b/web/client/assets/images/leadership/shezhi.png differ diff --git a/web/client/assets/images/leadership/wangluo.png b/web/client/assets/images/leadership/wangluo.png new file mode 100644 index 00000000..db996543 Binary files /dev/null and b/web/client/assets/images/leadership/wangluo.png differ diff --git a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js index 55fd8020..d2b731cb 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js @@ -3,11 +3,19 @@ import './style.less' import React, { useEffect, useRef } from 'react'; // import ReactEcharts from 'echarts-for-react'; import * as echarts from 'echarts'; -function Leftbottom() { - // const { - // safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height, - // } = props; +function Leftbottom(props) { + const { width, height, data, total, text } = props const chartRef = useRef(null); + let colorList = [ + "rgba(7,185,254,1)", + "rgba(28,96,254,1)", + "rgba(4,251,240,1)", + ] + let underColorList = [ + "rgba(7,185,254,0.5)", + "rgba(28,96,254,0.5)", + "rgba(4,251,240,0.5)", + ] const safetyData = [ {name: '县道', value: 72}, {name: '乡道', value: 17}, @@ -15,145 +23,201 @@ function Leftbottom() { ] const chartTitle = '道路总公里'; const title = '基础设施安全监测版块'; - // const number = 2738; - // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝'] - const rightLegend = ['县道', '乡道', '村道'] - const legendColor = undefined; - const width = undefined - const height = undefined - var titleNum = 15 - let safetyOption = { + let name = [], emptyName = [] + // const name = data?.map(d) + data?.forEach(d => { + name.push(d.name) + emptyName.push({ + name: '', + value: d.value + }) + }) + + // let safetyOption = { + // tooltip: { + // show: true, + // trigger: 'item', + // position: 'right', + // backgroundColor: 'rgba(0,0,0,0.7)', + // textStyle: { + // color: '#fff', + // }, + // formatter: (values) => `${values.seriesName}
${values.marker} ${values.name} ${values.value}个(${values.percent}%)`, + // }, + // // title: { + // // text:titleNum,//主标题文本 + // // left:'10%', + // // top:'35%', + // // subtext:chartTitle,//副标题文本 + // // textStyle:{ + // // fontFamily : "YouSheBiaoTiHei", + // // fontSize: 20, + // // color:'#FFFFFF', + // // marginLeft:'20%', + // // align:'center' + // // }, + // // subtextStyle:{ + // // fontFamily : "PingFangSC-Medium PingFang SC", + // // fontSize: 12, + // // fontWeight:500, + // // color:'#E9F7FF', + + // // } + // // }, + // legend: [ + + // { + // orient: 'vertical', + // textStyle: { + // color: '#DDEFFF', + // fontFamily: 'SourceHanSansCN-Regular', + // fontSize: 12, + // }, + // right: 0, + // top: 'center', + // align: 'left', + // itemWidth: 10, + // itemHeight: 10, + // data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'], + // formatter: (name) => { + // for (let i = 0; i < safetyOption.series[0].data.length; i += 1) { + // if (name === safetyOption.series[0].data[i].name) { + // return `${name} \t ${safetyOption.series[0].data[i].value}`; + // } + // } + // }, + // }, + // ], + // series: [ + // { + // name: '道路统计', + // type: 'pie', + // radius: ['50%', '63%'], + // center: ["30%", "50%"], + // // emphasis: { // 设置高亮时显示标签 + // // label: { + // // show: true + // // }, + // // // scale: true, // 设置高亮时放大图形 + // // // scaleSize: 20 + // // }, + // label: { + // show: false, + // }, + // // selectedMode: 'single', + // data: safetyData, + // itemStyle: { + // normal: { + // color: (color) => { + // const colorList = legendColor || [ + // '#98D8CA', + // '#9494FF', + // '#2A43FF', + // '#FFD39F', + // '#9D5F8B', + // '#ADDE81', + // '#F8EBA2', + // '#5F8EFD', + // '#2BB4D3', + // '#1488C8', + // ]; + // return colorList[color.dataIndex]; + // }, + // }, + // }, + // }, + // ], + // }; + const option = { tooltip: { - show: true, - trigger: 'item', - position: 'right', - backgroundColor: 'rgba(0,0,0,0.7)', + trigger: "item", + }, + legend: { + orient: "vertical", + itemWidth: 10, + itemHeight: 10, + right: '30%', + top: 'center', + align: 'left', + data: name, textStyle: { - color: '#fff', + color: "#fff", }, - formatter: (values) => `${values.seriesName}
${values.marker} ${values.name} ${values.value}个(${values.percent}%)`, }, - // title: { - // text:titleNum,//主标题文本 - // left:'10%', - // top:'35%', - // subtext:chartTitle,//副标题文本 - // textStyle:{ - // fontFamily : "YouSheBiaoTiHei", - // fontSize: 20, - // color:'#FFFFFF', - // marginLeft:'20%', - // align:'center' - // }, - // subtextStyle:{ - // fontFamily : "PingFangSC-Medium PingFang SC", - // fontSize: 12, - // fontWeight:500, - // color:'#E9F7FF', - - // } - // }, - legend: [ + grid: { + left: '10%' + }, + series: [ { - orient: 'vertical', - textStyle: { - color: '#DDEFFF', - fontFamily: 'SourceHanSansCN-Regular', - fontSize: 12, + name: "底层背景", + type: "pie", + hoverAnimation: false, + legendHoverLink: false, + radius: ["50%", "62%"], + center: ['25%', '50%'], + color: underColorList, + label: { + show: false }, - right: 0, - top: 'center', - align: 'left', - itemWidth: 10, - itemHeight: 10, - data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'], - formatter: (name) => { - for (let i = 0; i < safetyOption.series[0].data.length; i += 1) { - if (name === safetyOption.series[0].data[i].name) { - return `${name} \t ${safetyOption.series[0].data[i].value}`; - } - } + labelLine: { + show: false }, + tooltip: { + show: false, + }, + + data: emptyName, }, - ], - series: [ { - name: '道路统计', - type: 'pie', - radius: ['50%', '63%'], - center: ["30%", "50%"], - // emphasis: { // 设置高亮时显示标签 - // label: { - // show: true - // }, - // // scale: true, // 设置高亮时放大图形 - // // scaleSize: 20 - // }, + name: "道路统计", + type: "pie", + radius: ["57%", "70%"], + center: ['25%', '50%'], + color: colorList, label: { - show: false, - }, - // selectedMode: 'single', - data: safetyData, - itemStyle: { - normal: { - color: (color) => { - const colorList = legendColor || [ - '#98D8CA', - '#9494FF', - '#2A43FF', - '#FFD39F', - '#9D5F8B', - '#ADDE81', - '#F8EBA2', - '#5F8EFD', - '#2BB4D3', - '#1488C8', - ]; - return colorList[color.dataIndex]; - }, - }, + show: false }, + data: data, }, ], }; - let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 useEffect(() => { let myChart = echarts.init(chartRef.current); - const highlightPie = () =>{ // 取消所有高亮并高亮当前图形 - for(var idx in safetyOption.series[0].data) - // 遍历饼图数据,取消所有图形的高亮效果 - myChart.dispatchAction({ - type: 'downplay', - seriesIndex: 0, - dataIndex: idx - }); - // 高亮当前图形 - myChart.dispatchAction({ - type: 'highlight', - seriesIndex: 0, - dataIndex: currentIndex - }); - // myChart.dispatchAction({ - // type: 'showTip', - // seriesIndex: 0, - // dataIndex: currentIndex, - // }); - } - const selectPie=() =>{ // 高亮效果切换到下一个图形 - var dataLen = safetyOption.series[0].data.length; - currentIndex = (currentIndex + 1) % dataLen; - highlightPie(); - } - let changePieInterval = setInterval(selectPie, 1000); + // const highlightPie = () =>{ // 取消所有高亮并高亮当前图形 + // for(var idx in safetyOption.series[0].data) + // // 遍历饼图数据,取消所有图形的高亮效果 + // myChart.dispatchAction({ + // type: 'downplay', + // seriesIndex: 0, + // dataIndex: idx + // }); + // // 高亮当前图形 + // myChart.dispatchAction({ + // type: 'highlight', + // seriesIndex: 0, + // dataIndex: currentIndex + // }); + // // myChart.dispatchAction({ + // // type: 'showTip', + // // seriesIndex: 0, + // // dataIndex: currentIndex, + // // }); + // } + // const selectPie=() =>{ // 高亮效果切换到下一个图形 + // var dataLen = safetyOption.series[0].data.length; + // currentIndex = (currentIndex + 1) % dataLen; + // highlightPie(); + // } + // let changePieInterval = setInterval(selectPie, 1000); myChart.onChartReady = (instance) => { chartRef.current.safetyChart = instance; } - myChart.setOption(safetyOption); + myChart.setOption(option); return ()=>{ - clearInterval(changePieInterval) + // clearInterval(changePieInterval) } }, []); diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js index 63b5b344..2c8107f0 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js @@ -4,194 +4,134 @@ import { Col, Progress, Row } from 'antd'; import React, { useEffect, useRef } from 'react'; // import ReactEcharts from 'echarts-for-react'; import * as echarts from 'echarts'; -function Rightbottom() { - // const { - // safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height, - // } = props; +function Rightbottom(props) { + const { width, height, data, total, text } = props const chartRef = useRef(null); - const safetyData = [ - {name: '一级公路', value: 42}, - {name: '二级公路', value: 17}, - {name: '三级公路', value: 17}, - {name: '四级公路', value: 30}, - {name: '等外公路', value: 30}, - + let colorList = [ + "rgba(7,185,254,1)", + "rgba(28,96,254,1)", + "rgba(4,251,240,1)", + "rgba(255,194,20,1)" + ] + let underColorList = [ + "rgba(7,185,254,0.5)", + "rgba(28,96,254,0.5)", + "rgba(4,251,240,0.5)", + "rgba(255,194,20,0.5)" ] + let name = [], emptyName = [] + // const name = data?.map(d) + + // const safetyData = [ + // {name: '一级公路', value: 42}, + // {name: '二级公路', value: 17}, + // {name: '三级公路', value: 17}, + // {name: '四级公路', value: 30}, + // {name: '等外公路', value: 30}, + + // ] + data?.forEach(d => { + name.push(d.name) + emptyName.push({ + name: '', + value: d.value + }) + }) const chartTitle = '道路总公里'; const title = '基础设施安全监测版块'; // const number = 2738; // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝'] const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路'] const legendColor = undefined; - const width = undefined - const height = undefined + var titleNum = 15 - let safetyOption = { + const option = { tooltip: { - show: true, - trigger: 'item', - position: 'right', - backgroundColor: 'rgba(0,0,0,0.7)', + trigger: "item", + }, + legend: { + orient: "vertical", + itemWidth: 10, + itemHeight: 10, + right: '30%', + top: 'center', + align: 'left', textStyle: { - color: '#fff', + color: "#fff", }, - formatter: (values) => `${values.seriesName}
${values.marker} ${values.name} ${values.value}个(${values.percent}%)`, }, - // title: { - // text:titleNum,//主标题文本 - // left:'center', - // top:'35%', - // subtext:chartTitle,//副标题文本 - // textStyle:{ - // fontFamily : "YouSheBiaoTiHei", - // fontSize: 20, - // color:'#FFFFFF', - // // align:'center' - // }, - // subtextStyle:{ - // fontFamily : "PingFangSC-Medium PingFang SC", - // fontSize: 12, - // fontWeight:500, - // color:'#E9F7FF', - // } - // }, - // graphic: { - // elements: [ - // { - // type: 'text', - // style: { - // text: chartTitle || '安全\n监测', - // align: 'center', - // fill: '#fff', - // z: -999, - // zlevel: -999, - // font: '20px "YouSheBiaoTiHei", sans-serif', - // }, - // left: 'center', - // top: 'center', - // position: [100, 100], - // }, - // ], - // }, - legend: [ + grid: { + left: '10%' + }, - // { - // orient: 'vertical', - // left: 'left', - // top: 'center', - // textStyle: { - // color: '#DDEFFF', - // fontFamily: 'SourceHanSansCN-Regular', - // fontSize: 12, - // }, - // itemWidth: 10, - // itemHeight: 10, - // data: leftLegend || ['基坑', '桥梁', '地铁', '边坡', '建筑物'], - // formatter: (name) => { - // for (let i = 0; i < safetyOption.series[0].data.length; i += 1) { - // if (name === safetyOption.series[0].data[i].name) { - // return `${name} \t ${safetyOption.series[0].data[i].value}`; - // } - // } - // }, - // }, + series: [ { - orient: 'vertical', - textStyle: { - color: '#DDEFFF', - fontFamily: 'SourceHanSansCN-Regular', - fontSize: 12, + name: "底层背景", + type: "pie", + hoverAnimation: false, + legendHoverLink: false, + radius: ["50%", "62%"], + center: ['25%', '50%'], + color: underColorList, + label: { + show: false }, - right: 0, - top: 'center', - align: 'left', - itemWidth: 10, - itemHeight: 10, - data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'], - formatter: (name) => { - for (let i = 0; i < safetyOption.series[0].data.length; i += 1) { - if (name === safetyOption.series[0].data[i].name) { - return `${name} \t ${safetyOption.series[0].data[i].value}`; - } - } + labelLine: { + show: false }, + tooltip: { + show: false, + }, + + data: emptyName, }, - ], - series: [ { - name: '公路等级统计', - type: 'pie', - radius: ['50%', '63%'], - center:['30%','50%'], - // emphasis: { // 设置高亮时显示标签 - // label: { - // show: true - // }, - // // scale: true, // 设置高亮时放大图形 - // // scaleSize: 20 - // }, + name: "公路等级统计", + type: "pie", + radius: ["57%", "70%"], + center: ['25%', '50%'], + color: colorList, label: { - show: false, - }, - // selectedMode: 'single', - data: safetyData, - itemStyle: { - normal: { - color: (color) => { - const colorList = legendColor || [ - '#98D8CA', - '#9494FF', - '#2A43FF', - '#FFD39F', - '#9D5F8B', - '#ADDE81', - '#F8EBA2', - '#5F8EFD', - '#2BB4D3', - '#1488C8', - ]; - return colorList[color.dataIndex]; - }, - }, + show: false }, + data: data, }, ], }; - let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 useEffect(() => { let myChart = echarts.init(chartRef.current); - const highlightPie = () =>{ // 取消所有高亮并高亮当前图形 - for(var idx in safetyOption.series[0].data) - // 遍历饼图数据,取消所有图形的高亮效果 - myChart.dispatchAction({ - type: 'downplay', - seriesIndex: 0, - dataIndex: idx - }); - // 高亮当前图形 - myChart.dispatchAction({ - type: 'highlight', - seriesIndex: 0, - dataIndex: currentIndex - }); - // myChart.dispatchAction({ - // type: 'showTip', - // seriesIndex: 0, - // dataIndex: currentIndex, - // }); - } - const selectPie=() =>{ // 高亮效果切换到下一个图形 - var dataLen = safetyOption.series[0].data.length; - currentIndex = (currentIndex + 1) % dataLen; - highlightPie(); - } - let changePieInterval = setInterval(selectPie, 1000); + // const highlightPie = () =>{ // 取消所有高亮并高亮当前图形 + // for(var idx in safetyOption.series[0].data) + // // 遍历饼图数据,取消所有图形的高亮效果 + // myChart.dispatchAction({ + // type: 'downplay', + // seriesIndex: 0, + // dataIndex: idx + // }); + // // 高亮当前图形 + // myChart.dispatchAction({ + // type: 'highlight', + // seriesIndex: 0, + // dataIndex: currentIndex + // }); + // // myChart.dispatchAction({ + // // type: 'showTip', + // // seriesIndex: 0, + // // dataIndex: currentIndex, + // // }); + // } + // const selectPie=() =>{ // 高亮效果切换到下一个图形 + // var dataLen = safetyOption.series[0].data.length; + // currentIndex = (currentIndex + 1) % dataLen; + // highlightPie(); + // } + // let changePieInterval = setInterval(selectPie, 1000); - myChart.onChartReady = (instance) => { - chartRef.current.safetyChart = instance; - } - myChart.setOption(safetyOption); + // myChart.onChartReady = (instance) => { + // chartRef.current.safetyChart = instance; + // } + myChart.setOption(option); return ()=>{ clearInterval(changePieInterval) } diff --git a/web/client/src/sections/quanju/containers/footer/build/index.js b/web/client/src/sections/quanju/containers/footer/build/index.js index 86884a9b..bbfac6ca 100644 --- a/web/client/src/sections/quanju/containers/footer/build/index.js +++ b/web/client/src/sections/quanju/containers/footer/build/index.js @@ -14,6 +14,19 @@ import './style.less' import {getdaolutongji} from '../../../actions/example' const Build = (props) => { const { dispatch } = props + let data = [ + { value: 435, name: "县道" }, + { value: 679, name: "乡道" }, + { value: 848, name: "村道" }, + ] + const safetyData = [ + {name: '一级公路', value: 42}, + {name: '二级公路', value: 17}, + {name: '三级公路', value: 17}, + {name: '四级公路', value: 30}, + + + ] const [buildingnumber,setbuildingnumber] = useState(0) const requestbuildingnumber = async ()=>{ const res = await dispatch(getdaolutongji()); @@ -97,7 +110,15 @@ const Build = (props) => { - + @@ -118,7 +139,11 @@ const Build = (props) => { - + diff --git a/web/client/src/sections/quanju/containers/footer/build/style.less b/web/client/src/sections/quanju/containers/footer/build/style.less index 727ada13..6e534f0f 100644 --- a/web/client/src/sections/quanju/containers/footer/build/style.less +++ b/web/client/src/sections/quanju/containers/footer/build/style.less @@ -171,7 +171,7 @@ align-items: center; justify-content: center; position: absolute; - left: 27%; + left: 16%; top:38%; h2{ font-size: 1.25rem; @@ -190,7 +190,7 @@ img{ width: 19%; position: absolute; - left: 26.5%; + left: 16%; top:29% } @@ -268,7 +268,7 @@ align-items: center; justify-content: center; position: absolute; - left: 27%; + left: 16%; top:38%; h2{ font-size: 1.25rem; @@ -287,7 +287,7 @@ img{ width: 19%; position: absolute; - left: 26.5%; + left: 16%; top:29% } } diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js b/web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js index 49e2c97b..b2c31804 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js @@ -1,7 +1,7 @@ import React from 'react' import Centerlefttop from "./centerleft/center-left-top" -import Centerleftcenter from "./centerleft/center-left-center" -import Centerleftcentertop from "./centerleft/center-left-centertop" +import Centerleftcenter from "./centerleft/top" +import Centerleftcentertop from "./centerleft/bottom" import Centerleftbottom from "./centerleft/center-left-bottom" const CenterLeft = () => { diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/bottom.js new file mode 100644 index 00000000..f4f85635 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/bottom.js @@ -0,0 +1,28 @@ +import React, { useState, useEffect } from 'react' +// import Module from '../../../public/module' +import Daolu from "./daolu" +import Handong from "./handong" +import Qiaoliang from "./qiqoliang" + + +const Leftcentertop = (props) => { + const style = { height: "23%" } + const { tabKey } = props + return ( + <> + { + (() => { + switch (tabKey) { + case 'daolu': + return + case 'handong': + return + case "qiaoliang": + return + } + })() + } + + ) +} +export default Leftcentertop \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-center.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-center.js deleted file mode 100644 index 08ff5043..00000000 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-center.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import Module from '../../../public/module' - -const Leftcenter = () => { - const style = { - height: "23%" - } - return ( - <> - -
-
- - ) -} -export default Leftcenter \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-centertop.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-centertop.js deleted file mode 100644 index 393e3164..00000000 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-centertop.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import Module from '../../../public/module' - -const Leftcentertop = () => { - const style = { height: "23%" } - return ( - <> - -
-
- - ) -} -export default Leftcentertop \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js index fada6e84..ced94483 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js @@ -1,13 +1,30 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import Module from '../../../public/module' +import Top from "./top" +import Bottom from "./bottom" const Lefttop = (props) => { - const { } = props const style = { height: "68%" } + const [tabKey, setTabKey] = useState('daolu') + + // 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 }) + } return ( <> - +
+ +
+
+ +
) diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js new file mode 100644 index 00000000..673c4a15 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js @@ -0,0 +1,89 @@ +import React, { useState, useEffect } from 'react' +import Lun from "./lunbo/lunbo" + +const Right = () => { + const [beijing, setBeijing] = useState() + const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" }, + { name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }]) + const renderBody = () => { + return ( + +
+ { + list.map((item, index) => { + return ( +
  • { + setBeijing(index) + // console.log(beijing); + }}> + {beijing == index ? : ""} + {beijing == index ? : ""} +

    {item.name}

    +

    {item.name}

    +

    {item.name}

    +

    {item.name}

  • + ) + }) + } +
    + ) + } + return ( + <> +
    + + +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + {/* */} +
    + +
    + +
    + + ) +} +export default Right \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js new file mode 100644 index 00000000..673c4a15 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js @@ -0,0 +1,89 @@ +import React, { useState, useEffect } from 'react' +import Lun from "./lunbo/lunbo" + +const Right = () => { + const [beijing, setBeijing] = useState() + const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" }, + { name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }]) + const renderBody = () => { + return ( + +
    + { + list.map((item, index) => { + return ( +
  • { + setBeijing(index) + // console.log(beijing); + }}> + {beijing == index ? : ""} + {beijing == index ? : ""} +

    {item.name}

    +

    {item.name}

    +

    {item.name}

    +

    {item.name}

  • + ) + }) + } +
    + ) + } + return ( + <> +
    + + +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + {/* */} +
    + +
    + +
    + + ) +} +export default Right \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js index 6bf6d406..e992fb0d 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js @@ -40,9 +40,11 @@ export default class AutoRollComponent extends Component { this.currentTop = this.currentTop + 1; this.preTop = this.scrollElem.scrollTop; this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; + // console.log(this.scrollElem.scrollTop); if (this.preTop === this.scrollElem.scrollTop) { this.scrollElem.scrollTop = this.marqueesHeight; this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; + // console.log(this.scrollElem.scrollTop); } }, 80); } diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js new file mode 100644 index 00000000..673c4a15 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js @@ -0,0 +1,89 @@ +import React, { useState, useEffect } from 'react' +import Lun from "./lunbo/lunbo" + +const Right = () => { + const [beijing, setBeijing] = useState() + const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" }, + { name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, + { name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }]) + const renderBody = () => { + return ( + +
    + { + list.map((item, index) => { + return ( +
  • { + setBeijing(index) + // console.log(beijing); + }}> + {beijing == index ? : ""} + {beijing == index ? : ""} +

    {item.name}

    +

    {item.name}

    +

    {item.name}

    +

    {item.name}

  • + ) + }) + } +
    + ) + } + return ( + <> +
    + + +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + {/* */} +
    + +
    + +
    + + ) +} +export default Right \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/top.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/top.js new file mode 100644 index 00000000..96d51507 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/top.js @@ -0,0 +1,63 @@ +import React, { useState, useEFFect } from 'react' +// import Module from '../../../public/module' + +const Leftcenter = (props) => { + const { tabChange, tabKey } = props + // const [tab, setTad] = useState("base") + const onClick = (tab) => { + // setTad({ tab }) + tabChange(tab) + } + return ( + <> +
    + {/*
    { + onClick("build") + }}>建设
    */} +
    { + onClick("daolu") + }} > + { + tabKey == "daolu" ? : "" + } +
    + +
    +
    +

    道路统计公里

    +

    2333.4

    +
    +
    +
    { + onClick("handong") + }} > + { + tabKey == "handong" ? : "" + } +
    + +
    +
    +

    涵洞统计

    +

    2333.4

    +
    +
    +
    { + onClick("qiaoliang") + }} > + { + tabKey == "qiaoliang" ? : "" + } +
    + +
    +
    +

    桥梁统计

    +

    2333.4

    +
    +
    +
    + + ) +} +export default Leftcenter \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js index 906278be..3b856b15 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js @@ -9,10 +9,12 @@ const Leftbottomecharts = () => { title: { }, tooltip: { + formatter: " {b}年
    施工了{c}公里", trigger: "axis", axisPointer: { lineStyle: { - color: "#57617B", + color: "rgba(226,240,255,0.4)", + default: "solid" }, }, }, @@ -55,7 +57,7 @@ const Leftbottomecharts = () => { ], normal: { lineStyle: { - color: "red"//折线的颜色 + color: "rgba(226,240,255,0.4)"//折线的颜色 } } }, @@ -96,6 +98,7 @@ const Leftbottomecharts = () => { symbol: "circle", symbolSize: 5, showSymbol: false, + color: "#00D3FD", areaStyle: { normal: { color: new echarts.graphic.LinearGradient( @@ -132,7 +135,7 @@ const Leftbottomecharts = () => { return ( <>
    -

    公里数Km

    +

    公里

    diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js new file mode 100644 index 00000000..ab50b76f --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js @@ -0,0 +1,218 @@ +import React, { useEffect, useRef } from 'react' +import * as echarts from 'echarts'; + +const Lefttopecharts = () => { + const chartRef = useRef(null); + useEffect(() => { + var chartInstance = echarts.init(chartRef.current); + var dataArr = 50; + var names = names() + var colorSet = colors(); + function names() { + if (dataArr >= 0 && dataArr < 30) { + return ("畅通"); + } else if (dataArr >= 30 && dataArr < 50) { + return ("缓行"); + } else if (dataArr >= 50 && dataArr < 70) { + return ("拥堵"); + } else if (dataArr >= 70 && dataArr <= 100) { + return ("严重拥堵"); + } + } + function colors() { + if (dataArr >= 0 && dataArr < 30) { + return (colorSet = { color: "#33B000" }); + } else if (dataArr >= 30 && dataArr < 50) { + return (colorSet = { color: "#FECB00" }); + } else if (dataArr >= 50 && dataArr < 70) { + return (colorSet = { color: "#DF0001" }); + } else if (dataArr >= 70 && dataArr <= 100) { + return (colorSet = { color: "#8E0E0B" }); + } + } + var option = { + // backgroundColor: "#0E1327", + tooltip: { + formatter: "{a}
    {b} : {c}%", + }, + + series: [ + { + name: names, + type: "gauge", + // center: ['20%', '50%'], + radius: "60%", + + splitNumber: 10, + axisLine: { + lineStyle: { + color: [ + [dataArr / 100, colorSet.color], + [1, "#111F42"], + ], + width: 3, + }, + }, + axisLabel: { + show: false, + }, + // axisTick: { + // show: false, + // }, + splitLine: { + show: false, + }, + // itemStyle: { + // show: false, + // }, + detail: { + formatter: function (value) { + if (value !== 0) { + var num = Math.round(value); + return ( + parseInt(num).toFixed(0) + + "%" + + "\n" + + "\n" + + "\n" + + "\n" + + "\n" + + ); + } else { + return 0; + } + }, + offsetCenter: [0, 82], + textStyle: { + padding: [0, 0, 0, 0], + fontSize: 18, + fontWeight: "700", + color: "#FFFFFF", + // zlevel: 3, + }, + }, + title: { + //标题 + show: true, + offsetCenter: [0, 46], // x, y,单位px + textStyle: { + color: "#fff", + fontSize: 14, //表盘上的标题文字大小 + fontWeight: 400, + fontFamily: "PingFangSC", + }, + }, + data: [ + + { + name: "拥堵指数", + value: dataArr, + itemStyle: colorSet + }, + ], + pointer: { + show: true, + length: "75%", + radius: "20%", + width: 4, //指针粗细 + }, + animationDuration: 4000, + }, + { + name: "外部刻度", + type: "gauge", + // center: ['20%', '50%'], + radius: "90%", + // min: 0, //最小刻度 + // max: 100, //最大刻度 + // splitNumber: 10, //刻度数量 + startAngle: 225, + endAngle: -45, + axisLine: { + show: false, + }, //仪表盘轴线 + axisLabel: { + show: true, + color: "#FFFFFF", + distance: 20, + formatter: function (v) { + switch (v + "") { + case "0": + return "0"; + case "20": + return "20"; + case "40": + return "40"; + case "60": + return "60"; + case "80": + return "80"; + case "100": + return "100"; + } + }, + }, //刻度标签。 + axisTick: { + show: false, + splitNumber: 7, + lineStyle: { + color: colorSet.color, //用颜色渐变函数不起作用 + width: 1, + }, + length: -8, + }, //刻度样式 + splitLine: { + show: false, + length: -20, + lineStyle: { + color: colorSet.color, //用颜色渐变函数不起作用 + }, + }, //分隔线样式 + detail: { + show: false, + }, + pointer: { + show: false, + }, + }, + ], + }; + chartInstance.setOption(option); + window.addEventListener('resize', function () { + chartInstance.resize(); + }) + }, []); + + + return ( + <> +
    +
    Km/h
    +
    当前
    + {/*
    */} +
    +
    +

    畅通

    +

    0-30

    +
    +
    +

    缓慢

    +

    30-50

    +
    +
    +

    拥堵

    +

    50-70

    +
    +
    +

    严重拥堵

    +

    70-100

    +
    +
    + + ); +} + +export default Lefttopecharts \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js index 052e59c4..19dd88b8 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js @@ -32,7 +32,7 @@ const Leftcenter = () => { setNum(num + 1); setTu(list[num].img); } - }, 6000); + }, 2000); return () => clearInterval(timer); }, [num]); const renderBody = () => { @@ -42,12 +42,15 @@ const Leftcenter = () => { return ( //
    // {/*
    */} -
  • { +
  • { setTu(item.img); setNum(index + 1); setName(item.name) // console.log(list); - }}>{item.name}
  • + }}> +

    {item.name}

    + + // {/*
    */} //
    ) diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js index c486d189..d4a3e9cb 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js @@ -1,14 +1,15 @@ import React from 'react' import Module from '../../../public/module' import Leftcenter from './left-center' +import Lefttopecharts from "./echarts/lefttopecharts" const Lefttop = () => { const style = { height: "68%" } return ( <> -
    -
    +
    +

    { }}>预测明日

    55.2Km/h

    -
    -
    +
    + +
    diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js b/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js new file mode 100644 index 00000000..e740f270 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js @@ -0,0 +1,145 @@ +import React, { Component } from 'react'; +import './left.less'; +class ReactCarousel extends Component { + chunk(arr, size) { + var arr1 = new Array(); + for (var i = 0; i < Math.ceil(arr.length / size); i++) { + arr1[i] = new Array(); + } + var j = 0; + var x = 0; + for (var i = 0; i < arr.length; i++) { + 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++; + } + } + return arr1; + } + + constructor() { + super(); + this.state = { + shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, + { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }], + imgs: [], + showIndex: 0, //显示第几个图片 + timer: null, // 定时器 + show: false // 前后按钮显示 + } + this.setState({ + imgs: this.chunk((this.state.shuzu), 4) + }) + console.log(this.chunk((this.state.shuzu), 4)); + } + + render() { + return ( +
    +
    { this.stop() }} //鼠标进入停止自动播放 + onMouseLeave={() => { this.start() }} //鼠标退出自动播放 + > +
      + { + this.state.imgs.map((value, index) => { + return ( +
    • +
      {value[0].name}
      +
      {value[1].name}
      +
      {value[2].name}
      +
      {value[3].name}
      +
    • + ) + }) + } +
    + {/*
      + { + this.state.imgs.map((value, index) => { + return ( +
    • { this.change(index) }}> +
    • ) + }) + } + +
    */} +
    + { this.previous(e) }}>左 + { this.next(e) }}>右 +
    +
    +
    + ) + } + componentDidMount() { //一开始自动播放 + this.start(); + } + componentWillUnmount() { //销毁前清除定时器 + this.stop(); + } + stop = () => { //暂停 + let { timer } = this.state; + clearInterval(timer); + } + start = () => { //开始 + let { timer } = this.state; + timer = setInterval(() => { + this.next(); + }, 2000); + this.setState({ + timer + }) + } + change = (index) => { //点击下面的按钮切换当前显示的图片 + let { showIndex } = this.state; + showIndex = index; + this.setState({ + showIndex + }) + } + previous = (e) => { //上一张 + let ev = e || window.event; + let { showIndex, imgs } = this.state; + if (showIndex <= 0) { + showIndex = imgs.length - 1; + } else { + showIndex--; + } + this.setState({ + showIndex + }) + } + next = (e) => { //下一张 + let ev = e || window.event; + let { showIndex, imgs } = this.state; + if (showIndex >= imgs.length - 1) { + showIndex = 0; + } else { + showIndex++; + } + this.setState({ + showIndex + }) + } +} +export default ReactCarousel; \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/left.less b/web/client/src/sections/quanju/containers/footer/leadership/right/left.less index b5333c1a..dcf56b90 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/left.less +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/left.less @@ -1,3 +1,95 @@ li{ list-style-type:none -} \ No newline at end of file +} + +.ant-select-selector, .ant-select-selection-placeholder{ + background-color:#011f59 !important; + border:#1E7BD6 1px solid !important; + font-family: PingFangSC-Regular, PingFang SC !important; + height: 25px !important; + // line-height: 25px !important; +} +.ant-select-selection-item{ + line-height: 25px !important; +} +.anticon{ + color: #fff !important; +} +.contain { + position: relative; + top: 5%; + left: 45%; + width: 100%; + height: 100%; + transition: all 2s; + transform: translateX(-50%); + color: #fff; + overflow: hidden; + cursor: pointer; +} +.contain .ul { + height: 100%; + list-style: none; +} +.contain .ul .items { + position: absolute; + top: 0px; + width: 100%; + height: 100%; +} +.ul li.show{ + display: block; +} +.ul li { + display: none; +} +.ul li img { + width: 100%; + height: 100%; +} +.contain .dots { + position: absolute; + left: 50%; + bottom: 30px; + height: 10px; + transform: translateX(-50%); +} +.dots li { + float: left; + width: 10px; + height: 10px; + margin: 0px 5px; + border-radius: 50%; + transition: all .3s; + // background-color: antiquewhite; + list-style: none; +} +// .dots li.active { +// background-color: blue; +// } +.control .left { + position: absolute; + top: 80%; + left: 85%; + // padding: 5px; + // transform: translateY(-50%); + width: 20px; + height: 50px; + font-size: 20px; + cursor: pointer; +} +// .control .left:hover { +// background-color: #000000, +// } +.control .right { + position: absolute; + top: 80%; + right: 3%; + // padding: 5px; + // transform: translateY(-50%); + font-size: 20px; + cursor: pointer; +} +// .control .right:hover { +// background-color: rgba(0, 0, 0, .3); +// } \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo copy.js b/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo copy.js new file mode 100644 index 00000000..f6230ea7 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo copy.js @@ -0,0 +1,9 @@ +import React from 'react' + +function lunbo() { + return ( +
    lunbo copy
    + ) +} + +export default lunbo \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js index 470a4c58..0558c40e 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js @@ -42,9 +42,9 @@ const Rightbottom = () => { //
    {list.map((item, index) => { - return
  • { - setBeijing(item.name) - console.log(beijing); + return
  • { + setBeijing(index) + // console.log(beijing); }}>
    {item.name}
    {item.chaoxian}
    diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js index 239b7815..ea666b61 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js @@ -1,11 +1,118 @@ -import React from 'react' +import React, { useState, useEffect } from 'react'; import Module from '../../../public/module' +import { Radio, Select } from 'antd'; +import Lunbo from "../centerleft/lunbo/lunbo" +import Huadong from './hudong'; +import "./left.less" const Righttop = () => { + const { Option } = Select; const style = { height: "68%" } + const children = []; + const [size, setSize] = useState('454544545'); + const [num, setNum] = useState(); + const [tu, setTu] = useState(""); + const [name, setName] = useState(""); + const handleChange = (value) => { + // console.log(`Selected: ${value}`); + setSize(value) + }; + for (let i = 10; i < 36; i++) { + children.push(); + } + const [list, setList] = useState([ + { 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" }, + { 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(() => { + // if (num == 12) { + // setNum(1); + // setTu(list[0].img); + // } else { + // setNum(num + 1); + // setTu(list[num].img); + // } + // }, 6000); + // return () => clearInterval(timer); + // }, [num]); + const renderBody = () => { + return ( +
    { + list.map((item, index) => { + return ( + //
    + // {/*
    */} +
  • { + // setTu(item.img); + setNum(index); + }}> + {num == index ? : ""} + {num == index ? : ""} + +

    {item.name}

    {item.name}

  • + // {/*
    */} + //
    + ) + + }) + } +
    + ) + } return ( <> - + +
    +
    + +
    + + {/*
    {size}
    */} + +
    + +
    +
    + +
    +
    +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + +
    + +
    ) diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 9dd1afee..1b2307b0 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -9,18 +9,18 @@ export const ApiTable = { getEnterprisesMembers: 'enterprises/{enterpriseId}/members', - //组织管理-用户管理-部门 -    getDepMessage: 'department', -    createDepMessage: 'department', -    updateDepMessage: 'department', -    delDepMessage: 'department/{depId}', -    //组织管理-用户管理-用户 -    getDepUser: 'department/{depId}/user', -    createUser: 'department/user', -    updateUser: 'department/user/{userId}', -    delUser: 'department/user/{userIds}', + //组织管理-用户管理-部门 + getDepMessage: 'department', + createDepMessage: 'department', + updateDepMessage: 'department', + delDepMessage: 'department/{depId}', + //组织管理-用户管理-用户 + getDepUser: 'department/{depId}/user', + createUser: 'department/user', + updateUser: 'department/user/{userId}', + delUser: 'department/user/{userIds}', -    resetPwd: 'department/user/{userId}/password', + resetPwd: 'department/user/{userId}/password', //用户权限 @@ -41,24 +41,23 @@ export const ApiTable = { compileReportRectifyDetail: 'report/rectify/detail', //运政管理 - getOperaTional:'vehicle', - getSpecificVehicle:'vehicle/specific', - getHouseholds:'vehicle/business', - //道路管理 - getRoadway:'road', -//桥梁管理 -getBridge:'bridge', -//工程数据 -getProject:'project', - -//道路统计 -getBgroadstatistics:"build/road_state", - -//治超监测点处理数据 -getzhichaomanager:'manage/overspeed/processed', - -//获取治超详情数据 -getzhichaodetail:'/manage/overspeed' + getOperaTional: 'vehicle', + getSpecificVehicle: 'vehicle/specific', + getHouseholds: 'vehicle/business', + getRoadway: 'road', + //桥梁管理 + getBridge: 'bridge', + //工程数据 + getProject: 'project', + + //道路统计 + getBgroadstatistics: "build/road_state", + + //治超监测点处理数据 + getzhichaomanager: 'manage/overspeed/processed', + + //获取治超详情数据 + getzhichaodetail: '/manage/overspeed' }; diff --git a/web/package-lock.json b/web/package-lock.json index ee58156f..d9bc70d5 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -5114,6 +5114,14 @@ "entities": "^2.0.0" } }, + "dom7": { + "version": "4.0.4", + "resolved": "http://npm.anxinyun.cn/dom7/-/dom7-4.0.4.tgz", + "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==", + "requires": { + "ssr-window": "^4.0.0" + } + }, "domelementtype": { "version": "2.3.0", "resolved": "http://npm.anxinyun.cn/domelementtype/-/domelementtype-2.3.0.tgz", @@ -10789,6 +10797,11 @@ "tweetnacl": "~0.14.0" } }, + "ssr-window": { + "version": "4.0.2", + "resolved": "http://npm.anxinyun.cn/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "stack-trace": { "version": "0.0.10", "resolved": "http://npm.anxinyun.cn/stack-trace/-/stack-trace-0.0.10.tgz", @@ -11053,6 +11066,15 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "swiper": { + "version": "8.3.1", + "resolved": "http://npm.anxinyun.cn/swiper/-/swiper-8.3.1.tgz", + "integrity": "sha512-oASYsulsERlbQVTZ8FjlTDJSN4YZwhp+AkvepOj8EOhgpvxzKoMpWpBPrk7ypkMioQUx6x2NPvkRU0Qv9mpS0A==", + "requires": { + "dom7": "^4.0.4", + "ssr-window": "^4.0.2" + } + }, "swr": { "version": "1.3.0", "resolved": "http://npm.anxinyun.cn/swr/-/swr-1.3.0.tgz", diff --git a/web/package.json b/web/package.json index 2f139cba..d4a3bb2c 100644 --- a/web/package.json +++ b/web/package.json @@ -88,6 +88,7 @@ "react-router-breadcrumbs-hoc": "^4.0.1", "react-sortable-hoc": "^2.0.0", "superagent": "^6.1.0", + "swiper": "^8.3.1", "uuid": "^8.3.1", "webpack-dev-server": "^3.11.2", "xlsx": "^0.16.9"