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

Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront into dismap

Browse Source
This commit is contained in:
hzz 2023-05-19 17:55:03 +08:00
commit f93821e318
13 changed files with 208 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/store/moduleSocket.ts
View File

@ -1,5 +1,5 @@
/*
* @FilePath: \wwwd:\code\screenFront\src\store\moduleSocket.ts
* @FilePath: \screenFront\src\store\moduleSocket.ts
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-06 15:58:13
@ -341,6 +341,7 @@ export const useSocketStore = defineStore(Names.socket, {
this.newVerticalNum[pIndex].value[cIndex].time = null
}
this.newVerticalNum[pIndex].value[cIndex].val = val.data.val
this.newVerticalNum[pIndex].value[cIndex].status = true
}
}
}

8
src/views/PaintShopView/View1/top.vue
View File

@ -253,16 +253,16 @@ let ductOption = reactive({
let temp_humi_index = 0
function setcontentData(val) {
let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O };
return { name: item.name, val: item.CH2O,status:item.status };
});
let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC };
return { name: item.name, val: item.TVOC,status:item.status };
});
let Smoke = val.Smoke.map((item) => {
return { name: item.name, val: item.data };
return { name: item.name, val: item.data,status:item.status };
});
let noise = val.noise.map((item) => {
return { name: item.name, val: item.data };
return { name: item.name, val: item.data,status:item.status };
});
verticalNum3.value.setData(val.FIRE, 'icon-ranqi', 0, "")
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")

33
src/views/PaintShopView/components/verticalNum.vue
View File

@ -16,11 +16,12 @@
<h5 v-if="value.unit">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
<h5 v-else>&nbsp; </h5>
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
<i :class="+item.val > +value.quota
<!-- <i :class="+item.val > +value.quota
? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
"></i>
<p class="unit" v-if="value.unit">
"></i> -->
<i :class="['iconfont','iconbig-size',icon,iconcolor]"></i>
<p class="unit" v-if="value.unit&&item.status">
<p class="num">{{ item.val }}&nbsp;</p>
<span>{{ value.unit }}</span>
</p>
@ -48,8 +49,22 @@ let props = defineProps<{
}>();
let i = ref(0)
let item = computed(() => {
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
console.log(value.data[i.value]);
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0,"status":false};
});
let icon = computed(() => {
return value.iconname
});
let iconcolor = computed(() => {
console.log(value.data[i.value]);
//开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
if(value.data[i.value]){
return value.data[i.value].status? +value.data[i.value].val > +value.quota ? "icon-red" : "icon-blue":"icon-grey";
}else{
return "icon-grey"
}
});
let keynum = ref(0);
const value = reactive<any>({
@ -91,6 +106,7 @@ const setData = (
return {
name: item.name.split("车间")[1] || item.name,
val: item.val,
status:item.status
};
});
value.data = temp_data;
@ -164,7 +180,12 @@ defineExpose({
/* position: relative; */
/* top: -15px; */
}
.icon-grey {
color: rgb(167, 166, 189);
font-size: 100px;
/* position: relative; */
/* top: -15px; */
}
.iconsmall-size {
font-size: 20px;
}

6
src/views/PaintShopView/finishView/top.vue
View File

@ -274,13 +274,13 @@ let temp_humi_index = 0
console.log(val);
let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O };
return { name: item.name, val: item.CH2O,status:item.status };
});
let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC };
return { name: item.name, val: item.TVOC,status:item.status };
});
let noise = val.noise.map((item) => {
return { name: item.name, val: item.data };
return { name: item.name, val: item.data,status:item.status };
});
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")

6
src/views/PaintShopView/machiningView/top.vue
View File

@ -272,13 +272,13 @@ let temp_humi_index = 0
function setcontentData(val){
let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O };
return { name: item.name, val: item.CH2O,status:item.status };
});
let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC };
return { name: item.name, val: item.TVOC,status:item.status };
});
let noise = val.noise.map((item) => {
return { name: item.name, val: item.data };
return { name: item.name, val: item.data,status:item.status };
});
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")

