104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
|
<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>
|
||
|
|
<div class="img_but boxCenter" @click="gettbGjclXlxxselectList">
|
||
|
|
<div class="imgBox"><img src="@/assets/images/qt11/zt.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="textB">清除</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
// 可以在这里添加需要的响应式数据和方法
|
||
|
|
import { tbGjZdxxselectList, tbGjclXlxxselectList } from "@/api/mosty-zhgj.js";
|
||
|
|
import emitter from "@/utils/eventBus.js";
|
||
|
|
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
|
||
|
|
.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 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");
|
||
|
|
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>
|