screenFront/src/views/realtimeSecurity/content/content.vue

<template>
  <div>
    <!-- <div class="topTip">
    <toptip ref="toptip1"></toptip>
  </div> -->
    <div style="display: flex;justify-content: space-between;align-items: center;">
      <div
        style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
        v-for="item in store.newVerticalNum">
        <verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
          :limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
      </div>
    </div>
    <div>
      <el-row>
        <el-col :span="6">
          <pressure ref="perssure1" name="east" :title="t('messages.EastPumpPressure_Mpa')"></pressure>
        </el-col>
        <el-col :span="6">
          <pressure ref="perssure2" name="west" :title="t('messages.WestPumpPressure_Mpa')"></pressure>
        </el-col>
        <el-col :span="12">
          <pipe ref="pipe1" :title="t('messages.PipelinePressure_Mpa')"></pipe>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import pressure from "./chart/pressure.vue"
import pipe from "./chart/pipe.vue"
// import toptip from "./chart/toptip.vue"
import { onMounted, reactive, ref, watch } from "vue"
import { calcWH } from "@/components/ts/selfAdaption";
import verticalNumLoop from './chart/verticalNumLoop.vue'
// import { getPressureData,getSafeWarningData } from "@/http/environment";
import { getPressureData, getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
import { useSocketStore } from "@/store/moduleSocket"
import { useRouter } from "vue-router"
import { gettime, clacendTime } from "@/utils/time"
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let router = useRouter()
const store = useSocketStore()
let props = defineProps<{
  width: number,
  height: number,
}>()
watch(() => props, (newVal, oldVal) => {
  //监听父组件宽高变化，随时重置本组件尺寸  

  reset(newVal)
}, { immediate: true, deep: true, flush: 'post' })

// let toptip1=ref()
let perssure1 = ref()
let perssure2 = ref()
let pipe1 = ref()

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 },
}

/**
 * 跳转到趋势图
 */
function gotoTrendChart(value, unit) {
  let ids = value.map((item) => item.devId).toString();
  ElMessageBox.confirm(
    '即将跳转到趋势图页面，是否继续？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(() => {
      router.push({ path: '/TrendChart', query: { ids: ids, unit: unit } })
    })
    .catch(() => {

    })

}


function reset(val: any) {
  //宽高为0时跳出该方法

  if (!val.width && !val.height) return

  //重置盒子尺寸
  PressureBox(val.width, val.height)
  pipeBox(val.width, val.height)
  verticalNumBox(val.width, val.height)
  // toptip1.value.setchartWH()
}
const PressureBox = (width: any, height: any) => {
  let a = calcWH(height, width, 3, 4, 0)
  //修改高度
  perssure1.value.setchartWH(a.oWidth - 50, a.oHeight * 2)
  perssure2.value.setchartWH(a.oWidth - 50, a.oHeight * 2)
}

const pipeBox = (width: any, height: any) => {
  let a = calcWH(height, width, 3, 2, 0)
  //修改高度
  // pipe1.value.setchartWH(a.oWidth-50,a.oHeight*2)
  pipe1.value.setchartWH(a.oWidth - 50, a.oHeight * 2)
}

const verticalNumBox = (width: any, height: any) => {
  let a = calcWH(height, width, 3, 5, 0)
  a.oHeight = a.oHeight - 40
}

watch(
  () => store.Pressure,
  (newVal, oldVal) => {
    //动态更新echarts
    //泵房气压
    perssure1.value.setData(newVal.east, 2)
    perssure2.value.setData(newVal.west, 2)
  },
  { deep: true, flush: "post" }
);
async function getPressureDatafun() {
  let result: any = await getPressureData()

  if (result.code == 200) {
    perssure1.value.setData(result.data.east, 1)
    perssure2.value.setData(result.data.west, 1)
    store.changePressure({ east: result.data.east, west: result.data.west })
  }
}
let vertical = reactive([])
async function getSafeWarningDatafun() {
  let result: any = await getSafeWarningData()
  if (result.code == 200) {
    let datetime = new Date().getTime();
    let handle_vertical = result.data.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
      }
    })

    //console.log(result.data,'安全预警----------');
    store.setNewVerticalNum(handle_vertical)
  }
}
watch(
  () => store.pipe,
  (newVal, oldVal) => {
    //动态更新echarts
    //泵房气压
    pipe1.value.setData(newVal, 2)
  },
  { deep: true, flush: "post" }
);
async function getpipeDatafun() {
  let result: any = await getpipeData({})

  if (result.code == 200) {
    //设置组件样式
    pipe1.value.setData({ listData: result.data.listData, top: result.data.top }, 1)

    //将数据存入pinia
    store.changePipe({ listData: result.data.listData, top: result.data.top })
  }
}

onMounted(() => {
  getPressureDatafun()
  getSafeWarningDatafun()
  getpipeDatafun()
})

</script>

<style scoped>
.topTip {
  width: 100%;
  height: 150px;
}</style>