<template>
  <div class="app-container">
    <div class="headTitle">京源智能仓储监控平台</div>
    <div v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
         class="title"
    >
      {{ i }}
    </div>
    <div class="chart3">
      <Chart key="chart3" ref="chart3"></Chart>
    </div>

    <div class="table1">
      <div style="background-color: #1077bc19">
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          计量设备编号
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          计量设备名称
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          采集时间
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          A项电压(V)
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          B项电压(V)
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          C项电压(V)
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          A项电流(A)
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          B项电流(A)
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          C项电流(V)
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          仪表值(kW·h)
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: calc(100% - 30px);overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
            <div
              class="scrollTableItem"
            >
              {{ item.monitorId }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.monitorName }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.collectTime }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.va }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.vb }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.vc }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.ia }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.ib }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.ic }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.zxyg }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>


  </div>
</template>


<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import HighChart from '@/components/board/HighChart'
import * as echarts from 'echarts'
import {
  energyFirstFloorData, getEnergyHistoryData

} from '@/api/board/firstFloorWarehouse'
import { parseTime } from '@/utils/ruoyi'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart,
    HighChart
  },
  data() {
    return {
      topData: {
        num1: [0, 0, 0, 0],
        num2: [0, 0, 0, 0],
        num3: [0, 0, 0, 0]
      },
      title: [
        ' ',
        ' ',
        ' ',
        '  ',
        '  ',
        ' '
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 7.5
        },
        {
          top: 11.5,
          left: 40.3
        },
        {
          top: 11.5,
          left: 72.8
        },
        {
          top: 11.5,
          left: 60.3
        },
        {
          top: 11.5,
          left: 79.1
        },
        {
          top: 19.4,
          left: 5.5
        }
      ],
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0
      },
      scrollTableData: [],
      scrollTableData1: []
    }
  },
  mounted() {
    this.getData()

    window.onresize = () => {
      this.$refs.chart3.resize()
    }
  },
  methods: {
    getData() {
      energyFirstFloorData().then(e=>{
        console.log(e)
        let data = e.rows
        this.$refs.chart3.setData({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '14%',
            top: '16%',
            containLabel: true
          },
          legend: {
            x: 'center',
            top: 12,
            textStyle: {
              color: '#fff'
            },
            itemWidth: 12,
            itemHeight: 10
            // itemGap: 35
          },
          xAxis: {
            type: 'category',
            data: data.map(v => v.monitorName),
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              textStyle: {
                fontFamily: 'Microsoft YaHei'
              }
            }
          },

          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {}
          },
          series: [
            {
              name: '消耗',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#fccb05'
                    },
                    {
                      offset: 1,
                      color: '#f5804d'
                    }
                  ])
                }
              },
              data: data.map(v => v.expend)
            }
          ]
        })
      })
      getEnergyHistoryData().then(e=>{
        console.log(e)
        this.scrollTableData = e.rows
      })
    }
  }
}
</script>
<style lang="less" scoped>

.app-container {
  background-image: url("../../../assets/board/energy.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;
}

.num1 {
  position: absolute;
  font-size: 1.5vw;
  transform: translate(-50%, -50%);
}

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


.chart1 {
  position: absolute;
  top: 22.5%;
  left: 3.4%;
  width: 23%;
  height: 32%;
}

.chart2 {
  position: absolute;
  top: 22.5%;
  left: 26.5%;
  width: 23%;
  height: 32%;
}

.chart3 {
  position: absolute;
  top: 58.8%;
  left: 3.4%;
  width: 93.2%;
  height: 36%;
}


.span {
  position: absolute;
  transform: translateY(-50%);
}

.span1 {
  position: absolute;
  transform: translate(-50%, -50%);
}

.table1 {
  position: absolute;
  top: 14.9%;
  left: 3.4%;
  width: 93.3%;
  height: 35.9%;
  color: #fff;
}

.table2 {
  position: absolute;
  top: 62.9%;
  left: 50.4%;
  width: 45.7%;
  height: 32%;
  color: #fff;
}

.scrollTableItem {
  display: inline-block;
  width: calc(100% / 10);
  text-align: center;
  padding: 14px 0;
  color: #4e99c5
}

</style>
