1.机械分厂能耗增加用水量

2.精饰车间环境增加用气、用水量

src/views/PaintShopView/View1/bottom.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \gitscreenFront\src\views\PaintShopView\View1\bottom.vue
+ * @FilePath: \code\gitscreenFront\src\views\PaintShopView\View1\bottom.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -14,6 +14,7 @@
         <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
             <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
           <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
+
           <div>
             <border6 ref="borderref">
               <template v-slot>
@@ -21,6 +22,12 @@
               </template>
             </border6>
           </div>
+          <div>
+            <gas ref="gasref" :title="t('messages.gasto2023')"></gas>
+            <!-- 调整高度间距div -->
+            <div style="width: 100%;height: 10px;"></div>
+            <water ref="waterref" :title="t('messages.waterto2023')"></water>
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -37,6 +44,8 @@ import border3 from "@/components/borderBox/border3.vue";
 import pm from "./../components/pm.vue";
 import power from "./chart/power2023.vue";
 import chart from "@/components/assembly/chart2.vue";
+import gas from "./chart/gas.vue";
+import water from "./chart/water.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
@@ -49,6 +58,9 @@ let Productionref = ref();
 let borderref = ref()
 let pmref = ref()
 let pm_timer = null
+
+let gasref = ref();
+let waterref = ref();
 let props = defineProps<{
   width: number;
   height: number;
@@ -72,12 +84,13 @@ function reset(val: any) {
 }
 
 const powerBox = (width: any, height: any) => {
-  let a = calcWH(height, width, 1, 3, 0);
+  let a = calcWH(height, width, 1, 24, 0);
   //修改高度
-  powerref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
-  Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
-  pmref.value.setchartWH(a.oWidth - 40, a.oHeight - 40)
-  //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
+  powerref.value.setchartWH(a.oWidth*7 - 20, a.oHeight - 20);
+  Productionref.value.setchartWH(a.oWidth*7 - 20, a.oHeight - 20);
+  pmref.value.setchartWH(a.oWidth*7 - 40, a.oHeight - 40)
+  gasref.value.setchartWH(a.oWidth*3-20, a.oHeight/2 - 20);
+  waterref.value.setchartWH(a.oWidth*3-20, a.oHeight/2 - 20);
 };
 let powerOption = reactive({
   title: "",
@@ -103,9 +116,9 @@ let powerOption = reactive({
       right: 20,
     },
     grid: {
-      top: "8%",
+      top: "13%",
       left: "3%",
-      right: "0%",
+      right: "5%",
       bottom: "3%",
       containLabel: true,
     },
@@ -146,9 +159,9 @@ let ProductionOption = reactive({
       right: 20,
     },
     grid: {
-      top: "8%",
+      top: "13%",
       left: "3%",
-      right: "0%",
+      right: "5%",
       bottom: "3%",
       containLabel: true,
     },
@@ -166,20 +179,6 @@ let ProductionOption = reactive({
   },
 });
 let Data = { power: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 }, Production: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 } }
-//   async function getpower() {
-//     let result: any = await getPowerData({ time: 1 });
-
-//     if (result.code == 200) {
-//       result.data.name = result.data.name.reverse();
-//       result.data.listData.forEach((res) => {
-//         for (let key in res.month) {
-//           res.month[key] = res.month[key].reverse();
-//         }
-//       });
-//       power1.value.setData(result.data);
-//       // yields.value.setData(result.data);
-//     }
-//   }
 let pm_index = 0
 function setcontentData(val) {
   clearInterval(pm_timer)
@@ -279,6 +278,20 @@ function setcontentData(val) {
       }
     }, 3000)
   }
+
+  
+}
+  // 用水量用气量
+function setWaterGas(val:any){
+console.log(val);
+val.forEach(res=>{
+  if(res.deptName=='喷漆车间' && res.type=='GasDetail'){
+    gasref.value.setData(res.usageNum);
+  }
+  if(res.deptName=='生产区' && res.type=='WaterDetail'){
+    waterref.value.setData(res.usageNum);
+  }
+})
 }
 onMounted(() => {
 });
