|
|
@ -4,6 +4,7 @@ import { SearchOutlined, PhoneOutlined } from "@ant-design/icons"; |
|
|
import * as echarts from "echarts"; |
|
|
import * as echarts from "echarts"; |
|
|
import ReactEcharts from "echarts-for-react"; |
|
|
import ReactEcharts from "echarts-for-react"; |
|
|
// import { dictionary, utils } from "@/config/common"; |
|
|
// import { dictionary, utils } from "@/config/common"; |
|
|
|
|
|
import { ResultFlowResult, FormRangePickerNew } from "@/components"; |
|
|
import moment from "moment"; |
|
|
import moment from "moment"; |
|
|
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|
|
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|
|
import ajax from "@/services"; |
|
|
import ajax from "@/services"; |
|
|
@ -16,10 +17,12 @@ import "./index.scss"; |
|
|
// import { useLocation } from "react-router-dom"; |
|
|
// import { useLocation } from "react-router-dom"; |
|
|
function ComplainStat() { |
|
|
function ComplainStat() { |
|
|
// 查询数据 |
|
|
// 查询数据 |
|
|
const [formData, setFormData] = useState({ |
|
|
|
|
|
|
|
|
// 默认数据 |
|
|
|
|
|
const defaultData = { |
|
|
s_time: moment().subtract(7, "days").format("YYYY-MM-DD"), //起始时间 |
|
|
s_time: moment().subtract(7, "days").format("YYYY-MM-DD"), //起始时间 |
|
|
e_time: moment().format("YYYY-MM-DD"), //截止时间 |
|
|
e_time: moment().format("YYYY-MM-DD"), //截止时间 |
|
|
}); |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
const [formData, setFormData] = useState(defaultData); |
|
|
// 结果数据 |
|
|
// 结果数据 |
|
|
const [resultData, setResultData] = useState({ |
|
|
const [resultData, setResultData] = useState({ |
|
|
total: 0, // 投诉总量 |
|
|
total: 0, // 投诉总量 |
|
|
@ -38,6 +41,69 @@ function ComplainStat() { |
|
|
const [chartData4, setChartData4] = useState({}); |
|
|
const [chartData4, setChartData4] = useState({}); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
|
|
|
// 绘制左侧面 |
|
|
|
|
|
const CubeLeft = echarts.graphic.extendShape({ |
|
|
|
|
|
shape: { |
|
|
|
|
|
x: 0, |
|
|
|
|
|
y: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
buildPath: function (ctx, shape) { |
|
|
|
|
|
// 会canvas的应该都能看得懂，shape是从custom传入的 |
|
|
|
|
|
const xAxisPoint = shape.xAxisPoint; |
|
|
|
|
|
const c0 = [shape.x, shape.y]; |
|
|
|
|
|
const c1 = [shape.x - 18, shape.y - 10]; |
|
|
|
|
|
const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 9]; |
|
|
|
|
|
const c3 = [xAxisPoint[0], xAxisPoint[1]]; |
|
|
|
|
|
ctx |
|
|
|
|
|
.moveTo(c0[0], c0[1]) |
|
|
|
|
|
.lineTo(c1[0], c1[1]) |
|
|
|
|
|
.lineTo(c2[0], c2[1]) |
|
|
|
|
|
.lineTo(c3[0], c3[1]) |
|
|
|
|
|
.closePath(); |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
// 绘制右侧面 |
|
|
|
|
|
const CubeRight = echarts.graphic.extendShape({ |
|
|
|
|
|
shape: { |
|
|
|
|
|
x: 0, |
|
|
|
|
|
y: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
buildPath: function (ctx, shape) { |
|
|
|
|
|
const xAxisPoint = shape.xAxisPoint; |
|
|
|
|
|
const c1 = [shape.x, shape.y]; |
|
|
|
|
|
const c2 = [xAxisPoint[0], xAxisPoint[1]]; |
|
|
|
|
|
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]; |
|
|
|
|
|
const c4 = [shape.x + 18, shape.y - 9]; |
|
|
|
|
|
ctx |
|
|
|
|
|
.moveTo(c1[0], c1[1]) |
|
|
|
|
|
.lineTo(c2[0], c2[1]) |
|
|
|
|
|
.lineTo(c3[0], c3[1]) |
|
|
|
|
|
.lineTo(c4[0], c4[1]) |
|
|
|
|
|
.closePath(); |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
// 绘制顶面 |
|
|
|
|
|
const CubeTop = echarts.graphic.extendShape({ |
|
|
|
|
|
shape: { |
|
|
|
|
|
x: 0, |
|
|
|
|
|
y: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
buildPath: function (ctx, shape) { |
|
|
|
|
|
const c1 = [shape.x, shape.y]; |
|
|
|
|
|
const c2 = [shape.x + 18, shape.y - 9]; |
|
|
|
|
|
const c3 = [shape.x, shape.y - 18]; |
|
|
|
|
|
const c4 = [shape.x - 18, shape.y - 10]; |
|
|
|
|
|
ctx |
|
|
|
|
|
.moveTo(c1[0], c1[1]) |
|
|
|
|
|
.lineTo(c2[0], c2[1]) |
|
|
|
|
|
.lineTo(c3[0], c3[1]) |
|
|
|
|
|
.lineTo(c4[0], c4[1]) |
|
|
|
|
|
.closePath(); |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
echarts.graphic.registerShape("CubeLeft", CubeLeft); |
|
|
|
|
|
echarts.graphic.registerShape("CubeRight", CubeRight); |
|
|
|
|
|
echarts.graphic.registerShape("CubeTop", CubeTop); |
|
|
getData(); |
|
|
getData(); |
|
|
}, []); |
|
|
}, []); |
|
|
|
|
|
|
|
|
@ -76,41 +142,35 @@ function ComplainStat() { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 模版 |
|
|
// 模版 |
|
|
function renderItem(text, html, num, color) { |
|
|
|
|
|
|
|
|
function renderItem(text, html, num) { |
|
|
const bool = typeof num !== "undefined"; |
|
|
const bool = typeof num !== "undefined"; |
|
|
return ( |
|
|
return ( |
|
|
<div className="sum-item"> |
|
|
<div className="sum-item"> |
|
|
<div |
|
|
|
|
|
className="sum-con" |
|
|
|
|
|
style={{ justifyContent: bool ? "space-between" : "center" }} |
|
|
|
|
|
> |
|
|
|
|
|
<div className="num-box"> |
|
|
|
|
|
<PhoneOutlined /> |
|
|
|
|
|
{html} |
|
|
|
|
|
</div> |
|
|
|
|
|
{bool ? ( |
|
|
|
|
|
<div className="per-box"> |
|
|
|
|
|
<Progress |
|
|
|
|
|
type="circle" |
|
|
|
|
|
showInfo={false} |
|
|
|
|
|
strokeColor={color} |
|
|
|
|
|
strokeWidth={10} |
|
|
|
|
|
percent={num} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
) : null} |
|
|
|
|
|
|
|
|
<div className="lt-box"> |
|
|
|
|
|
<div className="sum-txt">{text}</div> |
|
|
|
|
|
<div className="sum-num">{html || 0}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className="sum-txt">{text}</div> |
|
|
|
|
|
|
|
|
{bool ? ( |
|
|
|
|
|
<div className="rt-box"> |
|
|
|
|
|
<Progress |
|
|
|
|
|
type="circle" |
|
|
|
|
|
showInfo={false} |
|
|
|
|
|
strokeColor={"#FED9DD"} |
|
|
|
|
|
strokeWidth={10} |
|
|
|
|
|
percent={num} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
) : null} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
return ( |
|
|
return ( |
|
|
<div className="paid-ComplainStat"> |
|
|
<div className="paid-ComplainStat"> |
|
|
<div className="paid-search"> |
|
|
<div className="paid-search"> |
|
|
<div className="form-box"> |
|
|
|
|
|
<div className="form-txt">统计时间</div> |
|
|
|
|
|
<DatePicker.RangePicker |
|
|
|
|
|
className="form-con" |
|
|
|
|
|
|
|
|
<div className="title">查询条件</div> |
|
|
|
|
|
<div className="form-Wrap"> |
|
|
|
|
|
<FormRangePickerNew |
|
|
|
|
|
label="统计时间" |
|
|
// showTime |
|
|
// showTime |
|
|
value={[ |
|
|
value={[ |
|
|
formData?.s_time ? moment(formData.s_time, "YYYY-MM-DD") : null, |
|
|
formData?.s_time ? moment(formData.s_time, "YYYY-MM-DD") : null, |
|
|
@ -125,57 +185,41 @@ function ComplainStat() { |
|
|
}); |
|
|
}); |
|
|
}} |
|
|
}} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
|
|
|
<div className="form-btn"> |
|
|
|
|
|
<Button |
|
|
|
|
|
className="submit" |
|
|
|
|
|
type="primary" |
|
|
|
|
|
icon={<SearchOutlined />} |
|
|
|
|
|
onClick={() => getData()} |
|
|
|
|
|
> |
|
|
|
|
|
查询 |
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
|
<div className="form-btn"> |
|
|
|
|
|
<Button className="reset" onClick={() => setFormData(defaultData)}> |
|
|
|
|
|
重置 |
|
|
|
|
|
</Button> |
|
|
|
|
|
<Button className="submit" type="primary" onClick={() => getData()}> |
|
|
|
|
|
查询 |
|
|
|
|
|
</Button> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className="paid-result"> |
|
|
<div className="paid-result"> |
|
|
<div className="paid-summary"> |
|
|
<div className="paid-summary"> |
|
|
|
|
|
{renderItem("投诉总量（条）", resultData?.total)} |
|
|
{renderItem( |
|
|
{renderItem( |
|
|
"投诉总量", |
|
|
|
|
|
<> |
|
|
|
|
|
<span>{resultData?.total || 0}</span>条 |
|
|
|
|
|
</> |
|
|
|
|
|
|
|
|
"待处理数量（条）", |
|
|
|
|
|
resultData?.wait_num, |
|
|
|
|
|
getPercent(resultData?.wait_num) |
|
|
)} |
|
|
)} |
|
|
{renderItem( |
|
|
{renderItem( |
|
|
"待处理数量", |
|
|
|
|
|
<> |
|
|
|
|
|
<span>{resultData?.wait_num || 0}</span>条 |
|
|
|
|
|
</>, |
|
|
|
|
|
getPercent(resultData?.wait_num), |
|
|
|
|
|
"#F3511D" |
|
|
|
|
|
|
|
|
"跟进中数量（条）", |
|
|
|
|
|
resultData?.follow_num, |
|
|
|
|
|
getPercent(resultData?.follow_num) |
|
|
)} |
|
|
)} |
|
|
{renderItem( |
|
|
{renderItem( |
|
|
"跟进中数量", |
|
|
|
|
|
<> |
|
|
|
|
|
<span>{resultData?.follow_num || 0}</span>条 |
|
|
|
|
|
</>, |
|
|
|
|
|
getPercent(resultData?.follow_num), |
|
|
|
|
|
"#F8BF4D" |
|
|
|
|
|
)} |
|
|
|
|
|
{renderItem( |
|
|
|
|
|
"已处理数量", |
|
|
|
|
|
<> |
|
|
|
|
|
<span>{resultData?.deal_num || 0}</span>条 |
|
|
|
|
|
</>, |
|
|
|
|
|
getPercent(resultData?.deal_num), |
|
|
|
|
|
"#9CC811" |
|
|
|
|
|
|
|
|
"已处理数量（条）", |
|
|
|
|
|
resultData?.deal_num, |
|
|
|
|
|
getPercent(resultData?.deal_num) |
|
|
)} |
|
|
)} |
|
|
{renderItem( |
|
|
{renderItem( |
|
|
"按时处理比率", |
|
|
"按时处理比率", |
|
|
<> |
|
|
<> |
|
|
<span>{resultData?.deal_rate || 0}</span>% |
|
|
|
|
|
|
|
|
{resultData?.deal_rate || 0} |
|
|
|
|
|
<span>%</span> |
|
|
</>, |
|
|
</>, |
|
|
resultData?.deal_rate || 0, |
|
|
|
|
|
"#8182E6" |
|
|
|
|
|
|
|
|
resultData?.deal_rate || 0 |
|
|
)} |
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
<div className="paid-graphic"> |
|
|
<div className="paid-graphic"> |
|
|
|
fengxiang
1 year ago