vent-template/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;
      justify-content: center;
      .message-title {
        font-size: 16px;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        flex: 1;
      }
      .badge-box {
        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>