<template>
  <div class="fenxi">
    <div class="banner">
      <img src="../../../static/images/bannerny1.jpg" alt="">
      <div class="banner_con">
        <div class="con">
          <h1>探索一号</h1>
          <ul>
            <li>
              <div class="t">
                <p>26</p>
                <span>次</span>
              </div>
              <div class="b">
                <p>航次次数</p>
              </div>
            </li>
            <li>
              <div class="t">
                <p>286</p>
                <span>天</span>
              </div>
              <div class="b">
                <p>航次天数</p>
              </div>
            </li>
            <li>
              <div class="t">
                <p>23</p>
                <span>家</span>
              </div>
              <div class="b">
                <p>参航单位</p>
              </div>
            </li>
            <li>
              <div class="t">
                <p>279</p>
                <span>个</span>
              </div>
              <div class="b">
                <p>作业站位个数</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="fenxi_con">
      <div class="fenxi1">
        <div id="xinxi" class="ccc" />
      </div>
      <div class="fenxi1">
        <h2 class="white">参航单位</h2>
        <div id="danwei" class="ccc">
          <baidu-map
            :center="center1"
            :zoom="zoom1"
            :scroll-wheel-zoom="true"
            map-type="BMAP_SATELLITE_MAP"
            style="width: 100%; height: 100%"
            @ready="handler1"
          >
            <bm-marker
              v-for="(item, index) in listxia"
              :key="index"
              :position="item.dingwei"
              :dragging="true"
              :icon="item.pic"
              @click="totap1(item)"
            >
              <bm-label
                :content="item.content"
                :offset="{ width: -35, height: 30 }"
              />
            </bm-marker>
          </baidu-map>
        </div>
      </div>
      <div class="fenxi1">
        <div id="renyuan" class="ccc" />
      </div>
      <div class="fenxi1">
        <h2 class="white">作业站位</h2>
        <div id="zhanwei" class="ccc">
          <GMRT />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import GMRT from '../GMRT.vue'

