<template>
  <div class="app-container">
    <div class="headTitle">河南电器大数据中心</div>
    <div class="exit" @click="exitFun"></div>
    <div class="title" v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
      {{ i }}
    </div>
    <div class="time" id="time">{{ time }}</div>
    <div class="date" id="date">{{ date }}</div>
    <div class="logo"></div>
    <!--    <div class="info1">订单数：10 完成数量：10 完成率：100%</div>-->

    <div class="chart1">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <Chart ref="chart2"></Chart>
    </div>
    <div class="chart3">
      <Chart ref="chart3"></Chart>
    </div>
    <div class="chart4">
      <Chart ref="chart4"></Chart>
    </div>
    <div class="chart5">
      <Chart ref="chart5"></Chart>
    </div>
    <div class="chart6">
      <Chart ref="chart6"></Chart>
    </div>
    <div class="chart7">
      <Chart ref="chart7"></Chart>
    </div>
    <div class="chart8">
      <Chart ref="chart8"></Chart>
    </div>
    <div class="chart9">
      <Chart ref="chart9"></Chart>
    </div>
    <div class="chart10_1">
      <Chart ref="chart10_1"></Chart>
    </div>
    <div class="chart10_2">
      <Chart ref="chart10_2"></Chart>
    </div>
    <div class="chart10_3">
      <Chart ref="chart10_3"></Chart>
    </div>
    <div class="chart11">
      <Chart ref="chart11"></Chart>
    </div>
    <div class="chart12">
      <Chart ref="chart12"></Chart>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/board/Chart";
import chinaMap from "@/views/model/china2.json";
import * as echarts from "echarts";

