YZProjectCloud/yanzhu-bigscreen/src/views/projectChecked.vue

<template>
  <div class="project-checked main-page">
    <el-col :span="6" class="h100">
      <module-one-1-1 label="举牌验收数量统计" class="chart1-group">
        <project-overview-chart
          :htmlShow="true"
          :key="'ai1' + chart1Key"
          :sp="''"
          :fn="changeChart1"
          :maintitle="groupTotal"
          :legend-opt="groupLendOpt"
          :typedata="groupData"
          text="验收数"
          :height="chart1Height"
        ></project-overview-chart>
      </module-one-1-1>
      <module-one-2-1 label="本周验收列表" class="week-group">
        <template v-if="weekData.length == 0">
          <div class="no-data">
            <div class="no-data-conten">
              <img src="/cdn/bsimages/nodata.png" style="width: 240px" />
              <div class="no-data">暂无数据</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="week-list scroll" :key="weekKey">
            <div
              class="week-item"
              v-for="(it, index) in weekData"
              :key="index"
              @click="handleWeekItemClick(it, $event)"
            >
              <div class="item-left">
                <el-image
                  :src="it.image"
                  :preview-src-list="it.images"
                  fit="contain"
                />
              </div>
              <div class="item-right">
                <div class="item-right-row">
                  <span
                    :class="'check-state check-state-' + it.checkResultColor"
                    >{{ it.checkResultName }}</span
                  >
                  <span class="check-date">{{ it.checkingDate }}</span>
                </div>
                <div class="item-right-row">
                  <div class="item-label">工序部位:</div>
                  <div class="item-data">{{ it.workingPosition }}</div>
                </div>
                <div class="item-right-row">
                  <div class="item-label">班组长:</div>
                  <div class="item-data">
                    {{ it.groupDeptUserName }}({{ it.groupDeptUser }})
                  </div>
                </div>

                <div class="item-right-row">
                  <div class="item-label">技术员:</div>
                  <div class="item-data">
                    {{ it.technicianUserName }}({{ it.technicianUser }})
                  </div>
                </div>

                <div class="item-right-row">
                  <div class="item-label">监理专员:</div>
                  <div class="item-data">
                    {{ it.superviseUserName }}({{ it.superviseUser }})
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </module-one-2-1>
    </el-col>
    <el-col :span="18" class="h100">
      <module-one-2-3 label="举牌验收列表" class="h66 list-group">
        <div class="head-title-tab" :key="chart1Key">
          <div
            :class="nav == 1 ? 'head-nav active' : 'head-nav'"
            @click="doNav(1)"
          >
            已验收({{ getCheckedCount(1) }})
          </div>
          <div
            :class="nav == 0 ? 'head-nav active' : 'head-nav'"
            @click="doNav(0)"
          >
            未验收({{ getCheckedCount(0) }})
          </div>
        </div>

        <template v-if="listData.length == 0">
          <div class="no-data">
            <div class="no-data-conten">
              <img src="/cdn/bsimages/nodata.png" style="width: 240px" />
              <div class="no-data">暂无数据</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="list-data scroll" :key="listKey">
            <div
              class="week-item"
              v-for="(it, index) in listData"
              :key="index"
              @click="handleWeekItemClick(it, $event)"
            >
              <div class="item-left">
                <el-image
                  :src="it.image"
                  :preview-src-list="it.images"
                  fit="contain"
                />
              </div>
              <div class="item-right">
                <div class="item-right-row">
                  <span
                    :class="'check-state check-state-' + it.checkResultColor"
                    >{{ it.checkResultName }}</span
                  >
                  <span class="check-date">{{ it.checkingDate }}</span>
                </div>
                <div class="item-right-row">
                  <div class="item-label">工序部位:</div>
                  <div class="item-data">{{ it.workingPosition }}</div>
                </div>
                <div class="item-right-row">
                  <div class="item-label">班组长:</div>
                  <div class="item-data">
                    {{ it.groupDeptUserName }}({{ it.groupDeptUser }})
                  </div>
                </div>

                <div class="item-right-row">
                  <div class="item-label">技术员:</div>
                  <div class="item-data">
                    {{ it.technicianUserName }}({{ it.technicianUser }})
                  </div>
                </div>

                <div class="item-right-row">
                  <div class="item-label">监理专员:</div>
                  <div class="item-data">
                    {{ it.superviseUserName }}({{ it.superviseUser }})
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            layout="total,prev, pager, next"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
            :total="total"
            :page-size="size"
            :current-page.sync="index"
            class="bg-pagination"
          ></el-pagination>
        </template>
      </module-one-2-3>
      <module-one-1-3 label="举牌验收技术员统计" class="h33 group-technician">
        <template v-if="technicianData.length == 0">
          <div class="no-data">
            <div class="no-data-conten">
              <img src="/cdn/bsimages/nodata.png" style="width: 240px" />
              <div class="no-data">暂无数据</div>
            </div>
          </div>
        </template>
        <template v-else>
          <my-chart
            :key="chart2Key"
            id="project-safety-check-chart2"
            width="100%"
            height="100%"
            :render="renderChart2"
          ></my-chart>
        </template>
      </module-one-1-3>
    </el-col>
    <projectCheckedDetailDialog ref="detailDlg" />
  </div>