export default {
  name: 'Fenxi',
  components: {
    GMRT
  },
  data() {
    return {
      center: { lng: 118.962643, lat: 35.618913 },
      zoom: 3,
      center1: { lng: 56.761382, lat: 10.897877 },
      zoom1: 2,
      list: [
        {
          dingwei: {
            lng: 119.054629,
            lat: 36.373917
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 119.919302,
            lat: 34.226755
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 119.560555,
            lat: 34.421374
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 116.442213,
            lat: 35.556921
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei.png',
            size: { width: 16, height: 21 }
          }
        }
      ],
      listxia: [
        {
          dingwei: {
            lng: 56.761382,
            lat: 10.897877
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 59.116236,
            lat: -0.00034
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 47.783501,
            lat: -2.370556
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 41.160475,
            lat: -5.474589
          },
          content: '',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        }
      ],
      dataShuju: {
        value: [800, 1200, 900, 1700, 1410, 1600, 1000, 1100],
        color: '#ffe866',
        name: 'Observed'
      },
      dataQushi: {
        value: [1000, 1150, 850, 1600, 1510, 1700, 1100, 1300],
        color: '#02c464',
        name: 'Predicted',
        pic: {
          url: 'http://shipin.hey17.com/dingwei1.png',
          size: { width: 16, height: 21 }
        }
      }
    }
  },
  mounted() {
    this.getecharts()
    this.gettubiao2()
    const originShadow = Element.prototype.attachShadow;
    Element.prototype.attachShadow = (...args) => {
      const shadowRoot = originShadow.call(this, ...args)
      const style = document.createElement("style")
      style.innerHTML = "div { display: none !important; }"
      shadowRoot.appendChild(style)
      return shadowRoot
    };
  },
  methods: {
    getecharts() {
      var myChart = this.$echarts.init(document.getElementById('xinxi'))
      var option = {
        title: {
          top: '20',
          left: '20',
          text: '航次信息统计',
          textStyle: {
            color: '#212121',
            fontSize: '22px'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true
          // borderColor:'#dce8fe',
          // borderWidth: 5 ,
          // show:true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: { color: 'rgba(0,0,0,0.1)' },
            z: 1
          },
          padding: [15, 22],
          backgroundColor: 'rgba(0,0,0,0.9)',
          borderColor: '#01a3ce',
          borderWidth: 1,
          textStyle: { fontSize: 15, lineHeight: 32, color: '#ffffff' }
        },
        xAxis: {
          data: [
            'TS03',
            'TS04',
            'TS05',
            'TS06',
            'TS07',
            'TS08',
            'TS09',
            'TS010',
            'TS011',
            'TS012',
            'TS013'
          ],
          axisLine: { show: true },
          axisTick: {
            show: false,
            lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
          },
          axisLabel: {
            textStyle: { fontSize: 15, color: '#212121' },
            margin: 25,
            interval: 0
          },
          splitLine: { show: false }
        },
        yAxis: {
          type: 'value',
          name: '天数',
          nameTextStyle: {
            fontSize: '14px',
            padding: [3, 14, 5, -30]
          },
          axisLine: { show: false },
          axisTick: {
            show: false,
            lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
          },
          axisLabel: {
            textStyle: { fontSize: 14, color: '#212121' },
            opacity: 0.7,
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
          }
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
          }
        ],
        series: [
          //   {
          //     type: "pictorialBar",
          //     z: 13,
          //     symbolSize: [30, 12],
          //     symbolOffset: [0, -7],
          //     symbolPosition: "end",
          //     tooltip: { show: false },
          //     itemStyle: { color: "#00a8e6" },
          //     data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
          //   },
          {
            type: 'bar',
            z: 12,
            itemStyle: {
              color: '#13a1f0',
              borderRadius: [5, 5, 0, 0] // （顺时针左上，右上，右下，左下）
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     { offset: 0, color: "#00e7ff" },
              //     { offset: 1, color: "rgba(0,146,255,0.05)" },
              //   ]),
            },
            label: {
              show: true,
              position: 'top',
              distance: 5,
              fontSize: 16,
              color: '#212121',
              lineHeight: 30,
              fontFamily: 'DIN-Bold'
            },
            // emphasis: {
            //   label: { color: "#f1e06e" },
            // },
            barWidth: 20,

            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 110, 130]
          }
        ]
      }
      myChart.setOption(option)
    },

    gettubiao2() {
      var myChart = this.$echarts.init(document.getElementById('renyuan'))
      var option = {
        title: {
          top: '20',
          left: '20',
          text: '航次参航人员工作量统计',
          textStyle: {
            color: '#212121',
            fontSize: '22px'
          }
        },
        legend: {
          data: ['天数', '次数'],
          right: '5%',
          top: '5%',
          textStyle: {
            color: '#212121',
            fontSize: '15'
          },
          icon: 'roundRect'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: { color: 'rgba(0,0,0,0.1)' },
            z: 1
          },
          padding: [15, 22],
          backgroundColor: 'rgba(255,255,255,0.9)',
          borderColor: '#01a3ce',
          borderWidth: 1,
          textStyle: { fontSize: 16, lineHeight: 32, color: '#212121' }
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
          }
        ],
        xAxis: {
          data: [
            '高文清',
            '秋雪玲',
            '陈传旭',
            '何恩怨',
            '金文明',
            '罗腾也',
            '唐元贵',
            '王飒',
            '李珊珊'
          ],
          axisLine: { show: false },
          axisTick: {
            show: false,
            lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
          },
          axisLabel: {
            textStyle: { fontSize: 16, color: '#212121' },
            margin: 15,
            interval: 0
          },
          splitLine: { show: false }
        },
        yAxis: {
          type: 'value',
          name: '天数/次数',
          nameTextStyle: {
            fontSize: '14px',
            padding: [3, 14, 5, -10]
          },
          axisLine: { show: false },
          axisTick: {
            show: false,
            lineStyle: { color: '#212121', width: 1, opacity: 1 }
          },
          axisLabel: {
            textStyle: { fontSize: 15, color: '#212121' },
            opacity: 0.7,
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
          }
        },
        animationDelay: 900,
        animationDuration: 2000,
        animationDurationUpdate: 800,
        series: [
          //   {
          //     type: "pictorialBar",
          //     z: 13,
          //     symbolSize: [26, 10],
          //     symbolOffset: [0, -6],
          //     symbolPosition: "end",
          //     tooltip: { show: false },
          //     itemStyle: { color: "#ffe866" },
          //     data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
          //   },
          {
            type: 'bar',
            name: '天数',
            z: 8,
            barGap: '30%',
            itemStyle: {
              color: '#13a1f0',
              borderRadius: [5, 5, 0, 0]
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     { offset: 0, color: "#cdc060" },
              //     { offset: 1, color: "rgba(205,192,96,0.05)" },
              //   ]),
            },
            barWidth: 20,
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80]
          },
          {
            name: '次数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            showSymbol: true,
            z: 10,
            data: [100, 150, 200, 100, 80, 90, 100, 110, 100],
            itemStyle: {
              color: '#fff',
              borderColor: '#ffab34',
              borderWidth: 2,
              borderType: 'solid'
            },
            lineStyle: {
              color: '#ffab34',
              width: 4
            }
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: "#3cefc8" },
            //     { offset: 1, color: "transparent" },
            //   ]),
            //   opacity: 0.15,
            // },
          }
        ]
      }
      myChart.setOption(option)
    },

    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 6
    },
    handler1({ BMap, map }) {
      console.log(BMap, map)
      this.center1.lng = 56.761382
      this.center1.lat = 10.897877
      this.zoom1 = 1
    },
    totap(e) {
      console.log(e)
      e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
      e.pic.size.width = 22
      e.pic.size.height = 28
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i] != e) {
          this.list[i].pic.url = 'http://shipin.hey17.com/dingwei.png'
          this.list[i].pic.size.width = 16
          this.list[i].pic.size.height = 21
        }
      }
    },
    totap1(e) {
      console.log(e)
      e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
      e.pic.size.width = 22
      e.pic.size.height = 28
      for (var i = 0; i < this.listxia.length; i++) {
        if (this.listxia[i] != e) {
          this.listxia[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
          this.listxia[i].pic.size.width = 16
          this.listxia[i].pic.size.height = 21
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.fenxi {
  width: 100%;
  height: 100%;
  .banner {
    width: 100%;
    height: 20%;
    position: relative;
    img {
      width: 100%;
      // height: 100%;
      object-fit: contain;
    }
    .banner_con {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 888;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .con {
        margin: auto;
        margin-top: 40px;
        width: 85%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        h1 {
          display: block;
          margin-bottom: 40px;
          font-size: 56px;
          color: #fff;
          font-weight: bold;
        }
        ul {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          li {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 80px;
            .t {
              display: flex;
              align-items: baseline;
              p {
                font-size: 56px;
                color: #fff;
                font-family: DIN-Bold;
                font-weight: bold;
              }
              span {
                font-size: 26px;
                color: #fff;
              }
            }
            .b {
              width: auto;
              text-align: center;
              p {
                font-size: 18px;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
  .fenxi_con {
    margin: auto;
    margin-top: 40px;
    margin-bottom: 90px;
    width: 85%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .fenxi1 {
      position: relative;
      margin-bottom: 40px;
      width: 48%;
      height: 520px;
      border-radius: 10px;
      border: 1px solid #ccc;
      overflow: hidden;
      h2{
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 8888;
        font-size: 22px;
        color: #212121;
        &.white{
          color: #fff;
        }
      }
      .ccc {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<style>
.anchorBL{
  display: none;
}
</style>
