add
This commit is contained in:
zmj
parent
c2260624cb
commit
8aefab2124
9
package-lock.json
generated
9
package-lock.json
generated
@ -18,6 +18,7 @@
|
||||
"echarts": "^5.3.3",
|
||||
"element-plus": "^2.2.9",
|
||||
"highlight.js": "^11.6.0",
|
||||
"moment": "^2.30.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.14",
|
||||
"vue": "^3.2.37",
|
||||
@ -5210,6 +5211,14 @@
|
||||
"pkg-types": "^0.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"echarts": "^5.3.3",
|
||||
"element-plus": "^2.2.9",
|
||||
"highlight.js": "^11.6.0",
|
||||
"moment": "^2.30.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.14",
|
||||
"vue": "^3.2.37",
|
||||
|
||||
@ -116,3 +116,11 @@ export function apistatismarketing_statisticscustom(params: any) {
|
||||
export function apistatismarketing_statisticscontract(params: any) {
|
||||
return request.get({ url: '/marketing.marketing_statistics/contract', params })
|
||||
}
|
||||
|
||||
export function apistatismarketingStatistics(params: any) {
|
||||
return request.get({ url: '/marketing.marketing_statistics/index', params })
|
||||
}
|
||||
|
||||
export function apistatisfinancialStatistics(params: any) {
|
||||
return request.get({ url: '/financial.financial_statistics/index', params })
|
||||
}
|
||||
539
src/assets/iconfont/demo.css
Normal file
539
src/assets/iconfont/demo.css
Normal file
@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
1752
src/assets/iconfont/demo_index.html
Normal file
1752
src/assets/iconfont/demo_index.html
Normal file
File diff suppressed because it is too large
Load Diff
287
src/assets/iconfont/iconfont.css
Normal file
287
src/assets/iconfont/iconfont.css
Normal file
@ -0,0 +1,287 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4573174 */
|
||||
src: url('iconfont.woff2?t=1718867101197') format('woff2'),
|
||||
url('iconfont.woff?t=1718867101197') format('woff'),
|
||||
url('iconfont.ttf?t=1718867101197') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-RectangleCopy48:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy52:before {
|
||||
content: "\e6c0";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy55:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy56:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy57:before {
|
||||
content: "\e6c9";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy58:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy61:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy62:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy63:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy64:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy65:before {
|
||||
content: "\e6dc";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy66:before {
|
||||
content: "\e6e1";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy49:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy50:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy51:before {
|
||||
content: "\e6bf";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy53:before {
|
||||
content: "\e6c1";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy54:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy59:before {
|
||||
content: "\e6dd";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy60:before {
|
||||
content: "\e6de";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy37:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy38:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy39:before {
|
||||
content: "\e6a8";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy40:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy41:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy42:before {
|
||||
content: "\e6ab";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy43:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy44:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy45:before {
|
||||
content: "\e6ae";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy46:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy47:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy1:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy2:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy3:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy4:before {
|
||||
content: "\e6a5";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy5:before {
|
||||
content: "\e6b0";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy6:before {
|
||||
content: "\e6b1";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy7:before {
|
||||
content: "\e6b2";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy8:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy9:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy10:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy11:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy12:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy13:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy14:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy15:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy16:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy17:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy18:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy19:before {
|
||||
content: "\e6c8";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy20:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy21:before {
|
||||
content: "\e6d8";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy22:before {
|
||||
content: "\e6da";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy23:before {
|
||||
content: "\e6e0";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy24:before {
|
||||
content: "\e6df";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy25:before {
|
||||
content: "\e6e2";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy26:before {
|
||||
content: "\e6e3";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy27:before {
|
||||
content: "\e6e4";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy28:before {
|
||||
content: "\e6e5";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy29:before {
|
||||
content: "\e6e6";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy30:before {
|
||||
content: "\e6e7";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy31:before {
|
||||
content: "\e6e8";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy32:before {
|
||||
content: "\e6e9";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy33:before {
|
||||
content: "\e6ea";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy34:before {
|
||||
content: "\e6eb";
|
||||
}
|
||||
|
||||
.icon-dingwei:before {
|
||||
content: "\e6ec";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy35:before {
|
||||
content: "\e6ed";
|
||||
}
|
||||
|
||||
.icon-RectangleCopy36:before {
|
||||
content: "\e6ee";
|
||||
}
|
||||
|
||||
1
src/assets/iconfont/iconfont.js
Normal file
1
src/assets/iconfont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
485
src/assets/iconfont/iconfont.json
Normal file
485
src/assets/iconfont/iconfont.json
Normal file
@ -0,0 +1,485 @@
|
||||
{
|
||||
"id": "4573174",
|
||||
"name": "多门店",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "7551479",
|
||||
"name": "结算",
|
||||
"font_class": "RectangleCopy48",
|
||||
"unicode": "e6bc",
|
||||
"unicode_decimal": 59068
|
||||
},
|
||||
{
|
||||
"icon_id": "7551480",
|
||||
"name": "结算报表",
|
||||
"font_class": "RectangleCopy52",
|
||||
"unicode": "e6c0",
|
||||
"unicode_decimal": 59072
|
||||
},
|
||||
{
|
||||
"icon_id": "7551481",
|
||||
"name": "结算单",
|
||||
"font_class": "RectangleCopy55",
|
||||
"unicode": "e6c5",
|
||||
"unicode_decimal": 59077
|
||||
},
|
||||
{
|
||||
"icon_id": "7551482",
|
||||
"name": "结算管理",
|
||||
"font_class": "RectangleCopy56",
|
||||
"unicode": "e6c7",
|
||||
"unicode_decimal": 59079
|
||||
},
|
||||
{
|
||||
"icon_id": "7551483",
|
||||
"name": "返利规则",
|
||||
"font_class": "RectangleCopy57",
|
||||
"unicode": "e6c9",
|
||||
"unicode_decimal": 59081
|
||||
},
|
||||
{
|
||||
"icon_id": "7551484",
|
||||
"name": "月结",
|
||||
"font_class": "RectangleCopy58",
|
||||
"unicode": "e6ca",
|
||||
"unicode_decimal": 59082
|
||||
},
|
||||
{
|
||||
"icon_id": "7551485",
|
||||
"name": "结算单管理",
|
||||
"font_class": "RectangleCopy61",
|
||||
"unicode": "e6cb",
|
||||
"unicode_decimal": 59083
|
||||
},
|
||||
{
|
||||
"icon_id": "7551488",
|
||||
"name": "月结管理",
|
||||
"font_class": "RectangleCopy62",
|
||||
"unicode": "e6cc",
|
||||
"unicode_decimal": 59084
|
||||
},
|
||||
{
|
||||
"icon_id": "7552701",
|
||||
"name": "智慧销售",
|
||||
"font_class": "RectangleCopy63",
|
||||
"unicode": "e6d0",
|
||||
"unicode_decimal": 59088
|
||||
},
|
||||
{
|
||||
"icon_id": "7552703",
|
||||
"name": "智慧销售管理",
|
||||
"font_class": "RectangleCopy64",
|
||||
"unicode": "e6d2",
|
||||
"unicode_decimal": 59090
|
||||
},
|
||||
{
|
||||
"icon_id": "7553621",
|
||||
"name": "后端商品毛利",
|
||||
"font_class": "RectangleCopy65",
|
||||
"unicode": "e6dc",
|
||||
"unicode_decimal": 59100
|
||||
},
|
||||
{
|
||||
"icon_id": "7553622",
|
||||
"name": "成本查询",
|
||||
"font_class": "RectangleCopy66",
|
||||
"unicode": "e6e1",
|
||||
"unicode_decimal": 59105
|
||||
},
|
||||
{
|
||||
"icon_id": "7549358",
|
||||
"name": "流量",
|
||||
"font_class": "RectangleCopy49",
|
||||
"unicode": "e6bd",
|
||||
"unicode_decimal": 59069
|
||||
},
|
||||
{
|
||||
"icon_id": "7551129",
|
||||
"name": "供应商",
|
||||
"font_class": "RectangleCopy50",
|
||||
"unicode": "e6be",
|
||||
"unicode_decimal": 59070
|
||||
},
|
||||
{
|
||||
"icon_id": "7551130",
|
||||
"name": "分销商",
|
||||
"font_class": "RectangleCopy51",
|
||||
"unicode": "e6bf",
|
||||
"unicode_decimal": 59071
|
||||
},
|
||||
{
|
||||
"icon_id": "7551132",
|
||||
"name": "人群",
|
||||
"font_class": "RectangleCopy53",
|
||||
"unicode": "e6c1",
|
||||
"unicode_decimal": 59073
|
||||
},
|
||||
{
|
||||
"icon_id": "7551133",
|
||||
"name": "人群管理",
|
||||
"font_class": "RectangleCopy54",
|
||||
"unicode": "e6c4",
|
||||
"unicode_decimal": 59076
|
||||
},
|
||||
{
|
||||
"icon_id": "7553624",
|
||||
"name": "分销商结算",
|
||||
"font_class": "RectangleCopy59",
|
||||
"unicode": "e6dd",
|
||||
"unicode_decimal": 59101
|
||||
},
|
||||
{
|
||||
"icon_id": "7553627",
|
||||
"name": "商家数据",
|
||||
"font_class": "RectangleCopy60",
|
||||
"unicode": "e6de",
|
||||
"unicode_decimal": 59102
|
||||
},
|
||||
{
|
||||
"icon_id": "7549348",
|
||||
"name": "搜索",
|
||||
"font_class": "RectangleCopy37",
|
||||
"unicode": "e6a6",
|
||||
"unicode_decimal": 59046
|
||||
},
|
||||
{
|
||||
"icon_id": "7549364",
|
||||
"name": "协同",
|
||||
"font_class": "RectangleCopy38",
|
||||
"unicode": "e6a7",
|
||||
"unicode_decimal": 59047
|
||||
},
|
||||
{
|
||||
"icon_id": "7549373",
|
||||
"name": "招商",
|
||||
"font_class": "RectangleCopy39",
|
||||
"unicode": "e6a8",
|
||||
"unicode_decimal": 59048
|
||||
},
|
||||
{
|
||||
"icon_id": "7549816",
|
||||
"name": "商品",
|
||||
"font_class": "RectangleCopy40",
|
||||
"unicode": "e6a9",
|
||||
"unicode_decimal": 59049
|
||||
},
|
||||
{
|
||||
"icon_id": "7549817",
|
||||
"name": "单据",
|
||||
"font_class": "RectangleCopy41",
|
||||
"unicode": "e6aa",
|
||||
"unicode_decimal": 59050
|
||||
},
|
||||
{
|
||||
"icon_id": "7549828",
|
||||
"name": "工具箱",
|
||||
"font_class": "RectangleCopy42",
|
||||
"unicode": "e6ab",
|
||||
"unicode_decimal": 59051
|
||||
},
|
||||
{
|
||||
"icon_id": "7549832",
|
||||
"name": "券",
|
||||
"font_class": "RectangleCopy43",
|
||||
"unicode": "e6ac",
|
||||
"unicode_decimal": 59052
|
||||
},
|
||||
{
|
||||
"icon_id": "7549842",
|
||||
"name": "平台",
|
||||
"font_class": "RectangleCopy44",
|
||||
"unicode": "e6ad",
|
||||
"unicode_decimal": 59053
|
||||
},
|
||||
{
|
||||
"icon_id": "7549845",
|
||||
"name": "经销",
|
||||
"font_class": "RectangleCopy45",
|
||||
"unicode": "e6ae",
|
||||
"unicode_decimal": 59054
|
||||
},
|
||||
{
|
||||
"icon_id": "7549851",
|
||||
"name": "资源",
|
||||
"font_class": "RectangleCopy46",
|
||||
"unicode": "e6af",
|
||||
"unicode_decimal": 59055
|
||||
},
|
||||
{
|
||||
"icon_id": "7550034",
|
||||
"name": "货",
|
||||
"font_class": "RectangleCopy47",
|
||||
"unicode": "e6bb",
|
||||
"unicode_decimal": 59067
|
||||
},
|
||||
{
|
||||
"icon_id": "7549350",
|
||||
"name": "用户",
|
||||
"font_class": "RectangleCopy",
|
||||
"unicode": "e6a3",
|
||||
"unicode_decimal": 59043
|
||||
},
|
||||
{
|
||||
"icon_id": "7549351",
|
||||
"name": "安全",
|
||||
"font_class": "RectangleCopy1",
|
||||
"unicode": "e6a2",
|
||||
"unicode_decimal": 59042
|
||||
},
|
||||
{
|
||||
"icon_id": "7549352",
|
||||
"name": "数据",
|
||||
"font_class": "RectangleCopy2",
|
||||
"unicode": "e6a4",
|
||||
"unicode_decimal": 59044
|
||||
},
|
||||
{
|
||||
"icon_id": "7549353",
|
||||
"name": "疑问",
|
||||
"font_class": "RectangleCopy3",
|
||||
"unicode": "e6a1",
|
||||
"unicode_decimal": 59041
|
||||
},
|
||||
{
|
||||
"icon_id": "7549355",
|
||||
"name": "调拨",
|
||||
"font_class": "RectangleCopy4",
|
||||
"unicode": "e6a5",
|
||||
"unicode_decimal": 59045
|
||||
},
|
||||
{
|
||||
"icon_id": "7551131",
|
||||
"name": "用户管理",
|
||||
"font_class": "RectangleCopy5",
|
||||
"unicode": "e6b0",
|
||||
"unicode_decimal": 59056
|
||||
},
|
||||
{
|
||||
"icon_id": "7551134",
|
||||
"name": "商家管理",
|
||||
"font_class": "RectangleCopy6",
|
||||
"unicode": "e6b1",
|
||||
"unicode_decimal": 59057
|
||||
},
|
||||
{
|
||||
"icon_id": "7551135",
|
||||
"name": "分销商管理",
|
||||
"font_class": "RectangleCopy7",
|
||||
"unicode": "e6b2",
|
||||
"unicode_decimal": 59058
|
||||
},
|
||||
{
|
||||
"icon_id": "7551136",
|
||||
"name": "商家",
|
||||
"font_class": "RectangleCopy8",
|
||||
"unicode": "e6b3",
|
||||
"unicode_decimal": 59059
|
||||
},
|
||||
{
|
||||
"icon_id": "7551137",
|
||||
"name": "供应商管理",
|
||||
"font_class": "RectangleCopy9",
|
||||
"unicode": "e6b4",
|
||||
"unicode_decimal": 59060
|
||||
},
|
||||
{
|
||||
"icon_id": "7551213",
|
||||
"name": "商品管理",
|
||||
"font_class": "RectangleCopy10",
|
||||
"unicode": "e6b5",
|
||||
"unicode_decimal": 59061
|
||||
},
|
||||
{
|
||||
"icon_id": "7551217",
|
||||
"name": "商品复制",
|
||||
"font_class": "RectangleCopy11",
|
||||
"unicode": "e6b6",
|
||||
"unicode_decimal": 59062
|
||||
},
|
||||
{
|
||||
"icon_id": "7551346",
|
||||
"name": "采购单",
|
||||
"font_class": "RectangleCopy12",
|
||||
"unicode": "e6b7",
|
||||
"unicode_decimal": 59063
|
||||
},
|
||||
{
|
||||
"icon_id": "7551349",
|
||||
"name": "采购价管理",
|
||||
"font_class": "RectangleCopy13",
|
||||
"unicode": "e6b8",
|
||||
"unicode_decimal": 59064
|
||||
},
|
||||
{
|
||||
"icon_id": "7551477",
|
||||
"name": "定价",
|
||||
"font_class": "RectangleCopy14",
|
||||
"unicode": "e6b9",
|
||||
"unicode_decimal": 59065
|
||||
},
|
||||
{
|
||||
"icon_id": "7551486",
|
||||
"name": "结算报表",
|
||||
"font_class": "RectangleCopy15",
|
||||
"unicode": "e6ba",
|
||||
"unicode_decimal": 59066
|
||||
},
|
||||
{
|
||||
"icon_id": "7552198",
|
||||
"name": "入库",
|
||||
"font_class": "RectangleCopy16",
|
||||
"unicode": "e6c2",
|
||||
"unicode_decimal": 59074
|
||||
},
|
||||
{
|
||||
"icon_id": "7552199",
|
||||
"name": "库存管理",
|
||||
"font_class": "RectangleCopy17",
|
||||
"unicode": "e6c3",
|
||||
"unicode_decimal": 59075
|
||||
},
|
||||
{
|
||||
"icon_id": "7552213",
|
||||
"name": "出入库管理",
|
||||
"font_class": "RectangleCopy18",
|
||||
"unicode": "e6c6",
|
||||
"unicode_decimal": 59078
|
||||
},
|
||||
{
|
||||
"icon_id": "7552217",
|
||||
"name": "退仓管理",
|
||||
"font_class": "RectangleCopy19",
|
||||
"unicode": "e6c8",
|
||||
"unicode_decimal": 59080
|
||||
},
|
||||
{
|
||||
"icon_id": "7552702",
|
||||
"name": "合同",
|
||||
"font_class": "RectangleCopy20",
|
||||
"unicode": "e6d1",
|
||||
"unicode_decimal": 59089
|
||||
},
|
||||
{
|
||||
"icon_id": "7553176",
|
||||
"name": "商品计划",
|
||||
"font_class": "RectangleCopy21",
|
||||
"unicode": "e6d8",
|
||||
"unicode_decimal": 59096
|
||||
},
|
||||
{
|
||||
"icon_id": "7553184",
|
||||
"name": "销量计划",
|
||||
"font_class": "RectangleCopy22",
|
||||
"unicode": "e6da",
|
||||
"unicode_decimal": 59098
|
||||
},
|
||||
{
|
||||
"icon_id": "7553638",
|
||||
"name": "销量实时看板",
|
||||
"font_class": "RectangleCopy23",
|
||||
"unicode": "e6e0",
|
||||
"unicode_decimal": 59104
|
||||
},
|
||||
{
|
||||
"icon_id": "7553639",
|
||||
"name": "结算效率分析",
|
||||
"font_class": "RectangleCopy24",
|
||||
"unicode": "e6df",
|
||||
"unicode_decimal": 59103
|
||||
},
|
||||
{
|
||||
"icon_id": "7553644",
|
||||
"name": "营销流量配置",
|
||||
"font_class": "RectangleCopy25",
|
||||
"unicode": "e6e2",
|
||||
"unicode_decimal": 59106
|
||||
},
|
||||
{
|
||||
"icon_id": "7553645",
|
||||
"name": "运营工具",
|
||||
"font_class": "RectangleCopy26",
|
||||
"unicode": "e6e3",
|
||||
"unicode_decimal": 59107
|
||||
},
|
||||
{
|
||||
"icon_id": "7553649",
|
||||
"name": "目标管理",
|
||||
"font_class": "RectangleCopy27",
|
||||
"unicode": "e6e4",
|
||||
"unicode_decimal": 59108
|
||||
},
|
||||
{
|
||||
"icon_id": "7553650",
|
||||
"name": "目标制定",
|
||||
"font_class": "RectangleCopy28",
|
||||
"unicode": "e6e5",
|
||||
"unicode_decimal": 59109
|
||||
},
|
||||
{
|
||||
"icon_id": "7553651",
|
||||
"name": "活动协同",
|
||||
"font_class": "RectangleCopy29",
|
||||
"unicode": "e6e6",
|
||||
"unicode_decimal": 59110
|
||||
},
|
||||
{
|
||||
"icon_id": "7553656",
|
||||
"name": "目标监控",
|
||||
"font_class": "RectangleCopy30",
|
||||
"unicode": "e6e7",
|
||||
"unicode_decimal": 59111
|
||||
},
|
||||
{
|
||||
"icon_id": "7553662",
|
||||
"name": "增值服务",
|
||||
"font_class": "RectangleCopy31",
|
||||
"unicode": "e6e8",
|
||||
"unicode_decimal": 59112
|
||||
},
|
||||
{
|
||||
"icon_id": "7553667",
|
||||
"name": "全链路可售",
|
||||
"font_class": "RectangleCopy32",
|
||||
"unicode": "e6e9",
|
||||
"unicode_decimal": 59113
|
||||
},
|
||||
{
|
||||
"icon_id": "7553669",
|
||||
"name": "超级服务",
|
||||
"font_class": "RectangleCopy33",
|
||||
"unicode": "e6ea",
|
||||
"unicode_decimal": 59114
|
||||
},
|
||||
{
|
||||
"icon_id": "7553918",
|
||||
"name": "上门取货",
|
||||
"font_class": "RectangleCopy34",
|
||||
"unicode": "e6eb",
|
||||
"unicode_decimal": 59115
|
||||
},
|
||||
{
|
||||
"icon_id": "7562286",
|
||||
"name": "定位",
|
||||
"font_class": "dingwei",
|
||||
"unicode": "e6ec",
|
||||
"unicode_decimal": 59116
|
||||
},
|
||||
{
|
||||
"icon_id": "7733536",
|
||||
"name": "预约",
|
||||
"font_class": "RectangleCopy35",
|
||||
"unicode": "e6ed",
|
||||
"unicode_decimal": 59117
|
||||
},
|
||||
{
|
||||
"icon_id": "7733537",
|
||||
"name": "物流",
|
||||
"font_class": "RectangleCopy36",
|
||||
"unicode": "e6ee",
|
||||
"unicode_decimal": 59118
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
src/assets/iconfont/iconfont.ttf
Normal file
BIN
src/assets/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/iconfont/iconfont.woff
Normal file
BIN
src/assets/iconfont/iconfont.woff
Normal file
Binary file not shown.
BIN
src/assets/iconfont/iconfont.woff2
Normal file
BIN
src/assets/iconfont/iconfont.woff2
Normal file
Binary file not shown.
47
src/components/iconfont/index.vue
Normal file
47
src/components/iconfont/index.vue
Normal file
@ -0,0 +1,47 @@
|
||||
|
||||
<template>
|
||||
<svg :class="svgClass" aria-hidden="true">
|
||||
<use :xlink:href="iconClassName" :fill="white ? '#fff' : color" />
|
||||
</svg>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
const props = defineProps({
|
||||
iconName: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
white: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
// 图标在 iconfont 中的名字
|
||||
const iconClassName = computed(()=>{
|
||||
return `#icon-${props.iconName}`;
|
||||
})
|
||||
// 给图标添加上类名
|
||||
const svgClass = computed(() => {
|
||||
if (props.className) {
|
||||
return `svg-icon ${props.className}`;
|
||||
}
|
||||
return 'svg-icon';
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
fill: currentColor;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,8 @@ import install from './install'
|
||||
import './permission'
|
||||
import './styles/index.scss'
|
||||
import 'virtual:svg-icons-register'
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(install)
|
||||
// app.use(Fragment.Plugin)
|
||||
|
||||
@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>保证金统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectBid" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statisticsbid } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总保证金申请",
|
||||
value: () => {
|
||||
return baseData.value.total_margin_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度保证金申请",
|
||||
value: () => {
|
||||
return baseData.value.year_margin_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总保证金回收",
|
||||
value: () => {
|
||||
return baseData.value.total_margin_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin_recovery"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度保证金回收",
|
||||
value: () => {
|
||||
return baseData.value.year_margin_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin_recovery"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总履约金申请",
|
||||
value: () => {
|
||||
return baseData.value.total_performance_money_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_apply"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度履约金申请",
|
||||
value: () => {
|
||||
return baseData.value.year_performance_money_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_apply"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总履约金回收",
|
||||
value: () => {
|
||||
return baseData.value.total_performance_money_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_recovery"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度履约金回收",
|
||||
value: () => {
|
||||
return baseData.value.year_performance_money_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_recovery"
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statisticsbid({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.margin_apply_series.name, res.margin_recovery_series.name, res.performance_money_apply_series.name, res.performance_money_recovery_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.margin_apply_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.margin_apply_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.margin_recovery_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.margin_recovery_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.performance_money_apply_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.performance_money_apply_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.performance_money_recovery_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.performance_money_recovery_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectBid", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,206 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>借款还款</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectFund" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statisticsfund } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总用款",
|
||||
value: () => {
|
||||
return baseData.value.total_using
|
||||
},
|
||||
url: "/financial/fund_management/financial_using_funds"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度用款",
|
||||
value: () => {
|
||||
return baseData.value.year_using
|
||||
},
|
||||
url: "/financial/fund_management/financial_using_funds"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总借款",
|
||||
value: () => {
|
||||
return baseData.value.total_borrow
|
||||
},
|
||||
url: "/financial/fund_management/financial_borrow_money"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度借款",
|
||||
value: () => {
|
||||
return baseData.value.year_borrow
|
||||
},
|
||||
url: "/financial/fund_management/financial_borrow_money"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总还款",
|
||||
value: () => {
|
||||
return baseData.value.total_repayment
|
||||
},
|
||||
url: "/financial/fund_management/financial_repayment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度还款",
|
||||
value: () => {
|
||||
return baseData.value.year_repayment
|
||||
},
|
||||
url: "/financial/fund_management/financial_repayment"
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statisticsfund({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.using_series.name, res.borrow_series.name, res.repayment_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.using_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.using_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.borrow_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.borrow_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.repayment_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.repayment_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectFund", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目合同</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectContract" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_refund"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_refund"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectContract", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>合同金额</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statistics } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总数量",
|
||||
value: () => {
|
||||
return baseData.value.total_number
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度数量",
|
||||
value: () => {
|
||||
return baseData.value.year_number
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总签约金额",
|
||||
value: () => {
|
||||
return baseData.value.total_signed_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度签约金额",
|
||||
value: () => {
|
||||
return baseData.value.year_signed_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statistics({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.number_series.name, res.signed_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.number_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.number_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.signed_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.signed_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
<template>
|
||||
<!-- <template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
@ -18,4 +18,227 @@ import ProjectBid from "./components/ProjectBid.vue"
|
||||
import ProjectFund from "./components/ProjectFund.vue"
|
||||
|
||||
|
||||
</script>
|
||||
</script> -->
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<el-card shadow="never" class=" !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">概况</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels @change="getData" />
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
|
||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-info">{{ item.name }}</div>
|
||||
<div class="text-6xl">{{ item.num }}</div>
|
||||
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">用户趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="statistics_user">
|
||||
import { apistatisfinancialStatistics } from "@/api/statistics"
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
// 表单数据
|
||||
const visitorOption: any = reactive({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [0],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['访问量']
|
||||
},
|
||||
itemStyle: {
|
||||
// 点的颜色。
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
data: [0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
// {
|
||||
// name: '访客数',
|
||||
// type: 'people',
|
||||
// icon: 'RectangleCopy',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '浏览量',
|
||||
// type: 'browse',
|
||||
// icon: 'RectangleCopy49',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '新增用户数',
|
||||
// type: 'newUser',
|
||||
// icon: 'RectangleCopy53',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '成交用户数',
|
||||
// type: 'payPeople',
|
||||
// icon: 'RectangleCopy5',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '访客-支付转换率',
|
||||
// type: 'payPercent',
|
||||
// icon: 'RectangleCopy4',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '激活付费会员数',
|
||||
// type: 'payUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '充值用户数',
|
||||
// type: 'rechargePeople',
|
||||
// icon: 'RectangleCopy59',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '客单价',
|
||||
// type: 'payPrice',
|
||||
// icon: 'RectangleCopy15',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计用户',
|
||||
// type: 'cumulativeUser',
|
||||
// icon: 'RectangleCopy54',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计付费会员数',
|
||||
// type: 'cumulativePayUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计充值用户数',
|
||||
// type: 'cumulativeRechargePeople',
|
||||
// icon: 'RectangleCopy6',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计成交用户数',
|
||||
// type: 'cumulativePayPeople',
|
||||
// icon: 'RectangleCopy9',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// }
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
|
||||
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apistatisfinancialStatistics({
|
||||
date: date
|
||||
}).then(res => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
console.log(res)
|
||||
visitorOption.xAxis.data = Object.keys(res[0].value)
|
||||
|
||||
res.forEach((item, index) => {
|
||||
visitorOption.series[index] = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: Object.values(item.value),
|
||||
name: item.title
|
||||
|
||||
}
|
||||
basicList[index] = {
|
||||
name: item.title,
|
||||
type: 'people',
|
||||
icon: 'RectangleCopy',
|
||||
num: item.total_money,
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData2()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statistics } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatistisupervision_statistics()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目月报</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvince" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticsmonth_report } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总进度",
|
||||
value: () => {
|
||||
return baseData.value.total_schedule
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度进度",
|
||||
value: () => {
|
||||
return baseData.value.year_schedule
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总完成",
|
||||
value: () => {
|
||||
return baseData.value.total_complete
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度完成",
|
||||
value: () => {
|
||||
return baseData.value.year_complete
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总支付",
|
||||
value: () => {
|
||||
return baseData.value.total_payment
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度支付",
|
||||
value: () => {
|
||||
return baseData.value.year_payment
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticsmonth_report({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.schedule_series.name, res.complete_series.name, res.payment_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.schedule_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.schedule_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.complete_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.complete_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.payment_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.payment_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvince", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.year_settlement_amount.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 问题跟踪</span>
|
||||
</div>
|
||||
</template>
|
||||
<div id="projectProblem" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticsproblem } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatistisupervision_statisticsproblem()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectProblem", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<!-- <template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<problem></problem>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectBid></ProjectBid>
|
||||
<ProjectFund></ProjectFund>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,10 +12,233 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import problem from "./components/problem.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
import ProjectBid from "./components/ProjectBid.vue"
|
||||
import ProjectFund from "./components/ProjectFund.vue"
|
||||
|
||||
|
||||
</script>
|
||||
</script> -->
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<el-card shadow="never" class=" !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">概况</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels @change="getData" />
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
|
||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-info">{{ item.name }}</div>
|
||||
<div class="text-6xl">{{ item.num }}</div>
|
||||
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">用户趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="statistics_user">
|
||||
import { apistatisfinancialStatistics } from "@/api/statistics"
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
// 表单数据
|
||||
const visitorOption: any = reactive({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [0],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['访问量']
|
||||
},
|
||||
itemStyle: {
|
||||
// 点的颜色。
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
data: [0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
// {
|
||||
// name: '访客数',
|
||||
// type: 'people',
|
||||
// icon: 'RectangleCopy',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '浏览量',
|
||||
// type: 'browse',
|
||||
// icon: 'RectangleCopy49',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '新增用户数',
|
||||
// type: 'newUser',
|
||||
// icon: 'RectangleCopy53',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '成交用户数',
|
||||
// type: 'payPeople',
|
||||
// icon: 'RectangleCopy5',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '访客-支付转换率',
|
||||
// type: 'payPercent',
|
||||
// icon: 'RectangleCopy4',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '激活付费会员数',
|
||||
// type: 'payUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '充值用户数',
|
||||
// type: 'rechargePeople',
|
||||
// icon: 'RectangleCopy59',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '客单价',
|
||||
// type: 'payPrice',
|
||||
// icon: 'RectangleCopy15',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计用户',
|
||||
// type: 'cumulativeUser',
|
||||
// icon: 'RectangleCopy54',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计付费会员数',
|
||||
// type: 'cumulativePayUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计充值用户数',
|
||||
// type: 'cumulativeRechargePeople',
|
||||
// icon: 'RectangleCopy6',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计成交用户数',
|
||||
// type: 'cumulativePayPeople',
|
||||
// icon: 'RectangleCopy9',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// }
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
|
||||
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apistatisfinancialStatistics({
|
||||
date: date
|
||||
}).then(res => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
console.log(res)
|
||||
visitorOption.xAxis.data = Object.keys(res[0].value)
|
||||
|
||||
res.forEach((item, index) => {
|
||||
visitorOption.series[index] = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: Object.values(item.value),
|
||||
name: item.title
|
||||
|
||||
}
|
||||
basicList[index] = {
|
||||
name: item.title,
|
||||
type: 'people',
|
||||
icon: 'RectangleCopy',
|
||||
num: item.total_money,
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData2()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 业务性质</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatismarketing_statistics } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatismarketing_statistics()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,205 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>合同统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvoice" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatismarketing_statisticscontract } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总主合同数",
|
||||
value: () => {
|
||||
return baseData.value.total_zht
|
||||
},
|
||||
url: "/marketing/marketing_contract/marketing_contract"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度主合同数",
|
||||
value: () => {
|
||||
return baseData.value.year_zht
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总框架协议数",
|
||||
value: () => {
|
||||
return baseData.value.total_kjxy
|
||||
},
|
||||
url: "/marketing/marketing_contract/marketing_framework_agreement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度框架协议数",
|
||||
value: () => {
|
||||
return baseData.value.year_kjxy
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总补充协议数",
|
||||
value: () => {
|
||||
return baseData.value.total_bcxy
|
||||
},
|
||||
url: "/marketing/marketing_contract/marketing_supplementary_agreement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度补充协议数",
|
||||
value: () => {
|
||||
return baseData.value.year_bcxy
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatismarketing_statisticscontract({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.zht_series.name, res.kjxy_series.name, res.bcxy_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.zht_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.zht_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.kjxy_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.kjxy_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.bcxy_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.bcxy_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvoice", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>客户统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatismarketing_statisticscustom } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总客户数",
|
||||
value: () => {
|
||||
return baseData.value.total_num
|
||||
},
|
||||
url: "/marketing/marketing_custom/marketing_custom"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度客户数",
|
||||
value: () => {
|
||||
return baseData.value.year_num
|
||||
},
|
||||
url: "/marketing/marketing_custom/marketing_custom"
|
||||
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatismarketing_statisticscustom({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.custom_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.custom_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.custom_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,226 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
|
||||
<div class="workbench">
|
||||
<el-card shadow="never" class=" !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">概况</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels @change="getData" />
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
|
||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-info">{{ item.name }}</div>
|
||||
<div class="text-6xl">{{ item.num }}</div>
|
||||
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">用户趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="statistics_user">
|
||||
import { apistatismarketingStatistics } from "@/api/statistics"
|
||||
// import { apiGetUserBasic, apiGetUserTrend } from '@/api/workbench'
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
|
||||
// 表单数据
|
||||
const visitorOption: any = reactive({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [0],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['访问量']
|
||||
},
|
||||
itemStyle: {
|
||||
// 点的颜色。
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
data: [0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
// {
|
||||
// name: '访客数',
|
||||
// type: 'people',
|
||||
// icon: 'RectangleCopy',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '浏览量',
|
||||
// type: 'browse',
|
||||
// icon: 'RectangleCopy49',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '新增用户数',
|
||||
// type: 'newUser',
|
||||
// icon: 'RectangleCopy53',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '成交用户数',
|
||||
// type: 'payPeople',
|
||||
// icon: 'RectangleCopy5',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '访客-支付转换率',
|
||||
// type: 'payPercent',
|
||||
// icon: 'RectangleCopy4',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '激活付费会员数',
|
||||
// type: 'payUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '充值用户数',
|
||||
// type: 'rechargePeople',
|
||||
// icon: 'RectangleCopy59',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '客单价',
|
||||
// type: 'payPrice',
|
||||
// icon: 'RectangleCopy15',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计用户',
|
||||
// type: 'cumulativeUser',
|
||||
// icon: 'RectangleCopy54',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计付费会员数',
|
||||
// type: 'cumulativePayUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计充值用户数',
|
||||
// type: 'cumulativeRechargePeople',
|
||||
// icon: 'RectangleCopy6',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计成交用户数',
|
||||
// type: 'cumulativePayPeople',
|
||||
// icon: 'RectangleCopy9',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// }
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
|
||||
|
||||
</script>
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apistatismarketingStatistics({
|
||||
date: date
|
||||
}).then(res => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
console.log(res)
|
||||
visitorOption.xAxis.data = Object.keys(res[0].value)
|
||||
|
||||
res.forEach((item, index) => {
|
||||
visitorOption.series[index] = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: Object.values(item.value),
|
||||
name: item.title
|
||||
|
||||
}
|
||||
basicList[index] = {
|
||||
name: item.title,
|
||||
type: 'people',
|
||||
icon: 'RectangleCopy',
|
||||
num: item.total_money,
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData2()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticproject } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatistisupervision_statisticproject()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvince" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvince", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>计量支付</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticmeteredpayment } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总进度",
|
||||
value: () => {
|
||||
return baseData.value.total_done
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度进度",
|
||||
value: () => {
|
||||
return baseData.value.year_done
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总支付",
|
||||
value: () => {
|
||||
return baseData.value.total_payment
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度支付",
|
||||
value: () => {
|
||||
return baseData.value.year_payment
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticmeteredpayment({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.complete_series.name, res.payment_series.name,]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.complete_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.complete_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.payment_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.payment_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<!-- <template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectBid></ProjectBid>
|
||||
<ProjectFund></ProjectFund>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -10,9 +12,233 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
import ProjectBid from "./components/ProjectBid.vue"
|
||||
import ProjectFund from "./components/ProjectFund.vue"
|
||||
|
||||
|
||||
</script>
|
||||
</script> -->
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<el-card shadow="never" class=" !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">概况</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels @change="getData" />
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
|
||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-info">{{ item.name }}</div>
|
||||
<div class="text-6xl">{{ item.num }}</div>
|
||||
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">用户趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="statistics_user">
|
||||
import { apistatisfinancialStatistics } from "@/api/statistics"
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
// 表单数据
|
||||
const visitorOption: any = reactive({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [0],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['访问量']
|
||||
},
|
||||
itemStyle: {
|
||||
// 点的颜色。
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
data: [0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
// {
|
||||
// name: '访客数',
|
||||
// type: 'people',
|
||||
// icon: 'RectangleCopy',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '浏览量',
|
||||
// type: 'browse',
|
||||
// icon: 'RectangleCopy49',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '新增用户数',
|
||||
// type: 'newUser',
|
||||
// icon: 'RectangleCopy53',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '成交用户数',
|
||||
// type: 'payPeople',
|
||||
// icon: 'RectangleCopy5',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '访客-支付转换率',
|
||||
// type: 'payPercent',
|
||||
// icon: 'RectangleCopy4',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '激活付费会员数',
|
||||
// type: 'payUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '充值用户数',
|
||||
// type: 'rechargePeople',
|
||||
// icon: 'RectangleCopy59',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '客单价',
|
||||
// type: 'payPrice',
|
||||
// icon: 'RectangleCopy15',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计用户',
|
||||
// type: 'cumulativeUser',
|
||||
// icon: 'RectangleCopy54',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计付费会员数',
|
||||
// type: 'cumulativePayUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计充值用户数',
|
||||
// type: 'cumulativeRechargePeople',
|
||||
// icon: 'RectangleCopy6',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计成交用户数',
|
||||
// type: 'cumulativePayPeople',
|
||||
// icon: 'RectangleCopy9',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// }
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
|
||||
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apistatisfinancialStatistics({
|
||||
date: date
|
||||
}).then(res => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
console.log(res)
|
||||
visitorOption.xAxis.data = Object.keys(res[0].value)
|
||||
|
||||
res.forEach((item, index) => {
|
||||
visitorOption.series[index] = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: Object.values(item.value),
|
||||
name: item.title
|
||||
|
||||
}
|
||||
basicList[index] = {
|
||||
name: item.title,
|
||||
type: 'people',
|
||||
icon: 'RectangleCopy',
|
||||
num: item.total_money,
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData2()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticoststatistics } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatisticoststatistics()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '我的立项',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目合同</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectContract" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticoststatisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatisticoststatisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.settlement_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectContract", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticoststatisticsamout } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总签约金额",
|
||||
value: () => {
|
||||
return baseData.value.total_signed_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总投资金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invest_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度签约金额",
|
||||
value: () => {
|
||||
return baseData.value.year_signed_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度投资金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invest_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatisticoststatisticsamout({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.signed_series.name, res.invest_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.signed_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.signed_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.invest_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invest_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,224 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<el-card shadow="never" class=" !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">概况</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels @change="getData" />
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
|
||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-info">{{ item.name }}</div>
|
||||
<div class="text-6xl">{{ item.num }}</div>
|
||||
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">用户趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="statistics_user">
|
||||
import { apistatisfinancialStatistics } from "@/api/statistics"
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
// 表单数据
|
||||
const visitorOption: any = reactive({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [0],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['访问量']
|
||||
},
|
||||
itemStyle: {
|
||||
// 点的颜色。
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
data: [0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
// {
|
||||
// name: '访客数',
|
||||
// type: 'people',
|
||||
// icon: 'RectangleCopy',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '浏览量',
|
||||
// type: 'browse',
|
||||
// icon: 'RectangleCopy49',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '新增用户数',
|
||||
// type: 'newUser',
|
||||
// icon: 'RectangleCopy53',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '成交用户数',
|
||||
// type: 'payPeople',
|
||||
// icon: 'RectangleCopy5',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '访客-支付转换率',
|
||||
// type: 'payPercent',
|
||||
// icon: 'RectangleCopy4',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '激活付费会员数',
|
||||
// type: 'payUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '充值用户数',
|
||||
// type: 'rechargePeople',
|
||||
// icon: 'RectangleCopy59',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '客单价',
|
||||
// type: 'payPrice',
|
||||
// icon: 'RectangleCopy15',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计用户',
|
||||
// type: 'cumulativeUser',
|
||||
// icon: 'RectangleCopy54',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计付费会员数',
|
||||
// type: 'cumulativePayUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计充值用户数',
|
||||
// type: 'cumulativeRechargePeople',
|
||||
// icon: 'RectangleCopy6',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计成交用户数',
|
||||
// type: 'cumulativePayPeople',
|
||||
// icon: 'RectangleCopy9',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// }
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apistatisfinancialStatistics({
|
||||
date: date
|
||||
}).then(res => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
console.log(res)
|
||||
visitorOption.xAxis.data = Object.keys(res[0].value)
|
||||
|
||||
res.forEach((item, index) => {
|
||||
visitorOption.series[index] = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: Object.values(item.value),
|
||||
name: item.title
|
||||
|
||||
</script>
|
||||
}
|
||||
basicList[index] = {
|
||||
name: item.title,
|
||||
type: 'people',
|
||||
icon: 'RectangleCopy',
|
||||
num: item.total_money,
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData2()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticonsult_statisticsproject } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatisticonsult_statisticsproject()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvince" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticonsult_statisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatisticonsult_statisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvince", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<!-- <template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectBid></ProjectBid>
|
||||
<ProjectFund></ProjectFund>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -10,8 +12,233 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
import ProjectBid from "./components/ProjectBid.vue"
|
||||
import ProjectFund from "./components/ProjectFund.vue"
|
||||
|
||||
|
||||
</script>
|
||||
</script> -->
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<el-card shadow="never" class=" !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">概况</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels @change="getData" />
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
|
||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-info">{{ item.name }}</div>
|
||||
<div class="text-6xl">{{ item.num }}</div>
|
||||
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">用户趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="statistics_user">
|
||||
import { apistatisfinancialStatistics } from "@/api/statistics"
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
// 表单数据
|
||||
const visitorOption: any = reactive({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [0],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['访问量']
|
||||
},
|
||||
itemStyle: {
|
||||
// 点的颜色。
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
data: [0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
// {
|
||||
// name: '访客数',
|
||||
// type: 'people',
|
||||
// icon: 'RectangleCopy',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '浏览量',
|
||||
// type: 'browse',
|
||||
// icon: 'RectangleCopy49',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '新增用户数',
|
||||
// type: 'newUser',
|
||||
// icon: 'RectangleCopy53',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '成交用户数',
|
||||
// type: 'payPeople',
|
||||
// icon: 'RectangleCopy5',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '访客-支付转换率',
|
||||
// type: 'payPercent',
|
||||
// icon: 'RectangleCopy4',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '激活付费会员数',
|
||||
// type: 'payUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '充值用户数',
|
||||
// type: 'rechargePeople',
|
||||
// icon: 'RectangleCopy59',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '客单价',
|
||||
// type: 'payPrice',
|
||||
// icon: 'RectangleCopy15',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计用户',
|
||||
// type: 'cumulativeUser',
|
||||
// icon: 'RectangleCopy54',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计付费会员数',
|
||||
// type: 'cumulativePayUser',
|
||||
// icon: 'RectangleCopy7',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计充值用户数',
|
||||
// type: 'cumulativeRechargePeople',
|
||||
// icon: 'RectangleCopy6',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// },
|
||||
// {
|
||||
// name: '累计成交用户数',
|
||||
// type: 'cumulativePayPeople',
|
||||
// icon: 'RectangleCopy9',
|
||||
// num: 0,
|
||||
// percent: 0
|
||||
// }
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
|
||||
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apistatisfinancialStatistics({
|
||||
date: date
|
||||
}).then(res => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
console.log(res)
|
||||
visitorOption.xAxis.data = Object.keys(res[0].value)
|
||||
|
||||
res.forEach((item, index) => {
|
||||
visitorOption.series[index] = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: Object.values(item.value),
|
||||
name: item.title
|
||||
|
||||
}
|
||||
basicList[index] = {
|
||||
name: item.title,
|
||||
type: 'people',
|
||||
icon: 'RectangleCopy',
|
||||
num: item.total_money,
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData2()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -3062,6 +3062,11 @@
|
||||
"pathe" "^0.3.3"
|
||||
"pkg-types" "^0.3.3"
|
||||
|
||||
"moment@^2.30.1":
|
||||
"integrity" "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
|
||||
"resolved" "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz"
|
||||
"version" "2.30.1"
|
||||
|
||||
"ms@^2.1.1":
|
||||
"integrity" "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
"resolved" "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user