<template>
  <div class="app-container">
    <div class="headTitle">内胆生产数据监控平台</div>
    <div class="topNum team">{{ team }}</div>
    <div class="topNum planNum">{{ planNum }}</div>
    <div class="topNum practicalNum">{{ practicalNum }}</div>
    <div class="topNum differenceValue">{{ differenceValue }}</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="inventoryInfo">内胆库剩余:{{ linerNum }}% 箱壳库剩余:{{ caseNum }}%</div>
    <div class="centerBg"></div>

    <div class="scrollTable">
      <div style="background-color: #09417066">
        <div class="scrollTableItem" style="font-weight: bold;">
          计划编号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          产品型号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          计划数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          入库数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          生产进度
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          计划时间
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#05346066":"#032d5766") '>
            <div
              class="scrollTableItem">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value3 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value4 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value5 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="meter">平均节拍：{{meter}} 秒/件</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>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts'
import {getData} from '@/api/board/getData'

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      title: [
        '箱壳生产计划',
        '内胆入库统计',
        '胆壳库存统计',
        '泡前库存统计',
        '箱体发泡实时状态',
      ],
      meter:30,
      linerNum: 50,
      caseNum: 44,
      titlePosition: [
        {
          top: 19.8,
          left: 5.5
        },
        {
          top: 19.8,
          left: 53
        },
        {
          top: 70.5,
          left: 5.5
        },
        {
          top: 70.5,
          left: 36.7
        },
        {
          top: 70.5,
          left: 68.5
        },
      ],
      team: '白班',
      planNum: 1000,
      practicalNum: 1000,
      differenceValue: 1000,
      scrollTableOption: {
        step: 0.5,
        limitMoveNum: 9999999999,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 0,
      },
      scrollTableData: [],

    }
  },
  mounted() {
    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
    getData().then(e => {
      this.scrollTableData = e.table1
      this.$refs.chart1.setData({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "0",
          top: 20,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: e.liner.ImportAndExportStatistics.x,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {},
        },
        series: [
          {
            name: e.liner.ImportAndExportStatistics.y[0].name,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            type: "bar",
            barWidth: "30%",
            barMaxWidth: 50,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#39ffff",
                  },
                  {
                    offset: 1,
                    color: "#5affa6",
                  },
                ]),
              },
            },
            data: e.liner.ImportAndExportStatistics.y[0].data,
          },
        ],
      })
      this.$refs.chart2.setData({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "0",
          top: 20,
          containLabel: true,
        },
        legend: {
          data: e.liner.inventoryStatus.y.map(val => val.name),
          right: 'center',
          top: 0,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: e.liner.inventoryStatus.x,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {},
        },
        series: [
          {
            name: e.liner.inventoryStatus.y[0].name,
            type: "bar",
            barWidth: "30%",
            barMaxWidth: 50,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#39ffff",
                  },
                  {
                    offset: 1,
                    color: "#5affa6",
                  },
                ]),
              },
            },
            data: e.liner.inventoryStatus.y[0].data,
          },
          {
            name: e.liner.inventoryStatus.y[1].name,
            type: "bar",
            barWidth: "30%",
            barMaxWidth: 50,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4adfff",
                  },
                  {
                    offset: 1,
                    color: "#3d7aff",
                  },
                ]),
              },
            },
            data: e.liner.inventoryStatus.y[1].data,
          },
        ],
      })
      this.$refs.chart3.setData({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "0",
          top: 20,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: e.liner.inventoryStatistics.x,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {},
        },
        series: [
          {
            name: e.liner.inventoryStatistics.y.name,
            type: "bar",
            barWidth: "30%",
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            barMaxWidth: 50,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4adfff",
                  },
                  {
                    offset: 1,
                    color: "#3d7aff",
                  },
                ]),
              },
            },
            data: e.liner.inventoryStatistics.y.data,
          },
        ],
      })
      this.$refs.chart4.setData({
        legend: {
          data: ['运行中夹具数量'],
          right: 'center',
          top: 0,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "0",
          top: 20,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: e.liner.foamFixtureState.x,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {},
        },
        series: [
          {
            name: e.liner.foamFixtureState.y.name,
            type: "bar",
            barWidth: '30%',
            barMaxWidth: 50,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4adfff",
                  },
                  {
                    offset: 1,
                    color: "#3d7aff",
                  },
                ]),
              },
            },
            data: e.liner.foamFixtureState.y.data,
          }
        ]
      })
    })
  },
  methods: {}
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/liner.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.centerBg {
  background-image: url("../../../assets/board/model1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 56%;
  left: 49%;
  width: 98%;
  height: 57%;
}

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

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

.topNum {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #5db9e8;
  top: 11.7%;
  letter-spacing: 0.5vw;
}

.team {
  font-size: 1.5vw;
  left: 16.8%;
}

.planNum {
  font-size: 1.7vw;
  left: 41.2%;
}

.practicalNum {
  left: 66.2%;
  font-size: 1.7vw;
}

.differenceValue {
  font-size: 1.7vw;
  left: 90.7%;
}

.scrollTable {
  position: absolute;
  top: 23%;
  left: 4%;
  width: 45%;
  height: 18%;
}


.scrollTableItem {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: calc(100% / 6);
}

.chart1 {
  position: absolute;
  top: 23%;
  left: 51%;
  width: 45%;
  height: 18.5%;
}

.chart2 {
  position: absolute;
  top: 74%;
  left: 3.6%;
  width: 29.8%;
  height: 20.7%;
}

.chart3 {
  position: absolute;
  top: 74%;
  left: 35%;
  width: 30%;
  height: 20.7%;
}

.chart4 {
  position: absolute;
  top: 74%;
  left: 66.5%;
  width: 30%;
  height: 20.7%;
}

.inventoryInfo {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.9vw;
  top: 70.4%;
  left: 13.7%;
  color: #fff;
  letter-spacing: 1px;
}
.meter{
  position: absolute;
  top: 19.7%;
  left: 62.5%;
  transform: translateY(-50%);
  font-size: 0.8vw;
  color: #fff;
}
</style>
