<template>
|
<div class="main tabs_main">
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">物品名称：</span>
|
<el-select v-model="search.steelId" placeholder="请选择物品名称" clearable>
|
<el-option
|
v-for="item in optionAuxiliary"
|
:key="item.assistId"
|
:label="item.assistName+'-'+item.assistModel"
|
:value="item.assistId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<el-radio-group v-model="tabPosition" @input="timesChange">
|
<el-radio-button label="day">日</el-radio-button>
|
<el-radio-button label="month">月</el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="header_item" v-if="showTimes">
|
<span class="header_label">选择时间：</span>
|
<el-date-picker
|
v-model="search.dayData"
|
:picker-options="pickerOptionsDay"
|
:clearable="false"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
<div class="header_item" v-if="!showTimes">
|
<span class="header_label">选择月份：</span>
|
<el-date-picker
|
v-model="search.monthData"
|
:picker-options="pickerOptionsMonth"
|
:clearable="false"
|
type="monthrange"
|
value-format="yyyy-MM"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
<div class="header_item">
|
<el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
|
<el-button v-if="showButton('export')" icon="el-icon-download" @click="exportAuxiliaryExcel()">导出Excel</el-button>
|
</div>
|
</div>
|
<!-- <div class="main_middle">
|
<div class="main_middle_titles">数据统计</div>
|
<div class="main_middle_matter">
|
<div class="middle_items" v-for="(item,index) in showDatas" :key="index">
|
<div class="middle_items_text">{{item.steelModel}}</div>
|
<div class="middle_items_datas">{{item.changeStock}}</div>
|
</div>
|
</div>
|
</div> -->
|
<div class="main_content" style="overflow:auto;padding-bottom:100px;">
|
<div v-for="(echartItem,echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
|
<div class="main_echart_titles">{{echartItem.assistName}}</div>
|
<div :id="echartItem.assistId" class="main_content_chart"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../../pinia';
|
import { downFiles } from '../../../plugins/public';
|
export default {
|
name: 'RebarCost',
|
data() {
|
return {
|
search:{
|
dayData:this.getDateTime(),
|
monthData:this.getMonthTime()
|
},//查询条件
|
tabPosition:'day',//默认展示day
|
showTimes:true,//是否展示日的日期 true：日 false: 月
|
dateType:1,// 1:日 2:月
|
optionAuxiliary:[],//材料类型
|
showDatas:[],//展示的数据统计
|
echartsList:[],//展示echarts表
|
chartsImage:null,
|
pickerMinDate:'',//日期选择增加限制
|
pickerOptionsDay:{ //限制选择日期为15天
|
onPick: ({
|
maxDate,
|
minDate
|
}) => {
|
this.pickerMinDate = minDate.getTime()
|
if (maxDate) {
|
this.pickerMinDate = ''
|
}
|
},
|
disabledDate: (time) => {
|
if (this.pickerMinDate !== '') {
|
const one = 15 * 24 * 3600 * 1000
|
const minTime = this.pickerMinDate - one
|
const maxTime = this.pickerMinDate + one
|
return time.getTime() < minTime || time.getTime() > maxTime
|
|
}
|
}
|
},
|
minDates: null,
|
maxDates: null,
|
pickerOptionsMonth: {
|
disabledDate: (time) => {
|
if (this.minDates !== null) {
|
let minMonth = this.minDates.getMonth(),
|
lastYear = new Date(this.minDates).setMonth(minMonth - 6),
|
nextYear = new Date(this.minDates).setMonth(minMonth + 6);
|
// 只能选 minDate 前后6个月的范围
|
return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
|
}
|
return false;
|
},
|
onPick: ({minDate, maxDate}) => {
|
this.minDates = minDate;
|
this.maxDates = maxDate;
|
}
|
},
|
}
|
},
|
mounted() {
|
// this.searchButtonInfo()
|
this.getAllTypes()
|
},
|
methods: {
|
// 转圈圈
|
functionLoading() {
|
this.loadingView = this.$loading({
|
lock: true,
|
text: '请稍后...',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
},
|
//导出
|
exportAuxiliaryExcel() {
|
let params = {
|
assistId:this.search.assistId ===undefined ||this.search.assistId ==='' ?'':this.search.assistId,
|
dateType:this.dateType
|
}
|
if(this.dateType === 1){
|
params.strTime = this.search.dayData&&this.search.dayData[0]
|
params.endTime = this.search.dayData&&this.search.dayData[1]
|
delete params.dayData
|
}else{
|
params.strTime = this.search.monthData&&this.search.monthData[0]
|
params.endTime = this.search.monthData&&this.search.monthData[1]
|
delete params.monthData
|
}
|
this.functionLoading();
|
this.$api.Analyse.exportAuxilliaryCost(params).then(res => {
|
downFiles(res, '辅材消耗信息', 'xls')
|
this.loadingView.close()
|
})
|
.catch(() => {
|
this.loadingView.close();
|
})
|
},
|
//获取时间(默认15天)
|
getDateTime(){
|
return [new Date(new Date().getTime() - 3600*1000*24*15).toISOString().replace('T',' ').split('.')[0],new Date().toISOString().replace('T',' ').split('.')[0]]
|
},
|
//获取时间（默认6个月）
|
getMonthTime(){
|
let date = new Date();
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let newYear = 0;
|
let newMonth = 0;
|
let newDateArr = [];
|
for (let i = 0; i < 7; i++) {
|
//这里是获取前六个月,所以循环6次,根据需要修改
|
if (month - i < 1) {
|
//这里的判断是如果当前月份往前推到了去年 需要做的处理
|
newYear = year - 1;
|
newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
|
newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
|
} else {
|
newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
|
newDateArr.push(year + '-' + newMonth);
|
}
|
}
|
//这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
|
const end = newDateArr[0];
|
const start = newDateArr[6];
|
return [start, end];
|
},
|
//获取所有型号
|
getAllTypes(){
|
this.$api.Analyse.auxilliaryCostList({}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.optionAuxiliary = res.data
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
//展示不同的时间
|
timesChange(val){
|
if(val === 'month'){
|
this.showTimes = false
|
// this.search.dayData = ''
|
this.dateType = 2
|
}else{
|
this.showTimes = true
|
// this.search.monthData = ''
|
this.dateType = 1
|
}
|
},
|
//查询按钮
|
searchButtonInfo() {
|
let params = {
|
assistId:this.search.assistId ===undefined ||this.search.assistId ==='' ?'':this.search.assistId,
|
dateType:this.dateType
|
}
|
if(this.dateType === 1){
|
params.strTime = this.search.dayData&&this.search.dayData[0]
|
params.endTime = this.search.dayData&&this.search.dayData[1]
|
delete params.dayData
|
}else{
|
params.strTime = this.search.monthData&&this.search.monthData[0]
|
params.endTime = this.search.monthData&&this.search.monthData[1]
|
delete params.monthData
|
}
|
this.$api.Analyse.searchAuxilliaryCost(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.echartsList = res.data
|
res.data.forEach(item=>{
|
let xtitle = item.betweenDate
|
let showStock = []
|
item.assistStatisticsDtos.forEach(ite=>{
|
xtitle.forEach(iten=>{
|
if(iten === ite.getDate){
|
showStock.push({
|
getDate:iten,
|
changeStock:ite.changeStock
|
})
|
}else{
|
showStock.push({
|
getDate:iten,
|
changeStock:0
|
})
|
}
|
})
|
})
|
this.$nextTick(() => {
|
this.createCharts(item.assistId, showStock,item.assistName);
|
})
|
})
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
// 创建echart图表
|
createCharts(name, data,titleName) {
|
const labelData = data.map(item => item.getDate);
|
const firstData = data.map(item => item.changeStock ? item.changeStock : 0);
|
this.chartsImage = this.$echarts.init(document.getElementById(name));
|
const option = {
|
animationDuration: 1500,
|
tooltip: {
|
trigger: "axis",
|
backgroundColor:'#071F46',
|
textStyle:{
|
color:'#fff',
|
},
|
formatter: function (params) {
|
var relVal = params[0].name;
|
for (var i = 0; i < params.length; i++) {
|
if (params[i].componentIndex === 0) {
|
relVal +=
|
"<br/>" +
|
params[i].marker +
|
`${titleName}` +
|
" : " +
|
params[i].value;
|
}
|
}
|
return relVal;
|
},
|
},
|
grid: {
|
top: "15%",
|
right: "3%",
|
left: "3%",
|
bottom: "11%",
|
},
|
xAxis: [
|
{
|
type: "category",
|
data: labelData,
|
axisLine: {
|
lineStyle: {
|
width: 2,
|
color: "#B7E4F7",
|
},
|
},
|
axisLabel: {
|
color: "#B7E4F7",
|
},
|
axisTick: {
|
show: false,
|
},
|
},
|
],
|
yAxis: [
|
{
|
type: "value",
|
// max: 100,
|
splitNumber: 10,
|
axisLabel: {
|
formatter: "{value}",
|
textStyle: {
|
color: "#CAD3E0",
|
},
|
},
|
splitLine: {
|
lineStyle: {
|
width: 2,
|
type: "dashed",
|
color: "#28477C",
|
},
|
},
|
},
|
{
|
type: "value",
|
max: 100,
|
splitNumber: 10,
|
axisLabel: {
|
formatter: "{value}%",
|
textStyle: {
|
color: "#B7E4F7",
|
},
|
},
|
splitLine: {
|
show: false,
|
},
|
},
|
],
|
series: [
|
{
|
type: "bar",
|
barWidth:40,
|
data: firstData,
|
yAxisIndex: 0,
|
itemStyle: {
|
normal: {
|
color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
|
[
|
{
|
offset: 0,
|
color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
|
},
|
{
|
offset: 1,
|
color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
|
},
|
],
|
false
|
),
|
},
|
},
|
},
|
],
|
}
|
this.chartsImage.clear();
|
this.chartsImage.setOption(option);
|
window.onresize = () => {
|
this.chartsImage.resize()
|
}
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/style/layout-main.scss";
|
|
.main_middle{
|
width: 97%;
|
margin: 10px 18px;
|
|
.main_middle_titles{
|
width: 100%;
|
color: #19F6F8;
|
position: relative;
|
padding: 10px 15px;
|
border-bottom:1px solid #1B50AE ;
|
&::before{
|
content: "";
|
position: absolute;
|
left: 5px;
|
top: 10px;
|
width: 2px;
|
height: 18px;
|
background-color: #18F6F8;
|
}
|
}
|
.main_middle_matter{
|
padding-top: 15px;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.middle_items{
|
width: 150px;
|
height: 80px;
|
background: url('../../../assets/stir_img.png') no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
.middle_items_text{
|
color: #E1E5EB;
|
}
|
.middle_items_datas{
|
color: #18F6F8;
|
font-size: 18px;
|
font-weight: 600;
|
}
|
}
|
}
|
}
|
|
.echarts_items{
|
height: 332px;
|
padding-top: 10px;
|
padding-bottom: 15px;
|
margin-bottom: 20px;
|
.main_echart_titles{
|
width: 97%;
|
color: #18F6F8;
|
padding-bottom: 15px;
|
padding-left: 15px;
|
border-bottom: 1px solid #1C51B1;
|
position: relative;
|
&::before{
|
width: 2px;
|
height: 15px;
|
content: "";
|
position: absolute;
|
top: 3px;
|
left: 5px;
|
background-color: #18F6F8;
|
}
|
}
|
.main_content_chart {
|
height: 100%;
|
}
|
}
|
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
|
color: #19F7F9;
|
border-color: #18F6F8;
|
background-color: #0D4573!important;
|
}
|
/deep/.el-radio-button__inner{
|
background-color: #0D4573;
|
border-color:#18F6F8;
|
border-radius: 0px 0px !important;
|
border-color: #18F6F8;
|
color: #E2E9EE;
|
}
|
</style>
|
