Skip to content

P
pjnkb-vue
Commit cc0bbc47 authored by 李苏's avatar 李苏 💬
Browse files
Options

首页调整弹出资源

parent 070e72db
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 223 deletions
src/views/index.vue
View file @ cc0bbc47
......@@ -99,7 +99,7 @@
{{item.name}}
</div>
<div style="height: calc(100% - 30px);width: 100%;display: flex;flex-direction: column;">
<div class="flex1 flex-center">
<div class="flex1 flex-center">
<span style="font-size: 13px;color: #26c6f0;">异常设备数量:</span> <span
style="font-size: 18px;font-style: italic;;color: #e39001;">{{item.ycsl}}</span>
</div>
......@@ -137,19 +137,19 @@
<div class="com-count-body" style=" height:calc(100% - 0px);overflow: hidden;">
<!-- 标题-->
<div class="lbbt" style="font-size: 13px;">
<div class=" text-center " style="width: 15%;" >
<div class=" text-center " style="width: 15%;">
资产IP
</div>
<div class=" text-center " style="width: 15%;">
告警等级
</div>
<div class=" text-center " style="width: 15%;" >
<div class=" text-center " style="width: 15%;">
告警状态
</div>
<div class=" text-center " style="width: 20%;" >
<div class=" text-center " style="width: 20%;">
最新发现时间
</div>
<div class=" text-center " style="width: 35%;" >
<div class=" text-center " style="width: 35%;">
告警内容
</div>
......@@ -164,7 +164,7 @@
<div class="" style="color: #68D8FE ;width: 15%;" v-text="item.stateName"></div>
<div class="" style="color: #68D8FE ;width: 20%;" v-text="item.newTime"></div>
<div class="" style="color: #68D8FE ;width: 35%;" v-text="item.content"></div>
<!-- <div class="flex1" style="color: #68D8FE ;" v-text="item.cz"></div>
<!-- <div class="flex1" style="color: #68D8FE ;" v-text="item.cz"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.cz"></div> -->
</div>
</div>
......@@ -259,23 +259,23 @@
<script>
function fullScreen(element) {
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
export default {
name: 'index',
......@@ -288,21 +288,20 @@
},
data() {
return {
aqts:0,
aqts: 0,
/* 看板时间*/
newTime: '',
timer: null,
timer1: null,
apiTimer:null,
ssList: [
],
apiTimer: null,
ssList: [],
showList: []
}
},
mounted() {
this.$nextTick(()=>{
document.getElementById("dpkb").addEventListener('dblclick', function(e) {
fullScreen(document.getElementById("dpkb"));
this.$nextTick(() => {
document.getElementById("dpkb").addEventListener('dblclick', function(e) {
fullScreen(document.getElementById("dpkb"));
}, false);
})
/* 获取各个系统的看板*/
......@@ -352,23 +351,23 @@
this.qcbjtjChart.resize()
}, 1000)
/* 定时器*/
this.apiTimer = setInterval(()=>{
this.apiTimer = setInterval(() => {
/* 获取各个系统的看板*/
this.initDevCount()
/* 实时数据*/
this.initSsList()
/* 安全天数*/
this.initAqts()
this.ypcInit(this.ypcChart)
this.zpcInit(this.zpcChart)
this.sbbjpcInit(this.sbbjpcChart)
this.bjtjyInit(this.bjtjyChart)
this.bjtjrInit(this.bjtjrChart)
this.qcczl1Init(this.qcczl1Chart)
this.qcczl2Init(this.qcczl2Chart)
this.qcbjtjInit(this.qcbjtjChart)
},1000*60*60*30)
this.ypcInit(this.ypcChart)
this.zpcInit(this.zpcChart)
this.sbbjpcInit(this.sbbjpcChart)
this.bjtjyInit(this.bjtjyChart)
this.bjtjrInit(this.bjtjrChart)
this.qcczl1Init(this.qcczl1Chart)
this.qcczl2Init(this.qcczl2Chart)
this.qcbjtjInit(this.qcbjtjChart)
}, 1000 * 60 * 60 * 30)
},
beforeDestroy() {
clearInterval(this.timer)
......@@ -376,52 +375,54 @@
clearInterval(this.apiTimer)
},
methods: {
initAqts(){
this.$post('ksh/aqts').then(res=>{
this.aqts = res.data.records||0
initAqts() {
this.$post('ksh/aqts').then(res => {
this.aqts = res.data.records || 0
})
},
initDevCount(){
this.$post('ksh/system/device/count',{}).then(res=>{
let records=res.data.records||[]
this.showList = records.map(item=>{
initDevCount() {
this.$post('ksh/system/device/count', {}).then(res => {
let records = res.data.records || []
this.showList = records.map(item => {
return {
zsl:item.deviceCount,
ycsl:item.alarmCount||0,
name:item.name
zsl: item.deviceCount,
ycsl: item.alarmCount || 0,
name: item.name
}
})
})
},
initSsList(){
this.$post('ksh/real/gj',{dateType:'D'}).then(res=>{
let records = res.data.records||[]
console.log(records,'sslist')
this.ssList = records.map(item=>{
return{
alarmLevelName:item.alarmLevelName,//告警等级
assetIp:item.assetIp,//告警等级
content:item.content,//告警等级
pubTime:item.pubTime,//首次发现时间
newTime:item.newTime,//最新发现时间
stateName:item.stateName//告警状态名称
initSsList() {
this.$post('ksh/real/gj', {
dateType: 'D'
}).then(res => {
let records = res.data.records || []
console.log(records, 'sslist')
this.ssList = records.map(item => {
return {
alarmLevelName: item.alarmLevelName, //告警等级
assetIp: item.assetIp, //告警等级
content: item.content, //告警等级
pubTime: item.pubTime, //首次发现时间
newTime: item.newTime, //最新发现时间
stateName: item.stateName //告警状态名称
}
})
})
},
wltpt(){
window.open('/拓扑图.pdf')
wltpt() {
window.open('/蒲城清洁能源工控项目部署图.pdf')
},
toFullPage(url){
toFullPage(url) {
window.open(url)
},
qcbjtjInit(myChart) {
this.$post('ksh/all/alarm/level/count',{}).then(res=>{
this.$post('ksh/all/alarm/level/count', {}).then(res => {
let records = res.data.records
let nameList = records.map(item=>item.name)
let countList = records.map(item=>item.count)
let nameList = records.map(item => item.name)
let countList = records.map(item => item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e025", "#e646a6", "#8784e6"],
......@@ -476,7 +477,7 @@
type: 'line',
data: countList,
label: {
color: '#fff',
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
......@@ -492,10 +493,10 @@
},
qcczl2Init(myChart) {
this.$post('ksh/all/cz/radio',{}).then(res=>{
let records = res.data.records||[]
let countList = records.map(item=>item.count)
let nameList = records.map(item=>item.name)
this.$post('ksh/all/cz/radio', {}).then(res => {
let records = res.data.records || []
let countList = records.map(item => item.count)
let nameList = records.map(item => item.name)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
......@@ -548,7 +549,7 @@
type: 'bar',
data: countList,
label: {
color: '#fff',
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
......@@ -558,7 +559,7 @@
};
myChart.setOption(option);
})
})
......@@ -566,19 +567,19 @@
},
qcczl1Init(myChart) {
this.$post('ksh/all/cz/radio',{}).then(res=>{
let records = res.data.records||[]
let countList = records.map(item=>item.count)
let nameList = records.map(item=>item.name)
let ratioList = records.map(item=>item.ratio)
let dataList = records.map(item=>{
return{
name:item.name,
value:item.count
this.$post('ksh/all/cz/radio', {}).then(res => {
let records = res.data.records || []
let countList = records.map(item => item.count)
let nameList = records.map(item => item.name)
let ratioList = records.map(item => item.ratio)
let dataList = records.map(item => {
return {
name: item.name,
value: item.count
}
})
var option = {
var option = {
// graphic: [
// {
// type: "text",
......@@ -593,46 +594,46 @@
// },
// ],
color: ['#ee6666', '#fcd74f', '#3ba272' ],
tooltip: {
trigger: 'item'
color: ['#ee6666', '#fcd74f', '#3ba272'],
tooltip: {
trigger: 'item'
},
// legend: {
// top: 10,
// left: 'right',
// orient: "vertical",
// right: 10,
// itemHeight: 8,
// textStyle: {
// color: '#fff'
// }
// },
series: [{
// name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
formatter: '{d}%',
color: '#fff',
fontSize: 14
},
// legend: {
// top: 10,
// left: 'right',
// orient: "vertical",
// right: 10,
// itemHeight: 8,
// textStyle: {
// color: '#fff'
// }
// },
series: [{
// name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
formatter: '{d}%',
color: '#fff',
fontSize: 14
},
labelLine: {
show: true,
length: 5,
length2: 5,
lineStyle: {
color: '#fff'
}
},
data: dataList
}],
};
myChart.setOption(option);
labelLine: {
show: true,
length: 5,
length2: 5,
lineStyle: {
color: '#fff'
}
},
data: dataList
}],
};
myChart.setOption(option);
})
......@@ -641,84 +642,84 @@
},
bjtjrInit(myChart) {
this.$post('ksh/alarm/count',{
dateType:'D'
}).then(res=>{
let records =res.data.records
let dateList =records.map(item=>item.date)
let countList =records.map(item=>item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
graphic: [{
type: 'text',
left: 'center', // 文本位置：右侧
top: '3%', // 距离顶部的距离
style: {
text: '日统计', // 标题文本
fill: '#29EEF3', // 标题颜色
fontSize: 10, // 标题字体大小
fontWeight: 'bold' // 标题字体加粗
}
}],
legend: {
align: 'left',
right: 0,
// orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
}
},
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: dateList,
axisTick: {
show: true,
lineStyle: {
color: "white"
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data:countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
}]
};
myChart.setOption(option);
this.$post('ksh/alarm/count', {
dateType: 'D'
}).then(res => {
let records = res.data.records
let dateList = records.map(item => item.date)
let countList = records.map(item => item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
graphic: [{
type: 'text',
left: 'center', // 文本位置：右侧
top: '3%', // 距离顶部的距离
style: {
text: '日统计', // 标题文本
fill: '#29EEF3', // 标题颜色
fontSize: 10, // 标题字体大小
fontWeight: 'bold' // 标题字体加粗
}
}],
legend: {
align: 'left',
right: 0,
// orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
}
},
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: dateList,
axisTick: {
show: true,
lineStyle: {
color: "white"
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
}]
};
myChart.setOption(option);
})
......@@ -727,12 +728,12 @@
},
bjtjyInit(myChart) {
this.$post('ksh/alarm/count',{
dateType:'M'
}).then(res=>{
this.$post('ksh/alarm/count', {
dateType: 'M'
}).then(res => {
let records = res.data.records
let dateList = records.map(item=>item.date)
let countList = records.map(item=>item.count)
let dateList = records.map(item => item.date)
let countList = records.map(item => item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
......@@ -797,7 +798,7 @@
type: 'line',
data: countList,
label: {
color: '#fff',
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
......@@ -813,10 +814,12 @@
},
ypcInit(myChart) {
this.$post('ksh/all/factory/alarm/pl',{dateType:'M'}).then(res=>{
this.$post('ksh/all/factory/alarm/pl', {
dateType: 'M'
}).then(res => {
let records = res.data.records
let systemNameList = records.map(item=>item.systemName)
let countList = records.map(item=>item.count)
let systemNameList = records.map(item => item.systemName)
let countList = records.map(item => item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
......@@ -862,7 +865,7 @@
show: true,
color: 'white',
interval: 0, // 确保所有标签都显示
rotate:8,
rotate: 8,
fontSize: 10,
}
}],
......@@ -873,7 +876,7 @@
type: 'bar',
data: countList,
label: {
color: '#fff',
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
......@@ -892,10 +895,12 @@
/* 周频次*/
zpcInit(myChart) {
this.$post('ksh/all/factory/alarm/pl',{dateType:'W'}).then(res=>{
this.$post('ksh/all/factory/alarm/pl', {
dateType: 'W'
}).then(res => {
let records = res.data.records
let systemNameList = records.map(item=>item.systemName)
let countList = records.map(item=>item.count)
let systemNameList = records.map(item => item.systemName)
let countList = records.map(item => item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
......@@ -940,7 +945,7 @@
show: true,
color: 'white',
interval: 0, // 确保所有标签都显示
rotate:8,
rotate: 8,
fontSize: 10,
}
}],
......@@ -951,7 +956,7 @@
type: 'bar',
data: countList,
label: {
color: '#fff',
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
......@@ -961,16 +966,16 @@
};
myChart.setOption(option);
})
})
},
sbbjpcInit(myChart) {
this.$post('ksh/device/alarm/pc/top10',{}).then(res=>{
this.$post('ksh/device/alarm/pc/top10', {}).then(res => {
let records = res.data.records
let deviceNameList = records.map(item=>item.deviceName).reverse()
let countList = records.map(item=>item.count).reverse()
let deviceNameList = records.map(item => item.deviceName).reverse()
let countList = records.map(item => item.count).reverse()
/* */
var option = {
color: ["#36a5d8", "#15c9ff"],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment