DataCenter-gis/src/views/DataCenterGis/DataCenterGis.vue

<template>
  <div class="data-center-gis-container" :class="[sizeType + 'Size']">
    <div class="fontSizeBox" @click="drawerVisible = true">
      <el-icon><Setting /></el-icon>
    </div>
    <div class="gis-container">
      <div class="left-container">
        <leftMap />
      </div>
      <div class="right-container">
        <rightPanel />
      </div>
    </div>
    <el-drawer v-model="drawerVisible" title="设置" :with-header="false">
      <el-form class="detail-box">
        <el-form-item label="字体大小" label-position="top">
          <el-slider v-model="sizeType" :step="50" show-stops :marks="marks" />
        </el-form-item>
        <el-form-item label="地图主题切换" label-position="top">
          <div class="map-change">
            <div class="map" @click="changeTheme('浅色')">
              <img src="../../assets/image/政务地图.png" />浅色
            </div>
            <div class="map" @click="changeTheme('深色')">
              <img src="../../assets/image/暗色地图.png" />深色
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import leftMap from './components/LeftMap.vue';
import rightPanel from './components/RightPanel.vue';
import { ArrowDown, Setting } from '@element-plus/icons-vue';
import { ThemeChange } from '@/utils/map/mapOperation';
import { useMapStore } from '@/stores/mapStore';
console.log(1);
const sizeType = ref('default');
const step = ref(0);
const drawerVisible = ref(false);
const marks = reactive({
  0: '标准',
  50: '大',
  100: '超大'
});

const changeTheme = (val) => {
  ThemeChange(val == '浅色' ? 'basetheme' : 'yaogantheme');
};

watch(
  () => sizeType.value,
  (val) => {
    sliderChange(val);
  }
);

const sliderChange = (val) => {
  console.log(val);
  if (val == 0) {
    sizeType.value = 'default';
  } else if (val == 50) {
    sizeType.value = 'big';
  } else if (val == 100) {
    sizeType.value = 'veryBig';
  }
};
</script>

<style lang="scss">
.data-center-gis-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .fontSizeBox {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    font-size: 28px;
    z-index: 999;
    .el-dropdown-link {
      font-size: 20px;
      outline: none;
    }
  }
  .gis-container {
    display: flex;
    justify-content: flex-start;
    background-color: #e5f2ff;
    height: 1080px;
    .left-container {
      width: calc(100vw - 725px - 150px);
      padding-left: 10px;
      height: 100%;
    }
    .right-container {
      width: 725px;
      height: 100%;
      margin-left: 86px;
      margin-right: 64px;
    }
  }
}

.drop-box {
  .el-dropdown-menu__item {
    padding: 0;
  }
  .size-box {
    display: inline-block;
    width: 100px;
    padding: 10px;
    text-align: center;
    &.active {
      background-color: #e5f2ff;
      color: #1257bc;
    }
  }
}
.detail-box {
  .el-form-item__label {
    font-size: 18px;
  }
}
.el-slider {
  margin: 0 10px;
  margin-bottom: 55px;
}
.el-drawer__body {
  .el-slider__runway {
    height: 1px;
  }
  .el-slider__stop {
    background-color: #0080ff;
    transform: translate(-50%, -5px);
    width: 1px;
    height: 15px;
    border-radius: 0;
  }
  .el-slider__marks-text {
    font-size: 18px;
  }
}
.map-change {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 20px;
  .map {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 180px;
      height: 150px;
    }
  }
}
</style>