subject_gxj/xj_project_app_2024_2_18/pages/home/companyHome.vue

<script setup>
  import {
    ref,
    reactive,
    nextTick
  } from "vue"

  import {
    onLoad,
    onShow,
    onTabItemTap,
    onReachBottom
  } from "@dcloudio/uni-app"

  import {
    getOverdueNum
  } from "@/api/work/overdue.js"

  import {
    getannouncementList,
    getUnwriteReportList,
    getHomeStats,
    getBanner,
    getHomeStaticsEnter,
  } from "@/api/home.js"

  import {
    getJSDDlist,
    getZJLYlist,
    getHYFLlist,
  } from "@/api/work/projectInfo.js";

  import {
    getProjectInfoList
  } from "@/api/work/projectInfo.js";

  import store from '@/store'
  import {
    setAmt
  } from '@/utils/common.js'
  import {
    checkRoleById
  } from "@/utils/permission.js"
  import {
    addFocus,
    cancelFocus
  } from "@/api/work/focus.js";
  import iconEnterpriseInfo from "@/static/func/enterpriseInfos.svg";
  import yjtxIcon from '@/static/images/homeIcon/yjtx-icon.svg'
  import tzggIcon from '@/static/images/homeIcon/tzgg-icon.svg'
  import bslcIcon from '@/static/images/homeIcon/bslc-icon.svg'
  import wtdbIcon from '@/static/images/homeIcon/wtdb-icon.svg'
  import zcwjIcon from '@/static/images/homeIcon/zcwj-icon.svg'
  import zwzxIcon from '@/static/images/homeIcon/xwzx-icon.svg'
  import zjxmIcon from '@/static/images/homeIcon/zjxm-icon.svg'
  import zbIcon from '@/static/images/homeIcon/zb-icon.svg'
  import ybIcon from '@/static/images/homeIcon/yb-icon.svg'
  import zjfwIcon from '@/static/images/homeIcon/zjfw-icon.svg'
  import {
    getMessageNum
  } from "@/api/work/message.js"

  // 项目信息
  let projectYear = ref(2023);

  // 选择年
  let yearShow = ref(false);
  let defaultIndex = ref([0]);
  let yearColumns = ref([
    ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012",
      "2013",
      "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
      "2027", "2028", "2029", "2030", "2031", "2032", "2033"
    ]
  ])
  const yearShowChoose = function() {
    yearShow.value = true;
  }
  const yearClose = function(e) {
    if (e) {
      projectYear.value = e.value[0];
      // 获取最新数据
      getProjectInfo();
      onclearList()
    }

    yearShow.value = false;
  }

  // 选择分类
  let projectKind = ref(null);
  let projectKindId = null;
  let kindShow = ref(false);
  let kindColumns = ref([]);
  const kindShowChoose = function() {
    kindShow.value = true;
  }
  const kindClose = function(e) {
    if (e) {
      projectKind.value = e.value[0];
      projectKindId = hyflFull.find(item => item.value === projectKind.value).key;
      // 获取最新数据
      getProjectInfo();
      onclearList()
    }

    kindShow.value = false;
  }
  let hyflFull = [];
  const getHYFL = function() {
    getHYFLlist().then(res => {
      hyflFull = res.data.list;
      hyflFull.push({
        key: null,
        value: "所有分类"
      });
      kindColumns.value = [res.data.list.map(item => item.value)];
      kindColumns.value[0].unshift("所有分类");
    })
  };

  // 选择地点
  let projectArea = ref(null);
  let projectAreaId = null;
  let areaShow = ref(false);
  let areaColumns = ref([]);
  const areaShowChoose = function() {
    areaShow.value = true;
  }
  const areaClose = function(e) {
    if (e) {
      projectArea.value = e.value[0];
      projectAreaId = jsddFull.find(item => item.value === projectArea.value).key;
      // 获取最新数据
      getProjectInfo();
      onclearList()
    }

    areaShow.value = false;
  }
  let jsddFull = [];
  const getJSDD = function() {
    getJSDDlist().then(res => {
      jsddFull = res.data.list;
      jsddFull.push({
        key: null,
        value: "所有地区"
      });

      areaColumns.value = [res.data.list.map(item => item.value)];
      areaColumns.value[0].unshift("所有地区");
    })
  };

  // 资金来源
  let projectAmt = ref(null);
  let projectAmtId = null;
  let zjlyShow = ref(false);
  let zjlyColumns = ref([]);
  const zjlyShowChoose = () => {
    zjlyShow.value = true
  }
  const zjlyClose = e => {
    if (e) {
      projectAmt.value = e.value[0];
      projectAmtId = zjlyFull.find(item => item.value === projectAmt.value).key;
      // 获取最新数据
      getProjectInfo();
      onclearList()
    }
    zjlyShow.value = false
  }
  let zjlyFull = []
  const getZJLY = () => {
    getZJLYlist().then(res => {
      zjlyFull = res.data.list;
      zjlyFull.unshift({
        key: null,
        value: "所有来源"
      });

      zjlyColumns.value = [res.data.list.map(item => item.value)];
    })
  }

  function goToPage(url, permissionCode, type) {
    // if (permissionCode) {
    //   let havePermission = checkRoleById([permissionCode])
    //   if (!havePermission) return
    // }

    uni.$u.route({
      url: url,
      params: {
        type: type || null
      }
    })
  }


  //轮播图
  let bannerList = ref([])

  async function getBannerList() {
    getBanner().then(res => {
      bannerList.value = res.data.pictureList
    })
  }


  function bannerClick(e) {
    let result = {}
    for (let i = 0; i < bannerList.value.length; i++) {
      if (i == e) {
        result = bannerList.value[i]
      }
    }

    nextTick(() => {
      // uni.navigateTo({
      // 	url: `/pages/policy/detail/index?title=${result.title}&id=${result.id}`
      // })
      uni.$u.route({
        url: '/pages/policy/detail/index',
        params: {
          title: result.title,
          id: result.id
        }
      })
    })
  }


  // 功能列表
  let functionList = ref([{
    name: '办事流程',
    url: '/pages/process/index',
    icon: bslcIcon,
    type: 'jbxx',
    permissionCode: '711'
  }, {
    name: '问题督办',
    url: '/pages/morePage/wtdb/wtdbMorePage',
    icon: wtdbIcon,
    type: 'wtdb',
    permissionCode: '711'
  }, {
    name: '政策文件',
    url: '/pages/policy/search/index',
    icon: zcwjIcon,
    type: 'zcwj',
    permissionCode: '711'
  }, {
    name: '新闻资讯',
    url: '/pages/policy/search/index',
    icon: zwzxIcon,
    type: 'xwzx',
    permissionCode: '711'
  }, {
    name: '在建项目',
    url: '/pages/projectInfo/index',
    icon: zjxmIcon,
    type: 'all',
    permissionCode: '711'
  }, {
    name: '周报',
    url: '/pages/weekly/index',
    icon: zbIcon,
    type: 'jbxx',
    permissionCode: '711'
  }, {
    name: '月报',
    url: '/pages/monthly/index',
    icon: ybIcon,
    type: 'jbxx',
    permissionCode: '711'
  }, {
    name: '产业链共享服务',
    url: '/pages/intermediaryService/search/index',
    icon: zjfwIcon,
    type: 'jbxx',
    permissionCode: '711'
  }])

  //建设进度
  let fullPercents = ref(30);

  //获取项目列表
  let listPage = ref({
    pageNo: 1,
    pageSize: 10,
  })
  let projectList = ref([])
  let moreListFlag = ref(true)

  function getProjectList() {
    let params = {
      year: projectYear.value,
      indusKind: projectKindId,
      buildAddre: projectAreaId,
      zjly: projectAmtId

    }
    let info = {
      ...listPage.value,
      ...params
    }
    console.log(info, '项目列表');
    getProjectInfoList(info).then(res => {
      if (listPage.value.pageNo <= res.data.totalPage) {
        projectList.value = projectList.value.concat(res.data.list)
      } else if (listPage.value.pageNo >= res.data.totalPage || res.data.totalPage == 0) {
        moreListFlag.value = false
      }
    }).catch(() => {})
  }


  let cardCurrut = ref(0)

  function onChangeCard(e) {
    if (cardCurrut.value == e) {
      projectList.value[cardCurrut.value].isOpen = !projectList.value[cardCurrut.value].isOpen
    } else {
      projectList.value[cardCurrut.value].isOpen = false
      projectList.value[e].isOpen = true
      cardCurrut.value = e
    }


  }
  //重置列表
  function onclearList() {
    listPage.value.pageNo = 1;
    projectList.value = []
    getProjectList()
  }

  function goToDetail(id, subName) {
    uni.navigateTo({
      url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
    })
  }
  // 收藏/取消
  function changeFocus(id, status) {
    let item = projectList.value.find(item => item.id === id);

    if (status) {
      cancelFocus({
        subId: id
      }).then(res => {
        if (res.code === 200) {
          item.isAttention = 0;
        }
      }).catch(() => {
        uni.showToast({
          title: "更改收藏状态失败。",
          icon: "none",
          duration: 2000
        })
      })
    } else {
      addFocus({
        subId: id
      }).then(res => {
        if (res.code === 200) {
          item.isAttention = 1;
        }
      }).catch(() => {
        uni.showToast({
          title: "更改收藏状态失败。",
          icon: "none",
          duration: 2000
        })
      })
    }
  }

  function goToReport(type, subId, subName) {
    if (type === 'wtdb') {
      uni.navigateTo({
        url: `/pages/problemSupervision/index?type=${type}&subId=${subId}&subName=${subName}`
      })
    } else if (type === 'qtldjbm') {
      uni.navigateTo({
        url: `/pages/leadersList/index?type=${type}&subId=${subId}&subName=${subName}`
      })
    } else if (type === 'xcyx') {
      uni.navigateTo({
        url: `/pages/projectImageAndVideo/index?type=${type}&subId=${subId}&subName=${subName}`
      })
    } else if (type === 'more') {
      uni.navigateTo({
        url: `/pages/morePage/index?type=${type}&subId=${subId}&subName=${subName}`
      })

    } else {
      uni.navigateTo({
        url: `/pages/projectInfo/report/index?type=${type}&subId=${subId}&subName=${subName}`
      })
    }
  }


  //获取项目数据
  let WKG = ref(0)
  let YKG = ref(0)
  let YWG = ref(0)
  let YYQ = ref(0)
  let amtRate = ref(0)
  let amtTotal = ref(0)
  let endRate = ref(0)
  let openRate = ref(0)
  let yearAmt = ref(0)
  let yearAmtSj = ref(0)
  let totalNum = ref(0)

  function getProjectInfo() {
    console.log({
      year: projectYear.value,
      indusKind: projectKindId,
      buildAddre: projectAreaId,
      zjly: projectAmtId
    });
    getHomeStaticsEnter({
      year: projectYear.value,
      indusKind: projectKindId,
      buildAddre: projectAreaId,
      zjly: projectAmtId
    }).then(res => {
      WKG.value = res.data.WKG
      YKG.value = res.data.YKG
      YWG.value = res.data.YWG
      YYQ.value = res.data.YYQ
      amtRate.value = res.data.amtRate
      amtTotal.value = res.data.amtTotal
      endRate.value = res.data.endRate
      openRate.value = res.data.openRate
      yearAmt.value = res.data.yearAmt
      yearAmtSj.value = res.data.yearAmtSj
      totalNum.value = res.data.totalNum
    })
  }

  function amtgoto(e) {
    let params = {
      indusKind: projectKindId,
      subjectId: projectAreaId,
      zjly: projectAmtId,
      isCurrMonth: null,
      year: null,
      key: null
    }
    if (e.key == 'amtJh') {
      params.year = projectYear.value
      params.key = 'year'
      params.name = '年度计划投资'
      uni.$u.route({
        url: '/pages/countAnalysis/through/index',
        params: params
      })

    } else if (e.key == 'amtSj') {
      params.year = projectYear.value
      params.key = 'ndjh'
      params.name = '年度实际投资'
      uni.$u.route({
        url: '/pages/countAnalysis/through/index',
        params: params
      })
    }
  }

  function newProjectClick(e, num) {
    if (num != 0) {
      let throughObj = {
        year: projectYear.value,
        indusKind: projectKindId,
        subjectId: projectAreaId,
        zjly: projectAmtId,
        queryTimeType: '4',
        queryType: 1,
      }
      let obj = {
        xmzs: {
          name: '项目总数'
        },
        wkg: {
          name: '未开工',
          otherStatus: '1,6'
        },
        ykg: {
          name: '已开工',
          otherStatus: '7'
        },
        ywg: {
          name: '已竣工',
          otherStatus: 'A'
        },
        ztz: {
          name: '总投资'
        },
        ndjhtz: {
          name: '年度计划投资'
        },
        ndsjtz: {
          name: '年度实际投资'
        }
      }

      throughObj = {
        ...throughObj,
        ...obj[e]
      }
      let url = "/pages/projectInfo/index?type=home&";

      for (let i in throughObj) {
        let item = null;
        item = ((throughObj[i] ?? "") === "") ? `${i}=&` : `${i}=${throughObj[i]}&`;
        url = url += item;
      }

      url = url.substr(0, url.length - 1);

      uni.navigateTo({
        url
      })
    } else {

      uni.showToast({
        icon: 'none',
        title: '无该项数据'
      })
    }
  }


  function gotoLateProject() {
    let throughObj = {
      year: projectYear.value,
      indusKind: projectKindId,
      buildAddre: projectAreaId,
      zjly: projectAmtId,
      queryType: ''
    }
    let url = "/pages/overdue/overdued/index?type=home&";
    for (let i in throughObj) {
      let item = null;
      item = ((throughObj[i] ?? "") === "") ? `${i}=&` : `${i}=${throughObj[i]}&`;
      url = url += item;
    }
    url = url.substr(0, url.length - 1);

    uni.navigateTo({
      url
    })
  }
  let overdueWill = ref(0);
  let overdued = ref(0);

  //获取数量
  function getHomeNum() {
    getOverdueNum().then(res => {
      let text = '99+'
      if (res.data.isOver > 99) {
        overdueWill.value = text
      } else {
        overdueWill.value = res.data.isOver
      }
    })
  }

  onLoad(() => {
    let kind = uni.getStorageSync('userKind')
    let list = [{
      index: 0,
      "pagePath": "pages/home/headHome",
      "iconPath": "../../static/images/tabbar/home.png",
      "selectedIconPath": "../../static/images/tabbar/home_.png",
      "visible": false,
      "text": "首页"
    }, {
      index: 1,
      "pagePath": "pages/home/oversawHome",
      "iconPath": "../../static/images/tabbar/home.png",
      "selectedIconPath": "../../static/images/tabbar/home_.png",
      "visible": false,
      "text": "首页"
    }, {
      index: 2,
      "pagePath": "pages/home/companyHome",
      "iconPath": "../../static/images/tabbar/home.png",
      "selectedIconPath": "../../static/images/tabbar/home_.png",
      "visible": false,
      "text": "首页"
    }, {
      index: 3,
      "pagePath": "pages/message/index",
      "iconPath": "../../static/images/tabbar/message.png",
      "selectedIconPath": "../../static/images/tabbar/message_.png",
      "text": "消息"
    }, {
      index: 4,
      "pagePath": "pages/mine/index",
      "iconPath": "../../static/images/tabbar/mine.png",
      "selectedIconPath": "../../static/images/tabbar/mine_.png",
      "text": "我的"
    }]
    //kind 1 监管单位， 2公司端 ， 3 领导端
    if (kind == '2') {
      list[0].visible = false
      list[1].visible = false
      list[2].visible = true
      for (let i = 0; i < list.length; i++) {
        uni.setTabBarItem(list[i])
      }
    } else {
      list[0].visible = false
      list[1].visible = false
      list[2].visible = false
      for (let i = 0; i < list.length; i++) {
        uni.setTabBarItem(list[i])
      }
    }
    if (kind == '2') {
      setTimeout(() => {
        let now = new Date();
        projectYear.value = now.getFullYear();
        defaultIndex.value = [projectYear.value - 2000];
        // // judgeFuncList(); //判断权限
        // getAnnounceMent(); //获取公告
        getHYFL(); //获取行业分类
        getJSDD(); //获取建设地点
        getZJLY(); // 获取资金来源
        getProjectInfo();
        // getOverdue(); //获取逾期数量
        // // getUnwirteList(); //获取未填写周报月报信息
        // getMessageCount(); //获取未读消息数量
        getProjectList()
      }, 1000)
    }

  });
  onShow(() => {
    getHomeNum()
    getBannerList(); //获取轮播图数据
  })

  onReachBottom((e) => {
    if (!moreListFlag.value) {
      // uni.showToast({
      // 	title: "已经到底了。",
      // 	icon: "none",
      // 	duration: 2000
      // })
    } else {
      listPage.value.pageNo++;
      getProjectList()
    }
  })
