From 2d5b5217c53d7688849d394d0977f899c11b40c0 Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Wed, 26 May 2021 15:25:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=BA=93-=E6=97=A0=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E5=88=86=E6=94=AF=E6=97=B6=E8=B0=83=E7=94=A8entries?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=9C=AA=E4=BC=A0ref=E5=8F=82=E6=95=B0?= =?UTF-8?q?=EF=BC=8C+=E4=B8=AA=E4=BA=BA=E4=B8=BB=E9=A1=B5=E7=9A=84?= =?UTF-8?q?=E4=B8=89=E4=B8=AAechart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 21 +++--- package.json | 3 +- src/forge/Main/CoderDepot.jsx | 9 ++- src/forge/Main/CoderRootTag.js | 2 +- src/forge/Main/Diff.jsx | 2 +- src/forge/Main/Index.scss | 6 +- src/forge/users/Echart/Cloud.jsx | 44 ++++++++++++ src/forge/users/Echart/Line.jsx | 96 ++++++++++++++++++++++++++ src/forge/users/Echart/Pie.jsx | 75 ++++++++++++++++++++ src/forge/users/Echart/Radar.jsx | 65 +++++++++++++++++ src/forge/users/GeneralView/Index.jsx | 23 ++++++ src/forge/users/GeneralView/Index.scss | 0 src/forge/users/Infos.js | 5 ++ 13 files changed, 337 insertions(+), 14 deletions(-) create mode 100644 src/forge/users/Echart/Cloud.jsx create mode 100644 src/forge/users/Echart/Line.jsx create mode 100644 src/forge/users/Echart/Pie.jsx create mode 100644 src/forge/users/Echart/Radar.jsx create mode 100644 src/forge/users/GeneralView/Index.jsx create mode 100644 src/forge/users/GeneralView/Index.scss diff --git a/package-lock.json b/package-lock.json index c058f9a0f..5f9748eed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5058,11 +5058,11 @@ } }, "echarts": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.7.0.tgz", - "integrity": "sha512-NlOTdUcAsIyCCG+N4uh0ZEvXtrPW2jvcuqf03RyqYeCKzyPbiOQ4I3MdKXMhxG3lBdqQNdNXVT71SB4KTQjN0A==", + "version": "4.9.0", + "resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz", + "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=", "requires": { - "zrender": "4.3.0" + "zrender": "4.3.2" } }, "editor.md": { @@ -9888,6 +9888,11 @@ "esprima": "^4.0.0" } }, + "js2wordcloud": { + "version": "1.1.12", + "resolved": "https://registry.npm.taobao.org/js2wordcloud/download/js2wordcloud-1.1.12.tgz", + "integrity": "sha1-8BdC2k5qyzAAsoY1dmQWjvn8o64=" + }, "jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", @@ -14020,7 +14025,7 @@ }, "qr.js": { "version": "0.0.0", - "resolved": "https://registry.npm.taobao.org/qr.js/download/qr.js-0.0.0.tgz", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", "integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=" }, "qrcode.react": { @@ -20517,9 +20522,9 @@ } }, "zrender": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.0.tgz", - "integrity": "sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA==" + "version": "4.3.2", + "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.3.2.tgz", + "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY=" } } } diff --git a/package.json b/package.json index ecbdaa14d..0443ddc4c 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "dompurify": "^2.0.15", "dotenv": "4.0.0", "dotenv-expand": "4.2.0", - "echarts": "^4.7.0", + "echarts": "^4.9.0", "editor.md": "^1.5.0", "eslint": "4.10.0", "eslint-config-react-app": "^2.1.0", @@ -46,6 +46,7 @@ "install": "^0.12.2", "jest": "20.0.4", "js-base64": "^2.5.2", + "js2wordcloud": "^1.1.12", "katex": "^0.11.1", "lodash": "^4.17.15", "loglevel": "^1.6.8", diff --git a/src/forge/Main/CoderDepot.jsx b/src/forge/Main/CoderDepot.jsx index 482aec318..818bd2f0f 100644 --- a/src/forge/Main/CoderDepot.jsx +++ b/src/forge/Main/CoderDepot.jsx @@ -61,6 +61,13 @@ function CoderDepot(props){ setLessonUrl(details.lesson_url); } },[details]) + + useEffect(()=>{ + if(!branchName || pathname === `/projects/${owner}/${projectsId}/tree/${branchName}`){ + console.log("dddddddddd"); + getDirInfo((details && details.default_branch)); + } + },[branchName,pathname]) useEffect(()=>{ if(treeValue){ @@ -79,7 +86,7 @@ function CoderDepot(props){ getFileInfo(url,branchName); }else{ setTreeValue(undefined); - getDirInfo(branchName ||(projectDetail && projectDetail.default_branch)); + // getDirInfo(branchName ||(projectDetail && projectDetail.default_branch)); } } },[projectsId,owner,pathname]) diff --git a/src/forge/Main/CoderRootTag.js b/src/forge/Main/CoderRootTag.js index 6a5205abd..a87386d5c 100644 --- a/src/forge/Main/CoderRootTag.js +++ b/src/forge/Main/CoderRootTag.js @@ -26,7 +26,7 @@ export default (( props, { projectDetail }) => { }, [owner, projectsId]); return ( -
+
{ diff --git a/src/forge/Main/Diff.jsx b/src/forge/Main/Diff.jsx index d8db5f008..a6b0b49cd 100644 --- a/src/forge/Main/Diff.jsx +++ b/src/forge/Main/Diff.jsx @@ -51,7 +51,7 @@ export default ({ match , history }) => { } }, [projectsId , owner, sha]); return ( -
+
diff --git a/src/forge/Main/Index.scss b/src/forge/Main/Index.scss index 5808246bb..8aeac3a31 100644 --- a/src/forge/Main/Index.scss +++ b/src/forge/Main/Index.scss @@ -171,15 +171,17 @@ .listtablehead{ display: flex; justify-content: space-between; - align-items: flex-start; + align-items: center; border-bottom: 1px solid #d9d9d9; padding:7px 20px; border-radius: 4px 4px 0px 0px; background-color: #FAFBFC; .ellipsistxt{ + #ptxt{ + margin-bottom: 0px; + } margin-left: 13px; line-height:18px; - margin-top:6px; flex:1; width: 0; color: #666; diff --git a/src/forge/users/Echart/Cloud.jsx b/src/forge/users/Echart/Cloud.jsx new file mode 100644 index 000000000..cbe182a26 --- /dev/null +++ b/src/forge/users/Echart/Cloud.jsx @@ -0,0 +1,44 @@ +import React ,{ useEffect } from 'react'; +import Js2WordCloud from 'js2wordcloud/dist/js2wordcloud.js' + +function Cloud({data}) { + + useEffect(()=>{ + optionChart1(); + },[]) + + function optionChart1(){ + var div = new Js2WordCloud(document.getElementById('cloud')) + let textList=[ + ['服务'], ['细致'], ['意识'], ['踏实'],['开发'], ['反馈'], ['协助'],['使用'],['谈判'] + ] + let cyList=[] + for(let i=0;i<60;i++){ + cyList.push([textList[parseInt(Math.random()*textList.length)],Math.round(Math.random()*10)+1]) + } + div.setOption({ + backgroundColor:'transparent', + shape: 'circle', + // ellipticity: 1,//椭圆 + maxFontSize: 40,//最大字号 + minFontSize: 12,//最小字号 + tooltip: { + show: true + }, + list: cyList, + color(word, weight, fontSize, distance, theta) { //自定义颜色、透明度 + if (fontSize>=12 && fontSize<=20) { + return 'rgb(29,227,250,0.3)'; + } else if(fontSize>20 && fontSize<=30){ + return 'rgb(29,227,250,0.6)'; + }else if(fontSize>30 && fontSize<=40){ + return 'rgb(29,227,250)'; + } + }, + }) + } + return( +
+ ) +} +export default Cloud; \ No newline at end of file diff --git a/src/forge/users/Echart/Line.jsx b/src/forge/users/Echart/Line.jsx new file mode 100644 index 000000000..2092b87c1 --- /dev/null +++ b/src/forge/users/Echart/Line.jsx @@ -0,0 +1,96 @@ +import React ,{ useEffect } from 'react'; +import * as echarts from 'echarts'; + +function Line({data}) { + useEffect(()=>{ + Init(); + },[]) + + useEffect(()=>{ + if(data){ + Init(); + } + },[data]) + + function Init() { + var huan_val = document.getElementById("Line"); + var myEcharts = echarts.init(huan_val); + let option = { + color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"], + title: { + text: '近期活动统计', + left: '3%' + }, + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'], + right: '3%' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + toolbox: { + feature: { + // saveAsImage: {} + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] + }, + yAxis: { + type: 'value', + axisLine:{ + show:false + }, + axisTick:{ + show:false + } + }, + series: [ + { + name: '邮件营销', + type: 'line', + stack: '总量', + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: '联盟广告', + type: 'line', + stack: '总量', + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: '视频广告', + type: 'line', + stack: '总量', + data: [150, 232, 201, 154, 190, 330, 410] + }, + { + name: '直接访问', + type: 'line', + stack: '总量', + data: [320, 332, 301, 334, 390, 330, 320] + }, + { + name: '搜索引擎', + type: 'line', + stack: '总量', + data: [820, 932, 901, 934, 1290, 1330, 1320] + } + ] + }; + myEcharts.setOption(option); + } + + return( +
+ ) +} +export default Line; \ No newline at end of file diff --git a/src/forge/users/Echart/Pie.jsx b/src/forge/users/Echart/Pie.jsx new file mode 100644 index 000000000..460d7f001 --- /dev/null +++ b/src/forge/users/Echart/Pie.jsx @@ -0,0 +1,75 @@ +import React ,{ useEffect } from 'react'; +import echarts from 'echarts/lib/echarts'; +import 'echarts/lib/chart/pie'; + +function Pie({data}) { + useEffect(()=>{ + Init(); + },[]) + + useEffect(()=>{ + if(data){ + Init(); + } + },[data]) + + function Init() { + var huan_val = document.getElementById("Pie"); + var chart = echarts.init(huan_val); + let option = { + color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"], + title: { + text: '角色定位', + top:"5%", + left:"3%" + }, + tooltip: { + trigger: 'item' + }, + legend: { + top: '5%', + right: '3%' + }, + series: [ + { + name: '', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 10, + borderColor: '#fff', + borderWidth: 2 + }, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: true, + fontSize: '40', + fontWeight: 'bold' + } + }, + labelLine: { + show: false + }, + data: [ + {value: 1048, name: '搜索引擎'}, + {value: 735, name: '直接访问'}, + {value: 580, name: '邮件营销'}, + {value: 484, name: '联盟广告'}, + {value: 300, name: '视频广告'} + ] + } + ] + }; + chart.setOption(option); + } + + return( +
+ ) +} +export default Pie; \ No newline at end of file diff --git a/src/forge/users/Echart/Radar.jsx b/src/forge/users/Echart/Radar.jsx new file mode 100644 index 000000000..f427442ed --- /dev/null +++ b/src/forge/users/Echart/Radar.jsx @@ -0,0 +1,65 @@ +import React ,{ useEffect } from 'react'; +import echarts from 'echarts/lib/echarts' +import 'echarts/lib/chart/radar'; + +function Radar({data}) { + useEffect(()=>{ + Init(); + },[]) + + useEffect(()=>{ + if(data){ + Init(); + } + },[data]) + + function Init() { + var huan_val = document.getElementById("radar"); + var myEcharts = echarts.init(huan_val); + let option = { + color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"], + title: { + text: '开发能力', + top:"0", + left:"3%" + }, + legend: { + data: ['预算分配', '实际开销'], + top:"0", + right:"center" + }, + radar: { + // shape: 'circle', + indicator: [ + { name: '销售', max: 6500}, + { name: '管理', max: 16000}, + { name: '信息技术', max: 30000}, + { name: '客服', max: 38000}, + { name: '研发', max: 52000}, + { name: '市场', max: 25000} + ], + center:["50%","55%"] + }, + series: [{ + name: '预算 vs 开销', + type: 'radar', + data: [ + { + value: [4200, 3000, 20000, 35000, 50000, 18000], + name: '预算分配' + }, + { + value: [5000, 14000, 28000, 26000, 42000, 21000], + name: '实际开销' + } + ] + }] + }; + myEcharts.setOption(option); + } + + return( +
+ ) +} +export default Radar; \ No newline at end of file diff --git a/src/forge/users/GeneralView/Index.jsx b/src/forge/users/GeneralView/Index.jsx new file mode 100644 index 000000000..9a76e9aa1 --- /dev/null +++ b/src/forge/users/GeneralView/Index.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './Index.scss'; +import 'echarts/lib/component/tooltip'; +import 'echarts/lib/component/title'; +import 'echarts/lib/component/legend' +import 'echarts/lib/component/markPoint'; + +import Pie from '../Echart/Pie'; +import Line from '../Echart/Line'; +import Radar from '../Echart/Radar'; +import Cloud from '../Echart/Cloud'; + +function Index(props) { + return( +
+ + + + +
+ ) +} +export default Index; \ No newline at end of file diff --git a/src/forge/users/GeneralView/Index.scss b/src/forge/users/GeneralView/Index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/forge/users/Infos.js b/src/forge/users/Infos.js index e3febfced..11b82db34 100644 --- a/src/forge/users/Infos.js +++ b/src/forge/users/Infos.js @@ -23,6 +23,11 @@ const InfosDevOpsCD = Loadable({ loader: () => import("./devOpsCD"), loading: Loading, }); + +const GeneralView = Loadable({ + loader: () => import("./GeneralView/Index"), + loading: Loading, +}); const InfosUser = Loadable({ loader: () => import("./InfosUser"), loading: Loading,