<template>
  <div class="Screen cm-layout">
    <div class="a_0">
      <div id="container"></div>
      <div class="a0_">
        <header id="header">
          <div class="b1_bg">
            <h2>威海高新区科技企业孵化信息平台</h2>
          </div>
          <div v-if="isTechUser" class="go-back" @click="goOverview">
            <a>总览</a>
          </div>
          <div
            v-if="isTechUser"
            class="go-back"
            style="right: 0.1rem; left: auto"
            @click="goBackendHome"
          >
            <a>进入后台</a>
          </div>
        </header>
      </div>
      <div class="map-mask"></div>
    </div>
    <div class="b_0" v-show="showSreen">
      <section class="b0_" id="b0_">
        <div class="b0_a" :class="{ active: navActive === 0 }">
          <div class="side b0_left" :class="{ show: view0.show }">
            <div class="a-md31" id="amd31">
              <div class="abs-full">
                <div class="m-tt">
                  <h4>孵化数据总览</h4>
                </div>
                <div class="ct-box">
                  <div class="wrap">
                    <ul>
                      <li
                        v-for="(item, i) in sjzlList"
                        :class="{
                          specialBefore: item.unit && item.name.length > 5,
                        }"
                      >
                        <font
                          >{{ item.num }}<span>{{ item.unit }}</span></font
                        >
                        <h6>{{ item.name }}</h6>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="a-md32" id="amd32">
              <div class="abs-full">
                <div class="m-tt">
                  <h4>在孵企业今年总收入排行榜</h4>
                </div>
                <div class="ct-box">
                  <div v-show="emptyFlag4srph" class="emptyText">无数据</div>
                  <div v-show="!emptyFlag4srph" class="wrap srphWrapper"></div>
                </div>
              </div>
            </div>
            <div class="a-md33" id="amd33">
              <div class="abs-full">
                <div class="m-tt">
                  <h4>在孵企业年度上缴税费变化趋势</h4>
                </div>
                <div class="ct-box">
                  <div v-show="emptyFlag4zfqyndsjsfbhqs" class="emptyText">
                    无数据
                  </div>
                  <div
                    v-show="!emptyFlag4zfqyndsjsfbhqs"
                    class="wrap zfqyndsjsfbhqsWrapper"
                  ></div>
                  <!-- <div v-show="emptyFlag4zfqyndsjsfbhqs1" class="emptyText"> 无数据</div>
					<div class="wrap zfqyndsjsfbhqsWrapper"></div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="side b0_right" :class="{ show: view0.show }">
            <div class="a-md34" id="amd34">
              <div class="abs-full">
                <div class="m-tt">
                  <h4>企业创新创业数据分析</h4>
                </div>
                <div class="ct-box">
                  <div class="wrap qycxcysjfxWrapper"></div>
                </div>
              </div>
            </div>
            <div class="a-md35" id="amd35">
              <div class="abs-full">
                <div class="m-tt">
                  <h4>毕业企业今年总收入排行榜</h4>
                </div>
                <div class="ct-box">
                  <div v-show="emptyFlag4byqyjnzsrphb" class="emptyText">
                    无数据
                  </div>
                  <div
                    v-show="!emptyFlag4byqyjnzsrphb"
                    class="wrap byqyjnzsrphbWrapper"
                  ></div>
                </div>
              </div>
            </div>

            <div class="a-md36" id="amd36">
              <div class="abs-full">
                <div class="m-tt">
                  <h4>毕业企业年度上缴税费变化趋势</h4>
                </div>
                <div class="ct-box">
                  <div v-show="emptyFlag4byqyndsjsfbhqs" class="emptyText">
                    无数据
                  </div>
                  <div
                    v-show="!emptyFlag4byqyndsjsfbhqs"
                    class="wrap byqyndsjsfbhqsWrapper"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
// 导入Cesium模块和样式
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";

import { Highchart } from "@/assets/js/chartTemplates.js";
import request from "@/utils/request";
import { Tools } from "@/assets/js/common.js";

let resizeTimeout;
window.addEventListener("resize", function () {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function () {
    // 执行响应逻辑
  }, 200); // 200毫秒后执行
});

