jhbigscreen/src/pages/engin/auditingPage.vue

<template>
  <div class="engin-auditing-page">
    <div class="screen-content">
      <el-row>
        <el-col :span="6">
          <module-one-1-1 :label="label1" style="position: relative;">
            <img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;"
              @click="doStateDlg">
            <div style="padding-top:10px;">
              <chart-bar :height="280" :optData="chart1Data" :fn="changeChart1" :key="elChart2"></chart-bar>
            </div>
          </module-one-1-1>
          <module-one-2-1 :label="label2" style="position: relative;" class="flow-list">
            <div class="scroll" style="margin-top: 0px;max-height: calc(100% - 30px);overflow-y: auto;">
              <table class="tb-list1">
                <tr>
                  <th style="width:40px;">排名</th>
                  <th>申请项目</th>
                  <th style="width:80px;">申请数量</th>
                  <th style="width:80px;">申请占比</th>
                </tr>
                <tr v-for="(it, idx) in flowList" :key="idx" class="tr-cmd" @click="doStateDlg(it)">
                  <td>{{ it.no }}</td>
                  <td style="text-align:left;padding-left:8px;">{{ it.name }}</td>
                  <td>{{ it.value }}</td>
                  <td>{{ it.percent }}%</td>
                </tr>
              </table>
            </div>
          </module-one-2-1>
        </el-col>
        <el-col :span="12">
          <module-one-3-1 label="付款金额" style="position: relative;" class="cost-sum">
            <el-row style="padding:0px 10px;">
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">合同总金额(万元)</div>
                </div>

                <people-number :number="((sumCost.data1 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">建安费总金额(万元)</div>
                </div>

                <people-number :number="((sumCost.data2 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
            </el-row>
            <div class="div-line"></div>
            <el-row style="padding:0px 10px;">
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">总计付款(万元)</div>
                </div>

                <people-number :number="((sumCost.data3 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">付款比例</div>
                </div>
                <div class="div-percent">
                  <div class="percent-content" :style="'width:' + sumCost.percent + '%'">
                    <span v-if="sumCost.percent >= 20">{{ sumCost.percent.toFixed(2) }}%</span>
                  </div>
                  <span style="color: #fff;" v-if="sumCost.percent < 20">{{ sumCost.percent.toFixed(2) }}%</span>
                </div>
              </el-col>
            </el-row>

            <div class="div-line"></div>

            <el-row style="padding:0px 10px;">
              <el-col :span="12">
                <div class="warning-info-title">
                  <div class="active">进度款已支付(万元)</div>
                </div>

                <people-number :number="((sumCost.data4 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

                <div class="warning-info-title">
                  <div class="active">安措费已支付(万元)</div>
                </div>

                <people-number :number="((sumCost.data5 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
              <el-col :span="12" style="margin-top:40px;">
                <div class="warning-info-title">
                  <div class="active">挂账总金额(万元)</div>
                </div>

                <people-number :number="((sumCost.data6 * 1.0 || 0).toFixed(2)) || '0.00'"
                  unit=""></people-number>

              </el-col>
            </el-row>
            <div style="padding:0px 10px;height: calc(100% - 440px);">
              <div class="warning-info-title" style="border-bottom: dotted 1px #409effb8;">
                <div class="active">付款明细</div>
              </div>
              <div class="scroll" v-if="sumList" style="max-height: calc(100% - 50px);overflow-y: auto;">
                <template v-if="sumList.names.length > 0">
                  <div class="sum-list-item" v-for="(it, idx) in sumList.names" :key="idx">
                    <div class="prj-name">{{ it }}</div>
                    <table class="sum-table">
                      <tr>
                        <th>付款项</th>
                        <th>付款明细</th>
                        <th>申请时间</th>
                        <th>申请金额(万元)</th>
                        <th>已付款金额(万元)</th>
                        <th>挂账金额(万元)</th>
                      </tr>
                      <tr style="background-color: #00aaff38;">
                        <td colspan="3" align="center">合计</td>
                        <td>{{ (sumList.data[it][2].sum1 * 1.0).toFixed(2) }}</td>
                        <td>{{ (sumList.data[it][2].sum2 * 1.0).toFixed(2) }}</td>
                        <td>{{ (sumList.data[it][2].sum3 * 1.0).toFixed(2) }}</td>
                      </tr>
                      <template v-if="sumList.data[it][0].length > 0">
                        <tr v-for="(row, index) in sumList.data[it][0]" :key="'a-' + idx + 'b-' + index">
                          <td v-if="index == 0" :rowspan="sumList.data[it][0].length">安措费</td>
                          <td>第{{ index + 1 }}期</td>
                          <td>{{ row.date1 | formatDate }}</td>
                          <td>{{ (row.money * 1.0).toFixed(2) }}</td>
                          <td>{{ (row.money2 * 1.0).toFixed(2) }}</td>
                          <td>{{ (row.money3 * 1.0).toFixed(2) }}</td>
                        </tr>
                      </template>
                      <template v-else>
                        <tr>
                          <td>安措费</td>
                          <td colspan="5">
                            <div style="text-align: center">暂无数据</div>
                          </td>
                        </tr>
                      </template>


                      <template v-if="sumList.data[it][1].length > 0">
                        <tr v-for="(row, index) in sumList.data[it][1]" :key="'a-' + idx + 'c-' + index">
                          <td v-if="index == 0" :rowspan="sumList.data[it][1].length">进度款</td>
                          <td>第{{ index + 1 }}期</td>
                          <td>{{ row.date1 | formatDate }}</td>
                          <td>{{ (row.money * 1.0).toFixed(2) }}</td>
                          <td>{{ (row.money2 * 1.0).toFixed(2) }}</td>
                          <td>{{ (row.money3 * 1.0).toFixed(2) }}</td>
                        </tr>
                      </template>
                      <template v-else>
                        <tr>
                          <td>进度款</td>
                          <td colspan="5">
                            <div style="text-align: center">暂无数据</div>
                          </td>
                        </tr>
                      </template>

                    </table>
                    <div class="div-line"></div>
                  </div>
                </template>
                <template v-else>
                  <div>
                    暂无数据
                  </div>
                </template>
              </div>
            </div>
          </module-one-3-1>
        </el-col>
        <el-col :span="6">
          <module-one-1-1 label="分包单位资质审批" style="position: relative;">
            <enginChart :class="'show-chart'" ref="chart2" :height="300">
            </enginChart>
          </module-one-1-1>
          <module-one-2-1 label="分包单位资质审批明细" style="position: relative;">

            <template v-if="dataList4.length > 0">
              <div class="data-list3 scroll">
                <table style=" border-collapse: collapse;">
                  <tr class="tr-header">
                    <th>所属项目</th>
                    <th style="width:95px">所属总包单位</th>
                    <th>申请单位</th>
                    <th>分包类型</th>
                    <th style="width:40px">申请<br />时间</th>
                    <th style="width:40px">状态</th>
                  </tr>
                  <tr v-for="(it, idx) in dataList4" :key="idx">
                    <td>{{ it.businessKeyName }}</td>
                    <td>{{ it.startDeptName }}</td>
                    <td>{{ it.deptName }}</td>
                    <td>{{ it.taskName }}</td>
                    <td>{{ it.createTime | formatDate }}</td>
                    <td>
                      <span v-if="!it.finishTime">进行中</span>
                      <span v-else style="color:green">完成</span>
                    </td>
                  </tr>
                </table>
              </div>              
              <el-pagination layout="total,prev, pager, next"
                @current-change="handleCurrentChange" :total="data4Page.total" :page-size="data4Page.pageSize"
                :current-page.sync="data4Page.pageIndex" class="bg-pagination"></el-pagination>
            </template>
            <div v-else style="text-align: center;margin-top:100px;" class="div-no-data">
              <img src="images/nodata.png" style="width: 120px;">
              <div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>

            </div>
          </module-one-2-1>
        </el-col>
      </el-row>
    </div>
    <stateDialog ref="stateDlg"></stateDialog>
  </div>
