done 1019

This commit is contained in:
lb 2023-10-19 16:12:33 +08:00
parent 002c5a80e5
commit 41f2f01fd7
3 changed files with 259 additions and 95 deletions

View File

@ -65,7 +65,14 @@ const DIALOG_CARPAYLOAD = "DialogCarPayload";
export default {
name: "ListViewWithHead",
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload, TemperatureDialog },
components: {
BaseSearchForm,
BaseListTable,
DialogWithMenu,
DialogJustForm,
DialogCarPayload,
TemperatureDialog,
},
props: {
tableConfig: {
type: Object,
@ -170,7 +177,7 @@ export default {
// if (this.urls.pageIsPostApi) {
// } else {
// get page
console.log("params: ", params);
// console.log("params: ", params);
this.$http[this.urls.pageIsPostApi ? "post" : "get"](
this.urls.page,
this.urls.pageIsPostApi
@ -416,7 +423,9 @@ export default {
}
case "detach": {
return this.$http
.post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
.post(this.urls.detach, data /* { id: data } */, {
headers: { "Content-Type": "application/json" },
})
.then(({ data: res }) => {
if (res.code === 0) {
this.$message({

View File

@ -2,97 +2,206 @@ const colors = {
line: '#555'
}
export default (x_data, y_data) => ({
title: {
text: "窑车温度",
},
grid: [
{
id: 'temp-grid',
show: true,
top: 96,
left: 56,
right: 56,
bottom: 32,
export default ({ x_data, y_data }, graph2) => {
// debugger;
return {
title: {
text: "窑车温度",
},
{
id: 'lambda-grid',
top: 0,
left: 0,
right: 0,
bottom: 0
}
],
xAxis: [
{
gridIndex: 0,
id: 'temp-x-axis',
type: "category",
data: Array(65)
.fill(1)
.map((val, index) => {
return val + index;
}),
axisLine: {
lineStyle: {
color: colors.line
legend: {
icon: 'circle',
top: 280,
left: 'center',
itemHeight: 8,
itemWidth: 8
},
tooltip: {
show: true,
trigger: 'axis',
formatter: function (params) {
// debugger;
return `<span>位置${params[0].name}</span>` + params.map(item => {
return item.value ? `<div style="min-width: 180px; display: flex; justify-content: space-between;"><span>${item.seriesName}</span><span style="color: #888">${item.value}${item.seriesName == 'lambda' ? '' : item.seriesName == '温度' ? '℃' : 'm³'}</span></div>` : ''
}).join('')
}
// formatter:
// '<strong style="font-size: 16px">位置</strong> ({b}) <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
},
grid: [
{
id: 'temp-grid',
top: 72,
left: 56,
right: 56,
bottom: 24,
height: 180,
},
{
id: 'lambda-grid',
top: 320,
left: 56,
right: 56,
bottom: 24,
height: 180,
}
],
xAxis: [
{
gridIndex: 0,
id: 'temp-x-axis',
type: "category",
data: Array(65)
.fill(1)
.map((val, index) => {
return val + index;
}),
axisLine: {
lineStyle: {
color: colors.line
},
},
},
},
{
gridIndex: 1,
id: 'lambda-x-axis',
data: Array(65)
.fill(1)
.map((val, index) => {
return val + index;
}),
axisLine: {
lineStyle: {
color: colors.line
{
gridIndex: 1,
id: 'lambda-x-axis',
data: Array(65)
.fill(1)
.map((val, index) => {
return val + index;
}),
axisLine: {
lineStyle: {
color: colors.line
}
}
}
}
],
yAxis: {
type: "value",
name: "温度",
nameTextStyle: {
fontSize: 18,
align: "right",
verticalAlign: "bottom",
lineHeight: 36,
padding: 10,
},
axisLine: {
show: true,
lineStyle: {
color: colors.line,
],
yAxis: [
{
gridIndex: 0,
type: "value",
interval: 20,
name: "温度",
nameTextStyle: {
fontSize: 14,
align: "right",
verticalAlign: "bottom",
lineHeight: 20,
padding: 6,
},
axisLine: {
show: true,
lineStyle: {
color: colors.line,
},
},
axisLabel: {
formatter: '{value} ℃'
},
splitLine: {
show: false,
lineStyle: {
color: '#ddd'
}
},
},
},
axisLabel: {
formatter: '{value} ℃'
},
splitLine: {
lineStyle: {
color: '#ddd'
{
gridIndex: 1,
type: "value",
interval: 20,
name: "消耗量",
nameTextStyle: {
fontSize: 14,
align: "right",
verticalAlign: "bottom",
lineHeight: 20,
padding: 6,
},
axisLine: {
show: true,
lineStyle: {
color: colors.line,
},
},
axisLabel: {
formatter: '{value} m³'
},
splitLine: {
lineStyle: {
color: '#ddd'
}
},
},
{
gridIndex: 0,
type: "value",
name: "lambda",
nameTextStyle: {
fontSize: 14,
align: "left",
verticalAlign: "bottom",
lineHeight: 20,
padding: 6,
},
axisLine: {
show: true,
lineStyle: {
color: colors.line,
},
},
axisLabel: {
formatter: '{value}'
},
splitLine: {
lineStyle: {
color: '#ddd'
}
},
}
],
dataZoom: {
type: 'inside'
},
},
tooltip: {
trigger: 'axis',
formatter: '<strong style="font-size: 16px">位置</strong> ({b}) <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
},
dataZoom: {
type: 'inside'
},
series: [
{
data: y_data,
// data: Array(65)
// .fill(1)
// .map((val) => Math.floor(Math.random() * 1000)),
type: "line",
},
],
})
series: [
{
id: 'temp-series',
name: '温度',
data: y_data,
xAxisIndex: 0,
yAxisIndex: 0,
// data: Array(65)
// .fill(1)
// .map((val) => Math.floor(Math.random() * 1000)),
type: "line",
},
{
id: 'gas-series',
name: '燃气消耗量(m³)',
xAxisIndex: 1,
yAxisIndex: 1,
data: Array(65)
.fill(1)
.map((val) => Math.floor(Math.random() * 128)),
type: "line",
},
{
id: 'lambda-series',
name: 'lambda',
data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 33, 11, 21, 3, 5, 67, 8, 88, 90, 12, 32, 2, 31, 33, null, null],
xAxisIndex: 0,
yAxisIndex: 2,
// data: Array(65)
// .fill(1)
// .map((val) => Math.floor(Math.random() * 1000)),
type: "line",
},
],
}
}

View File

@ -29,8 +29,8 @@
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<div class="temp-chart" style="height: 100%; overflow: hidden;">
<div id="temp-chart" class="temp-chart__inner" style="height: 100%; background:#ccc;" />
<div class="temp-chart" style="height: 100%; overflow: hidden">
<div id="temp-chart" class="temp-chart__inner" style="height: 100%" />
<!-- <div id="lambda-chart" class="lambda-chart__inner" style="height: 50%; background: #f001;" /> -->
</div>
</el-dialog>
@ -80,6 +80,50 @@ export default {
});
},
getList() {
this.dataList = [
{
code: "1",
temp1: 39,
press1: 12,
press2: 10,
remark: 9.9,
createTime: "2021-09-09 12:00:00",
},
{
code: "2",
temp1: 49,
press1: 11,
press2: 32,
remark: 9.9,
createTime: "2021-09-09 12:00:00",
},
{
code: "3",
temp1: 59,
press1: 32,
press2: 43,
remark: 39,
createTime: "2021-09-09 12:00:00",
},
{
code: "1",
temp1: 39,
press1: 21,
press2: 94,
remark: 19,
createTime: "2021-09-09 12:00:00",
},
{
code: "1",
temp1: 22,
press1: 55,
press2: 42,
remark: 98,
createTime: "2021-09-09 12:00:00",
},
];
return;
this.tableLoading = true;
this.$http
.post("/pms/kilnPosHistory/pageView", {
@ -89,6 +133,7 @@ export default {
})
.then(({ data: res }) => {
//console.log("temp dialog res", res);
this.tableLoading = false;
if (res.code === 0) {
if ("list" in res.data) {
@ -122,11 +167,12 @@ export default {
// dataList 线
if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
// const y_data = Array(65).fill(0)
// debugger;
this.chart.setOption(
loadChartConfig(
null,
this.dataList.map((i) => i.temp1)
)
loadChartConfig({
x_data: null,
y_data: this.dataList.map((i) => i.temp1),
})
);
},
handleOperate() {},