feat : 新增报警信息功能

src/views/site/index.vue

@@ -101,13 +101,21 @@
     </el-dialog>
 
     <el-dialog :close-on-click-modal="false" v-model="isUploadVisited" width="1558px">
+      <div @click="isUploadVisited=false" style="position: absolute;right: 20px;top:10px;cursor: pointer">
+        <el-icon size="80" color="#fff">
+          <Close/>
+        </el-icon>
+      </div>
       <el-upload
-          class="upload-demo"
+          style="margin-top:40px"
           drag
           limit="1"
           :action="uploadFileUrl"
-          :auto-upload="false"
+          :auto-upload="true"
+          :headers="headers"
+          :data="uploadData"
           :on-success="handleUploadSuccess"
+          :before-upload="beforeUpload"
       >
         <el-icon>
           <upload-filled/>
@@ -115,17 +123,12 @@
         <div class="el-upload__text">
           拖拽一张图纸到这里 或者 <em>点击上传</em>
         </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            文件限制大小为 16MB
+          </div>
+        </template>
       </el-upload>
-      <template #footer>
-        <div class="btns">
-          <div class="cancel-btn" @click="isUploadVisited=false">
-            取消
-          </div>
-          <div class="sure-btn" @click="handleSubmit(formInstance)">
-            确定
-          </div>
-        </div>
-      </template>
     </el-dialog>
     <div class="pagination">
       <span @click="firstPage" v-if="showFirst">首页</span>
@@ -141,6 +144,7 @@
 import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
 import {ElMessage, ElMessageBox} from "element-plus";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getToken} from '@/utils/auth'
 
 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
@@ -148,9 +152,13 @@ const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
+const clickSiteId = ref('')
+const uploadData = ref()
 const baseURL = import.meta.env.VITE_BASE_URL
-// const uploadFileUrl = ref(baseURL + "/workflow/process/file");
-const uploadFileUrl = ref("#");
+const uploadFileUrl = ref(baseURL + '/tunnel/site/upload');
+const headers = reactive({
+  authorization: getToken()
+})
 const info = ref({
   tunnelName: '',
   constructionLength: 0,
@@ -176,13 +184,17 @@ const formRules = ref({
   siteName: [{required: true, message: '请输入站点名称', trigger: ['blur', 'change']}]
 })
 const formInstance = ref()
-const handleUploadSuccess = (res, file) => {
-  console.log('file', file)
+const beforeUpload = () => {
+  uploadData.value = {
+    siteId: clickSiteId.value
+  }
+}
+const handleUploadSuccess = (res) => {
   if (res.code !== 1000) {
     ElMessage.error("上传失败");
+  } else {
+    ElMessage.success("上传成功");
   }
-  let data = res.data;
-  // attachmentList.value.push(data);
 };
 
 const handleGoHome = () => {
@@ -255,6 +267,7 @@ const handleEdit = (item) => {
 }
 const handleUpload = (siteId) => {
   isUploadVisited.value = true
+  clickSiteId.value = siteId
 }
 const handleAdd = () => {
   restFrom()
@@ -356,6 +369,11 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-upload__tip) {
+  font-size: 40px;
+  color: #FFFFFF;
+}
+
 :deep(.el-upload-dragger) {
   background-color: transparent;
   box-shadow: none;
@@ -373,22 +391,29 @@ const handleCurrentChange = (val) => {
   .el-upload__text {
     font-size: 50px;
     color: #FFFFFF;
-    em{
+
+    em {
       color: #05FEFF;
     }
   }
 }
 
 :deep(.el-upload-list) {
-  .el-upload-list__item{
+  .el-upload-list__item {
     &:hover {
       background-color: transparent;
     }
-    .el-icon{
+
+    .el-icon {
       font-size: 61px;
       color: #FFFFFF;
     }
+
+    .el-icon--close-tip {
+      display: none;
+    }
   }
+
   .el-upload-list__item-name {
     font-size: 61px !important;
     color: #FFFFFF;