<template>
  <el-card shadow="never" body-style="padding: 0 0 20px 0;">
    <el-row>
      <el-col v-bind="styleResponsive ? { lg: 10, md: 10 } : { span: 10 }">
          <div class="ele-page-header ele-cell">
				<div class="ele-cell header-round">
					<div class="round-left"></div>
					<div class="round-left round-right"></div>
				</div>
				<div class="ele-page-title">欠交配料汇总</div>
          </div>
          <el-table
            :data="tableData"
            class="table"
            border
          >    
          	  <el-table-column label="序号" align="center" type="index"  width="55">
          	  </el-table-column>
          	  <el-table-column label="物料编码" align="center" width="100" show-overflow-tooltip>
          	  </el-table-column>
          	  <el-table-column label="物料名称" align="center"  width="120">
          	  </el-table-column>
          	  <el-table-column label="物料类型" align="center">
          	  </el-table-column>
          	  <el-table-column label="牌号" align="center">
          	  </el-table-column>
          	  <el-table-column label="欠交数量(KG)" align="center" width="120">
          	  </el-table-column>
          </el-table>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 14, md: 14 } : { span: 14 }">
        <div class="demo-monitor-title">
          <div class="ele-page-header ele-cell">
				<div class="ele-cell header-round">
					<div class="round-left"></div>
					<div class="round-left round-right"></div>
				</div>
				<div class="ele-page-title">本月班组物料投入占比</div>
          </div>
          <div class="title-unit">单位：吨</div>
        </div>
        <div class="circle"> 
			<div class="circle-item">
				<div class="item-progress">
					<el-progress
					  type="circle"
					  :percentage="80"
					  :show-text="false"
					  :width="140"
					  :stroke-width="10"
					  :color="'#0099ff'"
					/>
					<div class="progress-num" style="color: #0099ff;">80%</div>
				</div>
				<div class="circle-word">4,034.5</div>
				<div class="circle-word">挤压</div>
			</div>
			<div class="circle-item">
				<div class="item-progress">
					<el-progress
					  type="circle"
					  :percentage="70"
					  :show-text="false"
					  :width="140"
					  :stroke-width="10"
					  :color="'#8167f5'"
					/>
					<div class="progress-num" style="color: #8167f5;">70%</div>
				</div>
				<div class="circle-word">4,034.5</div>
				<div class="circle-word">模压</div>
			</div>
			<div class="circle-item">
				<div class="item-progress">
					<el-progress
					  type="circle"
					  :percentage="60"
					  :show-text="false"
					  :width="140"
					  :stroke-width="10"
					  :color="'#70b603'"
					/>
					<div class="progress-num" style="color: #70b603;">60%</div>
				</div>
				<div class="circle-word">4,034.5</div>
				<div class="circle-word">等静压</div>
			</div>
		</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
		tableData:[],
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
		
    },
    methods: {
    }
  };
</script>

<style lang="scss" scoped>
	.ele-page-header{
		border: none;
		.round-left{
			 width: 16px;
			 height: 16px;
			 border-radius: 50%;
			 background: #1891FF;
		}
		.round-right{
			 opacity: 0.5;
			 margin: 0 10px 0 -5px;
		}
	}
  /* 小标题 */
  .demo-monitor-title {
    display: flex;
	align-items: center;
	justify-content: space-between;
	.title-name{
		font-size: 16px;
		font-weight: bold;
		color: #000;
	}
	.title-unit{
		margin-right: 15px;
	}
  }

  /* 排名 item */
  .demo-monitor-rank-item {
    padding: 0 20px;
    line-height: 20px;
    margin-top: 18px;
  }
  .table{
	  margin-left: 20px;
  }
  .circle{
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  margin: 20px auto 0;
	  .item-progress{
		  position: relative;
		  .progress-num{
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  font-size: 20px;
			  font-weight: bold;
		  }
	  }
	  .circle-word{
		 text-align: center;
		 font-size: 18px;
		  margin-top: 15px;
	  }
  }
</style>
