diff --git a/src/components/CommandPlatform/left/Congestion.js b/src/components/CommandPlatform/left/Congestion.js new file mode 100644 index 0000000..f42928e --- /dev/null +++ b/src/components/CommandPlatform/left/Congestion.js @@ -0,0 +1,129 @@ +import React from 'react'; +import styles from './Congestion.less'; +const up1 = require('@/assets/arrow-up.png'); // 红升 +const down2 = require('@/assets/arrow-down.png'); // 绿降 + + +class Congestion extends React.PureComponent { + constructor(props) { + super(props); + } + + + render() { + return ( +
+
拥堵预警
+
+
拥堵路段数
+
+
+ 4 +
+
+ 0 +
+
+ 3 +
+
+
起
+
+
同比
+
环比
+
+
+
+
10
+
+ 12
+
+
+
+
+
+
+
+
+
+
+
+
246
+
一级
+
+
+
+
同比
+
环比
+
+
+
+
10
+
19 +
+
+
+
+
+
+
+
+
+ +
+
+
+
246
+
二级
+
+
+
+
同比
+
环比
+
+
+
+
10
+
11 +
+
+
+
+
+
+
+
+
+ +
+
+
+
246
+
三级
+
+
+
+
同比
+
环比
+
+
+
+
10
+
0
+
+
+
+
+
+
+
+
+ +
+
+
+ ); + } +} + +export default Congestion; diff --git a/src/components/CommandPlatform/left/Congestion.less b/src/components/CommandPlatform/left/Congestion.less new file mode 100644 index 0000000..9955fbe --- /dev/null +++ b/src/components/CommandPlatform/left/Congestion.less @@ -0,0 +1,118 @@ +.congestion { + width: 100%; + + .tit { + width: 100%; + background: url(../../../assets/CommandPlatform/tit.png); + background-size: 100% 100%; + background-repeat:no-repeat; + height: 52px; + padding-left: 128px; + margin-bottom: 28px; + } + + + + .containerTop { + width: 100%; + height: 58px; + margin-bottom: 24px; + display: flex; + + .interval { + margin-bottom: 20px; + } + + .top1 { + margin: 0 18px 0 24px; + line-height: 58px; + } + + .top2 { + margin-right: 10px; + display: flex; + + .num { + width: 48px; + height: 58px; + line-height: 58px; + text-align: center; + font-size: 34px; + border: 1px solid lime; + margin-right: 12px; + } + + } + + .num:last-child { + margin-right: 0; + } + + .top3 { + margin-right: 28px; + line-height: 58px; + } + + .top4 { + margin-right: 18px; + } + + .top5 { + display: flex; + } + + .top5>div:nth-child(1) { + margin-right: 10px; + text-align: right; + } + } + + .containerBottom { + width: 100%; + display: flex; + justify-content: space-between; + + &>div { + width: 142px; + + .num { + width: 100%; + height: 62px; + text-align: center; + padding-bottom: 10px; + margin-bottom: 6px; + + &>div:nth-child(1) { + font-size: 24px; + } + + &>div:nth-child(2) { + font-size: 20px; + } + } + + .compare { + width: 100%; + display: flex; + justify-content: space-between; + padding: 0 24px; + + .compareFont { + color: rgba(250, 250, 250, 0.8); + + } + + .compareNum { + display: flex; + text-align: right; + + &>div:nth-child(1) { + margin-right: 8px; + } + } + } + } + + + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/left/CongestionTrend.js b/src/components/CommandPlatform/left/CongestionTrend.js new file mode 100644 index 0000000..94b28c6 --- /dev/null +++ b/src/components/CommandPlatform/left/CongestionTrend.js @@ -0,0 +1,222 @@ +import React from 'react'; +import ReactEcharts from 'echarts-for-react'; +import styles from './CongestionTrend.less'; + +import { getNowDate } from '../../../utils/util'; + const serverTime = getNowDate(); + +function echartsOption(xAxisData, seriesData) { + const option = { + grid: { + top: "24", + left: "0", + right: "10", + bottom: "0", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: false, + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + type: "value", + show: true, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series: [ + { + type: "line", + symbol: 'none', + lineStyle: { + width: 2, + color: "#00FFFC", + }, + label: { + show: false, + color: "#fff", + backgroundColor: "rgba(26, 208, 163, 1)", + padding: [4, 4, 2, 4] + }, + areaStyle: { + color: { + type: "linear", + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { + offset: 0, + color: "#031a45", + }, + { + offset: 1, + color: "#00FFFC", + }, + ], + global: false, // 缺省为 false + }, + }, + data: seriesData, + }, + ], + } + return option +} + +function echartsDay () { + let xAxisData = Array.from({length: 24}, (value, index) => index); + let seriesData = Array.from({length: 24}, (value, index) => index + 1); + let option = echartsOption(xAxisData, seriesData) + return option +} + +function echartsWeek () { + let xAxisData = Array.from({length: 7}, (value, index) => index + 1); + let seriesData = [1,333,4,524,66,8888,10984]; + let option = echartsOption(xAxisData, seriesData) + return option +} + +function echartsMonth () { + let xAxisData = Array.from({length: 30}, (value, index) => index + 1); + let seriesData = Array.from({length: 24}, (value, index) => index + 1); + let option = echartsOption(xAxisData, seriesData) + return option +} + +function echartsRegion () { + let xAxisData = Array.from({length: 30}, (value, index) => index + 1); + let seriesData = Array.from({length: 24}, (value, index) => index + 1); + let option = echartsOption(xAxisData, seriesData) + return option +} + + +class CongestionTrend extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + arr: [ + { name: '实施', num: 6.2 }, + { name: '历史7天', num: 6.2 }, + { name: '历史30天', num: 6.2 }, + { name: '主城区', num: 6.2 } + ], + tagNum: 0 + } + } + componentDidMount() { + } + + render() { + return ( +
+
+
拥堵指数趋势
+
+ { + this.state.arr.map((r, i) => ( +
{ + this.setState({ + tagNum: i + }) + }}>{r.name}
+ )) + } + +
+
+ { + this.state.tagNum == 0 && + + { + // console.log(e) + }} + option={echartsDay()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } + { + this.state.tagNum == 1 && + + { + // console.log(e) + }} + option={echartsWeek()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } + { + this.state.tagNum == 2 && + + { + // console.log(e) + }} + option={echartsMonth()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } + { + this.state.tagNum == 3 && + + { + // console.log(e) + }} + option={echartsRegion()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } +
+ ); + } +} + +export default CongestionTrend; diff --git a/src/components/CommandPlatform/left/CongestionTrend.less b/src/components/CommandPlatform/left/CongestionTrend.less new file mode 100644 index 0000000..77eea1d --- /dev/null +++ b/src/components/CommandPlatform/left/CongestionTrend.less @@ -0,0 +1,30 @@ +.congestionTrend { + width: 100%; + .tit { + font-size: 22px; + display: flex; + justify-content: space-between; + margin-bottom: 14px; + .tag { + + &>div { + font-size: 16px; + padding: 4px; + border: 1px solid rgb(30, 163, 194);; + margin-right: 4px; + text-align: center; + line-height: 16px; + display: inline-block; + cursor: pointer; + } + &>div:last-child{ + margin-right: 0; + } + .tagNum{ + background: rgb(30, 163, 194); + } + } + } + + +} \ No newline at end of file diff --git a/src/components/CommandPlatform/left/Pyramid.js b/src/components/CommandPlatform/left/Pyramid.js new file mode 100644 index 0000000..fab0b39 --- /dev/null +++ b/src/components/CommandPlatform/left/Pyramid.js @@ -0,0 +1,179 @@ +import React from 'react'; +import ReactEcharts from 'echarts-for-react'; +import styles from './SituationDispose.less'; + +function echartsOption(seriesData) { + let xAxisData = ['', '', '', ''] + + let loadingFunnel = { + title: '', + arrDataX: [], + arrDataY: [] + } + //title标示文字,标示线 + loadingFunnel.title = (text, top, left, color, fontstyle, fontFamily, fontsize) => { + return { + text: text, + top: top, + left: left, + textstyle: { + color: color, + fontstyle: fontstyle, + fontFamily: fontFamily, + fontsize: fontsize, + } + } + } + loadingFunnel.arrDataX = ['已接警', '已到场', '已反馈'] + loadingFunnel.arrDataY = [20, 30, 50] + + + const option = { + title: [ + loadingFunnel.title(loadingFunnel.arrDataX[0], '17%', '32%', '#fff', 'normal', 'sans-serif', '16'), + loadingFunnel.title(loadingFunnel.arrDataY[0], '17%', '42%', '#ffffff', 'normal', 'sans-serif', '16'), + loadingFunnel.title(loadingFunnel.arrDataX[1], '38%', '62%', '#4dc6ff', 'normal', 'sans-serif', '16'), + loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif', '16'), + loadingFunnel.title(loadingFunnel.arrDataX[2], '55%', '62%', '#eaad38', 'normal', 'sans-serif', '16'), + loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif', '16') + ], + tooltip: { + show: false, + formatter: function (params) { + console.log(params) + return params.marker + params.name + ':' + params.data.number + '万' + } + }, + grid: { + top: "19", + left: "10%", + bottom: "0", + // containLabel: true, + }, + legend: { + selectedMode: false, + right: 0, + textStyle: { + color: '#fff' + }, + }, + xAxis: [ + { + show: false, + type: "category", + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + show: false, + type: "value", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series: [{ + type: 'pictorialBar', + data: [ + { + name: loadingFunnel.arrDataX[0], + // z:100, + value: 20, + number: loadingFunnel.arrDataY[0], + symbolsize: ['130%', '90%'], + symbolPosition: 'center', + symboloffset: ['60%', '-250%'], + symbol: 'image://Funnel1.png', + }, + { + name: loadingFunnel.arrDataX[1], + // z: 90, + value: 40, + number: loadingFunnel.arrDataY[1], + symbolsize: ['200%', '40%'], + symbolPosition: 'center', + symboloffset: ['-22%', '-130%'], + symbol: 'image://Funnel2.png' + }, + { + name: loadingFunnel.arrDataX[2], + // z:80, + value: 60, + number: loadingFunnel.arrDataY[2], + symbolsize: ['280%', '35%'], + symbolPosition: 'center', symboloffset: + ['-60%','10%'], + symbol: 'image://Funnel3.png' + } + ] + }] + } + return option +} + +function echartsData() { + let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); + let option = echartsOption(seriesData) + return option +} + + +class SituationDispose extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + } + } + componentDidMount() { + } + + render() { + return ( +
+ + { + // console.log(e) + }} + option={echartsData()} + notMerge + lazyUpdate + style={{ width: '100%', height: 180 }} + /> + +
+ ); + } +} + +export default SituationDispose; diff --git a/src/components/CommandPlatform/left/Pyramid.less b/src/components/CommandPlatform/left/Pyramid.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/CommandPlatform/left/Rank.js b/src/components/CommandPlatform/left/Rank.js new file mode 100644 index 0000000..dbd542c --- /dev/null +++ b/src/components/CommandPlatform/left/Rank.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { Progress } from 'antd'; +import styles from './Rank.less'; + + +class Rank extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + arr: [ + { name: '阳光北大街', num: 6.2 }, + { name: '东风中路', num: 6.2 }, + { name: '七一中路', num: 6.2 }, + { name: '长城北大街', num: 6.2 }, + { name: '龙泉路', num: 6.2 } + ] + } + } + + + render() { + return ( +
+
拥堵路段排名
+ { + this.state.arr.map((r,i) => { + return (
+
+
+ + {r.name} +
+
+ {r.num} +
+
+
+ +
+
) + }) + } +
+ ); + } +} + +export default Rank; diff --git a/src/components/CommandPlatform/left/Rank.less b/src/components/CommandPlatform/left/Rank.less new file mode 100644 index 0000000..b252a74 --- /dev/null +++ b/src/components/CommandPlatform/left/Rank.less @@ -0,0 +1,56 @@ +.rank { + width: 100%; + + .tit { + font-size: 22px; + height: 38px; + margin-top: 32px; + } + + .progress { + margin-bottom: 24px; + + .font { + + display: flex; + justify-content: space-between; + + .left { + font-size: 18px; + } + + .right { + font-size: 18px; + } + } + + .progressLine { + height: 18px; + border: 1px solid rgb(32, 112, 163); + border-radius: 8px; + padding: 0 2px; + } + + :global(.ant-progress-inner) { + margin-top: -8px; + } + :global(.ant-progress-inner) { + background-color: rgb(32, 112, 163); + } + .progress0 :global(.ant-progress-bg) { + background-color: rgb(236, 21, 37) !important; + } + .progress1 :global(.ant-progress-bg) { + background-color: rgb(220, 86, 61) !important; + } + .progress2 :global(.ant-progress-bg) { + background-color: rgb(226, 157, 79) !important; + } + .progress3 :global(.ant-progress-bg) { + background-color: rgb(245, 209, 69) !important; + } + .progress4 :global(.ant-progress-bg) { + background-color: rgb(178, 200, 91) !important; + } + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/left/SituationDispose.js b/src/components/CommandPlatform/left/SituationDispose.js new file mode 100644 index 0000000..4de503e --- /dev/null +++ b/src/components/CommandPlatform/left/SituationDispose.js @@ -0,0 +1,140 @@ +import React from 'react'; +import ReactEcharts from 'echarts-for-react'; +import styles from './SituationDispose.less'; +import Pyramid from './Pyramid' +import SituationTable from './SituationTable' +function echartsOption(seriesData) { + let xAxisData = ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队', '七大队'] + const series = [ + { name: '拥堵', color: 'rgb(38,250,228)' }, + { name: '事故', color: 'rgb(230,127,58)' }, + { name: '其他', color: 'rgb(37,160,254)' }, + ].map((r, sid) => { + return { + name: r.name, + type: "bar", + symbol: 'none', + stack: 'total', + barWidth: '20', + itemStyle: { + color: r.color + }, + label: { + show: false, + color: "#fff", + backgroundColor: "rgba(135, 103, 62, 1)", + padding: [4, 4, 2, 4] + }, + data: [100, 302, 301] + }; + }); + + const option = { + grid: { + top: "24", + left: "0", + right: "10", + bottom: "0", + containLabel: true, + }, + legend: { + selectedMode: false, + right: 0, + textStyle: { + color: '#fff' + }, + }, + xAxis: [ + { + type: "category", + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + type: "value", + show: true, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series + } + return option +} + +function echartsData() { + let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); + let option = echartsOption(seriesData) + return option +} + + +class SituationDispose extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + arr: [ + { name: '实施', num: 6.2 }, + { name: '历史7天', num: 6.2 }, + { name: '历史30天', num: 6.2 }, + { name: '主城区', num: 6.2 } + ], + tagNum: 0 + } + } + componentDidMount() { + } + + render() { + return ( +
+
+
警情处置
+
+ + { + // console.log(e) + }} + option={echartsData()} + notMerge + lazyUpdate + style={{ width: '100%', height: 180, marginBottom: 28 }} + /> + +
+ ); + } +} + +export default SituationDispose; diff --git a/src/components/CommandPlatform/left/SituationDispose.less b/src/components/CommandPlatform/left/SituationDispose.less new file mode 100644 index 0000000..84ac798 --- /dev/null +++ b/src/components/CommandPlatform/left/SituationDispose.less @@ -0,0 +1,30 @@ +.situationDispose { + width: 100%; + .tit { + font-size: 22px; + display: flex; + justify-content: space-between; + margin:28px 0 14px 0; + .tag { + + &>div { + font-size: 16px; + padding: 4px; + border: 1px solid rgb(30, 163, 194);; + margin-right: 4px; + text-align: center; + line-height: 16px; + display: inline-block; + cursor: pointer; + } + &>div:last-child{ + margin-right: 0; + } + .tagNum{ + background: rgb(30, 163, 194); + } + } + } + + +} \ No newline at end of file diff --git a/src/components/CommandPlatform/left/SituationNum.js b/src/components/CommandPlatform/left/SituationNum.js new file mode 100644 index 0000000..ce2099c --- /dev/null +++ b/src/components/CommandPlatform/left/SituationNum.js @@ -0,0 +1,103 @@ +import React from 'react'; +import styles from './SituationNum.less'; + +const up1 = require('@/assets/arrow-up.png'); // 红升 +const down2 = require('@/assets/arrow-down.png'); // 绿降 + +class SituationNum extends React.PureComponent { + constructor(props) { + super(props); + } + + + render() { + return ( +
+
指挥调度
+
+
今日警情数
+
+
+ 4 +
+
+ 0 +
+
+ 3 +
+
+ 3 +
+
+
起
+
+
同比
+
环比
+
+
+
+
10
+
0
+
+
+
+
+
+
+
+
+
+
+
246
+
拥堵
+
+
+
+
同比
+
+
10
+
+
+
+
+
环比
+
+
0
+
+
+
+
+ +
+ +
+
+
246
+
事故
+
+
+
+
同比
+
+
10
+
+
+
+
+
环比
+
+
0
+
+
+
+
+ +
+
+
+ ); + } +} + +export default SituationNum; diff --git a/src/components/CommandPlatform/left/SituationNum.less b/src/components/CommandPlatform/left/SituationNum.less new file mode 100644 index 0000000..096b862 --- /dev/null +++ b/src/components/CommandPlatform/left/SituationNum.less @@ -0,0 +1,121 @@ +.situationNum { + width: 100%; + + .tit { + width: 100%; + background: lightblue; + height: 52px; + padding-left: 128px; + margin-bottom: 28px; + } + + + + .situationNumTop { + width: 100%; + height: 58px; + margin-bottom: 24px; + display: flex; + + .interval { + margin-bottom: 20px; + } + + .top1 { + margin: 0 18px 0 24px; + line-height: 58px; + } + + .top2 { + margin-right: 10px; + display: flex; + + .num { + width: 48px; + height: 58px; + line-height: 58px; + text-align: center; + font-size: 34px; + border: 1px solid lime; + margin-right: 12px; + } + + } + + .num:last-child { + margin-right: 0; + } + + .top3 { + margin-right: 28px; + line-height: 58px; + } + + .top4 { + margin-right: 18px; + } + + .top5 { + display: flex; + } + + .top5>div:nth-child(1) { + margin-right: 10px; + text-align: right; + } + } + + .situationNumBottom { + width: 100%; + display: flex; + justify-content: space-around; + + &>div { + width: 230px; + + .num { + width: 100%; + height: 62px; + text-align: center; + padding-bottom: 10px; + margin-bottom: 6px; + + &>div:nth-child(1) { + font-size: 24px; + } + + &>div:nth-child(2) { + font-size: 20px; + } + } + + .compare { + width: 100%; + display: flex; + justify-content: space-between; + padding: 0 24px; + + &>div { + display: flex; + justify-content: space-between; + } + + .compareFont { + color: rgba(250, 250, 250, 0.8); + margin-right: 18px; + } + + .compareNum { + display: flex; + text-align: right; + + &>div:nth-child(1) { + margin-right: 8px; + } + } + } + } + + + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/left/SituationTable.js b/src/components/CommandPlatform/left/SituationTable.js new file mode 100644 index 0000000..467f555 --- /dev/null +++ b/src/components/CommandPlatform/left/SituationTable.js @@ -0,0 +1,2005 @@ + +import React from 'react'; +import { Row, Col, Tabs, Select, DatePicker, message, Icon, Tooltip, Input } from 'antd'; +import { connect } from 'dva'; +import ReactEcharts from 'echarts-for-react'; +// import { getAlarmSituationEcharts1, getAlarmSituationEcharts2, getAlarmSituationEcharts3, getNewAlarmSituationEcharts1, get24TimePoliceCaseLine, get24TimePoliceCaseLine1 } from '../BDCharts/AlarmSituationEcharts'; +import HiNumberFlip from '../../common/HiNumberFlip'; +import styles from '../../BaoDing/AlarmSituation/AlarmSituation.less'; +import stylesSituationTable from './SituationTable.less'; +import TweenOne from 'rc-tween-one'; +import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin'; +import { NumberAnimate } from '../../common/NumberAnimate'; +import AlarmSituationItem from '../../BaoDing/AlarmSituation/AlarmSituationItem'; +import { scroll2, getNowDate } from '../../../utils/util'; +import PoliceCaseHotPop from '../../BaoDing/AlarmSituation/PoliceCaseHotPop'; +import *as service from '../../../services/AlarmSituationService' +import { getPropertiesValue } from '@/services/bdPoliceCaseService'; +import PoliceCaseListPop from "../../BaoDing/AlarmSituation/PoliceCaseListPop"; +import CaseDevicesList from "../../BaoDing/AlarmSituation/CaseDevicesList"; +import { addEchartsLayer, removeEchartsLayer, freshEchartsLayer } from '@/utils/addEcharts'; +import { getEnums } from '../../../services/AlarmSituationService'; +import PoliceCaseAddModal from "../../BaoDing/AlarmSituation/PoliceCaseAdd/PoliceCaseAddModal" + +import TsmWebSocket from '@/utils/TsmWebsocket'; +import { getVoiceWebSocketUrl } from '@/services/bdPoliceCaseService'; + +const up1 = require('@/assets/arrow-up.png'); // 红升 +const down2 = require('@/assets/arrow-down.png'); // 绿降 +const redian = require('@/assets/weather/weathermap.png'); +const { TabPane } = Tabs; +const { Search, TextArea } = Input; +const Option = Select.Option; +const { RangePicker } = DatePicker; +const policeCasePlaceImg = require('../../../assets/barrage.png'); +const illegalMapicon = require('../../../assets/BaoDingImg/illegalMapicon.png'); +const gudingkuang = require('../../../assets/gudingkuang.png'); +const baojing = require('../../../assets/baojing.png'); +const lanjie = require('../../../assets/lanjie.png'); +const xuanzhaun = require('../../../assets/xuanzhaun.png'); +const gaofa = require('../../../assets/gaofa.png'); +const weifa = require('../../../assets/weifa.png'); + +let pliceHeatmap = null; +let illegalHeatmap = null; +let casePoints = [] +TweenOne.plugins.push(Children); +let illegalHigh; +let showPlayHots = []; +let echartslayer = '' +let echartsPolice = [] +let echartsCase = [] +let echartsCaseList = [] +let echartsPoliceList = [] + +let ws = null; + + +class AlarmSituation extends React.Component { + constructor(props) { + super(props); + this.state = { + selectTab: "1", // 当前选中的选项卡 + selectSourceTab: "02",//当前选中的警情来源 + selectCategoryTab: "",//当前选中的警情类型 + selectLevelTab: "",//当前选中的警情级别 + selectAreaTab: "",//当前选中的警情辖区 + startTime: "",//开始时间 + endTime: "",//结束时间 + policelistdom: [],//已处警列表 + //presentlistdom: [],//已到场列表 + //feedbacklistdom: [],//已反馈列表 + isShow: 1,//隐藏地图热点0为显示 + IllegalisShow: 1,//隐藏地图违法热点0为显示 + areaFlg: this.props.areaFlag, + clickFlg: 0,//警情柱状图点击 + clickFlgid: '',// + illclickFlg: '',//违法点击分类热力图 + pointid: '',//警情柱状图点击id + departmentid: '',//各大队展示警情列表 + deptshortname: '',//各大队展示警情名称 + sourceData: '', // 警情来源分析 + showType: '1', // 缉查布控 + showCaseDevice: false, + current: 1, + pageSize: 20, + hasNext: false, + showEcharts: false, + enums: {}, + policeCassAddModalVisible: false, + keyword: '' + }; + this.policeflag = 0; + } + + componentDidMount() { + + // console.log(new Date(), 'AlarmSituation---componentDidMount------------------------') + + // 下方开始创建websocket链接 + // if (ws == null) { + // getVoiceWebSocketUrl().then((data) => { + // if (data && data.webSocketUrl !== undefined && data.webSocketUrl !== null) { + // ws = new TsmWebSocket(data.webSocketUrl, { beatime: 10000 }); + // ws.onmessage = (result) => { + // const resultData = JSON.parse(result.data); + // if (resultData.data && resultData.data.VOICEINF && resultData.data.VOICEINF[0].INSTRUCTIONEXAMPLENAME == '警情分析') { + // console.log('接收到webscoket信息', resultData.data.VOICEINF[0]); + // switch (resultData.data.VOICEINF[0].GKOPERATION) { + // case '31': + // this.getDepartmentId({ name: '一大队' }) + // // this.getDepartmentId({ name: '市南大队' }) + // break; + // case '32': + // this.getDepartmentId({ name: '二大队' }) + // // this.getDepartmentId({ name: '市北大队' }) + // break; + // case '33': + // this.getDepartmentId({ name: '三大队' }) + // // this.getDepartmentId({ name: '崂山大队' }) + // break; + // case '34': + // this.getDepartmentId({ name: '四大队' }) + // // this.getDepartmentId({ name: '李沧大队' }) + // break; + // case '35': + // this.getDepartmentId({ name: '五大队' }) + // // this.getDepartmentId({ name: '黄岛大队' }) + // break; + // case '36': + // this.getDepartmentId({ name: '六大队' }) + // // this.getDepartmentId({ name: '即墨大队' }) + // break; + // case '37': + // this.getDepartmentId({ name: '七大队' }) + // // this.getDepartmentId({ name: '城阳大队' }) + // break; + // default: + // break; + // } + // } else if (resultData.data && resultData.data.VOICEINF && resultData.data.VOICEINF[0].INSTRUCTIONEXAMPLENAME == '事故警情') { + // const { areaFlag } = this.props; + // const { selectedDepartmentId, nlevel } = this.props.global + // const { + // selectTab, + // selectSourceTab,//当前选中的警情来源 + // selectCategoryTab,//当前选中的警情类型 + // selectLevelTab,//当前选中的警情级别 + // selectAreaTab,//当前选中的警情辖区 + // departmentid, + // keyword + // } = this.state; + // const policeQuery = { + // "queryObj": { + // "areaFlag": areaFlag, + // "source": selectSourceTab, + // "case_category": selectCategoryTab, + // "area_id": selectAreaTab, + // "status": selectTab, + // "nlevel": selectLevelTab, + // "departmentid": Number(nlevel) > 2 ? selectedDepartmentId[0] : departmentid, + // keyword + // } + // }; + // this.props.dispatch({ + // type: 'AlarmSituationModel/getPoliceCaseOr122', + // payload: policeQuery + // }).then((data) => { + // const list = data.list ? data.list : this.props.AlarmSituationModel.policeCaseList; + // if (list[resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD - 1] != undefined) { + // window.openPolicePop(list[resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD - 1].case_id, this.state.selectTab) + // } + // }); + // } + // }; + // } else { + // Modal.error({ + // title: '错误', + // content: 'websocket连接失败!', + // okText: '确定', + // }); + // } + // }); + // } + + + const { IsSettingScene, areaFlag, dispatch } = this.props; + if (!IsSettingScene) { + const query = { + "queryObj": { + "areaFlag": areaFlag + } + }; + dispatch({ + type: 'AlarmSituationModel/getCaseSourceNum', + payload: query + }); + dispatch({ + type: 'AlarmSituationModel/getAreaList', + payload: query + }); + dispatch({ + type: 'AlarmSituationModel/getCaseCategoryNum', + payload: query + }); + + dispatch({ + type: 'AlarmSituationModel/getArriveMeter', + payload: { ProKey: 'ALARM_POLICE_ARRIVE_METER' } + }); + + dispatch({ + type: 'AlarmSituationModel/getArriveTime', + payload: { code: 'POLICE_DEAL_INTERVAL' } + }); + + getEnums({ enumtypeid: '1110,1120,180,1118,1139,16002,149,170,13013,186,149,100,902,24,1326,1301,1324,1322,1323,734,1192,126,600001,600002,600003,600004,600005,600006,600007,600008' }).then(data => { + // console.log(data) + if (data && data.result && data.enums) { + this.setState({ enums: data.enums }) + } + }) + + this.doRefreshData(); + this.doRefreshData1(); + // this.refreshEcharts() + + } + } + + + componentWillUnmount() { + if (this.ws) { + this.ws.websocket.close(); + this.ws = null; + } + } + + refreshEcharts = () => { + + if (this.echartsInterval) { + clearInterval(this.echartsInterval); + this.echartsInterval = null; + } + + this.echartsInterval = setInterval(() => { + const { departmentList, illegalTypeList, policeCase24List, } = this.props.AlarmSituationModel; + const { deptshortname, sourceData, } = this.state; + + setTimeout(() => { + if (this.chart1) { + this.chart1.getEchartsInstance().clear() + this.chart1.getEchartsInstance().setOption(getNewAlarmSituationEcharts1(departmentList, deptshortname), true); + } + + if (this.chart2) { + this.chart2.getEchartsInstance().clear() + this.chart2.getEchartsInstance().setOption(get24TimePoliceCaseLine1(sourceData), true); + } + + if (this.chart3) { + this.chart3.getEchartsInstance().clear() + this.chart3.getEchartsInstance().setOption(get24TimePoliceCaseLine(policeCase24List), true); + } + + if (this.illegalcharts) { + this.illegalcharts.getEchartsInstance().clear() + this.illegalcharts.getEchartsInstance().setOption(getAlarmSituationEcharts3(illegalTypeList), true); + } + }, 2000); + + }, window.AnimationTimer.echarts); + } + + componentDidUpdate(preProps, preState) { + const { policeCaseList } = this.props.AlarmSituationModel; + //const policelistdom = this.createPoliceList(); + //this.policeflag = 1; + // 列表数据渲染完成后调用scroll2滚动 + const { policelistdom } = this.state; + // if ( + // this.policeflag == 1 && + // policelistdom && + // policelistdom.length > 0 && + // JSON.stringify(policelistdom) != JSON.stringify(preState.policelistdom) + // ) { + // scroll2(`scrollPoliceSituation${this.state.selectTab}`, policeCaseList.length, 0, policelistdom); + // this.policeflag = 0; + // this.setState({ policelistdom }); + // } + } + componentWillUnmount() { + if (this.refreshTimeout) { + clearTimeout(this.refreshTimeout); + this.refreshTimeout = null + } + if (this.refreshTimeout1) { + clearTimeout(this.refreshTimeout1); + this.refreshTimeout1 = null + } + + if (this.echartsInterval) { + clearInterval(this.echartsInterval); + this.echartsInterval = null; + } + + this.clearEcharts() + } + // 切换缉查布控 + showType = (type) => { + this.setState({ showType: type }) + } + //初始化查询 + doRefreshData = () => { + + // console.log(new Date(), 'AlarmSituation---doRefreshData------------------------') + + const { dispatch, areaFlag } = this.props; + const { selectedDepartmentId, nlevel } = this.props.global + const query = { + "queryObj": { + "areaFlag": Number(nlevel) > 2 ? '1' : areaFlag + } + }; + + const { + selectTab, + selectSourceTab,//当前选中的警情来源 + selectCategoryTab,//当前选中的警情类型 + selectLevelTab,//当前选中的警情级别 + selectAreaTab,//当前选中的警情辖区 + departmentid + } = this.state; + const queryPoliceTab = { + "queryObj": { + "areaFlag": areaFlag, + "source": selectSourceTab, + "case_category": selectCategoryTab, + "area_id": selectAreaTab, + "status": selectTab, + "nlevel": selectLevelTab, + "departmentid": departmentid + } + }; + + const { alarm } = window.Timer + + service.statisticPoliceSource(queryPoliceTab).then(data => { + if (data && data.result) { + this.setState({ sourceData: data.list[0] }) + } + }) + + dispatch({ + type: 'AlarmSituationModel/getDepartment', + payload: query + }); + + dispatch({ + type: 'AlarmSituationModel/getPoliceRatio', + payload: query + }); + dispatch({ type: 'global/getTodayWeather' }); + dispatch({ + type: 'AlarmSituationModel/getPoliceReportNum', + payload: query + }); + + dispatch({ + type: 'AlarmSituationModel/getInjureOrDeath', + payload: query + }); + + if (!this.props.AlarmSituationModel.selectedli) { + this.changTabOrSelect(true); + } + + if (this.refreshTimeout) { + clearTimeout(this.refreshTimeout); + this.refreshTimeout = null + } + + this.refreshTimeout = setTimeout(this.doRefreshData, alarm); + + + }; + + doRefreshData1 = () => { + + // console.log(new Date(), 'AlarmSituation---doRefreshData1------------------------') + + + const { dispatch, areaFlag } = this.props; + const query = { + "queryObj": { + "areaFlag": areaFlag + } + }; + const illquery = { + "queryObj": { + "areaFlag": areaFlag, + "illegalCode": "1702,17121,1302,50021,50022" + } + } + + const { alarm1 } = window.Timer + + dispatch({ + type: 'AlarmSituationModel/getNumIllegalType', + payload: illquery + }); + + dispatch({ + type: 'AlarmSituationModel/getOneDayNumOfIllegal', + payload: query + }); + + dispatch({ + type: 'AlarmSituationModel/getAlertRatio', + payload: query + }); + + if (this.refreshTimeout1) { + clearTimeout(this.refreshTimeout1); + this.refreshTimeout1 = null + } + + this.refreshTimeout1 = setTimeout(this.doRefreshData1, alarm1); + + }; + + + //警情柱状图点击地图扎点 + closePoliceCaseHot = () => { + this.setState({ + pointid: '' + }) + if (showPlayHots && showPlayHots.length > 0) { + for (let i = 0; i < showPlayHots.length; i++) { + const p = showPlayHots[i]; + window.MAP_OBJ.removeMonitor(p); + } + showPlayHots = []; + } + // if (illegalHigh) { + // window.MAP_OBJ.removeMonitor(illegalHigh) + // } + const { dispatch = window.g_app._store.dispatch, basefont } = this.props; + dispatch({ + type: 'global/closePopWindow', + payload: { + name: 'PoliceCaseHotPop', + }, + }); + window.MAP_OBJ.removeVectorLayer('videoPoliceHot_layer'); + //alert('清除'); + } + // 警情高发设备点击事件 + hotClickListener = marker => { + const { dispatch = window.g_app._store.dispatch, basefont } = this.props; + dispatch({ + type: 'global/closePopWindow', + payload: { + name: 'PoliceCaseHotPop', + }, + }); + const pix = window.MAP_OBJ.mapCoord2Container(marker.longitude, marker.latitude); + marker.left = `${pix.x - 150}px`; + marker.top = `${pix.y - 120}px`; + marker.closePoliceCaseHot = this.closePoliceCaseHot; + window.g_app._store.dispatch({ + type: 'global/openPopWindow', + payload: { + popWindow: { + name: 'PoliceCaseHotPop', + props: marker, + component: PoliceCaseHotPop, + }, + }, + }); + }; + + showPoliceCaseHot = (params) => { + const { dispatch = window.g_app._store.dispatch, basefont } = this.props; + const { pointid } = this.state; + const { highList } = this.props.AlarmSituationModel; + if (highList && highList.length > 0) { + if (pointid === params.data.id) { + this.closePoliceCaseHot() + return + } + this.setState({ + pointid: params.data.id + }) + // if (illegalHigh) { + // window.MAP_OBJ.removeMonitor(illegalHigh); + // } + if (showPlayHots && showPlayHots.length > 0) { + for (let i = 0; i < showPlayHots.length; i++) { + const p = showPlayHots[i]; + window.MAP_OBJ.removeMonitor(p); + } + showPlayHots = []; + } + dispatch({ + type: 'global/closePopWindow', + payload: { + name: 'PoliceCaseHotPop', + }, + }); + window.MAP_OBJ.removeVectorLayer('videoPoliceHot_layer'); + for (let i = 0; i < highList.length; i++) { + if (highList[i].point_id === params.data.id) { + // 在地图上扎点 + // window.MAP_OBJ.centerAndZoom(`${highList[i].longitude},${highList[i].latitude}`, 15) + // illegalHigh = window.MAP_OBJ.showMonitor({ + // strcoords: `${highList[i].longitude},${highList[i].latitude}`, + // //title: record.number, + // imgurl: illegalMapicon, + // // width: 30, + // // height: 30, + // }); + window.MAP_OBJ.moveTo(`${highList[i].longitude},${highList[i].latitude}`, 15); + + } + } + const layerinfo = {}; + layerinfo.lid = 'videoPoliceHot_layer'; + layerinfo.data = highList; + layerinfo.imgurl = illegalMapicon; + //layerinfo.filterfunc = this.videoFilterFunc; // 筛选，配置数据方法 + //layerinfo.clicklistener = this.hotClickListener; // 点击数据响应 + const policehot = window.MAP_OBJ.addVectorLayer(layerinfo); + showPlayHots.push(policehot); + } else { + message.info('点位坐标信息有误') + } + } + //违法热力分类 + closeIllegalHot = () => { + this.setState({ + illclickFlg: '' + }) + if (illegalHeatmap) { + window.MAP_OBJ.removeHeatLayer(illegalHeatmap); + illegalHeatmap = null; + } + } + showIllegalHot = (params) => { + this.setState({ IllegalisShow: 1 }); + const { illclickFlg } = this.state; + const { areaFlag, dispatch } = this.props; + if (illclickFlg === params.data.id) { + this.closeIllegalHot() + return + } + this.setState({ + illclickFlg: params.data.id + }) + if (illegalHeatmap) { + window.MAP_OBJ.removeHeatLayer(illegalHeatmap); + illegalHeatmap = null; + } + let illegalType = params.data.id; + // if(params.data.id==='17121'){ + // illegalType="17121"//酒驾 + // }else if(params.data.id==='1702'){ + // illegalType="1702"//醉驾 + // }else if(params.data.id==='50021'){ + // illegalType="50021,50022"//套牌车 + // }else if(params.data.id==='1302'){ + // illegalType="1302" + // } + const query = { + "queryObj": { + "areaFlag": areaFlag, + "illegalCode": illegalType + } + }; + dispatch({ + type: 'AlarmSituationModel/getIllegalCaseHeatMap', + payload: query + }).then(data => { + if (data && data.result) { + if (illegalHeatmap) { + window.MAP_OBJ.removeHeatLayer(illegalHeatmap); + illegalHeatmap = null; + } + let hotList = []; + getPropertiesValue({ ProKey: 'hotMapFlag' }).then((data1) => { + if (data1 && data1.result) { + if (data.list.length > 0) { + for (let i = 0; i < data.list.length; i++) { + hotList.push({ + lat: data.list[i].lat, + lon: data.list[i].lon, + value: Number(data.list[i].value) * data1.info, + }); + } + const hotWarning = { + // data: data.list, + data: hotList, + weight: 'count', + }; + illegalHeatmap = window.MAP_OBJ.addHeatLayer(hotWarning); + } + } else { + message.error('获取热力配置失败，请联系管理员！'); + } + }) + } else { + message.error('违法热力图调用失败！'); + } + }); + + }; + //违法点击展示热力图this.illegalcharts + getIllegalcharts = () => { + //const {highList} = this.props.AlarmSituationModel; + const illegalcharts = this.illegalcharts ? this.illegalcharts.getEchartsInstance() : ''; + const { areaFlag, dispatch } = this.props; + let illegalType = ''; + if (illegalcharts) { + //if(highList&&highList.length>0){ + illegalcharts.on('click', function (params) { + if (params.name === '酒驾') { + illegalType = 1 + } else if (params.name === '醉驾') { + illegalType = 2 + } else if (params.name === '套牌车') { + illegalType = 3 + } else if (params.name === '闯红灯') { + illegalType = 4 + } + const query = { + "queryObj": { + "areaFlag": areaFlag, + "illegalType": illegalType + } + }; + dispatch({ + type: 'AlarmSituationModel/getIllegalCaseHeatMap', + payload: query + }).then(data => { + if (data && data.result) { + //const hotWarning = data.list; + //window.MAP_OBJ.showHeatmap(hotWarning, this.state.IllegalisShow);//调用百度地图 + if (illegalHeatmap) { + window.MAP_OBJ.removeHeatLayer(illegalHeatmap); + illegalHeatmap = null; + } + const hotWarning = { + data: data.list, + weight: 'count', + }; + illegalHeatmap = window.MAP_OBJ.addHeatLayer(hotWarning); + } else { + message.error('违法热力图调用失败！'); + } + }); + }); + //} + } + }; + //来源 + getSourceOption = (CaseSourceList) => { + const optionlist = []; + optionlist.push(); + if (CaseSourceList && CaseSourceList.length > 0) { + for (let i = 0; i < CaseSourceList.length; i += 1) { + const area = CaseSourceList[i]; + if (area.enumvalue && area.enumname) { + optionlist.push(); + } + } + } + return optionlist; + }; + //类型 + getTypeOption = (CaseCategoryList) => { + const optionlist = []; + optionlist.push(); + if (CaseCategoryList && CaseCategoryList.length > 0) { + for (let i = 0; i < CaseCategoryList.length; i += 1) { + const area = CaseCategoryList[i]; + if (area.enumvalue && area.enumname) { + optionlist.push(); + } + } + } + return optionlist; + }; + //级别 + getLevelOption = () => { + const optionlist = []; + const nlevel = [{ enumvalue: 1, enumname: '一级' }, { enumvalue: 2, enumname: '二级' }, { enumvalue: 3, enumname: '三级' }, { enumvalue: 4, enumname: '四级' }]; + optionlist.push(); + for (let i = 0; i < nlevel.length; i += 1) { + const area = nlevel[i]; + if (area.enumvalue && area.enumname) { + optionlist.push(); + } + } + return optionlist; + }; + // //辖区 + // getAreaOption = (AreaList) => { + // const optionlist = []; + // optionlist.push(); + // if (AreaList && AreaList.length > 0) { + // for (let i = 0; i < AreaList.length; i += 1) { + // const area = AreaList[i]; + // if (area.enumvalue && area.enumname) { + // optionlist.push(); + // } + // } + // } + // return optionlist; + // }; + getAreaOption = () => { + const AreaList = this.props.global.mainDeptList + const optionlist = []; + optionlist.push(); + if (AreaList && AreaList.length > 0) { + for (let i = 0; i < AreaList.length; i += 1) { + const area = AreaList[i]; + if (area.cdepartmentid && area.deptshortname) { + optionlist.push(); + } + } + } + return optionlist; + } + createPoliceList = (policeCaseList) => { + const { + selectSourceTab,//当前选中的警情来源 + selectCategoryTab,//当前选中的警情类型 + selectLevelTab,//当前选中的警情级别 + selectAreaTab,//当前选中的警情辖区 + departmentid, + current, + pageSize + } = this.state; + const { selectTab } = this.state; + + const queryPoliceTab11 = { + "queryObj": { + "areaFlag": this.props.areaFlag, + "source": selectSourceTab, + "case_category": selectCategoryTab, + "area_id": selectAreaTab, + "status": selectTab, + "nlevel": selectLevelTab, + "departmentid": departmentid + } + }; + // const list = this.props.AlarmSituationModel.policeCaseList; + const list = policeCaseList ? policeCaseList : this.props.AlarmSituationModel.policeCaseList; + + const { componentName } = this.props; + // if (!selectTab == 1) return []; + const result = []; + + // by zhl 百度拥堵已接警tab过滤5分钟前数据 20211215 start + // let filterList = []; + // if (selectTab == '1') { + // filterList = this.doBdFilter(list); + // } else { + // filterList = list; + // } + // 百度过滤临时注释掉，后续风控需求添加时再考虑修改 + let filterList = list; + // by zhl 百度拥堵已接警tab过滤5分钟前数据 20211215 end + + if (filterList && filterList.length > 0) { + + const hasNext = current * pageSize < filterList.length + const num = hasNext ? current * pageSize : filterList.length + + this.setState({ + hasNext + }) + + for (let i = 0; i < num; i++) { + result.push( + + ); + } + // for (let i = 0; i < list.length; i++) { + // result.push( + // + // ); + // } + } else { + result.push( + + ); + } + return result; + }; + + // by zhl 百度拥堵已接警tab过滤5分钟前数据 20211215 start + /** + * 百度拥堵警情未派警5分钟后自动过滤掉 + */ + doBdFilter = (list) => { + const pFilterArys = []; + // 警情列表存在 + if (list && list.length > 0) { + // 获取当前服务器时间 + const serverTime = getNowDate(); + + for (let i = 0; i < list.length; i++) { + const caseInfo = list[i]; + const { create_time, source } = caseInfo; + // 来源是百度 + if (source == '09') { + // 指令类型为空并且服务器时间-警情发生时间>配置文件配置的时间 + if (new Date(serverTime).getTime() - new Date(create_time).getTime() > window.bdTimeRange * 60 * 1000) { + continue; + } else { + pFilterArys.push(caseInfo); + } + } else { + pFilterArys.push(caseInfo); + } + } + } + + return pFilterArys; + } + // by zhl 百度拥堵已接警tab过滤5分钟前数据 20211215 end + + changeSelect = (key) => { + + const { dispatch } = this.props + + dispatch({ + type: 'AlarmSituationModel/updateState', + payload: { selectedli: key, } + }); + + } + + changeShadow = (key) => { + + const { dispatch } = this.props + + dispatch({ + type: 'AlarmSituationModel/updateState', + payload: { shadowli: key === this.props.AlarmSituationModel.shadowli ? '' : key, } + }); + } + + //切换tab + getTabKey = (key, a) => { + // console.log(key, a) + this.setState(({ + selectTab: key, + // selectSourceTab: "02",//当前选中的警情来源 + // selectCategoryTab: "",//当前选中的警情类型 + // selectLevelTab: "",//当前选中的警情级别 + // selectAreaTab: "",//当前选中的警情辖区 + policelistdom: [], + current: 1, + hasNext: false, + }), () => { + this.props.dispatch({ + type: 'AlarmSituationModel/updateState', + payload: { selectTab: this.state.selectTab, } + }); + this.changTabOrSelect(); + }) + }; + //切换tab和切换选项 + changTabOrSelect = (notClearShadow) => { + const { dispatch } = this.props + + if (!notClearShadow) { + dispatch({ + type: 'AlarmSituationModel/updateState', + payload: { shadowli: '', } + }); + } + + const { areaFlag } = this.props; + const { selectedDepartmentId, nlevel } = this.props.global + const { + selectTab, + selectSourceTab,//当前选中的警情来源 + selectCategoryTab,//当前选中的警情类型 + selectLevelTab,//当前选中的警情级别 + selectAreaTab,//当前选中的警情辖区 + departmentid, + keyword + } = this.state; + const policeQuery = { + "queryObj": { + "areaFlag": areaFlag, + "source": selectSourceTab, + "case_category": selectCategoryTab, + "area_id": selectAreaTab, + "status": selectTab, + "nlevel": selectLevelTab, + "departmentid": Number(nlevel) > 2 ? selectedDepartmentId[0] : departmentid, + keyword + } + }; + + this.props.dispatch({ + type: 'AlarmSituationModel/getPoliceCaseStatusNum', + payload: policeQuery + }) + this.props.dispatch({ + type: 'AlarmSituationModel/getPoliceCaseOr122', + payload: policeQuery + }).then((data) => { + + if (data && data.result) { + const policelistdom = this.createPoliceList(data.list); + this.policeflag = 1; + this.setState({ policelistdom }); + } + }); + //this.setState(({policelistdom:[]}),()=>{ + // const policelistdom = this.createPoliceList(); + // this.policeflag = 1; + // this.setState({ policelistdom }); + //}) + }; + //热力图 + hotShowMap = () => { + if (this.state.isShow == 1) {//显示 + this.setState(({ isShow: 0 }), () => { + const { areaFlag } = this.props; + const query = { + "queryObj": { + "areaFlag": areaFlag + } + }; + this.props.dispatch({ + type: 'AlarmSituationModel/getPoliceCaseHeatMap', + payload: query + }).then(data => { + if (data && data.result) { + //const hotWarning = data.list; + if (pliceHeatmap) { + window.MAP_OBJ.removeHeatLayer(pliceHeatmap); + pliceHeatmap = null; + } + // for (let i = 0; i < data.list.length; i++) { + // const a = data.list[i]; + // if (parseInt(a.lat) && Math.abs(parseInt(a.lat)) <= 90 && parseInt(a.lng) && Math.abs(parseInt(a.lng)) <= 180) { + // a.coordinate = `${a.lng},${a.lat}` + // } else { + // a.coordinate = `NaN,NaN` + // } + // } + + + // for (let i = 0; i < data.list.length; i++) { + // const a = data.list[i]; + // a.lon = parseFloat(a.lng) + // a.lat = parseFloat(a.lat) + // a.value = parseInt(a.count) + // if (a.lat && Math.abs(a.lat) <= 90 && a.lon && Math.abs(a.lon) <= 180) { + // a.coordinate = `${a.lon},${a.lat}` + // } else { + // a.coordinate = `NaN,NaN` + // } + // if (!a.count) { + // a.count = a.value + // } + // } + + + const hotWarning = { + data: data.list, + weight: 'count', + }; + pliceHeatmap = window.MAP_OBJ.addHeatLayer(hotWarning); + //window.MAP_OBJ.showHeatmap(hotWarning, this.state.isShow);//调用百度地图 + } else { + message.error('警情热力图调用失败！'); + } + }); + }); + } else if (this.state.isShow == 0) { + this.setState(({ isShow: 1 }), () => {//隐藏 + if (pliceHeatmap) { + window.MAP_OBJ.removeHeatLayer(pliceHeatmap); + pliceHeatmap = null; + } + /*const { areaFlag } = this.props; + const query = { + "queryObj": { + "areaFlag": areaFlag + } + }; + this.props.dispatch({ + type: 'AlarmSituationModel/getPoliceCaseHeatMap', + payload: query + }).then(data => { + if (data && data.result) { + const hotWarning = data.list; + window.MAP_OBJ.showHeatmap(hotWarning, this.state.isShow);//调用百度地图 + } else { + message.error('警情热力图调用失败！'); + } + });*/ + }); + } + + }; + //违法热力图 + weifahotShowMap = () => { + this.setState({ illclickFlg: '' }); + if (this.state.IllegalisShow == 1) {//显示 + this.setState(({ IllegalisShow: 0 }), () => { + const { areaFlag } = this.props; + const query = { + "queryObj": { + "areaFlag": areaFlag, + "illegalCode": "ALL" + } + }; + this.props.dispatch({ + type: 'AlarmSituationModel/getIllegalCaseHeatMap', + payload: query + }).then(data => { + if (data && data.result) { + //const hotWarning = data.list; + //window.MAP_OBJ.showHeatmap(hotWarning, this.state.IllegalisShow);//调用百度地图 + if (illegalHeatmap) { + window.MAP_OBJ.removeHeatLayer(illegalHeatmap); + illegalHeatmap = null; + } + let hotList = []; + getPropertiesValue({ ProKey: 'hotMapFlag' }).then((data1) => { + if (data1 && data1.result) { + if (data.list.length > 0) { + for (let i = 0; i < data.list.length; i++) { + hotList.push({ + lat: data.list[i].lat, + lon: data.list[i].lon, + value: Number(data.list[i].value) * data1.info, + }); + } + const hotWarning = { + // data: data.list, + data: hotList, + weight: 'count', + }; + illegalHeatmap = window.MAP_OBJ.addHeatLayer(hotWarning); + } + } else { + message.error('获取热力配置失败，请联系管理员！'); + } + }) + + } else { + message.error('违法热力图调用失败！'); + } + }); + }); + } else if (this.state.IllegalisShow == 0) { + this.setState(({ IllegalisShow: 1 }), () => {//隐藏 + if (illegalHeatmap) { + window.MAP_OBJ.removeHeatLayer(illegalHeatmap); + illegalHeatmap = null; + } + }); + } + }; + closeInOutPop = () => { + this.setState({ + // selectSourceTab: "",//当前选中的警情来源 + // selectCategoryTab: "",//当前选中的警情类型 + // selectLevelTab: "",//当前选中的警情级别 + // selectAreaTab: "",//当前选中的警情辖区 + policelistdom: [], + departmentid: '', + deptshortname: '' + }); + this.changTabOrSelect(); + this.queryPoliceCaseTab(); + }; + getDepartmentId = (params) => { + const { departmentid } = this.state; + const { departmentList } = this.props.AlarmSituationModel; + const { dispatch, areaFlag } = this.props; + if (departmentList && departmentList.length > 0) { + for (let i = 0; i < departmentList.length; i++) { + if (departmentList[i].deptshortname === params.name) { + if (departmentid === departmentList[i].cdepartmentid) { + this.closeInOutPop(); + const queryPoliceTab1 = { + "queryObj": { + "areaFlag": areaFlag, + "departmentid": '' + } + }; + service.statisticPoliceSource(queryPoliceTab1).then(data => { + if (data && data.result) { + this.setState({ sourceData: data.list[0] }) + } + }) + return + } + this.setState(({ + departmentid: departmentList[i].cdepartmentid, + policelistdom: [], + deptshortname: departmentList[i].deptshortname + }), () => { + + }); + // const query = { + // "queryObj": { + // "areaFlag": areaFlag, + // "departmentid":departmentList[i].cdepartmentid + // } + // } + const queryPoliceTab = { + "queryObj": { + "areaFlag": areaFlag, + "departmentid": this.state.departmentid + } + }; + service.statisticPoliceSource(queryPoliceTab).then(data => { + if (data && data.result) { + this.setState({ sourceData: data.list[0] }) + } + }) + this.changTabOrSelect(); + this.queryPoliceCaseTab(); + } + } + } + } + + clickChart = (e) => { + + if (e.name === '视频巡检') { + getPropertiesValue({ ProKey: 'module.TSM' }).then((data) => { + if (data && data.result) { + const ipinfo = data.info; + const href = ipinfo + (ipinfo.indexOf('index.html') > -1 ? '' : '/HiatmpPro/index.html') + `#/VideoInspection`; + // console.log(href) + // window.open(href); + window.open(href, '', "height=" + 1070 + ",width=" + 1910 + ",toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,left=" + 0 + ",top=" + 0); + } else { + message.error('服务器错误，请联系管理员！'); + } + }) + } else if (e.name === '122接警') { + getPropertiesValue({ ProKey: 'module.PSD' }).then((data) => { + if (data && data.result) { + const ipinfo = data.info; + const href = ipinfo + (ipinfo.indexOf('index.html') > -1 ? '' : '/HiatmpPro/index.html') + `#/receiveAlarm`; + // console.log(href) + // window.open(href); + window.open(href, '', "height=" + 1070 + ",width=" + 1910 + ",toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,left=" + 0 + ",top=" + 0); + } else { + message.error('服务器错误，请联系管理员！'); + } + }) + } else if (e.name === '人工上报') { + this.getCaesList('12') + } else if (e.name === '百度地图') { + this.getCaesList('09') + } else { + this.getMonitor('05') + } + } + + getCaesList = (source, point) => { + const { areaFlag, dispatch } = this.props + const { departmentid } = this.state + const queryObj = { + areaFlag, + departmentid, + source, + pointid: point ? point.point_id : '' + } + + if (!point) { + window.MAP_OBJ.removeVectorLayer('police_case_device') + } + + + service.getCaseBySourceAndDevice({ queryObj }).then(res => { + if (res && res.result && res.caseList.length > 0) { + + + const { maplayerinfo } = this.props.global; + + if (maplayerinfo['policecase_layer'].checked || maplayerinfo['policecase_layer'].popChecked) { + const obj = { + target: { + value: false + } + } + window.onChangeAllCase(obj) + window.handleName('policecase_layer', false) + } + + for (let i = 0; i < casePoints.length; i++) { + const c = casePoints[i]; + window.MAP_OBJ.removeMonitor(c) + } + casePoints = [] + + dispatch({ + type: 'global/closePopWindow', + payload: { + name: `PoliceCaseListPop`, + }, + }) + + let screen = '' + if (point) { + screen = window.MAP_OBJ.mapCoord2Container(point.longitude, point.latitude); + } + + const caseProps = { + left: screen ? `${screen.x}px` : `${window.screen.width * 0.3}px`, + top: screen ? `${screen.y}px` : `${window.screen.height * 0.12}px`, + caseList: res.caseList, + source, + onClosePop: () => { + for (let i = 0; i < casePoints.length; i++) { + const c = casePoints[i]; + window.MAP_OBJ.removeMonitor(c) + } + casePoints = [] + // window.MAP_OBJ.removeVectorLayer('policecase_layer'); + } + } + + if (source !== '05') { + + for (let i = 0; i < res.caseList.length; i++) { + const c = res.caseList[i]; + + let obj = { + strcoords: `${c.longitude},${c.latitude}`, + imgurl: require('@/assets/barrage.png'), + width: 44, + height: 44 + } + + point = window.MAP_OBJ.showMonitor(obj); + point.addListener('click', () => window.getCaseDetail(c)); + casePoints.push(point) + + let animatedirection = 1 + const animate = () => { + if (animatedirection === 1) { + obj.height += 1; + obj.width += 1; + } else { + obj.height -= 1; + obj.width -= 1; + } + if (obj.height >= 160) { + animatedirection = -1; + } + if (obj.height <= 44) { + animatedirection = 1; + } + if (obj.width > 0) { + if (casePoints[i]) { + casePoints[i].changeImg(require('@/assets/barrage.png'), obj.width, obj.height); + window.requestAnimationFrame(animate); + } + } + }; + animate(); + } + + // const layerinfo = {}; + // layerinfo.lid = 'pie_case_layer'; + // layerinfo.data = res.caseList; // 所有数据 List形式，存json对象 + // layerinfo.filterfunc = (marker) => { + // marker.width = 120; + // marker.height = 120; + // marker.imgurl = require('../../../assets/barrage.png'); + // return true; + // }; // 筛选后的数据 + // window.MAP_OBJ.addVectorLayer(layerinfo); + } + + + + dispatch({ + type: 'global/openPopWindow', + payload: { + popWindow: { + name: `PoliceCaseListPop`, + props: caseProps, + component: PoliceCaseListPop, + }, + }, + }) + } else { + message.info(point ? '该事件监测器今日暂无警情' : '该类型今日暂无警情') + } + }) + + + } + + + getMonitor = (source) => { + const { areaFlag, dispatch } = this.props + const { departmentid, showCaseDevice } = this.state + const queryObj = { + areaFlag, + departmentid, + source + } + + if (showCaseDevice) { + this.setState({ + showCaseDevice: false + }) + window.MAP_OBJ.removeVectorLayer('police_case_device') + return + } + + this.setState({ + showCaseDevice: true + }, () => { + service.getMonitorDevices({ queryObj }).then(res => { + if (res && res.result) { + if (res.deviceList.length > 0) { + const deviceProps = { + left: `${window.screen.width * 0.3}px`, + top: `${window.screen.height * 0.12}px`, + deviceList: res.deviceList, + onClosePop: () => { + window.MAP_OBJ.removeVectorLayer('police_case_device'); + dispatch({ + type: 'global/closePopWindow', + payload: { + name: `PoliceCaseListPop` + }, + }) + } + } + + dispatch({ + type: 'global/openPopWindow', + payload: { + popWindow: { + name: `CaseDevicesList`, + props: deviceProps, + component: CaseDevicesList, + }, + }, + }) + + const layerinfo = {}; + layerinfo.lid = 'police_case_device'; + layerinfo.data = res.deviceList; // 所有数据 + layerinfo.filterfunc = this.filterCaseDevice; // 筛选后的数据 + layerinfo.clicklistener = (marker) => this.getCaesList('05', marker); + window.MAP_OBJ.addVectorLayer(layerinfo); + + } else { + message.info('暂无事件监测设备') + } + } else { + message.error('获取事件监测设备失败') + } + }) + }) + + + + } + + filterCaseDevice = (marker) => { + marker.title = marker.devicename + marker.imgurl = require('@/assets/BaoDingImg/map/case_device.png'); + + marker.width = 32; + marker.height = 32; + + return true; + + } + + + queryPoliceCaseTab = () => { + const { dispatch, areaFlag } = this.props; + const { selectSourceTab, selectCategoryTab, selectLevelTab, selectAreaTab } = this.state; + + const queryPoliceTab = { + "queryObj": { + "areaFlag": areaFlag, + "departmentid": this.state.departmentid, + "source": selectSourceTab, + "case_category": selectCategoryTab, + "area_id": selectAreaTab, + "nlevel": selectLevelTab, + } + }; + dispatch({ + type: 'AlarmSituationModel/getPoliceCaseStatusNum', + payload: queryPoliceTab + }); + } + //警情来源 + SourceChange = value => { + + + this.setState(({ + selectSourceTab: value, + policelistdom: [], + current: 1, + hasNext: false, + }), () => { + this.changTabOrSelect(); + // const { dispatch, areaFlag } = this.props; + // const { + // selectTab, + // selectSourceTab,//当前选中的警情来源 + // selectCategoryTab,//当前选中的警情类型 + // selectLevelTab,//当前选中的警情级别 + // selectAreaTab,//当前选中的警情辖区 + // departmentid + // } = this.state; + // const policeQuery = { + // "queryObj": { + // "areaFlag": areaFlag, + // "source": selectSourceTab, + // "case_category": selectCategoryTab, + // "area_id": selectAreaTab, + // "status": selectTab, + // "nlevel": selectLevelTab, + // "departmentid": departmentid + // } + // }; + // this.props.dispatch({ + // type: 'AlarmSituationModel/getPoliceCaseStatusNum', + // payload: policeQuery + // }) + }) + + + }; + //警情类型 + CategoryChange = value => { + + this.setState(({ + selectCategoryTab: value, + policelistdom: [], + current: 1, + hasNext: false, + }), () => { + this.changTabOrSelect(); + // const { dispatch, areaFlag } = this.props; + // const { + // selectTab, + // selectSourceTab,//当前选中的警情来源 + // selectCategoryTab,//当前选中的警情类型 + // selectLevelTab,//当前选中的警情级别 + // selectAreaTab,//当前选中的警情辖区 + // departmentid + // } = this.state; + // const policeQuery = { + // "queryObj": { + // "areaFlag": areaFlag, + // "source": selectSourceTab, + // "case_category": selectCategoryTab, + // "area_id": selectAreaTab, + // "status": selectTab, + // "nlevel": selectLevelTab, + // "departmentid": departmentid + // } + // }; + // this.props.dispatch({ + // type: 'AlarmSituationModel/getPoliceCaseStatusNum', + // payload: policeQuery + // }) + }) + + + }; + //级别 + LevelChange = value => { + + this.setState(({ + selectLevelTab: value, + policelistdom: [], + current: 1, + hasNext: false, + }), () => { + this.changTabOrSelect(); + // const { dispatch, areaFlag } = this.props; + // const { + // selectTab, + // selectSourceTab,//当前选中的警情来源 + // selectCategoryTab,//当前选中的警情类型 + // selectLevelTab,//当前选中的警情级别 + // selectAreaTab,//当前选中的警情辖区 + // departmentid + // } = this.state; + // const policeQuery = { + // "queryObj": { + // "areaFlag": areaFlag, + // "source": selectSourceTab, + // "case_category": selectCategoryTab, + // "area_id": selectAreaTab, + // "status": selectTab, + // "nlevel": selectLevelTab, + // "departmentid": departmentid + // } + // }; + // this.props.dispatch({ + // type: 'AlarmSituationModel/getPoliceCaseStatusNum', + // payload: policeQuery + // }) + }) + + + }; + //辖区 + AreaChange = (value, option) => { + + this.setState(({ + departmentid: value, + policelistdom: [], + current: 1, + hasNext: false, + deptshortname: option.props.value ? option.props.title : '' + }), () => { + this.changTabOrSelect(); + // const { dispatch, areaFlag } = this.props; + // const { + // selectTab, + // selectSourceTab,//当前选中的警情来源 + // selectCategoryTab,//当前选中的警情类型 + // selectLevelTab,//当前选中的警情级别 + // selectAreaTab,//当前选中的警情辖区 + // departmentid + // } = this.state; + // const policeQuery = { + // "queryObj": { + // "areaFlag": areaFlag, + // "source": selectSourceTab, + // "case_category": selectCategoryTab, + // "area_id": selectAreaTab, + // "status": selectTab, + // "nlevel": selectLevelTab, + // "departmentid": departmentid + // } + // }; + // this.props.dispatch({ + // type: 'AlarmSituationModel/getPoliceCaseStatusNum', + // payload: policeQuery + // }) + }) + + + }; + //来源，类型，级别，辖区 + getSelectDiv = () => { + const { selectSourceTab, selectCategoryTab, selectLevelTab, selectAreaTab, departmentid } = this.state; + const { nlevel, selectedDepartmentId } = this.props.global + const { + CaseCategoryList, + CaseSourceList, + AreaList, + } = this.props.AlarmSituationModel; + let selectDiv = []; + selectDiv.push( + + + + + + + + {/* + + */} + + + + + { + this.setState({ + keyword: e.target.value + }) + }} + /> + + {/**/} + {/**/} + {/**/} + + ) + return selectDiv; + }; + + onScrollEvent = (index) => { + if (this[`scrollRef${index}`].scrollTop + this[`scrollRef${index}`].clientHeight === this[`scrollRef${index}`].scrollHeight) { + const { current, hasNext } = this.state + if (hasNext) { + this.setState({ + current: current + 1 + }, () => { + const policelistdom = this.createPoliceList(); + this.setState({ policelistdom }); + }) + } + } + } + + openSCS = () => { + getPropertiesValue({ ProKey: 'module.SCS' }).then((data) => { + if (data && data.result) { + const ipinfo = data.info; + const href = ipinfo + (ipinfo.indexOf('index.html') > -1 ? '' : '/HiatmpPro/index.html') + `#/alert`; + // console.log(href) + // window.open(href); + window.open(href, '', "height=" + 1070 + ",width=" + 1910 + ",toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,left=" + 0 + ",top=" + 0); + } else { + message.error('服务器错误，请联系管理员！'); + } + }) + } + + clearEcharts = () => { + if (this.state.showEcharts) { + this.setState({ + showEcharts: false + }) + if (echartslayer) { + removeEchartsLayer(MAP_OBJ, echartslayer); + echartslayer = '' + } + + if (echartsPolice.length > 0) { + for (let i = 0; i < echartsPolice.length; i++) { + window.MAP_OBJ.removeMonitor(echartsPolice[i]); + } + echartsPolice = [] + } + if (echartsCase.length > 0) { + for (let i = 0; i < echartsCase.length; i++) { + window.MAP_OBJ.removeMonitor(echartsCase[i]); + } + echartsCase = [] + } + + if (this.orderTimer) { + clearTimeout(this.orderTimer) + this.orderTimer = null + } + echartsCaseList = [] + echartsPoliceList = [] + + + } + } + + getPoliceAndCase = () => { + + + // this.clearEcharts() + const { ARRIVE_METER } = this.props.AlarmSituationModel + const { selectedDepartmentId, nlevel } = this.props.global + service.getOnLinePoliceListByPoliceCase({ + departmentid: Number(nlevel) > 2 ? selectedDepartmentId[0] : '' + }).then((res) => { + if (!this.state.showEcharts) { + return + } + if (this.orderTimer) { + clearTimeout(this.orderTimer) + this.orderTimer = null + } + if (res && res.result) { + const policeList = res.list + const echartsdata = [] + + if (policeList.length > 0) { + this.orderTimer = setTimeout(this.getPoliceAndCase, window.orderPoliceTimer * 1000); + } + + if (echartsPolice.length > 0) { + for (let i = 0; i < echartsPolice.length; i++) { + window.MAP_OBJ.removeMonitor(echartsPolice[i]); + } + echartsPolice = [] + } + if (echartsCase.length > 0) { + for (let i = 0; i < echartsCase.length; i++) { + window.MAP_OBJ.removeMonitor(echartsCase[i]); + } + echartsCase = [] + } + echartsCaseList = [] + echartsPoliceList = [] + for (let i = 0; i < policeList.length; i++) { + const p = policeList[i]; + if (p.decarlong && p.decarlat) { + for (let j = 0; j < p.policecases.length; j++) { + const c = p.policecases[j]; + if (c.longitude && c.latitude) { + echartsdata.push([p.decarlong.toString(), p.decarlat.toString(), c.longitude.toString(), c.latitude.toString(), p.policename, '', 20]); + + if (echartsPoliceList.findIndex(x => x === p.policeid) === -1) { + + const meter = window.MAP_OBJ.getDistanceInLL(`${p.decarlong},${p.decarlat}`, `${c.longitude},${c.latitude}`) + let obj = { + strcoords: `${p.decarlong},${p.decarlat}`, + imgurl: meter < ARRIVE_METER ? require('@/assets/maplayer/gpspolicearrive.png') : require('@/assets/maplayer/gpspoliceorder.png'), + width: 45, + height: 45, + topOffset: -22.5, + title: `${p.policename}` + } + p.longitude = p.decarlong || '' + p.latitude = p.decarlat || '' + let policeMove = window.MAP_OBJ.showMonitor(obj); + const policeInfo = p + policeInfo.marker = {} + policeInfo.marker.params = p + policeMove?.addListener('click', () => window.openPoliceInfo(policeInfo)); + echartsPolice.push(policeMove) + echartsPoliceList.push(p.policeid) + } + + if (echartsCaseList.findIndex(x => x === c.case_id) === -1) { + let obj1 = { + strcoords: `${c.longitude},${c.latitude}`, + imgurl: require('../../../assets/barrage.png'), + width: 120, + height: 120, + } + + let policeGPS = window.MAP_OBJ.showMonitor(obj1); + policeGPS.addListener('click', () => this.policeCaseClickListener(c)); + echartsCase.push(policeGPS) + echartsCaseList.push(c.case_id) + } + + } + } + } + } + + if (echartsdata != null && echartsdata.length > 0) { + if (echartslayer) { + freshEchartsLayer(echartslayer, echartsdata) + } else { + echartslayer = addEchartsLayer(window.MAP_OBJ, echartsdata); + this.setState({ + showEcharts: true + }) + } + } else { + message.info(`暂无${policeList.length > 0 ? '坐标正确的' : ''}已派警警情!`) + } + } else { + message.error('查询已派警警情失败') + } + }) + } + + policeCaseClickListener = marker => { + // console.log(marker) + let selectTab = '' + const { dispatch } = this.props + if (marker.status == 0 || marker.status == 1) { // 已接警 + selectTab = '1' + } else if (marker.status == 3) { // 已派警 + selectTab = '3' + } else if (marker.status == 11) { // 已到达 + selectTab = '11' + } + window.openPolicePop(marker.case_id, selectTab, marker) + dispatch({ + type: 'AlarmSituationModel/updateState', + payload: { selectedli: marker.case_id, shwdowli: '' } + }); + } + + render() { + const { policelistdom, pointid, deptshortname, sourceData, showType, selectTab, departmentid } = this.state; + const { basefont, AlarmSituationModel } = this.props; + const { selectedDepartmentId, nlevel } = this.props.global + const { + allPoliceCaseNum, + dayratio, + weekratio, + death_num, + injury_num, + departmentList, + highList, + blackAlertNum, + weekAlertRatio, + dayAlertRatio, + illegalTypeList, + CaseCategoryList, + CaseSourceList, + AreaList, + handedNum, + handingNum, + nothandingNum, + policeCase24List, + arriveNum, + alreadyNum, + alertList + } = AlarmSituationModel; + + const policeCaseAddModal = { + policeCassAddModalVisible: this.state.policeCassAddModalVisible, + enums: this.state.enums, + selectedDepartmentId, + nlevel, + onClose: () => { + this.setState({ + policeCassAddModalVisible: false, + }); + }, + saveCaseSuccess: this.changTabOrSelect + }; + + return ( +
+
+
+ +
+
+ + +
+ +
+ + 已接警（25） + {/* ({nothandingNum !== null ? nothandingNum : 0}) */} + } key="1"> + {this.getSelectDiv()} +
+
    { + this.scrollRef1 = c; + }} + onScrollCapture={() => this.onScrollEvent(1)} + >{policelistdom}
