screenFront/src/views/PaintShopView/weldView/top.vue

<!--
 * @FilePath: \screenFront\src\views\PaintShopView\weldView\top.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 14:43:28
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
          <!-- <verticalNum ref="verticalNum3" :title="'燃气检测'"></verticalNum> -->
          <!-- <verticalNum ref="verticalNum5" :title="'烟雾检测'"></verticalNum> -->
          <verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
          <verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
          <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
          <div>
            <border3 ref="borderref">
              <template v-slot>
                <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
              </template>
            </border3>
          </div>
          <chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
          <div>
            <border3 ref="borderrefPM">
              <template v-slot>
                <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
              </template>
            </border3>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
import border6 from "@/components/borderBox/border6.vue";
import border3 from "@/components/borderBox/border3.vue";
import { calcWH } from "@/components/ts/selfAdaption";
// import {getPowerData} from '@/http/environment'
import { getSensorByDept } from "@/http/PaintShopView/index";
import humidity from "./chart/humidity.vue";
import chart from "@/components/assembly/chart2.vue";
import pm from "./chart/pm.vue";
import verticalNum from "./../components/verticalNum.vue";
import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const store = useEnergyConsumeStore();
const router = useRouter();

// let verticalNum3 = ref();
let verticalNum4 = ref();
// let verticalNum5 = ref();
let verticalNum6 = ref();
let verticalNum7 = ref();
let borderref = ref()
let humidityref = ref()
let ductref = ref()
let borderrefPM = ref()
let pmref = ref()
let temp_humi_timer = null
let pm_timer = null
let props = defineProps<{
  width: number;
  height: number;
}>();
watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);
function reset(val: any) {
  //宽高为0时跳出该方法

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

  //重置盒子尺寸
  powerBox(val.width, val.height);
  borderref.value.resetWH()
  borderrefPM.value.resetWH()
}

const powerBox = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 24, 0);
  //修改高度
  // verticalNum3.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
  verticalNum4.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
  // verticalNum5.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
  verticalNum6.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
  verticalNum7.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
  humidityref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
  ductref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20);
  pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
};
let ductOption = reactive({
  title: "",
  option: {
    title: {
      text: t('messages.PipelinePressure_Mpa'),
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
    },
    grid: {
      // 让图表占满容器
      top: "0px",
      left: "0px",
      right: "0px",
      bottom: "0px",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "90%"],
        startAngle: 190,
        endAngle: -10,
        radius: "50%",
        min: 0,
        max: 2,
        splitNumber: 10,
        pointer: {
          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
          length: "12%",
          width: 10,
          offsetCenter: [0, "-40%"],
          itemStyle: {
            color: "inherit",
          },
        },
        axisLine: {
          lineStyle: {
            width: 8,
            color: [
              [0.4, "#7CFFB2"],
              [1, "#FF6E76"],
            ],
          },
        },
        axisTick: {
          distance: 0,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: 5,
          length: 8,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 12,
          color: "#999",
          fontSize: 10,
        },
        anchor: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 20,
          borderRadius: 8,
          offsetCenter: [0, "20%"],
          fontSize: 15,
          fontWeight: "bolder",
          formatter: "{value} Mpa",
          color: "inherit",
        },
        title: {
          offsetCenter: [0, "-20%"],
        },
        data: [
          {
            value: 0.2,
            name: "进水",
          },
        ],
      },
      {
        type: "gauge",
        center: ["50%", "50%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 2,
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.4, "#7CFFB2"],
              [1, "#FF6E76"],
            ],
          },
        },
        pointer: {
          itemStyle: {
            color: "inherit",
          },
        },
        axisTick: {
          distance: -10,
          length: 6,
          lineStyle: {
            color: "#fff",
            width: 2,
          },
        },
        splitLine: {
          distance: -10,
          length: 10,
          lineStyle: {
            color: "#fff",
            width: 4,
          },
        },
        axisLabel: {
          color: "inherit",
          distance: 20,
          fontSize: 10,
        },
        detail: {
          valueAnimation: true,
          offsetCenter: [0, "20%"],
          fontSize: 20,
          formatter: "{value} Mpa",
          color: "inherit",
        },
        title: {
          offsetCenter: [0, "-50%"],
        },
        data: [
          {
            value: 0.2,
            name: "回水",
          },
        ],
      },
    ],
  }
});
// async function getSensorByDeptfun() {
//     let result: any = await getSensorByDept({ depts: 6 });

//     if (result.code == 200) {

//     }
//   }
let pm_index = 0

let temp_humi_index = 0
function setcontentData(val) {
  clearInterval(temp_humi_timer)
  clearInterval(pm_timer)

  let CH2O = val.TVOC_CH2O.map((item) => {
    return { name: item.name, val: item.CH2O };
  });
  let TVOC = val.TVOC_CH2O.map((item) => {
    return { name: item.name, val: item.TVOC };
  });
  let noise = val.noise.map((item) => {
    return { name: item.name, val: item.data };
  });
  // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
  verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
  // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
  verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
  verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "PPM")
  // console.log(pmref.value);
  humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
  if (val.temp_humi.length > 1) {
    temp_humi_timer = setInterval(() => {
      humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
      temp_humi_index++
      if (temp_humi_index >= val.temp_humi.length) {
        temp_humi_index = 0
      }
    }, 3000)
  }
  let type = []
  let valueduct = []
  for (let key in val.water_pressure) {
    if (key == '焊接车间水暖管道压力36（进水）') {
      ductOption.option.series[0].data[0].value = val.water_pressure[key]
      // type.push('进水')
    } else {
      // type.push('回水')
      ductOption.option.series[1].data[0].value = val.water_pressure[key]
    }

    // valueduct.push(val.water_pressure[key])
  }
  // ductOption.option.yAxis.data=[]
  // ductOption.option.series=[]
  // ductOption.option.yAxis.data=type
  // ductOption.option.series.push({
  //   data: valueduct,
  //   type: 'bar',
  //   showBackground: true,
  //   backgroundStyle: {
  //     color: 'rgba(180, 180, 180, 0.2)'
  //   },
  //   itemStyle: {
  //         color: function(params) {
  //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
  //             // console.log(params)
  //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
  //             // return colors[params.dataIndex];
  //             return color[params.dataIndex];
  //         }
  //     },
  // barWidth:'50%',
  // label: {
  //         show: true,
  //         color:'#fff',
  //         formatter: "{c}",
  //         position: "right",
  //         textStyle: {
  //           color: "#fff",
  //           fontSize: 14,
  //         },
  //     },
  // })
  pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
  if (val.dust.length > 1) {
    pm_timer = setInterval(() => {
      pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
      pm_index++
      if (pm_index >= val.dust.length) {
        pm_index = 0
      }
    }, 3000)
  }
  ductref.value.changeData(ductOption.option)
}
let Data = { power: { "管道1": 11, "管道2": 22 } }
onMounted(() => {


});
defineExpose({
  setcontentData,
});
</script>

<style scoped></style>