<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>


import { Highchart } from "@/assets/js/chartTemplates.js";
  // import cuAmap from "@/components/AMap";
  import request from "@/utils/request";
  import { Tools } from '@/assets/js/common.js';
  
  
  let resizeTimeout;
  window.addEventListener('resize', function() {
	  clearTimeout(resizeTimeout);
	  resizeTimeout = setTimeout(function() {
		// location.reload();
		  // 执行响应逻辑
	  }, 200); // 200毫秒后执行
  });
  
  function getPxByRem(remValue){// 传入要转换的 rem 值
  // 获取 html 元素
  const htmlElement = document.documentElement;
  
  // 获取 html 元素的 font-size
  const fontSize = parseFloat(getComputedStyle(htmlElement).fontSize);
  
  // 将 rem 转换为 px
  let pxValue = remValue * fontSize;
	return pxValue
  }
export default {
data() {
	  return {
		isTechUser: false,
		// 图表数据为空情况
		emptyFlag4byqyjnzsrphb: false,
		emptyFlag4srph: false,
		emptyFlag4zfqyndsjsfbhqs:false,
emptyFlag4byqyndsjsfbhqs:false,
		// isTechUser: localStorage.getItem('groupIdByloginType')*1===2,
		showSreen: false,
		map: null,
		infoWindow: null,
		navActive: null,
		sjzlList: [],
		srphList: [],
		view0: {
		  md1: [], // 数据总览
		  md3: [], // 产品
		},
		incubatorId: ''
	  };
	},
	// components: { cuAmap },
	computed: {
	//   isTechUser() {
	// 	return localStorage.getItem("groupIdByloginType") * 1 === 2;
	//   },
	},
	mounted() {
	  var that = this;
	  this.$nextTick(() => {	
		/**
		 * 1、地图渲染
		 * 1-1、地图坐标点定位回显，marker事件添加
		 * 2、接口数据获取
		 * 3、图表渲染
		 * 4、定时刷新接口操作
		 * 5、调整窗口大小，重新加载处理
		 *
		 *
		 */
		this.initMap();
  
		this.navActive = 0;
  
		// this.getRoleInfo();
	  });
	},
	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() { // 切换总览数据，接口的全部
		// location.href = "/home/overview";
		this.incubatorId = ''
		this.getAllApi()

	  },
	  goBackendHome() {
		location.href = "/home/enterprise";
	  },
	  initMap() {
		var VUE = this;
		VUE.map = new AMap.Map("container", {
		  resizeEnable: true,
		//   center: [122.050189, 37.515189],
		  center: [122.116100, 37.510200],
		  zoom: 13,
		});
  
		console.log(VUE.map, "map");
		// addMarker();
		this.getIncubatorMarkers();
  
		//实例化信息窗体
		VUE.infoWindow = new AMap.InfoWindow({
		  isCustom: true, //使用自定义窗体
		  anchor: "top-center",
		  offset: new AMap.Pixel(30, 70),
		});
  
		VUE.infoWindow.on("open", () => {
		  // 关闭信息框
		  document.getElementById("closeInfoWindowBtn").onclick = function () {
			VUE.infoWindow.close();
		  };
		  document.getElementById("goMoreBtn").onclick = function () {
			// alert(this.getAttribute('data-id'))
			// VUE.$route.push('/home/enterprise')
			if (VUE.isTechUser) {
			  location.href = "/home/overview?id=" + this.getAttribute("data-id");
			} else {
			  location.href =
				"/home/enterprise?id=" + this.getAttribute("data-id");
			}
		  };
		});
	  },
	  showInfoWindow(marker, item) {
		const content = `<div class="popupBgImage" style="">
						  <h4>详细信息</h4><i id="closeInfoWindowBtn" style="cursor:pointer;"></i>
						  <dl>
							  <dd class="textEllipsis"><font>孵化器名称：</font><span :title="${
				  item.incubatorName
				}">${item.incubatorName}</span></dd>
							  <dd class="textEllipsis"><font>运营机构：</font><span :title="${
				  item.operatingAgency
				}">${item.operatingAgency}</span></dd>
							  <dd class="textEllipsis"><font>在孵企业：</font><span :title="${
				  item.incubatorCount
				}">${item.incubatorCount || 0}家</span></dd>
							  <dd class="textEllipsis"><font>毕业企业：</font><span :title="${
				  item.graduationCount
				}">${item.graduationCount || 0}家</span></dd>
							  <dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd>
							  <dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd>
						  </dl>
						  <button type="button" id="goMoreBtn" data-id="${item.id}">${
		  this.isTechUser ? "更多" : "进入后台"
		}</button>
					  </div>`;
		this.infoWindow.setContent(content);
		this.infoWindow.open(this.map, marker.getPosition());
	  },
	  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 = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"];
			var colors = ["#00f0ff", "#f88f41", "#0ce2a6", "#fdbe17", '#ff1fdd', '#ff3333', '#f8ff3a'];  //'#f8ff3a'
		  var seriesFormat = Highchart.formatSeriesList(list, {
			value: "num",
			colors: colors,
		  });
		  var seriesData = seriesFormat.seriesData;
		  var opts = {
			chartCallback:function(c){
				if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
					// console.error('图表渲染问题出现,重新渲染.')
					// c.reflow()
					// 重新初始话
					setTimeout(() => {
						Highchart.template.rich(
							document.querySelector(".qycxcysjfxWrapper"),
							list,
							opts
						);
					}, 900);
				}
			},
			chartConfig: {
			  chart: {
				backgroundColor: "transparent",
				//spacing:[0, 0 , 0, 0]
			  },
			  title: {
				floating: true,
				text: "",
				verticalAlign: "middle",
				y: 22,
				floating: true,
				style: {
				  color: "#00f6ff",
				//   textOutline: 'none' // 去掉文字轮廓
				},
			  },
			  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) {
						// 如果屏幕宽度小于600像素，执行这里的代码
						} else if (screenWidth > 1440) {
							fontSize = '0.15rem'
							// fontSize = '0.12rem'
						}else if (screenWidth > 1280) {
							// fontSize = '0.12rem'
							name = this.point.name.length>5?this.point.name.substring(0, 5) : this.point.name;
							// fontSize = '0.12rem'
						} 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) { // 小于1176, 环形图表显示不全了。
							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>`
					},
					// format:
					//   '<span style="color:{point.color}">{point.name}: {point.percentage:.1f}%</span>', // 标签颜色与图形颜色一致
					style: {
					  fontSize: "0.17rem", // 设置系列文本的字体大小
					},
				  },
				},
			  },
			  series: [
				{
				  type: "pie",
				  innerSize: "70%",
				  name: "设备数量",
				  data: seriesData,
				},
			  ],
			},
			isSeriesData: true,
		  };
		  // Highchart.template.pie(wrap34, list, opts);
		  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"]; //  "#08b2c0"
		  var chartData = Highchart.formatSeriesList(list, {
			value: "value",
			colors: colors,
		  });
		  var opts = {
			chartCallback:function(c){
				if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
					// console.error('图表渲染问题出现,重新渲染.')
					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,
				// max: 1000,
				visible: true,
				lineWidth: 1, // 设置 Y 轴坐标轴线宽度
				lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色
				gridLineWidth: 0, // 也可以设置不显示网格线
				labels: {
				  overflow: "justify",
				  style: {
					fontSize: "0.18rem", // 设置 Y 轴标签的字体大小
					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', // 之所以之前这里设置不好使，是与下面的align冲突了，align是内部显示的对其方式！
					enabled: true,
					color: "#FFFFFF",
					// align: "right", // 内部对其专用，设置外部对齐时，不可设置该属性！！！
					format: "<div style='font-size: 0.19rem;color:{point.color};color:#fff;'>{point.y:.2f}万</div>", // :.1f 为保留 1 位小数
				  },
				},
			  ],
			},
			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"]; //  "#08b2c0"
		  var chartData = Highchart.formatSeriesList(list, {
			value: "value",
			colors: colors,
		  });
		  var opts = {
			chartCallback:function(c){
				if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
					// console.error('图表渲染问题出现,重新渲染.')
					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,
				// max: 1000,
				visible: true,
				lineWidth: 1, // 设置 Y 轴坐标轴线宽度
				lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色
				gridLineWidth: 0, // 也可以设置不显示网格线
				labels: {
				  overflow: "justify",
				  style: {
					fontSize: "0.18rem", // 设置 Y 轴标签的字体大小
					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', // 之所以之前这里设置不好使，是与下面的align冲突了，align是内部显示的对其方式！
					enabled: true,
					color: "#FFFFFF",
					// align: "right", // 内部对其专用，设置外部对齐时，不可设置该属性！！！
					format: "<div style='font-size: 0.19rem;color:{point.color}; color:#fff;'>{point.y:.2f}万</div>", // :.1f 为保留 1 位小数
				
				  },
				},
			  ],
			},
			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){ // 图表加载时,容器还没有准备好,导致图表显示异常.
					// console.error('图表渲染问题出现,重新渲染.')
					setTimeout(() => {// 重新初始渲染图表
						Highchart.template.rich(
							document.querySelector(".zfqyndsjsfbhqsWrapper"),
							list,
							opts
						);
					}, 900);
				}
			},
			chartConfig: {
			  chart: {
				marginTop: getPxByRem(0.4),
				marginLeft: getPxByRem(0.5),// 50,
				marginBottom: getPxByRem(0.45),
				marginRight: getPxByRem(0.2),
			  },
			  xAxis: {
				lineWidth: 1, // 设置 Y 轴坐标轴线宽度
				lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
				type: "category",
				categories: categories,
				labels: {
				  rotation: -20, // 设置轴标签旋转角度
				  align: "center",
				  style: {
					fontSize: "0.17rem",
				  },
				},
			  },
			  yAxis: {
				lineWidth: 1, // 设置 Y 轴坐标轴线宽度
				lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
				// tickLength: 0, // 不显示刻度线
				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", // 设置 Y 轴文字大小
				  },
				},
			  },
			  plotOptions: {},
			  series: [
				{
				  type: "area",
				  keys: ["y", "rotation"], // rotation is not used here
				  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(wrap35, list, opts);
		  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){ // 图表加载时,容器还没有准备好,导致图表显示异常.
						// console.error('图表渲染问题出现,重新渲染.')
						setTimeout(() => {// 重新初始渲染图表
							Highchart.template.rich(
								document.querySelector(".byqyndsjsfbhqsWrapper"),
								list,
								opts
							);
						}, 900);
					}
				},
				chartConfig: {
				chart: {
					marginTop: getPxByRem(0.4),
					marginLeft: getPxByRem(0.5),// 50,
					marginBottom: getPxByRem(0.45),
					marginRight: getPxByRem(0.2),
				},
				xAxis: {
					lineWidth: 1, // 设置 Y 轴坐标轴线宽度
					lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
					type: "category",
					categories: categories,
					labels: {
					rotation: -20, // 设置轴标签旋转角度
					align: "center",
					style: {
						fontSize: "0.17rem",
					},
					},
				},
				yAxis: {
					lineWidth: 1, // 设置 Y 轴坐标轴线宽度
					lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
					// tickLength: 0, // 不显示刻度线
					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", // 设置 Y 轴文字大小
					},
					},
				},
				plotOptions: {},
				series: [
					{
					type: "area",
					keys: ["y", "rotation"], // rotation is not used here
					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(wrap35, list, opts);
			Highchart.template.rich(
				document.querySelector(".byqyndsjsfbhqsWrapper"),
				list,
				opts
			);
				resolve('ok');
			});

		});
	  },
	  getIncubatorMarkers() {
	
		request({
		  url: "api/homePage/incubatorLocation",
		  method: "get",
		}).then((res) => {
		  let result = res.body || [];
		  var markers = result.map((item, index) => {
			return {
			  position: [item.longitude, item.latitude],
			  extraData: {
				id: item.id,
				incubatorName: item.incubatorName,
				operatingAgency: item.operatingAgency,
				incubatorCount: item.incubatorCount,
				graduationCount: item.graduationCount,
				totalArea: item.totalArea,
				totalIncome: item.totalIncome,
			  },
			};
		  });
  
		  // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
		  markers.forEach((item, index) => {
			var marker = new AMap.Marker({
			  map: this.map,
			  // position: [116.481181, 39.989792],
			  position: [item.position[0], item.position[1]],
			  icon: "/static/images/marker-dp.png",
			  imageSize: new AMap.Size(22, 22),
			});
			//鼠标点击marker弹出自定义的信息窗体
			marker.on("click", () => {
			  // VUE.infoWindow.open(VUE.map, marker.getPosition());
			  this.incubatorId = item.extraData.id // 设置当前孵化器id
			  this.showInfoWindow(marker, item.extraData);
				this.getAllApi()
			});
		  });
			// 获取大屏各接口数据
			setTimeout(() => { // 保证获取到当前登录的孵化器id后进行接口请求显示
				if(!Tools.isHighTech() && result.length){ // 如果是孵化器用户, 则设置当前孵化器id
					this.incubatorId = result[0].id
				}
				this.getAllApi()
				
				this.showSreen = true
			}, 1000);

		});
	  },
	},
}
</script>

<style lang="scss" scope>
  .amap-icon {
	// 高德地图样式覆盖
	img {
	  width: 0.52rem !important;
	  height: 0.52rem !important;
	}
  }
  .amap-copyright{
	display: none !important;
  }
  .emptyText{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.19rem;
		width: 100%;
		height: 100%;
	}

  #container {
	height: 100%;
	width: 100%;
	background-color: #29557a;
  }
  @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;
	}
	> .actv {
	  display: block;
	}
	.a_0 {
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	  .cesium-ctn {
		height: 100%;
		width: 100%;
		position: relative;
		z-index: 1;
		.kmb-popmd-e3d8.alarm {
		  & > i:nth-child(2) {
			border-color: #ff0000 transparent transparent #ff0000 !important;
		  }
		  & > i:nth-child(3) {
			border-color: #ff0000 !important;
			color: #ff0000 !important;
		  }
		}
		.close {
		  right: 5px !important;
		  top: 5px !important;
		  border-width: 0 !important;
		  color: #fff !important;
		  background: transparent !important;
		}
		h4 {
		  margin-top: 0.05rem;
		  position: relative;
		  height: 0.38rem;
		  line-height: 0.38rem;
		  text-align: center;
		  font-weight: normal;
		  font-size: 0.18rem;
		  background-image: linear-gradient(
			to right,
			transparent 15%,
			#25affa 50%,
			transparent 85%
		  );
		  &:before,
		  &:after {
			content: "";
			position: absolute;
			left: 0;
			height: 1px;
			width: 100%;
		  }
		  &:before {
			top: 0;
			background-image: linear-gradient(
			  to right,
			  transparent 15%,
			  #4de4ff 50%,
			  transparent 85%
			);
		  }
		  &:after {
			bottom: 0;
			background-image: linear-gradient(
			  to right,
			  transparent 15%,
			  #4de4ff 50%,
			  transparent 85%
			);
		  }
		}
		dl {
		  font-size: 0.16rem;
		  margin-top: 0.1rem;
		  dd {
			line-height: 0.3rem;
			color: #7ae2ff;
			margin: 0 0.3rem;
		  }
		}
	  }
	  .a0_ {
		position: absolute;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 3;
		header {
		  position: absolute;
		  top: 0;
		  left: 0;
		  height: 0;
		  width: 100%;
		  z-index: 5;
		  display: flex;
		  user-select: none;
		  .b1_bg {
			position: relative;
			height: 0.98rem;
			width: 100%;
			margin: 0 auto;
			background: no-repeat top center
			  url("~@/assets/images/layout/s_hd_m1.png");
			background-size: auto 0.98rem;
			display: flex;
			justify-content: center;
			pointer-events: none;
			h2 {
				font-size: .4rem;
				line-height: 1;
				margin: .23rem 0 0 0rem;
				font-weight: bold;
				color: #fff;
				// background-image: -webkit-linear-gradient(top, #fff, #c6dafb, #90b6f5);
				font-family: Adobe Heiti Std;
				letter-spacing: .06rem;
				color: #E0F1FF;
				text-shadow: 0px 12px 27px rgba(0, 70, 169, 0.78);
				background-image: linear-gradient(0deg, #B3D0FD 38.1640625%, #FFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		  }
		  .go-back {
			position: absolute;
			top: 0.3rem;
			left: 0.1rem;
			height: 0.54rem;
			width: 1.56rem;
			background: no-repeat top center
			  url("~@/assets/images/layout/h_btn1.png");
			background-size: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			a {
			  color: #fff;
			  text-decoration: none;
			  font-size: 0.21rem;
			}
		  }
  
		  .a0a_ {
			position: absolute;
			top: 0;
			left: 0;
			height: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			ul {
			  height: 0;
			  display: flex;
			  margin-top: 0.42rem;
			  width: 5.15rem;
			  li {
				width: 1.17rem;
				height: 0.4rem;
				cursor: pointer;
				border-radius: 0.05rem;
				background-repeat: no-repeat;
				background-position: top center;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 0.16rem;
				&:hover {
				  box-shadow: inset 0 0 0.08rem 0.03rem rgba(42, 248, 251, 0.8);
				}
			  }
			  li.active {
			  }
			  li:last-child {
				margin-right: 0;
			  }
			}
			ul:first-child {
			  margin-left: 0.14rem;
			  li {
				margin-right: 0.13rem;
			  }
			}
			ul:last-child {
			  margin-right: 0.14rem;
			  li {
				margin-left: 0.13rem;
			  }
			}
		  }
  
		  .more {
			position: absolute;
			top: 0.07rem;
			right: 0.3rem;
			ul {
			  display: flex;
			}
			li {
			  height: 0.31rem;
			  width: 0.31rem;
			  margin-left: 0.2rem;
			  cursor: pointer;
			  background-repeat: no-repeat;
			  background-position: center center;
			  background-size: 0.29rem 0.29rem;
			  border-radius: 0.29rem;
			  &:hover {
				box-shadow: inset 0 0 0.04rem 0.02rem rgba(42, 248, 251, 0.8);
			  }
			}
			li:first-child {
			}
			li:last-child {
			}
		  }
		}
	  }
  
	  .map-mask {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 2;
		pointer-events: none;
		background: no-repeat center center url("~@/assets/images/dpNew/bg.png");
		background-size: 100% 100%;
	  }
	}
	.b_0 {
	  display: flex;
	  top: 0.96rem;
	  left: 0;
	  bottom: 0;
	  width: 0;
	  background-color: rgba(0, 0, 0, 0.15);
	  z-index: 2;
  
	  .b0_ {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		width: 0;
  
		.kmb-checkbox {
		  dd {
			line-height: 0.35rem;
		  }
		}
  
		.side {
		  // display:none;
  
		  width: 5.44rem;
		  height: 0;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  user-select: none;
		  color: #fff;
  
		  .abs-full {
			display: flex;
			flex-direction: column;
			//padding:.08rem .10rem;
			//background:no-repeat center center url('~@/assets/images/layout/side_l_md.png');background-size:100% 100%;
			// background-color: rgba(29, 57, 110, 0.65);
			background: linear-gradient(
			  to right,
			  rgba(0, 60, 144, 0.9),
			  /* #003c90 - 90% 不透明度 */ rgba(0, 44, 106, 0.7)
				/* #002c6a - 70% 不透明度 */
			);
  
			.chart {
			  position: relative;
			}
		  }
		  .m-tt {
			height: 0.48rem;
			width: 100%;
			background: no-repeat center center
			  url("~@/assets/images/layout/md_hd_l.png");
			background-size: 100% 100%;
			h4 {
			  height: 100%;
			  line-height: 0.48rem;
			  font-size: 0.22rem;
			  letter-spacing: 0.01rem;
			  padding-left: 0.4rem;
			  font-weight: normal;
			  font-family: Adobe Heiti Std;
			  //background-image:linear-gradient(to bottom,#fff,#f3fffc,#e4fff9);
			  //-webkit-background-clip:text;-webkit-text-fill-color:transparent;
			}
		  }
  
		  .ct-box {
			flex: 1;
			display: flex;
			position: relative;
			font-size: 0.13rem;
  
			.tab2 {
			  margin-top: 0.1rem;
			  ul {
				display: flex;
				height: 0.24rem;
				margin: 0 0.1rem;
			  }
			  li {
				flex: 1;
				text-align: center;
				line-height: 0.2rem;
				margin: 0 0.15rem;
				max-width: 0.99rem;
				border-radius: 0.05rem;
				font-size: 0.15rem;
				color: #37b5b4;
				border: 1px solid #1e527a;
				cursor: pointer;
				box-shadow: inset 0 0 0.1rem 0.03rem rgba(16, 88, 148, 0.8);
			  }
			  li.actv {
				border: 1px solid #01b0ff;
				color: #34fcfa;
			  }
			}
			.wrap {
			  position: absolute;
			  top: 0;
			  left: 0;
			  height: 100%;
			  width: 100%;
			}
			.flex1 {
			  position: relative;
			}
		  }
  
		  .shadow1 {
			box-shadow: inset 0 0 0.15rem 0.05rem rgba(1, 95, 121, 0.8);
			background-color: rgba(0, 0, 0, 0.4);
		  }
  
		  .a-md31 {
			height: 3.2rem;
			position: relative;
			&::after {
			  position: absolute;
			  top: 60%;
			  left: 50%;
			  transform: translateX(-50%);
			  content: "";
			  width: 92%;
			  height: 1px;
			  background: linear-gradient(to right, #cfb8b8 50%, transparent 50%)
				repeat;
			  background-size: 10px 2px;
			}
			ul {
			  position: absolute;
			  top: 0;
			  left: 0;
			  height: 100%;
			  width: 100%;
			  display: grid;
			  grid-template-columns: 33.33% 33.33% 33.33%;
			  li {
				position: relative;
				line-height: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				position: relative;
				padding-left: 0.5rem;
				&:before {
				  content: "";
				  height: 0.5rem;
				  width: 0.44rem;
				  background-repeat: no-repeat;
				  background-position: center center;
				  background-size: 100% auto;
				  top: 0.35rem;
				  position: absolute;
				  left: 0.2rem;
				// left: 0.04rem;
				  //background-image:url('~@/assets/images/layout/md31_i1.png');
				}
				h6 {
				//   font-size: 0.19rem;
				//   color: #dcebff;
				//   margin-top: 0.17rem;
				font-size: .16rem;
				color: #dcebff;
				margin-top: 0.17rem;
				}
				font {
					  font-size: 0.45rem;
				  font-family: diget year;
				  // margin-top: 0.15rem;
				  line-height: 0.33rem;
				  background-image: -webkit-linear-gradient(
					top,
					#fff,
					#fff,
					#ffea98
				  );
				  -webkit-background-clip: text;
				  -webkit-text-fill-color: transparent;
				  span{
					font-family: MicrosoftYaHei;
					font-size: 0.18rem;
					font-weight: bold;
				  }
				}
			  }
			  li:nth-child(1) {
				&:before {
				  background-image: url("~@/assets/images/layout/md31_i1.png");
				}
			  }
			  li:nth-child(2) {
				&:before {
				  background-image: url("~@/assets/images/layout/md31_i2.png");
				}
			  }
			  li:nth-child(3) {
				&:before {
				  background-image: url("~@/assets/images/layout/md31_i3.png");
				}
			  }
			  li:nth-child(4) {
				&:before {
				  background-image: url("~@/assets/images/layout/md31_i4.png");
				}
			  }
			  li:nth-child(5) {
				&:before {
				  background-image: url("~@/assets/images/layout/md31_i5.png");
				}
			  }
			  li:nth-child(6) {
				&:before {
				  background-image: url("~@/assets/images/layout/md31_i6.png");
				}
			  }
			}
		  }
		  .specialBefore{// 针对孵化面积特殊处理类
			font{
				font-size: 0.35rem !important;
			}
			&:before {
				left: 0.04rem !important; 
			}
		  }
		  .a-md32 {
			height: 3.7rem;
		  }
		  .a-md33 {
			height: 2.8rem;
			.cu-slider {
			  position: absolute;
			  top: 0;
			  left: 0;
			  height: 100%;
			  width: 100%;
			  overflow: hidden;
			  .el-carousel {
				width: 100%;
				height: 100%;
			  }
			  .el-carousel__container {
				.el-carousel__item {
				  display: flex;
				  flex-direction: column;
				  .rel-fixd {
					flex: 1;
					position: relative;
					margin: 0.1rem;
				  }
				  .wrap {
					display: flex;
					justify-content: center;
					p {
					  position: absolute;
					  top: 0;
					  left: 0;
					  font-size: 0.16rem;
					  padding: 0.05rem 0.1rem;
					  background-color: rgba(0, 0, 0, 0.6);
					  border-radius: 0 0.05rem 0.05rem 0;
					}
					img {
					  height: 100%;
					}
				  }
				}
			  }
			  .el-carousel__arrow {
				display: none;
			  }
			}
		  }
  
		  .a-md34 {
			height: 3.2rem;
		  }
		  .a-md35 {
			height: 3.7rem;
		  }
		  .a-md36 {
			height: 2.8rem;
		  }
		}
		> div {
		  display: none;
		  //display:flex;
		  width: 19.2rem;
		  height: 0;
		  justify-content: space-between;
		  .b0_left {
			margin-left: 0.1rem;
  
			/* .ct-box{
							  margin-top:.06rem;
							  background-image:linear-gradient(to right, rgba(21, 59, 85, .5), rgba(21, 59, 85, .1));
						  } */
		  }
		  .b0_right {
			margin-right: 0.1rem;
		  }
		}
		div.active {
		  display: flex;
		  //.side{display:flex;}
		}
  
		.b0_a {
		  .side {
			& > div {
			  flex: none;
			  position: relative;
			  margin-bottom: 0.1rem;
			  min-height: 2.6rem;
			  max-height: 28.5vh;
			}
		  }
		}
		div.el-date-editor {
		  border-color: #2f8dc2;
		  background: rgba(0, 0, 0, 0.5);
		  input {
			background-color: transparent;
			color: #eee;
		  }
		  span {
			color: #aaa;
			width: 20px;
		  }
		}
  
		.b0_b {
		  .l-panel {
			width: 5rem;
			height: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		  }
		}
  
		.b0_e {
		  .side {
		  }
		}
  
		.b0_i {
		}
	  }
  
	  .num_blue1 {
		font-family: diget year;
		text-shadow: #00aef7 0px 0px 0.1rem;
	  }
	  .num_orange {
		font-family: diget year;
		text-shadow: #d9fa03 0px 0px 0.1rem;
	  }
	  .num_liuhuang {
		font-family: diget year;
		text-shadow: #c1fa00 0px 0px 0.1rem;
	  }
	  .num_qingse {
		font-family: diget year;
		text-shadow: #03cee0 0px 0px 0.1rem;
	  }
	}
  
	.scrolling4 {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	  overflow-y: auto;
	}
  
	// 进度条
	.progress {
	  position: relative;
	  height: 4px;
	  overflow: visible;
	  border-radius: 0.15rem;
	  background-color: rgba(0, 28, 64, 0.8);
	}
	.progress-bar {
	  position: relative;
	  border-radius: 0.15rem;
	  background-image: linear-gradient(to right, rgba(0, 77, 225, 0.8), #01bbff);
	  width: 100%;
	  height: 100%;
	  color: #fff;
	  transition: width 0.6s ease;
	  font-size: 0.13rem;
	  display: flex;
	  align-items: center;
	  &:before {
		content: "";
		position: absolute;
		right: -3px;
		height: 6px;
		width: 6px;
		border-radius: 6px;
		background-color: #01bbff;
	  }
	  &:after {
		content: "";
		position: absolute;
		right: -8px;
		height: 16px;
		width: 16px;
		border-radius: 16px;
		background-color: rgba(1, 187, 255, 0.4);
	  }
	}
	@keyframes progress-bar-stripes {
	  from {
		background-position: 40px 0;
	  }
	  to {
		background-position: 0 0;
	  }
	}
	@keyframes animate-positive {
	  0% {
		width: 0;
	  }
	}
  
	.half {
	  flex: 1; /* height:50%;width:100%; */
	  display: flex;
	  align-items: center;
	  font-size: 0.15rem;
	  .info {
		flex: 1;
		display: flex;
		height: 0.73rem;
		margin: 0 0.2rem;
		border-radius: 0.73rem;
		background-image: linear-gradient(
		  to right,
		  transparent,
		  rgba(2, 93, 148, 0.5),
		  rgba(2, 93, 148, 1)
		);
		li {
		  flex: 1;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  color: #fff;
		  padding-left: 0.12rem;
		  position: relative;
		  font {
			margin-bottom: 0.05rem;
			font-size: 0.34rem;
		  }
		  em {
			font-style: normal;
			color: #a4f5f6;
			margin-left: 0.08rem;
		  }
		}
		li:first-child {
		  display: flex;
		  align-items: center;
		}
		li:last-child:before {
		  content: "";
		  position: absolute;
		  top: 0;
		  left: 0;
		  height: 100%;
		  border-width: 0 0 0 2px;
		  border-style: solid;
		  border-image: linear-gradient(
			  to bottom,
			  transparent 15%,
			  #286793 50%,
			  transparent 85%
			)
			1;
		}
		.chart-ctn {
		  position: absolute;
		  height: 1.14rem;
		  width: 1.14rem;
		}
		.chart1 {
		  color: #3097fc;
		}
	  }
	}
	.half.reverse {
	  .info {
		flex-direction: row-reverse;
		background-image: linear-gradient(
		  to right,
		  rgba(60, 216, 216, 0.6),
		  rgba(74, 216, 216, 0.3),
		  transparent
		);
		li {
		  padding-left: 0.18rem;
		}
		li:last-child:before {
		  left: auto;
		  right: 0;
		  border-image: linear-gradient(
			  to bottom,
			  transparent 15%,
			  #54909a 50%,
			  transparent 85%
			)
			1;
		}
	  }
	}
  
	/* 弹窗背景图  */
	.popupBgImage {
	  color: #fff;
	  width: 3.86rem;
	  height: 3.66rem;
	  font-size: 0.12rem;
	  padding: 0.1rem;
	  background-image: url("/static/images/frame1.png");
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 100% 100%;
	  position: relative;
	  .textEllipsis {
		display: inline-block;
		white-space: nowrap; /* 不换行 */
		overflow: hidden; /* 超出隐藏 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 3.2rem; /* 设置宽度 */
	  }
	  button {
		width: 1.5rem;
		height: 0.4rem;
		background: #00d2ff;
		border-radius: 0.04rem;
		font-size: 0.19rem;
		color: #fff;
		border: none;
		outline: none;
		margin-left: 50%;
		margin-top: 0.14rem;
		transform: translateX(-50%);
		cursor: pointer;
	  }
	  dl {
		padding: 0 0.25rem;
	  }
	  dd {
		margin-top: 0.08rem;
		// margin-bottom: 0.08rem;
	  }
	  dd > font {
		// 标题
		font-size: 0.19rem;
		color: #00f0ff;
	  }
	  dd > span {
		// 值
		font-size: 0.19rem;
		color: #fff;
	  }
	  i {
		background-image: url("~@/assets/images/dpNew/close_icon.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		display: block;
		width: 0.21rem;
		height: 0.21rem;
		position: absolute;
		top: 0.21rem;
		right: 0.21rem;
	  }
	  h4 {
		width: 2.58rem;
		height: 0.5rem;
		text-align: center;
		line-height: 0.5rem;
		margin: 0 auto;
		margin-top: 0.21rem;
		// 		background: linear-gradient(90deg, rgba(4,205,255,0) 0%, rgba(4,205,255,0.98) 51%, rgba(4,205,255,0) 100%);
		// opacity: 0.82;
		font-family: SimHei;
		font-weight: 400;
		font-size: 0.24rem;
		color: #fff;
  
		background-image: url("~@/assets/images/dpNew/title2.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	  }
	}
  
	/* 加载动画 */
	.loader {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  &:before {
		content: "";
		position: absolute;
		height: 60px;
		width: 60px;
		border: 4px solid #1276e3;
		border-left-color: transparent;
		border-bottom: 0;
		border-radius: 50%;
		animation: loader-1-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
		  infinite;
	  }
	  &:after {
		content: "";
		position: absolute;
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 4px solid #1276e3;
		border-right: 0;
		border-top-color: transparent;
		animation: loader-1-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
	  }
	}
  
	video:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: auto;
	  border: 1px solid red;
	}
  
	.weather {
	  flex: 1;
	  display: flex;
	  font-size: 0.14rem;
	  .mleft {
		display: none;
	  }
	  .wtpath {
		display: none;
	  }
	  .mright {
		flex: 1;
		text-align: center;
	  }
	  img {
		display: block;
		width: 2vw !important;
		height: auto !important;
		margin: 0 auto;
	  }
	  ul {
		margin: 5px 0;
		color: #d0d2ff;
	  }
	  #mobile05 {
		flex: 1;
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 0 0.05rem;
		.today {
		  height: 0.6rem;
		  display: flex;
		  background-image: linear-gradient(
			to right,
			rgba(0, 28, 53, 0.7),
			rgba(0, 28, 53, 0.4),
			transparent
		  );
		  > div {
			flex: 1;
			display: flex;
			> a {
			  display: flex;
			  align-items: center;
			  font {
				margin-left: 0.15rem;
				color: #eee;
			  }
			}
			.wt {
			  display: flex;
			  align-items: center;
			  margin-left: 0.15rem;
			  font {
				margin-left: 0.1rem;
			  }
			}
			.zl {
			  display: flex;
			  align-items: center;
			  margin-left: 0.2rem;
			  a {
				color: #eee;
			  }
			}
		  }
		}
		.more {
		  flex: 1;
		  display: flex;
		  margin-top: 0.08rem;
		  > div {
			margin-right: 0.07rem;
			background-image: linear-gradient(
			  to bottom,
			  rgba(24, 69, 99, 0.8),
			  rgba(24, 69, 99, 0.5),
			  transparent
			);
		  }
		  > div:nth-child(4) {
			margin-right: 0;
		  }
		  .mright:last-child {
			display: none;
		  }
		  .wt {
			margin-top: 0.25rem;
			li {
			  margin-top: 0.15rem;
			}
		  }
		}
	  }
	  //#mobile05>div:last-child{display:none;}
	  /* #mright_1{
				  top:0;left:0;height:auto;width:100%;display:flex;
				  ul{margin:0;color:#03d3fe;}
				  .wt{display:flex;align-items:center;margin-left:140px;}
				  .day{display:none;}
				  span:last-child{display:block;
					  position:absolute;top:4px;left:0px;height:auto;
					  font-size:26px;
				  }
				  font{margin:6px 0 0 10px;color:#35ecfa}
			  } */
  
	  //a{text-decoration:none;}
	}
  }
  
  /* 登录 */
  .login-ctn {
	user-select: none;
	background: no-repeat top left url("/static/images/login-min.jpg");
	background-size: 100% 100%;
  
	.liner {
	  height: 100%;
	  width: 100%;
	  display: flex;
	  .l-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 50%;
		padding-left: 0.3rem;
		background-color: rgba(9, 119, 198, 0.55);
		h3,
		h4 {
		  line-height: 1;
		  color: #fff;
		  text-shadow: rgba(0, 0, 0, 0.4) -0.01rem 0.07rem 0.07rem;
		}
		h3 {
		  font-size: 0.3rem;
		  margin-top: -0.1rem;
		}
		h4 {
		  font-size: 0.37rem;
		  margin-top: 0.15rem;
		  letter-spacing: 0.03rem;
		}
	  }
	}
  
	.pop-login {
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 50%;
	  background-color: rgba(255, 255, 255, 0.9);
	  .inbox-range {
		position: absolute;
		flex: 1;
		width: 75%;
		max-width: 260px;
		min-width: 190px;
		.el-form {
		  .title {
			position: relative;
			color: #000;
			letter-spacing: 0.04rem;
			text-indent: 0.04rem;
			font-size: 0.28rem;
			line-height: 1;
			padding-bottom: 0.13rem;
			margin-bottom: 0.6rem;
			display: flex;
			justify-content: center;
			&:after {
			  content: "";
			  position: absolute;
			  bottom: 0;
			  height: 0.04rem;
			  width: 0.76rem;
			  background-color: #1890ff;
			  border-radius: 20%;
			}
		  }
		  .el-form-item {
			margin-bottom: 20px;
			position: relative;
		  }
		  .el-form-item:last-child {
			margin-bottom: 0;
		  }
		  //>div:last-child{margin-top:45px;}
		  .el-input__prefix {
			width: 30px;
			left: 0;
			font-size: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		  }
		  .el-form-item__error {
			display: none;
		  }
		  .el-form-item__error.open {
			display: block;
		  }
  
		  .login-code {
			img {
			  width: 100px;
			  display: flex;
			  cursor: pointer;
			}
		  }
		  .el-form-item__content {
			&:after,
			&:before {
			  content: none;
			}
		  }
		  .el-button--medium {
			margin-top: 5px;
		  }
		}
	  }
	}
  }
  
  @keyframes rotate {
	0% {
	  transform: rotate(0);
	}
	100% {
	  transform: rotate(360deg);
	}
  }
  
  @keyframes loader-1-outter {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  @keyframes loader-1-inner {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(-360deg);
	  transform: rotate(-360deg);
	}
  }
  </style>

