|
|
@@ -1,813 +1,845 @@
|
|
|
<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>
|
|
|
+ <v-scale-screen width="2200" height="1080">
|
|
|
+ <div class="task_screen_cotainer">
|
|
|
+ <div class="task_header">「{{ currentTaskName }}」任务态势大屏
|
|
|
+ <el-button @click="changeVideo"></el-button>
|
|
|
+ </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 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 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 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"
|
|
|
+ </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"
|
|
|
+ v-if="isReady"
|
|
|
+ ></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>
|
|
|
|
|
|
- >
|
|
|
- </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 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>
|
|
|
|
|
|
- </div>
|
|
|
+ <!-- <div class="video_body1"><HKVideo :companyVideoData="mainVideoData" :videoType="1"></HKVideo></div> -->
|
|
|
+ <video id="videoPlayerTask" class="video-js" muted></video>
|
|
|
|
|
|
- </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><HKVideo :companyVideoData="mainVideoData"></HKVideo></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
|
|
|
+ <!-- <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>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
</div>
|
|
|
- <!-- 任务详情弹窗 -->
|
|
|
- <el-dialog
|
|
|
- title=""
|
|
|
- :show-close="false"
|
|
|
- :destroy-on-close="true"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- width="650px"
|
|
|
- top="300px"
|
|
|
- >
|
|
|
+ </div> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="commandMonitoring_task">
|
|
|
+ <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_body2"><HKVideo2 :companyVideoData="mainVideoData" :videoType="2"></HKVideo2></div> -->
|
|
|
+ <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>
|
|
|
- </el-dialog>
|
|
|
+ <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>
|
|
|
+ </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';
|
|
|
-import myFlylineChartEnhanced from '../components/my-flyline-chart-enhanced/index'
|
|
|
-import formTaskProcessViewer from '@/components/workflow/formTaskProcessViewer'
|
|
|
-import myscrollBoard from '../components/myscroll-board/src/main'
|
|
|
-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 FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
|
|
|
+import * as echarts from "echarts";
|
|
|
+import myFlylineChartEnhanced from "../components/my-flyline-chart-enhanced/index";
|
|
|
+import formTaskProcessViewer from "@/components/workflow/formTaskProcessViewer";
|
|
|
+import myscrollBoard from "../components/myscroll-board/src/main";
|
|
|
+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 FormTaskProcessViewer from "../components/workflow/formTaskProcessViewer.vue";
|
|
|
+import HKVideo from "../components/HKVS/hkv.vue";
|
|
|
+import HKVideo2 from "../components/HKVS/hkv2.vue"
|
|
|
|
|
|
export default {
|
|
|
- components:{
|
|
|
- myFlylineChartEnhanced,
|
|
|
- sacleBox,
|
|
|
- myscrollBoard,
|
|
|
-
|
|
|
- FormTaskProcessViewer
|
|
|
+ components: {
|
|
|
+ myFlylineChartEnhanced,
|
|
|
+ sacleBox,
|
|
|
+ myscrollBoard,
|
|
|
+ HKVideo,
|
|
|
+ HKVideo2,
|
|
|
+ FormTaskProcessViewer
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ systemFinshedValue: "",
|
|
|
+ unitFinshedValue: "",
|
|
|
+ wholeOutTaskId: "",
|
|
|
+ systemSubjectId: "",
|
|
|
+ unitSubjectValue: "",
|
|
|
+ subjectItem: {},
|
|
|
+ processDefinitionId: "",
|
|
|
+ processInstanceId: "",
|
|
|
+ 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: [],
|
|
|
+ isReady: false,
|
|
|
+ currentTaskName: "",
|
|
|
+ currentTaskGrade: "",
|
|
|
+ unitSubGradeValue: "",
|
|
|
+ gridData: [],
|
|
|
+ dataSrc: ["rtsp://admin:sgw123456@192.168.0.64:554/h265/ch01/main/av_stream", "", "", "", ""],
|
|
|
+ completionRate: false,
|
|
|
+ playerList: [],
|
|
|
+ videoPlayerName: ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"],
|
|
|
+ videoList: [
|
|
|
+ "videoPlayerTask",
|
|
|
+ "videoPlayer_first",
|
|
|
+ "videoPlayer_second",
|
|
|
+ "videoPlayer_third",
|
|
|
+ "videoPlayer_fourth"
|
|
|
+ ],
|
|
|
+ mainVideoData: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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;";
|
|
|
+ }
|
|
|
},
|
|
|
- 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']
|
|
|
+ // 获取全部系统
|
|
|
+ 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.processInstanceId = this.wholeOutTaskId;
|
|
|
+ let param = {taskId: this.processInstanceId};
|
|
|
+ const res1 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
|
|
|
+ this.processDefinitionId = res1.data;
|
|
|
+
|
|
|
+ this.isReady = true;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换任务
|
|
|
+ async changeTask() {
|
|
|
+ this.systemSubjectId = "";
|
|
|
+ this.unitSubjectValue = "";
|
|
|
+ this.isReady = false;
|
|
|
+ this.currentTaskName = this.taskOPtion.find((item) => item.value == this.wholeOutTaskId).label;
|
|
|
+ this.currentTaskGrade = this.taskList.find((item) => item.taskId == this.wholeOutTaskId).syntheticTaskScore;
|
|
|
+ // 获取任务的课目信息
|
|
|
+ this.processInstanceId = this.wholeOutTaskId;
|
|
|
+
|
|
|
+ let param = {taskId: this.processInstanceId};
|
|
|
+ const res2 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
|
|
|
+ console.log('res2 :>> ', res2.data);
|
|
|
+ this.processDefinitionId = res2.data;
|
|
|
+ this.isReady = true;
|
|
|
+ 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");
|
|
|
+ }
|
|
|
},
|
|
|
- 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)
|
|
|
-
|
|
|
- },
|
|
|
+ // 初始化视频
|
|
|
+ initVideo(nowPlayVideoUrl, id) {
|
|
|
+ let that = this;
|
|
|
|
|
|
- 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;
|
|
|
- }
|
|
|
+ // 这些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);
|
|
|
+ },
|
|
|
|
|
|
-
|
|
|
- },
|
|
|
- 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();
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
+ 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 = {};
|
|
|
+ request("/dt_screen/video/videos/videoClose", "get", params, false);
|
|
|
|
|
|
- }, 1000);
|
|
|
+ // 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();
|
|
|
+ // });
|
|
|
+ // }, 35000);
|
|
|
}
|
|
|
- },
|
|
|
- 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);
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.initUrl()
|
|
|
+ let url = "rtsp://admin:sgw123456@192.168.0.64:554/h265/ch01/main/av_stream";
|
|
|
+ url = url.split("/");
|
|
|
+ url = url[2];
|
|
|
+ url = url.split(":");
|
|
|
+ this.mainVideoData.Username = url[0];
|
|
|
+ this.mainVideoData.Port = url[2];
|
|
|
+ url = url[1];
|
|
|
+ url = url.split("@");
|
|
|
+ this.mainVideoData.IP = url[1];
|
|
|
+ this.mainVideoData.Password = url[0];
|
|
|
+ console.log("this.mainVideoData :>> ", this.mainVideoData);
|
|
|
|
|
|
-
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- if(this.playerList.length){
|
|
|
- this.playerList.forEach((item)=>{
|
|
|
- item.dispose()
|
|
|
- })
|
|
|
- }
|
|
|
- const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
|
|
|
- },
|
|
|
-}
|
|
|
+ // 获取全部单位
|
|
|
+ this.getAllUnits();
|
|
|
+ // 获取全部系统
|
|
|
+ this.getAllSystems();
|
|
|
+ // 建立任务的weksocket链接
|
|
|
+ this.initWebsoket();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // // 过14秒调用
|
|
|
+ // setTimeout(() => {
|
|
|
+ // for (let index = 0; index < this.dataSrc.length; index++) {
|
|
|
+ // this.initVideo(this.dataSrc[index], this.videoList[index]);
|
|
|
+ // }
|
|
|
+ // }, 5500);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.playerList.length) {
|
|
|
+ this.playerList.forEach((item) => {
|
|
|
+ item.dispose();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = request("/dt_screen/video/videos/videoClose", "get", params, false);
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
-<style>
|
|
|
+<style scoped>
|
|
|
#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>
|
|
|
-
|
|
|
-
|
xyh123999