新增烘房状态监控看板
LAPTOP-R6EHHS26\86155
6 months ago
parent
1840c527f5
commit
a17259ba39
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 899 B |
@ -0,0 +1,739 @@
|
||||
<template>
|
||||
<v-scale-screen width="1920" height="1080" :fullScreen="false">
|
||||
<div class="app-container home" style="">
|
||||
<div class="head">
|
||||
<div class="head-content">
|
||||
<div class="title">烘房生产监控看板</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="itemtop">
|
||||
<div class="left">
|
||||
<div class="box">
|
||||
<div class="name name1">当天烘房情况</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div
|
||||
class="card-item"
|
||||
:class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-header-left"
|
||||
>生产总数:<span class="color1">80</span>车</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="card-box"
|
||||
v-for="(card, index) in dataPropceshidata"
|
||||
:key="index"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left left1">
|
||||
<div class="cards">
|
||||
<div
|
||||
class="card-item card-item1"
|
||||
:class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-header-left">烘房</span>
|
||||
</div>
|
||||
<div
|
||||
class="card-box"
|
||||
v-for="(card, index) in dataPropceshidata"
|
||||
:key="index"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="box">
|
||||
<div class="name name1">当天质量情况</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div
|
||||
class="card-item"
|
||||
:class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-header-left"
|
||||
>车不合格异常数量: <span class="color2">04</span> 车</span
|
||||
>
|
||||
</div>
|
||||
<div class="card-box">
|
||||
<div class="list1">
|
||||
<div class="listitem1">烘房</div>
|
||||
<div class="listitem1">产量</div>
|
||||
<div class="listitem1">标准产能</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="card-box card-box1"
|
||||
>
|
||||
<div class="list" v-for="(card, index) in dataPropceshidata"
|
||||
:key="index">
|
||||
<div class="listitem1">烘房</div>
|
||||
<div class="listitem1">产量</div>
|
||||
<div class="listitem1">标准产能</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itembottom">
|
||||
<div class="left"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item"></div> -->
|
||||
<!-- <div class="item"></div> -->
|
||||
</div>
|
||||
</v-scale-screen>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBoardFactory,
|
||||
getMesBoardEquProductionToday,
|
||||
getBoardShifts,
|
||||
getRepairWorkOrder,
|
||||
getEquipmentInfo,
|
||||
getRepairQuantity,
|
||||
equipmentIntactRate,
|
||||
equipmentStability,
|
||||
getDeviceRefreshTime,
|
||||
getdictlist,
|
||||
} from "@/api/kanban/equipment";
|
||||
import { dryRoomDataCarousel } from "@/api/kanban/dryingroom";
|
||||
import * as echarts from "echarts";
|
||||
import moment from "moment";
|
||||
// import Echarts3D from "./echarts3d.vue";
|
||||
// import Echarts3D2 from "./echarts3d2.vue";
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
gettimedata: "",
|
||||
selectxt: null,
|
||||
selectxtclasses: null,
|
||||
getLineList: [],
|
||||
classesList: [],
|
||||
number1: 0,
|
||||
number2: 0,
|
||||
number3: 0,
|
||||
number4: 0,
|
||||
nameList: [
|
||||
"成型机一",
|
||||
"成型机二",
|
||||
"成型机三",
|
||||
"成型机四",
|
||||
"成型机五",
|
||||
"成型机六",
|
||||
"成型机五",
|
||||
"成型机六",
|
||||
],
|
||||
valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
|
||||
optionDatalist1: [],
|
||||
optionDatalist2: [],
|
||||
optionDatalist3: [],
|
||||
optionDatalist4: [],
|
||||
colorlist: ["#005aff", "#f8b551"],
|
||||
datetime: null,
|
||||
time1: null,
|
||||
getlist: [],
|
||||
repairlist: [],
|
||||
equipmentlist: [],
|
||||
equipmentrepairlist: [],
|
||||
equipmentstabilizelist: [],
|
||||
equipmentinfo: [],
|
||||
RefreshTime: null,
|
||||
dictlist: [],
|
||||
StartArray: [],
|
||||
dataPropceshidata: [{}, {}, {}, {}, {}, {}],
|
||||
dataPropdata: [],
|
||||
cards: {
|
||||
data1: [],
|
||||
data2: [],
|
||||
},
|
||||
cardss: [],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
destroyed() {
|
||||
clearInterval(this.time1);
|
||||
this.time1 = null;
|
||||
},
|
||||
mounted() {
|
||||
// this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
|
||||
//console.log('zhuanhuahou',this.dateRangeone)
|
||||
const { createData } = this;
|
||||
createData();
|
||||
this.gettime();
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$router.push({ path: "/index" });
|
||||
},
|
||||
getTagText(value) {
|
||||
// 根据值返回要显示的文字
|
||||
if (value === "0") {
|
||||
return "无车";
|
||||
} else if (value === "1") {
|
||||
return "有车";
|
||||
}
|
||||
},
|
||||
|
||||
getTextColor(value) {
|
||||
if (value === "0") {
|
||||
return "#26fcd8";
|
||||
} else if (value === "1") {
|
||||
return "#ea6027";
|
||||
}
|
||||
},
|
||||
|
||||
getTagModel(value) {
|
||||
// 根据值返回要显示的文字
|
||||
if (value === "0") {
|
||||
return "手动";
|
||||
} else if (value === "1") {
|
||||
return "自动";
|
||||
}
|
||||
},
|
||||
gettime() {
|
||||
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
||||
setInterval(() => {
|
||||
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
||||
}, 1000);
|
||||
},
|
||||
selectline() {
|
||||
const _this = this;
|
||||
this.optionDatalist1 = [];
|
||||
this.optionDatalist2 = [];
|
||||
this.optionDatalist3 = [];
|
||||
this.optionDatalist4 = [];
|
||||
},
|
||||
createData() {
|
||||
this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
|
||||
i: i + 1,
|
||||
}));
|
||||
this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
|
||||
i: i + 9,
|
||||
}));
|
||||
this.cards.data3 = new Array(5).fill(0).map((foo, i) => ({
|
||||
i: i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63,
|
||||
}));
|
||||
// console.log(this.cards.data1)
|
||||
dryRoomDataCarousel({ factory: 999 }).then((response) => {
|
||||
if (response.data) {
|
||||
this.dataPropdata = response.data.dryingroomList;
|
||||
// console.log(response);
|
||||
this.cards.data1 = this.cards.data1.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
this.cards.data2 = this.cards.data2.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
this.cards.data3 = this.cards.data3.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
this.cardss = this.cardss.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
console.log(this.cardss, this.cards, "wwwwwwww", this.dataPropdata);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleScroll(event) {
|
||||
//请求烘房数据接口
|
||||
this.createData();
|
||||
// if (event==0){
|
||||
// const that = this;
|
||||
//
|
||||
// }
|
||||
// 获取滚动事件的相关信息
|
||||
|
||||
// console.log(scrollTop);
|
||||
// 根据需要处理滚动事件的逻辑
|
||||
// ...
|
||||
},
|
||||
//左侧第一个选择类型下拉框 回调函数
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
.home {
|
||||
width: 100%;
|
||||
background: url("../../../assets/images/bg1.jpg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-color: #050711;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
height: 74px;
|
||||
position: relative;
|
||||
|
||||
.head-content {
|
||||
height: 74px;
|
||||
background-image: url("../../../assets/images/bg-head.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 42px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.head-logo {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 1px;
|
||||
|
||||
img {
|
||||
height: 38px;
|
||||
// width: ;
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 63px;
|
||||
|
||||
.itemtop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
.box {
|
||||
width: 525px;
|
||||
height: 62px;
|
||||
background: url("../../../assets/images/bg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0px 21px 0px 25px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #1f3668;
|
||||
.name {
|
||||
min-width: 300px;
|
||||
letter-spacing: 4px;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
}
|
||||
.number {
|
||||
min-width: 120px;
|
||||
height: 50px;
|
||||
border: 2px solid #274583;
|
||||
border-radius: 5px;
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
.number1 {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 43px;
|
||||
color: #ffa95b;
|
||||
border-radius: 7px;
|
||||
font-size: 32px;
|
||||
letter-spacing: 3px;
|
||||
background-color: #294584;
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
color: #b7b9c1;
|
||||
margin-left: 30px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
width: 525px;
|
||||
.card-item {
|
||||
width: 525px;
|
||||
height: 387px;
|
||||
background: url("../../../assets/images/bg3.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px;
|
||||
background-color: #192c56;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
}
|
||||
.card-item1 {
|
||||
width: 750px;
|
||||
height: 450px;
|
||||
background: url("../../../assets/images/bg3.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px;
|
||||
background-color: #0e1d3a;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
}
|
||||
.card-header {
|
||||
width: 450px;
|
||||
height: 13%;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #f6f3f9;
|
||||
font-size: 26px;
|
||||
margin-top: 10px;
|
||||
.card-header-left {
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
padding: 16px 26px;
|
||||
letter-spacing: 8px;
|
||||
background: linear-gradient(to right, #192c56, #11518f, #192c56);
|
||||
.color1 {
|
||||
color: #0195fd;
|
||||
}
|
||||
.color2 {
|
||||
color: #fb0102;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
.list1 {
|
||||
background-color: #0d61aa;
|
||||
color: #ffffff;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
min-height: 60px;
|
||||
}
|
||||
.list1::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 3%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #0496FD transparent;
|
||||
transform: rotate(315deg);
|
||||
}
|
||||
.list {
|
||||
background-color: #114881;
|
||||
color: #46AFF7;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
min-height: 60px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.list::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 3%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #0496FD transparent;
|
||||
transform: rotate(315deg);
|
||||
}
|
||||
}
|
||||
.card-box1{
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ring-charts {
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left1 {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
.itembottom {
|
||||
margin-top: 19px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.left {
|
||||
// width: 100%;
|
||||
// justify-content: space-between;
|
||||
// display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.titlebox {
|
||||
width: 431px;
|
||||
height: 38px;
|
||||
background: url("../../../assets/images/bg-title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
line-height: 38px;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
padding-left: 60px;
|
||||
// .titlename{
|
||||
// position: relative;
|
||||
// left: 24px;
|
||||
// }
|
||||
}
|
||||
|
||||
.factory {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
}
|
||||
|
||||
.selectborder {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
// border: 2px solid #27408c;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 350px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.selectborder1 {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
// border: 2px solid #27408c;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 88px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.selectborder select {
|
||||
/*清除select的边框样式*/
|
||||
border: none;
|
||||
/*清除select聚焦时候的边框颜色*/
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
/*将select的宽高等于div的宽高*/
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
/*隐藏select的下拉图标*/
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.selectborder option {
|
||||
/*清除select的边框样式*/
|
||||
border: none;
|
||||
/*清除select聚焦时候的边框颜色*/
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
/*将select的宽高等于div的宽高*/
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
/*隐藏select的下拉图标*/
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding-left: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
color: #3fa2ff;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.selectborder1 option {
|
||||
/*清除select的边框样式*/
|
||||
border: none;
|
||||
/*清除select聚焦时候的边框颜色*/
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
/*将select的宽高等于div的宽高*/
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
/*隐藏select的下拉图标*/
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding-left: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
color: #3fa2ff;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.selectborder:after {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(../../../assets/images/xiala.png) no-repeat center;
|
||||
/*通过定位将图标放在合适的位置*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 25%;
|
||||
/*给自定义的图标实现点击下来功能*/
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selectborder1:after {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(../../../assets/images/xiala.png) no-repeat center;
|
||||
/*通过定位将图标放在合适的位置*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 25%;
|
||||
/*给自定义的图标实现点击下来功能*/
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
color: #ffffff;
|
||||
background-color: #325e82;
|
||||
border-color: #0a0f19;
|
||||
}
|
||||
|
||||
.active1 {
|
||||
background-color: #0d1b2f;
|
||||
}
|
||||
|
||||
.active2 {
|
||||
// background-color: #04060E;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 0px;
|
||||
background-color: #0c0642;
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
background-color: #07356a;
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #0091ff;
|
||||
}
|
||||
::v-deep .el-date-editor .el-range-input {
|
||||
background-color: #142944;
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-range-input::placeholder {
|
||||
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
||||
}
|
||||
::v-deep .el-range-separator {
|
||||
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
||||
}
|
||||
::v-deep .el-range-editor--medium .el-range-separator {
|
||||
line-height: 35px;
|
||||
}
|
||||
::v-deep .el-input__icon .el-range__icon .el-icon-date {
|
||||
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
||||
}
|
||||
.fleft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
#cards .isactive {
|
||||
margin-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,824 @@
|
||||
<template>
|
||||
<v-scale-screen width="1920" height="1080" :fullScreen="false">
|
||||
<div class="app-container home" style="">
|
||||
<div class="head">
|
||||
<div class="head-content">
|
||||
<div class="title">烘房状态监控看板</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="itemtop">
|
||||
<div class="left">
|
||||
<!-- <div class="box">
|
||||
<div class="name name1">烘房运行数量:</div>
|
||||
<div class="number">
|
||||
<div class="number1">00</div>
|
||||
</div>
|
||||
<div class="unit">台</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="name">烘房自动模式数量:</div>
|
||||
<div class="number">
|
||||
<div class="number1">00</div>
|
||||
</div>
|
||||
<div class="unit">台</div>
|
||||
</div> -->
|
||||
<div class="box" :key="item.title" v-for="item in digitalFlopData">
|
||||
<div class="name">{{ item.title }}:</div>
|
||||
<div class="number">
|
||||
<div class="number1">{{ item.number.number }}</div>
|
||||
</div>
|
||||
<div class="unit">{{ item.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itembottom">
|
||||
<div class="left">
|
||||
<div id="cards">
|
||||
<div
|
||||
class="card-item fleft clearfix"
|
||||
v-for="(card, index) in dataPropdata"
|
||||
:key="index"
|
||||
:class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-header-left">烘房{{ card.i }}</span>
|
||||
</div>
|
||||
<div class="card-box"></div>
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-detail">
|
||||
<span
|
||||
:style="{
|
||||
fontSize: '22px',
|
||||
fontWeight: 'bold',
|
||||
color: '#FDA45D',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
>
|
||||
{{ getTagModel(card.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="footer-title">烘房模式</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-detail">
|
||||
<span
|
||||
:style="{
|
||||
fontSize: '22px',
|
||||
fontWeight: 'bold',
|
||||
color: '#93FE66',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
>
|
||||
{{ getTagText(card.dollyNumber) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="footer-title">门前数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-detail">
|
||||
<span
|
||||
style="
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #fda45d;
|
||||
text-align: right;
|
||||
"
|
||||
>{{ card.temperature }}
|
||||
<span
|
||||
style="
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
"
|
||||
>℃</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<div class="footer-title">烘房温度</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-detail">
|
||||
<span
|
||||
style="
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #93fe66;
|
||||
text-align: right;
|
||||
"
|
||||
>{{ card.waitmin
|
||||
}}<span
|
||||
style="
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
"
|
||||
>min</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<div class="footer-title">保持时长</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item"></div> -->
|
||||
<!-- <div class="item"></div> -->
|
||||
</div>
|
||||
</v-scale-screen>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dryRoomDataCarousel,
|
||||
getDryingRoomList,
|
||||
} from "@/api/kanban/dryingroom";
|
||||
import * as echarts from "echarts";
|
||||
import moment from "moment";
|
||||
// import Echarts3D from "./echarts3d.vue";
|
||||
// import Echarts3D2 from "./echarts3d2.vue";
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
gettimedata: "",
|
||||
selectxt: null,
|
||||
selectxtclasses: null,
|
||||
getLineList: [],
|
||||
classesList: [],
|
||||
number1: 0,
|
||||
number2: 0,
|
||||
number3: 0,
|
||||
number4: 0,
|
||||
nameList: [
|
||||
"成型机一",
|
||||
"成型机二",
|
||||
"成型机三",
|
||||
"成型机四",
|
||||
"成型机五",
|
||||
"成型机六",
|
||||
"成型机五",
|
||||
"成型机六",
|
||||
],
|
||||
valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
|
||||
optionDatalist1: [],
|
||||
optionDatalist2: [],
|
||||
optionDatalist3: [],
|
||||
optionDatalist4: [],
|
||||
colorlist: ["#005aff", "#f8b551"],
|
||||
datetime: null,
|
||||
time1: null,
|
||||
time2: null,
|
||||
getlist: [],
|
||||
repairlist: [],
|
||||
equipmentlist: [],
|
||||
equipmentrepairlist: [],
|
||||
equipmentstabilizelist: [],
|
||||
equipmentinfo: [],
|
||||
RefreshTime: null,
|
||||
dictlist: [],
|
||||
StartArray: [],
|
||||
dataPropceshidata: [],
|
||||
dataPropdata: [],
|
||||
cards: {
|
||||
data1: [],
|
||||
data2: [],
|
||||
},
|
||||
cardss: [],
|
||||
digitalFlopData: [],
|
||||
dryingRoomList: [],
|
||||
cxjZCNumber: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
destroyed() {
|
||||
clearInterval(this.time1);
|
||||
this.time1 = null;
|
||||
clearInterval(this.time2);
|
||||
this.time2 = null;
|
||||
},
|
||||
mounted() {
|
||||
// this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
|
||||
//console.log('zhuanhuahou',this.dateRangeone)
|
||||
const { createData } = this;
|
||||
createData();
|
||||
this.createData1();
|
||||
this.time2 = setInterval(() => {
|
||||
this.createData1();
|
||||
}, 5000);
|
||||
this.gettime();
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$router.push({ path: "/index" });
|
||||
},
|
||||
getTagText(value) {
|
||||
// 根据值返回要显示的文字
|
||||
if (value === "0") {
|
||||
return "无车";
|
||||
} else if (value === "1") {
|
||||
return "有车";
|
||||
}
|
||||
},
|
||||
|
||||
getTextColor(value) {
|
||||
if (value === "0") {
|
||||
return "#26fcd8";
|
||||
} else if (value === "1") {
|
||||
return "#ea6027";
|
||||
}
|
||||
},
|
||||
|
||||
getTagModel(value) {
|
||||
// 根据值返回要显示的文字
|
||||
if (value === "0") {
|
||||
return "手动";
|
||||
} else if (value === "1") {
|
||||
return "自动";
|
||||
}
|
||||
},
|
||||
gettime() {
|
||||
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
||||
this.time1 = setInterval(() => {
|
||||
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
||||
}, 1000);
|
||||
},
|
||||
selectline() {
|
||||
const _this = this;
|
||||
this.optionDatalist1 = [];
|
||||
this.optionDatalist2 = [];
|
||||
this.optionDatalist3 = [];
|
||||
this.optionDatalist4 = [];
|
||||
},
|
||||
createData() {
|
||||
this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
|
||||
i: i + 1,
|
||||
}));
|
||||
this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
|
||||
i: i + 9,
|
||||
}));
|
||||
this.cards.data3 = new Array(5).fill(0).map((foo, i) => ({
|
||||
i: i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63,
|
||||
}));
|
||||
// console.log(this.cards.data1)
|
||||
dryRoomDataCarousel({ factory: 999 }).then((response) => {
|
||||
if (response.data) {
|
||||
this.dataPropdata = response.data.dryingroomList;
|
||||
// console.log(response);
|
||||
this.cards.data1 = this.cards.data1.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
this.cards.data2 = this.cards.data2.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
this.cards.data3 = this.cards.data3.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
this.cardss = this.cardss.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find(
|
||||
(index) => index.i === card.i
|
||||
);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: "烘房" + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber: matchingIndex.dollyNumber,
|
||||
waitmin: matchingIndex.waitmin,
|
||||
temperature: matchingIndex.temperature,
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
});
|
||||
console.log(this.cardss, this.cards, "wwwwwwww", this.dataPropdata);
|
||||
}
|
||||
});
|
||||
},
|
||||
createData1() {
|
||||
const that = this;
|
||||
getDryingRoomList({
|
||||
factory: 999,
|
||||
}).then((response) => {
|
||||
if (response.data) {
|
||||
// console.log(response)
|
||||
this.cxjZCNumber = response.data.cxzc;
|
||||
this.cxjYCNumber = response.data.cxyc;
|
||||
this.dryingRoomList = response.data.result;
|
||||
this.digitalFlopData = [
|
||||
{
|
||||
title: "成型机运行",
|
||||
number: {
|
||||
number: this.cxjZCNumber,
|
||||
content: "{nt}",
|
||||
textAlign: "right",
|
||||
style: {
|
||||
fill: "#4d99fc",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
|
||||
unit: "台",
|
||||
},
|
||||
{
|
||||
title: "烘房运行(自动)",
|
||||
number: {
|
||||
number: response.data.hfauto,
|
||||
content: "{nt}",
|
||||
textAlign: "right",
|
||||
style: {
|
||||
fill: "#4d99fc",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
|
||||
unit: "座",
|
||||
},
|
||||
{
|
||||
title: "收坯机台运行",
|
||||
number: {
|
||||
number: response.data.spzc,
|
||||
content: "{nt}",
|
||||
textAlign: "right",
|
||||
style: {
|
||||
fill: "#4d99fc",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
unit: "台",
|
||||
},
|
||||
{
|
||||
title: "成型缓存区数量",
|
||||
number: {
|
||||
number: response.data.hcnumber,
|
||||
content: "{nt}",
|
||||
textAlign: "right",
|
||||
style: {
|
||||
fill: "#4d99fc",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
unit: "个",
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleScroll(event) {
|
||||
//请求烘房数据接口
|
||||
this.createData();
|
||||
// if (event==0){
|
||||
// const that = this;
|
||||
//
|
||||
// }
|
||||
// 获取滚动事件的相关信息
|
||||
|
||||
// console.log(scrollTop);
|
||||
// 根据需要处理滚动事件的逻辑
|
||||
// ...
|
||||
},
|
||||
//左侧第一个选择类型下拉框 回调函数
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
.home {
|
||||
width: 100%;
|
||||
background: url("../../../assets/images/bg1.jpg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-color: #050711;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
height: 74px;
|
||||
position: relative;
|
||||
|
||||
.head-content {
|
||||
height: 74px;
|
||||
background-image: url("../../../assets/images/bg-head.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 42px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.head-logo {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 1px;
|
||||
|
||||
img {
|
||||
height: 38px;
|
||||
// width: ;
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 63px;
|
||||
|
||||
.itemtop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
.box {
|
||||
width: 437px;
|
||||
height: 92px;
|
||||
background: url("../../../assets/images/bg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0px 21px 0px 25px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
min-width: 225px;
|
||||
letter-spacing: 0px;
|
||||
color: #ffffff;
|
||||
font-size: 26px;
|
||||
}
|
||||
.name1 {
|
||||
min-width: 220px;
|
||||
letter-spacing: 25px;
|
||||
}
|
||||
.number {
|
||||
min-width: 120px;
|
||||
height: 50px;
|
||||
border: 2px solid #274583;
|
||||
border-radius: 5px;
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
.number1 {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 43px;
|
||||
color: #ffa95b;
|
||||
border-radius: 7px;
|
||||
font-size: 32px;
|
||||
letter-spacing: 3px;
|
||||
background-color: #294584;
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
color: #b7b9c1;
|
||||
margin-left: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itembottom {
|
||||
margin-top: 19px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.left {
|
||||
// width: 100%;
|
||||
// justify-content: space-between;
|
||||
// display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.titlebox {
|
||||
width: 431px;
|
||||
height: 38px;
|
||||
background: url("../../../assets/images/bg-title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
line-height: 38px;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
padding-left: 60px;
|
||||
// .titlename{
|
||||
// position: relative;
|
||||
// left: 24px;
|
||||
// }
|
||||
}
|
||||
|
||||
.factory {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
}
|
||||
|
||||
.selectborder {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
// border: 2px solid #27408c;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 350px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.selectborder1 {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
// border: 2px solid #27408c;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 88px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.selectborder select {
|
||||
/*清除select的边框样式*/
|
||||
border: none;
|
||||
/*清除select聚焦时候的边框颜色*/
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
/*将select的宽高等于div的宽高*/
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
/*隐藏select的下拉图标*/
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.selectborder option {
|
||||
/*清除select的边框样式*/
|
||||
border: none;
|
||||
/*清除select聚焦时候的边框颜色*/
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
/*将select的宽高等于div的宽高*/
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
/*隐藏select的下拉图标*/
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding-left: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
color: #3fa2ff;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.selectborder1 option {
|
||||
/*清除select的边框样式*/
|
||||
border: none;
|
||||
/*清除select聚焦时候的边框颜色*/
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
/*将select的宽高等于div的宽高*/
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
/*隐藏select的下拉图标*/
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding-left: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
color: #3fa2ff;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.selectborder:after {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(../../../assets/images/xiala.png) no-repeat center;
|
||||
/*通过定位将图标放在合适的位置*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 25%;
|
||||
/*给自定义的图标实现点击下来功能*/
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selectborder1:after {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(../../../assets/images/xiala.png) no-repeat center;
|
||||
/*通过定位将图标放在合适的位置*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 25%;
|
||||
/*给自定义的图标实现点击下来功能*/
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
color: #ffffff;
|
||||
background-color: #325e82;
|
||||
border-color: #0a0f19;
|
||||
}
|
||||
|
||||
.active1 {
|
||||
background-color: #0d1b2f;
|
||||
}
|
||||
|
||||
.active2 {
|
||||
// background-color: #04060E;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 0px;
|
||||
background-color: #0c0642;
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
background-color: #07356a;
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #0091ff;
|
||||
}
|
||||
#cards {
|
||||
.card-item {
|
||||
width: 254px;
|
||||
height: 262px;
|
||||
background: url("../../../assets/images/bg3.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 20px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
width: 180px;
|
||||
height: 20%;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #f6f3f9;
|
||||
font-size: 24px;
|
||||
margin-top: 10px;
|
||||
|
||||
.card-header-left {
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
background-color: #0b3765;
|
||||
box-shadow: 0px 3px 18px 12px #0b3765;
|
||||
}
|
||||
}
|
||||
|
||||
.ring-charts {
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.card-footer-item {
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
.footer-title {
|
||||
font-size: 22px;
|
||||
margin-bottom: 5px;
|
||||
color: #0593fd;
|
||||
}
|
||||
|
||||
.footer-detail {
|
||||
min-height: 46px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #192c57;
|
||||
font-size: 18px;
|
||||
padding: 10px 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background-color: #192c57;
|
||||
border-radius: 3px;
|
||||
.dv-digital-flop {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-date-editor .el-range-input {
|
||||
background-color: #142944;
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-range-input::placeholder {
|
||||
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
||||
}
|
||||
::v-deep .el-range-separator {
|
||||
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
||||
}
|
||||
::v-deep .el-range-editor--medium .el-range-separator {
|
||||
line-height: 35px;
|
||||
}
|
||||
::v-deep .el-input__icon .el-range__icon .el-icon-date {
|
||||
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
||||
}
|
||||
.fleft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
#cards .isactive {
|
||||
margin-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue