From 74960e7d4f3042fb9e0ec54af823a360d4aa2bbe Mon Sep 17 00:00:00 2001
From: liuwh <964324856@qq.com>
Date: Tue, 17 Sep 2024 17:17:45 +0800
Subject: [PATCH] 提交
---
gz-customerSystem/src/assets/images/workDash_6.png | 0
gz-customerSystem/src/assets/images/disputeLedger_5.png | 0
gz-customerSystem/src/assets/images/workDash_1.png | 0
gz-customerSystem/src/assets/images/disputeLedger_4.png | 0
gz-customerSystem/src/assets/images/workDash_7.png | 0
gz-customerSystem/src/views/disputeLedger/index.jsx | 451 +++++++++++
gz-customerSystem/src/assets/images/workDash_5.png | 0
gz-customerSystem/src/assets/images/disputeLedger_6.png | 0
gz-customerSystem/src/assets/images/disputeLedger_3.png | 0
gz-customerSystem/src/assets/images/workDash_2.png | 0
gz-customerSystem/src/utils/utility.js | 6
gz-customerSystem/src/views/workDash/index.jsx | 806 +++++++++++++++++++++
gz-customerSystem/src/assets/images/disputeLedger_7.png | 0
gz-customerSystem/src/assets/images/workDash_4.png | 0
gz-customerSystem/src/components/NewTableSearch/index.jsx | 149 ++-
gz-customerSystem/src/assets/images/index.js | 310 ++++---
gz-customerSystem/src/views/workDash/index.less | 313 ++++++++
gz-customerSystem/src/assets/images/disputeLedger_2.png | 0
gz-customerSystem/src/views/comprehensive/index.jsx | 100 +-
gz-customerSystem/src/api/appUrl.js | 6
gz-customerSystem/src/views/comprehensive/index.less | 10
gz-customerSystem/src/assets/images/workDash_9.png | 0
gz-customerSystem/src/router/router.js | 5
gz-customerSystem/src/assets/images/disputeLedger_1.png | 0
gz-customerSystem/src/assets/images/workDash_3.png | 0
gz-customerSystem/src/assets/images/workDash_8.png | 0
gz-customerSystem/src/views/disputeLedger/index.less | 112 ++
gz-customerSystem/src/components/NewTableSearch/index.less | 5
28 files changed, 2,008 insertions(+), 265 deletions(-)
diff --git a/gz-customerSystem/src/api/appUrl.js b/gz-customerSystem/src/api/appUrl.js
index 20217be..9a37c3e 100644
--- a/gz-customerSystem/src/api/appUrl.js
+++ b/gz-customerSystem/src/api/appUrl.js
@@ -2,15 +2,15 @@
* @Company: hugeInfo
* @Author: ldh
* @Date: 2022-02-16 11:25:57
- * @LastEditTime: 2024-09-14 15:43:38
+ * @LastEditTime: 2024-09-15 10:34:45
* @LastEditors: lwh
* @Version: 1.0.0
* @Description: api地址
*/
export const debug = {
// web服务
- // baseUrl: 'http://gz.hugeinfo.com.cn',
- baseUrl: "http://4gg4nv.natappfree.cc",
+ baseUrl: 'http://gz.hugeinfo.com.cn',
+ // baseUrl: "http://4gg4nv.natappfree.cc",
// baseUrl: 'http://mdqgnh.natappfree.cc',
// 附件服务
diff --git a/gz-customerSystem/src/assets/images/disputeLedger_1.png b/gz-customerSystem/src/assets/images/disputeLedger_1.png
new file mode 100644
index 0000000..86bd13a
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/disputeLedger_1.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/disputeLedger_2.png b/gz-customerSystem/src/assets/images/disputeLedger_2.png
new file mode 100644
index 0000000..cf3e3fb
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/disputeLedger_2.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/disputeLedger_3.png b/gz-customerSystem/src/assets/images/disputeLedger_3.png
new file mode 100644
index 0000000..6587d5d
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/disputeLedger_3.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/disputeLedger_4.png b/gz-customerSystem/src/assets/images/disputeLedger_4.png
new file mode 100644
index 0000000..5292a83
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/disputeLedger_4.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/disputeLedger_5.png b/gz-customerSystem/src/assets/images/disputeLedger_5.png
new file mode 100644
index 0000000..48934ee
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/disputeLedger_5.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/disputeLedger_6.png b/gz-customerSystem/src/assets/images/disputeLedger_6.png
new file mode 100644
index 0000000..241fb44
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/disputeLedger_6.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/disputeLedger_7.png b/gz-customerSystem/src/assets/images/disputeLedger_7.png
new file mode 100644
index 0000000..56850ef
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/disputeLedger_7.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/index.js b/gz-customerSystem/src/assets/images/index.js
index d5aff9f..fff1650 100644
--- a/gz-customerSystem/src/assets/images/index.js
+++ b/gz-customerSystem/src/assets/images/index.js
@@ -2,147 +2,179 @@
* @Company: hugeInfo
* @Author: lwh
* @Date: 2023-04-24 16:12:00
- * @LastEditTime: 2024-09-11 09:44:38
- * @LastEditors: dminyi 1301963064@qq.com
+ * @LastEditTime: 2024-09-17 12:30:42
+ * @LastEditors: lwh
* @Version: 1.0.0
* @Description:
*/
-import ledger_1 from "./ledger_1.png";
-import ledger_2 from "./ledger_2.png";
-import ledger_3 from "./ledger_3.png";
-import ledger_4 from "./ledger_4.png";
-import ledger_5 from "./ledger_5.png";
-import ledger_6 from "./ledger_6.png";
-import ledger_7 from "./ledger_7.png";
-import ledger_8 from "./ledger_8.png";
-import ledger_9 from "./ledger_9.svg";
-import ledger_10 from "./ledger_10.png";
-import ledger_11 from "./ledger_11.png";
-import ledger_12 from "./ledger_12.png";
-import ledger_13 from "./ledger_13.png";
-import mediateBigData_1 from "./mediateBigData_1.png";
-import mediateBigData_2 from "./mediateBigData_2.png";
-import mediateBigData_3 from "./mediateBigData_3.png";
-import mediateBigData_4 from "./mediateBigData_4.png";
-import mediateBigData_5 from "./mediateBigData_5.png";
-import mediateBigData_6 from "./mediateBigData_6.png";
-import mediateBigData_7 from "./mediateBigData_7.png";
-import mediateBigData_8 from "./mediateBigData_8.png";
-import caseDetail from "./caseDetail.png";
-import caseDetailResult from "./caseDetailResult.png";
-import process from "./process.png";
-import add from "./add.png";
-import del from "./del.png";
-import question from "./question.png";
-import question1 from "./question1.png";
-import person from "./person.png";
-import link from "./link.png";
-import check from "./check.png";
-import image from "./image.png";
-import applyMaterials from "./applyMaterials.png";
-import applyMaterials_active from "./applyMaterials_active.png";
-import evidenceMaterials from "./evidenceMaterials.png";
-import evidenceMaterials_active from "./evidenceMaterials_active.png";
-import closeIcon from "./closeIcon.png";
-import backgroundImage from "./backgroundImage.jpg";
-import logo1 from "./logo1.png";
-import register from "./register.png";
-import Matter from "./matter.png";
-import transfer from "./transfer.png";
-import empty from "./empty.png";
-import feedback from "./feedback.png";
-import fold from "./fold.png";
-import down from "./down.png";
-import tip from "./tip.png";
-import apply from "./apply.png";
-import examine from "./examine.png";
-import knock from "./knock.png";
-import edit from "./edit.png";
-import applyRecord from "./applyRecord.png";
-import downO from "./downO.png";
-import up from "./up.png";
-import Audit from "./Audit.png";
-import aiPerson from "./aiPerson.png";
-import caselogo from "./caselogo.png";
-import tab1 from "./tab1.png";
-import tab2 from "./tab2.png";
-import tab3 from "./tab3.png";
-import tab4 from "./tab4.png";
-import tab5 from "./tab5.png";
-import tab6 from "./tab6.png";
-import visitInto from "./visitInto.png";
-import checkInto from "./checkInto.png";
-import floating from "./floating.png";
-import Aimge from "./Aimge.png";
-import yewu from "./yewu.png";
+import ledger_1 from './ledger_1.png';
+import ledger_2 from './ledger_2.png';
+import ledger_3 from './ledger_3.png';
+import ledger_4 from './ledger_4.png';
+import ledger_5 from './ledger_5.png';
+import ledger_6 from './ledger_6.png';
+import ledger_7 from './ledger_7.png';
+import ledger_8 from './ledger_8.png';
+import ledger_9 from './ledger_9.svg';
+import ledger_10 from './ledger_10.png';
+import ledger_11 from './ledger_11.png';
+import ledger_12 from './ledger_12.png';
+import ledger_13 from './ledger_13.png';
+import mediateBigData_1 from './mediateBigData_1.png';
+import mediateBigData_2 from './mediateBigData_2.png';
+import mediateBigData_3 from './mediateBigData_3.png';
+import mediateBigData_4 from './mediateBigData_4.png';
+import mediateBigData_5 from './mediateBigData_5.png';
+import mediateBigData_6 from './mediateBigData_6.png';
+import mediateBigData_7 from './mediateBigData_7.png';
+import mediateBigData_8 from './mediateBigData_8.png';
+import caseDetail from './caseDetail.png';
+import caseDetailResult from './caseDetailResult.png';
+import process from './process.png';
+import add from './add.png';
+import del from './del.png';
+import question from './question.png';
+import question1 from './question1.png';
+import person from './person.png';
+import link from './link.png';
+import check from './check.png';
+import image from './image.png';
+import applyMaterials from './applyMaterials.png';
+import applyMaterials_active from './applyMaterials_active.png';
+import evidenceMaterials from './evidenceMaterials.png';
+import evidenceMaterials_active from './evidenceMaterials_active.png';
+import closeIcon from './closeIcon.png';
+import backgroundImage from './backgroundImage.jpg';
+import logo1 from './logo1.png';
+import register from './register.png';
+import Matter from './matter.png';
+import transfer from './transfer.png';
+import empty from './empty.png';
+import feedback from './feedback.png';
+import fold from './fold.png';
+import down from './down.png';
+import tip from './tip.png';
+import apply from './apply.png';
+import examine from './examine.png';
+import knock from './knock.png';
+import edit from './edit.png';
+import applyRecord from './applyRecord.png';
+import downO from './downO.png';
+import up from './up.png';
+import Audit from './Audit.png';
+import aiPerson from './aiPerson.png';
+import caselogo from './caselogo.png';
+import tab1 from './tab1.png';
+import tab2 from './tab2.png';
+import tab3 from './tab3.png';
+import tab4 from './tab4.png';
+import tab5 from './tab5.png';
+import tab6 from './tab6.png';
+import visitInto from './visitInto.png';
+import checkInto from './checkInto.png';
+import floating from './floating.png';
+import Aimge from './Aimge.png';
+import yewu from './yewu.png';
+import disputeLedger_1 from './disputeLedger_1.png';
+import disputeLedger_2 from './disputeLedger_2.png';
+import disputeLedger_3 from './disputeLedger_3.png';
+import disputeLedger_4 from './disputeLedger_4.png';
+import disputeLedger_5 from './disputeLedger_5.png';
+import disputeLedger_6 from './disputeLedger_6.png';
+import disputeLedger_7 from './disputeLedger_7.png';
+import workDash_1 from './workDash_1.png';
+import workDash_2 from './workDash_2.png';
+import workDash_3 from './workDash_3.png';
+import workDash_4 from './workDash_4.png';
+import workDash_5 from './workDash_5.png';
+import workDash_6 from './workDash_6.png';
+import workDash_7 from './workDash_7.png';
+import workDash_8 from './workDash_8.png';
+import workDash_9 from './workDash_9.png';
export {
- ledger_1,
- ledger_2,
- ledger_3,
- ledger_4,
- ledger_5,
- ledger_6,
- ledger_7,
- ledger_8,
- ledger_9,
- ledger_10,
- ledger_11,
- ledger_12,
- ledger_13,
- mediateBigData_1,
- mediateBigData_2,
- mediateBigData_3,
- mediateBigData_4,
- mediateBigData_5,
- mediateBigData_6,
- mediateBigData_7,
- mediateBigData_8,
- caseDetail,
- caseDetailResult,
- process,
- add,
- del,
- question,
- question1,
- person,
- link,
- check,
- image,
- applyMaterials,
- applyMaterials_active,
- evidenceMaterials,
- evidenceMaterials_active,
- closeIcon,
- backgroundImage,
- logo1,
- register,
- Matter,
- transfer,
- empty,
- feedback,
- fold,
- down,
- tip,
- apply,
- examine,
- knock,
- edit,
- applyRecord,
- downO,
- up,
- Audit,
- aiPerson,
- caselogo,
- tab1,
- tab2,
- tab3,
- tab4,
- tab5,
- tab6,
- visitInto,
- checkInto,
- floating,
- Aimge,
- yewu
-};
\ No newline at end of file
+ ledger_1,
+ ledger_2,
+ ledger_3,
+ ledger_4,
+ ledger_5,
+ ledger_6,
+ ledger_7,
+ ledger_8,
+ ledger_9,
+ ledger_10,
+ ledger_11,
+ ledger_12,
+ ledger_13,
+ mediateBigData_1,
+ mediateBigData_2,
+ mediateBigData_3,
+ mediateBigData_4,
+ mediateBigData_5,
+ mediateBigData_6,
+ mediateBigData_7,
+ mediateBigData_8,
+ caseDetail,
+ caseDetailResult,
+ process,
+ add,
+ del,
+ question,
+ question1,
+ person,
+ link,
+ check,
+ image,
+ applyMaterials,
+ applyMaterials_active,
+ evidenceMaterials,
+ evidenceMaterials_active,
+ closeIcon,
+ backgroundImage,
+ logo1,
+ register,
+ Matter,
+ transfer,
+ empty,
+ feedback,
+ fold,
+ down,
+ tip,
+ apply,
+ examine,
+ knock,
+ edit,
+ applyRecord,
+ downO,
+ up,
+ Audit,
+ aiPerson,
+ caselogo,
+ tab1,
+ tab2,
+ tab3,
+ tab4,
+ tab5,
+ tab6,
+ visitInto,
+ checkInto,
+ floating,
+ Aimge,
+ yewu,
+ disputeLedger_1,
+ disputeLedger_2,
+ disputeLedger_3,
+ disputeLedger_4,
+ disputeLedger_5,
+ disputeLedger_6,
+ disputeLedger_7,
+ workDash_1,
+ workDash_2,
+ workDash_3,
+ workDash_4,
+ workDash_5,
+ workDash_6,
+ workDash_7,
+ workDash_8,
+ workDash_9,
+};
diff --git a/gz-customerSystem/src/assets/images/workDash_1.png b/gz-customerSystem/src/assets/images/workDash_1.png
new file mode 100644
index 0000000..ea64404
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_1.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_2.png b/gz-customerSystem/src/assets/images/workDash_2.png
new file mode 100644
index 0000000..1c183bf
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_2.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_3.png b/gz-customerSystem/src/assets/images/workDash_3.png
new file mode 100644
index 0000000..5e150ee
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_3.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_4.png b/gz-customerSystem/src/assets/images/workDash_4.png
new file mode 100644
index 0000000..6183590
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_4.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_5.png b/gz-customerSystem/src/assets/images/workDash_5.png
new file mode 100644
index 0000000..b66aa65
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_5.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_6.png b/gz-customerSystem/src/assets/images/workDash_6.png
new file mode 100644
index 0000000..ea48506
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_6.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_7.png b/gz-customerSystem/src/assets/images/workDash_7.png
new file mode 100644
index 0000000..35fd673
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_7.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_8.png b/gz-customerSystem/src/assets/images/workDash_8.png
new file mode 100644
index 0000000..0ca38ee
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_8.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/workDash_9.png b/gz-customerSystem/src/assets/images/workDash_9.png
new file mode 100644
index 0000000..4d35e33
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/workDash_9.png
Binary files differ
diff --git a/gz-customerSystem/src/components/NewTableSearch/index.jsx b/gz-customerSystem/src/components/NewTableSearch/index.jsx
index 5e8a818..e08aa71 100644
--- a/gz-customerSystem/src/components/NewTableSearch/index.jsx
+++ b/gz-customerSystem/src/components/NewTableSearch/index.jsx
@@ -18,7 +18,7 @@
* handleSearch, // 搜索
* exportButton //导出按钮
*/
-const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch, exportButton }) => {
+const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch, exportButtonShow = true, exportButton }) => {
const [searchMore, setSearchMore] = useState(false);
const span = 24 / rowNum;
@@ -60,80 +60,91 @@
return (
<Form form={form} labelAlign="right" className="tableSearch">
-
- {itemData.map((x, t) => {
- let placeholder = x.placeholder || setPlaceholder(x.name, x.type);
- let allowClear = x.allowClear || true;
- let dom = null;
- let rules = {};
- if (x.type === 'Input') {
- dom = <Input placeholder={placeholder} allowClear {...x} />;
- rules = { max: x.max || 32, message: '搜索内容过长' };
- }
- if (x.type === 'Select') {
- dom = (
- <Select allowClear placeholder={placeholder} {...x}>
- {x.selectdata?.map((y) => (
- <Option key={y.value}>{y.label}</Option>
- ))}
- </Select>
- );
- }
- if (x.type === 'RangePicker') {
- rules = { type: 'array' };
- dom = (
- <RangePicker
- style={{ width: '100%' }}
- ranges={{
- '今日': [$$.myMoment(), $$.myMoment()],
- '本月': [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')],
- }}
- allowClear
- {...x}
- />
- );
- }
- if (x.type === 'TreeSelect') {
- dom = (
- <TreeSelect
- showSearch
- placeholder={placeholder}
- dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
- treeData={x.treedata}
- treeDefaultExpandAll
- allowClear
- filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
- {...x}
- />
- );
- }
- return (
- <Row className='tableSearch-searchMore-row' gutter={[24, 16]} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }}>
- <Col span={x.span || 8} key={t + 1}>
- <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
- {dom}
- </Form.Item>
+ <Row className='tableSearch-searchMore-row' gutter={[24, 16]} >
+ {itemData.map((x, t) => {
+ let placeholder = x.placeholder || setPlaceholder(x.name, x.type);
+ let allowClear = x.allowClear || true;
+ let dom = null;
+ let rules = {};
+ if (x.type === 'Input') {
+ dom = <Input placeholder={placeholder} allowClear {...x} />;
+ rules = { max: x.max || 32, message: '搜索内容过长' };
+ }
+ if (x.type === 'Select') {
+ dom = (
+ <Select allowClear placeholder={placeholder} {...x}>
+ {x.selectdata?.map((y) => (
+ <Option key={y.value}>{y.label}</Option>
+ ))}
+ </Select>
+ );
+ }
+ if (x.type === 'RangePicker') {
+ rules = { type: 'array' };
+ dom = (
+ <RangePicker
+ style={{ width: '100%' }}
+ ranges={{
+ '今日': [$$.myMoment(), $$.myMoment()],
+ '本月': [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')],
+ }}
+ allowClear
+ {...x}
+ />
+ );
+ }
+ if (x.type === 'TreeSelect') {
+ dom = (
+ <TreeSelect
+ showSearch
+ placeholder={placeholder}
+ dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
+ treeData={x.treedata}
+ treeDefaultExpandAll
+ allowClear
+ filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
+ {...x}
+ />
+ );
+ }
+ if (x.type === 'null') {
+ dom = (
+ <Col span={x.span || 8}></Col>
+ );
+ }
+ return (
+ <Col span={x.span || 8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
+ {
+ x.type === 'null' ? <>{ dom }</> :
+ <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
+ {dom}
+ </Form.Item>
+ }
</Col>
- </Row>
- // <div>
- // <Col span={8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
- // <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
- // {dom}
- // </Form.Item>
- // </Col>
- // <Col span={8}></Col>
- // <Col span={8}></Col>
- // </div>
- );
- })}
+ // <div>
+ // <Col span={8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
+ // <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
+ // {dom}
+ // </Form.Item>
+ // </Col>
+ // <Col span={8}></Col>
+ // <Col span={8}></Col>
+ // </div>
+ );
+ })}
+ </Row>
+ <div className='NewTableSearch-border'></div>
<Row style={{ marginTop: '16px' }}>
<Col span={24} style={{ textAlign: 'left' }}>
<Button className="public-buttonMargin" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}>
查询
</Button>
- <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}>
- 导出查询结果
- </Button>
+ {
+ exportButtonShow &&
+ <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}>
+ 导出查询结果
+ </Button>
+ }
<Button onClick={handleReset}>
重置条件
</Button>
diff --git a/gz-customerSystem/src/components/NewTableSearch/index.less b/gz-customerSystem/src/components/NewTableSearch/index.less
index 1cde11a..b6b389f 100644
--- a/gz-customerSystem/src/components/NewTableSearch/index.less
+++ b/gz-customerSystem/src/components/NewTableSearch/index.less
@@ -17,3 +17,8 @@
margin-bottom: 16px;
}
}
+
+.NewTableSearch-border {
+ margin: 12px 0;
+ border-bottom: 1px solid #E5E6EB;
+}
diff --git a/gz-customerSystem/src/router/router.js b/gz-customerSystem/src/router/router.js
index fdd2660..a482be0 100644
--- a/gz-customerSystem/src/router/router.js
+++ b/gz-customerSystem/src/router/router.js
@@ -2,7 +2,7 @@
* @Company: hugeInfo
* @Author: ldh
* @Date: 2022-03-28 11:22:41
- * @LastEditTime: 2024-09-14 16:09:40
+ * @LastEditTime: 2024-09-17 10:42:26
* @LastEditors: lwh
* @Version: 1.0.0
* @Description: 路由
@@ -130,6 +130,7 @@
import Comprehensive from '../views/comprehensive';
// 纠纷台账
import DisputeLedger from '../views/disputeLedger';
+import WorkDash from '../views/workDash';
// 数据分析
import DataSearch from '../views/statistic/dataSearch';
@@ -235,6 +236,8 @@
<Route path="comprehensive" element={<Comprehensive />} />
{/* 纠纷台账 */}
<Route path="account" element={<DisputeLedger />} />
+ {/* 解纷态势 */}
+ <Route path="workDash" element={<WorkDash />} />
{/* 数据分析 */}
<Route path="dataSearch" element={<DataSearch />} />
{/* 调解视窗成功页 */}
diff --git a/gz-customerSystem/src/utils/utility.js b/gz-customerSystem/src/utils/utility.js
index bc2e5b1..69fb8b2 100644
--- a/gz-customerSystem/src/utils/utility.js
+++ b/gz-customerSystem/src/utils/utility.js
@@ -2,8 +2,8 @@
* @Company: hugeInfo
* @Author: ldh
* @Date: 2022-02-16 11:57:54
- * @LastEditTime: 2024-09-12 10:55:38
- * @LastEditors: dminyi 1301963064@qq.com
+ * @LastEditTime: 2024-09-15 10:36:03
+ * @LastEditors: lwh
* @Version: 1.0.0
* @Description: 公共模块方法
*/
@@ -15,7 +15,7 @@
import moment from 'moment';
import { pdf, jpg, file, word, excel } from '../assets/images/icon';
-export const isDebug = true; // 是否测试环境
+export const isDebug = false; // 是否测试环境
export const appUrl = isDebug ? debug : web; // api
diff --git a/gz-customerSystem/src/views/comprehensive/index.jsx b/gz-customerSystem/src/views/comprehensive/index.jsx
index f06c4a7..f1bd214 100644
--- a/gz-customerSystem/src/views/comprehensive/index.jsx
+++ b/gz-customerSystem/src/views/comprehensive/index.jsx
@@ -5,7 +5,7 @@
import { FolderFilled } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import { useLocation, useNavigate } from 'react-router-dom';
-import TableView from '../../components/TableView';
+import TableView from '../../components/TableViewCanSort';
import NewTableSearch from '../../components/NewTableSearch';
import MyTabs from '../../components/MyTabs';
import './index.less'
@@ -42,9 +42,9 @@
// 表头
const columns = () => {
const columnsData = [
- { title: '事项状态', width: 80, dataIndex: 'statusName' },
- { title: '事项来源', width: 80, dataIndex: 'canalName' },
- { title: '事项等级', width: 80, dataIndex: 'caseLevel' },
+ { title: '事项状态', width: 100, dataIndex: 'statusName' },
+ { title: '事项来源', width: 100, dataIndex: 'canalName' },
+ { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
{ title: '纠纷类型', width: 150, dataIndex: 'caseTypeName' },
{ title: '承办部门', width: 150, dataIndex: 'mediateDeptName' },
{ title: '配合部门', width: 150, dataIndex: 'assistUnitName' },
@@ -171,8 +171,8 @@
if (res.type) {
setSearch(submitData);
setData({
- total: res.data?.totalElements,
- tableData: res.data?.content || [],
+ total: 0,
+ tableData: [],
});
}
}
@@ -205,7 +205,11 @@
form={form}
itemData={[
{ type: 'RangePicker', name: 'acceptTime', label: '办结时间', span: 8 },
+ { type: 'null'},
+ { type: 'null'},
{ type: 'RangePicker', name: 'acceptTime', label: '归档时间', span: 8 },
+ { type: 'null'},
+ { type: 'null'},
{
type: 'Select',
name: 'joinRole',
@@ -216,46 +220,62 @@
{ label: '我协助的', value: '2' },
],
},
- {
- type: 'Select',
- name: 'joinRole',
- label: '承办部门',
- selectdata: [
- { label: '我负责的', value: '1' },
- { label: '我协助的', value: '2' },
- ],
- },
- {
- type: 'Select',
- name: 'joinRole',
- label: '登记机构',
- selectdata: [
- { label: '我负责的', value: '1' },
- { label: '我协助的', value: '2' },
- ],
- },
- { type: 'Input', name: 'defendants', label: '被申请人' },
- { type: 'Input', name: 'caseNo', label: '调解案号' },
+ // {
+ // type: 'Select',
+ // name: 'joinRole',
+ // label: '承办部门',
+ // selectdata: [
+ // { label: '我负责的', value: '1' },
+ // { label: '我协助的', value: '2' },
+ // ],
+ // },
+ // {
+ // type: 'Select',
+ // name: 'joinRole',
+ // label: '登记机构',
+ // selectdata: [
+ // { label: '我负责的', value: '1' },
+ // { label: '我协助的', value: '2' },
+ // ],
+ // },
+ // { type: 'Input', name: 'defendants', label: '被申请人' },
+ // { type: 'Input', name: 'caseNo', label: '调解案号' },
]}
handleReset={() => handleSearch('reset')}
handleSearch={() => handleSearch('search')}
/>
</div>
- <div style={{ marginTop: '8px' }} className="pageTable">
- <TableView
- showHeader
- title="查询结果"
- columns={columns()}
- dataSource={data.tableData}
- pagination={{
- current: search.page,
- pageSize: search.size,
- total: data.total,
- onChange: (page, pageSize) => handleChangePage(page, pageSize),
- }}
- rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
- />
+ <div style={{ marginTop: '8px' }} className="comprehensive-table">
+ {
+ data.tableData?.length > 0 ?
+ <TableView
+ showHeader
+ title="查询结果"
+ columns={columns()}
+ dataSource={data.tableData}
+ pagination={{
+ current: search.page,
+ pageSize: search.size,
+ total: data.total,
+ onChange: (page, pageSize) => handleChangePage(page, pageSize),
+ }}
+ rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
+ /> :
+ <TableView
+ showHeader
+ title="查询结果"
+ columns={columns()}
+ dataSource={data.tableData}
+ pagination={{
+ current: search.page,
+ pageSize: search.size,
+ total: data.total,
+ onChange: (page, pageSize) => handleChangePage(page, pageSize),
+ }}
+ rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
+ />
+ }
</div>
</div>
</NewPage>
diff --git a/gz-customerSystem/src/views/comprehensive/index.less b/gz-customerSystem/src/views/comprehensive/index.less
index 165fe16..6376fdf 100644
--- a/gz-customerSystem/src/views/comprehensive/index.less
+++ b/gz-customerSystem/src/views/comprehensive/index.less
@@ -1,5 +1,7 @@
.comprehensive {
- position: relative;
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 68px);
margin: 0 16px;
&-title {
// margin: 0 16px;
@@ -14,4 +16,10 @@
&-red {
color: #f53f3f;
}
+ &-table {
+ background-color: #ffffff;
+ padding: 16px;
+ flex: 1;
+ margin-bottom: 16px;
+ }
}
diff --git a/gz-customerSystem/src/views/disputeLedger/index.jsx b/gz-customerSystem/src/views/disputeLedger/index.jsx
index 402ed27..bbb53eb 100644
--- a/gz-customerSystem/src/views/disputeLedger/index.jsx
+++ b/gz-customerSystem/src/views/disputeLedger/index.jsx
@@ -2,16 +2,20 @@
* @Company: hugeInfo
* @Author: lwh
* @Date: 2024-09-14 15:59:17
- * @LastEditTime: 2024-09-14 16:03:34
+ * @LastEditTime: 2024-09-17 17:12:37
* @LastEditors: lwh
* @Version: 1.0.0
* @Description:
*/
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as $$ from '../../utils/utility';
-import { Form, Typography, Button, Space } from 'antd';
+import { Form, Typography, Row, Col, Space } from 'antd';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { disputeLedger_1, disputeLedger_2, disputeLedger_3, disputeLedger_4, disputeLedger_5, disputeLedger_6, disputeLedger_7 } from '../../assets/images';
import NewPage from '../../components/NewPage/index';
+import * as echarts from 'echarts';
+import NewTableSearch from '../../components/NewTableSearch';
+import './index.less'
const { Link } = Typography;
@@ -26,14 +30,443 @@
}
const DisputeLedger = () => {
+ const [form] = Form.useForm();
+ // 数据汇总选择
+ const [activeKey, setActiveKey] = useState(0)
+ const [tabsData, setTabsData] = useState([
+ { icon: disputeLedger_1, title: '全部', value: '5032', active: true },
+ { icon: disputeLedger_2, title: '综治中心', value: '1022', per: '20.3%' },
+ { icon: disputeLedger_3, title: '12345', value: '1006', per: '19.8%' },
+ { icon: disputeLedger_4, title: '人民调解', value: '2201', per: '40.3%' },
+ { icon: disputeLedger_5, title: '信访', value: '221', per: '4.2%' },
+ { icon: disputeLedger_6, title: '劳动仲裁', value: '98', per: '1.8%' },
+ { icon: disputeLedger_7, title: '非警务纠纷', value: '432', per: '8.3%' },
+ ]);
+
+ // 搜索 or 重置
+ function handleSearch(type, session) {
+
+ }
return (
- <NewPage
- pageHead={
- { breadcrumbData: [{ title: '工作台' }, { title: '纠纷台账' }], title: '纠纷台账' }
- }
- ></NewPage>
+ <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '纠纷台账' }], title: '纠纷台账' }}>
+ <div className='comprehensive'>
+ <div className="pageSearch">
+ <div className='comprehensive-title'>查询条件</div>
+ <NewTableSearch
+ exportButtonShow={false}
+ labelLength={6}
+ rowNum={4.5}
+ form={form}
+ itemData={[
+ { type: 'TreeSelect', name: 'mediateUnitId', label: '区域', placeholder: '请选择', treedata: [] },
+ { type: 'RangePicker', name: 'createTime', label: '登记时间', span: 8 },
+ { type: 'RangePicker', name: 'endTime', label: '办结时间', span: 8 },
+ {
+ type: 'Select',
+ name: 'name1',
+ label: '纠纷类型',
+ span: 8,
+ selectdata: [
+ { label: '全部', value: '1' },
+ { label: '市场监管', value: '2' },
+ { label: '劳动社保', value: '3' },
+ { label: '城市管理', value: '4' },
+ { label: '交通运输', value: '5' },
+ { label: '教育医疗', value: '6' },
+ { label: '公共服务', value: '7' },
+ ],
+ },
+ {
+ type: 'Select',
+ name: 'name2',
+ label: '化解状况',
+ span: 8,
+ selectdata: [
+ { label: '全部', value: '1' },
+ { label: '化解中', value: '2' },
+ { label: '化解成功', value: '3' },
+ { label: '化解不成功', value: '4' },
+ ],
+ },
+ {
+ type: 'Select',
+ name: 'name3',
+ label: '重大矛盾纠纷',
+ span: 8,
+ selectdata: [
+ { label: '不限', value: '1' },
+ ],
+ },
+ {
+ type: 'Select',
+ name: 'name4',
+ label: '重点人员',
+ span: 8,
+ selectdata: [
+ { label: '不限', value: '1' },
+ ],
+ },
+ ]}
+ handleReset={() => handleSearch('reset')}
+ handleSearch={() => handleSearch('search')}
+ />
+ </div>
+ <div className='disputeLedger-row'>
+ <div className='comprehensive-title'>数据汇总</div>
+ <div className='disputeLedger-d'>
+ {
+ tabsData.map((item, index) => (
+ <div onClick={() => setActiveKey(index)} className={`disputeLedger-card ${activeKey === index ? 'disputeLedger-card-active' : ''}`} span={3.4} key={index}>
+ <div >
+ <div className='disputeLedger-card-content'>
+ <div className={`disputeLedger-card-content-t ${activeKey === index ? 'disputeLedger-card-content-t-active' : ''}`}>{item.title}</div>
+ <div><span className='disputeLedger-card-title'>{item.value}</span> <span className='disputeLedger-unit'>件</span> {item.per && < span className='disputeLedger-unit'>| {item.per}</span>}</div>
+ </div>
+ {activeKey === index && <img src={item.icon} alt="" />}
+ </div>
+ </div>
+ ))
+ }
+ </div>
+ </div>
+
+ {/* 图表 */}
+ <div className='disputeLedger-green'>
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: '12px' }}>
+ <Space className='big-green-main-space' direction='vertical'>
+ <div style={{ margin: '0 12px' }}>
+ <div className='disputeLedger-green-title'>纠纷类型（全部）</div>
+ <div style={{ paddingBottom: '12px' }}>
+ <MyLTopChartPie data={
+ [
+ { value: 22, name: '市场监管' },
+ { value: 28, name: '劳动社保' },
+ { value: 15, name: '城市管理' },
+ { value: 10, name: '交通运输' },
+ { value: 5, name: '教育医疗' },
+ { value: 20, name: '公共服务' },
+ ]
+ } />
+ </div>
+ </div>
+ </Space>
+ <Space style={{ position: 'relative' }} className='big-green-main-space' direction='vertical'>
+ <div style={{ margin: '0 12px' }}>
+ <div className='disputeLedger-green-title'>化解状况（全部）</div>
+ <div style={{ paddingBottom: '12px' }}>
+ <MyLTopChartPie1 data={
+ [
+ { value: 90, name: '小学' },
+ { value: 200, name: '初中' },
+ { value: 100, name: '高中' },
+ { value: 300, name: '大学本科' },
+ { value: 200, name: '硕士' },
+ { value: 100, name: '其他' },
+ ]
+ } />
+ </div>
+ </div>
+ </Space>
+ </div>
+ <Space style={{ flex: '1', marginBottom: '12px' }} className='big-green-main-space' direction='vertical'>
+ <div className='big-green-main-title-display'>
+ <div className='disputeLedger-green-title'>数据统计（全部）</div>
+ </div>
+ <div style={{ width: '100%', height: '200px', marginTop: '12px' }}>
+ <MyChartBar data={[220, 5211, 2500, 3152, 8362, 26220, 8442, 2600, 1850, 1302, 850, 1048]} dataAxis={['本级', '越秀区', '海珠区', '荔湾区', '天河区', '白云区', '黄埔区', '花都区', '番禺区', '南沙区', '从化区', '增城区']} />
+
+ </div>
+ </Space>
+ </div>
+ </div >
+ </NewPage >
)
}
-export default DisputeLedger;
\ No newline at end of file
+export default DisputeLedger;
+
+// 柱状图
+const MyChartBar = ({ data, dataAxis }) => {
+ const myChartRef = useRef();
+ // 图表
+ const [myChart, setMyChart] = useState();
+
+
+ // 加载图表数据
+ useEffect(() => {
+ var myChart = echarts.init(document.getElementById('chartBar'), 'dark');
+ // let data = [123, 98, 245, 234, 356, 148];
+ // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']
+
+ // 绘制图表
+ myChart.setOption({
+ backgroundColor: '#fff',
+ grid: {
+ x: 10,
+ y: 20,
+ x2: 20,
+ y2: 0,
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ },
+ formatter: function (params) {
+ return params[0].name + ': ' + params[0].value + '人';
+ }
+ },
+ xAxis: [{
+ type: 'category',
+ // boundaryGap: false,
+ data: dataAxis,
+
+ axisLabel: {
+ interval: dataAxis?.length > 15 ? 1 : 0,
+ formatter: function (value) {
+ // 如果标签长度超过4，将剩余的文字替换为省略号
+ if (value.length > 4) {
+ return value.slice(0, 4) + '...';
+ } else {
+ return value;
+ }
+ }
+ },
+ }],
+ yAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#ccc'
+ }
+ },
+
+ },
+ dataZoom: [
+ {
+ type: 'inside'
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ name: 'bar1',
+ stack: 'one',
+ showBackground: false,
+ barWidth: 28, // 柱子宽度
+ itemStyle: {
+ color: '#3788C5'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ valueAnimation: false
+ },
+ emphasis: {
+ itemStyle: {
+ opacity: 0.7
+ }
+ },
+ data: data
+ },
+ ]
+ });
+ }, [data]);
+
+ useEffect(() => {
+ // if (myChart && myChartRef.current.clientHeight !== 0) {
+ // myChart.forceFit();
+ // }
+ });
+
+ return <div id="chartBar" ref={myChartRef} style={{ height: '494px', width: '100%' }} />;
+};
+
+const MyLTopChartPie = ({ data }) => {
+ const myChartRef = useRef();
+ // 图表
+ const [myChart, setMyChart] = useState();
+
+ // 加载图表数据
+ useEffect(() => {
+ var myChart = echarts.init(document.getElementById('chartLTopPie'), 'dark');
+
+ // 绘制图表
+ myChart.setOption({
+ backgroundColor: '#fff',
+ grid: {
+ x: 5,
+ y: 12,
+ x2: 20,
+ y2: 0,
+ },
+ legend: {
+ orient: 'vertical', // 垂直排列
+ top: 'center',
+ right: 10,
+ data: [
+ {
+ name: '市场监管',
+ icon: 'circle', // 图例标记的形状
+ },
+ {
+ name: '劳动社保',
+ icon: 'circle',
+ },
+ {
+ name: '城市管理',
+ icon: 'circle',
+ },
+ {
+ name: '交通运输',
+ icon: 'circle',
+ },
+ {
+ name: '教育医疗',
+ icon: 'circle',
+ },
+ {
+ name: '公共服务',
+ icon: 'circle',
+ }
+ // ... 其他数据
+ ]
+ },
+ series: [
+ {
+ name: '纠纷类型',
+ type: 'pie',
+ radius: '90%',
+ center: ['30%', '50%'],
+ color: ['#FCE996', '#FFCF8B', '#86E8DD', '#FDCDC5', '#C396ED', '#9FD4FD'],
+ labelLine: { // 关闭引导线
+ show: false
+ },
+ label: {
+ show: true,
+ position: 'inside', // 设置文字在扇形区域内
+ formatter: '{d}%', // 标签文本格式器
+ rich: {
+ a: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ b: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ c: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ d: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ e: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ f: {
+ lineHeight: 25,
+ align: 'center'
+ }
+ },
+ // normal: {
+ // show: false,
+ // },
+ },
+ data: data
+ },
+ ]
+ });
+ }, [data]);
+
+
+ return <div id="chartLTopPie" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
+};
+
+const MyLTopChartPie1 = ({ data }) => {
+ const myChartRef = useRef();
+ // 图表
+ const [myChart, setMyChart] = useState();
+
+
+ // 加载图表数据
+ useEffect(() => {
+ var myChart = echarts.init(document.getElementById('chartLTopPie1'), 'dark');
+ // let data = [123, 98, 245, 234, 356, 148];
+ // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']
+
+ // 绘制图表
+ myChart.setOption({
+ backgroundColor: '#fff',
+ grid: {
+ x: 5,
+ y: 12,
+ x2: 20,
+ y2: 0,
+ containLabel: true,
+ },
+ legend: {
+ orient: 'vertical', // 垂直排列
+ top: 'center',
+ right: 10,
+ data: [
+ {
+ name: '化解中',
+ icon: 'circle', // 图例标记的形状
+ },
+ {
+ name: '化解成功',
+ icon: 'circle',
+ },
+ {
+ name: '化解不成功',
+ icon: 'circle',
+ },
+
+ ]
+ },
+ series: [
+ {
+ name: '化解状况',
+ type: 'pie',
+ radius: ['60%', '90%'], // 设置饼图的内半径和外半径，实现扇形区域
+ center: ['30%', '50%'],
+ color: ['#B6DDF1', '#3A8AC6', '#094282'],
+ data: [
+ { value: 24, name: '化解中' },
+ { value: 30, name: '化解成功' },
+ { value: 46, name: '化解不成功' },
+ ],
+ label: {
+ show: true,
+ position: 'inside', // 设置文字在扇形区域内
+ formatter: '{d}%', // 标签文本格式器
+ rich: {
+ a: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ b: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ }
+ }
+ }
+ ]
+ });
+ }, [data]);
+
+ useEffect(() => {
+ // if (myChart && myChartRef.current.clientHeight !== 0) {
+ // myChart.forceFit();
+ // }
+ });
+
+ return <div id="chartLTopPie1" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
+};
diff --git a/gz-customerSystem/src/views/disputeLedger/index.less b/gz-customerSystem/src/views/disputeLedger/index.less
index e69de29..df51d26 100644
--- a/gz-customerSystem/src/views/disputeLedger/index.less
+++ b/gz-customerSystem/src/views/disputeLedger/index.less
@@ -0,0 +1,112 @@
+.disputeLedger {
+ &-row {
+ margin-top: 12px;
+ background-color: #fff;
+ padding: 12px 16px 16px 16px;
+ }
+ &-d {
+ display: flex;
+ gap: 24px;
+ align-items: center;
+ justify-content: space-between;
+ }
+ &-card {
+ position: relative;
+ flex: 1;
+ // width: 167px;
+ height: 75px;
+ background: #f2f3f5;
+ border: 0.5px solid #e5e6eb;
+ border-radius: 4px;
+ & img {
+ width: 40px;
+ position: absolute;
+ right: 0;
+ top: 14px;
+ }
+ &-active {
+ background: #e8f8ff;
+ border: 1px solid #b6ddf1;
+ }
+ &-content {
+ padding: 12px 16px;
+ &-t {
+ margin-bottom: 4px;
+ &-active {
+ color: #1a6fb8;
+ }
+ }
+ }
+ &-title {
+ font-size: 18px;
+ line-height: 26px;
+ }
+ }
+ &-title {
+ font-size: 14px;
+ color: #1d2129;
+ }
+ &-unit {
+ color: #86909c;
+ font-size: 12px;
+ line-height: 20px;
+ }
+ &-green {
+ margin: 12px 0;
+ display: flex;
+ gap: 12px;
+ &-title {
+ font-size: 16px;
+ padding: 12px 16px;
+ color: rgba(0, 0, 0, 0.85);
+ }
+ }
+}
+
+.big-green {
+ &-main {
+ &-space {
+ width: 389px;
+ background-color: #fff;
+ }
+ &-title {
+ background: #105489;
+ height: 36px;
+ padding: 0 12px 0 8px;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ &-t {
+ line-height: 30px;
+ height: 24px;
+ margin-left: 8px;
+ }
+ &-display {
+ display: flex;
+ align-items: end;
+ }
+ &-bias {
+ transform: rotate(-45deg);
+ height: 1px;
+ width: 5px;
+ background-color: rgba(255, 255, 255, 0.4);
+ position: relative;
+ top: -2px;
+ left: -1px;
+ }
+ &-line {
+ flex: 1;
+ height: 1px;
+ // transform: skewX(-45deg);
+ background-color: rgba(255, 255, 255, 0.4);
+ }
+
+ &-graph {
+ background: #ffc97a;
+ width: 20px;
+ height: 3px;
+ transform: skewX(-45deg);
+ }
+ }
+ }
+}
diff --git a/gz-customerSystem/src/views/workDash/index.jsx b/gz-customerSystem/src/views/workDash/index.jsx
new file mode 100644
index 0000000..2eac1db
--- /dev/null
+++ b/gz-customerSystem/src/views/workDash/index.jsx
@@ -0,0 +1,806 @@
+/*
+ * @Company: hugeInfo
+ * @Author: lwh
+ * @Date: 2024-09-14 15:59:17
+ * @LastEditTime: 2024-09-17 17:12:08
+ * @LastEditors: lwh
+ * @Version: 1.0.0
+ * @Description:
+ */
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import * as $$ from '../../utils/utility';
+import { Form, Typography, Row, Col, Space, Divider, Badge } from 'antd';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { workDash_1, workDash_2, workDash_3, workDash_4, workDash_5, workDash_6, workDash_7, workDash_8, workDash_9, disputeLedger_1, disputeLedger_2, disputeLedger_3, disputeLedger_4, disputeLedger_5, disputeLedger_6, disputeLedger_7 } from '../../assets/images';
+import NewPage from '../../components/NewPage/index';
+import * as echarts from 'echarts';
+import TableView from '../../components/TableViewCanSort';
+import NewTableSearch from '../../components/NewTableSearch';
+import publicDataStatus from '../../status/publicData';
+import './index.less'
+
+const { Link } = Typography;
+
+// 调度中心列表
+function getMyMediationDataApi(submitData) {
+ return $$.ax.request({ url: 'caseDisp/pageQuery', type: 'get', data: submitData, service: 'disp' });
+}
+
+// 获取列表分类tab
+function getTabsDataApi() {
+ return $$.ax.request({ url: 'caseDisp/getApplyCanal', type: 'get', service: 'disp' });
+}
+
+const WorkDash = () => {
+ const [form] = Form.useForm();
+
+ // 搜索
+ const [search, setSearch] = useState({ page: 1, size: 10, });
+
+ // 数据
+ const [data, setData] = useState({
+ tableData: [
+ { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
+ { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
+ { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
+ { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
+ { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
+ ]
+ });
+
+ // 调解组织select框数据
+ const [adjustOrgData, setAdjustOrgData] = useState([]);
+
+
+
+
+ // 搜索 or 重置
+ function handleSearch(type, session) {
+
+ }
+
+ // 表头
+ const columns = () => {
+ const columnsData = [
+ { title: '登记时间', width: 150, dataIndex: 'createTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
+ { title: '事项状态', width: 100, dataIndex: 'statusName' },
+ { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
+ { title: '事项类型', width: 150, dataIndex: 'caseTypeName' },
+ { title: '问题属地', width: 100, dataIndex: 'canalName' },
+ { title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
+ { title: '承办部门', width: 100, dataIndex: 'assistUnitName' },
+ { title: '办结时间', width: 100, dataIndex: 'closeTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
+ // 22_00025-1 成功 22_00025-2 化解不成功
+ { title: '化解结果', width: 100, dataIndex: 'mediResult', render: (text) => <div className={text === '22_00025-1' ? 'comprehensive-green' : text === '22_00025-2' ? 'comprehensive-red' : '-'} >{text === '22_00025-1' ? '化解成功' : text === '22_00025-2' ? '化解不成功' : '-'}</div> },
+ { title: '申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map(i => i.trueName)?.join(',') : '-'}</div> },
+ { title: '被申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map(i => i.trueName)?.join(',') : '-'}</div> },
+ {
+ title: '操作',
+ dataIndex: 'action',
+ width: 50,
+ render: (_, record) => {
+ return <Link onClick={() => handleJump(record)}>详情</Link>;
+ },
+ },
+ ];
+ return columnsData;
+ };
+
+ // 跳转详情页
+ function handleJump(type, info) {
+
+ }
+
+ // 初始化
+ useEffect(() => {
+ // publicDataStatus.getUnitData((data) => setAdjustOrgData(data));
+
+ }, []);
+
+ return (
+ <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '解纷态势' }], title: '解纷态势' }}>
+ <div className='comprehensive'>
+ <div className="pageSearch">
+ <div className='comprehensive-title'>查询条件</div>
+ <NewTableSearch
+ exportButtonShow={false}
+ labelLength={6}
+ rowNum={4.5}
+ form={form}
+ itemData={[
+ { type: 'TreeSelect', name: 'mediateUnitId', label: '区域', placeholder: '请选择', treedata: adjustOrgData },
+ { type: 'RangePicker', name: 'createTime', label: '登记时间', span: 8 },
+ { type: 'RangePicker', name: 'endTime', label: '办结时间', span: 8 },
+ {
+ type: 'Select',
+ name: 'name1',
+ label: '纠纷类型',
+ span: 8,
+ selectdata: [
+ { label: '全部', value: '1' },
+ { label: '市场监管', value: '2' },
+ { label: '劳动社保', value: '3' },
+ { label: '城市管理', value: '4' },
+ { label: '交通运输', value: '5' },
+ { label: '教育医疗', value: '6' },
+ { label: '公共服务', value: '7' },
+ ],
+ },
+ {
+ type: 'Select',
+ name: 'name2',
+ label: '事项状态',
+ span: 8,
+ selectdata: [
+ { label: '全部', value: '1' },
+ { label: '化解中', value: '2' },
+ { label: '化解成功', value: '3' },
+ { label: '化解不成功', value: '4' },
+ ],
+ },
+ ]}
+ handleReset={() => handleSearch('reset')}
+ handleSearch={() => handleSearch('search')}
+ />
+ </div>
+ <div className='disputeLedger-row'>
+ <div className='comprehensive-title'>数据总览</div>
+ <div>
+ <Space className='workDash-d' align='center' split={<Divider type="vertical" style={{ height: '48px' }} />}>
+ <div className='workDash-item'>
+ <div className='workDash-item-img'>
+ <img src={workDash_1} alt="" srcset="" />
+ </div>
+ <div className='workDash-item-div'>
+ <div className='workDash-item-title'>总登记</div>
+ <div className='workDash-item-value'>3301</div>
+ </div>
+ </div>
+ <div className='workDash-item'>
+ <div className='workDash-item-img'>
+ <img src={workDash_2} alt="" srcset="" />
+ </div>
+ <div className='workDash-item-div'>
+ <div className='workDash-item-title'>办理中</div>
+ <div className='workDash-item-value'>103</div>
+ </div>
+ </div>
+ <div className='workDash-item1'>
+ <div className='workDash-item-img'>
+ <img src={workDash_3} alt="" srcset="" />
+ </div>
+ <div className='workDash-item-div'>
+ <div className='workDash-item-title'><div style={{ width: '50px' }}>已结案</div><div style={{ width: '36px' }}></div> <Badge dot size='30' status="success" text={<Space split={<Divider type="vertical" />}><span style={{ color: '#4E5969', fontSize: '14px' }}>化解成功：3066件 | 成功率：<span style={{ color: '#00B42A' }}>90.3%</span></span></Space>} /></div>
+ <div className='workDash-item-value'><div style={{ width: '50px' }}>3166</div><div style={{ width: '36px' }}></div><Badge status="error" text={<Space split={<Divider type="vertical" />}><span style={{ color: '#4E5969', fontSize: '14px' }}>化解不成功：100件</span></Space>} /></div>
+ </div>
+ </div>
+ <div className='workDash-item'>
+ <div className='workDash-item-img'>
+ <img src={workDash_4} alt="" srcset="" />
+ </div>
+ <div className='workDash-item-div'>
+ <div className='workDash-item-title'>不予受理</div>
+ <div className='workDash-item-value'>32</div>
+ </div>
+ </div>
+ </Space>
+ </div>
+ </div>
+
+ {/* 图表 */}
+ <div className='disputeLedger-green'>
+ <Space style={{ flex: '1' }} className='big-green-main-space' direction='vertical'>
+ <div className='big-green-main-title-display'>
+ <div className='disputeLedger-green-title'>数据统计</div>
+ </div>
+ <div style={{ width: '100%', height: '300px', marginTop: '12px' }}>
+ <MyChartBar data={[220, 5211, 2500, 3152, 8362, 26220, 8442, 2600, 1850, 1302, 850, 1048]} dataAxis={['本级', '越秀区', '海珠区', '荔湾区', '天河区', '白云区', '黄埔区', '花都区', '番禺区', '南沙区', '从化区', '增城区']} />
+ </div>
+ </Space>
+ </div>
+ <div style={{ marginBottom: '12px', width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }} >
+ <Row gutter={16}>
+ <Col span={16}>
+ <div className='workDash-main'>
+ <div style={{ width: '100%' }}>
+ <div className='big-green-main-title-display'>
+ <div className='disputeLedger-green-title'>事项来源</div>
+ </div>
+ <div className='workDash-main-card-one'>
+ <div className='workDash-main-card'>
+ <div className='workDash-main-card-head'>
+ <div className='workDash-main-card-head-l'><div className='workDash-main-card-head-l-img'><img src={workDash_6} alt="" srcset="" /></div></div>
+ <div className='workDash-main-card-head-r'><div className='workDash-main-card-head-r-title'>大厅来访</div><div className='workDash-main-card-head-r-value'>2233<span className='workDash-main-card-head-r-subValue'> | 40%</span></div></div>
+ </div>
+ <div className='workDash-main-card-body'>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解中</div>
+ <div className='workDash-main-card-body-flex-value'>100</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功</div>
+ <div className='workDash-main-card-body-flex-value'>2132</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解不成功</div>
+ <div className='workDash-main-card-body-flex-value'>50</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功率</div>
+ <div className='workDash-main-card-body-flex-value'>84.3%</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>不予受理</div>
+ <div className='workDash-main-card-body-flex-value'>3</div>
+ </div>
+ </div>
+ </div>
+
+ <div className='workDash-main-card'>
+ <div className='workDash-main-card-head'>
+ <div className='workDash-main-card-head-l workDash-bg_2'><div className='workDash-main-card-head-l-img workDash-bg_2_img'><img src={workDash_7} alt="" srcset="" /></div></div>
+ <div className='workDash-main-card-head-r workDash-bg_2_r'><div className='workDash-main-card-head-r-title'>线上来访</div><div className='workDash-main-card-head-r-value'>430<span className='workDash-main-card-head-r-subValue'> | 17%</span></div></div>
+ </div>
+ <div className='workDash-main-card-body'>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解中</div>
+ <div className='workDash-main-card-body-flex-value'>30</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功</div>
+ <div className='workDash-main-card-body-flex-value'>400</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解不成功</div>
+ <div className='workDash-main-card-body-flex-value'>7</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功率</div>
+ <div className='workDash-main-card-body-flex-value'>95.3%</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>不予受理</div>
+ <div className='workDash-main-card-body-flex-value'>3</div>
+ </div>
+ </div>
+ </div>
+
+ <div className='workDash-main-card'>
+ <div className='workDash-main-card-head'>
+ <div className='workDash-main-card-head-l workDash-bg_3'><div className='workDash-main-card-head-l-img workDash-bg_3_img'><img src={workDash_8} alt="" srcset="" /></div></div>
+ <div className='workDash-main-card-head-r workDash-bg_3_r'><div className='workDash-main-card-head-r-title'>自行排查</div><div className='workDash-main-card-head-r-value'>672<span className='workDash-main-card-head-r-subValue'> | 20%</span></div></div>
+ </div>
+ <div className='workDash-main-card-body'>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解中</div>
+ <div className='workDash-main-card-body-flex-value'>80</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功</div>
+ <div className='workDash-main-card-body-flex-value'>520</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解不成功</div>
+ <div className='workDash-main-card-body-flex-value'>70</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功率</div>
+ <div className='workDash-main-card-body-flex-value'>92.3%</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>不予受理</div>
+ <div className='workDash-main-card-body-flex-value'>2</div>
+ </div>
+ </div>
+ </div>
+
+ <div className='workDash-main-card'>
+ <div className='workDash-main-card-head'>
+ <div className='workDash-main-card-head-l workDash-bg_4'><div className='workDash-main-card-head-l-img workDash-bg_4_img'><img src={workDash_9} alt="" srcset="" /></div></div>
+ <div className='workDash-main-card-head-r workDash-bg_4_r'><div className='workDash-main-card-head-r-title'>协同推送</div><div className='workDash-main-card-head-r-value'>1094<span className='workDash-main-card-head-r-subValue'> | 33%</span></div></div>
+ </div>
+ <div className='workDash-main-card-body'>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解中</div>
+ <div className='workDash-main-card-body-flex-value'>165</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功</div>
+ <div className='workDash-main-card-body-flex-value'>776</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解不成功</div>
+ <div className='workDash-main-card-body-flex-value'>150</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>化解成功率</div>
+ <div className='workDash-main-card-body-flex-value'>94.3%</div>
+ </div>
+ <div className='workDash-main-card-body-flex'>
+ <div className='workDash-main-card-body-flex-title'>不予受理</div>
+ <div className='workDash-main-card-body-flex-value'>31</div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </Col>
+ <Col span={8}>
+ <div className='workDash-main1'>
+ <div className='big-green-main-title-display'>
+ <div className='disputeLedger-green-title'>工作效能</div>
+ </div>
+ <div className='workDash-main1-chart'>
+ <div className='workDash-main1-flex'>
+ <div className='workDash-main1-flex-l'>
+ <div className='workDash-main1-flex-l-title'>事项分派</div>
+ <div className='workDash-main1-flex-l-value'>320<span className='workDash-main1-flex-l-subValue'>件</span></div>
+ </div>
+ <div className='workDash-main1-flex-r workDash-main1-flex-r-green'>平均耗时<br />1.5小时</div>
+ </div>
+
+ <div className='workDash-main1-flex'>
+ <div className='workDash-main1-flex-l'>
+ <div className='workDash-main1-flex-l-title'>事项办理</div>
+ <div className='workDash-main1-flex-l-value'>299<span className='workDash-main1-flex-l-subValue'>件</span></div>
+ </div>
+ <div className='workDash-main1-flex-r workDash-main1-flex-r-orange'>平均耗时<br />80.3小时</div>
+ </div>
+
+ <div className='workDash-main1-flex'>
+ <div className='workDash-main1-flex-l'>
+ <div className='workDash-main1-flex-l-title'>事项签收</div>
+ <div className='workDash-main1-flex-l-value'>320<span className='workDash-main1-flex-l-subValue'>件</span></div>
+ </div>
+ <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />5.5小时</div>
+ </div>
+ <div className='workDash-main1-flex'>
+ <div className='workDash-main1-flex-l'>
+ <div className='workDash-main1-flex-l-title'>申请审批</div>
+ <div className='workDash-main1-flex-l-value'>108<span className='workDash-main1-flex-l-subValue'>件</span></div>
+ </div>
+ <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />4小时</div>
+ </div>
+ <div className='workDash-main1-flex'>
+ <div className='workDash-main1-flex-l'>
+ <div className='workDash-main1-flex-l-title'>事项受理</div>
+ <div className='workDash-main1-flex-l-value'>318<span className='workDash-main1-flex-l-subValue'>件</span></div>
+ </div>
+ <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />15.5小时</div>
+ </div>
+ <div className='workDash-main1-flex'>
+ <div className='workDash-main1-flex-l'>
+ <div className='workDash-main1-flex-l-title'>督办回复</div>
+ <div className='workDash-main1-flex-l-value'>52<span className='workDash-main1-flex-l-subValue'>件</span></div>
+ </div>
+ <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />12.3小时</div>
+ </div>
+ </div>
+ </div>
+ </Col>
+
+ </Row>
+ </div>
+
+ <div style={{ marginBottom: '12px', width: '100%' }} >
+ <Row gutter={16}>
+ <Col span={8}>
+ <div className='workDash-main-flex_1'>
+ <div className='big-green-main-title-display'>
+ <div className='disputeLedger-green-title'>纠纷类型</div>
+ </div>
+ <div style={{ width: '100%', height: '242px', marginTop: '12px' }}>
+ <MyLTopChartPie data={
+ [
+ { value: 22, name: '市场监管' },
+ { value: 28, name: '劳动社保' },
+ { value: 15, name: '城市管理' },
+ { value: 10, name: '交通运输' },
+ { value: 5, name: '教育医疗' },
+ { value: 20, name: '公共服务' },
+ ]
+ } />
+ </div>
+ </div>
+ </Col>
+ <Col span={8}>
+ <div className='workDash-main-flex_1'>
+ <div className='big-green-main-title-display'>
+ <div className='disputeLedger-green-title'>化解状况</div>
+ </div>
+ <div style={{ width: '100%', height: '242px', marginTop: '12px' }}>
+ <MyLTopChartPie1 data={
+ [
+ { value: 90, name: '小学' },
+ { value: 200, name: '初中' },
+ { value: 100, name: '高中' },
+ { value: 300, name: '大学本科' },
+ { value: 200, name: '硕士' },
+ { value: 100, name: '其他' },
+ ]
+ } />
+ </div>
+ </div>
+ </Col>
+ <Col span={8}>
+ <div className='workDash-main-flex_1'>
+ <div className='big-green-main-title-display'>
+ <div className='disputeLedger-green-title'>事项等级</div>
+ </div>
+ <div className='workDash-grade'>
+ <div className='workDash-grade-item workDash-grade-item-orange'>
+ <div className='workDash-grade-item-t'><div className='workDash-grade-item-t-orange'>3级事件</div><div className='workDash-grade-item-t-value'>3201<span className='workDash-grade-item-t-unit'>件</span></div></div>
+ <div className='workDash-grade-item-b'>
+ <div className='workDash-grade-item-b-bg'>
+ <div className='workDash-grade-item-b-bg-orange'></div>
+ </div>
+ </div>
+ </div>
+ <div className='workDash-grade-item workDash-grade-item-blue'>
+ <div className='workDash-grade-item-t'><div className='workDash-grade-item-t-blue'>2级事件</div><div className='workDash-grade-item-t-value'>104<span className='workDash-grade-item-t-unit'>件</span></div></div>
+ <div className='workDash-grade-item-b'>
+ <div className='workDash-grade-item-b-bg'>
+ <div className='workDash-grade-item-b-bg-blue'></div>
+ </div>
+ </div>
+ </div>
+ <div className='workDash-grade-item workDash-grade-item-red'>
+ <div className='workDash-grade-item-t'><div className='workDash-grade-item-t-red'>1级事件</div><div className='workDash-grade-item-t-value'>52<span className='workDash-grade-item-t-unit'>件</span></div></div>
+ <div className='workDash-grade-item-b'>
+ <div className='workDash-grade-item-b-bg'>
+ <div className='workDash-grade-item-b-bg-red'></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </Col>
+ </Row>
+
+
+
+ </div>
+ <div style={{ width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }} >
+ <div className='workDash-main-flex_1' style={{ marginBottom: '12px', }}>
+ <div className='big-green-main-title-display-table'>
+ <div className='disputeLedger-green-title'>实时动态</div>
+ <div style={{ padding: '4px 16px 16px' }}>
+ <TableView
+ columns={columns()}
+ dataSource={data.tableData}
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </NewPage >
+ )
+}
+
+export default WorkDash;
+
+// 柱状图
+const MyChartBar = ({ data, dataAxis }) => {
+ const myChartRef = useRef();
+ // 图表
+ const [myChart, setMyChart] = useState();
+
+
+ // 加载图表数据
+ useEffect(() => {
+ var myChart = echarts.init(document.getElementById('chartBar'), 'dark');
+ // let data = [123, 98, 245, 234, 356, 148];
+ // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']
+
+ // 绘制图表
+ myChart.setOption({
+ backgroundColor: '#fff',
+ grid: {
+ x: 10,
+ y: 20,
+ x2: 20,
+ y2: 0,
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ },
+ formatter: function (params) {
+ return params[0].name + ': ' + params[0].value + '人';
+ }
+ },
+ xAxis: [{
+ type: 'category',
+ // boundaryGap: false,
+ data: dataAxis,
+
+ axisLabel: {
+ interval: dataAxis?.length > 15 ? 1 : 0,
+ formatter: function (value) {
+ // 如果标签长度超过4，将剩余的文字替换为省略号
+ if (value.length > 4) {
+ return value.slice(0, 4) + '...';
+ } else {
+ return value;
+ }
+ }
+ },
+ }],
+ yAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#ccc'
+ }
+ },
+
+ },
+ dataZoom: [
+ {
+ type: 'inside'
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ name: '化解中',
+ data: [1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320],
+ barWidth: 24, // 设置柱子宽度
+ label: {
+ show: true,
+ position: 'top',
+ valueAnimation: false
+ },
+ emphasis: {
+ itemStyle: {
+ opacity: 0.7
+ }
+ },
+ itemStyle: {
+ color: '#57a9fb',
+ borderWidth: 2 // 设置边框宽度
+ }
+ },
+ {
+ type: 'bar',
+ name: '化解成功',
+ data: [920, 920, 920, 920, 920, 920, 920, 920, 920, 920, 920, 920],
+ barWidth: 24, // 设置柱子宽度
+ label: {
+ show: true,
+ position: 'top',
+ valueAnimation: false
+ },
+ emphasis: {
+ itemStyle: {
+ opacity: 0.7
+ }
+ },
+ itemStyle: {
+ color: '#23c343',
+ borderWidth: 2, // 设置边框宽度
+ left: 0 // 设置左边距，以实现重叠效果
+ }
+ },
+ {
+ type: 'bar',
+ name: '化解不成功',
+ data: [400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400],
+ barWidth: 24, // 设置柱子宽度
+ label: {
+ show: true,
+ position: 'top',
+ valueAnimation: false
+ },
+ emphasis: {
+ itemStyle: {
+ opacity: 0.7
+ }
+ },
+ itemStyle: {
+ color: '#F76560',
+ borderWidth: 2, // 设置边框宽度
+ left: 0 // 设置左边距，以实现重叠效果
+ }
+ }
+ ]
+ });
+ }, [data]);
+
+ useEffect(() => {
+ // if (myChart && myChartRef.current.clientHeight !== 0) {
+ // myChart.forceFit();
+ // }
+ });
+
+ return <div id="chartBar" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
+};
+
+const MyLTopChartPie = ({ data }) => {
+ const myChartRef = useRef();
+ // 图表
+ const [myChart, setMyChart] = useState();
+
+ // 加载图表数据
+ useEffect(() => {
+ var myChart = echarts.init(document.getElementById('chartLTopPie'), 'dark');
+
+ // 绘制图表
+ myChart.setOption({
+ backgroundColor: '#fff',
+ grid: {
+ x: 5,
+ y: 12,
+ x2: 20,
+ y2: 0,
+ },
+ legend: {
+ orient: 'vertical', // 垂直排列
+ top: 'center',
+ right: 10,
+ data: [
+ {
+ name: '市场监管',
+ icon: 'circle', // 图例标记的形状
+ },
+ {
+ name: '劳动社保',
+ icon: 'circle',
+ },
+ {
+ name: '城市管理',
+ icon: 'circle',
+ },
+ {
+ name: '交通运输',
+ icon: 'circle',
+ },
+ {
+ name: '教育医疗',
+ icon: 'circle',
+ },
+ {
+ name: '公共服务',
+ icon: 'circle',
+ }
+ // ... 其他数据
+ ]
+ },
+ series: [
+ {
+ name: '纠纷类型',
+ type: 'pie',
+ radius: '90%',
+ center: ['30%', '50%'],
+ color: ['#FCE996', '#FFCF8B', '#86E8DD', '#FDCDC5', '#C396ED', '#9FD4FD'],
+ labelLine: { // 关闭引导线
+ show: false
+ },
+ label: {
+ show: true,
+ position: 'inside', // 设置文字在扇形区域内
+ formatter: '{d}%', // 标签文本格式器
+ rich: {
+ a: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ b: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ c: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ d: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ e: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ f: {
+ lineHeight: 25,
+ align: 'center'
+ }
+ },
+ // normal: {
+ // show: false,
+ // },
+ },
+ data: data
+ },
+ ]
+ });
+ }, [data]);
+
+
+ return <div id="chartLTopPie" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
+};
+
+const MyLTopChartPie1 = ({ data }) => {
+ const myChartRef = useRef();
+ // 图表
+ const [myChart, setMyChart] = useState();
+
+
+ // 加载图表数据
+ useEffect(() => {
+ var myChart = echarts.init(document.getElementById('chartLTopPie1'), 'dark');
+ // let data = [123, 98, 245, 234, 356, 148];
+ // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']
+
+ // 绘制图表
+ myChart.setOption({
+ backgroundColor: '#fff',
+ grid: {
+ x: 5,
+ y: 12,
+ x2: 20,
+ y2: 0,
+ containLabel: true,
+ },
+ legend: {
+ orient: 'vertical', // 垂直排列
+ top: 'center',
+ right: 10,
+ data: [
+ {
+ name: '化解中',
+ icon: 'circle', // 图例标记的形状
+ },
+ {
+ name: '化解成功',
+ icon: 'circle',
+ },
+ {
+ name: '化解不成功',
+ icon: 'circle',
+ },
+
+ ]
+ },
+ series: [
+ {
+ name: '化解状况',
+ type: 'pie',
+ radius: ['60%', '90%'], // 设置饼图的内半径和外半径，实现扇形区域
+ center: ['30%', '50%'],
+ color: ['#B6DDF1', '#3A8AC6', '#094282'],
+ data: [
+ { value: 24, name: '化解中' },
+ { value: 30, name: '化解成功' },
+ { value: 46, name: '化解不成功' },
+ ],
+ label: {
+ show: true,
+ position: 'inside', // 设置文字在扇形区域内
+ formatter: '{d}%', // 标签文本格式器
+ rich: {
+ a: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ b: {
+ lineHeight: 25,
+ align: 'center'
+ },
+ }
+ }
+ }
+ ]
+ });
+ }, [data]);
+
+ useEffect(() => {
+ });
+
+ return <div id="chartLTopPie1" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
+};
diff --git a/gz-customerSystem/src/views/workDash/index.less b/gz-customerSystem/src/views/workDash/index.less
new file mode 100644
index 0000000..0f74b79
--- /dev/null
+++ b/gz-customerSystem/src/views/workDash/index.less
@@ -0,0 +1,313 @@
+.workDash {
+ &-d {
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ // & .ant-space-item {
+ // flex: 1;
+ // }
+ }
+ &-item {
+ flex: 1;
+ display: flex;
+ gap: 16px;
+ &-img {
+ width: 48px;
+ height: 48px;
+ background-color: rgba(242, 243, 245, 0.95);
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ & img {
+ width: 24px;
+ height: 24px;
+ }
+ }
+ &-div {
+ }
+ &-title {
+ font-size: 14px;
+ line-height: 22px;
+ color: #4e5969;
+ display: flex;
+ }
+ &-value {
+ color: #1d2129;
+ font-size: 18px;
+ line-height: 26px;
+ display: flex;
+ }
+ }
+ &-item1 {
+ flex: 2;
+ display: flex;
+ gap: 16px;
+ }
+ &-main {
+ display: flex;
+ flex: 2;
+ background-color: #fff;
+ &-flex_1 {
+ flex: 1;
+ background-color: #fff;
+ }
+ &-card {
+ // width: 197px;
+ &-one {
+ padding: 0 16px 16px;
+ display: flex;
+ gap: 24px;
+ justify-content: space-between;
+ }
+ &-head {
+ display: flex;
+ &-l {
+ width: 80px;
+ height: 80px;
+ background-color: #08979c;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px 0px 0px 5px;
+ &-img {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background-color: #96e0d7;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ & img {
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
+ &-r {
+ background: linear-gradient(271deg, #13c2c2 0%, rgba(5, 174, 174, 0.8) 14%);
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ border-radius: 0px 5px 5px 0px;
+ padding-left: 16px;
+ flex: 1;
+ &-title {
+ font-size: 14px;
+ }
+ &-value {
+ font-size: 20px;
+ line-height: 28px;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ height: 28px;
+ }
+ &-subValue {
+ font-size: 12px;
+ line-height: 28px;
+ font-weight: 400;
+ position: relative;
+ top: 2px;
+ }
+ }
+ }
+ &-body {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 10px;
+ gap: 16px;
+ margin-top: 12px;
+ &-flex {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ &-title {
+ font-size: 12px;
+ line-height: 20px;
+ color: #4e5969;
+ }
+ &-value {
+ color: #1d2129;
+ font-size: 14px;
+ line-height: 22px;
+ }
+ }
+ }
+ }
+ }
+ &-main1 {
+ // display: flex;
+ flex: 1;
+ background-color: #fff;
+ &-chart {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0 16px 12px;
+ }
+ &-flex {
+ width: 50%;
+ display: flex;
+ gap: 16px;
+ justify-content: center;
+ padding: 11px 0;
+ &-l {
+ font-size: 14px;
+ line-height: 22px;
+ color: #4e5969;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ &-value {
+ color: #1d2129;
+ font-size: 18px;
+ line-height: 26px;
+ }
+ &-subValue {
+ font-size: 14px;
+ line-height: 22px;
+ color: #4e5969;
+ }
+ }
+ &-r {
+ width: 72px;
+ height: 48px;
+ padding: 4px 12px;
+ text-align: center;
+ font-size: 12px;
+ line-height: 20px;
+ &-green {
+ background: #e8ffea;
+ color: #00b42a;
+ }
+ &-orange {
+ background: #fff7e6;
+ color: #ef6c24;
+ }
+ &-blue {
+ background: #e6f7ff;
+ color: #1890ff;
+ }
+ }
+ }
+ }
+ &-grade {
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ &-item {
+ padding: 12px 8px;
+ &-t {
+ display: flex;
+ justify-content: space-between;
+ &-orange {
+ padding: 2px 12px;
+ color: #ef6c24;
+ border-radius: 2px;
+ background: #fff7e6;
+ border: 1px solid #fa8c16;
+ }
+ &-blue {
+ padding: 2px 12px;
+ color: #3491fa;
+ border-radius: 2px;
+ background: #e8f7ff;
+ border: 1px solid #3491fa;
+ }
+ &-red {
+ padding: 2px 12px;
+ color: #f76560;
+ border-radius: 2px;
+ background: #ffece8;
+ border: 1px solid #f53f3f;
+ }
+ &-value {
+ font-size: 18px;
+ line-height: 28px;
+ margin-right: 4px;
+ }
+ &-unit {
+ font-size: 12px;
+ line-height: 20px;
+ color: #86909c;
+ }
+ }
+ &-b {
+ margin-top: 8px;
+ &-bg {
+ height: 3px;
+ width: 100%;
+ background: #e9eaeb;
+ position: relative;
+ &-orange {
+ width: 80%;
+ height: 3px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: linear-gradient(270deg, #ffc069 0%, #fa8c16);
+ }
+ &-blue {
+ width: 20%;
+ height: 3px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: linear-gradient(270deg,#57a9fb 0%, #3491fa);
+ }
+ &-red {
+ width: 10%;
+ height: 3px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: linear-gradient(270deg,#f76560 0%, #f53f3f);
+ }
+ }
+ }
+ &-orange {
+ border: 1px solid #fa8c16;
+ }
+ &-blue {
+ border: 1px solid #3491fa;
+ }
+ &-red {
+ border: 1px solid #f76560;
+ }
+ }
+ }
+}
+
+.workDash-bg_2 {
+ background: #1890ff;
+ &_img {
+ background-color: #91d5ff;
+ }
+ &_r {
+ background: linear-gradient(271deg, #1890ff 0%, rgba(24, 144, 255, 0.8) 14%);
+ }
+}
+
+.workDash-bg_3 {
+ background: #ef6c24;
+ &_img {
+ background-color: #ffcba1;
+ }
+ &_r {
+ background: linear-gradient(271deg, #ef6c24 0%, rgba(239, 108, 36, 0.8) 14%);
+ }
+}
+
+.workDash-bg_4 {
+ background: #d10269;
+ &_img {
+ background-color: #ffa6c6;
+ }
+ &_r {
+ background: linear-gradient(271deg, #d10269 0%, rgba(209, 2, 105, 0.8) 14%);
+ }
+}
--
Gitblit v1.8.0