新增数据展示页面；接口对接

src/router/_import.ts

@@ -48,5 +48,7 @@ const map = {
   //档案管理
   contractManage:()=>import('@/views/zhpt/filesManage/contract/index.vue'),//合同管理
   fileImport:()=>import('@/views/zhpt/filesManage/fileImport/index.vue'),//档案导入
-  fileManage:()=>import('@/views/zhpt/filesManage/fileManage/index.vue')//档案管理
+  fileManage:()=>import('@/views/zhpt/filesManage/fileManage/index.vue'),//档案管理
+  //数据展示
+  dataDisplay:()=>import('@/views/zhpt/dataDisplay/index.vue')//数据展示
 }

src/views/zhpt/dataDisplay/index.vue

@@ -20,7 +20,7 @@
               </el-form-item>
             </el-form>
           </template>
-          <el-tree @node-click='treeNodeClick' :data="fileLinkTree" :props="treeProps"></el-tree>
+          <el-tree v-loading='treeLoading' @node-click='treeNodeClick' :data="fileLinkTree" :props="treeProps"></el-tree>
         </tf-page>
       </el-col>
       <el-col :span="18" style="height:100%;">
@@ -44,11 +44,11 @@
               </el-form-item>
             </el-form>
           </template>
-          <tf-table :pagination="pagination" @page-change="onPageChange" :columns="columns" :data="list" style='width:100%'>
-            <el-table-column fixed="right" label="备注" :show-overflow-tooltip="true">
+          <tf-table v-loading='tableLoading' :pagination="pagination" @page-change="onPageChange" :columns="columns" :data="list" style='width:100%'>
+            <el-table-column label="备注" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <el-button size="mini" type="text" icon="el-icon-edit" plain @click="updateRemark(scope.row)"></el-button>
-                {{scope.row.remark}}
+                {{scope.row.showRemark}}
               </template>
             </el-table-column>
           </tf-table>
@@ -84,15 +84,20 @@ export default class DataDisplay extends Vue {
   }
   /**过滤信息 */
   tbSearchInfo = {
+    name: '', //项目名称
     startCode: '', //起点编码
     endCode: '', //终点编码
-    pipeType:'',//排水性质
-    projectName:'',//项目名称
-    roadName:'',//道路名称
-    areaName:''//行政区
+    pipeType: '', //排水性质
+    roadName: '', //道路名称
+    areaName: '', //行政区
+    testingZone:''//测区
   }
   /**树数据 */
   treeList = []
