<template>
  <!-- 食品学院大屏 -->
  <div class="container bg ScaleBox" ref="ScaleBox" :style="{
    width: width + 'px',
    height: height + 'px',
  }">
    <!-- 头部标题 -->
    <div class="header" style="padding-top: 20px;">
      <div class="header-left" style="padding-left: 180px; display: flex;">
        <img class="logo" src="./assets/logo.png" style="width: 331px;height: 60px;padding-left: 60px;">
      </div>
      <div class="header-title" style="display:flex;justify-self: space-between;margin:10px;">
        <div style="flex:0 1 25%">
          <dv-decoration-10 style="height:5px;" />
        </div>
        <div style="flex:0 1 50%">
          <div class="d-flex">
            <dv-decoration-8 style="height:50px;flex:1;" />
            <h2 style="width: 260px;font-size: 17px;">北京工商大学科研驾驶舱</h2>
            <dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
          </div>
        </div>
        <div style="flex:0 1 25%">
          <dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
        </div>
      </div>
      <div class="header-right">

      </div>
    </div>
    <!-- 主体 -->
    <div class="main">
      <!-- 左侧第一块 -->
      <div class="box">
        <!-- 左侧标题 -->
        <div class="box-header" style="">
          <span style=""></span>
          科研经费
        </div>
        <!-- 左侧内容 -->
        <div class=" box-body">
          <!-- 第一行3块 三等分flex布局-->
          <div class="charts-row" style="">
            <!-- left1 -->
            <div style="flex:0 1 33.33%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left1Title }}</h3>
                <div
                  style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
                  <dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in left1Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
                  <span style="width:140px;height:30px;margin-right:30px;" v-for="item in left1Data">{{ item[0]
                    }}</span>
                </div>
              </dv-border-box-13>
            </div>
            <!-- left2 -->
            <div style="flex:0 1 33.33%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left2Title }}</h3>
                <div
                  style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
                  <dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in left2Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
                  <span style="width:140px;height:30px;margin-right:30px;" v-for="item in left2Data">{{ item[0]
                    }}</span>
                </div>
              </dv-border-box-13>
            </div>
            <!-- left3 -->
            <div style="flex:0 1 33.33%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left3Title }}</h3>
                <div
                  style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
                  <dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in left3Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
                  <span style="width:140px;height:30px;margin-right:30px;" v-for="item in left3Data">{{ item[0]
                    }}</span>
                </div>
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第二行 -->
          <div class="charts-row" style="">
            <!-- left4 -->
            <div style="flex:0 1 100%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left4Title }}</h3>
                <div ref="left4Container" style="width:100%; height: 100%;margin: 1px"></div>
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第三行 -->
          <div class="charts-row" style="justify-content: center;">
            <!-- left5 -->
            <div style="flex:1;overflow: hidden;">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left5Title }}</h3>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <dv-scroll-board :config="left5Config" style="width:95%;height:220px;" />
                </div>
              </dv-border-box-13>
            </div>
            <!-- left6 -->
            <div style="flex:1;">
              <dv-border-box-13 style="width:100%;height:300px;padding-top: 10px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left6Title }}</h3>
                <div ref="left6Container" style="height:90%;width:100%"></div>
              </dv-border-box-13>
            </div>
            <!-- left7 -->
            <div style="flex:1;">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left7Title }}</h3>
                <div ref="left7Container" style="height:90%;width:100%"></div>
              </dv-border-box-13>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间第二块 -->
      <div class="box">
        <!-- 标题 -->
        <div class="box-header" style="">
          <span style=""></span>
          中屏总览
        </div>
        <!-- 内容 -->
        <div class="box-body">
          <div class="charts-row">
            <div style="flex:0 1 25%">
              <!-- middle1 -->
              <dv-border-box-13 style="width:100%;height:200px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle1Title }}</h3>
                <div style="display: flex;justify-content: space-evenly;align-items: center;font-size: 10px;">
                  <dv-decoration-9 style="width:120px;height:120px;" dur=5 v-for="item in middle1Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: space-evenly;text-align: center;">
                  <span style="width:120px;height:30px;" v-for="item in middle1Data">{{ item[0] }}</span>
                </div>
              </dv-border-box-13>
              <!-- middle4 -->
              <dv-border-box-13 style="width:100%;height:400px;padding-top: 10px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle4Title }}</h3>
                <div ref="middle4" style="height:80%;width:100%"></div>
              </dv-border-box-13>
            </div>
            <!-- middle2 -->
            <div style="flex:0 1 50%">
              <dv-border-box-1 style="width:100%;height:600px;">
                <iframe src="/static/3d-force-graph/index1.html" ref="iframe" width="100%" height="600px"
                  scrolling="no"></iframe>
              </dv-border-box-1>
            </div>
            <div style="flex:0 1 25%">
              <!-- middle3 -->
              <dv-border-box-13 style="width:100%;height:200px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle3Title }}</h3>
                <div style="display: flex;justify-content: space-evenly;align-items: center;font-size: 10px;">
                  <dv-decoration-9 style="width:120px;height:120px;" dur=5 v-for="item in middle3Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: space-evenly;text-align: center;">
                  <span style="width:120px;height:30px;" v-for="item in middle3Data">{{ item[0] }}</span>
                </div>
              </dv-border-box-13>
              <!-- middle5飞线 -->
              <dv-border-box-13 style="width:100%;height:400px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle5Title }}</h3>
                <div ref="flightMap" style="height:80%;width:100%"></div>
                <!-- <Map></Map> -->
              </dv-border-box-13>
            </div>
          </div>

          <!-- middle6 -->
          <div class="charts-row" style="">
            <div style="flex:0 1 100%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle6Title }}</h3>
                <div ref="middle6Container" style="width:100%; height: 90%;margin: 1px"></div>
              </dv-border-box-13>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧第三块 -->
      <div class="box">
        <!-- 标题 -->
        <div class="box-header" style="">
          <span style=""></span>
          论文
        </div>
        <!-- 内容 -->
        <div class="box-body">
          <!-- 第一行 -->
          <div class="charts-row" style="">
            <!-- right1 -->
            <div style="flex:0 1 33.33%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right1Title }}</h3>
                <div
                  style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
                  <dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in right1Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
                  <span style="width:140px;height:30px;margin-right:30px;" v-for="item in right1Data">{{ item[0]
                    }}</span>
                </div>
              </dv-border-box-13>
            </div>
            <!-- right2 -->
            <div style="flex:0 1 33.33%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right2Title }}</h3>
                <div
                  style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
                  <dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in right2Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
                  <span style="width:140px;height:30px;margin-right:30px;" v-for="item in right2Data">{{ item[0]
                    }}</span>
                </div>
              </dv-border-box-13>
            </div>
            <!-- right3 -->
            <div style="flex:0 1 33.33%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right3Title }}</h3>
                <div
                  style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
                  <dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in right3Data">
                    <h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
                  <span style="width:140px;height:30px;margin-right:30px;" v-for="item in right3Data">{{ item[0]
                    }}</span>
                </div>
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第二行 -->
          <div class="charts-row" style="">
            <!-- right4 -->
            <div style="flex:0 1 100%">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right4Title }}</h3>
                <div ref="right4Container" style="width:100%; height: 90%;margin: 1px"></div>
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第三行 -->
          <div class="charts-row" style="justify-content: center;">
            <!-- right5 -->
            <div style="flex:1;">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right5Title }}</h3>
                <div ref="right5Container" style="height:90%;width:100%"></div>
              </dv-border-box-13>
            </div>
            <!-- right6 -->
            <div style="flex:1;">
              <dv-border-box-13 style="width:100%;height:300px;padding-top: 10px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right6Title }}</h3>
                <div ref="right6Container" style="height:90%;width:100%"></div>
              </dv-border-box-13>
            </div>
            <!-- right7 -->
            <div style="flex:1;overflow: hidden;">
              <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right7Title }}</h3>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <dv-scroll-board :config="right7Config" style="width:95%;height:220px;" />
                </div>
              </dv-border-box-13>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Map from './components/Map.vue'
