|
|
|
export default {
|
|
|
|
name: 'operationLog',
|
|
|
|
template: '',
|
|
|
|
components: {
|
|
|
|
'LineChart': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('views/page/components/lineChart/index')
|
|
|
|
)
|
|
|
|
},
|
|
|
|
props: [],
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let isView = Vue.ref(false);
|
|
|
|
let height = Vue.ref(window.innerHeight);
|
|
|
|
let optionData = Vue.ref('');
|
|
|
|
let optionDataR = Vue.ref('');
|
|
|
|
let series = Vue.ref([]);
|
|
|
|
let seriesR = Vue.ref([]);
|
|
|
|
let names = Vue.ref(['智能综合巡检系统', '数据中心虚拟化', '备份系统']);
|
|
|
|
let namesR = Vue.ref(['吴斌斌','袁晋鹏'])
|
|
|
|
let kpiName=Vue.ref('');
|
|
|
|
let kpiNameR = Vue.ref('');
|
|
|
|
let kpiUnit=Vue.ref('');
|
|
|
|
let kpiUnitR=Vue.ref('');
|
|
|
|
let colorsArr = Vue.ref([
|
|
|
|
{
|
|
|
|
start: '#468ced',
|
|
|
|
end: '#68a5fa'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#79dda1',
|
|
|
|
end: '#9bddb5'
|
|
|
|
}
|
|
|
|
])
|
|
|
|
const optionDataInit = () => {
|
|
|
|
|
|
|
|
optionData.value = {
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
formatter: function (param) {
|
|
|
|
var tips = kpiName.value + " " + param[0].name + "<br/>";
|
|
|
|
$.each(param, function (i, v) {
|
|
|
|
tips += v.marker + " " + v.seriesName + ":" + v.value + kpiUnit.value + "</br>"
|
|
|
|
});
|
|
|
|
return tips;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
show: true
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
top: '10%',
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
bottom: '5%',
|
|
|
|
containLabel: true
|
|
|
|
},
|
|
|
|
toolbox: {
|
|
|
|
feature: {
|
|
|
|
saveAsImage: {
|
|
|
|
show: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
data: names.value,
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#c9c9c9'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
color: '#232425',
|
|
|
|
showMaxLabel: true,
|
|
|
|
lineHeight:18,
|
|
|
|
formatter: function (params) {
|
|
|
|
var newParamsName = '';
|
|
|
|
let paramsNameNumber = params.length;
|
|
|
|
let provideNumber = 4;
|
|
|
|
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
|
|
|
if (paramsNameNumber > provideNumber) {
|
|
|
|
for (let i = 0; i < rowNumber; i++) {
|
|
|
|
let tempStr = '';
|
|
|
|
let start = i * provideNumber;
|
|
|
|
let end = start + provideNumber;
|
|
|
|
if (i == rowNumber - 1) {
|
|
|
|
tempStr = params.substring(start, paramsNameNumber);
|
|
|
|
} else {
|
|
|
|
tempStr = params.substring(start, end) + "\n";
|
|
|
|
}
|
|
|
|
newParamsName += tempStr;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
newParamsName = params;
|
|
|
|
}
|
|
|
|
return newParamsName;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
splitArea: {
|
|
|
|
show: true,
|
|
|
|
areaStyle: {
|
|
|
|
color: ['rgba(200,200,200,0.1)', 'transparent'
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
scale: true,
|
|
|
|
min:0,
|
|
|
|
boundaryGap: ['10%', '10%'],
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#232425'
|
|
|
|
},
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
splitLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: ['#ddd'],
|
|
|
|
type: 'dotted',
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
series: series.value
|
|
|
|
};
|
|
|
|
optionDataR.value= {
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
formatter: function (param) {
|
|
|
|
var tips = kpiName.value + " " + param[0].name + "<br/>";
|
|
|
|
$.each(param, function (i, v) {
|
|
|
|
tips += v.marker + " " + v.seriesName + ":" + v.value + kpiUnit.value + "</br>"
|
|
|
|
});
|
|
|
|
return tips;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
show: true
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
top: '10%',
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
bottom: '5%',
|
|
|
|
containLabel: true
|
|
|
|
},
|
|
|
|
toolbox: {
|
|
|
|
feature: {
|
|
|
|
saveAsImage: {
|
|
|
|
show: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
data: namesR.value,
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#c9c9c9'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
color: '#232425',
|
|
|
|
showMaxLabel: true,
|
|
|
|
lineHeight:18,
|
|
|
|
formatter: function (params) {
|
|
|
|
var newParamsName = '';
|
|
|
|
let paramsNameNumber = params.length;
|
|
|
|
let provideNumber = 4;
|
|
|
|
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
|
|
|
if (paramsNameNumber > provideNumber) {
|
|
|
|
for (let i = 0; i < rowNumber; i++) {
|
|
|
|
let tempStr = '';
|
|
|
|
let start = i * provideNumber;
|
|
|
|
let end = start + provideNumber;
|
|
|
|
if (i == rowNumber - 1) {
|
|
|
|
tempStr = params.substring(start, paramsNameNumber);
|
|
|
|
} else {
|
|
|
|
tempStr = params.substring(start, end) + "\n";
|
|
|
|
}
|
|
|
|
newParamsName += tempStr;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
newParamsName = params;
|
|
|
|
}
|
|
|
|
return newParamsName;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
splitArea: {
|
|
|
|
show: true,
|
|
|
|
areaStyle: {
|
|
|
|
color: ['rgba(200,200,200,0.1)', 'transparent'
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
scale: true,
|
|
|
|
boundaryGap: ['10%', '10%'],
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#232425'
|
|
|
|
},
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
splitLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: ['#ddd'],
|
|
|
|
type: 'dotted',
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
series: seriesR.value
|
|
|
|
};
|
|
|
|
}
|
|
|
|
let rateData=Vue.ref([
|
|
|
|
{name:'应点击量',data:[1,34,12]},
|
|
|
|
{name:'实际点击量',data:[15,24,10]}
|
|
|
|
])
|
|
|
|
let rateDataR=Vue.ref([
|
|
|
|
{name:'',data:[1,6,8,9,10]},
|
|
|
|
])
|
|
|
|
const setSeries = () => {
|
|
|
|
series.value = [];
|
|
|
|
$.each(rateData.value, function (i, v) {
|
|
|
|
series.value.push({
|
|
|
|
name: v.name,
|
|
|
|
type: 'bar',
|
|
|
|
barWidth: 16,//设置柱状图大小
|
|
|
|
data: v.data,
|
|
|
|
stack:'total',
|
|
|
|
symbolSize: 12,
|
|
|
|
symbol: 'circle',
|
|
|
|
itemStyle: {
|
|
|
|
normal: {
|
|
|
|
// color: colorsArr.value[i].start //图标颜色
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
|
|
|
|
offset: 0,
|
|
|
|
color: colorsArr.value[i].start //这里是我设置的渐变的颜色从线条颜色变为透明
|
|
|
|
}, {
|
|
|
|
offset: 1,
|
|
|
|
color: colorsArr.value[i].end
|
|
|
|
}])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
seriesR.value = [];
|
|
|
|
$.each(rateDataR.value, function (i, v) {
|
|
|
|
seriesR.value.push({
|
|
|
|
name: v.name,
|
|
|
|
type: 'bar',
|
|
|
|
barWidth: 16,//设置柱状图大小
|
|
|
|
data: v.data,
|
|
|
|
stack:'noStack',
|
|
|
|
symbolSize: 12,
|
|
|
|
symbol: 'circle',
|
|
|
|
itemStyle: {
|
|
|
|
normal: {
|
|
|
|
// color: colorsArr.value[i].start //图标颜色
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
|
|
|
|
offset: 0,
|
|
|
|
color: colorsArr.value[i].start //这里是我设置的渐变的颜色从线条颜色变为透明
|
|
|
|
}, {
|
|
|
|
offset: 1,
|
|
|
|
color: colorsArr.value[i].end
|
|
|
|
}])
|
|
|
|
},
|
|
|
|
borderRadius:[3,3,0,0]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
optionDataInit();
|
|
|
|
}
|
|
|
|
let search = Vue.ref({
|
|
|
|
status: 'today',
|
|
|
|
dateTime:'',
|
|
|
|
keyword: '',
|
|
|
|
page: 1,
|
|
|
|
limit: 10,
|
|
|
|
});
|
|
|
|
let dialog = Vue.ref({
|
|
|
|
title: "处理审批",
|
|
|
|
show: false,
|
|
|
|
amId: '',
|
|
|
|
amStatus: 0,
|
|
|
|
alarmId: '',
|
|
|
|
});
|
|
|
|
|
|
|
|
//表格字段
|
|
|
|
let tableData = Vue.ref({
|
|
|
|
count: 0,
|
|
|
|
dataList: [],
|
|
|
|
columns: [
|
|
|
|
{
|
|
|
|
prop: 'alarmNo',
|
|
|
|
label: '用户名',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
width: '150'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'resName',
|
|
|
|
label: '时间',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
width: '250',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'resTypeName',
|
|
|
|
label: 'IP地址',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
width: '150'
|
|
|
|
}, {
|
|
|
|
prop: 'managenameName',
|
|
|
|
label: '访问位置',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
}, {
|
|
|
|
prop: 'reason',
|
|
|
|
label: '停留总时长',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
width: '120'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
})
|
|
|
|
//点击时间选择时，其他按钮不高亮
|
|
|
|
let dateFocus=()=>{
|
|
|
|
search.value.status = 'dateRange';
|
|
|
|
}
|
|
|
|
//时间更改事件
|
|
|
|
let dateChange=(val)=>{
|
|
|
|
console.log(val,search.value.dateTime)
|
|
|
|
getDataList('dateRange')
|
|
|
|
}
|
|
|
|
|
|
|
|
//获取aj配置信息
|
|
|
|
let statusVal = Vue.ref('today');
|
|
|
|
let getDataList = (status) => {
|
|
|
|
if (status == undefined) {
|
|
|
|
status = 'today'
|
|
|
|
}
|
|
|
|
if(status != 'dateRange'){
|
|
|
|
search.value.dateTime=[];
|
|
|
|
}
|
|
|
|
statusVal.value = status;
|
|
|
|
search.value.status = status;
|
|
|
|
let startTime='';
|
|
|
|
let endTime=''
|
|
|
|
if(search.value.dateTime && search.value.dateTime.length>0){
|
|
|
|
startTime=search.value.dateTime[0];
|
|
|
|
endTime=search.value.dateTime[1];
|
|
|
|
}
|
|
|
|
let params={
|
|
|
|
page: search.value.page,
|
|
|
|
limit: search.value.limit,
|
|
|
|
keyword: search.value.keyword,
|
|
|
|
status: search.value.status,
|
|
|
|
startTime:startTime,
|
|
|
|
endTime:endTime
|
|
|
|
}
|
|
|
|
proxy.$http.get(`/api-web/bAlarmManage/page`, params, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
tableData.value.dataList = res.data;
|
|
|
|
tableData.value.count = res.count;
|
|
|
|
} else {
|
|
|
|
tableData.value.dataList = [];
|
|
|
|
tableData.value.count = 0;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
let loaddata = ({page, limit}) => {
|
|
|
|
search.value.page = page;
|
|
|
|
search.value.limit = limit;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let hideDialog = (flg) => {
|
|
|
|
dialog.value.show = flg;
|
|
|
|
if (!flg) {
|
|
|
|
getDataList(dialog.value.amStatus)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 处理弹框
|
|
|
|
let handle = (row, flag) => {
|
|
|
|
isView.value = flag;
|
|
|
|
hideDialog(true);
|
|
|
|
dialog.value.amId = row.id;
|
|
|
|
dialog.value.amStatus = row.status;
|
|
|
|
dialog.value.alarmId = row.alarmId;
|
|
|
|
}
|
|
|
|
//审核保存后关闭弹框
|
|
|
|
let saveback = (val) => {
|
|
|
|
hideDialog(val)
|
|
|
|
}
|
|
|
|
let loginName = Vue.ref(localStorage.getItem('lgn'));
|
|
|
|
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
getDataList();
|
|
|
|
setSeries();
|
|
|
|
})
|
|
|
|
|
|
|
|
return {
|
|
|
|
loginName,
|
|
|
|
height,
|
|
|
|
optionData,
|
|
|
|
optionDataInit,
|
|
|
|
series,
|
|
|
|
names,
|
|
|
|
rateData,
|
|
|
|
optionDataR,
|
|
|
|
seriesR,
|
|
|
|
namesR,
|
|
|
|
rateDataR,
|
|
|
|
setSeries,
|
|
|
|
dateFocus,
|
|
|
|
dateChange,
|
|
|
|
dialog,
|
|
|
|
hideDialog,
|
|
|
|
search,
|
|
|
|
tableData,
|
|
|
|
loaddata,
|
|
|
|
getDataList,
|
|
|
|
handle,
|
|
|
|
saveback,
|
|
|
|
statusVal,
|
|
|
|
isView
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
} |
...
|
...
|
|
