gas-injection/src/layouts/default/header/components/weatherBroadcast.vue

<template>
  <div>
    <div class="btn" @click="showWarningBroad">
      <!-- <div>语音播报</div>
    <a-badge :count="10">
      <a href="#" class="head-example"></a>
    </a-badge> -->
      <div style="display: flex; flex-direction: row;align-items: center;" class="btn-header">
        <img :src="parseWeatherData(weatherObj.text)" class="weather-icon" />
        <span class="unit">{{ weatherObj.pressure }}&nbsp;hPa</span>
        <FileSearchOutlined style="font-size: 20px; color: #fff;" />
      </div>
    </div>
    <div v-if="isShowWeatherBroad" class="broadcast" ref="VoiceBroadcastRef" id="VoiceBroadcast">
      <div class="title">
        <div class="message-title">详情</div>
      </div>
      <div class="broadcast-context">
        <div class="context-tab">
          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 0 }" @click="toSelectList(0)">
            温度</div>
          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 1 }" @click="toSelectList(1)">
            气压</div>
          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 2 }" @click="toSelectList(2)">
            风力</div>
        </div>
        <div class="context-box">
          <div class="echarts-box">
            <BarAndLine v-if="activeKey == 0" xAxisPropType="fxTime" height="240px" :dataSource="monitorData"
              :chartsColumns="ChartsColumnsWD" :option="Option" />
            <BarAndLine v-if="activeKey == 1" xAxisPropType="fxTime" height="240px" :dataSource="monitorData"
              :chartsColumns="ChartsColumnsQY" :option="Option" />
            <BarAndLine v-if="activeKey == 2" xAxisPropType="fxTime" height="240px" :dataSource="monitorData"
              :chartsColumns="ChartsColumnsFL" :option="Option" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import { Tooltip, Badge } from 'ant-design-vue';
import { SoundOutlined, ClearOutlined, FileSearchOutlined, WarningOutlined } from '@ant-design/icons-vue';
import Icon from '/@/components/Icon';
import { defineComponent, ref, onMounted, nextTick } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useDrag } from '@/hooks/event/useDrag';

export default defineComponent({
  name: 'VoiceBroadcast',
  components: { Icon, Tooltip, Badge, SoundOutlined, ClearOutlined, FileSearchOutlined, WarningOutlined, BarAndLine },

  setup() {
    const getWeather = () => defHttp.post({ url: '/safety/ventanalyDevice/getWeatherData' });
    const activeKey = ref(0);
    const isShowWeatherBroad = ref(false);
    const monitorData = ref<any[]>([]);

    const ChartsColumnsWD = [
      {
        legend: '温度',
        seriesName: '(℃)',
        ymax: 0.8,
        yname: '℃',
        linetype: 'line',
        yaxispos: 'left',
        color: '#00FFA8',
        sort: 1,
        xRotate: 0,
        dataIndex: 'temp',
      },
    ];
    const ChartsColumnsQY = [
      {
        legend: '气压',
        seriesName: '(hPa)',
        ymax: 0.8,
        yname: 'hPa',
        linetype: 'line',
        yaxispos: 'left',
        color: '#00FFA8',
        sort: 1,
        xRotate: 0,
        dataIndex: 'pressure',
      },
    ];
    const ChartsColumnsFL = [
      {
        legend: '风力',
        seriesName: '(等级)',
        ymax: 0.8,
        yname: '等级',
        linetype: 'line',
        yaxispos: 'left',
        color: '#00FFA8',
        sort: 1,
        xRotate: 0,
        dataIndex: 'widnScale',
      },
    ];

    const Option = {
      grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: null,
      },
    };
    const weatherObj = ref({
      cloud: '',
      dew: '',
      fxTime: '',
      humidity: '',
      icon: '',
      pop: '',
      precip: '',
      pressure: '',
      temp: '',
      text: '',
      wind360: '',
      windDir: '',
      windScale: '',
      windSpeed: '',
    });

    const iconMap = {
      晴: new URL('/src/assets/icons/sun.svg', import.meta.url).href,
      雨: new URL('/src/assets/icons/rain.svg', import.meta.url).href,
      雪: new URL('/src/assets/icons/snow.svg', import.meta.url).href,
      多云: new URL('/src/assets/icons/clound.svg', import.meta.url).href,
      风: new URL('/src/assets/icons/wind.svg', import.meta.url).href,
    };

    function parseWeatherData(res) {
      return iconMap[res] || new URL('/src/assets/icons/sun.svg', import.meta.url).href;
    }
    function showWarningBroad() {
      isShowWeatherBroad.value = !isShowWeatherBroad.value;
      if (isShowWeatherBroad.value) {
        toSelectList(0);

        nextTick(() => {
          const dom = document.getElementById('VoiceBroadcast');
          if (dom) useDrag(dom);
        });
      }
    }
    async function toSelectList(key) {
      activeKey.value = key;
    }
    async function getWeatherInfo() {
      const res = await getWeather();

      weatherObj.value = JSON.parse(res.weatherDataNow);
      monitorData.value = JSON.parse(res.weatherData);
    }
    onMounted(() => {
      nextTick(async () => {
        await getWeatherInfo();
      });
    });

    return {
      showWarningBroad,
      isShowWeatherBroad,
      activeKey,
      weatherObj,
      parseWeatherData,
      toSelectList,
      monitorData,
      ChartsColumnsWD,
      ChartsColumnsQY,
      ChartsColumnsFL,
      Option,
    };
  },
});
</script>
<style lang="less" scoped>
.unit {
  font-size: 14px;
  // line-height: 47px;
  color: #fff;
  padding-right: 10px;
}

.btn {
  // line-height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.btn-header {
  height: 48px;
  margin-right: 20px;
}

.weather-icon {
  width: 20px;
  height: 20px;
  // margin-top: 14px;
  margin-right: 10px;
}

.broadcast {
  width: 500px;
  height: 350px;
  border-radius: 4px;
  position: fixed;
  top: 50px;
  right: 20px;
  background-color: rgb(255, 255, 255);
  background: url('../../../../assets/images/warn-dialog-bg.png') no-repeat center;
  background-size: 100% 100%;
  z-index: 9999999;
  color: #fff;

  .title {
    text-align: center;
    padding: 0 20px;

    :deep(.ant-badge:not(.ant-badge-status)) {
      margin-right: 40px !important;
    }

    display: flex;
    align-items: center;
    padding-top: 10px;

    .badge-title {
      display: inline-block;
      width: 62px;
      line-height: 32px;
      background-color: #2174f0;
      border-radius: 26px;
      text-align: center;
      color: #fff;
      padding-bottom: 2px;
    }
  }
}

.broadcast-context {
  .context-tab {
    display: flex;

    .context-tab-item {
      line-height: 24px;
      background: url('../../../../assets/images/tab-1.png') no-repeat center;
      border-radius: 24px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      width: 80px;
    }

    .context-tab-item-active {
      background: url('../../../../assets/images/tab-2.png') no-repeat center;
    }
  }

  .context-box {
    width: 100%;
    height: calc(100% - 32px);

    .echarts-box {
      width: 100%;
      height: 500px;
    }
  }
}

:deep(.zxm-badge-count) {
  width: 0px;
  height: 0px;
}
</style>