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

<template>
  <div class="dane-bd">
    <div
      v-if="moduleNames"
      class="dane-title"
      :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '3px' }"
    >
      <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
            @change="changeSelect"
          />
        </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, defineEmits } 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 [];
      },
    },
    selectValue: {
      type: String,
      default: () => {
        return '';
      },
    },
  });
  const emit = defineEmits(['changeSelect']);

  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);
  }

  //下拉框选项切换
  function changeSelect(val) {
    console.log(val, moduleNames, '下拉框选项切换---');
    emit('changeSelect', { label: moduleNames.value, value: val });
  }

  watch(
    () => props.selectList,
    (newV, oldV) => {
      console.log(newV, '下拉列表------');
      if (newV.length != 0) {
        selectLists.value = newV;
        console.log(selectLists.value, '====----');
        selectVal.value = props.selectValue;
      }
    },
    { 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">
  .dane-bd {
    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;
      height: 32px;
      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: 16px;
        }
      }

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

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

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

      .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: 90%;

        .status-text {
          color: #1fb3f7;
          font-size: 14px;
        }

        .status-text1 {
          color: #a1dff8;
          font-size: 14px;
        }
      }
    }

    .dane-content {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      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%;
        padding: 10px 15px;
        background: url('../../../assets/images/fire/firehome/title-4.png') no-repeat center;
        background-size: 100% 100%;
      }
    }
  }

  :deep(.vMonitor-select-selector) {
    height: 22px !important;
    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: 48px !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>