<script setup name="digitalCockpit">
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
import NoData from '@/components/noData/index.vue'
import { storeToRefs } from 'pinia'
import store from '@/store'
import { toDoCenterList } from '@/http/apis/toDoCenter/todoList'
import { detail } from '@/http/apis/systemManage/noticeManage.js'
import { useRouter } from 'vue-router'
import { dashboardList, getWorkbenchData, guidancDetail, urging } from '@/http/apis/home'
import moment from 'moment'
import { listReviewProject } from '@/http/apis/expertManage/expertReview'
import InitialBootDialog from '@/pages/home/components/initialBootDialog.vue'
import * as echarts from 'echarts'
import { intervalTime } from '@/utils/getTimeDiffer'
import MeetingsLeaveDialog from '@/pages/expertManage/expertReview/components/meetingsLeaveDialog.vue'
import UpLoadReplayDialog from '@/pages/performanceEvaluation/inquirySheetManage/componets/upLoadReplayDialog.vue'
import RectifyDialog from '@/pages/performanceEvaluation/projectReform/reformProjectList/components/rectifyDialog.vue'
import { doAudit } from '@/http/apis/performanceEvaluation/inquirySheetManage'
import UpLoadZxDialog from '@/pages/performanceEvaluation/inquirySheetManage/componets/upLoadZxDialog.vue'
const router = useRouter(),
  userInfo = storeToRefs(store.userStore).userInfo || {},
  { statusOptions, businessTerritory, bxDataOptions } =
  store.dictStore.globalDicts || {},
  { proxy } = getCurrentInstance(),
  dialogVisible = ref(false),
  dialogVisible2 = ref(false),
  monitorList = ref([]),
  time = ref(new Date()),
  viewMore = () => {
    router.push({ name: 'projectStore' })
  },
  handleClick = (val) => {
    activeName2.value = val
    getTableData1()
  },
  activeName = ref('ANNOUNCEMENT'),
  tableListRef1 = ref(),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '公告标题',
      key: 'title',
      prop: 'title',
      width: '250'
    },
    {
      label: '发布时间',
      key: 'createOn',
      prop: 'createOn',
      minWidth: '180',
      showOverflowTooltip: true
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ]),
  activeName2 = ref('2'),
  total1 = ref(0),
  data1 = ref([]),
  getTableData1 = async (pageParams = tableListRef1.value?.pageParams) => {
    const res = await dashboardList({
      type: activeName2.value,
      ...pageParams
    })
    data1.value = res.data.records
    total1.value = res.data.total
  },
  MonitorRadio = ref('1'),
  // 查看项目详情
  checkDetail = (item) => {
    router.push({ name: 'projectDetail', query: { id: item.id }})
  },
  // 获取待办处理
  toDoActiveName = ref(['1', '3']),
  toDoHandleClick = (index, val) => {
    toDoActiveName.value[index] = val
    getHandlerList(val)
  },
  handlerList = ref({
    1: [],
    2: [],
    3: [],
    4: []
  }),
  handlerTotal = ref(0),
  getHandlerList = async (state) => {
    handlerList.value[state] = []
    const res = await toDoCenterList(state, {
      pageNumber: 1,
      pageSize: 5
    })
    handlerList.value[state] = res.data.records
    handlerTotal.value = state === '1' ? res.data.total : handlerTotal.value
  },
  routeName = {
    1: 'waitMeToHandle',
    2: 'haveHandled',
    3: 'initiatedByMe',
    4: 'copyMine'
  },
  viewTodoMore = (key) => {
    router.push({ name: routeName[key] })
  },
  reviewActiveName = ref('1'),
  expertReviewHandleClick = (val) => {
    reviewActiveName.value = val
    getExpertHandlerList()
  },
  expertHandlerList = ref([]),
  getExpertHandlerList = async () => {
    const res = await listReviewProject({
      pageNumber: 1,
      pageSize: 5,
      reviewed: reviewActiveName.value !== '1',
      userId: userInfo.value.userId
    })
    expertHandlerList.value = res.data.records
  },
  // 查看公告
  noticeDetail = ref(),
  releaseTiming = ref(),
  showNoticeList = () => {
    dialogVisible2.value = true
    getTableData1()
  },
  checkNoticeDetail = async ({ id, createOn }) => {
    const res = await detail(id)
    noticeDetail.value = res.data
    releaseTiming.value = createOn
    dialogVisible.value = true
  },
  // 公告列表
  noticeList = ref(),
  // 单位申报项目统计数据
  orgDeclared = ref(),
  // 项目动态
  projectList = ref(),
  // 待办中心数据
  todoCerter = ref(),
  // 获取工作台数据
  declaredData = ref(),
  projectEarlyWarning = ref(),
  getWorkbenchDataFun = async () => {
    const res = await getWorkbenchData({ year: moment(time.value).format('YYYY') })
    noticeList.value = res.data?.noticeList || []
    declaredData.value = userInfo.value?.userRoleInfoList?.filter(i => i.code === 'SUPER_ADMIN' || i.code === 'REGION_MANAGER')?.length ? res.data?.regionDeclared : res.data?.orgDeclared
    orgDeclared.value = res.data?.orgDeclared
    projectList.value = res.data?.projects
    todoCerter.value = res.data?.todoCerter
    projectEarlyWarning.value = res.data?.projectEarlyWarning
    performanceData.value = res.data?.performanceData
    getIsShowBox(['SUPER_ADMIN', 'REGION_MANAGER', 'VISITOR']) && initChart()
    pageLoading.value = false
  },
  // 用户引导弹窗
  initVisible = ref(false),
  initData = ref([])
