src/components/hk/hkCamara.vue

@@ -1,6 +1,7 @@
-<template>
-  <div class="video-player">
+<template id="divPlugin0">
+  <div id="divPlugin" class="video-player">
     <div id="divPlugin1" class="divPlugin"></div>
+
     <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
         </div> -->
     <!-- <div class="down" v-else>
@@ -42,6 +43,12 @@ export default {
     window.removeEventListener("resize", this.handleResize);
   },
   mounted() {
+
+    //浏览器界面大小
+    console.log("1: ",document.body.clientWidth ,document.body.clientHeight)
+    console.log("2: ",window.screen.height , window.devicePixelRatio,window.screen.height * window.devicePixelRatio)
+    console.log("3: ",window.screen.width , window.devicePixelRatio,window.screen.width * window.devicePixelRatio)
+
     this.videoInitPlugin();
   },
   destroyed() {
@@ -50,10 +57,20 @@ export default {
   methods: {
     handleResize() {
       this.zoom = window.devicePixelRatio;
+      let h
+      let w
+      if(document.body.clientWidth>=(document.body.clientHeight*2)){
+        h=document.body.clientHeight
+        w=document.body.clientHeight*2
+      }else{
+        h=document.body.clientWidth/2
+        w=document.body.clientWidth
+      }
+
       setTimeout(() => {
         WebVideoCtrl.I_Resize(
-          600 / (this.zoom / 1.25),
-          240 / (this.zoom / 1.25)
+          w/2.42,
+          h/3.2
         );
       }, 1000);
     },
@@ -79,10 +96,65 @@ export default {
       });
       console.log("🚀 初始化插件完成 >> ", that.g_iWndIndex);
       console.log("🚀 插入插件");
+      let h
+      let w
+      console.log("0: ",document.body.clientWidth ,document.body.clientHeight)
+      if(document.body.clientWidth>=(document.body.clientHeight*2)){
+        h=document.body.clientHeight
+        w=document.body.clientHeight*2
+      }else{
+        h=document.body.clientWidth/2
+        w=document.body.clientWidth
+      }
+
+      var s = "";
+      s += " 网页可见区域宽："+ document.body.clientWidth+"\n";
+      s += " 网页可见区域高："+ document.body.clientHeight+"\n";
+
+      s += " 网页可见区域宽："+ document.body.offsetWidth+" (包括边线和滚动条的宽)"+"\n";
+      s += " 网页可见区域高："+ document.body.offsetHeight+" (包括边线的宽)"+"\n";
+
+      s += " 网页正文全文宽："+ document.body.scrollWidth+"\n";
+      s += " 网页正文全文高："+ document.body.scrollHeight+"\n";
+
+      s += " 网页被卷去的高："+ document.body.scrollTop+"\n";
+      s += " 网页被卷去的左："+ document.body.scrollLeft+"\n";
+
+      s += " 网页正文部分上："+ window.screenTop+"\n";
+      s += " 网页正文部分左："+ window.screenLeft+"\n";
+
+      s += " 屏幕分辨率的高："+ window.screen.height+"\n";
+      s += " 屏幕分辨率的宽："+ window.screen.width+"\n";
+
+      s += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n";
+      s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n";;
+
+      s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";
+      s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n";
+
+      const divElement = document.querySelector('.map_more_box');
+      s += " 1你的屏幕设置是 "+divElement.clientWidth+"\n";//元素高度+内边距
+      s += " 2你的屏幕设置是 "+divElement.clientHeight+"\n";//元素高度+内边距+滚动条+边框
+      s += " 3你的屏幕设置是 "+divElement.offsetWidth+"\n";//元素内容高度（包括溢出不可见内容）
+      s += " 4你的屏幕设置是 "+divElement.clientHeight+"\n";//元素左上角相对父级左上角的偏移量
+      s += " 5你的屏幕设置是 "+divElement.scrollWidth+"\n";//元素内容高度（包括溢出不可见内容）
+      s += " 6你的屏幕设置是 "+divElement.scrollHeight+"\n";//元素左上角相对父级左上角的偏移量
+      console.log(s)
+
+      // let h1
+      // let w1
+      // w1=divElement.clientWidth
+      // h1=divElement.clientHeight
+
+      console.log("1: ",w ,h)
+      console.log("1: ", w/2.42, h/3.2)
+
+      // console.log("2: ",w1 ,h1)
+      // console.log("2: ",w1*0.8,h1*0.7)
       WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin1").then(() => {
         WebVideoCtrl.I_Resize(
-          600 / (this.zoom / 1.25),
-          240 / (this.zoom / 1.25)
+            w/2.42,
+            h/3.2
         ).then(() => {
           console.log("🚀 data >> ", that.companyVideoData);
           this.getLoginParams().then((res) => {

src/main.js

@@ -7,6 +7,9 @@ import "element-ui/lib/theme-chalk/index.css";
 import dataV from '@jiaminghi/data-view'
 import VScaleScreen from 'v-scale-screen'
 import "./plugins/video.js"; // 引入刚刚定义的video.js文件
+import * as echarts from 'echarts'
+
+Vue.prototype.$echarts = echarts
 
 Vue.use(VScaleScreen)
 Vue.use(dataV)

src/views/historicTaskScreen.css

@@ -0,0 +1,1098 @@
+.el-input__inner {
+    background-color: transparent;
+    height: 24px !important;
+    line-height: 24px !important;
+    color: #fff;
+    border: 1px solid #05ddf7;
+}
+.el-input__icon {
+    line-height: 24px;
+}
+.el-select-dropdown {
+    color: #fff;
+    border: 1px solid #05ddf7;
+    background-color: #041937;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+    background-color: transparent;
+    color: #fff;
+}
+.el-select-dropdown__item {
+    color: #fff;
+}
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover,
+.el-select .el-input.is-focus .el-input__inner {
+    border-color: #05ddf7;
+}
+.el-popper .popper__arrow {
+    display: none;
+}
+.el-select .el-input__inner:focus {
+    border-color: #05ddf7;
+}
+.el-select .el-input__inner:active {
+    border-color: #05ddf7;
+}
+.el-select .el-input__inner:hover {
+    border-color: #05ddf7;
+}
+.el-select .el-input .el-select__caret {
+    color: #05ddf7;
+}
+.el-select-dropdown__item.selected {
+    color: #05ddf7 !important;
+}
+.el-select:hover .el-input__inner {
+    border-color: #05ddf7 !important;
+}
+
+.el-dialog__header {
+    padding: 0px;
+}
+.el-dialog__footer {
+    padding: 0px;
+}
+.el-dialog__body {
+    padding: 0;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+    border-radius: 6px;
+}
+.el-dialog {
+    position: relative;
+    margin: 0 auto 50px;
+    /* background: #082D59; */
+    background: #082d59;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
+    width: 50%;
+}
+
+.el-date-editor .el-range-input {
+    background: transparent;
+    color: #fff;
+    font-size: 12px;
+}
+.el-date-editor .el-range-separator {
+    color: #fff;
+    line-height: 16px;
+    font-size: 12px;
+}
+.el-date-editor .el-range__icon {
+    line-height: 16px;
+    font-size: 12px;
+}
+.el-date-editor .el-range__close-icon {
+    font-size: 14px;
+    color: #05ddf7;
+    width: 25px;
+    display: inline-block;
+    float: right;
+    line-height: 16px;
+}
+.el-picker-panel {
+    color: #fff;
+    border: 1px solid #05ddf7;
+    background-color: #041937;
+}
+.el-date-table th {
+    color: #fff;
+    border-bottom: solid 1px #05ddf7;
+}
+.el-date-range-picker__content.is-left {
+    border-right: 1px solid #05ddf7;
+}
+
+.el-range-editor.el-input__inner:hover {
+    border-color: #05ddf7;
+}
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
+    background-color: #05ddf7;
+}
+.el-date-table td.end-date span,
+.el-date-table td.start-date span {
+    background-color: #041937;
+}
+.el-date-table td.today span {
+    color: #05ddf7;
+    font-weight: 700;
+}
+
+.el-date-table td.today span:hover {
+    color: #05ddf7;
+    font-weight: 700;
+}
+.el-picker-panel__icon-btn {
+    font-size: 12px;
+    color: #05ddf7;
+    border: 0;
+    background: 0 0;
+    cursor: pointer;
+    outline: 0;
+    margin-top: 8px;
+}
+
+.screen-wrapper {
+    /* margin: 0 !important; */
+}
+.el-dialog__wrapper {
+    z-index: 10000 !important;
+}
+.v-modal {
+    /* background: transparent !important; */
+    z-index: -1 !important;
+}
+
+.task_screen_cotainer_b {
+    background-image: url("../assets/img/bg.png");
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    padding: 108px 10px 10px 10px;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.dialog_map_box {
+    /* background-image:url('../assets/img/bg.jpg'); */
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    /* background-size:100% 100%; */
+    /* padding: 108px 10px 10px 10px; */
+    box-sizing: border-box;
+    position: relative;
+}
+
+.task_header_b {
+    color: #fff;
+    font-weight: 600;
+    font-size: 28px;
+    display: flex;
+    justify-content: center;
+    padding-top: 18px;
+    font-family: YouSheBiaoTiHei;
+    color: #ffffff;
+
+    position: absolute;
+    top: 31px;
+    left: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+}
+.tag {
+    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+    border-radius: 6px;
+    opacity: 1;
+    border: 3px solid;
+    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+
+    width: 100px;
+    height: 40px;
+    position: absolute;
+    top: 55px;
+    left: 1%;
+    right: 50%;
+    color: #FFFFFF;
+    font-weight: 550;
+    font-size: 20px;
+    text-align: center;
+    /*justify-content: center;*/
+    padding-top: 3px;
+    padding-bottom: 2px;
+    /*color: #FFF;*/
+
+    /*position: absolute;*/
+    /*top: 70px;*/
+    /*left: 3%;*/
+    /*right: 50%;*/
+    /*transform: translate(-50% , -50%);*/
+    /*white-space: nowrap;*/
+}
+.tag:hover{
+    cursor: pointer;
+}
+
+.task_name_header {
+    color: #fff;
+    font-weight: 600;
+    font-size: 22px;
+    font-family: YouSheBiaoTiHei;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 100;
+    top: -34px;
+}
+
+.content_cotainer_b {
+    display: flex;
+    justify-content: center;
+    /*margin: auto;*/
+    align-items: flex-start;
+    height: 100%;
+    width: 100%;
+
+}
+.task_base_info_table {
+    width: 420px;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    height: 100%;
+    margin-right: 10px;
+    position: relative;
+    z-index: 100;
+    overflow: hidden;
+
+    background-image: url("../assets/img/newleft.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 24px 24px 5px 24px;
+    box-sizing: border-box;
+}
+.center_chart_cotainer_b {
+    height: 100%;
+    /*margin-right: 10px;*/
+    width: calc(100% - 770px);
+
+}
+/*.center_chart_cotainer {*/
+/*    height: 100%;*/
+/*    margin-right: 10px;*/
+/*    width: 100%;*/
+/*}*/
+.center_chart_cotainer_task {
+    height: 100%;
+    /*margin-right: 10px;*/
+    width: 100%;
+}
+.task_chart_cotainer {
+    width: 350px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    height: 100%;
+    padding-bottom: 10px;
+
+    box-sizing: border-box;
+
+}
+.task_detail_cotainer_b {
+    width: 100%;
+    padding: 24px 10px 20px 10px;
+    box-sizing: border-box;
+    border: 1px solid #4f8bc7;
+    border-radius: 6px;
+    height: calc(100% - 250px);
+    position: relative;
+
+}
+/*.task_detail_cotainer {*/
+/*    width: 100%;*/
+/*    padding: 24px 10px 20px 10px;*/
+/*    box-sizing: border-box;*/
+/*    border: 1px solid #4f8bc7;*/
+/*    border-radius: 6px;*/
+/*    height: 100% ;*/
+/*    position: relative;*/
+/*}*/
+.task_detail_cotainer_task {
+    width: 100%;
+    padding: 24px 10px 20px 10px;
+    box-sizing: border-box;
+    border: 1px solid #4f8bc7;
+    border-radius: 6px;
+    height: 100%;
+    position: relative;
+}
+.task_detail_dialog {
+    width: 100%;
+    padding: 48px 20px 20px 20px;
+    box-sizing: border-box;
+    border: 1px solid #4f8bc7;
+    border-radius: 6px;
+    /*margin-top: 10px;*/
+    position: relative;
+}
+.inner_info_table {
+    opacity: 0.5;
+    background: linear-gradient(270deg, #10427b 0%, #031429 100%);
+    width: 100%;
+    height: 100%;
+    border: 1px solid #4f8bc7;
+    overflow: hidden;
+}
+.task_other_cotainer {
+    box-sizing: border-box;
+    border-radius: 6px;
+    height: 86vh;
+}
+.header_line_style {
+    height: 10px;
+    position: absolute;
+    top: -2px;
+    width: 100%;
+    left: 0;
+    right: 0;
+    border-radius: 6px;
+    background-image: linear-gradient(to right, #0674ef 0%, #45fec1 100%);
+}
+.headerTitle {
+    background-image: url("../assets/img/headerTitle.png");
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 40px;
+    background-size: 50% 100%;
+    position: absolute;
+    left: 75%;
+    right: 50%;
+    top: 6px;
+    transform: translate(-50%, -50%);
+}
+.chart_item_box {
+    width: 100%;
+    height: 33%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    position: relative;
+
+    background-image: url("../assets/img/newModule.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 20px 12px 5px 12px;
+    box-sizing: border-box;
+}
+.chart_item_box_foooter {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+
+    background-image: url("../assets/img/newLong.png");
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 18px 24px 5px 24px;
+    box-sizing: border-box;
+}
+.task_footer_chart {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    height: 240px;
+}
+.task_number_box {
+    width: 100%;
+    height: 80px;
+    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+    border-radius: 6px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+    margin: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    box-sizing: border-box;
+    color: #fff;
+    margin-left: 0;
+}
+.subject_number_box {
+    width: 220px;
+    height: 60px;
+    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+    border-radius: 6px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+    margin: 0 20px 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 20px 0px;
+    box-sizing: border-box;
+    color: #fff;
+    margin-left: 0;
+    font-size: 12px;
+}
+.task_outer_cotnainer {
+    height: 100%;
+}
+.task_list_container {
+    color: #fff;
+    /* height: 85vh; */
+    height: 90%;
+    overflow-y: auto;
+    width: 100%;
+    padding: 20px 0px 20px 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+.taskNumber_style {
+    font-size: 50px;
+    font-family: YouSheBiaoTiHei;
+    color: rgb(8, 252, 183);
+    line-height: 65px;
+    text-shadow: 0px 4px 4px #004279;
+}
+.SubjectNumber_style {
+    font-size: 30px;
+    font-family: YouSheBiaoTiHei;
+    color: rgb(8, 252, 183);
+    line-height: 65px;
+    text-shadow: 0px 4px 4px #004279;
+}
+.task_num_left_style {
+    display: flex;
+    align-items: center;
+    font-size: 22px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    letter-spacing: 1px;
+}
+.subject_num_left_style {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+}
+.task_list_header {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-bottom: 0px;
+}
+.search_box {
+    margin: 10px 0 20px 0;
+}
+.task_item_left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.left_point {
+    width: 10px;
+    height: 10px;
+    background: #60fbd7;
+    opacity: 0.5;
+    border-radius: 50%;
+}
+.left_line {
+    width: 1px;
+    border-right: 2px dashed #297c76;
+    min-height: 170px;
+    margin-left: 3px;
+}
+.task_item_container {
+    display: flex;
+    align-items: flex-start;
+}
+.task_content_header {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #6cfcdb;
+    margin-left: 10px;
+    margin-top: -8px;
+}
+.task_content_description {
+    padding: 10px 0px 0 10px;
+    display: flex;
+    align-items: flex-start;
+    box-sizing: border-box;
+    margin-left: 10px;
+    margin-top: 10px;
+    /* background: #004279; */
+}
+.task_name {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+}
+.task_participantName {
+    margin-top: 10px;
+    font-size: 14px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #ffffff;
+    opacity: 0.6;
+    width: 305px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.task_date_box {
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    margin-top: 10px;
+}
+.task_data {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+.view_more {
+    background: rgba(3, 79, 135, 0.24);
+    border-radius: 2px;
+    border: 1px solid #05ddf7;
+    padding: 2px 20px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    text-align: center;
+    margin: 10px 0;
+    width: 50%;
+    float: left;
+}
+.view_more:hover {
+    cursor: pointer;
+}
+.task_content_right {
+    flex: 1;
+}
+.task_content_box {
+    flex: 1;
+}
+.date_between {
+    opacity: 0.8;
+}
+.grade_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+.grade_item {
+    font-size: 40px;
+    font-family: YouSheBiaoTiHei;
+    color: #f1d73a;
+    text-shadow: 0px 4px 4px #004279;
+    min-width: 70px;
+    text-align: center;
+    position: absolute;
+    right: 0;
+    top: -20px;
+}
+::-webkit-scrollbar {
+    /* 去除滚动条 */
+    width: 0;
+    height: 0;
+    opacity: 0;
+    display: none;
+}
+.noTaskData {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 100px;
+    font-weight: 600;
+}
+.inner_info_table_status {
+    width: 100%;
+}
+.inner_info_table_precent {
+    text-align: center;
+}
+.task_dialog_box {
+    background: linear-gradient(295deg, #000712 0%, #00040b 100%);
+    padding: 10px;
+    box-sizing: border-box;
+    color: #fff;
+}
+.task_dialog_box_other {
+    padding: 10px;
+    box-sizing: border-box;
+    color: #fff;
+}
+.task_dialog_name {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+}
+.task_dialog_particpater {
+    font-size: 14px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #d2d7de;
+}
+.task_date_status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #021735;
+    padding: 6px 10px;
+    box-sizing: border-box;
+    margin-bottom: 12px;
+}
+.date_task_dialog {
+    color: #f9fafa;
+    font-size: 12px;
+}
+.status_task_dialog {
+    color: #6cfcdb;
+    font-size: 12px;
+}
+.subject_item_header {
+    display: flex;
+    align-content: flex-start;
+}
+.subject_item_header:hover {
+    cursor: pointer;
+}
+.subject_child_item {
+    padding-left: 25px;
+    line-height: 24px;
+}
+.suvject_item_container {
+    color: #f9fafa;
+    font-size: 14px;
+    padding-top: 8px;
+}
+.download_file:hover {
+    cursor: pointer;
+}
+.download_file {
+    color: #6cfcdb;
+}
+.view_table_style {
+    border: 1px solid #6cfcdb;
+    padding: 3px 20px;
+    box-sizing: border-box;
+}
+.view_table_style:hover {
+    cursor: pointer;
+}
+.dialog_footer_box {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-top: 24px;
+}
+.dialog_footer_box:hover {
+    /* cursor: pointer; */
+}
+.task_item_header_b {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+    margin-top:-15px;
+}
+.fullScreenStyle:hover {
+    cursor: pointer;
+}
+.task_header_top_b {
+    height: 50%;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    color: #fff;
+}
+.task_header_footer_b {
+    height: 50%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.task_header_footer_task {
+    height: 48%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.task_header_footer_task_new {
+    height: 50%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.subject_task_item {
+    width: 36%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.subject_task_item_task {
+    width: 28%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.commandMonitoring {
+    width: 30%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.commandMonitoring_task {
+    width: 28%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.unit_map_box {
+    width: 34%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+
+.unit_map_box_task {
+    width: 44%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+
+.unit_map_box_task_new {
+    width: 72%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.select_lsit_box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.search_button {
+    border-radius: 4px;
+    border: 1px solid #05ddf7;
+    padding: 3px 13px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    margin-bottom: 0px;
+    margin-left: 10px;
+    font-size: small;
+}
+.search_button:hover {
+    cursor: pointer;
+}
+.subject_list_item {
+    background: #072347;
+    width: 100%;
+    margin-bottom: 8px;
+}
+.subject_list_item_new {
+    background: #072347;
+    width: 100%;
+    margin-bottom: 8px;
+}
+.subject_list_item_new:hover {
+    cursor: pointer;
+}
+.subject_list_header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 10px 10px 0 10px;
+    box-sizing: border-box;
+    font-size: 12px;
+}
+.orgainzers {
+    color: #8d9bab;
+    margin: 8px 0 8px 0;
+}
+.system_task_style {
+    background: #021736;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    padding: 4px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.subject_list_container {
+    height: calc(100% - 48px);
+    overflow-y: auto;
+}
+.task_outer_cotnainer_status {
+    height: 100%;
+}
+.map_more_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.moreBtn_style:hover {
+    cursor: pointer;
+
+}
+.subject_list_container_int {
+    height: calc(100% - 38px);
+    overflow-y: auto;
+    width: 100%;
+}
+.header {
+    background: #004279 !important;
+}
+.header-item {
+    font-size: 12px !important;
+}
+.row-item {
+    font-size: 12px !important;
+}
+.task_other_cotainer_scrool {
+    width: 100%;
+    height: 100%;
+}
+.num_subject_left {
+    width: 75%;
+    height: 50%;
+    margin-right: 0px;
+    margin-top: 36px;
+}
+.num_subject_right {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 10px;
+}
+.num_subject_box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+.num_subject_box_new {
+    text-align: left;
+}
+.subject_status_precent {
+    position: absolute;
+    top: -5px;
+    font-size: 14px;
+    left: 39%;
+    font-weight: 600;
+    color: #37d3f3;
+}
+.subject_status_precent_task {
+    position: absolute;
+    top: -5px;
+    font-size: 12px;
+    left: 50%;
+    font-weight: 600;
+    color: #37d3f3;
+}
+.center_no_data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 40px;
+}
+.leftCirIcon_left_top {
+    position: absolute;
+    left: -5px;
+    top: -2px;
+    /* box-shadow: 0px 0px 4px 0px #94E1FD; */
+}
+.leftCirIcon_left_bottom {
+    position: absolute;
+    bottom: -5px;
+    left: -5px;
+    transform: rotate(-90deg);
+    /* box-shadow: 0px 0px 4px 0px #94E1FD; */
+}
+.showLessStyle:hover {
+    cursor: pointer;
+}
+.tempalte_no_data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    color: #fff;
+    height: 100%;
+}
+.new_style_grade {
+    position: absolute;
+    top: -80px;
+}
+.border_new_style {
+    border: 1px solid #ccc;
+    border-top: none;
+    border-right: none;
+}
+.video_title {
+    margin: 5px 0 14px 0;
+    font-weight: 600;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    font-size: 14px;
+}
+.video_title_new_child {
+    margin: 5px 0 14px 0;
+    font-weight: 600;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.play_to_full {
+    color: #37d3f3;
+    font-size: 12px;
+}
+.play_to_full:hover {
+    cursor: pointer;
+}
+.plugin {
+    width: 100%;
+    height: 100%;
+}
+
+.video_body1 {
+    min-height: 80%;
+    max-height: 80%;
+    min-width: 100%;
+    max-width: 100%;
+}
+
+.video_body2 {
+    min-height: 90%;
+    max-height: 90%;
+    min-width: 100%;
+    max-width: 100%;
+}

src/views/situationScreen.css

@@ -0,0 +1,1084 @@
+.el-input__inner {
+    background-color: transparent;
+    height: 24px !important;
+    line-height: 24px !important;
+    color: #fff;
+    border: 1px solid #05ddf7;
+}
+.el-input__icon {
+    line-height: 24px;
+}
+.el-select-dropdown {
+    color: #fff;
+    border: 1px solid #05ddf7;
+    background-color: #041937;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+    background-color: transparent;
+    color: #fff;
+}
+.el-select-dropdown__item {
+    color: #fff;
+}
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover,
+.el-select .el-input.is-focus .el-input__inner {
+    border-color: #05ddf7;
+}
+.el-popper .popper__arrow {
+    display: none;
+}
+.el-select .el-input__inner:focus {
+    border-color: #05ddf7;
+}
+.el-select .el-input__inner:active {
+    border-color: #05ddf7;
+}
+.el-select .el-input__inner:hover {
+    border-color: #05ddf7;
+}
+.el-select .el-input .el-select__caret {
+    color: #05ddf7;
+}
+.el-select-dropdown__item.selected {
+    color: #05ddf7 !important;
+}
+.el-select:hover .el-input__inner {
+    border-color: #05ddf7 !important;
+}
+
+.el-dialog__header {
+    padding: 0px;
+}
+.el-dialog__footer {
+    padding: 0px;
+}
+.el-dialog__body {
+    padding: 0;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+    border-radius: 6px;
+}
+.el-dialog {
+    position: relative;
+    margin: 0 auto 50px;
+    /* background: #082D59; */
+    background: #082d59;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
+    width: 50%;
+}
+
+.el-date-editor .el-range-input {
+    background: transparent;
+    color: #fff;
+    font-size: 12px;
+}
+.el-date-editor .el-range-separator {
+    color: #fff;
+    line-height: 16px;
+    font-size: 12px;
+}
+.el-date-editor .el-range__icon {
+    line-height: 16px;
+    font-size: 12px;
+}
+.el-date-editor .el-range__close-icon {
+    font-size: 14px;
+    color: #05ddf7;
+    width: 25px;
+    display: inline-block;
+    float: right;
+    line-height: 16px;
+}
+.el-picker-panel {
+    color: #fff;
+    border: 1px solid #05ddf7;
+    background-color: #041937;
+}
+.el-date-table th {
+    color: #fff;
+    border-bottom: solid 1px #05ddf7;
+}
+.el-date-range-picker__content.is-left {
+    border-right: 1px solid #05ddf7;
+}
+
+.el-range-editor.el-input__inner:hover {
+    border-color: #05ddf7;
+}
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
+    background-color: #05ddf7;
+}
+.el-date-table td.end-date span,
+.el-date-table td.start-date span {
+    background-color: #041937;
+}
+.el-date-table td.today span {
+    color: #05ddf7;
+    font-weight: 700;
+}
+
+.el-date-table td.today span:hover {
+    color: #05ddf7;
+    font-weight: 700;
+}
+.el-picker-panel__icon-btn {
+    font-size: 12px;
+    color: #05ddf7;
+    border: 0;
+    background: 0 0;
+    cursor: pointer;
+    outline: 0;
+    margin-top: 8px;
+}
+
+.screen-wrapper {
+    /* margin: 0 !important; */
+}
+.el-dialog__wrapper {
+    z-index: 10000 !important;
+}
+.v-modal {
+    /* background: transparent !important; */
+    z-index: -1 !important;
+}
+
+.task_screen_cotainer {
+    background-image: url("../assets/img/bg.png");
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    padding: 108px 10px 10px 10px;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.dialog_map_box {
+    /* background-image:url('../assets/img/bg.jpg'); */
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    /* background-size:100% 100%; */
+    /* padding: 108px 10px 10px 10px; */
+    box-sizing: border-box;
+    position: relative;
+}
+
+.task_header {
+    color: #fff;
+    font-weight: 600;
+    font-size: 28px;
+    display: flex;
+    justify-content: center;
+    padding-top: 18px;
+    font-family: YouSheBiaoTiHei;
+    color: #ffffff;
+
+    position: absolute;
+    top: 31px;
+    left: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+}
+.tag {
+    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+    border-radius: 6px;
+    opacity: 1;
+    border: 3px solid;
+    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+
+    width: 100px;
+    height: 40px;
+    position: absolute;
+    top: 55px;
+    left: 1%;
+    right: 50%;
+    color: #FFFFFF;
+    font-weight: 550;
+    font-size: 20px;
+    text-align: center;
+    /*justify-content: center;*/
+    padding-top: 3px;
+    padding-bottom: 2px;
+    /*color: #FFF;*/
+
+    /*position: absolute;*/
+    /*top: 70px;*/
+    /*left: 3%;*/
+    /*right: 50%;*/
+    /*transform: translate(-50% , -50%);*/
+    /*white-space: nowrap;*/
+}
+.tag:hover{
+    cursor: pointer;
+}
+
+.task_name_header {
+    color: #fff;
+    font-weight: 600;
+    font-size: 22px;
+    font-family: YouSheBiaoTiHei;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 100;
+    top: -34px;
+}
+
+.content_cotainer {
+    display: flex;
+    align-items: flex-start;
+    height: 100%;
+    width: 100%;
+}
+.task_base_info_table {
+    width: 420px;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    height: 100%;
+    margin-right: 10px;
+    position: relative;
+    z-index: 100;
+    overflow: hidden;
+
+    background-image: url("../assets/img/newleft.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 24px 24px 5px 24px;
+    box-sizing: border-box;
+}
+.center_chart_cotainer {
+    height: 100%;
+    margin-right: 10px;
+    width: calc(100% - 770px);
+}
+.center_chart_cotainer_task {
+    height: 100%;
+    margin-right: 10px;
+    width: 100%;
+}
+.task_chart_cotainer {
+    width: 350px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    height: 100%;
+    padding-bottom: 10px;
+    box-sizing: border-box;
+}
+.task_detail_cotainer {
+    width: 100%;
+    padding: 24px 10px 20px 10px;
+    box-sizing: border-box;
+    border: 1px solid #4f8bc7;
+    border-radius: 6px;
+    height: calc(100% - 250px);
+    position: relative;
+}
+.task_detail_cotainer_b {
+    width: 100%;
+    padding: 24px 10px 20px 10px;
+    box-sizing: border-box;
+    border: 10px solid #4f8bc7;
+    border-radius: 6px;
+    height: calc(100% - 250px);
+    position: relative;
+}
+.task_detail_cotainer_task {
+    width: 100%;
+    padding: 24px 10px 20px 10px;
+    box-sizing: border-box;
+    border: 1px solid #4f8bc7;
+    border-radius: 6px;
+    height: 100%;
+    position: relative;
+}
+.task_detail_dialog {
+    width: 100%;
+    padding: 48px 20px 20px 20px;
+    box-sizing: border-box;
+    border: 1px solid #4f8bc7;
+    border-radius: 6px;
+    position: relative;
+}
+.inner_info_table {
+    opacity: 0.5;
+    background: linear-gradient(270deg, #10427b 0%, #031429 100%);
+    width: 100%;
+    height: 100%;
+    border: 1px solid #4f8bc7;
+    overflow: hidden;
+}
+.task_other_cotainer {
+    box-sizing: border-box;
+    border-radius: 6px;
+    height: 86vh;
+}
+.header_line_style {
+    height: 10px;
+    position: absolute;
+    top: -2px;
+    width: 100%;
+    left: 0;
+    right: 0;
+    border-radius: 6px;
+    background-image: linear-gradient(to right, #0674ef 0%, #45fec1 100%);
+}
+.headerTitle {
+    background-image: url("../assets/img/headerTitle.png");
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 40px;
+    background-size: 50% 100%;
+    position: absolute;
+    left: 75%;
+    right: 50%;
+    top: 6px;
+    transform: translate(-50%, -50%);
+}
+.chart_item_box {
+    width: 100%;
+    height: 33%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    position: relative;
+
+    background-image: url("../assets/img/newModule.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 20px 12px 5px 12px;
+    box-sizing: border-box;
+}
+.chart_item_box_foooter {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+
+    background-image: url("../assets/img/newLong.png");
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 18px 24px 5px 24px;
+    box-sizing: border-box;
+}
+.task_footer_chart {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    height: 240px;
+}
+.task_number_box {
+    width: 100%;
+    height: 80px;
+    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+    border-radius: 6px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+    margin: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    box-sizing: border-box;
+    color: #fff;
+    margin-left: 0;
+}
+.subject_number_box {
+    width: 220px;
+    height: 60px;
+    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+    border-radius: 6px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+    margin: 0 20px 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 20px 0px;
+    box-sizing: border-box;
+    color: #fff;
+    margin-left: 0;
+    font-size: 12px;
+}
+.task_outer_cotnainer {
+    height: 100%;
+}
+.task_list_container {
+    color: #fff;
+    /* height: 85vh; */
+    height: 90%;
+    overflow-y: auto;
+    width: 100%;
+    padding: 20px 0px 20px 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+.taskNumber_style {
+    font-size: 50px;
+    font-family: YouSheBiaoTiHei;
+    color: rgb(8, 252, 183);
+    line-height: 65px;
+    text-shadow: 0px 4px 4px #004279;
+}
+.SubjectNumber_style {
+    font-size: 30px;
+    font-family: YouSheBiaoTiHei;
+    color: rgb(8, 252, 183);
+    line-height: 65px;
+    text-shadow: 0px 4px 4px #004279;
+}
+.task_num_left_style {
+    display: flex;
+    align-items: center;
+    font-size: 22px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    letter-spacing: 1px;
+}
+.subject_num_left_style {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+}
+.task_list_header {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-bottom: 0px;
+}
+.search_box {
+    margin: 10px 0 20px 0;
+}
+.task_item_left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.left_point {
+    width: 10px;
+    height: 10px;
+    background: #60fbd7;
+    opacity: 0.5;
+    border-radius: 50%;
+}
+.left_line {
+    width: 1px;
+    border-right: 2px dashed #297c76;
+    min-height: 170px;
+    margin-left: 3px;
+}
+.task_item_container {
+    display: flex;
+    align-items: flex-start;
+}
+.task_content_header {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #6cfcdb;
+    margin-left: 10px;
+    margin-top: -8px;
+}
+.task_content_description {
+    padding: 10px 0px 0 10px;
+    display: flex;
+    align-items: flex-start;
+    box-sizing: border-box;
+    margin-left: 10px;
+    margin-top: 10px;
+    /* background: #004279; */
+}
+.task_name {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+}
+.task_participantName {
+    margin-top: 10px;
+    font-size: 14px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #ffffff;
+    opacity: 0.6;
+    width: 305px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.task_date_box {
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    margin-top: 10px;
+}
+.task_data {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+.view_more {
+    background: rgba(3, 79, 135, 0.24);
+    border-radius: 2px;
+    border: 1px solid #05ddf7;
+    padding: 2px 20px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    text-align: center;
+    margin: 10px 0;
+    width: 50%;
+    float: left;
+}
+.view_more:hover {
+    cursor: pointer;
+}
+.task_content_right {
+    flex: 1;
+}
+.task_content_box {
+    flex: 1;
+}
+.date_between {
+    opacity: 0.8;
+}
+.grade_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+.grade_item {
+    font-size: 40px;
+    font-family: YouSheBiaoTiHei;
+    color: #f1d73a;
+    text-shadow: 0px 4px 4px #004279;
+    min-width: 70px;
+    text-align: center;
+    position: absolute;
+    right: 0;
+    top: -20px;
+}
+::-webkit-scrollbar {
+    /* 去除滚动条 */
+    width: 0;
+    height: 0;
+    opacity: 0;
+    display: none;
+}
+.noTaskData {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 100px;
+    font-weight: 600;
+}
+.inner_info_table_status {
+    width: 100%;
+}
+.inner_info_table_precent {
+    text-align: center;
+}
+.task_dialog_box {
+    background: linear-gradient(295deg, #000712 0%, #00040b 100%);
+    padding: 10px;
+    box-sizing: border-box;
+    color: #fff;
+}
+.task_dialog_box_other {
+    padding: 10px;
+    box-sizing: border-box;
+    color: #fff;
+}
+.task_dialog_name {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+}
+.task_dialog_particpater {
+    font-size: 14px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #d2d7de;
+}
+.task_date_status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #021735;
+    padding: 6px 10px;
+    box-sizing: border-box;
+    margin-bottom: 12px;
+}
+.date_task_dialog {
+    color: #f9fafa;
+    font-size: 12px;
+}
+.status_task_dialog {
+    color: #6cfcdb;
+    font-size: 12px;
+}
+.subject_item_header {
+    display: flex;
+    align-content: flex-start;
+}
+.subject_item_header:hover {
+    cursor: pointer;
+}
+.subject_child_item {
+    padding-left: 25px;
+    line-height: 24px;
+}
+.suvject_item_container {
+    color: #f9fafa;
+    font-size: 14px;
+    padding-top: 8px;
+}
+.download_file:hover {
+    cursor: pointer;
+}
+.download_file {
+    color: #6cfcdb;
+}
+.view_table_style {
+    border: 1px solid #6cfcdb;
+    padding: 3px 20px;
+    box-sizing: border-box;
+}
+.view_table_style:hover {
+    cursor: pointer;
+}
+.dialog_footer_box {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-top: 24px;
+}
+.dialog_footer_box:hover {
+    /* cursor: pointer; */
+}
+.task_item_header {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 5px;
+    margin-top: -35px;
+}
+.fullScreenStyle:hover {
+    cursor: pointer;
+}
+.task_header_top {
+    height: 49%;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    color: #fff;
+}
+.task_header_footer {
+    height: 50%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.task_header_footer_task {
+    height: 48%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.task_header_footer_task_new {
+    height: 50%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+}
+.subject_task_item {
+    width: 36%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.subject_task_item_task {
+    width: 28%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.commandMonitoring {
+    width: 30%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.commandMonitoring_task {
+    width: 28%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.unit_map_box {
+    width: 34%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+
+.unit_map_box_task {
+    width: 44%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+
+.unit_map_box_task_new {
+    width: 72%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    /* border: 1px solid #4F8BC7; */
+    border-radius: 6px;
+    margin-bottom: 10px;
+
+    background-image: url("../assets/img/opitty.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px 14px 5px 14px;
+    box-sizing: border-box;
+}
+.select_lsit_box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.search_button {
+    border-radius: 4px;
+    border: 1px solid #05ddf7;
+    padding: 3px 13px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    margin-bottom: 0px;
+    margin-left: 10px;
+    font-size: small;
+}
+.search_button:hover {
+    cursor: pointer;
+}
+.subject_list_item {
+    background: #072347;
+    width: 100%;
+    margin-bottom: 8px;
+}
+.subject_list_item_new {
+    background: #072347;
+    width: 100%;
+    margin-bottom: 8px;
+}
+.subject_list_item_new:hover {
+    cursor: pointer;
+}
+.subject_list_header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 10px 10px 0 10px;
+    box-sizing: border-box;
+    font-size: 12px;
+}
+.orgainzers {
+    color: #8d9bab;
+    margin: 8px 0 8px 0;
+}
+.system_task_style {
+    background: #021736;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    padding: 4px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.subject_list_container {
+    height: calc(100% - 48px);
+    overflow-y: auto;
+}
+.task_outer_cotnainer_status {
+    height: 100%;
+}
+.map_more_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.moreBtn_style:hover {
+    cursor: pointer;
+}
+.subject_list_container_int {
+    height: calc(100% - 38px);
+    overflow-y: auto;
+    width: 100%;
+}
+.header {
+    background: #004279 !important;
+}
+.header-item {
+    font-size: 12px !important;
+}
+.row-item {
+    font-size: 12px !important;
+}
+.task_other_cotainer_scrool {
+    width: 100%;
+    height: 100%;
+}
+.num_subject_left {
+    width: 75%;
+    height: 50%;
+    margin-right: 0px;
+    margin-top: 36px;
+}
+.num_subject_right {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 10px;
+}
+.num_subject_box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+.num_subject_box_new {
+    text-align: left;
+}
+.subject_status_precent {
+    position: absolute;
+    top: -5px;
+    font-size: 14px;
+    left: 39%;
+    font-weight: 600;
+    color: #37d3f3;
+}
+.subject_status_precent_task {
+    position: absolute;
+    top: -5px;
+    font-size: 12px;
+    left: 50%;
+    font-weight: 600;
+    color: #37d3f3;
+}
+.center_no_data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 40px;
+}
+.leftCirIcon_left_top {
+    position: absolute;
+    left: -5px;
+    top: -2px;
+    /* box-shadow: 0px 0px 4px 0px #94E1FD; */
+}
+.leftCirIcon_left_bottom {
+    position: absolute;
+    bottom: -5px;
+    left: -5px;
+    transform: rotate(-90deg);
+    /* box-shadow: 0px 0px 4px 0px #94E1FD; */
+}
+.showLessStyle:hover {
+    cursor: pointer;
+}
+.tempalte_no_data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    color: #fff;
+    height: 100%;
+}
+.new_style_grade {
+    position: absolute;
+    top: -80px;
+}
+.border_new_style {
+    border: 1px solid #ccc;
+    border-top: none;
+    border-right: none;
+}
+.video_title {
+    margin: 5px 0 14px 0;
+    font-weight: 600;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    font-size: 14px;
+}
+.video_title_new_child {
+    margin: 5px 0 14px 0;
+    font-weight: 600;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.play_to_full {
+    color: #37d3f3;
+    font-size: 12px;
+}
+.play_to_full:hover {
+    cursor: pointer;
+}
+.plugin {
+    width: 100%;
+    height: 100%;
+}
+
+.video_body1 {
+    min-height: 80%;
+    max-height: 80%;
+    min-width: 100%;
+    max-width: 100%;
+}
+
+.video_body2 {
+    min-height: 90%;
+    max-height: 90%;
+    min-width: 100%;
+    max-width: 100%;
+}

src/views/situationScreen.vue

@@ -317,6 +317,23 @@
                 <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="5"
+                            :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;  "
@@ -474,14 +491,14 @@
                       </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>
+<!--                    <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>
@@ -630,7 +647,7 @@
           :destroy-on-close="true"
           :visible.sync="dialogVisible"
           :width=" dialogType ==1 ?  '650px' : '650px'"
-          top="300px"
+          top="10%"
         >
           <div>
             <div class="task_detail_dialog">
@@ -731,7 +748,7 @@ 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 './situationScreen.css'
 import Videojs from "video.js"; // 引入Videojs
 import 'echarts-gl';
 export default {
@@ -743,6 +760,16 @@ export default {
   },
   data() {
     return {
+      danweiweidu:{
+        data: [],
+        length:0,
+        danwei_name:[],
+        danwei_grade:[],
+        currentPage:1,
+        totalPage:0,
+        pageSize:15,
+        paged:true,
+      },
       showOperationSpace: false,
       currentFlowInstance: undefined,
       systemTaskId:'',
@@ -814,13 +841,11 @@ export default {
       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',
@@ -961,18 +986,16 @@ export default {
     },
 
     jumpToCurrent() {
-      // window.location.href = "/taskScreen"
-      // this.$router.push("/taskScreen")
       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){ 
+      // 获取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],
@@ -980,67 +1003,156 @@ export default {
         }
         console.log('data :>> ', data);
         datas.push(data)
- 
-    }
-    console.log('datas :>> ', datas);
-
-    // 设置图表的配置项和数据
-    const option = {
-       backgroundColor: '#000',
-         
-  globe: {
-    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
-      }
-    ]
-  },
+      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;
 
-  series: [ {
-    type: 'scatter3D',
-    symbolSize: 10,
-    coordinateSystem: 'globe',
-    data: datas,
-    itemStyle: {
-      color: 'red'  // 设置标记点的颜色
-    },
-    label: {
-      show: true,
-      formatter: '{b}',  // 设置标记点的文本显示为数据的名称
-      position: 'top'
-    }
-  }]
-    };
 
-    // 使用配置项和数据显示图表
-    this.myChart.setOption(option);
     },
     // 获取单位名称
     getName(list, id) {
@@ -1078,7 +1190,9 @@ export default {
     },
     // 查看任务态势
     viewTaskSituation(item) {
+      console.log("查看态势1",this.wholeOutTaskId)
       this.wholeOutTaskId = item.taskId;
+      console.log("查看态势2",this.wholeOutTaskId)
       this.changeTask()
     },
     // 地图
@@ -1087,6 +1201,7 @@ export default {
         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
@@ -1288,8 +1403,12 @@ export default {
         },
         series: series
       };
-
-      this.myChart1.setOption(option);
+      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');
@@ -1466,7 +1585,9 @@ export default {
               }
             ])
           })
-          this.initechartsMap()
+          console.log("666",echarts.version);
+          console.log("667",this);
+          // this.initechartsMap()
           this.echartMapFlag=false
         }else{
           this.echartMapFlag=true
@@ -1784,6 +1905,10 @@ export default {
       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
@@ -1791,12 +1916,62 @@ export default {
           this.participantScoreFlag=true
         }
         this.updatekeyOther=new Date().getTime()
-        this.initEchartsSubjectGradeStatistics(category, value)
 
+        // 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(){
@@ -2120,7 +2295,11 @@ export default {
       if(this.myChart4 !=null && this.myChart4  != "" && this.myChart4  != undefined){
         this.myChart4.dispose();
       }
-      this.myChart4  = echarts.init(document.getElementById('taskPrecentSystem'));
+
+      if(document.getElementById('taskPrecentSystem')){
+        this.myChart4  = echarts.init(document.getElementById('taskPrecentSystem'));
+      }
+
       var data1 = alldistributionData
       var colorList = ['#296DE0','#47D2F4','#08B389'];
       var option = {
@@ -2357,8 +2536,9 @@ export default {
         series: [
           {
             symbolSize: (params) => {
-              let markSize = Math.sqrt(params[1]) * 3;
-              markSize = markSize < 12 ? 12 : markSize;
+              // let markSize = Math.sqrt(params[1]) * 3;
+              // markSize = markSize < 12 ? 12 : markSize;
+              let markSize = 12;
               return markSize;
             },
             symbol: 'circle',
@@ -2373,7 +2553,21 @@ export default {
               });
               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',
@@ -2531,7 +2725,7 @@ export default {
             show: true,
             textStyle: {
               color: "#AEE6FC",
-              fontSize:12
+              fontSize:8
             },
             rotate:'25'
           },
@@ -2586,6 +2780,19 @@ export default {
           }
         ]
       };
+      // 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 () {//执行
@@ -2831,9 +3038,13 @@ export default {
       if(type=='more'){
         this.$router.push('/situationScreen')
       }else {
-        this.$router.push('/historicTaskScreen')
+        this.$router.push({
+          path:"/historicTaskScreen",
+          query:{
+            key1:this.wholeOutTaskId,
+          }
+        });
       }
-
     },
 
     // 初始化视频
@@ -2869,9 +3080,9 @@ export default {
     // 建立任务的weksocket链接
     this.initWebsoket()
 
-      setTimeout(() => {
-    this.getEarth();
-  }, 3000);
+    setTimeout(() => {
+      this.getEarth();
+    }, 3000);
   },
   beforeDestroy() {
     if(this.playerList.length){

src/views/taskScreen.css

@@ -160,6 +160,7 @@
     box-sizing: border-box;
     position: relative;
   }
+
   .dialog_map_box {
     /* background-image:url('../assets/img/bg.jpg'); */
     background-repeat: no-repeat;
@@ -188,7 +189,8 @@
     transform: translate(-50%, -50%);
     white-space: nowrap;
   }
-.tag {
+.tag1 {
+    cursor:  pointer;
     background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
     border-radius: 6px;
     opacity: 1;
@@ -217,6 +219,37 @@
     /*transform: translate(-50% , -50%);*/
     /*white-space: nowrap;*/
 }
+.tag2 {
+  cursor: pointer;
+  background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+  border-radius: 6px;
+  opacity: 1;
+  border: 3px solid;
+  border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+
+  width: 140px;
+  height: 40px;
+  position: absolute;
+  margin-left: 120px;
+  top: 55px;
+  left: 1%;
+  right: 50%;
+  color: #FFFFFF;
+  font-weight: 550;
+  font-size: 20px;
+  text-align: center;
+  /*justify-content: center;*/
+  padding-top: 3px;
+  padding-bottom: 2px;
+  /*color: #FFF;*/
+
+  /*position: absolute;*/
+  /*top: 70px;*/
+  /*left: 3%;*/
+  /*right: 50%;*/
+  /*transform: translate(-50% , -50%);*/
+  /*white-space: nowrap;*/
+}
 .tag:hover{
     cursor: pointer;
 }
@@ -287,6 +320,15 @@
     height: calc(100% - 250px);
     position: relative;
   }
+.task_detail_cotainer_b {
+  width: 100%;
+  padding: 24px 10px 20px 10px;
+  box-sizing: border-box;
+  border: 10px solid #4f8bc7;
+  border-radius: 6px;
+  height: calc(100% - 250px);
+  position: relative;
+}
   .task_detail_cotainer_task {
     width: 100%;
     padding: 24px 10px 20px 10px;

src/views/taskScreen.vue

@@ -2,9 +2,12 @@
   <v-scale-screen width="2200" height="1080">
     <div  class="task_screen_cotainer">
       <div class="task_header">「{{ currentTaskName }}」当前态势</div>
-      <div class="tag" @click="jumpToHistory">
+      <div class="tag1" @click="jumpToHistory">
         历史态势
       </div>
+      <div class="tag2" @click="jumpToDangqian">
+        当前态势列表
+      </div>
       <div class="content_cotainer">
         <div class="center_chart_cotainer_task" id="taskItem">
           <div class="task_detail_cotainer_task" style="width:100%;">
@@ -372,7 +375,10 @@ export default {
 
       this.$router.push("/situationScreen")
 
+    },
 
+    jumpToDangqian() {
+      this.$router.push("/mainScreen")
     },
     // 表格样式修改
     changeHeaderCellStyle(row,column, rowIndex, columnIndex){