</template>

<script>
import debounce from "lodash.debounce";
import projectCheckedDetailDialog from "@/views/check/projectCheckedDetailDialog.vue";
export default {
  components: {
    projectCheckedDetailDialog,
  },
  data() {
    return {
      dpi: "",
      chartKey: 0,
      selProject: null,
      // 举牌验收数量统计
      chart1Key: 0,
      chart1Height: 200,
      groupTotal: 0,
      groupLendOpt: {},
      groupData: [],
      // 举牌验收技术员统计
      chart2Key: 0,
      chart2Height: 200,
      technicianData: [],
      //本周验收列表
      weekKey: 0,
      weekData: [],
      //举牌验收列表
      nav: 1,
      listData: [],
      total: 0,
      size: 9,
      index: 1,
      listKey: 10000,
    };
  },
  mounted() {
    this.$store.dispatch("ChangeNav", 403);
    this.$bus.$on(
      "projectChange",
      debounce((prj) => {
        this.selProject = prj;
        this.init();
      })
    );
    this.selProject = this.$store.getters.selProject;
    this.init();
    this.dpi = this.$dpi();
    window.addEventListener("resize", () => {
      if (this.dpi != this.$dpi()) {
        this.dpi = this.$dpi();
        this.resize();
      }
    });
    this.resize();
    this.setOpts();
  },
  methods: {
    setOpts() {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
      this.groupLendOpt = {
        icon: "rect",
        orient: "horizontal",
        itemWidth: "50%",
        left: 240,
        right: "10%",
        itemWidth: 20,
        itemGap: 20,
        itemHeight: 20,
        textStyle: {
          padding: [0, 0, 0, 0],
          fontSize: is1K ? 10 : is2K ? 14 : 20,
          color: "#c3dbfd",
          align: "center",
          rich: {
            name: {
              fontSize: is1K ? 10 : is2K ? 14 : 20,
              color: "#c3dbfd",
              padding: [5, 2, 5, 2],
            },
            percent: {
              fontSize: is1K ? 10 : is2K ? 14 : 20,
              color: "#4676FD",
              padding: [0, 2, 0, 2],
            },
          },
        },
      };
    },
    init() {
      if (!this.selProject) {
        return;
      }
      this.chartKey++;
      this.loadGroupData();
      this.loadGroupByTechnician();
      this.loadWeekProjectChecked();
      this.nav = -1;
      this.doNav(1);
    },
    resize() {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
      this.chart1Height = is1K ? 230 : is2K ? 360 : 595;
      this.chart1Key++;
      this.chart2Key++;
    },
    getCheckedCount(n) {
      let obj = this.groupData.find(
        (item) => item.name == (n == 1 ? "已验收" : "未验收")
      );
      return obj ? obj.value : 0;
    },
    showDetail(row) {
      this.$refs.detailDlg.showDialog(row);
    },
    handleWeekItemClick(row, event) {
      // 检查点击的是否在图片区域内
      const target = event.target;
      const imageContainer = event.currentTarget.querySelector(".item-left");
      if (imageContainer && !imageContainer.contains(target)) {
        this.showDetail(row);
      }
    },
    doNav(n) {
      if (this.nav == n) {
        return;
      }
      this.nav = n;
      this.index = 1;
      this.loadDataList();
    },
    handleCurrentChange(n) {
      this.index = n;
      this.loadDataList();
    },
    loadDataList() {
      let param = {
        projectId: this.selProject.id,
        checkResult: this.nav == 1 ? 99 : 100,
        pageNum: this.index,
        pageSize: this.size,
      };
      this.$api.checked.listProjectChecked(param).then((res) => {
        this.total = res.total + 20;
        this.listData = this.mapData(res);
        this.listKey++;
      });
    },
    loadWeekProjectChecked() {
      let param = {
        projectId: this.selProject.id,
        remark: "lastWeek",
        pageNum: 1,
        pageSize: 100,
      };
      this.$api.checked.listProjectChecked(param).then((res) => {
        this.weekData = this.mapData(res);
        this.weekKey++;
      });
    },
    mapData(res) {
      return (res.rows || []).map((item) => {
        if (item.imageUrls) {
          item.images = item.imageUrls.split(",");
          item.image = item.images[0];
          for (let i = 0; i < 6; i++) {
            item.images.push(item.images[0]);
          }
        } else {
          item.image = "";
          item.images = [];
        }

        if (item.checkingFiles) {
          item.checkImages = item.checkingFiles.split(",");
          item.checkImage = item.images[0];
        } else {
          item.checkImage = "";
          item.checkImages = [];
        }

        if (item.checkResult == 1 && item.approveStatus == 100) {
          item.checkResultName = "验收通过";
          item.checkResultColor = 1;
        } else {
          item.checkResultName = "验收不通过";
          item.checkResultColor = 2;
        }

        return item;
      });
    },
    loadGroupData() {
      this.$api.checked.groupByStatus(this.selProject.id).then((res) => {
        let cnt = 0;
        let tmps = (res.data || []).map((it) => {
          return {
            name: it.title,
            value: it.cnt,
          };
        });
        tmps.forEach((it) => {
          cnt += it.value;
        });
        this.groupData = tmps;
        this.groupTotal = cnt;
        this.chart1Key++;
      });
    },
    changeChart1(opt) {
      if (this.$dpi() == "1K") {
        opt.legend[0].left = 200;
        return opt;
      } else if (this.$dpi() == "2K") {
        opt.legend[0].left = 360;
        return opt;
      } else {
        opt.legend[0].left = 500;
        return opt;
      }
    },
    loadGroupByTechnician() {
      this.$api.checked.groupByTechnician(this.selProject.id).then((res) => {
        this.technicianData = res;
        this.chart2Key++;
      });
    },
    renderChart2(opt) {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
      let option = {
        grid: {
          left: "5%",
          right: "5%",
          bottom: "0%",
          top: "15%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          valueFormatter: (v) => {
            return v;
          },
          textStyle: {
            fontSize: is1K ? 12 : is2K ? 14 : 24,
          },
        },
        legend: {
          top: is1K ? "0%" : is2K ? "0%" : "0%",
          left: "center",
          itemWidth: is1K ? 25 : is2K ? 30 : 40,
          itemHeight: is1K ? 14 : is2K ? 20 : 20,
          itemGap: is1K ? 20 : is2K ? 30 : 40,
          textStyle: {
            color: "#fff",
            fontSize: is1K ? 14 : is2K ? 20 : 30,
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.technicianData.map((it) => it.name),
            axisLabel: {
              width: is1K ? 60 : is2K ? 140 : 220,
              margin: 15,
              fontSize: is1K ? 12 : is2K ? 14 : 22,
              overflow: "break",
              color: "#a2c8f9",
            },
            splitLine: {
              lineStyle: {
                opacity: 0.1,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            minInterval: 1,
            axisLabel: {
              formatter: "{value}",
              color: "#2ec2b3",
              fontSize: is1K ? 12 : is2K ? 14 : 24,
            },
            splitLine: {
              lineStyle: {
                opacity: 0.1,
              },
            },
          },
        ],
        series: [
          {
            name: "已验收",
            type: "bar",
            barGap: "0%",
            barWidth: "20%",
            label: {
              show: true,
              position: "top",
              color: "#4DAAFC",
              fontSize: is1K ? 12 : is2K ? 14 : 24,
            },
            lineStyle: {
              color: "#7ddff2",
            },
            itemStyle: {
              color: "#4974ff",
            },
            data: this.technicianData.map((it) => it.accepted),
          },
          {
            name: "待验收",
            type: "bar",
            barGap: "0%",
            barWidth: "20%",
            label: {
              show: true,
              position: "top",
              color: "#4DAAFC",
              fontSize: is1K ? 12 : is2K ? 14 : 24,
            },
            lineStyle: {
              color: "#006594",
            },
            itemStyle: {
              color: "#52aef7",
            },
            data: this.technicianData.map((it) => it.toBe),
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="less">
.project-checked {
  .screen-module {
    &.h66 {
      height: calc(66% - 20px) !important;
    }

    &.h33 {
      height: calc(33% - 20px) !important;
    }
  }

  .chart1-group {
    .chart-gif,
    .chart-text {
      left: 51px !important;
      top: 63px !important;
    }
  }

  .no-data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .no-data-conten {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  .week-group {
    .module-ctx {
      padding: 0px;

      .week-list {
        max-height: 100%;
        overflow-y: auto;
        padding: 10px;

        .week-item {
          &:first-child {
            margin-top: 0px;
          }
        }
      }
    }
  }

  .list-group {
    .module-ctx {
      padding: 0px;

      .head-title-tab {
        padding: 10px 0px;
        position: relative;
        top: 10px;
        left: 10px;
      }

      .list-data {
        height: calc(100% - 90px);
        overflow-y: auto;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 10px;
      }
    }
  }

  .week-item {
    background-color: #0000001a;
    border: solid 1px #99999988;
    margin-top: 10px;
    border-radius: 5px;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 8px;
    cursor: pointer;

    .item-left {
      width: 40%;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-image {
        height: 100%;
      }
    }

    .item-right {
      color: #3da2ff;
      font-size: 12px;
      padding-left: 8px;
      flex-grow: 1;

      .item-right-row {
        display: flex;
        flex-flow: row;
        line-height: 24px;
        position: relative;

        .item-label {
          color: #32e1e4;
        }

        .check-state {
          display: inline-block;
          line-height: 20px;
          padding: 2px 4px;
          border-radius: 4px;

          &.check-state-1 {
            color: #09f509;
            background: #01b24954;
          }

          &.check-state-2 {
            color: #192c64;
            background: #6abee9;
          }
        }

        .check-date {
          position: absolute;
          right: 4px;
          color: #fff;
        }
      }
    }
  }

  @media (min-width: 1921px) and (max-width: 2560px) {
    .no-data {
        font-size: 16px;
     }
    .chart1-group {
      .chart-gif,
      .chart-text {
        left: 59px !important;
        top: 95px !important;
        width: 170px;
        height: 170px;

        .chart-text-title {
          font-size: 30px;
        }

        .chart-text-sub-title {
          font-size: 20px;
        }
      }
    }

    .list-group {
      .module-ctx {
        .list-data {
          height: calc(100% - 150px);
        }
      }
    }

    .week-group {
      .module-ctx {
        height: calc(100% - 50px);
      }
    }

    .group-technician {
      .module-ctx {
        height: calc(100% - 50px);
      }
    }

    .week-item {
      .item-left {
        height: 190px;
      }

      .item-right {
        font-size: 16px;
        padding-left: 10px;

        .item-right-row {
          line-height: 30px;

          .check-state {
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 5px;
          }
        }
      }
    }
  }

  @media (min-width: 2561px) {
     .no-data {
        font-size: 24px;
     }
    .chart1-group {
      .chart-gif,
      .chart-text {
        left: 79px !important;
        top: 153px !important;
        width: 290px;
        height: 290px;

        .chart-text-title {
          font-size: 50px;
        }

        .chart-text-sub-title {
          font-size: 30px;
        }
      }
    }

    .list-group {
      .module-ctx {
        .list-data {
          height: calc(100% - 200px);
        }
      }
    }

    .week-group {
      .module-ctx {
        height: calc(100% - 60px);
      }
    }

    .group-technician {
      .module-ctx {
        height: calc(100% - 60px);
      }
    }

    .week-item {
      .item-left {
        height: 330px;
      }

      .item-right {
        font-size: 24px;
        padding-left: 20px;

        .item-right-row {
          line-height: 60px;

          .check-state {
            line-height: 60px;
            padding: 0px 10px;
            border-radius: 10px;
          }
        }
      }
    }
  }
}
</style>