From f323611ffe37f44ce64ada6e8869dfb14099dfb4 Mon Sep 17 00:00:00 2001
From: 15133876896-BGG25 <2233720980@qq.com>
Date: Fri, 9 Jun 2023 17:53:19 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A0=E7=B2=BE=E9=A5=B0=E8=BD=A6?=
 =?UTF-8?q?=E9=97=B4=E7=94=A8=E6=B0=94=E9=87=8F=E7=94=A8=E6=B0=B4=E9=87=8F?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/PaintShopView/View1/chart/gas.vue   | 169 ++++++++++++++++++
 src/views/PaintShopView/View1/chart/water.vue | 169 ++++++++++++++++++
 2 files changed, 338 insertions(+)
 create mode 100644 src/views/PaintShopView/View1/chart/gas.vue
 create mode 100644 src/views/PaintShopView/View1/chart/water.vue

diff --git a/src/views/PaintShopView/View1/chart/gas.vue b/src/views/PaintShopView/View1/chart/gas.vue
new file mode 100644
index 0000000..808d62f
--- /dev/null
+++ b/src/views/PaintShopView/View1/chart/gas.vue
@@ -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>
diff --git a/src/views/PaintShopView/View1/chart/water.vue b/src/views/PaintShopView/View1/chart/water.vue
new file mode 100644
index 0000000..5db7248
--- /dev/null
+++ b/src/views/PaintShopView/View1/chart/water.vue
@@ -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>