
<template>
  <div class="bigBox">
    <div class="hearder">
      <svg-icon style="font-size: 16px;" icon-class="pouringSz" class="sidebar-logo" />
      <span>生产事件信息</span>
    </div>
    <div class="contentTop">
      <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>
      <div class="contentProductionEvents">
        <div>
          <div style="display:flex">
            <productionEvents :productionEvents="monitorGbdz" />
            <svg-icon style="width: 13em;margin-top:10px;" icon-class="arrowRight" class="sidebar-logo" />
            <productionEvents :productionEvents="monitorKsjg" />
            <svg-icon style="width: 13em;margin-top:10px;" icon-class="arrowRight" class="sidebar-logo" />
            <productionEvents :productionEvents="monitorAjzks" />
            <svg-icon style="width: 13em;margin-top:10px;" icon-class="arrowRight" class="sidebar-logo" />
            <productionEvents :productionEvents="monitorAlcjzks" />
          </div>
          <div><svg-icon style="height: 5em;margin-left:1130px" icon-class="arrowBottom " class="sidebar-logo" /></div>
          <div style="display:flex">
            <div style="width:355px"></div>
            <productionEvents :productionEvents="monitorGblz" />
            <div style="width:208px"></div>
            <productionEvents :productionEvents="monitorAjzjs" />
            <svg-icon style="width: 13em;margin-top:10px;" icon-class="arrowLeft " class="sidebar-logo" />
            <productionEvents :productionEvents="monitorAlcjzjs" />
          </div>
        </div>
      </div>
    </div>
    <div class="contentBottom">
      <div class="contentHeader"><span class="contentHeaderD"></span><span class="contentHeaderT">不同阶段时长占比</span></div>
      <div style="display:flex;padding-left:100px;justify-content: space-between;">
        <div id="main" ref="main" style="width: 250px;height:160px;"></div>
        <div class="contentBottomBig">
          <div class="proportionBig">
            <span class="proportionBox" style="background:#39BA15"></span>
            <span class="proportionTitle">浇铸时长：</span>
            <span class="proportionContent">{{ proportionData.castingDuration }}min</span>
          </div>
          <div class="proportionBig">
            <span class="proportionBox" style="background: #005AE0"></span>
            <span class="proportionTitle">冷却时长：</span>
            <span class="proportionContent">{{ proportionData.coolingDuration }}min</span>
          </div>
        </div>
        <div class="contentBottomLeft">
          <div class="contentBottomLeftBox">
            <div class="contentBottomLeftBoxT">
              <span class="block"></span>
              <span class="name">浇铸</span>
            </div>
            <div class="langBoxOutside">
              <div class="langBox" :style="{ width: `${proportionData.castingProportion * 500}px` }">
                <div class="langBoxLeftBolid"></div>
                <div class="langBoxLeftTime">{{ proportionData.castingTime }}</div>
                <div class="langBoxReftBolid" :style="{ left: `${proportionData.castingProportion * 500}px` }"></div>
                <div class="langBoxReftTime" :style="{ left: `${proportionData.castingProportion * 500 - 50}px` }">{{ proportionData.coolingTime }}</div>
              </div>
            </div>
          </div>
          <div class="contentBottomLeftBoxTwo">
            <div class="contentBottomLeftBoxT">
              <span class="block" style="background:rgba(0, 90, 224, 1)"></span>
              <span class="name">冷却</span>
            </div>
            <div class="langBoxOutside">
              <div class="langBox" :style="{ width: `${proportionData.coolingProportion * 500}px` }">
              </div>
              <div class="langBoxLeftBolid"></div>
              <div class="langBoxLeftTime">{{ proportionData.endTime }}</div>
              <!-- 500 - x -->
              <div class="langBoxReftBolid" :style="{ left: `${500 - proportionData.coolingProportion * 500}px` }"></div>
              <!-- 500 - X - 50 -->
              <div class="langBoxReftTime" :style="{ left: `${500 - proportionData.coolingProportion * 500 - 50}px` }">{{ proportionData.coolingTime }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup >
import ProductionEvents from "../../monitor/schedule/components/productionEvents.vue";
import { getProportion, getReportEvent } from "@/api/digitalCasting/report/report";
const props = defineProps({
  castTimesNo: {
    type: String,
    default: ''
  },
});
watch(
  () => props.castTimesNo,
  (newValue, oldValue) => {
    if (!newValue) {
      return
    }
    eventReport()
    proportionApi()
  },
  {
    deep: true,
  });
// 钢包到站
let monitorGbdz = ref({})
//开始浇灌
let monitorKsjg = ref({})
//A浇铸开始
let monitorAjzks = ref({})
//A炉次浇铸开始
let monitorAlcjzks = ref({})
//A炉次浇铸结束
let monitorAlcjzjs = ref({})
//A浇铸结束
let monitorAjzjs = ref({})
//钢包离站
let monitorGblz = ref({})
//时间对比
let proportionData = ref({})
const { proxy } = getCurrentInstance();
const main = ref(null);
let eventReport = () => {
  getReportEvent({ castTimesNo: props.castTimesNo }).then(res => {
    // 钢包到站
    monitorGbdz.value.title = '钢包到站'
    monitorGbdz.value.icon = 'whiteFlag'
    monitorGbdz.value.triangleSwitch = false
    monitorGbdz.value.stateParameters = res.data.arriveList.length
    monitorGbdz.value.contentArr = res.data.arriveList
    //开始浇灌
    monitorKsjg.value.title = '开始浇铸'
    monitorKsjg.value.icon = 'startWatering'
    monitorKsjg.value.triangleSwitch = false
    monitorKsjg.value.stateParameters = res.data.arriveList.length
    monitorKsjg.value.contentArr = res.data.arriveList
    //A浇铸开始
    monitorAjzks.value.title = '铸流开始'
    monitorAjzks.value.icon = 'startOfCasting'
    monitorAjzks.value.triangleSwitch = false
    monitorAjzks.value.stateParameters = res.data.alist[30].length
    monitorAjzks.value.contentArr = res.data.alist[30]
    //A炉次浇铸开始
    monitorAlcjzks.value.title = '炉次浇铸开始'
    monitorAlcjzks.value.icon = 'pouringLoding'
    monitorAlcjzks.value.triangleSwitch = false
    monitorAlcjzks.value.stateParameters = res.data.alist[32].length
    monitorAlcjzks.value.contentArr = res.data.alist[32]
    //A炉次浇铸结束
    monitorAlcjzjs.value.title = '炉次浇铸结束'
    monitorAlcjzjs.value.icon = 'pouringLoding'
    monitorAlcjzjs.value.triangleSwitch = false
    monitorAlcjzjs.value.stateParameters = res.data.alist[33].length
    monitorAlcjzjs.value.contentArr = res.data.alist[33]
    //A铸流结束
    monitorAjzjs.value.title = '铸流结束'
    monitorAjzjs.value.icon = 'endOfCasting'
    monitorAjzjs.value.triangleSwitch = false
    monitorAjzjs.value.stateParameters = res.data.alist[31].length
    monitorAjzjs.value.contentArr = res.data.alist[31]
    //钢包离站
    monitorGblz.value.title = '钢包离站'
    monitorGblz.value.icon = 'whiteFlag'
    monitorGblz.value.triangleSwitch = false
    monitorGblz.value.stateParameters = res.data.leaveList.length
    monitorGblz.value.contentArr = res.data.leaveList
  })
}
const proportionApi = () => {
  getProportion({ castTimesNo: props.castTimesNo }).then(res => {
    proportionData.value = res.data
    echartsPhone()
  }).catch(err => {
    console.log(err)
  })
}
let echartsPhone = () => {
  console.log(proportionData.value)
  let myChart = proxy.echarts.init(main.value);
  let option;
  option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '80%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          normal: {
            show: true,
            position: 'inside', //标签的位置
            formatter: "{d}%",
            textStyle: {
              color: '#0B182D',
            }
          },
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: proportionData.value.coolingProportion , name: '冷却时长', itemStyle: { color: '#005AE0' } },
          { value: proportionData.value.castingProportion , name: '浇铸时长', itemStyle: { color: '#39BA15' } },
        ]
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style lang="scss" scoped>
.bigBox {
  height: 702px;
  border: 1px solid rgba(235, 237, 238, 1);
  border-radius: 4px;

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

    span {
      color: rgba(11, 24, 45, 1);
      font-weight: 600;
      font-size: 14px;
      height: 22px;
      line-height: 22px;
      margin-left: 10px;
    }

  }

  .contentTop {
    height: 422px;
    border-bottom: 1px solid rgba(235, 237, 238, 1);

    .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;
        }
      }
    }

    .contentProductionEvents {
      padding-top: 20px;
      display: flex;
      justify-content: center;
    }
  }

  .contentBottom {
    height: 236px;

    .contentHeader {
      margin-top: 20px;

      .contentHeaderD {
        width: 6px;
        height: 6px;
        background: #E83333;
        vertical-align: middle;
        display: inline-block;
        border-radius: 20px;
        box-shadow: rgba(232, 51, 51, 0.4);
        margin-left: 30px;
        margin-right: 8px;
      }

      .contentHeaderT {
        height: 22px;
        line-height: 22px;
        font-weight: 600;
        font-size: 14px;
        color: #0B182D;
        vertical-align: middle;

      }
    }

    .contentBottomBig {
      margin: auto 0;
      margin-left: -110px;

      .proportionBig {
        span {
          display: inline-block;
        }

        .proportionBox {
          width: 10px;
          height: 7px;
          vertical-align: middle;
          margin-right: 8px;
          border-radius: 2px;
        }

        .proportionTitle {
          font-weight: 400;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          color: #7B828E;
        }

        .proportionContent {
          font-weight: 400;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          color: #0B182D;
        }
      }
    }

    .contentBottomLeft {
      width: 600px;

      .contentBottomLeftBox {
        margin-bottom: 40px;

        .contentBottomLeftBoxT {
          margin-bottom: 6px;

          .block {
            width: 10px;
            height: 7px;
            border-radius: 2px;
            background: rgba(57, 186, 21, 1);
            vertical-align: middle;
            display: inline-block;
            margin-right: 8px;
          }

          .name {
            font-weight: 600;
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            color: rgba(11, 24, 45, 1);
            display: inline-block;
          }
        }

        .langBoxOutside {
          width: 500px;
          height: 8px;
          background: rgba(235, 237, 238, 1);

          .langBox {
            height: 8px;
            background-image: linear-gradient(to right, rgba(207, 238, 199, 1), rgba(57, 186, 21, 1));
            position: absolute;

            .langBoxLeftBolid {
              position: relative;
              width: 2px;
              height: 16px;
              background: #000;
              left: -1px;
              top: -4px;
            }

            .langBoxReftBolid {
              position: relative;
              width: 2px;
              height: 16px;
              background: #000;
              top: -34px;
            }

            .langBoxLeftTime {
              position: relative;
              width: 200px;
              font-weight: 400;
              font-size: 12px;
              left: -1px;
              top: -0px;
            }

            .langBoxReftTime {
              position: relative;
              width: 200px;
              font-weight: 400;
              font-size: 12px;
              top: -30px;
            }

          }
        }

      }

      .contentBottomLeftBoxTwo {
        margin-bottom: 40px;

        .contentBottomLeftBoxT {
          margin-bottom: 6px;

          .block {
            width: 10px;
            height: 7px;
            border-radius: 2px;
            background: rgba(0, 90, 224, 1);
            vertical-align: middle;
            display: inline-block;
            margin-right: 8px;
          }

          .name {
            font-weight: 600;
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            color: rgba(11, 24, 45, 1);
            display: inline-block;
          }
        }

        .langBoxOutside {
          width: 500px;
          height: 8px;
          background: rgba(235, 237, 238, 1);
          position: absolute;

          .langBox {
            width: 250px;
            background-image: linear-gradient(to right, rgba(194, 215, 248, 1), rgba(0, 90, 224, 1));
            height: 8px;
            float: right;
          }

          .langBoxLeftBolid {
            position: relative;
            width: 2px;
            height: 16px;
            background: #000;
            right: -500px;
            top: -4px;
          }

          .langBoxLeftTime {
            position: relative;
            width: 200px;
            font-weight: 400;
            font-size: 12px;
            right: -400px;
          }

          .langBoxReftBolid {
            position: relative;
            width: 2px;
            height: 16px;
            background: #000;
            left: 250px;
            top: -34px;
          }

          .langBoxReftTime {
            position: relative;
            width: 200px;
            font-weight: 400;
            font-size: 12px;
            top: -30px;
          }

        }
      }
    }
  }
}

.sidebar-logo {
  color: rgba(194, 215, 248, 1);
}
</style>