@@ -287,6 +300,7 @@ onUnmounted(() => {
 });
 defineExpose({
   setcontentData,
+  setWaterGas
 });
 </script>
 

src/views/PaintShopView/View1/index.vue

@@ -36,6 +36,7 @@ import { calcWH } from '@/components/ts/selfAdaption'
 import { Offsite } from "@/store/module/offsite";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { getSensorByDept } from "@/http/PaintShopView/index";
+import {getconsumeDetail} from '@/http/energyConsume'
 import bottom from "./bottom.vue"
 import top from "./top.vue"
 import { useI18n } from 'vue-i18n'
@@ -77,6 +78,15 @@ async function getSensorByDeptfun() {
     bottomref.value.setcontentData(result.data)
   }
 }
+
+async function getconsumeDetailfun(){
+  let result:any = await getconsumeDetail()
+ 
+  if(result.code==200){
+    bottomref.value.setWaterGas(result.data)
+  }
+}
+
 function getWebsocket(val) {
   // headerref.value.HeadergetWebsocket(val)
   try {
@@ -108,6 +118,7 @@ onMounted(() => {
     }, 1000);
   })
   getSensorByDeptfun()
+  getconsumeDetailfun()
   connectWebsocket(null, null, getWebsocket, errWebsocket);
 })
 onUnmounted(() => {

src/views/energyConsumeJixiefenchang/content/chart/water.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wang-vue-worke:\demo\daping\src\views\energyConsume\content\chart\water.vue
+ * @FilePath: \code\gitscreenFront\src\views\energyConsumeJixiefenchang\content\chart\water.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-14 13:24:12
@@ -9,13 +9,13 @@
 -->
 
 <template>
-    <div class="waterborder">
-  <border4 ref="refborder4">
+    <div class="gasborder">
+  <border6 ref="refborder4">
       <template v-slot>
         <!-- <h1>{{props.title}}</h1> -->
-        <div ref="water"></div>
+        <div ref="gas" ></div>
       </template>
-  </border4>
+  </border6>
   </div>
 </template>
 
@@ -23,19 +23,17 @@
 import {getCurrentInstance, onMounted, reactive, ref} from "vue"
 import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
 import 'echarts-liquidfill'
-
-import border4 from "@/components/borderBox/border4.vue"
+import border6 from "@/components/borderBox/border6.vue";
 const { proxy } = getCurrentInstance() as any;
 let props=defineProps<{
       title:string,
-      data:any
       }>()
-let water=ref()
+let gas=ref()
 
 let refborder4=ref()
 
 const echartsData = reactive<EDataPerson>({
-    water:{
+    gas:{
       div:null,
       data:null,
       title:'',
@@ -43,22 +41,24 @@ const echartsData = reactive<EDataPerson>({
   },
 })
 
-const setData=()=>{
+const setData=(value:any)=>{
   
-    echartsData.water!.div=water.value
-  echartsData.water!.title=props.title
-  echartsData.water!.data=({
+  echartsData.gas!.div=gas.value
+  echartsData.gas!.title=props.title
+  echartsData.gas!.data=({
           title: {
             // 标题
-            text: echartsData.water!.title,
+            text: echartsData.gas!.title,
             textStyle:{
           color:'#fff',
           fontSize:20
-            }
+            },
+            top:'2%'
           },
            series: [{
     type: 'liquidFill',
     radius: '80%', //水球大小
+    shape:'rect',
     center: ['50%', '50%'],
     waveAnimation: true,
     color: [
@@ -95,7 +95,9 @@ const setData=()=>{
           fontWeight: 'bold',
           color: '#fff',
         },
-        formatter:props.data
+        formatter:function(params){
+          return value
+        }
       },
       
     },
@@ -109,8 +111,7 @@ const setData=()=>{
             }],
         })
 
-
-change(echartsData.water)
+change(echartsData.gas)
 }
 
 const change = (item:EDataPersonItem) => {
@@ -123,32 +124,32 @@ item.box = Ebox
 };
 
 function setchartWH(width:any,height:any){
-    echartsData.water!.div=water.value
-    water.value.style.height=height+'px'
-    water.value.style.width=width+'px'
+    // echartsData.water!.div=water.value
+    gas.value.style.height=height-20+'px'
+    gas.value.style.width=width+'px'
   
   refborder4.value.resetWH()
-if(echartsData.water.box){
-  echartsData.water.box.resize()
+if(echartsData.gas.box){
+  echartsData.gas.box.resize()
 }
 
 }
 onMounted(() => {
-    setData()
+  // setData()
 })
 
 // return{setchartWH}
 defineExpose({
   setchartWH,
-//   setData
+  setData
 })
 
 </script>
 
 <style scoped>
-.waterBox{
-    border-radius: 50%;
-    background-color: #526DC1;
+.gasBox{
+    /* border-radius: 50%; */
+    background-color: #8CE78D;
     color: #fff;
     display: flex;
     justify-content: center;
@@ -156,10 +157,10 @@ defineExpose({
     margin: 20px;
     font-size: 20px;
 }
-.waterborder{
+.gasborder{
     position: relative;
 }
-.waterborder h1{
+.gasborder h1{
     position: absolute;
     top: 20px;
     left:20px;

src/views/energyConsumeJixiefenchang/content/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \gitscreenFront\src\views\energyConsumeJixiefenchang\content\top.vue
+ * @FilePath: \code\gitscreenFront\src\views\energyConsumeJixiefenchang\content\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -23,7 +23,8 @@
             :option="gasOption.option"
             ref="ratio"
           ></chart>
-          <gas ref="gasref" :title="t('messages.GasConsumption_2023JiXie')"></gas>
+          <gas ref="gasref" :title="t('messages.gasto2023')"></gas>
+          <water ref="waterref" :title="t('messages.waterto2023')"></water>
         </div>
       </el-col>
     </el-row>
@@ -40,6 +41,7 @@ import chart from "./chart/chartRatio.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import gas from "./chart/gas.vue";
+import water from "./chart/water.vue";
 import { useI18n } from 'vue-i18n'
 let {t} = useI18n();
 const store = useEnergyConsumeStore();
@@ -47,6 +49,7 @@ const router = useRouter();
 
 let ratio = ref();
 let gasref = ref();
+let waterref = ref();
 
 let props = defineProps<{
   width: number;
@@ -155,8 +158,9 @@ function reset(val: any) {
 const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 4, 0);
   //修改高度
-  ratio.value.setchartWH(a.oWidth * 3, a.oHeight);
+  ratio.value.setchartWH(a.oWidth * 2, a.oHeight);
   gasref.value.setchartWH(a.oWidth-20, a.oHeight);
+  waterref.value.setchartWH(a.oWidth-20, a.oHeight);
 };
 const clickPowerChart = () => {
   router.push({
@@ -301,9 +305,29 @@ function changeGas(val) {
     }
     
   });
-//   gasOption.option.xAxis.data=x
-//   gasOption.option.series[0].data=y
-//   gas1.value.changeData(gasOption.option)
+}
+  watch(
+  () => store.nowYearWater,
+  (newVal, oldVal) => {
+    if (!newVal) {
+      return;
+    } else {
+      if (newVal.length == 0) {
+        return;
+      }
+    }
+    changeWater(newVal);
+  },
+  { deep: true, flush: "post" }
+);
+function changeWater(val) {
+  val.forEach((res) => {
+    if(res.deptName=='生产区'){
+      waterref.value.setData(res.usageNum);
+    }
+    
+  });
+ 
 }
 onMounted(() => {