Reviewed-on: http://git.picaiba.com/mt-fe-group/11-mes-new/pulls/25master
@@ -248,7 +248,8 @@ export default { | |||
const password = Cookie.get('password') | |||
if (username && password) { | |||
window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}` | |||
window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}` | |||
// window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}` | |||
} | |||
}, | |||
winBlur() { | |||
@@ -6,6 +6,7 @@ | |||
import echarts from 'echarts' | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
import { Random } from 'mockjs' | |||
import moment from 'moment' | |||
class ChartOption { | |||
constructor() { | |||
@@ -50,16 +51,18 @@ class ChartOption { | |||
formatter: params => { | |||
return ` | |||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> | |||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2> | |||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${ | |||
params[0].axisValue | |||
}</h2> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[0] | |||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> | |||
this.color[0] | |||
}"></span><span>${params[0].seriesName}: ${params[0].value}V</span></span> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[1] | |||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> | |||
this.color[1] | |||
}"></span><span>${params[1].seriesName}: ${params[1].value}%</span></span> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[2] | |||
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span> | |||
this.color[2] | |||
}"></span><span>${params[2].seriesName}: ${params[2].value}°C</span></span> | |||
</div> | |||
` | |||
} | |||
@@ -67,7 +70,15 @@ class ChartOption { | |||
this.xAxis = { | |||
type: 'category', | |||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], | |||
// boundaryGap: false, | |||
data: Array(7) | |||
.fill(1) | |||
.map((_, idx) => { | |||
const d = moment() | |||
const day = idx ? d.subtract(idx, 'd') : d | |||
return day.format('M-DD') | |||
}) | |||
.reverse(), | |||
axisTick: { show: false }, | |||
axisLabel: { | |||
color: '#fff9', | |||
@@ -100,10 +111,11 @@ class ChartOption { | |||
}, | |||
axisLabel: { | |||
color: '#fff9', | |||
fontSize: 10 | |||
fontSize: 10, | |||
formatter: '{value}%' | |||
}, | |||
splitLine: { | |||
show: true, | |||
show: false, | |||
lineStyle: { | |||
color: '#fff1', | |||
type: 'dotted' | |||
@@ -133,7 +145,7 @@ class ChartOption { | |||
splitLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#fff1', | |||
color: '#fff3', | |||
type: 'dotted' | |||
} | |||
} | |||
@@ -149,10 +161,13 @@ class ChartOption { | |||
width: 1 | |||
} | |||
}, | |||
// min: 'dataMin', | |||
min: 20, | |||
max: 50, | |||
type: 'value', | |||
splitNumber: 4, | |||
splitLine: { | |||
show: true, | |||
show: false, | |||
lineStyle: { | |||
color: '#fff1', | |||
type: 'dotted' | |||
@@ -160,41 +175,84 @@ class ChartOption { | |||
}, | |||
axisLabel: { | |||
color: '#fff9', | |||
fontSize: 10 | |||
fontSize: 10, | |||
formatter: '{value}°C' | |||
} | |||
} | |||
] | |||
this.series = [ | |||
{ | |||
name: 'ABC三相电压/v', | |||
name: '电压', | |||
type: 'line', | |||
yAxisIndex: 0, | |||
yAxisIndex: 1, | |||
// smooth: true, | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
data: Array(12) | |||
data: Array(7) | |||
.fill(1) | |||
.map(_ => Random.integer(30, 100)), | |||
// .map(_ => Random.integer(30, 100)), | |||
.map(_ => Random.integer(360, 390)), | |||
symbol: 'circle', | |||
symbolSize: 0.2, | |||
showSymbol: false | |||
showSymbol: false, | |||
areaStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#E0209466' // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: 'transparent' // 100% 处的颜色 | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
} | |||
}, | |||
{ | |||
name: 'ABC三相电流/a', | |||
name: '电流', | |||
type: 'line', | |||
yAxisIndex: 1, | |||
yAxisIndex: 0, | |||
// smooth: true, | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
data: Array(12) | |||
data: Array(7) | |||
.fill(1) | |||
.map(_ => Random.integer(30, 100)), | |||
.map(_ => Random.integer(76, 85)), | |||
// .map(_ => Random.integer(30, 100)), | |||
symbol: 'circle', | |||
symbolSize: 0.2, | |||
showSymbol: false | |||
showSymbol: false, | |||
areaStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#F0D63C66' // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: 'transparent' // 100% 处的颜色 | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
} | |||
}, | |||
{ | |||
name: '电缆温度', | |||
@@ -204,12 +262,33 @@ class ChartOption { | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
data: Array(12) | |||
data: Array(7) | |||
.fill(1) | |||
.map(_ => Random.integer(30, 100)), | |||
// .map(_ => Random.integer(20, 55)), | |||
.map(_ => Random.integer(36, 45)), | |||
symbol: 'circle', | |||
symbolSize: 0.2, | |||
showSymbol: false | |||
showSymbol: false, | |||
areaStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#1A99FF66' // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: 'transparent' // 100% 处的颜色 | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
} | |||
} | |||
] | |||
} | |||
@@ -232,7 +311,7 @@ class ChartOption { | |||
if (key === 'colorStops') newOption[key] = option[key] | |||
else if ( | |||
typeof option[key] === 'number' /** 过滤不做变化的属性 */ && | |||
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 | |||
['splitNumber', 'x', 'x2', 'min', 'max', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 | |||
) { | |||
newOption[key] = calcSize(option[key]) | |||
} else newOption[key] = this.optionFilter(option[key], calcSize) | |||
@@ -291,8 +370,8 @@ export default { | |||
return num * beilv | |||
}, | |||
setChartOption() { | |||
let chartOption = new ChartOption() | |||
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) | |||
const cOption = new ChartOption() | |||
this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize)) | |||
} | |||
} | |||
} | |||
@@ -1,9 +1,9 @@ | |||
<template> | |||
<div class="public-consume__inner"> | |||
<div> | |||
<div style="min-height: calc(106px * var(--beilv)); flex: 1;"> | |||
<TechyBox class="water-consume"> | |||
<div class="header-part"> | |||
<img src="./assets/consume/s.png" width="32" height="32" alt="water" /> | |||
<img src="./assets/consume/s.png" width="32" height="32" alt="water"> | |||
<span>水</span> | |||
</div> | |||
<div class="content-part"> | |||
@@ -35,10 +35,10 @@ | |||
</TechyBox> | |||
</div> | |||
<div> | |||
<div style="min-height: calc(106px * var(--beilv)); flex: 1;"> | |||
<TechyBox class="gas-consume"> | |||
<div class="header-part "> | |||
<img src="./assets/consume/gas.png" width="32" height="32" alt="qi" /> | |||
<img src="./assets/consume/gas.png" width="32" height="32" alt="qi"> | |||
<span>气</span> | |||
</div> | |||
<div class="content-part"> | |||
@@ -67,10 +67,10 @@ | |||
</TechyBox> | |||
</div> | |||
<div style="min-height: calc(144px * var(--beilv)); flex: 1;"> | |||
<div style="min-height: calc(168px * var(--beilv)); flex: 1;"> | |||
<TechyBox class="dian-consume"> | |||
<div class="header-part"> | |||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" /> | |||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian"> | |||
<span>电</span> | |||
</div> | |||
<div style="height: 100%; flex: 1; overflow: hidden"> | |||
@@ -79,30 +79,29 @@ | |||
</TechyBox> | |||
</div> | |||
<div style="min-height: calc(144px * var(--beilv)); flex: 1;"> | |||
<!-- <div style="min-height: calc(144px * var(--beilv)); flex: 1;"> | |||
<TechyBox class="elec-consume"> | |||
<div class="header-part"> | |||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" /> | |||
<span>发电</span> | |||
</div> | |||
<div style="height: 100%; flex: 1; overflow: hidden"> | |||
<!-- <FadianChart /> --> | |||
<DianChart id="fa-dian" key="fa-dian" /> | |||
</div> | |||
</TechyBox> | |||
</div> | |||
</div> --> | |||
</div> | |||
</template> | |||
<script> | |||
import TechyBarChart from './TechyBarChart.vue' | |||
import TechyLineChart from './TechyLineChart.vue' | |||
// import TechyBarChart from './TechyBarChart.vue' | |||
// import TechyLineChart from './TechyLineChart.vue' | |||
import TechyBox from './TechyBox.vue' | |||
import FadianChart from './FadianChart.vue' | |||
// import FadianChart from './FadianChart.vue' | |||
import DianChart from './DianChart.vue' | |||
export default { | |||
name: 'LeftContentPublicConsume', | |||
components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart }, | |||
components: { TechyBox, DianChart }, | |||
data() { | |||
return {} | |||
}, | |||
@@ -153,17 +152,23 @@ export default { | |||
.header-part > span { | |||
color: #fffc; | |||
font-size: calc(12px * var(--beilv)); | |||
line-height: calc(12px * var(--beilv)); | |||
white-space: nowrap; | |||
} | |||
.content-part { | |||
display: flex; | |||
flex-direction: column; | |||
font-size: calc(12px * var(--beilv)); | |||
color: #fff9; | |||
height: calc(48px * var(--beilv)); | |||
justify-content: center; | |||
/* height: calc(48px * var(--beilv)); */ | |||
flex: 1 1; | |||
gap: calc(4px * var(--beilv)); | |||
gap: calc(10px * var(--beilv)); | |||
color: #fff9; | |||
} | |||
.content-part span.name { | |||
font-size: calc(12px * var(--beilv)); | |||
line-height: calc(14px * var(--beilv)); | |||
} | |||
.row { | |||
@@ -6,6 +6,7 @@ | |||
import echarts from 'echarts' | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
import { Random } from 'mockjs' | |||
import moment from 'moment' | |||
class ChartOption { | |||
constructor() { | |||
@@ -61,29 +62,31 @@ class ChartOption { | |||
return ` | |||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> | |||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${ | |||
params[0].axisValue | |||
}</h2> | |||
params[0].axisValue | |||
}</h2> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[0] | |||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> | |||
this.color[0] | |||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[1] | |||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> | |||
this.color[1] | |||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> | |||
</div> | |||
` | |||
} | |||
} | |||
let d = new Date() | |||
this.xAxis = { | |||
type: 'category', | |||
boundaryGap: false, | |||
// boundaryGap: false, | |||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |||
data: Array(7) | |||
.fill(0) | |||
.map((_, idx) => { | |||
return d.getMonth() + 1 + '-' + (d.getDate() + idx) | |||
}), | |||
const d = moment() | |||
const day = idx ? d.subtract(idx, 'd') : d | |||
return day.format('M-DD') | |||
}) | |||
.reverse(), | |||
axisTick: { | |||
show: false | |||
}, | |||
@@ -244,7 +247,7 @@ export default { | |||
return num * beilv | |||
}, | |||
setChartOption() { | |||
let chartOption = new ChartOption() | |||
const chartOption = new ChartOption() | |||
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) | |||
} | |||
} | |||
@@ -9,13 +9,14 @@ | |||
list: [32, 65, 65, 54, 37, 77] | |||
} | |||
]" /> --> | |||
<div class="techy-chart" ref="realtimeLineChart"></div> | |||
<div ref="realtimeLineChart" class="techy-chart" /> | |||
</template> | |||
<script> | |||
import echarts from 'echarts' | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
import { Random } from 'mockjs' | |||
import moment from 'moment' | |||
class ChartOption { | |||
constructor() { | |||
@@ -59,32 +60,36 @@ class ChartOption { | |||
formatter: params => { | |||
return ` | |||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> | |||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2> | |||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${ | |||
params[0].axisValue | |||
}</h2> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[0] | |||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> | |||
this.color[0] | |||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[1] | |||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> | |||
this.color[1] | |||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[2] | |||
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span> | |||
this.color[2] | |||
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ | |||
this.color[3] | |||
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span> | |||
this.color[3] | |||
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span> | |||
</div> | |||
` | |||
} | |||
} | |||
let d = new Date() | |||
this.xAxis = { | |||
type: 'category', | |||
data: Array(7) | |||
.fill(1) | |||
.map((_, idx) => { | |||
return d.getMonth() + 1 + '-' + (d.getDate() + idx) | |||
}), | |||
const d = moment() | |||
const day = idx ? d.subtract(idx, 'd') : d | |||
return day.format('M-DD') | |||
}) | |||
.reverse(), | |||
axisTick: { show: false }, | |||
axisLabel: { | |||
color: '#fff9', | |||
@@ -377,7 +382,7 @@ export default { | |||
return num * beilv | |||
}, | |||
setChartOption() { | |||
let chartOption = new ChartOption() | |||
const chartOption = new ChartOption() | |||
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) | |||
} | |||
} | |||
@@ -1,6 +1,6 @@ | |||
<template> | |||
<header class="techy-header"> | |||
<img class="logo-img" src="./logo.png" alt="cnbm" /> | |||
<img class="logo-img" src="./logo.png" alt="cnbm"> | |||
<span class="techy-header__title">{{ headTitle }}</span> | |||
<div class="date">{{ now.format('yyyy.MM.DD') }}</div> | |||
@@ -90,7 +90,8 @@ export default { | |||
const password = Cookie.get('password') | |||
if (username && password) { | |||
window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}` | |||
window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}` | |||
// window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}` | |||
} else { | |||
this.$router.push('/') | |||
} | |||