首页样式调整
This commit is contained in:
1
src/assets/icons/svg/inbound.svg
Normal file
1
src/assets/icons/svg/inbound.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770191940726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2273" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 597.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666667a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128v-170.666667a42.666667 42.666667 0 1 1 85.333334 0v170.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h597.333334a42.666667 42.666667 0 0 0 42.666666-42.666666v-170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667zM512.853333 85.376a42.666667 42.666667 0 0 1 8.405334 0.981333l1.194666 0.298667a42.325333 42.325333 0 0 1 19.712 11.178667l213.333334 213.333333a42.666667 42.666667 0 1 1-60.330667 60.330667L554.666667 230.997333V640a42.666667 42.666667 0 1 1-85.333334 0V230.997333L328.832 371.498667a42.666667 42.666667 0 1 1-60.330667-60.330667l213.333334-213.333333c2.645333-2.645333 5.632-4.906667 8.874666-6.826667l1.877334-0.981333a42.368 42.368 0 0 1 8.405333-3.242667l2.133333-0.554667 1.408-0.213333A43.178667 43.178667 0 0 1 511.146667 85.333333L512 85.333333l0.853333 0.042667z" p-id="2274" fill="#409EFF"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
src/assets/icons/svg/outbound.svg
Normal file
1
src/assets/icons/svg/outbound.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770191913465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2064" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 597.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666667a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128v-170.666667a42.666667 42.666667 0 1 1 85.333334 0v170.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h597.333334a42.666667 42.666667 0 0 0 42.666666-42.666666v-170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667zM512 85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v409.002667l140.501333-140.501334a42.666667 42.666667 0 1 1 60.330667 60.330667l-213.333334 213.333333a42.837333 42.837333 0 0 1-17.706666 10.666667l-2.645334 0.64-1.450666 0.341333-1.322667 0.170667A43.008 43.008 0 0 1 512 682.666667c-2.432 0-4.778667-0.298667-7.082667-0.682667-0.426667-0.042667-0.853333-0.085333-1.322666-0.213333l-1.450667-0.298667-2.645333-0.682667a42.496 42.496 0 0 1-17.664-10.624l-213.333334-213.333333a42.666667 42.666667 0 1 1 60.330667-60.330667L469.333333 537.002667V128a42.666667 42.666667 0 0 1 42.666667-42.666667z" p-id="2065" fill="#E6A23C"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/inbound.png
Normal file
BIN
src/assets/images/inbound.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/images/outbound.png
Normal file
BIN
src/assets/images/outbound.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -1,110 +1,61 @@
|
||||
<template>
|
||||
<div class="dashboard app-container">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="4">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #ec4786, #b955a4)">
|
||||
<div style="font-size: 18px;">月项目数(入库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24">
|
||||
<OfficeBuilding />
|
||||
</el-icon>
|
||||
<div>{{ countObj.monthInCount }}</div>
|
||||
<el-col :span="12">
|
||||
<div class="inOrOutBox" style="background-color: #FDF6E3;">
|
||||
<div class="inOrOutBox_left">
|
||||
<div style="font-size: 20px; font-weight:bold; color:#333333; ">月入库统计</div>
|
||||
<div class="itemBox">
|
||||
<div>
|
||||
<p style="font-size: 14px;color:#606266">项目数 </p>
|
||||
<p style="font-size: 20px; font-weight:500; ">{{ countObj.monthInCount }} </p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-size: 14px;color:#606266 ">条目数 </p>
|
||||
<p style="font-size: 20px;font-weight:500;">{{ countObj.monthInProjectCount }} </p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-size: 14px; color:#606266">总金额 </p>
|
||||
<p style="font-size: 20px; font-weight:500;">{{ countObj.monthInAmount }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inOrOutBox_icon">
|
||||
<img src="../assets/images/inbound.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #865ec0, #5144b4);">
|
||||
<div style="font-size: 18px;">月条目数(入库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24">
|
||||
<OfficeBuilding />
|
||||
</el-icon>
|
||||
<div>{{ countObj.monthInProjectCount }}</div>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="inOrOutBox" style="background-color: #EBF5FF;">
|
||||
<div class="inOrOutBox_left">
|
||||
<div style="font-size: 20px; font-weight:bold;color:#333333 ">月出库统计</div>
|
||||
<div class="itemBox">
|
||||
<div>
|
||||
<p style="font-size: 14px;color:#606266 ">项目数 </p>
|
||||
<p style="font-size: 20px;font-weight:500; ">{{ countObj.monthOutCount }} </p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-size: 14px; color:#606266">条目数 </p>
|
||||
<p style="font-size: 20px; font-weight:500;">{{ countObj.monthOutProjectCount }} </p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-size: 14px; color:#606266">总金额 </p>
|
||||
<p style="font-size: 20px; font-weight:500;">{{ countObj.monthOutAmount }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inOrOutBox_icon">
|
||||
<img src="../assets/images/outbound.png" alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #56cdf3, #719de3);">
|
||||
<div style="font-size: 18px;">月总金额(入库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24">
|
||||
<OfficeBuilding />
|
||||
</el-icon>
|
||||
<div>{{ countObj.monthInAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="3">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #fcbc25, #f68057);">
|
||||
<div style="font-size: 18px;">月总数(入库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24"><OfficeBuilding /></el-icon>
|
||||
<div>{{ countObj.inSummary.totalQty }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col> -->
|
||||
<el-col :span="4">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #ec4786, #b955a4)">
|
||||
<div style="font-size: 18px;">月项目数(出库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24">
|
||||
<OfficeBuilding />
|
||||
</el-icon>
|
||||
<div>{{ countObj.monthOutCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #865ec0, #5144b4);">
|
||||
<div style="font-size: 18px;">月条目数(出库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24">
|
||||
<OfficeBuilding />
|
||||
</el-icon>
|
||||
<div>{{ countObj.monthOutProjectCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #56cdf3, #719de3);">
|
||||
<div style="font-size: 18px;">月总金额(出库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24">
|
||||
<OfficeBuilding />
|
||||
</el-icon>
|
||||
<div>{{ countObj.monthOutAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="3">
|
||||
<div class="boxNum" style="background: linear-gradient(to right bottom, #fcbc25, #f68057);">
|
||||
<div style="font-size: 18px;">月总数(出库)</div>
|
||||
<div class="boxNum_icon">
|
||||
<el-icon size="24"><OfficeBuilding /></el-icon>
|
||||
<div>{{ countObj.outSummary.totalQty }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col> -->
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24" style="margin-top: 20px;">
|
||||
<!-- <el-col :span="6">
|
||||
<div class="main">
|
||||
<div class="titleBox">
|
||||
<div class="line"></div>
|
||||
<div class="name">
|
||||
<div>仓库概览</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_progress" style="margin-top: 35px;">总库位100</div>
|
||||
<el-progress :show-text="false" :stroke-width="20" :percentage="70" />
|
||||
<div class="main_progress">已用库位100</div>
|
||||
<el-progress :show-text="false" :stroke-width="20" :percentage="70" />
|
||||
<div class="main_progress">可用库位100</div>
|
||||
<el-progress :show-text="false" :stroke-width="20" :percentage="70" />
|
||||
|
||||
</div>
|
||||
</el-col> -->
|
||||
|
||||
<el-col :span="8">
|
||||
<div class="main">
|
||||
<div class="titleBox">
|
||||
@@ -291,9 +242,12 @@
|
||||
<div class="line"></div>
|
||||
<div class="name">
|
||||
<div>入库类型统计</div>
|
||||
<el-date-picker v-model="dateInventoryTypeObj" type="daterange" range-separator="至"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
|
||||
<el-button type="primary" @click="getInventoryTypeList">搜索</el-button>
|
||||
<div>
|
||||
<el-date-picker v-model="dateInventoryTypeObj" type="daterange" range-separator="至"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
|
||||
<el-button type="primary" @click="getInventoryTypeList">搜索</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartsBox" style="margin-top: 20px;" id="echartsInventoryType"></div>
|
||||
@@ -305,9 +259,11 @@
|
||||
<div class="line"></div>
|
||||
<div class="name">
|
||||
<div>出库类型统计</div>
|
||||
<el-date-picker v-model="dateOutInventoryTypeObj" type="daterange" range-separator="至"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
|
||||
<el-button type="primary" @click="getOutInventoryTypeList">搜索</el-button>
|
||||
<div>
|
||||
<el-date-picker v-model="dateOutInventoryTypeObj" type="daterange" range-separator="至"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
|
||||
<el-button type="primary" @click="getOutInventoryTypeList">搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartsBox" style="margin-top: 20px;" id="echartsOutInventoryType"></div>
|
||||
@@ -1163,6 +1119,34 @@ const getChartInventoryType = (data, id) => {
|
||||
background-color: #F5F5F5;
|
||||
padding: 32rpx;
|
||||
|
||||
.itemBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.inOrOutBox {
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.inOrOutBox_left {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.inOrOutBox_icon {
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.boxNum {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
@@ -1196,9 +1180,11 @@ const getChartInventoryType = (data, id) => {
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 28px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
|
||||
Reference in New Issue
Block a user