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 @@ ...@@ -68,7 +68,7 @@
</el-config-provider> </el-config-provider>
</el-footer> --> </el-footer> -->
<el-card v-show="(value === false)" :height="tableHeight"> <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> </el-card>
</template> </template>
<script setup> <script setup>
...@@ -90,61 +90,61 @@ var otherList = reactive([]); ...@@ -90,61 +90,61 @@ var otherList = reactive([]);
const props = { multiple: true, emitPath: false } const props = { multiple: true, emitPath: false }
var $chart; var $chart;
const chartTitle = ref("换热站耗热量环比（GJ）"); const chartTitle = ref("换热站耗热量环比（GJ）");
const legendTitles = ref([]); const legendTitles = reactive([]);
const xAxisData = ref([]); const xAxisData = ref([]);
const seriesData = reactive([]); const series = reactive([]);
var chartData = { // var chartData = {
title: { // color:['#0379FF', '#FEA501', '#13E1E1'],
text: chartTitle.value, // title: {
x: '10px', // text: chartTitle.value,
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） // x: '10px',
y: '0px', // // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
// itemGap设置主副标题纵向间隔，单位px，默认为10， // y: '0px',
itemGap: 10, // // itemGap设置主副标题纵向间隔，单位px，默认为10，
backgroundColor: '#EEE', // itemGap: 10,
// 主标题文本样式设置 // backgroundColor: '#EEE',
textStyle: { // // 主标题文本样式设置
fontSize: 16, // textStyle: {
fontWeight:'500', // fontSize: 16,
color: '#000000' // fontWeight:'500',
}, // color: '#000000'
}, // },
legend: { // },
data: legendTitles.value,// ['福合园', '福锦园', '福满园'], // legend: {
x: 'right', // data: legendTitles.value,// ['福合园', '福锦园', '福满园'],
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） // x: 'right',
y: 'top', // // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
textStyle: { // y: 'top',
color: '#666' // 图例文字颜色 // textStyle: {
}, // color: '#666' // 图例文字颜色
}, // },
tooltip: { // },
trigger: 'axis', // tooltip: {
axisPointer: { // trigger: 'axis',
type: 'cross', // axisPointer: {
label: { // type: 'cross',
backgroundColor: '#6a7985' // label: {
} // backgroundColor: '#6a7985'
} // }
}, // }
xAxis: { // },
type: 'category', // xAxis: {
boundaryGap: false, // type: 'category',
axisLine: { // boundaryGap: false,
show: 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'] // },
}, // 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', // yAxis: {
axisLine: { // type: 'value',
show: false // axisLine: {
}, // show: false
}, // },
series: seriesData.value, // },
color:['#0379FF', '#FEA501', '#13E1E1'] // series: series
} // }
onMounted(() => { onMounted(() => {
setContentHeight(); setContentHeight();
...@@ -259,31 +259,39 @@ function getSupplys(){ ...@@ -259,31 +259,39 @@ function getSupplys(){
function getchart() { function getchart() {
try{ try{
//chartTitle //chartTitle
//const series = reactive([]); const record = reactive([]);
//const title = ref(); 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) => { http.post("/api/analysis/external/QOQ", AnatransferInfo).then((result) => {
console.log(result); console.log(result);
// uniqueItems.value = [...new Set(items.value.map(item => item.id))]; // uniqueItems.value = [...new Set(items.value.map(item => item.id))];
result.data.forEach(item =>{ result.data.forEach(item =>{
legendTitles.value.push(item.transferName); legendTitles.push(item.transferName);
xAxisData.value.push(item.gatherTime); xAxisData.value.push(item.gatherTime);
seriesData.push({ record.push(item.record);
name: item.transferName, temp.push(item.temperature);
value: item.record, timeList.push(item.gatherYear + '-' + item.gatherMon + '-' + item.gatherDay + ' ' + item.gatherHour)
type: 'line',
smooth:true,
symbol:'none'});
}) })
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; // curveTitleData.value = result.data.title;
// result.data.title.forEach(element => { // result.data.title.forEach(element => {
// titles.push(element.alias); // titles.push(element.alias);
...@@ -301,48 +309,92 @@ function getchart() { ...@@ -301,48 +309,92 @@ function getchart() {
// data: da // data: da
// }) // })
// }) // })
// option.value = { option.value = {
// title: { title: {
// text: title.value + '历史数据' text: title.value
// }, },
// tooltip: { tooltip: {
// trigger: 'axis' trigger: 'axis',
// }, axisPointer: {
// legend: { type: 'cross'
// data: titles }
// }, },
// grid: { legend: {
// left: '3%', data: titles
// right: '4%', },
// bottom: '3%', grid: {
// containLabel: true left: '3%',
// }, right: '4%',
// toolbox: { bottom: '3%',
// feature: { containLabel: true
// saveAsImage: {} },
// } toolbox: {
// }, feature: {
// xAxis: { dataView: { show: true, readOnly: false },
// type: 'category', saveAsImage: { show: true }
// boundaryGap: false, }
// data: timeList },
// }, legend: {
// yAxis: { data: ['热单耗', '温度']
// type: 'value', },
// axisLabel: { xAxis: {
// formatter:'{value} ℃' type: 'category',
// } axisTick: {
// }, alignWithLabel: true
// series: series },
// }; boundaryGap: false,
// console.log(option.value); data: timeList
// var myChart = echarts.init(document.getElementById('chart')); },
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); myChart.setOption(option.value);
// //图表响应式 //图表响应式
// window.addEventListener('resize', () => { window.addEventListener('resize', () => {
// myChart.resize(); myChart.resize();
// }) })
}) })
}catch(error){ }catch(error){
console.log(error.message); console.log(error.message);
......
src/views/HistoryPage/HisTransPage.vue
View file @ 63936a9b
...@@ -491,11 +491,13 @@ function getchart() { ...@@ -491,11 +491,13 @@ function getchart() {
HistransferInfo.pageCount = 999999; HistransferInfo.pageCount = 999999;
options.forEach(element =>{ options.forEach(element =>{
element.children.forEach(ele =>{ element.children.forEach(elem =>{
if(ele.value === id){ elem.children.forEach(ele =>{
title.value = ele.label; if(ele.value === id){
} title.value = ele.label;
}) }
})
})
}) })
http.post("/api/transfer/Curve", HistransferInfo).then((result) => { http.post("/api/transfer/Curve", HistransferInfo).then((result) => {
curveTitleData.value = result.data.title; curveTitleData.value = result.data.title;
...@@ -549,7 +551,6 @@ function getchart() { ...@@ -549,7 +551,6 @@ function getchart() {
}, },
series: series series: series
}; };
console.log(option.value);
var myChart = echarts.init(document.getElementById('chart')); var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option.value); 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