<script>
import { defineComponent } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
export default defineComponent({
  components: {
    Vue3SeamlessScroll
  }
})
</script>
<script setup name="cockpit">

import { onMounted, reactive, ref } from 'vue'
import * as echarts from 'echarts'
import { storeToRefs } from 'pinia'
import store from '@/store'
import SvgIcon from '@/components/svgIcon/index.vue'
import { cockpitStats } from '@/http/apis/cockpit'
// import { list } from '@/http/apis/projectStoreManage/projectStore'
import { libAllList } from '@/http/apis/declareMange/renewalProjectCapitalDeclare'
import kfqImg from '@/assets/images/cockpit/kfqIcon.png'

const { insuranceLevel } = store.dictStore.globalDicts || {},
  searchForm = reactive({
    year: undefined
    // year: new Date().getFullYear() + ''
  }),
  userInfo = storeToRefs(store.userStore).userInfo || {}
let chart1, chart2, dbjb, chart3, chart4, xmjx, chart5, chartMap, chartZldf, timeoutloop1, timeoutloop2, timeoutloop3
const regionMap = {
    '市本级': '331100',
    '莲都区': '331102',
    '青田县': '331121',
    '缙云县': '331122',
    '遂昌县': '331123',
    '松阳县': '331124',
    '云和县': '331125',
    '庆元县': '331126',
    '景宁畲族自治县': '331127',
    '龙泉市': '331181',
    '开发区': '331118'
  },
  chart1Ref = ref(),
  initChart1 = () => {
    if (!chart1) chart1 = echarts.init(chart1Ref.value)
    const option = {
      grid: {
        top: '10%',
        bottom: '30%',
        left: '12%',
        right: '2%'
      },
      tooltip: {
        trigger: 'axis',
        valueFormatter: (value) => value + '%'
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.monitorData?.monitorSafetyInputRate?.filter(i => i.year < 2024).map(i => i.year) || ['2021', '2022', '2023'],
        axisLabel: {
          color: '#fff',
          fontSize: transformFontSize(12)
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(2, 197, 209, 0.26)',
            width: 2
          }
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        minInterval: 10,
        min: 5,
        axisLabel: {
          color: '#fff',
          fontSize: transformFontSize(12),
          formatter: '{value}%'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(2, 197, 209, 0.26)'
          }
        }
      },
      series: [
        {
          data: detailData.value?.monitorData?.monitorSafetyInputRate?.filter(i => i.year < 2024).map(i => i.rate) || [0, 0, 0],
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#FBCB60'
          },
          itemStyle: {
            color: '#FBCB60',
            borderColor: '#021A40',
            borderWidth: 2,
            borderType: 'solid'
          }
        }
      ]
    }
    chart1.setOption(option)
  },

  // mpjbRef = ref(),
  // initMpjbChart = () => {
  //   if (!mpjb) mpjb = echarts.init(mpjbRef.value)
  //   const colorList = ['#4d7cdb', '#4dba93', '#4f6182', '#d1a319', '#c55a45']
  //   const option = {
  //     color: colorList,
  //     series: [
  //       {
  //         type: 'pie',
  //         radius: ['35%', '70%'],
  //         label: {
  //           color: '#ffffff',
  //           formatter: '{b}\n{c}'
  //         },
  //         labelLine: {
  //           length: 4
  //         },
  //         itemStyle: {
  //           borderWidth: 2,
  //           borderColor: '#011B4B'
  //         },
  //         data: detailData.value?.monitorData?.passwordGradeCharts.map(i => {
  //           return {
  //             value: i.num,
  //             name: insuranceLevel[i.level]
  //           }
  //         }) || []
  //       }
  //     ]
  //   }
  //   mpjb.setOption(option)
  // },

  dbjbRef = ref(),
  initdDbjbChart = () => {
    if (!dbjb) dbjb = echarts.init(dbjbRef.value)
    const colorList = ['#4d7cdb', '#4dba93', '#4f6182', '#d1a319', '#c55a45']
    const option = {
      color: colorList,
      series: [
        {
          type: 'pie',
          radius: ['35%', '70%'],
          label: {
            color: '#ffffff',
            formatter: '{b}\n{c}'
          },
          labelLine: {
            length: 4
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: '#011B4B'
          },
          data: detailData.value?.monitorData?.secrecyGradeCharts.map(i => {
            return {
              value: i.num,
              name: insuranceLevel[i.level]
            }
          }) || []
        }
      ]
    }
    dbjb.setOption(option)
  },

  chart2Ref = ref(),
  imgRef2 = ref(),
  initChart2 = () => {
    if (!chart2) chart2 = echarts.init(chart2Ref.value)
    const colorList = ['#2d99ff', '#02c5d1', '#095ce5', '#d4aa00', '#e04561', '#20b760']
    const total = detailData.value?.expertData?.specialExpertNum
    const option = {
      grid: { // 让图表占满容器
        top: '0px',
        left: '0px',
        right: '0px',
        bottom: '0px'
      },
      color: colorList,
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        show: true,
        orient: 'vertical',
        right: 10,
        textStyle: {
          color: '#fff'
        }
      },
      graphic: [{ // 环形图中间添加文字
        type: 'text', // 通过不同top值可以设置上下显示
        left: '17.5%',
        top: '35%',
        style: {
          text: total,
          textAlign: 'center',
          fill: '#fff', // 文字的颜色
          fontSize: transformFontSize(20)
        }
      },
      { // 环形图中间添加文字
        type: 'text', // 通过不同top值可以设置上下显示
        left: '16.5%',
        top: '56%',
        style: {
          text: '专家总数',
          textAlign: 'center',
          fill: '#02C5D1', // 文字的颜色
          fontSize: transformFontSize(9)
        }
      }
      ],
      toolTip: {
        position: ['50%', '50%'],
        show: false,
        enterable: true
      },
      series: [
        {
          type: 'pie',
          left: 'left',
          center: ['20%', '50%'],
          radius: ['48%', '98%'],
          labelLine: {
            show: false
          },
          label: {
            position: 'inner',
            fontSize: transformFontSize(10),
            formatter: '{b}\n{c}',
            color: '#ffffff',
            show: false
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: '#011B4B'
          },
          data: [
            { value: detailData.value?.expertData?.expertPlanRationalityNum || 0, name: '方案合理性' },
            { value: detailData.value?.expertData?.expertTechnicalFeasibilityAssessmentNum || 0, name: '技术可行性评估' },
            { value: detailData.value?.expertData?.expertXinchuangNum || 0, name: '信创' },
            { value: detailData.value?.expertData?.expertSoftHardPricingNum || 0, name: '软硬件核价' },
            { value: detailData.value?.expertData?.expertPartyGovInfoNum || 0, name: '党政信息' },
            { value: detailData.value?.expertData?.expertNetworkSecurityNum || 0, name: '网络安全' },
            { value: detailData.value?.expertData?.expertFinancialNum || 0, name: '财务' }
          ],
          emphasis: {
            label: {
              fontSize: transformFontSize(10),
              // formatter: '{b}\n{c}',
              formatter: function (params) {
                return params.name + '\n' + params.value + `${params.name === '财务' ? '+2' : ''}`
              },
              color: '#ffffff',
              show: true,
              overflow: 'break'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    chart2.setOption(option)
    clearInterval(timeoutloop1)
    activeLoop()
  },
  activeLoop = () => {
  // 循环高亮显示   seriesIndex：1   外圈高亮
    var index = -1 // 高亮下标
    const dataLength = 7
    timeoutloop1 = setInterval(() => {
    // 清除之前的高亮
      chart2.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index
      })
      chart2.dispatchAction({
        type: 'hideTip',
        seriesIndex: 0,
        dataIndex: index
      })
      index = (index + 1) % dataLength
      // 当前下标高亮
      chart2.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      })
      chart2.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      })
    }, 2000)
  // 鼠标划入
  // chart2.on('mouseover', (e) => {
  //   // 停止定时器，清除之前的高亮
  //   clearInterval(timeoutloop)
  //   chart2.dispatchAction({
  //     type: 'downplay',
  //     seriesIndex: 0,
  //     dataIndex: index
  //   })
  //   chart2.dispatchAction({
  //     type: 'hideTip',
  //     seriesIndex: 0,
  //     dataIndex: index
  //   })
  // })
  // // 鼠标离开
  // chart2.on('mouseout', (e) => {
  //   activeLoop()
  // })
  },

  // chart2_1Ref = ref(),
  // initChart2_1 = () => {
  //   if (!chart2_1) chart2_1 = echarts.init(chart2_1Ref.value)
  //   const colorList = ['#2d99ff', '#02c5d1', '#095ce5', '#d4aa00', '#e04561', '#20b760']
  //   const option = {
  //     grid: { // 让图表占满容器
  //       top: '0px',
  //       left: '0px',
  //       right: '0px',
  //       bottom: '0px'
  //     },
  //     color: colorList,
  //     graphic: [{ // 环形图中间添加文字
  //       type: 'text', // 通过不同top值可以设置上下显示
  //       left: 'center',
  //       top: '35%',
  //       style: {
  //         text: detailData.value?.expertData?.expertPromotionInfoTechnologyNum + detailData.value?.expertData?.expertXinchuangOtherNum + detailData.value?.expertData?.expertFinancialNum,
  //         textAlign: 'center',
  //         fill: '#fff', // 文字的颜色
  //         fontSize: transformFontSize(20)
  //       }
  //     },
  //     { // 环形图中间添加文字
  //       type: 'text', // 通过不同top值可以设置上下显示
  //       left: 'center',
  //       top: '56%',
  //       style: {
  //         text: '专家总数',
  //         textAlign: 'center',
  //         fill: '#02C5D1', // 文字的颜色
  //         fontSize: transformFontSize(9)
  //       }
  //     }
  //     ],
  //     series: [
  //       {
  //         type: 'pie',
  //         radius: ['48%', '98%'],
  //         labelLine: {
  //           show: false
  //         },
  //         label: {
  //           position: 'inner',
  //           fontSize: transformFontSize(10),
  //           formatter: function (params) {
  //             return params.name + '\n' + params.value + `${params.name === '财务专家' ? '+2' : ''}`
  //           },
  //           color: '#ffffff'
  //         },
  //         itemStyle: {
  //           borderWidth: 2,
  //           borderColor: '#011B4B'
  //         },
  //         data: [
  //           { value: detailData.value?.expertData?.expertPromotionInfoTechnologyNum || 0, name: '信息化专家' },
  //           { value: detailData.value?.expertData?.expertXinchuangOtherNum || 0, name: '信创专家' },
  //           { value: detailData.value?.expertData?.expertFinancialNum || 0, name: '财务专家' }
  //         ],
  //         emphasis: {
  //           itemStyle: {
  //             shadowBlur: 10,
  //             shadowOffsetX: 0,
  //             shadowColor: 'rgba(0, 0, 0, 0.5)'
  //           }
  //         }
  //       }
  //     ]
  //   }
  //   chart2_1.setOption(option)
  // },

  chart3Ref = ref(),
  initChart3 = () => {
    if (!chart3) chart3 = echarts.init(chart3Ref.value)
    const option = {
      grid: {
        top: '10%',
        bottom: '25%',
        right: '2%',
        left: '4%'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.expertData?.expertRegionData?.map(i => {
          return i.regionName === '景宁畲族自治县' ? '景宁县' : i.regionName
        }),
        axisLabel: {
          color: '#fff',
          fontSize: transformFontSize(8),
          rotate: 30
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(45, 153, 255, 1)'
          }
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        show: false,
        axisLabel: {
          color: '#fff',
          fontSize: transformFontSize(8)
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(45, 153, 255, 0.35)'
          }
        }
      },
      series: [
        {
          data: detailData.value?.expertData?.expertRegionData?.map(i => i.expertNum),
          type: 'bar',
          barWidth: transformFontSize(11),
          label: {
            show: true,
            position: 'top',
            color: '#ffffff',
            fontSize: transformFontSize(10)
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
              offset: 0,
              color: '#2D99FF'
            }, {
              offset: 1,
              color: 'rgba(2,197,209,0.67)'
            }])
          }
        // itemStyle: {
        //   color: {
        //     image: imgRef2.value, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
        //     repeat: 'repeat-x' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        //   }
        // }
        }
      ]
    }
    chart3.setOption(option)
  },

  chart4Ref = ref(),
  initChart4 = () => {
    if (!chart4) chart4 = echarts.init(chart4Ref.value)
    const option = {
      grid: {
        top: '20%',
        bottom: '20%',
        right: '2%',
        left: '0'
      },
      legend: {
        itemWidth: transformFontSize(8),
        itemHeight: transformFontSize(8),
        textStyle: {
          color: '#ffffff',
          fontSize: transformFontSize(12)
        }
      },
      tooltip: {
        appendToBody: true,
        trigger: 'axis',
        valueFormatter: (value) => Math.abs(value) / 10000 < 1 ? `${value.toFixed(1)}万元` : `${(value / 10000).toFixed(1)}亿元`
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.reduceData?.amountComparisonCharts?.map(i => i.statusName === '申报' ? '计划' : i.statusName) || ['谋划', '申报', '初审', '联审', '评审', '批复'],
        axisLabel: {
          color: '#fff',
          fontSize: transformFontSize(12)
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(45, 153, 255, 1)'
          }
        },
        axisTick: {
          show: false
        }
      },
      yAxis: [{
        type: 'value',
        axisLabel: {
          show: false,
          color: '#fff',
          fontSize: transformFontSize(12)
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(45, 153, 255, 0.35)'
          }
        }
      }
      ],
      series: [
        {
          name: '申请金额',
          data: detailData.value?.reduceData?.amountComparisonCharts?.map(i => i.declaredAmount) || [0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: transformFontSize(8),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
              offset: 0,
              color: '#2D99FF'
            }, {
              offset: 1,
              color: 'rgba(2,197,209,0.67)'
            }])
          }
        },
        {
          name: '批复金额',
          data: detailData.value?.reduceData?.amountComparisonCharts?.map(i => i.approvalAmount) || [0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: transformFontSize(8),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
              offset: 0,
              color: '#20B760'
            }, {
              offset: 1,
              color: 'rgba(67, 220, 153, 0.67)'
            }])
          }
        },
        {
          name: '差额',
          data: detailData.value?.reduceData?.amountComparisonCharts?.map(i => i.differenceAmount) || [0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: transformFontSize(8),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
              offset: 0,
              color: 'rgba(251, 203, 96, 1)'
            }, {
              offset: 1,
              color: 'rgba(227, 70, 99, 0.67)'
            }])
          }
        }
      ]
    }
    chart4.setOption(option)
  },

  xmjxRef = ref(),
  initXmjxChart4 = () => {
    if (!xmjx) xmjx = echarts.init(xmjxRef.value)
    const colorList = [
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: 'rgba(32, 183, 96, 1)'
      }, {
        offset: 1,
        color: 'rgba(32, 183, 96, 0.5)'
      }]),
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: '#C59400'
      }, {
        offset: 1,
        color: 'rgba(142, 120, 36, 0.50)'
      }]),
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: 'rgba(197, 90, 70, 1)'
      }, {
        offset: 1,
        color: 'rgba(197, 90, 70, 0.5)'
      }]),
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: 'rgba(79, 97, 131, 1)'
      }, {
        offset: 1,
        color: 'rgba(79, 97, 131, 0.5)'
      }]),
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: 'rgba(108, 162, 198, 1)'
      }, {
        offset: 1,
        color: 'rgba(19, 107, 153, 0.50)'
      }])
    ]
    const option = {
      grid: {
        top: '20%',
        bottom: '20%',
        right: '2%',
        left: '10%'
      },
      legend: {
        show: false
      },
      tooltip: {
        position: ['50%', '50%'],
        show: false
      },
      color: colorList,
      graphic: [
        { // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '40%',
          style: {
            text: '已评价',
            textAlign: 'center',
            fill: '#FBCB60', // 文字的颜色
            fontSize: transformFontSize(14)
          }
        },
        { // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '56%',
          style: {
            text: detailData.value?.performanceData?.performanceTops?.map(i => i.score).reduce((cur, arr) => cur + arr) || 0,
            textAlign: 'center',
            fill: '#FBCB60', // 文字的颜色
            fontSize: transformFontSize(14)
          }
        }
      ],
      series: [
        {
          data: detailData.value?.performanceData?.performanceTops?.map(i => {
            return {
              value: i.score,
              name: i.topName
            }
          }),
          radius: ['45%', '80%'],
          type: 'pie',
          labelLine: {
            show: false
          },
          labelLayout: {
            hideOverlap: false
          },
          label: {
            show: false,
            position: 'inner',
            fontSize: transformFontSize(12),
            formatter: '{b}\n{c}个',
            color: '#ffffff'
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: '#011B4B'
          },
          emphasis: {
            label: {
              fontSize: transformFontSize(12),
              formatter: '{b}\n{c}个',
              color: '#ffffff',
              show: true
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        // barWidth: transformFontSize(8)
        // itemStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        //     offset: 0,
        //     color: '#2D99FF'
        //   }, {
        //     offset: 1,
        //     color: 'rgba(2,197,209,0.67)'
        //   }])
        // }
        }
      ]
    }
    xmjx.setOption(option)
    clearInterval(timeoutloop2)
    activeLoop2()
  },
  activeLoop2 = () => {
  // 循环高亮显示   seriesIndex：1   外圈高亮
    var index = -1 // 高亮下标
    const dataLength = 7
    timeoutloop2 = setInterval(() => {
    // 清除之前的高亮
      xmjx.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index
      })
      xmjx.dispatchAction({
        type: 'hideTip',
        seriesIndex: 0,
        dataIndex: index
      })
      index = (index + 1) % dataLength
      // 当前下标高亮
      xmjx.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      })
      xmjx.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      })
    }, 2000)
  // // 鼠标划入
  // xmjx.on('mouseover', (e) => {
  //   // 停止定时器，清除之前的高亮
  //   clearInterval(timeoutloop)
  //   xmjx.dispatchAction({
  //     type: 'downplay',
  //     seriesIndex: 0,
  //     dataIndex: index
  //   })
  //   xmjx.dispatchAction({
  //     type: 'hideTip',
  //     seriesIndex: 0,
  //     dataIndex: index
  //   })
  // })
  // // 鼠标离开
  // xmjx.on('mouseout', (e) => {
  //   activeLoop()
  // })
  },
  chart5Ref = ref(),
  initChart5 = () => {
    if (!chart5) chart5 = echarts.init(chart5Ref.value)
    const colorList = [new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
      offset: 0,
      color: '#C59400'
    }, {
      offset: 1,
      color: 'rgba(142, 120, 36, 0.50)'
    }]),
    new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
      offset: 0,
      color: 'rgba(108, 162, 198, 1)'
    }, {
      offset: 1,
      color: 'rgba(19, 107, 153, 0.50)'
    }])
    ]
    const option = {
      grid: {
        top: '20%',
        bottom: '20%',
        right: '2%',
        left: '10%'
      },
      graphic: [
        { // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '40%',
          style: {
            text: '应评数',
            textAlign: 'center',
            fill: '#FBCB60', // 文字的颜色
            fontSize: transformFontSize(14)
          }
        },
        { // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '56%',
          style: {
            text: detailData.value?.performanceData?.performanceTotal || 0,
            textAlign: 'center',
            fill: '#FBCB60', // 文字的颜色
            fontSize: transformFontSize(14)
          }
        }
      ],
      legend: {
        show: false
      },
      tooltip: {
        position: ['50%', '50%'],
        show: false
      },
      color: colorList,
      series: [
        {
          data: [
            { value: detailData.value?.performanceData?.performanceReviewedTotal || 0, name: '已评价' },
            { value: detailData.value?.performanceData?.performanceTobeReviewTotal || 0, name: '未评价' }
          ],
          radius: ['45%', '80%'],
          type: 'pie',
          labelLine: {
            show: false
          },
          labelLayout: {
            hideOverlap: false
          },
          label: {
            show: false,
            position: 'inner',
            fontSize: transformFontSize(12),
            formatter: '{b}\n{c}个',
            color: '#ffffff'
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: '#011B4B'
          },
          emphasis: {
            label: {
              fontSize: transformFontSize(12),
              formatter: '{b}\n{c}个',
              color: '#ffffff',
              show: true
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    chart5.setOption(option)
    clearInterval(timeoutloop3)
    activeLoop1()
  },
  activeLoop1 = () => {
  // 循环高亮显示   seriesIndex：1   外圈高亮
    let index = -1 // 高亮下标
    const dataLength = 2
    timeoutloop3 = setInterval(() => {
    // 清除之前的高亮
      chart5.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index
      })
      chart5.dispatchAction({
        type: 'hideTip',
        seriesIndex: 0,
        dataIndex: index
      })
      index = (index + 1) % dataLength
      // 当前下标高亮
      chart5.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      })
      chart5.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      })
    }, 2000)
  // // 鼠标划入
  // chart5.on('mouseover', (e) => {
  //   // 停止定时器，清除之前的高亮
  //   clearInterval(timeoutloop1)
  //   chart5.dispatchAction({
  //     type: 'downplay',
  //     seriesIndex: 0,
  //     dataIndex: index
  //   })
  //   chart5.dispatchAction({
  //     type: 'hideTip',
  //     seriesIndex: 0,
  //     dataIndex: index
  //   })
  // })
  // // 鼠标离开
  // chart5.on('mouseout', (e) => {
  //   activeLoop()
  // })
  },

  chartZldfRef = ref(),
  initChartZldf = () => {
    if (!chartZldf) chartZldf = echarts.init(chartZldfRef.value)
    const option = {
      grid: {
        top: '15%',
        bottom: '34%',
        right: '2%',
        left: '4%'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: detailData.value?.qualityDatas?.map(i => {
          return i.regionName === '景宁畲族自治县' ? '景宁县' : i.regionName
        }),
        axisLabel: {
          color: '#fff',
          fontSize: transformFontSize(8),
          rotate: 30
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(45, 153, 255, 1)'
          }
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        show: false,
        axisLabel: {
          color: '#fff',
          fontSize: transformFontSize(8)
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(45, 153, 255, 0.35)'
          }
        }
      },
      series: [
        {
          data: detailData.value?.qualityDatas?.map(i => i.quality) || [95.7, 96.2, 97.4, 96.3, 83.9, 99.2, 93.6, 99.5, 96.5, 97.6, 99.5],
          type: 'bar',
          barWidth: transformFontSize(11),
          label: {
            show: true,
            position: 'top',
            color: '#ffffff',
            fontSize: transformFontSize(10)
          },
          itemStyle: {
            color: {
              image: imgRef2.value, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
              repeat: 'repeat-x' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            }
          }
        }
      ]
    }
    chartZldf.setOption(option)
  },
  getChart = () => {
    initChart1()
    // initMpjbChart()
    dbjbRef.value && initdDbjbChart()
    //
    initChart2()
    // initChart2_1()
    initChart3()
    initChartZldf()
    initChart4()
    initXmjxChart4()
    initChart5()
    setTimeout(() => {
      initChartMap()
    })
  },
  // 根据不同的屏幕宽度换算字体大小
  transformFontSize = (fontsize) => {
  // 获取屏幕宽度
    const width = window.screen.width
    const ratio = width / 1920
    // 取下整
    return parseInt(fontsize * ratio)
  },
  // 地图
  mapJson = ref(),
  getMapJson = async (code) => {
    mapJson.value = (await import(`../../assets/json/mapJson/${code}.json`)).default
  },
  chartMapRef = ref(),
  regionData = ref(),
  initChartMap = () => {
    const data = detailData.value.mapProjectData?.map(i => {
      return {
        name: i.regionName,
        value: i?.projectsNum,
        code: i.regionCode
      }
    })
    echarts.registerMap('map', mapJson.value)
    const symbolImg = 'image://' + kfqImg
    if (!chartMap) chartMap = echarts.init(chartMapRef.value)
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: params => {
          let relVal = ''
          const value = params.value || 0
          relVal += params.marker + params.name + '&emsp;' + value
          return relVal
        }
      },
      geo: [
        {
          map: 'map',
          aspectScale: 1,
          zoom: 0.45,
          layoutCenter: ['50%', '42%'],
          layoutSize: '180%',
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#c0f3fb',
              borderWidth: 1,
              shadowColor: '#8cd3ef',
              shadowOffsetY: 10,
              shadowBlur: 120,
              areaColor: 'transparent'
            }
          }
        },
        // 重影
        {
          type: 'map',
          map: 'map',
          zlevel: -1,
          aspectScale: 1,
          zoom: 0.45,
          layoutCenter: ['50%', '43%'],
          layoutSize: '180%',
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor:"rgba(17, 149, 216,0.6)",
              borderColor: 'rgba(58,149,253,0.8)',
              shadowColor: 'rgba(172, 122, 255,0.5)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)'
            }
          }
        },
        {
          type: 'map',
          map: 'map',
          zlevel: -2,
          aspectScale: 1,
          zoom: 0.45,
          layoutCenter: ['50%', '44%'],
          layoutSize: '180%',
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(57, 132, 188,0.4)",
              borderColor: 'rgba(58,149,253,0.6)',
              shadowColor: 'rgba(65, 214, 255,1)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'transpercent'
            }
          }
        },
        {
          type: 'map',
          map: 'map',
          zlevel: -3,
          aspectScale: 1,
          zoom: 0.45,
          layoutCenter: ['50%', '45%'],
          layoutSize: '180%',
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: 'rgba(58,149,253,0.4)',
              shadowColor: 'rgba(58,149,253,1)',
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: 'transpercent'
            }
          }
        },
        {
          type: 'map',
          map: 'map',
          zlevel: -4,
          aspectScale: 1,
          zoom: 0.45,
          layoutCenter: ['50%', '44%'],
          layoutSize: '180%',
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: 'rgba(5,9,57,0.8)',
              shadowColor: 'rgba(29, 111, 165,0.8)',
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: 'rgba(5,21,35,0.1)'
            }
          }
        }
      ],
      series: [
        {
          name: 'map',
          type: 'map',
          map: 'map', // 自定义扩展图表类型
          aspectScale: 1,
          zoom: 0.45, // 缩放
          showLegendSymbol: true,
          select: { // 这个就是鼠标点击后，地图想要展示的配置
            disabled: false, // 可以被选中
            itemStyle: {
              areaColor: '#77e8e4'// 选中
            }
          },
          label: {
            show: true, // 默认地图文字字号和字体颜色
            fontSize: 12,
            color: '#ffffff',
            formatter: params => {
              const value = params.value || 0
              return [
                `{a|${value}}`,
                `{b|${params.name}}`
              ].join('\n')
            },
            rich: {
              a: {
                color: '#FFCD00',
                lineHeight: 22,
                fontSize: transformFontSize(20),
                fontFamily: 'DINPro-Bold, DINPro'
              },
              b: {
                color: '#ffffff',
                lineHeight: transformFontSize(16),
                fontSize: transformFontSize(16)
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: 'linear',
                x: 1200,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
                  }
                ],
                global: true // 缺省为 false
              },
              borderColor: '#01ebfe',
              borderWidth: 0.2
            },
            emphasis: {
              show: false,
              color: '#ccc',
              areaColor: 'rgba(22, 206, 185,0.6)'
            }
          },
          layoutCenter: ['50%', '42%'],
          layoutSize: '180%',
          // markPoint: {
          //   symbol: 'circle',
          //   symbolSize: 50
          // },
          data: data
        // renderItem: function (params, api) { // 具体实现自定义图标的方法
        //   return {
        //     type: 'image',
        //     style: {
        //       image: '../../assets/images/cockpit/kfqIcon.png',
        //       x: api.coord([
        //         119.912612, 28.445836
        //       ])[0],
        //       y: api.coord([
        //         119.912612, 28.445836
        //       ])[1]
        //     }
        //   }
        // }
        },
        {
          name: 'scatter',
          type: 'scatter',
          symbol: symbolImg,
          symbolSize: !regionData.value?.name || ['全市', '莲都区', '开发区'].includes(regionData.value.name) ? 50 : 0,
          coordinateSystem: 'geo',
          data: [
            {
              name: '开发区',
              value: [119.790612, 28.245836]
            }
          ],
          tooltip: {
            formatter: '{b0}: ' + detailData.value?.mapProjectData?.find(i => i.regionName === '开发区')?.projectsNum || 0
          }
        }
      ]
    }
    chartMap.setOption(option, true)
    chartMap.off('click')
    chartMap.on('click', async params => {
      console.log(params)
      if (params.name === '开发区') {
        regionData.value = {
          name: '开发区',
          value: 331118
        }
        await getData()
      } else {
        await getMapJson(regionMap[params.name])
        regionData.value = params.data
        await getData()
      }
    })
  },
  // 项目列表
  tableData = ref([{ projectName: '21' }, {}]),
  pageParams = reactive({
    pageNumber: 1,
    pageSize: 10
  }),
  total = ref(0),
  getTableData = async () => {
    const res = await libAllList({
      ...pageParams,
      ...searchForm,
      regionCode: regionData.value?.code || '',
      projectYear: searchForm.year * 1 || undefined
    })
    tableData.value = res.data.records
    total.value = res.data.total
  },
  backArea = async () => {
    chartMap.dispatchAction({
      type: 'unselect',
      name: regionData.value?.name
    })
    regionData.value = {
      name: '全市'
    }
    await getMapJson('330500')
    await getData()
  },
  areaToKf = async (name, code) => {
    chartMap.dispatchAction({
      type: 'unselect',
      name: regionData.value?.name
    })
    regionData.value = {
      name,
      code
    }
    await getMapJson('330500')
    await getData()
  },
  tabActive = ref(0),
  // scrollListData1 = ref([
  //   {
  //     applicationName: '丽水市“天眼守望”卫星遥感数字化系统',
  //     tit: '未来e家',
  //     tags: '特色应用,最佳应用,优秀目录应用',
  //     introduce: '丽水市“天眼守望”卫星遥感数字化系统，以卫星遥感为主要技术支撑，采用BS架构，依托丽水市“花园云”平台，提供GEP核算、展示与交易，生态环境立体化监测，自然资源规划和利用监测，基础影像数据等主要功能。为我市政府部门在GEP核算、展示与交易，生态环境监测治理，自然资源规划、开发、应用监测治理等领域提供基础数据及卫星影像服务，同时可支撑全市各类相关多跨场景应用，解决了我市“天空地”监测体系中，“天”上监测手段缺位的问题。'
  //   },
  //   {
  //     applicationName: '丽水市国际旅行卫生保健中心信息管理系统',
  //     tags: '特色应用',
  //     introduce: '体检中心中心使用的杭州莱域科技有限公司的健康体检信息管理系统，采用C/S架构，具备接待业务、医生业务、统计分析、职业病体检标准、基础信息、系统管理等模块，功能丰富完善、界面友好大方、医生操作简单,系统面向体检医务人员，为体检工作实现全程无纸化操作，能与体检中心各种先进设备直接接口，具有自动诊断等最先进的智能体检功能, 能适应体检中心的各类业务需求，极大提高体检效率，为体检人员带来更为便捷的服务。'
  //   },
  //   {
  //     applicationName: '丽水市庆元县“十台合一”应急指挥系统',
  //     tags: '特色应用',
  //     introduce: '该系统主要解决了对县内突发情况的应急处理，采用C/S即客户端/服务器架构，主要有救援队伍，避难场所，实时感知，变化趋势，应急专家，储备物资和资源一张图七个功能模块，面向应急管理局，对应急局现有的系统进行整合，并结合应急业务开发出对应的功能'
  //   },
  //   {
  //     applicationName: '丽水市景宁县浙里畲乡共富应用',
  //     tags: '特色应用',
  //     introduce: '系统基于B/S架构，共富助力包提供线上助学、助医补贴申报入口，支持学生和就医人员可通过该应用在线对各类项目进行申报，解决了申报难和线下审批时间繁琐的问题，中国好畲展示传统畲族服饰、现代畲族服饰的基本信息、农特产品、民族周边产品、手工艺、畲乡十大碗、十小碟、十药膳等基础信息。系统包括：中国好畲、共富助力包、健康小屋、畲山农场、畲寨F10、魅力畲寨、共富指数，面向景宁县群众，实现查看政策发布、资讯信息，申请补贴、健康查询、游玩指导和共富指数自查的功能。'
  //   },
  //   {
  //     applicationName: '丽水市景宁县畲乡幸福河数字化系统',
  //     tags: '特色应用',
  //     introduce: '按照省水利厅浙里九龙联动治水应用框架要求，开展丽水市景宁县畲乡幸福河数字化系统建设，项目采用BS架构，平台面向景宁县域水利行业管理，供水利局各科室、下属单位以及水电站、水库、山塘、农村供水站等管理人员使用，主要功能模块有：水库调度协同管理、幸福河道动态管理、农村供水运行管理、水利档案综合管理、谋划项目数字管理、工程物业监督管理、浙政钉手机端应用，实现水利全业务的综合运行管理，实现“掌上办事”“掌上办公”，提升水利行业强监管水平。'
  //   },
  //   {
  //     applicationName: '丽水市景宁县惠明巧手系统',
  //     tags: '特色应用',
  //     introduce: '丽水市景宁县惠明巧手系统，基于B/S架构，服务于丽水市景宁县辖区，主要面向景宁县所有茶企以及社会公众人员，主要实现了茶企和社会公众务工需求的对接，茶企在系统下务工单，茶农或者中介承接务工单,完成后对茶农或者中介工作进行评价, 突出‘大场景、小切口、快应用、大牵引’数字化改革要求，立足流程公开、信息留痕，实现全方位全流程全覆盖监督，不仅提高茶企的招聘工人效率，也让地方群众找到跟多的工作机会。形成一个简单方便的在线务工查询平台，创新方式方法，利用数字化手段，全方位全流程全覆盖监督，为地方企业在茶忙季节提供线上灵活便捷的招工渠道。'
  //   },
  //   {
  //     applicationName: '丽水市松阳县地名文化服务与文化建设应用',
  //     tags: '特色应用',
  //     introduce: '解决问题： 1）无法满足‘地名文化服务与文 化建设试点’年底考核工作，并努力争取省优秀应用。 2）县民政工作无法适应2022年5月1日起国务院施行的新《地名管理条例》内容。 3）县民政缺少地名文化管理、 宣传、挖掘、传承、保护、服务的信息化系统。 4）松阳县没有统一、标准、权威的全量地名地址资源池，无法满足民政作为地名、地址法理部门，服务于市监、政法、文旅水务等部门提供标准地名地址需求和为智慧城市提供基础数据保障。 5）民政第二次地名普查成果数据没有地名系统进行有效成果转化，服务于民政工作和社会服务。 6）县域范围内门牌缺失、不标准现象突出，目前没有很好的门牌管理、服务的信息化系统，且无法发挥物理门牌的作用。 系统架构：采用B/S架构。 主要功能包括： 地名地址综合查询与展示子系统、数字门牌管理子系统、地名普查成果转化子系统、地名文化遗产管理子系统、地名电子档案管理子系统、地名文化公共服务子系统、地名文化人才管理子系统、地名文化挖掘与教育管理子系统、地名文化综合驾驶舱。 面向人群：社会群体、企业法人、民政局业务科室人员、市监局等地址诉求相关部门业务人员。'
  //   },
  //   {
  //     applicationName: '丽水市缙云县医疗保障局医保防贫管理系统',
  //     tags: '最佳应用',
  //     introduce: '系统解决了两类人员就医管理、各部门救助信息不共享、两类人员自付医疗费用高和如何防范化解等的问题。缙云县缙情帮医保防贫系统采用BS系统架构，为建立健全政府主导、社会参与的多元救助保障体系，以数字化建设为支撑，搭建医保防贫系统，建设1个数据库：多层次医保防贫体系数据库；打造2个子系统：医保防贫精准识别系统和“部门救助+商保+慈善医疗救助”一站式救助系统。面向因病困难人员、支出型因病相对困难人员等两类人员。实现了对因病困难人员、支出型因病相对困难人员等两类人员进行精准识别、精准化解。建立第三方参与重特大疾病相对困难人员救助新模式，与第三方共建防贫专项基金。推进两类人员过程管理，搭建两类人员就医用药标准化体系，切实降低患者自付医疗费用。'
  //   },
  //   {
  //     applicationName: '丽水市龙泉市益林富农应用',
  //     tags: '最佳应用',
  //     introduce: '面向社会大众，更清楚的获取山林信息，采用BS架构，主要包括落界确权；生态信用；绿色金融；流转交易；基层智治等模块，突出问题导向、需求导向、效果导向、未来导向，围绕群众诉求响应、基层智慧治理、领导科学决策等现实需要，推动流程再造和制度重塑。'
  //   },
  //   {
  //     applicationName: '丽水市天眼守望助力“两山”转化综合智治应用',
  //     tags: '最佳应用',
  //     introduce: '采用B/S架构，面向对象为业务部门、群众、企业、基层治理人员。护绿出新子场景构建天眼、地眼、人眼三位一体的生态环境、自然资源智治体系，点绿成金子场景建设GEP辅助决策相关应用，多源场景整合、多端场景服务、综合驾驶舱、场景业务管理、指标管理、组件建设。'
  //   }
  //
  // ]),
  dialogVisible1 = ref(false),
  dialogData = ref({}),
  // showDialog1 = (data) => {
  //   dialogVisible1.value = true
  //   dialogData.value = {
  //     ...data
  //   }
  // },
  detailData = ref({}),
  getData = async () => {
    const res = await cockpitStats({ regionCode: regionMap[regionData.value?.name] || '', year: searchForm.year })
    detailData.value = res.data
    getChart()
  }

