From b2caa9f5c44ea1185db78b434048abdc1700b2ab Mon Sep 17 00:00:00 2001 From: lion <120344285@qq.com> Date: Tue, 4 Mar 2025 17:54:41 +0800 Subject: [PATCH] up --- src/components/XyTable/index.vue | 2 +- src/components/myecharts/index.vue | 4 +- src/views/dashboard/index.vue | 285 ++++++++++++++++++++--------- src/views/record/index.vue | 9 +- 4 files changed, 210 insertions(+), 90 deletions(-) diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue index 91686c6..2dee8cb 100644 --- a/src/components/XyTable/index.vue +++ b/src/components/XyTable/index.vue @@ -217,7 +217,7 @@ export default { let paginationHeight = this.isPage ? 37 : 0; //分页的高度 let topHeight = 20; //页面 头部 this.tableHeight = - clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25; + clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 55; //console.log(this.tableHeight) this.$emit("getHeight",this.tableHeight) }, diff --git a/src/components/myecharts/index.vue b/src/components/myecharts/index.vue index c6cf66d..16ec275 100644 --- a/src/components/myecharts/index.vue +++ b/src/components/myecharts/index.vue @@ -110,13 +110,13 @@ grid: { left: '20', right: '20', - top: '40', + top: '60', bottom: '20', containLabel: true }, color: this.colors, //自定义颜色 - legend: {}, + legend: currentData.legend||{}, tooltip: { //提示框浮层内容格式器 // trigger: "axis", // formatter: currentData.formatter, //自定义格式 diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 8aff53f..af62f59 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -59,11 +59,13 @@
+ +
- - -
暂无数据
+ + -
暂无数据
+ @@ -115,8 +118,8 @@ } from "@/api/home" import { index - } from "@/api/system/baseForm.js" - import state from '@/store/modules/user.js' + } from "@/api/system/baseForm.js" + import state from '@/store/modules/user.js' export default { components: { myecharts, @@ -130,8 +133,8 @@ // areasTotal: 0, status1Total: 0, dateTotal: 0 - }, - stateObj: {}, + }, + stateObj: {}, nowDate: '', // 月度统计 list_areas: [], @@ -144,6 +147,7 @@ area_id: '' }, overall_month_data: {}, + budget_data: {}, // 年度统计 yearSelect: { year: '', @@ -162,7 +166,7 @@ }, created() { this.monthSelect.year = this.$moment(new Date).format("YYYY") - this.yearSelect.year = this.$moment(new Date).format("YYYY") + this.yearSelect.year = this.$moment(new Date).format("YYYY") this.stateObj = state.state this.init() this.getRecords() @@ -218,11 +222,11 @@ // 获取 业务 changeBussiness(e) { this.list_business.map(item => { - if (e === item.id) { - // 如果是管理员 变更 区域 - if(this.stateObj.is_admin){ - this.list_areas = item.area_ids_details - this.monthSelect.area_id = this.list_areas[0].id + if (e === item.id) { + // 如果是管理员 变更 区域 + if (this.stateObj.is_admin) { + this.list_areas = item.area_ids_details + this.monthSelect.area_id = this.list_areas[0].id } this.list_type = item.id_business_types_business_id_relation.filter(item => { @@ -255,31 +259,31 @@ page: 1, table_name: 'businesses', json_data_fields: ['area_ids'], - }) - - // 区域只能查看自己的 业务 - // 初始化赋值 获取月度统计 - // 区域只能看到自己的 不用选择区域了，业务数据并选择 - if(!this.stateObj.is_admin){ - this.list_business = res.data.filter(item => { - return item.area_ids.includes(this.stateObj.area_id) - }) - this.monthSelect.business_id = this.list_business[0].id - this.monthSelect.area_id = this.stateObj.area_id - this.list_type = this.list_business[0].id_business_types_business_id_relation.filter(item => { - return item.area_id == this.monthSelect.area_id - }) - this.monthSelect.business_type_id = this.list_type[0].id - }else{ - this.list_business = res.data.reverse() - this.monthSelect.business_id = res.data[0].id - this.list_areas = res.data[0].area_ids_details - this.monthSelect.area_id = this.list_areas[0].id - this.list_type = res.data[0].id_business_types_business_id_relation.filter(item => { - return item.area_id == this.monthSelect.area_id - }) - this.monthSelect.business_type_id = this.list_type[0].id - } + }) + + // 区域只能查看自己的 业务 + // 初始化赋值 获取月度统计 + // 区域只能看到自己的 不用选择区域了，业务数据并选择 + if (!this.stateObj.is_admin) { + this.list_business = res.data.filter(item => { + return item.area_ids.includes(this.stateObj.area_id) + }) + this.monthSelect.business_id = this.list_business[0].id + this.monthSelect.area_id = this.stateObj.area_id + this.list_type = this.list_business[0].id_business_types_business_id_relation.filter(item => { + return item.area_id == this.monthSelect.area_id + }) + this.monthSelect.business_type_id = this.list_type[0].id + } else { + this.list_business = res.data.reverse() + this.monthSelect.business_id = res.data[0].id + this.list_areas = res.data[0].area_ids_details + this.monthSelect.area_id = this.list_areas[0].id + this.list_type = res.data[0].id_business_types_business_id_relation.filter(item => { + return item.area_id == this.monthSelect.area_id + }) + this.monthSelect.business_type_id = this.list_type[0].id + } @@ -296,6 +300,7 @@ let dMonth = this.getMonthArr(res.list) this.overall_month_data.x = xMonth this.overall_month_data.list = dMonth + console.log("this.overall_month_data", this.overall_month_data) }, // 月度数据根据类别 归类 getMonthArr(list) { @@ -317,17 +322,14 @@ name, business_data_id, type: 'bar', - barGap: '0%', - // barWidth: '30%', // 设置柱子粗细 - + barGap: '0%', + // barWidth: '30%', // 设置柱子粗细 data: Array(12).fill(0), // 初始化长度为12且值全为0的数组 label: { show: true, position: 'top', color: "#333", formatter: function(para) { - console.log(para) - if (para.value > 0) { if (para.seriesName.includes('费用') || para.seriesName.includes('补贴')) { return para.value + '万元' @@ -359,7 +361,7 @@ async getYearList() { await this.getAreas() await this.getYearChart() - }, + }, async getAreas() { const res = await index({ @@ -369,12 +371,12 @@ sort_type: 'ASC', sort_name: 'sort', }) - this.all_areas = res.data - // 只能查看自己区域的业务 - if(!this.stateObj.is_admin){ - this.yearSelect.area_id = this.stateObj.area_id - }else{ - this.yearSelect.area_id = this.all_areas[0].id + this.all_areas = res.data + // 只能查看自己区域的业务 + if (!this.stateObj.is_admin) { + this.yearSelect.area_id = this.stateObj.area_id + } else { + this.yearSelect.area_id = this.all_areas[0].id } }, async getYearChart() { @@ -382,32 +384,90 @@ year: this.yearSelect.year, area_id: this.yearSelect.area_id }) - // this.yearList = res.list - // this.yearBudgets = res.budgets this.yearsArr = this.getYearObj(res.list, res.budgets) console.log("getYearObj", this.getYearObj(res.list, res.budgets)) - // let xMonth = this.monthArr - // let dMonth = this.getMonthArr(res.list) - // this.overall_month_data.x = xMonth - // this.overall_month_data.list = dMonth }, + // 合并预算 和业务数据 getYearObj(list, budgets) { let flatBudgets = [].concat(...budgets); - let yearObjs = []; - for (let name in list) { + let yearObjs = []; + let budget_data_x = [] + this.budget_data.list.map(item=>{ + item.data = [] + }) + for (let name in list) { + budget_data_x.push(name) + if (list.hasOwnProperty(name)) { let yearObj = { name: name, - budgets: [], - list: list[name] + budgets: { + }, + list: { + trigger: 'item', + xShow: false, + yShow: false, + all_year: 0, + legend: { + left: 'left', + top: 0 + }, + list: [{ + name: name, + type: 'pie', + radius: '60%', + tooltip: { + formatter: function(item) { + console.log(item) + let result = `${item.seriesName}
`; + const name = item.name; // 系列名称 + const value = item.value; // 数据值 + const marker = item.marker; // 标志图形 + const unit = item.name.includes('费用') || item.name.includes('补贴') ? '万元' : '' + result += `${marker}${name}: ${value}${unit}
`; + return result; + }, + }, + data: [], + label: { + show: true, + position: 'outer', + }, + }] + }, }; let matchedBudgets = flatBudgets.filter(budget => list[name].some(item => item.business_id === budget.business_id) ); - yearObj.budgets = matchedBudgets; + console.log(name, list[name], matchedBudgets) + // 年度预算 + this.budget_data.list.map(item=>{ + if(item.id==='quarter_1'){ + item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_1/10000 : 0) + }else if(item.id==='quarter_2'){ + item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_2/10000 : 0) + }else if(item.id==='quarter_3'){ + item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_3/10000 : 0) + }else if(item.id==='quarter_4'){ + item.data.push(matchedBudgets.length > 0 ? matchedBudgets[0].quarter_4/10000 : 0) + } + }) + // 业务数据 + list[name].map(item => { + let last_total = item.total + if (item.name.includes('费用') || item.name.includes('补贴')) { + last_total = item.total / 10000 + } + yearObj.list.list[0].data.push({ + name: item.name, + value: last_total + }) + }) yearObjs.push(yearObj); + console.log("budget_data", this.budget_data) } - } + } + this.budget_data.x = budget_data_x return yearObjs }, @@ -418,10 +478,6 @@ this.overall_month_data = { xShow: true, yShow: true, - // rotate: 20, - // formatter:function(params){ - // return that.chartFomatter(params) - // }, xAxis: { axisLabel: { show: true, @@ -445,21 +501,84 @@ list: [] } this.overall_year_data = { - trigger: 'item', - xShow: false, - yShow: false, - list: [{ - name: '档案数', - type: 'pie', - radius: '80%', - // center:['20%','20%'], - data: [], + trigger: 'item', + xShow: false, + yShow: false, + list: [{ + name: '档案数', + type: 'pie', + radius: '80%', + // center:['20%','20%'], + data: [], + label: { + show: true, + position: 'center' + }, + }] + }, + this.budget_data = { + xShow: true, + yShow: true, + xAxis: { + axisLabel: { + show: true, + // rotate: 35, //35度角倾斜显示 + }, + }, + formatter: function(params) { + let result = `${params[0].name}
`; + params.forEach(function(item) { + // item 是每一个系列的数据 + const seriesName = item.seriesName; // 系列名称 + const value = item.value; // 数据值 + const marker = item.marker; // 标志图形 + const unit = '万元' + result += `${marker}${seriesName}: ${value}${unit}
`; + }); + return result; + }, + x: [], + list: [] + } + let four = [{ + name: '第一季度', + id: 'quarter_1' + }, { + name: '第二季度', + id: 'quarter_2' + }, { + name: '第三季度', + id: 'quarter_3' + }, { + name: '第四季度', + id: 'quarter_4' + }] + four.map(item => { + this.budget_data.list.push({ + name:item.name, + id:item.id, + type: 'bar', + barGap: '0%', + // barWidth: '30%', // 设置柱子粗细 + data: [], // 初始化长度为12且值全为0的数组 label: { show: true, - position: 'center' + position: 'top', + color: "#333", + formatter: function(para) { + if (para.value > 0) { + if (para.seriesName.includes('费用') || para.seriesName.includes('补贴')) { + return para.value + '万元' + } else { + return para.value + } + } else { + return '' + } + } }, - }] - } + }) + }) } }, } @@ -511,8 +630,8 @@ &-item { // width: 30%; - flex-basis: 30%; - margin-right: 2%; + flex-basis: 32%; + margin: 0.5%; margin-bottom: 20px; } } diff --git a/src/views/record/index.vue b/src/views/record/index.vue index c15384b..75a340f 100644 --- a/src/views/record/index.vue +++ b/src/views/record/index.vue @@ -3,7 +3,7 @@
-
@@ -99,10 +99,11 @@
-
+
+