TcAssetvue3/src/views/auditPages/taskManagement/info.vue

<template>
  <div class="L-task-info">
    <div class="info-left" id="L-size-main">
      <div class="content-info" id="L-header">
        <div class="info-title">任务详情</div>
        <el-button
          type="primary"
          @click="sendBack"
          class="fanhuipiaofu"
          size="small"
          >返回</el-button
        >
        <div class="teshu-top-info">
          <div class="top-info">
            <el-row class="top-row">
              <!-- <el-col :span="8">
                任务编号：<span>{{ titleInfoObj.id }}</span>
              </el-col> -->
              <el-col :span="8">
                任务名称：<span>{{ titleInfoObj.taskName }}</span>
              </el-col>
              <el-col :span="8">
                任务状态：<span>{{ taskstatus(titleInfoObj.taskStatus) }}</span>
              </el-col>
              <el-col :span="8">
                任务期限：<span>{{ titleInfoObj.taskDeadline }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                任务下发时间：<span>{{ titleInfoObj.taskTime }}</span>
              </el-col>
              <el-col :span="16">
                核查资产类型：<span>{{ listTow.join(",") }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="info-cut-off-rule" id="L-tab">
        <div
          class="left-tab"
          :class="index === 1 ? 'active-tab' : ''"
          @click="activeTab(1)"
        >
          资产核查信息
        </div>
        <div :class="index === 2 ? 'active-tab' : ''" @click="activeTab(2)">
          单位完成情况
        </div>
      </div>
      <div class="info-bottom-box">
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          class="demo-form-inline"
          v-if="index === 1"
        >
          <el-row>
            <el-col :span="7">
              <el-form-item label="核查单位:">
                <el-input
                  v-model="formInline.dwmc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="9">
              <el-form-item label="系统类型:">
                <el-select v-model="formInline.xtlx" placeholder="请选择">
                  <el-option v-for="dict in dict.type.zc_xtlx" :key="dict.label" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="7">
              <el-form-item label="系统名称:">
                <el-input
                  v-model="formInline.xtmc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="审核状态:">
                <el-select v-model="formInline.status" placeholder="请选择">
                  <el-option label="待核查" value="0"></el-option>
                  <el-option label="待审核" value="1"></el-option>
                  <el-option label="审核通过" value="3"></el-option>
                  <el-option label="审核不通过" value="4"></el-option>
                  <el-option label="已关停" value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button size="small" type="primary" @click="handleQuery()"
                  >查询</el-button
                >
                <el-button size="small" @click="resetQuery()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form
          :inline="true"
          :model="formInlineTwo"
          size="small"
          class="demo-form-inline"
          v-if="index === 2"
        >
          <el-row>
            <el-col :span="7">
              <el-form-item label="单位名称：">
                <el-input
                  v-model="formInlineTwo.dwmc"
                  placeholder="请输入"
                ></el-input>
                <!-- <el-select v-model="formInline.unit" placeholder="请选择"> -->
                <!-- <el-option
                        v-for="dict in dict.type.bms_approval_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value">
                      </el-option> -->
                <!-- </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="完成状态：">
                <el-select
                  v-model="formInlineTwo.taskStatus"
                  placeholder="请选择"
                >
                  <el-option label="进行中" value="1"></el-option>
                  <el-option label="正常完成" value="2"></el-option>
                  <el-option label="超期完成" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button size="small" type="primary" @click="handleQuery()"
                  >查询</el-button
                >
                <el-button size="small" @click="resetQuery()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <section v-if="index === 1">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="item in chanckListTow"
              :key="item.lable"
              :label="item.conent"
              :name="item.lable"
              :xtmcName="item.xtmcName"
            >
            </el-tab-pane>
          </el-tabs>
          <el-table
            v-loading="loading"
            :data="tableData"
            :height="tabHeader"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <!-- <el-table-column label="资产编号" key="id" width="200px" prop="id" align="center" /> -->
            <el-table-column :label="xtmcName" prop="xtmc" align="center" />
            <!-- <el-table-column label="系统类型" key="xtlx" prop="xtlx" align="center">
              <template slot-scope="scope" >
                <div v-if='scope.row.xtlx'>
                  <dict-tag :options="dict.type.zc_xtlx" :value="scope.row.xtlx" />

                </div>
              </template>
</el-table-column> -->
            <el-table-column label="核查单位" prop="zcdwmc" align="center" />
            <el-table-column
              label="单位核查时间"
              prop="updateTime"
              align="center"
            />
            <el-table-column
              label="审核状态"
              key="status"
              width="120px"
              prop="status"
              class-name="table-status"
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.status === 0" style="color: #e6a230"
                  >待核查</span
                >
                <span v-if="scope.row.status === 1" style="color: #e6a23c"
                  >待审核</span
                >
                <span v-if="scope.row.status === 3" style="color: #67c23a"
                  >审核通过</span
                >
                <span v-if="scope.row.status === 4" style="color: #f56c6c"
                  >审核不通过</span
                >
                <span v-if="scope.row.status === 5" style="color: #f56c6c"
                  >已关停</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              prop="userId"
              class-name="table-operation"
              align="center"
            >
              <template #default="scope">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div
                    style="display: flex; align-items: center; cursor: pointer"
                    @click="goInfo(1, scope.row)"
                    v-if="
                      scope.row.status !== 1 ||
                      route.query.pageType === 'look' ||
                      route.meta.pageType === 'look'
                    "
                  >
                    <el-icon><View /></el-icon>
                    <span class="look-info" style="color: #1485ef">查看</span>
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                    @click="goInfo(2, scope.row)"
                    v-if="
                      route.query.pageType === 'info' ||
                      route.meta.pageType === 'info'
                    "
                    v-show="scope.row.status === 1"
                  >
                    <el-icon><Edit /></el-icon>
                    <span class="look-info" style="color: #1485ef">审核</span>
                  </div>
                  <!-- scope.row.status == 4  -->
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                    @click="goInfo(3, scope.row)"
                    v-show="scope.row.btgyy"
                  >
                    <el-icon><View /></el-icon>
                    <span class="look-info" style="color: #1485ef"
                      >查看原因</span
                    >
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      margin-left: 5px;
                    "
                    @click="looklishi(scope.row)"
                    v-if="scope.row.status !== 0 && scope.row.status !== 5"
                  >
                    <el-icon><View /></el-icon>
                    <span class="look-info" style="color: #1485ef"
                      >提交记录</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </section>
        <section v-if="index === 2" class="shuangchongbox">
          <div
            class="shuangchongboxleftbox"
            :class="isshow ? '' : 'shuangchongboxleftboxShow'"
          >
            <div style="margin-bottom: 10px">
              <el-button size="small" type="primary" @click="daochu()"
                >导出</el-button
              >
            </div>
            <el-table
              v-loading="loading"
              :data="tableDataTwo"
              :height="tabHeader"
              :max-height="tabHeader"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                width="60"
                label="序号"
                align="center"
              />
              <el-table-column
                label="单位名称"
                key="dwmc"
                width="150px"
                prop="dwmc"
                align="center"
              />
              <el-table-column
                label="完成状态"
                key="taskStatus"
                prop="taskStatus"
                class-name="table-status"
                align="center"
              >
                <template #default="scope">
                  <span v-if="scope.row.taskStatus === 0" style="color: #f56c6c"
                    >已关闭</span
                  >
                  <span v-if="scope.row.taskStatus === 1" style="color: #e6a23c"
                    >进行中</span
                  >
                  <span v-if="scope.row.taskStatus === 2" style="color: #67c23a"
                    >正常完成</span
                  >
                  <span v-if="scope.row.taskStatus === 3" style="color: #67c23a"
                    >超期完成</span
                  >
                  <span v-if="scope.row.taskStatus === 4" style="color: #f56c6c"
                    >审核不通过</span
                  >
                  <span v-if="scope.row.taskStatus === 5" style="color: #f56c6c"
                    >审核驳回</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="核查资产数量"
                width="120px"
                prop="total"
                align="center"
              />
              <el-table-column
                label="待核查数量"
                width="120px"
                prop="notChecked"
                align="center"
              />
              <el-table-column
                label="待审批数量"
                width="120px"
                prop="dsp"
                align="center"
              />
              <el-table-column
                label="完成数量"
                key="checked"
                prop="checked"
                align="center"
              />
              <el-table-column
                label="审核退回次数"
                key="wwcsl"
                width="180px"
                prop="shthcs"
                align="center"
              />
              <el-table-column
                label="完成比例"
                key="checkedRatio"
                prop="checkedRatio"
                align="center"
              >
                <template #default="scope">
                  <span style="color: #192a92"
                    >{{ scope.row.checkedRatio }}%</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="shouqiwenzi" @click="shouqiisis">
            {{ isshow ? "收起" : "展开" }}>>
          </div>
          <div
            v-show="isshow"
            class="myEcharts"
            ref="myEchartsRef"
            :style="{ height: tabHeader + 'px' }"
          ></div>
        </section>
        <my-pagination
          id="L-pagination"
          :total="total"
          :page="pagination.current"
          :limit="pagination.size"
          @pagination="getPagination"
          v-model:current-page="pagination.current"
        />
      </div>
    </div>
    <div
      class="info-right"
      v-if="route.query.pageType === 'look' || route.meta.pageType === 'look'"
    >
      <div class="info-title">任务流程节点</div>
      <div class="timeline">
        <div
          class="timeline-items"
          v-for="(item, index) in timeLineData"
          :key="index"
        >
          <div class="left-box">
            <img class="main-img" :src="returnidimg(item.assetName)" alt="" />
            <!-- <img class="main-img" v-if="item.status == 2" src="" alt="">
            <img class="main-img" v-if="item.status == 3" src="" alt="">
            <img class="main-img" v-if="item.status == 4" src="" alt=""> -->
            <img
              class="icon-jt"
              v-if="index + 1 !== timeLineData.length"
              src="@/assets/images/icon-jt@2x.png"
              alt=""
            />
          </div>
          <div class="right-box">
            <span class="span-title">{{ item.assetName }}:</span>
            <span class="span-time">{{ item.xfTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <my-dialog
      title="查看原因"
      ref="liebiaoDialog"
      @close="importClose"
      class="taskDialogBox"
      width="40%"
    >
      <el-descriptions>
        <el-descriptions-item label="不通过原因">{{
          chakanyuanyin
        }}</el-descriptions-item>
      </el-descriptions>
    </my-dialog>

    <my-dialog
      title="资产提交记录"
      ref="zichantijiaojil"
      @close="importClose"
      class="taskDialogBox"
      width="40%"
    >
      <el-table
        v-loading="loading"
        :data="tableDatajilu"
        :height="tabHeader"
        :row-class-name="tableRowClassName"
      >
        <el-table-column :label="xtmcName" prop="xtmc" align="center" />
        <el-table-column label="提交时间" prop="updateTime" align="center" />
        <el-table-column
          label="提交状态"
          width="120px"
          prop="status"
          class-name="table-status"
          align="center"
        >
          <template #default="scope">
            <span
              v-if="scope.row.status === 1 || scope.row.status === 3"
              style="color: #e6a23c"
              >核查提交</span
            >
            <span v-if="scope.row.status === 4" style="color: #f56c6c"
              >审核驳回后提交</span
            >
            <span v-if="scope.row.status === 5" style="color: #f56c6c"
              >资产关停</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="userId"
          class-name="table-operation"
          align="center"
        >
          <template #default="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="display: flex; align-items: center; cursor: pointer"
                @click="tjiaojilchakan(scope.row)"
              >
                <el-icon><View /></el-icon>
                <span class="look-info" style="color: #1485ef">查看</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </my-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import myPagination from "@/views/components/Pagination/index.vue";
import {
  getassetTaskid,
  geassetTaskcHc,
  assetTaskdwHc,
  assetLcpage,
  assetTaskdwHcBl,
  assetTaskzcTj,
} from "@/api/renwuApi/index.js";
import myDialog from "@/views/components/myDialog/index.vue";
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from "element-plus";
import { useDict } from "@/utils/dict";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

// 字典数据
const { zc_xtlx } = useDict("zc_xtlx");

const index = ref(1);
const formInline = reactive({});
const formInlineTwo = reactive({
  dwmc: "",
  taskStatus: "",
});

const total = ref(0);
const pagination = reactive({
  current: 1,
  size: 10,
});

const tableData = ref([]);
const tableDataTwo = ref([]);
const tableDatajilu = ref([]);
const loading = ref(false);
const tabHeader = ref();
const timeLineData = ref([]);
const titleInfoObj = ref({});
const chakanyuanyin = ref("");
const activeName = ref("0");
const xtmcName = ref("系统名称");
const tree = ref(null);
const liebiaoDialog = ref(null);
const zichantijiaojil = ref(null);
const myEchartsRef = ref(null);

const chanckList = [
  {
    lable: "0",
    conent: "web资产",
    xtmcName: "系统名称",
  },
  {
    lable: "1",
    conent: "小程序资产",
    xtmcName: "小程序名称",
  },
  {
    lable: "2",
    conent: "公众号资产",
    xtmcName: "公众号名称",
  },
  {
    lable: "3",
    conent: "电子邮件资产",
    xtmcName: "电子邮箱后缀",
  },
  {
    lable: "4",
    conent: "移动应用程序资产",
    xtmcName: "移动应用程序名称",
  },
];

const chanckListTow = ref([]);
const listTow = ref([]);
const isshow = ref(true);
const echartsdata = ref([
  { value: 0, name: "进行中", taskStatus: "1" },
  { value: 0, name: "正常完成", taskStatus: "2" },
  { value: 0, name: "超期完成", taskStatus: "3" },
]);

const lookassetId = ref("");
const pageTypetow = ref("");
const taskisid = ref("");
let myChart = null;

// 方法定义
const tjiaojilchakan = (row) => {
  router.push({
    name: "taskAuditInfolishichakan",
    query: {
      pageType: "look",
      taskId: taskisid.value,
      assetId: row.id,
      lookassetId: lookassetId.value,
      type: activeName.value,
      pageTypetow: pageTypetow.value,
      istijiaoshow: true,
    },
  });
};

const looklishi = (row) => {
  lookassetId.value = row.id;
  const obj = {
    assetId: row.id - 0,
    taskId: row.taskId - 0,
    type: activeName.value - 0,
  };
  assetTaskzcTj(obj).then((res) => {
    tableDatajilu.value = res.data;
    if (tableDatajilu.value.length !== 0) {
      tableDatajilu.value.forEach((res) => {
        res.status = 4;
      });
      tableDatajilu.value[0].status = 1;
    }
    zichantijiaojil.value.open();
  });
};

const sendBack = () => {
  if (localStorage.getItem("ismypagination")) {
    let formInline = JSON.parse(localStorage.getItem("ismypagination"));
    formInline.isfanhui = true;
    localStorage.setItem("ismypagination", JSON.stringify(formInline));
  }
  router.go(-1);
};

const shouqiisis = () => {
  isshow.value = !isshow.value;
};

const daochu = () => {
  formInlineTwo.taskId = route.query.id;
  proxy.download(
    "/unit/assetTask/export",
    {
      ...formInlineTwo,
    },
    `单位完成情况${new Date().getTime()}.xlsx`
  );
};

const handleClick = (tab) => {
  activeName.value = tab.props.name;
  xtmcName.value = tab.props.xtmcName;
  localStorage.setItem("activeName", activeName.value);
  handleQuery();
};

const returnidimg = (iswenzi) => {
  const listsna = [
    {
      name: "下发",
      imgdata: require("@/assets/images/rwxf.png"),
    },
    {
      name: "提交",
      imgdata: require("@/assets/images/wctj.png"),
    },
    {
      name: "不通过",
      imgdata: require("@/assets/images/shbh.png"),
    },
    {
      name: "审核通过",
      imgdata: require("@/assets/images/shtg.png"),
    },
    {
      name: "驳回",
      imgdata: require("@/assets/images/shbh.png"),
    },
  ];
  const item = listsna.find((item) => iswenzi.includes(item.name));
  return item ? item.imgdata : require("@/assets/images/wctj.png");
};

const assetLcpageList = () => {
  const obj = {
    taskId: route.query.id || route.meta.id,
  };
  assetLcpage(obj).then((res) => {
    timeLineData.value = res.data;
  });
};

const importClose = () => {};

const goInfo = (type, row) => {
  if (type === 1) {
    router.push({
      name: "taskAuditInfo",
      query: {
        pageType: "look",
        taskId: row.taskId,
        assetId: row.id,
        type: activeName.value,
      },
    });
  } else if (type === 2) {
    router.push({
      name: "taskAuditInfo",
      query: {
        pageType: "change",
        taskId: row.taskId,
        assetId: row.id,
        type: activeName.value,
        zcdwmc: row.zcdwmc,
        taskInfo: "taskInfo",
      },
    });
  } else if (type === 3) {
    chakanyuanyin.value = row.btgyy;
    liebiaoDialog.value.open();
  }
};

const taskstatus = (id) => {
  if (id) {
    const obj = {
      0: "已关闭",
      1: "进行中",
      2: "正常完成",
      3: "超期完成",
      4: "正常完成",
      5: "审核驳回",
    };
    return obj[id];
  }
  return "-";
};

const titleInfoObjtype = (type = "0,1") => {
  const list = type.split(",");
  listTow.value = [];
  chanckListTow.value = [];
  chanckList.forEach((res) => {
    list.forEach((element) => {
      if (element === res.lable) {
        listTow.value.push(res.conent);
        chanckListTow.value.push(res);
      }
    });
  });
  activeName.value = chanckListTow.value[0].lable;

  if (localStorage.getItem("activeName")) {
    activeName.value = localStorage.getItem("activeName");
    localStorage.setItem("activeName", activeName.value);
  }

  const listname = chanckListTow.value.find(
    (item) => item.lable === activeName.value
  );
  if (listname) {
    xtmcName.value = listname.xtmcName;
  }

  if (route.query.istijiaoshow) {
    looklishi({
      taskId: route.query.id,
      id: route.query.lookassetId,
    });

    const query = { ...route.query };
    if (query.istijiaoshow) {
      delete query.istijiaoshow;
      router.replace({ query });
    }
  }
  handleQuery();
};

const titleInfo = () => {
  getassetTaskid(route.query.id || route.meta.id).then((res) => {
    if (res.code === 200) {
      titleInfoObj.value = res.data;
      taskisid.value = res.data.id;
      titleInfoObjtype(titleInfoObj.value.type);
    }
  });
};

const resetQuery = () => {
  activeName.value = chanckListTow.value[0].lable;
  xtmcName.value = "系统名称";

  pagination.current = 1;
  pagination.size = 10;
  pagination.type = activeName.value;

  if (index.value === 1) {
    Object.assign(formInline, {
      type: activeName.value,
    });
    localStorage.removeItem("ismypaginationTow");
    getList();
  } else if (index.value === 2) {
    formInlineTwo.dwmc = "";
    formInlineTwo.taskStatus = "";
    getListTwo();
  }
};

const handleQuery = () => {
  pagination.current = 1;
  pagination.size = 10;
  pagination.type = activeName.value;

  if (index.value === 1) {
    Object.assign(pagination, formInline);
    formInline.isfanhuiTow = false;
    localStorage.setItem("ismypaginationTow", JSON.stringify(formInline));
    getList();
  } else if (index.value === 2) {
    Object.assign(pagination, formInlineTwo);
    getListTwo();
  }
};

const getPagination = (pages) => {
  pagination.current = pages.page;
  pagination.size = pages.limit;
  if (index.value === 1) {
    getList();
  } else if (index.value === 2) {
    getListTwo();
  }
};

const activeTab = (id) => {
  pagination.current = 1;
  pagination.size = 10;
  total.value = 0;
  index.value = id;

  resetQuery();
  if (id === 2) {
    setTimeout(() => {
      myEchartsis();
    }, 100);
  }
};

const getList = () => {
  loading.value = true;
  pagination.taskId = route.query.id || route.meta.id;
  pagination.type = activeName.value;

  geassetTaskcHc(pagination).then((res) => {
    tableData.value = res.data.records;
    total.value = res.data.total;
    loading.value = false;
  });
};

const getListTwo = () => {
  loading.value = true;
  pagination.taskId = route.query.id || route.meta.id;
  assetTaskdwHc(pagination).then((res) => {
    tableDataTwo.value = res.data.records;
    total.value = res.data.total;
    loading.value = false;
  });
};

const getEchartsdata = () => {
  assetTaskdwHcBl({ taskId: route.query.id }).then((res) => {
    if (res.code === 200) {
      const datalsit = res.data;
      echartsdata.value.forEach((res) => {
        datalsit.forEach((datares) => {
          if (res.taskStatus === datares.taskStatus) {
            res.value = datares.count;
          }
        });
      });
    }
  });
};

const myEchartsis = () => {
  if (myChart) {
    myChart.dispose();
  }

  myChart = echarts.init(myEchartsRef.value);
  const option = {
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}：{c}({d}%)",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: echartsdata.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  myChart.setOption(option);
  myChart.on("click", (params) => {
    formInlineTwo.taskStatus = params.data.taskStatus;
    handleQuery();
  });
};

const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 !== 0 ? "evenNumber-row" : "";
};

const cancalDebounce = () => {
  const element = document.getElementById("L-size-main");
  const header = document.getElementById("L-header");
  const tab = document.getElementById("L-tab");
  const pagination = document.getElementById("L-pagination");
  const elementHeight = element.offsetHeight;
  const headerHeight = header.offsetHeight;
  const paginationtHeight = pagination.offsetHeight;
  const tabHeight = tab.offsetHeight;
  tabHeader.value =
    elementHeight - headerHeight - paginationtHeight - tabHeight - 160;
};

onMounted(() => {
  if (Object.keys(route.params).length !== 0) {
    Object.assign(formInline, route.params);
  } else {
    formInline.current = 1;
    formInline.size = 20;
  }
  getList();
  getDeptTree();
  cancalDebounce();
  window.addEventListener("resize", cancalDebounce);
});

onUnmounted(() => {
  window.removeEventListener("resize", cancalDebounce);
  if (myChart) {
    myChart.dispose();
  }
});

// 路由守卫
const beforeRouteEnter = (to) => {
  if (to.query.pageType === "info") {
    to.meta.title = "任务审核";
    to.meta.pageType = to.query.pageType;
    to.meta.id = to.query.id;
  } else if (to.query.pageType === "look") {
    to.meta.title = "任务详情";
    to.meta.pageType = to.query.pageType;
    to.meta.id = to.query.id;
  }
};
</script>
<style lang="scss" scoped>
:deep .el-timeline {
  padding-left: 0;
  font-size: 12px;
}

:deep .el-form-item__label {
  padding-right: 3px;
}

.look-info {
}

:deep .el-dialog {
  margin-top: 20vh !important;
}

.shuangchongbox {
  width: 100%;
  display: flex;
  position: relative;

  .shuangchongboxleftbox {
    width: 70%;
  }

  .shuangchongboxleftboxShow {
    width: 100%;
  }

  .myEcharts {
    width: 30%;
    // height: 100%;
  }
}

.shouqiwenzi {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 100px;
  font-size: 14px;
  font-weight: bold;
  color: #409eff;
  cursor: pointer;
  z-index: 999;
}

.content-info {
  position: relative;
}

.fanhuipiaofu {
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>