8
src/views/PaintShopView/stuffView/top.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \screenFront\src\views\PaintShopView\stuffView\top.vue
* @FilePath: \gitscreenFront\src\views\PaintShopView\stuffView\top.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-13 14:43:28
@ -272,13 +272,13 @@ function setcontentData(val) {
clearInterval(temp_humi_timer)
clearInterval(pm_timer)
let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O };
return { name: item.name, val: item.CH2O,status:item.status };
});
let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC };
return { name: item.name, val: item.TVOC,status:item.status };
});
let noise = val.noise.map((item) => {
return { name: item.name, val: item.data };
return { name: item.name, val: item.data,status:item.status };
});
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")

8
src/views/PaintShopView/weldView/top.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \screenFront\src\views\PaintShopView\weldView\top.vue
* @FilePath: \gitscreenFront\src\views\PaintShopView\weldView\top.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-13 14:43:28
@ -271,13 +271,13 @@ function setcontentData(val) {
clearInterval(pm_timer)
let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O };
return { name: item.name, val: item.CH2O,status:item.status };
});
let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC };
return { name: item.name, val: item.TVOC,status:item.status };
});
let noise = val.noise.map((item) => {
return { name: item.name, val: item.data };
return { name: item.name, val: item.data,status:item.status };
});
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")

