shgx_tz_vue-sync/src/views/OperationManagement/assemblyWorkshop.vue

<template>
  <div class="app-container">
    <div>
      <div class="title">装配车间生产状态统计</div>
    </div>
    <vxe-table border resizable align="center" ref="xTable" :data="OperationList">
      <vxe-column field="lineId" title="产线编码" width="120" />
      <vxe-column field="lineName" title="产线名称" width="120" />
      <vxe-column field="productProgressRate" title="生产进度" width="500" :title-help="{ message: '小于20%:红色;小于60%:黄色;大于60%绿色' }">
        <template #default="{ row }">
          <div class="progress">
            <div style="width: 400px">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="row.productProgressRate"
                :color="customColor(row.productProgressRate)"
              ></el-progress>
            </div>
            <span>{{ row.productedNum }}/{{ row.planNum }}</span>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="isProducting" title="生产状态" :title-help="{ message: '生产中:绿色;停止生产:灰色' }" width="100">
        <template #default="{ row }">
          <template v-if="row.isProducting">
            <div class="producting"></div>
          </template>
          <template v-else>
            <div class="productstop"></div>
          </template>
        </template>
      </vxe-column>
      <vxe-column field="QualityRate" title="不良占比" :title-help="{ message: '不良品:红色;良品:灰色' }">
        <template #default="{ row }">
          <div class="progress">
            <div style="height: 100px; width: 100px; margin: 0 auto" class="pies"></div>
            <div style="margin: auto auto">{{ row.qualityRate }}% {{ row.goodproductsNum }}/{{ row.defectiveProductsNum }}</div>
          </div>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import * as echarts from 'echarts'
import { getOperation } from '@/api/operationManagement/operation.js'
export default {
  name: 'assemblyWorkshop',
  data() {
    return {
      OperationList: [],
    }
  },
  created() {
   
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 获取运营数据
    getData() {
      const data = {
        //这里填写车间id
        WorkerID: '1234',
      }
      getOperation(data).then((res) => {
        if (res.code == 200) {
          this.OperationList = res.data
          this.drawChart()
        }
      })
    },
    //hub获取信息
    getOperationList(info) {
      console.log('signalR', info)
      this.OperationList = info
      this.drawChart()
    },
    //进度条颜色
    customColor(row) {
      if (row <= 20) {
        return 'red'
      } else if (row <= 60) {
        return 'yellow'
      } else {
        return 'green'
      }
    },

    // 饼图配置
    drawChart() {
      this.$nextTick(() => {
        var chartDom = document.getElementsByClassName('pies')
        console.log('chartDom.length', chartDom.length)
        for (let i = 0; i < chartDom.length; i++) {
          const data = [
            { value: this.OperationList[i].defectiveProductsNum, name: '不良品' },
            { value: this.OperationList[i].goodproductsNum, name: '良品' },
          ]
          var myChart = echarts.init(chartDom[i])
          var option
          option = {
            color: ['red', '#909399'],

            series: [
              {
                type: 'pie',
                radius: '50%',
                data: data,
                label: {
                  normal: {
                    show: false,
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
              },
            ],
          }

          option && myChart.setOption(option)

          //监听，根据视口变化动态从新渲染表格
          window.addEventListener('resize', function () {
            myChart.resize()
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  font-size: larger;
  font-weight: bold;
  color: #409eff;
  margin: 0, auto;
  text-align: center;
}

.progress {
  display: flex;
  justify-content: space-between;
}

.producting {
  width: 30px;
  height: 30px;
  background: green;
  border: 1px solid green;
  border-radius: 50%;
  margin: 0 auto;
}

.productstop {
  width: 30px;
  height: 30px;
  background: gray;
  border: 1px solid gray;
  border-radius: 50%;
  margin: 0 auto;
}

.first-col {
  position: relative;
  height: 20px;
}
.first-col:before {
  content: '';
  position: absolute;
  left: -15px;
  top: 10px;
  width: 170px;
  height: 1px;
  transform: rotate(18deg);
  background-color: #e8eaec;
}
.first-col .first-col-top {
  position: absolute;
  right: 4px;
  top: -10px;
}
.first-col .first-col-bottom {
  position: absolute;
  left: 4px;
  bottom: -10px;
}
.my-filter {
  margin: 10px;
}
.page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
</style>