project_process_manage/src/views/home/home.vue

<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="searchInput1.department"
            placeholder="请选择部门"
            style="width: 180px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            /> </el-select
          >&nbsp;&nbsp;&nbsp;&nbsp;
          <span>时间选择：</span>
          <el-radio-group v-model="radio">
            <el-radio :value="3">最近7日</el-radio>
            <el-radio :value="6">本月</el-radio>
            <el-radio :value="9">本季度</el-radio>
            <el-radio :value="9">自定义</el-radio>
            <el-date-picker
              v-model="searchInput1.definedTime"
              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="card">
          <!-- 超时在办 -->
          <el-card style="min-width: 200px">
            <div class="title">
              <div class="block">
                <span>超时在办</span><br />
                <span class="num">6</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">6</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">6</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">6</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">6</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">6</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">项目台</div>
      <div class="participation">
        <el-button @click="deskChange(1)" :class="projectDesk==1?'active':''">我关注的</el-button>
        <el-button @click="deskChange(2)" :class="projectDesk==2?'active':''">我负责的</el-button>
        <el-button @click="deskChange(3)" :class="projectDesk==3?'active':''">我协办的</el-button>
      </div>
      <div class="condition">
        <div class="fil">
          <span>主办单位</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择主办单位"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>主办人</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择主办人"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>时间选择</span>&nbsp;&nbsp;
          <el-radio-group v-model="radio">
            <el-radio :value="3">最近7日</el-radio>
            <el-radio :value="6">本月</el-radio>
            <el-radio :value="9">本季度</el-radio>
            <el-radio :value="9">自定义</el-radio>
            <el-date-picker
              v-model="searchInput1.definedTime"
              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="searchInput1.department"
            placeholder="请选择项目等级"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>项目来源</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择项目来源"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>状态</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择状态"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <el-input
            clearable
            v-model="searchInput1.time"
            @clear="searchBtn"
            placeholder="请输入项目"
            style="width: 180px"
          />
          <el-button
            style="margin-left: 20px"
            type="primary"
            class="search"
            @click="searchBtn"
            >查询</el-button
          >
        </div>
        <div class="fil">
          <el-button type="primary" class="search" @click="addProject"
            >创建项目</el-button
          >
          <el-button @click="searchBtn" color="rgba(33, 107, 255, 1)" plain
            >批量导入</el-button
          >
          <el-button type="primary" class="search" @click="searchBtn"
            >一键催办</el-button
          >
          <el-button @click="searchBtn" color="rgba(212, 48, 48, 1)"
            >删除</el-button
          >
          <el-button type="primary" class="search" @click="searchBtn"
            >导出</el-button
          >
        </div>
      </div>
      <div class="project">
        <el-card v-for="i in 8"  @click="projectCard">
          <div class="title">
            <div class="name">
              <span>XXX项目</span>
              <span class="shewai">涉外</span>
            </div>
            <div class="btn">
              <el-button
                @click.stop=""
                size="small"
                color="rgba(212, 48, 48, 1)"
                >紧急</el-button
              >
              <el-button
                @click.stop=""
                size="small"
                color="rgba(254, 144, 51, 1)"
                >已收藏</el-button
              >
              <el-dropdown placement="bottom-start">
                <el-button
                  @click.stop=""
                  size="small"
                  color="rgba(33, 107, 255, 1)"
                  >更多</el-button
                >
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>复制</el-dropdown-item>
                    <el-dropdown-item>编辑</el-dropdown-item>
                    <el-dropdown-item @click.stop="delProject"
                      >删除</el-dropdown-item
                    >
                    <el-dropdown-item @click.stop="scoreProject"
                      >评分</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="info">
            <div class="item">主办单位：交通学院</div>
            <div class="item">主办人：周婷</div>
            <div class="item">项目周期：2024-9-25 - 2024-9-25</div>
            <div class="item">人员：张三 I 李四 I 王老五</div>
            <div class="item">任务：30个</div>
            <div class="item">预警次数：30次</div>
            <div class="item">提醒次数：30次</div>
            <div class="plan">
              <span>项目进度：</span>
              <el-progress percentage="80" color="rgba(0, 97, 255, 1)" />
              <img @click.stop="" src="../../assets/images/inform.png" alt="" />
            </div>
          </div>
        </el-card>
      </div>

      <div class="roles">问题清单</div>
      <div class="participation">
        <el-button @click="issueListChange(1)" :class="issueList==1?'active':''">我关注的</el-button>
        <el-button @click="issueListChange(2)" :class="issueList==2?'active':''">我负责的</el-button>
        <el-button @click="issueListChange(3)" :class="issueList==3?'active':''">我协办的</el-button>
      </div>
      <div class="condition">
        <div class="fil">
          <span>主办单位</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择主办单位"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>主办人</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择主办人"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>协办单位</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择协办单位"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>协办人</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择协办人"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>时间选择</span>&nbsp;&nbsp;
          <el-radio-group v-model="radio">
            <el-radio :value="3">最近7日</el-radio>
            <el-radio :value="6">本月</el-radio>
            <el-radio :value="9">本季度</el-radio>
            <el-radio :value="9">自定义</el-radio>
            <el-date-picker
              v-model="searchInput1.definedTime"
              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="searchInput1.department"
            placeholder="请选择项目等级"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>项目来源</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择项目来源"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>状态</span>&nbsp;&nbsp;
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择状态"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <el-input
            clearable
            v-model="searchInput1.time"
            @clear="searchBtn"
            placeholder="请输入项目"
            style="width: 180px"
          />
          <el-button
            style="margin-left: 20px"
            type="primary"
            class="search"
            @click="searchBtn"
            >查询</el-button
          >
        </div>
        <div class="fil">
          <el-button type="primary" class="search" @click="searchBtn"
            >一键催办</el-button
          >
          <el-button type="primary" class="search" @click="searchBtn"
            >导出</el-button
          >
        </div>
      </div>
      <div class="project">
        <el-card v-for="i in 8"  @click="projectCard">
          <div class="title">
            <div class="name">
              <span>XXX项目</span>
              <span class="shewai">涉外</span>
            </div>
            <div class="btn">
              <el-button
                @click.stop=""
                size="small"
                color="rgba(212, 48, 48, 1)"
                >紧急</el-button
              >
              <el-button
                @click.stop=""
                size="small"
                color="rgba(254, 144, 51, 1)"
                >已收藏</el-button
              >
              <el-dropdown placement="bottom-start">
                <el-button
                  @click.stop=""
                  size="small"
                  color="rgba(33, 107, 255, 1)"
                  >更多</el-button
                >
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>复制</el-dropdown-item>
                    <el-dropdown-item>编辑</el-dropdown-item>
                    <el-dropdown-item @click.stop="delProject"
                      >删除</el-dropdown-item
                    >
                    <el-dropdown-item @click.stop="scoreProject"
                      >评分</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="info">
            <div class="item">主办单位：交通学院</div>
            <div class="item">主办人：周婷</div>
            <div class="item">项目周期：2024-9-25 - 2024-9-25</div>
            <div class="item">人员：张三 I 李四 I 王老五</div>
            <div class="item">任务：30个</div>
            <div class="item">预警次数：30次</div>
            <div class="item">提醒次数：30次</div>
            <div class="plan">
              <span>项目进度：</span>
              <el-progress percentage="80" color="rgba(0, 97, 255, 1)" />
              <img @click.stop="" src="../../assets/images/inform.png" alt="" />
            </div>
          </div>
        </el-card>
      </div>

      <div class="roles" style="padding-bottom: 0">部门排行榜</div>
      <div class="condition">
        <div class="fil">
          <el-select
            v-model="searchInput1.department"
            placeholder="请选择主办单位"
            style="width: 160px"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in departmentData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="fil">
          <span>时间选择</span>&nbsp;&nbsp;
          <el-radio-group v-model="radio">
            <el-radio :value="3">最近7日</el-radio>
            <el-radio :value="6">本月</el-radio>
            <el-radio :value="9">本季度</el-radio>
            <el-radio :value="9">自定义</el-radio>
            <el-date-picker
              v-model="searchInput1.definedTime"
              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">
          <el-input
            clearable
            v-model="searchInput1.time"
            @clear="searchBtn"
            placeholder="请输入项目"
            style="width: 180px"
          />
          <el-button
            style="margin-left: 20px"
            type="primary"
            class="search"
            @click="searchBtn"
            >查询</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="tableData.list"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '30px',
              border: 0,
            }"
          >
            <el-table-column align="center" prop="createTime" label="排行" />
            <el-table-column
              align="center"
              prop="createTime"
              label="部门名称"
            />
            <el-table-column align="center" prop="createUser" label="分数" />
          </el-table>
        </div>
        <div class="l_table">
          <div class="title"><span class="icon"></span>完成率排行榜</div>
          <el-table
            :data="tableData.list"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '30px',
              border: 0,
            }"
          >
            <el-table-column align="center" prop="createTime" label="排行" />
            <el-table-column
              align="center"
              prop="createTime"
              label="部门名称"
            />
            <el-table-column align="center" prop="createUser" 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="searchInput1.department"
              placeholder="请选择主办单位"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>协办单位</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择协办单位"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>时间选择</span>&nbsp;&nbsp;
            <el-radio-group v-model="radio">
              <el-radio :value="3">最近7日</el-radio>
              <el-radio :value="6">本月</el-radio>
              <el-radio :value="9">本季度</el-radio>
              <el-radio :value="9">自定义</el-radio>
              <el-date-picker
                v-model="searchInput1.definedTime"
                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="searchInput1.department"
              placeholder="请选择项目等级"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>项目来源</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择项目来源"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>状态</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择状态"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <el-input
              clearable
              v-model="searchInput1.time"
              @clear="searchBtn"
              placeholder="请输入项目"
              style="width: 180px"
            />
            <el-button
              style="margin-left: 20px"
              type="primary"
              class="search"
              @click="searchBtn"
              >查询</el-button
            >
          </div>
          <div class="fil">
            <el-button type="primary" class="search" @click="searchBtn"
              >导出</el-button
            >
          </div>
        </div>
        <div class="huizong">
          <table>
            <tr>
              <td rowspan="2">校办</td>
              <td>提醒次数</td>
              <td>预警次数</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
      <div v-show="warningFlag == 2">
        <div class="condition">
          <div class="fil">
            <span>主办单位</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择主办单位"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>主办人</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择主办人"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>协办单位</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择协办单位"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>协办人</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择协办人"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>时间选择</span>&nbsp;&nbsp;
            <el-radio-group v-model="radio">
              <el-radio :value="3">最近7日</el-radio>
              <el-radio :value="6">本月</el-radio>
              <el-radio :value="9">本季度</el-radio>
              <el-radio :value="9">自定义</el-radio>
              <el-date-picker
                v-model="searchInput1.definedTime"
                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="searchInput1.department"
              placeholder="请选择项目等级"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>项目来源</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择项目来源"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <span>状态</span>&nbsp;&nbsp;
            <el-select
              v-model="searchInput1.department"
              placeholder="请选择状态"
              style="width: 160px"
              clearable
              @clear="searchBtn"
            >
              <el-option
                v-for="item in departmentData"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="fil">
            <el-input
              clearable
              v-model="searchInput1.time"
              @clear="searchBtn"
              placeholder="请输入项目"
              style="width: 180px"
            />
            <el-button
              style="margin-left: 20px"
              type="primary"
              class="search"
              @click="searchBtn"
              >查询</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="tableData.list"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
              border: 0,
            }"
          >
            <el-table-column align="center" prop="createTime" label="项目" />
            <el-table-column align="center" prop="createTime" label="任务" />
            <el-table-column align="center" prop="createUser" label="类型" />
            <el-table-column
              align="center"
              prop="createUser"
              label="发生时间"
            />
            <el-table-column align="center" prop="createTime" label="部门" />
            <el-table-column align="center" prop="createTime" label="姓名" />
          </el-table>
        </div>
      </div>
    </div>

    <!-- 新建项目 -->
    <el-dialog
      class="project"
      v-model="projectVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="projectTitle"
      align-center
      width="600"
      :before-close="cancelProject"
    >
      <el-form
        ref="projectRef"
        :model="projectRuleForm"
        :rules="projectRules"
        class="demo-ruleForm"
        label-width="80px"
        :size="formSize"
        label-position="right"
        status-icon
      >
        <el-form-item label="项目名称" prop="name">
          <el-input
            v-model="projectRuleForm.name"
            @clear="searchBtn"
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="项目描述" prop="describe">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 8 }"
            v-model="projectRuleForm.describe"
            placeholder="请输入描述"
            clearable
          />
        </el-form-item>
        <el-form-item label="上传附件" prop="attachment">
          <el-input
            v-model="projectRuleForm.attachment"
            placeholder="请上传附件"
          >
            <!-- <template #prepend>
              <el-button :icon="Search" />
            </template> -->
            <template #append>
              <el-button
                style="
                  width: 100px;
                  background-color: rgba(33, 107, 255, 1);
                  color: #fff;
                "
                >上传</el-button
              >
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="主办单位" prop="sponsor">
          <el-select
            v-model="projectRuleForm.sponsor"
            placeholder="请选择主办单位"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in sponsorData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="协办单位" prop="coorganizer">
          <el-select
            v-model="projectRuleForm.coorganizer"
            placeholder="请选择协办单位"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in coorganizerData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目来源" prop="source">
          <el-select
            v-model="projectRuleForm.source"
            placeholder="请选择部门"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in sourceData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目等级" prop="level">
          <el-select
            v-model="projectRuleForm.level"
            placeholder="请选择部门"
            clearable
            @clear="searchBtn"
          >
            <el-option
              v-for="item in levelData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="options">
          <el-button
            class="queding"
            type="primary"
            @click="confirmProject(projectRef)"
          >
            &nbsp;&nbsp;确认&nbsp;&nbsp;
          </el-button>
          <el-button class="quxiao" @click="cancelProject"
            >&nbsp;&nbsp;取消&nbsp;&nbsp;</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 评分 -->
    <el-dialog
      class="project"
      v-model="scoreVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="评分"
      align-center
      width="600"
      :before-close="cancelScore"
    >
      <el-form
        ref="scoreRef"
        :model="scoreRuleForm"
        :rules="scoreRules"
        class="demo-ruleForm"
        label-width="60px"
        :size="formSize"
        label-position="right"
        status-icon
      >
        <el-form-item label="评价" prop="describe">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            v-model="scoreRuleForm.describe"
            placeholder="请输入评价"
            clearable
          />
        </el-form-item>
        <el-form-item label="评分" prop="num">
          <el-input
            v-model="scoreRuleForm.num"
            @clear="searchBtn"
            placeholder="请输入评分"
          />
        </el-form-item>
        <el-form-item class="options">
          <el-button
            class="queding"
            type="primary"
            @click="confirmScore(scoreRef)"
          >
            &nbsp;&nbsp;确认&nbsp;&nbsp;
          </el-button>
          <el-button class="quxiao" @click="cancelScore"
            >&nbsp;&nbsp;取消&nbsp;&nbsp;</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 点击卡片弹窗 -->
    <el-dialog
      class="projectCard"
      v-model="cardVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="cardTitle"
      align-center
      width="1200"
      :before-close="cancelCard"
    >
      <div>
        <div class="title">项目情况</div>
        <div class="info">
          省教育体制改革领导小组办公室《关于配合估好教育部督察组赴我省开展2018年度教育改革重点督查迎检有关工作的通知》
          省教育体制改革领导小组办公室《关于配合估好教育部督察组赴我省开展2018年度教育改革重点督查迎检有关工作的通知》省教育体制改革领导小组办公室《关于配合估好教育部督察组赴我省开展2018年度教育改革重点督查迎检有关工作的通知》省教育体制改革领导小组办公室《关于配合估好教育部督察组赴我省开展2018年度教育改革重点督查迎检有关工作的通知》省教育体制改革领导小组办公室《关于配合估好教育部督察组赴我省开展2018年度教育改革重点督查迎检有关工作的通知》
        </div>
        <el-divider />
        <div class="unit">
          <div class="unit_i">
            <span class="key">主办单位 :</span>
            <span class="value">全校</span>
          </div>
          <div class="unit_i">
            <span class="key">主办人 :</span>
            <span class="value">全校</span>
          </div>
          <div class="unit_i">
            <span class="key">协办单位 :</span>
            <span class="value">全校</span>
          </div>
          <div class="unit_i">
            <span class="key">协办人 :</span>
            <span class="value">全校</span>
          </div>
          <div class="unit_i">
            <span class="key">分管领导 :</span>
            <span class="value">全校</span>
          </div>
          <div class="unit_i">
            <span class="key">项目周期 :</span>
            <span class="value">全校</span>
          </div>
          <div class="unit_i">
            <span class="key">项目等级 :</span>
            <span class="value">全校</span>
          </div>
          <div class="unit_i">
            <span class="key">项目来源 :</span>
            <span class="value">全校</span>
          </div>
        </div>
        <div class="unit" style="margin: 10px 0 20px">
          <div class="unit_i">
            <span class="key">附件 :</span>
            <span class="attachment">xxx文档</span>
          </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>任务进度分（权重60%）</span>
            <!-- <span>（注：评分维度为：任务完成质量40%）</span> -->
          </div>
          <el-table
            :row-class-name="tableRowClassName"
            :data="tableData.list"
            @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="createTime"
              label="任务名称"
            />
            <el-table-column align="center" prop="createTime" label="附件" />
            <el-table-column align="center" prop="createUser" label="状态" />
            <el-table-column align="center" prop="createUser" label="进度" />
            <el-table-column
              align="center"
              prop="createUser"
              label="起止时间"
            />
            <el-table-column
              align="center"
              prop="createUser"
              label="提醒时间"
            />
            <el-table-column
              align="center"
              prop="createUser"
              label="预警时间"
            />
            <el-table-column
              align="center"
              prop="createTime"
              label="完成时间"
            />
            <el-table-column
              align="center"
              prop="createTime"
              label="完成备注"
            />
            <el-table-column
              align="center"
              prop="createTime"
              label="评价标准"
            />
            <el-table-column align="center" prop="createTime" label="权重" />
            <el-table-column
              align="center"
              prop="createTime"
              label="任务负责人"
            />
            <el-table-column
              align="center"
              prop="createTime"
              label="评分上限"
            />
            <el-table-column align="center" prop="createTime" label="系统" />
            <el-table-column align="center" label="操作" width="220">
              <template #default="scope">
                <div class="options">
                  <div class="edit" @click="edit(scope.row)">编辑</div>
                  <el-popconfirm
                    width="200"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否删除此数据?"
                    @confirm="del(scope.row)"
                    @cancel="cancelEvent"
                  >
                    <template #reference>
                      <div class="del">删除</div>
                    </template>
                  </el-popconfirm>
                  <el-popconfirm
                    width="200"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否对此项目催办?"
                    @confirm="del(scope.row)"
                    @cancel="cancelEvent"
                  >
                    <template #reference>
                      <div class="look">催办</div>
                    </template>
                  </el-popconfirm>
                  <div class="edit" @click="updateClick(scope.row)">更新进度</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" class="search" @click="searchBtn"
            >添加任务</el-button
          >
          <el-button type="primary" class="search" @click="searchBtn"
            >评分</el-button
          >
        </div>
        <div v-if="logFlag == 2">
          <el-table
            :row-class-name="tableRowClassName"
            :data="tableData.list"
            @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="createTime"
              label="任务名称"
            />
            <el-table-column align="center" prop="createTime" label="附件" />
            <el-table-column align="center" prop="createTime" label="内容" />
            <el-table-column
              align="center"
              prop="createTime"
              label="发生时间"
            />
            <el-table-column align="center" prop="createTime" label="操作人" />
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 更新进度 -->
    <el-dialog
      class="project"
      v-model="updateVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="更新进度"
      align-center
      width="600"
      :before-close="cancelUpdate"
    >
      <el-form
        ref="updateRef"
        :model="updateRuleForm"
        :rules="updateRules"
        class="demo-ruleForm"
        label-width="80px"
        :size="formSize"
        label-position="right"
        status-icon
      >
        <el-form-item label="完成备注" prop="remark">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            v-model="updateRuleForm.remark"
            placeholder="请输入备注"
            clearable
          />
        </el-form-item>
        <el-form-item label="上传附件" prop="attachment">
          <el-input
            v-model="updateRuleForm.attachment"
            placeholder="请上传附件"
          >
            <!-- <template #prepend>
              <el-button :icon="Search" />
            </template> -->
            <template #append>
              <el-button
                style="
                  width: 100px;
                  background-color: rgba(33, 107, 255, 1);
                  color: #fff;
                "
                >上传</el-button
              >
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="options">
          <el-button
            class="queding"
            type="primary"
            @click="confirmUpdate(updateRef)"
          >
            &nbsp;&nbsp;确认&nbsp;&nbsp;
          </el-button>
          <el-button class="quxiao" @click="cancelUpdate"
            >&nbsp;&nbsp;取消&nbsp;&nbsp;</el-button
          >
        </el-form-item>
      </el-form>
    </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 tableData = reactive({
  list: [{}],
});
// 项目台
const projectDesk=ref(1);

