设备详情文件上传功能添加

src/views/big/device/components/devInfo.vue

@@ -9,6 +9,7 @@
     <div class="info-header">
       <h2>{{ prop.title }}</h2>
       <span>设备详情 </span>
+      <el-button text circle  type="" icon="CloseBold" size="small" class="closs-button" @click="handleClose"></el-button>
     </div>
     <div class="info-body">
       <el-tabs v-model="activeinfo" class="demo-tabs" @tab-click="handleClick">
@@ -31,21 +32,56 @@
             :page="pageval"
           ></Wtable>
         </el-tab-pane>
-        <el-tab-pane label="最新遥测数据" name="newDAata">Role</el-tab-pane>
+        <el-tab-pane label="最新遥测数据" name="newDAata">
-        <el-tab-pane label="pdf" name="pdf">Task</el-tab-pane>
+          <el-row style=" margin-bottom: 10px;">
+            <el-col :span="20"></el-col>
+            <el-col :span="2"><el-button :icon="Refresh" circle @click="researchtelemetrytable"/></el-col>
+            <el-col :span="2"></el-col>
+          </el-row>
+          <Wtable
+            :config="telemetrytableConfig"
+            :tableData="telemetrytableData"
+            @gettabellist="gettelemetryTableList"
+            :page="telemetrypageval"
+          ></Wtable>
+        </el-tab-pane>
+        <el-tab-pane label="pdf" name="pdf">
+          <el-row style=" margin-bottom: 10px;">
+            <el-col :span="2"></el-col>
+            <el-col :span="18">
+              <el-button
+                     type="info"
+                     plain
+                     icon="Upload"
+                     @click="handleImportPDF"
+                  >文件上传</el-button></el-col>
+            <el-col :span="2"><el-button :icon="Refresh" circle @click="researchPDFtable"/></el-col>
+            <el-col :span="2"></el-col>
+          </el-row>
+          <Wtable
+            :config="PDFConfig"
+            :tableData="PDFtableData"
+            @gettabellist="getPDFTableList"
+            :page="PDFpageval"
+          ></Wtable>
+        </el-tab-pane>
       </el-tabs>
     </div>
+    <upLoad :uploadConfig="uploadConfig"></upLoad>
   </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { getCurrentInstance, ref } from "vue";
 import Wform from "./Wform.vue";
 import Wdescriptions from "./Wdescriptions.vue";
+import upLoad from "./upLoad.vue";
 import Wtable from "./Wtable.vue";
 import type { TabsPaneContext } from "element-plus";
