zhgdyun/src/views/projectFront/BIMCenter/progressManagement.vue

<template>
  <div class="fullHeight">
    <div>
      <div class="searchBox whiteBlock">
        <el-form
          :inline="true"
          size="medium"
          :model="queryInfo"
          class="demo-form-inline"
        >
          <el-form-item label="分部分项工程名称">
            <el-input
              v-model="queryInfo.taskName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryInfo.status" placeholder="请选择">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="实际完成日期">
            <el-date-picker
              v-model="daterange"
              @change="changeDate"
              type="daterange"
              :range-separator="$t('message.energyManage.to')"
              :start-placeholder="$t('message.energyManage.start')"
              :end-placeholder="$t('message.energyManage.end')"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getProgressListData"
              >查询</el-button
            >
            <el-button type="warning" plain @click="refreshBtn">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_wrap whiteBlock">
        <vue-scroll>
          <el-table
            height="650"
            class="tables"
            :data="listData"
            lazy
            row-key="id"
            default-expand-all
            :tree-props="{ children: 'children' }"
          >
            <el-table-column
              width="200"
              prop="taskName"
              label="分部分项工程名称"
            >
              <template slot-scope="scope">
                <span
                  :title="scope.row.taskName"
                  style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 150px;position: absolute;"
                >
                  {{ scope.row.taskName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="startDate"
              label="计划开始时间"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="finishDate"
              label="计划完成时间"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="actualStartDate"
              label="实际开始时间"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="actualFinishDate"
              label="实际完成时间"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="dutyUserName"
              label="负责人"
            ></el-table-column>
            <el-table-column align="center" prop="progressRatio" label="进度">
              <template slot-scope="scope">{{
                scope.row.progressRatio + "%"
              }}</template>
            </el-table-column>
            <el-table-column prop="status" align="center" label="执行状态">
              <template slot-scope="scope">{{
                scope.row.status == 0
                  ? "未开始"
                  : scope.row.status == 1
                  ? "进行中"
                  : scope.row.status == 2
                  ? "已完成"
                  : "未开始"
              }}</template>
            </el-table-column>
            <el-table-column
              prop="beginWarning"
              align="center"
              label="开始预警"
            >
              <template slot-scope="scope">
                <div
                  style="color: #fe6565;"
                  v-if="scope.row.beginWarning === 3"
                >
                  {{
                    scope.row.beginWarning == 1
                      ? "提前"
                      : scope.row.beginWarning == 2
                      ? "正常"
                      : "逾期"
                  }}
                </div>
                <div v-else>
                  {{
                    scope.row.beginWarning == 1
                      ? "提前"
                      : scope.row.beginWarning == 2
                      ? "正常"
                      : "逾期"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="endWarning" align="center" label="结束预警">
              <template slot-scope="scope">
                <div style="color: #fe6565;" v-if="scope.row.endWarning === 3">
                  {{
                    scope.row.endWarning == 1
                      ? "提前"
                      : scope.row.endWarning == 2
                      ? "正常"
                      : "逾期"
                  }}
                </div>
                <div v-else>
                  {{
                    scope.row.endWarning == 1
                      ? "提前"
                      : scope.row.endWarning == 2
                      ? "正常"
                      : "逾期"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="300" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click.native.stop="relativeComponent(scope.row)"
                >
                  关联构件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </vue-scroll>
        <el-pagination
          class="pagerBox"
          style="position: absolute; top: 85%; left: 40%"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pagInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pagInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pagInfo.total)"
          background
        ></el-pagination>
      </div>
    </div>
    <!-- 关联构件 -->
    <el-dialog
      width="80%"
      :modal-append-to-body="false"
      :visible.sync="showRelative"
      title="关联构件"
    >
      <div class="data-show">
        <span>选中的数据值：</span>
        <div class="selected-box">
          <template v-show="selectedList.length > 0">
            <div v-for="(item, index) in selectedList" :key="index">
              <span>{{ item }}</span>
              <i class="el-icon-close" @click="deleteSelected(index)"></i>
            </div>
          </template>
        </div>
        <el-button type="primary" size="small" @click="saveSelected"
          >保存</el-button
        >
      </div>
      <div class="model-box">
        <iframe
          :src="url"
          frameborder="0"
          width="100%"
          id="iframe"
          style="flex: 1"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTaskProgressPageApi,
  editProgressBindComponentApi,
} from "@/assets/js/api/progressManagement";
import { searchEnableModel } from "@/assets/js/api/project";
export default {
  mounted() {},
  data() {
    return {
      url: "",
      iframe: "",
      selectedList: [],
      showRelative: false,
      rowData: {},
      options: [
        {
          label: "未开始",
          value: 0,
        },
        {
          label: "进行中",
          value: 1,
        },
        {
          label: "已完成",
          value: 2,
        },
        // {
        //   label: '已逾期',
        //   value: 3
        // },
      ],
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      daterange: [],
      projectSn: "",
      listData: [],
      queryInfo: {
        taskName: "",
        status: "",
        actualStartDate: "",
        actualFinishDate: "",
      },
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getProgressListData();
  },
  mounted() {
    this.url = window.location.origin + "/progressModel.html";
    window.addEventListener("message", this.getIframeMessage);
    // this.getModelList()
  },
  methods: {
    getIframeMessage(e) {
      console.log("Message from iframe：", e.data.msg);
      if (e.data.msg) {
        let dataIndex = null;
        dataIndex = this.selectedList.find((item) => {
          return item == e.data.msg;
        });
        if (!dataIndex) {
          this.selectedList.push(e.data.msg);
        }
      }
    },
    // 保存选中数据
    saveSelected() {
      let that = this;
      editProgressBindComponentApi({
        id: this.rowData.id,
        bimComponent: JSON.stringify(this.selectedList),
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          that.getProgressListData();
          that.iframe.contentWindow.postMessage({
            token: res.result.viewToken,
            bimComponent: that.selectedList,
          });
        }
      });
    },
    // 删除选中数据
    deleteSelected(index) {
      this.selectedList.splice(index, 1);
      this.$forceUpdate();
    },
    // 关联构件
    async relativeComponent(row) {
      this.rowData = row;
      console.log(row);
      if (row.bimComponent) {
        this.selectedList = JSON.parse(row.bimComponent);
      } else {
        this.selectedList = [];
      }
      this.showRelative = true;
      const res = await searchEnableModel({ projectSn: this.projectSn });
      console.log(res);
      this.$nextTick(() => {
        this.iframe = document.getElementById("iframe");
        this.iframe.contentWindow.postMessage({
          token: res.result.viewToken,
          bimComponent: JSON.parse(row.bimComponent),
        });
      });
    },
    //获取列表数据
    getProgressListData() {
      let data = {
        projectSn: this.projectSn,
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        taskName: this.queryInfo.taskName,
        status: this.queryInfo.status,
        actualFinishDate_begin: this.queryInfo.actualStartDate,
        actualFinishDate_end: this.queryInfo.actualFinishDate,
      };
      getTaskProgressPageApi(data).then((res) => {
        if (res.code == 200) {
          this.listData = res.result.records;
          this.pagInfo.total = res.result.total;
        }
      });
    },
    //刷新
    refreshBtn() {
      this.daterange = [];
      this.pagInfo.pageNo = 1;
      this.pagInfo.pageSize = 10;
      this.queryInfo = {
        status: "",
        actualStartDate: "",
        actualFinishDate: "",
        taskName: "",
      };
      this.getProgressListData();
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val;
      this.getProgressListData();
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val;
      this.getProgressListData();
    },
    changeDate() {
      if (this.daterange) {
        this.queryInfo.actualStartDate = this.daterange[0];
        this.queryInfo.actualFinishDate = this.daterange[1];
      } else {
        this.queryInfo.actualStartDate = "";
        this.queryInfo.actualFinishDate = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
}
.table_wrap {
  height: 800px;
  overflow: auto;
}
.data-show {
  width: max-content;
  max-width: 100%;
  @include flex;
  margin-top: 10px;
  .selected-box {
    flex: 1%;
    min-width: 208px;
    min-height: 32px;
    border: 1px solid #c0c4cc;
    border-radius: 4px;
    @include flex;
    flex-wrap: wrap;
    padding-left: 6px;
    margin-right: 15px;
    > div {
      @include flex;
      background-color: #f4f4f5;
      padding: 3px 5px;
      margin: 3px 6px 3px 0;
      span {
        color: #909399;
        margin-right: 3px;
      }
      .el-icon-close {
        cursor: pointer;
      }
    }
  }
}
.model-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 500px;
  border: 1px solid #ccc;
  margin-top: 10px;
}
</style>