Skip to content

H
hnsd
Commit 22619aa8 authored by liubinyu's avatar liubinyu
Browse files
Options

调整了趋势图宫格排列

parent 1f479bbe
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 69 deletions
src/common/const.js
View file @ 22619aa8
// 常量 // 常量
// const server_ip = '8.130.25.40'; // 测试服务器 // const server_ip = '8.130.25.40'; // 测试服务器
// const server_ip = '127.0.0.1';
const server_ip = '192.168.192.128'; // 线上内网ip const server_ip = '192.168.192.128'; // 线上内网ip
// const server_ip = '192.168.43.122:8258'; // const server_ip = '192.168.43.122:8258';
...@@ -31,8 +30,8 @@ export const ButtonMap = { ...@@ -31,8 +30,8 @@ export const ButtonMap = {
// 首页图表样式 // 首页图表样式
export const ChartStyle = { export const ChartStyle = {
loadingColor: 'rgba(0, 0, 0, 0.5)', // 加载动画颜色 loadingColor: 'rgba(0, 0, 0, 0.5)', // 加载动画颜色
color: ['#509FFF', '#E5394C', '#0011A5', '#FF57BF', '#43C6AC', '#AA076B', '#0ED2F7', '#9733EE'], // 数据颜色 color: ['#509FFF', '#E5394C', '#0011A5', '#FF57BF', '#43C6AC', '#AA076B', '#0ED2F7', '#9733EE', '#0cff34', '#aa4e03', '#fce00b', '#11ffcc'], // 数据颜色
colorGradients: ['#6AF6FE', '#F0724D', '#00BAE6', '#FF8B7C', '#F8FFAE', '#E991C3', '#92FE9D', '#C3A0FF'], // 数据渐变颜色 color2: ['#6AF6FE', '#F0724D', '#00BAE6', '#FF8B7C', '#F8FFAE', '#E991C3', '#92FE9D', '#C3A0FF', '#bdff23', '#e55f12', '#d6a800', '#06c5ff'], // 数据渐变颜色
// 标题样式 // 标题样式
title: { title: {
color: '#93FCFF', color: '#93FCFF',
......
src/components/Charts/ChartBarArc.vue
View file @ 22619aa8
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
barBorderRadius: [50, 50, 50, 50], //（顺时针左上，右上，右下，左下） barBorderRadius: [50, 50, 50, 50], //（顺时针左上，右上，右下，左下）
// 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始 // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: ChartStyle.colorGradients[i] }, { offset: 0, color: ChartStyle.color2[i] },
{ offset: 1, color: ChartStyle.color[i] }, { offset: 1, color: ChartStyle.color[i] },
]) ])
}, },
......
src/components/Charts/ChartBarCylinder.vue
View file @ 22619aa8
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
itemStyle: { itemStyle: {
// 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始 // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: ChartStyle.colorGradients[i] }, { offset: 0, color: ChartStyle.color2[i] },
{ offset: 1, color: ChartStyle.color[i] }, { offset: 1, color: ChartStyle.color[i] },
]) ])
}, },
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
symbolPosition: 'end', symbolPosition: 'end',
itemStyle: { itemStyle: {
normal: { normal: {
color: ChartStyle.colorGradients[i], color: ChartStyle.color2[i],
shadowColor: ChartStyle.color[i], shadowColor: ChartStyle.color[i],
shadowBlur: 1 shadowBlur: 1
} }
......
src/components/Charts/ChartLine.vue
View file @ 22619aa8
...@@ -29,9 +29,7 @@ ...@@ -29,9 +29,7 @@
let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>'; let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>';
newParams.sort((a, b) => a.seriesIndex - b.seriesIndex); newParams.sort((a, b) => a.seriesIndex - b.seriesIndex);
newParams.forEach(p => { newParams.forEach(p => {
let item = chartData.dataList.find(i => i.name == p.seriesName); const cont = p.seriesName + ': ' + toFixedNum(p.value,4) + (chartData.dataList[p.seriesIndex].unit || '') + '<br/>';
const cont = p.seriesName + ': ' + toFixedNum(p.value,
4) + (item.unit || '') + '<br/>';
tooltip += cont; tooltip += cont;
}); });
return tooltip; return tooltip;
...@@ -49,13 +47,16 @@ ...@@ -49,13 +47,16 @@
type: 'inside' type: 'inside'
}, },
legend: { legend: {
bottom: '5%', bottom: '4%',
textStyle: { textStyle: {
color: ChartStyle.legend.color, color: ChartStyle.legend.color,
fontSize: ChartStyle.legend.fontSize, fontSize: ChartStyle.legend.fontSize,
}, },
itemGap: 40, // itemGap: 30,
icon: 'pin', icon: 'pin',
formatter: function (name) {
return name + ' ';
}
}, },
color: ChartStyle.color, color: ChartStyle.color,
xAxis: { xAxis: {
...@@ -105,7 +106,7 @@ ...@@ -105,7 +106,7 @@
top: '5%', top: '5%',
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '15%', bottom: '17%',
containLabel: true containLabel: true
} }
}; };
...@@ -123,7 +124,7 @@ ...@@ -123,7 +124,7 @@
}, },
{ {
offset: 0, offset: 0,
color: ChartStyle.colorGradients[i] color: ChartStyle.color2[i]
}, },
]) ])
} }
...@@ -131,6 +132,142 @@ ...@@ -131,6 +132,142 @@
} }
// 不共轴 // 不共轴
} else { } else {
// 垂直方式
// option = {
// tooltip: {
// trigger: 'axis',
// formatter: params => {
// let newParams = [...params];
// let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>';
// newParams.sort((a, b) => a.seriesIndex - b.seriesIndex);
// newParams.forEach(p => {
// const cont = p.seriesName + ': ' + toFixedNum(p.value,4) + (chartData.dataList[p.seriesIndex].unit || '') + '<br/>';
// tooltip += cont;
// });
// return tooltip;
// },
// textStyle: {
// align: 'left'
// }
// },
// axisPointer: {
// lineStyle: {
// type: 'dashed'
// },
// link: {
// xAxisIndex: []
// }
// },
// dataZoom: {
// type: 'inside',
// xAxisIndex: []
// },
// legend: [],
// color: ChartStyle.color,
// xAxis: [],
// yAxis: [],
// series: [],
// grid: [],
// };
// for (let i = 0, len = chartData.dataList.length; i < len; i++) {
// let item = chartData.dataList[i];
// option.axisPointer.link.xAxisIndex.push(i);
// option.dataZoom.xAxisIndex.push(i);
// option.legend.push({
// data: [item.name],
// top: (100 / len) * i + 10 + '%',
// right: '10',
// textStyle: {
// color: ChartStyle.legend.color,
// fontSize: ChartStyle.legend.fontSize,
// },
// itemGap: 40,
// icon: 'pin',
// formatter: function (name) {
// let len = name.length
// if(len < 15){
// for (let i = 0; i < (15 - len); i++) {
// name += ' ';
// }
// }
// return name;
// }
// });
// option.xAxis.push({
// data: chartData.xAxis ?? chartData.xaxis,
// axisLine: {
// lineStyle: {
// color: ChartStyle.title.color,
// }
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// fontSize: ChartStyle.axis.fontSize,
// formatter: val => {
// let arr = val.split(' ');
// return arr[0] + (arr[1] ? '\n' + arr[1] : '');
// }
// },
// gridIndex: i
// });
// option.yAxis.push({
// name: item.unit || '',
// nameTextStyle: {
// color: ChartStyle.title.color
// },
// scale: true,
// splitNumber: 1,
// axisLine: {
// show: false,
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// color: ChartStyle.title.color,
// fontSize: ChartStyle.axis.fontSize
// },
// splitLine: {
// lineStyle: {
// type: 'dashed',
// color: ChartStyle.split.color,
// opacity: ChartStyle.split.opacity,
// }
// },
// gridIndex: i
// });
// option.series.push({
// type: 'line',
// name: item.name,
// data: item.value,
// showSymbol: false,
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 1,
// color: ChartStyle.color[i]
// },
// {
// offset: 0,
// color: ChartStyle.color2[i]
// },
// ])
// },
// xAxisIndex: i,
// yAxisIndex: i,
// });
// option.grid.push({
// top: (100 / len) * i + 7 + '%',
// left: '2%',
// right: '230',
// bottom: (100 / len) * (len - i - 1) + 2 + '%',
// containLabel: true
// });
// }
// 宫格方式
let row = 3;
let col = 4;
option = { option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -139,9 +276,7 @@ ...@@ -139,9 +276,7 @@
let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>'; let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>';
newParams.sort((a, b) => a.seriesIndex - b.seriesIndex); newParams.sort((a, b) => a.seriesIndex - b.seriesIndex);
newParams.forEach(p => { newParams.forEach(p => {
let item = chartData.dataList.find(i => i.name == p.seriesName); const cont = p.seriesName + ': ' + toFixedNum(p.value,4) + (chartData.dataList[p.seriesIndex].unit || '') + '<br/>';
const cont = p.seriesName + ': ' + toFixedNum(p.value,
4) + (item.unit || '') + '<br/>';
tooltip += cont; tooltip += cont;
}); });
return tooltip; return tooltip;
...@@ -162,7 +297,17 @@ ...@@ -162,7 +297,17 @@
type: 'inside', type: 'inside',
xAxisIndex: [] xAxisIndex: []
}, },
legend: [], legend: {
bottom: '4%',
textStyle: {
color: ChartStyle.legend.color,
fontSize: ChartStyle.legend.fontSize,
},
icon: 'pin',
formatter: function (name) {
return name + ' ';
}
},
color: ChartStyle.color, color: ChartStyle.color,
xAxis: [], xAxis: [],
yAxis: [], yAxis: [],
...@@ -173,26 +318,6 @@ ...@@ -173,26 +318,6 @@
let item = chartData.dataList[i]; let item = chartData.dataList[i];
option.axisPointer.link.xAxisIndex.push(i); option.axisPointer.link.xAxisIndex.push(i);
option.dataZoom.xAxisIndex.push(i); option.dataZoom.xAxisIndex.push(i);
option.legend.push({
data: [item.name],
top: (100 / len) * i + 10 + '%',
right: '10',
textStyle: {
color: ChartStyle.legend.color,
fontSize: ChartStyle.legend.fontSize,
},
itemGap: 40,
icon: 'pin',
formatter: function (name) {
let len = name.length
if(len < 15){
for (let i = 0; i < (15 - len); i++) {
name += ' ';
}
}
return name;
}
});
option.xAxis.push({ option.xAxis.push({
data: chartData.xAxis ?? chartData.xaxis, data: chartData.xAxis ?? chartData.xaxis,
axisLine: { axisLine: {
...@@ -250,23 +375,29 @@ ...@@ -250,23 +375,29 @@
}, },
{ {
offset: 0, offset: 0,
color: ChartStyle.colorGradients[i] color: ChartStyle.color2[i]
}, },
]) ])
}, },
xAxisIndex: i, xAxisIndex: i,
yAxisIndex: i, yAxisIndex: i,
}); });
let irow = parseInt(i / 4); // 当前数据项所属行
let icol = i % 4; // 当前数据项所属列
option.grid.push({ option.grid.push({
top: (100 / len) * i + 7 + '%', top: (55 / row) * irow + 7 + (irow * 10) + '%',
left: '2%', left: (100 / col) * icol + 2 + '%',
right: '230', // right: (100 / col) * (col - icol - 1) + 2 + '%',
bottom: (100 / len) * (len - i - 1) + 2 + '%', // bottom: (110 / row) * (row - irow - 1) + 5 + '%',
containLabel: true width: (90 / col) + '%',
height: (55 / row) + '%' ,
containLabel: true,
show: true,
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderWidth: 0,
}); });
} }
} }
this.chart.setOption(option); this.chart.setOption(option);
} }
} }
......
src/components/Charts/ChartLineBroken.vue
View file @ 22619aa8
...@@ -24,8 +24,7 @@ ...@@ -24,8 +24,7 @@
let newParams = [...params]; let newParams = [...params];
let tooltip = params[0].axisValue + '<br/>'; let tooltip = params[0].axisValue + '<br/>';
newParams.forEach(p => { newParams.forEach(p => {
const cont = p.marker + ' ' + p.seriesName + ': ' + toFixedNum(p.value, const cont = p.marker + ' ' + p.seriesName + ': ' + toFixedNum(p.value,2) + (chartData.dataList[p.seriesIndex].cpunit || '') + '<br/>';
2) + '<br/>';
tooltip += cont; tooltip += cont;
}); });
return tooltip; return tooltip;
......
src/components/NumberFlipper/index.vue
View file @ 22619aa8
<!-- 数字翻牌器 --> <!-- 数字翻牌器 -->
<template> <template>
<div class="number-flipper"> <div class="number-flipper" :class="direction ? 'flex' : ''">
<div class="up" v-if="title"> <div class="up" v-if="title" :class="direction ? 'up-flex' : ''">
<div class="i" />{{title}} <div class="i" />{{title}}
</div> </div>
<div class="down"> <div class="down">
...@@ -22,6 +22,9 @@ ...@@ -22,6 +22,9 @@
type: String, type: String,
default: '', default: '',
}, },
direction: {
type: String | Number | Boolean,
},
unit: { unit: {
type: String, type: String,
default: '', default: '',
...@@ -53,10 +56,11 @@ ...@@ -53,10 +56,11 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.number-flipper { .number-flipper {
$up-m-b: 0.5rem;
.up{ .up{
color: $color-cyan; color: $color-cyan;
@extend %flex-center; @extend %flex-center;
margin-bottom: 0.5rem; margin-bottom: $up-m-b;
.i { .i {
width: 0.2rem; width: 0.2rem;
...@@ -67,6 +71,11 @@ ...@@ -67,6 +71,11 @@
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }
.up-flex{
font-size: 1.5rem;
margin-top: $up-m-b;
margin-right: 1rem;
}
.down{ .down{
display: flex; display: flex;
...@@ -78,4 +87,9 @@ ...@@ -78,4 +87,9 @@
} }
} }
} }
.flex{
display: flex;
justify-content: center;
align-items: center;
}
</style> </style>
src/components/Sidebar/index.vue
View file @ 22619aa8
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
searchValue: '', // 搜索值 searchValue: '', // 搜索值
menuAll: null, // 所有菜单列表 menuAll: null, // 所有菜单列表
menu: null, // 当前菜单列表 menu: null, // 当前菜单列表
pointListMax: 4, // 报警最多选择数量 pointListMax: 12, // 报警最多选择数量
checkList: [], // 选择列表 checkList: [], // 选择列表
lastMenuKey: '', // 存储菜单最后一次的key，用于打开其他菜单时，主动调用关闭前一个菜单（清空测点，优化性能） lastMenuKey: '', // 存储菜单最后一次的key，用于打开其他菜单时，主动调用关闭前一个菜单（清空测点，优化性能）
}; };
......
src/views/AlarmRecord.vue
View file @ 22619aa8
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<el-button class="btn" @click="goPage">趋势分析</el-button> <el-button class="btn" @click="goPage">趋势分析</el-button>
</div> </div>
<div class="center"> <div class="center">
<!-- {{$x_factory.plantName}}{{$x_crew ? ' - ' + $x_crew.deviceName : ''}} - 报警记录 --> {{$x_factory.plantName}}{{$x_crew ? ' - ' + $x_crew.deviceName : ''}} - 报警记录
{{$x_factory.plantName}} - 报警记录 <!-- {{$x_factory.plantName}} - 报警记录 -->
</div> </div>
<div class="right"> <div class="right">
<span class="txt">仅显示报警中</span> <span class="txt">仅显示报警中</span>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
tableData: null, tableData: null,
tableTotal: 100, tableTotal: 100,
pointList: [], // 表格里选择的报警点 pointList: [], // 表格里选择的报警点
pointListMax: 4, // 报警最多选择数量 pointListMax: 12, // 报警最多选择数量
// 报警表格是否可选，小于5个点可选，大于5个点，则已选的点可选 // 报警表格是否可选，小于5个点可选，大于5个点，则已选的点可选
tableCanSelect: row => this.pointList.length < this.pointListMax || this.pointList.find(i => i.id ==row.id), tableCanSelect: row => this.pointList.length < this.pointListMax || this.pointList.find(i => i.id ==row.id),
}; };
...@@ -96,9 +96,9 @@ ...@@ -96,9 +96,9 @@
// this.tableData = this.initWarnRecordData(); // this.tableData = this.initWarnRecordData();
this.loadingtable = true; this.loadingtable = true;
try { try {
// if(this.$x_crew) this.tableQuery.deviceId = this.$x_crew.deviceId; if(this.$x_crew) this.tableQuery.deviceId = this.$x_crew.deviceId;
// else this.tableQuery.plantId = this.$x_factory.plantId; else this.tableQuery.plantId = this.$x_factory.plantId;
this.tableQuery.plantId = this.$x_factory.plantId; // this.tableQuery.plantId = this.$x_factory.plantId;
if(this.tableQuery.onlyWarn) this.tableQuery.eventInfo = 0; if(this.tableQuery.onlyWarn) this.tableQuery.eventInfo = 0;
else delete this.tableQuery.eventInfo; else delete this.tableQuery.eventInfo;
let res = await Warn.getWarnList(this.tableQuery); let res = await Warn.getWarnList(this.tableQuery);
......
src/views/CrewMonitoring.vue
View file @ 22619aa8
...@@ -12,22 +12,34 @@ ...@@ -12,22 +12,34 @@
<img src="../assets/img/crew.png" /> <img src="../assets/img/crew.png" />
<scroll-window class="roll-left-top"> <scroll-window class="roll-left-top">
<el-scrollbar class="win-list" v-if="listLeftTop"> <el-scrollbar class="win-list" v-if="listLeftTop">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listLeftTop">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listLeftTop">
<div class="win-item-left">{{v.cpName}}</div>
<div class="win-item-right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
</el-scrollbar> </el-scrollbar>
</scroll-window> </scroll-window>
<scroll-window class="roll-right-top" direction="1"> <scroll-window class="roll-right-top" direction="1">
<el-scrollbar class="win-list" v-if="listRightTop"> <el-scrollbar class="win-list" v-if="listRightTop">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listRightTop">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listRightTop">
<div class="win-item-left">{{v.cpName}}</div>
<div class="win-item-right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
</el-scrollbar> </el-scrollbar>
</scroll-window> </scroll-window>
<scroll-window class="roll-left-bottom"> <scroll-window class="roll-left-bottom">
<el-scrollbar class="win-list" v-if="listLeftBottom"> <el-scrollbar class="win-list" v-if="listLeftBottom">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listLeftBottom">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listLeftBottom">
<div class="win-item-left">{{v.cpName}}</div>
<div class="win-item-right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
</el-scrollbar> </el-scrollbar>
</scroll-window> </scroll-window>
<scroll-window class="roll-right-bottom" direction="1"> <scroll-window class="roll-right-bottom" direction="1">
<el-scrollbar class="win-list" v-if="listRightBottom"> <el-scrollbar class="win-list" v-if="listRightBottom">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listRightBottom">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of listRightBottom">
<div class="win-item-left">{{v.cpName}}</div>
<div class="win-item-right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
</el-scrollbar> </el-scrollbar>
</scroll-window> </scroll-window>
</div> </div>
...@@ -200,7 +212,8 @@ ...@@ -200,7 +212,8 @@
this.socket.onmessage = msg => { this.socket.onmessage = msg => {
try{ try{
const data = JSON.parse(msg.data); const data = JSON.parse(msg.data);
console.log('socket_crew data', data); console.log('socket_crew data', msg);
// console.log('socket_crew data', data);
if (!data) return; if (!data) return;
data.xAxis = data.xaxis.map(i => dateFormat(new Date(i * 1000), 'YY/MM/DD\nHH:mm:ss')); data.xAxis = data.xaxis.map(i => dateFormat(new Date(i * 1000), 'YY/MM/DD\nHH:mm:ss'));
this.dataLeftTop = data; this.dataLeftTop = data;
...@@ -505,6 +518,18 @@ ...@@ -505,6 +518,18 @@
.win-list{ .win-list{
height: 100%; height: 100%;
line-height: 1.5rem; line-height: 1.5rem;
.win-item{
display: flex;
align-items: center;
.win-item-left {
text-align: right;
margin-right: 1rem;
width: 60%;
}
.win-item-right {
text-align: left;
}
}
} }
/deep/.el-scrollbar__wrap { /deep/.el-scrollbar__wrap {
......
src/views/Factory.vue
View file @ 22619aa8
...@@ -94,7 +94,8 @@ ...@@ -94,7 +94,8 @@
this.socket.onmessage = msg => { this.socket.onmessage = msg => {
try{ try{
const data = JSON.parse(msg.data); const data = JSON.parse(msg.data);
console.log('socket_factory data', data); console.log('socket_factory data', msg);
// console.log('socket_factory data', data);
if (!data) return; if (!data) return;
this.socketData = data; this.socketData = data;
this.initData(); this.initData();
...@@ -122,6 +123,8 @@ ...@@ -122,6 +123,8 @@
res.forEach(i => { res.forEach(i => {
i.name = i.plantName; i.name = i.plantName;
i.value = [i.latitude, i.longitude]; i.value = [i.latitude, i.longitude];
let arr = i.plantName.match(/国网(.+)厂/);
i.shortName = arr ? arr[1] : i.plantName;
}) })
this.factoryList = res; this.factoryList = res;
} catch (e) { } catch (e) {
......
src/views/FactoryMonitoring.vue
View file @ 22619aa8
...@@ -9,16 +9,23 @@ ...@@ -9,16 +9,23 @@
<el-carousel-item class="swiper-item" v-for="page in Math.ceil(crewList.length / 4)" :key="page"> <el-carousel-item class="swiper-item" v-for="page in Math.ceil(crewList.length / 4)" :key="page">
<div class="crew-item" v-for="item of crewList.slice(page * 4 - 4, page * 4)" :key="item.deviceId"> <div class="crew-item" v-for="item of crewList.slice(page * 4 - 4, page * 4)" :key="item.deviceId">
<img src="../assets/img/crew.png" @click="goPage(item)" /> <img src="../assets/img/crew.png" @click="goPage(item)" />
<number-flipper class="number" unit="kW" :number="item.power" :point="1" /> <number-flipper class="number" title="有功功率" unit="kW" :number="item.power" :point="1" direction="1" />
<div class="name" @click="goPage(item)">{{item.deviceName}}</div> <div class="name" @click="goPage(item)">{{item.deviceName}}</div>
<scroll-window class="roll-top"> <scroll-window class="roll-top">
<el-scrollbar class="win-list"> <el-scrollbar class="win-list" v-if="item.vListW && item.vListW.length">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW">
<div class="left">{{v.cpName}}</div>
<div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
</el-scrollbar> </el-scrollbar>
<div class="win-list no-data" v-else>暂无报警</div>
</scroll-window> </scroll-window>
<scroll-window class="roll-bottom"> <scroll-window class="roll-bottom">
<el-scrollbar class="win-list"> <el-scrollbar class="win-list">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList">
<div class="left">{{v.cpName}}</div>
<div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
</el-scrollbar> </el-scrollbar>
</scroll-window> </scroll-window>
</div> </div>
...@@ -219,6 +226,21 @@ ...@@ -219,6 +226,21 @@
.win-list{ .win-list{
height: 100%; height: 100%;
line-height: 1.5rem; line-height: 1.5rem;
.win-item{
display: flex;
align-items: center;
.left {
text-align: right;
margin-right: 1rem;
width: 55%;
}
.right {
text-align: left;
}
}
}
.no-data{
@extend %flex-center;
} }
/deep/.el-scrollbar__wrap { /deep/.el-scrollbar__wrap {
......
src/views/Index.vue
View file @ 22619aa8
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="btn left-bg" :class="$route.path == '/FactoryMonitoring/index' ? 'left-bg2' : ''"> <div class="btn left-bg" :class="$route.path == '/FactoryMonitoring/index' ? 'left-bg2' : ''">
<el-select v-model="factoryValue" :popper-append-to-body="false" @change="changeFactory"> <el-select v-model="factoryValue" :popper-append-to-body="false" @change="changeFactory">
<el-option label="全部电厂" :value="0" /> <el-option label="全部电厂" :value="0" />
<el-option v-for="item of $x_factoryList" :key="item.plantId" :label="item.plantName" :value="item.plantId" @click.native="clickFactory(item.plantId)" /> <el-option v-for="item of $x_factoryList" :key="item.plantId" :label="item.shortName" :value="item.plantId" @click.native="clickFactory(item.plantId)" />
</el-select> </el-select>
</div> </div>
<div class="btn left-bg left-pos2" :class="$route.path == '/CrewMonitoring/index' ? 'left-bg2' : ''"> <div class="btn left-bg left-pos2" :class="$route.path == '/CrewMonitoring/index' ? 'left-bg2' : ''">
...@@ -144,7 +144,8 @@ ...@@ -144,7 +144,8 @@
this.socket.onmessage = msg => { this.socket.onmessage = msg => {
try{ try{
const data = JSON.parse(msg.data); const data = JSON.parse(msg.data);
console.log('socket_all data', data); console.log('socket_all data', msg);
// console.log('socket_all data', data);
if (!data) return; if (!data) return;
this.$store.commit('allData', data); this.$store.commit('allData', data);
if(this.dialogShow) this.initTableData(); if(this.dialogShow) this.initTableData();
......
src/views/TrendAnalysis.vue
View file @ 22619aa8
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
.main { .main {
height: calc(100% - 4.25rem); height: calc(100% - 4.25rem);
background: rgba(147, 252, 255, 0.08); background: rgba(147, 252, 255, 0.08);
padding: 0 1.875rem 1.875rem; padding: 0 1rem 1rem;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
......
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