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 0000000..cb31871 Binary files /dev/null and b/base-vue/src/assets/img/user_bg.jpg differ 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 @@ } -