zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改凌源首页内容

This commit is contained in:
zty 2025-08-28 16:17:32 +08:00
parent 605d05e7c0
commit 5c13647aba
7 changed files with 1029 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/config/route.js
View File

@ -98,7 +98,7 @@ const routes = [
affix: true, affix: true,
perms: ["dashboard_ly"], perms: ["dashboard_ly"],
}, },
component: "home/enm_home", component: "home/enm_home_ly",
}, },
{ {
name: "dashboard_gx", name: "dashboard_gx",

26
src/views/enm_kilnbase/report_lybh.vue
View File

@ -741,8 +741,11 @@ export default {
return that.$API.enm.mpointstat.list.req(params4); return that.$API.enm.mpointstat.list.req(params4);
}).then((res5) => { }).then((res5) => {
if (res5.length > 0) { if (res5.length > 0) {
let data5 = res5[0]; // let data5 = res5[0];
that.tableDatas[4][2] = (data5.val/that.tableDatas[0][2]).toFixed(2); // that.tableDatas[4][2] = (data5.val/that.tableDatas[0][2]).toFixed(2);
let data5 = res5[0];
let calculate = ((data5.val/that.tableDatas[0][2])*1000);
that.tableDatas[4][2] = (calculate > 135 ? 135 : calculate).toFixed(2);
} }
}); });
let params5 = {}; let params5 = {};
@ -837,7 +840,9 @@ export default {
}).then((res6) => { }).then((res6) => {
if (res6.length > 0) { if (res6.length > 0) {
let data6 = res6[0]; let data6 = res6[0];
that.tableDatas[4][5] = (data6.val/that.tableDatas[0][5]).toFixed(2); let calculate = ((data6.val/that.tableDatas[0][5])*1000);
that.tableDatas[4][5] = (calculate > 135 ? 135 : calculate).toFixed(2);
} }
}); });
//月 //月
@ -876,7 +881,8 @@ export default {
}).then((res7) => { }).then((res7) => {
if (res7.length > 0) { if (res7.length > 0) {
let data7 = res7[0]; let data7 = res7[0];
that.tableDatas[4][4] = (data7.val/that.tableDatas[0][4]).toFixed(2); let calculate = ((data7.val/that.tableDatas[0][4])*1000);
that.tableDatas[4][4] = (calculate > 135 ? 135 : calculate).toFixed(2);
} }
}) })
}); });
@ -960,7 +966,8 @@ export default {
}).then((res)=>{ }).then((res)=>{
if (res.length > 0) { if (res.length > 0) {
let data = res[0]; let data = res[0];
that.tableDatas[4][2] = (data.val/that.tableDatas[0][2]).toFixed(2); let calculate = ((data.val/that.tableDatas[0][2])*1000);
that.tableDatas[4][2] = (calculate > 135 ? 135 : calculate).toFixed(2);
} }
}) })
}, },
@ -1045,7 +1052,8 @@ export default {
}).then((res)=>{ }).then((res)=>{
if (res.length > 0) { if (res.length > 0) {
let data = res[0]; let data = res[0];
that.tableDatas[4][4] = (data.val/that.tableDatas[0][4]).toFixed(2); let calculate = ((data.val/that.tableDatas[0][2])*1000);
that.tableDatas[4][4] = (calculate > 135 ? 135 : calculate).toFixed(2);
} }
} }
) )
@ -1130,8 +1138,12 @@ export default {
return that.$API.enm.mpointstat.list.req(params1); return that.$API.enm.mpointstat.list.req(params1);
}).then((res)=>{ }).then((res)=>{
if (res.length > 0) { if (res.length > 0) {
// let data = res[0];
// that.tableDatas[4][5] = (data.val/that.tableDatas[0][4]).toFixed(2);
let data = res[0]; let data = res[0];
that.tableDatas[4][5] = (data.val/that.tableDatas[0][4]).toFixed(2); let calculate = ((data.val/that.tableDatas[0][4])*1000);
that.tableDatas[4][5] = (calculate > 135 ? 135 : calculate).toFixed(2);
} }
}) })
}, },

4
src/views/enm_rm/handoverLog.vue
View File

