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> </template>
<script setup lang="ts"> <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 { calcWH } from "@/components/ts/selfAdaption";
import installtable from "./chart/installtable.vue"; import installtable from "./chart/installtable.vue";
import devList from "./chart/deviceslist.vue"; import devList from "./chart/deviceslist.vue";
@ -65,6 +65,7 @@ import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let {t} = useI18n(); let {t} = useI18n();
const store = useInPlantProductsStore(); const store = useInPlantProductsStore();
let timer = null;
let props = defineProps<{ let props = defineProps<{
width: number; width: number;
height: number; height: number;
@ -136,8 +137,18 @@ async function getDeviceInPlantfun() {
res["index"] = index + 1; res["index"] = index + 1;
return res 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(); getprogressOfCorpsfun();
// setdata(); // setdata();
}); });
onUnmounted(() => {
clearTimeout(timer);
});
</script> </script>
<style scope> <style scope>

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

@ -12,16 +12,8 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;"> <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
<chart <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
:title="powerOption.title" <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
:option="powerOption.option"
ref="powerref"
></chart>
<chart
:title="powerOption.title"
:option="powerOption.option"
ref="Productionref"
></chart>
<!-- <div> <!-- <div>
<border3 ref="borderref"> <border3 ref="borderref">
<template v-slot> <template v-slot>
@ -48,7 +40,7 @@ import chart from "@/components/assembly/chart2.vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume"; import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let {t} = useI18n(); let { t } = useI18n();
const store = useEnergyConsumeStore(); const store = useEnergyConsumeStore();
const router = useRouter(); const router = useRouter();
@ -82,10 +74,10 @@ function reset(val: any) {
const powerBox = (width: any, height: any) => { const powerBox = (width: any, height: any) => {
let a = calcWH(height, width, 1, 2, 0); let a = calcWH(height, width, 1, 2, 0);
//修改高度 //修改高度
powerref.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); Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
// pmref.value.setchartWH(a.oWidth-40,a.oHeight-40) // 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({ let powerOption = reactive({
title: "", title: "",
@ -96,7 +88,7 @@ let powerOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -107,8 +99,8 @@ let powerOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -121,10 +113,10 @@ let powerOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ series: [
], ],
@ -139,7 +131,7 @@ let ProductionOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -150,8 +142,8 @@ let ProductionOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -164,10 +156,10 @@ let ProductionOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ series: [
], ],
@ -187,95 +179,95 @@ let ProductionOption = reactive({
// // yields.value.setData(result.data); // // yields.value.setData(result.data);
// } // }
// } // }
function setcontentData(val){ function setcontentData(val) {
let monthData=[] let monthData = []
let powerMonth=[] let powerMonth = []
for(let key in val.power){ for (let key in val.power) {
monthData.push(key) monthData.push(key)
powerMonth.push(val.power[key]) powerMonth.push(val.power[key])
} }
powerOption.option.xAxis.data=[] powerOption.option.xAxis.data = []
powerOption.option.series=[] powerOption.option.series = []
powerOption.option.xAxis.data=monthData.reverse() powerOption.option.xAxis.data = monthData.reverse()
powerOption.option.series.push({ powerOption.option.series.push({
data: powerMonth.reverse(), data: powerMonth.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'50%', barWidth: '30%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter: function(params){ formatter: function (params) {
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
powerref.value.changeData(powerOption.option) powerref.value.changeData(powerOption.option)
let monthData2=[] let monthData2 = []
let powerMonth2=[] let powerMonth2 = []
for(let key in val.rate){ for (let key in val.rate) {
monthData2.push(key) monthData2.push(key)
powerMonth2.push(val.rate[key]) powerMonth2.push(val.rate[key])
} }
ProductionOption.option.xAxis.data=[] ProductionOption.option.xAxis.data = []
ProductionOption.option.series=[] ProductionOption.option.series = []
ProductionOption.option.xAxis.data=monthData2.reverse() ProductionOption.option.xAxis.data = monthData2.reverse()
ProductionOption.option.series.push({ ProductionOption.option.series.push({
data: powerMonth2.reverse(), data: powerMonth2.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'30%', barWidth: '25%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter: function(params){ formatter: function (params) {
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
Productionref.value.changeData(ProductionOption.option) Productionref.value.changeData(ProductionOption.option)
// pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10}) // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
} }
onMounted(() => { onMounted(() => {
}); });

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

@ -12,16 +12,8 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;"> <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
<chart <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
:title="powerOption.title" <chart :title="ProductionOption.title" :option="ProductionOption.option" ref="Productionref"></chart>
:option="powerOption.option"
ref="powerref"
></chart>
<chart
:title="ProductionOption.title"
:option="ProductionOption.option"
ref="Productionref"
></chart>
<!-- <div> <!-- <div>
<border3 ref="borderref"> <border3 ref="borderref">
<template v-slot> <template v-slot>
@ -48,13 +40,13 @@ import chart from "@/components/assembly/chart2.vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume"; import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let {t} = useI18n(); let { t } = useI18n();
const store = useEnergyConsumeStore(); const store = useEnergyConsumeStore();
const router = useRouter(); const router = useRouter();
let powerref = ref(); let powerref = ref();
let Productionref = ref(); let Productionref = ref();
let borderref=ref() let borderref = ref()
// let pmref=ref() // let pmref=ref()
let props = defineProps<{ let props = defineProps<{
@ -82,10 +74,10 @@ function reset(val: any) {
const powerBox = (width: any, height: any) => { const powerBox = (width: any, height: any) => {
let a = calcWH(height, width, 1, 2, 0); let a = calcWH(height, width, 1, 2, 0);
//修改高度 //修改高度
powerref.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); Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
// pmref.value.setchartWH(a.oWidth-40,a.oHeight-40) // 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({ let powerOption = reactive({
title: "", title: "",
@ -96,7 +88,7 @@ let powerOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -107,8 +99,8 @@ let powerOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -121,10 +113,10 @@ let powerOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ series: [
], ],
@ -139,7 +131,7 @@ let ProductionOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -150,8 +142,8 @@ let ProductionOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -164,16 +156,16 @@ let ProductionOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ 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() { // async function getpower() {
// let result: any = await getPowerData({ time: 1 }); // 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); // // yields.value.setData(result.data);
// } // }
// } // }
function setcontentData(val){ function setcontentData(val) {
let monthData=[] let monthData = []
let powerMonth=[] let powerMonth = []
for(let key in val.power){ for (let key in val.power) {
monthData.push(key) monthData.push(key)
powerMonth.push(val.power[key]) powerMonth.push(val.power[key])
} }
powerOption.option.xAxis.data=[] powerOption.option.xAxis.data = []
powerOption.option.series=[] powerOption.option.series = []
powerOption.option.xAxis.data=monthData.reverse() powerOption.option.xAxis.data = monthData.reverse()
powerOption.option.series.push({ powerOption.option.series.push({
data: powerMonth.reverse(), data: powerMonth.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'50%', barWidth: '30%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter: function(params){ formatter: function (params) {
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
powerref.value.changeData(powerOption.option) powerref.value.changeData(powerOption.option)
let monthData2=[] let monthData2 = []
let powerMonth2=[] let powerMonth2 = []
for(let key in val.rate){ for (let key in val.rate) {
monthData2.push(key) monthData2.push(key)
powerMonth2.push(val.rate[key]) powerMonth2.push(val.rate[key])
} }
ProductionOption.option.xAxis.data=[] ProductionOption.option.xAxis.data = []
ProductionOption.option.series=[] ProductionOption.option.series = []
ProductionOption.option.xAxis.data=monthData2.reverse() ProductionOption.option.xAxis.data = monthData2.reverse()
ProductionOption.option.series.push({ ProductionOption.option.series.push({
data: powerMonth2.reverse(), data: powerMonth2.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'30%', barWidth: '25%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter: function(params){ formatter: function (params) {
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
Productionref.value.changeData(ProductionOption.option) Productionref.value.changeData(ProductionOption.option)
// pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10}) // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
} }
onMounted(() => { onMounted(() => {
}); });

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

@ -12,16 +12,8 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;"> <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
<chart <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
:title="powerOption.title" <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
:option="powerOption.option"
ref="powerref"
></chart>
<chart
:title="powerOption.title"
:option="powerOption.option"
ref="Productionref"
></chart>
<!-- <div> <!-- <div>
<border3 ref="borderref"> <border3 ref="borderref">
<template v-slot> <template v-slot>
@ -48,7 +40,7 @@ import chart from "@/components/assembly/chart2.vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume"; import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let {t} = useI18n(); let { t } = useI18n();
const store = useEnergyConsumeStore(); const store = useEnergyConsumeStore();
const router = useRouter(); const router = useRouter();
@ -82,10 +74,10 @@ function reset(val: any) {
const powerBox = (width: any, height: any) => { const powerBox = (width: any, height: any) => {
let a = calcWH(height, width, 1, 2, 0); let a = calcWH(height, width, 1, 2, 0);
//修改高度 //修改高度
powerref.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); Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
// pmref.value.setchartWH(a.oWidth-40,a.oHeight-40) // 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({ let powerOption = reactive({
title: "", title: "",
@ -96,7 +88,7 @@ let powerOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -107,8 +99,8 @@ let powerOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -121,10 +113,10 @@ let powerOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ series: [
], ],
@ -139,7 +131,7 @@ let ProductionOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -150,8 +142,8 @@ let ProductionOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -164,16 +156,16 @@ let ProductionOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ 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() { // async function getpower() {
// let result: any = await getPowerData({ time: 1 }); // 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); // // yields.value.setData(result.data);
// } // }
// } // }
function setcontentData(val){ function setcontentData(val) {
let monthData=[] let monthData = []
let powerMonth=[] let powerMonth = []
for(let key in val.power){ for (let key in val.power) {
monthData.push(key) monthData.push(key)
powerMonth.push(val.power[key]) powerMonth.push(val.power[key])
} }
powerOption.option.xAxis.data=[] powerOption.option.xAxis.data = []
powerOption.option.series=[] powerOption.option.series = []
powerOption.option.xAxis.data=monthData.reverse() powerOption.option.xAxis.data = monthData.reverse()
powerOption.option.series.push({ powerOption.option.series.push({
data: powerMonth.reverse(), data: powerMonth.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'30%', barWidth: '30%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter: function(params){ formatter: function (params) {
// console.log(params); // console.log(params);
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
powerref.value.changeData(powerOption.option) powerref.value.changeData(powerOption.option)
let monthData2=[] let monthData2 = []
let powerMonth2=[] let powerMonth2 = []
for(let key in val.rate){ for (let key in val.rate) {
monthData2.push(key) monthData2.push(key)
powerMonth2.push(val.rate[key]) powerMonth2.push(val.rate[key])
} }
ProductionOption.option.xAxis.data=[] ProductionOption.option.xAxis.data = []
ProductionOption.option.series=[] ProductionOption.option.series = []
ProductionOption.option.xAxis.data=monthData2.reverse() ProductionOption.option.xAxis.data = monthData2.reverse()
ProductionOption.option.series.push({ ProductionOption.option.series.push({
data: powerMonth2.reverse(), data: powerMonth2.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'20%', barWidth: '25%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter: function(params){ formatter: function (params) {
// console.log(params); // console.log(params);
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
Productionref.value.changeData(ProductionOption.option) Productionref.value.changeData(ProductionOption.option)
// pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10}) // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
} }
onMounted(() => { onMounted(() => {
}); });

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

@ -12,16 +12,8 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;"> <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
<chart <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
:title="powerOption.title" <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
:option="powerOption.option"
ref="powerref"
></chart>
<chart
:title="powerOption.title"
:option="powerOption.option"
ref="Productionref"
></chart>
<!-- <div> <!-- <div>
<border3 ref="borderref"> <border3 ref="borderref">
<template v-slot> <template v-slot>
@ -48,7 +40,7 @@ import chart from "@/components/assembly/chart2.vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume"; import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let {t} = useI18n(); let { t } = useI18n();
const store = useEnergyConsumeStore(); const store = useEnergyConsumeStore();
const router = useRouter(); const router = useRouter();
@ -82,10 +74,10 @@ function reset(val: any) {
const powerBox = (width: any, height: any) => { const powerBox = (width: any, height: any) => {
let a = calcWH(height, width, 1, 2, 0); let a = calcWH(height, width, 1, 2, 0);
//修改高度 //修改高度
powerref.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); Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
// pmref.value.setchartWH(a.oWidth-40,a.oHeight-40) // 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({ let powerOption = reactive({
title: "", title: "",
@ -96,7 +88,7 @@ let powerOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -107,8 +99,8 @@ let powerOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -121,10 +113,10 @@ let powerOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ series: [
], ],
@ -139,7 +131,7 @@ let ProductionOption = reactive({
color: "rgb(255,255,255,0.9)", color: "rgb(255,255,255,0.9)",
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
axisPointer: { axisPointer: {
@ -150,8 +142,8 @@ let ProductionOption = reactive({
}, },
legend: { legend: {
type: "scroll", type: "scroll",
width:800, width: 800,
right:20, right: 20,
}, },
grid: { grid: {
top: "8%", top: "8%",
@ -164,16 +156,16 @@ let ProductionOption = reactive({
type: 'category', type: 'category',
data: [ data: [
], ],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: [ 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() { // async function getpower() {
// let result: any = await getPowerData({ time: 1 }); // 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); // // yields.value.setData(result.data);
// } // }
// } // }
function setcontentData(val){ function setcontentData(val) {
let monthData=[] let monthData = []
let powerMonth=[] let powerMonth = []
for(let key in val.power){ for (let key in val.power) {
monthData.push(key) monthData.push(key)
powerMonth.push(val.power[key]) powerMonth.push(val.power[key])
} }
powerOption.option.xAxis.data=[] powerOption.option.xAxis.data = []
powerOption.option.series=[] powerOption.option.series = []
powerOption.option.xAxis.data=monthData.reverse() powerOption.option.xAxis.data = monthData.reverse()
powerOption.option.series.push({ powerOption.option.series.push({
data: powerMonth.reverse(), data: powerMonth.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'30%', barWidth: '30%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter:function(params){ formatter: function (params) {
// console.log(params); // console.log(params);
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
powerref.value.changeData(powerOption.option) powerref.value.changeData(powerOption.option)
let monthData2=[] let monthData2 = []
let powerMonth2=[] let powerMonth2 = []
for(let key in val.rate){ for (let key in val.rate) {
monthData2.push(key) monthData2.push(key)
powerMonth2.push(val.rate[key]) powerMonth2.push(val.rate[key])
} }
ProductionOption.option.xAxis.data=[] ProductionOption.option.xAxis.data = []
ProductionOption.option.series=[] ProductionOption.option.series = []
ProductionOption.option.xAxis.data=monthData2.reverse() ProductionOption.option.xAxis.data = monthData2.reverse()
ProductionOption.option.series.push({ ProductionOption.option.series.push({
data: powerMonth2.reverse(), data: powerMonth2.reverse(),
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: 'rgba(180, 180, 180, 0.2)'
}, },
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断 // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
// console.log(params) // console.log(params)
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
// return colors[params.dataIndex]; // return colors[params.dataIndex];
return color[params.dataIndex]; return color[params.dataIndex];
} }
}, },
barWidth:'20%', barWidth: '25%',
label: { label: {
show: true, show: true,
color:'#fff', color: '#fff',
formatter:function(params){ formatter: function (params) {
// console.log(params); // console.log(params);
return params.value.toLocaleString() return params.value.toLocaleString()
}, },
position: "top", position: "top",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
}, },
}) })
Productionref.value.changeData(ProductionOption.option) Productionref.value.changeData(ProductionOption.option)
// pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10}) // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
} }
onMounted(() => { onMounted(() => {
}); });

2
src/views/index.vue
View File

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