<template>
|
<a-modal title="配置参数" :width="modalWidth" :visible="modalVisible" :footer="null" @cancel="$emit('closeModal')"
|
centered :maskClosable="false">
|
<div class="description-container">
|
<div class="description-title">标题</div>
|
<a-descriptions :column="9">
|
<a-descriptions-item label="正标题"></a-descriptions-item>
|
<a-descriptions-item>
|
<a-input :maxLength="20" v-model="propFakeData.title"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限20字)</a-descriptions-item>
|
<a-descriptions-item label="副标题"></a-descriptions-item>
|
<a-descriptions-item>
|
<a-input :maxLength="20" v-model="propFakeData.subheading"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限20字)</a-descriptions-item>
|
<a-descriptions-item label="开发说明"></a-descriptions-item>
|
<a-descriptions-item>
|
<a-input :maxLength="20" v-model="propFakeData.description"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限20字)</a-descriptions-item>
|
<a-descriptions-item label="昨日完成计划率"></a-descriptions-item>
|
<a-descriptions-item>
|
<a-input-number :precision="0" :min="0" :max="100" v-model="propFakeData.planCompleteRate"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限数字)</a-descriptions-item>
|
<a-descriptions-item label="昨日设备利用率"></a-descriptions-item>
|
<a-descriptions-item>
|
<a-input-number :precision="0" :min="0" :max="100" v-model="propFakeData.utilizationRate"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限数字)</a-descriptions-item>
|
<a-descriptions-item label="昨日产品合格率"></a-descriptions-item>
|
<a-descriptions-item>
|
<a-input-number :precision="0" :min="0" :max="100" v-model="propFakeData.passRate"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限数字)</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
|
<!--今日生产进度-->
|
<div class="description-container">
|
<div class="description-title">今日生产进度</div>
|
<a-descriptions :column="12">
|
<a-descriptions-item label="产品名称"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayProductionList" :key="item.id">
|
<a-input :maxLength="5" v-model="item.label"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限5字)</a-descriptions-item>
|
|
<a-descriptions-item label="计划量"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayProductionList" :key="item.id">
|
<a-input-number :precision="0" :min="0" v-model="item.value1"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限整数)</a-descriptions-item>
|
|
<a-descriptions-item label="完成量"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayProductionList" :key="item.id">
|
<a-input-number :precision="0" :min="0" v-model="item.value2"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限整数)</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
|
<!--今日产品合格率-->
|
<div class="description-container">
|
<div class="description-title">今日产品合格率</div>
|
<a-descriptions :column="12">
|
<a-descriptions-item label="产品名称"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayPassRateList" :key="item.id">
|
<a-input :maxLength="5" v-model="item.label"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限5字)</a-descriptions-item>
|
<a-descriptions-item label="合格率"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayPassRateList" :key="item.id">
|
<a-input-number :precision="0" :min="0" :max="100" v-model="item.value1"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限整数)</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
|
<!--今日班次完成量-->
|
<div class="description-container">
|
<div class="description-title">今日班次完成量</div>
|
<a-descriptions :column="12">
|
<a-descriptions-item label="班次名称"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayShiftCountList" :key="item.id">
|
<a-input :maxLength="5" v-model="item.label"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限5字)</a-descriptions-item>
|
<a-descriptions-item label="完成量"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayShiftCountList" :key="item.id">
|
<a-input-number :precision="0" :min="0" v-model="item.value1"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限整数)</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
|
<!--今日设备开机率-->
|
<div class="description-container">
|
<div class="description-title">今日设备开机率</div>
|
<a-descriptions :column="12">
|
<a-descriptions-item label="设备名称"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayOpenRateList" :key="item.id">
|
<a-input :maxLength="5" v-model="item.label"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限5字)</a-descriptions-item>
|
<a-descriptions-item label="开机率"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayOpenRateList" :key="item.id">
|
<a-input-number :precision="0" :min="0" :max="100" v-model="item.value1"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限整数)</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
|
<!--今日设备利用率-->
|
<div class="description-container">
|
<div class="description-title">今日设备利用率</div>
|
<a-descriptions :column="12">
|
<a-descriptions-item label="设备名称"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayUtilizationRateList" :key="item.id">
|
<a-input :maxLength="5" v-model="item.label"></a-input>
|
</a-descriptions-item>
|
<a-descriptions-item>(长度限5字)</a-descriptions-item>
|
<a-descriptions-item label="利用率"></a-descriptions-item>
|
<a-descriptions-item v-for="item in propFakeData.todayUtilizationRateList" :key="item.id">
|
<a-input-number :precision="0" :min="0" :max="100" v-model="item.value1"></a-input-number>
|
</a-descriptions-item>
|
<a-descriptions-item>(限整数)</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
|
<div class="description-container">
|
<div class="description-title">月设备利用率</div>
|
<a-descriptions :column="18">
|
<a-descriptions-item label="日期"></a-descriptions-item>
|
<template v-for="(item,index) in propFakeData.monthUtilizationRateList">
|
<a-descriptions-item v-if="index<16">
|
<a-input :maxLength="5" v-model="item.label"></a-input>
|
</a-descriptions-item>
|
</template>
|
<a-descriptions-item>(长度限5字)</a-descriptions-item>
|
<a-descriptions-item label="利用率"></a-descriptions-item>
|
<template v-for="(item,index) in propFakeData.monthUtilizationRateList">
|
<a-descriptions-item v-if="index<16">
|
<a-input-number :min="0" :max="100" v-model="item.value1"></a-input-number>
|
</a-descriptions-item>
|
</template>
|
<a-descriptions-item>(限数字)</a-descriptions-item>
|
|
|
<template>
|
<a-descriptions-item label="日期"></a-descriptions-item>
|
<template v-for="(item,index) in propFakeData.monthUtilizationRateList">
|
<a-descriptions-item v-if="index>=16">
|
<a-input :maxLength="5" v-model="item.label"></a-input>
|
</a-descriptions-item>
|
</template>
|
<a-descriptions-item></a-descriptions-item>
|
<a-descriptions-item></a-descriptions-item>
|
<a-descriptions-item label="利用率"></a-descriptions-item>
|
<template v-for="(item,index) in propFakeData.monthUtilizationRateList">
|
<a-descriptions-item v-if="index>=16">
|
<a-input-number :min="0" :max="100" v-model="item.value1"></a-input-number>
|
</a-descriptions-item>
|
</template>
|
<a-descriptions-item></a-descriptions-item>
|
<a-descriptions-item></a-descriptions-item>
|
</template>
|
|
</a-descriptions>
|
</div>
|
|
<div class="drawer-bottom-button">
|
<a-space>
|
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">保存</a-button>
|
<a-popconfirm title="确定放弃操作？" @confirm="$emit('closeModal')" okText="确定" cancelText="取消">
|
<a-button>退出</a-button>
|
</a-popconfirm>
|
</a-space>
|
</div>
|
</a-modal>
|
</template>
|
|
<script>
|
import api from '@/api/mdc'
|
|
export default {
|
name: 'SignageModal',
|
components: {},
|
props: {
|
modalWidth: {
|
type: Number,
|
default: 1448
|
},
|
fakeData: {
|
type: Object
|
},
|
modalVisible: {
|
type: Boolean
|
}
|
},
|
watch: {
|
modalVisible: {
|
handler(value) {
|
if (value) {
|
this.propFakeData = Object.assign({}, this.fakeData)
|
console.log('propFakeData', this.propFakeData)
|
}
|
}
|
}
|
},
|
created() {
|
|
},
|
data() {
|
return {
|
propFakeData: {},
|
confirmLoading: false
|
}
|
},
|
methods: {
|
handleSubmit() {
|
this.confirmLoading = true
|
api.editFakeDataApi(this.propFakeData)
|
.then(res => {
|
console.log('res', res)
|
if (res.success) {
|
this.$emit('reloadData')
|
this.confirmLoading = false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/*/deep/ .ant-modal-content {*/
|
/*background-color: #000;*/
|
/*}*/
|
|
/*/deep/ .ant-modal-header {*/
|
/*background-color: #000;*/
|
/*}*/
|
|
/deep/ .ant-modal-body {
|
padding: 1px 24px;
|
}
|
|
/deep/ .ant-modal-title {
|
color: #000;
|
font-weight: bold;
|
font-size: 20px;
|
}
|
|
/*/deep/ .ant-modal-close {*/
|
/*color: #fff;*/
|
/*}*/
|
|
/deep/ .ant-input {
|
color: #000;
|
/*background-color: #000;*/
|
height: 25px;
|
}
|
|
/deep/ .ant-input-number {
|
width: 100%;
|
height: 25px;
|
/*.ant-input-number-handler {*/
|
/*background-color: #000;*/
|
/*i {*/
|
/*color: #fff;*/
|
/*}*/
|
/*}*/
|
|
.ant-input-number-input {
|
color: #000;
|
height: 25px;
|
|
/*background-color: #000;*/
|
}
|
}
|
|
.description-container {
|
position: relative;
|
.description-title {
|
position: absolute;
|
font-size: 16px;
|
color: #000;
|
top: -12px;
|
left: 10px;
|
background-color: #fff;
|
}
|
}
|
|
/deep/ .ant-descriptions {
|
border: 1px solid #ddd;
|
margin: 15px 0;
|
padding-top: 15px;
|
|
.ant-descriptions-item {
|
.ant-descriptions-item-content {
|
color: #000;
|
margin: 0 0.1vw;
|
}
|
}
|
}
|
|
/deep/ .ant-descriptions-row > td {
|
padding-bottom: 5px
|
}
|
|
/deep/ .ant-descriptions-title {
|
/*color: #fff;*/
|
padding: 10px;
|
margin-bottom: 0;
|
}
|
|
/deep/ .ant-descriptions {
|
.ant-descriptions-item-colon {
|
color: #000;
|
float: right;
|
}
|
}
|
|
.drawer-bottom-button {
|
padding: 10px 16px;
|
text-align: center;
|
}
|
</style>
|
