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

<template>
  <div class="process-mange-wrap">
    <!-- <el-card shadow="always" :body-style="{ padding: '20px' }"> -->
    <el-row>
      <el-col :xs="24" :md="8" :xl="8" class="col">
        <div class="statistic-wrap">
          <div class="discription">
            <span class="title">已完成</span>
            <span class="sub-title">已经完成的生产任务数</span>
          </div>
          <span class="data">{{ doneNum }}</span>
        </div>
      </el-col>
      <el-col :xs="24" :md="8" :xl="8" class="col">
        <div class="statistic-wrap">
          <div class="discription">
            <span class="title">进行中</span>
            <span class="sub-title">正在进行的生产任务数</span>
          </div>
          <span class="data">{{ doingNum }}</span>
        </div>
      </el-col>
      <!-- <el-col :xs="24" :md="8" :xl="8" class="col">
        <div class="statistic-wrap">
          <div class="discription">
            <span class="title">完成</span>
            <span class="sub-title">已经完成的管道</span>
          </div>
          <span class="data">0</span>
        </div>
      </el-col> -->
    </el-row>
    <!-- </el-card> -->
    <div class="main-area">
      <div class="show-header">
        <h3 class="header">流程列表</h3>
        <div class="search-list">
          <div class="select">
            <span class="label">产线 :</span>
            <el-select
              v-model="productLine"
              value-key=""
              placeholder="请选择产线"
              clearable
              filterable
              @change="getList"
            >
              <el-option
                v-for="(item, index) in productLineList"
                :key="index"
                :label="item.productionLineName"
                :value="item.productionLineNo"
              >
                <span class="discribe" style="float: left">{{
                  item.productionLineName
                }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.productionLineDepartment
                }}</span>
              </el-option>
            </el-select>
          </div>
          <div class="search-tab">
            <el-radio-group v-model="taskType" v-show="false">
              <el-radio-button :label="1">我的处理</el-radio-button>
              <el-radio-button :label="2">其他处理</el-radio-button>
            </el-radio-group>
            <el-radio-group
              class="btn-list-two"
              v-model="queryParams.taskProcessState"
              @change="getList"
            >
              <el-radio-button label="3">已完成</el-radio-button>
              <el-radio-button label="0">进行中</el-radio-button>
              <!-- <el-radio-button label="">所有</el-radio-button> -->
            </el-radio-group>
          </div>
          <div class="search-input">
            <el-input
              placeholder="请输入..."
              v-model="queryString"
              @keyup.enter.native="getList"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getList"
              ></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <div class="show-body">
        <!--    流程任务列表    -->
        <el-table :data="tableData" v-loading="loading" border stripe>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" width="50" align="center" />
          <el-table-column
            v-for="col in newColumn"
            :prop="col.prop"
            :key="col.prop"
            :label="col.label"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="col.prop == 'benCreateTime'">{{
                scope.row.benCreateTime.replace("T", " ")
              }}</span>
              <span v-else-if="col.prop == 'bepTaskProcessType'">{{
                getDictLabel(scope.row.bepTaskProcessType, dict.type.bpm_type)
              }}</span>
              <span v-else-if="col.prop == 'benTaskNodeState'">{{
                scope.row.benTaskNodeState == "0" ? "未执行" : "已执行"
              }}</span>
              <span v-else-if="col.prop == 'bepTaskProcessState'">{{
                getDictLabel(
                  scope.row.bepTaskProcessState,
                  dict.type.task_process_state
                )
              }}</span>
              <span v-else>{{ scope.row[col.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="excute-wrap">
                <el-button
                  type="warning"
                  plain
                  size="small"
                  class="mr10 mb5"
                  v-show="scope.row.bepTaskProcessState == '0'"
                  @click="opneExecuteNode(scope.row)"
                >
                  运行
                </el-button>
                <el-dropdown>
                  <el-button type="warning" plain size="small">
                    处理<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu
                    v-if="
                      scope.row.exceptionScriptList &&
                      scope.row.exceptionScriptList.length
                    "
                    slot="dropdown"
                  >
                    <!-- <el-dropdown-item>
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="excuteHandler(scope.row)"
                        v-hasPermi="['system:user:edit']"
                      >处理
                      </el-button>
                    </el-dropdown-item> -->
                    <el-dropdown-item>
                      <el-dropdown size="mini">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-d-arrow-right"
                          >触发异常
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            v-for="item in scope.row.exceptionScriptList"
                            :key="item.id"
                          >
                            <el-button
                              @click="exceptionTrigger(scope.row, item)"
                              size="mini"
                              type="text"
                              >{{ item.scriptName }}
                            </el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!--    分页    -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <div class="show-window">
        <!-- 运行节点弹窗 -->

        <el-dialog :title="nodeTitle" :visible.sync="open">
          <!--  <el-form label-width="100px" :model="commonData">
            <h1>这里会引入当前节点需要处理的表单</h1>
          </el-form> -->
          <!-- <k-form-build
            v-if="formType == 'dragForm'"
            class="formBuild"
            ref="addFromRef"
            :dynamicData="dynamicData"
            :defaultValue="defaultValue"
            :value="jsonData"
          /> -->

          <component
            :is="myForm"
            :formData="formData"
            :row="row"
            ref="myFormRef"
            v-if="myForm"
          ></component>

          <!-- <Sorting ref="myFormRef" :formData="formData" :row="row"></Sorting> -->
          <!-- <PhysicalInspection
            :formData="formData"
            :row="row"
          ></PhysicalInspection> -->

          <span slot="footer" class="dialog-footer">
            <el-button @click="closeExecuteNode">取消</el-button>
            <el-button type="primary" @click="executeNode">确认运行</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  processList,
  runProcessNodeExecution,
  getProcessNodeFormTemplate,
  getProcessNodeFormInfoData,
  chemicalFibreList,
} from "@/api/bpmprocess/run/executeProcess";
import { queryDropDownBoxData } from "@/api/dragform/form";
import { triggerExceptionNode } from "@/api/bpmprocess/process";

import getNodeSequence from "@/utils/bpmn/getNodeSequence";
import GY02 from "./dialogCompments/GongYi/GY02.vue";
import ZL01 from "./dialogCompments/ZhiLiang/ZL1.vue";
import { getForm } from "@/api/dragform/form";
import DialogTemplate from "@/views/dialogTemplate/components/index.vue";

// 弹窗表单组件
import GY01 from "./dialogCompments/GongYi/GY01.vue";
import GY03 from "./dialogCompments/GongYi/GY03.vue";
import CG1 from "./dialogCompments/test-component/CaiGou/CG1.vue";
import CG02 from "./dialogCompments/test-component/CaiGou/CG02.vue";
import KC01 from "./dialogCompments/test-component/KuCun/KC1.vue";
import KC02 from "./dialogCompments/test-component/KuCun/KC02.vue";
import GY06 from "./dialogCompments/GongYi/GY06.vue";
import KB01 from "./dialogCompments/KongBai/KB01.vue"; //空白提示组件
import SC01 from "./dialogCompments/ShengChan/SC01.vue";

import Loading from "./dialogCompments/Edu/Loading.vue";
import Processing from "./dialogCompments/Edu/Processing.vue";
import Assemble from "./dialogCompments/Edu/Assemble.vue";
import Detection from "./dialogCompments/Edu/Detection.vue";
import WareHousing from "./dialogCompments/Edu/WareHousing.vue";

//Mec组件
import AssignEmployees from "./dialogCompments/Mec/AssignEmployees.vue";
import Notes from "./dialogCompments/Mec/Notes.vue";
import Print from "./dialogCompments/Mec/Print.vue";
import NodeShow from "./dialogCompments/Mec/NodeShow.vue";
import RecordQuality from "./dialogCompments/Mec/RecordQuality.vue";
import ProductionProcesses from "./dialogCompments/Mec/ProductionProcesses.vue";
import PersonalDistribution from "./dialogCompments/Mec/PersonalDistribution.vue";
import RecordSplitData from "./dialogCompments/Mec/RecordSplitData.vue";
import EditFinishTime from "./dialogCompments/Mec/EditFinishTime.vue";
import EditQualityCard from "./dialogCompments/Mec/EditQualityCard.vue";
import FinishTask from "./dialogCompments/Mec/FinishTask.vue";
import QualityControlCardSubCardProcessing from "./dialogCompments/Mec/QualityControlCardSubCardProcessing.vue";
import ScrapDisposition from "./dialogCompments/Mec/ScrapDisposition.vue";

import QRCode from "./dialogCompments/Mec/QRCode.vue";
import Inspect from "./dialogCompments/GongYi/Inspect.vue";

// 物理指标
import PhysicalInspection from "./dialogCompments/GongYi/PhysicalInspection.vue";
// 外观指标
import AppearanceInspection from "./dialogCompments/GongYi/AppearanceInspection.vue";
//
import Sorting from "./dialogCompments/GongYi/Sorting.vue";
import UpSilk from "./dialogCompments/GongYi/UpSilk.vue";
export default {
  name: "processMange",
  props: [],
  components: {
    GY01,
    DialogTemplate,
    CG1,
    CG02,
    KC01,
    GY06,
    GY03,
    KC02,
    GY02,
    KB01,
    SC01,
    ZL01,
    NodeShow,
    AssignEmployees,
    Notes,
    Print,
    RecordQuality,
    ProductionProcesses,
    PersonalDistribution,
    RecordSplitData,
    EditFinishTime,
    EditQualityCard,
    FinishTask,
    QualityControlCardSubCardProcessing,
    ScrapDisposition,
    QRCode,
    Inspect,
    Loading,
    Processing,
    Assemble,
    Detection,
    WareHousing,
    PhysicalInspection,
    AppearanceInspection,
    Sorting, //分拣
    UpSilk, //上丝
  },
  dicts: ["bpm_type", "task_process_state"],
  data() {
    return {
      productLine: "", //产线
      productLineList: [], //产线数据
      doneNum: 0, //已完成数
      doingNum: 0, //进行中数
      row: {}, //当前操作行数据
      myForm: "", //自定义表单组件名
      // 节点弹窗title
      nodeTitle: "节点弹窗",
      open: false,
      // 节点弹窗对应的formData
      commonData: {},
      taskType: 1,
      queryString: "",
      taskStatus: "",
      tableData: [], //表格数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskProcessState: "0",
        taskProcessType: 0,
      },
      total: 0,
      columns: [
        {
          prop: "bepTaskKey",
          label: "任务编号",
        },
        {
          prop: "bepTaskName",
          label: "任务名称",
        },
        // {
        //   prop: "bepTaskProcessType",
        //   label: "任务流程类型",
        // },
        {
          prop: "bepTaskProcessState",
          label: "任务流程状态",
        },
        {
          prop: "productionLineName",
          label: "产线",
        },
        {
          prop: "benTaskNodeName",
          label: "节点名称",
        },
        {
          prop: "benTaskNodeType",
          label: "节点类型",
        },
        {
          prop: "benTaskNodeState",
          label: "节点状态",
        },
        {
          prop: "benCreateBy",
          label: "创建人",
        },
        {
          prop: "benCreateTime",
          label: "创建时间",
        },
      ],
      formType: "", //表单类型 dragForm:拖拽表单 composeForm:工艺组合表单   designForm:定制表单
      // k-form-build 数据
      dynamicData: {},
      tableName: "",
      defaultValue: {},
      jsonData: {},
      // 拖拽数据
      taskInfo: {},
      groupKey: "",
      subCount: {},
      tableCount: {},
      subTableName: "",

      // 弹窗表单渲染数据
      formData: {},
      backExceptionTaskList: ["GY06"], //特殊回退表单组件列表
      loading: true,
    };
  },
  computed: {
    newColumn() {
      if (this.queryParams.taskProcessState == "3") {
        return [
          {
            prop: "bepTaskKey",
            label: "任务编号",
          },
          {
            prop: "bepTaskName",
            label: "任务名称",
          },
          // {
          //   prop: "bepTaskProcessType",
          //   label: "任务流程类型",
          // },
          {
            prop: "productionLineName",
            label: "产线",
          },
          {
            prop: "bepTaskProcessState",
            label: "任务流程状态",
          },
          {
            prop: "benCreateBy",
            label: "创建人",
          },
          {
            prop: "benCreateTime",
            label: "创建时间",
          },
        ];
      } else {
        return this.columns;
      }
    },
  },
  mounted() {
    this.getOptionData(); //获取下拉框数据
    this.getList();
    this.getDoneNumber();
    this.getDoingNumber();
  },
  methods: {
    // 获取下拉框数据
    async getOptionData() {
      let payLoad = [
        {
          basicMap: {
            tableName: "production_line",
          },
        },
      ];
      let res = await queryDropDownBoxData(payLoad);
      if (res.code == 200) {
        this.productLineList = res.data.resultMap.production_line;
      } else {
        this.$message.error("网络异常,请稍后再试");
      }
    },
    // 获取列表数据
    getList() {
      this.loading = true;
      chemicalFibreList({
        ...this.queryParams,
        taskName: this.queryString,
        taskProductionLineNo: this.productLine,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows.map((item) => item.resultMap);
          this.tableData.forEach((item) => {
            item.productionLineName =
              this.productLineList.find(
                (i) => i.id == item.bepTaskProductionLineNo
              )?.productionLineName || "无产线";
          });
          this.total = res.total;
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
        this.loading = false;
      });
    },
    getDoneNumber() {
      let params = {
        pageNum: 1,
        pageSize: 10,
        taskProcessState: "3",
        taskProcessType: 0,
        taskProductionLineNo: this.productLine,
      };
      chemicalFibreList(params).then((res) => {
        if (res.code == 200) {
          this.doneNum = res.total;
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
      });
    },
    getDoingNumber() {
      let params = {
        pageNum: 1,
        pageSize: 10,
        taskProcessState: "0",
        taskProcessType: 0,
        taskProductionLineNo: this.productLine,
      };
      chemicalFibreList(params).then((res) => {
        if (res.code == 200) {
          this.doingNum = res.total;
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
      });
    },
    // 获取表单数据
    async getFormData() {
      let formData = {};
      // switch (this.formType) {
      //   case "dragForm":
      //     try {
      //       formData = await this.$refs.addFromRef.getData();
      //     } catch (error) {
      //       console.log(error);
      //       this.$message.error("表单校验异常,请稍后重试");
      //       return {};
      //     }
      //     break;
      //   case "designForm":
      //     let temp = await this.$refs.myFormRef.getFormData();
      //     if (!temp.flag) {
      //       this.$message.error(temp.msg);
      //       return {};
      //     } else {
      //       formData = temp.data;
      //     }
      //     break;
      //   default:
      //     break;
      // }
      let temp = await this.$refs.myFormRef?.getFormData();
      console.log("temp", temp);
      if (!temp?.flag) {
        if (!temp) {
          //没有表单
          // formData.flag = true;
        } else {
          //表单数据不合法
          this.$message.error(temp.msg);
          return false;
        }
      } else {
        formData = temp.data;
      }
      return formData;
    },
    // 重置弹窗数据
    resetDialogForm() {
      this.formType = ""; //表单类型 dragForm:拖拽表单 composeForm:工艺组合表单   designForm:定制表单
      // k-form-build 数据
      this.dynamicData = {};
      this.defaultValue = {};
      this.jsonData = {};
    },
    // 打开运行节点弹窗
    async opneExecuteNode(row) {
      this.resetDialogForm();
      console.log(row);
      this.nodeTitle = row.benTaskNodeName;
      // let preFix = row.benTaskNodeName.split("-")[0];
      let preFix = row.benTaskNodeFormKey;
      let {
        benTaskNodeFormKey,
        benTaskNodeFormType,
        bepTaskPlanKey,
        bepTaskKey,
        bepTaskNodeKey,
        benTaskProcessKey,
        benmTaskAutomaticScriptTriggerType,
        bepTaskNodeNextKey,
      } = row;
      // 新的运行逻辑
      let payLoad = {
        taskNodeKey: bepTaskNodeNextKey,
        taskProcessKey: benTaskProcessKey,
        taskAutomaticScriptTriggerType: benmTaskAutomaticScriptTriggerType,
        taskPlanKey: bepTaskPlanKey,
      };

      // let formData = await getProcessNodeFormTemplate(payLoad);
      // console.log(formData);
      // if (benTaskNodeFormKey) {
      //   if (benTaskNodeFormType == "dragForm") {
      //     let templateInfo = formData.data[0]?.template;
      //     //拖拽表单
      //     this.formType = "dragForm";
      //     this.jsonData = JSON.parse(templateInfo.dfVueTemplate);
      //     this.tableName = templateInfo.dfTableName;
      //     if (Object.keys(JSON.parse(templateInfo.dfFormSql)).length) {
      //       this.dynamicData = JSON.parse(templateInfo.dfFormSql);
      //     }
      //     // await this.getDragFormInfo(benTaskNodeFormKey);
      //   } else if (benTaskNodeFormType == "composeForm") {
      //     //工艺组合表单
      //     this.formType = "composeForm";
      //     this.groupKey = benTaskNodeFormKey;
      //     let queryPayload = {
      //       row,
      //       groupKey: benTaskNodeFormKey,
      //     };
      //     this.$nextTick(() => {
      //       this.$refs.dialogRef.getLists(queryPayload);
      //     });
      //   }
      // } else if (preFix) {
      //   //定制表单
      //   this.formType = "designForm";
      //   this.myForm = preFix;
      // }
      //定制表单
      this.formType = "designForm";
      this.myForm = preFix;
      let res = await getProcessNodeFormInfoData(payLoad);
      if (res.code == 200) {
        this.formData = res.data;
      } else {
        this.$message.error("网络异常,请稍后再试");
      }

      this.row = row; //记录当前行数据
      // if (!this.formType) return; //没有表单,直接掉运行逻辑
      this.open = true; // 打开弹窗
      this.$nextTick(() => {
        // this.$refs.myFormRef?.resetForm();
      });
      // 根据当前节点绑定的表单信息查询对应的表单进行展示
    },
    // 运行节点按钮 确认运行回调
    async executeNode() {
      let { benTaskNodeKey, bepTaskProcessXmlContent, implementationName } =
        this.row;
      let { nodeId, nextNodeId } = this.getNextNodeKey(
        benTaskNodeKey,
        bepTaskProcessXmlContent
      );
      // 只有完成状态的可以运行
      if (this.formType == "composeForm") {
        let res = this.$refs.dialogRef.getComposeFormData();
        if (!res.isSuccess) {
          this.$message.warning("非完成状态节点不能运行!");
          return;
        }
      }
      // return;
      let formData = await this.getFormData();
      if (!formData) return;
      formData.taskPlanKey = this.row.bepTaskPlanKey;
      let payLoad = {
        taskProcessKey: this.row.bepTaskKey, //当前任务流程编码
        taskNodeKey: nodeId, //当前执行节点唯一编码
        nextNodeKey: nextNodeId, //下一节点编码
        implementationName: this.row.benmTaskAutomaticScriptTriggerType, //当前节点绑定的脚本名
        // taskProcessXmlContent: this.row.bepTaskProcessXmlContent, //当前流程xml
        tableName: this.tableName,
        formDataMapString: JSON.stringify(formData), //自定义表单组件收集的表单数据
        taskNodeType: this.backExceptionTaskList.includes(
          this.row.benTaskNodeFormKey
        )
          ? "backExceptionTask"
          : this.row.benTaskNodeType,
      };
      let fileXML = new File(
        [this.row.bepTaskProcessXmlContent],
        this.row.bepTaskKey + ".bpmn",
        {
          type: "text/bpmn",
        }
      );
      const subformData = new FormData();
      subformData.append("fileXML", fileXML);
      for (let key in payLoad) {
        subformData.append(key, payLoad[key] == null ? "" : payLoad[key]);
      }
      runProcessNodeExecution(subformData).then((res) => {
        if (res.code == 200) {
          this.$message.success("运行成功!");
          this.getList();
          this.getDoneNumber();
          this.getDoingNumber();
          this.open = false;
        }
      });
    },
    // 获取拖拽表单数据
    async getDragFormInfo(fid) {
      try {
        let res = await getForm(fid);
        console.log(res);
        if (res.code == 200) {
          this.jsonData = JSON.parse(res.data.dfVueTemplate);
          this.tableName = res.data.dfTableName;
          if (res.data.dfFormSql) {
            this.dynamicData = JSON.parse(res.data.dfFormSql);
            console.log(this.dynamicData);
          }
        } else {
          console.log(res);
          throw new Error(res);
        }
      } catch (error) {
        console.log(error);
        this.$message.error("网络异常,请稍后再试");
      }
    },
    // 关闭运行节点弹窗
    closeExecuteNode(row) {
      this.open = false;
    },
    // 获取下一个节点的nodekey
    getNextNodeKey(nodeKey, xmlStr) {
      let xmlObj = this.xmlStr2XmlObj(xmlStr);
      let nodeSequence = getNodeSequence(xmlObj);
      return nodeSequence.find((item) => item.nodeId == nodeKey) || {};
    },
    // xml字符串转xml对象
    xmlStr2XmlObj(xmlStr) {
      var xmlObj = {};
      if (document.all) {
        var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
        xmlDom.loadXML(xmlStr);
        xmlObj = xmlDom;
      } else {
        xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
      }
      return xmlObj;
    },
    // 触发异常回调
    exceptionTrigger(row, scriptData) {
      // console.log(taskNodeType);
      let _this = this;
      this.$modal
        .confirm("是否确认触发<" + scriptData.scriptName + ">异常？")
        .then(function (val) {
          console.log(val);
          // 发送触发异常节点的请求
          let payLoad = {
            taskProcessKey: row.bepTaskKey,
            taskNodeKey: row.benTaskNodeKey,
            sysBpmNodeScriptVO: scriptData,
            taskNodeType: row.benTaskNodeType,
          };
          // 异常节点抛异常  需要下一个节点key
          if (row.benTaskNodeType == "exceptionTask") {
            let { nodeId, nextNodeId } = _this.getNextNodeKey(
              row.benTaskNodeKey,
              row.bepTaskProcessXmlContent
            );

            payLoad.taskNextNodeKey = nextNodeId;
          }
          triggerExceptionNode(payLoad).then((res) => {
            console.log(res);
            if (res.code == 200) {
              _this.$message.success("触发成功");
              _this.open = false;
              _this.getList();
            } else {
              _this.$message.error("触发失败请稍后再试");
            }
          });
        })
        .catch((err) => {
          console.log(err);
          _this.open = false;
          _this.$message.info("取消成功");
        });
    },
    // 获取字典对应label
    getDictLabel(value, dictLsit = []) {
      return dictLsit.find((item) => {
        return item.value == value;
      })?.label;
    },
  },
};
</script>

<style scoped lang="scss">
.process-mange-wrap {
  background-color: #f2f3f8;
  padding: 20px;

  .col {
    background-color: #fff;
    border-right: 1px solid #ebedf2;
    /* margin-right: 3px; */
    .statistic-wrap {
      /* // height: 70px; */
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 10px 17px;
      justify-content: space-between;

      .discription {
        display: flex;
        flex-direction: column;

        .title {
          line-height: 20px;
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 5px;
        }

        .sub-title {
          font-size: 14px;
        }
      }

      .data {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }

  .main-area {
    margin-top: 30px;
    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: 70px;

      /* .header {
      } */

      .search-list {
        display: flex;
        .select {
          .label {
            margin-right: 10px;
          }
        }
        .search-tab {
          margin-right: 20px;

          .btn-list-two {
            margin-left: 10px;
          }
        }
      }
    }

    .show-body {
      padding: 25px;
    }
  }
}
</style>