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);"
                @click="openPreview(item)"
              >立即处理</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);"
                  @click="openPreview(item)"
                >立即处理</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">证书统计(总计{{pfxAmount}}个)</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" style="margin-left: 5%;">
            <span>维护类型统计汇总</span>
            <el-select v-model="projectId" placeholder="请选择项目" size="small" @change="selectProjectOpinion" style="width:340px">
              <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>

      <el-dialog
        title=""
        :visible.sync="imgVisible"
        append-to-body
        width="80%">
        <div class="mg-b-20">{{curNew.projectName}}——{{curNew.contractName}}</div>
        <div class="mg-b-20">问题描述：{{curNew.opinionContent}}</div>
        <div class="mg-b-20">
          <span class="mg-r-20">反馈人员：{{curNew.submitUserName}}</span>
          <span class="mg-r-20">电话：{{curNew.submitPhone}}</span>
          <span class="mg-r-20">岗位：{{curNew.submitUserRole}}</span>
        </div>
        <div class="mg-b-20">反馈时间：{{curNew.manageTime}}</div>
        <el-carousel trigger="click" height="500px" :autoplay="false" style="text-align:center;">
          <el-carousel-item v-for="item in curNew.fileUrl" :key="item">
            <el-image :src="item" fit="scale-down" style="height:500px;" :preview-src-list="curNew.fileUrl"></el-image>
          </el-carousel-item>
        </el-carousel>
        <span slot="footer" class="dialog-footer">
          <el-button @click="imgVisible = false">取 消</el-button>
          <el-button type="primary" @click="toDisposeView">处 理</el-button>
        </span>
      </el-dialog>

      <el-dialog
        :visible.sync="dialogVisible"
        width="600px"
        append-to-body
        :close-on-click-modal="false"
      >
        <div class="flex jc-al-c">
        <span class="mg-r-20 titl-font" style="font-size: 16px;margin-right:20px;width:180px;text-align:right;font-weight: 900;">提交进度</span>
          <el-select v-model="curRow.currentLink" placeholder="请选择" @change="operationMethods">
            <el-option label="进入人工预处理环境" :value="2"/>
            <el-option label="已解决" :value="3"/>
          </el-select>
        </div>
        <div style="margin-top:40px;" class="flex jc-al-c" v-show="operation.show">
          <span style="font-size: 16px;margin-right:20px;width:180px;text-align:right;font-weight: 900;">*预计处理截止时间</span>
          <el-date-picker v-model="operation.manageTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="setDateRange"/>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submissionProgress">确 定</el-button>
      </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
