daimp-front/new-digital-agriculture-screen/src/components/subTop.vue

<template>
  <div class="title-top-warp">
    <div
      :style="{
        'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
        transform: pos == 'right' ? 'rotateY(0deg)' : '',
      }"
      class="title-top-bg"
    ></div>
    <span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
    <div v-if="isDown" class="down-list" :style="{ width: downWidth }">
      <el-dropdown :hide-on-click="true" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ currentVal && currentVal[labelField] ? currentVal[labelField] : downTitle }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="down-menu">
            <el-dropdown-item v-for="(n, index) in optionsList" :key="n[valueField]" :command="n[valueField]">{{ n[labelField] }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: '统计分析',
  },
  postion: {
    type: String,
    default: 'left',
  },
  options: {
    type: Array,
    default: () => {
      return [
        { label: '耿马镇', value: '42611' },
        { label: '勐撒镇', value: '9259' },
        { label: '勐永镇', value: '17787' },
        { label: '孟定镇', value: '42610' },
        { label: '勐简乡', value: '17788' },
        { label: '贺派乡', value: '40161' },
        { label: '四排山乡', value: '40163' },
        { label: '大兴乡', value: '40159' },
      ];
    },
  },
  isDown: {
    type: Boolean,
    default: false,
  },
  downTitle: {
    type: String,
    default: '全县',
  },
  labelField: {
    type: String,
    default: 'label',
  },
  valueField: {
    type: String,
    default: 'value',
  },
  downWidth: {
    type: String,
    default: '100px',
  },
});
const emit = defineEmits(['command']);
let topTitle = ref('');
let pos = ref('');

let optionsList = reactive(props.options);
let currentVal = reactive(null);

watch(
  () => (props.title, props.postion, props.options),
  () => {
    topTitle.value = props.title;
    pos.value = props.postion;
    optionsList = props.options;
  },
  {
    deep: true,
    immediate: true,
  }
);

const handleCommand = (data) => {
  let index = optionsList.findIndex((m) => {
    return m[props.valueField] == data;
  });

  if (index > -1) {
    currentVal = optionsList[index];
  }
  // console.info('handleCommand', currentVal);
  emit('command', currentVal);
};
</script>
<style lang="scss">
.down-menu {
  background: transparent;
}
.el-dropdown {
  display: inline-block;
}
.el-dropdown-link {
  color: $color-custom-main !important;
  i {
    color: $color-custom-main !important;
  }
}
.el-dropdown__popper {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 0 !important;
}
.el-popper__arrow::before {
  background: rgba(0, 0, 0, 0.8) !important;
}
.el-dropdown-menu__item:hover,
.el-dropdown-menu__item:active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.title-top-warp {
  position: relative;
  height: 38px;
  width: 100%;
  .title-top-bg {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .title-top-content {
    line-height: 38px;
    font-size: 20px;
    // font-weight: bold;
    display: inline-block;
    transform: skewX(-13deg);
    background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
    -webkit-background-clip: text;
    color: #fff;
    letter-spacing: 4px;
    text-shadow: -2px 0 10px #add8f1;
    width: 100%;
    padding: 0 36px 0 72px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .down-list {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: center;
    white-space: nowrap;

    .el-dropdown {
      border: 1px solid $color-custom-main;
      padding: 6px;
      border-radius: 4px;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
</style>