@@ -1,34 +1,40 @@
< template >
< template >
< div class = "dashboard app-container" >
< div class = "dashboard app-container" >
< el-row :gutter = "24" >
< el-row :gutter = "24" >
< el-col :span = "3 " >
< el-col :span = "4 " >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #ec4786, #b955a4)" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #ec4786, #b955a4)" >
< div style = "font-size: 18px;" > 月项目数 ( 入库 ) < / div >
< div style = "font-size: 18px;" > 月项目数 ( 入库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
< el-icon size = "24" > < OfficeBuilding / > < / el-icon >
< el-icon size = "24" >
< div > { { countObj . inSummary . projectCount } } < / div >
< OfficeBuilding / >
< / el-icon >
< div > { { countObj . monthInCount } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col >
< el-col :span = "3 " >
< el-col :span = "4 " >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #865ec0, #5144b4);" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #865ec0, #5144b4);" >
< div style = "font-size: 18px;" > 月条目数 ( 入库 ) < / div >
< div style = "font-size: 18px;" > 月条目数 ( 入库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
< el-icon size = "24" > < OfficeBuilding / > < / el-icon >
< el-icon size = "24" >
< div > { { countObj . inSummary . itemCount } } < / div >
< OfficeBuilding / >
< / el-icon >
< div > { { countObj . monthInProjectCount } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col >
< el-col :span = "3 " >
< el-col :span = "4 " >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #56cdf3, #719de3);" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #56cdf3, #719de3);" >
< div style = "font-size: 18px;" > 月总金额 ( 入库 ) < / div >
< div style = "font-size: 18px;" > 月总金额 ( 入库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
< el-icon size = "24" > < OfficeBuilding / > < / el-icon >
< el-icon size = "24" >
< div > { { countObj . inSummary . amountHt } } < / div >
< OfficeBuilding / >
< / el-icon >
< div > { { countObj . monthInAmount } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col >
< el-col :span = "3" >
<!-- < el-col :span = "3" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #fcbc25, #f68057);" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #fcbc25, #f68057);" >
< div style = "font-size: 18px;" > 月总数 ( 入库 ) < / div >
< div style = "font-size: 18px;" > 月总数 ( 入库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
@@ -36,35 +42,41 @@
< div > { { countObj . inSummary . totalQty } } < / div >
< div > { { countObj . inSummary . totalQty } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col > -- >
< el-col :span = "3 " >
< el-col :span = "4 " >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #ec4786, #b955a4)" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #ec4786, #b955a4)" >
< div style = "font-size: 18px;" > 月项目数 ( 出库 ) < / div >
< div style = "font-size: 18px;" > 月项目数 ( 出库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
< el-icon size = "24" > < OfficeBuilding / > < / el-icon >
< el-icon size = "24" >
< div > { { countObj . outSummary . projectCount } } < / div >
< OfficeBuilding / >
< / el-icon >
< div > { { countObj . monthOutCount } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col >
< el-col :span = "3 " >
< el-col :span = "4 " >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #865ec0, #5144b4);" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #865ec0, #5144b4);" >
< div style = "font-size: 18px;" > 月条目数 ( 出库 ) < / div >
< div style = "font-size: 18px;" > 月条目数 ( 出库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
< el-icon size = "24" > < OfficeBuilding / > < / el-icon >
< el-icon size = "24" >
< div > { { countObj . outSummary . itemCount } } < / div >
< OfficeBuilding / >
< / el-icon >
< div > { { countObj . monthOutProjectCount } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col >
< el-col :span = "3 " >
< el-col :span = "4 " >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #56cdf3, #719de3);" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #56cdf3, #719de3);" >
< div style = "font-size: 18px;" > 月总金额 ( 出库 ) < / div >
< div style = "font-size: 18px;" > 月总金额 ( 出库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
< el-icon size = "24" > < OfficeBuilding / > < / el-icon >
< el-icon size = "24" >
< div > { { countObj . outSummary . amountHt } } < / div >
< OfficeBuilding / >
< / el-icon >
< div > { { countObj . monthOutAmount } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col >
< el-col :span = "3" >
<!-- < el-col :span = "3" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #fcbc25, #f68057);" >
< div class = "boxNum" style = "background: linear-gradient(to right bottom, #fcbc25, #f68057);" >
< div style = "font-size: 18px;" > 月总数 ( 出库 ) < / div >
< div style = "font-size: 18px;" > 月总数 ( 出库 ) < / div >
< div class = "boxNum_icon" >
< div class = "boxNum_icon" >
@@ -72,7 +84,7 @@
< div > { { countObj . outSummary . totalQty } } < / div >
< div > { { countObj . outSummary . totalQty } } < / div >
< / div >
< / div >
< / div >
< / div >
< / el-col >
< / el-col > -- >
< / el-row >
< / el-row >
< el-row :gutter = "24" style = "margin-top: 20px;" >
< el-row :gutter = "24" style = "margin-top: 20px;" >
@@ -114,7 +126,9 @@
< div class = "line" > < / div >
< div class = "line" > < / div >
< div class = "name" style = "display: flex;align-items: center;justify-content: space-between;flex: 1;" >
< div class = "name" style = "display: flex;align-items: center;justify-content: space-between;flex: 1;" >
< div > 库龄统计 < / div >
< div > 库龄统计 < / div >
< el-icon style = "cursor: pointer;" @click ="downloadExcel" > < Download / > < / el-icon >
< el-icon style = "cursor: pointer;" @click ="downloadExcel" >
< Download / >
< / el-icon >
< / div >
< / div >
< / div >
< / div >
< el-row :gutter = "24" style = "margin-top: 25px;height: 100%;" >
< el-row :gutter = "24" style = "margin-top: 25px;height: 100%;" >
@@ -180,16 +194,16 @@
< div style = "font-size: 32px; font-family: PingFang SC-Medium;" > 9999 < / div >
< div style = "font-size: 32px; font-family: PingFang SC-Medium;" > 9999 < / div >
< div style = "margin-top: 16px; font-family: PingFang SC-Regular;" > 待盘点 < / div >
< div style = "margin-top: 16px; font-family: PingFang SC-Regular;" > 待盘点 < / div >
< / div > -- >
< / div > -- >
< el-table :data = "waitTableData" :header-row-style = "handleCellStyle" style = "margin-top: 20px;" >
< el-table :data = "waitTableData" :header-row-style = "handleCellStyle" style = "margin-top: 20px;" >
< el-table-column prop = "type" label = "类型" width = "150" align = "center" >
< el-table-column prop = "type" label = "类型" width = "150" align = "center" >
< template # default = "scope" >
< template # default = "scope" >
< span style = "color:#ee6666;font-weight: 550;" > { { scope . row . type } } < / span >
< span style = "color:#ee6666;font-weight: 550;" > { { scope . row . type } } < / span >
< / template >
< / template >
< / el-table-column >
< / el-table-column >
<!-- < el-table-column prop = "situation" label = "情况" / > -- >
<!-- < el-table-column prop = "situation" label = "情况" / > -- >
< el-table-column prop = "projectCnt" label = "项目数" align = "center" / >
< el-table-column prop = "projectCnt" label = "项目数" align = "center" / >
< el-table-column prop = "totalAmt" label = "总金额" align = "center" / >
< el-table-column prop = "totalAmt" label = "总金额" align = "center" / >
< el-table-column prop = "totalQty" label = "总数量" align = "center" / >
< el-table-column prop = "totalQty" label = "总数量" align = "center" / >
< / el-table >
< / el-table >
< / div >
< / div >
< / div >
< / div >
@@ -254,10 +268,14 @@
< / div >
< / div >
< / div >
< / div >
< div class = "echartsBox" style = "overflow-y: auto;" >
< div class = "echartsBox" style = "overflow-y: auto;" >
< div v-for = "(item,index) in noticeList" :key="index" >
< div v-for = "(item, index) in noticeList" :key="index" >
< div style = "display: flex; align-items: center; justify-content: space-between; margin-top: 13px" >
< div style = "display: flex; align-items: center; justify-content: space-between; margin-top: 13px" >
< div style = "width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px;" > { { item . noticeTitle } } < / div >
< div
< div style = "color: #0288FF; font-size: 14px; cursor: pointer;" @click ="goNotice(item.noticeId)" > 详情 < / div >
style = "width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px;" >
{ {
item . noticeTitle } } < / div >
< div style = "color: #0288FF; font-size: 14px; cursor: pointer;" @click ="goNotice(item.noticeId)" > 详情
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@@ -273,15 +291,8 @@
< div class = "line" > < / div >
< div class = "line" > < / div >
< div class = "name" >
< div class = "name" >
< div > 入库类型统计 < / div >
< div > 入库类型统计 < / div >
< el-date-picker
< el-date-picker v-model = "dateInventoryTypeObj" type="daterange" range-separator="至"
v-model = "dateInventoryTypeObj"
start -placeholder = " 开始时间 " end -placeholder = " 结束时间 " value -format = " YYYY -MM -DD " style = "margin: 0 20px;" / >
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 >
< el-button type = "primary" @click ="getInventoryTypeList" > 搜索 < / el -button >
< / div >
< / div >
< / div >
< / div >
@@ -294,15 +305,8 @@
< div class = "line" > < / div >
< div class = "line" > < / div >
< div class = "name" >
< div class = "name" >
< div > 出库类型统计 < / div >
< div > 出库类型统计 < / div >
< el-date-picker
< el-date-picker v-model = "dateOutInventoryTypeObj" type="daterange" range-separator="至"
v-model = "dateOutInventoryTypeObj"
start -placeholder = " 开始时间 " end -placeholder = " 结束时间 " value -format = " YYYY -MM -DD " style = "margin: 0 20px;" / >
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 >
< el-button type = "primary" @click ="getOutInventoryTypeList" > 搜索 < / el -button >
< / div >
< / div >
< / div >
< / div >
@@ -311,22 +315,22 @@
< / el-col >
< / el-col >
< / el-row >
< / el-row >
< el-dialog title = "公告详情" v-model = "open" width="780px" append-to-body @close="closeDialog" >
< el-dialog title = "公告详情" v-model = "open" width="780px" append-to-body @close="closeDialog" >
< el -form ref = "noticeRef" :model = "form" :rules = "rules" label -width = " 80px " >
< el -form ref = "noticeRef" :model = "form" :rules = "rules" label -width = " 80px " >
< el-row >
< el-row >
< el-col :span = "24" >
< el-col :span = "24" >
< el-form-item label = "内容" >
< el-form-item label = "内容" >
< editor v-model = "noticeContent" :min-height="192" :readOnly="true" :showToolbar="false" / >
< editor v-model = "noticeContent" :min-height="192" :readOnly="true" :showToolbar="false" / >
< / el-form-item >
< / el-form-item >
< / el-col >
< / el-col >
< / el-row >
< / el-row >
< / el-form >
< / el-form >
<!-- < template # footer >
<!-- < template # footer >
< div class = "dialog-footer" >
< div class = "dialog-footer" >
< el-button type = "primary" @click ="submitForm" :disabled = "isDetail" > 确 定 < / el-button >
< el-button type = "primary" @click ="submitForm" :disabled = "isDetail" > 确 定 < / el-button >
< el-button @click ="cancel" > 取 消 < / el -button >
< el-button @click ="cancel" > 取 消 < / el -button >
< / div >
< / div >
< / template > -- >
< / template > -- >
< / el-dialog >
< / el-dialog >
<!-- < el-row :gutter = "24" style = "margin-top: 20px;" >
<!-- < el-row :gutter = "24" style = "margin-top: 20px;" >
< el-col :span = "24" style = "height: 400px;" >
< el-col :span = "24" style = "height: 400px;" >
@@ -397,41 +401,45 @@
< script setup >
< script setup >
import * as echarts from 'echarts' ;
import * as echarts from 'echarts' ;
import { onMounted } from "vue" ;
import { onMounted } from "vue" ;
import { getMonthCount , getAgeLong , getWait , getInventoryReview , getInStorage , getGoodsType , getDailyInventory , getInventoryType , getOutInventoryType } from '@/api/index'
import { getHomeState , getAgeLong , getWait , getInventoryReview , getOutTypeByTime , getInTypeByTime , getDailyInventory , getNoticeList } from '@/api/index'
import { listNotice , getNotice } from "@/api/system/notice" ;
import { listNotice , getNotice } from "@/api/system/notice" ;
import { parseTime } from '@/utils/manage'
import { parseTime } from '@/utils/manage'
const open = ref ( false ) ;
const noticeContent = ref ( "" )
const { proxy } = getCurrentInstance ( ) ;
const { proxy } = getCurrentInstance ( ) ;
const a = ( scope ) => {
const a = ( scope ) => {
console . log ( scope )
console . log ( scope )
}
}
let countObj = ref ( {
// 顶部月统计数据
inSummary : { } ,
let countObj = ref ( { } )
outSummary : { } ,
let colorList = ref ( [ '#00968F' , '#0077a0' , '#61cdbb' ] )
} )
const getMonthCountList = ( ) => {
getMonthCount ( ) . then ( res => {
countObj . value = res . data
} )
}
// 查询时间
let startTime = parseTime ( new Date ( Date . now ( ) - 30 * 24 * 60 * 60 * 1000 ) , '{y}-{m}-{d}' ) // 14天前
let startTime = parseTime ( new Date ( Date . now ( ) - 30 * 24 * 60 * 60 * 1000 ) , '{y}-{m}-{d}' ) // 14天前
let endTime = parseTime ( new Date ( ) , '{y}-{m}-{d}' ) // 当前时间
let endTime = parseTime ( new Date ( ) , '{y}-{m}-{d}' ) // 当前时间
const getAgeLongList = ( ) => {
// 获取月统计、当前入库类型统计、物资类型统计接口
getAgeLong ( ) . then ( res => {
const getMonthCountList = ( params ) => {
let data1 = res . data . slice ( 0 , 3 )
getHomeState ( params ) . then ( res => {
getChartInventoryAge ( data1 , "inventoryAgeEchatrs" )
// 月统计
let data2 = res . data . slice ( 3 )
countObj . value = res . data ? . kpi
getChartInventoryAge ( data2 , "warningEchatrs" )
// 当前入库类型统计
getChartInStorage ( res . data ? . currentInType , "echartsInStorage" )
//物资类型统计
getChartGoodsType ( res . data ? . materialType )
} )
} )
}
}
// 预警 + 库龄统计
const getAgeLongList = ( ) => {
getAgeLong ( ) . then ( res => {
let data1 = res . data . slice ( 0 , 3 )
getChartInventoryAge ( data1 , "inventoryAgeEchatrs" )
let data2 = res . data . slice ( 3 )
getChartInventoryAge ( data2 , "warningEchatrs" )
} )
}
// 自定义单元格样式
// 自定义单元格样式
// const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
// const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
@@ -448,80 +456,50 @@ const getAgeLongList = () => {
// // 其他默认样式
// // 其他默认样式
// return { backgroundColor: '#FFFFFF', color: '#333333' };
// return { backgroundColor: '#FFFFFF', color: '#333333' };
// };
// };
const handleCellStyle = ( ) => {
const handleCellStyle = ( ) => {
return { backgroundColor : '#f5f7fa' }
return { backgroundColor : '#f5f7fa' }
}
}
let waitTableData = ref ( [
// {
// 待办事项数据
// type: '应到未到[部分未到]',
let waitTableData = ref ( [ ] )
// situation: '部分未到',
// projectCount: '',
// itemCount: '',
// totalQty: '',
// amountPlan: ''
// },
// {
// type: '应到未到[全部未到]',
// situation: '全部未到',
// projectCount: '',
// itemCount: '',
// totalQty: '',
// amountPlan: ''
// },
// {
// type: '应出未出[全部未出]',
// situation: '全部未出',
// projectCount: '',
// itemCount: '',
// totalQty: '',
// amountPlan: ''
// }
] )
const getWaitList = ( ) => {
const getWaitList = ( ) => {
getWait ( ) . then ( res => {
getWait ( ) . then ( res => {
waitTableData . value = res . data
waitTableData . value = res . data
} )
} )
}
}
// 仓库使用率数据
const getInventoryReviewList = ( ) => {
const getInventoryReviewList = ( ) => {
getInventoryReview ( ) . then ( res => {
getInventoryReview ( ) . then ( res => {
getChartInventoryReview ( res . data )
getChartInventoryReview ( res . data )
} )
} )
}
}
const getInStorageList = ( ) => {
// 入库类型统计-时间搜索
getInStorage ( ) . then ( res => {
const dateInventoryTypeObj = ref ( [ ] )
getChartInStorage ( res . data , "echartsInStorage" )
} )
}
const getGoodsTypeList = ( ) => {
getGoodsType ( ) . then ( res => {
getChartGoodsType ( res . data )
} )
}
const dateInventoryTypeObj = ref ( [ startTime , endTime ] )
const getInventoryTypeList = ( ) => {
const getInventoryTypeList = ( ) => {
let params = {
let params = {
start : dateInventoryTypeObj . value [ 0 ] ,
startDate : dateInventoryTypeObj . value ? . [ 0 ] ,
end : dateInventoryTypeObj . value [ 1 ]
endDate : dateInventoryTypeObj . value ? . [ 1 ]
}
}
getInventoryTyp e ( params ) . then ( res => {
getInTypeByTim e ( params ) . then ( res => {
getChartInventoryType ( res . data , "echartsInventoryType" )
getChartInventoryType ( res . data , "echartsInventoryType" )
} )
} )
}
}
const dateOutInventoryTypeObj = ref ( [ startTime , endTime ] )
// 出库类型统计-时间搜索
const dateOutInventoryTypeObj = ref ( [ [ ] ] )
const getOutInventoryTypeList = ( ) => {
const getOutInventoryTypeList = ( ) => {
let params = {
let params = {
start : dateOutInventoryTypeObj . value [ 0 ] ,
startDate : dateOutInventoryTypeObj . value ? . [ 0 ] ,
end : dateOutInventoryTypeObj . value [ 1 ]
endDate : dateOutInventoryTypeObj . value ? . [ 1 ]
}
}
getOutInventoryTyp e ( params ) . then ( res => {
getOutTypeByTim e ( params ) . then ( res => {
getChartInventoryType ( res . data , "echartsOutInventoryType" )
getChartInventoryType ( res . data , "echartsOutInventoryType" )
} )
} )
}
}
// todo 已注释内容 - 出库指标统计/入库指标统计
const getChartDailyInventory = ( data , id ) => {
const getChartDailyInventory = ( data , id ) => {
let xAxisData = [ ]
let xAxisData = [ ]
let projectData = [ ]
let projectData = [ ]
@@ -643,6 +621,7 @@ const getChartDailyInventory = (data, id) => {
]
]
} ) ;
} ) ;
}
}
const dateDailyInventoryObj = ref ( [ startTime , endTime ] )
const dateDailyInventoryObj = ref ( [ startTime , endTime ] )
const getDailyInventoryList = ( ) => {
const getDailyInventoryList = ( ) => {
let params = {
let params = {
@@ -654,41 +633,22 @@ const getDailyInventoryList = () => {
getChartDailyInventory ( res . data . out , "echartsDailyOutInventory" )
getChartDailyInventory ( res . data . out , "echartsDailyOutInventory" )
} )
} )
}
}
//todo 注释内容完成
const noticeList = ref ( [
// 通知公告列表
// {
const noticeList = ref ( [ ] )
// id: 1,
const getNoticeListValue = ( ) => {
// title: "本公司董事会及全体董事保证本公告内容不存在任何虚假记载、误导性陈述或者重大遗漏,并对其内容的真实性、准确性和完整性承担法律责任。",
getNoticeList ( ) . then ( res => {
// },
// {
// id: 2,
// title: "国内贸易指采购和销售均在境内。公司接到客户订单后, 按照合同约定收取预收款, 部分纸张业务客户预付定金10%,浆类业务客户无预付定金,棉纱及部分塑..."
// },
// {
// id: 3,
// title: "进出口贸易包括进口贸易(国外采购销售给国内客户)和出口贸易(国内采购销售给国外客户)。"
// },
// {
// id: 4,
// title: "进口贸易指自国外进口采购, 于国内销售的贸易业务。公司接到客户订单后( 棉纱及塑料粒子类客户预付定金一般约为5-10%,部分纸张及印刷设备代理类客户..."
// },
// {
// id: 5,
// title: "企业自第三方取得商品控制权后,通过提供重大的服务将该商品与其他商品整合成某组合产出转让给客户。"
// }
] )
const getNoticeList = ( ) => {
listNotice ( ) . then ( res => {
noticeList . value = res . rows ;
noticeList . value = res . rows ;
} )
} )
}
}
//通知公告详情
//通知公告详情
const open = ref ( false ) ;
const noticeContent = ref ( "" )
const goNotice = ( noticeId ) => {
const goNotice = ( noticeId ) => {
getNotice ( noticeId ) . then ( response => {
getNotice ( noticeId ) . then ( response => {
noticeContent . value = response . data . noticeContent ;
noticeContent . value = response . data . noticeContent ;
open . value = true ;
open . value = true ;
} ) ;
} ) ;
// 张金波注释,不跳转到列表,只弹开详情
// 张金波注释,不跳转到列表,只弹开详情
// proxy.$router.push({
// proxy.$router.push({
@@ -696,20 +656,19 @@ const goNotice = (noticeId) => {
// })
// })
}
}
onMounted ( ( ) => {
onMounted ( ( ) => {
// getMonthCountList()
// 入库类型统计查询时间
getAgeLongList ( )
dateInventoryTypeObj . value = [ startTime , endTime ]
getWaitList ( )
// 出库类型统计查询时间
getInventoryReviewList ( )
dateOutInventoryTypeObj . value = [ startTime , endTime ]
// getInStorageList()
// getGoodsTypeList()
getMonthCountList ( ) // 获取月统计、当前入库类型统计、物资类型统计接口
// getInventoryTypeList()
getAgeLongList ( ) // 预警 + 库龄统计
// getOutInventoryTypeList()
getWaitList ( ) // 待办事项数据
// getDailyInventoryList()
getInventoryReviewList ( ) // 仓库使用率数据
// getNoticeList()
getInventoryTypeList ( ) // 入库类型统计-时间搜索
getOutInventoryTypeList ( ) // 出库类型统计-时间搜索
getNoticeListValue ( ) // 通知公告列表
} ) ;
} ) ;
const downloadExcel = ( ) => {
const downloadExcel = ( ) => {
@@ -717,6 +676,7 @@ const downloadExcel = () => {
}
}
// 预警 + 库龄统计 图表
const getChartInventoryAge = ( data , id ) => {
const getChartInventoryAge = ( data , id ) => {
let chartDom = document . getElementById ( id ) ;
let chartDom = document . getElementById ( id ) ;
let myChart = echarts . init ( chartDom ) ;
let myChart = echarts . init ( chartDom ) ;
@@ -728,6 +688,7 @@ const getChartInventoryAge = (data, id) => {
orient : 'vertical' ,
orient : 'vertical' ,
left : 'left'
left : 'left'
} ,
} ,
color : colorList . value ,
series : [
series : [
{
{
name : '库龄' ,
name : '库龄' ,
@@ -745,7 +706,7 @@ const getChartInventoryAge = (data, id) => {
]
]
} ) ;
} ) ;
}
}
// 仓库使用率数据图表
const getChartInventoryReview = ( data ) => {
const getChartInventoryReview = ( data ) => {
let xAxisData = [ ]
let xAxisData = [ ]
let totalData = [ ]
let totalData = [ ]
@@ -773,6 +734,7 @@ const getChartInventoryReview = (data) => {
// bottom: '8%',
// bottom: '8%',
} ,
} ,
legend : { } ,
legend : { } ,
color : colorList . value ,
yAxis : {
yAxis : {
type : 'value' ,
type : 'value' ,
boundaryGap : [ 0 , 0.01 ]
boundaryGap : [ 0 , 0.01 ]
@@ -803,19 +765,18 @@ const getChartInventoryReview = (data) => {
]
]
} ) ;
} ) ;
}
}
// 当前入库类型统计图表
const getChartInStorage = ( data , id ) => {
const getChartInStorage = ( data , id ) => {
let xAxisData = [ ]
let xAxisData = [ ]
let projectData = [ ]
let projectData = [ ]
let totalData = [ ]
let totalData = [ ]
let itemData = [ ]
let priceData = [ ]
let priceData = [ ]
data . forEach ( item => {
data . forEach ( item => {
xAxisData . push ( item . groupName )
xAxisData . push ( item . groupName )
project Data. push ( item . p rojectCount )
xAxis Data. push ( item . g roupName )
item Data. push ( item . goodsCountTotal )
project Data. push ( item . projectCount ) //项目数
totalData . push ( item . sumQty )
totalData . push ( item . totalQuantity ) //总数量
priceData . push ( item . sum Amount)
priceData . push ( item . total Amount) //总金额
} )
} )
var chartDom = document . getElementById ( id ) ;
var chartDom = document . getElementById ( id ) ;
var myChart = echarts . init ( chartDom ) ;
var myChart = echarts . init ( chartDom ) ;
@@ -843,6 +804,7 @@ const getChartInStorage = (data, id) => {
legend : {
legend : {
// data: ['项目数', '条目数', '总金额']
// data: ['项目数', '条目数', '总金额']
} ,
} ,
color : colorList . value ,
xAxis : [
xAxis : [
{
{
type : 'category' ,
type : 'category' ,
@@ -903,16 +865,6 @@ const getChartInStorage = (data, id) => {
} ,
} ,
data : projectData
data : projectData
} ,
} ,
{
name : '条目数' ,
type : 'bar' ,
tooltip : {
valueFormatter : function ( value ) {
return value + ' 个' ;
}
} ,
data : itemData
} ,
{
{
name : '总数量' ,
name : '总数量' ,
type : 'bar' ,
type : 'bar' ,
@@ -937,19 +889,17 @@ const getChartInStorage = (data, id) => {
]
]
} ) ;
} ) ;
}
}
// 物资类型统计图表
const getChartGoodsType = ( data ) => {
const getChartGoodsType = ( data ) => {
let xAxisData = [ ]
let xAxisData = [ ]
let projectData = [ ]
let projectData = [ ]
let totalData = [ ]
let totalData = [ ]
let itemData = [ ]
let priceData = [ ]
let priceData = [ ]
data . forEach ( item => {
data . forEach ( item => {
xAxisData . push ( item . type Name)
xAxisData . push ( item . group Name)
projectData . push ( item . projectCount )
projectData . push ( item . projectCount ) //项目数
totalData . push ( item . totalQty )
totalData . push ( item . totalQuanti ty ) //总数量
item Data. push ( item . itemC ount)
price Data. push ( item . totalAm ount) //总金额
priceData . push ( item . amountHt )
} )
} )
var chartDom = document . getElementById ( "echartsGoodsType" ) ;
var chartDom = document . getElementById ( "echartsGoodsType" ) ;
var myChart = echarts . init ( chartDom ) ;
var myChart = echarts . init ( chartDom ) ;
@@ -977,6 +927,7 @@ const getChartGoodsType = (data) => {
legend : {
legend : {
// data: ['项目数', '条目数', '总金额']
// data: ['项目数', '条目数', '总金额']
} ,
} ,
color : colorList . value ,
xAxis : [
xAxis : [
{
{
type : 'category' ,
type : 'category' ,
@@ -1037,16 +988,16 @@ const getChartGoodsType = (data) => {
} ,
} ,
data : projectData
data : projectData
} ,
} ,
{
// {
name: '条目数',
// name: '条目数',
type: 'bar',
// type: 'bar',
tooltip: {
// tooltip: {
valueFormatter: function ( value ) {
// valueFormatter: function (value) {
return value + ' 个' ;
// return value + ' 个';
}
// }
} ,
// },
data: itemData
// data: itemData
} ,
// },
{
{
name : '总数量' ,
name : '总数量' ,
type : 'bar' ,
type : 'bar' ,
@@ -1071,7 +1022,7 @@ const getChartGoodsType = (data) => {
]
]
} ) ;
} ) ;
}
}
// 入库类型统计/出库类型统计图表
const getChartInventoryType = ( data , id ) => {
const getChartInventoryType = ( data , id ) => {
let xAxisData = [ ]
let xAxisData = [ ]
let projectData = [ ]
let projectData = [ ]
@@ -1079,11 +1030,10 @@ const getChartInventoryType = (data, id) => {
let itemData = [ ]
let itemData = [ ]
let priceData = [ ]
let priceData = [ ]
data . forEach ( item => {
data . forEach ( item => {
xAxisData . push ( item . rkType Name)
xAxisData . push ( item . group Name)
projectData . push ( item . projectCount )
projectData . push ( item . projectCount ) //项目数
totalData . push ( item . sumQty )
totalData . push ( item . totalQuantity ) //总数量
item Data. push ( item . goodsCountTotal )
price Data. push ( item . totalAmount ) //总金额
priceData . push ( item . sumAmount )
} )
} )
var chartDom = document . getElementById ( id ) ;
var chartDom = document . getElementById ( id ) ;
var myChart = echarts . init ( chartDom ) ;
var myChart = echarts . init ( chartDom ) ;
@@ -1108,6 +1058,7 @@ const getChartInventoryType = (data, id) => {
grid : {
grid : {
// bottom: '8%',
// bottom: '8%',
} ,
} ,
color : colorList . value ,
legend : {
legend : {
// data: ['项目数', '条目数', '总金额']
// data: ['项目数', '条目数', '总金额']
} ,
} ,
@@ -1171,16 +1122,6 @@ const getChartInventoryType = (data, id) => {
} ,
} ,
data : projectData
data : projectData
} ,
} ,
{
name : '条目数' ,
type : 'bar' ,
tooltip : {
valueFormatter : function ( value ) {
return value + ' 个' ;
}
} ,
data : itemData
} ,
{
{
name : '总数量' ,
name : '总数量' ,
@@ -1208,13 +1149,10 @@ const getChartInventoryType = (data, id) => {
}
}
< / script >
< / script >
< style scoped lang = "scss" >
< style scoped lang = "scss" >
. dashboard {
. dashboard {
// position: absolute;
// position: absolute;
// top: 0;
// top: 0;
// bottom: 0;
// bottom: 0;
@@ -1224,8 +1162,9 @@ const getChartInventoryType = (data, id) => {
// flex-direction: column;
// flex-direction: column;
background - color : # F5F5F5 ;
background - color : # F5F5F5 ;
padding : 32 rpx ;
padding : 32 rpx ;
. boxNum {
height : 98 px ;
. boxNum {
height : 100 px ;
width : 100 % ;
width : 100 % ;
border - radius : 8 px ;
border - radius : 8 px ;
color : # FFFFFF ;
color : # FFFFFF ;
@@ -1234,7 +1173,8 @@ const getChartInventoryType = (data, id) => {
justify - content : center ;
justify - content : center ;
align - items : flex - start ;
align - items : flex - start ;
padding : 0 20 px ;
padding : 0 20 px ;
. boxNum _icon {
. boxNum _icon {
display : flex ;
display : flex ;
align - items : center ;
align - items : center ;
justify - content : space - between ;
justify - content : space - between ;
@@ -1242,9 +1182,11 @@ const getChartInventoryType = (data, id) => {
margin - top : 10 px ;
margin - top : 10 px ;
}
}
}
}
. titleBox {
. titleBox {
display : flex ;
display : flex ;
align - items : center ;
align - items : center ;
. line {
. line {
width : 6 px ;
width : 6 px ;
height : 15 px ;
height : 15 px ;
@@ -1252,7 +1194,8 @@ const getChartInventoryType = (data, id) => {
border - radius : 12 px 12 px 12 px 12 px ;
border - radius : 12 px 12 px 12 px 12 px ;
transform : rotateX ( 360 deg ) ;
transform : rotateX ( 360 deg ) ;
}
}
. name {
. name {
margin - left : 8 px ;
margin - left : 8 px ;
display : flex ;
display : flex ;
align - items : center ;
align - items : center ;
@@ -1267,29 +1210,33 @@ const getChartInventoryType = (data, id) => {
text - transform : none ;
text - transform : none ;
}
}
}
}
. main {
. main {
background - color : # FFFFFF ;
background - color : # FFFFFF ;
padding : 20 px ;
padding : 20 px ;
box - shadow : 0 px 4 px 12 px 0 px rgba ( 255 , 223 , 217 , 0.2 ) ;
box - shadow : 0 px 4 px 12 px 0 px rgba ( 255 , 223 , 217 , 0.2 ) ;
border - radius : 6 px ;
border - radius : 6 px ;
height : 360 px ;
height : 360 px ;
. main _progress {
. main _progress {
margin - top : 20 px ;
margin - top : 20 px ;
margin - bottom : 8 px ;
margin - bottom : 8 px ;
}
}
. main _box {
. main _box {
width : 88 % ;
width : 88 % ;
height : 110 px ;
height : 110 px ;
cursor : pointer ;
cursor : pointer ;
margin - top : 25 px ;
margin - top : 25 px ;
background : # E2F1FE ;
background : # E2F1FE ;
border - radius : 4 px ;
border - radius : 4 px ;
display : flex ;
display : flex ;
justify - content : center ;
justify - content : center ;
text - align : center ;
text - align : center ;
flex - direction : column ;
flex - direction : column ;
}
}
. warningBox {
. warningBox {
border - radius : 8 px ;
border - radius : 8 px ;
border : # fecaca 1 px solid ;
border : # fecaca 1 px solid ;
height : 100 % ;
height : 100 % ;
@@ -1301,14 +1248,16 @@ const getChartInventoryType = (data, id) => {
font - size : 24 px ;
font - size : 24 px ;
}
}
}
}
. echartsMain {
. echartsMain {
background - color : # FFFFFF ;
background - color : # FFFFFF ;
height : 100 % ;
height : 100 % ;
border - radius : 6 px ;
border - radius : 6 px ;
padding : 20 px ;
padding : 20 px ;
display : flex ;
display : flex ;
flex - direction : column ;
flex - direction : column ;
. echartsBox {
. echartsBox {
flex : 1 ;
flex : 1 ;
}
}
}
}