function getPxByRem(remValue) {
  const htmlElement = document.documentElement;
  const fontSize = parseFloat(getComputedStyle(htmlElement).fontSize);
  let pxValue = remValue * fontSize;
  return pxValue;
}

export default {
  data() {
    return {
      isTechUser: false,
      // 图表数据为空情况
      emptyFlag4byqyjnzsrphb: false,
      emptyFlag4srph: false,
      emptyFlag4zfqyndsjsfbhqs: false,
      emptyFlag4byqyndsjsfbhqs: false,
      showSreen: false,
      viewer: null, // Cesium viewer实例
      infoWindow: null,
      navActive: null,
      sjzlList: [],
      srphList: [],
      view0: {
        md1: [], // 数据总览
        md3: [], // 产品
      },
      incubatorId: "",
    };
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      /**
       * 1、Cesium地图渲染
       * 1-1、地图坐标点定位回显，marker事件添加
       * 2、接口数据获取
       * 3、图表渲染
       * 4、定时刷新接口操作
       * 5、调整窗口大小，重新加载处理
       */
      this.initCesium();
      this.navActive = 0;
    });
  },
  beforeDestroy() {
    // 清理Cesium实例，避免内存泄漏
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    getRoleInfo() {
      // 数据总览
      request({
        url: "auth/info",
        method: "get",
      }).then((res) => {
        if (!res.error && res.user) {
          // 设置全局登录用户类别标记
          localStorage.setItem(
            "groupIdByloginType",
            res.user.jobs.length && res.user.jobs[0]["id"]
          );
          this.isTechUser = Tools.isHighTech();
        } else {
          location = "/login";
        }
      });
    },
    goOverview() {
      // 切换总览数据，接口的全部
      this.incubatorId = "";
      this.getAllApi();
    },
    goBackendHome() {
      location.href = "/home/enterprise";
    },
    // 初始化Cesium地球
    initCesium() {
      var VUE = this;

      // 配置Cesium Ion访问令牌（如果需要）
      // Cesium.Ion.defaultAccessToken = 'your-access-token';

      // 创建Cesium Viewer实例
      VUE.viewer = new Cesium.Viewer("cesiumContainer", {
        // 隐藏默认控件
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,

        // 设置地形（可选）
        terrainProvider: Cesium.createWorldTerrain({
          requestWaterMask: true,
          requestVertexNormals: true,
        }),

        // 设置影像图层
        imageryProvider: new Cesium.BingMapsImageryProvider({
          url: "https://dev.virtualearth.net",
          key: "AmK2Bw1wJMU5Q1ZQxSjGxJ6U5xSjGxJ6U5xSjGxJ6U5xSjGxJ6U5xSjGx", // 示例key，需要替换为有效的Bing Maps key
          mapStyle: Cesium.BingMapsStyle.AERIAL,
        }),

        // 性能优化
        orderIndependentTranslucency: true,
        contextOptions: {
          webgl: {
            alpha: true,
            depth: true,
            stencil: true,
            antialias: true,
            premultipliedAlpha: true,
          },
        },
      });

      // 隐藏版权信息
      VUE.viewer._cesiumWidget._creditContainer.style.display = "none";

      // 定位到威海高新区（使用WGS84坐标）
      // 威海高新区大致坐标：经度122.1161，纬度37.5102
      VUE.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(122.1161, 37.5102, 10000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-45),
          roll: 0.0,
        },
        duration: 3, // 飞行持续时间，单位秒
      });

      console.log(VUE.viewer, "Cesium viewer initialized");

      // 获取孵化器标记
      this.getIncubatorMarkers();
    },
    showInfoWindow(markerId, item) {
      // 创建自定义信息窗口
      const content = `<div class="popupBgImage" style="background: rgba(0, 20, 40, 0.8); border: 1px solid #00f0ff; border-radius: 4px; padding: 10px; color: white; width: 280px;">
                        <h4 style="margin-top: 0; color: #00f0ff; cursor: pointer; display: flex; justify-content: space-between;">
                          详细信息
                          <i id="closeInfoWindowBtn" style="cursor:pointer;">×</i>
                        </h4>
                        <dl style="margin: 10px 0;">
                          <dd class="textEllipsis" style="margin: 5px 0;"><font style="color: #00f0ff;">孵化器名称：</font><span>${
                            item.incubatorName
                          }</span></dd>
                          <dd class="textEllipsis" style="margin: 5px 0;"><font style="color: #00f0ff;">运营机构：</font><span>${
                            item.operatingAgency
                          }</span></dd>
                          <dd class="textEllipsis" style="margin: 5px 0;"><font style="color: #00f0ff;">在孵企业：</font><span>${
                            item.incubatorCount || 0
                          }家</span></dd>
                          <dd class="textEllipsis" style="margin: 5px 0;"><font style="color: #00f0ff;">毕业企业：</font><span>${
                            item.graduationCount || 0
                          }家</span></dd>
                          <dd style="margin: 5px 0;"><font style="color: #00f0ff;">使用总面积：</font><span>${
                            item.totalArea || 0
                          }(㎡)</span></dd>
                          <dd style="margin: 5px 0;"><font style="color: #00f0ff;">总收入：</font><span>${
                            item.totalIncome || 0
                          }万元</span></dd>
                        </dl>
                        <button type="button" id="goMoreBtn" data-id="${
                          item.id
                        }" style="background: #00f0ff; color: #001428; border: none; padding: 5px 15px; cursor: pointer;">
                          ${this.isTechUser ? "更多" : "进入后台"}
                        </button>
                      </div>`;

      // 查找是否已存在信息窗口元素，如果有则移除
      let existingInfoWindow = document.getElementById("cesiumInfoWindow");
      if (existingInfoWindow) {
        existingInfoWindow.remove();
      }

      // 创建新的信息窗口元素
      let infoWindowElement = document.createElement("div");
      infoWindowElement.id = "cesiumInfoWindow";
      infoWindowElement.innerHTML = content;
      infoWindowElement.style.position = "absolute";
      infoWindowElement.style.zIndex = "100";
      infoWindowElement.style.pointerEvents = "auto";

      // 添加到地图容器
      document.getElementById("cesiumContainer").appendChild(infoWindowElement);

      // 获取点击的标记位置，计算信息窗口应该显示的位置
      const markerEntity = this.viewer.entities.getById(markerId);
      if (markerEntity && markerEntity.position) {
        // 计算屏幕坐标
        const canvasPosition = this.viewer.scene.cartesianToCanvasCoordinates(
          markerEntity.position.getValue(this.viewer.clock.currentTime)
        );

        if (canvasPosition) {
          // 设置信息窗口位置
          infoWindowElement.style.left = canvasPosition.x + 20 + "px";
          infoWindowElement.style.top = canvasPosition.y - 10 + "px";
        }
      }

      // 绑定关闭按钮事件
      document.getElementById("closeInfoWindowBtn").onclick = function () {
        infoWindowElement.remove();
      };

      // 绑定更多按钮事件
      document.getElementById("goMoreBtn").onclick = function () {
        if (VUE.isTechUser) {
          location.href = "/home/overview?id=" + this.getAttribute("data-id");
        } else {
          location.href = "/home/enterprise?id=" + this.getAttribute("data-id");
        }
      };
    },
    getAllApi() {
      this.$nextTick(async () => {
        await this.sjzl();
        await this.qycxcysjfx();
        await this.srph();
        await this.byqyjnzsrphb();
        await this.byqyndsjsfbhqs();
        await this.zfqyndsjsfbhqs();
      });
    },
    sjzl() {
      // 孵化数据总览
      request({
        url: "api/homePage/incubatorOverview?size=9",
        method: "get",
        params: {
          incubatorId: this.incubatorId,
        },
      }).then((res) => {
        const tempresult = res.body || [];
        const result = tempresult.map((item) => {
          if (item.name === "孵化器剩余面积") {
            item.unit = "(m²)";
          }
          return item;
        });
        this.sjzlList = result;
      });
    },
    qycxcysjfx() {
      //企业创新创业数据分析
      return new Promise((resolve, reject) => {
        request({
          url: "api/homePage/enterpriseInnovationAnalysis",
          method: "get",
          params: {
            incubatorId: this.incubatorId,
          },
        }).then((res) => {
          const list = res.body || [];
          var colors = [
            "#00f0ff",
            "#f88f41",
            "#0ce2a6",
            "#fdbe17",
            "#ff1fdd",
            "#ff3333",
            "#f8ff3a",
          ];
          var seriesFormat = Highchart.formatSeriesList(list, {
            value: "num",
            colors: colors,
          });
          var seriesData = seriesFormat.seriesData;
          var opts = {
            chartCallback: function (c) {
              if (c.containerWidth < 10) {
                setTimeout(() => {
                  Highchart.template.rich(
                    document.querySelector(".qycxcysjfxWrapper"),
                    list,
                    opts
                  );
                }, 900);
              }
            },
            chartConfig: {
              chart: {
                backgroundColor: "transparent",
              },
              title: {
                floating: true,
                text: "",
                verticalAlign: "middle",
                y: 22,
                floating: true,
                style: {
                  color: "#00f6ff",
                },
              },
              tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
              },
              credits: {
                enabled: false,
              },
              legend: {
                itemStyle: { color: "#fff", textOverflow: "ellipsis" },
                layout: "horizontal",
              },
              plotOptions: {
                pie: {
                  allowPointSelect: true,
                  cursor: "pointer",
                  showInLegend: true,
                  dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                      var screenWidth = window.screen.width;
                      let name = this.point.name;
                      let fontSize = "0.16rem";
                      if (screenWidth > 1600) {
                      } else if (screenWidth > 1440) {
                        fontSize = "0.15rem";
                      } else if (screenWidth > 1280) {
                        name =
                          this.point.name.length > 5
                            ? this.point.name.substring(0, 5)
                            : this.point.name;
                      } else if (screenWidth > 1176) {
                        fontSize = "0.12rem";
                        name =
                          this.point.name.length > 4
                            ? this.point.name.substring(0, 4)
                            : this.point.name;
                      } else if (screenWidth >= 800) {
                        fontSize = "0.12rem";
                        name =
                          this.point.name.length > 2
                            ? this.point.name.substring(0, 2)
                            : this.point.name;
                        return `<span style="color:${
                          this.point.color
                        };display: inline-block;transform: scale(0.8);">${name}: ${this.point.percentage.toFixed(
                          1
                        )}%</span>`;
                      }

                      return `<span style="color:${
                        this.point.color
                      };font-size:${fontSize};">${name}: ${this.point.percentage.toFixed(
                        1
                      )}%</span>`;
                    },
                    style: {
                      fontSize: "0.17rem",
                    },
                  },
                },
              },
              series: [
                {
                  type: "pie",
                  innerSize: "70%",
                  name: "设备数量",
                  data: seriesData,
                },
              ],
            },
            isSeriesData: true,
          };
          Highchart.template.rich(
            document.querySelector(".qycxcysjfxWrapper"),
            list,
            opts
          );
          resolve("ok");
        });
      });
    },
    srph() {
      return new Promise((resolve, reject) => {
        // 在孵企业今年总收入排行榜
        request({
          url: "api/homePage/incubatorIncomeRanking",
          method: "get",
          params: {
            incubatorId: this.incubatorId,
          },
        }).then((res) => {
          this.emptyFlag4srph = res.body.length > 0 ? false : true;
          const listtemp = res.body.slice(0, 7) || [];
          const list = listtemp.map((item, index) => {
            item.name = item.companyName;
            item.value = item.grossIncome;
            return item;
          });
          var colors = [
            "#fbbb2a",
            "#0cb4c3",
            "#4c97ff",
            "#ff8371",
            "#b2e2fe",
            "#427fff",
            "#8dbffa",
          ];
          var chartData = Highchart.formatSeriesList(list, {
            value: "value",
            colors: colors,
          });
          var opts = {
            chartCallback: function (c) {
              if (c.containerWidth < 10) {
                setTimeout(() => {
                  Highchart.template.rich(
                    document.querySelector(".srphWrapper"),
                    list,
                    opts
                  );
                }, 900);
              }
            },
            chartConfig: {
              chart: {
                type: "bar",
                marginTop: getPxByRem(0.15),
                marginBottom: getPxByRem(0.45),
                marginRight: getPxByRem(0.3),
              },
              xAxis: {
                type: "category",
                lineWidth: 1,
                labels: {
                  x: -5,
                  style: {
                    fontSize: "0.14rem",
                  },
                  formatter: function () {
                    return this.value.length > 5
                      ? this.value.substring(0, 7)
                      : this.value;
                  },
                },
              },
              yAxis: {
                min: 0,
                visible: true,
                lineWidth: 1,
                lineColor: "#f7f7f7",
                gridLineWidth: 0,
                labels: {
                  overflow: "justify",
                  style: {
                    fontSize: "0.18rem",
                    color: "#00F0FF",
                  },
                },
              },
              plotOptions: {
                bar: {
                  dataLabels: {
                    enabled: true,
                    allowOverlap: true,
                    style: {
                      fontSize: "0.19rem",
                      fontWeight: "bold",
                    },
                  },
                },
              },
              tooltip: {
                shared: true,
                useHTML: true,
                headerFormat:
                  '<table><tr><th colspan="2">{point.key}</th></tr>',
                pointFormat:
                  '<tr><td class="toolTipHeader" style="color: {series.color};font-size:20px;">{series.name} ' +
                  "</td>" +
                  '<td style="text-align: left"><b>{point.y:.2f}万元</b></td></tr>',
                footerFormat: "</table>",
                valueDecimals: 2,
              },
              series: [
                {
                  name: "",
                  data: chartData.seriesData,
                  dataLabels: {
                    useHTML: true,
                    alignTo: "connectors",
                    enabled: true,
                    color: "#FFFFFF",
                    format:
                      "<div style='font-size: 0.19rem;color:{point.color};color:#fff;'>{point.y:.2f}万</div>",
                  },
                },
              ],
            },
            isSeriesData: true,
          };
          Highchart.template.rich(
            document.querySelector(".srphWrapper"),
            list,
            opts
          );
          resolve("ok");
        });
      });
    },

    byqyjnzsrphb() {
      return new Promise((resolve, reject) => {
        // 毕业企业今年总收入排行榜
        request({
          url: "api/homePage/graduatedIncomeRanking",
          method: "get",
          params: {
            incubatorId: this.incubatorId,
          },
        }).then((res) => {
          this.emptyFlag4byqyjnzsrphb = res.body.length > 0 ? false : true;

          const listtemp = res.body.slice(0, 7) || [];
          const list = listtemp.map((item, index) => {
            item.name = item.companyName;
            item.value = item.grossIncome;
            return item;
          });

          var colors = [
            "#fbbb2a",
            "#0cb4c3",
            "#4c97ff",
            "#ff8371",
            "#b2e2fe",
            "#427fff",
            "#8dbffa",
          ];
          var chartData = Highchart.formatSeriesList(list, {
            value: "value",
            colors: colors,
          });
          var opts = {
            chartCallback: function (c) {
              if (c.containerWidth < 10) {
                setTimeout(() => {
                  Highchart.template.rich(
                    document.querySelector(".byqyjnzsrphbWrapper"),
                    list,
                    opts
                  );
                }, 900);
              }
            },
            chartConfig: {
              chart: {
                type: "bar",
                marginTop: getPxByRem(0.15),
                marginBottom: getPxByRem(0.45),
                marginRight: getPxByRem(0.3),
              },
              xAxis: {
                type: "category",
                lineWidth: 1,
                labels: {
                  x: -5,
                  style: {
                    fontSize: "0.14rem",
                  },
                  formatter: function () {
                    return this.value.length > 5
                      ? this.value.substring(0, 7)
                      : this.value;
                  },
                },
              },
              yAxis: {
                min: 0,
                visible: true,
                lineWidth: 1,
                lineColor: "#f7f7f7",
                gridLineWidth: 0,
                labels: {
                  overflow: "justify",
                  style: {
                    fontSize: "0.18rem",
                    color: "#00F0FF",
                  },
                },
              },
              plotOptions: {
                bar: {
                  dataLabels: {
                    enabled: true,
                    allowOverlap: true,
                    style: {
                      fontSize: "0.19rem",
                      fontWeight: "bold",
                    },
                  },
                },
              },
              tooltip: {
                shared: true,
                useHTML: true,
                headerFormat:
                  '<table><tr><th colspan="2">{point.key}</th></tr>',
                pointFormat:
                  '<tr><td class="toolTipHeader" style="color: {series.color};font-size:20px;">{series.name} ' +
                  "</td>" +
                  '<td style="text-align: left"><b>{point.y:.2f}万元</b></td></tr>',
                footerFormat: "</table>",
                valueDecimals: 2,
              },
              series: [
                {
                  name: "",
                  data: chartData.seriesData,
                  dataLabels: {
                    useHTML: true,
                    alignTo: "connectors",
                    enabled: true,
                    color: "#FFFFFF",
                    format:
                      "<div style='font-size: 0.19rem;color:{point.color}; color:#fff;'>{point.y:.2f}万</div>",
                  },
                },
              ],
            },
            isSeriesData: true,
          };
          Highchart.template.rich(
            document.querySelector(".byqyjnzsrphbWrapper"),
            list,
            opts
          );
          resolve("ok");
        });
      });
    },

    zfqyndsjsfbhqs() {
      return new Promise((resolve, reject) => {
        // 在孵企业年度上缴税费变化趋势
        request({
          url: "api/homePage/incubatorTaxTrend",
          method: "get",
          params: {
            incubatorId: this.incubatorId,
          },
        }).then((res) => {
          this.emptyFlag4zfqyndsjsfbhqs =
            res.body.list.length > 0 ? false : true;

          let list = res.body || [];

          var chartData = Highchart.seriesDataFormat(list, {
            datekey: "date",
            dataReverse: true,
          });
          var categories = chartData.categories;
          var series = chartData.series;
          var opts = {
            chartCallback: function (c) {
              if (c.containerWidth < 10) {
                setTimeout(() => {
                  Highchart.template.rich(
                    document.querySelector(".zfqyndsjsfbhqsWrapper"),
                    list,
                    opts
                  );
                }, 900);
              }
            },
            chartConfig: {
              chart: {
                marginTop: getPxByRem(0.4),
                marginLeft: getPxByRem(0.5),
                marginBottom: getPxByRem(0.45),
                marginRight: getPxByRem(0.2),
              },
              xAxis: {
                lineWidth: 1,
                lineColor: "#2CCBFF",
                type: "category",
                categories: categories,
                labels: {
                  rotation: -20,
                  align: "center",
                  style: {
                    fontSize: "0.17rem",
                  },
                },
              },
              yAxis: {
                lineWidth: 1,
                lineColor: "#2CCBFF",
                gridLineWidth: 0,
                title: {
                  text: "万元",
                  margin: 0,
                  style: {
                    color: "#eee",
                    fontSize: "0.17rem",
                  },
                  rotation: 0,
                  align: "high",
                  y: getPxByRem(-0.15),
                  x: getPxByRem(0.4),
                },
                labels: {
                  style: {
                    fontSize: "0.17rem",
                  },
                },
              },
              plotOptions: {},
              series: [
                {
                  type: "area",
                  keys: ["y", "rotation"],
                  data: series[0].data,
                  color: "#19c4fa",
                  fillColor: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                      [0, "#2aadf3"],
                      [1, "rgba(25,201,255,0)"],
                    ],
                  },
                },
              ],
            },
            isSeriesData: true,
          };
          Highchart.template.rich(
            document.querySelector(".zfqyndsjsfbhqsWrapper"),
            list,
            opts
          );
          resolve("ok");
        });
      });
    },
    byqyndsjsfbhqs() {
      return new Promise((resolve, reject) => {
        //毕业企业年度上缴税费变化趋势
        request({
          url: "api/homePage/graduatedTaxTrend",
          method: "get",
          params: {
            incubatorId: this.incubatorId,
          },
        }).then((res) => {
          this.emptyFlag4byqyndsjsfbhqs =
            res.body.list.length > 0 ? false : true;

          let list = res.body || [];

          var chartData = Highchart.seriesDataFormat(list, {
            datekey: "date",
            dataReverse: true,
          });
          var categories = chartData.categories;
          var series = chartData.series;
          var opts = {
            chartCallback: function (c) {
              if (c.containerWidth < 10) {
                setTimeout(() => {
                  Highchart.template.rich(
                    document.querySelector(".byqyndsjsfbhqsWrapper"),
                    list,
                    opts
                  );
                }, 900);
              }
            },
            chartConfig: {
              chart: {
                marginTop: getPxByRem(0.4),
                marginLeft: getPxByRem(0.5),
                marginBottom: getPxByRem(0.45),
                marginRight: getPxByRem(0.2),
              },
              xAxis: {
                lineWidth: 1,
                lineColor: "#2CCBFF",
                type: "category",
                categories: categories,
                labels: {
                  rotation: -20,
                  align: "center",
                  style: {
                    fontSize: "0.17rem",
                  },
                },
              },
              yAxis: {
                lineWidth: 1,
                lineColor: "#2CCBFF",
                gridLineWidth: 0,
                title: {
                  text: "万元",
                  margin: 0,
                  style: {
                    color: "#eee",
                    fontSize: "0.17rem",
                  },
                  rotation: 0,
                  align: "high",
                  y: getPxByRem(-0.15),
                  x: getPxByRem(0.4),
                },
                labels: {
                  style: {
                    fontSize: "0.17rem",
                  },
                },
              },
              plotOptions: {},
              series: [
                {
                  type: "area",
                  keys: ["y", "rotation"],
                  data: series[0].data,
                  color: "#19c4fa",
                  fillColor: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                      [0, "#2aadf3"],
                      [1, "rgba(25,201,255,0)"],
                    ],
                  },
                },
              ],
            },
            isSeriesData: true,
          };
          Highchart.template.rich(
            document.querySelector(".byqyndsjsfbhqsWrapper"),
            list,
            opts
          );
          resolve("ok");
        });
      });
    },
    getIncubatorMarkers() {
      request({
        url: "api/homePage/incubatorLocation",
        method: "get",
      }).then((res) => {
        let result = res.body || [];

        // 清除现有的实体
        this.viewer.entities.removeAll();

        // 为每个孵化器创建Cesium实体（标记点）
        result.forEach((item, index) => {
          // 创建唯一ID
          const markerId = `incubator_${item.id}`;

          // 创建实体
          const entity = this.viewer.entities.add({
            id: markerId,
            name: item.incubatorName,
            position: Cesium.Cartesian3.fromDegrees(
              parseFloat(item.longitude),
              parseFloat(item.latitude)
            ),
            point: {
              pixelSize: 10,
              color: Cesium.Color.ORANGE,
              outlineColor: Cesium.Color.WHITE,
              outlineWidth: 2,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
            billboard: {
              image: "/static/images/marker-dp.png", // 使用与原AMap相同的标记图片
              width: 22,
              height: 22,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
            // 添加额外数据
            properties: {
              id: item.id,
              incubatorName: item.incubatorName,
              operatingAgency: item.operatingAgency,
              incubatorCount: item.incubatorCount,
              graduationCount: item.graduationCount,
              totalArea: item.totalArea,
              totalIncome: item.totalIncome,
            },
          });

          // 添加点击事件处理
          entity.description = new Cesium.CallbackProperty(() => {
            return "";
          }, false);
        });

        // 监听场景点击事件
        this.viewer.screenSpaceEventHandler.setInputAction((click) => {
          const pickedObject = this.viewer.scene.pick(click.position);

          if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
            const entity = pickedObject.id;
            const properties = entity.properties.getValue();

            // 设置当前孵化器ID
            this.incubatorId = properties.id;

            // 显示信息窗口
            this.showInfoWindow(entity.id, properties);

            // 获取数据
            this.getAllApi();
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // 获取大屏各接口数据
        setTimeout(() => {
          if (!Tools.isHighTech() && result.length) {
            this.incubatorId = result[0].id;
          }
          this.getAllApi();
          this.showSreen = true;
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scope>
#cesiumContainer {
  height: 100%;
  width: 100%;
  background-color: #29557a;
}

// 隐藏Cesium版权信息和logo
:deep .cesium-widget-credits {
  display: none !important;
}

// 隐藏Cesium默认控件
:deep .cesium-viewer-toolbar,
:deep .cesium-viewer-bottom,
:deep .cesium-viewer-animationContainer,
:deep .cesium-viewer-timelineContainer {
  display: none !important;
}

.emptyText {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.19rem;
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: "diget year";
  src: url("~@/assets/fonts/DS-Digital.ttf");
}
@font-face {
  font-family: "ShuHei";
  src: url("~@/assets/fonts/AlimamaShuHeiTi-Bold.ttf");
}

.font_digit {
  font-family: diget year;
}
.font_ShuHei {
  font-family: ShuHei;
}

.Screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

  .a_0,
  .b_0 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .a_0 {
    z-index: 1;
  }

  .b_0 {
    z-index: 2;
  }

  .map-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("~@/assets/images/bg-img.png");
    opacity: 0.12;
    z-index: 10;
  }
}

#header {
  position: absolute;
  width: 100%;
  height: 0.8rem;
  top: 0;
  left: 0;
  z-index: 100;
  .b1_bg {
    height: 0.8rem;
    background: url("~@/assets/images/title-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    h2 {
      font-size: 0.36rem;
      color: #fff;
      font-family: ShuHei;
      letter-spacing: 0.05rem;
    }
  }
  .go-back {
    position: absolute;
    top: 0.2rem;
    left: 0.4rem;
    a {
      display: block;
      width: 1rem;
      height: 0.4rem;
      background: url("~@/assets/images/backstage.png") no-repeat;
      background-size: 100% 100%;
      color: #fff;
      font-size: 0.16rem;
      line-height: 0.4rem;
      text-align: center;
      cursor: pointer;
    }
  }
}

.b0_ {
  position: absolute;
  width: 100%;
  height: 100%;
  .b0_a {
    width: 100%;
    height: 100%;
    .side {
      position: absolute;
      width: 22%;
      height: 100%;
      padding-top: 1rem;
      transition: all 0.3s;
      .a-md31,
      .a-md32,
      .a-md33,
      .a-md34,
      .a-md35,
      .a-md36 {
        width: 100%;
        height: 30%;
        margin-bottom: 0.2rem;
        .abs-full {
          height: 100%;
          background: url("~@/assets/images/content-box-bg.png") no-repeat;
          background-size: 100% 100%;
          padding: 0.1rem 0.15rem;
          .m-tt {
            height: 0.3rem;
            margin-bottom: 0.05rem;
            h4 {
              font-size: 0.18rem;
              color: #00f6ff;
              padding-left: 0.05rem;
              border-left: 0.04rem solid #00f6ff;
              line-height: 0.2rem;
            }
          }
          .ct-box {
            height: calc(100% - 0.35rem);
            padding: 0.05rem 0;
            .wrap {
              height: 100%;
              width: 100%;
            }
            ul {
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              li {
                width: 33.33%;
                height: 50%;
                padding: 0.1rem 0.05rem;
                position: relative;
                font {
                  display: block;
                  font-size: 0.18rem;
                  color: #fdbe17;
                  font-family: diget year;
                  text-align: center;
                  span {
                    font-size: 0.12rem;
                  }
                }
                h6 {
                  font-size: 0.12rem;
                  color: #fff;
                  text-align: center;
                  margin-top: 0.05rem;
                  font-weight: 400;
                }
                &.specialBefore::before {
                  position: absolute;
                  content: "";
                  width: 0.01rem;
                  height: 0.2rem;
                  background-color: rgba(44, 203, 255, 0.3);
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                }
              }
            }
          }
        }
      }
    }
    .b0_left {
      left: 0;
      transform: translateX(-100%);
      &.show {
        transform: translateX(0);
      }
    }
    .b0_right {
      right: 0;
      transform: translateX(100%);
      &.show {
        transform: translateX(0);
      }
    }
  }
}

// 响应式调整
@media screen and (max-width: 1600px) {
  .b0_ .b0_a .side {
    width: 25%;
  }
}

@media screen and (max-width: 1440px) {
  #header {
    .b1_bg h2 {
      font-size: 0.3rem;
    }
  }
  .b0_ .b0_a .side {
    width: 28%;
  }
}

@media screen and (max-width: 1280px) {
  #header {
    height: 0.6rem;
    .b1_bg {
      height: 0.6rem;
      h2 {
        font-size: 0.24rem;
      }
    }
  }
  .b0_ .b0_a .side {
    width: 30%;
  }
}

@media screen and (max-width: 1024px) {
  .b0_ .b0_a .side {
    width: 40%;
  }
}
</style>

