YHYZT/client/src/views/DataManage/Gd.vue

@@ -331,47 +331,6 @@ export default {
         }
       })
     },
-    doExport(){
-      let params = new FormData();
-      params.append("pzwh",this.paramsList.pzwh);
-      params.append("pcmc",this.paramsList.pcmc);
-      const loading = this.$loading({
-        lock: true,
-        text: '正在导出',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      this.$ajax.post('/api/data/manage/nzy/exportShapeFile', params, this).then(res => {
-        const {success, data} = res;
-        if(success){
-          const geos = {
-            'type': 'FeatureCollection',
-            'features': []
-          }
-          data.map(i=>{
-            let geoT = {
-              type: 'Feature',
-              geometry: {},
-              properties: {}
-            }
-            const geo = WkxGeometry.parse(i.geomText).toGeoJSON()
-            geoT.geometry = { ...geo }
-            delete i.shape
-            delete i.geomText
-            geoT['properties'] = i
-            geos.features.push(geoT)
-          })
-          console.log(geos)
-          const dataset = importContent({ json: { filename: '农转用项目.json', content: JSON.stringify(geos) }})
-          setDatasetCRS(dataset, { prj: 'GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]' })
-          this.saveDataset(dataset);
-          loading.close();
-        }else{
-          this.$Message.error("查询异常，请联系管理员！");
-          loading.close();
-        }
-      })
-    },
     saveDataset(dataset, type = 'shapefile') {
       const fileContent = exportFileContent(dataset, { format: type })
       this.saveFileContent(fileContent)

YHYZT/client/src/views/DataManage/Lsyd copy.vue

@@ -0,0 +1,551 @@
+<template>
+  <div class="page-gd-manage">
+    <div v-show="menusShow" class="page-left" :style="{height:contentHeight+'px',width:menusWidth+'px'}">
+      <div class="nzy-tools">
+        <div class="panels">
+          <div class="panel-dropdown" style="background: #F5FBFF">
+            <el-dropdown>
+              <div class="el-dropdown-link">
+                <img src="@/assets/images/datamanage/sc.png"/>
+                导入文件
+                <img src="@/assets/images/datamanage/sc-i.png"/>
+              </div>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <el-upload
+                      class="upload-demo"
+                      action=""
+                      :before-upload="beforeUpload"
+                      multiple
+                      :limit="3"
+                      :on-exceed="2"
+                      accept=".zip">
+                    &nbsp;&nbsp;批量导入&nbsp;&nbsp;
+                  </el-upload>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="panel-dropdown" style="background: #FFFBF1">
+            <el-dropdown>
+              <div class="el-dropdown-link">
+                <img src="@/assets/images/datamanage/xz.png"/>
+                导出文件
+                <img src="@/assets/images/datamanage/xz-i.png"/>
+              </div>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <div @click="doExportExcel">
+                    导出项目Excel
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
+        <div class="panels">
+          <div class="panel-input">
+            <span>批准文号：</span>
+            <el-input v-model="paramsList.dkbh" placeholder="请输入内容" clearable></el-input>
+          </div>
+          <div class="panel-input">
+            <span>关键字：</span>
+            <el-input v-model="paramsList.dkmc" placeholder="项目名称/用地单位名称/所属板块" clearable></el-input>
+          </div>
+        </div>
+        <div class="panels">
+          <div class="panel-input">
+            <span>绘制范围：</span>
+            <div class="fw"  title="框选绘制" @click="createBoxEvent">
+              <i style="font-size: 20px" class="iconfont yh-Frame"/>
+            </div>
+            <div class="fw" title="自定义绘制"  @click="createDrawInteraction">
+              <i style="font-size: 24px" class="iconfont yh-huizhi1"/>
+            </div>
+            <div class="fw" title="图斑拾取" @click="sqFeatrue">
+              <i style="font-size: 24px" class="iconfont  yh-shiqu"/>
+            </div>
+            <div class="fw" title="清除绘制" @click="clearLayer">
+              清除
+            </div>
+          </div>
+          <div class="panel-input">
+            <span>缓冲距离：</span>
+            <el-input placeholder="请输入内容" v-model="input2">
+              <template slot="append">米</template>
+            </el-input>
+            <el-button type="primary"  style="margin-left: 8px;height: 36px" @click="getBpxmList">查询</el-button>
+          </div>
+        </div>
+      </div>
+      <div class="nzy-table">
+        <el-table
+            border
+            :data="tableData.data"
+            :height="contentHeight-260"
+            :header-cell-style="tableHeaderStyle"
+            :cell-style="tableRowStyle"
+            :row-click="rowClick"
+            ref="report-table"
+        >
+          <el-table-column
+              type="index"
+              width="80"
+              label="序号"/>
+          <el-table-column
+              prop="pzwh"
+              width="100"
+              label="临时用地批准文号"/>
+          <el-table-column
+              prop="xmmc"
+              label="建设项目名称"
+             />
+          <el-table-column
+              prop="pzsj"
+              label="用地批准时间">
+            <template slot-scope="scope">
+              {{new Date(scope.row.pzsj).toLocaleDateString("af")}}
+            </template>
+          </el-table-column>
+          <el-table-column
+              width="150"
+              label="操作">
+            <template slot-scope="scope">
+              <div style="line-height: 34px;">
+                <el-button
+                    @click.native.prevent="openDetail(scope.$index, scope.row)"
+                    plain
+                    type="primary"
+                    size="mini">
+                  查看
+                </el-button>
+                <el-button
+                    @click.native.prevent="locationDk(scope.$index, scope.row)"
+                    plain
+                    type="success"
+                    size="mini">
+                  定位
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Page style="float: right;margin-top: 10px;"
+              show-total
+              :total="paramsList.total"
+              :page-size="paramsList.size"
+              @on-change="pageChange"
+              @on-page-size-change="sizeChange"
+              show-sizer />
+      </div>
+    </div>
+    <div @click="()=>{menusWidth =0;menusShow=false;detailShow=false;$refs.baseMap.resetSize();}"
+         style="top: calc(50% - 30px);left: calc( 700px - 20px);"
+         title="收起"
+         v-show="menusShow"
+         class="menus-open"
+    >
+      <i class="iconfont yh-Frame2"/>
+    </div>
+    <div @click="()=>{menusWidth =700;menusShow=true;$refs.baseMap.resetSize();}"
+         style="top: calc(50% - 30px);left: 0px;"
+         title="展开"
+         v-show="!menusShow"
+         class="menus-open"
+    >
+      <!--      <img src="@/assets/images/datamanage/zd.png"/>-->
+      <i class="iconfont yh-xiangyou"/>
+    </div>
+    <div v-show="detailShow" class="page-detail" :style="{height:contentHeight+'px',width:contentWidth-menusWidth+'px',left:menusWidth+'px'}">
+      <detail ref="details" @initBpxm="getBpxmList" :contentWidth="contentWidth-menusWidth" :contentHeight="contentHeight" :project="currProject"/>
+    </div>
+    <div @click="()=>{detailShow=false;}"
+         style="top: calc(50% - 30px);right: 0px"
+         title="展开"
+         v-show="detailShow"
+         class="menus-open"
+    >
+      <i class="iconfont yh-Frame2"/>
+    </div>
+    <div class="page-map" :style="{height:contentHeight+'px',width: contentWidth-menusWidth-30+'px'}" >
+      <base-map ref="baseMap" :overlayShow="true" @showDetail="showDetail" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import mapshaper from "mapshaper";
+import BaseMap from "../../components/common/BaseMap";
+import Detail from "./lsyd/Detail";
+const {
+  importContent,
+  setDatasetCRS,
+  exportFileContent
+} = mapshaper.internal
+export default {
+  name: "Lsyd",
+  props:{
+    contentWidth:Number,
+    contentHeight:Number
+  },
+  components:{BaseMap,Detail},
+  data() {
+    return {
+      compName: 'data-manage',
+      visibleLayerId:['YHYZT_LSYD'],
+      menus:JSON.parse(window.sessionStorage.getItem('yzt-user')),
+      menusWidth:700,
+      menusShow:true,
+      detailShow:false,
+      tableData:{
+        data:[],
+      },
+      currProject:null,
+      paramsList:{dkbh:'',dkmc:'',page:1,size:15,total:0},
+      fullscreenLoading: false,
+      drawShapeJson:null,
+    }
+  },
+  mounted(){
+    this.getBpxmList();
+  },
+  methods: {
+    createBoxEvent(){
+      this.$refs.baseMap.createBoxEvent();
+    },
+    sqFeatrue(){
+      this.$refs.baseMap.sqFeatrue();
+    },
+    //自定义绘制分析
+    createDrawInteraction(){
+      this.$refs.baseMap.drawInteractionEvent();
+    },
+    //清除绘制图层
+    clearLayer(){
+      this.$refs.baseMap.cleanLayer();
+      this.drawShapeJson = null;
+      this.getBpxmList();
+    },
+    drawShapeJsonEvent(json){
+      if(json){
+        this.drawShapeJson = json;
+        this.getBpxmList();
+        this.$message.success("绘制结束");
+      }
+    },
+    pageChange:function (page){
+      this.paramsList.page=page;
+      this.getBpxmList()
+    },
+    sizeChange:function (size){
+      this.paramsList.size=size;
+      this.getBpxmList()
+    },
+    //查询报批项目信息
+    getBpxmList(){
+      let params = new FormData();
+      params.append("page",this.paramsList.page);
+      params.append("size",this.paramsList.size);
+      params.append("dkbh",this.paramsList.dkbh);
+      params.append("dkmc",this.paramsList.dkmc);
+      if(this.drawShapeJson){
+        params.append("shapes",JSON.stringify(this.drawShapeJson));
+      }
+      let _this = this;
+      this.$ajax.post('/api/data/manage/lsyd/getList', params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          _this.tableData.data =[];
+          _this.paramsList.total=0;
+          if(data.list){
+            _this.tableData.data= data.list;
+            _this.paramsList.total = data.total;
+          }
+        }
+      })
+    },
+    rowClick(row, column, event){
+      this.currProject = row;
+      this.detailShow =true;
+    },
+    openDetail(index,row){
+      this.currProject = row;
+      this.detailShow =true;
+      this.$refs.details.activeName='first';
+    },
+    showDetail(item){
+      let params = new FormData();
+      params.append("guid",item.index_id);
+      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          this.openDetail(0,data);
+        }
+      })
+    },
+    locationDk(index,row){
+      if(row.objectid){
+        this.detailShow = false;
+        let dkbhArr = row.objectid?row.objectid:'';
+        let arr = "'"+dkbhArr+"'";
+        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `objectid in (${arr})`)
+        //this.$message.warning("暂无图形")
+      }
+    },
+    tableRowStyle({row, rowIndex}) {
+      if (rowIndex%2 === 1) {
+        return 'text-align:center;background:#F7F8FA';
+      }else{
+        return 'text-align:center;';
+      }
+    },
+    tableHeaderStyle(){
+      return 'background:#E5EDFE; font-family:AlibabaPuHuiTiR; font-size:16px; color:rgba(51, 51, 51, 1);text-align:center;';
+    },
+    beforeUpload(file){
+      if(file){
+        if(file.name.endsWith("zip")){
+          this.doInput(file)
+        }
+        return false;
+      }
+    },
+
+    //处理内容变化记录信息
+    recordInfo(type,name,content){
+      let info = {};
+      info.re_recorder = this.menus.userInfo.orgName;
+      info.table_type = '临时用地导入';
+      info.re_content='';
+      let _this = this;
+      info.re_name = name;
+      if(type=='input'){
+        info.re_content ='导入项目文件名：'+content;
+      }else{
+        info.re_content ='导出文件名：'+content;
+      }
+      let params = new FormData();
+      params.append('data',JSON.stringify(info))
+      //执行持久化操作（记录入库）
+      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          this.$message.success("操作成功！")
+        }else{
+          this.$message.error("操作失败！")
+        }
+      })
+    },
+    doInput(file){
+      let params = new FormData();
+      params.append("file",file);
+      let _this = this;
+      const loading = this.$loading({
+        lock: true,
+        text: '正在导入中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.$ajax.post('/api/data/upload/lsyd/zip', params, this).then(res => {
+        const {success,data} = res;
+        loading.close();
+        if(success && data){
+          this.recordInfo("input",'临时用地成果导入',file.name);
+        }
+      })
+    },
+    doExportExcel(){
+      try {
+        const $e = this.$refs['report-table'].$el
+        let $table = $e.querySelector('.el-table__fixed')
+        if(!$table) {
+          $table = $e
+        }
+        const wb = XLSX.utils.table_to_book($table, {raw:true})
+        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
+        saveAs(
+            new Blob([wbout],{type: 'application/octet-stream'}),
+            `临时用地列表.xlsx`,
+        )
+        this.recordInfo("export","临时用地导出","临时用地列表.xlsx")
+      } catch (e) {
+        if (typeof console !== 'undefined') console.error(e)
+      }
+    },
+    doExport(){
+      let params = new FormData();
+      params.append("dkbh",this.paramsList.dkbh);
+      params.append("dkmc",this.paramsList.dkmc);
+      if(this.drawShapeJson){
+        params.append("shapes",JSON.stringify(this.drawShapeJson));
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: '正在导出',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.$ajax.post('/api/data/manage/gd/exportGdShapeFile', params, this).then(res => {
+        const {success, data} = res;
+        if(success){
+          if(data.length<=0) {
+            loading.close();
+            return;
+          };
+          const geos = {
+            'type': 'FeatureCollection',
+            'features': []
+          }
+          data.map(i=>{
+            let geoT = {
+              type: 'Feature',
+              geometry: {},
+              properties: {}
+            }
+            const geo = WkxGeometry.parse(i.geomText).toGeoJSON()
+            geoT.geometry = { ...geo }
+            delete i.shape
+            delete i.geomText
+            geoT['properties'] = i
+            geos.features.push(geoT)
+          })
+          const dataset = importContent({ json: { filename: '供地项目.json', content: JSON.stringify(geos) }})
+          setDatasetCRS(dataset, { prj: 'GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]' })
+          this.saveDataset(dataset);
+          loading.close();
+        }else{
+          this.$Message.error("查询异常，请联系管理员！");
+          loading.close();
+        }
+      })
+    },
+    saveDataset(dataset, type = 'shapefile') {
+      const fileContent = exportFileContent(dataset, { format: type })
+      this.saveFileContent(fileContent)
+    },
+    saveFileContent(fileContent) {
+      var zip = new JSZip()
+
+      fileContent.forEach(i => {
+        zip.file(i.filename, i.content)
+      })
+      zip.file('供地项目.cpg', 'UTF-8')
+      zip.generateAsync({ type: 'blob' }, function updateCallback(metadata) {
+        var msg = 'progression : ' + metadata.percent.toFixed(2) + ' %'
+        if (metadata.currentFile) {
+          msg += ', current file = ' + metadata.currentFile
+        }
+        console.log(msg)
+      }).then((blob) => {
+        // see FileSaver.js
+        saveAs(blob, '供地项目.zip')
+        console.log('done !')
+      })
+          .catch(error => console.error(error.stack))
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.page-gd-manage{
+  position: relative;
+  display: flex;
+  .page-left{
+    background: #fff;
+    border-radius: 0px 0px 0px 0px;
+    z-index: 99;
+    padding: 20px;
+    border-right:2px solid #e9e3e3;
+    .nzy-tools{
+      .panels{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+      .panel-dropdown{
+        width: 49%;
+        border-radius: 4px 4px 4px 4px;
+        .el-dropdown{
+          width: 100%;
+          .el-dropdown-link{
+            cursor: pointer;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+
+            font-family: AlibabaPuHuiTiM;
+            font-weight: normal;
+            font-size: 16px;
+            color: #3C4859;
+            line-height: 20px;
+            text-align: center;
+          }
+        }
+      }
+      .panel-input{
+        width: 49%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span{
+          font-family: AlibabaPuHuiTiM;
+          font-size: 14px;
+          color: #404A5B;
+          text-align: center;
+          width: 130px;
+        }
+        .fw{
+          width: 60px;
+          height: 36px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 4px;
+          border: 1px solid #CCD1DC;
+          color: #446AE7;
+          margin-left: 8px;
+          cursor: pointer;
+        }
+        ::v-deep{
+          .el-input__inner{
+            height: 36px;
+            line-height: 36px;
+          }
+        }
+      }
+    }
+  }
+  .page-detail{
+    background: #FFFFFF;
+    border-radius: 0px 0px 0px 0px;
+    position: absolute;
+    z-index: 999;
+    right: 0px;
+  }
+  .menus-open{
+    width: 32px;
+    height: 62px;
+    background: #E8EEFF;
+    box-shadow: 0px 2px 2px 0px rgba(55,90,178,0.2);
+    border-radius: 4px 0px 0px 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    position: absolute;
+    cursor: pointer;
+    z-index: 999;
+    i{
+      color: #4880FF;
+      font-size: 26px;
+    }
+  }
+  .page-map{
+    //position: absolute;
+    //background:#434;
+  }
+}
+</style>

YHYZT/client/src/views/DataManage/Lsyd.vue

@@ -1,82 +1,71 @@
 <template>
-  <div class="page-gd-manage">
-    <div v-show="menusShow" class="page-left" :style="{height:contentHeight+'px',width:menusWidth+'px'}">
+  <div class="page-nzy-manage">
+    <div class="page-left" :style="{height:contentHeight+'px',width:contentWidth+'px'}">
       <div class="nzy-tools">
-        <div class="panels">
-          <div class="panel-dropdown" style="background: #F5FBFF">
-            <el-dropdown>
-              <div class="el-dropdown-link">
-                <img src="@/assets/images/datamanage/sc.png"/>
-                导入文件
-                <img src="@/assets/images/datamanage/sc-i.png"/>
+        <el-form label-width="120px" :model="paramsList">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="批复文号：">
+                <el-input v-model="paramsList.pzwh" placeholder="请输入批复文号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="用地单位：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入用地单位"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <span></span>
+              <el-form-item label="批准面积：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入批准面积"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="批准单位：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入批准单位"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="坐落位置：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入坐落位置"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="到期时间：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入到期时间"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <div class="btn-group">
+                <el-button type="primary" @click="getBpxmList">查询</el-button>
+                <div class="panel-dropdown">
+                  <el-dropdown>
+                    <el-button type="success">
+                      导入文件<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item>
+                        <el-upload
+                            class="upload-demo"
+                            action=""
+                            :before-upload="beforeUpload"
+                            multiple
+                            :limit="3"
+                            :on-exceed="2"
+                            accept=".zip">
+                        &nbsp;&nbsp;批量导入&nbsp;&nbsp;
+                        </el-upload>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </div>
               </div>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <el-upload
-                      class="upload-demo"
-                      action=""
-                      :before-upload="beforeUpload"
-                      multiple
-                      :limit="3"
-                      :on-exceed="2"
-                      accept=".zip">
-                    &nbsp;&nbsp;批量导入&nbsp;&nbsp;
-                  </el-upload>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <div class="panel-dropdown" style="background: #FFFBF1">
-            <el-dropdown>
-              <div class="el-dropdown-link">
-                <img src="@/assets/images/datamanage/xz.png"/>
-                导出文件
-                <img src="@/assets/images/datamanage/xz-i.png"/>
-              </div>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <div @click="doExportExcel">
-                    导出项目Excel
-                  </div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </div>
-        <div class="panels">
-          <div class="panel-input">
-            <span>批准文号：</span>
-            <el-input v-model="paramsList.dkbh" placeholder="请输入内容" clearable></el-input>
-          </div>
-          <div class="panel-input">
-            <span>关键字：</span>
-            <el-input v-model="paramsList.dkmc" placeholder="项目名称/用地单位名称/所属板块" clearable></el-input>
-          </div>
-        </div>
-        <div class="panels">
-          <div class="panel-input">
-            <span>绘制范围：</span>
-            <div class="fw"  title="框选绘制" @click="createBoxEvent">
-              <i style="font-size: 20px" class="iconfont yh-Frame"/>
-            </div>
-            <div class="fw" title="自定义绘制"  @click="createDrawInteraction">
-              <i style="font-size: 24px" class="iconfont yh-huizhi1"/>
-            </div>
-            <div class="fw" title="图斑拾取" @click="sqFeatrue">
-              <i style="font-size: 24px" class="iconfont  yh-shiqu"/>
-            </div>
-            <div class="fw" title="清除绘制" @click="clearLayer">
-              清除
-            </div>
-          </div>
-          <div class="panel-input">
-            <span>缓冲距离：</span>
-            <el-input placeholder="请输入内容" v-model="input2">
-              <template slot="append">米</template>
-            </el-input>
-            <el-button type="primary"  style="margin-left: 8px;height: 36px" @click="getBpxmList">查询</el-button>
-          </div>
-        </div>
+            </el-col>
+          </el-row>
+        </el-form>
+
       </div>
       <div class="nzy-table">
         <el-table
@@ -87,45 +76,68 @@
             :cell-style="tableRowStyle"
             :row-click="rowClick"
             ref="report-table"
-        >
+            >
           <el-table-column
               type="index"
               width="80"
-              label="序号"/>
+              label="序号">
+          </el-table-column>
           <el-table-column
-              prop="pzwh"
-              width="100"
-              label="临时用地批准文号"/>
+              prop="pf_wh"
+              label="批次索引">
+          </el-table-column>
           <el-table-column
-              prop="xmmc"
-              label="建设项目名称"
-             />
+              prop="pf_wh"
+              label="项目名称">
+          </el-table-column>
           <el-table-column
-              prop="pzsj"
-              label="用地批准时间">
+              prop="xm_lx"
+              label="项目类型"
+              width="100">
             <template slot-scope="scope">
-              {{new Date(scope.row.pzsj).toLocaleDateString("af")}}
+              <span v-if="scope.row.xm_lx=='2'">单独选址项目</span>
+              <span v-else-if="scope.row.xm_lx=='3'">城市分批次项目</span>
+              <span v-else-if="scope.row.xm_lx=='10'">实施方案项目</span>
             </template>
           </el-table-column>
+          <el-table-column
+              prop="xm_bh"
+              label="批准文号">
+          </el-table-column>
+          <el-table-column
+              prop="xm_mc"
+              label="批准日期">
+          </el-table-column>
+          <el-table-column
+              prop="xm_mc"
+              label="批次总面积（公顷）">
+          </el-table-column>
           <el-table-column
               width="150"
+
               label="操作">
             <template slot-scope="scope">
               <div style="line-height: 34px;">
                 <el-button
-                    @click.native.prevent="openDetail(scope.$index, scope.row)"
-                    plain
-                    type="primary"
-                    size="mini">
+                  @click.native.prevent="openDetail(scope.$index, scope.row)"
+                  style="margin-right: 10px;"
+                  plain
+                  type="primary"
+                  size="mini">
                   查看
                 </el-button>
-                <el-button
+                <el-popconfirm
+                  title="该条数据确定删除吗？"
+                >
+                  <el-button
                     @click.native.prevent="locationDk(scope.$index, scope.row)"
                     plain
-                    type="success"
+                    type="danger"
+                    slot="reference"
                     size="mini">
-                  定位
-                </el-button>
+                    删除
+                  </el-button>
+                </el-popconfirm>
               </div>
             </template>
           </el-table-column>
@@ -139,69 +151,38 @@
               show-sizer />
       </div>
     </div>
-    <div @click="()=>{menusWidth =0;menusShow=false;detailShow=false;$refs.baseMap.resetSize();}"
-         style="top: calc(50% - 30px);left: calc( 700px - 20px);"
-         title="收起"
-         v-show="menusShow"
-         class="menus-open"
-    >
-      <i class="iconfont yh-Frame2"/>
-    </div>
-    <div @click="()=>{menusWidth =700;menusShow=true;$refs.baseMap.resetSize();}"
-         style="top: calc(50% - 30px);left: 0px;"
-         title="展开"
-         v-show="!menusShow"
-         class="menus-open"
+    <el-dialog
+      :visible.sync="detailShow"
+      title="项目详情"
+      top="5vh"
+      width="80%"
     >
-      <!--      <img src="@/assets/images/datamanage/zd.png"/>-->
-      <i class="iconfont yh-xiangyou"/>
-    </div>
-    <div v-show="detailShow" class="page-detail" :style="{height:contentHeight+'px',width:contentWidth-menusWidth+'px',left:menusWidth+'px'}">
       <detail ref="details" @initBpxm="getBpxmList" :contentWidth="contentWidth-menusWidth" :contentHeight="contentHeight" :project="currProject"/>
-    </div>
-    <div @click="()=>{detailShow=false;}"
-         style="top: calc(50% - 30px);right: 0px"
-         title="展开"
-         v-show="detailShow"
-         class="menus-open"
-    >
-      <i class="iconfont yh-Frame2"/>
-    </div>
-    <div class="page-map" :style="{height:contentHeight+'px',width: contentWidth-menusWidth-30+'px'}" >
-      <base-map ref="baseMap" :overlayShow="true" @showDetail="showDetail" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
-    </div>
+    </el-dialog>
   </div>
 </template>
-
 <script>
-import mapshaper from "mapshaper";
-import BaseMap from "../../components/common/BaseMap";
-import Detail from "./lsyd/Detail";
-const {
-  importContent,
-  setDatasetCRS,
-  exportFileContent
-} = mapshaper.internal
+import Detail from "./nzy/Detail";
+import JSZip from 'jszip'
+import { saveAs } from 'file-saver'
 export default {
-  name: "Lsyd",
+  name: "Nzy",
   props:{
     contentWidth:Number,
     contentHeight:Number
   },
-  components:{BaseMap,Detail},
+  components:{Detail},
   data() {
     return {
       compName: 'data-manage',
-      visibleLayerId:['YHYZT_LSYD'],
       menus:JSON.parse(window.sessionStorage.getItem('yzt-user')),
       menusWidth:700,
-      menusShow:true,
       detailShow:false,
       tableData:{
         data:[],
       },
       currProject:null,
-      paramsList:{dkbh:'',dkmc:'',page:1,size:15,total:0},
+      paramsList:{pzwh:'',pcmc:'',page:1,size:15,total:0},
       fullscreenLoading: false,
       drawShapeJson:null,
     }
@@ -210,28 +191,30 @@ export default {
     this.getBpxmList();
   },
   methods: {
-    createBoxEvent(){
-      this.$refs.baseMap.createBoxEvent();
-    },
-    sqFeatrue(){
-      this.$refs.baseMap.sqFeatrue();
-    },
-    //自定义绘制分析
-    createDrawInteraction(){
-      this.$refs.baseMap.drawInteractionEvent();
-    },
-    //清除绘制图层
-    clearLayer(){
-      this.$refs.baseMap.cleanLayer();
-      this.drawShapeJson = null;
-      this.getBpxmList();
-    },
-    drawShapeJsonEvent(json){
-      if(json){
-        this.drawShapeJson = json;
-        this.getBpxmList();
-        this.$message.success("绘制结束");
+    //处理内容变化记录信息
+    recordInfo(type,name,content){
+      let info = {};
+      info.re_recorder = this.menus.userInfo.orgName;
+      info.table_type = '农转用导入';
+      info.re_content='';
+      let _this = this;
+      info.re_name = name;
+      if(type=='input'){
+        info.re_content ='导入项目文件名：'+content;
+      }else{
+        info.re_content ='导出文件名：'+content;
       }
+      let params = new FormData();
+      params.append('data',JSON.stringify(info))
+      //执行持久化操作（记录入库）
+      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          this.$message.success("操作成功！")
+        }else{
+          this.$message.error("操作失败！")
+        }
+      })
     },
     pageChange:function (page){
       this.paramsList.page=page;
@@ -270,25 +253,15 @@ export default {
     },
     openDetail(index,row){
       this.currProject = row;
-      this.detailShow =true;
-      this.$refs.details.activeName='first';
-    },
-    showDetail(item){
-      let params = new FormData();
-      params.append("guid",item.index_id);
-      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.openDetail(0,data);
-        }
-      })
+      this.detailShow = true;
+      this.$refs['details'].initDetailData()
     },
     locationDk(index,row){
-      if(row.objectid){
+      if(row.dk_bh){
         this.detailShow = false;
-        let dkbhArr = row.objectid?row.objectid:'';
-        let arr = "'"+dkbhArr+"'";
-        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `objectid in (${arr})`)
+        let dkbhArr = row.dk_bh?row.dk_bh.split(","):'';
+        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
+        this.$vm.$emit('locationGlobal', 'YHYZT_NZYDK_NEW', `index_id in (${arr.join()})`)
         //this.$message.warning("暂无图形")
       }
     },
@@ -310,32 +283,6 @@ export default {
         return false;
       }
     },
-
-    //处理内容变化记录信息
-    recordInfo(type,name,content){
-      let info = {};
-      info.re_recorder = this.menus.userInfo.orgName;
-      info.table_type = '临时用地导入';
-      info.re_content='';
-      let _this = this;
-      info.re_name = name;
-      if(type=='input'){
-        info.re_content ='导入项目文件名：'+content;
-      }else{
-        info.re_content ='导出文件名：'+content;
-      }
-      let params = new FormData();
-      params.append('data',JSON.stringify(info))
-      //执行持久化操作（记录入库）
-      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.$message.success("操作成功！")
-        }else{
-          this.$message.error("操作失败！")
-        }
-      })
-    },
     doInput(file){
       let params = new FormData();
       params.append("file",file);
@@ -354,82 +301,13 @@ export default {
         }
       })
     },
