From e405b861b9521f5ea38c5402203a5b05988f9de2 Mon Sep 17 00:00:00 2001 From: ludc Date: 星期三, 04 十二月 2024 10:47:05 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- Source/plt-web/plt-web-ui/src/views/wel/index.vue | 173 +++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 123 insertions(+), 50 deletions(-) diff --git a/Source/plt-web/plt-web-ui/src/views/wel/index.vue b/Source/plt-web/plt-web-ui/src/views/wel/index.vue index a650939..7d762f7 100644 --- a/Source/plt-web/plt-web-ui/src/views/wel/index.vue +++ b/Source/plt-web/plt-web-ui/src/views/wel/index.vue @@ -1,29 +1,16 @@ <template> <div> - <!-- <el-row>--> - <!-- <el-col :span="24">--> - <!-- <third-register></third-register>--> - <!-- </el-col>--> - <!-- </el-row>--> <el-row> <el-col :span="24"> <basic-container v-loading="loading"> - <!-- <div style="display: flex">--> - <!-- <div style="height: 80px; width: 50px; overflow: hidden;margin-right: 20px">--> - <!-- <img src="../../../public/img/mainTop.png" style="height: 100%; width: 100%; object-fit: contain;" />--> - <!-- </div>--> - <!-- <avue-text-ellipsis :text="text" :height="80" :width="1600" use-tooltip placement="top">--> - <!-- <small slot="more">...</small>--> - <!-- </avue-text-ellipsis>--> - <!-- </div>--> <avue-data-tabs :option="topOption"></avue-data-tabs> </basic-container> </el-col> </el-row> <el-row> - <el-col :span="16"> + <el-col :span="16" style="height: 560px"> <basic-container> - <el-collapse v-model="activeNames" @change="handleChange"> + <el-collapse v-model="activeNames"> <el-collapse-item name="1" title="娆㈣繋浣跨敤PLT-WEB骞冲彴"> <div> 1銆佸寳浜畯鍗氳繙杈剧鎶�鏈夐檺鍏徃锛堜互涓嬬畝绉扳�滃畯鍗氳繙杈锯�濓級闀挎湡涓撴敞浜庡埗閫犱笟淇℃伅鍖栧缓璁撅紝涓哄鎴锋彁渚涗紒涓氫俊鎭寲鏁翠綋瑙e喅鏂规鍙婄浉鍏宠蒋浠剁爺鍙戙�佸挩璇㈠強瀹炴柦鏈嶅姟銆傚畯鍗氳繙杈惧鎴风兢浣撴兜鐩栬埅绌恒�佽埅澶┿�佽埞鑸躲�佸叺鍣ㄣ�佹苯杞︺�侀�氱敤鏈烘銆佺數瀛愮瓑鍒堕�犺涓氾紝閫氳繃涓庡鎴锋繁搴﹀悎浣滐紝鎵挎媴浜嗗椤瑰浗瀹剁骇杞欢鐮斿彂涓庢妧鏈湇鍔¢」鐩紝鎷ユ湁澶氶」鍏锋湁鑷富鐭ヨ瘑浜ф潈鐨勮蒋浠朵骇鍝併�� @@ -31,7 +18,9 @@ <div> 2銆佷负浜嗙粰瀹㈡埛鎻愪緵鏇村鐨勬妧鏈垱鏂拌兘鍔涘強鐩稿簲鐨勪紒涓氱骇绠$悊鏀拺骞冲彴锛屽畯鍗氳繙杈剧爺鍙戜簡鍏锋湁鑷富鐭ヨ瘑浜ф潈鐨勪紒涓氱骇淇℃伅鍖栨暣浣撹В鍐虫柟妗堬紝鍚屾椂閽堝瀹㈡埛鐨勭壒瀹氶渶姹傦紝鎻愪緵浜嗛珮搴﹀彲瀹氬埗鐨勪笓涓氬簲鐢ㄣ�備负浜嗚繘涓�姝ユ彁鍗囨妧鏈湇鍔¤兘鍔涳紝瀹忓崥杩滆揪鎶曞叆涓撻棬鍔涢噺鍦ㄥ墠娌挎妧鏈柟闈㈣繘琛屾帰绱紝鍦ㄤ紒涓氱鏈変簯璁$畻鍜屽ぇ鏁版嵁绛夐鍩熶笉鏂彇寰楃獊鐮淬�傞殢鐫�鏂颁竴浠d笟鍔′笌绠$悊鎶�鏈钩鍙扮殑鎺ㄥ嚭锛屾洿澧炲己浜嗗叕鍙镐负瀹㈡埛鎻愪緵楂樿川閲忋�佸叏鏂逛綅銆佹繁灞傛鏈嶅姟鐨勬妧鏈兘鍔涖�� </div> - <div>3銆佸畯鍗氳繙杈句竴鐩寸鎵库�滅敤鏅烘収涓哄鎴峰垱閫犱环鍊尖�濈殑瀹楁棬锛屾効浠モ�滆瘹淇¤礋璐b�濈殑鎬佸害鍜屼笓涓氬寲鐨勬湇鍔★紝鍦ㄤ紒涓氫俊鎭寲鍙戝睍鐨勯亾璺笂锛屼笌瀹㈡埛涓�璧锋垚闀匡紝鍏卞悓瑙佽瘉鎴愬姛锛�</div> + <div> + 3銆佸畯鍗氳繙杈句竴鐩寸鎵库�滅敤鏅烘収涓哄鎴峰垱閫犱环鍊尖�濈殑瀹楁棬锛屾効浠モ�滆瘹淇¤礋璐b�濈殑鎬佸害鍜屼笓涓氬寲鐨勬湇鍔★紝鍦ㄤ紒涓氫俊鎭寲鍙戝睍鐨勯亾璺笂锛屼笌瀹㈡埛涓�璧锋垚闀匡紝鍏卞悓瑙佽瘉鎴愬姛锛� + </div> </el-collapse-item> <el-collapse-item name="2" title="鏈嶅姟璁″垝鍒跺畾"> @@ -47,15 +36,17 @@ <div> 4銆佸湪鍏朵粬鎯呭舰涓嬶紝瀹忓崥杩滆揪涔熷彲鎻愪緵蹇呰鐨勭幇鍦烘湇鍔°�傚涓哄鎴疯幏寰楃殑鍚堟硶鎿嶄綔绯荤粺杩涜鍗囩骇鏈嶅姟銆佷负瀹㈡埛瀹夎蹇呰鐨勮蒋浠剁瓑鐨勬湇鍔°�侀厤鍚堝鎴峰仛涓绘満绯荤粺鏂归潰鐨勬祴璇曘�佷负瀹㈡埛鐨勫簲鐢ㄨ皟鏁存彁渚涚郴缁熸柟闈㈢殑鏀寔绛夌瓑銆� </div> + <div> + 5銆佸畯鍗氳繙杈捐繕灏嗕负瀹㈡埛鎻愪緵瀹氭湡鐨勭郴缁熸�ц兘璇勪及涓庝紭鍖栨湇鍔°�傞�氳繃瀵圭郴缁熻繍琛屾暟鎹殑娣卞叆鍒嗘瀽锛屾垜浠皢璇嗗埆娼滃湪鐨勬�ц兘鐡堕锛屾彁鍑洪拡瀵规�х殑浼樺寲寤鸿锛屽苟鍗忓姪瀹㈡埛瀹炴柦浼樺寲鎺柦銆傝繖鍖呮嫭浣嗕笉闄愪簬纭欢璧勬簮鐨勫悎鐞嗛厤缃�佽蒋浠跺弬鏁扮殑璋冧紭銆佹暟鎹簱鎬ц兘鐨勬彁鍗囩瓑锛屾棬鍦ㄧ‘淇濈郴缁熻兘澶熸寔缁ǔ瀹氥�侀珮鏁堝湴杩愯锛屾弧瓒冲鎴风殑涓氬姟鍙戝睍闇�姹傘�傚悓鏃讹紝鎴戜滑涔熷皢鏍规嵁绯荤粺璇勪及缁撴灉锛屼负瀹㈡埛鎻愪緵鏈潵鐨勭郴缁熷崌绾у拰鎵╁睍瑙勫垝寤鸿锛屽府鍔╁鎴锋彁鍓嶅竷灞�锛屽簲瀵规湭鏉ョ殑涓氬姟澧為暱鍜屾妧鏈彉闈┿�� + </div> </el-collapse-item> </el-collapse> </basic-container> </el-col> - <el-col :span="8"> + <el-col :span="8" style="height: 560px"> <el-row> <basic-container> <div class="el-font-size"> - <span>浜у搧鍚嶇О</span> <el-divider direction="vertical"/> <span><el-tag>PLT-WEB骞冲彴</el-tag></span> @@ -68,10 +59,18 @@ <span>璇存槑鏂囨。</span> <el-divider direction="vertical"/> - <span><el-link href="https://bladex.vip" target="_blank" - type="primary">https://bladex.vip</el-link></span> + <span> + <el-link href="https://bladex.vip" target="_blank" + type="primary">https://bladex.vip + </el-link> + </span> <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider> + </div> + </basic-container> + <basic-container> + <div style="height: 309px"> + <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart> </div> </basic-container> </el-row> @@ -84,17 +83,66 @@ <script> import {mapGetters} from "vuex"; import {getLogListByContion} from "@/api/system/log/logBasic"; +import 'echarts' +import 'echarts/lib/chart/pie' // 瀵煎叆鏌辩姸鍥剧粍浠� +import 'echarts/lib/component/tooltip' +import 'echarts/lib/component/legend' +import func from "@/util/func"; export default { name: "wel", data() { return { - loading:false, - text: '鍖椾含瀹忓崥杩滆揪绉戞妧鏈夐檺鍏徃锛堜互涓嬬畝绉扳�滃畯鍗氳繙杈锯�濓級闀挎湡涓撴敞浜庡埗閫犱笟淇℃伅鍖栧缓璁撅紝涓哄鎴锋彁渚涗紒涓氫俊鎭寲鏁翠綋瑙e喅鏂规鍙婄浉鍏宠蒋浠剁爺鍙戙�佸挩璇㈠強瀹炴柦鏈嶅姟銆傚畯鍗氳繙杈惧鎴风兢浣撴兜鐩栬埅绌恒�佽埅澶┿�佽埞鑸躲�佸叺鍣ㄣ�佹苯杞︺�侀�氱敤鏈烘銆佺數瀛愮瓑鍒堕�犺涓氾紝閫氳繃涓庡鎴锋繁搴﹀悎浣滐紝鎵挎媴浜嗗椤瑰浗瀹剁骇杞欢鐮斿彂涓庢妧鏈湇鍔¢」鐩紝鎷ユ湁澶氶」鍏锋湁鑷富鐭ヨ瘑浜ф潈鐨勮蒋浠朵骇鍝併�備负浜嗙粰瀹㈡埛鎻愪緵鏇村鐨勬妧鏈垱鏂拌兘鍔涘強鐩稿簲鐨勪紒涓氱骇绠$悊鏀拺骞冲彴锛屽畯鍗氳繙杈剧爺鍙戜簡鍏锋湁鑷富鐭ヨ瘑浜ф潈鐨勪紒涓氱骇淇℃伅鍖栨暣浣撹В鍐虫柟妗堬紝鍚屾椂閽堝瀹㈡埛鐨勭壒瀹氶渶姹傦紝鎻愪緵浜嗛珮搴﹀彲瀹氬埗鐨勪笓涓氬簲鐢ㄣ�備负浜嗚繘涓�姝ユ彁鍗囨妧鏈湇鍔¤兘鍔涳紝瀹忓崥杩滆揪鎶曞叆涓撻棬鍔涢噺鍦ㄥ墠娌挎妧鏈柟闈㈣繘琛屾帰绱紝鍦ㄤ紒涓氱鏈変簯璁$畻鍜屽ぇ鏁版嵁绛夐鍩熶笉鏂彇寰楃獊鐮淬�傞殢鐫�鏂颁竴浠d笟鍔′笌绠$悊鎶�鏈钩鍙扮殑鎺ㄥ嚭锛屾洿澧炲己浜嗗叕鍙镐负瀹㈡埛鎻愪緵楂樿川閲忋�佸叏鏂逛綅銆佹繁灞傛鏈嶅姟鐨勬妧鏈兘鍔涖�傚畯鍗氳繙杈句竴鐩寸鎵库�滅敤鏅烘収涓哄鎴峰垱閫犱环鍊尖�濈殑瀹楁棬锛屾効浠モ�滆瘹淇¤礋璐b�濈殑鎬佸害鍜屼笓涓氬寲鐨勬湇鍔★紝鍦ㄤ紒涓氫俊鎭寲鍙戝睍鐨勯亾璺笂锛屼笌瀹㈡埛涓�璧锋垚闀匡紝鍏卞悓瑙佽瘉鎴愬姛锛�', + loading: false, activeNames: ['1', '2', '3', '5'], logActiveNames: ['28'], topOption: { data: [] + }, + chartOptions: { + title: { + text: '', + }, + tooltip: { + trigger: 'item' + }, + legend: { + top: '5%', + left: 'center' + }, + series: [ + { + name: '鏃ュ織缁熻', + type: 'pie', + radius: ['45%', '70%'], + avoidLabelOverlap: false, + padAngle: 5, + itemStyle: { + borderRadius: 10, + normal: { + color: function (colors) { + const colorList = ['rgb(230, 71, 88)', 'rgb(178, 159, 255)', 'rgb(27, 201, 142)']; + return colorList[colors.dataIndex]; + } + } + }, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: true, + fontSize: 14, + fontWeight: 'bold' + } + }, + labelLine: { + show: false + }, + data: [] + } + ] } }; }, @@ -105,43 +153,63 @@ this.getLogHandler(); }, methods: { - handleChange(val) { - window.console.log(val); - }, - getLogHandler() { this.loading = true; - const logTypes = ["4", "1", "3"]; // 鎿嶄綔鏃ュ織銆佺櫥褰曟棩蹇椼�佹巿鏉冩棩蹇楃殑 logType - const logNames = ["鎿嶄綔鏃ュ織缁熻", "鐧诲綍鏃ュ織缁熻", "鎺堟潈鏃ュ織缁熻"]; // 瀵瑰簲鐨勬棩蹇楀悕绉� - const textList = ["褰撳墠鐧诲綍鏃ュ織鎬昏褰曟暟", "褰撳墠鎺堟潈鏃ュ織鎬昏褰曟暟", "褰撳墠鎿嶄綔鏃ュ織鎬昏褰曟暟"]; - const color = ['rgb(27, 201, 142)', 'rgb(230, 71, 88)', 'rgb(178, 159, 255)'] - const router = ['/LogOperateMain?logType=4&roleType=2', '/LogInfoMain?logType=1&roleType=2', '/LogAuthorizeMain?logType=3&roleType=2'] + + // 鏃ュ織璇锋眰鍜屽睍绀虹殑鐩稿叧鐨勯厤缃� + const logConfig = [ + { + logType: "1", + logName: "鐧诲綍鏃ュ織缁熻", + text: "褰撳墠鐧诲綍鏃ュ織鎬昏褰曟暟", + color: 'rgb(230, 71, 88)', + router: '/LogInfoMain?logType=1&roleType=2' + }, + { + logType: "3", + logName: "鎺堟潈鏃ュ織缁熻", + text: "褰撳墠鎺堟潈鏃ュ織鎬昏褰曟暟", + color: 'rgb(178, 159, 255)', + router: '/LogAuthorizeMain?logType=3&roleType=2' + }, + { + logType: "4", + logName: "鎿嶄綔鏃ュ織缁熻", + text: "褰撳墠鎿嶄綔鏃ュ織鎬昏褰曟暟", + color: 'rgb(27, 201, 142)', + router: '/LogOperateMain?logType=4&roleType=2' + }, + ]; + const roleType = "2"; - const requests = logTypes.map(logType => getLogListByContion(1, -1, {logType, roleType})); + const requests = logConfig.map(config => getLogListByContion(1, -1, {logType: config.logType, roleType})); Promise.all(requests).then(responses => { - // console.log('responses', responses); - // 璁$畻鎬诲拰 - const allcount = responses.reduce((sum, res) => sum + (res.data.total || 0), 0); + // 璁$畻涓変釜鏃ュ織鐨勬�诲拰 + const totalCount = responses.reduce((sum, res) => sum + (res.data.total || 0), 0); - this.topOption.data = responses.map((res, index) => { - return { - title: logNames[index], - text: textList[index], - color: color[index], - subtitle: '瀹炴椂', - count: res.data.total, - allcount: '鏃ュ織鎬绘暟锛�' + allcount, - key: '鏃ュ織', - click: () => { - this.$router.push({path:router[index]}); - }, - }; - }); + this.topOption.data = responses.map((res, index) => ({ + title: logConfig[index].logName, + text: logConfig[index].text, + color: logConfig[index].color, + subtitle: '瀹炴椂', + count: res.data.total, + allcount: `鏃ュ織鎬绘暟锛�${totalCount}`, + key: '鏃ュ織', + click: () => this.$router.push({path: logConfig[index].router}), + })); + + const chartData = responses.map((res, index) => ({ + name: logConfig[index].logName, + value: res.data.total, + })); + this.$set(this.chartOptions.series[0], 'data', chartData); + this.loading = false; }).catch(error => { - console.error("An error occurred:", error); + this.$message.error(error); + this.loading = false; }); } }, @@ -156,5 +224,10 @@ .avue-text-ellipsis__text { font-size: 14px !important; } + +#chart { + width: 100%; + height: 309px; +} </style> -- Gitblit v1.9.3