saber/src/views/wel/index.vue

<template>
  <div class="h-100p">
  <div class=" flex flex-d-c">
    <div class="bgc-w border-10 flex1 flex flex-d-c h-100p">
      <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="collapseData1Num" :hidden="!collapseData1Num" 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="collapseData2Num" :hidden="!collapseData2Num" 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" style="min-height:250px">
          <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> -->
              <span class="mg-l-10" style="font-size:14px;">
                <span class="title-common">来自</span>
                <span class="title-text">{{item.projectContract}}</span>
                <span class="title-common">的</span>
                <span class="title-text">{{item.roleUser}}</span>
                <span class="title-common">向</span>
                <span v-if="item.manageUser == '您'" class="title-common">您</span>
                <span v-else class="title-text">{{item.manageUser}}</span>
                <span class="title-common">反馈</span>
                <span class="title-red">{{item.title}}</span>
              </span>
            </div>
            <div>
              <span class="title-time">{{item.time}}</span>
              <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>
          <div v-if="collapseData1.length == 1" class="text-align-c" style="color:#CCD0DE;line-height:200px">
            没有更多数据了~
          </div>
        </div>
        <div class="pd-10" v-show="activeIndex == 2" style="height:250px">
          <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> -->
              <span class="mg-l-10" style="font-size:14px;">
                <span class="title-common">来自</span>
                <span class="title-text">{{item.projectContract}}</span>
                <span class="title-common">的</span>
                <span class="title-text">{{item.roleUser}}</span>
                <span class="title-common">向</span>
                <span v-if="item.manageUser == '您'" class="title-common">您</span>
                <span v-else class="title-text">{{item.manageUser}}</span>
                <span class="title-common">反馈</span>
                <span class="title-red">{{item.title}}</span>
              </span>
            </div>
            <div>
              <span class="title-time">{{item.time}}</span>
              <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>
              <span v-else style="margin-left:14px;"></span>
            </div>
          </div>
          <div v-if="collapseData2.length == 1" class="text-align-c" 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 class="my-dialog"
        width="720">
        <el-divider></el-divider>
        <table border="1" style="border-spacing: 0;border-collapse: collapse;border-color: #ddd;width: 100%;">
          <tbody>
            <tr>
              <td class="new-titile">合同名称</td>
              <td class="new-content">{{curNew.projectName}}——{{curNew.contractName}}</td>
            </tr>
            <tr>
              <td class="new-titile">问题描述</td>
              <td class="new-content" style="color:#EB4D3D">{{curNew.opinionContent}}</td>
            </tr>
            <tr>
              <td class="new-titile">反馈人员</td>
              <td class="new-content">{{curNew.submitUserName}}</td>
            </tr>
            <tr>
              <td class="new-titile">电话</td>
              <td class="new-content">{{curNew.submitPhone}}</td>
            </tr>
            <tr>
              <td class="new-titile">岗位</td>
              <td class="new-content">{{curNew.submitUserRole}}</td>
            </tr>
            <tr>
              <td class="new-titile">反馈时间</td>
              <td class="new-content">{{curNew.manageTime}}</td>
            </tr>
            <tr>
              <td class="new-titile">图片补充</td>
              <td class="new-content">
                <div v-if="curNew.fileUrl && curNew.fileUrl.length" class="flex">
                  <div v-for="item in curNew.fileUrl" :key="item">
                    <div style="width: 100px; height: 100px;border-radius: 4px;
                    position: absolute;background-color: rgba(0,0,0,0.3);z-index:99;pointer-events: none;">
                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQhJREFUOE+lkzFOAzEURN8cASkSoUqOETroOAI3oEgBHekiOuiggxtwBDrSwS2AiiBRcIOJHNmrv85KVsRWu9/2+/4zs+Kfj+rztl+Bk6r+Lul4qFcHsD0BPoGFpLu42fYlcA9MJX3FtQgwcCRpPdTJ9hj4ltS79fbD9hvwLOmhHLZ9mN4l/YTaNXAm6bTUCsA12fYyA26qcXp7dwC2R8A8CLkCHstNbDcBadaLCvBUtGkCwrx7jZC8f4n2ZdWTiJ0r2c7zmInaxnFUvRIvubIetDFbOQU+gKtoZ15L9t1mYK/JUJRTJmZVmFbJ+xImoIPsAFr/VoAcSPrbG5BHGkn63Qat1bG1vgHcfowRy9YlxwAAAABJRU5ErkJggg=="
                      style="margin: 40px 0 0 40px;">
                    </div>
                    <el-image 
                      style="width: 100px; height: 100px;border-radius: 4px;"
                      :src="item" 
                      :preview-src-list="curNew.fileUrl">
                    </el-image>
                  </div>
                </div>
                <span v-else>无</span>
              </td>
            </tr>
          </tbody>
        </table>
        <el-divider></el-divider>
        <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
        title="处理工单"
        :visible.sync="dialogVisible"
        width="600px" class="my-dialog"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-divider></el-divider>
        <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;width:175px;text-align:right;font-weight: 900;">预计处理截止时间</span>
          <span style="font-size: 16px;color:red;margin-right:20px;">*</span>
          <el-date-picker v-model="operation.manageTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="setDateRange"/>
        </div>
        <el-divider></el-divider>
        <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 { mapGetters } from "vuex";
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: [],//
      collapseData1Num:0,
      collapseData2: [],//
      collapseData2Num:0,
      userOpinionTypeList:[],
      projectList:[],
      projectId:'',
      imgVisible:false,
      dialogVisible: false,
      curNew:{},
      curRow:{},
      operation: {
        manageTime: '',
        show: false
      },
      pieObj:null,
      pfxAmount: 0,
      cancel: true,
    }
  },

  computed: mapGetters([ "userInfo"]),
  methods: {
    operationMethods () {
      this.operation.show = this.curRow.currentLink == 2;
      if (!this.operation.show) {
        this.operation.manageTime = '';
      }
    },
    toDisposeView(){
      this.dialogVisible = true;
      this.operationMethods();
    },
    async submissionProgress(){
      // socketSend(this.userInfo.user_id)
      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

        this.collapseData1Num = res.data.personToDoNumber;

        if(this.collapseData1.length < 1){
          this.activeIndex = 2;
        }
      }
    },
    async queryBusinessUserOpinionAll () {
      const { data: res } = await queryBusinessUserOpinionAll({
        current: 1,
        size: 999999
      })
      if (res.code == 200) {
        this.collapseData2 = res.data.userOpinionFlowList;

        this.collapseData2Num = res.data.allToDoNumber;
      }
    },
    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,
     
 
        xAxis:{
        
           label: {
            offset: 55, // 设置坐标轴文本 label 距离坐标轴线的距离

            textStyle: {
              textAlign: 'bottom', // 文本对齐方向，可取值为： start middle end
              fill: '#404040', // 文本的颜色
              fontSize: '12', // 文本大小
              fontWeight: 'bold', // 文本粗细
              rotate: 20,
              textBaseline: 'bottom' // 文本基准线，可取 top middle bottom，默认为middle
              
              
            }, // 文本样式，支持回调
            autoRotate: true, // 是否需要自动旋转，默认为 true
            autoHide:false,
          //  autoHide: { type: 'equidistance', cfg: { minGap: 1} },
            autoFit:false,
            rotate: 1,
            autoEllipsis: true,
           
          },
        

        }
      });
      line.render();
    },
    async ColumnV () {
      await this.queryProjectUserAmount();
      const columnPlot = new Column('container2', {
        data: this.ColumnData,
        isGroup: true,
        xField: 'project',
        yField: 'value',
        seriesField: 'category',
        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'
          }
        },
        autoFit:true,
        scrollbar: {
          type: 'bottom'
        },
         xAxis:{
           label: {
             interval:2,
            offset: 30, // 设置坐标轴文本 label 距离坐标轴线的距离
            textStyle: {
              textAlign: 'center', // 文本对齐方向，可取值为： start middle end
              fill: '#404040', // 文本的颜色
              fontSize: '12', // 文本大小
              fontWeight: 'bold', // 文本粗细
              rotate: 30,
              textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
              
            }, // 文本样式，支持回调
            autoRotate: true, // 是否需要自动旋转，默认为 true
            autoHide:false,
            rotate: 0.3,
            autoEllipsis: true
          }

        }
      });

      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();
    this.queryBusinessUserOpinionAll();
  },
  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;
  }
}

.my-dialog{
  /deep/.el-dialog__body{
    padding: 0 20px;
  }
}

.new-titile{
  text-align:center;
  width:120px;
  padding: 10px;
  background-color: #F8F8F8;
  color: #838791;
}
.new-content{
  text-align:left;
  padding: 10px;
  color: #50545E;
}

.title-common{
  color: #838791;
}
.title-text{
  color: #50545E;
}
.title-red{
  margin-left: 6px;
  color: #EB4D3D;
}
.title-time{
  margin-right: 30px;
  color: #838791;
  font-size: 14px;
}

</style>