@farris/ui-vue/components/weather/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as d, computed as b, watch as O, createVNode as e, createTextVNode as I, resolveComponent as M, defineComponent as E, onMounted as j, inject as P } from "vue";
import { useResizeObserver as L } from "@vueuse/core";
import A from "../progress/index.esm.js";
import { resolveAppearance as N, createPropsResolver as H } from "../dynamic-resolver/index.esm.js";
import * as S from "echarts";
import q from "jsonp";
import D from "crypto-js";
import { useDesignerComponent as Z } from "../designer-canvas/index.esm.js";
const U = /* @__PURE__ */ new Map([
  ["appearance", N]
]);
function $(i, p, n) {
  return p;
}
const V = "https://json-schema.org/draft/2020-12/schema", z = "https://farris-design.gitee.io/weather.schema.json", G = "weather", J = "A Farris Input Component", K = "object", Q = {
  id: {
    description: "The unique identifier for a weather",
    type: "string"
  },
  type: {
    description: "The type string of weather component",
    type: "string",
    default: "weather"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  }
}, X = [
  "id",
  "type"
], Y = {
  $schema: V,
  $id: z,
  title: G,
  description: J,
  type: K,
  properties: Q,
  required: X
}, ee = "weather", te = "A Farris Component", ne = "object", ae = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, re = {
  title: ee,
  description: te,
  type: ne,
  categories: ae
}, ie = {
  /** 城市列表 */
  cityItems: {
    type: Array,
    default: [
      { province: "北京", city: ["北京"] },
      { province: "山东", city: ["济南", "青岛"] },
      { province: "黑龙江", city: ["牡丹江", "齐齐哈尔"] }
    ]
  },
  /** 主题列表 */
  themeItems: {
    type: Array,
    default: [
      { title: "school", adviceItems: ["clothes", "sports", "sunscreen"] },
      { title: "office", adviceItems: ["clothes", "traffic", "umbrella"] },
      { title: "construction", adviceItems: ["clothes", "chill", "heatstroke"] },
      { title: "tourism", adviceItems: ["clothes", "sunscreen", "tourism"] }
    ]
  },
  /** 天气数据 */
  data: {
    type: Object,
    default: {
      // 日出时间
      sunriseTime: d(/* @__PURE__ */ new Date()),
      // 日落时间
      sunsetTime: d(/* @__PURE__ */ new Date()),
      // 温度
      temperature: d(0),
      // 最高温
      max: d(0),
      // 最低温
      min: d(0),
      // 天气现象
      weather: d("阴"),
      // 空气质量
      air: d(0),
      // 建议
      adviceItems: [
        { key: "clothes", value: { name: "穿衣", info: "毛衣", detail: "建议穿长袖毛衣等服装。" } },
        { key: "sports", value: { name: "运动", info: "适宜", detail: "各项气象条件都很好，很适合户外运动。" } },
        { key: "sunscreen", value: { name: "防晒", info: "强", detail: "建议涂抹SPF在15-20之间，PA++的防晒护肤品。" } },
        { key: "traffic", value: { name: "交通", info: "良好", detail: "天气较好，路面干燥，交通气象条件良好，车辆可以正常行驶。" } },
        { key: "umbrella", value: { name: "雨伞", info: "不带伞", detail: "天气较好，您在出门的时候无须带雨伞。" } },
        { key: "chill", value: { name: "风寒", info: "无", detail: "温度未达到风寒所需的低温，稍作防寒准备即可。" } },
        { key: "heatstroke", value: { name: "中暑", info: "无中暑风险", detail: "天气不热，在炎炎夏日中十分难得，可以告别暑气漫漫啦~" } },
        { key: "tourism", value: { name: "旅游", info: "适宜", detail: "天气较好，温度适宜，是个好天气哦。这样的天气适宜旅游，您可以尽情地享受大自然的风光。" } }
      ],
      // 专业参数
      proindexItemsSet: [[
        { title: "紫外线", icon: "UV", value: "中等", info: "16:00前注意防晒", explain: "紫外线指数（UVI）测量紫外线辐射。UVI越高，潜在伤害就越大，造成伤害的速度也越快。" },
        { title: "降水量", icon: "rainfall", value: "0mm", info: "过去24小时", explain: "降水量，是指12或24小时内降雨（雪）量的总和。" }
      ], [
        { title: "湿度", icon: "humidity", value: "31%", info: "露点温度为4°", explain: "空气中含水量与空气可容纳水量的比值。气温越高，空气可容纳的水量就越多。湿度高意味着可能结露或起雾。" },
        { title: "体感温度", icon: "apparentTemp", value: "14°", info: "风较大，体感更凉", explain: "体感温度传达身体感觉有多暖或多冷，可能与实际温度不同。体感温度受湿度和风影响。" }
      ], [
        { title: "气压", icon: "pressure", value: "1010mpa", info: "当前气压较稳定", explain: "气压的显著急剧变化用于预测天气变化。例如，气压降低表示雨雪即将来临，升高则表示天气将好转。" },
        { title: "能见度", icon: "visibility", value: "19km", info: "目前非常好", explain: "能见度会告诉你可以清晰地看到多远以外的物体。能见度测量大气透明度，不考虑光照强度或障碍物。" }
      ]],
      // 每小时天气
      dayItemsSet: [
        [
          { icon: "sunny", temp: 15 },
          { icon: "sunny", temp: 16 },
          { icon: "sunny", temp: 20 },
          { icon: "sunny", temp: 22 },
          { icon: "sunny", temp: 24 },
          { icon: "cloudy", temp: 23 },
          { icon: "cloudy", temp: 20 },
          { icon: "cloudy", temp: 19 },
          { icon: "cloudy", temp: 19 },
          { icon: "cloudy", temp: 18 },
          { icon: "rainy1", temp: 18 },
          { icon: "rainy1", temp: 17 },
          { icon: "rainy1", temp: 15 },
          { icon: "rainy1", temp: 15 },
          { icon: "rainy2", temp: 15 },
          { icon: "rainy2", temp: 15 },
          { icon: "rainy2", temp: 15 },
          { icon: "sunny", temp: 15 },
          { icon: "sunny", temp: 15 },
          { icon: "sunny", temp: 18 },
          { icon: "sunny", temp: 19 },
          { icon: "sunny", temp: 19 },
          { icon: "sunny", temp: 20 },
          { icon: "sunny", temp: 20 }
        ],
        [
          { icon: "rainy2", temp: 15 },
          { icon: "rainy2", temp: 15 },
          { icon: "rainy2", temp: 15 },
          { icon: "sunny", temp: 15 },
          { icon: "sunny", temp: 15 },
          { icon: "sunny", temp: 18 },
          { icon: "sunny", temp: 19 },
          { icon: "sunny", temp: 19 },
          { icon: "sunny", temp: 20 },
          { icon: "sunny", temp: 20 },
          { icon: "rainy2", temp: 21 },
          { icon: "rainy2", temp: 21 },
          { icon: "rainy2", temp: 21 },
          { icon: "sunny", temp: 21 },
          { icon: "sunny", temp: 22 },
          { icon: "sunny", temp: 24 },
          { icon: "sunny", temp: 24 },
          { icon: "sunny", temp: 23 },
          { icon: "sunny", temp: 20 },
          { icon: "sunny", temp: 20 },
          { icon: "sunny", temp: 19 },
          { icon: "sunny", temp: 19 },
          { icon: "sunny", temp: 15 },
          { icon: "sunny", temp: 15 }
        ]
        // [
        //     { icon: "foggy", temp: 11 },
        //     { icon: "foggy", temp: 12 },
        //     { icon: "foggy", temp: 14 },
        //     { icon: "foggy", temp: 15 },
        //     { icon: "foggy", temp: 17 },
        //     { icon: "foggy", temp: 18 },
        //     { icon: "foggy", temp: 19 },
        //     { icon: "foggy", temp: 19 },
        //     { icon: "foggy", temp: 20 },
        //     { icon: "foggy", temp: 20 },
        //     { icon: "foggy", temp: 21 },
        //     { icon: "foggy", temp: 21 },
        //     { icon: "foggy", temp: 21 },
        //     { icon: "foggy", temp: 21 },
        //     { icon: "sunny", temp: 22 },
        //     { icon: "sunny", temp: 26 },
        //     { icon: "sunny", temp: 26 },
        //     { icon: "sunny", temp: 25 },
        //     { icon: "sunny", temp: 20 },
        //     { icon: "sunny", temp: 20 },
        //     { icon: "foggy", temp: 19 },
        //     { icon: "foggy", temp: 19 },
        //     { icon: "foggy", temp: 15 },
        //     { icon: "foggy", temp: 15 },
        // ],[
        //     { icon: "cloudy", temp: 7 },
        //     { icon: "cloudy", temp: 8 },
        //     { icon: "cloudy", temp: 10 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 14 },
        //     { icon: "cloudy", temp: 18 },
        //     { icon: "cloudy", temp: 19 },
        //     { icon: "cloudy", temp: 19 },
        //     { icon: "sunny", temp: 20 },
        //     { icon: "sunny", temp: 20 },
        //     { icon: "cloudy", temp: 21 },
        //     { icon: "cloudy", temp: 21 },
        //     { icon: "cloudy", temp: 21 },
        //     { icon: "cloudy", temp: 21 },
        //     { icon: "cloudy", temp: 22 },
        //     { icon: "cloudy", temp: 22 },
        //     { icon: "sunny", temp: 21 },
        //     { icon: "sunny", temp: 21 },
        //     { icon: "sunny", temp: 20 },
        //     { icon: "sunny", temp: 20 },
        //     { icon: "sunny", temp: 19 },
        //     { icon: "sunny", temp: 19 },
        //     { icon: "sunny", temp: 15 },
        //     { icon: "sunny", temp: 15 },
        // ],[
        //     { icon: "snowy1", temp: 3 },
        //     { icon: "snowy1", temp: 3 },
        //     { icon: "snowy1", temp: 3 },
        //     { icon: "snowy1", temp: 4 },
        //     { icon: "sunny", temp: 4 },
        //     { icon: "sunny", temp: 4 },
        //     { icon: "sunny", temp: 5 },
        //     { icon: "sunny", temp: 6 },
        //     { icon: "sunny", temp: 8 },
        //     { icon: "sunny", temp: 8 },
        //     { icon: "snowy1", temp: 10 },
        //     { icon: "snowy1", temp: 10 },
        //     { icon: "snowy1", temp: 10 },
        //     { icon: "snowy1", temp: 10 },
        //     { icon: "snowy1", temp: 10 },
        //     { icon: "snowy1", temp: 9 },
        //     { icon: "sunny", temp: 9 },
        //     { icon: "sunny", temp: 9 },
        //     { icon: "sunny", temp: 9 },
        //     { icon: "sunny", temp: 9 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 5 },
        // ],[
        //     { icon: "sunny", temp: 5 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 15 },
        //     { icon: "sunny", temp: 15 },
        //     { icon: "sunny", temp: 15 },
        //     { icon: "sunny", temp: 16 },
        //     { icon: "sunny", temp: 19 },
        //     { icon: "sunny", temp: 19 },
        //     { icon: "sunny", temp: 19 },
        //     { icon: "sunny", temp: 19 },
        //     { icon: "sunny", temp: 18 },
        //     { icon: "sunny", temp: 17 },
        //     { icon: "sunny", temp: 17 },
        //     { icon: "sunny", temp: 17 },
        //     { icon: "sunny", temp: 17 },
        //     { icon: "sunny", temp: 16 },
        //     { icon: "sunny", temp: 10 },
        // ],[
        //     { icon: "snowy2", temp: 4 },
        //     { icon: "snowy2", temp: 4 },
        //     { icon: "snowy2", temp: 4 },
        //     { icon: "sunny", temp: 4 },
        //     { icon: "sunny", temp: 4 },
        //     { icon: "sunny", temp: 6 },
        //     { icon: "sunny", temp: 6 },
        //     { icon: "sunny", temp: 6 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 8 },
        //     { icon: "snowy2", temp: 8 },
        //     { icon: "snowy2", temp: 8 },
        //     { icon: "snowy2", temp: 8 },
        //     { icon: "sunny", temp: 8 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 9 },
        //     { icon: "sunny", temp: 9 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 10 },
        //     { icon: "sunny", temp: 8 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        //     { icon: "sunny", temp: 7 },
        // ]
      ],
      // 每日天气
      weekItems: [
        { icon: "rainy1", max: 24, min: 15 },
        { icon: "rainy2", max: 24, min: 15 },
        { icon: "foggy", max: 26, min: 11 },
        { icon: "cloudy", max: 22, min: 7 },
        { icon: "snowy1", max: 10, min: 3 },
        { icon: "sunny", max: 19, min: 5 },
        { icon: "snowy2", max: 10, min: 4 }
      ]
    }
  }
}, B = {
  /** 默认数据 */
  data: { type: Object, default: ie },
  /** 主题参数 */
  theme: { type: Number, default: 1 }
}, F = H(B, Y, U, $, re);
function R(i, p) {
  function n(t) {
    return t < 10 ? "0" + t : t;
  }
  return {
    addZero: n
  };
}
function k(i, p) {
  const n = d(i.data.data);
  return {
    colorTheme: b(() => (/* @__PURE__ */ new Date()).getTime() - n.value.default.sunriseTime.getTime() < 0 || n.value.default.sunsetTime.getTime() - (/* @__PURE__ */ new Date()).getTime() < 0 ? ["#151276", "#7939e0", "#332396", "#814ca7"] : (/* @__PURE__ */ new Date()).getTime() - n.value.default.sunriseTime.getTime() < 36e5 ? ["#49417b", "#f1b655", "#b1785b", "#d99877"] : n.value.default.sunsetTime.getTime() - (/* @__PURE__ */ new Date()).getTime() < 36e5 ? ["#9e2e2e", "#f59b0b", "#c15334", "#ff7361"] : ["#0273D7", "#76BAFF", "#388FFF", "#75C6FE"])
  };
}
function W(i, p) {
  const n = d(i.data.data), t = k(i);
  function a() {
    let c = S.getInstanceByDom(document.getElementById("sunset"));
    c || (c = S.init(document.getElementById("sunset"), null, {
      height: 170,
      width: 380
    })), c.setOption({
      series: [{
        data: [{
          value: (/* @__PURE__ */ new Date()).getTime() - n.value.default.sunriseTime.getTime(),
          itemStyle: {
            borderRadius: 10,
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 1,
                color: t.colorTheme.value ? t.colorTheme.value[3] : "white"
              }, {
                offset: 0,
                color: "white"
              }]
            }
          }
        }, {
          value: n.value.default.sunsetTime.getTime() - (/* @__PURE__ */ new Date()).getTime(),
          itemStyle: {
            opacity: 0
          }
        }],
        type: "pie",
        center: ["50%", "100%"],
        radius: ["200%", "190%"],
        startAngle: 180,
        endAngle: 360,
        label: {
          show: !1
        },
        emphasis: {
          scale: !1
        },
        // 占位圆
        emptyCircleStyle: {
          borderType: "dashed"
        }
      }, {
        type: "gauge",
        center: ["50%", "100%"],
        radius: "220%",
        startAngle: 180,
        endAngle: 360,
        // x轴刻度
        axisTick: {
          show: !1
        },
        // x轴标签
        axisLabel: {
          show: !1
        },
        axisLine: {
          show: !1
        },
        // 切分短线份数
        splitNumber: 20,
        // 单条短线
        splitLine: {
          length: 3,
          lineStyle: {
            width: 10,
            color: "white"
          }
        }
      }]
    });
  }
  function u(c) {
    let m = S.getInstanceByDom(document.getElementById("chart24h"));
    m || (m = S.init(document.getElementById("chart24h"), null, {
      width: 1885,
      height: 75
    })), m.setOption({
      xAxis: {
        type: "category",
        show: !1
      },
      yAxis: {
        type: "value",
        show: !1
      },
      series: [{
        data: n.value.default.dayItemsSet[c].map((v) => v.temp),
        type: "line",
        itemStyle: {
          color: "white"
        }
      }]
    });
  }
  function f() {
    const c = document.getElementById("background");
    if (c) {
      const m = c.getBoundingClientRect().width, v = Math.max(m, 400) * 1.11;
      let s = S.getInstanceByDom(document.getElementById("chart7d"));
      s ? s.resize({
        width: v,
        height: 90
      }) : s = S.init(document.getElementById("chart7d"), null, {
        width: v,
        height: 90
      }), s.setOption({
        grid: {
          left: 0
        },
        xAxis: {
          type: "category",
          show: !1
        },
        yAxis: {
          type: "value",
          show: !1
        },
        series: [{
          data: n.value.default.weekItems.map((w) => w.min),
          type: "line",
          itemStyle: {
            color: "#5C90F9"
          }
        }, {
          data: n.value.default.weekItems.map((w) => w.max),
          type: "line",
          itemStyle: {
            color: "#FC9657"
          }
        }]
      });
    }
  }
  function y() {
    const c = document.getElementById("airPoint"), m = document.getElementById("background");
    c && m && (c.style.marginLeft = n.value.default.air / 500 * (m.getBoundingClientRect().width - 50) - 5 + "px");
  }
  function g(c) {
    a(), u(c), f(), y();
  }
  return {
    renderChart24h: u,
    renderChart7d: f,
    renderCharts: g
  };
}
function oe(i, p) {
  const n = d(), t = d(i.data.data), a = d(0), u = R(), f = W(i);
  function y(l) {
    a.value = l;
  }
  function g(l) {
    switch (l) {
      case 0:
        return "今天";
      case 1:
        return "明天";
      default:
        const o = new Date((/* @__PURE__ */ new Date()).getTime() + 24 * 60 * 60 * 1e3 * l).getDay(), r = "周";
        switch (o) {
          case 0:
            return r + "日";
          case 1:
            return r + "一";
          case 2:
            return r + "二";
          case 3:
            return r + "三";
          case 4:
            return r + "四";
          case 5:
            return r + "五";
          case 6:
            return r + "六";
        }
        break;
    }
  }
  function c(l) {
    const o = new Date((/* @__PURE__ */ new Date()).getTime() + 864e5 * l);
    return u.addZero(o.getMonth() + 1) + "/" + u.addZero(o.getDate());
  }
  function m() {
    const o = n.value.getBoundingClientRect().width - 120, r = document.getElementById("f-weather-24h-content");
    r && (r.offsetLeft + o > -32 ? r.style.marginLeft = "-32px" : r.style.marginLeft = r.offsetLeft + o + "px");
  }
  function v() {
    const l = n.value.getBoundingClientRect().width, o = l - 120, r = document.getElementById("f-weather-24h-content");
    if (r) {
      const x = r.scrollWidth - l - 130;
      r.offsetLeft - o < -x ? r.style.marginLeft = "-" + x + "px" : r.style.marginLeft = r.offsetLeft - o + "px";
    }
  }
  function s(l, o) {
    if (l === 0) {
      const r = /* @__PURE__ */ new Date();
      return o === 0 ? "现在" : u.addZero((r.getHours() + o) % 24);
    } else
      return u.addZero(o);
  }
  O(a, () => {
    const l = document.getElementById("f-weather-24h-content");
    l.style.marginLeft = "-32px", f.renderChart24h(a.value);
  });
  function w() {
    return e("div", {
      class: "f-weather-24h-container"
    }, [e("div", {
      class: "f-weather-24h-title"
    }, [I("24小时天气预报")]), e("div", {
      class: "f-weather-lrbutton-container"
    }, [e("img", {
      src: "/components/weather/src/image/arrow-left.png",
      class: "f-weather-lrbutton-l",
      onClick: m
    }, null), e("img", {
      src: "/components/weather/src/image/arrow-right.png",
      class: "f-weather-lrbutton-r",
      onClick: v
    }, null)]), e("div", {
      class: "f-weather-24h-content-scroll"
    }, [e("div", {
      id: "f-weather-24h-content"
    }, [t.value.default.dayItemsSet.map((l, o) => o === a.value ? e("div", null, [e("tr", {
      id: "report" + o,
      class: "f-weather-24h-tr"
    }, [l.map((r, x) => e("td", {
      class: "f-weather-24h-td"
    }, [e("div", null, [s(o, x)]), e("img", {
      src: "http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/" + r.icon + ".png",
      class: "f-weather-24h-img"
    }, null), e("div", null, [r.temp + "°"])]))])]) : ""), e("div", {
      id: "chart24h",
      class: "f-weather-chart24h"
    }, null)])])]);
  }
  function C() {
    return e("div", {
      class: "f-weather-7d-container"
    }, [e("div", {
      class: "f-weather-7d-title"
    }, [I("七日天气预报")]), e("tr", {
      class: "f-weather-7d-tr"
    }, [t.value.default.weekItems.map((l, o) => e("td", {
      id: "day" + o,
      class: "f-weather-7d-td",
      style: "background-color: " + (o === a.value ? "rgba(0, 0, 0, 0.05)" : "none"),
      onClick: () => y(o)
    }, [e("div", {
      class: "f-weather-7d-td-title"
    }, [g(o)]), e("div", {
      class: "f-weather-7d-td-date"
    }, [c(o)]), e("img", {
      src: "http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/" + l.icon + ".png",
      class: "f-weather-7d-td-img"
    }, null), e("div", {
      class: "f-weather-7d-td-margin"
    }, [l.max + "°"]), e("div", null, [l.min + "°"])]))]), e("div", {
      id: "chart7d",
      class: "f-weather-chart7d"
    }, null)]);
  }
  function h() {
    return e("div", {
      ref: n
    }, [w(), C()]);
  }
  return {
    renderWeatherReport: h
  };
}
function se(i, p) {
  const n = d(i.data.data);
  function t() {
    return e("div", null, [n.value.default.proindexItemsSet.map((a) => e("tr", {
      class: "f-weather-proindex-tr"
    }, [a.map((u) => e("td", {
      class: "f-weather-proindex-td"
    }, [e("div", {
      class: "f-weather-proindex-content-scroll"
    }, [e("div", {
      class: "f-weather-proindex-content"
    }, [e("img", {
      src: "/components/weather/src/image/proindexImage/" + u.icon + ".png",
      class: "f-weather-proindex-icon"
    }, null), e("div", {
      class: "f-weather-proindex-text"
    }, [e("div", {
      class: "f-weather-proindex-title"
    }, [u.title]), e("div", {
      class: "f-weather-proindex-value"
    }, [u.value])]), e("div", {
      class: "f-weather-proindex-line"
    }, null), e("br", null, null), e("div", {
      class: "f-weather-proindex-info"
    }, [u.info]), e("br", null, null), e("div", null, [u.explain])])])]))]))]);
  }
  return {
    renderWeatherProindex: t
  };
}
function le(i, p) {
  const n = d(!0), t = k(i), {
    renderWeatherReport: a
  } = oe(i), {
    renderWeatherProindex: u
  } = se(i), f = b(() => ({
    "background-color": n.value ? t.colorTheme.value[2] : "",
    color: n.value ? "white" : ""
  })), y = b(() => ({
    "background-color": n.value ? "" : t.colorTheme.value[2],
    color: n.value ? "" : "white"
  })), g = b(() => ({
    display: n.value ? "block" : "none"
  })), c = b(() => ({
    display: n.value ? "none" : "block"
  }));
  function m() {
    n.value = !0;
  }
  function v() {
    n.value = !1;
  }
  function s() {
    return e("div", {
      class: "f-weather-container f-weather-detail"
    }, [e("div", {
      style: "display:flex"
    }, [e("button", {
      class: "f-weather-button f-weather-button-report",
      style: f.value,
      onClick: m
    }, [I("天气预报")]), e("button", {
      class: "f-weather-button f-weather-button-proindex",
      style: y.value,
      onClick: v
    }, [I("其它参数")])]), e("div", {
      style: g.value
    }, [a()]), e("div", {
      style: c.value
    }, [u()])]);
  }
  return {
    renderWeatherDetail: s
  };
}
function _(i, p) {
  const n = i.data.cityItems.default, t = d(i.data.data), a = W(i);
  function u(f, y) {
    const g = "https://wis.qq.com/weather/common?source=pc&weather_type=observe|forecast_1h|forecast_24h|index|rise|air&province=" + n[f].province + "&city=" + n[f].city[y];
    q(g, (h, l) => {
      if (h)
        console.error("Error fetching data:", h);
      else {
        const o = l.data;
        t.value.default.temperature = o.observe.degree, t.value.default.max = o.forecast_24h[1].max_degree, t.value.default.min = o.forecast_24h[1].min_degree, t.value.default.weather = o.observe.weather, t.value.default.air = o.air.aqi, t.value.default.sunriseTime = /* @__PURE__ */ new Date(), t.value.default.sunsetTime = /* @__PURE__ */ new Date(), t.value.default.sunriseTime.setHours(Number(o.rise[0].sunrise.split(":")[0])), t.value.default.sunriseTime.setMinutes(Number(o.rise[0].sunrise.split(":")[1])), t.value.default.sunriseTime.setSeconds(0), t.value.default.sunriseTime.setMilliseconds(0), t.value.default.sunsetTime.setHours(Number(o.rise[0].sunset.split(":")[0])), t.value.default.sunsetTime.setMinutes(Number(o.rise[0].sunset.split(":")[1])), t.value.default.sunriseTime.setSeconds(0), t.value.default.sunriseTime.setMilliseconds(0), t.value.default.adviceItems.forEach((x) => {
          x.value = o.index[x.key];
        }), t.value.default.proindexItemsSet[0][0].value = o.index.ultraviolet.info, t.value.default.proindexItemsSet[0][1].value = o.observe.precipitation + "mm";
        let r;
        for (r = 1; r < 8; r++)
          t.value.default.weekItems[r - 1].icon = o.forecast_24h[r].day_weather_code, t.value.default.weekItems[r - 1].max = o.forecast_24h[r].max_degree, t.value.default.weekItems[r - 1].min = o.forecast_24h[r].min_degree;
        for (r = 0; r < 24; r++)
          t.value.default.dayItemsSet[0][r].icon = o.forecast_1h[r].weather_code, t.value.default.dayItemsSet[0][r].temp = o.forecast_1h[r].degree;
        for (r = 0; r < 24 && !(o.forecast_1h[r].update_time.endsWith("000000") && r !== 0); r++)
          ;
        r--;
        for (let x = 0; x < 24; r++, x++)
          t.value.default.dayItemsSet[1][x].icon = o.forecast_1h[r].weather_code, t.value.default.dayItemsSet[1][x].temp = o.forecast_1h[r].degree;
      }
    });
    const c = new Headers();
    c.append("User-Agent", "Win64");
    const m = "location=" + n[f].city[f] + "&public_key=P2yFGyRckTUNG9rFt&ts=" + (/* @__PURE__ */ new Date()).getTime() + "&ttl=3000", s = D.HmacSHA1(m, "Sh3s--_vh1BWqUb_w"), w = encodeURIComponent(s.toString(D.enc.Base64)), C = "https://api.seniverse.com/v3/weather/now.json?" + m + "&sig=" + w;
    fetch(C, {
      method: "GET",
      headers: c
    }).then((h) => {
      if (!h.ok)
        throw new Error("Network response was not ok");
      return h.json();
    }).then((h) => {
      const l = h.results[0].now;
      t.value.default.proindexItemsSet[1][0].value = l.humidity + "%", t.value.default.proindexItemsSet[1][1].value = l.feels_like + "°", t.value.default.proindexItemsSet[2][0].value = l.pressure + "mpa", t.value.default.proindexItemsSet[2][1].value = Math.round(Number(l.visibility)) + "km";
    }).catch((h) => {
      console.error("Error fetching data:", h);
    }), setTimeout(() => {
      a.renderCharts(0);
    }, 500);
  }
  return {
    fetchData: u
  };
}
function ce(i, p) {
  const n = i.data.cityItems.default, t = d(!1), a = d(0), u = d(0), f = d(0), y = _(i), g = k(i), c = b(() => ({
    "background-color": g.colorTheme.value[2]
  }));
  function m() {
    t.value = !t.value, a.value = 0;
  }
  function v() {
    const h = document.getElementById("provinceSelect");
    a.value = h.selectedIndex;
  }
  function s() {
    const h = document.getElementById("provinceSelect"), l = document.getElementById("citySelect");
    u.value = h.selectedIndex, f.value = l.selectedIndex;
    const o = document.getElementById("f-weather-24h-content");
    o.style.marginLeft = "-32px", y.fetchData(u.value, f.value), t.value = !1, a.value = 0;
  }
  function w() {
    return t.value ? e("div", {
      class: "f-weather-city-select"
    }, [e("select", {
      id: "provinceSelect",
      onChange: v
    }, [n.map((h) => e("option", null, [h.province]))]), e("select", {
      id: "citySelect"
    }, [n[a.value].city.map((h) => e("option", null, [h]))]), e("button", {
      class: "f-weather-button f-weather-button-city",
      style: c.value,
      onClick: s
    }, [I("确定")])]) : "";
  }
  function C() {
    return e("div", {
      class: "f-weather-city"
    }, [e("span", {
      class: "f-weather-city-title"
    }, [n[u.value].city[f.value] + "市"]), e("img", {
      src: "/components/weather/src/image/choose.png",
      class: "f-weather-city-icon",
      onClick: m
    }, null), w()]);
  }
  return {
    renderWeatherCity: C
  };
}
function ue(i, p) {
  const n = d(i.data.data), t = R();
  function a() {
    return e("div", null, [e("div", {
      id: "sunset",
      class: "f-weather-sunset-progress"
    }, null), e("div", {
      class: "f-weather-sunset-container"
    }, [e("img", {
      src: "/components/weather/src/image/sunrise.png",
      class: "f-weather-sunrise-img"
    }, null), e("img", {
      src: "/components/weather/src/image/sunset.png",
      class: "f-weather-sunset-img"
    }, null), e("div", null, [e("span", {
      class: "f-weather-sunrise-text"
    }, [t.addZero(n.value.default.sunriseTime.getHours()) + ":" + t.addZero(n.value.default.sunriseTime.getMinutes())]), e("span", {
      class: "f-weather-sunset-text"
    }, [t.addZero(n.value.default.sunsetTime.getHours()) + ":" + t.addZero(n.value.default.sunsetTime.getMinutes())])])])]);
  }
  return {
    renderWeatherSunset: a
  };
}
function de(i, p) {
  const n = i.data.themeItems.default, t = d(i.theme), a = d(i.data.data), u = b(() => ({
    "animation-name": "icon",
    "animation-duration": "0.8s",
    "animation-iteration-count": "infinite"
  })), f = b(() => a.value.default.air <= 50 ? "优" : a.value.default.air <= 100 ? "良" : a.value.default.air <= 150 ? "轻度污染" : a.value.default.air <= 200 ? "中度污染" : a.value.default.air <= 300 ? "重度污染" : "严重污染"), y = b(() => a.value.default.air > 300 ? {
    type: "smog",
    color: "red",
    title: "雾霾红色预警"
  } : a.value.default.air > 200 ? {
    type: "smog",
    color: "orange",
    title: "雾霾橙色预警"
  } : a.value.default.air > 150 ? {
    type: "smog",
    color: "yellow",
    title: "雾霾黄色预警"
  } : (
    // 是否高温
    Math.max(...a.value.default.dayItemsSet[0].map((s) => s.temp)) > 40 ? {
      type: "highTemp",
      color: "red",
      title: "高温红色预警"
    } : Math.max(...a.value.default.dayItemsSet[0].map((s) => s.temp)) > 37 ? {
      type: "highTemp",
      color: "orange",
      title: "高温橙色预警"
    } : a.value.default.weekItems[0].max > 35 && a.value.default.weekItems[1].max > 35 && a.value.default.weekItems[2].max > 35 ? {
      type: "highTemp",
      color: "yellow",
      title: "高温黄色预警"
    } : (
      // 是否低温
      Math.max(...a.value.default.dayItemsSet[0].map((s) => s.temp)) <= 0 && a.value.default.dayItemsSet[0][0].temp > 16 ? {
        type: "lowTemp",
        color: "red",
        title: "低温红色预警"
      } : Math.max(...a.value.default.dayItemsSet[0].map((s) => s.temp)) <= 0 && a.value.default.dayItemsSet[0][0].temp > 12 ? {
        type: "lowTemp",
        color: "orange",
        title: "低温橙色预警"
      } : Math.max(...a.value.default.dayItemsSet[0].map((s) => s.temp)) <= 4 && a.value.default.dayItemsSet[0][0].temp > 14 ? {
        type: "lowTemp",
        color: "yellow",
        title: "低温黄色预警"
      } : null
    )
  ));
  function g() {
    return y.value ? e("span", {
      class: "f-weather-warning-container"
    }, [e("span", {
      class: "f-weather-warning"
    }, [e("img", {
      src: "/components/weather/src/image/warningImage/" + (y.value.type + "-" + y.value.color) + ".png",
      class: "f-weather-warning-icon",
      style: y.value ? u.value : ""
    }, null), e("span", {
      class: "f-weather-warning-text"
    }, [I(" "), y.value.title])])]) : "";
  }
  function c() {
    return e("div", {
      class: "f-weather-information-text f-weather-advice-container"
    }, [a.value.default.adviceItems.map((s) => n[t.value].adviceItems.includes(s.key) ? e("span", {
      class: "f-weather-advice"
    }, [e("span", null, [s.value.name, I("："), s.value.info]), n[t.value].adviceItems.indexOf(s.key) !== 2 ? e("span", {
      class: "f-weather-advice-line"
    }, null) : "", e("span", {
      class: "f-weather-advice-text"
    }, [s.value.detail])]) : "")]);
  }
  function m() {
    return e("div", {
      class: "f-weather-air"
    }, [e("div", {
      class: "f-weather-air-title"
    }, [I("空气质量："), a.value.default.air + " - " + f.value]), e("div", {
      class: "f-weather-air-progress"
    }, [e(M("f-progress"), {
      percent: 100,
      enableBackgroundImg: !0,
      backgroundImg: "linear-gradient(90deg, #01C84C 0%, #F7FF01 26%, #FF0000 53%, #800080 78%, #A52A2A 100%)"
    }, null), e("img", {
      src: "/components/weather/src/image/point.png",
      id: "airPoint",
      class: "f-weather-air-point"
    }, null)])]);
  }
  function v() {
    return e("div", {
      class: "f-weather-information-container"
    }, [e("div", {
      class: "f-weather-information"
    }, [e("div", {
      class: "f-weather-information-row1"
    }, [e("span", {
      class: "f-weather-temperature"
    }, [a.value.default.temperature + " °"]), e("span", {
      class: "f-weather-weather"
    }, [a.value.default.weather])]), e("div", {
      class: "f-weather-information-row2"
    }, [g()])]), e("div", {
      class: "f-weather-information-text f-weather-maxmin"
    }, [a.value.default.min + "° ~ " + a.value.default.max + "°"]), c(), m()]);
  }
  return {
    renderWeatherInformation: v
  };
}
function me(i, p) {
  const n = d(!1), {
    renderWeatherDetail: t
  } = le(i), {
    renderWeatherCity: a
  } = ce(i), {
    renderWeatherSunset: u
  } = ue(i), {
    renderWeatherInformation: f
  } = de(i), y = b(() => ({
    "border-bottom-left-radius": n.value ? "0px" : null,
    "border-bottom-right-radius": n.value ? "0px" : null
  })), g = b(() => ({
    display: n.value ? "block" : "none"
  }));
  function c() {
    n.value = !n.value;
  }
  function m() {
    return e("div", {
      class: "f-weather-header"
    }, [a(), e("button", {
      class: "f-weather-button f-weather-button-detail",
      onClick: c
    }, [n.value ? e("div", null, [I("隐藏详细信息")]) : e("div", null, [I("显示详细信息")])])]);
  }
  function v() {
    return e("div", null, [e("div", {
      class: "f-weather-container",
      style: y.value
    }, [m(), u(), f()]), e("div", {
      style: g.value
    }, [t()])]);
  }
  return {
    renderWeatherHome: v
  };
}
const T = /* @__PURE__ */ E({
  name: "FWeather",
  components: {
    "f-progress": A
  },
  props: B,
  emits: [],
  setup(i, p) {
    const n = d(), t = d(i.data.data), a = k(i), u = W(i), f = _(i), {
      renderWeatherHome: y
    } = me(i), g = b(() => ({
      "background-image": "linear-gradient(132deg, " + a.colorTheme.value[0] + " 0%, " + a.colorTheme.value[1] + " 100%)"
    }));
    function c() {
      const m = n.value.getBoundingClientRect().width, v = document.getElementById("airPoint"), s = Math.max(n.value.getBoundingClientRect().width, 400);
      v && (v.style.marginLeft = t.value.default.air / 500 * (s - 50) - 5 + "px");
      const w = document.getElementById("f-weather-24h-content");
      if (w) {
        const C = w.scrollWidth - m - 130;
        w.offsetLeft < -C && (w.style.marginLeft = "-" + Math.max(C, 32) + "px");
      }
      u.renderChart7d();
    }
    return j(() => {
      L(n.value, c), f.fetchData(0, 0);
    }), () => e("div", {
      ref: n,
      id: "background",
      class: "f-weather-background",
      style: g.value
    }, [y()]);
  }
}), fe = /* @__PURE__ */ E({
  name: "FWeatherDesign",
  components: {
    "f-progress": A
  },
  props: B,
  emits: [],
  setup(i, p) {
    const n = d(), t = P("design-item-context"), a = Z(n, t);
    return j(() => {
      n.value.componentInstance = a;
    }), p.expose(a.value), () => e(T, {
      ref: n
    }, null);
  }
}), be = {
  install(i) {
    i.component(T.name, T);
  },
  register(i, p, n, t) {
    i.weather = T, p.weather = F;
  },
  registerDesigner(i, p, n) {
    i.weather = fe, p.weather = F;
  }
};
export {
  T as Weather,
  be as default,
  F as propsResolver,
  B as weatherProps
};