<template>
  <div class="app-container">
    <div class="headTitle">数字化注塑车间管控中心</div>
    <div class="centerDevice"></div>
    <div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: 432</div>
    <div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: 432</div>
    <div class="text1" style="top: 24%;left: 5.5%;">今日差异数: 432</div>
    <div class="text1" style="top: 24%;left: 16.8%;">今日完成率: 98%</div>
    <div class="text1" style="top: 12%;left: 29%;">今日用水(t):</div>
    <div class="text1" style="top: 12%;left: 44%;">今日用电(kwh):</div>
    <div class="text1" style="top: 12%;left: 59%;">今日用气(m³):</div>
    <div class="text1" style="top: 19.1%;left: 75%;">正常: 300</div>
    <div class="text1" style="top: 19.1%;left: 82.4%;">告警: 01</div>
    <div class="text1" style="top: 19.1%;left: 89.8%;">停机: 01</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">1</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">2</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">3</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">4</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">5</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">6</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">7</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">8</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">9</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">0</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">1</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">2</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">3</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">4</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">5</div>
    <div class="text2" style="top: 12.7%;left: 84.7%;">设备总数:320</div>
    <div class="text2" style="top: 41%;left: 84.7%;">总维修次数:320</div>
    <div class="text3" style="top: 35.15%;left: 5.5%;">工单进度</div>
    <div class="text3" style="top: 35.15%;left: 75%;">维修分析</div>
    <div class="text3" style="top: 63.05%;left: 5.5%;">质量追溯</div>
    <div class="text3" style="top: 63.05%;left: 30.2%;">设备分析</div>
    <div class="text3" style="top: 63.05%;left: 75%;">告警趋势</div>
    <div class="deviceError">
      <div class="icon"></div>
      <div class="text" style="left: 18%">设备1#</div>
      <div class="text" style="left: 42%;color: #F42223">产品未顶出</div>
      <div class="text" style="left: 75%">66:66:66</div>
    </div>

    <div class="scrollTable">
      <div style="background-color: #05346044">
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          型号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
          计划数
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
          完成数
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
          差异数
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          执行进度
        </div>
      </div>
      <vue-seamless-scroll
          :class-option="scrollTableOption"
          :data="scrollTableData"
          class="case-item"
          style="height: calc(100% - 20px - 1vw - 0.4vw);overflow: hidden;"
      >
        <div
            v-for="(item, index) in scrollTableData"
            :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#05346022":"#05346044") '>
            <div
                class="scrollTableItem" style="width: 25%">
              {{ item.value1 }}
            </div>
            <div
                class="scrollTableItem" style="width: 16.66%">
              {{ item.value2 }}
            </div>
            <div
                class="scrollTableItem" style="width: 16.66%">
              {{ item.value3 }}
            </div>
            <div
                class="scrollTableItem" style="width: 16.66%">
              {{ item.value4 }}
            </div>
            <div
                class="scrollTableItem" style="width: 25%">
              {{ item.value5 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="repairTimes">
      <div class="item" v-for="i in 3">
        <div class="num">{{ i }}</div>
        <div class="deviceName">SC-228NE</div>
        <div class="schedule">
          <div class="progressBar" :style="{width: 100 - ((i-1) * 10) + '%'}"></div>
        </div>
        <div class="times">{{ 10 - i + 1 }}次</div>
      </div>
    </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.vue";
import * as echarts from "echarts";

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  components: {
    vueSeamlessScroll, Chart
  },
  name: "Liner",
  data() {
    return {
      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,
      },
    }
  },
  mounted() {
    const dataMap = {
      '合格数': 100,
      '不合格数': 100
    }
    this.$refs.chart1.setData({
      title: {
        y: 'center',
        left: '60%',
        text: `{dot1|●} {name|合格数} ：{value|1000}\n\n\n{dot2|●} {name|不合格数} ：{value|100}`,
        textStyle: {
          color: '#ffffff',
          rich: {
            dot1: {
              fontSize: 16,
              color: '#ffffff',
            },
            dot2: {
              fontSize: 16,
              color: '#4E97FF',
            },
            name: {
              color: '#fff',
              fontSize: 18,
            },
            value: {
              color: '#fff',
              fontSize: 22,
              fontWeight: '800',
            }
          }
        }
      },
      series: [
        {
          type: "pie",
          center: ["30%", "50%"],
          radius: ['57%', '63%'],
          itemStyle: {
            color: '#6666'
          },
          labelLine: {
            show: false
          },
          data: [1]
        },
        {
          type: "pie",
          label: {
            show: false,
          },
          center: ["30%", "50%"],
          radius: ['54%', '66%'],
          clockwise: false,
          labelLine: {
            show: false
          },
          itemStyle: {
            color: '#4E97FF'
          },
          data: [
            {
              value: 20,
              name: '不合格数',
              itemStyle: {
                color: '#4E97FF'
              },
            },
            {
              value: 80,
              name: '合格数',
              itemStyle: {
                color: '#0000'
              },
            },
          ]
        },
      ]
    })
    this.$refs.chart2.setData({
      grid: {
        top: "15%",
        left: "10%",
        right: "5%",
        bottom: "15%",
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            show: true,
          },
          splitArea: {
            color: "#f00",
            lineStyle: {
              color: "#f00",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 0.8 * vw,
            interval: 0,
          },
          splitLine: {
            show: false,
          },
          data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"],
        },
      ],

      yAxis: [
        {
          boundaryGap: true,
          type: "value",
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: true,
          },
        },
      ],
      series: [
        {
          name: "OEE",
          type: "bar",

          itemStyle: {
            color: "#0C2CD8",
          },
          tooltip: {
            show: false,
          },
          data: [27, 31, 20, 31, 10],
        },
      ],
    })
    this.$refs.chart3.setData({
      grid: {
        top: "15%",
        left: "10%",
        right: "5%",
        bottom: "15%",
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            show: true,
          },
          splitArea: {
            color: "#f00",
            lineStyle: {
              color: "#f00",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 0.8 * vw,
            interval: 0,
          },
          splitLine: {
            show: false,
          },
          data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"],
        },
      ],

      yAxis: [
        {
          boundaryGap: true,
          type: "value",
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: true,
          },
        },
      ],
      series: [
        // {
        //   name: "稼动率",
        //   type: "line",
        //   showAllSymbol: true,
        //   symbol: "circle",
        //   symbolSize: 5,
        //   lineStyle: {
        //     normal: {
        //       color: "#2FCCE9",
        //       shadowColor: "rgba(0, 0, 0, .3)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 5,
        //       shadowOffsetX: 5,
        //     },
        //   },
        //
        //   itemStyle: {
        //     color: "#2FCCE9",
        //     borderColor: "#2FCCE9",
        //     borderWidth: 3,
        //     shadowColor: "rgba(0, 0, 0, .3)",
        //     shadowBlur: 0,
        //     shadowOffsetY: 2,
        //     shadowOffsetX: 2,
        //   },
        //   tooltip: {
        //     show: false,
        //   },
        //   data: [17, 27, 38, 19, 28],
        // },
        {
          name: "OEE",
          type: "line",
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: "#E3A731",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },

          itemStyle: {
            color: "#E3A731",
            borderColor: "#E3A731",
            borderWidth: 3,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: false,
          },
          data: [27, 31, 20, 31, 10],
        },
      ],
    })
  },
  methods: {},
  computed: {
    scrollTableData() {
      return Array(222).fill(0).map(i => {
        return {
          value1: Math.ceil(Math.floor(Math.random() * 100)) + 'WD',
          value2: Math.ceil(Math.floor(Math.random() * 100)),
          value3: Math.ceil(Math.floor(Math.random() * 100)),
          value4: Math.ceil(Math.floor(Math.random() * 100)),
          value5: Math.ceil(Math.floor(Math.random() * 100)) + '%',
        }
      })
    }
  },
  beforeDestroy() {
  }
};

