修改了代码

feige

2025-05-06 ec88d953dcf33ec0f3f5bf8facbb05878cea5acb

 ruoyi-ui/src/views/meeting/statistics.vue

@@ -16,34 +16,34 @@
            </div>
          </el-button>
        </div>
        <div style="display: flex; align-items: center;">
        <!-- <div style="display: flex; align-items: center;">
          <el-button @click="newRequest" size="mini" type="text" v-hasPermi="['person:information:memo']" style="margin-left: 10px">
            <div class="form2" style="width: 100px;"><el-icon style="padding-right:30px;"></el-icon>
              <span class="text" style="width: 69px;height: 26px;font-size: 16px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">新建</span>
            </div>
          </el-button>
        </div>
        </div> -->

      </h1>

      <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="num" sortable align="center">
          <template slot-scope="scope">{{ scope.row.num
        ? scope.row.num : '————' }}</template>
        <el-table-column label="家庭号" prop="familyId" sortable align="center">
          <template slot-scope="scope">{{ scope.row.familyId
        ? scope.row.familyId : '————' }}</template>
        </el-table-column>

        <el-table-column label="使用时间" prop="time" sortable align="center">
          <template slot-scope="scope">{{ scope.row.time
        ? scope.row.time : '————' }}</template>
        <el-table-column label="使用时间" prop="useTime" sortable align="center">
          <template slot-scope="scope">{{ scope.row.useTime
        ? scope.row.useTime : '————' }}</template>
        </el-table-column>

        <el-table-column label="会议室名称" prop="address" sortable align="center">
        <el-table-column label="会议室名称" prop="conferenceRoom" sortable align="center">
          <template slot-scope="scope">{{
        scope.row.address ? scope.row.address : '————' }}</template>
        scope.row.conferenceRoom ? scope.row.conferenceRoom : '————' }}</template>
        </el-table-column>

        <el-table-column label="标题" prop="title" sortable align="center">
@@ -51,40 +51,68 @@
        ? scope.row.title : '————' }}</template>
        </el-table-column>

        <el-table-column label="申请人" prop="applicant" sortable align="center">
        <el-table-column label="申请人" prop="applyPerson" sortable align="center">
          <template slot-scope="scope">{{
        scope.row.applicant ? scope.row.applicant : '————' }}</template>
        scope.row.applyPerson ? scope.row.applyPerson : '————' }}</template>
        </el-table-column>

        <el-table-column label="审批人" prop="approve" sortable align="center">
          <template slot-scope="scope">{{ scope.row.approve ?
        scope.row.approve : '————' }}</template>
        <el-table-column label="审批人" prop="ratifyPerson" sortable align="center">
          <template slot-scope="scope">{{ scope.row.ratifyPerson ?
        scope.row.ratifyPerson : '————' }}</template>
        </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">
            <div class="button-container">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button> -->
              <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button> -->
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right" @click="handleCheck(scope.row)">查看详情</el-button>
            </div>
          </template>
        </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="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">
        </div>
        <div class="p1" id="main2">
        </div>
      </el-dialog>
      <!-- 新增数据框 -->
      <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <!-- <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>

        <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="100px">

          <el-form-item label="家庭号" prop="num">
            <el-input v-model="formDat.num" placeholder="请输入会议室名称" clearable :style="{width: '100%'}">
          <el-form-item label="家庭号" prop="familyId">
            <el-input v-model="formDat.familyId" placeholder="请输入会议室名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>

@@ -99,8 +127,8 @@
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="会议室名称" prop="address">
            <el-input v-model="formDat.address" placeholder="请输入会议室名称" clearable :style="{width: '100%'}">
          <el-form-item label="会议室名称" prop="conferenceRoom">
            <el-input v-model="formDat.conferenceRoom" placeholder="请输入会议室名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>

@@ -109,13 +137,13 @@
            </el-input>
          </el-form-item>

          <el-form-item label="申请人" prop="applicant">
            <el-input v-model="formDat.applicant" placeholder="请输入申请人" clearable :style="{width: '100%'}">
          <el-form-item label="申请人" prop="applyPerson">
            <el-input v-model="formDat.applyPerson" placeholder="请输入申请人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>

          <el-form-item label="审批人" prop="approve">
            <el-input v-model="formDat.approve" placeholder="请输入审批人" clearable :style="{width: '100%'}">
          <el-form-item label="审批人" prop="ratifyPerson">
            <el-input v-model="formDat.ratifyPerson" placeholder="请输入审批人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>

