240 lines
8.7 KiB
Vue
240 lines
8.7 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<el-button
|
||
type="primary"
|
||
@click="exportExcel()"
|
||
:loading = "exportLoading"
|
||
>导出xlsx
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handlePrint"
|
||
>打印
|
||
</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-card style="margin-top:5px">
|
||
<div ref="print" id="myReport" class="printContainer">
|
||
<h3 style="text-align: center;">生产报告</h3>
|
||
<table border="1" width="1000" cellspacing="0" :key="timeStamp" id="myTable">
|
||
<thead style="background: #efefef;height: 40px;">
|
||
<tr>
|
||
<th colspan="2">参数</th>
|
||
<th>上个小时</th>
|
||
<th>昨日</th>
|
||
<th>本月</th>
|
||
<th>本年</th>
|
||
<th>月目标值</th>
|
||
<th>月完成度</th>
|
||
<th>年目标值</th>
|
||
<th>年完成度</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item) in tableDatas" :key="item">
|
||
<td class="numCell">{{item[0]}}</td>
|
||
<td class="numCell">{{item[1]}}</td>
|
||
<td class="numCell hoursItem" @click="itemClick('hours',item)" style="background: rgba(238, 179, 179, 0.8);">{{item[2]}}</td>
|
||
<td class="numCell daysItem" @click="itemClick('days',item)" style="background: rgba(239, 90, 90, 0.8);">{{item[3]}}</td>
|
||
<td class="numCell monthItem" @click="itemClick('month',item)" style="background: rgba(238, 189, 124, 0.8);">{{item[4]}}</td>
|
||
<td class="numCell yearItem" @click="itemClick1('year',item)" style="background: rgba(186, 236, 135, 0.8);">{{item[5]}}</td>
|
||
<td class="numCell">{{item[6]}}</td>
|
||
<td class="numCell">{{item[7]}}</td>
|
||
<td class="numCell">{{item[8]}}</td>
|
||
<td class="numCell">{{item[9]}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<sc-dialog v-model="chartShow" draggable title="电石渣工段">
|
||
<div class="searchHead" v-if="type=='hours'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="date"
|
||
placeholder="选择时间"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<span class="middleText">至</span>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div class="searchHead" v-if="type=='days'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="开始日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div class="searchHead" v-if="type=='month'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="month"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
start-placeholder="开始月份"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="month"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
start-placeholder="结束月份"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div class="searchHead" v-if="type=='year'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="year"
|
||
format="YYYY"
|
||
value-format="YYYY"
|
||
start-placeholder="开始日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="year"
|
||
format="YYYY"
|
||
value-format="YYYY"
|
||
start-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<scEcharts height="360px" :option="myOption" v-if="chartShow"></scEcharts>
|
||
</sc-dialog>
|
||
<charts
|
||
v-if="asynDialog"
|
||
:type="type"
|
||
:title="title"
|
||
:modelValue="modelValue"
|
||
:showClose="showClose"
|
||
:echartType='echartType'
|
||
@closed="asynDialog = false"
|
||
></charts>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import scEcharts from "@/components/scEcharts";
|
||
import { defineAsyncComponent } from 'vue'
|
||
export default {
|
||
components: {
|
||
scEcharts,
|
||
charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
|
||
},
|
||
data() {
|
||
return {
|
||
chartShow: false,
|
||
myOption: null,
|
||
timeStamp:0,
|
||
listQuery:{
|
||
belong_dept:'',
|
||
task2__year:'',
|
||
page:0
|
||
},
|
||
query:{
|
||
time:''
|
||
},
|
||
tableDatas:[
|
||
['产量','总产量（t）',0,0,0,0,0,0,0,0],
|
||
['能耗','单位产品分布电耗（KW·h/t）',1,1,1,1,1,1,1,1],
|
||
['成本','电石渣成本（元/吨）',2,2,2,2,2,2,2,2],
|
||
],
|
||
tableName:'生产报告',
|
||
modelValue:true,
|
||
type:'hours',
|
||
title:'电石渣工段',
|
||
apiObj:'',
|
||
showClose:true,
|
||
echartType:'line',
|
||
asynDialog:false,
|
||
};
|
||
},
|
||
mounted() {
|
||
},
|
||
methods: {
|
||
|
||
itemClick(type,item){
|
||
this.type=type;
|
||
this.asynDialog = true;
|
||
},
|
||
itemClick1(type,item){
|
||
this.chartShow = false;
|
||
this.$API.bi.dataset.exec
|
||
.req('3322567213885833216')
|
||
.then((res) => {
|
||
this.myOption = JSON.parse(res.echart_options);
|
||
debugger;
|
||
console.log(this.myOption)
|
||
this.chartShow = true;
|
||
});
|
||
},
|
||
handlePrint() {
|
||
this.$PRINT('#myReport');
|
||
},
|
||
exportExcel() {
|
||
this.exportLoading = true;
|
||
this.$XLSX('#myTable', this.tableName)
|
||
this.exportLoading = false;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.printContainer{
|
||
width: 1075px;
|
||
}
|
||
#numTable{
|
||
margin-left: 37px;
|
||
}
|
||
#numTable td{
|
||
height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
.numCell{
|
||
width: 80px;
|
||
height: 35px;
|
||
text-align: center;
|
||
}
|
||
.numCell.numCell_last{
|
||
width: 100px;
|
||
}
|
||
.searchHead{
|
||
display:flex
|
||
}
|
||
.middleText{
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 0 5px;
|
||
display: inline-block;
|
||
}
|
||
.searchBtn{
|
||
margin-left: 5px;
|
||
}
|
||
</style> |