+  /**树加载状态 */
+  treeLoading = true
+  /**表格加载状态 */
+  tableLoading = true
   /**树组件配置 */
   treeProps = {
     children: 'children',
@@ -101,15 +106,15 @@ export default class DataDisplay extends Vue {
   /**列名 */
   columns = [
     { type: 'index', label: '序号', width: '50px' },
-    { prop: 'name', label: '排水性质' },
+    { prop: 'pipeProperties', label: '排水性质' },
     { prop: 'startCode', label: '起点编码', showOverflowTooltip: true, minWidth: '100px' },
     { prop: 'endCode', label: '终点编码', showOverflowTooltip: true, minWidth: '100px' },
-    { prop: 'startCode', label: '探测长度(m)', showOverflowTooltip: true, minWidth: '100px' },
-    { prop: 'endCode', label: '管径(mm)', showOverflowTooltip: true, minWidth: '100px' },
-    { prop: 'fileName', label: '水位是否≥20cm', showOverflowTooltip: true, minWidth: '150px' },
-    { prop: 'endCode', label: '预处理长度(m)', showOverflowTooltip: true, minWidth: '100px' },
-    { prop: 'fileName', label: '检测长度(m)', showOverflowTooltip: true, minWidth: '150px' },
-    { prop: 'departmentName', label: '视频质量', showOverflowTooltip: true, minWidth: '150px' }
+    { prop: 'pipeLength', label: '探测长度(m)', showOverflowTooltip: true, minWidth: '100px' },
+    { prop: 'sectionData', label: '管径(mm)', showOverflowTooltip: true, minWidth: '100px' },
+    { prop: 'isUp', label: '水位是否≥20cm', showOverflowTooltip: true, minWidth: '150px' },
+    { prop: 'handLength', label: '预处理长度(m)', showOverflowTooltip: true, minWidth: '120px' },
+    { prop: 'checkLength', label: '检测长度(m)', showOverflowTooltip: true, minWidth: '150px' },
+    { prop: 'vedioQuality', label: '视频质量', showOverflowTooltip: true, minWidth: '150px' }
   ]
   /**行政区 */
   districts = districts
@@ -123,6 +128,7 @@ export default class DataDisplay extends Vue {
     { id: '雨水', name: '雨水' },
     { id: '污水', name: '污水' }
   ]
+
   /**项目列表 */
   projects = []
   /**表格数据 */
@@ -133,18 +139,44 @@ export default class DataDisplay extends Vue {
   /**单位列表 */
   departments = []
   get fileLinkTree() {
-    const getChildren = (parent) => {
-      let obj = { label: parent.parentName, children: [], prjId: parent.prjId }
+    const getChildren = (parent, level, info) => {
+      let nodeInfo={
+        name: '', //项目名
+        area: '', //行政区
+        zone: '', //测区
+        road: '' //道路
+      }
+      nodeInfo={...nodeInfo,...info}
+      switch (level) {
+        case 0:
+          nodeInfo.name = parent.parentName
+          break
+        case 1:
+          nodeInfo.area = parent.parentName
+          break
+        case 2:
+          nodeInfo.zone = parent.parentName
+          break
+        case 3:
+          nodeInfo.road = parent.parentName
+          break
+      }
+      let obj = { label: parent.parentName, children: [], prjId: parent.prjId, level: level,info:nodeInfo }
       if (parent.linkNameData) {
         const children = parent.linkNameData.map((item) => {
-          return getChildren(item)
+          return getChildren(item, ++level,nodeInfo)
         })
         obj.children = children
       }
       return obj
     }
     const list = this.treeList.map((tree) => {
-      return getChildren(tree)
+      return getChildren(tree, 0, {
+        name: '', //项目名
+        area: '', //行政区
+        zone: '', //测区
+        road: '' //道路
+      })
     })
     return list
   }
@@ -164,19 +196,24 @@ export default class DataDisplay extends Vue {
   }
   /**左侧结构树 */
   treeNodeClick(row) {
-    //this.tbSearchInfo.linkName = row.label
-    //this.tbSearchInfo.prjId = row.prjId
+    console.log(row)
+    this.tbSearchInfo.name = row.info.name;
+    this.tbSearchInfo.areaName = row.info.area;
+    this.tbSearchInfo.testingZone = row.info.zone;
+    this.tbSearchInfo.roadName = row.info.road;
     this.getDataList()
   }
   /**主表格数据 */
   getDataList() {
+    this.tableLoading=true
     let parames = {
-      projectName: this.tbSearchInfo.projectName,
+      projectName: this.tbSearchInfo.name,
       type: this.tbSearchInfo.pipeType,
       startCode: this.tbSearchInfo.startCode,
       endCode: this.tbSearchInfo.endCode,
       areaName: this.tbSearchInfo.areaName,
-      roadName:this.tbSearchInfo.roadName
+      roadName: this.tbSearchInfo.roadName,
+      testingZone:this.tbSearchInfo.testingZone
     }
     parames = { ...parames, ...this.pagination }
     dataDisplayPage(parames)
@@ -189,10 +226,13 @@ export default class DataDisplay extends Vue {
       })
       .catch((err) => {
         console.log(err)
+      }).finally(()=>{
+        this.tableLoading=false;
       })
   }
-  /**档案管理结构树 */
+  /**结构树 */
   getTreeList() {
+    this.treeLoading=true
     let parames = {
       area: this.searchInfo.district,
       roadName: this.searchInfo.roadName,
@@ -205,8 +245,7 @@ export default class DataDisplay extends Vue {
           this.treeList = result.result
           //默认展示第一个项目的档案
           if (result.result && result.result.length > 0) {
-            //this.tbSearchInfo.prjId = result.result[0].prjId
-            //this.tbSearchInfo.linkName = result.result[0].parentName
+            this.tbSearchInfo.name = result.result[0].parentName
             this.getDataList()
           }
         }
@@ -214,6 +253,9 @@ export default class DataDisplay extends Vue {
       .catch((err) => {
         console.log(err)
       })
+      .finally(() => {
+        this.treeLoading = false
+      })
   }
   /**
    * 项目列表
@@ -244,13 +286,16 @@ export default class DataDisplay extends Vue {
       })
   }
   /**备注更新 */
-  updateRemark(row){
-    this.$prompt('备注', '提示',{
+  updateRemark(row) {
+    this.$prompt('备注', '提示', {
       type: 'warning',
-      inputValue:row.remark
-    }).then((value:any) => {
-      row.remark = value.value
-      editDetectData(row)
+      inputValue: row.showRemark
+    }).then((value: any) => {
+      const params = {
+        id: row.id,
+        remark: value.value
+      }
+      editDetectData(params)
         .then((result) => {
           if (result.code === 1) {
             this.$message.success('备注更新成功')

src/views/zhpt/filesManage/fileManage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:100%;"  class="filesContainer">
+  <div style="height:100%;" class="filesContainer">
     <el-row style="height:100%;">
       <el-col :span="6" style="height:100%;">
         <tf-page class="leftPage">
@@ -16,11 +16,11 @@
               </el-form-item>
               <el-form-item label="道路名称">
                 <el-input v-model="searchInfo.roadName" size="small"></el-input>
-                 <el-button type="primary" size="mini" icon="el-icon-search" @click="getTreeList">查询</el-button>
+                <el-button type="primary" size="mini" icon="el-icon-search" @click="getTreeList">查询</el-button>
               </el-form-item>
             </el-form>
           </template>
-          <el-tree @node-click='treeNodeClick' :data="fileLinkTree" :props="treeProps"></el-tree>
+          <el-tree v-loading='treeLoading' @node-click='treeNodeClick' :data="fileLinkTree" :props="treeProps"></el-tree>
         </tf-page>
       </el-col>
       <el-col :span="18" style="height:100%;">
@@ -50,7 +50,7 @@
               </el-form-item>
             </el-form>
           </template>
-          <tf-table :pagination="pagination" @page-change="onPageChange" :columns="columns" :data="list" style='width:100%' @selection-change="selectChange">
+          <tf-table v-loading='tableLoading' :pagination="pagination" @page-change="onPageChange" :columns="columns" :data="list" style='width:100%' @selection-change="selectChange">
             <el-table-column prop="" label="操作">
               <template slot-scope="scope">
                 <el-button type="text" size="small" @click="viewProjectInfo(scope.row)">查看</el-button>
@@ -126,10 +126,17 @@
  */
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import { projectPage, uploadFile } from '@/api/dataCheckModule/projectList'
-import { fileImportPage, fileManagerUpload,delFile,recordmanagerUpload,getRecordLinkData,fileManagerPage } from '@/api/dataCheckModule/fileManage'
-import { getAllDepartments,deleteFileByIds,getFileById,downloadFile } from '@/api/base'
+import {
+  fileImportPage,
+  fileManagerUpload,
+  delFile,
+  recordmanagerUpload,
+  getRecordLinkData,
+  fileManagerPage
+} from '@/api/dataCheckModule/fileManage'
+import { getAllDepartments, deleteFileByIds, getFileById, downloadFile } from '@/api/base'
 import { parseTime } from '@/utils/index'
-import { FileTypes,districts } from '@/views/zhpt/dataImport/common/constant'
+import { FileTypes, districts } from '@/views/zhpt/dataImport/common/constant'
 import { getDefaultPagination } from '@/utils/constant'
 import { ElForm } from 'element-ui/types/form'
 @Component({
@@ -140,63 +147,47 @@ export default class ProjectFileImport extends Vue {
   searchInfo = {
     district: '', //行政区
     testingZone: '', //测区
-    roadName: ''//道路名称
+    roadName: '' //道路名称
   }
   /**档案信息过滤信息 */
-  tbSearchInfo={
-    prjId:null,//项目ID
+  tbSearchInfo = {
+    prjId: null, //项目ID
     fileType: '', //文件类型
     fileName: '', //文件名称
-    department: '',//单位
-    linkName:''//关联名称
-}
+    department: '', //单位
+    linkName: '' //关联名称
+  }
+  /**树加载状态 */
+  treeLoading = true
+  /**表格加载状态 */
+  tableLoading = true
   /**树数据 */
-  treeList=[
-    {
-      label:"项目1",
-      children:[
-        {
-          label:"青羊区",
-          children:[
-            {
-              label:"102",
-              children:[
-                {label:"成致路南侧无名道路"},
-                {label:"中环路洞子口路段"},
-                {label:"二仙桥北三路无名路"}
-              ]
-            }
-          ]
-        },
-        {label:"武侯区"},
-        {label:"金牛区"},
-        {label:"锦江区"}
-      ]
-    }
-  ]
+  treeList = []
   /**树组件配置 */
-  treeProps={
-    children:"children",
-    label:"label"
+  treeProps = {
+    children: 'children',
+    label: 'label'
   }
   /**列名 */
   columns = [
     { type: 'selection', width: '50px' },
     { type: 'index', label: '序号', width: '50px' },
     { prop: 'name', label: '所属项目' },
-    { prop: 'fileType', label: '文件类型',formatter:(row,col,cell)=>{
-      if(cell)
-      return FileTypes.find(item=>item.id===cell).name
-      else
-      return ''
-    } },
-    { prop: 'fileName', label: '文件名称',showOverflowTooltip: true, minWidth: '150px' },
+    {
+      prop: 'fileType',
+      label: '文件类型',
+      formatter: (row, col, cell) => {
+        if (cell) return FileTypes.find((item) => item.id === cell).name
+        else return ''
+      }
+    },
+    { prop: 'fileName', label: '文件名称', showOverflowTooltip: true, minWidth: '150px' },
     { prop: 'departmentName', label: '导入单位' },
     { prop: 'createUserName', label: '导入人' },
     { prop: 'createTime', label: '导入时间' }
   ]
   /**行政区 */
-  districts=districts
+  districts = districts
   /**添加表单 */
   addForm = {
     project: '',
@@ -211,7 +202,7 @@ export default class ProjectFileImport extends Vue {
     fileType: [{ required: true, message: '请选择文件类型', trigger: 'change' }]
   }
   /**导入步骤index */
-  importStep=0
+  importStep = 0
   /**是否编辑 */
   formType = 'add'
   /**表格数据 */
@@ -226,18 +217,18 @@ export default class ProjectFileImport extends Vue {
   pagination = getDefaultPagination()
   /**单位列表 */
   departments = []
-  get fileLinkTree(){
-    const getChildren=(parent)=>{
-      let obj={label:parent.parentName,children:[],prjId:parent.prjId}
-      if(parent.linkNameData){
-        const children=parent.linkNameData.map(item=>{
+  get fileLinkTree() {
+    const getChildren = (parent) => {
+      let obj = { label: parent.parentName, children: [], prjId: parent.prjId }
+      if (parent.linkNameData) {
+        const children = parent.linkNameData.map((item) => {
           return getChildren(item)
         })
-        obj.children=children
+        obj.children = children
       }
-      return obj;
+      return obj
     }
-    const list=this.treeList.map(tree=>{
+    const list = this.treeList.map((tree) => {
       return getChildren(tree)
     })
     return list
@@ -262,14 +253,14 @@ export default class ProjectFileImport extends Vue {
     this.fileList = fileList
   }
   handlePreview(file) {
-   if(this.formType==="edit"){
-      downloadFile({fileMark:file.fileId}).then(result=>{
+    if (this.formType === 'edit') {
+      downloadFile({ fileMark: file.fileId }).then((result) => {
         const buffer = new Blob([result], {
           type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
         })
         const link = document.createElement('a')
         link.href = window.URL.createObjectURL(buffer)
-        link.download =file.name
+        link.download = file.name
         link.click()
         //释放内存
         window.URL.revokeObjectURL(link.href)
@@ -331,19 +322,20 @@ export default class ProjectFileImport extends Vue {
     this.listSelect = selection
   }
   /**左侧结构树 */
-  treeNodeClick(row){
-    this.tbSearchInfo.linkName=row.label
-    this.tbSearchInfo.prjId=row.prjId
-    this.getDataList();
+  treeNodeClick(row) {
+    this.tbSearchInfo.linkName = row.label
+    this.tbSearchInfo.prjId = row.prjId
+    this.getDataList()
   }
   /**主表格数据 */
   getDataList() {
+    this.tableLoading=true;
     let parames = {
-      prjId:this.tbSearchInfo.prjId,
+      prjId: this.tbSearchInfo.prjId,
       fileType: this.tbSearchInfo.fileType,
       fileName: this.tbSearchInfo.fileName,
       departmentId: this.tbSearchInfo.department,
-      linkName:this.tbSearchInfo.linkName
+      linkName: this.tbSearchInfo.linkName
     }
     parames = { ...parames, ...this.pagination }
     fileManagerPage(parames)
@@ -356,10 +348,13 @@ export default class ProjectFileImport extends Vue {
       })
       .catch((err) => {
         console.log(err)
+      }).finally(()=>{
+        this.tableLoading=false;
       })
   }
   /**档案管理结构树 */
-  getTreeList(){
+  getTreeList() {
+    this.treeLoading=true;
     let parames = {
       area: this.searchInfo.district,
       roadName: this.searchInfo.roadName,
@@ -371,17 +366,18 @@ export default class ProjectFileImport extends Vue {
         if (result.code === 1) {
           this.treeList = result.result
           //默认展示第一个项目的档案
-          if(result.result&&result.result.length>0){
-            this.tbSearchInfo.prjId=result.result[0].prjId
-            this.tbSearchInfo.linkName=result.result[0].parentName
-            this.getDataList();
+          if (result.result && result.result.length > 0) {
+            this.tbSearchInfo.prjId = result.result[0].prjId
+            this.tbSearchInfo.linkName = result.result[0].parentName
+            this.getDataList()
           }
         }
       })
       .catch((err) => {
         console.log(err)
+      }).finally(()=>{
+        this.treeLoading=false;
       })
-    
   }
   /**删除 */
   delProject() {
@@ -392,7 +388,6 @@ export default class ProjectFileImport extends Vue {
         type: 'warning'
       })
         .then(() => {
-          
           const ids = this.listSelect
             .map((item) => {
               return item.fileId
@@ -438,13 +433,13 @@ export default class ProjectFileImport extends Vue {
     this.isAddDialogShow = true
     this.formType = 'add'
     this.fileList = []
-      this.files = []
-      this.importStep=0
-      this.addForm = {
-        project: '',
-        fileType: ''
+    this.files = []
+    this.importStep = 0
+    this.addForm = {
+      project: '',
+      fileType: ''
     }
-    this.$nextTick(()=>{
+    this.$nextTick(() => {
       ;(this.$refs['addForm'] as ElForm).clearValidate()
     })
   }
@@ -464,30 +459,30 @@ export default class ProjectFileImport extends Vue {
   viewProjectInfo(row) {
     this.isAddDialogShow = true
     this.formType = 'edit'
-    this.importStep=0
+    this.importStep = 0
     this.addForm = {
       project: parseInt(row.prjId) as any,
       fileType: row.fileType
     }
-    getFileById({id:row.fileId}).then(result=>{
-      this.fileList=[{name: result.result.fileName, fileId: result.result.fileId }]
+    getFileById({ id: row.fileId }).then((result) => {
+      this.fileList = [{ name: result.result.fileName, fileId: result.result.fileId }]
     })
   }
   /**提交新增得项目台账信息 */
   addSubmit() {
-     ;(this.$refs['addForm'] as ElForm).validate((valid) => {
+    ;(this.$refs['addForm'] as ElForm).validate((valid) => {
       if (!valid) {
         return
       }
-    if (this.files.length === 0){
-      this.$message.warning('请添加导入文件');
-      return;
-    }
+      if (this.files.length === 0) {
+        this.$message.warning('请添加导入文件')
+        return
+      }
       const formdata = new FormData()
       this.files.forEach((file) => {
         formdata.append('file', file)
       })
-      this.importStep=1
+      this.importStep = 1
       uploadFile(formdata)
         .then((result) => {
           if (result.code !== 1) {
@@ -500,17 +495,17 @@ export default class ProjectFileImport extends Vue {
           const data = {
             prjId: this.addForm.project,
             fileType: this.addForm.fileType,
-            linkName:this.tbSearchInfo.linkName,
+            linkName: this.tbSearchInfo.linkName,
             createUser: this.$store.state.user.userId,
             createTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
             toflyFiles: filelist
           }
-          this.importStep=2
+          this.importStep = 2
           recordmanagerUpload(data)
             .then((addResult) => {
               if (addResult.code === 1) {
                 this.$message.success('保存成功')
-                this.importStep=3
+                this.importStep = 3
                 this.getDataList()
               }
             })
@@ -523,7 +518,7 @@ export default class ProjectFileImport extends Vue {
           this.$message.error('上传文件失败')
           console.log(err)
         })
-     })
+    })
   }
   /**分页事件 */
   onPageChange(pagination) {
@@ -533,12 +528,16 @@ export default class ProjectFileImport extends Vue {
 </script>
 <style lang="scss" scoped>
 @import '@/views/zhpt/dataImport/common/index.scss';
-.lefForm{
-  .el-input {width: 60%;}
-  .el-select{width: 60%;}
+.lefForm {
+  .el-input {
+    width: 60%;
+  }
+  .el-select {
+    width: 60%;
+  }
 }
-.leftPage{
-  >>> .content{
+.leftPage {
+  >>> .content {
     background: #fff;
   }
 }