BJYSYBZ/BJYSYBZ_C/src/views/YgxqView/components/FourContent.vue

<template>
  <div class="FourContent">
    <cart-item title="资源列表">
      <!-- <div class="change-panel-wrapper flex">
        <div class="panel-i" @click="valChange('gyyd')" :class="{selected: nowModel === 'gyyd'}">工业用地</div>
        <div class="split">|</div>
        <div class="panel-i" @click="valChange('syyd')" :class="{selected: nowModel === 'syyd'}">商业用地</div>
        <div class="split">|</div>
        <div class="panel-i" @click="valChange('zzyd')" :class="{selected: nowModel === 'zzyd'}">住宅用地</div>
        <div class="split">|</div>
        <div class="panel-i" @click="valChange('lsyd')" :class="{selected: nowModel === 'lsyd'}">教育用地</div>
        <div class="split">|</div>
        <div class="panel-i" @click="valChange('lsyd')" :class="{selected: nowModel === 'lsyd'}">临时用地</div>
      </div> -->
      <div class="title-tabs">
        <div class="tab" :class="{selected: nowModel == 'gyyd'}" @click="valChange('gyyd')">工 业</div>
        <div class="tab" :class="{selected: nowModel == 'syyd'}" @click="valChange('syyd')">商 业</div>
        <div class="tab" :class="{selected: nowModel == 'zzyd'}" @click="valChange('zzyd')">住 宅</div>
        <div class="tab" :class="{selected: nowModel == 'jyyd'}" @click="valChange('jyyd')">教 育</div>
        <div class="tab" :class="{selected: nowModel == 'lsyd'}" @click="valChange('lsyd')">临 时</div>
      </div>
      <div class="xm-list flex-1 flex-col">
        <div class="statistics-wrapper flex">
          <div class="statistics-item flex">
            <img src="@/assets/images/GyzzView/gyzs.png" class="item-left-icon">
            <div class="text">
              <span>地块宗数</span>
              <br>
              <span class="num"> {{ zs }} </span> <span style="font-size: 15px">宗</span>
            </div>
          </div>
          <div class="statistics-item flex">
            <img src="@/assets/images/GyzzView/gymj.png" class="item-left-icon">
            <div class="text">
              <span>地块面积</span>
              <br>
              <span class="num"> {{ mj }} </span><span style="font-size: 15px">亩</span>
            </div>
          </div>
        </div>
        <div class="search-wrapper" v-show="nowModel === 'gyyd'">
          <table>
            <tr>
              <th>行政区划</th>
              <td>
                <el-select v-model="query.xzqdm" placeholder="请选择" size="medium" style="width: 100%" clearable>
                  <el-option
                    label="滨江区"
                    value="">
                  </el-option>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <th>权利人</th>
              <td>
                <el-input size="medium" v-model="query.name" placeholder="权利人" style="width: 100%" clearable></el-input>
              </td>
            </tr>
          </table>
          <transition enter-active-class="rollIn" leave-active-class="rollOut">
            <div v-show="foldShow">
              <table>
                <tr>
                  <th>容积率</th>
                  <td colspan="2">
                    <el-input size="medium" v-model="query.rjlSmall" placeholder="小" style="width: 75%" clearable></el-input>
                    <span style="color: white;margin-left: 15px">-</span>
                  </td>
                  <td>
                    <el-input size="medium" v-model="query.rjlBig" placeholder="大" style="width: 70%" clearable></el-input>
                  </td>
                  <th>
                  </th>
                </tr>
                <tr>
                  <th>建筑密度</th>
                  <td colspan="2">
                    <el-input size="medium" v-model="query.jzmdSmall" placeholder="小" style="width: 75%" clearable></el-input>
                    <span style="color: white;margin-left: 15px">-</span>
                  </td>
                  <td>
                    <el-input size="medium" v-model="query.jzmdBig" placeholder="大" style="width: 70%" clearable></el-input>
                  </td>
                  <th>
                  </th>
                </tr>
                <tr>
                  <th>税收(万元)</th>
                  <td colspan="2">
                    <el-input size="medium" v-model="query.ssSmall" placeholder="小" style="width: 75%" clearable></el-input>
                    <span style="color: white;margin-left: 15px">-</span>
                  </td>
                  <td>
                    <el-input size="medium" v-model="query.ssBig" placeholder="大" style="width: 70%" clearable></el-input>
                  </td>
                  <th>
                  </th>
                </tr>
              </table>
            </div>
          </transition>
          <table>
            <tr>
              <th>面积(亩)</th>
              <td colspan="2">
                <el-input size="medium" v-model="query.small" placeholder="面积小" style="width: 75%" clearable></el-input>
                <span style="color: white;margin-left: 15px">-</span>
              </td>
              <td>
                <el-input size="medium" v-model="query.big" placeholder="面积大" style="width: 70%" clearable></el-input>
                <div class="fold-wrapper" @click="foldShow = !foldShow"> <img src="@/assets/images/bjybz/choose.png" title="折叠/展开" style="vertical-align: middle"></div>
              </td>
              <th>
                <el-button size="medium" type="primary" @click="queryData()" icon="el-icon-search" style="position: absolute;top:2px;right:0px">查询</el-button>
                
              </th>
            </tr>
          </table>
        </div>
        <div class="search-wrapper" v-show="nowModel === 'syyd'">
          <table>
            <tr>
              <th>地块编号</th>
              <td>
                <el-input size="medium" v-model="query.id" placeholder="地块编号" style="width: 100%" clearable></el-input>
              </td>
              <th>项目名称</th>
              <td>
                <el-input size="medium" v-model="query.name" placeholder="项目名称" style="width: 100%" clearable></el-input>
              </td>
            </tr>
          </table>
          <transition enter-active-class="rollIn" leave-active-class="rollOut">
            <div v-show="foldShow">
              <table>
                <tr>
                  <th>容积率</th>
                  <td colspan="2">
                    <el-input size="medium" v-model="query.rjlSmall" placeholder="小" style="width: 75%" clearable></el-input>
                    <span style="color: white;margin-left: 15px">-</span>
                  </td>
                  <td>
                    <el-input size="medium" v-model="query.rjlBig" placeholder="大" style="width: 70%" clearable></el-input>
                  </td>
                  <th>
                  </th>
                </tr>
                <tr>
                  <th>建设单位</th>
                  <td colspan="3">
                    <el-input size="medium" v-model="query.name1" placeholder="建设单位" style="width: 85%" clearable></el-input>
                  </td>
                </tr>
              </table>
            </div>
          </transition>
          <table>
            <tr>
              <th>面积(亩)</th>
              <td colspan="2">
                <el-input size="medium" v-model="query.small" placeholder="面积小" style="width: 75%" clearable></el-input>
                <span style="color: white;margin-left: 15px">-</span>
              </td>
              <td>
                <el-input size="medium" v-model="query.big" placeholder="面积大" style="width: 70%" clearable></el-input>
                <div class="fold-wrapper" @click="foldShow = !foldShow"> <img src="@/assets/images/bjybz/choose.png" title="折叠/展开" style="vertical-align: middle"></div>
              </td>
              <th>
                <el-button size="medium" type="primary" @click="queryData()" icon="el-icon-search" style="position: absolute;top:2px;right:0px">查询</el-button>
              </th>
            </tr>
          </table>
        </div>
        <div class="search-wrapper" v-show="nowModel === 'zzyd' || nowModel === 'jyyd'">
          <table>
            <tr>
              <th>地块名称</th>
              <td>
                <el-input size="medium" v-model="query.name" placeholder="地块名称" style="width: 100%" clearable></el-input>
              </td>
              <th>权利人名称</th>
              <td>
                <el-input size="medium" v-model="query.name1" placeholder="权利人名称" style="width: 100%" clearable></el-input>
              </td>
            </tr>
          </table>
          <table>
            <tr>
              <th>面积(亩)</th>
              <td colspan="2">
                <el-input size="medium" v-model="query.small" placeholder="面积小" style="width: 75%" clearable></el-input>
                <span style="color: white;margin-left: 15px">-</span>
              </td>
              <td>
                <el-input size="medium" v-model="query.big" placeholder="面积大" style="width: 70%" clearable></el-input>
              </td>
              <th>
                <el-button size="medium" type="primary" @click="queryData()" icon="el-icon-search" style="position: absolute;top:2px;right:0px">查询</el-button>
              </th>
            </tr>
          </table>
        </div>
        <div class="search-wrapper" v-show="nowModel === 'lsyd'">
          <table>
            <tr>
              <th>项目名称</th>
              <td>
                <el-input size="medium" v-model="query.name" placeholder="项目名称" style="width: 100%" clearable></el-input>
              </td>
              <th>建设单位名称</th>
              <td>
                <el-input size="medium" v-model="query.name1" placeholder="建设单位名称" style="width: 100%" clearable></el-input>
              </td>
            </tr>
          </table>
          <table>
            <tr>
              <th>面积(亩)</th>
              <td colspan="2">
                <el-input size="medium" v-model="query.small" placeholder="面积小" style="width: 75%" clearable></el-input>
                <span style="color: white;margin-left: 15px">-</span>
              </td>
              <td>
                <el-input size="medium" v-model="query.big" placeholder="面积大" style="width: 70%" clearable></el-input>
              </td>
              <th>
                <el-button size="medium" type="primary" @click="queryData()" icon="el-icon-search" style="position: absolute;top:2px;right:0px">查询</el-button>
                <el-button size="medium"  type="primary" @click="importCoordinate()" icon="el-icon-top" style="position: absolute;top:2px;right:110px">导入</el-button>
              </th>
            </tr>
          </table>
        </div>
        <div class="xm-wrapper" v-show="nowModel === 'gyyd'">
          <div class="item-box" v-for="(item, index) in list" :key="index" @click="xzClick(item)" :title="item.tdqlr">
            <div class="left-xzq">
              <div class="top-title">{{ index + 1 }}<span>.</span>{{ item.tdqlr }}</div>
              <div class="bottom-xzq">
                <img src="@/assets/images/YsbzView/location.png" alt="">
                {{ item.szx }}{{ item.szxz && '-' + item.szxz }}
              </div>
              <div class="bottom-xzq text-ellipsis">
                <span class="sssr-title">用地批准时间：</span> <span class="sssr-value">{{ dateFormat(item.ydpzsj) }}</span> <span class="sssr-unit"></span>
                <span class="sssr-title">面积：</span>
                <span class="sssr-value">{{ item.sjydmj && (item.sjydmj * 0.0015).toFixed(2) }}</span>
                <span class="sssr-unit">亩</span>
              </div>
            </div>
          </div>
        </div>
        <div class="xm-wrapper" v-show="nowModel === 'syyd'">
          <div class="item-box" v-for="(item, index) in list" :key="index" @click="xzClick(item)" :title="item.项目名称">
            <div class="left-xzq">
              <div class="top-title">{{ index + 1 }}<span>.</span>{{ item.项目名称 }}</div>
              <div class="bottom-xzq">
                <img src="@/assets/images/YsbzView/location.png" alt="">
                滨江区
                <span class="sssr-title">面积：</span>
                <span class="sssr-value">{{ item.总用地面积 && (item.总用地面积 * 0.0015).toFixed(2) }}</span>
                <span class="sssr-unit">亩</span>
              </div>
              <div class="bottom-xzq text-ellipsis">
                <span class="sssr-title">建设单位：</span> <span class="sssr-value">{{ item.建设单位 }}</span> <span class="sssr-unit"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="xm-wrapper" v-show="nowModel === 'zzyd' || nowModel === 'jyyd'">
          <div class="item-box" v-for="(item, index) in list" :key="index" @click="xzClick(item)" :title="item.dkmc">
            <div class="left-xzq">
              <div class="top-title">{{ index + 1 }}<span>.</span>{{ item.dkmc }}</div>
              <div class="bottom-xzq">
                <img src="@/assets/images/YsbzView/location.png" alt="">
                滨江区
                <span class="sssr-title">面积：</span>
                <span class="sssr-value">{{ item.txmj && (item.txmj * 0.0015).toFixed(2) }}</span>
                <span class="sssr-unit">亩</span>
              </div>
              <div class="bottom-xzq text-ellipsis">
                <span class="sssr-title">签订日期：</span> <span class="sssr-value">{{ dateFormat(item.qdrq) }}</span> <span class="sssr-unit"></span>
              </div>
              <div class="bottom-xzq text-ellipsis">
                <span class="sssr-title">权利人：</span> <span class="sssr-value">{{ item.tdqlr }}</span> <span class="sssr-unit"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="xm-wrapper" v-show="nowModel === 'lsyd'">
          <div class="item-box" v-for="(item, index) in list" :key="index" @click="xzClick(item)" :title="item.xmmc">
            <div class="left-xzq">
              <div class="top-title">{{ index + 1 }}<span>.</span>{{ item.xmmc }}</div>
              <div class="bottom-xzq">
                <img src="@/assets/images/YsbzView/location.png" alt="">
                滨江区
                <span class="sssr-title">面积：</span>
                <span class="sssr-value">{{ item.spmj && (item.spmj * 0.0015).toFixed(2) }}</span>
                <span class="sssr-unit">亩</span>
              </div>
              <div class="bottom-xzq text-ellipsis">
                <span class="sssr-title">发证时间：</span> <span class="sssr-value">{{ dateFormat(item.fzsj) }}</span> <span class="sssr-unit"></span>
              </div>
              <div class="bottom-xzq text-ellipsis">
                <span class="sssr-title">到期时间：</span> <span class="sssr-value">{{ dateFormat(item.dqsj) }}</span> <span class="sssr-unit"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-div">
        <el-pagination
          background
          ref="test"
          layout="prev, pager, next"
          :total="config.total"
          :page-size="config.page.count"
          :page-sizes="[10, 20, 30]"
          :current-page="config.page.index"
          @current-change="pageToMe"
          @size-change="changePageMe"
        >
        </el-pagination>
      </div>
    </cart-item>
    <Modal v-model="isImportCoordinate" title="导入坐标" :footer-hide="true">
      <Upload
        :before-upload="handleUpload"
        style="display: inline-block"
        accept=".txt,.TXT"
        action=""
      >
        <Button icon="ios-cloud-upload-outline">选择文件</Button>
      </Upload>
      <Button
        type="primary"
        style="position: absolute; right: 120px"
        :loading="loadingStatus"
        @click="uploadTxt"
      >上传</Button>
      <Button style="position: absolute; right: 20px" @click="openHelpPage">帮助说明</Button>
      <div v-if="txtFile !== null" style="color: red">
        选择的文件: {{ txtFile.name }}
      </div>
      <p style="margin-top:8px;font-weight:bold;font-size:16px">提示：如果界址点数量很多，需要等待比较长的时间。</p>
    </Modal>
    <Modal
      v-model="isErrorVisiable"
      title="提示"
      :footer-hide="true"
    >
      <p v-for="(item, index) in uploadErrorList" :key="index">{{ item }}</p>
    </Modal>
  </div>