// 问题清单
const issueList=ref(1)

const searchInput1 = reactive({
  time: "", // 时间
  department: "", // 部门
  definedTime: "", // 自定义时间
}); // 搜索按钮数据
const departmentData = ref(); // 部门数据

// 预警消息推送汇总 （汇总）(//////////////////////////////////////////////////////////)
const warningFlag = ref(1);
// （明细）
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 projectRuleForm = reactive({
  name: "", // 名称
  describe: "", // 描述
  attachment: "", // 附件
  sponsor: "", // 主办单位
  coorganizer: "", // 协办单位
  source: "", // 项目来源
  level: "", // 项目等级
  id: "",
});
// 新建项目表单验证
const projectRules = reactive({
  name: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
  describe: [{ required: true, message: "项目描述不能为空", trigger: "blur" }],
  attachment: [{ required: true, message: "附件不能为空", trigger: "blur" }],
  sponsor: [{ required: true, message: "主办单位不能为空", trigger: "blur" }],
  coorganizer: [
    { required: true, message: "协办单位不能为空", trigger: "blur" },
  ],
  source: [{ required: true, message: "项目来源不能为空", trigger: "blur" }],
  level: [{ required: true, message: "项目等级不能为空", trigger: "blur" }],
});

// 评分 (===========================================================)
const scoreVisible = ref(false);
const scoreRef = ref();
const scoreRuleForm = reactive({
  describe: "", // 描述
  num: "", // 名称
  id: "",
});
// 评分表单验证
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); // 项目进度 || 项目日志

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

