wangyifang
/
sstt-archives-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
lion 10 months ago
parent e85f0b1a19
commit 82625e933c
7 changed files with 438 additions and 117 deletions
Show Stats Download Patch File Download Diff File

16
src/api/home/index.js
Unescape View File

@ -7,3 +7,19 @@ export function home(params){
params
})
}
export function yearChart(params){
return request({
method:'get',
url:'/api/fill-datas-total-chart',
params
})
}
export function fillChart(params){
return request({
method:'get',
url:'/api/fill-datas-chart',
params
})
}

15
src/views/dashboard/components/PanelGroup.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="boxlist">
<div class="box box1">
<!-- <div class="box box1">
<div class="boxtitle">
<span>档案统计</span>
<i class="el-icon-data-line statIcon"></i>
@ -51,7 +51,7 @@
</div>
</div>
</div>
</div>
</div> -->
<div class="box box5" @click="toUrl(2)">
<div class="boxtitle">
<span>预警提醒</span>
@ -101,9 +101,9 @@
totaldata: {
type: Object,
default: {
recordsTotal:0,
organizesTotal:0,
areasTotal:0,
// recordsTotal:0,
// organizesTotal:0,
// areasTotal:0,
status1Total:0,
dateTotal:0
}
@ -135,7 +135,7 @@
<style lang="scss" scoped>
.boxlist {
display: flex;
justify-content: space-between;
justify-content: center;
}
.statIcon {
@ -166,7 +166,8 @@
.box {
position: relative;
width: 19%;
width: 30%;
margin:0 5%;
// margin-left: 0.5%;
// margin-right: 0.5%;
margin-bottom: 10px;

497
src/views/dashboard/index.vue
Unescape View File

@ -6,13 +6,99 @@
<PanelGroup :totaldata="list"></PanelGroup>
</el-col>
<el-col :span="12" class="chartSize">
<div style="padding:10px;color:#b3241d;font-size:18px">月度上传档案统计</div>
<myecharts :width="'100%'" :height="'300px'" :data="overall_month_data"></myecharts>
<el-col :span="24" class="chartSize">
<div class="search">
<div class="title">月度业务统计</div>
<div class="search-wrap">
<div>
<el-date-picker @change="getFillChart" v-model="monthSelect.year" value-format="yyyy" type="year"
placeholder="选择年">
</el-date-picker>
</div>
<div>
<el-select style="width:100%" @change="changeBussiness" v-model="monthSelect.business_id"
placeholder="请选择业务">
<el-option v-for="item in list_business" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
<div>
<el-select style="width:100%" @change="changeArea" v-model="monthSelect.area_id" placeholder="请选择区域">
<el-option v-for="item in list_areas" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
<div>
<el-select style="width:100%" @change="getFillChart" v-model="monthSelect.business_type_id"
placeholder="请选择业务类别">
<el-option v-for="item in list_type" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</div>
<myecharts :width="'100%'" :height="'400px'" :data="overall_month_data"></myecharts>
</el-col>
<el-col :span="12" class="chartSize">
<div style="padding:10px;color:#b3241d;font-size:18px">组织档案统计</div>
<myecharts :width="'100%'" :height="'300px'" :data="overall_originze_data"></myecharts>
<el-col :span="24" class="chartSize">
<div class="search">
<div class="title">年度业务统计</div>
<div class="search-wrap">
<div>
<el-date-picker @change="getYearChart" v-model="yearSelect.year" value-format="yyyy" type="year"
placeholder="选择年">
</el-date-picker>
</div>
<div>
<el-select style="width:100%" @change="getYearChart" v-model="yearSelect.area_id" placeholder="请选择区域">
<el-option v-for="item in all_areas" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="yearData">
<div class="yearData-item" v-for="item in yearsArr">
<el-descriptions :title="item.name" direction="vertical" :column="1" border>
<el-descriptions-item label="年度预算">
<div v-if="item.budgets.length<1" style="text-align: center;">暂无数据</div>
<el-descriptions :column="2" v-else border v-for="budget in item.budgets">
<el-descriptions-item label="年度总预算" :span="2">
{{budget.all_year}}
</el-descriptions-item>
<el-descriptions-item label="第一季度预算">
{{budget.quarter_1}}
</el-descriptions-item>
<el-descriptions-item label="第二季度预算">
{{budget.quarter_2}}
</el-descriptions-item>
<el-descriptions-item label="第三季度预算">
{{budget.quarter_3}}
</el-descriptions-item>
<el-descriptions-item label="第四季度预算">
{{budget.quarter_4}}
</el-descriptions-item>
</el-descriptions>
</el-descriptions-item>
<el-descriptions-item label="业务数据">
<div v-if="item.list.length<1" style="text-align: center;">暂无数据</div>
<el-descriptions :column="1" border v-else>
<el-descriptions-item v-for="li in item.list" :label="li.name">
{{li.total}}
</el-descriptions-item>
</el-descriptions>
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- <myecharts :width="'100%'" :height="'300px'" :data="overall_year_data"></myecharts> -->
</el-col>
</el-row>
@ -23,10 +109,12 @@
import myecharts from '@/components/myecharts';
import PanelGroup from './components/PanelGroup';
import {
home
} from "@/api/home"
import {
index
home,
yearChart,
fillChart
} from "@/api/home"
import {
index
} from "@/api/system/baseForm.js"
export default {
components: {
@ -36,121 +124,300 @@
data() {
return {
list: {
recordsTotal: 0,
organizesTotal: 0,
areasTotal: 0,
status1Total:0,
dateTotal:0
},
nowDate:'',
// recordsTotal: 0,
// organizesTotal: 0,
// areasTotal: 0,
status1Total: 0,
dateTotal: 0
},
nowDate: '',
// 月度统计
list_areas: [],
list_business: [],
list_type: [],
monthSelect: {
year: '',
business_id: '',
business_type_id: '',
area_id: ''
},
overall_month_data: {},
overall_originze_data: {}
// 年度统计
yearSelect: {
year: '',
area_id: ''
},
yearsArr: [],
yearList: {},
all_areas: [],
overall_year_data: {},
monthArr: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
}
},
watch: {
},
created() {
this.listHome()
this.init()
this.getList()
this.getStatusList()
this.monthSelect.year = this.$moment(new Date).format("YYYY")
this.yearSelect.year = this.$moment(new Date).format("YYYY")
this.init()
this.getRecords()
this.getMonthList()
this.getYearList()
},
mounted() {
},
methods: {
// 获取 预警
async getList() {
// this.nowDate = this.$moment().format("YYYY-MM-DD")
this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
// console.log("this.nowDate",this.nowDate,this.startDate)
const res = await index({
page_size: 9999,
page: 1,
table_name: 'records',
is_auth: 1,
// catalogs_id: '',
// records_status:1
filter:[{
key:'status',
op:'eq',
value:0
},{
key:'end_date',
op:'range',
value:[this.startDate,this.nowDate]
}]
})
this.list.dateTotal = res.total
},
async getStatusList() {
// this.nowDate = this.$moment().format("YYYY-MM-DD")
this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
// console.log("this.nowDate",this.nowDate,this.startDate)
const res = await index({
page_size: 9999,
page: 1,
table_name: 'records',
is_auth: 1,
// catalogs_id: '',
// records_status:1
filter:[{
key:'status',
op:'eq',
value:1
}]
})
this.list.status1Total = res.total
methods: {
// 获取 预警
async getRecords() {
await this.getList()
await this.getStatusList()
},
async listHome() {
const res = await home()
this.list.recordsTotal = res?.recordsTotal
this.list.organizesTotal = res?.organizesTotal
this.list.areasTotal = res?.areasTotal
let xMonth = []
let dMonth = []
res.list.map(item => {
xMonth.push(item.month)
dMonth.push(item.count)
async getList() {
this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
const res = await index({
page_size: 9999,
page: 1,
table_name: 'records',
is_auth: 1,
filter: [{
key: 'status',
op: 'eq',
value: 0
}, {
key: 'end_date',
op: 'range',
value: [this.startDate, this.nowDate]
}]
})
this.overall_month_data.x = xMonth
this.overall_month_data.list[0].data = dMonth
let oData = []
res.organizesList.map(o => {
oData.push({
value: o.total,
name: o.name
this.list.dateTotal = res.total
},
async getStatusList() {
this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
const res = await index({
page_size: 9999,
page: 1,
table_name: 'records',
is_auth: 1,
filter: [{
key: 'status',
op: 'eq',
value: 1
}]
})
this.list.status1Total = res.total
},
// 获取 月度图表 相关
// 获取 业务
changeBussiness(e) {
this.list_business.map(item => {
if (e === item.id) {
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 => {
return item.area_id == this.monthSelect.area_id
})
this.monthSelect.business_type_id = this.list_type[0].id
this.getFillChart()
}
})
},
changeArea(e) {
this.list_business.map(item => {
if (this.monthSelect.business_id === item.id) {
this.list_type = item.id_business_types_business_id_relation.filter(item => {
return item.area_id == e
})
this.monthSelect.business_type_id = this.list_type[0].id
this.getFillChart()
}
})
},
async getMonthList() {
await this.getBusinessList()
await this.getFillChart()
},
async getBusinessList() {
const res = await index({
page_size: 9999,
page: 1,
table_name: 'businesses',
json_data_fields: ['area_ids'],
})
this.list_business = res.data
// 初始化赋值 获取月度统计
if (res.data.length > 0) {
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
}
},
async getFillChart() {
// const res1 = await yearChart()
const res = await fillChart({
business_id: this.monthSelect.business_id,
year: this.monthSelect.year,
business_type_id: this.monthSelect.business_type_id,
area_id: this.monthSelect.area_id
})
this.overall_originze_data.list[0].data = oData
let xMonth = this.monthArr
let dMonth = this.getMonthArr(res.list)
this.overall_month_data.x = xMonth
this.overall_month_data.list = dMonth
},
// 月度数据根据类别 归类
getMonthArr(list) {
// 定义正确的月份顺序
const monthsOrder = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
// 初始化归类对象
const categorizedData = {};
// 按照定义的顺序遍历 list 对象
monthsOrder.forEach(month => {
if (list[month]) {
list[month].forEach(item => {
const {
name,
business_data_id,
total
} = item;
if (!categorizedData[business_data_id]) {
categorizedData[business_data_id] = {
name,
business_data_id,
type: 'bar',
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 + '万元'
} else {
return para.value
}
} else {
return ''
}
}
},
};
}
// 将 total 添加到对应位置
let last_total = total
if (name.includes('费用') || name.includes('补贴')) {
last_total = total / 10000
}
categorizedData[business_data_id].data[parseInt(month) - 1] = last_total;
});
}
});
// 构建最终结果
const result = Object.values(categorizedData);
return result
},
// 获取年度统计
async getYearList() {
await this.getAreas()
await this.getYearChart()
},
async getAreas() {
const res = await index({
page_size: 999,
page: 1,
table_name: 'areas',
sort_type: 'ASC',
sort_name: 'sort',
})
this.all_areas = res.data
this.yearSelect.area_id = this.all_areas[0].id
},
async getYearChart() {
const res = await yearChart({
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) {
if (list.hasOwnProperty(name)) {
let yearObj = {
name: name,
budgets: [],
list: list[name]
};
let matchedBudgets = flatBudgets.filter(budget =>
list[name].some(item => item.business_id === budget.business_id)
);
yearObj.budgets = matchedBudgets;
yearObjs.push(yearObj);
}
}
return yearObjs
},
// 初始化图表
init() {
this.overall_month_data = {
xShow: true,
yShow: true,
rotate: 20,
// rotate: 20,
// formatter:function(params){
// return that.chartFomatter(params)
// },
xAxis: {
axisLabel: {
show: true,
rotate: 35, //35度角倾斜显示
// rotate: 35, //35度角倾斜显示
},
},
formatter: function(params) {
let result = `${params[0].name}<br/>`;
params.forEach(function(item) {
// item 是每一个系列的数据
const seriesName = item.seriesName; // 系列名称
const value = item.value; // 数据值
const marker = item.marker; // 标志图形
const unit = item.seriesName.includes('费用') || item.seriesName.includes('补贴') ? '万元' : ''
result += `${marker}${seriesName}: ${value}${unit}<br/>`;
});
return result;
},
x: [],
list: [{
name: "上传数",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: 'bar',
barGap: '0%',
}]
list: []
}
this.overall_originze_data = {
this.overall_year_data = {
trigger: 'item',
xShow: false,
yShow: false,
@ -161,7 +428,7 @@
// center:['20%','20%'],
data: [],
label: {
show: false,
show: true,
position: 'center'
},
}]
@ -180,9 +447,47 @@
}
.chartSize {
width: calc(50% - 20px) !important;
width: calc(100% - 20px) !important;
margin: 10px !important;
background: #fff;
.search {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px;
.title {
padding: 10px;
color: #b3241d;
font-size: 18px
}
&-wrap {
display: flex;
align-items: center;
&>div {
margin-left: 10px;
}
}
}
}
.yearData {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
min-height: 350px;
margin: 20px;
&-item {
// width: 30%;
flex-basis: 30%;
margin-right: 2%;
margin-bottom: 20px;
}
}
}
</style>

2
src/views/record/index.vue
Unescape View File

@ -561,7 +561,7 @@
dbclick(row, column, cell, event){
console.log("row",row)
this.editIndex("editor",row.row.id)
this.showIndex("show",row.row.id)
},
editIndex(type, id) {
if (type == 'editor') {

2
src/views/report/components/addYear.vue
Unescape View File

@ -214,7 +214,7 @@
business_id: '',
area_id: '',
year: '',
all_year: '',
all_year: 0,
quarter_1:0,
quarter_2:0,
quarter_3:0,

21
src/views/report/components/showFill.vue
Unescape View File

@ -32,7 +32,7 @@
年度预算
</template>
<div>
<xy-table :list="year_datas" :isPage="false" :height="150"
<xy-table :list="year_datas" style="width:900px;margin:0 auto" :isPage="false" :height="150"
:table-item="year_datas_item">
<template v-slot:btns>
<div></div>
@ -45,7 +45,7 @@
数据填报
</template>
<div>
<xy-table :list="fill_datas" :isPage="false" :height="550"
<xy-table style="width:900px;margin:0 auto" :list="fill_datas" :isPage="false" :height="550"
:table-item="fill_datas_item">
<template v-slot:btns>
<div></div>
@ -80,7 +80,8 @@
year_datas_item: [{
prop: 'year',
label: '年份',
align: 'center',
align: 'center',
width: 150
// width: 100
}, {
prop: 'all_year',
@ -109,24 +110,22 @@
width: 150
}],
fill_datas:[],
fill_datas_item: [{
type: 'index',
width: 50,
}, {
fill_datas_item: [ {
prop: 'business_type.name',
label: '填报类别',
align: 'left',
// width: 620
align: 'left',
// width:
width: 300
}, {
prop: 'business_data.name',
label: '填报数据',
align: 'left',
width: 320
width: 300
}, {
prop: 'value',
label: '填报值',
align: 'left',
width: 320
width: 300
}],
form: {},
}

2
vue.config.js
Unescape View File

@ -25,7 +25,7 @@ module.exports = {
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin',
outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin_test',
assetsDir: 'static',
css: {
loaderOptions: { // 向 CSS 相关的 loader 传递选项

Write Preview
Loading…
Cancel
Save