onMounted(async () => {
  await getMapJson(userInfo.value.regionCode)
  await getData()
  window.addEventListener('resize', () => {
    chartMap.resize()
    chart1.resize()
    chart2.resize()
    chart3.resize()
    chartZldf.resize()
  })
  getTableData()
})
</script>

<template>
  <div class="cockpit flex flex-col">
    <!--    图表的一些背景图-->
    <img ref="imgRef2" src="@/assets/images/cockpit/chart2Bg.png" style="display: none;" />
    <div class="head">
      <img src="@/assets/images/cockpit/title.png" class="mx-auto" />
    </div>
    <p class="search flex justify-end items-center">
      <img src="@/assets/images/cockpit/arrow.png" />
      <span class="label">年份选择</span>
      <el-date-picker
        v-model="searchForm.year"
        type="year"
        value-format="YYYY"
        placeholder="请选择"
        class="yearPicker"
        popper-class="customPopPicker"
        clearable
        @change="getData"
      />
      <el-icon class="icon">
        <ArrowDown />
      </el-icon>
    </p>
    <div class="content flex flex-1">
      <div class="left flex flex-col">
        <div class="box1 box">
          <p class="tit">
            <img src="@/assets/images/cockpit/boxTit.png" />
            <span class="text">监测预警</span>
          </p>
          <div class="mod1">
            <div class="flex justify-between">
              <div class="w-1/2 flex">
                <div class="flex items-center mod1Item">
                  <img class="mod1Icon" src="@/assets/images/cockpit/boxIcon1.png" alt="" />
                  <div>
                    <p class="mod1Label">超期在建数</p>
                    <p class="flex items-end">
                      <span class="mod1Value">
                        <span class="font-bold">{{ detailData?.monitorData?.monitorOverdueConstructionProjectsNum||0 }}</span>
                        <span class="mod1Unit">个</span>
                      </span>
                      <span class="flex items-center">
                        <svg-icon name="arrow" class="mod1Arrow inline-block text-[#20B760]" />
                        <span class="mod1Per font-bold text-[#2D99FF]">{{ detailData?.monitorData?.monitorOverdueConstructionProjectsRise||0 }}%</span>
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="w-1/2 flex">
                <div class="flex items-center mod1Item">
                  <img class="mod1Icon" src="@/assets/images/cockpit/boxIcon2.png" alt="" />
                  <div>
                    <p class="mod1Label">环节滞后数</p>
                    <p class="flex items-end">
                      <span class="mod1Value">
                        <span class="font-bold">{{ detailData?.monitorData?.monitorLaggingProjectsNum||0 }}</span>
                        <span class="mod1Unit">个</span>
                      </span>
                      <span class="flex items-center">
                        <svg-icon name="arrow" class="mod1Arrow inline-block" />
                        <span class="mod1Per font-bold text-[#2D99FF]">{{ detailData?.monitorData?.monitorLaggingProjectsRise }}%</span>
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="false" class="flex justify-center">
              <div class="flex items-center mod1Item">
                <img class="mod1Icon" src="@/assets/images/cockpit/boxIcon3.png" alt="" />
                <div>
                  <p class="mod1Label">审查驳回数</p>
                  <p class="flex items-end">
                    <span class="mod1Value">
                      <span class="font-bold">{{ detailData?.monitorData?.monitorRejectedApproveProjectsNum||0 }}</span>
                      <span class="mod1Unit">个</span>
                    </span>
                    <span class="flex items-center">
                      <svg-icon name="arrow" class="mod1Arrow inline-block" />
                      <span class="mod1Per font-bold text-[#2D99FF]">{{ detailData?.monitorData?.monitorRejectedApproveProjectsRise }}%</span>
                    </span>
                  </p>
                </div>
              </div>
            </div>
            <div class="flex justify-between">
              <div v-if="false" class="flex items-center mod1Item">
                <img class="mod1Icon" src="@/assets/images/cockpit/boxIcon3.png" alt="" />
                <div>
                  <p class="mod1Label">预审驳回项目数</p>
                  <p class="flex items-end">
                    <span class="mod1Value">
                      <span class="font-bold">{{ detailData?.monitorData?.monitorRejectedPreReviewProjectsNum||0 }}</span>
                      <span class="mod1Unit">个</span>
                    </span>
                    <span class="flex items-center">
                      <svg-icon name="arrow" class="mod1Arrow inline-block" />
                      <span class="mod1Per font-bold text-[#2D99FF]">{{ detailData?.monitorData?.monitorRejectedPreReviewProjectsRise }}%</span>
                    </span>
                  </p>
                </div>
              </div>
              <div class="w-1/2 flex">
                <div class="flex items-center mod1Item">
                  <img class="mod1Icon" src="@/assets/images/cockpit/boxIcon3.png" alt="" />
                  <div>
                    <p class="mod1Label">审查驳回数</p>
                    <p class="flex items-end">
                      <span class="mod1Value">
                        <span class="font-bold">{{ detailData?.monitorData?.monitorRejectedApproveProjectsNum||0 }}</span>
                        <span class="mod1Unit">个</span>
                      </span>
                      <span class="flex items-center">
                        <svg-icon name="arrow" class="mod1Arrow inline-block" />
                        <span class="mod1Per font-bold text-[#2D99FF]">{{ detailData?.monitorData?.monitorRejectedApproveProjectsRise }}%</span>
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="w-1/2 flex">
                <div class="flex items-center mod1Item">
                  <img class="mod1Icon" src="@/assets/images/cockpit/boxIcon4.png" alt="" />
                  <div>
                    <p class="mod1Label">验收条件未达标</p>
                    <p class="flex items-end">
                      <span class="mod1Value">
                        <span class="font-bold">{{ detailData?.monitorData?.monitorAcceptConditionsNotStandardsNum||0 }}</span>
                        <span class="mod1Unit">个</span>
                      </span>
                      <span class="flex items-center">
                        <svg-icon name="arrow" class="mod1Arrow inline-block" />
                        <span class="mod1Per font-bold text-[#2D99FF]">{{ detailData?.monitorData?.monitorAcceptConditionsNotStandardsRise }}%</span>
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="false" class="borderMod overflow-hidden">
            <div class="bmod bmod1">
              <p class="tit">项目安全投入占比</p>
              <div ref="chart1Ref" class="chart1"></div>
            </div>
            <div v-if="false" class="bmod bmod2">
              <div class="flex flex-col h-full justify-center">
                <!--                <p class="tit">密评级别</p>-->
                <!--                <div ref="mpjbRef" class="flex-1"></div>-->
                <p class="label">密评数量</p>
                <div class="dataD">
                  <div class="top">
                    <p class="data">{{ detailData?.monitorData?.passwordGradeCharts?.map(i => i.num).reduce((acc, cur) => { return acc + cur }) }}</p>
                    <p class="unit text-center">个</p>
                  </div>
                </div>
              </div>
              <div class="flex flex-col flex-1 h-full">
                <p class="tit">等保级别</p>
                <div ref="dbjbRef" class="flex-1"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="box box1-2">
          <p class="tit">
            <img src="@/assets/images/cockpit/boxTit.png" />
            <span class="text">安全投入</span>
          </p>
          <div class="mod flex-1">
            <div ref="chart1Ref" class="chart1 h-full"></div>
          </div>
        </div>
        <div class="box box1-3">
          <p class="tit">
            <img src="@/assets/images/cockpit/boxTit.png" />
            <span class="text">数据质量</span>
          </p>
          <div class="flex-1 mod">
            <div ref="chartZldfRef" class="chartZldf h-full"></div>
          </div>
        </div>
        <div class="box2 box flex flex-col flex-1">
          <p class="tit">
            <img src="@/assets/images/cockpit/boxTit.png" />
            <span class="text">专家统计</span>
          </p>
          <div class="mod flex-1">
            <div class="left h-1/2 flex">
              <div class="w-full flex flex-col">
                <div ref="chart2Ref" class="flex-1"></div>
              </div>
              <div v-if="false" class="w-1/2 flex flex-col">
                <div ref="chart2_1Ref" class="flex-1"></div>
              </div>
            </div>
            <div class="right h-1/2 flex flex-col">
              <p class="tit">各区域专家数量</p>
              <div ref="chart3Ref" class="chart3 flex-1"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle flex-1 flex flex-col">
        <div class="topBox flex items-center justify-between">
          <div class="dataDiv">
            <img src="@/assets/images/cockpit/centerTopIcon1.png" class="icon icon1" />
            <div>
              <p class="label">计划数</p>
              <p><span class="data">{{ detailData?.topData?.topPlanProjectsNum||0 }}</span><span class="unit">个</span></p>
            </div>
          </div>
          <div class="dataDiv">
            <img src="@/assets/images/cockpit/centerTopIcon1.png" class="icon icon1" />
            <div>
              <p class="label">批复数</p>
              <p><span class="data">{{ detailData?.topData?.topApprovalProjectsNum||0 }}</span><span class="unit">个</span></p>
            </div>
          </div>
          <div class="dataDiv">
            <img src="@/assets/images/cockpit/centerTopIcon2.png" class="icon icon2" />
            <div>
              <p class="label">批复额</p>
              <p>
                <span v-if="detailData?.topData?.topApprovalProjectsAmount" class="data">{{ Math.abs(detailData?.topData?.topApprovalProjectsAmount) / 10000 < 1 ? `${detailData?.topData?.topApprovalProjectsAmount.toFixed(1)}万元` : `${(detailData?.topData?.topApprovalProjectsAmount / 10000).toFixed(1)}`||0 }}</span>
                <span class="unit">{{ Math.abs(detailData?.topData?.topApprovalProjectsAmount) / 10000 < 1 ?'万元':'亿元' }}</span>
              </p>
            </div>
          </div>
          <!--          <div class="dataDiv">-->
          <!--            <img src="@/assets/images/cockpit/centerTopIcon3.png" class="icon icon3" />-->
          <!--            <div>-->
          <!--              <p class="label">平均建设周期</p>-->
          <!--              <p><span class="data">{{ detailData?.topData?.topAverageConstructionPeriod||0 }}</span><span class="unit">个月</span></p>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="dataDiv">
            <img src="@/assets/images/cockpit/centerTopIcon1.png" class="icon icon1" />
            <div>
              <p class="label">在建数</p>
              <p><span class="data">{{ detailData?.topData?.topOngoingProjectsNum||0 }}</span><span class="unit">个</span></p>
            </div>
          </div>

        </div>
        <div class="box1 flex flex-col">
          <div class="top flex items-center">
            <img
              v-if="regionData?.name&&regionData?.name!=='全市'"
              src="@/assets/images/cockpit/backIcon.png"
              class="backIcon"
              @click="backArea"
            />
            <p class="area">丽水市-{{ regionData?.name || '全市' }}</p>
            <div class="sbj cursor-pointer" @click="areaToKf('市本级','330500')">
              <span>市本级</span>
              <span class="data">{{ detailData?.mapProjectData?.find(i=>i.regionName==='市本级')?.projectsNum||0 }}</span>
              <span>个</span>
            </div>
            <!--            <div class="kfq cursor-pointer" @click="areaToKf('开发区','331118')">-->
            <!--              <p class="name">开发区</p>-->
            <!--              <p class="data">{{ detailData?.mapProjectData?.find(i=>i.regionName==='开发区').projectsNum||0 }}</p>-->
            <!--            </div>-->
          </div>
          <div ref="chartMapRef" class="chartMap flex-1"></div>
        </div>
        <div class="flex-1 flex flex-col">
          <div class="box2 flex-1">
            <div class="con h-full">
              <div class="plante">
                <div class="data1 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalPerformance||0 }}</p>
                  <p class="label">绩效</p>
                </div>
                <div class="data2 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalOperation||0 }}</p>
                  <p class="label">运维</p>
                </div>
                <div class="data3 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalAccept||0 }}</p>
                  <p class="label">验收</p>
                </div>
                <div class="data4 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalConstruction||0 }}</p>
                  <p class="label">建设</p>
                </div>
                <div class="data5 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalApprove||0 }}</p>
                  <p class="label">立项</p>
                </div>
                <div class="data6 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalApply||0 }}</p>
                  <p class="label">申报</p>
                </div>
                <div class="data7 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalPlan||0 }}</p>
                  <p class="label">计划</p>
                  <p class="tag">开始</p>
                </div>
                <div class="data8 dataDiv">
                  <p class="data">{{ detailData?.statusProjectsData?.projectsTotalLogOff||0 }}</p>
                  <p class="label">注销</p>
                  <p class="tag">结束</p>
                </div>
              </div>
            </div>
          </div>
          <p class="box2-tit">全生命周期跟踪</p>
        </div>
      </div>
      <div class="right h-full overflow-hidden flex flex-col">
        <div class="box flex flex-col">
          <p class="tit">
            <img src="@/assets/images/cockpit/boxTit.png" />
            <span class="text">项目画像</span>
          </p>
          <div class="midContent flex-1">
            <div class="con1 flex justify-between">
              <div class="flex-1">
                <p class="label">最佳应用</p>
                <div class="data">
                  <span>{{ detailData?.excellentData?.excellentBestAppNum||0 }}</span>
                </div>
              </div>
              <div class="flex-1">
                <p class="label">重大应用</p>
                <div class="data">
                  <span>{{ detailData?.excellentData?.excellentMajorAppNum||0 }}</span>
                </div>
              </div>
              <div class="flex-1">
                <p class="label">跨域共享</p>
                <div class="data">
                  <span>{{ detailData?.excellentData?.excellentCrossDomainSharingNum||0 }}</span>
                </div>
              </div>
              <div class="flex-1">
                <p class="label">提级共享</p>
                <div class="data">
                  <span>{{ detailData?.excellentData?.excellentCrossLevelSharingNum||0 }}</span>
                </div>
              </div>
            </div>
            <div class="con2 overflow-hidden">
              <div v-if="false" class="tabBox flex justify-center">
                <div class="tab flex">
                  <div :class="['tabItem',tabActive===0?'active':'']" @click="tabActive =0">最佳应用</div>
                  <div :class="['tabItem',tabActive===1?'active':'']" @click="tabActive = 1">重大应用</div>
                </div>
              </div>
              <div class="h-full overflow-hidden">
                <vue3-seamless-scroll
                  :list="detailData?.appDatas?.[tabActive===0?'最佳应用':'重大应用']"
                  class="scroll"
                  :step="0.5"
                  :hover="true"
                  :limit-scroll-num="2"
                >
                  <div v-for="(item,index) in detailData?.appDatas?.[tabActive===0?'最佳应用':'重大应用']" :key="index" class="list">
                    <p class="title cursor-pointer" @click="$router.push({name:'portraitScreen',query:{projectCode:item.projectCode}})">
                      <img class="star" src="@/assets/images/cockpit/star.png" />
                      <span>{{ item.applicationName }}</span>
                    </p>
                    <div class="tags flex justify-between">
                      <p v-for="(tag,key) in item.tags.split(',')" :key="key" class="tag">{{ tag }}</p>
                    </div>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
        <div class="box">
          <p class="tit">
            <img src="@/assets/images/cockpit/boxTit.png" />
            <span class="text">产出要素</span>
          </p>
          <div class="midContent">
            <div class="con4">
              <div class="flex flex-col items-center">
                <!--                <p class="tit">应用产出</p>-->
                <p class="label">应用</p>
                <div class="dataD">
                  <p class="data flex items-center"><span>{{ detailData?.produceData?.produceAppNum||0 }}</span><span class="unit">个</span></p>
                </div>
              </div>
              <p class="line"></p>
              <div class="flex flex-col items-center">
                <!--                <p class="tit">数据产出</p>-->
                <p class="label">数据</p>
                <div class="dataD">
                  <p class="data flex items-center"><span>{{ detailData?.produceData?.produceDataNum||0 }}</span><span class="unit">条</span></p>
                </div>
              </div>
              <p class="line"></p>
              <div class="flex flex-col items-center">
                <!--                <p class="tit">组件产出</p>-->
                <p class="label">组件</p>
                <div class="dataD">
                  <p class="data flex items-center"><span>{{ detailData?.produceData?.produceComponentNum||0 }}</span><span class="unit">个</span></p>
                </div>
              </div>
              <p class="line"></p>
              <div class="flex flex-col items-center">
                <!--                <p class="tit tit3">大脑要素</p>-->
                <div class="flex items-center justify-between">
                  <div>
                    <p class="label text-center">算法</p>
                    <div class="dataD">
                      <p class="data flex items-center"><span>{{ detailData?.produceData?.produceBrainElementsNum||0 }}</span><span class="unit">个</span></p>
                    </div>
                  </div>
                  <div>
                    <p class="label text-center">模型</p>
                    <div class="dataD">
                      <p class="data flex items-center"><span>{{ detailData?.produceData?.produceBrainModelNum||0 }}</span><span class="unit">个</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 flex-col flex">
          <div class="box flex-1 flex flex-col">
            <p class="tit">
              <img src="@/assets/images/cockpit/boxTit.png" />
              <span class="text">绩效评价</span>
            </p>
            <div class="midContent flex-1">
              <div class="con5">
                <div class="left w-1/2 flex items-center">
                  <div ref="chart5Ref" class="chart5 h-full"></div>
                </div>
                <div class="right  flex items-center">
                  <div ref="xmjxRef" class="h-full xmjxChart"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="box flex-1 flex flex-col" style="margin-bottom: 0;">
            <p class="tit">
              <img src="@/assets/images/cockpit/boxTit.png" />
              <span class="text">成本控制</span>
            </p>
            <div class="midContent flex-1">
              <div class="con3 flex h-full">
                <div class="left w-1/3">
                  <div class="left1">
                    <p class="label">核减资金</p>
                    <div class="dataD">
                      <div class="top">
                        <p>{{ Math.abs(detailData?.reduceData?.reduceFundsTotal) / 10000 < 1 ? `${ Math.round((detailData?.reduceData?.reduceFundsTotal)*100)/100}` : `${ Math.round((detailData?.reduceData?.reduceFundsTotal)/10000*100)/100}`||0 }}</p>
                        <p class="unit">{{ Math.abs(detailData?.reduceData?.reduceFundsTotal) / 10000 < 1 ?'万元':'亿元' }}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right w-2/3 h-full">
                  <div ref="chart4Ref" class="chart4 h-full"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    <div v-if="dialogVisible" class="customMask">-->
    <!--      <div class="customDialog">-->
    <!--        <svg-icon name="dialogClose" class="closeIcon" @click="dialogVisible=false" />-->
    <!--        <p class="tit">项目列表</p>-->
    <!--        <div>-->
    <!--          <el-table-->
    <!--            :data="tableData"-->
    <!--            style="width: 100%"-->
    <!--            class="customTable"-->
    <!--            stripe-->
    <!--          >-->
    <!--            <el-table-column-->
    <!--              label="序号"-->
    <!--              type="index"-->
    <!--              width="60"-->
    <!--            />-->
    <!--            <el-table-column prop="projectName" label="项目名称" width="180" />-->
    <!--            <el-table-column prop="buildOrg" label="申报单位" />-->
    <!--            <el-table-column prop="projectYear" label="预算年度" />-->
    <!--            <el-table-column prop="declaredAmount" label="申报金额（万元）" />-->
    <!--            <el-table-column prop="createOn" label="发起时间" />-->
    <!--            <el-table-column label="操作" fixed="right">-->
    <!--              <template #default="scope">-->
    <!--                <p class="btn cursor-pointer" @click="$router.push({name:'portraitScreen',query:{projectCode:scope.row.projectCode}})">-->
    <!--                  <svg-icon name="dialogEye" class="icon" />-->
    <!--                  <span>项目画像</span>-->
    <!--                </p>-->
    <!--              </template>-->
    <!--            </el-table-column>-->
    <!--          </el-table>-->
    <!--          <p>-->
    <!--            <el-pagination-->
    <!--              v-model:currentPage="pageParams.pageNumber"-->
    <!--              v-model:page-size="pageParams.pageSize"-->
    <!--              background-->
    <!--              layout="prev, pager, next"-->
    <!--              :total="total"-->
    <!--              @size-change="getTableData"-->
    <!--              @current-change="getTableData"-->
    <!--            />-->
    <!--          </p>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div v-if="dialogVisible1" class="customMask">
      <div class="customDialog customDialog1">
        <svg-icon name="dialogClose" class="closeIcon" @click="dialogVisible1=false" />
        <p class="tit">应用介绍-{{ dialogData.applicationName }}</p>
        <div>
          {{ dialogData.introduce }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
@screenW: 1920px;
@screenH: 1080px;
.px2vw(@name, @px) {
    @{name}: (@px / @screenW) * 100vw;
}

.px2vh(@name, @px) {
    @{name}: (@px / @screenH) * 100vh;
}

.px2font(@px) {
  font-size: (@px / @screenW) * 100vw;
}
@keyframes planet-rotate {
  0% {
    transform: scaleY(0.2) rotate(0);
  }
  100% {
    transform: scaleY(0.2) rotate(360deg);
  }
}
@keyframes self-rotate {
  0% {
    transform: rotate(0) scaleY(4);
  }
  100% {
    transform: rotate(-360deg) scaleY(4);
  }
}
.cockpit {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/cockpit/bg.png');
  background-size: 100% 100%;
  .px2vw(padding-left, 30);
  .px2vw(padding-right, 30);
  .px2vh(padding-top, 15);
  .px2vh(padding-bottom, 15);
  color: #ffffff;
  position: relative;

  .head {
    img {
      .px2vw(width, 836);
      .px2vh(height, 51);
    }
  }

  .search {
    color: #2D99FF;
    .px2font(16);
    position: relative;
    .px2vh(margin-bottom, 15);

    img {
      .px2vw(width, 38);
      .px2vh(height, 23);
    }

    .label {
      .px2vw(margin-right, 12);
    }

    .icon {
      color: #2D99FF;
      position: absolute;
      .px2vw(right, 16);
    }

    .yearPicker {
      .px2vw(width, 123);
      .px2vh(height, 32);
      background: #011534;
      box-shadow: 0px 0px 4px 1px rgba(45, 153, 255, 1), 0px 0px 2px 0px rgba(0, 14, 46, 1);
      border-radius: 5px;
      border: 1px solid #2D99FF;
      .el-input__icon {
        display: none;
      }

      .el-input__wrapper {
        background: none;
        box-shadow: none;
      }

      .el-input__inner {
        color: #fff;
        .px2font(16);
      }
    }
  }

  .content {
    .box {
      overflow: inherit;

      .tit {
        position: relative;
        .px2font(12);
        color: #FFFFFF;
        font-weight: 600;

        img {
          .px2vw(width, 178);
          .px2vh(height, 60);
          .px2vw(margin-left, -25);
        }

        .text {
          line-height: 1.785;
          position: absolute;
          .px2vh(top, 14);
          .px2vw(left, 39);
        }
      }
    }

    .left {
      .box1 {
        background-image: url('@/assets/images/cockpit/rect2.png');
        background-size: 100% 100%;
        .px2vw(width, 524);
        .px2vh(height, 200);
        .px2vh(margin-bottom, 15);
        .px2font(12);
        display: flex;
        flex-direction: column;

        .dataDiv {
          .px2vh(margin-bottom, 5);

          .data {
            font-family: DINPro-Bold, DINPro;
            font-weight: bold;
            color: #FFFFFF;
            .px2font(22);
            line-height: 1.09;
          }

          .precent {
            .px2font(16);
            font-family: DINPro-Bold, DINPro;
            font-weight: bold;
            line-height: 1.25;

            &.green {
              color: #20B760;
            }

            &.red {
              color: #E34663;
            }

            &.blue {
              color: #2D99FF;
            }
          }

          .unit {
            .px2vw(margin-right, 4);
          }

          .icon {
            .px2font(16);
          }

          .boxIcon {
            .px2vw(width, 36);
            .px2vh(height, 31);
            .px2vw(margin-right, 5);
          }
        }

        .mod1 {
          .px2vw(padding-left, 40);
          .px2vw(padding-right, 40);
          .px2vh(padding-bottom, 20);

          .mod1Item {
            .px2vh(padding-bottom, 10);
            .px2vw(padding-left, 6);
            background-image: url("@/assets/images/cockpit/mod1ItemBottomBg.png");
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: contain;
          }

          .mod1Icon {
            .px2vw(width, 27);
            .px2vh(height, 27);
            .px2vw(margin-right, 10);
          }

          .mod1Label {
            .px2font(12);
          }

          .mod1Value {
            .px2font(22);
          }

          .mod1Unit {
            .px2font(10);
            .px2vw(margin-left, 4);
            .px2vw(margin-right, 4);
          }

          .mod1Arrow {
            .px2vw(width, 16);
            .px2vh(height, 16);
          }

          .mod1Per {
            .px2font(16);
          }
        }

        .borderMod {
          .px2vw(padding-left, 10);
          .px2vw(padding-right, 10);
          .px2vh(padding-bottom, 10);
          flex: 1;

          .bmod {
            border: 1px solid #2D99FF;
            .px2vw(width, 504);
            .px2vh(padding-top, 20);
            .px2vh(padding-bottom, 20);

            .tit {
              font-weight: 600;
              .px2font(12);
            }

            &.bmod1 {
              height: 100%;
              //border-bottom: 0;
              display: flex;
              flex-direction: column;

              .chart1 {
                flex: 1
              }

              .tit {
                .px2vw(padding-left, 29);
              }
            }

            &.bmod2 {
              height: 50%;
              .px2vw(padding-left, 29);
              .px2vw(padding-right, 29);
              display: flex;
              align-items: center;
              .label {
                .px2font(12);
                font-weight: 600;
                line-height: 1.5;
                .px2vh(margin-bottom, 20);
                color: #FBCB60;
                text-align: center;
              }

              .dataD {
                .px2vh(height, 44);
                .px2vw(width, 122);
                position: relative;
                margin: 0 auto;
                background: url("@/assets/images/cockpit/textBgW.png");
                background-size: 100% 100%;
                .top {
                  position: absolute;
                  .px2vh(top, -15);
                  font-weight: bold;
                  left: 50%;
                  transform: translateX(-50%);

                  .data {
                    .px2font(20);
                    font-family: DINPro-Bold, DINPro;
                  }

                  .unit {
                    .px2font(12);
                    line-height: 1.5;
                  }
                }
              }

            }
          }
        }
      }
      .box1-2{
        background-image: url('@/assets/images/cockpit/rect2.png');
        background-size: 100% 100%;
        .px2vw(width, 524);
        .px2vh(height, 180);
        display: flex;
        flex-direction: column;
        .px2vh(margin-bottom, 15);
        .mod{
          .px2vw(padding-left, 22);
        }
      }
      .box1-3{
        background-image: url('@/assets/images/cockpit/rect2.png');
        background-size: 100% 100%;
        .px2vw(width, 524);
        .px2vh(height, 200);
        display: flex;
        flex-direction: column;
        .px2vh(margin-bottom, 15);
        .mod{
          .px2vw(padding-left, 22);
        }
      }
      .box2 {
        background-image: url('@/assets/images/cockpit/rect2.png');
        background-size: 100% 100%;
        .px2vw(width, 524);

        .mod {
          .px2vw(padding-left, 22);
          .px2vh(margin-top, -12);

          .tit {
            font-weight: 600;
            .px2font(12);
          }
        }

        .chart2 {
          .px2vw(width, 122);
          .px2vw(height, 122);
        }
      }
    }

    .right {
      .box {
        background-image: url('@/assets/images/cockpit/rect2.png');
        background-size: 100% 100%;
        .px2vw(width, 524);
        .px2vh(margin-bottom, 15);
        .midContent {
          .px2vw(padding-left, 12);
          .px2vw(padding-right, 12);
          overflow: hidden;
          display: flex;
          flex-direction: column;

          .con1 {
            .px2vh(margin-top, 8);
            .px2vh(margin-bottom, 12);
            .px2vw(padding-left, 10);
            .px2vw(padding-right, 10);

            .label {
              .px2font(12);
              color: #2D99FF;
              .px2vw(margin-bottom, 7);
              text-align: center;
            }

            .data {
              .px2font(24);
              .px2vh(height, 38);
              font-family: DINPro-Bold, DINPro;
              font-weight: bold;
              color: #FFFFFF;
              text-align: center;
              background: url("@/assets/images/cockpit/dataBg.png");
              background-size: 100% 100%;
              position: relative;

              span {
                .px2vh(top, -11);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }

          .con2 {
            .px2vh(height, 180);
            box-shadow: 0px 1px 0px 0px rgba(45, 153, 255, 0.84);

            .tabBox {
              .px2vh(margin-bottom, 7);

              .tabItem {
                .px2vw(padding-left, 58);
                .px2vw(padding-right, 58);
                border: 1px solid #2D99FF;
                text-align: center;
                .px2font(16);
                cursor: pointer;
                color: #2D99FF;

                &:first-child {
                  border-right: none;
                  border-radius: 5px 0px 0px 5px;
                }

                &:last-child {
                  border-radius: 0px 5px 5px 0px;
                }

                &.active {
                  background: #ECFEFF linear-gradient(180deg, #2D99FF 0%, rgba(70, 230, 120, 0.67) 100%);
                  box-shadow: 0px 0px 35px 5px rgba(0, 240, 255, 0.47);
                  color: #021330;
                  font-weight: bold;
                }
              }
            }

            .list {
              .px2font(16);
              .px2vh(margin-bottom, 10);
              .px2vh(padding-bottom, 10);
              box-shadow: 0px 1px 0px 0px rgba(45, 153, 255, 0.4);

              .title {
                .px2vw(padding-left, 12);
                .px2vw(padding-right, 12);
                .px2vh(padding-top, 10);
                .px2vh(padding-bottom, 10);
                .px2vh(margin-bottom, 10);
                display: flex;
                align-items: center;
                background: linear-gradient(270deg, rgba(17, 72, 133, 0.35) 0%, rgba(17, 72, 133, 0.75) 100%);
                box-shadow: 0px 0px 0px 0px #2D99FF, inset 0px 4px 0px 0px rgba(45, 153, 255, 0.8);

                .star {
                  .px2vw(width, 16);
                  .px2vw(height, 16);
                  .px2vw(margin-right, 4);
                }

                .tag {
                  .px2vw(margin-left, 12);
                  font-weight: 600;
                  color: #02C5D1;
                }
              }

              .remark {
                display: flex;
                .px2vh(margin-bottom, 10);
              }

              .tags {
                .tag {
                  background: url("@/assets/images/cockpit/tagBg.png");
                  background-size: 100% 100%;
                  .px2vw(width, 96);
                  text-align: center;
                }
              }
            }
          }
          .con2-1{
            .px2vh(height, 149);
            .px2vh(margin-top, -2);
            .px2vh(margin-bottom, 8);
            box-shadow: 0px 1px 0px 0px rgba(45, 153, 255, 0.84);
            display: flex;
            flex-direction: column;
          }
          .con3 {
            box-shadow: 0px -1px 0px 0px rgba(45, 153, 255, 0.84);
            //.px2vh(height,152);
            align-items: center;
            .px2vh(padding-bottom, 10);
            .px2vh(padding-top, 10);

            .left1 {
              .label {
                color: #FBCB60;
              }

              .dataD {
                background: url("@/assets/images/cockpit/textBgW.png");
              }
            }

            .left {
              text-align: center;

              .label {
                .px2font(12);
                font-weight: 600;
                line-height: 1.5;
                .px2vh(margin-bottom, 10);
              }

              .dataD {
                background-size: 100% 100%;
                .px2vh(height, 44);
                .px2vw(width, 122);
                position: relative;
                margin: 0 auto;

                .top {
                  position: absolute;
                  .px2vh(top, -15);
                  font-weight: bold;
                  left: 50%;
                  transform: translateX(-50%);

                  .data {
                    .px2font(20);
                    font-family: DINPro-Bold, DINPro;
                  }

                  .unit {
                    .px2font(12);
                    line-height: 1.5;
                  }
                }
              }
            }
            .chart4{
              height: 100%;
            }
          }

          .con4 {
            display: flex;
            justify-content: space-between;
            position: relative;
            .px2font(12);
            align-items: center;
            box-shadow: 0px 1px 0px 0px rgba(45, 153, 255, 0.84);
            //.px2vh(padding-top, 10);
            .px2vh(padding-bottom, 10);

            .tit {
              background: url("@/assets/images/cockpit/smallTextBg.png");
              background-size: 100% 100%;
              .px2vh(height, 20);
              .px2vw(width, 80);
              .px2vh(margin-bottom, 8);
              display: flex;
              align-items: center;
              justify-content: center;

            }

            .label {
              .px2vh(margin-bottom, 9);
            }

            .dataD {
              background: url("@/assets/images/cockpit/textBgG.png");
              background-size: 100% 100%;
              .px2vh(height, 29);
              .px2vw(width, 100);
              position: relative;

              .data {
                .px2font(22);
                font-family: DINPro-Bold, DINPro;
                font-weight: bold;
                position: absolute;
                .px2vh(top, -9);
                left: 50%;
                transform: translateX(-50%);

                .unit {
                  .px2font(12);
                  .px2vw(margin-left, 4);
                  font-weight: normal;
                }
              }
            }

            .line {
              .px2vh(height, 40);
              .px2vw(width, 1);
              background: #02C5D1;
              opacity: 0.5;
            }
          }

          .con5 {
            flex: 1;
            display: flex;
            .px2vh(padding-top, 9);

            .left {
              height: 100%;

              .tit {
                .px2vh(margin-bottom, 8);
              }

              .chart5 {
                background: url("@/assets/images/cockpit/cirChartBg.png");
                background-size: 100% 100%;
                //.px2vh(margin-top, -10);
                .px2vw(width, 143);
                .px2vw(height, 143);
                margin: 0 auto;
              }
            }

            .right {
              flex: 1;
              .xmjxChart{
                background: url("@/assets/images/cockpit/cirChartBg.png");
                background-size: 100% 100%;
                .px2vw(width, 143);
                .px2vw(height, 143);
                margin: 0 auto;
              }
              .tit {
                .px2vh(margin-bottom, 8);
              }
            }
          }
        }
      }
    }

    .middle {
      .px2vw(padding-left, 19);
      .px2vw(padding-right, 19);

      .topBox {
        background-image: url('@/assets/images/cockpit/centerTopBg.png');
        background-size: 100% 100%;
        .px2vw(padding-left, 35);
        .px2vw(padding-right, 25);
        .px2vh(padding-top, 13);
        .px2vh(padding-bottom, 10);

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

          .icon {
            .px2vw(margin-right, 10);

            &.icon1 {
              .px2vw(width, 27);
              .px2vw(height, 27);
            }

            &.icon2 {
              .px2vw(width, 27);
              .px2vh(height, 29);
            }

            &.icon3 {
              .px2vw(width, 27);
              .px2vh(height, 27);
            }
          }

          .label {
            .px2font(20);
            line-height: 1.41;
            .px2vh(margin-bottom, 4);
          }

          .data {
            .px2font(22);
            font-family: DINPro-Bold, DINPro;
            font-weight: bold;
            line-height: 1.09;
            .px2vw(margin-right, 5);
          }

          .unit {
            .px2font(10);
          }
        }
      }

      .box1 {
        .px2vh(height, 740);
        .px2vh(margin-bottom, 10);
        position: relative;

        .top {
          .px2vw(padding-left, 38);
          .px2vh(padding-top, 20);

          .backIcon {
            .px2vw(width, 28);
            .px2vh(height, 28);
            cursor: pointer;
          }

          .area {
            background: url('@/assets/images/cockpit/regionTextBg.png');
            background-size: 100% 100%;
            .px2vw(padding-left, 10);
            .px2vw(padding-right, 24);
            .px2vh(padding-top, 6);
            .px2vh(padding-bottom, 7);
            .px2vw(margin-right, 19);
          }

        }
        .sbj{
          background: url("@/assets/images/cockpit/sbjBg.png");
          .px2font(16);
          font-weight: bold;
          background-size: 100% 100%;
          .px2vw(padding-left, 39);
          .px2vw(padding-right, 39);
          .px2vh(padding-top, 2);
          .px2vh(padding-bottom, 2);
          width: max-content;
          //margin: 0 auto;
          display: flex;
          align-items: center;
          //.px2vh(margin-top, 30);
          .data{
            .px2font(28);
            font-weight: bold;
            font-family: DINPro-Bold, DINPro;
            .px2vw(margin-left, 25);
            .px2vw(margin-right, 15);
          }
        }
      }

      .box2 {
        //.px2vh(height, 131);
        .px2vw(padding-left, 11);
        .px2vw(padding-right, 11);
        .px2vh(margin-top, -26);
        .px2vh(padding-bottom, 10);

        .con {
          position: relative;
          background-image: url('@/assets/images/cockpit/centerBotImg.png');
          background-size: 100% 100%;
          //.px2vh(height, 118);
          margin: 0 auto;
          .px2vh(margin-top, -20);
          //.px2vw(margin-left, 60);
          //.px2vw(margin-right, 60);
          .px2vw(width, 530);
          .px2vh(height, 128);
          .plante{
            .px2vw(width, 500);
            .px2vh(height, 500);
            position: absolute;
            //border: 2px solid #fff;
            transform-style: preserve-3d;
            transform: rotateZ(45deg);
            transform: scaleY(0.5) rotateZ(45deg);
            border-radius: 50%;
            animation: planet-rotate 20s linear infinite;
            .px2vh(top, -200);
          }
          .dataDiv {
            position: absolute;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            line-height: 1;
            .data {
              font-weight: bold;
              color: #ffffff;
            }
            &.data1 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 70);
              .px2vh(height, 68);
              background-image: url("@/assets/images/cockpit/smzq1Bg.png");
              top: 36%;
              .px2vw(left, -30);
              transform: translateY(-50%);
              .label {
                .px2font(10);
              }
              .data {
                .px2font(16);
              }
            }

            &.data2 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 62);
              .px2vh(height, 62);
              background-image: url("@/assets/images/cockpit/smzq2Bg.png");
              .px2vh(top, 20);
              .px2vw(left, 40);
              .data {
                .px2font(19);
              }
              .label {
                .px2font(12);
              }
            }

            &.data3 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 70);
              .px2vh(height, 70);
              background-image: url("@/assets/images/cockpit/smzq3Bg.png");
              .px2vh(top, -43);
              .px2vw(right, 200);
              .data {
                .px2font(20);
              }
              .label {
                .px2font(13);
              }
            }

            &.data4 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 62);
              .px2vh(height, 62);
              background-image: url("@/assets/images/cockpit/smzq4Bg.png");
              .px2vh(top, 40);
              .px2vw(right, 50);
              .data {
                .px2font(19);
              }
              .label {
                .px2font(12);
              }
            }

            &.data5 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 70);
              .px2vh(height, 68);
              background-image: url("@/assets/images/cockpit/smzq5Bg.png");
              top: 42%;
              .px2vw(right, -34);
              transform: translateY(-50%);
              .label {
                .px2font(10);
              }
              .data {
                .px2font(16);
              }
            }

            &.data6 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 90);
              .px2vh(height, 88);
              background-image: url("@/assets/images/cockpit/smzq6Bg.png");
              .px2vh(bottom, 70);
              .px2vw(right, 28);
              .data {
                .px2font(19);
              }
              .label {
                .px2font(12);
              }
            }

            &.data7 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 110);
              .px2vh(height, 108);
              background-image: url("@/assets/images/cockpit/smzq7Bg.png");
              .px2vh(bottom, -45);
              .px2vw(right, 190);
              .data {
                .px2font(30);
              }
              .label {
                .px2font(16);
              }
              .tag{
                .px2font(12);
                position: absolute;
                .px2vw(right, 10);
                .px2vh(top, 26);
                background: #FFFFFF;
                box-shadow: 0px 2px 7px 0px rgba(0,53,103,0.42);
                border-radius: 10px;
                font-weight: 600;
                color: #333333;
                .px2vw(padding-left, 7);
                .px2vw(padding-right, 7);
                .px2vh(padding-top, 2);
                .px2vh(padding-bottom, 2);
              }
            }

            &.data8 {
              transform: rotateZ(-45deg); /* 中和轨道的旋转 */
              /* 中和轨道的 scaleY 压缩，2 * 0.5 = 1 恢复原状，注意传入顺序，和 .planet 的 transform 是相反的，就像连续上了几个不同的锁，打开时要用和上锁相反的顺序去解 */
              transform: rotateZ(-45deg) scaleY(2);
              animation: self-rotate 20s linear infinite;
              .px2vw(width, 90);
              .px2vh(height, 88);
              background-image: url("@/assets/images/cockpit/smzq8Bg.png");
              .px2vh(bottom, 80);
              .px2vw(left, 0);
              .data {
                .px2font(19);
              }
              .label {
                .px2font(12);
              }
              .tag{
                .px2font(12);
                position: absolute;
                .px2vw(right, 5);
                .px2vh(top, 20);
                background: #FFFFFF;
                box-shadow: 0px 2px 7px 0px rgba(0,53,103,0.42);
                border-radius: 10px;
                font-weight: 600;
                color: #333333;
                .px2vw(padding-left, 7);
                .px2vw(padding-right, 7);
                .px2vh(padding-top, 2);
                .px2vh(padding-bottom, 2);
              }
            }

          }

        }

      }

      .box2-tit {
        margin: 0 auto;
        .px2vh(margin-top, 17);
        .px2vw(width, 305);
        .px2vh(height, 20);
        background-image: url('@/assets/images/cockpit/centerTit.png');
        background-size: 100% 100%;
        text-align: center;
        .px2font(12);
        line-height: 1.3;
      }
    }
  }

  .myTabs {
    .el-tabs__header {
      margin-bottom: 0;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__item {
      .px2vh(height, 17);
      .px2vh(line-height, 17);
      .px2font(12);
      .px2vw(padding-right, 4);
      .px2vw(padding-left, 4);
      color: #02C5D1;

      &:nth-child(2) {
        padding-left: 0;
      }

      &:hover {
        color: #2D99FF;
      }

      &.is-active {
        color: #2D99FF;
      }
    }

    .el-tabs__active-bar {
      background-color: #2D99FF;
    }

    &.center {
      .el-tabs__nav {
        transform: translateX(-50%) !important;
        left: 50%;
      }
    }
  }

  //自定义弹窗
  .customMask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;

    .customDialog {
      width: 78%;
      height: 77%;
      background: linear-gradient(135deg, rgba(0, 33, 135, 0.55) 0%, rgba(0, 17, 68, 0.87) 51%, rgba(0, 33, 135, 0.55) 100%), linear-gradient(138deg, rgba(0, 41, 102, 0.5) 0%, rgba(0, 0, 0, 0.42) 100%), linear-gradient(180deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%), linear-gradient(180deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%), linear-gradient(176deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%);
      border-radius: 10px;
      border: 1px solid #2D99FF;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 3.5% 4% 10px;
      &.customDialog1{
        width: 50%;
        height: 50%;
        overflow-y: auto;
      }
      .tit {
        .px2vw(width, 610);
        .px2vh(height, 46);
        background: url("@/assets/images/cockpit/dialogTitBg.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        .px2vh(margin-bottom, 30);
      }

      .customTable {
        background: none;
        max-height: 480px;
        overflow-y:auto ;
        thead {
          tr {
            background: none;
          }

          th {
            background: rgba(26, 90, 160, 0.8);
            box-shadow: 0px 1px 0px 0px rgba(45, 153, 255, 1);
            //box-shadow: 0px 1px 0px 0px rgba(45,153,255,1);
            color: #ffffff;
            border: none;

            &.is-leaf {
              border: none;
            }

            &.el-table-fixed-column--right {
              background: rgba(26, 90, 160, 0.8);
            }

            .px2font(16)
          }
        }

        .el-table__inner-wrapper::before {
          background: none;
        }

        .el-table-fixed-column--right {
          background: none;
        }

        .el-table__row {
          color: #ffffff;
          background: rgba(11, 51, 95, 0);

          &.el-table__row--striped {
            background: rgba(11, 51, 95, 0.55);
          }

          .el-table__cell {
            background: none;
            color: #ffffff;
            border: 0;
            .px2font(16);
          }
        }

        .btn {
          background: linear-gradient(180deg, rgba(2, 197, 209, 0.8) 0%, rgba(45, 153, 255, 0.5) 100%);
          border-radius: 5px;
          border: 1px solid #2D99FF;
          display: inline-block;
          .px2vw(width, 118);
          .px2vh(height, 28);
          .px2font(16);
          justify-content: center;
          display: flex;
          align-items: center;
          line-height: 1.5;

          .icon {
            .px2font(24)
          }
        }
      }

      .el-pagination {
        .px2vh(margin-top, 30);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        button {
          background: none;
          border:1px solid #2D99FF;
          color: #2D99FF;
        }

        .el-pager {
          .number,.more{
            background: none;
            border:1px solid #2D99FF;
            color: #2D99FF;
            &.is-active{
              background: #2657C7;
              border-radius: 2px;
              color:#ffffff;
              border:0;
            }
          }
        }
      }

      .closeIcon {
        position: absolute;
        .px2vw(right, 30);
        .px2vw(top, 30);
        .px2font(28);
        cursor: pointer;
      }
    }
  }
}
.customPopPicker{
  &.el-picker__popper.el-popper{
    border: 0;
  }
  &.el-popper.is-light .el-popper__arrow::before{
    background: #1b71e3;
  }
  .el-picker-panel.el-date-picker{
    background: linear-gradient(135deg, rgba(0, 33, 135, 0.55) 0%, rgba(0, 17, 68, 0.87) 51%, rgba(0, 33, 135, 0.55) 100%), linear-gradient(138deg, rgba(0, 41, 102, 0.5) 0%, rgba(0, 0, 0, 0.42) 100%), linear-gradient(180deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%), linear-gradient(180deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%), linear-gradient(176deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%);
    border: 1px solid #2D99FF;
    border-color: #2D99FF;
  }
  .el-picker-panel__icon-btn .el-icon{
    color:#ffffff;
  }
  .el-date-picker__header-label{
    color:#ffffff;
  }
  .el-year-table td .cell{
    color:#E9E9E9;
  }
  .el-year-table td.today .cell{
    color:#2D99FF;
  }
}
</style>
