diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyPeriod/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyPeriod/loadable.jsx index aeb041a..e2c4b6e 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyPeriod/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyPeriod/loadable.jsx @@ -178,9 +178,9 @@ function ParkingAlyPeriod() { formatter: (params) => { var str = ""; str = params[0].axisValue.match(/(\S*):/) ? params[0].axisValue.match(/(\S*):/) : params[0].axisValue - str = str[1] ? str[1] + ':59时' : str + str = str[1] ? str[1] + ':59:59' : str return `
- ${params[0].axisValue}-${str}
+ ${params[0].axisValue + ':00'}-${str}
出场次数：${params[0].data}(次)
入场次数：${params[1].data}(次)
` @@ -690,31 +690,30 @@ function ParkingAlyPeriod() { } /> - { - formData.paytype == 0 ? - (hourData.series ? - : -
{loading ? "加载中" : "暂无数据"}
- ) - : - ( - parkData.series ? +
+ { + formData.paytype == 0 ? + (hourData.series ? - : -
暂无数据
- ) - - - } - + key={keyVal} + option={hourData} + style={{ height: "300px", width: "100%", background: '#545d74' }} + /> : +
{loading ? "加载中" : "暂无数据"}
+ ) + : + ( + parkData.series ? + + : +
暂无数据
+ ) + } +
diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss index f822ae6..712710b 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss @@ -150,7 +150,7 @@ $color-primary : var(--color-primary); } .result-box-child { display: flex; - .result-hd { + .result-hdr { color: #ffffff; border-radius: 4px; width: 30%; @@ -318,8 +318,9 @@ $color-primary : var(--color-primary); background-color: #3b97ff; } } -.no-data-box { +.no-data-box-fas { text-align: center; height: 100px; line-height: 100px; + margin: auto; } \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx index 99d9cd9..61c1134 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx @@ -27,7 +27,6 @@ function ParkingFalseAlarms() { }; const [operation, setOperation] = useState([]) const [total, setTotal] = useState() - const [tag, setTag] = useState(0) // 分页数据 const [pageInfo, setPageInfo] = useState({ pn: 1, @@ -199,18 +198,24 @@ function ParkingFalseAlarms() { const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#fc8452', '#3ba272', '#9a60b4', '#ee7ccc'] //停车饱和趋势分析分析 折线图 hour 时间对比 const getParkOption = (data) => { - // if (!data?.list || data?.list.length <= 0) { - // setHourData({}) - // return - // } + if (!data || data?.length <= 0) { + setHourData({}) + return + } + let areaNames = data[0].road_name ? [...new Set(data.map((item) => item.road_name))].sort() : ['']; + let dates, seriesData, xAxisData, tooltip data?.map((item) => { // 获取所有日期 - const dates = [...new Set(item.list.map((item) => item.name))].sort( + dates = [...new Set(item.list.map((item) => item.name))].sort( (a, b) => a.name - b.name ); - // 构建数据对象 - let seriesData = { - name: item.name, + + }) + // 构建数据对象 + seriesData = data?.map((item) => { + let color2 = color[Math.round(Math.random() * 10)] + return { + name: item.road_name, type: "line", itemStyle: { label: { @@ -219,40 +224,39 @@ function ParkingFalseAlarms() { color: 'white',//字体颜色 fontSize: 10//字体大小 }, - // normal: { - // color: color2, //改变折线点的颜色 - // lineStyle: { - // color: color2, - // } - // //改变折线颜色 - // } + normal: { + color: color2, //改变折线点的颜色 + lineStyle: { + color: color2, + } + //改变折线颜色 + } }, data: item.list - }; - - // 构建X轴数据 - const xAxisData = dates.map((date) => { - return { - value: date, - align: "center", - lineStyle: { - color: "skyblue", // 设置线的颜色为天蓝色 - shadowBlur: 6, - }, - - }; - }); - let tooltip = { - formatter: (params) => { - console.log(params) - return `
- ${params[0].axisValue}
- 误报次数：${params[0]?.data?.value}(次)
-
` - } } - setHourData({ ...lineChartOption([], xAxisData, "误报数量（次）", seriesData),...tooltip }); }) + // 构建X轴数据 + xAxisData = dates.map((date) => { + return { + value: date, + align: "center", + lineStyle: { + color: "skyblue", // 设置线的颜色为天蓝色 + shadowBlur: 6, + }, + + }; + }); + tooltip = { + formatter: (params) => { + console.log(params) + return `
+ ${params[0].axisValue}
+ 误报数量：${params[0]?.data?.value}(次)
+
` + } + } + setHourData({ ...lineChartOption(areaNames, xAxisData, "误报数量（次）", seriesData,areaNames), ...tooltip }); }; function getData(data) { ajax @@ -271,61 +275,21 @@ function ParkingFalseAlarms() { ajax .getParkingFalseAlarmsLine(data) .then((res) => { - res = { - "status": 20000, - "message": "成功", - "data": { - "road_list": [{ - "road_name": "武当山路", - "list": [ - { - "name": "2023-12-11", - "value": "26" - }, - { - "name": "2023-12-12", - "value": "58" - }, - { - "name": "2023-12-13", - "value": "50" - } - ] - }], - "device_list": [{ - "road_name": "地磁设备", - "list": [ - { - "name": "2023-12-11", - "value": "303" - }, - { - "name": "2023-12-12", - "value": "469" - }, - { - "name": "2023-12-13", - "value": "309" - } - ] - }] - } - } if (res.status === 20000) { setLineData(res.data) - //getParkOption(res.data); + getParkOption(res.data.device_list); setLoading(false) } }) .catch((err) => console.error(err)); } - useEffect(() => { - if (tag) { - getParkOption(lineData.device_list) - } else { - getParkOption(lineData.road_list) - } - }, [lineData, tag]); + // useEffect(() => { + // if () { + // getParkOption(lineData.device_list) + // } else { + // getParkOption(lineData.road_list) + // } + // }, [lineData]); // 获取下拉数据 const getSelectList = () => { ajax.getOperator().then((e) => { @@ -352,7 +316,6 @@ function ParkingFalseAlarms() { setLoading(false); setTabLoading(false); let params = { ...postData, ...v, ...pageInfo } - setTag(0) //请求接口 getParkingData(params) getData(params) @@ -386,6 +349,7 @@ function ParkingFalseAlarms() { } }; + //下拉数据，商户 const operationName = () => { ajax.getAllOperator().then(res => { if (res.status == 20000) { @@ -415,7 +379,7 @@ function ParkingFalseAlarms() { placeholder="请选择" options={[ { value: "0", label: "全部" }, - { value: "1", label: "地磁" } + { value: "1", label: "地磁设备" } ]} value={formData.device_type} onChange={(v) => @@ -594,17 +558,17 @@ function ParkingFalseAlarms() {
误报情况分析
-
-
{ setTag(0) }}> +
+
频繁误报路段
-
{lineData?.road_list?.road_name || "--"}
+
{lineData?.road_name || "--"}
-
{ setTag(1) }}> +
频繁误报设备
-
{lineData?.road_list?.road_name || "--"}
+
{lineData?.device_name || "--"}
@@ -617,7 +581,7 @@ function ParkingFalseAlarms() { />
: -
{loading ? "加载中" : "暂无数据"}
+
{loading ? "加载中" : "暂无数据"}
}
diff --git a/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx b/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx index 6789561..32357da 100644 --- a/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx +++ b/src/pages/OperationCenter/UserMgm/UserTag/loadable.jsx @@ -32,12 +32,12 @@ function UserTag() { const [pageData, setPageData] = useState({ // 分页参数 pn: 1, - length: 15, + page_size: 15, }); - function onShowSizeChange(pn, length) { + function onShowSizeChange(pn, page_size) { setPageData({ pn, - length, + page_size, }); } const columns = [ @@ -302,7 +302,9 @@ function UserTag() {
useEffect(() => { - searchDetail({id:myId}) + if (myId) { + searchDetail({ id: myId }) + } }, [pageData]); return ( @@ -360,7 +362,7 @@ function UserTag() { //showTotal={() => `共 ${total} 条`} total={detailTotal} current={pageData.pn} - pageSize={pageData.length} + pageSize={pageData.page_size} pageSizeOptions={dictionary?.pageSizeOptions} onChange={onShowSizeChange} onShowSizeChange={onShowSizeChange}