<!-- 晴雨台 -->
<template>
  <div class="side-bg">
    <div>
      <TitleC title="晴雨台" :swshow="false"></TitleC>
    </div>
    <div class="weather_body">
      <div>
        <div><span>温度：</span><span>15°C</span></div>
        <div><span>湿度：</span><span>55%</span></div>
        <div><span>气压：</span><span>30P</span></div>
        <div><span>降水量：</span><span>50ml</span></div>
        <div><span>天气状况：</span><span>多云</span></div>
      </div>
      <div>
        <div v-for="(item, index) in 7" :key="index">
          <span>2023年12月15日</span>
          <span>多云</span>
          <span>1°C~11°C</span>
        </div>
      </div>
      <div class="title">气温走势</div>
      <div class="chart-wrapper">
        <div class="container" ref="tenementRef"></div>
      </div>
      <div class="title" style="margin-top: 20px">空气指数</div>
      <div class="chart-wrapper airEcharts">
        <div class="container" ref="airTenementRef"></div>
      </div>
      <div class="airIndex">
        <div class="title">空气指数</div>
        <div>
          <div>
            <span>PM2.5</span>
            <span>15</span>
          </div>
          <div>
            <span>PM10</span>
            <span>93</span>
          </div>
          <div>
            <span>CO</span>
            <span>0</span>
          </div>
          <div>
            <span>SO2</span>
            <span>3</span>
          </div>
        </div>
      </div>
      <!-- 生活指数 -->
      <div class="title">生活指数</div>
      <div class="livingIndex_div">
        <div v-for="(item, index) in livingIndex" :key="index">
          <div>
            <span>{{ item.name }}</span>
            <span>{{ item.tate }}</span>
          </div>
          <div>{{ item.con }}</div>
        </div>
      </div>
      <!-- 气象预警 -->
      <div class="title">气象预警</div>
      <div class="weatherWarning_div">
        <div v-for="(item, index) in weatherWarning" :key="index">
          <div>
            <div>
              <img
                src="@/assets/images/data-statistics/left/rainstorm-orange.png"
                alt=""
              />
            </div>
            <div>
              <div>{{ item.name }}</div>
              <div>{{ item.time }}</div>
            </div>
          </div>
          <div>{{ item.con }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
export default defineComponent({
  name: "Weather",
});
</script>
<script setup lang='ts'>
import * as echarts from "echarts";

//气温折线图
const tenementRef = ref();
let option = {
  color: ["#FF831F"],
  tooltip: {
    show: false,
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: "0%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [
        "1点",
        "2点",
        "3点",
        "4点",
        "5点",
        "6点",
        "7点",
        "8点",
        "9点",
        "10点",
        "11点",
        "12点",
        "13点",
        "14点",
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
        "22点",
        "23点",
        "24点",
      ],
      boundaryGap: false,
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      // axisLabel: {
      //   interval: 0,
      //   color: "#86909C",
      //   fontSize: 14,
      // },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          //分割线
          color: "#99999955",
          width: 1,
          type: "dashed", //dotted：虚线 solid:实线
        },
      },
    },
  ],
  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: "#B36224",
            },
            {
              offset: 1,
              color: "#111D37",
            },
          ],
        },
      },
      data: [
        5, 7, 1, 3, 6, 7, 8, 9, 10, 2, 9, 7, 15, 17, 19, 2, 4, -5, -4, -2, 3, 5,
        7, 6,
      ],
    },
  ],
};
const airTenementRef = ref();
//空气情况仪表盘
let airOption = {
  series: [
    {
      type: "gauge",
      startAngle: 180,
      endAngle: 0,
      center: ["50%", "75%"],
      radius: "90%",
      min: 0,
      max: 1,
      splitNumber: 8,
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.25, "#FF6E76"],
            [0.5, "#FDDD60"],
            [0.75, "#58D9F9"],
            [1, "#7CFFB2"],
          ],
        },
      },
      pointer: {
        icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
        length: "12%",
        width: 20,
        offsetCenter: [0, "-60%"],
        itemStyle: {
          color: "auto",
        },
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: "auto",
          width: 2,
        },
      },
      splitLine: {
        length: 20,
        lineStyle: {
          color: "auto",
          width: 5,
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 20,
        distance: -60,
        rotate: "tangential",
        formatter: function (value: number) {
          if (value === 0.875) {
            return "差";
          } else if (value === 0.625) {
            return "合格";
          } else if (value === 0.375) {
            return "良";
          } else if (value === 0.125) {
            return "优";
          }
          return "";
        },
      },
      title: {
        offsetCenter: [0, "10%"],
        fontSize: 20,
        color: "yellow",
      },
      detail: {
        fontSize: 30,
        offsetCenter: [0, "-20%"],
        valueAnimation: true,
        formatter: function (value: number) {
          return Math.round(value * 100) + "";
        },
        color: "inherit",
      },
      data: [
        {
          value: 0.7,
          name: "良",
        },
      ],
    },
  ],
};
//生活指数
const livingIndex = ref([
  { name: "带伞", tate: "无需", con: "无需带伞" },
  {
    name: "洗车",
    tate: "适宜",
    con: "适宜洗车，未来持续两天无雨天气较好，适合擦洗汽车，蓝天白云、风和日丽将伴您的车子连日洁净",
  },
  { name: "紫外线", tate: "最弱", con: "可以不采取措施" },
  {
    name: "旅行",
    tate: "适宜",
    con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
  },
  {
    name: "旅行",
    tate: "适宜",
    con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
  },
  {
    name: "旅行",
    tate: "适宜",
    con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
  },
]);
const weatherWarning = ref([
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
  {
    name: "大风黄色预警",
    time: "2023-12-1416:00:17",
    con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
  },
]);

