mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/bussiness/progressShow.vue

<template>
  <div class="app-container">
    <div class="main-area">
      <div class="show-header">
        <div class="tag-list">
          <div class="tag-item">
            <!-- <div class="circle"></div> -->
            <i class="el-icon-circle-check icon"></i>
            <span>已完成</span>
          </div>
          <div class="tag-item">
            <i class="el-icon-warning icon"></i>
            <span>触发异常</span>
          </div>
          <div class="tag-item">
            <i class="el-icon-warning-outline icon"></i>
            <span>新插入</span>
          </div>
          <div class="tag-item">
            <span class="current-node">当前节点</span>
          </div>
        </div>
        <div class="search-list">
          <div class="search-tab">
            <el-radio-group v-model="processType">
              <el-radio-button :label="1">进行</el-radio-button>
              <el-radio-button :label="2">完成</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-input">
            <el-input placeholder="请输入..." v-model="queryString">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <div class="show-body">
        <TaskList
          v-for="(item, index) of tableData"
          :key="index + 1"
          :cardData="item"
        ></TaskList>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TaskList from "./components/taskList.vue";
import { processList } from "@/api/bpmprocess/run/executeProcess";
import getNodeSequence from "@/utils/bpmn/getNodeSequence";
import { xmlStr2XmlObj } from "@/utils/bpmn/xml";
export default {
  name: "ProgressShow",
  props: [],
  components: { TaskList },
  data() {
    return {
      processType: 1,
      queryString: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      tableData: [], //列表数据
    };
  },
  computed: {},
  methods: {
    // 获取列表数据
    getList() {
      processList(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableData = this.getTableData(
            res.rows.map((item) => item.resultMap)
          );
          this.total = res.total;
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
      });
    },
    // 获取表格展示数据
    getTableData(dataList) {
      let res = [];
      res = dataList.map((item) => {
        let baseObj = {
          benTaskProcessKey: item.bepTaskKey, //任务编号
          bepTaskName: item.bepTaskName, //任务名称
          benCreateTime: item.benCreateTime, //开始或结束时间  需要根据bepTaskProcessState状态 来判定
          currentNodeKey: item.benTaskNodeKey, //当前节点key
          cardList: [],
        };
        let xmlObj = xmlStr2XmlObj(item.bepTaskProcessXmlContent);
        baseObj.cardList = getNodeSequence(xmlObj);
        return baseObj;
      });
      res = this.setNodeState(res);
      return res;
    },
    // 设置节点完成情况
    setNodeState(res) {
      res.forEach((re) => {
        let nowKey = re.currentNodeKey;
        let isDone = true;
        re.cardList.forEach((item) => {
          if (item.nodeId == nowKey) {
            isDone = false;
            item.isDone = isDone;
            item.isNow = true;
          } else {
            item.isDone = isDone;
            item.isNow = false;
          }
        });
        // 当最后一个节点就是当前节点时置为完成状态
        let lastNode = re.cardList[re.cardList.length - 1];
        if (re.currentNodeKey == lastNode.nodeId) {
          lastNode.isDone = true;
          lastNode.isNow = false;
        }
      });

      return res;
    },
  },
  mounted() {
    this.getList();
  },
  activated() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 15px 15px;
  box-sizing: border-box;
  .main-area {
    box-shadow: 0 1px 15px 1px rgb(69 65 78 / 8%);
    background-color: #fff;
    .show-header {
      border-bottom: 1px solid #ebedf2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 20px 0px 20px;
      height: 50px;
      .tag-list {
        display: flex;
        align-items: center;
        .tag-item {
          display: flex;
          align-items: center;
          margin-right: 15px;
          font-size: 16px;
          .circle {
            width: 15px;
            height: 15px;
            background-color: rgb(104, 221, 104);
            border-radius: 50%;
            margin-right: 5px;
          }
          .icon {
            margin-right: 5px;
          }
          .current-node {
            display: inline-block;
            border: 2px solid #34bfa3;
            padding: 2px 5px;
            margin: 2px 40px 2px 10px;
          }
        }
      }
      .search-list {
        display: flex;
        .search-tab {
          margin-right: 20px;
        }
      }
    }
    .show-body {
      padding: 25px;
    }
  }
}
</style>