|
|
@@ -1,289 +1,292 @@
|
|
|
<template>
|
|
|
- <v-scale-screen width="2200" height="1080">
|
|
|
- <div class="task_screen_cotainer">
|
|
|
- <div class="task_header">「{{ currentTaskName }}」任务态势大屏</div>
|
|
|
- <div class="content_cotainer">
|
|
|
- <div class="center_chart_cotainer_task" id="taskItem">
|
|
|
- <div class="task_detail_cotainer_task" style="width:100%;">
|
|
|
- <div v-if="false" class="header_line_style">
|
|
|
- <div class="headerTitle"></div>
|
|
|
- </div>
|
|
|
- <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
|
|
|
- <!-- 任务屏幕 -->
|
|
|
- <div class="task_item_header">
|
|
|
- <el-select
|
|
|
- v-model="wholeOutTaskId"
|
|
|
- placeholder="「切换任务」"
|
|
|
- style="width:270px;"
|
|
|
- @change="changeTask"
|
|
|
- filterable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in taskOPtion"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
-
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-image
|
|
|
-
|
|
|
- @click="showMoreInfo('more')"
|
|
|
- class="showLessStyle"
|
|
|
- style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
|
|
|
- :src="require('../assets/img/small.svg')"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- <el-image
|
|
|
- v-if="false"
|
|
|
- @click="showMoreInfo('less')"
|
|
|
- :src="require('../assets/img/iconMore.svg')"
|
|
|
- fit="contain"
|
|
|
- class="showLessStyle"
|
|
|
- style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- <div class="task_header_top">
|
|
|
- <div class="subject_task_item_task">
|
|
|
- <div class="task_outer_cotnainer_status">
|
|
|
- <div class="map_more_box">
|
|
|
- <div class="task_list_header" style="font-size:16px; margin: 0 24px 8px 0; white-space: nowrap; ">
|
|
|
- <el-image
|
|
|
- style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
- :src="require('../assets/img/rightIcon.svg')"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- 课目分布
|
|
|
- </div>
|
|
|
- <div class="select_lsit_box">
|
|
|
- <el-select
|
|
|
- v-model="systemSubjectId"
|
|
|
- placeholder="切换系统名称"
|
|
|
- style="width:55%; margin-right:5px;"
|
|
|
- @change="changeTaskAndSystem"
|
|
|
- clearable
|
|
|
- filterable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in systemOption"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
-
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-model="unitSubjectValue"
|
|
|
- placeholder="切换单位名称"
|
|
|
- style="width:55%;"
|
|
|
- clearable
|
|
|
- @change="changeTaskAndUnit"
|
|
|
- filterable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in unitOption"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
-
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="subject_list_container" id="subjectList">
|
|
|
- <template v-for="(item,index) in subjectDatas">
|
|
|
- <div class="subject_list_item_new" :key="index" @click="changeVideo(item.subjectName)">
|
|
|
- <div class="subject_list_header">
|
|
|
- <div>
|
|
|
- <div class="subject_list_name">
|
|
|
- {{ item.subjectName ||'-' }}
|
|
|
- </div>
|
|
|
- <div class="orgainzers">
|
|
|
- 参与人员：{{ item.participatingPeople && item.participatingPeople.join(',') || '-' }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-image
|
|
|
- style="width: 36px; height: 36px; "
|
|
|
- :src="subjectMap[item.status]"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- <div class="system_task_style">
|
|
|
- <div>参加系统：{{ item.participatingSystems && item.participatingSystems.join(',') || '-'}}</div>
|
|
|
- <div
|
|
|
- v-if="item.status=='已完成'"
|
|
|
- class="view_table_style"
|
|
|
- @click="viewManData(item)">
|
|
|
- 表格查看
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
+ <v-scale-screen width="2200" height="1080">
|
|
|
+ <div class="task_screen_cotainer">
|
|
|
+ <div class="task_header">「{{ currentTaskName }}」当前态势</div>
|
|
|
+ <div class="tag" @click="jumpToHistory">
|
|
|
+ 历史态势
|
|
|
+ </div>
|
|
|
+ <div class="content_cotainer">
|
|
|
+ <div class="center_chart_cotainer_task" id="taskItem">
|
|
|
+ <div class="task_detail_cotainer_task" style="width:100%;">
|
|
|
+ <div v-if="false" class="header_line_style">
|
|
|
+ <div class="headerTitle"></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
|
|
|
+ <!-- 任务屏幕 -->
|
|
|
+ <div class="task_item_header">
|
|
|
+ <el-select
|
|
|
+ v-model="wholeOutTaskId"
|
|
|
+ placeholder="「切换任务」"
|
|
|
+ style="width:270px;"
|
|
|
+ @change="changeTask"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in taskOPtion"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-image
|
|
|
+
|
|
|
+ @click="showMoreInfo('more')"
|
|
|
+ class="showLessStyle"
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
|
|
|
+ :src="require('../assets/img/small.svg')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <el-image
|
|
|
+ v-if="false"
|
|
|
+ @click="showMoreInfo('less')"
|
|
|
+ :src="require('../assets/img/iconMore.svg')"
|
|
|
+ fit="contain"
|
|
|
+ class="showLessStyle"
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class="task_header_top">
|
|
|
+ <div class="subject_task_item_task">
|
|
|
+ <div class="task_outer_cotnainer_status">
|
|
|
+ <div class="map_more_box">
|
|
|
+ <div class="task_list_header" style="font-size:16px; margin: 0 24px 8px 0; white-space: nowrap; ">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
+ :src="require('../assets/img/rightIcon.svg')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ 课目分布
|
|
|
+ </div>
|
|
|
+ <div class="select_lsit_box">
|
|
|
+ <el-select
|
|
|
+ v-model="systemSubjectId"
|
|
|
+ placeholder="切换系统名称"
|
|
|
+ style="width:55%; margin-right:5px;"
|
|
|
+ @change="changeTaskAndSystem"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in systemOption"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="unitSubjectValue"
|
|
|
+ placeholder="切换单位名称"
|
|
|
+ style="width:55%;"
|
|
|
+ clearable
|
|
|
+ @change="changeTaskAndUnit"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in unitOption"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="subject_list_container" id="subjectList">
|
|
|
+ <template v-for="(item,index) in subjectDatas">
|
|
|
+ <div class="subject_list_item_new" :key="index" @click="changeVideo(item.subjectName)">
|
|
|
+ <div class="subject_list_header">
|
|
|
+ <div>
|
|
|
+ <div class="subject_list_name">
|
|
|
+ {{ item.subjectName ||'-' }}
|
|
|
</div>
|
|
|
- <div class="unit_map_box_task_new">
|
|
|
- <div class="map_more_box">
|
|
|
- <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
|
|
|
- <el-image
|
|
|
- style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
- :src="require('../assets/img/rightIcon.svg')"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- 流程图
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <form-task-process-viewer :processInstanceId="processInstanceId" :processDefinitionId="processDefinitionId"></form-task-process-viewer>
|
|
|
+ <div class="orgainzers">
|
|
|
+ 参与人员：{{ item.participatingPeople && item.participatingPeople.join(',') || '-' }}
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ style="width: 36px; height: 36px; "
|
|
|
+ :src="subjectMap[item.status]"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
</div>
|
|
|
- <div class="task_header_footer_task_new">
|
|
|
- <div class="subject_task_item_task" style="width:28.2%;">
|
|
|
- <div class="task_outer_cotnainer_status">
|
|
|
- <div class="task_outer_cotnainer_status">
|
|
|
- <div class="map_more_box">
|
|
|
- <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
|
|
|
- <el-image
|
|
|
- style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
- :src="require('../assets/img/rightIcon.svg')"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- 指令监控
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="subject_list_container_int" id="moninter">
|
|
|
- <div class="task_other_cotainer_scrool">
|
|
|
- <myscrollBoard
|
|
|
- :key="updatekey"
|
|
|
- :config="scrollTableConfig"
|
|
|
- style="width:100%; height:100%"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="unit_map_box_task">
|
|
|
- <div class="task_outer_cotnainer_status">
|
|
|
- <div class="map_more_box">
|
|
|
- <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
|
|
|
- <el-image
|
|
|
- style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
- :src="require('../assets/img/rightIcon.svg')"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- 训练态势监控
|
|
|
- </div>
|
|
|
- <el-image
|
|
|
- @click="showFull('allVideo')"
|
|
|
- style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
|
|
|
- :src="require('../assets/img/iconMore.svg')"
|
|
|
- fit="contain"
|
|
|
- class="moreBtn_style"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- <div class="video_title">{{videoPlayerName[0]}}</div>
|
|
|
- <video id="videoPlayerTask" class="video-js" muted></video>
|
|
|
- <!-- <div class="center_no_data"> -->
|
|
|
- <!-- <el-image
|
|
|
- style="width: 100px; height: 100px; margin-right:6px;"
|
|
|
- :src="require('../assets/img/build.png')"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image> -->
|
|
|
- <!-- <div> -->
|
|
|
-
|
|
|
- <!-- </div> -->
|
|
|
- <!-- </div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="commandMonitoring_task">
|
|
|
- <div class="task_outer_cotnainer_status">
|
|
|
- <div class="video_flex_style" style="padding-top:12px;">
|
|
|
- <div>
|
|
|
- <div class="video_title">{{videoPlayerName[1]}}</div>
|
|
|
- <video id="videoPlayer_first" class="video-js" muted></video>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="video_title">{{videoPlayerName[2]}}</div>
|
|
|
- <video id="videoPlayer_second" class="video-js" muted></video>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="video_title">{{videoPlayerName[3]}}</div>
|
|
|
- <video id="videoPlayer_third" class="video-js" muted></video>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="video_title">{{videoPlayerName[4]}}</div>
|
|
|
- <video id="videoPlayer_fourth" class="video-js" muted></video>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="center_no_data" v-if="false">
|
|
|
- <el-image
|
|
|
- style="width: 100px; height: 100px; margin-right:6px;"
|
|
|
- :src="require('../assets/img/build.png')"
|
|
|
- fit="contain"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- <div>系统正在建设中，敬请期待～</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="system_task_style">
|
|
|
+ <div>参加系统：{{ item.participatingSystems && item.participatingSystems.join(',') || '-'}}</div>
|
|
|
+ <div
|
|
|
+ v-if="item.status=='已完成'"
|
|
|
+ class="view_table_style"
|
|
|
+ @click="viewManData(item)">
|
|
|
+ 表格查看
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="unit_map_box_task_new">
|
|
|
+ <div class="map_more_box">
|
|
|
+ <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
+ :src="require('../assets/img/rightIcon.svg')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ 流程图
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <form-task-process-viewer :processInstanceId="processInstanceId" :processDefinitionId="processDefinitionId"></form-task-process-viewer>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="task_header_footer_task_new">
|
|
|
+ <div class="subject_task_item_task" style="width:28.2%;">
|
|
|
+ <div class="task_outer_cotnainer_status">
|
|
|
+ <div class="task_outer_cotnainer_status">
|
|
|
+ <div class="map_more_box">
|
|
|
+ <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
+ :src="require('../assets/img/rightIcon.svg')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ 指令监控
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="subject_list_container_int" id="moninter">
|
|
|
+ <div class="task_other_cotainer_scrool">
|
|
|
+ <myscrollBoard
|
|
|
+ :key="updatekey"
|
|
|
+ :config="scrollTableConfig"
|
|
|
+ style="width:100%; height:100%"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 任务详情弹窗 -->
|
|
|
- <el-dialog
|
|
|
- title=""
|
|
|
- :show-close="false"
|
|
|
- :destroy-on-close="true"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- width="650px"
|
|
|
- top="300px"
|
|
|
- >
|
|
|
+ </div>
|
|
|
+ <div class="unit_map_box_task">
|
|
|
+ <div class="task_outer_cotnainer_status">
|
|
|
+ <div class="map_more_box">
|
|
|
+ <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px;"
|
|
|
+ :src="require('../assets/img/rightIcon.svg')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ 训练态势监控
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ @click="showFull('allVideo')"
|
|
|
+ style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
|
|
|
+ :src="require('../assets/img/iconMore.svg')"
|
|
|
+ fit="contain"
|
|
|
+ class="moreBtn_style"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class="video_title">{{videoPlayerName[0]}}</div>
|
|
|
+ <video id="videoPlayerTask" class="video-js" muted></video>
|
|
|
+ <!-- <div class="center_no_data"> -->
|
|
|
+ <!-- <el-image
|
|
|
+ style="width: 100px; height: 100px; margin-right:6px;"
|
|
|
+ :src="require('../assets/img/build.png')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image> -->
|
|
|
+ <!-- <div> -->
|
|
|
+
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="commandMonitoring_task">
|
|
|
+ <div class="task_outer_cotnainer_status">
|
|
|
+ <div class="video_flex_style" style="padding-top:12px;">
|
|
|
<div>
|
|
|
- <div class="task_detail_dialog">
|
|
|
- <div class="header_line_style"></div>
|
|
|
- <div class="task_dialog_box_other" v-if="dialogType==2">
|
|
|
- <el-table
|
|
|
- :data="gridData"
|
|
|
- :header-cell-style="changeHeaderCellStyle"
|
|
|
- :cell-style="changeCellStyle"
|
|
|
- stripe
|
|
|
- :border="true"
|
|
|
- >
|
|
|
- <el-table-column align="center" property="participantName" label="姓名" max-width="350">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" property="score" label="成绩" max-width="300">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div class="dialog_footer_box">
|
|
|
- <div class="view_more" @click="dialogVisible=false" style="color:#fff; padding: 3px 30px ;">
|
|
|
- 关闭
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="video_title">{{videoPlayerName[1]}}</div>
|
|
|
+ <video id="videoPlayer_first" class="video-js" muted></video>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="video_title">{{videoPlayerName[2]}}</div>
|
|
|
+ <video id="videoPlayer_second" class="video-js" muted></video>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="video_title">{{videoPlayerName[3]}}</div>
|
|
|
+ <video id="videoPlayer_third" class="video-js" muted></video>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="video_title">{{videoPlayerName[4]}}</div>
|
|
|
+ <video id="videoPlayer_fourth" class="video-js" muted></video>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </div>
|
|
|
+ <div class="center_no_data" v-if="false">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px; margin-right:6px;"
|
|
|
+ :src="require('../assets/img/build.png')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <div>系统正在建设中，敬请期待～</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </v-scale-screen>
|
|
|
+ <!-- 任务详情弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title=""
|
|
|
+ :show-close="false"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="650px"
|
|
|
+ top="300px"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="task_detail_dialog">
|
|
|
+ <div class="header_line_style"></div>
|
|
|
+ <div class="task_dialog_box_other" v-if="dialogType==2">
|
|
|
+ <el-table
|
|
|
+ :data="gridData"
|
|
|
+ :header-cell-style="changeHeaderCellStyle"
|
|
|
+ :cell-style="changeCellStyle"
|
|
|
+ stripe
|
|
|
+ :border="true"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" property="participantName" label="姓名" max-width="350">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" property="score" label="成绩" max-width="300">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="dialog_footer_box">
|
|
|
+ <div class="view_more" @click="dialogVisible=false" style="color:#fff; padding: 3px 30px ;">
|
|
|
+ 关闭
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-scale-screen>
|
|
|
</template>
|
|
|
<script>
|
|
|
import * as echarts from 'echarts';
|
|
|
@@ -294,518 +297,521 @@ import sacleBox from '../components/sacle-box/index'
|
|
|
import { request } from '../utils/request';
|
|
|
var uploadedDataURL = require('../../public/json/taiyuan.json')
|
|
|
import './taskScreen.css'
|
|
|
-import Videojs from "video.js"; // 引入Videojs
|
|
|
+import Videojs from "video.js"; // 引入Videojs
|
|
|
import FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
|
|
|
|
|
|
export default {
|
|
|
- components:{
|
|
|
- myFlylineChartEnhanced,
|
|
|
- sacleBox,
|
|
|
- myscrollBoard,
|
|
|
-
|
|
|
- FormTaskProcessViewer
|
|
|
+ components:{
|
|
|
+ myFlylineChartEnhanced,
|
|
|
+ sacleBox,
|
|
|
+ myscrollBoard,
|
|
|
+
|
|
|
+ FormTaskProcessViewer
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ systemFinshedValue:'',
|
|
|
+ unitFinshedValue:'',
|
|
|
+ wholeOutTaskId:'',
|
|
|
+ systemSubjectId:'',
|
|
|
+ unitSubjectValue:'',
|
|
|
+ subjectItem:{},
|
|
|
+ processDefinitionId: "taskOne:22:4775c887-d48a-11ed-9085-54bf641e8ec2",
|
|
|
+ processInstanceId:"d9b3f37b-d4ed-11ed-9fd5-52540097d374",
|
|
|
+ moreFlag:true,
|
|
|
+ dialogVisible:false,
|
|
|
+ taskList:[],
|
|
|
+ websocket: null, //建立的连接
|
|
|
+ websocketOrder: null, //建立的连接
|
|
|
+ updatekey:'1',
|
|
|
+ scrollTableConfig:{
|
|
|
+ header: ['指令名称', '指令内容', '指令时间'],
|
|
|
+ waitTime:1500,
|
|
|
+ data: [],
|
|
|
+ columnWidth: [80],
|
|
|
+ oddRowBGC:'#072347',
|
|
|
+ evenRowBGC:'#021736'
|
|
|
+ },
|
|
|
+ dialogType:1,
|
|
|
+ subjectDatas:[],
|
|
|
+ subjectMap:{
|
|
|
+ '待执行':require('../assets/img/waite.png'),
|
|
|
+ '执行中':require('../assets/img/doing.png'),
|
|
|
+ '已完成':require('../assets/img/finshed.png') ,
|
|
|
+ },
|
|
|
+ instructList:[],
|
|
|
+ unitOption:[],
|
|
|
+ systemOption:[],
|
|
|
+ taskOPtion:[],
|
|
|
+ currentTaskName:'',
|
|
|
+ currentTaskGrade:'',
|
|
|
+ unitSubGradeValue:'',
|
|
|
+ gridData:[],
|
|
|
+ dataSrc:['','','','',''],
|
|
|
+ completionRate:false,
|
|
|
+ playerList:[],
|
|
|
+ videoPlayerName:['监控名称','监控名称','监控名称','监控名称','监控名称'],
|
|
|
+ videoList:['videoPlayerTask','videoPlayer_first','videoPlayer_second','videoPlayer_third','videoPlayer_fourth']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ jumpToHistory() {
|
|
|
+ this.$router.push("/situationScreen")
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- systemFinshedValue:'',
|
|
|
- unitFinshedValue:'',
|
|
|
- wholeOutTaskId:'',
|
|
|
- systemSubjectId:'',
|
|
|
- unitSubjectValue:'',
|
|
|
- subjectItem:{},
|
|
|
- processDefinitionId: "taskOne:22:4775c887-d48a-11ed-9085-54bf641e8ec2",
|
|
|
- processInstanceId:"d9b3f37b-d4ed-11ed-9fd5-52540097d374",
|
|
|
- moreFlag:true,
|
|
|
- dialogVisible:false,
|
|
|
- taskList:[],
|
|
|
- websocket: null, //建立的连接
|
|
|
- websocketOrder: null, //建立的连接
|
|
|
- updatekey:'1',
|
|
|
- scrollTableConfig:{
|
|
|
- header: ['指令名称', '指令内容', '指令时间'],
|
|
|
- waitTime:1500,
|
|
|
- data: [],
|
|
|
- columnWidth: [80],
|
|
|
- oddRowBGC:'#072347',
|
|
|
- evenRowBGC:'#021736'
|
|
|
- },
|
|
|
- dialogType:1,
|
|
|
- subjectDatas:[],
|
|
|
- subjectMap:{
|
|
|
- '待执行':require('../assets/img/waite.png'),
|
|
|
- '执行中':require('../assets/img/doing.png'),
|
|
|
- '已完成':require('../assets/img/finshed.png') ,
|
|
|
- },
|
|
|
- instructList:[],
|
|
|
- unitOption:[],
|
|
|
- systemOption:[],
|
|
|
- taskOPtion:[],
|
|
|
- currentTaskName:'',
|
|
|
- currentTaskGrade:'',
|
|
|
- unitSubGradeValue:'',
|
|
|
- gridData:[],
|
|
|
- dataSrc:['','','','',''],
|
|
|
- completionRate:false,
|
|
|
- playerList:[],
|
|
|
- videoPlayerName:['监控名称','监控名称','监控名称','监控名称','监控名称'],
|
|
|
- videoList:['videoPlayerTask','videoPlayer_first','videoPlayer_second','videoPlayer_third','videoPlayer_fourth']
|
|
|
+ // 表格样式修改
|
|
|
+ changeHeaderCellStyle(row,column, rowIndex, columnIndex){
|
|
|
+ if(row.columnIndex === 0){
|
|
|
+ return 'background: #004279 ; color:#fff;'; // 修改的样式
|
|
|
+ }else {
|
|
|
+ return 'background: #004279 ;color:#fff; ';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeCellStyle(row,column, rowIndex, columnIndex){
|
|
|
+ if(row.columnIndex === 0){
|
|
|
+ return 'background: #0A427C ; color:#fff;'; // 修改的样式
|
|
|
+ }else {
|
|
|
+ return 'background: #0A427C ; color:#fff;';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取全部系统
|
|
|
+ async getAllSystems(){
|
|
|
+ let params={}
|
|
|
+ const res = await request('/dt_screen/rest/v1/screen/listSystem/', 'get', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ console.log('获取全部系统', data);
|
|
|
+ this.systemOption = data.map((item)=>{
|
|
|
+ return {
|
|
|
+ label:item.systemName,
|
|
|
+ value: item.systemId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.systemFinshedValue=this.systemOption[0].value
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取全部单位
|
|
|
+ async getAllUnits (){
|
|
|
+ let params={}
|
|
|
+ const res = await request('/dt_screen/rest/v1/screen/listUnit/', 'get', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ console.log('获取全部单位', data);
|
|
|
+ // 获取任务数据
|
|
|
+ this.getTaskList()
|
|
|
+ this.unitOption = data.map((item)=>{
|
|
|
+ return {
|
|
|
+ label:item.unitName,
|
|
|
+ value: item.unitId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.unitFinshedValue=this.unitOption[0].value
|
|
|
+ this.unitSubGradeValue=this.unitOption[0].value
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取任务列表
|
|
|
+ async getTaskList(){
|
|
|
+ let params={}
|
|
|
+ const res = await request('/dt_screen/rest/v2/task/listCurrentTask/', 'post', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ console.log('获取任务列表', data);
|
|
|
+ this.taskList= data
|
|
|
+ this.taskOPtion = data.map((item)=>{
|
|
|
+ return {
|
|
|
+ label: item.taskName,
|
|
|
+ value: item.taskId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.wholeOutTaskId=data[0].taskId
|
|
|
+ this.currentTaskName= data[0].taskName
|
|
|
+ this.currentTaskGrade= data[0].syntheticTaskScore
|
|
|
+ // 获取地图的信息
|
|
|
+ if(data.length){
|
|
|
+ // 获取任务的课目信息
|
|
|
+ this.getSubjectList(data[0].taskId)
|
|
|
+ // 获取任务的指令信息
|
|
|
+ this.getinstructList(data[0].taskId)
|
|
|
+ // 建立指令websocket 链接
|
|
|
+ this.initInstructWebsoket()
|
|
|
}
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
},
|
|
|
- methods:{
|
|
|
- // 表格样式修改
|
|
|
- changeHeaderCellStyle(row,column, rowIndex, columnIndex){
|
|
|
- if(row.columnIndex === 0){
|
|
|
- return 'background: #004279 ; color:#fff;'; // 修改的样式
|
|
|
- }else {
|
|
|
- return 'background: #004279 ;color:#fff; ';
|
|
|
- }
|
|
|
- },
|
|
|
- changeCellStyle(row,column, rowIndex, columnIndex){
|
|
|
- if(row.columnIndex === 0){
|
|
|
- return 'background: #0A427C ; color:#fff;'; // 修改的样式
|
|
|
- }else {
|
|
|
- return 'background: #0A427C ; color:#fff;';
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取全部系统
|
|
|
- async getAllSystems(){
|
|
|
- let params={}
|
|
|
- const res = await request('/dt_screen/rest/v1/screen/listSystem/', 'get', params, false)
|
|
|
- const { errorCode, errorMessage, success,data } = res.data;
|
|
|
- if (success) {
|
|
|
- console.log('获取全部系统', data);
|
|
|
- this.systemOption = data.map((item)=>{
|
|
|
- return {
|
|
|
- label:item.systemName,
|
|
|
- value: item.systemId
|
|
|
- }
|
|
|
- })
|
|
|
- this.systemFinshedValue=this.systemOption[0].value
|
|
|
- } else {
|
|
|
- this.$message.error(errorMessage)
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取全部单位
|
|
|
- async getAllUnits (){
|
|
|
- let params={}
|
|
|
- const res = await request('/dt_screen/rest/v1/screen/listUnit/', 'get', params, false)
|
|
|
- const { errorCode, errorMessage, success,data } = res.data;
|
|
|
- if (success) {
|
|
|
- console.log('获取全部单位', data);
|
|
|
- // 获取任务数据
|
|
|
- this.getTaskList()
|
|
|
- this.unitOption = data.map((item)=>{
|
|
|
- return {
|
|
|
- label:item.unitName,
|
|
|
- value: item.unitId
|
|
|
- }
|
|
|
- })
|
|
|
- this.unitFinshedValue=this.unitOption[0].value
|
|
|
- this.unitSubGradeValue=this.unitOption[0].value
|
|
|
- } else {
|
|
|
- this.$message.error(errorMessage)
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取任务列表
|
|
|
- async getTaskList(){
|
|
|
- let params={}
|
|
|
- const res = await request('/dt_screen/rest/v2/task/listCurrentTask/', 'post', params, false)
|
|
|
- const { errorCode, errorMessage, success,data } = res.data;
|
|
|
- if (success) {
|
|
|
- console.log('获取任务列表', data);
|
|
|
- this.taskList= data
|
|
|
- this.taskOPtion = data.map((item)=>{
|
|
|
- return {
|
|
|
- label: item.taskName,
|
|
|
- value: item.taskId
|
|
|
- }
|
|
|
- })
|
|
|
- this.wholeOutTaskId=data[0].taskId
|
|
|
- this.currentTaskName= data[0].taskName
|
|
|
- this.currentTaskGrade= data[0].syntheticTaskScore
|
|
|
- // 获取地图的信息
|
|
|
- if(data.length){
|
|
|
- // 获取任务的课目信息
|
|
|
- this.getSubjectList(data[0].taskId)
|
|
|
- // 获取任务的指令信息
|
|
|
- this.getinstructList(data[0].taskId)
|
|
|
- // 建立指令websocket 链接
|
|
|
- this.initInstructWebsoket()
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.$message.error(errorMessage)
|
|
|
- }
|
|
|
- },
|
|
|
- // 切换任务
|
|
|
- changeTask(){
|
|
|
- this.systemSubjectId=''
|
|
|
- this.unitSubjectValue=''
|
|
|
- this.currentTaskName = this.taskOPtion.find( item => item.value== this.wholeOutTaskId ).label
|
|
|
- this.currentTaskGrade = this.taskList.find( item=> item.taskId==this.wholeOutTaskId).syntheticTaskScore
|
|
|
- // 获取任务的课目信息
|
|
|
- this.getSubjectList(this.wholeOutTaskId)
|
|
|
- // 获取任务的指令信息
|
|
|
- this.getinstructList(this.wholeOutTaskId)
|
|
|
- // 建立指令websocket 链接
|
|
|
- this.initInstructWebsoket()
|
|
|
- },
|
|
|
- changeTaskAndUnit() {
|
|
|
- this.systemSubjectId=''
|
|
|
- if(this.unitSubjectValue){
|
|
|
- this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue)
|
|
|
- }else {
|
|
|
- this.getSubjectList(this.wholeOutTaskId)
|
|
|
- }
|
|
|
- },
|
|
|
- changeTaskAndSystem() {
|
|
|
- this.unitSubjectValue=''
|
|
|
- if(this.systemSubjectId){
|
|
|
- this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId)
|
|
|
- }else {
|
|
|
- this.getSubjectList(this.wholeOutTaskId)
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取任务的课目信息
|
|
|
- async getSubjectList(taskId){
|
|
|
- let params={}
|
|
|
- const res = await request(`/dt_screen/rest/v1/subject/list/${taskId}`, 'get', params, false)
|
|
|
- const { errorCode, errorMessage, success,data } = res.data;
|
|
|
- if (success) {
|
|
|
- console.log('获取任务的课目信息', data);
|
|
|
- this.subjectDatas=data
|
|
|
-
|
|
|
- } else {
|
|
|
- this.$message.error(errorMessage)
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取任务的指令
|
|
|
- async getinstructList (taskId) {
|
|
|
- let params={}
|
|
|
- const res = await request(`/dt_screen/rest/v1/order/list/${taskId}`, 'get', params, false)
|
|
|
- const { errorCode, errorMessage, success,data } = res.data;
|
|
|
- if (success) {
|
|
|
- console.log('获取任务的指令', data);
|
|
|
- this.instructList=data
|
|
|
- let tempData=[]
|
|
|
- data.forEach((item)=>{
|
|
|
- tempData.push([item.subjectName,item.content,item.time])
|
|
|
- })
|
|
|
- this.scrollTableConfig.data=tempData
|
|
|
- this.updatekey=new Date().getTime()
|
|
|
-
|
|
|
- } else {
|
|
|
- this.$message.error(errorMessage)
|
|
|
- }
|
|
|
- },
|
|
|
- // 切换单位再结合任务id 获取课目课目列表
|
|
|
- async getUnitSubjectList(taskId,unitId){
|
|
|
- let params={}
|
|
|
- const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, 'get', params, false)
|
|
|
- const { errorCode, errorMessage, success,data } = res.data;
|
|
|
- if (success) {
|
|
|
- this.subjectDatas=data
|
|
|
- } else {
|
|
|
- this.$message.error(errorMessage)
|
|
|
- }
|
|
|
- },
|
|
|
- // 切换系统再结合任务id 获取课目课目列表
|
|
|
- async getSystemSubjectList(taskId,systemId){
|
|
|
- let params={}
|
|
|
- const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`, 'get', params, false)
|
|
|
- const { errorCode, errorMessage, success,data } = res.data;
|
|
|
- if (success) {
|
|
|
- this.subjectDatas=data
|
|
|
- } else {
|
|
|
- this.$message.error(errorMessage)
|
|
|
- }
|
|
|
- },
|
|
|
- // 建立websocket 链接 任务
|
|
|
- initWebsoket(){
|
|
|
- this.websocket = new WebSocket('ws://43.143.221.128:8084/websocket/task');//这里将http替换成ws
|
|
|
- switch (this.websocket.readyState) {
|
|
|
- case 0:
|
|
|
- console.log("正在连接");
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- console.log("已经链接并且可以通讯");
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- console.log("连接正在关闭");
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- console.log("连接已关闭或者没有链接成功");
|
|
|
- break;
|
|
|
- };
|
|
|
- this.websocket.onopen = this.websocketsend;//websoket连接成功
|
|
|
- this.websocket.onmessage =this. websocketonmessage;//websoket收到信息
|
|
|
- this.websocket.onclose = this.websocketclose;//websoket连接关闭
|
|
|
- },
|
|
|
- websocketsend(){
|
|
|
- console.log('ws 连接成功');
|
|
|
- },
|
|
|
- websocketonmessage(msg){
|
|
|
- // 获取全部单位
|
|
|
- this.getAllUnits()
|
|
|
- // 获取全部系统
|
|
|
- this.getAllSystems()
|
|
|
- console.log('收到任务信息',msg);
|
|
|
- },
|
|
|
- websocketclose(){
|
|
|
- console.log('ws 连接关闭');
|
|
|
- this.initWebsoket();//重新建立连接
|
|
|
- },
|
|
|
- initInstructWebsoket(){
|
|
|
- // 指令的ws
|
|
|
- this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
|
|
|
- switch (this.websocketOrder.readyState) {
|
|
|
- case 0:
|
|
|
- console.log("正在连接");
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- console.log("已经链接并且可以通讯");
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- console.log("连接正在关闭");
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- console.log("连接已关闭或者没有链接成功");
|
|
|
- break;
|
|
|
- };
|
|
|
- this.websocketOrder.onopen = this.orderWebsocketsend;//websoket连接成功
|
|
|
- this.websocketOrder.onmessage =this. orderWebsocketonmessage;//websoket收到信息
|
|
|
- this.websocketOrder.onclose = this.orderWebsocketclose;//websoket连接关闭
|
|
|
- },
|
|
|
- orderWebsocketsend(){
|
|
|
- console.log('ws 连接成功');
|
|
|
- },
|
|
|
- orderWebsocketonmessage(msg){
|
|
|
- // 获取任务的指令信息
|
|
|
- this.getinstructList(this.wholeOutTaskId)
|
|
|
- console.log('收到指令信息',msg);
|
|
|
- },
|
|
|
- orderWebsocketclose(){
|
|
|
- console.log('ws 连接关闭');
|
|
|
- this.initInstructWebsoket();//重新建立连接
|
|
|
- },
|
|
|
- // 查看成绩表格
|
|
|
- viewManData(item){
|
|
|
- this.dialogType=2
|
|
|
- this.dialogVisible=true
|
|
|
- console.log('item',item);
|
|
|
- const { subjectScore } = item
|
|
|
- this.gridData=subjectScore
|
|
|
- },
|
|
|
- // 全屏事件
|
|
|
- showFull(id){
|
|
|
- console.log('ckx debug 监控大屏' )
|
|
|
- this.$router.push('/monitorScreen')
|
|
|
- },
|
|
|
- // 退出全屏
|
|
|
- exitFull(){
|
|
|
- let exitFullScreen =
|
|
|
- document.exitFullScreen ||
|
|
|
- document.mozCancelFullScreen ||
|
|
|
- document.webkitExitFullscreen ||
|
|
|
- document.msExitFullscreen;
|
|
|
- if (exitFullScreen) {
|
|
|
- exitFullScreen.call(document);
|
|
|
- }
|
|
|
- this.updatekey=new Date().getTime()
|
|
|
- },
|
|
|
- // 展开全屏
|
|
|
- requestFullScreen(elem){
|
|
|
- console.log('ckx debug ', )
|
|
|
- // #兼容不同的浏览器
|
|
|
- var requestMethod =
|
|
|
- elem.requestFullScreen ||
|
|
|
- elem.webkitRequestFullScreen ||
|
|
|
- elem.mozRequestFullScreen ||
|
|
|
- elem.msRequestFullScreen;
|
|
|
- if (requestMethod) {
|
|
|
- requestMethod.call(elem);
|
|
|
- } else if (typeof window.ActiveXObject !== "undefined") {
|
|
|
- // #模拟F11 实现全屏
|
|
|
- var wscript = new ActiveXObject("WScript.Shell");
|
|
|
- if (wscript !== null) {
|
|
|
- wscript.SendKeys("{F11}");
|
|
|
- }
|
|
|
- }
|
|
|
- let that =this
|
|
|
- window.addEventListener('resize',function () {//执行
|
|
|
- let isFull = document.mozFullScreen ||
|
|
|
- document.fullScreen ||
|
|
|
- //谷歌浏览器及Webkit内核浏览器
|
|
|
- document.webkitIsFullScreen ||
|
|
|
- document.webkitRequestFullScreen ||
|
|
|
- document.mozRequestFullScreen ||
|
|
|
- document.msFullscreenEnabled
|
|
|
- if (isFull === undefined) {
|
|
|
- that.exitFull()
|
|
|
- }else {
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- checkFull() {
|
|
|
- //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
|
|
|
- //火狐浏览器
|
|
|
- let isFull = document.mozFullScreen ||
|
|
|
- document.fullScreen ||
|
|
|
- //谷歌浏览器及Webkit内核浏览器
|
|
|
- document.webkitIsFullScreen ||
|
|
|
- document.webkitRequestFullScreen ||
|
|
|
- document.mozRequestFullScreen ||
|
|
|
- document.msFullscreenEnabled
|
|
|
- if (isFull === undefined) {
|
|
|
- isFull = false
|
|
|
- }
|
|
|
- return isFull;
|
|
|
- },
|
|
|
- showMoreInfo(type){
|
|
|
- if(type=='more'){
|
|
|
- this.$router.push('/situationScreen')
|
|
|
- }else {
|
|
|
- this.$router.push('/taskScreen')
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 初始化视频
|
|
|
- initVideo(nowPlayVideoUrl,id) {
|
|
|
- let that =this
|
|
|
-
|
|
|
- // 这些options属性也可直接设置在video标签上，见 muted
|
|
|
- let options = {
|
|
|
- autoplay: true, // 设置自动播放
|
|
|
- controls: true, // 显示播放的控件
|
|
|
- sources: [
|
|
|
- // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
|
|
|
- {
|
|
|
- src: nowPlayVideoUrl,
|
|
|
- type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- // videojs的第一个参数表示的是，文档中video的id
|
|
|
- const myPlyer= Videojs(id, options, function onPlayerReady() {
|
|
|
- console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
|
|
|
- console.log(myPlyer === this); // 这里返回的是true
|
|
|
- });
|
|
|
- this.playerList.push(myPlyer)
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- async initUrl(subjectName){
|
|
|
- // if(this.playerList.length){
|
|
|
- // this.playerList.forEach((item)=>{
|
|
|
- // item.dispose()
|
|
|
- // })
|
|
|
- // }
|
|
|
- let params = {
|
|
|
- subjectName: subjectName
|
|
|
- };
|
|
|
- const res = await request('/dt_screen/video/videos/getUnitUrl', 'post', params, false)
|
|
|
- let index = 0;
|
|
|
- this.dataSrc = ['','','','',''];
|
|
|
- this.videoPlayerName=['监控名称','监控名称','监控名称','监控名称','监控名称'];
|
|
|
- for(let item in res.data)
|
|
|
- {
|
|
|
- this.dataSrc[index]= res.data[item].url ;
|
|
|
- this.videoPlayerName[index++] = res.data[item].name;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- changeVideo(subjectName){
|
|
|
- // if(this.playerList.length){
|
|
|
- // this.playerList.forEach((item)=>{
|
|
|
- // item.dispose()
|
|
|
- // })
|
|
|
- // }
|
|
|
- let params = {
|
|
|
-
|
|
|
- };
|
|
|
- const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
|
|
|
- this.initUrl(subjectName+'课目')
|
|
|
- setTimeout(() => {
|
|
|
-
|
|
|
- let index = 0;
|
|
|
-
|
|
|
- this.playerList.forEach((item)=>{
|
|
|
- item.src([{type: 'application/x-mpegURL',src: this.dataSrc[index++]},]);
|
|
|
- item.load();
|
|
|
- item.play();
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
+ // 切换任务
|
|
|
+ changeTask(){
|
|
|
+ this.systemSubjectId=''
|
|
|
+ this.unitSubjectValue=''
|
|
|
+ this.currentTaskName = this.taskOPtion.find( item => item.value== this.wholeOutTaskId ).label
|
|
|
+ this.currentTaskGrade = this.taskList.find( item=> item.taskId==this.wholeOutTaskId).syntheticTaskScore
|
|
|
+ // 获取任务的课目信息
|
|
|
+ this.getSubjectList(this.wholeOutTaskId)
|
|
|
+ // 获取任务的指令信息
|
|
|
+ this.getinstructList(this.wholeOutTaskId)
|
|
|
+ // 建立指令websocket 链接
|
|
|
+ this.initInstructWebsoket()
|
|
|
},
|
|
|
- mounted(){
|
|
|
- // 获取全部单位
|
|
|
- this.getAllUnits()
|
|
|
- // 获取全部系统
|
|
|
- this.getAllSystems()
|
|
|
- // 建立任务的weksocket链接
|
|
|
- this.initWebsoket()
|
|
|
- // this.initUrl()
|
|
|
-
|
|
|
- // // 过14秒调用
|
|
|
- setTimeout(() => {
|
|
|
- for (let index = 0; index < this.dataSrc.length; index++) {
|
|
|
-
|
|
|
- this.initVideo(this.dataSrc[index],this.videoList[index])
|
|
|
-
|
|
|
+ changeTaskAndUnit() {
|
|
|
+ this.systemSubjectId=''
|
|
|
+ if(this.unitSubjectValue){
|
|
|
+ this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue)
|
|
|
+ }else {
|
|
|
+ this.getSubjectList(this.wholeOutTaskId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeTaskAndSystem() {
|
|
|
+ this.unitSubjectValue=''
|
|
|
+ if(this.systemSubjectId){
|
|
|
+ this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId)
|
|
|
+ }else {
|
|
|
+ this.getSubjectList(this.wholeOutTaskId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取任务的课目信息
|
|
|
+ async getSubjectList(taskId){
|
|
|
+ let params={}
|
|
|
+ const res = await request(`/dt_screen/rest/v1/subject/list/${taskId}`, 'get', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ console.log('获取任务的课目信息', data);
|
|
|
+ this.subjectDatas=data
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取任务的指令
|
|
|
+ async getinstructList (taskId) {
|
|
|
+ let params={}
|
|
|
+ const res = await request(`/dt_screen/rest/v1/order/list/${taskId}`, 'get', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ console.log('获取任务的指令', data);
|
|
|
+ this.instructList=data
|
|
|
+ let tempData=[]
|
|
|
+ data.forEach((item)=>{
|
|
|
+ tempData.push([item.subjectName,item.content,item.time])
|
|
|
+ })
|
|
|
+ this.scrollTableConfig.data=tempData
|
|
|
+ this.updatekey=new Date().getTime()
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换单位再结合任务id 获取课目课目列表
|
|
|
+ async getUnitSubjectList(taskId,unitId){
|
|
|
+ let params={}
|
|
|
+ const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, 'get', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ this.subjectDatas=data
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换系统再结合任务id 获取课目课目列表
|
|
|
+ async getSystemSubjectList(taskId,systemId){
|
|
|
+ let params={}
|
|
|
+ const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`, 'get', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ this.subjectDatas=data
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 建立websocket 链接 任务
|
|
|
+ initWebsoket(){
|
|
|
+ this.websocket = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/task`);//这里将http替换成ws
|
|
|
+ switch (this.websocket.readyState) {
|
|
|
+ case 0:
|
|
|
+ console.log("正在连接");
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ console.log("已经链接并且可以通讯");
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ console.log("连接正在关闭");
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ console.log("连接已关闭或者没有链接成功");
|
|
|
+ break;
|
|
|
+ };
|
|
|
+ this.websocket.onopen = this.websocketsend;//websoket连接成功
|
|
|
+ this.websocket.onmessage =this. websocketonmessage;//websoket收到信息
|
|
|
+ this.websocket.onclose = this.websocketclose;//websoket连接关闭
|
|
|
+ },
|
|
|
+ websocketsend(){
|
|
|
+ console.log('ws 连接成功');
|
|
|
+ },
|
|
|
+ websocketonmessage(msg){
|
|
|
+ // 获取全部单位
|
|
|
+ this.getAllUnits()
|
|
|
+ // 获取全部系统
|
|
|
+ this.getAllSystems()
|
|
|
+ console.log('收到任务信息',msg);
|
|
|
+ },
|
|
|
+ websocketclose(){
|
|
|
+ console.log('ws 连接关闭');
|
|
|
+ this.initWebsoket();//重新建立连接
|
|
|
+ },
|
|
|
+ initInstructWebsoket(){
|
|
|
+ // 指令的ws
|
|
|
+ this.websocketOrder = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
|
|
|
+ switch (this.websocketOrder.readyState) {
|
|
|
+ case 0:
|
|
|
+ console.log("正在连接");
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ console.log("已经链接并且可以通讯");
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ console.log("连接正在关闭");
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ console.log("连接已关闭或者没有链接成功");
|
|
|
+ break;
|
|
|
+ };
|
|
|
+ this.websocketOrder.onopen = this.orderWebsocketsend;//websoket连接成功
|
|
|
+ this.websocketOrder.onmessage =this. orderWebsocketonmessage;//websoket收到信息
|
|
|
+ this.websocketOrder.onclose = this.orderWebsocketclose;//websoket连接关闭
|
|
|
+ },
|
|
|
+ orderWebsocketsend(){
|
|
|
+ console.log('ws 连接成功');
|
|
|
+ },
|
|
|
+ orderWebsocketonmessage(msg){
|
|
|
+ // 获取任务的指令信息
|
|
|
+ this.getinstructList(this.wholeOutTaskId)
|
|
|
+ console.log('收到指令信息',msg);
|
|
|
+ },
|
|
|
+ orderWebsocketclose(){
|
|
|
+ console.log('ws 连接关闭');
|
|
|
+ this.initInstructWebsoket();//重新建立连接
|
|
|
+ },
|
|
|
+ // 查看成绩表格
|
|
|
+ viewManData(item){
|
|
|
+ this.dialogType=2
|
|
|
+ this.dialogVisible=true
|
|
|
+ console.log('item',item);
|
|
|
+ const { subjectScore } = item
|
|
|
+ this.gridData=subjectScore
|
|
|
+ },
|
|
|
+ // 全屏事件
|
|
|
+ showFull(id){
|
|
|
+ console.log('ckx debug 监控大屏' )
|
|
|
+ this.$router.push('/monitorScreen')
|
|
|
+ },
|
|
|
+ // 退出全屏
|
|
|
+ exitFull(){
|
|
|
+ let exitFullScreen =
|
|
|
+ document.exitFullScreen ||
|
|
|
+ document.mozCancelFullScreen ||
|
|
|
+ document.webkitExitFullscreen ||
|
|
|
+ document.msExitFullscreen;
|
|
|
+ if (exitFullScreen) {
|
|
|
+ exitFullScreen.call(document);
|
|
|
+ }
|
|
|
+ this.updatekey=new Date().getTime()
|
|
|
+ },
|
|
|
+ // 展开全屏
|
|
|
+ requestFullScreen(elem){
|
|
|
+ console.log('ckx debug ', )
|
|
|
+ // #兼容不同的浏览器
|
|
|
+ var requestMethod =
|
|
|
+ elem.requestFullScreen ||
|
|
|
+ elem.webkitRequestFullScreen ||
|
|
|
+ elem.mozRequestFullScreen ||
|
|
|
+ elem.msRequestFullScreen;
|
|
|
+ if (requestMethod) {
|
|
|
+ requestMethod.call(elem);
|
|
|
+ } else if (typeof window.ActiveXObject !== "undefined") {
|
|
|
+ // #模拟F11 实现全屏
|
|
|
+ var wscript = new ActiveXObject("WScript.Shell");
|
|
|
+ if (wscript !== null) {
|
|
|
+ wscript.SendKeys("{F11}");
|
|
|
}
|
|
|
- }, 1000);
|
|
|
+ }
|
|
|
+ let that =this
|
|
|
+ window.addEventListener('resize',function () {//执行
|
|
|
+ let isFull = document.mozFullScreen ||
|
|
|
+ document.fullScreen ||
|
|
|
+ //谷歌浏览器及Webkit内核浏览器
|
|
|
+ document.webkitIsFullScreen ||
|
|
|
+ document.webkitRequestFullScreen ||
|
|
|
+ document.mozRequestFullScreen ||
|
|
|
+ document.msFullscreenEnabled
|
|
|
+ if (isFull === undefined) {
|
|
|
+ that.exitFull()
|
|
|
+ }else {
|
|
|
|
|
|
-
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkFull() {
|
|
|
+ //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
|
|
|
+ //火狐浏览器
|
|
|
+ let isFull = document.mozFullScreen ||
|
|
|
+ document.fullScreen ||
|
|
|
+ //谷歌浏览器及Webkit内核浏览器
|
|
|
+ document.webkitIsFullScreen ||
|
|
|
+ document.webkitRequestFullScreen ||
|
|
|
+ document.mozRequestFullScreen ||
|
|
|
+ document.msFullscreenEnabled
|
|
|
+ if (isFull === undefined) {
|
|
|
+ isFull = false
|
|
|
+ }
|
|
|
+ return isFull;
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- if(this.playerList.length){
|
|
|
- this.playerList.forEach((item)=>{
|
|
|
- item.dispose()
|
|
|
- })
|
|
|
- }
|
|
|
- const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
|
|
|
+ showMoreInfo(type){
|
|
|
+ if(type=='more'){
|
|
|
+ this.$router.push('/situationScreen')
|
|
|
+ }else {
|
|
|
+ this.$router.push('/taskScreen')
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
+ // 初始化视频
|
|
|
+ initVideo(nowPlayVideoUrl,id) {
|
|
|
+ let that =this
|
|
|
+
|
|
|
+ // 这些options属性也可直接设置在video标签上，见 muted
|
|
|
+ let options = {
|
|
|
+ autoplay: true, // 设置自动播放
|
|
|
+ controls: true, // 显示播放的控件
|
|
|
+ sources: [
|
|
|
+ // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
|
|
|
+ {
|
|
|
+ src: nowPlayVideoUrl,
|
|
|
+ type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // videojs的第一个参数表示的是，文档中video的id
|
|
|
+ const myPlyer= Videojs(id, options, function onPlayerReady() {
|
|
|
+ console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
|
|
|
+ console.log(myPlyer === this); // 这里返回的是true
|
|
|
+ });
|
|
|
+ this.playerList.push(myPlyer)
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ async initUrl(subjectName){
|
|
|
+ // if(this.playerList.length){
|
|
|
+ // this.playerList.forEach((item)=>{
|
|
|
+ // item.dispose()
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ let params = {
|
|
|
+ subjectName: subjectName
|
|
|
+ };
|
|
|
+ const res = await request('/dt_screen/video/videos/getUnitUrl', 'post', params, false)
|
|
|
+ let index = 0;
|
|
|
+ this.dataSrc = ['','','','',''];
|
|
|
+ this.videoPlayerName=['监控名称','监控名称','监控名称','监控名称','监控名称'];
|
|
|
+ for(let item in res.data)
|
|
|
+ {
|
|
|
+ this.dataSrc[index]= res.data[item].url ;
|
|
|
+ this.videoPlayerName[index++] = res.data[item].name;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ changeVideo(subjectName){
|
|
|
+ // if(this.playerList.length){
|
|
|
+ // this.playerList.forEach((item)=>{
|
|
|
+ // item.dispose()
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ let params = {
|
|
|
+
|
|
|
+ };
|
|
|
+ const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
|
|
|
+ this.initUrl(subjectName+'课目')
|
|
|
+ setTimeout(() => {
|
|
|
+
|
|
|
+ let index = 0;
|
|
|
+
|
|
|
+ this.playerList.forEach((item)=>{
|
|
|
+ item.src([{type: 'application/x-mpegURL',src: this.dataSrc[index++]},]);
|
|
|
+ item.load();
|
|
|
+ item.play();
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ // 获取全部单位
|
|
|
+ this.getAllUnits()
|
|
|
+ // 获取全部系统
|
|
|
+ this.getAllSystems()
|
|
|
+ // 建立任务的weksocket链接
|
|
|
+ this.initWebsoket()
|
|
|
+ // this.initUrl()
|
|
|
+
|
|
|
+ // // 过14秒调用
|
|
|
+ setTimeout(() => {
|
|
|
+ for (let index = 0; index < this.dataSrc.length; index++) {
|
|
|
+
|
|
|
+ this.initVideo(this.dataSrc[index],this.videoList[index])
|
|
|
+
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if(this.playerList.length){
|
|
|
+ this.playerList.forEach((item)=>{
|
|
|
+ item.dispose()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
#videoPlayerTask {
|
|
|
- width: 906px;
|
|
|
- height: 350px;
|
|
|
+ width: 906px;
|
|
|
+ height: 350px;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_first {
|
|
|
- width: 278px;
|
|
|
- height: 164px;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 278px;
|
|
|
+ height: 164px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_second {
|
|
|
- width: 278px;
|
|
|
- height: 164px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 278px;
|
|
|
+ height: 164px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_third {
|
|
|
- width: 278px;
|
|
|
- height: 164px;
|
|
|
- margin-right: 10px;
|
|
|
+ width: 278px;
|
|
|
+ height: 164px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_fourth {
|
|
|
- width: 278px;
|
|
|
- height: 164px;
|
|
|
+ width: 278px;
|
|
|
+ height: 164px;
|
|
|
}
|
|
|
.video_flex_style {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 10px 0;
|
|
|
- box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
</style>
|
