Skip to content

W
web-project
Commit 63936a9b authored by qjeslks's avatar qjeslks
Browse files
Options

7.12.1

parent ef9d41cb
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 117 deletions
src/views/HandlerPage/EnergyViewPage.vue
View file @ 63936a9b
......@@ -68,7 +68,7 @@
</el-config-provider>
</el-footer> -->
<el-card v-show="(value === false)" :height="tableHeight">
<div id="h-chart" style="width: 99%; background: white; flex: 1;padding-top:15px; height: 800px;" ></div>
<div id="h-chart" style="width: 99%; background: white; flex: 1;padding-top:15px; height: 670px;" ></div>
</el-card>
</template>
<script setup>
......@@ -90,61 +90,61 @@ var otherList = reactive([]);
const props = { multiple: true, emitPath: false }
var $chart;
const chartTitle = ref("换热站耗热量环比（GJ）");
const legendTitles = ref([]);
const legendTitles = reactive([]);
const xAxisData = ref([]);
const seriesData = reactive([]);
const series = reactive([]);
var chartData = {
title: {
text: chartTitle.value,
x: '10px',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: '0px',
// itemGap设置主副标题纵向间隔，单位px，默认为10，
itemGap: 10,
backgroundColor: '#EEE',
// 主标题文本样式设置
textStyle: {
fontSize: 16,
fontWeight:'500',
color: '#000000'
},
},
legend: {
data: legendTitles.value,// ['福合园', '福锦园', '福满园'],
x: 'right',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
textStyle: {
color: '#666' // 图例文字颜色
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
data: xAxisData.value// ['2024-01-01 01', '2024-01-01 02', '2024-01-01 03', '2024-01-01 04', '2024-01-01 05', '2024-01-01 06', '2024-01-01 07','2024-01-01 08', '2024-01-01 09', '2024-01-01 10', '2024-01-01 11', '2024-01-01 12']
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
},
series: seriesData.value,
color:['#0379FF', '#FEA501', '#13E1E1']
}
// var chartData = {
// color:['#0379FF', '#FEA501', '#13E1E1'],
// title: {
// text: chartTitle.value,
// x: '10px',
// // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
// y: '0px',
// // itemGap设置主副标题纵向间隔，单位px，默认为10，
// itemGap: 10,
// backgroundColor: '#EEE',
// // 主标题文本样式设置
// textStyle: {
// fontSize: 16,
// fontWeight:'500',
// color: '#000000'
// },
// },
// legend: {
// data: legendTitles.value,// ['福合园', '福锦园', '福满园'],
// x: 'right',
// // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
// y: 'top',
// textStyle: {
// color: '#666' // 图例文字颜色
// },
// },
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// backgroundColor: '#6a7985'
// }
// }
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// axisLine: {
// show: false
// },
// data: xAxisData.value// ['2024-01-01 01', '2024-01-01 02', '2024-01-01 03', '2024-01-01 04', '2024-01-01 05', '2024-01-01 06', '2024-01-01 07','2024-01-01 08', '2024-01-01 09', '2024-01-01 10', '2024-01-01 11', '2024-01-01 12']
// },
// yAxis: {
// type: 'value',
// axisLine: {
// show: false
// },
// },
// series: series
// }
onMounted(() => {
setContentHeight();
......@@ -259,31 +259,39 @@ function getSupplys(){
function getchart() {
try{
//chartTitle
//const series = reactive([]);
//const title = ref();
const record = reactive([]);
const temp = reactive([]);
const titles = reactive([]);
const timeList = reactive([]);
const option = ref([]);
const title = ref();
let id = "";
console.log(AnatransferInfo);
http.post("/api/analysis/external/QOQ", AnatransferInfo).then((result) => {
console.log(result);
// uniqueItems.value = [...new Set(items.value.map(item => item.id))];
result.data.forEach(item =>{
legendTitles.value.push(item.transferName);
legendTitles.push(item.transferName);
xAxisData.value.push(item.gatherTime);
seriesData.push({
name: item.transferName,
value: item.record,
type: 'line',
smooth:true,
symbol:'none'});
record.push(item.record);
temp.push(item.temperature);
timeList.push(item.gatherYear + '-' + item.gatherMon + '-' + item.gatherDay + ' ' + item.gatherHour)
})
var myChart = echarts.init(document.getElementById('h-chart'));
myChart.clear();
myChart.setOption(chartData);
//$chart.setOption(chartData);
// console.log(legendData);
id = AnatransferInfo.idList[0];
options.forEach(element =>{
element.children.forEach(elem =>{
elem.children.forEach(ele =>{
if(ele.value === id){
title.value = ele.label;
}
})
})
})
// curveTitleData.value = result.data.title;
// result.data.title.forEach(element => {
// titles.push(element.alias);
......@@ -301,48 +309,92 @@ function getchart() {
// data: da
// })
// })
// option.value = {
// title: {
// text: title.value + '历史数据'
// },
// tooltip: {
// trigger: 'axis'
// },
// legend: {
// data: titles
// },
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: timeList
// },
// yAxis: {
// type: 'value',
// axisLabel: {
// formatter:'{value} ℃'
// }
// },
// series: series
// };
// console.log(option.value);
// var myChart = echarts.init(document.getElementById('chart'));
option.value = {
title: {
text: title.value
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: titles
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true }
}
},
legend: {
data: ['热单耗', '温度']
},
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
boundaryGap: false,
data: timeList
},
yAxis: [{
type: 'value',
name: '热单耗',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#5470C6'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#91CC75'
}
},
axisLabel: {
formatter: '{value} ml'
}
}],
series: [{
name: '热单耗',
type: 'line',
data: record
},
{
name: '温度',
type: 'line',
yAxisIndex: 1,
data: temp
}]
};
console.log(option.value);
var myChart = echarts.init(document.getElementById('h-chart'));
// myChart.setOption(option.value);
// //图表响应式
// window.addEventListener('resize', () => {
// myChart.resize();
// })
myChart.setOption(option.value);
//图表响应式
window.addEventListener('resize', () => {
myChart.resize();
})
})
}catch(error){
console.log(error.message);
......
src/views/HistoryPage/HisTransPage.vue
View file @ 63936a9b
......@@ -491,11 +491,13 @@ function getchart() {
HistransferInfo.pageCount = 999999;
options.forEach(element =>{
element.children.forEach(ele =>{
if(ele.value === id){
title.value = ele.label;
}
})
element.children.forEach(elem =>{
elem.children.forEach(ele =>{
if(ele.value === id){
title.value = ele.label;
}
})
})
})
http.post("/api/transfer/Curve", HistransferInfo).then((result) => {
curveTitleData.value = result.data.title;
......@@ -549,7 +551,6 @@ function getchart() {
},
series: series
};
console.log(option.value);
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option.value);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment