Skip to content

H
hnsd
Commit 0e49f18b authored by liubinyu's avatar liubinyu
Browse files
Options

调整样式

parent 59be599b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2649 additions and 187 deletions
src/assets/img/win-left-bottom.png
View replaced file @ 59be599b View file @ 0e49f18b
src/assets/img/win-left-bottom.png

920 Bytes | W: | H:

src/assets/img/win-left-bottom.png

1.01 KB | W: | H:

src/assets/img/win-left-bottom.png
src/assets/img/win-left-bottom.png
src/assets/img/win-left-bottom.png
src/assets/img/win-left-bottom.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/win-left-top.png
View replaced file @ 59be599b View file @ 0e49f18b
src/assets/img/win-left-top.png

224 Bytes | W: | H:

src/assets/img/win-left-top.png

781 Bytes | W: | H:

src/assets/img/win-left-top.png
src/assets/img/win-left-top.png
src/assets/img/win-left-top.png
src/assets/img/win-left-top.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/win-right-bottom.png
View replaced file @ 59be599b View file @ 0e49f18b
src/assets/img/win-right-bottom.png

1.01 KB | W: | H:

src/assets/img/win-right-bottom.png

920 Bytes | W: | H:

src/assets/img/win-right-bottom.png
src/assets/img/win-right-bottom.png
src/assets/img/win-right-bottom.png
src/assets/img/win-right-bottom.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/win-right-top.png
View replaced file @ 59be599b View file @ 0e49f18b
src/assets/img/win-right-top.png

205 Bytes | W: | H:

src/assets/img/win-right-top.png

794 Bytes | W: | H:

