diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx index 07a98aa..a55a190 100644 --- a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx +++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx @@ -78,7 +78,7 @@ export const barChartOption = (data) => { grid: { top: 15, left: "5%", - right: "3%", + right: "40", bottom: len > 8 ? 25 : 15, containLabel: true, }, @@ -138,6 +138,9 @@ export const barChartOption = (data) => { ], yAxis: [ { + type: "value", + // type: "category", + name: "问题数量（个）", axisTick: { show: false }, axisLine: { lineStyle: { @@ -151,11 +154,9 @@ export const barChartOption = (data) => { }, }, axisLabel: { fontSize: 12, color: "#FFFFFF" }, - type: "value", - // type: "category", }, ], - series: renderBars(y_axis), + series: render3DBars(y_axis), }; }; @@ -189,6 +190,117 @@ function renderBars(arr) { return newArr; } +// 生成3D条形 +function render3DBars(arr) { + let newArr = []; + if (arr?.length) { + newArr = arr.map((v, i) => { + return { + type: 'custom', + renderItem: (params, api) => { + const location = api.coord([api.value(0), api.value(1)]) + return { + type: 'group', + children: [{ + type: 'CubeLeft', + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]) + }, + style: { + fill: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#3B80E2' + }, + { + offset: 1, + color: '#49BEE5' + }, + ], + global: false, + } + } + }, { + type: 'CubeRight', + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]) + }, + style: { + fill: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#3B80E2' + }, + { + offset: 1, + color: '#49BEE5' + }, + ], + global: false, + } + } + }, { + type: 'CubeTop', + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]) + }, + style: { + fill: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#3B80E2' + }, + { + offset: 1, + color: '#49BEE5' + }, + ], + global: false, + } + } + }] + } + }, + data: v?.value || [], + } + }); + } + return newArr; +} + // 饼图 export const pieChartOption = (data) => { const list = [...data]; @@ -203,12 +315,12 @@ export const pieChartOption = (data) => { }, grid: { top: "middle", - eft: "center", + left: "center", containLabel: false, }, legend: { orient: "horizontal", - top: "bottom", + top: "8", left: "center", data: labels, type: "scroll", @@ -217,7 +329,7 @@ export const pieChartOption = (data) => { // return name + " {a|" + list[num]?.value + "}"; // }, // itemWidth: 10, - // itemHeight: 10, + itemHeight: 10, textStyle: { color: "#FFFFFF", // width: 120, @@ -234,8 +346,8 @@ export const pieChartOption = (data) => { { // id: "1", type: "pie", - center: ["50%", "46%"], - radius: ["50%", "70%"], + center: ["50%", "58%"], + radius: ["60%", "70%"], data: list, // z: 0, // itemStyle: { @@ -260,7 +372,7 @@ export const pieChartOption = (data) => { fontSize: 16, fontWeight: 500, padding: [0, 0, 5], - color: "#3f7ff7", + color: "#59b7ff", }, name: { fontSize: 14, @@ -292,13 +404,13 @@ export const lineChartOption = (data) => { // top: y_axis?.length > 5 ? 60 : 40, top: 30, left: "5%", - right: "3%", + right: "40", bottom: len > 8 ? 25 : 15, containLabel: true, }, legend: { top: 0, - right: "3%", + left: "center", // itemWidth: 15, // itemHeight: 10, textStyle: { color: "#FFFFFF", fontSize: 12 }, @@ -357,6 +469,7 @@ export const lineChartOption = (data) => { yAxis: [ { type: "value", + name: "投诉次数（次）", axisLabel: { fontSize: 12, color: "#FFFFFF" }, axisLine: { lineStyle: { @@ -409,7 +522,7 @@ function renderLines(arr) { type: "line", // stack: "Total", yAxisIndex: 0, - // smooth: true, + smooth: true, // lineStyle: { // width: 2, // color: `#30b4ea`, diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss index dac5473..20e7e53 100644 --- a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss +++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss @@ -5,46 +5,72 @@ $color-text : var(--color-text); $color-primary : var(--color-primary); .paid-ComplainStat { - padding: 15px; + padding-top: 10px; width: 100%; height: 100%; display: flex; - flex-direction: column; .paid-search { - width: 100%; - display: flex; - align-items: center; - padding: 20px; - background: var(--color-user-list-bg); - border-radius: 10px; - box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); - - .ant-select-selector, - .ant-picker, - .ant-input { - background-color: var(--color-search-list-item-bg) !important; - box-shadow: none !important; - color: var(--color-search-list-item-value); - border-color: var(--color-search-list-item-bd) !important; + display: block; + width: 375px; + padding: 10px 10px 20px 20px; + // background: var(--color-user-list-bg); + // border-radius: 10px; + // box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); + + .title { + width: 100%; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + color: var(--color-text); + margin-bottom: 20px; } - .form-box { - width: 360px; - display: flex; - align-items: center; - - .form-txt { - color: var(--color-search-list-item-text); - flex: 0 0 25%; - max-width: 25%; - text-align: right; - padding-right: 8px; + .form-Wrap { + height: calc(100% - 45px); + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; } - .form-con { - flex: 1; - width: 220px; + .ant-select-selector, + .ant-picker, + .ant-input { + background-color: var(--color-search-list-item-bg) !important; + box-shadow: none !important; + color: var(--color-search-list-item-value); + border-color: var(--color-search-list-item-bd) !important; + } + + .form-box { + width: 100%; + display: flex; + align-items: center; + margin-bottom: 24px; + + .form-txt { + color: var(--color-search-list-item-text); + flex: 0 0 25%; + max-width: 25%; + text-align: right; + padding-right: 8px; + } + + + .form-con { + flex: 1; + width: 220px; + } + + .form-long { + flex: 1; + min-width: 220px; + } } } @@ -52,7 +78,8 @@ $color-primary : var(--color-primary); display: flex; flex-flow: row nowrap; justify-content: space-between; - margin-left: 40px; + margin: 40px 10px 10px; + padding: 0 3px; .ant-btn+.ant-btn { margin-left: 10px; @@ -74,7 +101,7 @@ $color-primary : var(--color-primary); } .submit { - width: 90px; + width: calc(100% - 100px); height: 36px; border-radius: 4px; } @@ -82,8 +109,12 @@ $color-primary : var(--color-primary); } .paid-result { - width: 100%; - margin-top: 20px; + width: calc(100% - 375px); + padding-bottom: 15px; + padding: 20px; + background: var(--color-user-list-bg); + border-top-left-radius: 20px; + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); flex: 1; display: flex; flex-direction: column; @@ -92,84 +123,74 @@ $color-primary : var(--color-primary); display: flex; justify-content: space-between; width: 100%; - height: 120px; + height: 108px; >div { width: calc(20% - 16px); height: 100%; background: var(--color-user-list-bg); - border-radius: 5px; + border-radius: 4px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); &.sum-item { display: flex; - flex-direction: column; + align-items: center; + justify-content: space-between; + overflow: hidden; padding: 6px; - .sum-con { + .lt-box { flex: 1; - display: flex; - align-items: center; - // justify-content: space-between; - overflow: hidden; - - .num-box { - padding-left: 30px; - .anticon { - color: var(--color-primary); - transform: rotate(95deg); - } + .sum-txt { + height: 34px; + line-height: 34px; + font-size: 14px; + text-align: center; + border-radius: 4px; + // background-color: rgba($color: pink, $alpha: 0.4); + } + .sum-num { + font-size: 24px; + font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Bold; + font-weight: 700; + text-align: center; >span { - margin-right: 5px; - font-size: 28px; - font-weight: 600; + margin-left: 5px; + font-size: 12px; } } - .per-box { - transform: scale(0.4); - } } - .sum-txt { - height: 34px; - line-height: 34px; - font-size: 16px; - text-align: center; - border-radius: 4px; - // background-color: rgba($color: pink, $alpha: 0.4); - } + .rt-box { + width: 95px; - @mixin setColor($color) { - .num-box>span { - color: $color; - } - .sum-txt { - background-color: rgba($color: $color, $alpha: 0.2); + .ant-progress { + transform: scale(0.5) translateX(-15px); } } &:nth-child(1) { - @include setColor(#459CFC); + background: linear-gradient(180deg, #73a9f1, #6a8def); } &:nth-child(2) { - @include setColor(#F3511D); + background: linear-gradient(180deg, #f17373, #ef6a89); } &:nth-child(3) { - @include setColor(#F8BF4D); + background: linear-gradient(180deg, #f9b36d, #ec934e); } &:nth-child(4) { - @include setColor(#9CC811); + background: linear-gradient(180deg, #6cc7d1, #20a7bc); } &:nth-child(5) { - @include setColor(#8182E6); + background: linear-gradient(180deg, #9d86fa, #926aef); } } } @@ -194,25 +215,29 @@ $color-primary : var(--color-primary); flex-direction: column; justify-content: space-between; padding: 10px; - background: var(--color-user-list-bg); - border-radius: 10px; - box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); + background: #3e4557; + border-radius: 4px; .title { width: 100%; height: 32px; display: flex; align-items: center; - - &::before { - content: ""; - display: inline-block; - width: 6px; - height: 20px; - margin-right: 8px; - border-radius: 3px; - background-color: var(--color-primary); - } + padding-left: 10px; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + color: #ffffff; + + // &::before { + // content: ""; + // display: inline-block; + // width: 6px; + // height: 20px; + // margin-right: 8px; + // border-radius: 3px; + // background-color: var(--color-primary); + // } } .wraper { diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx index 0f52130..5301c2e 100644 --- a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx +++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx @@ -4,6 +4,7 @@ import { SearchOutlined, PhoneOutlined } from "@ant-design/icons"; import * as echarts from "echarts"; import ReactEcharts from "echarts-for-react"; // import { dictionary, utils } from "@/config/common"; +import { ResultFlowResult, FormRangePickerNew } from "@/components"; import moment from "moment"; // import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; import ajax from "@/services"; @@ -16,10 +17,12 @@ import "./index.scss"; // import { useLocation } from "react-router-dom"; function ComplainStat() { // 查询数据 - const [formData, setFormData] = useState({ + // 默认数据 + const defaultData = { s_time: moment().subtract(7, "days").format("YYYY-MM-DD"), //起始时间 e_time: moment().format("YYYY-MM-DD"), //截止时间 - }); + }; + const [formData, setFormData] = useState(defaultData); // 结果数据 const [resultData, setResultData] = useState({ total: 0, // 投诉总量 @@ -38,6 +41,69 @@ function ComplainStat() { const [chartData4, setChartData4] = useState({}); 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(); }, []); @@ -76,41 +142,35 @@ function ComplainStat() { }; // 模版 - function renderItem(text, html, num, color) { + function renderItem(text, html, num) { const bool = typeof num !== "undefined"; return (
-
-
- - {html} -
- {bool ? ( -
- -
- ) : null} +
+
{text}
+
{html || 0}
-
{text}
+ {bool ? ( +
+ +
+ ) : null}
); } return (
-
-
统计时间
- 查询条件
+
+ -
-
- +
+ + +
+ {renderItem("投诉总量（条）", resultData?.total)} {renderItem( - "投诉总量", - <> - {resultData?.total || 0}条 - + "待处理数量（条）", + resultData?.wait_num, + getPercent(resultData?.wait_num) )} {renderItem( - "待处理数量", - <> - {resultData?.wait_num || 0}条 - , - getPercent(resultData?.wait_num), - "#F3511D" + "跟进中数量（条）", + resultData?.follow_num, + getPercent(resultData?.follow_num) )} {renderItem( - "跟进中数量", - <> - {resultData?.follow_num || 0}条 - , - getPercent(resultData?.follow_num), - "#F8BF4D" - )} - {renderItem( - "已处理数量", - <> - {resultData?.deal_num || 0}条 - , - getPercent(resultData?.deal_num), - "#9CC811" + "已处理数量（条）", + resultData?.deal_num, + getPercent(resultData?.deal_num) )} {renderItem( "按时处理比率", <> - {resultData?.deal_rate || 0}% + {resultData?.deal_rate || 0} + % , - resultData?.deal_rate || 0, - "#8182E6" + resultData?.deal_rate || 0 )}
diff --git a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingArrearsOrders/loadable.jsx b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingArrearsOrders/loadable.jsx index 35c65fc..ede5299 100644 --- a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingArrearsOrders/loadable.jsx +++ b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingArrearsOrders/loadable.jsx @@ -81,6 +81,7 @@ function OutParkingArrearsOrders() { name: "parking_lot", type: "Input", label: "停车场名称", + hiddenCount: true, placeholder: "请选择停车场名称", }, { @@ -90,16 +91,24 @@ function OutParkingArrearsOrders() { placeholder: "请选择车场类型", options: [ { - value: "", - label: "全部", + value: "0", + label: "独立车场", }, { value: "1", - label: "路内车场", + label: "一级车场", }, { value: "2", - label: "路外车场", + label: "二级车场", + }, + { + value: "3", + label: "三级车场", + }, + { + value: "4", + label: "四级车场", }, ], }, @@ -107,6 +116,7 @@ function OutParkingArrearsOrders() { name: "plate", type: "Input", label: "车牌号", + hiddenCount: true, placeholder: "请输入车牌号", }, {