-    doExportExcel(){
-      try {
-        const $e = this.$refs['report-table'].$el
-        let $table = $e.querySelector('.el-table__fixed')
-        if(!$table) {
-          $table = $e
-        }
-        const wb = XLSX.utils.table_to_book($table, {raw:true})
-        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
-        saveAs(
-            new Blob([wbout],{type: 'application/octet-stream'}),
-            `临时用地列表.xlsx`,
-        )
-        this.recordInfo("export","临时用地导出","临时用地列表.xlsx")
-      } catch (e) {
-        if (typeof console !== 'undefined') console.error(e)
-      }
-    },
-    doExport(){
-      let params = new FormData();
-      params.append("dkbh",this.paramsList.dkbh);
-      params.append("dkmc",this.paramsList.dkmc);
-      if(this.drawShapeJson){
-        params.append("shapes",JSON.stringify(this.drawShapeJson));
-      }
-      const loading = this.$loading({
-        lock: true,
-        text: '正在导出',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      this.$ajax.post('/api/data/manage/gd/exportGdShapeFile', params, this).then(res => {
-        const {success, data} = res;
-        if(success){
-          if(data.length<=0) {
-            loading.close();
-            return;
-          };
-          const geos = {
-            'type': 'FeatureCollection',
-            'features': []
-          }
-          data.map(i=>{
-            let geoT = {
-              type: 'Feature',
-              geometry: {},
-              properties: {}
-            }
-            const geo = WkxGeometry.parse(i.geomText).toGeoJSON()
-            geoT.geometry = { ...geo }
-            delete i.shape
-            delete i.geomText
-            geoT['properties'] = i
-            geos.features.push(geoT)
-          })
-          const dataset = importContent({ json: { filename: '供地项目.json', content: JSON.stringify(geos) }})
-          setDatasetCRS(dataset, { prj: 'GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]' })
-          this.saveDataset(dataset);
-          loading.close();
-        }else{
-          this.$Message.error("查询异常，请联系管理员！");
-          loading.close();
-        }
-      })
-    },
-    saveDataset(dataset, type = 'shapefile') {
-      const fileContent = exportFileContent(dataset, { format: type })
-      this.saveFileContent(fileContent)
-    },
     saveFileContent(fileContent) {
       var zip = new JSZip()
 
       fileContent.forEach(i => {
         zip.file(i.filename, i.content)
       })
-      zip.file('供地项目.cpg', 'UTF-8')
+      zip.file('农转用项目.cpg', 'UTF-8')
       zip.generateAsync({ type: 'blob' }, function updateCallback(metadata) {
         var msg = 'progression : ' + metadata.percent.toFixed(2) + ' %'
         if (metadata.currentFile) {
@@ -438,7 +316,7 @@ export default {
         console.log(msg)
       }).then((blob) => {
         // see FileSaver.js
-        saveAs(blob, '供地项目.zip')
+        saveAs(blob, '农转用项目.zip')
         console.log('done !')
       })
           .catch(error => console.error(error.stack))
@@ -447,7 +325,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.page-gd-manage{
+.page-nzy-manage{
   position: relative;
   display: flex;
   .page-left{
@@ -457,63 +335,14 @@ export default {
     padding: 20px;
     border-right:2px solid #e9e3e3;
     .nzy-tools{
-      .panels{
-        width: 100%;
+      .btn-group {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 20px;
       }
       .panel-dropdown{
-        width: 49%;
+        margin-left: 10px;
         border-radius: 4px 4px 4px 4px;
         .el-dropdown{
           width: 100%;
-          .el-dropdown-link{
-            cursor: pointer;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-            font-size: 16px;
-            color: #3C4859;
-            line-height: 20px;
-            text-align: center;
-          }
-        }
-      }
-      .panel-input{
-        width: 49%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        span{
-          font-family: AlibabaPuHuiTiM;
-          font-size: 14px;
-          color: #404A5B;
-          text-align: center;
-          width: 130px;
-        }
-        .fw{
-          width: 60px;
-          height: 36px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 4px;
-          border: 1px solid #CCD1DC;
-          color: #446AE7;
-          margin-left: 8px;
-          cursor: pointer;
-        }
-        ::v-deep{
-          .el-input__inner{
-            height: 36px;
-            line-height: 36px;
-          }
         }
       }
     }
@@ -525,24 +354,6 @@ export default {
     z-index: 999;
     right: 0px;
   }
-  .menus-open{
-    width: 32px;
-    height: 62px;
-    background: #E8EEFF;
-    box-shadow: 0px 2px 2px 0px rgba(55,90,178,0.2);
-    border-radius: 4px 0px 0px 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    position: absolute;
-    cursor: pointer;
-    z-index: 999;
-    i{
-      color: #4880FF;
-      font-size: 26px;
-    }
-  }
   .page-map{
     //position: absolute;
     //background:#434;

YHYZT/client/src/views/DataManage/Pewg.vue

@@ -1,59 +1,55 @@
 <template>
-  <div class="page-gd-manage">
-    <div v-show="menusShow" class="page-left" :style="{height:contentHeight+'px',width:menusWidth+'px'}">
+  <div class="page-nzy-manage">
+    <div class="page-left" :style="{height:contentHeight+'px',width:contentWidth+'px'}">
       <div class="nzy-tools">
-        <div class="panels">
-          <div class="panel-dropdown" style="background: #FFFBF1">
-            <el-dropdown>
-              <div class="el-dropdown-link">
-                <img src="@/assets/images/datamanage/xz.png"/>
-                导出文件
-                <img src="@/assets/images/datamanage/xz-i.png"/>
+        <el-form label-width="120px" :model="paramsList">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="项目编号：">
+                <el-input v-model="paramsList.pzwh" placeholder="请输入项目编号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="乡镇街道：">
+                <el-input v-model="paramsList.pzwh" placeholder="请输入乡镇街道" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="项目名称：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入项目名称"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <span></span>
+              <el-form-item label="项目类型：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入项目类型"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="批准文号：">
+                <el-input v-model="paramsList.pf_wh" placeholder="请输入批准文号"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="土地用途：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入土地用途"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="剩余面积：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入剩余面积"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <div class="btn-group">
+                <el-button type="primary" @click="getBpxmList">查询</el-button>
               </div>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <div @click="doExportExcel">
-                    导出项目Excel
-                  </div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </div>
-        <div class="panels">
-          <div class="panel-input">
-            <span>批准文号：</span>
-            <el-input v-model="paramsList.dkbh" placeholder="请输入内容" clearable></el-input>
-          </div>
-          <div class="panel-input">
-            <span>地块名称：</span>
-            <el-input v-model="paramsList.dkmc" placeholder="请输入内容" clearable></el-input>
-          </div>
-        </div>
-        <div class="panels">
-          <div class="panel-input">
-            <span>绘制范围：</span>
-            <div class="fw"  title="框选绘制" @click="createBoxEvent">
-              <i style="font-size: 20px" class="iconfont yh-Frame"/>
-            </div>
-            <div class="fw" title="自定义绘制"  @click="createDrawInteraction">
-              <i style="font-size: 24px" class="iconfont yh-huizhi1"/>
-            </div>
-            <div class="fw" title="图斑拾取" @click="sqFeatrue">
-              <i style="font-size: 24px" class="iconfont  yh-shiqu"/>
-            </div>
-            <div class="fw" title="清除绘制" @click="clearLayer">
-              清除
-            </div>
-          </div>
-          <div class="panel-input">
-            <span>缓冲距离：</span>
-            <el-input placeholder="请输入内容" v-model="input2">
-              <template slot="append">米</template>
-            </el-input>
-            <el-button type="primary"  style="margin-left: 8px;height: 36px" @click="getBpxmList">查询</el-button>
-          </div>
-        </div>
+            </el-col>
+          </el-row>
+        </el-form>
+
       </div>
       <div class="nzy-table">
         <el-table
@@ -64,45 +60,54 @@
             :cell-style="tableRowStyle"
             :row-click="rowClick"
             ref="report-table"
-        >
+            >
           <el-table-column
               type="index"
               width="80"
-              label="序号"/>
+              label="序号">
+          </el-table-column>
           <el-table-column
               prop="pf_wh"
-              label="批准文号"/>
+              label="项目编号">
+          </el-table-column>
           <el-table-column
-              prop="pz_mj"
-              label="批准面积（公顷）">
+              prop="pf_wh"
+              label="乡镇街道">
           </el-table-column>
           <el-table-column
-              prop="dk_mc"
-              label="地块名称"
-              width="100"/>
+              prop="pf_wh"
+              label="项目名称">
+          </el-table-column>
           <el-table-column
-              prop="dk_bh"
-              label="地块编号"/>
+              prop="xm_bh"
+              label="项目类型">
+          </el-table-column>
+          <el-table-column
+              prop="pz_wh"
+              label="批准文号">
+          </el-table-column>
+          <el-table-column
+              prop="xm_mc"
+              label="土地用途">
+          </el-table-column>
+          <el-table-column
+              prop="xm_mc"
+              label="剩余面积">
+          </el-table-column>
           <el-table-column
               width="150"
+
               label="操作">
             <template slot-scope="scope">
               <div style="line-height: 34px;">
                 <el-button
-                    @click.native.prevent="openDetail(scope.$index, scope.row)"
-                    plain
-                    type="primary"
-                    size="mini">
+                  @click.native.prevent="openDetail(scope.$index, scope.row)"
+                  style="margin-right: 10px;"
+                  plain
+                  type="primary"
+                  size="mini">
                   查看
                 </el-button>
-                <el-button
-                    v-show="scope.row.xm_guid"
-                    @click.native.prevent="locationDk(scope.$index, scope.row)"
-                    plain
-                    type="success"
-                    size="mini">
-                  定位
-                </el-button>
               </div>
             </template>
           </el-table-column>
@@ -116,72 +121,43 @@
               show-sizer />
       </div>
     </div>
-    <div @click="()=>{menusWidth =0;menusShow=false;detailShow=false;$refs.baseMap.resetSize();}"
-         style="top: calc(50% - 30px);left: calc( 700px - 20px);"
-         title="收起"
-         v-show="menusShow"
-         class="menus-open"
+    <el-dialog
+      :visible.sync="detailShow"
+      title="项目详情"
+      top="5vh"
+      width="80%"
     >
-      <i class="iconfont yh-Frame2"/>
-    </div>
-    <div @click="()=>{menusWidth =700;menusShow=true;$refs.baseMap.resetSize();}"
-         style="top: calc(50% - 30px);left: 0px;"
-         title="展开"
-         v-show="!menusShow"
-         class="menus-open"
-    >
-      <!--      <img src="@/assets/images/datamanage/zd.png"/>-->
-      <i class="iconfont yh-xiangyou"/>
-    </div>
-    <div v-show="detailShow" class="page-detail" :style="{height:contentHeight+'px',width:contentWidth-menusWidth+'px',left:menusWidth+'px'}">
       <detail ref="details" @initBpxm="getBpxmList" :contentWidth="contentWidth-menusWidth" :contentHeight="contentHeight" :project="currProject"/>
-    </div>
-    <div @click="()=>{detailShow=false;}"
-         style="top: calc(50% - 30px);right: 0px"
-         title="展开"
-         v-show="detailShow"
-         class="menus-open"
-    >
-      <i class="iconfont yh-Frame2"/>
-    </div>
-    <div class="page-map" :style="{height:contentHeight+'px',width: contentWidth-menusWidth-30+'px'}" >
-      <base-map ref="baseMap" :overlayShow="true" @showDetail="showDetail" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
-    </div>
+    </el-dialog>
   </div>
 </template>
 <script>
-import BaseMap from "../../components/common/BaseMap";
 import Detail from "./pewg/Detail";
-import {Geometry as WkxGeometry} from "wkx";
 import JSZip from 'jszip'
 import mapshaper from 'mapshaper';
-import { saveAs } from 'file-saver';
-import * as XLSX from 'xlsx'
+import { saveAs } from 'file-saver'
 const {
-  importContent,
-  setDatasetCRS,
   exportFileContent
 } = mapshaper.internal
 export default {
-  name: "Pewg",
+  name: "Nzy",
   props:{
     contentWidth:Number,
     contentHeight:Number
   },
-  components:{BaseMap,Detail},
+  components:{Detail},
   data() {
     return {
       compName: 'data-manage',
       visibleLayerId:['YHYZT_PEWG_NEW'],
       menus:JSON.parse(window.sessionStorage.getItem('yzt-user')),
       menusWidth:700,
-      menusShow:true,
       detailShow:false,
       tableData:{
         data:[],
       },
       currProject:null,
-      paramsList:{dkbh:'',dkmc:'',page:1,size:15,total:0},
+      paramsList:{pzwh:'',pcmc:'',page:1,size:15,total:0},
       fullscreenLoading: false,
       drawShapeJson:null,
     }
@@ -190,28 +166,30 @@ export default {
     this.getBpxmList();
   },
   methods: {
-    createBoxEvent(){
-      this.$refs.baseMap.createBoxEvent();
-    },
-    sqFeatrue(){
-      this.$refs.baseMap.sqFeatrue();
-    },
-    //自定义绘制分析
-    createDrawInteraction(){
-      this.$refs.baseMap.drawInteractionEvent();
-    },
-    //清除绘制图层
-    clearLayer(){
-      this.$refs.baseMap.cleanLayer();
-      this.drawShapeJson = null;
-      this.getBpxmList();
-    },
-    drawShapeJsonEvent(json){
-      if(json){
-        this.drawShapeJson = json;
-        this.getBpxmList();
-        this.$message.success("绘制结束");
+    //处理内容变化记录信息
+    recordInfo(type,name,content){
+      let info = {};
+      info.re_recorder = this.menus.userInfo.orgName;
+      info.table_type = '农转用导入';
+      info.re_content='';
+      let _this = this;
+      info.re_name = name;
+      if(type=='input'){
+        info.re_content ='导入项目文件名：'+content;
+      }else{
+        info.re_content ='导出文件名：'+content;
       }
+      let params = new FormData();
+      params.append('data',JSON.stringify(info))
+      //执行持久化操作（记录入库）
+      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          this.$message.success("操作成功！")
+        }else{
+          this.$message.error("操作失败！")
+        }
+      })
     },
     pageChange:function (page){
       this.paramsList.page=page;
@@ -226,8 +204,6 @@ export default {
       let params = new FormData();
       params.append("page",this.paramsList.page);
       params.append("size",this.paramsList.size);
-      params.append("dkbh",this.paramsList.dkbh);
-      params.append("dkmc",this.paramsList.dkmc);
       if(this.drawShapeJson){
         params.append("shapes",JSON.stringify(this.drawShapeJson));
       }
@@ -250,27 +226,8 @@ export default {
     },
     openDetail(index,row){
       this.currProject = row;
-      this.detailShow =true;
-      this.$refs.details.activeName='first';
-    },
-    showDetail(item){
-      let params = new FormData();
-      params.append("guid",item.index_id);
-      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.openDetail(0,data);
-        }
-      })
-    },
-    locationDk(index,row){
-      if(row.pewg_id){
-        this.detailShow = false;
-        let dkbhArr = row.pewg_id?row.pewg_id.split(","):'';
-        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
-        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `xm_guid in (${arr.join()})`)
-        //this.$message.warning("暂无图形")
-      }
+      this.detailShow = true;
+      this.$refs['details'].initDetailData()
     },
     tableRowStyle({row, rowIndex}) {
       if (rowIndex%2 === 1) {
@@ -282,97 +239,6 @@ export default {
     tableHeaderStyle(){
       return 'background:#E5EDFE; font-family:AlibabaPuHuiTiR; font-size:16px; color:rgba(51, 51, 51, 1);text-align:center;';
     },
-    beforeUpload(file){
-      if(file){
-        if(file.name.endsWith("zip")){
-          this.doInput(file)
-        }
-        return false;
-      }
-    },
-    doInput(file){
-      let params = new FormData();
-      params.append("file",file);
-      let _this = this;
-      const loading = this.$loading({
-        lock: true,
-        text: '正在导入中',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      this.$ajax.post('/api/data/upload/gd/zip', params, this).then(res => {
-        const {success,data} = res;
-        loading.close();
-        if(success && data){
-
-          this.$message.success("上传成功！")
-        }
-      })
-    },
-    doExportExcel(){
-      try {
-        const $e = this.$refs['report-table'].$el
-        let $table = $e.querySelector('.el-table__fixed')
-        if(!$table) {
-          $table = $e
-        }
-        const wb = XLSX.utils.table_to_book($table, {raw:true})
-        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
-        saveAs(
-            new Blob([wbout],{type: 'application/octet-stream'}),
-            `供地项目列表.xlsx`,
-        )
-      } catch (e) {
-        if (typeof console !== 'undefined') console.error(e)
-      }
-    },
-    doExport(){
-      let params = new FormData();
-      params.append("dkbh",this.paramsList.dkbh);
-      params.append("dkmc",this.paramsList.dkmc);
-      if(this.drawShapeJson){
-        params.append("shapes",JSON.stringify(this.drawShapeJson));
-      }
-      const loading = this.$loading({
-        lock: true,
-        text: '正在导出',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      this.$ajax.post('/api/data/manage/gd/exportGdShapeFile', params, this).then(res => {
-        const {success, data} = res;
-        if(success){
-          if(data.length<=0) {
-            loading.close();
-            return;
-          };
-          const geos = {
-            'type': 'FeatureCollection',
-            'features': []
-          }
-          data.map(i=>{
-            let geoT = {
-              type: 'Feature',
-              geometry: {},
-              properties: {}
-            }
-            const geo = WkxGeometry.parse(i.geomText).toGeoJSON()
-            geoT.geometry = { ...geo }
-            delete i.shape
-            delete i.geomText
-            geoT['properties'] = i
-            geos.features.push(geoT)
-          })
-          const dataset = importContent({ json: { filename: '供地项目.json', content: JSON.stringify(geos) }})
-          setDatasetCRS(dataset, { prj: 'GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]' })
-          this.saveDataset(dataset);
-          loading.close();
-        }else{
-          this.$Message.error("查询异常，请联系管理员！");
-          loading.close();
-        }
-      })
-    },
     saveDataset(dataset, type = 'shapefile') {
       const fileContent = exportFileContent(dataset, { format: type })
       this.saveFileContent(fileContent)
@@ -383,7 +249,7 @@ export default {
       fileContent.forEach(i => {
         zip.file(i.filename, i.content)
       })
-      zip.file('供地项目.cpg', 'UTF-8')
+      zip.file('农转用项目.cpg', 'UTF-8')
       zip.generateAsync({ type: 'blob' }, function updateCallback(metadata) {
         var msg = 'progression : ' + metadata.percent.toFixed(2) + ' %'
         if (metadata.currentFile) {
@@ -392,7 +258,7 @@ export default {
         console.log(msg)
       }).then((blob) => {
         // see FileSaver.js
-        saveAs(blob, '供地项目.zip')
+        saveAs(blob, '农转用项目.zip')
         console.log('done !')
       })
           .catch(error => console.error(error.stack))
@@ -401,7 +267,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.page-gd-manage{
+.page-nzy-manage{
   position: relative;
   display: flex;
   .page-left{
@@ -411,64 +277,8 @@ export default {
     padding: 20px;
     border-right:2px solid #e9e3e3;
     .nzy-tools{
-      .panels{
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 20px;
-      }
-      .panel-dropdown{
-        width: 49%;
-        border-radius: 4px 4px 4px 4px;
-        .el-dropdown{
-          width: 100%;
-          .el-dropdown-link{
-            cursor: pointer;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-            font-size: 16px;
-            color: #3C4859;
-            line-height: 20px;
-            text-align: center;
-          }
-        }
-      }
-      .panel-input{
-        width: 49%;
+      .btn-group {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        span{
-          font-family: AlibabaPuHuiTiM;
-          font-size: 14px;
-          color: #404A5B;
-          text-align: center;
-          width: 130px;
-        }
-        .fw{
-          width: 60px;
-          height: 36px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 4px;
-          border: 1px solid #CCD1DC;
-          color: #446AE7;
-          margin-left: 8px;
-          cursor: pointer;
-        }
-        ::v-deep{
-          .el-input__inner{
-            height: 36px;
-            line-height: 36px;
-          }
-        }
       }
     }
   }
@@ -479,24 +289,6 @@ export default {
     z-index: 999;
     right: 0px;
   }
-  .menus-open{
-    width: 32px;
-    height: 62px;
-    background: #E8EEFF;
-    box-shadow: 0px 2px 2px 0px rgba(55,90,178,0.2);
-    border-radius: 4px 0px 0px 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    position: absolute;
-    cursor: pointer;
-    z-index: 999;
-    i{
-      color: #4880FF;
-      font-size: 26px;
-    }
-  }
   .page-map{
     //position: absolute;
     //background:#434;

YHYZT/client/src/views/DataManage/Ssnyd copy.vue

@@ -0,0 +1,550 @@
+<template>
+  <div class="page-gd-manage">
+    <div v-show="menusShow" class="page-left" :style="{height:contentHeight+'px',width:menusWidth+'px'}">
+      <div class="nzy-tools">
+        <div class="panels">
+          <div class="panel-dropdown" style="background: #F5FBFF">
+            <el-dropdown>
+              <div class="el-dropdown-link">
+                <img src="@/assets/images/datamanage/sc.png"/>
+                导入文件
+                <img src="@/assets/images/datamanage/sc-i.png"/>
+              </div>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <el-upload
+                      class="upload-demo"
+                      action=""
+                      :before-upload="beforeUpload"
+                      multiple
+                      :limit="3"
+                      :on-exceed="2"
+                      accept=".zip">
+                    &nbsp;&nbsp;批量导入&nbsp;&nbsp;
+                  </el-upload>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="panel-dropdown" style="background: #FFFBF1">
+            <el-dropdown>
+              <div class="el-dropdown-link">
+                <img src="@/assets/images/datamanage/xz.png"/>
+                导出文件
+                <img src="@/assets/images/datamanage/xz-i.png"/>
+              </div>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <div @click="doExportExcel">
+                    导出项目Excel
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
+        <div class="panels">
+          <div class="panel-input">
+            <span>批准文号：</span>
+            <el-input v-model="paramsList.dkbh" placeholder="请输入内容" clearable></el-input>
+          </div>
+          <div class="panel-input">
+            <span>关键字：</span>
+            <el-input v-model="paramsList.dkmc" placeholder="项目名称/用地单位名称/所属板块" clearable></el-input>
+          </div>
+        </div>
+        <div class="panels">
+          <div class="panel-input">
+            <span>绘制范围：</span>
+            <div class="fw"  title="框选绘制" @click="createBoxEvent">
+              <i style="font-size: 20px" class="iconfont yh-Frame"/>
+            </div>
+            <div class="fw" title="自定义绘制"  @click="createDrawInteraction">
+              <i style="font-size: 24px" class="iconfont yh-huizhi1"/>
+            </div>
+            <div class="fw" title="图斑拾取" @click="sqFeatrue">
+              <i style="font-size: 24px" class="iconfont  yh-shiqu"/>
+            </div>
+            <div class="fw" title="清除绘制" @click="clearLayer">
+              清除
+            </div>
+          </div>
+          <div class="panel-input">
+            <span>缓冲距离：</span>
+            <el-input placeholder="请输入内容" v-model="input2">
+              <template slot="append">米</template>
+            </el-input>
+            <el-button type="primary"  style="margin-left: 8px;height: 36px" @click="getBpxmList">查询</el-button>
+          </div>
+        </div>
+      </div>
+      <div class="nzy-table">
+        <el-table
+            border
+            :data="tableData.data"
+            :height="contentHeight-260"
+            :header-cell-style="tableHeaderStyle"
+            :cell-style="tableRowStyle"
+            :row-click="rowClick"
+            ref="report-table"
+        >
+          <el-table-column
+              type="index"
+              width="80"
+              label="序号"/>
+          <el-table-column
+              prop="pzwh"
+              width="100"
+              label="临时用地批准文号"/>
+          <el-table-column
+              prop="xmmc"
+              label="建设项目名称"
+             />
+          <el-table-column
+              prop="pzsj"
+              label="用地批准时间">
+            <template slot-scope="scope">
+              {{new Date(scope.row.pzsj).toLocaleDateString("af")}}
+            </template>
+          </el-table-column>
+          <el-table-column
+              width="150"
+              label="操作">
+            <template slot-scope="scope">
+              <div style="line-height: 34px;">
+                <el-button
+                    @click.native.prevent="openDetail(scope.$index, scope.row)"
+                    plain
+                    type="primary"
+                    size="mini">
+                  查看
+                </el-button>
+                <el-button
+                    @click.native.prevent="locationDk(scope.$index, scope.row)"
+                    plain
+                    type="success"
+                    size="mini">
+                  定位
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Page style="float: right;margin-top: 10px;"
+              show-total
+              :total="paramsList.total"
+              :page-size="paramsList.size"
+              @on-change="pageChange"
+              @on-page-size-change="sizeChange"
+              show-sizer />
+      </div>
+    </div>
+    <div @click="()=>{menusWidth =0;menusShow=false;detailShow=false;$refs.baseMap.resetSize();}"
+         style="top: calc(50% - 30px);left: calc( 700px - 20px);"
+         title="收起"
+         v-show="menusShow"
+         class="menus-open"
+    >
+      <i class="iconfont yh-Frame2"/>
+    </div>
+    <div @click="()=>{menusWidth =700;menusShow=true;$refs.baseMap.resetSize();}"
+         style="top: calc(50% - 30px);left: 0px;"
+         title="展开"
+         v-show="!menusShow"
+         class="menus-open"
+    >
+      <!--      <img src="@/assets/images/datamanage/zd.png"/>-->
+      <i class="iconfont yh-xiangyou"/>
+    </div>
+    <div v-show="detailShow" class="page-detail" :style="{height:contentHeight+'px',width:contentWidth-menusWidth+'px',left:menusWidth+'px'}">
+      <detail ref="details" @initBpxm="getBpxmList" :contentWidth="contentWidth-menusWidth" :contentHeight="contentHeight" :project="currProject"/>
+    </div>
+    <div @click="()=>{detailShow=false;}"
+         style="top: calc(50% - 30px);right: 0px"
+         title="展开"
+         v-show="detailShow"
+         class="menus-open"
+    >
+      <i class="iconfont yh-Frame2"/>
+    </div>
+    <div class="page-map" :style="{height:contentHeight+'px',width: contentWidth-menusWidth-30+'px'}" >
+      <base-map ref="baseMap" :overlayShow="true" @showDetail="showDetail" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import mapshaper from "mapshaper";
+import BaseMap from "../../components/common/BaseMap";
+import Detail from "./ssnyd/Detail";
+const {
+  importContent,
+  setDatasetCRS,
+  exportFileContent
+} = mapshaper.internal
+export default {
+  name: "Lsyd",
+  props:{
+    contentWidth:Number,
+    contentHeight:Number
+  },
+  components:{BaseMap,Detail},
+  data() {
+    return {
+      compName: 'data-manage',
+      visibleLayerId:['YHYZT_SSNYD'],
+      menus:JSON.parse(window.sessionStorage.getItem('yzt-user')),
+      menusWidth:700,
+      menusShow:true,
+      detailShow:false,
+      tableData:{
+        data:[],
+      },
+      currProject:null,
+      paramsList:{dkbh:'',dkmc:'',page:1,size:15,total:0},
+      fullscreenLoading: false,
+      drawShapeJson:null,
+    }
+  },
+  mounted(){
+    this.getBpxmList();
+  },
+  methods: {
+    createBoxEvent(){
+      this.$refs.baseMap.createBoxEvent();
+    },
+    sqFeatrue(){
+      this.$refs.baseMap.sqFeatrue();
+    },
+    //自定义绘制分析
+    createDrawInteraction(){
+      this.$refs.baseMap.drawInteractionEvent();
+    },
+    //清除绘制图层
+    clearLayer(){
+      this.$refs.baseMap.cleanLayer();
+      this.drawShapeJson = null;
+      this.getBpxmList();
+    },
+    drawShapeJsonEvent(json){
+      if(json){
+        this.drawShapeJson = json;
+        this.getBpxmList();
+        this.$message.success("绘制结束");
+      }
+    },
+    pageChange:function (page){
+      this.paramsList.page=page;
+      this.getBpxmList()
+    },
+    sizeChange:function (size){
+      this.paramsList.size=size;
+      this.getBpxmList()
+    },
+    //查询报批项目信息
+    getBpxmList(){
+      let params = new FormData();
+      params.append("page",this.paramsList.page);
+      params.append("size",this.paramsList.size);
+      params.append("dkbh",this.paramsList.dkbh);
+      params.append("dkmc",this.paramsList.dkmc);
+      if(this.drawShapeJson){
+        params.append("shapes",JSON.stringify(this.drawShapeJson));
+      }
+      let _this = this;
+      this.$ajax.post('/api/data/manage/ssnyd/getList', params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          _this.tableData.data =[];
+          _this.paramsList.total=0;
+          if(data.list){
+            _this.tableData.data= data.list;
+            _this.paramsList.total = data.total;
+          }
+        }
+      })
+    },
+    rowClick(row, column, event){
+      this.currProject = row;
+      this.detailShow =true;
+    },
+    openDetail(index,row){
+      this.currProject = row;
+      this.detailShow =true;
+      this.$refs.details.activeName='first';
+    },
+    showDetail(item){
+      let params = new FormData();
+      params.append("guid",item.index_id);
+      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          this.openDetail(0,data);
+        }
+      })
+    },
+    locationDk(index,row){
+      if(row.objectid){
+        this.detailShow = false;
+        let dkbhArr = row.objectid?row.objectid:'';
+        let arr = "'"+dkbhArr+"'";
+        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `objectid in (${arr})`)
+        //this.$message.warning("暂无图形")
+      }
+    },
+    tableRowStyle({row, rowIndex}) {
+      if (rowIndex%2 === 1) {
+        return 'text-align:center;background:#F7F8FA';
+      }else{
+        return 'text-align:center;';
+      }
+    },
+    tableHeaderStyle(){
+      return 'background:#E5EDFE; font-family:AlibabaPuHuiTiR; font-size:16px; color:rgba(51, 51, 51, 1);text-align:center;';
+    },
+    beforeUpload(file){
+      if(file){
+        if(file.name.endsWith("zip")){
+          this.doInput(file)
+        }
+        return false;
+      }
+    },
+    //处理内容变化记录信息
+    recordInfo(type,name,content){
+      let info = {};
+      info.re_recorder = this.menus.userInfo.orgName;
+      info.table_type = '设施农用地导入';
+      info.re_content='';
+      let _this = this;
+      info.re_name = name;
+      if(type=='input'){
+        info.re_content ='导入项目文件名：'+content;
+      }else{
+        info.re_content ='导出文件名：'+content;
+      }
+      let params = new FormData();
+      params.append('data',JSON.stringify(info))
+      //执行持久化操作（记录入库）
+      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          this.$message.success("操作成功！")
+        }else{
+          this.$message.error("操作失败！")
+        }
+      })
+    },
+    doInput(file){
+      let params = new FormData();
+      params.append("file",file);
+      let _this = this;
+      const loading = this.$loading({
+        lock: true,
+        text: '正在导入中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.$ajax.post('/api/data/upload/ssnyd/zip', params, this).then(res => {
+        const {success,data} = res;
+        loading.close();
+        if(success && data){
+          this.recordInfo("input",'设施农用地成果导入',file.name);
+        }
+      })
+    },
+    doExportExcel(){
+      try {
+        const $e = this.$refs['report-table'].$el
+        let $table = $e.querySelector('.el-table__fixed')
+        if(!$table) {
+          $table = $e
+        }
+        const wb = XLSX.utils.table_to_book($table, {raw:true})
+        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
+        saveAs(
+            new Blob([wbout],{type: 'application/octet-stream'}),
+            `设施农用地列表.xlsx`,
+        )
+        this.recordInfo("export","设施农用地导出","设施农用地列表.xlsx")
+      } catch (e) {
+        if (typeof console !== 'undefined') console.error(e)
+      }
+    },
+    doExport(){
+      let params = new FormData();
+      params.append("dkbh",this.paramsList.dkbh);
+      params.append("dkmc",this.paramsList.dkmc);
+      if(this.drawShapeJson){
+        params.append("shapes",JSON.stringify(this.drawShapeJson));
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: '正在导出',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.$ajax.post('/api/data/manage/gd/exportGdShapeFile', params, this).then(res => {
+        const {success, data} = res;
+        if(success){
+          if(data.length<=0) {
+            loading.close();
+            return;
+          };
+          const geos = {
+            'type': 'FeatureCollection',
+            'features': []
+          }
+          data.map(i=>{
+            let geoT = {
+              type: 'Feature',
+              geometry: {},
+              properties: {}
+            }
+            const geo = WkxGeometry.parse(i.geomText).toGeoJSON()
+            geoT.geometry = { ...geo }
+            delete i.shape
+            delete i.geomText
+            geoT['properties'] = i
+            geos.features.push(geoT)
+          })
+          const dataset = importContent({ json: { filename: '供地项目.json', content: JSON.stringify(geos) }})
+          setDatasetCRS(dataset, { prj: 'GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]' })
+          this.saveDataset(dataset);
+          loading.close();
+        }else{
+          this.$Message.error("查询异常，请联系管理员！");
+          loading.close();
+        }
+      })
+    },
+    saveDataset(dataset, type = 'shapefile') {
+      const fileContent = exportFileContent(dataset, { format: type })
+      this.saveFileContent(fileContent)
+    },
+    saveFileContent(fileContent) {
+      var zip = new JSZip()
+
+      fileContent.forEach(i => {
+        zip.file(i.filename, i.content)
+      })
+      zip.file('供地项目.cpg', 'UTF-8')
+      zip.generateAsync({ type: 'blob' }, function updateCallback(metadata) {
+        var msg = 'progression : ' + metadata.percent.toFixed(2) + ' %'
+        if (metadata.currentFile) {
+          msg += ', current file = ' + metadata.currentFile
+        }
+        console.log(msg)
+      }).then((blob) => {
+        // see FileSaver.js
+        saveAs(blob, '供地项目.zip')
+        console.log('done !')
+      })
+          .catch(error => console.error(error.stack))
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.page-gd-manage{
+  position: relative;
+  display: flex;
+  .page-left{
+    background: #fff;
+    border-radius: 0px 0px 0px 0px;
+    z-index: 99;
+    padding: 20px;
+    border-right:2px solid #e9e3e3;
+    .nzy-tools{
+      .panels{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+      .panel-dropdown{
+        width: 49%;
+        border-radius: 4px 4px 4px 4px;
+        .el-dropdown{
+          width: 100%;
+          .el-dropdown-link{
+            cursor: pointer;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+
+            font-family: AlibabaPuHuiTiM;
+            font-weight: normal;
+            font-size: 16px;
+            color: #3C4859;
+            line-height: 20px;
+            text-align: center;
+          }
+        }
+      }
+      .panel-input{
+        width: 49%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span{
+          font-family: AlibabaPuHuiTiM;
+          font-size: 14px;
+          color: #404A5B;
+          text-align: center;
+          width: 130px;
+        }
+        .fw{
+          width: 60px;
+          height: 36px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 4px;
+          border: 1px solid #CCD1DC;
+          color: #446AE7;
+          margin-left: 8px;
+          cursor: pointer;
+        }
+        ::v-deep{
+          .el-input__inner{
+            height: 36px;
+            line-height: 36px;
+          }
+        }
+      }
+    }
+  }
+  .page-detail{
+    background: #FFFFFF;
+    border-radius: 0px 0px 0px 0px;
+    position: absolute;
+    z-index: 999;
+    right: 0px;
+  }
+  .menus-open{
+    width: 32px;
+    height: 62px;
+    background: #E8EEFF;
+    box-shadow: 0px 2px 2px 0px rgba(55,90,178,0.2);
+    border-radius: 4px 0px 0px 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    position: absolute;
+    cursor: pointer;
+    z-index: 999;
+    i{
+      color: #4880FF;
+      font-size: 26px;
+    }
+  }
+  .page-map{
+    //position: absolute;
+    //background:#434;
+  }
+}
+</style>

YHYZT/client/src/views/DataManage/Ssnyd.vue

@@ -1,82 +1,86 @@
 <template>
-  <div class="page-gd-manage">
-    <div v-show="menusShow" class="page-left" :style="{height:contentHeight+'px',width:menusWidth+'px'}">
+  <div class="page-nzy-manage">
+    <div class="page-left" :style="{height:contentHeight+'px',width:contentWidth+'px'}">
       <div class="nzy-tools">
-        <div class="panels">
-          <div class="panel-dropdown" style="background: #F5FBFF">
-            <el-dropdown>
-              <div class="el-dropdown-link">
-                <img src="@/assets/images/datamanage/sc.png"/>
-                导入文件
-                <img src="@/assets/images/datamanage/sc-i.png"/>
+        <el-form label-width="120px" :model="paramsList">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="项目名称：">
+                <el-input v-model="paramsList.pzwh" placeholder="请输入项目名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="市：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入市"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <span></span>
+              <el-form-item label="县区：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入县区"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="备案号：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入备案号"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="备案面积：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入备案面积"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="备案时间：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入备案时间"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="用途：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入用途"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="坐落位置：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入坐落位置"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="到期时间：">
+                <el-input v-model="paramsList.pcmc" placeholder="请输入到期时间"  clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <div class="btn-group">
+                <el-button type="primary" @click="getBpxmList">查询</el-button>
+                <div class="panel-dropdown">
+                  <el-dropdown>
+                    <el-button type="success">
+                      导入文件<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item>
+                        <el-upload
+                            class="upload-demo"
+                            action=""
+                            :before-upload="beforeUpload"
+                            multiple
+                            :limit="3"
+                            :on-exceed="2"
+                            accept=".zip">
+                        &nbsp;&nbsp;批量导入&nbsp;&nbsp;
+                        </el-upload>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </div>
               </div>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <el-upload
-                      class="upload-demo"
-                      action=""
-                      :before-upload="beforeUpload"
-                      multiple
-                      :limit="3"
-                      :on-exceed="2"
-                      accept=".zip">
-                    &nbsp;&nbsp;批量导入&nbsp;&nbsp;
-                  </el-upload>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <div class="panel-dropdown" style="background: #FFFBF1">
-            <el-dropdown>
-              <div class="el-dropdown-link">
-                <img src="@/assets/images/datamanage/xz.png"/>
-                导出文件
-                <img src="@/assets/images/datamanage/xz-i.png"/>
-              </div>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <div @click="doExportExcel">
-                    导出项目Excel
-                  </div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </div>
-        <div class="panels">
-          <div class="panel-input">
-            <span>批准文号：</span>
-            <el-input v-model="paramsList.dkbh" placeholder="请输入内容" clearable></el-input>
-          </div>
-          <div class="panel-input">
-            <span>关键字：</span>
-            <el-input v-model="paramsList.dkmc" placeholder="项目名称/用地单位名称/所属板块" clearable></el-input>
-          </div>
-        </div>
-        <div class="panels">
-          <div class="panel-input">
-            <span>绘制范围：</span>
-            <div class="fw"  title="框选绘制" @click="createBoxEvent">
-              <i style="font-size: 20px" class="iconfont yh-Frame"/>
-            </div>
-            <div class="fw" title="自定义绘制"  @click="createDrawInteraction">
-              <i style="font-size: 24px" class="iconfont yh-huizhi1"/>
-            </div>
-            <div class="fw" title="图斑拾取" @click="sqFeatrue">
-              <i style="font-size: 24px" class="iconfont  yh-shiqu"/>
-            </div>
-            <div class="fw" title="清除绘制" @click="clearLayer">
-              清除
-            </div>
-          </div>
-          <div class="panel-input">
-            <span>缓冲距离：</span>
-            <el-input placeholder="请输入内容" v-model="input2">
-              <template slot="append">米</template>
-            </el-input>
-            <el-button type="primary"  style="margin-left: 8px;height: 36px" @click="getBpxmList">查询</el-button>
-          </div>
-        </div>
+            </el-col>
+          </el-row>
+        </el-form>
+
       </div>
       <div class="nzy-table">
         <el-table
@@ -87,45 +91,66 @@
             :cell-style="tableRowStyle"
             :row-click="rowClick"
             ref="report-table"
-        >
+            >
           <el-table-column
               type="index"
               width="80"
-              label="序号"/>
+              label="序号">
+          </el-table-column>
           <el-table-column
-              prop="pzwh"
-              width="100"
-              label="临时用地批准文号"/>
+              prop="pf_wh"
+              label="项目名称">
+          </el-table-column>
           <el-table-column
-              prop="xmmc"
-              label="建设项目名称"
-             />
+              prop="pf_wh"
+              label="市">
+          </el-table-column>
           <el-table-column
-              prop="pzsj"
-              label="用地批准时间">
-            <template slot-scope="scope">
-              {{new Date(scope.row.pzsj).toLocaleDateString("af")}}
-            </template>
+              prop="pf_wh"
+              label="县区">
+          </el-table-column>
+          <el-table-column
+              prop="pf_wh"
+              label="备案号">
+          </el-table-column>
+          <el-table-column
+              prop="pf_wh"
+              label="备案面积">
+          </el-table-column>
+          <el-table-column
+              prop="pf_wh"
+              label="备案时间">
+          </el-table-column>
+          <el-table-column
+              prop="pf_wh"
+              label="备注">
           </el-table-column>
           <el-table-column
               width="150"
+
               label="操作">
             <template slot-scope="scope">
               <div style="line-height: 34px;">
                 <el-button
-                    @click.native.prevent="openDetail(scope.$index, scope.row)"
-                    plain
-                    type="primary"
-                    size="mini">
+                  @click.native.prevent="openDetail(scope.$index, scope.row)"
+                  style="margin-right: 10px;"
+                  plain
+                  type="primary"
+                  size="mini">
                   查看
                 </el-button>
-                <el-button
+                <el-popconfirm
+                  title="该条数据确定删除吗？"
+                >
+                  <el-button
                     @click.native.prevent="locationDk(scope.$index, scope.row)"
                     plain
-                    type="success"
+                    type="danger"
+                    slot="reference"
                     size="mini">
-                  定位
-                </el-button>
+                    删除
+                  </el-button>
+                </el-popconfirm>
               </div>
             </template>
           </el-table-column>
@@ -139,69 +164,38 @@
               show-sizer />
       </div>
     </div>
-    <div @click="()=>{menusWidth =0;menusShow=false;detailShow=false;$refs.baseMap.resetSize();}"
-         style="top: calc(50% - 30px);left: calc( 700px - 20px);"
-         title="收起"
-         v-show="menusShow"
-         class="menus-open"
-    >
-      <i class="iconfont yh-Frame2"/>
-    </div>
-    <div @click="()=>{menusWidth =700;menusShow=true;$refs.baseMap.resetSize();}"
-         style="top: calc(50% - 30px);left: 0px;"
-         title="展开"
-         v-show="!menusShow"
-         class="menus-open"
+    <el-dialog
+      :visible.sync="detailShow"
+      title="项目详情"
+      top="5vh"
+      width="80%"
     >
-      <!--      <img src="@/assets/images/datamanage/zd.png"/>-->
-      <i class="iconfont yh-xiangyou"/>
-    </div>
-    <div v-show="detailShow" class="page-detail" :style="{height:contentHeight+'px',width:contentWidth-menusWidth+'px',left:menusWidth+'px'}">
       <detail ref="details" @initBpxm="getBpxmList" :contentWidth="contentWidth-menusWidth" :contentHeight="contentHeight" :project="currProject"/>
-    </div>
-    <div @click="()=>{detailShow=false;}"
-         style="top: calc(50% - 30px);right: 0px"
-         title="展开"
-         v-show="detailShow"
-         class="menus-open"
-    >
-      <i class="iconfont yh-Frame2"/>
-    </div>
-    <div class="page-map" :style="{height:contentHeight+'px',width: contentWidth-menusWidth-30+'px'}" >
-      <base-map ref="baseMap" :overlayShow="true" @showDetail="showDetail" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
-    </div>
+    </el-dialog>
   </div>
 </template>
-
 <script>
-import mapshaper from "mapshaper";
-import BaseMap from "../../components/common/BaseMap";
-import Detail from "./ssnyd/Detail";
-const {
-  importContent,
-  setDatasetCRS,
-  exportFileContent
-} = mapshaper.internal
+import Detail from "./nzy/Detail";
+import JSZip from 'jszip'
+import { saveAs } from 'file-saver'
 export default {
-  name: "Lsyd",
+  name: "Nzy",
   props:{
     contentWidth:Number,
     contentHeight:Number
   },
-  components:{BaseMap,Detail},
+  components:{Detail},
   data() {
     return {
       compName: 'data-manage',
-      visibleLayerId:['YHYZT_SSNYD'],
       menus:JSON.parse(window.sessionStorage.getItem('yzt-user')),
       menusWidth:700,
-      menusShow:true,
       detailShow:false,
       tableData:{
         data:[],
       },
       currProject:null,
-      paramsList:{dkbh:'',dkmc:'',page:1,size:15,total:0},
+      paramsList:{pzwh:'',pcmc:'',page:1,size:15,total:0},
       fullscreenLoading: false,
       drawShapeJson:null,
     }
@@ -210,28 +204,30 @@ export default {
     this.getBpxmList();
   },
   methods: {
-    createBoxEvent(){
-      this.$refs.baseMap.createBoxEvent();
-    },
-    sqFeatrue(){
-      this.$refs.baseMap.sqFeatrue();
-    },
-    //自定义绘制分析
-    createDrawInteraction(){
-      this.$refs.baseMap.drawInteractionEvent();
-    },
-    //清除绘制图层
-    clearLayer(){
-      this.$refs.baseMap.cleanLayer();
-      this.drawShapeJson = null;
-      this.getBpxmList();
-    },
-    drawShapeJsonEvent(json){
-      if(json){
-        this.drawShapeJson = json;
-        this.getBpxmList();
-        this.$message.success("绘制结束");
+    //处理内容变化记录信息
+    recordInfo(type,name,content){
+      let info = {};
+      info.re_recorder = this.menus.userInfo.orgName;
+      info.table_type = '农转用导入';
+      info.re_content='';
+      let _this = this;
+      info.re_name = name;
+      if(type=='input'){
+        info.re_content ='导入项目文件名：'+content;
+      }else{
+        info.re_content ='导出文件名：'+content;
       }
+      let params = new FormData();
+      params.append('data',JSON.stringify(info))
+      //执行持久化操作（记录入库）
+      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
+        const {success,data} = res;
+        if(success){
+          this.$message.success("操作成功！")
+        }else{
+          this.$message.error("操作失败！")
+        }
+      })
     },
     pageChange:function (page){
       this.paramsList.page=page;
@@ -270,25 +266,15 @@ export default {
     },
     openDetail(index,row){
       this.currProject = row;
-      this.detailShow =true;
-      this.$refs.details.activeName='first';
-    },
-    showDetail(item){
-      let params = new FormData();
-      params.append("guid",item.index_id);
-      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.openDetail(0,data);
-        }
-      })
+      this.detailShow = true;
+      this.$refs['details'].initDetailData()
     },
     locationDk(index,row){
-      if(row.objectid){
+      if(row.dk_bh){
         this.detailShow = false;
-        let dkbhArr = row.objectid?row.objectid:'';
-        let arr = "'"+dkbhArr+"'";
-        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `objectid in (${arr})`)
+        let dkbhArr = row.dk_bh?row.dk_bh.split(","):'';
+        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
+        this.$vm.$emit('locationGlobal', 'YHYZT_NZYDK_NEW', `index_id in (${arr.join()})`)
         //this.$message.warning("暂无图形")
       }
     },
@@ -310,31 +296,6 @@ export default {
         return false;
       }
     },
-    //处理内容变化记录信息
-    recordInfo(type,name,content){
-      let info = {};
-      info.re_recorder = this.menus.userInfo.orgName;
-      info.table_type = '设施农用地导入';
-      info.re_content='';
-      let _this = this;
-      info.re_name = name;
-      if(type=='input'){
-        info.re_content ='导入项目文件名：'+content;
-      }else{
-        info.re_content ='导出文件名：'+content;
-      }
-      let params = new FormData();
-      params.append('data',JSON.stringify(info))
-      //执行持久化操作（记录入库）
-      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.$message.success("操作成功！")
-        }else{
-          this.$message.error("操作失败！")
-        }
-      })
-    },
     doInput(file){
       let params = new FormData();
       params.append("file",file);
@@ -353,82 +314,13 @@ export default {
         }
       })
     },
-    doExportExcel(){
-      try {
-        const $e = this.$refs['report-table'].$el
-        let $table = $e.querySelector('.el-table__fixed')
-        if(!$table) {
-          $table = $e
-        }
-        const wb = XLSX.utils.table_to_book($table, {raw:true})
-        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
-        saveAs(
-            new Blob([wbout],{type: 'application/octet-stream'}),
-            `设施农用地列表.xlsx`,
-        )
-        this.recordInfo("export","设施农用地导出","设施农用地列表.xlsx")
-      } catch (e) {
-        if (typeof console !== 'undefined') console.error(e)
-      }
-    },
-    doExport(){
-      let params = new FormData();
-      params.append("dkbh",this.paramsList.dkbh);
-      params.append("dkmc",this.paramsList.dkmc);
-      if(this.drawShapeJson){
-        params.append("shapes",JSON.stringify(this.drawShapeJson));
-      }
-      const loading = this.$loading({
-        lock: true,
-        text: '正在导出',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      this.$ajax.post('/api/data/manage/gd/exportGdShapeFile', params, this).then(res => {
-        const {success, data} = res;
-        if(success){
-          if(data.length<=0) {
-            loading.close();
-            return;
-          };
-          const geos = {
-            'type': 'FeatureCollection',
-            'features': []
-          }
-          data.map(i=>{
-            let geoT = {
-              type: 'Feature',
-              geometry: {},
-              properties: {}
-            }
-            const geo = WkxGeometry.parse(i.geomText).toGeoJSON()
-            geoT.geometry = { ...geo }
-            delete i.shape
-            delete i.geomText
-            geoT['properties'] = i
-            geos.features.push(geoT)
-          })
-          const dataset = importContent({ json: { filename: '供地项目.json', content: JSON.stringify(geos) }})
-          setDatasetCRS(dataset, { prj: 'GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]' })
-          this.saveDataset(dataset);
-          loading.close();
-        }else{
-          this.$Message.error("查询异常，请联系管理员！");
-          loading.close();
-        }
-      })
-    },
-    saveDataset(dataset, type = 'shapefile') {
-      const fileContent = exportFileContent(dataset, { format: type })
-      this.saveFileContent(fileContent)
-    },
     saveFileContent(fileContent) {
       var zip = new JSZip()
 
       fileContent.forEach(i => {
         zip.file(i.filename, i.content)
       })
-      zip.file('供地项目.cpg', 'UTF-8')
+      zip.file('农转用项目.cpg', 'UTF-8')
       zip.generateAsync({ type: 'blob' }, function updateCallback(metadata) {
         var msg = 'progression : ' + metadata.percent.toFixed(2) + ' %'
         if (metadata.currentFile) {
@@ -437,7 +329,7 @@ export default {
         console.log(msg)
       }).then((blob) => {
         // see FileSaver.js
-        saveAs(blob, '供地项目.zip')
+        saveAs(blob, '农转用项目.zip')
         console.log('done !')
       })
           .catch(error => console.error(error.stack))
@@ -446,7 +338,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.page-gd-manage{
+.page-nzy-manage{
   position: relative;
   display: flex;
   .page-left{
@@ -456,63 +348,14 @@ export default {
     padding: 20px;
     border-right:2px solid #e9e3e3;
     .nzy-tools{
-      .panels{
-        width: 100%;
+      .btn-group {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 20px;
       }
       .panel-dropdown{
-        width: 49%;
+        margin-left: 10px;
         border-radius: 4px 4px 4px 4px;
         .el-dropdown{
           width: 100%;
-          .el-dropdown-link{
-            cursor: pointer;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-            font-size: 16px;
-            color: #3C4859;
-            line-height: 20px;
-            text-align: center;
-          }
-        }
-      }
-      .panel-input{
-        width: 49%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        span{
-          font-family: AlibabaPuHuiTiM;
-          font-size: 14px;
-          color: #404A5B;
-          text-align: center;
-          width: 130px;
-        }
-        .fw{
-          width: 60px;
-          height: 36px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 4px;
-          border: 1px solid #CCD1DC;
-          color: #446AE7;
-          margin-left: 8px;
-          cursor: pointer;
-        }
-        ::v-deep{
-          .el-input__inner{
-            height: 36px;
-            line-height: 36px;
-          }
         }
       }
     }
@@ -524,24 +367,6 @@ export default {
     z-index: 999;
     right: 0px;
   }
-  .menus-open{
-    width: 32px;
-    height: 62px;
-    background: #E8EEFF;
-    box-shadow: 0px 2px 2px 0px rgba(55,90,178,0.2);
-    border-radius: 4px 0px 0px 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    position: absolute;
-    cursor: pointer;
-    z-index: 999;
-    i{
-      color: #4880FF;
-      font-size: 26px;
-    }
-  }
   .page-map{
     //position: absolute;
     //background:#434;

YHYZT/client/src/views/DataManage/lsyd/Detail.vue

@@ -1,724 +1,150 @@
 <template>
   <div class="xm-detal">
-    <el-tabs v-model="activeName" @tab-click="tabClick" :style="{width:contentWidth+'px'}">
-      <el-tab-pane label="临时用地信息卡" name="first">
-        <div class="content">
-          <div class="head">
-            <div class="title">
-              <div></div>
-              <span>属性数据</span>
-            </div>
-            <div class="handler-btn">
-              <div v-show="showMap" @click="showMap=false">
-                <i class="iconfont yh-sheshinongyongdi"  style="color: #44CAE7"/>
-                <span>查看项目</span>
-              </div>
-              <div v-show="!showMap" @click="openXmLoc" >
-                <i class="iconfont yh-dingwei1"  style="font-size: 20px;color: rgb(237 115 5);"/>
-                <span>查看位置</span>
-              </div>
-              <div v-show="!jbxxEdit && !showMap" @click="()=>{jbxxEdit=true;}">
-                  <i class="iconfont yh-bianji" style="color: #5988FF"/>
-                  <span>开始编辑</span>
-              </div>
-              <div  v-show="jbxxEdit && !showMap" @click="updateBpxm">
-                <i class="iconfont yh-baocun"  style="color: #44CAE7"/>
-                <span>保存项目</span>
-              </div>
-              <div v-show="!showMap" @click="deletePc">
-                <i class="iconfont yh-shanchu"  style="color: #F0A123"/>
-                <span>删除项目</span>
-              </div>
-            </div>
-          </div>
-          <div v-if="!showMap" class="tables" :style="{height:contentHeight-140+'px'}">
-            <table>
-              <tr>
-                <th>所属行政区</th>
-                <td ><el-input v-model="currProject.xzqmc" placeholder="行政区" clearable :disabled="!jbxxEdit" /></td>
-                <th>所在镇街</th>
-                <td ><el-input v-model="currProject.ssxz" placeholder="所在镇街" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>组织机构代码</th>
-                <td colspan="3">
-                  <el-input v-model="currProject.zzjgdm" placeholder="组织机构代码" clearable :disabled="!jbxxEdit"/>
-                </td>
-              </tr>
-              <tr>
-                <th>建设项目名称</th>
-                <td ><el-input v-model="currProject.xmmc" placeholder="建设项目名称" clearable :disabled="!jbxxEdit"/></td>
-                <th>用地单位名称</th>
-                <td ><el-input v-model="currProject.yddw" placeholder="用地单位名称" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>所属板块</th>
-                <td ><el-input v-model="currProject.ssbk" placeholder="所属板块" clearable :disabled="!jbxxEdit"/></td>
-                <th>地块坐落</th>
-                <td ><el-input v-model="currProject.zlwz" placeholder="地块坐落" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>批准面积</th>
-                <td  ><el-input v-model="currProject.pzmj" placeholder="批准面积" clearable :disabled="!jbxxEdit"/></td>
-                <th>临时用地批复文号</th>
-                <td >
-                  <el-input v-model="currProject.pzwh" placeholder="临时用地批复文号" clearable :disabled="!jbxxEdit"/>
-                </td>
-              </tr>
-              <tr>
-                <th>其中耕地面积</th>
-                <td><el-input v-model="currProject.qzgdmj" placeholder="其中耕地面积" clearable :disabled="!jbxxEdit"/></td>
-                <th>其中农用地面积</th>
-                <td><el-input v-model="currProject.qznydmj" placeholder="其中农用地面积" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>批准时间</th>
-                <td >
-                  <el-date-picker
-                      v-model="currProject.pzsj"
-                      clearable :disabled="!jbxxEdit"
-                      type="date"
-                      placeholder="批准时间">
-                  </el-date-picker>
-                </td>
-                <th>到期时间</th>
-                <td >
-                  <el-date-picker
-                      v-model="currProject.dqsj"
-                      clearable :disabled="!jbxxEdit"
-                      type="date"
-                      placeholder="到期时间">
-                  </el-date-picker>
-                </td>
-              </tr>
-              <tr>
-                <th >续期时间</th>
-                <td>
-                  <el-date-picker
-                      v-model="currProject.xqsj"
-                      clearable :disabled="!jbxxEdit"
-                      type="date"
-                      placeholder="续期时间">
-                  </el-date-picker>
-                </td>
-                <th >使用年限</th>
-                <td><el-input v-model="currProject.synx" placeholder="使用年限" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>复垦主体</th>
-                <td>
-                  <el-input v-model="currProject.fkzt" placeholder="复垦主体" clearable :disabled="!jbxxEdit"/>
-                </td>
-                <th>复垦保证金</th>
-                <td ><el-input v-model="currProject.fkbzj" placeholder="复垦保证金" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>备注</th>
-                <td colspan="3"><el-input v-model="currProject.bz" placeholder="备注" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-            </table>
-          </div>
-          <div v-else class="content-map" :style="{height:contentHeight-100+'px',width: contentWidth+'px'}" >
-            <base-map  ref="basemap" :visibleLayerIds="visibleLayerId"/>
-          </div>
+    <el-tabs type="border-card" v-model="currentTab">
+      <el-tab-pane label="项目信息" name="tab1">
+        <div class="tables">
+          <table>
+            <tr>
+              <th>项目名称</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>批复文号</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>用地单位</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>批准面积</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+            <tr>
+              <th>批准单位</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>坐落位置</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>入库年份</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>审批时间</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+            <tr>
+              <th>到期时间</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>入库时间</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>入库人员</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>备注</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+          </table>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="附件信息" name="second">
-        <div class="content flex" :style="{height:contentHeight+'px'}">
-          <div class="btns" style="width: 30%">
-            <div class="btn flex-between" v-for="item in treeList" :key="item.value" :class="item.value==treeSelected?'selected':''" @click="fileChange(item)">
-              <div class="flex-between">
-                <img src="@/assets/images/datamanage/folder.png"/>
-                {{item.folderName}}
-              </div>
-              <el-upload
-                  class="upload-demo"
-                  action=""
-                  :before-upload="annexUpload"
-                  accept=".pdf,.png,.jpeg,.jpg"
-                  :show-file-list="false">
-                <div style="
-                  width: 40px;
-                  height: 26px;
-                  border: 1px solid;
-                  line-height: 26px;
-                  border-radius: 4px;"
-                     title="上传材料">
-                  <i class="iconfont yh-shangchuan" style="font-size: 20px"/>
-                </div>
-              </el-upload>
-            </div>
-          </div>
-          <div class="files" v-if="fileList.length>0">
-            <div  class="file" v-for="(item,index) in fileList" :key="index">
-              <div>
-                <span>{{item.filename}}</span>
-                <span>{{new Date(item.createtime).toLocaleDateString("af")}}</span>
-              </div>
-              <div>
-                <i title="预览" class="iconfont yh-fujianxiangqing" @click="viewFile(item)"/>
-                <div class="zw"/>
-                <i title="删除" class="iconfont yh-shanchufujian" @click="deletefile(item)"/>
-              </div>
-            </div>
-          </div>
-          <div class="fileList" style="width: 70%" v-else>
-            <el-empty description="暂无相关附件"/>
-          </div>
+      <el-tab-pane label="查看地图" name="tab2">
+        <div class="map_box">
+          <base-map ref="baseMap" v-if="currentTab === 'tab2'" :overlayShow="true" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
         </div>
       </el-tab-pane>
     </el-tabs>
-    <Modal
-        v-model="modal"
-        class-name="modalClass"
-        title="操作提醒">
-      <p style="text-align: center"><Icon type="md-alert" style="color: #ff9900;font-size: 20px;margin-right: 3px"/>确定对此附件进行【删除】操作？</p>
-    </Modal>
   </div>
 </template>
 
 <script>
 import BaseMap from "../../../components/common/BaseMap";
 export default {
-name: "Detail",
-  components:{BaseMap},
-  data(){
-  return{
-    user:JSON.parse(window.sessionStorage.getItem('yzt-user')),
-    activeName:'first',
-    jbxxEdit:false,
-    visibleLayerId:['YHYZT_NZYDK_NEW'],
-    treeList:[
-      {folderName:'附件目录',value:"mzybp"}
-    ],
-    treeSelected:'mzybp',
-    fileList:[
-      // {fileName:'一号',url:'112.pdf',time:'2024-01-01 12:00'},
-      // {fileName:'二号',url:'112.pdf',time:'2024-01-01 12:00'},
-    ],
-    modal:false,
-    showMap:false,
-    tableData:[],
-    currProject:{
-      xmmc:'',
-      xmlx:'',
-      zblx:'',
-      pdcz:'',
-      xmbh:'',
-      sqdw:'',
-      pzjg:'',
-      szx:'余杭区',
-      zbjb:'',
-      zbnd:'',
-      pzwh:'',
-      pzrq:'',
-      sjgswh:'',
-      sqyj:'',
-      sqrq:'',
-      sfcmjf:'',
-      kxxmsbsjzj:'',
-      xmmj:0,
-      tbdw:'',
-      sqydfw:'',
-      tbr:'',
-      shr:'',
-      sflstd:'',
-      tzxmdm:'',
-      zsggh:'',
-      pczyyt:''
-    },
-    oldProject:{},
-    xmdkInfo:{
-      data:[{xm_bh:''}],
-      page:1,
-      size:30,
-      total:0,
-      currDk:{},
-      xmdkSelected:'',
-    },
-    staticData:window.ApplicationConfig.staticData
-  }
+  name: "Detail",
+  components: { BaseMap },
+  data() {
+    return {
+      user: JSON.parse(window.sessionStorage.getItem("yzt-user")),
+      currentTab: 'tab1',
+      visibleLayerId:['YHYZT_LSYD'],
+      detailData: {},
+    };
   },
-  props:{
-    contentWidth:Number,
-    contentHeight:Number,
-    project:Object
+  props: {
+    contentWidth: Number,
+    contentHeight: Number,
+    project: Object,
   },
-  watch:{
-    project(val){
-      //this.activeName='first';
-      this.currProject = val;
-      this.oldProject = { ...val };
-    }
+  watch: {
+    
   },
-  methods:{
-    deleteFiles(fileid){
-      let params = new FormData();
-      params.append("fileid",fileid);
-      this.$ajax.post('/api/data/upload/nzy/delfile', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.fileList = data;
-        }
-      })
-    },
-    viewFile(data) {
-      let filetype = data.filename.split(".");
-      let type = filetype[filetype.length-1].toLowerCase();
-      if (type == 'pdf' || type == 'doc' || type == 'docx' || type == 'xls') {
-        this.getPdfStream(data.fileurl, data.filename)
-      }
-      if (type == 'jpg' || type == 'png' || type == 'jpeg') {
-        this.getJpgStream(data.fileurl, data.filename)
-      }
-    },
-    getPdfStream(path) {
-      let params = new FormData()
-      params.append('path', path)
-      this.$ajax.downLoadFile('/api/data/upload/getPdfStream', params, this).then(res => {
-        const blob = new Blob([res.data], {type: "application/pdf"})
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.target = '_blank'
-        link.href = URL.createObjectURL(blob)
-        document.body.appendChild(link)
-        link.click()
-        URL.revokeObjectURL(link.href)
-        document.body.removeChild(link)
-      })
-    },
-    getJpgStream(path) {
-      let params = new FormData()
-      params.append('path', path)
-      this.$ajax.downLoadFile('/api/data/upload/getJpgStream', params, this).then(res => {
-        const blob = new Blob([res.data], {type: "image/jpeg"})
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.target = '_blank';
-        link.href = URL.createObjectURL(blob)
-        document.body.appendChild(link)
-        link.click()
-        URL.revokeObjectURL(link.href)
-        document.body.removeChild(link)
-      })
-    },
-    initFileList(){
-      let params = new FormData();
-      params.append("folderName",this.treeSelected);
-      params.append("xmid",this.currProject.xm_guid);
-      this.fileList =[];
-      this.$ajax.post('/api/data/upload/nzy/getFileList', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.fileList = data;
-        }
-      })
-    },
-    //附件上传
-    annexUpload(file){
-      if(file){
-        this.uploadAnnex(file);
-      }
-      return false;
+  methods: {
+    initDetailData () {
+      this.currentTab = 'tab1'
     },
-    uploadAnnex(file){
+    showDetail(item){
       let params = new FormData();
-      params.append("file",file);
-      params.append("xmId",this.currProject.xm_guid);
-      params.append("folderName",this.treeSelected);
-      this.$ajax.post('/api/data/upload/nzy/annex', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.$message({type: 'success',message: '上传成功!'});
-          this.initFileList();
-        }
-      })
-    },
-    //删除批次
-    deletePc(){
-      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        let params = new FormData();
-        params.append("lsyd",JSON.stringify(this.currProject));
-        this.$ajax.post('/api/data/manage/lsyd/delOneLsyd', params, this).then(res => {
-          const {success, data} = res;
-          if(success && data>0){
-            this.recordInfo('del','临时用地删除',this.currProject.objectid);
-            this.$parent.getBpxmList();
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        });
-      });
-    },
-    tabClick(tab){
-      if(tab.index==1){
-        this.getBpxmDetail();
-      }else if(tab.index==2){
-        this.initFileList();
-      }
-    },
-    openXmLoc(){
-      this.showMap =true;
-      let arr = this.currProject.objectid;
-      let _this = this;
-      setTimeout(() => {
-        _this.$refs.basemap.locationGlobal('YHYZT_LSYD',`objectid = '${arr}'`);
-      }, 500);
-    },
-    getBpxmDetail(){
-      this.jbxxEdit = false;
-      let params = new FormData();
-      params.append("page",this.xmdkInfo.page);
-      params.append("size",this.xmdkInfo.size);
-      params.append("bpxmId",this.currProject.xm_guid);
-      this.xmdkInfo.data =[];
-      this.xmdkInfo.total=0;
-      let _this = this;
-      this.$ajax.post('/api/data/manage/nzy/getBpxmDetail', params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.xmdkInfo.data = data.list;
-          this.xmdkInfo.total = data.total;
-          this.xmdkInfo.currDk = data.list?this.xmdkInfo.data[0]:{};
-          this.xmdkInfo.xmdkSelected = data.list?this.xmdkInfo.data[0].xm_bh:'';
-        }else{
-          this.$message.error("查询失败！")
-        }
-      })
-    },
-    updateBpxm(){
-      this.jbxxEdit = false;
-      let params = new FormData();
-      params.append("project",JSON.stringify(this.currProject));
-      let _this = this;
-      this.$ajax.post('/api/data/manage/lsyd/editOneLsyd', params, this, true).then(res => {
+      params.append("guid",item.index_id);
+      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
         const {success,data} = res;
         if(success){
-         this.initBpxm();
-         this.recordInfo('edit','临时用地修改');
-        }else{
-          this.$message.error("修改失败！")
+          this.openDetail(0,data);
         }
       })
     },
-    initBpxm(){},
-    //附件材料切换
-    fileChange(item){
-      this.treeSelected =item.value;
-      this.files = this.fileList[item.value];
-    },
-    //删除材料
-    deletefile(item){
-      this.$confirm('此操作将永久删除该附件, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        let params = new FormData();
-        params.append("fileid",item.id);
-        params.append("fileUrl",item.fileurl);
-        this.$ajax.post('/api/data/upload/nzy/delfile', params, this).then(res => {
-          const {success, data} = res;
-          if(success && data){
-            this.fileList = data;
-            this.initFileList();
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        });
-      });
-    },
-    /**
-     * 表格样式
-     * @param row
-     * @param rowIndex
-     * @returns {string}
-     */
-    tableRowStyle({row, rowIndex}) {
-      if (rowIndex%2 === 1) {
-        return 'text-align:center;background:#F7F8FA';
-      }else{
-        return 'text-align:center;';
+    locationDk(index,row){
+      if(row.pewg_id){
+        this.detailShow = false;
+        let dkbhArr = row.pewg_id?row.pewg_id.split(","):'';
+        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
+        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `xm_guid in (${arr.join()})`)
+        //this.$message.warning("暂无图形")
       }
     },
-    tableHeaderStyle(){
-      return 'background:#E5EDFE; font-family:AlibabaPuHuiTiR; font-size:16px; color:rgba(51, 51, 51, 1);text-align:center;';
-    },
-    //处理内容变化记录信息
-    recordInfo(type,name,id){
-      let info = {};
-      info.re_recorder = this.user.userInfo.orgName;
-      info.table_type = '临时用地管理';
-      info.re_content='';
-      let _this = this;
-      info.re_name = name;
-      if(type=='edit'){
-        Object.keys(this.currProject).forEach(function(key) {
-          if(_this.currProject[key]!=_this.oldProject[key]){
-            info.re_content += '字段'+key+'内容由'+_this.oldProject[key]+'改为'+_this.currProject[key]+';';
-          }
-        });
-      }else if(type=='del'){
-        info.re_content ='删除主键为：'+id;
-      }
-      if(info.re_content==''){
-        this.$message.success("编辑成功！")
-        return;
+    drawShapeJsonEvent(json){
+      if(json){
+        this.drawShapeJson = json;
+        this.getBpxmList();
+        this.$message.success("绘制结束");
       }
-      let params = new FormData();
-      params.append('data',JSON.stringify(info))
-      //执行持久化操作（记录入库）
-      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
-        const {success,data} = res;
-        if(success && type=="edit"){
-          this.$message.success("编辑成功！")
-        }else if(success && type=="del"){
-          this.$message.success("删除成功！")
-        }else{
-          this.$message.error("编辑失败！")
-        }
-      })
-    }
+    },
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-  .xm-detal{
-    padding-top: 20px;
-    ::v-deep{
-      .el-tabs__nav-scroll{
-        display: flex;
-        justify-content: center;
-        .el-tabs__item{
-          padding:0px 60px;
-          font-size: 16px;
-        }
-        .el-tabs__item.is-active{
-          color: #446AE7;
-          font-weight: bold;
-        }
-        .el-tabs__active-bar{
-          height: 4px;
-          width: 56px;
-          background: #446AE7;
-          border-radius: 0px 0px 0px 0px;
-        }
-      }
-      .el-upload-list{
-        position: absolute;
-        top: 200px;
-        left: 20px;
-      }
-    }
-
-    .head{
-      padding: 0px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .title{
-        display: flex;
-        align-items: center;
-        div{
-          width: 6px;
-          height: 18px;
-          background: #5988FF;
-          border-radius: 1px 1px 1px 1px;
-        }
-        span{
-          font-family: AlibabaPuHuiTiM;
-          font-weight: 500;
-          font-size: 16px;
-          color: #1F2F47;
-          margin-left: 10px;
-        }
-      }
-      .handler-btn{
-        display: flex;
-        >div{
-          width: 102px;
-          height: 30px;
-          background: #E8F0FF;
-          border-radius: 4px 4px 4px 4px;
-          border: 1px solid #C2D8FF;
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-          margin-left: 8px;
-          cursor: pointer;
-          i{
-            font-size: 16px;
-          }
-          span{
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-            font-size: 14px;
-            color: #333333;
-          }
-        }
-      }
-    }
-    .content{
-      .tables{
-        padding: 0px 20px;
-        width: 100%;margin-top: 15px;
-        overflow-y: auto;
-        table{
-          width: 100%;
-          border-collapse: collapse;
-          tr,th,td{
-            border:1px solid #D6D6D6;
-            height: 40px;
-            font-size: 14px;
-            color: #1F2F47;
-          }
-          th{
-            width: 16%;
-            background: #F4F6F8;
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-          }
-          td{
-            width: 16%;
-            padding: 0px 5px;
-          }
-        }
-        ::v-deep{
-          .el-input__inner{
-            //border:1px solid #fff;
-            border-radius:0px;
-            border-color: transparent;
-          }
-        }
-      }
-      .btns{
-        width:100%;
-        height: calc(92% - 90px);
-        overflow-y: auto;
-        border-right: 1px solid #D2DAE6;
-        .btn{
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          height: 40px;
-          margin: 5px 0px;
-
-          font-family: AlibabaPuHuiTiM;
-          font-weight: normal;
-          font-size: 16px;
-          color: #666666;
-          padding: 0px 10px;
-          img{
-            width: 26px;
-            margin-right: 10px;
-          }
-          &.selected{
-            background: #F0F6FC;
-            border-radius: 4px 4px 4px 4px;
-            color: #446AE7;
-            .el-upload{
-              color: #19be6b;
-            }
-          }
-        }
-      }
-      .files{
-        width: 70%;
-        .file{
-          display: flex;
-          justify-content: space-between;
-          padding: 0px 10px;
-          margin: 20px 0px;
-          >div:first-child{
-            display: flex;
-            display: flex;
-            flex-direction: column;
-            align-items: baseline;
-            line-height: 20px;
-            span:nth-child(1){
-              font-family: AlibabaPuHuiTiM;
-              font-weight: normal;
-              font-size: 14px;
-              color: #172339;
-              line-height: 16px;
-            }
-            span:nth-child(2){
-              font-family: AlibabaPuHuiTiR;
-              font-weight: normal;
-              font-size: 12px;
-              color: #91969B;
-            }
-          }
-          >div:nth-child(2){
-            display: flex;
-            align-items: center;
-            .zw{
-              width: 2px;
-              height: 18px;
-              background: #CCD1DC;
-              margin: 0 8px;
-            }
-            i{
-              color: #8d9093;
-              font-size: 20px;
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-    .content-map{
-      padding: 20px;
-      border-radius: 6px;
-      ::v-deep{
-        .vl-tool-bar{
-          margin: 50px 20px 0 0;
-        }
-      }
-    }
+.xm-detal {
+  width: 100%;
+  .map_box {
+    width: 100%;
+    height: 600px;
   }
-  ::v-deep{
-    .modalClass{
-      .ivu-modal-content{
-        border-radius: 12px;
-      }
-      .ivu-modal-header{
-        border-radius: 12px 12px 0px 0px;
-        background: linear-gradient( 180deg, #DEEBFF 0%, #FFFFFF 100%);
-        border-bottom:none;
-        .ivu-modal-header-inner{
-          font-family: AlibabaPuHuiTiM;
-          font-weight: normal;
-          font-size: 18px;
-          color: #181B1F;
-        }
-      }
-      .ivu-modal-body{
+  .tables {
+    width: 100%;
+    overflow-y: auto;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      tr,
+      th,
+      td {
+        border: 1px solid #d6d6d6;
+        height: 40px;
+        font-size: 14px;
+        color: #1f2f47;
+        padding: 0px 10px;
+      }
+      th {
+        width: 155px;
+        background: #f4f6f8;
         font-family: AlibabaPuHuiTiM;
         font-weight: normal;
-        font-size: 18px;
-        color: #000000;
+        &.title {
+          text-align: left;
+          background: #fff;
+          font-size: 16px;
+        }
       }
-      .ivu-modal-close .ivu-icon-ios-close{
-        font-weight: bold;
-        color: #181B1F;
+      td {
+        padding: 0px 5px;
       }
-      .ivu-modal-footer{
-        border-top: none;
+    }
+    ::v-deep {
+      .el-input__inner {
+        //border:1px solid #fff;
+        border-radius: 0px;
+        border-color: transparent;
       }
     }
   }
+}
 </style>

YHYZT/client/src/views/DataManage/pewg/Detail.vue

@@ -1,733 +1,184 @@
 <template>
   <div class="xm-detal">
-    <el-tabs v-model="activeName" @tab-click="tabClick" :style="{width:contentWidth+'px'}">
-      <el-tab-pane label="批而未供信息卡" name="first">
-        <div class="content">
-          <div class="head">
-            <div class="title">
-              <div></div>
-              <span>属性数据</span>
-            </div>
-            <div class="handler-btn">
-              <div v-show="showMap" @click="showMap=false">
-                <i class="iconfont yh-sheshinongyongdi"  style="color: #44CAE7"/>
-                <span>查看项目</span>
-              </div>
-<!--              <div v-show="!showMap" @click="openXmLoc" >
-                <i class="iconfont yh-dingwei1"  style="font-size: 20px;color: rgb(237 115 5);"/>
-                <span>查看位置</span>
-              </div>-->
-              <div v-show="!jbxxEdit && !showMap" @click="()=>{jbxxEdit=true;}">
-                  <i class="iconfont yh-bianji" style="color: #5988FF"/>
-                  <span>开始编辑</span>
-              </div>
-              <div  v-show="jbxxEdit && !showMap" @click="updateBpxm">
-                <i class="iconfont yh-baocun"  style="color: #44CAE7"/>
-                <span>保存项目</span>
-              </div>
-              <div  @click="showMap=false">
-                <i class="iconfont yh-dikuai"  style="color: #35D173"/>
-                <span>供应出库</span>
-              </div>
-              <div v-show="!showMap" @click="deletePc">
-                <i class="iconfont yh-shanchu"  style="color: #F0A123"/>
-                <span>删除项目</span>
-              </div>
-            </div>
-          </div>
-          <div v-if="!showMap" class="tables" :style="{height:contentHeight-140+'px'}">
-            <table>
-              <tr>
-                <th>地块名称</th>
-                <td colspan="2"><el-input v-model="currProject.dk_mc" placeholder="地块名称" clearable :disabled="!jbxxEdit" /></td>
-                <th>所在镇街</th>
-                <td colspan="2"><el-input v-model="currProject.xzqmc" placeholder="所在镇街" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>所属平台</th>
-                <td colspan="2"><el-input v-model="currProject.pt" placeholder="所属平台" clearable :disabled="!jbxxEdit"/></td>
-                <th>地块编号</th>
-                <td colspan="2"><el-input v-model="currProject.dk_bh" placeholder="所属平台" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>地块坐落</th>
-                <td colspan="5"><el-input v-model="currProject.tdzl" placeholder="土地坐落" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>批复文号</th>
-                <td  colspan="2"><el-input v-model="currProject.pf_wh" placeholder="用地单位名称" clearable :disabled="!jbxxEdit"/></td>
-                <th>指标类型</th>
-                <td colspan="2">
-                  <el-select v-model="currProject.nzy_zblx" placeholder="请选择项目类型"  clearable :disabled="!jbxxEdit">
-                    <el-option
-                        style="width: 100%"
-                        v-for="item in staticData.指标类型"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                    </el-option>
-                  </el-select>
-                </td>
-              </tr>
-              <tr>
-                <th>原规划用途</th>
-                <td><el-input v-model="currProject.td_yt" placeholder="原规划用途" clearable :disabled="!jbxxEdit"/></td>
-                <td><el-input v-model="currProject.td_yt" placeholder="原规划用途" clearable :disabled="!jbxxEdit"/></td>
-                <th>现规划用途</th>
-                <td><el-input v-model="currProject.td_yt_current" placeholder="现规划用途" clearable :disabled="!jbxxEdit"/></td>
-                <td><el-input v-model="currProject.td_yt_current" placeholder="现规划用途" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>批准面积</th>
-                <td><el-input v-model="currProject.pz_mj" placeholder="批准面积" clearable :disabled="!jbxxEdit"/></td>
-                <th>剩余面积</th>
-                <td><el-input v-model="currProject.dk_mj" placeholder="剩余面积" clearable :disabled="!jbxxEdit"/></td>
-                <th>图上编号</th>
-                <td><el-input v-model="currProject.tf_bh" placeholder="图上编号" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>地块现状</th>
-                <td colspan="2"><el-input v-model="currProject.dk_xz" placeholder="地块现状" clearable :disabled="!jbxxEdit"/></td>
-                <th>拟处置时间</th>
-                <td colspan="2">
-                  <el-date-picker
-                      v-model="currProject.nczsj"
-                      clearable :disabled="!jbxxEdit"
-                      type="date"
-                      placeholder="拟处置时间">
-                  </el-date-picker>
-                </td>
-              </tr>
-              <tr>
-                <th colspan="2">征地拆迁情况</th>
-                <td><el-input v-model="currProject.zdcq_qk" placeholder="征地拆迁情况" clearable :disabled="!jbxxEdit"/></td>
-                <th colspan="2">其他选项说明</th>
-                <td><el-input v-model="currProject.bz1" placeholder="其他选项说明" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th colspan="6">土地利用价值分析</th>
-              </tr>
-              <tr>
-                <th>无利用价值</th>
-                <td>
-                  <el-input v-model="currProject.wlyjz" placeholder="无利用价值" clearable :disabled="!jbxxEdit"/>
-                </td>
-                <th>其他选项说明</th>
-                <td colspan="3"><el-input v-model="currProject.bz2" placeholder="其他选项说明" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>有利用价值</th>
-                <td><el-input v-model="currProject.ylyjz" placeholder="有利用价值" clearable :disabled="!jbxxEdit"/></td>
-                <th>其他选项说明</th>
-                <td colspan="3"><el-input v-model="currProject.bz3" placeholder="其他选项说明" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-              <tr>
-                <th>备注</th>
-                <td colspan="5"><el-input v-model="currProject.bz" placeholder="备注" clearable :disabled="!jbxxEdit"/></td>
-              </tr>
-            </table>
-          </div>
-          <div v-else class="content-map" :style="{height:contentHeight-100+'px',width: contentWidth+'px'}" >
-            <base-map  ref="basemap" :visibleLayerIds="visibleLayerId"/>
-          </div>
+    <el-tabs type="border-card" v-model="currentTab">
+      <el-tab-pane label="项目信息" name="tab1">
+        <div class="tables">
+          <table>
+            <tr>
+              <th>项目编号</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>项目名称</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>乡镇街道</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+            <tr>
+              <th>土地用途</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>土地坐落</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+            <tr>
+              <th class="title" colspan="10">用地主体农转用批次信息</th>
+            </tr>
+            <tr>
+              <th>项目编号</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>项目类型</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>批准文号</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+            <tr>
+              <th>批准日期</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>批次总面积（公顷）</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+            <tr>
+              <th>剩余面积</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>有无利用价值</th>
+              <td colspan="3">
+                <el-input
+                  v-model="detailData.xm_mc"
+                  placeholder="请输入合同是否已备案"
+                  clearable
+                  :disabled="!jbxxEdit"
+                />
+              </td>
+              <th>拟处置类型</th>
+              <td colspan="3">
+                <el-input
+                  v-model="detailData.xm_mc"
+                  placeholder="请输入合同是否已备案"
+                  clearable
+                  :disabled="!jbxxEdit"
+                />
+              </td>
+            </tr>
+            <tr>
+              <th>拟处置时间</th>
+              <td colspan="3">
+                <el-input
+                  v-model="detailData.xm_mc"
+                  placeholder="请输入合同是否已备案"
+                  clearable
+                  :disabled="!jbxxEdit"
+                />
+              </td>
+            </tr>
+          </table>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="附件信息" name="second">
-        <div class="content flex" :style="{height:contentHeight+'px'}">
-          <div class="btns" style="width: 30%">
-            <div class="btn flex-between" v-for="item in treeList" :key="item.value" :class="item.value==treeSelected?'selected':''" @click="fileChange(item)">
-              <div class="flex-between">
-                <img src="@/assets/images/datamanage/folder.png"/>
-                {{item.folderName}}
-              </div>
-              <el-upload
-                  class="upload-demo"
-                  action=""
-                  :before-upload="annexUpload"
-                  accept=".pdf,.png,.jpeg,.jpg"
-                  :show-file-list="false">
-                <div style="
-                  width: 40px;
-                  height: 26px;
-                  border: 1px solid;
-                  line-height: 26px;
-                  border-radius: 4px;"
-                     title="上传材料">
-                  <i class="iconfont yh-shangchuan" style="font-size: 20px"/>
-                </div>
-              </el-upload>
-            </div>
-          </div>
-          <div class="files" v-if="fileList.length>0">
-            <div  class="file" v-for="(item,index) in fileList" :key="index">
-              <div>
-                <span>{{item.filename}}</span>
-                <span>{{new Date(item.createtime).toLocaleDateString("af")}}</span>
-              </div>
-              <div>
-                <i title="预览" class="iconfont yh-fujianxiangqing" @click="viewFile(item)"/>
-                <div class="zw"/>
-                <i title="删除" class="iconfont yh-shanchufujian" @click="deletefile(item)"/>
-              </div>
-            </div>
-          </div>
-          <div class="fileList" style="width: 70%" v-else>
-            <el-empty description="暂无相关附件"/>
-          </div>
+      <el-tab-pane label="查看地图" name="tab2">
+        <div class="map_box">
+          <base-map ref="baseMap" v-if="currentTab === 'tab2'" :overlayShow="true" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
         </div>
       </el-tab-pane>
     </el-tabs>
-    <Modal
-        v-model="modal"
-        class-name="modalClass"
-        title="操作提醒">
-      <p style="text-align: center"><Icon type="md-alert" style="color: #ff9900;font-size: 20px;margin-right: 3px"/>确定对此附件进行【删除】操作？</p>
-    </Modal>
   </div>
 </template>
 
 <script>
 import BaseMap from "../../../components/common/BaseMap";
 export default {
-name: "Detail",
-  components:{BaseMap},
-  data(){
-  return{
-    user:JSON.parse(window.sessionStorage.getItem('yzt-user')),
-    activeName:'first',
-    jbxxEdit:false,
-    visibleLayerId:['YHYZT_NZYDK_NEW'],
-    treeList:[
-      {folderName:'附件目录',value:"mzybp"}
-    ],
-    treeSelected:'mzybp',
-    fileList:[
-      // {fileName:'一号',url:'112.pdf',time:'2024-01-01 12:00'},
-      // {fileName:'二号',url:'112.pdf',time:'2024-01-01 12:00'},
-    ],
-    modal:false,
-    showMap:false,
-    tableData:[],
-    currProject:{
-      xmmc:'',
-      xmlx:'',
-      zblx:'',
-      pdcz:'',
-      xmbh:'',
-      sqdw:'',
-      pzjg:'',
-      szx:'余杭区',
-      zbjb:'',
-      zbnd:'',
-      pzwh:'',
-      pzrq:'',
-      sjgswh:'',
-      sqyj:'',
-      sqrq:'',
-      sfcmjf:'',
-      kxxmsbsjzj:'',
-      xmmj:0,
-      tbdw:'',
-      sqydfw:'',
-      tbr:'',
-      shr:'',
-      sflstd:'',
-      tzxmdm:'',
-      zsggh:'',
-      pczyyt:''
-    },
-    oldProject:{},
-    xmdkInfo:{
-      data:[{xm_bh:''}],
-      page:1,
-      size:30,
-      total:0,
-      currDk:{},
-      xmdkSelected:'',
-    },
-    staticData:window.ApplicationConfig.staticData
-  }
+  name: "Detail",
+  components: { BaseMap },
+  data() {
+    return {
+      user: JSON.parse(window.sessionStorage.getItem("yzt-user")),
+      currentTab: 'tab1',
+      visibleLayerId:['YHYZT_PEWG_NEW'],
+      detailData: {},
+    };
   },
-  props:{
-    contentWidth:Number,
-    contentHeight:Number,
-    project:Object
+  props: {
+    contentWidth: Number,
+    contentHeight: Number,
+    project: Object,
   },
-  watch:{
-    project(val){
-      //this.activeName='first';
-      this.currProject = val;
-      this.oldProject = { ...val };
-    }
+  watch: {
+    
   },
-  methods:{
-    deleteFiles(fileid){
-      let params = new FormData();
-      params.append("fileid",fileid);
-      this.$ajax.post('/api/data/upload/nzy/delfile', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.fileList = data;
-        }
-      })
-    },
-    viewFile(data) {
-      let filetype = data.filename.split(".");
-      let type = filetype[filetype.length-1].toLowerCase();
-      if (type == 'pdf' || type == 'doc' || type == 'docx' || type == 'xls') {
-        this.getPdfStream(data.fileurl, data.filename)
-      }
-      if (type == 'jpg' || type == 'png' || type == 'jpeg') {
-        this.getJpgStream(data.fileurl, data.filename)
-      }
-    },
-    getPdfStream(path) {
-      let params = new FormData()
-      params.append('path', path)
-      this.$ajax.downLoadFile('/api/data/upload/getPdfStream', params, this).then(res => {
-        const blob = new Blob([res.data], {type: "application/pdf"})
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.target = '_blank'
-        link.href = URL.createObjectURL(blob)
-        document.body.appendChild(link)
-        link.click()
-        URL.revokeObjectURL(link.href)
-        document.body.removeChild(link)
-      })
-    },
-    getJpgStream(path) {
-      let params = new FormData()
-      params.append('path', path)
-      this.$ajax.downLoadFile('/api/data/upload/getJpgStream', params, this).then(res => {
-        const blob = new Blob([res.data], {type: "image/jpeg"})
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.target = '_blank';
-        link.href = URL.createObjectURL(blob)
-        document.body.appendChild(link)
-        link.click()
-        URL.revokeObjectURL(link.href)
-        document.body.removeChild(link)
-      })
-    },
-    initFileList(){
-      let params = new FormData();
-      params.append("folderName",this.treeSelected);
-      params.append("xmid",this.currProject.xm_guid);
-      this.fileList =[];
-      this.$ajax.post('/api/data/upload/nzy/getFileList', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.fileList = data;
-        }
-      })
-    },
-    //附件上传
-    annexUpload(file){
-      if(file){
-        this.uploadAnnex(file);
-      }
-      return false;
+  methods: {
+    initDetailData () {
+      this.currentTab = 'tab1'
     },
-    uploadAnnex(file){
+    showDetail(item){
       let params = new FormData();
-      params.append("file",file);
-      params.append("xmId",this.currProject.xm_guid);
-      params.append("folderName",this.treeSelected);
-      this.$ajax.post('/api/data/upload/nzy/annex', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.$message({type: 'success',message: '上传成功!'});
-          this.initFileList();
-        }
-      })
-    },
-    //删除批次
-    deletePc(){
-      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        let params = new FormData();
-        params.append("pewg",JSON.stringify(this.currProject));
-        this.$ajax.post('/api/data/manage/pewg/delOnePewg', params, this).then(res => {
-          const {success, data} = res;
-          if(success && data>0){
-            this.recordInfo('del','批而未供项目删除',this.currProject.pewg_id);
-            this.$parent.getBpxmList();
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        });
-      });
-    },
-    tabClick(tab){
-      if(tab.index==1){
-        this.getBpxmDetail();
-      }else if(tab.index==2){
-        this.initFileList();
-      }
-    },
-    openXmLoc(){
-      this.showMap =true;
-      let arr = this.currProject.xm_guid;
-      let _this = this;
-      setTimeout(() => {
-        _this.$refs.basemap.locationGlobal('YHYZT_ST_GDDK_NEW',`xm_guid = '${arr}'`);
-      }, 500);
-    },
-    getBpxmDetail(){
-      this.jbxxEdit = false;
-      let params = new FormData();
-      params.append("page",this.xmdkInfo.page);
-      params.append("size",this.xmdkInfo.size);
-      params.append("bpxmId",this.currProject.xm_guid);
-      this.xmdkInfo.data =[];
-      this.xmdkInfo.total=0;
-      let _this = this;
-      this.$ajax.post('/api/data/manage/nzy/getBpxmDetail', params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.xmdkInfo.data = data.list;
-          this.xmdkInfo.total = data.total;
-          this.xmdkInfo.currDk = data.list?this.xmdkInfo.data[0]:{};
-          this.xmdkInfo.xmdkSelected = data.list?this.xmdkInfo.data[0].xm_bh:'';
-        }else{
-          this.$message.error("查询失败！")
-        }
-      })
-    },
-    updateBpxm(){
-      this.jbxxEdit = false;
-      let params = new FormData();
-      params.append("project",JSON.stringify(this.currProject));
-      let _this = this;
-      this.$ajax.post('/api/data/manage/pewg/editOnePewg', params, this, true).then(res => {
+      params.append("guid",item.index_id);
+      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
         const {success,data} = res;
         if(success){
-         this.initBpxm();
-         this.recordInfo('edit','批而未供项目修改');
-        }else{
-          this.$message.error("修改失败！")
+          this.openDetail(0,data);
         }
       })
     },
-    initBpxm(){},
-    //附件材料切换
-    fileChange(item){
-      this.treeSelected =item.value;
-      this.files = this.fileList[item.value];
-    },
-    //删除材料
-    deletefile(item){
-      this.$confirm('此操作将永久删除该附件, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        let params = new FormData();
-        params.append("fileid",item.id);
-        params.append("fileUrl",item.fileurl);
-        this.$ajax.post('/api/data/upload/nzy/delfile', params, this).then(res => {
-          const {success, data} = res;
-          if(success && data){
-            this.fileList = data;
-            this.initFileList();
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        });
-      });
-    },
-    /**
-     * 表格样式
-     * @param row
-     * @param rowIndex
-     * @returns {string}
-     */
-    tableRowStyle({row, rowIndex}) {
-      if (rowIndex%2 === 1) {
-        return 'text-align:center;background:#F7F8FA';
-      }else{
-        return 'text-align:center;';
+    locationDk(index,row){
+      if(row.pewg_id){
+        this.detailShow = false;
+        let dkbhArr = row.pewg_id?row.pewg_id.split(","):'';
+        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
+        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `xm_guid in (${arr.join()})`)
+        //this.$message.warning("暂无图形")
       }
     },
-    tableHeaderStyle(){
-      return 'background:#E5EDFE; font-family:AlibabaPuHuiTiR; font-size:16px; color:rgba(51, 51, 51, 1);text-align:center;';
-    },
-    //处理内容变化记录信息
-    recordInfo(type,name,id){
-      let info = {};
-      info.re_recorder = this.user.userInfo.orgName;
-      info.table_type = '批而未供管理';
-      info.re_content='';
-      let _this = this;
-      info.re_name = name;
-      if(type=='edit'){
-        Object.keys(this.currProject).forEach(function(key) {
-          if(_this.currProject[key]!=_this.oldProject[key]){
-            info.re_content += '字段'+key+'内容由'+_this.oldProject[key]+'改为'+_this.currProject[key]+';';
-          }
-        });
-      }else if(type=='del'){
-        info.re_content ='删除主键为：'+id;
-      }
-      if(info.re_content==''){
-        this.$message.success("编辑成功！")
-        return;
+    drawShapeJsonEvent(json){
+      if(json){
+        this.drawShapeJson = json;
+        this.getBpxmList();
+        this.$message.success("绘制结束");
       }
-      let params = new FormData();
-      params.append('data',JSON.stringify(info))
-      //执行持久化操作（记录入库）
-      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
-        const {success,data} = res;
-        if(success && type=="edit"){
-          this.$message.success("编辑成功！")
-        }else if(success && type=="del"){
-          this.$message.success("删除成功！")
-        }else{
-          this.$message.error("编辑失败！")
-        }
-      })
-    }
+    },
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-  .xm-detal{
-    padding-top: 20px;
-    ::v-deep{
-      .el-tabs__nav-scroll{
-        display: flex;
-        justify-content: center;
-        .el-tabs__item{
-          padding:0px 60px;
-          font-size: 16px;
-        }
-        .el-tabs__item.is-active{
-          color: #446AE7;
-          font-weight: bold;
-        }
-        .el-tabs__active-bar{
-          height: 4px;
-          width: 56px;
-          background: #446AE7;
-          border-radius: 0px 0px 0px 0px;
-        }
-      }
-      .el-upload-list{
-        position: absolute;
-        top: 200px;
-        left: 20px;
-      }
-    }
-
-    .head{
-      padding: 0px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .title{
-        display: flex;
-        align-items: center;
-        div{
-          width: 6px;
-          height: 18px;
-          background: #5988FF;
-          border-radius: 1px 1px 1px 1px;
-        }
-        span{
-          font-family: AlibabaPuHuiTiM;
-          font-weight: 500;
-          font-size: 16px;
-          color: #1F2F47;
-          margin-left: 10px;
-        }
-      }
-      .handler-btn{
-        display: flex;
-        >div{
-          width: 102px;
-          height: 30px;
-          background: #E8F0FF;
-          border-radius: 4px 4px 4px 4px;
-          border: 1px solid #C2D8FF;
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-          margin-left: 8px;
-          cursor: pointer;
-          i{
-            font-size: 16px;
-          }
-          span{
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-            font-size: 14px;
-            color: #333333;
-          }
-        }
-      }
-    }
-    .content{
-      .tables{
-        padding: 0px 20px;
-        width: 100%;margin-top: 15px;
-        overflow-y: auto;
-        table{
-          width: 100%;
-          border-collapse: collapse;
-          tr,th,td{
-            border:1px solid #D6D6D6;
-            height: 40px;
-            font-size: 14px;
-            color: #1F2F47;
-          }
-          th{
-            width: 16%;
-            background: #F4F6F8;
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-          }
-          td{
-            width: 16%;
-            padding: 0px 5px;
-          }
-        }
-        ::v-deep{
-          .el-input__inner{
-            //border:1px solid #fff;
-            border-radius:0px;
-            border-color: transparent;
-          }
-        }
-      }
-      .btns{
-        width:100%;
-        height: calc(92% - 90px);
-        overflow-y: auto;
-        border-right: 1px solid #D2DAE6;
-        .btn{
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          height: 40px;
-          margin: 5px 0px;
-
-          font-family: AlibabaPuHuiTiM;
-          font-weight: normal;
-          font-size: 16px;
-          color: #666666;
-          padding: 0px 10px;
-          img{
-            width: 26px;
-            margin-right: 10px;
-          }
-          &.selected{
-            background: #F0F6FC;
-            border-radius: 4px 4px 4px 4px;
-            color: #446AE7;
-            .el-upload{
-              color: #19be6b;
-            }
-          }
-        }
-      }
-      .files{
-        width: 70%;
-        .file{
-          display: flex;
-          justify-content: space-between;
-          padding: 0px 10px;
-          margin: 20px 0px;
-          >div:first-child{
-            display: flex;
-            display: flex;
-            flex-direction: column;
-            align-items: baseline;
-            line-height: 20px;
-            span:nth-child(1){
-              font-family: AlibabaPuHuiTiM;
-              font-weight: normal;
-              font-size: 14px;
-              color: #172339;
-              line-height: 16px;
-            }
-            span:nth-child(2){
-              font-family: AlibabaPuHuiTiR;
-              font-weight: normal;
-              font-size: 12px;
-              color: #91969B;
-            }
-          }
-          >div:nth-child(2){
-            display: flex;
-            align-items: center;
-            .zw{
-              width: 2px;
-              height: 18px;
-              background: #CCD1DC;
-              margin: 0 8px;
-            }
-            i{
-              color: #8d9093;
-              font-size: 20px;
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-    .content-map{
-      padding: 20px;
-      border-radius: 6px;
-      ::v-deep{
-        .vl-tool-bar{
-          margin: 50px 20px 0 0;
-        }
-      }
-    }
+.xm-detal {
+  width: 100%;
+  .map_box {
+    width: 100%;
+    height: 600px;
   }
-  ::v-deep{
-    .modalClass{
-      .ivu-modal-content{
-        border-radius: 12px;
-      }
-      .ivu-modal-header{
-        border-radius: 12px 12px 0px 0px;
-        background: linear-gradient( 180deg, #DEEBFF 0%, #FFFFFF 100%);
-        border-bottom:none;
-        .ivu-modal-header-inner{
-          font-family: AlibabaPuHuiTiM;
-          font-weight: normal;
-          font-size: 18px;
-          color: #181B1F;
-        }
-      }
-      .ivu-modal-body{
+  .tables {
+    width: 100%;
+    overflow-y: auto;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      tr,
+      th,
+      td {
+        border: 1px solid #d6d6d6;
+        height: 40px;
+        font-size: 14px;
+        color: #1f2f47;
+        padding: 0px 10px;
+      }
+      th {
+        width: 155px;
+        background: #f4f6f8;
         font-family: AlibabaPuHuiTiM;
         font-weight: normal;
-        font-size: 18px;
-        color: #000000;
+        &.title {
+          text-align: left;
+          background: #fff;
+          font-size: 16px;
+        }
       }
-      .ivu-modal-close .ivu-icon-ios-close{
-        font-weight: bold;
-        color: #181B1F;
+      td {
+        padding: 0px 5px;
       }
-      .ivu-modal-footer{
-        border-top: none;
+    }
+    ::v-deep {
+      .el-input__inner {
+        //border:1px solid #fff;
+        border-radius: 0px;
+        border-color: transparent;
       }
     }
   }
+}
 </style>

YHYZT/client/src/views/DataManage/ssnyd/Detail.vue

@@ -1,711 +1,139 @@
 <template>
   <div class="xm-detal">
-    <el-tabs v-model="activeName" @tab-click="tabClick" :style="{width:contentWidth+'px'}">
-      <el-tab-pane label="设施农用地信息卡" name="first">
-        <div class="content">
-          <div class="head">
-            <div class="title">
-              <div></div>
-              <span>属性数据</span>
-            </div>
-            <div class="handler-btn">
-              <div v-show="showMap" @click="showMap=false">
-                <i class="iconfont yh-sheshinongyongdi"  style="color: #44CAE7"/>
-                <span>查看项目</span>
-              </div>
-              <div v-show="!showMap" @click="openXmLoc" >
-                <i class="iconfont yh-dingwei1"  style="font-size: 20px;color: rgb(237 115 5);"/>
-                <span>查看位置</span>
-              </div>
-              <div v-show="!jbxxEdit && !showMap" @click="()=>{jbxxEdit=true;}">
-                  <i class="iconfont yh-bianji" style="color: #5988FF"/>
-                  <span>开始编辑</span>
-              </div>
-              <div  v-show="jbxxEdit && !showMap" @click="updateBpxm">
-                <i class="iconfont yh-baocun"  style="color: #44CAE7"/>
-                <span>保存项目</span>
-              </div>
-              <div v-show="!showMap" @click="deletePc">
-                <i class="iconfont yh-shanchu"  style="color: #F0A123"/>
-                <span>删除项目</span>
-              </div>
-            </div>
-          </div>
-          <div v-if="!showMap" class="tables" :style="{height:contentHeight-140+'px'}">
-            <table>
-              <tr>
-                <th>设施农用地主体</th>
-                <td colspan="3"><el-input v-model="currProject.ssnyzt" placeholder="设施农用地主体" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>土地所有权单位</th>
-                <td colspan="3"><el-input v-model="currProject.tdsyqdw" placeholder="土地所有权单位" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>所在镇街</th>
-                <td><el-input v-model="currProject.xzqmc" placeholder="所在镇街" clearable :disabled="!jbxxEdit" /></td>
-                <th>用地位置</th>
-                <td><el-input v-model="currProject.tdzl" placeholder="用地位置" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>设施农业类型</th>
-                <td><el-input v-model="currProject.pzlx" placeholder="设施农业类型" clearable :disabled="!jbxxEdit" /></td>
-                <th>项目用途</th>
-                <td><el-input v-model="currProject.xmyt" placeholder="项目用途" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>用地截止期限</th>
-                <td><el-input v-model="currProject.ydjzqx" placeholder="用地截止期限" clearable :disabled="!jbxxEdit" /></td>
-                <th>生态农业试点项目</th>
-                <td><el-input v-model="currProject.sfstxhsd" placeholder="生态农业试点项目" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>批准文号</th>
-                <td><el-input v-model="currProject.pzwh" placeholder="批准文号" clearable :disabled="!jbxxEdit" /></td>
-                <th>批准时间</th>
-                <td>
-                  <el-date-picker
-                      v-model="currProject.pzsj"
-                      clearable :disabled="!jbxxEdit"
-                      type="date"
-                      placeholder="批准时间">
-                  </el-date-picker>
-                </td>
-              </tr>
-              <tr>
-                <th rowspan="3">用地总面积</th>
-                <td rowspan="3"><el-input v-model="currProject.pzmj_zmj" placeholder="用地总面积" clearable :disabled="!jbxxEdit" /></td>
-                <th>生产设施</th>
-                <td><el-input v-model="currProject.pzmj_scss" placeholder="生产设施" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>附属设施</th>
-                <td><el-input v-model="currProject.pzmj_fsss" placeholder="附属设施" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>配套设施</th>
-                <td><el-input v-model="currProject.pzmj_ptss" placeholder="配套设施" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>占用耕地面积</th>
-                <td><el-input v-model="currProject.zygdmj" placeholder="占用耕地面积" clearable :disabled="!jbxxEdit" /></td>
-                <th>业主电话</th>
-                <td><el-input v-model="currProject.yzdh" placeholder="业主电话" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>建设情况</th>
-                <td colspan="3"><el-input v-model="currProject.jsqk" placeholder="建设情况" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>现场情况</th>
-                <td colspan="3"><el-input v-model="currProject.xcqk" placeholder="现场情况" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-              <tr>
-                <th>镇街自查情况</th>
-                <td colspan="3"><el-input v-model="currProject.zjzcqk" placeholder="镇街自查情况" clearable :disabled="!jbxxEdit" /></td>
-              </tr>
-            </table>
-          </div>
-          <div v-else class="content-map" :style="{height:contentHeight-100+'px',width: contentWidth+'px'}" >
-            <base-map  ref="basemap" :visibleLayerIds="visibleLayerId"/>
-          </div>
+    <el-tabs type="border-card" v-model="currentTab">
+      <el-tab-pane label="项目信息" name="tab1">
+        <div class="tables">
+          <table>
+            <tr>
+              <th>项目名称</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>市</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>县区</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>备案号</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
+            <tr>
+              <th>备案面积</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>备案时间</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>用途</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+              <th>备注</th>
+              <td colspan="3">{{ detailData.xm_bh }}</td>
+            </tr>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="附件信息" name="second">
-        <div class="content flex" :style="{height:contentHeight+'px'}">
-          <div class="btns" style="width: 30%">
-            <div class="btn flex-between" v-for="item in treeList" :key="item.value" :class="item.value==treeSelected?'selected':''" @click="fileChange(item)">
-              <div class="flex-between">
-                <img src="@/assets/images/datamanage/folder.png"/>
-                {{item.folderName}}
-              </div>
-              <el-upload
-                  class="upload-demo"
-                  action=""
-                  :before-upload="annexUpload"
-                  accept=".pdf,.png,.jpeg,.jpg"
-                  :show-file-list="false">
-                <div style="
-                  width: 40px;
-                  height: 26px;
-                  border: 1px solid;
-                  line-height: 26px;
-                  border-radius: 4px;"
-                     title="上传材料">
-                  <i class="iconfont yh-shangchuan" style="font-size: 20px"/>
-                </div>
-              </el-upload>
-            </div>
-          </div>
-          <div class="files" v-if="fileList.length>0">
-            <div  class="file" v-for="(item,index) in fileList" :key="index">
-              <div>
-                <span>{{item.filename}}</span>
-                <span>{{new Date(item.createtime).toLocaleDateString("af")}}</span>
-              </div>
-              <div>
-                <i title="预览" class="iconfont yh-fujianxiangqing" @click="viewFile(item)"/>
-                <div class="zw"/>
-                <i title="删除" class="iconfont yh-shanchufujian" @click="deletefile(item)"/>
-              </div>
-            </div>
-          </div>
-          <div class="fileList" style="width: 70%" v-else>
-            <el-empty description="暂无相关附件"/>
-          </div>
+      <el-tab-pane label="查看地图" name="tab2">
+        <div class="map_box">
+          <base-map ref="baseMap" v-if="currentTab === 'tab2'" :overlayShow="true" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
         </div>
       </el-tab-pane>
     </el-tabs>
-    <Modal
-        v-model="modal"
-        class-name="modalClass"
-        title="操作提醒">
-      <p style="text-align: center"><Icon type="md-alert" style="color: #ff9900;font-size: 20px;margin-right: 3px"/>确定对此附件进行【删除】操作？</p>
-    </Modal>
   </div>
 </template>
 
 <script>
 import BaseMap from "../../../components/common/BaseMap";
 export default {
-name: "Detail",
-  components:{BaseMap},
-  data(){
-  return{
-    user:JSON.parse(window.sessionStorage.getItem('yzt-user')),
-    activeName:'first',
-    jbxxEdit:false,
-    visibleLayerId:['YHYZT_SSNYD'],
-    treeList:[
-      {folderName:'附件目录',value:"mzybp"}
-    ],
-    treeSelected:'mzybp',
-    fileList:[
-    ],
-    modal:false,
-    showMap:false,
-    tableData:[],
-    currProject:{
-      xmmc:'',
-      xmlx:'',
-      zblx:'',
-      pdcz:'',
-      xmbh:'',
-      sqdw:'',
-      pzjg:'',
-      szx:'余杭区',
-      zbjb:'',
-      zbnd:'',
-      pzwh:'',
-      pzrq:'',
-      sjgswh:'',
-      sqyj:'',
-      sqrq:'',
-      sfcmjf:'',
-      kxxmsbsjzj:'',
-      xmmj:0,
-      tbdw:'',
-      sqydfw:'',
-      tbr:'',
-      shr:'',
-      sflstd:'',
-      tzxmdm:'',
-      zsggh:'',
-      pczyyt:''
-    },
-    oldProject:{},
-    xmdkInfo:{
-      data:[{xm_bh:''}],
-      page:1,
-      size:30,
-      total:0,
-      currDk:{},
-      xmdkSelected:'',
-    },
-    staticData:window.ApplicationConfig.staticData
-  }
+  name: "Detail",
+  components: { BaseMap },
+  data() {
+    return {
+      user: JSON.parse(window.sessionStorage.getItem("yzt-user")),
+      currentTab: 'tab1',
+      visibleLayerId:['YHYZT_SSNYD'],
+      detailData: {},
+    };
   },
-  props:{
-    contentWidth:Number,
-    contentHeight:Number,
-    project:Object
+  props: {
+    contentWidth: Number,
+    contentHeight: Number,
+    project: Object,
   },
-  watch:{
-    project(val){
-      //this.activeName='first';
-      val.ydjzqx = val.ydjzqx?new Date(val.ydjzqx).toLocaleDateString("af"):'';
-      this.currProject = val;
-      this.oldProject = { ...val };
-    }
+  watch: {
+    
   },
-  methods:{
-    deleteFiles(fileid){
-      let params = new FormData();
-      params.append("fileid",fileid);
-      this.$ajax.post('/api/data/upload/nzy/delfile', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.fileList = data;
-        }
-      })
-    },
-    viewFile(data) {
-      let filetype = data.filename.split(".");
-      let type = filetype[filetype.length-1].toLowerCase();
-      if (type == 'pdf' || type == 'doc' || type == 'docx' || type == 'xls') {
-        this.getPdfStream(data.fileurl, data.filename)
-      }
-      if (type == 'jpg' || type == 'png' || type == 'jpeg') {
-        this.getJpgStream(data.fileurl, data.filename)
-      }
-    },
-    getPdfStream(path) {
-      let params = new FormData()
-      params.append('path', path)
-      this.$ajax.downLoadFile('/api/data/upload/getPdfStream', params, this).then(res => {
-        const blob = new Blob([res.data], {type: "application/pdf"})
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.target = '_blank'
-        link.href = URL.createObjectURL(blob)
-        document.body.appendChild(link)
-        link.click()
-        URL.revokeObjectURL(link.href)
-        document.body.removeChild(link)
-      })
-    },
-    getJpgStream(path) {
-      let params = new FormData()
-      params.append('path', path)
-      this.$ajax.downLoadFile('/api/data/upload/getJpgStream', params, this).then(res => {
-        const blob = new Blob([res.data], {type: "image/jpeg"})
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.target = '_blank';
-        link.href = URL.createObjectURL(blob)
-        document.body.appendChild(link)
-        link.click()
-        URL.revokeObjectURL(link.href)
-        document.body.removeChild(link)
-      })
-    },
-    initFileList(){
-      let params = new FormData();
-      params.append("folderName",this.treeSelected);
-      params.append("xmid",this.currProject.xm_guid);
-      this.fileList =[];
-      this.$ajax.post('/api/data/upload/nzy/getFileList', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.fileList = data;
-        }
-      })
-    },
-    //附件上传
-    annexUpload(file){
-      if(file){
-        this.uploadAnnex(file);
-      }
-      return false;
+  methods: {
+    initDetailData () {
+      this.currentTab = 'tab1'
     },
-    uploadAnnex(file){
+    showDetail(item){
       let params = new FormData();
-      params.append("file",file);
-      params.append("xmId",this.currProject.xm_guid);
-      params.append("folderName",this.treeSelected);
-      this.$ajax.post('/api/data/upload/nzy/annex', params, this).then(res => {
-        const {success, data} = res;
-        if(success && data){
-          this.$message({type: 'success',message: '上传成功!'});
-          this.initFileList();
-        }
-      })
-    },
-    //删除批次
-    deletePc(){
-      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        let params = new FormData();
-        params.append("ssnyd",JSON.stringify(this.currProject));
-        this.$ajax.post('/api/data/manage/ssnyd/delOneSsnyd', params, this).then(res => {
-          const {success, data} = res;
-          if(success && data>0){
-            this.recordInfo('del','设施农用地删除',this.currProject.objectid);
-            this.$parent.getBpxmList();
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        });
-      });
-    },
-    tabClick(tab){
-      if(tab.index==1){
-        this.getBpxmDetail();
-      }else if(tab.index==2){
-        this.initFileList();
-      }
-    },
-    openXmLoc(){
-      this.showMap =true;
-      let arr = this.currProject.xm_guid;
-      let _this = this;
-      setTimeout(() => {
-        _this.$refs.basemap.locationGlobal('YHYZT_SSNYD',`objectid = '${arr}'`);
-      }, 500);
-    },
-    getBpxmDetail(){
-      this.jbxxEdit = false;
-      let params = new FormData();
-      params.append("page",this.xmdkInfo.page);
-      params.append("size",this.xmdkInfo.size);
-      params.append("bpxmId",this.currProject.xm_guid);
-      this.xmdkInfo.data =[];
-      this.xmdkInfo.total=0;
-      let _this = this;
-      this.$ajax.post('/api/data/manage/nzy/getBpxmDetail', params, this, true).then(res => {
-        const {success,data} = res;
-        if(success){
-          this.xmdkInfo.data = data.list;
-          this.xmdkInfo.total = data.total;
-          this.xmdkInfo.currDk = data.list?this.xmdkInfo.data[0]:{};
-          this.xmdkInfo.xmdkSelected = data.list?this.xmdkInfo.data[0].xm_bh:'';
-        }else{
-          this.$message.error("查询失败！")
-        }
-      })
-    },
-    updateBpxm(){
-      this.jbxxEdit = false;
-      let params = new FormData();
-      params.append("project",JSON.stringify(this.currProject));
-      let _this = this;
-      this.$ajax.post('/api/data/manage/ssnyd/editOneSsnyd', params, this, true).then(res => {
+      params.append("guid",item.index_id);
+      this.$ajax.post('/api/data/manage/gd/getGdDetail', params, this, true).then(res => {
         const {success,data} = res;
         if(success){
-         this.initBpxm();
-         this.recordInfo('edit','设施农用地修改');
-        }else{
-          this.$message.error("修改失败！")
+          this.openDetail(0,data);
         }
       })
     },
-    initBpxm(){},
-    //附件材料切换
-    fileChange(item){
-      this.treeSelected =item.value;
-      this.files = this.fileList[item.value];
-    },
-    //删除材料
-    deletefile(item){
-      this.$confirm('此操作将永久删除该附件, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        let params = new FormData();
-        params.append("fileid",item.id);
-        params.append("fileUrl",item.fileurl);
-        this.$ajax.post('/api/data/upload/nzy/delfile', params, this).then(res => {
-          const {success, data} = res;
-          if(success && data){
-            this.fileList = data;
-            this.initFileList();
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        });
-      });
-    },
-    /**
-     * 表格样式
-     * @param row
-     * @param rowIndex
-     * @returns {string}
-     */
-    tableRowStyle({row, rowIndex}) {
-      if (rowIndex%2 === 1) {
-        return 'text-align:center;background:#F7F8FA';
-      }else{
-        return 'text-align:center;';
+    locationDk(index,row){
+      if(row.pewg_id){
+        this.detailShow = false;
+        let dkbhArr = row.pewg_id?row.pewg_id.split(","):'';
+        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
+        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `xm_guid in (${arr.join()})`)
+        //this.$message.warning("暂无图形")
       }
     },
-    tableHeaderStyle(){
-      return 'background:#E5EDFE; font-family:AlibabaPuHuiTiR; font-size:16px; color:rgba(51, 51, 51, 1);text-align:center;';
-    },
-    //处理内容变化记录信息
-    recordInfo(type,name,id){
-      let info = {};
-      info.re_recorder = this.user.userInfo.orgName;
-      info.table_type = '设施农用地管理';
-      info.re_content='';
-      let _this = this;
-      info.re_name = name;
-      if(type=='edit'){
-        Object.keys(this.currProject).forEach(function(key) {
-          if(_this.currProject[key]!=_this.oldProject[key]){
-            info.re_content += '字段'+key+'内容由'+_this.oldProject[key]+'改为'+_this.currProject[key]+';';
-          }
-        });
-      }else if(type=='del'){
-        info.re_content ='删除主键为：'+id;
-      }
-      if(info.re_content==''){
-        this.$message.success("编辑成功！")
-        return;
+    drawShapeJsonEvent(json){
+      if(json){
+        this.drawShapeJson = json;
+        this.getBpxmList();
+        this.$message.success("绘制结束");
       }
-      let params = new FormData();
-      params.append('data',JSON.stringify(info))
-      //执行持久化操作（记录入库）
-      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
-        const {success,data} = res;
-        if(success && type=="edit"){
-          this.$message.success("编辑成功！")
-        }else if(success && type=="del"){
-          this.$message.success("删除成功！")
-        }else{
-          this.$message.error("编辑失败！")
-        }
-      })
-    }
+    },
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-  .xm-detal{
-    padding-top: 20px;
-    ::v-deep{
-      .el-tabs__nav-scroll{
-        display: flex;
-        justify-content: center;
-        .el-tabs__item{
-          padding:0px 60px;
-          font-size: 16px;
-        }
-        .el-tabs__item.is-active{
-          color: #446AE7;
-          font-weight: bold;
-        }
-        .el-tabs__active-bar{
-          height: 4px;
-          width: 56px;
-          background: #446AE7;
-          border-radius: 0px 0px 0px 0px;
-        }
-      }
-      .el-upload-list{
-        position: absolute;
-        top: 200px;
-        left: 20px;
-      }
-    }
-
-    .head{
-      padding: 0px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .title{
-        display: flex;
-        align-items: center;
-        div{
-          width: 6px;
-          height: 18px;
-          background: #5988FF;
-          border-radius: 1px 1px 1px 1px;
-        }
-        span{
-          font-family: AlibabaPuHuiTiM;
-          font-weight: 500;
-          font-size: 16px;
-          color: #1F2F47;
-          margin-left: 10px;
-        }
-      }
-      .handler-btn{
-        display: flex;
-        >div{
-          width: 102px;
-          height: 30px;
-          background: #E8F0FF;
-          border-radius: 4px 4px 4px 4px;
-          border: 1px solid #C2D8FF;
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-          margin-left: 8px;
-          cursor: pointer;
-          i{
-            font-size: 16px;
-          }
-          span{
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-            font-size: 14px;
-            color: #333333;
-          }
-        }
-      }
-    }
-    .content{
-      .tables{
-        padding: 0px 20px;
-        width: 100%;margin-top: 15px;
-        overflow-y: auto;
-        table{
-          width: 100%;
-          border-collapse: collapse;
-          tr,th,td{
-            border:1px solid #D6D6D6;
-            height: 40px;
-            font-size: 14px;
-            color: #1F2F47;
-          }
-          th{
-            width: 16%;
-            background: #F4F6F8;
-            font-family: AlibabaPuHuiTiM;
-            font-weight: normal;
-          }
-          td{
-            width: 16%;
-            padding: 0px 5px;
-          }
-        }
-        ::v-deep{
-          .el-input__inner{
-            //border:1px solid #fff;
-            border-radius:0px;
-            border-color: transparent;
-          }
-        }
-      }
-      .btns{
-        width:100%;
-        height: calc(92% - 90px);
-        overflow-y: auto;
-        border-right: 1px solid #D2DAE6;
-        .btn{
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          height: 40px;
-          margin: 5px 0px;
-
-          font-family: AlibabaPuHuiTiM;
-          font-weight: normal;
-          font-size: 16px;
-          color: #666666;
-          padding: 0px 10px;
-          img{
-            width: 26px;
-            margin-right: 10px;
-          }
-          &.selected{
-            background: #F0F6FC;
-            border-radius: 4px 4px 4px 4px;
-            color: #446AE7;
-            .el-upload{
-              color: #19be6b;
-            }
-          }
-        }
-      }
-      .files{
-        width: 70%;
-        .file{
-          display: flex;
-          justify-content: space-between;
-          padding: 0px 10px;
-          margin: 20px 0px;
-          >div:first-child{
-            display: flex;
-            display: flex;
-            flex-direction: column;
-            align-items: baseline;
-            line-height: 20px;
-            span:nth-child(1){
-              font-family: AlibabaPuHuiTiM;
-              font-weight: normal;
-              font-size: 14px;
-              color: #172339;
-              line-height: 16px;
-            }
-            span:nth-child(2){
-              font-family: AlibabaPuHuiTiR;
-              font-weight: normal;
-              font-size: 12px;
-              color: #91969B;
-            }
-          }
-          >div:nth-child(2){
-            display: flex;
-            align-items: center;
-            .zw{
-              width: 2px;
-              height: 18px;
-              background: #CCD1DC;
-              margin: 0 8px;
-            }
-            i{
-              color: #8d9093;
-              font-size: 20px;
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-    .content-map{
-      padding: 20px;
-      border-radius: 6px;
-      ::v-deep{
-        .vl-tool-bar{
-          margin: 50px 20px 0 0;
-        }
-      }
-    }
+.xm-detal {
+  width: 100%;
+  .map_box {
+    width: 100%;
+    height: 600px;
   }
-  ::v-deep{
-    .modalClass{
-      .ivu-modal-content{
-        border-radius: 12px;
-      }
-      .ivu-modal-header{
-        border-radius: 12px 12px 0px 0px;
-        background: linear-gradient( 180deg, #DEEBFF 0%, #FFFFFF 100%);
-        border-bottom:none;
-        .ivu-modal-header-inner{
-          font-family: AlibabaPuHuiTiM;
-          font-weight: normal;
-          font-size: 18px;
-          color: #181B1F;
-        }
-      }
-      .ivu-modal-body{
+  .tables {
+    width: 100%;
+    overflow-y: auto;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      tr,
+      th,
+      td {
+        border: 1px solid #d6d6d6;
+        height: 40px;
+        font-size: 14px;
+        color: #1f2f47;
+        padding: 0px 10px;
+      }
+      th {
+        width: 155px;
+        background: #f4f6f8;
         font-family: AlibabaPuHuiTiM;
         font-weight: normal;
-        font-size: 18px;
-        color: #000000;
+        &.title {
+          text-align: left;
+          background: #fff;
+          font-size: 16px;
+        }
       }
-      .ivu-modal-close .ivu-icon-ios-close{
-        font-weight: bold;
-        color: #181B1F;
+      td {
+        padding: 0px 5px;
       }
-      .ivu-modal-footer{
-        border-top: none;
+    }
+    ::v-deep {
+      .el-input__inner {
+        //border:1px solid #fff;
+        border-radius: 0px;
+        border-color: transparent;
       }
     }
   }
+}
 </style>