<template>
  <div class="app-container">
    <div class="title">浇铸进度监控</div>
    <div class="bigBox">
      <div class="productionEventMonitoring">
        <div class="titleSmall">
          <span class="titleSmallContent">
            <svg-icon style="font-size: 18px;" icon-class="pouringSz" class="sidebar-logo" />
            生产事件监控
          </span>
        </div>
        <div class="prompt">
          <div class="promptDiv"><span class="promptBox" style="background: #005AE0;"></span><span
              class="characters">事件第一次发生</span></div>
          <div class="promptDiv"><span class="promptBox" style="background: #39BA15;"></span><span
              class="characters">事件多次发生</span></div>
          <div class="promptDiv"><span class="promptBox" style="background: #E0E5EC;"></span><span
              class="characters">事件未发生</span></div>
        </div>
        <div class="pouringContent">
          <Monitor />
        </div>
      </div>
      <div class="billetTracking">
        <div class="titleSmall">
          <span class="titleSmallContent">
            <svg-icon style="font-size: 20px;" icon-class="pouringGz" class="sidebar-logo" />
            铸坯跟踪
          </span>
        </div>
        <div class="billetTrackingTop">
          <BilletTracking :BilletTracking="BilletTrackingOne" />
          <BilletTracking :BilletTracking="BilletTrackingTwo" />
        </div>
        <div class="billetTrackingBottom">
          <EchartsFoldLine :fatherMessage="fatherMessageOne" style="width:100%;height:320px" />
          <EchartsFoldLine :fatherMessage="fatherMessageTwo" style="margin-bottom:40px;width:100%;height:320px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Monitor from "./components/monitor.vue";
