daofu-large-screen/src/views/data-statistics/left-side/components/weather.vue

<!-- 晴雨台 -->
<template>
  <div class="side-bg">
    <div>
      <TitleC title="晴雨台"></TitleC>
      <div class="weather_data">
        <div>
          <TitleD width="100">
            <div class="weather_data_title">气象实时数据</div>
          </TitleD>
          <div class="weather_data_left">
            <div>
              <div>
                <img
                  src="../../../../assets/images/home-page/left/lightRain.png"
                  alt=""
                />
                <span>15°</span>
              </div>
              <div>
                <div>雨 东南风：＜3级</div>
                <div>10~17℃</div>
              </div>
            </div>
            <div>
              <div>
                <div>PM2.5：48.0%</div>
                <div>PM10：240mm</div>
              </div>
              <div>
                <div>O3：48.0%</div>
                <div>空气质量：良</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <TitleD width="100">
            <div class="weather_data_div">
              <div class="weather_data_title">24小时天气象数据</div>
              <div class="weather_data_button">
                <div
                  v-for="(item, index) in label"
                  :key="index"
                  @click="clickMenuOption(item.id)"
                  :class="
                    item.check == true
                      ? 'module_menu_selected'
                      : 'module_menu_notSelected'
                  "
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </TitleD>
          <div class="weather_data_right conBox chart-wrapper">
            <div ref="tenementRef" class="container"></div>
            <div>
              <img
                src="../../../../assets/images/home-page/left/leftArrow.png"
                alt=""
              />
            </div>
            <div>
              <img
                src="../../../../assets/images/home-page/left/rightArrow.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <TitleD width="100">
        <div class="weather_data_title">气象预警信息</div>
      </TitleD>
      <el-table :data="tableData" height="180" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column
          prop="type"
          label="预警类型"
          align="center"
          width="120"
        />
        <el-table-column prop="info" label="预警信息" align="center">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.info"
              placement="top-start"
              popper-class="weather_tip"
            >
              <span>{{ scope.row.info }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- show-overflow-tooltip -->
        <el-table-column
          prop="time"
          label="预警时间"
          align="center"
          width="140"
        >
          <template #default="scope">
            <span class="time">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="60">
          <template #default="scope">
            <span @click="clickDetails">
              <span class="pointer details">详情</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import { defineComponent, onMounted, ref, watchEffect } from "vue";
export default defineComponent({
  name: "weather",
});
</script>
<script setup lang='ts'>
const visible = ref(false);
const tableData = [
  {
    type: "暴雨黄色预警",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
  },
  {
    type: "暴雨黄色预警",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
  },
  {
    type: "暴雨黄色预警",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
  },
  {
    type: "暴雨黄色预警",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
  },
];
const clickDetails = () => {};
//未来七天气象数据选择
const label = ref([
  { title: "24小时", check: true, id: 0 },
  { title: "未来七天", check: false, id: 1 },
]);
const clickMenuOption = (id: any) => {
  label.value.forEach((item) => {
    item.check = false;
  });
  label.value[id].check = true;
};

const tenementRef = ref();
let option = {
  color: ["#66E1DF"],
  tooltip: {
    show: false,
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: "0%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: ["现在", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"],
      boundaryGap: false,
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "#D0DEEE",
        fontSize: 12,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          //分割线
          color: "#99999955",
          width: 1,
          type: "dashed", //dotted：虚线 solid:实线
        },
      },
      axisLabel: {
        formatter: "{value} °C",
      },
    },
  ],
  series: [
    {
      name: "",
      type: "line",
      smooth: true,
      symbol: "none", // 不显示连接点
      tooltip: {
        trigger: "axis",
      },
      lineStyle: {
        width: 2,
        shadowColor: "#165DFF",
        shadowBlur: 20,
      },
      areaStyle: {
        opacity: 0.8,
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#0F476B",
            },
            {
              offset: 1,
              color: "#002A56",
            },
          ],
        },
      },
      data: [2, 4, 9, 12, 15, 48, 2],
    },
  ],
};
const getData = () => {
  const airTenementChart = echarts.init(tenementRef.value);
  airTenementChart.setOption(option);
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.side-bg {
  // height: 45%;
}
.weather_data {
  display: flex;
  justify-content: space-between;
  > div:nth-child(1) {
    width: 40%;
  }
  > div:nth-child(2) {
    width: 59%;
  }
}

.weather_data_left {
  width: 100%;
  height: 120px;
  background-image: url("../../../../assets/images/home-page/left/barometer.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 12px;
  > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    > div:nth-child(1) {
      font-size: 27px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      display: flex;
      align-items: center;
      color: #ffffff;
      > img {
        width: 24px;
        height: 24px;
      }
    }
    > div:nth-child(2) {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }
  > div:nth-child(2) {
    > div {
      font-size: 13px;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      color: #d0deee;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      margin-bottom: 5px;
      > div {
        width: 100%;
      }
    }
  }
}
.weather_data_right {
  width: 100%;
  > div:nth-child(2) {
    margin-top: -17px;
    margin-left: 10px;
    text-align: left;
    img {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
  }
  > div:nth-child(3) {
    margin-top: -23px;
    text-align: right;
    margin-right: 10px;
    img {
      cursor: pointer;
      width: 15px;
      height: 15px;
    }
  }
}
.time {
  font-size: 12px;
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  color: #159aff;
}
.chart-wrapper {
  height: 120px;
  position: relative;
  overflow: hidden;
  .container {
    width: 86%;
    height: 160px;
    margin-top: -45px;
    margin-left: 20px;
  }
}
</style>
<style>
.weather_tip {
  max-width: 200px !important;
}
</style>