eam-ui/src/views/home/index.vue

<!-- 供应商首页 -->
<template>
  <div class="one-row">
    <div class="data">
      <div class="data-item">
        <div class="small-title">注塑</div>
        <div class="small-data">
          <div class="small-data-item small-data-item1">
            <div class="small-data-item-txt">
              <div>{{ data?.zsTJ || 0 }}<span>个</span></div>
              <div>设备停机状态</div>
            </div>
            <img src="../../assets/imgs/icon1.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item2">
            <div class="small-data-item-txt">
              <div>{{ data?.zsZs || 0 }}<span>个</span></div>
              <div>设备总数</div>
            </div>
            <img src="../../assets/imgs/icon2.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item3 mt-10px">
            <div class="small-data-item-txt">
              <div>{{ data?.zsWC || 0 }}</div>
              <div>月设备保养完成率</div>
            </div>
            <img src="../../assets/imgs/icon5.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item4 mt-10px">
            <div class="small-data-item-txt">
              <div>{{ data?.zsTime || 0 }}<span>分钟</span></div>
              <div>月汇总停机时间</div>
            </div>
            <img src="../../assets/imgs/icon3.png" alt="" class="img" />
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">装配</div>
        <div class="small-data">
          <div class="small-data-item small-data-item5">
            <div class="small-data-item-txt">
              <div>{{ data?.zpTJ || 0 }}<span>个</span></div>
              <div>设备停机状态</div>
            </div>
            <img src="../../assets/imgs/icon1.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item6">
            <div class="small-data-item-txt">
              <div>{{ data?.zpZs || 0 }}<span>个</span></div>
              <div>设备总数</div>
            </div>
            <img src="../../assets/imgs/icon2.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item7 mt-10px">
            <div class="small-data-item-txt">
              <div>{{ data?.zpWC || 0 }}</div>
              <div>月设备保养完成率</div>
            </div>
            <img src="../../assets/imgs/icon5.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item8 mt-10px">
            <div class="small-data-item-txt">
              <div>{{ data?.zpTime || 0 }}<span>分钟</span></div>
              <div>月汇总停机时间</div>
            </div>
            <img src="../../assets/imgs/icon3.png" alt="" class="img" />
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">涂装</div>
        <div class="small-data">
          <div class="small-data-item small-data-item3">
            <div class="small-data-item-txt">
              <div>{{ data?.tzTJ || 0 }}<span>个</span></div>
              <div>设备停机状态</div>
            </div>
            <img src="../../assets/imgs/icon1.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item4">
            <div class="small-data-item-txt">
              <div>{{ data?.tzZs || 0 }}<span>个</span></div>
              <div>设备总数</div>
            </div>
            <img src="../../assets/imgs/icon2.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item5 mt-10px">
            <div class="small-data-item-txt">
              <div>{{ data?.tzWC || 0 }}</div>
              <div>月设备保养完成率</div>
            </div>
            <img src="../../assets/imgs/icon5.png" alt="" class="img" />
          </div>
          <div class="small-data-item small-data-item6 mt-10px">
            <div class="small-data-item-txt">
              <div>{{ data?.tzTime || 0 }}<span>分钟</span></div>
              <div>月汇总停机时间</div>
            </div>
            <img src="../../assets/imgs/icon3.png" alt="" class="img" />
          </div>
        </div>
      </div>
    </div>
    <div class="data mt-14px">
      <div class="data-item">
        <div class="small-title">注塑年度指标</div>
        <div class="small-data">
          <div class="table-box">
            <ul class="table header">
              <li class="one">指标名称</li>
              <li class="two">目标</li>
              <li class="three">实际</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">设备停机率</li>
              <li class="two orange">{{ yearTarget.zsTJGoal || '0%' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.zsTJActual) > parseFloat(yearTarget.zsTJGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.zsTJActual || '0%' }}</li
              >
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障恢复时间(MTTR/min)</li>
              <li class="two orange">{{ yearTarget.zsHFGoal || '0' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.zsHFActual) > parseFloat(yearTarget.zsHFGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.zsHFActual || '0' }}</li
              >
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障间隔时间(H)</li>
              <li class="two orange">{{ yearTarget.zsJGGoal || '0' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.zsJGActual) > parseFloat(yearTarget.zsJGGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.zsJGActual || '0' }}</li
              >
            </ul>
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">装配年度指标</div>
        <div class="small-data">
          <div class="table-box">
            <ul class="table header">
              <li class="one">指标名称</li>
              <li class="two">目标</li>
              <li class="three">实际</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">设备停机率</li>
              <li class="two orange">{{ yearTarget.zpTJGoal || '0%' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.zpTJActual) > parseFloat(yearTarget.zpTJGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.zpTJActual || '0%' }}</li
              >
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障恢复时间(MTTR/min)</li>
              <li class="two orange">{{ yearTarget.zpHFGoal || '0' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.zpHFActual) > parseFloat(yearTarget.zpHFGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.zpHFActual || '0' }}</li
              >
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障间隔时间(H)</li>
              <li class="two orange">{{ yearTarget.zpJGGoal || '0' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.zpJGActual) > parseFloat(yearTarget.zpJGGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.zpJGActual || '0' }}</li
              >
            </ul>
          </div>
        </div>
      </div>
      <div class="data-item ml-14px">
        <div class="small-title">涂装年度指标</div>
        <div class="small-data">
          <div class="table-box">
            <ul class="table header">
              <li class="one">指标名称</li>
              <li class="two">目标</li>
              <li class="three">实际</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">设备停机率</li>
              <li class="two orange">{{ yearTarget.tzTJGoal || '0%' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.tzTJActual) > parseFloat(yearTarget.tzTJGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.tzTJActual || '0%' }}</li
              >
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障恢复时间(MTTR/min)</li>
              <li class="two orange">{{ yearTarget.tzHFGoal || '0' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.tzHFActual) > parseFloat(yearTarget.tzHFGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.tzHFActual || '0' }}</li
              >
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障间隔时间(H)</li>
              <li class="two orange">{{ yearTarget.tzJGGoal || '0' }}</li>
              <li
                class="three"
                :class="
                  parseFloat(yearTarget.tzJGActual) > parseFloat(yearTarget.tzJGGoal)
                    ? 'red'
                    : 'green'
                "
                >{{ yearTarget.tzJGActual || '0' }}</li
              >
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1">
        <div class="title">注塑设备停机率</div>
        <Echart :options="lineOptionsData1" :height="280"  />
      </div>
      <div class="data1 ml-14px">
        <div class="title">装配设备停机率</div>
        <Echart :options="lineOptionsData2" :height="280" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">涂装设备停机率</div>
        <Echart :options="lineOptionsData3" :height="280"  />
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1">
        <div class="title">注塑平均故障恢复时间（MTTR/min）</div>
        <Echart :options="lineOptionsData4" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">装配平均故障恢复时间（MTTR/min）</div>
        <Echart :options="lineOptionsData5" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">涂装平均故障恢复时间（MTTR/min）</div>
        <Echart :options="lineOptionsData6" :height="280" :key="lineIndex" />
      </div>
    </div>
     <div class="two-row mt-14px">
      <div class="data1">
        <div class="title">注塑平均故障间隔时间MTBF（H）</div>
        <Echart :options="lineOptionsData7" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">装配平均故障间隔时间MTBF（H）</div>
        <Echart :options="lineOptionsData8" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">涂装平均故障间隔时间MTBF（H）</div>
        <Echart :options="lineOptionsData9" :height="280" :key="lineIndex" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions1,lineOptions2,lineOptions3,lineOptions4,lineOptions5,lineOptions6,lineOptions7,lineOptions8,lineOptions9,lineOptions } from './echarts-data'
