283 lines
7.2 KiB
Vue
283 lines
7.2 KiB
Vue
<!--
|
||
* @FilePath: \screenFront\src\views\PaintShopView\stuffView\bottom.vue
|
||
* @Author: 王路平
|
||
* @文件版本: V1.0.0
|
||
* @Date: 2023-02-13 14:43:28
|
||
* @Description:
|
||
*
|
||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||
-->
|
||
<template>
|
||
<div>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
|
||
<chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
|
||
<chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
|
||
<!-- <div>
|
||
<border3 ref="borderref">
|
||
<template v-slot>
|
||
<pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
|
||
</template>
|
||
</border3>
|
||
</div> -->
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, watch } from "vue";
|
||
import { calcWH } from "@/components/ts/selfAdaption";
|
||
// import {getPowerData} from '@/http/environment'
|
||
import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
|
||
import border6 from "@/components/borderBox/border6.vue";
|
||
import border3 from "@/components/borderBox/border3.vue";
|
||
import pm from "./chart/pm.vue";
|
||
import power from "./chart/power2023.vue";
|
||
import chart from "@/components/assembly/chart2.vue";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
|
||
import { useI18n } from 'vue-i18n'
|
||
let { t } = useI18n();
|
||
const store = useEnergyConsumeStore();
|
||
const router = useRouter();
|
||
|
||
let powerref = ref();
|
||
let Productionref = ref();
|
||
// let borderref=ref()
|
||
// let pmref=ref()
|
||
|
||
let props = defineProps<{
|
||
width: number;
|
||
height: number;
|
||
}>();
|
||
watch(
|
||
() => props,
|
||
(newVal, oldVal) => {
|
||
//监听父组件宽高变化，随时重置本组件尺寸
|
||
reset(newVal);
|
||
},
|
||
{ immediate: true, deep: true, flush: "post" }
|
||
);
|
||
function reset(val: any) {
|
||
//宽高为0时跳出该方法
|
||
|
||
if (!val.width && !val.height) return;
|
||
|
||
//重置盒子尺寸
|
||
powerBox(val.width, val.height);
|
||
// borderref.value.resetWH()
|
||
}
|
||
|
||
const powerBox = (width: any, height: any) => {
|
||
let a = calcWH(height, width, 1, 2, 0);
|
||
//修改高度
|
||
powerref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
|
||
Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
|
||
// pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
|
||
// yields.value.setchartWH(a.oWidth, a.oHeight - 30);
|
||
};
|
||
let powerOption = reactive({
|
||
title: "",
|
||
option: {
|
||
title: {
|
||
text: t('messages.PowerConsumption_2023'),
|
||
textStyle: {
|
||
color: "rgb(255,255,255,0.9)",
|
||
},
|
||
},
|
||
|
||
tooltip: {
|
||
trigger: "item",
|
||
axisPointer: {
|
||
// Use axis to trigger tooltip
|
||
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
|
||
axis: "auto",
|
||
},
|
||
},
|
||
legend: {
|
||
type: "scroll",
|
||
width: 800,
|
||
right: 20,
|
||
},
|
||
grid: {
|
||
top: "8%",
|
||
left: "3%",
|
||
right: "0%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: [
|
||
],
|
||
},
|
||
series: [
|
||
],
|
||
},
|
||
});
|
||
let ProductionOption = reactive({
|
||
title: "",
|
||
option: {
|
||
title: {
|
||
text: t('messages.Production_2023'),
|
||
textStyle: {
|
||
color: "rgb(255,255,255,0.9)",
|
||
},
|
||
},
|
||
|
||
tooltip: {
|
||
trigger: "item",
|
||
axisPointer: {
|
||
// Use axis to trigger tooltip
|
||
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
|
||
axis: "auto",
|
||
},
|
||
},
|
||
legend: {
|
||
type: "scroll",
|
||
width: 800,
|
||
right: 20,
|
||
},
|
||
grid: {
|
||
top: "8%",
|
||
left: "3%",
|
||
right: "0%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: [
|
||
],
|
||
},
|
||
series: [
|
||
],
|
||
},
|
||
});
|
||
let Data = { power: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 }, Production: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 } }
|
||
// async function getpower() {
|
||
// let result: any = await getPowerData({ time: 1 });
|
||
|
||
// if (result.code == 200) {
|
||
// result.data.name = result.data.name.reverse();
|
||
// result.data.listData.forEach((res) => {
|
||
// for (let key in res.month) {
|
||
// res.month[key] = res.month[key].reverse();
|
||
// }
|
||
// });
|
||
// power1.value.setData(result.data);
|
||
// // yields.value.setData(result.data);
|
||
// }
|
||
// }
|
||
function setcontentData(val) {
|
||
let monthData = []
|
||
let powerMonth = []
|
||
for (let key in val.power) {
|
||
monthData.push(key)
|
||
powerMonth.push(val.power[key])
|
||
}
|
||
powerOption.option.yAxis.data = []
|
||
powerOption.option.series = []
|
||
powerOption.option.yAxis.data = monthData.reverse()
|
||
powerOption.option.series.push({
|
||
data: powerMonth.reverse(),
|
||
type: 'bar',
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
},
|
||
itemStyle: {
|
||
color: function (params) {
|
||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||
// console.log(params)
|
||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||
// return colors[params.dataIndex];
|
||
return color[params.dataIndex];
|
||
}
|
||
},
|
||
barWidth: '30%',
|
||
label: {
|
||
show: true,
|
||
color: '#fff',
|
||
formatter: function (params) {
|
||
// console.log(params);
|
||
return params.value.toLocaleString()
|
||
},
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
})
|
||
|
||
powerref.value.changeData(powerOption.option)
|
||
|
||
|
||
let monthData2 = []
|
||
let powerMonth2 = []
|
||
for (let key in val.rate) {
|
||
monthData2.push(key)
|
||
powerMonth2.push(val.rate[key])
|
||
}
|
||
ProductionOption.option.yAxis.data = []
|
||
ProductionOption.option.series = []
|
||
ProductionOption.option.yAxis.data = monthData2.reverse()
|
||
ProductionOption.option.series.push({
|
||
data: powerMonth2.reverse(),
|
||
type: 'bar',
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
},
|
||
itemStyle: {
|
||
color: function (params) {
|
||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||
// console.log(params)
|
||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||
// return colors[params.dataIndex];
|
||
return color[params.dataIndex];
|
||
}
|
||
},
|
||
barWidth: '25%',
|
||
label: {
|
||
show: true,
|
||
color: '#fff',
|
||
formatter: function (params) {
|
||
// console.log(params);
|
||
return params.value.toLocaleString()
|
||
},
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
})
|
||
|
||
Productionref.value.changeData(ProductionOption.option)
|
||
// pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
|
||
}
|
||
onMounted(() => {
|
||
|
||
|
||
|
||
});
|
||
defineExpose({
|
||
setcontentData,
|
||
});
|
||
</script>
|
||
|
||
<style scoped></style>
|