V2 完成HEADmain

8 files changed, 1201 insertions, 0 deletions

diff --git a/src/views/menuMBZTGZ/module/image.vue b/src/views/menuMBZTGZ/module/image.vue
new file mode 100644
index 0000000..c5d2b04
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/image.vue
@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <span style="color: #dfe6ec;font-size: 20px;float: left;margin-left: 3%;margin-top: 2%">已探测目标</span>
+        <div class="box" id="show-loading" v-loading="loading">
+            <div class="card">
+                <div class="title">IPv6</div>
+                <div>
+                    <span class="info-span">{{ target.v6dns }}</span>
+                    <span class="unit-span">个</span>
+                </div>
+            </div>
+            <div class="card">
+                <div class="title">DNSSEC</div>
+                <div>
+                    <span class="info-span">{{ target.dnssec }}</span>
+                    <span class="unit-span">个</span>
+                </div>
+            </div>
+            <div class="card">
+                <div class="title">DoT</div>
+                <div>
+                    <span class="info-span">{{ target.dot }}</span>
+                    <span class="unit-span">个</span>
+                </div>
+            </div>
+            <div class="card">
+                <div class="title">DoH</div>
+                <div>
+                    <span class="info-span">{{ target.doh }}</span>
+                    <span class="unit-span">个</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+</template>
+
+<script>
+import { Loading } from 'element-ui'
+import { getTargetsResponse } from './imageMock.js'
+export default {
+    name: 'imageView',
+    data() {
+        return {
+            loading: false,
+            imageData: {},
+            target:{
+                dnssec:0,
+                doh:0,
+                dot:0,
+                v6dns:0
+            }
+        }
+    },
+    created() {
+        this.init()
+    },
+    mounted() {
+        // this.init()
+    },
+    methods: {
+        init () {
+            // this.imageData = getTargetsResponse?.result
+            this.loading = true
+            this.$axios.get(this.$http.api.sysNum).then(res => {
+                if (res.code == 200) {
+                    this.target.dnssec=res?.target?.dnssec
+                    this.target.doh=res?.target?.doh
+                    this.target.dot=res?.target?.dot
+                    this.target.v6dns=res?.target?.v6dns
+
+                }
+            }).catch(err => {
+                console.log(err)
+            }).finally(() => {
+                this.loading = false
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 80%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .card {
+        flex: 1;
+        .title {
+            color: #FFF;
+            font-family: PingFang HK;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            margin-bottom: 10px;
+        }
+        .info-span {
+            color: #03F4FA;
+            font-family: PingFang HK;
+            font-size: 32px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+            padding: 5px;
+        }
+        .unit-span {
+            color: #FFF;
+            opacity: 0.7;
+            font-family: PingFang HK;
+            font-size: 10px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    }
+}
+.box .card:not(:last-child) {
+    border-right: 1px solid rgba(216, 216, 216, 0.2);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/menuMBZTGZ/module/imageMock.js b/src/views/menuMBZTGZ/module/imageMock.js
new file mode 100644
index 0000000..ff5c210
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/imageMock.js
@@ -0,0 +1,12 @@
+const getTargetsResponse = {
+  "code": 200,
+  "message": "success",
+  "result": {
+    "total_image_count": 45,
+    "system_image_count": 10,
+    "buildin_image_count": 34,
+    "define_image_count": 1
+  }
+}
+
+export { getTargetsResponse }
\ No newline at end of file
diff --git a/src/views/menuMBZTGZ/module/node.vue b/src/views/menuMBZTGZ/module/node.vue
new file mode 100644
index 0000000..c887413
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/node.vue
@@ -0,0 +1,436 @@
+<template>
+    <div class="node-card">
+        <span style="font-size: 20px;float: left;margin-top: 0.5%;margin-left: 2%;margin-bottom: 0.5%">节点信息</span>
+        <div class="list" >
+            <el-table class="custom-table"
+                      ref="multipleTable"
+                      :data="tableData"
+                      height="100%"
+                      style="width: 100%;"
+                      tooltip-effect="dark"
+                      highlight-current-row
+            >
+                <el-table-column type="index" align="center" min-width="100">
+                    <template slot="header" slot-scope="scope">
+                        <span>序号</span>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center"
+                                 prop="time"
+                                 label="时间"
+                                 min-width="100">
+                </el-table-column>
+                <el-table-column align="center"
+                                 prop="level"
+                                 label="日志级别"
+                                 min-width="100">
+                </el-table-column>
+                <el-table-column align="center"  label="日志信息" min-width="300">
+                    <template slot-scope="scope" >{{ scope.row.info.substr(0, 80)}}</template>
+                </el-table-column>
+                <el-table-column align="center"
+                                 prop="user"
+                                 label="用户账号"
+                                 min-width="100">
+                </el-table-column>
+
+                <el-table-column align="center"
+                                 prop="ip"
+                                 label="用户IP"
+                                 min-width="100">
+                </el-table-column>
+            </el-table>
+        </div>
+<!--        <el-pagination-->
+<!--                background-->
+<!--                :current-page="page"-->
+<!--                :page-sizes="[10, 20, 30, 40]"-->
+<!--                :page-size="10"-->
+<!--                :total="total"-->
+<!--                layout="total, sizes, prev, pager, next, jumper"-->
+<!--                @size-change="handleSizeChange"-->
+<!--                @current-change="handleCurrentChange"-->
+<!--        >-->
+<!--        </el-pagination>-->
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+import { Loading } from 'element-ui'
+import { getTargetsResponse } from './nodeMock.js'
+export default {
+    name: 'NodeView',
+    data() {
+        return {
+            tableData:[],
+            total:0,
+            page:1,
+            size:10,
+            time1:'',
+            time2:'',
+            log_level:"",
+            userAccount:"",
+            pickerOptions: {
+                shortcuts: [{
+                    text: '今天',
+                    onClick(picker) {
+                        picker.$emit('pick', new Date());
+                    }
+                }, {
+                    text: '昨天',
+                    onClick(picker) {
+                        const date = new Date();
+                        date.setTime(date.getTime() - 3600 * 1000 * 24);
+                        picker.$emit('pick', date);
+                    }
+                }, {
+                    text: '一周前',
+                    onClick(picker) {
+                        const date = new Date();
+                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', date);
+                    }
+                }]
+            },
+
+            log_levels:[
+                {
+                    value:'ERROR',
+                    label:'ERROR'
+                },
+                {
+                    value:'INFO',
+                    label:'INFO'
+                },
+                {
+                    value:'WARNING',
+                    label:'WARNING'
+                },
+            ],
+
+
+        }
+    },
+    created() {
+        this.query()
+    },
+    mounted(){
+        // this.init()
+    },
+    methods: {
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.size=val
+            this.query()
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+            this.page=val
+            this.query()
+        },
+        query(){
+            let data={
+                "per_page":this.size,
+                "page":this.page,
+                "begin":this.time1.toString(),
+                "end":this.time2.toString(),
+                "level":this.log_level,
+                "user":this.userAccount,
+            }
+            // 使用 Object.entries() 来遍历对象的键值对，并过滤掉值为空的属性
+            const filteredData = {};
+            for (const [key, value] of Object.entries(data)) {
+                if (value !== "") {
+                    filteredData[key] = value;
+                }
+            }
+            this.$axios.get(this.$http.api.sysLog,filteredData).then(res=>{
+                console.log('getImages======',res)
+                if(res.code===200){
+                    this.tableData=res?.log_data
+                    // this.total=res?.total
+                    this.total=100
+                }
+            }).catch(err=>{
+                console.log(err)
+            })
+
+        },
+        // async init() {
+        //     await this.getRangeDict()
+        //     await this.initData()
+        //     this.initEcharts()
+        // },
+        // initData() {
+        //     // this.nodeData = getTargetsResponse?.result
+        //     // for (const key in this.nodeData) {
+        //     //     this.nodeDataX.push(key)
+        //     //     this.nodeDataY.push(this.nodeData[key])
+        //     // }
+        //
+        //     const reqParams = {}
+        //     if (this.target_id) {
+        //         reqParams.target_id = this.target_id
+        //     }
+        //     if (this.activeName !== 'total') {
+        //         reqParams.status = this.activeName
+        //     }
+        //     this.loading = true
+        //     return this.$axios.get(this.$http.api.getNodeStatistics, reqParams).then(res => {
+        //         if (res.code == 200 || res.code == "OK") {
+        //             this.nodeDataX = []
+        //             this.nodeDataY = []
+        //             this.nodeData = res?.result || {}
+        //             for (const key in this.nodeData) {
+        //                 this.nodeDataX.push(key)
+        //                 this.nodeDataY.push(this.nodeData[key])
+        //             }
+        //         }
+        //     }).catch(err => {
+        //         console.log(err)
+        //     }).finally(() => {
+        //         this.loading = false
+        //     })
+        // },
+        // 获取靶场列表字典
+        // getRangeDict() {
+        //     const reqParams = {
+        //         page: 1,
+        //         size: 99,
+        //     }
+        //     return this.$axios.get(this.$http.api.getTargets, reqParams).then(res => {
+        //         if (res.code == 200 || res.code == "OK") {
+        //             this.rangeDict = res?.result?.items.map(item => {
+        //                 return {
+        //                     label: item.target_name,
+        //                     value: item.id
+        //                 }
+        //             })
+        //         }
+        //     }).catch(err => {
+        //         console.log(err)
+        //     }).finally(() => {
+        //         this.rangeDict.unshift({label: '全部靶场', value: ''})
+        //         this.target_id = this.rangeDict[0].value
+        //         this.target_name = this.rangeDict[0].label
+        //     })
+        // },
+        // 改变靶场
+        // async changeRange(val) {
+        //     this.target_name = this.rangeDict.find(item => item.value === val)?.label
+        //     await this.initData()
+        //     this.refreshData()
+        // },
+        // 改变靶场状态
+        // async changeRangeStatus() {
+        //     await this.initData()
+        //     this.refreshData()
+        // },
+        // 刷新图标数据
+        // refreshData(){
+        //     if(!this.nodeChart){
+        //         return
+        //     }
+        //     //更新数据
+        //     var option = this.nodeChart.getOption()
+        //     option.title[0].text = `${this.target_name}节点统计`,
+        //     option.xAxis[0].data = this.nodeDataX
+        //     option.series[0].data = this.nodeDataY
+        //     this.nodeChart.setOption(option)
+        // },
+        // 切换靶场状态
+        // tabClick(tab, event) {
+        //     this.changeRangeStatus()
+        // },
+        //初始化节点柱状图
+        // initEcharts() {
+        //     var chartDom = document.getElementById('node');
+        //     this.nodeChart = echarts.init(chartDom);
+        //     var option;
+        //
+        //     option = {
+        //         title: {
+        //             text: `${this.target_name}节点统计`,
+        //             left: 'center',
+        //             top: '15',
+        //             textStyle: {
+        //                 color: '#FFFFFF',
+        //                 fontSize: 16,
+        //                 fontWeight: 500
+        //             }
+        //         },
+        //         tooltip: {
+        //             // trigger: 'axis',
+        //             axisPointer: {
+        //             // type: 'shadow'
+        //             }
+        //         },
+        //         grid: {
+        //             top: '25%',
+        //             left: '3%',
+        //             right: '4%',
+        //             bottom: '8%',
+        //             containLabel: true
+        //         },
+        //         xAxis: [
+        //             {
+        //                 type: 'category',
+        //                 data: this.nodeDataX,
+        //                 axisTick: {
+        //                     // alignWithLabel: true
+        //                     show: false
+        //                 },
+        //                 axisLabel: {
+        //                     fontSize: '14',
+        //                     color: 'rgba(255, 255, 255, 0.7)'
+        //                 }
+        //             }
+        //         ],
+        //         yAxis: [
+        //             {
+        //                 type: 'value',
+        //                 name: '靶场中各类节点数量',
+        //                 nameTextStyle: {
+        //                     color: 'rgba(255, 255, 255, 0.7)',
+        //                     padding: [0, 0, 0, 70]
+        //                 },
+        //                 axisLabel: {
+        //                     fontSize: '12',
+        //                     color: 'rgba(255, 255, 255, 0.7)'
+        //                 },
+        //                 splitLine: {
+        //                     show: true,
+        //                     lineStyle: {
+        //                     color: ['rgba(199, 199, 200, 0.1)'],
+        //                     width: 1,
+        //                     type: 'dashed'
+        //                     }
+        //                 }
+        //             }
+        //         ],
+        //         series: [
+        //             {
+        //                 // name: 'Direct',
+        //                 type: 'bar',
+        //                 barWidth: '20%',
+        //                 data: this.nodeDataY,
+        //                 itemStyle: {
+        //                     normal: {
+        //                         label: {
+        //                             show: true, // 是否显示
+        //                             position: 'top', // 显示位置
+        //                             color: '#FFFFFF',
+        //                             formatter: function (params) {
+        //                                 // 核心部分 formatter 可以为字符串也可以是回调
+        //                                 if (parseInt(params.value) === 0) {
+        //                                     return '';
+        //                                 } else {
+        //                                     return params.data.label;
+        //                                 }
+        //                             }
+        //                         },
+        //                         // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+        //                         color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //                             { offset: 0, color: '#3280D7' },
+        //                             { offset: 1, color: '#4122E2' }
+        //                         ])
+        //                     }
+        //                 }
+        //             }
+        //         ]
+        //     };
+        //     option && this.nodeChart.setOption(option);
+        // }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    .list{
+        width: 95%;
+        height: 85%;
+        margin-left: 2.5%;
+        overflow-y: auto;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        border: none;
+    }
+    .project{
+        display: inline-block;
+        height: auto;
+        width: 10%;
+        margin-left: 0.5%;
+        margin-right: 3%;
+        margin-top: 1%;
+        margin-bottom: 1%;
+        .el-input::placeholder {
+            width: auto;
+        }
+        .icon-group {
+            display: flex; /* 设置容器为 Flexbox 容器 */
+            align-items: center; /* 垂直居中图片 */
+            gap: 5px; /* 图片和文字之间的间距，可以根据需要进行调整 */
+
+        }
+        .icon-group img {
+            transform: scale(1);
+            margin-right: 15px;
+            margin-top: 6px;
+        }
+
+    }
+.node-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .node-chart {
+        width: 100%;
+        height: 100%;
+    }
+    .range-select {
+        position: absolute;
+        top: 12px;
+        right: 260px;
+        ::v-deep .el-input {
+            width: 50%;
+            .el-input__inner {
+                background-color: transparent !important;
+                border-color: transparent;
+                border-radius: 0;
+                color: #FFFFFF;
+            }
+            /* select去除竖线 */
+            .el-input__suffix::before {
+                content: "";
+                width: 0;
+                height: 0;
+                margin: 0;
+                position: absolute;
+            }
+            /*select的上下箭头图标样式*/
+            .el-select__caret {
+                color: #FFFFFF;
+            }
+        }
+    }
+    .tabs-container {
+        position: absolute;
+        top: 10px;
+        right: 36px;
+        ::v-deep .el-tabs__nav-wrap::after {
+            background-color: transparent;
+        }
+        ::v-deep .el-tabs__active-bar {
+            background-color: rgba(255, 255, 255,0.5);
+        }
+        ::v-deep .el-tabs__item {
+            color: rgba(255, 255, 255,0.5);
+        }
+        ::v-deep .el-tabs__item.is-active {
+            color: #FFFFFF;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/menuMBZTGZ/module/nodeMock.js b/src/views/menuMBZTGZ/module/nodeMock.js
new file mode 100644
index 0000000..e4c5983
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/nodeMock.js
@@ -0,0 +1,15 @@
+const getTargetsResponse = {
+  "code": 200,
+  "message": "success",
+  "result": {
+    "total_count": 7,
+    "da_count": 1,
+    "relay_count": 4,
+    "exit_count": 2,
+    "onion_count": 0,
+    "client_count": 0,
+    "other_count": 0
+  }
+}
+
+export { getTargetsResponse }
\ No newline at end of file
diff --git a/src/views/menuMBZTGZ/module/source.vue b/src/views/menuMBZTGZ/module/source.vue
new file mode 100644
index 0000000..1ce7437
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/source.vue
@@ -0,0 +1,309 @@
+<template>
+    <div class="source-card">
+<!--        <div class="source-chart" id="resource" v-loading="loading"></div>-->
+        <ZhuZhuangTu3  :active="0" ref="zhudouble"  :bing="zhudouble"></ZhuZhuangTu3>
+<!--        <div class="tabs-container">-->
+<!--            <el-tabs v-model="activeName" @tab-click="tabClick">-->
+<!--                <el-tab-pane label="CPU" name="CPU"></el-tab-pane>-->
+<!--                <el-tab-pane label="MEMEORY" name="MEMEORY"></el-tab-pane>-->
+<!--            </el-tabs>-->
+
+
+<!--        </div>-->
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import ZhuZhuangTu3 from '../echarts/zhuzhuangtu3'
+
+import { getTargetsResponse } from './sourceMock.js'
+export default {
+    props: {
+        left1data: {
+            type: Object,
+            // required: true,
+            default: function() {
+                return {
+                    target:'',
+                    type: '',
+                }
+            }
+        }
+    },
+    watch: {
+        left1data: {
+            handler(newVal, oldVal) {
+                console.log('left1data changed:', newVal);
+                this.querydelay()
+            },
+            deep: true
+        }
+    },
+    name: 'SourceView',
+    components: {
+        ZhuZhuangTu3,
+    },
+    data() {
+        return {
+            loading: false,
+            sourceData: {},
+            sourceDataX: [],
+            sourceDataY: [],
+            cpuList: [],
+            memoryList: [],
+            activeName: 'CPU',
+            sourceChart: null,
+            rangeDict: [],
+            zhudouble:{
+                xdata:[],
+                ydata1:[],  //ipv6
+            },
+        }
+    },
+    created() {
+    },
+    mounted(){
+        // this.init()
+        this.querydelay()
+        // this.getRangeDict()
+    },
+    methods: {
+        querydelay(){
+            const reqParams = {
+                "target": this.left1data.target,
+                "type": this.left1data.type,
+            }
+            this.loading = true
+            this.$axios.get(this.$http.api.targetDelay, reqParams).then(res => {
+                if (res.code == 200) {
+                    for (let i = 0; i <res.delay_data.length>10?10:res.delay_data.length ; i++) {
+                        this.zhudouble.xdata.push(res.delay_data[i].Id);
+                        this.zhudouble.ydata1.push(res.delay_data[i].CurrDelay);
+                    }
+                }
+                this.$refs.zhudouble.bingfn(this.zhudouble)
+
+            }).catch(err => {
+                console.log(err)
+            }).finally(() => {
+                this.loading = false
+            })
+
+        },
+        // init() {
+        //
+        //     this.loading = true
+        //     this.$axios.get(this.$http.api.sysNumDate).then(res => {
+        //         if (res.code == 200) {
+        //             this.zhudouble.ydata1=[];
+        //             this.zhudouble.ydata2=[];
+        //             this.zhudouble.ydata3=[];
+        //             this.zhudouble.ydata4=[];
+        //             this.zhudouble.ydata5=[];
+        //             this.zhudouble.xdata=[];
+        //
+        //
+        //             Object.keys(res.date_data).forEach(date => {
+        //                 console.log(`Date: ${date}, dot value: ${res.date_data[date].dot}`);
+        //                 this.zhudouble.xdata.push(date)
+        //                 this.zhudouble.ydata1.push(res.date_data[date].v6dns)
+        //                 this.zhudouble.ydata2.push(res.date_data[date].dnssec)
+        //                 this.zhudouble.ydata3.push(res.date_data[date].dot)
+        //                 this.zhudouble.ydata4.push(res.date_data[date].doh)
+        //                 this.zhudouble.ydata5.push(res.date_data[date].v6dns+res.date_data[date].dnssec+res.date_data[date].dot+res.date_data[date].doh)
+        //             });
+        //             this.$refs.zhudouble.bingfn(this.zhudouble)
+        //         }
+        //     }).catch(err => {
+        //         console.log(err)
+        //     }).finally(() => {
+        //         this.loading = false
+        //         // this.initEcharts()
+        //     })
+        // },
+        initEcharts() {
+            let that = this
+            var chartDom = document.getElementById('resource');
+            this.sourceChart = echarts.init(chartDom);
+            var option;
+
+            option = {
+                title: {
+                    text: '靶场资源使用排序',
+                    left: '10',
+                    top: '15',
+                    textStyle: {
+                        color: '#FFFFFF',
+                        fontSize: 16,
+                        fontWeight: 500
+                    }
+                },
+                tooltip: {
+                    // trigger: 'axis',
+                    axisPointer: {
+                    // type: 'shadow'
+                    }
+                },
+                grid: {
+                    top: '25%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '8%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: this.sourceDataX,
+                        axisTick: {
+                            // alignWithLabel: true
+                            show: false
+                        },
+                        axisLabel: {
+                            fontSize: '14',
+                            color: 'rgba(255, 255, 255, 0.7)'
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        axisLabel: {
+                            fontSize: '12',
+                            color: 'rgba(255, 255, 255, 0.7)',
+                            formatter: function(value) {
+                                return value + '  (mcore)'
+                            }
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                            color: ['rgba(199, 199, 200, 0.1)'],
+                            width: 1,
+                            type: 'dashed'
+                            },
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        // name: 'Direct',
+                        type: 'bar',
+                        barWidth: '20%',
+                        data: this.sourceDataY,
+                        itemStyle: {
+                            normal: {
+                                label: {
+                                    show: true, // 是否显示
+                                    position: 'top', // 显示位置
+                                    color: '#FFFFFF',
+                                    formatter: function (params) {
+                                        // 核心部分 formatter 可以为字符串也可以是回调
+                                        if (parseInt(params.value) === 0) {
+                                            return '';
+                                        } else {
+                                            return params.data.label;
+                                        }
+                                    }
+                                },
+                                // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+                                color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: '#01FFFF' },
+                                    { offset: 1, color: '#2160B8' }
+                                ])
+                            }
+                        }
+                    }
+                ]
+            };
+            option && this.sourceChart.setOption(option);
+            //点击事件
+            this.sourceChart.on('click', function(params) {
+                const target_name = params.name
+                const target_id = that.rangeDict.find(item => item.label === target_name)?.value
+                that.$store.commit('globalAttrs/setCheckMenu', 'rangeConfigManage')
+                that.$store.commit('range/setTargetId', target_id)
+            });
+        },
+        // 刷新图标数据
+        refreshData(data, tabName){
+            if(!this.sourceChart){
+                return
+            }
+            //更新数据
+            var option = this.sourceChart.getOption()
+            option.series[0].data = data
+            option.yAxis[0].axisLabel.formatter = function(value) {
+                if (tabName === 'MEMEORY') {
+                    return value + '  (Mi)'
+                } else {
+                    return value + '  (mcore)'
+                }
+            }
+            this.sourceChart.setOption(option) 
+        },
+        tabClick(tab, event) {
+            switch (tab.name) {
+                case 'CPU':
+                    this.refreshData(this.cpuList, 'CPU')
+                    break;
+                case 'MEMEORY':
+                    this.refreshData(this.memoryList, 'MEMEORY')
+                    break;           
+                default:
+                this.refreshData(this.cpuList, 'CPU')
+                    break;
+            }
+        },
+        // // 获取靶场列表字典
+        // getRangeDict() {
+        //     const reqParams = {
+        //         page: 1,
+        //         size: 99,
+        //     }
+        //     return this.$axios.get(this.$http.api.getTargets, reqParams).then(res => {
+        //         if (res.code == 200 || res.code == "OK") {
+        //             this.rangeDict = res?.result?.items.map(item => {
+        //                 return {
+        //                     label: item.target_name,
+        //                     value: item.id
+        //                 }
+        //             })
+        //         }
+        //     }).catch(err => {
+        //         console.log(err)
+        //     })
+        // }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.source-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .source-chart {
+        width: 100%;
+        height: 100%;
+    }
+    .tabs-container {
+        position: absolute;
+        top: 10px;
+        right: 36px;
+        ::v-deep .el-tabs__nav-wrap::after {
+            background-color: transparent;
+        }
+        ::v-deep .el-tabs__active-bar {
+            background-color: rgba(255, 255, 255,0.5);
+        }
+        ::v-deep .el-tabs__item {
+            color: rgba(255, 255, 255,0.5);
+        }
+        ::v-deep .el-tabs__item.is-active {
+            color: #FFFFFF;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/menuMBZTGZ/module/sourceMock.js b/src/views/menuMBZTGZ/module/sourceMock.js
new file mode 100644
index 0000000..c8397ac
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/sourceMock.js
@@ -0,0 +1,28 @@
+const getTargetsResponse = {
+  "code": 200,
+  "message": "success",
+  "result": {
+    "quick01": {
+      "total_memory": 3773.94921875,
+      "total_cpu": 24.433999999999997
+    },
+    "quick02": {
+      "total_memory": 1546.80078125,
+      "total_cpu": 76.94800000000001
+    },
+    "quick03": {
+      "total_memory": 1556.7578125,
+      "total_cpu": 79.413
+    },
+    "custom01": {
+      "total_memory": 0,
+      "total_cpu": 0
+    },
+    "custom02": {
+      "total_memory": 0,
+      "total_cpu": 0
+    }
+  }
+}
+
+export { getTargetsResponse }
\ No newline at end of file
diff --git a/src/views/menuMBZTGZ/module/target.vue b/src/views/menuMBZTGZ/module/target.vue
new file mode 100644
index 0000000..f304fdc
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/target.vue
@@ -0,0 +1,263 @@
+<template>
+    <div class="source-card">
+        <!--        <div class="source-chart" id="resource" v-loading="loading"></div>-->
+        <ZhuZhuangTu_jbs  :active="0" ref="zhudouble"  :bing="zhudouble"></ZhuZhuangTu_jbs>
+        <!--        <div class="tabs-container">-->
+        <!--            <el-tabs v-model="activeName" @tab-click="tabClick">-->
+        <!--                <el-tab-pane label="CPU" name="CPU"></el-tab-pane>-->
+        <!--                <el-tab-pane label="MEMEORY" name="MEMEORY"></el-tab-pane>-->
+        <!--            </el-tabs>-->
+
+
+        <!--        </div>-->
+    </div>
+</template>
+
+<script>
+    import * as echarts from 'echarts';
+    import ZhuZhuangTu_jbs from '../echarts/zhuzhuangtu_jbs'
+
+    import { getTargetsResponse } from './sourceMock.js'
+    export default {
+        props: {
+            left1data: {
+                type: Object,
+                // required: true,
+                default: function() {
+                    return {
+                        target:'',
+                        type: '',
+                    }
+                }
+            }
+        },
+        watch: {
+            left1data: {
+                handler(newVal, oldVal) {
+                    console.log('left1data changed:', newVal);
+                    this.querydelay()
+                },
+                deep: true
+            }
+        },
+        name: 'SourceView',
+        components: {
+            ZhuZhuangTu_jbs,
+        },
+        data() {
+            return {
+                loading: false,
+                sourceData: {},
+                sourceDataX: [],
+                sourceDataY: [],
+                cpuList: [],
+                memoryList: [],
+                activeName: 'CPU',
+                sourceChart: null,
+                rangeDict: [],
+                zhudouble:{
+                    data:[
+                        ['延时', '节点'],
+                    ],
+                },
+            }
+        },
+        created() {
+        },
+        mounted(){
+            this.init()
+            // this.getRangeDict()
+        },
+        methods: {
+            init() {
+                const reqParams = {
+                    "target": this.left1data.target,
+                    "type": this.left1data.type,
+                }
+                console.log("GGGGGGGGGGGGGGGGGGGG")
+                console.log(reqParams)
+                console.log("GGGGGGGGGGGGGGGGGGGG")
+                this.loading = true
+                this.$axios.get(this.$http.api.targetDelay,reqParams).then(res => {
+                    if (res.code == 200) {
+                        for (let i = 0; i <res.delay_data.length>10?10:res.delay_data.length ; i++) {
+                            let A=[];
+                            A.push(res.delay_data[i].CurrDelay);
+                            A.push(res.delay_data[i].Id);
+                            this.zhudouble.data.push(A);
+                        }
+                        this.$refs.zhudouble.bingfn(this.zhudouble)
+                    }
+                }).catch(err => {
+                    console.log(err)
+                }).finally(() => {
+                    this.loading = false
+                    this.initEcharts()
+                })
+            },
+            initEcharts() {
+                let that = this
+                var chartDom = document.getElementById('resource');
+                this.sourceChart = echarts.init(chartDom);
+                var option;
+
+                option = {
+                    title: {
+                        text: '靶场资源使用排序',
+                        left: '10',
+                        top: '15',
+                        textStyle: {
+                            color: '#FFFFFF',
+                            fontSize: 16,
+                            fontWeight: 500
+                        }
+                    },
+                    tooltip: {
+                        // trigger: 'axis',
+                        axisPointer: {
+                            // type: 'shadow'
+                        }
+                    },
+                    grid: {
+                        top: '25%',
+                        left: '3%',
+                        right: '4%',
+                        bottom: '8%',
+                        containLabel: true
+                    },
+                    xAxis: [
+                        {
+                            type: 'category',
+                            data: this.sourceDataX,
+                            axisTick: {
+                                // alignWithLabel: true
+                                show: false
+                            },
+                            axisLabel: {
+                                fontSize: '14',
+                                color: 'rgba(255, 255, 255, 0.7)'
+                            }
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value',
+                            axisLabel: {
+                                fontSize: '12',
+                                color: 'rgba(255, 255, 255, 0.7)',
+                                formatter: function(value) {
+                                    return value + '  (mcore)'
+                                }
+                            },
+                            splitLine: {
+                                show: true,
+                                lineStyle: {
+                                    color: ['rgba(199, 199, 200, 0.1)'],
+                                    width: 1,
+                                    type: 'dashed'
+                                },
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            // name: 'Direct',
+                            type: 'bar',
+                            barWidth: '20%',
+                            data: this.sourceDataY,
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true, // 是否显示
+                                        position: 'top', // 显示位置
+                                        color: '#FFFFFF',
+                                        formatter: function (params) {
+                                            // 核心部分 formatter 可以为字符串也可以是回调
+                                            if (parseInt(params.value) === 0) {
+                                                return '';
+                                            } else {
+                                                return params.data.label;
+                                            }
+                                        }
+                                    },
+                                    // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+                                    color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#01FFFF' },
+                                        { offset: 1, color: '#2160B8' }
+                                    ])
+                                }
+                            }
+                        }
+                    ]
+                };
+                option && this.sourceChart.setOption(option);
+                //点击事件
+                this.sourceChart.on('click', function(params) {
+                    const target_name = params.name
+                    const target_id = that.rangeDict.find(item => item.label === target_name)?.value
+                    that.$store.commit('globalAttrs/setCheckMenu', 'rangeConfigManage')
+                    that.$store.commit('range/setTargetId', target_id)
+                });
+            },
+            // 刷新图标数据
+            refreshData(data, tabName){
+                if(!this.sourceChart){
+                    return
+                }
+                //更新数据
+                var option = this.sourceChart.getOption()
+                option.series[0].data = data
+                option.yAxis[0].axisLabel.formatter = function(value) {
+                    if (tabName === 'MEMEORY') {
+                        return value + '  (Mi)'
+                    } else {
+                        return value + '  (mcore)'
+                    }
+                }
+                this.sourceChart.setOption(option)
+            },
+            tabClick(tab, event) {
+                switch (tab.name) {
+                    case 'CPU':
+                        this.refreshData(this.cpuList, 'CPU')
+                        break;
+                    case 'MEMEORY':
+                        this.refreshData(this.memoryList, 'MEMEORY')
+                        break;
+                    default:
+                        this.refreshData(this.cpuList, 'CPU')
+                        break;
+                }
+            },
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .source-card {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        .source-chart {
+            width: 100%;
+            height: 100%;
+        }
+        .tabs-container {
+            position: absolute;
+            top: 10px;
+            right: 36px;
+            ::v-deep .el-tabs__nav-wrap::after {
+                background-color: transparent;
+            }
+            ::v-deep .el-tabs__active-bar {
+                background-color: rgba(255, 255, 255,0.5);
+            }
+            ::v-deep .el-tabs__item {
+                color: rgba(255, 255, 255,0.5);
+            }
+            ::v-deep .el-tabs__item.is-active {
+                color: #FFFFFF;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/menuMBZTGZ/module/targetMock.js b/src/views/menuMBZTGZ/module/targetMock.js
new file mode 100644
index 0000000..2ca003e
--- /dev/null
+++ b/src/views/menuMBZTGZ/module/targetMock.js
@@ -0,0 +1,12 @@
+const getTargetsResponse = {
+  "code": 200,
+  "message": "success",
+  "result": {
+    "total_target_count": 5,
+    "deploy_success_count": 0,
+    "deploy_fail_count": 0,
+    "no_deploy_count": 2
+  }
+}
+
+export { getTargetsResponse }
\ No newline at end of file