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 @@
{{item.name}}
</div>
<div style="height: calc(100% - 30px);width: 100%;display: flex;flex-direction: column;">
<div class="flex1 flex-center">
<span style="font-size: 13px;color: #26c6f0;">报警设备数量:</span> <span
<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>
<div class="flex1 text-center">
<div class="flex1 flex-center">
<div class="flex1 text-center ">
<div class="flex1 ">
<span style="font-size: 13px;color: #26c6f0;">设备总数量:</span> <span
style="font-size: 18px;font-style: italic;;color: #fff;">{{item.zsl}}</span>
</div>
......@@ -137,40 +137,35 @@
<div class="com-count-body" style=" height:calc(100% - 0px);overflow: hidden;">
<!-- 标题-->
<div class="lbbt" style="font-size: 13px;">
<div class="flex1 text-center ">
时间
<div class=" text-center " style="width: 15%;" >
资产IP
</div>
<div class="flex1 text-center ">
位号
<div class=" text-center " style="width: 15%;">
告警等级
</div>
<div class="flex1 text-center ">
描述
<div class=" text-center " style="width: 15%;" >
告警状态
</div>
<div class="flex1 text-center ">
类型
<div class=" text-center " style="width: 20%;" >
最新发现时间
</div>
<div class="flex1 text-center ">
等级
</div>
<div class="flex1 text-center ">
预警值
</div>
<div class="flex1 text-center ">
状态
<div class=" text-center " style="width: 35%;" >
告警内容
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="ssList" class="lbbody"
style="overflow: hidden;">
<div class="full lbtit">
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
v-for="item in ssList">
<div class="flex1" style="color: #68D8FE ;" v-text="item.code"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.jzbm"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gg"></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="" style="color: #68D8FE ;width: 15%;" v-text="item.assetIp"></div>
<div class="" style="color: #68D8FE ;width: 15%;" v-text="item.alarmLevelName"></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: 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>
</div>
</ScrollSeamless>
......@@ -189,7 +184,7 @@
<div class="main_body_right_c1">
<div class="full flex-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>
......@@ -293,197 +288,14 @@
},
data() {
return {
aqts:0,
/* 看板时间*/
newTime: '',
timer: null,
timer1: null,
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": "陶瓷"
}
ssList: [
],
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
// }
]
showList: []
}
},
mounted() {
......@@ -492,6 +304,12 @@
fullScreen(document.getElementById("dpkb"));
}, false);
})
/* 获取各个系统的看板*/
this.initDevCount()
/* 实时数据*/
this.initSsList()
/* 安全天数*/
this.initAqts()
this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => {
......@@ -532,680 +350,704 @@
this.qcczl2Chart.resize()
this.qcbjtjChart.resize()
}, 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() {
clearInterval(this.timer)
clearInterval(this.timer1)
clearInterval(this.timer1)
},
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(){
window.open('/拓扑图.pdf')
},
toFullPage(url){
window.open(url)
window.open(url)
},
qcbjtjInit(myChart) {
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e025", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
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"
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 option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e025", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
legend: {
align: 'left',
right: 0,
// orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data: [
13, 24, 16
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
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) {
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: ['已处置', '未处置'],
axisTick: {
show: true,
lineStyle: {
color: "white"
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: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
legend: {
align: 'left',
right: 0,
// orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
data: [
100, 45
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
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) {
var option = {
graphic: [ //为环形图中间添加文字
{
type: "text",
left: "center",
top: "55%",
style: {
text: '45%',
textAlign: "center",
fill: "#ffffff",
fontSize: 16,
},
},
],
color: ['#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
'#ea7ccc'
],
tooltip: {
trigger: 'item'
},
legend: {
top: 20,
left: 'right',
orient: "vertical",
right: 10,
itemHeight: 8,
textStyle: {
color: '#fff' // 图例文字颜色
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
}
},
series: [{
// name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
data: [{
value: 100,
name: '已处置'
}, {
value: 45,
name: '未处置'
}]
}],
})
var option = {
// graphic: [
// {
// type: "text",
// left: "center",
// top: "55%",
// style: {
// text: '45%',
// textAlign: "center",
// fill: "#ffffff",
// 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) {
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'
}]
};
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);
})
},
bjtjyInit(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: ['7月', '8月', '9月', '10月', '11月'],
axisTick: {
show: true,
lineStyle: {
color: "white"
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 option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
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'
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data: [{
value: 432,
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: dateList,
axisTick: {
show: true,
lineStyle: {
color: "white"
}
},
{
value: 4201,
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
{
value: 4004,
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
{
value: 4189,
barWidth: '10px'
}]
};
myChart.setOption(option);
})
},
{
value: 4059,
},
{
value: 4012,
},
{
value: 3854,
}
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
}]
};
myChart.setOption(option);
},
ypcInit(myChart) {
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
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: ['XLPF', 'XLPR', 'XLP-HF', 'ULP+', 'LP', 'BW', 'SW'],
axisTick: {
show: true,
lineStyle: {
color: "white"
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 option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
legend: {
align: 'left',
right: 0,
// orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
data: [{
value: 43200,
itemStyle: {
color: "#15c9ff" // 第一个柱子颜色
}
},
{
value: 420158,
itemStyle: {
color: "#748b89" // 第二个柱子颜色
}
},
{
value: 400254,
itemStyle: {
color: "#e68642" // 第三个柱子颜色
}
},
{
value: 418910,
itemStyle: {
color: "#e6b332" // 第四个柱子颜色
}
},
{
value: 405968,
itemStyle: {
color: "#e6e143" // 第五个柱子颜色
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: systemNameList,
axisTick: {
show: true,
lineStyle: {
color: "white"
}
},
{
value: 401254,
itemStyle: {
color: "#e646a6" // 第六个柱子颜色
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
{
value: 385421,
itemStyle: {
color: "#8784e6" // 第七个柱子颜色
}
axisLabel: {
show: true,
color: 'white'
}
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '15px'
}]
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '15px'
}]
};
myChart.setOption(option);
})
};
myChart.setOption(option);
},
/* 周频次*/
zpcInit(myChart) {
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
align: 'left',
right: 0,
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"
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 option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
legend: {
align: 'left',
right: 0,
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
color: 'white'
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
data: [{
value: 43200,
itemStyle: {
color: "#15c9ff" // 第一个柱子颜色
}
},
{
value: 420158,
itemStyle: {
color: "#748b89" // 第二个柱子颜色
}
},
{
value: 400254,
itemStyle: {
color: "#e68642" // 第三个柱子颜色
}
},
{
value: 418910,
itemStyle: {
color: "#e6b332" // 第四个柱子颜色
}
},
{
value: 405968,
itemStyle: {
color: "#e6e143" // 第五个柱子颜色
grid: {
top: '20%',
left: '-8%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: systemNameList,
axisTick: {
show: true,
lineStyle: {
color: "white"
}
},
{
value: 401254,
itemStyle: {
color: "#e646a6" // 第六个柱子颜色
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
{
value: 385421,
itemStyle: {
color: "#8784e6" // 第七个柱子颜色
}
axisLabel: {
show: true,
color: 'white'
}
],
label: {
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '15px'
}]
}],
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '15px'
}]
};
myChart.setOption(option);
})
};
myChart.setOption(option);
},
sbbjpcInit(myChart) {
var option = {
color: ["#36a5d8", "#15c9ff"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
align: 'left',
right: 0,
// 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"
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()
/* */
var option = {
color: ["#36a5d8", "#15c9ff"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
axisLine: {
show: false,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
xAxis: [{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: "white"
}
},
splitLine: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "white"
}
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
axisLabel: {
show: true,
color: 'white',
rotate: 0,
interval: 0,
fontSize: 12,
align: 'center',
}
}],
series: [{
// name: '设备数量',
type: 'bar',
stack: 'total',
label: {
yAxis: [{
type: 'category',
data: deviceNameList,
axisTick: {
show: false,
lineStyle: {
color: "white"
}
},
axisLine: {
show: false,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: '#fff',
position: 'center·' // 数字显示在柱子右侧
color: 'white'
}
}],
xAxis: [{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: "white"
}
},
emphasis: {
focus: 'series'
splitLine: {
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 @@
// grid-template-columns: repeat(3, 1fr);
// grid-template-rows: repeat(3, 32%);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 48%);
grid-template-rows: repeat(2, 47%);
gap: 10px;
height: calc(100% - 66px);
width: 100%;
......@@ -1460,13 +1302,13 @@
.main_body_center_c1 {
height: 60%;
height: 55%;
width: 100%;
}
.main_body_center_c2 {
height: 40%;
height: 45%;
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