xzlz_GjWeb/src/views/home/components/Introduction.vue

<template>
  <div class="data-statistics flex align-center just-center">
    <div class="img_but" v-for="(item,index) in imgBut" :key="index" @click="funClick(index,item.key)" >
      <div class="imgBox" v-if="item.show" ><img :src="item.icon1" alt="" /></div>
      <div class="imgBox" v-else><img :src="item.icon2" alt="" /></div>
      <div class="textB">{{ item.name }}</div>
    </div>
    <!-- <div class="img_but boxCenter" @click="gettbGjZdxxselectList" >
      <div class="imgBox"><img src="@/assets/images/qt11/zt.png" alt="" /></div>
      <div class="imgBox"><img src="@/assets/images/qt11/ztxz.png" alt="" /></div>
      <div class="textB">站台</div>
    </div>
    <div class="img_but" @click="clearContents">
      <div class="imgBox">
        <img src="@/assets/images/qt11/qc.png" alt="" />
      </div>
      <div class="imgBox">
        <img src="@/assets/images/qt11/qcxz.png" alt="" />
      </div>
      <div class="textB">清除</div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
// 可以在这里添加需要的响应式数据和方法
import { tbGjZdxxselectList, tbGjclXlxxselectList } from "@/api/mosty-zhgj.js";
import emitter from "@/utils/eventBus.js";
const imgBut =ref( [
  {
    name: '路线',
    icon1: require("@/assets/images/qt11/lx.png"),
    icon2: require("@/assets/images/qt11/lxxz.png"),
    show: true,
    key:'xl'
  },
  {
    name: '站台',
    icon1: require("@/assets/images/qt11/zt.png"),
    icon2: require("@/assets/images/qt11/ztxz.png"),
    show: true,
    key:'zt'
  },
  {
    name: '清除',
    icon1: require("@/assets/images/qt11/qc.png"),
    icon2: require("@/assets/images/qt11/qcxz.png"),
    show: true,
    key:'qc'
  },
])
const funClick = (index,val) => {
  imgBut.value[index].show = !imgBut.value[index].show
  switch (val) {
    case 'xl':
    gettbGjclXlxxselectList()
      break;
    case 'zt':
    gettbGjZdxxselectList()
      break;
    case 'qc':
      clearContents()
      setTimeout(() => {
        imgBut.value[index].show = true
        imgBut.value[0].show = true
        imgBut.value[1].show =true
      }, 500);

      break;
  }
}
const gettbGjZdxxselectList = () => {
  tbGjZdxxselectList({}).then((res) => {
    const coords = res
        .filter((item) => item.jd && item.wd)
        .map((items) => {
          return {
            jd: items.jd,
            wd: items.wd
          };
        });
      const icon = require("@/assets/images/qt11/car.png");
      emitter.emit("addPoint", { coords, flag: "gjz", icon });

  });
};
const gettbGjclXlxxselectList = () => {
  tbGjclXlxxselectList({}).then((res) => {
    if (res) {
      const data =res.filter(item=>item.zb&&item.zb.length>0 ).map((item) => {
      return { coords: [item.zb], text: item.xlmc };
    });

    emitter.emit("echoLine", {
      type: "solid",
      coords: data,
      isclear: true,
      flag: "lx",
      color: "#46ff71"
    });
    }
  });
};
// 清除
const clearContents = () => {
  emitter.emit("deletePointArea", "gjz");
  emitter.emit("deletePointArea", "lx");
};
</script>

<style scoped lang="scss">
.data-statistics {
  height: 100%;
  //
  .img_but {
    text-align: center;

    .imgBox {
      width: 101px;
      height: 78px;
      img {
        width: 100%;
      }
    }

    .imgT {
      background: url("~@/assets/images/bi/R_T.png") no-repeat center center;
    }
    .textB {
      //   width: 38px;
      width: 100%;
      align-self: center;
      height: 18px;
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 19px;
      color: #c9eeff;
      line-height: 19px;
    }
  }
  .boxCenter {
    margin: 0 15px;
  }
}
</style>