const getData = () => {
  //天气情况
  const tenementChart = echarts.init(tenementRef.value);
  tenementChart.setOption(option);
  //空气情况仪表盘
  const airTenementChart = echarts.init(airTenementRef.value);
  airTenementChart.setOption(airOption);
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.side-bg {
  height: 195%;
}
.weather_body {
  padding-top: 5px;
  padding-left: 10px;
  > div:nth-child(1) {
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 190px;
      color: white;
      font-size: 20px;
      margin-right: 20px;
      > span:nth-child(1) {
        font-family: YouSheBiaoTiHei;
      }
    }
  }
  > div:nth-child(2) {
    padding-left: 10px;
    margin-top: 20px;
    overflow-y: scroll;
    height: 200px;
    background-color: #153062;
    > div {
      color: #86b6f0;

      margin-top: 10px;
      > span {
        margin-right: 20px;
      }
      > span:nth-child(2) {
        display: inline-block;
        width: 80px;
        text-align: center;
      }
      > span:nth-child(3) {
        display: inline-block;
        width: 100px;
        text-align: center;
      }
      > span:nth-child(4) {
        color: #e19f35;
      }
    }
  }
  > div:nth-child(2)::-webkit-scrollbar {
    display: none;
  }
}
.chart-wrapper {
  margin-top: 30px;
  flex: 1;
  height: 180px;
  .container {
    flex: 1;
    width: 440px;
    margin-top: -55px;
    height: 200px;
  }
}
.airEcharts {
  margin-top: 70px;
}
.airIndex {
  margin-top: 10px;

  > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    > div {
      display: flex;
      flex-direction: column;
      text-align: center;
      line-height: 30px;
      width: 60px;
      height: 60px;
      background-color: #61738b;
    }
    > div:nth-child(1) {
      color: rgb(8, 237, 138);
    }
    > div:nth-child(2) {
      color: yellow;
    }
    > div:nth-child(3) {
      color: red;
    }
    > div:nth-child(4) {
      color: chartreuse;
    }
  }
}
//进度条
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.title {
  font-size: 30px;
  color: white;
  font-family: YouSheBiaoTiHei;
  text-align: center;
  margin-bottom: 20px;
}
.livingIndex_div {
  padding: 5px 10px;
  height: 300px;
  overflow-y: scroll;
  background-color: rgb(127, 116, 116);
  border-radius: 5px;
  > div {
    width: 100%;
    height: 80px;
    background-color: #153062;
    margin-bottom: 10px;
    padding-left: 10px;
    color: white;
    border-radius: 5px;
    > div:nth-child(1) {
      font-size: 18px;
      line-height: 50px;
      > span:nth-child(1) {
        font-weight: bold;
      }
      > span:nth-child(2) {
        margin-left: 10px;
      }
    }
    > div:nth-child(2) {
      font-size: 14px;
      overflow: hidden; /* 超出一行文字自动隐藏 */
      text-overflow: ellipsis; /*文字隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
  }
}
.livingIndex_div::-webkit-scrollbar {
  display: none;
}
.weatherWarning_div::-webkit-scrollbar {
  display: none;
}
.weatherWarning_div {
  overflow-y: scroll;
  height: 300px;
  background-color: rgb(127, 116, 116);
  padding: 5px 5px;
  border-radius: 5px;
  > div {
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #153062;
    color: white;
    padding: 5px;
    > div:nth-child(1) {
      display: flex;
      > div:nth-child(1) {
        width: 50px;
        height: 50px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      > div:nth-child(2) {
        margin-left: 10px;
        > div:nth-child(1) {
          font-size: 20px;
        }
        > div:nth-child(2) {
          font-size: 13px;
        }
      }
    }
    > div:nth-child(2) {
      font-size: 15px;
    }
  }
}
</style>