Skip to content

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

接口对接 package.json common调整为相对地址 正常启动需要自己改动 file:D://FrontPackage/frontpackage

parent f35cf5f8
Hide whitespace changes
Inline Side-by-side
Showing with 653 additions and 811 deletions
src/views/index.vue
View file @ 1878a836
...@@ -99,12 +99,12 @@ ...@@ -99,12 +99,12 @@
{{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>
<div class="flex1 text-center"> <div class="flex1 text-center ">
<div class="flex1 flex-center"> <div class="flex1 ">
<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: #fff;">{{item.zsl}}</span> style="font-size: 18px;font-style: italic;;color: #fff;">{{item.zsl}}</span>
</div> </div>
...@@ -137,40 +137,35 @@ ...@@ -137,40 +137,35 @@
<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="flex1 text-center "> <div class=" text-center " style="width: 15%;" >
时间 资产IP
</div> </div>
<div class="flex1 text-center "> <div class=" text-center " style="width: 15%;">
位号 告警等级
</div> </div>
<div class="flex1 text-center "> <div class=" text-center " style="width: 15%;" >
描述 告警状态
</div> </div>
<div class="flex1 text-center "> <div class=" text-center " style="width: 20%;" >
类型 最新发现时间
</div> </div>
<div class="flex1 text-center "> <div class=" text-center " style="width: 35%;" >
等级 告警内容
</div>
<div class="flex1 text-center ">
预警值
</div>
<div class="flex1 text-center ">
状态
</div> </div>
</div> </div>
<ScrollSeamless :class-option="optionSingleHeight" :data="ssList" class="lbbody" <ScrollSeamless :class-option="optionSingleHeight" :data="ssList" class="lbbody"
style="overflow: hidden;"> style="overflow: hidden;">
<div class="full lbtit"> <div class="full lbtit">
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center" <div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
v-for="item in ssList"> v-for="item in ssList">
<div class="flex1" style="color: #68D8FE ;" v-text="item.code"></div> <div class="" style="color: #68D8FE ;width: 15%;" v-text="item.assetIp"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div> <div class="" style="color: #68D8FE ;width: 15%;" v-text="item.alarmLevelName"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.jzbm"></div> <div class="" style="color: #68D8FE ;width: 15%;" v-text="item.stateName"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gg"></div> <div class="" style="color: #68D8FE ;width: 20%;" v-text="item.newTime"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.cz"></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>
</ScrollSeamless> </ScrollSeamless>
...@@ -189,7 +184,7 @@ ...@@ -189,7 +184,7 @@
<div class="main_body_right_c1"> <div class="main_body_right_c1">
<div class="full flex-center"> <div class="full flex-center">
<div id="aqscts" style="width: 100%;font-size: 24px;line-height:100%;text-align: center;"> <div id="aqscts" style="width: 100%;font-size: 24px;line-height:100%;text-align: center;">
已连续安全运行<span style="color: #39b778;font-size: 32px;font-style: italic;font-weight: 800;">2551</span> 天 已连续安全运行<span style="color: #39b778;font-size: 32px;font-style: italic;font-weight: 800;">{{aqts}}</span> 天
</div> </div>
</div> </div>
...@@ -293,197 +288,14 @@ ...@@ -293,197 +288,14 @@
}, },
data() { data() {
return { return {
aqts:0,
/* 看板时间*/ /* 看板时间*/
newTime: '', newTime: '',
timer: null, timer: null,
timer1: null, timer1: null,
ssList: [{ ssList: [
"name": "螺丝A",
"jzbm": "JZ001",
"code": "LSA001",
"gg": "M6x20",
"cz": "不锈钢"
},
{
"name": "螺丝B",
"jzbm": "JZ002",
"code": "LSA002",
"gg": "M8x25",
"cz": "碳钢"
},
{
"name": "螺母A",
"jzbm": "JZ003",
"code": "LMA001",
"gg": "M6",
"cz": "铜"
},
{
"name": "螺母B",
"jzbm": "JZ004",
"code": "LMA002",
"gg": "M8",
"cz": "不锈钢"
},
{
"name": "垫片A",
"jzbm": "JZ005",
"code": "DPA001",
"gg": "Φ10",
"cz": "橡胶"
},
{
"name": "垫片B",
"jzbm": "JZ006",
"code": "DPA002",
"gg": "Φ12",
"cz": "塑料"
},
{
"name": "弹簧A",
"jzbm": "JZ007",
"code": "THA001",
"gg": "Φ8x50",
"cz": "弹簧钢"
},
{
"name": "弹簧B",
"jzbm": "JZ008",
"code": "THA002",
"gg": "Φ10x60",
"cz": "不锈钢"
},
{
"name": "轴承A",
"jzbm": "JZ009",
"code": "ZCA001",
"gg": "6204",
"cz": "铬钢"
},
{
"name": "轴承B",
"jzbm": "JZ010",
"code": "ZCA002",
"gg": "6305",
"cz": "不锈钢"
},
{
"name": "油封A",
"jzbm": "JZ011",
"code": "YFA001",
"gg": "Φ50x10",
"cz": "丁腈橡胶"
},
{
"name": "油封B",
"jzbm": "JZ012",
"code": "YFA002",
"gg": "Φ60x12",
"cz": "氟橡胶"
},
{
"name": "链条A",
"jzbm": "JZ013",
"code": "LTA001",
"gg": "08B",
"cz": "合金钢"
},
{
"name": "链条B",
"jzbm": "JZ014",
"code": "LTA002",
"gg": "10A",
"cz": "不锈钢"
},
{
"name": "齿轮A",
"jzbm": "JZ015",
"code": "CLA001",
"gg": "M=2,Z=20",
"cz": "铸铁"
},
{
"name": "齿轮B",
"jzbm": "JZ016",
"code": "CLA002",
"gg": "M=3,Z=30",
"cz": "合金钢"
},
{
"name": "联轴器A",
"jzbm": "JZ017",
"code": "LHA001",
"gg": "Φ50",
"cz": "铝合金"
},
{
"name": "联轴器B",
"jzbm": "JZ018",
"code": "LHA002",
"gg": "Φ60",
"cz": "不锈钢"
},
{
"name": "传感器A",
"jzbm": "JZ019",
"code": "CGA001",
"gg": "PT100",
"cz": "不锈钢"
},
{
"name": "传感器B",
"jzbm": "JZ020",
"code": "CGA002",
"gg": "NTC10K",
"cz": "陶瓷"
}
], ],
showList: [{ showList: []
name: "DCS系统",
zsl: 120,
ycsl: 15
},
{
name: "SIS系统",
zsl: 80,
ycsl: 8
},
{
name: "ITCC系统",
zsl: 50,
ycsl: 5
},
{
name: "GDS系统",
zsl: 60,
ycsl: 6
},
{
name: "称重系统",
zsl: 40,
ycsl: 4
},
{
name: "设备管理系统",
zsl: 200,
ycsl: 20
},
{
name: "点检系统",
zsl: 90,
ycsl: 10
},
{
name: "PLC系统",
zsl: 150,
ycsl: 18
},
// {
// name: "设备状态检测",
// zsl: 110,
// ycsl: 12
// }
]
} }
}, },
mounted() { mounted() {
...@@ -492,6 +304,12 @@ ...@@ -492,6 +304,12 @@
fullScreen(document.getElementById("dpkb")); fullScreen(document.getElementById("dpkb"));
}, false); }, false);
}) })
/* 获取各个系统的看板*/
this.initDevCount()
/* 实时数据*/
this.initSsList()
/* 安全天数*/
this.initAqts()
this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss') this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -532,680 +350,704 @@ ...@@ -532,680 +350,704 @@
this.qcczl2Chart.resize() this.qcczl2Chart.resize()
this.qcbjtjChart.resize() this.qcbjtjChart.resize()
}, 1000) }, 1000)
/* 定时器*/
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)
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer) clearInterval(this.timer)
clearInterval(this.timer1) clearInterval(this.timer1)
clearInterval(this.timer1)
}, },
methods: { methods: {
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=>{
return {
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//告警状态名称
}
})
})
},
wltpt(){ wltpt(){
window.open('/拓扑图.pdf') window.open('/拓扑图.pdf')
}, },
toFullPage(url){ toFullPage(url){
window.open(url) window.open(url)
}, },
qcbjtjInit(myChart) { qcbjtjInit(myChart) {
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e025", "#e646a6", "#8784e6"], this.$post('ksh/all/alarm/level/count',{}).then(res=>{
tooltip: { let records = res.data.records
trigger: 'axis', let nameList = records.map(item=>item.name)
axisPointer: { let countList = records.map(item=>item.count)
type: 'shadow'
} let option = {
}, color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e025", "#e646a6", "#8784e6"],
tooltip: {
legend: { trigger: 'axis',
align: 'left', axisPointer: {
right: 0, type: 'shadow'
// 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: ['一般', '重要', '紧急'],
axisTick: {
show: true,
lineStyle: {
color: "white"
} }
}, },
axisLine: {
show: true, legend: {
lineStyle: { align: 'left',
color: "white" right: 0,
// orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
} }
}, },
axisLabel: { grid: {
show: true, top: '20%',
color: 'white' left: '-8%',
} right: '4%',
}], bottom: '3%',
yAxis: [{ containLabel: true
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data: [
13, 24, 16
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
}, },
barWidth: '10px' xAxis: [{
}] type: 'category',
data: nameList,
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);
})
};
myChart.setOption(option);
}, },
qcczl2Init(myChart) { qcczl2Init(myChart) {
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"], this.$post('ksh/all/cz/radio',{}).then(res=>{
tooltip: { let records = res.data.records||[]
trigger: 'axis', let countList = records.map(item=>item.count)
axisPointer: { let nameList = records.map(item=>item.name)
type: 'shadow' let option = {
} color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
}, tooltip: {
// graphic: [{ trigger: 'axis',
// type: 'text', axisPointer: {
// left: 'center', // 文本位置：右侧 type: 'shadow'
// 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: ['已处置', '未处置'],
axisTick: {
show: true,
lineStyle: {
color: "white"
} }
}, },
axisLine: { legend: {
show: true, align: 'left',
lineStyle: { right: 0,
color: "white" // orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
} }
}, },
axisLabel: { grid: {
show: true, top: '20%',
color: 'white' left: '-8%',
} right: '4%',
}], bottom: '3%',
yAxis: [{ containLabel: true
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
data: [
100, 45
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
}, },
barWidth: '10px' xAxis: [{
}] type: 'category',
data: nameList,
axisTick: {
show: true,
lineStyle: {
color: "white"
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
}]
};
myChart.setOption(option);
})
};
myChart.setOption(option);
}, },
qcczl1Init(myChart) { qcczl1Init(myChart) {
var option = {
graphic: [ //为环形图中间添加文字
{
type: "text",
left: "center",
top: "55%",
style: {
text: '45%',
textAlign: "center",
fill: "#ffffff",
fontSize: 16,
},
},
], this.$post('ksh/all/cz/radio',{}).then(res=>{
color: ['#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', let records = res.data.records||[]
'#ea7ccc' let countList = records.map(item=>item.count)
], let nameList = records.map(item=>item.name)
tooltip: { let ratioList = records.map(item=>item.ratio)
trigger: 'item' let dataList = records.map(item=>{
}, return{
legend: { name:item.name,
top: 20, value:item.count
left: 'right',
orient: "vertical",
right: 10,
itemHeight: 8,
textStyle: {
color: '#fff' // 图例文字颜色
} }
}, })
series: [{
// name: 'Access From', var option = {
type: 'pie', // graphic: [
radius: ['40%', '70%'], // {
center: ['50%', '60%'], // type: "text",
avoidLabelOverlap: false, // left: "center",
data: [{ // top: "55%",
value: 100, // style: {
name: '已处置' // text: '45%',
}, { // textAlign: "center",
value: 45, // fill: "#ffffff",
name: '未处置' // fontSize: 16,
}] // },
}], // },
// ],
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
},
labelLine: {
show: true,
length: 5,
length2: 5,
lineStyle: {
color: '#fff'
}
},
data: dataList
}],
};
myChart.setOption(option);
})
};
myChart.setOption(option);
}, },
bjtjrInit(myChart) { bjtjrInit(myChart) {
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: ['1号', '2号', '3号', '4号', '5号'],
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: [
34, 12, 55, 24, 55, 22, 63, 11
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
}]
}; this.$post('ksh/alarm/count',{
myChart.setOption(option); 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);
})
}, },
bjtjyInit(myChart) { bjtjyInit(myChart) {
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"], this.$post('ksh/alarm/count',{
tooltip: { dateType:'M'
trigger: 'axis', }).then(res=>{
axisPointer: { let records = res.data.records
type: 'shadow' let dateList = records.map(item=>item.date)
} let countList = records.map(item=>item.count)
},
graphic: [{ let option = {
type: 'text', color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
left: 'center', // 文本位置：右侧 tooltip: {
top: '3%', // 距离顶部的距离 trigger: 'axis',
style: { axisPointer: {
text: '月统计', // 标题文本 type: 'shadow'
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: ['7月', '8月', '9月', '10月', '11月'],
axisTick: {
show: true,
lineStyle: {
color: "white"
} }
}, },
axisLine: { graphic: [{
show: true, type: 'text',
lineStyle: { left: 'center', // 文本位置：右侧
color: "white" 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'
} }
}, },
axisLabel: { grid: {
show: true, top: '20%',
color: 'white' left: '-8%',
} right: '4%',
}], bottom: '3%',
yAxis: [{ containLabel: true
show: false // 隐藏 y 轴 },
}], xAxis: [{
series: [{ type: 'category',
type: 'line', data: dateList,
data: [{ axisTick: {
value: 432, show: true,
lineStyle: {
color: "white"
}
}, },
{ axisLine: {
value: 4201, show: true,
lineStyle: {
color: "white"
}
}, },
{ axisLabel: {
value: 4004, show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
}, },
{ barWidth: '10px'
value: 4189, }]
};
myChart.setOption(option);
})
},
{
value: 4059,
},
{
value: 4012,
},
{
value: 3854,
}
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
}]
};
myChart.setOption(option);
}, },
ypcInit(myChart) { ypcInit(myChart) {
let option = { this.$post('ksh/all/factory/alarm/pl',{dateType:'M'}).then(res=>{
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"], let records = res.data.records
tooltip: { let systemNameList = records.map(item=>item.systemName)
trigger: 'axis', let countList = records.map(item=>item.count)
axisPointer: {
type: 'shadow' let option = {
} color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
}, tooltip: {
legend: { trigger: 'axis',
align: 'left', axisPointer: {
right: 0, type: 'shadow'
// 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: ['XLPF', 'XLPR', 'XLP-HF', 'ULP+', 'LP', 'BW', 'SW'],
axisTick: {
show: true,
lineStyle: {
color: "white"
} }
}, },
axisLine: { legend: {
show: true, align: 'left',
lineStyle: { right: 0,
color: "white" // orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
} }
}, },
axisLabel: { grid: {
show: true, top: '20%',
color: 'white' left: '-8%',
} right: '4%',
}], bottom: '3%',
yAxis: [{ containLabel: true
show: false // 隐藏 y 轴 },
}], xAxis: [{
series: [{ type: 'category',
type: 'bar', data: systemNameList,
data: [{ axisTick: {
value: 43200, show: true,
itemStyle: { lineStyle: {
color: "#15c9ff" // 第一个柱子颜色 color: "white"
}
},
{
value: 420158,
itemStyle: {
color: "#748b89" // 第二个柱子颜色
}
},
{
value: 400254,
itemStyle: {
color: "#e68642" // 第三个柱子颜色
}
},
{
value: 418910,
itemStyle: {
color: "#e6b332" // 第四个柱子颜色
}
},
{
value: 405968,
itemStyle: {
color: "#e6e143" // 第五个柱子颜色
} }
}, },
{ axisLine: {
value: 401254, show: true,
itemStyle: { lineStyle: {
color: "#e646a6" // 第六个柱子颜色 color: "white"
} }
}, },
{ axisLabel: {
value: 385421, show: true,
itemStyle: { color: 'white'
color: "#8784e6" // 第七个柱子颜色
}
} }
], }],
label: { yAxis: [{
show: true, show: false // 隐藏 y 轴
position: 'top' // 数字显示在柱子上方 }],
}, series: [{
barWidth: '15px' type: 'bar',
}] data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '15px'
}]
};
myChart.setOption(option);
})
};
myChart.setOption(option);
}, },
/* 周频次*/ /* 周频次*/
zpcInit(myChart) { zpcInit(myChart) {
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"], this.$post('ksh/all/factory/alarm/pl',{dateType:'W'}).then(res=>{
tooltip: { let records = res.data.records
trigger: 'axis', let systemNameList = records.map(item=>item.systemName)
axisPointer: { let countList = records.map(item=>item.count)
type: 'shadow'
} let option = {
}, color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
legend: { tooltip: {
align: 'left', trigger: 'axis',
right: 0, axisPointer: {
x: 'right', //居左显示 type: 'shadow'
y: 'left', //延Y轴
textStyle: {
color: 'white'
}
},
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['XLPF', 'XLPR', 'XLP-HF', 'ULP+', 'LP', 'BW', 'SW'],
axisTick: {
show: true,
lineStyle: {
color: "white"
} }
}, },
axisLine: { legend: {
show: true, align: 'left',
lineStyle: { right: 0,
color: "white" x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
} }
}, },
axisLabel: { grid: {
show: true, top: '20%',
color: 'white' left: '-8%',
} right: '4%',
}], bottom: '3%',
yAxis: [{ containLabel: true
show: false // 隐藏 y 轴 },
}], xAxis: [{
series: [{ type: 'category',
type: 'bar', data: systemNameList,
data: [{ axisTick: {
value: 43200, show: true,
itemStyle: { lineStyle: {
color: "#15c9ff" // 第一个柱子颜色 color: "white"
}
},
{
value: 420158,
itemStyle: {
color: "#748b89" // 第二个柱子颜色
}
},
{
value: 400254,
itemStyle: {
color: "#e68642" // 第三个柱子颜色
}
},
{
value: 418910,
itemStyle: {
color: "#e6b332" // 第四个柱子颜色
}
},
{
value: 405968,
itemStyle: {
color: "#e6e143" // 第五个柱子颜色
} }
}, },
{ axisLine: {
value: 401254, show: true,
itemStyle: { lineStyle: {
color: "#e646a6" // 第六个柱子颜色 color: "white"
} }
}, },
{ axisLabel: {
value: 385421, show: true,
itemStyle: { color: 'white'
color: "#8784e6" // 第七个柱子颜色
}
} }
], }],
label: { yAxis: [{
show: true, show: false // 隐藏 y 轴
position: 'top' // 数字显示在柱子上方 }],
}, series: [{
barWidth: '15px' type: 'bar',
}] data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '15px'
}]
};
myChart.setOption(option);
})
};
myChart.setOption(option);
}, },
sbbjpcInit(myChart) { sbbjpcInit(myChart) {
var option = { this.$post('ksh/device/alarm/pc/top10',{}).then(res=>{
color: ["#36a5d8", "#15c9ff"], let records = res.data.records
tooltip: { let deviceNameList = records.map(item=>item.deviceName).reverse()
trigger: 'axis', let countList = records.map(item=>item.count).reverse()
axisPointer: { /* */
type: 'shadow' var option = {
} color: ["#36a5d8", "#15c9ff"],
}, tooltip: {
legend: { trigger: 'axis',
align: 'left', axisPointer: {
right: 0, type: 'shadow'
// orient:"vertical",
x: 'right', // 居右显示
y: 'top', // 延Y轴顶部
textStyle: {
color: 'white'
}
},
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: [{
type: 'category',
data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8', '设备9', '设备10'],
axisTick: {
show: false,
lineStyle: {
color: "white"
} }
}, },
axisLine: { grid: {
show: false, top: '10%',
lineStyle: { left: '3%',
color: "white" right: '4%',
} bottom: '3%',
}, containLabel: true
axisLabel: {
show: true,
color: 'white'
}
}],
xAxis: [{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: "white"
}
},
splitLine: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "white"
}
}, },
axisLabel: { yAxis: [{
show: true, type: 'category',
color: 'white', data: deviceNameList,
rotate: 0, axisTick: {
interval: 0, show: false,
fontSize: 12, lineStyle: {
align: 'center', color: "white"
} }
}], },
series: [{ axisLine: {
// name: '设备数量', show: false,
type: 'bar', lineStyle: {
stack: 'total', color: "white"
label: { }
},
axisLabel: {
show: true, show: true,
color: '#fff', color: 'white'
position: 'center·' // 数字显示在柱子右侧 }
}],
xAxis: [{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: "white"
}
}, },
emphasis: { splitLine: {
focus: 'series' show: false,
}, },
data: [124, 512, 12, 3, 998, 124, 222, 999, 123, 456] axisLine: {
} show: false,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: 'white',
rotate: 0,
interval: 0,
fontSize: 12,
align: 'center',
}
}],
series: [{
name: '报警频次',
type: 'bar',
stack: 'total',
label: {
show: true,
color: '#fff',
position: 'right' // 数字显示在柱子右侧
},
emphasis: {
focus: 'series'
},
data: countList
}
]
}
myChart.setOption(option);
})
]
}
myChart.setOption(option);
} }
} }
...@@ -1238,7 +1080,7 @@ ...@@ -1238,7 +1080,7 @@
// grid-template-columns: repeat(3, 1fr); // grid-template-columns: repeat(3, 1fr);
// grid-template-rows: repeat(3, 32%); // grid-template-rows: repeat(3, 32%);
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 48%); grid-template-rows: repeat(2, 47%);
gap: 10px; gap: 10px;
height: calc(100% - 66px); height: calc(100% - 66px);
width: 100%; width: 100%;
...@@ -1460,13 +1302,13 @@ ...@@ -1460,13 +1302,13 @@
.main_body_center_c1 { .main_body_center_c1 {
height: 60%; height: 55%;
width: 100%; width: 100%;
} }
.main_body_center_c2 { .main_body_center_c2 {
height: 40%; height: 45%;
width: 100%; width: 100%;
} }
......
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