</template>

<script>
import CartItem from "@/views/components/CartItem.vue";
export default {
  name: "FourContent",
  components:{
    CartItem
  },
  data() {
    return {
      mj: 0,
      zs: 0,
      query: {
        xzqdm: '',
        name: '',
        name1: '',
        id: '',
        big: '',
        small: '',
        rjlBig: '',
        rjlSmall: '',
        jzmdBig: '',
        jzmdSmall: '',
        ssBig: '',
        ssSmall: '',
      },
      options: [
        {
            "label": "西兴街道",
            "value": "330108001"
        },
        {
            "label": "长河街道",
            "value": "330108002"
        },
        {
            "label": "浦沿街道",
            "value": "330108003"
        },
      ],
      list: [
      ],
      config: {
        page: {
          count: 10,
          index: 1
        },
        total: 0
      },
      foldShow: false,
      nowModel: 'gyyd',
      txtFile:null,
      loadingStatus: false,
      isImportCoordinate: false,
      uploadErrorList: [],
      isErrorVisiable: false,
    }
  },
  mounted() {
    // if (this.$route['query']['type']) {
    //   setTimeout(()=>{
    //     this.valChange(this.$route['query']['type'])
    //   },50)
    // } else {
      this.valChange('gyyd')
    // }
  },
  methods: {
    initGyyd() {
      this.initGyydHZ()
      this.initGyydListData();
    },
    initLsyd() {
      this.initLsydHZ()
      this.initLsydListData();
    },
    initSyyd() {
      this.initSyydHZ()
      this.initSyydListData();
    },
    initZzyd() {
      this.initZzydHZ()
      this.initZzydListData();
    },
    initJyyd() {
      this.initJyydHZ()
      this.initJyydListData();
    },
    handleUpload(file) {
      this.txtFile = file
      return false
    },
    openHelpPage() {
      window.open('/部系统界址点格式文档.html')
    },
    importCoordinate() {
      this.isImportCoordinate = true
      this.txtFile = null
    },
    async uploadTxt() {
      if (!this.txtFile) {
        this.$Message.error('请选择文件！')
        return
      }
      this.loadingStatus = true
      const formData = new FormData()
      formData.append('file', this.txtFile)
      const urlStr = '/api/ybz-bj/uploadTxt'
      const response = await this.$ajax.post(urlStr, formData, this)
      if (response.success) {
        this.isImportCoordinate = false
        const errorList = response.data.errorList
        if (!errorList || !errorList.length) {
          this.$Message.success('上传界址点成功！')
        } else {
          this.isErrorVisiable = true
          this.uploadErrorList = errorList
        }
        this.queryData();
      } else {
        this.isErrorVisiable = true
        this.uploadErrorList = [response.message]
      }
      this.loadingStatus = false
      return false
    },
    queryData() {
      if (this.nowModel === 'gyyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-gyyd-new')
        this.initGyyd()
        let refreshP = "1=1"
        if (this.query.xzqdm) {
          refreshP += ` and xzqdm like '${this.query.xzqdm}%'`
        }
        if (this.query.name) {
          refreshP += ` and tdqlr like '%${this.query.name}%'`
        }
        if (this.query.small) {
          let num = this.query.small / 0.0015;
          refreshP += ` and sjydmj >= ${num}`
        }
        if (this.query.big) {
          let num = this.query.big / 0.0015;
          refreshP += ` and sjydmj <= ${num}`
        }
        if (this.query.rjlSmall) {
          refreshP += ` and sjrjl >= ${this.query.rjlSmall}`
        }
        if (this.query.rjlBig) {
          refreshP += ` and sjrjl <= ${this.query.rjlBig}`
        }
        if (this.query.ssSmall) {
          refreshP += ` and ss2022 >= ${this.query.ssSmall}`
        }
        if (this.query.ssBig) {
          refreshP += ` and ss2022 <= ${this.query.ssBig}`
        }
        if (this.query.jzmdSmall) {
          refreshP += ` and sjjzmd >= ${this.query.jzmdSmall}`
        }
        if (this.query.jzmdBig) {
          refreshP += ` and sjjzmd <= ${this.query.jzmdBig}`
        }
        if (refreshP !== '1=1') {
          refreshP = refreshP.replace("1=1 and ", '')
        }
        // this.$vm.$emit("updateLayer", {id: "bj-gyyd-new",param: refreshP,layerIdx1: 0,layerIdx2: 1})
      } else if (this.nowModel === 'syyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'syyd')
        this.initSyyd()
      } else if (this.nowModel === 'zzyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-zzyd-new')
        this.initZzyd()
      } else if (this.nowModel === 'lsyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-lsyd')
        this.initLsyd()
      } else if (this.nowModel === 'jyyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-jyyd')
        this.initJyyd()
      }
      setTimeout(()=>{
        this.$vm.$emit("switchLayerShow", true);
      }, 500)
    },
    initLsydHZ() {
      let p = {
        ...this.query
      }
      const urlApi = `/api/ybz-bj/lsydHZ`;
      this.$ajax.get(urlApi, p, this, false).then(result=>{
        const { sl,mj } = result.data
        this.zs = sl
        this.mj = mj
      })
    },
    initLsydListData() {
      const urlApi = `/api/ybz-bj/lsydList`;
      let p = {
        ...this.query,
        pageIndex: this.config.page.index,
        pageSize: this.config.page.count
      }
      this.$ajax.get(urlApi, p, this, false).then((result) => {
        const data = result["data"] || {};
        this.list = data['list'];
        this.config.total = data['total']
      });
    },
    initGyydHZ() {
      let p = {
        ...this.query
      }
      const urlApi = `/api/ybz-bj/gyydHZ`;
      this.$ajax.get(urlApi, p, this, false).then(result=>{
        const { sl,mj } = result.data
        this.zs = sl
        this.mj = mj
      })
    },
    initGyydListData() {
      const urlApi = `/api/ybz-bj/gyydList`;
      let p = {
        ...this.query,
        pageIndex: this.config.page.index,
        pageSize: this.config.page.count
      }
      this.$ajax.get(urlApi, p, this, false).then((result) => {
        const data = result["data"] || {};
        this.list = data['list'];
        this.config.total = data['total']
      });
    },
    initSyydHZ() {
      let p = {
        ...this.query
      }
      const urlApi = `/api/ybz-bj/syydHZ`;
      this.$ajax.get(urlApi, p, this, false).then(result=>{
        const { sl,mj } = result.data
        this.zs = sl
        this.mj = mj
      })
    },
    initSyydListData() {
      const urlApi = `/api/ybz-bj/syydList`;
      let p = {
        ...this.query,
        pageIndex: this.config.page.index,
        pageSize: this.config.page.count
      }
      this.$ajax.get(urlApi, p, this, false).then((result) => {
        const data = result["data"] || {};
        this.list = data['list'];
        this.config.total = data['total']
      });
    },
    initZzydHZ() {
      let p = {
        ...this.query
      }
      const urlApi = `/api/ybz-bj/zzydHZ`;
      this.$ajax.get(urlApi, p, this, false).then(result=>{
        const { sl,mj } = result.data
        this.zs = sl
        this.mj = mj
      })
    },
    initZzydListData() {
      const urlApi = `/api/ybz-bj/zzydList`;
      let p = {
        ...this.query,
        pageIndex: this.config.page.index,
        pageSize: this.config.page.count
      }
      this.$ajax.get(urlApi, p, this, false).then((result) => {
        const data = result["data"] || {};
        this.list = data['list'];
        this.config.total = data['total']
      });
    },
    initJyydHZ() {
      let p = {
        ...this.query
      }
      const urlApi = `/api/ybz-bj/jyydHZ`;
      this.$ajax.get(urlApi, p, this, false).then(result=>{
        const { sl,mj } = result.data
        this.zs = sl
        this.mj = mj
      })
    },
    initJyydListData() {
      const urlApi = `/api/ybz-bj/jyydList`;
      let p = {
        ...this.query,
        pageIndex: this.config.page.index,
        pageSize: this.config.page.count
      }
      this.$ajax.get(urlApi, p, this, false).then((result) => {
        const data = result["data"] || {};
        this.list = data['list'];
        this.config.total = data['total']
      });
    },
    // 点击上一页、下一页以及指定页
    pageToMe (index) {
      this.config.page.index = index;
      if (this.nowModel === 'gyyd') {
        this.initGyydListData();
      } else if (this.nowModel === 'syyd') {
        this.initSyydListData();
      } else if (this.nowModel === 'zzyd') {
        this.initZzydListData();
      } else if (this.nowModel === 'lsyd') {
        this.initLsydListData();
      }
    },
    // 改变每页显示的条数
    changePageMe (size) {
      this.config.page.count = size;
      this.initGyydListData();
    },
    xzClick(item) {
      if (this.nowModel === 'gyyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-gyyd-new')
        setTimeout(() => {
          this.$emit('clickCallback', item, 'bj-gyyd-new')
          this.$vm.$emit("location-feature-where", { layerId: 'bj-gyyd-new', where: `dksyh = '${item.dksyh}'`, setting: {outFields: 'dksyh,szx,szxz,sjydmj,tdqlr'} })
        }, 100)
      } else if (this.nowModel === 'syyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'syyd')
        setTimeout(()=>{
          this.$emit('clickCallback', item, 'syyd')
          this.$vm.$emit("location-feature-where", { layerId: 'syyd', where: `"新增调查地" = '${item.新增调查地}'`, setting: {outFields: '新增调查地,项目名称,总用地面积,建设单位'} })
        },100)
      } else if (this.nowModel === 'zzyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-zzyd-new')
        setTimeout(()=>{
          this.$emit('clickCallback', item, 'bj-zzyd-new')
          this.$vm.$emit("location-feature-where", { layerId: 'bj-zzyd-new', where: `id = '${item.id}'`, setting: {outFields: 'id,dkmc,tdqlr,txmj,tdyt'} })
        }, 100)
      } else if (this.nowModel === 'lsyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-lsyd')
        setTimeout(()=>{
          this.$emit('clickCallback', item, 'bj-lsyd')
          this.$vm.$emit("location-feature-where", { layerId: 'bj-lsyd', where: `xh = '${item.xh}'`, setting: {outFields: 'objectid,xh,xmmc,spmj,jsdw'} })
        }, 100)
      } else if (this.nowModel === 'jyyd') {
        this.$vm.$emit("setVisibleLayerIdEvent", 'bj-jyyd')
        setTimeout(()=>{
          this.$emit('clickCallback', item, 'bj-jyyd')
          this.$vm.$emit("location-feature-where", { layerId: 'bj-jyyd', where: `id = '${item.id}'`, setting: {outFields: 'id,dkmc,tdqlr,txmj,tdyt'} })
        }, 100)
      }
      setTimeout(()=>{
        this.$vm.$emit("switchLayerShow", true);
      }, 100)
    },
    dateFormat(date) {
      if (date === null || date === undefined || date === "") {
        return ''
      }
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var mStr = m < 10 ? '0' + m : m.toString();
      var dStr = d < 10 ? '0' + d : d.toString();
      return y + "-" + mStr + '-' + dStr;
    },
    valChange(name) {
      this.nowModel = name
      this.foldShow = false
      this.mj = 0,
      this.zs = 0,
      this.list = [];
      this.config.page.index = 1;
      this.config.page.count = 10;
      this.config.total = 0;
      this.query = {
        xzqdm: '',
        name: '',
        name1: '',
        id: '',
        big: '',
        small: '',
        rjlBig: '',
        rjlSmall: '',
        jzmdBig: '',
        jzmdSmall: '',
        ssBig: '',
        ssSmall: ''
      }
      this.$vm.$emit("location-mask-self-where", { layerId: 'xzqh-x-search', where: `xzqdm = '330108'` });
      this.queryData()
    }
  }
}
</script>

