lcw

src/views/home/components/Introduction.vue

@@ -1,45 +1,78 @@
 <template>
   <div class="data-statistics flex align-center just-center">
-    <div class="img_but" @click="gettbGjZdxxselectList">
-      <div class="imgBox"><img src="@/assets/images/qt11/lx.png" alt="" /></div>
-      <div class="textB">路线</div>
+    <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="gettbGjclXlxxselectList">
+    <!-- <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> -->
   </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) => {});
   tbGjZdxxselectList({}).then((res) => {
-    const data = res.map((item) => {
-      return { coords: [item.zb], text: item.xlmc };
-    });
-    emitter.emit("echoLine", {
-      type: "solid",
-      coords: data,
-      isclear: true,
-      flag: "lx",
-      color: "#46ff71"
-    });
-  });
-};
-const gettbGjclXlxxselectList = () => {
-  tbGjclXlxxselectList({}).then((res) => {
-    if (res) {
-      const coords = res
+    const coords = res
         .filter((item) => item.jd && item.wd)
         .map((items) => {
           return {
@@ -49,16 +82,26 @@ const gettbGjclXlxxselectList = () => {
         });
       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 coords = [
-//   { jd: 102.651727, wd: 30.117088 },
-//   { jd: 102.527442, wd: 30.108846 },
-//   { jd: 102.801965, wd: 30.100063 },
-//   { jd: 102.711411, wd: 30.158424 },
-//   { jd: 102.579582, wd: 30.174818 }
-// ];
 // 清除
 const clearContents = () => {
   emitter.emit("deletePointArea", "gjz");