|
|
|
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,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
