diff --git a/src/assets/images/equip/equip1.png b/src/assets/images/equip/equip1.png new file mode 100644 index 0000000..e4e5325 Binary files /dev/null and b/src/assets/images/equip/equip1.png differ diff --git a/src/assets/images/equip/equip2.png b/src/assets/images/equip/equip2.png new file mode 100644 index 0000000..894e967 Binary files /dev/null and b/src/assets/images/equip/equip2.png differ diff --git a/src/assets/images/equip/equip3.png b/src/assets/images/equip/equip3.png new file mode 100644 index 0000000..b2cd49a Binary files /dev/null and b/src/assets/images/equip/equip3.png differ diff --git a/src/assets/images/equip/equip4.png b/src/assets/images/equip/equip4.png new file mode 100644 index 0000000..97cadc8 Binary files /dev/null and b/src/assets/images/equip/equip4.png differ diff --git a/src/assets/images/equip/equip5.png b/src/assets/images/equip/equip5.png new file mode 100644 index 0000000..c0eccc5 Binary files /dev/null and b/src/assets/images/equip/equip5.png differ diff --git a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss index 1838f71..7502c2c 100644 --- a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss +++ b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss @@ -3,3 +3,294 @@ $color-container-bg : var(--color-container-bg); $color-user-list-bg : var(--color-user-list-bg); $color-text : var(--color-text); $color-primary : var(--color-primary); + +.ExceptionParkReport { + padding: 10px 0 10px 20px; + height: 100%; + position: relative; + + + + .body_cenf { + display: flex; + height: 100%; + + .left_search { + width: 370px; + height: 100%; + + .hrestit { + height: 21px; + width: 370px; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + margin: 10px 0 10px; + } + + .form_item { + width: 100%; + display: flex; + align-items: center; + padding: 0 10px 16px 0; + + .lab { + width: 90px; + text-align: right; + margin-right: 10px; + } + + .labb { + width: 90px; + text-align: right; + margin-right: 10px; + // display: flex; + display: flex; + align-items: center; + + .daf { + margin-left: 4px; + // border: 1px solid var(--color-table-border-bottom-color); + } + } + + .labs { + width: 120px; + text-align: right; + // border: 1px solid var(--color-table-border-bottom-color); + margin-right: 10px; + } + + .inputs { + flex: 1; + // border: 1px solid var(--color-table-border-bottom-color); + border-radius: 4px; + overflow: hidden; + } + + .inputst { + // flex: 228px; + // border: 1px solid var(--color-table-border-bottom-color); + border-radius: 4px; + overflow: hidden; + } + } + + .but_on { + display: flex; + // align-items: center; + margin: 0 10px 0 0; + justify-content: space-between; + font-size: 16px; + font-size: 16px; + + span { + width: 110px; + height: 36px; + border-radius: 4px; + color: #ffffff; + margin-right: 10px; + text-align: center; + line-height: 36px; + cursor: pointer; + } + + .sear_ser, + .sear_rep { + background: linear-gradient(180deg, #3aa9ff, #59b7ff); + } + + .sear_res { + background: #636d80; + } + + .lent { + width: 230px; + margin-left: 20px; + } + } + } + + .right_tab { + width: calc(100% - 370px); + height: 100%; + padding: 20px; + background: var(--color-user-list-bg); + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12); + border-radius: 28px 0 0 0; + + .sheisgirl { + margin: 10px 0; + display: flex; + height: 108px; + justify-content: space-between; + + .gchild { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 19%; + border-radius: 10px; + padding: 10px 16px; + + .gps { + font-size: 20px; + } + + .gnu { + font-size: 14px; + } + + .gnum { + font-size: 18px; + } + } + } + + .sd { + display: flex; + justify-content: space-between; + margin-bottom: 12px; + + p { + margin-bottom: 0%; + font-size: 14px; + color: $color-text; + + span { + font-weight: 700; + margin: 0 4px; + color: $color-primary; + } + } + + + .sear_ser { + display: block; + width: 68px; + height: 34px; + border-radius: 4px; + color: #ffffff; + text-align: center; + line-height: 34px; + cursor: pointer; + background: linear-gradient(180deg, #3aa9ff, #59b7ff); + } + } + + .scrplltab { + width: 100%; + overflow-x: scroll; + // position: relative; + @include scrollBar(var(--color-user-list-bg), #3B97FF); + + .poxi { + cursor: pointer; + background-color: var(--color-table-header-bg); + width: 24px; + height: 50px; + position: fixed; + right: 20px; + top: 277px; + padding: 10px 8px; + z-index: 12; + + .colsa { + color: #3AA9FF; + } + } + + .showas { + top: 477px + } + } + + .table_raps { + // width: 3146px; + } + + .yisa_tabled { + width: 100%; + + .ant-table-thead { + th { + border: rgba(255, 255, 255, .08) 1px solid; + // background: var(--color-table-header-bg) !important; + + i { + cursor: pointer; + margin-left: 10px; + display: inline-block; + width: 14px; + height: 14px; + border: solid 1px $color-text; + border-radius: 7px; + line-height: 14px; + text-align: center; + } + + &::before { + display: none; + } + } + + .ant-table-selection-column { + text-align: center; + padding: 0; + } + } + + .ant-table-body { + @include scrollBar(var(--color-user-list-bg), #3B97FF); + + } + + // .ant-table-tbody { + // td { + // background: var(--color-table-body-bg) !important; + // border-bottom-color: var(--color-table-border-bottom-color); + // } + + // tr:nth-child(even) { + // td { + // background: var(--color-table-body-bg-nth-child-even) !important; + // } + // } + + // tr:nth-child(odd) { + // td { + // background: var(--color-table-body-bg-nth-child-even) !important; + // } + // } + // } + } + } + } +} + + +.ant-tooltip-inner, +.ant-tooltip-arrow-content:before { + background-color: $color-container-bg; +} + + +.selectcolsopt { + width: 160px; + height: 470px; + + .tirl { + font-size: 16px; + margin-bottom: 4px; + + + } + + .ant-checkbox-inner { + border-color: $color-text; + } + + font-size: 14px; + color: $color-text; +} \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx index 9ab07dc..0323c36 100644 --- a/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx @@ -1,15 +1,714 @@ import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; -// import { dictionary, utils } from "@/config/common"; -// import moment from 'moment' +import { + message, + Pagination, + Table, + Select, + Input, + Popover, + Cascader, + AutoComplete, + Tooltip, + Checkbox, + Form, + DatePicker, +} from "antd"; +import { dictionary, utils } from "@/config/common"; +import moment from "moment"; +import { + FunnelPlotOutlined, + CloseOutlined, + InfoCircleOutlined, + DownOutlined, + UpOutlined, +} from "@ant-design/icons"; +import ajax from "@/services"; // import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; -// import ajax from "@/services" -// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" -// import "./index.scss"; -// import errorImg from "@/assets/images/layout/error.png" +import { ResultFlow } from "@/components"; +import "./index.scss"; +import Equip1 from "@/assets/images/equip/equip1.png"; +import Equip2 from "@/assets/images/equip/equip2.png"; +import Equip3 from "@/assets/images/equip/equip3.png"; +import Equip4 from "@/assets/images/equip/equip4.png"; +import Equip5 from "@/assets/images/equip/equip5.png"; // import { useLocation } from "react-router-dom"; +const { RangePicker } = DatePicker; +const { TextArea } = Input; function ExceptionParkReport() { - return
ExceptionParkReport
+ const formdata = { + operator_id: "0", //商户 + name: "", //停车场名称 + park_type: "", //车场类型 1=路内 2=路外 + operator_status: [], //商用状态(1为待上线，2为商用，3为试运营，4为下线) + area: [], + date_type: "1", + is_excel: 0, + start_time: moment() + .startOf("day") + .subtract(1, "days") + .format("YYYY-MM-DD"), + end_time: moment().endOf("day").subtract(1, "days").format("YYYY-MM-DD"), + pn: 1, + page_size: dictionary?.pageSizeOptions1[0], + }; + //图新展示 + const tabt = [ + { + text: "设备总数(个)", + value: 4642, + icon: Equip1, + }, + { + text: "离线次数(次)", + value: 1, + icon: Equip2, + tip: "离线时间大于20分钟，记为1次离线，连续离线不会记多次", + }, + { + text: "离线总时长", + value: "32天20时49分0秒", + icon: Equip3, + }, + { + text: "离线时长占比", + value: "99.58%", + icon: Equip4, + tip: "离线设备总时长/离线设备工作时长*100%", + }, + { + text: "离线时长占比", + subtext: "(全部设备)", + value: "0.71%", + icon: Equip5, + tip: "离线设备总时长/全区所有设备工作时长*100%", + }, + ]; + + const col = [ + { + title: "车场名称", + dataIndex: "road_name", + key: "road_name", + align: "center", + }, + { + title: "设备总数", + dataIndex: "date", + key: "date", + align: "center", + }, + { + title: "离线次数", + dataIndex: "date", + key: "date", + align: "center", + }, + { + title: "离线总时长", + dataIndex: "date", + key: "date", + align: "center", + }, + { + title: "离线设备离线时长占比", + dataIndex: "date", + key: "date", + align: "center", + }, + { + title: "全部设备离线时长占比", + dataIndex: "date", + key: "date", + align: "center", + }, + ]; + let form_data = sessionStorage.getItem("FormData_OperationReport"); + //检索 + const [FormData, setFormData] = useState( + form_data ? JSON.parse(form_data) : formdata + ); + //检索2 + const [FormDatas, setFormDatas] = useState( + form_data ? JSON.parse(form_data) : formdata + ); + //页码状态 + const [loading, setLoading] = useState(false); + //页面数据 + const [Data, setData] = useState({ + data: [], + total: 0, + }); + + //获取区域 + const [Area, setArea] = useState([]); + //商户 + const [Yunying, setYunying] = useState([]); + //自动填充 + const [options, setOptions] = useState([]); + + const [Open, setOpen] = useState(true); + //筛选 + const [selectArr, setSelectArr] = useState([]); + //是否展开显示 + const [Show, setShow] = useState(false); + const column = (arr) => { + let copr = []; + if (arr.length) { + col.forEach((ele, index) => { + if (ele.children) { + var lisr = []; + let bool = false; + ele.children.forEach((val) => { + if (!arr.includes(val.key)) { + lisr.push(val); + bool = true; + } + }); + if (bool) { + copr.push({ ...ele, children: [...lisr] }); + } + } else { + if (!arr.includes(ele.key)) { + copr.push(ele); + } + } + }); + } else { + copr = col; + } + return [...copr]; + }; + const onSearch = (searchText) => { + console.log(searchText); + setOptions([]); + }; + + //时间状态切换 + const TimeChange = () => { + let e = FormData.date_type; + let str = "date"; + let mat = "YYYY-MM-DD"; + if (e == 4) { + str = "year"; + mat = "YYYY"; + } else if (e == 3) { + str = "month"; + mat = "YYYY-MM"; + } else if (e == 2) { + str = "week"; + mat = "YYYY-MM-DD"; + } + return { str, mat }; + }; + //切换时间变化 + const SetTimeNow = (e) => { + let start = ""; + let end = ""; + if (e == 4) { + start = moment().format("YYYY"); + end = moment().format("YYYY"); + } else if (e == 3) { + start = moment().format("YYYY-MM"); + end = moment().format("YYYY-MM"); + } else if (e == 2) { + start = moment().day(1).format("YYYY-MM-DD"); + end = moment().day(7).format("YYYY-MM-DD"); + } else { + start = moment().startOf("day").subtract(1, "days").format("YYYY-MM-DD"); + end = moment().endOf("day").subtract(1, "days").format("YYYY-MM-DD"); + } + setFormData({ + ...FormData, + date_type: e, + start_time: start, + end_time: end, + }); + }; + + //页码 + function onShowSizeChange(pn, page_size) { + let temFormData = {}; + if (FormData.page_size == page_size) { + temFormData = { + ...FormData, + pn, + }; + } else { + temFormData = { + ...FormData, + pn: 1, + page_size, + }; + } + setFormData(temFormData); + setFormDatas(temFormData); + } + const onChange = (eal) => { + var e = eal; + var are = JSON.parse(JSON.stringify(selectArr)); + if (are.includes(e)) { + are.forEach((ele, index) => { + if (ele == e) { + are.splice(index, 1); + } + }); + } else { + are.push(e); + } + setSelectArr([...are]); + }; + + const SelectCol = () => { + return ( +
+

隐藏列

+ {col.map((ele) => { + if (ele.children) { + return ele.children.map((val) => { + return ( +
+ onChange(val.key)} + disabled={ + selectArr.length == 19 && !selectArr.includes(val.key) + } + > + {val.title} + +
+ ); + }); + } else { + return ( +
+ onChange(ele.key)} + disabled={ + selectArr.length == 19 && !selectArr.includes(ele.key) + } + > + {ele.title} + +
+ ); + } + })} +
+ ); + }; + //获取页面筛选数据 + const getSelectData = () => { + ajax.getAllOperator().then( + (res) => { + if (parseInt(res?.status) === 20000) { + setYunying(res.data); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + ajax.getAreaTree().then( + (res) => { + if (parseInt(res?.status) === 20000) { + setArea(res.data); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //下载 + const Daownload = (url) => { + var link = document.createElement("a"); + link.setAttribute("target", "_blank"); + link.style.display = "none"; + link.href = url ? url : ""; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + //导出 + const ReportPaySummaryReport = () => { + ajax.ElectInvoice.getOperationReport({ + ...FormDatas, + is_excel: 1, + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + Daownload(res?.data?.url); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + } + ); + }; + //获取页面显示数据 + const getData = (data) => { + setLoading(false); + ajax.ElectInvoice.getOperationReport({ + ...data, + area: data?.area?.length ? data?.area[data.area.length - 1] : "", + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setData({ + data: res?.data?.list || [], + total: res?.total || 0, + }); + setLoading(true); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + useEffect(() => { + sessionStorage.setItem( + "FormData_OperationReport", + JSON.stringify(FormDatas) + ); + // getData(FormDatas); + //调用接口 + }, [FormDatas]); + useEffect(() => { + getSelectData(); + }, []); + return ( +
+
+
+
查询条件
+
+
+ 日期 +
+ + setFormData({ + ...FormData, + operator_id: e, + }) + } + /> +
+
+
+ 停车场 +
+ { + console.log(e); + setFormData({ + ...FormData, + name: e, + }); + }} + /> +
+
+
+ 车场类型 +
+