<template>
|
<div class="count">
|
<!-- /*<div style="margin-bottom: 10px">
|
<el-button color="#fcd3d3" :dark="true">低于安全库存</el-button>
|
<el-button type="danger">低于安全库存</el-button>
|
<el-button color="#f0f9eb" :dark="true">正常库存</el-button>
|
<el-button type="success">正常库存</el-button>view
|
<el-button color="#faecd8" :dark="true">高于安全库存</el-button>
|
<el-button type="warning">高于安全库存</el-button>
|
</div>*/ -->
|
<div class="count_item" v-for="(item, index) in countList" :key="index">
|
<div class="square" :style="{ background: setBgColor(item.value) }"></div>
|
<span>{{ item.name }}</span>
|
<!-- <span class="count_num">{{item.count}}</span> -->
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref, defineProps, computed } from 'vue';
|
const props = defineProps({
|
warningTypeData: {
|
type: Array,
|
required: true,
|
},
|
});
|
|
//统计的数据
|
// const countList = computed(() => props.warningTypeData);
|
const countList = ref([]);
|
const openADialog = async (param?: any) => {
|
countList.value = param;
|
};
|
|
//设置背景 最高库存与安全库存之间 = 1(黄色)；正常库存 = 2(绿色)；高于最高库存 = 3(红色) 低于最低库存 = 4(灰色)
|
const setBgColor = (type: number): string => {
|
let color = '';
|
switch (type) {
|
case 1:
|
color = '#E6A23C'; //黄色
|
break;
|
case 2:
|
color = '#67C23A'; //绿色
|
break;
|
case 3:
|
color = '#F56C6C'; //红色
|
break;
|
case 4:
|
color = '#909399'; //灰色
|
break;
|
}
|
return color;
|
};
|
|
// 暴露方法
|
defineExpose({ openADialog });
|
</script>
|
<style lang="less" scoped>
|
.count {
|
width: 100%;
|
display: flex;
|
box-sizing: border-box;
|
justify-content: flex-start;
|
margin-bottom: 10px;
|
font-size: 15px;
|
flex-wrap: wrap;
|
.count_item {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
margin-right: 20px;
|
margin-bottom: 10px;
|
.square {
|
width: 20px;
|
height: 20px;
|
border-radius: 4px;
|
margin-right: 10px;
|
}
|
|
.count_num {
|
margin-left: 10px;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
}
|
}
|
</style>
|
