Yangwl
/
LanJu_UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设备看板修改

Browse Source
master
LAPTOP-R6EHHS26\86155 8 months ago
parent a67866390a
commit 115ffa619d
4 changed files with 1938 additions and 1531 deletions
Show Stats Download Patch File Download Diff File

1
.env.development
Unescape Escape View File

@ -6,6 +6,7 @@ ENV = 'development'
# Open Platform
VUE_APP_BASE_API = '/dev-api'
# VUE_APP_BASE_API = '/prod-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

24
src/api/kanban/Packagingline.js
Unescape Escape View File

@ -0,0 +1,24 @@
import request from '@/utils/request'
// 获取工厂下拉列表
export function getBoardFactory(data) {
return request({
url: '/mes/wcsInterface/getBoardFactory',
method: 'post',
data: data
});
}
// 根据工厂获取产线
export function getDictData(data) {
return request({
url: '/quality/qcInterface/getDictData',
method: 'get',
params: data
});
}
export function getProduction15Days(data) {
return request({
url: '/quality/qcInterface/getProduction15Days',
method: 'post',
data: data
});
}

3023
src/views/kanban/Packagingline/index.vue
View File

File diff suppressed because it is too large Load Diff

413
src/views/kanban/equipment/index.vue
Unescape Escape View File

