ele-usky-admin/src/views/index/components/componentModel/iconText.vue

<template>
  <div>
    <div style="border: 1px #939393 dashed; padding: 10px; margin-bottom: 5px">
      <div
        class="vue-grid-item"
        :style="{
          display: 'flex',
          height: '100px',
          background: editModelList.backgroundColor,
        }"
      >
        <div style="padding: 0px 20px; text-align: center; margin: auto 0">
          <img :src="editModelList.iconPath" alt="" />
        </div>
        <div style="margin: auto 0">
          <div
            :style="{
              color: editModelList.dataNameColor,
              'font-size': editModelList.dataNameFont + 'px',
            }"
          >
            {{ editModelList.dataName }}
          </div>
          <div
            :style="{
              color: editModelList.dataValueColor,
              'font-size': editModelList.dataValueFont + 'px',
              'font-weight': 800,
            }"
          >
            {{ editModelList.textValue }}
          </div>
        </div>
      </div>
    </div>
    <div style="border: 1px red dashed; padding: 10px">
      <div class="widget-form">
        <div>
          <div class="ant-row">
            <div
              class="ant-col"
              style="display: flex; height: 32px; line-height: 32px"
            >
              <div class="ant-row ant-legacy-form-item">
                <div class="ant-col ant-legacy-form-item-label">
                  <label class="" style="margin-right: 10px" title="数据名称:">
                    数据名称:
                  </label>
                </div>
                <div class="ant-col ant-legacy-form-item-control-wrapper">
                  <div class="ant-legacy-form-item-control">
                    <span class="ant-legacy-form-item-children">
                      <el-input
                        v-model="editModelList.dataName"
                        placeholder="Please input"
                      />
                    </span>
                  </div>
                </div>
              </div>
              <div class="ant-row ant-legacy-form-item">
                <div class="ant-col ant-legacy-form-item-label">
                  <label class="" style="margin: 0px 10px" title="数据类型">
                    数据类型:
                  </label>
                </div>
                <div class="ant-col ant-legacy-form-item-control-wrapper">
                  <el-select
                    v-model="dataTypeValue"
                    filterable
                    placeholder="Select"
                  >
                    <el-option
                      v-for="item in dataTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="ant-row ant-legacy-form-item">
                <div class="ant-col ant-legacy-form-item-label">
                  <label class="" style="margin: 0px 10px" title="数据取值">
                    数据取值:
                  </label>
                </div>
                <div class="ant-col ant-legacy-form-item-control-wrapper">
                  <div class="ant-legacy-form-item-control">
                    <el-select
                      v-model="dataValue"
                      filterable
                      placeholder="Select"
                    >
                      <el-option
                        v-for="item in dataValueList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin: 20px 0px 10px">
          <div class="ant-row">
            <div class="ant-col ant-col-3">
              <p>背景颜色</p>
              <el-color-picker
                v-model="editModelList.backgroundColor"
                show-alpha
              />
            </div>
            <div class="ant-col ant-col-3">
              <p>数据名称颜色</p>
              <el-color-picker
                v-model="editModelList.dataNameColor"
                show-alpha
              />
            </div>
            <div class="ant-col ant-col-3">
              <p>数据值颜色</p>
              <el-color-picker
                v-model="editModelList.dataValueColor"
                show-alpha
              />
            </div>
            <div class="ant-col ant-col-3">
              <p>数据名称字体大小</p>
              <el-input-number
                v-model="editModelList.dataNameFont"
                :min="1"
                :max="100"
                controls-position="right"
                @change="nameSizeHandleChange"
              />
            </div>
            <div class="ant-col ant-col-3">
              <p>数据值字体大小</p>
              <el-input-number
                v-model="editModelList.dataValueFont"
                :min="1"
                :max="100"
                label="px"
                controls-position="right"
                @change="nameSizeHandleChange"
              />
            </div>
            <div class="ant-col ant-col-3">
              <p>选择图标</p>
              <div
                class="ant-select ant-select-single ant-select-show-arrow"
                style="width: 60px"
              >
                <el-select
                  style="width: 100%"
                  v-model="editModelList.iconPath"
                  placeholder="请选择图标"
                  @change="imgChangeSelection"
                  ref="refSelect"
                  popper-class="refSelectClass"
                  class="refSelectClass"
                >
                  <el-option
                    v-for="item in imgArray"
                    :key="item.id"
                    :value="item.value"
                  >
                    <div class="option_box">
                      <el-image class="option_img" :src="item.value"></el-image>
                    </div>
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  props: {
    editModellist: Object,
  },
  setup(props, context) {
    context
    const refSelect = ref(null)

    const editModelList = ref(props.editModellist)

    const nameSizeHandleChange = (m) => {
      console.log(m)
    }

    const imgChangeSelection = (val) => {
      refSelect.value.$el.children[0].children[0].children[0].setAttribute(
        'style',
        `
          background: url(${val}) no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          font-size: 0px;
          `
      )
    }

    onMounted(() => {
      refSelect.value.$el.children[0].children[0].children[0].setAttribute(
        'style',
        `
          background: url(${props.editModellist.iconPath}) no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          font-size: 0px;
          `
      )
    })

    return {
      editModelList,
      nameSizeHandleChange,
      imgChangeSelection,
      refSelect,
      dataTypeValue: 2,
      dataTypeList: [
        {
          value: 1,
          label: '普通文本',
        },
        {
          value: 2,
          label: '站点管理信息',
        },
        {
          value: 3,
          label: '智能设备数据',
        },
        {
          value: 4,
          label: '站点告警状态',
        },
        {
          value: 5,
          label: '站点通讯状态',
        },
      ],
      dataValue: 1,
      dataValueList: [
        {
          value: 1,
          label: '名称',
        },
        {
          value: 2,
          label: '地址',
        },
        {
          value: 3,
          label: '联系电话',
        },
        {
          value: 4,
          label: '额定容量',
        },
        {
          value: 5,
          label: '供电类型',
        },
        {
          value: 6,
          label: '电压等级',
        },
        {
          value: 7,
          label: '投运时间',
        },
        {
          value: 8,
          label: '运行天数',
        },
      ],
      imgArray: [
        {
          id: 1,
          value: 'static/assets/board_images/site.png',
        },
        {
          id: 2,
          value: 'static/assets/board_images/days.png',
        },
        {
          id: 3,
          value: 'static/assets/board_images/maxLoad.png',
        },
        {
          id: 4,
          value: 'static/assets/board_images/siteAlarm.png',
        },
        {
          id: 5,
          value: 'static/assets/board_images/siteState.png',
        },
      ],
    }
  },
})
</script>
<style lang="less" scoped>
.vue-grid-item {
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
<style lang="less">
// 颜色选择器样式 开始
.el-color-picker__icon {
  display: none;
}
.el-color-picker--small,
.el-color-picker {
  height: auto;
}

.el-color-picker--small .el-color-picker__trigger {
  height: auto;
  width: auto;
  cursor: pointer;
  padding: 5px;
  background: rgb(255, 255, 255);
  border-radius: 1px;
  display: inline-block;
}
.el-color-picker__color {
  border: none;
}
.el-color-picker__color.is-alpha {
  width: 36px;
  height: 14px;
}
// 颜色选择器样式 结束

// input框样式 开始
.el-input-number--small {
  width: 100px;
}
// input框样式 结束

// select框样式 开始
.refSelectClass {
  max-width: 60px;
  padding: 0;
  margin: -1px;
  .el-select-dropdown__item {
    padding: 0px;
    .option_box {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;
      margin: auto;
      .option_img {
        width: 25px;
        height: 25px;
        margin: 0 auto;
      }
    }
  }
}
// select框样式 结束
</style>