src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue
@@ -1,6 +1,20 @@
<template>
  <div style="flex:1;display: flex;">
    <div class="chart-container" :id="chartContainerId"></div>
    <!--<div style="height: 100%">-->
    <!--<div class="chart-container" :id="chartContainerId"></div>-->
    <!--</div>-->
    <div style="flex: 1;display: flex;flex-direction: column">
      <div class="chart-container" :id="chartContainerId" style="flex: 1"></div>
      <div class="pie-value-container">
        <div>
          <span class="color-square" style="background-color: #00923f"></span>完成量 {{equipmentStatusCountObj.qualifiedQty}}
        </div>
        <div>
          <span class="color-square" style="background-color: #e67817"></span>任务量 {{equipmentStatusCountObj.planQty}}
        </div>
      </div>
    </div>
    <div class="equipment-state-container">
      <div>设备总数:{{equipmentStatusCountObj.equipmentCount}}台</div>
      <div>大修、项修数量:{{equipmentStatusCountObj.repairCount}}台</div>
@@ -18,16 +32,22 @@
      </div>
    </div>
    <SignageModal ref="signageModalRef" :modalTitle="modalTitle" :productionId="currentProductionId"/>
  </div>
</template>
<script>
  import signageApi from '@/api/signage'
  import SignageModal from './SignageModal'
  export default {
    name: 'WorkshopDeviceOverview',
    components: {},
    components: { SignageModal },
    props: {
      workshopName: {
        type: String
      },
      currentProductionId: {
        type: String
      },
@@ -42,7 +62,8 @@
      return {
        chartContainer: null,
        chartContainerId: 'left-col-chart1',
        equipmentStatusCountObj: {}
        equipmentStatusCountObj: {},
        modalTitle: ''
      }
    },
    mounted() {
@@ -81,7 +102,7 @@
            {
              name: '类目',
              type: 'pie',
              radius: '60%',
              radius: '90%',
              center: ['50%', '50%'],
              hoverAnimation: false,
              data: [
@@ -124,6 +145,12 @@
        }
        option.series[0].data[0].value = yAxisData1
        option.series[0].data[1].value = yAxisData2
        this.chartContainer.on('click', () => {
          this.modalTitle = this.workshopName + '当月任务完成百分比'
          this.$refs.signageModalRef.visible = true
        })
        this.chartContainer.setOption(option, true)
      },
@@ -155,6 +182,22 @@
</script>
<style lang="less">
  .pie-value-container {
    > div {
      text-align: center;
      margin-bottom: 5px;
    }
    .color-square {
      display: inline-block;
      width: 0.625vw;
      height: 0.45vw;
      border-radius: 0.1vw;
      background-color: #00ff80;
      margin-right: 0.4vw;
    }
  }
  .equipment-state-container {
    display: flex;
    flex-direction: column;