@ -292,7 +292,7 @@
<td class="numCell"></td> <td class="numCell"></td>
<td class="numCell"></td> <td class="numCell"></td>
</tr> </tr>
<tr v-if="sflogexpList.length > 0"> <tr v-if="sflogexpList && sflogexpList.length > 0">
<td <td
class="numCell" class="numCell"
:rowspan="sflogexpList.length + 1" :rowspan="sflogexpList.length + 1"
@ -424,7 +424,7 @@ export default {
that.$API.enm.enstat that.$API.enm.enstat
.req({ type: "sflog", sflog: id, page: 0 }) .req({ type: "sflog", sflog: id, page: 0 })
.then((res) => { .then((res) => {
if (res.length > 0) { if (res) {
that.reportItem = res[0]; that.reportItem = res[0];
} }
console.log(res[0]); console.log(res[0]);

6
src/views/enm_rm/logDetail.vue
View File

@ -144,7 +144,7 @@
:rules="rules" :rules="rules"
label-width="150px" label-width="150px"
label-position="right" label-position="right"
v-if="mpointOptions.length > 0" v-if="mpointOptions"
> >
<template <template
v-for="item in mpointOptions" v-for="item in mpointOptions"
@ -729,7 +729,7 @@ export default {
form.enabled = 1; form.enabled = 1;
form.mgroup = that.mgroupId; form.mgroup = that.mgroupId;
that.$API.enm.mpoint.list.req(form).then((res) => { that.$API.enm.mpoint.list.req(form).then((res) => {
if (res.length > 0) { if (res) {
that.mpointOptions = []; that.mpointOptions = [];
res.forEach((item) => { res.forEach((item) => {
item.mpFormVal = null; item.mpFormVal = null;
@ -738,7 +738,7 @@ export default {
}); });
that.mpointOptions.forEach((item) =>{ that.mpointOptions.forEach((item) =>{
that.$API.enm.mpoint.stat.req({mpoint: item.id, sflog: this.form.id, page: 0}).then(res=>{ that.$API.enm.mpoint.stat.req({mpoint: item.id, sflog: this.form.id, page: 0}).then(res=>{
if(res.length>0){ if(res){
item.mpFormVal = res[0].val; item.mpFormVal = res[0].val;
}else{ }else{
item.mpFormVal = 0; item.mpFormVal = 0;

6
src/views/enm_rm_copy/logDetail.vue
View File

@ -144,7 +144,7 @@
:rules="rules" :rules="rules"
label-width="150px" label-width="150px"
label-position="right" label-position="right"
v-if="mpointOptions.length > 0" v-if="mpointOptions"
> >
<template <template
v-for="item in mpointOptions" v-for="item in mpointOptions"
@ -730,7 +730,7 @@ export default {
form.enabled = 1; form.enabled = 1;
form.mgroup = that.mgroupId; form.mgroup = that.mgroupId;
that.$API.enm.mpoint.list.req(form).then((res) => { that.$API.enm.mpoint.list.req(form).then((res) => {
if (res.length > 0) { if (res) {
that.mpointOptions = []; that.mpointOptions = [];
res.forEach((item) => { res.forEach((item) => {
item.mpFormVal = null; item.mpFormVal = null;
@ -739,7 +739,7 @@ export default {
}); });
that.mpointOptions.forEach((item) =>{ that.mpointOptions.forEach((item) =>{
that.$API.enm.mpoint.stat.req({mpoint: item.id, sflog: this.form.id, page: 0}).then(res=>{ that.$API.enm.mpoint.stat.req({mpoint: item.id, sflog: this.form.id, page: 0}).then(res=>{
if(res.length>0){ if(res){
item.mpFormVal = res[0].val; item.mpFormVal = res[0].val;
}else{ }else{
item.mpFormVal = 0; item.mpFormVal = 0;

41
src/views/home/enm_home_ly.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div v-if="pageLoading">
<el-main>
<el-card shadow="never">
<el-skeleton :rows="1"></el-skeleton>
</el-card>
<el-card shadow="never" style="margin-top: 15px;">
<el-skeleton></el-skeleton>
</el-card>
</el-main>
</div>
<widgets @on-mounted="onMounted"></widgets>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const widgets = defineAsyncComponent(() => import('./widgets/index_enm_ly.vue'));
export default {
name: "dashboard",
components: {
widgets
},
data(){
return {
pageLoading: true,
}
},
mounted(){
},
methods: {
onMounted(){
this.pageLoading = false
}
}
}
</script>
<style>
</style>

960
src/views/home/widgets/index_enm_ly.vue Normal file
View File

@ -0,0 +1,960 @@
<template>
<div class="widgets-home" ref="main">
<div class="widgets-content">
<div class="widgets" ref="widgets">
<div class="widgets-wrapper">
<!-- <div :class="bindClass()">XXXXXXXX超过预设值，请及时处理</div> -->
<el-row :gutter="6" style="padding: 10px">
<el-col>
<el-card
header="产量及完成度"
style="border-radius: 5px; box-shadow: none"
>
<div class="itemsWrap">
<div class="items" v-if="monthData.电石渣">
<div class="item-number">
{{
monthData.电石渣
.total_production
}}
</div>
<div class="item-name">
月电石渣产量
</div>
<el-progress
:percentage="
monthData.电石渣.run_rate
"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
monthData.电石渣.run_rate
}}%</span
>
</el-progress>
</div>
<div
class="items"
v-if="monthData.石灰石破碎"
>
<div class="item-number">
{{
monthData.石灰石破碎
.total_production
}}
</div>
<div class="item-name">
月石灰石破碎量
</div>
<el-progress
:percentage="
monthData.石灰石破碎.run_rate
"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
monthData.石灰石破碎
.run_rate
}}%</span
>
</el-progress>
</div>
<div class="items" v-if="monthData.原料磨">
<div class="item-number">
{{
monthData.原料磨
.total_production
}}
</div>
<div class="item-name">月生料产量</div>
<el-progress
:percentage="
monthData.原料磨.run_rate
"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
monthData.原料磨.run_rate
}}%</span
>
</el-progress>
</div>
<div class="items" v-if="monthData.回转窑">
<div class="item-number">
{{
monthData.回转窑
.total_production
}}
</div>
<div class="item-name">月熟料产量</div>
<el-progress
:percentage="
monthData.回转窑.run_rate
"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
monthData.回转窑.run_rate
}}%</span
>
</el-progress>
</div>
<div class="items" v-if="monthData.水泥磨">
<div
class="item-number"
v-if="monthData.水泥磨"
>
{{
monthData.水泥磨
.total_production
}}
</div>
<div class="item-name">月水泥产量</div>
<el-progress
:percentage="
monthData.水泥磨.run_rate
"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
monthData.水泥磨.run_rate
}}%</span
>
</el-progress>
</div>
<div
class="items"
v-if="monthData.余热发电"
>
<div class="item-number">
{{
monthData.余热发电
.total_production
}}
</div>
<div class="item-name">
月余热发电量
</div>
<el-progress
:percentage="
monthData.余热发电.run_rate
"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
monthData.余热发电.run_rate
}}%</span
>
</el-progress>
</div>
<div style="display: inline-block">
<div
class="items"
v-if="yearData.电石渣"
>
<div class="item-number">
{{
yearData.电石渣
.total_production
}}
</div>
<div class="item-name">
本年累计电石渣产量
</div>
<el-progress
:percentage="
yearData.电石渣.run_rate
"
status="success"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
yearData.电石渣
.run_rate
}}%</span
>
</el-progress>
</div>
<div
class="items"
v-if="yearData.石灰石破碎"
>
<div class="item-number">
{{
yearData.石灰石破碎
.total_production
}}
</div>
<div class="item-name">
本年累计石灰石破碎量
</div>
<el-progress
:percentage="
yearData.石灰石破碎.run_rate
"
status="success"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
yearData.石灰石破碎
.run_rate
}}%</span
>
</el-progress>
</div>
<div
class="items"
v-if="yearData.原料磨"
>
<div class="item-number">
{{
yearData.原料磨
.total_production
}}
</div>
<div class="item-name">
本年累计生料产量
</div>
<el-progress
:percentage="
yearData.原料磨.run_rate
"
status="success"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
yearData.原料磨
.run_rate
}}%</span
>
</el-progress>
</div>
<div
class="items"
v-if="yearData.回转窑"
>
<div class="item-number">
{{
yearData.回转窑
.total_production
}}
</div>
<div class="item-name">
本年累计熟料产量
</div>
<el-progress
:percentage="
yearData.回转窑.run_rate
"
status="success"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
yearData.回转窑
.run_rate
}}%</span
>
</el-progress>
</div>
<div
class="items"
v-if="yearData.水泥磨"
>
<div class="item-number">
{{
yearData.水泥磨
.total_production
}}
</div>
<div class="item-name">
本年累计水泥产量
</div>
<el-progress
:percentage="
yearData.水泥磨.run_rate
"
status="success"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
yearData.水泥磨
.run_rate
}}%</span
>
</el-progress>
</div>
<div
class="items"
v-if="yearData.余热发电"
>
<div class="item-number">
{{
yearData.余热发电
.total_production
}}
</div>
<div class="item-name">
本年累计余热发电量
</div>
<el-progress
:percentage="
yearData.余热发电.run_rate
"
status="success"
:text-inside="true"
:stroke-width="14"
>
<span class="item-percent"
>{{
yearData.余热发电
.run_rate
}}%</span
>
</el-progress>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col>
<el-card
header="能耗"
style="border-radius: 5px; box-shadow: none"
>
<div class="itemsWrap">
<div class="items" v-if="monthData.电石渣">
<div class="item-number">
{{
monthData.电石渣
.elec_consume_unit
}}
</div>
<div class="item-name">
月电石渣分布电耗
</div>
</div>
<div
class="items"
v-if="monthData.石灰石破碎"
>
<div class="item-number">
{{
monthData.石灰石破碎
.elec_consume_unit
}}
</div>
<div class="item-name">
月石灰石破碎分布电耗
</div>
</div>
<div class="items" v-if="monthData.原料磨">
<div class="item-number">
{{
monthData.原料磨
.elec_consume_unit
}}
</div>
<div class="item-name">
月生料分布电耗
</div>
</div>
<div class="items" v-if="monthData.回转窑">
<div class="item-number">
{{
monthData.回转窑
.elec_consume_unit
}}
</div>
<div class="item-name">
月熟料分布电耗
</div>
</div>
<div class="items" v-if="monthData.回转窑">
<div class="item-number">
{{
monthData.回转窑
.coal_consume_unit
}}
</div>
<div class="item-name">
月熟料单位标煤耗
</div>
</div>
<div style="display: inline-block">
<div
class="items"
v-if="monthData.回转窑"
>
<div class="item-number">
{{
monthData.回转窑
.celec_consume_unit
}}
</div>
<div class="item-name">
熟料月综合电耗
</div>
</div>
<div
class="items"
v-if="monthData.回转窑"
>
<div class="item-number">
{{
monthData.回转窑
.cen_consume_unit
}}
</div>
<div class="item-name">
熟料月综合能耗
</div>
</div>
<div
class="items"
v-if="monthData.水泥磨"
>
<div class="item-number">
{{
monthData.水泥磨
.elec_consume_unit
}}
</div>
<div class="item-name">
月水泥粉磨分布电耗
</div>
</div>
<div
class="items"
v-if="monthData.水泥磨"
>
<div class="item-number">
{{
monthData.水泥磨
.cen_consume_unit
}}
</div>
<div class="item-name">
水泥月综合能耗
</div>
</div>
<div
class="items"
v-if="monthData.余热发电"
>
<div class="item-number">
{{
monthData.余热发电
.elec_consume
}}
</div>
<div class="item-name">
月余热发电电耗
</div>
</div>
<div
class="items"
v-if="monthData.余热发电"
>
<div class="item-number">
{{
monthData.余热发电
.total_production
}}
</div>
<div class="item-name">
月余热发电电量
</div>
</div>
</div>
</div>
<div class="itemsWrap">
<div class="items" v-if="yearData.电石渣">
<div class="item-number">
{{
yearData.电石渣
.elec_consume_unit
}}
</div>
<div class="item-name">
本年度电石渣分布电耗
</div>
</div>
<div
class="items"
v-if="yearData.石灰石破碎"
>
<div class="item-number">
{{
yearData.石灰石破碎
.elec_consume_unit
}}
</div>
<div class="item-name">
本年度石灰石破碎分布电耗
</div>
</div>
<div class="items" v-if="yearData.原料磨">
<div class="item-number">
{{
yearData.原料磨
.elec_consume_unit
}}
</div>
<div class="item-name">
本年度生料分布电耗
</div>
</div>
<div class="items" v-if="yearData.回转窑">
<div class="item-number">
{{
yearData.回转窑
.elec_consume_unit
}}
</div>
<div class="item-name">
本年度熟料分布电耗
</div>
</div>
<div class="items" v-if="yearData.回转窑">
<div class="item-number">
{{
yearData.回转窑
.coal_consume_unit
}}
</div>
<div class="item-name">
本年度熟料单位标煤耗
</div>
</div>
<div style="display: inline-block">
<div
class="items"
v-if="yearData.回转窑"
>
<div class="item-number">
{{
yearData.回转窑
.celec_consume_unit
}}
</div>
<div class="item-name">
本年度熟料综合电耗
</div>
</div>
<div
class="items"
v-if="yearData.回转窑"
>
<div class="item-number">
{{
yearData.回转窑
.cen_consume_unit
}}
</div>
<div class="item-name">
本年度熟料综合能耗
</div>
</div>
<div
class="items"
v-if="yearData.水泥磨"
>
<div class="item-number">
{{
yearData.水泥磨
.elec_consume_unit
}}
</div>
<div class="item-name">
本年度水泥粉磨分布电耗
</div>
</div>
<div
class="items"
v-if="yearData.水泥磨"
>
<div class="item-number">
{{
yearData.水泥磨
.cen_consume_unit
}}
</div>
<div class="item-name">
本年度水泥综合能耗
</div>
</div>
<div
class="items"
v-if="yearData.余热发电"
>
<div class="item-number">
{{
yearData.余热发电
.elec_consume
}}
</div>
<div class="item-name">
本年度余热发电电耗
</div>
</div>
<div
class="items"
v-if="yearData.余热发电"
>
<div class="item-number">
{{
yearData.余热发电
.total_production
}}
</div>
<div class="item-name">
本年度余热发电电量
</div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col v-if="monthData.电石渣">
<el-card
header="成本统计"
style="border-radius: 5px; box-shadow: none"
>
<div class="itemsWrap">
<div class="items" v-if="monthData.电石渣">
<div class="item-number">
{{
monthData.电石渣
.production_cost_unit
}}
</div>
<div class="item-name">
月电石渣成本
</div>
</div>
<div class="items" v-if="monthData.原料磨">
<div class="item-number">
{{
monthData.原料磨
.production_cost_unit
}}
</div>
<div class="item-name">月生料成本</div>
</div>
<div class="items" v-if="monthData.回转窑">
<div class="item-number">
{{
monthData.回转窑
.production_cost_unit
}}
</div>
<div class="item-name">月熟料成本</div>
</div>
<div class="items" v-if="monthData.水泥磨">
<div class="item-number">
{{
monthData.水泥磨
.production_cost_unit
}}
</div>
<div class="item-name">月水泥成本</div>
</div>
</div>
</el-card>
</el-col>
<!-- <el-col>
<el-card
header="报警"
style="border-radius: 5px; box-shadow: none"
>
<el-badge
:value="warningNum"
:max="99"
style="margin: 10px"
>
<div
class="items"
style="margin: 0"
@click="interEvent"
>
<div class="item-number">
能耗超标报警
</div>
</div>
</el-badge>
<el-badge
:value="warningNum2"
:max="99"
style="margin: 10px"
>
<div
class="items"
style="margin: 0"
@click="interEquipment"
>
<div class="item-number">设备检验</div>
</div>
</el-badge>
</el-card>
</el-col> -->
</el-row>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
time: "",
day: "",
year_s: "",
month_s: "",
yearData: [],
monthData: [],
warningNum: 0,
warningNum2: 0,
};
},
mounted() {
this.$emit("on-mounted");
let that = this;
var myDate = new Date();
let year = myDate.getFullYear();
let month = myDate.getMonth() + 1;
that.year_s = year;
that.month_s = month;
that.getYearData();
that.getMonthData();
that.getWraningNum();
// this.showTime();
// setInterval(()=>{
// this.showTime()
// },1000)
},
methods: {
// 动态绑定Class
bindClass(type) {
let classInfo = {
socketDom: true,
redColor: false,
orangeColor: false,
yellowColor: false,
blueColor: true,
};
if (type == "") {
classInfo.redColor = true;
}
return classInfo;
},
init() {
var that = this;
if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持socket");
} else {
this.ws = new WebSocket(this.path + tool.data.get("TOKEN"));
//监听是否连接成功
this.ws.onopen = () => {
// console.log("socket连接成功");
setTimeout(() => {
that.ws.send(JSON.stringify({ type: "event" }));
}, 500);
};
//接听服务器发回的信息并处理展示
this.ws.onmessage = (msg) => {
let data = JSON.parse(msg.data);
console.log(data);
that.getWraningNum();
// if(data.type=='event'){
// that.bindClass();
// }if(data.type=='ticket'){
// }if(data.type=='remaind'){
// }
};
// 监听并处理error事件
this.ws.onerror = function (error) {
console.log("ws断开,尝试重连");
setTimeout(() => {
this.ws = null;
this.init();
}, 5000);
};
}
},
getMessage(msg) {
console.log(msg);
},
close() {
if (this.ws) {
this.ws.close();
this.ws = null;
console.log("socket已经关闭");
}
},
//获取报警事件数量
getWraningNum() {
let that = this;
that.$API.ecm.event.list
.req({
cates__code__in: "consume_exceed",
is_handled: 0,
page: 1,
})
.then((res) => {
that.warningNum = res.count;
});
that.$API.em.equipment.list
.req({ state_measure__in: "20,30", type: 20, page: 1 })
.then((res) => {
debugger;
that.warningNum2 = res.count;
});
},
getYearData() {
let that = this;
let obj = {};
obj.year_s = this.year_s;
obj.type = "year_s";
obj.page = 0;
this.$API.enm.enstat.req(obj).then((res) => {
let yearData = {};
res.forEach((item) => {
let label = item.mgroup_name;
yearData[label] = item;
});
that.yearData = yearData;
});
},
getMonthData() {
let that = this;
let obj = {};
obj.year_s = this.year_s;
obj.month_s = this.month_s;
obj.type = "month_s";
obj.page = 0;
that.$API.enm.enstat.req(obj).then((res) => {
let monthData = {};
res.forEach((item) => {
let label = item.mgroup_name;
monthData[label] = item;
});
console.log("monthData", monthData);
that.monthData = monthData;
});
},
showTime() {
this.time = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
this.day = this.$TOOL.dateFormat(new Date(), "yyyy年MM月dd日");
},
interEvent() {
this.$router.replace({ path: "/events" });
},
interEquipment() {
this.$router.replace({ path: "/em/equipmentc" });
},
},
};
</script>
<style scoped lang="scss">
.items {
display: inline-block;
width: 200px;
padding: 20px;
margin: 10px;
box-sizing: border-box;
border: 1px solid #cccccc;
border-radius: 10px;
box-shadow: 0 0 10px 6px #eeeeee57;
}
.item-number {
font-weight: 600;
font-size: 24px;
color: #1e2126;
letter-spacing: 0.1px;
text-align: left;
line-height: 36px;
}
.item-name {
font-size: 14px;
color: #4e5b71;
letter-spacing: 0.1px;
text-align: left;
line-height: 20px;
}
.item-percent {
font-size: 12px;
color: #ffffff;
letter-spacing: 0.08px;
text-align: left;
line-height: 12px;
}
.socketDom {
position: absolute;
top: 10vh;
left: 50%;
font-size: 20px;
font-weight: bold;
transform: translateX(-50%);
z-index: 101;
color: #ffffff;
border: 1px solid #99fffe;
background: rgba(11, 101, 140, 0.451);
padding: 10px 20px;
border-radius: 5px;
}
.redColor {
color: red;
border: 1px solid red;
background: rgba(255, 0, 0, 0.2);
}
.orangeColor {
color: orange;
border: 1px solid orange;
background: rgba(255, 165, 0, 0.2);
}
.yellowColor {
color: yellow;
background: rgba(255, 255, 0, 0.2);
border: 1px solid yellow;
}
.blueColor {
color: #2378f7;
background: rgb(35, 120, 247, 0.2);
border: 1px solid #2378f7;
}
</style>