kdyjs_ui/src/views/KDYJS.vue

<template>
  <div class="kdyjs" v-if="show">
    <div class="container">
      <div class="top">
        <div class="switchContainer">
          <div :class="{ 'switchItem': true, active: switchValue }" @click="changeModel">查询开店限制</div>
          <div :class="{ 'switchItem': true, active: !switchValue }" @click="changeModel">开店选址</div>
        </div>
      </div>
      <div class="left">
        <div :class="content_css">
          <el-input v-model="searchHZSKeyWord" placeholder="请输入您想开店的地址" class="input-with-select">
            <template #prepend>
              <el-button>
                <el-icon>
                  <Search />
                </el-icon>
              </el-button>
            </template>
            <template #append>
              <el-button @click="searchAddress">搜索</el-button>
            </template>
          </el-input>
          <div class="addressPanel" v-show="addressPanelShow">
            <el-scrollbar>
              <ul>
                <li v-for="(item, index) in searchResultList" :key="index" @click="judgeHandle(item)">
                  <!-- <div class="name">{{ item.name }}</div> -->
                  <div class="name" v-if="isMobile">{{ index + 1 }}.&nbsp; &nbsp;{{ item.address }}</div>
                  <el-tooltip :content="item.address" placement="right-start" :hide-after="5" v-if="!isMobile">
                    <div class="name">{{ index + 1 }}.&nbsp; &nbsp;{{ item.address }}</div>
                  </el-tooltip>
                </li>
              </ul>
            </el-scrollbar>
          </div>

          <!-- v-show="resultPanelShow" -->
          <div class="resultPanel1" v-show="resultPanelShow">
            <el-scrollbar>
              <!-- <div class="JZItem" v-show="!analysisResult['餐饮服务项目']">
                <div class="detail">{{ JZText.cy }}</div>
                <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策</div>
              </div>
              <div class="JZItem" v-show="!analysisResult['互联网上网服务营业场所']">
                <div class="detail">{{ JZText.hlw }}</div>
                <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
              </div>
              <div class="JZItem" v-show="!analysisResult['娱乐场所']">
                <div class="detail">{{ JZText.ylcs }}</div>
                <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
              </div>
              <div class="JZItem" v-show="!analysisResult['烟草制品零售点']">
                <div class="detail">{{ JZText.yc }}</div>
                <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
              </div>
              <div class="JZItem" v-show="!analysisResult['噪声污染']">
                <div class="detail">{{ JZText.zy }}</div>
                <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
              </div> -->
              <!-- #FFB400 -->
              <div class="JZItem">
                <!-- style="color:#00FF00" -->
                <div class="detail" style="color:#FFB400">{{ JZText.cy }}</div>
                <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策
                </div>
              </div>
              <div class="JZItem">
                <div class="detail" v-if="analysisResult['互联网上网服务营业场所']" style="color:#00FF00">{{ allowText.hlw }}</div>
                <div class="detail" v-if="!analysisResult['互联网上网服务营业场所']" style="color:#FF0000">{{ JZText.hlw }}</div>
                <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
              </div>
              <div class="JZItem">
                <div class="detail" v-if="analysisResult['娱乐场所']" style="color:#00FF00">{{ allowText.ylcs }}</div>
                <div class="detail" v-if="!analysisResult['娱乐场所']" style="color:#FF0000">{{ JZText.ylcs }}</div>
                <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
              </div>
              <div class="JZItem">
                <div class="detail" v-show="analysisResult['烟草制品零售点']" style="color:#00FF00">{{ allowText.yc }}</div>
                <div class="detail" v-show="!analysisResult['烟草制品零售点']" style="color:#FF0000">{{ JZText.yc }}</div>
                <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
              </div>
              <div class="JZItem">
                <div class="detail" v-if="analysisResult['噪声污染']" style="color:#00FF00">{{ allowText.zy }}</div>
                <div class="detail" v-if="!analysisResult['噪声污染']" style="color:#FF0000">{{ JZText.zy }}</div>
                <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
              </div>
            </el-scrollbar>
          </div>
          <div class="resultPanel2" v-show="resultPanelShow">
            <div class="title">该地址周边500m内</div>
            <div class="resultPanel2content">
              <el-scrollbar>
                <ul v-if="nearShopResult.length > 0">
                  <li v-for="(item, index) in nearShopResult" :key="index">
                    <div class="name" v-if="item.name == '周边市民投诉次数'">{{ item.name }}：{{ item.num }}次</div>
                    <div class="name" v-else>{{ item.name }}：{{ item.num }}家</div>
                  </li>
                </ul>
                <div v-else>暂无周边信息</div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: relative;">
      <el-drawer
            v-model="resultPanelShow_mb"
            :title= drawer_title
            style="z-index: 9999;color: #fff;
            pointer-events: auto;
            width: 100%;
            height: 400px;
            background: #01346f99;
            padding: 10px 10px;
            box-sizing: border-box;
            position: fixed;
            overflow: hidden;"
            :direction="direction"
            :before-close="handleDrawerClose"
            :modal="false"
          >

          <el-tabs
            v-model="drawerActiveName"
            class="demo-tabs"
            @tab-click="handleDrawerClick"
          >
            <el-tab-pane label="政策" name="1">
                <div class="resultPanel1-mb">
                    <div class="JZItem">
                      <!-- style="color:#00FF00" -->
                      <div class="detail" style="color:#FFB400">{{ JZText.cy }}</div>
                      <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策
                      </div>
                    </div>
                    <div class="JZItem">
                      <div class="detail" v-if="analysisResult['互联网上网服务营业场所']" style="color:#00FF00">{{ allowText.hlw }}</div>
                      <div class="detail" v-if="!analysisResult['互联网上网服务营业场所']" style="color:#FF0000">{{ JZText.hlw }}</div>
                      <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
                    </div>
                    <div class="JZItem">
                      <div class="detail" v-if="analysisResult['娱乐场所']" style="color:#00FF00">{{ allowText.ylcs }}</div>
                      <div class="detail" v-if="!analysisResult['娱乐场所']" style="color:#FF0000">{{ JZText.ylcs }}</div>
                      <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
                    </div>
                    <div class="JZItem">
                      <div class="detail" v-show="analysisResult['烟草制品零售点']" style="color:#00FF00">{{ allowText.yc }}</div>
                      <div class="detail" v-show="!analysisResult['烟草制品零售点']" style="color:#FF0000">{{ JZText.yc }}</div>
                      <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
                    </div>
                    <div class="JZItem">
                      <div class="detail" v-if="analysisResult['噪声污染']" style="color:#00FF00">{{ allowText.zy }}</div>
                      <div class="detail" v-if="!analysisResult['噪声污染']" style="color:#FF0000">{{ JZText.zy }}</div>
                      <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
                    </div>
                  </div>
            </el-tab-pane>
            <el-tab-pane label="周边500m内" name="2">
                <div class="resultPanel2-mb">
                  <div class="resultPanel2content">
                      <ul v-if="nearShopResult.length > 0">
                        <li v-for="(item, index) in nearShopResult" :key="index">
                          <div class="name" v-if="item.name == '周边市民投诉次数'">{{ item.name }}：{{ item.num }}次</div>
                          <div class="name" v-else>{{ item.name }}：{{ item.num }}家</div>
                        </li>
                      </ul>
                      <div v-else>暂无周边信息</div>
                  </div>
                </div>
            </el-tab-pane>
          </el-tabs>
        </el-drawer>
    </div>
    <div class="kdyjs-overlay" v-if="dialogVisible">
      <div :class="isMobile == true ? 'kdyjs-dialog-mb' : 'kdyjs-dialog'">
        <div class="kdyjs-header">
          <div class="close" @click="handleClose">×</div>
        </div>
        <div class="kdyjs-body">
          {{ zcText[zcIndex] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { toRaw } from "vue";
import { ElMessage } from 'element-plus';
import UTIL from '@/utils/util'
export default {
  props:{
     message: {
   		type: Object
	 }
  },
  // 监听 ref
  watch: {
    // 监听 message 属性
    message(newVal) {
      this.drawer_title = newVal.properties['店铺名称'];
    }
  },
  data() {
    return {
      show: false,
      dialogVisible: false,
      mapData: {},
      switchValue: true,
      searchHZSKeyWord: "",
      searchResultList: [],

      isMobile:false,
      content_css:'content-mb',
      drawer: true,
      direction:'btt',
      drawer_title: '',
      resultPanelShow_mb: false,
      drawerActiveName: '1',

      addressPanelShow: false,
      resultPanelShow: false,

      mapPoints: [],

      nearShopResult: [],

      // http://121.43.55.7:8889/geoserver/kdyjs/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=kdyjs%3AScientificResearch_buffer&outputFormat=application%2Fjson&CQL_FILTER=contains(the_geom%2Cpoint(121.13540649414062%2031.1539363861084))
      // http://121.43.55.7:8889/geoserver/kdyjs/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=kdyjs%3AScientificResearch_buffer&outputFormat=application%2Fjson&CQL_FILTER=contains(the_geom%2Cpoint(11.13540649414062%201.1539363861084))

      allowText: {
        cy: webConfig.allowText.cy,
        hlw: webConfig.allowText.hlw,
        ylcs: webConfig.allowText.ylcs,
        yc: webConfig.allowText.yc,
        zy: webConfig.allowText.zy,
      },
      JZText: {
        cy: webConfig.JZText.cy,
        hlw: webConfig.JZText.hlw,
        ylcs: webConfig.JZText.ylcs,
        yc: webConfig.JZText.yc,
        zy: webConfig.JZText.zy,
      },
      condition: {
        "餐饮服务项目": [], // 仅接口
        "互联网上网服务营业场所": [3], // 接口+图层
        "娱乐场所": [1, 3, 4, 5, 7, 8],// 接口+图层
        "烟草制品零售点": [3],// 仅图层
        "噪声污染": [1, 2, 3, 4, 5, 6],// 仅图层
      },
      // searchWFSLayerRoot: "http://121.43.55.7:8889/geoserver/kdyjs/wfs",
      searchWFSLayerRoot: webConfig.GEOSERVER_URL_WFS,
      searchWFSLayer: {
        1: {
          name: "院落面",
          layers: "kdyjs:CourtyardFace"
        },
        2: {
          name: "公园",
          layers: "kdyjs:park"
        },
        3: {
          name: "学校-缓冲区",
          layers: "kdyjs:school_buffer"
        },
        4: {
          name: "医疗-缓冲区",
          layers: "kdyjs:medical_buffer"
        },
        5: {
          name: "机关单位-缓冲区",
          layers: "kdyjs:GovernmentUnit_buffer"
        },
        6: {
          name: "科研单位-缓冲区",
          layers: "kdyjs:ScientificResearch_buffer"
        },
        7: {
          name: "机场车站",
          layers: "kdyjs:AirportStation"
        },
        8: {
          name: "文保单位-缓冲区",
          layers: "kdyjs:BunpArchitecture_buffer"
        }
      },
      analysisResult: {
        "餐饮服务项目": false,
        "互联网上网服务营业场所": false,
        "娱乐场所": false,
        "烟草制品零售点": false,
        "噪声污染": false
      },
      zcIndex: 0,
      zcText: [
        "根据《中华人民共和国大气污染防治法》规定,禁止在居民住宅楼、未配套设立专用烟道的商住综合楼以及商住综合楼内与居住层相邻的商业楼层内新建、改建、扩建产生油烟、异味、废气的餐饮服务项目。",
        "根据《互联网上网服务营业场所管理条例》规定中学、小学校园周围 200米范围内和居民楼住宅楼(院)内不得设立互联网上网服务营业场所。",
        "根据《娱乐场所管理办法》规定，娱乐场所不得设在下列地点:居民楼、博物馆、图书馆和被核定为文物保护单位的建筑物内，居民住宅区和学校、医院、机关周围，车站、机场等人群密集的场所，建筑物地下一层以下，与危险化学品仓库毗连的区域。",
        "根据《上海市烟草制品零售点合理布局规定》有下列情形之一的，不予设置烟草制品零售点:(一)无固定经营场所的;(二)经营场所与住所不相独立的;(三)一个经营场所内已经办理了烟草专卖零售许可证的;(四)利用自动售货机(柜)经营烟草制品的;(五)利用信息网络经营烟草制品的;(六)经营场所位于中小学、幼儿园师生出入口依法可步行最短距离50米范围内的;(七)经营场所基于安全因素等不适宜经营卷烟的。",
        "根据《上海市社会生活噪声污染防治办法》规定不得在噪声敏感建筑物集中区域(居民住宅周边、公园内外医疗区附近、写字楼办公区、文教科研区和以机关办公点为主的区域)内从事金属切割、石材和木材加工等易产生噪声污染的商业经营活动。",
      ]
    };
  },
  mounted() {
    let that = this;
    that.isMobile = UTIL.terminalType()
    document.onkeydown = function (event) {
      let keycode = event.keyCode;
      if (keycode == 13) {
        that.searchAddress();
      }
    };
  },
  methods: {
    open() {
      this.show = true;
      this.judgeLoadedMap();
    },
    close() {
      this.show = false;
      this.reset();
    },
    reset() {

    },
    judgeLoadedMap() {
      let that = this;
      // returnMapLoadStatus在Map组件中定义
      if (!returnMapLoadStatus()) {
        setTimeout(() => {
          that.judgeLoadedMap();
        }, 100);
      } else {
        registerModule("kdyjsyzt");
      }
    },
    handleDrawerClick(param){
      debugger
      console.log('[  ] >', param)
      this.drawerActiveName=param;
    },
    handleClose() {
      this.dialogVisible = false;
    },

    searchAddress() {
      let that = this;
      if (this.searchHZSKeyWord != "") {
        $.ajax({
          type: "post",
          dataType: 'json',
          url: webConfig.PROXY_URL + "/proxy/searchByNameV3",
          data: {
            address: toRaw(this.searchHZSKeyWord)
          },
          success: function (result) {
            that.clearPoints();
            that.nearShopResult = []
            if (result.code == 200) {
              that.addressPanelShow = true;
              that.resultPanelShow_mb = false;
              that.resultPanelShow = false;
              
              let obj = {}
              result.content.pois.map(function (item) {
                if (obj[item.address] == undefined) {
                  obj[item.address] = item
                }
              })
              that.searchResultList = Object.values(obj).slice(0, 10)
              // 地图加点
              that.addPoints();
            } else {
              that.addressPanelShow = true;
              that.resultPanelShow_mb = false;
              that.resultPanelShow = false;
              ElMessage({
                message: '未查到该地址或地址输入不准确！',
                type: 'warning',
                offset: 100
              })
            }
          },
          error: function (error) {
            that.clearPoints();
            that.nearShopResult = []
            // 提示未查到或地址输入不准确
            ElMessage({
              message: '未查到该地址或地址输入不准确！',
              type: 'warning',
              offset: 100
            })
            // console.log(error)
          }
        });
      } else {
        this.clearPoints();
        this.nearShopResult = []
        this.addressPanelShow = false;
        this.resultPanelShow = false;
        this.resultPanelShow_mb = false;
      }
    },

    // 添加地图点
    addPoints() {
      this.mapPoints = this.searchResultList.map(function (item, index) {
        return viewer.entities.add({
          position: SkyScenery.Cartesian3.fromDegrees(item.lon, item.lat),
          billboard: {
            image: "./static/image/point" + (index + 1) + ".png",
            width: 48, // default: undefined
            height: 48, // default: undefined
            scale: 1.0, // default: 1.0
            show: true, // default 
            horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER, // default
            verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM, // default: CENTER
          },
          // label: {
          //   text: (index + 1) + '', // 标签文本
          //   font: '18px', // 字体样式
          //   style: SkyScenery.LabelStyle.FILL_AND_OUTLINE, // 标签样式
          //   outlineColor: SkyScenery.Color.BLACK, // 轮廓颜色
          //   outlineWidth: 1, // 轮廓宽度
          //   // showBackground: true, // 是否显示背景
          //   backgroundColor: new SkyScenery.Color(0.165, 0.165, 0.165, 0), // 背景颜色及透明度
          //   pixelOffset: new SkyScenery.Cartesian2(0, -30), // 标签相对于位置的偏移量
          //   eyeOffset: new SkyScenery.Cartesian3(0.0, 0, -1.0)
          // }
        });
      })

    },
    // 清除地图点
    clearPoints() {
      this.mapPoints.map(function (eitity) {
        viewer.entities.remove(eitity)
      })
      this.mapPoints = []
    },

    // 点位触发监管调理展示 用在homeview.vue中
    clickPointJGTL(item) {
      this.searchHZSKeyWord = ""
      this.searchAddress();// 为清空地名地址而执行
      this.judgeHandle(item)
    },

    judgeHandle(item) {
      let that = this;
      item = toRaw(item);
      viewer.camera.flyTo({
        destination: SkyScenery.Cartesian3.fromDegrees(
          item.lon,
          item.lat,
          1200
        ), // 设置位置
        orientation: {
          heading: SkyScenery.Math.toRadians(0), // 方向
          pitch: SkyScenery.Math.toRadians(-90), // 倾斜角度
          roll: SkyScenery.Math.toRadians(0) // 倾斜角度
        }
      });

      // 餐饮服务项目

      // 互联网上网服务营业场所
      // 学校-缓冲区

      // 娱乐场所
      // 院落面 机场车站
      // 学校-缓冲区  医疗-缓冲区 机关单位-缓冲区 文保单位-缓冲区

      // 烟草制品零售点
      // 学校-缓冲区

      // 噪声污染
      // 院落面 公园
      // 学校-缓冲区 医疗-缓冲区 科研单位-缓冲区 机关单位-缓冲区
      // filter = "contains(the_geom,point(" + item.lon + "," + item.lat + "))"

      // 接口部分仅判断 0 1 2 项
      
      this.searchHZSKeyWord = item.address
      this.drawer_title = item.address
      let interfaceUrl = webConfig.KDYJS_URL + "/kdyjs/shop/bannedThings?address=" + item.address + "&lon=" + item.lon + "&lat=" + item.lat + "&distance=200"
      let interfacePro = fetch(interfaceUrl).then(response => response.json())
      let arr = this.judgeWMSLayer(item)
      arr.push(interfacePro);
      let listKeysArr = Object.keys(toRaw(this.searchWFSLayer));
      let wmsReObj = {}
      Promise.all(arr).then(responses => {
        // index 0 1 2 3 4 5 6 7
        // num   1 2 3 4 5 6 7 8 
        listKeysArr.map(function (num, index) {
          wmsReObj[num] = that.returnWMSTF(responses[index])
        })
        // {
        //   "code": 200,
        //   "message": "成功查找禁止事项;已查找临近商铺;",
        //   "content": {
        //     "nearShops": {
        //       "日用百货": [
        //         {
        //           "address": "浦仓路431号一层三层",
        //           "daolu": "浦仓路",
        //           "distance": 5.3541856061937,
        //           "fuzeren": "汪天明",
        //           "juwei": "汪天明",
        //           "lat": 31.151888159569506,
        //           "lon": 121.11629585158316,
        //           "name": "古峰茶业",
        //           "note": "",
        //           "phone": "1.3501728776E10",
        //           "resultAddress": "浦仓路431号",
        //           "select": "日用百货"
        //         }
        //       ],
        //       "棋牌室": [
        //         {
        //           "address": "浦仓路431号二层",
        //           "daolu": "浦仓路",
        //           "distance": 17.861235684391577,
        //           "fuzeren": "凌致健",
        //           "juwei": "凌致健",
        //           "lat": 31.152094038499538,
        //           "lon": 121.11628182127089,
        //           "name": "茶馆",
        //           "note": "",
        //           "phone": "1.5000227E10",
        //           "resultAddress": "浦仓路433号1104室",
        //           "select": "棋牌室"
        //         }
        //       ],
        //       "超市": [
        //         {
        //           "address": "浦仓路427号底层",
        //           "daolu": "浦仓路",
        //           "distance": 0.0,
        //           "fuzeren": "周克香",
        //           "juwei": "周克香",
        //           "lat": 31.15193514579631,
        //           "lon": 121.11630785830405,
        //           "name": "来伊份",
        //           "note": "",
        //           "phone": "1.8901780259E10",
        //           "resultAddress": "浦仓路427号",
        //           "select": "超市"
        //         }
        //       ],
        //       "餐饮": [
        //         {
        //           "address": "浦仓路433号",
        //           "daolu": "浦仓路",
        //           "distance": 17.861235684391577,
        //           "fuzeren": "苏昌佃",
        //           "juwei": "苏昌佃",
        //           "lat": 31.152094038499538,
        //           "lon": 121.11628182127089,
        //           "name": "沙县小吃",
        //           "note": "",
        //           "phone": "1.7705985514E10",
        //           "resultAddress": "浦仓路433号1104室",
        //           "select": "餐饮"
        //         },
        //         {
        //           "address": "浦仓路421弄18号三层",
        //           "daolu": "浦仓路",
        //           "distance": 6.932930592886758,
        //           "fuzeren": "钟瑞成",
        //           "juwei": "钟瑞成",
        //           "lat": 31.151883136689268,
        //           "lon": 121.1162678269042,
        //           "name": "肋排屋",
        //           "note": "",
        //           "phone": "1.7750396739E10",
        //           "resultAddress": "浦仓路421弄10-14号",
        //           "select": "餐饮"
        //         },
        //         {
        //           "address": "浦仓路421弄22号二层",
        //           "daolu": "浦仓路",
        //           "distance": 6.932930592886758,
        //           "fuzeren": "冯善飞",
        //           "juwei": "冯善飞",
        //           "lat": 31.151883136689268,
        //           "lon": 121.1162678269042,
        //           "name": "两王一炸",
        //           "note": "",
        //           "phone": "1.500063716E10",
        //           "resultAddress": "浦仓路421弄10-14号",
        //           "select": "餐饮"
        //         }
        //       ]
        //     },
        //     "foundPlace": {
        //       "address": "浦仓路771号",
        //       "banned": "0,2",
        //       "latitude": 31.155799865722656,
        //       "longitude": 121.12115478515625
        //     },
        //     "bannedThings": [
        //       "RESTAURANT",
        //       "RECREATION_SITE"
        //     ]
        //   }
        // }
        let interfaceResult = responses[responses.length - 1];
        // that.analysisResult["餐饮服务项目"]
        // that.analysisResult["互联网上网服务营业场所"]
        // that.analysisResult["娱乐场所"]
        // that.analysisResult["烟草制品零售点"]
        // that.analysisResult["噪声污染"]
        if (interfaceResult.content.foundPlace != undefined) {
          let arr = interfaceResult.content.foundPlace.banned.split(",").map(num => Number(num))
          // 餐饮
          if (arr.indexOf(0) > -1) that.analysisResult["餐饮服务项目"] = false;
          // 互联网
          if (arr.indexOf(1) > -1) {
            that.analysisResult["互联网上网服务营业场所"] = false
          } else {
            if (wmsReObj[3]) {
              that.analysisResult["互联网上网服务营业场所"] = false
            } else {
              that.analysisResult["互联网上网服务营业场所"] = true
            }
          }
          // 娱乐
          if (arr.indexOf(2) > -1) {
            that.analysisResult["娱乐场所"] = false;
          } else {
            if (wmsReObj[1] || wmsReObj[3] || wmsReObj[4] || wmsReObj[5] || wmsReObj[7] || wmsReObj[8]) {
              that.analysisResult["娱乐场所"] = false
            } else {
              that.analysisResult["娱乐场所"] = true
            }
          }
        } else {
          // 餐饮
          that.analysisResult["餐饮服务项目"] = true;
          // 互联网
          if (wmsReObj[3]) {
            that.analysisResult["互联网上网服务营业场所"] = false
          } else {
            that.analysisResult["互联网上网服务营业场所"] = true
          }
          // 娱乐
          if (wmsReObj[1] || wmsReObj[3] || wmsReObj[4] || wmsReObj[5] || wmsReObj[7] || wmsReObj[8]) {
            that.analysisResult["娱乐场所"] = false
          } else {
            that.analysisResult["娱乐场所"] = true
          }
        }
        // 烟草
        if (wmsReObj[3]) {
          that.analysisResult["烟草制品零售点"] = false
        } else {
          that.analysisResult["烟草制品零售点"] = true
        }
        // 噪声
        if (wmsReObj[1] || wmsReObj[2] || wmsReObj[3] || wmsReObj[4] || wmsReObj[5] || wmsReObj[6]) {
          that.analysisResult["娱乐场所"] = false
        } else {
          that.analysisResult["娱乐场所"] = true
        }

        // 周边商铺
        let arr1 = Object.keys(interfaceResult.content.nearShops);
        let nearShopResult = arr1.map(function (field, index) {
          return {
            name: field,
            num: interfaceResult.content.nearShops[field].length
          }
        })
        if (interfaceResult.content.report) {
          nearShopResult.unshift({
            name: "周边市民投诉次数",
            num: interfaceResult.content.report
          })
        } else {
          nearShopResult.unshift({
            name: "周边市民投诉次数",
            num: 0
          })
        }

        that.nearShopResult = nearShopResult
        if(that.isMobile){
            that.addressPanelShow = false
            if(that.resultPanelShow_mb != true){
                that.resultPanelShow_mb = true;
            }
        }else{
          that.resultPanelShow = true
          
        }
       
      }).catch(error => console.log("error", error));
    },
    
    returnWMSTF(result) {
      if (result.features.length == 0) {
        return false; // 无交集
      } else {
        return true // 有交集
      }
    },

    judgeWMSLayer(item) {
      let that = this;
      let listValuesArr = Object.values(toRaw(this.searchWFSLayer));
      return listValuesArr.map(function (values) {
        let endUrl = that.searchWFSLayerRoot + "?typeName=" + values.layers + "&service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json"
        endUrl = endUrl + "&CQL_FILTER=" + encodeURI("contains(the_geom,point(" + item.lon + " " + item.lat + "))");
        return fetch(endUrl).then(response => response.json())
      })
    },

    changeModel(type) {
      let judge = toRaw(this.switchValue);
      if (type != "init") this.switchValue = !judge
      if (this.switchValue) {
        // 文旅资源
        console.log("文旅资源")
      } else {
        // 旅游路线
        console.log("旅游路线")
      }
    },

    handleDrawerClose(){
      console.log('[ eeee ] >')
      let that = this;
      that.resultPanelShow = false
      that.resultPanelShow_mb = false;
    }
  }
};
</script>

<style lang="less" scoped>

/deep/ .el-drawer__header{
  color: #fff;
  margin: 0;
  padding: 0;
}
/deep/ .el-tabs__item{
  color: #ffffff;
}
/deep/ .el-tabs__content{
    flex-grow: 1;
    overflow: auto;
    position: relative;
    height: 160px;  
}
/deep/ .el-drawer__body{
  flex: 1;
  padding: 0;
  overflow: hidden;
}
/deep/ .el-drawer__title{
  text-align: center;
  font-weight: bold;
}

.kdyjs {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;

  .container {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: relative;

    .top {
      display: none;
      width: 240px;
      position: absolute;
      top: 90px;
      left: calc(50% - 120px);
      color: #ffffff;
      text-align: center;
      pointer-events: auto;

      .switchContainer {
        background: #082e67;
        border-radius: 20px;
        height: 40px;
        line-height: 40px;
        overflow: hidden;

        .switchItem {
          width: 120px;
          font-size: 16px;
          text-align: center;
          display: inline-block;
          cursor: pointer;
          user-select: none;

          &.active {
            background: #0b4daf;
          }
        }
      }
    }

    .left {
      pointer-events: none;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 480px;
      height: 100%;
      padding: 0px 40px 20px 0px;
      margin-top: 68px;
      box-sizing: border-box;

      .content {
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: relative;
        padding-left: 30px;
        padding-top: 20px;
        box-sizing: border-box;
        color: #ffffff;

        .el-input {
          pointer-events: auto;
          border: 2px solid #01346f99;
          border-radius: 5px;
        }

        .addressPanel {
          pointer-events: auto;
          margin-top: 10px;
          width: 100%;
          height: 200px;
          background: #01346f99;
          padding: 10px 10px;
          box-sizing: border-box;
          overflow: hidden;
          overflow-y: auto;

          ul {
            margin: 0 0;
            padding: 0 0;

            li {
              list-style: none;
              cursor: pointer;
              border-bottom: 1px solid #eeeeee;
              padding-bottom: 10px;
              margin-bottom: 10px;

              .name {
                font-size: 18px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .address {
                font-size: 14px;
              }
            }
          }
        }

        .resultPanel1 {
          pointer-events: auto;
          margin-top: 10px;
          width: 100%;
          height: 220px;
          background: #01346f99;
          padding: 10px 10px;
          padding-right: 0px;
          box-sizing: border-box;

          .JZItem {
            width: 100%;
            margin-bottom: 15px;
            cursor: pointer;
            position: relative;
            padding-right: 10px;
            box-sizing: border-box;

            .detail {
              width: calc(100% - 110px);
              min-height: 36px;
              // text-shadow: 0.5px 0.5px 2px #ffffff;
            }

            .checkZC {
              position: absolute;
              top: 0px;
              right: 10px;
              border: 1px solid #ffffff;
              padding: 0px 5px;
              border-radius: 5px;
              font-size: 16px;

              &:hover {
                background: #01346f99;
              }
            }
          }
        }

        .resultPanel2 {
          pointer-events: auto;
          margin-top: 10px;
          width: 100%;
          height: 260px;
          background: #01346f99;
          padding: 10px 10px;
          box-sizing: border-box;

          .title {
            height: 24px;
            line-height: 24px;
            font-size: 20px;
            margin-bottom: 20px;
          }

          .resultPanel2content {
            height: 200px;
            overflow: hidden;
            overflow-y: auto;

            ul {
              margin: 0 0;
              padding: 0 0;

              li {
                list-style: none;
                cursor: pointer;
                border-bottom: 1px solid #eeeeee;
                padding-bottom: 10px;
                margin-bottom: 10px;

                .name {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }


  .resultPanel1-mb {
          pointer-events: auto;
          margin-top: 10px;
          width: 100%;
          padding: 5px;
          padding-right: 0px;
          box-sizing: border-box;
          overflow-y: auto;
          .JZItem {
            width: 100%;
            margin-bottom: 15px;
            cursor: pointer;
            position: relative;
            padding-right: 10px;
            box-sizing: border-box;

            .detail {
              width: calc(100% - 110px);
              min-height: 36px;
              // text-shadow: 0.5px 0.5px 2px #ffffff;
            }

            .checkZC {
              position: absolute;
              top: 0px;
              right: 10px;
              border: 1px solid #ffffff;
              padding: 0px 5px;
              border-radius: 5px;
              font-size: 16px;

              &:hover {
                background: #01346f99;
              }
            }
          }
        }
        .resultPanel2-mb {
          pointer-events: auto;
          width: 100%;
          padding: 5px;
          box-sizing: border-box;
          overflow-y: auto;

          .title {
            height: 24px;
            line-height: 24px;
            font-size: 20px;
            margin-bottom: 20px;
          }

          .resultPanel2content {
            height: 200px;
            overflow: hidden;
            overflow-y: auto;

            ul {
              margin: 0 0;
              padding: 0 0;

              li {
                list-style: none;
                cursor: pointer;
                border-bottom: 1px solid #ebebeb2e;
                padding-bottom: 10px;
                margin-bottom: 10px;

                .name {
                  font-size: 16px;
                }
              }
            }
          }
        }
      .content-mb {
        pointer-events: none;
        width: 100%;
        // height: 100%;
        position: relative;
        padding-left: 10px;
        padding-right: 60px;
        padding-top: 20px;
        box-sizing: border-box;
        color: #ffffff;

        .el-input {
          pointer-events: auto;
          border: 2px solid #01346f99;
          border-radius: 5px;
        }

        .addressPanel {
          pointer-events: auto;
          margin-top: 10px;
          width: 100%;
          height: 200px;
          background: #01346f99;
          padding: 10px 10px;
          box-sizing: border-box;
          overflow: hidden;
          overflow-y: auto;

          ul {
            margin: 0 0;
            padding: 0 0;

            li {
              list-style: none;
              cursor: pointer;
              border-bottom: 1px solid #eeeeee;
              padding-bottom: 10px;
              margin-bottom: 10px;

              .name {
                font-size: 18px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .address {
                font-size: 14px;
              }
            }
          }
        }

        .resultPanel1 {
          pointer-events: auto;
          margin-top: 10px;
          width: 100%;
          height: 220px;
          background: #01346f99;
          padding: 10px 10px;
          padding-right: 0px;
          box-sizing: border-box;

          .JZItem {
            width: 100%;
            margin-bottom: 15px;
            cursor: pointer;
            position: relative;
            padding-right: 10px;
            box-sizing: border-box;

            .detail {
              width: calc(100% - 110px);
              min-height: 36px;
              // text-shadow: 0.5px 0.5px 2px #ffffff;
            }

            .checkZC {
              position: absolute;
              top: 0px;
              right: 10px;
              border: 1px solid #ffffff;
              padding: 0px 5px;
              border-radius: 5px;
              font-size: 16px;

              &:hover {
                background: #01346f99;
              }
            }
          }
        }

        .resultPanel2 {
          pointer-events: auto;
          margin-top: 10px;
          width: 100%;
          height: 260px;
          background: #01346f99;
          padding: 10px 10px;
          box-sizing: border-box;

          .title {
            height: 24px;
            line-height: 24px;
            font-size: 20px;
            margin-bottom: 20px;
          }

          .resultPanel2content {
            height: 200px;
            overflow: hidden;
            overflow-y: auto;

            ul {
              margin: 0 0;
              padding: 0 0;

              li {
                list-style: none;
                cursor: pointer;
                border-bottom: 1px solid #eeeeee;
                padding-bottom: 10px;
                margin-bottom: 10px;

                .name {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }

  .kdyjs-overlay {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 6;
    background: #00000080;
    user-select: none;

    .kdyjs-dialog {
      position: relative;
      top: calc(50% - 222px);
      left: calc(50% - 211px);
      width: 422px;
      height: 444px;
      background: url(~@/assets/images/u133.png) no-repeat center center/100% 100%;
      overflow: hidden;

      .kdyjs-header {
        width: 100%;
        height: 60px;
        line-height: 40px;
        color: #ffffff;
        text-align: center;
        font-size: 20px;
        font-weight: bold;

        .close {
          position: absolute;
          top: 0px;
          right: 0px;
          float: right;
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #00dbff;
          font-weight: bold;
          font-size: 20px;

          cursor: pointer;
        }
      }

      .kdyjs-body {
        width: 100%;
        height: calc(100% - 60px);
        padding: 10px 26px 36px 26px;
        box-sizing: border-box;
        color: #ffffff;
        text-indent: 20px;
      }
    }

    .kdyjs-dialog-mb {
      position: relative;
      top: calc(50% - 222px);
      height: 300px;
      background: url(http://localhost:2118/kdyjs/img/u133.e1a3de44.png) no-repeat center center / 100% 100%;
      overflow: hidden;

      .kdyjs-header {
        width: 100%;
        height: 60px;
        line-height: 40px;
        color: #ffffff;
        text-align: center;
        font-size: 20px;
        font-weight: bold;

        .close {
          position: absolute;
          top: 0px;
          right: 0px;
          float: right;
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #00dbff;
          font-weight: bold;
          font-size: 20px;

          cursor: pointer;
        }
      }

      .kdyjs-body {
        width: 100%;
        height: calc(100% - 60px);
        padding: 10px 26px 36px 26px;
        box-sizing: border-box;
        color: #ffffff;
        text-indent: 20px;
      }
    }
  }
}
</style>