feat: 修改列表状态颜色

chenyao

2025-04-10 f6b7078aeb7a4b56ad70a6f954963fa6ea68fa2b

feat: 修改列表状态颜色

 src/api/home/task.js

@@ -43,7 +43,7 @@
// 任务列表
export const jobList = data => {
    return request({
        url: '/drone-device-core/wayline/waylineJobInfo/jobList?current=' + data.page + '&size=' + data.size,
        url: '/drone-device-core/wayline/waylineJobInfo/jobList?current=' + data.current + '&size=' + data.size,
        method: 'post',
        data: data.searchParams,
    })

 src/components/LiveVideo.vue

@@ -1,7 +1,7 @@
<!--视频直播-->
<template>
  <div class="live-video" ref="JessibucaContainer">
    <video ref="liveVideoRef" controls autoplay muted playsinline>
    <video ref="liveVideoRef" class="video-player" controls autoplay muted playsinline>
      Your browser is too old which doesn't support HTML5 video.
    </video>
  </div>
@@ -102,10 +102,15 @@
});
</script>

<style scoped>
<style lang="scss" scoped>
.live-video{
  width: 100%;
  height: 100%;
  color: #fff;
  .video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>

 src/utils/cesium-tsa.js

@@ -151,6 +151,7 @@
    minimumLevel: 3,
  })
  const _init = async id => {
    console.log(id,'顶顶顶')
    Cesium.Camera.DEFAULT_VIEW_FACTOR = -0.45
    // 西南东北，默认显示中国
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(66, 4, 135, 53.55)

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue

@@ -145,7 +145,7 @@
    chart = echarts.init(chartRef.value)
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
        chart.resize()
        chart?.resize()
    })
    getTotalJobNum().then(res => {
        total.value = res.data?.data || 0

 src/views/Home/HomeLeft/OverviewNext.vue

@@ -19,7 +19,10 @@
            <img width="13" height="15" src="../../../assets/images/home/homeLeft/table-icon.png" alt="" />
            {{ item.nickname }}
          </div>
          <div class="status" :class="item.status==='WORKING'?'atcive':''" @click="signMachineNestClick(item)">
          <div class="status" :class="{
            'active': item.status === 'WORKING',
            'idle-active': item.status === 'LEISURE'
          }" @click="signMachineNestClick(item)">
            {{ item.status==='OFFLINE'?'离线中':(item.status==='WORKING'?'作业中':'空闲中') }}
          </div>
        </div>
@@ -151,13 +154,16 @@
        left: 10px;
      }
      .status {
        color: #6fc3ff;
        color: #fff;
        cursor: pointer;
      }
      .atcive {
        color: #04f020;
      .active {
        color: #8EFFAC;
        background: linear-gradient( 90deg, rgba(12,45,92,1) 0%, #154671 50%, rgba(12,45,92,1) 100%), linear-gradient( 90deg, rgba(12,45,92,1) 0%, rgba(12,45,92,1) 50%, rgba(12,45,92,1) 100%);
      }
      .idle-active {
        color: #FFA768;
      }
    }
    .custom-empty {
      margin: 16px 0;

 src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue

@@ -198,8 +198,8 @@
    chart= echarts.init(chartRef.value);
    pieChart = echarts.init(pieRef.value);
    window.addEventListener('resize', () => {
        chart.resize();
        pieChart.resize();
        chart?.resize();
        pieChart?.resize();
    });
    getData(newTime.value, 'TODAY');
});

 src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails.vue

@@ -6,15 +6,126 @@
        title="当前任务详情"
        :width="pxToRem(1500)"
        :close-on-click-modal="false"
        :destroy-on-close="true">
        <div class=""></div>
        :destroy-on-close="true"
    @opened="handleDialogOpened">
        <div class="content-container">
      <!-- 视频直播 -->
      <div class="video-container">
        <LiveVideo />
      </div>
      <!-- 展示地图 -->
      <div id="CurrentTaskMap" class="map-container"></div>
    </div>
  </el-dialog>
</template>

<script setup>
import { pxToRem } from '@/utils/rem';
import LiveVideo from '@/components/LiveVideo.vue';
import { liveStart } from '@/api/home/machineNest';
import { getJobDetails } from '@/api/home/task';
import cesiumOperation from '@/utils/cesium-tsa';
import { useStore } from 'vuex';

const { _init, viewerDestory } = cesiumOperation()
const store = useStore();

const isShowCurrentTaskDetails = defineModel('show');
const props = defineProps({
  rowData: { // 任务列表row数据
    type: Object,
    default: () => ({})
  }
});

// 获取直播地址
const getVideoUrl = () => {
  console.log(props.rowData, '当前任务详情');
  liveStart(props.rowData.deviceSns).then(res => {
    if (res.data.code !== 0) return;
    airPortUrl.value = res.data.data.rtcs_url;
  });
};

