saber/src/views/wel/index.vue

<template>
  <div class="boxswai">
    <div class="boxnei flex flex-d-c">
      <el-menu :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        text-color='black'
        active-text-color='#1684FC'
        @select="handleSelect"
      >
        <el-menu-item index="1" v-model="activeIndex">我的待办工单</el-menu-item>
        <el-menu-item index="2" v-model="activeIndex">所有代办工单</el-menu-item>
      </el-menu>
      <div class="information flex1">
        <el-collapse v-show="activeIndex == 1">
          <el-collapse-item
            :name="item.title"
            v-for="(item,key) in collapseData1"
            :key="key"
          >
            <template slot="title">
              <i
                class="el-icon-chat-dot-round"
                style="fontSize:18px;margin-right:10px;"
              > </i>{{item.title}}
            </template>
            <div>
              <el-button
                type="text"
                style="color:rgb(65, 80, 88);"
              >立即处理</el-button>
            </div>
            <div>
              <el-button
                type="text"
                @click="ignore(key)"
                v-throttle="3000"
                style="color:rgb(65, 80, 88);"
              >忽略</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse v-show="activeIndex==2">
          <el-collapse-item
            :name="item.title"
            v-for="(item,key) in collapseData2"
            :key="key"
          >
            <template slot="title">
              <i
                class="el-icon-chat-dot-round"
                style="fontSize:18px;margin-right:10px;"
              > </i>{{item.title}}
            </template>
            <div v-show="item.operation">
              <div>
                <el-button
                  type="text"
                  style="color:rgb(65, 80, 88);"
                >立即处理</el-button>
              </div>
              <div>
                <el-button
                  type="text"
                  v-throttle="3000"
                  @click="ignore2(key)"
                  style="color:rgb(65, 80, 88);"
                >忽略</el-button>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <el-row :gutter="20" class="mg-t-20">
        <el-col :span="8">
          <div class="chart-title">证书统计(总计XXXXX个)</div>
          <div id="container"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart-title">人员账户统计(总计{{personAmount}}位)</div>
          <div id="container2"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart-title">
            <span>维护类型统计汇总</span>
            <el-select v-model="projectId" placeholder="请选择项目" size="small" @change="selectProjectOpinion">
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.projectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div id="container3"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// 引入统计图
import { Area, Column, Pie } from '@antv/g2plot';
import { queryBusinessUserOpinion, queryBusinessUserOpinionAll, queryProjectUserAmount, queryProjectPfx, queryOpinionTypeAmount } from '@/api/news/news.js';
export default {
  data () {
    return {
      LineData: [],//折线统计图数据
      ColumnData: [],//条形统计图数据
      personAmount: 0,
      PieData: [],//饼图统计图数据
      activeIndex: '1',
      collapseData1: [],//
      collapseData2: [],//
      userOpinionTypeList:[],
      projectList:[],
      projectId:'',
    }
  },
  methods: {
    selectProjectOpinion(){
      let _this = this;
      this.userOpinionTypeList.forEach(vo => {
        if(vo.projectId === _this.projectId){
          _this.PieData = [];
          let problemType = vo.problemType;
          let problemTypeAmount = vo.problemTypeAmount;
          _this.projectId = vo.projectId;
          problemType.forEach((name, index) => {
            _this.PieData.push({type : name, value : Number(problemTypeAmount[index])});
          });
        }
      })
    },
    async handleSelect (key) {
      if (key == 2) {
        if (this.collapseData2.length <= 0) {
          await this.queryBusinessUserOpinionAll()
          this.collapseData = this.collapseData2;
        } else {
          this.collapseData = this.collapseData2;
        }
      } else {
        if (this.collapseData1.length > 0) {
          this.collapseData = this.collapseData1;
        }
      }
      this.activeIndex = key
    },
    async queryBusinessUserOpinion () {//获取我的消息
      const { data: res } = await queryBusinessUserOpinion({
        current: 1,
        size: 999999
      })
      if (res.code == 200) {
        this.collapseData1 = res.data.userOpinionFlowList
        this.menuTag = res.data.operation
      }
    },
    async queryBusinessUserOpinionAll () {
      const { data: res } = await queryBusinessUserOpinionAll({
        current: 1,
        size: 999999
      })
      if (res.code == 200) {
        this.collapseData2 = res.data.userOpinionFlowList;
      }
    },
    ignore (key) {
      this.collapseData1.splice(this.collapseData1.indexOf(this.collapseData1[key]), 1)
    },
    ignore2 (key) {
      this.collapseData2.splice(this.collapseData2.indexOf(this.collapseData2[key]), 1)
    },
    async LineV () {
      await this.queryProjectPfx();
      const line = new Area('container', {
        data: this.LineData,
        xField: 'project',
        yField: 'value',
        seriesField: 'category',
        isStack:false,
        legend: {
          position: 'bottom',
        },
        autoFit:true
      });
      line.render();
    },
    async ColumnV () {
      await this.queryProjectUserAmount();
      const columnPlot = new Column('container2', {
        data: this.ColumnData,
        isGroup: true,
        xField: 'project',
        yField: 'value',
        seriesField: 'category',
        /** 设置颜色 */
        //color: ['#1ca9e6', '#f88c24'],
        /** 设置间距 */
        // marginRatio: 0.1,
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'middle', 'bottom'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            { type: 'adjust-color' },
          ],
        },
        legend: {
          position: 'bottom',
        },
      });

      columnPlot.render();
    },
    async PieV () {
      await this.queryOpinionTypeAmount();
      const piePlot = new Pie('container3', {
        appendPadding: 10,
        data: this.PieData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.75,
        label: {
          type: 'spider',
          labelHeight: 28,
          content: '{name}\n{value}',
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        legend: {
          position: 'bottom',
        },
      });
      piePlot.render();
    },
    //获取人员账户
    async queryProjectUserAmount(){
      const {data : res} = await queryProjectUserAmount();
      let records = res.data.projectUserAmountVOList;
      records.forEach(vo => {
        this.ColumnData.push({"category": "施工方","project": vo.projectName,"value": vo.contractor});
        this.ColumnData.push({"category": "监理方","project": vo.projectName,"value": vo.supervision});
        this.ColumnData.push({"category": "指挥部","project": vo.projectName,"value": vo.owner});
      });
      this.personAmount = res.data.projectUserAmount;
    },
    //证书统计
    async queryProjectPfx(){
      let _this = this;
      const {data : res} = await queryProjectPfx();
      let pfxList = res.data.pfxList;
      pfxList.forEach(vo => {
        _this.LineData.push({"category": "个人证书","project": vo.projectName,"value": Number(vo.personalCount)});
        _this.LineData.push({"category": "企业证书","project": vo.projectName,"value": Number(vo.enterpriseCount)});
      });
    },
    //维护类型统计汇总
    async queryOpinionTypeAmount(){
      let _this = this;
        const {data : res} = await queryOpinionTypeAmount();
        this.userOpinionTypeList = res.data.userOpinionList;
        let problemType = this.userOpinionTypeList[0].problemType;
        let problemTypeAmount = this.userOpinionTypeList[0].problemTypeAmount;
        this.projectId = this.userOpinionTypeList[0].projectId;
        problemType.forEach((name, index) => {
          _this.PieData.push({type : name, value : Number(problemTypeAmount[index])});
        });
        this.projectList = res.data.projectInfos;
    }
  },
  created () {
    this.queryBusinessUserOpinion();
  },
  mounted () {
    this.LineV()
    this.ColumnV()
    this.PieV()
  }
}
</script>

<style lang="scss" scoped>
.el-menu.el-menu--horizontal {
  display: flex;
  justify-content: center;
}
.el-menu-item,
.el-submenu__title {
  line-height: 40px;
  height: 40px;
}
.el-menu-item {
  padding: 0px;
  margin: 0 20px;
}
.information {
  margin-top: 20px;
  background-color: #faf8fd;

  box-sizing: border-box;
  border-radius: 4px;
  overflow: auto;
}
.el-collapse {
  border: none;
}
/deep/.el-collapse-item__header {
  background-color: #faf8fd;
  border-bottom: none;
  box-sizing: border-box;
  padding-left: 20px;
  color: red;
}
/deep/.el-collapse-item__content {
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-left: 20px;
  padding-bottom: 0px;
}
.visualization {
  height: calc(60% - 60px);
}

.chart-title{
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 18px;
  color: rgba(119, 40, 245, 0.85);
}
</style>