xx_sw_dp/src/views/meteorological/components/weatherForecast.vue

<template>
  <div class="wf-box" :style="{ height: boxHeight + 'px' }">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane v-for="(item, index) in weatherData.weatherData.predict.detail" :key="index">
        <template #tab>
          <div class="tab-box">
            <div>{{ item.date }}</div>
            <div>{{ setWeek(item.date) }}</div>
            <div> <img v-if="item.day.weather.temperature < 999" :src="showImg(item.day.weather.info)" /> </div>
            <div>{{ item.day.weather.temperature < 999 ? item.day.weather.info : '' }}</div>
            <div>{{ item.day.weather.temperature < 999 ? item.day.wind.direct : '' }}</div>
            <div>{{ item.day.weather.temperature < 999 ? item.day.wind.power : '' }}</div>
            <div :style="setColor(item.day.weather.temperature)" class="temperature"
              >{{ item.day.weather.temperature < 999 ? item.day.weather.temperature : '' }}℃</div
            >
            <div :style="setColor(item.night.weather.temperature)" class="temperature">{{ item.night.weather.temperature }}℃</div>
            <div class="inner-t"> <img :src="showImg(item.night.weather.info)" /> </div>
            <div>{{ item.night.weather.info }}</div>
            <div>{{ item.night.wind.direct }}</div>
            <div>{{ item.night.wind.power }}</div>
          </div>
        </template>
        <div class="wf-content">
          <div>
            <div>{{ item.date }}</div>
            <div>{{ setWeek(item.date) }}</div>
            <div> <img src="../../../assets/images/weatherIcon/js-icon.png" />降水</div>
            <div> <img src="../../../assets/images/weatherIcon/qw-icon.png" />气温</div>
            <div> <img src="../../../assets/images/weatherIcon/fs-icon.png" />风速</div>
            <div> <img src="../../../assets/images/weatherIcon/fx-icon.png" />风向</div>
            <div> <img src="../../../assets/images/weatherIcon/sd-icon.png" />湿度</div>
          </div>
          <template v-for="(items, indexs) in item.hour_predict" :key="indexs">
            <div v-if="indexs != 0">
              <div>{{ items[0] }}</div>
              <div><img class="tab-img-d" :src="items[1]" /></div>
              <div>{{ items[2] == '-' ? '0mm' : items[2]}}</div>
              <!-- strM -->
              <div :style="setColor(items[3])" class="temperature">{{ items[3] }}</div>
              <div>{{ items[4] }}</div>
              <div>{{ items[5] }}</div>
              <div>{{ items[6] }}</div>
            </div>
          </template>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="wf-echarts-box" id="myElement">
      <div class="wf-echarts-title"> 预报曲线 </div>
      <div id="wf-echarts" :style="{ width: '100%', height: '280px' }"> </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, watch, onMounted, reactive } from 'vue';
import eventBus from '/@/utils/eventBus';
import elementResizeDetectorMaker from 'element-resize-detector';
let erd = elementResizeDetectorMaker(); //创建实例
let activeKey = ref<Number>(0);