</script>

<template>
  <view class="container">
    <view class="top-back-pie">
    </view>
    <view class="content-layer">
      <view class="top-layer">
        <view class="project-title">
          哈密市项目管理智慧平台
        </view>
        <view class="search-layer">
          <view class="search-input">
            <view class="search-icon"></view>
            <input @click="goToPage('/pages/search/index')" placeholder="项目、领导电话..."
              placeholder-style="color: #343434;font-size:28rpx;" />
          </view>
          <view class="search-line">

          </view>
          <view class="search-focus" @click="goToPage('/pages/focus/index')">
            <view class="search-focus-icon"></view>
            <text class="text">关注</text>
          </view>
        </view>
      </view>

      <view class="banner-box">
        <u-swiper :list="bannerList" indicator indicatorMode="line" keyName='coverImg' circular radius='20rpx'
          height="254rpx" @click="bannerClick"></u-swiper>
      </view>

      <view class="prompt-layer">
        <view class="item" @click="goToPage('/pages/overdue/index')">
          <view class="item-text">
            预警提醒
          </view>
          <view class="item-image">
            <image :src="yjtxIcon" mode=""></image>
            <view class="sign">
              {{overdueWill}}
            </view>
          </view>
        </view>
        <view class="item" @click="goToPage('/pages/announcement/list/index')">
          <view class="item-text">
            通知公告
          </view>
          <view class="item-image">
            <image :src="tzggIcon" mode=""></image>
          </view>
        </view>
      </view>
      <view class="button-layer">

        <view class="btn-item" v-for="(item,index) in functionList" :key="index"
          @click='goToPage(item.url,null,item.type)'>
          <image :src="item.icon" class="item-icon" mode=""></image>
          <view class="item-text">
            {{item.name}}
          </view>
        </view>

      </view>

      <view class="project-info-select">
        <view class="choose-year" @click="yearShowChoose()">
          {{projectYear??"年度"}}
          <image src="../../static/home-choose-iocn.svg" mode=""></image>
        </view>

        <view class="choose-year " @click="kindShowChoose()">
          {{projectKind ??"行业分类"}}
          <image src="../../static/home-choose-iocn.svg" mode=""></image>
        </view>

        <view class="choose-year " @click="areaShowChoose()">
          {{projectArea ??"建设地点"}}
          <image src="../../static/home-choose-iocn.svg" mode=""></image>
        </view>

        <view class="choose-year " @click="zjlyShowChoose()">
          <view class="choose-year-text">{{projectAmt ??"资金来源"}}</view>
          <image src="../../static/home-choose-iocn.svg" mode=""></image>
        </view>
      </view>
      <view class="stats-layer">
        <view class="bar-layer">
          <view class="bar-item">
            <view class="item-text">
              <view class="text-name">
                总建设开工率
              </view>
              <view class="text-rote">
                {{openRate}}%
              </view>
            </view>
            <view class="line-progress">
              <u-line-progress :percentage="openRate" inactiveColor="#E9F2FF" activeColor="#6EAAF7" :showText="false"
                height="16rpx"></u-line-progress>
            </view>
          </view>
          <view class="bar-item">
            <view class="item-text">
              <view class="text-name">
                总建设竣工率
              </view>
              <view class="text-rote">
                {{endRate}}%
              </view>
            </view>
            <view class="line-progress">
              <u-line-progress :percentage="endRate" inactiveColor="#E9F2FF" activeColor="#6EAAF7" :showText="false"
                height="16rpx"></u-line-progress>
            </view>
          </view>
        </view>

        <view class="stats-list">
          <view class="stats-item" @click="newProjectClick('xmzs',totalNum)">
            <view class="item-num">
              <text class="number">{{totalNum}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              项目总数
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('wkg',WKG)">
            <view class="item-num">
              <text class="number">{{WKG}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              未开工
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('ykg',YKG)">
            <view class="item-num">
              <text class="number">{{YKG}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              已开工
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('ywg',YWG)">
            <view class="item-num">
              <text class="number">{{YWG}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              已竣工
            </view>
          </view>

        </view>
      </view>

      <view class="stats-layer-next">
        <view class="bar-layer">
          <view class="bar-name">
            年度投资完成率
          </view>
          <view class="" style="width: 16rpx;">

          </view>
          <view class="line-progress">
            <u-line-progress :percentage="amtRate" inactiveColor="#E9F2FF" activeColor="#6EAAF7" :showText="false"
              height="16rpx"></u-line-progress>
          </view>
          <view class="" style="width: 12rpx;">

          </view>
          <view class="bar-rote">
            {{amtRate}}%
          </view>
        </view>
        <view class="stats-list">
          <view class="stats-item" @click="newProjectClick('ztz',amtTotal)">
            <view class="item-num">
              <text class="number">{{setAmt(amtTotal*10000)[0]}} </text>
              <text class="unit">{{setAmt(amtTotal*10000)[1]}}{{setAmt(amtTotal*10000)[2]}}</text>
            </view>
            <view class="item-name">
              总投资
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('ndjhtz',yearAmt)">
            <view class="item-num">
              <text class="number">{{setAmt(yearAmt*10000)[0]}}</text>
              <text class="unit">{{setAmt(yearAmt*10000)[1]}}{{setAmt(yearAmt*10000)[2]}}</text>
            </view>

            <view class="item-name">
              年度计划投资
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('ndsjtz',yearAmtSj)">
            <view class="item-num">
              <text class="number">{{setAmt(yearAmtSj*10000)[0]}}</text>
              <text class="unit">{{setAmt(yearAmtSj*10000)[1]}}{{setAmt(yearAmtSj*10000)[2]}}</text>
            </view>
            <view class="item-name">
              年度实际投资
            </view>
          </view>


        </view>
      </view>

      <view class="cards-list">
        <view v-for="(item,index) in projectList" :key="index">
          <view class="card">
            <view class="project-layer" :style="!item.isOpen ? {border:'none'}:''">
              <text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text>
              <view class="name">
                {{item.subName ?? "--"}}
              </view>
              <view class="card-status" @click="onChangeCard(index)">
                <image class="status-light" src="../../static/images/red.svg" mode="" v-if="item.status_fgw=='2'">
                </image>
                <image class="status-light" src="../../static/images/green.svg" mode=""
                  v-if="item.status_fgw=='0'||item.status_fgw==null"></image>
                <image class="status-light" src="../../static/images/yellow.svg" mode="" v-if="item.status_fgw=='1'">
                </image>
                <view class="status-name">
                  {{item.status ?? "--"}}
                </view>
                <image class="status-switch" src="../../static/images/liaghtUp.svg" mode=""
                  :class="item.isOpen ?'card-status-icon-change' :''">
                </image>
              </view>
            </view>
            <view class="card-content-box" :style="item.isOpen ? {height:'266rpx'} :''">
              <view class="line">
              </view>
              <view class="card-item" style="margin-top: 10rpx;">
                <view class="card-item-name">总 投 资 金 额</view>
                <view class="card-item-content">{{item.amtTotal ?? "--"}}</view>
              </view>

              <!-- 年度计划投资-申报单位（万元） -->
              <view class="card-item">
                <view class="card-item-name">年度计划投资</view>
                <view class="card-item-content">{{item.yearAmt ?? "--"}}</view>
              </view>

              <!-- 已完成投资（万元）-->
              <view class="card-item">
                <view class="card-item-name">年度完成投资</view>
                <view class="card-item-content">{{item.yearAmtSj ?? "--"}}</view>
              </view>
              <!-- 当前状态 -->
              <view class="card-item">
                <view class="card-item-name">项目状态</view>
                <view class="card-item-content">{{item.status ?? "--"}}</view>
              </view>
              <view class="card-btn-list">
                <view class="button" @click="goToReport('weekly',item.id,item.subName)">
                  周报
                </view>
                <view class="button" @click="goToReport('monthly',item.id,item.subName)">
                  月报
                </view>
                <view class="button" v-if="!item.isAttention" @click="changeFocus(item.id,item.isAttention)">
                  关注
                </view>
                <view class="button" @click="changeFocus(item.id,item.isAttention)" v-else>
                  取消关注
                </view>
                <view class="button" v-if="item.usersub == 1" @click="goToDetail(item.id,item.subName)">
                  项目详情
                </view>
                <view class="button" v-else @click="goToDetail(item.id,item.subName)">
                  项目详情
                </view>
                <view class="button" @click="goToReport('more',item.id,item.subName)">
                  更多
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-size" v-if="!moreListFlag.value">
        到底了~
      </view>
    </view>
    <!-- 年度选择 -->
    <u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
      @cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>

    <!-- 行业选择 -->
    <u-picker :show="kindShow" :columns="kindColumns" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
      closeOnClickOverlay></u-picker>

    <!-- 地点选择 -->
    <u-picker :show="areaShow" :columns="areaColumns" @confirm="areaClose" @cancel="areaClose" @close="areaClose"
      closeOnClickOverlay></u-picker>

    <!-- 资金来源 -->
    <u-picker :show="zjlyShow" :columns="zjlyColumns" @confirm="zjlyClose" @cancel="zjlyClose" @close="zjlyClose"
      closeOnClickOverlay></u-picker>
  </view>
</template>



<style lang="scss" scoped>
  $card-width: calc(100% - 58rpx);

  // .card .card-status {
  // 	// top: 32rpx;
  // 	height: 64rpx;
  // 	background: #F2F7FF;
  // 	font-weight: 500;
  // 	font-size: 12px;
  // 	color: #98B7DC;
  // }



  .bottom-size {
    margin-top: 30rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 29rpx;
    font-weight: 300;
    color: #B5B5B5;
  }



  .card .project-layer {
    justify-content: flex-start;

    // padding-bottom: 20rpx !important;
    .name {
      flex-grow: 1;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;

    }
  }





  .container {
    padding-top: 0 !important;
    width: 100%;
    min-height: 100vh;

    .top-back-pie {

      position: absolute;
      top: -2050rpx;
      left: 50%;
      transform: translate(-50%, 0);
      width: 2500rpx;
      height: 2500rpx;
      border-radius: 50%;
      background-color: #002F69;
      z-index: 0;

    }

    .content-layer {
      position: relative;
      position: absolute;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding-bottom: calc(var(--window-bottom) + 38rpx);

      .top-layer {
        position: fixed;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        background-color: #002F69;
        padding-bottom: 20rpx;

        .project-title {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: var(--status-bar-height);
          width: 100%;
          height: 88rpx;
          font-size: 36rpx;
          font-weight: 600;
          color: #FFF;
        }

        .search-layer {
          margin-top: 24rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 90%;
          background-color: #fff;
          border-radius: 16rpx;

          .search-input {
            display: flex;
            align-items: center;
            width: 78%;
            height: 72rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            text-align: left;

            .search-icon {
              width: 40rpx;
              height: 40rpx;
              margin-right: 26rpx;
              background-image: url('@/static/home-search-icon.svg');
              background-size: 100% 100%;
            }
          }

          .search-line {
            width: 0;
            height: 28rpx;
            border-left: 1rpx solid rgba(0, 47, 105, 0.5);

          }

          .search-focus {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10rpx;
            width: 22%;

            .search-focus-icon {
              width: 40rpx;
              height: 40rpx;
              background-image: url('@/static/focus.svg');
              background-size: 100% 100%;

            }

            .text {
              margin-right: 20rpx;
              font-size: 28rpx;
              font-weight: 600;
              white-space: nowrap;
              color: #06356D;
            }
          }
        }

      }


      .banner-box {
        margin-top: calc(var(--status-bar-height) + 210rpx);
        width: $card-width;
      }

      .prompt-layer {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: $card-width;

        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 24rpx;
          width: 338rpx;
          height: 120rpx;
          background-color: #fff;
          box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF, inset 0rpx 0rpx 6rpx 0rpx #D8EEFF, inset 2rpx 2rpx 0rpx 0rpx #FFFFFF;
          border-radius: 12rpx;

          .item-text {
            font-size: 28rpx;
            font-weight: 500;
            color: #222222;
          }

          .item-image {
            position: relative;

            image {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
            }

            .sign {
              position: absolute;
              left: 64rpx;
              top: 0;
              padding: 0 10rpx 0 10rpx;
              font-size: 12rpx;
              background-color: #FC5E74;
              color: #fff;
              border-radius: 16rpx;
              border: 2px solid #fff;

            }
          }

        }

      }

      .button-layer {
        margin-top: 30rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        row-gap: 32rpx;
        width: $card-width;

        .btn-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 14rpx;
          width: 160rpx;
          height: 160rpx;
          border-radius: 12rpx;
          background-color: #fff;
          box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF;

          .item-icon {
            width: 80rpx;
            height: 80rpx;
          }

          .item-text {
            font-size: 28rpx;
            font-weight: 500;
            color: #222222;
            line-height: 28rpx;
			text-align: center;
          }
        }

      }

      .sub-title {
        display: flex;
        justify-content: center;
        width: $card-width;
        font-size: 36rpx;
        font-weight: 500;
        color: #222222;
      }

      .project-info-select {
        margin: auto;
        margin-top: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32rpx;
        width: $card-width;
        height: 88rpx;
        background: #F5F5F5;
        border-radius: 56rpx 56rpx 0rpx 0rpx;

        .choose-year {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #999999;

          .choose-year-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }


      .stats-layer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        justify-content: center;
        gap: 50rpx;
        width: $card-width;
        background-color: #FFF;
        border-radius: 10rpx;
        padding: 48rpx 0 44rpx 0;

        .bar-layer {
          display: flex;
          justify-content: center;
          gap: 72rpx;
          width: 100%;

          .bar-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24rpx;
            width: 40%;

            .item-text {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 10rpx;

              .text-name {
                font-size: 28rpx;
                font-weight: 500;
                color: #666666;
              }

              .text-rote {
                font-size: 28rpx;
                font-weight: 700;
                color: #C44E00;
              }
            }

            .line-progress {
              width: 100%;
            }
          }

        }

        .stats-list {
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(100% - 88rpx);

          .line {

            margin-top: 40rpx;
            height: 24rpx;
            width: 0;
            border: none;
            border-right: 2rpx solid #EBEBEB;
          }

          .stats-item {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .item-num {
              display: flex;
              justify-content: center;
              align-items: flex-end;
              gap: 5rpx;
              color: #0033A8;

              .number {
                font-size: 35rpx;
                font-weight: 800;
              }

              .unit {
                font-size: 20rpx;
              }

            }

            .item-name {
              font-size: 25rpx;
            }
          }
        }

      }

      .stats-layer-next {
        margin-top: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        justify-content: center;
        gap: 46rpx;
        width: $card-width;
        background-color: #FFF;
        border-radius: 10rpx;
        padding: 48rpx 0 44rpx 0;

        .bar-layer {
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(100% - 88rpx);

          .bar-name {
            font-size: 28rpx;
            font-weight: 500;
            font-size: 28rpx;
          }

          .line-progress {
            flex-grow: 1;
          }

          .bar-rote {
            font-size: 30rpx;
            font-weight: 600;
            color: #C44E00;
          }
        }

        .stats-list {
          width: calc(100% - 88rpx);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .line {
            margin-top: 49rpx;
            width: 0;
            height: 24rpx;
            border: none;
            border-right: 2rpx solid #EBEBEB;
          }

          .stats-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14rpx;
            width: 33%;

            .item-num {
              display: flex;
              justify-content: center;
              align-items: flex-end;
              gap: 5rpx;
              color: #0035A9;

              .number {
                font-size: 36rpx;
                font-weight: 600;
                line-height: 36rpx;
                white-space: nowrap;
              }

              .unit {
                font-size: 20rpx;
              }

            }

            .item-name {
              font-size: 24rpx;
              white-space: nowrap;
            }
          }
        }

      }


    }


  }
</style>