账号信息中个人打卡记录的处理

.env.development

@@ -8,9 +8,9 @@ VUE_APP_TITLE = '曲阳金隅安全智能管控平台'
 # 接口地址
 #VUE_APP_API_BASEURL = http://1.203.161.103:2800/api
 #VUE_APP_WS_API = 'ws://localhost:8000'
-VUE_APP_API_BASEURL = http://222.222.144.147:6013/api
+# VUE_APP_API_BASEURL = http://222.222.144.147:6013/api
 #VUE_APP_API_BASEURL = http://10.99.5.79:20309/api
-# VUE_APP_API_BASEURL = http://49.232.14.174:2226/api
+VUE_APP_API_BASEURL = http://49.232.14.174:2226/api
 # VUE_APP_API_BASEURL = http://127.0.0.1:2226/api
 VUE_APP_BASEURL = http://49.232.14.174:2226
 

.env.production

@@ -6,6 +6,8 @@ NODE_ENV = production
 VUE_APP_TITLE = '托克逊能源管理平台'
 
 # 接口地址
+# VUE_APP_API_BASEURL = http://222.222.144.147:6013/api
+# VUE_APP_BASEURL = http://222.222.144.147:6013 
 VUE_APP_API_BASEURL = http://49.232.14.174:2226/api
 VUE_APP_BASEURL = http://49.232.14.174:2226
 

public/index.html

@@ -32,7 +32,7 @@
 		<div id="app" class="aminui">
 			<div class="app-loading">
 				<div class="app-loading__logo">
-					<!-- <img src="img/bbmg.jpg"/> -->
+					<img src="img/bbmg.jpg"/>
 				</div>
 				<div class="app-loading__loader"></div>
 				<div class="app-loading__title"><%= VUE_APP_TITLE %></div>

src/layout/index.vue

@@ -4,7 +4,7 @@
 		<header class="adminui-header">
 			<div class="adminui-header-left">
 				<div class="logo-bar">
-					<!-- <img class="logo" src="img/bbmg1.png"> -->
+					<!-- <img class="logo" src="img/bbmg.png"> -->
 					<!-- <span>{{ $CONFIG.APP_NAME }}</span> -->
 					<img class="logo" :src="baseLogo">
 					<span>{{ baseName }}</span>

src/views/bigScreen/index_enm.vue

@@ -5,51 +5,39 @@
       <h1 class="title">托克逊建材厂能管系统</h1>
       <h2 class="title_right">数据更新: {{ updateTime }}</h2>
     </header>
-
-
     <div class="left_main animate__animated animate__zoomIn">
       <div class="panel">
         <div class="panel_title">本月全厂主要数据</div>
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
-          <el-col :span="24" class="panel_item">
+          <el-col :span="12" class="panel_item">
-            <span class="panel_label">
+            <div class="panel_label"><img src="/img/elec.png" style="height: 24px;vertical-align:middle;"/>动力电消耗</div>
-              <img src="/img/elec.png" style="height: 24px" />
+            <div class="pannel_number">
-              动力电消耗</span>
               <span class="panel_value">{{ factoryData.elec_consume }}</span>
-            <span class="panel_unit">KWH</span>
+              <span class="panel_unit">(kW·h)</span>
+            </div>
+          </el-col>
+          <el-col :span="12" class="panel_item">
+            <div class="panel_label"><img src="/img/coal.png" style="height: 24px;vertical-align:bottom;" />煤粉消耗</div>
+            <div class="pannel_number">
+              <span class="panel_value">{{ factoryData.pcoal_consume }}</span>
+              <span class="panel_unit">(t)</span>
+            </div>
           </el-col>
         </el-row>
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
-          <el-col :span="24" class="panel_item">
+          <el-col :span="12" class="panel_item">
-            <span class="panel_label">
+            <div class="panel_label"><img src="/img/water.png" style="height: 24px;vertical-align:bottom;" />工业水消耗</div>
-              <img src="/img/coal.png" style="height: 24px" />
+            <div class="pannel_number">
-              原煤消耗
-            </span>
-            <span class="panel_value">{{ factoryData.coal_consume }}</span>
-            <span class="panel_unit">T</span>
-          </el-col>
-        </el-row>
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
-          <el-col :span="24" class="panel_item">
-            <span class="panel_label">
-              <img src="/img/water.png" style="height: 24px" />
-              工业水消耗</span>
               <span class="panel_value">{{ factoryData.water_consume }}</span>