eventBus.on('weatherReset', () => {
  // setEcharts();
  chart.resize();
});
let boxHeight = ref(900);
eventBus.on('progressHeight', (height) => {
  boxHeight.value = height > 900 ? height - 70 : height;
});
// echarts模块
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
// 获取传参
const props = defineProps({
  weatherData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
watch([() => props.weatherData], (value) => {
  // console.log(props.weatherData.weatherData.tempchart);
  // console.log('监听图表数据');
  // reset();
  // setEcharts();
  // echarts1();
});
// 写入颜色
function setColor(value) {
  let str = value.replace('℃', '') * 1;
  let color = {};
  if (str <= 15) {
    color.background = '#c5f576';
    color.color = '#333';
  }
  if (str > 15 && str <= 20) {
    color.background = '#dff3bb';
    color.color = '#333';
    color.color = '#333';
  }
  if (str > 20 && str <= 25) {
    color.background = '#efdb64';
    color.color = '#333';
  }
  if (str > 25 && str <= 30) {
    color.background = '#e4ad54';
    color.color = '#333';
  }
  if (str > 30) {
    color.background = '#db9148';
    color.color = '#333';
  }

  return color;
}
function showImg(value) {
  // return require(`../../assets/images/weatherIcon/${value}.png`);
  return new URL(`../../../assets/images/weatherIcon/${value}.png`, import.meta.url).href;
}
// 通过年月日获取星期几
function setWeek(date) {
  let weeks = ['日', '一', '二', '三', '四', '五', '六'];
  let day = new Date(date || new Date()).getDay();
  return '星期' + weeks[day];
}
let chart = null;
function echarts1() {
  chart = echarts.init(document.getElementById('wf-echarts'));
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        return `<div>
            <div>
              高温（℃）：${params[0].value == '-' ? params[1].value : params[0].value}
            </div>
            <div>
              低温（℃）：${params[2].value == '-' ? params[3].value : params[2].value}
            </div>
          </div>`;
      },
    },
    grid: {
      left: '3%', //默认10%
      right: '4%', //默认10%
      bottom: '4%', //默认60
      containLabel: true,
      //grid区域是否包含坐标轴的刻度标签
    },
    legend: {
      data: ['高温', '低温'],
      textStyle: {
        fontSize: 14, //字体大小
        color: '#ffffff', //字体颜色
      },
      left: 'right',
    },
    xAxis: {
      type: 'category',
      data: dataIns.name,
      axisLabel: {
        //x轴文字的配置
        show: true,
        textStyle: {
          color: '#fff',
        },
        formatter: function (val) {
          var strs = val.split(''); //字符串数组
          var str = '';
          for (var i = 0, s; (s = strs[i++]); ) {
            //遍历字符串数组
            if (i > 5 && i < 17) {
              str += s;
            }

            if (!(i % 10)) str += '\n'; //按需要求余
          }
          if (val === getNowDate()) {
            return str + '\n' + '今天';
          } else {
            return str + '\n' + setWeek(val);
          }
        },
      },
    },
    yAxis: [
      {
        name: '温度：℃',
        type: 'value',
        splitNumber: 5,
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: '#fff',
            margin: 15,
          },
          // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
            width: 1, //y轴线的宽度
            color: '#484849',
          },
          show: true, //隐藏或显示
        },
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)', //颜色
        },
      },
      {
        type: 'value',
        splitNumber: 5,
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: '#fff',
            margin: 15,
          },
          // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
            width: 1, //y轴线的宽度
            color: '#484849',
          },
          show: true, //隐藏或显示
        },
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)', //颜色
          padding: [0, 0, 0, 30],
        },
      },
    ],
    series: [
      {
        name: '高温',
        type: 'line',
        data: dataIns.beforeMax,
        smooth: true,
        itemStyle: {
          normal: {
            color: '#FF541B', //改变折线点的颜色
            lineStyle: {
              color: '#FF541B', //改变折线颜色
            },
          },
        },
      },
      {
        name: '高温',
        type: 'line',
        smooth: true, //关键点，为true是不支持虚线，实线就用true
        itemStyle: {
          normal: {
            color: '#FF541B', //改变折线点的颜色
            lineStyle: {
              width: 2,
              type: 'dotted', //'dotted'虚线 'solid'实线
              color: '#FF541B', //改变折线颜色
            },
          },
        },
        data: dataIns.afterMax,
      },
      {
        name: '低温',
        type: 'line',
        data: dataIns.beforeMin,
        smooth: true,
        itemStyle: {
          normal: {
            color: '#00D8F0', //改变折线点的颜色
            lineStyle: {
              color: '#00D8F0', //改变折线颜色
            },
          },
        },
      },
      {
        name: '低温',
        type: 'line',
        smooth: true, //关键点，为true是不支持虚线，实线就用true
        itemStyle: {
          normal: {
            color: '#00D8F0', //改变折线点的颜色
            lineStyle: {
              width: 2,
              type: 'dotted', //'dotted'虚线 'solid'实线
              color: '#00D8F0', //改变折线颜色
            },
          },
        },
        data: dataIns.afterMin,
      },
    ],
  };
  option && chart.setOption(option);
  // window.addEventListener('resize', function () {
  //   chart.resize();
  // });
}
let dataIns = reactive({
  name: [],
  beforeMin: [],
  beforeMax: [],
  afterMin: [],
  afterMax: [],
});

