ibms/src/views/screen/splitscreen/integrateresults/index.vue

<!--
 * @Author: zhangyu
 * @Date: 2019-11-13 17:00:59
 * @Info: 系统集成成果辅助屏
 * @LastEditTime: 2019-11-18 16:49:55
 -->
<template>
  <div>
    <div class='page-bar'>
      <el-breadcrumb separator='/'>
      <el-breadcrumb-item>系统集成</el-breadcrumb-item>
      <el-breadcrumb-item>系统集成成果管理</el-breadcrumb-item>                       
      </el-breadcrumb>
    </div>
    <div class="page-content">
      <div class="content-left">
        <div class="data-box">
          <realtime-data :queryParams="queryParams"></realtime-data>
        </div>
        <div class="example-box">
          <example-list :queryParams="queryParams" @changeExample="handleChangeExample"></example-list>
        </div>
      </div>
      <div class="content-right">
        <canvas v-if="drawCanvas" height="100%" :width="canvasWidth" class="instanceMap" :id="form.instanceId" :k="refreshCanvas"></canvas>
        <div class="no-data" v-else>
          <div class="position-icon">
            <i class="icon-wushuju iconfont"></i>
            数据暂无
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import realtimeData from '@/components/screen/integrateresults/realtimeData'
import exampleList from '@/components/screen/integrateresults/exampleList'

export default {
  components: {
    realtimeData,
    exampleList
  },
  computed: {
    ...mapGetters('layout', ['userInfo', 'projectId', 'projects', 'userId'])
  },
  created() {
    
  },
  mounted() {

  },
  data() {
    return {
      queryParams: this.$route.query
    }
  },
  methods:{
    handleChangeExample(example) {
      console.log(example)
    }
  },
  watch: {
    $route(to,from){
      this.queryParams = this.$route.query
    }
  },
}
</script>

<style lang="scss" scoped>
$borderColor: rgba(201, 201, 201, 1);
.page-bar{
  flex-grow: 0;
  flex-shrink: 0;
  height: 24px;
  padding: 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid $borderColor;
  /deep/ .el-breadcrumb {
    font-size: 14px;
  }
}
.page-content{
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-direction: row;
  justify-content: flex-start;
  overflow-y: auto;
  .content-left{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 260px;
    margin-right: 15px;
    .data-box{
      height: 140px;
      margin-bottom: 15px;
    }
    .example-box{
      flex-grow: 1;
      flex-shrink: 1;
      border: 1px solid $borderColor;
    }
  }
  .content-right{
    flex-grow: 1;
    flex-shrink: 1;
    border: 1px solid $borderColor;
    .no-data{
      height: 100%;
      text-align: center;
      box-sizing: border-box;
      position: relative;
      .position-icon{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
  }
}
</style>