let getDateIntervalFun = null
let time1 = () => {
}
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: "Liner",
  components: {
    Chart
  },
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      chartData: [...(chinaMap.features.map(e => {
        return {
          name: e.properties.name,
          value: Math.random() * 200
        }
      })), {
        name: '南海诸岛',
        value: Math.random() * 200
      }],
      title: [
        '三日清单',
        '产品发布',
        '场景升级',
        '重点工序监控',
        '订单履约率（周）',
        '产品分布',
        '用户评价',
        '质量分析',
        '产量统计',
        '设备分析',
        '数字化安全',
        '当年市场不良率',
      ],
      titlePosition: [
        {
          top: 11.6,
          left: 5.5
        },
        {
          top: 11.6,
          left: 29
        },
        {
          top: 11.6,
          left: 52.7
        },
        {
          top: 11.6,
          left: 76.4
        },
        {
          top: 40.9,
          left: 5.5
        },
        {
          top: 40.9,
          left: 29
        },
        {
          top: 40.9,
          left: 52.7
        },
        {
          top: 40.9,
          left: 76.4
        },
        {
          top: 70.4,
          left: 5.5
        },
        {
          top: 70.4,
          left: 29
        },
        {
          top: 70.4,
          left: 52.7
        },
        {
          top: 70.4,
          left: 76.4
        },
      ],
      time: '',
      date: ''
    }
  },
  created() {
    const getDate = () => {
      let date = new Date()
      let YYYY = date.getFullYear()
      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
      this.date = `${YYYY} - ${MM} - ${dd}`
      this.time = `${HH} : ${mm} : ${ss}`
    }
    getDate()
    getDateIntervalFun = setInterval(getDate, 1000)
  },
  mounted() {
    let points = [
      {value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
      {value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
      {value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
      {value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
      {value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
      {value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
      {value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
      {value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
      {value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
      {value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
      {value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
      {value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
      {value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
      {value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
      {value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
      {value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
      {value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
      {value: [115.179594, 34.647758]},
    ];

    let option = {

      geo: {
        map: "china",
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        roam: false,
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "#09132c", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#274d68", // 100% 处的颜色
                },
              ],
              globalCoord: true, // 缺省为 false
            },
            shadowColor: "rgb(58,115,192)",
            shadowOffsetX: 2,
            shadowOffsetY: 2.3,
          },
          emphasis: {
            areaColor: "#2AB8FF",
            borderWidth: 0,
            color: "green",
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0, 10, 52, 1)",

              borderColor: "rgba(0, 10, 52, 1)",
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                },
              },
            },
          },
        ],
      },
      series: [
        {
          type: "map",
          roam: false,
          label: {
            normal: {
              show: false,
            },
          },

          itemStyle: {
            normal: {
              borderColor: "rgb(147, 235, 248)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
            emphasis: {
              areaColor: "rgb(46,229,206)",
              //    shadowColor: 'rgb(12,25,50)',
              borderWidth: 0.1,
            },
          },
          zoom: 1.1,
          //     roam: false,
          map: "china", //使用
          // data: this.difficultData //热力图数据   不同区域 不同的底色
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          showEffectOn: "render",
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: "fill",
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: "#1DE9B6",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "#1DE9B6",
              shadowBlur: 10,
              shadowColor: "#333",
            },
          },
          symbolSize: 2,
          data: points,
        },
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 2, //箭头指向速度，值越小速度越快
            trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              color: "#1DE9B6",
              width: 1, //线条宽度
              opacity: 0.1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: [
            {
              coords: [
                [115.179594, 34.647758],
                [118.8062, 31.9208],
              ],
              lineStyle: {color: "#4ab2e5"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [127.9688, 45.368],
              ],
              lineStyle: {color: "#4fb6d2"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [110.3467, 41.4899],
              ],
              lineStyle: {color: "#52b9c7"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [125.8154, 44.2584],
              ],
              lineStyle: {color: "#5abead"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [116.4551, 40.2539],
              ],
              lineStyle: {color: "#f34e2b"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [123.1238, 42.1216],
              ],
              lineStyle: {color: "#f56321"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [114.4995, 38.1006],
              ],
              lineStyle: {color: "#f56f1c"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [117.4219, 39.4189],
              ],
              lineStyle: {color: "#f58414"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [112.3352, 37.9413],
              ],
              lineStyle: {color: "#f58f0e"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [109.1162, 34.2004],
              ],
              lineStyle: {color: "#f5a305"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [103.5901, 36.3043],
              ],
              lineStyle: {color: "#e7ab0b"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [106.3586, 38.1775],
              ],
              lineStyle: {color: "#dfae10"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [101.4038, 36.8207],
              ],
              lineStyle: {color: "#d5b314"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [103.9526, 30.7617],
              ],
              lineStyle: {color: "#c1bb1f"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [108.384366, 30.439702],
              ],
              lineStyle: {color: "#b9be23"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [113.0823, 28.2568],
              ],
              lineStyle: {color: "#a6c62c"},
            },
            {
              coords: [
                [115.179594, 34.647758],
                [102.9199, 25.46639],
              ],
              lineStyle: {color: "#96cc34"},
            },
          ],
        },
      ],
    };

    let plantCap = [
      {
        name: "外观时尚",
        value: "222",
      },
      {
        name: "低碳环保",
        value: "115",
      },
      {
        name: "高端智能",
        value: "113",
      },
      {
        name: "老品牌",
        value: "95",
      },
    ];

    let datalist = [
      {
        offset: [56, 48],
        symbolSize: 120,
        opacity: 0.95,
        color: "#f467ce",
      },
      {
        offset: [35, 80],
        symbolSize: 95,
        opacity: 0.88,
        color: "#7aabe2",
      },
      {
        offset: [20, 43],
        symbolSize: 90,
        opacity: 0.84,
        color: "#ff7123",
      },
      {
        offset: [83, 30],
        symbolSize: 90,
        opacity: 0.8,
        color: "#ffc400",
      },
      {
        offset: [36, 20],
        symbolSize: 65,
        opacity: 0.75,
        color: "#5e333f",
      },
      {
        offset: [64, 10],
        symbolSize: 70,
        opacity: 0.7,
        color: "#6b3442",
      },
      {
        offset: [75, 75],
        symbolSize: 60,
        opacity: 0.68,
        color: "#8a3647",
      },
      {
        offset: [88, 62],
        symbolSize: 50,
        opacity: 0.6,
        color: "#68333f",
      },
    ];
    let datas = [];
    for (var i = 0; i < plantCap.length; i++) {
      var item = plantCap[i];
      var itemToStyle = datalist[i];
      datas.push({
        name: item.value + "\n" + item.name,
        value: itemToStyle.offset,
        symbolSize: itemToStyle.symbolSize,
        label: {
          normal: {
            textStyle: {
              fontSize: 11,
            },
          },
        },
        itemStyle: {
          normal: {
            color: itemToStyle.color,
            opacity: itemToStyle.opacity,
          },
        },
      });
    }

    echarts.registerMap('china', chinaMap);
    this.$refs.chart1 && this.$refs.chart1.setData(this.chart1Option());
    this.$refs.chart4.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "5%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "2%",
        textStyle: {
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            interval: 0,
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["预装检漏", "发泡质检", "电检", "低压捡漏", "高压捡漏", "制冷性能"],
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: "value",
          min: 90,
          max: 100,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "质检数量",
          type: "bar",
          barWidth: 20,
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              color: '#72b3fe'
            },
          },
          data: [200, 382, 102, 267, 186, 315],
        },
        {
          name: "合格率",
          type: "line",
          yAxisIndex: 1,
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#ecf3ff", // 线条颜色
            },
            borderColor: "#6d88bf",
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
        },
      ],
    })
    this.$refs.chart5.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "5%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "2%",
        textStyle: {
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: "value",
          min: 90,
          max: 100,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "产量",
          type: "bar",
          barWidth: 20,
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              color: '#9fe080'
            },
          },
          data: [200, 382, 102, 267, 186, 315, 316],
        },
        {
          name: "订单履约率",
          type: "line",
          yAxisIndex: 1,
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#ecf3ff", // 线条颜色
            },
            borderColor: "#6d88bf",
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
        },
      ],
    })
    this.$refs.chart6.setData(option)
    this.$refs.chart7.setData({
      grid: {
        show: false,
        top: 10,
        bottom: 10,
      },
      xAxis: [
        {
          gridIndex: 0,
          type: "value",
          show: false,
          min: 0,
          max: 100,
          nameLocation: "middle",
          nameGap: 5,
        },
      ],
      yAxis: [
        {
          gridIndex: 0,
          min: 0,
          show: false,
          max: 100,
          nameLocation: "middle",
          nameGap: 30,
        },
      ],
      series: [
        {
          type: "scatter",
          symbol: "circle",
          symbolSize: 120,
          label: {
            normal: {
              show: true,
              formatter: "{b}",
              color: "#fff",
              textStyle: {
                fontSize: "20",
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#00acea",
            },
          },
          data: datas,
        },
      ],
    })
    this.$refs.chart8.setData({
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
      },
      polar: {},
      angleAxis: {
        interval: 1,
        type: "category",
        data: [],
        z: 10,
        axisLine: {
          show: false,
          lineStyle: {
            color: "#0B4A6B",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          interval: 0,
          show: true,
          color: "#0B4A6B00",
          margin: 8,
          fontSize: 16,
        },
      },
      radiusAxis: {
        min: 40,
        max: 120,
        interval: 20,
        axisLine: {
          show: false,
          lineStyle: {
            color: "#0B3E5E",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          formatter: "{value} %",
          show: false,
          padding: [0, 0, 20, 0],
          color: "#0B3E5E",
          fontSize: 16,
        },
        splitLine: {
          lineStyle: {
            color: "#0B3E5E00",
            width: 2,
            type: "solid",
          },
        },
      },
      calculable: true,
      series: [
        {
          stack: "a",
          type: "pie",
          radius: ["0%", "80%"],
          roseType: "area",
          zlevel: 10,
          label: {
            normal: {
              show: true,
              formatter: "{b}\n{c}",
              textStyle: {
                fontSize: 12,
                color: '#fff'
              },
              position: "outside",
            },
            emphasis: {
              show: true,
            },
          },
          labelLine: {
            normal: {
              show: true,
              length: 20,
              length2: 55,
            },
            emphasis: {
              show: false,
            },
          },
          data: [
            {
              value: 10,
              name: "问题1",
            },
            {
              value: 5,
              name: "问题2",
            },
            {
              value: 15,
              name: "问题3",
            },
            {
              value: 25,
              name: "问题4",
            },
            {
              value: 20,
              name: "问题5",
            },
            {
              value: 35,
              name: "问题6",
            },
          ],
        },
      ],
    })
    this.$refs.chart9.setData({
      tooltip: {
        textStyle: {
          fontSize: 0.8 * vw
        }
      },
      grid: {
        top: "10%",
        left: "1%",
        right: "1%",
        bottom: "1%",
        containLabel: true,
      },
      xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLine: {
          lineStyle: {
            color: "#0177d4",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 0.8 * vw,
          interval: 0,
        },
      },
      yAxis: {
        nameTextStyle: {
          color: "#fff",
          fontSize: 0.8 * vw,
        },
        axisLine: {
          lineStyle: {
            color: "#0177d4",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 0.8 * vw,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#0177d4",
          },
        },
      },
      series: [
        {
          type: "bar",
          barWidth: '60%',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 0.6 * vw,
              color: '#fff'
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#00b0ff",
                  },
                  {
                    offset: 0.8,
                    color: "#7052f4",
                  },
                ],
                false
              ),
            },
          },
          data: [8888, 6225, 9532, 7842, 7891, 7823, 6784, 8642, 8641, 7893, 5611, 6784,],
        },
      ],
    })
    this.$refs.chart10_1.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#ff8c37",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 66,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#ff8c37",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.9 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|在网数量}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#ff8c37",
                  shadowColor: "#ff8c37",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 0,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.chart10_2.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#389af4",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 99,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#389af4",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.9 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "kw·h}" +
                      "\n{b|单台能耗}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#389af4",
                  shadowColor: "#389af4",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 0,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.chart10_3.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#ffc257",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 16,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#ffc257",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.9 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|产线OEE}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#ffc257",
                  shadowColor: "#ffc257",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 0,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.chart11.setData({
      grid: {
        top: "20%",
        left: "1%",
        right: "5%",
        bottom: "1%",
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        right: '0',
        data: ['隐患数', '闭环数'],
        textStyle: {
          fontSize: 0.75 * vw,
          color: "#F1F1F3",
        },
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          axisLabel: {
            rotate: -20,
            margin: 20,
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        }
      ],
      yAxis: [
        {
          axisLabel: {
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '隐患数',
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series'
          },
          barWidth: '40%',
          barMaxWidth: '50px',
          itemStyle: {
            //图形样式
            normal: {
              color: true ? '#db8151' : "#64BCEC",
            },
          },
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.6 * vw
            },
          },
          data: [64, 26, 24, 73, 26, 83, 64, 73, 56, 72, 27, 73],
        },
        {
          name: '闭环数',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          barWidth: '40%',
          barMaxWidth: '50px',
          barGap: '40%',
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.6 * vw
            },
          },
          itemStyle: {
            //图形样式
            normal: {
              color: true ? '#9ce375' : "#4FD3B9",
            },
          },
          data: [63, 24, 22, 73, 26, 80, 63, 71, 55, 72, 26, 70],
        },
      ]
    })
    this.$refs.chart12.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "1%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "3%",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
              fontSize: 0.4 * vw,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
      ],
      yAxis: [
        {
          name: '不良率',
          type: "value",
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              color: "#d1e6eb",
            },
            fontSize: 0.4 * vw,
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "当年市场不良率",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#e8f1ff", // 线条颜色
            },
            borderColor: "#28ffb3",
          },
          label: {
            show: true,
            position: "bottom",
            fontSize: 0.4 * vw,
            textStyle: {
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
        },
        {
          name: "目标市场不良率",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#4268aa", // 线条颜色
            },
            borderColor: "#ecf3ff",
          },
          label: {
            show: true,
            position: "top",
            fontSize: 0.4 * vw,
            textStyle: {
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
        },
      ],
    })
  },
  methods: {
    exitFun() {
      this.exit()
    },
    chart1Option(data, id) {
      clearInterval(time1)
      if (!data) {
        data = {
          yNameOne: ["订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001"],
          yData: [41, 99, 41, 99, 32, 41, 24, 4, 16, 64, 18],
          xDataName: "达成率",
          status: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
        }
      }
      let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
      let bgBar = []
      data.yData.forEach(() => {
        bgBar.push(100)
      })
      let option = {
        grid: {
          // left: "-10%",
          left: "0%",
          right: "8%",
          bottom: "0%",
          top: "0%",
          containLabel: true,
        },
        dataZoom: [],
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: data.yNameOne,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              // margin:150,
              fontSize: 0.75 * vw,
              textStyle: {
                textAlign: 'center'
              },
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data.yData,
            barWidth: '80%',
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  return myColor[data.status[params.dataIndex]];
                },
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 0,
            barGap: "-100%",
            data: bgBar,
            barWidth: '80%',
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 0.75 * vw
              },
              formatter: function (val, index, e) {
                return data.yData[val.dataIndex] + '%'
              }
            },
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 1,
                barBorderRadius: 15,
              },
            },
          },
        ],
      };

      if (data.yNameOne.length > 8) {
        option.dataZoom.push({
          show: false,
          type: 'slider',
          bottom: '0%',
          yAxisIndex: 0,
          height: 12,
          start: 0,
          end: 1 / (data.yNameOne.length / 9) * 100,
          textStyle: {
            fontSize: 0,
            color: 'rgba(0,0,0,0)'
          }
        })

        let step = 1 / (data.yNameOne.length / 9) * 100
        time1 = setInterval(() => {
          option.dataZoom[0].end += step
          option.dataZoom[0].start += step
          if (option.dataZoom[0].start >= 100) {
            option.dataZoom[0].start = 0
            option.dataZoom[0].end = step
          }
          if (option.dataZoom[0].end >= 100) {
            option.dataZoom[0].end = 100
            option.dataZoom[0].start = option.dataZoom[0].end - step
          }
          this.$refs.chart1 && this.$refs.chart1.setData(option);
        }, 6000)
        // time()
      }
      return option
    }
  },
  beforeDestroy() {
    getDateIntervalFun = null
  }
}
</script>
<style lang="less" scoped>
.app-container {
  background-image: url("~@/assets/model/dataCentre/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
  font-family: "微软雅黑", serif;
}

.time, .date {
  position: absolute;
  font-size: 0.8vw;
  color: #fcfcfc;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.time {
  top: 3.2%;
  left: 85.8%;
}

.date {
  top: 3.2%;
  left: 94.1%;
}

.info1 {
  position: absolute;
  top: 11.4%;
  left: 14.6%;
  transform: translateY(-50%);
  font-size: 0.9vw;
  color: #fff
}

.logo {
  background-image: url("../../assets/board/logo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 6vw;
  height: 2.3vw;
  position: absolute;
  top: 1%;
  left: 1%;
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}

.chart1 {
  position: absolute;
  top: 14.5%;
  left: 3.4%;
  width: 22.3%;
  height: 21.7%;
}

.chart2 {
  background-image: url("../../assets/model/dataCentre/imgSlide1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 14.5%;
  left: 27%;
  width: 22.3%;
  height: 21.7%;
}

.chart3 {
  background-image: url("../../assets/model/dataCentre/imgSlide2.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 14.5%;
  left: 50.7%;
  width: 22.3%;
  height: 21.7%;
}

.chart4 {
  position: absolute;
  top: 14.5%;
  left: 74.3%;
  width: 22.3%;
  height: 21.7%;
}

.chart5 {
  position: absolute;
  top: 44%;
  left: 3.4%;
  width: 22.3%;
  height: 21.7%;
}

.chart6 {
  position: absolute;
  top: 44%;
  left: 27%;
  width: 22.3%;
  height: 21.7%;
}

.chart7 {
  position: absolute;
  top: 44%;
  left: 50.7%;
  width: 22.3%;
  height: 21.7%;
}

.chart8 {
  position: absolute;
  top: 44%;
  left: 74.3%;
  width: 22.3%;
  height: 21.7%;
}

.chart9 {
  position: absolute;
  top: 73.5%;
  left: 3.4%;
  width: 22.3%;
  height: 21.7%;
}

.chart10_1 {
  position: absolute;
  top: 73.5%;
  left: 27%;
  width: 7.4%;
  height: 21.7%;
}

.chart10_2 {
  position: absolute;
  top: 73.5%;
  left: 34.4%;
  width: 7.4%;
  height: 21.7%;
}

.chart10_3 {
  position: absolute;
  top: 73.5%;
  left: 41.8%;
  width: 7.4%;
  height: 21.7%;
}

.chart11 {
  position: absolute;
  top: 73.5%;
  left: 50.7%;
  width: 22.3%;
  height: 21.7%;
}

.chart12 {
  position: absolute;
  top: 73.5%;
  left: 74.3%;
  width: 22.3%;
  height: 21.7%;
}

</style>
