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

update

Browse Source
This commit is contained in:
hzz 2025-03-03 17:07:19 +08:00
parent 53835d046e
commit 917ad2433f
6 changed files with 216 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/http/config/index.ts Normal file
View File

@ -0,0 +1,6 @@
import {get,post} from "@/utils/http"
// 根据参数键名查询参数值
export function getConfigKey(configKey) {
return get('/system/config/configKey/' + configKey)
}

28
src/store/module/offsite.ts
View File

@ -41,19 +41,27 @@ export const Offsite = defineStore(Names.offsite, {
title: "在线产品",
type: "在线产品",
num: 0,
status:null
status: null
},
{
title: "离线产品",
type: "离线产品",
num: 13,
status:null
status: null
},
],
offsitegatewayStatus:[],
offsitegatewayStatus: [],
devtype: [],
devlist: [],
EquipmentStatusDiagram:[]
EquipmentStatusDiagram: [],
limit: {
temp_bottom: -11,
temp_top: 45,
humidity_bottom: 15,
humidity_top: 75,
dust10: 150,
dust25: 75,
}
};
},
//computed 修改一些值
@ -70,7 +78,7 @@ export const Offsite = defineStore(Names.offsite, {
setcity(val: string[]) {
this.city = val;
},
setdevitem(val: any) {
setdevitem(val: any) {
this.itemDevNum.forEach((ele) => {
val.forEach((res) => {
if (res.name == ele.type) {
@ -101,14 +109,14 @@ export const Offsite = defineStore(Names.offsite, {
});
});
},
setoffsitegatewayStatus(val:any){
this.offsitegatewayStatus=val
setoffsitegatewayStatus(val: any) {
this.offsitegatewayStatus = val
},
changeoffsitegatewayStatus(val:any){
changeoffsitegatewayStatus(val: any) {
},
changeEquipmentStatusDiagram(val:any){
this.EquipmentStatusDiagram=val
changeEquipmentStatusDiagram(val: any) {
this.EquipmentStatusDiagram = val
},
//重置store数据
resetAllData() {

274
src/views/Temp/GetonAgain/chart/humidity.vue
View File

@ -15,7 +15,10 @@
<script setup lang="ts">
import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
import { Offsite } from "@/store/module/offsite";
const { proxy } = getCurrentInstance() as any;
let store = Offsite();
let props = defineProps<{
name: String;
title: any;
@ -29,6 +32,19 @@ const echartsData = reactive<EDataPerson>({
box: null,
},
});
function calculateRatio(min, max, limit) {
if (max === min) {
return 0; // 处理max等于min的情况，返回0
}
let ratio = (limit - min) / (max - min);
ratio = Math.max(0, Math.min(1, ratio)); // 限制比例在0到1之间
ratio = Math.round(ratio * 100) / 100; // 四舍五入到两位小数
return ratio;
}
/**
* @函数功能:
* @param {*} value 需要设置的数据
@ -47,7 +63,7 @@ const setData = (value: any) => {
color: "#fff",
fontSize: 20,
},
top:5
top: 5
},
grid: {
// 让图表占满容器
@ -66,73 +82,73 @@ const setData = (value: any) => {
min: -30,
max: 70,
splitNumber: 10,
progress: {
show: false,
width: 5
},
pointer: {
itemStyle: {
progress: {
show: false,
width: 5
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 5,
color: [
[calculateRatio(-30,70,store.limit.temp_bottom), '#FF6E76'],
[calculateRatio(-30,70,store.limit.temp_top), '#7CFFB2'],
[1, '#FF6E76']
]
}
},
//刻度线
axisTick: {
show: false,
distance: -5,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: -10,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
//表刻度值
axisLabel: {
distance: -20,
color: '#999',
fontSize: 12
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
// width: '10%',
// lineHeight: 5,
// borderRadius: 8,
// offsetCenter: [0, '-15%'],
fontSize: 12,
// fontWeight: 'bolder',
formatter: '{value} °C',
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 5,
color: [
[0.15, '#FF6E76'],
[0.75, '#7CFFB2'],
[1, '#FF6E76']
]
}
},
//刻度线
axisTick: {
show:false,
distance: -5,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: -10,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
//表刻度值
axisLabel: {
distance: -20,
color: '#999',
fontSize: 12
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
// width: '10%',
// lineHeight: 5,
// borderRadius: 8,
// offsetCenter: [0, '-15%'],
fontSize: 12,
// fontWeight: 'bolder',
formatter: '{value} °C',
color: 'inherit'
},
data: [
{
value: value.c
}
]
},
data: [
{
value: value.c
}
]
},
{
type: "gauge",
@ -142,70 +158,70 @@ const setData = (value: any) => {
min: 0,
max: 100,
progress: {
show: false,
width: 5
},
pointer: {
itemStyle: {
show: false,
width: 5
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 10,
color: [
[calculateRatio(0,100,store.limit.humidity_bottom), '#FF6E76'],
[calculateRatio(0,100,store.limit.humidity_top), '#7CFFB2'],
[1, '#FF6E76']
]
}
},
//刻度线
axisTick: {
distance: 0,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: 5,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
axisLabel: {
distance: -30,
color: '#999',
fontSize: 20
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
offsetCenter: [0, '15%'],
fontSize: 15,
formatter: '{value} %RH',
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 10,
color: [
[0.15, '#FF6E76'],
[0.75, '#7CFFB2'],
[1, '#FF6E76']
]
}
},
//刻度线
axisTick: {
distance: 0,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: 5,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
axisLabel: {
distance: -30,
color: '#999',
fontSize: 20
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
offsetCenter: [0, '15%'],
fontSize: 15,
formatter: '{value} %RH',
color: 'inherit'
},
data: [
{
value: value.h
}
]
},
data: [
{
value: value.h
}
]
},
],
};
change(echartsData.humiture);
change(echartsData.humiture);
};
const change = (item: EDataPersonItem) => {
@ -227,7 +243,7 @@ const updata = (item: EDataPersonItem) => {
function setchartWH(width: any, height: any) {
echartsData.humiture!.div = humiture.value;
humiture.value.style.height = height + "px";
humiture.value.style.width = width + "px";
humiture.value.style.width = width + "px";
if (echartsData.humiture.box) {
echartsData.humiture.box.resize();
}
@ -244,7 +260,7 @@ defineExpose({
</script>
<style scope>
.content-small{
.content-small {
margin-right: 3px;
}
</style>

20
src/views/Temp/GetonAgain/chart/pm.vue
View File

@ -14,13 +14,28 @@
<script setup lang="ts">
import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
import { Offsite } from "@/store/module/offsite";
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
const { proxy } = getCurrentInstance() as any;
let store = Offsite();
let props = defineProps<{
name: String;
title: any;
}>();
let humiture = ref();
function calculateRatio(min, max, limit) {
if (max === min) {
return 0; // 处理max等于min的情况，返回0
}
let ratio = (limit - min) / (max - min);
ratio = Math.max(0, Math.min(1, ratio)); // 限制比例在0到1之间
ratio = Math.round(ratio * 100) / 100; // 四舍五入到两位小数
return ratio;
}
const echartsData = reactive<EDataPerson>({
humiture: {
div: null,
@ -37,6 +52,9 @@ const echartsData = reactive<EDataPerson>({
* @函数备注:
*/
const setData = (value: any) => {
let pmmax = props.title=="PM10"?200:100;
let pmratemax = props.title=="PM10"?store.limit.dust10:store.limit.dust25;
echartsData.humiture!.div = humiture.value;
echartsData.humiture!.title = props.title;
echartsData.humiture!.data = {
@ -70,7 +88,7 @@ const setData = (value: any) => {
width: 10,
color: [
[0.35, "#7CFFB2"],
[0.75, "#FDDD60"],
[calculateRatio(0,pmmax,pmratemax), "#FDDD60"],
[1, "#FF6E76"],
],
},

28
src/views/Temp/GetonAgain/index.vue
View File

@ -64,6 +64,7 @@ import { calcWH } from "@/components/ts/selfAdaption";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { Offsite } from "@/store/module/offsite";
import { getSensorByDept } from "@/http/PaintShopView/index";
import { getConfigKey } from "@/http/config/index";
import bottom from "./bottom.vue";
import right from "./right.vue";
import top from "./top.vue";
@ -110,6 +111,32 @@ async function getSensorByDeptfun() {
rightref.value.setcontentData(result.data);
}
}
function getConfigKeyFun() {
let axios_arr = [
getConfigKey("temp_bottom"),
getConfigKey("temp_top"),
getConfigKey("humidity_bottom"),
getConfigKey("humidity_top"),
getConfigKey("dust10"),
getConfigKey("dust25"),
]
Promise.all(axios_arr).then((res:any) => {
let limit = {
temp_bottom: res[0].msg,
temp_top: res[1].msg,
humidity_bottom: res[2].msg,
humidity_top: res[3].msg,
dust10: res[4].msg,
dust25: res[5].msg,
}
store.limit = limit;
});
}
function getWebsocket(val) {
// headerref.value.HeadergetWebsocket(val)
try {
@ -147,6 +174,7 @@ onMounted(() => {
WH(contentBox);
}, 1000);
});
getConfigKeyFun();
getSensorByDeptfun();
connectWebsocket(null, null, getWebsocket, errWebsocket);
});

1
src/views/Temp/GetonAgain/right.vue
View File

@ -50,7 +50,6 @@
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";