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

update 公用工程消耗

Browse Source
This commit is contained in:
lb 2022-11-23 14:03:56 +08:00
parent 97ee3a9a4c
commit 779a771bb5
11 changed files with 68 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,19 +15,7 @@ export default {
props: { props: {
id: { id: {
type: String, type: String,
default: 'default-dian-id' default: 'default-dian-line-chart'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
} }
}, },
data() { data() {
@ -69,29 +57,35 @@ export default {
option: { option: {
color: colors, color: colors,
legend: { legend: {
top: 4, top: 16,
right: 50, right: 64,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
textStyle: { textStyle: {
color: '#fff9', color: '#fff9',
fontSize: 8 fontSize: 12
} }
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度'] // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
}, },
grid: { grid: {
top: 32, top: 48,
left: 64, left: 64,
bottom: 28 bottom: 36
}, },
tooltip: { tooltip: {
show: true, show: true,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'line', type: 'line',
axis: 'x' axis: 'x',
lineStyle: {
color: '#41888F90',
shadowColor: '#41888F',
shadowBlur: 10,
width: 2
}
}, },
extraCssText: 'width: 152px !important; height: 100px !important;' extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
}, },
xAxis: [ xAxis: [
{ {
@ -99,7 +93,8 @@ export default {
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff9' color: '#fff9',
fontSize: 14
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -110,13 +105,13 @@ export default {
], ],
yAxis: [ yAxis: [
{ {
name: '电流/A', name: '电流/A ',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
type: 'value', type: 'value',
splitNumber: 3, splitNumber: 4,
onZero: true, onZero: true,
position: 'left', position: 'left',
offset: 40, offset: 32,
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
show: true, show: true,
@ -127,7 +122,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 10 fontSize: 12
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -138,10 +133,10 @@ export default {
} }
}, },
{ {
name: '电压/V', name: ' 电压/V ',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
type: 'value', type: 'value',
splitNumber: 3, splitNumber: 4,
axisTick: { show: false }, axisTick: { show: false },
onZero: true, onZero: true,
position: 'left', position: 'left',
@ -155,7 +150,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 10 fontSize: 12
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -166,8 +161,8 @@ export default {
} }
}, },
{ {
name: '温度', name: ' 温度',
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 9 }, nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
show: false, show: false,
@ -177,7 +172,7 @@ export default {
} }
}, },
type: 'value', type: 'value',
splitNumber: 3, splitNumber: 4,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -187,7 +182,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 10 fontSize: 12
} }
} }
], ],
@ -251,7 +246,9 @@ export default {
if (this.chart) this.chart.dispose() if (this.chart) this.chart.dispose()
this.chart = null this.chart = null
}, },
methods: {} methods: {
initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {}
}
} }
</script> </script>
<style scoped> <style scoped>

