2
0

6 Коммиты 48d215e76f ... f1c1be3657

Автор SHA1 Сообщение Дата
  sgw f1c1be3657 [SCREEN] ADD jump tag css 2 лет назад
  sgw 63e888d727 [SCREEN] ADD jump tag 2 лет назад
  sgw fc1afcbed3 [SCREEN] ADD ws config 2 лет назад
  seamew 48d215e76f 孙浩博 fixed:海康威视插件size问题u 2 лет назад
  xyh123999 9ff1b678ff Merge branch 'master' of http://43.143.235.246:9080/DT/DT_screen 2 лет назад
  xyh123999 026608040b add HK component 2 лет назад

+ 1 - 3
public/index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <link rel="icon" href="<%= BASE_URL %>favicon.ico">
         <title>训练态势大屏</title>
+        <script type="text/javascript" src="static/config.js"></script>
     </head>
     <body>
         <noscript>
@@ -13,8 +14,5 @@
         </noscript>
         <div id="app"></div>
         <!-- built files will be auto injected -->
-        <script type="text/javaScript" src="./static/jsVideoPlugin-1.0.0.min.js"></script>
-        <script type="text/javaScript" src="./static/webVideoCtrl.js"></script>
-        <script type="text/javaScript" src="./static/jquery-1.7.1.min.js"></script>
     </body>
 </html>

+ 6 - 0
public/static/config.js

@@ -0,0 +1,6 @@
+window.config = {
+  webSocket: {
+    url: "localhost",
+    port: "8084"
+  }
+}

Разница между файлами не показана из-за своего большого размера
+ 0 - 1
public/static/jquery-1.7.1.min.js


Разница между файлами не показана из-за своего большого размера
+ 0 - 15
public/static/jsVideoPlugin-1.0.0.min.js


Разница между файлами не показана из-за своего большого размера
+ 0 - 0
public/static/webVideoCtrl.js


+ 0 - 207
src/components/HKVS/hkv.vue

@@ -1,207 +0,0 @@
-<template>
-  <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>
-            <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
-        </div> -->
-  </div>
-</template>
-<script>
-export default {
-  name: "videoPlayer",
-  props: {
-    //从父组件传来的数据,IP、用户名、密码、端口号
-    companyVideoData: {
-      type: Object
-    },
-    //分屏
-    videoType: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      plugin: true,
-      iWidth: "100%",
-      iHeight: "100%",
-      webVideo: {},
-      iStreamType: 1,
-      iProtocol: 1,
-      bZeroChannel: false,
-      xmlDocData: {},
-      g_iWndIndex: 0, //可以不用设置这个变量,有窗口参数的接口中,不用传值,开发包会默认使用当前选择窗口
-      videoNum: ""
-    };
-  },
-  created() {},
-  mounted() {
-    this.videoInitPlugin();
-  },
-  destroyed() {},
-  methods: {
-    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: this.videoType,
-        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())
-        }
-      });
-    },
-    //初始化视频,为了让用户进来就可以看到视频播放
-    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
-        });
-      }
-    },
-    // 点击查看具体哪个监控
-    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
-    }
-  }
-};
-</script>
-<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>

+ 4 - 1
src/store/index.js

@@ -4,7 +4,10 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
+  state: {
+    webSocketIp: window.config.webSocket.url,
+    webSocketPort: window.config.webSocket.port
+  },
   mutations: {},
   actions: {},
   modules: {},

+ 2 - 2
src/views/historicTaskScreen.vue

