孙浩博 fixed：海康威视插件size问题u

src/components/HKVS/hkv.vue

@@ -1,208 +1,207 @@
 <template>
-    <div class="video-player">
-        <div id="divPlugin" class="divPlugin" ></div>
-        <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
+  <div class="video-player">
+    <div id="divPlugin" class="divPlugin"></div>
+    <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
         </div> -->
-        <!-- <div class="down" v-else>
+    <!-- <div class="down" v-else>
             <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
         </div> -->
-    </div>
+  </div>
 </template>
 <script>
 export default {
-name: 'videoPlayer',
-props: {
-        //从父组件传来的数据，IP、用户名、密码、端口号
-        companyVideoData:{
-            type:Object
+  name: "videoPlayer",
+  props: {
+    //从父组件传来的数据，IP、用户名、密码、端口号
+    companyVideoData: {
+      type: Object
     },
     //分屏
-    videoType:Number
-},
-    data(){
-        return {
-            plugin:true ,
-            iWidth: "100%",
-            iHeight: "100%",
-            webVideo: {},
-            iStreamType: 1,
-            iProtocol: 1,
-            bZeroChannel: false,
-            xmlDocData:{},
-            g_iWndIndex:0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
-            videoNum:''
-        };
+    videoType: {
+      type: Number,
+      default: 1
+    }
   },
-  created(){
+  data() {
+    return {
+      plugin: true,
+      iWidth: "100%",
+      iHeight: "100%",
+      webVideo: {},
+      iStreamType: 1,
+      iProtocol: 1,
+      bZeroChannel: false,
+      xmlDocData: {},
+      g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
+      videoNum: ""
+    };
   },
-  mounted(){
+  created() {},
+  mounted() {
     this.videoInitPlugin();
   },
-  destroyed(){
-       
-  },
+  destroyed() {},
   methods: {
-    videoInitPlugin(){
-        var iRet = WebVideoCtrl.I_CheckPluginInstall();
-        if (iRet === -1) {
-          alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
-          return;
-        }
-        this.initPlugin()
+    videoInitPlugin() {
+      var iRet = WebVideoCtrl.I_CheckPluginInstall();
+      if (iRet === -1) {
+        alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
+        return;
+      }
+      this.initPlugin();
     },
     //插件初始化
-    initPlugin () {
-        var that = this;
-        WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
-          bWndFull: true,//是否支持单窗口双击全屏，默I_CheckPluginInstall
-          iWndowType: 2,
-          bDebugMode:true,
-          cbSelWnd: function (xmlDoc) {
-		    },
-        });
-        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
-        // 检查插件是否最新
-        // if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
-        //     alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
-        //     // return;
-        // }
-        this.clickLogin(this.companyVideoData)
-      },
-    clickLogin(data) {
-        var that = this;
-        WebVideoCtrl.I_Login(data.IP, 1, data.Port, data.Username, data.Password, {
-            success: function (xmlDoc) {
-                console.log("开始预览");//不能删除
-                that.getChannelInfo();
-            },
-            error: function () {
-                console.log("login error");
-            }
-        });
-    }, 
-    //获取通道
-    getChannelInfo(){
-        var that = this;
-        // 模拟通道
-        WebVideoCtrl.I_GetAnalogChannelInfo(this.szIP, {
-            async: false,
-            success: function (xmlDoc) {
-                var oChannels = $(xmlDoc).find("VideoInputChannel");
-                nAnalogChannel = oChannels.length;
-                // console.log("获取模拟通道成功！")
-            },
-            error: function () {
-                // console.log("获取模拟通道失败！"+WebVideoCtrl.I_GetLastError())
-            }
-        });
-        // 数字通道
-        WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {
-            async: false,
-            success: function (xmlDoc) {
-                var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
-                that.initPlay()
-                that.$emit('func',oChannels)//获取数字通道传给父组件
-            },
-            error: function () {
-                WebVideoCtrl.I_GetLastError()
-                // console.log("获取数字通道失败！"+WebVideoCtrl.I_GetLastError())
-            }
-        });
-        // 零通道
-        WebVideoCtrl.I_GetZeroChannelInfo(this.szIP, {
-            async: false,
-            success: function (xmlDoc) {
-                var oChannels = $(xmlDoc).find("ZeroVideoChannel");
-            },
-            error: function () {
-                // console.log("获取零通道失败！"+WebVideoCtrl.I_GetLastError())
-            }
-        });
+    initPlugin() {
+      var that = this;
+      WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
+        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
+        iWndowType: this.videoType,
+        bDebugMode: true,
+        cbSelWnd: function (xmlDoc) {}
+      });
+      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
+      // 检查插件是否最新
+      // if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
+      //     alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
+      //     // return;
+      // }
+      this.clickLogin(this.companyVideoData);
     },
-    //初始化视频，为了让用户进来就可以看到视频播放
-    initPlay(){
-        let szIP = this.companyVideoData.IP;//ip地址
-        var	iStreamType = 1;
-        //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
-        for(let i = 0;i<16;i++){
-            var iChannelID = parseInt(i+1, 10);
-            WebVideoCtrl.I_StartRealPlay(szIP, {
-                iStreamType: iStreamType,
-                iChannelID: iChannelID,
-                iWndIndex:i
-            });
+    clickLogin(data) {
+      var that = this;
+      WebVideoCtrl.I_Login(data.IP, 1, data.Port, data.Username, data.Password, {
+        success: function (xmlDoc) {
+          console.log("开始预览"); //不能删除
+          that.getChannelInfo();
+        },
+        error: function () {
+          console.log("login error");
         }
+      });
     },
-    // 点击查看具体哪个监控
-    startRealPlay(oChannels) {
-        let that = this;
-        let szIP = this.companyVideoData.IP;//ip地址
-        let iChannelID = oChannels;//播放通道号
-        var	iStreamType = 1;
-        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
-        if (oWndInfo != null) {// 已经在播放了，先停止
-            WebVideoCtrl.I_Stop();
+    //获取通道
+    getChannelInfo() {
+      var that = this;
+      // 模拟通道
+      WebVideoCtrl.I_GetAnalogChannelInfo(this.szIP, {
+        async: false,
+        success: function (xmlDoc) {
+          var oChannels = $(xmlDoc).find("VideoInputChannel");
+          nAnalogChannel = oChannels.length;
+          // console.log("获取模拟通道成功！")
+        },
+        error: function () {
+          // console.log("获取模拟通道失败！"+WebVideoCtrl.I_GetLastError())
         }
+      });
+      // 数字通道
+      WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {
+        async: false,
+        success: function (xmlDoc) {
+          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+          that.initPlay();
+          that.$emit("func", oChannels); //获取数字通道传给父组件
+        },
+        error: function () {
+          WebVideoCtrl.I_GetLastError();
+          // console.log("获取数字通道失败！"+WebVideoCtrl.I_GetLastError())
+        }
+      });
+      // 零通道
+      WebVideoCtrl.I_GetZeroChannelInfo(this.szIP, {
+        async: false,
+        success: function (xmlDoc) {
+          var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+        },
+        error: function () {
+          // console.log("获取零通道失败！"+WebVideoCtrl.I_GetLastError())
+        }
+      });
+    },
+    //初始化视频，为了让用户进来就可以看到视频播放
+    initPlay() {
+      let szIP = this.companyVideoData.IP; //ip地址
+      var iStreamType = 1;
+      //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
+      for (let i = 0; i < 16; i++) {
+        var iChannelID = parseInt(i + 1, 10);
         WebVideoCtrl.I_StartRealPlay(szIP, {
-            iStreamType: iStreamType,
-            iChannelID: iChannelID,
+          iStreamType: iStreamType,
+          iChannelID: iChannelID,
+          iWndIndex: i
         });
+      }
     },
+    // 点击查看具体哪个监控
+    startRealPlay(oChannels) {
+      let that = this;
+      let szIP = this.companyVideoData.IP; //ip地址
+      let iChannelID = oChannels; //播放通道号
+      var iStreamType = 1;
+      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
+      if (oWndInfo != null) {
+        // 已经在播放了，先停止
+        WebVideoCtrl.I_Stop();
+      }
+      WebVideoCtrl.I_StartRealPlay(szIP, {
+        iStreamType: iStreamType,
+        iChannelID: iChannelID
+      });
+    }
   },
   //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
-  watch:{
-    companyVideoData:{  
-        handler(val,oldval) {
-                if(oldval){
-                    for(let i = 0;i<16;i++){
-                        WebVideoCtrl.I_Stop(i);//停止正在播放的页面
-                    }
-                    this.$emit('func',"")
-                    WebVideoCtrl.I_Logout(oldval.IP)
-                    this.clickLogin(this.companyVideoData)
-                }
-            },  
-                immediate:true,//关键
-                deep:true
-        },
-    videoType:{  
-        handler(val,oldval) {
-                if(oldval){
-                    WebVideoCtrl.I_ChangeWndNum(this.videoType);//分屏
-                    this.initPlay()
-                }
-            },  
-                immediate:true,//关键
-                deep:true
+  watch: {
+    companyVideoData: {
+      handler(val, oldval) {
+        if (oldval) {
+          for (let i = 0; i < 16; i++) {
+            WebVideoCtrl.I_Stop(i); //停止正在播放的页面
+          }
+          this.$emit("func", "");
+          WebVideoCtrl.I_Logout(oldval.IP);
+          this.clickLogin(this.companyVideoData);
         }
+      },
+      immediate: true, //关键
+      deep: true
+    },
+    videoType: {
+      handler(val, oldval) {
+        if (oldval) {
+          WebVideoCtrl.I_ChangeWndNum(this.videoType); //分屏
+          this.initPlay();
+        }
+      },
+      immediate: true, //关键
+      deep: true
     }
+  }
 };
 </script>
-<style  scoped>
-.video-player{
-    width: 100%;
-    height: 100%;
+<style scoped>
+.video-player {
+  width: 100%;
+  height: 100%;
 }
-.divPlugin{
-        width: 100%;
-        height: 100%;
-        color:red;
-        /* display: flex; */
-        justify-content: center;
-        align-items: center;
-        font-size: 18px;
-    }
- .down{
-        width: 100%;
-        height: 100%;
-        color:red;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 18px;
-       
-    }
-   .down a{
-        color:red;
-    }    
-</style>
+.divPlugin {
+  width: 100%;
+  height: 100%;
+  color: red;
+  /* display: flex; */
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+}
+.down {
+  width: 100%;
+  height: 100%;
+  color: red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+}
+.down a {
+  color: red;
+}
+</style>

src/views/taskScreen.css

@@ -1,1038 +1,1042 @@
 .el-input__inner {
-    background-color: transparent;
-    height: 24px !important;
-    line-height: 24px !important;
-    color:#fff;
-     border: 1px solid #05DDF7;
+  background-color: transparent;
+  height: 24px !important;
+  line-height: 24px !important;
+  color: #fff;
+  border: 1px solid #05ddf7;
 }
 .el-input__icon {
-    line-height: 24px;
+  line-height: 24px;
 }
 .el-select-dropdown {
-    color:#fff;
-    border: 1px solid #05DDF7;
-    background-color: #041937;
+  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.hover,
+.el-select-dropdown__item:hover {
+  background-color: transparent;
+  color: #fff;
 }
 .el-select-dropdown__item {
-   color:#fff;
+  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-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;
+  display: none;
 }
 .el-select .el-input__inner:focus {
-    border-color: #05DDF7;
+  border-color: #05ddf7;
 }
 .el-select .el-input__inner:active {
-    border-color: #05DDF7;
+  border-color: #05ddf7;
 }
 .el-select .el-input__inner:hover {
-    border-color: #05DDF7;
+  border-color: #05ddf7;
 }
 .el-select .el-input .el-select__caret {
-    color: #05DDF7;
+  color: #05ddf7;
 }
 .el-select-dropdown__item.selected {
-    color: #05DDF7 !important;
+  color: #05ddf7 !important;
 }
 .el-select:hover .el-input__inner {
-    border-color: #05DDF7 !important;
+  border-color: #05ddf7 !important;
 }
 
 .el-dialog__header {
-    padding: 0px;
+  padding: 0px;
 }
 .el-dialog__footer {
-    padding:0px;
+  padding: 0px;
 }
 .el-dialog__body {
-    padding: 0;
-    color: #606266;
-    font-size: 14px;
-    word-break: break-all;
-    border-radius: 6px;
+  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,.3);
-    box-sizing: border-box;
-    width: 50%;
+  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;
+  background: transparent;
+  color: #fff;
+  font-size: 12px;
 }
 .el-date-editor .el-range-separator {
-    color: #fff;
-    line-height: 16px;
-    font-size:12px;
+  color: #fff;
+  line-height: 16px;
+  font-size: 12px;
 }
 .el-date-editor .el-range__icon {
-    line-height: 16px;
-    font-size:12px;
+  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;
+  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;
+  color: #fff;
+  border: 1px solid #05ddf7;
+  background-color: #041937;
 }
 .el-date-table th {
-    color: #fff;
-    border-bottom: solid 1px #05DDF7;
+  color: #fff;
+  border-bottom: solid 1px #05ddf7;
 }
 .el-date-range-picker__content.is-left {
-    border-right: 1px solid #05DDF7;
+  border-right: 1px solid #05ddf7;
 }
 
 .el-range-editor.el-input__inner:hover {
-    border-color: #05DDF7;
+  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.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.end-date span,
+.el-date-table td.start-date span {
+  background-color: #041937;
 }
 .el-date-table td.today span {
-    color: #05DDF7;
-    font-weight: 700;
+  color: #05ddf7;
+  font-weight: 700;
 }
 
 .el-date-table td.today span:hover {
-    color: #05DDF7;
-    font-weight: 700;
+  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;
+  font-size: 12px;
+  color: #05ddf7;
+  border: 0;
+  background: 0 0;
+  cursor: pointer;
+  outline: 0;
+  margin-top: 8px;
 }
 
-
 .screen-wrapper {
-    /* margin: 0 !important; */
-    
+  /* margin: 0 !important; */
 }
 .el-dialog__wrapper {
-    z-index: 10000 !important;
+  z-index: 10000 !important;
 }
 .v-modal {
-    /* background: transparent !important; */
-    z-index: -1 !important;
+  /* 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;
+  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;
+  /* 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;
+  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;
+  position: absolute;
+  top: 31px;
+  left: 50%;
+  right: 50%;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
 }
 
 .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;
+  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%;
+  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;
+  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);
+  height: 100%;
+  margin-right: 10px;
+  width: calc(100% - 770px);
 }
 .center_chart_cotainer_task {
-	height: 100%;
-    margin-right: 10px;
-    width: 100%;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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%);
+  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/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;
+  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;
-
+  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;
+  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;
-   
+  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;
+  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;
+  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;
+  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;
+  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;
+  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: .5px;
-	white-space: nowrap;
+  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;
+  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;
+  margin: 10px 0 20px 0;
 }
 .task_item_left {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .left_point {
-    width: 10px;
-    height: 10px;
-    background: #60FBD7;
-    opacity: 0.5;
-    border-radius: 50%;
+  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;
+  width: 1px;
+  border-right: 2px dashed #297c76;
+  min-height: 170px;
+  margin-left: 3px;
 }
 .task_item_container {
-    display: flex;
-    align-items: flex-start;
+  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;
+  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; */
+  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;
+  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;
-	
+  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;
+  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;
+  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;
+  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;
+  flex: 1;
 }
 .task_content_box {
-    flex: 1;
+  flex: 1;
 }
 .date_between {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 .grade_box {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-	position: relative;
+  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;
+  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;
+  /* 去除滚动条 */
+  width: 0;
+  height: 0;
+  opacity: 0;
+  display: none;
 }
 .noTaskData {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 100px;
-    font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 100px;
+  font-weight: 600;
 }
 .inner_info_table_status {
-    width: 100%;
+  width: 100%;
 }
 .inner_info_table_precent {
-    text-align: center;
+  text-align: center;
 }
 .task_dialog_box {
-    background: linear-gradient(295deg, #000712 0%, #00040B 100%);
-    padding: 10px;
-    box-sizing: border-box;
-    color: #fff;
+  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;
+  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;
+  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; 
+  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;
+  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;
+  color: #f9fafa;
+  font-size: 12px;
 }
 .status_task_dialog {
-    color: #6CFCDB;
-    font-size: 12px;
+  color: #6cfcdb;
+  font-size: 12px;
 }
 .subject_item_header {
-    display:flex;
-    align-content: flex-start;
+  display: flex;
+  align-content: flex-start;
 }
 .subject_item_header:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 .subject_child_item {
-    padding-left: 25px;
-    line-height: 24px;
+  padding-left: 25px;
+  line-height: 24px;
 }
 .suvject_item_container {
-    color: #F9FAFA;
-    font-size: 14px;
-    padding-top: 8px;
-  
+  color: #f9fafa;
+  font-size: 14px;
+  padding-top: 8px;
 }
 .download_file:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 .download_file {
-    color: #6CFCDB;
+  color: #6cfcdb;
 }
 .view_table_style {
-	border: 1px solid #6CFCDB;
-	padding: 3px 20px;
-	box-sizing: border-box;
+  border: 1px solid #6cfcdb;
+  padding: 3px 20px;
+  box-sizing: border-box;
 }
 .view_table_style:hover {
-	cursor: pointer;
+  cursor: pointer;
 }
 .dialog_footer_box {
-    display: flex;
-    justify-content: flex-end;
-    padding: 10px;
-    box-sizing: border-box;
-    margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+  box-sizing: border-box;
+  margin-top: 24px;
 }
-.dialog_footer_box:hover{
-	/* cursor: pointer; */
+.dialog_footer_box:hover {
+  /* cursor: pointer; */
 }
 .task_item_header {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 15px;
-    margin-top: -10px;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 15px;
+  margin-top: -10px;
 }
 .fullScreenStyle:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 .task_header_top {
-    height: 47%;
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    color: #fff;
+  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: 50%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #fff;
-    padding-top: 10px;
-    box-sizing: border-box;
+  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: 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;
+  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;
+  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;
+  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;
-    
+  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;
-
-	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;
-    
+  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;
+  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;
+  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;
-
-	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;
+  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;
+  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;
+  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; 
+  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;
+  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;
+  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;
-
+  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;
+.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;
+  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;
-   
+  height: calc(100% - 48px);
+  overflow-y: auto;
 }
 .task_outer_cotnainer_status {
-    height: 100%;
+  height: 100%;
 }
 .map_more_box {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.moreBtn_style:hover{
-	cursor: pointer;
+.moreBtn_style:hover {
+  cursor: pointer;
 }
 .subject_list_container_int {
-	height: calc( 100% - 38px );
-    overflow-y: auto;
-    width: 100%;
+  height: calc(100% - 38px);
+  overflow-y: auto;
+  width: 100%;
 }
 .header {
-    background: #004279 !important;
+  background: #004279 !important;
 }
 .header-item {
-    font-size: 12px !important;
+  font-size: 12px !important;
 }
 .row-item {
-    font-size: 12px !important;
+  font-size: 12px !important;
 }
 .task_other_cotainer_scrool {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 .num_subject_left {
-	width: 75%;
-	height: 50%;
-    margin-right: 0px;
-    margin-top: 36px;
+  width: 75%;
+  height: 50%;
+  margin-right: 0px;
+  margin-top: 36px;
 }
 .num_subject_right {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	right: 10px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  right: 10px;
 }
 .num_subject_box {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
 }
 .num_subject_box_new {
-   text-align: left;
+  text-align: left;
 }
 .subject_status_precent {
-	position: absolute;
-    top: -5px;
-    font-size: 14px;
-    left: 39%;
-	font-weight: 600;
-	color: #37D3F3;
+  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;
+  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;
+  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; */
+  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; */
+  position: absolute;
+  bottom: -5px;
+  left: -5px;
+  transform: rotate(-90deg);
+  /* box-shadow: 0px 0px 4px 0px #94E1FD; */
 }
 .showLessStyle:hover {
-	cursor: pointer;
+  cursor: pointer;
 }
 .tempalte_no_data {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 14px;
-	color: #fff;
-	height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  height: 100%;
 }
 .new_style_grade {
-    position: absolute;
-    top: -80px;
-   
+  position: absolute;
+  top: -80px;
 }
 .border_new_style {
-    border: 1px solid #ccc;
-    border-top: none;
-    border-right: none;
+  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;
+  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;
+  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;
+  color: #37d3f3;
+  font-size: 12px;
 }
-.play_to_full:hover{
-    cursor: pointer;
+.play_to_full:hover {
+  cursor: pointer;
 }
 .plugin {
-    width: 100%;
-    height: 100%;
-}
+  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/taskScreen.vue

@@ -1,831 +1,819 @@
 <template>
-    <v-scale-screen width="2200" height="1080">
-	    <div  class="task_screen_cotainer">
-            <div class="task_header">「{{ currentTaskName }}」任务态势大屏</div>
-            <div class="content_cotainer">
-                <div class="center_chart_cotainer_task" id="taskItem">
-                    <div class="task_detail_cotainer_task" style="width:100%;">
-                        <div v-if="false" class="header_line_style">
-                            <div class="headerTitle"></div>
+  <v-scale-screen width="2200" height="1080">
+    <div class="task_screen_cotainer">
+      <div class="task_header">「{{ currentTaskName }}」任务态势大屏</div>
+      <div class="content_cotainer">
+        <div class="center_chart_cotainer_task" id="taskItem">
+          <div class="task_detail_cotainer_task" style="width: 100%">
+            <div v-if="false" class="header_line_style">
+              <div class="headerTitle"></div>
+            </div>
+            <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
+            <!-- 任务屏幕 -->
+            <div class="task_item_header">
+              <el-select
+                v-model="wholeOutTaskId"
+                placeholder="「切换任务」"
+                style="width: 270px"
+                @change="changeTask"
+                filterable
+              >
+                <el-option
+                  v-for="item in taskOPtion"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+              <el-image
+                @click="showMoreInfo('more')"
+                class="showLessStyle"
+                style="width: 30px; height: 22px; margin-right: 6px; margin-left: 10px"
+                :src="require('../assets/img/small.svg')"
+                fit="contain"
+              ></el-image>
+              <el-image
+                v-if="false"
+                @click="showMoreInfo('less')"
+                :src="require('../assets/img/iconMore.svg')"
+                fit="contain"
+                class="showLessStyle"
+                style="width: 30px; height: 22px; margin-right: 6px; margin-left: 10px"
+              ></el-image>
+            </div>
+            <div class="task_header_top">
+              <div class="subject_task_item_task">
+                <div class="task_outer_cotnainer_status">
+                  <div class="map_more_box">
+                    <div class="task_list_header" style="font-size: 16px; margin: 0 24px 8px 0; white-space: nowrap">
+                      <el-image
+                        style="width: 30px; height: 22px; margin-right: 6px"
+                        :src="require('../assets/img/rightIcon.svg')"
+                        fit="contain"
+                      ></el-image>
+                      课目分布
+                    </div>
+                    <div class="select_lsit_box">
+                      <el-select
+                        v-model="systemSubjectId"
+                        placeholder="切换系统名称"
+                        style="width: 55%; margin-right: 5px"
+                        @change="changeTaskAndSystem"
+                        clearable
+                        filterable
+                      >
+                        <el-option
+                          v-for="item in systemOption"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        ></el-option>
+                      </el-select>
+                      <el-select
+                        v-model="unitSubjectValue"
+                        placeholder="切换单位名称"
+                        style="width: 55%"
+                        clearable
+                        @change="changeTaskAndUnit"
+                        filterable
+                      >
+                        <el-option
+                          v-for="item in unitOption"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        ></el-option>
+                      </el-select>
+                    </div>
+                  </div>
+                  <div class="subject_list_container" id="subjectList">
+                    <template v-for="(item, index) in subjectDatas">
+                      <div class="subject_list_item_new" :key="index" @click="changeVideo(item.subjectName)">
+                        <div class="subject_list_header">
+                          <div>
+                            <div class="subject_list_name">
+                              {{ item.subjectName || "-" }}
+                            </div>
+                            <div class="orgainzers">
+                              参与人员：{{ (item.participatingPeople && item.participatingPeople.join(",")) || "-" }}
+                            </div>
+                          </div>
+                          <el-image
+                            style="width: 36px; height: 36px"
+                            :src="subjectMap[item.status]"
+                            fit="contain"
+                          ></el-image>
                         </div>
-                        <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
-                        <!-- 任务屏幕 -->
-                        <div class="task_item_header">
-                            <el-select 
-                                v-model="wholeOutTaskId" 
-                                placeholder="「切换任务」"
-                                style="width:270px;"
-                                @change="changeTask"
-                                filterable
-                            >
-                                <el-option
-                                    v-for="item in taskOPtion"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-
-                                >
-                                </el-option>
-                            </el-select>
-							<el-image
-								
-                                @click="showMoreInfo('more')"
-                                class="showLessStyle"
-                                style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
-                                :src="require('../assets/img/small.svg')"
-                                fit="contain"
-                            >
-                            </el-image>
-							<el-image
-								v-if="false"
-								@click="showMoreInfo('less')"
-								:src="require('../assets/img/iconMore.svg')"
-								fit="contain"
-								class="showLessStyle"
-                                style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
-							>
-							</el-image>
+                        <div class="system_task_style">
+                          <div>
+                            参加系统：{{ (item.participatingSystems && item.participatingSystems.join(",")) || "-" }}
+                          </div>
+                          <div v-if="item.status == '已完成'" class="view_table_style" @click="viewManData(item)">
+                            表格查看
+                          </div>
                         </div>
-                        <div class="task_header_top">
-                            <div class="subject_task_item_task">
-                                <div class="task_outer_cotnainer_status">
-                                    <div class="map_more_box">
-                                       <div class="task_list_header" style="font-size:16px; margin: 0 24px 8px 0; white-space: nowrap; ">
-                                            <el-image
-                                                style="width: 30px; height: 22px; margin-right:6px;"
-                                                :src="require('../assets/img/rightIcon.svg')"
-                                                fit="contain"
-                                            >
-                                            </el-image>
-                                            课目分布
-                                        </div>
-                                        <div class="select_lsit_box">
-                                            <el-select 
-                                                v-model="systemSubjectId" 
-                                                placeholder="切换系统名称"
-                                                style="width:55%; margin-right:5px;"
-                                                @change="changeTaskAndSystem"
-												clearable
-                                                filterable
-                                            >
-                                                <el-option
-                                                    v-for="item in systemOption"
-                                                    :key="item.value"
-                                                    :label="item.label"
-                                                    :value="item.value"
-
-                                                >
-                                                </el-option>
-                                            </el-select>
-                                            <el-select 
-                                                v-model="unitSubjectValue" 
-                                                placeholder="切换单位名称"
-                                                style="width:55%;"
-												clearable
-                                                @change="changeTaskAndUnit"
-                                                filterable
-                                            >
-                                                <el-option
-                                                    v-for="item in unitOption"
-                                                    :key="item.value"
-                                                    :label="item.label"
-                                                    :value="item.value"
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+              <div class="unit_map_box_task_new">
+                <div class="map_more_box">
+                  <div class="task_list_header" style="font-size: 16px; margin-bottom: 8px">
+                    <el-image
+                      style="width: 30px; height: 22px; margin-right: 6px"
+                      :src="require('../assets/img/rightIcon.svg')"
+                      fit="contain"
+                    ></el-image>
+                    流程图
+                  </div>
+                </div>
+                <form-task-process-viewer
+                  :processInstanceId="processInstanceId"
+                  :processDefinitionId="processDefinitionId"
+                ></form-task-process-viewer>
+              </div>
+            </div>
+            <div class="task_header_footer_task_new">
+              <div class="subject_task_item_task" style="width: 28.2%">
+                <div class="task_outer_cotnainer_status">
+                  <div class="task_outer_cotnainer_status">
+                    <div class="map_more_box">
+                      <div class="task_list_header" style="font-size: 16px; margin-bottom: 8px">
+                        <el-image
+                          style="width: 30px; height: 22px; margin-right: 6px"
+                          :src="require('../assets/img/rightIcon.svg')"
+                          fit="contain"
+                        ></el-image>
+                        指令监控
+                      </div>
+                    </div>
 
-                                                >
-                                                </el-option>
-                                            </el-select>
-                                        </div>
-                                    </div>
-                                    <div class="subject_list_container" id="subjectList">
-                                        <template v-for="(item,index) in subjectDatas">
-                                            <div class="subject_list_item_new" :key="index" @click="changeVideo(item.subjectName)">
-                                                <div class="subject_list_header">
-                                                    <div>
-                                                        <div class="subject_list_name">
-															{{  item.subjectName ||'-'  }}
-                                                        </div>
-                                                        <div class="orgainzers">
-                                                            参与人员：{{  item.participatingPeople && item.participatingPeople.join(',') || '-' }}
-                                                        </div>
-                                                    </div>
-                                                    <el-image
-                                                        style="width: 36px; height: 36px; "
-                                                        :src="subjectMap[item.status]"
-                                                        fit="contain"
-                                                    >
-                                                    </el-image>
-                                                </div>
-                                                <div class="system_task_style">
-													<div>参加系统：{{ item.participatingSystems && item.participatingSystems.join(',') || '-'}}</div>
-													<div 
-														v-if="item.status=='已完成'"
-														class="view_table_style" 
-														@click="viewManData(item)">
-														表格查看
-													</div>
-                                                </div>
-                                            </div>
-                                         </template>
+                    <div class="subject_list_container_int" id="moninter">
+                      <div class="task_other_cotainer_scrool">
+                        <myscrollBoard :key="updatekey" :config="scrollTableConfig" style="width: 100%; height: 100%" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="unit_map_box_task">
+                <!-- <div class="task_outer_cotnainer_status"> -->
+                <div class="map_more_box">
+                  <div class="task_list_header" style="font-size: 16px; margin-bottom: 8px">
+                    <el-image
+                      style="width: 30px; height: 22px; margin-right: 6px"
+                      :src="require('../assets/img/rightIcon.svg')"
+                      fit="contain"
+                    ></el-image>
+                    训练态势监控
+                  </div>
+                  <el-image
+                    @click="showFull('allVideo')"
+                    style="width: 20px; height: 20px; margin-right: 6px; margin-top: -10px"
+                    :src="require('../assets/img/iconMore.svg')"
+                    fit="contain"
+                    class="moreBtn_style"
+                  ></el-image>
+                </div>
+                <div class="video_title">{{ videoPlayerName[0] }}</div>
 
-                                    </div>
+                <!-- <div class="video_body1"><HKVideo :companyVideoData="mainVideoData"></HKVideo></div> -->
+                <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
 
-                                </div>
-                                
-                            </div>
-                            <div class="unit_map_box_task_new">
-								<div class="map_more_box">
-									<div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
-										<el-image
-											style="width: 30px; height: 22px; margin-right:6px;"
-											:src="require('../assets/img/rightIcon.svg')"
-											fit="contain"
-										>
-										</el-image>
-										流程图
-									</div>
-                                   
-								</div>
-                                <form-task-process-viewer :processInstanceId="processInstanceId" :processDefinitionId="processDefinitionId"></form-task-process-viewer>
-                            </div>
-                            
-                        </div>
-                        <div class="task_header_footer_task_new">
-                            <div class="subject_task_item_task" style="width:28.2%;">
-                                <div class="task_outer_cotnainer_status">
-                                    <div class="task_outer_cotnainer_status">
-                                        <div class="map_more_box">
-                                            <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
-                                                <el-image
-                                                    style="width: 30px; height: 22px; margin-right:6px;"
-                                                    :src="require('../assets/img/rightIcon.svg')"
-                                                    fit="contain"
-                                                >
-                                                </el-image>
-                                                指令监控
-                                            </div>
-                                        </div>
+                <!-- <div><HKVideo :companyVideoData="mainVideoData"></HKVideo></div> -->
 
-                                        <div class="subject_list_container_int" id="moninter">
-                                            <div class="task_other_cotainer_scrool">
-                                                <myscrollBoard
-                                                    :key="updatekey"
-                                                    :config="scrollTableConfig" 
-                                                    style="width:100%; height:100%"
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-								</div>
-                            </div>
-                            <div class="unit_map_box_task">
-                                <div class="task_outer_cotnainer_status">
-                                    <div class="map_more_box">
-                                        <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
-                                            <el-image
-                                                style="width: 30px; height: 22px; margin-right:6px;"
-                                                :src="require('../assets/img/rightIcon.svg')"
-                                                fit="contain"
-                                            >
-                                            </el-image>
-                                            训练态势监控
-                                        </div>
-                                        <el-image
-                                            @click="showFull('allVideo')"
-                                            style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
-                                            :src="require('../assets/img/iconMore.svg')"
-                                            fit="contain"
-                                            class="moreBtn_style"
-                                        >
-                                        </el-image>
-                                    </div>
-                                    <div class="video_title">{{videoPlayerName[0]}}</div>
-                                    <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
-
-                                   <div> <HKVideo :companyVideoData="mainVideoData"></HKVideo></div>
-                                  
-                                   
-									<!-- <div class="center_no_data"> -->
-										<!-- <el-image
+                <!-- <div class="center_no_data"> -->
+                <!-- <el-image
                                             style="width: 100px; height: 100px; margin-right:6px;"
                                             :src="require('../assets/img/build.png')"
                                             fit="contain"
                                         >
                                         </el-image> -->
-										<!-- <div> -->
-                                           
-                                        <!-- </div> -->
-									<!-- </div> -->
-                                </div>
-                            </div>
-                            <div class="commandMonitoring_task">
-								<div class="task_outer_cotnainer_status">
-                                    <div class="video_flex_style" style="padding-top:12px;">
-                                        <div>
-                                            <div class="video_title">{{videoPlayerName[1]}}</div>
-                                            <video id="videoPlayer_first" class="video-js" muted></video>
-                                        </div>
-                                        <div>
-                                            <div class="video_title">{{videoPlayerName[2]}}</div>
-                                            <video id="videoPlayer_second" class="video-js" muted></video>
-                                        </div>
-                                        <div>
-                                            <div class="video_title">{{videoPlayerName[3]}}</div>
-                                            <video id="videoPlayer_third" class="video-js" muted></video>
-                                        </div>
-                                        <div>
-                                            <div class="video_title">{{videoPlayerName[4]}}</div>
-                                            <video id="videoPlayer_fourth" class="video-js" muted></video>
-                                        </div>
-                                    </div>
-									<div class="center_no_data" v-if="false">
-										<el-image
-                                            style="width: 100px; height: 100px; margin-right:6px;"
-                                            :src="require('../assets/img/build.png')"
-                                            fit="contain"
-                                        >
-                                        </el-image>
-										<div>系统正在建设中，敬请期待～</div>
-									</div>
-								</div>
-                            </div>
-                        </div>
-                    </div>
+                <!-- <div> -->
+
+                <!-- </div> -->
+                <!-- </div> -->
+                <!-- </div> -->
+              </div>
+              <div class="commandMonitoring_task">
+                <div class="map_more_box">
+                  <div class="task_list_header" style="font-size: 16px; margin-bottom: 8px">
+                    <el-image
+                      style="width: 30px; height: 22px; margin-right: 6px"
+                      :src="require('../assets/img/rightIcon.svg')"
+                      fit="contain"
+                    ></el-image>
+                    训练态势监控
+                  </div>
+                  <el-image
+                    @click="showFull('allVideo')"
+                    style="width: 20px; height: 20px; margin-right: 6px; margin-top: -10px"
+                    :src="require('../assets/img/iconMore.svg')"
+                    fit="contain"
+                    class="moreBtn_style"
+                  ></el-image>
                 </div>
-                <!-- 任务详情弹窗 -->
-                <el-dialog
-                    title=""
-                    :show-close="false"
-                    :destroy-on-close="true"
-                    :visible.sync="dialogVisible"
-                    width="650px"
-					top="300px"
-                >
+                <div class="video_body2"><HKVideo :companyVideoData="mainVideoData" :videoType="2"></HKVideo></div>
+                <!-- <div class="task_outer_cotnainer_status">
+                  <div class="video_flex_style" style="padding-top: 12px">
                     <div>
-                        <div class="task_detail_dialog">
-                            <div class="header_line_style"></div>
-							<div class="task_dialog_box_other" v-if="dialogType==2">
-								<el-table
-									:data="gridData"
-									:header-cell-style="changeHeaderCellStyle" 
-                					:cell-style="changeCellStyle"
-									stripe
-									:border="true"
-								>
-									<el-table-column align="center" property="participantName" label="姓名" max-width="350">
-                                    </el-table-column>
-									<el-table-column align="center" property="score" label="成绩" max-width="300">
-                                    </el-table-column>
-								</el-table>
-							</div>
-                            <div class="dialog_footer_box">
-                                <div class="view_more" @click="dialogVisible=false" style="color:#fff; padding: 3px 30px ;">
-                                    关闭
-                                </div>
-                            </div>
-                        </div>
+                      <div class="video_title">{{ videoPlayerName[1] }}</div>
+                      <video id="videoPlayer_first" class="video-js" muted></video>
+                    </div>
+                    <div>
+                      <div class="video_title">{{ videoPlayerName[2] }}</div>
+                      <video id="videoPlayer_second" class="video-js" muted></video>
                     </div>
-                </el-dialog>
+                    <div>
+                      <div class="video_title">{{ videoPlayerName[3] }}</div>
+                      <video id="videoPlayer_third" class="video-js" muted></video>
+                    </div>
+                    <div>
+                      <div class="video_title">{{ videoPlayerName[4] }}</div>
+                      <video id="videoPlayer_fourth" class="video-js" muted></video>
+                    </div>
+                  </div>
+                  <div class="center_no_data" v-if="false">
+                    <el-image
+                      style="width: 100px; height: 100px; margin-right: 6px"
+                      :src="require('../assets/img/build.png')"
+                      fit="contain"
+                    ></el-image>
+                    <div>系统正在建设中，敬请期待～</div>
+                  </div>
+                </div> -->
+              </div>
             </div>
+          </div>
         </div>
-    </v-scale-screen>
+        <!-- 任务详情弹窗 -->
+        <el-dialog
+          title=""
+          :show-close="false"
+          :destroy-on-close="true"
+          :visible.sync="dialogVisible"
+          width="650px"
+          top="300px"
+        >
+          <div>
+            <div class="task_detail_dialog">
+              <div class="header_line_style"></div>
+              <div class="task_dialog_box_other" v-if="dialogType == 2">
+                <el-table
+                  :data="gridData"
+                  :header-cell-style="changeHeaderCellStyle"
+                  :cell-style="changeCellStyle"
+                  stripe
+                  :border="true"
+                >
+                  <el-table-column
+                    align="center"
+                    property="participantName"
+                    label="姓名"
+                    max-width="350"
+                  ></el-table-column>
+                  <el-table-column align="center" property="score" label="成绩" max-width="300"></el-table-column>
+                </el-table>
+              </div>
+              <div class="dialog_footer_box">
+                <div class="view_more" @click="dialogVisible = false" style="color: #fff; padding: 3px 30px">关闭</div>
+              </div>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+    </div>
+  </v-scale-screen>
 </template>
 <script>
-import * as echarts from 'echarts';
-import myFlylineChartEnhanced from '../components/my-flyline-chart-enhanced/index'
-import formTaskProcessViewer from '@/components/workflow/formTaskProcessViewer'
-import myscrollBoard from '../components/myscroll-board/src/main'
-import sacleBox from '../components/sacle-box/index'
-import { request } from '../utils/request';
-var uploadedDataURL = require('../../public/json/taiyuan.json')
-import './taskScreen.css'
-import Videojs from "video.js"; // 引入Videojs 
-import FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
-import HKVideo from '../components/HKVS/hkv.vue'
+import * as echarts from "echarts";
+import myFlylineChartEnhanced from "../components/my-flyline-chart-enhanced/index";
+import formTaskProcessViewer from "@/components/workflow/formTaskProcessViewer";
+import myscrollBoard from "../components/myscroll-board/src/main";
+import sacleBox from "../components/sacle-box/index";
+import { request } from "../utils/request";
+var uploadedDataURL = require("../../public/json/taiyuan.json");
+import "./taskScreen.css";
+import Videojs from "video.js"; // 引入Videojs
+import FormTaskProcessViewer from "../components/workflow/formTaskProcessViewer.vue";
+import HKVideo from "../components/HKVS/hkv.vue";
 
 export default {
-    components:{
-        myFlylineChartEnhanced,
-        sacleBox,
-        myscrollBoard,
-       HKVideo,
-        FormTaskProcessViewer
+  components: {
+    myFlylineChartEnhanced,
+    sacleBox,
+    myscrollBoard,
+    HKVideo,
+    FormTaskProcessViewer
+  },
+  data() {
+    return {
+      systemFinshedValue: "",
+      unitFinshedValue: "",
+      wholeOutTaskId: "",
+      systemSubjectId: "",
+      unitSubjectValue: "",
+      subjectItem: {},
+      processDefinitionId: "taskOne:22:4775c887-d48a-11ed-9085-54bf641e8ec2",
+      processInstanceId: "d9b3f37b-d4ed-11ed-9fd5-52540097d374",
+      moreFlag: true,
+      dialogVisible: false,
+      taskList: [],
+      websocket: null, //建立的连接
+      websocketOrder: null, //建立的连接
+      updatekey: "1",
+      scrollTableConfig: {
+        header: ["指令名称", "指令内容", "指令时间"],
+        waitTime: 1500,
+        data: [],
+        columnWidth: [80],
+        oddRowBGC: "#072347",
+        evenRowBGC: "#021736"
+      },
+      dialogType: 1,
+      subjectDatas: [],
+      subjectMap: {
+        待执行: require("../assets/img/waite.png"),
+        执行中: require("../assets/img/doing.png"),
+        已完成: require("../assets/img/finshed.png")
+      },
+      instructList: [],
+      unitOption: [],
+      systemOption: [],
+      taskOPtion: [],
+      currentTaskName: "",
+      currentTaskGrade: "",
+      unitSubGradeValue: "",
+      gridData: [],
+      dataSrc: ["", "", "", "", ""],
+      completionRate: false,
+      playerList: [],
+      videoPlayerName: ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"],
+      videoList: [
+        "videoPlayerTask",
+        "videoPlayer_first",
+        "videoPlayer_second",
+        "videoPlayer_third",
+        "videoPlayer_fourth"
+      ],
+      mainVideoData: {}
+    };
+  },
+  methods: {
+    // 表格样式修改
+    changeHeaderCellStyle(row, column, rowIndex, columnIndex) {
+      if (row.columnIndex === 0) {
+        return "background: #004279 ; color:#fff;"; // 修改的样式
+      } else {
+        return "background: #004279 ;color:#fff; ";
+      }
+    },
+    changeCellStyle(row, column, rowIndex, columnIndex) {
+      if (row.columnIndex === 0) {
+        return "background: #0A427C  ; color:#fff;"; // 修改的样式
+      } else {
+        return "background: #0A427C ; color:#fff;";
+      }
+    },
+    // 获取全部系统
+    async getAllSystems() {
+      let params = {};
+      const res = await request("/dt_screen/rest/v1/screen/listSystem/", "get", params, false);
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        console.log("获取全部系统", data);
+        this.systemOption = data.map((item) => {
+          return {
+            label: item.systemName,
+            value: item.systemId
+          };
+        });
+        this.systemFinshedValue = this.systemOption[0].value;
+      } else {
+        this.$message.error(errorMessage);
+      }
     },
-    data() {
-        return {
-			systemFinshedValue:'',
-			unitFinshedValue:'',
-			wholeOutTaskId:'',
-			systemSubjectId:'',
-			unitSubjectValue:'',
-            subjectItem:{},
-            processDefinitionId: "taskOne:22:4775c887-d48a-11ed-9085-54bf641e8ec2",
-            processInstanceId:"d9b3f37b-d4ed-11ed-9fd5-52540097d374",
-            moreFlag:true,
-            dialogVisible:false,
-            taskList:[],
-            websocket: null, //建立的连接
-            websocketOrder: null, //建立的连接
-            updatekey:'1',
-            scrollTableConfig:{
-                header: ['指令名称', '指令内容', '指令时间'],
-                waitTime:1500,
-                data: [],
-                columnWidth: [80],
-                oddRowBGC:'#072347',
-                evenRowBGC:'#021736'
-            },
-			dialogType:1,
-			subjectDatas:[],
-			subjectMap:{
-				'待执行':require('../assets/img/waite.png'),
-				'执行中':require('../assets/img/doing.png'),
-				'已完成':require('../assets/img/finshed.png') ,
-			},
-			instructList:[],
-			unitOption:[],
-            systemOption:[],
-            taskOPtion:[],
-            currentTaskName:'',
-			currentTaskGrade:'',
-			unitSubGradeValue:'',
-            gridData:[],
-            dataSrc:['','','','',''],
-			completionRate:false,
-			playerList:[],
-            videoPlayerName:['监控名称','监控名称','监控名称','监控名称','监控名称'],
-            videoList:['videoPlayerTask','videoPlayer_first','videoPlayer_second','videoPlayer_third','videoPlayer_fourth'],
-            mainVideoData:{}
+    // 获取全部单位
+    async getAllUnits() {
+      let params = {};
+      const res = await request("/dt_screen/rest/v1/screen/listUnit/", "get", params, false);
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        console.log("获取全部单位", data);
+        // 获取任务数据
+        this.getTaskList();
+        this.unitOption = data.map((item) => {
+          return {
+            label: item.unitName,
+            value: item.unitId
+          };
+        });
+        this.unitFinshedValue = this.unitOption[0].value;
+        this.unitSubGradeValue = this.unitOption[0].value;
+      } else {
+        this.$message.error(errorMessage);
+      }
+    },
+    // 获取任务列表
+    async getTaskList() {
+      let params = {};
+      const res = await request("/dt_screen/rest/v2/task/listCurrentTask/", "post", params, false);
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        console.log("获取任务列表", data);
+        this.taskList = data;
+        this.taskOPtion = data.map((item) => {
+          return {
+            label: item.taskName,
+            value: item.taskId
+          };
+        });
+        this.wholeOutTaskId = data[0].taskId;
+        this.currentTaskName = data[0].taskName;
+        this.currentTaskGrade = data[0].syntheticTaskScore;
+        // 获取地图的信息
+        if (data.length) {
+          // 获取任务的课目信息
+          this.getSubjectList(data[0].taskId);
+          // 获取任务的指令信息
+          this.getinstructList(data[0].taskId);
+          // 建立指令websocket 链接
+          this.initInstructWebsoket();
         }
+      } else {
+        this.$message.error(errorMessage);
+      }
+    },
+    // 切换任务
+    changeTask() {
+      this.systemSubjectId = "";
+      this.unitSubjectValue = "";
+      this.currentTaskName = this.taskOPtion.find((item) => item.value == this.wholeOutTaskId).label;
+      this.currentTaskGrade = this.taskList.find((item) => item.taskId == this.wholeOutTaskId).syntheticTaskScore;
+      // 获取任务的课目信息
+      this.getSubjectList(this.wholeOutTaskId);
+      // 获取任务的指令信息
+      this.getinstructList(this.wholeOutTaskId);
+      // 建立指令websocket 链接
+      this.initInstructWebsoket();
+    },
+    changeTaskAndUnit() {
+      this.systemSubjectId = "";
+      if (this.unitSubjectValue) {
+        this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue);
+      } else {
+        this.getSubjectList(this.wholeOutTaskId);
+      }
+    },
+    changeTaskAndSystem() {
+      this.unitSubjectValue = "";
+      if (this.systemSubjectId) {
+        this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId);
+      } else {
+        this.getSubjectList(this.wholeOutTaskId);
+      }
+    },
+    // 获取任务的课目信息
+    async getSubjectList(taskId) {
+      let params = {};
+      const res = await request(`/dt_screen/rest/v1/subject/list/${taskId}`, "get", params, false);
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        console.log("获取任务的课目信息", data);
+        this.subjectDatas = data;
+      } else {
+        this.$message.error(errorMessage);
+      }
+    },
+    // 获取任务的指令
+    async getinstructList(taskId) {
+      let params = {};
+      const res = await request(`/dt_screen/rest/v1/order/list/${taskId}`, "get", params, false);
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        console.log("获取任务的指令", data);
+        this.instructList = data;
+        let tempData = [];
+        data.forEach((item) => {
+          tempData.push([item.subjectName, item.content, item.time]);
+        });
+        this.scrollTableConfig.data = tempData;
+        this.updatekey = new Date().getTime();
+      } else {
+        this.$message.error(errorMessage);
+      }
+    },
+    // 切换单位再结合任务id 获取课目课目列表
+    async getUnitSubjectList(taskId, unitId) {
+      let params = {};
+      const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, "get", params, false);
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        this.subjectDatas = data;
+      } else {
+        this.$message.error(errorMessage);
+      }
+    },
+    // 切换系统再结合任务id 获取课目课目列表
+    async getSystemSubjectList(taskId, systemId) {
+      let params = {};
+      const res = await request(
+        `/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`,
+        "get",
+        params,
+        false
+      );
+      const { errorCode, errorMessage, success, data } = res.data;
+      if (success) {
+        this.subjectDatas = data;
+      } else {
+        this.$message.error(errorMessage);
+      }
+    },
+    // 建立websocket 链接 任务
+    initWebsoket() {
+      this.websocket = new WebSocket("ws://43.143.221.128:8084/websocket/task"); //这里将http替换成ws
+      switch (this.websocket.readyState) {
+        case 0:
+          console.log("正在连接");
+          break;
+        case 1:
+          console.log("已经链接并且可以通讯");
+          break;
+        case 2:
+          console.log("连接正在关闭");
+          break;
+        case 3:
+          console.log("连接已关闭或者没有链接成功");
+          break;
+      }
+      this.websocket.onopen = this.websocketsend; //websoket连接成功
+      this.websocket.onmessage = this.websocketonmessage; //websoket收到信息
+      this.websocket.onclose = this.websocketclose; //websoket连接关闭
+    },
+    websocketsend() {
+      console.log("ws 连接成功");
+    },
+    websocketonmessage(msg) {
+      // 获取全部单位
+      this.getAllUnits();
+      // 获取全部系统
+      this.getAllSystems();
+      console.log("收到任务信息", msg);
+    },
+    websocketclose() {
+      console.log("ws 连接关闭");
+      this.initWebsoket(); //重新建立连接
+    },
+    initInstructWebsoket() {
+      // 指令的ws
+      this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`); //这里将http替换成ws
+      switch (this.websocketOrder.readyState) {
+        case 0:
+          console.log("正在连接");
+          break;
+        case 1:
+          console.log("已经链接并且可以通讯");
+          break;
+        case 2:
+          console.log("连接正在关闭");
+          break;
+        case 3:
+          console.log("连接已关闭或者没有链接成功");
+          break;
+      }
+      this.websocketOrder.onopen = this.orderWebsocketsend; //websoket连接成功
+      this.websocketOrder.onmessage = this.orderWebsocketonmessage; //websoket收到信息
+      this.websocketOrder.onclose = this.orderWebsocketclose; //websoket连接关闭
+    },
+    orderWebsocketsend() {
+      console.log("ws 连接成功");
+    },
+    orderWebsocketonmessage(msg) {
+      // 获取任务的指令信息
+      this.getinstructList(this.wholeOutTaskId);
+      console.log("收到指令信息", msg);
+    },
+    orderWebsocketclose() {
+      console.log("ws 连接关闭");
+      this.initInstructWebsoket(); //重新建立连接
+    },
+    // 查看成绩表格
+    viewManData(item) {
+      this.dialogType = 2;
+      this.dialogVisible = true;
+      console.log("item", item);
+      const { subjectScore } = item;
+      this.gridData = subjectScore;
+    },
+    // 全屏事件
+    showFull(id) {
+      console.log("ckx debug  监控大屏");
+      this.$router.push("/monitorScreen");
+    },
+    // 退出全屏
+    exitFull() {
+      let exitFullScreen =
+        document.exitFullScreen ||
+        document.mozCancelFullScreen ||
+        document.webkitExitFullscreen ||
+        document.msExitFullscreen;
+      if (exitFullScreen) {
+        exitFullScreen.call(document);
+      }
+      this.updatekey = new Date().getTime();
+    },
+    // 展开全屏
+    requestFullScreen(elem) {
+      console.log("ckx debug ");
+      // #兼容不同的浏览器
+      var requestMethod =
+        elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullScreen;
+      if (requestMethod) {
+        requestMethod.call(elem);
+      } else if (typeof window.ActiveXObject !== "undefined") {
+        // #模拟F11 实现全屏
+        var wscript = new ActiveXObject("WScript.Shell");
+        if (wscript !== null) {
+          wscript.SendKeys("{F11}");
+        }
+      }
+      let that = this;
+      window.addEventListener("resize", function () {
+        //执行
+        let isFull =
+          document.mozFullScreen ||
+          document.fullScreen ||
+          //谷歌浏览器及Webkit内核浏览器
+          document.webkitIsFullScreen ||
+          document.webkitRequestFullScreen ||
+          document.mozRequestFullScreen ||
+          document.msFullscreenEnabled;
+        if (isFull === undefined) {
+          that.exitFull();
+        } else {
+        }
+      });
+    },
+    checkFull() {
+      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
+      //火狐浏览器
+      let isFull =
+        document.mozFullScreen ||
+        document.fullScreen ||
+        //谷歌浏览器及Webkit内核浏览器
+        document.webkitIsFullScreen ||
+        document.webkitRequestFullScreen ||
+        document.mozRequestFullScreen ||
+        document.msFullscreenEnabled;
+      if (isFull === undefined) {
+        isFull = false;
+      }
+      return isFull;
+    },
+    showMoreInfo(type) {
+      if (type == "more") {
+        this.$router.push("/situationScreen");
+      } else {
+        this.$router.push("/taskScreen");
+      }
     },
-    methods:{
-		// 表格样式修改
-		changeHeaderCellStyle(row,column, rowIndex, columnIndex){
-            if(row.columnIndex === 0){
-                return 'background: #004279 ; color:#fff;'; // 修改的样式
-            }else {
-                return 'background: #004279 ;color:#fff; ';
-            }
-        },
-        changeCellStyle(row,column, rowIndex, columnIndex){
-            if(row.columnIndex === 0){
-                return 'background: #0A427C  ; color:#fff;'; // 修改的样式
-            }else {
-                return 'background: #0A427C ; color:#fff;';
-            }
-        },
-        // 获取全部系统
-		async getAllSystems(){
-            let params={}
-            const res = await request('/dt_screen/rest/v1/screen/listSystem/', 'get', params, false)
-            const { errorCode, errorMessage, success,data } = res.data;
-            if (success) {
-                console.log('获取全部系统', data);
-				this.systemOption = data.map((item)=>{
-					return {
-						label:item.systemName,
-						value: item.systemId
-					}
-                })
-                this.systemFinshedValue=this.systemOption[0].value
-            } else {
-                this.$message.error(errorMessage)
-            }
-        },
-		// 获取全部单位
-		async getAllUnits (){
-			let params={}
-            const res = await request('/dt_screen/rest/v1/screen/listUnit/', 'get', params, false)
-            const { errorCode, errorMessage, success,data } = res.data;
-            if (success) {
-                console.log('获取全部单位', data);
-				// 获取任务数据
-				this.getTaskList()
-				this.unitOption = data.map((item)=>{
-					return {
-						label:item.unitName,
-						value: item.unitId
-					}
-                })
-                this.unitFinshedValue=this.unitOption[0].value
-				this.unitSubGradeValue=this.unitOption[0].value
-            } else {
-                this.$message.error(errorMessage)
-            }
-        },
-        // 获取任务列表
-        async getTaskList(){
-            let params={}
-            const res = await request('/dt_screen/rest/v2/task/listCurrentTask/', 'post', params, false)
-            const { errorCode, errorMessage, success,data } = res.data;
-            if (success) {
-                console.log('获取任务列表', data);
-                this.taskList= data
-                this.taskOPtion = data.map((item)=>{
-                    return {
-                        label: item.taskName,
-                        value: item.taskId
-                    }
-                })
-                this.wholeOutTaskId=data[0].taskId
-                this.currentTaskName= data[0].taskName
-				this.currentTaskGrade= data[0].syntheticTaskScore
-                // 获取地图的信息
-                if(data.length){
-					// 获取任务的课目信息
-					this.getSubjectList(data[0].taskId)
-					// 获取任务的指令信息
-					this.getinstructList(data[0].taskId)
-                    // 建立指令websocket 链接
-                    this.initInstructWebsoket()
-                }
-            } else {
-                this.$message.error(errorMessage)
-            }
-        },
-        // 切换任务
-        changeTask(){
-			this.systemSubjectId=''
-			this.unitSubjectValue=''
-            this.currentTaskName = this.taskOPtion.find( item => item.value== this.wholeOutTaskId ).label
-			this.currentTaskGrade = this.taskList.find( item=> item.taskId==this.wholeOutTaskId).syntheticTaskScore
-            // 获取任务的课目信息
-            this.getSubjectList(this.wholeOutTaskId)
-            // 获取任务的指令信息
-            this.getinstructList(this.wholeOutTaskId)
-            // 建立指令websocket 链接
-            this.initInstructWebsoket()
-        },
-        changeTaskAndUnit() {
-			this.systemSubjectId=''
-			if(this.unitSubjectValue){
-				this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue)
-			}else {
-				this.getSubjectList(this.wholeOutTaskId)
-			}
-        },
-		changeTaskAndSystem() {
-			this.unitSubjectValue=''
-			if(this.systemSubjectId){
-				this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId)
-			}else {
-				this.getSubjectList(this.wholeOutTaskId)
-			}
-        },
-        // 获取任务的课目信息
-		async getSubjectList(taskId){
-			let params={}
-            const res = await request(`/dt_screen/rest/v1/subject/list/${taskId}`, 'get', params, false)
-            const { errorCode, errorMessage, success,data } = res.data;
-            if (success) {
-                console.log('获取任务的课目信息', data);
-				this.subjectDatas=data
-                
-            } else {
-                this.$message.error(errorMessage)
-            }
-        },
-        // 获取任务的指令
-		async getinstructList (taskId) {
-			let params={}
-            const res = await request(`/dt_screen/rest/v1/order/list/${taskId}`, 'get', params, false)
-            const { errorCode, errorMessage, success,data } = res.data;
-            if (success) {
-                console.log('获取任务的指令', data);
-                this.instructList=data
-                let tempData=[]
-                data.forEach((item)=>{
-                    tempData.push([item.subjectName,item.content,item.time])
-                })
-                this.scrollTableConfig.data=tempData
-                this.updatekey=new Date().getTime()
-                
-            } else {
-                this.$message.error(errorMessage)
-            }
-		},
-		// 切换单位再结合任务id 获取课目课目列表
-		async getUnitSubjectList(taskId,unitId){
-			let params={}
-            const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, 'get', params, false)
-            const { errorCode, errorMessage, success,data } = res.data;
-            if (success) {
-				this.subjectDatas=data
-            } else {
-                this.$message.error(errorMessage)
-            }
-        },
-		// 切换系统再结合任务id 获取课目课目列表
-		async getSystemSubjectList(taskId,systemId){
-			let params={}
-            const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`, 'get', params, false)
-            const { errorCode, errorMessage, success,data } = res.data;
-            if (success) {
-				this.subjectDatas=data
-            } else {
-                this.$message.error(errorMessage)
-            }
-		},
-        // 建立websocket 链接 任务
-        initWebsoket(){
-            this.websocket = new WebSocket('ws://43.143.221.128:8084/websocket/task');//这里将http替换成ws
-            switch (this.websocket.readyState) {
-                case 0:
-                    console.log("正在连接");
-                    break;
-                case 1:
-                    console.log("已经链接并且可以通讯");
-                    break;
-                case 2:
-                    console.log("连接正在关闭");
-                    break;
-                case 3:
-                    console.log("连接已关闭或者没有链接成功");
-                break;
-            };
-            this.websocket.onopen = this.websocketsend;//websoket连接成功
-            this.websocket.onmessage =this. websocketonmessage;//websoket收到信息
-            this.websocket.onclose = this.websocketclose;//websoket连接关闭
-        },
-        websocketsend(){
-            console.log('ws 连接成功');
-        },
-        websocketonmessage(msg){
-            // 获取全部单位
-            this.getAllUnits()
-            // 获取全部系统
-            this.getAllSystems()
-            console.log('收到任务信息',msg);
-        },
-        websocketclose(){
-            console.log('ws 连接关闭');
-            this.initWebsoket();//重新建立连接
-        },
-        initInstructWebsoket(){
-            // 指令的ws 
-            this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
-            switch (this.websocketOrder.readyState) {
-                case 0:
-                    console.log("正在连接");
-                    break;
-                case 1:
-                    console.log("已经链接并且可以通讯");
-                    break;
-                case 2:
-                    console.log("连接正在关闭");
-                    break;
-                case 3:
-                    console.log("连接已关闭或者没有链接成功");
-                break;
-            };
-            this.websocketOrder.onopen = this.orderWebsocketsend;//websoket连接成功
-            this.websocketOrder.onmessage =this. orderWebsocketonmessage;//websoket收到信息
-            this.websocketOrder.onclose = this.orderWebsocketclose;//websoket连接关闭
-        },
-        orderWebsocketsend(){
-            console.log('ws 连接成功');
-        },
-        orderWebsocketonmessage(msg){
-            // 获取任务的指令信息
-            this.getinstructList(this.wholeOutTaskId)
-            console.log('收到指令信息',msg);
-        },
-        orderWebsocketclose(){
-            console.log('ws 连接关闭');
-            this.initInstructWebsoket();//重新建立连接
-        },
-		// 查看成绩表格
-		viewManData(item){
-			this.dialogType=2
-			this.dialogVisible=true
-			console.log('item',item);
-			const { subjectScore } = item
-			this.gridData=subjectScore
-		},
-        // 全屏事件
-        showFull(id){
-           console.log('ckx debug  监控大屏' )
-           this.$router.push('/monitorScreen')
-        },
-        // 退出全屏
-        exitFull(){
-            let exitFullScreen =
-                document.exitFullScreen ||
-                document.mozCancelFullScreen ||
-                document.webkitExitFullscreen ||
-                document.msExitFullscreen;
-            if (exitFullScreen) {
-                exitFullScreen.call(document);
-            }
-            this.updatekey=new Date().getTime()
-        },
-        // 展开全屏
-        requestFullScreen(elem){
-            console.log('ckx debug ',  )
-            // #兼容不同的浏览器
-            var requestMethod =
-                elem.requestFullScreen ||
-                elem.webkitRequestFullScreen ||
-                elem.mozRequestFullScreen ||
-                elem.msRequestFullScreen;
-            if (requestMethod) {
-                requestMethod.call(elem);
-            } else if (typeof window.ActiveXObject !== "undefined") {
-                // #模拟F11 实现全屏
-                var wscript = new ActiveXObject("WScript.Shell");
-                if (wscript !== null) {
-                    wscript.SendKeys("{F11}");
-                }
-            }
-            let that =this
-            window.addEventListener('resize',function () {//执行
-                let isFull = document.mozFullScreen ||
-                    document.fullScreen ||
-                    //谷歌浏览器及Webkit内核浏览器
-                    document.webkitIsFullScreen ||
-                    document.webkitRequestFullScreen ||
-                    document.mozRequestFullScreen ||
-                    document.msFullscreenEnabled
-                if (isFull === undefined) {
-                that.exitFull()
-                }else {
-                    
-                }
-            })
-        },
-        checkFull() {
-            //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
-            //火狐浏览器
-            let isFull = document.mozFullScreen ||
-                document.fullScreen ||
-                //谷歌浏览器及Webkit内核浏览器
-                document.webkitIsFullScreen ||
-                document.webkitRequestFullScreen ||
-                document.mozRequestFullScreen ||
-                document.msFullscreenEnabled
-            if (isFull === undefined) {
-                isFull = false
-            }
-            return isFull;
-        },
-        showMoreInfo(type){
-			if(type=='more'){
-				this.$router.push('/situationScreen')
-			}else {
-				this.$router.push('/taskScreen')
-			}
-        },
 
-        // 初始化视频
-        initVideo(nowPlayVideoUrl,id) {
-			let that =this
-      
-            // 这些options属性也可直接设置在video标签上，见 muted
-            let options = {
-                autoplay: true, // 设置自动播放
-                controls: true, // 显示播放的控件
-                sources: [
-                    // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
-                    {
-                        src: nowPlayVideoUrl,
-                        type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
-                    }
-                ]
-            };
-            // videojs的第一个参数表示的是，文档中video的id
-			const myPlyer= Videojs(id, options, function onPlayerReady() {
-                console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
-                console.log(myPlyer === this); // 这里返回的是true
-            });
-			this.playerList.push(myPlyer)
-            
-        },
+    // 初始化视频
+    initVideo(nowPlayVideoUrl, id) {
+      let that = this;
 
-        async initUrl(subjectName){
-        //     		if(this.playerList.length){
-		// 	this.playerList.forEach((item)=>{
-		// 		item.dispose()
-		// 	})
-		// }
-            let params = {
-                subjectName: subjectName
-                };
-            const res = await request('/dt_screen/video/videos/getUnitUrl', 'post', params, false)
-            let index = 0;
-            this.dataSrc = ['','','','',''];
-            this.videoPlayerName=['监控名称','监控名称','监控名称','监控名称','监控名称'];
-           for(let item in res.data)
-           {
-            this.dataSrc[index]= res.data[item].url ;
-            this.videoPlayerName[index++] = res.data[item].name;
-           }
+      // 这些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);
+    },
 
-            
-        },
-    changeVideo(subjectName){
-        // if(this.playerList.length){
-		// 	this.playerList.forEach((item)=>{
-		// 		item.dispose()
-		// 	})
-		// }
-         let params = {
-               
-                };
-            const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
-        this.initUrl(subjectName+'课目')
-        	setTimeout(() => {
-       
-        		let index = 0;
-                
-                this.playerList.forEach((item)=>{
-				item.src([{type: 'application/x-mpegURL',src: this.dataSrc[index++]},]); 
-                item.load(); 
-                item.play();
-			})
-       
-            
-      
-	}, 1000);
-    }
+    async initUrl(subjectName) {
+      //     		if(this.playerList.length){
+      // 	this.playerList.forEach((item)=>{
+      // 		item.dispose()
+      // 	})
+      // }
+      let params = {
+        subjectName: subjectName
+      };
+      const res = await request("/dt_screen/video/videos/getUnitUrl", "post", params, false);
+      let index = 0;
+      this.dataSrc = ["", "", "", "", ""];
+      this.videoPlayerName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
+      for (let item in res.data) {
+        this.dataSrc[index] = res.data[item].url;
+        this.videoPlayerName[index++] = res.data[item].name;
+      }
     },
-    mounted(){
-        let url = "rtsp://admin:sgw123456@192.168.1.64:554/h265/ch01/main/av_stream";
-        url = url.split('/');
-        url = url[2];
-        url = url.split(':');
-        this.mainVideoData.Username = url[0];
-        this.mainVideoData.Port = url[2];
-        url = url[1];
-        url = url.split('@');
-        this.mainVideoData.IP = url[1];
-        this.mainVideoData.Password = url[0];
-        console.log('this.mainVideoData :>> ', this.mainVideoData);
+    changeVideo(subjectName) {
+      // if(this.playerList.length){
+      // 	this.playerList.forEach((item)=>{
+      // 		item.dispose()
+      // 	})
+      // }
+      let params = {};
+      const res = request("/dt_screen/video/videos/videoClose", "get", params, false);
+      this.initUrl(subjectName + "课目");
+      setTimeout(() => {
+        let index = 0;
+
+        this.playerList.forEach((item) => {
+          item.src([{ type: "application/x-mpegURL", src: this.dataSrc[index++] }]);
+          item.load();
+          item.play();
+        });
+      }, 1000);
+    }
+  },
+  mounted() {
+    let url = "rtsp://admin:sgw123456@192.168.1.64:554/h265/ch01/main/av_stream";
+    url = url.split("/");
+    url = url[2];
+    url = url.split(":");
+    this.mainVideoData.Username = url[0];
+    this.mainVideoData.Port = url[2];
+    url = url[1];
+    url = url.split("@");
+    this.mainVideoData.IP = url[1];
+    this.mainVideoData.Password = url[0];
+    console.log("this.mainVideoData :>> ", this.mainVideoData);
 
-		// 获取全部单位
-		this.getAllUnits()
-		// 获取全部系统
-		this.getAllSystems()
-        // 建立任务的weksocket链接
-        this.initWebsoket()
+    // 获取全部单位
+    this.getAllUnits();
+    // 获取全部系统
+    this.getAllSystems();
+    // 建立任务的weksocket链接
+    this.initWebsoket();
     //     this.initUrl()
-       
-    //     // 过14秒调用
-	setTimeout(() => {
-        for (let index = 0; index < this.dataSrc.length; index++) {
-        
-                this.initVideo(this.dataSrc[index],this.videoList[index])
-            
-        }
-	}, 1000);
 
-        
-    },
-	beforeDestroy() {
-		if(this.playerList.length){
-			this.playerList.forEach((item)=>{
-				item.dispose()
-			})
-		}
-         const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
-    },
-}
+    //     // 过14秒调用
+    setTimeout(() => {
+      for (let index = 0; index < this.dataSrc.length; index++) {
+        this.initVideo(this.dataSrc[index], this.videoList[index]);
+      }
+    }, 1000);
+  },
+  beforeDestroy() {
+    if (this.playerList.length) {
+      this.playerList.forEach((item) => {
+        item.dispose();
+      });
+    }
+    const res = request("/dt_screen/video/videos/videoClose", "get", params, false);
+  }
+};
 </script>
-<style>
+<style scoped>
 #videoPlayerTask {
-    width: 906px;
-    height: 350px;
+  width: 906px;
+  height: 350px;
 }
 
 #videoPlayer_first {
-   width: 278px;
-    height: 164px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+  width: 278px;
+  height: 164px;
+  margin-right: 10px;
+  margin-bottom: 10px;
 }
 
 #videoPlayer_second {
-   width: 278px;
-    height: 164px;
-    margin-bottom: 10px;
+  width: 278px;
+  height: 164px;
+  margin-bottom: 10px;
 }
 
 #videoPlayer_third {
-    width: 278px;
-    height: 164px;
-    margin-right: 10px;
+  width: 278px;
+  height: 164px;
+  margin-right: 10px;
 }
 
 #videoPlayer_fourth {
-    width: 278px;
-    height: 164px;
+  width: 278px;
+  height: 164px;
 }
 .video_flex_style {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 10px 0;
-    box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10px 0;
+  box-sizing: border-box;
 }
-
 </style>
-
-

vue.config.js

@@ -7,11 +7,11 @@ module.exports = {
         disableHostCheck: true,
         proxy: {
             '/dt_screen/': {
-                // target: 'http://43.143.230.108/',
-                target: 'http://localhost:8084/',
-                pathRewrite: {
-                    '^/dt_screen/':''
-                }
+                target: 'http://43.143.230.108/',
+                // target: 'http://localhost:8084/',
+                // pathRewrite: {
+                //     '^/dt_screen/':''
+                // }
                 // changeOrigin: true,
             }
         }