gjerp_ui/src/views/dashboard/index.vue

<template>
  <!-- 总览-->
  <el-container style="width: 100%;height:90.9vh;background-color: rgba(138,43,226,0.68)">
    <el-row style="width: 100%">
      <el-col :span="3">
        <div style="padding: 15px;margin-top: 80px">
          <div class="group-btn">
            资 料
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            上 料
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            1 跨
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            2 跨
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            3 跨
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            4 跨
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            5 跨
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            6 跨
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
          <div class="group-btn">
            7 跨
            <!--向右的三角-->
            <div class="arrow-right"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="21">
        <el-header style="width: 100%; height: 35px;font-size: 12px;">
          <el-form :inline="true" style="margin-top: 25px">
            <el-row>
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="queryParam.dcCh" placeholder="船号"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-date-picker v-model="queryParam.beginTime" value-format="yyyy/MM" format="yyyy/MM/dd" type="date" placeholder="日期"/>
                </el-form-item>
              </el-col>
<!--              <el-col :span="4">
                <el-form-item>
                  <el-date-picker v-model="queryParam.endTime" value-format="yyyy/MM/dd" format="yyyy/MM/dd" type="date" placeholder="结束时间"/>
                </el-form-item>
              </el-col>-->
<!--              <el-col :span="12" style="text-align: left">
                <el-button type="success">对比</el-button>
                <el-button type="success">全选</el-button>
                <el-button type="success">确定</el-button>
              </el-col>-->
            </el-row>
          </el-form>
        </el-header>
        <div class="rg-table-box" style="width:100%;height:88vh;overflow-y: auto;">
          <div v-for="(item,index) in ks">
            <Content :data="data" :deptName="item" :type="'mp'" :myStyle="{headImgWidth:'70%'}" :users="cqUsers[item]||0"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--    <div style="width: 100%">
          <div style="width: 100%;height: 60vh;background-color: yellow"></div>
          <div style="width: 100%;height: 30.9vh;background-color: blue"></div>
        </div>-->
  </el-container>
  <!--  <div class="dashboard-editor-container" style="background-color: blueviolet;">
      <div class=" clearfix" style="width: 100%;height: 60vh;background-color: yellow">
        <pan-thumb :image="avatar" style="float: left">
          &lt;!&ndash; Your roles:
          <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;
        </pan-thumb>
        <div class="info-container">
          <span class="display_name">{{ name }}</span>
          &lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;
        </div>
      </div>
      <div>
        <img :src="emptyGif" class="emptyGif">
      </div>
    </div>-->
</template>

<script>
import {mapGetters} from 'vuex'
import PanThumb from '@/components/PanThumb'
import XEUtils from 'xe-utils'
import {dictALL} from '@/api/user'
import Template from "@/views/dashboard/components/Template.vue";
import Content from "@/views/dashboard/components/Content.vue";

export default {
  name: 'Dashboard',
  components: {Content, Template, PanThumb },
  data() {
    return {
      ks: ['资料', '上料', '1跨', '2跨', '3跨', '4跨', '5跨', '6跨', '7跨'],
      data: {},
      cqData:{},
      cqUsers: {},
      totalUsers:{},
      queryParam:{
        dcCh:'',
        beginTime:'',
        endTime:'',
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'dictMapList'
    ])
  },
  created(){
    // this.initDict();
    this.initData()
  },
  methods:{
    initData(){
      let i =0
      for (const item of this.ks) {
        if (!this.data[item]){
          this.data[item]=[]
        }
        if (!this.cqData[item]){
          this.cqData[item]=[]
        }
        if (!this.cqUsers[item]){
          this.cqUsers[item]=0
        }
        let totalUser=XEUtils.random(1,10)
        this.totalUsers[item]=totalUser
        if ('准备室'===item){
          totalUser=1
          this.totalUsers[item]=totalUser
        }
        for (let j = 0; j < totalUser; j++) {
          ++i
          const cq=XEUtils.random(0, 1);
          const data={
            ks:item,
            yhdm:'设备'+j,
            name:'设备'+j,
            headImage:'static/img/btn_em.35e6aa07.jpg',
            gzl:XEUtils.random(0, 100),
            cq:cq
          }
          if (cq){
            this.cqUsers[item]+=1
            this.cqData[item].push(data)
          }else {
            this.data[item].push(data)
          }
        }
      }
    },
    //挂载字典数据
    initDict(){
      dictALL().then(res=>{
        const dictItems=res.data;
        for (const dictCode in dictItems) {
          //commit('SET_DICT',dictCode,dictItems[dictCode]);
          window.localStorage.setItem(dictCode,JSON.stringify(dictItems[dictCode]))
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.arrow-right {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left:16px solid yellowgreen;
  position: relative;
  top: -3.45vh;
  left: 7.555vw;
}

.group-btn {
  width: 80%;
  height:32px;
  color: white;
  line-height:32px;
  font-size:16px;
  margin-top:15px;
  text-align:center;
  background-color: yellowgreen
}

.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
    padding: 50px 60px 0px;
    .pan-info-roles {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      display: block;
    }
    .info-container {
      position: relative;
      margin-left: 190px;
      height: 150px;
      line-height: 200px;
      .display_name {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        position: absolute;
        top: 25px;
      }
    }
  }

.rg-table-box::-webkit-scrollbar {
  /*整体样式*/
  width: 0;
}

.rg-table-box::-webkit-scrollbar-track {
  /*轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
.rg-table-box::-webkit-scrollbar-thumb {
  /*滚动条小方块*/
  border-radius: 10px;
  background-color: #2e75d3;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
</style>