<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 中国一重数字铸坯总览大屏
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-20 16:55:34
 * @Date: 2024-02-29 13:57:40
-->
<template>
  <div class="data-display-container">
    <topHeader :titleWidth="500" :title="'中国一重·数字铸坯总览大屏'" :is_current="true" :is_right="true" :rData="topHeaderData"></topHeader>
    <div class="display-container">
      <div class="set">
        <overBorder :mb="10" :height="310" title="机组生产监控">
          <div class="unit-monitor">
            <div>
              <div class="unit-monitor-api-box">
                <div class="unit-monitor-svg-box"><svg-icon icon-class="set-api-icon" class="set-api-icon" />
                  <span>{{ rTimeData[0]?.prdSeqNum }}流</span>
                </div>
                <div class="unit-monitor-api">
                  <p><svg-icon icon-class="set-no-icon" class="set-no-icon" /><span>{{ rTimeData[0]?.prdSeqId }}</span></p>
                  <div><span>直径</span>:<i>{{ rTimeData[0]?.prdThick }}mm</i></div>
                  <div><span>生产开始时刻</span>:<i>{{ parseTime(rTimeData[0]?.createTime, '{y}/{m}/{d} {h}:{i}') }}</i></div>
                  <div><span>截面</span>:<i>{{ rTimeData[0]?.prdSection }}m²</i></div>
                  <div><span>生产持续时间</span>:<i>{{ rTimeData[0]?.durationTime }}</i></div>
                </div>
              </div>
              <div class="unit-monitor-slider-box">
                <el-slider v-model="sliderValueA" :marks="marksA" :max="rTimeData[0]?.castingBilletTargetValue" :min="0" disabled />
              </div>
            </div>
            <div>
              <div class="unit-monitor-api-box">
                <div class="unit-monitor-svg-box"><svg-icon icon-class="set-api-icon" class="set-api-icon" />
                  <span>{{ rTimeData[1]?.prdSeqNum }}流</span>
                </div>
                <div class="unit-monitor-api">
                  <p><svg-icon icon-class="set-no-icon" class="set-no-icon" /><span>{{ rTimeData[1]?.prdSeqId }}</span></p>
                  <div><span>直径</span>:<i>{{ rTimeData[1]?.prdThick }}mm</i></div>
                  <div><span>生产开始时刻</span>:<i>{{ parseTime(rTimeData[1]?.createTime, '{y}/{m}/{d} {h}:{i}') }}</i></div>
                  <div><span>截面</span>:<i>{{ rTimeData[1]?.prdSection }}m²</i></div>
                  <div><span>生产持续时间</span>:<i>{{ rTimeData[1]?.durationTime }}</i></div>
                </div>
              </div>
              <div class="unit-monitor-slider-box">
                <el-slider v-model="sliderValueB" :marks="marksB" :max="rTimeData[1]?.castingBilletTargetValue" :min="0" disabled />
              </div>
            </div>
          </div>
        </overBorder>
        <overBorder :mb="10" :height="216" title="月度产量统计">
          <echartsBarLine
            :color="monthlyOutputData.color"
            :seriesData="monthlyOutputData.seriesData"
            :legend="monthlyOutputData.legend"
            :xAxisData="monthlyOutputData.xAxisData"
            :type="monthlyOutputData.type"
            :gridTop="'21%'"
          ></echartsBarLine>
        </overBorder>
        <overBorder :mb="10" :height="230" title="质量对比">
          <div class="quality-comparison">
            <div>
              <div class="progress-box">
                <progressBar :title="'本月良好占比'" :percent="qualityMonthCompareData.currentMonth.percentage"></progressBar>
              </div>
              <p><svg-icon icon-class="set-icon-star" class="set-icon-star" />质量等级一般：<span style="color: #FFDE4D;">{{ qualityMonthCompareData.currentMonth.generalNum }}个</span></p>
              <p><svg-icon icon-class="set-icon-starf" class="set-icon-star" />质量等级良好：<span style="color: #18FEFE;">{{ qualityMonthCompareData.currentMonth.goodNum }}个</span></p>
            </div>
            <div>
              <div class="progress-box">
                <progressBar :title="'上月良好占比'" :percent="qualityMonthCompareData.lastMonth.percentage"></progressBar>
              </div>
              <p><svg-icon icon-class="set-icon-star" class="set-icon-star" />质量等级一般：<span style="color: #FFDE4D;">{{ qualityMonthCompareData.lastMonth.generalNum }}个</span></p>
              <p><svg-icon icon-class="set-icon-starf" class="set-icon-star" />质量等级良好：<span style="color: #18FEFE;">{{ qualityMonthCompareData.lastMonth.goodNum }}个</span></p>
            </div>
          </div>
        </overBorder>
        <overBorder :height="200" title="成本费用" is_select @change="handlerCostExpensesChange">
          <echartsPie :seriesData="costExpenses"></echartsPie>
        </overBorder>
      </div>
      <div class="model">
        <!-- <els-iframe :src="''"></els-iframe> -->
        <img src="../../assets/images/disOverImg.png" alt="">
      </div>
      <div class="team-group">
        <overBorder :mb="10" :height="240" title="班组产量对比">
          <echartsBarLine
            :seriesData="teamOutputData.seriesData"
            :legend="teamOutputData.legend"
            :xAxisData="teamOutputData.xAxisData"
            :gridTop="'19%'"
          ></echartsBarLine>
        </overBorder>
        <overBorder :mb="10" :height="496" title="本年度各班组质量情况">
          <div class="team-quality">
            <p><svg-icon icon-class="set-icon-diamond" class="set-no-icon" />各班组·良好等级</p>
            <div class="team-quality-bar">
              <echartsBarLine
                :seriesData="teamQualityData.seriesData"
                :legend="teamQualityData.legend"
                :xAxisData="teamQualityData.xAxisData"
                :type="teamQualityData.type"
                :unit="'个'"
                :gridTop="'15%'"
              ></echartsBarLine>
            </div>
            <p><svg-icon icon-class="set-icon-diamond" class="set-no-icon" />各班组·良好占比</p>
            <div class="team-quality-pre">
              <div v-for="item,i in qualitySituationOfTeamPieInfo" :key="i">
                <div class="progress-box">
                  <progressBar :type="false" :percent="item.value"></progressBar>
                </div>
                <p><span>{{item.name}}</span>·良好等级</p>
              </div>
              <!-- <div>
                <div class="progress-box">
                  <progressBar :type="false" :percent="62.35"></progressBar>
                </div>
                <p><span>乙</span>·良好等级</p>
              </div>
              <div>
                <div class="progress-box">
                  <progressBar :type="false" :percent="62.35"></progressBar>
                </div>
                <p><span>丙</span>·良好等级</p>
              </div><div>
                <div class="progress-box">
                  <progressBar :type="false" :percent="62.35"></progressBar>
                </div>
                <p><span>丁</span>·良好等级</p>
              </div> -->
            </div>
          </div>
        </overBorder>
        <overBorder :height="230" title="班组成本对比" is_select @change="handler3DpieChange">
          <echartPie3D :seriesData="seriesData3D" v-if="is_echart3D"></echartPie3D>
        </overBorder>
      </div>
    </div>
  </div>