-            <span class="panel_unit">T</span>
+              <span class="panel_unit">(t)</span>
+            </div>
           </el-col>
-          <!-- <el-col :span="12" class="panel_item">
+          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
+            <div class="panel_label"><img src="/img/cair.png" style="height: 24px;vertical-align:bottom;" />压缩空气消耗</div>
-            <span class="panel_value">1000</span>
+            <div class="pannel_number">
-            <span class="panel_unit">KWH</span>
-          </el-col> -->
-        </el-row>
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
-          <el-col :span="24" class="panel_item">
-            <span class="panel_label">
-              <img src="/img/cair.png" style="height: 24px" />
-              压缩空气消耗</span>
               <span class="panel_value">{{ factoryData.cair_consume }}</span>
-            <span class="panel_unit">T</span>
+              <span class="panel_unit">(t)</span>
+            </div>
           </el-col>
         </el-row>
       </div>
@@ -69,46 +57,36 @@
     <div class="right_main">
       <div class="panel">
         <div class="panel_title">今日工段主要数据-{{ activeSectionName }}</div>
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
-          <el-col :span="24" class="panel_item">
+          <el-col :span="12" class="panel_item">
-            <span class="panel_label">
+            <div class="panel_label"><img src="/img/elec.png" style="height: 24px;vertical-align:middle;" />单位产品电耗</div>
-              <img src="/img/elec.png" style="height: 24px" />
+            <div class="pannel_number">
-              单位产品电耗</span>
               <span class="panel_value">{{ sectionData.elec_consume_unit }}</span>
-            <span class="panel_unit">KWH/T</span>
+              <span class="panel_unit">(kW·h)</span>
+            </div>
           </el-col>
-        </el-row>
+          <el-col :span="12" class="panel_item">
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+            <div class="panel_label"><img src="/img/total_production.png" style="height: 24px;vertical-align:middle;" />产品产量</div>
-          <el-col :span="24" class="panel_item">
+            <div class="pannel_number">
-            <span class="panel_label">
-              <img src="/img/total_production.png" style="height: 24px" />
-              产品产量</span>
               <span class="panel_value">{{ sectionData.total_production }}</span>
-            <span class="panel_unit">T</span>
+              <span class="panel_unit">(t)</span>
+            </div>
           </el-col>
-          <!-- <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
-          </el-col> -->
         </el-row>
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
-          <el-col :span="24" class="panel_item">
+          <el-col :span="12" class="panel_item">
-            <span class="panel_label">
+            <div class="panel_label"><img src="/img/run_rate.png" style="height: 24px;vertical-align:middle;" /> 运转率</div>
-              <img src="/img/run_rate.png" style="height: 24px" />
+            <div class="pannel_number">
-              运转率</span>
               <span class="panel_value">{{ sectionData.run_rate }}</span>
-            <span class="panel_unit">%</span>
+              <span class="panel_unit">(%)</span>
+            </div>
           </el-col>
-        </el-row>
+          <el-col :span="12" class="panel_item" v-if="showKgcet">
-        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+            <div class="panel_label"><img src="/img/coal.png" style="height: 24px;vertical-align:bottom;"/>单位产品标煤耗</div>
-          <el-col :span="24" class="panel_item" v-if="showKgcet">
+            <div class="pannel_number">
-            <span class="panel_label">
-              <img src="/img/coal.png" style="height: 24px" />
-              单位产品标煤耗
-            </span>
               <span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
-            <span class="panel_unit">KGCE/T</span>
+              <span class="panel_unit">(kgce/t)</span>
+            </div>
           </el-col>
         </el-row>
       </div>
@@ -149,6 +127,7 @@
   </div>
 </template>
 <script>
+import tool from '@/utils/tool';
 import * as echarts from "echarts";
 import * as BABYLON from "babylonjs"
 import * as BABYLON_GUI from "babylonjs-gui"
