vent-forewarn-micro/src/views/vent/common/danelBd.vue

<template>
  <div class="danelBd">
    <div v-if="moduleNames" class="dane-title"
      :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }">
      <div :class="commonTitle == 'selected' ? 'common-navL' : 'common-navL1'">
        <img src="@/assets/images/fire/firehome/title-2.png" alt="" />
        <span>{{ moduleNames }}</span>
        <CaretDownOutlined v-if="moduleIndex && commonTitle == 'datePikers'" :size="18" @click="toggleModule" />
        <CaretUpOutlined v-if="!moduleIndex && commonTitle == 'datePikers'" :size="18" @click="toggleModule" />

        <div class="module-select" v-if="moduleIndex">
          <div class="select-box" v-for="(item, index) in moduleSelects" :key="index" @click="toggleModuleName(item)">{{
            item.label }}</div>
        </div>
      </div>

      <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
        <!-- 下拉框 -->
        <div class="common-navR-select" v-if="commonTitle == 'selected'">

          <Select style="width: 140px" :options="selectLists" size="small" placeholder="请选择" v-model:value="selectVal"
            allowClear />
        </div>
        <!-- 日期组件 -->
        <div class="common-navR-date" v-if="commonTitle == 'datePikers'">
          <RangePicker size="small" style="width: 100%" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
        </div>
        <!-- 开关组件 -->
        <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
          <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
          <Switch v-model:checked="checked" />
          <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
        </div>
      </div>
    </div>
    <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH }">
      <div class="t-line"></div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue';
import { Select, RangePicker, Switch } from 'ant-design-vue';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';

let props = defineProps({
  //标题
  moduleName: {
    type: String,
    default: '',
  },
  //样式
  contentStyle: {
    type: Object,
    default: () => {
      return {
        contentH: '0px',
      };
    },
  },

  commonTitle: {
    type: String,
    default: '',
  },
  //下拉列表数据
  selectList: {
    type: Array,
    default: () => {
      return []
    }
  },
  moduleSelect:{
    type:Array,
    default:()=>{
      return []
    }
  }
});

let moduleNames = ref('')
let selectVal = ref('全部');
let selectLists = ref<any[]>([])

let checked = ref(false);

let moduleIndex = ref(false)

let moduleSelects=ref<any[]>([])


//模块选项弹窗状态切换
function toggleModule() {
  moduleIndex.value = !moduleIndex.value

}
//切换模块选项名称
function toggleModuleName(item) {
  moduleNames.value = item.label
  moduleIndex.value = false
}

//切换时间选项
function onChange(value, dateString) {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
}
function onOk(val) {
  console.log('onOk: ', val);
}

watch(() => props.selectList, (newV, oldV) => {
  console.log(newV, '下拉列表------')
  selectLists.value = newV
}, { immediate: true, deep: true })
watch(() => props.moduleName, (newM, oldM) => {
  moduleNames.value = newM
}, { immediate: true })
watch(()=>props.moduleSelect,(newS,oldS)=>{
  console.log(newS,'newS--------')
  moduleSelects.value=newS
},{immediate:true,deep:true})
</script>

<style scoped lang="less">
.danelBd {
  position: relative;
  width: 100%;
  height: 100%;

  .dane-title {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 43px;
    padding: 0 10px;
    background: url('@/assets/images/fire/firehome/title-1.png') no-repeat center;
    background-size: 100% 100%;

    .common-navL {
      display: flex;
      position: relative;
      align-items: center;
      width: 70%;

      img {
        width: 18px;
        height: 18px;
      }

      span {
        margin-left: 10px;
        color: #a1dff8;
        font-size: 18px;
      }
    }

    .common-navL1 {
      display: flex;
      position: relative;
      align-items: center;
      width: 50%;

      img {
        width: 18px;
        height: 18px;
      }

      span {
        margin-left: 10px;
        color: #a1dff8;
        font-size: 18px;
      }
    }

    .module-select {
      display: flex;
      position: absolute;
      z-index: 9999;
      top: 33px;
      left: 16px;
      box-sizing: border-box;
      flex-direction: column;
      justify-content: flex-start;
      width: 214px;
      height: 136px;
      padding: 10px;
      overflow-y: auto;
      border: 1px solid rgb(15 63 88);
      border-radius: 10px;
      background-color: #fff;

      .select-box {
        width: 100%;
        height: 28px;
        color: #000;
        line-height: 28px;
        text-align: center;
        cursor: pointer;

        &:hover {
          background-color: rgb(161 223 248 / 20%);
        }
      }

    }

    .common-navR {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 30%;
    }

    .common-navR1 {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 50%;
    }

    .common-navR-switch {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 70%;

      .status-text {
        color: #1fb3f7;
      }

      .status-text1 {
        color: #a1dff8;
      }
    }
  }

  .dane-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 15px;
    background: url('@/assets/images/fire/firehome/title-3.png') no-repeat center;
    background-size: 100% 100%;

    .t-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 20px;
      background: url('@/assets/images/fire/firehome/title-4.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
}






:deep(.vMonitor-select-selector) {
  border: none !important;
  background-color: rgb(15 64 88) !important;
  color: #a1dff8 !important;
}


:deep(.vMonitor-select-selection-placeholder) {
  color: #a1dff8 !important;
}

:deep(.vMonitor-select-arrow) {
  color: #a1dff8 !important;
}

:deep(.vMonitor-picker) {
  border: none !important;
  background-color: rgb(15 64 88) !important;
  box-shadow: none;
  color: #a1dff8 !important;
}

:deep(.vMonitor-picker-input >input) {
  color: #a1dff8 !important;
  text-align: center !important;
}



:deep(.vMonitor-picker-separator) {
  color: #a1dff8 !important;
}

:deep(.vMonitor-picker-active-bar) {
  display: none !important;
}

:deep(.vMonitor-picker-suffix) {
  color: #a1dff8 !important;
}

:deep(.vMonitor-switch){
  min-width: 55px !important;
  
}

:deep(.vMonitor-switch-checked)  {
  background-color: rgb(15 64 89) !important;
}

:deep(.vMonitor-switch-handle::before)  {
  background-color: rgb(33 179 247) !important;
}

</style>