// 获取账户列表
const getList = async () => {
  loading.value = true;
  let data = {
    currentPage: currentPage.value, // 当前页
    pageCount: pageSize.value, // 一页数据条数
    projectName: searchInput.name,
    pageType: 1,
    permitNum: searchInput.LicenseCode, // 施工许可证编码
    projectUnit: searchInput.unit, // 建设单位
    projectPurpose: searchInput.purpose, // 项目用途
    structureType: searchInput.structureType, // 结构类型
    projectType: searchInput.projectType, // 项目类型
  };

  if (searchInput.createTime) {
    data.startDate = searchInput.createTime[0];
    data.endDate = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/jgcloudProject/queryPageJgcloudProject",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "项目分页数据");
  if (res.data.code == 200) {
    tableData.list = res.data.data.list;
    total.value = res.data.data.totalCount;
    loading.value = false;
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

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

// 项目台
const deskChange=(val)=>{
  projectDesk.value=val
}

// 问题清单
const issueListChange=(val)=>{
  issueList.value=val
}

// 添加考核维度 (==============================================================)
const addProjectbtn = () => {
  accountVisible.value = true;
  accountTitle.value = "添加考核维度";
};
// 取消添加考核维度
const cancelAccount = () => {
  accountVisible.value = false;
  accountRef.value.resetFields();
};

// 点击项目卡片 (++++++++++++++++++++++++++++++++++++++++++++++++++)
const projectCard = () => {
  cardVisible.value = true;
};
const cancelCard = () => {
  cardVisible.value = false;
};
// 项目进度 || 项目日志 切换
const logChange = (val) => {
  logFlag.value = val;
};

// 新建项目 （-----------------------------------------------------------------）
const addProject = () => {
  projectVisible.value = true;
  projectTitle.value = "新建项目";
};
// 确定新建项目
const confirmProject = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      // 判断是否有id存在，有则是修改账号
      // if (accountRuleForm.id) {
      //   data.id = accountRuleForm.id;
      //   res = await axios({
      //     method: "post",
      //     url: api.value + "/jgcloudAccount/updateJgcloudAccount",
      //     headers: {
      //       tokenP: sessionStorage.getItem("tokenP"),
      //       user_head: sessionStorage.getItem("userhead"),
      //     },
      //     data: data,
      //   });
      // } else {
      //   res = await axios({
      //     method: "post",
      //     url: api.value + "/jgcloudAccount/insertJgcloudAccount",
      //     headers: {
      //       tokenP: sessionStorage.getItem("tokenP"),
      //       user_head: sessionStorage.getItem("userhead"),
      //     },
      //     data: data,
      //   });
      // }
      // console.log(data, "添加账号参数");
      // console.log(res, "新增账号数据");
      // if (res.data.code == 200) {
      //   accountVisible.value = false;
      //   getList();
      //   accountRef.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 cancelProject = () => {
  projectVisible.value = false;
  projectRef.value.resetFields();
};

//编辑项目
const edit = (row) => {
  projectVisible.value = true;
  projectTitle.value = "编辑项目";
  console.log(row);
};

// 删除项目
const delProject = () => {
  console.log("删除项目");
  ElMessageBox.confirm("确定要删除项目xxxx吗？", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "Delete completed",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

// 评分 (==========================================================)
const scoreProject = () => {
  scoreVisible.value = true;
};
// 确定评分
const confirmScore = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
    }
  });
};
// 取消评分
const cancelScore = () => {
  scoreVisible.value = false;
  scoreRef.value.resetFields();
};