+
+ + 已派警（128） + {/* ({alreadyNum !== null ? alreadyNum : 0}) */} + } key="3"> + {this.getSelectDiv()} +
+
    { + this.scrollRef2 = c; + }} + onScrollCapture={() => this.onScrollEvent(2)} + >{policelistdom}
+
+ + 已到达（128） + {/* ({arriveNum !== null ? arriveNum : 0}) */} + } key="11"> + {this.getSelectDiv()} +
+
    { + this.scrollRef3 = c; + }} + onScrollCapture={() => this.onScrollEvent(3)} + >{policelistdom}
+
+ + 已完成（128） + {/* ({handedNum !== null ? handedNum : 0}) */} + } key="7"> + {this.getSelectDiv()} +
+
    { + this.scrollRef4 = c; + }} + onScrollCapture={() => this.onScrollEvent(4)} + >{policelistdom}
+
+ + +
+ + +
+ +
+
+
+
+
+ ); + } +} +function mapStateToProps({ AlarmSituationModel, global }) { + return { AlarmSituationModel, global }; +} +export default connect(mapStateToProps)(AlarmSituation); diff --git a/src/components/CommandPlatform/left/SituationTable.less b/src/components/CommandPlatform/left/SituationTable.less new file mode 100644 index 0000000..2695f8d --- /dev/null +++ b/src/components/CommandPlatform/left/SituationTable.less @@ -0,0 +1,5 @@ +.box { + :global(.ant-tabs-tab) { + padding: 12px 6px !important; + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/left/SpeedTrend.js b/src/components/CommandPlatform/left/SpeedTrend.js new file mode 100644 index 0000000..af3031c --- /dev/null +++ b/src/components/CommandPlatform/left/SpeedTrend.js @@ -0,0 +1,223 @@ +import React from 'react'; +import ReactEcharts from 'echarts-for-react'; +import styles from './SpeedTrend.less'; + +import { getNowDate } from '../../../utils/util'; + const serverTime = getNowDate(); + console.log(serverTime) +function echartsOption(xAxisData, seriesData) { + const option = { + grid: { + top: "24", + left: "0", + right: "10", + bottom: "0", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: false, + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + type: "value", + show: true, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series: [ + { + type: "line", + symbol: 'none', + lineStyle: { + width: 2, + color: "rgba(218, 157, 50, 1)", + }, + label: { + show: false, + color: "#fff", + backgroundColor: "rgba(135, 103, 62, 1)", + padding: [4, 4, 2, 4] + }, + areaStyle: { + color: { + type: "linear", + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { + offset: 0, + + color: "rgba(60, 88, 109, 1)", + }, + { + offset: 1, + color: "rgba(135, 103, 62, 1)", + }, + ], + global: false, // 缺省为 false + }, + }, + data: seriesData, + }, + ], + } + return option +} + +function echartsDay () { + let xAxisData = Array.from({length: 24}, (value, index) => index); + let seriesData = Array.from({length: 24}, (value, index) => index + 1); + let option = echartsOption(xAxisData, seriesData) + return option +} + +function echartsWeek () { + let xAxisData = Array.from({length: 7}, (value, index) => index + 1); + let seriesData = [1,333,4,524,66,8888,10984]; + let option = echartsOption(xAxisData, seriesData) + return option +} + +function echartsMonth () { + let xAxisData = Array.from({length: 30}, (value, index) => index + 1); + let seriesData = Array.from({length: 24}, (value, index) => index + 1); + let option = echartsOption(xAxisData, seriesData) + return option +} + +function echartsRegion () { + let xAxisData = Array.from({length: 30}, (value, index) => index + 1); + let seriesData = Array.from({length: 24}, (value, index) => index + 1); + let option = echartsOption(xAxisData, seriesData) + return option +} + + +class CongestionTrend extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + arr: [ + { name: '实施', num: 6.2 }, + { name: '历史7天', num: 6.2 }, + { name: '历史30天', num: 6.2 }, + { name: '主城区', num: 6.2 } + ], + tagNum: 0 + } + } + componentDidMount() { + } + + render() { + return ( +
+
+
平均速度趋势
+
+ { + this.state.arr.map((r, i) => ( +
{ + this.setState({ + tagNum: i + }) + }}>{r.name}
+ )) + } + +
+
+ { + this.state.tagNum == 0 && + + { + // console.log(e) + }} + option={echartsDay()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } + { + this.state.tagNum == 1 && + + { + // console.log(e) + }} + option={echartsWeek()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } + { + this.state.tagNum == 2 && + + { + // console.log(e) + }} + option={echartsMonth()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } + { + this.state.tagNum == 3 && + + { + // console.log(e) + }} + option={echartsRegion()} + notMerge + lazyUpdate + style={{ width: '100%', height: 160 }} + /> + } +
+ ); + } +} + +export default CongestionTrend; diff --git a/src/components/CommandPlatform/left/SpeedTrend.less b/src/components/CommandPlatform/left/SpeedTrend.less new file mode 100644 index 0000000..2bfaa8d --- /dev/null +++ b/src/components/CommandPlatform/left/SpeedTrend.less @@ -0,0 +1,30 @@ +.speedTrend { + width: 100%; + .tit { + font-size: 22px; + display: flex; + justify-content: space-between; + margin:12px 0 14px 0; + .tag { + + &>div { + font-size: 16px; + padding: 4px; + border: 1px solid rgb(30, 163, 194);; + margin-right: 4px; + text-align: center; + line-height: 16px; + display: inline-block; + cursor: pointer; + } + &>div:last-child{ + margin-right: 0; + } + .tagNum{ + background: rgb(30, 163, 194); + } + } + } + + +} \ No newline at end of file diff --git a/src/components/CommandPlatform/right/Baseline.js b/src/components/CommandPlatform/right/Baseline.js new file mode 100644 index 0000000..8a94a46 --- /dev/null +++ b/src/components/CommandPlatform/right/Baseline.js @@ -0,0 +1,147 @@ +import React from 'react'; +import styles from './Baseline.less'; +const up1 = require('@/assets/arrow-up.png'); // 红升 +import ReactEcharts from 'echarts-for-react'; +function echartsOptionBar(seriesData) { + let xAxisData = ['基线周', '今日'] + const series = [{ + data: [120, 200], + type: 'bar', + barWidth: '24' + }] + + const option = { + grid: { + top: "24", + left: "0", + right: "10", + bottom: "0", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + type: 'value', + axisLabel: { + + show: false, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series + } + return option +} + +function echartsBar() { + let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); + let option = echartsOptionBar(seriesData) + return option +} + +class Baseline extends React.PureComponent { + constructor(props) { + super(props); + } + + + render() { + return ( +
+
+
+
+
84分 +
+
车均延误(每 10km)
+
+
+
90%
+
信控道路拥堵指数
+
+
+
32%
+
绿波干线平均速度
+
+
+
+
+
+ 车均延误 +
+ { + // console.log(e) + }} + option={echartsBar()} + notMerge + lazyUpdate + style={{ width: '144px', height: 140 }} + /> +
+
+
+ 拥堵指数 +
+ { + // console.log(e) + }} + option={echartsBar()} + notMerge + lazyUpdate + style={{ width: '144px', height: 140 }} + /> +
+
+
+ 平均速度 +
+ { + // console.log(e) + }} + option={echartsBar()} + notMerge + lazyUpdate + style={{ width: '144px', height: 140 }} + /> +
+
+
+ ); + } +} + +export default Baseline; diff --git a/src/components/CommandPlatform/right/Baseline.less b/src/components/CommandPlatform/right/Baseline.less new file mode 100644 index 0000000..917fcdc --- /dev/null +++ b/src/components/CommandPlatform/right/Baseline.less @@ -0,0 +1,64 @@ +.baseline { + width: 100%; + + .tit { + width: 100%; + height: 52px; + padding-left: 128px; + margin-bottom: 28px; + } + + + + .baselineTop { + width: 100%; + margin-bottom: 36px; + display: flex; + justify-content: space-between; + + &>div { + width: 174px; + height: 84px; + text-align: center; + + &>div:nth-child(1) { + width: 142px; + height: 54px; + margin: 0 auto; + margin-bottom: 12px; + font-size: 32px; + + span { + font-size: 28px; + } + } + + &>div:nth-child(2) { + font-size: 18px; + } + } + } + + .baselineBottom { + width: 100%; + display: flex; + justify-content: space-between; + + &>div { + width: 164px; + display: flex; + + &>div { + width: 16px; + line-height: 16px; + height: 120px; + display: flex; + justify-content: center; + align-items: flex-end; + + } + } + + + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/right/Cars.js b/src/components/CommandPlatform/right/Cars.js new file mode 100644 index 0000000..3f9d55e --- /dev/null +++ b/src/components/CommandPlatform/right/Cars.js @@ -0,0 +1,243 @@ +import React from 'react'; +import ReactEcharts from 'echarts-for-react'; +import styles from './Cars.less'; +const up1 = require('@/assets/arrow-up.png'); // 红升 +function echartsOptionLine(xAxisData, seriesData) { + const option = { + grid: { + top: "24", + left: "0", + right: "10", + bottom: "0", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: false, + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + type: "value", + show: true, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series: [ + { + type: "line", + symbol: 'none', + lineStyle: { + width: 2, + color: "#00FFFC", + }, + label: { + show: false, + color: "#fff", + backgroundColor: "rgba(26, 208, 163, 1)", + padding: [4, 4, 2, 4] + }, + areaStyle: { + color: { + type: "linear", + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { + offset: 0, + color: "#031a45", + }, + { + offset: 1, + color: "#00FFFC", + }, + ], + global: false, // 缺省为 false + }, + }, + data: seriesData, + }, + ], + } + return option +} + +function echartsLine() { + let xAxisData = Array.from({ length: 24 }, (value, index) => index); + let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); + let option = echartsOptionLine(xAxisData, seriesData) + return option +} + + +function echartsOptionBar(seriesData) { + let xAxisData = ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队', '七大队'] + const series = { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + barWidth: '10' + } + + const option = { + grid: { + top: "24", + left: "0", + right: "10", + bottom: "0", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + rotate: 30 + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + type: "value", + show: true, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series + } + return option +} + +function echartsBar() { + let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); + let option = echartsOptionBar(seriesData) + return option +} + +class Cars extends React.PureComponent { + constructor(props) { + super(props); + } + + + render() { + return ( +
+
工程车
+
+
+
+ + 84 +
+
工程车数据
+
接入情况
+
+
+
+ + 88 +
+
工程车今日行
+
行驶情况
+
+
+
+ + 84 +
+
工程车今日
+
报警情况
+
+
+
+
+ { + // console.log(e) + }} + option={echartsLine()} + notMerge + lazyUpdate + style={{ width: '100%', height: 110 }} + /> +
+
+ { + // console.log(e) + }} + option={echartsBar()} + notMerge + lazyUpdate + style={{ width: '100%', height: 110 }} + /> +
+
+
+ ); + } +} + +export default Cars; diff --git a/src/components/CommandPlatform/right/Cars.less b/src/components/CommandPlatform/right/Cars.less new file mode 100644 index 0000000..1292d4e --- /dev/null +++ b/src/components/CommandPlatform/right/Cars.less @@ -0,0 +1,51 @@ +.cars { + width: 100%; + + .tit { + width: 100%; + background: lightblue; + height: 52px; + padding-left: 128px; + margin:32px 0 28px 0; + } + + + + .carsTop { + width: 100%; + display: flex; + justify-content: space-between; + + &>div { + width: 180px; + height: 100px; + text-align: center; + + &>div:nth-child(1) { + font-size: 22px; + color: rgb(30, 186, 198); + } + + &>div:nth-child(2) { + font-size: 18px; + } + + &>div:nth-child(3) { + font-size: 18px; + } + } + } + + .carsBottom { + width: 100%; + display: flex; + justify-content: space-between; + + &>div { + width: 284px; + height: 110px; + } + + + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/right/Construction.js b/src/components/CommandPlatform/right/Construction.js new file mode 100644 index 0000000..1696b52 --- /dev/null +++ b/src/components/CommandPlatform/right/Construction.js @@ -0,0 +1,258 @@ +import React from 'react'; +import ReactEcharts from 'echarts-for-react'; +import styles from './Construction.less'; +const up1 = require('@/assets/arrow-up.png'); // 红升 +function echartsOptionLine(xAxisData, seriesData) { + const option = { + series: [ + + + { + type: 'gauge', + center: ['50%', '60%'], + radius: 60, + splitNumber: 10, + progress: { + show: false + }, + pointer: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + width: 16, + color: [[1, '#4183a6']] + } + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + detail: { + valueAnimation: true, + width: '20%', + lineHeight: 40, + borderRadius: 8, + offsetCenter: [0, '-15%'], + fontSize: 20, + fontWeight: 'bolder', + formatter: '25', + color: '#fff' + }, + data: [ + { + value: 100 + } + ] + }, + { + type: 'gauge', + center: ['50%', '60%'], + radius: 60, + splitNumber: 10, + z: 10, + progress: { + show: true, + width: 16, + + itemStyle: { + color: color + }, + }, + pointer: { + show: false + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + detail: { + valueAnimation: true, + width: '20%', + lineHeight: 40, + borderRadius: 8, + offsetCenter: [0, '18%'], + fontSize: 14, + fontWeight: 'bolder', + formatter: '{value} %', + color: '#fff' + }, + data: [ + { + value: 80 + } + ] + }, + + ] + }; + return option +} + +function echartsLine() { + let xAxisData = Array.from({ length: 24 }, (value, index) => index); + let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); + let option = echartsOptionLine(xAxisData, seriesData) + return option +} + + +function echartsOptionBar(seriesData) { + let xAxisData = ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队', '七大队'] + const series = { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + barWidth: '10' + } + + const option = { + grid: { + top: "24", + left: "0", + right: "10", + bottom: "0", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: xAxisData, + axisLabel: { + textStyle: { + color: "#fff", + margin: 14, + }, + rotate: 30 + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#9fabc1", + }, + }, + }, + ], + yAxis: [ + { + type: "value", + show: true, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#9fabc1", + }, + }, + splitLine: { + show: false, + }, + }, + ], + series + } + return option +} + +function echartsBar() { + let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); + let option = echartsOptionBar(seriesData) + return option +} + +class Construction extends React.PureComponent { + constructor(props) { + super(props); + } + + + render() { + return ( +
+
道路施工
+
+
+ { + // console.log(e) + }} + option={echartsLine()} + notMerge + lazyUpdate + style={{ width: '100%', height: 110 }} + /> + 主干道施工里程 +
+
+ { + // console.log(e) + }} + option={echartsLine()} + notMerge + lazyUpdate + style={{ width: '100%', height: 110 }} + /> + 施工中项目 +
+
+ { + // console.log(e) + }} + option={echartsLine()} + notMerge + lazyUpdate + style={{ width: '100%', height: 110 }} + /> + 次干道施工里程 +
+
+
+
+
432
+
过程巡检
+
+
+
+
开工提醒
+
0次
+
+
+
超期提醒
+
0次
+
+
+
验收提醒
+
0次
+
+
+
+
+ ); + } +} + +export default Construction; diff --git a/src/components/CommandPlatform/right/Construction.less b/src/components/CommandPlatform/right/Construction.less new file mode 100644 index 0000000..5ec68b1 --- /dev/null +++ b/src/components/CommandPlatform/right/Construction.less @@ -0,0 +1,70 @@ +.construction { + width: 100%; + margin-top: 22px; + + .tit { + width: 100%; + background: lightblue; + height: 52px; + padding-left: 128px; + margin-bottom: 28px; + } + + + + .constructionTop { + width: 100%; + display: flex; + justify-content: space-between; + margin-bottom: 38px; + &>div { + width: 130px; + text-align: center; + font-size: 18px; + } + } + + .constructionBottom { + width: 100%; + display: flex; + justify-content: space-between; + + &>div:nth-child(1) { + width: 120px; + height: 116px; + text-align: center; + + &>div:nth-child(1) { + height: 80px; + margin-bottom: 14px; + font-size: 34px; + } + + &>div:nth-child(2) { + font-size: 22px; + } + } + + &>div:nth-child(2) { + width: 450px; + + &>div { + width: 354px; + height: 38px; + line-height: 38px; + margin: 0 auto; + margin-bottom: 20px; + display: flex; + justify-content: space-evenly; + &>div:nth-child(1) { + font-size: 20px; + } + &>div:nth-child(2) { + font-size: 18px; + color: rgb(30, 186, 198); + } + } + } + + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/right/Controls.js b/src/components/CommandPlatform/right/Controls.js new file mode 100644 index 0000000..65aca52 --- /dev/null +++ b/src/components/CommandPlatform/right/Controls.js @@ -0,0 +1,51 @@ +import React from 'react'; +import styles from './Controls.less'; +const up1 = require('@/assets/arrow-up.png'); // 红升 + + +class Controls extends React.PureComponent { + constructor(props) { + super(props); + } + + + render() { + return ( +
+
智能信控制
+
+
+
84 + % +
+
路口在线率
+
+
+
90%
+
优化时长占比
+
+
+
32
+
优化次数
+
+
+
+
+
507.44
+
自适应控制
+
+
+
18477
+
溢流控制
+
+
+
507.44
+
可变车道控
+
+
+
+ ); + } +} + +export default Controls; diff --git a/src/components/CommandPlatform/right/Controls.less b/src/components/CommandPlatform/right/Controls.less new file mode 100644 index 0000000..c0ddf33 --- /dev/null +++ b/src/components/CommandPlatform/right/Controls.less @@ -0,0 +1,64 @@ +.control { + width: 100%; + + .tit { + width: 100%; + background: lightblue; + height: 52px; + padding-left: 128px; + margin-bottom: 28px; + } + + + + .controlTop { + width: 100%; + margin-bottom: 36px; + display: flex; + justify-content: space-between; + + &>div { + width: 156px; + height: 100px; + text-align: center; + + &>div:nth-child(1) { + width: 100%; + height: 66px; + margin-bottom: 12px; + font-size: 32px; + + span { + font-size: 28px; + } + } + + &>div:nth-child(2) { + font-size: 18px; + } + } + } + + .controlBottom { + width: 100%; + display: flex; + justify-content: space-between; + + &>div { + width: 156px; + height: 100px; + text-align: center; + + &>div:nth-child(1) { + margin: 16px 0 24px 0; + font-size: 20px; + color: rgb(30, 186, 198); + } + &>div:nth-child(2) { + font-size: 18px; + } + } + + + } +} \ No newline at end of file diff --git a/src/components/CommandPlatform/right/Opinion.js b/src/components/CommandPlatform/right/Opinion.js new file mode 100644 index 0000000..402f0ad --- /dev/null +++ b/src/components/CommandPlatform/right/Opinion.js @@ -0,0 +1,68 @@ +import React from 'react'; +import styles from './Opinion.less'; +const up1 = require('@/assets/arrow-up.png'); // 红升 +const down2 = require('@/assets/arrow-down.png'); // 绿降 + + +class Opinion extends React.PureComponent { + constructor(props) { + super(props); + } + + + render() { + return ( +
+
民意110
+
+
历史总量
+
+
+ 4 +
+
+ 0 +
+
+ 3 +
+
+
起
+ {/*
+
同比
+
环比
+
+
+
+
10
+
+ 12
+
+
+
+
+
+
+
*/} +
+
+
+
+ 1269 +
+ 历史办结量 +
+
+ + +
+
+ +
+
+
+ ); + } +} + +export default Opinion; diff --git a/src/components/CommandPlatform/right/Opinion.less b/src/components/CommandPlatform/right/Opinion.less new file mode 100644 index 0000000..b634f2d --- /dev/null +++ b/src/components/CommandPlatform/right/Opinion.less @@ -0,0 +1,86 @@ +.opinion { + width: 100%; + + .tit { + width: 100%; + background: lightblue; + height: 52px; + padding-left: 128px; + margin-bottom: 28px; + } + + + + .opinionTop { + width: 100%; + height: 58px; + margin-bottom: 24px; + display: flex; + + .interval { + margin-bottom: 20px; + } + + .top1 { + margin: 0 18px 0 24px; + line-height: 58px; + } + + .top2 { + margin-right: 10px; + display: flex; + + .num { + width: 48px; + height: 58px; + line-height: 58px; + text-align: center; + font-size: 34px; + border: 1px solid lime; + margin-right: 12px; + } + + } + + .num:last-child { + margin-right: 0; + } + + .top3 { + margin-right: 28px; + line-height: 58px; + } + + .top4 { + margin-right: 18px; + } + + .top5 { + display: flex; + } + + .top5>div:nth-child(1) { + margin-right: 10px; + text-align: right; + } + } + + .opinionBottom { + width: 100%; + display: flex; + justify-content: space-between; + + &>div:nth-child(1) { + text-align: center; + &>div{ + width: 100px; + height: 100px; + line-height: 100px; + text-align: center; + margin-bottom: 12px; + } + } + + + } +} \ No newline at end of file