screenFront/src/views/generalEnvironmentjixiefenchang/content/right.vue

<template>
  <div class="content-right">
    <el-row  @click="toPmData">
      <el-col :span="8">
        <border2 ref="borderElectriccontrol">
          <template v-slot>
            <pm name="Electriccontrol" :title="t('messages.pmHanJie')" ref="refwelding"></pm>
          </template>
        </border2>
      </el-col>
      <el-col :span="8">
        <border2 ref="borderfinish">
          <template v-slot>
            <pm name="finish" :title="t('messages.pmJingShi')" ref="refornaments"></pm>
          </template>
        </border2>
      </el-col>
      <el-col :span="8">
        <border2 ref="borderlarge">
          <template v-slot>
            <pm name="large" :title="t('messages.pmDaJian')" ref="refstuff"></pm>
          </template>
        </border2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <border2 ref="borderhumiture">
          <template v-slot>
            <humiture ref="Refhumiture"></humiture>
          </template>
        </border2>
      </el-col>
    </el-row>
  </div>
</template>
  
<script setup lang="ts">
import border2 from "@/components/borderBox/border2.vue";
import pm from "./chart/pm.vue"
import humiture from './chart/humiture.vue'
import { calcWH } from "@/components/ts/selfAdaption";
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
// import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/environment";
import { onMounted, ref, watch } from "vue"
import { useRouter } from "vue-router";
import { useSocketStore } from "@/store/moduleSocketjixie";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();

const router = useRouter()
const store = useSocketStore()
let props = defineProps<{
  width: number,
  height: number,
}>()

watch(() => props, (newVal, oldVal) => {
  //监听父组件宽高变化，随时重置本组件尺寸  
  reset(newVal)
}, { immediate: true, deep: true, flush: 'post' })

//边框dom
let borderElectriccontrol = ref()
let borderfinish = ref()
let borderlarge = ref()
let borderhumiture = ref()

//内容dom
let refwelding = ref()
let refornaments = ref()
let refstuff = ref()
let Refhumiture = ref()
function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return

  //重置边框尺寸
  resetBorder()
  //重置盒子尺寸
  threebox(val.width, val.height)
  onebox(val.width, val.height)
}

const resetBorder = () => {
  borderElectriccontrol.value.resetWH()
  borderfinish.value.resetWH()
  borderlarge.value.resetWH()
  borderhumiture.value.resetWH()
}

const threebox = (width: any, height: any) => {
  let a = calcWH(height, width, 3, 3, 0)
  //修改高度
  refwelding.value.setchartWH(a.oWidth, a.oHeight)
  refornaments.value.setchartWH(a.oWidth, a.oHeight)
  refstuff.value.setchartWH(a.oWidth, a.oHeight)
}
const onebox = (width: any, height: any) => {
  let a = calcWH(height, width, 3, 1, 0)
  //修改高度
  Refhumiture.value.setchartWH(a.oWidth, a.oHeight * 2 - 49)
}
watch(
  () => store.humiture,
  (newVal, oldVal) => {
    //动态更新echarts
    // if(oldVal)
    Refhumiture.value.setData(newVal, 2)
  },
  { deep: true, flush: "post" }
);
async function gethumitureData() {
  let pageValue = '6,7,9,10,11'
  let result: any = await getHumitureData({ deptIds: pageValue })

  if (result.code == 200) {
    Refhumiture.value.setData(result.data, 1)
    store.$patch((state) => {
      state.humiture = result.data
    })
  }
}
/**
 * @函数功能: 监听缓存数据数据改变更新视图
 * @出口参数: 
 * @函数备注: 
 */
watch(
  () => store.pm,
  (newVal, oldVal) => {
    //动态更新echarts
    refwelding.value.setData(newVal.welding, 2)
    refornaments.value.setData(newVal.ornaments, 2)
    refstuff.value.setData(newVal.stuff, 2)
  },
  { deep: true, flush: "post" }
);
/**
 * @函数功能: 获取所有空气质量数据
 * @出口参数: 
 * @函数备注: 
 */
async function getPmData() {
  let resulttwo: any = await getPmtwoData()
  let resultten: any = await getPmtenData()
  let data = { welding: { two: null, ten: null }, stuff: { two: null, ten: null }, ornaments: { two: null, ten: null } }
  if (resulttwo) {
    resulttwo.data.forEach(ele => {

      switch (ele.devId) {
        case '083e3900-3435-11ed-a7e1-fd42bca6c8c6':
          data.welding.two = ele.value
          break;
        case 'bcbfb530-88b2-11ed-a926-570995ad0254':
          data.ornaments.two = ele.value
          break;
        case '01336fd0-1fa0-11ed-9223-7db1174970a8':
          data.stuff.two = ele.value
          break;
        default:
          break;
      }
    })
  }

  if (resultten) {
    resultten.data.forEach(ele => {

      switch (ele.devId) {
        case '083e3900-3435-11ed-a7e1-fd42bca6c8c6':
          data.welding.ten = ele.value
          break;
        case 'bcbfb530-88b2-11ed-a926-570995ad0254':
          data.ornaments.ten = ele.value
          break;
        case '01336fd0-1fa0-11ed-9223-7db1174970a8':
          data.stuff.ten = ele.value
          break;
        default:
          break;
      }
    })
  }

  refwelding.value.setData(data.welding, 1)
  refornaments.value.setData(data.ornaments, 1)
  refstuff.value.setData(data.stuff, 1)


  store.$patch((state) => {
    state.pm = data
  })
}

function toPmData() {
  router.push({ path: '/pmData' })
}

onMounted(() => {
  gethumitureData()
  getPmData()
})
</script>
  
<style scope>
.content-right {
  width: 100%;
}
</style>