|
|
@@ -1,45 +1,70 @@
|
|
|
<template>
|
|
|
- <div>手机工作台</div>
|
|
|
- <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" style="width: 600px" @input="initData">
|
|
|
- <template #prefix>
|
|
|
- <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- <el-button type="primary" @click="handleCancel">取消</el-button>
|
|
|
- <div>移动指挥车</div>
|
|
|
- <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
|
|
|
- <el-table-column prop="name" label="姓名" width="180"></el-table-column>
|
|
|
- <el-table-column prop="workUnit" label="工作单位" width="180"></el-table-column>
|
|
|
- <el-table-column prop="position" label="职务" width="180"></el-table-column>
|
|
|
- <el-table-column label="操作" width="300">
|
|
|
- <template #default="scope">
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <el-button type="text" size="small" @click="handleConnect(scope.$index, scope.row)">连线</el-button>
|
|
|
- <el-button type="text" size="small" @click="handleCollaborate(scope.$index, scope.row)">协同</el-button>
|
|
|
- <el-button type="text" size="small" @click="handleTrack(scope.$index, scope.row)">轨迹</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div class="menu-content">
|
|
|
+ <div class="gradient-text title">手机工作台</div>
|
|
|
+ <div class="box2">
|
|
|
+ <div class="box-left">
|
|
|
+ <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" style="width: 600px" @input="initData">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-button class="btn" @click="handleCancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>移动指挥车</div>
|
|
|
+ <div class="custom-table">
|
|
|
+ <div class="th">
|
|
|
+ <div class="td">姓名</div>
|
|
|
+ <div class="td">工作单位</div>
|
|
|
+ <div class="td">职务</div>
|
|
|
+ <div class="td">操作</div>
|
|
|
+ </div>
|
|
|
+ <div class="table-content">
|
|
|
+ <div v-for="(item, index) in dataList" :key="item.id" class="tr">
|
|
|
+ <div class="td">{{ item.name }}</div>
|
|
|
+ <div class="td">{{ item.work_unit }}</div>
|
|
|
+ <div class="td">{{ item.position }}</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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { Search } from '@element-plus/icons-vue';
|
|
|
-import { getWaterloggedRoadsList } from '@/api/globalMap/MobilePlatform';
|
|
|
+import { getMobileWorkstationList } from '@/api/globalMap/MobilePlatform';
|
|
|
+import { onMounted, reactive } from 'vue';
|
|
|
+// 数据列表,直接定义为数组
|
|
|
+const dataList = reactive([]);
|
|
|
+//入参
|
|
|
+const queryParams = reactive({
|
|
|
+ keywords: ''
|
|
|
+});
|
|
|
//调接口
|
|
|
const initData = () => {
|
|
|
- getWaterloggedRoadsList(queryParams).then((res) => {
|
|
|
- dataList.value = res.data.list;
|
|
|
+ getMobileWorkstationList({
|
|
|
+ query: {
|
|
|
+ keywords: queryParams.keywords
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 0 && Array.isArray(res.rows)) {
|
|
|
+ dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
|
|
|
+ } else {
|
|
|
+ console.error('Invalid response from server:', res);
|
|
|
+ // 可以选择清空数据列表或显示错误消息
|
|
|
+ dataList.splice(0, dataList.length); // 清空数据列表
|
|
|
+ }
|
|
|
});
|
|
|
};
|
|
|
-const dataList = ref([]);
|
|
|
-//入参
|
|
|
-const queryParams = reactive({
|
|
|
- area: '',
|
|
|
- keyword: ''
|
|
|
-});
|
|
|
-// 取消按钮的逻辑 搜索框清空
|
|
|
+
|
|
|
+// 取消按钮的逻辑，搜索框清空并重新加载数据
|
|
|
const handleCancel = () => {
|
|
|
- queryParams.keyword = '';
|
|
|
+ queryParams.keywords = '';
|
|
|
initData();
|
|
|
};
|
|
|
//调用函数
|
|
|
@@ -47,3 +72,108 @@ onMounted(() => {
|
|
|
initData();
|
|
|
});
|
|
|
</script>
|
|
|
+
|
|
|
+<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;
|
|
|
+ font-size: 36px;
|
|
|
+ position: relative;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 60px;
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ left: 160px;
|
|
|
+}
|
|
|
+.box2 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: baseline;
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .box-left {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.custom-input {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-table {
|
|
|
+ width: 100%;
|
|
|
+ height: 1030px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ .table-content {
|
|
|
+ height: 880px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .th {
|
|
|
+ width: 100%;
|
|
|
+ height: 151px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .tr {
|
|
|
+ width: 100%;
|
|
|
+ height: 139px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ padding-right: 20px;
|
|
|
+ &:hover {
|
|
|
+ background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .td {
|
|
|
+ flex: 1;
|
|
|
+ color: #edfaff;
|
|
|
+ font-size: 38px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .td-text {
|
|
|
+ /* 设置字体透明 */
|
|
|
+ color: transparent;
|
|
|
+ /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ /* 非Webkit内核浏览器需要使用标准前缀 */
|
|
|
+ background-clip: text;
|
|
|
+ font-family: 'YouSheBiaoTiHei';
|
|
|
+ /* 设置线性渐变，从红色渐变到蓝色 */
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
|
|
|
+ font-size: 48px;
|
|
|
+ }
|
|
|
+ .text-green {
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
|
|
|
+ }
|
|
|
+ .text-danger {
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
