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