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'" :style="{
                        background: `url(${item.isSelected ? item.isImg : item.noImg})`,
                        color: item.isSelected ? 'white' : 'black',
                    }" @click="misChange(item, index)">{{ item.name }}</span>
                </template>
            </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" @moreBack="moreBack" @hmBack="hmBack"
                    @haveBack="haveBack" @haveInCreate="haveInCreate"></HaveMis>
                <!-- 新建任务盒子 -->
                <CreateNew v-if="btnSelect == 1" :btnSelect="btnSelect" :taskList="taskList" :editRow="editRow"
                    :status="status" @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';
import blueBtn from '@/assets/image/btn_blue.png'
import grayBtn from '@/assets/image/btn_gray.png'
export default {
    setup() {
        document.documentElement.style.fontSize = (window.innerWidth / 1920 * 12) + "px"
        let sizeNum = ref(0)//判断是否开始检测。0为未开始，1为开始
        let btnList = ref([
            {
                name: "当前检测任务",
                id: 1,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: true, // 初始状态未选中
                value: "1"
            },
            {
                name: "新建检测任务",
                id: 2,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: false, // 初始状态未选中
                value: "2"
            },
            {
                name: "历史任务",
                id: 3,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: false, // 初始状态未选中
                value: "3"
            }
        ])//按钮列表
        let taskList = ref([])//任务表单
        let btnSelect = ref(0)//选择的菜单
        let startMis = ref({})//开始检测
        let editRow = ref({})//需要编辑的任务
        let status = ref(0)
        function searchAllTask() {
            // 0为待检测
            task.getTask({ pageno: 1, pagesize: 10, state: 0 }).then(res => {
                if (res.data == null) {
                    return
                } else {
                    taskList.value = res.data
                }
            })
            // 2为完成检测
            task.getTask({ pageno: 1, pagesize: 10, state: 2 }).then(res => {
                if (res.data == null) {
                    return
                } else {
                    taskList.value = res.data
                }
            })
            // 1为正在检测
            task.getTask({ pageno: 1, pagesize: 10, state: 1 }).then(res => {
                if (res.data == null) {
                    return
                } else {
                    taskList.value = res.data
                }
            })
        }
        function misChange(row, num) {
            btnSelect.value = num
            if (num == 1) {
                status.value = 1
            }
            // 将当前点击的标签设为选中状态，其他标签设为非选中
            btnList.value.forEach((tag) => {
                tag.isSelected = tag.id === row.id;
            });
        }
        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
            btnList.value.forEach((tag) => {
                tag.isSelected = tag.id === data + 1;
            });
        }
        function haveBack(data) {
            if (data == null) {
                taskList.value = []
            } else {
                taskList.value = data
            }
        }
        function moreBack(data) {
            btnSelect.value = data
            btnList.value.forEach((tag) => {
                tag.isSelected = tag.id === data + 1;
            });
        }
        function haveInCreate(data, row, num) {
            btnSelect.value = data
            editRow.value = row
            status.value = num
            btnList.value.forEach((tag) => {
                tag.isSelected = tag.id === data + 1;
            });
        }
        onMounted(() => {
            searchAllTask()
        })
        return {
            btnList,//按钮列表
            btnSelect,//按钮切换class
            misChange,//按钮切换点击事件
            createMis,//点击创建新任务
            searchAllTask,//获取所有检测任务
            taskList,//选择的菜单
            backToMission,//返回的菜单数据
            sizeNum,//判断是否开始检测
            hmBack,//开始检测子组件返回
            smBack,//
            haveBack,
            createBack,//createMix.vue返回的菜单栏
            startMis,//需要检测的任务名称
            haveInCreate,//havemis.vue返回的进入到创建任务vue
            editRow,//需要编辑的任务
            status,
            moreBack,
        }
    },
    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>