easydo-ops/src/views/dataMock/env/components/monos.vue

<template>
    <el-main>
        <el-card>
            <template #header>Group任务池配置<el-button type="primary" @click="mono_detail">任务列表</el-button></template>

            <el-form>
                <el-row :gutter="15">
                    <el-col :span="8">
                        <el-form-item label="最大组任务数:">{{ XEUtils.get(defaultGroups, "configs.maxGroupQueues") }}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="队列最大任务数:">{{ XEUtils.get(defaultGroups, "configs.maxQueueLimit") }}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="最大并发队列数:">{{ XEUtils.get(defaultGroups, "configs.maxQueues") }}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="队列任务间隔(秒):">{{ XEUtils.get(defaultGroups, "configs.taskIntervalSeconds") }}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="重试任务间隔(秒):">{{ XEUtils.get(defaultGroups, "configs.taskRetryInterval") }}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务最大重试次数(秒):">{{ XEUtils.get(defaultGroups, "configs.taskRetryTimes") }}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务最大等待时间(秒):">{{ XEUtils.get(defaultGroups, "configs.taskWaitSeconds") }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card>
            <el-form>
                <el-form-item label="workers忙碌数量:">0</el-form-item>
                <el-form-item label="workers空闲数量:">50</el-form-item>
                <el-form-item label="Groups忙碌数量:">0</el-form-item>
                <el-form-item label="Groups队列数量:">0</el-form-item>
                <el-form-item label="mono总数:">0</el-form-item>
            </el-form>
        </el-card>
        <div class="echart-bar">
            <sc-echarts :option="option" @chartClick="chart_click"></sc-echarts>
        </div>
    </el-main>

    <mono-detail v-if="dialog" ref="monoRef" @closed="dialog = false"></mono-detail>
</template>

<script setup>
import XEUtils from "xe-utils"
import { defaultGroups } from "../../main";
import monoDetail from "../mono/index"

const $emit = defineEmits(["closed"]);

const option = ref({
    grid: { left: "5%", right: "10%", bottom: 60 },
    dataZoom: [
        { type: "inside", endValue: 15, zoomLock: true }, { 
        type: "slider",
        showDetail: false,
        moveHandleIcon: "none", // 移动手柄
        moveHandleStyle: { opacity: 0 }
    }],
    xAxis: {
        name: "workers",
        nameTextStyle: { fontSize: 14, color: "#606266" },
        axisLabel: { color: '#5d5d5d', rotate: -30 },
        data: XEUtils.keys(XEUtils.get(defaultGroups, "workers"))
    },
    yAxis: {
        name: "mono",
        type: "value",
        min: 0,
        max: XEUtils.max([8, 5]),
        nameTextStyle: { fontSize: 14, color: "#606266" },
        minInterval: 1,
        axisLabel: { color: '#5d5d5d' },
        axisLine: { show: true, lineStyle: { color: "#d3d2d3" } },
        splitLine: { show: false }
    },
    series: [{
        type: "bar",
        data: [8, 5],
        animationDuration: 2500,
        animationDurationUpdate: 2500
    }]
})

const dialog = ref(false);
const monoRef = ref();
const chart_click = ({ name }) => {
    dialog.value = true;
    nextTick(() => monoRef.value.open(XEUtils.get(defaultGroups, `groups.${name}.monos`)));
}

const mono_detail = () => {
    dialog.value = true;
    nextTick(() => monoRef.value.open());
}
</script>

<style lang="scss" scoped>
.el-main {padding: 0 12px 12px;background: #fff;}
.el-card :deep(.el-card__header) {display: flex;justify-content: space-between;align-items: center;padding-left: 20px;background: #f9fdff;font-weight: 700;}
.el-card :deep(.el-card__body) {padding: 10px var(--el-card-padding);}
.el-card + .el-card {margin-top: 10px;}

.el-form .el-form-item {margin-bottom: 0;}
.el-form :deep(.el-form-item__content) {font: 22px calculator-all;color: #1890ff;letter-spacing: 2px;}

.el-card + .el-card .el-form {display: flex;justify-content: space-evenly;}

.echart-bar {width: 100%;height: 400px;}
</style>