最新

src/api/inspection.js

@@ -86,3 +86,26 @@ export function delGasCylinder(parameter) {
     data: parameter
   })
 }
+
+// 批量导入钢瓶档案
+export function waybillImport(parameter) {
+  return request({
+    url: '/api/gas-cylinder/import',
+    method: 'post',
+    data: parameter,
+    uploading: true,
+    timeout: 100000, // 请求超时时间
+    headers: {
+      'Content-Type': 'multipart-formData'
+    },
+  })
+}
+
+// 导出钢瓶档案模板
+export function exportTemplate() {
+  return request({
+    url: '/api/gas-cylinder/export-template',
+    method: 'post',
+    responseType: 'blob',
+  })
+}

src/components/cylinderData.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="border" :style="{height: boxHeight}">
+    <div class="card_box">
+      <div class="title_trapezoid center_in">
+        <span class="center_in">{{title}}</span>
+      </div>
+    </div>
+    <div class="card_collect">
+      <div class="card_amountil">
+        <div style="display: flex;align-items: center;">
+          <img class="item_image" :src="require('@/assets/image/liquefiedgas.png')" alt="" />
+          <div class="title_am">钢瓶总数</div>
+        </div>
+        <div class="title_card">{{cylinderCount}}</div>
+      </div>
+      <div class="card_amountil" v-for="(item,index) in list" :key="index">
+        <div style="display: flex;align-items: center;">
+          <img class="item_image" :src="require('@/assets/image/liquefiedgas.png')" alt="" />
+          <div class="title_am">{{item.status}}</div>
+        </div>
+        <div class="title_card">{{item.count}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wavyBlock',
+    props: {
+      cylinderCount: {
+        type: Number,
+        default: () => 0,
+      },
+      title: {
+        type: String,
+        default: () => '文字',
+      },
+      boxWidth: {
+        type: String,
+        default: () => '200px',
+      },
+      boxHeight: {
+        type: String,
+        default: () => '95%',
+      },
+      list: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .border {
+    position: relative;
+    width: calc(100% - 10px);
+    border: 1px solid #3077ca;
+    margin: 0 10px 0 auto;
+    border-radius: 4px;
+    box-shadow: inset 0 0 40px rgba(48, 119, 202, 0.3);
+  }
+
+  .card_box {
+    position: absolute;
+    top: 0;
+    left: calc(50% - 80px);
+    right: 0;
+  }
+
+  .title_trapezoid {
+    position: relative;
+    color: #fff !important;
+    width: 160px;
+    height: 30px;
+    text-align: center;
+    z-index: 2;
+  }
+
+  .title_trapezoid span {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 160px;
+    top: -1px;
+    z-index: 2;
+    font-size: 15px;
+    line-height: 25px;
+  }
+
+  .title_trapezoid::before {
+    border-bottom: 2px solid #2CD5FF;
+    content: '';
+    z-index: 1;
+    width: 100%;
+    height: 30px;
+    background-image: linear-gradient(to top, #3077ca99, #3077ca7f, transparent);
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: -1px;
+    transform: perspective(100px) rotateX(150deg);
+  }
+
+  .card_collect {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    margin-top: 30px;
+    height: calc(100% - 30px);
+    overflow-y: auto;
+  }
+
+  /* 自定义滚动条整体样式 */
+  ::-webkit-scrollbar {
+    width: 5px;
+    /* 设置滚动条的宽度 */
+  }
+
+  /* 自定义滚动条滑块样式 */
+  ::-webkit-scrollbar-thumb {
+    background-color: #66b1ff;
+    /* 设置滑块的颜色 */
+    border-radius: 5px;
+    /* 设置滑块的圆角 */
+  }
+
+  /* 自定义滚动条轨道样式 */
+  ::-webkit-scrollbar-track {
+    background-color: rgba(102, 177, 255, 0.5) !important;
+    border-radius: 5px;
+    /* 设置轨道的颜色 */
+  }
+
+  .card_amountil {
+    flex: none;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .item_image {
+    height: 24px;
+  }
+
+  .title_card {
+    margin-right: 10px;
+    color: #fff;
+    text-align: center;
+    font-size: 30px;
+    color: #2CD5FF;
+    font: bold 35px mFont;
+  }
+
+  .title_am {
+    margin-left: 10px;
+    color: #fff;
+  }
+</style>

src/store/modules/user.js

@@ -59,11 +59,13 @@ const user = {
             // setToken(data.token)
             localStorage.setItem('T_tokey', data.token);
             getProfile().then(userRes => {
-              var company = userRes.data.user.dept.name
-              var deptNum = userRes.data.user.deptId
-              commit('SET_NAME', company)
-              localStorage.setItem('companyName', company);
-              localStorage.setItem('deptId', deptNum);
+              if (userRes.data) {
+                var company = userRes.data.user.dept.name
+                var deptNum = userRes.data.user.deptId
+                commit('SET_NAME', company)
+                localStorage.setItem('companyName', company);
+                localStorage.setItem('deptId', deptNum);
+              }
             })
             resolve()
           } else {

src/utils/request.js

@@ -49,7 +49,7 @@ request.interceptors.request.use(config => {
   if (token) {
     config.headers.Authorization = 'Bearer ' + token
   }
-  if (config.method === 'post' && config.url != "/api/upload") {
+  if (config.method === 'post' && config.url != "/api/gas-cylinder/import" && config.url != "/api/upload") {
     let data = config.data
     config.data = JSON.stringify(data)
   }
@@ -59,14 +59,29 @@ request.interceptors.request.use(config => {
 let is404AlertShown = false;
 // response interceptor
 request.interceptors.response.use((response) => {
+  // 文件下载（主要看这块）
+  if (response.headers['content-disposition']) {
+    let downLoadMark = response.headers['content-disposition'].split(';');
+    if (downLoadMark[0] === 'attachment') {
+      // 执行下载
+      let fileName = downLoadMark[1].split('filename=')[1];
+      const arr = {
+        data: response.data,
+        fileName: fileName,
+      }
+      return arr
+    }
+  }
   if (response.data.Code || response.data.code) {
     const res = response.data
     if (res.code == 6401) {
       return refreshToken().then((itmds) => {
-        // 更新本地存储的 Token
-        localStorage.setItem("T_tokey", itmds.token);
-        // 重新发送原请求
-        return request(response.config);
+        if (itmds) {
+          // 更新本地存储的 Token
+          localStorage.setItem("T_tokey", itmds.token);
+          // 重新发送原请求
+          return request(response.config);
+        }
       })
     }
     if (res.code == 401 && !is404AlertShown) {

src/views/manufacture/cylinder.js

@@ -18,6 +18,11 @@ export const employee = () => {
     align: 'center',
     colWidth: '180px',
   }, {
+    field: 'uid',
+    label: '高频编码',
+    align: 'center',
+    colWidth: '180px',
+  }, {
     field: 'status',
     label: '状态',
     align: 'center',
@@ -145,6 +150,17 @@ export const cylinderformRules = () => {
       trigger: 'blur'
     }]
   }, {
+    field: 'uid',
+    label: '高频编码',
+    placeholder: '高频编码',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: false,
+      message: '请输入高频编码',
+      trigger: 'blur'
+    }]
+  }, {
     field: 'station_name',
     label: '上次充装气站',
     placeholder: '上次充装气站',

src/views/manufacture/cylinderCondition.vue

@@ -103,22 +103,25 @@
       @close="closeDialog">
       <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-row :gutter="20">
-          <el-col :span="16">
-            <el-form-item label="单位内编号" prop="code" :rules="formRuleList[0].rules">
-              <el-input v-model="ruleForm.code" placeholder="请输入单位内编号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <div style="display: flex;align-items: center;">
-              <el-button type="primary" @click="addCode">添加</el-button>
-              <div style="display: flex;margin-left: 10px;">
-                <el-upload :auto-upload="false" :file-list="fileList" :on-change="handleChange"
-                  :on-remove="handleRemove" accept=".xlsx, .xls" :show-file-list="false" action class="upload-box">
-                  <el-button type="success" plain>批量上传</el-button>
-                </el-upload>
+          <div style="display: flex;align-items: center;align-items: flex-start;">
+              <div class="card_form_val">
+                <el-form-item label="单位内编号" prop="code" :rules="formRuleList[0].rules">
+                  <el-input v-model="ruleForm.code" placeholder="请输入单位内编号"></el-input>
+                </el-form-item>
               </div>
-            </div>
-          </el-col>
+              <div style="display: flex;align-items: center;margin-left: 10px;">
+                <el-button type="primary" @click="addCode">添加</el-button>
+                <div style="display: flex;margin-left: 10px;">
+                  <el-upload :auto-upload="false" :file-list="fileList" :on-change="handleChange"
+                    :on-remove="handleRemove" accept=".xlsx, .xls" :show-file-list="false" action class="upload-box">
+                    <el-button type="success" plain>批量上传</el-button>
+                  </el-upload>
+                </div>
+              </div>
+          </div>
+         <!-- <el-col :span="24">
+            <el-input v-model="searchCode" prefix-icon="el-icon-search" placeholder="输入单位内编号搜索" @input="fuzzySearch"></el-input>
+          </el-col> -->
           <el-col :span="24">
             <div class="card_Code_list">
               <div class="space_between_in card_item_codeil" v-for="(item,index) in numData" :key="index">
@@ -203,6 +206,7 @@
         confirmLoading: false,
         lastUid: null,
         fileList: [],
+        // 添加钢瓶列表
         numData: [],
         addTitle: '添加',
         codeType: 1,
@@ -211,6 +215,7 @@
         bottleLoading: false,
         emptyLoading: false,
         defectiveLoading: false,
+        searchCode: '',
       }
     },
     mounted() {
@@ -385,6 +390,21 @@
         this.fileList = []
         this.resultExcel = []
       },
+      // 添加钢瓶模糊搜索
+      fuzzySearch(value){
+        console.log(value,24)
+
+        function fuzzySearch(array, searchTerm) {
+          const regex = new RegExp(searchTerm, 'i');
+          return array.filter(item => regex.test(item));
+        }
+
+        // 示例使用
+        const items = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+        const result = fuzzySearch(items, 'ap'); // 搜索包含 'ap' (不区分大小写) 的项
+
+        console.log(result); // ['apple', 'grapes']
+      },
       // 添加编号
       addCode() {
         if (this.ruleForm.code) {
@@ -576,7 +596,6 @@
     padding-right: 8px;
     margin: 10px 0px;
   }
-
   .card_Code_list {
     max-height: 500px;
     overflow-y: auto;
@@ -718,4 +737,7 @@
     // color: #409eff;
     background-color: #409EFF;
   }
+  .card_form_val{
+    width: 100%;
+  }
 </style>

src/views/manufacture/cylinderFile.vue

@@ -20,6 +20,21 @@
         <el-button type="primary" :loading="confirmLoading" @click="handleAdd">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog title="批量导入" :visible.sync="bulkImportVisible" width="600px" @close="importClose">
+      <div class="card_bulkImport">
+        <el-upload ref="mYupload" class="upload-demo" drag action="#" :limit="1" multiple :http-request="UploadImage">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip" slot="tip">请上传xls或者xlsx格式文件</div>
+        </el-upload>
+        <div style="margin-top: 15px;">
+          <el-button size="medium" type="primary" icon="el-icon-upload" :loading="importFlag"
+            @click="immediateImport">确定导入</el-button>
+          <el-button size="medium" icon="el-icon-download" :loading="downloadFlag"
+            @click="templateDownload">模板下载</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -30,6 +45,8 @@
     addGasCylinder,
     putGasCylinder,
     delGasCylinder,
+    waybillImport,
+    exportTemplate,
   } from '@/api/inspection'
   import actionBar from '@/components/actionBar'
   import tables from '@/components/tables'
@@ -58,6 +75,10 @@
           innerCode: '',
         },
         operateList: [{
+          type: 'import',
+          title: '导入',
+          icon: 'el-icon-upload',
+        }, {
           type: 'add',
           title: '添加钢瓶',
           icon: 'el-icon-plus',
@@ -77,6 +98,10 @@
         confirmLoading: false,
         operationType: '',
         clientId: '',
+        bulkImportVisible: false,
+        importFlag: false,
+        downloadFlag: false,
+        importFile: null,
       }
     },
     mounted() {
@@ -116,13 +141,15 @@
         this.operationType = type
         if (type == 'add') {
           this.staffTitle = '添加钢瓶'
+          const arr = [...this.cylinderRule]
+          arr.forEach((item, index) => {
+            item.disabled = false
+          })
+          this.cylinderRule = arr
+          this.cylinderDialog = true
+        } else if (type == 'import') {
+          this.bulkImportVisible = true
         }
-        const arr = [...this.cylinderRule]
-        arr.forEach((item, index) => {
-          item.disabled = false
-        })
-        this.cylinderRule = arr
-        this.cylinderDialog = true
       },
       buttonData(row, type) {
         let arrRow = JSON.parse(JSON.stringify(row))
@@ -195,6 +222,61 @@
           // console.log('取消')
         });
       },
+      // 导入
+      immediateImport() {
+        if (this.importFile) {
+          this.importFlag = true
+          let formData = new FormData();
+          formData.append('file', this.importFile);
+          formData.append('customerName', this.orderCustomer);
+          waybillImport(formData).then(res => {
+            if (res.code == 200) {
+              this.bulkImportVisible = false
+              this.importFlag = false
+              this.getList()
+              this.$message({
+                message: '恭喜你，导入成功',
+                type: 'success'
+              });
+            }
+          })
+        } else {
+          this.$message({
+            message: '请先选择上传文件',
+            type: 'warning'
+          });
+        }
+      },
+      // 导出模板
+      templateDownload() {
+        this.downloadFlag = true
+        exportTemplate().then(response => {
+          let arrList = response.fileName.split('.')
+          let fixedStr = decodeURIComponent(arrList[0]);
+          let filename = fixedStr + '.' + arrList[1]
+          // this.blobDownload(response, filename)
+          this.blobDownload(response.data, filename)
+          this.downloadFlag = false
+        })
+      },
+      // 导出文件流
+      blobDownload(data, name) {
+        let m = this;
+        var content = data;
+        var data = new Blob([content], {
+          type: "application/vnd.ms-excel;charset=utf-8"
+        });
+        var downloadUrl = window.URL.createObjectURL(data);
+        var anchor = document.createElement("a");
+        anchor.href = downloadUrl;
+        anchor.download = name;
+        anchor.click();
+        window.URL.revokeObjectURL(data);
+      },
+      // 上传文件
+      UploadImage(param) {
+        this.importFile = param.file
+      },
       changeSize(val) {
         this.Pagination.PageSize = val
         this.getList()
@@ -203,6 +285,10 @@
         this.Pagination.PageIndex = val
         this.getList()
       },
+      importClose() {
+        this.importFile = null
+        this.$refs['mYupload'].clearFiles();
+      },
       closeDialog() {
         const arr = [...this.cylinderRule]
         arr.forEach((item, index) => {
@@ -217,4 +303,32 @@
 </script>
 
 <style lang="scss" scoped>
+  .card_bulkImport {
+    width: 100%;
+  }
+
+  ::v-deep .el-upload {
+    width: 100%;
+  }
+
+  ::v-deep .el-upload-dragger .el-upload__text {
+    color: #fff;
+  }
+
+  ::v-deep .el-upload__tip {
+    color: #fff;
+  }
+
+  ::v-deep .el-upload-list__item-name {
+    color: #fff;
+  }
+
+  ::v-deep .el-upload-list__item-name:hover {
+    color: #000;
+  }
+
+  ::v-deep .el-upload-dragger {
+    width: 100%;
+    background-color: unset !important;
+  }
 </style>

src/views/page/Home.vue

@@ -20,7 +20,8 @@
         <wavyBlock title="企业数据汇总" :list="list"></wavyBlock>
       </div>
       <div class="scale-up-hor-right card_block center_in">
-        <wavyBlock title="钢瓶数据汇总" :list="list1"></wavyBlock>
+        <cylinderData title="钢瓶数据汇总" :list="list1" :cylinderCount="cylinderCount"></cylinderData>
+        <!-- <wavyBlock title="钢瓶数据汇总" :list="list1"></wavyBlock> -->
       </div>
       <div class="scale-up-hor-right card_block center_in">
         <!-- <proportion title="企业钢瓶占比"></proportion> -->
@@ -37,6 +38,7 @@
   import securityCheck from '@/components/securityCheck.vue'
   import abnormalCylinder from '@/components/abnormalCylinder.vue'
   import proportion from '@/components/proportion.vue'
+  import cylinderData from '@/components/cylinderData.vue'
   import wavyBlock from '@/components/wavyBlock.vue'
   import mapStore from './mapStore.vue'
   import request from '@/utils/request'
@@ -47,6 +49,7 @@
       securityCheck,
       abnormalCylinder,
       proportion,
+      cylinderData,
       wavyBlock,
       mapStore
     },
@@ -68,25 +71,10 @@
           title: '燃气户数',
           icon: 'client.png',
         }],
-        list1: [{
-          num: 0,
-          title: '钢瓶总数',
-          icon: 'liquefiedgas.png',
-        }, {
-          num: 0,
-          title: '正常瓶数',
-          icon: 'liquefiedgas.png',
-        }, {
-          num: 0,
-          title: '过期瓶数',
-          icon: 'liquefiedgas.png',
-        }, {
-          num: 0,
-          title: '报废瓶数',
-          icon: 'liquefiedgas.png',
-        }],
+        list1: [],
         storeStatList: [],
         storeFlag: false,
+        cylinderCount: 0,
       }
     },
     mounted() {
@@ -117,9 +105,9 @@
             this.list[1].num = arr.deliveryCount
             this.list[2].num = arr.customerCount
             // 钢瓶数据汇总
-            this.list1[0].num = arr.gasCylinderCount
+            this.cylinderCount = arr.gasCylinderCount
             if (arr.gasCylinderStat != null) {
-              this.list1[1].num = arr.gasCylinderStat[0].count
+              this.list1 = arr.gasCylinderStat
             }
           }
           this.storeFlag = true