@ -9,19 +9,48 @@
<img src="../../../assets/images/logo.png" alt="" />
</div>
<div class="back">
<el-button @click="back()" type="primary" icon="el-icon-s-home"></el-button>
<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">
<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>
<el-date-picker
style="
margin-left: 10px;
background-color: #142945;
color: #ffffff;
height: 70%;
"
v-model="StartArray"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
value-format="yyyy-MM-dd"
end-placeholder="结束日期"
@change="handleDateChange"
>
</el-date-picker>
<!-- <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">
@ -40,15 +69,21 @@
<div class="itemtop">
<div class="left">
<div class="item-table">
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<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 style="height: 44px">
<td style="width: 8%">序号</td>
<td style="width: 18%">设备名称</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>
@ -56,14 +91,27 @@
<!-- <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 equipmentlist">
<td style="width: 8%;">{{ index + 1 }}</td>
<td style="width: 18%;">{{ n.equipmentName }}</td>
<td style="width: 20%;">{{ n.department || '无' }}</td>
<td style="width: 10%;">{{ n.dictLabel }}</td>
<td style="width: 12%;">{{ n.failureRate != null ? n.failureRate + '%' : '--' }}</td>
<td style="width: 12%;">{{ n.utilizationRatio != null ? n.utilizationRatio + '%' : '--' }}</td>
<tr
:class="[index % 2 == 1 ? 'active1' : 'active2']"
style="height: 48px"
:key="index"
v-for="(n, index) in equipmentlist"
>
<td style="width: 8%">{{ index + 1 }}</td>
<td style="width: 18%">{{ n.equipmentName }}</td>
<td style="width: 18%">{{ n.equipmentCode }}</td>
<td style="width: 20%">{{ n.department || "无" }}</td>
<td style="width: 10%">{{ n.dictLabel }}</td>
<td style="width: 12%">
{{ n.failureRate != null ? n.failureRate + "%" : "--" }}
</td>
<td style="width: 12%">
{{
n.utilizationRatio != null
? n.utilizationRatio + "%"
: "--"
}}
</td>
</tr>
</tbody>
</table>
@ -71,21 +119,25 @@
</div>
</div>
<div class="item-table item-table1">
<div class="titlebox" style="margin-bottom: 14px;">
<div class="titlebox" style="margin-bottom: 14px">
<div class="titlename">维修工单</div>
</div>
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<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 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>
@ -93,16 +145,22 @@
<!-- <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 repairlist">
<td style="width: 8%;">{{ index + 1 }}</td>
<td style="width: 12%;">{{ n.equipmentName }}</td>
<td style="width: 12%;">{{ n.equipmentCode }}</td>
<td style="width: 12%;">{{ n.equipmentLocation || '无' }}</td>
<td style="width: 12%;">{{ n.workFaultDesc }}</td>
<td style="width: 12%;">{{ n.teamName }}</td>
<td style="width: 10%;">{{ n.workHandle }}</td>
<td style="width: 18%;">{{ n.workPlanTime }}</td>
<tr
:class="[index % 2 == 1 ? 'active1' : 'active2']"
style="height: 48px"
:key="index"
v-for="(n, index) in repairlist"
>
<td style="width: 8%">{{ index + 1 }}</td>
<td style="width: 12%">{{ n.equipmentName }}</td>
<td style="width: 12%">{{ n.equipmentCode }}</td>
<td style="width: 12%">
{{ n.equipmentLocation || "无" }}
</td>
<td style="width: 12%">{{ n.workFaultDesc }}</td>
<td style="width: 12%">{{ n.teamName }}</td>
<td style="width: 10%">{{ n.workHandle }}</td>
<td style="width: 18%">{{ n.workPlanTime }}</td>
</tr>
</tbody>
</table>
@ -111,38 +169,35 @@
</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="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">
{{ equipmentinfo.totalEquipment }}
</span>
<span class="name1">
台
</span>
</div>
<div class="name2">
设备总数
<span class="name1"> 台 </span>
</div>
<div class="name2">设备总数</div>
</div>
<div class="box">
<div class="number">
<span class="number1" style="color: #FF4D4F;">
<span class="number1" style="color: #ff4d4f">
{{ equipmentinfo.faultEquipment }}
</span>
<span class="name1">
台
</span>
</div>
<div class="name2">
故障总数
<span class="name1"> 台 </span>
</div>
<div class="name2">故障总数</div>
</div>
</div>
</div>
@ -176,17 +231,21 @@
</div>
</div> -->
<div class="item-table item-table1">
<div class="titlebox" style="margin-bottom: 14px;">
<div class="titlebox" style="margin-bottom: 14px">
<div class="titlename">设备稳定性</div>
</div>
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<table
class="table-thead"
border="0"
cellpadding="0"
cellspacing="0"
>
<thead>
<tr style="height: 44px;">
<td style="width: 8%;">排名</td>
<td style="width: 15%;">设备名称</td>
<td style="width: 8%;">设备编码</td>
<td style="width: 12%;">MTBF</td>
<tr style="height: 44px">
<td style="width: 8%">排名</td>
<td style="width: 15%">设备名称</td>
<td style="width: 8%">设备编码</td>
<td style="width: 12%">MTBF</td>
</tr>
</thead>
</table>
@ -194,12 +253,18 @@
<!-- <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 equipmentstabilizelist">
<td style="width: 8%;">{{ index + 1 }}</td>
<td style="width: 15%;">{{ n.equipmentName }}</td>
<td style="width: 8%;">{{ n.equipmentCode }}</td>
<td style="width: 12%;">{{ n.mtbf != null ? n.mtbf + 'h' : '--' }}</td>
<tr
:class="[index % 2 == 1 ? 'active1' : 'active2']"
style="height: 48px"
:key="index"
v-for="(n, index) in equipmentstabilizelist"
>
<td style="width: 8%">{{ index + 1 }}</td>
<td style="width: 15%">{{ n.equipmentName }}</td>
<td style="width: 8%">{{ n.equipmentCode }}</td>
<td style="width: 12%">
{{ n.mtbf != null ? n.mtbf + "h" : "--" }}
</td>
</tr>
</tbody>
</table>
@ -207,17 +272,21 @@
</div>
</div>
<div class="item-table item-table1">
<div class="titlebox" style="margin-bottom: 14px;">
<div class="titlebox" style="margin-bottom: 14px">
<div class="titlename">设备维修质量</div>
</div>
<table class="table-thead" border="0" cellpadding="0" cellspacing="0">
<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%;">MTTR</td>
<tr style="height: 44px">
<td style="width: 8%">排名</td>
<td style="width: 12%">设备名称</td>
<td style="width: 12%">设备编码</td>
<td style="width: 12%">MTTR</td>
</tr>
</thead>
</table>
@ -225,12 +294,18 @@
<!-- <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 equipmentrepairlist">
<td style="width: 8%;">{{ index + 1 }}</td>
<td style="width: 12%;">{{ n.equipmentName }}</td>
<td style="width: 12%;">{{ n.equipmentCode }}</td>
<td style="width: 12%;">{{ n.rapairQuantity != null ? n.rapairQuantity + 'h' : '--' }}</td>
<tr
:class="[index % 2 == 1 ? 'active1' : 'active2']"
style="height: 48px"
:key="index"
v-for="(n, index) in equipmentrepairlist"
>
<td style="width: 8%">{{ index + 1 }}</td>
<td style="width: 12%">{{ n.equipmentName }}</td>
<td style="width: 12%">{{ n.equipmentCode }}</td>
<td style="width: 12%">
{{ n.mttr != null ? n.mttr + "h" : "--" }}
</td>
</tr>
</tbody>
</table>
@ -264,8 +339,7 @@ import moment from "moment";
// import Echarts3D2 from "./echarts3d2.vue";
export default {
name: "Index",
components: {
},
components: {},
data() {
return {
gettimedata: "",
@ -301,13 +375,13 @@ export default {
equipmentrepairlist: [],
equipmentstabilizelist: [],
equipmentinfo: [],
RefreshTime:null,
dictlist:[],
RefreshTime: null,
dictlist: [],
StartArray: [],
};
},
created() {
this.getdictlist()
this.getdictlist();
},
destroyed() {
clearInterval(this.time1);
@ -331,14 +405,14 @@ export default {
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
}, 1000);
},
getdictlist(){
getdictlist() {
getdictlist({
pageNum: 1,
pageSize: 10,
dictType: 'equipment_status',
dictType: "equipment_status",
}).then((response) => {
if (response) {
this.dictlist = response.rows
this.dictlist = response.rows;
}
});
},
@ -350,8 +424,8 @@ export default {
if (response) {
_this.getLineList = response.data;
_this.selectxt = _this.getLineList[0].parentName;
_this.getdatalist(_this.selectxt)
_this.getDeviceRefreshTime()
_this.getdatalist(_this.selectxt);
_this.getDeviceRefreshTime();
}
});
},
@ -359,89 +433,115 @@ export default {
const _this = this;
getDeviceRefreshTime().then((response) => {
if (response.data) {
console.log(response.data)
this.RefreshTime = response.data
this.RefreshTime = 1
console.log(response.data);
this.RefreshTime = response.data;
this.RefreshTime = 1;
this.time1 = setInterval(() => {
_this.getdatalist(_this.selectxt)
}, 1000*60*this.RefreshTime);
_this.getdatalist(_this.selectxt);
}, 1000 * 60 * this.RefreshTime);
}
});
},
getdatalist(Name) {
const _this = this;
let poolName = 'ds_' + Name
let poolName = "ds_" + Name;
getRepairWorkOrder({
poolName: poolName,
}).then((response) => {
if (response.data) {
response.data.forEach((item) => {
item.workPlanTime = moment(item.workPlanTime).format('YYYY-MM-DD HH:mm:ss')
item.workPlanTime = moment(item.workPlanTime).format(
"YYYY-MM-DD HH:mm:ss"
);
});
_this.repairlist = response.data
_this.repairlist = response.data;
}
});
getEquipmentInfo({
poolName: poolName,
startTime: _this.StartArray[0],
endTime: _this.StartArray[1],
}).then((response) => {
if (response.data) {
_this.equipmentlist = response.data
_this.equipmentlist = response.data;
_this.equipmentlist.forEach((item) => {
_this.dictlist.forEach((m) => {
if(item.equipmentStatus == m.dictValue){
item.dictLabel = m.dictLabel
if (item.equipmentStatus == m.dictValue) {
item.dictLabel = m.dictLabel;
}
});
if (item.failureRate) {
item.failureRate = parseFloat(item.failureRate).toFixed(2)
item.failureRate = parseFloat(item.failureRate).toFixed(2);
}
if (item.utilizationRatio) {
item.utilizationRatio = parseFloat(item.utilizationRatio).toFixed(2)
item.utilizationRatio = parseFloat(item.utilizationRatio).toFixed(
2
);
}
});
}
});
getRepairQuantity({
poolName: poolName,
startTime: _this.StartArray[0],
endTime: _this.StartArray[1],
}).then((response) => {
if (response.data) {
_this.equipmentrepairlist = response.data
_this.equipmentrepairlist = response.data;
}
});
equipmentIntactRate({
poolName: poolName,
startTime: _this.StartArray[0],
endTime: _this.StartArray[1],
}).then((response) => {
if (response.data) {
_this.equipmentinfo = response.data
_this.initChart1()
_this.equipmentinfo = response.data;
_this.initChart1();
}
});
equipmentStability({
poolName: poolName,
startTime: _this.StartArray[0],
endTime: _this.StartArray[1],
}).then((response) => {
if (response.data) {
_this.equipmentstabilizelist = response.data
_this.equipmentstabilizelist = response.data;
}
});
},
// 选择时间
handleDateChange(value) {
console.log("选择的日期:", value);
if (value == null) {
this.StartArray = [];
this.getdatalist(this.selectxt);
} else {
if(this.StartArray[0] == this.StartArray[1]){
this.StartArray[0] = moment(this.StartArray[0]).format("YYYY-MM-DD 00:00:00 ")
this.StartArray[1] = moment(this.StartArray[1]).add(1, 'day').startOf('day').format('YYYY-MM-DD 00:00:00');
}
this.StartArray = value;
this.getdatalist(this.selectxt);
}
},
initChart1() {
const _this = this
let intactRate = 0
let numberAngle = 180
console.log(_this.equipmentinfo.intactRate)
const _this = this;
let intactRate = 0;
let numberAngle = 180;
console.log(_this.equipmentinfo.intactRate);
if (_this.equipmentinfo.intactRate) {
intactRate = _this.equipmentinfo.intactRate
numberAngle = parseInt(180 -_this.equipmentinfo.intactRate * 1.8)
intactRate = _this.equipmentinfo.intactRate;
numberAngle = parseInt(180 - _this.equipmentinfo.intactRate * 1.8);
}
console.log(numberAngle)
console.log(numberAngle);
var myChart1 = echarts.init(document.querySelector("#echart1"));
var option1 = {
//提示框组件。开发实际中去掉了指针，提示框可以不用设置。
tooltip: {
formatter: "{a} <br/>{b} : {c}%",
},
grid: {
},
grid: {},
//下面属性才是仪表盘的核心！！反正我是这么认为的！！！
series: [
{
@ -661,7 +761,7 @@ export default {
color: "#fff",
splitNumber: 4, //刻度数量
type: "gauge",
name: '完好设备占比',
name: "完好设备占比",
//半径
radius: 135,
//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
@ -730,7 +830,7 @@ export default {
title: {
show: true,
offsetCenter: [0, "40%"], // x, y，单位px
color: "#fff", // 文字的颜色,默认 #333。
color: "#fff", // 文字的颜色,默认 #333。
fontSize: 20,
},
//仪表盘详情，用于显示数据。
@ -743,13 +843,11 @@ export default {
color: "#fff",
fontSize: 30,
},
},
data: [
{
value: intactRate,
},
],
},
],
@ -762,7 +860,7 @@ export default {
this.optionDatalist2 = [];
this.optionDatalist3 = [];
this.optionDatalist4 = [];
_this.getdatalist(_this.selectxt)
_this.getdatalist(_this.selectxt);
},
//左侧第一个选择类型下拉框 回调函数
@ -865,7 +963,8 @@ export default {
.item-table {
width: 1243px;
height: 292px;
background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
background: url("../../../assets/images/equipment/bg-border1.png")
no-repeat;
background-size: 100% 100%;
padding: 27px 21px 30px 25px;
box-sizing: border-box;
@ -875,13 +974,13 @@ export default {
width: 1197px;
height: 44px;
margin: auto;
background: #0A1A33;
background: #0a1a33;
td {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #159AFF;
color: #159aff;
text-align: center;
white-space: nowrap;
}
@ -903,9 +1002,9 @@ export default {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #FFFFFF;
color: #ffffff;
text-align: center;
border-bottom: 1px dashed #6C8097
border-bottom: 1px dashed #6c8097;
}
}
}
@ -926,7 +1025,8 @@ export default {
margin-left: 23px;
width: 610px;
height: 604px;
background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
background: url("../../../assets/images/equipment/bg-border1.png")
no-repeat;
background-size: 100% 100%;
// padding: 27px 21px 30px 25px;
box-sizing: border-box;
@ -947,7 +1047,7 @@ export default {
z-index: 9999;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
}
.equipmentinfobox {
@ -959,7 +1059,8 @@ export default {
.box {
width: 186px;
height: 180px;
background: url('../../../assets/images/equipment/number.png') no-repeat;
background: url("../../../assets/images/equipment/number.png")
no-repeat;
background-size: 100% 100%;
text-align: center;
padding-top: 30px;
@ -969,13 +1070,13 @@ export default {
.number1 {
font-size: 60px;
font-weight: 500;
color: #66FFFF;
color: #66ffff;
}
.name1 {
font-size: 32px;
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
}
}
@ -983,7 +1084,7 @@ export default {
margin-top: 15px;
font-size: 32px;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
}
}
}
@ -998,7 +1099,8 @@ export default {
.item-table {
width: 610px;
height: 292px;
background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
background: url("../../../assets/images/equipment/bg-border1.png")
no-repeat;
background-size: 100% 100%;
padding: 27px 21px 30px 25px;
box-sizing: border-box;
@ -1008,13 +1110,13 @@ export default {
width: 100%;
height: 44px;
margin: auto;
background: #0A1A33;
background: #0a1a33;
td {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #159AFF;
color: #159aff;
text-align: center;
white-space: nowrap;
}
@ -1036,9 +1138,9 @@ export default {
font-size: 19px;
font-family: NotoSansHans-Medium, NotoSansHans;
font-weight: 500;
color: #FFFFFF;
color: #ffffff;
text-align: center;
border-bottom: 1px dashed #6C8097
border-bottom: 1px dashed #6c8097;
}
}
}
@ -1087,6 +1189,7 @@ export default {
.factory {
display: flex;
align-items: center;
// justify-content: space-around;
}
@ -1206,7 +1309,7 @@ export default {
}
.active1 {
background-color: #0D1B2F;
background-color: #0d1b2f;
}
.active2 {
@ -1232,4 +1335,20 @@ export default {
-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 文本的颜色 */
}
</style>

Write Preview
Loading…
Cancel
Save