@@ -2396,7 +2396,7 @@ export default {
 
     // 建立websocket 链接 任务
     initWebsoket(){
-      this.websocket = new WebSocket('ws://43.143.221.128:8084/websocket/task');//这里将http替换成ws
+      this.websocket = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/task`);//这里将http替换成ws
       switch (this.websocket.readyState) {
         case 0:
           console.log("正在连接");
@@ -2432,7 +2432,7 @@ export default {
 
     initInstructWebsoket(){
       // 指令的ws
-      this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
+      this.websocketOrder = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
       switch (this.websocketOrder.readyState) {
         case 0:
           console.log("正在连接");

+ 14 - 4
src/views/situationScreen.vue

@@ -1,7 +1,13 @@
 <template>
   <v-scale-screen width="2200" height="1080">
     <div  class="task_screen_cotainer" >
-      <div class="task_header">训练态势大屏</div>
+      <div class="task_header">
+        历史态势
+      </div>
+      <div class="tag" @click="jumpToCurrent">
+        当前态势
+<!--        <el-button @click="jumpToCurrent">当前态势</el-button>-->
+      </div>
       <div class="content_cotainer">
         <div class="task_base_info_table">
           <div class="task_outer_cotnainer">
@@ -154,7 +160,7 @@
             <div class="header_line_style">
               <div class="headerTitle"></div>
             </div>
-            <div class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
+            <div class="task_name_header">「{{ currentTaskName }}」历史态势</div>
             <!-- 任务屏幕 -->
             <div class="task_item_header">
 
@@ -796,6 +802,10 @@ export default {
     }
   },
   methods:{
+    jumpToCurrent() {
+      // window.location.href = "/taskScreen"
+      this.$router.push("/taskScreen")
+    },
 
     // 获取单位名称
     getName(list, id) {
@@ -2396,7 +2406,7 @@ export default {
 
     // 建立websocket 链接 任务
     initWebsoket(){
-      this.websocket = new WebSocket('ws://43.143.221.128:8084/websocket/task');//这里将http替换成ws
+      this.websocket = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/task`);//这里将http替换成ws
       switch (this.websocket.readyState) {
         case 0:
           console.log("正在连接");
@@ -2432,7 +2442,7 @@ export default {
 
     initInstructWebsoket(){
       // 指令的ws
-      this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
+      this.websocketOrder = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
       switch (this.websocketOrder.readyState) {
         case 0:
           console.log("正在连接");

+ 774 - 750
src/views/taskScreen.css

@@ -1,1042 +1,1066 @@
 .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, 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,.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;
+}
+.tag {
+    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
+    border-radius: 6px;
+    opacity: 1;
+    border: 3px solid;
+    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
+
+    width: 100px;
+    height: 40px;
+    position: absolute;
+    top: 55px;
+    left: 1%;
+    right: 50%;
+    color: #FFFFFF;
+    font-weight: 550;
+    font-size: 20px;
+    text-align: center;
+    /*justify-content: center;*/
+    padding-top: 3px;
+    padding-bottom: 2px;
+    /*color: #FFF;*/
 
-  position: absolute;
-  top: 31px;
-  left: 50%;
-  right: 50%;
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
+    /*position: absolute;*/
+    /*top: 70px;*/
+    /*left: 3%;*/
+    /*right: 50%;*/
+    /*transform: translate(-50% , -50%);*/
+    /*white-space: nowrap;*/
+}
+.tag:hover{
+    cursor: pointer;
 }
 
 .task_name_header {
-  color: #fff;
-  font-weight: 600;
-  font-size: 22px;
-  font-family: YouSheBiaoTiHei;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 100;
-  top: -34px;
+    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;
+    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;
 
-  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: 0.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: .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;
+    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;
 
-  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;
+	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;
 
-  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;
-  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;
+    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;
+    
 }
 .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;
-  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;
+	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;
 }
 
 .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;
-}
-.play_to_full:hover {
-  cursor: pointer;
-}
-.plugin {
-  width: 100%;
-  height: 100%;
-}
-
-.video_body1 {
-  min-height: 80%;
-  max-height: 80%;
-  min-width: 100%;
-  max-width: 100%;
-}
-
-.video_body2 {
-  min-height: 90%;
-  max-height: 90%;
-  min-width: 100%;
-  max-width: 100%;
+    color: #37D3F3;
+    font-size: 12px;
 }
+.play_to_full:hover{
+    cursor: pointer;
+}

Разница между файлами не показана из-за своего большого размера
+ 330 - 334
src/views/taskScreen.vue


+ 5 - 5
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,
             }
         }

Некоторые файлы не были показаны из-за большого количества измененных файлов