// 更新进度 (00000000000000000000000000000000000000000000000000000000)
const updateClick = () => {
  updateVisible.value = true;
};
// 确定更新进度
const confirmUpdate = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
    }
  });
};
// 取消更新进度
const cancelUpdate = () => {
  updateVisible.value = false;
  updateRef.value.resetFields();
};

// 多选框功能
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 "";
};
// 每页显示条数
const handleSizeChange = (value) => {
  console.log(value, "每页显示条数");
  pageSize.value = value;
  getList();
};
// 分页
const handleCurrentChange = (value) => {
  console.log(value, "分页");
  currentPage.value = value;
  getList();
};

// 预警消息推送汇总 （汇总）
const warningClick = (val) => {
  warningFlag.value = val;
};

onBeforeMount(() => {
  api.value = store.state.user.api;
});
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;
    .roles {
      color: #000;
      padding: 10px 0 10px 0;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .participation {
      .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: 229px;
        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;
            font-weight: 600;
            .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);
            }
          }
          .btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .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;
            :deep(.el-progress-bar) {
              width: 180px;
            }
            img{
              width: 20px;
              height: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .table {
      display: flex;
      margin-bottom: 10px;
      // justify-content: space-between;
      .l_table {
        width: 467px;
        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;
      table {
        border-collapse: collapse;
        tr {
          td {
            width: 300px;
            height: 46px;
            text-align: center;
            border: 1px solid #ccc;
            padding: 0;
            border-collapse: collapse;
          }
        }
      }
    }
    .mingxi {
      margin-bottom: 20px;
      .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: 50px;
          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(.project) {
    // 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: 30px 30px 0 30px;
      .el-form {
        .el-form-item {
          .el-input {
            width: 460px;
            .el-input-group__append {
              // padding: 0;
            }
          }
          .el-textarea {
            width: 460px;
          }
        }
        .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: 1200px;
    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;
        .unit_i {
          font-size: 14px;
          margin-right: 12px;
          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;
      }
    }
  }

  .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>