</template>

<script setup>
import topHeader from './components/topHeader.vue'
import overBorder from './components/overBorder.vue';
import echartsBarLine from './components/echartsBarLine'
import progressBar from './components/progressBar.vue'
import echartsPie from './components/echartsPie'
import echartPie3D from './components/echartsPie3D.vue'
import {
  queryTeamInfo,
  qualityMonthCompare,
  qualitySituationOfTeam,
  costingPie,
  currentYearMonthlyProductionStatistics,
  realTimeData,
  teamCostComparison,
  everyTeamProductionStatistics
} from '@A/dataDisplay/overview.js'
import { parseTime } from '@U/cfhi.js'

const topHeaderData = ref({label1:'班组',value1: '无',label2:'班组长',value2: '无',})
const sliderValueA = ref(13)
const sliderValueB = ref(10)
const marksA = ref({ 0: '0m', 16: '16m',})
const marksB = ref({ 0: '0m', 16: '16m',})
const rTimeData = ref([])
const is_echart3D = ref(false)
// 质量对比数据
const qualityMonthCompareData = ref({
  currentMonth: {
    percentage: 0,
    generalNum: 0,
    goodNum: 0
  },
  lastMonth: {
    percentage: 0,
    generalNum: 0,
    goodNum: 0
  }
})
// 本年度各班组质量情况
const qualitySituationOfTeamPieInfo = ref([])
// 月度产量统计 echarts数据
const monthlyOutputData = ref({
  color: ['#06F7A1'],
  type: 'bar',
  seriesData: [
    [23, 45, 65, 23, 14, 52, 64],
  ],
  legend: ['月度产量'],
  xAxisData: ['1月','2月','3月','4月','5月','6月','7月',]
})
// 班组产量对比 echarts数据
const teamOutputData = ref({
  seriesData: [],
  legend: [],
  xAxisData: []
})
// 本年度各班组质量情况 echarts数据 各班组·良好等级
const teamQualityData = ref({
  type: 'bar',
  seriesData: [],
  legend: [],
  xAxisData: []
})
// 成本费用 echarts数据
const costExpenses = ref([])
// 班组成本对比3d图数据
const seriesData3D = ref([])
// 成本费用时间下拉框选择事件
const handlerCostExpensesChange = (val) => {
  getCostingPie(val)
}
// 班组成本对比下拉框选择事件
const handler3DpieChange = (val) => {
  getTeamCostComparison(val)
}
// 初始化大屏数据
const initData = () => {
  getQueryTeamInfo()
  postQualityMonthCompare()
  postQualitySituationOfTeam()
  getCostingPie()
  getCurrentYearMonthlyProductionStatistics()
  postRealTimeData()
  getTeamCostComparison()
  postEveryTeamProductionStatistics()
}
// 获取班组，班组长信息
const getQueryTeamInfo = () => {
  const current = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
  queryTeamInfo(current).then(res => {
    if(res.data && res.data.length > 0){
      topHeaderData.value.value1 = res.data[0].teamName
      topHeaderData.value.value2 = res.data[0].teamLeaderName
    } else {
      topHeaderData.value.value1 = '无'
      topHeaderData.value.value2 = '无'
    }
  }).catch(err => console.log(err))
}
// 获取质量对比信息
const postQualityMonthCompare = () => {
  qualityMonthCompare().then(res => {
    qualityMonthCompareData.value = res.data
  }).catch(err => console.log(err))
}
// 本年度各班组质量情况
const postQualitySituationOfTeam = () => {
  qualitySituationOfTeam().then(res => {
    qualitySituationOfTeamPieInfo.value = res.data?.pieInfo || []
    teamQualityData.value.xAxisData = res.data?.goodXyNumInfo?.xaxisData.map((item) => item + '月') || []
    let legend = []
    let seriesData = []
    res.data?.goodXyNumInfo?.row.forEach(item => {
      legend.push(item.name)
      seriesData.push(item.data)
    })
    teamQualityData.value.seriesData = seriesData
    teamQualityData.value.legend = legend
  }).catch(err => console.log(err))
}
// 成本费用
const getCostingPie = (val = 0) => {
  costingPie(val).then(res => {
    costExpenses.value = res.data
  }).catch((err) => console.log(err))
}
// 月度产量统计
const getCurrentYearMonthlyProductionStatistics = () => {
  currentYearMonthlyProductionStatistics().then(res => {
    monthlyOutputData.value.xAxisData = res.data?.xaxisData.map(item => item + '月')
    let legend = []
    let seriesData = []
    res.data?.row.forEach(item => {
      legend.push('月度产量')
      seriesData.push(item.data)
    })
    monthlyOutputData.value.legend = legend
    monthlyOutputData.value.seriesData = seriesData
  }).catch(err => console.log(err))
}
// 机组生产监控
const postRealTimeData = () => {
  realTimeData().then(res => {
    rTimeData.value = res?.data || []
    let tValA = res?.data[0]?.castingBilletTargetValue
    let aValA = res?.data[0]?.castingBilletActualValue
    let tValB = res?.data[1]?.castingBilletTargetValue
    let aValB = res?.data[1]?.castingBilletActualValue
    sliderValueA.value = aValA
    sliderValueB.value = aValB
    marksA.value = { 0: '0m' }
    marksA.value[tValA] = tValA + 'm'
    marksA.value[aValA] = aValA + 'm'
    marksB.value = { 0: '0m' }
    marksB.value[tValB] = tValB + 'm'
    marksB.value[aValB] = aValB + 'm'
  }).catch(err => console.log(err))
}
// 班组成本对比
const getTeamCostComparison = (val=0) => {
  is_echart3D.value = false // 解决3D饼图数据更新不重渲染的问题
  teamCostComparison(val).then(res => {
    seriesData3D.value = res?.data
    is_echart3D.value = true
  }).catch(err => console.log(err))
}
// 班组产量对比
const postEveryTeamProductionStatistics = () => {
  everyTeamProductionStatistics().then(res => {
    teamOutputData.value.xAxisData = res.data?.xaxisData
    let seriesData = []
    let legend = []
    res.data?.row.forEach(item => {
      seriesData.push(item.data)
      legend.push(item.name)
    })
    teamOutputData.value.seriesData = seriesData
    teamOutputData.value.legend = legend
  }).catch(err => console.log(err))
}
nextTick(() => {
  initData()
})

