diff --git a/src/components/VideoPlay/index.scss b/src/components/VideoPlay/index.scss index bd8fe32..f091abf 100644 --- a/src/components/VideoPlay/index.scss +++ b/src/components/VideoPlay/index.scss @@ -184,3 +184,10 @@ min-height: 400px; } } +.video-play-wrap { + .rm-video { + width: 100%; + height: 100%; + min-height: 400px; + } +} \ No newline at end of file diff --git a/src/components/form/FormTreeSelectNew/index.jsx b/src/components/form/FormTreeSelectNew/index.jsx index 6a2510f..462d469 100644 --- a/src/components/form/FormTreeSelectNew/index.jsx +++ b/src/components/form/FormTreeSelectNew/index.jsx @@ -13,6 +13,11 @@ export default function FormTreeSelectNew(props) { placeholder = "请选择", value = [], treeData = [], + fieldNames={ + label: "name", + value: "id", + children: "children", + }, disabled = false, className = "", maxHeight = 400, @@ -174,6 +179,7 @@ export default function FormTreeSelectNew(props) { allowClear={allowClear} value={value} disabled={disabled} + fieldNames={fieldNames} dropdownStyle={{ maxHeight: maxHeight, overflow: "auto" }} treeData={data} placeholder={placeholder} diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss index c59bd61..e389afc 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/index.scss @@ -5,7 +5,7 @@ $color-user-list-bg : var(--color-user-list-bg); $color-text : var(--color-text); $color-primary : var(--color-primary); -.parkaly-box { +.parkfalse-box { display: flex; padding-top: 10px; width: 100%; diff --git a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx index 965fd9c..0ffe3d3 100644 --- a/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingFalseAlarms/loadable.jsx @@ -379,7 +379,8 @@ function ParkingFalseAlarms() { placeholder="请选择" options={[ { value: "0", label: "全部" }, - { value: "1", label: "地磁设备" } + { value: "1", label: "地磁设备" }, + { value: "2", label: "高位视频" }, ]} value={formData.device_type} onChange={(v) => diff --git a/src/pages/NewEnergy/ChargeStationMgm/index.jsx b/src/pages/NewEnergy/ChargeStationMgm/index.jsx index e69de29..d1dc1c2 100644 --- a/src/pages/NewEnergy/ChargeStationMgm/index.jsx +++ b/src/pages/NewEnergy/ChargeStationMgm/index.jsx @@ -0,0 +1,6 @@ +import React from "react" +import loadable from "@loadable/component" +import { LoadingImg } from "@/components" + +const Appointment = loadable(() => import("./loadable")) +export default (pros) => } /> \ No newline at end of file diff --git a/src/pages/NewEnergy/ChargeStationMgm/index.scss b/src/pages/NewEnergy/ChargeStationMgm/index.scss new file mode 100644 index 0000000..3ac3e8d --- /dev/null +++ b/src/pages/NewEnergy/ChargeStationMgm/index.scss @@ -0,0 +1,21 @@ +.add-station-modal { + .add-station-body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + .row { + width: 100%; + margin: 10px 0; + } + .cc-form-tree { + margin-bottom: 0; + } + .cc-form-content,.form-select-single-content { + flex: auto; + } + .cc-form-name,.form-select-single-name { + width: 100px; + } + } +} \ No newline at end of file diff --git a/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx b/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx new file mode 100644 index 0000000..63062b4 --- /dev/null +++ b/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx @@ -0,0 +1,355 @@ +import React, { useState, useRef, useEffect } from "react"; +import { + message, + Modal, + Button, + Cascader +} from "antd"; +import ajax from "@/services"; +import { useSessionStorageState, useSetState } from "ahooks" +import { TableModule, FormInput, FormSelect, FormTreeSelectNew } from "@/components"; +import "./index.scss"; + + +function Appointment() { + // 详情弹窗 + const [detailVisible, setDetailVisible] = useState(false); + // 列表数据 + const [tableData, setTableData] = useState([]); + // 数据总数 + const [total, setTotal] = useState(0); + // 详情数据 + const [detailData, setDetailData] = useState({}); + // 站点状态下拉 + const [siteList, setSiteList] = useState([]); + // 区域下拉 + const [areaList, setAreaList] = useState([]); + //商户名称下拉 + const [operatorList, setOperatorList] = useState([]); + // 添加站点 + const initAdd = { + name: "", + code: "", + address: "", + site_type: "", + area: "", + operator: "" + } + const [addFormData, setAddFormData] = useSetState(initAdd); + const [formData, setFormData] = useSetState({}); + // 初始搜索条件 + const initFormData = { + operator: "0", + rule_name: "", + }; + + const columns = [ + { + title: "充电站名称", + dataIndex: "name", + key: "name", + align: "center", + }, + { + title: "充电站编码", + dataIndex: "code", + key: "code", + align: "center", + }, + { + title: "站点类型", + dataIndex: "site_type", + key: "site_type", + align: "center", + }, + { + title: "所属区域", + dataIndex: "area", + key: "area", + align: "center", + }, + { + title: "详细地址", + dataIndex: "address", + key: "address", + align: "center", + }, + { + title: "车位总数", + dataIndex: "count", + key: "count", + align: "center", + }, + { + title: "商户名称", + dataIndex: "operator", + key: "operator", + align: "center", + }, + { + title: "站点状态", + dataIndex: "site_status", + key: "site_status", + align: "center", + }, + { + title: "操作", + dataIndex: "operation", + key: "operation", + align: "center", + fixed: "right", + width: 100, + render: (text, record, index) => { + return ( + <> + + + ) + + }, + }, + ]; + + const formSearch = [ + { + name: "name", + type: "Input", + label: "充电站名称", + placeholder: "请输入充电站名称", + }, + { + name: "area", + type: "TreeSelect", + defaultValue: "0", + label: "所属区域", + placeholder: "请选择所属区域", + }, + { + name: "site_status", + type: "Select", + label: "站点状态", + options: [ + { value: "0", label: "全部" }, + ...siteList + ], + defaultValue: "0", + placeholder: "请选择站点状态", + }, + { + name: "operator", + type: "Select", + label: "商户名称", + defaultValue: "0", + placeholder: "请选择商户名称", + }, + ]; + + const init = () => { + getSiteStatus() + getAreaList() + getAllOperator() + } + // 获取站点状态下拉 + const getSiteStatus = () => { + ajax.getSiteStatus().then((res) => { + const { status, data } = res + if (status === 20000) { + if (data && data.length) { + data.shift() + setSiteList(data); + } + } else { + message.error(res.message) + } + }); + } + // 获取区域下拉 + const getAreaList = () => { + ajax.getAreaTree().then((res) => { + const { status, data } = res + if (status === 20000) { + if (data && data.length) { + data.shift() + setAreaList(data); + } + } + }).catch((err) => { + console.error(err); + }); + } + // 获取商户下拉 + const getAllOperator = () => { + ajax.getAllOperator().then((res) => { + const { status, data } = res + if (status === 20000) { + if (data && data.length) { + data.shift() + setOperatorList(data); + } + } + }).catch((err) => { + console.error(err); + });; + } + + // 打开弹窗 + const openModal = (index, record) => { + setDetailData(record) + setDetailVisible(true); + } + + // 检索 + const search = (params) => { + ajax.getStationList(params).then((res) => { + if (res.status === 20000) { + setFormData(params) + setTableData(res.data); + setTotal(res.total); + } else { + message.error(res.message) + } + }); + } + // 新增 + const handelAdd = () => { + setAddFormData(initAdd) + setDetailVisible(true) + } + + const handelOk = () => { + ajax.addStation(addFormData).then((res) => { + if (res.status === 20000) { + message.success("新增成功") + setDetailVisible(false); + setAddFormData(initAdd) + search(formData) + } else { + message.error(res.message) + } + }); + } + + useEffect(() => { + init() + }, []) + + + return ( + <> + + 新增 + + } + columns={columns} + tableData={tableData} + formSearch={formSearch} + pagename="充电站管理" + pageName={'chargeStationMgm'} + initFormData={initFormData} + total={total} + search={search} + exportUrl="/api/bpm/record/get_record_export" + /> + { + setDetailVisible(false); + }} + onOk={handelOk} + destroyOnClose + > +
+
+ { setAddFormData({ name: e.target.value }) }} + /> +
+
+ { setAddFormData({ code: e.target.value }) }} + /> +
+
+ { setAddFormData({ address: e.target.value }) }} + /> +
+
+ { setAddFormData({ site_type: e }) }} + /> +
+
+ { setAddFormData({ area: e }) }} + /> + {/* */} +
+
+ { setAddFormData({ operator: e }) }} + /> +
+
+ + + ); +} + +export default Appointment; diff --git a/src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss b/src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss index 9a8202a..23f35ce 100644 --- a/src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss +++ b/src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss @@ -171,68 +171,113 @@ $color-primary: var(--color-primary); border-color: var(--color-border); } -// .yisa-table { -// width: 100%; - -// .ant-table-thead { -// th { -// background: var(--color-table-header-bg) !important; -// } -// } - -// .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; -// } -// } -// } -// } -.totalModal{ - .ant-modal-footer{ - display: none; +.totalModal { + .ruleTitle { + font-size: 16px; + font-weight: 700; + color: #ffffff; } - position: absolute; - top: 40px; - right: 174px; -} -.ltc-item-img { - width: 390px; - height: 300px; - border: 1px solid; - background: #6565656b; - margin-right: 20px !important; - img { - height: 295px; - width: 387px; - // object-fit: contain; + .ant-modal-content{ + width: 796px; + } + .modal-form{ + margin: 20px 0 0 0; + .yisa-search{ + margin-bottom: 20px; + label{ + color: #eeeff1; + } + .ant-input-textarea-show-count:after{ + position: absolute; + bottom: 19%; + right: 7%; + } + textarea{ + position: relative; + } + } + } + + + .ant-modal-footer{ + display: flex; + justify-content: center; + .ant-btn{ + width: 88px; + height: 35px; + color: #fff; + border: none; + border-radius: 4px; + } + .ant-btn:last-child{ + background: #409eff; + } } } -.hanleHistoyModal{ - max-height: 700px; - overflow: auto; -} -.hanleHistoyModal::-webkit-scrollbar { - width: 5px; -} -.hanleHistoyModal::-webkit-scrollbar-thumb { - background-color: #9da2ab; - border-radius: 10px; -} -.modal-img{ - img{ - width: 200px; - height: 200px; +.detail-Modal{ + .ruleTitle { + font-size: 16px; + font-weight: 700; + color: #ffffff; + } + .ltc-content { + display: flex; + flex-wrap: wrap; + margin: auto; + padding: 20px; + color: #ffffff; + .ltc-item { + font-size: 14px; + margin: 6px 12px 6px 0; + display: inline-flex; + flex: 1; + //width: 470px; + .new-item { + display: inline-block; + width: 120px; + height: 32px; + line-height: 32px; + background: rgba(150, 161, 192, 0.24); + text-align: center; + } + + .new-value { + display: inline-block; + width: 320px; + height: 32px; + line-height: 32px; + text-align: center; + background: #3E4557; + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12); + } + + .ltc-item-input { + display: inline-block; + width: 200px; + } + + div { + width: 150px; + } + } + .last-row{ + width: 100%; + display: flex; + flex-direction: column; + .rule-description{ + .new-item{ + line-height: 96px; + height: 96px; + } + .new-value{ + width: 780px; + line-height: 96px; + height: 96px; + word-wrap:break-word + } + } + } + } + } \ No newline at end of file diff --git a/src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx b/src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx index 4ef6d7b..a9f38d7 100644 --- a/src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx +++ b/src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx @@ -18,55 +18,67 @@ import { import { dictionary } from "@/config/common"; import ajax from "@/services"; import { TableModule } from "@/components"; +import moment from 'moment' import "./index.scss"; const { TextArea } = Input; function BillingRule() { + // 初始搜索条件 + const initFormData = { + operator_id: "0", + rule_name: "", + }; + const params ={ + operator_id:'', + rule_name:'', + rule_code:'', + rule_description:'', + time:moment().format("YYYY-MM-DD HH:mm:ss"), + username:'' + } + // 新增or详细弹框 + const [modalData, setModalData] = useState(params) // 详情弹窗 const [detailVisible, setDetailVisible] = useState(false); // 列表数据 const [tableData, setTableData] = useState([]); // 数据总数 const [total, setTotal] = useState(0); - // 详情数据 - const [detailData, setDetailData] = useState({}); - // 初始搜索条件 - const initFormData = { - operator: "0", - rule_name: "", - }; - + const [operatorOption, setOperatorOption] = useState([]) + const [ruleDetailVisible, setRuleDetailVisible] = useState(false) + const [detailsData, setDetailsData] = useState({}) + const tableRef = useRef(null) const columns = [ { title: "运营商名称", - dataIndex: "operator", - key: "operator", + dataIndex: "operator_name", + key: "operator_name", align: "center", }, { title: "规则名称", - dataIndex: "plate", - key: "plate", + dataIndex: "rule_name", + key: "rule_name", align: "center", }, { title: "规则编码", - dataIndex: "plate_color", - key: "plate_color", + dataIndex: "rule_code", + key: "rule_code", align: "center", }, { title: "创建人", - dataIndex: "berth_id", - key: "berth_id", + dataIndex: "creator", + key: "creator", width: 100, align: "center", }, { title: "创建时间", - dataIndex: "in_time", - key: "in_time", + dataIndex: "create_time", + key: "create_time", align: "center", }, { @@ -79,9 +91,9 @@ function BillingRule() { render: (text, record, index) => { return ( <> - + ) @@ -91,11 +103,12 @@ function BillingRule() { const formSearch = [ { - name: "operator", + name: "operator_id", type: "Select", - label: "商户名称", + label: "运营商名称", defaultValue: "0", - placeholder: "请选择商户名称", + placeholder: "请选择运营商名称", + options:operatorOption.length ? operatorOption : [{value:"0",label:'全部'}] }, { name: "rule_name", @@ -107,21 +120,38 @@ function BillingRule() { name: "timePeriod", type: "RangePicker", label: "时间段", + defaultValue: [moment().subtract(1,"months"), moment()] }, ]; - + // 获取运营商名字 + const getAllOperator =() => { + ajax.getOperatorList().then((res) => { + if (res.status === 20000) { + setOperatorOption(res.data); + } + }); + } // 打开弹窗 const openModal = (index, record) => { - setDetailData(record) - setDetailVisible(true); + setDetailsData(record) + setRuleDetailVisible(true); } // 检索 const search = (params) => { - ajax.getParkingList(params).then((res) => { + console.log("params",params); + let data = { + ...params, + type:1 + } + ajax.getRegularList(data).then((res) => { if (res.status === 20000) { setTableData(res.data.list); setTotal(res.data.total); + setModalData({ + ...modalData, + username:res.data.username, + }) } else { message.error(res.message) } @@ -129,9 +159,43 @@ function BillingRule() { } const handelAdd = () => { + setModalData({ + ...params, + username:modalData?.username + }) setDetailVisible(true) } +// 处理弹框ok按钮 + const handleConfirm = () => { + if(!modalData?.operator_id){ + message.warning("运营商名称不能为空") + return + }else if(!modalData?.rule_name){ + message.warning("规则名称不能为空") + return + }else if(!modalData?.rule_code){ + message.warning("规则编码不能为空") + return + } + // 发保存请求 + ajax.addRule({...modalData,type:1}).then(res => { + if (res.status === 20000) { + message.success(res.message) + tableRef.current.fetch() + setModalData({ + ...params, + username:modalData?.username + }) + setDetailVisible(false) + } + }).catch(err => { + console.log(err); + }) + } + useEffect(() => { + getAllOperator() + },[]) return ( <> } columns={columns} + ref={tableRef} tableData={tableData} formSearch={formSearch} pagename="停车记录查询" - pageName={'billingRule'} initFormData={initFormData} total={total} search={search} @@ -157,14 +221,145 @@ function BillingRule() { /> { + setModalData({...params,username:modalData?.username}) + setDetailVisible(false); + }} + onOk={() => { + handleConfirm() setDetailVisible(false); }} + okText="保存" destroyOnClose > - +
+ 新增规则 +
+
+
+ * + + {setModalData({...modalData,rule_name:v.target.value})}} + /> +
+
+ * + + {setModalData({...modalData,rule_code:v.target.value})}} + /> +
+
+ * + + {setModalData({...modalData,creator:v.target.value})}} + /> +
+
+ * + + {setModalData({...modalData,creat_time:v.target.value})}} + /> +
+
+ +