Merge branch 'master-500-dev-ztq1' into 'master-500-dev'

Master 500 dev ztq1



See merge request !739

-<title>日志视图</title>
+<title>快照管理</title>
 <iframe src="/vue3/index.html#/vue3/snapshot" frameborder="0" class="layadmin-iframe"   style="height: 99.5%!important;"/>
 <iframe src="/vue3/index.html#/vue3/snapshot" frameborder="0" class="layadmin-iframe"   style="height: 99.5%!important;"/>

+<title>快照概览</title>
+<iframe src="/vue3/index.html#/vue3/snapshotOverview" frameborder="0" class="layadmin-iframe"   style="height: 99.5%!important;"/>

@@ -161,6 +161,12 @@ const routes = [{
         name: 'snapshotHistory',
         name: 'snapshotHistory',
         component: () => myImport('views/snapshot/history/index')
         component: () => myImport('views/snapshot/history/index')
     },
     },
+    //快照概览
+    {
+        path: '/vue3/snapshotOverview',
+        name: 'snapshotOverview',
+        component: () => myImport('views/snapshotOverview/index')
+    },
 ];
 ];
 
 
 // hash模式： createWebHashHistory
 // hash模式： createWebHashHistory

 <div class="container" :style="{'height':height+'px','max-height':height+'px'}">
 <div class="container" :style="{'height':height+'px','max-height':height+'px'}">
     <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
     <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
         <div class="search">
         <div class="search">
-           <div class="condition">
-               <el-form
-                       ref="ruleFormRef"
-                       :model="ruleForm"
-                       :rules="rules"
-                       label-width="0px"
-                       class="demo-ruleForm"
-                       :size="formSize"
-                       status-icon
-               >
+           <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
+               <el-form :inline="true">
+                   <el-form-item>
+                       <el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyword" placeholder="关键字检索" />
+                   </el-form-item>
+                   <el-form-item>
+                       <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.bizType" placeholder="资源类型">
+                           <el-option label="Zone one" value="shanghai" />
+                           <el-option label="Zone two" value="beijing" />
+                       </el-select>
+                   </el-form-item>
+                   <el-form-item>
+                       <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.devType" placeholder="业务类型">
+                           <el-option label="Zone one" value="shanghai" />
+                           <el-option label="Zone two" value="beijing" />
+                       </el-select>
+                   </el-form-item>
+                   <el-form-item>
+                       <el-button :size="$global.elementConfig.size.button" type="primary">查询</el-button>
+                   </el-form-item>
                </el-form>
                </el-form>
+               <el-button-group>
+                   <el-button @click="handleBtnGroup(0)" :type="btnGroupType==0?'primary':''">今天</el-button>
+                   <el-button @click="handleBtnGroup(1)" :type="btnGroupType==1?'primary':''">近七日</el-button>
+                   <el-button @click="handleBtnGroup(2)" :type="btnGroupType==2?'primary':''">近30天</el-button>
+                   <el-button @click="handleBtnGroup(3)" :type="btnGroupType==3?'primary':''">近90天</el-button>
+                   <el-button @click="handleBtnGroup(4)" :type="btnGroupType==4?'primary':''">自定义</el-button>
+               </el-button-group>
            </div>
            </div>
         </div>
         </div>
+
+        <el-row :gutter="20" style="padding: 3px 10px;">
+            <el-col :span="8">
+                <h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3>
+                <div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
+            </el-col>
+            <el-col :span="8">
+                <h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3>
+                <div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
+            </el-col>
+            <el-col :span="8">
+                <h3 style="text-align: left;color:#2b9eef;">快照量</h3>
+                <div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
+            </el-col>
+        </el-row>
+
+        <div class="search-table">
+            <h3 style="text-align: left;color:#2b9eef;">快照信息</h3>
+            <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
+                           :height="height - 110"
+                           :loading="false"
+                           :pageSize="search.pageSize"
+                           :showBorder="true"
+                           :showIndex="true"
+                           :showPage="true"
+                           :showSelection="false"
+                           :showTools="true"
+                           :total="tableData.count"
+                           @loaddata="loaddata">
+                <template #tools="{scope}">
+                    <div class="list-handle">
+                        <span class="icon-bg" style="color: #69a1f6">
+                             <i class="el-icon-document"></i>
+                        </span>
+                        <span class="icon-bg" style="color:#dd3532">
+                             <i class="el-icon-delete"></i>
+                        </span>
+                    </div>
+                </template>
+            </cm-table-page>
+        </div>
     </div>
     </div>
 </div>
 </div>

