mkw-visit-web/src/views/toolbox/view.vue

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div style="padding: 0px 20px">
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="工具信息看板" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content">

          </div>
        </LxHeader>
      </div>


      <div ref="toolbox">
        <Card style="margin-bottom: 20px;">
          <div style="overflow: auto;">
            <el-scrollbar style="flex: 1">
              <div style="display: flex;">
                <div style="flex:0 0 auto;padding: 10px; margin: 2px 10px;" v-for="(item,index) in toolBoxList"
                  @click="tabChange(index)">
                  <el-badge class="item">
                    <div style="width: 60px;height: 60px;display: flex;align-items: center;">
                      <img :src="item.icon_on" v-if="item.active" style="width: 60px;height: 60px;" />
                      <img :src="item.icon" v-else style="width: 50px;height: 50px;" />
                    </div>
                  </el-badge>
                  <div style="text-align: center;">{{item.name}}</div>
                  <div style="text-align: center;">
                    {{item.layer_amount+"*"+(item.layer_tool_amount?0:item.layer_tool_amount)}}
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </Card>

        <Card>
          <p slot="title" style="text-align: center;">{{currentName}}</p>
          <div style="overflow: auto;" :style="{height:height+'px'}">
            <el-scrollbar style="flex: 1">
              <div v-for="(item,index) in toolList" style="display: flex;align-items: center;margin-bottom: 20px;">
                <div class="div_layer_no" style="flex:0 0 auto">{{index+1}}</div>
                <div class="div_layer">
                  <el-scrollbar>
                    <div class="div_layer_box">
                      <div v-for="(citem,cindex) in item.tools">
                        <div class="div_box" v-if="citem!='undefined'&&citem!=undefined" style="position: relative;">

                          <div class="div_box_img">
                            <img :src="citem.icon" @click="viewImg(citem.icon)"  style="width: 120px;height: 100px;" />
                          </div>
                          <div class="div_box_name">
                            {{citem.name}}
                          </div>
                          <div :class="[citem.status?'triangle-topright-green':'triangle-topright-red']"
                            style="position: absolute;right: 0;top: 0;">

                          </div>
                          <span class="triangle-topright-txt">在</span>
                        </div>
                        <div class="div_box"
                          style="width: 132px;height: 115.5px;border:1px solid #122583;position: relative;"
                          v-else-if="cindex!=0">
                        </div>
                      </div>


                    </div>
                  </el-scrollbar>
                </div>
              </div>

            </el-scrollbar>
          </div>

        </Card>
      </div>
    </div>
  </div>
</template>
<script>
  import LxHeader from "@/components/LxHeader/index.vue";
  import {
    listToolbox,
    listToolboxtool
  } from "../../api/toolbox/list.js"

  export default {
    components: {
      LxHeader
    },
    created() {
      this.initLoad();
      this.loadbox();
    },
    mounted() {
      var w = this.$refs.toolbox.offsetWidth - 32;
      var sw = 100;
      //this.pagination.page_size = parseInt(w / sw);
    },
    data() {
      return {
        toolList: [],
        toolBoxList: [],
        toolBoxCurrent: 0,
        height: 0,
        pagination: {
          page: 1,
          page_size: 9999,
          total: 0
        },
        currentName: ""
      };
    },
    methods: {
      loadbox() {
        listToolbox({
          page: this.pagination.page,
          page_size: this.pagination.page_size
        }).then(res => {
          var i = 0;
          for (var mod of res.data) {
            mod.icon = require("@/assets/toolbox.png");
            mod.icon_on = require("@/assets/toolbox_on.png");

            mod.active = i == 0;
            i++;
          }
          this.toolBoxList = res.data;
          this.pagination.total = res.total;
          this.loadboxtool(this.toolBoxList[this.toolBoxCurrent].id)
        }).catch(error => {

        })
      },
      viewImg(url) {
        this.base.previewImg(url);
      },
      loadboxtool(id) {
        var currentBox = this.toolBoxList[this.toolBoxCurrent];
        let layers = currentBox.layers;
        this.currentName = currentBox.name + currentBox.layers.length + '层 每层' + currentBox.layer_tool_amount
        listToolboxtool({
          page: 1,
          page_size: 100
        }, id).then(res => {
          for (var layer of layers) {
            layer.tools = new Array(currentBox.layer_tool_amount + 1);
            for (var i = 1; i <= currentBox.layer_tool_amount; i++) {
              var mod = res.data.filter((item, index) => {
                return item.position == i && item.layerid == layer.id
              });
              if (mod.length != 0) {
                mod[0].icon = (mod[0].toolimage.indexOf("base64,") == -1 ? "data:image/png;base64," : "") +
                  mod[0].toolimage;
                layer.tools[i] = mod[0];
              }
            }
          }

          this.toolList = layers;
        }).catch(error => {

        })
      },
      tabChange(index) {
        for (var mod of this.toolBoxList) {
          mod.active = false;
        }
        this.toolBoxList[index].active = true;
        let id = this.toolBoxList[index].id;
        this.toolBoxCurrent = index;
        this.loadboxtool(id);
      },
      initLoad() {
        var that = this;
        var clientHeight = document.documentElement.clientHeight
        var lxHeader_height = 240; //查询 头部
        var card_Height = 109; //分页的高度
        var topHeight = 50; //页面 头部
        let height = clientHeight - lxHeader_height - topHeight - card_Height;

        that.height = height;
      }
    },
  };
</script>
<style scoped="scoped">
  .recommendPage .swiper-container {
    position: relative;
    width: 100%;
    height: 200px;
    background: pink;
  }

  .recommendPage .swiper-container .swiper-slide {
    width: 100%;
    line-height: 200px;
    background: yellowgreen;
    color: #000;
    font-size: 16px;
    text-align: center;
  }

  /* 轮播图 */

  .div_layer {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .div_layer_box {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
  }

  .div_box {
    margin-right: 10px;
  }

  .div_box_img {
    padding: 4px 5px;
    border: 1px solid #263445;
  }

  .div_layer_no {
    border: #000000 2px solid;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 10px;
  }

  .triangle-topright-red {
    width: 0;
    height: 0;
    border-top: 30px solid #ff4949;
    border-left: 30px solid transparent;
    color: #13ce66;
  }

  .triangle-topright-green {
    width: 0;
    height: 0;
    border-top: 30px solid #13ce66;
    border-left: 30px solid transparent;
    color: #13ce66;
  }

  .triangle-topright-txt {
    position: absolute;
    font-size: 10px;
    right: 1px;
    top: 1px;
    color: #FFFFFF;
  }
</style>