<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="table1">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
          编号
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 23.333%">
          生产工单
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          计划数量
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          实际数量
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          差异值
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          完成率
        </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)? "#053460":"#032d57") '>
            <div
              class="scrollTableItem" style="width: 10%">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTableItem" style="width: 23.333%">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value3 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value4 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value5 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value6 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="chart1">
      <Chart key="chart1" ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <Chart key="chart2" ref="chart2"></Chart>
    </div>
    <div class="chart3">
      <Chart key="chart3" ref="chart3"></Chart>
    </div>
    <div class="chart4">
      <Chart key="chart4" ref="chart4"></Chart>
    </div>
    <div class="num1 num1_1" style="top: 17%;left: 31.1%;color:#5fc2f2">1</div>
    <div class="num1 num1_2" style="top: 17%;left:34.1%;color:#5fc2f2">0</div>
    <div class="num1 num1_3" style="top: 17%;left:37%;color:#5fc2f2">0</div>
    <div class="num1 num1_4" style="top: 17%;left:40%;color:#5fc2f2">0</div>
    <div class="num1 num1_5" style="top: 17%;left:45.6%;color:#59ee7b">1</div>
    <div class="num1 num1_6" style="top: 17%;left:48.6%;color:#59ee7b">0</div>
    <div class="num1 num1_7" style="top: 17%;left:51.5%;color:#59ee7b">0</div>
    <div class="num1 num1_8" style="top: 17%;left:54.5%;color:#59ee7b">0</div>
    <div class="num1 num1_9" style="top: 17%;left:60%;color:#f60008">1</div>
    <div class="num1 num1_10" style="top: 17%;left:63%;color:#f60008">0</div>
    <div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">0</div>
    <div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">0</div>
    <div class="state"></div>
  </div>
</template>

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

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart
  },
  data() {
    return {
      title: [
        '工单计划',
        '小时产量',
        '七日产量对比',
        '设备OEE统计',
        '设备时长统计',
        '计划数量:',
        '完成数量:',
        '差异值:',
        '产线状态:',
      ],
      titlePosition: [
        {
          top: 11.3,
          left: 5.5
        },
        {
          top: 11.3,
          left: 75
        },
        {
          top: 63,
          left: 5.5
        },
        {
          top: 63,
          left: 30.5
        },
        {
          top: 63,
          left: 75
        },
        {
          top: 11.3,
          left: 30.5
        },
        {
          top: 11.3,
          left: 45
        },
        {
          top: 11.3,
          left: 59.5
        },
        {
          top: 25,
          left: 44
        },
      ],
      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: Array(50).fill('').map(function (i, k) {
        let val1 = Math.ceil(Math.random() * 10000)
        let val2 = val1 - Math.ceil(Math.random() * val1)
        let val3 = val1 - val2
        let val4 = ((val2 / val1) * 100).toFixed(2) + '%'
        return {
          value1: k + 1,
          value2: "20230304" + k,
          value3: val1,
          value4: val2,
          value5: val3,
          value6: val4,
        }
      }),
    }
  },
  mounted() {
    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: [1, 2, 3, 4, 5, 6],
        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: '数量',
          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: [1, 2, 3, 4, 5, 6]
        }
      ]
    })
    this.$refs.chart2.setData({
      grid: {
        top: 30,
        left: "2%",
        right: "5%",
        bottom: "2%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
        axisLabel: {
          margin: 10,
          color: "#ffffff63",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: "#ffffff1f",
          },
        },
      },
      yAxis: [
        {
          type: "value",
          axisLabel: {
            margin: 10,
            color: "#ffffff63",
          },

          axisTick: {
            show: true,
            lineStyle: {
              color: "#ffffff1f",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: "#ffffff1f",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 2,
            },
          },
        },
      ],
      series: [
        {
          name: "产量",
          type: "line",
          smooth: true, //是否平滑曲线显示
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#fff", // 线条颜色
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            color: "red",
            borderColor: "#fff",
            borderWidth: 3,
          },
          tooltip: {
            show: false,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#eb64fb",
                  },
                  {
                    offset: 1,
                    color: "#3fbbff0d",
                  },
                ],
                false
              ),
            },
          },
          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
        },
      ],
    })
    this.$refs.chart3.setData({
      grid: {
        top: 30,
        left: "2%",
        right: "5%",
        bottom: "2%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
        axisLabel: {
          margin: 10,
          color: "#ffffff63",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: "#ffffff1f",
          },
        },
      },
      yAxis: [
        {
          type: "value",
          axisLabel: {
            margin: 10,
            color: "#ffffff63",
          },

          axisTick: {
            show: true,
            lineStyle: {
              color: "#ffffff1f",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: "#ffffff1f",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 2,
            },
          },
        },
      ],
      series: [
        {
          name: "产量",
          type: "line",
          smooth: true, //是否平滑曲线显示
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#fff", // 线条颜色
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            color: "red",
            borderColor: "#fff",
            borderWidth: 3,
          },
          tooltip: {
            show: false,
          },
          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
        },
      ],
    })
    this.$refs.chart4.setData({
      grid: {
        top: 30,
        left: "2%",
        right: "5%",
        bottom: "2%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
        axisLabel: {
          margin: 10,
          color: "#ffffff63",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: "#ffffff1f",
          },
        },
      },
      yAxis: [
        {
          type: "value",
          axisLabel: {
            margin: 10,
            color: "#ffffff63",
          },

          axisTick: {
            show: true,
            lineStyle: {
              color: "#ffffff1f",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: "#ffffff1f",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 2,
            },
          },
        },
      ],
      series: [
        {
          name: "产量",
          type: "line",
          smooth: true, //是否平滑曲线显示
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#fff", // 线条颜色
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            color: "red",
            borderColor: "#fff",
            borderWidth: 3,
          },
          tooltip: {
            show: false,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#eb64fb",
                  },
                  {
                    offset: 1,
                    color: "#3fbbff0d",
                  },
                ],
                false
              ),
            },
          },
          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
        },
      ],
    })

    window.onresize = () => {
      this.$refs.chart1.chart.resize()
      this.$refs.chart2.chart.resize()
      this.$refs.chart3.chart.resize()
      this.$refs.chart4.chart.resize()
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped>

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

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

.table1 {
  position: absolute;
  top: 14.5%;
  left: 3.3%;
  width: 23.8%;
  height: 45.5%;
  color: #fff
}

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

.chart1 {
  position: absolute;
  top: 14.5%;
  left: 73%;
  width: 23.8%;
  height: 45.5%;
}

.chart2 {
  position: absolute;
  top: 66%;
  left: 3.3%;
  width: 23.8%;
  height: 29%;

}

.chart3 {
  position: absolute;
  top: 66%;
  left: 28.4%;
  width: 43.1%;
  height: 29%;

}

.chart4 {
  position: absolute;
  top: 66%;
  left: 73%;
  width: 23.8%;
  height: 29%;

}

.state {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25%;
  left: 50%;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  background-color: #ffff00;
}
</style>
