diff --git a/web/client/assets/color.less b/web/client/assets/color.less index ff4253c6..450501f1 100644 --- a/web/client/assets/color.less +++ b/web/client/assets/color.less @@ -174,7 +174,7 @@ button::-moz-focus-inner, [type='submit']::-moz-focus-inner {border-style: none;} fieldset {border: 0;} legend {color: inherit;} -mark {background-color: color(~`colorPalette("@{skeleton-to-color}", 1)`);} +mark {background-color: #feffe6;} ::selection {color: #fff;background: @primary-color;} .anticon {color: inherit;} .ant-fade-enter, .ant-fade-appear {animation-fill-mode: both;} @@ -1702,31 +1702,31 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;} .ant-tag-checkable:active, .ant-tag-checkable-checked {color: #fff;} .ant-tag-checkable-checked {background-color: @primary-color;} .ant-tag-checkable:active {background-color: color(~`colorPalette("@{primary-color}", 7)`);} -.ant-tag-pink {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;} +.ant-tag-pink {color: #c41d7f;background: color(~`colorPalette("@{modal-footer-border-color-split}", 1)`);border-color: #ffadd2;} .ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;} -.ant-tag-magenta {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;} +.ant-tag-magenta {color: #c41d7f;background: color(~`colorPalette("@{modal-footer-border-color-split}", 1)`);border-color: #ffadd2;} .ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;} .ant-tag-red {color: #cf1322;background: #fff1f0;border-color: #ffa39e;} .ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;} .ant-tag-volcano {color: #d4380d;background: #fff2e8;border-color: #ffbb96;} .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;} -.ant-tag-orange {color: #d46b08;background: color(~`colorPalette("@{select-background}", 3)`);border-color: #ffd591;} +.ant-tag-orange {color: #d46b08;background: #fff7e6;border-color: #ffd591;} .ant-tag-orange-inverse {color: #fff;background: #fa8c16;border-color: #fa8c16;} -.ant-tag-yellow {color: #d4b106;background: color(~`colorPalette("@{skeleton-to-color}", 1)`);border-color: #fffb8f;} +.ant-tag-yellow {color: #d4b106;background: #feffe6;border-color: #fffb8f;} .ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;} -.ant-tag-gold {color: #d48806;background: #fffbe6;border-color: #ffe58f;} +.ant-tag-gold {color: #d48806;background: color(~`colorPalette("@{skeleton-color}", 1)`);border-color: #ffe58f;} .ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;} -.ant-tag-cyan {color: #08979c;background: color(~`colorPalette("@{comment-author-time-color}", 3)`);border-color: #87e8de;} +.ant-tag-cyan {color: #08979c;background: #e6fffb;border-color: #87e8de;} .ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;} -.ant-tag-lime {color: #7cb305;background: color(~`colorPalette("@{item-active-bg}", 1)`);border-color: #eaff8f;} +.ant-tag-lime {color: #7cb305;background: #fcffe6;border-color: #eaff8f;} .ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;} .ant-tag-green {color: #389e0d;background: #f6ffed;border-color: #b7eb8f;} .ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;} .ant-tag-blue {color: #096dd9;background: #e6f7ff;border-color: #91d5ff;} .ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;} -.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{modal-content-bg}", 1)`);border-color: #adc6ff;} +.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{success-color-deprecated-border}", 1)`);border-color: #adc6ff;} .ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;} -.ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{disabled-color}", 2)`);border-color: #d3adf7;} +.ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{progress-steps-item-bg}", 3)`);border-color: #d3adf7;} .ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;} .ant-tag-success {color: #52c41a;background: @success-color-deprecated-bg;border-color: @success-color-deprecated-border;} .ant-tag-processing {color: @primary-color;background: @info-color-deprecated-bg;border-color: @info-color-deprecated-border;} diff --git a/web/client/assets/images/leadership/di.png b/web/client/assets/images/leadership/di.png new file mode 100644 index 00000000..82da9cd7 Binary files /dev/null and b/web/client/assets/images/leadership/di.png differ diff --git a/web/client/assets/images/leadership/jiejue.png b/web/client/assets/images/leadership/jiejue.png new file mode 100644 index 00000000..fe38485c Binary files /dev/null and b/web/client/assets/images/leadership/jiejue.png differ diff --git a/web/client/assets/images/leadership/mingri.png b/web/client/assets/images/leadership/mingri.png new file mode 100644 index 00000000..3699687a Binary files /dev/null and b/web/client/assets/images/leadership/mingri.png differ diff --git a/web/client/assets/images/leadership/pingshi.png b/web/client/assets/images/leadership/pingshi.png new file mode 100644 index 00000000..9fb3a859 Binary files /dev/null and b/web/client/assets/images/leadership/pingshi.png differ diff --git a/web/client/assets/images/leadership/road.png b/web/client/assets/images/leadership/road.png new file mode 100644 index 00000000..3ac9c233 Binary files /dev/null and b/web/client/assets/images/leadership/road.png differ diff --git a/web/client/assets/images/leadership/shiyantu.png b/web/client/assets/images/leadership/shiyantu.png new file mode 100644 index 00000000..a8ed7993 Binary files /dev/null and b/web/client/assets/images/leadership/shiyantu.png differ diff --git a/web/client/assets/images/leadership/zibiaoti.png b/web/client/assets/images/leadership/zibiaoti.png new file mode 100644 index 00000000..333214a9 Binary files /dev/null and b/web/client/assets/images/leadership/zibiaoti.png differ diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js index b9d6d319..540c3f39 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js @@ -1,12 +1,27 @@ import React from 'react' import Module from '../../../public/module' +import Centerleftecharts from "./echarts/centerleftecharts" +import Bottomlunbo from './lunbo/bottomlunbo' +import Leftlunbo from './lunbo/toplunbo' const Leftbottom = () => { const style = { height: "28%", marginTop: "2%" } return ( <> - - + +
+
+ +
+
+
+ +
+
+ +
+
+
) diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/echarts/centerleftecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/echarts/centerleftecharts.js new file mode 100644 index 00000000..a041ffce --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/echarts/centerleftecharts.js @@ -0,0 +1,203 @@ +import React, { useEffect, useRef } from 'react' +import * as echarts from 'echarts'; + +const Leftbottomecharts = () => { + const chartRef = useRef(null); + useEffect(() => { + var chartInstance = echarts.init(chartRef.current); + var colorArray = [ + { + top: "#1978E5", //黄 + bottom: "#10274B", + }, + { + top: "#C31E00", //绿 + bottom: "#10274B", + }, + { + top: "#00B5E0 ", //蓝 + bottom: "#10274B", + }, + { + top: "#19E5D6", //深蓝 + bottom: "#10274B", + }, + // { + // top: "#b250ff", //粉 + // bottom: "rgba(11,42,84,.3)", + // }, + ]; + const option = { + tooltip: { + show: true, + formatter: "{b}:{c}", + }, + grid: { + left: "5%", + top: "12%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + + xAxis: { + type: "value", + show: true, + position: "bottom", + axisTick: { + show: true, + lineStyle: { + color: "rgba(176,215,255,0.25)", + // type: "dashed", + }, + }, + axisLine: { + show: false, + lineStyle: { + color: "rgba(216,240,255,0.8000)", + }, + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(176,215,255,0.25)", + type: "dashed", + }, + }, + }, + yAxis: [ + { + type: "category", + axisTick: { + show: false, + alignWithLabel: false, + length: 5, + }, + splitLine: { + //网格线 + show: false, + }, + inverse: "true", //排序 + // nameTextStyle: { + // color: ["rgba(216,240,255,0.8)"], + // }, + axisLine: { + // show: true, + lineStyle: { + color: "rgba(216,240,255,0.8000)", + width: 2, + }, + }, + data: ["客运车", "危险货运", "出租车", "公交"], + }, + ], + series: [ + { + type: "bar", + barWidth: 10, + barGap: "100%", + // zlevel: 1, + barCategoryGap: "50%", + color: "#042B7F", + data: [150, 150, 150, 150], + tooltip: { + show: false, + }, + }, + { + name: "能耗值", + type: "bar", + // zlevel: 2, + barWidth: 10, + barGap: "-100%", + barCategoryGap: "50%", + data: [60, 132, 89, 134], + markPoint: { + Symbol: "",/* 可以通过’image: *///url’设置为图片，其中url为图片的链接 + data: [{ type: "max", name: "最大值" }], + }, + itemStyle: { + normal: { + show: true, + color: function (params) { + let num = colorArray.length; + return { + type: "linear", + colorStops: [ + { + offset: 0, + color: colorArray[params.dataIndex % num].bottom, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].bottom, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].bottom, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].bottom, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].bottom, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].bottom, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + ], + globalCoord: false, + }; + }, + barBorderRadius: 70, + borderWidth: 0, + borderColor: "#333", + }, + }, + }, + ], + }; + chartInstance.setOption(option); + window.onresize = function () { + chartInstance.resize(); + } + }, []); + + + return ( + <> +
+ + ); +} + +export default Leftbottomecharts \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/bottomlunbo.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/bottomlunbo.js new file mode 100644 index 00000000..b30fb333 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/bottomlunbo.js @@ -0,0 +1,59 @@ +import React, { useState, useEffect } from 'react' +import Lunbotop from "./lunbo" + +const Bottomlunbo = () => { + const [list, setList] = useState([ + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + ]) + const renderBody = () => { + return ( +
+ { + list.map((item, index) => { + return
{item.name}
+ }) + } +
+ ) + } + return ( + <> +
+
+ 业户信息: +
+
+
+ +

出租车

+
+
+ +
+ + ) +} +export default Bottomlunbo \ 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 new file mode 100644 index 00000000..6bf6d406 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js @@ -0,0 +1,180 @@ +'use strict' +import React, { Component } from 'react'; +// import { Col, Row, Tag, Tooltip } from '@douyinfe/semi-ui'; +import { Col, Row, Tag, Toolip } from 'antd'; +import './style.less'; +export default class AutoRollComponent extends Component { + + constructor(props) { + super(props); + this.scrollElem = null; + this.stopscroll = false; + this.preTop = 0; + this.cloneEle = null; + this.currentTop = 0; + this.marqueesHeight = 0; + this.interval = null; + } + + marque = (height) => { + try { + this.scrollElem = document.getElementById(this.props.divId); + this.marqueesHeight = height; + if (this.scrollElem) { + this.scrollElem.style.height = this.marqueesHeight; + this.scrollElem.style.overflow = 'hidden'; + } + + if (!this.props.closeroll) { + this.repeat() + } + } catch (e) { console.log(e) } + } + + + repeat = () => { + this.scrollElem.scrollTop = 0; + + this.interval = setInterval(() => { + if (this.stopscroll) return; + this.currentTop = this.currentTop + 1; + this.preTop = this.scrollElem.scrollTop; + this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; + if (this.preTop === this.scrollElem.scrollTop) { + this.scrollElem.scrollTop = this.marqueesHeight; + this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; + } + }, 80); + } + + + componentWillUnmount() { + clearInterval(this.interval); + } + + componentDidMount() { + this.marque(10); + } + + onMouseOver = () => { + this.stopscroll = true; + } + + onMouseOut = () => { + this.stopscroll = false; + } + + loadDataColumn = (c, index, q) => { + const { changeStyleCol, heads, spans, data, showWord, color, dataTextAlign, customColorBox, } = this.props; + if (c === changeStyleCol) { + if (color) { + {q.data[index]} + } else { + if (['时间'].indexOf(c) != -1) { + return {q.data[index]} + } + // if (c.indexOf("时间") == -1) { + // if (customColorBox) { + // return + // } + // if (q.data[index].length > showWord) { + // return {q.data[index].substring(0, showWord) + '...'} + // } else { + // return {q.data[index]} + // } + // } + } + + } else { + if (c.indexOf("时间") == -1) + if (q.data[index].length > showWord) { + return {q.data[index].substring(0, showWord) + '...'} + } + return {q.data[index]} + } + + // c === changeStyleCol ? + // color ? + // {q.data[index]} + // : q.levelbg ? + // q.isSiteAlermListMock ? 已处理 : + // {q.data[index]} + // : {q.data[index]} + + + // : ['时间'].indexOf(c) != -1 ? !customColorBox ? {q.data[index]} : + // + + // : c.indexOf("时间") == -1 && q.data[index].length > showWord ? + // {q.data[index].substring(0, showWord) + '...'} + // : {q.data[index]} + } + + getContent = () => { + const { changeStyleCol, heads, spans, data, showWord, color, dataTextAlign, customColorBox, } = this.props; + let result =
; + if (data) { + result = data.map((q, idx) => { + return ( +
+ + {q.data[1] == -1 ? null : heads.map((c, index) => { + let extraStyle = {} + if (q.isSiteAlermListMock && c == "状态") { + extraStyle = { color: "green" } + } + + return + { + this.loadDataColumn(c, index, q) + } + + }) + } + +
+ ) + }) + } else { + result =
+ +
+ } + return result; + } + + render() { + + const { heads, spans, divId, divHeight, content, color, titleLeft, containerStyle = {} } = this.props; + return ( +
+ {heads ? + + {heads.map((c, index) => { + return {c} + }) + } + + : ''} +
+
+ {content ? content : ''} + {this.getContent()} +
+
+
+ ) + } +} diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/style.less b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/style.less new file mode 100644 index 00000000..2ad0bd00 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/style.less @@ -0,0 +1,6 @@ +.hidden-scroll-bar-y{ + overflow-y: scroll !important; + scrollbar-width: none !important; +} + +.hidden-scroll-bar-y::-webkit-scrollbar { width: 0 !important } \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/toplunbo.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/toplunbo.js new file mode 100644 index 00000000..910a3937 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/toplunbo.js @@ -0,0 +1,57 @@ +import React, { useState, useEffect } from 'react' +import Lunbotop from "./lunbo" + +const Toplunbo = () => { + const [list, setList] = useState([ + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + { name: "南昌宁昌物流运输有限公司" }, + ]) + const renderBody = () => { + return ( +
+ { + list.map((item, index) => { + return
{item.name}
+ }) + } +
+ ) + } + return ( + <> +
+
+
+ +

危险货运

+
+
+ +
+ + ) +} +export default Toplunbo \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left.js b/web/client/src/sections/quanju/containers/footer/leadership/left.js index 5b6c1649..ab464e2b 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left.js @@ -1,6 +1,6 @@ import React from 'react' import Lefttop from './left/left-top' -import Leftcenter from "./left/left-center" +// import Leftcenter from "./left/left-center" import Leftbottom from './left/left-bottom' const Left = () => { @@ -8,7 +8,7 @@ const Left = () => { <>
- +
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 bfec0134..906278be 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 @@ -3,67 +3,139 @@ import * as echarts from 'echarts'; const Leftbottomecharts = () => { const chartRef = useRef(null); - useEffect(() => { - let chartInstance = echarts.init(chartRef.current); + var chartInstance = echarts.init(chartRef.current); const option = { - - xAxis: { - type: "category", - data: ["街道1", "街道2", "街道3", "街道4", "街道5", "街道6", "街道7"], + title: { }, - yAxis: [ - { type: "value" }, + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, + }, + }, + legend: { + icon: "rect", + itemWidth: 14, + itemHeight: 5, + itemGap: 13, + data: ["移动"], + right: "4%", + // textStyle: { + // fontSize: 12, + // color: "#F1F1F3", + // }, + }, + grid: { + top: "18%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ { - type: "value", - nameTextStyle: { - color: "#ccc", + type: "category", + boundaryGap: true, + axisTick: { + show: false, }, - splitNumber: 5, - splitLine: { - show: true, + axisLine: { lineStyle: { - type: "dashed", - width: 1, - color: ["#ccc", "#ccc"], + color: "rgba(176,215,255,0.4)", }, }, - axisLabel: { + data: [ + "13:00", + "13:05", + "13:10", + "13:15", + ], + normal: { + lineStyle: { + color: "red"//折线的颜色 + } + } + }, + ], + yAxis: [ + { + // type: "value", + // show: true, + // type: "value", + splitLine: { show: true, - textStyle: { - fontSize: 12, - }, + lineStyle: { + color: "rgba(176,215,255,0.2500)", + type: "dashed" + } + }, //去除网格线 + // nameTextStyle: { + // color: "#abb8ce", + // }, + // axisLabel: { + // color: "#abb8ce", + // }, + axisTick: { + //y轴刻度线 + show: false, + }, + axisLine: { + // y轴 + show: false, }, }, ], - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, - textStyle: { - color: "#fff", - align: "left", - fontSize: 14, - }, - backgroundColor: "rgba(0,0,0,0.8)", - }, series: [ { - name: "完成率", - data: [50, 130, 124, 18, 35, 47, 160], - yAxisIndex: 1, + // name: "移动", type: "line", smooth: true, + symbol: "circle", + symbolSize: 5, + showSymbol: false, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(176,215,255,0.2500)", + }, + { + offset: 0.8, + color: "rgba(0,150,255,0)", + }, + ], + false + ), + shadowBlur: 10, + }, + }, + data: [220, 182, 191, 134], }, ], }; chartInstance.setOption(option); + window.addEventListener('resize', function () { + chartInstance.resize(); + }) }, []); + return ( <> -
+
+

公里数Km

+
); } diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js index 1164dab6..8fbcd053 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js @@ -6,7 +6,7 @@ const Leftbottom = () => { const style = { height: "28%", marginTop: "5%" } return ( <> - + 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 9beb1113..052e59c4 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 @@ -1,13 +1,95 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import Module from '../../../public/module' +import Lunbo from "../centerleft/lunbo/lunbo" +// import "./left.less" const Leftcenter = () => { const style = { height: "30%", marginTop: "5%" } + // const hualun = "auto" + const [num, setNum] = useState(1); + const [tu, setTu] = useState(""); + const [name, setName] = useState(""); + 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 + 1); + setName(item.name) + // console.log(list); + }}>{item.name}
    • + // {/*
    */} + //
    + ) + + }) + } +
    + ) + } return ( <> - +
    + {/*

    {title || []}

    */} + + 主要路段拥堵情况分析 + +
    +
    +
    + { + list.map((item, index) => { + return index + 1 == num ? +
    + +

    {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 f879054b..c486d189 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,12 +1,47 @@ import React from 'react' import Module from '../../../public/module' +import Leftcenter from './left-center' const Lefttop = () => { - const style = { height: "25%", height: "35%" } + const style = { height: "68%" } return ( <> - {/*
    */} +
    +
    +
    + +

    路况

    +

    畅通

    +
    +
    + +

    平均时速

    +

    55.2Km/h

    +
    +
    + +

    预测明日

    +

    55.2Km/h

    +
    +
    +
    + +
    +
    +
    + +
    +     ) 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 new file mode 100644 index 00000000..b5333c1a --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/left.less @@ -0,0 +1,3 @@ +li{ + list-style-type:none +} \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo.js b/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo.js new file mode 100644 index 00000000..ab086a11 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo.js @@ -0,0 +1,139 @@ +'use strict' +import React, { Component } from 'react'; +import { Row, Col } from 'antd'; + +export default class AutoRollComponent extends Component { + + constructor(props) { + super(props); + this.scrollElem = null; + this.stopscroll = false; + this.preTop = 0; + this.cloneEle = null; + this.currentTop = 0; + this.marqueesHeight = 0; + this.interval = null; + this.state = { + enabledScroll: false + } + } + + get enabledScroll() { + let scrollElem = document.getElementById(this.props.divId); + let fatherElem = scrollElem?.parentNode || null; + if (scrollElem && fatherElem) { + return scrollElem.scrollHeight > fatherElem.scrollHeight + } + + return false; + } + + + marque = (height) => { + try { + this.scrollElem = document.getElementById(this.props.divId); + this.marqueesHeight = height; + if (this.scrollElem) { + this.scrollElem.style.height = this.marqueesHeight; + this.scrollElem.style.overflow = 'hidden'; + } + this.repeat(); + } catch (e) { console.log(e) } + } + + + repeat = () => { + this.scrollElem.scrollTop = 0; + let offset = 1.5 + + this.interval = setInterval(() => { + if (this.stopscroll) return; + this.currentTop = this.currentTop + offset; + this.preTop = this.scrollElem.scrollTop; + this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; + // console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`); + if (this.preTop === this.scrollElem.scrollTop) { + this.scrollElem.scrollTop = this.marqueesHeight; + this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; + } + }, 40); + } + + + componentWillUnmount() { + clearInterval(this.interval); + } + + componentWillReceiveProps(nextProps) { + requestAnimationFrame(() => { + if (this.enabledScroll) { + if (!this.state.enabledScroll) { + this.setState({ enabledScroll: true }, () => { + this.marque(10) + }) + } + + } + }) + } + + componentDidMount() { + if (this.enabledScroll) { + this.setState({ enabledScroll: true }, () => { + this.marque(10) + }) + } + } + + onMouseOver = () => { + this.stopscroll = true; + } + + onMouseOut = () => { + this.stopscroll = false; + } + + + render() { + + const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; + + return ( +
    + { + heads ? + + {heads.map((c, index) => { + return {c} + }) + } + : '' + } + +
    +
    + {content ? content : ''} + {this.state.enabledScroll && content ? content : ''} + { + data ? + data.map((q, idx) => { + return ( +
    + + {heads.map((c, index) => { + return + {index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]} + }) + } + +
    + ) + }) : '' + } +
    +
    +
    +
    + ) + } +} \ 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 1b534859..470a4c58 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 @@ -1,12 +1,80 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import Module from '../../../public/module' +import Lun from "./lunbo" +import "./left.less" const Rightbottom = () => { const style = { height: "28%", marginTop: "4%" } + 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: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }]) + const renderBody = () => { + return ( + //
    { + // lists.map((item, index) => { + // return (
    + //
    + //
  • { + // }}>{item.name}
    • + //
    + //
    ) + + // }) + // } + //
    +
    + {list.map((item, index) => { + return
  • { + setBeijing(item.name) + console.log(beijing); + }}> +
    {item.name}
    +
    {item.chaoxian}
    +
    {item.penalty}
    +
    {item.days}
    • + }) + + } +
    + ) + } return ( <> - - + +
    + + 已处理192件 +
    +
    +

    车牌号

    +

    超限

    +

    处罚

    +

    日期

    +
    +     ) diff --git a/web/client/src/sections/quanju/containers/public/left.less b/web/client/src/sections/quanju/containers/public/left.less new file mode 100644 index 00000000..a675a58d --- /dev/null +++ b/web/client/src/sections/quanju/containers/public/left.less @@ -0,0 +1,25 @@ +#scroll-2::-webkit-scrollbar{ + width:4px; + height:4px; +} +#scroll-2::-webkit-scrollbar-track{ + background: #f6f6f6; + border-radius:2px; +} +#scroll-2::-webkit-scrollbar-thumb{ + background: #aaa; + border-radius:2px; +} +#scroll-2::-webkit-scrollbar-thumb:hover{ + background: #747474; +} +#scroll-2::-webkit-scrollbar-corner{ + background: #f6f6f6; +} +#screen-slope-midde-top-jiangxi{ + & > div > div{ + &:first-child{ + margin-bottom: 1px; + } + } + } \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/public/lunbo.js b/web/client/src/sections/quanju/containers/public/lunbo.js new file mode 100644 index 00000000..46735f50 --- /dev/null +++ b/web/client/src/sections/quanju/containers/public/lunbo.js @@ -0,0 +1,139 @@ +'use strict' +import React, { Component } from 'react'; +import { Row, Col } from 'antd'; + +export default class AutoRollComponent extends Component { + + constructor(props) { + super(props); + this.scrollElem = null; + this.stopscroll = false; + this.preTop = 0; + this.cloneEle = null; + this.currentTop = 0; + this.marqueesHeight = 0; + this.interval = null; + this.state = { + enabledScroll: false + } + } + + get enabledScroll() { + let scrollElem = document.getElementById(this.props.divId); + let fatherElem = scrollElem?.parentNode || null; + if (scrollElem && fatherElem) { + return scrollElem.scrollHeight > fatherElem.scrollHeight + } + + return false; + } + + + marque = (height) => { + try { + this.scrollElem = document.getElementById(this.props.divId); + this.marqueesHeight = height; + if (this.scrollElem) { + this.scrollElem.style.height = this.marqueesHeight; + this.scrollElem.style.overflow = 'hidden'; + } + this.repeat(); + } catch (e) { console.log(e) } + } + + + repeat = () => { + this.scrollElem.scrollTop = 0; + let offset = 1.5 + + this.interval = setInterval(() => { + if (this.stopscroll) return; + this.currentTop = this.currentTop + offset; + this.preTop = this.scrollElem.scrollTop; + this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; + // console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`); + if (this.preTop === this.scrollElem.scrollTop) { + this.scrollElem.scrollTop = this.marqueesHeight; + this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; + } + }, 300000); + } + + + componentWillUnmount() { + clearInterval(this.interval); + } + + componentWillReceiveProps(nextProps) { + requestAnimationFrame(() => { + if (this.enabledScroll) { + if (!this.state.enabledScroll) { + this.setState({ enabledScroll: true }, () => { + this.marque(10) + }) + } + + } + }) + } + + componentDidMount() { + if (this.enabledScroll) { + this.setState({ enabledScroll: true }, () => { + this.marque(10) + }) + } + } + + onMouseOver = () => { + this.stopscroll = true; + } + + onMouseOut = () => { + this.stopscroll = false; + } + + + render() { + + const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; + + return ( +
    + { + heads ? + + {heads.map((c, index) => { + return {c} + }) + } + : '' + } + +
    +
    + {content ? content : ''} + {this.state.enabledScroll && content ? content : ''} + { + data ? + data.map((q, idx) => { + return ( +
    + + {heads.map((c, index) => { + return + {index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]} + }) + } + +
    + ) + }) : '' + } +
    +
    +
    +
    + ) + } +} \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/public/module.js b/web/client/src/sections/quanju/containers/public/module.js index 53c833f1..8a3af285 100644 --- a/web/client/src/sections/quanju/containers/public/module.js +++ b/web/client/src/sections/quanju/containers/public/module.js @@ -1,8 +1,9 @@ import React from 'react' import "./font.css" +import "./left.less" const Module = (props) => { - const { style, children, title } = props + const { style, children, title, hualun } = props return ( <>
    @@ -12,7 +13,7 @@ const Module = (props) => { {title || []}
    -
    +
    {children}
    diff --git a/web/log/development.txt b/web/log/development.txt index 95fc9315..f5f2f0ea 100644 --- a/web/log/development.txt +++ b/web/log/development.txt @@ -3415,3 +3415,65 @@ 2022-07-18 17:40:02.984 - info: [Router] Inject api: attachment/index 2022-07-19 09:38:20.086 - debug: [FS-LOGGER] Init. 2022-07-19 09:38:20.998 - info: [Router] Inject api: attachment/index +2022-07-21 15:22:04.942 - debug: [FS-LOGGER] Init. +2022-07-21 15:22:05.542 - info: [Router] Inject api: attachment/index +2022-07-21 17:03:00.480 - debug: [FS-LOGGER] Init. +2022-07-21 17:03:01.177 - info: [Router] Inject api: attachment/index +2022-07-21 18:12:39.625 - error: [FS-ERRHD] +{ + message: 'Error: connect ETIMEDOUT 10.8.30.157:8439', + name: 'RequestError', + cause: { + errno: -4039, + code: 'ETIMEDOUT', + syscall: 'connect', + address: '10.8.30.157', + port: 8439 + }, + error: { '$ref': '$["cause"]' }, + options: { + jar: false, + url: 'http://10.8.30.157:8439/enterprises/undefined/members?token=215ed57a-8244-4523-b2ed-5a6b12b51711', + headers: { + host: '10.8.30.157:8439', + connection: 'keep-alive', + 'sec-ch-ua': '" Not;A Brand";v="99", "Microsoft Edge";v="103", "Chromium";v="103"', + expires: '-1', + 'cache-control': 'no-cache,no-store,must-revalidate,max-age=-1,private', + 'x-requested-with': 'XMLHttpRequest', + 'sec-ch-ua-mobile': '?0', + 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62', + 'sec-ch-ua-platform': '"Windows"', + accept: '*/*', + 'sec-fetch-site': 'same-origin', + 'sec-fetch-mode': 'cors', + 'sec-fetch-dest': 'empty', + referer: 'http://localhost:5000/quanju', + 'accept-encoding': 'gzip, deflate, br', + 'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6' + }, + encoding: null, + followRedirect: true, + method: 'GET', + body: '[object Object]', + simple: false, + resolveWithFullResponse: true, + callback: [Function: RP$callback], + transform: undefined, + transform2xxOnly: false + }, + response: undefined, + stack: 'RequestError: Error: connect ETIMEDOUT 10.8.30.157:8439\n' + + ' at new RequestError (F:\\4hao\\Highways4Good\\web\\node_modules\\request-promise-core\\lib\\errors.js:14:15)\n' + + ' at Request.plumbing.callback (F:\\4hao\\Highways4Good\\web\\node_modules\\request-promise-core\\lib\\plumbing.js:87:29)\n' + + ' at Request.RP$callback [as _callback] (F:\\4hao\\Highways4Good\\web\\node_modules\\request-promise-core\\lib\\plumbing.js:46:31)\n' + + ' at self.callback (F:\\4hao\\Highways4Good\\web\\node_modules\\request\\request.js:185:22)\n' + + ' at Request.emit (events.js:315:20)\n' + + ' at Request.onRequestError (F:\\4hao\\Highways4Good\\web\\node_modules\\request\\request.js:877:8)\n' + + ' at ClientRequest.emit (events.js:315:20)\n' + + ' at Socket.socketErrorListener (_http_client.js:461:9)\n' + + ' at Socket.emit (events.js:315:20)\n' + + ' at emitErrorNT (internal/streams/destroy.js:96:8)\n' + + ' at emitErrorCloseNT (internal/streams/destroy.js:68:3)\n' + + ' at processTicksAndRejections (internal/process/task_queues.js:84:21)' +}