ptools/templates/auto_pt/restart.html

{% load static %}

<!-- 引入样式 -->

<link rel="stylesheet" href="{% static 'admin/simpleui-x/elementui/theme-chalk/index.css' %}">
<!-- 引入组件库 -->

<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>
                <el-popover
                        placement="top-start"
                        title="友情提示"
                        width="200"
                        trigger="hover"
                        content="如果遇到无法更新的情况，您可以选择重建容器或者进入容器命令行到项目根目录执行`git pull`命令！">
                    <el-button slot="reference">更新提示</el-button>
                </el-popover>
                  <el-link type="success">{{ update_tips }}</el-link>


            </span>
            <span style="float: right;margin-top: -10px">
{#                 <el-button type="primary" @click="get_update">获取更新</el-button>#}
                 <el-button type="success" @click="do_update" v-if="update">更新</el-button>
                 <el-button type="danger" @click="do_restart" v-if="restart">重启</el-button>
            </span>
        </div>
        <div class="text item">
            <el-row>
                <el-col :span="local_log_width">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>本地日志</span>
                        </div>
                        <el-timeline>
                            <el-timeline-item
                                    v-for="(update_note, index) in local_logs"
                                    :key="index"
                                    {#                        :icon="activity.icon"#}
                                    {#                        :type="activity.type"#}
                                    color="#0bbd87"
                                    {#                        :size="activity.size"#}
                                    :timestamp="update_note.date">
                                <el-card shadow="hover">
                                    <p v-for="content in update_note.data" v-html="content">
                                    </p>
                                </el-card>

                            </el-timeline-item>
                        </el-timeline>
                    </el-card>
                </el-col>
                <el-col :span="12" v-if="update">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>更新日志</span>
                        </div>
                        <el-timeline>
                            <el-timeline-item
                                    v-for="(update_note, index) in update_notes"
                                    :key="index"
                                    {#                        :icon="activity.icon"#}
                                    {#                        :type="activity.type"#}
                                    color="#0bbd87"
                                    {#                        :size="activity.size"#}
                                    :timestamp="update_note.date">
                                <el-card shadow="hover">
                                    <p v-for="content in update_note.data" v-html="content">
                                    </p>
                                </el-card>

                            </el-timeline-item>
                        </el-timeline>
                    </el-card>
                </el-col>
            </el-row>

        </div>
    </el-card>
</div>

<script src="{% static 'admin/simpleui-x/js/vue.min.js' %}"></script>
<script src="{% static 'admin/simpleui-x/elementui/index.js' %}"></script>
<script src="{% static 'admin/simpleui-x/js/axios.min.js' %}"></script>

<script type="text/javascript">
    // 配置对象 options
    const vm = new Vue({
        // 配置选项(option)
        // element: 指定用vue来管理页面中的哪个标签区域
        el: '#app',
        data: {
            update_notes: {{ update_notes|safe }},
            local_logs: {{ local_logs|safe }},
            restart:{{ restart }},

            update: false,
            {#update_log: false,#}
            local_log_width: 24
        },
        created() {
            this.update =
            {{ update }}

            if (this.update) {
                this.local_log_width = 12

            }
            this.$message({
                showClose: true,
                message: "{{ update_tips }}",
                type: 'success'
            });
        },
        methods: {
            do_restart() {
                this.$confirm('此操作将重启容器，并更新软件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_restart" %}"
                        {#url + '/task/do_restart'#}
                    ).then(res => {
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                        } else {
                            console.log(res)
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }

                    }).catch(res => {
                        this.$message({
                            type: 'error',
                            message: "重启失败！"
                        });
                    })

                }).catch(res => {
                    console.log(res)
                    this.$message({
                        type: 'info',
                        message: '已取消重启'
                    });
                });
            },
            get_update() {
                axios.get(
                    "{% url "do_get_update" %}"
                ).then(res => {
                    if (res.data.code === 0) {
                        console.log(res.data)
                        this.update_notes = res.data.data.update_notes
                        {#this.update_log = true#}
                        this.local_log_width = 12
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    } else {
                        console.log(res)
                        this.$message({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                }).catch(res => {
                    console.log(res)
                    this.$message({
                        type: 'info',
                        message: '获取更新失败！'
                    });
                });
            },
            do_update() {
                this.$confirm('此操作会拉取软件更新软件,新版本不一定稳定，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_update" %}"
                        {#url + '/task/do_restart'#}
                    ).then(res => {
                        if (res.data.code === 0) {
                            console.log(res, 1)
                            this.update_note = res.data.data
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                        } else {
                            console.log(res, 2)
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }).catch(res => {
                        console.log(res, 3)
                        this.$message({
                            type: 'error',
                            message: "更新失败！"
                        });
                    })

                }).catch(res => {
                    console.log(res)
                    this.$message({
                        type: 'warning',
                        message: '已取消更新'
                    });
                });
            }
        }
    });
</script>