DT_screen/src/views/situationScreen.vue

<template>
  <v-scale-screen width="2200" height="1080">
    <div  class="task_screen_cotainer" >
      <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">
            <div class="task_number_box">
              <div class="task_num_left_style">
                <el-image
                  style="width: 45px; height: 45px;margin-right:20px;"
                  :src="require('../assets/img/taskNum.png')"
                  fit="contain"
                >
                </el-image>
                任务数
              </div>
              <div class="taskNumber_style">
                {{ taskList.length }}
              </div>
            </div>
            <div class="task_list_container">
              <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>
              <div class="select_lsit_box">
                <el-date-picker
                  v-model="currentYear"

                  style="width:100%;"
                  type="datetimerange"
                  placeholder="请选择"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
              <div class="search_box">
                <div class="select_lsit_box">
                  <el-select
                    v-model="systemTaskId"
                    placeholder="切换系统名称"
                    style="width:55%; margin-right:10px;"

                    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="unitTaskValue"
                    placeholder="切换单位名称"
                    style="width:55%;"
                    clearable

                    filterable
                  >
                    <el-option
                      v-for="item in unitOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"

                    >
                    </el-option>
                  </el-select>

                  <div class="search_button" @click="conditionalSearch()">
                    查询
                  </div>
                </div>
              </div>
              <div v-if="taskList.length" class="task_scroll_box">
                <template v-for="(item,index) in taskList">
                  <div class="task_item_container" :key="index">
                    <div class="task_item_left">
                      <div class="left_point"></div>
                      <div class="left_line"></div>
                      <div v-if="index == taskList.length-1 " class="left_point"></div>
                    </div>
                    <div class="task_content_right">
                      <div class="task_content_header">状态：{{ item.status || '-' }}</div>
                      <div class="task_content_description">
                        <div class="file_icon">
                          <el-image
                            style="width: 14px; height: 13px; margin-right:8px; margin-top:4px;"
                            :src="require('../assets/img/fileIcon.svg')"
                            fit="contain"
                          >
                          </el-image>
                        </div>
                        <div class="task_content_box">
                          <div class="grade_box">
                            <div class="name_task_participantName">
                              <div class="task_name">{{ item.taskName || '-' }}</div>
                              <div class="task_participantName">
                                组织人员：{{ item.organizers && item.organizers.join(',') || '-'  }}
                              </div>
                            </div>
                            <div class="grade_item">
                              {{ item.syntheticTaskScore }}
                            </div>
                          </div>
                          <div class="task_date_box">
                            <div class="task_data">
                              <div class="date_between">
                                <span> {{ item.startTime || '-' }} </span>
                                至
                                <span>  {{ item.endTime || '-' }} </span>
                              </div>
                            </div>
                            <div class="view_more" @click="viewMore(item)">
                              查看详情
                            </div>
                            <div class="view_more" @click="viewTaskSituation(item)">
                              查看态势
                            </div>
                          </div>
                        </div>

                      </div>


                    </div>
                  </div>
                </template>
              </div>
              <div class="noTaskData" v-else>
                暂无任务
              </div>

            </div>
          </div>
        </div>
        <div class="center_chart_cotainer" id="taskItem">
          <div class="task_detail_cotainer">
            <div class="header_line_style">
              <div class="headerTitle"></div>
            </div>
            <div 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
                v-if="false"
                @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
                @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">
                <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" :key="index">
                        <div class="subject_list_header">
                          <div>
                            <div class="subject_list_name">
                              {{  item.subjectName ||'-'  }}
                            </div>
                            <div class="SubjectNumber_style" style="color: #F1D73A;">
                              {{ item.overallScore || '-' }}
                            </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>

              </div>
              <div class="unit_map_box">
                <div class="map_more_box" style="align-items: flex-start;">
                  <div class="task_list_header" style="font-size:16px; margin-bottom: 10px;">
                    <el-image
                      style="width: 30px; height: 22px; margin-right:6px;"
                      :src="require('../assets/img/rightIcon.svg')"
                      fit="contain"
                    >
                    </el-image>
                    单位维度统计
                  </div>
                  <el-select
                    v-model="unitSubGradeValue"
                    placeholder="切换单位名称"
                    style="width:43%;"
                    @change="changeunitSubGrade"
                    filterable
                  >
                    <el-option
                      v-for="item in unitOptionForTask"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"

                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="num_subject_box_new">
                  <div style="margin-bottom:20px;">
                    <div style="font-size:12px;">成绩统计</div>
                    <div>
                      <el-row type="flex" justify="end" style="margin-top: -20px;margin-right: -20px;">
                        <el-pagination
                            small
                            :pager-count="4"
                            :total="this.danweiweidu.length"
                            :current-page="this.danweiweidu.currentPage"
                            :page-size="this.danweiweidu.pageSize"
                            :page-sizes="[5,10,15,20]"
                            layout="total, prev, pager, next, sizes"
                            @current-change="onCurrentPageChange_grade"
                            @size-change="onPageSizeChange_grade" >
                          <!--                            @prev-click="previousPage"-->
                          <!--                            @next-click="nextPage"-->
                        </el-pagination>
                      </el-row>
                    </div>
                    <div
                      id="subjectGradeStatistics"
                      style=" left:5px; width:430px; height:180px;  "
                      :style="{  top: participantScoreFlag ? '-15px' : '2px' }"
                    ></div>
                  </div>
                  <div style="position: relative;">
                    <div style="font-size:12px;" class="new_style_grade">成绩分布</div>
                    <div id="subjectGradeDistribute" style="height: 160px; width:430px;  bottom: 55px; position: relative; left:5px;"></div>
                  </div>
                </div>

              </div>
              <div class="commandMonitoring">
                <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="task_header_footer">
              <div class="subject_task_item">
                <div class="task_outer_cotnainer_status">
                  <div class="map_more_box" style="align-items: flex-start; margin-bottom:18px;">
                    <div class="task_list_header" style="font-size:16px; margin-bottom: 10px;">
                      <el-image
                        style="width: 30px; height: 22px; margin-right:6px;"
                        :src="require('../assets/img/rightIcon.svg')"
                        fit="contain"
                      >
                      </el-image>
                      任务评估结果
                    </div>
                  </div>
                  <div class="num_subject_box">
                    <div class="num_subject_left">
                      <div class="subject_number_box" style="margin-bottom:24px;">
                        <div class="subject_num_left_style">
                          <el-image
                            style="width: 45px; height: 45px;margin-right:10px;"
                            :src="require('../assets/img/subjectNum.png')"
                            fit="contain"
                          >
                          </el-image>
                          课目数
                        </div>
                        <div class="SubjectNumber_style">
                          {{ subjectNumbers }}
                        </div>
                      </div>
                      <div class="subject_number_box">
                        <div class="subject_num_left_style" >
                          <el-image
                            style="width: 45px; height: 45px;margin-right:1px;"
                            :src="require('../assets/img/taksGrade.png')"
                            fit="contain"
                          >
                          </el-image>
                          任务分数
                        </div>
                        <div class="SubjectNumber_style" style="color: #F1D73A;">
                          {{ currentTaskGrade || '-' }}
                        </div>
                      </div>
                    </div>
                    <div class="num_subject_right">
                      <div class="subject_status_precent">课目状态占比</div>
                      <div id="subjectStatus" style="height: 170px; width:220px; left:18px; right:0px; top:8px; "></div>
                    </div>
                  </div>
                  <div class="num_subject_box" v-if="false">
                    <div>
                      <div
                        id="subjectGradeStatistics"
                        style="width:230px;  height: 180px;"
                        :style="{  bottom: participantScoreFlag ? '15px' : '0' }"
                      ></div>
                    </div>
                    <div>
                      <div id="subjectGradeDistribute" style="height: 180px; width:230px; bottom: 0px; position: relative; left:10px;"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="unit_map_box">
                <div class="map_more_box" style="align-items: flex-start;">
                  <div class="task_list_header" style="font-size:16px; margin-bottom: 10px;">
                    <el-image
                      style="width: 30px; height: 22px; margin-right:6px;"
                      :src="require('../assets/img/rightIcon.svg')"
                      fit="contain"
                    >
                    </el-image>
                    系统维度统计
                  </div>
                  <el-select
                    v-model="systemSubGradeValue"
                    placeholder="切换系统名称"
                    style="width:43%;"
                    @change="changeSystemSubGrade"
                    filterable
                  >
                    <el-option
                      v-for="item in systemOptionForTask"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="num_subject_box_new">
                  <div style="margin-bottom:20px;">
                    <div style="font-size:12px;">成绩统计</div>
                    <div
                      id="subjectGradeStatistics"
                      style=" left:5px; width:430px; height:180px;  "
                      :style="{  top: participantScoreFlag ? '-15px' : '2px' }"
                    ></div>
                  </div>
                  <div style="position: relative;">
                    <div style="font-size:12px;" class="new_style_grade">成绩分布</div>
                    <div id="subjectGradeDistribute" style="height: 160px; width:430px;  bottom: 55px; position: relative; left:5px;"></div>
                  </div>
                </div>
              </div>
              <div class="commandMonitoring">
                <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('chart-earth')"-->