@@ -159,6 +138,12 @@ import 'animate.css';
 export default {
   data() {
     return {
+      query:{
+        year_s:2023,
+        month_s:8,
+        type:'month_s',
+        page:0
+      },
       factoryData: { 'coal_consume': 100, 'elec_consume': 100, 'water_consume': 100, 'cair_consume': 100 },
       sectionData: { 'elec_consume_unit': 0, 'total_production': 0, 'run_rate': 100, 'coal_consume_unit': 0 },
       initialAlpha: -Math.PI / 0.89,
@@ -185,19 +170,15 @@ export default {
       updateTime: '2023-08-17 16:00:00',
       basicOption: {
         backgroundColor: '',
-        tooltip: {},
-        // legend: {
-        //   data: ['销量'],
-        //   top: 0,
-        // },
         xAxis: {
           data: ['一月', '二月', '三月', '四月', '五月', '六月'],
         },
-        yAxis: {},
+        yAxis: { type: 'value'},
         series: [
           {
             name: '销量',
             type: 'bar',
+            barwidth:10,
             label: {
               show: true,
               position: 'top'
@@ -218,7 +199,7 @@ export default {
                 ])
               }
             },
-            data: [5, 20, 36, 10, 10, 20]
+            data: this.xAxisData
           }
         ],
         grid: { // 让图表占满容器
@@ -228,12 +209,27 @@ export default {
           bottom: "15%"
         }
       },
+      year_start:0,
+      end_time:'',
+      start_time:'',
+      xAxisData:[],
+      arrMonth:[],
+      legendData:['电石渣','原料磨','煤磨','回转窑','水泥磨','水泥包装'],
       chart1Option: {},
       chart2Option: {},
       chart3Option: {},
       chart4Option: {},
       chart5Option: {},
-      chart6Option: {}
+      chart6Option: {},
+      seriesData1:[0,0,0,0,0,0],
+      seriesData2:[0,0,0,0,0,0],
+      seriesData3:[0,0,0,0,0,0],
+      seriesData3_2:[0,0,0,0,0,0],
+      seriesData4:[0,0,0,0,0,0],
+      seriesData5:[0,0,0,0,0,0],
+      seriesData6:[0,0,0,0,0,0],
+      path:"ws://49.232.14.174:2226/ws/room/?token=",
+		  ws:null,
     }
   },
   mounted() {
@@ -245,9 +241,43 @@ export default {
       setTimeout(function () {
         that.initFactory();
       }, 1000);
-
     });
+    var myDate = new Date();
+    let year = myDate.getFullYear();
+    let month = myDate.getMonth()+1;
+    let month1= month>9?month:'0'+month;
+    let end_time  = year+'-'+month1+'-01 10:00:00';
+    let year_s=year;
+    if(month<6){
+      year_s = year-1;
+    }
+    let arr = [],xAxisData = [];
+    for (let i = 0; i < 6; i++) {
+        arr.push(month);
+        if(month === 1) {
+          month = 12; 
+        } else {
+          month--; 
+        }
+    } 
+    arr.reverse();
+    for(let i=0;i<6;i++){
+      let item = arr[i]+'月'
+      xAxisData.push(item);
+    }
     
+    let month0= arr[0]>9?arr[0]:'0'+arr[0];
+    let start_time = year_s+'-'+month0+'-01 10:00:00';
+    that.arrMonth = arr;
+    that.year_start = year_s;
+    that.xAxisData = xAxisData;
+    that.start_time = start_time;
+    that.end_time = end_time;
+    that.query.year_s = year;
+    that.query.month_s = month;
+    this.getFactoryData();
+    this.getSectionData();
+    this.init();
   },
   beforeUnmount() {
     // 性能优化
@@ -257,19 +287,146 @@ export default {
     }
   },
   methods: {
-    getFactoryData() {
+    init() { 
+      var that = this
+        // console.log(tool.cookie.get("TOKEN"))
+        if(typeof(WebSocket) === "undefined"){
+                alert("您的浏览器不支持socket")
+        }else{
+          // debugger;
+          this.ws = new WebSocket(this.path+tool.cookie.get("TOKEN")) 
+          //监听是否连接成功
+          this.ws.onopen = ()=> {
+            // debugger;
+            console.log("socket连接成功");
+                        setTimeout(()=>{
+              that.ws.send(JSON.stringify({'type': 'chat', 'msg': '你好admin', 'to': 'admin'}))
+            },5000)
+          }
             
+          //接听服务器发回的信息并处理展示
+          this.ws.onmessage = (msg)=>{
+            let data  = JSON.parse(msg.data) 
+            console.log(data)
+
+          };
+         
+         // 监听并处理error事件
+         this.ws.onerror = function(error) {
+          console.log('ws断开,尝试重连')
+          setTimeout(()=>{
+            this.ws = null;
+            this.init()
+          }, 5000)
+         }
+        }
+         
+    } ,  
+    getMessage(msg) {
+      debugger;
+      console.log(msg);
+    }, 
+    close() {
+      if (this.ws) {
+        this.ws.close();
+        this.ws = null;
+        console.log("socket已经关闭");
+      }
+    },
+    compare(property) {
+        return function (a, b) {
+            return a[property] - b[property];
+        }
+    },
+    getFactoryData() {
+      var that = this;
+      
+      that.$API.enm.enstat2.req(that.query).then((res) => {
+        if(res.length>0){
+            that.factoryData = res[0]
+        }else{}
+      })
+      //图表数据
+      let obj = {};
+      obj.type = 'month_s';
+      obj.start_time = that.start_time;
+      obj.end_time = that.end_time;
+      obj.page=0;
+      this.$API.enm.enstat2.req(obj).then((res1) => {
+            let list0 = res1.sort(this.compare('month_s'));
+            let list = list0.sort(this.compare('year_s'));
+            let seriesData1 = [0,0,0,0,0,0],
+                seriesData2 = [0,0,0,0,0,0],
+                seriesData3 = [0,0,0,0,0,0],
+                seriesData3_2 = [0,0,0,0,0,0];
+            list.forEach(item=>{
+                let index = that.arrMonth.indexOf(item.month_s);
+                seriesData1[index] = Number(item.elec_consume)
+                seriesData2[index] = Number(item.pcoal_consume)
+                seriesData3[index] = Number(item.water_consume)
+                seriesData3_2[index] = Number(item.cair_consume)
+            })
+            that.seriesData1=seriesData1;
+            that.seriesData2=seriesData2;
+            that.seriesData3=seriesData3;
+            that.seriesData3_2=seriesData3_2;
+            that.initCharts();
+      })
     },
     getSectionData() {
-
+      var that = this;
+      let obj = {};
+      obj.type = 'month_s';
+      obj.start_time = that.start_time;
+      obj.end_time = that.end_time;
+      obj.mgroup='3346520558031773696';
+      obj.page=0;
+      this.$API.enm.enstat.req(obj).then((res) => {
+        let list0 = res.sort(this.compare('month_s'));
+        let list = list0.sort(this.compare('year_s'));
+        let seriesData4 = [0,0,0,0,0,0],
+            seriesData5 = [0,0,0,0,0,0],
+            seriesData6 = [0,0,0,0,0,0];
+        list.forEach(item=>{
+            let index = that.arrMonth.indexOf(item.month_s);
+            seriesData4[index] = Number(item.elec_consume_unit)
+            seriesData5[index] = Number(item.total_production)
+            seriesData6[index] = Number(item.run_rate)
+        })
+        that.seriesData4=seriesData4;
+        that.seriesData5=seriesData5;
+        that.seriesData6=seriesData6;
+        that.initCharts1();
+      })
     },
     initCharts() {
+      let that = this;
+     
       // 初始化所有表格
-      this.setChart('chart1');
+      let data11 = that.seriesData1;
+      that.chart1Option =  Object.assign({}, that.basicOption)
+      that.chart1Option.xAxis.data = that.xAxisData;
+      that.chart1Option.series = [
+        {
+          name: 'Forest',
+          type: 'bar',
+          barWidth: 15,
+          label: {
+            show: true,
+            position: 'top'
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: that.seriesData1
+      }]
+      that.setChart('chart1',that.chart1Option);
       this.chart2Option = Object.assign({}, this.basicOption)
-      this.chart2Option.series[0].type = 'line'
+      this.chart2Option.series[0].type = 'line';
+      this.chart2Option.series[0].data =  that.seriesData2;
       this.setChart('chart2', this.chart2Option);
       this.chart3Option = Object.assign({}, this.basicOption)
+      that.chart3Option.xAxis.data = that.xAxisData;
       this.chart3Option.series = [
         {
           name: 'Forest',
@@ -281,7 +438,7 @@ export default {
           emphasis: {
             focus: 'series'
           },
-          data: [320, 332, 301, 334, 390, 380]
+          data: that.seriesData3
         },
         {
           name: 'Steppe',
@@ -289,14 +446,25 @@ export default {
           emphasis: {
             focus: 'series'
           },
-          data: [220, 182, 191, 234, 290, 280]
+          data: that.seriesData3_2
         }]
       this.setChart('chart3', this.chart3Option);
+    },
+    initCharts1() {
+      let that = this;
       this.chart4Option = Object.assign({}, this.basicOption)
-      this.chart4Option.series[0].smooth = true
+      this.chart4Option.series[0].type = 'line';
+      this.chart4Option.series[0].data =  that.seriesData4;
       this.setChart('chart4', this.chart4Option);
-      this.setChart('chart5');
+      this.chart5Option = Object.assign({}, this.basicOption)
-      this.setChart('chart6');
+      this.chart5Option.series[0].type = 'line';
+      this.chart5Option.series[0].data =  that.seriesData5;
+      this.setChart('chart5', this.chart5Option);
+      this.chart6Option = Object.assign({}, this.basicOption)
+      this.chart6Option.series[0].type = 'line';
+      this.chart6Option.series[0].data =  that.seriesData6;
+      this.setChart('chart6', this.chart6Option);
+      
     },
     addListener() {
       var that = this;
@@ -379,7 +547,7 @@ export default {
       // 根据name resize chart
       var myChart = echarts.getInstanceByDom(document.getElementById(name));
       if (myChart != undefined) {
-        console.log(name + ' :resize')
+        // console.log(name + ' :resize')
         myChart.resize();
       }
     },
@@ -392,8 +560,13 @@ export default {
       if (option == null) {
         option = Object.assign({}, this.basicOption)
       }
-      myChart.setOption(option);
+      // debugger;
 
+      setTimeout(() => {
+            try {
+              myChart.setOption(option);
+            } catch (error) {}
+        }, 500)    
     },
     initFactory() {
       var that = this;
@@ -572,11 +745,11 @@ export default {
 
               rect1.linkWithMesh(mesh);
               rect1.linkOffsetY = -30;
-              console.log(rect1)
+              // console.log(rect1)
               rect1.onPointerDownObservable.add(() => {
                 var mesh = rect1.linkedMesh;
                 if (camera.target != mesh.position) {
-                  console.log('fly to')
+                  // console.log('fly to')
                   // 计算新的相机位置
                   var cameraPosition = new BABYLON.Vector3(
                     mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
@@ -716,7 +889,10 @@ export default {
       });
 
     },
-  }
+  },
+  unmounted() {
+    this.close();
+  },
 }
 </script>
 <style scoped>
@@ -827,8 +1003,6 @@ header {
 }
 
 .panel_item {
-  display: flex;
-  align-items: center;
   color: #fff;
   padding: 6px;
   background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335));
@@ -836,21 +1010,24 @@ header {
 
 .panel_label {
   font-size: 16px;
-  flex: 3;
+  margin-bottom: 6px;
+}
+.pannel_number{
+  position: relative;
 }
-
 .panel_value {
-  flex: 2;
+  padding-left: 1em;
-  font-size: 18px;
+  font-size: 22px;
   font-weight: bold;
   text-align: right;
 }
 
 .panel_unit {
-  flex: 1;
+  right: 5px;
   color: #aebfe9;
   font-size: 16px;
   text-align: right;
+  position: absolute;
 }
 
 .chart {

src/views/userCenter/index.vue

@@ -57,9 +57,11 @@ import { defineAsyncComponent } from "vue";
 export default {
   name: "userCenter",
   components: {
+    
     account: defineAsyncComponent(() => import("./user/account")),
     seting: defineAsyncComponent(() => import("./user/seting")),
-    pushSettings: defineAsyncComponent(() => import("./user/pushSettings"))
+    pushSettings: defineAsyncComponent(() => import("./user/pushSettings")),
+    // clockRecord: defineAsyncComponent(() => import("./user/clock_record")),
   },
   data() {
     return {
@@ -82,6 +84,12 @@ export default {
               title: "修改密码",
               component: "pushSettings",
             },
+            // {
+            //   icon: "el-icon-lock",
+            //   title: "打卡记录",
+            //   component: "clockRecord",
+            // },
+
           ],
         },
       ],