tk-page-Fan/src/views/hosts/workbenches.vue

<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>工作台 </span>
                </div>
            </template>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="input-group">
                        <label>设置金币数量</label>
                        <el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
                            placeholder="最小值" style="width: 100%">
                            <template #prepend>最小金币数</template>
                        </el-input>
                        <el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
                            placeholder="最大值" style="width: 100%; margin-top: 10px"> <template #prepend>最大金币数</template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="input-group">
                        <label>设置粉丝数量</label>
                        <el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
                            placeholder="最小值" style="width: 100%">
                            <template #prepend>最小粉丝数</template>
                        </el-input>
                        <el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
                            placeholder="最大值" style="width: 100%; margin-top: 10px">
                            <template #prepend>最大粉丝数</template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="input-group">
                        <label>后台查询频率</label>
                        <el-input type='number' v-model="pyData.frequency.min" :min="0" :max="pyData.frequency.max - 1"
                            placeholder="次/小时" style="width: 100%">
                            <template #append>次/小时</template>
                        </el-input>
                        <el-input type='number' v-model="pyData.frequency.max" :min="pyData.frequency.min + 1"
                            :max="100" placeholder="次/24小时" style="width: 100%; margin-top: 10px">
                            <template #append>次/24小时</template>
                        </el-input>
                    </div>
                </el-col>
            </el-row>
            <div style="margin-top: 20px; text-align: center">
                <el-button v-show="pyData.isStart" type="primary" @click="submit">开始获取数据</el-button>
                <el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">停止获取</el-button>
                <el-button @click="reset">重置数据</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { usePythonBridge } from '@/utils/pythonBridge'
import { setNumData, getNumData } from '@/utils/storage'
import { ElMessage } from 'element-plus'

const { fetchDataConfig } = usePythonBridge();

let pyData = ref({
    gold: { min: 0, max: 0 },
    fans: { min: 0, max: 0 },
    frequency: { min: 0, max: 0 },
    isStart: true,
    country: 'CN'
});

//提交数据到py
const submit = () => {
    // console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);

    setNumData(pyData.value);

    fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
        ElMessage.sussec('提交成功')
        pyData.value.isStart = false;
    }).catch((err) => {
        ElMessage.error('提交失败')
    })
};

//停止
const unsubmit = () => {
    fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
        pyData.value.isStart = true;

        alert('已停止' + res);
    }).catch((err) => {
        alert('停止失败', err);
    })
};

//重置
const reset = () => {
    pyData.value.gold = { min: 0, max: 0 };
    pyData.value.fans = { min: 0, max: 0 };
    pyData.value.frequency = { min: 0, max: 0 };
};


onMounted(() => {
    console.log(getNumData())
    if (getNumData()) {
        pyData.value = getNumData();
    }

})
</script>

<style scoped>
.container {
    margin: 0 auto;
    padding: 20px;
}

.box-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #606266;
}
</style>