scd_tools_ui/src/pages/mission/MissionVue.vue

<template>
    <div>
        <div class="bigBox">
            <!-- 三按钮盒子 -->
            <div class="btnBox">
                <template v-for="(item, index) in btnList">
                    <span :class="btnSelect == index ? 'result' : 'nowMission'" @click="misChange(item, index)">{{ item.name
                    }}</span>
                </template>
                <!-- <router-link to="/home/int">测试</router-link> -->
            </div>
            <!-- 功能盒子 -->
            <div class="settingBox">
                <!-- 无检测任务时显示的盒子 -->
                <NoBox v-if="btnSelect == 0 && taskList.length == 0 && sizeNum == 0" :btnSelect="btnSelect"
                    :taskList="taskList" @backToMission="backToMission"></NoBox>
                <!-- 有检测任务的盒子 -->
                <HaveMis v-if="btnSelect == 0 && taskList.length != 0 && sizeNum == 0" @hmBack="hmBack"
                    @haveBack="haveBack"></HaveMis>
                <!-- 新建任务盒子 -->
                <CreateNew v-if="btnSelect == 1" :btnSelect="btnSelect" :taskList="taskList" @createBack="createBack">
                </CreateNew>
                <!-- 正在检测盒子 -->
                <StartMission v-if="btnSelect == 0 && sizeNum == 1" @smBack="smBack" :startMis="startMis"></StartMission>
                <HistoryMis v-if="btnSelect == 2"></HistoryMis>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import NoBox from './components/NoMisBox'
import CreateNew from './components/CreateMis'
import HaveMis from './components/HaveMis.vue';
import StartMission from './components/StartMission.vue';
import HistoryMis from './components/HistoryMis.vue';
import task from '@/api/task';
export default {
    setup() {
        document.documentElement.style.fontSize = (window.innerWidth / 1920 * 12) + "px"
        let sizeNum = ref(0)//判断是否开始检测。0为未开始，1为开始
        let btnList = ref([
            {
                name: "当前检测任务",
                value: "1"
            },
            {
                name: "新建检测任务",
                value: "2",
            },
            {
                name: "历史任务",
                value: "3"
            }
        ])//按钮列表
        let taskList = ref([])//任务表单
        let btnSelect = ref(0)//选择的菜单
        let startMis = ref({})//开始检测
        function searchAllTask() {
            task.getTask({}).then(res => {
                if (res.data) {
                    taskList.value = res.data
                }
            })
        }
        function misChange(row, num) {
            btnSelect.value = num
            console.log(num,'num');
        }
        function createMis() {
            btnSelect.value = 1
        }
        function backToMission(data) {
            btnSelect.value = data
        }
        function hmBack(data, obj) {
            startMis.value = obj
            sizeNum.value = data
        }
        function smBack(data) {
            sizeNum.value = data
        }
        function createBack(data) {
            btnSelect.value = data
        }
        function haveBack(data) {
            if (data == null) {
                taskList.value = []
            } else {
                taskList.value = data
            }
        }
        onMounted(() => {
            searchAllTask()
        })
        return {
            btnList,//按钮列表
            btnSelect,//按钮切换class
            misChange,//按钮切换点击事件
            createMis,//点击创建新任务
            searchAllTask,//获取所有检测任务
            taskList,//选择的菜单
            backToMission,//返回的菜单数据
            sizeNum,//判断是否开始检测
            hmBack,//开始检测子组件返回
            smBack,//
            haveBack,
            createBack,//createMix.vue返回的菜单栏
            startMis,//需要检测的任务名称
        }
    },
    components: {
        NoBox,
        CreateNew,
        HaveMis,
        StartMission,
        HistoryMis,
    }
}
</script>

<style scoped>
.bigBox {
    width: 99%;
    height: calc(100vh - 100px);
    /* border: 1px solid salmon; */
    /* overflow: hidden; */
}

.btnBox {
    width: 99%;
    height: 50px;
    /* border: 1px solid rebeccapurple; */
}

.settingBox {
    width: 100%;
    height: calc(100vh - 220px);
    /* margin-top: -65px; */
    margin-left: 10px;
}

.nowMission {
    display: inline-block;
    width: 110px;
    height: 40px;
    margin-left: 10px;
    margin-top: 5px;
    cursor: pointer;
    background-color: gray;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: white;
    border-radius: 8px;
}

.result {
    display: inline-block;
    width: 110px;
    height: 40px;
    margin-left: 10px;
    margin-top: 5px;
    cursor: pointer;
    background: linear-gradient(to bottom, #ADD8F9, #5779D7);
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: white;
    border-radius: 8px;
}

.noMisBox {
    width: 200px;
    height: 200px;
    margin: 80px auto;
    text-align: center;
    line-height: 20px;
}

.createMisp {
    width: 240px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}


.bestInput {
    width: 550px;
    height: 40px;
    border-radius: 2px 2px 2px 2px;
}
</style>