import * as IndexApi from '@/api/home'
const { t } = useI18n()
const data = ref()
const lineIndex = ref(0)
const yearTarget = ref({})
// 本月发货单趋势
const lineOptionsData1 = reactive<EChartsOption>(lineOptions1) as EChartsOption
const lineOptionsData2 = reactive<EChartsOption>(lineOptions2) as EChartsOption
const lineOptionsData3 = reactive<EChartsOption>(lineOptions3) as EChartsOption
const lineOptionsData4 = reactive<EChartsOption>(lineOptions4) as EChartsOption
const lineOptionsData5 = reactive<EChartsOption>(lineOptions5) as EChartsOption
const lineOptionsData6 = reactive<EChartsOption>(lineOptions6) as EChartsOption
const lineOptionsData7 = reactive<EChartsOption>(lineOptions7) as EChartsOption
const lineOptionsData8 = reactive<EChartsOption>(lineOptions8) as EChartsOption
const lineOptionsData9 = reactive<EChartsOption>(lineOptions9) as EChartsOption
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async (factory, data) => {
  console.log( data)
  if (factory == 'ZS') {
    let ZSTJAGOAL = data.TJACT.map((item) => data.TJAGOAL+'%')
    let ZSHFGOAL = data.HFACT.map((item) => data.HFGOAL)
    let ZSJGGOAL = data.JGACT.map((item) => data.JGGOAL)
    set(lineOptionsData1, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data:  data.TJACT
      }, {
        name: '目标',
        smooth: true,
        type: 'line',
        data: ZSTJAGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
    set(lineOptionsData4, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data:  data.HFACT
      }, {
        name: '目标',
        smooth: true,
        type: 'line',
        data: ZSHFGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
    set(lineOptionsData7, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data:  data.JGACT
      }, {
        name: '目标',
        smooth: true,
        type: 'line',
        data: ZSJGGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
 
  }else if(factory == 'ZP'){
    let ZPTJAGOAL = data.TJACT.map((item) => data.TJAGOAL+'%')
    let ZPHFGOAL = data.HFACT.map((item) => data.HFGOAL)
    let ZPJGGOAL = data.JGACT.map((item) => data.JGGOAL)
    set(lineOptionsData2, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data: data.TJACT
      },
      {
        name: '目标',
        smooth: true,
        type: 'line',
        data: ZPTJAGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
    set(lineOptionsData5, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data:  data.HFACT
      }, {
        name: '目标',
        smooth: true,
        type: 'line',
        data: ZPHFGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
    set(lineOptionsData8, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data:  data.JGACT
      }, {
        name: '目标',
        smooth: true,
        type: 'line',
        data: ZPJGGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
 
  }else if(factory == 'TZ'){
    let TZTJAGOAL = data.TJACT.map((item) => data.TJAGOAL)
    let TZHFGOAL = data.HFACT.map((item) => data.HFGOAL)
    let TZJGGOAL = data.JGACT.map((item) => data.JGGOAL)
    set(lineOptionsData3, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data: data.TJACT
      },
      {
        name: '目标',
        smooth: true,
        type: 'line',
        data: TZTJAGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
    set(lineOptionsData6, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data:  data.HFACT
      }, {
        name: '目标',
        smooth: true,
        type: 'line',
        data: TZHFGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
    set(lineOptionsData9, 'series', [{
        name: '实际',
        smooth: true,
        type: 'line',
        itemStyle: {},
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        data:  data.JGACT
      }, {
        name: '目标',
        smooth: true,
        type: 'line',
        data: TZJGGOAL,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        itemStyle:{
          opacity:0
        },
        lineStyle:{
          type:'dotted'
        }
      }
    ])
 
  }
  
}

// 首页获取设备停机状态/设备总数/月设备保养完成率/月汇总停机时间
function getData() {
  IndexApi.getData().then((res) => {
    data.value = res
  })
}
// 获取年度指标
function getYearTarget() {
  IndexApi.getYearTarget().then((res) => {
    yearTarget.value = res
  })
}
// 获取首页线形图
function getChartsData(factory) {
  IndexApi.getChartsData(factory).then((res) => {
    console.log(res)
    getInvoiceCharts(factory, res)
  })
}
onMounted(async () => {
  // getInvoiceCharts()
  getData()
  getYearTarget()
  getChartsData('ZS')
  getChartsData('ZP')
  getChartsData('TZ')
})
</script>
<style scoped lang="scss">
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  position: relative;
  padding-left: 10px;
  &::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 16px;
    background: #3c7adf;
    left: 0px;
    top: 3px;
    border-radius: 8px;
  }
}
.data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .data-item {
    width: calc(100% / 3);
    padding: 10px 0px;
    background: white;
    .small-title {
      padding-bottom: 10px;
      position: relative;
      padding-left: 25px;
      &::after {
        content: '';
        position: absolute;
        width: 4px;
        height: 16px;
        background: #3c7adf;
        left: 15px;
        top: 3px;
        border-radius: 8px;
      }
    }
    .small-data {
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 0px 14px;
      flex-wrap: wrap;
      .small-data-item {
        width: calc(50% - 46px);
        height: 70px;
        display: flex;
        align-items: center;
        border-radius: 6px;
        color: white;
        padding: 0px 20px;
        .small-data-item-txt {
          flex: 1;
          div {
            &:nth-child(1) {
              font-size: 20px;
              span {
                font-size: 12px;
                padding-left: 6px;
              }
            }
            &:nth-child(2) {
              font-size: 12px;
            }
          }
        }
        .img {
          width: 30px;
          opacity: 0.5;
        }
      }
      .small-data-item1 {
        background: linear-gradient(to left, #fd817d, #fcad80);
      }
      .small-data-item2 {
        background: linear-gradient(to left, #46c6fa, #336bfe);
      }
      .small-data-item3 {
        background: linear-gradient(to left, #96a6cc, #595f82);
      }
      .small-data-item4 {
        background: linear-gradient(to left, #08dcd5, #46e2bb);
      }
      .small-data-item5 {
        background: linear-gradient(to left, #f4c46b, #ffb313);
      }
      .small-data-item6 {
        background: linear-gradient(to left, #cad0fc, #97a2fa);
      }
      .small-data-item7 {
        background: linear-gradient(to left, #fcc7c7, #ff8888);
      }
      .small-data-item8 {
        background: linear-gradient(to left, #6eccf8, #02acfd);
      }
    }
  }
}
.two-row {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .data1 {
    background: white;
    padding: 14px;
    width: calc(100% / 3);
  }
}
.table-box {
  border: 1px solid #dedede;
  width: 100%;
}
.table {
  list-style: none;
  padding: 0px;
  width: 100%;
}
.header {
  display: flex;
  background: #f5f5f5;
  margin: 0px;
  li {
    width: 25%;
    text-align: center;
    padding: 10px;
  }
  .one {
    width: 50%;
  }
}
.ul-body {
  display: flex;
  margin: 0px;
  li {
    width: 25%;
    text-align: center;
    padding: 10px;
  }
  .one {
    width: 50%;
  }
  .green {
    color: #18bb43;
    font-size: 18px;
    font-weight: bold;
  }
  .orange {
    color: #ffb062;
    font-size: 18px;
    font-weight: bold;
  }
  .red {
    color: #ff0000;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>