From d6686c286aba410c92ecf2ca311580e2fff5fd9d Mon Sep 17 00:00:00 2001 From: caill <815519168@qq.com> Date: Thu, 16 Oct 2025 11:00:46 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- base-vue/package.json | 5 +- base-vue/src/assets/img/user_bg.jpg | Bin 0 -> 2893 bytes base-vue/src/views/common/home copy.vue | 159 +++ base-vue/src/views/common/home.vue | 1226 ++++++++++++++++++++--- base-vue/src/views/common/login.vue | 2 +- base-vue/yarn.lock | 121 +-- 6 files changed, 1261 insertions(+), 252 deletions(-) create mode 100644 base-vue/src/assets/img/user_bg.jpg create mode 100644 base-vue/src/views/common/home copy.vue diff --git a/base-vue/package.json b/base-vue/package.json index 2644ca6..972097c 100644 --- a/base-vue/package.json +++ b/base-vue/package.json @@ -22,7 +22,7 @@ "bpmn-js-properties-panel": "^0.33.0", "camunda-bpmn-moddle": "^4.3.0", "docxtemplater": "^3.60.2", - "echarts": "^5.4.2", + "echarts": "^6.0.0", "element-ui": "^2.15.14", "file-saver": "^2.0.5", "gulp": "4.0.2", @@ -41,6 +41,7 @@ "vue": "2.5.16", "vue-cookie": "1.1.4", "vue-router": "3.0.1", + "vue-seamless-scroll": "^1.1.23", "vuex": "3.0.1" }, "devDependencies": { @@ -54,7 +55,7 @@ "babel-plugin-transform-runtime": "6.22.0", "babel-preset-env": "1.3.2", "babel-preset-stage-2": "6.22.0", - "babel-regis额ter": "6.22.0", + "babel-register": "6.22.0", "chalk": "2.3.0", "copy-webpack-plugin": "4.0.1", "cross-spawn": "5.0.1", diff --git a/base-vue/src/assets/img/user_bg.jpg b/base-vue/src/assets/img/user_bg.jpg new file mode 100644 index 0000000000000000000000000000000000000000..cb3187143edc7d0cf6fa442881d17f34d277e8cf GIT binary patch literal 2893 zcma)8dr(tX8b3Er3K0^C4i=Ex^r3Z2o{$#=f&?tPO?gy7l-lNT2{GhBaw7p<4wMgXf z2n}YZkr0}kc9GBE5=n$&5z5T=xeO*7LE=WjVs&T)6Wu)m+-lYc%F^{>y(^cfvOZhy zCSIt2ez~dMW>T32*;#m|Pwlh2>;!4RefDaHNA1%Hg5YWxQ_~^=9^69OG=dz86B z;(|AgAQV(>ZLP3YCUm+jB8f_+5{acEsWcUKqYo$DqHq|?3J>8zf~Vo{Zobb6|sE<86EU#vHntPbk^>7avNuP$(SNQ1*f6zDVp zfDl@(W_7MqE?49$R4TDjE|KKJQ>M(zQ{>8*DwpO+Wzrd6ozvvC6Ap65*ZjaYC#)}} z1-lEFb%fixjxguDopwAJv)UT|EQ+vrAzyR&vna#*ir_FJsJ&Fyg6`6aXf3Uzg^crF@7z`$Z#bmM`VZkpZip7eG;Y3HrL`QSDoS<(pgf zr6{6k4Kj;WP=D}F;rPX|mH;aMjOetN-#II8dz#$2qnH9=1c|b{9m1*0qG*@^rpqnK zE2j=MJ@;A1zo{)@jefm#F%6+;$P&V%(X9=iuMu~cVnkmx$(B`}Yf>H=&+sqW_ha*0 z>q~9QRY2+}&Eo1crw#}CM~aJm>N&dr^?A^6z%F0v&xnkz$Lt4lX0LpOv?q1A_f&8 zVmFtjmbZW3^5@^(*k~V1>lmy(d~y28>5(mva$4i=0~3oXYIa{biy9ExgSN=di#v|& zf6x1N-HPxmu#)1s2~P-sI~xi1=IW+ysj_hBWPboPUX^}+5EK+GU3+)?*FTJJlU1zN zLbg#6ZyD#i@k{4@W38EKk+pGm^B<@)G=M;&XfWJ@P@HPV)^AU>CH!3a(vFRl{*zxS zz8>{Z0$kvIMR{@jN}p|06)1@+$#7euan&)O+x|BSB%EQBB1jk*1JcC{MgzgM{bk=F zwaf4L=)mNLmpEE`iZN;&bH6$4hJ~*G^hFpbe zjv;6n9!Q{h^>gk^7uv5630rG_OzXSa3%QcnviB(p<+hA>L)FL}=}X%=P^Phv-pCB( zjb5lVaB!JaL9|ePv`}W9IM%tLQeJbTd}B$EV*RKGq>*p8+#VSlIbKO>0kR0?%{}p_ zN=;P0rR?QM6xd`TXSQK<3`}=lTO(J>&NbIh6<)B79=~V&VhLPG1MU7bj@IhIG93i1 z#rTM2ZG6gb;tW3$Jlp?;m_aoK)sMPhA@ZO#QthsPZS}3n-nH&lPvcliR}m9gPTl*> zH$7?X2ihBgf<^Q!v!RZB+dHsug*E~OHtFP0|IhNMmM;#Kn<_(vd%RkHc;a?bVaD`s zqxWUROiKU#rOoYg?!D zv-N*9{`~$%PdD6mL;J6LoXNla$JGYt!#xQ0Y_R{)mO6B_t2bg4uRnr87PO&Eg$jW^ zB`_LmpFheTw%@#PX}aPYgdJIN_R1X7hb#SW1Oq_GGXQEWJvf-OI-*+H=QE!`^Qg-S zgbHf9FDU4Vre=T7-9rEEe%0xn2s`$|nN~f(w`}KQMNle)eEmOpDmq&~RjVVMAJGG6 F{ttdf?^XZ+ literal 0 HcmV?d00001 diff --git a/base-vue/src/views/common/home copy.vue b/base-vue/src/views/common/home copy.vue new file mode 100644 index 0000000..c738ff4 --- /dev/null +++ b/base-vue/src/views/common/home copy.vue @@ -0,0 +1,159 @@ + + + + + + diff --git a/base-vue/src/views/common/home.vue b/base-vue/src/views/common/home.vue index c738ff4..0a7d554 100644 --- a/base-vue/src/views/common/home.vue +++ b/base-vue/src/views/common/home.vue @@ -1,159 +1,1081 @@ - - - - - + updateContentHeight() { + if (this.$parent && this.$parent.$el) { + const parentHeight = this.$parent.$el.clientHeight; + this.contentHeight = parentHeight - 40; + } + }, + setEchart1 () { + if (this.echartInstance1) { + this.echartInstance1.dispose(); + } + if (!this.$refs.echartContainer1) { + return; + } + this.echartInstance1 = echarts.init(this.$refs.echartContainer1); + let barName = [2024, 2025] + let barData1 = [12, 9] + let barData2 = [48, 60] + let option = { + title: { + text: '合同同比', + left: 'center', + top: '0', + textStyle: { + color: '#475469', + fontSize: 13, + lineHeight: 13, + fontWeight: 700 + } + }, + grid: { + top: 30, + left: 0, + right: 0, + bottom: 20, + containLabel: true + }, + legend: { + icon: 'rect', + bottom: '0', + left: 'center', + textStyle: { + color: '#475469', + fontSize: 12, + lineHeight: 12 + }, + itemWidth: 8, + itemHeight: 8, + data: ['合同数', '金额（万元）'] + }, + xAxis: { + type: 'category', + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + width: 1, + color: '#c6cad7' + } + }, + axisLabel: { + interval: 0, + color: '#89929e', + fontSize: 12, + lineHeight: 12, + margin: 10 + }, + data: barName + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + splitNumber: 4, + axisTick: { + show: false + }, + axisLabel: { + color: '#89929e', + fontSize: 12 + }, + splitLine: { + show: true, + lineStyle: { + type: [4, 3], + color: '#b4b9d3' + } + } + }, + series: [ + { + name: '合同数', + type: 'bar', + barWidth: '10', + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#0E5FFF', + }, + { + offset: 1, + color: '#2DE1FD', + }, + ]), + }, + }, + data: barData1 + }, + { + name: '金额（万元）', + type: 'bar', + barWidth: '10', + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#FFA600', + }, + { + offset: 1, + color: '#FEDB65', + }, + ]), + } + }, + data: barData2 + } + ] + } + this.echartInstance1.setOption(option); + }, + setEchart2 () { + if (this.echartInstance2) { + this.echartInstance2.dispose(); + } + if (!this.$refs.echartContainer2) { + return; + } + this.echartInstance2 = echarts.init(this.$refs.echartContainer2); + let barName = [2024, 2025] + let barData1 = [12, 9] + let barData2 = [48, 60] + let option = { + title: { + text: '近1年合同趋势', + left: 'center', + top: '0', + textStyle: { + color: '#475469', + fontSize: 13, + lineHeight: 13, + fontWeight: 700 + } + }, + grid: { + top: 30, + left: 0, + right: 0, + bottom: 20, + containLabel: true + }, + legend: { + icon: 'rect', + bottom: '0', + left: 'center', + textStyle: { + color: '#475469', + fontSize: 12, + lineHeight: 12 + }, + itemGap: 10, + itemWidth: 8, + itemHeight: 8, + data: ['合同数', '金额（万元）'] + }, + xAxis: { + type: 'category', + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + width: 1, + color: '#c6cad7' + } + }, + axisLabel: { + interval: 0, + color: '#89929e', + fontSize: 12, + lineHeight: 12, + margin: 10 + }, + data: barName + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + splitNumber: 4, + axisTick: { + show: false + }, + axisLabel: { + color: '#89929e', + fontSize: 12 + }, + splitLine: { + show: true, + lineStyle: { + type: [4, 3], + color: '#b4b9d3' + } + } + }, + series: [ + { + name: '合同数', + type: 'line', + barWidth: '10', + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#0E5FFF', + }, + { + offset: 1, + color: '#2DE1FD', + }, + ]), + }, + }, + data: barData1 + }, + { + name: '金额（万元）', + type: 'line', + barWidth: '10', + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#FFA600', + }, + { + offset: 1, + color: '#FEDB65', + }, + ]), + } + }, + data: barData2 + } + ] + } + this.echartInstance2.setOption(option); + }, + setEchart3 () { + if (this.echartInstance3) { + this.echartInstance3.dispose(); + } + if (!this.$refs.echartContainer3) { + return; + } + this.echartInstance3 = echarts.init(this.$refs.echartContainer3); + const barName = ['未修合同数', '已修合同数'] + let option = { + color: ['#165DFF', '#2CB8C5'], + title: { + text: '维修合同占比', + left: 'center', + top: '0', + textStyle: { + color: '#475469', + fontSize: 13, + lineHeight: 13, + fontWeight: 700 + } + }, + grid: { + top: 30, + left: 0, + right: 0, + bottom: 20, + containLabel: true + }, + legend: { + icon: 'rect', + bottom: '0', + left: 'center', + textStyle: { + color: '#475469', + fontSize: 12, + lineHeight: 12 + }, + itemGap: 10, + itemWidth: 8, + itemHeight: 8, + data: barName + }, + series: [ + { + name: '维修合同占比', + type: 'pie', + radius: ['60%', '80%'], + label: { + normal: { + show: true, + position: "inside", + fontSize: 14, + fontWeight: 700, + color: "#fff", + padding: 4, + borderRadius: 6, + backgroundColor: '#ff8d00', + formatter: (params) => { + return `${params.percent.toFixed(0)}%`; // 显示百分比，保留一位小数 + } + } + }, + labelLine: { + normal: { + show: false + } + }, + data: [{name: '未修合同数', value: 33, key: 1}, {name: '已修合同数', value: 67, key: 2}], + } + ] + } + this.echartInstance3.setOption(option); + }, + setEchart4 () { + if (this.echartInstance4) { + this.echartInstance4.dispose(); + } + if (!this.$refs.echartContainer4) { + return; + } + this.echartInstance4 = echarts.init(this.$refs.echartContainer4); + //绿 + const linearColorGreen=[ + { offset: 0, color: '#5ADDBF' }, + { offset: 1, color: '#47A3F0' } + ] + //蓝 + const linearColorBlue=[ + { offset: 0, color: '#489CFD' }, + { offset: 1, color: '#1C5FFE' } + ] + //粉 + const linearColorPink=[ + { offset: 0, color: '#EC83BA' }, + { offset: 1, color: '#BC34E9' } + ] + let option = { + title: { + text: '维修单', + left: 'center', + top: '0', + textStyle: { + color: '#475469', + fontSize: 13, + lineHeight: 13, + fontWeight: 700 + } + }, + grid: { + top: 30, + left: 0, + right: 0, + bottom: 20, + containLabel: true + }, + legend: { + icon: 'rect', + bottom: '0', + left: 'center', + textStyle: { + color: '#475469', + fontSize: 12, + lineHeight: 12 + }, + itemGap: 10, + itemWidth: 8, + itemHeight: 8, + formatter: (name) => { + return name + } + }, + xAxis: { + type: 'category', + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + width: 1, + color: '#c6cad7' + } + }, + axisLabel: { + interval: 0, + color: '#89929e', + fontSize: 12, + lineHeight: 12, + margin: 10 + }, + data: ['维修单数', '已完成', '未完成'] + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + splitNumber: 4, + axisTick: { + show: false + }, + axisLabel: { + color: '#89929e', + fontSize: 12 + }, + splitLine: { + show: true, + lineStyle: { + type: [4, 3], + color: '#b4b9d3' + } + } + }, + series: [ + { + name: '维修单数', + type: 'bar', + barGap: '-100%', + barWidth: 20, + itemStyle: { + normal: { + color: this.generateLinearColorV(linearColorGreen) + } + }, + data: [22, 0, 0] + }, + { + name: '已完成', + type: 'bar', + barGap: '-100%', + barWidth: 20, + itemStyle: { + normal: {color: this.generateLinearColorV(linearColorBlue)} + }, + data: [0, 14, 0] + }, + { + name: '未完成', + type: 'bar', + barGap: '-100%', + barWidth: 20, + itemStyle: { + normal: {color: this.generateLinearColorV(linearColorPink)} + }, + data: [0, 0, 8] + } + ] + } + this.echartInstance4.setOption(option); + }, + setEchart5 () { + if (this.echartInstance5) { + this.echartInstance5.dispose(); + } + if (!this.$refs.echartContainer5) { + return; + } + this.echartInstance5 = echarts.init(this.$refs.echartContainer5); + let barName = ['新锐项目', '晟华项目', '华祥项目', '海亮项目', '恒森项目', '立信项目', '富佳项目', '中钨项目', '东丽项目', '诺力项目'] + let barData = [16, 10, 8, 7, 6, 2, 1, 0, 0, 0] + let defaultData = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20] + let option = { + title: { + text: '项目维修单数TOP10', + left: 'center', + top: '0', + textStyle: { + color: '#475469', + fontSize: 13, + lineHeight: 13, + fontWeight: 700 + } + }, + grid: { + top: 30, + left: 0, + right: 0, + bottom: 0, + containLabel: true + }, + xAxis: { + type: 'value', + show: false + }, + yAxis: [ + { + type: 'category', + inverse: true, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + data: barName, + axisLabel: { + color: '#89929e', + fontSize: 12 + } + }, + { + show: true, + type: 'category', + axisTick: 'none', + axisLine: 'none', + axisLabel: { + align: 'left', + textStyle: { + fontSize: 12, + fontWeight: 'bold', + color: '#02BC8F' + } + }, + data: barData + } + ], + series: [ + { + name: '维修单数', + type: 'bar', + barWidth: '10', + zlevel: 1, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ + { + offset: 0, + color: '#0E5FFF', + }, + { + offset: 1, + color: '#2DE1FD', + }, + ]), + }, + }, + data: barData + }, + { + name: '背景', + type: 'bar', + barWidth: '10', + barGap: '-100%', + data: defaultData, + itemStyle: { + normal: { + color: '#c6cad7', + barBorderRadius: 0 + } + } + } + ] + } + this.echartInstance5.setOption(option); + }, + generateLinearColorV (linearColor = []) { + // linearColor格式 + // [ + // { offset: 0, color: '#83bff6' }, + // { offset: 0.5, color: '#188df0' }, + // { offset: 1, color: '#188df0' } + // ] + return new echarts.graphic.LinearGradient(0, 0, 0, 1, linearColor); + }, + generateLinearColorH (linearColor = []) { + // linearColor格式 + // [ + // { offset: 0, color: '#83bff6' }, + // { offset: 0.5, color: '#188df0' }, + // { offset: 1, color: '#188df0' } + // ] + return new echarts.graphic.LinearGradient(1, 0, 0, 0, linearColor); + } + } + }; + + + + \ No newline at end of file diff --git a/base-vue/src/views/common/login.vue b/base-vue/src/views/common/login.vue index 1a0f0bb..ef01468 100644 --- a/base-vue/src/views/common/login.vue +++ b/base-vue/src/views/common/login.vue @@ -106,7 +106,7 @@ } -