</script>

<style lang="scss" scoped>
.display-container{
  width: 100vw;
  height: h(1010);
  padding: 0 w(24) h(24);
  display: flex;
  font-size: w(16);
  .set{
    width: w(416);
    height: 100%;
    .unit-monitor{
      padding: h(16) w(16);
      >div{
        width:100%;
        height: h(115);
        .unit-monitor-api-box{
          display: flex;
          justify-content: space-between;
          .unit-monitor-svg-box{
            width: w(72);
            height: h(72);
            text-align: center;
            position: relative;
            .set-api-icon{
              font-size: h(72);
            }
            >span{
              position: absolute;
              display: block;
              width: w(72);
              height: h(72);
              text-align: center;
              line-height: h(72);
              top: 0;
              left: 0;
              font-family: pmzd;
              color: #18FEFE;
            }
          }
          .unit-monitor-api{
            width: calc(100% - w(74));
            height: h(72);
            >p{
              margin: 0;
              padding: 0;
              height: h(24);
              line-height: h(24);
              background: url('../../assets/images/set-api-back.png') no-repeat;
              background-size: 60% 100%;
              background-position: right;
              .set-no-icon{
                font-size: h(24);
                margin: 0 w(4);
              }
              >span{
                font-family: pmzd;
                color: #fff;
                font-size: w(16);
                text-shadow: 2px 2px 8px rgba(0, 138, 255, 0.7);
                display: inline-block;
                height: h(24);
                line-height: h(24);
                vertical-align: top;
              }
            }
            >div{
              display: inline-block;
              min-width: 24%;
              font-size: w(14);
              >i{
                font-style: normal;
                font-family: pmzd;
                color: #18FEFE;
              }
            }
          }
        }
        .unit-monitor-slider-box{
          width: 96%;
          margin: 0 auto;
          :deep(.el-slider){
            height: h(24);
            .el-slider__runway{
              height: 6px;
              border-radius: 0;
              background: rgba(0, 138, 255, 0.2);
              .el-slider__bar{
                border-radius: 0;
                background-image:-webkit-linear-gradient(right,#00F6FF,#008AFF);
              }
              .el-slider__button{
                background: #000;
                border: 2px solid #008AFF;
                position: absolute;
                top: 8px;
                left: 8px;
              }
              .el-slider__button-wrapper{
                position: relative;
              }
              .el-slider__button-wrapper::after{
                display: block;
                position: absolute;
                left: 16px;
                top: 16px;
                width: w(4);
                height: w(4);
                background: #fff;
                box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.44);
                border-radius: 50%;
              }
              .el-slider__marks-text{
                margin-top: 0;
                top: 14px;
              }
            }
            .el-slider__stop{
              display: none;
            }
          }
        }
      }
      >div:first-child{
        margin-bottom: h(10);
      }
    }
    .quality-comparison{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      >div{
        width: 50%;
        height: 100%;
        .progress-box{
          width: w(120);
          height: h(120);
          margin: 0 auto;
          padding-top: h(10);
        }
        >p{
          margin: h(6) 0;
          width: 100%;
          text-align: center;
          font-size: w(12);
          >.svg-icon{
            font-size: w(16);
            color: #ff1818;
          }
          >span{
            font-family: pmzd;
          }
        }
      }
    }
  }
  .model{
    width: calc(100% - w(832));
    height: 100%;
    position: relative;
    z-index: 0;
    // background: rgba(100, 200, 100, 0.5);
    >img{
      width: 110%;
      height: 100%;
      position: absolute;
      top: 0;
      left: -5%;
      z-index: 0;
    }
  }
  .team-group{
    width: w(416);
    height: 100%;
    .team-quality{
      >p{
        font-family: pmzd;
        font-size: w(14);
        font-weight: 400;
        color: #fff;
        padding: h(16) w(16);
        margin: 0;
        text-shadow: 2px 2px 8px rgba(0, 138, 255, 0.7);
        >.svg-icon{
          font-size: w(16);
        }
      }
      >p:first-child{
        padding: h(16) w(16) 0;
      }
      >div{
        width: 100%;
      }
      .team-quality-bar{
        height: h(234);
      }
      .team-quality-pre{
        height: h(120);
        display: flex;
        justify-content: space-between;
        >div{
          width: 25%;
          height: 100%;
          .progress-box{
            width: 100%;
            height: 70%;
          }
          >p{
            margin: 0;
            padding: h(6) 0;
            font-size: w(13);
            text-align: center;
            font-family: pmzd;
            font-weight: 400;
            >span{
              color: #FF1818;
            }
          }
        }
      }
    }
  }
}
</style>