<style scoped lang="scss">
.FourContent {
  height: 100%;
  position: relative;
  overflow: hidden;
  ::v-deep .content {
    display: flex;
    flex-direction: column;
  }
  .title-tabs {
    position: absolute;
    right: 10px;
    top: 8px;
    display: inline-block;
    width: 300px;
    display: flex;
    background: #003B7C;
    height: 30px;
    color: #fff;
    border-radius: 5px;
    .tab {
      flex: 1;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      border-right: 1px solid #468EC0;
      border-top: 1px solid #468EC0;
      border-bottom: 1px solid #468EC0;
      font-weight: bold;
      &:first-child {
        border-radius: 5px 0 0 5px;
      }
      &:last-child {
        border-radius: 0 5px 5px 0;
      }
      &.selected,&:hover {
        background: #25F7FF;
        font-size: 15px;
      }
    }
  }
  .change-panel-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    padding: 0 10px 0 40px;
    .panel-i {
      font-size: 16px;
      color: #FFF;
      cursor: pointer;
      &:hover,&.selected {
        font-size: 20px;
        cursor: pointer;
        font-weight: bold;
        color: #25F7FF;
        border-bottom: 2px solid #25F7FF;
      }
    }
    .split {
      color: #FFF;
    }
  }
  ::v-deep .select {
    position: absolute;
    top: 5px;
    left: 20px;
    background: transparent;
    .el-input {
      input {
        border: none;
        font-size: 22px;
        font-weight: bold;
        color: #FFF;
        background: transparent;
      }
      .el-input__suffix {
        .el-input__suffix-inner {
          .el-select__caret {
            color: #FFF;
          }
        }
      }
    }
  }
  .xm-list{
    .statistics-wrapper {
      margin-bottom: 10px;
      border-radius: 5px;
      background: #1b366a;
      padding: 10px 20px;
      .statistics-item {
          width: 50%;
          .item-left-icon {
              width: 44px;
              height: 44px;
              margin-right: 15px;
              margin-top: 2px;
          }
          .text {
              span {
                  font-size: 18px;
                  font-family: MicrosoftYaHei;
                  color: #FFF;
                  &.num {
                    font-size: 20px;
                      font-weight: bold;
                  }
              }
          }
      }
    }
    ::v-deep .search-wrapper {
      table {
        width: 100%;
        tr {
          height: 40px;
          td,th {
            position: relative;
            .el-input {
              input {
                color: rgba(135, 193, 255, 1);
                background: transparent;
                border: 1px solid #4F91D7;
                &::-webkit-input-placeholder {
                  /* WebKit browsers，webkit内核浏览器 */
                  color: rgba(135, 193, 255, 0.8);
                }
                &:-moz-placeholder {
                  /* Mozilla Firefox 4 to 18 */
                  color: rgba(135, 193, 255, 0.8);
                }
                &::-moz-placeholder {
                  /* Mozilla Firefox 19+ */
                  color: rgba(135, 193, 255, 0.8);
                }
                &:-ms-input-placeholder {
                  /* Internet Explorer 10+ */
                  color: rgba(135, 193, 255, 0.8);
                }
              }
            }
          }
          th {
            width: 20%;
            font-size: 16px;
            color: rgba(135, 193, 255, 1);
          }
          td {
            width: 30%;
            .el-select {
              .el-select__tags {
                input {
                  color: rgba(135, 193, 255, 1);
                }
                span {
                  .el-tag {
                    border: 1px solid #4F91D7;
                    background: transparent;
                    .el-select__tags-text {
                      color: rgba(135, 193, 255, 1);
                    }
                    .el-tag__close {
                      color: rgba(135, 193, 255, 1);
                      background: transparent;
                      border: 1px solid #4F91D7;
                    }
                  }
                }
              }
            }
            .submit-btn {
              color: #133887;
              background: #56C1FF;
              float: right;
              &:hover {
                color: #FFF;
              }
            }
          }
        }
      }
      @keyframes rollIn {
        0% {
          opacity: 0;
          height: 0;
          transform: translateY(-100%);
        }
        100% {
          opacity: 1;
          height: 128px;
          transform: translateY(0);
        }
      }
      @keyframes rollOut {
        0% {
          height: 128px;
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          height: 0;
          transform: translateY(-100%);
        }
      }
      /*滚入——从上侧*/
      .rollIn {
        animation: rollIn 0.3s;
      }
      /*滚出——从上侧*/
      .rollOut {
        animation: rollOut 0.3s;
      }
      .fold-wrapper {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 30px;
        line-height: 32px;
        height: 32px;
        border-radius: 5px;
        color: #FFF;
        background: transparent;
        border: 1px solid #4F91D7;
        box-shadow: inset 0 0 10px #4F91D7;
        font-weight: normal;
        padding-left: 2px;
        cursor: pointer;
        font-size: 14px;
        &:hover {
          color: rgba(135, 193, 255, 1);
        }
      }
    }
    .xm-wrapper {
      flex: 1;
      overflow-y: auto;
      margin-top: 5px;
      .item-box{
        // height: 80px;
        // line-height: 45px;
        background: rgba(27,54,104,.3);
        border: .0625rem solid #395fa5;
        cursor: pointer;
        margin-bottom: 8px;
        display: flex;
        padding-bottom: 10px;
        &:hover {
          background: linear-gradient(90deg,#0e66bf,#0c2b68);
        }
        .left-xzq{
          // width: 360px;
          // height: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
          .top-title {
            width: 100%;
            padding-top: .625rem;
            padding-left: 1.25rem;
            font-size: 20px;
            font-family: Alibaba PuHuiTi;
            font-weight: 700;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 400;
          }
          .bottom-xzq {
            width: 100%;
            // height: 1.5625rem;
            padding-left: 1.25rem;
            font-size: 1rem;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #25f7ff;
            margin-top: 5px;
            img{
              width: 20px;
              vertical-align: sub;
            }
            .sssr-title {
              margin-left: 20px;
              color: #ffd100;
            }
            .sssr-value {
              font-size: 18px;
            }
            .sssr-unit {
              color: #fff;
            }
          }
        }
        .right-des{
          height: 30px;
          border-radius: 5px;
          padding: 5px 10px;
          text-align: center;
          color: #FFF;
          margin-top: 24px;
          font-size: 13px;
          font-weight: bold;
          &.yes {
            background: #00BC77 !important;
            .color-circle {
              background: #0CBF97;
            }
          }
          &.no {
            // background: #009FFB;
            background: orange;
            .color-circle {
              background: orange;
            }
          }
          .color-circle {
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .page-div {
    // height: 50px;
    padding-top: 10px;
    text-align: center;
    ::v-deep {
      .el-pagination .el-select .el-input {
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #114f8f !important;
        color: #1ea0f7 !important;
      }
      .el-input__inner {
        -webkit-appearance: none;
        background-color: #04376c;
        background-image: none;
        border-radius: 0.25rem;
        border: 0.0625rem solid #3264da !important;
        box-sizing: border-box;
        color: #fff !important;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        outline: 0;
        padding: 0 0.9375rem;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      }
      .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        margin: 0 0.3125rem;
        background-color: #04376c ;
        color: #fff;
        min-width: 1.875rem;
        border-radius: 0.125rem;
      }
    }

  }
}
</style>