<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 class="head-logo">
<img src="../../../assets/images/logo.png" alt="" />
</div>
<div class="back">
<el-button @click="back()" type="primary" icon="el-icon-s-home"></el-button>
</div>
</div>
<div class="content-top">
<div class="factory">
<div class="selectborder">
<select v-model="selectxt" class="select1" @change="selectline(selectxt)">
<option :key="index" :value="x.parentName" v-for="(x, index) in getLineList">
{{ x.deptName }}
</option>
<!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
</select>
</div>
<div class="selectborder selectborder1">
<select v-model="selectxtclasses" class="select1" @change="selectline2(selectxtclasses)">
<option :key="index" :value="x.shiftId" v-for="(x, index) in classesList">
{{ x.shiftDesc }}
</option>
<!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
</select>
</div>
</div>
<div class="timebox">
<div class="time">
{{ gettimedata }}
</div>
</div>
</div>
<div class="content">
<div class="itemtop">
<div class="left">
<div class="item-table">
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr style="height: 44px;">
<td style="width: 8%;">序号</td>
<td style="width: 18%;">设备名称</td>
<td style="width: 20%;">所在部门</td>
<td style="width: 10%;">状态</td>
<td style="width: 12%;">设备故障率</td>
<td style="width: 12%;">设备有效利用率</td>
</tr>
</thead>
</table>
<div class="table-tbody">
<!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
v-for="(n, index) in getlist">
<td style="width: 8%;">1</td>
<td style="width: 18%;">测试设备</td>
<td style="width: 20%;">测试部门1</td>
<td style="width: 10%;">在用</td>
<td style="width: 12%;">10%</td>
<td style="width: 12%;">90%</td>
</tr>
</tbody>
</table>
<!-- </vue-seamless-scroll> -->
</div>
</div>
<div class="item-table item-table1">
<div class="titlebox" style="margin-bottom: 14px;">
<div class="titlename">维修工单</div>
</div>
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr style="height: 44px;">
<td style="width: 8%;">序号</td>
<td style="width: 12%;">设备名称</td>
<td style="width: 12%;">设备编码</td>
<td style="width: 12%;">设备位置</td>
<td style="width: 12%;">故障原因</td>
<td style="width: 12%;">维修组</td>
<td style="width: 10%;">是否立即维修</td>
<td style="width: 18%;">维修时间</td>
</tr>
</thead>
</table>
<div class="table-tbody">
<!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
v-for="(n, index) in getlist">
<td style="width: 8%;">1</td>
<td style="width: 12%;">测试设备</td>
<td style="width: 12%;">BM000001</td>
<td style="width: 12%;">位置1</td>
<td style="width: 12%;">故障原因1</td>
<td style="width: 12%;">维修组</td>
<td style="width: 10%;">是</td>
<td style="width: 18%;">2023-11-07 08:30:33</td>
</tr>
</tbody>
</table>
<!-- </vue-seamless-scroll> -->
</div>
</div>
</div>
<div class="right">
<div class="echart1title">
完好设备占比
</div>
<div class="echartbox" id="echart1" style="margin: auto; margin-top: 60px;width: 395px; height: 175px">
</div>
<div class="equipmentinfobox">
<div class="box">
<div class="number">
<span class="number1">
24
</span>
<span class="name1">
台
</span>
</div>
<div class="name2">
设备总数
</div>
</div>
<div class="box">
<div class="number">
<span class="number1">
24
</span>
<span class="name1">
台
</span>
</div>
<div class="name2">
设备总数
</div>
</div>
</div>
</div>
</div>
<div class="itembottom">
<div class="item-table item-table1">
<div class="titlebox" style="margin-bottom: 14px;">
<div class="titlename">设备综合效率</div>
</div>
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr style="height: 44px;">
<td style="width: 8%;">排名</td>
<td style="width: 12%;">设备名称</td>
<td style="width: 12%;">设备OEE</td>
</tr>
</thead>
</table>
<div class="table-tbody">
<!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
v-for="(n, index) in getlist">
<td style="width: 8%;">1</td>
<td style="width: 12%;">测试设备</td>
<td style="width: 12%;">88%</td>
</tr>
</tbody>
</table>
<!-- </vue-seamless-scroll> -->
</div>
</div>
<div class="item-table item-table1">
<div class="titlebox" style="margin-bottom: 14px;">
<div class="titlename">设备稳定性</div>
</div>
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr style="height: 44px;">
<td style="width: 8%;">排名</td>
<td style="width: 12%;">设备名称</td>
<td style="width: 12%;">MTBF</td>
</tr>
</thead>
</table>
<div class="table-tbody">
<!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
v-for="(n, index) in getlist">
<td style="width: 8%;">1</td>
<td style="width: 12%;">测试设备</td>
<td style="width: 12%;">88%</td>
</tr>
</tbody>
</table>
<!-- </vue-seamless-scroll> -->
</div>
</div>
<div class="item-table item-table1">
<div class="titlebox" style="margin-bottom: 14px;">
<div class="titlename">设备维修质量</div>
</div>
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr style="height: 44px;">
<td style="width: 8%;">排名</td>
<td style="width: 12%;">设备名称</td>
<td style="width: 12%;">设备OEE</td>
</tr>
</thead>
</table>
<div class="table-tbody">
<!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px" :key="index"
v-for="(n, index) in getlist">
<td style="width: 8%;">1</td>
<td style="width: 12%;">测试设备</td>
<td style="width: 12%;">88%</td>
</tr>
</tbody>
</table>
<!-- </vue-seamless-scroll> -->
</div>
</div>
</div>
</div>
<!-- <div class="item"></div> -->
<!-- <div class="item"></div> -->
</div>
</v-scale-screen>
</template>
<script>
import {
getBoardFactory,
getMesBoardEquProductionToday,
getBoardShifts,
} from "@/api/kanban/dailyoutput";
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: [
{
},
{
},
{
},
{
},
{
},
],
};
},
created() { },
destroyed() {
clearInterval(this.time1);
this.time1 = null;
},
mounted() {
// this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
//console.log('zhuanhuahou',this.dateRangeone)
this.selectFactorylist();
this.gettime();
this.initChart1();
},
methods: {
back() {
this.$router.push({ path: "/index" });
},
gettime() {
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
setInterval(() => {
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
}, 1000);
},
selectFactorylist() {
const _this = this;
getBoardFactory({
factory: null,
}).then((response) => {
if (response.data) {
_this.getLineList = response.data;
_this.selectxt = _this.getLineList[0].parentName;
getBoardShifts({
factory: _this.selectxt,
}).then((response) => {
if (response.data) {
console.log(response.data);
_this.classesList = response.data;
_this.selectxtclasses = _this.classesList[0].shiftId;
_this.initChart1();
_this.time1 = setInterval(() => {
_this.initChart1();
}, 1000 * 60 * 1);
}
});
}
});
},
initChart1() {
var myChart1 = echarts.init(document.querySelector("#echart1"));
var option1 = {
//提示框组件。开发实际中去掉了指针，提示框可以不用设置。
tooltip: {
formatter: "{a} <br/>{b} : {c}%",
},
grid: {
},
//下面属性才是仪表盘的核心！！反正我是这么认为的！！！
series: [
{
//类型
splitNumber: 4, //刻度数量
type: "gauge",
//半径
radius: 155,
//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
startAngle: 180,
//结束角度。
endAngle: 0,
center: ["50%", "100%"],
//仪表盘轴线相关配置。
name: "内层盘",
type: "gauge",
axisLine: {
lineStyle: {
width: 10,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#040610",
},
{
offset: 0.2,
color: "#083782",
},
{
offset: 0.5,
color: "#0E5EFD",
},
{
offset: 0.8,
color: "#083782",
},
{
offset: 1,
color: "#040610",
},
]),
],
],
},
},
axisTick: {
lineStyle: {
color: "#fff",
width: 1,
},
length: 6,
splitNumber: 1,
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
data: [
{
show: false,
value: "0",
},
],
detail: {
show: 0,
},
},
{
//类型
splitNumber: 4, //刻度数量
type: "gauge",
//半径
radius: 115,
//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
startAngle: 180,
//结束角度。
endAngle: 0,
center: ["50%", "100%"],
//仪表盘轴线相关配置。
name: "内层盘",
type: "gauge",
axisLine: {
lineStyle: {
width: 25,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#3E82FF",
},
{
offset: 0.6,
color: "#65FBFF",
},
{
offset: 1,
color: "#23317D",
},
]),
],
],
},
},
axisTick: {
lineStyle: {
color: "#fff",
width: 1,
},
length: 6,
splitNumber: 1,
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
axisLabel: {
show: false,
},
data: [
{
show: false,
value: "0",
},
],
detail: {
show: false,
},
},
{
//类型
splitNumber: 4, //刻度数量
type: "gauge",
//半径
radius: 115,
//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
startAngle: 18,
//结束角度。
endAngle: 0,
center: ["50%", "100%"],
//仪表盘轴线相关配置。
name: "内层盘",
type: "gauge",
axisLine: {
lineStyle: {
width: 25,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#351A0E",
},
{
offset: 0.6,
color: "#363121",
},
{
offset: 1,
color: "#351A0E",
},
]),
],
],
},
},
axisTick: {
lineStyle: {
color: "#fff",
width: 1,
},
length: 6,
splitNumber: 1,
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
axisLabel: {
show: false,
},
data: [
{
show: false,
value: "0",
},
],
detail: {
show: false,
},
},
{
//类型
color: "#fff",
splitNumber: 4, //刻度数量
type: "gauge",
name: '完好设备占比',
//半径
radius: 135,
//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
startAngle: 180,
//结束角度。
endAngle: 0,
center: ["50%", "100%"],
//仪表盘轴线相关配置。
axisLine: {
show: true,
// 属性lineStyle控制线条样式
lineStyle: {
width: 20,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#3A76F0",
},
{
offset: 0.6,
color: "#23327E",
},
{
offset: 1,
color: "#3A76F0",
},
]),
],
],
},
},
//分隔线样式。
splitLine: {
show: false,
},
//刻度样式。
axisTick: {
// show: false,
splitNumber: 8,
length: 20,
lineStyle: {
color: "#04060F",
},
distance: -20,
},
//刻度标签。
axisLabel: {
// splitNumber: 10,
// distance: -12,
// fontSize: 17,
color: "#ffffff",
show: false,
},
//仪表盘指针。
pointer: {
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
show: false,
//指针长度
length: "90%",
width: 0,
},
//仪表盘标题。
title: {
show: true,
offsetCenter: [0, "40%"], // x, y，单位px
color: "#fff", // 文字的颜色,默认 #333。
fontSize: 20,
},
//仪表盘详情，用于显示数据。
detail: {
show: true,
valueAnimation: true,
formatter: "{value}%",
offsetCenter: [0, "-10%"],
textStyle: {
color: "#fff",
fontSize: 30,
},
},
data: [
{
value: 10,
},
],
},
],
};
myChart1.setOption(option1);
},
selectline() {
const _this = this;
this.optionDatalist1 = [];
this.optionDatalist2 = [];
this.optionDatalist3 = [];
this.optionDatalist4 = [];
getBoardShifts({
factory: _this.selectxt,
}).then((response) => {
if (response.data) {
console.log(response.data);
_this.classesList = response.data;
_this.selectxtclasses = _this.classesList[0].shiftId;
_this.initChart1();
}
});
},
selectline2() {
this.initChart1();
},
//左侧第一个选择类型下拉框 回调函数
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px 24px;
}
.home {
width: 100%;
height: 100vh;
background: url("../../../assets/images/bg-body.png") 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-top {
display: flex;
justify-content: space-between;
position: relative;
.factory {
width: 540px;
height: 60px;
background: url("../../../assets/images/bg- border1.png") no-repeat;
background-size: 100% 100%;
text-align: center;
position: absolute;
top: -17px;
left: 0px;
}
.timebox {
width: 480px;
height: 60px;
background: url("../../../assets/images/bg-border2.png") no-repeat;
background-size: 100% 100%;
text-align: center;
position: absolute;
top: -17px;
right: 0px;
.time {
font-size: 30px;
font-weight: 400;
color: #ffffff;
line-height: 71px;
}
}
}
.content {
margin-top: 63px;
.itemtop {
display: flex;
justify-content: space-between;
align-items: center;
.left {
.item-table {
width: 1243px;
height: 292px;
background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
background-size: 100% 100%;
padding: 27px 21px 30px 25px;
box-sizing: border-box;
box-sizing: border-box;
.table-thead {
width: 1197px;
height: 44px;
margin: auto;
background: #0A1A33;
td {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #159AFF;
text-align: center;
white-space: nowrap;
}
}
.table-tbody {
height: 192px;
// width: 1775px;
margin: auto;
overflow-y: scroll;
table {
width: 100%;
tbody {
width: 100%;
td {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #FFFFFF;
text-align: center;
border-bottom: 1px dashed #6C8097
}
}
}
}
}
.item-table1 {
margin-top: 20px;
padding-top: 19px;
.table-tbody {
height: 144px;
}
}
}
.right {
margin-left: 23px;
width: 610px;
height: 604px;
background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
background-size: 100% 100%;
// padding: 27px 21px 30px 25px;
box-sizing: border-box;
position: relative;
.echartbox {
margin-top: 50px;
}
.echart1title {
display: inline-table;
position: absolute;
top: -27px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
z-index: 9999;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
}
.equipmentinfobox {
margin-top: 105px;
display: flex;
align-items: center;
justify-content: space-around;
.box {
width: 186px;
height: 180px;
background: url('../../../assets/images/equipment/number.png') no-repeat;
background-size: 100% 100%;
text-align: center;
padding-top: 30px;
box-sizing: border-box;
.number {
.number1 {
font-size: 60px;
font-weight: 500;
color: #66FFFF;
}
.name1 {
font-size: 32px;
font-weight: 400;
color: #FFFFFF;
}
}
.name2 {
margin-top: 15px;
font-size: 32px;
font-weight: bold;
color: #FFFFFF;
}
}
}
}
}
.itembottom {
margin-top: 19px;
display: flex;
justify-content: space-around;
.item-table {
width: 610px;
height: 292px;
background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
background-size: 100% 100%;
padding: 27px 21px 30px 25px;
box-sizing: border-box;
box-sizing: border-box;
.table-thead {
width: 1197px;
height: 44px;
margin: auto;
background: #0A1A33;
td {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #159AFF;
text-align: center;
white-space: nowrap;
}
}
.table-tbody {
height: 192px;
// width: 1775px;
margin: auto;
overflow-y: scroll;
table {
width: 100%;
tbody {
width: 100%;
td {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #FFFFFF;
text-align: center;
border-bottom: 1px dashed #6C8097
}
}
}
}
}
.item-table1 {
margin-top: 20px;
padding-top: 19px;
.table-thead {
width: 565.01px;
}
.table-tbody {
height: 144px;
}
}
}
}
}
.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;
// 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: 310px;
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;
}
</style>