<template>
  <div class="main-content">
    <div class="jgg-container">
      <!-- 当日井下巡检情况 -->
      <div class="jgg-item">
        <div class="jgg-item-title">当日井下巡检情况</div>
        <div class="jgg-item-content daily-inspection">
          <div class="daily-inspection-item">
            <span class="daily-inspection-item-icon"></span>
            <span class="daily-inspection-item-content">巡检数量</span>
            <span class="daily-inspection-item-number">{{
              dataAll.dayCheckCount | getListValue("巡检数量")
            }}</span>
          </div>
          <div class="daily-inspection-item">
            <span class="daily-inspection-item-icon icon2"></span>
            <span class="daily-inspection-item-content">故障数量</span>
            <span class="daily-inspection-item-number">{{
              dataAll.dayCheckCount | getListValue("故障数量")
            }}</span>
          </div>
          <div class="daily-inspection-item">
            <span class="daily-inspection-item-icon icon3"></span>
            <span class="daily-inspection-item-content">未维修数量</span>
            <span class="daily-inspection-item-number">{{
              dataAll.dayCheckCount | getListValue("未维修数量")
            }}</span>
          </div>
          <div class="daily-inspection-item">
            <span class="daily-inspection-item-icon icon3"></span>
            <span class="daily-inspection-item-content">已维修数量</span>
            <span class="daily-inspection-item-number">{{
              dataAll.dayCheckCount | getListValue("已维修数量")
            }}</span>
          </div>
        </div>
        <div class="divider-line"></div>
      </div>
      <!-- 当月电力能耗情况 -->
      <div class="jgg-item">
        <div class="jgg-item-title">当月电力能耗情况</div>
        <div class="jgg-item-content monthly-power-content">
          <div id="monthlyPower" class="monthly-power-chart"></div>
          <div class="monthly-power-legend">
            <ul>
              <li v-for="item in monthlyPowerData" :key="item.name">
                <span
                  class="legend-color"
                  :style="{ backgroundColor: item.itemStyle.color }"
                ></span>
                <span>{{ item.name }}</span>
                <span class="" :style="{ color: item.itemStyle.color }"
                  >{{ item.value }}KWh</span
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 近30天提升次数变化趋势图 -->
      <div class="jgg-item">
        <div class="jgg-item-title">近30天提升次数变化趋势图</div>
        <div class="jgg-item-content">
          <div id="monthlyTisheng" style="height: 100%; width: 100%"></div>
        </div>
      </div>
      <!-- 当月巡检情况分析 -->
      <div class="jgg-item">
        <div class="jgg-item-title">当月巡检情况分析</div>
        <div class="jgg-item-content">
          <div class="monthly-inspection">
            <div class="monthly-inspection-top">
              <div class="inspection-item">
                <div class="inspection-item-content">
                  <div class="inspection-item-number">
                    {{ dataAll.monthCheckCount | getListValue("巡检数量") }}
                  </div>
                  <p class="inspection-item-title">巡检数量</p>
                </div>
              </div>
              <div class="inspection-item">
                <div class="inspection-item-content">
                  <div class="inspection-item-number bg2">
                    {{ dataAll.monthCheckCount | getListValue("故障数量") }}
                  </div>
                  <p class="inspection-item-title co2">故障数量</p>
                </div>
              </div>
              <div class="inspection-item">
                <div class="inspection-item-content">
                  <div class="inspection-item-number bg3">
                    {{ dataAll.monthCheckCount | getListValue("未维修数量") }}
                  </div>
                  <p class="inspection-item-title co3">未维修数量</p>
                </div>
              </div>
            </div>
            <div class="monthly-inspection-bottom">
              <div class="monthly-inspection-bottom-item">
                <p>
                  <i></i><span>报修率</span>
                  <span
                    >{{
                      dataAll.monthCheckCount | getListValue("报修率")
                    }}%</span
                  >
                </p>
              </div>
              <div class="monthly-inspection-bottom-item">
                <p>
                  <i style="background: #f6890c"></i><span>维修率</span>
                  <span class="coyel"
                    >{{
                      dataAll.monthCheckCount | getListValue("维修率")
                    }}%</span
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="divider-line one"></div>
        <div class="divider-line two"></div>
      </div>
      <!-- 当年电力能耗数据分析 -->
      <div class="jgg-item">
        <div class="jgg-item-title">当年电力能耗数据分析</div>
        <div class="jgg-item-content year-power-content">
          <div
            id="yearPower"
            class="year-power-chart"
            style="height: 100%; width: 100%"
          ></div>
        </div>
      </div>
      <!-- 近7天各班次提升次数统计 -->
      <div class="jgg-item">
        <div class="jgg-item-title">近7天各班次提升次数统计</div>
        <div class="jgg-item-content shift-lift-content">
          <div id="shiftLift" style="height: 100%; width: 100%"></div>
        </div>
      </div>
      <!-- 近一年巡检次数分析 -->
      <div class="jgg-item">
        <div class="jgg-item-title">近一年巡检次数分析</div>
        <div class="jgg-item-content year-inspection-content">
          <div
            id="yearInspection"
            class="year-inspection-chart"
            style="height: 100%; width: 100%"
          ></div>
        </div>
      </div>
      <!-- 各部门月巡检排行榜 -->
      <div class="jgg-item">
        <div class="jgg-item-title">各部门月巡检排行榜</div>
        <div class="jgg-item-content department-rank-content">
          <vue-seamless-scroll
            :data="departmentRankData"
            class="warp_ranking"
            :class-option="classOption"
          >
            <ul>
              <li
                v-for="(item, index) in departmentRankData"
                :key="index"
                class="custom-item custom-item2"
              >
                <span class="custom-item-content custom-item-content2">{{
                  index + 1
                }}</span>
                <span class="custom-item-content custom-item-content2">{{
                  item.name
                }}</span>
                <div
                  class="custom-item-content custom-item-content2 progressbar"
                >
                  <div
                    class="progress"
                    :style="{ width: progressWidth(item.value) }"
                  ></div>
                </div>
                <span class="custom-item-content custom-item-content2">{{
                  item.value
                }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <!-- 近一周设备维修信息 -->
      <div class="jgg-item">
        <div class="jgg-item-title">近一周设备维修信息</div>
        <div class="jgg-item-content weekly-repair-content">
          <div class="custom-header">
            <span class="custom-header-item">设备名称</span>
            <span class="custom-header-item">维修状态</span>
            <span class="custom-header-item">维修人</span>
            <span class="custom-header-item">维修日期</span>
          </div>
          <vue-seamless-scroll
            :data="weeklyRepairData"
            class="warp"
            :class-option="classOption"
          >
            <ul>
              <li
                v-for="(item, index) in weeklyRepairData"
                :key="index"
                class="custom-item custom-item1"
              >
                <span
                  class="custom-item-content custom-item-content1"
                  v-text="item.deviceName"
                ></span>
                <span
                  class="custom-item-content custom-item-content1"
                  v-text="item.maintainState"
                ></span>
                <span
                  class="custom-item-content custom-item-content1"
                  v-text="item.maintainUserName"
                ></span>
                <span
                  class="custom-item-content custom-item-content1"
                  v-text="item.maintainDate"
                ></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);
import { getTjfxList } from "@/api/tyler/tjfx";
export default {
  name: "tjfx",
  data() {
    return {
      dataAll: {},
      monthlyPowerData: [
        { value: 555551, name: "采区", itemStyle: { color: "#3BAFF2" } },
        { value: 555551, name: "选厂", itemStyle: { color: "#0EFCFF" } },
        { value: 555551, name: "冶炼", itemStyle: { color: "#0EFF96" } },
        { value: 555551, name: "尾矿库", itemStyle: { color: "#FFDA0B" } },
        { value: 555551, name: "排水", itemStyle: { color: "#FF720B" } },
        { value: 555551, name: "提升机", itemStyle: { color: "#FF720B" } },
        { value: 555551, name: "通风", itemStyle: { color: "#FF5E71" } },
      ],
      monthlyTishengData: [
        { value: 5, name: "1/01" },
        { value: 0, name: "1/06" },
        { value: 5, name: "1/11" },
      ],
      monthlyInspectionData: [],
      yearPowerData: [
        { value: 5, name: "采区" },
        { value: 0, name: "选厂" },
        { value: 5, name: "冶炼" },
        { value: 0, name: "尾矿库" },
        { value: 9, name: "排水" },
        { value: 9, name: "提升机" },
        { value: 11, name: "通风" },
      ],
      shiftLiftData: [
        { value: 10, name: "早班" },
        { value: 20, name: "中班" },
        { value: 30, name: "晚班" },
      ],
      yearInspectionData: [
        { value: 10, name: "1月" },
        { value: 20, name: "2月" },
        { value: 30, name: "3月" },
        { value: 40, name: "4月" },
        { value: 50, name: "5月" },
        { value: 60, name: "6月" },
        { value: 70, name: "7月" },
        { value: 80, name: "8月" },
        { value: 70, name: "9月" },
        { value: 70, name: "10月" },
        { value: 70, name: "11月" },
        { value: 70, name: "12月" },
      ],
      departmentRankData: [
        { name: "采区", value: 100 },
        { name: "选厂", value: 90 },
        { name: "冶炼", value: 80 },
        { name: "尾矿库", value: 70 },
        { name: "排水", value: 60 },
        { name: "提升机", value: 50 },
        { name: "通风", value: 40 },
      ],
      classOption: {
        singleHeight: 47,
        hoverStop: true,
        autoPlay: true,
      },
      weeklyRepairData: [],
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      getTjfxList().then((response) => {
        this.dataAll = response.data;
        this.yearInspectionData = response.data.yearCheckCount.map((item) => {
          const [year, month] = item.name.split("-");
          return {
            ...item,
            name: `${year.slice(2)}/${month}`, // 正确格式化为 "24/08"
          };
        });

        this.monthlyPowerData = response.data.monthPowerCount.map((item) => {
          const areaMap = {
            采区能耗: "采区",
            选厂能耗: "选厂",
            冶炼能耗: "冶炼",
            尾矿库能耗: "尾矿库",
            排水能耗: "排水",
            提升机能耗: "提升机",
            通风能耗: "通风",
          };
          return {
            value: parseInt(item.num),
            name: areaMap[item.areaname] || item.areaname,
            itemStyle: {
              color: this.getAreaColor(areaMap[item.areaname] || item.areaname),
            },
          };
        });
        this.shiftLiftData = response.data.weekTrend;
        this.yearPowerData = response.data.yearPowerCount;
        this.monthlyTishengData = response.data.monthTrend.map((item) => {
          const [year, month, day] = item.name.split("-");
          return {
            ...item,
            name: `${day}/${month}`, // 修改为 "02/07" 格式
          };
        });
        this.departmentRankData = response.data.deptMonthCheckCount;
        this.weeklyRepairData = response.data.weekDeviceMaintenance;
        this.monthlyPowerChart();
        this.monthlyTishengChart();
        this.yearPowerChart();
        this.shiftLiftChart();
        this.yearInspectionChart();
      });
    },
    // 获取区域对应颜色
    getAreaColor(areaName) {
      const colorMap = {
        采区: "#3BAFF2",
        选厂: "#0EFCFF",
        冶炼: "#0EFF96",
        尾矿库: "#FFDA0B",
        排水: "#FF720B",
        提升机: "#FF720B",
        通风: "#FF5E71",
      };
      return colorMap[areaName] || "#3BAFF2";
    },
    departmentRank() {},
    //控制进度条宽度
    progressWidth(frequency) {
      //最大值从recentSevDaysAlarmsData中获取，且保证位数为0
      const maxFrequencyData = this.departmentRankData.reduce(
        (max, item) => Math.max(max, Math.ceil(item.value / 10) * 10),
        0
      );
      const width = (frequency / maxFrequencyData) * 100 + "%";
      return width;
    },
    //近一年巡检次数分析chart
    yearInspectionChart() {
      let myChart = echarts.init(document.getElementById("yearInspection"));
      let xAxisData = this.yearInspectionData.map((item) => item.name);
      let yAxisData = this.yearInspectionData.map((item) => item.value);
      let option = {
        title: {
          text: "",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "5%",
          right: "3%",
          left: "8%",
          bottom: "12%",
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              show: true,
              margin: 10,
              color: "#fff",
              textStyle: {
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              show: true,
              formatter: "{value}",
              color: "#B7CCDA",
              textStyle: {
                fontSize: 14,
              },
            },
            axisTick: {
              //y轴刻度线
              show: true,
              color: "#e2e9ff",
            },
            axisLine: {
              show: true,
              color: "#e2e9ff",
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxisData,
            barWidth: "16px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#37BBFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1C3454", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                // barBorderRadius: [30, 30, 8, 8],
                // shadowColor: 'rgba(0,160,221,1)',
                // shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: false,
                lineHeight: 20,
                width: 10,
                height: 20,
                backgroundColor: "rgba(0,160,221,0.1)",
                // borderRadius: 200,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);
    },
    //近7日提升次数统计chart
    shiftLiftChart() {
      let option = {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
          backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
          // spacingTop: -200, // 增加顶部间距
        },
        legend: {
          enabled: true,
          align: "right",
          verticalAlign: "middle", // 保持垂直居中
          layout: "vertical",
          y: 0, // 移除y偏移
          x: -100, // 向左移动10px
          itemMarginTop: 5, // 减小图例项间距
          itemMarginBottom: 5,
          itemStyle: {
            color: "#fff",
            fontSize: "12px", // 缩小字体
          },
          labelFormatter: function () {
            return `${this.name}: ${this.y}`; // 在图例中显示数据
          },
        },
        title: {
          text: "", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },
        plotOptions: {
          pie: {
            size: "100%",
            allowPointSelect: false,
            cursor: "pointer",
            innerSize: "65%",
            showInLegend: true,
            center: ["45%", "44%"],
            depth: 15,
            dataLabels: {
              enabled: true,
              format: "{point.y}次",
              style: {
                fontSize: "12px",
                textOutline: "none",
                // 修改为使用回调函数获取颜色
                color: null, // 这里设置为null，在formatter中处理颜色
              },
              distance: 20,
              // 添加formatter函数动态设置颜色
              formatter: function () {
                return `<span style="color:${this.point.color}">${this.point.y}次</span>`;
              },
            },
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            type: "pie",
            name: "设备统计",
            showInLegend: true,
            data: [
              {
                name: "早班",
                y: this.shiftLiftData[0].value,
                color: "rgba(55, 184, 251, 1)",
              }, // 高数据部分
              {
                name: "中班",
                y: this.shiftLiftData[1].value,
                color: "rgba(255, 188, 28, 1)",
              }, // 低数据部分
              {
                name: "晚班",
                y: this.shiftLiftData[2].value,
                color: "rgba(9, 236, 185, 1)",
              },
            ],
            startAngle: 0, //起始角度,
            label: {
              show: false,
              position: "outside",
              formatter: "{b}：{d}%",
              normal: {
                show: false,
                fontSize: 40,
                formatter: ["  {a|{b}：{d}%}"].join("\n"),
                rich: {
                  a: {
                    left: 20,
                    padding: [0, -140, 0, -180],
                  },
                },
              },
            },
          },
        ],
      };

      Highcharts.chart("shiftLift", option);
    },
    //当年电力能耗数据分析chart
    yearPowerChart() {
      let myChart = echarts.init(document.getElementById("yearPower"));
      let xAxisData = this.yearPowerData.map((item) => item.name);
      let yAxisData = this.yearPowerData.map((item) => item.value);
      let option = {
        title: {
          text: "",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "5%",
          right: "3%",
          left: "12%",
          bottom: "12%",
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              show: true,
              margin: 10,
              color: "#fff",
              textStyle: {
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              show: true,
              formatter: "{value}",
              color: "#B7CCDA",
              textStyle: {
                fontSize: 14,
              },
            },
            axisTick: {
              //y轴刻度线
              show: true,
              color: "#e2e9ff",
            },
            axisLine: {
              show: true,
              color: "#e2e9ff",
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxisData,
            barWidth: "16px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#37BBFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1C3454", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                // barBorderRadius: [30, 30, 8, 8],
                // shadowColor: 'rgba(0,160,221,1)',
                // shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: false,
                lineHeight: 20,
                width: 10,
                height: 20,
                backgroundColor: "rgba(0,160,221,0.1)",
                // borderRadius: 200,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);
    },
    //当月电力能耗情况chart
    monthlyPowerChart() {
      let myChart = echarts.init(document.getElementById("monthlyPower"));
      //最大值处理
      let maxValue = this.monthlyPowerData.reduce((max, item) => {
        return item.value > max ? item.value : max;
      }, 0);
      this.monthlyPowerData.sort((a, b) => a.value - b.value);

      let option = {
        polar: {
          radius: [30, "90%"],
        },
        angleAxis: {
          max: maxValue,
          startAngle: 90,
          show: false, // 显示坐标轴
        },
        radiusAxis: {
          type: "category",
          data: this.monthlyPowerData.map((item) => item.name),
          axisLine: {
            show: false, // 显示径向轴
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            show: false, // 显示分类标签
            color: "#fff",
          },
        },
        series: [
          // 数值条（实际颜色）
          {
            type: "bar",
            coordinateSystem: "polar",
            stack: "a",
            data: this.monthlyPowerData.map((d) => d.value),
            itemStyle: {
              color: (params) =>
                this.monthlyPowerData[params.dataIndex].itemStyle.color,
            },
          },
          // 背景条（灰色填充）
          {
            type: "bar",
            coordinateSystem: "polar",
            stack: "a",
            data: this.monthlyPowerData.map(() => maxValue), // 每个项总长度10
            itemStyle: {
              color: "RGBA(28, 57, 92, 0.3)",
            },
          },
        ],
      };
      // 图表自适应
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);
    },
    //近30天提升次数变化趋势
    monthlyTishengChart() {
      let myChart = echarts.init(document.getElementById("monthlyTisheng"));
      let option = {
        grid: {
          left: "3%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          //显示日期和人数
          formatter: function (params) {
            let date = params[0].name; // 日期
            let value = params[0].value; // 人数
            return `${date}<br/>次数: ${value}`;
          },
        },
        xAxis: {
          type: "category",
          data: this.monthlyTishengData.map((item) => item.name), // 假设日期是字符串类型
          axisTick: {
            show: false,
          },
          //隔5个显示
          axisLabel: {
            interval: 5,
            color: "#fff",
            fontSize: 12,
          },
        },
        yAxis: {
          type: "value",
          //虚线，取整
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            data: this.monthlyTishengData.map((item) => item.value), // 假设值是数字类型,
            type: "line",
            stack: "Total",

            //线条颜色
            itemStyle: {
              color: "#37BBFF",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 184, 251,0.5)",
                },
                {
                  offset: 1,
                  color: "rgb(55, 184, 251,0.1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);
    },
  },
  filters: {
    getListValue(list, e) {
      if (list && list.length > 0) {
        let obj = list.find((item) => item.name == e);
        if (obj.count != null) {
          return obj.count;
        } else {
          return "--";
        }
      }
    },
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
};
</script>

<style scoped lang="scss">
.main-content {
  background: url("~@/assets/images/screen/bg12.png") no-repeat center;
  padding-top: 110px;
  pointer-events: auto;
  position: relative;

  .jgg-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    column-gap: 40px;
    width: 100%;
    height: 100%;
    padding: 50px;

    .jgg-item {
      border-radius: 4px;
      color: #fff;
      font-size: 24px;
      position: relative;
      // 确保每个网格项不会超出
      min-height: 0; // 关键修复项
      overflow: hidden; // 防止内容溢出

      .jgg-item-title {
        font-size: 22px;
        background: url("~@/assets/images/screen/tjfx/title.png") no-repeat
          center;
        height: 40px;
        padding-left: 25px;
        background-position-y: 12px;
        background-size: 100%;
        font-weight: bold;
        font-family: "fangsong";
      }
      .jgg-item-content {
        background: url("~@/assets/images/screen/tjfx/bg.png") no-repeat center;
        height: calc(100% - 40px);
        width: 100%;
        background-size: 100% 100%;
        &.daily-inspection {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 0px;
          column-gap: 0px;
          .daily-inspection-item {
            display: flex;
            justify-content: center;
            align-items: center;
            .daily-inspection-item-icon {
              width: 55px;
              height: 55px;
              border-radius: 50%;
              display: inline-block;
              background: url("~@/assets/images/screen/tjfx/icon4.png")
                no-repeat center;
              background-size: 100%;
              &.icon2 {
                background: url("~@/assets/images/screen/tjfx/icon5.png")
                  no-repeat center;
                background-size: 100%;
              }
              &.icon3 {
                background: url("~@/assets/images/screen/tjfx/icon6.png")
                  no-repeat center;
                background-size: 100%;
              }
            }
            .daily-inspection-item-content {
              font-size: 18px;
              font-weight: 400;
              font-size: 18px;
              color: #64c2ff;
              font-family: "fangsong";
              margin: 0 10px;
            }
            .daily-inspection-item-number {
              font-weight: 400;
              font-size: 28px;
              color: #ffffff;
              background: linear-gradient(
                0deg,
                #3cbffa 0%,
                #ffffff 56.005859375%,
                #e2f6ff 100%
              );
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
        .monthly-inspection {
          display: grid;
          grid-template-rows: 3fr 1fr; // 使用fr单位确保比例分配
          height: 100%; // 确保高度不超出父容器
          overflow: hidden;
          .monthly-inspection-top {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row: span 3; // 占据前4行
            min-height: 0; // 添加这个属性防止内容撑开
            overflow: hidden; // 防止内容溢出

            .inspection-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .inspection-item-content {
                text-align: center;
                .inspection-item-number {
                  width: 112px;
                  height: 112px;
                  background: url("~@/assets/images/screen/tjfx/icon1.png")
                    no-repeat center;
                  line-height: 112px;
                  font-weight: 400;
                  font-size: 26px;
                  color: #ffffff;
                  &.bg2 {
                    background: url("~@/assets/images/screen/tjfx/icon2.png")
                      no-repeat center;
                  }
                  &.bg3 {
                    background: url("~@/assets/images/screen/tjfx/icon3.png")
                      no-repeat center;
                  }
                }
                .inspection-item-title {
                  font-weight: 400;
                  font-size: 17px;
                  color: #14c8f5;
                  &.co2 {
                    color: #ffd71f;
                  }
                  &.co3 {
                    color: #00f9d9;
                  }
                }
              }
            }
          }
          .monthly-inspection-bottom {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-row: span 1; // 占据最后1行
            min-height: 0; // 添加这个属性防止内容撑开
            padding-bottom: 20px;
            overflow: hidden; // 防止内容溢出
            .monthly-inspection-bottom-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              p {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200px;
                height: 30px;
                border-radius: 15px;
                background: rgba(255, 255, 255, 0.1);
                margin: 0px;

                i {
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background: #00f3e5;
                  margin-right: 8px;
                }
                span:nth-child(2) {
                  font-size: 18px;
                  color: #fff;
                }
                span:nth-child(3) {
                  font-size: 18px;
                  color: #00f3e5;
                  margin-left: 20px;
                }
                .coyel {
                  color: #f6890c !important;
                }
              }
            }
          }
        }
      }
      .monthly-power-content {
        display: flex;
        align-items: center;
        justify-content: center;
        .monthly-power-chart {
          width: 40%;
          height: 80%;
        }
        .monthly-power-legend {
          ul {
            list-style-type: none; // 新增该属性去除默认点状样式
            display: flex;
            flex-direction: column;
            gap: 10px; // 确保垂直间距生效
            padding-left: 0; // 移除默认padding
            margin: 0px;
            li {
              width: 280px;
              height: 22px;
              background: #173253;
              border-radius: 14px;
              padding-left: 30px;
              line-height: 22px;
              font-size: 18px;
              font-family: "fangsong";
              .legend-color {
                display: inline-block;
                width: 15px;
                height: 8px;
                margin-right: 20px;
                margin-bottom: 2px;
              }
              span:nth-child(2) {
                // 选择第二个span
                color: #fff; // 示例样式
                display: inline-block;
                width: 70px;
                margin-right: 18px;
                line-height: 22px;
              }
            }
          }
        }
      }

      .department-rank-content {
        padding-top: 5px;

        .warp_ranking {
          height: 100%;
          width: 100%;
          margin: 0 auto;
          overflow: hidden;
          ul {
            list-style: none;
            padding-left: 10px;
            margin: 10px auto 0;
            width: 100%;
            li {
              &.custom-item {
                width: calc(100% - 10px);
                display: grid;
                grid-template-columns: 0.5fr 1fr 3fr 0.5fr;
                text-align: center;
                margin-bottom: 5px;
                height: 36px;
                font-size: 16px;
                color: #bbd7ea;
                position: relative;
                background-color: rgba(61, 98, 147, 0.2);
                span {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
              &.custom-item2 {
                display: grid;
                grid-template-columns: 0.2fr 1fr 3fr 0.5fr;
                text-align: center;
                line-height: 36px;
                .progressbar {
                  display: block;
                  width: 100%;
                  height: 8px;
                  margin: auto 0; // 添加垂直居中
                  background-color: RGBA(29, 47, 71, 1);
                  .progress {
                    height: 100%;
                    background: linear-gradient(
                      270deg,
                      #37bbff 0%,
                      #1c3454 100%
                    );
                  }
                }
              }
              span:nth-child(1),
              span:nth-child(4) {
                color: rgba(55, 187, 255, 1);
              }
            }
            /**选中前三个li */
            li:nth-child(-n + 3) {
              .progressbar {
                .progress {
                  background: linear-gradient(
                    270deg,
                    #ffbe23 0%,
                    rgba(255, 190, 35, 0.05) 100%
                  );
                }
              }
              /**选中第一个和第二个span */
              span:nth-child(1),
              span:nth-child(4) {
                color: #ffbe23;
              }
            }
          }
        }
      }
      .weekly-repair-content {
        .custom-header {
          width: 95%;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 3fr 1fr 1fr 2fr;
          text-align: center;
          color: #2ed5ff;
          margin-bottom: 10px;
          font-weight: bold;
          font-size: 18px;
        }
        .custom-item {
          width: 95%;
          display: grid;
          grid-template-columns: 3fr 1fr 1fr 2fr;
          text-align: center;
        }
        .custom-header-item {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .warp {
          height: 100%;
          width: 95%;
          margin: 0 auto;
          overflow: hidden;
          ul {
            list-style: none;
            padding: 0;
            margin: 10px auto 0;
            width: 100%;
            li.custom-item {
              width: 100%;
              display: grid;
              grid-template-columns: 3fr 1fr 1fr 2fr;
              text-align: center;

              margin-bottom: 5px;
              height: 36px;
              font-size: 16px;
              color: #bbd7ea;
              position: relative;
              background-color: rgba(61, 98, 147, 0.2);
              span {
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
            li.custom-item2 {
              display: grid;
              grid-template-columns: 1fr 1fr 3fr 2fr;
              text-align: center;
            }
          }
        }
      }
      .divider-line {
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translateY(-50%);
        height: 130px;
        width: 1px;
        background: repeating-linear-gradient(
          to bottom,
          transparent,
          transparent 4px,
          rgba(255, 255, 255, 0.5) 5px,
          rgba(255, 255, 255, 0.5) 10px
        );
        &.one {
          left: 32%;
          height: 120px;
          top: 45%;
        }
        &.two {
          top: 45%;

          left: 66%;
          height: 120px;
        }
      }
    }
  }
}
// 新增强制穿透样式
::v-deep .cesium-widget canvas {
  pointer-events: auto !important;
  position: relative;
  z-index: 0;
}

// 移除Cesium默认事件拦截
::v-deep .cesium-widget-credits {
  display: none !important;
}
</style>
