2026-01-20 16:56:01 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="dashboard app-container">
|
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
|
<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.inSummary.projectCount }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
|
<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.inSummary.itemCount }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
|
<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.inSummary.amountHt }}</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="3">
|
|
|
|
|
|
<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.outSummary.projectCount }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
|
<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.outSummary.itemCount }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
|
<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.outSummary.amountHt }}</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">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>预警信息</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-row :gutter="24" style="margin-top: 25px;height: 100%;">
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div style="height: 100%;width: 100%;" id="inventoryAgeEchatrs"></div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<div class="main">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name" style="display: flex;align-items: center;justify-content: space-between;flex: 1;">
|
|
|
|
|
|
<div>库龄统计</div>
|
|
|
|
|
|
<el-icon style="cursor: pointer;" @click="downloadExcel"><Download /></el-icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-row :gutter="24" style="margin-top: 25px;height: 100%;">
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div style="height: 100%;width: 100%;" id="warningEchatrs"></div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<!-- <el-col :span="12">
|
|
|
|
|
|
<div style="height: 100%;width: 100%;" id="warningEchatrs2"></div>
|
|
|
|
|
|
</el-col> -->
|
|
|
|
|
|
<!-- <el-col :span="6">
|
|
|
|
|
|
<div class="warningBox">
|
|
|
|
|
|
<div>库存预警</div>
|
|
|
|
|
|
<div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
|
|
|
|
|
|
<div style="margin-right: 14px;">29</div>
|
|
|
|
|
|
<el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<div class="warningBox">
|
|
|
|
|
|
<div>库存预警</div>
|
|
|
|
|
|
<div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
|
|
|
|
|
|
<div style="margin-right: 14px;">29</div>
|
|
|
|
|
|
<el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<div class="warningBox">
|
|
|
|
|
|
<div>库存预警</div>
|
|
|
|
|
|
<div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
|
|
|
|
|
|
<div style="margin-right: 14px;">29</div>
|
|
|
|
|
|
<el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<div class="warningBox">
|
|
|
|
|
|
<div>库存预警</div>
|
|
|
|
|
|
<div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
|
|
|
|
|
|
<div style="margin-right: 14px;">29</div>
|
|
|
|
|
|
<el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col> -->
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<div class="main">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>待办事项</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;flex-direction: column;">
|
|
|
|
|
|
<!-- <div class="main_box">
|
|
|
|
|
|
<div style="font-size: 32px; font-family: PingFang SC-Medium;">9999</div>
|
|
|
|
|
|
<div style="margin-top: 16px; font-family: PingFang SC-Regular;">待入库</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="main_box">
|
|
|
|
|
|
<div style="font-size: 32px; font-family: PingFang SC-Medium;">9999</div>
|
|
|
|
|
|
<div style="margin-top: 16px; font-family: PingFang SC-Regular;">待盘点</div>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<el-table :data="waitTableData" :header-row-style="handleCellStyle" style="margin-top: 20px;" >
|
|
|
|
|
|
<el-table-column prop="type" label="类型" width="150" align="center">
|
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
|
<span style="color:#ee6666;font-weight: 550;">{{scope.row.type}}</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<!-- <el-table-column prop="situation" label="情况" /> -->
|
2026-02-03 11:40:02 +08:00
|
|
|
|
<el-table-column prop="projectCnt" label="项目数" align="center"/>
|
|
|
|
|
|
<el-table-column prop="totalAmt" label="总金额" align="center"/>
|
2026-01-20 16:56:01 +08:00
|
|
|
|
<el-table-column prop="totalQty" label="总数量" align="center"/>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="24" style="height: 400px;margin-top: 20px;">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div class="echartsMain">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>仓库使用率</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" id="echartsInventoryReview"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div class="echartsMain">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>当前入库类型统计</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" id="echartsInStorage"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="24" style="margin-top: 20px;">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div class="echartsMain">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>物资类型统计</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" id="echartsGoodsType"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12" style="height: 400px;">
|
|
|
|
|
|
<div class="echartsMain">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>通知与公告</div>
|
|
|
|
|
|
<!-- <el-date-picker
|
|
|
|
|
|
v-model="dateDailyInventoryObj"
|
|
|
|
|
|
type="daterange"
|
|
|
|
|
|
range-separator="至"
|
|
|
|
|
|
start-placeholder="开始时间"
|
|
|
|
|
|
end-placeholder="结束时间"
|
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
|
style="margin: 0 20px;"
|
|
|
|
|
|
/> -->
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" style="overflow-y: auto;">
|
|
|
|
|
|
<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="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>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="24" style="height: 400px;margin-top: 20px;">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div class="echartsMain">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" style="margin-top: 20px;" id="echartsInventoryType"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div class="echartsMain">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" style="margin-top: 20px;" id="echartsOutInventoryType"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<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-row>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<el-form-item label="内容">
|
|
|
|
|
|
<editor v-model="noticeContent" :min-height="192" :readOnly="true" :showToolbar="false" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
<!-- <template #footer>
|
|
|
|
|
|
<div class="dialog-footer" >
|
|
|
|
|
|
<el-button type="primary" @click="submitForm" :disabled="isDetail">确 定</el-button>
|
|
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template> -->
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <el-row :gutter="24" style="margin-top: 20px;">
|
|
|
|
|
|
<el-col :span="24" style="height: 400px;">
|
|
|
|
|
|
<div class="echartsMain" style="padding-bottom: 0;">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>入库指标统计</div>
|
|
|
|
|
|
<el-date-picker
|
|
|
|
|
|
v-model="dateDailyInventoryObj"
|
|
|
|
|
|
type="daterange"
|
|
|
|
|
|
range-separator="至"
|
|
|
|
|
|
start-placeholder="开始时间"
|
|
|
|
|
|
end-placeholder="结束时间"
|
|
|
|
|
|
value-format="YYYY-MM-DD"
|
|
|
|
|
|
style="margin: 0 20px;"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-button type="primary" @click="getDailyInventoryList">搜索</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" style="margin-top: 20px;" id="echartsDailyInventory"></div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="24" style="height: 400px;">
|
|
|
|
|
|
<div class="echartsMain" style="padding-top: 0;">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>出库指标统计</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" style="margin-top: 20px;" id="echartsDailyOutInventory"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <el-row :gutter="24" style="height: 400px;margin-top: 20px;">
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="echartsMain">
|
|
|
|
|
|
<div class="titleBox">
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
|
<div class="name">
|
|
|
|
|
|
<div>出库指标统计</div>
|
|
|
|
|
|
<el-date-picker
|
|
|
|
|
|
v-model="dateDailyInventoryObj"
|
|
|
|
|
|
type="daterange"
|
|
|
|
|
|
range-separator="至"
|
|
|
|
|
|
start-placeholder="开始时间"
|
|
|
|
|
|
end-placeholder="结束时间"
|
|
|
|
|
|
value-format="YYYY-MM-DD"
|
|
|
|
|
|
style="margin: 0 20px;"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-button type="primary" @click="getDailyInventoryList">搜索</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="echartsBox" style="margin-top: 20px;" id="echartsDailyOutInventory"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
import { onMounted } from "vue";
|
2026-02-03 11:40:02 +08:00
|
|
|
|
import { getMonthCount, getAgeLong, getWait, getInventoryReview, getInStorage, getGoodsType, getDailyInventory, getInventoryType, getOutInventoryType } from '@/api/index'
|
2026-01-20 16:56:01 +08:00
|
|
|
|
import { listNotice,getNotice } from "@/api/system/notice";
|
|
|
|
|
|
import { parseTime } from '@/utils/manage'
|
|
|
|
|
|
|
|
|
|
|
|
const open = ref(false);
|
|
|
|
|
|
const noticeContent = ref("")
|
|
|
|
|
|
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
const a = (scope) => {
|
|
|
|
|
|
console.log(scope)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let countObj = ref({
|
|
|
|
|
|
inSummary:{},
|
|
|
|
|
|
outSummary:{},
|
|
|
|
|
|
})
|
|
|
|
|
|
const getMonthCountList = () => {
|
|
|
|
|
|
getMonthCount().then(res => {
|
|
|
|
|
|
countObj.value = res.data
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-02-03 11:40:02 +08:00
|
|
|
|
|
|
|
|
|
|
let startTime = parseTime(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}') // 14天前
|
|
|
|
|
|
let endTime = parseTime(new Date(), '{y}-{m}-{d}') // 当前时间
|
|
|
|
|
|
|
|
|
|
|
|
const getAgeLongList = () => {
|
|
|
|
|
|
getAgeLong().then(res => {
|
|
|
|
|
|
let data1 = res.data.slice(0, 3)
|
|
|
|
|
|
getChartInventoryAge(data1, "inventoryAgeEchatrs")
|
|
|
|
|
|
let data2 = res.data.slice(3)
|
|
|
|
|
|
getChartInventoryAge(data2, "warningEchatrs")
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2026-01-20 16:56:01 +08:00
|
|
|
|
// 自定义单元格样式
|
|
|
|
|
|
// const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
|
|
|
// // 示例：根据“类型”和“情况”设置颜色
|
|
|
|
|
|
// if (row.type === '应到未到' && row.situation === '部分未到') {
|
|
|
|
|
|
// return { backgroundColor: '#FCE9D2', color: '#C77800' }; // 浅橙色
|
|
|
|
|
|
// }
|
|
|
|
|
|
// if (row.type === '应到未到' && row.situation === '全部未到') {
|
|
|
|
|
|
// return { backgroundColor: '#E9F3FF', color: '#409EFF' }; // 浅蓝色
|
|
|
|
|
|
// }
|
|
|
|
|
|
// if (row.type === '应出未出' && row.situation === '全部未出') {
|
|
|
|
|
|
// return { backgroundColor: '#E8F8F5', color: '#28A745' }; // 浅绿色
|
|
|
|
|
|
// }
|
|
|
|
|
|
// // 其他默认样式
|
|
|
|
|
|
// return { backgroundColor: '#FFFFFF', color: '#333333' };
|
|
|
|
|
|
// };
|
|
|
|
|
|
const handleCellStyle = ()=>{
|
|
|
|
|
|
return { backgroundColor: '#f5f7fa' }
|
|
|
|
|
|
}
|
|
|
|
|
|
let waitTableData = ref([
|
2026-02-03 11:40:02 +08:00
|
|
|
|
// {
|
|
|
|
|
|
// type: '应到未到[部分未到]',
|
|
|
|
|
|
// situation: '部分未到',
|
|
|
|
|
|
// projectCount: '',
|
|
|
|
|
|
// itemCount: '',
|
|
|
|
|
|
// totalQty: '',
|
|
|
|
|
|
// amountPlan: ''
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// type: '应到未到[全部未到]',
|
|
|
|
|
|
// situation: '全部未到',
|
|
|
|
|
|
// projectCount: '',
|
|
|
|
|
|
// itemCount: '',
|
|
|
|
|
|
// totalQty: '',
|
|
|
|
|
|
// amountPlan: ''
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// type: '应出未出[全部未出]',
|
|
|
|
|
|
// situation: '全部未出',
|
|
|
|
|
|
// projectCount: '',
|
|
|
|
|
|
// itemCount: '',
|
|
|
|
|
|
// totalQty: '',
|
|
|
|
|
|
// amountPlan: ''
|
|
|
|
|
|
// }
|
2026-01-20 16:56:01 +08:00
|
|
|
|
])
|
|
|
|
|
|
const getWaitList = () => {
|
2026-02-03 11:40:02 +08:00
|
|
|
|
getWait().then(res => {
|
|
|
|
|
|
waitTableData.value = res.data
|
2026-01-20 16:56:01 +08:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getInventoryReviewList = () => {
|
|
|
|
|
|
getInventoryReview().then(res => {
|
|
|
|
|
|
getChartInventoryReview(res.data)
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getInStorageList = () => {
|
|
|
|
|
|
getInStorage().then(res => {
|
|
|
|
|
|
getChartInStorage(res.data, "echartsInStorage")
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getGoodsTypeList = () => {
|
|
|
|
|
|
getGoodsType().then(res => {
|
|
|
|
|
|
getChartGoodsType(res.data)
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const dateInventoryTypeObj = ref([startTime, endTime])
|
|
|
|
|
|
const getInventoryTypeList = () => {
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
start: dateInventoryTypeObj.value[0],
|
|
|
|
|
|
end: dateInventoryTypeObj.value[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
getInventoryType(params).then(res => {
|
|
|
|
|
|
getChartInventoryType(res.data, "echartsInventoryType")
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const dateOutInventoryTypeObj = ref([startTime, endTime])
|
|
|
|
|
|
const getOutInventoryTypeList = () => {
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
start: dateOutInventoryTypeObj.value[0],
|
|
|
|
|
|
end: dateOutInventoryTypeObj.value[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
getOutInventoryType(params).then(res => {
|
|
|
|
|
|
getChartInventoryType(res.data, "echartsOutInventoryType")
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
const getChartDailyInventory = (data, id) => {
|
|
|
|
|
|
let xAxisData = []
|
|
|
|
|
|
let projectData = []
|
|
|
|
|
|
let totalData = []
|
|
|
|
|
|
let priceData = []
|
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
|
xAxisData.push(item.xj)
|
|
|
|
|
|
projectData.push(item.projectCount)
|
|
|
|
|
|
totalData.push(item.itemCount)
|
|
|
|
|
|
priceData.push(item.amountHt)
|
|
|
|
|
|
})
|
|
|
|
|
|
var chartDom = document.getElementById(id);
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'cross',
|
|
|
|
|
|
crossStyle: {
|
|
|
|
|
|
color: '#999'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// toolbox: {
|
|
|
|
|
|
// feature: {
|
|
|
|
|
|
// dataView: { show: true, readOnly: false },
|
|
|
|
|
|
// magicType: { show: true, type: ['line', 'bar'] },
|
|
|
|
|
|
// restore: { show: true },
|
|
|
|
|
|
// saveAsImage: { show: true }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
// bottom: '8%',
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
// data: ['项目数', '条目数', '总金额']
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: xAxisData,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
rotate: 30,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '数量',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 250,
|
|
|
|
|
|
// interval: 50,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 个'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// // 调整纵坐标网格线样式，比如设为虚线、浅色
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee', // 浅色，降低存在感
|
|
|
|
|
|
// type: 'dashed' // 虚线
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '金额',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 25,
|
|
|
|
|
|
// interval: 5,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 元'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee',
|
|
|
|
|
|
// type: 'dashed'
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '项目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: projectData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总条目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: totalData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总金额',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 元';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: priceData
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
const dateDailyInventoryObj = ref([startTime, endTime])
|
|
|
|
|
|
const getDailyInventoryList = () => {
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
start: dateDailyInventoryObj.value[0],
|
|
|
|
|
|
end: dateDailyInventoryObj.value[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
getDailyInventory(params).then(res => {
|
|
|
|
|
|
getChartDailyInventory(res.data.in, "echartsDailyInventory")
|
|
|
|
|
|
getChartDailyInventory(res.data.out, "echartsDailyOutInventory")
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const noticeList = ref([
|
|
|
|
|
|
// {
|
|
|
|
|
|
// id: 1,
|
|
|
|
|
|
// title: "本公司董事会及全体董事保证本公告内容不存在任何虚假记载、误导性陈述或者重大遗漏，并对其内容的真实性、准确性和完整性承担法律责任。",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// id: 2,
|
|
|
|
|
|
// title: "国内贸易指采购和销售均在境内。公司接到客户订单后，按照合同约定收取预收款，部分纸张业务客户预付定金10%，浆类业务客户无预付定金，棉纱及部分塑..."
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// id: 3,
|
|
|
|
|
|
// title: "进出口贸易包括进口贸易（国外采购销售给国内客户）和出口贸易（国内采购销售给国外客户）。"
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// id: 4,
|
|
|
|
|
|
// title: "进口贸易指自国外进口采购，于国内销售的贸易业务。公司接到客户订单后（棉纱及塑料粒子类客户预付定金一般约为5-10%，部分纸张及印刷设备代理类客户..."
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// id: 5,
|
|
|
|
|
|
// title: "企业自第三方取得商品控制权后，通过提供重大的服务将该商品与其他商品整合成某组合产出转让给客户。"
|
|
|
|
|
|
// }
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
const getNoticeList = () => {
|
|
|
|
|
|
listNotice().then(res => {
|
|
|
|
|
|
noticeList.value = res.rows;
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
//通知公告详情
|
|
|
|
|
|
const goNotice = (noticeId) => {
|
|
|
|
|
|
getNotice(noticeId).then(response => {
|
|
|
|
|
|
noticeContent.value = response.data.noticeContent;
|
|
|
|
|
|
open.value = true;
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
// 张金波注释，不跳转到列表，只弹开详情
|
|
|
|
|
|
// proxy.$router.push({
|
|
|
|
|
|
// path: '/system/notice',
|
|
|
|
|
|
// })
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
2026-01-26 10:20:12 +08:00
|
|
|
|
// getMonthCountList()
|
2026-02-03 11:40:02 +08:00
|
|
|
|
getAgeLongList()
|
|
|
|
|
|
getWaitList()
|
|
|
|
|
|
getInventoryReviewList()
|
2026-01-26 10:20:12 +08:00
|
|
|
|
// getInStorageList()
|
|
|
|
|
|
// getGoodsTypeList()
|
|
|
|
|
|
// getInventoryTypeList()
|
|
|
|
|
|
// getOutInventoryTypeList()
|
|
|
|
|
|
// getDailyInventoryList()
|
|
|
|
|
|
// getNoticeList()
|
2026-01-20 16:56:01 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const downloadExcel = () => {
|
2026-02-03 11:40:02 +08:00
|
|
|
|
proxy.download('/stat/stockAge/export30', {}, `库龄统计_${new Date().getTime()}.xlsx`)
|
2026-01-20 16:56:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getChartInventoryAge = (data, id) => {
|
|
|
|
|
|
let chartDom = document.getElementById(id);
|
|
|
|
|
|
let myChart = echarts.init(chartDom);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
left: 'left'
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '库龄',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: '50%',
|
|
|
|
|
|
data: data,
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getChartInventoryReview = (data) => {
|
|
|
|
|
|
let xAxisData = []
|
|
|
|
|
|
let totalData = []
|
|
|
|
|
|
let usedData = []
|
|
|
|
|
|
let freeData = []
|
2026-02-03 11:40:02 +08:00
|
|
|
|
data.forEach(item => {
|
|
|
|
|
|
xAxisData.push(item.cangkuName)
|
|
|
|
|
|
totalData.push(item.totalSlot)
|
|
|
|
|
|
usedData.push(item.usedSlot)
|
|
|
|
|
|
freeData.push(item.unusedSlot)
|
2026-01-20 16:56:01 +08:00
|
|
|
|
})
|
|
|
|
|
|
var chartDom = document.getElementById('echartsInventoryReview');
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
// title: {
|
|
|
|
|
|
// text: 'World Population'
|
|
|
|
|
|
// },
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
// bottom: '8%',
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
boundaryGap: [0, 0.01]
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: xAxisData,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
rotate: 30,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总库位',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: totalData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '已使用',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: usedData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '未使用',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: freeData
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getChartInStorage = (data, id) => {
|
|
|
|
|
|
let xAxisData = []
|
|
|
|
|
|
let projectData = []
|
|
|
|
|
|
let totalData = []
|
|
|
|
|
|
let itemData = []
|
|
|
|
|
|
let priceData = []
|
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
|
xAxisData.push(item.groupName)
|
|
|
|
|
|
projectData.push(item.projectCount)
|
|
|
|
|
|
itemData.push(item.goodsCountTotal)
|
|
|
|
|
|
totalData.push(item.sumQty)
|
|
|
|
|
|
priceData.push(item.sumAmount)
|
|
|
|
|
|
})
|
|
|
|
|
|
var chartDom = document.getElementById(id);
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'cross',
|
|
|
|
|
|
crossStyle: {
|
|
|
|
|
|
color: '#999'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// toolbox: {
|
|
|
|
|
|
// feature: {
|
|
|
|
|
|
// dataView: { show: true, readOnly: false },
|
|
|
|
|
|
// magicType: { show: true, type: ['line', 'bar'] },
|
|
|
|
|
|
// restore: { show: true },
|
|
|
|
|
|
// saveAsImage: { show: true }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
// bottom: '8%',
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
// data: ['项目数', '条目数', '总金额']
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: xAxisData,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
rotate: 30,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '数量',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 250,
|
|
|
|
|
|
// interval: 50,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 个'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// // 调整纵坐标网格线样式，比如设为虚线、浅色
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee', // 浅色，降低存在感
|
|
|
|
|
|
// type: 'dashed' // 虚线
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '金额',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 25,
|
|
|
|
|
|
// interval: 5,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 元'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee',
|
|
|
|
|
|
// type: 'dashed'
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '项目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: projectData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '条目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: itemData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总数量',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: totalData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总金额',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 元';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: priceData
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getChartGoodsType = (data) => {
|
|
|
|
|
|
let xAxisData = []
|
|
|
|
|
|
let projectData = []
|
|
|
|
|
|
let totalData = []
|
|
|
|
|
|
let itemData = []
|
|
|
|
|
|
let priceData = []
|
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
|
xAxisData.push(item.typeName)
|
|
|
|
|
|
projectData.push(item.projectCount)
|
|
|
|
|
|
totalData.push(item.totalQty)
|
|
|
|
|
|
itemData.push(item.itemCount)
|
|
|
|
|
|
priceData.push(item.amountHt)
|
|
|
|
|
|
})
|
|
|
|
|
|
var chartDom = document.getElementById("echartsGoodsType");
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'cross',
|
|
|
|
|
|
crossStyle: {
|
|
|
|
|
|
color: '#999'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// toolbox: {
|
|
|
|
|
|
// feature: {
|
|
|
|
|
|
// dataView: { show: true, readOnly: false },
|
|
|
|
|
|
// magicType: { show: true, type: ['line', 'bar'] },
|
|
|
|
|
|
// restore: { show: true },
|
|
|
|
|
|
// saveAsImage: { show: true }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
// bottom: '8%',
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
// data: ['项目数', '条目数', '总金额']
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: xAxisData,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
rotate: 30,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '数量',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 250,
|
|
|
|
|
|
// interval: 50,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 个'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// // 调整纵坐标网格线样式，比如设为虚线、浅色
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee', // 浅色，降低存在感
|
|
|
|
|
|
// type: 'dashed' // 虚线
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '金额',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 25,
|
|
|
|
|
|
// interval: 5,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 元'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee',
|
|
|
|
|
|
// type: 'dashed'
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '项目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: projectData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '条目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: itemData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总数量',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: totalData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总金额',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 元';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: priceData
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getChartInventoryType = (data, id) => {
|
|
|
|
|
|
let xAxisData = []
|
|
|
|
|
|
let projectData = []
|
|
|
|
|
|
let totalData = []
|
|
|
|
|
|
let itemData = []
|
|
|
|
|
|
let priceData = []
|
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
|
xAxisData.push(item.rkTypeName)
|
|
|
|
|
|
projectData.push(item.projectCount)
|
|
|
|
|
|
totalData.push(item.sumQty)
|
|
|
|
|
|
itemData.push(item.goodsCountTotal)
|
|
|
|
|
|
priceData.push(item.sumAmount)
|
|
|
|
|
|
})
|
|
|
|
|
|
var chartDom = document.getElementById(id);
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'cross',
|
|
|
|
|
|
crossStyle: {
|
|
|
|
|
|
color: '#999'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// toolbox: {
|
|
|
|
|
|
// feature: {
|
|
|
|
|
|
// dataView: { show: true, readOnly: false },
|
|
|
|
|
|
// magicType: { show: true, type: ['line', 'bar'] },
|
|
|
|
|
|
// restore: { show: true },
|
|
|
|
|
|
// saveAsImage: { show: true }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
// bottom: '8%',
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
// data: ['项目数', '条目数', '总金额']
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: xAxisData,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
rotate: 30,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '数量',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 250,
|
|
|
|
|
|
// interval: 50,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 个'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// // 调整纵坐标网格线样式，比如设为虚线、浅色
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee', // 浅色，降低存在感
|
|
|
|
|
|
// type: 'dashed' // 虚线
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '金额',
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
// max: 25,
|
|
|
|
|
|
// interval: 5,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} 元'
|
|
|
|
|
|
},
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: '#eee',
|
|
|
|
|
|
// type: 'dashed'
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '项目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: projectData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '条目数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: itemData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总数量',
|
|
|
|
|
|
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 个';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: totalData
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '总金额',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' 元';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: priceData
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.dashboard{
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// top: 0;
|
|
|
|
|
|
// bottom: 0;
|
|
|
|
|
|
// left: 0;
|
|
|
|
|
|
// right: 0;
|
|
|
|
|
|
// display: flex;
|
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
|
background-color: #F5F5F5;
|
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
|
.boxNum{
|
|
|
|
|
|
height: 98px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
.boxNum_icon{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.titleBox{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.line {
|
|
|
|
|
|
width: 6px;
|
|
|
|
|
|
height: 15px;
|
|
|
|
|
|
background: #199793;
|
|
|
|
|
|
border-radius: 12px 12px 12px 12px;
|
|
|
|
|
|
transform: rotateX(360deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
.name{
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
height: 28px;
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
line-height: 23px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
text-transform: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.main{
|
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
box-shadow: 0px 4px 12px 0px rgba(255, 223, 217, 0.2);
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
height: 360px;
|
|
|
|
|
|
.main_progress{
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.main_box{
|
|
|
|
|
|
width: 88%;
|
|
|
|
|
|
height: 110px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
margin-top: 25px;
|
|
|
|
|
|
background:#E2F1FE;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
.warningBox{
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
border: #fecaca 1px solid;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
color: #F87777;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.echartsMain{
|
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
.echartsBox{
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
