From b8ba5ab9938b79fa0ec2ee7b6df2f47490536389 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 28 十月 2024 15:14:43 +0800
Subject: [PATCH] 总控车间新增配置假数据功能
---
src/views/mdc/base/modules/MasterControlWorkshopSignage/SignageModal.vue | 330 +++++++++++++++++++++++++++++++++
src/views/mdc/base/MasterControlWorkshopSignage.vue | 218 ++++++++++++++++++---
2 files changed, 510 insertions(+), 38 deletions(-)
diff --git a/src/views/mdc/base/MasterControlWorkshopSignage.vue b/src/views/mdc/base/MasterControlWorkshopSignage.vue
index ab55d40..efd16d2 100644
--- a/src/views/mdc/base/MasterControlWorkshopSignage.vue
+++ b/src/views/mdc/base/MasterControlWorkshopSignage.vue
@@ -24,10 +24,14 @@
<div style="position: relative">
<img src="../../../assets/image/logo.jpg">
- 涓�鎷栧ぇ鎷栬閰嶅巶
+ <span style="cursor: pointer"
+ @dblclick="modalVisible=true">{{isFakeData?fakeData.title:'涓�鎷栧ぇ鎷栬閰嶅巶'}}</span>
</div>
- <div>鏁板瓧鍖栬溅闂存櫤鑳界鐞嗙郴缁�</div>
+ <div style="cursor: pointer" @dblclick="isFakeData = !isFakeData">
+ {{isFakeData?fakeData.subheading:'鏁板瓧鍖栬溅闂存櫤鑳界鐞嗙郴缁�'}}
+ </div>
</div>
+
<div class="workshop-bg">
<div class="navigate-container" style="top:0;left: 5%;">
<div @click="navigateToSubWorkshopSignage(item)" v-for="item in productionLineList" :key="item.id"
@@ -60,11 +64,16 @@
</div>
</div>
</div>
+
<div class="switch-container">
<div class="switch-item" v-for="(item,index) in switchList" :key="index" @click="navigateToOthers(item,index)"
:style="{backgroundColor:activeIndex===index?'#848284':'#6B6D6B',color:activeIndex==index?'#27A2DB':'#000'}">
{{item.label}}
</div>
+ </div>
+
+ <div class="page-description">
+ {{isFakeData?fakeData.description:'涓�鎷栧伐鏉愭墍 涓� 鐏电鏅鸿兘 鑱斿悎寮�鍙�'}}
</div>
</div>
<div class="right-col">
@@ -85,19 +94,26 @@
</div>
</div>
</div>
+
+ <SignageModal :fakeData="fakeData" :modalVisible="modalVisible"
+ @closeModal="modalVisible=false" @reloadData="reloadData"></SignageModal>
</div>
</template>
<script>
import * as echarts from 'echarts'
import api from '@/api/mdc'
+ import SignageModal from './modules/MasterControlWorkshopSignage/SignageModal'
export default {
name: 'MasterControlWorkshopSignage',
- components: {},
+ components: { SignageModal },
data() {
return {
- activeIndex: 0,
+ isFakeData: true,
+ fakeData: {},
+ modalVisible: false,
+ activeIndex: null,
firstEnterDevicePixelRatio: null,
currentDevicePixelRatio: null,
leftColChart1: '',
@@ -150,6 +166,8 @@
rightColChart1: '',
rightColChart2: '',
rightColChart3: '',
+ rightColChart2Data: '',
+ rightColChart3Data: '',
rightColChart2And3Data: '',
rightColChart2CarouselTime: null,
rightColChart3CarouselTime: null,
@@ -162,7 +180,6 @@
this.firstEnterDevicePixelRatio = window.devicePixelRatio
window.addEventListener('resize', this.handleWindowResize)
this.getProductionListByApi()
- this.getChartDataByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
@@ -170,12 +187,66 @@
if (this.rightColChart3CarouselTime) clearInterval(this.rightColChart3CarouselTime)
if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
},
+ watch: {
+ isFakeData: {
+ handler(value) {
+ if (value) {
+ this.getFakeDataByApi()
+ } else {
+ this.getChartDataByApi()
+ }
+ },
+ immediate: true
+ }
+ },
methods: {
getProductionListByApi() {
api.getProductionLineListApi()
.then(res => {
if (res.success) this.productionLineList = res.result
})
+ },
+
+ getFakeDataByApi() {
+ api.getFakeDataApi()
+ .then(res => {
+ console.log('res', res)
+ if (res.success) this.fakeData = res.result
+ this.leftColChart1Data = [
+ {
+ name: '浜у搧鍚堟牸鐜�',
+ count: res.result.passRate / 100
+ },
+ {
+ name: '璁惧鍒╃敤鐜�',
+ count: res.result.utilizationRate / 100
+ },
+ {
+ name: '璁″垝瀹屾垚鐜�',
+ count: res.result.planCompleteRate / 100
+ }
+ ]
+ this.leftColChart2Data = res.result.todayProductionList
+ this.leftColChart3Data = res.result.todayPassRateList
+ this.leftColChart4Data = res.result.todayShiftCountList
+ this.rightColChart2Data = res.result.todayOpenRateList
+ this.rightColChart3Data = res.result.todayUtilizationRateList
+ this.rightColChart4Data = res.result.monthUtilizationRateList
+ this.$nextTick(() => {
+ this.drawLeftColChart1()
+ this.drawLeftColChart2()
+ this.drawLeftColChart3()
+ this.drawLeftColChart4()
+ this.drawRightColChart2()
+ this.drawRightColChart3()
+ this.drawRightColChart4()
+ })
+ })
+ },
+
+ reloadData() {
+ this.modalVisible = false
+ if (this.isFakeData) this.getFakeDataByApi()
},
getChartDataByApi() {
@@ -189,7 +260,6 @@
},
getLeftColChart1DataByApi() {
- this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
api.getYesterdayOverviewApi()
.then(res => {
// console.log('res', res)
@@ -214,7 +284,6 @@
},
getLeftColChart2DataByApi() {
- this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
api.getTodayProductionProgressApi()
.then(res => {
// console.log('res', res)
@@ -226,7 +295,6 @@
},
getLeftColChart3DataByApi() {
- this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
api.getTodayProductPassRateApi()
.then(res => {
// console.log('res', res)
@@ -238,7 +306,6 @@
},
getLeftColChart4DataByApi() {
- this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
api.getTeamCompletionCountApi()
.then(res => {
// console.log('res', res)
@@ -255,8 +322,6 @@
},
getRightColChart2And3DataByApi() {
- this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
- this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
api.getTodayEquipmentWorkEfficiencyApi()
.then(res => {
// console.log('res', res)
@@ -269,7 +334,6 @@
},
getRightColChart4DataByApi() {
- this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
api.getMonthEquipmentUtilizationRateApi()
.then(res => {
// console.log('res', res)
@@ -282,6 +346,9 @@
/* 缁樺埗宸︿晶绗竴涓浘琛� */
drawLeftColChart1() {
+ this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
+ console.log('leftColChart1Data', this.leftColChart1Data)
+
const yAxisData = []
const option = {
radar: [
@@ -410,14 +477,26 @@
/* 缁樺埗宸︿晶绗簩涓浘琛� */
drawLeftColChart2() {
+ this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
const xAxisData = []
const seriesData1 = []
const seriesData2 = []
- this.leftColChart2Data.forEach(item => {
- xAxisData.push(item.productName == null ? '' : item.productName)
- seriesData1.push({ value: item.planCount == null ? '' : item.planCount })
- seriesData2.push({ value: item.completionCount == null ? '' : item.completionCount })
- })
+ if (this.isFakeData) {
+ this.leftColChart2Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData1.push({ value: item.value1 == null ? '' : item.value1 })
+ seriesData2.push({ value: item.value2 == null ? '' : item.value2 })
+ }
+ })
+ } else {
+ this.leftColChart2Data.forEach(item => {
+ xAxisData.push(item.productName == null ? '' : item.productName)
+ seriesData1.push({ value: item.planCount == null ? '' : item.planCount })
+ seriesData2.push({ value: item.completionCount == null ? '' : item.completionCount })
+ })
+ }
+
const option = {
tooltip: {
show: true,
@@ -570,6 +649,7 @@
/* 缁樺埗宸︿晶绗笁涓浘琛� */
drawLeftColChart3() {
+ this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
const data = [
{
'number': 'A_1',
@@ -623,12 +703,24 @@
]
const xAxisData = []
const seriesData = []
- this.leftColChart3Data.forEach(item => {
- xAxisData.push(item.productionName == null ? '' : item.productionName)
- seriesData.push({
- value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
+ if (this.isFakeData) {
+ this.leftColChart3Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({
+ value: this.toDecimal2NoZero(((item.value1 == null ? '' : item.value1) * 100) > 100 ? 100 : (((item.value1 == null ? '' : item.value1) * 100)))
+ })
+ }
})
- })
+ } else {
+ this.leftColChart3Data.forEach(item => {
+ xAxisData.push(item.productionName == null ? '' : item.productionName)
+ seriesData.push({
+ value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
+ })
+ })
+ }
+
const option = {
tooltip: {
show: true,
@@ -831,12 +923,22 @@
/* 缁樺埗宸︿晶绗洓涓浘琛� */
drawLeftColChart4() {
+ this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
const xAxisData = []
const seriesData = []
- this.leftColChart4Data.forEach(item => {
- xAxisData.push(item.clazz == null ? '' : item.clazz)
- seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
- })
+ if (this.isFakeData) {
+ this.leftColChart4Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 == null ? '' : item.value1 })
+ }
+ })
+ } else {
+ this.leftColChart4Data.forEach(item => {
+ xAxisData.push(item.clazz == null ? '' : item.clazz)
+ seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
+ })
+ }
const option = {
tooltip: {
show: true,
@@ -1195,6 +1297,7 @@
/* 缁樺埗鍙充晶绗簩涓浘琛� */
drawRightColChart2() {
+ this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
const data = [
{
'number': 'A_1',
@@ -1358,10 +1461,20 @@
)
]
- this.rightColChart2And3Data.forEach(item => {
- xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
- seriesData.push({ value: item.openRate })
- })
+ if (this.isFakeData) {
+ this.rightColChart2Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 })
+ }
+ })
+ } else {
+ this.rightColChart2And3Data.forEach(item => {
+ xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
+ seriesData.push({ value: item.openRate })
+ })
+ }
+
const option = {
tooltip: {
show: true,
@@ -1481,6 +1594,7 @@
option.series[0].data = seriesData
this.rightColChart2.setOption(option, true)
+ clearInterval(this.rightColChart2CarouselTime)
this.rightColChart2CarouselTime = setInterval(() => {
xAxisData.push(xAxisData.shift())
seriesData.push(seriesData.shift())
@@ -1493,6 +1607,7 @@
/* 缁樺埗鍙充晶绗笁涓浘琛� */
drawRightColChart3() {
+ this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
const data = [
{
'number': 'A_1',
@@ -1655,10 +1770,19 @@
]
)
]
- this.rightColChart2And3Data.forEach(item => {
- xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
- seriesData.push({ value: item.utilizationRate })
- })
+ if (this.isFakeData) {
+ this.rightColChart3Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 })
+ }
+ })
+ } else {
+ this.rightColChart2And3Data.forEach(item => {
+ xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
+ seriesData.push({ value: item.utilizationRate })
+ })
+ }
const option = {
tooltip: {
show: true,
@@ -1778,6 +1902,7 @@
option.series[0].data = seriesData
this.rightColChart3.setOption(option, true)
+ clearInterval(this.rightColChart3CarouselTime)
this.rightColChart3CarouselTime = setInterval(() => {
xAxisData.push(xAxisData.shift())
seriesData.push(seriesData.shift())
@@ -1790,6 +1915,7 @@
/* 缁樺埗鍙充晶绗洓涓浘琛� */
drawRightColChart4() {
+ this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
const data = [
{
'number': 'A_1',
@@ -2032,10 +2158,19 @@
]
)
]
- this.rightColChart4Data.forEach(item => {
- xAxisData.push(item.date == null ? '' : item.date)
- seriesData.push({ value: item.utilizationRate })
- })
+ if (this.isFakeData) {
+ this.rightColChart4Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 })
+ }
+ })
+ } else {
+ this.rightColChart4Data.forEach(item => {
+ xAxisData.push(item.date == null ? '' : item.date)
+ seriesData.push({ value: item.utilizationRate })
+ })
+ }
const option = {
tooltip: {
show: true,
@@ -2146,6 +2281,7 @@
option.series[0].data = seriesData
this.rightColChart4.setOption(option, true)
+ clearInterval(this.rightColChart4CarouselTime)
this.rightColChart4CarouselTime = setInterval(() => {
xAxisData.push(xAxisData.shift())
seriesData.push(seriesData.shift())
@@ -2294,6 +2430,12 @@
cursor: pointer;
}
}
+
+ .page-description {
+ text-align: center;
+ color: #fff;
+ font-size: 14px;
+ }
}
.left-col, .right-col {
diff --git a/src/views/mdc/base/modules/MasterControlWorkshopSignage/SignageModal.vue b/src/views/mdc/base/modules/MasterControlWorkshopSignage/SignageModal.vue
new file mode 100644
index 0000000..1ec7a47
--- /dev/null
+++ b/src/views/mdc/base/modules/MasterControlWorkshopSignage/SignageModal.vue
@@ -0,0 +1,330 @@
+<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">
+ <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">
+ <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>
\ No newline at end of file
--
Gitblit v1.9.3