CSPON/web_ui/src/views/znzt-land/AiZtzsDetail.vue

<template>
  <div class="industria-land-detail">
    <div class="left-content">
      <Tree :data="data4" show-checkbox multiple></Tree>
    </div>
    <div class="map-content">
      <div class="content">
        <div :id="id" class="map">
          <div
            class="radar-scan-an"
            v-show="radarShow"
            :style="`width: ${radarScanStyle.width}; heigth: ${radarScanStyle.height}; top: ${radarScanStyle.top};left: ${radarScanStyle.left};`"
          ></div>
        </div>
        <div class="right-tool">
          <div class="layer-container">
            <div
              class="layer-panel"
              :class="{ checked: showLayerControl }"
              @click="toggleLayerControl"
            >
              <img
                src="~@/assets/image/icon-layer-checked.png"
                class="img"
                v-if="showLayerControl"
              />
              <img src="~@/assets/image/icon-layer.png" class="img" v-else />
              <span :class="{ c: showLayerControl }">图层控制</span>
            </div>
            <div class="layer-content-border" v-if="showLayerControl">
              <vue-perfect-scrollbar class="layer-content" :settings="settings">
                <div
                  class="item"
                  v-for="(item, index) in layers"
                  :key="index + '-13'"
                >
                  <div class="name">
                    {{ item.name }}
                  </div>
                  <div
                    class="item"
                    v-for="(_item, _index) in item.layers"
                    :key="_index + '-14'"
                    style="margin: 5px 0"
                  >
                    <Checkbox
                      v-model="_item.checked"
                      class="checkbox"
                      @click.native.stop=""
                      @on-change="switchMapLayer(_item)"
                      >{{ _item.name }}
                    </Checkbox>
                  </div>
                </div>
              </vue-perfect-scrollbar>
            </div>
          </div>
        </div>

        <div v-if="!showQuery" class="topdiv">
          <div class="m-textarea-panel">
            <textarea
              v-model="inputText"
              type="text"
              autocapitalize="off"
              autocomplete="off"
              spellcheck="false"
              autocorrect="off"
              placeholder="您可以试着这样问我，如“请帮我查一下萧山区永久基本农田面积大于100亩的地块”"
              autofocus=""
            >
            </textarea>
            <AIBtn @send="hotQuestionReset()" />
          </div>
        </div>
        <vue-perfect-scrollbar
          :settings="settings"
          class="left-panel"
          v-if="showQuery"
        >
          <div class="left-panel-content">
            <div v-for="(item, index) in hzData" :key="index">
              <div class="title" @click="resetAnswer(index)">
                {{ item.name }}
              </div>
              <div class="jsz" v-if="item.loading && !showResult">
                <Spin />
                {{ hintText }}
              </div>

              <div class="tab-content" v-if="!showResult">
                <div class="summary-content">
                  <div class="summary-icon">
                    <img src="~@/assets/image/cyyd/summary-icon.png" />
                  </div>
                  <vue-markdown-it
                    :source="item.summary"
                    :options="{
                      html: true,
                      linkify: true,
                    }"
                  />
                </div>
              </div>
            </div>
            <template v-if="showResult">
              <div class="xg-title">
                <img src="~@/assets/image/cyyd/fk.png" />
                <div class="name">回答</div>
              </div>
              <p class="xg-des">
                为您找到以下{{ xgdk ? xgdk.length : 0 }}个地块
              </p>
              <div class="table-panel">
                <template v-if="xgdk && xgdk.length > 0">
                  <div
                    class="dkitem1"
                    :class="{ dkitemchecked1: i == dkIndex }"
                    @mouseover="mouseover(i)"
                    @mouseout="mouseout(i)"
                    @click="showDetailModal(citem, i)"
                    v-for="(citem, i) in xgdk"
                    :key="i"
                  >
                    <div class="number">{{ i + 1 }}</div>
                    <div class="content">
                      <h3>
                        {{ citem.dlmc }}
                      </h3>
                      <p>
                        <span class="content-item"
                          >行政区名称:{{
                            citem.xzqmc ? citem.xzqmc : "-"
                          }}</span
                        >
                        <span class="content-item"
                          >面积:{{
                            citem.yjjbnttbmj
                              ? (citem.yjjbnttbmj * 0.0015).toFixed(2)
                              : 0
                          }}亩</span
                        >
                      </p>
                    </div>
                  </div>
                </template>
                <div v-else class="hintText">未查询到相关地块数据！</div>
              </div>

              <div class="xg-title" v-if="false">
                <img src="~@/assets/image/cyyd/xgdk.png" />
                <div class="name">相关组织</div>
                <img src="~@/assets/image/cyyd/xs.png" />
              </div>
              <div class="table-panel" v-if="false">
                <div class="th" v-if="xgzz.length > 0">
                  <div class="it xh">序号</div>
                  <div class="it">组织名称</div>
                  <div class="it">组织描述</div>
                </div>
                <div v-else>暂无数据</div>
                <div class="tr" v-for="(item, i) in xgzz" :key="i">
                  <div class="it xh">{{ i + 1 }}</div>
                  <div class="it">
                    {{ item.name }}
                  </div>
                  <div class="it">{{ item.zzms }}</div>
                </div>
              </div>
            </template>
            <Spin size="large" class="span" fix v-if="loading"></Spin>
          </div>
          <div class="textarea-panel">
            <textarea
              v-model="zwinputText"
              type="text"
              autocapitalize="off"
              autocomplete="off"
              spellcheck="false"
              autocorrect="off"
              maxlength="1000"
              placeholder="请提问"
              autofocus=""
            >
            </textarea>
            <AIBtn @send="zwsend" :disabled="btnSendDisabled" />
          </div>
        </vue-perfect-scrollbar>
        <!-- <feek-back
          ref="feek"
          @close="hideFeekBackModal"
          :question="querQuestion"
          :answer="answer"
        ></feek-back> -->
      </div>
    </div>

    <Modal
      class="info-modal"
      footer-hide
      v-model="questionModal"
      :styles="{ top: '200px' }"
      width="40%"
    >
      <textarea
        class="input"
        v-model="input"
        type="text"
        autocapitalize="off"
        autocomplete="off"
        spellcheck="false"
        enterkeyhint="reset"
        autocorrect="off"
        placeholder="请输入，Enter发送"
        autofocus=""
        @keyup.enter.stop="reset()"
      ></textarea>
      <div class="bottom">
        <div class="name" @click="input = ''">清空</div>
        <div class="send-btn" @click="reset">发送</div>
      </div>
    </Modal>
  </div>
