screenFront/src/views/generalEnvironmentMechanical/index.vue

<template>
    <div :class="$style['container']">
        <div class="header">
            <div class="title">
                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.generalEnvironment')"
                    :titleTip="titleTip" :typeFun="['AbnormalData', 'time']"
                    :alarmType="['noiseAlarm', 'temphuim', 'dustAlarm', 'saving']"></header2>
            </div>
        </div>
        <div class="content" ref="Acontent">
            <div class="top-box">
                <div style="width: 12%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
                    v-for="item in store.newVerticalNum">
                    <verticalNumLoop :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit"
                        :value="item.value"></verticalNumLoop>
                </div>

            </div>
            <div class="bottom-box">
                <div style="width: 33%;height: 100%;">
                    <border13>
                        <power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value"></power>
                    </border13>
                </div>
                <div style="width: 33%;height: 100%;">
                    <border13>
                        <pipe :title="t('messages.PipelinePressure_Mpa')" :value="pipeData"></pipe>
                    </border13>
                </div>
                <div style="width: 33%;height: 100%;">
                    <border13>
                        <gas :title="t('messages.gashistory')" :value="gasData"></gas>
                    </border13>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import header2 from '@/components/headerBox/header2.vue'
import verticalNumLoop from './components/verticalNumLoop.vue'
import power from './components/power2023.vue';
import gas from './components/gas.vue'
import pipe from './components/pipe.vue'
import border13 from '@/components/border/Border13.vue'
import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
import { getnoiseData } from "@/http/generalEnvironment";
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
import { getPowerData,getconsumeDetail } from "@/http/energyConsume";
import { useSocketStore } from "@/store/moduleSocketMechanics";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { gettime, clacendTime } from "@/utils/time"

import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const store = useSocketStore();
let deptIds = '6,7,9,10,11'
let titleTip = [
    {
        color: "#E43961",
        name: t('messages.abnormal'),
    },
    {
        color: "#20AEC5",
        name: t('messages.NoAbnormal'),
    },
    {
        color: "#A7A6BD",
        name: t('messages.disconnection'),
    },
];
const verticalType = {
    'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
    'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: "ppm" },
    'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
    'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },
    'FIRE': { icon: 'icon-weibiaoti1', title: t('messages.flameDetection'), unit: null },
    'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
}
/**用电量 */
let powerData=ref({value:{name:[]},seriesVal:[],title:t('messages.Powerto2023')})

let gasData=ref(0)

let pipeData=ref({listData:[],top:0})

let headerref = ref()
let verticalList: any[] = reactive([])
//获取传感器实时数据
async function getSensorData() {
    let list = []
    const res: any = await Promise.all([
        getnoiseData({ deptIds }),
        getSafeWarningData({ deptIds }),
    ])
    let noiseData = {
        limit: res[0].data.top.value,
        type: 'noise',
        value: res[0].data.listData.map((item: any) => {
            return {
                devId: item.devId,
                name: item.name + '噪音监测',
                type: 'noise',
                status: true,
                val: item.value,
            }
        })
    }
    list.push(noiseData);
    list.push(...res[1].data)

    let datetime = new Date().getTime();
    let handle_vertical = list.map((item: any) => {
        item.value.forEach(element => {
            if (element.name.includes("TVOC")) {
                element.name = element.name.split('TVOC')[0] + verticalType[item.type].title
            }

            if (element.val > item.limit) {
                element.date = gettime(element.ts),
                    element.time = element.ts || datetime
                element.continuous = clacendTime(datetime, element.ts || datetime)
            } else {
                element.date = null
                element.time = null
                element.continuous = null
            }
        });
        return {
            type: item.type,
            icon: verticalType[item.type].icon,
            title: verticalType[item.type].title,
            limit: item.limit,
            unit: verticalType[item.type].unit,
            value: item.value
        }
    })

    store.setNewVerticalNum(handle_vertical)
}

async function getPower_data() {
  let result: any = await getPowerData({ time: 1 });

  if (result.code == 200) {
    let series = [];
    result.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 <= result.data.name.length; i++) {
    data0.push(0);
  }

  series.push({
    name: "",
    type: "bar",
    data: data0,
    color: "#bbf",
    stack: result.data.listData[1].years,
    // barWidth: 30,
    label: {
      show: true,

      position: "right",
      color: "#fff",
    },
  });

    powerData.value.value=result.data
    powerData.value.seriesVal=series
    powerData.value.title='机械分厂用电量'
  }
}
async function getconsumeDetailfun(){
  let result:any = await getconsumeDetail()
  console.log(gasData.value);
  if(result.code==200){
    result.data.forEach(res=>{
        if(res.deptName=='喷漆车间' && res.type=='GasDetail'){
            gasData.value=res.usageNum
        }
    })

    console.log(gasData.value);
    
  }
}
async function getpipeDatafun() {
  let pageValue = '6,7,9,10,11'
  let result: any = await getpipeData({ deptIds: pageValue })

  if (result.code == 200) {
    pipeData.value.listData=result.data.listData
    pipeData.value.top=result.data.top
  }
}

function getWebsocket(val) {
    headerref.value.HeadergetWebsocket(val)
    try {
        let data = JSON.parse(val);

        //精饰车间燃气监测
        if (data.type == "paintingGas") {
            let verticalData = { name: data.msg.devName, val: data.msg.paintingGas.value, devId: data.msg.devId }
            store.changeNewVerticalNum({ type: 'Methane', data: verticalData })

        }
        //甲醛TVOC
        if (data.type == "TVOC_CH2O") {
            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 })
            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 })

        }
        //火焰传感器？
        if (data.type == "flame") {
            let verticalData = { name: data.msg.devName, val: data.msg.flame.value, devId: data.msg.devId }
            store.changeNewVerticalNum({ type: 'FIRE', data: verticalData })

        }
        //精饰车间烟雾传感器
        if (data.type == "smoke") {
            let verticalData = { name: data.msg.devName, val: data.msg.smoke.value, devId: data.msg.devId }
            store.changeNewVerticalNum({ type: 'Smoke', data: verticalData })
            // console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
        }
        //   if (data.type == "airPressure") {
        //     store.changePressure(data.msg);
        //   }
        //   if (data.type == "waterPressure") {
        //     store.changePipe(data.msg);
        //   }

    } catch (err) {
        console.log(err, "报错了大哥", console.log(val)
        );

    }
}
function errWebsocket(val) {
    headerref.value ? headerref.value.HeadererrWebsocket(val) : ''
    // console.log(val);
}


onMounted(() => {
    getSensorData()
    getPower_data()
    getpipeDatafun()
    getconsumeDetailfun()
    connectWebsocket(null, null, getWebsocket, errWebsocket);
})
onUnmounted(() => {
    closeWebsocket();
})
</script>

<style module>
.container {
    height: 1080px;
    width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
    box-sizing: border-box;
}
</style>
<style scoped>
.content {
    width: 1920px;
    height: 930px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.top-box {
    width: 1920px;
    height: 290px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-box {
    width: 1920px;
    height: 630px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #afb; */
}
</style>