设置中间3D区域扩大遮罩等

src/assets/less/uStyle.css

@@ -55,14 +55,16 @@
   flex: auto;
 }
 .visualization-common-border {
-  width: 100%;
-  height: calc(100% - 26px);
+  width: calc(100% - 6px);
+  height: calc(100% - 34px);
   border: 1px solid #000;
-  border-width: 8px 0 0 6px;
+  border-width: 0;
   /* 变相设置边距 */
+  margin: 8px 0 0 6px;
   border-image: url('../visualization/moduleBdBg.png') 4 4 fill;
   border-image-repeat: stretch;
   position: relative;
+  background-color: #0210241c;
 }
 .h100 {
   height: 100%;

src/assets/less/uStyle.less

@@ -14,13 +14,15 @@
 .f-auto{ flex: auto; }
 
 .visualization-common-border{
-  width: 100%;
-  height: calc(100% - 26px);
+  width: calc(100% - 6px);
+  height: calc(100% - 34px);
   border: 1px solid #000;
-  border-width: 8px 0 0 6px; /* 变相设置边距 */
+  border-width: 0; /* 变相设置边距 */
+  margin: 8px 0 0 6px;
   border-image: url('../visualization/moduleBdBg.png') 4 4 fill;
   border-image-repeat: stretch;
   position: relative;
+  background-color: #0210241c;
 }
 
 .h100{height: 100%;}

src/views/modules_guAn/visualization/components/commonTitle.vue

@@ -35,6 +35,8 @@ export default {
     height: 22px;
     background: url(~@/assets/visualization/moduleTitle.png) no-repeat left bottom;
     background-size: 100% 10px;
+    z-index: 9999;
+    position: relative;
     .module-title{
       font-size: 15px;
       color: #18B4C8;

src/views/modules_guAn/visualization/index.vue

@@ -282,6 +282,7 @@ export default {
         padding-left: 10px;
         padding-right: 10px;
         height: 100%;
+        z-index: 9999;
         .left-top-con{
           height: 33.3%;
           padding-top: 60px;

src/views/modules_guAn/visualization/modules/FullCurve.vue

@@ -71,11 +71,51 @@ export default {
         grid: {
           top: '80',
           left: '46',
-          bottom: '40'
+          bottom: '45'
         },
         tooltip: {
           trigger: 'axis',
         },
+        // dataZoom: [
+        //   {
+        //     type: 'inside',
+        //     start: 0,
+        //     end: 100,
+        //   },
+        //   {
+        //     start: 0,
+        //     end: 100,
+        //     height: 10,
+        //     bottom: 16,
+        //   }
+        // ],
+        dataZoom: [
+          {
+            show: true,
+            moveHandleSize: 0, // 隐藏上面那那层
+            height: 12,
+            xAxisIndex: [
+              0
+            ],
+            bottom: 12,
+            start: 0,
+            end: 100,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+              color:"#d3dee5",
+
+            },
+            textStyle:{ color:"#fff" },
+            borderColor:"#90979c"
+          }, {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 0,
+            end: 100
+          }
+        ],
         xAxis: {
           type: 'category',
           axisTick: { show: false }, // 横坐标刻度

src/views/modules_guAn/visualization/modules/RealTimeCurve.vue

@@ -255,6 +255,9 @@ export default {
       });
     },
     refreshData(data){
+      if(data.length === 0){
+        return
+      }
       var wendu = data.find(item => item.Name === '温度实值-实时')
       var shidu = data.find(item => item.Name === '湿度实值-实时')
       var fushe = data.find(item => item.Name === '辐射强度值-实时')

src/views/modules_guAn/visualization/modules/SurveillanceVideo.vue

@@ -44,7 +44,7 @@ export default {
   .video-img{
     width: 100%;
     height: 100%;
-    background: url('../../../../assets/visualization/video.png') no-repeat center center;
+    background: url('~@/assets/visualization/video.png') no-repeat center center;
     background-size: cover;
   }
 </style>

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -71,29 +71,17 @@ export default {
   watch: {
     data: {
       handler(newValue, oldValue){
-        console.log(newValue, oldValue)
+        console.log('预制曲线', newValue, oldValue)
+        this.refreshData(newValue)
       },
-      immediate: true,
+      // immediate: true,
       deep: true
     },
     'chooseXunhuan.circname': {
       handler(newValue, oldValue){
         if(newValue){
-          console.log(newValue, oldValue)
-          var value = newValue.find(item => item.circname === newValue)
-          console.log(value)
-          if(value){
-            this.chooseXunhuan.circname = value.circname
-            this.chooseXunhuan.begintime = value.begintime
-            this.chooseXunhuan.endtime = value.endtime
-          } else {
-            this.chooseXunhuan.circname = ''
-            this.chooseXunhuan.begintime = ''
-            this.chooseXunhuan.endtime = ''
-          }
+          this.changeXunhuan(newValue)
         }
-        console.log(this.chooseXunhuan)
-        this.changeData(this.data)
       },
       // immediate: true,
       deep: true
@@ -254,7 +242,7 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                   {
                     offset: 0,
-                    color: 'rgba(207, 168, 9, .8)'
+                    color: 'rgba(207, 168, 9, .1)'
                   },
                   {
                     offset: 0.5,
@@ -262,7 +250,7 @@ export default {
                   },
                   {
                     offset: 1,
-                    color: 'rgba(207, 168, 9, .8)'
+                    color: 'rgba(207, 168, 9, .1)'
                   }
                 ])
               }
@@ -296,7 +284,7 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                   {
                     offset: 0,
-                    color: 'rgba(73, 228, 233, .8)'
+                    color: 'rgba(73, 228, 233, .1)'
                   },
                   {
                     offset: 0.5,
@@ -304,7 +292,7 @@ export default {
                   },
                   {
                     offset: 1,
-                    color: 'rgba(73, 228, 233, .8)'
+                    color: 'rgba(73, 228, 233, .1)'
                   }
                 ])
               }
@@ -318,36 +306,86 @@ export default {
         this.uEcharts.resize();
       });
     },
-    // 改变获取数据为所需格式
-    changeData(data){
+    // 数据刷新时
+    refreshData(data){
       console.log('预制曲线数据', data)
+      this.wenduData = []
+      this.shiduData = []
+      this.timeData = []
       data.forEach(element => {
-        var wenduArr = element.sections.map(item => {
+        var itemWenduArr = element.sections.map(item => {
           return item.temperature
         })
-        var shiduArr = element.sections.map(item => {
+        var itemShiduArr = element.sections.map(item => {
           return item.humidity
         })
-        var timeArr = element.sections.map(item => {
+        var itemTimeArr = element.sections.map(item => {
           return item.time
         })
-        this.wenduData = [...this.wenduData, ...wenduArr]
-        this.shiduData = [...this.shiduData, ...shiduArr]
-        this.timeData = [...this.timeData, ...timeArr]
-        console.log(this.wenduData)
-        console.log(this.shiduData)
+        this.wenduData = [...this.wenduData, ...itemWenduArr]
+        this.shiduData = [...this.shiduData, ...itemShiduArr]
+        this.timeData = [...this.timeData, ...itemTimeArr]
+        // console.log(this.wenduData)
+        // console.log(this.shiduData)
       });
       var _this = this
+      this.uOption.xAxis.data = this.timeData
+      this.uOption.series.forEach(item => {
+        switch (item.name) {
+          case '辐射强度值':
+            item.data = _this.fusheData
+            break;
+          case '温度实值':
+            item.data = _this.wenduData
+            break;
+          case '湿度实值':
+            item.data = _this.shiduData
+            break;
+        
+          default:
+            break;
+        }
+      })
+      // this.uEcharts.clear()
+      this.uEcharts.setOption(this.uOption, true);
+      // this.uEcharts.setOption({
+      //   xAxis: {
+      //     data: _this.timeData
+      //   },
+      //   series: [
+      //     {
+      //       name: '辐射强度值',
+      //       data: _this.fusheData
+      //     },
+      //     {
+      //       name: '温度实值',
+      //       data: _this.wenduData
+      //     },
+      //     {
+      //       name: '湿度实值',
+      //       data: _this.shiduData
+      //     },
+      //   ]
+      // });
+    },
+    // 点击循环改变高亮
+    changeXunhuan(data){
+      var value = this.data.find(item => item.circname === data)
+      console.log(value)
+      if(value){
+        this.chooseXunhuan.circname = value.circname
+        this.chooseXunhuan.begintime = value.begintime
+        this.chooseXunhuan.endtime = value.endtime
+      } else {
+        this.chooseXunhuan.circname = ''
+        this.chooseXunhuan.begintime = ''
+        this.chooseXunhuan.endtime = ''
+      }
+      console.log(this.chooseXunhuan)
+      var _this = this
       this.uEcharts.setOption({
-        xAxis: {
-          data: this.timeData
-        },
         series: [
           {
-            name: '辐射强度值',
-            data: _this.fusheData
-          },
-          {
             name: '温度实值',
             markArea: {
               itemStyle: {
@@ -366,11 +404,6 @@ export default {
                 ],
               ]
             },
-            data: _this.wenduData
-          },
-          {
-            name: '湿度实值',
-            data: _this.shiduData
           },
         ]
       });

src/views/modules_guAn/visualization/modules/info3D.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="info-3D-module">
     <!-- 顶部信息 -->
-    <div class="u-flex-jab info-content">
+    <div class="u-flex-jaa info-content">
       <div v-for="(item, index) in raelDate" :key="index" class="item-info">
         {{ item.name }}：{{ item.value }}
       </div>
@@ -39,10 +39,10 @@ export default {
     return {
       staticData: [
         { name: '试验类型', webName: '试验类型', value: '' },
-        { name: '试验条件', webName: '试验条件', value: '' },
+        // { name: '试验条件', webName: '试验条件', value: '' },
         { name: '试验进度', webName: '试验进度', value: '' },
-        { name: '设备状态', webName: '设备状态', value: '' },
-        { name: '预计结束时间', webName: '预计结束时间', value: '' },
+        // { name: '设备状态', webName: '设备状态', value: '' },
+        { name: '预计结束时间', webName: '预计结束时间-试验信息', value: '' },
         { name: '试验运行时间', webName: '试验运行时间', value: '' },
       ],
       raelDate: []
@@ -69,13 +69,27 @@ export default {
         var findObj = newValue.find(val=>val.Name === item.webName)
         var value = ''
         if(findObj){
-          if(item.name === '设备状态'){
-            var status = eqStatus.find(ele => ele.value === findObj.Value)
-            console.log('设备状态：', status)
-            value = status ? status.name : '-'
-          } else {
-            value = findObj.Value
+          switch (item.name) {
+            case '设备状态':
+              var status = eqStatus.find(ele => ele.value === findObj.Value)
+              console.log('设备状态：', status)
+              value = status ? status.name : '-'
+              break;
+            case '试验进度':
+              value = (Number(findObj.Value) * 100).toFixed(0) + '%'
+              break;
+            case '试验运行时间':
+              value = Math.floor(findObj.Value / 60) + 'min'
+              break;
+            default:
+              value = findObj.Value
+              break;
           }
+          // if(item.name === '设备状态'){
+            
+          // } else {
+          //   value = findObj.Value
+          // }
         } else {
           // 如果页面为“-”则表示数据没有找到
           value = '-'
@@ -101,26 +115,32 @@ export default {
     width: 100%;
     height: 100%;
     padding-top: 80px;
-    position: relative;
+    // position: relative;
     // 顶部信息
     .info-content{
       width: 100%;
-      padding: 2px 16px;
+      padding: 2px 8px;
       background-color: rgba(9,79,141,.55);
       border-radius: 2px;
+      z-index: 999;
+      position: relative;
       .item-info{
         color: #fff;
       }
     }
     // 3D区域
     .area-3D{
-      height: calc(100% - 25px);
-      padding: 10px;
+      width: 112%;
+      height: 103%;
+      margin-left: -6%;
+      margin-top: -1%;
+      // height: calc(100% - 25px);
+      // padding: 10px;
       .img-3D{
         width: 100%;
         height: 100%;
         background: url('~@/assets/visualization/3D.png') no-repeat center center;
-        background-size: cover;
+        background-size: 125% auto;
       }
     }
   }