@@ -5,12 +5,272 @@ export default {
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
         let height = Vue.ref(window.innerHeight);
         let height = Vue.ref(window.innerHeight);
         let formSize = Vue.ref('default');
         let formSize = Vue.ref('default');
+        let queryParams = Vue.ref({
+            keyword:undefined,
+            bizType:undefined,
+            devType:undefined,
+        })
+        let btnGroupType = Vue.ref(0);
+        let search = Vue.ref({
+            program: '',
+            sortBy: 'dbTime',
+            scopeBy: 'dbTimeStr.keyword',
+            keyword: '',
+            type: 'syslog',
+            pageNum: 1,
+            pageSize: 10,
+            dateTime: [],
+            resType: '',
+        });
+        //表格字段
+        let tableData = Vue.ref({
+            count: 0,
+            dataList: [
+                {
+                    logDate:"PC服务器",
+                    resName:"稽核服务器jhxc1",
+                    resTypeName:"95.16.16.93",
+                    host:"陈婷婷",
+                    type:"",
+                    program:"高鹏",
+                    message:"刘文",
+                }, {
+                    logDate:"",
+                    resName:"",
+                    resTypeName:"",
+                    host:"",
+                    type:"",
+                    program:"",
+                    message:"",
+                },{
+                    logDate:"",
+                    resName:"",
+                    resTypeName:"",
+                    host:"",
+                    type:"",
+                    program:"",
+                    message:"",
+                },
+            ],
+            columns: [
+                {
+                    prop: 'logDate',
+                    label: '资源类型',
+                    sortable: true,
+                    align: 'center',
+                    width: '250',
+                },
+                {
+                    prop: 'resName',
+                    label: '资源名称',
+                    sortable: true,
+                    align: 'center',
+                    width: '250'
+                },
+                {
+                    prop: 'resTypeName',
+                    label: 'IP地址',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                }, {
+                    prop: 'host',
+                    label: '负责人',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                }, {
+                    prop: 'type',
+                    label: '所属业务系统',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'program',
+                    label: '业务系统负责人',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'message',
+                    label: '快照负责人',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'message',
+                    label: '快照创建时间',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+            ]
+        })
 
 
+        let loaddata = ({page, limit}) => {
+            search.value.pageNum = page;
+            search.value.pageSize = limit;
+            getDataList();
+        }
+        // 获取列表
+        let getDataList = () => {
+
+        };
+
+        // 按钮组点击事件
+        let handleBtnGroup = (val)=>{
+            console.log(btnGroupType.value);
+            btnGroupType.value = val;
+            console.log(val);
+        };
+
+         // echarts
+         let bizChartsRefs = Vue.ref(null);
+         let devChartsRefs = Vue.ref(null);
+         let snapshotChartsRefs = Vue.ref(null)
+         let getEcharts = ()=>{
+             let bizCharts = echarts.init(bizChartsRefs.value);
+             let bizOption = {
+                 grid:{
+                     top:"14%",
+                     bottom:"8%"
+                 },
+                 tooltip: {
+                     trigger: 'item'
+                 },
+                 color:"#60a0f7",
+                 xAxis: {
+                     type: 'category',
+                     data: ['PC服务器', '虚拟化', '共享存储', '路由器', '数据库'],
+                     axisTick:false,
+                 },
+                 yAxis: {
+                     type: 'value',
+                     axisLine:{
+                         show:true,
+                     },
+                     //分隔线样式
+                     splitLine:{
+                         show:true,
+                         lineStyle:{
+                             type:'dashed'
+                         }
+                     }
+                 },
+                 series: [
+                     {
+                         data: [120, 200, 150, 80, 70,],
+                         type: 'bar',
+                         barWidth: 26,//设置柱状图大小
+                         itemStyle:{
+                             borderRadius:[20,20,0,0]
+                         }
+                     }
+                 ]
+             }
+             bizCharts.setOption(bizOption);
+
+             let devCharts = echarts.init(devChartsRefs.value);
+             let devOption = {
+                 grid:{
+                     top:"14%",
+                     bottom:"8%"
+                 },
+                 tooltip: {
+                     trigger: 'item'
+                 },
+                 color:"#60a0f7",
+                 xAxis: {
+                     type: 'category',
+                     data: ['电子税务局', '税库银系统', '电子底账', '出口退税', '数字人事'],
+                     axisTick:false,
+                 },
+                 yAxis: {
+                     type: 'value',
+                     axisLine:{
+                         show:true,
+                     },
+                     //分隔线样式
+                     splitLine:{
+                         show:true,
+                         lineStyle:{
+                             type:'dashed'
+                         }
+                     }
+                 },
+                 series: [
+                     {
+                         data: [120, 200, 150, 80, 70,],
+                         type: 'bar',
+                         barWidth: 26,//设置柱状图大小
+                         itemStyle:{
+                             borderRadius:[20,20,0,0]
+                         }
+                     }
+                 ]
+             }
+             devCharts.setOption(devOption);
+
+             let snapshotCharts = echarts.init(snapshotChartsRefs.value);
+             let shapshotOption = {
+                 grid:{
+                     top:"14%",
+                     bottom:"8%"
+                 },
+                 tooltip: {
+                     trigger: 'item'
+                 },
+                 color:"#60a0f7",
+                 xAxis: {
+                     type: 'category',
+                     data: ['07-06', '07-05', '07-04', '07-03', '07-02'],
+                     axisTick:false,
+                 },
+                 yAxis: {
+                     type: 'value',
+                     axisLine:{
+                         show:true,
+                     },
+                     //分隔线样式
+                     splitLine:{
+                         show:true,
+                         lineStyle:{
+                             type:'dashed'
+                         }
+                     }
+                 },
+                 series: [
+                     {
+                         data: [120, 200, 150, 80, 70,],
+                         type: 'bar',
+                         barWidth: 26,//设置柱状图大小
+                         itemStyle:{
+                             borderRadius:[20,20,0,0]
+                         }
+                     }
+                 ]
+             }
+             snapshotCharts.setOption(shapshotOption);
+         }
 
 
+         Vue.onMounted(()=>{
+             getEcharts();
+         })
 
 
         return{
         return{
             height,
             height,
-            formSize
+            formSize,
+            queryParams,
+            tableData,
+            search,
+            btnGroupType,
+            bizChartsRefs,
+            devChartsRefs,
+            snapshotChartsRefs,
+            handleBtnGroup,
         }
         }
     }
     }
 }
 }

