This commit is contained in:
shijing 2022-01-25 08:48:05 +08:00
parent 3eb5c6ac76
commit 84ba98925d
2 changed files with 109 additions and 108 deletions

View File

@ -299,6 +299,18 @@
} }
} , } ,
}, },
watch: {
'$route.path': function (newVal) {
if(newVal==='/dashboard'){
this.$refs.leftMenu.handlerSelect(this.list[0]);
this.$refs.chart.scrollTo({
top: 0,
left: this.list[0].left - 30,
behavior: "smooth"
});
}
}
},
data() { data() {
return { return {
windowWidth:0, windowWidth:0,

View File

@ -4,7 +4,7 @@
<div class="CardTitleWrap"> <div class="CardTitleWrap">
<span class="verticalLine"></span><span class="dashboardCardTitle">数据统计</span> <span class="verticalLine"></span><span class="dashboardCardTitle">数据统计</span>
</div> </div>
<div style="padding: 20px 20px 55px 20px;overflow: hidden;"> <div style="padding: 20px;overflow: hidden;">
<div class="cardsWrap" @click="toDetail('1')"> <div class="cardsWrap" @click="toDetail('1')">
<div class="svgIconWrap"> <div class="svgIconWrap">
<svg-icon <svg-icon
@ -18,6 +18,9 @@
<span class="totalCount">{{contractTotalCurrent}}</span> <span class="totalCount">{{contractTotalCurrent}}</span>
<span></span> <span></span>
</div> </div>
<!--<div style="height: 35px;line-height: 35px;font-size: 16px;color: #333333">
<span>本年合同总数</span>
</div>-->
</div> </div>
</div> </div>
<div class="cardsWrap" @click="toDetail('2')"> <div class="cardsWrap" @click="toDetail('2')">
@ -149,6 +152,8 @@
</div> </div>
<div class="block"> <div class="block">
<el-pagination <el-pagination
small
:pager-count="pageCounts"
:current-page.sync="equipmentPage" :current-page.sync="equipmentPage"
:page-size="equipmentPageSize" :page-size="equipmentPageSize"
layout="prev, pager, next, jumper" layout="prev, pager, next, jumper"
@ -175,8 +180,6 @@
</el-table-column> </el-table-column>
<el-table-column label="设备名称" prop="name" show-overflow-tooltip> <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column label="规格型号" prop="model" show-overflow-tooltip>
</el-table-column>
<el-table-column label="设备状态" prop="material_"> <el-table-column label="设备状态" prop="material_">
<!--type=1生产设备--> <!--type=1生产设备-->
<template slot-scope="scope"> <template slot-scope="scope">
@ -204,6 +207,14 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="下次校准日期" prop="model">
<template slot-scope="scope">
<el-tag v-if="scope.row.next_check_date" :type="setClass(scope.row.next_check_date)">
{{scope.row.next_check_date}}
</el-tag>
<div v-else></div>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
@ -217,7 +228,7 @@
<div class="block"> <div class="block">
<el-pagination <el-pagination
small small
pager-count="3" :pager-count="pageCounts"
:current-page.sync="userPage" :current-page.sync="userPage"
:page-size="userPageSize" :page-size="userPageSize"
layout="prev, pager, next, jumper" layout="prev, pager, next, jumper"
@ -246,11 +257,11 @@
</el-table-column> </el-table-column>
<el-table-column label="到岗情况" prop="dept_name"> <el-table-column label="到岗情况" prop="dept_name">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.dept===1" type="success"> <el-tag v-if="scope.row.is_atwork" type="success">
</el-tag> </el-tag>
<el-tag v-else type="danger"> <el-tag v-else type="danger">
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -269,13 +280,13 @@
<div class="block"> <div class="block">
<el-pagination <el-pagination
small small
pager-count="3" :pager-count="pageCounts"
:current-page.sync="remindPage" :current-page.sync="warningPage"
:page-size="remindPageSize" :page-size="warningPageSize"
layout="prev, pager, next, jumper" layout="prev, pager, next, jumper"
:total="remindTotal" :total="warningTotal"
@size-change="handleRemindSizeChange" @size-change="handleWarningSizeChange"
@current-change="handleRemindCurrentChange" @current-change="handleWarningCurrentChange"
> >
</el-pagination> </el-pagination>
</div> </div>
@ -286,37 +297,29 @@
<el-tab-pane label="库存警告" name="库存警告"> <el-tab-pane label="库存警告" name="库存警告">
<ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()" <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
@mouseleave="Up()"> @mouseleave="Up()">
<li v-for="item in list" :key="item.id" class="listItem"> <li class="listItem" v-for="item in warningList" :key="item.id">
<div class="itemText"> <div class="itemText">
<span>{{item.name}}</span><span style="float: right">2021-12-30</span> <span>{{item.name}}({{item.unit}})</span><span>剩余{{item.count}},低于安全库存{{item.count_safe}}</span>
</div> </div>
</li> </li>
</ul> </ul>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="临近交货" name="临近交货"> <el-tab-pane label="临近交货" name="临近交货">
<ul class="lists"> <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
<li class="listItem"> @mouseleave="Up()">
<div class="itemText">
<span>某某批货临近交货日期</span><span>2021-12-20</span>
</div>
</li>
<li class="listItem" v-for="item in warningList" :key="item.id"> <li class="listItem" v-for="item in warningList" :key="item.id">
<div class="itemText"> <div class="itemText">
<span>{{item}}</span><span>2021-12-20</span> <span>{{item.name}}({{item.number}})</span><span>{{item.delivery_date}}到交货日期</span>
</div> </div>
</li> </li>
</ul> </ul>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="过期提醒" name="过期提醒"> <el-tab-pane label="过期提醒" name="过期提醒">
<ul class="lists"> <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
<li class="listItem"> @mouseleave="Up()">
<div class="itemText">
<span>某某批货临近过期</span><span>2021-11-20</span>
</div>
</li>
<li class="listItem" v-for="item in warningList" :key="item.id"> <li class="listItem" v-for="item in warningList" :key="item.id">
<div class="itemText"> <div class="itemText">
<span>{{item}}</span><span>2021-12-20</span> <span>{{item.name}}({{item.number}})</span><span>{{item.delivery_date}}到期</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -333,16 +336,13 @@
import echarts from 'echarts' import echarts from 'echarts'
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
import {getUserList} from "@/api/user"; import {getUserList} from "@/api/user";
import {getPlanGantt} from "@/api/srm";
import {getProcessYield} from "@/api/srm";
import {getMaterialList} from "@/api/mtm"; import {getMaterialList} from "@/api/mtm";
// import {getInventoryList} from "@/api/inm";
import {getProductionplanList} from "@/api/pm"; import {getProductionplanList} from "@/api/pm";
import {getmaterialbatchList} from "@/api/inm"; import {getmaterialbatchList} from "@/api/inm";
import gantt from "@/components/Gantt/dashGantt"; import gantt from "@/components/Gantt/dashGantt";
import {getpEquipmentList} from "@/api/equipment"; import {getpEquipmentList} from "@/api/equipment";
import {getContractList, getOrderList} from "@/api/sam"; import {getProcessYield ,getPlanGantt} from "@/api/srm";
import {getContractList , getOrderList} from "@/api/sam";
export default { export default {
components: {gantt}, components: {gantt},
name: 'Dashboard', name: 'Dashboard',
@ -358,22 +358,22 @@
currentYear: null, currentYear: null,
currentMonth: null, currentMonth: null,
currentDay: null, currentDay: null,
pageCounts: 5,
userPage: 1, userPage: 1,
userPageSize: 10, userPageSize: 10,
userTotal: 0, userTotal: 0,
equipmentPage: 1, equipmentPage: 1,
equipmentPageSize: 10, equipmentPageSize: 10,
equipmentTotal: 0, equipmentTotal: 0,
remindPage: 1, warningPage: 1,
remindPageSize: 20, warningPageSize: 10,
remindTotal: 0, warningTotal: 0,
tableIndex: null, tableIndex: null,
chartIndex: null, chartIndex: null,
tableDate: '2021-12', tableDate: '2021-12',
chartDate: [], chartDate: [],
proList: [], proList: [],
userList: [], userList: [],
remindList: [],
warningList: [], warningList: [],
equipmentList: [], equipmentList: [],
list: [ list: [
@ -427,27 +427,47 @@
]) ])
}, },
watch: { watch: {
"$route": { '$route.path': function (newVal) {
handler(route) { if(newVal==='/dashboard') {
if (route.name === 'dashboard') { this.getUserList();//用户列表
// that.handlerCheckList(this.list); this.getEquipmentList();//设备列表
} this.getGanttData();//甘特图数据
this.getStatisticsData();//统计数据
this.getNoticeData();//提醒列表
} }
} }
}, },
methods: { methods: {
setClass:function(check_date) {
let obj = {};
if(check_date!=null){
let dat = new Date();
let time = dat.getTime();
let check = new Date(check_date).getTime();
let timeDiffer = (check-time)/1000/60/60/24;
if (4>timeDiffer&&timeDiffer>0) {
obj = 'warning';
}else if (timeDiffer<0) {
obj = "danger";
}
}
return obj;
},
getNoticeData() { getNoticeData() {
this.ScrollUp(); this.ScrollUp();
}, },
ScrollUp() { ScrollUp() {
this.intNum = setInterval(() => { let that = this;
this.animate = true; that.intNum = setInterval(() => {
setTimeout(() => { if(that.warningList.length>3){
this.list.push(this.list[0]); that.animate = true;
this.list.shift(); setTimeout(() => {
this.animate = false; that.warningList.push(that.warningList[0]);
}, 500) that.warningList.shift();
}, 1000); that.animate = false;
}, 3000)
}
}, 3000);
}, },
//鼠标移上去停止 //鼠标移上去停止
Stop() { Stop() {
@ -526,9 +546,11 @@
}); });
//获取库存警告 //获取库存警告
getMaterialList({tag: 'low_inm'}).then((response) => { getMaterialList({page: 1, page_size:that.warningPageSize,tag: 'low_inm'}).then((response) => {
if (response.data) { if (response.data) {
debugger;
that.warningList = response.data.results; that.warningList = response.data.results;
that.warningTotal = response.data.count;
} }
}); });
}, },
@ -561,7 +583,7 @@
getUserList() { getUserList() {
let that = this; let that = this;
that.listLoadingUser = true; that.listLoadingUser = true;
getUserList({page: that.userPage, page_size: that.userPageSize}).then((response) => { getUserList({page: that.userPage, page_size: that.userPageSize, fields: 'id,name,dept_name,is_atwork'}).then((response) => {
if (response.data) { if (response.data) {
that.userList = response.data.results; that.userList = response.data.results;
that.userTotal = response.data.count; that.userTotal = response.data.count;
@ -575,7 +597,7 @@
let that = this; let that = this;
that.listLoadingUser = true; that.listLoadingUser = true;
that.userPage = val; that.userPage = val;
getUserList({page: val, page_size: that.userPageSize}).then((response) => { getUserList({page: val, page_size: that.userPageSize, fields: 'id,name,dept_name,is_atwork'}).then((response) => {
if (response.data) { if (response.data) {
that.userList = response.data.results; that.userList = response.data.results;
that.userTotal = response.data.count; that.userTotal = response.data.count;
@ -592,8 +614,8 @@
that.userList.push(that.userList[0]); that.userList.push(that.userList[0]);
that.userList.shift(); that.userList.shift();
that.animateUser = false; that.animateUser = false;
}, 500) }, 3000)
}, 1000); }, 3000);
}, },
//鼠标移上去停止 //鼠标移上去停止
stopScroll() { stopScroll() {
@ -767,9 +789,9 @@
} else if (index === '3') { } else if (index === '3') {
this.$router.push({name: 'management', params: {page: 1, page_size: 20}}) this.$router.push({name: 'management', params: {page: 1, page_size: 20}})
} else if (index === '4') { } else if (index === '4') {
this.$router.push({name: 'product', params: {page: 1, page_size: 20, material__type: 1}}) this.$router.push({name: 'product'})
} else if (index === '5') { } else if (index === '5') {
this.$router.push({name: 'product', params: {page: 1, page_size: 20, material__type: 1}}) this.$router.push({name: 'unproduct'})
} }
}, },
//便捷查询按钮 //便捷查询按钮
@ -857,35 +879,39 @@
}, },
//提示 //提示
activeNameClick(tab) { activeNameClick(tab) {
debugger;
debugger;
let that = this; let that = this;
that.warningPage = 1;
that.warningList = [];
if (tab.label === '库存警告') { if (tab.label === '库存警告') {
getMaterialList({page: 0, tag: 'low_inm'}).then((response) => { getMaterialList({page: 1, page_size:that.warningPageSize, tag: 'low_inm'}).then((response) => {
if (response.data) { if (response.data) {
that.warningList = response.data; that.warningList = response.data.results;
that.remindTotal = response.data.length; that.warningTotal = response.data.count;
} }
}); });
} else if (tab.label === '临近交货') { } else if (tab.label === '临近交货') {
getmaterialbatchList({page: 0, tag: 'expired'}).then((response) => { getOrderList({page: 1, page_size:that.warningPageSize,tag:'near_delivery'}).then((response) => {
if (response.data) { if (response.data) {
that.warningList = response.data; that.warningList = response.data.results;
that.remindTotal = response.data.length; that.warningTotal = response.data.count;
} }
}); });
} else if (tab.label === '过期提醒') { } else if (tab.label === '过期提醒') {
getmaterialbatchList({page: 0, tag: 'expired'}).then((response) => { getmaterialbatchList({page: 1, page_size:that.warningPageSize, tag: 'expired'}).then((response) => {
if (response.data) { if (response.data) {
that.warningList = response.data; that.warningList = response.data.results;
that.remindTotal = response.data.length; that.warningTotal = response.data.count;
} }
}); });
} }
}, },
handleRemindSizeChange(val) { handleWarningSizeChange(val) {
this.remindPageSize = val; this.warningPageSize = val;
this.remindPage = 1; this.warningPage = 1;
}, },
handleRemindCurrentChange(val) { handleWarningCurrentChange(val) {
console.log(`当前页: ${val}`); console.log(`当前页: ${val}`);
}, },
getGanttData() { getGanttData() {
@ -976,16 +1002,13 @@
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-card.is-always-shadow { .el-card.is-always-shadow {
height: auto !important; height: auto !important;
} }
.dashboard-container { .dashboard-container {
margin: 5px 6px; margin: 5px 6px;
} }
.dashboardTopCard, .dashboardMiddle, .dashboardBottomRow { .dashboardTopCard, .dashboardMiddle, .dashboardBottomRow {
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
@ -994,15 +1017,12 @@
background: #ffffff; background: #ffffff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
} }
.dashboardBottomRow { .dashboardBottomRow {
margin-bottom: 0; margin-bottom: 0;
} }
.dashboardCardPadding { .dashboardCardPadding {
padding: 5px 20px 20px 20px; padding: 5px 20px 20px 20px;
} }
/**/ /**/
.cardsWrap { .cardsWrap {
display: flex; display: flex;
@ -1011,20 +1031,17 @@
float: left; float: left;
font-size: 14px; font-size: 14px;
} }
.svgIconWrap { .svgIconWrap {
margin-right: 20px; margin-right: 20px;
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 15px; border-radius: 15px;
text-align: center; text-align: center;
.svgIcon { .svgIcon {
font-size: 24px; font-size: 24px;
margin-top: 13px margin-top: 13px
} }
} }
.cardsWrap:nth-child(1) { .cardsWrap:nth-child(1) {
.svgIconWrap { .svgIconWrap {
background: #e9f3ff; background: #e9f3ff;
@ -1034,62 +1051,50 @@
} }
} }
} }
.cardsWrap:nth-child(2) { .cardsWrap:nth-child(2) {
.svgIconWrap { .svgIconWrap {
background: #fff1de; background: #fff1de;
.svgIcon { .svgIcon {
color: #ffb23f; color: #ffb23f;
} }
} }
} }
.cardsWrap:nth-child(3) { .cardsWrap:nth-child(3) {
.svgIconWrap { .svgIconWrap {
background: #d9f6d8; background: #d9f6d8;
.svgIcon { .svgIcon {
color: #54cb48; color: #54cb48;
} }
} }
} }
.cardsWrap:nth-child(4) { .cardsWrap:nth-child(4) {
.svgIconWrap { .svgIconWrap {
background: #f0e8fd; background: #f0e8fd;
.svgIcon { .svgIcon {
color: #a378e4; color: #a378e4;
} }
} }
} }
.cardsWrap:nth-child(5) { .cardsWrap:nth-child(5) {
.svgIconWrap { .svgIconWrap {
background: #f7e5ea; background: #f7e5ea;
.svgIcon { .svgIcon {
color: #f27197; color: #f27197;
} }
} }
} }
.totalCountText { .totalCountText {
height: 20px; height: 20px;
line-height: 20px line-height: 20px
} }
.totalCountNum { .totalCountNum {
height: 30px; height: 30px;
} }
.totalCount { .totalCount {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
color: #626262; color: #626262;
} }
/**/ /**/
.CardTitleWrap { .CardTitleWrap {
display: flex; display: flex;
@ -1106,7 +1111,6 @@
margin-right: 7px; margin-right: 7px;
margin-top: 8px; margin-top: 8px;
} }
.dashboardCardTitle { .dashboardCardTitle {
height: 34px; height: 34px;
line-height: 34px; line-height: 34px;
@ -1116,7 +1120,6 @@
vertical-align: middle; vertical-align: middle;
margin-right: 7px; margin-right: 7px;
} }
.stockMore { .stockMore {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
@ -1124,15 +1127,12 @@
cursor: pointer; cursor: pointer;
} }
} }
/*成品率筛选条件*/ /*成品率筛选条件*/
.dashboardCardHand { .dashboardCardHand {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.dashboardCardFilter { .dashboardCardFilter {
display: flex; display: flex;
.convenientWrap { .convenientWrap {
display: flex; display: flex;
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
@ -1141,23 +1141,19 @@
line-height: 30px; line-height: 30px;
margin-left: 10px; margin-left: 10px;
font-size: 12px; font-size: 12px;
.convenientBtn { .convenientBtn {
cursor: pointer; cursor: pointer;
width: 50px; width: 50px;
text-align: center; text-align: center;
border-right: 1px solid #DCDFE6; border-right: 1px solid #DCDFE6;
} }
.convenientBtn:last-child { .convenientBtn:last-child {
border-right: 0; border-right: 0;
border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} }
.convenientBtn:first-child { .convenientBtn:first-child {
border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} }
.activeIndex { .activeIndex {
color: #ffffff; color: #ffffff;
background: #409EFF; background: #409EFF;
@ -1165,12 +1161,10 @@
} }
} }
} }
.anim { .anim {
transition: all 0.5s; transition: all 0.5s;
margin-top: -35px; //高度等于行高 margin-top: -35px; //高度等于行高
} }
.lists { .lists {
height: 100%; height: 100%;
line-height: 35px; line-height: 35px;
@ -1178,27 +1172,22 @@
overflow-y: scroll; overflow-y: scroll;
padding-right: 40px; padding-right: 40px;
margin: 0 !important; margin: 0 !important;
.listItem { .listItem {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
font-size: 16px; font-size: 16px;
.itemText { .itemText {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
} }
} }
#chartColumn > div { #chartColumn > div {
height: 100% !important; height: 100% !important;
canvas { canvas {
height: 100% !important; height: 100% !important;
} }
} }
#dashboardMiddle .el-range-editor--medium.el-input__inner, #dashboardMiddle .el-range-editor--medium.el-input__inner,
#dashboardMiddle .el-range-editor.el-input__inner { #dashboardMiddle .el-range-editor.el-input__inner {
height: 30px !important; height: 30px !important;