chore

src/views/zhpt/components/ExportBtn.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-button size="small" type="primary" @click="setExport2Excel">
+    导出
+  </el-button>
+</template>
+
+<script>
+import FileSaver from 'file-saver'
+import XLSX2 from 'xlsx'
+import XLSX from 'xlsx-style'
+export default {
+  props: ['tableId', 'file'],
+  data() {
+    return {
+      todayTimeString: new Date().getTime()
+    }
+  },
+  methods: {
+    // 导出表格成excel
+    setExport2Excel() {
+      /* generate workbook object from table */
+      var wb = XLSX2.utils.table_to_sheet(document.querySelector(`#${this.tableId}`),{ raw: true }) // mytable为表格的id名
+      
+      // if (!wb['!merges']) {
+      //   this.$message.warning('无法导出：报表无数据')
+      //   return
+      // }
+      var isDate = (str) => {
+        var v = (str + '').split(' ')
+        if(v.length == 1) {
+          v = v[0].split('-')
+          if(v.length == 3) {
+            var [year, month, day] = v.map(e => + e)
+            if(year >= 1997 && month > 0 && month < 13 && day > 0 && day < 32) return true
+          }
+        } else if(v.length == 2) {
+          var v1 = v[0].split('-')
+          var v2 = v[1].split(':')
+          if(v1.length == 3 && v2.length == 3) {
+            var [year, month, day] = v1.map(e => + e)
+            var [hour, mins, sen] = v2.map(e => + e)
+            if(year >= 1997 && month > 0 && month < 13 && day > 0 && day < 32 &&
+              hour >= 0 && hour <= 24 && mins >= 0 && mins <= 60 && sen >= 0 && sen <= 60) return true
+          }
+        }
+        return false
+      }
+
+      for (var i = 0; i < 50; i++) {
+        wb['!cols'][i] = { wpx: 220 }
+      }
+      // 样式的文档地址
+      // https://www.npmjs.com/package/xlsx-style
+      var cells = {
+        '电量': row => row.s.numFmt = '0%' //(row.v *= 100, )
+      }
+      var cacheCells = {}
+      for (const key in wb) {
+        if(key.indexOf('!') > -1 ) continue
+        if(['', '操作', '详情', '编辑详情'].indexOf(wb[key].v) > -1) {
+          delete wb[key]
+          continue
+        } else {
+          var cellW = key[0]
+          var rowW = key[1]
+          wb[key].s = {
+            font: {
+              // 字体设置
+              sz: 13,
+              bold: false,
+              color: {
+                rgb: '000000' // 十六进制，不带#
+              }
+            },
+            alignment: {
+              // 文字居中
+              horizontal: 'center',
+              vertical: 'center',
+              wrap_text: true
+            },
+            border: {
+              // 设置边框
+              top: { style: 'thin' },
+              bottom: { style: 'thin' },
+              left: { style: 'thin' },
+              right: { style: 'thin' }
+            }
+          }
+          
+          if(rowW == 1 && cells.hasOwnProperty(wb[key].v)) {
+            cacheCells[cellW] = cells[wb[key].v]
+          } else if(cacheCells.hasOwnProperty(cellW)) {
+            cacheCells[cellW](wb[key])
+          }
+          
+          if(wb[key].z == 'm/d/yy') {
+            delete wb[key].z
+            wb[key].s.numFmt = 'yyyy-m-dd h:mm:ss'
+            wb[key].v -= 0.0004976851
+          }
+        }
+      }
+
+      var data = wb['!merges'] ? this.addRangeBorder(wb['!merges'], wb) : wb // 合并项添加边框
+      var filedata = this.sheet2blob(data)
+      this.openDownloadDialog(filedata, this.todayTimeString + '-' + (this.file || '') + '报表.xlsx')
+    },
+    // 为合并项添加边框
+    addRangeBorder(range, ws) {
+      const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+      range.forEach(item => {
+        const startColNumber = Number(item.s.r)
+        const endColNumber = Number(item.e.r)
+        const startRowNumber = Number(item.s.c)
+        const endRowNumber = Number(item.e.c)
+        const test = ws[arr[startRowNumber] + (startColNumber + 1)]
+        for (let col = startColNumber; col <= endColNumber; col++) {
+          for (let row = startRowNumber; row <= endRowNumber; row++) {
+            ws[arr[row] + (col + 1)] = test
+          }
+        }
+      })
+      return ws
+    },
+    // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
+    sheet2blob(sheet, sheetName) {
+      sheetName = sheetName || 'sheet1'
+      var workbook = {
+        SheetNames: [sheetName],
+        Sheets: {}
+      }
+      workbook.Sheets[sheetName] = sheet // 生成excel的配置项
+
+      var wopts = {
+        bookType: 'xlsx', // 要生成的文件类型
+        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+        type: 'binary'
+      }
+      var wbout = XLSX.write(workbook, wopts)
+      var blob = new Blob([s2ab(wbout)], {
+        type: 'application/octet-stream'
+      }) // 字符串转ArrayBuffer
+      function s2ab(s) {
+        var buf = new ArrayBuffer(s.length)
+        var view = new Uint8Array(buf)
+        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
+        return buf
+      }
+      return blob
+    },
+    openDownloadDialog(url, saveName) {
+      if (typeof url === 'object' && url instanceof Blob) {
+        url = URL.createObjectURL(url) // 创建blob地址
+      }
+      var aLink = document.createElement('a')
+      aLink.href = url
+      aLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
+      var event
+      if (window.MouseEvent) event = new MouseEvent('click')
+      else {
+        event = document.createEvent('MouseEvents')
+        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+      }
+      aLink.dispatchEvent(event)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/zhpt/tongyonggongju/queryResult3/widget.vue

@@ -1,19 +1,44 @@
 <template>
   <div ref="mainDiv" style="width: 100%; height: 100%;" v-loading="loading">
     <div style="height:calc(100% - 45px)">
-      <el-table id="features" class="mapTable" style="width:100%;" :height="height" tooltip-effect="dark" stripe
-      :data="featureData" ref="table" row-class-name="selectRowC" @row-click="getGeo">
-        <el-table-column v-for="item of column" width="120" show-overflow-tooltip :key="item.value" :prop="item.value" :label="item.name">
+      <el-table
+        id="features"
+        class="mapTable"
+        style="width:100%;"
+        :height="height"
+        tooltip-effect="dark"
+        stripe
+        :data="featureData"
+        ref="table"
+        row-class-name="selectRowC"
+        @row-click="getGeo"
+      >
+        <el-table-column
+          v-for="item of column"
+          width="120"
+          show-overflow-tooltip
+          :key="item.value"
+          :prop="item.value"
+          :label="item.name"
+        >
         </el-table-column>
       </el-table>
     </div>
     <div style="width:100%;margin-top:8px;">
       <div style="float:left;width:80%">
-        <el-pagination ref="pagination" small background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10, 50, 100]" :total="total"
-          @current-change="loadData" @size-change="loadData"/>
+        <el-pagination
+          ref="pagination"
+          small
+          background
+          layout="total, sizes, prev, pager, next"
+          :page-sizes="[5, 10, 50, 100]"
+          :total="total"
+          @current-change="loadData"
+          @size-change="loadData"
+        />
       </div>
       <div style="float:right;">
-			  <export-btn table-id="features"></export-btn>
+        <export-btn table-id="features"></export-btn>
       </div>
     </div>
   </div>
@@ -23,7 +48,7 @@
 import { attConfig } from './attributeConfig'
 import { esriConfig, appconfig } from 'staticPub/config'
 import TableItem from '@/components/Table/index.vue'
-import ExportBtn from '@/views/zhpt/wxreportforms/components/ExportBtn.vue'
+import ExportBtn from '@/views/zhpt/components/ExportBtn.vue'
 export default {
   name: 'queryResult3',
   components: { TableItem, ExportBtn },
@@ -35,11 +60,11 @@ export default {
       total: 0,
       loading: true,
       height: '100%',
-      queryLayer:null,
+      queryLayer: null
     }
   },
   mounted() {
-    var mapView = this.mapView = this.$attrs.data.mapView
+    var mapView = (this.mapView = this.$attrs.data.mapView)
     var mainDiv = this.$refs.mainDiv.parentElement
     mainDiv.style.height = '100%'
     mainDiv.parentElement.style.height = 'calc(100% - 56px)'
@@ -47,7 +72,7 @@ export default {
     this.oids = this.param.oids
     this.layer = this.param.layer
     var sp = mapView.spatialReference
-    this.queryFeature = new mapView.TF_graphic({ geometry: { type: 'point', x: 0, y: 0, spatialReference: sp }})
+    this.queryFeature = new mapView.TF_graphic({ geometry: { type: 'point', x: 0, y: 0, spatialReference: sp } })
     mapView.graphics.add(this.queryFeature)
     this.total = this.oids.length
     this.loadColumn().then(this.loadData)
@@ -65,37 +90,39 @@ export default {
         })
       },
       destroy: (templeteId) => {
-        if(showId != templeteId) return
+        if (showId != templeteId) return
         delete mapView.TF_resultFeatures
-        for(var i=0,il=this.$store.state.map.halfPanels,ii=il.length;i<ii;i++) {
-          if(il[i].com == 'queryResult3') return il.splice(i, 1)
-        }        
+        for (var i = 0, il = this.$store.state.map.halfPanels, ii = il.length; i < ii; i++) {
+          if (il[i].com == 'queryResult3') return il.splice(i, 1)
+        }
       }
     }
   },
   methods: {
     loadColumn() {
-      return new Promise((res) => {      
+      return new Promise((res) => {
         var layer = this.layer
         var dontSeeAtt = attConfig.hide
         $.ajax({
-          url: appconfig.gisResource.business_map.config[0].url + "/" + layer + "?f=pjson",
+          url: appconfig.gisResource.business_map.config[0].url + '/' + layer + '?f=pjson',
           type: 'GET',
           async: false,
           success: (data) => {
             data = JSON.parse(data)
             var cons = []
-            for(var i=0,il=data.fields,ii=il.length;i<ii;i++) {   
+            for (var i = 0, il = data.fields, ii = il.length; i < ii; i++) {
               var di = il[i]
               var key = di.name
-              if(dontSeeAtt.indexOf(key) > -1) continue
-              cons.push({value: key, name: di.alias})
+              if (dontSeeAtt.indexOf(key) > -1) continue
+              cons.push({ value: key, name: di.alias })
             }
             this.column = cons
             this.type = data.geometryType.substring(12).toLowerCase()
             res()
           },
-          error: (error) => { console.log(error) }
+          error: (error) => {
+            console.log(error)
+          }
         })
       })
     },
@@ -107,34 +134,34 @@ export default {
       var size = pages.internalPageSize
       var current = pages.internalCurrentPage
       var first = (current - 1) * size
-      oids = oids.slice(first , first + size)
+      oids = oids.slice(first, first + size)
       var config = attConfig
       var dontSeeAtt = config.hide
       var changeAttFun = config.change
       $.ajax({
-        url: appconfig.gisResource.business_map.config[0].url + "/" + layer + "/query",
+        url: appconfig.gisResource.business_map.config[0].url + '/' + layer + '/query',
         type: 'POST',
         data: {
           objectIds: oids.join(','),
           outFields: '*',
           f: 'pjson'
-        },  
+        },
         success: (data) => {
           data = JSON.parse(data)
           var feaD = []
-          for(var i=0,il=data.features,ii=il.length;i<ii;i++) {
+          for (var i = 0, il = data.features, ii = il.length; i < ii; i++) {
             var di = il[i]
             var geo = di.geometry
             var att = di.attributes
-            for(var j=0,jl=Object.keys(att),jj=jl.length;j<jj;j++) {
+            for (var j = 0, jl = Object.keys(att), jj = jl.length; j < jj; j++) {
               var key = jl[j]
-              if(dontSeeAtt.indexOf(key) > -1) {
+              if (dontSeeAtt.indexOf(key) > -1) {
                 delete att[key]
                 continue
               }
-              if(changeAttFun.hasOwnProperty(key)) {
+              if (changeAttFun.hasOwnProperty(key)) {
                 att[key] = changeAttFun[key](key, att[key])
-              } else if(att[key] === null) att[key] = '-'
+              } else if (att[key] === null) att[key] = '-'
             }
             att._Geometry = geo
             feaD.push(att)
@@ -148,84 +175,100 @@ export default {
             this.loading = false
           })
         },
-        error: (error) => { console.log(error) }
+        error: (error) => {
+          console.log(error)
+        }
       })
     },
 
     /**
-    * 点击高亮显示
-    */
-    getGeo(row) {			
-      var view = this.$attrs.data.mapView;
+     * 点击高亮显示
+     */
+    getGeo(row) {
+      var view = this.$attrs.data.mapView
       var geometry = row._Geometry
       geometry.type = this.type
       geometry.spatialReference = view.spatialReference
       var gra = this.queryFeature
       gra.geometry = geometry
-      gra.symbol = geometry.type == 'point' ? 
-      { type: 'simple-marker', color: [200, 200, 200], size: 12, outline: { color: [0, 255, 255], width: 2 }}
-      : { type: 'simple-fill', color: [0, 0, 0, 0.3], outline: { color: [0, 255, 255, 1], width: "7px" } }
+      gra.symbol =
+        geometry.type == 'point'
+          ? { type: 'simple-marker', color: [200, 200, 200], size: 12, outline: { color: [0, 255, 255], width: 2 } }
+          : { type: 'simple-fill', color: [0, 0, 0, 0.3], outline: { color: [0, 255, 255, 1], width: '7px' } }
       var extent = gra.geometry.extent
-      if(extent) view.goTo(extent)
-      else view.center = {x: gra.geometry.x, y: gra.geometry.y, spatialReference: view.spatialReference}  
+      if (extent) view.goTo(extent)
+      else view.center = { x: gra.geometry.x, y: gra.geometry.y, spatialReference: view.spatialReference }
     },
     /**
-    * 查询到的所有图形高亮显示
-    */
-    showAllHighlight(data){
-      let mapView =this.$attrs.data.mapView;
+     * 查询到的所有图形高亮显示
+     */
+    showAllHighlight(data) {
+      let mapView = this.$attrs.data.mapView
       let sp = mapView.spatialReference
-      this.queryLayer = new mapView.TF_graphicsLayer();
-      mapView.map.add(this.queryLayer);
-      if(data && data.hasOwnProperty('features')){
-        let pipes = [];
-        let geometryType = data.geometryType;  //esriGeometryPoint、esriGeometryLine、esriGeometryPolygon
-        let features = [];
-        data.features.forEach(feature => {
+      this.queryLayer = new mapView.TF_graphicsLayer()
+      mapView.map.add(this.queryLayer)
+      if (data && data.hasOwnProperty('features')) {
+        let pipes = []
+        let geometryType = data.geometryType //esriGeometryPoint、esriGeometryLine、esriGeometryPolygon
+        let features = []
+        data.features.forEach((feature) => {
           //默认为点
-          let graphic = new mapView.TF_graphic({ 
-              geometry:  { type: 'point', x: feature.geometry.x, y: feature.geometry.y, spatialReference: sp },
-              symbol: { type: 'simple-marker', color: [0, 255, 255], size: 12, outline: { color: [0, 255, 255], width: 0 }}
-          });
+          let graphic = new mapView.TF_graphic({
+            geometry: { type: 'point', x: feature.geometry.x, y: feature.geometry.y, spatialReference: sp },
+            symbol: {
+              type: 'simple-marker',
+              color: [0, 255, 255],
+              size: 12,
+              outline: { color: [0, 255, 255], width: 0 }
+            }
+          })
           //如果为面
-          if(geometryType == "esriGeometryPolygon" ){
+          if (geometryType == 'esriGeometryPolygon') {
             graphic = new mapView.TF_graphic({
-              geometry: { type: 'polyline', paths: feature.geometry.rings, spatialReference: sp},
-              symbol: { type: 'simple-fill', color: [0, 0, 0, 0.3], outline: { color: [45, 116, 231, 1], width: "4px" } }
+              geometry: { type: 'polyline', paths: feature.geometry.rings, spatialReference: sp },
+              symbol: {
+                type: 'simple-fill',
+                color: [0, 0, 0, 0.3],
+                outline: { color: [45, 116, 231, 1], width: '4px' }
+              }
             })
           }
           //如果为线
-          if(geometryType == "esriGeometryPolyline" ){
+          if (geometryType == 'esriGeometryPolyline') {
             graphic = new mapView.TF_graphic({
-              geometry: { type: 'polyline', paths: feature.geometry.paths, spatialReference: sp},
-              symbol: { type: 'simple-fill', color: [5, 116, 231, 1], outline: { color: [45, 116, 231, 1], width: '4px' } }
+              geometry: { type: 'polyline', paths: feature.geometry.paths, spatialReference: sp },
+              symbol: {
+                type: 'simple-fill',
+                color: [5, 116, 231, 1],
+                outline: { color: [45, 116, 231, 1], width: '4px' }
+              }
             })
           }
-          features.push(graphic);
-        });
-        this.queryLayer.addMany(features);
+          features.push(graphic)
+        })
+        this.queryLayer.addMany(features)
       }
-    },
+    }
   },
-  
+
   /**
-  * 销毁事件
-  */
+   * 销毁事件
+   */
   destroyed() {
     var view = this.mapView
     //清除查询生成图形
-    view.map.remove(this.queryLayer);
-    view.graphics.remove(this.queryFeature);
+    view.map.remove(this.queryLayer)
+    view.graphics.remove(this.queryFeature)
     delete view.TF_resultFeatures
   }
 }
 </script>
 <style scoped>
-.el-table >>> .el-table__header-wrapper table th{
+.el-table >>> .el-table__header-wrapper table th {
   height: 30px;
   text-align: center;
 }
-.el-table.mapTable >>> .el-table__body-wrapper table td{
+.el-table.mapTable >>> .el-table__body-wrapper table td {
   text-align: center;
 }
 </style>