zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 生产报告图表优化

This commit is contained in:
caoqianming 2024-12-30 13:55:59 +08:00
parent 589d30de9b
commit e0e043398f
7 changed files with 236 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/enm_coal/report.vue
View File

@ -94,9 +94,9 @@
>
<!-- <el-radio-button label="day">本日</el-radio-button> -->
<el-radio-button label="month"
>日</el-radio-button
>按日</el-radio-button
>
<el-radio-button label="year">月</el-radio-button>
<el-radio-button label="year">按月</el-radio-button>
</el-radio-group>
<div style="position: absolute; right: 20px">
<el-date-picker
@ -170,7 +170,7 @@
</div>
</template>
<script>
const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#4472c4"];
const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#4472c4", "#91d024"];
let tooltip = {
show: true,
trigger: "axis",
@ -187,14 +187,24 @@ let grid = {
top: "20%",
};
let toolbox = {
right: "2%",
right: 0,
feature: {
dataView: { show: true, readOnly: false },
// restore: { show: true },
saveAsImage: { show: true },
},
orient: "vertical",
};
let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%",
data: ["总产量", "台时产量", "运转率", "分布电耗"],
};
@ -204,7 +214,7 @@ let yAxis = [
name: "产量 (t)",
position: "left",
alignTicks: true,
nameRotate: 30,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
@ -215,14 +225,30 @@ let yAxis = [
formatter: "{value}",
},
},
{
type: "value",
name: "台时(t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
offset: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "运转率 (%)",
position: "right",
alignTicks: true,
offset: 60,
max: 100,
nameRotate: 30,
offset: 50,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
@ -238,28 +264,11 @@ let yAxis = [
name: "分布电耗(kW·h/t)",
position: "right",
alignTicks: true,
nameRotate: 30,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[2],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "台时(t/h)",
position: "left",
alignTicks: true,
nameRotate: 30,
offset: 60,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
color: colors[3],
},
},
axisLabel: {
@ -268,7 +277,6 @@ let yAxis = [
},
];
import scEcharts from "@/components/scEcharts";
import { max } from "d3";
import { defineAsyncComponent } from "vue";
export default {
components: {
@ -349,19 +357,19 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
yAxisIndex: 2,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
yAxisIndex: 3,
data: [],
},
],
@ -392,19 +400,19 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 3,
yAxisIndex: 1,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
yAxisIndex: 2,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
yAxisIndex: 3,
data: [],
},
],
@ -447,19 +455,19 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
yAxisIndex: 2,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
yAxisIndex: 3,
data: [],
},
],

98
src/views/enm_kiln/report.vue
View File

