579 lines
16 KiB
Vue
579 lines
16 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="searchBtnx" @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="searchBtnx" @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="searchBtnx" @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="searchBtnx" @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_s" },
|
||
title: { type: String, default: "" },
|
||
mgroup: { type: String, default: "" },
|
||
mpoint: { 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: "",
|
||
},
|
||
code: "",
|
||
cateName: "",
|
||
myChart: null,
|
||
isMpoint:false,
|
||
dictData: [],
|
||
option: {
|
||
title: {
|
||
text: "",
|
||
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;
|
||
console.log(that.mgroup)
|
||
if (that.mgroup) {
|
||
if (that.cate == "总产量（t）" || that.cate == "出厂水泥合计（t）" || 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.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.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";
|
||
} else if (that.cate == "发电功率（kW·h）") {
|
||
that.cateName = "production_hour";
|
||
} else if (that.cate == "吨熟料发电量（kW·h/t）") {
|
||
that.cateName = "production_elec_unit";
|
||
} else if (that.cate == "总电耗（kW·h）"||
|
||
that.cate =="总电量（kW·h）" ||
|
||
that.cate == "电石渣工段总电量（kW·h）"
|
||
) {
|
||
that.cateName = "elec_consume";
|
||
}else if (that.cate == "消耗") {
|
||
that.cateName = "amount_consume";
|
||
}else if (that.cate == "进厂") {
|
||
that.cateName = "amount_consume";
|
||
}else if (that.cate == "氨水消耗量(t)") {
|
||
that.cateName = "ammonia_consume";
|
||
}else if (that.cate == "单位氨水消耗量(kg/t)") {
|
||
that.cateName = "ammonia_consume_unit";
|
||
}
|
||
else if (that.cate == "P.O42.5R 散装（t）") {
|
||
that.cateName = "C90002056";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "P.O42.5R 袋装（t）") {
|
||
that.cateName = "C90002055";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "P.O42.5 袋装（t）") {
|
||
that.cateName = "x水泥+P.O42.5 袋装";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "P.O42.5 散装（t）") {
|
||
that.cateName = "C90001124";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "复合硅酸盐水泥;42.5R;袋装水泥(t)") {
|
||
that.cateName = "C90001612";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "复合硅酸盐水泥;42.5R;散装水泥(t)") {
|
||
that.cateName = "C90001609";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "普通硅酸盐水泥;52.5;散装水泥(t)") {
|
||
that.cateName = "C90001125";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "散装水泥(t)") {
|
||
that.cateName = "szsn_hj";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "袋装水泥(t)") {
|
||
that.cateName = "dzsn_hj";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "出厂水泥合计（t）") {
|
||
that.cateName = "ccsn_hj";
|
||
that.isMpoint = true;
|
||
}else if (that.cate == "熟料（t）") {
|
||
that.cateName = "x通用水泥熟料";
|
||
that.isMpoint = true;
|
||
}
|
||
} else {
|
||
that.cateName = "elec_consume_unit";
|
||
}
|
||
this.$nextTick((res) => {
|
||
console.log('that.isMpoint',that.isMpoint);
|
||
this.getChartsData();
|
||
this.getDict();
|
||
|
||
});
|
||
},
|
||
methods: {
|
||
getDict() {
|
||
let that = this;
|
||
let params = {};
|
||
params.page = 0;
|
||
params.type__code = "goal_cate";
|
||
this.$API.system.dict.list.req(params).then((res) => {
|
||
that.dictData = res;
|
||
res.forEach((item) => {
|
||
if (item.name == that.cate) {
|
||
that.code = item.code;
|
||
}
|
||
});
|
||
});
|
||
},
|
||
getChartsData() {
|
||
let that = this;
|
||
let params = {};
|
||
params.page = 0;
|
||
params.type = this.type;
|
||
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 = that.query.start_time + "-01-01 00:00:00";
|
||
end_time = that.query.end_time + "-01-01 00:00:00";
|
||
}
|
||
params.start_time = start_time;
|
||
params.end_time = end_time;
|
||
if (that.mgroup) {
|
||
params.mgroup = that.mgroup;
|
||
} else {
|
||
params.mpoint = that.mpoint;
|
||
}
|
||
console.log(params);
|
||
console.log(that.cateName);
|
||
if(that.isMpoint){
|
||
params.mpoint__code = that.cateName;
|
||
that.$API.enm.mpointstat.list.req(params).then((res1) => {
|
||
let xAxisData = [],
|
||
lineData = [];
|
||
if(res1.length>0){
|
||
res1.reverse();
|
||
res1.forEach((item) => {
|
||
let ind = 0;
|
||
if (type == "hour_s") {
|
||
ind = item[type];
|
||
xAxisData[ind] = item[type] + unit;
|
||
lineData[ind] = item.val;
|
||
} else {
|
||
lineData.push(item.val);
|
||
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);
|
||
console.log(that.option);
|
||
}
|
||
})
|
||
}else{
|
||
that.apiObj.req(params).then((res) => {
|
||
let xAxisData = [],
|
||
lineData = [];
|
||
res.forEach((item) => {
|
||
let ind = 0;
|
||
let values = 0;
|
||
if(that.cateName === "amount_consume"){
|
||
if(that.cate == "消耗"){
|
||
values = item.imaterial_data_dict.湿电石渣消耗.amount_consume;
|
||
}else{
|
||
values = item.imaterial_data_dict.湿电石渣进厂.amount_consume;
|
||
}
|
||
}else if(that.cateName ==="ammonia_consume_unit"){
|
||
values = (item.ammonia_consume*1000/item.total_production).toFixed(2);
|
||
}else{
|
||
values = Number(item[that.cateName]);
|
||
}
|
||
if (type == "hour_s") {
|
||
ind = item[type];
|
||
xAxisData[ind] = item[type] + unit;
|
||
lineData[ind] = values;
|
||
} else {
|
||
lineData.push(values);
|
||
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);
|
||
});
|
||
}
|
||
},
|
||
getChartsData2(){
|
||
|
||
},
|
||
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;
|
||
}
|
||
.searchBtnx {
|
||
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>
|