123

src/api/infoApi.js

@@ -180,6 +180,14 @@ const infoApi = {
   // 获取设备下的点位
   getPointData(params) {
     return postPBRequest("/data", params, 56000);
+  },
+  //启用设备
+  startDevice(params) {
+    return postPBRequest("/data", params, 56101);
+  },
+  //禁用设备
+  stopDevice(params) {
+    return postPBRequest("/data", params, 56102);
   }
 };
 export default infoApi;

src/components/De.vue

@@ -0,0 +1,123 @@
+<template>
+    <el-drawer v-model="visible" direction="rtl" :before-close="closeDialog">
+        <div class="btns">
+            <el-button type="primary" size="large" @click="resetCount">重置</el-button>
+        </div>
+        <fieldset class="box2">
+            <legend class="box-ht">读计数</legend>
+            <!-- <el-form label-width="130px">
+                <el-form-item label="总计数">
+                    <el-input disabled v-model="health[healthObj.status]"></el-input>
+                </el-form-item>
+                <el-form-item label="成功计数">
+                    <el-input disabled v-model="health[healthObj.status]"></el-input>
+                </el-form-item>
+                <el-form-item label="最后一次成功时间">
+                    <el-input disabled v-model="healthObj.last_success_time"></el-input>
+                </el-form-item>
+                <el-form-item label="失败计数">
+                    <el-input disabled v-model="health[healthObj.status]"></el-input>
+                </el-form-item>
+                <el-form-item label="最后一次失败时间">
+                    <el-input disabled v-model="healthObj.last_failure_ctime"></el-input>
+                </el-form-item>
+                <el-form-item label="最后一次失败原因">
+                    <el-input disabled v-model="healthObj.last_failure_cause"></el-input>
+                </el-form-item>
+            </el-form> -->
+        </fieldset>
+        <fieldset class="box2">
+            <legend class="box-ht">写计数</legend>
+            <!-- <el-form label-width="130px">
+                <el-form-item label="总计数">
+                    <el-input disabled v-model="health[healthObj.status]"></el-input>
+                </el-form-item>
+                <el-form-item label="成功计数">
+                    <el-input disabled v-model="health[healthObj.status]"></el-input>
+                </el-form-item>
+                <el-form-item label="最后一次成功时间">
+                    <el-input disabled v-model="healthObj.last_success_time"></el-input>
+                </el-form-item>
+                <el-form-item label="失败计数">
+                    <el-input disabled v-model="health[healthObj.status]"></el-input>
+                </el-form-item>
+                <el-form-item label="最后一次失败时间">
+                    <el-input disabled v-model="healthObj.last_failure_ctime"></el-input>
+                </el-form-item>
+                <el-form-item label="最后一次失败原因">
+                    <el-input disabled v-model="healthObj.last_failure_cause"></el-input>
+                </el-form-item>
+            </el-form> -->
+
+        </fieldset>
+    </el-drawer>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
+import infoApi from "@/api/infoApi.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+export default {
+  props: ["dialogVisible", "formData"],
+  emits: ["dialogClose", "dialogSuccess"],
+  setup(props, ctx) {
+    const ruleFormRef = ref(null);
+    const state = reactive({
+        health: {
+            0: 'null',
+            1: 'ok',
+            2: 'error',
+        },
+    })
+
+    const visible = computed(() => {
+      return props.dialogVisible;
+    });
+
+    onMounted(() => {
+      getD();
+    });
+    const getD = async () => {
+    //   const parm = {
+    //     driver_name: props.formData.driver_name
+    //   }
+    //   const res = await infoApi.getD(parm);
+    //   if (res.code == 0) {
+    //     state.name = res.data.name
+    //     state.healthObj = res.data.health;
+    //     state.countObj = res.data.count;
+    //   }
+    };
+    const resetCount = async () => {
+    //   const parm = {
+    //     name: props.formData.name
+    //   }
+    //   const res = await infoApi.resetCount(parm);
+    //   if (res.code == 0) {
+    //     getD();
+    //   }
+    }
+    const closeDialog = () => {
+      ctx.emit("dialogClose");
+    };
+
+
+    return {
+      ...toRefs(state),
+      visible,
+      closeDialog,
+      getD,
+      resetCount
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+    ::v-deep .el-form-item__content {
+        display: flex;
+        flex-wrap: nowrap;
+
+        >span {
+            margin-left: 10px;
+        }
+    }
+</style>

src/components/His.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-drawer v-model="visible" direction="rtl" :before-close="closeDialog">
+        <div class="btns">
+            <el-button type="primary" size="large" @click="set">设定</el-button>
+            <el-button type="primary" size="large" @click="start">启用</el-button>
+            <el-button type="primary" size="large" @click="expor">导出</el-button>
+            <el-button type="primary" size="large" @click="clear">清空</el-button>
+
+        </div>
+        
+    </el-drawer>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
+import infoApi from "@/api/infoApi.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+export default {
+  props: ["dialogVisible", "formData"],
+  emits: ["dialogClose", "dialogSuccess"],
+  setup(props, ctx) {
+    const ruleFormRef = ref(null);
+    const state = reactive({
+        
+    })
+
+    const visible = computed(() => {
+      return props.dialogVisible;
+    });
+
+    onMounted(() => {
+      getHis();
+    });
+    const getHis = async () => {
+    //   const parm = {
+    //     driver_name: props.formData.driver_name
+    //   }
+    //   const res = await infoApi.getD(parm);
+    //   if (res.code == 0) {
+    //     state.name = res.data.name
+    //     state.healthObj = res.data.health;
+    //     state.countObj = res.data.count;
+    //   }
+    };
+    const set = async () => {
+    
+    }
+    const start = async () => {
+    
+    }
+    const expor = async () => {
+        
+    }
+    const clear = async () => {
+        
+    }
+    const closeDialog = () => {
+      ctx.emit("dialogClose");
+    };
+
+
+    return {
+      ...toRefs(state),
+      visible,
+      closeDialog,
+      getHis,
+      set,
+      start,
+      expor,
+      clear
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+    ::v-deep .el-form-item__content {
+        display: flex;
+        flex-wrap: nowrap;
+
+        >span {
+            margin-left: 10px;
+        }
+    }
+</style>

src/css/index.scss

@@ -275,6 +275,7 @@ s {
 }
 .box2 {
   border: 1px solid #2B5451; 
+  overflow: auto;
 }
 
 .box2 .box-ht {
@@ -315,3 +316,6 @@ s {
   box-shadow: inset #fff;
   background: #2B5451;
 }
+.height100 {
+  height:100%;
+}

src/views/Data.vue

@@ -12,38 +12,40 @@
         <div class="des">
           <span class="box-title">通讯信息</span>
           <span class="box-info"> 
-            <el-tag>通讯名称:{{ curDriver.driver_name }}</el-tag>
+            <el-tag>通讯名称: {{ curDriver.driver_name }}</el-tag>
-            <el-tag>通讯总计数:{{ curDriver.driver_name }}</el-tag>
+            <el-tag>通讯总计数: {{ curDriver.health && curDriver.health.total_count }}</el-tag>
-            <el-tag>通讯描述:{{ curDriver.driver_description }}</el-tag>
+            <el-tag>通讯描述: {{ curDriver.driver_description }}</el-tag>
-            <el-tag>通讯状态:{{ curDriver.driver_status }}</el-tag>
+            <el-tag>通讯状态: {{ curDriver.driver_status }}</el-tag>
-            <el-tag>通讯成功计数:{{ curDriver.driver_name }}</el-tag>
+            <el-tag>通讯成功计数: {{ curDriver.health && curDriver.health.success_count }}</el-tag>
-            <el-tag>通讯失败计数:{{ curDriver.driver_name }}</el-tag>
+            <el-tag>通讯失败计数: {{ curDriver.health && curDriver.health.failure_count }}</el-tag>
-            <el-tag>通讯最后一次成功时间:{{ curDriver.driver_name }}</el-tag>
+            <el-tag>通讯最后一次成功时间: {{ curDriver.health && curDriver.health.last_success_time }}</el-tag>
-            <el-tag>通讯最后一次失败时间:{{ curDriver.driver_name }}</el-tag>
+            <el-tag>通讯最后一次失败时间: {{ curDriver.health && curDriver.health.last_failure_ctime }}</el-tag>
-            <el-tag>通讯最后一次失败原因:{{ curDriver.driver_name }}</el-tag>
+            <el-tag>通讯最后一次失败原因: {{ curDriver.health && curDriver.health.last_failure_cause }}</el-tag>
           </span>
         </div>
         <div class="right-con">
           <div class="right-set">
-            <div>设备列表</div>
+            <fieldset class="height100 box2">
-            <el-tree
+                <legend class="box-ht">设备列表</legend>
-            :data="driceData"
+                <el-tree
-            :props="defaultProps"
+                :data="deviceData"
-            :highlight-current="true"
+                :props="defaultProps"
-            accordion 
+                :highlight-current="true"
-            node-key="device_name"
+                accordion 
-            ref="taskTree"
+                node-key="device_name"
-            :current-node-key="device_name" 
+                ref="taskTree"
-            @node-click="handleNodeClick">
+                :current-node-key="device_name" 
-          </el-tree>
+                @node-click="handleNodeClick">
+                </el-tree>
+            </fieldset>
           </div>
           <div class="right-table">
             <div class="des">
               <span class="box-title">设备信息</span>
               <div class="box-info"> 
-                <el-tag>设备名称: </el-tag>
+                <el-tag>设备名称: {{ curDevice.device_name }}</el-tag>
-                <el-tag>设备描述: </el-tag>
+                <el-tag>设备描述: {{ curDevice.device_description }}</el-tag>
-                <el-button type="danger">禁用</el-button>
+                <el-button type="danger" @click="doDevice">{{!curDevice.device_disable? '启用' : '禁用'}}</el-button>
               </div>
             </div>
             <el-table :data="tableData"  height="400" border :row-class-name="tableRowClassName"
@@ -58,43 +60,74 @@
               <el-table-column prop="point_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip />
               <el-table-column label="操作" align="center" width="200" show-overflow-tooltip>
                 <template #default="scope">
-                  <el-button type="success" size="large">
+                  <el-button type="success" size="large" @click="openHis(scope.row)">
                     历史
                   </el-button>
-                  <el-button type="warning" size="large" v-if="scope.row.point_permissions ==2">
+                  <el-button type="warning" size="large" @click="openDe(scope.row)" v-if="scope.row.point_permissions ==2">
                     详情
                   </el-button>
-
+                  <el-button type="primary" size="large" v-if="scope.row.point_permissions ==2">
+                    写值
+                  </el-button>
                 </template>
               </el-table-column>
             </el-table>
+ 
           </div>
         </div>
       </div>
     </div>
+    <De
+      :formData="formData"
+      :dialogVisible="dialogVisible"
+      v-if="dialogVisible"
+      @dialogClose="dialogClose"
+      @dialogSuccess="dialogSuccess"
+    >
+    </De>
+    <His
+      :formData="formData"
+      :dialogVisible="dialogVisible1"
+      v-if="dialogVisible1"
+      @dialogClose="dialogClose"
+      @dialogSuccess="dialogSuccess"
+    >
+    </His>
   </el-card>
 </template>
 
 <script>
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 import infoApi from "@/api/infoApi.js";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
+import De from "@/components/De.vue";
+import His from "@/components/His.vue";
 export default {
-  name: "data",
+  name: "data", 
+  components: {
+    De
+  },
   setup() {
+   
     const taskTree = ref(null);
     const state = reactive({
       indexi: 0,
       
       driverData: [],
-      driceData: [ ],
+      deviceData: [ ],
       currentNodekey: 11,
       tableData: [],
       defaultProps: {
         children: "children",
         label: "device_name"
       },
-      curDriver: {}
+      curDriver: {},
+      curDevice: {}, 
+      start: 0, //启用设备  
+      //
+      formData: {},
+      dialogVisible: false,
+      dialogVisible1: false,
     });
 
     onMounted(() => {
@@ -108,6 +141,7 @@ export default {
         if (state.driverData.length > 0) {
           changeQd(0, state.driverData[0]);
           state.curDriver = state.driverData[0];
+          console.log(333, state.curDriver)
         }
       }
 
@@ -125,20 +159,23 @@ export default {
       }
       const res = await infoApi.getDeviceData(param);
       if (res.code == 0) {
-        state.driceData = res.data || [];
+        state.deviceData = res.data || [];
-        console.log(123, state.driceData)
+        console.log(123, state.deviceData)
-        if (state.driceData.length > 0) {
+        if (state.deviceData.length > 0) {
-          handleNodeClick(state.driceData[0]);
+          handleNodeClick(state.deviceData[0]);
+          state.curDevice = state.deviceData[0]
           nextTick(() => {
-            console.log(123 , state.driceData[0].device_name)
+            console.log(123 , state.deviceData[0].device_name)
-            taskTree.value.setCurrentKey(state.driceData[0].device_name);
+            taskTree.value.setCurrentKey(state.deviceData[0].device_name);
           })
         }
       }
 
     }
 
+
     const handleNodeClick = (item) => {
+      state.curDevice = item;
       getPointData(item);
     }
 
@@ -154,14 +191,47 @@ export default {
 
       }
     }
+  const doDevice = async () => {
+    const param = {
+      driver_name: state.curDevice.driver_name,
+      device_name: state.curDevice.device_name
+    }
+    const res = !state.curDevice.device_disable? await infoApi.startDevice(param): await infoApi.stopDevice(param);
+    if (res.code == 0) {
+      ElMessage.success(res.message || '请求成功');
+      getDeviceData(state.curDevice.driver_name);
+      getPointData(state.curDevice);
+    }
+  }
+  const dialogClose = () => {
+      state.dialogVisible = false;
+      state.dialogVisible1 = false;
+    };
 
-
+    const dialogSuccess = () => {
-
+      state.dialogVisible = false;
+      state.dialogVisible1 = false;
+    };
+    const openDe = (item) => {
+      state.formData = JSON.parse(JSON.stringify(item));
+      state.dialogVisible = true;
+       
+    }
+    const openHis = (item) => {
+      state.formData = JSON.parse(JSON.stringify(item));
+      state.dialogVisible1 = true;
+       
+    }
     return {
       ...toRefs(state),
       taskTree,
       changeQd,
-      handleNodeClick
+      handleNodeClick, 
+      doDevice,
+      dialogClose,
+      dialogSuccess,
+      openDe,
+      openHis
     };
   },
 };
@@ -176,6 +246,7 @@ export default {
     width: 15%;
     border: 1px solid #006b3b;
     font-size: 16px; 
+    height:100%;
     .qd-one {
       display: flex;
       justify-content: space-around;
@@ -207,12 +278,12 @@ export default {
       justify-content: space-between;
     }
     .right-set {
-      width: 12%;
+      width: 20%;
       padding: 5px;
     }
 
     .right-table {
-      width: 88%;
+      width: 79%;
       //  .el-tree-node {
       //     border: 1px solid #ddd !important;
       //     margin-top: 10px !important;
@@ -250,7 +321,7 @@ export default {
       flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
-       ::v-deep .el-tag {
+       .el-tag {
         margin: 10px;
        }
     }