feat: 图库功能
This commit is contained in:
103
src/views/inventory/consumablesconfig/DataStatistics.vue
Normal file
103
src/views/inventory/consumablesconfig/DataStatistics.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="DataStatistics">
|
||||
<div style="width: 200px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<span>耗材种数</span>
|
||||
<span>{{ datas.totalRow }}</span>
|
||||
</div>
|
||||
<div style="width: 300px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<div>
|
||||
<div><span>增加数量:</span><span>0</span></div>
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<span>手动增加:</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>入库:</span><span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 500px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<div>
|
||||
<div><span>减少数量:</span><span>0</span></div>
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<span>手动减少:</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>消耗:</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>报损:</span><span>0</span>
|
||||
</div><span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>出库:</span><span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import API from "@/api/product/index";
|
||||
import { onMounted, reactive } from "vue";
|
||||
onMounted(() => {
|
||||
getPage();
|
||||
})
|
||||
let datas = reactive({
|
||||
totalRow: 0
|
||||
})
|
||||
async function getPage() {
|
||||
let res = await API.getPage();
|
||||
datas.totalRow = res.totalRow
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.DataStatistics {
|
||||
border: 1px solid #e4e7ed;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
>div {
|
||||
height: 80px;
|
||||
background-color: #f4f9ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
.iconStyle {
|
||||
background-color: #d4e9fe;
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
font-size: 36px;
|
||||
color: #3f9eff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user