<!--                      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 v-if="!echartMapFlag" id="mapData" style="height:260px; width:100%; top:-20px;"></div>
                  <div v-if="echartMapFlag" class="tempalte_no_data" style="height:86%;"> 暂无数据</div> -->
                   <div id="chart-earth" style="height:260px; width:100%; top:-20px;"></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 class="task_footer_chart">
            <div class="chart_item_box_foooter" style="margin-right:10px;">
              <div class="inner_info_table_status">
                <div class="task_outer_cotnainer_status">
                  <div class="task_list_header" style="font-size:16px;">
                    <el-image
                      style="width: 30px; height: 22px; margin-right:6px;"
                      :src="require('../assets/img/rightIcon.svg')"
                      fit="contain"
                    >
                    </el-image>
                    任务分数统计
                  </div>
                </div>
                <div id="gradeStatistics" style="height: 240px; width:100%; margin-top:-60px; "></div>
              </div>
            </div>

            <div class="chart_item_box_foooter">
              <div class="inner_info_table_status">
                <div class="task_outer_cotnainer_status">
                  <div class="task_list_header" style="font-size:16px;">
                    <el-image
                      style="width: 30px; height: 22px; margin-right:6px;"
                      :src="require('../assets/img/rightIcon.svg')"
                      fit="contain"
                    >
                    </el-image>
                    任务分数分布
                  </div>
                </div>
                <div id="gradeDistribute" style="height: 240px; width:100%; margin-top:-60px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="task_chart_cotainer">
          <div class="chart_item_box">
            <div class="inner_info_table_status" v-if="!taskStatusFlag">
              <div class="task_outer_cotnainer_status">
                <div class="task_list_header" style="font-size:16px;">
                  <el-image
                    style="width: 30px; height: 22px; margin-right:6px;"
                    :src="require('../assets/img/rightIcon.svg')"
                    fit="contain"
                  >
                  </el-image>
                  任务状态占比
                </div>
              </div>
              <div id="taskStatus" style="height:280px; width:314px; top:-50px;"></div>
            </div>
            <div v-if="taskStatusFlag" class="tempalte_no_data">暂无数据</div>
          </div>
          <div class="chart_item_box">
            <div class="inner_info_table_precent" >
              <div class="task_outer_cotnainer_status">
                <div class="task_list_header" style="font-size:16px;">
                  <el-image
                    style="width: 30px; height: 22px; margin-right:6px;"
                    :src="require('../assets/img/rightIcon.svg')"
                    fit="contain"
                  >
                  </el-image>
                  {{this.unitTaskValue == '' ? getName(this.unitOption, this.unitFinshedValue) : getName(this.unitOption, this.unitTaskValue)}} 单位任务完成率
                </div>
              </div>
              <div v-if="!completionRate" id="taskPrecent" style="height:200px; width:310px; margin-top:-5px; right: 0px; "></div>
              <div v-if="completionRate" class="tempalte_no_data" style="height:200px; width:310px; margin-top:-10px; right: 0px; ">
                暂无数据
              </div>
<!--              <el-select-->
<!--                v-model="unitFinshedValue"-->
<!--                placeholder="「此处为单位名称」"-->
<!--                style="margin-top:20px; width:270px;"-->
<!--                filterable-->
<!--                @change="changeUnit"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="item in unitOption"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                >-->
<!--                </el-option>-->
<!--              </el-select>-->
            </div>
          </div>

          <div class="chart_item_box" style="margin-bottom:0;">
            <div class="inner_info_table_precent" >
              <div class="task_outer_cotnainer_status">
                <div class="task_list_header" style="font-size:16px;">
                  <el-image
                    style="width: 30px; height: 22px; margin-right:6px;"
                    :src="require('../assets/img/rightIcon.svg')"
                    fit="contain"
                  >
                  </el-image>
                  {{this.systemTaskId == '' ? getName(this.systemOption, this.systemFinshedValue) : getName(this.systemOption, this.systemTaskId)}} 系统任务完成率
                </div>
              </div>
              <div v-if="!systemcompletionRate" id="taskPrecentSystem" style="height:200px; width:310px; margin-top:-5px; "></div>
              <div v-if="systemcompletionRate" class="tempalte_no_data" style="height:200px; width:310px; margin-top:-10px; ">暂无数据</div>
<!--              <el-select-->
<!--                v-model="systemFinshedValue"-->
<!--                placeholder="「此处为系统名称」"-->
<!--                style="margin-top:20px; width:270px;"-->
<!--                filterable-->
<!--                @change="changeSystem"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="item in systemOption"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->

<!--                >-->
<!--                </el-option>-->
<!--              </el-select>-->
            </div>
          </div>
        </div>
        <!-- 任务详情弹窗 -->
        <el-dialog
          title=""
          :show-close="false"
          :destroy-on-close="true"
          :visible.sync="dialogVisible"
          :width=" dialogType ==1 ?  '650px' : '650px'"
          top="10%"
        >
          <div>
            <div class="task_detail_dialog">
              <div class="header_line_style"></div>
              <div class="task_dialog_box" v-if="dialogType==1">
                <div class="grade_box">
                  <div class="name_task_participantName" style="margin-bottom:12px;">
                    <div class="task_dialog_name">{{ subjectItem.taskName || '-' }}</div>
                    <div class="task_dialog_particpater">
                      组织人员：{{ subjectItem.organizers && subjectItem.organizers.length && subjectItem.organizers.join('，')  || '-' }}
                    </div>
                  </div>
                  <div class="grade_item" style="margin-top:10px;">
                    {{ subjectItem.syntheticTaskScore }}
                  </div>
                </div>
                <div class="task_date_status">
                  <div class="date_task_dialog">{{ subjectItem.startTime || '-' }} 至 {{  subjectItem.endTime || '-' }}  </div>
                  <div class="status_task_dialog">任务状态：{{  subjectItem.status }}</div>
                </div>
                <div class="subject_dialog_container">
                  <template v-for="(item,index) in subjectItem.subjects">
                    <div :key="index" style="margin-bottom: 8px;">
                      <div class="subject_item_header"   @click="item.moreFlag=!item.moreFlag">
                        <div class="subject_name">{{ item.subjectName || '-' }}</div>
                        <div class="subject_icon">
                          <el-image
                            style="width: 12px; height: 12px; margin-left:8px; margin-top:3px;"
                            :src="item.moreFlag ? require('../assets/img/more.svg') :  require('../assets/img/less.svg') "
                            fit="cover"
                          >
                          </el-image>
                        </div>
                      </div>
                      <div v-if="!item.moreFlag" class="suvject_item_container">
                        <div class="subject_child_item" style="padding-left:0; margin-bottom:4px;">· {{ item.subjectName }}</div>
                        <div class="subject_child_item"> 课目名称：{{ item.subjectName }}</div>
                        <div class="subject_child_item"> 参加人员：{{ item.participatingPeople.join('，') || '-' }}</div>
                        <div class="subject_child_item"> 参加系统：{{ item.participatingSystems.join('，') || '-' }}</div>
                        <div class="subject_child_item"> 参加单位：{{ item.participatingUnits.join('，') || '-' }}</div>
                        <div class="subject_child_item" v-if="false">
                          课目附件：
                          <span class="download_file" stlye="color:#6CFCDB;">下载附件</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div class="task_dialog_box_other" v-if="dialogType==2">
                <el-table
                  :data="pagedData"
                  :header-cell-style="changeHeaderCellStyle"
                  :cell-style="changeCellStyle"
                  stripe
                  :border="true"

                >
                  <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex" />
                  <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>
                <el-row type="flex" justify="end" style="margin-top: 10px;">
                  <el-pagination

                      :total="this.gridData2.length"
                      :current-page="this.gridData2.currentPage"
                      :page-size="this.gridData2.pageSize"
                      :page-sizes="[5,10,15, 20]"
                      layout="total, prev, pager, next, sizes"
                      @current-change="onCurrentPageChange"
                      @size-change="onPageSizeChange">
                  </el-pagination>

                </el-row>

                <operation-space v-if="showOperationSpace" :flow-instance="currentFlowInstance" @close="onOperationSpaceClose"></operation-space>

              </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 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 './situationScreen.css'
