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