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

lb #25

Merged
gtz217 merged 4 commits from lb into master 2022-12-16 09:02:45 +08:00
Conversation 0 Commits 4 Files Changed 6 +167 -79
5 changed files with 167 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4200801c7b - Show all commits

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

@ -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>
}"></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>
}"></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>
}"></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))
}
}
}

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

@ -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">
@ -94,14 +94,14 @@
</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 {}
},
@ -152,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 {

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

@ -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() {
@ -74,16 +75,18 @@ class ChartOption {
}
}
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))
}
}

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

@ -9,7 +9,7 @@
list: [32, 65, 65, 54, 37, 77]
}
]" /> -->
<div class="techy-chart" ref="realtimeLineChart"></div>
<div ref="realtimeLineChart" class="techy-chart" />
</template>
<script>
@ -85,7 +85,7 @@ class ChartOption {
data: Array(7)
.fill(1)
.map((_, idx) => {
let d = new moment()
const d = moment()
const day = idx ? d.subtract(idx, 'd') : d
return day.format('M-DD')
})
@ -382,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))
}
}

6
src/views/3DOverview/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div id="v3d-outter" ref="v3d-outter">
<!-- <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
<div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
<V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
<div v-if="showPage" id="v3d-main-content"> -->
<div v-if="true" id="v3d-main-content">
<div v-if="showPage" id="v3d-main-content">
<!-- <div v-if="true" id="v3d-main-content"> -->
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
<section id="techy-body-part">