Skip to content

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

调整了趋势图宫格排列

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