+<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
+    <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
+        <div class="search">
+            <div class="condition esData-conditon" style="justify-content: end;width: 100%;">
+                <el-button-group>
+                    <el-button @click="handleBtnGroup(0)" :type="btnGroupType==0?'primary':''">今天</el-button>
+                    <el-button @click="handleBtnGroup(1)" :type="btnGroupType==1?'primary':''">近七日</el-button>
+                    <el-button @click="handleBtnGroup(2)" :type="btnGroupType==2?'primary':''">近30天</el-button>
+                    <el-button @click="handleBtnGroup(3)" :type="btnGroupType==3?'primary':''">近90天</el-button>
+                    <el-button @click="handleBtnGroup(4)" :type="btnGroupType==4?'primary':''">自定义</el-button>
+                </el-button-group>
+            </div>
+        </div>
+
+        <el-row :gutter="20" style="padding: 3px 10px;">
+            <el-col :span="12">
+                <h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3>
+                <div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
+            </el-col>
+            <el-col :span="12">
+                <h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3>
+                <div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
+            </el-col>
+            <el-col :span="12">
+                <h3 style="text-align: left;color:#2b9eef;">人员快照量</h3>
+                <div ref="peopleSSChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
+            </el-col>
+            <el-col :span="12">
+                <h3 style="text-align: left;color:#2b9eef;">快照量</h3>
+                <div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
+            </el-col>
+        </el-row>
+
+
+        <div class="search-table">
+            <h3 style="text-align: left;color:#2b9eef;">快照信息</h3>
+            <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
+                           :height="height - 110"
+                           :loading="false"
+                           :pageSize="search.pageSize"
+                           :showBorder="true"
+                           :showIndex="true"
+                           :showPage="true"
+                           :showSelection="false"
+                           :showTools="true"
+                           :total="tableData.count"
+                           @loaddata="loaddata">
+                <template #tools="{scope}">
+                    <div class="list-handle">
+                        <span class="icon-bg" style="color: #69a1f6">
+                             <i class="el-icon-document"></i>
+                        </span>
+                        <span class="icon-bg" style="color:#dd3532">
+                             <i class="el-icon-delete"></i>
+                        </span>
+                    </div>
+                </template>
+            </cm-table-page>
+        </div>
+    </div>
+</div>