// 区域项目总览
let pieChart
const pieChartRef = ref(),
  initChart = () => {
    if (!pieChart) pieChart = echarts.init(pieChartRef.value)
    const colorList = ['#007FED', '#78C0FF']
    const option = {
      legend: {
        show: false
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: declaredData.value?.buildNum || 0
            },
            {
              value: declaredData.value?.operationNum || 0
            }
          ],
          itemStyle: {
            color: function (params) {
              return colorList[params.dataIndex]
            }
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      ]
    }
    pieChart.setOption(option)
  },
  // 项目监测
  typeAvtiveName = ref('accumulate'),
  changeType = (val) => {
    typeAvtiveName.value = val
  },
  deActiveName = ref('1'),
  getIsShowBox = (roles) => {
    let flag = false
    roles.forEach(i => {
      if (userInfo.value.userRoleInfoList?.map(j => j.code).includes(i)) {
        flag = true
      }
    })
    return flag
  },
  cb = (item) => {
    proxy.$messageBox
      .confirm(`是否催办?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await urging(item.recordId)
        proxy.$message.success(`催办成功！`)
      })
  },
  toCl = (item) => {
    console.log(item.path)
    window.location.href = window.location.origin + '/' + item.path
  },
  byIndex = ref(0),
  pageLoading = ref(true),
  toHandle = (item) => {
    if (toDoActiveName.value[0] === '1') {
      if (item.processStatusName !== '被退回') {
        router.push({ name: 'handleDuringExamine', query: { instanceId: item.instCode, projectId: item.projectId, nodeId: item.nodeId, taskId: item.taskId }})
      } else {
        router.push({ name: 'handleAfterGiveBack', query: { instanceId: item.instCode, projectId: item.projectId, nodeId: item.nodeId, taskId: item.taskId }})
      }
    } else {
      router.push({ name: toDoActiveName.value[0] === '2' ? 'haveHandledDetail' : toDoActiveName.value[0] === '3' ? 'initiatedByMeDetail' : 'copyMineDetail', query: { instanceId: item.instCode, projectId: item.projectId, nodeId: item.nodeId, taskId: item.taskId }})
    }
  },
  // 会议请假
  meetingsLeaveDialogData = reactive({
    visible: false
  }),
  showMeetingsLeaveDialog = () => {
    meetingsLeaveDialogData.visible = true
  },
  closeMeetingsLeaveDialog = () => {
    meetingsLeaveDialogData.visible = false
  },
  // 绩效模块
  jxActiveName = ref(['tobeSelfAppraisalList', 'tobeReAppraisalList', 'tobeVerifyList']),
  performanceData = ref(),
  tabsOptions = {
    1: [
      {
        name: '待我评价',
        key: 'tobeSelfAppraisalList',
        btn: '自评打分',
        pathName: 'selfGiveScore',
        btnQuery: ['appraisalId', 'projectCode', 'projectId', 'status'],
        morePath: 'selfEvaluation'
      },
      {
        name: '我已评价',
        key: 'selfAppraisaledList',
        btn: '查看',
        pathName: 'selfScoreDetail',
        btnQuery: ['appraisalId', 'projectCode', 'projectId', 'instanceId'],
        morePath: 'selfEvaluation',
        moreQuery: ['tab']
      },
      {
        name: '上传回复单',
        key: 'tobeUploadFormList',
        btn: '上传回复单',
        morePath: 'inquirySheetManage'
      },
      {
        name: '待我整改',
        key: 'tobeRectifyList',
        btn: '处理',
        morePath: 'projectReform'
      }
    ],
    2: [
      {
        name: '待我复评',
        key: 'tobeReAppraisalList',
        btn: '复评',
        pathName: 'reviewGiveScore',
        btnQuery: ['appraisalId', 'projectCode', 'projectId', 'canReAppraisal', 'groupId'],
        morePath: 'projectReview'
      },
      {
        name: '我已复评',
        key: 'reAppraisaledList',
        btn: '查看',
        pathName: 'reviewScoreDetail',
        btnQuery: ['appraisalId', 'projectCode', 'projectId', 'groupId'],
        morePath: 'projectReview'
      },
      {
        name: '回复单审核',
        key: 'tobeAuditFormList',
        btn: '审核',
        morePath: 'inquirySheetManage'
      }
    ],
    3: [
      {
        name: '待我核查',
        key: 'tobeVerifyList',
        btn: '核查',
        pathName: 'checkGiveScore',
        btnQuery: ['appraisalId', 'projectCode', 'projectId', 'groupId', 'canRectify'],
        morePath: 'expertVerification'
      },
      {
        name: '我已核查',
        key: 'verifiedList',
        btn: '查看',
        pathName: 'checkScoreDetail',
        btnQuery: ['appraisalId', 'projectCode', 'projectId', 'groupId'],
        morePath: 'expertVerification'
      },
      {
        name: '整改确认',
        key: 'rectifiedList',
        btn: '审核',
        pathName: 'reformCheckHandle',
        btnQuery: ['appraisalId', 'projectCode', 'projectId'],
        morePath: 'reformCheck'
      }
    ]
  },
  toJx = (index, activeName, item, other) => {
    const data = tabsOptions[index]?.find(i => i.key === activeName)
    if (activeName === 'tobeUploadFormList') {
      upload(item)
    } else if (activeName === 'tobeRectifyList') {
      showDialogRec(item)
    } else if (activeName === 'tobeAuditFormList') {
      if (other === 4) {
        proxy.$messageBox
          .confirm(`是否通过?`, '提示！', {
            type: 'warning'
          })
          .then(async () => {
            await doAudit({
              formId: item.id,
              status: other
            })
            proxy.$message.success(`通过成功！`)
            getWorkbenchDataFun()
          })
      } else {
        uploadZxDialogData.visible = true
        uploadZxDialogData.data = item
      }
    } else {
      const query = {}
      data.btnQuery?.forEach(i => {
        if (i === 'instanceId') {
          query[i] = item['instCode']
        } else if (i === 'canReAppraisal' || i === 'canRectify') {
          query[i] = true
        } else {
          query[i] = item[i]
        }
      })
      router.push({ name: data.pathName, query })
    }
  },
  viewJxMore = (index, activeName) => {
    const data = tabsOptions[index]?.find(i => i.key === activeName)
    if (activeName === 'selfAppraisaledList') {
      router.push({ name: data.morePath, query: { tab: 3 }})
    } else {
      router.push({ name: data.morePath })
    }
  },
  // 审核
  uploadZxDialogData = reactive({
    visible: false,
    data: undefined
  }),
  closeUpZ = (flag) => {
    uploadZxDialogData.visible = false
    flag && getWorkbenchDataFun()
  },
  // 上传回复单
  uploadReplayDialogData = reactive({
    visible: false,
    data: undefined
  }),
  upload = (row) => {
    uploadReplayDialogData.visible = true
    uploadReplayDialogData.data = row
  },
  closeUpR = (flag) => {
    uploadReplayDialogData.visible = false
    flag && getWorkbenchDataFun()
  },
  // 整改
  rectifyDialogData = reactive({
    visible: false,
    data: undefined,
    isEdit: true
  }),
  showDialogRec = async (row) => {
    rectifyDialogData.isEdit = true
    rectifyDialogData.data = row
    rectifyDialogData.visible = true
  },
  closeRec = (flag) => {
    rectifyDialogData.visible = false
    flag && getWorkbenchDataFun()
  }
onMounted(async () => {
  setInterval(() => {
    if (byIndex.value < bxDataOptions.length - 1) {
      byIndex.value++
    } else {
      byIndex.value = 0
    }
  }, 10000)
  getHandlerList('1')
  getHandlerList('3')
  getExpertHandlerList()
  getWorkbenchDataFun()
  const roleIds = userInfo.value.userRoleInfoList?.map(i => i.code)
  if (['SUPER_ADMIN', 'REGION_MANAGER', 'COMPANY_MANAGER'].some((item) => roleIds.includes(item))) {
    const res = await guidancDetail()
    initVisible.value = !(res.data?.isAllFinished)
    initData.value = res.data?.details
  }
})
</script>

<template>
  <div v-if="false" class="home">
    <div class="taskInfo">
      <el-row :gutter="32" class="h-full">
        <el-col :span="6">
          <div class="flex flex-col justify-between h-full">
            <div>
              <div class="info w-full mb-40">
                <div class="userInfo">
                  <el-avatar
                    :src="userInfo.avatar"
                    size="large"
                    class="flex-shrink-0"
                  />
                  <div class="ml-8 flex flex-col">
                    <div class="flex items-center">
                      <span class="mr-8">您好，{{ userInfo.realName }}</span>
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="`${userInfo?.userRoleInfoList?.map(i=>i.name).join('、')}`"
                        placement="top-start"
                      >
                        <el-button size="small" type="success" style="padding: 2px 4px">
                          <div class="flex items-center">
                            <span>用户角色</span>
                            <el-icon class="ml-2"><QuestionFilled /></el-icon>
                          </div>
                        </el-button>
                      </el-tooltip>
                    </div>
                    <p class="text-12 mt-8">
                      {{ userInfo.regionName }}-{{ userInfo.empPosUnitName }}
                    </p>
                  </div>
                </div>
              </div>
              <div class="tabMessage mb-16">
                <el-row
                  :gutter="10"
                  class="text-center"
                >
                  <el-col :span="6">
                    <div class="weightFont cursor-pointer" @click="router.push({name:'waitMeToHandle'})">{{ todoCerter?.todoNum }}</div>
                    <div class="easyFont">待处理</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="weightFont cursor-pointer" @click="router.push({name:'haveHandled'})">{{ todoCerter?.idoNum }}</div>
                    <div class="easyFont">已处理</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="weightFont cursor-pointer" @click="router.push({name:'initiatedByMe'})">{{ todoCerter?.mysubmitNum }}</div>
                    <div class="easyFont">我发起</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="weightFont cursor-pointer" @click="router.push({name:'copyMine'})">{{ todoCerter?.ccmeNum }}</div>
                    <div class="easyFont">抄送我</div>
                  </el-col>
                </el-row>
              </div>
              <div class="helpList">
                <div class="title flexbetween">
                  <el-card class="tab-card w-full" shadow="never">
                    <template #header>
                      <div class="flex justify-between items-center">
                        <el-tabs v-model="activeName">
                          <el-tab-pane label="帮助文档" name="帮助文档" />
                          <el-tab-pane label="政策文件" name="政策文件" />
                        </el-tabs>
                      </div>
                    </template>
                    <div>
                      <div v-show="activeName === '帮助文档'">
                        <div
                          v-for="(item,key) in noticeList?.HELP_DOCUMENTS?.sort((a,b)=>b.topped*1-a.topped*1)?.slice(0,5)"
                          :key="key"
                          class="overflow-ellipsis overflow-hidden whitespace-nowrap mb-12 cursor-pointer"
                          @click="checkNoticeDetail(item)"
                        >
                          <p>
                            <el-tag
                              v-if="item.topped"
                              type="success"
                              size="small"
                              class="mr-8"
                              effect="dark"
                            >
                              置顶
                            </el-tag>
                            <el-icon
                              v-else
                              class="ml-8 mr-23"
                            >
                              <DocumentCopy />
                            </el-icon>
                            <span style="color:rgba(0,0,0,0.85)">{{ item.title }}</span>
                          </p>
                        </div>
                      </div>
                      <div v-show="activeName === '政策文件'">
                        <div
                          v-for="(item,key) in noticeList?.POLICY_DOCUMENTS?.sort((a,b)=>b.topped*1-a.topped*1)?.slice(0,5)"
                          :key="key"
                          class="overflow-ellipsis overflow-hidden whitespace-nowrap mb-12 cursor-pointer"
                          @click="checkNoticeDetail(item)"
                        >
                          <p>
                            <el-tag
                              v-if="item.topped"
                              type="success"
                              size="small"
                              class="mr-8"
                              effect="dark"
                            >
                              置顶
                            </el-tag>
                            <el-icon
                              v-else
                              class="ml-8 mr-23"
                            >
                              <DocumentCopy />
                            </el-icon>
                            <span style="color:rgba(0,0,0,0.85)">{{ item.title }}</span>
                          </p>
                        </div>
                      </div>

                      <div class="flex items-center justify-center">
                        <a @click="showNoticeList">查看更多</a>
                        <svg-icon name="forward" />
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
            <div class="helpList text-14">
              <div class="title flexbetween mb-15">
                <span>技术支持</span>
              </div>
              <div class="flex items-center">
                <span class="mr-4">吴邦宏</span>
                <span class="flex items-center mr-4">
                  <svg-icon
                    name="phone"
                    svg-class="mr-4"
                  />18687446073
                </span>
                <span class="flex items-center">
                  <svg-icon
                    name="time"
                    svg-class="mr-4"
                  />9:00-18:00
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="18" class="rightContent">
          <div class="flex flex-col h-full">
            <div class="notice flex items-center mb-16 text-14">
              <svg-icon
                class="ml-16 mr-16"
                name="sound-fill"
                svg-class="mr-4"
              />
              <el-carousel
                v-if="noticeList?.ANNOUNCEMENT&&noticeList?.ANNOUNCEMENT.filter(each => each.enabled === true).length"
                direction="vertical"
                :autoplay="true"
                height="24px"
                arrow="never"
                style="width:100%"
                class="myCarousel"
              >
                <el-carousel-item v-for="item in noticeList.ANNOUNCEMENT.filter(each => each.enabled === true)" :key="item.id">
                  <span class="cursor-pointer" @click="checkNoticeDetail(item)">通知公告：{{ item.title }}</span>
                </el-carousel-item>
              </el-carousel>
              <span v-else>暂无通知</span>
            </div>
            <el-row :gutter="16" class="mb-16">
              <el-col :span="16">
                <el-card
                  class="box-card cardBox h-full"
                >
                  <template #header>
                    <div class="flexbetween">
                      <span>单位项目概览</span>
                      <div class="unitYear text-14 text-info">
                        <el-form-item label="项目年份:">
                          <el-date-picker
                            v-model="time"
                            type="year"
                            placeholder="请选择"
                            @change="getWorkbenchDataFun(time)"
                          />
                        </el-form-item>
                      </div>
                    </div>
                  </template>
                  <div class="card1">
                    <el-row :gutter="60">
                      <el-col
                        style="border-right: 1px solid #d8dadf"
                        :span="16"
                      >
                        <div>
                          <el-row :gutter="10">
                            <el-col :span="12">
                              <el-row
                                class="projectSumClass"
                                style="align-items: center"
                              >
                                <el-col :span="8">
                                  <svg-icon
                                    name="projectSum"
                                    svg-class="projectSum"
                                  />
                                </el-col>
                                <el-col :span="16">
                                  <div class="easyFont whitespace-nowrap ml-16">项目总数</div>
                                  <div class="weightFontBlack ml-16">{{ orgDeclared?.totalNum }}</div>
                                </el-col>
                              </el-row>
                            </el-col>
                            <el-col :span="12">
                              <div class="construction flexbetween">
                                <div class="flexItem">
                                  <svg-icon name="setPor" />
                                  <span class="fonts1 textCenter">建设项目</span>
                                </div>
                                <span class="font-bold">{{ orgDeclared?.buildNum }}</span>
                              </div>
                              <div
                                style="margin-top: 3px"
                                class="maintenance flexbetween"
                              >
                                <div class="flexItem">
                                  <svg-icon name="configuration" />
                                  <span class="fonts1 textCenter">运维项目</span>
                                </div>
                                <span class="font-bold">{{ orgDeclared?.operationNum }}</span>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <div style="margin-top: 16px">
                          <el-row :gutter="10">
                            <el-col :span="5">
                              <div class="weightFontBlack textCenter">{{ orgDeclared?.notApprovedNum }}</div>
                              <div class="easyFont textCenter flex items-center">计划
                                <el-tooltip
                                  class="box-item"
                                  effect="dark"
                                  content="计划：预审中、评审中等未完成立项的项目总数。统计规则：待立项批复状态之前的所有项目数量。"
                                  placement="bottom"
                                >
                                  <el-icon color="rgba(0, 87, 255)" class="ml-3"><Warning /></el-icon>
                                </el-tooltip>
                              </div>
                            </el-col>
                            <el-col :span="5">
                              <div class="weightFontBlack textCenter">{{ orgDeclared?.approvedNum }}</div>
                              <div class="easyFont textCenter flex items-center">审批
                                <el-tooltip
                                  class="box-item"
                                  effect="dark"
                                  content="审批：完成立项批复的项目总数。统计规则：待采购状态的项目数量。"
                                  placement="bottom"
                                >
                                  <el-icon color="rgba(0, 87, 255)" class="ml-3"><Warning /></el-icon>
                                </el-tooltip>
                              </div>
                            </el-col>
                            <el-col :span="5">
                              <div class="weightFontBlack textCenter">{{ orgDeclared?.constructionNum }}</div>
                              <div class="easyFont textCenter flex items-center">建设
                                <el-tooltip
                                  class="box-item"
                                  effect="dark"
                                  content="建设：建设中的项目总数。统计规则：建设中状态的项目总数。"
                                  placement="bottom"
                                >
                                  <el-icon color="rgba(0, 87, 255)" class="ml-3"><Warning /></el-icon>
                                </el-tooltip>
                              </div>
                            </el-col>
                            <el-col :span="5">
                              <div class="weightFontBlack textCenter">{{ orgDeclared?.tobeInspectedNum }}</div>
                              <div class="easyFont textCenter flex items-center">验收
                                <el-tooltip
                                  class="box-item"
                                  effect="dark"
                                  content="验收：待验收的项目总数。"
                                  placement="bottom"
                                >
                                  <el-icon color="rgba(0, 87, 255)" class="ml-3"><Warning /></el-icon>
                                </el-tooltip>
                              </div>
                            </el-col>
                            <el-col :span="4">
                              <div class="weightFontBlack textCenter">{{ orgDeclared?.archivedNum }}</div>
                              <div class="easyFont textCenter flex items-center">运维
                                <el-tooltip
                                  class="box-item"
                                  effect="dark"
                                  content="运维：已归档的项目总数。"
                                  placement="bottom"
                                >
                                  <el-icon color="rgba(0, 87, 255)" class="ml-3"><Warning /></el-icon>
                                </el-tooltip>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                      <el-col
                        class="rowLeft"
                        :span="8"
                      >
                        <div>
                          <div class="weightFontBlack textCenter">{{ orgDeclared?.declaredAmount||0 }}<span style="font-size:14px">万元</span></div>
                          <div class="easyFont textCenter">申报总金额</div>
                        </div>
                        <div>
                          <div class="weightFontBlack textCenter">{{ orgDeclared?.approvalAmount||0 }}<span style="font-size:14px">万元</span></div>
                          <div class="easyFont textCenter">立项总金额</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card
                  class="box-card h-full tab-card"
                >
                  <template #header>
                    <div class="flexbetween">
                      <el-tabs v-model="toDoActiveName" @tab-change="toDoHandleClick">
                        <el-tab-pane label="待办处理" name="1" />
                        <el-tab-pane v-if="userInfo?.userRoleInfoList?.map(i=>i.code).includes('EXPERT')" label="待我评审" name="2" />
                      </el-tabs>
                      <a
                        v-if="toDoActiveName==='1'"
                        class="flexItem text-14"
                        @click="router.push({name:'waitMeToHandle'})"
                      >查看更多
                        <svg-icon name="forward" />
                      </a>
                      <a
                        v-else
                        class="flexItem text-14"
                        @click="router.push({name:'expertReview'})"
                      >查看更多
                        <svg-icon name="forward" />
                      </a>
                    </div>
                  </template>
                  <div v-if="toDoActiveName==='1'&&handlerList && handlerList.length">
                    <div
                      v-for="(item, index) in handlerList"
                      :key="item.id"
                      :style="{
                        marginTop: index == 0 ? '0px' : '16px',
                      }"
                      class="listStyle"
                    >
                      <el-row>
                        <el-col
                          :span="20"
                          class="textEllipsis"
                        >{{ item.projectName }}的{{ item.processDefName }}
                        </el-col>
                        <el-col
                          :span="4"
                          class="textRight"
                          @click="router.push({name:'handleDuringExamine',query: { instanceId: item.instCode, projectId: item.projectId, nodeId: item.nodeId }})"
                        ><a>处理</a> </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div v-else-if="toDoActiveName==='2'&&expertHandlerList && expertHandlerList.length">
                    <div
                      v-for="(item, index) in expertHandlerList"
                      :key="item.id"
                      :style="{
                        marginTop: index == 0 ? '0px' : '16px',
                      }"
                      class="listStyle"
                    >
                      <el-row>
                        <el-col
                          :span="20"
                          class="textEllipsis"
                        >{{ item.projectName }}
                        </el-col>
                        <el-col
                          :span="4"
                          class="textRight"
                          @click="router.push({name:'handleExpertReview',query: { meetingId: item.meetingId, projectId: item.projectId, isHeadman: item.isHeadman,reviewType:item.reviewType,reviewed:item.reviewed,type:1 }})"
                        ><a>处理</a> </el-col>
                      </el-row>
                    </div>
                  </div>
                  <noData v-else />
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="16">
                <el-card
                  class="box-card h-full dt-card"
                >
                  <template #header>
                    <div class="flexbetween">
                      <span>项目动态</span>
                      <a
                        class="flexItem text-14"
                        @click="viewMore"
                      >查看更多
                        <svg-icon name="forward" />
                      </a>
                    </div>
                  </template>
                  <div v-if="projectList && projectList.length" class="h-full">
                    <div class="projectDynamicContainer">
                      <div
                        v-for="item in projectList"
                        :key="item.id"
                        class="projectDynamic"
                      >
                        <div class="leftPart"><svg-icon name="projectAvartar" class="projectAvartarStyle" /></div>
                        <div class="rightPart">
                          <div class="mb-8 pointTit" @click="checkDetail(item)">{{ item.projectName }}</div>
                          <div class="mb-8">
                            <span class="statusTag status-primary">{{ businessTerritory[item.bizDomain] }}</span>
                          </div>
                          <div class="flex items-center">
                            <span style="color:rgba(0, 0, 0, 0.45)">项目状态：<span :class="`value statusTag status-${statusOptions[item.status]?.color}`">{{
                              statusOptions[item.stage]?.name
                            }}-{{ statusOptions[item.status]?.name }}</span></span>
                            <span style="color:rgba(0, 0, 0, 0.45); margin-left: 50px;">更新时间：<span style="color:rgba(0, 0, 0, 0.65)">{{ item.createOn }}</span></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    v-else
                    style="padding: 30px"
                  >
                    <noData />
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card
                  class="box-card h-full"
                >
                  <template #header>
                    <div class="flexbetween">
                      <span>项目监测</span>
                    </div>
                  </template>
                  <div v-if="false">
                    <div class="flexCenter mb-28">
                      <el-radio-group
                        v-model="MonitorRadio"
                        size="small"
                      >
                        <el-radio-button label="1">预审超期（2）</el-radio-button>
                        <el-radio-button label="2">采购超期（3）</el-radio-button>
                        <el-radio-button label="3">验收超期（7）</el-radio-button>
                      </el-radio-group>
                    </div>
                    <div>
                      <div
                        v-for="item in monitorList"
                        :key="item.id"
                        class="listStyle"
                      >
                        <el-row>
                          <el-col :span="20">
                            <div class="flexItem">
                              <div class="textEllipsis">{{ item.name }}</div>
                          &nbsp;
                              <div class="statusClass color2">
                                {{ item.status == 1 ? "超期6天12小时" : "-" }}
                              </div>
                            </div>
                          </el-col>
                          <el-col
                            :span="4"
                            class="textRight"
                          ><a>处理</a> </el-col>
                        </el-row>
                      </div>
                    </div>
                  </div>
                  <div
                    v-else
                    style="padding: 30px"
                  >
                    <noData />
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="home">
    <el-row v-loading="pageLoading" :gutter="16" style="z-index:1">
      <el-col :span="6">
        <div class="userInfo mb-16">
          <el-tooltip
            class="box-item"
            effect="light"
            :content="`${userInfo?.userRoleInfoList?.map(i=>i.name).join('、')}`"
            placement="top-start"
          >
            <div class="relative role">
              <span class="text text-white text-12 w-full cursor-pointer">用户角色</span>
              <svg-icon name="roleBg" style="width: 87px;height: 22px" />
            </div>
          </el-tooltip>
          <div class="flex items-center mb-53 px-8">
            <el-avatar
              :src="userInfo.avatar"
              size="large"
              class="flex-shrink-0"
            />
            <div class="ml-8">
              <p class="font-bold text-20">{{ userInfo.realName }}</p>
              <p class="text-14 text-[rgba(0,0,0,0.45)]">
                {{ userInfo.regionName }}-{{ userInfo.empPosUnitName }}
              </p>
            </div>
          </div>
          <div class="todo-nums flex justify-between">
            <div>
              <p class="data font-family-din" @click="router.push({name:'waitMeToHandle'})">{{ todoCerter?.todoNum }}</p>
              <p class="text">待处理</p>
            </div>
            <p class="line"></p>
            <div>
              <p class="data font-family-din" @click="router.push({name:'haveHandled'})">{{ todoCerter?.idoNum }}</p>
              <p class="text">已处理</p>
            </div>
            <p class="line"></p>
            <div>
              <p class="data font-family-din" @click="router.push({name:'initiatedByMe'})">{{ todoCerter?.mysubmitNum }}</p>
              <p class="text">我发起</p>
            </div>
            <p class="line"></p>
            <div>
              <p class="data font-family-din" @click="router.push({name:'copyMine'})">{{ todoCerter?.ccmeNum }}</p>
              <p class="text">抄送我</p>
            </div>
          </div>
        </div>
        <div class="notice-box">
          <div class="notice-tab flex">
            <p :class="`cursor-pointer mr-16 ${activeName==='ANNOUNCEMENT'?'active-tab':''}`" @click="activeName='ANNOUNCEMENT'">通知公告</p>
            <p :class="`cursor-pointer mr-16 ${activeName==='POLICY_DOCUMENTS'?'active-tab':''}`" @click="activeName='POLICY_DOCUMENTS'">政策文件</p>
            <p :class="`cursor-pointer ${activeName==='HELP_DOCUMENTS'?'active-tab':''}`" @click="activeName='HELP_DOCUMENTS'">帮助文档</p>
          </div>
          <div class="notice-list">
            <template v-if="noticeList?.[activeName]?.length">
              <div
                v-for="(item,key) in noticeList?.[activeName]?.sort((a,b)=>b.topped*1-a.topped*1)?.slice(0,5)"
                :key="key"
                class="overflow-ellipsis overflow-hidden whitespace-nowrap mb-12 cursor-pointer"
                @click="checkNoticeDetail(item)"
              >
                <div class="flex items-center">
                  <svg-icon name="doc" class="text-16 mr-4 flex-shrink-0" />
                  <p v-if="item.topped" class="topTag mr-4">置顶</p>
                  <span style="color:rgba(0,0,0,0.85)" class="text-14 overflow-ellipsis overflow-hidden whitespace-nowrap ">{{ item.title }}</span>
                </div>
              </div>
            </template>
            <p v-else class="text-center text-info text-14">暂无数据</p>
          </div>
          <p class="more">
            <span class="mr-4 cursor-pointer" @click="showNoticeList">查看更多</span>
            <svg-icon name="forward" />
          </p>
        </div>
      </el-col>
      <el-col :span="18">
        <el-row :gutter="16">
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER','EXPERT'])" :span="12" class="mb-16 h-[340px]">
            <div class="h-full">
              <div v-if="getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER'])" class="todoBox flex flex-col" :style="`height:${!getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER','EXPERT'])?'100%':'50%'}`">
                <div class="flex justify-between mb-22 items-center pl-24 pt-12 pr-16">
                  <el-tabs v-model="toDoActiveName[0]" class="custom-tab" @tab-change="val=>toDoHandleClick(0,val)">
                    <el-tab-pane name="1">
                      <template #label>
                        <el-badge :value="handlerTotal" class="handleBadge" :max="99">
                          <span>待办处理</span>
                        </el-badge>
                      </template>
                    </el-tab-pane>
                    <el-tab-pane label="我已处理" name="2" />
                    <el-tab-pane label="我发起的" name="3" />
                    <el-tab-pane label="抄送我的" name="4" />
                  </el-tabs>
                  <p class="more cursor-pointer flex items-center" @click="viewTodoMore(toDoActiveName[0])">
                    <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                    <svg-icon name="forward" class="text-12" />
                  </p>
                </div>
                <ul class="todolistUl flex-1 h-[100px]">
                  <template v-if="handlerList[toDoActiveName[0]]?.length">
                    <li
                      v-for="(item, index) in handlerList[toDoActiveName[0]]"
                      :key="index"
                      class="flex items-center justify-between"
                    >
                      <p :title="`${item.projectName}的${item.processDefName}`" class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}的{{ item.processDefName }}</p>
                      <a class="flex-shrink-0" @click="toHandle(item)">{{ toDoActiveName[0]==='1'?'处理':'详情' }}</a>
                    </li>
                  </template>
                  <p v-else class="text-center text-info text-14">暂无数据</p>
                </ul>
              </div>
              <div v-if="false&&!getIsShowBox(['SUPER_ADMIN','EXPERT'])" class="todoBox h-1/2 flex flex-col">
                <div class="flex justify-between mb-22 items-center pl-24 pr-16 pt-12">
                  <el-tabs v-model="toDoActiveName[1]" class="custom-tab" @tab-change="val=>toDoHandleClick(1,val)">
                    <el-tab-pane label="我发起的" name="3" />
                    <el-tab-pane label="抄送我的" name="4" />
                  </el-tabs>
                  <p class="more cursor-pointer flex items-center" @click="viewTodoMore(toDoActiveName[1])">
                    <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                    <svg-icon name="forward" class="text-12" />
                  </p>
                </div>
                <ul class="todolistUl flex-1 h-[100px]">
                  <template v-if="handlerList[toDoActiveName[1]]?.length">
                    <li
                      v-for="(item, index) in expertHandlerList[toDoActiveName[1]]"
                      :key="index"
                      class="flex items-center justify-between"
                    >
                      <p :title="`${item.projectName}的${item.processDefName}`" class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}的{{ item.processDefName }}</p>
                      <a class="flex-shrink-0" @click="router.push({name:toDoActiveName[1]==='3'?'initiatedByMeDetail':'copyMineDetail',query: { instanceId: item.instCode, projectId: item.projectId, nodeId: item.nodeId,taskId:item.taskId }})">详情</a>
                    </li>
                  </template>
                  <p v-else class="text-center text-info text-14">暂无数据</p>
                </ul>
              </div>
              <div v-if="getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER','EXPERT'])" class="todoBox  flex flex-col" :style="`height:${!getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER'])?'100%':'50%'}`">
                <div class="flex justify-between mb-22 items-center pl-24 pr-16 pt-12">
                  <el-tabs v-model="reviewActiveName" class="custom-tab" @tab-change="val=>expertReviewHandleClick(val)">
                    <el-tab-pane label="待我评审" name="1" />
                    <el-tab-pane label="我已评审" name="2" />
                  </el-tabs>
                  <p class="more cursor-pointer flex items-center" @click="viewTodoMore(toDoActiveName[1])">
                    <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                    <svg-icon name="forward" class="text-12" />
                  </p>
                </div>
                <ul class="todolistUl overflow-y-auto flex-1">
                  <template v-if="expertHandlerList?.length">
                    <li
                      v-for="(item, index) in expertHandlerList"
                      :key="index"
                      class="flex items-center justify-between"
                    >
                      <p :title="`${item.projectName}`" class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}</p>
                      <div class="flex-shrink-0">
                        <a @click="showMeetingsLeaveDialog">会议请假</a>
                        <a @click="router.push({name:'handleExpertReview',query: { meetingId: item.meetingId, projectId: item.projectId, isHeadman: item.isHeadman,reviewType:item.reviewType,reviewed:item.reviewed,type:reviewActiveName }})">处理</a>
                      </div>
                    </li>
                  </template>
                  <noData v-else />
                </ul>
              </div>
            </div>
          </el-col>
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','VISITOR'])" :span="12" class="mb-16 h-[340px]">
            <div class="projectOverViewBox whiteBox h-full flex flex-col">
              <div class="flex pl-24 py-8 pr-16 justify-between items-center">
                <p class="font-semibold">区域项目总览</p>
                <el-date-picker
                  v-model="time"
                  style="width:94px"
                  type="year"
                  placeholder="请选择"
                  :clearable="false"
                  @change="getWorkbenchDataFun(time)"
                />
              </div>
              <div class="overflow-y-auto flex-1">
                <div class="flex items-center justify-between pr-24 mt-24">
                  <div class="flex items-center">
                    <div ref="pieChartRef" class="chart"></div>
                    <div>
                      <div class="flex items-center">
                        <p class="w-6 h-6 bg-[#8C8C8C]" style="border-radius: 100%"></p>
                        <span class="ml-4 mr-24 text-[rgba(0, 0, 0, 0.45)]">项目总数</span>
                        <p class="text-[rgba(0, 0, 0, 0.85)] font-family-din text-20 pt-4" style="line-height: 1">{{ declaredData?.totalNum }}</p>
                      </div>
                      <div class="flex items-center">
                        <p class="w-6 h-6 bg-[#007FED]" style="border-radius: 100%"></p>
                        <span class="ml-4 mr-24 text-[rgba(0, 0, 0, 0.45)]">建设项目</span>
                        <p class="text-[rgba(0, 0, 0, 0.85)] font-family-din text-20 pt-4" style="line-height: 1">{{ declaredData?.buildNum }}</p>
                      </div>
                      <div class="flex items-center">
                        <p class="w-6 h-6 bg-[#78C0FF]" style="border-radius: 100%"></p>
                        <span class="ml-4 mr-24 text-[rgba(0, 0, 0, 0.45)]">运维项目</span>
                        <p class="text-[rgba(0, 0, 0, 0.85)] font-family-din text-20 pt-4" style="line-height: 1">{{ declaredData?.operationNum }}</p>
                      </div>
                    </div>
                  </div>
                  <div class="text-14">
                    <div>
                      <p class="text-[rgba(0,0,0,0.45)] mb-4">申报总金额（万元）</p>
                      <div class="flex items-center">
                        <p class="font-family-din text-24 font-bold  pt-4" style="line-height: 1;">{{ declaredData?.declaredAmount||0 }}</p>
                        <span class="ml-16 mr-4 text-[rgba(0,0,0,0.45)]">较去年</span>
                        <p class="precent">
                          <span>{{ declaredData?.declaredAmountGrowthRate||0 }}%</span>
                        </p></div>
                    </div>
                    <div>
                      <p class="text-[rgba(0,0,0,0.45)] text-14 mb-4">立项总金额（万元）</p>
                      <div class="flex items-center">
                        <p class="font-family-din text-24 font-bold pt-4" style="line-height: 1;">{{ declaredData?.approvalAmount||0 }}</p>
                        <span class="ml-16 mr-4">较去年</span>
                        <p class="precent">
                          <span>{{ declaredData?.approvalAmountGrowthRate||0 }}%</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flex justify-between numsList px-19 pt-36 pb-29">
                  <div>
                    <div class="flex items-center">
                      <p class="cir bg-[#81D3FF]"></p>
                      <span>计划</span>
                      <el-tooltip content="计划：预审中、评审中等未完成立项的项目总数。统计规则：待立项批复状态之前的所有项目数量。" placement="bottom" effect="light">
                        <svg-icon name="gth" class="cursor-pointer ml-2 text-12" />
                      </el-tooltip>
                    </div>
                    <p class="font-family-din text-32 font-bold text-[rgba(0,0,0,0.85)]">{{ declaredData?.notApprovedNum||0 }}</p>
                  </div>
                  <p class="line bg-[#007FED]"></p>
                  <div>
                    <div class="flex items-center">
                      <p class="cir bg-[#007FED]"></p>
                      <span>审批</span>
                      <el-tooltip content="审批：完成立项批复的项目总数。统计规则：待采购状态的项目数量。" placement="bottom" effect="light">
                        <svg-icon name="gth" class="cursor-pointer ml-2 text-12" />
                      </el-tooltip>
                    </div>
                    <p class="font-family-din text-32 font-bold text-[rgba(0,0,0,0.85)]">{{ declaredData?.approvedNum||0 }}</p>
                  </div>
                  <p class="line bg-[#3A51E5]"></p>
                  <div>
                    <div class="flex items-center">
                      <p class="cir bg-[#3A51E5]"></p>
                      <span>建设</span>
                      <el-tooltip content="建设：建设中的项目总数。统计规则：建设中状态的项目总数。" placement="bottom" effect="light">
                        <svg-icon name="gth" class="cursor-pointer ml-2 text-12" />
                      </el-tooltip>
                    </div>
                    <p class="font-family-din text-32 font-bold text-[rgba(0,0,0,0.85)]">{{ declaredData?.constructionNum||0 }}</p>
                  </div>
                  <p class="line bg-[#007FED]"></p>
                  <div>
                    <div class="flex items-center">
                      <p class="cir bg-[#007FED]"></p>
                      <span>验收</span>
                      <el-tooltip content="验收：待验收的项目总数。" placement="bottom" effect="light">
                        <svg-icon name="gth" class="cursor-pointer ml-2 text-12" />
                      </el-tooltip>
                    </div>
                    <p class="font-family-din text-32 font-bold text-[rgba(0,0,0,0.85)]">{{ declaredData?.tobeInspectedNum||0 }}</p>
                  </div>
                  <p class="line bg-[#81D3FF]"></p>
                  <div>
                    <div class="flex items-center">
                      <p class="cir bg-[#81D3FF]"></p>
                      <span>运维</span>
                      <el-tooltip content="运维：已归档的项目总数。" placement="bottom" effect="light">
                        <svg-icon name="gth" class="cursor-pointer ml-2 text-12" />
                      </el-tooltip>
                    </div>
                    <p class="font-family-din text-32 font-bold text-[rgba(0,0,0,0.85)]">{{ declaredData?.archivedNum||0 }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER'])" :span="12" class="mb-16 h-[340px]">
            <div class="projectListBox flex flex-col h-full">
              <div class="flex justify-between items-center py-12 pl-24 pr-16">
                <p class="font-bold text-[rgba(0,0,0,0.85)]">项目动态</p>
                <p class="more cursor-pointer flex items-center" @click="router.push({name:'projectStore'})">
                  <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                  <svg-icon name="forward" class="text-12" />
                </p>
              </div>
              <div class="flex-1 overflow-auto listDiv pt-16">
                <ul v-if="projectList?.length" class="listUl px-16">
                  <li v-for="item in projectList" :key="item.id" class="flex pt-8 pb-6 px-16">
                    <div class="left mr-24"><svg-icon name="projectAvartar" class="text-44" /></div>
                    <div class="right">
                      <p class="mb-8 text-14">
                        <a class="mr-8 font-semibold" @click="checkDetail(item)">{{ item.projectName }}</a>
                        <span :class="`value statusTag status-${statusOptions[item.status]?.color}`">{{ statusOptions[item.status]?.name }}</span>
                      </p>
                      <p class="mb-8">
                        <span class="text-[rgba(0,0,0,0.45)]">当前审批人：</span>
                        <span v-if="item?.approveUsers?.[0]" style="color:rgba(0, 0, 0, 0.65)">{{ item?.approveUsers?.[0]?.empPosUnitName }} {{ item?.approveUsers?.[0]?.username }}</span>
                        <span v-else style="color:rgba(0, 0, 0, 0.65)">-</span>
                      </p>
                      <p>
                        <span class="text-[rgba(0,0,0,0.45)]">更新时间：</span>
                        <span style="color:rgba(0, 0, 0, 0.65)">{{ item.createOn }}</span>
                      </p>
                    </div>
                  </li>
                </ul>
                <noData v-else />
              </div>
            </div>
          </el-col>
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER'])" :span="12" class="mb-16 h-[340px]">
            <div class="projectMonitorBox whiteBox flex flex-col h-full">
              <div class="flex pl-24 py-8 pr-16 justify-between items-center">
                <p class="font-semibold">项目监测</p>
                <div class="flex">
                  <div class="typeTab mr-8">
                    <p :class="`${typeAvtiveName==='accumulate'?'active':''}`" @click="changeType('accumulate')">累计预警</p>
                    <p :class="`${typeAvtiveName==='current'?'active':''}`" @click="changeType('current')">当前预警</p>
                  </div>
                  <el-date-picker
                    v-model="time"
                    style="width:94px"
                    type="year"
                    placeholder="请选择"
                    :clearable="false"
                    @change="getWorkbenchDataFun(time)"
                  />
                </div>
              </div>
              <div class="flex-1 overflow-y-auto">
                <div class="flex items-center px-[100px] justify-between mt-16 mb-16">
                  <div class="flex items-center">
                    <svg-icon name="cq" class="text-50 mr-8" />
                    <div>
                      <p class="font-family-din text-24" style="line-height: 1">{{ projectEarlyWarning?.[typeAvtiveName]?.over||0 }}</p>
                      <p style="color: rgba(0, 0, 0, 0.45)" class="text-14">超期</p>
                    </div>
                  </div>
                  <div class="flex items-center">
                    <svg-icon name="lq" class="text-50 mr-8" />
                    <div>
                      <p class="font-family-din text-24" style="line-height: 1">{{ projectEarlyWarning?.[typeAvtiveName]?.advent||0 }}</p>
                      <p style="color: rgba(0, 0, 0, 0.45)" class="text-14">临期</p>
                    </div>
                  </div>
                </div>
                <div class="px-16">
                  <el-tabs v-model="deActiveName" class="my-tab">
                    <el-tab-pane name="1" :label="`超期（${projectEarlyWarning?.overs?.total||0}）`" />
                    <el-tab-pane name="2" :label="`临期（${projectEarlyWarning?.advents?.total||0}）`" />
                  </el-tabs>
                  <ul class="listUl">
                    <li v-for="(item,index) in deActiveName==='1'?projectEarlyWarning?.overs?.records:projectEarlyWarning?.advents?.records" :key="index" class="flex items-center justify-between text-14">
                      <div class="flex items-center">
                        <p class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}</p>
                        <span class="overTime ml-8 flex-shrink-0">超期{{ item?.instStart&&intervalTime(item.instStart,new Date().getTime()) }}</span>
                      </div>
                      <p class="flex-shrink-0">
                        <a v-if="deActiveName==='1'" class="text-[#FF3B30] mr-8" @click="cb(item)">催办</a>
                        <a class="flex-shrink-0 ml-[0px]" @click="toCl(item)">处理</a>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-col>
          <el-col v-if="false&&getIsShowBox(['SUPER_ADMIN','EXPERT'])" :span="12" class="mb-16 h-[340px]">
            <div class="expertReviewBox whiteBox h-full flex flex-col">
              <div class="flex justify-between mb-22 items-center pl-24 pr-16 pt-12">
                <el-tabs v-model="reviewActiveName" class="custom-tab" @tab-change="val=>expertReviewHandleClick(val)">
                  <el-tab-pane label="待我评审" name="1" />
                  <el-tab-pane label="我已评审" name="2" />
                </el-tabs>
                <p class="more cursor-pointer flex items-center" @click="viewTodoMore(toDoActiveName[1])">
                  <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                  <svg-icon name="forward" class="text-12" />
                </p>
              </div>
              <ul class="todolistUl overflow-y-auto flex-1">
                <template v-if="expertHandlerList?.length">
                  <li
                    v-for="(item, index) in expertHandlerList"
                    :key="index"
                    class="flex items-center justify-between"
                  >
                    <p :title="`${item.projectName}`" class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}</p>
                    <a class="flex-shrink-0" @click="router.push({name:'handleExpertReview',query: { meetingId: item.meetingId, projectId: item.projectId, isHeadman: item.isHeadman,reviewType:item.reviewType,reviewed:item.reviewed,type:reviewActiveName }})">处理</a>
                  </li>
                </template>
                <noData v-else />
              </ul>
            </div>
          </el-col>
          <!--          自评人员-->
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','COMPANY_MANAGER','NORMAL_MEMBER'])" class="mb-16 h-[340px]" :span="12">
            <div class="jx-todoBox h-full flex flex-col">
              <div class="flex justify-between mb-22 items-center pl-24 pt-12 pr-16">
                <el-tabs v-model="jxActiveName[0]" class="custom-tab">
                  <el-tab-pane
                    v-for="(item,index) in tabsOptions['1']"
                    :key="index"
                    :label="item.name"
                    :name="item.key"
                  />
                </el-tabs>
                <p class="more cursor-pointer flex items-center" @click="viewJxMore(1,jxActiveName[0])">
                  <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                  <svg-icon name="forward" class="text-12" />
                </p>
              </div>
              <ul class="todolistUl flex-1 overflow-y-auto">
                <template v-if="performanceData?.[jxActiveName[0]]?.length">
                  <li
                    v-for="(item, index) in performanceData?.[jxActiveName[0]]"
                    :key="index"
                    class="flex items-center justify-between"
                  >
                    <p :title="`${item.projectName}`" class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}</p>
                    <a class="flex-shrink-0" @click="toJx(1,jxActiveName[0],item)">{{ jxActiveName[0]==='tobeSelfAppraisalList'&&item.draftId?'继续自评':tabsOptions['1']?.find(i=>i.key===jxActiveName[0])?.btn||'-' }}</a>
                  </li>
                </template>
                <p v-else class="text-center text-info text-14">暂无数据</p>
              </ul>
            </div>
          </el-col>
          <!--          复评人员-->
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','REVIEWER'])" class="mb-16 h-[340px]" :span="12">
            <div class="jx-todoBox h-full flex flex-col">
              <div class="flex justify-between mb-22 items-center pl-24 pt-12 pr-16">
                <el-tabs v-model="jxActiveName[1]" class="custom-tab">
                  <el-tab-pane
                    v-for="(item,index) in tabsOptions['2']"
                    :key="index"
                    :label="item.name"
                    :name="item.key"
                  />
                </el-tabs>
                <p class="more cursor-pointer flex items-center" @click="viewJxMore(2,jxActiveName[1])">
                  <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                  <svg-icon name="forward" class="text-12" />
                </p>
              </div>
              <ul class="todolistUl flex-1 overflow-y-auto">
                <template v-if="performanceData?.[jxActiveName[1]]?.length">
                  <li
                    v-for="(item, index) in performanceData?.[jxActiveName[1]]"
                    :key="index"
                    class="flex items-center justify-between"
                  >
                    <p :title="`${item.projectName}`" class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}</p>
                    <div>
                      <a v-if="jxActiveName[1]==='tobeAuditFormList'" class="flex-shrink-0" @click="toJx(2,jxActiveName[1],item,4)">通过</a>
                      <a v-if="jxActiveName[1]==='tobeAuditFormList'" class="flex-shrink-0" @click="toJx(2,jxActiveName[1],item,5)">驳回</a>
                      <a v-if="jxActiveName[1]!=='tobeAuditFormList'" class="flex-shrink-0" @click="toJx(2,jxActiveName[1],item)">{{ tabsOptions['2']?.find(i=>i.key===jxActiveName[1])?.btn||'-' }}</a>
                    </div>
                  </li>
                </template>
                <p v-else class="text-center text-info text-14">暂无数据</p>
              </ul>
            </div>
          </el-col>
          <!--          核查人员-->
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','EXPERT'])" class="mb-16 h-[340px]" :span="12">
            <div class="jx-todoBox h-full flex flex-col">
              <div class="flex justify-between mb-22 items-center pl-24 pt-12 pr-16">
                <el-tabs v-model="jxActiveName[2]" class="custom-tab">
                  <el-tab-pane
                    v-for="(item,index) in tabsOptions['3']"
                    :key="index"
                    :label="item.name"
                    :name="item.key"
                  />
                </el-tabs>
                <p class="more cursor-pointer flex items-center" @click="viewJxMore(3,jxActiveName[2])">
                  <span class="mr-4 text-[rgba(0,0,0,0.65)] text-14">查看更多</span>
                  <svg-icon name="forward" class="text-12" />
                </p>
              </div>
              <ul class="todolistUl flex-1 overflow-y-auto">
                <template v-if="performanceData?.[jxActiveName[2]]?.length">
                  <li
                    v-for="(item, index) in performanceData?.[jxActiveName[2]]"
                    :key="index"
                    class="flex items-center justify-between"
                  >
                    <p :title="`${item.projectName}`" class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.projectName }}</p>
                    <a class="flex-shrink-0" @click="toJx(3,jxActiveName[2],item)">{{ tabsOptions['3']?.find(i=>i.key===jxActiveName[2])?.btn||'-' }}</a>
                  </li>
                </template>
                <p v-else class="text-center text-info text-14">暂无数据</p>
              </ul>
            </div>
          </el-col>
          <el-col v-if="getIsShowBox(['SUPER_ADMIN','REGION_MANAGER','NORMAL_MEMBER','COMPANY_MANAGER','EXPERT_ADMIN','EXPERT'])" :span="12" class="mb-16 h-[340px]">
            <div class="pyTextBox h-full flex flex-col">
              <p class="text-[rgba(0,0,0,0.85)] font-semibold mb-23">小知识</p>
              <div class="text-[#007FED] flex-1 overflow-y-auto">
                {{ bxDataOptions[byIndex] }}
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <p class="absolute bottom-[0] left-[0] w-full">
      <img src="@/assets/images/homeBottom.png" class="w-full" />
    </p>
  </div>
  <el-dialog
    v-model="dialogVisible2"
    title="更多公告"
    width="70%"
  >
    <el-tabs v-model="activeName2" type="border-card" @tab-change="handleClick">
      <el-tab-pane label="帮助文档" name="2" />
      <el-tab-pane label="通知公告" name="1" />
      <el-tab-pane label="政策文件" name="3" />
      <table-list
        ref="tableListRef1"
        :column="column"
        :data="data1"
        :total="total1"
        @get-table-data="getTableData1"
      >
        <template #action="{ scope }">
          <a class="text-primary" @click="checkNoticeDetail(scope.row)">详情</a>
        </template>
      </table-list>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="dialogVisible"
    title="公告详情"
    width="70%"
  >
    <div class="noticeTitile text-center mb-15">{{ noticeDetail.title }}</div>
    <div class="text-right mb-15">发布时间:{{ releaseTiming }}</div>
    <p class="noticeContent" v-html="noticeDetail.content"></p>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <initial-boot-dialog :visible="initVisible" :init-data="initData" @close="initVisible=false" />
  <meetings-leave-dialog :visible="meetingsLeaveDialogData.visible" @close="closeMeetingsLeaveDialog" />
  <!--  上传回复单-->
  <up-load-replay-dialog :visible="uploadReplayDialogData.visible" :data="uploadReplayDialogData.data" @close="closeUpR" />
  <!--  整改-->
  <rectify-dialog
    :visible="rectifyDialogData.visible"
    :data="rectifyDialogData.data"
    :is-edit="rectifyDialogData.isEdit"
    @close="closeRec"
  />
  <up-load-zx-dialog :visible="uploadZxDialogData.visible" :data="uploadZxDialogData.data" @close="closeUpZ" />
