smart-screen-demo-web/src/view/data-center/data-center.vue

<template>
  <div class="base-bg">
    <div class="zhp-title">
      <img
        class="rightImg"
        src="@/assets/imgs/show/close.png"
        @click="router.back()"
      />
      <div class="zhp-title-text">数据中心</div>
    </div>
    <div class="zhp-vertical" style="overflow: auto; align-items: center">
      <div v-for="(item, i) in centerList" :key="i">
        <div
          :class="
            item.isSelect
              ? 'base-card-content-selectBg'
              : 'base-card-content-unSelectBg'
          "
          @click="item.onclick"
        >
          <img class="zhp-img-66 margin-left-30" :src="getImgSrc(item.img)" />
          <div class="zhp-text-32-white margin-left-20">{{ item.title }}</div>
          <img class="rightImg" src="@/assets/imgs/show/right.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { $commonService } from "@/services/framework/dependency-injection-service";

const getImgSrc = $commonService.$imgService.getImgSrc;
const router = useRouter();
const centerList = ref([
  {
    isSelect: false,
    img: "/assets/imgs/show/datacenter-dtjn.png",
    title: "低碳节能",
    onclick: () => {
      router.push({
        path: "/dataCenterShow",
        query: {
          titleText: "低碳节能",
          showImg: "/assets/imgs/show/datacenter_tb_nhtj.png"
        }
      });
    }
  },
  {
    isSelect: false,
    img: "/assets/imgs/show/datacenter-wdqx.png",
    title: "温度曲线",
    onclick: () => {
      router.push({
        path: "/dataCenterShow",
        query: {
          titleText: "温度曲线",
          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png"
        }
      });
    }
  },
  {
    isSelect: false,
    img: "/assets/imgs/show/datacenter-kqzl.png",
    title: "空气质量",
    onclick: () => {
      router.push({
        path: "/dataCenterShow",
        query: {
          titleText: "空气质量",
          showImg: "/assets/imgs/show/datacenter_tb_kqzl.png"
        }
      });
    }
  },
  {
    isSelect: false,
    img: "/assets/imgs/show/datacenter-yzzt.png",
    title: "运转状态",
    onclick: () => {
      router.push({
        path: "/dataCenterShow",
        query: {
          titleText: "运转状态",
          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png"
        }
      });
    }
  }
]);
</script>

<style lang="scss" scoped></style>