subject_gxj/xj_project_app_2024_2_18/pages/home/oversawHome.vue

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

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

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

  import {
    getannouncementList,
    getUnwriteReportList,
    getHomeStats,
    getBanner,
    getMangerStatus,
    getStaticsManageTz,
    getMonthFX,
    getStaticsManageHyfl
  } from "@/api/home.js"

  import {
    getJSDDlist,
    getZJLYlist,
    getHYFLlist,
  } from "@/api/work/projectInfo.js";
import cuOverdue from "./components/cu-overdue.vue";
  import {
    getMessageNum
  } from "@/api/work/message.js"

  import store from '@/store'

  import {
    checkRoleById
  } from "@/utils/permission.js"
  import iconEnterpriseInfo from "@/static/func/enterpriseInfos.svg";
  import yjtxIcon from '@/static/images/homeIcon/yjtx-icon.svg'
  import xmtzIcon from '@/static/images/homeIcon/xmtz-icon.svg'
  import zhgdIcon from '@/static/images/homeIcon/zhgd-icon.svg'
  import bslcIcon from '@/static/images/homeIcon/bslc-icon.svg'
  import tzfxIcon from '@/static/images/homeIcon/tzfx-icon.svg'
  import hhdIcon from '@/static/images/homeIcon/hhd-icon.svg'
  import zdxmIcon from '@/static/images/homeIcon/zdxm-icon.svg'
  import wtdbIcon from '@/static/images/homeIcon/wtdb-icon.svg'
  import qyxxIcon from '@/static/images/homeIcon/qyxx-icon.svg'
  import zcwjIcon from '@/static/images/homeIcon/zcwj-two-icon.svg'
  import tzglIcon from '@/static/images/homeIcon/tzgl-icon.svg'
  import jdglIcon from '@/static/images/homeIcon/jdgl-icon.svg'
  import dbsxIcon from '@/static/images/homeIcon/dbsx-icon.svg'
  import xmdbIcon from '@/static/images/homeIcon/xmdb-icon.svg'
  // 项目信息
  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();
    }

    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();
    }

    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();
    }

    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();
    }
    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
        }
      })
    })
  }
  //页面穿透
  function newProjectClick(val, num) {
    if (num != 0) {
      let throughObj = {
        year: projectYear.value,
        indusKind: projectKindId,
        subjectId: projectAreaId,
        zjly: projectAmtId,
        queryTimeType: '4',
        queryType: 1,
      }
      let obj = {
        xjxm: {
          propKind: '1',
          name: '新建项目'
        },
        xjproject: {
          propKind: '2',
          name: '续建项目'
        },
        cbxm: {
          propKind: '3',
          name: '储备项目'
        },
        all: {
          name: '项目总数'
        },
        tgsl: {
          otherStatus: '8',
          name: '停工数量'
        },
        ywgzl: {
          otherStatus: 'A',
          name: '已竣工总量'
        },
        sbb: {
          subjectId: '1',
          name: '市本级'
        },
        yzq: {
          subjectId: '2',
          name: '伊州区'
        },
        blkx: {
          subjectId: '3',
          name: '巴里坤县'
        },
        ywx: {
          kind: '4',
          name: '伊吾县'
        },
        gxq: {
          subjectId: '5',
          name: '高新区'
        },
        sbl: {
          blSub: true,
          name: '市分管'
        },
        zj: {
          isZj: '1',
          blSub: true,
          name: '在建'
        },
        tg: {
          blSub: true,
          otherStatus: 8,
          name: '停工'
        },
        ztz: {
          name: '总投资'
        },
        ndjhtz: {
          name: '年度计划投资'
        },
        ndsjtz: {
          name: '年度实际投资'
        },
        hdxm: {
          light: 2,
          name: '红灯项目'
        },
        Ydxm: {
          light: 1,
          name: '黄灯项目'
        },
        ldxm: {
          light: 0,
          name: '绿灯项目'
        }
      }
      throughObj = {
        ...throughObj,
        ...obj[val]
      }
      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 gotoYYQ(val) {
    let throughObj = {
      year: projectYear.value,
      indusKind: projectKindId,
      subjectId: projectAreaId,
      zjly: projectAmtId,
      queryTimeType: '4',
      queryType: 1,
      blSub: true,
      containHide: true,
      overStatus: 1,
      type: 'home'
    }
    if (val != 0) {
      uni.$u.route({
        url: 'pages/overdue/overdued/index',
        params: throughObj
      })
    } else {
      uni.showToast({
        icon: 'none',
        title: '无该项数据'
      })
    }
  }

  function gotoWTQD(val) {
    let throughObj = {
      year: projectYear.value,
      indusKind: projectKindId,
      subjectId: projectAreaId,
      zjly: projectAmtId,
      queryTimeType: '4',
      queryType: 1,
      containHide: true,
      type: 'home'
    }
    let obj = {
      yzg: {
        status: '1',
        containHide: true
      },
      zdgj: {
        containHide: true,
        name: '重点跟进'
      },
      ytqy: {
        containHide: true,
        closeReason: 1,
        name: '约谈企业'
      },
      fdbh: {
        containHide: true,
        closeReason: 2,
        name: '发督办函'
      }
    }
    throughObj = {
      ...throughObj,
      ...obj[val]
    }
    if (val != 0) {
      uni.$u.route({
        url: 'pages/countAnalysis/overseeList/index',
        params: throughObj
      })
    } else {
      uni.showToast({
        icon: 'none',
        title: '无该项数据'
      })
    }
  }


  function onProjectAmtClick(val) {
    if (val.amt != 0) {
      let throughObj = {
        year: projectYear.value,
        indusKind: projectKindId,
        subjectId: projectAreaId,
        zjly: projectAmtId || val.id,
        name: val.title,
        queryTimeType: '4',
        queryType: 1,
      }
      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: '无该项数据'
      })
    }
  }
  // 功能列表
  let functionList = ref([{
    name: '项目待办',
    url: '/pages/projectToDo/list/index',
    icon: xmdbIcon,
    num: 0,
    numShow: true,
    type: 'xmdb',
    permissionCode: '711'
  }, {
    name: '三库管理',
    url: '/pages/projectInfo/index',
    icon: xmtzIcon,
    numShow: false,
    type: 'all',
    permissionCode: '711'
  },{
    name: '专项资金',
    url: '/pages/projectImportant/index',
    icon: zdxmIcon,
    numShow: false,
    type: 'zdxm',
    permissionCode: '711'
  }, {
    name: '统计分析',
    url: '/pages/countAnalysis/newHeadAnalysis/index',
    icon: tzfxIcon,
    numShow: false,
    type: 'jbxx',
    permissionCode: '711'
  }, {
    name: '红黄灯项目',
    url: '/pages/light/index',
    icon: hhdIcon,
    numShow: false,
    type: 'hhd',
    permissionCode: '711'
  }, {
    name: '预警提醒',
    url: '/pages/overdue/index',
    icon: yjtxIcon,
    num: 0,
    numShow: true,
    type: 'yjtx',
    permissionCode: '711'
  }, {
    name: '问题督办',
    url: '/pages/morePage/wtdb/wtdbMorePage',
    icon: wtdbIcon,
    numShow: false,
    type: 'jbxx',
    permissionCode: '711'
  },  {
    name: '智联工地',
    url: '/pages/videoManage/list/index',
    icon: zhgdIcon,
    numShow: false,
    type: 'jbxx',
    permissionCode: '711'
  }])

  let funcList = ref([
    [{
      name: '企业信息',
      url: '/pages/enterpriseInfo/index',
      icon: qyxxIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '政策文件',
      url: '/pages/policy/search/index',
      icon: zcwjIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '储备项目',
      url: '/pages/cbProject/index',
      icon: dbsxIcon,
      type: 'cbxm',
      permissionCode: '711'
    }, {
      name: '通知管理',
      url: '/pages/announcement/list/index',
      icon: tzglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '联系人',
      url: '/pages/contact/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }],
    [{
      name: '重大事项',
      url: '/pages/important/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '前期手续',
      url: '/pages/preFlow/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '产业链服务',
      url: '/pages/intermediaryService/search/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '政策文件',
      url: '/pages/policy/search/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '新闻资讯',
      url: '/pages/policy/search/index',
      icon: jdglIcon,
      type: 'xwzx',
      permissionCode: '711'
    }],
    [{
      name: '周报',
      url: '/pages/weekly/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '月报',
      url: '/pages/monthly/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '年度计划',
      url: '/pages/yearly/index',
      icon: jdglIcon,
      type: 'jbxx',
      permissionCode: '711'
    }, {
      name: '办事流程',
      url: '/pages/process/index',
      icon: bslcIcon,
      type: 'jbxx',
      permissionCode: '711'
    }]
  ])


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

  //获取项目数据
  let statusData = ref({})
  let startWorkpieChartData = ref({
    series: [{
      color: "#6EAAF7",
      data: ''
    }]
  })
  let pieChartData = ref({
    series: [{
      color: "#6EAAF7",
      data: ''
    }]
  })
  let finishPieChartData = ref({
    series: [{
      color: "#6EAAF7",
      data: ''
    }]
  })
  let yearAmtPieChartData = ref({
    series: [{
      color: "#6EAAF7",
      data: ''
    }]
  })

  let yearWorkPieChartData = ref({
    series: [{
      color: "#6EAAF7",
      data: ''
    }]
  })
  let amtData = ref({
    statusList: [],
    outyear_hb: "",
    outyear_tb: "",
    outyear_zb: "",
    outyearamt_1: "",
    outyearamt_2: "",
    outyearamt_total: "",
  })



  let hyzbData = ref([])
  let hyzbList = ref([])
  let jsddData = ref([])
  let jsddList = ref([])
  let colorList = [
    '#0035A9', '#074EC4', '#1E7FDF', '#0DA9FF', '#4CBFFF', '#6ACFFF', '#A2DEFF', '#55EBDB', '#7FFACA', '#61F466',
    '#00E2C1', '#04CE8E', '#02B30C', '#1C8805', '#025006', '#584802', '#817D16', '#AA8A11', '#C29A00', '#E1B300',
    '#FFC737', '#FFD800', '#FFEA68', '#FFCE9F', '#FFAE7F', '#FC8E4D', '#FF6911', '#E03300',
    '#BA2000', '#7C0909', '#9800A0', '#C105CB', '#F31FFF', '#F98EFF', '#FBBAFF', '#FDD1FF',
  ]
  //数组对半分
  function splitArrayInHalf(arr) {
    const mid = Math.ceil(arr.length / 2); // 计算中间位置，向上取整以处理奇数长度的情况  
    const firstHalf = arr.slice(0, mid); // 截取前半部分  
    const secondHalf = arr.slice(mid); // 截取后半部分，包括中间位置  
    return [firstHalf, secondHalf]; // 返回两个数组  
  }

  function getProjectInfo() {
    let params = {
      year: projectYear.value,
      indusKind: projectKindId,
      buildAddre: projectAreaId,
      zjly: projectAmtId
    }
    console.log(params);
    getMangerStatus(params).then(res => {
      console.log('接口返回数据', res);
      statusData.value = res.data
      startWorkpieChartData.value.series[0].data = (res.data?.num_year_kgl / 100).toFixed(4)
      finishPieChartData.value.series[0].data = (res.data?.num_year_wgl / 100).toFixed(4)
    })
    getStaticsManageTz(params).then(res => {
      amtData.value.statusList = chunkArrayObjects(res.data.data, 2)
      amtData.value.outyear_hb = res.data.outyear_hb
      amtData.value.outyear_tb = res.data.outyear_tb
      amtData.value.outyear_zb = res.data.outyear_zb
      amtData.value.outyearamt_1 = res.data.outyearamt_1
      amtData.value.outyearamt_2 = res.data.outyearamt_2
      amtData.value.outyearamt_total = res.data.outyearamt_total
      yearAmtPieChartData.value.series[0].data = (Number(res.data?.outyear_zb) / 100).toFixed(4)
      console.log(yearAmtPieChartData.value.series[0].data)
      // yearWorkPieChartData.value.series[0].data = (res.data.data.num_year_wgl/100).toFixed(4)
    })


    getMonthFX(params).then(res => {
      console.log('月度分析', res);
      let month = []
      let amt_sj = []
      let ljtz = 0
      let ljtzArr = []
      let amt_jh = []
      let amt_zb = []
      res.data.list.forEach((item, index) => {
        month.push(item.kj_month)
        amt_sj.push(item.amt_sj)
        ljtz = ljtz + Number(item.amt_sj)
        ljtzArr.push(ljtz)
        amt_jh.push(item.amt_jh)
        amt_zb.push(item.amt_zb)
      })
      console.log(ljtzArr, '累计投资');
      monthData.value.categories = month
      monthTageData.value.categories = month
      monthData.value.series[0].data = amt_sj
      monthData.value.series[1].data = ljtzArr
      monthTageData.value.series[0].data = amt_jh
      monthTageData.value.series[1].data = amt_sj
      monthTageData.value.series[2].data = amt_zb

    })
    nextTick(() => {
      getStaticsManageHyfl(params).then(res => {
        console.log('建设地点', res);
        let jsdd = {
          series: [{
            data: []
          }]
        };
        let jsddArr = []

        res.data?.qxList.forEach((item, index) => {
          jsdd.series[0].data.push({
            name: item.jsddName,
            value: item.amt,
            labelShow: false,
            color: colorList[index]
          })
          jsddArr.push({
            name: item.jsddName,
            value: item.amtSjRate,
            color: colorList[index]
          })
        })
        // console.log(jsdd);
        let hyzb = {
          series: [{
            data: []
          }]
        };
        let arr = []
        res.data?.list.forEach((item, index) => {
          hyzb.series[0].data.push({
            name: item.unit_name,
            value: item.num_total,
            labelShow: false,
            color: colorList[index]
          })
          arr.push({
            name: item.unit_name,
            value: item.num_bl,
            color: colorList[index]
          })
        })
        arr = splitArrayInHalf(arr)
        hyzbData.value = hyzb
        hyzbList.value = arr
        jsddData.value = jsdd
        jsddList.value = jsddArr
      })
    })

  }

  //数组重构为三个为一组

  function chunkArrayObjects(array, chunkSize) {
    const chunkedArray = [];

    for (let i = 0; i < array.length; i += chunkSize) {
      chunkedArray.push(array.slice(i, i + chunkSize));
    }

    return chunkedArray;
  }


  // rpx转px
  function rpxToPx(rpx) {
    const screenWidth = uni.getSystemInfoSync().screenWidth
    return (screenWidth * Number.parseInt(rpx)) / 750
  }

  // px转rpx
  function pxToRpx(px) {
    const screenWidth = uni.getSystemInfoSync().screenWidth
    return (750 * Number.parseInt(px)) / screenWidth
  }
  //粘性定位高度
  let offsetValue = ref(0)

  function getOffset() {
    let data = uni.getWindowInfo()
    offsetValue.value = data.statusBarHeight + uni.upx2px(120)
    console.log(offsetValue.value);
  }

  let swiperCurrut = ref(0)

  function onSwiperChange(e) {
    swiperCurrut.value = e.detail.current
    console.log(e);
  }


  let pieOption = {
    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: 0,
    title: {
      name: " ",
      fontSize: 18,
      color: "#C44E00"
    },
    subtitle: {
      name: " ",
      fontSize: 12,
      color: "#666666"
    },

    extra: {
      arcbar: {
        type: "circle",
        width: 5,
        backgroundColor: "#E9F2FF",
        startAngle: 1.5,
        endAngle: 0.25,
        gap: 2,
        lineCap: "butt"
      }
    }
  }

  // 月度投资
  let monthEchartsOpts = {
    color: ["#ACE5D9", "#B1C7FD", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: [0, 15, 0, 5],
    enableScroll: true,
    legend: {
      position: 'top',
      padding: 25,
      itemGap: 20
    },
    xAxis: {
      disableGrid: true,
      scrollShow: true,
      itemCount: 7,
      scrollColor: '#F0DEAB',
      scrollBackgroundColor: '#F5F5F5'
    },
    yAxis: {
      disabled: false,
      disableGrid: false,
      splitNumber: 5,
      gridColor: '#DDDDDD',
      padding: 10,
      showTitle: true,
      data: [{
        min: 0,
        title: '(万元)',
        fontSize: 10,
        titleFontSize: 10,
        fontColor: '#999999'
      }]
    },
    dataLabel: false,
    extra: {
      column: {
        type: "group",
        width: 5,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
        // linearType: "custom",
        seriesGap: 1,
        linearOpacity: 0.5,
        barBorderCircle: true,
        // customColor: [
        // 	"#ACE5D9",
        // 	"#B1C7FD"
        // ]
      }
    }
  }

  let monthData = ref({
    categories: [],
    series: [{
        name: "月度完成投资",
        data: []
      },
      {
        name: "累计完成投资",
        data: []
      }
    ]
  })


  //月度进度占比情况
  let monthTageOption = {
    color: ["#ACE5D9", "#B1C7FD", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: [0, 5, 0, 5],
    enableScroll: true,
    touchMoveLimit: 24,
    legend: {
      position: 'top',
      padding: 25,
      itemGap: 10,
      lineHeight: 20
    },
    xAxis: {
      disableGrid: true,
      scrollShow: true,
      itemCount: 7,
      scrollColor: '#F0DEAB',
      scrollBackgroundColor: '#F5F5F5'

    },
    dataLabel: false,
    yAxis: {
      disabled: false,
      disableGrid: false,
      splitNumber: 5,
      gridColor: '#DDDDDD',
      padding: 10,
      showTitle: true,
      data: [{
          position: "right",
          title: "(%)",
          textAlign: 'left',
          fontSize: 10,
          titleFontSize: 10,
          fontColor: '#999999'
        },
        {
          position: "left",
          min: 0,
          title: "(万元)",
          textAlign: "right",
          fontSize: 10,
          titleFontSize: 10,
          fontColor: '#999999'
        }

      ]
    },
    extra: {
      mix: {
        column: {
          width: 5,
          activeBgColor: "#000000",
          activeBgOpacity: 0.08,
          // linearType: "custom",
          seriesGap: 1,
          linearOpacity: 0.5,
          barBorderCircle: true,
        }
      }
    }
  }


  let monthTageData = ref({
    categories: [],
    series: [{
        name: "年度投资计划",
        index: 1,
        type: "column",
        data: []
      },
      {
        name: "年度完成投资",
        index: 1,
        type: "column",
        data: []
      },
      {
        name: "计划完成率",
        type: "line",
        color: "#175AED",
        data: []
      }

    ]
  })

  //投资占比
  let investOption = ref({
    update: true,
    color: ["#13D4FF", "#138BFF", "#0035A9", "#0ACD76", "#04B4B5"],
    enableScroll: false,
    legend: {
      show: false,

    },
    title: {
      name: "",
      fontSize: 12,
      color: "#3D3D3D"
    },
    subtitle: {
      name: "",
      fontSize: 12,
      color: "#3D3D3D"
    },
    extra: {
      ring: {
        customRadius: 50,
        ringWidth: 17,
        border: false,
        offsetAngle: -90,
        activeRadius: 3,
      },
      tooltip: {
        showArrow: false
      }
    }
  })
  let investChartData = ref({
    series: [{
      data: [{
        name: '新建项目',
        value: 100,
        labelShow: false
      }, {
        name: '续建项目',
        value: 100,
        labelShow: false
      }, {
        name: '储备项目',
        value: 100,
        labelShow: false
      }]
    }]
  })


  //获取顶部距离
  let topheight = ref(0)

  function getTopHeight() {
    uni.getSystemInfo({
      success: function(e) {
        //48为自定义导航栏高度，一般为44
        let topPx = e.statusBarHeight + uni.upx2px(90) // 顶部状态栏+沉浸式自定义顶部导航
        topheight.value = topPx / (uni.upx2px(topPx) / topPx) // px转rpx，这里必须转化为rpx，不然适配失败

      },
    });
    console.log(topheight.value);
  }
  //获取数量
  function getHomeNum() {
    getOverdueNum().then(res => {
      let text = '99+'
      functionList.value.forEach(item => {
        if (item.type == 'yjtx') {
          if (res.data.isOver > 99) {
            item.num = text
          } else {
            item.num = res.data.isOver
          }
        } else if (item.type == 'xmdb') {
          if (res.data.numTodo > 99) {
            item.num = text
          } else {
            item.num = res.data.numTodo
          }
        }
      })
    })
  }




  onLoad(async () => {
    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 == '1') {
      list[0].visible = false
      list[1].visible = true
      list[2].visible = false
      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 == '1') {
      let now = new Date();
      projectYear.value = now.getFullYear();
      defaultIndex.value = [projectYear.value - 2000];
      getTopHeight()
      // // judgeFuncList(); //判断权限
      // getAnnounceMent(); //获取公告
      getHYFL(); //获取行业分类
      getJSDD(); //获取建设地点
      getZJLY(); // 获取资金来源
      // getOverdue(); //获取逾期数量
      // // getUnwirteList(); //获取未填写周报月报信息
      // getMessageCount(); //获取未读消息数量
    }

  });
  onShow(() => {
    getBannerList(); //获取轮播图数据
    getHomeNum()
  })
  onReady(() => {
    let kind = uni.getStorageSync('userKind')
    if (kind == '1') {
      getProjectInfo(); //获取项目数据
    }
  })
</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='12rpx'
          height="304rpx" @click="bannerClick"></u-swiper>
      </view>

      <!-- <u-sticky :offsetTop="offsetValue" class="u-sticky" index="3"> -->
      <!-- 				<scroll-view  scroll-x="true" class="button-layer">
					<view class="btn-item" v-for="(item,index) in  functionList" :key="index">
						<image :src="item.icon" class="item-icon" mode=""></image>
						<view class="item-text">
							{{item.name}}
						</view>
					</view>
				</scroll-view> -->
      <view class="button-layer">
        <view class="btn-item" v-for="(item,index) in functionList" :key="index"
          @click="goToPage(item.url,item.permissionCode,item.type)">
          <view class="item-image">
            <image :src="item.icon" class="item-icon" mode=""></image>
            <view class="sign" v-if="item.numShow && item.num !=0">
              <view class="text">
                {{item.num}}
              </view>
            </view>
          </view>
          <view class="item-text">
            {{item.name}}
          </view>
        </view>
      </view>
      <!-- </u-sticky> -->

      <view class="uni-swiper-dot-box">
        <swiper class="swiper-box" @change="onSwiperChange">
          <swiper-item v-for="(item, index) in funcList" :key="index" class="swiper-item">
            <view class="swiper-item-items" v-for="(items,indexs) in item" :key="indexs"
              @click="goToPage(items.url,items.permissionCode,items.type)">
              <image :src="items.icon" mode=""></image>
              <view class="items-text">
                {{items.name}}
              </view>
            </view>
          </swiper-item>
        </swiper>
        <view class="swiper-dot">
          <view class="swiper-dot-item" v-for="(item,index) in funcList" :key="index"
            :class="swiperCurrut == index ? 'dot-check' :''">

          </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-next" style="margin-top: 0;padding-bottom: 24rpx;">
        <view class="sub-title">
          项目建设总体情况
        </view>

        <view class="pie-layer">
          <view class="pie-item">
            <view class="pie-content">
              <qiun-data-charts type="arcbar" v-if="startWorkpieChartData.series[0].data" :opts="pieOption"
                :chartData="startWorkpieChartData" />
              <view class="label-rote">
                {{statusData?.num_year_kgl}}%
              </view>
              <view class="label">年度开工率</view>
            </view>
            <view class="item-text-layer">
              <view class="item-text" style="margin-top: 10rpx;">
                <text class="label">同比</text>
                <text class="rote">{{statusData?.num_year_kg_tb}}%</text>
              </view>
              <view class="item-text">
                <text class="label">环比</text>
                <text class="rote" style='color: #698453;'>{{statusData?.num_year_kg_hb}}%</text>
              </view>
            </view>

          </view>
          <view class="pie-item">
            <view class="pie-content">
              <qiun-data-charts type="arcbar" v-if="finishPieChartData.series[0].data" :opts="pieOption"
                :chartData="finishPieChartData" />
              <view class="label-rote">
                {{statusData?.num_year_wgl}}%
              </view>
              <view class="label">年度竣工率</view>
            </view>
            <view class="item-text-layer">
              <view class="item-text" style="margin-top: 10rpx;">
                <text class="label">同比</text>
                <text class="rote">{{statusData?.num_year_wg_tb}}%</text>
              </view>
              <view class="item-text">
                <text class="label">环比</text>
                <text class="rote" style='color: #698453;'>{{statusData?.num_year_wg_hb}}%</text>
              </view>
            </view>

          </view>
        </view>

        <view class="stats-list"
          style="background: linear-gradient( 90deg, rgba(242,247,255,0.2) 0%, rgba(241,247,255,0.6) 24%, #F2F7FF 49%, rgba(242,247,255,0.6) 77%, rgba(236,244,255,0.2) 100%);margin-top: 28rpx;">
          <view class="stats-item" @click="newProjectClick('xjxm',statusData?.num_1)">
            <view class="item-num">
              <text class="number">{{statusData?.num_1}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              新建项目
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('xjproject',statusData?.num_2)">
            <view class="item-num">
              <text class="number">{{statusData?.num_2}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              续建项目
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('cbxm',statusData?.num_3)">
            <view class="item-num">
              <text class="number">{{statusData?.num_3}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              储备项目
            </view>
          </view>
        </view>
        <view class="stats-list"
          style="background: linear-gradient( 90deg, rgba(242,247,255,0.2) 0%, rgba(241,247,255,0.6) 24%, #F2F7FF 49%, rgba(242,247,255,0.6) 77%, rgba(236,244,255,0.2) 100%)">
          <view class="stats-item" @click="newProjectClick('all',statusData?.num_total)">
            <view class="item-num">
              <text class="number">{{statusData?.num_total}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              项目总数
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('tgsl',statusData?.num_7)">
            <view class="item-num">
              <text class="number">{{statusData?.num_7}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              停工数量
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('ywgzl',statusData?.num_5)">
            <view class="item-num">
              <text class="number">{{statusData?.num_5}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              已竣工总量
            </view>
          </view>
        </view>
        <view class="status-line">

        </view>

        <view class="stats-list">
          <view class="stats-item" @click="newProjectClick('sbb',statusData?.num_year_qx_1)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_qx_1}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              市本级	
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('yzq',statusData?.num_year_qx_2)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_qx_2}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              伊州区
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('gxq',statusData?.num_year_qx_5)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_qx_5}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              高新区
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('blkx',statusData?.num_year_qx_3)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_qx_3}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              巴里坤县
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="newProjectClick('ywx',statusData?.num_year_qx_4)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_qx_4}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              伊吾县
            </view>
          </view>
        </view>


        <view class="stats-list" style="margin-top: 0px !important;">
          <view class="stats-item" @click="newProjectClick('sbl',statusData?.num_s_total)">
            <view class="item-num">
              <text class="number">{{statusData?.num_s_total}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              市分管
            </view>
          </view>
          <view class="line">
          </view>
          <view class="stats-item" @click="newProjectClick('zj',statusData?.num_s_1)">
            <view class="item-num">
              <text class="number">{{statusData?.num_s_1}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              在建
            </view>
          </view>
          <view class="line">
          </view>
          <view class="stats-item" @click="gotoYYQ(statusData?.num_s_2)">
            <view class="item-num">
              <text class="number">{{statusData?.num_s_2}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              逾期
            </view>
          </view>
          <view class="line">
          </view>
          <view class="stats-item" @click="newProjectClick('tg',statusData?.num_s_3)">
            <view class="item-num">
              <text class="number">{{statusData?.num_s_3}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              停工
            </view>
          </view>
          <view class="line">
          </view>
          <view class="stats-item" @click="newProjectClick('wg',statusData?.num_s_4)">
            <view class="item-num">
              <text class="number">{{statusData?.num_s_4}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              竣工
            </view>
          </view>
        </view>
      </view>

      <view class="stats-layer-next">
        <view class="sub-title">
          项目总体投资情况
        </view>

        <view class="pie-layer" style="width: 100%;">
          <view class="pie-item-box2">
            <view class="item-text">
              <text class="rote">{{amtData?.outyear_tb}}%</text>
              <text class="label">同比</text>
            </view>
            <view class="pie-content">
              <qiun-data-charts type="arcbar" :opts="pieOption" :chartData="yearAmtPieChartData" />
              <view class="label-rote">
                {{(yearAmtPieChartData.series[0].data * 100).toFixed(2)}}%
              </view>
              <view class="label" style="bottom: 80rpx;">年度投资占比</view>
            </view>

            <view class="item-text">
              <text class="rote" style='color: #698453;'>{{amtData?.outyear_hb}}%</text>
              <text class="label">环比</text>
            </view>
          </view>
        </view>
        <view class="stats-list">
          <view class="stats-item">
            <view class="item-num">
              <text class="number">{{amtData.outyearamt_2}}</text>
              <text class="unit">万</text>
            </view>
            <view class="item-name" style="font-size: 28rpx;">
              总投资
            </view>
          </view>
        </view>

        <view class="stats-list"
          style="background: linear-gradient( 90deg, rgba(242,247,255,0.2) 0%, rgba(241,247,255,0.6) 24%, #F2F7FF 49%, rgba(242,247,255,0.6) 77%, rgba(236,244,255,0.2) 100%);margin-top: 20rpx;">
          <view class="stats-item" style="width: 49%;">
            <view class="item-num">
              <text class="number">{{amtData.outyearamt_total}}</text>
              <text class="unit">万</text>
            </view>
            <view class="item-name">
              年度计划投资
            </view>
          </view>
          <view class="stats-item" style="width: 49%;">
            <view class="item-num">
              <text class="number">{{amtData.outyearamt_1}}</text>
              <text class="unit">万</text>
            </view>
            <view class="item-name">
              年度实际投资
            </view>
          </view>
        </view>
        <view class="stats-list" v-for="(item,index) in amtData.statusList" :key="index">
          <view class="stats-item" style="width: 50%;" @click="onProjectAmtClick(items)">
            <view class="item-num">
              <text class="number">{{item[0]?.amt  || 0}}</text>
              <text class="unit">万</text>
            </view>
            <view class="item-name">
              {{item[0]?.title}}
            </view>

          </view>
          <view class="line">

          </view>
          <view class="stats-item" style="width: 50%;" @click="onProjectAmtClick(items)" >
            <view class="item-num" v-if="item[1]">
              <text class="number">{{item[1]?.amt || 0}}</text>
              <text class="unit">万</text>
            </view>
            <view class="item-name">
              {{item[1]?.title}}
            </view>

          </view>
        </view>
      </view>

      <view class="stats-layer-next">
        <view class="sub-title">
          月度投资完成情况
        </view>
        <view class="bar-content-layer">
          <qiun-data-charts type="column" :ontouch='true' :opts="monthEchartsOpts" :chartData="monthData"
            v-if="monthData.categories.length" />
        </view>
      </view>
      <view class="stats-layer-next">
        <view class="sub-title">
          月度进度占比情况
        </view>
        <view class="bar-content-layer">
          <qiun-data-charts type="mix" :ontouch='true' :opts="monthTageOption" :chartData="monthTageData"
            v-if="monthTageData.categories.length" />
        </view>
      </view>
      <view class="stats-layer-next">
        <view class="sub-title">
          项目偏离及整改情况
        </view>
        <view class="light-layer">
          <view class="item" @click="newProjectClick('hdxm',statusData?.num_year_p_2)">
            <image src="../../static/images/red.svg" mode=""></image>
            <view class="item-text">
              <view class="text-num" style="color: #E02020;">
                <view class="num">{{statusData?.num_year_p_2}}</view>
                <view class="unit">个</view>
              </view>
              <view class="text-label">
                红灯项目
              </view>
            </view>

          </view>
          <view class="item" @click="newProjectClick('Ydxm',statusData?.num_year_p_1)">
            <image src="../../static/images/yellow.svg" mode=""></image>
            <view class="item-text">
              <view class="text-num" style="color: #E6AA00;">
                <view class="num">{{statusData?.num_year_p_1}}</view>
                <view class="unit">个</view>
              </view>
              <view class="text-label">
                黄灯项目
              </view>
            </view>

          </view>
          <view class="item" @click="newProjectClick('ldxm',statusData?.num_year_p_3)">
            <image src="../../static/images/green.svg" mode=""></image>
            <view class="item-text">
              <view class="text-num" style="color: #327002;">
                <view class="num">{{statusData?.num_year_p_3}}</view>
                <view class="unit">个</view>
              </view>
              <view class="text-label">
                绿灯项目
              </view>
            </view>

          </view>

        </view>
        <view class="light-line">

        </view>
        <view class="stats-list" style="margin-top: 6rpx;">
          <view class="stats-item" @click="gotoWTQD('yzg',statusData?.num_year_p_4)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_p_4}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              已整改
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="gotoWTQD('zdgj',statusData?.num_year_p_5)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_p_5}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              重点跟进
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="gotoWTQD('ytqy',statusData?.num_year_p_6)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_p_6}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              约谈企业
            </view>
          </view>
          <view class="line">

          </view>
          <view class="stats-item" @click="gotoWTQD('fdbh',statusData?.num_year_p_7)">
            <view class="item-num">
              <text class="number">{{statusData?.num_year_p_7}}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name">
              发督办函
            </view>
          </view>
        </view>


      </view>
      <view class="stats-layer-next">
        <view class="sub-title-footer">
          建设地点投资占比
        </view>
        <view class="pie-content">
          <view class="legend-layer">
            <view class="legend-item" v-for="(item,index) in jsddList" :key="index">
              <view class="item-icon" :style="{background:item.color}">
              </view>
              <view class="item-label">
                {{item.name}}
              </view>
              <view class="item-rote">
                {{item.value}}%
              </view>
            </view>
          </view>
          <view class="pie-box">
            <!-- 						<view class="pie-back">
							<image src="@/static/echarts-pie.png" mode=""></image>
						</view> -->
            <view class="pie-back">

            </view>
            <view class="pie">
              <qiun-data-charts type="ring" :opts="investOption" :chartData="jsddData" :ontouch="true" />
            </view>

          </view>
        </view>

      </view>
      <view class="stats-layer-next">
        <view class="sub-title-footer">
          行业分布情况
        </view>
        <view class="pie-content-box">
          <view class="status-color">
            <view class="item" v-for="(item,index) in colorList" :key="index" :style="{backgroundColor:item}">

            </view>
          </view>
          <view class="legend-box">
            <view class="legend-layer">
              <view class="legend-item" v-for="(item,index) in hyzbList[0]" :key="index">
                <view class="item-icon" :style="{backgroundColor: item.color }">
                </view>
                <uni-tooltip :content="item.name" placement="top">
                  <view class="item-label">
                    {{item.name}}
                  </view>
                </uni-tooltip>
                <view class="item-rote">
                  {{item.value}}
                </view>
              </view>

            </view>
            <view class="line">

            </view>
            <view class="legend-layer">
              <view class="legend-item" v-for="(item,index) in hyzbList[1]" :key="index">
                <view class="item-icon" :style="{backgroundColor: item.color }">
                </view>

                <uni-tooltip :content="item.name" placement="top">
                  <view class="item-label">
                    {{item.name}}
                  </view>
                </uni-tooltip>
                <view class="item-rote">
                  {{item.value}}
                </view>
              </view>
            </view>
          </view>


          <!-- 					<view class="pie-box">
						<view class="pie-back">
						</view>
						<view class="pie">
							<qiun-data-charts type="ring" :opts="investOption" :chartData="hyzbData" :ontouch="true"
								v-if="hyzbData" />
						</view>

					</view> -->
        </view>

      </view>

		      <cu-overdue ></cu-overdue>
    </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);

  .dot-check {
    width: 20rpx !important;
    border-radius: 10rpx !important;
    background-color: #0035A9 !important;
  }

  .status-color {
    margin-top: 38rpx;
    display: flex;
    justify-content: center;
    width: 100%;

    .item {
      flex-grow: 1;
      height: 6rpx;
    }
  }

  .uni-swiper-dot-box {
    margin-top: 48rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18rpx;
    width: $card-width;

    .swiper-dot {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4rpx;
      transition: all .3s;

      .swiper-dot-item {
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
        background-color: #DDDDDD;

        .items-text {
          color: #666666;
        }
      }
    }
  }

  .swiper-box {
    width: 100%;
    height: 104rpx;
  }

  .swiper-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;

    .swiper-item-items {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8rpx;
      width: 20%;

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

      .items-text {
        font-size: 24rpx;
        font-weight: 300;
        color: #666666;
      }
    }

  }

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

    .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) + 10px);

      .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: 20rpx;
          padding: 20rpx 0 20rpx 0;
          width: 48%;
          background-color: #fff;
          border-radius: 10rpx;
          box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF;

          .item-text {
            font-size: 30rpx;
            font-weight: 700;

          }

          .item-image {
            position: relative;

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

            .sign {
              position: absolute;
              right: -30rpx;
              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: auto;
        margin-top: 40rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        row-gap: 30rpx;
        width: $card-width;
        // background-color: #0033A8;

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

          .item-image {
            position: relative;

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

              .text {
                font-size: 36rpx;
                zoom: 0.5;
              }

            }
          }

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

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

      }

      .sub-title {
        margin-top: 18rpx;
        display: flex;
        justify-content: center;
        font-size: 36rpx;
        font-weight: 600;
        font-style: normal;
        color: #222222;
      }

      .sub-title-footer {
        margin-top: 12rpx;
        display: flex;
        justify-content: flex-start;
        width: $card-width;
        font-size: 36rpx;
        font-weight: 600;
        color: #000;
      }

      .project-info-select {
        margin: auto;
        margin-top: 48rpx;
        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-next {
        margin-top: 32rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        justify-content: center;
        width: $card-width;
        background-color: #FFF;
        border-radius: 10rpx;
        padding: 40rpx 0 40rpx 0;
        box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF;

        .pie-layer {
          margin-top: 52rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 112rpx;

          .pie-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            .pie-content {
              position: relative;
              width: 206rpx;
              height: 206rpx;

              .label {
                position: absolute;
                bottom: 66rpx;
                left: 50%;
                transform: translate(-50%, 0);
                font-size: 24rpx;
                line-height: 30rpx;
                text-align: center;
                white-space: nowrap;

              }

              .label-rote {
                position: absolute;
                bottom: 115rpx;
                left: 50%;
                transform: translate(-50%, 0);
                z-index: 100;
                font-size: 36rpx;
                font-weight: 600;
                color: #C44E00;
                line-height: 30rpx;
                text-align: center;
                white-space: nowrap;

              }
            }

            .item-text-layer {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              gap: 6rpx;
            }

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

              .label {
                font-size: 24rpx;
                font-weight: 500;
                color: #999999;
              }

              .rote {
                font-size: 24rpx;
                font-weight: 600;
                color: #A79154;
              }
            }

          }

          .pie-item-box2 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30rpx;

            .pie-content {
              position: relative;
              width: 256rpx;
              height: 256rpx;

              .label {
                position: absolute;
                left: 50%;
                bottom: 135rpx;
                transform: translate(-50%, 0);
                font-size: 24rpx;
                line-height: 30rpx;
                text-align: center;
                white-space: nowrap;

              }

              .label-rote {
                position: absolute;
                bottom: 135rpx;
                left: 50%;
                transform: translate(-50%, 0);
                z-index: 100;
                font-size: 36rpx;
                font-weight: 800;
                color: #C44E00;
                line-height: 30rpx;
                text-align: center;
                white-space: nowrap;

              }
            }

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

              .label {
                font-size: 24rpx;
                font-weight: 500;
                color: #999999;
              }

              .rote {
                font-size: 32rpx;
                font-weight: 800;
                color: #A79154;
              }
            }

          }
        }

        .bar-content-layer {
          margin: auto;
          width: 95%;
          height: 450rpx;

        }

        .video-layer {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 95%;

          .video-item {
            width: 32%;
            height: 123.3rpx;
          }

        }


        .stats-list {
          padding: 24rpx 34rpx 24rpx 34rpx;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .line {
            margin-top: 60rpx;
            width: 1rpx;
            height: 24rpx;
            background-color: #DDDDDD;
          }

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

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

              .number {
                font-size: 36rpx;
                font-weight: 800;
                white-space: nowrap;
              }

              .unit {
                font-size: 20rpx;
              }

            }

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

        .light-layer {
          margin-top: 50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 30rpx;

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

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

            .item-text {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

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

                .num {
                  display: block;
                  font-size: 36rpx;
                  font-weight: bold;
                }

                .unit {
                  display: block;
                  font-size: 20rpx;
                }
              }

              .text-label {

                font-size: 24rpx;
                font-weight: 500;
                color: #444444;
              }
            }
          }
        }

        .light-line {
          margin-top: 38rpx;
          width: 95%;
          height: 1rpx;
          background: linear-gradient(91deg, rgba(216, 216, 216, 0) 0%, #EBEBEB 30%, #EBEBEB 72%, rgba(238, 238, 238, 0) 100%);
        }

        .pie-content {
          margin-top: 32rpx;
          width: 90%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .legend-layer {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 16rpx;

            .legend-item {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              gap: 8rpx;

              .item-icon {
                width: 20rpx;
                height: 20rpx;
                background-color: #ccc
              }

              .item-label {
                font-size: 28rpx;
                font-weight: 500;
                line-height: 28rpx;
              }

              .item-rote {
                font-size: 24rpx;
                line-height: 28rpx;
                font-weight: 600;
                color: #0035A9;
              }
            }

          }

          .pie-box {
            position: relative;
            margin-right: 30rpx;
            width: 250rpx;
            height: 250rpx;

            .pie {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 230rpx;
              height: 230rpx;
            }

            .pie-back {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
              background-color: #E9F2FF;
              width: 232rpx;
              height: 232rpx;
            }
          }


        }

        .pie-content-box {
          width: calc(100% - 48rpx);
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;

          .legend-box {
            width: 100%;
            margin-top: 29rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .line {
              width: 0;
              margin-left: 22rpx;
              padding-right: 22rpx;
              height: 400rpx;
              border-left: 1rpx solid #DDDDDD;
              border-top: none;
            }

            .legend-layer {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: flex-start;
              gap: 13rpx;
              width: 50%;

              .legend-item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 8rpx;

                .item-icon {
                  width: 20rpx;
                  height: 20rpx;
                  background-color: #ccc
                }

                .item-label {
                  width: 200rpx;
                  font-size: 22rpx;
                  font-weight: 500;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .item-rote {
                  font-size: 24rpx;
                  font-weight: 600;
                  color: #0035A9;
                }
              }

            }

          }

          .pie-box {
            position: relative;
            margin-right: 30rpx;
            width: 250rpx;
            height: 250rpx;

            .pie {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 250rpx;
              height: 250rpx;
            }

            .pie-back {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
              background-color: #E9F2FF;
              width: 230rpx;
              height: 230rpx;
            }
          }


        }

      }

    }


  }
</style>