+const { proxy } = getCurrentInstance() as any;
 import {
     Refresh,
+    CloseBold
 } from '@element-plus/icons-vue'
 const activeinfo = ref("info");
 const prop = defineProps({
@@ -143,6 +179,46 @@ const descriptionsData = ref({
   remark: "说明",
 });
 
+//遥测数据表格配置及数据
+const telemetrytableConfig = ref({
+  height: 430,
+  column: [
+    {
+      prop: "nowTime",
+      label: "最后更新时间",
+      width: "",
+    },
+    {
+      prop: "keyName",
+      label: "键名",
+      width: "",
+    },
+    {
+      prop: "keyValue",
+      label: "值",
+      width: "",
+    },
+  ],
+});
+const telemetrytableData = ref([
+  {
+    nowTime: "1",
+    keyName: "1",
+    keyValue: "1",
+  },
+  {
+    nowTime: "2",
+    keyName: "2",
+    keyValue: "2",
+  },
+  {
+    nowTime: "3",
+    keyName: "3",
+    keyValue: "3",
+  },
+]);
+const telemetrypageval=ref({page:1,pageSize:5,total:1})
+
 //表格配置及数据
 const tableConfig = ref({
   height: 430,
@@ -183,20 +259,114 @@ const tableData = ref([
 ]);
 const pageval=ref({page:1,pageSize:5,total:1})
 
+//pdf导入按钮操作
+const handleImportPDF=()=>{
+  uploadConfig.value.openDialog=true
+  console.log(uploadConfig.value);
+  
+}
+//PDF配置及数据
+const PDFConfig = ref({
+  height: 430,
+  column: [
+    {
+      prop: "nowTime",
+      label: "最新时间",
+      width: "",
+    },
+    {
+      prop: "Name",
+      label: "名称",
+      width: "",
+    },
+    {
+      prop: "address",
+      label: "地址",
+      width: "",
+    },
+    {
+      prop: "more",
+      label: "更多",
+      width: "",
+    },
+  ],
+});
+const PDFtableData = ref([
+  {
+    nowTime: "1",
+    Name: "1",
+    address: "1",
+    more: "1",
+  },
+  {
+    nowTime: "2",
+    Name: "2",
+    address: "2",
+    more: "1",
+  },
+  {
+    nowTime: "3",
+    Name: "3",
+    address: "3",
+    more: "1",
+  },
+]);
+const PDFpageval=ref({page:1,pageSize:5,total:1})
+
+//关闭抽屉
 const handleClose = () => {
   //baseFormRef.value.reset()
   emit("closeDialog");
 };
+//切换tab标签方法
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   //   console.log(tab, event)
 };
+//刷新属性数据方法
 const researchtable=()=>{
     pageval.value.page=1
     pageval.value.pageSize=5
+    getTableList()
 }
+//获取数据数据方法
 const getTableList = () => {
   console.log(pageval.value);
 };
+//刷新遥测数据方法
+const researchtelemetrytable=()=>{
+  telemetrypageval.value.page=1
+  telemetrypageval.value.pageSize=5
+    getTableList()
+}
+//获取遥测数据方法
+const gettelemetryTableList = () => {
+  console.log(telemetrypageval.value);
+};
+
+//刷新PDF数据方法
+const researchPDFtable=()=>{
+  PDFpageval.value.page=1
+  PDFpageval.value.pageSize=5
+    getTableList()
+}
+//获取DFT数据方法
+const getPDFTableList = () => {
+  console.log(PDFpageval.value);
+};
+
+const uploadConfig=ref({
+        //上传文件的类型限制
+        accept:[''],
+         // 弹出层标题
+        title:"",
+        //弹出层宽度
+        width:'400px',
+         // 是否显示弹出层
+        openDialog:false,
+        //上传文件的数量限制
+        limit:1,
+        multiple:false
+})
 // 刷新表格事件
 const emit = defineEmits(["closeDialog"]);
 </script>
@@ -213,11 +383,18 @@ const emit = defineEmits(["closeDialog"]);
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
+  position: relative;
   & h2 {
     margin: 0;
     font-size: 30px;
     font-weight: 600;
   }
+  & .closs-button{
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-top: -10px
+  }
 }
 :deep(.el-tabs__nav) {
   margin-left: 20px;

src/views/big/device/components/upLoad.vue

@@ -0,0 +1,110 @@
+<!--
+ * @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\upLoad.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-29 08:42:02
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+<el-dialog :title="config.title" v-model="config.openDialog" :width="config.width" append-to-body>
+         <el-upload
+            ref="uploadRef"
+            :limit="config.limit"
+            :accept="config.accept.join(',')"
+            :headers="upload.headers"
+            :action="upload.url"
+            :disabled="upload.isUploading"
+            :on-progress="handleFileUploadProgress"
+            :on-error="handleUploadError"
+            :on-success="handleFileSuccess"
+            :auto-upload="false"
+            drag
+         >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>,文件大小不得超过5MB</div>
+         </el-upload>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitFileForm">确 定</el-button>
+               <el-button @click="config.openDialog = false">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, reactive, ref} from "vue"
+import type { UploadInstance } from 'element-plus'
+import { getToken } from "@/utils/auth";
+const {  proxy } = getCurrentInstance() as any;
+const prop = defineProps({
+uploadConfig:{
+    type:Object,
+    default:{
+        //上传文件的类型限制
+        accept:[''],
+         // 弹出层标题
+        title:"",
+        //弹出层宽度
+        width:'400px',
+         // 是否显示弹出层
+        openDialog:false,
+        //上传文件的数量限制
+        limit:1,
+        multiple:false
+    }
+}
+});
+//实现父子组件数据双向绑定
+const config = computed({
+  get: () => prop.uploadConfig,
+  set: val => {
+    emit('update:uploadConfig', val)
+  },
+})
+const emit = defineEmits(['update:uploadConfig','uploadFileFun'])
+let uploadRef = ref<UploadInstance | null>(null)
+const upload = reactive({
+  // 是否禁用上传
+  isUploading: false,
+  // 设置上传的请求头部
+  headers:{ Authorization: "Bearer " + getToken() },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "/file/upload"
+});
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true;
+};
+const handleUploadError=()=>{
+  proxy.$modal.msgError("上传文件失败");
+}
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+  console.log("我成功了");
+  
+  config.value.openDialog = false;
+  upload.isUploading = false;
+  proxy.$refs["uploadRef"].handleRemove(file);
+  proxy.$modal.msgSuccess("上传文件成功");
+};
+
+// //处理超出文件个数操作
+// const handleExceed=(files, fileList)=>{
+        
+//       }
+// //处理文件上传操作
+// const handleFileUpload=(file)=>{
+//     emit("uploadFileFun",file);
+// }
+//点击确认上传
+const submitFileForm=()=>{
+    uploadRef.value?uploadRef.value.submit():''
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>