1.增加精饰车间用气量用水量模块
This commit is contained in:
15133876896-BGG25
parent
d79c179fce
commit
f323611ffe
169
src/views/PaintShopView/View1/chart/gas.vue
Normal file
169
src/views/PaintShopView/View1/chart/gas.vue
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\PaintShopView\View1\chart\gas.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-02-14 13:24:12
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="gasborder">
|
||||||
|
<border6 ref="refborder4">
|
||||||
|
<template v-slot>
|
||||||
|
<!-- <h1>{{props.title}}</h1> -->
|
||||||
|
<div ref="gas" ></div>
|
||||||
|
</template>
|
||||||
|
</border6>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
|
||||||
|
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
||||||
|
import 'echarts-liquidfill'
|
||||||
|
import border6 from "@/components/borderBox/border6.vue";
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
let props=defineProps<{
|
||||||
|
title:string,
|
||||||
|
}>()
|
||||||
|
let gas=ref()
|
||||||
|
|
||||||
|
let refborder4=ref()
|
||||||
|
|
||||||
|
const echartsData = reactive<EDataPerson>({
|
||||||
|
gas:{
|
||||||
|
div:null,
|
||||||
|
data:null,
|
||||||
|
title:'',
|
||||||
|
box:null
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const setData=(value:any)=>{
|
||||||
|
|
||||||
|
echartsData.gas!.div=gas.value
|
||||||
|
echartsData.gas!.title=props.title
|
||||||
|
echartsData.gas!.data=({
|
||||||
|
title: {
|
||||||
|
// 标题
|
||||||
|
text: echartsData.gas!.title,
|
||||||
|
textStyle:{
|
||||||
|
color:'#fff',
|
||||||
|
fontSize:20
|
||||||
|
},
|
||||||
|
top:'2%'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'liquidFill',
|
||||||
|
radius: '80%', //水球大小
|
||||||
|
shape:'rect',
|
||||||
|
center: ['50%', '55%'],
|
||||||
|
waveAnimation: true,
|
||||||
|
color: [
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#186945',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#1b7a4f',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data: [0.7,0.7], // data个数代表波浪数
|
||||||
|
amplitude: 10, //振幅
|
||||||
|
backgroundStyle: {
|
||||||
|
borderWidth: 2, //边框大小
|
||||||
|
borderColor:'rgba(8, 206, 120, 0.8)',//边框颜色
|
||||||
|
color: 'rgba(8, 206, 120, 0.4)',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
formatter:function(params){
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
borderDistance: 0,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 4,
|
||||||
|
borderColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
})
|
||||||
|
|
||||||
|
change(echartsData.gas)
|
||||||
|
}
|
||||||
|
|
||||||
|
const change = (item:EDataPersonItem) => {
|
||||||
|
let Ebox=proxy.$echarts.init(
|
||||||
|
item.div,
|
||||||
|
"dark"
|
||||||
|
);
|
||||||
|
Ebox.setOption(item.data);
|
||||||
|
item.box = Ebox
|
||||||
|
};
|
||||||
|
|
||||||
|
function setchartWH(width:any,height:any){
|
||||||
|
// echartsData.water!.div=water.value
|
||||||
|
gas.value.style.height=height-20+'px'
|
||||||
|
gas.value.style.width=width+'px'
|
||||||
|
|
||||||
|
refborder4.value.resetWH()
|
||||||
|
if(echartsData.gas.box){
|
||||||
|
echartsData.gas.box.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
// setData()
|
||||||
|
})
|
||||||
|
|
||||||
|
// return{setchartWH}
|
||||||
|
defineExpose({
|
||||||
|
setchartWH,
|
||||||
|
setData
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.gasBox{
|
||||||
|
/* border-radius: 50%; */
|
||||||
|
background-color: #8CE78D;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.gasborder{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.gasborder h1{
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left:20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
169
src/views/PaintShopView/View1/chart/water.vue
Normal file
169
src/views/PaintShopView/View1/chart/water.vue
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\PaintShopView\View1\chart\water.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-02-14 13:24:12
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="gasborder">
|
||||||
|
<border6 ref="refborder4">
|
||||||
|
<template v-slot>
|
||||||
|
<!-- <h1>{{props.title}}</h1> -->
|
||||||
|
<div ref="gas" ></div>
|
||||||
|
</template>
|
||||||
|
</border6>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
|
||||||
|
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
||||||
|
import 'echarts-liquidfill'
|
||||||
|
import border6 from "@/components/borderBox/border6.vue";
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
let props=defineProps<{
|
||||||
|
title:string,
|
||||||
|
}>()
|
||||||
|
let gas=ref()
|
||||||
|
|
||||||
|
let refborder4=ref()
|
||||||
|
|
||||||
|
const echartsData = reactive<EDataPerson>({
|
||||||
|
gas:{
|
||||||
|
div:null,
|
||||||
|
data:null,
|
||||||
|
title:'',
|
||||||
|
box:null
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const setData=(value:any)=>{
|
||||||
|
|
||||||
|
echartsData.gas!.div=gas.value
|
||||||
|
echartsData.gas!.title=props.title
|
||||||
|
echartsData.gas!.data=({
|
||||||
|
title: {
|
||||||
|
// 标题
|
||||||
|
text: echartsData.gas!.title,
|
||||||
|
textStyle:{
|
||||||
|
color:'#fff',
|
||||||
|
fontSize:20
|
||||||
|
},
|
||||||
|
top:'2%'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'liquidFill',
|
||||||
|
radius: '80%', //水球大小
|
||||||
|
shape:'rect',
|
||||||
|
center: ['50%', '55%'],
|
||||||
|
waveAnimation: true,
|
||||||
|
color: [
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#138FE2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#126ABC',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data: [0.7,0.7], // data个数代表波浪数
|
||||||
|
amplitude: 10, //振幅
|
||||||
|
backgroundStyle: {
|
||||||
|
borderWidth: 2, //边框大小
|
||||||
|
borderColor:'rgba(17, 94, 176, 0.8)',//边框颜色
|
||||||
|
color: 'rgba(17, 94, 176, 0.4)',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
formatter:function(params){
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
borderDistance: 0,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 4,
|
||||||
|
borderColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
})
|
||||||
|
|
||||||
|
change(echartsData.gas)
|
||||||
|
}
|
||||||
|
|
||||||
|
const change = (item:EDataPersonItem) => {
|
||||||
|
let Ebox=proxy.$echarts.init(
|
||||||
|
item.div,
|
||||||
|
"dark"
|
||||||
|
);
|
||||||
|
Ebox.setOption(item.data);
|
||||||
|
item.box = Ebox
|
||||||
|
};
|
||||||
|
|
||||||
|
function setchartWH(width:any,height:any){
|
||||||
|
// echartsData.water!.div=water.value
|
||||||
|
gas.value.style.height=height-20+'px'
|
||||||
|
gas.value.style.width=width+'px'
|
||||||
|
|
||||||
|
refborder4.value.resetWH()
|
||||||
|
if(echartsData.gas.box){
|
||||||
|
echartsData.gas.box.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
// setData()
|
||||||
|
})
|
||||||
|
|
||||||
|
// return{setchartWH}
|
||||||
|
defineExpose({
|
||||||
|
setchartWH,
|
||||||
|
setData
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.gasBox{
|
||||||
|
/* border-radius: 50%; */
|
||||||
|
background-color: #8CE78D;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.gasborder{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.gasborder h1{
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left:20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user