lb #25
@ -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',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'circle',
|
||||
symbolSize: 0.2,
|
||||
showSymbol: false
|
||||
},
|
||||
{
|
||||
name: 'ABC三相电流/a',
|
||||
name: '电压',
|
||||
type: 'line',
|
||||
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: '电流',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(76, 85)),
|
||||
// .map(_ => Random.integer(30, 100)),
|
||||
symbol: 'circle',
|
||||
symbolSize: 0.2,
|
||||
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('/')
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user