#!/usr/bin/python
# encoding: utf-8
from datetime import datetime


import requests
import base64
from bs4 import BeautifulSoup

if __name__ == '__main__':
    fileName = datetime.now().strftime('%y_%m_%d_%H')
    with open('/usr/local/yuanfunApp/nginx/html/weatherFy4b/'+fileName+'.js', 'a') as file:
        file.write('const all_image = {
')

    headers = {
        "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36",
        "accept-language": "zh-CN,zh;q=0.9",
    }
    resp = requests.get(url="http://www.nmc.cn/publish/satellite/fy4b-visible.htm", headers=headers)

    html = resp.content.decode('utf-8')
    soup = BeautifulSoup(html, 'lxml')
    time_wrap = soup.select('#timeWrap')
    parent = time_wrap[0]
    url_trs = parent.find_all('div', attrs={'data-fffmm': '000'})
    for url in url_trs:
        # print('-------------------------------------------------------------')
        data_img = url.get("data-img")
        data_time = url.get("data-time")
        # print(data_time+'-->'+data_img)
        response = requests.get(data_img)
        # 确保请求成功
        if response.status_code == 200:
            # 将图片内容编码为base64
            image_base64 = base64.b64encode(response.content).decode('utf-8')
            parsed_date = datetime.strptime(data_time, '%m/%d %H:%M')
            formatted_date = parsed_date.strftime('_%m_%d_%H_%M')
            with open('/usr/local/yuanfunApp/nginx/html/weatherFy4b/'+fileName+'.js', 'a') as file:
                # 追加一行文本
                file.write(formatted_date+': "data:image/jpeg;base64,'+image_base64+'",
')
        else:
            print("Failed to retrieve image")

    with open('/usr/local/yuanfunApp/nginx/html/weatherFy4b/'+fileName+'.js', 'a') as file:
        file.write('}
')

0 0,12 * * * /usr/bin/python /usr/local/yuanfunApp/weatherFy4b/weatherFy4b.py >> /dev/null 2>&1

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>天气云图</title>
    <link rel="icon" type="image/x-icon" href="img/logo_64.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/vue3.js"></script>
</head>
<body>

<main id="app">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div>{{currentImg}}</div>
    <img :src="imageData" style="height: 540px; width: 860px">
    <input type="range" class="form-range" v-bind:min="0" v-bind:max="keyLength" v-bind:value="keyIndex" step="1" id="customRange" @change="rangeChange($event)">
    <div>
        <button type="button" class="btn btn-sm btn-primary" @click="play">播放</button>
        <button type="button" class="btn btn-sm btn-danger"@click="stop">暂停</button>
        <button type="button" class="btn btn-sm btn-danger"@click="genAllDownloadReq">测试动态加载</button>
    </div>
</main>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="data/images.js"></script>
<script>
    Vue.createApp({
        el: '#app',
        data() {
            return {
                imageData: "",
                imageDataTest: "111",
                interval: 1,
                keys: [],
                keyLength: 0,
                keyIndex: 0,
                currentImg: "",
            }
        },

        methods: {

            loadScript(url) {
                console.log("开始动态加载JS...")
                let xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        let script = document.createElement('script');
                        script.text = xhr.responseText;
                        console.log(xhr.responseText)
                        document.body.appendChild(script);
                    }
                };
                xhr.send();
                console.log("加载JS完成")
            },


            genAllDownloadReq(){
                let date = new Date("2024-11-01T00:00:00")
                while (true) {
                    date = new Date(date.getTime() + 12*60*60*1000)
                    let calcuTime = date.getTime();
                    let now = new Date().getTime();
                    if (calcuTime > now){
                        break
                    }
                    let dateFormat = this.formatDateHour(date)
                    console.log('http://82.157.204.147/weatherFy4b/'+dateFormat+'.js')
                    this.loadScript('http://82.157.204.147/weatherFy4b/'+dateFormat+'.js')
                    this.buildByDay(date)
                }
            },

            formatDateHour(date) {
                // const year = date.getFullYear();
                const year = date.getFullYear().toString().slice(-2);
                const month = ('0' + (date.getMonth() + 1)).slice(-2);
                const day = ('0' + date.getDate()).slice(-2);
                const hour = ('0' + date.getHours()).slice(-2);
                return `${year}_${month}_${day}_${hour}`;
            },

            formatDate(date) {
                // const year = date.getFullYear();
                const month = ('0' + (date.getMonth() + 1)).slice(-2);
                const day = ('0' + date.getDate()).slice(-2);
                const hour = ('0' + date.getHours()).slice(-2);
                const minute = ('0' + date.getMinutes()).slice(-2);
                // const second = ('0' + date.getSeconds()).slice(-2);
                // return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
                return `_${month}_${day}_${hour}_${minute}`;
            },

            rangeChange(e){
                let i = e.target.valueAsNumber-1
                this.imageData = Reflect.get(all_image, this.keys[i])
                this.currentImg = this.keys[i]
                this.keyIndex = i+1
            },

            buildByDay(date){
                this.keys = []
                let dateFormat = this.formatDate(date)
                this.keys.push(dateFormat)
                while (true) {
                    var date2 = new Date(date.getTime() + 15*60*1000)
                    let calcuTime = date2.getTime();
                    let now = new Date(date.getTime() + 12*60*60*1000);
                    if (calcuTime > now){
                        break
                    }
                    let dateFormat = this.formatDate(date)
                    if (Reflect.has(all_image, dateFormat)){
                        this.keys.push(dateFormat)
                        console.log(dateFormat)
                    }
                }
                this.keyLength = this.keys.length
                this.play()
            },

            startInterval(){
                let date = new Date("2024-10-29T21:30:00")
                let dateFormat = this.formatDate(date)
                this.keys.push(dateFormat)
                while (true) {
                    date = new Date(date.getTime() + 15*60*1000)
                    let calcuTime = date.getTime();
                    let now = new Date().getTime();
                    if (calcuTime > now){
                        break
                    }
                    let dateFormat = this.formatDate(date)
                    if (Reflect.has(all_image, dateFormat)){
                        this.keys.push(dateFormat)
                        console.log(dateFormat)
                    }
                }
                this.keyLength = this.keys.length
                this.play()
            },

            stop(){
                clearInterval(this.interval)
            },

            play(){
                let index = 0
                this.interval = setInterval(() => {
                    if (index >= this.keys.length) {
                        clearInterval(this.interval)
                        return
                    }
                    console.log(this.keys[index])
                    this.imageData = Reflect.get(all_image, this.keys[index])
                    this.currentImg = this.keys[index]
                    this.keyIndex = index+1
                    index++
                }, 20);
            },
        },

        mounted() {
            this.startInterval()
        },

    }).mount('#app');
</script>
</body>
</html>