feat: 修改列表状态颜色

chenyao

2025-04-10 f6b7078aeb7a4b56ad70a6f954963fa6ea68fa2b

 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>