diff --git a/src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss b/src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss
index ac845a0..bb3e9c5 100644
--- a/src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss
+++ b/src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss
@@ -468,6 +468,9 @@ margin-top: 20px;
}
.bindModal {
width: 1000px !important;
+ position: absolute;
+ top: 10px;
+ right: 511px;
.selectChange {
text-align: center;
}
diff --git a/src/pages/InRoadMgm/EquipmentMgm/NvrMgm/loadable.jsx b/src/pages/InRoadMgm/EquipmentMgm/NvrMgm/loadable.jsx
index b45cc26..6627ceb 100644
--- a/src/pages/InRoadMgm/EquipmentMgm/NvrMgm/loadable.jsx
+++ b/src/pages/InRoadMgm/EquipmentMgm/NvrMgm/loadable.jsx
@@ -56,7 +56,7 @@ function Fence(props) {
address: "",
device_name: "",
road_name: "", //路段名称
- operator: -1, //运营商
+ operator: "0", //运营商
export: false,
road_id: "", //所属路段
pn: 1,
diff --git a/src/pages/InRoadMgm/PersonMgm/Performance/WorkerStat/loadable.jsx b/src/pages/InRoadMgm/PersonMgm/Performance/WorkerStat/loadable.jsx
index d6c9f2a..409210e 100644
--- a/src/pages/InRoadMgm/PersonMgm/Performance/WorkerStat/loadable.jsx
+++ b/src/pages/InRoadMgm/PersonMgm/Performance/WorkerStat/loadable.jsx
@@ -88,59 +88,27 @@ function WorkerStat(props) {
key: 'name',
},
{
- title: '当日实收',
+ title: '实收金额',
dataIndex: 'today_sale',
key: 'today_sale',
},
{
- title: '当日追缴',
+ title: '追缴金额',
dataIndex: 'today_rate',
key: 'today_rate',
},
{
- title: '当日应收',
+ title: '应收金额',
dataIndex: 'today_receive',
key: 'today_receive',
},
{
- title: '收费员收费率',
+ title: '收费率',
dataIndex: 'sale_rate',
key: 'sale_rate',
},
{
- title: '营收总额',
- dataIndex: 'total_revenue',
- key: 'total_revenue',
- width: '160px',
- render: (text, record) => {
- return <>
-
- >
- },
- },
- {
- title: '预付金额',
- dataIndex: 'prepaid_amount',
- key: 'prepaid_amount',
- render: (text, record) => {
- return <>
-
- >
- },
- },
- {
- title: 'PDA欠费追缴金额',
- dataIndex: 'debt_collection_amount',
- key: 'debt_collection_amount',
- width: '200px',
- render: (text, record) => {
- return <>
-
- >
- },
- },
- {
- title: '入场操作记录数',
+ title: '入场操作数',
dataIndex: 'entry_operation_records_count',
key: 'entry_operation_records_count',
render: (text, record) => {
@@ -150,7 +118,7 @@ function WorkerStat(props) {
},
},
{
- title: '出场操作记录数',
+ title: '出场操作数',
dataIndex: 'exit_operation_records_count',
key: 'exit_operation_records_count',
width: '120px',
diff --git a/src/pages/InRoadMgm/PersonMgm/PersonInfo/loadable.jsx b/src/pages/InRoadMgm/PersonMgm/PersonInfo/loadable.jsx
index 303b552..8fece69 100644
--- a/src/pages/InRoadMgm/PersonMgm/PersonInfo/loadable.jsx
+++ b/src/pages/InRoadMgm/PersonMgm/PersonInfo/loadable.jsx
@@ -145,25 +145,8 @@ function PersonInfo() {
}
// 点击编辑 获取人员信息
- const getPersonAllRoad = () => {
- ajax.getPersonAllRoad().then(res => {
- if (res.status == 20000) {
- let temparr = [];
- res.data.map(item => {
- temparr.push({
- key: item.value + '',
- title: item.label
- })
- })
- setTranferAllData(temparr)
- } else {
- message.error(res.message)
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
-
- })
+ const getPersonAllRoad = (data) => {
+
}
// 重置密码
const resetPersonPwd = (id) => {
@@ -261,7 +244,7 @@ function PersonInfo() {
})
}
-
+ const [getPersonId, setGetPersonId] = useState('')
const changeOperator = (e) => {
setFormData({ operator_id: e });
getDeparts(e)
@@ -272,8 +255,32 @@ function PersonInfo() {
setCurrentPersonInfo({ ...currentPersonInfo, operator: e })
getDeparts(e)
getAssets(e)
+ setGetPersonId(e)
}
-
+ useEffect(() => {
+ if (getPersonId !='') {
+ let data = {
+ operator_id: getPersonId
+ }
+ ajax.getPersonAllRoad(data).then(res => {
+ if (res.status == 20000) {
+ let temparr = [];
+ res.data.map(item => {
+ temparr.push({
+ key: item.value + '',
+ title: item.label
+ })
+ })
+ setTranferAllData(temparr)
+ } else {
+ message.error(res.message)
+ }
+ }).catch(err => {
+ console.log(err)
+ }).finally(() => {
+ })
+ }
+ }, [getPersonId])
/**
* @description 分页功能模块
* @param {number} current 当前页
@@ -376,7 +383,7 @@ function PersonInfo() {
message.error('请输入员工编号')
} else if (currentPersonInfo.road_ids === '') {
message.error('请选择路段')
- } else if (getEdit==true) {
+ } else if (getEdit == true) {
ajax.editUserPersonInfo({ ...currentPersonInfo, id: currentPersonId }).then(res => {
if (res.status == 20000) {
message.success(res.message)
@@ -425,7 +432,7 @@ function PersonInfo() {
useEffect(() => {
getAllOperator()
- getPersonAllRoad()
+ // getPersonAllRoad()
}, [])
useEffect(() => {
diff --git a/src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx b/src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx
index 27f9df1..7244c18 100644
--- a/src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx
+++ b/src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx
@@ -727,6 +727,10 @@ function DisabledCarParkRecordTotal() {
onCancel={() => {
setCardVisible(false);
}}
+ onOk={()=>{
+ setCardVisible(false);
+
+ }}
>
{
- resultData.img_url?.map(res=>{
+
+ resultNewData.img_url?.map(res=>{
return(
diff --git a/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx b/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx
index 11a7314..1bf5965 100644
--- a/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx
+++ b/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx
@@ -9,6 +9,7 @@ import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import ajax from '@/services'
import { useSessionStorageState } from "ahooks"
import { useNavigate, useLocation } from "react-router-dom"
+import { operator } from '@/config/character.config.js';
function StuffMgm(props) {
// const configData = props.sysConfig["lib-deploy"] || {};
@@ -51,7 +52,7 @@ function StuffMgm(props) {
setFormData({ ...formData, name: v.target.value })
}
//物品类型
- const [getBrandId, setGetBrandId] = useState({})
+ const [getBrandId, setGetBrandId] = useState('')
const handleOperator = (v) => {
setGetBrandId(v)
setFormData({ ...formData, brand_id: v })
@@ -222,16 +223,16 @@ function StuffMgm(props) {
/**
*
*/
- if (record.status=== '0') {
+ if (record.status === '0') {
setGetSelectStatus(false)
}
- if (record.status=== '1') {
+ if (record.status === '1') {
setGetSelectStatus(true)
setGetUid({
uid: ''
})
}
- if (record.status=== '2') {
+ if (record.status === '2') {
setGetSelectStatus(true)
setGetUid({
uid: ''
@@ -351,39 +352,7 @@ function StuffMgm(props) {
const getSearchData = (data = formData) => {
getData(data)
}
- const [getOperationName, setGetOperationName] = useState([])
- const [getNewOperationName, setNewGetOperationName] = useState([])
- const operatorid = () => {
- ajax.assetsType().then(res => {
- let arr = res.data
- let newArr = arr.slice(1)
- setGetOperationName(res.data)
- setNewGetOperationName(newArr)
- })
- }
- const [getMerchantDataName, setGetMerchantDataName] = useState([])
- const [getNewMerchantDataName, setNewMerchantDataName] = useState([])
- const merchantDataName = () => {
- ajax.getOperator().then(res => {
- let arr = res.data
- let newArr = arr.slice(1)
- setGetMerchantDataName(res.data)
- setNewMerchantDataName(newArr)
- })
- }
- const [getAssetsModel, setGetAssetsModel] = useState([])
- const [getNewAssetsModel, setNewGetAssetsModel] = useState([])
- const assetsModelName = () => {
- let data = {
- brand_id: getBrandId
- }
- ajax.assetsModel(data).then(res => {
- let arr = res.data
- let newArr = arr.slice(1)
- setGetAssetsModel(res.data)
- setNewGetAssetsModel(newArr)
- })
- }
+
const [getRecipient, setGetRecipient] = useState([])
const recipientName = () => {
ajax.recipient().then(res => {
@@ -423,7 +392,7 @@ function StuffMgm(props) {
}
const [checkData, setCheckData] = useState(param)
const [getUid, setGetUid] = useState({
- uid:''
+ uid: ''
})
const onChange = (newValue) => {
let arr = newValue
@@ -436,7 +405,9 @@ function StuffMgm(props) {
};
//商户名称
const [getOperatorid, setGetOperatorid] = useState(true)
+ const [getOperatorValue, setGetOperatorValue] = useState('')
const handleAddDeployType = (value) => {
+ setGetOperatorValue(value)
if (value) {
setGetOperatorid(false)
}
@@ -592,9 +563,6 @@ function StuffMgm(props) {
})
setGetSelectStatus(false)
}
- useEffect(() => {
- assetsModelName()
- }, [getBrandId])
const [sessionTabList, setSessionTabList] = useSessionStorageState('stuffMgm', {
value: {
}
@@ -616,6 +584,51 @@ function StuffMgm(props) {
})
}
}, [])
+ const [getOperationName, setGetOperationName] = useState([])
+ const [getNewOperationName, setNewGetOperationName] = useState([])
+ useEffect(() => {
+ if (getOperatorValue != '') {
+ let data = {
+ operator_id: getOperatorValue
+ }
+ ajax.assetsType(data).then(res => {
+ let arr = res.data
+ let newArr = arr.slice(1)
+ setGetOperationName(res.data)
+ setNewGetOperationName(newArr)
+ })
+ }
+ }, [getOperatorValue])
+
+ const operatorid = () => {
+
+ }
+ const [getMerchantDataName, setGetMerchantDataName] = useState([])
+ const [getNewMerchantDataName, setNewMerchantDataName] = useState([])
+ const merchantDataName = () => {
+ ajax.getOperator().then(res => {
+ let arr = res.data
+ let newArr = arr.slice(1)
+ setGetMerchantDataName(res.data)
+ setNewMerchantDataName(newArr)
+ })
+ }
+ const [getAssetsModel, setGetAssetsModel] = useState([])
+ const [getNewAssetsModel, setNewGetAssetsModel] = useState([])
+ useEffect(() => {
+ if (getBrandId != '') {
+ let data = {
+ brand_id: getBrandId,
+ operator_id: getOperatorValue
+ }
+ ajax.assetsModel(data).then(res => {
+ let arr = res.data
+ let newArr = arr.slice(1)
+ setGetAssetsModel(res.data)
+ setNewGetAssetsModel(newArr)
+ })
+ }
+ }, [getBrandId])
useEffect(() => {
setSessionTabList({
...formData
diff --git a/src/pages/OperationCenter/CarMgm/CarAuth/index.scss b/src/pages/OperationCenter/CarMgm/CarAuth/index.scss
index c878ac3..5674e16 100644
--- a/src/pages/OperationCenter/CarMgm/CarAuth/index.scss
+++ b/src/pages/OperationCenter/CarMgm/CarAuth/index.scss
@@ -134,6 +134,9 @@ $color-primary : var(--color-primary);
text-align: center;
}
.new-value {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
display: inline-block;
width: 320px;
height: 32px;
diff --git a/src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/loadable.jsx b/src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/loadable.jsx
index fce577c..fa87b7b 100644
--- a/src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/loadable.jsx
+++ b/src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/loadable.jsx
@@ -351,7 +351,7 @@ function CallbackSuggestion(props) {
const beforeUpload = (file) => {
const isPNG = file.type === 'image/png';
if (!isPNG) {
- message.error(`请上传图片`);
+ message.error(`请上传png,jpeg类型图片`);
}
return isPNG || Upload.LIST_IGNORE;
};
diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx
new file mode 100644
index 0000000..07a98aa
--- /dev/null
+++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx
@@ -0,0 +1,563 @@
+const hexToRgba = (hex, alpha = 1) => {
+ const color = hex.slice(1);
+ const rgba = [
+ parseInt("0x" + color.slice(0, 2)),
+ parseInt("0x" + color.slice(2, 4)),
+ parseInt("0x" + color.slice(4, 6)),
+ alpha,
+ ];
+ return `rgba(${rgba.toString()})`;
+};
+const colorList = [
+ "#9baaff",
+ "#ff9ba7",
+ "#c8d6f4",
+ "#9bfff3",
+ "#ff9bf3",
+ "#eeb08e",
+ "#79d3fb",
+];
+function linearColors1(color) {
+ return {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0.3,
+ color: color,
+ },
+ {
+ offset: 1,
+ color: "#fff",
+ },
+ ],
+ global: false,
+ };
+}
+function linearColors2(color) {
+ return {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: hexToRgba(color, 1),
+ },
+ {
+ offset: 1,
+ color: hexToRgba(color, 0.2),
+ },
+ ],
+ global: false,
+ };
+}
+
+// 条形图
+export const barChartOption = (data) => {
+ const { x_axis = [], y_axis = [] } = data;
+ // console.log(data);
+ const len = parseInt(x_axis?.length || 0);
+ const zoomSpan = 100 / ((len < 8 ? 8 : len) / 8);
+ return {
+ backgroundColor: "transparent",
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ borderColor: "rgba(75, 253, 238, 0.4)",
+ textStyle: { color: "#FFFFFF", fontSize: 12 },
+ },
+ grid: {
+ top: 15,
+ left: "5%",
+ right: "3%",
+ bottom: len > 8 ? 25 : 15,
+ containLabel: true,
+ },
+ // legend: {
+ // top: 0,
+ // right: "3%",
+ // itemWidth: 15,
+ // itemHeight: 10,
+ // textStyle: { color: "#999999", fontSize: 12 },
+ // data: getLegend(y_axis),
+ // },
+ dataZoom: [
+ {
+ type: "inside",
+ // span: zoomSpan,
+ minSpan: zoomSpan,
+ maxSpan: zoomSpan,
+ zoomLock: true,
+ },
+ {
+ type: "slider",
+ backgroundColor: "rgba(255,255,255,.3)",
+ dataBackground: {
+ areaStyle: "#fff",
+ },
+ height: 9,
+ bottom: 15,
+ show: len > 8 ? true : false,
+ zoomLock: true,
+ moveHandleSize: 10,
+ handleIcon:
+ "path://M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z",
+ handleColor: "#0260FF",
+ handleSize: "95%",
+ // handleStyle: {
+ // shadowBlur: 3,
+ // shadowOffsetX: 1,
+ // shadowOffsetY: 1,
+ // shadowColor: "rgba(0, 0, 0, 0.6)",
+ // },
+ textStyle: {
+ fontSize: 12,
+ color: "#9A9A9A",
+ },
+ showDetail: false,
+ },
+ ],
+ xAxis: [
+ {
+ // type: "value",
+ type: "category",
+ axisTick: { show: false },
+ axisLine: { show: false },
+ axisLabel: { fontSize: 12, color: "#FFFFFF", interval: 0 },
+ data: x_axis || [],
+ },
+ ],
+ yAxis: [
+ {
+ axisTick: { show: false },
+ axisLine: {
+ lineStyle: {
+ color: "#9A9A9A",
+ opacity: 0.6,
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ opacity: 0.4,
+ },
+ },
+ axisLabel: { fontSize: 12, color: "#FFFFFF" },
+ type: "value",
+ // type: "category",
+ },
+ ],
+ series: renderBars(y_axis),
+ };
+};
+
+// 生成条形
+function renderBars(arr) {
+ let newArr = [];
+ if (arr?.length) {
+ newArr = arr.map((v, i) => {
+ return {
+ type: "bar",
+ name: v?.name || "数量",
+ // yAxisIndex: 0,
+ // barMaxWidth: "auto",
+ // barCategoryGap:20,
+ barWidth: 20,
+ label: {
+ show: true,
+ position: "top",
+ formatter: function (params) {
+ let value = params.value || params.value != 0 ? params.value : "";
+ return value;
+ },
+ },
+ itemStyle: {
+ color: i % 2 ? linearColors2("#fd9a9a") : linearColors2("#4a70f4"),
+ },
+ data: v?.value || [],
+ };
+ });
+ }
+ return newArr;
+}
+
+// 饼图
+export const pieChartOption = (data) => {
+ const list = [...data];
+ const labels = list?.length ? list.map((v) => v.name) : [];
+ const option = {
+ color: colorList,
+ backgroundColor: "transparent",
+ tooltip: {
+ trigger: "item",
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ textStyle: { color: "#FFFFFF", fontSize: 14 },
+ },
+ grid: {
+ top: "middle",
+ eft: "center",
+ containLabel: false,
+ },
+ legend: {
+ orient: "horizontal",
+ top: "bottom",
+ left: "center",
+ data: labels,
+ type: "scroll",
+ // formatter(name) {
+ // let num = labels.findIndex((v) => v == name);
+ // return name + " {a|" + list[num]?.value + "}";
+ // },
+ // itemWidth: 10,
+ // itemHeight: 10,
+ textStyle: {
+ color: "#FFFFFF",
+ // width: 120,
+ // overflow: "breakAll",
+ // lineHeight: 16,
+ // rich: {
+ // a: { color: "#3f7ff7" },
+ // },
+ },
+ // itemGap: 16,
+ // selectedMode: false
+ },
+ series: [
+ {
+ // id: "1",
+ type: "pie",
+ center: ["50%", "46%"],
+ radius: ["50%", "70%"],
+ data: list,
+ // z: 0,
+ // itemStyle: {
+ // color: ({ dataIndex }: any) => linearColors2[dataIndex % 20],
+ // },
+ emphasis: { label: { show: true } },
+ label: {
+ show: false,
+ position: "center",
+ // borderRadius: 10,
+ // backgroundColor: "#ffffff",
+ // width: "120",
+ // overflow: "breakAll",
+ formatter(param) {
+ // return "{num|" + param.value + "}" + "\n {name|" + param.name + "}";
+ return (
+ "{num|" + param.percent + "%}" + "\n {name|" + param.name + "}"
+ );
+ },
+ rich: {
+ num: {
+ fontSize: 16,
+ fontWeight: 500,
+ padding: [0, 0, 5],
+ color: "#3f7ff7",
+ },
+ name: {
+ fontSize: 14,
+ color: "#FFFFFF",
+ },
+ },
+ },
+ },
+ ],
+ };
+ return option;
+};
+
+// 折线图
+export const lineChartOption = (data) => {
+ const { x_axis = [], y_axis = [] } = data;
+ // console.log(data);
+ const len = parseInt(x_axis?.length || 0);
+ const zoomSpan = 100 / ((len < 8 ? 8 : len) / 8);
+ return {
+ backgroundColor: "transparent",
+ tooltip: {
+ trigger: "axis",
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ borderColor: "rgba(75, 253, 238, 0.4)",
+ textStyle: { color: "#FFFFFF", fontSize: 12 },
+ },
+ grid: {
+ // top: y_axis?.length > 5 ? 60 : 40,
+ top: 30,
+ left: "5%",
+ right: "3%",
+ bottom: len > 8 ? 25 : 15,
+ containLabel: true,
+ },
+ legend: {
+ top: 0,
+ right: "3%",
+ // itemWidth: 15,
+ // itemHeight: 10,
+ textStyle: { color: "#FFFFFF", fontSize: 12 },
+ data: getLegend(y_axis),
+ },
+ dataZoom: [
+ {
+ type: "inside",
+ // span: zoomSpan,
+ minSpan: zoomSpan,
+ maxSpan: zoomSpan,
+ zoomLock: true,
+ },
+ {
+ type: "slider",
+ backgroundColor: "rgba(255,255,255,.3)",
+ dataBackground: {
+ areaStyle: "#fff",
+ },
+ height: 9,
+ bottom: 15,
+ show: len > 8 ? true : false,
+ zoomLock: true,
+ moveHandleSize: 10,
+ handleIcon:
+ "path://M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z",
+ handleColor: "#0260FF",
+ handleSize: "95%",
+ // handleStyle: {
+ // shadowBlur: 3,
+ // shadowOffsetX: 1,
+ // shadowOffsetY: 1,
+ // shadowColor: "rgba(0, 0, 0, 0.6)",
+ // },
+ textStyle: {
+ fontSize: 12,
+ color: "#9A9A9A",
+ },
+ showDetail: false,
+ },
+ ],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: { fontSize: 12, color: "#FFFFFF" },
+ axisLine: {
+ lineStyle: {
+ color: "#9A9A9A",
+ opacity: 0.55,
+ },
+ },
+ data: x_axis || [],
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ axisLabel: { fontSize: 12, color: "#FFFFFF" },
+ axisLine: {
+ lineStyle: {
+ color: "#9A9A9A",
+ opacity: 0.6,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ lineStyle: {
+ opacity: 0.4,
+ },
+ },
+ },
+ ],
+ series: renderLines(y_axis),
+ // series: {
+ // name: "数量",
+ // type: "line",
+ // smooth: true,
+ // lineStyle: {
+ // width: 2,
+ // color: "#58b8ff",
+ // },
+ // data: y_axis || [],
+ // },
+ };
+};
+
+// 获取图例
+function getLegend(arr) {
+ let newArr = [];
+ if (arr?.length) {
+ arr.forEach((v, i) => {
+ newArr.push(v?.name || "数量" + i);
+ });
+ }
+ return newArr;
+}
+
+// 生成折线
+function renderLines(arr) {
+ let newArr = [];
+ if (arr?.length) {
+ newArr = arr.map((v) => {
+ return {
+ name: v?.name || "数量",
+ type: "line",
+ // stack: "Total",
+ yAxisIndex: 0,
+ // smooth: true,
+ // lineStyle: {
+ // width: 2,
+ // color: `#30b4ea`,
+ // },
+ // itemStyle: {
+ // color: `#30b4ea`,
+ // },
+ // areaStyle: {
+ // opacity: 0.8,
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // {
+ // offset: 0,
+ // color: "rgba(59,255,244,0.3)",
+ // },
+ // {
+ // offset: 1,
+ // color: "rgba(59,255,244,0)",
+ // },
+ // ]),
+ // },
+ data: v?.value || [],
+ };
+ });
+ }
+ return newArr;
+}
+
+// 水球
+export function waterOption(data) {
+ let num = (data / 100).toFixed(2);
+ return {
+ backgroundColor: "transparent",
+ // title: [
+ // {
+ // text: "比率",
+ // x: "22%",
+ // y: "70%",
+ // textStyle: {
+ // fontSize: 14,
+ // fontWeight: "100",
+ // color: "#5dc3ea",
+ // lineHeight: 16,
+ // textAlign: "center",
+ // },
+ // },
+ // ],
+ series: [
+ {
+ type: "liquidFill",
+ radius: "85%",
+ // center: ["25%", "45%"],
+ color: [
+ {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#7A7BF0",
+ },
+ {
+ offset: 0.25,
+ color: "#7F76F1",
+ },
+ {
+ offset: 0.5,
+ color: "#9170F7",
+ },
+ {
+ offset: 0.75,
+ color: "#BF7EFB",
+ },
+ {
+ offset: 1,
+ color: "#C89EF9",
+ },
+ ],
+ globalCoord: false,
+ },
+ ],
+ data: [num, num], // data个数代表波浪数
+ backgroundStyle: {
+ borderWidth: 1,
+ opacity: 0.5,
+ color: {
+ type: "radial",
+ x: 0.5,
+ y: 0.5,
+ r: 0.5,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#E9EAFB",
+ },
+ {
+ offset: 0.4,
+ color: "#E9EAFB",
+ },
+ {
+ offset: 1,
+ color: "#CDCDF9",
+ },
+ ],
+ global: false,
+ },
+ },
+ label: {
+ fontSize: 14,
+ color: "#fff",
+ formatter(param) {
+ return "{num|" + data + "%}" + "\n {name|完好率}";
+ },
+ rich: {
+ num: {
+ fontSize: 20,
+ padding: [10, 0, 5],
+ color: "#ffffff",
+ },
+ name: {
+ fontSize: 10,
+ color: "#ffffff",
+ },
+ },
+ },
+ outline: {
+ // show: false,
+ borderDistance: 0,
+ itemStyle: {
+ borderWidth: 3,
+ borderColor: "#CCD5F6",
+ },
+ },
+ },
+ {
+ type: "pie",
+ radius: ["85%", "100%"],
+ silent: true,
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ color: "#EDEDFD",
+ },
+ data: [{ value: 100 }],
+ },
+ ],
+ };
+}
diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss
index fea4653..dac5473 100644
--- a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss
+++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss
@@ -17,7 +17,7 @@ $color-primary : var(--color-primary);
align-items: center;
padding: 20px;
background: var(--color-user-list-bg);
- border-radius: 20px;
+ border-radius: 10px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
.ant-select-selector,
@@ -85,39 +85,91 @@ $color-primary : var(--color-primary);
width: 100%;
margin-top: 20px;
flex: 1;
- padding: 20px;
display: flex;
flex-direction: column;
- background: var(--color-user-list-bg);
- border-radius: 20px;
- box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
.paid-summary {
display: flex;
justify-content: space-between;
width: 100%;
- // height: 100px;
+ height: 120px;
>div {
- width: calc(25% - 15px);
+ width: calc(20% - 16px);
height: 100%;
- background-color: #ffc0cb;
- &.sum-item{
+ background: var(--color-user-list-bg);
+ border-radius: 5px;
+ box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
+
+ &.sum-item {
display: flex;
flex-direction: column;
- .sum-con{
+ padding: 6px;
+
+ .sum-con {
flex: 1;
display: flex;
align-items: center;
- justify-content: space-between;
+ // justify-content: space-between;
+ overflow: hidden;
+
+ .num-box {
+ padding-left: 30px;
+
+ .anticon {
+ color: var(--color-primary);
+ transform: rotate(95deg);
+ }
+
+
+ >span {
+ margin-right: 5px;
+ font-size: 28px;
+ font-weight: 600;
+ }
+ }
- .per-box{
- transform: scale(0.5);
+ .per-box {
+ transform: scale(0.4);
}
}
- .sum-txt{
- padding: 3px;
+
+ .sum-txt {
+ height: 34px;
+ line-height: 34px;
+ font-size: 16px;
text-align: center;
+ border-radius: 4px;
+ // background-color: rgba($color: pink, $alpha: 0.4);
+ }
+
+ @mixin setColor($color) {
+ .num-box>span {
+ color: $color;
+ }
+ .sum-txt {
+ background-color: rgba($color: $color, $alpha: 0.2);
+ }
+ }
+
+ &:nth-child(1) {
+ @include setColor(#459CFC);
+ }
+
+ &:nth-child(2) {
+ @include setColor(#F3511D);
+ }
+
+ &:nth-child(3) {
+ @include setColor(#F8BF4D);
+ }
+
+ &:nth-child(4) {
+ @include setColor(#9CC811);
+ }
+
+ &:nth-child(5) {
+ @include setColor(#8182E6);
}
}
}
@@ -135,10 +187,39 @@ $color-primary : var(--color-primary);
margin-top: 20px;
}
- >div {
+ .chart-box {
width: 100%;
height: calc(50% - 10px);
- background-color: yellow;
+ display: flex;
+ 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);
+
+ .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);
+ }
+ }
+
+ .wraper {
+ flex: 1;
+ width: 100%;
+ // height: calc(100% - 32px);
+ }
}
&.col-one {
diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx
index 98e8dc5..0f52130 100644
--- a/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx
+++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx
@@ -1,42 +1,106 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
import { message, Button, DatePicker, Progress, Modal } from "antd";
-import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
+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 moment from 'moment'
+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 ajax from "@/services";
+import {
+ pieChartOption,
+ barChartOption,
+ lineChartOption,
+} from "./echartsOptions";
import "./index.scss";
-// import errorImg from "@/assets/images/layout/error.png"
// import { useLocation } from "react-router-dom";
function ComplainStat() {
- function renderItem() {
+ // 查询数据
+ const [formData, setFormData] = useState({
+ s_time: moment().subtract(7, "days").format("YYYY-MM-DD"), //起始时间
+ e_time: moment().format("YYYY-MM-DD"), //截止时间
+ });
+ // 结果数据
+ const [resultData, setResultData] = useState({
+ total: 0, // 投诉总量
+ wait_num: 0, // 待处理数量
+ follow_num: 0, // 跟进中数量
+ deal_num: 0, // 已处理数量
+ deal_rate: 0, // 按时处理比率
+ });
+ // 饼图数据1
+ const [chartData1, setChartData1] = useState([]);
+ // 饼图数据2
+ const [chartData2, setChartData2] = useState([]);
+ // 折线图数据
+ const [chartData3, setChartData3] = useState({});
+ // 条形图数据
+ const [chartData4, setChartData4] = useState({});
+
+ useEffect(() => {
+ getData();
+ }, []);
+
+ // 获取列表数据
+ const getData = () => {
+ ajax.getComplainStatistics(formData).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ let { base_data, pie1_data, pie2_data, line_data, bar_data } =
+ res?.data || {};
+ setResultData(base_data || {});
+ setChartData1(pie1_data || []);
+ setChartData2(pie2_data || []);
+ setChartData3(line_data || {});
+ setChartData4(bar_data || {});
+ } else {
+ message.error(res?.message);
+ }
+ },
+ (err) => {
+ console.log(err);
+ message.error("服务器异常");
+ }
+ );
+ };
+
+ // 计算百分比
+ const getPercent = (val) => {
+ const a = parseInt(resultData?.total);
+ const b = parseInt(val);
+ if (a && b) {
+ return ((b * 100) / a).toFixed(2);
+ } else {
+ return 0;
+ }
+ };
+
+ // 模版
+ function renderItem(text, html, num, color) {
+ const bool = typeof num !== "undefined";
return (
-
- 投诉总量
+
+ {bool ? (
+
+ ) : null}
+
{text}
);
}
@@ -48,8 +112,18 @@ function ComplainStat() {
setFormData({ ...formData, updateTimes: e })}
+ value={[
+ formData?.s_time ? moment(formData.s_time, "YYYY-MM-DD") : null,
+ formData?.e_time ? moment(formData.e_time, "YYYY-MM-DD") : null,
+ ]}
+ onChange={(e, str) => {
+ let bool = str?.length === 2;
+ setFormData({
+ ...formData,
+ s_time: bool ? str[0] : "",
+ e_time: bool ? str[1] : "",
+ });
+ }}
/>
@@ -57,8 +131,7 @@ function ComplainStat() {
className="submit"
type="primary"
icon={}
- // onClick={handleSearch}
- // loading={loading}
+ onClick={() => getData()}
>
查询
@@ -66,19 +139,81 @@ function ComplainStat() {
diff --git a/src/pages/OperationCenter/DataMonitor/MonitorCarSet/loadable.jsx b/src/pages/OperationCenter/DataMonitor/MonitorCarSet/loadable.jsx
index 89b9756..a96dcfc 100644
--- a/src/pages/OperationCenter/DataMonitor/MonitorCarSet/loadable.jsx
+++ b/src/pages/OperationCenter/DataMonitor/MonitorCarSet/loadable.jsx
@@ -23,12 +23,12 @@ function MonitorCarSet() {
},
{
title: "设置时间",
- dataIndex: "in_time",
+ dataIndex: "create_time",
align: "center",
},
{
title: "备注",
- dataIndex: "remark",
+ dataIndex: "text",
align: "center",
},
{
@@ -85,12 +85,19 @@ function MonitorCarSet() {
// 列表查询
function fetch(params) {
- ajax.getOutParkingArrearsList(params).then((res) => {
- if (parseInt(res?.status) === 20000) {
- setTableData(res.data.list);
- setTotal(res.data.total);
+ ajax.getMonitorCarList(params).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ const { list, total } = res?.data || {};
+ setTableData(list || []);
+ setTotal(total || 0);
+ }
+ },
+ (err) => {
+ console.log(err);
+ message.error("服务器异常");
}
- });
+ );
}
// 提交
@@ -99,7 +106,7 @@ function MonitorCarSet() {
message.error("请输入车牌号");
return;
}
- ajax.getOutParkingArrearsList(rowData).then(
+ ajax[rowData?.id ? "doMonitorCarEdit" : "doMonitorCarAdd"](rowData).then(
(res) => {
if (parseInt(res?.status) === 20000) {
message.success(res?.message);
@@ -123,7 +130,7 @@ function MonitorCarSet() {
// title: "删除",
content: <>此操作将删除该车辆,是否继续?>,
onOk: () => {
- ajax.getOutParkingArrearsList({ id: data?.id }).then(
+ ajax.doMonitorCarDel({ id: data?.id }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
message.success(res?.message);
@@ -210,11 +217,11 @@ function MonitorCarSet() {