CASM_web/src/views/dashboard.vue

<template>
  <div class="app-container">
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="3">
        <div class="card-box">
          {{ tLang('home', '员工总数') }}：200{{ tLang('home', '人') }}
        </div>
      </el-col>
      <el-col :span="3">
        <div class="card-box">
          {{ tLang('home', '产出进度') }}：60%
        </div>
      </el-col>
    </el-row> -->
    <div class="chart-content">
      <div class="chart-content-card">
        <v-chart ref="lineChartRef" class="line-chart" :option="line_option" />
      </div>
      <div class="chart-content-card">
        <v-chart ref="pieChartRef" class="line-chart" :option="pie_option" />
      </div>
      <div class="right-content-card">
        <div>{{ deviceState.on + tLang('home', '台') }}/{{ deviceState.total + tLang('home', '台') }}</div>
        <div>{{ tLang('home', '设备') + `:` + tLang('home', '使用中') + `/` + tLang('home', '总数') }}</div>
      </div>
    </div>
    <div class="bottom">
      <div class="device-item" v-for="(item, index) in produceList"
        :style="{ 'background-color': item_bgcolor[item.state] }">
        <span class="iconfont icon-shengchanxiaoshuai icon-style"
          :style="{ color: item_color[item.progressSignal], borderColor: item_color[item.progressSignal] }"></span>
        <div class="device-item-content">
          <div class="device-item-content-flex left">
            <img class="frj-img" :src="item.file" alt="">
            <span>{{ tLang('device', '设备编码') + `：` + item.deviceCode }}</span>
          </div>
          <div class="device-item-content-flex right">
            <ul class="produce-list">
              <li>{{ tLang('home', '工作人员') + `：` + item.userName }}</li>
              <li>{{ tLang('home', '加工信息') + `：` + item.productionCode }}</li>
              <li>{{ tLang('home', '产量') + `：` + item.output }}/{{ item.planOutput }}</li>
              <li>{{ tLang('home', '稼动率') + `：` + item.activation }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination :hide-on-single-page="false" v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="total"
        @size-change="getList" @current-change="getList" />
    </div>
  </div>

</template>

<script setup>
import { getHomeDeviceInfoVO, homeDeviceRate, halfHourOutputTotal } from "@/api/home";
const { proxy } = getCurrentInstance();
let loading = ref(true)
// 查询参数
let queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
})
const baseUrl = import.meta.env.VITE_APP_BASE_API;
let total = ref(0)
let deviceState = reactive({
  on: 0,
  off: 0,
  total: 0
})
let produceList = ref([])
let item_bgcolor = {
  0: '#E8E8E8',
  1: '#E9E5C9',
  2: '#C9F6CC',
  3: '#E9E5C9',
  4: '#EFCAC5',
}

let item_color = {
  0: '#5EF417',
  1: '#176AF4',
  2: '#DACB71',
  3: '#D81E06',
  4: '#CCCCCC',

}
let lineChartRef = ref(null);
let pieChartRef = ref(null);
window.onresize = () => {
  lineChartRef.value.resize();
  pieChartRef.value.resize();
}

const line_option = ref({
  title: {
    text: proxy.tLang('home', '产量')
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
});

const pie_option = ref({
  title: {
    "text": proxy.tLang('home', '设备利用率') + "：60%",
    "left": "0",
    "top": 0,
    "textStyle": {
      "color": "#333",
      "fontSize": 24
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '5%',
  },
  series: [
    {
      name: proxy.tLang('home', '设备状态'),
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: true,
        fontSize: 16,
        formatter: '{b} : {c} ({d}%)'
      },
      data: []
    }
  ]
})

function getList() {
  loading.value = true;
  halfHourOutputTotal().then(response => {
    line_option.value.series[0].data = response.data.count
    line_option.value.xAxis.data = response.data.time
  });
  homeDeviceRate().then(response => {
    pie_option.value.series[0].data = [
    { value: response.data.off, name: proxy.tLang('home', '停机') },

      { value: response.data.on, name: proxy.tLang('home', '使用中') }
    ]
    deviceState.on = response.data.on;
    deviceState.off = response.data.off;
    deviceState.total = response.data.total;
    pie_option.value.title.text = proxy.tLang('home', '设备利用率') + `：${((response.data.on / response.data.total) * 100).toFixed(1)}%`
  });
  getHomeDeviceInfoVO().then(response => {
    produceList.value = response.rows.map((item, index) => {
      item.file = baseUrl + item.file;
      return item;
    });
    total.value = response.total;
    // loading.value = false;
  });
}
onMounted(() => {
  getList();
})
</script>

<style scoped lang="scss">
@import '@/assets/iconfont/iconfont.css';

.card-box {
  background-color: #C8EAF4;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 5px 5px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #333333;
}

.chart-content {
  width: 100%;
  height: 310px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .chart-content-card {
    width: 40%;
    height: 100%;

    .line-chart {
      width: 100%;
      height: 100%;
    }
  }

  .right-content-card {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #333333;

    div {
      margin-bottom: 10px;
    }
  }

}

.bottom {
  width: 100%;
  height: calc(100vh - 310px - 110px);
  display: grid;
  grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
  grid-template-rows: 50% 50%;
  /* 设置网格项目间间隙 */
  gap: 10px 10px;

  .device-item {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 8px 2px 2px 2px;
    box-sizing: border-box;

    .icon-style {
      font-size: 30px;
      border: 2px solid;
      border-radius: 50%;
      padding: 10px;
      line-height: 50px;
      /*color: #bfc;*/
    }

    .device-item-content {
      width: calc(100% - 4px);
      height: calc(100% - 50px - 4px);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;

      .left {
        width: 50%;
      }

      .right {
        flex: 1;
        font-size: 12px;
      }

      .device-item-content-flex {
        height: 100%;
        box-sizing: border-box;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        overflow: hidden;

        .frj-img {
          max-width: 100%;
          max-height: 70%;
          margin-bottom: 5px;
        }

        .produce-list {
          padding: 0;
          margin: 0 0 0 15px;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          flex-direction: column;

          li {
            list-style: none;
          }
        }
      }

    }
  }
}

.pagination {
  width: 100%;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>