saber/src/views/wel/index.vue

<template>
  <div class="h-100p">
  <div class="h-100p flex flex-d-c">
    <div class="bgc-w border-10 flex1 flex flex-d-c" style="height:0">
      <div class="active-menus">
        <div class="active-item" :class="{'active-select':activeIndex == 1}" @click="handleSelect(1)">
          <img :src="'/img/welIndex/Frame25'+(activeIndex == 1?'4':'7')+'.png'" alt="">
          <div style="margin-top:5px;">
            <el-badge :value="0" :hidden="true" class="item">
              <span class="font-bold">我的代办工单&nbsp;</span>
            </el-badge>
          </div>
        </div>
        <div class="triangle-bottomleft" :class="{'b-b-b-w':activeIndex == 1}" ></div>
        <div class="active-item" :class="{'active-select':activeIndex == 2}" @click="handleSelect(2)">
          <img :src="'/img/welIndex/Frame25'+(activeIndex == 2?'6':'5')+'.png'" alt="">
          <div style="margin-top:5px;">
            <el-badge :value="0" :hidden="true" class="item">
              <span class="font-bold">所有代办工单&nbsp;</span>
            </el-badge>
          </div>
        </div>
        <div class="triangle-bottomleft" :class="{'b-b-b-w':activeIndex == 2}"></div>
      </div>
      <el-scrollbar class="flex1">
        <div class="pd-10" v-show="activeIndex == 1">
          <div v-if="collapseData1.length == 0" class="flex flex-center">
            <div>
              <img src="/img/welIndex/empty.png" alt="">
              <div class="text-align-c" style="color:#CCD0DE;font-size:14px;">没有找到代办工单~</div>
            </div>
          </div>
          <div v-else class="info-item" v-for="(item,key) in collapseData1" :key="key">
            <div class="flex jc-al-c">
              <img style="width:14px;height:14px;" src="/img/welIndex/warning.png" alt="">
              <span class="mg-l-10" style="font-size:14px;">{{item.title}}</span>
            </div>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-link icon="el-icon-more" :underline="false" style="transform:rotate(90deg)"></el-link>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="openPreview(item)">立即处理</el-dropdown-item>
                <el-dropdown-item @click.native="ignore(key)">忽略</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-if="collapseData1.length == 1" style="color:#CCD0DE;">
            没有更多数据了~
          </div>
        </div>
        <div class="pd-10" v-show="activeIndex == 2">
          <div v-if="collapseData2.length == 0" class="flex flex-center">
            <div>
              <img src="/img/welIndex/empty.png" alt="">
              <div class="text-align-c" style="color:#CCD0DE;font-size:14px;">没有找到代办工单~</div>
            </div>
          </div>
          <div v-else class="info-item" v-for="(item,key) in collapseData2" :key="key">
            <div class="flex jc-al-c">
              <img style="width:14px;height:14px;" src="/img/welIndex/warning.png" alt="">
              <span class="mg-l-10" style="font-size:14px;">{{item.title}}</span>
            </div>
            <el-dropdown v-if="item.operation">
              <span class="el-dropdown-link">
                <el-link icon="el-icon-more" :underline="false" style="transform:rotate(90deg)"></el-link>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="openPreview(item)">立即处理</el-dropdown-item>
                <el-dropdown-item @click.native="ignore2(key)">忽略</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-if="collapseData2.length == 1" style="color:#CCD0DE;">
            没有更多数据了~
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div style="height:500px">
      <el-row :gutter="20" class="mg-t-20">
        <el-col :span="8">
          <div class="bgc-w pd-10 border-10">
            <div class="chart-title">
              <img src="/img/welIndex/Frame001.png" alt="">
              <span class="mg-t-10">
                证书统计
                <span class="title-tip">(总计{{pfxAmount}}个)</span>
              </span>
            </div>
            <div id="container"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="bgc-w pd-10 border-10">
            <div class="chart-title">
              <img src="/img/welIndex/Frame002.png" alt="">
              <span class="mg-t-10">
                人员账户统计
                <span class="title-tip">(总计{{personAmount}}个)</span>
              </span>
            </div>
            <div id="container2"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="bgc-w pd-10 border-10">
            <div class="chart-title jc-sb">
              <div class="flex">
                <img src="/img/welIndex/Frame003.png" alt="">
                <span class="mg-t-10">
                  维护类型统计汇总
                </span>
              </div>
              <el-select v-model="projectId" placeholder="请选择项目" size="small" @change="selectProjectOpinion" style="width:340px;margin-top:6px;" class="index-select">
                <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>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
      <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>
</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: 'top-left',
          offsetX:'12',
          marker:{
            symbol:'circle'
          }
        },
        autoFit:true,
        scrollbar: {
          type: 'vertical'
        },
        xAxis:{
          label:{
            autoRotate:true,
            autoHide:false,
          }
        }
      });
      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: 'top-left',
          offsetX:'12',
          marker:{
            symbol:'circle'
          }
        },
      });

      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: 'top-left',
          offsetX:'12',
          marker:{
            symbol:'circle'
          }
        },
      });
      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{
  display: flex;
  font-weight: 700;
  font-size: 16px;
  color: #1A1A1A;
}

.title-tip{
  font-size: 14px;
  color: #838791;
}

.boxswai{
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}


.active-menus{
  height: 62px;
  display: flex;
  background-color: #F8F8F8;
  border-radius: 10px 10px 0 0;
}
.active-item{
  padding: 10px;
  display: flex;
  cursor: pointer;
}

.active-select{
  background-color: #FFFFFF;
  border-radius: 10px 0 0 0 ;
}

.triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 62px solid #F8F8F8;
    border-right: 30px solid transparent;
}

.b-b-b-w{
  border-bottom-color: #FFFFFF;
}

.info-item{
  background-color: #F8FAFF;
  border: 1px solid #EEEEEE;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  color: #50545E;
}

.index-select{
  /deep/.el-input__inner{
    border: none;
    background-color: #F7F9FD;
    border-radius: 64px;
  }
}

</style>