16
src/views/electronicControl/index.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControl\index.vue
* @FilePath: \screenFront\src\views\electronicControl\index.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-04-11 13:50:05
@ -107,24 +107,10 @@ function checkImgExists(imgurl) {
})
}
onMounted(() => {
// deviceCountsSecondaryOfOutPlantDatafun()
// deviceTypeCountsSecondaryOfOutPlantDatafun()
// deviceStatusCountsSecondaryOfOutPlantDatafun()
// secondaryOutPlantDatafun()
getdata()
let contentBox = Acontent.value
// let Timedombox=Timedom.value
window.document.title = t('messages.electronicControl')
WH(contentBox)
// window.addEventListener('resize', () => {
// if (time.value) {
// clearTimeout(time.value)
// time.value = null
// }
// time.value = setTimeout(() => {
// WH(contentBox)
// }, 1000);
// })
})
onUnmounted(() => {
clearTimeout(time)

268
src/views/electronicControlAmbient/chart/humidity.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\humidity.vue
* @FilePath: \screenFront\src\views\electronicControlAmbient\chart\humidity.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-10 13:27:36
@ -47,7 +47,7 @@ const setData = (value: any) => {
color: "#fff",
fontSize: 20,
},
top:5
top: 5
},
grid: {
// 让图表占满容器
@ -62,150 +62,150 @@ const setData = (value: any) => {
center: ["50%", "85%"],
startAngle: 190,
endAngle: -10,
min: 0,
max: 100,
radius: "50%",
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: 10,
color: [
[0.4, '#FF6E76'],
[0.7, '#7CFFB2'],
[1, '#1089E7']
]
}
},
//刻度线
axisTick: {
show: false,
distance: -5,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: 5,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
//表刻度值
axisLabel: {
distance: 15,
color: '#999',
fontSize: 10
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
// width: '10%',
// lineHeight: 5,
// borderRadius: 8,
offsetCenter: [0, '25%'],
fontSize: 15,
// fontWeight: 'bolder',
formatter: '{value} %RH',
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 10,
color: [
[0.15, '#FF6E76'],
[0.75, '#7CFFB2'],
[1, '#FF6E76']
]
}
},
//刻度线
axisTick: {
show:false,
distance: -5,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: 5,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
//表刻度值
axisLabel: {
distance: 15,
color: '#999',
fontSize: 10
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
// width: '10%',
// lineHeight: 5,
// borderRadius: 8,
offsetCenter: [0, '25%'],
fontSize: 15,
// fontWeight: 'bolder',
formatter: '{value} °C',
color: 'inherit'
},
data: [
{
value: value.c
}
]
},
data: [
{
value: value.h
}
]
},
{
type: "gauge",
center: ["50%", "50%"],
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
min: -30,
max: 70,
progress: {
show: false,
width: 5
},
pointer: {
itemStyle: {
show: false,
width: 5
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 10,
color: [
[0.46, '#1089E7'],
[0.58, '#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: 15,
color: '#999',
fontSize: 12
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
offsetCenter: [0, '15%'],
fontSize: 20,
formatter: '{value} °C',
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: 15,
color: '#999',
fontSize: 12
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
offsetCenter: [0, '15%'],
fontSize: 20,
formatter: '{value} %RH',
color: 'inherit'
},
data: [
{
value: value.h
}
]
},
data: [
{
value: value.c
}
]
},
],
};
change(echartsData.humiture);
change(echartsData.humiture);
};
const change = (item: EDataPersonItem) => {
@ -227,7 +227,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 +244,7 @@ defineExpose({
</script>
<style scope>
.content-small{
.content-small {
margin-right: 3px;
}
</style>

25
src/views/electronicControlAmbient/chart/verticalNum.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
* @FilePath: \screenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-13 08:22:35
@ -16,11 +16,8 @@
<h5 v-if="value.unit">{{
`${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
<i :class="+item.val > +value.quota
? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
"></i>
<p class="unit" v-if="value.unit">
<i :class="['iconfont',value.iconname,iconColor,'iconbig-size']"></i>
<p class="unit" v-if="value.unit&&item.status">
<p class="num">{{ item.val }}</p>
<span>{{ value.unit }}</span>
</p>
@ -44,8 +41,11 @@ let props = defineProps<{
}>();
let i = ref(0)
let item = computed(() => {
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0,status:false };
});
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
let iconColor = computed(() => {
return value.data[i.value]?.status?(value.data[i.value].val > value.quota ? "icon-red" : "icon-blue"):"icon-grey";
});
let keynum = ref(0);
const value = reactive<any>({
@ -139,8 +139,11 @@ p {
color: #fff;
}
.icon-red {
.iconbig-size {
font-size: 100px;
}
.icon-red {
color: #E43961;
animation: redstart 2s infinite;
/* position: relative; */
@ -148,11 +151,15 @@ p {
}
.icon-blue {
font-size: 100px;
color: #20AEC5;
/* position: relative; */
/* top: -15px; */
}
.icon-grey {
color: rgb(167, 166, 189);
/* position: relative; */
/* top: -15px; */
}
.iconsmall-size {
font-size: 20px;

5
src/views/electronicControlAmbient/index.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\index.vue
* @FilePath: \screenFront\src\views\electronicControlAmbient\index.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-04-11 13:50:05
@ -113,7 +113,8 @@ function getWebsocket(val) {
let data = JSON.parse(val);
if (data.type == "electronicView") {
// store.changenoise(data.msg);
console.log(data.msg, "电控监测");
topref.value.setcontentData(data.msg);
bottomref.value.setcontentData(data.msg);
rightref.value.setcontentData(data.msg);

10
src/views/electronicControlAmbient/top.vue
View File

@ -1,5 +1,5 @@
<!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\top.vue
* @FilePath: \screenFront\src\views\electronicControlAmbient\top.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-13 14:43:28
@ -139,7 +139,7 @@ let ductOption = reactive({
lineStyle: {
width: 8,
color: [
[0.6, "#7CFFB2"],
[0.4, "#7CFFB2"],
[1, "#FF6E76"],
],
},
@ -200,7 +200,7 @@ let ductOption = reactive({
lineStyle: {
width: 10,
color: [
[0.6, "#7CFFB2"],
[0.4, "#7CFFB2"],
[1, "#FF6E76"],
],
},
@ -261,8 +261,10 @@ let ductOption = reactive({
let temp_humi_index = 0
function setcontentData(val){
let noise = val.noise.map((item) => {
return { name: item.name, val: item.data };
return { name: item.name, val: item.data,status:item.status||false };
});
console.log(noise);
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")

2
src/views/realtimeSecurity/content/chart/verticalNumLoop.vue
View File

@ -66,7 +66,7 @@ let item:any = computed(() => {
return props.value[i.value];
});
let iconcolor = computed(() => {
return props.value[i.value].status?item.val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
return props.value[i.value].status?props.value[i.value].val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
});
let props = defineProps<{
title: string;