</script>
<style scoped lang="less">
.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 0.3vw;
}

.app-container {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../../assets/board/boardBg3.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

.text1 {
  position: absolute;
  transform: translateY(-50%);
  letter-spacing: 0.1vw;
  font-size: 0.9vw;
  color: #fff;
}

.text2 {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1vw;
  font-size: 1.1vw;
  color: #fff;
}

.text3 {
  position: absolute;
  transform: translateY(-50%);
  letter-spacing: 0.1vw;
  font-size: 1.1vw;
  color: #fff;
}

.num1 {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1vw;
  font-size: 1.3vw;
  color: #eee;
}

.centerDevice {
  position: absolute;
  top: 22%;
  left: 28.6%;
  width: 42.9%;
  height: 36.4%;
  background-image: url("../../../assets/board/device.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.deviceError {
  position: absolute;
  top: 24.5%;
  left: 74%;
  width: 21.5vw;
  height: 2.275vw;
  background-image: url("../../../assets/board/errorBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .icon {
    position: absolute;
    top: 50%;
    left: 9%;
    transform: translate(-50%, -50%);
    width: 1.32vw;
    height: 1.2vw;
    background-image: url("../../../assets/board/errorIcon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 0.1vw;
    font-size: 0.8vw;
    color: #fff;
  }
}

.scrollTable {
  position: absolute;
  top: 38%;
  left: 3.3%;
  width: 23.8%;
  height: 20%;
}

.scrollTableItem {
  color: #65CDF9;
  margin: auto 0px;
  padding: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: 10%;
  font-size: 1vw;
}

.repairTimes {
  position: absolute;
  top: 44%;
  left: 72.8%;
  width: 23.8%;
  height: 14.3%;

  .item {
    width: 100%;
    height: 33.33%;
    position: relative;

    .num {
      position: absolute;
      top: 50%;
      left: 8%;
      width: 1vw;
      height: 1vw;
      font-size: 0.8vw;
      text-align: center;
      transform: translate(-50%, -50%);
      line-height: calc(1vw - 2px);
      color: #1B61D8;
      background-color: #092C52;
      border: 1px solid #0D598F;
    }

    .deviceName {
      position: absolute;
      top: 50%;
      left: 15%;
      font-size: 0.8vw;
      transform: translateY(-50%);
      color: #fff;
    }

    .schedule {
      position: absolute;
      top: 50%;
      left: 35%;
      transform: translateY(-50%);
      width: 50%;
      height: 8px;
      border-radius: 4px;
      background-color: #172B47;
      overflow: hidden;

      .progressBar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(to right, #1068E4, #4E99FF);
      }
    }

    .times {
      position: absolute;
      top: 50%;
      left: 87%;
      font-size: 0.8vw;
      transform: translateY(-50%);
      color: #60BAEA;
    }
  }
}

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

.chart2 {
  position: absolute;
  top: 66%;
  left: 28%;
  width: 44%;
  height: 29%;
}

.chart3 {
  position: absolute;
  top: 66%;
  left: 72.8%;
  width: 23.8%;
  height: 29%;
}
</style>