<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:120px;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: 40px;">
                  <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:120px;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: 40px;">
                  <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:120px;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: 40px;">
                  <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;">
            <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">项目统计</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>
            <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">科研项目类型占比</h3>
                <div ref="left6Container" style="height:90%;width:100%"></div>
              </dv-border-box-13>
            </div>
            <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>
          板块2
        </div>
        <!-- 内容 -->
        <div class="box-body">
          <div class="charts-row">
            <!-- 第一行 一列 课程概览 -->
            <div style="flex:0 1 25%">
              <!-- <dv-border-box-13 style="width:100%;height:200px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5>
                    <h1 style="color: rgba(255,215,0);">48</h1>
                  </dv-decoration-9>
                  <dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5>
                    <h1 style="color: rgba(255,215,0);">38</h1>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <span style="padding-right: 50px;">节点类型总数</span>
                  <span style="padding-left: 50px;">边类型总数</span>
                </div>
              </dv-border-box-13> -->
              <!-- <RadarChart /> -->
            </div>
            <!-- 二列 关系图谱 -->
            <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%">
              <dv-border-box-13 style="width:100%;height:200px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">图谱统计</h3>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <dv-decoration-9 style="width:123px;height:123px;margin-right:30px;" dur=5>
                    <h2 style="color: rgba(255,215,0);">606041</h2>
                  </dv-decoration-9>
                  <dv-decoration-9 style="width:123px;height:123px;margin-left: 30px;" dur=5>
                    <h2 style="color: rgba(255,215,0);">1694475</h2>
                  </dv-decoration-9>
                </div>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <span style="padding-right: 60px;">节点总数</span>
                  <span style="padding-left: 55px;">边总数</span>
                </div>
              </dv-border-box-13>

              <dv-border-box-13 style="width:100%;height:400px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
                <Map />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第二行 -->
          <div class="charts-row" style="">
            <div style="flex:0 1 25%">
              <!-- <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">舆情预警</h3>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <dv-scroll-board :config="config11"
                    style="width:95%;height:220px;justify-content: center;align-items: center" />
                </div>
              </dv-border-box-13> -->
            </div>

            <div style="flex:0 1 50%">
              <!-- <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">系统性风险指数</h3>
                <LineChart />
              </dv-border-box-13> -->
            </div>

            <div style="flex:0 1 25%">
              <!-- <dv-border-box-13 style="width:100%;height:300px;">
                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <dv-scroll-board :config="config22" style="width:95%;height:220px;" />
                </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="">
            <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">类型统计</h3>
                <dimension-component :zoom="datazoom" ref="dimension" /> -->
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第二行 -->
          <div class="charts-row" style="">
            <div style="flex:0 1 100%">
              <dv-border-box-13 style="width:100%;height:300px;padding-top: 4px">
                <!-- <el-tabs type="border-card" style='height: 90%;' @tab-click="handleClick">

                  <el-tab-pane label="个体风险状态" :lazy='true' style="height: 100%;">
                    <market-risk-component :zoom="datazoom" :title="'个体风险状态'" ref="marketRisk" />
                  </el-tab-pane>

                  <el-tab-pane label="风险关联与溢出" :lazy='true' style="height: 100%;">
                    <market-risk-component1 :zoom="datazoom" :title="'风险关联与溢出'" ref="marketRisk" />
                  </el-tab-pane>
                  <el-tab-pane label="市场系统结构" :lazy='true' style="height: 100%;">
                    <market-risk-component1 :zoom="datazoom" :title="'市场系统结构'" ref="marketRisk" />
                  </el-tab-pane>
                  <el-tab-pane label="市场波动和趋势" :lazy='true' style="height: 100%;">
                    <market-risk-component1 :zoom="datazoom" :title="'市场波动和趋势'" ref="marketRisk" />
                  </el-tab-pane>
                </el-tabs> -->
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第三行 -->
          <div class="charts-row" style="">
            <div style="flex:0 1 33.33%" v-for="item in 3" :key="item">
              <dv-border-box-13 style="width:100%;height:300px;">
                <!-- <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
                <div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></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 } 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:{ 
        header: ['项目名称&nbsp', '经费统计'],
        data: [
          ],
        evenRowBGC:'#0A2732',
        oddRowBGC:'0A2732',
        headerBGC:'rgba(61,89,171,0.5)',
        align: ['right'],
      },
      left7Title:'',
      compName: 'systemRiskComponent',
      datazoom: [],
      scale: 0,
      width: 5760,
      height: 1080,
      // 表格设置
      config11: {
        header: ['主体代码&nbsp', '行业', '&nbsp&nbsp&nbsp预警时刻', '&nbsp&nbsp风险水平', '风险类型&nbsp'],
        data: [
          {
            主体代码: '688001.SH',
            行业: '计算机',
            预警时刻: '2023/6/29 16:00',
            风险水平: '严重',
            风险类型: '流动风险',
          },
          {
            主体代码: '688002.SH',
            行业: '计算机',
            当前预警时刻: '2023/6/29 16:00',
            预警类型: '严重',
            风险类型: '市场风险',
          },
          {
            主体代码: '688002.SH',
            行业: '计算机',
            当前预警时刻: '2023/6/29 16:00',
            预警类型: '严重',
            风险类型: '市场风险',
          },
          {
            主体代码: '688002.SH',
            行业: '计算机',
            当前预警时刻: '2023/6/29 16:00',
            预警类型: '严重',
            风险类型: '市场风险',
          },
          {
            主体代码: '688002.SH',
            行业: '计算机',
            当前预警时刻: '2023/6/29 16:00',
            预警类型: '严重',
            风险类型: '市场风险',
          },
        ],
        evenRowBGC: '#0A2732',
        oddRowBGC: '0A2732',
        headerBGC: 'rgba(61,89,171,0.5)',
        align: ['right'],
      },
      config22:
      {
        data: [
          ['教育', 7],
          ['金融业', 1],
          ['房地产业', 2],
          ['制造业', 3],
          ['房地产业', 4],
          ['批发和零售业', 5],

        ],
        evenRowBGC: '#0A2732',
        oddRowBGC: '0A2732',
      },
      items: [
        {
          name: '股权质押',
          value: 683
        },
        {
          name: '转让股价',
          value: 234
        },
        {
          name: '股份增持',
          value: 240
        },
        {
          name: '债券发行',
          value: 523
        },
        {
          name: '高管变动',
          value: 345
        },
        {
          name: '产品发布',
          value: 320
        },
        {
          name: '破产',
          value: 280
        },
        {
          name: '业绩下滑',
          value: 271
        },
      ],
      date: [],
      rate: [],
      macro: [],
      montary: [],
      income: [],
      investment: [],
      loan: [],
      lever: [],
      other: [],
      whole: [],
      title: ['利率', '货币', '整体杠杆', '宏观指标', '收入和融资', '银行理财', '其他']
    }
  },
  created() {
    this.getLeft1Data()
    this.getLeft2Data()
    this.getLeft3Data()
    this.getLeft4Data()
  },
  mounted() {
    // 大屏自适应部分
    // this.setScale();
    // window.removeEventListener("resize", this.debounce(this.setScale))
    // window.addEventListener("resize", this.debounce(this.setScale));
    this.getLeft5Data()
    this.getLeft6Data()
    this.getLeft7Data()
    
  },
  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() {
      // process.env.VUE_APP_BASE_API
      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() {
      // process.env.VUE_APP_BASE_API
      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() {
      // process.env.VUE_APP_BASE_API
      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() {
      // process.env.VUE_APP_BASE_API
      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:2000000
        }
        this.left5Config = left5Config
      })
    },
    getLeft6Data(){
      http.get('/jsonApi/v1/left_6.json')
      .then((res) => {
        console.log(res.data.data.length);
        const data = res.data.data.map(item => { return {'name':item.项目类型名称, 'value':item.数量}})
        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'
            }
          },
          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 = {
          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)
      })
    },
    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);
      };
    },
    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;
        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>