精饰车间环境 柱状图
This commit is contained in:
hzz
parent
8b9abd807d
commit
581028aca6
@ -12,22 +12,14 @@
|
||||
<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>
|
||||
<chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
|
||||
<chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
|
||||
<div>
|
||||
<border6 ref="borderref">
|
||||
<template v-slot>
|
||||
<pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
|
||||
</template>
|
||||
</border6>
|
||||
<template v-slot>
|
||||
<pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
|
||||
</template>
|
||||
</border6>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -36,7 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
|
||||
import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
|
||||
import { calcWH } from "@/components/ts/selfAdaption";
|
||||
// import {getPowerData} from '@/http/environment'
|
||||
import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
|
||||
@ -48,14 +40,14 @@ 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();
|
||||
let { t } = useI18n();
|
||||
const store = useEnergyConsumeStore();
|
||||
const router = useRouter();
|
||||
|
||||
let powerref = ref();
|
||||
let Productionref = ref();
|
||||
let borderref=ref()
|
||||
let pmref=ref()
|
||||
let borderref = ref()
|
||||
let pmref = ref()
|
||||
let pm_timer = null
|
||||
let props = defineProps<{
|
||||
width: number;
|
||||
@ -82,10 +74,10 @@ function reset(val: any) {
|
||||
const powerBox = (width: any, height: any) => {
|
||||
let a = calcWH(height, width, 1, 3, 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);
|
||||
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: "",
|
||||
@ -96,7 +88,7 @@ let powerOption = reactive({
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
@ -107,8 +99,8 @@ let powerOption = reactive({
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
width:800,
|
||||
right:20,
|
||||
width: 800,
|
||||
right: 20,
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
@ -121,10 +113,10 @@ let powerOption = reactive({
|
||||
type: 'category',
|
||||
data: [
|
||||
],
|
||||
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
],
|
||||
@ -139,7 +131,7 @@ let ProductionOption = reactive({
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
@ -150,8 +142,8 @@ let ProductionOption = reactive({
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
width:800,
|
||||
right:20,
|
||||
width: 800,
|
||||
right: 20,
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
@ -164,16 +156,16 @@ let ProductionOption = reactive({
|
||||
type: 'category',
|
||||
data: [
|
||||
],
|
||||
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
],
|
||||
},
|
||||
});
|
||||
let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,"2月":22,"3月":11,"4月":22}}
|
||||
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 });
|
||||
|
||||
@ -188,99 +180,99 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
|
||||
// // yields.value.setData(result.data);
|
||||
// }
|
||||
// }
|
||||
let pm_index = 0
|
||||
function setcontentData(val){
|
||||
let pm_index = 0
|
||||
function setcontentData(val) {
|
||||
clearInterval(pm_timer)
|
||||
let monthData=[]
|
||||
let powerMonth=[]
|
||||
for(let key in val.power){
|
||||
monthData.push(key)
|
||||
powerMonth.push(val.power[key])
|
||||
}
|
||||
powerOption.option.xAxis.data=[]
|
||||
powerOption.option.series=[]
|
||||
powerOption.option.xAxis.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%',
|
||||
let monthData = []
|
||||
let powerMonth = []
|
||||
for (let key in val.power) {
|
||||
monthData.push(key)
|
||||
powerMonth.push(val.power[key])
|
||||
}
|
||||
powerOption.option.xAxis.data = []
|
||||
powerOption.option.series = []
|
||||
powerOption.option.xAxis.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)
|
||||
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.xAxis.data=[]
|
||||
ProductionOption.option.series=[]
|
||||
ProductionOption.option.xAxis.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:'20%',
|
||||
let monthData2 = []
|
||||
let powerMonth2 = []
|
||||
for (let key in val.rate) {
|
||||
monthData2.push(key)
|
||||
powerMonth2.push(val.rate[key])
|
||||
}
|
||||
ProductionOption.option.xAxis.data = []
|
||||
ProductionOption.option.series = []
|
||||
ProductionOption.option.xAxis.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[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||||
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[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
|
||||
if (val.dust.length > 1) {
|
||||
pm_timer = setInterval(() => {
|
||||
pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||||
pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
|
||||
pm_index++
|
||||
if (pm_index >= val.dust.length) {
|
||||
pm_index = 0
|
||||
|
||||
Loading…
Reference in New Issue
Block a user