+export default {
+    name:"snapshotOverview",
+    template:"",
+    setup(props,{attrs,slots,emit}){
+        const {proxy} = Vue.getCurrentInstance();
+        let height = Vue.ref(window.innerHeight);
+        let btnGroupType = Vue.ref(0);
+        let search = Vue.ref({
+            program: '',
+            sortBy: 'dbTime',
+            scopeBy: 'dbTimeStr.keyword',
+            keyword: '',
+            type: 'syslog',
+            pageNum: 1,
+            pageSize: 10,
+            dateTime: [],
+            resType: '',
+        });
+        //表格字段
+        let tableData = Vue.ref({
+            count: 0,
+            dataList: [
+                {
+                    logDate:"PC服务器",
+                    resName:"稽核服务器jhxc1",
+                    resTypeName:"95.16.16.93",
+                    host:"陈婷婷",
+                    type:"",
+                    program:"高鹏",
+                    message:"刘文",
+                }, {
+                    logDate:"",
+                    resName:"",
+                    resTypeName:"",
+                    host:"",
+                    type:"",
+                    program:"",
+                    message:"",
+                },{
+                    logDate:"",
+                    resName:"",
+                    resTypeName:"",
+                    host:"",
+                    type:"",
+                    program:"",
+                    message:"",
+                },
+            ],
+            columns: [
+                {
+                    prop: 'logDate',
+                    label: '资源类型',
+                    sortable: true,
+                    align: 'center',
+                    width: '250',
+                },
+                {
+                    prop: 'resName',
+                    label: '资源名称',
+                    sortable: true,
+                    align: 'center',
+                    width: '250'
+                },
+                {
+                    prop: 'resTypeName',
+                    label: 'IP地址',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                }, {
+                    prop: 'host',
+                    label: '负责人',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                }, {
+                    prop: 'type',
+                    label: '所属业务系统',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'program',
+                    label: '业务系统负责人',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'message',
+                    label: '快照负责人',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'message',
+                    label: '快照创建时间',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+            ]
+        })
+
+        let loaddata = ({page, limit}) => {
+            search.value.pageNum = page;
+            search.value.pageSize = limit;
+            getDataList();
+        }
+        // 获取列表
+        let getDataList = () => {
+
+        };
+
+        // 按钮组点击事件
+        let handleBtnGroup = (val)=>{
+            btnGroupType.value = val;
+        };
+
+        // echarts
+        let bizChartsRefs = Vue.ref(null);
+        let devChartsRefs = Vue.ref(null);
+        let snapshotChartsRefs = Vue.ref(null);
+        let peopleSSChartsRefs = Vue.ref(null);
+        let getEcharts = ()=>{
+            let bizCharts = echarts.init(bizChartsRefs.value);
+            let bizOption = {
+                grid:{
+                    top:"14%",
+                    bottom:"8%"
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                color:"#60a0f7",
+                xAxis: {
+                    type: 'category',
+                    data: ['PC服务器', '虚拟化', '共享存储', '路由器', '数据库'],
+                    axisTick:false,
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLine:{
+                        show:true,
+                    },
+                    //分隔线样式
+                    splitLine:{
+                        show:true,
+                        lineStyle:{
+                            type:'dashed'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        data: [120, 200, 150, 80, 70,],
+                        type: 'bar',
+                        barWidth: 26,//设置柱状图大小
+                        itemStyle:{
+                            borderRadius:[20,20,0,0]
+                        }
+                    }
+                ]
+            }
+            bizCharts.setOption(bizOption);
+
+            let devCharts = echarts.init(devChartsRefs.value);
+            let devOption = {
+                grid:{
+                    top:"14%",
+                    bottom:"8%"
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                color:"#60a0f7",
+                xAxis: {
+                    type: 'category',
+                    data: ['电子税务局', '税库银系统', '电子底账', '出口退税', '数字人事'],
+                    axisTick:false,
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLine:{
+                        show:true,
+                    },
+                    //分隔线样式
+                    splitLine:{
+                        show:true,
+                        lineStyle:{
+                            type:'dashed'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        data: [120, 200, 150, 80, 70,],
+                        type: 'bar',
+                        barWidth: 26,//设置柱状图大小
+                        itemStyle:{
+                            borderRadius:[20,20,0,0]
+                        }
+                    }
+                ]
+            }
+            devCharts.setOption(devOption);
+
+            let snapshotCharts = echarts.init(snapshotChartsRefs.value);
+            let shapshotOption = {
+                grid:{
+                    top:"14%",
+                    bottom:"8%"
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                color:"#EF8166",
+                xAxis: {
+                    type: 'value',
+                    axisLine:{
+                        show:true,
+                    },
+                    //分隔线样式
+                    splitLine:{
+                        show:true,
+                        lineStyle:{
+                            type:'dashed'
+                        }
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: ['07-06', '07-05', '07-04', '07-03', '07-02'],
+                    axisTick:false,
+                },
+                series: [
+                    {
+                        data: [120, 200, 150, 80, 70,],
+                        type: 'bar',
+                        barWidth: 26,//设置柱状图大小
+                        itemStyle:{
+                            borderRadius:[0,20,20,0]
+                        }
+                    }
+                ]
+            }
+            snapshotCharts.setOption(shapshotOption);
+
+            let peopleSSCharts = echarts.init(peopleSSChartsRefs.value);
+            let peopleOption = {
+                grid:{
+                    top:"14%",
+                    bottom:"8%"
+                },
+                //color:"#60a0f7",
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    top:"middle",
+                    right:"10%",
+                    itemWidth:35,
+                    icon:"rect",
+                },
+                series: [
+                    {
+                        data: [
+                            { value: 1048, name: '张三' },
+                            { value: 735, name: '李四' },
+                            { value: 580, name: '赵二' },
+                            { value: 484, name: '王五' },
+                            { value: 300, name: '赵六' }
+                        ],
+                        center: ['40%', '50%'],
+                        type: 'pie',
+                        //高亮状态的扇区和标签样式。
+                        emphasis: {
+                            label: {
+                                show: true
+                            },
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        label: {
+                            show: false
+                        },
+                    }
+                ]
+            }
+            peopleSSCharts.setOption(peopleOption);
+        }
+
+        Vue.onMounted(()=>{
+            getEcharts();
+        })
+
+        Vue.onMounted(()=>{
+
+        })
+        return {
+            height,
+            search,
+            tableData,
+            btnGroupType,
+            handleBtnGroup,
+            bizChartsRefs,
+            devChartsRefs,
+            snapshotChartsRefs,
+            peopleSSChartsRefs,
+        }
+    }
+}

@@ -256,6 +256,12 @@ const routes = [{
         name: 'snapshotHistory',
         name: 'snapshotHistory',
         component: () => myImport('views/snapshot/history/index')
         component: () => myImport('views/snapshot/history/index')
     },
     },
+    //快照概览
+    {
+        path: '/vue3/snapshotOverview',
+        name: 'snapshotOverview',
+        component: () => myImport('views/snapshotOverview/index')
+    },
 ];
 ];
 
 
 // hash模式： createWebHashHistory
 // hash模式： createWebHashHistory