css路径修改、获取数据等

src/permission.js

@@ -9,7 +9,7 @@ import { generateIndexRouter, isOAuth2AppEnv } from '@/utils/util'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/user/login', '/user/register', '/user/register-result','/user/alteration'] // no redirect whitelist
+const whiteList = ['/user/login', '/user/register', '/user/register-result','/user/alteration', '/visualization'] // no redirect whitelist
 whiteList.push(OAUTH2_LOGIN_PAGE_PATH)
 
 router.beforeEach((to, from, next) => {
@@ -21,8 +21,8 @@ router.beforeEach((to, from, next) => {
     to.matched.splice(2, to.matched.length - 3)
   }
   //update-end---author:scott ---date::2022-10-13  for：[jeecg-boot/issues/4091]多级路由缓存问题 #4091--------------
-  
-  
+
+
   NProgress.start() // start progress bar
 
   if (Vue.ls.get(ACCESS_TOKEN)) {

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

@@ -27,13 +27,13 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
   .visualization-common-title{
     width: 100%;
     height: 22px;
-    background: url(../../../../assets/visualization/moduleTitle.png) no-repeat left bottom;
+    background: url(~@/assets/visualization/moduleTitle.png) no-repeat left bottom;
     background-size: 100% 10px;
     .module-title{
       font-size: 15px;

src/views/modules_guAn/visualization/index.vue

@@ -12,16 +12,16 @@
       <div class="left-container">
         <div class="left-top-con">
           <!-- 左上 -->
-          <yuzhi-curve></yuzhi-curve>
+          <yuzhi-curve :data="dataAll"></yuzhi-curve>
         </div>
         <div class="left-center-con">
           <!-- 左中 -->
-          <real-time-curve></real-time-curve>
+          <real-time-curve :data="dataAll"></real-time-curve>
         </div>
         <div class="left-bottom-con">
           <!-- 左下 -->
           <!-- <test-information></test-information> -->
-          <full-curve></full-curve>
+          <full-curve :data="dataAll"></full-curve>
         </div>
       </div>
       <!-- 中间部分 -->
@@ -68,10 +68,10 @@
         <div class="centen-bottom-con u-flex-jab">
           <!-- 中间 -->
           <div class="center-bottom-left">
-            <running-state></running-state>
+            <running-state :data="dataAll"></running-state>
           </div>
           <div class="center-bottom-right">
-            <equipment-info></equipment-info>
+            <equipment-info :data="dataAll"></equipment-info>
           </div>
         </div>
       </div>
@@ -79,15 +79,15 @@
       <div class="right-container">
         <div class="right-top-con">
           <!-- 右上 -->
-          <mode-info></mode-info>
+          <mode-info :data="dataAll"></mode-info>
         </div>
         <div class="right-center-con">
           <!-- 右中 -->
-          <test-status-info></test-status-info>
+          <test-status-info :data="dataAll"></test-status-info>
         </div>
         <div class="right-bottom-con">
           <!-- 右下 -->
-          <surveillance-video></surveillance-video>
+          <surveillance-video :data="dataAll"></surveillance-video>
         </div>
       </div>
     </div>
@@ -105,40 +105,96 @@ import SurveillanceVideo from './modules/SurveillanceVideo.vue'
 import TestInformation from './modules/TestInformation.vue'
 import TestStatusInfo from './modules/TestStatusInfo.vue'
 
+import { getAction } from '@/api/manage'
+
 export default {
-    name: '',
-    components: {
-      YuzhiCurve,
-      RealTimeCurve,
-      FullCurve,
-      RunningState,
-      EquipmentInfo,
-      ModeInfo,
-      SurveillanceVideo,
-      TestInformation,
-      TestStatusInfo,
-    },
+  name: '',
+  components: {
+    YuzhiCurve,
+    RealTimeCurve,
+    FullCurve,
+    RunningState,
+    EquipmentInfo,
+    ModeInfo,
+    SurveillanceVideo,
+    TestInformation,
+    TestStatusInfo,
+  },
   data () {
     return {
+      dataAll: []
     }
   },
+  destroyed () {
+  	// 离开路由之后断开websocket连接
+    this.websock.close()
+  },
   created () {
+    // 初始化websocket
+    // this.initWebSocket()
+    // 数据获取
+    this.getData()
   },
   mounted () {
   },
   methods: {
+    getData(){
+      getAction(`/datacoll/webaccess/getWATagValue`).then(res=>{
+        console.log(res)
+        if(res.success){
+          this.dataAll = res.result
+        }
+      })
+      
+    },
+     // websocket
+     initWebSocket () { // 初始化weosocket(必须)
+      // 请根据实际项目需要进行修改
+      const wsuri = 'ws://192.168.2.247:8866/websocket'
+      // 新建一个webstock对象
+      this.websock = new WebSocket(wsuri)
+      this.websock.onmessage = this.websocketonmessage
+      this.websock.onopen = this.websocketonopen
+      this.websock.onerror = this.websocketonerror
+      this.websock.onclose = this.websocketclose
+    },
+    // 数据接收
+    websocketonmessage (e) {
+      console.log(e)
+      const redata = JSON.parse(e.data)
+      // 接收数据之后操作
+      
+    },
+    // websocket连接后发送数据(send发送)
+    websocketonopen () {
+      let actions = {} // 请根据实际项目需要进行修改
+      this.websocketsend(JSON.stringify(actions))
+    },
+    // 数据发送
+    websocketsend (d) {
+      this.websock.send(d)
+      console.log(d)
+    },
+    // 连接建立失败重连
+    websocketonerror () {
+      this.initWebSocket()
+    },
+    // 关闭
+    websocketclose (e) {
+      console.log('断开连接', e)
+    }
   }
 }
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less">
   .visualization-container{
     width: 100%;
     height: 100vh;
-    background: url(../../../assets/visualization/pageBg.png) no-repeat;
+    background: url('~@/assets/visualization/pageBg.png') no-repeat;
     background-size: cover;
     // 头部标题区域
     .top-title-container{
@@ -153,7 +209,7 @@ export default {
       .title-content{
         width: 700px;
         height: 100%;
-        background: url(../../../assets/visualization/pageTitleBg.png) no-repeat center center;
+        background: url('~@/assets/visualization/pageTitleBg.png') no-repeat center center;
         background-size: auto 100%;
         .text{
           font-size: 28px;
@@ -168,7 +224,7 @@ export default {
           font-family: "黑体";
           // font-family: "宋体";
           // font-family: serif;
-          // font-family: "楷体_GB2312		";
+          // font-family: "楷体_GB2312";
           &::before{
             // content: attr(text); // div中设置了text=>相当于又写了一个标题覆盖在原来设置了阴影的文字上面
             content: '高温高湿试验项目';
@@ -187,21 +243,26 @@ export default {
     // 数据内容区域
     .content-container{
       height: 100%;
-      padding: 60px 20px 20px;
+      // padding: 60px 20px 20px;
+      // padding-top: 60px;
+      // padding-bottom: 20px;
       box-sizing: border-box;
       .left-container{
         width: 25%;
+        padding-left: 20px;
         height: 100%;
         .left-top-con{
-          height: 35%;
+          height: 33.3%;
+          padding-top: 60px;
           padding-bottom: 12px;
         }
         .left-center-con{
-          height: 35%;
+          height: 33.3%;
           padding-bottom: 12px;
         }
         .left-bottom-con{
-          height: 30%;
+          height: 33.3%;
+          padding-bottom: 20px;
         }
       }
       .center-container{
@@ -215,7 +276,7 @@ export default {
         }
         .centen-bottom-con{
           height: 30%;
-          padding: 0 12px;
+          padding: 0 12px 20px;
           .center-bottom-left{
             flex: 1.4;
             height: 100%;
@@ -229,16 +290,19 @@ export default {
       }
       .right-container{
         width: 25%;
+        padding-right: 20px;
         .right-top-con{
-          height: 35%;
+          height: 33.3%;
+          padding-top: 60px;
           padding-bottom: 12px;
         }
         .right-center-con{
-          height: 35%;
+          height: 33.3%;
           padding-bottom: 12px;
         }
         .right-bottom-con{
-          height: 30%;
+          height: 33.3%;
+          padding-bottom: 20px;
         }
       }
     }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="equipment-info-module">
-    <common-title title="设备基本运行情况"></common-title>    
+    <common-title title="设备基本运行情况"></common-title>
     <div class="box">
         <!-- <a-row>
           <a-col :span="12">
@@ -22,7 +22,7 @@
             20W/㎡
           </a-col>
         </a-row> -->
-      
+
       <div id="demo1">
         <div>湿度实值</div>
         <div>温度实值</div>
@@ -57,7 +57,7 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
   .equipment-info-module{

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

@@ -16,6 +16,12 @@ import { setMax } from "../components/common.js";
 export default {
   components: { commonTitle },
   name: '',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
   data () {
     return {
       uEcharts: null,
@@ -30,6 +36,15 @@ export default {
       shiduData: [220, 182, 191, 234, 290, 330, 310],
     }
   },
+  watch: {
+    data: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   created () {
   },
   mounted () {
@@ -64,7 +79,7 @@ export default {
               color: '#fff'
             }
           },
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
         },
         yAxis: [
           {
@@ -159,7 +174,7 @@ export default {
                   {
                     offset: 0.5,
                     color: 'rgb(7, 214, 38)'
-                  }, 
+                  },
                   {
                     offset: 1,
                     color: 'rgb(7, 214, 38, 0)'
@@ -184,7 +199,7 @@ export default {
                   {
                     offset: 0.5,
                     color: 'rgb(227, 1, 6)'
-                  }, 
+                  },
                   {
                     offset: 1,
                     color: 'rgb(227, 1, 6, 0)'
@@ -210,7 +225,7 @@ export default {
                   {
                     offset: 0.5,
                     color: 'rgb(227, 145, 6)'
-                  }, 
+                  },
                   {
                     offset: 1,
                     color: 'rgb(227, 145, 6, 0)'
@@ -232,7 +247,7 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less">
   .data-curve-module{

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

@@ -1,6 +1,6 @@
 <template>
   <div class="mode-info-module">
-    <common-title title="系统模式信息"></common-title>    
+    <common-title title="系统模式信息"></common-title>
     <div class="visualization-common-border box">
       <div>
         <div class="itemHead">温度</div>
@@ -88,7 +88,7 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
   .mode-info-module{
@@ -158,18 +158,18 @@ export default {
     align-items: center;
   }
   .img{
-    width: 23%;
-    height: 100%;
+    width: 50%;
+    height: 80%;
     margin-left: 10%;
-    background: url(../../../../assets/visualization/taiyang.png);
-    background-size: cover;
+    background: url(~@/assets/visualization/taiyang.png) no-repeat;
+    background-size: contain;
   }
   .img2{
-    width: 19%;
-    height: 100%;
+    width: 50%;
+    height: 80%;
     margin-left: 10%;
     // border: 1px solid rgb(255, 255, 255);
-    background: url(../../../../assets/visualization/lvtaiyang.png);
-    background-size: cover;
+    background: url(~@/assets/visualization/lvtaiyang.png) no-repeat;
+    background-size: contain;
   }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="data-curve-module">
-    <common-title title="数据查看和提取"></common-title>    
+    <common-title title="数据查看和提取"></common-title>
     <div class="visualization-common-border">
       <div ref="dataCurve" class="h100"></div>
     </div>
@@ -15,6 +15,12 @@ import { setMax } from "../components/common.js";
 export default {
   components: { commonTitle },
   name: '',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
   data () {
     return {
       uEcharts: null,
@@ -29,6 +35,15 @@ export default {
       shiduData: [220, 182, 191, 234, 290, 330, 310],
     }
   },
+  watch: {
+    data: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   created () {
   },
   mounted () {
@@ -63,7 +78,7 @@ export default {
               color: '#fff'
             }
           },
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
         },
         yAxis: [
           {
@@ -158,7 +173,7 @@ export default {
                   {
                     offset: 0.5,
                     color: 'rgb(255, 0, 255)'
-                  }, 
+                  },
                   {
                     offset: 1,
                     color: 'rgb(255, 0, 255, 0)'
@@ -183,7 +198,7 @@ export default {
                   {
                     offset: 0.5,
                     color: 'rgb(255, 105, 5)'
-                  }, 
+                  },
                   {
                     offset: 1,
                     color: 'rgb(255, 0, 0, 0)'
@@ -209,7 +224,7 @@ export default {
                   {
                     offset: 0.5,
                     color: 'rgb(91, 255, 255)'
-                  }, 
+                  },
                   {
                     offset: 1,
                     color: 'rgb(0, 255, 255, 0)'
@@ -231,7 +246,7 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less">
   .data-curve-module{

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

@@ -156,97 +156,364 @@ export default {
       var chartDom = this.$refs.zhuzhuang
       this.zhuChart = echarts.init(chartDom);
       var option;
-
+      const CubeLeft = echarts.graphic.extendShape({
+          shape: {
+              x: 0,
+              y: 0
+          },
+          buildPath: function(ctx, shape) {
+              console.log(ctx,shape);
+              const yAxisPoint = shape.yAxisPoint
+              const c0 = [shape.x, shape.y]
+              const c1 = [shape.x + 9, shape.y - 9]
+              const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]
+              const c3 = [yAxisPoint[0], yAxisPoint[1]]
+              ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
+          }
+      })
+      const CubeRight = echarts.graphic.extendShape({
+          shape: {
+              x: 0,
+              y: 0
+          },
+          buildPath: function(ctx, shape) {
+              const yAxisPoint = shape.yAxisPoint
+              const c1 = [shape.x, shape.y]
+              const c2 = [yAxisPoint[0], yAxisPoint[1]]
+              const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18]
+              const c4 = [shape.x + 9, shape.y + 18]
+              ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+          }
+      })
+      const CubeTop = echarts.graphic.extendShape({
+          shape: {
+              x: 0,
+              y: 0
+          },
+          buildPath: function(ctx, shape) {
+              const c1 = [shape.x, shape.y]
+              const c2 = [shape.x + 9, shape.y + 18]
+              const c3 = [shape.x + 18, shape.y + 9]
+              const c4 = [shape.x + 9, shape.y - 9]
+              ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+          }
+      })
+      echarts.graphic.registerShape('CubeLeft', CubeLeft)
+      echarts.graphic.registerShape('CubeRight', CubeRight)
+      echarts.graphic.registerShape('CubeTop', CubeTop)
+      const MAX = [6000]
+      const VALUE = [5000]
+      const NAMES = ['进度'];
       option = {
-        grid: {
-        left: '0',
-        // right: '1%',
-        bottom: '58',
-        // top: '1%',
-        // 左侧文字显示
-        // containLabel: true,
-        },
-        xAxis: {
-            show: false,
-            type: 'value',
-            max: 100,
-        },
-        yAxis: [
-            {
-                type: 'category',
-                inverse: false,
-                axisLabel: {
-                    show: true,
-                    textStyle: {
-                        fontSize: '8',
-                        color: '#03fcfe',
-                    },
-                },
-                splitLine: {
-                    show: false,
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLine: {
-                    show: false,
-                },
-            },
-            {
-                type: 'category',
-                inverse: true,
-                axisTick: 'none',
-                axisLine: 'none',
-                show: true,
-                data: [80],
-            },
-        ],
-        series: [
-            {
-                type: 'bar',
-                showBackground: true,
-                backgroundStyle: {
-                      color: 'rgba(180, 180, 180, 0.2)',
-                      borderRadius:30
-                },
-                // 百分数显示
-                // label:{
-                //     show:true,
-                //     position:'right',
-                //     formatter:'{@score}%',
-                //     textStyle: {
-                //         color: '#03fcfe',
-                //         fontSize: '8',
-                //     },
-                // },
-                itemStyle: {
-                    normal: {
-                        barBorderRadius: 10,
-                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                            {
-                                offset: 0,
-                                color: '#1badf9',
-                            },
-                            {
-                                offset: 1,
-                                color: '#03fcfe',
-                            },
-                        ]),
-                    },
-                },
-                barWidth: 10,
-                data: [80],
-            },
-        ],
-      };
+          backgroundColor: "#010d3a",
+          // title: {
+          //     text: '',
+          //     top: 32,
+          //     left: 18,
+          //     textStyle: {
+          //         color: '#00F6FF',
+          //         fontSize: 24
+          //     }
+          // },
+          grid: {
+              // left: 10,
+              // right: 10,
+              bottom: '10',
+              top: 10,
+              // containLabel: true
+          },
+          yAxis: {
+              type: 'category',
+              data: NAMES,
+              axisLine: {
+                  show: false,
+                  lineStyle: {
+                      color: 'white'
+                  }
+              },
+              offset: 20,
+              axisTick: {
+                  show: false,
+                  length: 9,
+                  alignWithLabel: true,
+                  lineStyle: {
+                      color: '#7DFFFD'
+                  }
+              },
+              axisLabel: {
+                  fontSize: 10
+              }
+          },
+          xAxis: {
+              type: 'value',
+              axisLine: {
+                  show: false,
+                  lineStyle: {
+                      color: 'white'
+                  }
+              },
+              splitLine: {
+                  show: false
+              },
+              axisTick: {
+                  show: false
+              },
+              axisLabel: {
+                  show:false,
+                  fontSize: 16
+              },
+              boundaryGap: ['20%', '20%']
+          },
+          series: [{
+              type: 'custom',
+              renderItem: function(params, api) {
+                  const location = api.coord([api.value(0), api.value(1)])
+                  return {
+                      type: 'group',
+                      children: [{
+                          type: 'CubeLeft',
+                          shape: {
+                              api,
+                              xValue: api.value(0),
+                              yValue: api.value(1),
+                              x: location[0],
+                              y: location[1],
+                              yAxisPoint: api.coord([0,api.value(1)])
+                          },
+                          style: {
+                              fill: 'rgba(7,29,97,.6)'
+                          }
+                      }, {
+                          type: 'CubeRight',
+                          shape: {
+                              api,
+                              xValue: api.value(0),
+                              yValue: api.value(1),
+                              x: location[0],
+                              y: location[1],
+                              yAxisPoint: api.coord([0,api.value(1)])
+                          },
+                          style: {
+                              fill: 'rgba(10,35,108,.7)'
+                          }
+                      }, {
+                          type: 'CubeTop',
+                          shape: {
+                              api,
+                              xValue: api.value(0),
+                              yValue: api.value(1),
+                              x: location[0],
+                              y: location[1],
+                              yAxisPoint: api.coord([0,api.value(1)])
+                          },
+                          style: {
+                              fill: 'rgba(11,42,106,.8)'
+                          }
+                      }]
+                  }
+              },
+              data: MAX
+          },
+          {
+              type: 'custom',
+              renderItem: (params, api) => {
+                  const location = api.coord([api.value(0), api.value(1)])
+                  return {
+                      type: 'group',
+                      children: [{
+                          type: 'CubeLeft',
+                          shape: {
+                              api,
+                              xValue: api.value(0),
+                              yValue: api.value(1),
+                              x: location[0],
+                              y: location[1],
+                              yAxisPoint: api.coord([0,api.value(1)])
+                          },
+                          style: {
+                              fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                                      offset: 0,
+                                      color: '#3B80E2'
+                                  },
+                                  {
+                                      offset: 1,
+                                      color: '#49BEE5'
+                                  }
+                              ])
+                          }
+                      }, {
+                          type: 'CubeRight',
+                          shape: {
+                              api,
+                              xValue: api.value(0),
+                              yValue: api.value(1),
+                              x: location[0],
+                              y: location[1],
+                              yAxisPoint: api.coord([0,api.value(1)])
+                          },
+                          style: {
+                              fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                                      offset: 0,
+                                      color: '#3B80E2'
+                                  },
+                                  {
+                                      offset: 1,
+                                      color: '#49BEE5'
+                                  }
+                              ])
+                          }
+                      }, {
+                          type: 'CubeTop',
+                          shape: {
+                              api,
+                              xValue: api.value(0),
+                              yValue: api.value(1),
+                              x: location[0],
+                              y: location[1],
+                              yAxisPoint: api.coord([0,api.value(1)])
+                          },
+                          style: {
+                              fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                                      offset: 0,
+                                      color: '#3B80E2'
+                                  },
+                                  {
+                                      offset: 1,
+                                      color: '#49BEE5'
+                                  }
+                              ])
+                          }
+                      }]
+                  }
+              },
+              data: VALUE
+          },
+          {
+              type: 'bar',
+              label: {
+                  normal: {
+                      show: true,
+                      position: 'right',
+                      formatter: (e) => {
+                          switch (e.name) {
+                              case '10kV线路':
+                                  return VALUE[0]
+                              case '公用配变':
+                                  return VALUE[1]
+                              case '35kV主变':
+                                  return VALUE[2]
+                              case '水':
+
+                          }
+                      },
+                      fontSize: 16,
+                      color: '#fff',
+                      offset: [25, 4]
+                  }
+              },
+              itemStyle: {
+                  color: 'transparent'
+              },
+              data: MAX
+          }]
+      }
       option && this.zhuChart.setOption(option);
-    },
+    }
+    // drawzhuzhuang(){
+    //   var chartDom = this.$refs.zhuzhuang
+    //   this.zhuChart = echarts.init(chartDom);
+    //   var option;
+
+    //   option = {
+    //     grid: {
+    //     left: '0',
+    //     // right: '1%',
+    //     bottom: '58',
+    //     // top: '1%',
+    //     // 左侧文字显示
+    //     // containLabel: true,
+    //     },
+    //     xAxis: {
+    //         show: false,
+    //         type: 'value',
+    //         max: 100,
+    //     },
+    //     yAxis: [
+    //         {
+    //             type: 'category',
+    //             inverse: false,
+    //             axisLabel: {
+    //                 show: true,
+    //                 textStyle: {
+    //                     fontSize: '8',
+    //                     color: '#03fcfe',
+    //                 },
+    //             },
+    //             splitLine: {
+    //                 show: false,
+    //             },
+    //             axisTick: {
+    //                 show: false,
+    //             },
+    //             axisLine: {
+    //                 show: false,
+    //             },
+    //         },
+    //         {
+    //             type: 'category',
+    //             inverse: true,
+    //             axisTick: 'none',
+    //             axisLine: 'none',
+    //             show: true,
+    //             data: [80],
+    //         },
+    //     ],
+    //     series: [
+    //         {
+    //             type: 'bar',
+    //             showBackground: true,
+    //             backgroundStyle: {
+    //                   color: 'rgba(180, 180, 180, 0.2)',
+    //                   borderRadius:30
+    //             },
+    //             // 百分数显示
+    //             // label:{
+    //             //     show:true,
+    //             //     position:'right',
+    //             //     formatter:'{@score}%',
+    //             //     textStyle: {
+    //             //         color: '#03fcfe',
+    //             //         fontSize: '8',
+    //             //     },
+    //             // },
+    //             itemStyle: {
+    //                 normal: {
+    //                     barBorderRadius: 10,
+    //                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+    //                         {
+    //                             offset: 0,
+    //                             color: '#1badf9',
+    //                         },
+    //                         {
+    //                             offset: 1,
+    //                             color: '#03fcfe',
+    //                         },
+    //                     ]),
+    //                 },
+    //             },
+    //             barWidth: 10,
+    //             data: [80],
+    //         },
+    //     ],
+    //   };
+    //   option && this.zhuChart.setOption(option);
+    // },
   }
 }
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
   .running-state-module{

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

@@ -1,6 +1,6 @@
 <template>
   <div class="surveillance-video-module">
-    <common-title title="安防监控视频"></common-title>    
+    <common-title title="安防监控视频"></common-title>
     <div class="visualization-common-border">
 
     </div>
@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less">
   .surveillance-video-module{

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

@@ -1,6 +1,6 @@
 <template>
   <div class="test-information-module">
-    <common-title title="试验信息"></common-title>    
+    <common-title title="试验信息"></common-title>
     <div class="visualization-common-border">
 
     </div>
@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less">
   .test-information-module{

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

@@ -15,6 +15,12 @@ import { setMax } from "../components/common.js";
 export default {
   components: { commonTitle },
   name: '',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
   data () {
     return {
       uEcharts: null,
@@ -29,6 +35,15 @@ export default {
       shiduData: [220, 182, 191, 234, 290, 330, 310],
     }
   },
+  watch: {
+    data: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   created () {
   },
   mounted () {
@@ -63,7 +78,7 @@ export default {
               color: '#fff'
             }
           },
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
         },
         yAxis: [
           {
@@ -230,7 +245,7 @@ export default {
     // setMax(num) {
     //   // 1.判断是否小数：  //判断是否含有小数点：要检索的字符串值没有出现，则该方法返回 -1。
     //   if (num.toString().indexOf(".") != -1) {//有小数点
-    //     num = Math.ceil(num);//向上取整 
+    //     num = Math.ceil(num);//向上取整
     //   }
     //   // 2.向上取整数倍
     //   if (num.toString().length < 2) {
@@ -256,7 +271,7 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less">
   .yuzhi-curve-module{