<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">首页</span>
    </div>
    <div class="scroll">
      <!-- 项目总览 -->
      <div class="middle">
        <div class="roles">项目总览</div>
        <div class="filter">
          <el-select
            v-model="projectWatchSel.department"
            placeholder="请选择主办单位"
            style="width: 180px"
            clearable
            @change="projectWatch"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.oname"
              :label="item.oname"
              :value="item.oname"
            /> </el-select
          >&nbsp;&nbsp;&nbsp;&nbsp;
          <span>时间选择：</span>
          <el-radio-group v-model="projectWatchSel.timeType">
            <el-radio value="最近7日">最近7日</el-radio>
            <el-radio value="本月">本月</el-radio>
            <el-radio value="本季度">本季度</el-radio>
            <el-radio value="自定义">自定义</el-radio>
            <el-date-picker
              v-if="projectWatchSel.timeType == '自定义'"
              v-model="projectWatchSel.time"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="截止时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="projectWatch"
            />
          </el-radio-group>
        </div>
        <div class="card">
          <!-- 正常办结 -->
          <el-card style="min-width: 200px">
            <div class="title">
              <div class="block">
                <span>正常办结</span><br />
                <span class="num">{{ state1 }}</span>
              </div>
              <img src="../../assets/images/zhengchangbanjie.png" alt="" />
            </div>
            <div class="jindu">
              <el-progress percentage="80" color="rgba(0, 97, 255, 1)" />
              <span class="title">(同比上月)</span>
            </div>
          </el-card>
          <!-- 预警在办 -->
          <el-card style="min-width: 200px">
            <div class="title">
              <div class="block">
                <span>预警在办</span><br />
                <span class="num">{{ state2 }}</span>
              </div>
              <img src="../../assets/images/yujingzaiban.png" alt="" />
            </div>
            <div class="jindu">
              <el-progress percentage="80" color="rgba(254, 144, 51, 1)" />
              <span class="title">(同比上月)</span>
            </div>
          </el-card>
          <!-- 超时在办 -->
          <el-card style="min-width: 200px">
            <div class="title">
              <div class="block">
                <span>超时在办</span><br />
                <span class="num">{{ state3 }}</span>
              </div>
              <img src="../../assets/images/chaoshizaiban.png" alt="" />
            </div>
            <div class="jindu">
              <el-progress percentage="80" color="rgba(0, 97, 255, 1)" />
              <span class="title">(同比上月)</span>
            </div>
          </el-card>
          <!-- 正常在办 -->
          <el-card style="min-width: 200px">
            <div class="title">
              <div class="block">
                <span>正常在办</span><br />
                <span class="num">{{ state4 }}</span>
              </div>
              <img src="../../assets/images/zhengchangzaiban.png" alt="" />
            </div>
            <div class="jindu">
              <el-progress percentage="80" color="rgba(89, 184, 42, 1)" />
              <span class="title">(同比上月)</span>
            </div>
          </el-card>
          <!-- 超时办结 -->
          <el-card style="min-width: 200px">
            <div class="title">
              <div class="block">
                <span>超时办结</span><br />
                <span class="num">{{ state5 }}</span>
              </div>
              <img src="../../assets/images/chaoshibanjie.png" alt="" />
            </div>
            <div class="jindu">
              <el-progress percentage="80" color="rgba(254, 144, 51, 1)" />
              <span class="title">(同比上月)</span>
            </div>
          </el-card>
          <!-- 项目总数 -->
          <el-card style="min-width: 200px">
            <div class="title">
              <div class="block">
                <span>项目总数</span><br />
                <span class="num">{{ state6 }}</span>
              </div>
              <img src="../../assets/images/xiangmuzongshu.png" alt="" />
            </div>
            <div class="jindu">
              <el-progress percentage="80" color="rgba(0, 97, 255, 1)" />
              <span class="title">(同比上月)</span>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 部门排行榜 -->
      <div class="roles" style="padding-bottom: 0">部门排行榜</div>
      <div class="condition">
        <div class="fil">
          <el-select
            v-model="ranking.department"
            placeholder="请选择主办单位"
            style="width: 160px"
            clearable
            @change="rankingList"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.oname"
              :label="item.oname"
              :value="item.oname"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>时间选择</span>&nbsp;&nbsp;
          <el-radio-group @change="rankingList" v-model="ranking.timeType">
            <el-radio value="最近7日">最近7日</el-radio>
            <el-radio value="本月">本月</el-radio>
            <el-radio value="本季度">本季度</el-radio>
            <el-radio value="自定义">自定义</el-radio>
            <el-date-picker
              v-if="ranking.timeType == '自定义'"
              v-model="ranking.time"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="截止时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="rankingList"
            />
          </el-radio-group>
        </div>
        <div class="fil">
          <!-- <el-input
                clearable
                v-model="ranking.keyWord"
                @clear="searchBtn"
                placeholder="请输入项目"
                style="width: 180px"
              /> -->
          <!-- <el-button
            type="primary"
            class="search"
            @click="rankingList"
            >查询</el-button
          > -->
        </div>
        <!-- <div class="fil">
              <el-button type="primary" class="search" @click="searchBtn"
                >导出</el-button
              >
            </div> -->
      </div>
      <div class="table">
        <div class="l_table">
          <div class="title"><span class="icon"></span>评分排行榜</div>
          <el-table
            :data="rankList"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '30px',
              border: 0,
            }"
          >
            <el-table-column
              align="center"
              type="index"
              label="排行"
              width="80"
            />
            <el-table-column align="center" prop="name" label="部门名称" />
            <el-table-column align="center" prop="num" label="分数/分" />
          </el-table>
        </div>
        <div class="l_table">
          <div class="title"><span class="icon"></span>完成率排行榜</div>
          <el-table
            :data="finishingList"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '30px',
              border: 1,
            }"
          >
            <el-table-column
              align="center"
              type="index"
              label="排行"
              width="80"
            />
            <el-table-column align="center" prop="name" label="部门名称" />
            <el-table-column align="center" prop="num" label="完成率/%" />
          </el-table>
        </div>
      </div>

      <!-- 预警消息推送汇总 -->
      <div class="roles">预警消息推送汇总</div>
      <div class="participation">
        <el-button
          :class="warningFlag == 1 ? 'active' : ''"
          @click="warningClick(1)"
          >汇总</el-button
        >
        <el-button
          :class="warningFlag == 2 ? 'active' : ''"
          @click="warningClick(2)"
          >明细</el-button
        >
      </div>
      <div v-show="warningFlag == 1">
        <div class="condition">
          <div class="fil">
            <span>主办单位</span>&nbsp;&nbsp;
            <el-select
              v-model="warnCollect.organize"
              placeholder="请选择主办单位"
              style="width: 160px"
              clearable
              @change="warningList"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.oname"
                :label="item.oname"
                :value="item.oname"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>时间选择</span>&nbsp;&nbsp;
            <el-radio-group
              @change="warningList"
              v-model="warnCollect.updateBy"
            >
              <el-radio value="最近7日">最近7日</el-radio>
              <el-radio value="本月">本月</el-radio>
              <el-radio value="本季度">本季度</el-radio>
              <el-radio value="自定义">自定义</el-radio>
              <el-date-picker
                v-if="warnCollect.updateBy == '自定义'"
                v-model="warnCollect.time"
                type="daterange"
                unlink-panels
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="截止时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
                style="width: 280px"
                @change="warningList"
              />
            </el-radio-group>
          </div>
          <div class="fil">
            <!-- <el-button
              type="primary"
              class="search"
              @click="warningList"
              >查询</el-button
            > -->
          </div>
          <!-- <div class="fil">
            <el-button type="primary" class="search" @click="searchBtn"
              >导出</el-button
            >
          </div> -->
        </div>
        <div class="huizong">
          <!-- <el-table
            :row-class-name="tableRowClassName"
            :data="warnCollectList"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '40px',
              border: 0,
            }"
          >
            <el-table-column align="center" prop="organize" label="主办单位" />
            <el-table-column align="center" prop="mtype" label="类型" />
            <el-table-column align="center" prop="num" label="次数" />
          </el-table> -->
          <table>
            <template v-for="i in warnCollectList">
              <tr>
                <td rowspan="2">{{ i.organize }}</td>
                <td>类型</td>
                <td>次数</td>
              </tr>
              <tr>
                <td>{{ i.mtype }}</td>
                <td>{{ i.num }}</td>
              </tr>
            </template>
          </table>
        </div>
      </div>
      <div v-show="warningFlag == 2">
        <div class="condition">
          <div class="fil">
            <span>主办单位</span>&nbsp;&nbsp;
            <el-select
              v-model="warnCollect.organize"
              placeholder="请选择主办单位"
              style="width: 160px"
              clearable
              @change="warningList"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.oname"
                :label="item.oname"
                :value="item.oname"
              />
            </el-select>
          </div>
          <!-- <div class="fil">
                <span>协办单位</span>&nbsp;&nbsp;
                <el-select
                  v-model="warnCollect.coOrganize"
                  placeholder="请选择协办单位"
                  style="width: 160px"
                  clearable
                  @change="warningList"
                >
                  <el-option
                    v-for="item in departmentData"
                    :key="item.oname"
                    :label="item.oname"
                    :value="item.oname"
                  />
                </el-select>
              </div> -->
          <div class="fil">
            <span>时间选择</span>&nbsp;&nbsp;
            <el-radio-group
              @change="warningList"
              v-model="warnCollect.updateBy"
            >
              <el-radio value="最近7日">最近7日</el-radio>
              <el-radio value="本月">本月</el-radio>
              <el-radio value="本季度">本季度</el-radio>
              <el-radio value="自定义">自定义</el-radio>
              <el-date-picker
                v-if="warnCollect.updateBy == '自定义'"
                v-model="warnCollect.time"
                type="daterange"
                unlink-panels
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="截止时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
                style="width: 280px"
                @change="warningList"
              />
            </el-radio-group>
          </div>
          <div class="fil">
            <span>项目等级</span>&nbsp;&nbsp;
            <el-select
              v-model="warnCollect.projectLevel"
              placeholder="请选择项目等级"
              style="width: 160px"
              clearable
              @change="warningList"
            >
              <el-option label="正常" value="正常" />
              <el-option label="紧急" value="紧急" />
            </el-select>
          </div>
          <div class="fil">
            <span>项目来源</span>&nbsp;&nbsp;
            <el-select
              v-model="warnCollect.projectFrom"
              placeholder="请选择项目来源"
              style="width: 160px"
              clearable
              @change="warningList"
            >
              <el-option label="涉内" value="涉内" />
              <el-option label="涉外" value="涉外" />
            </el-select>
          </div>
          <div class="fil">
            <span>状态</span>&nbsp;&nbsp;
            <el-select
              v-model="warnCollect.state"
              placeholder="请选择状态"
              style="width: 160px"
              clearable
              @change="warningList"
            >
              <el-option label="正常在办" value="1" />
              <el-option label="预警在办" value="2" />
              <el-option label="超时在办" value="3" />
              <el-option label="正常办结" value="4" />
              <el-option label="超时办结" value="5" />
            </el-select>
          </div>
          <div class="fil">
            <el-input
              clearable
              v-model="warnCollect.projectName"
              @clear="warningList"
              placeholder="请输入项目名称"
              style="width: 180px"
            />
            <el-button
              style="margin-left: 20px"
              type="primary"
              class="search"
              @click="warningList"
              >查询</el-button
            >
          </div>
          <!-- <div class="fil">
                <el-button type="primary" class="search" @click="searchBtn"
                  >导出</el-button
                >
              </div> -->
        </div>
        <div class="mingxi">
          <el-table
            :row-class-name="tableRowClassName"
            :data="warnCollectList"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '40px',
              border: 1,
            }"
          >
            <el-table-column align="center" prop="projectName" label="项目" />
            <el-table-column align="center" prop="taskName" label="任务" />
            <el-table-column align="center" prop="mtype" label="类型" />
            <el-table-column
              align="center"
              prop="createTime"
              label="发生时间"
            />
            <el-table-column align="center" prop="organize" label="部门" />
            <el-table-column align="center" prop="userName" label="姓名" />
          </el-table>
        </div>
      </div>

      <!-- <div class="roles">项目台</div> -->
      <div class="participation">
        <el-tabs
          v-model="projectDesk"
          class="demo-tabs"
          @tab-change="problemClick"
        >
          <!-- <el-tab-pane label="我关注的" name="1">我关注的</el-tab-pane> -->
          <el-tab-pane label="问题清单" :name="1">问题清单</el-tab-pane>
          <el-tab-pane label="预警清单" :name="2">预警清单</el-tab-pane>
        </el-tabs>
      </div>
      <div class="condition">
        <div class="fil">
          <span>主办单位</span>&nbsp;&nbsp;
          <el-cascader
            :options="searchOrganizeData"
            :props="searchOrganizeProp"
            @change="getUser1"
            clearable
          >
            <template #default="{ node, data }">
              <span>{{ data.userName }}</span>
              <span v-if="!node.isLeaf"> ({{ data.userList.length }}) </span>
            </template>
          </el-cascader>
        </div>
        <div class="fil">
          <span>时间选择</span>&nbsp;&nbsp;
          <el-radio-group v-model="searchInput.timeType">
            <el-radio value="最近7日">最近7日</el-radio>
            <el-radio value="本月">本月</el-radio>
            <el-radio value="本季度">本季度</el-radio>
            <el-radio value="自定义">自定义</el-radio>
            <el-date-picker
              v-if="searchInput.timeType == '自定义'"
              v-model="searchInput.updateBy"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="截止时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="searchBtn"
            />
          </el-radio-group>
        </div>
        <div class="fil">
          <span>项目等级</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput.projectLevel"
            placeholder="请选择项目等级"
            style="width: 160px"
            clearable
            @change="searchBtn"
          >
            <el-option
              v-for="item in projectLevelData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>项目来源</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput.projectFrom"
            placeholder="请选择项目来源"
            style="width: 160px"
            clearable
            @change="searchBtn"
          >
            <el-option
              v-for="item in projectOriginData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>状态</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput.state"
            placeholder="请选择状态"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in stateData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <el-input
            clearable
            v-model="searchInput.projectName"
            @clear="searchBtn"
            placeholder="请输入项目"
            style="width: 180px"
          />
          <el-button
            style="margin-left: 20px"
            type="primary"
            class="search"
            @click="searchBtn"
            >查询</el-button
          >
        </div>
      </div>
      <div class="project" v-loading="loading">
        <el-card v-for="i in tableData.list" @click="projectCard(i)">
          <div class="title">
            <div class="name">
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="i.projectName"
                placement="top-start"
              >
                <span class="projectName">{{ i.projectName }}</span>
              </el-tooltip>
              <span class="shewai">{{ i.projectFrom }}</span>
              <!-- <span class="jinji">紧急</span> -->
            </div>
            <div class="btn">
              <div
                class="jinji"
                @click.stop=""
                size="small"
                color="rgba(212, 48, 48, 1)"
              >
                {{ i.projectLevel }}
              </div>
              <el-button
                v-if="i.collect == 1"
                @click.stop="collectClick(i)"
                size="small"
                color="rgba(254, 144, 51, 1)"
                >已收藏</el-button
              >
              <el-button
                v-if="i.collect == 0"
                @click.stop="collectClick(i)"
                size="small"
                color="rgba(254, 144, 51, 1)"
                >收藏</el-button
              >
              <el-dropdown
                placement="bottom-start"
                v-if="activeName == 5 || activeName == 6"
              >
                <el-button
                  @click.stop=""
                  size="small"
                  color="rgba(33, 107, 255, 1)"
                  >更多</el-button
                >
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      @click.stop="editProject(i)"
                      v-if="activeName == 5"
                      >编辑</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.stop="delProject(i)"
                      v-if="activeName == 5"
                      >删除</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-if="activeName == 6"
                      @click.stop="scoreProject(i)"
                      >评分</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="info">
            <div class="item">主办单位：{{ i.organize }}</div>
            <div class="item">主办人：{{ i.headerName }}</div>
            <!-- <div class="item">协办人：{{ i.coSposonerName }}</div> -->
            <div class="item">
              项目周期：{{ i.startTime }} ~ {{ i.endTime }}
            </div>
            <!-- <div class="item">人员：{{ i.staffNum }}人</div> -->
            <div>任务：{{ i.taskNum }}个</div>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <div>
                <div class="item">预警次数：{{ i.warnNum }}次</div>
                <div class="item">提醒次数：{{ i.remindNum }}次</div>
              </div>
              <span class="score">{{ i.score }}<span style="font-size: 18px;">分</span></span>
            </div>
            <div class="plan">
              <span>项目进度：</span>
              <el-progress
                :percentage="i.progress*100"
                color="rgba(0, 97, 255, 1)"
              />
              <img
                title="催办"
                @click.stop="urgeOneProject(i)"
                src="../../assets/images/inform.png"
                alt=""
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>

     <!-- 点击卡片弹窗 -->
     <el-dialog
      class="projectCard"
      v-model="cardVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="cardTitle"
      align-center
      width="1400"
      :before-close="cancelCard"
    >
      <div>
        <div class="title">项目情况</div>
        <div class="info">{{ cardInfo.projectContent }}</div>
        <el-divider />
        <div class="unit">
          <div class="unit_i">
            <span class="key">主办单位 :</span>
            <span class="value">{{ cardInfo.organize }}</span>
          </div>
          <div class="unit_i">
            <span class="key">主办人 :</span>
            <span class="value">{{ cardInfo.sposonerName }}</span>
          </div>
          <div class="unit_i">
            <span class="key">协办单位 :</span>
            <span class="value">{{ cardInfo.coOrganizeCopy }}</span>
          </div>
          <div class="unit_i">
            <span class="key">协办人 :</span>
            <span class="value">{{ cardInfo.coSposonerName }}</span>
          </div>
          <div class="unit_i">
            <span class="key">分管领导 :</span>
            <span class="value">{{ cardInfo.leaderName }}</span>
          </div>
          <div class="unit_i">
            <span class="key">评分人 :</span>
            <span class="value">{{ cardInfo.scorerName }}</span>
          </div>
          <div class="unit_i">
            <span class="key">项目周期 :</span>
            <span class="value"
              >{{ cardInfo.startTime }} ~ {{ cardInfo.endTime }}</span
            >
          </div>
          <div class="unit_i">
            <span class="key">项目等级 :</span>
            <span class="value">{{ cardInfo.projectLevel }}</span>
          </div>
          <div class="unit_i">
            <span class="key">项目来源 :</span>
            <span class="value">{{ cardInfo.projectFrom }}</span>
          </div>
        </div>
        <div class="unit" style="margin: 10px 0 20px">
          <div class="unit_i">
            <span class="key">附件 :</span>
            <div class="fileList">
              <div class="attachment" v-for="i in cardInfo.fileUrl">
                <span @click="pdfChange(i)">{{ i }}</span>
                <!-- <img style="height: 40px" :src="i" alt="" /> -->
              </div>
            </div>
          </div>
        </div>
        <div class="participation">
          <el-button @click="logChange(1)" :class="logFlag == 1 ? 'active' : ''"
            >项目进度</el-button
          >
          <el-button @click="logChange(2)" :class="logFlag == 2 ? 'active' : ''"
            >项目日志</el-button
          >
        </div>
        <div v-if="logFlag == 1">
          <div class="schedule">
            <span>任务进度分（权重{{ cardInfo.progress }}%）</span>
            <!-- <span>（注：评分维度为：任务完成质量40%）</span> -->
          </div>
          <el-table
            :row-class-name="tableRowClassName"
            :data="taskData"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '40px',
              border: 0,
            }"
          >
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column align="center" prop="taskName" label="任务名称" />
            <el-table-column
              align="center"
              width="250"
              tooltip-effect
              label="附件"
            >
              <template #default="scope">
                <div v-if="scope.row.fileUrl">
                  <div v-for="i in scope.row.fileUrl.split(',')">
                    <div
                      style="color: rgba(33, 107, 255, 1); cursor: pointer"
                      @click="pdfChange(i)"
                    >
                      {{ i }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
              <template #default="scope">
                <span v-if="scope.row.state == 1">正常在办</span>
                <span v-if="scope.row.state == 2">预警在办</span>
                <span v-if="scope.row.state == 3">超时在办</span>
                <span v-if="scope.row.state == 4">正常办结</span>
                <span v-if="scope.row.state == 5">超时办结</span>
                <!-- 1、正常在办，2、预警在办，3、超时在办，4、正常办结，5、超时办结  -->
              </template>
            </el-table-column>
            <el-table-column align="center" width="120" label="起止时间">
              <template #default="scope">
                <span>{{ scope.row.startTime }} ~ {{ scope.row.endTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="remindTime"
              label="提醒时间"
              width="120"
            />
            <el-table-column
              align="center"
              width="120"
              prop="warnTime"
              label="预警时间"
            />
            <el-table-column
              align="center"
              width="120"
              prop="finishTime"
              label="完成时间"
            />
            <el-table-column
              align="center"
              width="120"
              prop="finishRemark"
              tooltip-effect
              label="完成备注"
            />
            <el-table-column
              align="center"
              prop="scoreStandard"
              label="评价标准"
              width="170"
            />
            <el-table-column align="center" prop="weight" label="权重" />
            <el-table-column
              align="center"
              prop="headerName"
              label="任务负责人"
              width="100"
            />
            <el-table-column
              align="center"
              prop="scoreLimit"
              label="评分上限"
            />
            <el-table-column align="center" prop="sysScore" label="系统" />
          </el-table>
          <el-button
            type="primary"
            class="search"
            @click="addTaskbtn"
            v-if="activeName == 5"
            >添加任务</el-button
          >
          <el-button
            v-if="activeName == 6 && isScorer()"
            type="primary"
            class="search"
            @click="scoreProjects"
            >评分</el-button
          >
        </div>
        <div v-if="logFlag == 2">
          <el-table
            :row-class-name="tableRowClassName"
            :data="logData"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '40px',
              border: 0,
            }"
          >
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column align="center" prop="taskName" label="任务名称" />
            <el-table-column align="center" label="附件">
              <template #default="scope">
                <div v-if="scope.row.fileUrl">
                  <div v-for="i in scope.row.fileUrl.split(',')">
                    <div
                      style="color: rgba(33, 107, 255, 1); cursor: pointer"
                      @click="pdfChange(i)"
                    >
                      {{ i }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="content" label="内容" />
            <el-table-column
              align="center"
              prop="createTime"
              label="发生时间"
            />
            <el-table-column align="center" prop="createBy" label="操作人" />
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  watch,
  onBeforeMount,
  onUnmounted,
} from "vue";
import COS from "cos-js-sdk-v5";
import { useRouter } from "vue-router";
import { genFileId, ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import lodash, { reduce } from "lodash";
import axios from "axios";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();
const loading = ref(false);

// 问题清单 (///////////////////////////////////////////////)
const projectDesk = ref(1);
const tableData = reactive({
  list: [{}],
});
const searchInput = reactive({
  projectName: null, // 项目名称
  projectFrom: null, // 项目来源
  projectLevel: null, // 项目等级
  state: null, //
  organize: null, // 主办单位
  sposonerName: null, // 主办人
  coOrganize: null, // 协办单位
  coSposonerName: null, // 协办人
  timeType: "自定义",
  updateBy: ["2024-11-01", "2024-12-31"], // 时间筛选
});
const projectOriginData = ref([
  { name: "涉内", id: "涉内" },
  { name: "涉外", id: "涉外" },
]); // 项目来源
const projectLevelData = ref([
  { name: "正常", id: "正常" },
  { name: "紧急", id: "紧急" },
]); // 项目等级
const stateData = ref([
  { id: 1, name: "正常在办" },
  { id: 2, name: "预警在办" },
  { id: 3, name: "超时在办" },
  { id: 4, name: "正常办结" },
  { id: 5, name: "超时办结" },
]); // 用户数据
const departmentData = ref(); // 部门数据
const searchOrganizeProp = {
  children: "userList",
  label: "userName",
  value: "userName",
};

// 项目总览 （======================================================）
const projectWatchSel = reactive({
  department: "",
  timeType: "最近7日",
  keyWord: "",
  time: "", // 自定义时间
});
const state1 = ref();
const state2 = ref();
const state3 = ref();
const state4 = ref();
const state5 = ref();
const state6 = ref();

// 部门排行榜 （======================================================）
const ranking = reactive({
  department: "",
  timeType: "最近7日",
  keyWord: "",
  time: "", // 自定义时间
});
const rankList = ref();
const finishingList = ref(); // 部门完成率排行数据

// 预警消息推送汇总 （汇总）(//////////////////////////////////////////////////////////)
const warningFlag = ref(1);
const warnCollect = reactive({
  organize: null, // 主办部门
  projectName: null, // 项目名称
  projectFrom: null, // 项目来源
  projectLevel: null, // 项目等级
  state: null, // 1、正常在办，2、预警在办，3、超时在办，4、正常办结，5、超时办结
  coOrganize: null, // 协办单位
  sposonerName: null, // 主办人
  coSposonerName: null, // 协办人
  updateBy: "最近7日", // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】
  time: "", // 自定义时间
});
const warnCollectList = ref();
// （明细）
const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(40); // 当前总数
const selectData = reactive({
  list: [],
}); // 多选框选择的数据
const api = ref("");

// 新建项目 (--------------------------------------------------------)
const projectVisible = ref(false);
const projectTitle = ref();
const projectRef = ref();

const searchOrganizeData = ref(); // 搜索框用主办协办人员
const organizeData = ref(); // 添加项目用主办协办人员
const scorerData = ref(); // 评分人

const organizeProps = {
  children: "userList",
  label: "userName",
  value: "id",
};
const coOrganizeProps = {
  multiple: true,
  children: "userList",
  label: "userName",
  value: "id",
};

const projectRuleForm = reactive({
  projectName: "", // 名称
  projectContent: "", // 描述
  fileUrl: "", // 附件

  organize: "", // 主办单位
  sposoner: "", // 主办人

  coOrganize: "", // 协办单位
  coSposoner: "", // 协办人

  projectFrom: "", // 项目来源
  projectLevel: "", // 项目等级
  scorer: "", // 评分人
  id: "",
});
const sposonerVal = ref([]); // 主办人和单位
const coSposonerVal = ref([]); // 协办人和单位

const fileList = ref([]);
// 新建项目表单验证
const projectRules = reactive({
  projectName: [
    { required: true, message: "项目名称不能为空", trigger: "blur" },
  ],
  projectContent: [
    { required: true, message: "项目描述不能为空", trigger: "blur" },
  ],
  fileUrl: [{ required: true, message: "附件不能为空", trigger: "blur" }],
  // organize: [{ required: true, message: "主办单位不能为空", trigger: "blur" }],
  sposoner: [{ required: true, message: "主办人不能为空", trigger: "blur" }],
  coSposoner: [{ required: true, message: "协办人不能为空", trigger: "blur" }],
  // coOrganize: [
  //   { required: true, message: "协办单位不能为空", trigger: "blur" },
  // ],
  projectFrom: [
    { required: true, message: "项目来源不能为空", trigger: "blur" },
  ],
  projectLevel: [
    { required: true, message: "项目等级不能为空", trigger: "blur" },
  ],
  scorer: [{ required: true, message: "评分人不能为空", trigger: "blur" }],
});

// 新建任务
const taskVisible = ref(false);
const taskTitle = ref();
const taskRef = ref();
const taskData = ref(); // 任务进度列表
const logData = ref(); // 任务日志

const taskRuleForm = reactive({
  taskName: "", // 任务名称
  projectId: "", // 项目ID
  scoreStandard: "", // 评价标准
  fileUrl: "", // 附件
  scoreLimit: "", // 评分上限
  weight: "", // 权重
  remindTime: "", // 提醒时间
  warnTime: "", // 预警时间
  header: "", // 负责人
  periodTime: "", // 周期-起始时间
  id: "",
});

const fileListTask = ref([]); // 任务列表
const taskLeader = ref(); // 任务负责人列表
// 新建项目表单验证
const taskRules = reactive({
  taskName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
  scoreStandard: [
    { required: true, message: "评价标准不能为空", trigger: "blur" },
  ],
  fileUrl: [{ required: true, message: "附件不能为空", trigger: "blur" }],
  scoreLimit: [
    { required: true, message: "评分上限不能为空", trigger: "blur" },
  ],
  weight: [{ required: true, message: "权重不能为空", trigger: "blur" }],
  remindTime: [
    { required: true, message: "提醒时间不能为空", trigger: "blur" },
  ],
  warnTime: [{ required: true, message: "预警时间不能为空", trigger: "blur" }],
  header: [{ required: true, message: "任务负责人不能为空", trigger: "blur" }],
  periodTime: [
    { required: true, message: "任务周期不能为空", trigger: "blur" },
  ],
});

// 评分 (===========================================================)
const scoreVisible = ref(false);
const scoreRef = ref();
const scoreRuleForm = reactive({
  describe: "", // 描述
  num: "", // 分数
});
// 评分表单验证
const scoreRules = reactive({
  describe: [{ required: true, message: "评价不能为空", trigger: "blur" }],
  num: [{ required: true, message: "评分不能为空", trigger: "blur" }],
});

// 点击项目卡片 (++++++++++++++++++++++++++++++++++++++++++++++++++++++++)
const cardVisible = ref(false);
const cardTitle = ref("XXXXX项目");
const cardRef = ref();
const logFlag = ref(1); // 1项目进度 || 2项目日志
const cardInfo = reactive({
  projectName: "", // 名称
  projectContent: "", // 描述
  fileUrl: "", // 附件
  organize: "", // 主办单位
  sposonerName: "", // 主办人
  coOrganize: "", // 协办单位
  coSposonerName: "", // 协办人
  projectFrom: "", // 项目来源
  projectLevel: "", // 项目等级
  progress: "", // 进度
  startTime: "", // 进度
  endTime: "", // 进度
  leaderName: "", // 分管领导
  scorerName: "", // 评分人
});

// 更新进度 （00000000000000000000000000000000000000000000000000000）
const updateVisible = ref(false);
const updateRef = ref();
const updateRuleForm = reactive({
  remark: "", // 备注
  fileUrl: "", // 附件
  id: "",
});
const fileListAttachment = ref([]); // 更新进度附件
// 更新进度验证
const updateRules = reactive({
  remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],
  fileUrl: [{ required: true, message: "附件不能为空", trigger: "blur" }],
});

// 预览Pdf （++++++++++++++++++++++++++++++++++++++++++++++++++++++++）
const previewPdfVisible = ref(false);
const previewPdfUrl = ref(); // pdf地址
const pdfFlag = ref(1); // word文档地址 1、pdf 2、word 3、图片

// 部门数据
const departmentList = async () => {
  let res = await axios({
    method: "post",
    url: api.value + "/api/Organize/query",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "部门数据");
  if (res.data.code == 200) {
    departmentData.value = res.data.data;
  } else {
    
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }

  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/api/sysUser/queryOwn",
  //   headers: {
  //     tokenP: sessionStorage.getItem("tokenP"),
  //     user_head: sessionStorage.getItem("userhead"),
  //   },
  // });
  // console.log(res, "部门数据");
  // if (res.data.code == 200) {
  //   let arr = [];
  //   res.data.data.manageDepartment.split(",").forEach((i) => {
  //     arr.push({
  //       oname: i,
  //     });
  //   });
  //   departmentData.value = arr;
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // }
};
// 新增项目和搜索框中的协办人数据
const users = async () => {
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysProject/queryCoUsers",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "主办协办人员");
  // let resData=res.data
  // console.log(resData);
  if (res.data.code == 200) {
    let resdata = res.data.data;
    resdata.forEach((i) => {
      i.userName = i.organize;
      i.id = i.organize;
    });
    searchOrganizeData.value = resdata;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 项目总览 （======================================================）
const projectWatch = async () => {
  let data = {
    organize: projectWatchSel.department,
  };
  if (projectWatchSel.timeType == "自定义") {
    if (projectWatchSel.time) {
      data.timeType = projectWatchSel.time.join(",");
    } else {
      data.timeType = null;
    }
  } else {
    // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】，null全部
    data.timeType = projectWatchSel.timeType;
  }
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysProject/queryTjByState",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data,
  });
  console.log(res, "项目总览");
  if (res.data.code == 200) {
    //   { id: 1, name: "正常在办" },
    // { id: 2, name: "预警在办" },
    // { id: 3, name: "超时在办" },
    // { id: 4, name: "正常办结" },
    // { id: 5, name: "超时办结" },
    res.data.data.forEach((i) => {
      if (i.state == 1) {
        state1.value = i.num;
      }
      if (i.state == 2) {
        state2.value = i.num;
      }
      if (i.state == 3) {
        state3.value = i.num;
      }
      if (i.state == 4) {
        state4.value = i.num;
      }
      if (i.state == 5) {
        state5.value = i.num;
      }
      if (i.state == 6) {
        state6.value = i.num;
      }
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 部门排行榜 （======================================================）
const rankingList = async () => {
  let data = {
    organize: ranking.department,
  };
  if (ranking.timeType == "自定义") {
    if (ranking.time) {
      data.timeType = ranking.time.join(",");
    } else {
      data.timeType = null;
    }
  } else {
    // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】，null全部
    data.timeType = ranking.timeType;
  }
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysTask/queryDepartScoreBank",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data,
  });
  console.log(res, "部门评分排行榜");
  if (res.data.code == 200) {
    rankList.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }

  let ress = await axios({
    method: "post",
    url: api.value + "/api/sysTask/queryDepartFinishBank",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data,
  });
  console.log(ress, "部门完成率排行");
  if (ress.data.code == 200) {
    finishingList.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};

// 预警消息 （++++++++++++++++++++++++++++++++++++++++++++++++++）
// 预警消息推送汇总 （汇总）
const warningClick = (val) => {
  warningFlag.value = val;
  warningList();
};
const warningList = async () => {
  if (warningFlag.value == 1) {
    let data = {
      organize: warnCollect.organize, // 主办部门
      // updateBy: warnCollect.updateBy, // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】
    };
    if (warnCollect.updateBy == "自定义") {
      if (warnCollect.time) {
        data.updateBy = warnCollect.time.join(",");
      } else {
        data.updateBy = null;
      }
    } else {
      // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】，null全部
      data.updateBy = warnCollect.updateBy;
    }
    let res = await axios({
      method: "post",
      url: api.value + "/api/sysProject/queryMessageTj",
      headers: {
        tokenP: sessionStorage.getItem("tokenP"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data,
    });
    console.log(res, "预警消息统计");
    if (res.data.code == 200) {
      warnCollectList.value = res.data.data;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (warningFlag.value == 2) {
    let data = {
      organize: warnCollect.organize, // 主办部门
      projectName: warnCollect.projectName, // 项目名称
      projectFrom: warnCollect.projectFrom, // 项目来源
      projectLevel: warnCollect.projectLevel, // 项目等级
      state: warnCollect.state, // 1、正常在办，2、预警在办，3、超时在办，4、正常办结，5、超时办结
      coOrganize: warnCollect.coOrganize, // 协办单位
      sposonerName: warnCollect.sposonerName, // 主办人
      coSposonerName: warnCollect.coSposonerName, // 协办人
      // updateBy: warnCollect.updateBy, // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】
    };
    if (warnCollect.updateBy == "自定义") {
      if (warnCollect.time) {
        data.updateBy = warnCollect.time.join(",");
      } else {
        data.updateBy = null;
      }
    } else {
      // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】，null全部
      data.updateBy = warnCollect.updateBy;
    }
    let res = await axios({
      method: "post",
      url: api.value + "/api/sysProject/queryMessage",
      headers: {
        tokenP: sessionStorage.getItem("tokenP"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data,
    });
    console.log(res, "预警消息明细");
    if (res.data.code == 200) {
      warnCollectList.value = res.data.data;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);

// 问题清单 预警清单 （=================================================)
const problemClick = (val) => {
  projectDesk.value = val;
  getList()
};
// 问题清单
const getList = async () => {
  loading.value = true;
  let data = {
    createBy: projectDesk.value, // 1我关注的、2我收藏的、3我负责的、4我协办的、null
    // projectName: searchInput.projectName, // 项目名称
    // projectFrom: searchInput.projectFrom, // 项目来源
    // projectLevel: searchInput.projectLevel, // 项目等级
    // state: searchInput.state, // 1、正常在办，2、预警在办，3、超时在办，4、正常办结，5、超时办结
    // organize: searchInput.organize, // 主办单位-单选
    // sposonerName: searchInput.sposonerName, // 主办人
  };
  if (searchInput.timeType == "自定义") {
    if (searchInput.updateBy) {
      data.updateBy = searchInput.updateBy.join(",");
    } else {
      data.updateBy = null;
    }
  } else {
    // 时间类型：有：【最近7日】，【本月】，【本季度】，【2024-12-01,2024-12-30】，null全部
    data.updateBy = searchInput.timeType;
  }
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysTask/queryProblemAndWarmList",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "问题清单");
  if (res.data.code == 200) {
    tableData.list = res.data.data;
    // total.value = res.data.data.totalCount;
    loading.value = false;
  } else {
    window.location.href = 'https://chtech.ncjti.edu.cn/kpi/template/api/sysUser/authorize';
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 搜索框主办单位  根据部门获取用户
const getUser1 = async (val) => {
  console.log(val);
  if (val) {
    searchInput.organize = val[0];
    searchInput.sposonerName = val[1] || null;
  } else {
    searchInput.organize = null;
    searchInput.sposonerName = null;
  }
  // getList();
};
// 点击项目卡片 (++++++++++++++++++++++++++++++++++++++++++++++++++)
const projectCard = async (row) => {
  cardVisible.value = true;
  console.log(row);
  cardTitle.value = row.projectName;
  fileList.value = row.fileUrl;
  cardInfo.projectName = row.projectName;
  cardInfo.projectContent = row.projectContent;
  cardInfo.fileUrl = row.fileUrl.split(",");
  cardInfo.organize = row.organize;
  cardInfo.sposonerName = row.sposonerName;
  cardInfo.coSposonerName = row.coSposonerName;
  cardInfo.coOrganize = row.coOrganize;
  cardInfo.projectFrom = row.projectFrom;
  cardInfo.projectLevel = row.projectLevel;
  cardInfo.startTime = row.startTime;
  cardInfo.endTime = row.endTime;
  cardInfo.leaderName = row.leaderName;
  cardInfo.scorerName = row.scorerName;
  taskRuleForm.projectId = row.id;
  console.log(row.coSposonerName, row.coSposoner);
  console.log(row.sposonerName, row.sposoner);
  let arr = [];
  if (row.coSposonerName) {
    row.coSposonerName.split(",").forEach((item, ind) => {
      arr.push({ name: item, id: row.coSposoner.split(",")[ind] });
    });
  }
  let flag = arr.some((i) => {
    // "判断协办人里面是否有负责人"
    return i.id == row.sposoner;
  });
  console.log(flag);
  if (!flag) {
    arr.unshift({ name: row.sposonerName, id: row.sposoner });
  }
  console.log(arr);
  taskLeader.value = arr;
  taskList();
};
// 任务进度
const taskList = async () => {
  let data = new FormData();
  data.append("projectId", taskRuleForm.projectId);
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysTask/queryTaskByProject",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    console.log(res, "任务管理");
    taskData.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 任务日志
const logList = async () => {
  let data = new FormData();
  data.append("projectId", taskRuleForm.projectId);
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysProject/queryLogs",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    console.log(res, "任务日志");
    logData.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelCard = () => {
  cardVisible.value = false;
  taskRuleForm.projectId = "";
};
// 项目进度 || 项目日志 切换
const logChange = (val) => {
  logFlag.value = val;
  if (logFlag.value == 1) {
    taskList();
  } else if (logFlag.value == 2) {
    logList();
  }
};
// 项目滚动加载
const projectScroll = (event) => {
  // console.log(event, "priceTable.value.bodyWrapper");
  if (event) {
    let table = event.target;
    // if (table) {
    //   e.target.scrollTop = 0;
    //   console.log("置顶到顶部");
    // }
    let scrollTop = table.scrollTop;
    let scrollHeight = table.scrollHeight;
    let clientHeight = table.clientHeight;
    if (scrollTop + clientHeight == scrollHeight) {
      console.log("滚动到底部了");
      // 滚动到底部页面加一
      // table4CurrentPage.value++;
      // // 判断数据是否加载完
      // if (table4Total.value >= table4pageCount.value) {
      //   console.log(table4Total.value, "加载完毕");
      //   tableList4();
      // }
    }
  }
};
// 收藏项目
const collectClick = async (row) => {
  let data = new FormData();
  data.append("projectId", row.id);
  if (row.collect == 1) {
    data.append("state", 0);
  } else if (row.collect == 0) {
    data.append("state", 1);
  }
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysProject/collect",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "收藏");
  if (res.data.code == 200) {
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};


// 催办所有项目
const urgeProject = async () => {
  let ids = [];
  tableData.list.forEach((item) => {
    ids.push(item.id);
  });
  let data = new FormData();
  data.append("projectIds", ids);
  if (ids.length) {
    let res = await axios({
      method: "post",
      url: api.value + "/api/sysTask/urge",
      headers: {
        tokenP: sessionStorage.getItem("tokenP"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
    if (res.data.code == 200) {
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "暂无需要催办的项目",
      center: true,
    });
  }
};
// 催办单个项目
const urgeOneProject = async (row) => {
  let data = new FormData();
  data.append("projectIds", row.id);
  if (ids.length) {
    let res = await axios({
      method: "post",
      url: api.value + "/api/sysTask/urge",
      headers: {
        tokenP: sessionStorage.getItem("tokenP"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
    if (res.data.code == 200) {
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "暂无需要催办的项目",
      center: true,
    });
  }
};

// 添加照片时往fileList列表中添加图片信息
const handleChange = async (file, fileLists) => {
  // console.log(file, "1111");
};
// 可以获取图片参数
const handleUpload = async (file) => {
  // if (fileList.list.length >= 6) {
  //   ElMessage.warning("最多可上传6张图片!");
  //   return false;
  // }
  let data = new FormData();
  data.set("file", file.file);
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysFile/upload",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "图片上传成功");
  if (res.data.code == 200) {
    fileList.value.push(res.data.data);
    projectRuleForm.fileUrl = fileList.value;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 删除文件
const delFiles = (val) => {
  fileList.value = fileList.value.filter((i) => {
    return i !== val;
  });
  projectRuleForm.fileUrl = fileList.value;
};


// 新建任务 （******************************************************************）
const addTaskbtn = () => {
  taskVisible.value = true;
  taskTitle.value = "新建任务";
  taskRuleForm.taskName = "";
  taskRuleForm.scoreStandard = "";
  taskRuleForm.fileUrl = "";
  taskRuleForm.scoreLimit = "";
  taskRuleForm.weight = "";
  taskRuleForm.remindTime = "";
  taskRuleForm.warnTime = "";
  taskRuleForm.header = "";
  taskRuleForm.periodTime = "";
  taskRuleForm.id = "";
};
// 确定任务
const confirmTask = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let res = "";
      let data = {
        taskName: taskRuleForm.taskName, // 任务名称
        projectId: taskRuleForm.projectId, // 项目ID
        scoreStandard: taskRuleForm.scoreStandard, // 评价标准
        fileUrl: taskRuleForm.fileUrl.join(","), // 附件
        scoreLimit: taskRuleForm.scoreLimit, // 评分上限
        weight: taskRuleForm.weight, // 权重
        remindTime: taskRuleForm.remindTime, // 提醒时间
        warnTime: taskRuleForm.warnTime, // 预警时间
        header: taskRuleForm.header, // 负责人
        startTime: taskRuleForm.periodTime[0], // 周期-起始时间
        endTime: taskRuleForm.periodTime[1], // 周期-结束时间
      };
      // 判断是否有id存在，有则是修改账号
      if (taskRuleForm.id) {
        data.id = taskRuleForm.id;
        res = await axios({
          method: "post",
          url: api.value + "/api/sysTask/update",
          headers: {
            tokenP: sessionStorage.getItem("tokenP"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
      } else {
        res = await axios({
          method: "post",
          url: api.value + "/api/sysTask/add",
          headers: {
            tokenP: sessionStorage.getItem("tokenP"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
      }

      if (res.data.code == 200) {
        taskVisible.value = false;
        taskList();
        getList();
        taskRef.value.resetFields();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  });
};
// 取消任务
const cancelTask = () => {
  taskVisible.value = false;
  taskRef.value.resetFields();
  taskRuleForm.taskName = "";
  taskRuleForm.scoreStandard = "";
  taskRuleForm.fileUrl = "";
  taskRuleForm.scoreLimit = "";
  taskRuleForm.weight = "";
  taskRuleForm.remindTime = "";
  taskRuleForm.warnTime = "";
  taskRuleForm.header = "";
  taskRuleForm.periodTime = "";
  taskRuleForm.id = "";
};
//编辑任务
const editTask = (row) => {
  taskVisible.value = true;
  taskTitle.value = "编辑任务";
  taskRuleForm.taskName = row.taskName;
  taskRuleForm.scoreStandard = row.scoreStandard;
  taskRuleForm.fileUrl = row.fileUrl.split(",");
  fileListTask.value = row.fileUrl.split(",");
  taskRuleForm.scoreLimit = row.scoreLimit;
  taskRuleForm.weight = row.weight;
  taskRuleForm.remindTime = row.remindTime;
  taskRuleForm.warnTime = row.warnTime;
  taskRuleForm.header = row.header;
  taskRuleForm.periodTime = [row.startTime, row.endTime];
  taskRuleForm.id = row.id;
};
// 删除任务
const delTask = async (row) => {
  let data = new FormData();
  data.append("id", row.id);
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysTask/del",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    taskList();
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 催办任务
const urgeTask = async (row) => {
  let data = new FormData();
  data.append("taskId", row.id);
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysTask/urge",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    taskList();
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 可以获取图片参数
const handleUploadTask = async (file) => {
  // if (fileList.list.length >= 6) {
  //   ElMessage.warning("最多可上传6张图片!");
  //   return false;
  // }
  let data = new FormData();
  data.set("file", file.file);
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysFile/upload",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "图片上传成功");
  if (res.data.code == 200) {
    fileListTask.value.push(res.data.data);
    taskRuleForm.fileUrl = fileListTask.value;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 删除文件
const delFilesTask = (val) => {
  fileListTask.value = fileListTask.value.filter((i) => {
    return i !== val;
  });
  taskRuleForm.fileUrl = fileListTask.value;
};

// 评分 (==========================================================)
const scoreProject = (row) => {
  scoreVisible.value = true;
  scoreRuleForm.describe = "";
  scoreRuleForm.num = "";
  if (row) {
    taskRuleForm.projectId = row.id;
  }
};
// 确定评分
const confirmScore = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = new FormData();
      data.append("projectId", taskRuleForm.projectId);
      data.append("evaluate", scoreRuleForm.describe);
      data.append("score", scoreRuleForm.num);
      let res = await axios({
        method: "post",
        url: api.value + "/api/sysProject/evaluate",
        headers: {
          tokenP: sessionStorage.getItem("tokenP"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      if (res.data.code == 200) {
        console.log(res, "任务日志");
        logData.value = res.data.data;
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  });
};
// 取消评分
const cancelScore = () => {
  scoreVisible.value = false;
  scoreRef.value.resetFields();
};

// 更新进度 (00000000000000000000000000000000000000000000000000000000)
const updateTask = async (row) => {
  updateVisible.value = true;
  updateRuleForm.id = row.id;
  updateRuleForm.remark = "";
  updateRuleForm.fileUrl = "";
};
// 确定更新进度
const confirmUpdate = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = new FormData();
      data.append("taskId", updateRuleForm.id);
      data.append("finishRemark", updateRuleForm.remark);
      data.append("fileUrl", updateRuleForm.fileUrl.join(","));
      let res = await axios({
        method: "post",
        url: api.value + "/api/sysTask/submitTask",
        headers: {
          tokenP: sessionStorage.getItem("tokenP"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      if (res.data.code == 200) {
        taskList();
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  });
};
// 可以获取图片参数
const handleAttachment = async (file) => {
  // if (fileList.list.length >= 6) {
  //   ElMessage.warning("最多可上传6张图片!");
  //   return false;
  // }
  let data = new FormData();
  data.set("file", file.file);
  let res = await axios({
    method: "post",
    url: api.value + "/api/sysFile/upload",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "图片上传成功");
  if (res.data.code == 200) {
    fileListAttachment.value.push(res.data.data);
    updateRuleForm.fileUrl = fileListAttachment.value;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 删除文件
const delAttachment = (val) => {
  fileListAttachment.value = fileListAttachment.value.filter((i) => {
    return i !== val;
  });
  updateRuleForm.fileUrl = fileListAttachment.value;
};
// 取消更新进度
const cancelUpdate = () => {
  updateVisible.value = false;
  updateRef.value.resetFields();
};

// 判断PDF word 图片
const pdfChange = (url) => {
  // pdf
  if (url.includes(".pdf")) {
    pdfFlag.value = 1;
  }
  // word
  else if (url.includes(".docx")) {
    pdfFlag.value = 2;
  }
  // jpg jpeg png
  else if (
    url.includes(".jpg") ||
    url.includes(".jpeg") ||
    url.includes(".png")
  ) {
    pdfFlag.value = 3;
  }
  filePreviewPdf(url);
};
// 查看PDF
const filePreviewPdf = (url) => {
  console.log(url, "pdf地址信息");
  if (url) {
    previewPdfVisible.value = true;
    previewPdfUrl.value = url;
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "未上传施工许可证文件",
      center: true,
    });
  }
};
const cancelPreviewPdf = () => {
  previewPdfVisible.value = false;
  previewPdfUrl.value = "";
};
// 多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};

onBeforeMount(() => {
  api.value = store.state.user.api;
  // console.log(router.currentRoute.value.query.token);
  departmentList(); // 部门数据
  projectWatch(); // 项目总览
  rankingList(); // 部门评分排行榜
  warningList(); // 预警消息统计
  users(); // 获取协办单位和人数据
  getList(); // 问题清单 预警清单
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1050px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  // color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;

    .cameratxt {
      display: block;
      height: 60px;
      line-height: 60px;
    }
  }
  .middle {
    width: calc(100%);
    margin: 0 auto;

    color: #000;
    .roles {
      padding: 10px 0 10px 0;
      font-weight: 600;
      letter-spacing: 1px;
    }
    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 0 10px 0;
      .el-checkbox {
        margin-right: 15px;
        color: #000;
      }
      .grade {
        font-size: 14px;
        padding: 0 0 0 15px;
      }
    }
    .card {
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      .el-card {
        width: 207px;
        height: 119px;
        margin: 0 22px 15px 0;
        opacity: 1;
        border-radius: 12px;
        background: rgba(234, 240, 255, 1);
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.17);
        .title {
          display: flex;
          // align-items: center;
          justify-content: space-between;
          .block {
            .num {
              font-size: 28px;
              font-weight: 700;
            }
          }
          img {
            width: 38px;
            height: 35px;
          }
        }
        .jindu {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .el-progress {
            width: 100px;
            :deep(.el-progress__text) {
              width: 30px;
              min-width: 30px;
            }
          }
          .title {
            font-size: 12px;
            font-weight: 400;
          }
        }
      }
    }
  }
  .scroll {
    width: calc(100% - 60px);
    margin: 0 auto;
    flex: 1;
    overflow: auto;
    .Items {
      display: flex;
      justify-content: space-around;
      .leftItem {
        width: 45%;
      }
      .rightItem {
        width: 52%;
      }
    }
    .roles {
      color: #000;
      padding: 10px 0 10px 0;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .participation {
     
      .el-tabs {
      :deep(.el-tabs__nav-wrap) {
        &::after {
          display: none;
        }

        .el-tabs__nav {
          .el-tabs__item {
            color: rgba(153, 153, 153, 1);
            margin-right: 30px;
          }

          .is-active {
            color: rgba(33, 107, 255, 1);
          }

          .el-tabs__active-bar {
            background-color: rgba(33, 107, 255, 1);
          }
        }
      }

      :deep(.el-tabs__content) {
        display: none;
      }
    }
      .el-button {
        opacity: 1;
        border-radius: 8px;
        background: rgba(166, 166, 166, 0.1);
        color: rgba(166, 166, 166, 1);
        border: 1px solid rgba(166, 166, 166, 1);
      }
      .active {
        opacity: 1;
        border-radius: 8px;
        background: rgba(0, 97, 255, 0.1);
        color: rgba(0, 97, 255, 1);
        border: 1px solid rgba(0, 97, 255, 1);
      }
    }
    .condition {
      display: flex;
      flex-wrap: wrap;
      margin: 15px 0 5px;
      .fil {
        margin: 0 20px 10px 0;
        .search {
          background: linear-gradient(
            90deg,
            rgba(33, 107, 255, 1) 0%,
            rgba(102, 182, 255, 1) 100%
          );
        }
      }
    }
    .project {
      display: flex;
      flex-wrap: wrap;

      .el-card {
        width: 370px;
        height: 219px;
        margin: 0 20px 20px 0;
        opacity: 1;
        border-radius: 4px;
        background: rgba(245, 248, 255, 1);
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);

        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .name {
            display: flex;
            align-items: center;

            // width: 125px;
            .projectName {
              font-weight: 600;
              max-width: 80px;
              overflow: hidden;
              /* 确保超出的文本被裁剪 */
              white-space: nowrap;
              /* 确保文本在一行内显示 */
              text-overflow: ellipsis;
              /* 使用省略号表示文本被裁剪 */
            }

            .shewai {
              margin-left: 5px;
              padding: 0 2px;
              font-size: 12px;
              border-radius: 2px;
              border: 1px solid rgba(33, 107, 255, 1);
              color: rgba(33, 107, 255, 1);
            }

            // .jinji {
            //   margin-left: 5px;
            //   padding: 0 2px;
            //   font-size: 12px;
            //   border-radius: 2px;
            //   border: 1px solid rgba(212, 48, 48, 1);
            //   color: rgba(212, 48, 48, 1);
            //   background-color: rgba(212, 48, 48, 0.2);
            // }
          }

          .btn {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .jinji {
              padding: 3px 11px;
              background-color: rgba(212, 48, 48, 1);
              color: #fff;
              font-size: 12px;
              margin-right: 12px;
              border-radius: 3px;
            }
            .el-button {
              color: #fff;
            }

            .el-dropdown {
              margin-left: 12px;
            }
          }
        }

        .info {
          font-size: 12px;

          .item:nth-child(1) {
            margin-top: 4px;
          }

          .item {
            margin-bottom: 4px;
          }

          .plan {
            display: flex;
            align-items: center;
            :deep(.el-progress-bar) {
              width: 180px;
            }

            img {
              width: 20px;
              height: 20px;
              cursor: pointer;
              transform: translateY(-2px);
            }
          }

          .score {
            color: blueviolet;
            font-size: 18px;
          }
        }
      }
    }
    .table {
      display: flex;
      margin-bottom: 10px;
      // justify-content: space-between;
      .l_table {
        width: 48%;
        margin-right: 20px;
        .title {
          margin: 0 0 12px 0;
          font-size: 15px;
          font-weight: 600;
          color: #000;
          display: flex;
          align-items: center;
          .icon {
            display: inline-block;
            margin-right: 8px;
            width: 5px;
            height: 17px;
            opacity: 1;
            border-radius: 5px;
            background: linear-gradient(
              90deg,
              rgba(33, 107, 255, 1) 0%,
              rgba(102, 182, 255, 1) 100%
            );
          }
        }
        .el-table--fit {
          height: 280px;
          :deep(.el-table__header-wrapper) {
            background-color: #000;
            font-size: 14px;
            color: #000;

            .cell {
              color: #000;
            }
          }

          :deep(.el-table__row) {
            height: 40px;
            font-size: 14px;
            color: #000;
          }

          :deep(.el-table__row td) {
            padding: 0;
            // border: 0;
          }
        }
      }
    }
    .huizong {
      margin-bottom: 20px;
      // width: 915px;
      max-height: 400px;
      overflow: auto;
      // 整个滚动条
      &::-webkit-scrollbar-track {
        background-color: #e5e5e5;
      }
      // 滚动条的滚动区域（轨道）
      &::-webkit-scrollbar {
        background-color: #0888f8;
        height: 3px;
        width: 4px;
      }
      // 滚动条的可拖拽部分（滑块）
      // .form::-webkit-scrollbar-thumb {
      //   background: #57b2ff;
      //   border-radius: 4px;
      //   height: 3px;
      //   width: 4px;
      // }
      table {
        border-collapse: collapse;
        width: 100%;
        tr {
          td {
            width: 33%;
            height: 40px;
            text-align: center;
            border: 1px solid #ccc;
            padding: 0;
            border-collapse: collapse;
          }
        }
      }
    }
    .mingxi {
      margin-bottom: 20px;
      .el-table--fit {
        height: 280px;
        :deep(.el-table__header-wrapper) {
          background-color: #000;
          font-size: 14px;
          color: #000;

          .cell {
            color: #000;
          }
        }

        :deep(.el-table__row) {
          height: 40px;
          font-size: 14px;
          color: #000;
        }

        :deep(.el-table__row td) {
          padding: 0;
          // border: 0;
        }

        .el-button--primary {
          margin-left: 5px;
        }
      }
    }
  }
  .footer {
    width: calc(100% - 60px);
    height: calc(100% - 82px);
    margin: 10px auto 10px;

    .el-table--fit {
      height: 100%;
      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 14px;
        color: #000;

        .cell {
          color: #000;
        }
      }

      :deep(.el-table__row) {
        height: 35px;
        font-size: 14px;
        color: #000;
      }

      :deep(.el-table__row td) {
        padding: 0;
        border: 0;
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      :deep(.options) {
        display: flex;
        justify-content: center;
        align-items: center;

        .reset {
          margin-right: 15px;
          color: rgba(30, 125, 251, 1);
          cursor: pointer;
        }

        .look {
          margin-right: 15px;
          color: rgba(30, 125, 251, 1);
          cursor: pointer;
        }

        .del {
          color: rgba(212, 48, 48, 1);
          cursor: pointer;
        }
      }
    }
    .gongneng {
      margin: 15px 0;
      // .el-button {
      //   color: #fff;
      //   border: none;
      // }
      .add {
        color: #fff;
        border: none;
        background: linear-gradient(
          90deg,
          rgba(33, 107, 255, 1) 0%,
          rgba(102, 182, 255, 1) 100%
        );
      }
      .imp {
        border: 1px solid rgba(33, 107, 255, 1);
        color: rgba(33, 107, 255, 1);
      }
    }

    // 项目新增样式
    :deep(.account) {
      // height: 300px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;
        height: 32px;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 25px 30px 0 30px;
        .el-form {
          .el-form-item {
            display: flex;
            align-items: center;
          }
          .resetPassword {
            color: rgba(43, 151, 252, 1);
            padding-left: 40px;
            display: inline-block;
            margin-bottom: 15px;
          }
          .options {
            margin: 60px 0 40px 0;
            .el-form-item__content {
              display: flex;
              flex-direction: row-reverse;
              .queding {
                margin-left: 20px;
                background: linear-gradient(
                  90deg,
                  rgba(33, 107, 255, 1) 0%,
                  rgba(102, 182, 255, 1) 100%
                );
                border: none;
              }
              .quxiao {
                border: 1px solid rgba(43, 151, 252, 1);
                color: rgba(43, 151, 252, 1);
              }
            }
          }
        }
      }
    }
  }

  // 点击卡片弹窗
  :deep(.projectCard) {
    // width: 1400px;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      height: 32px;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 20px 30px 0 30px;
      height: 700px;
      overflow: auto;

      .title {
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(3, 3, 2, 1);
        letter-spacing: 1px;
      }

      .info {
        font-size: 14px;
        color: rgba(128, 128, 128, 1);
        letter-spacing: 1px;
        text-indent: 2em;
        /* 设置段落首行缩进2em */
      }

      .unit {
        display: flex;
        flex-wrap: wrap;

        .unit_i {
          font-size: 14px;
          margin-right: 25px;
          letter-spacing: 1px;

          .key {
            color: #000;
            font-weight: 500;
            margin-right: 3px;
          }

          .value {
            color: rgba(128, 128, 128, 1);
          }

          .attachment {
            color: rgba(33, 107, 255, 1);
          }
        }
      }

      .participation {
        margin-bottom: 15px;

        .el-button {
          opacity: 1;
          border-radius: 8px;
          background: rgba(166, 166, 166, 0.1);
          color: rgba(166, 166, 166, 1);
          border: 1px solid rgba(166, 166, 166, 1);
        }

        .active {
          opacity: 1;
          border-radius: 8px;
          background: rgba(0, 97, 255, 0.1);
          color: rgba(0, 97, 255, 1);
          border: 1px solid rgba(0, 97, 255, 1);
        }
      }

      .schedule {
        width: 100%;
        height: 40px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.05);
        margin: 0 0 15px 0;
        line-height: 40px;

        span:nth-child(1) {
          margin: 0 0 0 15px;
          font-size: 20px;
          font-weight: 500;
          letter-spacing: 0px;
          color: rgba(0, 0, 0, 1);
        }

        span:nth-child(2) {
          letter-spacing: 0px;
          color: rgba(0, 97, 255, 1);
        }
      }

      .el-table--fit {
        // height: 400px;
        .el-table__header-wrapper {
          background-color: #000;
          font-size: 14px;
          color: #000;

          .cell {
            color: rgba(90, 96, 127, 1);
          }
        }

        .el-table__row {
          // height: 40px;
          font-size: 14px;
          color: #000;
        }

        .el-table__row td {
          // padding: 0;
          border: 0;
        }

        .el-button--primary {
          margin-left: 5px;
        }

        :deep(.el-table__body .even) {
          background-color: #fff;
        }

        :deep(.el-table__body .odd) {
          background-color: rgba(240, 243, 247, 1);
        }

        .options {
          display: flex;
          justify-content: center;
          align-items: center;

          .edit {
            margin-right: 15px;
            color: rgba(30, 125, 251, 1);
            cursor: pointer;
          }

          .look {
            color: rgba(212, 48, 48, 1);
            cursor: pointer;
          }

          .del {
            margin-right: 15px;
            color: rgba(212, 48, 48, 1);
            cursor: pointer;
          }
        }
      }

      .search {
        background: linear-gradient(
          90deg,
          rgba(33, 107, 255, 1) 0%,
          rgba(102, 182, 255, 1) 100%
        );
        margin: 15px 0;
      }
    }
  }
  // 预览文档样式
  :deep(.previewPdf) {
    // height: 500px;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      height: 32px;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 20px;
      height: 800px;

      .main {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .home-box {
          width: 80%;
        }
      }
    }
  }

  .el-pagination {
    width: calc(100vw - 300px);
    margin: 20px auto;
    justify-content: flex-end;
    :deep(.el-pagination__total) {
      color: #000;
    }

    :deep(.el-pagination__goto) {
      color: #000;
    }

    :deep(.el-pagination__classifier) {
      color: #000;
    }

    :deep(.el-input__wrapper) {
      // border: 1px solid rgba(0, 0, 0, 1);
      // border-radius: 5px;
      // box-shadow: none;
      width: 100px;
    }

    :deep(.el-pager li) {
      margin: 0 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }

    :deep(.el-pager li.is-active) {
      // background-color: rgba(111, 182, 184, 1);
      color: rgba(0, 149, 255, 1);
      border: 1px solid rgba(0, 149, 255, 1);
    }

    :deep(.btn-prev) {
      margin-right: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }

    :deep(.btn-next) {
      margin-left: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }
  }
  .el-progress {
    :deep(.el-progress-bar__outer) {
      background-color: rgb(200, 220, 255);
    }
  }
}
</style>