import BilletTracking from "./components/billetTracking.vue";
import { trace, speed } from "@/api/digitalCasting/monitor/schedule";
let BilletTrackingOne = ref({})
let BilletTrackingTwo = ref({})
const fatherMessageOne = ref({
  //是否显示当前日期
  timeDay: true,
  //是否显示边框
  borderSwitch: 'borderSwitch',
  //标题
  title: '拉速',
  //标题是显示图标SVG
  titleSvg: 'monitorCasting',
  //Y轴单位
  Yname: '单位:m/min',
  //数据是否从0开始  true不从0开始  false从0开始  如果是柱形图设计到两个量 一定要true 否则 样式回丢失
  boundaryGap: false,
  //横轴X 数据
  XAxle: [],
  //实际数据如果多条数据 数组里传入两个对象
  actualData: [
    {
      //上方对应名称
      name: 'A流',
      //平滑的线还带弧度  true弧度  false直线
      smooth: true,
      //数据Y
      dataAxle: [],
      //线条颜色
      color: '#005AE0',
      //图形 line折现 bar柱
      type: 'line'
    },
    {
      //上方对应名称
      name: 'B流',
      //平滑的线还带弧度  true弧度  false直线
      smooth: true,
      //数据Y
      dataAxle: [],
      //线条颜色
      color: '#39BA15',
      //图形 line折现 bar柱
      type: 'line'
    },
  ],
  // 是否显示右上角下拉框  ture显示 false不显示
  swtichSelect: false,
  //又上角下拉默认值
  optionsDefault: 'Option2',
  //又上角下拉选着数组
  options: [{ value: 'Option1', label: 'Option1', }, { value: 'Option2', label: 'Option2', },]
})
const fatherMessageTwo = ref({
  //是否显示当前日期
  timeDay: true,
  //是否显示边框
  borderSwitch: 'borderSwitch',
  //标题
  title: '拉速斜率',
  //标题是显示图标SVG
  titleSvg: 'monitorSpeed',
  //Y轴单位
  Yname: '单位:m/min²',
  //数据是否从0开始  true不从0开始  false从0开始  如果是柱形图设计到两个量 一定要true 否则 样式回丢失
  boundaryGap: false,
  //横轴X 数据
  XAxle: [],
  //实际数据如果多条数据 数组里传入两个对象
  actualData: [
    {
      //上方对应名称
      name: 'A流',
      //平滑的线还带弧度  true弧度  false直线
      smooth: true,
      //数据Y
      dataAxle: [],
      //线条颜色
      color: '#005AE0',
      //图形 line折现 bar柱
      type: 'line'
    },
    {
      //上方对应名称
      name: 'B流',
      //平滑的线还带弧度  true弧度  false直线
      smooth: true,
      //数据Y
      dataAxle: [],
      //线条颜色
      color: '#39BA15',
      //图形 line折现 bar柱
      type: 'line'
    },
  ],
  // 是否显示右上角下拉框  ture显示 false不显示
  swtichSelect: false,
  //又上角下拉默认值
  optionsDefault: 'Option2',
  //又上角下拉选着数组
  options: [{ value: 'Option1', label: 'Option1', }, { value: 'Option2', label: 'Option2', },]
})
let BilletTrackingApi = () => {
  trace().then(res => {
    //名称
    BilletTrackingOne.value.alias = 'A流'
    //铸坯编号
    BilletTrackingOne.value.billetNumber = res.data[0].prdNo
    //直径
    BilletTrackingOne.value.diameter = res.data[0].diameter
    //目标长度
    BilletTrackingOne.value.lineVal = res.data[0].targetLength
    //浇组长度
    BilletTrackingOne.value.realityVal = res.data[0].castingLength
    //名称
    BilletTrackingTwo.value.alias = 'B流'
    //铸坯编号
    BilletTrackingTwo.value.billetNumber = res.data[1].prdNo
    //直径
    BilletTrackingTwo.value.diameter = res.data[1].diameter
    //目标长度
    BilletTrackingTwo.value.lineVal = res.data[1].targetLength
    //浇组长度
    BilletTrackingTwo.value.realityVal = res.data[1].castingLength
  }).catch(err => {
    console.log(err)
  })
}
let EchartsFoldSpeedApi = () => {
  speed().then(res => {
    console.log(res)
    const speeds = res.data
    // 拉速
    fatherMessageOne.value.actualData[0].dataAxle = speeds[0].speedA
    fatherMessageOne.value.actualData[1].dataAxle = speeds[0].speedB
    fatherMessageOne.value.XAxle = speeds[0].timeList

    // 拉速斜率
    fatherMessageTwo.value.actualData[0].dataAxle = speeds[1].speedA
    fatherMessageTwo.value.actualData[1].dataAxle = speeds[1].speedB
    fatherMessageTwo.value.XAxle = speeds[1].timeList
  })
}

BilletTrackingApi()
EchartsFoldSpeedApi()
setInterval(() => {
  EchartsFoldSpeedApi()
}, 30000)

</script>
<style lang="scss" scoped>
.title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 15px;
}

.titleSmall {
  height: 44px;
  line-height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(235, 237, 238, 1);
  background-color: rgba(250, 251, 252, 1);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;

  .titleSmallContent {
    margin-left: 15px;
    font-weight: 600;
    font-size: 14px;

    .sidebar-logo {
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.bigBox {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .productionEventMonitoring {
    width: calc(98% - 500px);
    border: 1px solid rgba(235, 237, 238, 1);
    border-radius: 4px;

    .prompt {
      display: flex;
      margin-top: 20px;

      .promptDiv {
        height: 20px;
        line-height: 20px;
        padding-left: 15px;

        .promptBox {
          display: inline-block;
          width: 10px;
          height: 7px;
          vertical-align: middle;
          margin-left: 5px;
        }

        .characters {
          margin-left: 10px;
          display: inline-block;
          color: rgba(123, 130, 142, 1);
          font-size: 12px;
        }
      }
    }

    .pouringContent {
      display: flex;
      justify-content: center;
    }
  }

  .billetTracking {
    width: 510px;
    border: 1px solid rgba(235, 237, 238, 1);
    border-radius: 4px;

    .billetTrackingTop {
      display: flex;
      padding-top: 20px;
    }

    .billetTrackingBottom {}
  }
}
</style>