@@ -134,66 +162,66 @@
          <el-button type="primary" @click="submitDataScope">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      </el-dialog> -->

    </div>
  </template>

  <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'

  //在system/note/index.js中导入接口函数  --接好了
  import {listMeeting3,listGraph} from "@/api/meeting/index";

 export default {
  created() {
    this.getList();
    this.graphData();
  },
   data() {
     return {
       // 显示搜索条件
       showSearch: true,
       open: false,
       open2: false,
       title: "",
       tableData: [{
         id: 1,
          num: '1',
           title: '1',
           name: 'asasd',
           address: 'asdadsdasd',
           status: '结案'
         },
         {
                    id: 2,
          num: '2',
           title: '2',
           name: 'qweqwqwe',
           address: 'qweqweqwe',
           status: '未结案'

         }
       ],
       meetingList: [],
       dataList:[],
       // 饼图数据
       graphID: [],
       // 柱状图数据
       graphDate: [],
       years:undefined,
       yearOptions:[],
       formDat:{
         id: undefined,
         happenTime: undefined,
         endTime: undefined,
         meetingTitle: undefined,
         address: undefined,
         approve: undefined,
         applicant: undefined,
         url: "",
         status: undefined,
         num: undefined
           "title":undefined,
           "familyId":undefined,
           "conferenceRoom":undefined,
           "applyPerson":undefined,
           "ratifyPerson":undefined,
           "status":undefined,
           "useTime":undefined
       },

     queryParams: {
       pageNum: 1,
       pageSize: 10,
       address:undefined,
       applyOrganization:undefined,
       applicant:undefined,
       happenTime:undefined

     },
     dateRange: [],
     // 表单校验
     rules: {
       name: [{
         required: true,
         message: '请输入设备名称',
         trigger: 'blur'
       }],
      },
     // rules: {
     //   name: [{
     //     required: true,
     //     message: '请输入设备名称',
     //     trigger: 'blur'
     //   }],
     //  },
       typeOptions: [
         {
         value: '1',
@@ -209,6 +237,239 @@
     }
   },
   methods: {
     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() {
            const myChart1 = echarts.init(document.getElementById('main1'))
             const option1 = {
                title: {
                    text: '每月会议次数统计',
                    left:'center'
                },
                tooltip: {},
                xAxis: {
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                },
                yAxis: {},
                legend:{},
                series: [{
                    type: 'bar',
                    data: this.graphDate.map(x => x.value)
                }]
            };
            myChart1.setOption(option1)

            const myChart2 = echarts.init(document.getElementById('main2'))
             const option2 = {
                title: {
                    text: '会议家庭占比统计',
                    left:'center',
                    textStyle:{
                      fontSize:20
                    }
                },
                tooltip: {},
                legend:{
                  orient: 'vertical',
                  left: 'left',
                  textStyle:{
                    fontSize:15
                  }
                },
                series: [{
                    name: '家庭号',
                    type: 'pie',
                    data: this.graphID,
                    label: {
                      show: true, // 是否显示标签
                      position: 'top', // 标签位置，可选值为：top、bottom、center、inside（柱状图内部）、outside（柱状图外部）
                      textStyle: {
                        color: '#333', // 标签字体颜色
                        fontSize: 25, // 标签字体大小
                        fontWeight: 'bold', // 标签字体加粗
                        fontStyle: 'italic', // 标签字体斜体
                        fontFamily: 'Arial' // 标签字体
                      }
                    },
                }]
            };

            myChart2.setOption(option2)
          },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -231,7 +492,7 @@
       // this.reset();
     },
     submitDataScope() {
       console.log(666)
       // console.log(666)
     },

     tableRowClassName({
@@ -279,7 +540,8 @@

     // 图表统计
     pictureStatistics(){

        this.open2=true;
        this.title2 = "图表统计"
     },

   }
@@ -330,4 +592,11 @@
  .el-table {
    border-radius: 14px 14px 14px 14px;
  }
  .p1{
    width: 700px;
    height: 700px;
    display: inline-block;
    margin-right: 30px;
        /* background-color: aqua; */
  }
  </style>