|
|
@@ -0,0 +1,2594 @@
|
|
|
+<template>
|
|
|
+ <v-scale-screen width="2200" height="1080">
|
|
|
+ <div class="task_screen_cotainer" >
|
|
|
+ <div class="task_header">「{{ currentTaskName }}」任务态势大屏</div>
|
|
|
+ <div class="content_cotainer">
|
|
|
+ <div v-if="false" 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 v-if="false" class="header_line_style">
|
|
|
+ <div class="headerTitle"></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
|
|
|
+ <!-- 任务屏幕 -->
|
|
|
+ <div class="task_item_header">
|
|
|
+
|
|
|
+ <!-- <el-select-->
|
|
|
+ <!-- v-model="wholeOutTaskId"-->
|
|
|
+ <!-- placeholder="「切换任务」"-->
|
|
|
+ <!-- style="width:270px;"-->
|
|
|
+ <!-- @change="changeTask"-->
|
|
|
+ <!-- filterable-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <el-option-->
|
|
|
+ <!-- v-for="item in taskOPtion"-->
|
|
|
+ <!-- :key="item.value"-->
|
|
|
+ <!-- :label="item.label"-->
|
|
|
+ <!-- :value="item.value"-->
|
|
|
+
|
|
|
+ <!-- >-->
|
|
|
+ <!-- </el-option>-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+ <el-image
|
|
|
+ @click="showMoreInfo('more')"
|
|
|
+ class="showLessStyle"
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
|
|
|
+ :src="require('../assets/img/small.svg')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <el-image
|
|
|
+ v-if="false"
|
|
|
+ @click="showMoreInfo('less')"
|
|
|
+ :src="require('../assets/img/iconMore.svg')"
|
|
|
+ fit="contain"
|
|
|
+ class="showLessStyle"
|
|
|
+ style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class="task_header_top">
|
|
|
+ <div class="subject_task_item">
|
|
|
+ <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="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
|
|
|
+ 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" v-if="currentTaskGrade">
|
|
|
+ <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('mapData')"
|
|
|
+ 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 class="center_no_data" v-if="false">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px; margin-right:6px;"
|
|
|
+ :src="require('../assets/img/build.png')"
|
|
|
+ fit="contain"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <div>系统正在建设中，敬请期待～</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="false" 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 v-if="false" 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="300px"
|
|
|
+ >
|
|
|
+ <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="gridData"
|
|
|
+ :header-cell-style="changeHeaderCellStyle"
|
|
|
+ :cell-style="changeCellStyle"
|
|
|
+ stripe
|
|
|
+ :border="true"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" property="participantName" label="姓名" max-width="350"></el-table-column>
|
|
|
+ <el-table-column align="center" property="score" label="成绩" max-width="300"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dialog_footer_box">
|
|
|
+ <div class="view_more" @click="dialogVisible=false" style="color:#fff; padding: 3px 30px ;">
|
|
|
+ 关闭
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-scale-screen>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import myFlylineChartEnhanced from '../components/my-flyline-chart-enhanced/index'
|
|
|
+import myscrollBoard from '../components/myscroll-board/src/main'
|
|
|
+import sacleBox from '../components/sacle-box/index'
|
|
|
+import { request } from '../utils/request';
|
|
|
+var uploadedDataURL = require('../../public/json/taiyuan.json')
|
|
|
+import './taskScreen.css'
|
|
|
+import Videojs from "video.js"; // 引入Videojs
|
|
|
+
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ myFlylineChartEnhanced,
|
|
|
+ sacleBox,
|
|
|
+ myscrollBoard
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ systemTaskId:'',
|
|
|
+ unitTaskValue:'',
|
|
|
+ systemFinshedValue:'',
|
|
|
+ unitFinshedValue:'',
|
|
|
+ wholeOutTaskId:'',
|
|
|
+ systemSubjectId:'',
|
|
|
+ unitSubjectValue:'',
|
|
|
+ subjectItem:{},
|
|
|
+ moreFlag:true,
|
|
|
+ dialogVisible:false,
|
|
|
+ taskList:[],
|
|
|
+ websocket: null, //建立的连接
|
|
|
+ websocketOrder: null, //建立的连接
|
|
|
+
|
|
|
+ updatekey:'1',
|
|
|
+ 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:[],
|
|
|
+ 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:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ // 获取单位名称
|
|
|
+ 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) {
|
|
|
+ this.wholeOutTaskId = item.taskId;
|
|
|
+ this.changeTask()
|
|
|
+ },
|
|
|
+ // 地图
|
|
|
+ initechartsMap(){
|
|
|
+ if(this.myChart1 !=null && this.myChart1 != "" && this.myChart1 != undefined){
|
|
|
+ this.myChart1.dispose();
|
|
|
+ }
|
|
|
+ this.myChart1 = echarts.init(document.getElementById('mapData'),'dark');
|
|
|
+ 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
|
|
|
+ };
|
|
|
+
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取任务地图的信息
|
|
|
+ async getMapDetail(taskId){
|
|
|
+ let params={}
|
|
|
+ const res = await request(`/dt_screen/rest/v1/participatingUnit/list/${taskId}`, 'get', 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
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ })
|
|
|
+ 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
|
|
|
+
|
|
|
+ } 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/v1/order/list/${taskId}`, 'get', params, false)
|
|
|
+ const { errorCode, errorMessage, success,data } = res.data;
|
|
|
+ if (success) {
|
|
|
+ console.log('获取任务的指令', data);
|
|
|
+ this.instructList=data
|
|
|
+ let tempData=[]
|
|
|
+
|
|
|
+ data.forEach((item)=>{
|
|
|
+ tempData.push([item.subjectName,item.content,item.time])
|
|
|
+ })
|
|
|
+ this.scrollTableConfig.data=tempData
|
|
|
+ this.updatekey=new Date().getTime()
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取全部单位
|
|
|
+ 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
|
|
|
+ value.forEach(item=>Number(item))
|
|
|
+ if(category.length){
|
|
|
+ this.participantScoreFlag=false
|
|
|
+ }else {
|
|
|
+ this.participantScoreFlag=true
|
|
|
+ }
|
|
|
+ this.updatekeyOther=new Date().getTime()
|
|
|
+ this.initEchartsSubjectGradeStatistics(category, value)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message.error(errorMessage)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取全部任务分布
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ 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.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:12
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ 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://43.143.221.128:8084/websocket/task');//这里将http替换成ws
|
|
|
+ switch (this.websocket.readyState) {
|
|
|
+ case 0:
|
|
|
+ console.log("正在连接");
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ console.log("已经链接并且可以通讯");
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ console.log("连接正在关闭");
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ console.log("连接已关闭或者没有链接成功");
|
|
|
+ break;
|
|
|
+ };
|
|
|
+ this.websocket.onopen = this.websocketsend;//websoket连接成功
|
|
|
+ this.websocket.onmessage =this. websocketonmessage;//websoket收到信息
|
|
|
+ this.websocket.onclose = this.websocketclose;//websoket连接关闭
|
|
|
+ },
|
|
|
+ websocketsend(){
|
|
|
+ console.log('ws 连接成功');
|
|
|
+ },
|
|
|
+ websocketonmessage(msg){
|
|
|
+ // 获取全部单位
|
|
|
+ this.getAllUnits()
|
|
|
+ // 获取全部系统
|
|
|
+ this.getAllSystems()
|
|
|
+ console.log('收到任务信息',msg);
|
|
|
+ },
|
|
|
+ websocketclose(){
|
|
|
+ console.log('ws 连接关闭');
|
|
|
+ this.initWebsoket();//重新建立连接
|
|
|
+ },
|
|
|
+
|
|
|
+ initInstructWebsoket(){
|
|
|
+ // 指令的ws
|
|
|
+ this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
|
|
|
+ switch (this.websocketOrder.readyState) {
|
|
|
+ case 0:
|
|
|
+ console.log("正在连接");
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ console.log("已经链接并且可以通讯");
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ console.log("连接正在关闭");
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ console.log("连接已关闭或者没有链接成功");
|
|
|
+ break;
|
|
|
+ };
|
|
|
+ this.websocketOrder.onopen = this.orderWebsocketsend;//websoket连接成功
|
|
|
+ this.websocketOrder.onmessage =this. orderWebsocketonmessage;//websoket收到信息
|
|
|
+ this.websocketOrder.onclose = this.orderWebsocketclose;//websoket连接关闭
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ orderWebsocketsend(){
|
|
|
+ console.log('ws 连接成功');
|
|
|
+ },
|
|
|
+ orderWebsocketonmessage(msg){
|
|
|
+ // 获取任务的指令信息
|
|
|
+ this.getinstructList(this.wholeOutTaskId)
|
|
|
+ console.log('收到指令信息',msg);
|
|
|
+ },
|
|
|
+ orderWebsocketclose(){
|
|
|
+ console.log('ws 连接关闭');
|
|
|
+ this.initInstructWebsoket();//重新建立连接
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看成绩表格
|
|
|
+ viewManData(item){
|
|
|
+ this.dialogType=2
|
|
|
+ this.dialogVisible=true
|
|
|
+ console.log('item',item);
|
|
|
+ const { subjectScore } = item
|
|
|
+ this.gridData=subjectScore
|
|
|
+ },
|
|
|
+ // 全屏事件
|
|
|
+ showFull(id){
|
|
|
+ // 获取想要展示全屏的元素
|
|
|
+ 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('/historicTaskScreen')
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化视频
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if(this.playerList.length){
|
|
|
+ this.playerList.forEach((item)=>{
|
|
|
+ item.dispose()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
