|
<template>
|
<div class="home" ref="homeRef">
|
<!-- v-if="Tasks&&Tasks.length>0" -->
|
<template >
|
<div class="left">
|
<p class="title">
|
<template v-if="Number(ChannelAmount)>1">
|
<span
|
class="font set-title"
|
style="float: left; margin-right: 15px;"
|
@click="cutClick(1)"
|
>
|
<img style="width:32px;" v-if="activeName == 1" src="../../public/one-blue.png" />
|
<span v-else>
|
<img style="width:32px;" src="../../public/one.png" />
|
</span>
|
</span>
|
<span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)">
|
<img style="width:32px;" v-if="activeName == 2" src="../../public/two-blue.png" />
|
<img style="width:32px;" v-else src="../../public/two.png" />
|
</span>
|
<span
|
class="font set-title"
|
style="float: left;"
|
@click="cutClick(3)"
|
>
|
<img style="width:32px;" v-if="activeName == 3" src="../../public/right-blue.png" />
|
<span v-else>
|
<img style="width:32px;" src="../../public/right.png" />
|
</span>
|
</span>
|
</template>
|
智能工作台
|
<span
|
class="font el-icon-setting set-title"
|
style="float: right"
|
@click="setUrl"
|
></span>
|
<span
|
style="float: right;margin-right:20px;font-size:28px;line-height:25px;"
|
@click="taskClick"
|
>
|
<el-badge :value="TaskCount" :class="(TaskCount==0||isTipShow)?'item color_666':'item color_fff'">
|
<i class="el-icon-chat-dot-round" />
|
</el-badge>
|
</span>
|
</p>
|
<div
|
:class="(activeName == 1||activeName == 3) ? 'active-one' : 'active-two'"
|
v-for="(taskData, index) in Tasks"
|
:key="index"
|
>
|
<template v-if="taskData">
|
<div class="gong-date">
|
工序运行时间：{{ getFormatTime(taskData.Procedure.startTime) }}
|
</div>
|
<div class="statelist">
|
<span class="title-item"
|
>工单编号:
|
<span class="color_4efefa">{{
|
taskData.Order.workOrderId || "--"
|
}}</span>
|
</span>
|
<span class="title-item"
|
>当前工序:
|
<span class="color_4efefa">{{
|
taskData.Procedure.procedure.procedureName || "--"
|
}}</span>
|
</span>
|
<span class="title-item"
|
>后道工序:
|
<span class="color_4efefa">
|
{{ taskData.Procedure.procedure.nextProcedureName || "--" }}
|
</span>
|
</span>
|
<!-- <span class="title-item"
|
>工作人数:
|
<span class="color_4efefa">
|
<span
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.workers
|
"
|
>{{ taskData.Procedure.procedure.workers.length }}</span
|
>
|
<span v-else>0</span>
|
人
|
</span>
|
</span> -->
|
</div>
|
<div class="gongx">
|
<el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex ?? 0" finish-status="success" class="steps">
|
<el-step icon="" :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step>
|
</el-steps>
|
</div>
|
<div class="content">
|
<div class="content_left">
|
<div class="content-top">
|
<div class="small_title">加工数</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd
|
style="font-size: 35px; font-weight: 600"
|
class="color_green"
|
>
|
{{ processingStatistics(taskData).finishNumber }}
|
<!-- {{ taskData.Order.unit }}-->
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="content-top">
|
<div class="small_title">目标数</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd
|
style="font-size: 35px; font-weight: 600"
|
class="color_green"
|
>
|
{{ processingStatistics(taskData).totalNumber }}
|
<!-- {{ taskData.Order.unit }}-->
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
<div class="content_right">
|
<div class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData,index)">
|
<img class="blink" v-if="taskData.isUpdateIcon" src="../../public/shan.gif" />
|
<span v-else class="tip"></span>
|
</div>
|
<el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true">
|
<el-descriptions-item label="产品名称">{{
|
taskData.Order.productName || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="数量"
|
>{{ taskData.Order.amount || 0
|
}}{{ taskData.Order.unit }}</el-descriptions-item
|
>
|
<el-descriptions-item label="交货日期">{{
|
taskData.Order.deliverDate || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="工时">
|
{{ taskData.Procedure.procedure.workHours || "--" }}
|
</el-descriptions-item>
|
<el-descriptions-item label="计划时间"
|
>{{ formatDate(taskData.Procedure.startTime) || "--" }}
|
-
|
{{ formatDate(taskData.Procedure.endTime) }}</el-descriptions-item
|
>
|
<el-descriptions-item label="通道">
|
{{ channelNameConfig[taskData.Channel] || "--" }}
|
</el-descriptions-item>
|
<el-descriptions-item label="客户编码">{{
|
taskData.Order.customer || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="参数要求">{{
|
taskData.Order.parameter || "--"
|
}}</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions :column="1" :colon="true">
|
<el-descriptions-item label="完成度" style="width: 100%">
|
<!--:text-format="format" -->
|
<el-progress
|
define-back-color="#132f6e"
|
color="#00cc66"
|
text-color="#fff"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="calculateProgress(processingStatistics(taskData))"
|
></el-progress>
|
</el-descriptions-item>
|
<!-- <el-descriptions-item label="合格率" style="width: 100%">
|
<el-progress
|
define-back-color="#007101"
|
color="#00CC66"
|
text-color="#fff"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="passrate"
|
></el-progress>
|
</el-descriptions-item> -->
|
</el-descriptions>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="bottom_list">
|
<div class="bottom-title">输入资源</div>
|
<el-carousel
|
direction="vertical"
|
height="calc(100% - 0px)"
|
:interval="500"
|
class="card-box"
|
:ref="'cardBox1&' + index"
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.inputMaterials
|
"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in taskData.inputMaterials"
|
>
|
<div
|
class="card"
|
:key="index2"
|
v-for="(list, index2) in item"
|
>
|
<div class="card_content">
|
<div class="card_contentLeft font_dian">
|
<el-popover
|
width="200"
|
:content="list.materialId"
|
placement="top-start"
|
trigger="click"
|
>
|
<span slot="reference">{{ list.materialId }}</span>
|
</el-popover>
|
</div>
|
</div>
|
<div class="card-top-input-out-l">
|
<div class="font_dian">
|
<!-- 设备12<i
|
style="font-size: 14px"
|
class="el-icon-right font-arrow-20"
|
></i>
|
设备13 -->
|
<el-popover
|
width="200"
|
:content="list.materialName"
|
placement="top-start"
|
trigger="click"
|
>
|
<span slot="reference">{{ list.materialName }}</span>
|
</el-popover>
|
</div>
|
</div>
|
<div class="card-top-input-out-r">
|
<div style="line-height: 45px; text-align: center">
|
{{ list.amount }} {{ list.unit }}
|
</div>
|
<!-- <span class="card-top-r-t">生产完成</span>
|
<span class="card-top-r-b">12月28日 08:24</span> -->
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<el-button type="primary" class="color_f70f83 bottom-box-btn">
|
<i class="el-icon-phone-outline" />物料呼叫</el-button
|
>
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20 color_318583"></i>
|
<div class="bottom_list">
|
<div class="bottom-title">
|
当前工序:{{ taskData.Procedure.procedure.procedureName || "" }}
|
</div>
|
<el-carousel
|
direction="vertical"
|
height="calc(100% - 0px)"
|
:interval="500"
|
class="card-box"
|
:ref="'cardBox2&' + index"
|
v-if="taskData.Procedure.procedure && taskData.procedureList"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in taskData.procedureList"
|
>
|
<div
|
:key="index2"
|
v-for="(list, index2) in item"
|
>
|
<div
|
class="card"
|
v-if="list.name == '工序'">
|
<div class="card_content">
|
<div class="card_contentLeft color_blue font_dian">
|
<!-- {{ list.deviceName }} -->
|
<el-popover
|
width="200"
|
:content="list.deviceName"
|
placement="top-start"
|
trigger="click"
|
>
|
<span slot="reference">{{ list.deviceName }}</span>
|
</el-popover>
|
<!-- <span style="float: right">6m/s</span> -->
|
</div>
|
</div>
|
<div class="card_top-3">
|
<span class="card-top-r-t"
|
>完成进度：{{calculateProgress(processingStatistics(taskData))}}</span
|
>
|
<span class="card-top-r-b">
|
<el-progress
|
define-back-color="#132f6e"
|
color="#00cc66"
|
text-color="#fff"
|
:text-inside="true"
|
:stroke-width="10"
|
:percentage="calculateProgress(processingStatistics(taskData))"
|
:show-text="false"
|
></el-progress>
|
</span>
|
</div>
|
<div class="card_top-2">
|
<div style="line-height: 45px; text-align: center">
|
{{ displayProcedureStatus(taskData) }}
|
</div>
|
<!-- <span class="card-top-r-t">完成进度：50%</span>
|
<span class="card-top-r-b">12月28日 08:24</span> -->
|
</div>
|
</div>
|
<div v-else class="process-params">
|
<div class="process-params-title">
|
<el-popover
|
width="200"
|
:content="list.number"
|
placement="top-start"
|
trigger="click"
|
>
|
<span slot="reference">工艺编号：{{ list.number }}</span>
|
</el-popover>
|
|
</div>
|
<div class="process-params-value">
|
<!-- 工艺参数-->
|
{{mergeProcessParams(taskData.Arr)}}
|
</div>
|
|
<!-- <div
|
style="
|
font-size: 14px;
|
color: #cfcfcf;
|
line-height: 20px;
|
"
|
>
|
工艺的具体信息请点击控制查看！
|
</div> -->
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<p
|
style="font-size: 22px; margin-left: 12px; margin-top: 50px"
|
></p>
|
<div class="right-small-btn bottom-box-btn">
|
<el-button type="primary"> 打印</el-button>
|
|
<el-popover
|
v-if="taskData.Procedure.Status && taskData.Procedure.Status!==3"
|
placement="top-end"
|
width="160"
|
class="button-finish"
|
v-model="finishShow['finishShow&'+index]"
|
trigger="click"
|
:ref="'popoverRef_' + index"
|
>
|
<p><i class="el-icon-error" style="color:red;margin-right:5px;"/>请确认是否已完成该生产任务?</p>
|
<div style="text-align: right; margin: 0">
|
<el-button size="mini" @click="closePopover(index)">
|
取消</el-button
|
>
|
<el-button
|
type="primary"
|
size="mini"
|
class="color_f70f83"
|
@click="finishClick(index, taskData)"
|
>
|
确定</el-button
|
>
|
</div>
|
<el-button type="primary" slot="reference"> 完成</el-button>
|
</el-popover>
|
<el-button v-else type="primary" class="huise"> 完成</el-button>
|
</div>
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20 color_318583"></i>
|
<div class="bottom_list">
|
<div class="bottom-title">
|
<span>输出资源</span>
|
</div>
|
<el-carousel
|
direction="vertical"
|
height="calc(100% - 0px)"
|
:interval="500"
|
:ref="'cardBox3&' + index"
|
class="card-box"
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.outputMaterials
|
"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in taskData.outputMaterials"
|
>
|
<div
|
class="card-box"
|
:key="index2"
|
v-for="(list, index2) in item"
|
>
|
<div class="card">
|
<div class="card_content">
|
<div class="card_contentLeft font_dian">
|
<el-popover
|
width="200"
|
:content="list.materialId"
|
placement="top-start"
|
trigger="click"
|
>
|
<span slot="reference">{{ list.materialId }}</span>
|
</el-popover>
|
</div>
|
</div>
|
<div class="card-top-input-out-l">
|
<div class="font_dian">
|
<el-popover
|
width="200"
|
:content="list.materialName"
|
placement="top-start"
|
trigger="click"
|
>
|
<span slot="reference">{{ list.materialName }}</span>
|
</el-popover>
|
</div>
|
</div>
|
<div class="card-top-input-out-r">
|
<div style="line-height: 45px; text-align: center">
|
{{ list.amount }} {{ list.unit }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<el-button type="primary" class="color_f70f83 bottom-box-btn">
|
<i class="el-icon-phone-outline" />运输呼叫</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<!-- 2个任务的时候，第二个任务为空的时候显示 -->
|
<template
|
v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)"
|
>
|
|
<el-empty description="暂无任务..."></el-empty>
|
</template>
|
</div>
|
</div>
|
<div class="right">
|
<div class="right_top">
|
<div class="right-top-l">作业状态</div>
|
<div class="time">
|
<dl>
|
<dd>
|
<span style="font-size: 32px">{{ formatTime3 }}</span>
|
</dd>
|
<dd>
|
<span style="font-size: 12px">{{ formatTime2 }}</span>
|
<!--margin-right: 10px <span style="font-size: 14px">星期四</span> -->
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="right-top-m">
|
设备状态:
|
<template v-for="(plcStatus, channel) in displayPLCStatus">
|
<!-- 1断开2生产3待机 -->
|
<span class="plc-status" style="position: relative" v-if="plcStatus">
|
<el-popover
|
v-if="plcStatus === 1&&plcNotConnected"
|
width="180"
|
:content="plcNotConnected"
|
placement="top-end"
|
trigger="click"
|
>
|
<span slot="reference">
|
<img src="../../public/duan.png"/>
|
断开
|
</span>
|
</el-popover>
|
<span v-else>
|
<img v-if="plcStatus === 1&&!plcNotConnected" src="../../public/duan.png"/>
|
<img v-else src="../../public/lian.png"/>
|
{{ plcStatus === 1 ? '断开' : (plcStatus === 2 ? '生产中' : '待机') }}
|
</span>
|
</span>
|
</template>
|
</div>
|
<div class="right-top-m-btn">
|
<!-- <el-button type="primary" @click="controlClick"> 控制</el-button> -->
|
</div>
|
<div class="right_dutyLst">
|
<div class="right-small-title">当前值班</div>
|
|
<div class="right-person-box" v-if="workers && workers.length > 0">
|
<dl
|
class="right-small-person"
|
v-for="(item, index) in deduplicateWorkers(displayWorkers())"
|
:key="index"
|
>
|
<dt>
|
<!-- <el-avatar
|
class="img-class"
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
></el-avatar> -->
|
<i
|
class="el-icon-s-custom"
|
style="margin: 10px; font-size: 40px"
|
/>
|
</dt>
|
<span
|
style="font-size: 20px; font-weight: 600; margin-right: 10px"
|
>{{ item.workerName || "" }}</span
|
>
|
<!-- <span>{{ item.phoneNum || "" }}</span> -->
|
<span class="color_yellow"><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /></span>
|
</dl>
|
|
</div>
|
|
<!-- <div
|
style="
|
width: 100%;
|
font-size: 18px;
|
font-weight: 600;
|
margin-top: 50px;
|
text-align: center;
|
line-height: 50px;
|
"
|
>
|
编号：{{ taskData.Procedure.procedure.workers.workerId || "" }}
|
</div> -->
|
</div>
|
<div class="right_base">
|
<div class="right-small-title" style="line-height: 40px;margin-top:20px;">知识库</div>
|
<Knowledge />
|
<div class="right-base-btn call">
|
<el-button type="primary"
|
><i class="el-icon-phone-outline" /> 红灯呼叫</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- -->
|
<!-- <template v-else>
|
<div class="home-img-box">
|
<div class="bg-title">
|
<img src="../../public/bg-title.png" />
|
<span class="bg-title-span">设备实时生产看板</span>
|
<div class="bg-date">
|
<span>{{ formatTime3 }}</span
|
><br />{{ formatTime2 }}
|
</div>
|
<span
|
class="font el-icon-setting set-title bg-set"
|
@click="setUrl"
|
></span>
|
</div>
|
<div class="yuan">
|
<img src="../../public/yuan.png" />
|
<div class="btn-img">
|
<div class="font_size_16" style="line-height: 5; margin-top: 18%">
|
<span v-if="showCountDown"
|
>距离任务开始时间：
|
<span class="color_red">{{ countDownHour }}</span
|
>时 <span class="color_red">{{ countDownMinute }}</span
|
>分</span
|
>
|
<span v-else>暂无任务，休息一下吧...</span>
|
</div>
|
<el-button type="primary" @click="reloadPage">刷新任务</el-button>
|
</div>
|
</div>
|
</div>
|
|
</template> -->
|
<!-- 控制的弹框 -->
|
<TaskControlModal
|
ref="control"
|
:activeName="activeName"
|
@getSetProductNumber="reloadPage"
|
@isTip="isTip"
|
/>
|
<!-- 工艺模型 -->
|
<ProcessModel
|
ref="processModel"
|
:listData="listData"
|
@updateGet="updateGet"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getTaskInfo,
|
finishTask,
|
getMiniDictList,
|
saveMiniDict,
|
startTask,
|
getProgress,
|
countdown,
|
getTaskUnStarted,
|
processModelList,
|
} from "@/api/home/index"; // 产线
|
import Card from "@/components/Card.vue";
|
import Knowledge from "../components/Knowledge.vue";
|
import AddControl from "../components/AddControl.vue";
|
import AddIssue from "../components/AddIssue.vue";
|
import ProcessModel from "../components/ProcessModel.vue";
|
import TaskControlModal from "@/components/TaskControlModal.vue";
|
import {channelNameConfig} from "@/common/constants";
|
import _ from 'lodash'
|
export default {
|
components: {
|
TaskControlModal,
|
Card,
|
Knowledge,
|
AddControl,
|
AddIssue,
|
ProcessModel,
|
},
|
data() {
|
return {
|
pollingTaskCountTimer: null,
|
activeName: 1,
|
progress: 70, //进度
|
passrate: 30, //合格率
|
production: 25, //生产中
|
formatTime2: "",
|
formatTime3: "",
|
// 右侧完成
|
finishShow:{},
|
workers:[],
|
// 保存当前不同通道的值班人
|
channelWorkersMap:{0:[],1:[]},
|
TasksCopy:[],
|
Tasks: [
|
{
|
Order: {
|
amount: "",
|
customer: "",
|
deliverDate: "",
|
endTime: "",
|
orderAttr: [],
|
orderId: "",
|
parameter: "",
|
productId: "",
|
productName: "",
|
startTime: "",
|
unit: "",
|
},
|
Procedure: {
|
id: 1,
|
procedure: {
|
deviceId: "",
|
endTime: "",
|
inputMaterials: [
|
{
|
amount: 1,
|
materialId: 1,
|
materialName: 1,
|
},
|
],
|
outputMaterials: [],
|
procedureId: "",
|
procedureName: "",
|
startTime: "",
|
workHours: "",
|
},
|
},
|
inputMaterials: [],
|
outputMaterials: [],
|
procedureList: [],
|
},
|
],
|
taskData: {
|
Order: {
|
amount: "",
|
customer: "",
|
deliverDate: "",
|
endTime: "",
|
orderAttr: [],
|
orderId: "",
|
parameter: "",
|
productId: "",
|
productName: "",
|
startTime: "",
|
unit: "",
|
},
|
Procedure: {
|
id: 1,
|
procedure: {
|
deviceId: "",
|
endTime: "",
|
inputMaterials: [
|
{
|
amount: 1,
|
materialId: 1,
|
materialName: 1,
|
},
|
],
|
outputMaterials: [],
|
procedureId: "",
|
procedureName: "",
|
startTime: "",
|
workHours: "",
|
workers: [
|
{
|
phoneNum: "",
|
workerId: "",
|
workerName: "",
|
},
|
],
|
},
|
},
|
},
|
totalNumber: 0,
|
showCountDown: false,
|
countDownHour: 0,
|
countDownMinute: 0,
|
Arr: [],
|
ArrError:'',
|
// 记录定时器状态
|
procInfoTimer: null,
|
cutdownTimer: null,
|
ProcessModelTimer: null,
|
TaskCount:0,
|
PLCStatusMap:{0:0,1:0},
|
isTipShow:false,
|
// isFinsh:0,
|
safeProduce:'',
|
// 设备断开的原因
|
plcNotConnected:'',
|
ChannelAmount:0,
|
object:{
|
Order: {},
|
Procedure: {
|
procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
|
},
|
inputMaterials: [],
|
outputMaterials: [],
|
procedureList: [],
|
},
|
processList:[],
|
listData:[],
|
resResult:[],
|
resprocInfoTimer:null,
|
channelNameConfig: channelNameConfig,
|
index:null,
|
};
|
},
|
mounted() {
|
// setInterval(() => {
|
// this.progress = this.getRandomNumber(1, 100);
|
// this.passrate = this.getRandomNumber(1, 100);
|
// this.production = this.getRandomNumber(1, 100);
|
// }, 3000);
|
this.getDate3();
|
this.getDate2();
|
setInterval(() => {
|
this.getDate3();
|
this.getDate2();
|
}, 5000);
|
|
let channelType = this.getChannelTypeFromUrl()
|
channelType = channelType ?? 1
|
this.activeName = channelType
|
this.getTaskInfo(channelType);
|
this.getTaskCountStatistics()
|
},
|
beforeDestroy() {
|
clearTimeout(this.pollingTaskCountTimer)
|
clearTimeout(this.procInfoTimer)
|
clearTimeout(this.ProcessModelTimer)
|
},
|
watch:{
|
// isFinsh(){
|
// if(this.isFinsh==this.Tasks.length){
|
// this.getStartArr()
|
// }
|
// }
|
},
|
computed:{
|
displayPLCStatus(){
|
let PLCStatus = []
|
if (this.activeName===1){
|
PLCStatus =[this.PLCStatusMap[0]]
|
}else if (this.activeName===2){
|
PLCStatus =[this.PLCStatusMap[0],this.PLCStatusMap[1]]
|
}else if (this.activeName===3){
|
PLCStatus =[this.PLCStatusMap[1]]
|
}else {
|
return []
|
}
|
|
return PLCStatus
|
}
|
},
|
methods: {
|
newTaskPlaceholder(channel){
|
return {
|
Order: {},
|
Procedure: {
|
procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
|
},
|
Channel:channel,
|
inputMaterials: [],
|
outputMaterials: [],
|
procedureList: [],
|
}
|
},
|
/**
|
* 展示工序状态
|
* 如果PLC的状态是待机要跟随PLC状态
|
* @param taskData
|
* @return {string}
|
*/
|
displayProcedureStatus(taskData){
|
if (taskData?.plcStatus === 3){
|
return '待机'
|
}
|
if (!taskData?.Procedure?.Status){
|
return ''
|
}
|
if (taskData.Procedure.Status===3){
|
return '生产完成'
|
}else{
|
return '生产中'
|
}
|
},
|
/**
|
* 从任务中获取加工数和目标数
|
* @param taskData
|
* @return {{totalNumber: number, finishNumber: number}}
|
*/
|
processingStatistics(taskData){
|
const totalNumber = taskData?.totalNumber ?? 0
|
const finishNumber = taskData?.finishNumber ?? 0
|
|
return {
|
/** 目标数 */
|
totalNumber: +totalNumber,
|
/** 加工数 */
|
finishNumber: +finishNumber,
|
}
|
},
|
/**
|
* 计算生产进度
|
* @param {{totalNumber: number, finishNumber: number}} statistics
|
* @return {number} 进度,0~100
|
*/
|
calculateProgress(statistics){
|
if (statistics.finishNumber === 0){
|
return 0
|
}
|
if (statistics.finishNumber === statistics.totalNumber){
|
return 100
|
}
|
|
const result = Math.floor(statistics.finishNumber / statistics.totalNumber * 100)
|
return result > 100 ? 100 : result
|
},
|
deduplicateWorkers(workers){
|
return _.uniqBy(workers,ele=>ele.workerName)
|
},
|
updateGet(number,val){
|
if(val){
|
this.getTaskInfo(this.activeName,'new')
|
return true;
|
}
|
this.listData.number=number
|
if(this.index){
|
this.TasksCopy[this.index].number=number
|
}
|
},
|
getModelList(){
|
for (let i in this.TasksCopy){
|
this.TasksCopy[i].isUpdateIcon=false;
|
if(this.TasksCopy[i].Procedure.ID&&this.TasksCopy[i].number){
|
processModelList({
|
procedureId: this.TasksCopy[i].Procedure.ID,
|
page: 1,
|
pageSize:6,
|
number:this.TasksCopy[i].number
|
}).then(res=>{
|
if(res.code==200){
|
this.processList=res.data?res.data:[];
|
if(this.processList.length>0){
|
for(let j in this.processList){
|
if(this.processList[j].isUpdate){
|
this.TasksCopy[i].isUpdateIcon=true;
|
this.$forceUpdate()
|
break;
|
}
|
}
|
}
|
}
|
this.resResult[i]=res;
|
console.log( this.resResult[i],'===res111')
|
})
|
}
|
}
|
},
|
processModelClick(list,index){
|
this.listData=list;
|
this.index=index
|
if( Object.keys(this.listData).length > 0){
|
if(this.listData.Procedure.ID&&this.listData.number){
|
this.$refs.processModel.islook=true
|
return true;
|
}
|
}
|
this.$message.error('当前工序无编号，无法查看工序!')
|
},
|
getProcessModelList(){
|
this.getModelList()
|
let string=false;
|
if(this.resResult.length>0){
|
for(let i in this.resResult){
|
if(this.resResult[i]){
|
string=false;
|
}
|
}
|
}
|
if (!this.ProcessModelTimer&&!string) {
|
this.ProcessModelTimer = setInterval(() => {
|
this.resResult=[]
|
this.getModelList();
|
}, 5000)
|
}
|
},
|
mergeProcessParams(params){
|
if (params?.length){
|
return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ')
|
}else{
|
return ''
|
}
|
},
|
taskClick(){
|
if(this.TaskCount>0){
|
// this.getStartArr()
|
this.$refs.control.show=true
|
}else{
|
this.$message({
|
message:'目前没有任务！',
|
type: 'error',
|
duration: 3 * 1000
|
})
|
}
|
},
|
isTip(val){
|
this.isTipShow=val
|
},
|
cutClick(val) {
|
this.activeName = val;
|
this.updateChannelTypeToUrl(val)
|
if(this.activeName==2){
|
this.Tasks=this.TasksCopy.slice(0,2)
|
if(this.Tasks.length<2){
|
if(this.Tasks.length==0){
|
this.Tasks.push(this.object)
|
}
|
this.Tasks.push(this.object)
|
}
|
}else if(this.activeName==1){
|
this.Tasks=this.TasksCopy.slice(0,1)
|
if(this.Tasks.length<1){
|
this.Tasks.push(this.object)
|
}
|
}else if(this.activeName==3){
|
this.Tasks=this.TasksCopy.slice(1)
|
if(this.Tasks.length<1){
|
this.Tasks.push(this.object)
|
}
|
}
|
},
|
reloadPage(val) {
|
// window.location.reload();
|
this.getTaskInfo(val);
|
},
|
getcountdown() {
|
countdown().then((res) => {
|
if (res.code == 200) {
|
this.showCountDown = res.data.ShowCountDown
|
? res.data.ShowCountDown
|
: false;
|
this.countDownHour = res.data.CountDownHour
|
? res.data.CountDownHour
|
: 0;
|
this.countDownMinute = res.data.CountDownMinute
|
? res.data.CountDownMinute
|
: 0;
|
if(this.countDownHour==0&& this.countDownMinute==0){
|
this.getTaskInfo();
|
}
|
}
|
});
|
},
|
getDateObj(date, fmt) {
|
if (/(y+)/.test(fmt)) {
|
fmt = fmt.replace(
|
RegExp.$1,
|
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
|
);
|
}
|
let o = {
|
"M+": date.getMonth() + 1,
|
"d+": date.getDate(),
|
"h+": date.getHours(),
|
"m+": date.getMinutes(),
|
"s+": date.getSeconds(),
|
};
|
for (let k in o) {
|
if (new RegExp(`(${k})`).test(fmt)) {
|
let str = o[k] + "";
|
fmt = fmt.replace(
|
RegExp.$1,
|
RegExp.$1.length === 1 ? str : this.padLeftZero(str)
|
);
|
}
|
}
|
return fmt;
|
},
|
padLeftZero(str) {
|
return ("00" + str).substr(str.length);
|
},
|
// 格式化时间 ==> yyyy-mm-dd
|
formatDate(value) {
|
if (value) {
|
const now = value ? new Date(value * 1000) : new Date();
|
let time = this.getDateObj(now, "MM-dd hh:mm");
|
return time;
|
} else {
|
return "";
|
}
|
},
|
// 格式化时间 ==> yyyy-mm-dd
|
formatDate2(value) {
|
if (value) {
|
const now = value ? new Date(value * 1000) : new Date();
|
let time = this.getDateObj(now, "yyyy/MM/dd hh:mm:ss");
|
return time;
|
} else {
|
return "";
|
}
|
},
|
getDate3() {
|
let now = new Date();
|
this.formatTime3 = this.getDateObj(now, "hh:mm");
|
},
|
getDate2() {
|
let now = new Date();
|
this.formatTime2 = this.getDateObj(now, "yyyy年MM月dd日");
|
},
|
getFormatTime(date){
|
const getCha=()=>{
|
let now=new Date().getTime()
|
let String=now-date*1000;
|
let seconds=Math.floor(String/1000)
|
let minutes=Math.floor(seconds/60)
|
|
let days=Math.floor(String/1000/60/60/24)
|
let hours=Math.floor(minutes/60)-days*24
|
let m=minutes-days*24*60-hours*60
|
return days+'天'+hours+'时'+m+'分'
|
}
|
let d= getCha()
|
setInterval(() => {
|
d= getCha();
|
}, 6000);
|
return date?d:'--';
|
},
|
setInterCard(value, name, i) {
|
if (this.TasksCopy[i].Procedure.procedure[value]!=null) {
|
let height = 200;
|
let num = 3;
|
// if (this.$refs[name]) {
|
// height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200;
|
// num = Math.floor(height / 80);
|
// }
|
height = this.$refs['homeRef']?(this.$refs['homeRef'].offsetHeight-470-90-20):200;
|
if(this.activeName==2){
|
height=height-610-90-20
|
}
|
num = Math.floor(height / 80);
|
let inputMaterials = JSON.parse(
|
JSON.stringify(this.TasksCopy[i].Procedure.procedure[value])
|
);
|
let newDataList = [];
|
let current = 0;
|
// let num=4;
|
if (inputMaterials && inputMaterials.length > 0) {
|
for (let i = 0; i <= inputMaterials.length - 1; i++) {
|
if (i % num !== 0 || i === 0) {
|
if (!newDataList[current]) {
|
newDataList[current] = [];
|
newDataList[current].push(inputMaterials[i]);
|
} else {
|
newDataList[current].push(inputMaterials[i]);
|
}
|
} else {
|
current++;
|
newDataList[current] = [];
|
newDataList[current].push(inputMaterials[i]);
|
}
|
}
|
}
|
this.TasksCopy[i][value] = [...newDataList];
|
}
|
},
|
|
/**
|
* 轮询获取任务数量
|
*/
|
getTaskCountStatistics(){
|
getTaskInfo({taskMode:1}).then((res) => {
|
if (res.code === 200&&res.data) {
|
this.TaskCount=res.data?.TaskCount ?? 0
|
}
|
},err=>{
|
this.TaskCount = 0
|
console.error(err)
|
}).finally(()=>{
|
this.pollingTaskCountTimer = setTimeout(()=>{
|
this.getTaskCountStatistics()
|
// 20秒一次轮询
|
},20000)
|
});
|
},
|
|
/**
|
* 根据当前展示的是0通道还是1通道还是两个通道展示对应的值班人
|
* @return {*[]}
|
*/
|
displayWorkers(){
|
let showWorkers = []
|
if (this.activeName===1){
|
showWorkers =[...this.channelWorkersMap[0]]
|
}else if (this.activeName===2){
|
showWorkers =[...this.channelWorkersMap[0],...this.channelWorkersMap[1]]
|
}else if (this.activeName===3){
|
showWorkers =[...this.channelWorkersMap[1]]
|
}else {
|
return []
|
}
|
|
return showWorkers
|
},
|
|
getTaskInfo(val,info) {
|
this.Tasks = [];
|
this.TasksCopy=[]
|
getTaskInfo({taskMode:2}).then((res) => {
|
if (res.code == 200&&res.data) {
|
this.TasksCopy = res.data?.Tasks ?? [];
|
// this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:''
|
this.plcNotConnected=res.data.Prompt.plcNotConnected ?? ''
|
this.ChannelAmount=res.data.ChannelAmount ?? 1
|
// if(this.ChannelAmount>1 &&this.TasksCopy.length<2){
|
// this.TasksCopy.push(this.object)
|
// }
|
this.TaskCount=res.data.TaskCount ?? 0
|
|
// 找出缺少任务数据的通道, 使用占位数据占住对应通道
|
const channelNumbers = this.TasksCopy.map(task=>task.Channel)
|
const allChannels = [0,1];
|
const lackChannels = _.chain(allChannels).difference(channelNumbers).value()
|
lackChannels.forEach(channel => this.TasksCopy.push(this.newTaskPlaceholder(channel)))
|
this.TasksCopy.sort((a,b)=>a.Channel - b.Channel)
|
|
this.workers=res.data.workers?res.data.workers:[]
|
|
// 将值班人根据通道号分组
|
const groupByChannel= _.groupBy(res.data.Tasks,ele=>ele.Channel)
|
const taskList0= _.first(groupByChannel[0])
|
const taskList1= _.first(groupByChannel[1])
|
const worker0List = taskList0?.Procedure?.procedure?.workers ?? []
|
const worker1List = taskList1?.Procedure?.procedure?.workers ?? []
|
this.channelWorkersMap['0'] =worker0List
|
this.channelWorkersMap['1'] =worker1List
|
|
for (let i in this.TasksCopy) {
|
this.TasksCopy[i].procedureList = [];
|
this.TasksCopy[i].inputMaterials = [];
|
this.TasksCopy[i].outputMaterials = [];
|
this.TasksCopy[i].finishNumber = 0;
|
this.TasksCopy[i].totalNumber = 0;
|
this.TasksCopy[i].plcStatus = 0;
|
this.TasksCopy[i].number=0;
|
this.TasksCopy[i].isUpdateIcon=false;
|
this.finishShow['finishShow&'+i]=false
|
this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure
|
.procedure.workers
|
? this.TasksCopy[i].Procedure.procedure.workers
|
: [];
|
|
this.TasksCopy[i].procedureList.push([
|
{
|
name: "工序",
|
...this.TasksCopy[i].Procedure.procedure,
|
},
|
]);
|
|
if (this.TasksCopy[i].Procedure.ID) {
|
startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => {
|
if (res.code == 200) {
|
this.TasksCopy[i].number=res.data.Number
|
// res.data.number
|
this.TasksCopy[i].procedureList[0].push({
|
number: res.data.Number,
|
});
|
this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
|
// this.isFinsh=Number(i)+1
|
this.$forceUpdate()
|
}
|
});
|
}
|
this.setInterCard("inputMaterials", "cardBox1&" + i, i);
|
this.setInterCard("outputMaterials", "cardBox3&" + i, i);
|
}
|
this.getProcessModelList();
|
this.getStartArr()
|
this.cutClick(val?val:1)
|
if(info=='new'){
|
return true;
|
}
|
|
this.getProgressInfo();
|
if (!this.procInfoTimer&&!this.resprocInfoTimer) {
|
this.procInfoTimer = setInterval(() => {
|
this.getProgressInfo();
|
}, 3000);
|
}
|
}
|
// if (res.code != 200 || this.TasksCopy.length == 0) {
|
// this.getcountdown();
|
// // 控制重新请求getTaskInfo, 只开启一个定时器
|
// if (!this.cutdownTimer) {
|
// this.cutdownTimer = setInterval(() => {
|
// this.getcountdown();
|
// }, 60000);
|
// }
|
// }
|
|
});
|
// this.TasksCopy.push(this.object)
|
// this.TasksCopy.push(this.object)
|
},
|
getStartArr(){
|
// for (let i in this.TasksCopy) {
|
// if (this.TasksCopy[i].Procedure.Status==1) {
|
// this.Arr = this.TasksCopy[i].Arr ?this.TasksCopy[i].Arr: [];
|
// // this.taskData=this.TasksCopy[i];
|
// break;
|
// }
|
// }
|
getTaskInfo({taskMode:1}).then(res=>{
|
if(res.code==200){
|
this.taskData=res.data.Tasks?res.data.Tasks[0]:{};
|
this.ArrError=''
|
if (Object.keys(this.taskData).length > 0 &&this.taskData.Procedure.ID) {
|
startTask({ id: this.taskData.Procedure.ID }).then((res) => {
|
if (res.code == 200) {
|
this.Arr =res.data.Params ? res.data.Params : []
|
}else{
|
this.ArrError=res.msg?res.msg:'获取工艺参数失败！';
|
}
|
});
|
}
|
}
|
})
|
},
|
/**
|
* 向URL中设置当前通道展示类型
|
* @param {number} type 通道展示类型
|
*/
|
updateChannelTypeToUrl(type){
|
const activeName = this.getChannelTypeFromUrl();
|
if (activeName === type){
|
return
|
}
|
let path = this.$router.history.current.path
|
this.$router.push({path, query: {activeName: `${type ?? 1}`}})
|
},
|
/**
|
* 从URL获取当前通道展示类型
|
* @return {number}
|
*/
|
getChannelTypeFromUrl(){
|
let activeName = new URLSearchParams(location.search).get('activeName')
|
activeName = activeName ? +activeName : undefined
|
return activeName
|
},
|
getProgressInfo() {
|
this.resprocInfoTimer=null
|
for (let i in this.TasksCopy){
|
if(this.TasksCopy[i].Procedure.ID){
|
getProgress({
|
channel: Number(i),
|
procedureId: this.TasksCopy[i].Procedure.ID,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.TasksCopy[i].finishNumber = res.data?.finishNumber ?? 0;
|
this.TasksCopy[i].totalNumber = res.data?.totalNumber ?? 0;
|
this.TasksCopy[i].plcStatus = res.data?.plcStatus ?? 0
|
this.PLCStatusMap[i] = res.data?.plcStatus ?? 0
|
}
|
this.resprocInfoTimer=res;
|
});
|
}
|
}
|
},
|
// 设置
|
setUrl() {
|
// const { href } = this.$router.resolve({
|
// path: "/set",
|
// });
|
// window.open(href, "_blank");
|
this.$router.push({
|
path: "/set",
|
});
|
},
|
// 右侧控制
|
controlClick() {
|
if (this.Tasks.length > 0) {
|
for(let i in this.Tasks){
|
if(this.Tasks[i].Procedure.Status==1){
|
this.$refs.control.islook = true;
|
break;
|
}
|
}
|
} else {
|
this.$message.error("当前设备没有工序！");
|
}
|
},
|
// 右侧完成
|
finishClick(i, taskData) {
|
if (Object.keys(taskData).length > 0 && taskData.Procedure.ID) {
|
finishTask({ id: taskData.Procedure.ID }).then((res) => {
|
if (res.code == 200) {
|
this.finishShow['finishShow&'+i] = false;
|
this.reloadPage(this.activeName?this.activeName:1);
|
this.$message.success("操作成功！");
|
}
|
});
|
} else {
|
this.$message.error("当前设备没有工序！");
|
}
|
},
|
|
/**
|
* 关闭 tooltip
|
* @param index
|
*/
|
closePopover(index){
|
this.finishShow['finishShow&'+index] = false
|
this.$refs?.['popoverRef_' + index]?.[0]?.doClose()
|
},
|
getRandomNumber(min, max) {
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
},
|
format(percentage) {
|
return `合格率：${percentage}%`;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.tooltip-width-200{
|
width:200px;
|
line-height:1.3!important;
|
}
|
.el-popover{
|
background:#12234a!important;
|
color:#fff!important;
|
border-color: #09e5ed !important;
|
|
.popper__arrow::after{
|
border-top-color:#09e5ed !important;
|
}
|
}
|
.color_yellow{
|
color:yellow;
|
}
|
.color_318583{
|
color:#318583;
|
}
|
.el-empty{
|
height:calc(100% - 190px);
|
.el-empty__description p{
|
font-size:16px!important;
|
color:#fff!important;
|
}
|
}
|
|
.active-one {
|
width: 100%;
|
height: calc(100% - 100px);
|
.statelist {
|
height: 50px;
|
}
|
.small_title {
|
margin-bottom: 20px;
|
}
|
.content {
|
height: 300px;
|
}
|
.bottom {
|
height: calc(100% - 470px);
|
}
|
.font_size_20px{
|
font-size:20px!important;
|
}
|
}
|
.active-two {
|
width: calc(50% - 10px);
|
height: calc(100% - 100px);
|
float: left;
|
padding-left: 10px;
|
&:nth-of-type(1) {
|
padding-right: 10px;
|
padding-left: 0px;
|
box-sizing: border-box;
|
border-right: 1px solid #eee;
|
}
|
|
.small_title {
|
margin-bottom: 30px;
|
}
|
.statelist {
|
height: 60px;
|
.title-item{
|
font-size:14px!important;
|
}
|
}
|
.title-item > span {
|
display: block;
|
line-height: 20px;
|
}
|
.content {
|
height: 430px;
|
|
.content-top {
|
height: calc(50% - 30px) !important;
|
padding-top: 20px !important;
|
}
|
.el-descriptions__body {
|
font-size: 16px !important;
|
}
|
}
|
.bottom {
|
height: calc(100% - 610px);
|
}
|
.bottom_list .bottom-title {
|
font-size: 16px;
|
}
|
}
|
.gong-date{
|
width:100%;
|
height:20px;
|
line-height:20px;
|
margin-bottom:10px;
|
font-size:16px;
|
}
|
.gongx{
|
width:100%;
|
height:50px;
|
overflow-x:auto;
|
// overflow-y:hidden;
|
margin-top:-5px;
|
.steps{
|
height:100%;
|
.el-step__icon{
|
width:16px;
|
height:16px;
|
}
|
.el-step__title{
|
line-height:25px;
|
font-size:14px;
|
}
|
}
|
|
.el-step{
|
.el-step__icon{
|
background:#00cc66;
|
}
|
.is-wait{
|
.el-step__icon{
|
background:#fff;
|
}
|
}
|
}
|
.el-step__head.is-wait{
|
color:#fff;
|
border-color:#fff;
|
}
|
.el-step__title.is-wait{
|
color:#fff;
|
}
|
|
// 使步骤条节点状态成功时,前面的线同步更改颜色
|
.steps{
|
/* 进行中状态：圈线 */
|
& .el-step__head.is-process {
|
color: #00cc66;
|
border-color: #00cc66;
|
}
|
/* 进行中状态：圈内 */
|
& .el-step__head.is-process > .el-step__icon {
|
background: #00cc66;
|
color: #00cc66;
|
}
|
/* 进行中状态：title（文字） */
|
& .el-step__title.is-process {
|
color: #00cc66;
|
}
|
|
/* 完成状态：圈线 */
|
& .el-step__head.is-success {
|
color: #00cc66;
|
border-color: #00cc66;
|
}
|
/* 完成状态：title（文字） */
|
& .el-step__title.is-success {
|
color: #00cc66;
|
}
|
/* 完成状态：line
|
* 描述：第一步完成，第二步进行时，之间的进度条有颜色
|
*/
|
& .el-step__head.is-success > .el-step__line > .el-step__line-inner {
|
width: 100% !important;
|
border-width: 1px !important;
|
}
|
}
|
}
|
.set-title {
|
cursor: pointer;
|
}
|
.home-img-box {
|
width: calc(100% - 40px);
|
height: calc(100% - 40px);
|
margin: 0 auto;
|
overflow: hidden;
|
padding: 20px;
|
.bg-title {
|
width: 90%;
|
margin: 0 auto;
|
position: absolute;
|
img {
|
width: 100%;
|
}
|
.bg-title-span {
|
position: absolute;
|
width: 30%;
|
height: 4rem;
|
line-height: 2.4;
|
font-size: 26px;
|
font-weight: 700;
|
text-align: center;
|
left: 36%;
|
top: 1.5rem;
|
display: inline-block;
|
}
|
.bg-set {
|
position: absolute;
|
right: 10%;
|
height: 4rem;
|
line-height: 2.4;
|
font-size: 40px;
|
font-weight: 700;
|
top: 1rem;
|
}
|
.bg-date {
|
position: absolute;
|
left: 3%;
|
height: 100px;
|
line-height: 30px;
|
font-size: 16px;
|
top: 15%;
|
span {
|
font-size: 35px;
|
font-weight: 700;
|
line-height: 20px;
|
}
|
}
|
}
|
.yuan {
|
width: 40%;
|
height: 80%;
|
margin: 0 auto;
|
margin-top: 10%;
|
position: relative;
|
img {
|
width: 100%;
|
}
|
.btn-img {
|
width: 100%;
|
height: 50%;
|
margin: 0 auto;
|
text-align: center;
|
position: absolute;
|
top: 9rem;
|
}
|
}
|
}
|
.font-arrow-20 {
|
font-size: 30px;
|
font-weight: 700;
|
}
|
.color_666{
|
color:#666!important;
|
}
|
.color_fff{
|
color:#fff!important;
|
}
|
.color_4efefa {
|
color: #4efefa;
|
}
|
.el-carousel__indicators--vertical {
|
display: none;
|
}
|
.color_blue {
|
background: #33ccff !important;
|
}
|
.color_green {
|
color: #00cc66 !important;
|
}
|
.color_red {
|
background: red !important;
|
}
|
.color_organge {
|
background: #f76c0f !important;
|
}
|
.color_f70f83 {
|
background: #09e5ed !important;
|
color: #333 !important;
|
}
|
.yuandian {
|
width: 35px;
|
height: 35px;
|
display:inline-block;
|
// background: #15d815;
|
background:red;
|
border-radius: 50%;
|
// margin-top:-5px;
|
vertical-align: middle;
|
}
|
|
|
.tip {
|
display:inline-block;
|
// background: #15d815;
|
background:red;
|
border-radius: 50%;
|
// margin-top:-5px;
|
vertical-align: middle;
|
}
|
.blink{
|
display: inline-block;
|
width: 14px;
|
height: 14px;
|
}
|
.tip, .blink{
|
position: absolute;
|
top: -6px;
|
right: -6px;
|
width: 14px;
|
height: 14px;
|
}
|
.bottom_list {
|
position: relative;
|
padding: 10px;
|
width: 30%;
|
height: calc(100% - 20px);
|
border-radius: 6px;
|
background: rgb(22 72 173);
|
// float:left;
|
.bottom-title {
|
font-weight: 600;
|
font-size: 20px;
|
height: 30px;
|
line-height: 30px;
|
margin-bottom: 5px;
|
.el-button--primary {
|
color: #fff;
|
float: right;
|
border: 0 !important;
|
}
|
}
|
.el-button--primary {
|
width: 100%;
|
}
|
.call {
|
background: #4efefa;
|
display: inline-block;
|
width: 94%;
|
height: 10%;
|
text-align: center;
|
line-height: 45px;
|
position: absolute;
|
bottom: 20px;
|
left: 0px;
|
border-radius: 5px;
|
margin-left: 3%;
|
color: #000;
|
font-size: 16px;
|
}
|
.qfcall {
|
display: inline-block;
|
width: 94%;
|
height: 10%;
|
text-align: center;
|
line-height: 45px;
|
position: absolute;
|
bottom: 20px;
|
left: 0px;
|
border-radius: 5px;
|
margin-left: 3%;
|
// color: #000;
|
font-size: 16px;
|
}
|
.card-box {
|
width: 100%;
|
height: calc(100% - 50px - 40px);
|
// height:300px;
|
.el-carousel__container{
|
overflow-y:auto;
|
}
|
.el-carousel__item{
|
height:auto;
|
}
|
}
|
.bottom-box-btn{
|
width:calc(100% - 20px);
|
position:absolute;
|
bottom:10px;
|
left:10px;
|
.el-button{
|
height: 40px;
|
|
}
|
}
|
}
|
|
.small_title {
|
font-size: 20px;
|
}
|
.right-small-btn {
|
width: calc(100% - 20px);
|
margin: 0 auto;
|
position: absolute;
|
bottom: 10px;
|
left: 10px;
|
overflow: hidden;
|
.el-button--primary {
|
width: 46%;
|
background: #09e5ed;
|
float: left;
|
border-radius: 6px;
|
color: #333;
|
font-weight: 700;
|
font-size: 18px;
|
}
|
.button-finish {
|
width: 46%;
|
float: right;
|
.el-button--primary {
|
width: 100%;
|
background: red;
|
color: #fff;
|
border: 0;
|
}
|
}
|
.huise{
|
width: 46%;
|
float: right;
|
}
|
.huise.el-button--primary {
|
background: #CCE8E8;
|
color: #AAAAAA;
|
border: 0;
|
}
|
}
|
.home {
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
background: #12234a;
|
overflow: hidden;
|
.left {
|
width: calc(78% - 60px);
|
height: 100%;
|
min-height: 100%;
|
background: #12234a;
|
float: left;
|
padding: 30px;
|
padding-top: 20px;
|
.title {
|
font-size: 30px;
|
font-weight: 600;
|
height:40px;
|
margin:10px 0 30px;
|
text-align: center;
|
.el-badge__content, .el-progress.is-exception .el-progress-bar__inner{
|
background-color:green;
|
}
|
}
|
|
.statelist {
|
width: 100%;
|
margin: 0 auto 10px;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-around;
|
align-items: center;
|
overflow:hidden;
|
.title-item {
|
width: calc((100% - 50px)/3);
|
float: left;
|
margin-right: 10px;
|
padding: 10px 5px;
|
text-align: center;
|
border-radius: 4px;
|
display: inline-block;
|
background: rgb(22 72 173);
|
font-size: 16px;
|
font-weight: 600;
|
&:nth-last-child(1) {
|
margin-right: 0;
|
}
|
}
|
}
|
.content {
|
width: 100%;
|
margin: 0px 0px 20px;
|
overflow: hidden;
|
.content_left {
|
width: 24%;
|
height: 100%;
|
float: left;
|
// padding:2%;
|
.content-top {
|
background: rgb(22 72 173);
|
height: calc(50% - 20px);
|
padding-top: 10px;
|
text-align: center;
|
line-height: 30px;
|
border-radius: 6px;
|
&:nth-of-type(1) {
|
margin-bottom: 20px;
|
}
|
}
|
.content_leftBttom {
|
width: 100%;
|
}
|
dl {
|
margin-top: 5px;
|
}
|
dd {
|
width: 100%;
|
height: 30px;
|
// text-align: left;
|
font-size: 28px!important;
|
margin: 0;
|
text-align: center;
|
line-height: 36px;
|
}
|
}
|
.content_right {
|
width: calc(75% - 20px);
|
height: 100%;
|
float: right;
|
padding: 0 10px;
|
background: rgb(22 72 173);
|
border-radius: 6px;
|
position:relative;
|
.gif{
|
background: url("../../public/setting.png") no-repeat;
|
background-size:100% 100%;
|
position:absolute;
|
right:15px;
|
top:10px;
|
width:35px;
|
height: 35px;
|
vertical-align: middle;
|
cursor:pointer;
|
//img{
|
// width:100%;
|
//}
|
}
|
// background: #233b9e;
|
.el-descriptions-row{
|
height:45px;
|
}
|
.el-descriptions__body {
|
background: transparent;
|
font-size: 18px;
|
}
|
.el-descriptions__table {
|
width: 100%;
|
margin: 10px 0px;
|
// background: #233b9e;
|
color: #ffff99;
|
.el-descriptions--small {
|
width: 100%;
|
// margin: 50px 50px;
|
}
|
}
|
.el-progress {
|
width: 80%;
|
}
|
}
|
}
|
|
.bottom {
|
width: 100%;
|
display: flex;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 20px;
|
// position: relative;
|
|
.card {
|
width: 100%;
|
height: 70px;
|
// border: 1px solid #ccc;
|
background: #6b83ff;
|
border-radius: 5px;
|
margin-top: 10px;
|
color: #333;
|
position: relative;
|
.font_dian{
|
-webkit-box-orient:vertical;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
white-space:nowrap;
|
}
|
.card_top-2{
|
width:38%;
|
}
|
.card-top-input-out-r,
|
.card_top-3 {
|
width:62%;
|
}
|
.card_top-2,.card-top-input-out-r,
|
.card_top-3 {
|
height: 45px;
|
border-radius: 5px;
|
background: #6b83ff;
|
font-size: 13px;
|
color: #fff;
|
float: left;
|
font-weight: 700;
|
.card-top-r-t {
|
width: 100%;
|
text-align: center;
|
display: inline-block;
|
height: 20px;
|
line-height: 20px;
|
margin-top: 3px;
|
}
|
.card-top-r-b {
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
display: inline-block;
|
}
|
}
|
.card_top-3 {
|
color: #fff;
|
.card-top-r-t {
|
width: 90%;
|
|
margin: 0 auto;
|
margin-bottom: 5px;
|
display: block;
|
text-align: left;
|
}
|
.card-top-r-b {
|
width: 90%;
|
display: block;
|
margin: 0 auto;
|
}
|
}
|
|
.card_top,.card-top-input-out-l,
|
.card_top-4 {
|
width: 50%;
|
height: 45px;
|
border-radius: 5px;
|
background: #6b83ff;
|
color: #fff;
|
font-size: 12px;
|
line-height: 45px;
|
> div {
|
padding-left: 12px;
|
position: relative;
|
p {
|
position: absolute;
|
top: -14px;
|
right: 15px;
|
font-size: 14px;
|
}
|
}
|
}
|
.card_top{
|
float: left;
|
}
|
.card-top-input-out-l{
|
float:left;
|
width:65%;
|
line-height:20px;
|
vertical-align: middle;
|
display:flex;
|
justify-content:space-around;
|
align-items:center;
|
}
|
.card-top-input-out-r{
|
width:35%;
|
}
|
.card_top-4 {
|
width: calc(100% - 20px);
|
padding: 10px 10px;
|
color: #fff;
|
background: rgb(19, 35, 90);
|
font-size: 14px;
|
height:50px;
|
line-height: 25px;
|
>div{
|
margin-left:0px;
|
}
|
}
|
.card-info-box {
|
position: absolute;
|
background: red;
|
border-radius: 6px;
|
font-size: 12px;
|
color: #fff;
|
padding: 3px 5px;
|
top: 3px;
|
right: 40px;
|
}
|
.card_content {
|
width: 100%;
|
border-radius: 5px;
|
height: 25px;
|
// background: #4765c0;
|
.card_contentLeft {
|
width: calc(100% - 10px);
|
height: 25px;
|
line-height: 25px;
|
font-size: 12px;
|
padding: 0 5px;
|
color: #fff;
|
border-radius: 5px 5px 0 0;
|
background: rgb(19, 35, 90);
|
}
|
|
|
.card_contentRight {
|
width: 100%;
|
height: 38%;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
}
|
.right {
|
width: calc(20% - 10px);
|
height: 100%;
|
min-height: 100%;
|
background: #233b9e;
|
float: left;
|
padding: 1%;
|
.right_top {
|
width: 100%;
|
height: 100px;
|
position: relative;
|
.right-top-l {
|
position: absolute;
|
top: 10px;
|
left: -5%;
|
width: 100px;
|
height: 35px;
|
line-height: 35px;
|
text-align: center;
|
border-radius: 0 6px 6px 0;
|
background: hsl(225, 85%, 67%);
|
display: inline-block;
|
}
|
// background: pink;
|
.time {
|
width: 70%;
|
height: 100px;
|
float: right;
|
position: relative;
|
text-align: right;
|
dl {
|
height: 80%;
|
// padding-top: 10%;
|
}
|
.font {
|
font-size: 36px;
|
position: absolute;
|
top: 20px;
|
right: 0px;
|
}
|
}
|
}
|
.right-top-m {
|
width: 100%;
|
background: rgba(28, 48, 133, 1);
|
line-height: 50px;
|
font-weight: 700;
|
font-size: 18px;
|
padding: 0 3%;
|
overflow-x: hidden;
|
margin-left: -3%;
|
span{
|
display:inline-block;
|
img{
|
width:23px;
|
vertical-align: middle;
|
// float:left;
|
display:inline-block;
|
}
|
}
|
}
|
.right-top-m-btn {
|
margin-top: 10px;
|
width: 100%;
|
.el-button--primary {
|
width: 100%;
|
background: #09e5ed;
|
color: #333;
|
font-weight: 700;
|
font-size: 18px;
|
}
|
}
|
.right_dutyLst {
|
width: calc(106% - 20px);
|
// height: 270px;
|
height: 370px;
|
border-radius: 4px;
|
line-height: 30px;
|
overflow: hidden;
|
background: #4565c9;
|
margin-top: 10px;
|
padding: 5px 10px;
|
margin-left:-3%;
|
position: relative;
|
.right-small-title {
|
width: auto;
|
padding: 5px;
|
font-size: 18px;
|
// float: left;
|
border-radius: 8px;
|
// background: #007101;
|
}
|
.right-person-box {
|
width: 100%;
|
height: calc(100% - 60px);
|
overflow: auto;
|
margin-top: -10px;
|
}
|
.right-small-person {
|
width: 100%;
|
height: 60px;
|
line-height: 60px;
|
margin-bottom: 10px;
|
border-radius: 10px;
|
background: rgb(19, 35, 90);
|
color: #fff;
|
|
dt {
|
float: left;
|
|
margin-right: 10px;
|
.img-class {
|
height: 50px;
|
margin: 5px !important;
|
}
|
}
|
span {
|
// background: pink;
|
padding-top: 10px;
|
}
|
}
|
}
|
.right_base {
|
width: 100%;
|
height: calc(100% - 580px);
|
min-height: 200px;
|
// overflow-y:auto;
|
position: relative;
|
.right-base-btn {
|
width: 100%;
|
position: absolute;
|
bottom: 24px;
|
left: 0;
|
.el-button--primary {
|
width: 100%;
|
background: #ff0000;
|
float: right;
|
border-radius: 6px;
|
color: #fff;
|
font-weight: 700;
|
font-size: 18px;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
// .call {
|
// background: #ff0000;
|
// display: inline-block;
|
// width: 94%;
|
// height: 12%;
|
// text-align: center;
|
// line-height: 45px;
|
// position: absolute;
|
// bottom: 5px;
|
// left: 0px;
|
// border-radius: 5px;
|
// margin-left: 3%;
|
|
// font-size: 16px;
|
// }
|
}
|
}
|
}
|
.el-button--primary {
|
border: 0;
|
font-weight: 700 !important;
|
font-size: 16px;
|
}
|
.process-params{
|
margin-top: 10px;
|
border-radius: 5px;
|
overflow: hidden;
|
color: #fff;
|
font-size: 12px;
|
&-title{
|
height: 25px;
|
padding: 0 5px;
|
background-color: #13235a;
|
line-height: 25px;
|
}
|
&-value{
|
background-color: #6b83ff;
|
min-height: 45px;
|
box-sizing: border-box;
|
padding: 12px;
|
}
|
}
|
.plc-status{
|
margin-right: 24px;
|
position: relative;
|
display: inline-block;
|
height: 50px;
|
&:after{
|
content: '';
|
position: absolute;
|
top: 50%;
|
right: -12px;
|
margin-top: -15px;
|
border-right: 2px solid #ffffff;
|
height: 30px;
|
}
|
}
|
.plc-status:last-child{
|
&:after{
|
display: none;
|
}
|
}
|
</style>
|
