CSPON/web_ui/src/views/industrial-land/AiIndustriaLandDetail.vue

<template>
  <div class="industria-land-detail">
    <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};`"
          >
            <!-- <radar-scan-animation /> -->
          </div>
        </div>
        <div class="right-tool">
          <div class="layer-container c">
            <div
              class="layer-panel"
              @click="toggleIdentity"
              :class="{ checked: showIndentify }"
            >
              <img
                src="~@/assets/image/icon-i-checked.png"
                class="img"
                v-if="showIndentify"
              />
              <img src="~@/assets/image/icon-i-normal.png" class="img" v-else />
              <span :class="{ c: showIndentify }">属性识别</span>
            </div>
          </div>
          <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 class="legend-panel" v-if="showLegend">
          <div class="name-panel">
            <div class="name">图例</div>
            <img
              class="img"
              src="~@/assets/image/icon-legend-close.png"
              @click="showLegend = false"
            />
          </div>

          <div class="layer-legend">
            <div v-for="(item, index) in legend" :key="index" class="item">
              <div class="label" :class="{ c: item.children }">
                <i
                  :style="{ background: item.fill, borderColor: item.border }"
                  v-if="item.children == undefined"
                ></i
                >{{ item.name }}
              </div>
              <div
                v-for="(citem, index) in item.children"
                :key="index"
                class="zl"
              >
                <i
                  :style="{
                    background: citem.fill == 'transparent' ? '' : citem.fill,
                    borderColor: citem.border,
                  }"
                ></i
                >{{ citem.name }}&nbsp;&nbsp;&nbsp;
              </div>
            </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="您可以试着这样问我，如“帮我在萧山区推荐一宗60亩左右的工业用地”"
              autofocus=""
            >
            </textarea>
            <AIBtn @click.native="hotQuestionReset()" />
          </div>
        </div>
        <vue-perfect-scrollbar
          :settings="settings"
          class="left-panel"
          v-if="showQuery"
        >
          <!-- <div class="back-icon" @click="back"></div> -->
          <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">
              <Spin />
              {{ hintText }}
            </div>

            <!-- <div class="tab-panel" v-if="false">
              <div
                class="item"
                v-for="(item, index) in tabs"
                :key="index"
                @click="toggleTab(index)"
              >
                <div class="name" :class="{ selected: index == tabIndex }">
                  {{ item }}
                </div>
                <div class="line" v-if="index == tabIndex"></div>
              </div>
            </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="dkitem"
                  :class="{ dkitemchecked: 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.name }}</h3>
                    <p>
                      <span>面积：{{ citem.area ? citem.area.toFixed(2) : '-' }}亩</span>
                      <span>单价：{{ citem.unit_price ? citem.unit_price.toFixed(2) : '-' }}</span>
                      <span>行政区：{{ citem.county ? citem.county : '-' }}</span>
                    </p>
                  </div>
                </div>
                <!-- <div
                    class="tr"
                    @mouseover="mouseover(i)"
                    @mouseout="mouseout(i)"
                    v-for="(citem, i) in xgdk"
                    :key="i"
                    :class="[{ checked: i == dkIndex || i == hoverDkIndex }]"
                  >
                    <div class="it xh">{{ i + 1 }}</div>
                    <div class="it c" @click="showDetailModal(citem, i)">
                      {{ citem.name }}
                    </div>
                    <div class="it">
                      {{ citem.area ? (citem.area * 0.0015).toFixed(2) : "-" }}
                    </div>
                    <div class="it text">
                      {{ citem.unit_price ? citem.unit_price : "-" }}
                    </div>
                    <div class="it blue xh">
                      {{
                        citem.comprehensive_score
                          ? citem.comprehensive_score
                          : "-"
                      }}
                    </div>
                    <div class="it xh">
                      <img
                        class="info"
                        @click="goLocation(citem, i)"
                        src="~@/assets/image/icon-loc-blue.png"
                      />
                    </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>
          <div class="textarea-panel">
            <textarea
              v-model="zwinputText"
              type="text"
              autocapitalize="off"
              autocomplete="off"
              spellcheck="false"
              autocorrect="off"
              maxlength="1000"
              placeholder="请提问"
              autofocus=""
            >
            </textarea>
            <AIBtn @click.native="zwsend" />
          </div>
          <Spin size="large" class="span" fix v-if="loading"></Spin>
        </vue-perfect-scrollbar>
        <znxz-detail
          @close="hideDetail"
          @location="goPointMark"
          v-if="showDetail"
          ref="znxz"
          @toggle="toggleInfoTab"
          @gowkt="goWkt"
          @clear="clearMark"
          :item="detailData"
        ></znxz-detail>
        <znxz-compare v-if="shwoCompare" :map="map" ref="compre"></znxz-compare>
        <znxz-collect v-if="shwoCollect" @dkinfo="dkInfo"></znxz-collect>
        <feek-back
          ref="feek"
          @close="hideFeekBackModal"
          :question="querQuestion"
          :answer="answer"
        ></feek-back>
      </div>
    </div>
    <flow-chart ref="flow" @close="hideModal"></flow-chart>
    <land-table ref="table" @close="hideTableModal"></land-table>
    <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 polygons from '../../../static/json/杭州市.json'
import industrialTop from '@/components/IndustrialTop'
import znxzDetail from './ZnxzDetail.vue'
import znxzCompare from './ZnxzCompare.vue'
import L from 'leaflet'
import Proj from 'proj4leaflet'
import ArrayQueue from '@/struct/ArrayQueue'
import axios from 'axios'
import { arcgisToGeoJSON } from '@terraformer/arcgis'
import znxzCollect from './ZnxzCollect.vue'
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 FlowChart from './FlowChart.vue'
import FeekBack from './ProblemFeedBack.vue'
import LandTable from './LandTable.vue'
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'

export default {
  components: {
    industrialTop,
    znxzDetail,
    znxzCompare,
    znxzCollect,
    FlowChart,
    LandTable,
    FeekBack,
    VueMarkdownIt,
    AIBtn
  },
  data() {
    return {
      radarScanStyle: {
        width: '100%',
        height: '100%',
        left: 0,
        top: 0
      },
      hzData: [],
      showQuery: false,
      radarShow: false,
      input: '',
      hotQestionList: [
        {
          name: '请帮我在杭州市萧山机场附近推荐几块总价不超过2000万的工业用地'
        },
        {
          name: '帮我在萧山区推荐一宗60亩左右的工业用地'
        },
        {
          name: '请帮我杭州市找几块在开发区内，园区主导产业为新能源的工业用地'
        },
        {
          name: '请在杭州市杭州东站附近15公里范围内推荐几块面积在35亩左右，公共设施相对完善的工业用地'
        },
        {
          name: '请帮我在杭州市余杭区找几块面积在50亩左右，总价不超过3000万，周边5公里内有地铁站的地块'
        }
      ],
      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(),
      latitude: 31.86119,
      longitude: 117.283042,
      layers: [],
      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,
      // detailData: {
      //   'id': 48668,
      //   'OBJECTID': null,
      //   'xzq': null,
      //   'xzqmc': '萧山区',
      //   'xzqdm': '330109',
      //   'dkmc': '湘湖国家旅游度假区建设工矿仓储项目',
      //   'dkbh': '萧政工出[2025]11号',
      //   'dkmj': 60.714,
      //   'tdyt': '工业用地',
      //   'jzdj': null,
      //   'kfq': null,
      //   'dkid': '1895353609416212480',
      //   'dklx': '立即可用',
      //   'is_valid': null,
      //   'dlmc': null,
      //   'group_name': null,
      //   'shape_leng': null,
      //   'lysx': 1,
      //   'kfqdm': null,
      //   'kfqmc': null,
      //   'tdzl': null,
      //   'kfcd': null,
      //   'is_bdz': null,
      //   'bzd_gdzctz': null,
      //   'bzd_mjss': null,
      //   'bzd_dwnh': null,
      //   'bzd_dwpf': null,
      //   'rjl_min': null,
      //   'rjl_max': null,
      //   'is_publish': null,
      //   'lxr': null,
      //   'lxdh': null,
      //   'lxdz': null,
      //   'cryear': null,
      //   'crway': null,
      //   'wgyy': null,
      //   'qjurl': null,
      //   'syzt': 1,
      //   'remark': null,
      //   'district_code': null,
      //   'district': null,
      //   'available_sequence': 1,
      //   'sde_ecgap_klyzy_area': null,
      //   'development_degree': 0,
      //   'use': 1,
      //   'plot_ratio_start': 1.5,
      //   'plot_ratio_end': 2,
      //   'investment_scale': 420,
      //   'tax': 40,
      //   'unit_energy_consumption_added': '≥13.8万元/吨标煤',
      //   'unit_emission_added': '≥5640万元/吨',
      //   'bz': null,
      //   'create_time': null,
      //   'create_worker_id': null,
      //   'update_time': null,
      //   'update_worker_id': null,
      //   'is_pub': 1,
      //   'image_url': null,
      //   'intr_url': null,
      //   'zyid': '1895353609416212480',
      //   'bzdj': null,
      //   'is_bzd': 1,
      //   'sskfq': null,
      //   'introduce': null,
      //   'xmid': null,
      //   'coord': '[120.1791595,30.036971]',
      //   'sde_ecgap_klyzy_fid': null,
      //   'dksyh': '1895353609416212480',
      //   'reason_for_invalid': null,
      //   'is_nz': 1,
      //   'is_tg': 1,
      //   'contact_address': null,
      //   'is_ng': null,
      //   'file_name': null,
      //   'address': '位于萧山区义桥镇，东至空地，南至空地，西至空地，北至云临路。',
      //   'period': 30,
      //   'status': 1,
      //   'crfs': 2,
      //   'xzt_url': null,
      //   'data_from': 'from dealland',
      //   'image_id': null,
      //   'name': '湘湖国家旅游度假区建设工矿仓储项目',
      //   'sfsj': 1,
      //   'isbuild': null,
      //   'is_incircle': null,
      //   'circlename': null,
      //   'instance_id': '01954d7c502234619461953e090100e3',
      //   'sde_ecgap_klyzy_area_1': 60.714,
      //   'shape_Length': null,
      //   'shape_Area': null
      //
      // },
      legend: [
        // {
        //   name: "可利用资源",
        //   fill: "#e48b8b50",
        //   border: "#000000",
        // },
        // {
        //   name: "永久基本农田",
        //   fill: "#fefe6050",
        //   border: "#d7d6d6",
        // },
        // {
        //   name: "生态保护红线",
        //   fill: "#4d9757",
        //   border: "#4d9757",
        // },
        // {
        //   name: "控规详细性规划",
        //   children: [
        //     {
        //       name: "工业",
        //       fill: "#66290080",
        //       border: "#66290080",
        //     },
        //   ],
        // },
        {
          name: '可利用资源',
          children: [
            {
              name: '公告地块',
              fill: 'green',
              border: 'green'
            },
            {
              name: '计划地块',
              fill: 'blue',
              border: 'blue'
            }
            // {
            //   name: "商业",
            //   fill: "",
            //   border: "rgb(230,0,0)",
            // },
          ]
        }
      ],

      mockData: {
        summary: `### 萧政工出（2020）2号

