1.修改各大屏不合格标题边距
This commit is contained in:
15133876896-BGG25
parent
9ae87c892a
commit
0332ee828b
@ -44,6 +44,7 @@ const setData = (value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'3%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
@ -48,6 +48,7 @@ const setData = (value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
// color: ['#4992FF', '#7CFFB2', '#FDDD60', '#FF6E76'],
|
||||
tooltip: {
|
||||
|
||||
@ -38,7 +38,8 @@ const setData = (value: any) => {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
|
||||
@ -147,6 +147,7 @@ p {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.colorTip span {
|
||||
margin-right: 1rem;
|
||||
@ -168,6 +169,7 @@ p {
|
||||
border-radius: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
}
|
||||
.titlesize-name{
|
||||
font-size: 1.5rem;
|
||||
|
||||
@ -47,6 +47,7 @@ const setData = (value: any) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'10px'
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\chart\verticalNum.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
@ -8,13 +8,14 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<!-- <div class="contentbox"> -->
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<i
|
||||
:class="
|
||||
value.data > value.quota
|
||||
@ -100,8 +101,9 @@ defineExpose({
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
/* position: relative; */
|
||||
}
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
@ -118,26 +120,14 @@ p {
|
||||
color: #fff;
|
||||
}
|
||||
.icon-red {
|
||||
font-size: 70px;
|
||||
font-size: 150px;
|
||||
color: #E43961;
|
||||
animation: redstart 2s infinite;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}.box>h2{
|
||||
font-size: 20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.icon-blue {
|
||||
font-size: 100px;
|
||||
font-size: 150px;
|
||||
color: #20AEC5;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
@ -146,6 +136,17 @@ p {
|
||||
.icon-blue {
|
||||
/* margin-bottom: 20%; */
|
||||
}
|
||||
.box>h2{
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: -10px;
|
||||
}
|
||||
.num{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\chart\verticalNum.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
@ -8,13 +8,14 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<!-- <div class="contentbox"> -->
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<i
|
||||
:class="
|
||||
value.data > value.quota
|
||||
@ -102,6 +103,7 @@ defineExpose({
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
/* position: relative; */
|
||||
}
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
@ -136,11 +138,14 @@ p {
|
||||
}
|
||||
.box>h2{
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: -10px;
|
||||
}
|
||||
.num{
|
||||
font-size: 16px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\chart\verticalNum.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
@ -8,13 +8,14 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<!-- <div class="contentbox"> -->
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<i
|
||||
:class="
|
||||
value.data > value.quota
|
||||
@ -100,8 +101,9 @@ defineExpose({
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
/* position: relative; */
|
||||
}
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
@ -136,11 +138,14 @@ p {
|
||||
}
|
||||
.box>h2{
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: -10px;
|
||||
}
|
||||
.num{
|
||||
font-size: 16px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront-branches\src\views\PaintShopView\finishView\chart\pm.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\chart\pm.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-10 13:27:36
|
||||
@ -47,6 +47,7 @@ const setData = (value: any) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\chart\verticalNum.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
@ -8,13 +8,14 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<!-- <div class="contentbox"> -->
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<i
|
||||
:class="
|
||||
value.data > value.quota
|
||||
@ -100,8 +101,9 @@ defineExpose({
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
/* position: relative; */
|
||||
}
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
@ -136,11 +138,14 @@ p {
|
||||
}
|
||||
.box>h2{
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: -10px;
|
||||
}
|
||||
.num{
|
||||
font-size: 16px;
|
||||
|
||||
@ -47,6 +47,7 @@ const setData = (value: any) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\chart\verticalNum.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
@ -8,13 +8,14 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<!-- <div class="contentbox"> -->
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<i
|
||||
:class="
|
||||
value.data > value.quota
|
||||
@ -100,8 +101,9 @@ defineExpose({
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
/* position: relative; */
|
||||
}
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
@ -129,18 +131,22 @@ p {
|
||||
color: #20AEC5;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}.box>h2{
|
||||
font-size: 20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.icon-red,
|
||||
.icon-blue {
|
||||
/* margin-bottom: 20%; */
|
||||
}
|
||||
.box>h2{
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: -10px;
|
||||
}
|
||||
.num{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
@ -8,13 +8,14 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
|
||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<!-- <div class="contentbox"> -->
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<i
|
||||
:class="
|
||||
value.data > value.quota
|
||||
@ -102,6 +103,7 @@ defineExpose({
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
/* position: relative; */
|
||||
}
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
@ -136,11 +138,14 @@ p {
|
||||
}
|
||||
.box>h2{
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:20px;
|
||||
}
|
||||
.box>h5{
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: -10px;
|
||||
}
|
||||
.num{
|
||||
font-size: 16px;
|
||||
|
||||
@ -210,6 +210,7 @@ const setData = (value: any) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:"2%"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
@ -222,13 +223,13 @@ const setData = (value: any) => {
|
||||
// color:color,
|
||||
legend: {
|
||||
type: "scroll",
|
||||
top: "5%",
|
||||
top: "10%",
|
||||
// itemStyle:{
|
||||
// data:yue
|
||||
// },
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
top: "20%",
|
||||
left: "3%",
|
||||
right: "15%",
|
||||
bottom: "-0%",
|
||||
|
||||
@ -99,7 +99,8 @@ series.push({
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize:20
|
||||
}
|
||||
},
|
||||
top: '3%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
@ -113,15 +114,15 @@ tooltip: {
|
||||
// color:color,
|
||||
legend: {
|
||||
type:'scroll',
|
||||
width:400,
|
||||
right:20,
|
||||
// top: '3%',
|
||||
// width:400,
|
||||
// right:20,
|
||||
top: '11%',
|
||||
// itemStyle:{
|
||||
// data:yue
|
||||
// },
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "20%",
|
||||
left: "3%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
|
||||
@ -74,6 +74,7 @@ let gasOption = reactive({
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
top:'1%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
@ -85,12 +86,12 @@ let gasOption = reactive({
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
top: "5%",
|
||||
top: "6%",
|
||||
left: "10%",
|
||||
width: "auto",
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "10%",
|
||||
left: "3%",
|
||||
right: "-5%",
|
||||
bottom: "3%",
|
||||
@ -135,7 +136,7 @@ let gasOption2 = reactive({
|
||||
// // },
|
||||
// },
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "10%",
|
||||
left: "-50%",
|
||||
right: "-10%",
|
||||
bottom: "3%",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront-branches\src\views\energyConsume\content\chart\gas.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\chart\gas.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-14 13:24:12
|
||||
@ -53,7 +53,8 @@ const setData=(value:any)=>{
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize:20
|
||||
}
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
series: [{
|
||||
type: 'liquidFill',
|
||||
|
||||
@ -8,161 +8,327 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<border4 ref="refborder4">
|
||||
<div>
|
||||
<border4 ref="refborder4">
|
||||
<template v-slot>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div ref="powerjixie"></div>
|
||||
<div ref="power"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</border4>
|
||||
</border4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
|
||||
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
||||
import {accAdd} from '@/utils/precision'
|
||||
import border4 from "@/components/borderBox/border4.vue"
|
||||
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||||
import { EDataPerson, EDataPersonItem } from "@/type/energyConsume";
|
||||
import { accAdd } from "@/utils/precision";
|
||||
import border4 from "@/components/borderBox/border6.vue";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let {t} = useI18n();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let props=defineProps<{
|
||||
title:string
|
||||
}>()
|
||||
let power=ref()
|
||||
let props = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
let power = ref();
|
||||
let powerjixie = ref();
|
||||
|
||||
let refborder4=ref()
|
||||
let refborder4 = ref();
|
||||
|
||||
const echartsData = reactive<EDataPerson>({
|
||||
power:{
|
||||
div:null,
|
||||
data:null,
|
||||
title:'',
|
||||
box:null
|
||||
power: {
|
||||
div: null,
|
||||
data: null,
|
||||
title: "",
|
||||
box: null,
|
||||
},
|
||||
})
|
||||
});
|
||||
const echartsData2 = reactive<EDataPerson>({
|
||||
power: {
|
||||
div: null,
|
||||
data: null,
|
||||
title: "",
|
||||
box: null,
|
||||
},
|
||||
});
|
||||
|
||||
const setData=(value:any)=>{
|
||||
|
||||
let series=[]
|
||||
value.listData.forEach(res=>{
|
||||
for(let key in res.month){
|
||||
series.push({
|
||||
name: key+'月',
|
||||
type: 'bar',
|
||||
stack: res.years,
|
||||
emphasis: {
|
||||
focus: 'coordinateSystem',
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: res.month[key],
|
||||
xAxisIndex:res.years=='2022'?0:1,
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
//data0用于初始化计算的数据
|
||||
let data0=[]
|
||||
for(let i=1;i<=value.name.length;i++){
|
||||
data0.push(0)
|
||||
const setData = (value: any) => {
|
||||
let series = [];
|
||||
let series2 = [];
|
||||
let name = [];
|
||||
let name2 = [];
|
||||
let shuju = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
|
||||
let shuju2 = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
|
||||
let nameIndex = null;
|
||||
value.name.forEach((ele, index) => {
|
||||
if (ele == "机械分厂") {
|
||||
name2.push(ele);
|
||||
nameIndex = index;
|
||||
} else {
|
||||
name.push(ele);
|
||||
}
|
||||
});
|
||||
value.listData.forEach((res,listDataindex) => {
|
||||
for (let key in res.month) {
|
||||
res.month[key].forEach((ele,index)=>{
|
||||
if(!shuju2[listDataindex].month[key]){
|
||||
shuju2[listDataindex].month[key]=[]
|
||||
}
|
||||
if(!shuju[listDataindex].month[key]){
|
||||
shuju[listDataindex].month[key]=[]
|
||||
}
|
||||
if(index==nameIndex){
|
||||
shuju2[listDataindex].month[key].push(ele)
|
||||
}else{
|
||||
shuju[listDataindex].month[key].push(ele)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
shuju.forEach((res) => {
|
||||
for (let key in res.month) {
|
||||
series.push({
|
||||
name: key + "月",
|
||||
type: "bar",
|
||||
stack: res.type,
|
||||
emphasis: {
|
||||
focus: "coordinateSystem",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (value, index) {
|
||||
return value.value.toLocaleString();
|
||||
},
|
||||
},
|
||||
},
|
||||
data: res.month[key],
|
||||
xAxisIndex: res.type == "生产额" ? 0 : 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
shuju2.forEach((res) => {
|
||||
for (let key in res.month) {
|
||||
series2.push({
|
||||
name: key + "月",
|
||||
type: "bar",
|
||||
stack: res.type,
|
||||
barWidth:'20%',
|
||||
emphasis: {
|
||||
focus: "coordinateSystem",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (value, index) {
|
||||
return value.value.toLocaleString();
|
||||
},
|
||||
},
|
||||
},
|
||||
data: res.month[key],
|
||||
xAxisIndex: res.type == "生产额" ? 0 : 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
//data0用于初始化计算的数据
|
||||
let data0 = [];
|
||||
for (let i = 1; i <= value.name.length; i++) {
|
||||
data0.push(0);
|
||||
}
|
||||
let data1 = [];
|
||||
for (let i = 1; i <= name2.length; i++) {
|
||||
data1.push(0);
|
||||
}
|
||||
|
||||
series.push(
|
||||
{
|
||||
name: value.listData[0].years,
|
||||
type: 'bar',
|
||||
data:data0,
|
||||
color: '#bbf',
|
||||
stack: value.listData[0].years,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
},
|
||||
xAxisIndex:0,
|
||||
},{
|
||||
name: value.listData[1].years,
|
||||
type: 'bar',
|
||||
data: data0,
|
||||
color: '#bbf',
|
||||
stack: value.listData[1].years,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff'
|
||||
},
|
||||
xAxisIndex:1,
|
||||
},
|
||||
)
|
||||
series.push(
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
data: data0,
|
||||
color: "#bbf",
|
||||
stack: value.listData[0].type,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff",
|
||||
},
|
||||
xAxisIndex: 0,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
data: data0,
|
||||
color: "#bbf",
|
||||
stack: value.listData[1].type,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff",
|
||||
},
|
||||
xAxisIndex: 1,
|
||||
}
|
||||
);
|
||||
series2.push(
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
data: data1,
|
||||
color: "#bbf",
|
||||
stack: value.listData[0].type,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff",
|
||||
},
|
||||
xAxisIndex: 0,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
data: data1,
|
||||
color: "#bbf",
|
||||
stack: value.listData[1].type,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff",
|
||||
},
|
||||
xAxisIndex: 1,
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
echartsData.power!.div=power.value
|
||||
echartsData.power!.title=props.title
|
||||
echartsData.power!.data={
|
||||
title:{
|
||||
text:echartsData.power!.title,
|
||||
show:true,
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize:20
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
|
||||
axis:'auto',
|
||||
|
||||
},
|
||||
},
|
||||
// color:color,
|
||||
legend: {
|
||||
type:'scroll',
|
||||
bottom: '3%',
|
||||
// itemStyle:{
|
||||
// data:yue
|
||||
// },
|
||||
},
|
||||
grid: {
|
||||
top:'8%',
|
||||
left: '3%',
|
||||
right: '10%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
name: t('messages.Production_yuan'),
|
||||
},{
|
||||
type: 'value',
|
||||
name: t('messages.powerhi_du'),
|
||||
}],
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: value.name
|
||||
},
|
||||
series: series
|
||||
echartsData.power!.div = powerjixie.value;
|
||||
echartsData.power!.title =props.title;;
|
||||
echartsData.power!.data = {
|
||||
title: {
|
||||
text: echartsData.power!.title,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:"2%"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
|
||||
axis: "auto",
|
||||
},
|
||||
},
|
||||
// color:color,
|
||||
legend: {
|
||||
type: "scroll",
|
||||
top: "10%",
|
||||
// itemStyle:{
|
||||
// data:yue
|
||||
// },
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "3%",
|
||||
right: "15%",
|
||||
bottom: "-0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: t('messages.Production_yuan'),
|
||||
show:false,
|
||||
splitLine:{
|
||||
show:false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: t('messages.powerhi_du'),
|
||||
splitLine:{
|
||||
show:false
|
||||
}
|
||||
// show:false
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: name,
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
|
||||
change(echartsData.power,value)
|
||||
}
|
||||
|
||||
const change = (item:EDataPersonItem,value:any) => {
|
||||
let Ebox=proxy.$echarts.init(
|
||||
item.div,
|
||||
"dark"
|
||||
);
|
||||
clacChartsSum(item.data,value)
|
||||
Ebox.setOption(item.data);
|
||||
item.box = Ebox
|
||||
changeecharts(item.data,value)
|
||||
echartsData2.power!.div = power.value;
|
||||
echartsData2.power!.title ='';
|
||||
echartsData2.power!.data = {
|
||||
title: {
|
||||
text: '',
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
|
||||
axis: "auto",
|
||||
},
|
||||
},
|
||||
// color:color,
|
||||
// legend: {
|
||||
// type: "scroll",
|
||||
// top: "5%",
|
||||
// // itemStyle:{
|
||||
// // data:yue
|
||||
// // },
|
||||
// },
|
||||
grid: {
|
||||
top: "-35%",
|
||||
left: "3%",
|
||||
right: "15%",
|
||||
bottom: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: t('messages.Production_yuan'),
|
||||
splitLine:{
|
||||
show:false
|
||||
},
|
||||
max:10000000
|
||||
// show:false
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: t('messages.powerhi_du'),
|
||||
splitLine:{
|
||||
show:false
|
||||
},
|
||||
show:false
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: name2,
|
||||
},
|
||||
series: series2,
|
||||
};
|
||||
change(echartsData.power, value);
|
||||
change(echartsData2.power,value)
|
||||
};
|
||||
|
||||
const change = (item: EDataPersonItem, value: any) => {
|
||||
let Ebox = proxy.$echarts.init(item.div, "dark");
|
||||
clacChartsSum(item.data, value);
|
||||
Ebox.setOption(item.data);
|
||||
item.box = Ebox;
|
||||
changeecharts(item.data, value);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -172,35 +338,45 @@ changeecharts(item.data,value)
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const clacChartsSum=(option:any,value:any)=>{
|
||||
var series = option.series
|
||||
function getSum1 (params) {
|
||||
let stack=value.listData[0].years
|
||||
var datavalue = 0
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if(series[i].stack==stack){
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||||
}
|
||||
|
||||
}
|
||||
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||||
const clacChartsSum = (option: any, value: any) => {
|
||||
var series = option.series;
|
||||
function getSum1(params) {
|
||||
let stack = value.listData[0].type;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
function getSum2 (params) {
|
||||
let stack=value.listData[1].years
|
||||
var datavalue = 0
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if(series[i].stack==stack){
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||||
}
|
||||
}
|
||||
if(stack=='生产额'){
|
||||
stack=t('messages.Production')
|
||||
}else if(stack=='用电量'){
|
||||
stack=t('messages.powerTip')
|
||||
}
|
||||
|
||||
}
|
||||
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||||
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
||||
}
|
||||
function getSum2(params) {
|
||||
let stack = value.listData[1].type;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
series[series.length - 1].label.formatter = getSum2
|
||||
series[series.length - 2].label.formatter = getSum1
|
||||
}
|
||||
}
|
||||
if(stack=='生产额'){
|
||||
stack=t('messages.Production')
|
||||
}else if(stack=='用电量'){
|
||||
stack=t('messages.powerTip')
|
||||
}
|
||||
|
||||
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
||||
}
|
||||
series[series.length - 1].label.formatter = getSum2;
|
||||
series[series.length - 2].label.formatter = getSum1;
|
||||
};
|
||||
|
||||
/**
|
||||
* @函数功能: 修改用电量总数数值的标签
|
||||
@ -209,101 +385,113 @@ const clacChartsSum=(option:any,value:any)=>{
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const changeecharts=(option:any,value:any)=>{
|
||||
var series = option.series
|
||||
const changeecharts = (option: any, value: any) => {
|
||||
var series = option.series;
|
||||
|
||||
echartsData.power.box.on('legendselectchanged',(obj)=>{
|
||||
//重新计算前一年数据
|
||||
function getSum1 (params) {
|
||||
let stack=value.listData[0].years
|
||||
var datavalue = 0
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (obj.selected[series[i].name]) {
|
||||
if(series[i].stack==stack){
|
||||
echartsData.power.box.on("legendselectchanged", (obj) => {
|
||||
//重新计算前一年数据
|
||||
function getSum1(params) {
|
||||
let stack = value.listData[0].type;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (obj.selected[series[i].name]) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||||
}
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
}
|
||||
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||||
}
|
||||
//重新计算今年年数据
|
||||
function getSum2 (params) {
|
||||
let stack=value.listData[1].years
|
||||
var datavalue = 0
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (obj.selected[series[i].name]) {
|
||||
if(series[i].stack==stack){
|
||||
if(stack=='生产额'){
|
||||
stack=t('messages.Production')
|
||||
}else if(stack=='用电量'){
|
||||
stack=t('messages.powerTip')
|
||||
}
|
||||
|
||||
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
||||
}
|
||||
//重新计算今年年数据
|
||||
function getSum2(params) {
|
||||
let stack = value.listData[1].type;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (obj.selected[series[i].name]) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||||
}
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
}
|
||||
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||||
}
|
||||
series[series.length - 1].label.formatter = getSum2
|
||||
series[series.length - 2].label.formatter = getSum1
|
||||
echartsData.power.box.setOption(option)
|
||||
})
|
||||
if(stack=='生产额'){
|
||||
stack=t('messages.Production')
|
||||
}else if(stack=='用电量'){
|
||||
stack=t('messages.powerTip')
|
||||
}
|
||||
|
||||
return datavalue ? stack + ":" + datavalue.toLocaleString() + "" : null;
|
||||
}
|
||||
series[series.length - 1].label.formatter = getSum2;
|
||||
series[series.length - 2].label.formatter = getSum1;
|
||||
echartsData.power.box.setOption(option);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function getSum1 (params) {
|
||||
let stack=value.listData[0].years
|
||||
var datavalue = 0
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if(series[i].stack==stack){
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||||
}
|
||||
|
||||
}
|
||||
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||||
function getSum1(params) {
|
||||
let stack = value.listData[0].type;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
function getSum2 (params) {
|
||||
let stack=value.listData[1].years
|
||||
var datavalue = 0
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if(series[i].stack==stack){
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||||
}
|
||||
}
|
||||
if(stack=='生产额'){
|
||||
stack=t('messages.Production')
|
||||
}else if(stack=='用电量'){
|
||||
stack=t('messages.powerTip')
|
||||
}
|
||||
|
||||
}
|
||||
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||||
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
||||
}
|
||||
function getSum2(params) {
|
||||
let stack = value.listData[1].type;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
series[series.length - 1].label.formatter = getSum2
|
||||
series[series.length - 2].label.formatter = getSum1
|
||||
}
|
||||
if(stack=='生产额'){
|
||||
stack=t('messages.Production')
|
||||
}else if(stack=='用电量'){
|
||||
stack=t('messages.powerTip')
|
||||
}
|
||||
|
||||
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
||||
}
|
||||
series[series.length - 1].label.formatter = getSum2;
|
||||
series[series.length - 2].label.formatter = getSum1;
|
||||
};
|
||||
|
||||
function setchartWH(width: any, height: any) {
|
||||
echartsData.power!.div = power.value;
|
||||
power.value.style.height = height/20*5 + "px";
|
||||
power.value.style.width = width + "px";
|
||||
|
||||
powerjixie.value.style.height = height/20*15 + "px";
|
||||
powerjixie.value.style.width = width + "px";
|
||||
refborder4.value.resetWH();
|
||||
if (echartsData.power.box) {
|
||||
echartsData.power.box.resize();
|
||||
echartsData2.power.box.resize();
|
||||
}
|
||||
}
|
||||
|
||||
function setchartWH(width:any,height:any){
|
||||
echartsData.power!.div=power.value
|
||||
power.value.style.height=height+'px'
|
||||
power.value.style.width=width+'px'
|
||||
|
||||
refborder4.value.resetWH()
|
||||
if(echartsData.power.box){
|
||||
echartsData.power.box.resize()
|
||||
}
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
onMounted(() => {});
|
||||
|
||||
// return{setchartWH}
|
||||
defineExpose({
|
||||
setchartWH,
|
||||
setData
|
||||
})
|
||||
|
||||
setData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront-branches\src\views\energyConsume\content\chart\power2023.vue
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\energyConsume\content\chart\power2023.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 15:04:23
|
||||
@ -21,7 +21,7 @@
|
||||
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
|
||||
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
||||
import {accAdd} from '@/utils/precision'
|
||||
import border4 from "@/components/borderBox/border4.vue"
|
||||
import border4 from "@/components/borderBox/border6.vue"
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let props=defineProps<{
|
||||
title:string
|
||||
@ -52,10 +52,12 @@ for(let key in res.month){
|
||||
emphasis: {
|
||||
focus: 'coordinateSystem',
|
||||
label: {
|
||||
show: true
|
||||
show: true,
|
||||
formatter:function(value,index){
|
||||
return value.value.toLocaleString()
|
||||
}
|
||||
}
|
||||
},
|
||||
barWidth:'70%',
|
||||
data: res.month[key]
|
||||
})
|
||||
}
|
||||
@ -78,6 +80,7 @@ series.push({
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
position: 'right',
|
||||
color: '#fff'
|
||||
}
|
||||
@ -96,7 +99,8 @@ series.push({
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize:20
|
||||
}
|
||||
},
|
||||
top: '3%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
@ -110,22 +114,25 @@ tooltip: {
|
||||
// color:color,
|
||||
legend: {
|
||||
type:'scroll',
|
||||
width:400,
|
||||
right:20,
|
||||
// top: '3%',
|
||||
// width:400,
|
||||
// right:20,
|
||||
top: '11%',
|
||||
// itemStyle:{
|
||||
// data:yue
|
||||
// },
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "20%",
|
||||
left: "3%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
|
||||
@ -69,6 +69,7 @@ let gasOption = reactive({
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
@ -81,10 +82,11 @@ let gasOption = reactive({
|
||||
legend: {
|
||||
type: "scroll",
|
||||
width: 800,
|
||||
right: 20,
|
||||
// right: 20,
|
||||
top:'8%'
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
|
||||
@ -36,19 +36,21 @@ const setData = (value: any, type: number) => {
|
||||
echartsData.humiture!.data = {
|
||||
title: {
|
||||
text: echartsData.humiture!.title,
|
||||
top:'2%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
|
||||
},
|
||||
legend: {
|
||||
// bottom: "3%",
|
||||
right:'50'
|
||||
top:'6%'
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
|
||||
@ -57,20 +57,20 @@ const setData = (limit: any, value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'1%'
|
||||
},
|
||||
legend: {
|
||||
top: "4%",
|
||||
width: "auto",
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "10%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
color:["","#4992FF","#FF6E76"],
|
||||
legend: {
|
||||
itemStyle:{
|
||||
// color:["#4992FF","#FF6E76"]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
// trigger: "axis",
|
||||
// axisPointer: {
|
||||
|
||||
@ -47,10 +47,11 @@ const setData = (value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "0px",
|
||||
top: "2%",
|
||||
left: "0px",
|
||||
right: "0px",
|
||||
bottom: "0px",
|
||||
|
||||
@ -32,23 +32,25 @@ const setData = (value: any, type: number) => {
|
||||
});
|
||||
//防止数据先执行时获取不到div
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
echartsData.humiture!.title = t('messages.TemperatureHumidity');
|
||||
echartsData.humiture!.title = t('messages.TemperatureHumidity');
|
||||
echartsData.humiture!.data = {
|
||||
title: {
|
||||
text: echartsData.humiture!.title,
|
||||
top:'2%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
|
||||
},
|
||||
legend: {
|
||||
// bottom: "3%",
|
||||
right:'50'
|
||||
top:'6%'
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
@ -74,7 +76,7 @@ const setData = (value: any, type: number) => {
|
||||
name: `${t('messages.TemperatureRange')}(°C)(${t('messages.fanwei')}：${value.bottom.temp}°C - ${value.top.temp}°C)`,
|
||||
type: "bar",
|
||||
data: y.temp,
|
||||
barWidth: '20%',
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var index_color = params.value;
|
||||
@ -105,7 +107,7 @@ const setData = (value: any, type: number) => {
|
||||
name: t('messages.TemperatureRange'),
|
||||
yAxis: value.bottom.temp,
|
||||
label: {
|
||||
formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${value.bottom.temp} °C`,
|
||||
formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${value.bottom.temp} °C`,
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
@ -130,7 +132,7 @@ const setData = (value: any, type: number) => {
|
||||
name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${value.bottom.humidity}%RH - ${value.top.humidity}%RH)`,
|
||||
type: "bar",
|
||||
data: y.humidity,
|
||||
barWidth: '20%',
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var index_color = params.value;
|
||||
|
||||
@ -48,7 +48,7 @@ const setData = (limit: any, value: any, type: number) => {
|
||||
y.push(res.value);
|
||||
});
|
||||
echartsData.noise!.div = noise.value;
|
||||
echartsData.noise!.title = t('messages.noise_DB');
|
||||
echartsData.noise!.title =t('messages.noise_DB');
|
||||
echartsData.noise!.data = {
|
||||
title: {
|
||||
text: echartsData.noise!.title,
|
||||
@ -57,20 +57,20 @@ const setData = (limit: any, value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'1%'
|
||||
},
|
||||
legend: {
|
||||
top: "4%",
|
||||
width: "auto",
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "10%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
color:["","#4992FF","#FF6E76"],
|
||||
legend: {
|
||||
itemStyle:{
|
||||
// color:["#4992FF","#FF6E76"]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
// trigger: "axis",
|
||||
// axisPointer: {
|
||||
@ -78,7 +78,7 @@ const setData = (limit: any, value: any, type: number) => {
|
||||
// type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
|
||||
// axis: "auto",
|
||||
// },
|
||||
// formatter: "{b} : {c} db",
|
||||
// formatter: "{b} : {c} dB",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@ -97,7 +97,7 @@ const setData = (limit: any, value: any, type: number) => {
|
||||
{
|
||||
data: y,
|
||||
type: "bar",
|
||||
barWidth: '45%',
|
||||
barWidth: '50%',
|
||||
itemStyle:{
|
||||
color:function (params) {
|
||||
var index_color = params.value;
|
||||
@ -148,7 +148,6 @@ const setData = (limit: any, value: any, type: number) => {
|
||||
};
|
||||
|
||||
const change = (item: EDataPersonItem) => {
|
||||
|
||||
let Ebox
|
||||
if(!item.box){
|
||||
Ebox = proxy.$echarts.init(item.div, "dark");
|
||||
|
||||
@ -47,10 +47,11 @@ const setData = (value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "0px",
|
||||
top: "2%",
|
||||
left: "0px",
|
||||
right: "0px",
|
||||
bottom: "0px",
|
||||
@ -122,9 +123,7 @@ const setData = (value: any, type: number) => {
|
||||
formatter: "{value} μg/m3",
|
||||
color: "inherit",
|
||||
},
|
||||
title: {
|
||||
offsetCenter: [0, "-20%"],
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
value: value.two,
|
||||
@ -194,16 +193,28 @@ const setData = (value: any, type: number) => {
|
||||
},
|
||||
],
|
||||
};
|
||||
if (type == 1) {
|
||||
// if (type == 1) {
|
||||
change(echartsData.humiture);
|
||||
} else {
|
||||
updata(echartsData.humiture);
|
||||
}
|
||||
// } else {
|
||||
// updata(echartsData.humiture);
|
||||
// }
|
||||
};
|
||||
|
||||
const change = (item: EDataPersonItem) => {
|
||||
let Ebox = markRaw(proxy.$echarts.init(item.div, "dark"));
|
||||
// let Ebox = markRaw(proxy.$echarts.init(item.div, "dark"));
|
||||
// Ebox.setOption(item?.data);
|
||||
// item.box = Ebox;
|
||||
|
||||
let Ebox;
|
||||
//判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
|
||||
if (!item.box) {
|
||||
Ebox = markRaw(proxy.$echarts.init(item.div, "dark"))
|
||||
} else {
|
||||
Ebox = item.box;
|
||||
}
|
||||
//将拿到的dom设置数据源
|
||||
Ebox.setOption(item.data);
|
||||
//保存新设置的dom
|
||||
item.box = Ebox;
|
||||
};
|
||||
const updata = (item: EDataPersonItem) => {
|
||||
|
||||
@ -146,9 +146,10 @@ const setData = (value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'1%'
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
@ -160,7 +161,9 @@ const setData = (value: any, type: number) => {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
legend: {
|
||||
top: "5%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: newx,
|
||||
|
||||
@ -41,7 +41,8 @@ const setData=(value:any,type:number)=>{
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize:20
|
||||
}
|
||||
},
|
||||
top:'1%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div ref="pipe" class="ddd"></div>
|
||||
<div ref="pipe"></div>
|
||||
</template>
|
||||
</border3>
|
||||
</div>
|
||||
@ -146,9 +146,10 @@ const setData = (value: any, type: number) => {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top:'1%'
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
@ -160,7 +161,9 @@ const setData = (value: any, type: number) => {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
legend: {
|
||||
top: "5%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: newx,
|
||||
@ -183,8 +186,7 @@ const setData = (value: any, type: number) => {
|
||||
itemStyle:{
|
||||
color:function (params) {
|
||||
var index_color = params.value[2];
|
||||
|
||||
if (index_color >= value.top) {
|
||||
if (index_color >= value.top.value) {
|
||||
return "#FF6E76";
|
||||
} else {
|
||||
return "#4992FF";
|
||||
@ -362,7 +364,4 @@ defineExpose({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ddd{
|
||||
margin-right: 5px;
|
||||
}</style>
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user