总控车间新增配置假数据功能

zhaowei

2024-10-28 b8ba5ab9938b79fa0ec2ee7b6df2f47490536389

总控车间新增配置假数据功能

 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 = []
        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 = []
        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 = []
        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 @@
          )
        ]

        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 @@
            ]
          )
        ]
        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 @@
            ]
          )
        ]
        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 {

 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>