<template>
  <div class="app-container">
    <div class="headTitle">总装生产可视化平台</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="scrollTable">
      <div style="background-color: #094170">
        <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)? "#053460":"#032d57") '>
            <div
              class="scrollTableItem">
              {{ item.name }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </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>
</template>

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

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      title: [
        '工单计划',
        '泡后库存',
        '小时产量',
        '出入库统计',
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 5.5
        },
        {
          top: 55.4,
          left: 5.5
        },
        {
          top: 11.5,
          left: 52.7
        },
        {
          top: 55.4,
          left: 52.7
        },
      ],
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 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: [
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
      ],

    }
  },
  mounted() {
    this.$refs.chart1.setData({
      grid: {
        left: "0",
        right: "4%",
        bottom: '2%',
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        data: [
          "1时",
          "2时",
          "3时",
          "4时",
          "5时",
          "7时",
          "8时",
        ],
        axisLine: {
          lineStyle: {
            color: "#3d5269",
          },
        },
        axisLabel: {
          interval: 0,
          color: "#fff",
          fontSize: 14,
        },
      },
      yAxis: {
        nameTextStyle: {
          color: "#fff",
          fontSize: 16,
        },
        axisLine: {
          lineStyle: {
            color: "#3d5269",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 10,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#2d3d53",
          },
        },
        interval: 500,
      },
      series: [
        {
          type: "bar",
          barWidth: '40%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#5ef3ff",
                  },
                  {
                    offset: 1,
                    color: "#06a4f4",
                  },
                ],
                false
              ),
            },
          },
          label: {
            normal: {
              show: true,
              fontSize: 12,
              fontWeight: "bold",
              color: "#ffffff",
              position: "top",
            },
          },
          data: [254, 3254, 1654, 2454, 2757, 2011, 1211],
        },
      ],
    })
    this.$refs.chart2.setData({
      grid: {
        left: "0",
        right: "4%",
        bottom: '2%',
        top: "10%",
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        data: ["A-01", "A-02", "A-03"],
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          margin: 30,
          textStyle: {
            color: "#f0f0f0",
          },
        },
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      series: [
        {
          name: "上底",
          type: "pictorialBar",
          symbolSize: [30, 16],
          symbolOffset: [0, -8],
          z: 12,
          itemStyle: {
            normal: {
              color: "#14b1eb",
            },
          },
          tooltip: {
            show: false
          },
          data: [
            {
              value: 100,
              symbolPosition: "end",
            },
            {
              value: 50,
              symbolPosition: "end",
            },
            {
              value: 20,
              symbolPosition: "end",
            },
          ],
        },
        {
          name: "下底",
          type: "pictorialBar",
          symbolSize: [30, 16],
          symbolOffset: [0, 8],
          z: 12,
          itemStyle: {
            normal: {
              color: "#14b1eb",
            },
          },
          tooltip: {
            show: false
          },
          data: [100, 50, 20],
        },
        {
          name: "内环",
          type: "pictorialBar",
          symbolSize: [40, 20],
          symbolOffset: [0, 10],
          z: 11,
          tooltip: {
            show: false
          },
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#14b1eb",
              borderWidth: 5,
            },
          },
          data: [100, 50, 20],
        },
        {
          tooltip: {
            show: false
          },
          name: "外环",
          type: "pictorialBar",
          symbolSize: [55, 26],
          symbolOffset: [0, 13],
          z: 10,
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#14b1eb",
              borderType: "dashed",
              borderWidth: 5,
            },
          },
          data: [100, 50, 20],
        },
        {
          name: "数量",
          type: "bar",
          itemStyle: {
            normal: {
              color: "#14b1eb",
              opacity: 0.7,
            },
          },
          silent: true,
          barWidth: 30,
          barGap: "-100%", // Make series be overlap
          data: [100, 50, 20],
        },
      ],
    })
    this.$refs.chart3.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "10%",
        right: "0%",
        left: "5%",
        bottom: 20,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "A1库",
            "A2库",
            "A3库",
            "A4库",
            "A5库",
            "A6库",
            "A7库",
            "A8库",
            "A9库",
            "A10库",
            "A11库",
            "A12库",
          ],
          axisLine: {
            lineStyle: {
              color: "rgba(66, 192, 255, .3)",
            },
          },
          axisLabel: {
            interval: 0,
            margin: 10,
            color: "#05D5FF",
            textStyle: {
              fontSize: 11,
            },
          },
          axisTick: {
            //刻度
            show: false,
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            padding: [3, 0, 0, 0],
            formatter: "{value}",
            color: "rgba(95, 187, 235, 1)",
            textStyle: {
              fontSize: 11,
            },
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(66, 192, 255, .3)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0)",
            },
          },
        },
      ],
      series: [
        {
          name: '库存',
          type: "bar",
          data: [
            20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15
          ],
          barWidth: "30%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.98,
                    color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(5, 213, 255, 1)",
              shadowBlur: 4,
            },
          },
          label: {
            normal: {
              show: true,
              lineHeight: 10,
              formatter: "{c}",
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
          },
        },
      ],
    })
  },
  methods: {}
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/pourInto.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;
}

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


.scrollTable {
  position: absolute;
  top: 15%;
  left: 4%;
  width: 45%;
  height: 36%;
}


.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: 16.6%;
}

.chart1 {
  position: absolute;
  top: 58.5%;
  left: 3.6%;
  width: 45.5%;
  height: 35%;
}

.chart2 {
  position: absolute;
  top: 15%;
  left: 51%;
  width: 45.5%;
  height: 35%;
}

.chart3 {
  position: absolute;
  top: 58.5%;
  left: 51%;
  width: 45.5%;
  height: 35%;
}
</style>