// 引入统计图
import { Area, Column, Pie } from '@antv/g2plot';
import { queryBusinessUserOpinion, queryBusinessUserOpinionAll, queryProjectUserAmount, queryProjectPfx, queryOpinionTypeAmount, queryOpinionDetails, isIgnore, manageUserOperationStatus } from '@/api/news/news.js';
export default {
  data () {
    return {
      setDateRange: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      LineData: [],//折线统计图数据
      ColumnData: [],//条形统计图数据
      personAmount: 0,
      PieData: [],//饼图统计图数据
      activeIndex: '1',
      collapseData1: [],//
      collapseData2: [],//
      userOpinionTypeList:[],
      projectList:[],
      projectId:'',
      imgVisible:false,
      dialogVisible: false,
      curNew:{},
      curRow:{},
      operation: {
        manageTime: '',
        show: false
      },
      pieObj:null,
      pfxAmount: 0,
      cancel: true
    }
  },
  methods: {
    operationMethods () {
      this.operation.show = this.curRow.currentLink == 2;
      if (!this.operation.show) {
        this.operation.manageTime = '';
      }
    },
    toDisposeView(){
      this.dialogVisible = true;
      this.operationMethods();
    },
    async submissionProgress(){
      if (this.curRow.currentLink == 2) {
        if (this.operation.manageTime) {
          await this.manageUserOperationStatus({
            currentLinkId: this.curRow.currentLinkId,
            currentLink: this.curRow.currentLink,
            newNumber: this.curRow.newNumber,
            userOpinionId: this.curRow.userOpinionId,
            manageTime: this.operation.manageTime
          })
        } else {
          this.$message({
            type: 'error',
            message: '请设置预计处理截止时间'
          })
        }
      } else {
        await this.manageUserOperationStatus({
          currentLinkId: this.curRow.currentLinkId,
          currentLink: this.curRow.currentLink,
          newNumber: this.curRow.newNumber,
          userOpinionId: this.curRow.userOpinionId
        })
      }

      if(this.cancel){
        this.$confirm('是否前往消息区继续处理?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/news/news'
          });
        }).catch(() => {
          this.cancel = false;
        });
      }
    },
    async manageUserOperationStatus (da) {//业务人员提交环节操作
      const { data: res } = await manageUserOperationStatus(da)
      if (res.code == 200) {
        this.dialogVisible = false
        this.imgVisible = false;
        this.$message({
          type: 'success',
          message: '提交成功!'
        })
        //重新刷新列表
        if(this.activeIndex == 2){
          await this.queryBusinessUserOpinionAll();
        } else {
          await  this.queryBusinessUserOpinion();
        }
      }
    },
    async openPreview(row){
      const { data : res } = await queryOpinionDetails({userOpinionId : row.userOpinionId});
      if(res.code == 200){
        this.curNew = res.data;
      }
      this.curRow = row;
      this.imgVisible = true;
    },
    selectProjectOpinion(){
      let _this = this;
      _this.PieData = [];
      this.userOpinionTypeList.forEach(obj => {
          if(obj.projectId == _this.projectId){
            let problemType = obj.problemType;
            let problemTypeAmount = obj.problemTypeAmount;
            problemType.forEach((name, index) => {
              _this.PieData.push({type : name, value : Number(problemTypeAmount[index])});
            });
          }
      })

      this.pieObj.changeData(_this.PieData);
    },
    async handleSelect (key) {
      if (key == 2) {
        await this.queryBusinessUserOpinionAll();
      } else {
        await this.queryBusinessUserOpinion();
      }
      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

        if(this.collapseData1.length < 1){
          this.handleSelect('2')
        }
      }
    },
    async queryBusinessUserOpinionAll () {
      const { data: res } = await queryBusinessUserOpinionAll({
        current: 1,
        size: 999999
      })
      if (res.code == 200) {
        this.collapseData2 = res.data.userOpinionFlowList;
      }
    },
    ignore (key) {
      this.isIgnore(this.collapseData1[key].userOpinionId);
      this.collapseData1.splice(this.collapseData1.indexOf(this.collapseData1[key]), 1);
      if(this.collapseData2.length > 0){
        let removeIndex = -1;
        this.collapseData2.forEach((vo,index) => {
          if(this.collapseData1[key].userOpinionId = vo.userOpinionId){
            removeIndex = index;
          }
        });
        if(removeIndex > -1){
          this.collapseData2.splice(removeIndex, 1);
        }
      }
    },
    ignore2 (key) {
      this.isIgnore(this.collapseData2[key].userOpinionId);
      this.collapseData2.splice(this.collapseData2.indexOf(this.collapseData2[key]), 1);
      if(this.collapseData1.length > 0){
        let removeIndex = -1;
        this.collapseData1.forEach((vo,index) => {
          if(this.collapseData2[key].userOpinionId = vo.userOpinionId){
            removeIndex = index;
          }
        });
        if(removeIndex > -1){
          this.collapseData1.splice(removeIndex, 1);
        }
      }
    },
    async isIgnore(userOpinionId){
      const {data : res} = await isIgnore({userOpinionId : userOpinionId});
    },
    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,
        scrollbar: {
          type: 'vertical'
        }
      });
      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();
      this.pieObj = piePlot;
    },
    //获取人员账户
    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)});
      });
      this.pfxAmount = res.data.pfxAmount;
    },
    //维护类型统计汇总
    async queryOpinionTypeAmount(){
        let _this = this;
        const {data : res} = await queryOpinionTypeAmount();
        this.userOpinionTypeList = res.data.userOpinionList;
        this.projectList = res.data.projectInfos;

        let userOpinion = this.userOpinionTypeList[0];
        let problemType = userOpinion.problemType;
        let problemTypeAmount = userOpinion.problemTypeAmount;
        this.projectId = userOpinion.projectId;

        problemType.forEach((name, index) => {
          _this.PieData.push({type : name, value : Number(problemTypeAmount[index])});
        });
    }
  },
  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>