智慧工厂大屏开发

承接了几个展示大屏的开发任务，部分代码如下(wx:  giobiovvv)：

<template>
  <div class="container">
    <ck-player :sourceUrl="sourceUrl" @playStatus="changePlayStatus"></ck-player>

    <div class="top-text-info">
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="top-text-one">
            <div class="avatar-img">
              <img :src="userImg" width="64" height="64"/>
            </div>
            <div class="name-info">
              <p>欢迎回来，Admin</p>
              <span>您已入驻平台1024天！</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-text-two">
            <div class="left-img-box"></div>
            <div class="right-text">
              <p>齐套可排产订单</p>
              <span>36</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-text-three">
            <div class="left-img-box"></div>
            <div class="right-text">
              <p>可出库生产</p>
              <span>20</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-text-four">
            <div class="left-img-box"></div>
            <div class="right-text">
              <p>物料补充</p>
              <span>20</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="top-echart-list">
      <el-row :gutter="15">
        <el-col :span="8">
          <div class="echart-box">
            <div class="echart-title">
              生产计划执行情况
            </div>
            <div class="echart-content">
              <echart-one id="echartOne" width="100%" height="100%" :value="echartDataOne"></echart-one>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="echart-box">
            <div class="echart-title">
              生产工艺实际耗时
            </div>
            <div class="echart-content">
              <echart-two id="echartTwo" width="100%" height="100%" :value="echartDataTwo"></echart-two>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="echart-box">
            <div class="echart-title">
              生产异常情况
            </div>
            <div class="echart-content">
              <echart-three id="echartThree" width="100%" height="100%" :value="echartDataThree"></echart-three>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="btm-table">
      <div class="table-title">
        <div class="left-text">生产计划完成状态</div>
        <div class="right-date">

        </div>
      </div>
      <el-table
        v-loading="tableLoading"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        fixed
        style="width: 100%"
        :header-cell-style="{background:'#F0F2F5',color:'#333333'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
        />
        <el-table-column
          label="计划单号"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.constructionName }}</template>
        </el-table-column>
        <el-table-column
          prop="constructionAddress"
          label="订单名称"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contacts"
          align="center"
          label="责任人"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contactTelephone"
          label="调度人"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contactTelephone"
          label="状态"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contactTelephone"
          label="下达日期"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contactTelephone"
          label="计划完成日期"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contactTelephone"
          label="执行进度"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contactTelephone"
          label="最新进展"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contactTelephone"
          label="更新日期"
          align="center"
        />
      </el-table>
      <div>
        <el-pagination
          background
          style="text-align: right;margin-top: 16px"
          layout="total, prev, pager, next"
          :total="pagination.total"
          :page="pagination.pageNum"
          :page-size="pagination.pageSize"
          @pagination="handlePaginationChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import EchartOne from '@/views/home/components/echartOne'
  import EchartTwo from '@/views/home/components/echartTwo'
  import EchartThree from '@/views/home/components/echartThree'
  import ckPlayer from './plyaer.vue'
  import XBack from './xb'

  export default {
    name: 'home',
    components: {
      ckPlayer,
      EchartOne,
      EchartTwo,
      EchartThree
    },
    data() {
      return {
        dialogVisible: false,
        sourceUrl: 'http://119.36.93.100:8258/hls/myVideo/channel6/channel6.m3u8',
        userImg: require('@/assets/user.png'),
        echartDataOne: {},
        echartDataTwo: {},
        echartDataThree: {},
        tableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1,
          total: 0
        },
        multipleSelection: [],
        tableLoading: false
      }
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    mounted() {
      this.changePlayStatus(true)

      XBack.init()
      XBack.listen(() => {
        localStorage.setItem('show', 'true')
        window.location.href = window.location.href.split('?')[0] + '?uuid=' + this.generateMixed(3)
        if (localStorage.getItem('show') != null) {
          this.dialogVisible = true
        }
      })


      console.log(5555555555)
      localStorage.removeItem('show')
      // history.pushState(null, null, document.URL)
      //  window.addEventListener('popstate', this.handleEvent, false)

    },
    destroyed() {
      // window.removeEventListener('popstate', this.handleEvent, false)
    },
    methods: {

      generateMixed(n) {
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        var res = ''
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35)
          res += chars[id]
        }
        return res
      },
      handleEvent() {
        history.pushState(null, null, document.URL)
        this.dialogVisible = true
      },
      changePlayStatus(status) { //获取子组件的播放状态
        if (status) {
          this.disabledShot = false
        } else {
          this.disabledShot = true
          this.sourceUrl = ''
          this.checkedPontsName = ''
        }
      },
      handlePaginationChange({ limit, page }) {
        this.pagination.pageNum = page
        this.pagination.pageSize = limit
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    box-sizing: border-box;
    margin: 16px;
    width: 100%;
    min-height: calc(100vh - 70px);
    overflow-x: hidden;

    .btm-table {
      width: 100%;
      margin-top: 16px;
      overflow: hidden;
      border-radius: 6px;
      background: white;
      box-sizing: border-box;
      padding: 0 20px 20px 20px;

      .table-title {
        height: 60px;
        width: 100%;
        border-bottom: 1px solid #F7F7F7;
        margin-bottom: 4px;

        .left-text {
          width: 40%;
          box-sizing: border-box;
          line-height: 60px;
          height: 60px;
          color: #5C61C9;
        }
      }
    }

    .top-echart-list {
      width: 100%;
      margin-top: 16px;

      .echart-box {
        width: 100%;
        height: 316px;
        background: white;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 30px;

        .echart-title {
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: #D5E4FF;
          font-weight: 200;
        }

        .echart-content {
          width: 100%;
          height: 220px;
          margin-top: 6px;
        }
      }
    }

    .top-text-info {
      width: 100%;
      height: 104px;
      margin-bottom: 16px;

      .top-text-one {
        height: 104px;
        background: white;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;

        .avatar-img {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .name-info {
          height: 72px;
          box-sizing: border-box;
          padding: 12px;

          p {
            font-size: 16px;
            color: #303133;
            margin: 0;
          }

          span {
            display: block;
            margin-top: 4px;
            font-size: 14px;
            color: #666666;
          }
        }
      }

      .top-text-two {
        height: 104px;
        width: 100%;
        background: white;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;

        .left-img-box {
          width: 64px;
          height: 64px;
          border: 2px solid #0089FF;
          border-radius: 50%;
          background-image: url("../../assets/zzzs.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 60%;
        }

        .right-text {
          margin-left: 10px;
          height: 72px;
          box-sizing: border-box;
          padding: 12px;

          p {
            font-size: 16px;
            color: #303133;
            margin: 0;
          }

          span {
            display: block;
            margin-top: 4px;
            font-size: 24px;
            font-weight: bold;
            color: #0089FF;
          }
        }
      }

      .top-text-three {
        height: 104px;
        width: 100%;
        background: white;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;

        .left-img-box {
          width: 64px;
          height: 64px;
          border: 2px solid #56CC66;
          border-radius: 50%;
          background-image: url("../../assets/zczz.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 60%;
        }

        .right-text {
          margin-left: 10px;
          height: 72px;
          box-sizing: border-box;
          padding: 12px;

          p {
            font-size: 16px;
            color: #303133;
            margin: 0;
          }

          span {
            display: block;
            margin-top: 4px;
            font-size: 24px;
            font-weight: bold;
            color: #56CC66;
          }
        }
      }

      .top-text-four {
        height: 104px;
        width: 100%;
        background: white;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;

        .left-img-box {
          width: 64px;
          height: 64px;
          border: 2px solid #F84A4A;
          border-radius: 50%;
          background-image: url("../../assets/gjzz.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 60%;
        }

        .right-text {
          margin-left: 10px;
          height: 72px;
          box-sizing: border-box;
          padding: 12px;

          p {
            font-size: 16px;
            color: #303133;
            margin: 0;
          }

          span {
            display: block;
            margin-top: 4px;
            font-size: 24px;
            font-weight: bold;
            color: #F84A4A;
          }
        }
      }
    }
  }
</style>

 运行效果如下：