点位列表

src/views/ems/site/sblb/PointTable.vue

@@ -11,9 +11,9 @@
       lock-scroll
       show-close
       title="点位清单"
-      width="800px"
+      width="950px"
     >
-      <el-form :inline="true" label-width="85px">
+      <el-form :inline="true" label-width="100px">
         <el-form-item label="点位名称">
           <el-input
             v-model="form.dataPointName"
@@ -30,7 +30,14 @@
             style="width: 150px"
           ></el-input>
         </el-form-item>
-        <br />
+        <el-form-item label="modbus ip">
+          <el-input
+              v-model="form.ipAddress"
+              clearable
+              placeholder="请输入ip"
+              style="width: 150px"
+          ></el-input>
+        </el-form-item>
         <el-form-item label="最小值">
           <el-input
             v-model="form.lower"
@@ -47,6 +54,14 @@
             style="width: 150px"
           ></el-input>
         </el-form-item>
+        <el-form-item label="modbus 端口">
+          <el-input
+              v-model="form.ipPort"
+              clearable
+              placeholder="请输入端口"
+              style="width: 150px"
+          ></el-input>
+        </el-form-item>
         <el-form-item style="margin-left: 20px">
           <el-button type="primary" @click="search">搜索</el-button>
         </el-form-item>
@@ -62,7 +77,13 @@
         @sort-change="handleSortChange"
       >
         <el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
-        <el-table-column label="数据点位名称" prop="pointName">
+        <el-table-column label="数据点位名称" prop="pointName"></el-table-column>
+        <el-table-column
+            label="modbus地址"
+        >
+          <template slot-scope="scope">
+            <span>{{`${scope.row.ipAddress || ''} ${scope.row.ipPort || ''}`}}</span>
+          </template>
         </el-table-column>
         <el-table-column
           label="最新值"
@@ -83,7 +104,7 @@
           </template>
         </el-table-column>
         <el-table-column label="单位" prop="dataUnit"></el-table-column>
-        <el-table-column label="更新时间" prop="updateTime" sortable="custom">
+        <el-table-column label="更新时间" min-width="160px" prop="updateTime" sortable="custom">
         </el-table-column>
       </el-table>
       <el-pagination
@@ -128,6 +149,8 @@ export default {
           dataPoint: "", //点位名称
           lower: "", //
           upper: "", //
+          ipAddress:'',
+          ipPort:''
         };
         this.loading = false;
       }
@@ -151,6 +174,8 @@ export default {
         dataPoint: "", //点位名称
         lower: "", //
         upper: "", //
+        ipAddress:'',
+        ipPort:''
       },
       deviceCategory: "",
       deviceId: "",
@@ -204,6 +229,8 @@ export default {
           dataPoint,
           lower,
           upper,
+          ipAddress,
+          ipPort
         },
       } = this;
       getDevicePointList({
@@ -219,6 +246,8 @@ export default {
         dataPoint,
         lower,
         upper,
+        ipAddress,
+        ipPort
       })
         .then((response) => {
           this.tableData = response?.rows || [];

src/views/ems/site/sblb/PointUpload.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog :visible.sync="show" class="ems-dialog" title="点位上传" width="400px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
+<!--    <file-upload :fileType='["xls", "xlsx"]' value="String" :limit="1" :drag="false"  @input="updateFile"/>-->
+    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__tip text-center" slot="tip">
+        <span>仅允许导入xls、xlsx格式文件。</span>
+<!--        <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>-->
+      </div>
+    </el-upload>
+    <div slot="footer">
+      <el-button @click="handleClosed">取消</el-button>
+      <el-button type="primary" @click="submitFileForm">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+import { getToken } from "@/utils/auth"
+export default {
+  data(){
+    return {
+      show:false,
+      // 用户导入参数
+      upload: {
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
+      },
+    }
+  },
+  methods:{
+    showDialog(row){
+      this.show = true;
+    },
+    //关闭弹窗 重置数据
+    handleClosed(){
+      this.$refs.upload.clearFiles()//写在before-closed无效
+      this.show=false
+    },
+    // updateFile(data){
+    //   console.log('上传文件emit',data)
+    // },
+    // saveDialog(){
+    //  this.show=true
+    // },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      console.log('上传文件结果',response)
+      this.upload.isUploading = false
+      if(response.code === 500 && !response.msg) response.msg = '上传失败'
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + (response.msg || '上传成功' )+ "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+      this.$emit('update')
+      this.handleClosed()
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit()
+    }
+  }
+}
+</script>

src/views/ems/site/sblb/index.vue

@@ -50,7 +50,7 @@
       <el-table-column
         fixed="right"
         label="操作"
-        width="260">
+        width="350">
         <template slot-scope="scope">
           <el-button
               @click="pointDetail(scope.row)"
@@ -58,14 +58,31 @@
               size="mini">
             点位清单
           </el-button>
+          <el-button
+              @click="downloadPointDetail(scope.row)"
+              type="primary"
+              plain
+              size="mini">
+            下载点位清单
+          </el-button>
+          <el-button
+              @click="uploadPointDetail(scope.row)"
+              type="success"
+              plain
+              size="mini">
+            上传点位清单
+          </el-button>
+          <br>
           <el-button
             @click="editDevice(scope.row)"
+            style="margin-top:10px;"
             type="warning"
             size="mini">
             编辑
           </el-button>
           <el-button
             type="danger"
+            style="margin-top:10px;"
             @click="deleteDevice(scope.row)"
             size="mini">
             删除
@@ -95,18 +112,20 @@
     </el-dialog>
     <add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
     <point-table ref="pointTable"/>
+    <point-upload ref="pointUpload" @update="getData"/>
   </div>
 </template>
 
 <script>
-import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
+import {getDeviceInfoList,getDeviceDetailInfo,deleteService,exportPointList,importPointList} from'@/api/ems/site'
 import {getAllSites} from '@/api/ems/zddt'
 import {formatNumber} from "@/filters/ems";
 import PointTable from './PointTable.vue'
 import AddDevice from "./AddDevice.vue";
+import PointUpload from "./PointUpload.vue";
 export default {
   name: "Sblb",
-  components:{AddDevice,PointTable},
+  components:{AddDevice,PointTable,PointUpload},
   data() {
     return {
       loading:false,
@@ -148,6 +167,14 @@ export default {
     pointDetail(row){
       this.$refs.pointTable.showTable(row)
     },
+    // 下载点位清单
+    downloadPointDetail(row){
+
+    },
+    // 上传点位清单
+    uploadPointDetail(row){
+      this.$refs.pointUpload.showDialog(row)
+    },
     clearEditDeviceData(){
       this.mode = '';
       this.editDeviceId=''