- **行政区**: 萧山区
- **规划用途**: 工业用地
- **用地面积**: 24.9435亩
- **土地坐落**: 东至规划工业用地，南至规划支路，西至规划工业用地，北至机场北辅路。

### 2. 双桥单元XH020203-15地块

- **行政区**: 西湖区
- **规划用途**: 工业用地
- **用地面积**: 21756.0 平方米
- **土地坐落**: 西湖区（双桥单元XH020203-15地块，东至规划支路，南至规划云梦路，西至智强路，北至肖圣街）`,
        dks: [
          {
            id: 7286,
            name: '双桥单元XH020203-16地块',
            xzqmc: '西湖区',
            tdyt: '工业用地',
            address:
              '西湖区（双桥单元XH020203 -16地块，东至数治路，南至规划云梦路，西至规划支路，北至肖圣街）',
            dkmj: 24027.0,

            center_wkt: 'POINT(120.036582554545 30.3277712108271)'
          },
          {
            id: 7285,
            name: '双桥单元XH020203-15地块',
            xzqmc: '西湖区',
            tdyt: '工业用地',
            address:
              '西湖区（双桥单元XH020203-15地块，东至规划支路，南至规划云梦路，西至智强路，北至肖圣街）',
            dkmj: 21756.0,
            comprehensive_score: 88.0,
            center_wkt: 'POINT(120.03392658277 30.3271936782775)'
          }
        ]
      },
      mockInterval: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.activeIndex = 0
      this.initMap()
      this.calcRadarScan()
      // this.checkPermision();
    })
  },
  created() {
    if (this.$route.params && this.$route.params.keyword) {
      this.inputText = this.$route.params.keyword
    }
    this.zwinputText = ''
    this.type = this.$route.params.type
  },

  methods: {
    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
              // if (that.type) {
              //   that.tabs.forEach((item, index) => {
              //     if (that.type == item) {
              //       that.activeIndex = index;
              //     }
              //   });
              // }

              // that.toggleTab(that.activeIndex);
              // that.xgdk = [
              //   {
              //     id: 7162,
              //     name: "桐庐经济开发区85号工业地块",
              //     county: "桐庐县",
              //     location: "桐庐县中联路和城南路交叉口西北侧",
              //     area: 33042,
              //     comprehensive_score: 98,
              //     center_wkt: "POINT(119.683179367182 29.7668594386792)",
              //   },
              //   {
              //     id: 6936,
              //     name: "桐庐县江南镇工业园区2023-2号地块",
              //     county: "桐庐县",
              //     location: "桐庐县窄溪路和金堂路交叉口南侧",
              //     area: 32730,
              //     comprehensive_score: 96,
              //     center_wkt: "POINT(119.776661041068 29.8674845992439)",
              //   },
              //   {
              //     id: 6053,
              //     name: "青山湖科技城单元 LA011102-02、 LA011102-03 地块",
              //     county: null,
              //     location:
              //       "青山湖科技城单元LA011102-02、LA011102-03地块（东至鹤川路，南至蒋墅街，西至发达路，北至科技大道）",
              //     area: 31965,
              //     comprehensive_score: 93,
              //     center_wkt: "POINT(119.833330942318 30.2587063318842)",
              //   },
              //   {
              //     id: 7003,
              //     name: "梅城镇五马洲工业园区C-04-1号",
              //     county: "建德市",
              //     location: "梅城镇五马洲工业园区",
              //     area: 33431,
              //     comprehensive_score: 69,
              //     center_wkt: "POINT(119.455506193026 29.5194122302608)",
              //   },
              //   {
              //     id: 5913,
              //     name: "青山湖科技城单元LA010206-02地块",
              //     county: null,
              //     location:
              //       "青山湖科技城单元LA010206-02地块（东至泉口服务中心，南至市地街，西至干校路，北至长西线)",
              //     area: 32489,
              //     comprehensive_score: 65,
              //     center_wkt: "POINT(119.792292133488 30.3242359513533)",
              //   },
              //   {
              //     id: 6975,
              //     name: "塘栖张家墩产业园地块1",
              //     county: "临平区",
              //     location:
              //       "塘栖镇酒店埭社区；东至规划绿地、南至规划绿地、西至规划绿地、北至张家墩路。",
              //     area: 32228,
              //     comprehensive_score: 60,
              //     center_wkt: "POINT(120.16357939569 30.4705788185453)",
              //   },
              //   {
              //     id: 5411,
              //     name: "富政工出[2024]9号",
              //     county: "富阳区",
              //     location: "鹿山街道工业功能区",
              //     area: 34575,
              //     comprehensive_score: 60,
              //     center_wkt: "POINT(119.896504461223 29.9860460585603)",
              //   },
              //   {
              //     id: 7365,
              //     name: "义桥镇建设工矿仓储项目",
              //     county: "萧山区",
              //     location:
              //       "位于萧山区义桥镇田丰村、七里店村、勤里村，东至田丰村、七里店村土地，南至七里店村土地，西至田丰村土地，北至田丰村、勤里村土地。",
              //     area: 33797,
              //     comprehensive_score: 57,
              //     center_wkt: "POINT(120.162338981989 30.0555790489407)",
              //   },
              //   {
              //     id: 7223,
              //     name: "浦沿单元BJ040501-14地块",
              //     county: "滨江区",
              //     location:
              //       "东至规划量子巷；南至浦炬街绿化；西至紫云路；北至规划回龙庵路。",
              //     area: 33867,
              //     comprehensive_score: 55,
              //     center_wkt: "POINT(120.157534740039 30.1548281617972)",
              //   },
              //   {
              //     id: 7013,
              //     name: "杭州钱江经济开发区奉欣路以南工业地块三（C-3）",
              //     county: "余杭区",
              //     location: "仁和街道奉口村",
              //     area: 35231,
              //     comprehensive_score: 55,
              //     center_wkt: "POINT(120.069254227924 30.4426198260172)",
              //   },
              // ];
              // that.showXgdkCenterPoint();
            }
          }
        })
        .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)
    },
    hotQuestionReset() {
      if (this.inputText == '' || this.inputText == null) {
        // this.$Message.info("请输入");
        // return;
        this.inputText = '帮我在萧山区推荐一宗60亩左右的工业用地'
      }

      this.zwinputText = ''
      this.questionModal = false
      this.histories = new ArrayQueue(5)
      this.toggleTab(0)
    },
    zwsend() {
      if (!this.zwinputText) {
        this.zwinputText = '帮我在萧山区推荐一宗60亩左右的工业用地'
      }
      var item = { name: this.zwinputText, loading: true }
      // this.hzData = [item]
      this.hzData.push(item)
      this.activeIndex = 0
      this.send()
    },
    //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({
              url: item.url,
              opacity: 0.8,
              f: 'json'
            })
          }
          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(100)
          }
          if (item.type == 'wmts') {
            item.layer = getWmtsLayer(item)
            item.layer.setZIndex(100)
          }
          this.map.addLayer(item.layer)
        } else {
          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 = window.ApplicationConfig.layerTreeConfig;
      this.layers.forEach((item, index) => {
        if (index == 0) {
          item.checked = true
        } else {
          item.checked = false
        }
      })
      let myCenter = new L.LatLng(this.latitude, this.longitude) // 设置地图中心
      this.map = L.map(this.id, {
        zoom:window.ApplicationConfig.mapOptions["zoom"],
        center: window.ApplicationConfig.mapOptions["center"],
        zoomControl: false,
        crs: CRS_4490,
        attributionControl: false, //去掉右下角的logo
      });
      var tk = window.ApplicationConfig.tk;
      var tk = "6dfd31e3b55a8466f34997aee5551a9c";
      // 添加天地图底图
      //底图
      // const image = L.tileLayer(
      //   "http://t{s}.tianditu.gov.cn/img_w/wmts?tk=" +
      //     tk +
      //     "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
      //   {
      //     subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
      //     zIndex: 1,
      //   }
      // );
      // this.map.addLayer(image);
      // const dx = L.tileLayer(
      //   "https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
      //     tk,
      //   {
      //     subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
      //     transparent: true,
      //     zIndex: 2,
      //   }
      // );
      // this.map.addLayer(dx);

      // //注记
      // const cia = L.tileLayer(
      //   "http://t{s}.tianditu.gov.cn/cia_w/wmts?tk=" +
      //     tk +
      //     "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
      //   {
      //     subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
      //     transparent: true,
      //     zIndex: 3,
      //   }
      // );
      // this.map.addLayer(cia);
      // let dtLayers = {
      //   name: "底图",
      //   layers: [
      //     {
      //       name: "浙江影像",
      //       id: "zjyx",
      //       checked: true,
      //       type: "wmts",
      //       url: "https://kjzl.zrzyt.zj.gov.cn/zdzy/gtkj/zjgt48/34048bffdd0d4d148ca4a40da7eade21/services/wmts/imgmap/default/oss",
      //       layername: "imgmap",
      //     },
      //     {
      //       name: "浙江注记",
      //       id: "zjzj",
      //       checked: true,
      //       type: "wmts",
      //       url: "https://zdzy.zrzyt.zj.gov.cn/gtkj/zjgt49/2003392c13044d3ab3097b0a4328ecf2/services/wmts/imgmap_lab/default/oss",
      //       layername: "imgmap_lab",
      //     },
      //   ],
      // };

      // var zjyx = dtLayers.layers[0];
      // this.switchMapLayer(zjyx);
      // var zjzj = dtLayers.layers[1];
      // this.switchMapLayer(zjzj);

      //定位浙江省
      // this.location(polygons)
      //默认加载所有选中图层
      this.layers.forEach(layerGroup=>{
        layerGroup.layers.forEach(oneLayer=>{
           this.switchMapLayer(oneLayer)
        })
      });
      // var gd = this.layers[0].layers[0]
     
    },
    //属性识别
    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) {
      if (index != -1) {
        this.getActiveItemGeometry(item)
      }
      if (
        (this.activeItem && this.activeItem.id != item.id) ||
        this.activeItem == null
      ) {
        if (this.dkIndex != index) {
          if (this.geojsonLayer) {
            this.map.removeLayer(this.geojsonLayer)
            this.geojsonLayer = null
          }
        }
        this.clearMark()
        this.showDetail = false
        this.activeItem = item
        this.dkIndex = index
        //高亮marker
        this.hightMarker(index)
      } else {
        if (this.geojsonLayer) {
          this.map.removeLayer(this.geojsonLayer)
          this.geojsonLayer = null
        }
        this.showDetail = false
        this.clearMark()
        this.activeItem = null
      }
      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
      if (this.geojsonLayer) {
        this.map.removeLayer(this.geojsonLayer)
        this.geojsonLayer = null
      }
      if (this.identifyGeojsonLayer) {
        this.map.removeLayer(this.identifyGeojsonLayer)
      }
      this.clearMark()
    },
    //收藏
    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.showDetail && this.activeItem.id != item.id) {
        this.showDetail = false
      }
      // this.activeItem = item;
      if (this.geojsonLayer) {
        this.map.removeLayer(this.geojsonLayer)
        this.geojsonLayer = null
      }
      if (this.identifyGeojsonLayer) {
        this.map.removeLayer(this.identifyGeojsonLayer)
      }
      if (index != undefined) {
        if (this.dkIndex != index) {
          this.dkGeo = null
          this.dkGeoJson = null
        }
        this.dkIndex = index
      }
      if (this.dkGeo) {
        this.geojsonLayer = this.dkGeo.addTo(this.map)
        this.map.fitBounds(this.dkGeo.getBounds())
      } else {
        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.name +
              '\''
        axios.get(query).then((data) => {
          console.log(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
          this.geojsonLayer = geos.addTo(this.map)
          this.map.fitBounds(geos.getBounds())
        })
      }
    },
    //获取地块信息
    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() {
      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
      }
    },
    //路线绘制
    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 = center.split(',')
        this.markerLayer = L.marker([centerList[1], centerList[0]], {
          icon: L.icon({
            iconUrl: '~@/assets/image/staticImage/icon-end.png', // 标点图标地址
            iconSize: [50, 50] // 图标大小
          })
        })
          .addTo(this.map)
          .bindPopup(item.name)
        if (this.dkGeo) {
          const bounds = L.latLngBounds()
          bounds.extend(this.dkGeo.getBounds())
          var pointLng = L.latLngBounds([[centerList[1], centerList[0]]])
          bounds.extend(pointLng)
          // this.map.fitBounds(bounds);
          this.map.fitBounds(bounds, { padding: [10, 10] })
          if (this.zoom == 0) {
            this.zoom = this.map.getZoom()
          }
        } else {
          let query =
                window.ApplicationConfig.landUrl +
                '/0/query?where=id=' +
                this.activeItem.id +
                '&' +
                '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) {
              return
            }
            this.land = data.data.features[0].attributes
            var geojson = arcgisToGeoJSON(data.data.features[0].geometry)
            var geos = L.geoJSON(geojson, {
              style: function (feature) {
                return { color: '#3BA5FF' }
              }
            })
            this.dkGeo = geos
            this.dkGeoJson = geojson
            const bounds = L.latLngBounds()
            bounds.extend(geos.getBounds())

            var pointLng = L.latLngBounds([[centerList[1], centerList[0]]])
            bounds.extend(pointLng)
            this.map.fitBounds(bounds, { padding: [10, 10] })
            if (this.zoom == 0) {
              this.zoom = this.map.getZoom()
            }
          })
        }
      }
      //路线
      var token = window.ApplicationConfig.tk
      let that = this
      // var token = "6dfd31e3b55a8466f34997aee5551a9c";
      var routerUrl = window.ApplicationConfig.routeUrl
      var url = `${routerUrl}{"orig":"${center}","dest":"${cp}","style":"1"}&type=search&tk=${token}`
      axios.get(url).then((res) => {
        if (res.data) {
          if (that.polyline) {
            that.map.removeLayer(that.polyline)
          }
          var data = res.data
            .substring(
              res.data.indexOf('<routelatlon>') + 13,
              res.data.indexOf('</routelatlon>')
            )
            .split(';')
          data = data.slice(0, data.length - 1)
          var latlngs = []
          data.forEach((item) => {
            var i = item.split(',').reverse()
            latlngs.push(i)
          })
          that.polyline = L.polyline(latlngs, { color: 'red' }).addTo(that.map)
          // that.map.fitBounds(that.polyline.getBounds());
          if (latlngs.length >= 20) {
            if (item.unit == 'km' && item.distance >= 1.7) {
              that.map.setZoom(that.zoom - 3)
              if (latlngs.length >= 30) {
                that.map.setZoom(that.zoom - 4)
              }
            } else {
              that.map.setZoom(that.zoom - 2)
            }
          } else {
            that.map.setZoom(that.zoom - 1)
          }
          that.$refs.znxz.showDistance(item)
        }
      })
    },
    //所有地块仿百度地图绘制
    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()
      if (mock) {
        setTimeout(() => {
          this.mockSend()
        }, 3000)

        return
      }
      this.checkInterval = setInterval(() => {
        this.checkTimeOut()
      }, this.gInterval)
      // 建立连接
      // let eventSource = new EventSource(
      //   `${window.ApplicationConfig.subscribeUrl}${this.inputText.trim()}`
      // );
      if (!this.ctrlAbout) {
        this.ctrlAbout = new AbortController()
      }
      //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),
    mockSend() {
      const length = this.mockData.summary.length
      const lastRes = this.hzData[this.hzData.length - 1]

      this.radarShow = false
      this.loading = false
      // 模拟流氏输出
      let ch = 0
      this.mockInterval = setInterval(() => {
        if (ch <= length) {
          ch = ch + Math.ceil(Math.random() * 10) + 2
          if (ch > length) {
            ch = length
          }
          lastRes.summary = this.mockData.summary.substring(0, ch)
          this.$forceUpdate()
          if (ch === length) {
            this.showResult = true
            clearInterval(this.mockInterval)
            this.mockInterval = null
            lastRes.loading = false
            this.xgdk = this.mockData.dks
            this.clearMark()
            this.showXgdkCenterPoint()
            // this.answer = e.data;
            this.burialPoint()
          }
        }
      }, 100)
    },
    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.summary = lastChoice.content
              T.hzData.forEach((item, index) => {
                if (index == T.hzData.length - 1) {
                  T.hzData[index].summary = lastChoice.content
                  T.$forceUpdate()
                }
              })
            }
            if (agentName === 'summary' && executed && 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('\n```\n', '')
                exec_res = JSON.parse(exec_res)
                var dk = exec_res
                // dk.sort(function (a, b) {
                //   return b.comprehensive_score - a.comprehensive_score;
                // });
                console.log('dk: ', dk)
                T.xgdk = dk
                T.clearMark()
                T.showXgdkCenterPoint()
                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.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
        }
      ])
    },

    calcRadarScan() {
      const { offsetHeight, offsetWidth } = document.body
      let width = offsetWidth - 488

      if (width > offsetHeight) {
        width = offsetHeight

        this.radarScanStyle = {
          width: offsetHeight + 'px',
          height: offsetHeight + 'px',
          top: 0,
          left: (offsetWidth - 488 - width) / 2 + 488 + 'px'
        }
      } else {
        this.radarScanStyle = {
          width: width + 'px',
          height: width + 'px',
          left: '488px',
          top: (offsetHeight - width) / 2 + 'px'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ivu-spin-fix {
  border-radius: 10px;
  position: relative;
  height: 200px;
}

.industria-land-detail {
  width: 100%;
  position: relative;
  height: 100%;

  .map-content {
    position: absolute;
    width: 100%;
    top: 0px;
    height: calc(100% - 0px);

    .content {
      width: 100%;
      height: 100%;
      position: relative;

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

        .radar-scan-an {
          position: absolute;
          left: 488px;
          z-index: 1001;
          height: 904px;
          width: 904px;
          //top: 100px;
        }
      }

      .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: 250px;

            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;
        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;
        }
      }
    }
  }
}

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

.dkitem {
  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;
  }

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

<style>
.point-div-icon {
  /*width: 36px !important;
  height: 52px !important; */
  width: 36px !important;
  height: 42px !important;
  text-align: center !important;
  font-size: 14px;
  padding-top: 8px;
  color: white;
  font-weight: 400;
  cursor: pointer;
  background: url("~@/assets/image/staticImage/icon-red.png");
  background-size: cover;
}

.point-div-icon:hover {
  width: 36px !important;
  height: 42px !important;
  background: url("~@/assets/image/staticImage/icon-blue.png");
  background-size: cover;
}

.highlight-div-icon {
  width: 36px !important;
  height: 42px !important;
  text-align: center !important;
  font-size: 14px;
  padding-top: 8px;
  color: white;
  font-weight: 400;
  cursor: pointer;
  background: url("~@/assets/image/staticImage/icon-blue.png");
  background-size: cover;
}
</style>