fix():修改运营中心反馈建议页面

src/pages/InRoadMgm/BusinessMgm/ChargeRules/EditModal.jsx

@@ -216,7 +216,7 @@ const FormModal = (props) => {
     //校验数据
     if(handleFormValidation(data,0)&&handleFormValidation(data,1)){
       let newData = handelDate(data, 1)
-      ajax.deleteChangeRules(newData).then(res => {
+      ajax.deleteChangeRules({source:newData}).then(res => {
         if (res.status === 20000) {
           editVisible = false
         }
@@ -342,6 +342,10 @@ const FormModal = (props) => {
   //提交表单校验
   const handleFormValidation = (data,type) => {
     const validationData = type == 0 ? data.rules[0].details : data.rules[0].holiday
+    //排除同工作日计算校验
+    if(type===1 &&validationData.length==0){
+      return true;
+    }   
     let flag = false;
     let totalMinutes = 0; // 初始化总分钟数为0
     validationData.forEach((isData) => {
@@ -359,15 +363,19 @@ const FormModal = (props) => {
     const totalHours = Math.floor(totalMinutes / 60);
     const remainingMinutes = totalMinutes % 60;
     console.log("当前区间时间总和", totalHours + ":" + remainingMinutes); // 输出每个 details 中总时间的数组
+    //判断holiday不是自定义
+    const copyData = {...data};
+    if(getValueData !=2 ){
+      data.rules[0].holiday = [];
+    }else{
+      copyData.length==0?data.rules[0].holiday = defaultData.rules[0].holiday:copyData
+    }
     if (totalHours === 23 && remainingMinutes === 59) {
       flag = true;
     } else {
       message.error("时间区间总和需要为23:59，请完善区间");
     }
-    //判断holiday不是自定义
-    if(getValueData !=2 ){
-      data.rules[0].holiday = [];
-    }
+
     return flag;
   };
   //初始区间数据
@@ -752,13 +760,13 @@ const FormModal = (props) => {
                               </div>
                               <div className="time">
                                 <label className="rule">工作日计费规则:</label>
-                                <div>
-                                  <Form.List name={[name, "details"]}>
+                                <div className="move">
+                                  <Form.List name={[name, "details"]} >
                                     {(fields, { add, remove }) => (
                                       <>
                                         {fields.map(({ key, name, ...restField }, i) => {
                                           return (
-                                            <div key={'details-' + key}>
+                                            <div key={'details-' + key} className="row-rule">
                                               <div className="row">
                                                 <Form.Item
                                                   {...restField}
@@ -927,13 +935,13 @@ const FormModal = (props) => {
                                     ]}
                                   />
                                 </div>
-                                <div className={getValueData == 1 ? "hide" : ""}>
+                                <div className={getValueData == 1 ? "hide move" : " move"}>
                                   <Form.List name={[name, "holiday"]}>
                                     {(fields, { add, remove }) => (
                                       <>
                                         {fields.map(({ key, name, ...restField }, i) => {
                                           return (
-                                            <div key={'holiday-' + key}>
+                                            <div key={'holiday-' + key} className="row-rule">
                                               <div className="row">
                                                 <Form.Item>
                                                   <Popover open={open}

src/pages/InRoadMgm/BusinessMgm/ChargeRules/FormModal.jsx

@@ -158,6 +158,7 @@ const FormModal = (props) => {
             if (_key == "unitUp") {
               _arr[curNum][_key] = _val ? 1 : 0;
             } else if (_key == "details" || _key == "holiday") {
+              console.log("_key",_key)
               let _curNum = _val.length - 1;
               let _curObj = _val[curNum];
               if (_curObj) {
@@ -235,10 +236,11 @@ const FormModal = (props) => {
 
   // 表单提交
   const onFinish = (data) => {
+    console.log("onFinishData",data)
     //校验数据
     if(handleFormValidation(data,0)&&handleFormValidation(data,1)){
       let newData = handelDate(data, 1)
-      ajax.addChangeRules(newData).then(res => {
+      ajax.addChangeRules({source:newData}).then(res => {
         if (res.status === 20000) {
           setGetAddVisible(false)
         }
@@ -330,8 +332,13 @@ const FormModal = (props) => {
   //提交表单校验
   const handleFormValidation = (data,type) => {
     const validationData = type == 0 ? data.rules[0].details : data.rules[0].holiday
+    //排除同工作日计算校验
+    if(type==1 &&validationData.length==0){
+      return true;
+    }
     let flag = false;
     let totalMinutes = 0; // 初始化总分钟数为0
+
     validationData.forEach((isData) => {
       if (isData.end == null || isData.start == null) {
         message.error("时间字段不能为空");
@@ -347,15 +354,18 @@ const FormModal = (props) => {
     const totalHours = Math.floor(totalMinutes / 60);
     const remainingMinutes = totalMinutes % 60;
     console.log("当前区间时间总和", totalHours + ":" + remainingMinutes); // 输出每个 details 中总时间的数组
+    //判断holiday不是自定义
+    const copyData = {...data};
+    if(getValueData !=2 ){
+      data.rules[0].holiday = [];
+    }else{
+      copyData.length==0?data.rules[0].holiday = defaultData.rules[0].holiday:copyData
+    }
     if (totalHours === 23 && remainingMinutes === 59) {
       flag = true;
     } else {
       message.error("时间区间总和需要为23:59，请完善区间");
     }
-    //判断holiday不是自定义
-    if(getValueData !=2 ){
-      data.rules[0].holiday = [];
-    }
     return flag;
   };
   //初始区间数据
@@ -365,13 +375,14 @@ const FormModal = (props) => {
   const handleAddRulesClick = (type) => {
     const currentFormValues = form.getFieldsValue();
     const data = type == 0 ? currentFormValues.rules[0].details : currentFormValues.rules[0].holiday
+    console.log("handleAddRulesClick",data);
     //校验规则
     if (!handleValidation(data)) {
       return;
     }
     //同步更改模板开始时间为上一条的结束时间
-     newDetails.start = moment(data[data.length - 1].end); 
-        newHoliday.start = moment(data[data.length - 1].end);  
+    newDetails.start = moment(data[data.length - 1].end); 
+    newHoliday.start = moment(data[data.length - 1].end);  
     //将新的规则数据合并到当前表单的值中
     const updatedDetailsOrHoliday = [...data, type == 0 ? newDetails : newHoliday];
     form.setFieldsValue({
@@ -389,7 +400,7 @@ const FormModal = (props) => {
     let totalMinutes = 0; // 初始化总分钟数为0
     data.forEach((isData) => {
       if (isData.end == null || isData.start == null) {
-        message.error("时间字段不能为空");
+        message.error("时间字段不能为空2");
         flag = false;
         return;
       }
@@ -736,13 +747,13 @@ const FormModal = (props) => {
                               </div>
                               <div className="time">
                                 <label className="rule">工作日计费规则:</label>
-                                <div>
-                                  <Form.List name={[name, "details"]}>
+                                <div className="move">
+                                  <Form.List name={[name, "details"]} >
                                     {(fields, { add, remove }) => (
                                       <>
                                         {fields.map(({ key, name, ...restField }, i) => {
                                           return (
-                                            <div key={'details-' + key}>
+                                            <div key={'details-' + key} className="row-rule">
                                               <div className="row">
                                                 <Form.Item>
                                                   <Popover open={open}
@@ -918,13 +929,13 @@ const FormModal = (props) => {
                                     ]}
                                   />
                                 </div>
-                                <div className={getValueData == 1 ? "hide" : ""}>
+                                <div className={getValueData == 1 ? "hide move" : " move"}>
                                   <Form.List name={[name, "holiday"]}>
                                     {(fields, { add, remove }) => (
                                       <>
                                         {fields.map(({ key, name, ...restField }, i) => {
                                           return (
-                                            <div key={'holiday-' + key}>
+                                            <div key={'holiday-' + key} className="row-rule">
                                               <div className="row">
                                                 <Form.Item>
                                                   <Popover open={open}

src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss

@@ -277,8 +277,14 @@ margin-top: 20px;
       }
     }
     .time {
-      display: flex;
+      // display: flex;
       margin-top: 20px;
+      .move{
+        margin: 0px 90px;
+        .row-rule{
+          margin-top: 20px;
+        }
+      }
       .rule {
         line-height: 31px;
       }
@@ -315,8 +321,14 @@ margin-top: 20px;
       }
     }
     .notime {
-      display: flex;
+      // display: flex;
       margin-top: 56px;
+      .move{
+        margin: 0px 90px;
+        .row-rule{
+          margin-top: 20px;
+        }
+      }
       .rule {
         line-height: 31px;
       }

src/pages/InRoadMgm/PersonMgm/Performance/SalesStat/index.scss

@@ -136,17 +136,24 @@ $color-primary : var(--color-primary);
   }
   width: 700px !important;
   .tab-index{
+    .list-view{
+      overflow: hidden;
+    }
     .tab-top{
       display: flex;
       margin-top: 10px;
       height: 30px;
       line-height: 30px;
       white-space: nowrap;
-      overflow: hidden;
+      // overflow: hidden;
       border-bottom: 1px solid #e4e7ed;
       .tab-li{
         margin-left: 20px;
+        width: 60px;
         cursor: pointer;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        // overflow: hidden;
       }
       .active{
         color:#409eff ;

src/pages/InRoadMgm/PersonMgm/Performance/SalesStat/loadable.jsx

@@ -92,7 +92,6 @@ function SalesStat(props) {
   const deployListColumns = [{
     title: '序号',
     render: (text, record, index) => {
-      console.log(index);
       return <>
         <span>
           {index + 1}
@@ -270,7 +269,8 @@ function SalesStat(props) {
     getData()
   }, [])
 
-
+  const style = {
+  }
 
   const onClickData = (item) => {
     console.log(item);
@@ -301,9 +301,9 @@ function SalesStat(props) {
             limit={730}
             dropdownData={[
               { text: "昨天", value: 1 },
-              { text: "近30天", value: -29 },
-              { text: "近90天", value: -89 },
-              { text: "近180天", value: -179 },
+              { text: "近30天", value: 30 },
+              { text: "近90天", value: 90 },
+              { text: "近180天", value: 180 },
             ]}
           />
           <div className="btnBox">
@@ -356,17 +356,31 @@ function SalesStat(props) {
     >
       <div className="tab-title">{getTabTitle.date}营收情况</div>
       <div className="tab-index">
-        <div style={{display:"flex"}}>
-          <div style={{lineHeight:4}} >《</div>
-          <div className="tab-top">
-            {
-              getTabData &&
-              getTabData.map((item, index) => {
-                return <div key={index} className={getValue === item.value ? "tab-li active" : "tab-li"} onClick={() => onClickData(item)}>{item.text}</div>
-              })
-            }
+        <div style={{ display: "flex" }}>
+          <div style={{ lineHeight: 4 }} onClick={() => {
+            // 不能小于0
+            getValue &&
+              setGetValue(getValue - 1)
+          }
+          }>《</div>
+          {/* 外层做显示区域，里边元素滚动 */}
+          <div className="list-view">
+            <div className="tab-top" style={{ transform: `translateX(${-getValue * 60}px)` }}>
+              {
+                getTabData &&
+                getTabData.map((item, index) => {
+                  return <div key={index} className={getValue === item.value ? "tab-li active" : "tab-li"} onClick={() => onClickData(item)}>{item.text}</div>
+                })
+              }
+            </div>
           </div>
-          <div style={{lineHeight:4,marginLeft:6}}>》</div>
+          <div style={{ lineHeight: 4, marginLeft: 6 }}
+            onClick={() => {
+              getValue < getTabData.length -1 &&
+                setGetValue(getValue + 1)
+            }
+            }
+          >》</div>
         </div>
         <div className="tab-bottom">
           {

src/pages/InRoadMgm/PersonMgm/Performance/WorkerStat/loadable.jsx

@@ -288,9 +288,9 @@ function WorkerStat(props) {
                         limit={730}
                         dropdownData={[
                             { text: "昨天", value: 1 },
-                            { text: "近30天", value: -29 },
-                            { text: "近90天", value: -89 },
-                            { text: "近180天", value: -179 },
+                            { text: "近30天", value: 30 },
+                            { text: "近90天", value: 90 },
+                            { text: "近180天", value: 180 },
                         ]}
                     />
                     <div className="btnBox">

src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/index.scss

@@ -378,6 +378,7 @@ $color-primary: var(--color-primary);
     }
     .deal-btn {
       text-align: end;
+      margin-top: 20px;
       .submit {
         width: 100px;
         height: 34px;

src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/loadable.jsx

@@ -36,6 +36,7 @@ function CallbackSuggestion(props) {
     const [imgVisible, setImgVisible] = useState(false)
     const [orderVisible, setOrderVisible] = useState(false)
     const [evidenceVisible, setEvidenceVisible] = useState(false)
+
     //物品型号
     const handleAdviseType = (value) => {
         setFormData({ ...formData, adviseType: value })
@@ -100,10 +101,12 @@ function CallbackSuggestion(props) {
             dataIndex: 'parkRecordId',
             key: 'parkRecordId',
             render: (text, record) => {
-                return <div>
-                    <span className="iconLined" onClick={handleTrans}>{rotate === false ? <DownOutlined /> : <UpOutlined />}</span>
-                    <a onClick={() => { getParkId(record) }}>{record.parkRecordId}</a>
-                </div>
+                return <>
+                    <div>
+                        <span className="iconLined" onClick={handleTrans}>{rotate === false ? <DownOutlined /> : <UpOutlined />} </span>
+                        <a onClick={() => { getParkId(record) }}>{record.park_id}</a>
+                    </div>
+                </>
             }
         },
         {
@@ -371,32 +374,35 @@ function CallbackSuggestion(props) {
     const [submitDeploy, setSubmitDeploy] = useState({})
     //提交审核
     const onChangeReason = (value) => {
-        setSubmitDeploy({ ...submitDeploy, content: value.target.value })
+        setSubmitDeploy({ ...submitDeploy, deal_reason: value.target.value })
     }
     const [getValueList, setGetValueList] = useState({})
     const handleChoose = (value) => {
         setGetValueList(value)
-        setSubmitDeploy({ ...submitDeploy, adviseType: value })
+        setSubmitDeploy({ ...submitDeploy, change_content: value })
     }
+    const [getAdjustTimeValue, setGetAdjustTimeValue] = useState(1)
     const handleAdjust = (value) => {
-        setSubmitDeploy({ ...submitDeploy, adjustTime: value })
+        setGetAdjustTimeValue(value)
     }
     const handleAdjustTime = (v, dateString) => {
-        setSubmitDeploy({ ...submitDeploy, changeTime: dateString })
+        setSubmitDeploy({ ...submitDeploy, update_value: dateString })
     }
     const handlePlateColor = (v) => {
-        setSubmitDeploy({ ...submitDeploy, plateColor: v })
+        setSubmitDeploy({ ...submitDeploy, plate_type: v })
     }
     const handlePlateNumber = (v) => {
-        setSubmitDeploy({ ...submitDeploy, plateNumber: v.target.value })
+        setSubmitDeploy({ ...submitDeploy, update_value: v.target.value })
     }
     const handleAdd = (v) => {
         setSubmitDeploy({ ...submitDeploy, add: v })
     }
     const handleAddCount = (v) => {
-        setSubmitDeploy({ ...submitDeploy, addCount: v.target.value })
+        setSubmitDeploy({ ...submitDeploy, update_value: v.target.value })
+    }
+    const handleComeTime = (v) => {
+        setSubmitDeploy({ ...submitDeploy, update_value: v.target.value })
     }
-
     const cancelBtn = () => {
         setOrderVisible(false)
     }
@@ -653,7 +659,7 @@ function CallbackSuggestion(props) {
                                                                     <div className="pic"><Image src={res} /></div>
                                                                 )
                                                             })
-                                                            :''
+                                                            : ''
                                                         }
                                                     </div>
                                                 </div>
@@ -814,6 +820,7 @@ function CallbackSuggestion(props) {
                         <Select
                             style={{ width: 200 }}
                             placeholder="请选择"
+                            placement='topRight'
                             value={submitDeploy.adviseType}
                             options={[
                                 {
@@ -845,6 +852,7 @@ function CallbackSuggestion(props) {
                                 <Select
                                     style={{ width: 200 }}
                                     placeholder="请选择"
+                                    placement='topRight'
                                     value={submitDeploy.adjustTime}
                                     options={[
                                         {
@@ -859,13 +867,31 @@ function CallbackSuggestion(props) {
                                     onChange={handleAdjust}
                                 />
                                 <label style={{ marginLeft: 30 }}>调整为：</label>
-                                <DatePicker
-                                    format="YYYY-MM-DD HH:mm:ss"
-                                    showTime={{
-                                        defaultValue: moment('00:00:00', 'HH:mm:ss'),
-                                    }}
-                                    onChange={handleAdjustTime}
-                                />
+                                {
+                                    getAdjustTimeValue === 1 ?
+                                        <DatePicker
+                                            format="YYYY-MM-DD HH:mm:ss"
+                                            placement='topRight'
+                                            style={{ width: 300 }}
+                                            showTime={{
+                                                defaultValue: moment('00:00:00', 'HH:mm:ss'),
+                                            }}
+                                            onChange={handleAdjustTime}
+                                        /> : ''
+                                }
+                                {
+                                    getAdjustTimeValue === 2 ?
+                                        <div className="comeTime" style={{ display: "contents" }}>
+                                            <label>入场时间+</label>
+                                            <Input
+                                                placeholder="请输入数字"
+                                                value={formData.plateNumber}
+                                                style={{ width: 150 }}
+                                                onChange={handleComeTime}
+                                            />
+                                            <label>次</label>
+                                        </div> : ''
+                                }
                             </> : ''
                         }
                         {
@@ -875,6 +901,7 @@ function CallbackSuggestion(props) {
                                     <Select
                                         style={{ width: 100 }}
                                         placeholder="请选择"
+                                        placement='topRight'
                                         value={submitDeploy.plateColor}
                                         options={sysConfig.plateColor}
                                         onChange={handlePlateColor}

src/pages/OperationCenter/CustomerServieMgm/ComplainManage/index.scss

@@ -1,5 +1,348 @@
 @import "@/assets/css/mixin.scss";
-$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);
+$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);
+
+.colorBtn {
+  width: 90px;
+  height: 36px;
+  background: linear-gradient(180deg, #3aa9ff, #59b7ff) !important;
+  border-radius: 4px;
+  &:hover {
+    color: var(--color-text);
+    border-color: transparent;
+    // background: var(--button-default-bg-hover);
+    width: 90px;
+    height: 36px;
+    background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+    border-radius: 4px;
+  }
+}
+.colorReset {
+  width: 90px;
+  height: 36px;
+  border-radius: 4px;
+  border: none;
+  background: #636d80 !important;
+  &:hover {
+    color: var(--color-text);
+    border-color: transparent;
+    // background: var(--button-default-bg-hover);
+    width: 90px;
+    height: 36px;
+    background: #636d80;
+    border: none;
+    border-radius: 4px;
+  }
+}
+.paid-ComplainManage {
+  display: flex;
+  padding: 15px;
+  width: 100%;
+  .paid-search {
+    .search {
+      font-size: 16px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Bold;
+      font-weight: 700;
+      text-align: left;
+      color: #eeeff1;
+    }
+    label {
+      margin: 0 10px;
+    }
+    .yisa-search {
+      margin-top: 10px;
+      display: flex;
+      label {
+        line-height: 31px;
+      }
+    }
+    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+      background-color: #50586c !important;
+    }
+    .ant-select-arrow .anticon {
+      background-color: #50586c !important;
+    }
+    .ant-input:placeholder-shown {
+      background-color: #50586c !important;
+    }
+    .timePicker {
+      width: 350px;
+      margin-top: 22px;
+      .btnBox {
+        display: flex;
+        margin-top: 20px;
+        .yisa-btn {
+          margin-left: 20px;
+          width: 85px;
+        }
+        .root_gfkk {
+          margin-left: 20px;
+          .export-content {
+            width: 130px;
+            height: 33px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #3b97ff;
+            border-radius: 3px;
+            cursor: pointer;
+            color: #fff;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+  .scheduleBtn {
+    background: #409eff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .paid-result {
+    width: 100%;
+    height: 834px;
+    background: #505a6f;
+    border-radius: 20px;
+    margin-left: 17px;
+    .result {
+      padding: 25px;
+      .font {
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: left;
+        color: #eeeff1;
+        margin-bottom: 10px;
+        display: inline-block;
+
+        em {
+          color: #3aa8fe;
+          margin: 0 5px;
+        }
+      }
+      .yisa-table .ant-table-thead .ant-table-cell {
+        background-color: #616b83 !important;
+        color: #ffffff !important;
+        font-size: 14px;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Bold;
+        font-weight: 700;
+        text-align: center;
+        border-right: none !important;
+        border-top-color: #888f9d !important;
+        border-color: #888f9d !important;
+      }
+      .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
+      .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
+        border-top: none !important;
+        border-left: none !important;
+      }
+      .ant-table-tbody .ant-table-row .ant-table-cell {
+        background-color: #3e4557 !important;
+        color: #ffffff !important;
+        text-align: center;
+        font-size: 14px;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Regular;
+        font-weight: 400;
+        border-right: none !important;
+        border-left: none !important;
+        border-bottom-color: #626b7e !important;
+      }
+    }
+    .status-color {
+      color: red;
+    }
+    .status-bg {
+      color: rgb(56, 174, 56);
+    }
+  }
+}
+.revenue {
+  .tab-title {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 400;
+    font-family:
+      Microsoft YaHei,
+      Microsoft YaHei-Regular;
+  }
+  width: 700px !important;
+  .tab-index {
+    .tab-top {
+      display: flex;
+      margin-top: 10px;
+      height: 30px;
+      line-height: 30px;
+      white-space: nowrap;
+      overflow: hidden;
+      border-bottom: 1px solid #e4e7ed;
+      .tab-li {
+        margin-left: 20px;
+        cursor: pointer;
+      }
+      .active {
+        color: #409eff;
+        cursor: pointer;
+        margin-left: 20px;
+        border-bottom: 1px solid #409eff !important;
+        margin-bottom: -1px !important;
+      }
+    }
+    .tab-bottom {
+      .yisa-tab {
+        .ant-table-cell {
+          background-color: #616b83 !important;
+          color: #ffffff !important;
+          font-size: 14px;
+          font-family:
+            Microsoft YaHei,
+            Microsoft YaHei-Bold;
+          font-weight: 700;
+          text-align: center;
+          border-right: none !important;
+          border-left: none !important;
+          border-bottom-color: #868d9d !important;
+        }
+      }
+    }
+  }
+}
+.roadModal {
+  width: 900px !important;
+  .table {
+    width: 780px;
+    margin-left: 40px;
+    .yisa-table .ant-table-thead .ant-table-cell {
+      background-color: #616b83 !important;
+      color: #ffffff !important;
+      font-size: 14px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Bold;
+      font-weight: 700;
+      text-align: center;
+      border-right: none !important;
+      border-top-color: #888f9d !important;
+      border-color: #888f9d !important;
+    }
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
+      border-top: none !important;
+      border-left: none !important;
+    }
+    .ant-table-tbody .ant-table-row .ant-table-cell {
+      background-color: #3e4557 !important;
+      color: #ffffff !important;
+      text-align: center;
+      font-size: 14px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Regular;
+      font-weight: 400;
+      border-right: none !important;
+      border-left: none !important;
+      border-bottom-color: #626b7e !important;
+    }
+  }
+}
+.operateBtn {
+  div {
+    cursor: pointer;
+    margin-top: 5px;
+  }
+}
+.add {
+  margin-left: 100px;
+  .yisa-search {
+    margin-top: 20px;
+  }
+  .submitBtn {
+    margin-left: 54px;
+    margin-top: 20px;
+    .submit {
+      width: 80px;
+      height: 35px;
+      background: #409eff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      color: #fff;
+    }
+    .cancel {
+      width: 80px;
+      height: 35px;
+      background: #fff;
+      border: none;
+      border-radius: 4px;
+      color: #3e4557;
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
+}
+.check-detail {
+  .carTitle {
+    .font {
+      font-weight: 700;
+      font-size: 16px;
+      border-left: 6px solid #409eff;
+      padding-left: 8px;
+      height: 20px;
+      line-height: 20px;
+      margin-bottom: 20px;
+    }
+  }
+  .order-msg {
+    margin-left: 15%;
+    .order {
+      margin-top: 20px;
+      .message {
+        color: white;
+        width: 30%;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-of-type(2){
+        display: inline-block;
+        width: 65%;
+      }
+      .status-color {
+        color: red;
+      }
+      .status-bg {
+        color: rgb(56, 174, 56);
+      }
+    }
+  }
+  .sale-msg{
+    margin-left: 15%;
+    .order {
+      margin-top: 20px;
+      .message {
+        color: white;
+        width: 30%;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-of-type(2){
+        display: inline-block;
+        width: 65%;
+      }
+    }
+  }
+  .submitBtn{
+    text-align: center;
+    margin-top: 30px;
+    cursor: pointer;
+  }
+}

src/pages/OperationCenter/CustomerServieMgm/ComplainManage/loadable.jsx

@@ -1,15 +1,517 @@
 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 {   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 {  useLocation } from "react-router-dom";
-function ComplainManage() {
-    return <div>ComplainManage</div>
+import { ResultFlowResult } from "@/components"
+import { Select, Input, Button, Table, message, TreeSelect, Pagination, DatePicker, Cascader, Popover, Modal } from 'antd'
+import {
+    pageSizeOptions
+} from '@/config/character.config.js'
+import "./index.scss";
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
+import ajax from '@/services'
+import { useSessionStorageState } from "ahooks"
+import { useNavigate, useLocation } from "react-router-dom"
+const { RangePicker } = DatePicker;
+function ComplainManage(props) {
+    // const configData = props.sysConfig["lib-deploy"] || {};
+    const [ajaxLoading, setAjaxLoading] = useState(false)
+    const location = useLocation()
+
+    const [resultData, setResultData] = useState({
+        data: [],
+        total_records: 0,
+        export_url: '',
+        process_url: ""
+    })
+    const parameter = {
+        order_num: '',//工单编号
+        source: '',//来源
+        order_type: '',//工单类型
+        person: '',//联系人
+        phone: '',//联系电话
+        founder: '',//创建人
+        serial_number: '',//渠道流水号
+        pn: 1,
+        page_size: Number(pageSizeOptions[0]),  // 每页条数
+    }
+    const [formData, setFormData] = useState(parameter)
+    const [lastFormData, setLastFormData] = useState(formData)
+    const lastFormDataRef = useRef(formData)
+    const [editVisible, setEditVisible] = useState(false)
+    //工单编号
+    const handlePartName = (value) => {
+        setFormData({ ...formData, order_num: value.target.value })
+    }
+    //来源
+    const handleMethod = (v) => {
+        setFormData({ ...formData, source: v })
+    }
+    //工单类型
+    const handleOrderType = (v) => {
+        setFormData({ ...formData, order_type: v })
+    }
+    //联系人
+    const handlePerson = (v) => {
+        setFormData({ ...formData, person: v.target.value })
+    }
+    //联系电话
+    const handlePhone = (v) => {
+        setFormData({ ...formData, phone: v.target.value })
+    }
+    //创建人
+    const handleFounder = (v) => {
+        setFormData({ ...formData, founder: v.target.value })
+    }
+    //订购时间
+    const onChangeTime = (value, dateString) => {
+        setFormData({
+            ...formData,
+            start_time: dateString[0],
+            end_time: dateString[1]
+        })
+    }
+    //商户名称
+    const handleSerial = (value) => {
+        setFormData({ ...formData, serial_number: value.target.value })
+    }
+
+    //导出
+    const exportData = () => {
+        let data = {
+            ...formData
+        }
+        ajax.getExportOrder(data).then(res => {
+            window.open(res.data.url)
+        })
+    }
+    //列表
+    const handleColumns = (tab) => {
+        let result = [...deployListColumns];
+        return result;
+    }
+    //列表
+    const deployListColumns = [
+        {
+            title: '序号',
+            render: (_, record, index) => {
+                return index + 1
+            }
+        },
+        {
+            title: '工单编号',
+            dataIndex: 'order_num',
+            key: 'order_num',
+        },
+        {
+            title: '来源',
+            dataIndex: 'source',
+            key: 'source',
+        },
+        {
+            title: '联系人',
+            dataIndex: 'person',
+            key: 'person',
+        },
+        {
+            title: '联系电话',
+            dataIndex: 'phone',
+            key: 'phone',
+        },
+        {
+            title: '工单类型',
+            dataIndex: 'order_type',
+            key: 'order_type',
+        },
+        {
+            title: '派单时间',
+            dataIndex: 'send_time',
+            key: 'send_time',
+        },
+        {
+            title: '截止时间',
+            dataIndex: 'end_time',
+            key: 'end_time',
+        },
+        {
+            title: '创建人',
+            dataIndex: 'founder',
+            key: 'founder',
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+        },
+        {
+            title: '操作',
+            render: (text, record) => {
+                return <>
+                    <Popover content={
+                        <div className="operateBtn">
+                            <div onClick={() => { CheckBtn(record) }}>查看</div>
+                        </div>}>
+                        <button className="scheduleBtn colorBtn">操作</button>
+                    </Popover>
+                </>
+            },
+        }]
+    //查看弹窗
+    const [getRecordData, setGetRecordData] = useState([])
+    const CheckBtn = (record) => {
+        setGetRecordData(Object.assign({}, getRecordData, {
+            road_name: record.road_name,
+            phone: record.phone,
+            plate: record.plate,
+            status: record.status,
+            method: record.method,
+            order_amount: record.order_amount,
+            phone: record.phone,
+            phone: record.phone,
+        }))
+        setEditVisible(true)
+    }
+    const editModal = () => {
+        setEditVisible(false)
+    }
+    //重置数据
+    const getResetData = () => {
+        setFormData({
+            ...parameter
+        })
+        getData({ ...parameter })
+    }
+    // 获取列表数据
+    const getData = (data = formData) => {
+        setAjaxLoading(true)
+        ajax.getComplainList(data).then(res => {
+            setAjaxLoading(false)
+            if (res.status === 20000) {
+                let resDataArr = res.data.list.map((item) => {
+                    item.key = item.id
+                    return item
+                })
+                setResultData({
+                    ...resultData,
+                    data: resDataArr,
+                    total_records: res.data.total
+                })
+            } else {
+                setResultData({
+                    data: [],
+                    total_records: 0,
+                    export_url: '',
+                    process_url: ""
+                })
+                message.error(res.message)
+            }
+        }, err => {
+            console.log(err)
+        })
+    }
+    //切换分页
+    const changePn = (pn, length) => {
+        if (lastFormData.page_size === length) {
+            setLastFormData(Object.assign({}, lastFormData, { pn: pn }))
+            lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn })
+            getData(Object.assign({}, lastFormData, { pn: pn }))
+        }
+    }
+    //切换每页条数
+    const changeLength = (pn, length) => {
+        setFormData(Object.assign({}, formData, { pn: 1, page_size: length }))
+        setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length }))
+        lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length })
+        getData(Object.assign({}, lastFormData, { pn: 1, page_size: length }))
+    }
+    //检索数据
+    const getSearchData = (data = formData) => {
+        getData(data)
+    }
+    const placeBtn = () => {
+        setEditVisible(false)
+    }
+    const [sessionTabList, setSessionTabList] = useSessionStorageState('ComplainManage', {
+        value: {
+        }
+    })
+    useEffect(() => {
+        console.log(location)
+        if (sessionTabList && Object.values(sessionTabList).length > 0) {
+            setFormData({
+                road: sessionTabList?.road,
+                phone: sessionTabList?.phone,
+                plate: sessionTabList?.plate,
+                method: sessionTabList?.method,
+                start_time: sessionTabList?.start_time,
+                end_time: sessionTabList?.end_time,
+                serial_number: sessionTabList?.serial_number,
+            })
+        }
+    }, [])
+    useEffect(() => {
+        setSessionTabList({
+            ...formData
+        })
+    }, [formData])
+    useEffect(() => {
+        getData()
+    }, [])
+    return <>
+        <div className="paid-ComplainManage">
+            <div className="paid-search">
+                <label className="search">查询条件</label>
+                <div className="yisa-search">
+                    <label>工单编号</label>
+                    <Input
+                        placeholder="请输入工单编号"
+                        value={formData.order_num}
+                        style={{ width: 255 }}
+                        onChange={handlePartName}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>来源</label>
+                    <Select
+                        style={{ width: 255, marginLeft: 14 }}
+                        value={formData.source}
+                        options={sysConfig.souceType}
+                        onChange={handleMethod}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>工单类型</label>
+                    <Select
+                        style={{ width: 255, marginLeft: 14 }}
+                        value={formData.order_type}
+                        options={[
+                            {
+                                value: 1,
+                                label: "投诉"
+                            },
+                            {
+                                value: 2,
+                                label: "咨询"
+                            },
+                            {
+                                value: 3,
+                                label: "建议"
+                            }
+                        ]}
+                        onChange={handleOrderType}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>联系人</label>
+                    <Input
+                        placeholder="请输入联系人"
+                        value={formData.person}
+                        style={{ width: 255, marginLeft: 28 }}
+                        onChange={handlePerson}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>联系电话</label>
+                    <Input
+                        placeholder="请输入联系电话"
+                        value={formData.phone}
+                        style={{ width: 255, marginLeft: 28 }}
+                        onChange={handlePhone}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>创建人</label>
+                    <Input
+                        placeholder="请输入创建人"
+                        value={formData.founder}
+                        style={{ width: 255, marginLeft: 28 }}
+                        onChange={handleFounder}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>工单类型</label>
+                    <Select
+                        style={{ width: 255, marginLeft: 14 }}
+                        value={formData.order_type}
+                        options={[
+                            {
+                                value: 1,
+                                label: "跟进中"
+                            },
+                            {
+                                value: 2,
+                                label: "未处理"
+                            }
+                        ]}
+                        onChange={handleOrderType}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>支付方式</label>
+                    <Select
+                        style={{ width: 255, marginLeft: 14 }}
+                        value={formData.method}
+                        options={sysConfig.StaggeredPay}
+                        onChange={handleMethod}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>订购时间</label>
+                    <RangePicker
+                        style={{ width: 255, marginLeft: 14 }}
+                        showTime={{
+                            format: 'HH:mm:ss',
+                        }}
+                        format="YYYY-MM-DD HH:mm:ss"
+                        onChange={onChangeTime}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>渠道流水号</label>
+                    <Input
+                        placeholder="请输入"
+                        value={formData.serial_number}
+                        style={{ width: 255 }}
+                        onChange={handleSerial}
+                    />
+                </div>
+                <div className="timePicker yisa-search">
+                    <div className="btnBox">
+                        <Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
+                            搜索
+                        </Button>
+                        <Button type="primary" className="yisa-btn colorReset" icon={<DeleteOutlined />} onClick={() => { getResetData() }}>
+                            清空
+                        </Button>
+                        <Button type="primary" className="yisa-btn colorBtn" onClick={() => { exportData() }}>
+                            导出
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            <div className="paid-result">
+                <div className="result">
+                    <span className="font">共检索到<em>{resultData.total_records}</em>条结果</span>
+                    <ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}>
+                        <Table
+                            bordered
+                            // className='yisa-table'
+                            dataSource={resultData.data}
+                            columns={
+                                handleColumns()
+                            }
+                            pagination={false}
+                            loading={ajaxLoading}
+                        />
+                        <Pagination
+                            className="pagination-common"
+                            showSizeChanger
+                            showQuickJumper
+                            showTotal={() => `共 ${resultData.total_records} 条`}
+                            total={resultData.total_records}
+                            current={lastFormData.pn}
+                            pageSize={lastFormData.page_size}
+                            pageSizeOptions={pageSizeOptions}
+                            onChange={changePn}
+                            onShowSizeChange={changeLength}
+                        />
+                    </ResultFlowResult>
+                </div>
+            </div>
+
+        </div>
+        <Modal
+            visible={editVisible}
+            onCancel={editModal}
+            footer={null}
+            className="check-detail"
+        >
+            <div className="carTitle">
+                <span className="font">订单信息</span>
+            </div>
+            <div className="order-msg">
+                <div className="order">
+                    <span className="message">
+                        停车场名称：
+                    </span>
+                    <span>
+                        {getRecordData.road_name}
+                    </span>
+                </div>
+                <div className="order">
+                    <span className="message">
+                        手机号：
+                    </span>
+                    <span>
+                        {getRecordData.phone}
+                    </span>
+                </div>
+                <div className="order">
+                    <span className="message">
+                        车牌号：
+                    </span>
+                    <span>
+                        {getRecordData.plate}
+                    </span>
+                </div>
+                <div className="order">
+                    <span className="message">
+                        同步MS状态：
+                    </span>
+                    <span>
+                        {getRecordData.phone}
+                    </span>
+                </div>
+                <div className="order">
+                    <span className="message">
+                        订购时间：
+                    </span>
+                    <span className={getRecordData.status === 1 ? 'status-color' : 'status-bg'}>
+                        {getRecordData.status === 1 ? '同步失败' : '同步成功'}
+                    </span>
+                </div>
+                <div className="order">
+                    <span className="message">
+                        支付方式：
+                    </span>
+                    <span>
+                        {getRecordData.method}
+                    </span>
+                </div>
+                <div className="order">
+                    <span className="message">
+                        订单金额：
+                    </span>
+                    <span>
+                        {getRecordData.order_amount}
+                    </span>
+                </div>
+            </div>
+            <div className="carTitle" style={{ marginTop: 20 }}>
+                <span className="font">商品信息</span>
+            </div>
+            <div className="sale-msg">
+                <div className="order">
+                    <span className="message">
+                        销售金额：
+                    </span>
+                    <span>
+                        {getRecordData.price}
+                    </span>
+                </div>
+                <div className="order">
+                    <span className="message">
+                        有效时间：
+                    </span>
+                    <span>
+                        {getRecordData.effective_date}
+                    </span>
+                </div>
+            </div>
+            <div className="submitBtn">
+                <button type="primary" className="cancel colorReset" onClick={() => { placeBtn() }}>
+                    返回
+                </button>
+            </div>
+        </Modal>
+    </>
 }
 
 export default ComplainManage;

src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredOrder/index.scss

@@ -1,9 +1,8 @@
 @import "@/assets/css/mixin.scss";
-$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);
-
+$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);
 
 .colorBtn {
   width: 90px;
@@ -37,50 +36,52 @@ $color-primary : var(--color-primary);
     border-radius: 4px;
   }
 }
-.paid-StaggeredOrder{
+.paid-StaggeredOrder {
   display: flex;
   padding: 15px;
   width: 100%;
-  .paid-search{
-    .search{
+  .paid-search {
+    .search {
       font-size: 16px;
-      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Bold;
       font-weight: 700;
       text-align: left;
       color: #eeeff1;
     }
-    label{
-      margin:0 10px;
+    label {
+      margin: 0 10px;
     }
-    .yisa-search{
+    .yisa-search {
       margin-top: 10px;
       display: flex;
-      label{
+      label {
         line-height: 31px;
       }
     }
-    .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
       background-color: #50586c !important;
     }
-    .ant-select-arrow .anticon{
+    .ant-select-arrow .anticon {
       background-color: #50586c !important;
     }
-    .ant-input:placeholder-shown{
+    .ant-input:placeholder-shown {
       background-color: #50586c !important;
     }
-    .timePicker{
+    .timePicker {
       width: 350px;
       margin-top: 22px;
-        .btnBox{
-          display:flex ;
-          margin-top: 20px;
-          .yisa-btn{
-            margin-left: 20px;
-            width: 85px;
-          }
-          .root_gfkk{
-            margin-left: 20px;
-              .export-content{
+      .btnBox {
+        display: flex;
+        margin-top: 20px;
+        .yisa-btn {
+          margin-left: 20px;
+          width: 85px;
+        }
+        .root_gfkk {
+          margin-left: 20px;
+          .export-content {
             width: 130px;
             height: 33px;
             display: flex;
@@ -92,80 +93,92 @@ $color-primary : var(--color-primary);
             color: #fff;
             margin-right: 10px;
           }
-          }
-        
         }
+      }
     }
   }
-  .scheduleBtn{
+  .scheduleBtn {
     background: #409eff;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
   }
- 
-  .paid-result{
+
+  .paid-result {
     width: 100%;
     height: 834px;
     background: #505a6f;
     border-radius: 20px;
     margin-left: 17px;
-    .result{
+    .result {
       padding: 25px;
-      .font{
-        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+      .font {
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Regular;
         font-weight: 400;
         text-align: left;
         color: #eeeff1;
         margin-bottom: 10px;
         display: inline-block;
-    
-        em{
+
+        em {
           color: #3aa8fe;
           margin: 0 5px;
         }
       }
-      .yisa-table .ant-table-thead .ant-table-cell{
+      .yisa-table .ant-table-thead .ant-table-cell {
         background-color: #616b83 !important;
-         color: #ffffff !important;
-         font-size: 14px;
-         font-family: Microsoft YaHei, Microsoft YaHei-Bold;
-         font-weight: 700;
+        color: #ffffff !important;
+        font-size: 14px;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Bold;
+        font-weight: 700;
         text-align: center;
         border-right: none !important;
         border-top-color: #888f9d !important;
         border-color: #888f9d !important;
       }
-      .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table{
+      .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
+      .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
         border-top: none !important;
         border-left: none !important;
       }
-      .ant-table-tbody .ant-table-row .ant-table-cell{
+      .ant-table-tbody .ant-table-row .ant-table-cell {
         background-color: #3e4557 !important;
         color: #ffffff !important;
         text-align: center;
         font-size: 14px;
-        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Regular;
         font-weight: 400;
         border-right: none !important;
         border-left: none !important;
         border-bottom-color: #626b7e !important;
       }
     }
-  
+    .status-color {
+      color: red;
+    }
+    .status-bg {
+      color: rgb(56, 174, 56);
+    }
   }
-
 }
-.revenue{
-  .tab-title{
+.revenue {
+  .tab-title {
     text-align: center;
     font-size: 18px;
     font-weight: 400;
-    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    font-family:
+      Microsoft YaHei,
+      Microsoft YaHei-Regular;
   }
   width: 700px !important;
-  .tab-index{
-    .tab-top{
+  .tab-index {
+    .tab-top {
       display: flex;
       margin-top: 10px;
       height: 30px;
@@ -173,25 +186,27 @@ $color-primary : var(--color-primary);
       white-space: nowrap;
       overflow: hidden;
       border-bottom: 1px solid #e4e7ed;
-      .tab-li{
+      .tab-li {
         margin-left: 20px;
         cursor: pointer;
       }
-      .active{
-        color:#409eff ;
+      .active {
+        color: #409eff;
         cursor: pointer;
         margin-left: 20px;
         border-bottom: 1px solid #409eff !important;
         margin-bottom: -1px !important;
       }
     }
-    .tab-bottom{
-      .yisa-tab{
-        .ant-table-cell{
+    .tab-bottom {
+      .yisa-tab {
+        .ant-table-cell {
           background-color: #616b83 !important;
           color: #ffffff !important;
           font-size: 14px;
-          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+          font-family:
+            Microsoft YaHei,
+            Microsoft YaHei-Bold;
           font-weight: 700;
           text-align: center;
           border-right: none !important;
@@ -202,32 +217,37 @@ $color-primary : var(--color-primary);
     }
   }
 }
-.roadModal{
+.roadModal {
   width: 900px !important;
-  .table{
+  .table {
     width: 780px;
     margin-left: 40px;
-    .yisa-table .ant-table-thead .ant-table-cell{
+    .yisa-table .ant-table-thead .ant-table-cell {
       background-color: #616b83 !important;
-       color: #ffffff !important;
-       font-size: 14px;
-       font-family: Microsoft YaHei, Microsoft YaHei-Bold;
-       font-weight: 700;
+      color: #ffffff !important;
+      font-size: 14px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Bold;
+      font-weight: 700;
       text-align: center;
       border-right: none !important;
       border-top-color: #888f9d !important;
       border-color: #888f9d !important;
     }
-    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table{
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
       border-top: none !important;
       border-left: none !important;
     }
-    .ant-table-tbody .ant-table-row .ant-table-cell{
+    .ant-table-tbody .ant-table-row .ant-table-cell {
       background-color: #3e4557 !important;
       color: #ffffff !important;
       text-align: center;
       font-size: 14px;
-      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Regular;
       font-weight: 400;
       border-right: none !important;
       border-left: none !important;
@@ -235,38 +255,94 @@ $color-primary : var(--color-primary);
     }
   }
 }
-.operateBtn{
-  div{
+.operateBtn {
+  div {
     cursor: pointer;
     margin-top: 5px;
   }
 }
-.add{
+.add {
   margin-left: 100px;
-  .yisa-search{
+  .yisa-search {
     margin-top: 20px;
   }
-  .submitBtn{
+  .submitBtn {
     margin-left: 54px;
     margin-top: 20px;
-    .submit{
+    .submit {
       width: 80px;
-    height: 35px;
-    background: #409eff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    color: #fff;
+      height: 35px;
+      background: #409eff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      color: #fff;
     }
-    .cancel{
-    width: 80px;
-    height: 35px;
-    background: #fff;
-    border: none;
-    border-radius: 4px;
-    color: #3e4557;
-    cursor: pointer;
-    margin-left: 20px;
+    .cancel {
+      width: 80px;
+      height: 35px;
+      background: #fff;
+      border: none;
+      border-radius: 4px;
+      color: #3e4557;
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
+}
+.check-detail {
+  .carTitle {
+    .font {
+      font-weight: 700;
+      font-size: 16px;
+      border-left: 6px solid #409eff;
+      padding-left: 8px;
+      height: 20px;
+      line-height: 20px;
+      margin-bottom: 20px;
     }
   }
-}
+  .order-msg {
+    margin-left: 15%;
+    .order {
+      margin-top: 20px;
+      .message {
+        color: white;
+        width: 30%;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-of-type(2){
+        display: inline-block;
+        width: 65%;
+      }
+      .status-color {
+        color: red;
+      }
+      .status-bg {
+        color: rgb(56, 174, 56);
+      }
+    }
+  }
+  .sale-msg{
+    margin-left: 15%;
+    .order {
+      margin-top: 20px;
+      .message {
+        color: white;
+        width: 30%;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-of-type(2){
+        display: inline-block;
+        width: 65%;
+      }
+    }
+  }
+  .submitBtn{
+    text-align: center;
+    margin-top: 30px;
+    cursor: pointer;
+  }
+}

src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredOrder/loadable.jsx

@@ -35,10 +35,7 @@ function StaggeredOrder(props) {
     const [formData, setFormData] = useState(parameter)
     const [lastFormData, setLastFormData] = useState(formData)
     const lastFormDataRef = useRef(formData)
-    const [checkVisible, setCheckVisible] = useState(false)
     const [editVisible, setEditVisible] = useState(false)
-    const [getSelectStatus, setGetSelectStatus] = useState(true)
-    const [addVisible, setAddVisible] = useState(false)
 
 
     //停车场名称
@@ -130,8 +127,13 @@ function StaggeredOrder(props) {
         },
         {
             title: '同步MS状态',
-            dataIndex: 'status',
-            key: 'status',
+            render: (text, record) => {
+                return <>
+                    <div className={record.status === 1 ? 'status-color' : 'status-bg'}>
+                        {record.status === 1 ? '同步失败' : '同步成功'}
+                    </div>
+                </>
+            }
         },
         {
             title: '订购时间',
@@ -154,32 +156,18 @@ function StaggeredOrder(props) {
     //查看弹窗
     const [getRecordData, setGetRecordData] = useState([])
     const CheckBtn = (record) => {
-        let data = {
-            id: record.id
-        }
-        ajax.checkGoods(data).then(res => {
-            if (res.status === 20000) {
-                setCheckVisible(true)
-                setGetRecordData([res.data])
-
-            }
-        })
+        setGetRecordData(Object.assign({}, getRecordData, {
+            road_name: record.road_name,
+            phone: record.phone,
+            plate: record.plate,
+            status: record.status,
+            method: record.method,
+            order_amount: record.order_amount,
+            phone: record.phone,
+            phone: record.phone,
+        }))
+        setEditVisible(true)
     }
-    const checkModal = () => {
-        setCheckVisible(false)
-    }
-    //编辑弹窗
-    const [getEditData, setGetEditData] = useState({
-        region_id: '',//区域
-        operatorid: '',
-        code: '',
-        name: '',
-        brand_id: '',
-        model_id: '',
-        status: '',
-        uid: ''
-    })
-    const [getId, setGetId] = useState({})
     const editModal = () => {
         setEditVisible(false)
     }
@@ -190,13 +178,6 @@ function StaggeredOrder(props) {
         })
         getData({ ...parameter })
     }
-    const handleDetail = () => {
-        let result = [...handleDeColumns];
-        return result;
-    }
-    const handleDeColumns = [
-       
-    ]
     // 获取列表数据
     const getData = (data = formData) => {
         setAjaxLoading(true)
@@ -244,101 +225,7 @@ function StaggeredOrder(props) {
     const getSearchData = (data = formData) => {
         getData(data)
     }
-    //添加
-    const addData = () => {
-        setAddVisible(true)
-    }
-    const addModal = () => {
-        setAddVisible(false)
-    }
-    let param = {
-        region_id: '',//区域
-        operatorid: '',
-        code: '',
-        name: '',
-        brand_id: '',
-        model_id: '',
-        status: '',
-        uid: ''
-    }
-    const [checkData, setCheckData] = useState(param)
-    const onChange = (newValue) => {
-        setCheckData(
-            Object.assign({}, checkData, { region_id: newValue })
-        );
-    };
-    //物品编号
-    const handleAddLoginName = (v) => {
-        setCheckData({ ...checkData, code: v.target.value })
-    }
-    //物品名称
-    const handleAddAssetsName = (v) => {
-        setCheckData({ ...checkData, name: v.target.value })
-    }
-    //状态
-    const handleAddStatus = (v) => {
-        setCheckData({ ...checkData, status: v })
-        if (v == 0) {
-            setGetSelectStatus(false)
-        }
-        if (v == 1) {
-            setGetSelectStatus(true)
-        }
-    }
-    const placeSaveBtn = () => {
-        let data = {
-            ...checkData,
-        }
-        if (checkData.region_id == '') {
-            message.error('请选择区域')
-        } else if (checkData.operatorid == '') {
-            message.error('请选择商户')
-        } else if (checkData.code == '') {
-            message.error('请输入物品编号')
-        } else if (checkData.name == '') {
-            message.error('请输入物品名称')
-        } else if (checkData.brand_id == '') {
-            message.error('请选择物品类型')
-        } else if (checkData.model_id == '') {
-            message.error('请选择物品型号')
-        } else {
-            ajax.saveData(data).then((res) => {
-                if (res.status === 20000) {
-                    setAddVisible(false)
-                    getData(formData)
-                }
-            })
-        }
-
-    }
-    const editBtn = () => {
-        let data = {
-            ...getEditData,
-            id: getId.id,
-        }
-        if (getEditData.region_id == '') {
-            message.error('请选择区域')
-        } else if (getEditData.operatorid == '') {
-            message.error('请选择商户')
-        } else if (getEditData.code == '') {
-            message.error('请输入物品编号')
-        } else if (getEditData.name == '') {
-            message.error('请输入物品名称')
-        } else if (getEditData.brand_id == '') {
-            message.error('请选择物品类型')
-        } else if (getEditData.model_id == '') {
-            message.error('请选择物品型号')
-        } else {
-            ajax.saveEditData(data).then((res) => {
-                if (res.status === 20000) {
-                    setEditVisible(false)
-                    getData(formData)
-                }
-            })
-        }
-    }
     const placeBtn = () => {
-        setAddVisible(false)
         setEditVisible(false)
     }
     const [sessionTabList, setSessionTabList] = useSessionStorageState('StaggeredOrder', {
@@ -349,14 +236,13 @@ function StaggeredOrder(props) {
         console.log(location)
         if (sessionTabList && Object.values(sessionTabList).length > 0) {
             setFormData({
-                region_id: sessionTabList?.region_id,//区域
-                code: sessionTabList?.code,//物品编号
-                brand_id: sessionTabList?.brand_id,//物品类型
-                model_id: sessionTabList?.model_id,//物品型号
-                operatorid: sessionTabList?.operatorid,//商户名称
-                name: sessionTabList?.name,//物品名称
-                status: sessionTabList?.status,//状态
-                uid: sessionTabList?.uid,//领用人
+                road: sessionTabList?.road,
+                phone: sessionTabList?.phone,
+                plate: sessionTabList?.plate,
+                method: sessionTabList?.method,
+                start_time: sessionTabList?.start_time,
+                end_time: sessionTabList?.end_time,
+                serial_number: sessionTabList?.serial_number,
             })
         }
     }, [])
@@ -365,17 +251,8 @@ function StaggeredOrder(props) {
             ...formData
         })
     }, [formData])
-    const [getMerchantDataName,setGetMerchantDataName]=useState([])
-    const merchantDataName=()=>{
-        ajax.getPayData().then(res=>{
-            if(res.status===20000){
-                setGetMerchantDataName(res)
-            }
-        })
-    }
     useEffect(() => {
         getData()
-        merchantDataName()
     }, [])
     return <>
         <div className="paid-StaggeredOrder">
@@ -413,7 +290,7 @@ function StaggeredOrder(props) {
                     <Select
                         style={{ width: 255, marginLeft: 14 }}
                         value={formData.method}
-                        options={getMerchantDataName}
+                        options={sysConfig.StaggeredPay}
                         onChange={handleMethod}
                     />
                 </div>
@@ -483,142 +360,97 @@ function StaggeredOrder(props) {
 
         </div>
         <Modal
-            visible={checkVisible}
-            onCancel={checkModal}
+            visible={editVisible}
+            onCancel={editModal}
             footer={null}
-            className="roadModal"
+            className="check-detail"
         >
-            <div className="table">
-                <Table
-                    bordered
-                    // className='yisa-table'
-                    dataSource={getRecordData}
-                    columns={
-                        handleDetail()
-                    }
-                    pagination={false}
-                    loading={ajaxLoading}
-                />
+            <div className="carTitle">
+                <span className="font">订单信息</span>
             </div>
-        </Modal>
-        <Modal
-            visible={addVisible}
-            onCancel={addModal}
-            footer={null}
-            title='添加物品'
-        >
-            <div className="add">
-                <div className="yisa-search">
-                    <label>物品编号</label>
-                    <Input
-                        placeholder="请输入"
-                        value={checkData.code}
-                        style={{ width: 180, marginLeft: 20 }}
-                        onChange={handleAddLoginName}
-                    />
+            <div className="order-msg">
+                <div className="order">
+                    <span className="message">
+                        停车场名称：
+                    </span>
+                    <span>
+                        {getRecordData.road_name}
+                    </span>
                 </div>
-                <div className="yisa-search">
-                    <label>物品名称</label>
-                    <Input
-                        placeholder="请输入"
-                        value={checkData.name}
-                        style={{ width: 180, marginLeft: 20 }}
-                        onChange={handleAddAssetsName}
-                    />
+                <div className="order">
+                    <span className="message">
+                        手机号：
+                    </span>
+                    <span>
+                        {getRecordData.phone}
+                    </span>
                 </div>
-                <div className="yisa-search">
-                    <label>状态</label>
-                    <Select
-                        style={{ width: 180, marginLeft: 47 }}
-                        placeholder="请选择"
-                        value={checkData.status}
-                        onChange={handleAddStatus}
-                        options={[
-                            {
-                                value: '0',
-                                label: '认领'
-                            },
-                            {
-                                value: '1',
-                                label: '空闲'
-                            }
-                        ]}
-                    />
+                <div className="order">
+                    <span className="message">
+                        车牌号：
+                    </span>
+                    <span>
+                        {getRecordData.plate}
+                    </span>
                 </div>
-                <div className="submitBtn">
-                    <button type="primary" className="submit colorBtn" onClick={() => { placeSaveBtn() }}>
-                        提交
-                    </button>
-                    <button type="primary" className="cancel colorReset" onClick={() => { placeBtn() }}>
-                        取消
-                    </button>
+                <div className="order">
+                    <span className="message">
+                        同步MS状态：
+                    </span>
+                    <span>
+                        {getRecordData.phone}
+                    </span>
                 </div>
-            </div>
-        </Modal>
-        <Modal
-            visible={editVisible}
-            onCancel={editModal}
-            footer={null}
-            title='编辑物品'
-        >
-            <div className="add">
-                <div className="yisa-search">
-                    <label>物品编号</label>
-                    <Input
-                        placeholder="请输入"
-                        value={getEditData.code}
-                        style={{ width: 180, marginLeft: 20 }}
-                        onChange={(v) => {
-                            setGetEditData(
-                                Object.assign({}, getEditData, { code: v.target.value })
-                            );
-                        }}
-                    />
+                <div className="order">
+                    <span className="message">
+                        订购时间：
+                    </span>
+                    <span className={getRecordData.status === 1 ? 'status-color' : 'status-bg'}>
+                        {getRecordData.status === 1 ? '同步失败' : '同步成功'}
+                    </span>
                 </div>
-                <div className="yisa-search">
-                    <label>物品名称</label>
-                    <Input
-                        placeholder="请输入"
-                        value={getEditData.name}
-                        style={{ width: 180, marginLeft: 20 }}
-                        onChange={(v) => {
-                            setGetEditData(
-                                Object.assign({}, getEditData, { name: v.target.value })
-                            );
-                        }}
-                    />
+                <div className="order">
+                    <span className="message">
+                        支付方式：
+                    </span>
+                    <span>
+                        {getRecordData.method}
+                    </span>
                 </div>
-                <div className="yisa-search">
-                    <label>状态</label>
-                    <Select
-                        style={{ width: 180, marginLeft: 47 }}
-                        placeholder="请选择"
-                        value={getEditData.status}
-                        onChange={(v) => {
-                            setGetEditData(
-                                Object.assign({}, getEditData, { status: v })
-                            );
-                        }}
-                        options={[
-                            {
-                                value: '0',
-                                label: '认领'
-                            },
-                            {
-                                value: '1',
-                                label: '空闲'
-                            }
-                        ]}
-                    />
+                <div className="order">
+                    <span className="message">
+                        订单金额：
+                    </span>
+                    <span>
+                        {getRecordData.order_amount}
+                    </span>
                 </div>
-                <div className="submitBtn">
-                    <button type="primary" className="submit colorBtn" onClick={() => { editBtn() }}>
-                        提交
-                    </button>
-                    <button type="primary" className="cancel colorReset" onClick={() => { placeBtn() }}>
-                        取消
-                    </button>
+            </div>
+            <div className="carTitle" style={{marginTop:20}}>
+                <span className="font">商品信息</span>
+            </div>
+            <div className="sale-msg">
+                <div className="order">
+                    <span className="message">
+                        销售金额：
+                    </span>
+                    <span>
+                        {getRecordData.price}
+                    </span>
                 </div>
+                <div className="order">
+                    <span className="message">
+                        有效时间：
+                    </span>
+                    <span>
+                        {getRecordData.effective_date}
+                    </span>
+                </div>
+            </div>
+            <div className="submitBtn">
+                <button type="primary" className="cancel colorReset" onClick={() => { placeBtn() }}>
+                    返回
+                </button>
             </div>
         </Modal>
     </>

src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredStat/index.scss

@@ -1,5 +1,292 @@
 @import "@/assets/css/mixin.scss";
-$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);
+$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);
+
+.colorBtn {
+  width: 90px;
+  height: 36px;
+  background: linear-gradient(180deg, #3aa9ff, #59b7ff) !important;
+  border-radius: 4px;
+  &:hover {
+    color: var(--color-text);
+    border-color: transparent;
+    // background: var(--button-default-bg-hover);
+    width: 90px;
+    height: 36px;
+    background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+    border-radius: 4px;
+  }
+}
+.colorReset {
+  width: 90px;
+  height: 36px;
+  border-radius: 4px;
+  border: none;
+  background: #636d80 !important;
+  &:hover {
+    color: var(--color-text);
+    border-color: transparent;
+    // background: var(--button-default-bg-hover);
+    width: 90px;
+    height: 36px;
+    background: #636d80;
+    border: none;
+    border-radius: 4px;
+  }
+}
+.paid-StaggeredStat {
+  display: flex;
+  padding: 15px;
+  width: 100%;
+  .paid-search {
+    .search {
+      font-size: 16px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Bold;
+      font-weight: 700;
+      text-align: left;
+      color: #eeeff1;
+    }
+    label {
+      margin: 0 10px;
+    }
+    .yisa-search {
+      margin-top: 10px;
+      display: flex;
+      label {
+        line-height: 31px;
+      }
+    }
+    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+      background-color: #50586c !important;
+    }
+    .ant-select-arrow .anticon {
+      background-color: #50586c !important;
+    }
+    .ant-input:placeholder-shown {
+      background-color: #50586c !important;
+    }
+    .timePicker {
+      width: 350px;
+      margin-top: 22px;
+      .btnBox {
+        display: flex;
+        margin-top: 20px;
+        .yisa-btn {
+          margin-left: 20px;
+          width: 85px;
+        }
+        .root_gfkk {
+          margin-left: 20px;
+          .export-content {
+            width: 130px;
+            height: 33px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #3b97ff;
+            border-radius: 3px;
+            cursor: pointer;
+            color: #fff;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+  .scheduleBtn {
+    background: #409eff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .paid-result {
+    width: 100%;
+    height: 834px;
+    background: #505a6f;
+    border-radius: 20px;
+    margin-left: 17px;
+    .result {
+      padding: 25px;
+      .font {
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: left;
+        color: #eeeff1;
+        margin-bottom: 10px;
+        display: inline-block;
+
+        em {
+          color: #3aa8fe;
+          margin: 0 5px;
+        }
+      }
+      .yisa-table .ant-table-thead .ant-table-cell {
+        background-color: #616b83 !important;
+        color: #ffffff !important;
+        font-size: 14px;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Bold;
+        font-weight: 700;
+        text-align: center;
+        border-right: none !important;
+        border-top-color: #888f9d !important;
+        border-color: #888f9d !important;
+      }
+      .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
+      .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
+        border-top: none !important;
+        border-left: none !important;
+      }
+      .ant-table-tbody .ant-table-row .ant-table-cell {
+        background-color: #3e4557 !important;
+        color: #ffffff !important;
+        text-align: center;
+        font-size: 14px;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei-Regular;
+        font-weight: 400;
+        border-right: none !important;
+        border-left: none !important;
+        border-bottom-color: #626b7e !important;
+      }
+    }
+    .status-color {
+      color: red;
+    }
+    .status-bg {
+      color: rgb(56, 174, 56);
+    }
+  }
+}
+.revenue {
+  .tab-title {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 400;
+    font-family:
+      Microsoft YaHei,
+      Microsoft YaHei-Regular;
+  }
+  width: 700px !important;
+  .tab-index {
+    .tab-top {
+      display: flex;
+      margin-top: 10px;
+      height: 30px;
+      line-height: 30px;
+      white-space: nowrap;
+      overflow: hidden;
+      border-bottom: 1px solid #e4e7ed;
+      .tab-li {
+        margin-left: 20px;
+        cursor: pointer;
+      }
+      .active {
+        color: #409eff;
+        cursor: pointer;
+        margin-left: 20px;
+        border-bottom: 1px solid #409eff !important;
+        margin-bottom: -1px !important;
+      }
+    }
+    .tab-bottom {
+      .yisa-tab {
+        .ant-table-cell {
+          background-color: #616b83 !important;
+          color: #ffffff !important;
+          font-size: 14px;
+          font-family:
+            Microsoft YaHei,
+            Microsoft YaHei-Bold;
+          font-weight: 700;
+          text-align: center;
+          border-right: none !important;
+          border-left: none !important;
+          border-bottom-color: #868d9d !important;
+        }
+      }
+    }
+  }
+}
+.roadModal {
+  width: 900px !important;
+  .table {
+    width: 780px;
+    margin-left: 40px;
+    .yisa-table .ant-table-thead .ant-table-cell {
+      background-color: #616b83 !important;
+      color: #ffffff !important;
+      font-size: 14px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Bold;
+      font-weight: 700;
+      text-align: center;
+      border-right: none !important;
+      border-top-color: #888f9d !important;
+      border-color: #888f9d !important;
+    }
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
+      border-top: none !important;
+      border-left: none !important;
+    }
+    .ant-table-tbody .ant-table-row .ant-table-cell {
+      background-color: #3e4557 !important;
+      color: #ffffff !important;
+      text-align: center;
+      font-size: 14px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Regular;
+      font-weight: 400;
+      border-right: none !important;
+      border-left: none !important;
+      border-bottom-color: #626b7e !important;
+    }
+  }
+}
+.operateBtn {
+  div {
+    cursor: pointer;
+    margin-top: 5px;
+  }
+}
+.add {
+  margin-left: 100px;
+  .yisa-search {
+    margin-top: 20px;
+  }
+  .submitBtn {
+    margin-left: 54px;
+    margin-top: 20px;
+    .submit {
+      width: 80px;
+      height: 35px;
+      background: #409eff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      color: #fff;
+    }
+    .cancel {
+      width: 80px;
+      height: 35px;
+      background: #fff;
+      border: none;
+      border-radius: 4px;
+      color: #3e4557;
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
+}

src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredStat/loadable.jsx

@@ -1,15 +1,244 @@
 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 {   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 {  useLocation } from "react-router-dom";
-function StaggeredStat() {
-    return <div>StaggeredStat</div>
+import { ResultFlowResult } from "@/components"
+import { Select, Input, Button, Table, message, TreeSelect, Pagination, DatePicker, Space} from 'antd'
+import {
+    pageSizeOptions
+} from '@/config/character.config.js'
+import "./index.scss";
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
+import ajax from '@/services'
+import { useSessionStorageState } from "ahooks"
+import { useNavigate, useLocation } from "react-router-dom"
+const { RangePicker } = DatePicker;
+import moment from 'moment'
+function StaggeredStat(props) {
+    // const configData = props.sysConfig["lib-deploy"] || {};
+    const [ajaxLoading, setAjaxLoading] = useState(false)
+    const location = useLocation()
+
+    const [resultData, setResultData] = useState({
+        data: [],
+        total_records: 0,
+        export_url: '',
+        process_url: ""
+    })
+    const parameter = {
+        road: '',//停车场名称
+        phone: '',//手机号
+        start_date: moment().subtract(30, 'days').startOf('day').format('YYYY-MM-DD '),
+        end_date: moment().format('YYYY-MM-DD '),
+        pn: 1,
+        page_size: Number(pageSizeOptions[0]),  // 每页条数
+    }
+    const [formData, setFormData] = useState(parameter)
+    const [lastFormData, setLastFormData] = useState(formData)
+    const lastFormDataRef = useRef(formData)
+
+
+    //停车场名称
+    const handlePartName = (value) => {
+        setFormData({ ...formData, road: value.target.value })
+    }
+    //统计时间
+    const onChange = (value, dateString) => {
+        console.log('Formatted Selected Time: ', dateString);
+        setFormData({
+            ...formData,
+            start_date: dateString[0],
+            end_date: dateString[1]
+        })
+    };
+
+    //导出
+    const exportData = () => {
+        let data = {
+            ...formData
+        }
+        ajax.getStaggeredStatExport(data).then(res => {
+            window.open(res.data.url)
+        })
+    }
+    //列表
+    const handleColumns = (tab) => {
+        let result = [...deployListColumns];
+        switch (tab) {
+            case '1':
+                result.splice(5, 1)
+                break;
+
+        }
+        return result;
+    }
+    //列表
+    const deployListColumns = [
+        {
+            title: '序号',
+            render: (_, record, index) => {
+                return index + 1
+            }
+        },
+        {
+            title: '停车场名称',
+            dataIndex: 'road_name',
+            key: 'road_name',
+        },
+        {
+            title: '销售数量',
+            dataIndex: 'num',
+            key: 'num',
+        },
+        {
+            title: '实收金额',
+            dataIndex: 'total',
+            key: 'total',
+        }]
+    //重置数据
+    const getResetData = () => {
+        setFormData({
+            ...parameter
+        })
+        getData({ ...parameter })
+    }
+    // 获取列表数据
+    const getData = (data = formData) => {
+        setAjaxLoading(true)
+        ajax.getStaggeredStatData(data).then(res => {
+            setAjaxLoading(false)
+            if (res.status === 20000) {
+                let resDataArr = res.data.list.map((item) => {
+                    item.key = item.id
+                    return item
+                })
+                setResultData({
+                    ...resultData,
+                    data: resDataArr,
+                    total_records: res.data.total
+                })
+            } else {
+                setResultData({
+                    data: [],
+                    total_records: 0,
+                    export_url: '',
+                    process_url: ""
+                })
+                message.error(res.message)
+            }
+        }, err => {
+            console.log(err)
+        })
+    }
+    //切换分页
+    const changePn = (pn, length) => {
+        if (lastFormData.page_size === length) {
+            setLastFormData(Object.assign({}, lastFormData, { pn: pn }))
+            lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn })
+            getData(Object.assign({}, lastFormData, { pn: pn }))
+        }
+    }
+    //切换每页条数
+    const changeLength = (pn, length) => {
+        setFormData(Object.assign({}, formData, { pn: 1, page_size: length }))
+        setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length }))
+        lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length })
+        getData(Object.assign({}, lastFormData, { pn: 1, page_size: length }))
+    }
+    //检索数据
+    const getSearchData = (data = formData) => {
+        getData(data)
+    }
+    const [sessionTabList, setSessionTabList] = useSessionStorageState('StaggeredStat', {
+        value: {
+        }
+    })
+    useEffect(() => {
+        console.log(location)
+        if (sessionTabList && Object.values(sessionTabList).length > 0) {
+            setFormData({
+                road: sessionTabList?.road,
+                start_date: sessionTabList?.start_date,
+                end_date: sessionTabList?.end_date
+            })
+        }
+    }, [])
+    useEffect(() => {
+        setSessionTabList({
+            ...formData
+        })
+    }, [formData])
+    useEffect(() => {
+        getData()
+    }, [])
+    return <>
+        <div className="paid-StaggeredStat">
+            <div className="paid-search">
+                <label className="search">查询条件</label>
+                <div className="yisa-search">
+                    <label>停车场名称</label>
+                    <Input
+                        placeholder="请输入停车场名称"
+                        value={formData.road}
+                        style={{ width: 255 }}
+                        onChange={handlePartName}
+                    />
+                </div>
+                <div className="yisa-search">
+                    <label>统计时间</label>
+                    <Space direction="vertical" size={12}>
+                        <RangePicker
+                            value={[moment(formData.start_date), moment(formData.end_date)]}
+                            allowClear={false}
+                            style={{ width: 255,marginLeft:14 }}
+                            format="YYYY-MM-DD"
+                            onChange={onChange}
+                        />
+                    </Space>
+                </div>
+                <div className="timePicker yisa-search">
+                    <div className="btnBox">
+                        <Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
+                            搜索
+                        </Button>
+                        <Button type="primary" className="yisa-btn colorReset" icon={<DeleteOutlined />} onClick={() => { getResetData() }}>
+                            清空
+                        </Button>
+                        <Button type="primary" className="yisa-btn colorBtn" onClick={() => { exportData() }}>
+                            导出
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            <div className="paid-result">
+                <div className="result">
+                    <span className="font">共检索到<em>{resultData.total_records}</em>条结果</span>
+                    <ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}>
+                        <Table
+                            bordered
+                            // className='yisa-table'
+                            dataSource={resultData.data}
+                            columns={
+                                handleColumns()
+                            }
+                            pagination={false}
+                            loading={ajaxLoading}
+                        />
+                        <Pagination
+                            className="pagination-common"
+                            showSizeChanger
+                            showQuickJumper
+                            showTotal={() => `共 ${resultData.total_records} 条`}
+                            total={resultData.total_records}
+                            current={lastFormData.pn}
+                            pageSize={lastFormData.page_size}
+                            pageSizeOptions={pageSizeOptions}
+                            onChange={changePn}
+                            onShowSizeChange={changeLength}
+                        />
+                    </ResultFlowResult>
+                </div>
+            </div>
+
+        </div>
+    </>
 }
 
 export default StaggeredStat;

src/router/menu.js

@@ -77,6 +77,9 @@
             "callbackSuggestion",
             "complaintMgm",
             "errorCorrection",
+            "complainManage",
+          "complainWorkStat",
+          "complainStat",
             "areaManage",
             "orgnizationMgm",
             "adminMgm",
@@ -855,7 +858,22 @@
                             "text": "车场纠错",
                             "name": "errorCorrection",
                             "path":"/operationCenter/errorCorrection"
-                        }
+                        },
+                        {
+                          "text": "客诉工单",
+                          "name": "complainManage",
+                          "path":"/operationCenter/complainManage"
+                      },
+                       {
+                          "text": "客诉统计",
+                          "name": "complainStat",
+                          "path":"/operationCenter/complainStat"
+                      },
+                       {
+                          "text": "工作统计",
+                          "name": "complainWorkStat",
+                          "path":"/operationCenter/complainWorkStat"
+                      }
                     ]
                 },
                 {

src/services/OperationCenter/CustomerManage/index.js

@@ -68,7 +68,15 @@ const dealData = (params) => {
 //客服管理-反馈建议-提交审核
 const submitData = (params) => {
   return ajax({
-    url: "/api/bpm/yy/submit_data",
+    url: "/api/fin/abnormal_action/send_abnormal",
+    type: "post",
+    data: params,
+  });
+};
+//客服管理-客诉工单-列表
+const getComplainList = (params) => {
+  return ajax({
+    url: "/api/ope/service/complain_list",
     type: "post",
     data: params,
   });
@@ -82,5 +90,6 @@ export default{
   dealData,
   submitData,
   passData,
-  rejectData
+  rejectData,
+  getComplainList
 }

src/services/OperationCenter/StaggeredMgm/index.js

@@ -61,6 +61,22 @@ const getPayData = (params) => {
     data: params,
   });
 };
+//错峰订统计
+const getStaggeredStatData = (params) => {
+  return ajax({
+    url: "/api/ope/parkcard/staggered_order_count",
+    type: "post",
+    data: params,
+  });
+};
+//错峰导出
+const getStaggeredStatExport = (params) => {
+  return ajax({
+    url: "/api/ope/parkcard/staggered_order_count_export",
+    type: "post",
+    data: params,
+  });
+};
 export default {
   getStaggeredList,
   getStaggeredSearch,
@@ -69,5 +85,7 @@ export default {
   getEditStaggered,
   getExportOrder,
   getOrderList,
-  getPayData
+  getPayData,
+  getStaggeredStatData,
+  getStaggeredStatExport
 }