</template>
<script>
import industrialTop from "@/components/IndustrialTop";
import L from "leaflet";
import Proj from "proj4leaflet";
import ArrayQueue from "@/struct/ArrayQueue";
import axios from "axios";
import { arcgisToGeoJSON } from "@terraformer/arcgis";
import loginMethods from "@/api/login";
import { v4 as uuid } from "uuid";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import dynamicMapLayer from "esri-leaflet/src/Layers/DynamicMapLayer";
import * as turf from "@turf/turf";
import { getWmtsLayer } from "@/util/leaflet";
import wkt from "wellknown";
import VueMarkdownIt from "vue-markdown-it";
import landMethods from "@/api/land";
import AIBtn from "@/components/AIBtn.vue";
import LC from "@/assets/layerConfig.js";
export default {
  components: {
    industrialTop,
    VueMarkdownIt,
    AIBtn,
  },
  data() {
    return {
      data4: [
        {
          title: "parent 1",
          expand: true,
          selected: true,
          children: [
            {
              title: "parent 1-1",
              expand: true,
              children: [
                {
                  title: "leaf 1-1-1",
                  disabled: true,
                },
                {
                  title: "leaf 1-1-2",
                },
              ],
            },
            {
              title: "parent 1-2",
              expand: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  checked: true,
                },
                {
                  title: "leaf 1-2-1",
                },
              ],
            },
          ],
        },
      ],
      geoLayer: null,
      nearMarkerList: [],
      radarScanStyle: {
        width: "100%",
        height: "100%",
        left: 0,
        top: 0,
      },
      hzData: [],
      showQuery: false,
      radarShow: false,
      btnSendDisabled: false,
      input: "",
      inputText: "",
      shwoCompare: false,
      shwoCollect: false,
      answer: "",
      markerLayer: null,
      questionModal: false,
      showLegend: true,
      hintText: "思考中...",
      dkIndex: -1,
      hoverDkIndex: -1,
      summary: "",
      wt: null,
      count: 0,
      activeItem: { id: 1 },
      id: "industriaMap" + new Date().getTime(),
      layers: [],
      mContentVisabled: true,
      showResult: false,
      showDetail: false,
      zoomLevel: 8,
      zhuiwen: false,
      dkGeo: null,
      dkGeoJson: null,
      activeIndex: 0,
      tabIndex: 0,
      map: null,
      xgzz: [],
      zoom: 0,
      xgdk: [],
      interval: null,
      zwinputText: "",
      loading: false,
      ctrlAbout: null,
      eventSource: null,
      messages: [],
      gInterval: 3 * 1000 * 60,
      checkInterval: null,
      histories: new ArrayQueue(5),
      tabs: ["全部建设用地", "新建建设用地", "存量建设用地"],
      steps: [
        {
          name: "问题分析",
        },
        {
          name: "地块搜索",
        },
        {
          name: "整理答案",
        },
        {
          name: "回答完成",
        },
      ],
      querQuestion: "",
      settings: {
        maxScrollbarLength: 60,
      },
      geojsonLayer: null,
      wktToGeojsonLayer: null,
      identifyGeojsonLayer: null,
      type: null,
      modal: false,
      showTableModal: true,
      showLayerControl: false,
      polyline: null,
      dkMarkerLayer: [],
      startTime: 0,
      showIndentify: false,
      detailData: null,
      cyyqLayer: null,
      legend: [
        {
          name: "可利用资源",
          children: [
            {
              name: "公告地块",
              fill: "green",
              border: "green",
            },
            {
              name: "计划地块",
              fill: "blue",
              border: "blue",
            },
          ],
        },
      ],

      mockInterval: null,
    };
  },
  mounted() {
    this.mapExtend();
    this.$nextTick(() => {
      this.activeIndex = 0;
      this.initMap();

      // this.showResult = true;
      // this.showQuery = true;
      // this.xgdk = [
      //   {
      //     objectid: 1898278,
      //     xzqmc: "萧山区",
      //     xzqdm: 330109,
      //     dymc: "",
      //     yddm: "M1",
      //     ydxz: "一类工业用地",
      //     ydmj: 4.11,
      //     rjlsx: 3,
      //     rjlxx: 1,
      //     jzmdsx: 1,
      //     jzmdxx: 1,
      //     jzgdsx: 1,
      //     jzgdxx: 1,
      //     ldlsx: 1,
      //     ldlxx: 1,
      //     center_wkt: "POINT(120.532207502681 30.1664883620282)",
      //     geom: "POLYGON((120.530131556 30.168314732,120.530525256 30.168215047,120.530878871 30.168123523,120.531632501 30.16792846,120.531631828 30.167926322,120.531631117 30.167924192,120.531630373 30.167922072,120.531629593 30.16791996,120.531544007 30.167693986,120.531364964 30.167155818,120.531320061 30.167020849,120.530246946 30.167281865,120.530103254 30.166849934,120.529762626 30.165826014,120.52896681 30.166024878,120.528937662 30.166031967,120.528908402 30.166038698,120.528879035 30.166045068,120.528849567 30.166051076,120.528820004 30.166056722,120.528833696 30.166089628,120.52889148 30.166213522,120.528920385 30.166204896,120.528934816 30.166238378,120.529183192 30.166165913,120.529253176 30.1663749,120.529253546 30.16637481,120.529253601 30.166374968,120.52926568 30.166371977,120.529271071 30.166384946,120.529000619 30.166485071,120.5290278 30.166544188,120.529126001 30.16671611,120.529200817 30.166846306,120.529267328 30.166968542,120.529310181 30.167048353,120.529381231 30.167243535,120.529403943 30.167305507,120.529514176 30.167606297,120.529609137 30.16787516,120.529736109 30.168180701,120.529812571 30.168370639,120.529820607 30.168391677,120.530131556 30.168314732))",
      //   },
      //   {
      //     objectid: 2091,
      //     xzqmc: "萧山区",
      //     xzqdm: 330109,
      //     dymc: "",
      //     yddm: "M1",
      //     ydxz: "一类工业用地",
      //     ydmj: 4.01,
      //     rjlsx: 3,
      //     rjlxx: 1,
      //     jzmdsx: 1,
      //     jzmdxx: 1,
      //     jzgdsx: 1,
      //     jzgdxx: 1,
      //     ldlsx: 1,
      //     ldlxx: 1,
      //     center_wkt: "POINT(120.527286218151 30.1681019850924)",
      //     geom: "POLYGON((120.537755625 30.180120155,120.538096026 30.180016897,120.538130112 30.180101238,120.53840443 30.180038604,120.538635688 30.179985801,120.538690742 30.179973231,120.538668558 30.179921898,120.538503023 30.179568443,120.538319597 30.179176783,120.538294432 30.179132302,120.538240693 30.179138349,120.537922455 30.179225031,120.537918655 30.17921591,120.537917661 30.179213054,120.537557113 30.178312381,120.537309966 30.177721942,120.536887458 30.177806658,120.536126249 30.178008438,120.53612485 30.178011462,120.536106701 30.178054671,120.53611147 30.178067168,120.536192522 30.178279549,120.536845675 30.179858098,120.536847251 30.179861474,120.537580483 30.179665201,120.537724753 30.180063279,120.537726707 30.18006447,120.537726917 30.180065118,120.537735187 30.180062925,120.537755625 30.180120155))",
      //   },
      //   {
      //     objectid: 1924,
      //     xzqmc: "萧山区",
      //     xzqdm: 330109,
      //     dymc: "物流产业单元",
      //     yddm: "M1",
      //     ydxz: "一类兼容二类工业用地",
      //     ydmj: 3.95,
      //     rjlsx: 3,
      //     rjlxx: 1,
      //     jzmdsx: 1,
      //     jzmdxx: 1,
      //     jzgdsx: 1,
      //     jzgdxx: 1,
      //     ldlsx: 1,
      //     ldlxx: 1,
      //     center_wkt: "POINT(120.485180194156 30.2474354153549)",
      //     geom: "POLYGON((120.502129268 30.168593076,120.501546244 30.167333288,120.501537309 30.167317156,120.501526002 30.167302191,120.500703524 30.167926949,120.499290933 30.168947797,120.499089718 30.169139869,120.499102336 30.169156599,120.499478655 30.169583076,120.499495744 30.169599471,120.499515679 30.169613228,120.499537927 30.169623978,120.499561893 30.169631437,120.499586937 30.169635401,120.499612391 30.169635768,120.499637573 30.169632527,120.49966181 30.169625764,120.500722401 30.169244194,120.502044364 30.168768574,120.502068293 30.168757769,120.502089718 30.168743538,120.502107997 30.168726308,120.50212258 30.168706597,120.50213303 30.168684996,120.502139035 30.168662151,120.502140414 30.16863875,120.502137126 30.168615492,120.502129268 30.168593076))",
      //   },
      // ];
      // this.addGdLayer(this.xgdk);
      // this.detailData = {
      //   id: 48668,
      //   dkid: "1895353609416212480",
      //   xzqmc: "萧山区",
      //   dkmc: "湘湖国家旅游度假区建设工矿仓储项目",
      //   address: "位于萧山区义桥镇，东至空地，南至空地，西至空地，北至云临路。",
      //   dkmj: 60.714,
      //   tdyt: "工业用地",
      //   tax: "100",
      //   center_wkt: "POINT(120.912063 29.486802)",
      // };
      // this.showDetail = true;
    });
  },
  created() {
    if (this.$route.params && this.$route.params.keyword) {
      this.inputText = this.$route.params.keyword;
    }
    this.zwinputText = "";
    this.type = this.$route.params.type;
  },

  methods: {
    toggleContentVisabledAll() {
      this.mContentVisabled = !this.mContentVisabled;
      this.xgdk.forEach((item) => {
        item["show"] = this.mContentVisabled;
      });
    },
    toggleContentVisabled(item) {
      item["show"] = item["show"] ? false : true;
      this.mContentVisabled = item["show"];
    },
    mapExtend() {
      // 18级的地图
      L.TileLayer.MyTileLayer2 = L.TileLayer.extend({
        getTileUrl: function (coords) {
          return L.Util.template(this._url, {
            x: coords.x,
            y: coords.y,
            z: coords.z - 1,
          });
        },
      });
    },
    addGdLayer(dklist) {
      if (this.geoLayer) {
        this.map.removeLayer(this.geoLayer);
        this.geoLayer = null;
      }
      let that = this;
      if (dklist && dklist.length) {
        let idGroup = dklist.map((item) => item.objectid);
        let sql = "(" + idGroup.join(",") + ")";
        let queryGeometryUrl = window.ApplicationConfig.queryGeometryListUrl;
        axios.get(queryGeometryUrl, { params: { items: sql } }).then((data) => {
          if (data && data.data && data.data.length) {
            let geojsonList = data.data.map((ele) => JSON.parse(ele.geom));
            that.geoLayer = L.geoJSON(geojsonList, {
              style: function (feature) {
                return { color: "blue" };
              },
            });
            that.geoLayer.addTo(that.map);
          }
        });
      }
    },
    toggleLayerControl() {
      this.showLayerControl = !this.showLayerControl;
      if (!this.showLegend) {
        this.showLegend = true;
      }
    },
    toggleIdentity() {
      this.showIndentify = !this.showIndentify;
      if (this.showIndentify) {
        this.map.on("click", this.mapClick);
      } else {
        this.map.off("click", this.mapClick);
        if (this.showDetail) {
          this.hideDetail();
        }
        if (this.identifyGeojsonLayer) {
          this.map.removeLayer(this.identifyGeojsonLayer);
        }
      }
    },
    back() {
      this.showDetail = false;
      this.showQuery = false;
      this.radarShow = false;
      if (this.dkMarkerLayer) {
        this.dkMarkerLayer.forEach((item) => {
          this.map.removeLayer(item);
        });
        this.dkMarkerLayer = [];
      }

      if (this.ctrlAbout) {
        this.ctrlAbout.abort();
      }
      this.loading = false;
      if (this.interval) {
        clearInterval(this.interval);
      }
      if (this.mockInterval) {
        clearInterval(this.mockInterval);
      }
      this.inputText = "";
    },
    checkPermision() {
      let that = this;
      loginMethods
        .permission()
        .then((res) => {
          if (res && res.code == 200) {
            that.permission = res.data;
            if (that.permission) {
              that.activeIndex = 0;
            }
          }
        })
        .finally(() => {
          if (!this.permission) {
            this.$Message.error("用户信息验证失败，请重新登录！");
            setTimeout(() => {
              this.logout();
            }, 1000);
          }
        });
    },
    fullInput(item) {
      if (!this.loading) {
        this.activeIndex = 0;
        this.inputText = item.name;
        this.showQuery = false;
      } else {
        this.$Messages.info("正在请求中，请稍后！");
      }
    },
    logout() {
      this.$store.dispatch("LogOut").then(() => {
        this.$router.push({ name: "login" });
      });
    },
    reset() {
      if (this.input == "" || this.input == null) {
        this.$Message.info("请输入");
        return;
      }
      // this.inputText = this.input;
      // this.zwinputText = "";
      // this.questionModal = false;
      // this.histories = new ArrayQueue(5);
      // // this.hzData = [];
      // // var item = { name: this.inputText, loading: true };
      // // this.hzData.push(item);
      // this.toggleTab(0);
      this.inputText = this.input;
      this.hotQuestionReset();
    },
    hotQuestionReset() {
      if (this.inputText == "" || this.inputText == null) {
        // this.$Message.info("请输入");
        // return;
        this.inputText = "请帮我查一下萧山区永久基本农田面积大于100亩的地块";
      }
      this.hideDetail();
      this.zwinputText = "";
      this.questionModal = false;
      this.histories = new ArrayQueue(5);
      if (this.geoLayer) {
        this.map.removeLayer(this.geoLayer);
        this.geoLayer = null;
      }
      if (this.geojsonLayer) {
        this.map.removeLayer(this.geojsonLayer);
        this.geojsonLayer = null;
      }
      this.toggleInfoTab();
      this.toggleTab(0);
    },
    zwsend() {
      if (!this.zwinputText) {
        this.zwinputText = "请帮我查一下萧山区永久基本农田面积大于100亩的地块";
      }
      // var item = { name: this.zwinputText, loading: true };
      // // this.hzData = [item]
      // this.hzData.push(item);
      // this.activeIndex = 0;
      // this.toggleInfoTab();
      // this.send();
      this.inputText = this.zwinputText;
      this.hotQuestionReset();
    },
    //ai超时超过3.5分钟 或者报错处理，结束请求提示未查询到信息
    checkTimeOut() {
      if (this.loading) {
        this.xgdk = [];
        this.activeIndex = 0;
        if (this.ctrlAbout) {
          this.ctrlAbout.abort();
        }
        this.loading = false;
        if (this.interval) {
          clearInterval(this.interval);
        }
        this.hzData.forEach((item, index) => {
          if (index == this.hzData.length - 1) {
            this.hzData[index].summary = "未查询到相关信息";
            this.hzData[index].loading = false;
            this.zwinputText = "";
          }
        });
        if (this.checkInterval) {
          clearInterval(this.checkInterval);
        }
        this.showResult = true;
        this.radarShow = false;
      }
    },
    resetAnswer(index) {
      if (index == 0) {
        this.input = this.inputText;
        this.questionModal = true;
      }
    },
    showFlowChart() {
      this.modal = true;
      this.$nextTick(() => {
        this.$refs.flow.open();
      });
    },

    hideModal() {
      this.modal = false;
    },
    hideFeekBackModal() {},
    showTableInfo() {
      this.showTableModal = true;
      this.$nextTick(() => {
        this.$refs.table.open();
      });
    },

    hideTableModal() {
      this.showTableModal = false;
    },
    //图层控制
    switchMapLayer(item) {
      if (item.checked) {
        if (item.layer === undefined || item.layer == null) {
          if (item.type == "dynamic") {
            item.layer = dynamicMapLayer({
              layers: [0],
              url: item.url,
              f: "image",
            });
          } else if (item.type == "geoserver") {
            item.layer = L.tileLayer.wms(item.url, {
              // 链接要改对应的
              layers: item.layername,
              format: "image/png",
              layerID: Math.random(),
              transparent: true,
            });
            item.layer.setZIndex(item.zindex);
          } else if (item.type == "wmts") {
            item.layer = getWmtsLayer(item);
            item.layer.setZIndex(item.zindex);
          } else if (item.type == "tile2") {
            item.layer = new L.TileLayer.MyTileLayer2(
              item.url + "/tile/{z}/{y}/{x}"
            );
            item.layer.setZIndex(item.zindex);
          }
        }
        this.map.addLayer(item.layer);
      } else {
        if (item.layer != undefined || item.layer != null) {
          this.map.removeLayer(item.layer);
        }
      }
    },

    initMap() {
      let CRS_4490 = new Proj.CRS(
        "EPSG:4490",
        "+proj=longlat +ellps=GRS80 +no_defs",
        {
          resolutions: [
            1.4062500262315807, 0.7031249999891485, 0.35156249999999994,
            0.17578124999999997, 0.08789062500000012, 0.04394531250000006,
            0.021972656250000007, 0.01098632812500002, 0.00549316406250001,
            0.0027465820312500017, 0.0013732910156250009, 6.866455078124991e-4,
            3.4332275390624957e-4, 1.7166137695312503e-4, 8.583068847656251e-5,
            4.291534423828141e-5, 2.1457672119140645e-5, 1.0728836059570307e-5,
            5.364418029785169e-6, 2.6822090642902305e-6, 1.3411045333348457e-6,
          ],
          origin: [-180, 90],
        }
      );
      this.layers = LC;
      this.layers.forEach((item, index) => {
        if (index == 0) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
      this.map = L.map(this.id, {
        zoom: window.ApplicationConfig.mapOptions["zoom"],
        center: window.ApplicationConfig.mapOptions["center"],
        zoomControl: false,
        crs: CRS_4490,
        attributionControl: false, //去掉右下角的logo
      });

      //默认加载所有选中图层
      this.layers.forEach((layerGroup) => {
        layerGroup.layers.forEach((oneLayer) => {
          this.switchMapLayer(oneLayer);
        });
      });
    },
    //属性识别
    mapClick(e) {
      if (this.identifyGeojsonLayer) {
        this.map.removeLayer(this.identifyGeojsonLayer);
      }
      // debugger
      let query =
        window.ApplicationConfig.landUrl +
        "/0/query?where=&text=&objectIds=&time=&geometry=" +
        e.latlng.lng +
        "," +
        e.latlng.lat +
        "&" +
        "geometryType=esriGeometryPoint&inSR=4490&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&" +
        "maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&" +
        "outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=json";
      axios.get(query).then((data) => {
        console.log(data);
        if (data.data.features.length < 1) {
          this.$Message.info("未查询到数据");
          return;
        }
        var land = data.data.features[0].attributes;
        var geojson = arcgisToGeoJSON(data.data.features[0].geometry);
        console.log(turf.getGeom(geojson));
        land.area = turf.area(turf.getGeom(geojson)).toFixed(2) + "平方米";
        var geos = L.geoJSON(geojson, {
          style: function (feature) {
            return { color: "#3BA5FF" };
          },
        });
        this.dkGeo = geos;
        this.dkGeoJson = geojson;
        this.identifyGeojsonLayer = geos.addTo(this.map);
        this.map.fitBounds(geos.getBounds());
        this.showDetailModal(land, -1);
      });
    },
    location(geo) {
      let t = L.geoJSON(geo, {
        style: function (feature) {
          return { color: "yellow" };
        },
      });
      this.map.fitBounds(t.getBounds());
    },
    //高亮marker
    hightMarker(i) {
      this.dkMarkerLayer.forEach((item, index) => {
        var className = "point-div-icon";
        if (item.options.properties.p == i && index == i) {
          className = "highlight-div-icon";
        }
        if (index == this.hoverDkIndex) {
          className = "highlight-div-icon";
        }
        if (index == this.dkIndex) {
          className = "highlight-div-icon";
        }
        var myIcon = L.divIcon({
          html: index > -1 ? "<div>" + (index + 1) + "<div>" : "<div><div>",
          className: className,
          iconSize: [32, 32],
        });
        item.setIcon(myIcon);
      });
    },
    //地块Item hover 和marker 高亮交互
    mouseover(i) {
      this.hoverDkIndex = i;
      this.hightMarker(i);
    },
    mouseout(i) {
      this.hoverDkIndex = -1;
      this.hightMarker(-1);
    },
    //显示地块详情，先获取地块图斑，定位、路线、和地类分析需要叠加获取相交地块
    showDetailModal(item, index) {
      console.log("item:" + item);
      console.log(item);
      this.clearMark();
      this.activeItem = item;
      //高亮marker
      this.hightMarker(index);
      this.showDetail = true;
      this.dkIndex = index;
      this.goLocation(item, index);
    },
    //地块收藏点击查看详情
    dkInfo(item) {
      this.dkGeo = null;
      this.dkGeoJson = null;
      item.id = item.dk_id ? item.dk_id : item.id;
      this.goLocation(item);
      this.showDetail = true;
      this.activeItem = item;
    },
    //隐藏详情
    hideDetail() {
      this.showDetail = false;
    },
    //收藏
    doCollect(collect) {
      this.shwoCollect = collect;
      this.shwoCompare = false;
      if (collect) {
        this.hideDetail();
      }
      try {
        this.$refs.compre.remove();
      } catch (e) {}
    },
    //对比
    doCompare(compare) {
      this.shwoCompare = compare;
      this.shwoCollect = false;
      if (compare) {
        this.hideDetail();
      } else {
        try {
          this.$refs.compre.remove();
        } catch (e) {}
      }
    },
    toggle(index) {
      this.activeIndex = index;
      this.hideDetail();
    },
    toggleTab(index) {
      if (this.loading) {
        return;
      }
      this.tabIndex = index;
      if (this.inputText) {
        this.wt = this.inputText;
        this.hzData = [];
        var item = { name: this.wt, loading: true };
        this.hzData = [item];
        this.count = 0;
        this.zwinputText = "";
        this.zhuiwen = false;
        this.showQuery = true;
        this.send();
      } else {
        this.$Message.info("请输入！");
      }
    },

    toggleZw() {
      this.zhuiwen = !this.zhuiwen;
    },
    showFeek() {
      this.$nextTick(() => {
        this.$refs.feek.open();
      });
    },
    //地块图斑定位
    goLocation(item, index) {
      if (this.geojsonLayer) {
        this.map.removeLayer(this.geojsonLayer);
        this.geojsonLayer = null;
      }
      if (this.identifyGeojsonLayer) {
        this.map.removeLayer(this.identifyGeojsonLayer);
      }

      let queryGeometryUrl = window.ApplicationConfig.queryYjjbntGeometryUrl;
      let that = this;
      axios
        .get(queryGeometryUrl, { params: { id: item.objectid } })
        .then((data) => {
          if (data && data.data && data.data.length) {
            that.detailData = data.data[0];
            let geojson = wkt.parse(data.data[0].geom);
            var geos = L.geoJSON(geojson, {
              style: function (feature) {
                return { color: "red", fillOpacity: 0 };
              },
            });
            that.geojsonLayer = geos.addTo(that.map);
            that.map.fitBounds(geos.getBounds(), { padding: [200, 200] });
          }
        });
    },
    locationByGeojson(geojson, name) {
      if (this.cyyqLayer) {
        this.map.removeLayer(this.cyyqLayer);
        this.cyyqLayer = null;
      }
      var layer = L.geoJSON(geojson, {
        style: function (feature) {
          return { color: "yellow", fillOpacity: 0 };
        },
      });
      this.cyyqLayer = layer.addTo(this.map);
      layer.bindPopup(name).openPopup();
      this.map.fitBounds(layer.getBounds(), { padding: [200, 200] });
    },
    //获取地块信息
    async getActiveItemGeometry(item) {
      return new Promise((resolve, reject) => {
        let query =
          window.ApplicationConfig.geoserverUrl +
          "?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
          window.ApplicationConfig.gdLayerName +
          "&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=dkmc='" +
          item.dkmc +
          "'";
        axios.get(query).then((data) => {
          if (data.data.features.length < 1) {
            this.$Message.info("未查询到数据");
            return;
          }
          this.detailData = data.data.features[0].properties;
          var geojson = data.data.features[0].geometry;
          var geos = L.geoJSON(geojson, {
            style: function (feature) {
              return { color: "#3BA5FF" };
            },
          });
          this.dkGeo = geos;
          this.dkGeoJson = geojson;

          resolve();
        });
      });
    },
    //地图绘制清空
    clearMark() {
      if (this.markerLayer) {
        this.map.removeLayer(this.markerLayer);
        this.markerLayer = null;
      }

      if (this.polyline) {
        this.map.removeLayer(this.polyline);
        this.polylines = null;
      }
      if (this.wktToGeojsonLayer) {
        this.wktToGeojsonLayer.forEach((item) => {
          this.map.removeLayer(item);
        });
        this.wktToGeojsonLayer = null;
      }
      this.dkIndex = -1;
      this.hoverDkIndex = -1;
      this.hightMarker(-1);
      this.zoom = 0;
      this.activeItem = null;
    },
    //地类分析-图斑定位-叠加出相交地块
    goWkt(wkts) {
      if (this.wktToGeojsonLayer) {
        this.wktToGeojsonLayer.forEach((item) => {
          this.map.removeLayer(item);
        });
      }
      this.wktToGeojsonLayer = [];
      var originGeom = this.dkGeoJson;
      //当前地块ID
      if (this.geojsonLayer == null) {
        this.goLocation(this.activeItem, this.dkIndex);
      }
      const bounds = L.latLngBounds();
      wkts.forEach((t) => {
        var geojson = wkt.parse(t);
        //定位
        var geos = L.geoJSON(geojson, {
          style: function (feature) {
            return { color: "#ffff00" };
          },
        });
        var layer = geos.addTo(this.map);
        this.wktToGeojsonLayer.push(layer);
        //相交
        let intersectGeo = turf.intersect(originGeom, geojson);
        if (intersectGeo) {
          var inner = L.geoJSON(intersectGeo, {
            style: function (feature) {
              return { color: "#ff0000" };
            },
          });
          var innnerlayer = inner.addTo(this.map);
          this.wktToGeojsonLayer.push(innnerlayer);
        }

        bounds.extend(geos.getBounds());
      });
      try {
        this.map.fitBounds(bounds);
      } catch (e) {
        console.log("fitBounds error: ", e);
      }
    },
    //详情页tab切换地图绘制相关清空
    toggleInfoTab(type, index) {
      console.log(type, index);
      if (this.markerLayer) {
        this.map.removeLayer(this.markerLayer);
        this.markerLayer = null;
      }
      if (this.polyline) {
        this.map.removeLayer(this.polyline);
        this.polylines = null;
      }
      if (this.wktToGeojsonLayer) {
        this.wktToGeojsonLayer.forEach((item) => {
          this.map.removeLayer(item);
        });
        this.wktToGeojsonLayer = null;
      }
      if (this.nearMarkerList && this.nearMarkerList.length > 0) {
        this.nearMarkerList.forEach((ele) => {
          this.map.removeLayer(ele);
        });
      }
      if (this.cyyqLayer) {
        this.map.removeLayer(this.cyyqLayer);
        this.cyyqLayer = null;
      }
      if (type == "jbxx") {
        //现状分析
        if (index == 1) {
          this.checkedJbxxLayers(3, 4, 5);
        } else if (index == 2) {
          this.checkedJbxxLayers(4, 3, 5);
        } else if (index == 3) {
          this.checkedJbxxLayers(5, 3, 4);
        }
      } else if (type == "qyts") {
        this.checkedQysLayers(index);
      } else if (type == "zhjt") {
        this.checkedOtherLayers();
      } else if (type == "ggss") {
        this.checkedOtherLayers();
      }
    },
    checkedOtherLayers() {
      this.layers[2].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[3].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[4].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[5].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
    },
    checkedQysLayers(selectIndex) {
      this.layers[2].layers.forEach((item, index) => {
        if (index == selectIndex && !item.checked) {
          item.checked = true;
          this.switchMapLayer(item);
        } else {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[3].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[4].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[5].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
    },
    checkedJbxxLayers(index1, index2, index3) {
      this.layers[index1].layers.forEach((item) => {
        if (!item.checked) {
          item.checked = true;
          this.switchMapLayer(item);
        }
      });
      this.layers[index2].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[index3].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
      this.layers[2].layers.forEach((item) => {
        if (item.checked) {
          item.checked = false;
          this.switchMapLayer(item);
        }
      });
    },

    addClusterLayer(points) {
      this.nearMarkerList.forEach((ele) => {
        this.map.removeLayer(ele);
      });
      this.nearMarkerList = [];
      points.forEach((ele) => {
        var className = "point-yellow-icon";
        let ll = String.fromCharCode(65 + ele.letter);
        var myIcon = L.divIcon({
          html: "<div>" + ll + "<div>",
          className: className,
          //图标大小
          iconSize: [28, 28],
          properties: ll,
        });
        var marker = L.marker([ele.latitude, ele.longitude], {
          icon: myIcon,
        }).addTo(this.map);
        // marker.bindPopup(ele.letter, {
        //   closeButton: false,
        // });
        this.nearMarkerList.push(marker);
      });
    },
    //路线绘制
    goPointMark(item) {
      var center = item.center;
      var cp = item.cp;
      if (this.markerLayer) {
        this.map.removeLayer(this.markerLayer);
        this.markerLayer = null;
      }
      if (center != "") {
        var centerList = cp.split(",");
        var className = "point-end-icon";
        var myIcon = L.divIcon({
          className: className,
          //图标大小
          iconSize: [32, 32],
        });
        this.map.flyTo([centerList[1], centerList[0]], 17);
      }
    },
    //所有地块仿百度地图绘制
    showXgdkCenterPoint() {
      if (this.dkMarkerLayer) {
        this.dkMarkerLayer.forEach((item) => {
          this.map.removeLayer(item);
        });
        this.dkMarkerLayer = [];
      }
      const bounds = L.latLngBounds();
      this.xgdk.forEach((item, i) => {
        if (item.center_wkt) {
          var center = item.center_wkt
            .substring(6, item.center_wkt.length - 1)
            .replace(" ", ",");
          var centerList = center.split(",");
          var className = "point-div-icon";
          var myIcon = L.divIcon({
            html: i > -1 ? "<div>" + (i + 1) + "<div>" : "<div><div>",
            className: className,
            //图标大小
            iconSize: [32, 32],
          });
          var marker = L.marker([centerList[1], centerList[0]], {
            icon: myIcon,
            properties: { p: i },
          }).addTo(this.map);
          let that = this;
          marker.on("mouseover", function (e) {
            that.hoverDkIndex = i;
          });
          marker.on("mouseout", function (e) {
            that.hoverDkIndex = -1;
          });
          marker.on("click", function (e) {
            that.showDetailModal(that.xgdk[i], i);
          });
          this.dkMarkerLayer.push(marker);
          var pointLng = L.latLngBounds([[centerList[1], centerList[0]]]);
          bounds.extend(pointLng);
        }
      });
      this.map.fitBounds(bounds);
    },
    //埋点
    async burialPoint() {
      let p = {
        question: this.querQuestion,
        answer: this.answer,
      };
      landMethods.burialPoint(p).then((res) => {
        if (res.code == 200) {
          console.log("问答--burialPoint");
        }
      });
    },
    //ai大模型请求
    send: _.debounce(async function () {
      let that = this;
      this.showResult = false;
      //不显示查询时地图上的雷达扫描效果
      this.radarShow = false;
      this.zhuiwen = false;
      if (this.eventSource) {
        this.eventSource.close();
        this.loading = false;
        this.eventSource = null;
      }
      if (this.ctrlAbout) {
        this.ctrlAbout.abort();
      }
      if (this.dkMarkerLayer) {
        this.dkMarkerLayer.forEach((item) => {
          this.map.removeLayer(item);
        });
        this.dkMarkerLayer = [];
      }
      if (this.interval) {
        clearInterval(this.interval);
      }
      this.activeIndex = 0;
      var question = this.wt.trim();
      if (this.zwinputText != "") {
        //追问的时候，暂时不用历史数据
        // question = question + ",其中" + this.zwinputText.trim();
        question = this.zwinputText.trim();
      }
      let mock = false;
      if (question === "帮我在萧山区推荐三宗31亩左右的工业用地") {
        mock = true;
      }

      this.interval = setInterval(
        () => {
          if (this.activeIndex < this.steps.length - 1) {
            this.activeIndex = this.activeIndex + 1;
          }
        },
        mock ? 1000 : 5000
      );

      this.querQuestion = question;
      this.summary = "";
      this.xgdk = [];
      this.activeIndex = 0;
      this.hintText = "思考中...";
      this.messages.push({
        id: uuid(),
        content: question,
        source: "user",
        timestamp: new Date().getTime(),
      });

      //清空输入框文字
      // this.inputText = "";

      //发送请求
      //建立SSE连接
      this.loading = true;
      this.startTime = new Date().getTime();
      this.checkInterval = setInterval(() => {
        this.checkTimeOut();
      }, this.gInterval);
      // 建立连接
      // let eventSource = new EventSource(
      //   `${window.ApplicationConfig.subscribeUrl}${this.inputText.trim()}`
      // );
      if (!this.ctrlAbout) {
        this.ctrlAbout = new AbortController();
      }
      this.btnSendDisabled = true;
      //todo
      const signal = this.ctrlAbout.signal;
      await fetchEventSource(window.ApplicationConfig.subscribeUrl, {
        method: "POST",
        openWhenHidden: true,
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          data: question,
          history: this.histories.toArray().flat() || [],
        }),
        signal: signal,
        async onmessage(msg) {
          const { data } = msg;
          if (data) {
            that.handleData({ data: data }, question);
          }
        },

        onerror(err) {
          console.log("请求报错--");
          that.checkTimeOut();
        },
      }).catch((err) => {
        console.log(err);
        console.log("请求报错:" + err);
        that.checkTimeOut();
      });
    }, 500),
    handleData(e, question) {
      let T = this;
      if (e.data != "[FINISH]" && e.data != "[DONE]") {
        const responseData = JSON.parse(e.data);
        const responses = responseData["agent_responses"];
        // console.log("responses: ", responses);
        const lastRes = responses[responses.length - 1];
        var lastUpRes = null;
        responses.forEach((item, index) => {
          if (
            item.exec_res &&
            typeof item.exec_res === "string" &&
            item.exec_res.indexOf("\n```json\n") > -1
          ) {
            lastUpRes = responses[index];
            // console.log("lastUpRes: ", lastUpRes);
          }
        });
        const user_request = responseData.user_request;
        const conversationId = lastRes["agent_id"];
        let message = T.messages.find(({ id }) => id === conversationId);
        const executed = lastRes["executed"];
        const agentName = lastRes["agent_name"];
        const agentNameCn = lastRes["agent_name_cn"];
        const execRes = lastRes["exec_res"];

        const lastChoice = lastRes.choices[lastRes.choices.length - 1];
        const choiceId = lastChoice["choice_id"];
        let choiceMessage = T.messages.find(({ id }) => id === choiceId);
        if (window.ApplicationConfig.aiAgent.indexOf(agentName) >= 0) {
          if (message) {
            if (lastChoice.role === "assistant" && !lastChoice.history) {
            }

            if (
              agentName != "summary" &&
              lastChoice.role === "assistant" &&
              !executed
            ) {
              T.loading = false;
              T.hzData.forEach((item, index) => {
                if (index == T.hzData.length - 1) {
                  T.hzData[index].summary = lastChoice.content
                    .replaceAll("\n```json\n", "")
                    .replaceAll("```json\n", "")
                    .replaceAll("\n```\n", "");
                  T.$forceUpdate();
                }
              });
            }
            if (agentName === "summary") {
              if (!executed) {
                T.loading = false;
                this.hintText = "结果整理中...";
              } else if (execRes) {
                // T.summary = execRes;
                T.showResult = true;
                T.radarShow = false;
                T.loading = false;
                if (lastUpRes) {
                  var exec_res = lastUpRes.exec_res
                    .replaceAll("\n```json\n", "")
                    .replaceAll("```json\n", "")
                    .replaceAll("\n```\n", "");
                  exec_res = JSON.parse(exec_res);
                  var dk = exec_res;
                  console.log("dk: ", dk);
                  T.xgdk = dk;
                  T.clearMark();
                  T.showXgdkCenterPoint();
                  T.addGdLayer(T.xgdk);
                  T.answer = e.data;
                  // T.burialPoint();
                } else {
                  T.xgdk = [];
                  T.clearMark();
                }
                T.activeIndex = T.steps.length - 1;
                // T.hintText = "检索完成";
                T.hzData.forEach((item, index) => {
                  if (index == T.hzData.length - 1) {
                    T.hzData[index].summary = execRes;
                    T.hzData[index].loading = false;
                    T.zwinputText = "";
                  }
                });
                clearInterval(T.checkInterval);
              }
            }
          } else {
            T.messages.push({
              id: conversationId,
              content: "",
              source: "ai",
              loading: true,
              timestamp: new Date().getTime(),
            });
          }
        }
      } else {
        if (e.data == "[FINISH]") {
          console.log("SSE连接关闭");
          T.btnSendDisabled = false;
          T.loading = false;
          T.count = 0;
          if (T.eventSource) {
            T.eventSource.close();
          }
          if (T.interval) {
            clearInterval(T.interval);
          }
          T.messages.forEach((item, index) => {
            if (item.loading) {
              T.messages.splice(index, 1);
            }
          });

          T.loading = false;

          T.addHistory(question, T.messages[T.messages.length - 1].content);
        }
      }
    },
    /**
     * 添加多轮对话效果
     * @param question
     * @param ans
     */
    addHistory(question, ans) {
      this.histories.enqueue([
        {
          type: 1,
          data: question,
        },
        {
          type: 2,
          data: ans,
        },
      ]);
    },
  },
};
</script>
<style lang="scss" scoped>
.ivu-spin-fix {
  border-radius: 10px;
  position: relative;
  height: 200px;
}

.industria-land-detail {
  width: 100%;
  position: relative;
  height: 100%;
  .left-content {
    width: 20%;
    top: 0px;
    left: 0px;
    height: calc(100% - 0px);
    float: left;
  }
  .map-content {
    width: 80%;
    top: 0px;
    height: calc(100% - 0px);
    float: right;
    .content {
      width: 100%;
      height: 100%;
      position: relative;

      .map {
        width: 100%;
        z-index: 10;
        height: 100%;
      }

      .right-tool {
        display: flex;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 21;

        .layer-container {
          .layer-panel {
            height: 100%;
            cursor: pointer;
            width: 130px;
            height: 38px;
            background: #ffffff;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;

            .img {
              width: 25px;
              margin-right: 8px;
              height: 25px;
            }

            span {
              font-family: Alibaba PuHuiTi 2;
              font-weight: normal;
              font-size: 16px;
              color: #333333;
            }

            .c {
              color: #fff;
            }
          }

          .checked {
            background: #2879e7;
          }
        }

        .c {
          margin-right: 20px;
        }

        .layer-content-border {
          position: absolute;
          right: 135px;
          top: 0px;
          padding: 0px 10px;
          overflow-y: auto;
          z-index: 99;

          .layer-content {
            z-index: 99;
            background: #ffffff;
            border: 1px solid #e4e7ea;
            border-radius: 8px;
            padding: 10px 20px;
            max-height: 755px;
            box-shadow: 0px 6px 5px 0px rgba(194, 210, 237, 0.3);
            cursor: pointer;
            width: 320px;

            border-radius: 5px;
            z-index: 1;

            .item {
              width: 100%;

              .name {
                color: #333;
                font-size: 18px;
                font-weight: bold;
              }

              .checkbox {
                // color:#6dcff6;
                color: #333;
                margin-left: 35px;
                font-size: 16px;
                cursor: pointer;
              }

              .ivu-checkbox-inner {
                margin-right: 8px;
                cursor: pointer;
                background-color: transparent;
                border: 1px solid #2879e7;
              }
            }
          }
        }
      }

      .legend-panel {
        position: absolute;
        right: 17px;
        width: 168px;
        // height: 360px;
        background: #ffffff;
        border-radius: 10px;
        cursor: pointer;
        padding: 0px 12px 14px 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        bottom: 21px;
        z-index: 19;

        .name-panel {
          padding: 10px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          //border-bottom: 1px solid #eceef1;

          .name {
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #000;
            font-size: 16px;
          }

          .img {
            width: 16px;
            height: 16px;
          }
        }

        .layer-legend {
          width: 100%;
          height: calc(100% - 62px);

          .item {
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            margin-bottom: 10px;

            i {
              display: inline-block;
              border: 1px solid transparent;
              width: 20px;
              height: 16px;
              margin-top: 2px;
              border-radius: 2px;
              margin-right: 8px;
            }

            .label {
              width: 100%;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              display: flex;
            }

            .c {
              font-weight: bold;
              flex-direction: column;
            }

            .zl {
              display: flex;
              flex-direction: row;
              width: 100%;
              margin-top: 10px;
            }
          }

          .item:last-child {
            margin-bottom: 0px;
          }
        }
      }

      .topdiv {
        position: absolute;
        top: 10px;
        z-index: 100;
        left: 13px;
        width: 35%;

        .m-textarea-panel {
          width: 100%;
          height: 150px;
          background: #ffffff;
          position: relative;
          padding: 17px 0px 0px 19px;
          box-shadow: 0px 8px 16px 1px rgba(0, 57, 124, 0.2);
          border-radius: 16px 16px 16px 16px;
          border: 1px solid #4e69ff;

          textarea {
            border: none;
            resize: none;
            width: calc(100% - 60px);
            font-weight: normal;
            font-size: 18px;
            height: 100%;

            &:focus-visible {
              outline: none;
            }

            &::placeholder {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 18px;
              color: #6a7177;
            }
          }
        }
      }

      .left-panel {
        width: 486px;
        padding: 26px 29px 32px 31px;
        z-index: 11;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        // background: linear-gradient(-30deg, #d6e8fb, #ffffff);
        background-color: #fff;

        .left-panel-content {
          width: 100%;
          height: calc(100% - 90px);
          overflow-x: hidden;
          overflow-y: auto;
        }

        .logo {
          font-family: REEJI-FlashSansN95;
          font-weight: 900;
          font-size: 28px;
          color: #333333;
          line-height: 36px;
          margin-bottom: 31px;
          height: 30px;
        }

        .desc {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }

        .hint {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #2879e7;
          margin-bottom: 30px;
          margin-top: 40px;
        }

        .hot-question-item {
          display: flex;
          margin-bottom: 20px;

          img {
            width: 32px;
            height: 32px;
            margin-right: 11px;
          }

          .right-nr {
            width: calc(100% - 43px);
            cursor: pointer;
            padding: 17px 32px 16px 20px;
            background: linear-gradient(90deg, #c7dcf8, #e8eafd);
            border-radius: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #333333;
          }

          .right-nr:hover {
            border: 1px solid #2879e7;
          }
        }

        .diver44 {
          height: 44px;
        }

        .m-textarea-panel {
          width: 100%;
          height: 105px;
          background: #ffffff;
          border-radius: 10px;
          position: relative;
          padding: 17px 0px 0px 19px;

          textarea {
            border: none;
            resize: none;
            width: calc(100% - 60px);
            font-weight: normal;
            font-size: 16px;
            height: 100%;

            &:focus-visible {
              outline: none;
            }

            &::placeholder {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #999999;
            }
          }

          .btn {
            width: 40px;
            height: 40px;
            position: absolute;
            right: 17px;
            cursor: pointer;
            bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(90deg, #5c62ea, #517de2);
            border-radius: 20px;

            img {
              width: 20px;
              height: 20px;
            }
          }
        }

        .back-icon {
          position: absolute;
          top: 26px;
          right: 2px;
          width: 28px;
          height: 28px;
          background: url("~@/assets/image/back-icon.png") no-repeat center;
          background-size: 100% 100%;
          cursor: pointer;
        }

        .title {
          // height: 59px;
          font-family: REEJI-FlashSansN95;
          font-weight: bold;
          font-size: 20px;
          color: #212121;
          cursor: pointer;
          line-height: 36px;
          margin-bottom: 36px;
        }
        .jsz {
          margin: 0 0px 17px 0px;
          display: flex;
          height: 32px;
          align-items: center;

          img {
            width: 32px;
            margin-right: 14px;
            height: 32px;
          }

          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 18px;
          color: #2879e7;
        }

        .steps {
          display: flex;
          margin-bottom: 41px;
          padding-left: 7px;

          .item {
            display: flex;
            cursor: pointer;

            .name-panel {
              display: flex;
              flex-direction: column;

              .icon {
                height: 36px;
                width: 36px;
                margin: 0px 12px;
                margin-bottom: 12px;
              }

              .name {
                width: 64px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 16px;
                color: #333333;
              }

              .c {
                color: #666666;
              }
            }

            .line {
              width: 60px;
              height: 2px;
              margin-top: 17px;
              background: #bbd4f0;
            }

            .checked {
              background: #10d295;
            }
          }
        }

        .tab-panel {
          padding-left: 3px;
          display: flex;

          .item {
            display: flex;
            margin-right: 48px;
            cursor: pointer;
            flex-direction: column;

            .name {
              width: 120px;
              height: 20px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 20px;
              color: #465d7c;
              line-height: 36px;
            }

            .selected {
              font-weight: bold;
              color: #333333;
            }

            .line {
              margin-top: 20px;
              width: 116px;
              height: 6px;
              background: url("~@/assets/image/cyyd/tab-select.png") no-repeat
                center;
              background-size: 100% 100%;
            }
          }
        }

        .summary-content {
          display: flex;

          .summary-icon {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #d5e3ff;
            border-radius: 50%;
            margin-right: 5px;
            flex-shrink: 0;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .tab-content {
          width: 100%;
          height: calc(100% - 260px);
          position: relative;
          margin: 31px 0px 28px 5px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 30px;
          font-size: 16px;
          color: #666666;

          .spin {
            margin: 31px 0px 28px 5px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 30px;
            height: 100px;
            display: flex;
            font-size: 16px;
            justify-content: center;
            align-items: center;
            color: #666666;
          }

          .btns-panel {
            display: flex;
            justify-content: flex-end;
            height: 28px;
            align-items: center;
            padding-left: 2px;
            margin: 10px 0;

            .left-btn {
              display: flex;
              height: 28px;
              display: none;
              align-items: center;

              .icon {
                width: 20px;
                height: 20px;
              }

              .diver {
                width: 11px;
                height: 28px;
              }

              .alias {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #465d7c;
                margin-right: 32px;
              }
            }

            .right-btn {
              display: flex;
              height: 28px;
              align-items: center;

              .zw {
                width: 64px;
                height: 28px;
                cursor: pointer;
                text-align: center;
                line-height: 28px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 5px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                margin-right: 7px;
                color: #4e8de2;
              }

              .zw:hover {
                border: 1px solid #4e8de2;
              }

              .checked {
                border: 1px solid #4e8de2;
              }

              .feek {
                width: 100px;
                background: #be0d0a;
                margin-right: 20px;
                border: 1px solid #be0d0a;
                color: white;
              }

              .feek:hover {
                border: 1px solid #be0d0a;
              }

              .icon {
                width: 20px;
                height: 20px;
              }
            }
          }
        }

        .textarea-panel {
          margin: 28px 3px 0px 3px;
          width: 424px;
          height: 90px;
          background: #ffffff;
          position: absolute;
          bottom: 26px;
          padding: 18px 0px 0px 19px;
          box-shadow: 0px 6px 12px 1px rgba(11, 53, 103, 0.08);
          border-radius: 16px 16px 16px 16px;
          border: 1px solid #e5e6ea;

          textarea {
            border: none;
            resize: none;
            width: calc(100% - 60px);
            font-weight: normal;
            font-size: 18px;

            &:focus-visible {
              outline: none;
            }

            &::placeholder {
              font-family: Microsoft YaHei;
              font-size: 20px;
              color: #a7aeb4;
            }
          }

          .btn {
            width: 40px;
            height: 40px;
            position: absolute;
            right: 17px;
            cursor: pointer;
            bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(124deg, #505dff 0%, #418cff 100%);
            border-radius: 10px 10px 10px 10px;

            img {
              width: 20px;
              height: 20px;
            }
          }
        }

        .xg-title {
          height: 20px;
          margin-top: 28px;
          display: flex;
          align-items: center;
          margin-bottom: 22px;

          img {
            width: 20px;
            margin-right: 11px;
            height: 20px;
            cursor: pointer;
          }

          .name {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 18px;
            margin-right: 17px;
            color: #333333;
          }
        }

        .xg-des {
          margin-bottom: 10px;
        }

        .table-panel {
          padding-bottom: 20px;

          .th {
            height: 40px;
            background: #ffffff;
            border-radius: 10px;
            margin-bottom: 10px;
            display: flex;

            .it {
              flex: 1.2;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              cursor: pointer;
              color: #465d7c;
              padding: 0px 3px;
              height: 40px;
              text-align: center;
              line-height: 40px;
            }

            .blue {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #2879e7;
            }

            .xh {
              flex: 0.8;
            }

            .text {
              flex: 1.5;
            }
          }

          .hintText {
            margin-top: 18px;
          }

          .tr {
            display: flex;
            border-radius: 2px;
            cursor: pointer;
            padding: 21px 0px 19px 0px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            align-items: center;

            .it {
              flex: 1.2;
              text-align: center;
              padding: 0px 3px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #465d7c;
              display: flex;
              justify-content: center;
              align-items: center;

              .info {
                cursor: pointer;
                display: flex;
                justify-content: center;
                // padding: 6px 0px;
                width: 20px;
                height: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #2879e7;
              }
            }

            .c:hover {
              cursor: pointer;
              color: #2879e7;
            }

            .xh {
              flex: 0.8;
            }

            .text {
              flex: 1.5;
            }
          }

          .tr:hover {
            background: white;
            border-radius: 10px;
          }

          .checked {
            background: white;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>

<style>
@import "~leaflet/dist/leaflet.css";
@import "~leaflet.markercluster/dist/MarkerCluster.css";
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";

.leaflet-control-attribution {
  margin: 10px !important;
  border-radius: 8px;
  height: 30%;
  padding: 5px;
}
</style>

<style lang="scss">
.info-modal {
  .ivu-modal-content {
    overflow: hidden;
    width: 100%;
    height: 200px;

    .ivu-modal-close .ivu-icon-ios-close {
      display: none;
    }

    .ivu-modal-header {
      display: none;
    }

    .ivu-modal-body {
      width: 100%;
      height: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;

      .input {
        width: 100%;
        height: calc(100% - 40px);
        border-color: transparent;
      }

      textarea {
        width: 100%;
        border: none;
        resize: none;
        font-weight: normal;
        line-height: 26px;
        height: 100%;
        background: transparent;
        font-size: 18px;

        &:focus-visible {
          outline: none;
        }

        &::placeholder {
          font-family: Alibaba PuHuiTi 2;
          font-weight: normal;
          font-size: 18px;
          color: #acb1c1;
        }
      }

      .bottom {
        height: 40px;
        display: flex;
        justify-content: space-between;

        .name {
          color: #666;
          cursor: pointer;
          font-size: 16px;
        }

        .send-btn {
          cursor: pointer;
          width: 110px;
          position: absolute;
          right: 33px;
          bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          background: linear-gradient(90deg, #5c62ea, #517de2);
          border-radius: 20px;

          .icon {
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }

          font-family: Alibaba PuHuiTi 2;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
        }

        .send-btn:hover {
          background: #5c62ea;
        }
      }
    }
  }
}

.dkitemchecked1 {
  border: 1px solid #007bff;
}

.dkitem1 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f9fd;
  border-radius: 8px;

  .number {
    width: 30px;
    height: 30px;
    background-color: #007bff;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
  }

  .content {
    flex: 1;
  }

  .content h3 {
    margin: 0;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .content p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666;
  }

  .content p .content-item {
    margin-right: 5px;
  }
}
</style>

<style>
</style>