mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: mt-fe-group:4d7d2e0c3d7d6ea51c6cff87a82fe01b21849c81
Branches Tags
mt-fe-group:master
mt-fe-group:lb
mt-fe-group:zjl
mt-fe-group:gtz
..
compare: mt-fe-group:989f9b9976c3e1072c9e4441472b93d212d875d3
Branches Tags
mt-fe-group:lb
mt-fe-group:master
mt-fe-group:zjl
mt-fe-group:gtz

No commits in common. "4d7d2e0c3d7d6ea51c6cff87a82fe01b21849c81" and "989f9b9976c3e1072c9e4441472b93d212d875d3" have entirely different histories.
4d7d2e0c3d ... 989f9b9976

6 changed files with 83 additions and 177 deletions
Show Stats Expand all files Collapse all files

3
src/layout/components/Navbar.vue
View File

@ -248,8 +248,7 @@ export default {
const password = Cookie.get('password') const password = Cookie.get('password')
if (username && password) { if (username && password) {
window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}` window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
// window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
} }
}, },
winBlur() { winBlur() {

155
src/views/3DOverview/components/DianChart.vue
View File

@ -6,7 +6,6 @@
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs' import { Random } from 'mockjs'
import moment from 'moment'
class ChartOption { class ChartOption {
constructor() { constructor() {
@ -51,18 +50,16 @@ class ChartOption {
formatter: params => { formatter: params => {
return ` return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> <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;">${ <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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0] this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}V</span></span> }"></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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1] this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}%</span></span> }"></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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[2] this.color[2]
}"></span><span>${params[2].seriesName}: ${params[2].value}°C</span></span> }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
</div> </div>
` `
} }
@ -70,15 +67,7 @@ class ChartOption {
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
// boundaryGap: false, data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
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 }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
@ -111,11 +100,10 @@ class ChartOption {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 10, fontSize: 10
formatter: '{value}%'
}, },
splitLine: { splitLine: {
show: false, show: true,
lineStyle: { lineStyle: {
color: '#fff1', color: '#fff1',
type: 'dotted' type: 'dotted'
@ -145,7 +133,7 @@ class ChartOption {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff3', color: '#fff1',
type: 'dotted' type: 'dotted'
} }
} }
@ -161,13 +149,10 @@ class ChartOption {
width: 1 width: 1
} }
}, },
// min: 'dataMin',
min: 20,
max: 50,
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
splitLine: { splitLine: {
show: false, show: true,
lineStyle: { lineStyle: {
color: '#fff1', color: '#fff1',
type: 'dotted' type: 'dotted'
@ -175,84 +160,41 @@ class ChartOption {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 10, fontSize: 10
formatter: '{value}°C'
} }
} }
] ]
this.series = [ this.series = [
{ {
name: '电压', name: 'ABC三相电压/v',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(7)
.fill(1)
// .map(_ => Random.integer(30, 100)),
.map(_ => Random.integer(360, 390)),
symbol: 'circle',
symbolSize: 0.2,
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', type: 'line',
yAxisIndex: 0, yAxisIndex: 0,
// smooth: true, // smooth: true,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: Array(7) data: Array(12)
.fill(1) .fill(1)
.map(_ => Random.integer(76, 85)), .map(_ => Random.integer(30, 100)),
// .map(_ => Random.integer(30, 100)),
symbol: 'circle', symbol: 'circle',
symbolSize: 0.2, symbolSize: 0.2,
showSymbol: false, showSymbol: false
areaStyle: { },
color: { {
type: 'linear', name: 'ABC三相电流/a',
x: 0, type: 'line',
y: 0, yAxisIndex: 1,
x2: 0, // smooth: true,
y2: 1, emphasis: {
colorStops: [ focus: 'series'
{ },
offset: 0, data: Array(12)
color: '#F0D63C66' // 0% 处的颜色 .fill(1)
}, .map(_ => Random.integer(30, 100)),
{ symbol: 'circle',
offset: 1, symbolSize: 0.2,
color: 'transparent' // 100% 处的颜色 showSymbol: false
}
],
global: false // 缺省为 false
}
}
}, },
{ {
name: '电缆温度', name: '电缆温度',
@ -262,33 +204,12 @@ class ChartOption {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: Array(7) data: Array(12)
.fill(1) .fill(1)
// .map(_ => Random.integer(20, 55)), .map(_ => Random.integer(30, 100)),
.map(_ => Random.integer(36, 45)),
symbol: 'circle', symbol: 'circle',
symbolSize: 0.2, 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
}
}
} }
] ]
} }
@ -311,7 +232,7 @@ class ChartOption {
if (key === 'colorStops') newOption[key] = option[key] if (key === 'colorStops') newOption[key] = option[key]
else if ( else if (
typeof option[key] === 'number' /** 过滤不做变化的属性 */ && typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
['splitNumber', 'x', 'x2', 'min', 'max', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
) { ) {
newOption[key] = calcSize(option[key]) newOption[key] = calcSize(option[key])
} else newOption[key] = this.optionFilter(option[key], calcSize) } else newOption[key] = this.optionFilter(option[key], calcSize)
@ -370,8 +291,8 @@ export default {
return num * beilv return num * beilv
}, },
setChartOption() { setChartOption() {
const cOption = new ChartOption() let chartOption = new ChartOption()
this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize)) this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
} }
} }
} }

39
src/views/3DOverview/components/LeftContentPublicConsume.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="public-consume__inner"> <div class="public-consume__inner">
<div style="min-height: calc(106px * var(--beilv)); flex: 1;"> <div>
<TechyBox class="water-consume"> <TechyBox class="water-consume">
<div class="header-part"> <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> <span>水</span>
</div> </div>
<div class="content-part"> <div class="content-part">
@ -35,10 +35,10 @@
</TechyBox> </TechyBox>
</div> </div>
<div style="min-height: calc(106px * var(--beilv)); flex: 1;"> <div>
<TechyBox class="gas-consume"> <TechyBox class="gas-consume">
<div class="header-part "> <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> <span>气</span>
</div> </div>
<div class="content-part"> <div class="content-part">
@ -67,10 +67,10 @@
</TechyBox> </TechyBox>
</div> </div>
<div style="min-height: calc(168px * var(--beilv)); flex: 1;"> <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
<TechyBox class="dian-consume"> <TechyBox class="dian-consume">
<div class="header-part"> <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> <span>电</span>
</div> </div>
<div style="height: 100%; flex: 1; overflow: hidden"> <div style="height: 100%; flex: 1; overflow: hidden">
@ -79,29 +79,30 @@
</TechyBox> </TechyBox>
</div> </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"> <TechyBox class="elec-consume">
<div class="header-part"> <div class="header-part">
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" /> <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
<span>发电</span> <span>发电</span>
</div> </div>
<div style="height: 100%; flex: 1; overflow: hidden"> <div style="height: 100%; flex: 1; overflow: hidden">
<!-- <FadianChart /> -->
<DianChart id="fa-dian" key="fa-dian" /> <DianChart id="fa-dian" key="fa-dian" />
</div> </div>
</TechyBox> </TechyBox>
</div> --> </div>
</div> </div>
</template> </template>
<script> <script>
// import TechyBarChart from './TechyBarChart.vue' import TechyBarChart from './TechyBarChart.vue'
// import TechyLineChart from './TechyLineChart.vue' import TechyLineChart from './TechyLineChart.vue'
import TechyBox from './TechyBox.vue' import TechyBox from './TechyBox.vue'
// import FadianChart from './FadianChart.vue' import FadianChart from './FadianChart.vue'
import DianChart from './DianChart.vue' import DianChart from './DianChart.vue'
export default { export default {
name: 'LeftContentPublicConsume', name: 'LeftContentPublicConsume',
components: { TechyBox, DianChart }, components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
data() { data() {
return {} return {}
}, },
@ -152,23 +153,17 @@ export default {
.header-part > span { .header-part > span {
color: #fffc; color: #fffc;
font-size: calc(12px * var(--beilv)); font-size: calc(12px * var(--beilv));
line-height: calc(12px * var(--beilv));
white-space: nowrap; white-space: nowrap;
} }
.content-part { .content-part {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
/* height: calc(48px * var(--beilv)); */
flex: 1 1;
gap: calc(10px * var(--beilv));
color: #fff9;
}
.content-part span.name {
font-size: calc(12px * var(--beilv)); font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv)); color: #fff9;
height: calc(48px * var(--beilv));
flex: 1 1;
gap: calc(4px * var(--beilv));
} }
.row { .row {

25
src/views/3DOverview/components/RightContentProductRate.vue
View File

@ -6,7 +6,6 @@
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs' import { Random } from 'mockjs'
import moment from 'moment'
class ChartOption { class ChartOption {
constructor() { constructor() {
@ -62,31 +61,29 @@ class ChartOption {
return ` return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> <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;">${ <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
params[0].axisValue params[0].axisValue
}</h2> }</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0] this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> }"></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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1] this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
</div> </div>
` `
} }
} }
let d = new Date()
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
// boundaryGap: false, boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: Array(7) data: Array(7)
.fill(0) .fill(0)
.map((_, idx) => { .map((_, idx) => {
const d = moment() return d.getMonth() + 1 + '-' + (d.getDate() + idx)
const day = idx ? d.subtract(idx, 'd') : d }),
return day.format('M-DD')
})
.reverse(),
axisTick: { axisTick: {
show: false show: false
}, },
@ -247,7 +244,7 @@ export default {
return num * beilv return num * beilv
}, },
setChartOption() { setChartOption() {
const chartOption = new ChartOption() let chartOption = new ChartOption()
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
} }
} }

33
src/views/3DOverview/components/RightContentRealtimeProduction.vue
View File

@ -9,14 +9,13 @@
list: [32, 65, 65, 54, 37, 77] list: [32, 65, 65, 54, 37, 77]
} }
]" /> --> ]" /> -->
<div ref="realtimeLineChart" class="techy-chart" /> <div class="techy-chart" ref="realtimeLineChart"></div>
</template> </template>
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs' import { Random } from 'mockjs'
import moment from 'moment'
class ChartOption { class ChartOption {
constructor() { constructor() {
@ -60,36 +59,32 @@ class ChartOption {
formatter: params => { formatter: params => {
return ` return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> <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;">${ <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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0] this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> }"></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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1] this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> }"></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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[2] this.color[2]
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span> }"></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: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[3] this.color[3]
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span> }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
</div> </div>
` `
} }
} }
let d = new Date()
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
data: Array(7) data: Array(7)
.fill(1) .fill(1)
.map((_, idx) => { .map((_, idx) => {
const d = moment() return d.getMonth() + 1 + '-' + (d.getDate() + idx)
const day = idx ? d.subtract(idx, 'd') : d }),
return day.format('M-DD')
})
.reverse(),
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
@ -382,7 +377,7 @@ export default {
return num * beilv return num * beilv
}, },
setChartOption() { setChartOption() {
const chartOption = new ChartOption() let chartOption = new ChartOption()
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
} }
} }

5
src/views/3DOverview/components/TechyHeader.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<header class="techy-header"> <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> <span class="techy-header__title">{{ headTitle }}</span>
<div class="date">{{ now.format('yyyy.MM.DD') }}</div> <div class="date">{{ now.format('yyyy.MM.DD') }}</div>
@ -90,8 +90,7 @@ export default {
const password = Cookie.get('password') const password = Cookie.get('password')
if (username && password) { if (username && password) {
window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}` window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
// window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
} else { } else {
this.$router.push('/') this.$router.push('/')
} }