yjdp-web/src/views/globalMap/RightMenu/KeyVehicles.vue

<template>
  <div class="menu-content">
    <div class="container">
      <div class="gradient-text title">两客一危一重货</div>
      <div class="box-left">
        <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @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">
            <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>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { getMobileWorkstationList } from '@/api/globalMap/MobilePlatform';
import { onMounted, reactive } from 'vue';
const trackPlayback = inject('trackPlayback');
// 数据列表,直接定义为数组
const dataList = reactive([]);
//入参
const queryParams = reactive({
  keywords: ''
});
//调接口
const initData = () => {
  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 handleCancel = () => {
  queryParams.keywords = '';
  initData();
};
//调用函数
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.menu-content {
  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;
}
.title {
  font-size: 60px;
  position: absolute;
  top: 30px;
  left: 160px;
}

.box-left {
  display: flex;
  margin-top: 30px;
  margin-bottom: 20px;
  .btn {
    width: 140px;
    min-width: 140px;
    height: 60px;
    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;
  }
}

.custom-input {
  height: 60px;
  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>