function reset() {
  // 重置数据：
  dataIns.name = [];
  dataIns.beforeMin = [];
  dataIns.beforeMax = [];
  dataIns.afterMin = [];
  dataIns.afterMax = [];
}
function setEcharts() {
  dataIns.name = [];
  let tempchart = props.weatherData.weatherData.tempchart;
  // js 获取今天的年月日
  let day = getNowDate();
  // 记录今天的索引//默认100
  let dayIndex = 100;
  // props.weatherData.weatherData.tempchart
  tempchart.forEach((element, index) => {
    dataIns.name.push(element.time);
    if (element.time === day) {
      dayIndex = index;
      dataIns.beforeMin.push(element.min_temp);
      dataIns.beforeMax.push(element.max_temp);
      dataIns.afterMin.push(element.min_temp);
      dataIns.afterMax.push(element.max_temp);
    }
    if (index < dayIndex) {
      dataIns.beforeMin.push(element.min_temp);
      dataIns.beforeMax.push(element.max_temp);
      dataIns.afterMin.push('-');
      dataIns.afterMax.push('-');
    }
    if (index > dayIndex) {
      dataIns.beforeMin.push('-');
      dataIns.beforeMax.push('-');
      dataIns.afterMin.push(element.min_temp);
      dataIns.afterMax.push(element.max_temp);
    }
  });
}
//js 获取今天，明天，后天的年月日
function getNowDate(obj) {
  var d = new Date(); //创建 Date 对象的语法
  var vYear = d.getFullYear(); //获得当前年（4位数）
  var vMon = d.getMonth() + 1; //获得当前月（月份默认计算是从0开始，0-11代表1-12月，加1比较直观些）
  var vDay = d.getDate(); //获得当前日（1-31）
  //拼接成完整日期，格式如：2019-06-17
  var nowDate = vYear + '/' + (vMon < 10 ? '0' + vMon : vMon) + '/' + (vDay < 10 ? '0' + vDay : vDay);
  //返回完整日期
  return nowDate;
}
const myElement = ref(null);
// 图表方法结束
onMounted(() => {
  setEcharts();
  echarts1();
  erd.listenTo(document.getElementById('myElement'), (element) => {
    chart.resize();
  });
});
</script>
<style lang="less" scoped>
.wf-box {
  width: 100%;
  overflow: auto;
}
.wf-box .tab-box {
  color: #fff !important;
  background-color: #06305e;
  text-align: center;
  // width: 13%;
  padding-bottom: 10px;
  & > div {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
  }
  img {
    display: inline-block;
  }
}
.wf-box {
  padding: 10px;
}
::v-deep(.ant-tabs-nav .ant-tabs-tab) {
  margin: 0;
  padding: 0;
  width: 13%;
  margin-left: 1.28%;
}
::v-deep(.ant-tabs-nav .ant-tabs-tab:nth-child(1)) {
  margin-left: 0%;
}
.temperature {
  background-color: #dcb640;
}
::v-deep(.ant-tabs-tab-active .tab-box) {
  background-color: rgba(0, 234, 255, 0.3) !important;
}
::v-deep(.ant-tabs-ink-bar) {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 15px solid rgba(0, 234, 255, 0.3);
  width: 10px;
  background-color: transparent !important;
  position: relative;
  top: 0px;
  left: 5%;
}
::v-deep(.ant-tabs-ink-bar) {
  width: 0 !important;
  height: 0 !important;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid rgba(0, 234, 255, 0.3);
  background-color: transparent !important;
}
::v-deep(.ant-tabs-bar) {
  border-bottom: 0px solid #303030 !important;
}
.wf-content {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background-color: #06305e;
  & > div:hover {
    background-color: rgba(23, 134, 255, 0.1);
  }
  & > div {
    width: 11%;
    text-align: center;
    font-size: 16px;
    & > div {
      line-height: 50px;
      color: #fff;
      // img {
      //   width: 50px;
      // }
    }
  }
  & > div:nth-child(1) {
    width: 12%;
    background-color: rgba(8, 97, 122, 0.63);
    border-bottom: 1px solid #ddd;
  }

  img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.wf-echarts-title {
  color: #00d8f0;
  font-size: 14px;
  border-bottom: 1px solid rgba(19, 94, 176, 0.52);
  padding: 10px 0;
}
// #wf-echarts {
//   background-color: red;
// }
.tab-img-d {
  width: 50px;
  margin-right: 0px;
}
.inner-t {
  line-height: 60px;
  height: 60px !important;
  padding-top: 10px;
}
</style>
<style>
/* .wrap-power-big .wf-box {
  height: 1000px;
}
.wrap-power-min .wf-box {
  height: 900px;
} */
.wrap-power-big .wf-box .tab-box > div {
  height: 33px;
  line-height: 33px;
}
.wrap-power-big .wf-content > div > div {
  height: 35px;
  line-height: 35px;
}
.wrap-power-big .wf-box .tab-box .inner-t {
  height: 33px !important;
  line-height: 33px !important;
}
.wrap-power-big .wf-box .tab-box img {
  width: 40px;
}
.wrap-power-big .wf-box .tab-box .inner-t img {
  position: relative;
  top: -10px;
}
</style>