thing_web/src/views/dashboard/comp/block.vue

<template>
  <div class="block" ref="blockRef">
    <div :class="['title']">
      <span>{{ item.title || '' }}</span>

      <div class="title-right">
        <el-select :model-value="dataForm.code" v-if="item.select" @change="$emit('change-code', $event)"><el-option v-for="(val, key, index) in dataForm.codeMap || {}" :key="index" :label="key" :value="key"></el-option></el-select>
        <span class="unit" v-if="item.unit">{{ item.unit }}</span>
      </div>
    </div>
    <div class="main">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, h, nextTick, onMounted, reactive, toRefs } from 'vue';
import { IObject } from '@/types/interface';
import utilService from '@/service/utilService';
export default defineComponent({
  name: 'block',
  props: { item: { type: Object, default: () => ({}) }, dataForm: { type: Object, default: () => ({}) }, width: { type: String, default: () => '484px' }, height: { type: String, default: () => '318px' } },
  setup(props) {
    const state = reactive({
      blockRef: null,
    });

    const block = computed(() => {
      return {
        w: props.width,
        h: props.height,
      };
    });

    return {
      ...toRefs(state),
      block,
    };
  },
  emits: ['change-code'],
});
</script>

<style scoped lang="less">
.block {
  width: v-bind('block.w');
  height: v-bind('block.h');
  background: url('@/assets/images/njhl/block.png') no-repeat center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  > .title {
    position: relative;
    // height: v-bind("getSizeByType.titleHeight");
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 38px;
    color: #fff;

    > span {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }

    > .title-right {
      position: absolute;
      top: 20px;
      right: 20px;

      ::v-deep .el-select {
        width: 100px;

        .el-input__wrapper {
          background: transparent;
          padding-right: 20px;
          .el-input__inner {
            color: #fff;
          }
        }

        .el-input__suffix-inner i {
          color: #0084ff;
        }

        .el-select:hover,
        .el-input__wrapper {
          box-shadow: 0 0 0 1px #0084ff;
        }
      }

      .unit {
        display: inline-block;
        margin-left: 8px;
        width: 2em;
      }
    }
  }

  > .dot {
    > span {
      padding-left: 25px;
    }

    &:before {
      position: absolute;
      left: 0;
      top: 50%;
      content: '';
      width: 14px;
      height: 41px;
      transform: translateY(-50%);
      background: rgba(#3c8ef5, 0.34);
    }
  }

  > .main {
    position: relative;
    flex: 1;
  }
}
</style>