sgw 1 год назад
Родитель
Сommit
63e888d727
3 измененных файлов с 780 добавлено и 764 удалено
  1. 2 2
      src/views/historicTaskScreen.vue
  2. 14 4
      src/views/situationScreen.vue
  3. 764 758
      src/views/taskScreen.vue

+ 2 - 2
src/views/historicTaskScreen.vue

@@ -2396,7 +2396,7 @@ export default {
 
     // 建立websocket 链接 任务
     initWebsoket(){
-      this.websocket = new WebSocket('ws://43.143.221.128:8084/websocket/task');//这里将http替换成ws
+      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("正在连接");
@@ -2432,7 +2432,7 @@ export default {
 
     initInstructWebsoket(){
       // 指令的ws
-      this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成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("正在连接");

+ 14 - 4
src/views/situationScreen.vue

@@ -1,7 +1,13 @@
 <template>
   <v-scale-screen width="2200" height="1080">
     <div  class="task_screen_cotainer" >
-      <div class="task_header">训练态势大屏</div>
+      <div class="task_header">
+        历史态势
+      </div>
+      <div class="tag" @click="jumpToCurrent">
+        当前态势
+<!--        <el-button @click="jumpToCurrent">当前态势</el-button>-->
+      </div>
       <div class="content_cotainer">
         <div class="task_base_info_table">
           <div class="task_outer_cotnainer">
@@ -154,7 +160,7 @@
             <div class="header_line_style">
               <div class="headerTitle"></div>
             </div>
-            <div class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
+            <div class="task_name_header">「{{ currentTaskName }}」历史态势</div>
             <!-- 任务屏幕 -->
             <div class="task_item_header">
 
@@ -796,6 +802,10 @@ export default {
     }
   },
   methods:{
+    jumpToCurrent() {
+      // window.location.href = "/taskScreen"
+      this.$router.push("/taskScreen")
+    },
 
     // 获取单位名称
     getName(list, id) {
@@ -2396,7 +2406,7 @@ export default {
 
     // 建立websocket 链接 任务
     initWebsoket(){
-      this.websocket = new WebSocket('ws://43.143.221.128:8084/websocket/task');//这里将http替换成ws
+      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("正在连接");
@@ -2432,7 +2442,7 @@ export default {
 
     initInstructWebsoket(){
       // 指令的ws
-      this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成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("正在连接");

+ 764 - 758
src/views/taskScreen.vue

@@ -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>