加上前端从wa获取数据

src/views/modules_guAn/visualization/index.vue

@@ -279,8 +279,8 @@ export default {
       // console.log('判断是否含有1',redata.hasOwnProperty('最近24H报警信息'))
       // console.log('判断是否含有2',redata['最近24H报警信息'])
       this.newAlarmData = redata.hasOwnProperty('最近24H报警信息') ? redata['最近24H报警信息'] : ['原数据']
-      if(redata['预制曲线'].length > 0) {this.yuzhiData = redata['预制曲线']}
-      if(redata['预制曲线线段'].length > 0) {this.yuzhiMarkData = redata['预制曲线线段']}
+      if(redata['预制曲线'] && redata['预制曲线'].length > 0) {this.yuzhiData = redata['预制曲线']}
+      if(redata['预制曲线'] && redata['预制曲线线段'].length > 0) {this.yuzhiMarkData = redata['预制曲线线段']}
       // this.$refs.yuzhiCurve.markData = this.yuzhiMarkData
       // var titleObj = redata['设备实时值'].find(item => item.Name === '试验名称')
       // console.log(titleObj)
@@ -304,6 +304,7 @@ export default {
     // 关闭
     websocketclose (e) {
       console.log('断开连接', e)
+      this.initWebSocket()
     },
     // 点击循环时触发
     handleXunhuan(choose){

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

@@ -2,7 +2,7 @@
   <div class="equipment-info-module">
     <common-title title="设备基本运行情况"></common-title>
     <div class="visualization-common-border box">
-        <!-- <a-row>
+      <!-- <a-row>
           <a-col :span="12">
             湿度实值
           </a-col>
@@ -34,49 +34,51 @@
         <div>20W/㎡</div>
       </div> -->
       <!-- <div style="height: 32%;display: flex; justify-content: center; align-items: center; font-size: 39px;">程序运行</div> -->
-      <div style="height: 32%;display: flex; justify-content: center; align-items: center; font-size: 26px;">{{runStatus == 1 ? '程序运行': '定值运行'}}</div>
-      <div style="height: 36%; display: flex; flex-direction: row;">
+      <div style="height: 32%; display: flex; justify-content: center; align-items: center; font-size: 26px">
+        {{ runStatus == 1 ? '程序运行' : '定值运行' }}
+      </div>
+      <div style="height: 36%; display: flex; flex-direction: row">
         <!-- 左 -->
-        <div class="le" style="margin: 0 0.1% 0 2.4%;">
-          <div style="height: 15%; display: flex; justify-content: space-between;">
-            <span style="font-size: 12px;">温度</span>
-            <span style="font-size: 11px;">设定{{targetT}}℃</span>
+        <div class="le" style="margin: 0 0.1% 0 2.4%">
+          <div style="height: 15%; display: flex; justify-content: space-between">
+            <span style="font-size: 12px">温度</span>
+            <span style="font-size: 11px">设定{{ targetT }}℃</span>
           </div>
-          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
-            <span style="font-size: 35px;">{{template}}</span>
+          <div style="height: 70%; display: flex; justify-content: center; align-items: center">
+            <span style="font-size: 35px">{{ template }}</span>
           </div>
-          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
-            <span style="font-size: 12px;">℃</span>
+          <div style="height: 15%; display: flex; justify-content: end; align-items: center">
+            <span style="font-size: 12px">℃</span>
           </div>
         </div>
         <!-- 中 -->
-        <div class="le" style="margin: 0 0.1% 0 1%;">
-          <div style="height: 15%; display: flex; justify-content: space-between;">
-            <span style="font-size: 12px;">湿度</span>
-            <span style="font-size: 11px;">设定{{targetH}}%R.H</span>
+        <div class="le" style="margin: 0 0.1% 0 1%">
+          <div style="height: 15%; display: flex; justify-content: space-between">
+            <span style="font-size: 12px">湿度</span>
+            <span style="font-size: 11px">设定{{ targetH }}%R.H</span>
           </div>
-          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
-            <span style="font-size: 35px;">{{humidity}}</span>
+          <div style="height: 70%; display: flex; justify-content: center; align-items: center">
+            <span style="font-size: 35px">{{ humidity }}</span>
           </div>
-          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
-            <span style="font-size: 12px;">%R.H</span>
+          <div style="height: 15%; display: flex; justify-content: end; align-items: center">
+            <span style="font-size: 12px">%R.H</span>
           </div>
         </div>
         <!-- 右 -->
-        <div class="le" style="margin: 0 0.1% 0 1%;">
-          <div style="height: 15%; display: flex; justify-content: space-between;">
-            <span style="font-size: 12px;">辐射强度</span>
-            <span style="font-size: 11px;">设定{{targetF}}W/㎡</span>
+        <div class="le" style="margin: 0 0.1% 0 1%">
+          <div style="height: 15%; display: flex; justify-content: space-between">
+            <span style="font-size: 12px">辐射强度</span>
+            <span style="font-size: 11px">设定{{ targetF }}W/㎡</span>
           </div>
-          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
-            <span style="font-size: 35px;">{{irradiation}}</span>
+          <div style="height: 70%; display: flex; justify-content: center; align-items: center">
+            <span style="font-size: 35px">{{ irradiation }}</span>
           </div>
-          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
-            <span style="font-size: 12px;">W/㎡</span>
+          <div style="height: 15%; display: flex; justify-content: end; align-items: center">
+            <span style="font-size: 12px">W/㎡</span>
           </div>
         </div>
       </div>
-      <div style="height: 22%; margin-top: 2%;">
+      <div style="height: 22%; margin-top: 2%">
         <div class="bo">
           <!-- <div style="width: 35%; padding-left: 2%">{{alarmTime}}</div>
           <div style="width: 65%;">{{ information }}</div> -->
@@ -86,7 +88,7 @@
               <div class="number">{{ time2 }}</div>
             </div>
           </div>
-          <div style="width: 65%;" class="scroll-text">
+          <div style="width: 65%" class="scroll-text">
             <div>
               <div class="number">{{ inform1 }}</div>
               <div class="number">{{ inform2 }}</div>
@@ -100,6 +102,7 @@
 
 <script>
 import commonTitle from '../components/commonTitle.vue'
+import axios from 'axios'
 
 export default {
   components: { commonTitle },
@@ -107,20 +110,21 @@ export default {
   props: {
     data: {
       type: Array,
-      default: function(){
+      default: function () {
         return [] // 使用工厂函数返回默认值
-      }
+      },
     },
     // alarmData,
     alarmData: {
       type: Array,
-      default: function(){
+      default: function () {
         return [] // 使用工厂函数返回默认值
-      }
-    }
+      },
+    },
   },
-  data () {
+  data() {
     return {
+      intervalId: null,
       // 获取数据(总)
       dataList: [],
       // 温度
@@ -167,35 +171,34 @@ export default {
       // 测试
       // inform: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7', 'Data 8', 'Data 9'],
       // time: ['time 1', 'time 2', 'time 3', 'time 4', 'time 5', 'time 6', 'time 7', 'time 8', 'time 9'],
-      counter: 0
+      counter: 0,
     }
   },
   watch: {
     data: {
-      handler(newValue, oldValue){
+      handler(newValue, oldValue) {
         // console.log('7878999',newValue, oldValue)
-        if(newValue.length === 0) return
+        if (newValue.length === 0) return
         this.dataList = newValue
-        this.getList()
+        // this.getList()
       },
       immediate: true,
-      deep: true
+      deep: true,
     },
     alarmData: {
-      handler(newValue, oldValue){
+      handler(newValue, oldValue) {
         // console.log('7878999',newValue, oldValue)
 
         var isYuan = newValue.length === 1 && newValue[0] === '原数据'
-        if(isYuan) return
-        this.inform = newValue.map(res => {
+        if (isYuan) return
+        this.inform = newValue.map((res) => {
           return res.tagname
         })
-        this.time = newValue.map(res => {
+        this.time = newValue.map((res) => {
           return res.logtime
         })
         this.showData()
 
-
         // var hasAlarm = newValue
         // var options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
         // // this.information = hasAlarm ? newValue.tagname : '暂无数据'
@@ -217,16 +220,90 @@ export default {
         // }
       },
       immediate: true,
-      deep: true
-    }
+      deep: true,
+    },
   },
-  created () {
+  created() {
+    // this.loginwa()
+    this.refreshData();
+    // 创建定时器，每1秒刷新一次数据
+    // setTimeout(this.refreshData(), 1000)
     // this.showData()
   },
-  mounted () {
-  },
+  mounted() {},
   methods: {
-    getList(){
+    loginwa() {
+      const instance = axios.create({
+        baseURL: 'https://192.168.2.246/WaWebService', // 目标服务器的URL
+        timeout: 20000, // 请求超时时间
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Basic YWRtaW46',
+        },
+      })
+          console.log("登录前");
+      instance
+        .get('/Json/Logon')
+        .then((response) => {
+          console.log("登录", response);
+          // console.log(response.header);  
+        })
+        .catch((error) => {
+          // 处理错误
+          console.error(error)
+        })
+    },
+    refreshData() {
+      const instance = axios.create({
+        baseURL: 'https://192.168.2.246/WaWebService/Json', // 目标服务器的URL
+        timeout: 2000, // 请求超时时间
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Basic YWRtaW46',
+        },
+      })
+      var param = {
+        Tags: [
+          { Name: '当前温度值' },
+          { Name: '温度设定值' },
+          { Name: '当前湿度值' },
+          { Name: '湿度设定值' },
+          { Name: '运行方式设定' },
+        ],
+      }
+      instance
+        .post('GetTagValueText/瑞莱', param)
+        .then((response) => {
+          console.log("刷新数据", response.data)
+          response.data.Values.forEach((item) => {
+            // 温度
+            if (item.Name == '当前温度值') {
+              this.template = item.Value
+            }
+            if (item.Name == '温度设定值') {
+              this.targetT = item.Value
+            }
+            // 辐照
+            // 湿度
+            if (item.Name == '当前湿度值') {
+              this.humidity = item.Value
+            }
+            if (item.Name == '湿度设定值') {
+              this.targetH = item.Value
+            }
+            // 运行方式
+            if (item.Name == '运行方式设定') {
+              this.runStatus = item.Value
+            }
+          })
+        })
+        .catch((error) => {
+          // 处理错误
+          console.error(error)
+        })
+        setTimeout(this.refreshData, 1000)
+    },
+    getList() {
       // console.log(this.dataList)
       for (var i = 0; i < this.dataList.length; i++) {
         // console.log(i,this.dataList[i].Name)
@@ -258,146 +335,138 @@ export default {
         // 显示当前计数器指向的数据
         // console.log(this.inform[this.counter]);
         // console.log(this.time[this.counter]);
-        this.time1 =this.time[this.counter]
-        this.inform1 =this.inform[this.counter]
+        this.time1 = this.time[this.counter]
+        this.inform1 = this.inform[this.counter]
         // 如果还有一条数据可以显示
         if (this.counter + 1 < this.inform.length) {
           // console.log(this.inform[this.counter + 1]);
           // console.log(this.time[this.counter + 1]);
-          this.time2 =this.time[this.counter + 1]
-          this.inform2 =this.inform[this.counter + 1]
+          this.time2 = this.time[this.counter + 1]
+          this.inform2 = this.inform[this.counter + 1]
         }
         if (this.counter + 1 == this.inform.length) {
           this.time2 = ''
           this.inform2 = ''
-          this.counter = -2;
+          this.counter = -2
         }
         // 更新计数器
-        this.counter += 2;
+        this.counter += 2
 
         // 设置下一次调用的定时器
-        setTimeout(this.showData, 3000);
+        setTimeout(this.showData, 3000)
       }
       if (this.counter == this.inform.length) {
-        this.counter = 0;
+        this.counter = 0
       }
-    }
+    },
   },
-  // // 销毁定时器
-  // beforeDestroy(){
-  //   clearTimeout(this.showData)
-  // }
+  // 销毁定时器
+  beforeDestroy(){
+    clearTimeout(this.refreshData)
+  }
 }
 </script>
 
 <style scoped>
-  @import '~@/assets/less/uStyle.less';
+@import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
-  .equipment-info-module{
-    width: 100%;
-    height: 100%;
-  }
-  .box {
-    width: 100%;
-    height: calc(100% - 26px);
-    border-width: 8px 0 0 6px;
-    // border: 1px solid rgb(255, 255, 255);
-    // display: flex;
-    // /* row (默认值) : 主轴为水平万向，起点在左端。*/
-    // flex-direction: row;
-  }
-  // .box>div#demo1{
-  //   width: 50%;
-  //   height: 94%;
-  //   margin: 2%;
-  //   color: #eeeeee;
-  //   font-size: 15px;
-  //   // border: 1px solid rgb(255, 255, 255);
-  // }
-  // .box>div{
-  //   width: 70%;
-  //   height: 94%;
-  //   margin-top: 2%;
-  //   color: #eeeeee;
-  //   font-size: 15px;
-  //   // border: 1px solid rgb(255, 255, 255);
-  // }
-  // .box>div>div{
-  //   padding: 5%;
-  // }
-  .box>div{
-    width: 100%;
-    color: #eeeeee;
-    // border: 1px solid rgb(255, 255, 255);
-  }
-  .le{
-    height: 100%;
-    width: 31%;
-    // border: 1px solid rgb(255, 255, 255);
-    background: linear-gradient(#207ab7, #207ab7) left top,
-    linear-gradient(#207ab7, #207ab7) left top ,
-    linear-gradient(#207ab7, #207ab7) right top,
-    linear-gradient(#207ab7, #207ab7) right top,
-    linear-gradient(#207ab7, #207ab7) left bottom,
-    linear-gradient(#207ab7, #207ab7) left bottom,
-    linear-gradient(#207ab7, #207ab7) right bottom,
-    linear-gradient(#207ab7, #207ab7) right bottom;
-    background-repeat: no-repeat;
-    background-size: 0.05vw 1vw, 1vw 0.05vw;
-    padding: 5px 2px;
-  }
-  .le>div{
-    width: 100%;
-    padding: 0 3% 0 3%;
-    // border: 1px solid rgb(255, 255, 255);
-    color: #eeeeee;
-    align-items: center;
-  }
-  .bo{
-    height: 95%;
-    width: 95.5%;
-    // border: 1px solid rgb(255, 255, 255);
-    margin: 0 0.1% 0.5% 2.4%;
-    background: linear-gradient(#207ab7, #207ab7) left top,
-    linear-gradient(#207ab7, #207ab7) left top ,
-    linear-gradient(#207ab7, #207ab7) right top,
-    linear-gradient(#207ab7, #207ab7) right top,
-    linear-gradient(#207ab7, #207ab7) left bottom,
-    linear-gradient(#207ab7, #207ab7) left bottom,
-    linear-gradient(#207ab7, #207ab7) right bottom,
-    linear-gradient(#207ab7, #207ab7) right bottom;
-    background-repeat: no-repeat;
-    background-size: 0.05vw 1vw, 1vw 0.05vw;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-  }
-  .bo>div{
-    height: 100%;
-    color: #eeeeee;
-    font-size: 16px;
-    // padding-top: 0.2%;
-    // border: 1px solid rgb(255, 255, 255);
-    display: flex;
-    align-items: center;
-  }
-  .scroll-text {
-    overflow: hidden;
-    white-space: nowrap;
-  }
+.equipment-info-module {
+  width: 100%;
+  height: 100%;
+}
+.box {
+  width: 100%;
+  height: calc(100% - 26px);
+  border-width: 8px 0 0 6px;
+  // border: 1px solid rgb(255, 255, 255);
+  // display: flex;
+  // /* row (默认值) : 主轴为水平万向，起点在左端。*/
+  // flex-direction: row;
+}
+// .box>div#demo1{
+//   width: 50%;
+//   height: 94%;
+//   margin: 2%;
+//   color: #eeeeee;
+//   font-size: 15px;
+//   // border: 1px solid rgb(255, 255, 255);
+// }
+// .box>div{
+//   width: 70%;
+//   height: 94%;
+//   margin-top: 2%;
+//   color: #eeeeee;
+//   font-size: 15px;
+//   // border: 1px solid rgb(255, 255, 255);
+// }
+// .box>div>div{
+//   padding: 5%;
+// }
+.box > div {
+  width: 100%;
+  color: #eeeeee;
+  // border: 1px solid rgb(255, 255, 255);
+}
+.le {
+  height: 100%;
+  width: 31%;
+  // border: 1px solid rgb(255, 255, 255);
+  background: linear-gradient(#207ab7, #207ab7) left top, linear-gradient(#207ab7, #207ab7) left top,
+    linear-gradient(#207ab7, #207ab7) right top, linear-gradient(#207ab7, #207ab7) right top,
+    linear-gradient(#207ab7, #207ab7) left bottom, linear-gradient(#207ab7, #207ab7) left bottom,
+    linear-gradient(#207ab7, #207ab7) right bottom, linear-gradient(#207ab7, #207ab7) right bottom;
+  background-repeat: no-repeat;
+  background-size: 0.05vw 1vw, 1vw 0.05vw;
+  padding: 5px 2px;
+}
+.le > div {
+  width: 100%;
+  padding: 0 3% 0 3%;
+  // border: 1px solid rgb(255, 255, 255);
+  color: #eeeeee;
+  align-items: center;
+}
+.bo {
+  height: 95%;
+  width: 95.5%;
+  // border: 1px solid rgb(255, 255, 255);
+  margin: 0 0.1% 0.5% 2.4%;
+  background: linear-gradient(#207ab7, #207ab7) left top, linear-gradient(#207ab7, #207ab7) left top,
+    linear-gradient(#207ab7, #207ab7) right top, linear-gradient(#207ab7, #207ab7) right top,
+    linear-gradient(#207ab7, #207ab7) left bottom, linear-gradient(#207ab7, #207ab7) left bottom,
+    linear-gradient(#207ab7, #207ab7) right bottom, linear-gradient(#207ab7, #207ab7) right bottom;
+  background-repeat: no-repeat;
+  background-size: 0.05vw 1vw, 1vw 0.05vw;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.bo > div {
+  height: 100%;
+  color: #eeeeee;
+  font-size: 16px;
+  // padding-top: 0.2%;
+  // border: 1px solid rgb(255, 255, 255);
+  display: flex;
+  align-items: center;
+}
+.scroll-text {
+  overflow: hidden;
+  white-space: nowrap;
+}
 
-  .number {
-    display: block;
-    animation: scrollNumber 3s infinite steps(1);
-  }
+.number {
+  display: block;
+  animation: scrollNumber 3s infinite steps(1);
+}
 
-  // @keyframes scrollNumber {
-  //   0% {
-  //     transform: translateX(20%);
-  //   }
-  //   100% {
-  //     transform: translateX(-20%);
-  //   }
-  // }
+// @keyframes scrollNumber {
+//   0% {
+//     transform: translateX(20%);
+//   }
+//   100% {
+//     transform: translateX(-20%);
+//   }
+// }
 </style>

src/views/modules_guAn/webaccess/index.vue

@@ -3,14 +3,16 @@
   <a-form-model ref="form" :model="model" :rules="validatorRules">
     <a-form-model-item label="设备参数名" :labelCol="labelCol" :wrapperCol="wrapperCol">
       <a-input v-model="tagname" style="width: 20%" />
-        <a-button @click="get" icon="reload" type="primary" style="margin-left:10px">获取参数值</a-button>
+      <a-button @click="get" icon="reload" type="primary" style="margin-left: 10px">获取参数值</a-button>
+      <a-button @click="getdirect" icon="reload" type="warning" style="margin-left: 10px">直接获取</a-button>
     </a-form-model-item>
     <a-form-model-item label="设备参数值" :labelCol="labelCol" :wrapperCol="wrapperCol">
       <a-input v-model="tagvalue" style="width: 20%" />
-        <a-button type="info" icon="reload" @click="set" style="margin-left:10px">设置参数值</a-button>
+      <a-button type="info" icon="reload" @click="set" style="margin-left: 10px">设置参数值</a-button>
     </a-form-model-item>
     <a-form-model-item label="获取历史数据" :labelCol="labelCol" :wrapperCol="wrapperCol">
-        <a-button type="info" icon="reload" @click="getlog">获取历史数据</a-button>
+      <a-button type="info" icon="reload" @click="getlog">获取历史数据</a-button>
+      <a-button type="info" icon="reload" @click="loginwa">登录WA</a-button>
     </a-form-model-item>
     <a-form-model-item label="返回内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
       <a-textarea v-model="message" rows="9" />
@@ -20,6 +22,7 @@
 
 <script>
 import { getWATagNameValues, setWATagNameValues, getWADataLog } from '@/api/datacoll/webaccess.js'
+import axios from 'axios'
 export default {
   name: 'Index',
   data() {
@@ -40,6 +43,26 @@ export default {
     }
   },
   methods: {
+    loginwa() {
+      const instance = axios.create({
+        baseURL: 'https://192.168.2.246/WaWebService', // 目标服务器的URL
+        timeout: 20000, // 请求超时时间
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Basic YWRtaW46',
+        },
+      })
+      instance
+        .get('/Json/Logon')
+        .then((response) => {
+          console.log("登录", response);
+          console.log(response.header);
+        })
+        .catch((error) => {
+          // 处理错误
+          console.error(error)
+        })
+    },
     get() {
       console.log('获取参数')
       if (this.tagname == '' || this.tagname == null) {
@@ -51,6 +74,34 @@ export default {
         this.message = response.message
       })
     },
+    getdirect() {
+      console.log('直接获取获取参数值')
+      if (this.tagname == '' || this.tagname == null) {
+        this.$modal.msgError('请输入设备参数名')
+        return false
+      }
+      var param = { Tags: [
+          { Name: this.tagname },
+        ]}
+      const instance = axios.create({
+        baseURL: 'http://127.0.0.1/WaWebService/Json', // 目标服务器的URL
+        timeout: 3000, // 请求超时时间
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Basic YWRtaW46',
+        },
+      })
+      instance
+        .post('/GetTagValue/瑞莱', param)
+        .then((response) => {
+          console.log(response.data.Values)
+          this.message = response.data.Values[0].Value
+        })
+        .catch((error) => {
+          // 处理错误
+          console.error(error)
+        })
+    },
     set() {
       console.log('设置参数')
       if (this.tagname == '' || this.tagname == null) {