update
This commit is contained in:
hzz
parent
5a7375fb91
commit
b6521ac908
@ -16,7 +16,15 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-box"></div>
|
<div class="bottom-box">
|
||||||
|
<power style="width: 33%;height: 100%;box-sizing: border-box;" :title="powerTitle" :series="powerSeries"
|
||||||
|
:listName="listName">
|
||||||
|
</power>
|
||||||
|
<div style="width: 33%;height: 100%;background: #bfb;">
|
||||||
|
</div>
|
||||||
|
<div style="width: 33%;height: 100%;background: #bfc;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -25,6 +33,7 @@
|
|||||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||||
import header2 from '@/components/headerBox/header2.vue'
|
import header2 from '@/components/headerBox/header2.vue'
|
||||||
import verticalNumLoop from './components/verticalNumLoop.vue'
|
import verticalNumLoop from './components/verticalNumLoop.vue'
|
||||||
|
import power from './components/power.vue';
|
||||||
import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
|
import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
|
||||||
import { getnoiseData } from "@/http/generalEnvironment";
|
import { getnoiseData } from "@/http/generalEnvironment";
|
||||||
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
||||||
@ -59,9 +68,15 @@ const verticalType = {
|
|||||||
'FIRE': { icon: 'icon-weibiaoti1', title: t('messages.flameDetection'), unit: null },
|
'FIRE': { icon: 'icon-weibiaoti1', title: t('messages.flameDetection'), unit: null },
|
||||||
'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
|
'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
|
||||||
}
|
}
|
||||||
|
/**用电量 */
|
||||||
|
let listName = ref<string[]>()
|
||||||
|
let powerTitle = t('messages.Powerto2023')
|
||||||
|
let powerSeries = ref()
|
||||||
|
|
||||||
let headerref=ref()
|
|
||||||
|
let headerref = ref()
|
||||||
let verticalList: any[] = reactive([])
|
let verticalList: any[] = reactive([])
|
||||||
|
//获取传感器实时数据
|
||||||
async function getSensorData() {
|
async function getSensorData() {
|
||||||
let list = []
|
let list = []
|
||||||
const res: any = await Promise.all([
|
const res: any = await Promise.all([
|
||||||
@ -114,60 +129,113 @@ async function getSensorData() {
|
|||||||
store.setNewVerticalNum(handle_vertical)
|
store.setNewVerticalNum(handle_vertical)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function getPower_data() {
|
||||||
|
const { data }: any = await getPowerData({ time: 1 })
|
||||||
|
listName.value = data.name
|
||||||
|
|
||||||
|
|
||||||
|
let series = []
|
||||||
|
data.listData.forEach(res => {
|
||||||
|
if (res.years == 2023) {
|
||||||
|
for (let key in res.month) {
|
||||||
|
series.push({
|
||||||
|
name: key + '月',
|
||||||
|
type: 'bar',
|
||||||
|
stack: res.years,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'coordinateSystem',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: function (value, index) {
|
||||||
|
return value.value.toLocaleString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: res.month[key]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//data0用于初始化计算的数据
|
||||||
|
let data0 = []
|
||||||
|
|
||||||
|
for (let i = 1; i <= data.name.length; i++) {
|
||||||
|
data0.push(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
series.push(
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'bar',
|
||||||
|
data: data0,
|
||||||
|
color: '#bbf',
|
||||||
|
stack: data.listData[1].years,
|
||||||
|
// barWidth: 30,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
powerSeries.value = series
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
function getWebsocket(val) {
|
function getWebsocket(val) {
|
||||||
headerref.value.HeadergetWebsocket(val)
|
headerref.value.HeadergetWebsocket(val)
|
||||||
try{
|
try {
|
||||||
let data = JSON.parse(val);
|
let data = JSON.parse(val);
|
||||||
|
|
||||||
//精饰车间燃气监测
|
//精饰车间燃气监测
|
||||||
if (data.type == "paintingGas") {
|
if (data.type == "paintingGas") {
|
||||||
let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value,devId:data.msg.devId}
|
let verticalData = { name: data.msg.devName, val: data.msg.paintingGas.value, devId: data.msg.devId }
|
||||||
store.changeNewVerticalNum({type:'Methane',data:verticalData})
|
store.changeNewVerticalNum({ type: 'Methane', data: verticalData })
|
||||||
|
|
||||||
}
|
}
|
||||||
//甲醛TVOC
|
//甲醛TVOC
|
||||||
if (data.type == "TVOC_CH2O") {
|
if (data.type == "TVOC_CH2O") {
|
||||||
let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value,devId:data.msg.TVOC.devId}
|
let verticalData_TVOC = { name: data.msg.TVOC.name, val: data.msg.TVOC.value, devId: data.msg.TVOC.devId }
|
||||||
store.changeNewVerticalNum({type:'TVOC',data:verticalData_TVOC})
|
store.changeNewVerticalNum({ type: 'TVOC', data: verticalData_TVOC })
|
||||||
let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value,devId:data.msg.CH2O.devId}
|
let verticalData_CH2O = { name: data.msg.CH2O.name, val: data.msg.CH2O.value, devId: data.msg.CH2O.devId }
|
||||||
store.changeNewVerticalNum({type:'CH2O',data:verticalData_CH2O})
|
store.changeNewVerticalNum({ type: 'CH2O', data: verticalData_CH2O })
|
||||||
|
|
||||||
}
|
}
|
||||||
//火焰传感器？
|
//火焰传感器？
|
||||||
if (data.type == "flame") {
|
if (data.type == "flame") {
|
||||||
let verticalData = {name:data.msg.devName,val:data.msg.flame.value,devId:data.msg.devId}
|
let verticalData = { name: data.msg.devName, val: data.msg.flame.value, devId: data.msg.devId }
|
||||||
store.changeNewVerticalNum({type:'FIRE',data:verticalData})
|
store.changeNewVerticalNum({ type: 'FIRE', data: verticalData })
|
||||||
|
|
||||||
}
|
}
|
||||||
//精饰车间烟雾传感器
|
//精饰车间烟雾传感器
|
||||||
if (data.type == "smoke") {
|
if (data.type == "smoke") {
|
||||||
let verticalData = {name:data.msg.devName,val:data.msg.smoke.value,devId:data.msg.devId}
|
let verticalData = { name: data.msg.devName, val: data.msg.smoke.value, devId: data.msg.devId }
|
||||||
store.changeNewVerticalNum({type:'Smoke',data:verticalData})
|
store.changeNewVerticalNum({ type: 'Smoke', data: verticalData })
|
||||||
// console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
|
// console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
|
||||||
}
|
}
|
||||||
// if (data.type == "airPressure") {
|
// if (data.type == "airPressure") {
|
||||||
// store.changePressure(data.msg);
|
// store.changePressure(data.msg);
|
||||||
// }
|
// }
|
||||||
// if (data.type == "waterPressure") {
|
// if (data.type == "waterPressure") {
|
||||||
// store.changePipe(data.msg);
|
// store.changePipe(data.msg);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
}catch(err){
|
} catch (err) {
|
||||||
console.log(err,"报错了大哥",console.log(val)
|
console.log(err, "报错了大哥", console.log(val)
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function errWebsocket(val) {
|
function errWebsocket(val) {
|
||||||
headerref.value?headerref.value.HeadererrWebsocket(val):''
|
headerref.value ? headerref.value.HeadererrWebsocket(val) : ''
|
||||||
// console.log(val);
|
// console.log(val);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getSensorData()
|
getSensorData()
|
||||||
|
getPower_data()
|
||||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -177,12 +245,13 @@ onMounted(() => {
|
|||||||
width: 1920px;
|
width: 1920px;
|
||||||
color: #20aec5;
|
color: #20aec5;
|
||||||
background-color: #100c2a;
|
background-color: #100c2a;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.content {
|
.content {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 980px;
|
height: 930px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -191,7 +260,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.top-box {
|
.top-box {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 300px;
|
height: 290px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -199,7 +268,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.bottom-box {
|
.bottom-box {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 670px;
|
height: 630px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user