jonhon-mes-web/src/views/wel/components/workbase.vue

<template>
  <div class="container">
    <div class="left_box">
      <div class="left_top">
        <!-- <div class="top_title">欢迎回来！</div> -->
        <statistics-data></statistics-data>
        <efficiency v-if="showEcharts"></efficiency>
      </div>
      <div class="left_bottom">
        <div class="left_box">
          <output-table></output-table>
        </div> 
        <div class="right_box">
          <order-detail></order-detail>
        </div>
        
      </div>
    </div>
    <div class="right_box">
      <div class="right_top">
        <quick-access></quick-access>
        <statistics-table></statistics-table>
      </div>
      <div class="right_bottom">
        <notice></notice>
      </div>
    </div>
  </div>
</template>

<script>
import statisticsData from './statisticsData.vue';
import efficiency from './efficiency.vue';
import orderDetail from './orderDetail.vue';
import quickAccess from './quickAccess.vue';
import statisticsTable from './statisticsTable.vue';
import notice from './notice.vue';
import outputTable from './outputTable.vue';
// import { setting } from '@/api/system/tenant';
export default {
  components:{
    statisticsData,
    efficiency,
    orderDetail,
    quickAccess,
    statisticsTable,
    notice,
    outputTable
  },
  data(){
    return{
      showEcharts:true
    }
  },
  computed: {
        styleRadio() {
            console.log('this.$store.state.setting.styleRadio',this.$store.state.common.setting)
            return this.$store.state.common.setting.styleRadio;
        },
    },
    watch:{
        styleRadio(newVal,oldVal){
            this.showEcharts = false
            this.$nextTick(() =>{
              this.showEcharts = true
            })
        }
    },
  mounted(){
  },
  methods:{
    
  }
}
</script>

<style lang="scss" scoped>
  .container{
    width: 98%;
    height: 100%;
    overflow: hidden;
    // background: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left_box{
      width: 78%;
      // background: red;
      height: 100%;

      .left_top{
        width: 100%;
        height: 52%;
        border-radius: 10px;
        background: #fff;

        .top_title{
          padding: 20px;
          font-size: 25px;
          font-weight: 550;
        }
      }
      .left_bottom{
        width: 100%;
        height: 46%;
      
        margin-top: 1%;
        display: flex;
        justify-content: space-between;

        .left_box{
          width: 49%;
          height: 100%;
          border-radius: 10px;
          background: #fff;
        }

        .right_box{
          width: 49%;
          height: 100%;
          border-radius: 10px;
          background: #fff;
        }
      }
    }

    .right_box{
      width: 21%;
      height: 100%;

      .right_top{
        width: 100%;
        height: 45%;
        border-radius: 10px;
        background: #fff;
      }

      .right_bottom{
        width: 100%;
        height: 53%;
        margin-top: 10px;
        border-radius: 10px;
        background: #fff;
      }
    }
  }

</style>