// 获取任务详情获取航线文件
const getTaskDetails = () => {
    getJobDetails({ wayLineJobInfoId: props.rowData.id }).then(res => {
    console.log(res.data.data, '顶顶顶');
        if (res.data.data.way_lines && res.data.data.way_lines.length === 1) {
      const line = res.data.data.way_lines[0].url
    }
    })
}

const handleDialogOpened = () => {
  nextTick(() => {
    _init('CurrentTaskMap');
  });
};

// 监听 rowData 变化
watch(() => props.rowData, (newVal) => {
  if (newVal && Object.keys(newVal).length) {
    getVideoUrl();
    getTaskDetails();
  }
}, { deep: true, immediate: true });

onUnmounted(() => {
  viewerDestory();
});

onMounted(() => {
});
</script>

<style lang="scss" scoped>
.current-task-details {}
.current-task-details {
  display: flex;
  justify-content: space-between;
  .content-container {
    display: flex;
    // gap: 20px;
    height: 600px;
    
    .video-container {
      width: 50%;
      padding-right: 10px;
    }
    
    .map-container {
      width: 50%;
      padding-left: 10px;
      height: 100%;
    }
  }
  #CurrentTaskMap {
    :deep() {
      .cesium-viewer {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .cesium-viewer-cesiumWidgetContainer {
          width: 100%;
          height: 100%;

          .cesium-widget {
            width: 100%;
            height: 100%;

            canvas {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .cesium-viewer-bottom {
        display: none;
      }
    }
  }
}
</style>

 src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -43,7 +43,7 @@
  <!-- 添加任务 -->
  <AddTask v-model:show="isShowAddTask" @refresh="searchClick"/>
  <!-- 当前任务详情 -->
  <CurrentTaskDetails v-model:show="isShowCurrentTaskDetails"/>
  <CurrentTaskDetails v-model:show="isShowCurrentTaskDetails" :rowData="rowData"/>
</template>

<script setup>
@@ -80,10 +80,12 @@
  return statusMap[status] || '-';
};

// 查看当前任务详情
// 查看当前任务详情 如果是一台机则显示详情 如果是多台机则进入集群调度(暂未开发)
let isShowCurrentTaskDetails = ref(false);
let rowData = ref({});
const handleDetail = (row) => {
  isShowCurrentTaskDetails.value = true;
  rowData.value = row? row : {};
};

// 分页大小改变

 src/views/TaskManage/TaskIntermediateContent/initPlanarWayline.js

 src/views/TaskManage/TaskIntermediateContent/initPointWayline.js

New file
@@ -0,0 +1,39 @@
import * as Cesium from 'cesium';
import cesiumOperation from '@/utils/cesium-tsa';
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js'
import { cartesian3Convert, getCenterPoint, getLnglatDist } from '@/utils/cesium/mapUtil.js'
import { getLnglatAltitude, getPositionsHeight } from '@/utils/cesium/mapUtil'

const {
  addPoint,
  getEntityById,
  removeById,
  removeAllPoint,
  addLeftClickEvent,
  removeLeftClickEvent,
  addRightClickEvent,
  removeRightClickEvent,
  flyTo,
  pointInitEvent,
  pointUnInitEvent
} = cesiumOperation()
/**
 * 
 * @param { 单点航线 相关功能} url 
 */
export const initPointWayline = (url) => {
  const { viewer } = cesiumOperation();

  // 解析kmz文件
  const parsingFiles = async (url) => {
    const { fileInfoObj } = analyzeKmzFile(`${url}?_t=${new Date().getTime()}`);
    const xmlStr = fileInfoObj['wpmz/template.kml']
    const xmlJson = XMLToJSON(xmlStr)?.['Document']
    if (xmlJson.Folder.Placemark.length) return;
    drawWayline(xmlJson)
  };
  // 在地图上画线
  const drawWayline = (xmlJson) => {
    const { Folder } = xmlJson
  };
};

 src/views/TaskManage/TaskTop/TaskEvent.vue

@@ -112,12 +112,22 @@
  return colors[Math.floor(Math.random() * colors.length)];
};

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
  window.removeEventListener('resize', handleResize);
});

onMounted(() => {
  chart = echarts.init(chartRef.value);
  getJobEventBar(newTime.value, 'CURRENT_YEAR');
  
  window.addEventListener('resize', () => {
    chart?.resize();
    if (chart && !chart.isDisposed()) {
      chart.resize();
    }
  });
});


 src/views/TaskManage/TaskTop/TaskTime.vue

@@ -86,14 +86,20 @@
  });
};


onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
  window.removeEventListener('resize', handleResize);
});
onMounted(() => {
  chart = echarts.init(chartRef.value);
  getJobNumBar(newTime.value, 'CURRENT_YEAR');
  
  window.addEventListener('resize', () => {
    chart?.resize();
  });
  if (chart && !chart.isDisposed()) {
    chart.resize();
  }
});

onUnmounted(() => {