import RadarChart from './components/RadarChart.vue'
import CapsuleChart from './components/CapsuleChart.vue';
import LineChart from './components/LineChart.vue'
import http from "@/utils/request";
import * as echarts from "echarts";
import { color, symbol } from 'd3';
import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图
import dimensionComponent from "./components/dimensionComponent";
import marketRiskComponent from "./components/riskIndexComponent";
import marketRiskComponent1 from "./components/riskIndexComponent1";
// data
import hongguanfenxi from "./data/hongguanfenxi.json"
import lunbo from "./data/lunbo.json"
import hangyeyujing from "./data/hangyeyujing.json"
import 'animate.css';

export default {
  name: 'App',
  components: {
    Map,
    RadarChart,
    CapsuleChart,
    LineChart,
    systemRiskComponent,
    dimensionComponent,
    marketRiskComponent,
    marketRiskComponent1
  },
  data() {
    return {
      left1Data: [],
      left1Title: [],
      left2Data: [],
      left2Title: [],
      left3Data: [],
      left3Title: [],
      left4Data: [],
      left4Title: [],
      left5Data: [],
      left5Title: '',
      left5Config: {
      },
      left6Title: '',
      left7Title: '',
      middle1Data: [],
      middle1Title: '',
      middle3Data: [],
      middle3Title: '',
      middle4Title: '',
      middle5Title: '',
      middle6Title: '',
      right1Data: [],
      right1Title: [],
      right2Data: [],
      right2Title: [],
      right3Data: [],
      right3Title: [],
      right4Title: '',
      right5Title: '',
      right6Title: '',
      right7Title: '',
      right7Config: {
      },
      scale: 0,
      width: 5760,
      height: 1080,
    }
  },
  created() {
    
  },
  mounted() {
    // 大屏自适应部分
    // this.setScale();
    // window.removeEventListener("resize", this.debounce(this.setScale))
    // window.addEventListener("resize", this.debounce(this.setScale));
    this.getLeft1Data()
    this.getLeft2Data()
    this.getLeft3Data()
    this.getLeft4Data()
    this.getLeft5Data()
    this.getLeft6Data()
    this.getLeft7Data()
    this.getMiddle1Data()
    this.getMiddle3Data()
    this.getMiddle4Data()
    // this.getMiddle5Data()
    this.getMiddle6Data()
    // this.getRight1Data()
    // this.getRight2Data()
    // this.getRight3Data()
    // this.getRight4Data()
    // this.getRight5Data()
    // this.getRight6Data()
    // this.getRight7Data()

  },
  methods: {
    // 左侧第一行3块饼图数据
    getLeft1Data() {
      // process.env.VUE_APP_BASE_API
      http.get('/jsonApi/v1/left_1.json')
        .then((res) => {
          // console.log('res',res);
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.left1Data = Object.entries(res.data.data)
          this.left1Title = res.data.title
        })
    },
    getLeft2Data() {
      http.get('/jsonApi/v1/left_2.json')
        .then((res) => {
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.left2Data = Object.entries(res.data.data)
          this.left2Title = res.data.title
        })
    },
    getLeft3Data() {
      http.get('/jsonApi/v1/left_3.json')
        .then((res) => {
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.left3Data = Object.entries(res.data.data)
          this.left3Title = res.data.title
        })
    },
    getLeft4Data() {
      http.get('/jsonApi/v1/left_4.json')
        .then((res) => {
          // console.log(res.data);
          this.left4Title = res.data.title
          // 处理数据 得到日期数组，纵向/总数/横向数组
          const keyArr = Object.keys(res.data.data[0])
          const date = res.data.data.map(item => item[keyArr[0]])
          const item1 = res.data.data.map(item => item[keyArr[1]])
          const item2 = res.data.data.map(item => item[keyArr[2]])
          const item3 = res.data.data.map(item => item[keyArr[3]])
          // console.log(keyArr,date,item1,item2,item3);
          const seriesData = []
          seriesData.push({ data: item1, name: keyArr[1], type: 'line' })
          seriesData.push({ data: item2, name: keyArr[2], type: 'line' })
          seriesData.push({ data: item3, name: keyArr[3], type: 'line' })

          let echart = echarts.init(this.$refs.left4Container)
          const option = {
            // title:{
            //   text:this.left4Title,
            //   textStyle:{
            //   color:'#fff'
            //   },
            //   left:'center'
            // },
            color: ['#ea5455', '#f07b3f', '#ffd460'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              top: 30,
              textStyle: {
                color: '#fff'
              },
            },
            xAxis: {
              type: 'category',
              data: date,
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                }
              },
            },
            yAxis: {
              type: 'value',
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                }
              },
            },
            grid: {
              containLabel: true
            },
            series: seriesData
          };
          echart.setOption(option)
        })
    },
    getLeft5Data() {
      http.get('/jsonApi/v1/left_5.json')
        .then((res) => {
          // console.log(res.data);
          this.left5Title = res.data.title
          this.left5Data = res.data.data.map(item => { return { 名称: item.项目名称.substring(0, 30), 统计: item.经费统计.substring(0, 30), } })
          const left5Config = {
            header: ['项目名称', '经费统计'],
            data: this.left5Data,
            evenRowBGC: '#0A2732',
            oddRowBGC: '0A2732',
            headerBGC: 'rgba(61,89,171,0.5)',
            waitTime: 2000
          }
          this.left5Config = left5Config
        })
    },
    getLeft6Data() {
      http.get('/jsonApi/v1/left_6.json')
        .then((res) => {
          this.left6Title = res.data.title
          // 数据格式转换
          const data = res.data.data.map(item => { return { 'name': item.项目类型名称, 'value': item.数量 } })
          console.log('data',data);
          
          // 按值大小排序
          const sortData = data.slice().sort((a, b) => b.value - a.value)
          // 只取前6项作为legend显示
          const sliceData = sortData.slice(0,6)
          let option = {
            // title: {
            //   text: '科研项目类型占比',
            //   left: 'center',
            //   textStyle:{
            //     color:'#fff'
            //   }
            // },
            tooltip: {
              trigger: 'item',
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 10,
              top: 20,
              bottom: 20,
              formatter: function (name) {
                return name.length > 8 ? name.substring(0, 8) + '...' : name;
              },
              textStyle: {
                color: '#fff'
              },
              pageTextStyle: {
                color: '#fff'
              },
              data:sliceData
            },
            series: [
              {
                name: '姓名',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                // minAngle:30,
                minShowLabelAngle: 15,
                data: data,
                label: {
                  formatter: function (params) {
                    // console.log(params);
                    return params.data.name.length > 10 ? params.data.name.substring(0, 10) + '...' : params.data.name;
                  }
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          let echart = echarts.init(this.$refs.left6Container)
          echart.setOption(option)
        })
    },
    getLeft7Data() {
      http.get('/jsonApi/v1/left_7.json')
        .then((res) => {
          // console.log(res.data.data);
          this.left7Title = res.data.title
          const rawData = res.data.data
          const keyArr = Object.keys(rawData[0])
          const yearArr = rawData.map(item => item.year)
          const item1 = rawData.map(item => item[keyArr[1]])
          const item2 = rawData.map(item => item[keyArr[2]])
          const item3 = rawData.map(item => item[keyArr[3]])
          const item4 = rawData.map(item => item[keyArr[4]])
          const items = [item1, item2, item3, item4]
          const seriesData = []
          for (let index = 0; index < keyArr.length - 1; index++) {
            seriesData.push({
              name: keyArr[index + 1],
              type: 'bar',
              data: items[index]
            })
          }
          let option = {
            color: ["#92140C","#ff773d","#f19143","#ffb238"],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              textStyle: {
                color: '#fff'
              }
            },
            // grid: {
            //   left: '3%',
            //   right: '4%',
            //   bottom: '3%',
            //   containLabel: true
            // },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLabel: {
                color: '#fff'
              }
            },
            yAxis: {
              type: 'category',
              data: yearArr,
              axisLabel: {
                color: '#fff'
              }
            },
            series: seriesData
          };
          let echart = echarts.init(this.$refs.left7Container)
          echart.setOption(option)
        })
    },
    getMiddle1Data() {
      http.get('/jsonApi/v1/middle_1.json')
        .then((res) => {
          // console.log('res', res);
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.middle1Data = Object.entries(res.data.data)
          this.middle1Title = res.data.title
        })
    },
    getMiddle3Data() {
      http.get('/jsonApi/v1/middle_3.json')
        .then((res) => {
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.middle3Data = Object.entries(res.data.data)
          this.middle3Title = res.data.title
        })
    },
    getMiddle4Data() {
      http.get('/jsonApi/v1/middle_4.json')
        .then((res) => {
          // console.log('res', res);
          this.middle4Title = res.data.title
          const years = res.data.data.map(item => item.year)
          let keyArr = []
          const seriesData = res.data.data.map(item => {
            // 得到每一serie的values数组
            const valueArr = Object.values(item)
            const name = valueArr.shift()
            keyArr = Object.keys(item)
            return {
              name: name,
              value: valueArr,
            }
          })
          const echarts3 = echarts.init(this.$refs.middle4)
          const option = {
            tooltip: {},
            legend: {
              data: years,
              x: "center",
              y: 'bottom',
              textStyle: {
                color: "#fff"
              }
            },
            color: ['red', 'yellow', 'blue'],
            radar: {
              name: {
                textStyle: {
                  //设置颜色
                  color: '#fff'
                }
              },
              indicator: [// 依次是：专利,"纵向项目","横向项目","获奖","软著","人文社科"
                { name: keyArr[1], max: 300, color: '#fff' },
                { name: keyArr[2], max: 300, color: '#fff' },
                { name: keyArr[3], max: 700, color: '#fff' },
                { name: keyArr[4], max: 100, color: '#fff' },
                { name: keyArr[5], max: 200, color: '#fff' },
                { name: keyArr[6], max: 100, color: '#fff' }
              ],
              center: ['50%', '50%'],
              radius: "58%"
            },
            series: [{
              name: '',
              type: 'radar',
              itemStyle: {
                normal: {
                  splitLine: {
                    lineStyle: {
                    }
                  },
                  label: {
                    show: false,
                    textStyle: {
                    },
                    formatter: function (params) {
                      return params.value;
                    }
                  },
                }
              },
              data: seriesData
            }]
          };
          echarts3.setOption(option)
        })
    },
    getMiddle5Data() {
      const that = this
      http.get('/jsonApi/v1/middle_5.json')
        .then((res) => {
          // console.log(res);
          this.middle5Title = res.data.title
          const rawData = res.data.data
          const chinaDatass = rawData.map(item => {
            return [{
              name:item.受让方所属省份,
              value:item.到账金额
            }]
          })
          // console.log('chinaDatass',chinaDatass);
          // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.flightMap);
      // 经纬度
      var chinaGeoCoordMap = {
        '黑龙江省': [127.9688, 45.368],
        '内蒙古自治区': [110.3467, 41.4899],
        "吉林省": [125.8154, 44.2584],
        '北京市': [116.4551, 40.2539],
        "辽宁省": [123.1238, 42.1216],
        "河北省": [114.4995, 38.1006],
        "天津市": [117.4219, 39.4189],
        "山西省": [112.3352, 37.9413],
        "陕西省": [109.1162, 34.2004],
        "甘肃省": [103.5901, 36.3043],
        "宁夏回族自治区": [106.3586, 38.1775],
        "青海省": [101.4038, 36.8207],
        "新疆维吾尔自治区": [87.9236, 43.5883],
        "西藏自治区": [91.11, 29.97],
        "四川省": [103.9526, 30.7617],
        "重庆市": [108.384366, 30.439702],
        "山东省": [117.1582, 36.8701],
        "河南省": [113.4668, 34.6234],
        "江苏省": [118.8062, 31.9208],
        "安徽省": [117.29, 32.0581],
        "湖北省": [114.3896, 30.6628],
        "浙江省": [119.5313, 29.8773],
        "福建省": [119.4543, 25.9222],
        "江西省": [116.0046, 28.6633],
        "湖南省": [113.0823, 28.2568],
        "贵州省": [106.6992, 26.7682],
        "云南省": [102.9199, 25.4663],
        "广东省": [113.12244, 23.009505],
        "广西省": [108.479, 23.1152],
        "海南省": [110.3893, 19.8516],
        '上海市': [121.4648, 31.2891]
      };
      // 实际动态数据
      // var chinaDatas = [
      //   [{
      //     name: '黑龙江省',
      //     value: 2
      //   }], [{
      //     name: '北京市',
      //     value: 1
      //   }], [{
      //     name: '内蒙古自治区',
      //     value: 0
      //   }], [{
      //     name: '吉林省',
      //     value: 0
      //   }], [{
      //     name: '辽宁省',
      //     value: 0
      //   }], [{
      //     name: '河北省',
      //     value: 0
      //   }], [{
      //     name: '天津市',
      //     value: 0
      //   }], [{
      //     name: '山西',
      //     value: 0
      //   }], [{
      //     name: '陕西',
      //     value: 0
      //   }], [{
      //     name: '甘肃省',
      //     value: 0
      //   }], [{
      //     name: '宁夏回族自治区',
      //     value: 0
      //   }], [{
      //     name: '青海',
      //     value: 0
      //   }], [{
      //     name: '新疆',
      //     value: 0
      //   }], [{
      //     name: '西藏',
      //     value: 0
      //   }], [{
      //     name: '四川省',
      //     value: 0
      //   }], [{
      //     name: '重庆市',
      //     value: 0
      //   }], [{
      //     name: '山东省',
      //     value: 0
      //   }], [{
      //     name: '河南省',
      //     value: 0
      //   }], [{
      //     name: '江苏省',
      //     value: 0
      //   }], [{
      //     name: '安徽省',
      //     value: 0
      //   }], [{
      //     name: '湖北省',
      //     value: 0
      //   }], [{
      //     name: '浙江省',
      //     value: 0
      //   }], [{
      //     name: '福建省',
      //     value: 0
      //   }], [{
      //     name: '江西省',
      //     value: 0
      //   }], [{
      //     name: '湖南省',
      //     value: 0
      //   }], [{
      //     name: '贵州',
      //     value: 0
      //   }], [{
      //     name: '广西',
      //     value: 0
      //   }], [{
      //     name: '海南省',
      //     value: 0
      //   }], [{
      //     name: '上海市',
      //     value: 1
      //   }]
      // ];
      //[ [ {name:黑龙江省,value:0} ],... ] 到时候value是经费
      //变成 
      //[ [ {coord:黑龙江省,value:[经纬度]},{coord:[北京经纬度]} ],... ]
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = chinaGeoCoordMap[dataItem[0].name];
          var toCoord = [116.4551, 40.2539];
          if (fromCoord && toCoord) {
            res.push([{
              coord: toCoord,
            },{
              coord: fromCoord,
              value: dataItem[0].value
            }]);
          }
        }
        return res;
      };
      var series = [];
      // series配置
      [['北京市', chinaDatass]].forEach(function (item, i) {
        // console.log('item',item)
        series.push({
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              color: '#DDD38C',// 飞线颜色
              curveness: .3 //尾迹线条曲直度
            }
          },
          tooltip:{
            formatter: ''
          },
          data: convertData(item[1])
        },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
              period: 5, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: function (params) {//圆环显示文字
                  const baiwei = that.getThousandAndHundredsDigit(params.data.value[2])
                  return baiwei>0? params.data.name : '';
                },
                fontSize: 13
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: function (val) {
              // 得到百位数
              const baiwei = that.getThousandAndHundredsDigit(val[2])
              return 3 + baiwei * 1; //圆环大小
            },
            itemStyle: {
              normal: {
                show: true,
                color: '#59D3DE'//圆环颜色
              }
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
              };
            }),
          },
          //被攻击点
          // {
          //     type: 'scatter',
          //     coordinateSystem: 'geo',
          //     zlevel: 2,
          //     rippleEffect: {
          //         period: 4,
          //         brushType: 'stroke',
          //         scale: 4
          //     },
          //     label: {
          //         normal: {
          //             show: true,
          //             position: 'right',
          //             //offset:[5, 0],
          //             color: 'red',
          //             formatter: '{b}',
          //             textStyle: {
          //                 color: "red"
          //             }
          //         },
          //         emphasis: {
          //             show: true,
          //             color: "#f60"
          //         }
          //     },
          //     symbol: 'pin',
          //     symbolSize: 50,
          //     data: [{
          //         name: item[0],
          //         value: chinaGeoCoordMap[item[0]].concat([10]),
          //     }],
          // }
        );
      });
      let option = {
        tooltip: {
          trigger: 'item',
          // backgroundColor: 'rgba(166, 200, 76, 0.82)',
          borderColor: '#FFFFCC',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          formatter: function (params, ticket, callback) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
            return res;
          }
        },
        // backgroundColor: "#013954",
        // visualMap: { //图例值控制
        //     min: 0,
        //     max: 1,
        //     calculable: true,
        //     show: true,
        //     color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true, //是否允许缩放
          itemStyle: {
            normal: {
              color: 'rgba(51, 69, 89, .5)', //地图背景色
              borderColor: '#516a89', //省市边界线00fcff 516a89
              borderWidth: 1
            },
            emphasis: {
              color: 'rgba(37, 43, 61, .5)' //悬浮背景
            }
          }
        },
        series: series
      };
      myChart.setOption(option)
        })
      
    },
    getMiddle6Data() {
      http.get('/jsonApi/v1/middle_6.json')
        .then((res) => {
          // console.log(res.data);
          this.middle6Title = res.data.title
          // 处理数据 得到日期数组，纵向/总数/横向数组
          const keyArr = Object.keys(res.data.data[0])
          const date = res.data.data.map(item => item[keyArr[0]])
          const item1 = res.data.data.map(item => item[keyArr[1]])
          const item2 = res.data.data.map(item => item[keyArr[2]])
          const item3 = res.data.data.map(item => item[keyArr[3]])
          // console.log(keyArr,date,item1,item2,item3);
          const seriesData = []
          seriesData.push({ data: item1, name: keyArr[1], type: 'line',connectNulls:true,smooth:true })
          seriesData.push({ data: item2, name: keyArr[2], type: 'line' })
          seriesData.push({ data: item3, name: keyArr[3], type: 'line' })

          let echart = echarts.init(this.$refs.middle6Container)
          const option = {
            // title:{
            //   text:this.middle6Title,
            //   textStyle:{
            //   color:'#fff'
            //   },
            //   left:'center'
            // },
            color: ['#ea5455', '#f07b3f', '#ffd460'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              top: 30,
              textStyle: {
                color: '#fff'
              },
            },
            xAxis: {
              type: 'category',
              data: date,
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                }
              },
              // boundaryGap:false
            },
            yAxis: {
              type: 'value',
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                }
              },
            },
            grid: {
              left: '5%',
              right: '5%',
              bottom: '8%',
              containLabel: true
            },
            series: seriesData
          };
          echart.setOption(option)
        })
    },
    getRight1Data() {
      // process.env.VUE_APP_BASE_API
      http.get('/jsonApi/v1/right_1.json')
        .then((res) => {
          // console.log('res',res);
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.right1Data = Object.entries(res.data.data)
          this.right1Title = res.data.title
        })
    },
    getRight2Data() {
      // process.env.VUE_APP_BASE_API
      http.get('/jsonApi/v1/right_2.json')
        .then((res) => {
          // console.log('res',res);
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.right2Data = Object.entries(res.data.data)
          this.right2Title = res.data.title
        })
    },
    getRight3Data() {
      // process.env.VUE_APP_BASE_API
      http.get('/jsonApi/v1/right_3.json')
        .then((res) => {
          // console.log('res',res);
          // 标题和数据
          // 格式形如 [[key1,value1],[key2,value2]...]
          this.right3Data = Object.entries(res.data.data)
          this.right3Title = res.data.title
        })
    },
    getRight4Data() {
      http.get('/jsonApi/v1/right_4.json')
        .then((res) => {
          this.right4Title = res.data.title
          // 处理数据 得到日期数组，纵向/总数/横向数组
          const keyArr = Object.keys(res.data.data[0])
          const date = res.data.data.map(item => item[keyArr[0]])
          const item1 = res.data.data.map(item => item[keyArr[1]])
          const item2 = res.data.data.map(item => item[keyArr[2]])
          const item3 = res.data.data.map(item => item[keyArr[3]])
          // console.log(keyArr,date,item1,item2,item3);
          const seriesData = []
          seriesData.push({ data: item1, name: keyArr[1], type: 'line',connectNulls:true,smooth:true })
          seriesData.push({ data: item2, name: keyArr[2], type: 'line' })
          seriesData.push({ data: item3, name: keyArr[3], type: 'line' })

          let echart = echarts.init(this.$refs.right4Container)
          const option = {
            // title:{
            //   text:this.right4Title,
            //   textStyle:{
            //   color:'#fff'
            //   },
            //   left:'center'
            // },
            color: ['#ea5455', '#f07b3f', '#ffd460'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              top: 30,
              textStyle: {
                color: '#fff'
              },
            },
            xAxis: {
              type: 'category',
              data: date,
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                }
              },
              // boundaryGap:false
            },
            yAxis: {
              type: 'value',
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                }
              },
            },
            grid: {
              left: '5%',
              right: '5%',
              bottom: '8%',
              containLabel: true
            },
            series: seriesData
          };
          echart.setOption(option)
        })
    },
    getRight5Data() {
      http.get('/jsonApi/v1/right_5.json')
        .then((res) => {
          console.log('getRight5Data 数据有问题',res.data);
          this.right5Title = res.data.title
          const rawData = res.data.data
          // console.log(rawData);
          return
          const keyArr = Object.keys(rawData[0])
          const yearArr = rawData.map(item => item.year)
          const item1 = rawData.map(item => item[keyArr[1]])
          const item2 = rawData.map(item => item[keyArr[2]])
          const item3 = rawData.map(item => item[keyArr[3]])
          const item4 = rawData.map(item => item[keyArr[4]])
          const items = [item1, item2, item3, item4]
          const seriesData = []
          for (let index = 0; index < keyArr.length - 1; index++) {
            seriesData.push({
              name: keyArr[index + 1],
              type: 'bar',
              data: items[index]
            })
          }
          let option = {
            color: ["#92140C","#ff773d","#f19143","#ffb238"],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              textStyle: {
                color: '#fff'
              }
            },
            // grid: {
            //   left: '3%',
            //   right: '4%',
            //   bottom: '3%',
            //   containLabel: true
            // },
            xAxis: {
              type: 'category',
              data: yearArr,
              axisLabel: {
                color: '#fff'
              }
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLabel: {
                color: '#fff'
              }
            },
            series: seriesData
          };
          let echart = echarts.init(this.$refs.right5Container)
          echart.setOption(option)
        })
    },
    getRight6Data() {
      http.get('/jsonApi/v1/right_6.json')
        .then((res) => {
          // console.log('getRight6Data',res.data);
          const entries = Object.entries(res.data.data)
          const data1 = entries.map(item => { return { 'name': item[0], 'value': item[1] } })
          console.log('data1',data1);
          this.right6Title = res.data.title
          let option = {
            // title: {
            //   text: '科研项目类型占比',
            //   left: 'center',
            //   textStyle:{
            //     color:'#fff'
            //   }
            // },
            tooltip: {
              trigger: 'item',
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 30,
              top: 20,
              bottom: 20,
              formatter: function (name) {
                return name.length > 8 ? name.substring(0, 8) + '...' : name;
              },
              textStyle: {
                color: '#fff'
              },
              pageTextStyle: {
                color: '#fff'
              }
            },
            series: [
              {
                // name: '姓名',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                // minAngle:30,
                minShowLabelAngle: 15,
                data: data1,
                label: {
                  formatter: function (params) {
                    // console.log(params);
                    return params.data.name.length > 10 ? params.data.name.substring(0, 10) + '...' : params.data.name;
                  }
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          let echart = echarts.init(this.$refs.right6Container)
          echart.setOption(option)
        })
    },
    getRight7Data() {
      http.get('/jsonApi/v1/right_7.json')
        .then((res) => {
          console.log('getRight7Data',res.data);
          this.right7Title = res.data.title
          this.right7Data = res.data.data.map(item => { return { 名称: item.刊物名称.substring(0, 30), 统计: item.发表数量, } })
          const right7Config = {
            header: ['刊物名称', '发表数量'],
            data: this.right7Data,
            evenRowBGC: '#0A2732',
            oddRowBGC: '0A2732',
            headerBGC: 'rgba(61,89,171,0.5)',
            waitTime: 2000
          }
          this.right7Config = right7Config
        })
    },
    getScale() {
      // 固定好16：9的宽高比，计算出最合适的缩放比
      const { width, height } = this;
      const wh = window.innerHeight / height;
      const ww = window.innerWidth / width;
      console.log('缩放比', ww < wh ? ww : wh);
      return ww < wh ? ww : wh;
    },
    setScale() {
      // 获取到缩放比例，设置它
      this.scale = this.getScale();
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
      }
    },
    debounce(fn, delay) {
      const delays = delay || 500;
      let timer;
      return function () {
        const th = this;
        const args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    },
    getThousandAndHundredsDigit(number) {
  

  // 如果数字小于100，返回0
  if (number < 100) {
    return 0;
  }

  // 获取千位和百位
  const thousandAndHundreds = Math.floor((number % 10000) / 100);

  return thousandAndHundreds;
},
    oldEchartsInit() {
      // 宏观分析 6个折线图
      // hongguanfenxi json
      this.date = hongguanfenxi.date
      this.rate = hongguanfenxi.rate
      this.macro = hongguanfenxi.macro
      this.montary = hongguanfenxi.montary
      this.income = hongguanfenxi.income
      this.investment = hongguanfenxi.investment
      this.loan = hongguanfenxi.loan
      this.lever = hongguanfenxi.lever
      this.other = hongguanfenxi.other
      this.whole.push(this.rate)
      this.whole.push(this.montary)
      this.whole.push(this.lever)
      // this.whole.push(this.loan)
      this.whole.push(this.macro)
      this.whole.push(this.income)
      this.whole.push(this.investment)
      this.whole.push(this.other)

      for (let i = 0; i < 6; i++) {
        // let chartContainer = 'chartContainer' + i
        let echart = echarts.init(this.$refs.chartContainer[i])
        const option1 = {
          title: {
            text: this.title[i],
            textStyle: {
              color: '#fff'
            },
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 30,
            textStyle: {
              color: '#fff'
            },
          },
          xAxis: {
            type: 'category',
            data: this.date,
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: "#fff",
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: "#fff",
              }
            },
          },
          grid: {
            containLabel: true
          },
          series: this.whole[i]
        };
        echart.setOption(option1)
      }

      // 轮播图
      // lunbo json
      const nearestWeekday = this.getNearestWeekday()
      // console.log('nearestWeekday',nearestWeekday);

      const formatData = lunbo.data.map(item => {
        item.监测时间 = nearestWeekday + item.监测时间.substring(10)
        return [item.监测时间, item.名称, item.异常关联类型]
      })
      const config22 = {
        header: ['监测时间', '名称', '异常关联类型'],
        data: formatData,
        // headerBGC:'black',
        evenRowBGC: '#0A2732',
        oddRowBGC: '0A2732',
      }
      // console.log('formatData',formatData);
      this.config22 = config22

      // 健康指数 雷达图
      let radarData = [
        {
          value: [82.44588614888224, 25, 54.00000000000001, 58.56999999999999, 20, 65, 5],
          name: '纳尔实业'
        },
        {
          value: [50.033, 45, 58.8, 62.73, 10, 65, 50],
          name: '平安保险'
        },
        {
          value: [43.064, 50, 53.6, 64.23, 10, 75, 50],
          name: '招商银行'
        }]
      // console.log('radarData', radarData);
      const echarts3 = echarts.init(this.$refs.echarts_3)
      const option = {
        tooltip: {},
        legend: {
          data: ['纳尔实业', '平安保险', '招商银行'],
          x: "center",
          y: 'bottom',
          textStyle: {
            color: "#fff"
          }
        },
        color: ['red', 'yellow', 'blue'],
        radar: {
          name: {
            textStyle: {
              //设置颜色
              color: '#fff'
            }
          },
          indicator: [
            { name: '投资关系', max: 100, color: '#fff' },
            { name: '操盘模式', max: 100, color: '#fff' },
            { name: '财务状态', max: 100, color: '#fff' },
            { name: '运行状态', max: 100, color: '#fff' },
            { name: '规模扩张', max: 100, color: '#fff' },
            { name: '声誉风险', max: 100, color: '#fff' },
            { name: '外部环境', max: 100, color: '#fff' }
          ],
          center: ['50%', '50%'],
          radius: "58%"
        },
        series: [{
          name: '',
          type: 'radar',
          itemStyle: {
            normal: {
              splitLine: {
                lineStyle: {
                }
              },
              label: {
                show: false,
                textStyle: {
                },
                formatter: function (params) {
                  return params.value;
                }
              },
            }
          },
          data: radarData
        }]
      };
      echarts3.setOption(option)

      // 行业预警排行
      const echarts2 = echarts.init(this.$refs.echarts_2)
      // hangyeyujing json
      let xData = [], yData = []
      let tmp = hangyeyujing
      for (let key in tmp) {
        if (key.length < 16) {
          xData.push(tmp[key])
          yData.push(key)
        }
      }
      const option_2 = {
        grid: {
          left: '34%',//离左边远一点
          right: '4%',
          bottom: '15%',
          top: '5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: yData,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
        },
        series: [
          {
            // color:'#6d7d87',
            type: 'bar',
            data: xData
          },
        ]
      }
      echarts2.setOption(option_2)
      this.$refs.dimension.getData()
      // 第三屏中间
      this.$refs.marketRisk.getData()
    },
  },
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

body,
input,
button,
a,
textarea,
select {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

}

div {
  box-sizing: border-box;
}

ul li {
  list-style: none;
}

.ScaleBox {
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;
}

.bg {
  padding: 0;
  background: url('./assets/pageBg.png') center center;
}

.container {
  color: aliceblue;

  // width: 5760px;
  // height: 1080px;
  // background-color: #18478F;
  // animation: rotateIn; /* referring directly to the animation's @keyframe declaration */
  // animation-duration: 3s; /* don't forget to set a duration! */
  >.header {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100px; //


    .header-left,
    .header-right {
      flex: 0 1 20%;

      .el-button {
        border: none;
        transform: skewX(45deg);
        width: 180px;
        height: 50px;
        margin-left: 30px;
      }

      .el-button--primary {
        background-color: rgba(0, 102, 172, 0.4);
        border-color: #0066AC;
      }

      .el-button--primary:focus {
        background-color: #BDA158;
      }
    }

    .header-title {
      flex: 0 1 32%
    }
  }

  .main {
    width: 100%;
    height: 980px; //
    display: flex;
    justify-content: space-evenly;

    .box {
      flex: 0 1 32%;
      height: 940px; //
      // background-color: #0C2B61;

      .box-header {
        // background-color: #18478F;
        font-size: 30px;
        text-align: center;
        height: 40px; //
        line-height: 40px;
        border: 1px solid rgb(40, 110, 216);

        span {
          float: left;
          width: 0;
          height: 0;
          // border-top: 30px solid #1596ca;
          // border-right: 30px solid transparent;
        }
      }

      .box-body {
        height: 850px; //

        .charts-row {
          display: flex;

          .chart-container {
            width: 50%;
            padding-right: 40px;
          }

          .chart-title {
            text-align: left;
            height: 10%; //
            padding-top: 8px;

            .icon {
              width: 15px;
              height: 15px;
              padding-left: 8px;
            }
          }

          .chart {
            height: 90%; //
          }
        }

        .el-tabs__content {
          height: 100%;
          padding: 0;
        }

        .el-tabs--border-card {
          background-color: transparent !important;
          border: transparent !important;
        }

        .el-tabs__header {
          background-color: transparent !important;
          border-bottom: transparent !important;
        }

        .el-tabs__item.is-active {
          background-color: transparent !important;
          border-right-color: transparent !important;
          border-left-color: transparent !important;
        }
      }

      .box-footer {
        height: 30px;
        position: relative;

        span {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 0;
          height: 0;
          border-bottom: 25px solid #1596ca;
          border-left: 25px solid transparent;
        }
      }
    }
  }
}
</style>
<style scoped>
::v-deep .dv-scroll-board .ceil {
  width: 50%;
}

::v-deep .dv-scroll-board .header-item {
  width: 50%;
}
</style>