</template>

<script>
import '@/components/module/module-one-2-1'
import '@/components/module/module-one-3-1'
import '@/components/chart-bar'
import enginChart from './enginChart.vue'
import stateDialog from './flowDetailByStateDialog.vue'
import debounce from 'lodash.debounce'
export default {
  name: 'JhbigscreenAuditingPage',
  components: {
    stateDialog, enginChart
  },
  data() {
    return {
      label1: "工程审批进度",
      label2: "工程审批排名",
      prjs: [],
      project: {},
      dept: {},
      sumCost: {},
      sumList: null,
      chart1Data: [],
      elChart2: 0,
      flowList: [],
      dataList4: [],
      data4Page: {
        total: 0,
        pageSize: 10,
        pageIndex: 1
      }
    };
  },

  mounted() {
    this.$bus.$on("loadProjects", debounce(prjs => {
      this.prjs = prjs;
    }));
    this.$bus.$on("projectChange", debounce(res => {
      this.project = res;
      this.loadData();
    }));
    this.$bus.$on("deptChange", debounce(dept => {
      this.dept = dept;
      this.loadData();
    }));
    if (this.$root.hasInitHeader) {
      this.initMe();
    }
  },

  methods: {
    doStateDlg(it) {
      let obj = {
        deptId: this.dept?.id || 0,
        projectId: this.project?.id || 0
      }
      if (it) {
        obj.projectId = it.id;
        obj.prj = it;
      }
      this.$refs.stateDlg.showDialog(obj);
    },
    changeChart1(opt) {
      opt.legend = {
        textStyle: {
          color: "#fff"
        }
      };
      return opt;
    },
    numberWithCommas(x) {
      x = x.toString();
      var pattern = /(-?\d+)(\d{3})/;
      while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
      return x;
    },
    initMe() {
      this.project = this.$root.project || {};
      this.dept = this.$root.dept || {};
      this.prjs = this.$root.projects || [];
      this.loadData();
    },
    loadData() {
      this.loadSumCost();
      this.loadCostList();
      this.loadFlow();
      this.initChart2();
      this.data4Page.pageIndex = 1;
      this.loadFlowDataList();
    },
    handleCurrentChange(n) {
      this.data4Page.pageIndex = n;
      this.loadFlowDataList();
    },
    loadFlowDataList() {
      let postData = {};
      if (this.project && this.project.id > 0) {
        postData.projectId = this.project.id;
      } else {
        postData.id = this.dept.id;
      }
      this.$api.flow.listFlowBySubDeptType(postData, this.data4Page.pageIndex, this.data4Page.pageSize).then(d => {
        let data = d.rows || [];       
        this.dataList4 = data;
        this.data4Page.total = d.total;
      });
    },
    initChart2() {
      let postData = {};
      if (this.project && this.project.id > 0) {
        postData.projectId = this.project.id;
      } else {
        postData.id = this.dept.id;
      }
      this.$api.flow.groupFlowBySubDeptType(postData).then(d => {
        let data = (d.data || []).map(it => {
          return {
            name: it.taskName,
            value: it.taskId || 0
          }
        });
        let opt = {
          "tooltip": { "trigger": "item" }, "series": [{
            "top": 10, "type": "pie", "radius": "60%",
            "data": data, "label": { "alignTo": "edge", "edgeDistance": "10%", "color": "#fff", "formatter": "{name|{b}}\n{cnt|{c}}", "rich": { "cnt": { "fontSize": 10, "color": "#eee" } } }
          }]
        };
        if (this.$refs.chart2 && this.$refs.chart2.init) {
          this.$refs.chart2.init(opt);
        }
      });

    },
    loadFlow() {
      let ajaxs = [
        this.$api.flow.groupByCategory(this.project?.id || 0, this.dept?.id || 0),
        this.$api.flow.groupByProject(this.dept?.id || 0),
      ];
      this.$api.http.all(ajaxs).then(res => {
        this.showFlowChart2(res[0]);
        this.showFlowList2(res[1]);
      });
    },
    showFlowChart2(res) {
      let chartData = [['分类', '总计', '审批中', '已完成']];
      this.chartInfo = [];
      let sum = 0;
      (res.data || []).forEach(it => {
        let o = {
          title: it.taskName,
          comp: it.assigneeId || 0,
          uncomp: it.procDefVersion || 0,
          total: 0
        }
        o.total = o.comp + o.uncomp;
        sum += o.total;
        chartData.push([this.addBr(o.title), o.total, o.uncomp, o.comp])
      })
      this.chart1Data = chartData;
      this.label1 = `工程审批进度 (${sum})`;
      this.elChart2++;
    },
    showFlowList2(res) {
      let tmps = (res.data || []).map((it, idx) => {
        return {
          no: idx + 1,
          id: it.businessKey * 1,
          name: it.businessKeyName,
          value: it.duration * 1,
          percent: 0
        }
      });
      let sum = 0;
      tmps.forEach(d => {
        sum += d.value;
      });
      if (sum > 0) {
        tmps.forEach(d => {
          d.percent = (d.value * 100.0 / sum).toFixed(2);
        });
      }
      this.label2 = `工程审批排名 (${sum})`
      let objs = [];
      let prjIds = this.prjs.map(d => d.id).filter(d => d > 0);
      tmps.forEach(d => {
        if (prjIds.indexOf(d.id) >= 0) {
          objs.push(d);
        }
      })
      if (this.project?.id != 0) {
        let out = objs.filter(d => d.id == this.project.id);
        if (out.length == 0) {
          this.flowList = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
          this.label2 = `工程审批排名 (0)`
        } else {
          this.flowList = out;
          this.label2 = `工程审批排名 (${out[0].value})`
        }
      } else {
        this.flowList = objs;
      }
    },
    loadCostList() {
      let postData = {};
      if (this.project && this.project.id > 0) {
        postData.projectId = this.project.id;
      } else {
        postData.id = this.dept.id;
      }
      this.$api.costOut.selectForBigEnginList(postData).then(d => {
        this.sumList = d;
      });
    },
    loadSumCost() {
      let postData = {};
      if (this.project && this.project.id > 0) {
        postData.projectId = this.project.id;
      } else {
        postData.id = this.dept.id;
      }
      this.$api.costOut.sumForBsEnginAuditing(postData).then(d => {
        this.sumCost = d;
      });
    },
    addBr(s) {
      let out = "";
      for (let i = 0; i < s.length; i++) {
        out += s.charAt(i);
        if ((i + 1) % 3 == 0 && i < s.length - 2) {
          out += "\n";
        }
      }
      return out;
    },
  },
};
</script>
<style lang="less">
.engin-auditing-page {
  .flow-list {
    .tb-list1 {
      margin: 12px;
      width: calc(100% - 24px);
      border-collapse: collapse;
      border: solid 1px #ffffff52;

      th {
        font-size: 14px;
        color: #409eff;
        border: solid 1px #ffffff52;
        line-height: 60px;
      }

      td {
        font-size: 12px;
        text-align: center;
        border: solid 1px #ffffff52;
        line-height: 40px;
      }
    }
  }  

  .data-list3 {
    max-height: calc(100% - 70px);
    overflow-y: auto;
    padding: 4px;

    .tr-header {
      th {
        color: #409eff;
      }
    }

    td,
    th {
      border: solid 1px #409eff8c;
      padding: 0px 8px;
      font-size: 12px;
      line-height: 20px;
    }
  }

  .cost-sum {
    .people-number {
      height: 40px;
      transform: scale(.8);
      position: relative;
      left: -40px;
    }

    .div-line {
      border-bottom: dotted 1px #eeeeee52;
      margin: 16px 10px 0px;
    }

    .div-percent {
      margin: 0px 20px;
      background: #c0dafb;
      border-radius: 10px;
      position: relative;

      .percent-content {
        background-color: #409eff;
        border-radius: 10px;
        text-align: right;
        display: inline-block;
      }
    }

    .sum-list-item {
      padding: 0px 20px;

      .prj-name {
        line-height: 40px;
      }

      .sum-table {
        border-collapse: collapse;

        th {
          color: #409eff;
        }

        td,
        th {
          line-height: 30px;
          border: solid 1px #409eff8c;
          padding: 0px 8px;
        }
      }

      .div-line {
        margin: 10px 0px;

      }
    }
  }
}
</style>