43
src/views/3DOverview/components/FadianChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :id="id" ref="techy-line-chart" class="techy-chart" /> <div id="techy-line-chart" ref="techy-line-chart" class="techy-chart" />
</template> </template>
<script> <script>
@ -13,22 +13,7 @@ export default {
inject: ['resizeStatus'], inject: ['resizeStatus'],
/** End Fn.1 */ /** End Fn.1 */
props: { props: {
id: {
type: String,
default: 'default-fadian-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
}, },
data() { data() {
return { return {
@ -46,20 +31,20 @@ export default {
color: ['#E02094', '#F0D63C', '#1A99FF'], color: ['#E02094', '#F0D63C', '#1A99FF'],
grid: { grid: {
top: '30%', top: '30%',
left: 0, left: '120%',
right: '5%', right: '5%',
bottom: 0, bottom: 0,
containLabel: true containLabel: true
}, },
tooltip: { // tooltip: {
show: true, // show: true,
trigger: 'axis', // trigger: 'axis',
axisPointer: { // axisPointer: {
type: 'line', // type: 'line',
axis: 'x' // axis: 'x'
}, // },
extraCssText: 'width: 152px !important; height: 100px !important;' // extraCssText: 'position: absolute; width: 152px !important; height: 100px !important;'
}, // },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
@ -71,7 +56,7 @@ export default {
show: false show: false
}, },
axisLabel: { axisLabel: {
fontSize: 8, fontSize: 10,
color: '#fffa' color: '#fffa'
}, },
axisLine: { axisLine: {
@ -92,7 +77,7 @@ export default {
show: false show: false
}, },
axisLabel: { axisLabel: {
fontSize: 8, fontSize: 10,
color: '#fffa' color: '#fffa'
// formatter: '{value} %' // formatter: '{value} %'
}, },

2
src/views/3DOverview/components/LeftContentEquipmentCheck.vue
View File

@ -100,7 +100,7 @@ export default {
} }
.left-content-equipment-check { .left-content-equipment-check {
height: calc(100% - 32px); height: calc(100% - calc(32px * var(--beilv)));
display: flex; display: flex;
gap: calc(100vmin / 1920 * 36); gap: calc(100vmin / 1920 * 36);
overflow: hidden; overflow: hidden;

2
src/views/3DOverview/components/LeftContentMonitor.vue
View File

@ -27,7 +27,7 @@ export default {
.left-content-monitoring { .left-content-monitoring {
flex: 1; flex: 1;
width: 100%; width: 100%;
height: calc(100% - 32px); height: calc(100% - calc(32px * var(--beilv)));
display: flex; display: flex;
gap: calc(100vw / 1920 * 16); gap: calc(100vw / 1920 * 16);
} }

12
src/views/3DOverview/components/LeftContentOrder.vue
View File

@ -18,19 +18,13 @@ const ProcessCircle = {
methods: {}, methods: {},
render: function(h) { render: function(h) {
return h('el-progress', { return h('el-progress', {
class: {
'lb-progress-bar': true
},
props: { props: {
type: 'circle', type: 'circle',
percentage: this.injectData.finished, percentage: this.injectData.finished,
width: 14, width: 14,
'stroke-width': 2, 'stroke-width': 2,
color: '#47FF27', color: '#47FF27',
'define-back-color': '#6e6e6e' // 背景色 'define-back-color': '#ffffff' // 背景色, 该选项不起作用，可能和 element ui 版本相关
},
style: {
color: 'blue'
} }
}) })
} }
@ -97,4 +91,8 @@ export default {
left: calc(-2px * var(--beilv)); left: calc(-2px * var(--beilv));
color: #ffffffb3 !important; color: #ffffffb3 !important;
} }
.left-content-order >>> .el-progress-circle__track {
stroke: #283851;
}
</style> </style>

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

@ -73,8 +73,8 @@
<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;"> <div style="height: 100%; flex: 1; overflow: hidden">
<DianChart /> <DianChart id="dian" key="dian" />
</div> </div>
</TechyBox> </TechyBox>
</div> </div>
@ -85,9 +85,9 @@
<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; "> <div style="height: 100%; flex: 1; overflow: hidden">
<!-- <FadianChart /> --> <!-- <FadianChart /> -->
<DianChart /> <DianChart id="fa-dian" key="fa-dian" />
</div> </div>
</TechyBox> </TechyBox>
</div> </div>
@ -116,7 +116,7 @@ export default {
.public-consume__inner { .public-consume__inner {
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
height: calc(100% - 32px); height: calc(100% - calc(32px * var(--beilv)));
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -161,7 +161,7 @@ export default {
flex-direction: column; flex-direction: column;
font-size: calc(12px * var(--beilv)); font-size: calc(12px * var(--beilv));
color: #fff9; color: #fff9;
height: 10px; height: calc(48px * var(--beilv));
flex: 1 1; flex: 1 1;
gap: calc(4px * var(--beilv)); gap: calc(4px * var(--beilv));
} }

2
src/views/3DOverview/components/RightContentAlert.vue
View File

@ -114,7 +114,7 @@ export default {
} }
.right-content-alert { .right-content-alert {
height: calc(100% - 32px); height: calc(100% - calc(32px * var(--beilv)));
display: flex; display: flex;
gap: calc(100vw / 1920 * 16); gap: calc(100vw / 1920 * 16);
overflow: hidden; overflow: hidden;

3
src/views/3DOverview/components/RightContentFaultAnalysis.vue
View File

@ -301,7 +301,8 @@ export default {
this.configs.title.textStyle.fontSize = titleSize this.configs.title.textStyle.fontSize = titleSize
this.configs.title.subtextStyle.fontSize = subtitleSize this.configs.title.subtextStyle.fontSize = subtitleSize
this.configs.legend.top = '24%' this.configs.legend.top = '26%'
this.configs.legend.left = fs8
this.configs.legend.itemGap = fs8 this.configs.legend.itemGap = fs8
this.configs.legend.itemWidth = fs8 this.configs.legend.itemWidth = fs8

2
src/views/3DOverview/components/RightContentQualityAnalysis.vue
View File

@ -47,7 +47,7 @@ export default {
<style scoped> <style scoped>
.right-content-quality-analysis { .right-content-quality-analysis {
height: calc(100% - 32px); height: calc(100% - calc(32px * var(--beilv)));
overflow: hidden; overflow: hidden;
overflow-y: auto; /** 右边会有多的padding给滑道 */ overflow-y: auto; /** 右边会有多的padding给滑道 */
display: grid; display: grid;

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

@ -251,6 +251,7 @@ export default {
}, },
watch: { watch: {
shouldResize(val, oldVal) { shouldResize(val, oldVal) {
console.log('should resize')
setTimeout(() => { setTimeout(() => {
this.chart.resize() this.chart.resize()
}, 250) }, 250)

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

@ -1,9 +1,9 @@
<template> <template>
<div id="v3d-outter" ref="v3d-outter"> <div id="v3d-outter" ref="v3d-outter">
<div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div> <!-- <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
<V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" /> <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
<div v-if="showPage" id="v3d-main-content"> <div v-if="showPage" id="v3d-main-content"> -->
<!-- <div v-if="true" id="v3d-main-content"> --> <div v-if="true" id="v3d-main-content">
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" /> <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
<section id="techy-body-part"> <section id="techy-body-part">
@ -204,6 +204,7 @@ export default {
} }
#v3d-outter *::-webkit-scrollbar-button { #v3d-outter *::-webkit-scrollbar-button {
display: none;
width: calc(8px * var(--beilv)); width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv)); height: calc(8px * var(--beilv));
background: #5bc4bf9f; background: #5bc4bf9f;