[UPDATE] add table in taskScreen.vue before

src/router/index.js

@@ -24,6 +24,14 @@ const routes = [
 		},
 		component: () => import("../views/taskScreen.vue")
 	},
+	{
+		path: "/mainScreen",
+		name: "mainScreen",
+		meta: {
+			title: '入口大屏'
+		},
+		component: () => import("../views/mainScreen.vue")
+	},
 	{
 		path: "/historicTaskScreen",
 		name: "historicTaskScreen",

src/views/mainScreen.css

@@ -0,0 +1,1171 @@
+.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;
+  }
+  .main_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: 900%;
+  }
+  .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_task {
+    width: 100%;
+    padding: 24px 10px 20px 10px;
+    box-sizing: border-box;
+    border: 1px solid #4f8bc7;
+    border-radius: 6px;
+    height: 100%;
+    position: relative;
+
+    /*background: #6cfcdb;*/
+  }
+  .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: 10px;
+    margin-top: -10px;
+    /*background: #00a854;*/
+
+  }
+  /*边框线里边第一层*/
+.task_item_body {
+  /*margin-top: 1px;*/
+  /*margin-left: 50px;*/
+  /*display: flex;*/
+  /*justify-content: flex-end;*/
+  /*margin-bottom: 10px;*/
+  /*margin-top: -10px;*/
+  height: 100%;
+  /*width: 100%;*/
+  /*background: #cb0e60;*/
+
+}
+
+/*白色数据列表*/
+.task_item_body1 {
+  /*margin-top: 50px;*/
+  /*margin-left: 20px;*/
+  /*display: flex;*/
+  /*justify-content: flex-end;*/
+  /*margin-bottom: 10px;*/
+  /*margin-top: -10px;*/
+  height: 100%;
+  width: 100%;
+  /*background: #c5cb0e;*/
+
+
+}
+/*白色数据列表*/
+.task_item_body_bak  th{
+  /*margin-top: 50px;*/
+  /*margin-left: 20px;*/
+  /*display: flex;*/
+  /*justify-content: flex-end;*/
+  /*margin-bottom: 10px;*/
+  /*margin-top: -10px;*/
+  /*height: 100%;*/
+  /*width: 100%;*/
+  /*background: #c5cb0e !important;*/
+  /*background-color:  #c5cb0e;*/
+  /*color: yellow !important;*/
+
+  color: white !important;
+  /*background-color: #ffffcc !important;*/
+  background: #004279 !important;
+
+}
+/*白色数据列表*/
+.task_item_body_bak td{
+  /*margin-top: 50px;*/
+  /*margin-left: 20px;*/
+  /*display: flex;*/
+  /*justify-content: flex-end;*/
+  /*margin-bottom: 10px;*/
+  /*margin-top: -10px;*/
+  /*height: 100%;*/
+  /*width: 100%;*/
+  /*background: #c5cb0e !important;*/
+  /*background-color:  #c5cb0e;*/
+  /*color: yellow !important;*/
+  color: white !important;
+  /*color: yellow !important;*/
+  /*background-color: #ffffcc !important;*/
+  background: #004279 !important;
+
+}
+  .fullScreenStyle:hover {
+    cursor: pointer;
+  }
+  .task_header_top {
+    height: 47%;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    color: #fff;
+  }
+  .task_header_footer {
+    height: 47%;
+    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: 98%;
+    width: 350%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    padding-top: 10px;
+    box-sizing: border-box;
+  }
+  .subject_task_item {
+    width: 100%;
+    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: 280%;
+    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_task1 {
+  width: 100%;
+  height: 10%;
+}
+.subject_task_item_task2 {
+  width: 100%;
+  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/mainScreen.vue

@@ -0,0 +1,1169 @@
+<template>
+  <v-scale-screen width="2200" height="1080">
+    <div  class="main_screen_cotainer">
+      <div class="task_header">当前态势</div>
+      <div class="tag" @click="jumpToHistory">
+        历史态势
+      </div>
+
+
+      <div class="content_cotainer">
+        <div class="center_chart_cotainer_task" id="taskItem">
+          <div class="task_detail_cotainer_task" style="width:100%;">
+
+
+<!--            <div v-if="false" class="header_line_style">-->
+<!--              <div class="headerTitle"></div>-->
+<!--            </div>-->
+
+<!--            <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>-->
+<!--             任务屏幕-->
+
+<!--            <div class="task_item_header">-->
+<!--              <el-select-->
+<!--                  v-model="wholeOutTaskId"-->
+<!--                  placeholder="「切换任务」"-->
+<!--                  style="width:270px;"-->
+<!--                  @change="changeTask"-->
+<!--                  filterable-->
+<!--              >-->
+<!--                <el-option-->
+<!--                    v-for="item in taskOPtion"-->
+<!--                    :key="item.value"-->
+<!--                    :label="item.label"-->
+<!--                    :value="item.value"-->
+<!--                >-->
+<!--                </el-option>-->
+<!--              </el-select>-->
+<!--            </div>-->
+
+            <div class="task_item_body" >
+                <el-row class="task_item_body1" >
+                  <el-col :span="24"  >
+
+                    <el-table ref="teacher" :data="pagedData" size="mini"
+                              @sort-change="pagedData.onSortChange"
+                              header-cell-class-name="table-header-gray" class="task_item_body_bak" >
+<!--                    <el-table ref="teacher" :data="renwuliebiao.data" size="mini"-->
+<!--                              @sort-change="renwuliebiao.onSortChange"-->
+<!--                              header-cell-class-name="table-header-gray">-->
+
+
+<!--                      <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="renwuliebiao.getTableIndex" />-->
+                      <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex" />
+                      <el-table-column label="任务实际开始时间" prop="0" />
+                      <el-table-column label="任务关联ID" prop="1" />
+                      <el-table-column label="任务描述" prop="2" />
+                      <el-table-column label="任务状态" prop="3" />
+                      <el-table-column label="任务代码" prop="4" />
+                      <el-table-column label="任务ID" prop="5" />
+                      <el-table-column label="任务名称" prop="6" />
+                      <el-table-column label="任务阶段" prop="7" />
+                      <el-table-column label="操作" align="center">
+                        <template slot-scope="scope">
+                          <el-button class="table-btn primary" size="mini" type="text" @click="onTiaozhuan(scope.row)">跳转</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+
+                    <el-row type="flex" justify="end" style="margin-top: 10px;">
+                      <el-pagination
+                          :total="renwuliebiao.data.length"
+                          :current-page="renwuliebiao.currentPage"
+                          :page-size="renwuliebiao.pageSize"
+                          :page-sizes="[5,10, 20, 50, 100]"
+                          layout="total, prev, pager, next, sizes"
+                          @current-change="onCurrentPageChange"
+                          @size-change="onPageSizeChange">
+                      </el-pagination>
+
+                    </el-row>
+                  </el-col>
+                </el-row>
+
+                <operation-space v-if="showOperationSpace" :flow-instance="currentFlowInstance" @close="onOperationSpaceClose"></operation-space>
+
+            </div>
+
+          </div>
+        </div>
+
+
+      </div>
+    </div>
+  </v-scale-screen>
+</template>
+<script>
+
+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 './mainScreen.css'
+import Videojs from "video.js"; // 引入Videojs
+import FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
+import hkv from '../components/hk/hkv.vue'
+import hkCamara from '../components/hk/hkCamara.vue'
+import {Message} from "element-ui";
+
+
+
+export default {
+  components:{
+    myFlylineChartEnhanced,
+    sacleBox,
+    myscrollBoard,
+    hkv,
+    hkCamara,
+    FormTaskProcessViewer,
+  },
+  data() {
+    return {
+      showOperationSpace: false,
+      currentFlowInstance: undefined,
+      // formAllInstanceWidget: new TableWidget(this.loadAllTaskData, this.loadAllTaskVerify, true, false),
+      isInit: false,
+
+      HKCardShow: false,
+      HKCamaraShow: false,
+      systemFinshedValue:'',
+      unitFinshedValue:'',
+      wholeOutTaskId:'',
+      systemSubjectId:'',
+      unitSubjectValue:'',
+      subjectItem:{},
+      processDefinitionId: "",
+      processInstanceId:"",
+      moreFlag:true,
+      dialogVisible:false,
+      taskList:[],
+      websocket: null, //建立的连接
+      websocketOrder: null, //建立的连接
+      websocketBpmn: null, //建立的连接
+      updatekey:'1',
+
+      renwuliebiao:{
+        header: ['1', '2', '3','4', '5', '6','7', '8'],
+        waitTime:1500,
+        data: [],
+        columnWidth: [80],
+        oddRowBGC:'#072347',
+        evenRowBGC:'#021736',
+
+
+        actualStartTime:'',
+        bk:'',
+        description:'',
+        status: '',
+        taskCode:'',
+        taskId: '',
+        taskName: '',
+        taskStage:'',
+
+        currentPage:1,
+        pageSize:10,
+
+        paged:true,
+      },
+
+
+      scrollTableConfig:{
+        header: ['课目名称', '指令名称', '特情注入', '指令内容', '模训系统', '时间'],
+        waitTime:1500,
+        data: [],
+        columnWidth: [80],
+        oddRowBGC:'#072347',
+        evenRowBGC:'#021736'
+      },
+      dialogType:1,
+      subjectDatas:[],
+      subjectMap:{
+        '待执行':require('../assets/img/waite.png'),
+        '执行中':require('../assets/img/doing.png'),
+        '已完成':require('../assets/img/finshed.png') ,
+      },
+      instructList: [],
+      renwuList: [],
+      unitOption: [],
+      systemOption: [],
+      taskOPtion: [],
+      isReady: false,
+      currentTaskName: "",
+      currentTaskGrade: "",
+      unitSubGradeValue: "",
+      gridData: [],
+      camaraSrc: ["", "", "", "", ""],
+      completionRate: false,
+      playerList: [],
+      camaraName: ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"],
+      videoList: [
+        "videoPlayerTask",
+        "videoPlayer_first",
+        "videoPlayer_second",
+        "videoPlayer_third",
+        "videoPlayer_fourth"
+      ],
+      mainVideoData: {},
+      currentSubject: '',
+      camaraData:[],
+      cardData:[],
+      cardName:[],
+      cardSrc:[]
+    };
+  },
+  computed:{
+    pagedData() { // 动态计算当前页的数据
+      const start = (this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize
+      const end = start + this.renwuliebiao.pageSize
+      // console.log("hhhh1:  ",start+"---"+end )
+      // console.log("hhhh2:  ",this.renwuliebiao.data.slice(start, end) )
+      return this.renwuliebiao.data.slice(start, end)
+    }
+  },
+  methods:{
+    /**
+     * 表格分页变化
+     * @param {Integer} newCurrentPage 变化后的显示页面
+     */
+    onCurrentPageChange (newCurrentPage) {
+
+      console.log("1:  ",newCurrentPage )
+      console.log("2:  ",this.renwuliebiao.pageSize )
+      console.log("3:  ",this.oldPage)
+
+
+      this.loadTableDataImpl(newCurrentPage, this.renwuliebiao.pageSize).then(() => {//数据加载成功
+
+
+        this.renwuliebiao.currentPage = newCurrentPage;
+        this.oldPage = this.renwuliebiao.currentPage-1
+        console.log("4:  ",newCurrentPage)
+        console.log("5:  ",this.renwuliebiao.currentPage)
+        console.log("6:  ",this.oldPage)
+
+
+        if(this.renwuliebiao.data.length <= newCurrentPage*this.renwuliebiao.pageSize   ){
+          this.renwuliebiao.paged=true
+        }else{
+          this.renwuliebiao.paged=false
+        }
+
+
+
+      }).catch(() => {//数据加载失败
+        this.renwuliebiao.currentPage = this.oldPage;
+
+
+        console.log("7:  ",this.oldPage)
+        console.log("8:  ",this.renwuliebiao.currentPage)
+
+      });
+    },
+    /**
+     * 表格分页每页显示数量变化
+     * @param {Integer} newPageSize 变化后的每页显示数量
+     */
+    onPageSizeChange (newPageSize) {
+
+      console.log("hhhh2:  ",newPageSize )
+
+      this.renwuliebiao.pageSize = newPageSize;
+      this.renwuliebiao.currentPage = 1
+      this.loadTableDataImpl(1, newPageSize).then(() => {
+        this.oldPage = this.renwuliebiao.currentPage;
+        this.oldPageSize = this.renwuliebiao.pageSize;
+      }).catch(e => {
+        this.renwuliebiao.currentPage = this.oldPage;
+        this.renwuliebiao.pageSize = this.oldPageSize;
+      });
+    },
+    /**
+     * 表格排序字段变化
+     * @param {String} prop 排序字段的字段名
+     * @param {String} order 正序还是倒序
+     */
+    onSortChange ({ prop, order }) {
+      this.orderInfo.fieldName = prop;
+      this.orderInfo.asc = (order === 'ascending');
+      this.refreshTable();
+    },
+    /**
+     * 获取表格数据
+     * @param {Integer} pageNum 当前分页
+     * @param {Integer} pageSize 每页数量
+     * @param {Boolean} reload 是否重新获取数据
+     */
+    loadTableDataImpl (pageNum, pageSize, reload = false) {
+      console.log("11:  ",pageNum+"---"+pageSize+"---"+reload)
+
+      // const start = (pageNum - 1) * this.renwuliebiao.pageSize
+      // const end = start + this.renwuliebiao.pageSize
+      // // console.log("hhhh1:  ",start+"---"+end )
+      // // console.log("hhhh2:  ",this.renwuliebiao.data.slice(start, end) )
+      // return this.renwuliebiao.data.slice(start, end)
+
+
+// 判断是否需要重新加载数据
+      if (reload || !this.renwuliebiao.data || this.renwuliebiao.data.length === 0) {
+        // 调用后端接口或其他数据来源获取数据
+        // 这里省略具体实现
+
+        // 模拟一个返回结果的 Promise 对象
+        const mockData = new Promise(resolve => {
+          const data = [];
+
+          for (let i = 1; i <= pageSize; i++) {
+            data.push({
+              id: pageNum * pageSize + i,
+              name: `任务${pageNum * pageSize + i}`,
+              status: Math.floor(Math.random() * 4)
+            });
+          }
+
+          resolve(data);
+        });
+
+        // 返回 Promise 对象，以便分页组件可以在数据加载完成后进行下一步处理。
+        return mockData.then(data => {
+          // 更新任务列表数据
+          this.renwuliebiao.data = data;
+          // 返回新的任务列表数据
+          return this.renwuliebiao.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+        });
+      } else {
+        // 直接返回已有的任务列表数据
+        return Promise.resolve(this.renwuliebiao.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
+      }
+
+
+      // return new Promise((resolve, reject) => {
+      //   console.log("12:  ",this.loadTableData)
+      //
+      //   if (typeof this.loadTableData !== 'function') {
+      //     reject();
+      //   } else {// 如果pageSize和pageNum没有变化，并且不强制刷新
+      //     console.log("13:  ",pageNum+"---"+pageSize+"---"+reload)
+      //     if (this.paged && !reload && this.oldPage === pageNum && this.oldPageSize === pageSize) {
+      //       resolve();
+      //     } else {
+      //       let params = {};
+      //       if (this.orderInfo.fieldName != null) params.orderParam = [this.orderInfo];
+      //       if (this.paged) {
+      //         params.pageParam = {
+      //           pageNum,
+      //           pageSize
+      //         }
+      //       }
+      //       this.loading = true;
+      //       this.loadTableData(params).then(tableData => {
+      //         this.dataList = tableData.dataList;
+      //         this.totalCount = tableData.totalCount;
+      //         this.loading = false;
+      //         resolve();
+      //       }).catch(e => {
+      //         this.loading = false;
+      //         reject(e);
+      //       });
+      //     }
+      //   }
+      // });
+    },
+
+    /**
+     * 刷新表格数据
+     * @param {Boolean} research 是否按照新的查询条件重新查询（调用verify函数）
+     * @param {Integer} pageNum 当前页面
+     */
+    refreshTable (research = false, pageNum = undefined, showMsg = false) {
+      let reload = false;
+      if (research) {
+        if (typeof this.searchVerify === 'function' && !this.searchVerify()) return;
+        reload = true;
+      }
+
+      if (Number.isInteger(pageNum) && pageNum !== this.renwuliebiao.currentPage) {
+        this.loadTableDataImpl(pageNum, this.renwuliebiaopageSize, reload).then(res => {
+          this.oldPage = this.renwuliebiao.currentPage = pageNum;
+          if (research && showMsg) Message.success('查询成功');
+        }).catch(e => {
+          this.renwuliebiao.currentPage = this.oldPage;
+        });
+      } else {
+        this.loadTableDataImpl(this.renwuliebiao.currentPage, this.renwuliebiao.pageSize, true).catch(e => {});
+      }
+    },
+
+
+
+
+    /**
+     * 获取每一行的index信息
+     * @param {Integer} index 表格在本页位置
+     */
+    getTableIndex (index) {
+
+      // console.log("页码1：  "+index)
+      // console.log(".....1  "+index)
+      // console.log("页码2：  "+this.renwuliebiao.paged ? ((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1)) : (index + 1))
+      // console.log(".....2  "+this.renwuliebiao.paged)
+      let a
+      // let a=this.renwuliebiao.paged ? ((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1)) : (index + 1);
+      // console.log(".....a  "+a)
+      // return this.renwuliebiao.paged ? ((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1)) : (index + 1);
+
+
+
+
+
+      console.log("参数：  "+this.renwuliebiao.paged+" "+this.renwuliebiao.pageSize+" "+index)
+      // if(this.renwuliebiao.paged){
+      //   console.log("a1")
+      //   a=((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1))
+      // }else{
+      //   console.log("a2")
+      //   a=(index + 1)
+      // }
+      a=((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1))
+      console.log(".....a  "+a)
+      return a;
+
+
+
+
+
+
+
+
+    },
+
+
+
+    onTiaozhuan (a) {
+
+
+      console.log("111",a[5])
+      // this.$router.push({name: 'testParams',params: {testParams:'testParams'}});
+      // location.reload()
+      this.$router.push({
+        path:"/taskScreen",
+        query:{
+          key1:a[5],
+          key2:a[6],
+        }
+      });
+      // location.reload()
+    },
+    refreshFormAllInstance (reloadData = false) {
+      if (reloadData) {
+        this.renwuliebiao.refreshTable(true, 1);
+      } else {
+        this.renwuliebiao.refreshTable();
+      }
+      if (!this.isInit) {
+        // 初始化下拉数据
+      }
+      this.isInit = true;
+    },
+
+    onOperationSpaceClose () {
+      this.showOperationSpace = false;
+      this.currentFlowInstance = null;
+      this.refreshFormAllInstance()
+    },
+
+    HKCardInit(){
+      this.HKCardShow = true;
+    },
+    jumpToHistory() {
+      // this.$refs.hk.$destroy();
+      //     this.HKshow = false;
+
+      this.$router.push("/situationScreen")
+
+
+    },
+    // 表格样式修改
+    changeHeaderCellStyle(row,column, rowIndex, columnIndex){
+      if(row.columnIndex === 0){
+        return 'background: #004279 ; color:#fff;'; // 修改的样式
+      }else {
+        return 'background: #004279 ;color:#fff; ';
+      }
+    },
+    changeCellStyle(row,column, rowIndex, columnIndex){
+      if(row.columnIndex === 0){
+        return 'background: #0A427C  ; color:#fff;'; // 修改的样式
+      }else {
+        return 'background: #0A427C ; color:#fff;';
+      }
+    },
+
+
+
+    // 获取全部系统
+    async getAllSystems(){
+      let params={}
+      const res = await request('/dt_screen/rest/v1/screen/listSystem/', 'get', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        console.log('获取全部系统', data);
+        this.systemOption = data.map((item)=>{
+          return {
+            label:item.systemName,
+            value: item.systemId
+          }
+        })
+        this.systemFinshedValue=this.systemOption[0].value
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
+
+
+
+    // 获取全部单位
+    async getAllUnits (){
+      let params={}
+      const res = await request('/dt_screen/rest/v1/screen/listUnit/', 'get', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        console.log('获取全部单位', data);
+        // 获取任务数据
+        this.getTaskList()
+        this.unitOption = data.map((item)=>{
+          return {
+            label:item.unitName,
+            value: item.unitId
+          }
+        })
+        this.unitFinshedValue=this.unitOption[0].value
+        this.unitSubGradeValue=this.unitOption[0].value
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
+
+
+    /**
+     * 获取所有任务实例
+     */
+    loadAllTaskData (params) {
+      if (params == null) params = {};
+      params = {
+        ...params,
+        processDefinitionName: this.formFilterCopy.processDefinitionName,
+        startUser: this.formFilterCopy.startUser,
+        processName: this.formFilterCopy.processName,
+        processStatus: this.formFilterCopy.processStatus,
+        taskCode: this.formFilterCopy.taskCode,
+        taskStage: this.formFilterCopy.taskStage,
+        beginDate: this.formFilterCopy.createDate[0],
+        endDate: this.formFilterCopy.createDate[1]
+      }
+
+      return new Promise((resolve, reject) => {
+        FlowOperationController.listAllHistoricProcessInstanceWithTask(this, params).then(res => {
+          console.log('res :>> ', res);
+          resolve({
+            dataList: res.data.dataList,
+            totalCount: res.data.totalCount
+          });
+        }).catch(e => {
+          reject(e);
+        });
+      });
+    },
+
+
+    // 获取任务列表
+    async getTaskList() {
+      let params = {};
+      // const res = await request("/dt_screen/rest/v2/task/listCurrentTask/", "post", params, false);
+      const res = await request("/dt_screen/rest/v2/task/listRunningTasks/", "post", params, false);
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        console.log("获取任务列表", data);
+
+        this.renwuList=data
+        let tempData=[]
+        data.forEach((item)=>{
+          console.log("1:  ", item);
+
+
+          tempData.push([item.actualStartTime, item.bk, item.description,item.status,item.taskCode,item.taskId ,item.taskName, item.taskStage])
+        })
+        this.renwuliebiao.data=tempData
+
+          //
+          // this.instructList=data
+          // let tempData=[]
+          // data.forEach((item)=>{
+          //   tempData.push([item.subjectName, item.name, item.situation, item.content, item.system,item.time])
+          // })
+          // this.scrollTableConfig.data=tempData
+          // console.log("🚀 data >> ", this.scrollTableConfig.data);
+          // this.updatekey=new Date().getTime()
+
+
+
+
+
+
+
+
+
+
+        this.taskList = data;
+        this.wholeOutTaskId = data[0].taskId;
+        this.processInstanceId = this.wholeOutTaskId;
+        this.taskOPtion = data.map((item) => {
+          return {
+            label: item.taskName,
+            value: item.taskId
+          };
+        });
+
+
+        let param = {taskId: this.processInstanceId};
+        const res1 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
+        this.processDefinitionId = res1.data;
+        this.initWebsoketBpmn();
+        this.isReady = true;
+        this.currentTaskName = data[0].taskName;
+        this.currentTaskGrade = data[0].syntheticTaskScore;
+        // 获取地图的信息
+        if (data.length) {
+          // 获取任务的课目信息
+          this.getSubjectList(data[0].taskId);
+          // 获取任务的指令信息
+          this.getinstructList(data[0].taskId);
+          // 建立指令websocket 链接
+          this.initInstructWebsoket();
+        }
+      } else {
+        this.$message.error(errorMessage);
+      }
+
+    },
+
+
+
+
+    // 切换任务
+    async changeTask() {
+      this.camaraData = []
+      this.cardData = []
+      this.systemSubjectId = "";
+      this.unitSubjectValue = "";
+      this.isReady = false;
+      this.currentTaskName = this.taskOPtion.find((item) => item.value == this.wholeOutTaskId).label;
+      this.currentTaskGrade = this.taskList.find((item) => item.taskId == this.wholeOutTaskId).syntheticTaskScore;
+      // 获取任务的课目信息
+      this.processInstanceId = this.wholeOutTaskId;
+
+      let param = {taskId: this.processInstanceId};
+      const res2 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
+      console.log('res2 :>> ', res2.data);
+      this.processDefinitionId = res2.data;
+      this.isReady = true;
+      this.getSubjectList(this.wholeOutTaskId);
+      // 获取任务的指令信息
+      this.getinstructList(this.wholeOutTaskId);
+      // 建立指令websocket 链接
+      this.initInstructWebsoket();
+      this.initWebsoketBpmn();
+    },
+    changeTaskAndUnit() {
+      this.systemSubjectId=''
+      if(this.unitSubjectValue){
+        this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue)
+      }else {
+        this.getSubjectList(this.wholeOutTaskId)
+      }
+    },
+    changeTaskAndSystem() {
+      this.unitSubjectValue=''
+      if(this.systemSubjectId){
+        this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId)
+      }else {
+        this.getSubjectList(this.wholeOutTaskId)
+      }
+    },
+    // 获取任务的课目信息
+    async getSubjectList(taskId){
+      let params={}
+      const res = await request(`/dt_screen/rest/v2/subject/list/${taskId}`, 'get', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        console.log('获取任务的课目信息', data);
+        this.subjectDatas=data
+        this.initUrl(this.subjectDatas[0].subjectName)
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
+    // 获取任务的指令
+    async getinstructList (taskId) {
+      let params={}
+      const res = await request(`/dt_screen/rest/v2/order/list/${taskId}`, 'get', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        console.log('获取任务的指令', data);
+        this.instructList=data
+        let tempData=[]
+        data.forEach((item)=>{
+          tempData.push([item.subjectName, item.name, item.situation, item.content, item.system,item.time])
+        })
+        this.scrollTableConfig.data=tempData
+        console.log("🚀 data >> ", this.scrollTableConfig.data);
+        this.updatekey=new Date().getTime()
+
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
+    // 切换单位再结合任务id 获取课目课目列表
+    async getUnitSubjectList(taskId,unitId){
+      let params={}
+      params["taskId"] = taskId
+      params["unitId"] = unitId
+      // const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, 'get', params, false)
+      const res = await request(`/dt_screen/rest/v2/subject/listByCondition`, 'post', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        this.subjectDatas=data
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
+    // 切换系统再结合任务id 获取课目课目列表
+    async getSystemSubjectList(taskId,systemId){
+      let params={}
+      params["taskId"] = taskId
+      params["systemId"] = systemId
+      // const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`, 'get', params, false)
+      const res = await request(`/dt_screen/rest/v2/subject/listByCondition`, 'post', params, false)
+      const { errorCode, errorMessage, success,data } = res.data;
+      if (success) {
+        this.subjectDatas=data
+      } else {
+        this.$message.error(errorMessage)
+      }
+    },
+    // 建立websocket 链接 任务
+    initWebsoket(){
+      this.websocket = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/task`);//这里将http替换成ws
+      switch (this.websocket.readyState) {
+        case 0:
+          console.log("正在连接");
+          break;
+        case 1:
+          console.log("已经链接并且可以通讯");
+          break;
+        case 2:
+          console.log("连接正在关闭");
+          break;
+        case 3:
+          console.log("连接已关闭或者没有链接成功");
+          break;
+      };
+      this.websocket.onopen = this.websocketsend;//websoket连接成功
+      this.websocket.onmessage =this. websocketonmessage;//websoket收到信息
+      this.websocket.onclose = this.websocketclose;//websoket连接关闭
+    },
+    websocketsend(){
+      console.log('ws 连接成功');
+    },
+    websocketonmessage(msg){
+      // 获取全部单位
+      this.getAllUnits()
+      // 获取全部系统
+      this.getAllSystems()
+      console.log('收到任务信息',msg);
+    },
+    websocketclose(){
+      console.log('ws 连接关闭');
+      this.initWebsoket();//重新建立连接
+    },
+    // 建立websocket 链接 任务
+    initWebsoketBpmn(){
+      this.websocketBpmn = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/bpmn`);//这里将http替换成ws
+      switch (this.websocketBpmn.readyState) {
+        case 0:
+          console.log("正在连接");
+          break;
+        case 1:
+          console.log("已经链接并且可以通讯");
+          break;
+        case 2:
+          console.log("连接正在关闭");
+          break;
+        case 3:
+          console.log("连接已关闭或者没有链接成功");
+          break;
+      };
+      this.websocketBpmn.onopen = this.bpmnWebsocketsend;//websoket连接成功
+      this.websocketBpmn.onmessage =this.bpmnWebsocketonmessage;//websoket收到信息
+      this.websocketBpmn.onclose = this.bpmnWebsocketclose;//websoket连接关闭
+    },
+    bpmnWebsocketsend(){
+      console.log('ws 连接成功');
+    },
+    bpmnWebsocketonmessage(msg){
+      // 更新流程图
+      this.$refs.FormTaskProcessViewer.getTaskHighlightData();
+      this.$refs.FormTaskProcessViewer.getTaskProcessXml();
+      console.log('收到指令信息',msg);
+    },
+    bpmnWebsocketclose(){
+      console.log('ws 连接关闭');
+      this.initWebsoketBpmn();//重新建立连接
+    },
+    initInstructWebsoket(){
+      // 指令的ws
+      this.websocketOrder = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
+      switch (this.websocketOrder.readyState) {
+        case 0:
+          console.log("正在连接");
+          break;
+        case 1:
+          console.log("已经链接并且可以通讯");
+          break;
+        case 2:
+          console.log("连接正在关闭");
+          break;
+        case 3:
+          console.log("连接已关闭或者没有链接成功");
+          break;
+      };
+      this.websocketOrder.onopen = this.orderWebsocketsend;//websoket连接成功
+      this.websocketOrder.onmessage =this. orderWebsocketonmessage;//websoket收到信息
+      this.websocketOrder.onclose = this.orderWebsocketclose;//websoket连接关闭
+    },
+    orderWebsocketsend(){
+      console.log('ws 连接成功');
+    },
+    orderWebsocketonmessage(msg){
+      // 获取任务的指令信息
+      this.getinstructList(this.wholeOutTaskId)
+      console.log('收到指令信息',msg);
+    },
+    orderWebsocketclose(){
+      console.log('ws 连接关闭');
+      this.initInstructWebsoket();//重新建立连接
+    },
+    // 查看成绩表格
+    viewManData(item){
+      this.dialogType=2
+      this.dialogVisible=true
+      console.log('item',item);
+      const { subjectScore } = item
+      this.gridData=subjectScore
+    },
+    // 全屏事件
+    showFull(id){
+      console.log('this.camaraData :>> ', this.camaraData);
+      console.log('ckx debug  监控大屏' )
+      this.$router.push(
+          {
+            path: './monitorScreen',
+            query: {
+              camaraData: JSON.stringify(this.camaraData)
+            }
+          }
+      )
+    },
+    showFull1(id){
+      console.log('this.camaraData :>> ', this.cardData);
+      console.log('ckx debug  监控大屏' )
+      this.$router.push(
+          {
+            path: './monitorScreen',
+            query: {
+              camaraData: JSON.stringify(this.cardData)
+            }
+          }
+      )
+    },
+    // 退出全屏
+    exitFull(){
+      let exitFullScreen =
+          document.exitFullScreen ||
+          document.mozCancelFullScreen ||
+          document.webkitExitFullscreen ||
+          document.msExitFullscreen;
+      if (exitFullScreen) {
+        exitFullScreen.call(document);
+      }
+      this.updatekey=new Date().getTime()
+    },
+    // 展开全屏
+    requestFullScreen(elem){
+      console.log('ckx debug ',  )
+      // #兼容不同的浏览器
+      var requestMethod =
+          elem.requestFullScreen ||
+          elem.webkitRequestFullScreen ||
+          elem.mozRequestFullScreen ||
+          elem.msRequestFullScreen;
+      if (requestMethod) {
+        requestMethod.call(elem);
+      } else if (typeof window.ActiveXObject !== "undefined") {
+        // #模拟F11 实现全屏
+        var wscript = new ActiveXObject("WScript.Shell");
+        if (wscript !== null) {
+          wscript.SendKeys("{F11}");
+        }
+      }
+      let that =this
+      window.addEventListener('resize',function () {//执行
+        let isFull = document.mozFullScreen ||
+            document.fullScreen ||
+            //谷歌浏览器及Webkit内核浏览器
+            document.webkitIsFullScreen ||
+            document.webkitRequestFullScreen ||
+            document.mozRequestFullScreen ||
+            document.msFullscreenEnabled
+        if (isFull === undefined) {
+          that.exitFull()
+        }else {
+
+        }
+      })
+    },
+    checkFull() {
+      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
+      //火狐浏览器
+      let isFull = document.mozFullScreen ||
+          document.fullScreen ||
+          //谷歌浏览器及Webkit内核浏览器
+          document.webkitIsFullScreen ||
+          document.webkitRequestFullScreen ||
+          document.mozRequestFullScreen ||
+          document.msFullscreenEnabled
+      if (isFull === undefined) {
+        isFull = false
+      }
+      return isFull;
+    },
+    showMoreInfo(type){
+      if(type=='more'){
+        this.$router.push('/situationScreen')
+      }else {
+        this.$router.push('/taskScreen')
+      }
+    },
+
+    // 初始化视频
+    initVideo(nowPlayVideoUrl,id) {
+      let that =this
+
+      // 这些options属性也可直接设置在video标签上，见 muted
+      let options = {
+        autoplay: true, // 设置自动播放
+        controls: true, // 显示播放的控件
+        sources: [
+          // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
+          {
+            src: nowPlayVideoUrl,
+            type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
+          }
+        ]
+      };
+      // videojs的第一个参数表示的是，文档中video的id
+      const myPlyer= Videojs(id, options, function onPlayerReady() {
+        console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
+        console.log(myPlyer === this); // 这里返回的是true
+      });
+      this.playerList.push(myPlyer)
+
+    },
+
+    async initUrl(subjectName) {
+      if (subjectName == '')
+        return;
+
+      let params = {
+        subjectName: subjectName,
+        taskId: this.wholeOutTaskId
+      };
+      this.currentSubject = subjectName;
+      this.camaraData = [];
+      this.cardData = [];
+      const res = await request("/dt_screen/rest/v2/video/videos/getSubjectUrls", "post", params, false);
+      let index = 0;
+      this.camaraSrc = ["", "", "", "", ""];
+      this.camaraName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
+
+      for (let item in res.data.data) {
+        // this.camaraSrc[index] = res.data.data[item].url;
+        // this.camaraName[index++] = res.data.data[item].name;
+        let data = {
+          ip: res.data.data[item].ip,
+          Port: res.data.data[item].port,
+          Username: res.data.data[item].username,
+          Password: res.data.data[item].password,
+          channelName: res.data.data[item].channelName
+        };
+        this.camaraData.push(data);
+      }
+
+      setTimeout(() => {
+        this.HKCamaraShow = true;
+      }, 800);
+
+      let params1 = {
+        subjectName: subjectName,
+        taskId: this.wholeOutTaskId
+      };
+      this.currentSubject = subjectName;
+      const res1 = await request("/dt_screen/rest/v2/video/videos/getSubjectCardUrls", "post", params1, false);
+      console.log('res1 :>> ', res1);
+      let index1 = 0;
+      this.cardSrc = ["", "", "", "", ""];
+      this.cardName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
+      for (let item in res1.data.data) {
+        // this.cardSrc[index1] = res1.data.data[item].url;
+        // this.cardName[index1++] = res1.data.data[item].name;
+        let data = {
+          ip: res1.data.data[item].ip,
+          Port: res1.data.data[item].port,
+          Username: res1.data.data[item].username,
+          Password: res1.data.data[item].password,
+          channelName: res1.data.data[item].channelName
+        };
+        this.cardData.push(data);
+      }
+      console.log('cardData :>> ', this.cardData);
+      // setTimeout(() => {
+
+      //   for(let index = 0; index < this.cardSrc.length;index++)
+      //   {
+      //     this.cardData.push(this.resolveUrl(this.cardSrc[index]))
+      //   }
+      // }, 1000);
+
+    },
+    resolveUrl(url){
+      if(url ==''){
+        return;
+      }
+      let data = {};
+      url = url.split("/");
+      url = url[2];
+      url = url.split(":");
+      data.Username = url[0];
+      data.Port = 80;
+      url = url[1];
+      url = url.split("@");
+      data.ip = url[1];
+      data.Password = url[0];
+      data.channelName = "test1";
+      return data;
+    },
+    changeVideo(subjectName) {
+      if (subjectName == '')
+        return;
+      if(subjectName != this.currentSubject) {
+        this.currentSubject = subjectName;
+        // this.$refs.hkv.stopAll();
+        // this.$refs.hkCard.stopAll();
+        this.camaraData = []
+        this.cardData = []
+        this.initUrl(subjectName);
+      }
+    }
+  },
+  mounted() {
+
+
+
+    // 获取全部单位
+    this.getAllUnits();
+    // 获取全部系统
+    this.getAllSystems();
+    // 建立任务的weksocket链接
+    this.initWebsoket();
+    // setTimeout(() => {
+    // this.initUrl('步坦协同课目');
+    //   }, 1000);
+    //   setTimeout(() => {
+
+    //  console.log('this.camaraSrc :>> ', this.camaraSrc);
+    // for(let index = 0; index < this.camaraSrc.length;index++)
+    // {
+    //   this.camaraData.push(this.resolveUrl(this.camaraSrc[index]))
+    // }
+
+    // console.log('this.camaraData :>> ', this.camaraData);
+
+    // }, 1000);
+
+    //  setTimeout(() => {
+
+    //   this.HKshow = true;
+
+    // }, 800);
+
+    // this.currentSubject = "步坦协同课目";
+    //
+    // //     // 过14秒调用
+    // setTimeout(() => {
+    //   for (let index = 0; index < this.camaraSrc.length; index++) {
+    //     console.log('object :>> ',this.camaraSrc[index]);
+    //     this.initVideo(this.camaraSrc[index], this.videoList[index]);
+    //   }
+    // }, 5000);
+  },
+  beforeDestroy() {
+    this.HKshow = false;
+
+    if (this.playerList.length) {
+      this.playerList.forEach((item) => {
+        item.dispose();
+      });
+    }
+    let params ={}
+    const res = request("/dt_screen/video/videos/videoClose", "get", params, false);
+  }
+};
+</script>
+<style scoped>
+#videoPlayerTask {
+  width: 906px;
+  height: 350px;
+}
+
+#videoPlayer_first {
+  width: 278px;
+  height: 164px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+#videoPlayer_second {
+  width: 278px;
+  height: 164px;
+  margin-bottom: 10px;
+}
+
+#videoPlayer_third {
+  width: 278px;
+  height: 164px;
+  margin-right: 10px;
+}
+
+#videoPlayer_fourth {
+  width: 278px;
+  height: 164px;
+}
+.video_flex_style {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+</style>

src/views/situationScreen.vue

@@ -809,7 +809,8 @@ export default {
   methods:{
     jumpToCurrent() {
       // window.location.href = "/taskScreen"
-      this.$router.push("/taskScreen")
+      // this.$router.push("/taskScreen")
+      this.$router.push("/mainScreen")
     },
     getEarth(){
  // 获取DOM容器

src/views/taskScreen.vue

@@ -437,7 +437,14 @@ export default {
       if (success) {
         console.log("获取任务列表", data);
         this.taskList = data;
-        this.wholeOutTaskId = data[0].taskId;
+
+        //前面传过来的id
+        if(this.$route.query.key1){
+          this.wholeOutTaskId = this.$route.query.key1;
+        }else{
+          this.wholeOutTaskId = data[0].taskId;
+        }
+
         this.processInstanceId = this.wholeOutTaskId;
         this.taskOPtion = data.map((item) => {
           return {