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

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\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="t('messages.gasDetection')"></verticalNum>
          <verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
          <verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
          <verticalNum
            ref="verticalNum6"
            :title="t('messages.CH2Ojiance')"
          ></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>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } 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 verticalNum from "./chart/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 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()
}

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*3-20,a.oHeight-20)
  verticalNum5.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
  verticalNum6.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
  verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
  humidityref.value.setchartWH(a.oWidth*5-40,a.oHeight-40)
  ductref.value.setchartWH(a.oWidth*4-20, a.oHeight-20);
};
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) {
    
//     }
//   }
  function setcontentData(val){
    verticalNum3.value.setData(val.FIRE,'icon-ranqi',0,"")
    verticalNum4.value.setData(val.noise,'icon-shengyin',120,"dB")
    verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',100,"")
    verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',0.08,"mg/m3")
    verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
    // console.log(pmref.value);
    humidityref.value.setData({h:val.temp_humi.huim,c:val.temp_humi.temp})
    let type=[]
    let valueduct=[]
    for(let key in val.water_pressure){
      if(key=='大件-精饰水暖管道压力29（进水1）'){
        // type.push('进水')
        ductOption.option.series[0].data[0].value=val.water_pressure[key]
      }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,
    //         },
    //     },
    // })
    
    ductref.value.changeData(ductOption.option)
  }
let Data={power:{"管道1":11,"管道2":22}}
onMounted(() => {

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

<style scoped></style>