<template>
|
<div id="Didproject" class="global-content">
|
<div class="width height overflowy-auto">
|
<div class="height250 overflow">
|
<div class="flex justify-end align-centent">
|
<el-date-picker
|
v-model="daterange"
|
size="mini"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
:clearable="false"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
<el-button class="margin-left margin-right" type="primary" size="mini" @click="derive">导出</el-button>
|
</div>
|
<did-nav />
|
<classify />
|
</div>
|
<!-- height-calc280 -->
|
<div class="width margin-top10px overflowy-auto">
|
<div class="margintopbot paddingtopbottom width overflow">
|
<p class="fontsize2rem text-center">货位使用实时图</p>
|
<div class="flex flex-wrap">
|
<div
|
class="did-echarts margin-top10px margin-right width30"
|
v-for="(item, index) in chartData"
|
:key="index + 'pieechart'"
|
>
|
<pie-echarts class="width height" :chartData="item" />
|
</div>
|
</div>
|
</div>
|
<div class="margintopbot width overflow">
|
<p class="fontsize2rem text-center">零件出入库统计</p>
|
<div class="width margintopbot flex justify-end">
|
<el-date-picker
|
v-model="datatime"
|
size="mini"
|
type="datetimerange"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
<el-button class="margin-left margin-right" type="primary" size="mini" @click="goodsinquer">查询</el-button>
|
<el-button class="margin-left margin-right" type="primary" size="mini" @click="linkTo">跳转</el-button>
|
</div>
|
<div class="width98 margintopbot echart-height">
|
<line-echart
|
titleechart="零件数量统计"
|
:linelist="BarItemlinelist"
|
:colorList="barcolorList"
|
class="width height"
|
/>
|
</div>
|
<div class="width98 margintopbot echart-height">
|
<line-echart
|
titleechart="器具出入库统计"
|
:linelist="Containerlinelist"
|
:colorList="concolorList"
|
class="width height"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<top-notice :visible.sync="noticeVisible" :notices="noticeData"></top-notice>
|
</div>
|
</template>
|
|
<script>
|
import DidInquer from './components/didinquer';
|
import DidNav from './components/didnav';
|
import Classify from './components/classify.vue';
|
import PieEcharts from './components/pieEcharts';
|
import LineEchart from './components/lineEcharts';
|
import {
|
GetHomePieData,
|
GetHomeBarItemData,
|
GetHomeBarContainerData,
|
GetHomeNumDataByDate,
|
GetWarnings
|
} from '@/api/Didproject';
|
import { getDate, GetDateStr, GetTimeStr, getimestampDate, getymdhms } from '@/utils/date';
|
const { Didproject } = require('@/components/tableContainer/tableHead');
|
import { exportTableList } from '@/utils/excel';
|
import TopNotice from './components/notice.vue';
|
// import { SearchPermission, AddOrUpdateRoleVsPermission, GetUserRoleAllPermission } from '@/api/role-auth';
|
export default {
|
components: { DidInquer, DidNav, PieEcharts, LineEchart, Classify, TopNotice },
|
data() {
|
return {
|
daterange: [GetDateStr(0), GetDateStr(0)],
|
datatime: [GetDateStr(-15) + ' 00:00:00', getDate() + ' ' + GetTimeStr(0)],
|
chartData: [],
|
BarItemlinelist: {}, //零件出入数量
|
Containerlinelist: {}, //出入库数量
|
clearIntervaltime: null,
|
BarItemlineshow: false,
|
Containerline: false,
|
barcolorList: ['#ffc637', '#fc7293', '#8477e9', '#2599f0', '#31c3ea', '#17d8b9', '#e8bdf3'],
|
concolorList: ['#31c3ea', '#17d8b9', '#2599f0', '#e8bdf3', '#ffc637', '#fc7293', '#8477e9'],
|
noticeVisible: false,
|
noticeData: []
|
};
|
},
|
mounted() {
|
this.getWarnings(() => {
|
this.GetHomePieData();
|
this.GetHomeBarItemData();
|
this.GetHomeBarContainerData();
|
this.clearIntervaltime = setInterval(() => {
|
this.GetHomePieData();
|
}, 60000);
|
});
|
},
|
methods: {
|
//时间查询
|
goodsinquer() {
|
this.GetHomeBarItemData();
|
this.GetHomeBarContainerData();
|
},
|
//各类型库位使用统计
|
GetHomePieData() {
|
//placeType 库位类型；placeTotalNum 总库位数；placeFullNum 已用库位数；placeRate 使用率；
|
GetHomePieData().then(res => {
|
if (res.code == 0) {
|
let data = res.data;
|
let pielist = [];
|
data.forEach((element, index) => {
|
pielist.push({ titel: '', placeRate: '', list: [] });
|
|
for (let i in element) {
|
if (i == 'placeVal' || i == 'placeOtherVal') {
|
pielist[index].list.push({
|
name:
|
i == 'placeOtherVal'
|
? '未用库位数'
|
: i == 'placeVal'
|
? '已用库位数'
|
: i == 'placeRate'
|
? '使用率'
|
: i,
|
value: element[i]
|
});
|
} else if (i == 'placeType') {
|
pielist[index].titel = element[i];
|
} else if (i == 'placeRate') {
|
pielist[index].placeRate = element[i];
|
}
|
}
|
});
|
this.chartData = pielist;
|
console.log(this.chartData);
|
}
|
});
|
},
|
//获取零件的出入库数量
|
GetHomeBarItemData() {
|
let time = {
|
startTime: this.datatime ? this.datatime[0] : '',
|
endTime: this.datatime ? this.datatime[1] : ''
|
};
|
this.BarItemlineshow = false;
|
GetHomeBarItemData(time).then(res => {
|
this.BarItemlinelist = res.data;
|
this.BarItemlineshow = true;
|
});
|
},
|
//获取器具的出入库数量
|
GetHomeBarContainerData() {
|
let time = {
|
startTime: this.datatime ? this.datatime[0] : '',
|
endTime: this.datatime ? this.datatime[1] : ''
|
};
|
this.$Loading(true);
|
this.Containerline = false;
|
GetHomeBarContainerData(time).then(res => {
|
this.Containerlinelist = res.data;
|
this.Containerline = true;
|
this.$Loading();
|
});
|
},
|
//跳转大屏
|
linkTo() {
|
const { href } = this.$router.resolve({
|
path: '/output'
|
});
|
window.open(href, '_blank');
|
},
|
//导出
|
derive() {
|
let tabledata = [];
|
let tHeader = [];
|
let filterVal = [];
|
Didproject.forEach(item => {
|
tHeader.push(item.columnDescription);
|
filterVal.push(item.columnName);
|
});
|
this.$Loading(true);
|
GetHomeNumDataByDate({ stDate: this.daterange[0], edDate: this.daterange[1] }).then(res => {
|
if (res.code == 0) {
|
let data = res.data;
|
data.forEach((element, index) => {
|
tabledata.push({
|
time: getimestampDate(element.time)
|
});
|
element.homeNumDataEntityList.forEach(item => {
|
Didproject.forEach(vl => {
|
if (item.titel == vl.columnDescription) {
|
tabledata[index][vl.columnName] = item.value;
|
}
|
});
|
});
|
});
|
exportTableList(tHeader, filterVal, tabledata, '库存数据' + getymdhms());
|
this.$Loading(false);
|
}
|
});
|
},
|
getWarnings(callback) {
|
GetWarnings()
|
.then(d => {
|
if (d.code === 0) {
|
this.noticeData = d.data || [];
|
this.noticeVisible = true;
|
callback(true);
|
} else {
|
callback(false);
|
}
|
console.log('kklkljj', d);
|
})
|
.catch(() => {
|
callback(false);
|
});
|
}
|
},
|
beforeDestroy() {
|
if (this.clearIntervaltime) {
|
clearInterval(this.clearIntervaltime);
|
this.clearIntervaltime = null;
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
#Didproject {
|
position: relative;
|
.did-echarts {
|
height: 200px;
|
}
|
.echart-height {
|
height: 300px;
|
margin: 1% auto 2%;
|
overflow: hidden;
|
}
|
}
|
</style>
|
