147 lines
3.6 KiB
Vue
147 lines
3.6 KiB
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>
|