|
<template>
|
<div class="home">
|
<template v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID">
|
<div class="left">
|
<p class="title">
|
生产管理看板
|
<span
|
class="font el-icon-setting set-title"
|
style="float: right"
|
@click="setUrl"
|
></span>
|
</p>
|
<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="content">
|
<div class="content_left">
|
<div class="content-top">
|
<div class="small_title">当前完成</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd style="font-size: 26px; font-weight: 600">
|
{{ 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: 26px; font-weight: 600">
|
{{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
<div class="content_right">
|
<el-descriptions :column="2" :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.Order.startTime) || "" }}
|
-
|
{{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
|
>
|
<el-descriptions-item label="货物描述">{{
|
taskData.Order.orderAttr || ""
|
}}</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="#133EAF"
|
color="#09E5ED"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="finishPercent"
|
></el-progress>
|
</el-descriptions-item>
|
<!-- <el-descriptions-item label="合格率" style="width: 100%">
|
<el-progress
|
define-back-color="#007101"
|
color="#00CC66"
|
: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"
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.inputMaterials
|
"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in inputMaterials"
|
>
|
<div class="card" :key="index2" v-for="(list, index2) in item">
|
<div class="card_content">
|
<div class="card_contentLeft">{{ list.materialId }}</div>
|
</div>
|
<div class="card_top">
|
<div>
|
<!-- 设备12<i
|
style="font-size: 14px"
|
class="el-icon-right font-arrow-20"
|
></i>
|
设备13 -->
|
{{ list.materialName }}
|
</div>
|
</div>
|
<div class="card_top2">
|
<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">
|
<i class="el-icon-phone-outline" />物料呼叫</el-button
|
>
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20 color_4efefa"></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"
|
v-if="taskData.Procedure.procedure && procedureList"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in procedureList"
|
>
|
<div class="card" :key="index2" v-for="(list, index2) in item">
|
<template v-if="list.name == '工序'">
|
<div class="card_content">
|
<div class="card_contentLeft color_blue">
|
{{ list.deviceName }}
|
<!-- <span style="float: right">6m/s</span> -->
|
</div>
|
</div>
|
<div class="card_top-3">
|
<span class="card-top-r-t"
|
>完成进度：{{ finishPercent || 0 }}</span
|
>
|
<span class="card-top-r-b">
|
<el-progress
|
define-back-color="#133EAF"
|
color="#09E5ED"
|
:text-inside="true"
|
:stroke-width="10"
|
:percentage="finishPercent"
|
:show-text="false"
|
></el-progress>
|
</span>
|
</div>
|
<div class="card_top-2">
|
<div style="line-height: 45px; text-align: center">
|
生产中
|
</div>
|
<!-- <span class="card-top-r-t">完成进度：50%</span>
|
<span class="card-top-r-b">12月28日 08:24</span> -->
|
</div>
|
</template>
|
<template v-else>
|
<!-- <div class="card_content">
|
|
</div> -->
|
<div class="card_top-4">
|
<div>工艺编号：{{ list.number }}</div>
|
<div
|
style="
|
font-size: 14px;
|
color: #cfcfcf;
|
line-height: 20px;
|
"
|
>
|
工艺的具体信息请点击控制查看！
|
</div>
|
</div>
|
</template>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<p style="font-size: 22px; margin-left: 12px; margin-top: 50px"></p>
|
<div class="right-small-btn">
|
<el-button type="primary"> 打印</el-button>
|
<el-popover
|
placement="top-end"
|
width="160"
|
class="button-finish"
|
v-model="finishShow"
|
trigger="click"
|
>
|
<p>请确认是否已完成该生产任务?</p>
|
<div style="text-align: right; margin: 0">
|
<el-button size="mini" @click="finishShow = false">
|
取消</el-button
|
>
|
<el-button type="primary" size="mini" @click="finishClick">
|
确定</el-button
|
>
|
</div>
|
<el-button type="primary" slot="reference"> 完成</el-button>
|
</el-popover>
|
</div>
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
|
<div class="bottom_list">
|
<div class="bottom-title">
|
<span>输出资源</span>
|
</div>
|
<el-carousel
|
direction="vertical"
|
height="calc(100% - 0px)"
|
:interval="500"
|
ref="cardBox3"
|
class="card-box"
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.outputMaterials
|
"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in outputMaterials"
|
>
|
<div
|
class="card-box"
|
:key="index2"
|
v-for="(list, index2) in item"
|
>
|
<div class="card">
|
<div class="card_content">
|
<div class="card_contentLeft">{{ list.materialId }}</div>
|
</div>
|
<div class="card_top">
|
<div>
|
{{ list.materialName }}
|
<!-- 设备12<i
|
style="font-size: 14px"
|
class="el-icon-right font-arrow-20"
|
></i>
|
设备13 -->
|
</div>
|
</div>
|
<div class="card_top2">
|
<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 class="card-info-box">预计10分钟送达</div> -->
|
</div>
|
<!-- <div class="card">
|
<div class="card_content">
|
<div class="card_contentLeft color_green">
|
包号:G22122304 100吨
|
</div>
|
</div>
|
<div class="card_top">
|
<div>
|
设备12<i
|
style="font-size: 14px"
|
class="el-icon-right font-arrow-20"
|
></i>
|
设备13
|
</div>
|
</div>
|
<div class="card_top-2">
|
<span class="card-top-r-t">生产完成</span>
|
<span class="card-top-r-b">12月28日 08:24</span>
|
</div>
|
</div> -->
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<el-button type="primary" class="color_f70f83">
|
<i class="el-icon-phone-outline" />运输呼叫</el-button
|
>
|
</div>
|
</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">
|
设备状态:
|
<span style="position: relative"
|
>正常
|
<span class="yuandian"></span>
|
</span>
|
</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="taskData.Procedure.procedure.workers"
|
>
|
<dl
|
class="right-small-person"
|
v-for="(item, index) in taskData.Procedure.procedure.workers"
|
: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>
|
</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">知识库</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%">
|
暂无任务，休息一下吧...
|
</div>
|
<el-button type="primary" @click="reloadPage">刷新任务</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- 控制的弹框 -->
|
<AddControl ref="control" :id="taskData.Procedure.ID" />
|
</div>
|
</template>
|
|
<script>
|
import {
|
getTaskInfo,
|
finishTask,
|
getMiniDictList,
|
saveMiniDict,
|
startTask,
|
getProgress,
|
} from "@/api/home/index"; // 产线
|
import Card from "@/components/Card.vue";
|
import Knowledge from "../components/Knowledge.vue";
|
import AddControl from "../components/AddControl.vue";
|
export default {
|
components: {
|
Card,
|
Knowledge,
|
AddControl,
|
},
|
data() {
|
return {
|
progress: 70, //进度
|
passrate: 30, //合格率
|
production: 25, //生产中
|
finishNumber: 0,
|
finishPercent: 0,
|
formatTime2:'',
|
formatTime3:'',
|
// 右侧完成
|
finishShow: false,
|
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: "",
|
},
|
],
|
},
|
},
|
},
|
};
|
},
|
mounted() {
|
// setInterval(() => {
|
// this.progress = this.getRandomNumber(1, 100);
|
// this.passrate = this.getRandomNumber(1, 100);
|
// this.production = this.getRandomNumber(1, 100);
|
// }, 3000);
|
setInterval(()=>{
|
this.getDate3()
|
this.getDate2()
|
},5000)
|
this.getTaskInfo();
|
setInterval(() => {
|
this.getProgressInfo();
|
}, 60000);
|
},
|
|
methods: {
|
reloadPage() {
|
// window.location.reload();
|
this.getTaskInfo();
|
},
|
getProgressInfo() {
|
getProgress().then((res) => {
|
if (res.code == 200) {
|
this.finishNumber = res.data.finishNumber ? res.data.finishNumber : 0;
|
this.finishPercent = res.data.finishPercent
|
? res.data.finishPercent
|
: 0;
|
}
|
});
|
},
|
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, "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日");
|
},
|
setInterCard(value, name) {
|
let height = 200;
|
let num = 1;
|
if (this.$refs[name]) {
|
height = this.$refs[name].$el.offsetHeight;
|
num = Math.floor(height / 80);
|
}
|
let inputMaterials = JSON.parse(
|
JSON.stringify(this.taskData.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[value] = [...newDataList];
|
console.log(this.inputMaterials, "inputMaterials");
|
},
|
|
getTaskInfo() {
|
this.taskData = {
|
Order: {},
|
Procedure: {
|
procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
|
},
|
};
|
getTaskInfo().then((res) => {
|
if (res.code == 200) {
|
this.taskData = res.data
|
? res.data
|
: {
|
Order: {},
|
Procedure: {
|
procedure: {
|
inputMaterials: [],
|
outputMaterials: [],
|
workers: [],
|
},
|
},
|
};
|
this.taskData.Procedure.procedure.workers = this.taskData.Procedure
|
.procedure.workers
|
? this.taskData.Procedure.procedure.workers
|
: [];
|
this.procedureList.push([
|
{
|
name: "工序",
|
...this.taskData.Procedure.procedure,
|
},
|
]);
|
if (this.taskData.Procedure.ID) {
|
startTask({ id: this.taskData.Procedure.ID }).then((res) => {
|
if (res.code == 200) {
|
// res.data.number
|
this.procedureList[0].push({
|
number: res.data.number,
|
name: "工艺",
|
});
|
}
|
});
|
}
|
console.log(this.procedureList, "===1111procedureList");
|
// setTimeout(() => {
|
this.setInterCard("inputMaterials", "cardBox1");
|
// this.setInterCard('procedureList','cardBox2')
|
this.setInterCard("outputMaterials", "cardBox3");
|
// }, 5000);
|
}
|
});
|
},
|
// 设置
|
setUrl() {
|
const { href } = this.$router.resolve({
|
path: "/set",
|
});
|
window.open(href, "_blank");
|
},
|
// 右侧控制
|
controlClick() {
|
if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
|
this.$refs.control.islook = true;
|
} else {
|
this.$message.error("当前设备没有工序！");
|
}
|
},
|
// 右侧完成
|
finishClick() {
|
if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
|
finishTask({ id: this.taskData.Procedure.ID }).then((res) => {
|
if (res.code == 200) {
|
this.finishShow = false;
|
this.getTaskInfo();
|
this.$message.success("操作成功！");
|
}
|
});
|
} else {
|
this.$message.error("当前设备没有工序！");
|
}
|
},
|
getRandomNumber(min, max) {
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
},
|
format(percentage) {
|
return `合格率：${percentage}%`;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.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;
|
}
|
.el-button--primary {
|
border: 0;
|
font-weight: 700 !important;
|
font-size: 16px !important;
|
}
|
.color_4efefa {
|
color: #4efefa;
|
}
|
.el-carousel__indicators--vertical {
|
display: none;
|
}
|
.color_blue {
|
background: #33ccff !important;
|
}
|
.color_green {
|
background: #00cc66 !important;
|
}
|
.color_organge {
|
background: #f76c0f !important;
|
}
|
.color_f70f83 {
|
background: #09e5ed !important;
|
color: #333 !important;
|
}
|
.bottom_list {
|
position: relative;
|
padding: 10px;
|
width: 30%;
|
height: 100%;
|
border-radius: 6px;
|
background: rgb(22 72 173);
|
// float:left;
|
.bottom-title {
|
font-weight: 600;
|
font-size: 22px;
|
height: 30px;
|
line-height: 30px;
|
margin-bottom: 30px;
|
.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 - 50px);
|
// overflow:auto;
|
// height:300px;
|
}
|
}
|
|
.small_title {
|
font-size: 24px;
|
margin-bottom: 10px;
|
}
|
.right-small-btn {
|
margin-top: 10px;
|
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;
|
}
|
}
|
}
|
.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;
|
|
text-align: center;
|
}
|
|
.statelist {
|
width: 100%;
|
margin: 0 auto;
|
height: 50px;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-around;
|
align-items: center;
|
.title-item {
|
width: calc(25% - 50px);
|
float: left;
|
margin-right: 10px;
|
padding: 15px 20px;
|
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%;
|
height: 240px;
|
margin: 30px 0px;
|
overflow: hidden;
|
.content_left {
|
width: 24%;
|
height: 100%;
|
float: left;
|
// padding:2%;
|
.content-top {
|
background: rgb(22 72 173);
|
height: calc(50% - 30px);
|
padding-top: 20px;
|
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: 24px;
|
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;
|
// background: #233b9e;
|
.el-descriptions__body {
|
background: transparent;
|
font-size: 18px;
|
}
|
.el-descriptions__table {
|
width: 100%;
|
margin: 10px 0px;
|
// background: #233b9e;
|
color: #fff;
|
.el-descriptions--small {
|
width: 100%;
|
// margin: 50px 50px;
|
}
|
}
|
.el-progress {
|
width: 80%;
|
}
|
}
|
}
|
|
.bottom {
|
width: 100%;
|
height: calc(100% - 500px);
|
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: 20px;
|
color: #333;
|
position: relative;
|
.card_top-2,
|
.card_top-3 {
|
width: 50%;
|
height: 45px;
|
border-radius: 5px;
|
background: #6b83ff;
|
font-size: 12px;
|
color: #fff;
|
float: left;
|
.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-4 {
|
width: 50%;
|
height: 45px;
|
border-radius: 5px;
|
background: #6b83ff;
|
color: #fff;
|
font-size: 12px;
|
line-height: 45px;
|
float: left;
|
|
> div {
|
margin-left: 12px;
|
position: relative;
|
p {
|
position: absolute;
|
top: -14px;
|
right: 15px;
|
font-size: 14px;
|
}
|
}
|
}
|
.card_top-4 {
|
width: calc(100% - 20px);
|
padding: 0 10px;
|
height: 70px;
|
|
line-height: 40px;
|
color: #fff;
|
background: rgb(19, 35, 90);
|
font-size: 20px;
|
}
|
.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 4%;
|
overflow-x: hidden;
|
margin-left: -4%;
|
.yuandian {
|
width: 25px;
|
height: 25px;
|
line-height: 40px;
|
margin-top: 12.5px;
|
display: inline-block;
|
background: #15d815;
|
display: block;
|
border-radius: 50%;
|
float: right;
|
}
|
}
|
.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(100% - 20px);
|
height: 270px;
|
border-radius: 4px;
|
line-height: 30px;
|
overflow: hidden;
|
// background: #00cc66;
|
margin-top: 10px;
|
padding: 5px 10px;
|
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% - 40px);
|
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% - 520px);
|
min-height: 200px;
|
// overflow-y:auto;
|
position: relative;
|
.right-base-btn {
|
width: 100%;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
.el-button--primary {
|
width: 100%;
|
background: #ff0000;
|
float: right;
|
border-radius: 6px;
|
color: #fff;
|
font-weight: 700;
|
font-size: 18px;
|
}
|
}
|
// .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;
|
// }
|
}
|
}
|
}
|
</style>
|
