362 lines
15 KiB
Vue
362 lines
15 KiB
Vue
<template>
|
||
<el-dialog v-model="visible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="showClose">
|
||
<template #header>
|
||
<slot name="header">
|
||
<span class="el-dialog__title">{{ title }}</span>
|
||
</slot>
|
||
<div class="sc-dialog__headerbtn">
|
||
<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
|
||
<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
|
||
<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
|
||
</button>
|
||
<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
|
||
<el-icon class="el-dialog__close"></el-icon>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
<div v-loading="loading">
|
||
<div class="searchHead" v-if="type=='hour_s'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="datetime"
|
||
placeholder="选择时间"
|
||
format="YYYY-MM-DD HH"
|
||
value-format="YYYY-MM-DD HH"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<span class="middleText">至</span>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="datetime"
|
||
format="YYYY-MM-DD HH"
|
||
value-format="YYYY-MM-DD HH"
|
||
start-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div class="searchHead" v-if="type=='day_s'">
|
||
<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_s'">
|
||
<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_s'">
|
||
<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>
|
||
<div id="myChart" style="width:100%;height:400px;"></div>
|
||
</div>
|
||
<template #footer>
|
||
<slot name="footer"></slot>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
props: {
|
||
cate:{ type: String, default: ""},
|
||
type: { type: String, default: "hours" },
|
||
title: { type: String, default: "" },
|
||
mgroup: { type: String, default: "" },
|
||
apiObj: { type: Object, default: () => { } },
|
||
showClose: { type: Boolean, default: true },
|
||
echartType: { type: String, default: 'bar' },
|
||
modelValue: { type: Boolean, default: false },
|
||
showFullscreen: { type: Boolean, default: true },
|
||
loading: { type: Boolean, default: false }
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
isFullscreen: false,
|
||
query:{
|
||
time:''
|
||
},
|
||
cateName:'',
|
||
myChart:null,
|
||
option: {
|
||
title: {
|
||
text: '折线图',
|
||
subtext: '小标题',
|
||
x: 'center'
|
||
},
|
||
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
|
||
top: '20%',
|
||
left: '3%',
|
||
right: '10%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
legend: { // 图例配置选项
|
||
orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
|
||
x: 'right', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
|
||
y: '10',// 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
|
||
data: [],
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
|
||
name: '时间',
|
||
// x轴名称样式
|
||
nameTextStyle: {
|
||
fontWeight: 600,
|
||
fontSize: 14
|
||
},
|
||
axisLine: {
|
||
lineStyle: { // X 轴颜色配置
|
||
color: '#3366CC'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
rotate: 45, // X 轴标签文字旋转角度
|
||
interval: 0 //设置 X 轴数据间隔几个显示一个，为0表示都显示
|
||
},
|
||
boundaryGap: false, //数据从 Y 轴起始
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '对象值',
|
||
// y轴名称样式
|
||
nameTextStyle: {
|
||
fontWeight: 500,
|
||
fontSize: 14
|
||
},
|
||
//min:0, // 配置 Y 轴刻度最小值
|
||
//max:4000, // 配置 Y 轴刻度最大值
|
||
//splitNumber:7, // 配置 Y 轴数值间隔
|
||
axisLine: {
|
||
lineStyle: { // Y 轴颜色配置
|
||
color: '#3366CC'
|
||
}
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: true, // 是否显示
|
||
trigger: 'axis', // axis item none
|
||
axisPointer: { // 坐标轴指示器配置项。
|
||
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
|
||
axis: 'auto', // 指示器的坐标轴。
|
||
snap: true, // 坐标轴指示器是否自动吸附到点上
|
||
},
|
||
showContent: true,
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
data: [4,1,9,2,11,3,5,7,8,10,6,12],
|
||
type: 'line',
|
||
// symbolSize: function(value) { // 点的大小跟随数值增加而变大
|
||
// return value / 150;
|
||
// },
|
||
symbolSize:8, //设置折线上圆点大小
|
||
symbol:'circle',
|
||
smooth: 0.5, // 设置折线弧度
|
||
itemStyle: {
|
||
normal: {
|
||
label : {
|
||
show: true // 在折线拐点上显示数据
|
||
},
|
||
lineStyle:{
|
||
width:1, // 设置虚线宽度
|
||
type:'dotted', // 虚线'dotted' 实线'solid'
|
||
color: '#3366CC'// 折线颜色设置为0，即只显示点，不显示折线
|
||
}
|
||
}
|
||
}
|
||
},
|
||
]
|
||
},
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() > Date.now();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
watch:{
|
||
modelValue(){
|
||
this.visible = this.modelValue
|
||
if(this.visible){
|
||
this.isFullscreen = false
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
var myDate = new Date();
|
||
let year =that.year = myDate.getFullYear();
|
||
let month = that.month = myDate.getMonth()+1;
|
||
let day = that.days = myDate.getDate();
|
||
let start_time='',end_time='';
|
||
if(this.type=='hour_s'){
|
||
start_time = year+'-'+month+'-'+day+' 00';
|
||
end_time = year+'-'+month+'-'+day+' 23';
|
||
}else if(this.type=='day_s'){
|
||
start_time = year+'-'+month+'-01';
|
||
end_time = year+'-'+month+'-15';
|
||
}else if(this.type=='month_s'){
|
||
start_time = year+'-01';
|
||
end_time = year+'-12';
|
||
}else if(this.type=='year_s'){
|
||
start_time = year-1;
|
||
end_time = year;
|
||
}
|
||
this.query.start_time = start_time;
|
||
this.query.end_time = end_time;
|
||
this.visible = this.modelValue;
|
||
this.option.legend.data.push(that.cate);
|
||
this.option.series[0].name=that.cate;
|
||
if(that.cate=='总产量（t）'){
|
||
that.cateName = 'total_production';
|
||
}else if(that.cate=='单位产品分布电耗（KW·h/t）'||that.cate=='生料分布电耗（KW·h/t）'||that.cate=='煤磨分布电耗（KW·h/t）'){
|
||
that.cateName = 'elec_consume_unit';
|
||
}else if(that.cate=='台时产量（t/h）'){
|
||
that.cateName = 'production_hour';
|
||
}else if(that.cate=='运转时间（h）'){
|
||
that.cateName = 'run_hour';
|
||
}else if(that.cate=='运转率（%）'){
|
||
that.cateName = 'run_rate';
|
||
}else if(that.cate=='单位产品成本（元/吨）'||that.cate=='电石渣成本（元/吨）'||that.cate=='生料成本（元/吨）'){
|
||
that.cateName = 'production_cost_unit';
|
||
}else if(that.cate=='单位产品综合电耗（KW·h/t）'){
|
||
that.cateName = 'celec_consume_unit';
|
||
}else if(that.cate=='单位产品标煤耗（kgce/t）'){
|
||
that.cateName = 'coal_consume_unit';
|
||
}else if(that.cate=='单位产品综合能耗（kgce/t）'){
|
||
that.cateName = 'cen_consume_unit';
|
||
}
|
||
this.$nextTick(res=>{
|
||
this.getChartsData();
|
||
})
|
||
},
|
||
methods: {
|
||
getChartsData(){
|
||
let that = this;
|
||
let params = {};
|
||
params.page = 0;
|
||
params.type = this.type;
|
||
params.mgroup = this.mgroup;
|
||
let start_time='',end_time='',type = that.type,unit='时';
|
||
if(this.type=='hour_s'){
|
||
type = 'hour';
|
||
start_time = this.query.start_time+':00:00'
|
||
end_time = this.query.end_time+':00:00'
|
||
}else if(this.type=='day_s'){
|
||
unit='日';
|
||
start_time = this.query.start_time+' 00:00:00'
|
||
end_time = this.query.end_time+' 00:00:00'
|
||
}else if(this.type=='month_s'){
|
||
unit='月';
|
||
start_time = this.query.start_time+'-01 00:00:00'
|
||
end_time = this.query.end_time+'-01 00:00:00'
|
||
}else if(this.type=='year_s'){
|
||
unit='年';
|
||
start_time = this.query.start_time+'-01-01 00:00:00'
|
||
end_time = this.query.end_time+'-01-01 00:00:00'
|
||
}
|
||
params.start_time = start_time;
|
||
params.end_time = end_time;
|
||
that.apiObj.req(params).then(res=>{
|
||
console.log(res)
|
||
debugger;
|
||
let xAxisData = [],lineData = [];
|
||
res.forEach(item=>{
|
||
lineData.push(item[that.cateName])
|
||
let xAxis = item[type]+unit;
|
||
xAxisData.push(xAxis)
|
||
})
|
||
let chartDom = document.getElementById('myChart');
|
||
that.myChart = echarts.init(chartDom);
|
||
that.option.xAxis.data = xAxisData;
|
||
that.option.series[0].data = lineData;
|
||
that.myChart.setOption(that.option);
|
||
})
|
||
},
|
||
dataSearch(){
|
||
this.getChartsData();
|
||
},
|
||
//关闭
|
||
closeDialog(){
|
||
this.visible = false;
|
||
|
||
},
|
||
//最大化
|
||
setFullscreen(){
|
||
this.isFullscreen = !this.isFullscreen
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.searchHead{
|
||
display:flex
|
||
}
|
||
.middleText{
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 0 5px;
|
||
display: inline-block;
|
||
}
|
||
.searchBtn{
|
||
margin-left: 5px;
|
||
}
|
||
.sc-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);}
|
||
.sc-dialog__headerbtn button {padding: 0;background: transparent;border: none;outline: none;cursor: pointer;font-size: var(--el-message-close-size,16px);margin-left: 15px;color: var(--el-color-info);}
|
||
.sc-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {flex:1;overflow: auto;}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);}
|
||
</style> |