@ -104,11 +104,11 @@
v-model="typeRadio"
@change="typeRadioChange"
>
<el-radio-button label="day">小时</el-radio-button>
<el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month"
>日</el-radio-button
>按日</el-radio-button
>
<el-radio-button label="year">月</el-radio-button>
<el-radio-button label="year">按月</el-radio-button>
</el-radio-group>
<div style="position: absolute; right: 20px">
<el-date-picker
@ -140,6 +140,7 @@
></el-date-picker>
</div>
</div>
<div class="chartWrap" v-show="typeRadio == 'day'">
<div class="chartTitle">本日生产参数统计图</div>
<scEcharts
@ -287,14 +288,8 @@
</div>
</template>
<script>
const colors = [
"#647bfe",
"#8698fe",
"#a9b6fe",
"#cbd3fe",
"#91CC75",
"#EE6666",
];
const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#5f6694", "#cb9bff"];
// 产量/台时/运转率/分布电耗/单位产品标煤耗/成本
let tooltip = {
show: true,
trigger: "axis",
@ -306,18 +301,29 @@ let tooltip = {
triggerOn: "mousemove",
};
let grid = {
right: "12%",
left: "10%",
right: "11%",
left: "11%",
top: "20%",
};
let toolbox = {
right: "2%",
right: 0,
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true },
},
orient: "vertical",
};
let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%",
data: [
"总产量",
@ -334,7 +340,7 @@ let yAxis = [
name: "产量 (t)",
position: "left",
alignTicks: true,
nameRotate: 30,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
@ -345,14 +351,30 @@ let yAxis = [
formatter: "{value}",
},
},
{
type: "value",
name: "台时产量 (t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
offset: 100,
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "运转率(%) ",
position: "right",
alignTicks: true,
nameRotate: 30,
offset: 120,
max:100,
nameRotate: 50,
offset: 100,
axisLine: {
show: true,
lineStyle: {
@ -368,7 +390,7 @@ let yAxis = [
name: "分布电耗(kW·h/t)",
position: "right",
alignTicks: true,
nameRotate: 30,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
@ -384,8 +406,8 @@ let yAxis = [
name: "标煤耗(kgce/t)",
position: "right",
alignTicks: true,
nameRotate: 30,
offset: 60,
nameRotate: 50,
offset: 50,
axisLine: {
show: true,
lineStyle: {
@ -401,8 +423,8 @@ let yAxis = [
name: "成本(元/吨)",
position: "left",
alignTicks: true,
nameRotate: 30,
offset: 60,
nameRotate: 50,
offset: 50,
axisLine: {
show: true,
lineStyle: {
@ -469,15 +491,7 @@ export default {
tooltip: tooltip,
grid: grid,
toolbox: toolbox,
legend: {
top: "2%",
data: [
"总产量",
"分布电耗",
"单位产品标煤耗",
"成本",
],
},
legend: Object.assign(legend, {data: ["总产量", "分布电耗", "单位产品标煤耗", "成本"]}),
xAxis: {
axisTick: {
show: true,
@ -565,31 +579,31 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
yAxisIndex: 2,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
yAxisIndex: 3,
data: [],
},
{
name: "单位产品标煤耗",
type: "bar",
yAxisIndex: 3,
yAxisIndex: 4,
data: [],
},
{
name: "成本",
type: "bar",
yAxisIndex: 4,
yAxisIndex: 5,
data: [],
},
],
@ -619,31 +633,31 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
yAxisIndex: 2,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
yAxisIndex: 3,
data: [],
},
{
name: "单位产品标煤耗",
type: "bar",
yAxisIndex: 3,
yAxisIndex: 4,
data: [],
},
{
name: "成本",
type: "bar",
yAxisIndex: 4,
yAxisIndex: 5,
data: [],
},
],

30
src/views/enm_mill/report.vue
View File

@ -93,9 +93,9 @@
v-model="typeRadio"
@change="typeRadioChange"
>
<el-radio-button label="day">小时</el-radio-button>
<el-radio-button label="month">日</el-radio-button>
<el-radio-button label="year">月</el-radio-button>
<el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month">按日</el-radio-button>
<el-radio-button label="year">按月</el-radio-button>
</el-radio-group>
<div style="position: absolute; right: 20px">
<el-date-picker
@ -274,14 +274,7 @@
</div>
</template>
<script>
const colors = [
"#647bfe",
"#8698fe",
"#a9b6fe",
"#cbd3fe",
"#91CC75",
"#EE6666",
];
const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#cb9bff"];
let tooltip = {
show: true,
trigger: "axis",
@ -305,6 +298,16 @@ let toolbox = {
},
};
let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%",
data: ["总产量", "台时产量", "运转率", "分布电耗", "成本"],
};
@ -428,10 +431,7 @@ export default {
tooltip: tooltip,
grid: grid,
toolbox: toolbox,
legend: {
top: "2%",
data: ["总产量", "分布电耗", "成本"],
},
legend: Object.assign(legend, {data: ["总产量", "分布电耗", "成本"]}),
xAxis: {
axisTick: {
show: true,

27
src/views/enm_pack/report.vue
View File

@ -73,8 +73,8 @@
v-model="typeRadio"
@change="typeRadioChange"
>
<el-radio-button label="month">日</el-radio-button>
<el-radio-button label="year">月</el-radio-button>
<el-radio-button label="month">按日</el-radio-button>
<el-radio-button label="year">按月</el-radio-button>
</el-radio-group>
<div style="position: absolute; right: 20px">
<el-date-picker
@ -244,7 +244,7 @@
</div>
</template>
<script>
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"];
const colors = ["#5b9bd5", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"];
let tooltip = {
show: true,
trigger: "axis",
@ -256,18 +256,29 @@ let tooltip = {
triggerOn: "mousemove",
};
let grid = {
right: "4%",
left: "4%",
top: "15%",
right: "11%",
left: "11%",
top: "24%",
};
let toolbox = {
right: "2%",
right: 0,
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true },
},
orient: "vertical",
};
let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%",
data: ["袋装合计", "散装合计", "熟料出厂合计", "出厂水泥合计", "复合水泥合计"],}
@ -286,6 +297,7 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50,
},
{
type: "value",
@ -301,6 +313,7 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50,
},
];
import scEcharts from "@/components/scEcharts";

57
src/views/enm_rm/report.vue
View File

@ -91,11 +91,11 @@
v-model="typeRadio"
@change="typeRadioChange"
>
<el-radio-button label="day">本日</el-radio-button>
<el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month"
>本月</el-radio-button
>按日</el-radio-button
>
<el-radio-button label="year">本年</el-radio-button>
<el-radio-button label="year">按月</el-radio-button>
</el-radio-group>
<div style="position: absolute; right: 20px">
<el-date-picker
@ -275,14 +275,7 @@
</div>
</template>
<script>
const colors = [
"#17E8EF",
"#FFECA1",
"#3F662F",
"#BC1012",
"#4AE20D",
"#EFC3CA",
];
const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#4472c4", "#91d024"];
let tooltip = {
show: true,
trigger: "axis",
@ -297,16 +290,27 @@ let tooltip = {
let grid = {
right: "11%",
left: "11%",
top: "15%",
top: "20%",
};
let toolbox = {
right: "2%",
right: 0,
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true },
},
orient: "vertical",
};
let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%",
data: ["总产量", "台时产量", "运转率", "分布电耗"],
};
@ -325,13 +329,31 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
{
type: "value",
name: "台时产量 (t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
offset: 50,
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "运转率 (%)",
position: "right",
alignTicks: true,
offset: 80,
offset: 50,
axisLine: {
show: true,
lineStyle: {
@ -341,6 +363,7 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
{
type: "value",
@ -356,6 +379,7 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
];
import * as echarts from "echarts";
@ -409,10 +433,7 @@ export default {
tooltip: tooltip,
grid: grid,
toolbox: toolbox,
legend: {
top: "2%",
data: ["总产量", "分布电耗"],
},
legend: Object.assign(legend, {data: ["总产量", "分布电耗"]}),
xAxis: {
axisTick: {
show: true,

63
src/views/enm_rm_copy/report.vue
View File

@ -91,11 +91,11 @@
v-model="typeRadio"
@change="typeRadioChange"
>
<el-radio-button label="day">本日</el-radio-button>
<el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month"
>本月</el-radio-button
>按日</el-radio-button
>
<el-radio-button label="year">本年</el-radio-button>
<el-radio-button label="year">按月</el-radio-button>
</el-radio-group>
<div style="position: absolute; right: 20px">
<el-date-picker
@ -275,14 +275,7 @@
</div>
</template>
<script>
const colors = [
"#647bfe",
"#8698fe",
"#a9b6fe",
"#cbd3fe",
"#91CC75",
"#EE6666",
];
const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#cb9bff"];
let tooltip = {
show: true,
trigger: "axis",
@ -297,14 +290,15 @@ let tooltip = {
let grid = {
right: "10%",
left: "10%",
top: "15%",
top: "20%",
};
let toolbox = {
right: "2%",
right: 0,
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true },
},
orient: "vertical",
};
let legend = {
top: "2%",
@ -325,13 +319,31 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
{
type: "value",
name: "台时产量 (t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
offset: 100,
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "运转率 (%)",
position: "right",
alignTicks: true,
offset: 80,
offset: 50,
axisLine: {
show: true,
lineStyle: {
@ -341,6 +353,7 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
{
type: "value",
@ -356,13 +369,14 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
{
type: "value",
name: "成本(元/吨)",
position: "left",
alignTicks: true,
offset: 70,
offset: 50,
axisLine: {
show: true,
lineStyle: {
@ -372,6 +386,7 @@ let yAxis = [
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
];
import * as echarts from "echarts";
@ -449,25 +464,25 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
yAxisIndex: 2,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
yAxisIndex: 3,
data: [],
},
{
name: "成本",
type: "bar",
yAxisIndex: 3,
yAxisIndex: 4,
data: [],
},
],
@ -511,25 +526,25 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
yAxisIndex: 2,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
yAxisIndex: 3,
data: [],
},
{
name: "成本",
type: "bar",
yAxisIndex: 3,
yAxisIndex: 4,
data: [],
},
],
@ -573,7 +588,7 @@ export default {
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
{

31
src/views/enm_slag/report.vue
View File

@ -84,9 +84,9 @@
@change="typeRadioChange"
>
<el-radio-button label="month"
>日</el-radio-button
>按日</el-radio-button
>
<el-radio-button label="year">月</el-radio-button>
<el-radio-button label="year">按月</el-radio-button>
</el-radio-group>
<div style="position: absolute; right: 20px">
<el-date-picker
@ -251,7 +251,7 @@
<script>
import scEcharts from "@/components/scEcharts";
import { defineAsyncComponent } from "vue";
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"];
const colors = ["#5b9bd5", "#ffc000", "#ed7d31", "#cb9bff", "#4472c4", "#91d024"];
let tooltip = {
show: true,
trigger: "axis",
@ -268,13 +268,24 @@ let grid = {
top: "20%",
};
let toolbox = {
right: "5%",
right: 0,
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true },
},
orient: "vertical",
};
let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%",
data: ["总产量", "分布电耗", "总电量", "成本", "消耗", "进厂"],
};
@ -284,7 +295,7 @@ let yAxis = [
name: "总产量 (t)",
position: "left",
alignTicks: true,
nameRotate: 45,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
@ -297,7 +308,7 @@ let yAxis = [
},
{
type: "value",
nameRotate: 45,
nameRotate: 50,
name: "分布电耗(kW·h/t)",
position: "left",
alignTicks: true,
@ -314,7 +325,7 @@ let yAxis = [
},
{
type: "value",
nameRotate: 45,
nameRotate: 50,
name: "总电量(kW·h)",
position: "left",
alignTicks: true,
@ -332,7 +343,7 @@ let yAxis = [
{
type: "value",
nameRotate: 45,
nameRotate: 50,
name: "成本(元/t)",
position: "right",
alignTicks: true,
@ -351,7 +362,7 @@ let yAxis = [
name: "消耗(t)",
position: "right",
alignTicks: true,
nameRotate: 45,
nameRotate: 50,
offset: 50,
axisLine: {
show: true,
@ -368,7 +379,7 @@ let yAxis = [
name: "进厂(t)",
position: "right",
alignTicks: true,
nameRotate: 45,
nameRotate: 50,
offset: 100,
axisLine: {
show: true,