</template>

<style lang="less">
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 24px 100px;
  .custom-tab{
    .el-tabs__nav-wrap::after{
      height: 0;
    }
    .el-tabs__item{
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      height: 22px;
      margin-bottom: 4px;
      color: rgba(0, 0, 0, 0.65);
      padding: 0 10px;
      &:nth-child(2){
        padding-left: 0;
      }
      &.is-active{
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        line-height: 24px;
        height: 24px;
      }
    }
    .el-tabs__active-bar{
      //width: 30px !important;
      //left: 10%;
    }
    .el-tabs__header{
      margin-bottom: 0;
    }
  }
  .userInfo{
    padding: 35px 8px 16px;
    border-radius: 4px;
    border: 1px solid #BDEBEF;
    background: radial-gradient(45.86% 42.82% at 100% 100%, rgba(32, 222, 239, 0.45) 8.35%, rgba(32, 222, 239, 0.12) 57.28%, rgba(32, 222, 239, 0.00) 100%), radial-gradient(76.14% 71.1% at 100% 100%, rgba(0, 127, 237, 0.30) 5.93%, rgba(0, 127, 237, 0.00) 100%), radial-gradient(72.21% 66.54% at 0% 0%, rgba(0, 127, 237, 0.60) 5.93%, rgba(0, 127, 237, 0.22) 59.41%, rgba(0, 127, 237, 0.00) 100%), radial-gradient(152.15% 141.42% at 0% 100%, rgba(0, 127, 237, 0.20) 38.81%, rgba(0, 127, 237, 0.00) 89.51%), #E8FDFF;
    box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
    position: relative;
    .todo-nums{
      border-radius: 4px;
      background: #FFF;
      box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
      text-align: center;
      padding: 16px 14px;
      .data{
        color: #007FED;
        font-family: DIN Alternate;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
      }
      .text{
        color: rgba(0, 0, 0, 0.45);
        text-align: center;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
      }
      .line{
        width: 1px;
        height: 17px;
        background: #D8DADF;
        margin: 8px 0 7px;
      }
    }
    .role{
      position: absolute;
      text-align: center;
      right: 0;
      top: 0;
      .text{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .notice-box{
    height: 426px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 45.93%, rgba(255, 255, 255, 0.60) 100%);
    box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
    backdrop-filter: blur(2px);
    padding: 9px 16px;
    position: relative;
    .notice-tab{
      color: rgba(0, 0, 0, 0.65);
      font-size: 16px;
      margin-bottom: 16px;
      line-height: 22px;
      .active-tab{
        font-weight: 600;
      }
    }
    .notice-list{
      .topTag{
        padding: 1px 4px;
        border-radius: 4px;
        background: linear-gradient(90deg, #20DEEF 2.3%, #007FED 100%);
        color: #FFF;
        font-size: 12px;
        line-height: 18px;
      }
    }
    .more{
      border-top: 1px solid #D8DADF;
      padding: 8px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
    }
  }
  .todoBox{
    border-radius: 4px;
    border: 1px solid #CBE4FA;
    background: linear-gradient(142deg, rgba(0, 127, 237, 0.15) 3.55%, rgba(0, 127, 237, 0.05) 76.88%), #FFF;
    box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
    .handleBadge{
      .el-badge__content{
        top: 4px;
        height: 14px;
        padding: 1px 2px;
        font-size: 12px;
      }
    }
  }
  .jx-todoBox{
    border-radius: 4px;
    border: 1px solid #CBE4FA;
    background: linear-gradient(142deg, rgba(0, 127, 237, 0.13) 3.55%, rgba(0, 127, 237, 0.04) 76.88%), rgba(255, 255, 255, 0.85);
    box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .todolistUl{
    padding: 0 24px 12px;
    overflow: auto;
    font-size: 14px;
    &::-webkit-scrollbar{
      background-color: rgba(0,0,0,0);
      width: 6px;
    }
    &::-webkit-scrollbar-thumb{
      background-color: #CBE4FA;
      border-radius: 3px;
      width: 6px;
    }
    li:not(:last-of-type){
      margin-bottom: 16px;
    }
  }
  .projectListBox{
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
    .listDiv{
      &::-webkit-scrollbar{
        background-color: rgba(0,0,0,0);
        width: 6px;
      }
      &::-webkit-scrollbar-thumb{
        background-color: #D8DADF;
        border-radius: 3px;
        width: 6px;
      }
      .statusTag {
        font-weight: 400;
        line-height: 18px;
        border-radius: 4px;
        display: inline-block;
        padding: 4px;

        &.status-warning {
          color: #FFA43D;
          background: rgba(255, 164, 61, 0.06);
        }
        &.status-success {
          color: #4ECB74;
          background: rgba(78,203,116,0.06);
        }
        &.status-danger {
          color: #FF3B30;
          background: rgba(255, 59, 48, 0.06);
        }
        &.status-primary{
          color: #0057FF;
          background: rgba(0, 87, 255, 0.06);
        }
      }
      .listUl{
        li:not(:last-of-type){
          border-bottom: 1px solid #D8DADF;
        }
      }
    }
  }
  .taskInfo {
    padding: 0 24px 100px;
    background: linear-gradient(270deg, #27b0e9 0%, #1b71e3 100%);
    background: none;
    //height: 100%;
    .info {
      .userInfo {
        font-size: 20px;
        color: #ffffff;
        display: flex;
        span:nth-child(2){
          font-size: 14px;
        }
      }
      .message {
        color: #ffffff;
        padding: 8px 10px;
        border-radius: 4px;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.25);
      }
    }
    .tabMessage {
      padding: 15px 10px 10px;
      background: #ffffff;
    }
    .helpList {
      position: relative;
      .title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        .more {
          position: absolute;
          right: 0;
          top: 10px;
        }
      }
      :deep(.el-card.tab-card .el-tabs .el-tabs__header .el-tabs__item){
        font-size: 14px;
      }
      :deep(.el-card__body){
        padding: 16px 12px;
      }
    }
    .notice{
      height: 38px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 4px;
      span{
        color: white;
      }
    }
    .rightContent {
      .card1 {
        .rowLeft {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .projectSumClass {
          padding: 11px 24px 31px 24px;
          background: #f0f2f5;
          border-radius: 5px;
          .projectSum {
            width: 48px;
            height: 48px;
          }
        }
        .construction {
          height: 46px;
          padding: 7px 20px 7px 10px;
          margin-left: 16px;
          margin-bottom: 8px;
          background: rgba(78, 203, 116, 0.06);
          border-radius: 5px;
          .fonts1 {
            margin-left: 5px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
          }
        }
        .maintenance {
          height: 46px;
          padding: 7px 20px 7px 10px;
          margin-left: 16px;
          margin-bottom: 8px;
          background: rgba(255, 164, 61, 0.06);
          border-radius: 5px;
          .fonts1 {
            margin-left: 5px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
          }
        }
      }
    }
  }
  .content {
    padding: 20px 0 70px 32px;
    display: flex;
    position: relative;
    flex: 1;
    .leftContent {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .tabMessage {
        margin-top: 30px;
        padding: 15px 10px 10px;
        background: #ffffff;
      }
      .helpList {
        position: relative;
        margin-top: 40px;
        .title {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          .more {
            position: absolute;
            right: 0;
            top: 10px;
          }
        }
      }
    }
    .rightContent {
      margin-top: -115px;
      height: calc(100% + 115px);
      display: flex;
      flex-direction: column;
      .notice{
        height: 38px;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 4px;
        span{
          color: white;
        }
      }
      .card {
        display: flex;
        .card1 {
          .rowLeft {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          }
          .projectSumClass {
            padding: 16px 24px 36px 24px;
            background: #f0f2f5;
            border-radius: 5px;
            .projectSum {
              width: 48px;
              height: 48px;
            }
          }
          .construction {
            height: 46px;
            padding: 7px 20px 7px 10px;
            margin-left: 16px;
            margin-bottom: 8px;
            background: rgba(78, 203, 116, 0.06);
            border-radius: 5px;
            .fonts1 {
              margin-left: 5px;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.45);
            }
          }
          .maintenance {
            height: 46px;
            padding: 7px 20px 7px 10px;
            margin-left: 16px;
            margin-bottom: 8px;
            background: rgba(255, 164, 61, 0.06);
            border-radius: 5px;
            .fonts1 {
              margin-left: 5px;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.45);
            }
          }
        }
      }
    }
  }
  .whiteBox{
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
    backdrop-filter: blur(2px);
  }
  .projectOverViewBox{
    .chart{
      width: 120px;
      height: 120px;
    }
    .precent{
      border-radius: 3px;
      background: rgba(255, 59, 48, 0.06);
      padding: 2px 8px;
      font-size: 12px;
      line-height: 20px;
      color: #FF3B30;
    }
    .numsList{
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      .cir{
        width: 6px;
        height: 6px;
        border-radius: 100%;
        margin-right: 4px;
      }
      .line{
        height: 1px;
        flex: 1;
        margin: 10px 4px 0;
      }
    }
  }
  .projectMonitorBox{
    .typeTab{
      display: flex;
      p{
        font-size: 14px;
        line-height: 22px;
        border: 1px solid #D8DADF;
        color: rgba(0, 0, 0, 0.45);
        padding: 4px 16px;
        cursor: pointer;
        &:last-of-type{
          border-radius: 0px 4px 4px 0px;
        }
        &:first-of-type{
          border-radius: 4px 0px 0px 4px;
        }
        &.active{
          border: 1px solid #0057FF;
          color: #007FED;
        }
      }
    }
    .my-tab{
      .el-tabs__item{
        color:rgba(0,0,0,0.45);
        &.is-active{
          color:#007FED;
        }
      }
    }
    .listUl{
      overflow-y: auto;
      .overTime{
        border-radius: 2px;
        background: rgba(255, 59, 48, 0.06);
        padding: 0 8px;
        color: #FF3B30;
        font-size: 12px;
        line-height: 18px;
        height: 18px;
      }
      li:not(:last-of-type){
        margin-bottom: 16px;
      }
    }
  }
  .pyTextBox{
    border-radius: 4px;
    border: 1px solid #CBE4FA;
    background: linear-gradient(142deg, rgba(0, 127, 237, 0.13) 3.55%, rgba(0, 127, 237, 0.04) 76.88%), rgba(255, 255, 255, 0.85);
    box-shadow: 0px 3px 6px 0px rgba(62, 99, 170, 0.06);
    backdrop-filter: blur(2px);
    padding: 12px 24px;
  }
}
.cardBox :deep(.el-card__header) {
  padding: 8px 16px !important;
}
.weightFont {
  color: #0057FF;
  font-size: 24px;
  font-weight: bold;
  font-family: DINPro-Bold, DINPro;
  line-height: 32px;
}
.weightFontBlack {
  color: rgba(0, 0, 0, 0.85);
  font-size: 24px;
  font-weight: bold;
  font-family: DINPro-Bold, DINPro;
}
.easyFont {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
.listStyle {
  margin-top: 16px;
  font-size: 14px;
}
.projectDynamicContainer{
  //height: 308px;
  height: 100%;
  .projectDynamic {
    padding: 8px;
    border-bottom: solid 1px rgba(216, 218, 223);
  margin-bottom: 10px;
  display: flex;
  .leftPart{
    height: auto;
    display: flex;
    margin-right: 24px;
  }
  .rightPart{
    flex: 1;
    height: auto;
    font-size: 14px;
    .checkDetail{
      color: rgba(0, 87, 255, 1);
      cursor: pointer;
    }
  }
  .value {
          color: rgba(0, 0, 0, 0.65);
        }
        .statusTag {
          font-weight: 400;
          line-height: 18px;
          border-radius: 4px;
          display: inline-block;
          padding: 4px;

          &.status-warning {
            color: #FFA43D;
            background: rgba(255, 164, 61, 0.06);
          }
          &.status-success {
            color: #4ECB74;
            background: rgba(78,203,116,0.06);
          }
          &.status-danger {
            color: #FF3B30;
            background: rgba(255, 59, 48, 0.06);
          }
          &.status-primary{
            color: #0057FF;
            background: rgba(0, 87, 255, 0.06);
          }
        }
  .projectAvartarStyle{
    width: 44px;
    height: 44px;
  }
}
}
.noticeTitile{
  font-size: 18px;
}
.noticeContent{
  height: 300px;
  overflow-y: scroll;
}
.statusClass {
  border-radius: 2px;
  padding: 1px 8px;
}
.color2 {
  background: rgba(255, 59, 48, 0.12);
  color: #ff3b30;
}
.unitYear :deep(.el-form-item) {
  margin-bottom: 0px !important;
}
.myCarousel{
  :deep(.el-carousel__indicators){
    display: none;
  }
}
.dt-card{
  height: 430px;
  :deep(.el-card__body){
    height: calc(100% - 49px);
    overflow-y: auto;
  }
}
.roleDropdownMenu{
  background: #4ecb74;
  :deep(.el-dropdown-menu__item){
    color:#fff;
    font-size: 14px;
    cursor:default;
  }
  :deep(.el-dropdown-menu__item:not(.is-disabled):focus){
    background: #4ecb74;
    color:#fff;
  }
}
</style>
