hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改大屏首页图片 机械分厂车间环境柱状图显示

Browse Source
This commit is contained in:
hzz 2023-05-24 17:46:43 +08:00
parent 626090cb8b
commit 8b9abd807d
13 changed files with 421 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/indexImg/FactoryView.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 250 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/indexImg/MicrofactoryDev.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/indexImg/PaintShopView.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 58 KiB

BIN
src/assets/indexImg/decorationShop.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

BIN
src/assets/indexImg/electronicControl.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/assets/indexImg/mechanical_noise.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/indexImg/realtimeSecurityJixie.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

18
src/views/InPlantProducts/content/bottom.vue
View File

@ -55,7 +55,7 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import installtable from "./chart/installtable.vue";
import devList from "./chart/deviceslist.vue";
@ -65,6 +65,7 @@ import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useInPlantProductsStore();
let timer = null;
let props = defineProps<{
width: number;
height: number;
@ -136,8 +137,18 @@ async function getDeviceInPlantfun() {
res["index"] = index + 1;
return res
});
//显示优化 防止刚进页面时候数据过多
if (newdata.length > 20) {
let newdatatemp = newdata.slice(0, 20);
store.setDevList(newdatatemp);
timer = setTimeout(() => {
store.setDevList(newdata);
}, 1000);
} else {
store.setDevList(newdata);
}
store.setDevList(newdata);
}
}
@ -180,6 +191,9 @@ onMounted(() => {
getprogressOfCorpsfun();
// setdata();
});
onUnmounted(() => {
clearTimeout(timer);
});
</script>
<style scope>

206
src/views/PaintShopView/finishView/bottom.vue
View File

@ -12,16 +12,8 @@
<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>
<border3 ref="borderref">
<template v-slot>
@ -48,7 +40,7 @@ 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();
@ -82,10 +74,10 @@ function reset(val: any) {
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);
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);
// 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,10 +156,10 @@ let ProductionOption = reactive({
type: 'category',
data: [
],
},
yAxis: {
type: 'value',
type: 'value',
},
series: [
],
@ -187,95 +179,95 @@ let ProductionOption = reactive({
// // 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.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:'50%',
function setcontentData(val) {
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){
return params.value.toLocaleString()
},
position: "top",
textStyle: {
color: "#fff",
fontSize: 14,
},
},
})
powerref.value.changeData(powerOption.option)
show: true,
color: '#fff',
formatter: function (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:'30%',
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){
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})
show: true,
color: '#fff',
formatter: function (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(() => {
});

210
src/views/PaintShopView/machiningView/bottom.vue
View File

@ -12,16 +12,8 @@
<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="ProductionOption.title"
:option="ProductionOption.option"
ref="Productionref"
></chart>
<chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
<chart :title="ProductionOption.title" :option="ProductionOption.option" ref="Productionref"></chart>
<!-- <div>
<border3 ref="borderref">
<template v-slot>
@ -48,13 +40,13 @@ 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 borderref = ref()
// let pmref=ref()
let props = defineProps<{
@ -82,10 +74,10 @@ function reset(val: any) {
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);
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);
// 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,95 +180,95 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
// // 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.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:'50%',
function setcontentData(val) {
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){
return params.value.toLocaleString()
},
position: "top",
textStyle: {
color: "#fff",
fontSize: 14,
},
},
})
powerref.value.changeData(powerOption.option)
show: true,
color: '#fff',
formatter: function (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:'30%',
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){
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})
show: true,
color: '#fff',
formatter: function (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(() => {
});

212
src/views/PaintShopView/stuffView/bottom.vue
View File

@ -12,16 +12,8 @@
<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>
<border3 ref="borderref">
<template v-slot>
@ -48,7 +40,7 @@ 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();
@ -82,10 +74,10 @@ function reset(val: any) {
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);
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);
// 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,97 +180,97 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
// // 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.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%',
function setcontentData(val) {
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.pm25,ten:val.dust.pm10})
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(() => {
});

212
src/views/PaintShopView/weldView/bottom.vue
View File

@ -12,16 +12,8 @@
<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>
<border3 ref="borderref">
<template v-slot>
@ -48,7 +40,7 @@ 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();
@ -82,10 +74,10 @@ function reset(val: any) {
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);
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);
// 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,97 +180,97 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
// // 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.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%',
function setcontentData(val) {
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.pm25,ten:val.dust.pm10})
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(() => {
});

2
src/views/index.vue
View File

@ -202,7 +202,7 @@ let routerList = [
isLink: false,
path: "/realtimeSecurityJixie",
title: t("messages.realtimeSecurityJixie"),
url: require("../assets/indexImg/realtimeSecurity.png"),
url: require("../assets/indexImg/realtimeSecurityJixie.png"),
},
{
id: 22,