@@ -268,7 +308,7 @@ const OrgChart = () => {
) : null}
{v.depId === 1 ? (
-
+
{v.userList?.map((v1, _) => {
return (
();
+ useEffect(() => {
+ homeStore.getAe().then((res) => {
+ setUser(res.data?.record);
+ });
+ }, [homeStore]);
+
+ return (
+
{b}: {c} ({d}%)", + legend: { + top: '5%', + right: 'right', + textStyle :{ + color: "#fff" + }, + formatter: function (name) { + let v; + data.forEach((item) => { + if (item.name === name) { + v = item.value; + } + }); + return name + '-' + v; + }, + }, - series: [ { - center: ["50%", "40%"], + center: ["35%", "40%"], name: "Access From", type: "pie", - selectedMode: "single", - radius: [0, "30%"], + radius: ["40%", "60%"], label: { - position: "inner", - fontSize: 10, - }, - labelLine: { - show: false, - }, - data: [ - { value: 1548, name: "Search Engine" }, - { value: 775, name: "Direct" }, - { value: 679, name: "Marketing", selected: true }, - ], - }, - { - center: ["50%", "40%"], - name: "Access From", - type: "pie", - radius: ["45%", "60%"], - labelLine: { - length: 30, - show: false, - }, - label: { - formatter: "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ", backgroundColor: "#F6F8FC", borderColor: "#8C8D8E", borderWidth: 0, - show: false, + show: true, borderRadius: 4, - rich: { - a: { - color: "#6E7079", - lineHeight: 22, - align: "center", - }, - b: { - color: "#4C5058", - fontSize: 14, - fontWeight: "bold", - lineHeight: 33, - }, - per: { - color: "#fff", - backgroundColor: "#4C5058", - padding: [3, 4], - borderRadius: 4, - }, - }, }, - data: [ - { value: 1048, name: "Baidu" }, - { value: 335, name: "Direct" }, - { value: 310, name: "Email" }, - { value: 251, name: "Google" }, - { value: 234, name: "Union Ads" }, - { value: 147, name: "Bing" }, - { value: 135, name: "Video Ads" }, - { value: 102, name: "Others" }, - ], + data }, ], }; option && myChart.setOption(option); }; useEffect(() => { - initChart(); - }, []); + homeStore.getMm().then((res) => { + initChart(res.data?.record); + }) + + }, [homeStore]); return ; }; - -export default Wz; +export default inject("homeStore")(observer(Wz)); +// export default Wz; diff --git a/src/pages/materialMgmt/material.tsx b/src/pages/materialMgmt/material.tsx index 68284af..39e075d 100644 --- a/src/pages/materialMgmt/material.tsx +++ b/src/pages/materialMgmt/material.tsx @@ -1,4 +1,13 @@ -import { Button, Space, Modal, FormInstance, Select } from "antd"; +import { + Button, + Space, + Modal, + FormInstance, + Select, + Popconfirm, + PopconfirmProps, + message, +} from "antd"; import { inject, observer } from "mobx-react"; import BTable from "@/components/b_table"; import { useEffect, useState } from "react"; @@ -56,16 +65,54 @@ const Material = (props: Store) => { 编辑 - + 物资出库 + */} + {
+ try {
+ materialStore.deleteItem(record.id);
+ message.success("物资出库成功");
+ } catch (error) {
+ message.success("物资出库失败");
+ }
+ }}
+ onCancel={cancel}
+ okText="Yes"
+ cancelText="No"
+ >
+
+
+ {
+ try {
+ materialStore.deleteItem(record.id);
+ message.success("删除成功");
+ } catch (error) {
+ message.success("删除失败");
+ }
+ }}
+ onCancel={cancel}
+ okText="Yes"
+ cancelText="No"
+ >
+
+
+
);
};
@@ -74,6 +121,12 @@ const Material = (props: Store) => {
record.expiry_date = dayjs(record.expiry_date);
setRecord(record);
};
+
+
+ const cancel: PopconfirmProps["onCancel"] = (e) => {
+ console.log(e);
+ message.error("Click on No");
+ };
const onFinish = (values: any) => {
let data = {
...values,
diff --git a/src/pages/org_chart.less b/src/pages/org_chart.less
index 9feef25..602bbbb 100644
--- a/src/pages/org_chart.less
+++ b/src/pages/org_chart.less
@@ -1,63 +1,83 @@
.orgs {
- margin-left: 10;
- margin-bottom: 10;
+ margin-bottom: 10px;
display: flex;
align-items: center;
-}
-.orgsBox{
- overflow: auto;
- margin: 10px;
-}
-.line {
position: relative;
- height: 3px; /* 线的高度 */
}
-.line::after {
- content: "";
+.orgs::before{
position: absolute;
- left: 0;
- right: 0;
- top: 0;
- border-top: 1px solid #fff; /* 线的颜色和宽度 */
+ width: 80px;
+ left: -35px;
+ height: 1px;
+ background-color: black;
+ border-radius: 50%;
}
-.line:before{
- content: '';
- position: absolute;
- top: 50%;
- left: 100%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 50%;
- background: #fff; /* 设置线的颜色 */
+
+.orgsBox {
+ .userNameCont {
+ position: relative;
+ }
}
-.line:after {
- content: '';
- position: absolute;
- top: 50%;
- left:50%;
- transform: translate(-50%, -50%);
+.userNmaeBox {
+ margin-left: 10px;
+ margin-bottom: 10px;
+ text-align: center;
+ .userNmae {
+ display: block;
+ padding: 5px 5px;
+ background: rgba(75, 176, 152, 0.2);
+ font-size: 13px;
+ }
+}
+
+.lineBox {
+ position: relative;
+ height: 100%;
width: 100%;
- height: 50%;
- background: #fff; /* 设置线的颜色 */
-}
-
-.line:before {
- transform: translate(-50%, -50%) rotate(90deg);
-}
-
-.line:after {
- width: 100%; /* 设置短线宽度 */
- background: transparent; /* 设置短线透明 */
-}
-.userNmaeBox{
- margin-left: 10px;
- margin-bottom: 10px;
- color: #fff;
- text-align: center;
- .userNmae{
- display: block;
- padding: 5px 5px;
- background: rgba(75, 176, 152, 0.2);
- font-size: 13px;
- }
+ background-color: red;
+ top: -5px;
+ .linLeft {
+ position: absolute;
+ width: 50%;
+ border: 1px solid;
+ left: 0;
+ right: 50%;
+ }
+ .linRight {
+ position: absolute;
+ width: 100%;
+ border: 1px solid;
+ height: 100%;
+ right: -5px;
+ transform: rotate(-90deg) rotateY(180deg);
+ box-sizing: border-box;
+ }
+ .linRight:after {
+ position: absolute;
+ left: -40px;
+ top: 40px;
+ width: 80px;
+ height: 1px;
+ background-color: black;
+ border-radius: 50%;
+ transform: rotate(-90deg) rotateY(180deg);
+ }
+ .linRight::before {
+ position: absolute;
+ left: 410px;
+ top: 40px;
+ width: 80px;
+ height: 1px;
+ background-color: black;
+ border-radius: 50%;
+ transform: rotate(-90deg) rotateY(180deg);
+ }
}
+
+
+.orgs:nth-of-type(1){
+ .orgs::before{
+ content: "";
+ width: 80px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/org_chart2.less b/src/pages/org_chart2.less
new file mode 100644
index 0000000..88550fa
--- /dev/null
+++ b/src/pages/org_chart2.less
@@ -0,0 +1,830 @@
+.orgchart {
+ box-sizing: border-box;
+ display: inline-block;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-image: linear-gradient(to top,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to right,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to bottom,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to left,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%);
+ background-size: 10px 10px;
+ padding: 20px 20px 0 20px
+}
+
+.orgchart .hidden,.orgchart~.hidden {
+ display: none!important
+}
+
+.orgchart.b2t {
+ transform: rotate(180deg)
+}
+
+.orgchart.l2r {
+ position: absolute;
+ transform: rotate(-90deg) rotateY(180deg);
+ transform-origin: left top;
+ text-align: center
+}
+
+.orgchart.r2l {
+ position: absolute;
+ transform: rotate(90deg);
+ transform-origin: left top;
+ text-align: center
+}
+
+.orgchart~.mask {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 999;
+ text-align: center;
+ background-color: rgba(0,0,0,.3)
+}
+
+.orgchart~.mask .spinner {
+ position: absolute;
+ top: calc(50% - 50px);
+ left: calc(50% - 50px)
+}
+
+.orgchart>.spinner::before,.orgchart~.mask .spinner::before {
+ width: 100px;
+ height: 100px;
+ border-width: 10px;
+ border-radius: 50px;
+ border-top-color: rgba(68,157,68,.8);
+ border-bottom-color: rgba(68,157,68,.8);
+ border-left-color: rgba(68,157,68,.8)
+}
+
+.orgchart .nodes {
+ display: flex;
+ list-style: none;
+ padding-left: 0;
+ margin: 0
+}
+
+.orgchart .hierarchy {
+ position: relative
+}
+
+.orgchart .hierarchy::before {
+ content: "";
+ position: absolute;
+ top: -11px;
+ left: 0;
+ width: 100%;
+ border-top: 2px solid rgba(217,83,79,.8);
+ box-sizing: border-box
+}
+
+.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,.orgchart .hierarchy:first-child::before {
+ left: calc(50% - 1px);
+ width: calc(50% + 1px);
+}
+
+.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,.orgchart .hierarchy:last-child::before {
+ width: calc(50% + 1px)
+}
+
+.orgchart .hierarchy:not(.hidden):only-child::before {
+ width: 2px
+}
+
+.orgchart .isAncestorsCollapsed:only-child::before,.orgchart .isAncestorsCollapsed>.node::before,.orgchart .isChildrenCollapsed>.node:not(:only-child)::after,.orgchart .isCollapsedDescendant::before,.orgchart .isCollapsedDescendant>.node::after,.orgchart .isCollapsedDescendant>.node::before,.orgchart .isCollapsedSibling .hierarchy::before,.orgchart .isCollapsedSibling::before,.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,.orgchart>.nodes>.hierarchy::before {
+ content: none
+}
+
+.orgchart .node:not(:only-child)::after {
+ content: "";
+ position: absolute;
+ bottom: -12px;
+ left: calc(50% - 1px);
+ width: 2px;
+ height: 10px;
+ background-color: rgba(217,83,79,.8)
+}
+
+.orgchart ul li .node.allowedDrop {
+ border-color: rgba(68,157,68,.9)
+}
+
+.orgchart ul li .node.currentDropTarget {
+ background-color: rgba(68,157,68,.9)
+}
+
+.orgchart ul li .node.selected {
+ background-color: rgba(238,217,54,.5)
+}
+
+.orgchart ul li .node:hover {
+ background-color: rgba(238,217,54,.5)
+}
+
+.orgchart>ul>li>ul li>.node::before {
+ content: "";
+ position: absolute;
+ top: var(--top,-12px);
+ left: calc(50% - 1px);
+ width: 2px;
+ height: var(--height,10px);
+ background-color: rgba(217,83,79,.8)
+}
+
+.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before {
+ top: var(--top-cross-point,-12px);
+ height: var(--height-cross-point,10px)
+}
+
+.orgchart .node {
+ box-sizing: border-box;
+ display: inline-block;
+ position: relative;
+ margin: 0 0 20px 0;
+ padding: 3px;
+ border: 2px dashed transparent;
+ text-align: center
+}
+
+.orgchart.l2r .node,.orgchart.r2l .node {
+ width: 50px;
+ height: 140px
+}
+
+.orgchart .node:hover {
+ background-color: rgba(238,217,54,.5);
+ transition: .5s;
+ cursor: default;
+ z-index: 20
+}
+
+.orgchart .node.focused {
+ background-color: rgba(238,217,54,.5)
+}
+
+.orgchart .ghost-node {
+ position: fixed;
+ left: -10000px;
+ top: -10000px
+}
+
+.orgchart .ghost-node rect {
+ fill: #fff;
+ stroke: #bf0000
+}
+
+.orgchart .node.allowedDrop {
+ border-color: rgba(68,157,68,.9)
+}
+
+.orgchart .node>.spinner {
+ position: absolute;
+ top: calc(50% - 1rem);
+ left: calc(50% - 1rem)
+}
+
+.orgchart .node>.spinner::before {
+ width: 2rem;
+ height: 2rem;
+ border-width: .2rem;
+ border-radius: 1rem;
+ border-top-color: rgba(68,157,68,.8);
+ border-bottom-color: rgba(68,157,68,.8);
+ border-left-color: rgba(68,157,68,.8)
+}
+
+.orgchart .node .title {
+ box-sizing: border-box;
+ width: 130px;
+ text-align: center;
+ font-size: 12px;
+ font-weight: 700;
+ height: 20px;
+ line-height: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: rgba(217,83,79,.8);
+ color: #fff;
+ border-radius: 4px 4px 0 0
+}
+
+.orgchart.b2t .node .title {
+ transform: rotate(-180deg);
+ transform-origin: center bottom
+}
+
+.orgchart.l2r .node .title {
+ transform: rotate(-90deg) translate(-45px,-45px) rotateY(180deg);
+ transform-origin: bottom center
+}
+
+.orgchart.r2l .node .title {
+ transform: rotate(-90deg) translate(-45px,-45px);
+ transform-origin: bottom center
+}
+
+.orgchart .node .title .parentNodeSymbol {
+ float: left
+}
+
+.orgchart .node .title .parentNodeSymbol::before {
+ color: #fff
+}
+
+.orgchart .node .title .parentNodeSymbol::after {
+ background-color: #fff
+}
+
+.orgchart .node .content {
+ box-sizing: border-box;
+ width: 130px;
+ height: 20px;
+ line-height: 20px;
+ font-size: 10px;
+ border: 1px solid rgba(217,83,79,.8);
+ border-width: 0 1px 1px 1px;
+ border-radius: 0 0 .25rem .25rem;
+ text-align: center;
+ background-color: #fff;
+ color: #333;
+ text-overflow: ellipsis;
+ white-space: nowrap
+}
+
+.orgchart.b2t .node .content {
+ transform: rotate(180deg);
+ transform-origin: center top
+}
+
+.orgchart.l2r .node .content {
+ transform: rotate(-90deg) translate(-45px,-45px) rotateY(180deg);
+ transform-origin: top center;
+ width: 130px
+}
+
+.orgchart.r2l .node .content {
+ transform: rotate(-90deg) translate(-45px,-45px);
+ transform-origin: top center;
+ width: 130px
+}
+
+.orgchart .node .edge {
+ position: absolute;
+ cursor: default;
+ transition: .2s
+}
+
+.orgchart .node .edge::before {
+ border-color: rgba(68,157,68,.5)
+}
+
+.orgchart.noncollapsable .node .edge {
+ display: none
+}
+
+.orgchart .node .edge:hover {
+ cursor: pointer
+}
+
+.orgchart .edge:hover::before {
+ border-color: #449d44
+}
+
+.orgchart .node .verticalEdge {
+ width: calc(100% - 6px);
+ height: 10px;
+ left: 3px
+}
+
+.orgchart .node .verticalEdge::before {
+ position: absolute;
+ left: calc(50% - 5px)
+}
+
+.orgchart .node .topEdge {
+ top: -2px
+}
+
+.orgchart .node .topEdge.oci-chevron-up::before {
+ top: 2px
+}
+
+.orgchart .node .topEdge.oci-chevron-down::before {
+ bottom: 3px
+}
+
+.orgchart .node .bottomEdge {
+ bottom: -2px
+}
+
+.orgchart .node .bottomEdge.oci-chevron-up::before {
+ bottom: -3px
+}
+
+.orgchart .node .bottomEdge.oci-chevron-down::before {
+ bottom: 1px
+}
+
+.orgchart .node .horizontalEdge {
+ width: 10px;
+ height: calc(100% - 6px);
+ top: 3px
+}
+
+.orgchart .node .rightEdge {
+ right: -2px
+}
+
+.orgchart .node .leftEdge {
+ left: -2px
+}
+
+.orgchart .node .horizontalEdge::before {
+ position: absolute;
+ top: calc(50% - 5px)
+}
+
+.orgchart .node .leftEdge.oci-chevron-right::before {
+ left: -3px
+}
+
+.orgchart .node .leftEdge.oci-chevron-left::before {
+ left: 1px
+}
+
+.orgchart .node .rightEdge.oci-chevron-left::before {
+ right: -3px
+}
+
+.orgchart .node .rightEdge.oci-chevron-right::before {
+ right: 1px
+}
+
+.orgchart .node .toggleBtn {
+ position: absolute;
+ left: -2px;
+ bottom: -2px;
+ width: 16px;
+ height: 16px
+}
+
+.orgchart .node .toggleBtn::before {
+ background-color: rgba(68,157,68,.6);
+ position: absolute;
+ left: 0;
+ bottom: 0
+}
+
+.orgchart .node .toggleBtn:hover::before {
+ background-color: #449d44
+}
+
+.oc-export-btn {
+ margin-left: .5rem;
+ padding: .5rem 1rem
+}
+
+.orgchart .node {
+ transition: transform .3s,opacity .3s
+}
+
+.orgchart .slide-down {
+ opacity: 0;
+ transform: translateY(40px)
+}
+
+.orgchart.l2r .node.slide-down,.orgchart.r2l .node.slide-down {
+ transform: translateY(130px)
+}
+
+.orgchart .slide-up {
+ opacity: 0;
+ transform: translateY(-40px)
+}
+
+.orgchart.l2r .node.slide-up,.orgchart.r2l .node.slide-up {
+ transform: translateY(-130px)
+}
+
+.orgchart .slide-right {
+ opacity: 0;
+ transform: translateX(130px)
+}
+
+.orgchart.l2r .node.slide-right,.orgchart.r2l .node.slide-right {
+ transform: translateX(40px)
+}
+
+.orgchart .slide-left {
+ opacity: 0;
+ transform: translateX(-130px)
+}
+
+.orgchart.l2r .node.slide-left,.orgchart.r2l .node.slide-left {
+ transform: translateX(-40px)
+}
+
+.orgchart .nodes.vertical {
+ display: block;
+ padding-left: 10px
+}
+
+.orgchart .nodes.vertical .nodes {
+ list-style: none;
+ display: block;
+ margin: 0;
+ padding-left: 10px;
+ text-align: left
+}
+
+.orgchart .nodes.vertical .node {
+ margin-bottom: 0
+}
+
+.orgchart .nodes.vertical .node::after,.orgchart .nodes.vertical .node::before {
+ content: none
+}
+
+.orgchart .nodes.vertical .hierarchy {
+ position: relative;
+ text-align: left
+}
+
+.orgchart .nodes.vertical .hierarchy::after,.orgchart .nodes.vertical .hierarchy::before {
+ box-sizing: border-box;
+ content: '';
+ position: absolute;
+ left: -6px;
+ border-color: rgba(217,83,79,.8);
+ border-style: solid;
+ border-width: 0 0 2px 2px
+}
+
+.orgchart .nodes.vertical .hierarchy::before {
+ top: 0;
+ height: 26px;
+ width: 11px
+}
+
+.orgchart .nodes.vertical .hierarchy::after {
+ bottom: 0;
+ height: calc(100% - 24px)
+}
+
+.orgchart .nodes.vertical .hierarchy:last-child::after {
+ border-width: 2px 0 0 0
+}
+
+.orgchart .nodes.vertical>.hierarchy:first-child::before {
+ box-sizing: border-box;
+ top: -11px;
+ height: 35px;
+ width: calc(50% + 2px);
+ border-width: 2px 0 0 2px
+}
+
+.orgchart .nodes.vertical>.hierarchy:first-child::after {
+ box-sizing: border-box;
+ top: 24px;
+ width: 11px;
+ border-width: 2px 0 0 2px
+}
+
+.orgchart .nodes.vertical>.hierarchy:first-child:last-child::after {
+ border-width: 2px 0 0 0
+}
+
+.orgchart .node.compact {
+ position: static;
+ display: grid;
+ width: 140px;
+ height: 50px;
+ background-color: #eee
+}
+
+.orgchart .node.compact.looseMode {
+ display: grid;
+ width: unset;
+ height: unset
+}
+
+.orgchart .node.compact>.node {
+ display: none
+}
+
+.orgchart .node.compact.looseMode>.node {
+ display: inline-block
+}
+
+.orgchart .node.compact>.node.compact {
+ position: relative
+}
+
+.orgchart .node.compact>.node.compact.looseMode {
+ display: grid
+}
+
+.orgchart .node.compact.even,.orgchart .node.compact.even:hover {
+ background-color: #eee
+}
+
+.orgchart .node.compact.odd,.orgchart .node.compact.odd:hover {
+ background-color: #fff
+}
+
+.orgchart .node.compact.even>.node.focused,.orgchart .node.compact.even>.node.selected,.orgchart .node.compact.even>.node:hover {
+ background-color: #fff
+}
+
+.orgchart .node.compact.odd>.node.focused,.orgchart .node.compact.odd>.node.selected,.orgchart .node.compact.odd>.node:hover {
+ background-color: #eee
+}
+
+.orgchart .node.compact::before {
+ top: var(--top-cross-point,-10px)
+}
+
+.orgchart .node.compact>.content {
+ position: absolute;
+ top: 25px;
+ left: 5px
+}
+
+.orgchart .node.compact.looseMode>.title {
+ margin-top: 5px;
+ margin-left: 5px
+}
+
+.orgchart .node.compact.looseMode>.content {
+ top: 30px;
+ left: 10px
+}
+
+.orgchart .node.compact>.node.compact.looseMode>.title {
+ margin-top: 5px;
+ margin-left: 5px
+}
+
+.orgchart .node.compact>.node.compact>.content {
+ position: absolute;
+ top: 23px;
+ left: 3px
+}
+
+.orgchart .node.compact>.node.compact.looseMode>.content {
+ top: 28px;
+ left: 8px
+}
+
+.orgchart .node.compact .node {
+ margin-bottom: 0
+}
+
+.orgchart .node.compact .node:not(:only-child)::after {
+ content: unset
+}
+
+.orgchart .backToCompactSymbol,.orgchart .backToLooseSymbol {
+ cursor: pointer
+}
+
+.orgchart .node.compact>.backToCompactSymbol {
+ position: absolute;
+ top: 5px;
+ left: 5px
+}
+
+.orgchart .node.compact.looseMode>.backToCompactSymbol {
+ top: 10px;
+ left: 10px
+}
+
+.orgchart .node.compact>.node.compact.looseMode>.backToCompactSymbol {
+ top: 8px;
+ left: 8px
+}
+
+.orgchart .node.compact>.node.compact>.backToCompactSymbol {
+ position: absolute;
+ top: 3px;
+ left: 3px
+}
+
+.orgchart .node.compact>.backToLooseSymbol {
+ position: absolute;
+ top: 25px;
+ right: 5px
+}
+
+.orgchart .node.compact>.node.compact>.backToLooseSymbol {
+ position: absolute;
+ top: 23px;
+ right: 3px
+}
+
+.orgchart .node.compact .backToCompactSymbol::before {
+ border-top-color: rgba(68,157,68,.6)
+}
+
+.orgchart .node.compact .backToLooseSymbol::before {
+ border-bottom-color: rgba(68,157,68,.6)
+}
+
+.orgchart .node.compact .backToCompactSymbol:hover::before {
+ border-top-color: #449d44
+}
+
+.orgchart .node.compact .backToLooseSymbol:hover::before {
+ border-bottom-color: #449d44
+}
+
+.oci {
+ display: inline-block;
+ position: relative;
+ font-style: normal;
+ font-family: Arial
+}
+
+.oci-menu::before {
+ content: "≡";
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ text-align: center;
+ line-height: 1rem;
+ color: #000;
+ font-size: 1rem
+}
+
+.oci-chevron-up::before {
+ content: "";
+ box-sizing: border-box;
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+ border: 3px solid #000;
+ transform: rotate(45deg);
+ border-right: unset;
+ border-bottom: unset
+}
+
+.oci-chevron-down::before {
+ content: "";
+ box-sizing: border-box;
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+ border: 3px solid #000;
+ transform: rotate(45deg);
+ border-top: unset;
+ border-left: unset
+}
+
+.oci-chevron-left::before {
+ content: "";
+ box-sizing: border-box;
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+ border: 3px solid #000;
+ transform: rotate(45deg);
+ border-top: unset;
+ border-right: unset
+}
+
+.oci-chevron-right::before {
+ content: "";
+ box-sizing: border-box;
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+ border: 3px solid #000;
+ transform: rotate(45deg);
+ border-left: unset;
+ border-bottom: unset
+}
+
+.oci-corner-top-left::before {
+ content: "";
+ display: inline-block;
+ border-top: 20px solid #000;
+ border-right: 20px solid transparent
+}
+
+.oci-corner-top-right::before {
+ content: "";
+ display: inline-block;
+ box-sizing: border-box;
+ width: 0;
+ height: 0;
+ border-top: 20px solid #000;
+ border-left: 20px solid transparent
+}
+
+.oci-corner-bottom-right::before {
+ content: "";
+ display: inline-block;
+ box-sizing: border-box;
+ width: 0;
+ height: 0;
+ border-bottom: 20px solid #000;
+ border-left: 20px solid transparent
+}
+
+.oci-corner-bottom-left::before {
+ content: "";
+ display: inline-block;
+ box-sizing: border-box;
+ width: 0;
+ height: 0;
+ border-bottom: 20px solid #000;
+ border-right: 20px solid transparent
+}
+
+.oci-plus-square::before {
+ content: "﹢";
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ text-align: center;
+ line-height: 16px;
+ background-color: #000;
+ color: #fff;
+ font-weight: 700
+}
+
+.oci-minus-square::before {
+ content: "﹣";
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ text-align: center;
+ line-height: 16px;
+ background-color: #000;
+ color: #fff;
+ font-weight: 700
+}
+
+.oci-arrow-square-up::before {
+ content: "⬆";
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ text-align: center;
+ line-height: 1rem;
+ background-color: #000;
+ color: #fff;
+ font-weight: 700
+}
+
+.oci-arrow-square-down::before {
+ content: "⬇";
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ text-align: center;
+ line-height: 1rem;
+ background-color: #000;
+ color: #fff;
+ font-weight: 700
+}
+
+.oci-info-circle::before {
+ content: "i";
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ border-radius: .5rem;
+ background-color: #000;
+ color: #fff;
+ text-align: center;
+ font-weight: 700
+}
+
+.oci-spinner::before {
+ content: "";
+ vertical-align: text-bottom;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 1rem;
+ height: 1rem;
+ border: .1rem solid #000;
+ border-right-color: transparent;
+ border-radius: .625rem;
+ animation: oci-infinite-spinning .75s linear infinite
+}
+
+@keyframes oci-infinite-spinning {
+ from {
+ transform: rotate(0)
+ }
+
+ to {
+ transform: rotate(360deg)
+ }
+}
diff --git a/src/pages/training/training.tsx b/src/pages/training/training.tsx
index ae88558..7f00878 100644
--- a/src/pages/training/training.tsx
+++ b/src/pages/training/training.tsx
@@ -1,4 +1,13 @@
-import { Button, Space, Modal, FormInstance, Form, Select } from "antd";
+import {
+ Button,
+ Space,
+ Modal,
+ FormInstance,
+ Form,
+ Select,
+ InputNumber,
+ SelectProps,
+} from "antd";
import { inject, observer } from "mobx-react";
import type { ColumnsType } from "antd/es/table";
import BTable from "@/components/b_table";
@@ -12,6 +21,8 @@ import dayjs from "dayjs";
import { traningConfig } from "./traning_config";
import { FormType } from "@/components/form/interface";
import TraningUser from "./traningUser";
+import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
+
const { Option } = Select;
const Trainings = (props: Store) => {
@@ -24,6 +35,8 @@ const Trainings = (props: Store) => {
const [tagId, setId] = useState(null);
const [stashList, setStash] = useState(null); // 仓库列表
const [userList, setUserList] = useState>([]);
+ const [data, setData] = useState([]);
+
const columns: ColumnsType = [
{ title: "任务标题", dataIndex: "title" },
{ title: "任务描述", dataIndex: "desc" },
@@ -125,7 +138,21 @@ const Trainings = (props: Store) => {
}
setIsModalOpen(false);
};
+ const handleSearch = (newValue: string) => {
+ if (newValue === "") return;
+ baseHttp.get("/supplies/list/serch", { name: newValue }).then((res) => {
+ let data = res.data?.record ?? [];
+ data.forEach((item) => {
+ item.text = item.name;
+ item.value = item.identity;
+ });
+ setData(data ?? []);
+ });
+ };
+ const handleChange = (newValue: string) => {
+ // setValue(newValue);
+ };
// 任务发布handler
const fabu = () => {
setProjectConfig([
@@ -198,6 +225,61 @@ const Trainings = (props: Store) => {
})}
+
+ {(fields, { add, remove }) => (
+ <>
+ {fields.map(({ key, name, ...restField }) => (
+ <>
+
+
+
+
+ remove(name)} />
+
+ ))}
+
+
+
+ )}
+
diff --git a/src/pages/user/user.tsx b/src/pages/user/user.tsx
index 3bb135c..0334ee3 100644
--- a/src/pages/user/user.tsx
+++ b/src/pages/user/user.tsx
@@ -14,6 +14,8 @@ const User = (props: Store) => {
const [projectConfig, setProjectConfig] = useState([]);
const formRef = React.useRef(null);
const [record, setRecord] = useState(null);
+ const [team, setTeam] = useState(null);
+ const [per, setPer] = useState(null);
const [userId, setId] = useState(null);
const actionWidget = (any, record) => {
return (
@@ -47,7 +49,7 @@ const User = (props: Store) => {
...record,
imageUrl: [{ url: record.imageUrl }],
};
- setProjectConfig(defaultConfig);
+ setProjectConfig(defaultConfig(team,per));
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
@@ -57,19 +59,42 @@ const User = (props: Store) => {
let data = {
...values,
};
- data.head_img = values.head_img[0].url;
+ if(values.head_img && values.head_img.length>0){
+ data.head_img = values.head_img[0].url;
+ }else{
+ data.head_img = "";
+ }
if (!userId) {
- usrStore.add(values);
+ usrStore.add(data);
} else {
}
setIsModalOpen(false);
};
useEffect(() => {
usrStore.getlist();
+ usrStore.getTeam().then((res) => {
+ let data =res.data?.record??[]
+ for (let index = 0; index < data.length; index++) {
+ data[index].label = data[index].name;
+ data[index].value = data[index].identity;
+ }
+ console.log(data);
+
+ setTeam(data)
+ });
+ usrStore.getPer().then((res) => {
+ let data =res.data?.record??[]
+ for (let index = 0; index < data.length; index++) {
+ data[index].label = data[index].name;
+ data[index].value = data[index].identity;
+ }
+ setPer(data)
+ });
+
}, [usrStore]);
const addHandler = () => {
- setProjectConfig(defaultConfig);
+ setProjectConfig(defaultConfig(team,per));
setId(null);
setIsModalOpen(true);
};
@@ -79,7 +104,7 @@ const User = (props: Store) => {
{
dataSource={usrStore.list}
/>
formRef.current?.resetFields()}
diff --git a/src/pages/user/user_config.tsx b/src/pages/user/user_config.tsx
index 3037a09..f351d5e 100644
--- a/src/pages/user/user_config.tsx
+++ b/src/pages/user/user_config.tsx
@@ -2,7 +2,8 @@ import { FormType } from "@/components/form/interface";
import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
import { Image } from "antd";
-export const defaultConfig = [
+export const defaultConfig =(team,per)=>
+[
{
type: FormType.input,
label: "用户名",
@@ -28,7 +29,7 @@ export const defaultConfig = [
rules: [{ required: true, message: "请选择性别" }],
},
{
- type: FormType.input,
+ type: FormType.inputNumber,
label: "年龄",
name: "age",
value: "",
@@ -119,6 +120,22 @@ export const defaultConfig = [
value: "",
rules: [{ required: true, message: "请输入民族" }],
},
+ {
+ type: FormType.cehckboxGroup,
+ label: "所属队伍",
+ name: "team_link_user",
+ checkboxData:team,
+ value: "",
+ rules: [{ required: true, message: "请输入民族" }],
+ },
+ {
+ type: FormType.cehckboxGroup,
+ label: "个人身份属性",
+ name: "pers_link_user",
+ checkboxData:per,
+ value: "",
+ rules: [{ required: true, message: "请输入民族" }],
+ },
{
type: FormType.radio,
label: "是否党员",
@@ -162,7 +179,7 @@ export const defaultConfig = [
{
type: FormType.upload,
label: "头像",
- name: "headImg",
+ name: "head_img",
value: [],
rules: [{ required: true, message: "请上传头像" }],
},
@@ -172,96 +189,98 @@ export const columns: ColumnsType = [
{
title: "用户名",
dataIndex: "user_name",
- width:150,
- fixed:"left"
+ width: 150,
+ fixed: "left",
},
{
title: "性别",
dataIndex: "sex",
- width:150,
+ width: 150,
render: (sex) => {sex === "0" ? "男" : "女"},
- fixed:"left"
+ fixed: "left",
},
{
title: "年龄",
- width:150,
+ width: 150,
dataIndex: "age",
},
{
title: "头像",
dataIndex: "head_img",
- width:150,
+ width: 150,
render: (headImg) => {
+ constructor() {
+ super(HomeConfig)
+ makeObservable(this, {
+ getOgCount: action,
+ ogMap: observable,
+ alist: observable,
+ })
+ }
+
+ async getOgCount() {
+ let res = await baseHttp.get(HomeConfig.os, {});
+ this.ogMap = res.data.record
+ }
+ async getTr() {
+ return await baseHttp.get(HomeConfig.tr, {});
+ }
+
+ async getAf() {
+ return await baseHttp.get(HomeConfig.af, {});
+ }
+ async getMm() {
+ return await baseHttp.get(HomeConfig.mm, {});
+ }
+ async getRm() {
+ return await baseHttp.get(HomeConfig.rm, {});
+ }
+ async getAe() {
+ return await baseHttp.get(HomeConfig.ae, {});
+ }
+ ogMap!: Object;
+ alist!: Array;
+}
+const homeStore = new HomeStore()
+export default homeStore;
+
diff --git a/src/store/index.ts b/src/store/index.ts
index 092c865..0a5f671 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -20,6 +20,7 @@ import { patrolStore } from './patrol';
import { trainingStore } from './training';
import { trainingCatStore } from './trainingCat';
import { sysStore } from './sys';
+import homeStore from './home';
const store = {
usrStore,
@@ -44,6 +45,7 @@ const store = {
trainingStore,
trainingCatStore,
sysStore,
+ homeStore
};
export default store;
\ No newline at end of file
diff --git a/src/store/user.ts b/src/store/user.ts
index 181fb3a..3fdb46b 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -9,6 +9,9 @@ class UserConfig {
static ADD: string = "user"
static DELETE: string = "user"
static EDIT: string = "user"
+ static team: string = "team/list"
+ static per: string = "persMgmt/list"
+
}
class UserStore extends BaseStore {
_userinfo: UserInfos = {}; // 用户信息
@@ -19,12 +22,20 @@ class UserStore extends BaseStore {
makeObservable(this, {
logOut: action,
login: action,
+ getTeam:action,
+ getPer:action,
_userinfo: observable,
isNeedLogin: observable,
openLoginDilog: action,
userInfo: computed,
})
}
+ async getTeam(){
+ return await baseHttp.get(UserConfig.team, null)
+ }
+ async getPer(){
+ return await baseHttp.get(UserConfig.per, null)
+ }
get userInfo(): UserInfos {
if (!this._userinfo.token) {
let token = window.localStorage.getItem("token")
diff --git a/src/ttttt.html b/src/ttttt.html
index 3483cb6..dd13cc3 100644
--- a/src/ttttt.html
+++ b/src/ttttt.html
@@ -34,11 +34,11 @@
pc?.setLocalDescription(offer);
ws.send(JSON.stringify({
type: "offer", "data": {
- "to": "467056",
+ "to": "01J8RT7YMKZNVWTYAECJ55S6W0",
"from": "31283192",
"description": offer,
"media": "video",
- "session_id": "467056-31283192",
+ "session_id": "01J8RT7YMKZNVWTYAECJ55S6W0-31283192",
}
}))
// socketService.send({ type: 'offer', data: offer })
@@ -49,7 +49,7 @@
}
// wss://rw.quwanya.cn/ws
-
+
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
const configuration = {
@@ -126,14 +126,6 @@
pc.addIceCandidate(candidate)
case "answer":
pc?.setRemoteDescription(msg.data.description)
-
- // let answer = JSON.parse(msg.content.body)
- // if (!answer) {
- // return console.log('failed to parse answer')
- // }
- // console.log(answer)
- // this.setOffer(answer.data.description)
- // break;
}
}
diff --git a/src/util/webRtc.ts b/src/util/webRtc.ts
index fd7f23c..93d3cf1 100644
--- a/src/util/webRtc.ts
+++ b/src/util/webRtc.ts
@@ -1,30 +1,38 @@
import SocketService from "./socket";
-const socketService = SocketService.getInstance();
+// const socketService = SocketService.getInstance();
class WebRtc {
private mediaStream: MediaStream | Blob | null = null;
private pee: RTCPeerConnection | null = null;
+ private ws: WebSocket | null = null;
private video: HTMLVideoElement | null = null;
-
+ private userToId: string = "";
+ open = () => {
+ this.ws?.send(JSON.stringify({
+ type: "new", "data": {
+ "name": "admin",
+ "id": "31283192",
+ "user_agent": "flutter-webrtc/js"
+ }
+ }))
+ }
async init() {
- this.video = document.getElementById('rtcVideo') as HTMLVideoElement;
- socketService.on("message", (e) => {
- let msg = JSON.parse(e)
+ this.ws = new WebSocket("ws://rw.quwanya.cn:12217/ws")
+ this.ws.addEventListener('open', this.open);
+ let that = this;
+ this.createOffer()
+ this.ws.onmessage = function (evt) {
+ let msg = JSON.parse(evt.data)
+ if (!msg) {
+ return console.log('failed to parse msg')
+ }
switch (msg.type) {
- case "answer":
- let answer = JSON.parse(msg.content.body)
- if (!answer) {
- return console.log('failed to parse answer')
- }
- console.log(answer)
- this.setOffer(answer.data.description)
- break;
- case "offer":
+ case 'offer':
let offer = msg.data.description
- this.pee?.setRemoteDescription(offer)
- this.pee?.createAnswer().then(answer => {
- this.pee?.setLocalDescription(answer)
- socketService.send(JSON.stringify({
+ that.pee?.setRemoteDescription(offer)
+ that.pee?.createAnswer().then(answer => {
+ that.pee?.setLocalDescription(answer)
+ that.ws?.send(JSON.stringify({
type: 'answer', data: {
'to': msg.data.from,
'from': "31283192",
@@ -33,15 +41,24 @@ class WebRtc {
}
}))
})
- break;
+ return
+
case 'candidate':
- this.pee?.setRemoteDescription(msg.data.description)
+ let candidate = msg.data.candidate
+ if (!candidate) {
+ return console.log('failed to parse candidate')
+ }
+ that.pee?.addIceCandidate(candidate)
break;
- default:
+ case "answer":
+ that.pee?.setRemoteDescription(msg.data.description)
+ break;
+ case "bye":
+ that.pee?.close()
+ that.close()
break;
}
- });
- this.createOffer();
+ }
}
async createOffer() {
try {
@@ -50,6 +67,7 @@ class WebRtc {
};
const peerConnection = new RTCPeerConnection(configuration);
this.pee = peerConnection
+
// 获取远方流添加到页面播放
peerConnection.ontrack = event => {
const remoteVideo = document.querySelector('#remoteVideo') as HTMLVideoElement;
@@ -61,28 +79,33 @@ class WebRtc {
}
};
await this.getMedia(peerConnection)
- this.sendOffer()
+
peerConnection.onicecandidate = e => {
if (!e.candidate) {
return
}
- socketService.send({ type: 'candidate', data: e.candidate })
+ this.ws?.send(JSON.stringify({ type: 'candidate', data: e }))
}
} catch (error) {
console.log(error);
}
}
- sendOffer() {
+ sendOffer(userId) {
let that = this;
+ that.userToId = userId;
+ that.video = document.getElementById('rtcVideo') as HTMLVideoElement;
+ if (that.pee?.connectionState==="closed"){
+ that.createOffer()
+ }
that.pee?.createOffer().then(function (offer) {
that.pee?.setLocalDescription(offer);
- socketService.send(JSON.stringify({
+ that.ws?.send(JSON.stringify({
type: "offer", "data": {
- "to": "848401",
+ "to": userId,
"from": "31283192",
"description": offer,
"media": "video",
- "session_id": "848401-31283192",
+ "session_id": userId + "-31283192",
}
}))
}).catch(function (error) {
@@ -90,11 +113,7 @@ class WebRtc {
console.error(error);
});
}
- setOffer(offer) {
- this.pee?.setRemoteDescription(offer)
- }
addIceCandidate(candidate) {
- console.log('addIceCandidate');
this.pee?.addIceCandidate(candidate)
}
async getMedia(pee: RTCPeerConnection) {
@@ -105,12 +124,12 @@ class WebRtc {
});
this.mediaStream = stream;
stream.getTracks().forEach(track => pee.addTrack(track, stream))
- this.calls();
} catch (error) {
console.log(error);
}
}
- calls() {
+ calls(userId) {
+ this.sendOffer(userId)
if (this.video) {
this.video.srcObject = this.mediaStream;
this.video.autoplay = true;
@@ -120,6 +139,15 @@ class WebRtc {
close() {
this.video?.pause();
+ this.pee?.close();
+ this.ws?.send(JSON.stringify({
+ "type": "bye", "data": {
+ "session_id": this.userToId + "31283192",
+ "to": this.userToId
+ }
+ }
+ ));
+
(this.mediaStream as MediaStream)?.getTracks().forEach(track => track.stop());
}
}
@@ -297,14 +337,17 @@ const OrgChart = () => {
})
)}
{v.depId !== 2 ? (
-
+
);
}
return (
-
+
+
+
) : null}
{renderTree(v.children)}
+ (false);
+
+ useEffect(()=>{
+ homeStore.getOgCount()
+ },[homeStore])
const showModal = () => {
setIsModalOpen(true);
};
@@ -15,12 +22,12 @@ const Orgin = () => {
<>
(false);
- const initChart = () => {
+ const initChart = (data) => {
var myChart = echarts.init(document.getElementById("pover"));
var option = {
xAxis: {
type: "category",
- data: ["基干民兵", "普通民兵", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ data: data.map((item) => item.dep_name),
axisLabel: {
show: true,
interval: 0,
@@ -31,7 +34,7 @@ const Pover = () => {
},
series: [
{
- data: [120, 200, 150, 80, 70, 110, 130],
+ data: data.map((item) => item.count),
type: "bar",
barWidth: 10, // 设置柱子粗细
itemStyle: {
@@ -42,9 +45,12 @@ const Pover = () => {
};
option && myChart.setOption(option);
};
+
useEffect(() => {
- initChart();
- }, []);
+ homeStore.getAf().then((res) => {
+ initChart(res?.data?.record);
+ });
+ }, [homeStore]);
const openPoverHander = () => {
setIsModalOpen(true);
};
@@ -68,10 +74,9 @@ const Pover = () => {
}}
>
+
);
diff --git a/src/pages/home/homeRigrt/pyzx.tsx b/src/pages/home/homeRigrt/pyzx.tsx
new file mode 100644
index 0000000..d117ba4
--- /dev/null
+++ b/src/pages/home/homeRigrt/pyzx.tsx
@@ -0,0 +1,37 @@
+import { inject, observer } from "mobx-react";
+import "./right.less";
+import { Store } from "antd/es/form/interface";
+import { useEffect, useState } from "react";
+const Pyzx = (props: Store) => {
+ const { homeStore } = props;
+ const [user, setUser] = useState
{v.userList?.map((v1, _) => {
return (
(null);
const [tagId, setId] = useState(null);
const [userList, setUserList] = useState>([]);
+ const [data, setData] = useState([]);
+
const columns: ColumnsType = [
{ title: "应急处突名称", dataIndex: "emergency_name" },
{ title: "目标位置", dataIndex: "target_location" },
@@ -27,8 +39,8 @@ const Emergency = (props: Store) => {
{
title: "完成状态",
dataIndex: "status",
- render: (accomplish) =>
- accomplish.status === 0 ? (
+ render: (status) =>
+ status === 0 ? (
进行中
) : (
已完成
@@ -62,7 +74,7 @@ const Emergency = (props: Store) => {
danger
size="small"
onClick={() => {
- dele(record)
+ dele(record);
}}
>
删除
@@ -71,12 +83,12 @@ const Emergency = (props: Store) => {
),
},
];
- const dele = (record)=>{
+ const dele = (record) => {
emergencyStore.deleteItem(record.identity);
- }
+ };
const edit = (record) => {
setProjectConfig(defaultConfig);
-
+
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
@@ -130,7 +142,7 @@ const Emergency = (props: Store) => {
},
{
type: FormType.map,
- label: "坐标信息",
+ label: "坐标信息",
name: "marker",
value: "",
rules: [{ required: true, message: "请输入任务描述!" }],
@@ -145,6 +157,21 @@ const Emergency = (props: Store) => {
},
];
const onFinishFailed = () => {};
+ const handleSearch = (newValue: string) => {
+ if (newValue === "") return;
+ baseHttp.get("/supplies/list/serch", { name: newValue }).then((res) => {
+ let data = res.data?.record ?? [];
+ data.forEach((item) => {
+ item.text = item.name;
+ item.value = item.identity;
+ });
+ setData(data ?? []);
+ });
+ };
+
+ const handleChange = (newValue: string) => {
+ // setValue(newValue);
+ };
// 用户选择回调
return (
{
+ onClick={(items) => {
callphone(item);
}}
/>
diff --git a/src/pages/home/homeLeft/home_left.tsx b/src/pages/home/homeLeft/home_left.tsx
index 3224d44..2295243 100644
--- a/src/pages/home/homeLeft/home_left.tsx
+++ b/src/pages/home/homeLeft/home_left.tsx
@@ -5,25 +5,24 @@ import "./left.less";
import * as echarts from "echarts";
import Orgin from "./orgin";
import Pover from "./pover";
-const HomeLeft = () => {
+import { inject, observer } from "mobx-react";
+import { Store } from "antd/es/form/interface";
+const HomeLeft = (props: Store) => {
+ const { homeStore } = props;
const [isModalOpen, setIsModalOpen] = useState(false);
- const initChart = () => {
+ const initChart = (data) => {
var myChart = echarts.init(document.getElementById("xunlian"));
var option = {
xAxis: {
type: "category",
- data: ["应急抢险", "消防灭火", "水上救援", "民兵训练", "维稳处突"],
+ data: data.map((item) => item.name),
axisLabel: {
show: true,
interval: 0,
rotate: 30,
},
},
- grid: {
- top: "10%",
- bottom: "45%",
- right: "5%",
- },
+ grid: {top: "10%",bottom: "45%",right: "5%"},
yAxis: {
type: "value",
splitLine: {
@@ -32,7 +31,7 @@ const HomeLeft = () => {
},
series: [
{
- data: [10, 15, 27, 10, 18],
+ data: data.map((item) => item.count),
type: "line",
smooth: true,
areaStyle: {
@@ -55,8 +54,10 @@ const HomeLeft = () => {
};
useEffect(() => {
- initChart();
- }, []);
+ homeStore.getTr().then((res) => {
+ initChart(res.data.record);
+ });
+ }, [homeStore]);
// const openDispatch = () => {
// 位置移动
@@ -108,5 +109,4 @@ const HomeLeft = () => {
);
};
-
-export default HomeLeft;
+export default inject("homeStore")(observer(HomeLeft));
diff --git a/src/pages/home/homeLeft/left.less b/src/pages/home/homeLeft/left.less
index 0c0b4b8..eaf1a68 100644
--- a/src/pages/home/homeLeft/left.less
+++ b/src/pages/home/homeLeft/left.less
@@ -3,6 +3,7 @@
color: #fff;
height: 100%;
display: flex;
+ overflow-y: hidden;
flex-direction: column;
.org{
flex:1;
@@ -10,7 +11,6 @@
overflow-y: hidden;
text-align: center;
.org_head{
- width: 100%;
background-image: url("../../../static/titie_secend@1x.png");
background-size: 100% 50px;
background-repeat: no-repeat;
diff --git a/src/pages/home/homeLeft/orgin.tsx b/src/pages/home/homeLeft/orgin.tsx
index bbb65bb..2f16040 100644
--- a/src/pages/home/homeLeft/orgin.tsx
+++ b/src/pages/home/homeLeft/orgin.tsx
@@ -2,9 +2,16 @@ import OrgChart from "@/pages/OrgChart";
import origin from "@/static/orgin.png";
import origin2 from "@/static/orgin2.png";
import { Modal } from "antd";
-import { useState } from "react";
-const Orgin = () => {
+import { Store } from "antd/es/form/interface";
+import { inject, observer } from "mobx-react";
+import { useEffect, useState } from "react";
+const Orgin = (props:Store) => {
+ const {homeStore} = props;
const [isModalOpen, setIsModalOpen] = useState
@@ -323,7 +366,7 @@ const OrgChart = () => {
);
};
- return {renderTree(data)}
;
+ return {renderTree(data)}
;
};
export default OrgChart;
diff --git a/src/pages/emergency/index.tsx b/src/pages/emergency/index.tsx
index 9dbd1ba..beaffe0 100644
--- a/src/pages/emergency/index.tsx
+++ b/src/pages/emergency/index.tsx
@@ -1,4 +1,13 @@
-import { Button, Space, Modal, FormInstance } from "antd";
+import {
+ Button,
+ Space,
+ Modal,
+ FormInstance,
+ Form,
+ InputNumber,
+ Select,
+ SelectProps,
+} from "antd";
import { inject, observer } from "mobx-react";
import type { ColumnsType } from "antd/es/table";
import BTable from "@/components/b_table";
@@ -9,6 +18,7 @@ import SimpleForm from "@/components/form/simple_form";
import React from "react";
import { FormType } from "@/components/form/interface";
import baseHttp from "@/service/base";
+import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
const Emergency = (props: Store) => {
const { emergencyStore } = props;
@@ -18,6 +28,8 @@ const Emergency = (props: Store) => {
const [record, setRecord] = useState
@@ -173,7 +200,7 @@ const Emergency = (props: Store) => {
open={isModalOpen}
afterClose={() => formRef.current?.resetFields()}
onOk={() => formRef.current?.submit()}
- okText="确定"
+ okText="确定"
cancelText="取消"
onCancel={() => {
setId(null);
@@ -191,8 +218,63 @@ const Emergency = (props: Store) => {
formDatas={projectConfig}
onFinish={onFinish}
initialValues={true}
+ childrenPosi={true}
onFinishFailed={onFinishFailed}
- />
+ >
+
+ {(fields, { add, remove }) => (
+ <>
+ {fields.map(({ key, name, ...restField }) => (
+ <>
+
+
+
+
+ remove(name)} />
+
+ ))}
+
+
+
+ )}
+
+
diff --git a/src/pages/home/homeBottom/ec.tsx b/src/pages/home/homeBottom/ec.tsx
index 6e6304c..7a4987e 100644
--- a/src/pages/home/homeBottom/ec.tsx
+++ b/src/pages/home/homeBottom/ec.tsx
@@ -13,14 +13,14 @@ const Ec = (props: Store) => {
useEffect(() => {
usrStore.getlist().then(() => {
setUserList(usrStore.list);
+ webRTC.init();
});
}, [usrStore]);
const openDispatch = () => {
setIsModalOpen(true);
};
const callphone = (record: any) => {
- webRTC.init();
- webRTC.calls();
+ webRTC.calls(record.identity);
};
return (
<>
@@ -52,7 +52,7 @@ const Ec = (props: Store) => {
点击呼叫：
+
+
+
- 234
+ {homeStore.ogMap?.count??0}
党组织数量
- 238
+ {homeStore.ogMap?.member_count??0}
@@ -41,4 +48,4 @@ const Orgin = () => {
);
};
-export default Orgin;
+export default inject("homeStore")(observer(Orgin));
diff --git a/src/pages/home/homeLeft/pover.tsx b/src/pages/home/homeLeft/pover.tsx
index ff9286e..5b2032b 100644
--- a/src/pages/home/homeLeft/pover.tsx
+++ b/src/pages/home/homeLeft/pover.tsx
@@ -1,16 +1,19 @@
import PoverPage from "@/pages/poverPage";
import { Modal } from "antd";
+import { Store } from "antd/es/form/interface";
import * as echarts from "echarts";
+import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
-const Pover = () => {
+const Pover = (props: Store) => {
+ const { homeStore } = props;
const [isModalOpen, setIsModalOpen] = useState党员数量
cascsa
*/} ); }; -export default Pover; +export default inject("homeStore")(observer(Pover)); diff --git a/src/pages/home/homeRigrt/ac.tsx b/src/pages/home/homeRigrt/ac.tsx new file mode 100644 index 0000000..7a9f0ef --- /dev/null +++ b/src/pages/home/homeRigrt/ac.tsx @@ -0,0 +1,61 @@ +import { Store } from "antd/es/form/interface"; +import * as echarts from "echarts"; +import { inject, observer } from "mobx-react"; +import { useEffect } from "react"; +const Ac = (props: Store) => { + const { homeStore } = props; + + const initChart = (data) => { + var myChart = echarts.init(document.getElementById("rm")); + var option = { + legend: { + top: "5%", + right: "right", + textStyle: { + color: "#fff", + }, + formatter: function (name) { + let v; + data.forEach((item) => { + if (item.name === name) { + v = item.value; + } + }); + return name + "-" + v; + }, + orient: "vertical", // 垂直排列 + type: "scroll", //分页类型 + pageIconColor: "#ff781f", //翻页箭头颜色 + pageTextStyle: { + color: "#999", //翻页数字颜色 + }, //翻页数字设置 + pageIconSize: 10, + }, + series: [ + { + center: ["30%", "40%"], + name: "Access From", + type: "pie", + radius: ["40%", "60%"], + label: { + backgroundColor: "#F6F8FC", + borderColor: "#8C8D8E", + borderWidth: 0, + show: false, + borderRadius: 4, + }, + data, + }, + ], + }; + option && myChart.setOption(option); + }; + useEffect(() => { + homeStore.getRm().then((res) => { + initChart(res.data?.record); + }); + + }, [homeStore]); + return ; +}; +export default inject("homeStore")(observer(Ac)); diff --git a/src/pages/home/homeRigrt/home_right.tsx b/src/pages/home/homeRigrt/home_right.tsx index 585ed5e..88c8c19 100644 --- a/src/pages/home/homeRigrt/home_right.tsx +++ b/src/pages/home/homeRigrt/home_right.tsx @@ -1,3 +1,5 @@ +import Ac from "./ac"; +import Pyzx from "./pyzx"; import "./right.less"; import Wz from "./wz"; const HomeRight = () => { @@ -13,11 +15,13 @@ const HomeRight = () => {档案管理
评优争先
+ {user?.map((item) => {
+ return (
+
+ );
+};
+
+export default inject("homeStore")(observer(Pyzx));
diff --git a/src/pages/home/homeRigrt/right.less b/src/pages/home/homeRigrt/right.less
index 9f8ed02..4154fd9 100644
--- a/src/pages/home/homeRigrt/right.less
+++ b/src/pages/home/homeRigrt/right.less
@@ -10,7 +10,6 @@
overflow-y: hidden;
text-align: center;
.org_head {
- width: 100%;
background-image: url("../../../static/titie_secend@1x.png");
background-size: 100% 50px;
background-repeat: no-repeat;
@@ -21,3 +20,21 @@
}
}
}
+
+.pyzx{
+ height: 100%;
+ padding: 10px;
+ .pyzx_title{
+ display: flex;
+ padding: 5px 4px;
+ align-items: start;
+ background: rgba(37, 52, 70, 0.4);
+ .content{
+ text-align: left;
+ font-size: 13px;
+ }
+ >img{
+ margin-right: 10px;
+ }
+ }
+}
diff --git a/src/pages/home/homeRigrt/wz.tsx b/src/pages/home/homeRigrt/wz.tsx
index d4d2cd2..8c94739 100644
--- a/src/pages/home/homeRigrt/wz.tsx
+++ b/src/pages/home/homeRigrt/wz.tsx
@@ -1,89 +1,56 @@
+import { Store } from "antd/es/form/interface";
import * as echarts from "echarts";
+import { inject, observer } from "mobx-react";
import { useEffect } from "react";
-const Wz = () => {
- const initChart = () => {
+const Wz = (props: Store) => {
+ const { homeStore } = props;
+
+ const initChart = (data) => {
var myChart = echarts.init(document.getElementById("wz"));
var option = {
- tooltip: {
- trigger: "item",
- formatter: "{a}
+ 
+
+ );
+ })}
+
+
+
+ 姓名:{item.user_name}
+ 总积分:{item.scores}
+ 职位:{item.pos_held}
+ 自我描述:{item.remark}
+ {b}: {c} ({d}%)", + legend: { + top: '5%', + right: 'right', + textStyle :{ + color: "#fff" + }, + formatter: function (name) { + let v; + data.forEach((item) => { + if (item.name === name) { + v = item.value; + } + }); + return name + '-' + v; + }, + }, - series: [ { - center: ["50%", "40%"], + center: ["35%", "40%"], name: "Access From", type: "pie", - selectedMode: "single", - radius: [0, "30%"], + radius: ["40%", "60%"], label: { - position: "inner", - fontSize: 10, - }, - labelLine: { - show: false, - }, - data: [ - { value: 1548, name: "Search Engine" }, - { value: 775, name: "Direct" }, - { value: 679, name: "Marketing", selected: true }, - ], - }, - { - center: ["50%", "40%"], - name: "Access From", - type: "pie", - radius: ["45%", "60%"], - labelLine: { - length: 30, - show: false, - }, - label: { - formatter: "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ", backgroundColor: "#F6F8FC", borderColor: "#8C8D8E", borderWidth: 0, - show: false, + show: true, borderRadius: 4, - rich: { - a: { - color: "#6E7079", - lineHeight: 22, - align: "center", - }, - b: { - color: "#4C5058", - fontSize: 14, - fontWeight: "bold", - lineHeight: 33, - }, - per: { - color: "#fff", - backgroundColor: "#4C5058", - padding: [3, 4], - borderRadius: 4, - }, - }, }, - data: [ - { value: 1048, name: "Baidu" }, - { value: 335, name: "Direct" }, - { value: 310, name: "Email" }, - { value: 251, name: "Google" }, - { value: 234, name: "Union Ads" }, - { value: 147, name: "Bing" }, - { value: 135, name: "Video Ads" }, - { value: 102, name: "Others" }, - ], + data }, ], }; option && myChart.setOption(option); }; useEffect(() => { - initChart(); - }, []); + homeStore.getMm().then((res) => { + initChart(res.data?.record); + }) + + }, [homeStore]); return ; }; - -export default Wz; +export default inject("homeStore")(observer(Wz)); +// export default Wz; diff --git a/src/pages/materialMgmt/material.tsx b/src/pages/materialMgmt/material.tsx index 68284af..39e075d 100644 --- a/src/pages/materialMgmt/material.tsx +++ b/src/pages/materialMgmt/material.tsx @@ -1,4 +1,13 @@ -import { Button, Space, Modal, FormInstance, Select } from "antd"; +import { + Button, + Space, + Modal, + FormInstance, + Select, + Popconfirm, + PopconfirmProps, + message, +} from "antd"; import { inject, observer } from "mobx-react"; import BTable from "@/components/b_table"; import { useEffect, useState } from "react"; @@ -56,16 +65,54 @@ const Material = (props: Store) => { 编辑 - + 物资出库 + */} +
+
+
+