| | |
| | | <template> |
| | | <div class="content"> |
| | | <!-- <el-row :gutter="10"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/qbgd.png"></img> |
| | | <span>全部工单</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">20<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/gdc.png"></img> |
| | | <span>工单池</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">2<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/gdc.png"></img> |
| | | <span>待响应工单</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">1<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-card shadow="never"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="font-18 font-bold">调拨待办</span> |
| | | </div> |
| | | <div class="f-r f-r-between m-b-10"> |
| | | <el-radio-group @change="changeAudit" v-model="waitType" size="mini"> |
| | | <el-radio-button label="0">待出库</el-radio-button> |
| | | <el-radio-button label="1">待入库</el-radio-button> |
| | | </el-radio-group> |
| | | <div class="to-more" @click="nav('/stock/transfer/transferissue')">查看更多 ></div> |
| | | </div> |
| | | <el-table v-loading="waitLoading" :data="waitWorkData" class="top-tb" height="220" :show-header="false" |
| | | size="medium"> |
| | | <el-table-column prop="businessFormCode" align="center" width="130"></el-table-column> |
| | | <el-table-column prop="inWarehouseName" align="left" min-width="130"> |
| | | <template slot-scope="{row}"> |
| | | <el-tooltip class="item" effect="dark" :content="row.inWarehouseName " placement="top-start"> |
| | | <div class="font-14 color-333" |
| | | style="width: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden"> |
| | | {{ row.inWarehouseName }} |
| | | </div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="operatorName" align="center" width="80"></el-table-column> |
| | | <el-table-column prop="createTime" align="center" width="160"> |
| | | <template slot-scope="scope"> |
| | | <span class="font-14 color-333">{{ formattTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="date" label="操作" fixed="right" align="center" width="80"> |
| | | <template slot-scope="scope"> |
| | | <el-button style="padding: 4px 15px" @click.native.prevent="aduitThis(scope.row)" size="mini" type="primary">处理</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-empty slot="empty" description="暂无数据"></el-empty> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/jxzgd.png"></img> |
| | | <span>进行中工单</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">3<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/gdc.png"></img> |
| | | <span>事件池</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">{{eventInfo.pool}}<span class="font-12">个</span> </div> |
| | | <div> |
| | | <img v-if="eventInfo.poolLastNum>=0" class='arrow' src="@/assets/images/index/top.png"></img> |
| | | <img v-if="eventInfo.poolLastNum<0" class='arrow' src="@/assets/images/index/down.png"></img> |
| | | 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/dxy.png"></img> |
| | | <span>进行中事件</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">{{eventInfo.wait}}<span class="font-12">个</span> </div> |
| | | <div> |
| | | <img v-if="eventInfo.waitLastNum>=0" class='arrow' src="@/assets/images/index/top.png"></img> |
| | | <img v-if="eventInfo.waitLastNum<0" class='arrow' src="@/assets/images/index/down.png"></img> |
| | | 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-card shadow="never"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="font-18 font-bold">预警通知</span> |
| | | </div> |
| | | <div class="f-r f-r-between m-b-10"> |
| | | <el-radio-group size="mini" v-model="earlyWarningType" @change="changeEarlyWarning"> |
| | | <el-radio-button label="">全部</el-radio-button> |
| | | <el-radio-button label="2">缺货 <span v-if="warningTypeNum.lowNum">({{warningTypeNum.lowNum}})</span></el-radio-button> |
| | | <el-radio-button label="1">超出 <span v-if="warningTypeNum.upNum">({{warningTypeNum.upNum}})</span></el-radio-button> |
| | | </el-radio-group> |
| | | <div class="to-more" @click="nav('/stock/ledger/alertQuery')">查看更多 ></div> |
| | | </div> |
| | | <el-table v-loading="earlyLoading" :data="earlyWarningData" class="top-tb" height="220" :show-header="false" |
| | | size="medium"> |
| | | <el-table-column prop="baseGoodsTemplateName" align="left" min-width="130"> |
| | | <template slot-scope="{row}"> |
| | | <el-tooltip class="item" effect="dark" :content="row.baseGoodsTemplateName " placement="top-start"> |
| | | <div class="font-14 color-333" |
| | | style="width: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden"> |
| | | {{ row.baseGoodsTemplateName }} |
| | | </div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="baseGoodsModelsName" align="left" min-width="130"> |
| | | <template slot-scope="{row}"> |
| | | <el-tooltip class="item" effect="dark" :content="row.baseGoodsModelsName " placement="top-start"> |
| | | <div class="font-14 color-333" |
| | | style="width: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden"> |
| | | {{ row.baseGoodsModelsName }} |
| | | </div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="surplus" align="left" min-width="130"> |
| | | <template slot-scope="{row}"> |
| | | <span class="font-14 color-333">剩余{{ row.warehouseCount }}{{ row.unit }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="warningTime" align="center" width="160"> |
| | | <template slot-scope="{row}"> |
| | | <span class="font-14 color-333">{{ formattTime(row.warningTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-empty slot="empty" description="暂无数据"></el-empty> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="10" style="margin-top: 10px"> |
| | | <!-- 中间统计部分--> |
| | | <div class="f-r f-r-between total-list"> |
| | | <div class="total-item"> |
| | | <div class="font-14 color-666">物品数量</div> |
| | | <div class="font-14 color-333" style="margin-top:6px;"><span |
| | | class="total-num">{{ goodsNumPrice.totalNum }}</span></div> |
| | | </div> |
| | | <div class="total-item"> |
| | | <div class="font-14 color-666">资产总金额</div> |
| | | <div class="font-14 color-333" style="margin-top:6px;"><span |
| | | class="total-num">{{ goodsNumPrice.totalPrice }}</span>万元 |
| | | </div> |
| | | </div> |
| | | <div class="total-item"> |
| | | <div class="font-14 color-666">物品占用率</div> |
| | | <div class="font-14 color-333" style="margin-top:6px;"><span |
| | | class="total-num">{{ goodsNumPrice.zhanYouPercent }}%</span></div> |
| | | </div> |
| | | <div class="total-item"> |
| | | <div class="font-14 color-666">A类物品数量</div> |
| | | <div class="font-14 color-333" style="margin-top:6px;"><span |
| | | class="total-num">{{ goodsNumPrice.aTotalNum }}</span></div> |
| | | </div> |
| | | <div class="total-item"> |
| | | <div class="font-14 color-666">B类物品数量</div> |
| | | <div class="font-14 color-333" style="margin-top:6px;"><span |
| | | class="total-num">{{ goodsNumPrice.bTotalNum }}</span></div> |
| | | </div> |
| | | </div> |
| | | <!-- 类别金额统计/类别数量统计 --> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/wtc.png"></img> |
| | | <span>问题池</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">0<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/dxy.png"></img> |
| | | <span>待响应问题</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">0<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/gdc.png"></img> |
| | | <span>变更工单</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">0<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <LBSLTJ :num="goodsNumPrice"></LBSLTJ> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/dxy.png"></img> |
| | | <span>待响应变更</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">0<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/fbgd.png"></img> |
| | | <span>发布工单</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">2<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="flex bg-fff box flex-between"> |
| | | <div class="flex f-c f-col"> |
| | | <img class="icon" src="@/assets/images/index/dxy.png"></img> |
| | | <span>待响应发布</span> |
| | | </div> |
| | | <div class="flex f-e f-col"> |
| | | <div class="font-28">5<span class="font-12">个</span> </div> |
| | | <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <LBJETJ :num="goodsNumPrice"></LBJETJ> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="12"> |
| | | <XMGZD></XMGZD> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <XYZC></XYZC> |
| | | </el-col> |
| | | </el-row> |
| | | <el-card class="box-card"> |
| | | |
| | | <span style="font-weight: 600;font-size: 20px">工单统计</span> |
| | | |
| | | <el-row :gutter="10"> |
| | | <el-col :span="6"> |
| | | <SJDJ></SJDJ> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <GDLX></GDLX> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <SJGDZB></SJGDZB> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <progressMY></progressMY> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </el-card>--> |
| | | <!-- 资产增长/报废统计图(数量)--> |
| | | <XYZC></XYZC> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import listPage from '@/views/mixins/listPage'; |
| | | import {getGoodsNumPrice} from '@/api/dashboard' |
| | | // 创建Context |
| | | import {formattedDate} from "@/utils/DateFormatter"; |
| | | import * as dash from '@/api/dashboard/dash' |
| | | // import * as createEvent from "@/api/eventManage/createEvent"; |
| | | import {LongToDateTime} from "@/utils/DateFormatter"; |
| | | import {transfeIncome, transferList, transferOutput} from "@/api/stock/transfer"; |
| | | import {getWarningTypeNum, geWarningList} from '@/api/stock/ledger' |
| | | |
| | | const ComponentContext = require.context('./components', false, /\.vue$/i); |
| | | let res_components = {}; |
| | | // 生成待待注册组件集合 |
| | |
| | | export default { |
| | | name: 'Dashboard', |
| | | components: {...res_components}, |
| | | mixins: [listPage], |
| | | data() { |
| | | return { |
| | | eventInfo:{} |
| | | earlyLoading: false, |
| | | waitLoading: false, |
| | | goodsNumPrice: { |
| | | aTotalNum: 0, |
| | | aTotalPrice: 0, |
| | | bTotalNum: 0, |
| | | bTotalPrice: 0, |
| | | cTotalNum: 0, |
| | | cTotalPrice: 0, |
| | | tenantId: 0, |
| | | totalNum: 0, |
| | | totalPrice: 0, |
| | | xiaFaNum: 0, |
| | | zhanYouPercent: 0, |
| | | }, |
| | | waitType: '0', |
| | | waitWorkData: [], // 待办工作 |
| | | earlyWarningType: '', |
| | | warningTypeNum: { |
| | | lowNum: 0, |
| | | totalNum: 0, |
| | | upNum: 0, |
| | | }, |
| | | earlyWarningData: [] // 预警通知 |
| | | }; |
| | | }, |
| | | created() { |
| | | // this.getEventInfo() |
| | | this.getAuditList() |
| | | this.getWarningList() |
| | | getGoodsNumPrice().then(res => { |
| | | if(res){ |
| | | this.goodsNumPrice = res |
| | | } |
| | | |
| | | }) |
| | | }, |
| | | methods: { |
| | | // 获取事件数据 |
| | | getEventInfo(){ |
| | | dash.getEventInfo().then(res => { |
| | | if (res) { |
| | | this.eventInfo = res |
| | | } |
| | | }) |
| | | } |
| | | // 格式化时间 |
| | | formattTime(time) { |
| | | return LongToDateTime(time) |
| | | }, |
| | | changeAudit(e) { |
| | | this.waitType = e |
| | | this.$nextTick(() => { |
| | | this.getAuditList() |
| | | }) |
| | | }, |
| | | // 获取预警通知列表数据 |
| | | getAuditList() { |
| | | this.waitLoading = true |
| | | this.waitWorkData = [] |
| | | let params = { |
| | | pageNum: 1, |
| | | pageSize: 5, |
| | | } |
| | | if (this.waitType === '0') { |
| | | params.outAgencyId = this.userInfo.tenantId |
| | | params.states = 0 |
| | | } else { |
| | | params.inAgencyId = this.userInfo.tenantId |
| | | params.states = 1 |
| | | } |
| | | transferList(params).then((res) => { |
| | | this.waitLoading = false |
| | | this.waitWorkData = res.datas; |
| | | }).catch(() => { |
| | | this.waitLoading = false |
| | | }); |
| | | }, |
| | | aduitThis(row) { |
| | | if (this.waitType === '0') { |
| | | this.handleOutput(row) |
| | | } else { |
| | | this.handleIncome(row) |
| | | } |
| | | }, |
| | | // 入库 |
| | | handleIncome(row) { |
| | | this.$confirm(`您确定 单号:${row.businessFormCode} 接收入库吗?`, '接收入库', { |
| | | beforeClose: (action, instance, done) => { |
| | | if (action == 'confirm') { |
| | | instance.confirmButtonLoading = true; |
| | | instance.confirmButtonText = '执行中...'; |
| | | transfeIncome({id: row.id}) |
| | | .then((res) => { |
| | | this.$message.success('接收入库成功!'); |
| | | done(); |
| | | instance.confirmButtonLoading = false; |
| | | this.search(1); |
| | | }) |
| | | .catch(() => { |
| | | done(); |
| | | }); |
| | | } else { |
| | | done(); |
| | | } |
| | | }, |
| | | }); |
| | | }, |
| | | //出库 |
| | | handleOutput(row) { |
| | | this.$confirm(`您确定 单号:${row.businessFormCode} 调拨出库吗?`, '调拨出库', { |
| | | beforeClose: (action, instance, done) => { |
| | | if (action == 'confirm') { |
| | | instance.confirmButtonLoading = true; |
| | | instance.confirmButtonText = '执行中...'; |
| | | transferOutput({id: row.id}) |
| | | .then((res) => { |
| | | this.$message.success('调拨出库成功!'); |
| | | done(); |
| | | instance.confirmButtonLoading = false; |
| | | this.search(1); |
| | | }) |
| | | .catch(() => { |
| | | done(); |
| | | }); |
| | | } else { |
| | | done(); |
| | | } |
| | | }, |
| | | }); |
| | | }, |
| | | // 切换预警通知 |
| | | changeEarlyWarning(e) { |
| | | this.earlyWarningType = e |
| | | this.$nextTick(() => { |
| | | this.getWarningList() |
| | | }) |
| | | }, |
| | | // 获取预警通知列表数据 |
| | | getWarningList() { |
| | | this.earlyLoading = true |
| | | this.earlyWarningData = [] |
| | | getWarningTypeNum().then(res => { |
| | | this.warningTypeNum = res |
| | | geWarningList({ |
| | | warningType: this.earlyWarningType, |
| | | pageNum: 1, |
| | | pageSize: 5, |
| | | }).then(res => { |
| | | this.earlyLoading = false |
| | | this.earlyWarningData = res.datas; |
| | | }).catch(() => { |
| | | this.waitLoading = false |
| | | }); |
| | | }) |
| | | |
| | | }, |
| | | // 跳转 |
| | | nav(url) { |
| | | this.$router.push(url) |
| | | } |
| | | } |
| | | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .content{ |
| | | padding:10px |
| | | .content { |
| | | padding: 10px |
| | | } |
| | | .box{ |
| | | border-radius: 10px; |
| | | padding: 20px 0; |
| | | align-items: flex-end; |
| | | |
| | | .to-more { |
| | | font-size: 14px; |
| | | color: #0d997c; |
| | | cursor: pointer; |
| | | } |
| | | .flex{ |
| | | display: flex; |
| | | } |
| | | .flex-between{ |
| | | justify-content: space-around; |
| | | } |
| | | .f-col{ |
| | | flex-direction: column; |
| | | } |
| | | .f-c{ |
| | | align-items: center; |
| | | } |
| | | .f-e{ |
| | | align-items: flex-end; |
| | | } |
| | | .f-s{ |
| | | align-items: flex-start; |
| | | } |
| | | .c-1{ |
| | | color: #11AD6F; |
| | | } |
| | | .c-f{ |
| | | color: #FF4B4B; |
| | | } |
| | | .font-28{ |
| | | font-size: 28px; |
| | | } |
| | | .font-12{ |
| | | font-size: 12px; |
| | | } |
| | | .icon{ |
| | | width: 30px; |
| | | height: 30px; |
| | | |
| | | .m-b-10 { |
| | | margin-bottom: 10px; |
| | | } |
| | | .arrow{ |
| | | width: 12px; |
| | | height: 12px; |
| | | } |
| | | .box-card { |
| | | margin-top: 10px; |
| | | |
| | | .top-tb { |
| | | width: 100%; |
| | | border-radius: 10px; |
| | | border: none; |
| | | .card-title-right { |
| | | display: flex; |
| | | align-items: center; |
| | | align-self: flex-end; |
| | | float: right; |
| | | } |
| | | } |
| | | |
| | | .total-list { |
| | | padding: 15px 0; |
| | | } |
| | | |
| | | .total-item { |
| | | width: 19%; |
| | | padding: 12px 20px; |
| | | border-radius: 4px; |
| | | margin-right: 1%; |
| | | background-color: #FFFFFF; |
| | | border-left: 4px solid #fb6260; |
| | | } |
| | | |
| | | .total-item:last-child { |
| | | margin: 0; |
| | | } |
| | | |
| | | .total-num { |
| | | font-size: 24px; |
| | | font-weight: bold; |
| | | margin-right: 3px; |
| | | } |
| | | </style> |