|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
<div class="menu-content">
|
|
|
- <div class="gradient-text title">卫星电话</div>
|
|
|
- <div class="box2">
|
|
|
+ <div class="container">
|
|
|
+ <div class="gradient-text title">卫星电话</div>
|
|
|
<div class="box-left">
|
|
|
- <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" style="width: 600px" @input="initData">
|
|
|
+ <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
|
|
|
<template #prefix>
|
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
|
</template>
|
|
@@ -23,9 +23,9 @@
|
|
|
<div class="td">{{ item.name }}</div>
|
|
|
<div class="td">{{ item.unit_name }}</div>
|
|
|
<div class="td">
|
|
|
- <el-button type="text" size="small" @click="handleConnect(index, item)">连线</el-button>
|
|
|
- <el-button type="text" size="small" @click="handleCollaborate(index, item)">电话</el-button>
|
|
|
- <el-button type="text" size="small" @click="handleTrack(item)">轨迹</el-button>
|
|
|
+ <div class="text" @click="handleConnect(index, item)">连线</div>
|
|
|
+ <div class="text" size="small" @click="handleCollaborate(index, item)">电话</div>
|
|
|
+ <div class="text" size="small" @click="handleTrack(item)">轨迹</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -35,9 +35,11 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { Search } from '@element-plus/icons-vue';
|
|
|
-
|
|
|
import { onMounted, reactive } from 'vue';
|
|
|
-import { getSatellitePhoneList } from "@/api/globalMap/SatellitePhone";
|
|
|
+import { getSatellitePhoneList, getSatellitePhoneTrajectory } from "@/api/globalMap/SatellitePhone";
|
|
|
+
|
|
|
+const trackPlayback = inject('trackPlayback');
|
|
|
+
|
|
|
// 数据列表,直接定义为数组
|
|
|
const dataList = reactive([]);
|
|
|
//入参
|
|
@@ -68,6 +70,20 @@ const handleCancel = () => {
|
|
|
queryParams.keywords = '';
|
|
|
initData();
|
|
|
};
|
|
|
+
|
|
|
+const handleConnect = () => {};
|
|
|
+const handleCollaborate = () => {};
|
|
|
+// 轨迹
|
|
|
+const handleTrack = (item) => {
|
|
|
+ getSatellitePhoneTrajectory(item.id).then((res) => {
|
|
|
+ const trajectory = [];
|
|
|
+ res.rows.forEach((item) => {
|
|
|
+ trajectory.push([item.longitude, item.latitude]);
|
|
|
+ });
|
|
|
+ trackPlayback(trajectory);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
//调用函数
|
|
|
onMounted(() => {
|
|
|
initData();
|
|
@@ -76,10 +92,10 @@ onMounted(() => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.menu-content {
|
|
|
- width: 1584px;
|
|
|
- height: 2066px;
|
|
|
- background: url('@/assets/images/map/rightMenu/potentialFloodHazard/dialog.png') no-repeat;
|
|
|
- padding: 130px 30px 20px 40px;
|
|
|
+ width: 1579px;
|
|
|
+ height: 1394px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
|
|
|
+ padding: 130px 20px 20px 20px;
|
|
|
font-size: 36px;
|
|
|
position: relative;
|
|
|
color: #ffffff;
|
|
@@ -90,33 +106,28 @@ onMounted(() => {
|
|
|
top: 30px;
|
|
|
left: 160px;
|
|
|
}
|
|
|
-.box2 {
|
|
|
+
|
|
|
+.box-left {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: baseline;
|
|
|
margin-top: 30px;
|
|
|
margin-bottom: 20px;
|
|
|
-
|
|
|
- .box-left {
|
|
|
+ .btn {
|
|
|
+ width: 140px;
|
|
|
+ min-width: 140px;
|
|
|
+ height: 60px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
|
|
|
display: flex;
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 140px;
|
|
|
- height: 40px;
|
|
|
- background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- margin-left: 20px;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 32px;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 32px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.custom-input {
|
|
|
- height: 40px;
|
|
|
+ height: 60px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
|
|
@@ -177,4 +188,12 @@ onMounted(() => {
|
|
|
background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
|
|
|
}
|
|
|
}
|
|
|
+.text {
|
|
|
+ font-size: 38px;
|
|
|
+ color: #247dff;
|
|
|
+ margin-right: 20px;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|