src/assets/img/win-right-top.png
src/assets/img/win-right-top.png
src/assets/img/win-right-top.png
src/assets/img/win-right-top.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/js/gsap.js 0 → 100644
View file @ 0e49f18b
This diff is collapsed.
src/common/const.js
View file @ 0e49f18b
// 常量
// const server_ip = '8.130.25.40'; // 测试服务器
const server_ip = '192.168.192.128'; // 线上内网ip
const server_ip = '22.57.64.22:8256'; // 线上内网ip
// const server_ip = '192.168.43.122:8258';
export const CONFIG = {
......@@ -30,8 +30,12 @@ export const ButtonMap = {
// 首页图表样式
export const ChartStyle = {
loadingColor: 'rgba(0, 0, 0, 0.5)', // 加载动画颜色
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'], // 数据渐变颜色
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',
......@@ -45,7 +49,7 @@ export const ChartStyle = {
// 轴样式
axis: {
color: '#5caac3',
fontSize: 10,
fontSize: 12,
lineHeight: 14,
},
// 数据文字样式
......@@ -209,7 +213,11 @@ export const DefaultDateSelect = () => [Date.now() - 3600 * 1000, Date.now()]; /
// 全厂监测测点配置
export const FactoryMConfig = {
power: ['有功功率'], // 功率
// 顶部
top: [
['转速'],
['有功功率'],
],
// 框框
list: [
["上导X向摆度"],
......@@ -243,28 +251,26 @@ export const CrewMConfig = {
],
// 框框左上
listLeftTop: [
["上导X向摆度"],
["上导Y向摆度"],
["下导X向摆度"],
["下导Y向摆度"],
["法兰X向摆度"],
["法兰Y向摆度"],
["水导X向摆度"],
["水导Y向摆度"],
["上机架X向振动"],
["上机架Y向振动"],
["上机架Z向振动"],
["下机架X向振动"],
["下机架Y向振动"],
["下机架Z向振动"],
["瓦架X向振动"],
["瓦架Z向振动"],
],
// 框框右上
listRightTop: [
["上导X向摆度"],
["上导Y向摆度"],
["下导X向摆度", "法兰X向摆度"],
["下导Y向摆度", "法兰Y向摆度"],
["水导X向摆度"],
["水导Y向摆度"],
["大轴轴向位移A"],
["大轴轴向位移B"],
["大轴轴向位移C"],
["下机架X向振动"],
["下机架Y向振动"],
["下机架Z向振动"],
["瓦架X向振动"],
["瓦架Z向振动"],
],
// 框框左下
listLeftBottom: [
......@@ -274,12 +280,6 @@ export const CrewMConfig = {
["定子基座Y向振动"],
["定子铁芯X向振动"],
["定子铁芯Y向振动"],
["蜗壳进口压力脉动"],
["蜗壳差压"],
["导叶后压力脉动"]
],
// 框框右下
listRightBottom: [
["顶盖碰磨Z向振动"],
["顶盖碰磨X向振动"],
["顶盖X向振动"],
......@@ -287,7 +287,13 @@ export const CrewMConfig = {
["顶盖Z向振动X"],
["顶盖Z向振动Y"],
["顶盖Z向振动"],
],
// 框框右下
listRightBottom: [
["顶盖下压力脉动"],
["蜗壳进口压力脉动"],
["蜗壳差压"],
["导叶后压力脉动"],
["尾水管X向振动"],
["尾水管进口压力脉动"],
["尾水管出口压力脉动"],
......@@ -310,44 +316,44 @@ export const CrewMConfig = {
],
// 图表右上
rightTop: [
["上机架X向振动"],
["上机架Y向振动"],
["上机架Z向振动"],
["定子机座X向振动"],
["定子机座Y向振动"],
["定子基座X向振动"],
["定子基座Y向振动"],
["定子铁芯X向振动"],
["定子铁芯Y向振动"]
[
[{name: "上导X向摆度", defaultMax: 560}],
[{name: "上导Y向摆度", defaultMax: 560}],
],
[
[{name: "下导X向摆度", defaultMax: 1500}, {name: "法兰X向摆度", defaultMax: 906}],
[{name: "下导Y向摆度", defaultMax: 1500}, {name: "法兰Y向摆度", defaultMax: 906}],
],
[
[{name: "水导X向摆度", defaultMax: 703}],
[{name: "水导Y向摆度", defaultMax: 703}],
]
],
// 图表右中
rightCenter: [
["顶盖碰磨Z向振动"],
["顶盖碰磨X向振动"],
["顶盖X向振动"],
["顶盖Y向振动"],
["顶盖Z向振动X"],
["顶盖Z向振动Y"],
["顶盖Z向振动"],
["尾水管X向振动"],
["顶盖下压力脉动"],
["尾水管进口压力脉动"],
["尾水管出口压力脉动"],
["尾水管出口压力"],
["蜗壳进口压力脉动"],
["蜗壳差压"],
["导叶后压力脉动"]
[
[{name: "顶盖X向振动", defaultMax: 203}],
[{name: "顶盖Y向振动", defaultMax: 203}],
[{name: "顶盖Z向振动X", defaultMax: 293}],
[{name: "顶盖Z向振动Y", defaultMax: 293}],
[{name: "顶盖Z向振动", defaultMax: 293}],
],
[
[{name: "上机架X向振动", defaultMax: 156}],
[{name: "上机架Y向振动", defaultMax: 156}],
[{name: "上机架Z向振动", defaultMax: 141}],
],
[
[{name: "下机架X向振动", defaultMax: 125}],
[{name: "下机架Y向振动", defaultMax: 125}],
[{name: "下机架Z向振动", defaultMax: 125}],
]
],
// 图表右下
rightBottom: [
["上导X向摆度"],
["上导Y向摆度"],
["上导瓦温"],
["下导X向摆度"],
["下导Y向摆度"],
["下导瓦温"],
["推力瓦温"],
["水导X向摆度"],
["水导Y向摆度"],
["水导瓦温"]
["水导瓦温"],
],
}
src/common/util.js
View file @ 0e49f18b
......@@ -680,18 +680,41 @@ export function makeMap(str, lowerCase) {
* @param {Object} crew 全部测点数据里的机组，之所以要传，是为了不用每次都找一次机组
* @param {String} name 测点名关键词
* @return {String} kks 测点kks
* @return {Boolean} type 是否模糊匹配 0精准，1模糊
*/
export function getCharacterFromCrew(crew, name, kks) {
export function getCharacterFromCrew(crew, name, kks, type) {
let res = crew.tSdb.find(i => {
if(name) return i.cpName.indexOf(name) != -1;
if(kks) return i.kksCode.indexOf(kks) != -1;
if(name && type) return i.cpName.indexOf(name) != -1;
if(name && !type) return i.cpName == name;
if(kks && type) return i.kksCode.indexOf(kks) != -1;
if(kks && !type) return i.kksCode == kks;
});
if(!res) return false; // 如果没有查出值，则跳过
// 补数据
if(!res.kksValueR) {
let str = res.kksValue?.value?.toString();
res.state = str ? parseInt(str.substr(-2)) : 0; // 信号状态
res.kksValueR = str ? parseFloat(str.substr(0, str.length - 2)) : 0; // 真实值
}
if(!res) return false; // 如果没有查出匹配的测点，则返回
if(!res.kksValueR) chatValueHandler(res); // 补数据，只补一次
return res;
}
/**
* @auto 刘彬瑜
* @todo 将测点值处理成信号状态和真实值
* @param {Object} chat 测点对象
* @return {Object} chat 处理后的对象
*/
export function chatValueHandler(chat) {
if(!chat) return chat;
let val = parseFloat(chat.kksValue?.value); // 数据库返回的值
let str = val.toString(); // 字符串格式
if(!val || str === 'NaN') chat.kksValueR = chat.state = 0; // 如果没有值，正常应该是肯定有值的
// 正常值处理
else {
// 如果是无状态测点或者值的长度小于3（因为正常带信号状态的值最少也是1.01）
if(parseInt(chat.cpType) === 0 || str.length < 3) {
chat.state = 0;
chat.kksValueR = val;
}else{
chat.state = parseInt(str.substr(-2)); // 信号状态
chat.kksValueR = parseFloat(str.substr(0, str.length - 2)); // 真实值
}
}
return chat;
}
\ No newline at end of file
src/components/Charts/ChartBarPic.vue
View file @ 0e49f18b
......@@ -46,6 +46,7 @@
}
},
yAxis: {
splitNumber: 3,
axisLine: {
show: false
},
......
src/components/Charts/ChartBarSingle.vue 0 → 100644
View file @ 0e49f18b
<!-- 胶囊图的单个柱图 -->
<template>
<div :id="id" class="chart-single" />
</template>
<script>
import ChartBase from '@/components/Base/ChartsBase.js';
import {
ChartStyle
} from '@/common/const.js';
import {
getWarnColor,
} from '@/common/util.js';
import echarts from 'echarts';
export default {
mixins: [ChartBase],
methods: {
setOptions(chartData) {
if (!this.chart || !chartData) return;
const colors = getWarnColor(chartData.state, 1);
const minN = -2000000000;
const max = chartData.earlywarningruleminvalue > minN ? chartData.earlywarningruleminvalue : chartData.alertRuleMinValue >
minN ? chartData.alertRuleMinValue : chartData.protectRuleMinValue > minN ? chartData.protectRuleMinValue : chartData.defaultMax;
let option = {
tooltip: {
formatter: params => {
return chartData.cpName + (chartData.cpUnit ? '（' + chartData.cpUnit + '）' : '') + '<br/>' + '当前值：' +
params.value + '，阈值：' + max;
},
},
title: {
text: chartData.cpName + (chartData.cpUnit ? '（' + chartData.cpUnit + '）' : ''),
textStyle: {
color: ChartStyle.axis.color,
fontSize: ChartStyle.axis.fontSize,
fontWeight: 400
},
left: '5%',
},
xAxis: {
type: 'value',
max: max,
min: 0,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
type: 'bar',
data: [chartData.kksValueR],
label: {
show: true,
position: 'insideLeft',
color: '#000',
fontSize: 10,
padding: [2, 0, 0, 0],
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: colors[0]
}, {
offset: 1,
color: colors[1]
}]),
barBorderRadius: [50, chartData.kksValueR > max ? 50 : 0, chartData.kksValueR > max ? 50 : 0, 50]
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.7)',
barBorderRadius: 50
},
barMaxWidth: 13
// }, {
// type: 'pictorialBar',
// data: [3000],
// label: {
// show: true,
// position: 'right',
// color: ChartStyle.label.color,
// fontSize: 10,
// formatter: params => {
// return chartData.kksValueR;
// }
// },
// itemStyle: {
// color: 'transparent'
// },
// barMaxWidth: 13
}],
grid: {
top: '10%',
left: '5%',
right: '5%',
bottom: '0%',
containLabel: true
}
};
this.chart.setOption(option);
}
}
};
</script>
<style lang="scss" scoped>
.chart-single {
width: 100%;
height: 100%;
}
</style>
src/components/NumberFlipper/index.vue
View file @ 0e49f18b
......@@ -4,7 +4,11 @@
<div class="up" v-if="title" :class="direction ? 'up-flex' : ''">
<div class="i" />{{title}}
</div>
<div class="down">
<div v-if="simple" class="down">
<div class="simple" :style="{color: getWarnColor(state)}">{{animatedNumber}}</div>
<span class="unit" style="bottom: 0.5rem;">{{unit}}</span>
</div>
<div v-else class="down">
<num :number="relNumber" />
<span class="unit">{{unit}}</span>
</div>
......@@ -12,7 +16,11 @@
</template>
<script>
import {
getWarnColor,
} from '@/common/util.js';
import Num from './num.vue'
import Gsap from '../../assets/js/gsap.js';
export default {
components: {
Num,
......@@ -22,6 +30,7 @@
type: String,
default: '',
},
// 方向
direction: {
type: String | Number | Boolean,
},
......@@ -33,22 +42,41 @@
type: Number | String,
default: 0,
},
state: {
type: Number,
},
// 小数位数
point: {
type:Number,
default: 0,
},
// 简单版
simple: {
type: String | Number | Boolean,
}
},
data() {
return {
getWarnColor: getWarnColor,
relNumber: 0,
tweenedNumber: 0,
}
},
computed: {
animatedNumber() {
const newLen = this.number.toString().split('.')?.[1]?.length ?? 0;
return this.tweenedNumber.toFixed(newLen);
}
},
watch: {
number: {
immediate: true,
handler(val) {
this.relNumber = parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
if(!val) return;
if(this.simple) {
Gsap.to(this.$data, { duration: 1, tweenedNumber: parseFloat(val) });
} else {
this.relNumber = this.point === undefined ? parseFloat(val) : parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
}
}
}
},
......@@ -58,6 +86,7 @@
.number-flipper {
$up-m-b: 0.5rem;
.up{
font-size: 1.2rem;
color: $color-cyan;
@extend %flex-center;
margin-bottom: $up-m-b;
......@@ -84,8 +113,18 @@
.unit{
font-size: 0.875rem;
color: $color-cyan;
position: relative;
}
}
.simple{
font-size: 1.5rem;
background-color: rgba(10,23,55,0.80);
border: 1px solid rgba(9,77,148,0.50);
padding: 0.5rem;
color: $color-cyan;
margin-right: 0.5rem;
}
}
.flex{
display: flex;
......
src/components/NumberFlipper/num.vue
View file @ 0e49f18b
<!-- 数字翻牌器单个数字 -->
<template>
<div id="dataNums" class="number">
<div :class="item.num != '.' ? 'n-bg' : 'p-bg'" v-for="(item,index) in list" :key="index">
<div v-if="item.num != '.'" class="nums" :style="{transition:'all 1s ease-in-out 0s',top:'-'+item.top+'px'}">
<div :class="item.num == '.' ? 'p-bg' : item.num == '-' ? 'f-bg' : 'n-bg'" v-for="(item,index) in list" :key="index">
<div v-if="item.num == '.'" class="point"></div>
<div v-if="item.num == '-'" class="negative"></div>
<div v-if="item.num != '.' && item.num != '-'" class="nums" :style="{transition:'all 1s ease-in-out 0s',top:'-'+item.top+'px'}">
<span v-for="(item2,index2) in numList" :key="index2">{{item2}}</span>
</div>
<div v-else class="point"></div>
</div>
</div>
</template>
......@@ -85,6 +86,12 @@
height: $bg-height;
margin-right: 0.5rem;
}
.f-bg{
position: relative;
width: 1rem;
height: $bg-height;
margin-right: 0.5rem;
}
.nums {
position: absolute;
......@@ -111,5 +118,15 @@
height: 0.3rem;
background: $color-cyan;
}
.negative{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 0.3rem;
background: $color-cyan;
}
}
</style>
src/components/ScrollWindow/index.vue
View file @ 0e49f18b
<!-- 滚动窗口 -->
<template>
<div class="scroll-window">
<img v-if="direction" class="top top-right" src="../../assets/img/win-right-top.png" />
<img v-else class="top top-left" src="../../assets/img/win-left-top.png" />
<img v-if="direction" class="top top-right" src="../../assets/img/line-right-top.png" />
<img v-else class="top top-left" src="../../assets/img/line-left-top.png" />
<div class="main">
<slot />
</div>
<img v-if="direction" class="bottom bottom-left" src="../../assets/img/win-right-bottom.png" />
<img v-else class="bottom bottom-right" src="../../assets/img/win-left-bottom.png" />
<!-- 右下 -->
<img v-if="!direction && !isTop" class="icon icon-bottom bottom-right" src="../../assets/img/win-right-bottom.png" />
<!-- 右上 -->
<img v-if="!direction && isTop" class="icon icon-top bottom-right" src="../../assets/img/win-right-top.png" />
<!-- 左下 -->
<img v-if="direction && !isTop" class="icon icon-bottom bottom-left" src="../../assets/img/win-left-bottom.png" />
<!-- 左上 -->
<img v-if="direction && isTop" class="icon icon-top bottom-left" src="../../assets/img/win-left-top.png" />
</div>
</template>
<script>
export default {
// 方向，0为左边，1为右边
props: ['direction'],
props: ['direction', 'isTop'],
}
</script>
......@@ -36,10 +42,16 @@
.top-right {
right: 0;
}
.bottom{
.icon {
width: 5.75rem;
height: auto;
position: absolute;
}
.icon-top{
top: -0.6rem;
}
.icon-bottom{
bottom: -0.75rem;
}
.bottom-left {
......@@ -51,7 +63,7 @@
.main{
height: 100%;
background-color: rgba(10,23,55,0.80);
// background-color: rgba(10,23,55,0.80);
border: 1px solid rgba(9,77,148,0.50);
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
padding: 0.5rem 0;
......
src/style/index.scss
View file @ 0e49f18b
......@@ -10,6 +10,11 @@
font-size: 10px;
}
}
@media (max-width: 1200px) {
html {
font-size: 8px;
}
}
#app {
width: 100%;
......@@ -34,6 +39,8 @@ body {
$color-cyan: #93FCFF;
$color-blue: #0984FF;
$color-deep-blue: #1C529D;
$color-green: #00de6b;
$color-red: #E53B4C;
$txt-color: #eeeeee;
// 背景图片居中
......
src/views/CrewMonitoring.vue
View file @ 0e49f18b
This diff is collapsed.
src/views/Factory.vue
View file @ 0e49f18b
......@@ -87,26 +87,24 @@
},
// 初始化socket
initSocket() {
try{
this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/runningState/deviceInfo', [this.$x_user.token.split(' ')[1]]);
this.socket.onopen = () => console.log('socket_factory success');
this.socket.onerror = e => console.log('socket_factory error', e);
this.socket.onmessage = msg => {
try{
const data = JSON.parse(msg.data);
// console.log('socket_factory data', msg);
// console.log('socket_factory data', data);
if (!data) return;
this.socketData = data;
this.initData();
}catch(e){
console.log(e);
}
}
}catch(e){
console.log(e);
this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/runningState/deviceInfo', [this.$x_user.token.split(' ')[1]]);
this.socket.onopen = () => console.log('socket_factory success');
this.socket.onerror = e => {
console.log('socket_factory error', e);
User.getRoleList(); // 捕获错误，然后发送一个请求，因为可能是token导致的socket连接错误，发送请求后如果是token过期，会自动注销用户
}
this.socket.onmessage = msg => {
try{
const data = JSON.parse(msg.data);
// console.log('socket_factory data', msg);
// console.log('socket_factory data', data);
if (!data) return;
this.socketData = data;
this.initData();
}catch(e){
console.log(e);
}
}
},
// 关闭socket
closeSocket() {
......@@ -394,6 +392,9 @@
width: 1px;
background-color: $line-color;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 4.5rem;
}
}
......
src/views/FactoryMonitoring.vue
View file @ 0e49f18b
......@@ -9,11 +9,15 @@
<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" title="有功功率" unit="kW" :number="item.power" :point="1" direction="1" />
<div class="name" @click="goPage(item)">{{item.deviceName}}</div>
<div class="numbers">
<number-flipper class="number" title="转速" unit="r/min" :number="item.top ? item.top[0].kksValueR : 0" :state="item.top ? item.top[0].state : 0" :point="1" />
<number-flipper class="number" title="有功功率" unit="kW" :number="item.top ? item.top[1].kksValueR : 0" :state="item.top ? item.top[1].state : 0" :point="1" />
</div>
<div class="name" :class="item.top && item.top[0].kksValueR > 0 ? 'name-run' : 'name-stop' " @click="goPage(item)">{{item.deviceName}}</div>
<scroll-window class="roll-top">
<div class="roll-title">报警值</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="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW" :key="v.kksCode">
<div class="left">{{v.cpName}}</div>
<div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
......@@ -21,8 +25,9 @@
<div class="win-list no-data" v-else>暂无报警</div>
</scroll-window>
<scroll-window class="roll-bottom">
<div class="roll-title">实测值</div>
<el-scrollbar class="win-list">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList" :key="v.kksCode">
<div class="left">{{v.cpName}}</div>
<div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
......@@ -94,11 +99,13 @@
// 报警
i.vListW = i.vList.filter(i => i.state == 3 || i.state == 4 || i.state == 5);
// 功率
i.power = 0;
FactoryMConfig.power.forEach(key => {
let res = getCharacterFromCrew(crew, key);
if(res) i.power = res.kksValueR;
})
i.top = FactoryMConfig.top.map(arr => {
for (let key of arr) {
let res = getCharacterFromCrew(crew, key);
if(res) return res;
}
return false;
});
})
}
this.crewList = crewList;
......@@ -186,6 +193,7 @@
top: 0;
bottom: 0;
cursor: pointer;
transform: translateY(-3rem);
}
.name {
......@@ -199,30 +207,52 @@
@extend %pos-center;
top: 0;
bottom: 0;
transform: translateY(6rem);
transform: translateY(3rem);
cursor: pointer;
}
.number {
.name-run{
border-color: $color-green;
background: rgba($color: $color-green, $alpha: 0.3);
// color: $color-green;
}
.name-stop{
border-color: $color-red;
background: rgba($color: $color-red, $alpha: 0.3);
// color: $color-red;
}
.numbers{
@extend %pos-center;
top: 0.5rem;
transform: scale(0.8);
display: flex;
justify-content: center;
align-items: center;
.number {
transform: scale(0.8);
}
}
.roll-top{
@extend %pos-center;
width: 80%;
height: 21vh;
top: 4rem;
height: 12vh;
top: 6rem;
}
.roll-bottom{
@extend %pos-center;
width: 80%;
height: 27vh;
height: 30vh;
bottom: 0;
}
.roll-title{
position: absolute;
top: 1rem;
left: 1rem;
color: $color-cyan;
}
.win-list{
height: 100%;
line-height: 1.5rem;
......@@ -241,6 +271,7 @@
}
.no-data{
@extend %flex-center;
color: #b8b8b8;
}
/deep/.el-scrollbar__wrap {
......
src/views/Index.vue
View file @ 0e49f18b
......@@ -90,7 +90,8 @@
import {
getWarnItem,
getDeviceNameById,
randomData
randomData,
chatValueHandler
} from '@/common/util.js'
import UserInfo from '@/components/UserInfo'
import User from '@/api/user.js';
......@@ -137,27 +138,25 @@
methods: {
// 初始化socket
initSocket() {
try{
this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/all/measure/point/' + this.$x_factory.plantId, [this.$x_user.token.split(' ')[1]]);
this.socket.onopen = () => console.log('socket_all success');
this.socket.onerror = e => console.log('socket_all error', e);
this.socket.onmessage = msg => {
try{
const data = JSON.parse(msg.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();
// this.initTableData();
}catch(e){
console.log(e);
}
}
}catch(e){
console.log(e);
this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/all/measure/point/' + this.$x_factory.plantId, [this.$x_user.token.split(' ')[1]]);
this.socket.onopen = () => console.log('socket_all success');
this.socket.onerror = e => {
console.log('socket_all error', e);
User.getRoleList(); // 捕获错误，然后发送一个请求，因为可能是token导致的socket连接错误，发送请求后如果是token过期，会自动注销用户
}
this.socket.onmessage = msg => {
try{
const data = JSON.parse(msg.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();
// this.initTableData();
}catch(e){
console.log(e);
}
}
},
// 关闭socket
closeSocket() {
......@@ -223,12 +222,8 @@
for (let j = 0; j < this.$x_allData[i].tSdb.length; j++) {
const item = this.$x_allData[i].tSdb[j]; // 当前测点
if(!item.kksValue) continue; // 如果没有查出值，则跳过
if(!item.kksValueR) {
let str = item.kksValue.value.toString();
item.state = parseInt(str.substr(-2));
item.kksValueR = parseFloat(str.substr(0, str.length - 2));
}
if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId);
if(!item.kksValueR) chatValueHandler(item); // 补数据，只补一次
if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId); // 添加机组名
// tableData3.push(item); // 全部
if(warnStateMap[item.state]) tableData1.push(item); // 报警
if(item.state == 2) tableData2.push(item); // 无效
......
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