From a5304cbc7793f5b3106c63b8f1b36ebebb4a480b Mon Sep 17 00:00:00 2001 From: yz3456 <2753272399@qq.com> Date: 星期一, 27 五月 2024 16:29:47 +0800 Subject: [PATCH] 修改完其他附件图表 --- ruoyi-ui/src/views/meeting/statistics.vue | 334 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 268 insertions(+), 66 deletions(-) diff --git a/ruoyi-ui/src/views/meeting/statistics.vue b/ruoyi-ui/src/views/meeting/statistics.vue index 196a7d6..e619cdf 100644 --- a/ruoyi-ui/src/views/meeting/statistics.vue +++ b/ruoyi-ui/src/views/meeting/statistics.vue @@ -29,7 +29,7 @@ <hr /> - <el-table :data="tableData" border :header-cell-style="{ background: 'pink', fontSize: '13px', color: 'black' }" + <el-table :data="meetingList" border :header-cell-style="{ background: 'pink', fontSize: '13px', color: 'black' }" :row-class-name="tableRowClassName" :row-key="getRowId"> <el-table-column label="瀹跺涵鍙�" prop="familyId" sortable align="center"> <template slot-scope="scope">{{ scope.row.familyId @@ -62,9 +62,9 @@ </el-table-column> <el-table-column label="鐘舵��" prop="status" sortable align="center"> - <template slot-scope="scope">{{ scope.row.status - ? scope.row.status : '鈥斺�斺�斺��' }}</template> + <template slot-scope="scope">{{scope.row.status===1? '缁撴': '鏈粨妗�'}}</template> </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width"> <template slot-scope="scope" v-if="scope.row.roleId !== 1"> @@ -77,15 +77,33 @@ </el-table-column> </el-table> + <pagination + v-show="total>0" + :total="total" + :page.sync="queryParams.pageNum" + :limit.sync="queryParams.pageSize" + @pagination="getList" + style="background: #FEF7FC;" + /> <!-- 鍥捐〃缁熻 --> - <el-dialog :title="title2" :visible.sync="open2" width="1500px" @open="open1()" append-to-body> - <!-- class="p1" --> + <el-dialog :title="title2" :visible.sync="open2" width="1500px" @open="openGraph()" append-to-body> + <div> + 骞翠唤 + <el-select v-model="years" id="yearSelect" + placeholder="璇烽�夋嫨骞翠唤" clearable + style="width: 240px; + height: 35px; + border-radius: 16px 16px 16px 16px; + opacity: 0.5;" filterable allow-create + @change="selectValue"> + <el-option v-for="item in yearOptions" + :key="item.value" :label="item.label" :value="item.value"/> + </el-select> + </div> <div class="p1" id="main1"> - <!-- <h1 style="font-size:21px">姣忔湀浼氳娆℃暟缁熻</h1> --> </div> <div class="p1" id="main2"> - <!-- <h1 style="font-size:21px">浼氳瀹跺涵鍗犳瘮缁熻</h1> --> </div> </el-dialog> <!-- 鏂板鏁版嵁妗� --> @@ -151,8 +169,20 @@ <script> import * as echarts from 'echarts'; + import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"; + import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"; + + + import { Notification, MessageBox, Message, Loading } from 'element-ui' + + //鍦╯ystem/note/index.js涓鍏ユ帴鍙e嚱鏁� --鎺ュソ浜� + import {listMeeting3,listGraph} from "@/api/meeting/index"; + export default { - created() {}, + created() { + this.getList(); + this.graphData(); + }, data() { return { // 鏄剧ず鎼滅储鏉′欢 @@ -160,53 +190,38 @@ open: false, open2: false, title: "", - tableData: [{ - id: 1, - familyId: '1', - title: '1', - name: 'asasd', - conferenceRoom: 'asdadsdasd', - status: '缁撴' - }, - { - id: 2, - familyId: '2', - title: '2', - name: 'qweqwqwe', - conferenceRoom: 'qweqweqwe', - status: '鏈粨妗�' - - } - ], + meetingList: [], + dataList:[], + // 楗煎浘鏁版嵁 + graphID: [], + // 鏌辩姸鍥炬暟鎹� + graphDate: [], + years:undefined, + yearOptions:[], formDat:{ - id: undefined, - happenTime: undefined, - endTime: undefined, - meetingTitle: undefined, - conferenceRoom: undefined, - ratifyPerson: undefined, - applyPerson: undefined, - url: "", - status: undefined, - familyId: undefined + "title":undefined, + "familyId":undefined, + "conferenceRoom":undefined, + "applyPerson":undefined, + "ratifyPerson":undefined, + "status":undefined, + "useTime":undefined }, + queryParams: { pageNum: 1, pageSize: 10, - conferenceRoom:undefined, - applyOrganization:undefined, - applyPerson:undefined, - happenTime:undefined + }, dateRange: [], // 琛ㄥ崟鏍¢獙 - rules: { - name: [{ - required: true, - message: '璇疯緭鍏ヨ澶囧悕绉�', - trigger: 'blur' - }], - }, + // rules: { + // name: [{ + // required: true, + // message: '璇疯緭鍏ヨ澶囧悕绉�', + // trigger: 'blur' + // }], + // }, typeOptions: [ { value: '1', @@ -222,50 +237,237 @@ } }, methods: { - open1(){ + getList() { + this.loading = true; + // console.log(this.queryParams) + // listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => { + this.queryParams.happenStartTime = this.dateRange.length > 0 && this.dateRange[0] + this.queryParams.happenEndTime = this.dateRange.length > 0 && this.dateRange[1] + listMeeting3(this.queryParams).then(response => { + // alert(123) + // console.log(response.data.data,'22222222222') + this.meetingList = response.data.data; + + this.total = response.data.total; + this.loading = false; + } + + ); + }, + getTypeOptions(list){ + let years = ['鍏ㄩ儴'] + let a = {} + list.forEach(element=>{ + let year = element.createTime.split("-")[0] + if(a[year]){ + }else{ + a[year] = 1 + years.push(year) + } + }) + let yearOptions = [] + for(let i=0;i<years.length;i++){ + yearOptions.push({label: years[i],value: i}) + } + return yearOptions; + }, + graphData(){ + this.loading = true; + listGraph().then(response => { + this.dataList = response.data + console.log(this.dataList,'11111111111') + this.yearOptions = this.getTypeOptions(this.dataList) + console.log(this.yearOptions,'yearsyearsyearsyears') + + // 瀹跺涵鍙� + let a = {} + this.dataList.forEach(element=>{ + if(a[element['familyId']]){ + a[element['familyId']] += 1 + }else{ + a[element['familyId']] = 1 + } + }) + for(let i in a){ + this.graphID.push({'name': i , 'value': a[i]}) + } + // 姣忔湀娆℃暟 + let b = {'01': 0,'02': 0,'03': 0,'04': 0,'05': 0,'06': 0,'07': 0,'08': 0,'09': 0,'10': 0,'11': 0,'12': 0} + this.dataList.forEach(element=>{ + let month = element.createTime.split("-")[1] + if(b[month]){ + b[month] += 1 + }else{ + b[month] = 1 + } + }) + + let kon =[] + for(let i in b){ + kon.push({'name': Number(i) , 'value': b[i]}) + } + this.graphDate = kon.sort((a,b) => a.name - b.name) + + this.loading = false; + } + ); + }, + + b(list,selectedValue){ + let list2 = [] + let newGraphID = [] + let newGraphDate = [] + list.forEach(element=>{ + let year = element.createTime.split("-")[0] + if(selectedValue == year){ + list2.push(element) + } + }) + + if(list2.length != 0){ + // 瀹跺涵鍙� + let a = {} + list2.forEach(element=>{ + if(a[element['familyId']]){ + a[element['familyId']] += 1 + }else{ + a[element['familyId']] = 1 + } + }) + for(let i in a){ + newGraphID.push({'name': i , 'value': a[i]}) + } + // 姣忔湀娆℃暟 + let b = {'01': 0,'02': 0,'03': 0,'04': 0,'05': 0,'06': 0,'07': 0,'08': 0,'09': 0,'10': 0,'11': 0,'12': 0} + list2.forEach(element=>{ + let month = element.createTime.split("-")[1] + if(b[month]){ + b[month] += 1 + }else{ + b[month] = 1 + } + }) + + let kon =[] + for(let i in b){ + kon.push({'name': Number(i) , 'value': b[i]}) + } + newGraphDate = kon.sort((a,b) => a.name - b.name) + }else{ + list2 = list + // 瀹跺涵鍙� + let a = {} + list2.forEach(element=>{ + if(a[element['familyId']]){ + a[element['familyId']] += 1 + }else{ + a[element['familyId']] = 1 + } + }) + for(let i in a){ + newGraphID.push({'name': i , 'value': a[i]}) + } + // 姣忔湀娆℃暟 + let b = {'01': 0,'02': 0,'03': 0,'04': 0,'05': 0,'06': 0,'07': 0,'08': 0,'09': 0,'10': 0,'11': 0,'12': 0} + list2.forEach(element=>{ + let month = element.createTime.split("-")[1] + if(b[month]){ + b[month] += 1 + }else{ + b[month] = 1 + } + }) + + let kon =[] + for(let i in b){ + kon.push({'name': Number(i) , 'value': b[i]}) + } + newGraphDate = kon.sort((a,b) => a.name - b.name) + } + + return [newGraphID,newGraphDate]; + }, + + selectValue(value){ + let obj = {} + let year = undefined + obj= this.yearOptions.find(function(i){ + return i.value ===value + }); + year = obj.label + + let result = undefined + result = this.b(this.dataList,year) + this.graphID = result[0] + this.graphDate = result[1] + // console.log(this.graphID) + // console.log(this.graphDate) + echarts.dispose(document.getElementById('main1')) + echarts.dispose(document.getElementById('main2')) + this.initEcharts() + }, + + openGraph(){ this.$nextTick(() => { // 鎵цecharts鏂规硶 this.initEcharts() }) }, initEcharts() { - var echarts = require('echarts'); - - const myChart1 = this.$echarts.init(document.getElementById('main1')); + const myChart1 = echarts.init(document.getElementById('main1')) const option1 = { title: { - text: 'ECharts 鍏ラ棬绀轰緥' + text: '姣忔湀浼氳娆℃暟缁熻', + left:'center' }, tooltip: {}, xAxis: { - data: ['琛~', '缇婃瘺琛�', '闆汉琛�', '瑁ゅ瓙', '楂樿窡闉�', '琚滃瓙'] + data: ['1鏈�','2鏈�','3鏈�','4鏈�','5鏈�','6鏈�','7鏈�','8鏈�','9鏈�','10鏈�','11鏈�','12鏈�'] }, yAxis: {}, + legend:{}, series: [{ - name: '閿�閲�', type: 'bar', - data: [5, 20, 36, 10, 10, 20] + data: this.graphDate.map(x => x.value) }] }; + myChart1.setOption(option1) - const myChart2 = this.$echarts.init(document.getElementById('main2')); + const myChart2 = echarts.init(document.getElementById('main2')) const option2 = { title: { - text: 'ECharts 鍏ラ棬绀轰緥' + text: '浼氳瀹跺涵鍗犳瘮缁熻', + left:'center', + textStyle:{ + fontSize:20 + } }, tooltip: {}, - xAxis: { - data: ['琛~', '缇婃瘺琛�', '闆汉琛�', '瑁ゅ瓙', '楂樿窡闉�', '琚滃瓙'] + legend:{ + orient: 'vertical', + left: 'left', + textStyle:{ + fontSize:15 + } }, - yAxis: {}, series: [{ - name: '閿�閲�', - type: 'bar', - data: [5, 20, 36, 10, 10, 20] + name: '瀹跺涵鍙�', + type: 'pie', + data: this.graphID, + label: { + show: true, // 鏄惁鏄剧ず鏍囩 + position: 'top', // 鏍囩浣嶇疆锛屽彲閫夊�间负锛歵op銆乥ottom銆乧enter銆乮nside锛堟煴鐘跺浘鍐呴儴锛夈�乷utside锛堟煴鐘跺浘澶栭儴锛� + textStyle: { + color: '#333', // 鏍囩瀛椾綋棰滆壊 + fontSize: 25, // 鏍囩瀛椾綋澶у皬 + fontWeight: 'bold', // 鏍囩瀛椾綋鍔犵矖 + fontStyle: 'italic', // 鏍囩瀛椾綋鏂滀綋 + fontFamily: 'Arial' // 鏍囩瀛椾綋 + } + }, }] }; - myChart1.setOption(option1) myChart2.setOption(option2) }, /** 鎼滅储鎸夐挳鎿嶄綔 */ @@ -290,7 +492,7 @@ // this.reset(); }, submitDataScope() { - console.log(666) + // console.log(666) }, tableRowClassName({ @@ -394,7 +596,7 @@ width: 700px; height: 700px; display: inline-block; - /* background-color: aqua; */ margin-right: 30px; + /* background-color: aqua; */ } </style> -- Gitblit v1.9.1