import Videojs from "video.js"; // 引入Videojs
import 'echarts-gl';
export default {
  components:{
    myFlylineChartEnhanced,
    sacleBox,
    myscrollBoard,

  },
  data() {
    return {
      danweiweidu:{
        data: [],
        length:0,
        danwei_name:[],
        danwei_grade:[],
        currentPage:1,
        totalPage:0,
        pageSize:15,
        paged:true,
      },
      showOperationSpace: false,
      currentFlowInstance: undefined,
      systemTaskId:'',
      unitTaskValue:'',
      systemFinshedValue:'',
      unitFinshedValue:'',
      wholeOutTaskId:'',
      systemSubjectId:'',
      unitSubjectValue:'',
      subjectItem:{},
      moreFlag:true,
      dialogVisible:false,
      taskList:[],
      websocket: null, //建立的连接
      websocketOrder: null, //建立的连接

      updatekey:'1',
      myChart:'',
      myChart1:'',
      myChart2:'',
      myChart3:'',
      myChart4:'',
      myChart5:'',
      myChart6:'',
      myChart7:'',
      myChart8:'',
      myChart9:'',
      scrollTableConfig:{
        header: ['课目名称', '指令分类', '特情注入', '指令内容', '模训系统', '时间'],
        waitTime:1500,
        data: [],
        columnWidth: [80],
        oddRowBGC:'#072347',
        evenRowBGC:'#021736'
      },
      taiYuanMapData:{
        "小店区": [112.564273, 37.817974],
        "迎泽区": [112.558851, 37.855804],
        "杏花岭区": [112.560743, 37.879291],
        "尖草坪区": [112.487122, 37.939893],
        "万柏林区": [112.522258, 37.862653],
        "晋源区": [112.477849, 37.715619],
        "清徐县": [112.357961, 37.60729],
        "阳曲县": [112.673818, 38.058797],
        "娄烦县": [111.793798, 38.066035],
        "古交市": [112.174353, 37.908534],
      },
      taiYuanDatas:[],
      unitValue:'',
      unitOptions:[],
      dialogType:1,
      subjectDatas:[],
      subjectMap:{
        '待执行':require('../assets/img/waite.png'),
        '执行中':require('../assets/img/doing.png'),
        '已完成':require('../assets/img/finshed.png') ,
      },
      instructList:[],
      unitOption:[],
      unitOptionForTask:[],
      systemOption:[],
      systemOptionForTask:[],
      currrentSystem:'',
      currentUnit:'',
      taskOPtion:[],
      currentTaskName:'',
      currentTaskGrade:'',
      subjectNumbers:'',
      unitSubGradeValue:'',
      systemSubGradeValue:'',
      gridData:[],
      gridData2:{
        data: [],
        length:0,
        currentPage:1,
        pageSize:10,
        paged:true,
      },
      dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
      completionRate:false,
      systemcompletionRate:false,
      taskStatusFlag: false,
      echartMapFlag:false,
      participantScoreFlag:true,
      playerList:[],
      updatekeyOther:'1',
      currentYear:'',
    }
  },
  computed:{
    pagedData() { // 动态计算当前页的数据
      const start = (this.gridData2.currentPage - 1) * this.gridData2.pageSize
      const end = start + this.gridData2.pageSize
      if(this.gridData2.data!=null){
        console.log("hhhh1:  ",start+"---"+end )
        console.log("hhhh2:  ",this.gridData2.data )
        console.log("hhhh3:  ",this.gridData2.data.slice(start, end) )
        return this.gridData2.data.slice(start, end)
      }else{
        return null
      }

    }
  },
  methods:{
    /**
     * 获取每一行的index信息
     * @param {Integer} index 表格在本页位置
     */
    getTableIndex (index) {
      let a
      console.log("参数：  "+this.gridData2.paged+" "+this.gridData2.pageSize+" "+index)
      a=((this.gridData2.currentPage - 1) * this.gridData2.pageSize + (index + 1))
      console.log(".....a  "+a)
      return a;
    },
    onCurrentPageChange (newCurrentPage) {

      console.log("1:  ",newCurrentPage )
      console.log("2:  ",this.gridData2.pageSize )
      console.log("3:  ",this.oldPage)

      this.loadTableDataImpl2(newCurrentPage, this.gridData2.pageSize).then(() => {//数据加载成功

        this.gridData2.currentPage = newCurrentPage;
        this.oldPage = this.gridData2.currentPage-1
        console.log("4:  ",newCurrentPage)
        console.log("5:  ",this.gridData2.currentPage)
        console.log("6:  ",this.oldPage)

        if(this.gridData2.data.length <= newCurrentPage*this.gridData2.pageSize   ){
          this.gridData2.paged=true
        }else{
          this.gridData2.paged=false
        }

      }).catch(() => {//数据加载失败
        this.gridData2.currentPage = this.oldPage;
        console.log("7:  ",this.oldPage)
        console.log("8:  ",this.gridData2.currentPage)

      });
    },
    /**
     * 表格分页每页显示数量变化
     * @param {Integer} newPageSize 变化后的每页显示数量
     */
    onPageSizeChange (newPageSize) {
      console.log("hhhh2:  ",newPageSize )
      this.gridData2.pageSize = newPageSize;
      this.gridData2.currentPage = 1
      this.loadTableDataImpl2(1, newPageSize).then(() => {
        this.oldPage = this.gridData2.currentPage;
        this.oldPageSize = this.gridData2.pageSize;
      }).catch(e => {
        this.gridData2.currentPage = this.oldPage;
        this.gridData2.pageSize = this.oldPageSize;
      });
    },
    /**
     * 获取表格数据
     * @param {Integer} pageNum 当前分页
     * @param {Integer} pageSize 每页数量
     * @param {Boolean} reload 是否重新获取数据
     */
    loadTableDataImpl2 (pageNum, pageSize, reload = false) {
      console.log("11:  ",pageNum+"---"+pageSize+"---"+reload)
      // 判断是否需要重新加载数据
      if (reload || !this.gridData2.data || this.gridData2.data.length === 0) {
        // 调用后端接口或其他数据来源获取数据
        // 这里省略具体实现

        // 模拟一个返回结果的 Promise 对象
        const mockData = new Promise(resolve => {
          const data = [];
          for (let i = 1; i <= pageSize; i++) {
            data.push({
              id: pageNum * pageSize + i,
              name: `任务${pageNum * pageSize + i}`,
              status: Math.floor(Math.random() * 4)
            });
          }

          resolve(data);
        });
        // 返回 Promise 对象，以便分页组件可以在数据加载完成后进行下一步处理。
        return mockData.then(data => {
          // 更新任务列表数据
          this.gridData2.data = data;
          // 返回新的任务列表数据
          return this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
        });
      } else {// 直接返回已有的任务列表数据
        return Promise.resolve(this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
      }
    },

    refreshFormAllInstance (reloadData = false) {
      if (reloadData) {
        this.renwuliebiao.refreshTable(true, 1);
      } else {
        this.renwuliebiao.refreshTable();
      }
      if (!this.isInit) {
        // 初始化下拉数据
      }
      this.isInit = true;
    },

    onOperationSpaceClose () {
      this.showOperationSpace = false;
      this.currentFlowInstance = null;
      this.refreshFormAllInstance()
    },

    jumpToCurrent() {
      this.$router.push("/mainScreen")
    },
    getEarth(){
      // 获取DOM容器
      const chartContainer = document.getElementById('chart-earth');
      // 初始化ECharts图表
      this.myChart = echarts.init(chartContainer);
      var datas = [];
      console.log('this.taiyuanMapDatas :>> ', this.taiyuanMapData);
      for (let item in this.taiYuanMapData){
        var array = this.taiYuanMapData[item]
        let data = {
          value:[array[0],array[1],0],
          name:item
        }
        console.log('data :>> ', data);
        datas.push(data)

      }
      console.log('datas :>> ', datas);


      // 设置图表的配置项和数据
      const option = {
        backgroundColor: '#000',

        globe: {
          // zoom3D: 1000000000, // 调整为合适的初始缩放级别
          baseTexture:  require('../assets/img/earth.jpg'),
          heightTexture: require('../assets/img/bathymetry_bw_composite_4k.jpg'),
          displacementScale: 0.1,
          shading: 'lambert',
          environment: require('../assets/img/starfield.jpg'),
          viewControl: {
            distance: 1,  // 地球与相机之间的距离
            targetCoord: [112.548879, 37.87059],  // 设置地球的目标位置为太原市的经纬度
            autoRotate: false,  // 自动旋转地球

          },
          light: {
            ambient: {
              intensity: 0.1
            },
            main: {
              intensity: 1.5
            }
          },
          layers: [
            {
              type: 'blend',
              blendTo: 'emission',
              texture: require('../assets/img/night.jpg')
            },
            {
              type: 'overlay',
              texture:  require('../assets/img/clouds.png'),
              shading: 'lambert',
              distance: 5
            }
          ]
        },
        toolbox: {
          feature: {
            // dataZoom: { yAxisIndex: 'none' }, // 数据区域缩放
            restore: { show: true }, // 重置
            saveAsImage: { show: true }, // 导出图片
            myFull: { // 全屏
              show: true,
              title: '全屏',
              icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
              onclick: (e) => {// 全屏查看
                const element = document.getElementById('chart-earth');

                if (element.requestFullScreen) {
                  // HTML W3C 提议
                  console.log(1)
                  element.requestFullScreen()
                } else if (element.msRequestFullscreen) {
                  // IE11
                  console.log(2)
                  element.msRequestFullScreen()
                } else if (element.webkitRequestFullScreen) {
                  // Webkit (works in Safari5.1 and Chrome 15)
                  console.log(3)
                  element.webkitRequestFullScreen()
                } else if (element.mozRequestFullScreen) {
                  // Firefox (works in nightly)
                  console.log(4)
                  element.mozRequestFullScreen()
                }

                // 退出全屏
                if (element.requestFullScreen) {
                  document.exitFullscreen()
                } else if (element.msRequestFullScreen) {
                  document.msExitFullscreen()
                } else if (element.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen()
                } else if (element.mozRequestFullScreen) {
                  document.mozCancelFullScreen()
                }

              }
            }

          },
        },
        // xAxis: {
        //   type: 'value',
        //   min: 'dataMin',
        //   max: 'dataMax',
        //   splitLine: {
        //     show: true
        //   }
        // },
        // yAxis: {
        //   type: 'value',
        //   min: 'dataMin',
        //   max: 'dataMax',
        //   splitLine: {
        //     show: true
        //   }
        // },
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     show: true,
        //     xAxisIndex: [0],
        //     yAxisIndex: [0],
        //     start: 0,
        //     end: 100
        //   },
        //
        //   {
        //     type: 'inside',
        //     show: true,
        //     xAxisIndex: [0],
        //     yAxisIndex: [0],
        //     start: 0,
        //     end: 100
        //   },
        // ],
        series: [ {
          type: 'scatter3D',
          symbolSize: 10,
          coordinateSystem: 'globe',
          data: datas,
          itemStyle: {
            color: 'red'  // 设置标记点的颜色
          },
          label: {
            show: true,
            formatter: '{b}',  // 设置标记点的文本显示为数据的名称
            position: 'top'
          }
        }]
      };

      // echarts.chart.map._mapDataMap下能看到x,y以及基础basescale的设置信息，画的时候是适应你的节点的高宽，而不是去适应浏览器。适应浏览器是页面你定义的dom节点去做的。
      // this.myChart.map._map;
      // 使用配置项和数据显示图表
      this.myChart.setOption(option);


      window.onresize = this.myChart.resize;


    },
    // 获取单位名称
    getName(list, id) {
      var tmp =  list.find(k => k["value"] == id)
      return tmp["label"]
    },

    // 表格样式修改
    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;';
      }
    },
    viewMore(item){
      this.dialogType=1
      console.log('ckx debug  item', item )
      if(!item.subjects){
        return this.$message.warning('暂无课目信息')
      }
      item.subjects.forEach((childItem)=>{
        childItem.moreFlag=true
      })
      this.subjectItem= JSON.parse(JSON.stringify(item))
      this.dialogVisible=true

    },
    // 查看任务态势
    viewTaskSituation(item) {
      console.log("查看态势1",this.wholeOutTaskId)
      this.wholeOutTaskId = item.taskId;
      console.log("查看态势2",this.wholeOutTaskId)
      this.changeTask()
    },
    // 地图
    initechartsMap(){
      if(this.myChart1 !=null && this.myChart1  != "" && this.myChart1  != undefined){
        this.myChart1.dispose();
      }
      this.myChart1  = echarts.init(document.getElementById('mapData'),'dark');
      console.log("100",this)
      echarts.registerMap('taiyuan', uploadedDataURL);
      var chinaGeoCoordMap = this.taiYuanMapData
      var chinaDatas = this.taiYuanDatas
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = chinaGeoCoordMap[dataItem[0].name];
          var toCoord = [chinaDatas[0][0].longitude, chinaDatas[0][0].dimension];
          if (fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value,

            }, {
              coord: toCoord,

            }]);
          }
        }
        return res;
      };

      var series = [];
      // console.log('ckx debug chinaDatas ', this.taiYuanDatas, )
      [[chinaDatas[0][0].name, chinaDatas]].forEach(function(item, i) {
        console.log('debug asdfasd',item)
        series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 8, //图标大小
              // color:'#f00' // 箭头的颜色
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: .3, //尾迹线条曲直度
              }
            },

            data: convertData(item[1]),
          }, {

            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 8, //波纹圆环最大限制，值越大波纹越大,
              // color:'#f00',  // 波动的颜色
            },
            label: {
              normal: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: function(params) { //圆环显示文字
                  // return params.data.name;
                  return '';
                },
                fontSize: 13,
                color:'#DC1861',
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: function(val) {
              return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: '#f00'
              }
            },
            data: item[1].map(function(dataItem) {
              console.log('ckx debug  dataItem ', dataItem )
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                participatingSubjects: dataItem[0].participatingSubjects
              };
            }),
            tooltip: {
              trigger: 'item',
              backgroundColor: '#041937',
              textStyle: {
                color: "white" //设置文字颜色
              },
              borderColor: '#FFFFCC',
              showDelay: 0,
              hideDelay: 0,
              enterable: false,
              transitionDuration: 0,
              extraCssText: 'z-index:100',
              formatter: function(params, ticket, callback) {
                console.log('ckx debug  params', params,ticket )
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[params.seriesIndex + 1];
                if(name){
                  res = `
                                        <div style="background:#041937;;">
                                            <div style='color:#fff;'>单位名称：${name} </div>
                                            <div style='color:#fff; margin-top:4px;'>参与课目名称： ${params.data.participatingSubjects}  </div>
                                        </div>

                                    `
                  return res;
                }else {
                  return ''
                }

              },
              show:true,
            },
          },
          //被攻击点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              normal: {
                show: false,
                position: 'right',
                color: 'red',
                formatter: '{b}',
                textStyle: {
                  color: "red"
                }
              },
              emphasis: {
                show: false,
                color: "#f60"
              }
            },
            showSymbol: false,
            symbol: 'pin',
            symbolSize: 0,
            data: [{
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            }],
          }
        );
      });
      let option = {
        tooltip: {
          show:false,
        },
        backgroundColor: "transparent",
        visualMap: { //图例值控制
          show: false,
        },
        geo: {
          map: 'taiyuan',
          zoom: 1,
          label: {
            normal: {
              show: true,
              position: 'right',
              textStyle: {
                color: "#fff",
                fontSize: 10
              }
            },
            emphasis: {
              show: true,
              color:'#fff'
            }
          },
          roam: false, //是否允许缩放
          itemStyle: {
            normal: {
              color: '#153295', //地图背景色
              borderColor: '#516a89', //省市边界线00fcff 516a89
              borderWidth: 1
            },
            emphasis: {
              color: '#0068FB' //悬浮背景
            }
          }
        },
        series: series
      };
      if(option){
        console.log('111',option)
        // console.log('222',this.myChart1.get())
        console.log('112',this)
        this.myChart1.setOption(option)
      }
      let that =this
      window.addEventListener('resize',function () {//执行
        console.log('cuowu');
        that.myChart1.resize();
      })
    },

    conditionalSearch() {
      this.getTaskList()
      this.getItemUnits()
      this.getItemSystem()
    },

    // 获取任务列表
    async getTaskList(){
      let params={}

      if (this.currentYear !== null) {
        params["startTime"] = this.currentYear[0];
        params["endTime"] = this.currentYear[1];
      }
      if (this.unitTaskValue !== null) {
        params["unitId"] = this.unitTaskValue;
      }
      if (this.systemTaskId !== null) {
        params["systemId"] = this.systemTaskId;
      }
      const res = await request('/dt_screen/rest/v2/task/listHistoricTask/', '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.getUnitListByTaskId(data[0].taskId)
          // 获取任务的系统列表
          this.getSystemListByTaskId(data[0].taskId)
          // 获取地图的信息
          this.getMapDetail(data[0].taskId)
          // 获取任务的课目信息
          this.getSubjectList(data[0].taskId)
          // 获取任务的指令信息
          this.getinstructList(data[0].taskId)
          // 获取一个任务的课目数量
          // this.getTaskSubjectNum(data[0].taskId)
          // 获取某一个任务的全部课目状态占比
          // this.getAllSubjectDetail(data[0].taskId)
          // // 获取某个任务下单位参与与课目人员的的成绩统计
          // this.getUnitSubjectPeopleScore(data[0].taskId,this.unitSubGradeValue)
          // // 获取某个任务下单位参与与课目人员的的成绩分布
          // this.getUnitSubjectPeopleDistribution(data[0].taskId,this.unitSubGradeValue)

          // 获取全部任务成绩统计
          this.getAllTaskScore()
          // 获取全部任务成绩分布
          this.getAllTaskDistribution()

          // 建立指令websocket 链接
          this.initInstructWebsoket()
        }
      } else {
        this.$message.error(errorMessage)
      }
    },

    // 获取任务单位列表
    async getUnitListByTaskId(taskId) {
      let params={}

      if (taskId !== null) {
        params["taskId"] = taskId
        const res = await request('/dt_screen/rest/v2/task/listUnit/', 'post', params, false)
        const { errorCode, errorMessage, success,data } = res.data;
        if (success) {
          console.log("sgw debug", data);
          this.unitOptionForTask = data.map((item)=>{
            return {
              label:item.unitName,
              value: item.unitId
            }
          })
          this.unitSubGradeValue = this.unitOptionForTask[0].value
          // 获取某个任务下单位参与与课目人员的的成绩统计
          this.getUnitSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
          // 获取某个任务下单位参与与课目人员的的成绩分布
          this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
        }
      }
    },

    // 获取任务系统列表
    async getSystemListByTaskId(taskId) {
      let params={}

      if (taskId !== null) {
        params["taskId"] = taskId
        const res = await request('/dt_screen/rest/v2/task/listSystem/', 'post', params, false)
        const { errorCode, errorMessage, success,data } = res.data;
        if (success) {
          console.log("sgw debug", data);
          this.systemOptionForTask = data.map((item)=>{
            return {
              label:item.systemName,
              value: item.systemId
            }
          })
          this.systemSubGradeValue = this.systemOptionForTask[0].value
        }
      }
    },

    // 切换任务
    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.getUnitListByTaskId(this.wholeOutTaskId)
      // 获取任务的系统列表
      this.getSystemListByTaskId(this.wholeOutTaskId)
      // 获取地图的信息
      this.getMapDetail(this.wholeOutTaskId)
      // 获取任务的课目信息
      this.getSubjectList(this.wholeOutTaskId)
      // 获取任务的指令信息
      this.getinstructList(this.wholeOutTaskId)
      // 获取一个任务的课目数量
      // this.getTaskSubjectNum(this.wholeOutTaskId)
      // 获取某一个任务的全部课目状态占比
      // this.getAllSubjectDetail(this.wholeOutTaskId)
      // 获取某个任务下单位参与与课目人员的的成绩统计
      this.getUnitSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
      // 获取某个任务下单位参与与课目人员的的成绩分布
      this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)

      // 建立指令websocket 链接
      this.initInstructWebsoket()
      console.log('this.taiYuanMapData :>> ', this.taiYuanMapData);
    },

    // 获取任务地图的信息
    async getMapDetail(taskId){
      let params={
        taskId: taskId
      }
      // const res = await request(`/dt_screen/rest/v1/participatingUnit/list/${taskId}`, 'get', params, false)
      const res = await request(`/dt_screen/rest/v2/task/listParticipatingUnit`, 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取地图的信息', data);
        if(data.length){
          // this.taiYuanMapData={}
          data.forEach((item)=>{
            // item.participatingSubjects= item.participatingSubjects
            this.taiYuanMapData[item.participantUnitName]=[item.longitude,item.dimension]
            this.taiYuanDatas.push([
              {
                value:0,
                name:item.participantUnitName,
                // participatingSubjects: item.participatingSubjects,
                dimension: item.dimension,
                longitude: item.longitude
              }
            ])
          })
          console.log("666",echarts.version);
          console.log("667",this);
          // this.initechartsMap()
          this.echartMapFlag=false
        }else{
          this.echartMapFlag=true
        }

      } else {
        this.$message.error(errorMessage)
      }
    },

    // 获取一个任务的课目数量
    // async getTaskSubjectNum(taskId){
    //   let params={}
    //   const res = await request(`/dt_screen/rest/v1/subject/subjectNum/task/${taskId}/`, 'get', params, false)
    //   const { errorCode, errorMessage, success,data } = res.data;
    //   if (success) {
    //     console.log('获取一个任务的课目数量', data);
    //     this.subjectNumbers=data
    //
    //   } else {
    //     this.$message.error(errorMessage)
    //   }
    // },

    // 获取任务的课目信息
    async getSubjectList(taskId){
      let params={}
      params["taskId"] = taskId;
      if (this.unitTaskValue !== null) {
        params["unitId"] = this.unitTaskValue;
      }
      if (this.systemTaskId !== null) {
        params["systemId"] = this.systemTaskId;
      }
      const res = await request(`/dt_screen/rest/v2/subject/listByCondition`, 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取任务的课目信息', data);
        this.subjectDatas=data
        this.subjectNumbers=data.length
        let statusData1 = {
          name: "待执行",
          value: this.subjectDatas.reduce((acc, obj) => {
            if (obj.status == "待执行") {
              return acc + 1;
            } else {
              return acc;
            }
          }, 0),
        };
        let statusData2 = {
          name: "执行中",
          value: this.subjectDatas.reduce((acc, obj) => {
            if (obj.status == "执行中") {
              return acc + 1;
            } else {
              return acc;
            }
          }, 0),
        };
        let statusData3 = {
          name: "已完成",
          value: this.subjectDatas.reduce((acc, obj) => {
            if (obj.status == "已完成") {
              return acc + 1;
            } else {
              return acc;
            }
          }, 0),
        };
        let allTaskStatusData = [];
        allTaskStatusData.push(statusData1);
        allTaskStatusData.push(statusData2);
        allTaskStatusData.push(statusData3);
        this.initEchartsSubjectStatus(allTaskStatusData)
      } 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) {
        console.log('获取任务的课目信息', data);
        this.subjectDatas=data

      } else {
        this.$message.error(errorMessage)
      }
    },
    // unitSubjectValue ,unitSubjectValue
    changeTaskAndUnit() {
      this.systemSubjectId=''
      if(this.unitSubjectValue){
        this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue)
      }else {
        this.getSubjectList(this.wholeOutTaskId)
      }
    },
    changeTaskSystem(){
      console.log('ckx debug this.systemTaskId ', this.systemTaskId )
      this.getTaskList()

    },
    changeTaskUnit(){
      console.log('ckx debug this.unitTaskValue ', this.unitTaskValue )
      this.getTaskList()
    },
    // 切换年度
    changeYear(){
      console.log('ckx debug this.currentYear ', this.currentYear )
      this.getTaskList()
    },

    // 切换系统再结合任务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) {
        console.log('获取任务的课目信息', data);
        this.subjectDatas=data

      } else {
        this.$message.error(errorMessage)
      }
    },
    // unitSubjectValue ,unitSubjectValue
    changeTaskAndSystem() {
      this.unitSubjectValue=''
      if(this.systemSubjectId){
        this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId)
      }else {
        this.getSubjectList(this.wholeOutTaskId)
      }
    },

    // 获取任务的指令
    async getinstructList (taskId) {
      let params={}
      const res = await request(`/dt_screen/rest/v2/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.name, item.situation, item.content, item.system,item.time])
        })
        this.scrollTableConfig.data=tempData
        this.updatekey=new Date().getTime()

      } 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.getAllTaskDetail()
        // // 获取全部任务成绩统计
        // this.getAllTaskScore()
        // // 获取全部任务成绩分布
        // this.getAllTaskDistribution()
        // this.instructList=data
        // unitId,unitName
        this.unitOption = data.map((item)=>{
          return {
            label:item.unitName,
            value: item.unitId
          }
        })
        this.unitFinshedValue=this.unitOption[0].value
        // this.unitSubGradeValue=this.unitOption[0].value
        this.getItemUnits()
      } else {
        this.$message.error(errorMessage)
      }
    },

    // 切换某一个单位
    changeUnit(){
      console.log('ckx debug  this.unitFinshedValue ',  this.unitFinshedValue )
      this.getItemUnits()
    },

    // 获取全部系统
    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
        // this.systemSubGradeValue=this.systemOption[0].value
        this.getItemSystem()
      } else {
        this.$message.error(errorMessage)
      }
    },

    // 切换某一个系统
    changeSystem(){
      console.log('ckx debug  this.unitFinshedValue ',  this.unitFinshedValue )
      this.getItemSystem()
    },

    // 获取全部任务状态占比
    async getAllTaskDetail(){
      let params={}
      const res = await request('/dt_screen/rest/v1/statistics/taskStatus', 'get', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取全部任务状态占比', data);
        const { category, value  } = data
        let allTaskStatusData=[]
        if(category.length){
          category.forEach((item,index)=>{
            allTaskStatusData.push({
              name: item,
              value: value[index]
            })
          })
          this.initEchartsTaskStatus(allTaskStatusData)
          this.taskStatusFlag=false
        }else {
          this.taskStatusFlag=true
        }
      } else {
        this.$message.error(errorMessage)
      }
    },

    // 切换一个单位查看课目的分数
    changeunitSubGrade(){
      // this.unitSubGradeValue
      // 获取某个任务下单位参与与课目人员的的成绩统计
      this.getUnitSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
      // 获取某个任务下单位参与与课目人员的的成绩分布
      this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
    },
    // 切换一个系统查看课目的分数
    changeSystemSubGrade(){
      console.log('ckx debug systemSubGradeValue ', this.systemSubGradeValue )
      // 获取某个任务下单位参与与课目人员的的成绩统计
      this.getSystemSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
      // 获取某个任务下单位参与与课目人员的的成绩分布
      this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
    },

    // 获取某一个任务课目状态占比
    // async getAllSubjectDetail(taskId){
    //   let params={}
    //   const res = await request(`/dt_screen/rest/v1/statistics/${taskId}/subjectStatus`, 'get', params, false)
    //   const { errorCode, errorMessage, success,data } = res.data;
    //   if (success) {
    //     console.log('获取全部任务状态占比', data);
    //     const { category, value  } = data
    //     let allTaskStatusData=[]
    //     if(category.length){
    //       category.forEach((item,index)=>{
    //         allTaskStatusData.push({
    //           name: item,
    //           value: value[index]
    //         })
    //       })
    //       this.initEchartsSubjectStatus(allTaskStatusData)
    //     }
    //   } else {
    //     this.$message.error(errorMessage)
    //   }
    // },

    // 全部任务分数统计
    async getAllTaskScore(){
      let params={}
      params["taskIds"] = this.taskOPtion.map(item => item.value)
      console.log("sgw debug:", params);
      const res = await request('/dt_screen/rest/v2/statistics/taskScore', 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('全部任务分数统计', data);
        const { category, value  } = data
        value.forEach(item=>Number(item))
        this.initEchartsgradeStatistics(category, value)

      } else {
        this.$message.error(errorMessage)
      }
    },

    // 获取某个任务下单位参与与课目人员的的成绩统计
    async getUnitSubjectPeopleScore(taskId,unitId){
      let params={}
      const res = await request(`/dt_screen/rest/v1/statistics/${taskId}/unit/${unitId}/participantScore`, 'get', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('全部任务分数统计', data);
        const { category, value  } = data

        this.danweiweidu.danwei_name = category
        this.danweiweidu.danwei_grade = value

        value.forEach(item=>Number(item))
        if(category.length){
          this.participantScoreFlag=false
        }else {
          this.participantScoreFlag=true
        }
        this.updatekeyOther=new Date().getTime()

        // console.log("name and grade: ", this.danweiweidu.danwei_name,this.danweiweidu.danwei_grade)
        this.danweiweidu.length=value.length
        this.danweiweidu.totalPage= (value.length)/(this.danweiweidu.pageSize)
        this.danweiweidu.totalPage=Math.ceil(this.danweiweidu.totalPage);
        console.log("数据量，页面数据量，当前页面,页面数",value.length,this.danweiweidu.pageSize,this.danweiweidu.currentPage,this.danweiweidu.totalPage)
        // this.initEchartsSubjectGradeStatistics(category, value)
        this.updateChart();
      } else {
        this.$message.error(errorMessage)
      }
    },
    previousPage() {
      console.log("向前",this.danweiweidu.currentPage)
      if (this.danweiweidu.currentPage > 1) {
        this.danweiweidu.currentPage--;
        this.updateChart();
      }
    },
    nextPage() {
      console.log("向后",this.danweiweidu.currentPage)
      if (this.danweiweidu.currentPage < this.danweiweidu.totalPage) {
        this.danweiweidu.currentPage++;
        this.updateChart();
      }
    },
    updateChart() {
      const start = (this.danweiweidu.currentPage - 1) * this.danweiweidu.pageSize;
      const end = start + this.danweiweidu.pageSize;
      // 获取当前页需要显示的数据
      // const pageData = this.value.slice(start, end);
      const pageData1 = this.danweiweidu.danwei_name.slice(start, end);
      const pageData2 = this.danweiweidu.danwei_grade.slice(start, end);
      // 更新echarts的data选项，设置为当前页的数据
      console.log("数据",pageData1, pageData2)
      this.initEchartsSubjectGradeStatistics(pageData1, pageData2)
    },

    onCurrentPageChange_grade (newCurrentPage) {
      this.danweiweidu.currentPage=newCurrentPage
      console.log("1:  ",newCurrentPage )//当前页面
      console.log("2:  ",this.danweiweidu.pageSize )
      console.log("3:  ",this.oldPage)
      this.updateChart()
    },
    /**
     * 表格分页每页显示数量变化
     * @param {Integer} newPageSize 变化后的每页显示数量
     */
    onPageSizeChange_grade (newPageSize) {
      console.log("hhhh2:  ",newPageSize )
      this.danweiweidu.pageSize = newPageSize;
      this.danweiweidu.currentPage = 1
      this.updateChart()

    },

    // 获取全部任务分布
    async getAllTaskDistribution(){
      let params={}
      params["taskIds"] = this.taskOPtion.map(item => item.value)
      const res = await request('/dt_screen/rest/v2/statistics/taskScore/distribution', 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取全部任务成绩分布', data);
        const { category, value  } = data
        let alldistributionData=[]
        if(category.length){
          category.forEach((item,index)=>{
            alldistributionData.push({
              name: item,
              value: value[index]
            })
          })
          this.initEchartsgradeDistribute(alldistributionData)
        }

      } else {
        this.$message.error(errorMessage)
      }
    },

    // 获取某个任务下单位参与与课目人员的的成绩分布
    async getUnitSubjectPeopleDistribution(taskId,unitId){
      let params={}
      const res = await request(`/dt_screen/rest/v1/statistics/${taskId}/unit/${unitId}/participantScore/distribution`, 'get', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取某个任务下单位参与与课目人员的的成绩分布', data);
        const { category, value  } = data
        let alldistributionData=[]
        if(category.length){
          category.forEach((item,index)=>{
            alldistributionData.push({
              name: item,
              value: value[index]
            })
          })
          this.initEchartsSubjectgradeDistribute(alldistributionData)
        }
      } else {
        this.$message.error(errorMessage)
      }
    },

    // 获取某一个单位的任务完成率
    async getItemUnits(){
      let params={}
      if (this.currentYear !== null) {
        params["startTime"] = this.currentYear[0];
        params["endTime"] = this.currentYear[1];
      }
      if (this.unitTaskValue !== '') {
        console.log("sgw debug conditionUnit", this.unitTaskValue);
        params["unitId"] = this.unitTaskValue;
      } else {
        console.log("sgw debug selectUnit", this.unitFinshedValue);
        params["unitId"] = this.unitFinshedValue
      }


      const res = await request(`/dt_screen/rest/v2/statistics/unit/completionRate`, 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取某一个单位的任务完成率', data);
        const { category, value  } = data
        let alldistributionData=[]
        if (category != null) {
          if(category.length){
            category.forEach((item,index)=>{
              alldistributionData.push({
                name: item,
                value: value[index]
              })
            })
            let precentData='无数据'
            let isFinshedIndex = category.findIndex( item => item=='已完成')
            if(isFinshedIndex != -1){
              let isFinshedData = value[isFinshedIndex]
              var totalData = value.reduce(function(a, b) {
                return Number(a) + Number(b);
              });
              if(totalData==0){
                precentData='无数据'
              }else {
                precentData= Number((Number(isFinshedData)/ Number(totalData))*100)
                precentData=  precentData % 10 ==0 ?  precentData +'%' : Number(precentData).toFixed(1)+'%'
              }
            }
            this.initEchartsTaskPrecent(alldistributionData,precentData)
            this.completionRate=false
          }else {
            this.completionRate=true
          }
        } else {
          this.completionRate = true;
        }
      } else {
        this.$message.error(errorMessage)
      }
    },

    // 获取某一个系统的任务完成率
    async getItemSystem(){
      let params={}
      if (this.currentYear !== null) {
        params["startTime"] = this.currentYear[0];
        params["endTime"] = this.currentYear[1];
      }
      if (this.systemTaskId !== '') {
        params["systemId"] = this.systemTaskId;
      } else {
        params["systemId"] = this.systemFinshedValue
      }
      const res = await request(`/dt_screen/rest/v2/statistics/system/completionRate`, 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取某一个系统的任务完成率', data);
        const { category, value  } = data
        let alldistributionData=[]
        if(category.length){
          category.forEach((item,index)=>{
            alldistributionData.push({
              name: item,
              value: value[index]
            })
          })
          let precentData='无数据'
          let isFinshedIndex = category.findIndex( item => item=='已完成')
          if(isFinshedIndex != -1){
            let isFinshedData = value[isFinshedIndex]
            var totalData = value.reduce(function(a, b) {
              return Number(a) + Number(b);
            });
            if(totalData==0){
              precentData='无数据'
            }else {
              precentData= Number((Number(isFinshedData)/ Number(totalData))*100)
              precentData=  precentData % 10 ==0 ?  precentData +'%' : Number(precentData).toFixed(1)+'%'
            }
          }
          this.initEchartsTaskPreSystem(alldistributionData,precentData)
          this.systemcompletionRate=false
        }else {
          this.systemcompletionRate=true
        }

      } else {
        this.$message.error(errorMessage)
      }
    },

    // 全部任务状态占比
    initEchartsTaskStatus(allTaskStatusData){
      if(this.myChart2 !=null && this.myChart2  != "" && this.myChart2  != undefined){
        this.myChart2.dispose();
      }
      this.myChart2  = echarts.init(document.getElementById('taskStatus'));
      var option = {
        tooltip: {
          trigger: "item",
          confine: true,
          textStyle: {
            fontSize: 11 // 字体大小
          },
        },
        legend: {//显示图例
          show: true,
          y:'92%',
          itemHeight: 10,
          itemWidth: 10,
          textStyle:{
            fontSize: 12,//字体大小
            color: '#37D3F3'//字体颜色
          },
        },
        grid: {
          top:'160',
          left: '0',
          right: '0',
          bottom:'-20',
          containLabel: true
        },
        series: [
          {
            name: '任务状态占比',
            type: 'pie',
            radius: [0, 70],
            center: ['50%', '50%'],


            label: {
              normal: {
                fontSize: 14,
                color:'#fff',
                fontFamily:'YouSheBiaoTiHei',
                formatter: (params) => {
                  // console.log(params);
                  //只有“直接访问”使用大标签，其他都使用小标签
                  return  params.data.name
                },
              },
            },
            itemStyle: {
              borderRadius: 8,
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#377FE3',
                    '#47D2F4',
                    '#0BBC84',
                  ];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: allTaskStatusData,

          }
        ]
      };
      this.myChart2.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        that.myChart2.resize();
      })
    },

    // 单位任务完成率
    initEchartsTaskPrecent(alldistributionData,precent){
      if(this.myChart3 !=null && this.myChart3  != "" && this.myChart3  != undefined){
        this.myChart3.dispose();
      }
      this.myChart3  = echarts.init(document.getElementById('taskPrecent'));
      var data1 = alldistributionData
      var colorList = ['#296DE0','#47D2F4','#08B389'];
      var option = {
        title: {
          text: '',
          top: '39%',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: '600',
          },
          subtext: precent,
          subtextStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '400',
            fontFamily: 'YouSheBiaoTiHei'
          },
        },
        grid: {
          top:'80',
          left: '0',
          right: '0',
          bottom:'0',
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          confine: true,
          textStyle: {
            fontSize: 11 // 字体大小
          },
        },
        legend: {
          show: true,
          // x:'78%',
          y:'92%',
          itemHeight: 10,
          itemWidth: 10,
          textStyle:{
            fontSize: 12,//字体大小
            color: '#37D3F3',//字体颜色
            marginTop:'14px'
          },
          // orient: 'vertical',
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['42%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: data1,
          },
        ],
      };

      this.myChart3.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        that.myChart3.resize();
      })
    },

    // 系统任务完成率
    initEchartsTaskPreSystem(alldistributionData,precentData){
      if(this.myChart4 !=null && this.myChart4  != "" && this.myChart4  != undefined){
        this.myChart4.dispose();
      }

      if(document.getElementById('taskPrecentSystem')){
        this.myChart4  = echarts.init(document.getElementById('taskPrecentSystem'));
      }

      var data1 = alldistributionData
      var colorList = ['#296DE0','#47D2F4','#08B389'];
      var option = {
        title: {
          text: '',
          top: '39%',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: '600',
          },
          subtext: precentData,
          subtextStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '400',
            fontFamily: 'YouSheBiaoTiHei'
          },
        },
        grid: {
          top:'80',
          left: '0',
          right: '0',
          bottom:'0',
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          confine: true,
          textStyle: {
            fontSize: 11 // 字体大小
          },
        },
        legend: {
          show: true,
          y:'92%',
          itemHeight: 10,
          itemWidth: 10,
          textStyle:{
            fontSize: 12,//字体大小
            color: '#37D3F3',//字体颜色
            marginBottom:'12px'
          },
          // orient: 'vertical',
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['43%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: data1,
          },
        ],
      };

      this.myChart4.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        that.myChart4.resize();
      })
    },

    // 全部任务分数分布
    initEchartsgradeDistribute(chartData){
      if(this.myChart5 !=null && this.myChart5  != "" && this.myChart5  != undefined){
        this.myChart5.dispose();
      }
      this.myChart5  = echarts.init(document.getElementById('gradeDistribute'));
      var option = {
        xAxis: {
          type: 'category',
          splitLine: {
            show:false
          },
          axisLine: {
            //  改变x轴颜色
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          },
          axisLabel: {
            //  改变x轴字体颜色和大小
            show: true,
            textStyle: {
              color: 'AEE6FC',
              fontSize: 12,
            },
          },
        },
        grid: {
          top:'70',
          left: '5',
          right: '15',
          bottom:'20',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show:false
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#AEE6FC",
              fontSize:12
            }
          },
          minInterval:1
        },
        series: [
          {
            symbolSize: (params) => {
              let markSize = Math.sqrt(params[1]) * 3;
              markSize = markSize < 12 ? 12 : markSize;
              return markSize;
            },
            symbol: 'circle',
            data: ((data) => {
              var arr = [];
              data.forEach((items) => {
                var itemName = items.name;
                var itemValue = items.value;
                var itemStyle = 15;
                var itemTitle = items.title;
                arr.push([itemName, itemValue, itemStyle, itemTitle]);
              });
              return arr;
            })(chartData),
            type: 'scatter',
            itemStyle: {
              normal: {
                color: '#FFF8A5',
              },
            },
          },
        ]
      };

      this.myChart5.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        console.log('ckx debug that.myChart5 ', )
        that.myChart5.resize();
      })
    },

    // 获取某个任务下单位参与与课目人员的的成绩分布
    initEchartsSubjectgradeDistribute(chartData){
      if(this.myChart9 !=null && this.myChart9  != "" && this.myChart9  != undefined){
        this.myChart9.dispose();
      }
      this.myChart9  = echarts.init(document.getElementById('subjectGradeDistribute'));
      var option = {
        xAxis: {
          type: 'category',
          splitLine: {
            show:false
          },
          axisLine: {
            //  改变x轴颜色
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          },
          axisLabel: {
            //  改变x轴字体颜色和大小
            show: true,
            textStyle: {
              color: 'AEE6FC',
              fontSize: 12,
            },
            rotate:'25'
          },
        },
        grid: {
          top:'10',
          left: '15',
          right: '15',
          bottom:'55',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show:false
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#AEE6FC",
              fontSize:12
            }
          },
          minInterval:1
        },
        series: [
          {
            symbolSize: (params) => {
              // let markSize = Math.sqrt(params[1]) * 3;
              // markSize = markSize < 12 ? 12 : markSize;
              let markSize = 12;
              return markSize;
            },
            symbol: 'circle',
            data: ((data) => {
              var arr = [];
              data.forEach((items) => {
                var itemName = items.name;
                var itemValue = items.value;
                var itemStyle = 15;
                var itemTitle = items.title;
                arr.push([itemName, itemValue, itemStyle, itemTitle]);
              });
              return arr;
            })(chartData),

            type: 'scatter',
            label: {
              show: true, // 是否显示标签
              formatter: function(params) { // 标签内容的格式化模板
                return  params.value[1]; // 数值显示格式示例
              },
              position: 'right', // 标签位置，可以设置为 'top'、'bottom'、'left'、'right' 或具体的像素值
              fontSize: 10, // 标签字体大小
              color: '#55d2c3', // 标签字体颜色
              // backgroundColor: '#fff', // 标签背景色
              // borderColor: '#999', // 标签边框颜色
              // borderWidth: 1, // 标签边框宽度
              // borderRadius: 4 // 标签边框圆角半径
            },
            itemStyle: {
              normal: {
                color: '#FFF8A5',
              },
            },
          },
        ]
      };

      this.myChart9.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        console.log('ckx debug that.myChart5 ', )
        that.myChart9.resize();
      })
    },

    // 全部任务分数统计
    initEchartsgradeStatistics(category, value){
      if(this.myChart6 !=null && this.myChart6  != "" && this.myChart6  != undefined){
        this.myChart6.dispose();
      }
      this.myChart6  = echarts.init(document.getElementById('gradeStatistics'));

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            fontSize: 11 // 字体大小
          },
          confine: true
        },
        grid: {
          top:'70',
          left: '5',
          right: '0',
          bottom:'20',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: category,
          splitLine:{
            show:false
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#AEE6FC",
              fontSize:12
            },
            rotate: "15"
          },
          axisLine: { //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          },
        },
        yAxis: {
          type: 'value',
          splitLine:{
            show:false
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#AEE6FC",
              fontSize:12
            }
          },
          axisLine: { //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          },
          minInterval:1
        },
        series: [
          {
            data: value,
            type: 'bar',
            barWidth: 30,
            itemStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#47F3E7' // 0% 处的颜色
                }, {
                  offset: 1, color: '#22E3CA' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }

            }
          }
        ]
      };
      this.myChart6.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        that.myChart6.resize();
        that.myChart5.resize();

      })
    },

    // 获取某个任务下单位参与与课目人员的的成绩统计
    initEchartsSubjectGradeStatistics(category, value){
      if(this.myChart8 !=null && this.myChart8  != "" && this.myChart8  != undefined){
        this.myChart8.dispose();
      }
      this.myChart8  = echarts.init(document.getElementById('subjectGradeStatistics'));

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            fontSize: 11 // 字体大小
          },
          confine: true
        },
        grid: {
          top:'20',
          left: '5',
          right: '15',
          bottom:'53',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: category,
          splitLine:{
            show:false
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#AEE6FC",
              fontSize:8
            },
            rotate:'25'
          },
          axisLine: { //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine:{
            show:false
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#AEE6FC",
              fontSize:10
            }
          },
          axisLine: { //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#AEE6FC",
            }
          },
          minInterval:1
        },
        series: [
          {
            data: value,
            type: 'bar',
            barWidth: 14,
            itemStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#47F3E7' // 0% 处的颜色
                }, {
                  offset: 1, color: '#22E3CA' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }

            }
          }
        ]
      };
      // console.log("11",value.length)
      // console.log("22",option.series[0].barWidth)//14
      // console.log("33",option.xAxis.axisLabel.textStyle.fontSize)//8

      // 修改柱状图的宽度和字体大小
      if(value.length>15){
        option.series[0].barWidth = 12; // 修改柱状图的宽度为20像素
        option.xAxis.axisLabel.textStyle.fontSize = 6; // 修改x轴标签的字体大小为12像素
      }

      // console.log("44",value.length)
      // console.log("55",option.series[0].barWidth)//14
      // console.log("66",option.xAxis.axisLabel.textStyle.fontSize)//8
      this.myChart8.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        that.myChart8.resize();
      })
    },

    // 某个任务全部课目状态占比
    initEchartsSubjectStatus(allTaskStatusData){
      if(this.myChart7 !=null && this.myChart7  != "" && this.myChart7  != undefined){
        this.myChart7.dispose();
      }
      var data1 = allTaskStatusData
      var colorList = ['#296DE0','#47D2F4','#08B389'];
      this.myChart7  = echarts.init(document.getElementById('subjectStatus'));
      var option = {
        title: {
          text: '',
          top: '39%',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: '600',
          },
          subtext: '',
          subtextStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '400',
            fontFamily: 'YouSheBiaoTiHei'
          },
        },
        grid: {
          containLabel: true,
          top:'140',
          left: '0',
          right: '0',
          bottom:'-20',
        },
        tooltip: {
          trigger: "item",
          confine: true,
          textStyle: {
            fontSize: 11 // 字体大小
          },
        },
        legend: {
          show: true,
          y:'91%',
          itemHeight: 8,
          itemWidth: 8,
          textStyle:{
            fontSize: 10,//字体大小
            color: '#37D3F3',//字体颜色
            marginTop:'12px'
          },


        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: data1,
          },
        ],
      };
      this.myChart7.setOption(option);
      let that =this
      window.addEventListener('resize',function () {//执行
        that.myChart7.resize();
      })
    },

    // 建立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
      this.gridData2.data=subjectScore
      this.gridData2.length=this.gridData2.data.length
    },
    // 全屏事件
    showFull(id){
      // 获取想要展示全屏的元素
      let elem = document.querySelector(`#${id}`);
      this.requestFullScreen(elem);
    },
    // 退出全屏
    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({
          path:"/historicTaskScreen",
          query:{
            key1:this.wholeOutTaskId,
          }
        });
      }
    },

    // 初始化视频
    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)
    }
  },
  mounted(){
    let that= this

    // 获取全部单位
    this.getAllUnits()
    // 获取全部系统
    this.getAllSystems()
    // 建立任务的weksocket链接
    this.initWebsoket()

    setTimeout(() => {
      this.getEarth();
    }, 3000);
  },
  beforeDestroy() {
    if(this.playerList.length){
      this.playerList.forEach((item)=>{
        item.dispose()
      })
    }
  },
}
</script>