yclw/src/views/groupPage/districtPageModules/decisionSupport/index.vue

<!--
 * @Descripttion: 支持决策入口
 * @Author: sujunling
 * @Date: 2025-05-19 09:10:25
-->
<template>
  <div class="widget-decisionSupport">
    <div class="modelListDiv">
      <template v-for="item in modelList">
        <div
          class="modelItem"
          :class="{ active: item.component === currentModelComponent }"
          @click="setCurrentModelComponent(item.component)"
          :key="item.title"
        >
          <span>{{ item.title }}</span>
        </div>
      </template>
    </div>
    <div class="componentDiv">
      <component :is="currentModelComponent"></component>
    </div>
  </div>
</template>

<script>
import constructionProgressSimulation from './constructionProgressSimulation/index.vue'
import coordinatedEvaluation from './coordinatedEvaluation/index.vue'

export default {
  name: 'SectorToolbar',
  components: { constructionProgressSimulation, coordinatedEvaluation },
  data() {
    return {
      currentModelComponent: constructionProgressSimulation,
      modelList: [
        {
          title: '施工进度模拟',
          component: constructionProgressSimulation
        },
        {
          title: '协同评价',
          component: coordinatedEvaluation
        }
      ]
    }
  },
  mounted() {
    this.changeDom()
  },

  methods: {
    setCurrentModelComponent(model) {
      this.currentModelComponent = model
    },

    changeDom() {
      var dom = document.querySelector('.widget-SectorToolbar')
      if (dom) {
        dom.style.bottom = '278px'
      }
      var dom2 = document.querySelector('.widget-Legend')
      if (dom2) {
        dom2.style.bottom = '278px'
      }
    }
  }
}
</script>

<style scoped>
.modelListDiv {
  position: fixed;
  top: 100px;
  left: 42%;
  z-index: 9;
}
.modelListDiv .modelItem {
  width: 118px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background: url('~@/assets/images/jczc/tab.png') no-repeat center;
  background-size: 100% 100%;
  font-weight: 500;
  font-size: 18px;
  color: #feffff;
  padding: 0 5px;
  float: left;
  cursor: pointer;
}
.modelListDiv .modelItem:first-child {
  margin-right: 10px;
}
.modelListDiv .modelItem.active {
  background: url('~@/assets/images/jczc/tab2.png') no-repeat center;
  background-size: 100% 100%;
}
</style>