Skip to content

W
web-project
Commit 2680d266 authored by 朱超's avatar 朱超
Browse files
Options

同比更新

parent 2eeaaa45
Hide whitespace changes
Inline Side-by-side
Showing with 1055 additions and 3 deletions
src/api/analysis.js
View file @ 2680d266
...@@ -92,8 +92,15 @@ export const postExternalQOQ = params => { ...@@ -92,8 +92,15 @@ export const postExternalQOQ = params => {
}) })
} }
//换热站机组用量同比接口（耗水量、耗电量、耗热量） //换热站机组用量同比接口（耗水量、耗电量、耗热量）网内
export const postYOY = params => { export const postWithinYOY = params => {
return http.post(`/api/analysis/within/YOY`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//换热站机组用量同比接口（耗水量、耗电量、耗热量）网外
export const postExternalYOY = params => {
return http.post(`/api/analysis/external/YOY`, params).then(res => res).catch(function (error) { return http.post(`/api/analysis/external/YOY`, params).then(res => res).catch(function (error) {
console.log(error); console.log(error);
}) })
......
src/views/HandlerPage/YOY.vue
View file @ 2680d266
<template>用量同比</template> <template>
\ No newline at end of file <div
class="contentBlock"
id="contentBlock"
v-loading="loading"
element-loading-background="rgba(122, 122, 122, 0.6)"
>
<el-card class="card-contianer">
<el-form
:inline="true"
:model="enertyInfo"
ref="formRef"
label-position="top"
>
<el-form-item>
<el-switch
v-model="switchV"
active-text="曲线图"
inactive-text="表格"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #6589ff;
min-width: 130px;
margin: 12% 0 0 0;
"
@change="changeFun"
/>
</el-form-item>
<el-form-item label="设备类型">
<el-select
v-model="networkType"
placeholder="请选择"
@change="selTypeChange"
style="width: 100px"
>
<el-option label="网内" :value="1" />
<el-option label="网外" :value="2" />
</el-select>
</el-form-item>
<el-form-item
label="网内："
prop="supplyIdList"
v-show="networkType == 1"
>
<el-cascader
:options="options1.value"
v-model="deviceIdIn"
:props="props"
collapse-tags
:show-all-levels="false"
placeholder="请选择"
/>
</el-form-item>
<el-form-item label="网外：" prop="idList" v-show="networkType == 2">
<el-cascader
:options="options"
v-model="deviceIdOut"
:props="props"
collapse-tags
:show-all-levels="false"
placeholder="请选择"
@change="transferIdChange"
/>
</el-form-item>
<el-form-item label="开始月份" v-show="enertyInfo.interval == 1">
<el-select
v-model="startMonth"
placeholder="请选择"
style="width: 80px"
>
<el-option
:label="item + '月'"
:key="item"
:value="item"
v-for="item in monthList"
/>
</el-select>
</el-form-item>
<el-form-item label="开始日期" v-show="enertyInfo.interval == 1">
<el-select
v-model="startDay"
placeholder="请选择"
style="width: 80px"
>
<el-option
:label="item + '日'"
:key="item"
:value="item"
v-for="item in dayList"
/>
</el-select>
</el-form-item>
<el-form-item label="结束月份" v-show="enertyInfo.interval == 1">
<el-select
v-model="endMonth"
placeholder="请选择"
style="width: 80px"
>
<el-option
:label="item + '月'"
:key="item"
:value="item"
v-for="item in monthList"
/>
</el-select>
</el-form-item>
<el-form-item label="结束日期" v-show="enertyInfo.interval == 1">
<el-select v-model="endDay" placeholder="请选择" style="width: 80px">
<el-option
:label="item + '日'"
:key="item"
:value="item"
v-for="item in dayList"
/>
</el-select>
</el-form-item>
<el-form-item label="开始年度" v-show="enertyInfo.interval == 3">
<el-select
v-model="enertyInfo.startSupplyYear"
placeholder="请选择"
style="width: 120px"
>
<el-option
:label="item"
:key="item"
:value="item"
v-for="item in yearList"
/>
</el-select>
</el-form-item>
<el-form-item label="结束年度" v-show="enertyInfo.interval == 3">
<el-select
v-model="enertyInfo.endSupplyYear"
placeholder="请选择"
style="width: 120px"
>
<el-option
:label="item"
:key="item"
:value="item"
v-for="item in yearList"
/>
</el-select>
</el-form-item>
<el-form-item
label="开始时间："
prop="startTime"
v-show="enertyInfo.interval == 0"
>
<el-config-provider :locale="zhCn">
<el-date-picker
type="date"
value-format="YYYY-MM-DD"
placeholder="选择开始时间"
v-model="enertyInfo.startTime"
:clearable="false"
/>
</el-config-provider>
</el-form-item>
<el-form-item
label="结束时间："
prop="endTime"
v-show="enertyInfo.interval == 0"
>
<el-config-provider :locale="zhCn">
<el-date-picker
type="date"
value-format="YYYY-MM-DD"
placeholder="选择结束时间"
v-model="enertyInfo.endTime"
:clearable="false"
/>
</el-config-provider>
</el-form-item>
<el-form-item label="时间类型">
<el-select
v-model="enertyInfo.interval"
placeholder="请选择"
style="width: 80px"
@change="timeFun"
>
<el-option label="小时" :value="0" />
<el-option label="日" :value="1" />
<el-option label="月" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="能耗类型">
<el-select
v-model="enertyInfo.energyType"
placeholder="请选择"
style="width: 80px"
@change="postExternalYOYFun"
>
<el-option label="耗气" :value="1" v-show="networkType == 1" />
<el-option label="耗水" :value="2" />
<el-option label="耗热" :value="3" />
<el-option label="耗电" :value="4" />
</el-select>
</el-form-item>
<div style="position: absolute; right: 2%">
<el-button
type="primary"
@click="postExternalYOYFun"
style="margin: 15px 0 0 0"
>查询</el-button
><el-button
type="primary"
@click="exportTableToExcel"
style="margin: 15px 0 0 10px"
>导出表格</el-button
>
</div>
</el-form>
</el-card>
<div v-show="!switchV">
<el-table
:data="tableData"
:height="tableHeight"
style="width: 100%"
empty-text="暂无数据"
>
<el-table-column type="index" label="序号" align="center" width="80" />
<el-table-column prop="transferName" label="换热站机组名称" />
<el-table-column prop="gatherTime" label="时间" />
<el-table-column prop="temperature" label="温度（℃）" />
<el-table-column
prop="record"
label="耗气量"
v-if="enertyInfo.energyType == '1'"
/>
<el-table-column
prop="record"
label="耗水量（T）"
v-if="enertyInfo.energyType == '2'"
/>
<el-table-column
prop="record"
label="耗热量（GJ）"
v-if="enertyInfo.energyType == '3'"
/>
<el-table-column
prop="record"
label="耗电量（A）"
v-if="enertyInfo.energyType == '4'"
/>
</el-table>
</div>
<div v-show="switchV" id="echartsLayerBlock">
<div v-show="nodata">
<div class="echartsLayer" id="echartsLayer"></div>
</div>
<div v-show="!nodata"><el-empty description="暂无数据" /></div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import store from "../../store/index";
import * as echarts from "echarts";
import http from "../../api/http";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { saveAs } from "file-saver";
import XLSX from "xlsx-js-style";
import { postExternalYOY, postWithinYOY } from "../../api/analysis";
const loading = ref(false);
const tdType = ref(1);
const networkType = ref(2);
const deviceIdIn = ref();
const deviceIdOut = ref();
const enertyInfo = reactive({
deviceId: "EF0864C6-1A01-41CF-94BE-523B4D6063DB",
startTime: null,
endTime: null,
energyType: 2,
interval: 0,
dayList: [1, 2, 3, 4, 5, 6, 7],
startSupplyYear: "2021-2022",
endSupplyYear: "2023-2024",
});
const monthList = [11, 12, 1, 2, 3];
const dayList = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23, 24, 25, 26, 27, 28, 29, 30, 31,
];
const yearList = [
"2016-2017",
"2017-2018",
"2018-2019",
"2019-2020",
"2020-2021",
"2021-2022",
"2022-2023",
"2023-2024",
"2024-2025",
"2025-2026",
"2026-2027",
"2027-2028",
"2028-2029",
"2029-2030",
"2030-2031",
"2031-2032",
"2032-2033",
"2033-2034",
"2034-2035",
];
const startSupplyYear = reactive();
const endSupplyYear = reactive();
const startMonth = ref(11);
const startDay = ref(1);
const endMonth = ref(12);
const endDay = ref(7);
const options = reactive([]);
const options1 = reactive([]);
const enterpriseId = ref();
const props = { emitPath: false };
const switchV = ref(true);
const echartF = ref(false);
const nodata = ref(true);
const tableData = reactive([]);
const echartTitle = reactive(["耗水量趋势图"]);
const echartData = reactive([]);
const echartDataTime = reactive([]);
const echartDataLegend = reactive([]);
const echartSeries = reactive([]);
const tableHeight = ref(500);
const computedWidth = ref("1200px");
const computedHeight = ref("500px");
const formRef = ref(null);
const company = ref("T");
const enertyTab = ref("能耗值");
const fullscreenLoading = ref(false);
const enertyInfoStyle = reactive(0);
const energyType = reactive(1);
const qoqEnergyType = reactive(3);
const energyTypeDis = ref(false);
const nowYear = ref();
const preYear = ref();
const nowMonth = ref();
const rules = {
transferId: [{ required: true, message: "请选择换热机组", trigger: "blur" }],
startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
};
function getEnterprise() {
var result = store.getters.getEnterprise();
if (result) {
enterpriseId.value = result[0].enterpriseId;
}
}
function transferIdChange() {
// if (enertyInfo.transferId.length > 10) {
// ElMessage.error("换热机组最多只能选择10个");
// }
}
function exportTableToExcel() {
let arr = [];
let exlData = [];
tableData.forEach((element) => {
arr = {
transferName: element.supplyName ? element.supplyName : element.transferName,
gatherTime: element.gatherTime,
temperature: element.temperature,
record: element.record,
};
exlData.push(arr);
});
const worksheet = XLSX.utils.json_to_sheet(exlData);
const workbook = XLSX.utils.book_new();
XLSX.utils.sheet_add_aoa(
worksheet,
[["换热站机组名称", "时间", "平均温度", enertyTab.value]],
{
origin: "A1",
}
);
worksheet["!cols"] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }];
// worksheet["!rows"] = [{ hpx: 20 }];
worksheet["A1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
worksheet["B1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
worksheet["C1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
worksheet["D1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
XLSX.utils.book_append_sheet(workbook, worksheet, "用量同比");
const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
const dataBlob = new Blob([excelBuffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
});
const downloadUrl = URL.createObjectURL(dataBlob);
saveAs(dataBlob, "用量同比.xlsx");
ElMessage.success("导出成功！请稍后。。。");
}
function timeFun() {
const today = new Date();
nowYear.value = today.getFullYear();
preYear.value = today.getFullYear() - 1;
nowMonth.value = today.getMonth() + 1;
const preday = new Date(today);
const prehour = new Date(today.getTime() - 60 * 60 * 1000);
today.setDate(today.getDate());
preday.setDate(preday.getDate() - 2);
var hour = today.getHours();
enertyInfo.startTime = preday.toISOString().split("T")[0];
enertyInfo.endTime = today.toISOString().split("T")[0];
}
//获取换热机组列表
function getSupplys() {
var result = store.getters.getEnterprise();
if (result) {
result.forEach((element) => {
if (element.enterpriseId === enterpriseId.value) {
if (
element.enterpriseId ===
"9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()
) {
element.serviceCenterList.forEach((center) => {
let c = [];
center.supplyList.forEach((supply) => {
let chi = [];
supply.transferList.forEach((unit) => {
chi.push({ value: unit.unitId, label: unit.unitName });
});
c.push({
children: chi,
value: supply.supplyId,
label: supply.supplyName,
});
});
options.push({ children: c, label: center.serviceCenterName });
});
} else {
element.supplyList.forEach((element) => {
let chi = [];
element.transferList.forEach((unit) => {
chi.push({ value: unit.unitId, label: unit.unitName });
});
options.push({
children: chi,
value: supply.supplyId,
label: element.supplyName,
});
});
}
}
});
}
options1.value = JSON.parse(JSON.stringify(options));
options1.value.forEach((element) => {
element.children.forEach((element1) => {
delete element1.children;
});
});
deviceIdOut.value = options[0].children[0].children[0].value;
deviceIdIn.value = options1.value[0].children[0].value;
}
function selTypeChange() {
if (enertyInfo.type == 0) {
energyTypeDis.value = true;
} else {
energyTypeDis.value = false;
}
}
//换热站机组能耗数据接口（用量环比）
function postExternalYOYFun() {
let startTime = null;
let endTime = null;
if (enertyInfo.interval == 0) {
var data1 = Date.parse(enertyInfo.startTime.replace(/-/g, "/"));
var data2 = Date.parse(enertyInfo.endTime.replace(/-/g, "/"));
var datadiff = data2 - data1;
var time = 7 * (60 * 60 * 24 * 1000);
if (datadiff == 0) {
ElMessage.error("开始时间不能等于结束时间");
return false;
}
if (datadiff < 0) {
ElMessage.error("开始时间应小于结束时间");
return false;
}
if (datadiff > time) {
ElMessage.error("查询日期区间不能超过7天");
return false;
}
}
if (enertyInfo.interval == 1) {
if (startDay.value > endDay.value || startDay.value == endDay.value) {
ElMessage.error("开始日期不能晚于或等于结束日期");
return false;
}
let dayArr = [];
let dayn = endDay.value - startDay.value;
let startDayn = startDay.value;
for (var i = 0; i <= dayn; i++) {
dayArr.push(startDayn);
startDayn++;
}
enertyInfo.dayList = dayArr;
if (startMonth.value < 4) {
startTime = nowYear.value + "-" + startMonth.value + "-" + startDay.value;
} else {
startTime = preYear.value + "-" + startMonth.value + "-" + startDay.value;
}
if (endMonth.value < 4) {
endTime = nowYear.value + "-" + endMonth.value + "-" + endDay.value;
} else {
endTime = preYear.value + "-" + endMonth.value + "-" + endDay.value;
}
if (compareDates(startTime, endTime)) {
ElMessage.error("开始时间不能晚于结束时间或相同");
return false;
}
}
let supplyYearB = ref();
let supplyYearE = ref();
if (enertyInfo.interval == 3) {
if (nowMonth < 7) {
supplyYearB = enertyInfo.startSupplyYear.split("-")[0] - 1;
supplyYearE = enertyInfo.endSupplyYear.split("-")[0];
} else {
supplyYearB = enertyInfo.startSupplyYear.split("-")[1] - 1;
supplyYearE = enertyInfo.endSupplyYear.split("-")[1];
}
if (supplyYearE - supplyYearB > 3) {
ElMessage.error("查询年度不能超过3年");
return false;
}
}
switch (enertyInfo.energyType) {
case 1:
company.value = "Nm³";
echartTitle.value = "耗气量趋势图";
break;
case 2:
company.value = "T";
echartTitle.value = "耗水量趋势图";
break;
case 3:
company.value = "GJ";
echartTitle.value = "耗热量趋势图";
break;
case 4:
company.value = "A";
echartTitle.value = "耗电量趋势图";
break;
}
switch (enertyInfo.interval) {
case 1:
enertyInfo.startTime = startTime;
enertyInfo.endTime = endTime;
break;
case 3:
enertyInfo.startTime = supplyYearB + "-11-01";
enertyInfo.endTime = supplyYearE + "-03-31";
break;
}
let params = {
deviceId: enertyInfo.deviceId,
startTime: "2023-11-1",
endTime: "2023-12-7",
energyType: 2,
interval: 1,
dayList: [],
};
clearData();
loading.value = true;
if (networkType.value == 2) {
enertyInfo.deviceId = deviceIdOut;
postExternalYOY(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
let arr = [];
if (enertyInfo.interval != 1) {
tableData.value = res.data.data;
} else {
res.data.data.forEach((item) => {
item.forEach((item1) => {
arr.push(item1);
});
});
}
tableData.value = arr;
tableData.value.forEach((item) => {
item.gatherTime = item.gatherTime.replace("T", " ");
});
if (res.data.data.length > 0) {
pageInitFun(res);
} else {
nodata.value = false;
}
} else {
ElMessage.error(res.message);
}
loading.value = false;
});
} else {
enertyInfo.deviceId = deviceIdIn;
postWithinYOY(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
let arr = [];
if (enertyInfo.interval != 1) {
tableData.value = res.data.data;
} else {
res.data.data.forEach((item) => {
item.forEach((item1) => {
arr.push(item1);
});
});
}
tableData.value = arr;
tableData.value.forEach((item) => {
item.gatherTime = item.gatherTime.replace("T", " ");
});
if (res.data.data.length > 0) {
pageInitFun(res);
} else {
nodata.value = false;
}
} else {
ElMessage.error(res.message);
}
loading.value = false;
});
}
}
function compareDates(date1, date2) {
const firstDate = new Date(date1);
const secondDate = new Date(date2);
if (firstDate >= secondDate) {
return true;
} else {
return false;
}
}
function clearData() {
echartData.length = 0;
echartSeries.length = 0;
echartDataLegend.length = 0;
echartDataTime.length = 0;
tableData.length = 0;
loading.value = false;
}
function pageInitFun(res) {
tableData.length = 0;
let tableArr = [];
if (enertyInfo.interval != 1) {
res.data.data.forEach((element) => {
if (networkType.value == 2) {
tableArr = {
transferName: element.transferName,
gatherTime: element.gatherTime.replace("T", " "),
temperature: element.temperature,
record: element.record ? parseFloat(element.record).toFixed(2) : 0,
gatherYear: element.gatherYear,
};
} else {
tableArr = {
transferName: element.supplyName,
gatherTime: element.gatherTime.replace("T", " "),
temperature: element.temperature,
record: element.record ? parseFloat(element.record).toFixed(2) : 0,
gatherYear: element.gatherYear,
gatherMon: element.gatherMon,
gatherDay: element.gatherDay,
};
}
tableData.push(tableArr);
});
} else {
tableData.value.forEach((element) => {
if (networkType.value == 2) {
tableArr = {
transferName: element.transferName,
gatherTime: element.gatherTime,
temperature: element.temperature,
record: element.record ? parseFloat(element.record).toFixed(2) : 0,
gatherYear: element.gatherYear,
};
} else {
tableArr = {
transferName: element.supplyName,
gatherTime: element.gatherTime,
temperature: element.temperature,
record: element.record ? parseFloat(element.record).toFixed(2) : 0,
gatherYear: element.gatherYear,
gatherMon: element.gatherMon,
gatherDay: element.gatherDay,
};
}
tableData.push(tableArr);
});
}
nodata.value = true;
echartData.length = 0;
echartSeries.length = 0;
echartDataLegend.length = 0;
echartDataTime.length = 0;
let arrList = [];
let arr = [];
let timeN = [];
switch (enertyInfo.interval) {
case 0:
tableData.forEach((element, index) => {
++index;
arr.push(element.record);
if (index != 0) {
if (index % 24 == 0) {
timeN.push(element.gatherTime.split(" ")[0]);
arrList.push(arr);
arr = [];
}
}
});
echartDataTime.push(
"0h",
"1h",
"2h",
"3h",
"4h",
"5h",
"6h",
"7h",
"8h",
"9h",
"10h",
"11h",
"12h",
"13h",
"14h",
"15h",
"16h",
"17h",
"18h",
"19h",
"20h",
"21h",
"22h",
"23h"
);
arrList.forEach((item, index) => {
echartSeries.push({
name: timeN[index],
type: "bar",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
},
},
data: item,
});
});
break;
case 1:
let timeName = [];
res.data.data.forEach((item, index) => {
item.forEach((item1, index1) => {
if (index == 0) {
echartDataTime.push(item1.gatherDay + "日");
}
timeName.push(item1.gatherTime);
arr.push(item1.record);
});
timeN.push(timeName);
arrList.push(arr);
timeName = [];
arr = [];
});
let dataList = [];
for (var i = 0; i < arrList[0].length; i++) {
let arr = [];
for (var j = 0; j < arrList.length; j++) {
arr.push(arrList[j][i]);
}
dataList.push(arr);
}
arrList.forEach((item, index) => {
echartSeries.push({
name: timeN[index][0].substring(0, 7),
type: "bar",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
},
},
data: item,
});
});
break;
case 3:
let yearList = [];
tableData.forEach((element, index) => {
if (index == 0) {
yearList.push(element.gatherYear);
}
++index;
arr.push(element.record);
if (index != 0) {
if (index % 5 == 0) {
yearList.push(element.gatherYear);
arrList.push(arr);
arr = [];
}
}
});
yearList.forEach((item, index) => {
if (index + 1 != yearList.length) {
timeN.push(item + "-" + yearList[index + 1]);
}
});
echartDataTime.push("11月", "12月", "1月", "2月", "3月");
arrList.forEach((item, index) => {
echartSeries.push({
name: timeN[index],
type: "bar",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
},
},
data: item,
});
});
break;
}
let temperatureListArr = [];
res.data.temperatureList.forEach((element) => {
temperatureListArr.push(element);
});
echartSeries.push({
name: "平均温度",
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + " ℃";
},
},
data: temperatureListArr,
});
echartSeries.forEach((element, index) => {
echartDataLegend.push(element.name);
});
echartInit();
}
function setContentHeight() {
tableHeight.value = window.innerHeight - 232;
}
function dataDeal(data) {
var listArr = [];
data.forEach(function (el, index) {
for (var i = 0; i < listArr.length; i++) {
if (listArr[i].gatherDay == el.gatherDay) {
listArr[i].listInfo.push({
gatherDay: el.gatherDay,
gatherHour: el.gatherHour,
gatherMonth: el.gatherMonth,
gatherTime: el.gatherTime.replace("T", " "),
gatherYear: el.gatherYear,
temperature: el.temperature,
transferId: el.transferId,
transferName: el.transferName,
record: el.record,
});
return;
}
}
listArr.push({
transferId: el.transferId,
transferName: el.transferName,
gatherDay: el.gatherDay,
listInfo: [
{
gatherHour: el.gatherHour,
gatherMonth: el.gatherMonth,
gatherTime: el.gatherTime.replace("T", " "),
gatherYear: el.gatherYear,
temperature: el.temperature,
transferId: el.transferId,
record: el.record,
},
],
});
});
return listArr;
}
function echartInit() {
var chartDom = document.getElementById("echartsLayer");
var myChart = echarts.init(chartDom);
var option;
myChart.resize({ width: computedWidth.value, height: computedHeight.value });
option = {
color: [
"#91cc75",
"#fac858",
"#5470c6",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#ea7ccc",
"#766451",
"#cba1ff",
"#470c66",
],
title: {
text: echartTitle.value,
top: 0,
left: 50,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
width: "70%",
data: echartDataLegend,
},
xAxis: [
{
type: "category",
data: echartDataTime,
axisPointer: {
type: "shadow",
},
},
],
grid: {
left: 100,
right: 100,
top: 70,
bottom: 100,
},
yAxis: [
{
type: "value",
name: "温度",
axisLabel: {
formatter: "{value} ℃",
},
},
{
type: "value",
name: "能耗",
position: "right",
axisLabel: {
formatter: "{value} " + company.value,
},
},
],
series: echartSeries,
};
option && myChart.setOption(option);
}
function changeFun() {
if (nodata.value) {
var divWidth = document.getElementById("contentBlock").offsetWidth;
var divHeight = document.getElementById("contentBlock").scrollHeight;
computedWidth.value = divWidth + "px";
computedHeight.value = divHeight * 0.75 + "px";
echartInit();
}
}
onMounted(() => {
timeFun();
setContentHeight();
getEnterprise();
getSupplys();
postExternalYOYFun();
changeFun();
window.addEventListener("resize", function () {
location.reload();
});
});
onUnmounted(() => {
window.removeEventListener("resize");
});
</script>
<style lang="less" scoped>
.contentBlock {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
}
.el-form--inline .el-form-item {
margin-right: 10px;
}
.el-form-item {
margin: 5px !important;
}
.echartsLayer {
width: 100%;
margin: 2% auto 0;
}
.el-form-item__content {
align-items: right !important;
}
</style>
\ No newline at end of file
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