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

This commit is contained in:
shijing 2023-09-04 10:58:58 +08:00
parent ae7cf80c64
commit f14a2c2682
9 changed files with 299 additions and 112 deletions

View File

@ -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

View File

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
public/img/bbmg_jy.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -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>

View File

@ -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>

View File

@ -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-col :span="24" class="panel_item">
<span class="panel_label">
<img src="/img/elec.png" style="height: 24px" />
动力电消耗</span>
<el-row :gutter="16" style="height: 72px;margin-top: 4px">
<el-col :span="12" class="panel_item">
<div class="panel_label"><img src="/img/elec.png" style="height: 24px;vertical-align:middle;"/>动力电消耗</div>
<div class="pannel_number">
<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-col :span="24" class="panel_item">
<span class="panel_label">
<img src="/img/coal.png" style="height: 24px" />
原煤消耗
</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>
<el-row :gutter="16" style="height: 72px;margin-top: 4px">
<el-col :span="12" class="panel_item">
<div class="panel_label"><img src="/img/water.png" style="height: 24px;vertical-align:bottom;" />工业水消耗</div>
<div class="pannel_number">
<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">
<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-col :span="24" class="panel_item">
<span class="panel_label">
<img src="/img/cair.png" style="height: 24px" />
压缩空气消耗</span>
<el-col :span="12" class="panel_item">
<div class="panel_label"><img src="/img/cair.png" style="height: 24px;vertical-align:bottom;" />压缩空气消耗</div>
<div class="pannel_number">
<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-col :span="24" class="panel_item">
<span class="panel_label">
<img src="/img/elec.png" style="height: 24px" />
单位产品电耗</span>
<el-row :gutter="16" style="height: 72px;margin-top: 4px">
<el-col :span="12" class="panel_item">
<div class="panel_label"><img src="/img/elec.png" style="height: 24px;vertical-align:middle;" />单位产品电耗</div>
<div class="pannel_number">
<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-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item">
<span class="panel_label">
<img src="/img/total_production.png" style="height: 24px" />
产品产量</span>
<el-col :span="12" class="panel_item">
<div class="panel_label"><img src="/img/total_production.png" style="height: 24px;vertical-align:middle;" />产品产量</div>
<div class="pannel_number">
<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-col :span="24" class="panel_item">
<span class="panel_label">
<img src="/img/run_rate.png" style="height: 24px" />
运转率</span>
<el-row :gutter="16" style="height: 72px;margin-top: 4px">
<el-col :span="12" class="panel_item">
<div class="panel_label"><img src="/img/run_rate.png" style="height: 24px;vertical-align:middle;" /> 运转率</div>
<div class="pannel_number">
<span class="panel_value">{{ sectionData.run_rate }}</span>
<span class="panel_unit">%</span>
<span class="panel_unit">(%)</span>
</div>
</el-col>
</el-row>
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item" v-if="showKgcet">
<span class="panel_label">
<img src="/img/coal.png" style="height: 24px" />
单位产品标煤耗
</span>
<el-col :span="12" class="panel_item" v-if="showKgcet">
<div class="panel_label"><img src="/img/coal.png" style="height: 24px;vertical-align:bottom;"/>单位产品标煤耗</div>
<div class="pannel_number">
<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.setChart('chart6');
this.chart5Option = Object.assign({}, this.basicOption)
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;
font-size: 18px;
padding-left: 1em;
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 {

View File

@ -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",
// },
],
},
],