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">0.05%</li>
              <li class="three green">0</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障回复时间</li>
              <li class="two orange">20</li>
              <li class="three green">0</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障间隔时间</li>
              <li class="two orange">20</li>
              <li class="three green">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">0.05%</li>
              <li class="three green">0</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障回复时间</li>
              <li class="two orange">20</li>
              <li class="three green">0</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障间隔时间</li>
              <li class="two orange">20</li>
              <li class="three green">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">0.05%</li>
              <li class="three green">0</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障回复时间</li>
              <li class="two orange">20</li>
              <li class="three green">0</li>
            </ul>
            <ul class="table ul-body">
              <li class="one">平均故障间隔时间</li>
              <li class="two orange">20</li>
              <li class="three green">0</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1">
        <div class="title">注塑设备停机率</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">装配设备停机率</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">涂装设备停机率</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1">
        <div class="title">注塑平均故障恢复时间（MTTR/min）</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">装配平均故障恢复时间（MTTR/min）</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">涂装平均故障恢复时间（MTTR/min）</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1">
        <div class="title">注塑平均故障间隔时间MTBF（H）</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">装配平均故障间隔时间MTBF（H）</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
      <div class="data1 ml-14px">
        <div class="title">涂装平均故障间隔时间MTBF（H）</div>
        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions, pieOptions } from './echarts-data'
import * as IndexApi from '@/api/home'
const { t } = useI18n()
const data = ref()
const lineIndex = ref(0)
// 本月发货单趋势
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async () => {
  // set(
  //   lineOptionsData,
  //   'xAxis.data',
  //   supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
  // )
  set(lineOptionsData, 'legend.data',['目标','实际'])
  set(lineOptionsData, 'series', [
    {
      name: '注塑设备停机率',
      smooth: true,
      type: 'line',
      itemStyle: {},
      animationDuration: 2800,
      animationEasing: 'quadraticOut',
      data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
    }
  ])
  lineIndex.value++
}

// 首页获取设备停机状态/设备总数/月设备保养完成率/月汇总停机时间
function getData(){
  IndexApi.getData().then((res)=>{
data.value = res
console.log(res)
  })
}
onMounted(async () => {
  // getInvoiceCharts()
  getData()
})
</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;
  }
}
</style>