|
|
@@ -1,2176 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="industria-land-detail">
|
|
|
- <industrial-top
|
|
|
- @collect="doCollect"
|
|
|
- @compare="doCompare"
|
|
|
- @chart="showFlowChart"
|
|
|
- ></industrial-top>
|
|
|
- <div class="map-content">
|
|
|
- <div class="content">
|
|
|
- <div :id="id" class="map"></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="showLayerControl = !showLayerControl"
|
|
|
- >
|
|
|
- <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">
|
|
|
- <div class="name">图例</div>
|
|
|
- <div class="layer-legend">
|
|
|
- <ul>
|
|
|
- <li v-for="(item, index) in legend" :key="index">
|
|
|
- <div class="label">
|
|
|
- <i
|
|
|
- :style="{ background: item.fill, borderColor: item.border }"
|
|
|
- v-if="item.children == undefined"
|
|
|
- ></i
|
|
|
- >{{ item.name }}
|
|
|
- </div>
|
|
|
- <div class="label">
|
|
|
- <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 }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <vue-perfect-scrollbar :settings="settings" class="left-panel">
|
|
|
- <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">
|
|
|
- <img src="~@/assets/image/cyyd/jsz.png" />
|
|
|
-
|
|
|
- {{ hintText }}
|
|
|
- </div>
|
|
|
- <div class="steps" v-if="item.loading">
|
|
|
- <div
|
|
|
- class="item"
|
|
|
- v-for="(item, index) in steps"
|
|
|
- :key="index"
|
|
|
- @click="toggle(index)"
|
|
|
- >
|
|
|
- <div class="name-panel">
|
|
|
- <img
|
|
|
- src="~@/assets/image/cyyd/wtfx-select.png"
|
|
|
- class="icon"
|
|
|
- v-if="index <= activeIndex"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="~@/assets/image/cyyd/wtfx-normal.png"
|
|
|
- class="icon"
|
|
|
- v-else
|
|
|
- />
|
|
|
- <div class="name" :class="{ c: index > activeIndex }">
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="line"
|
|
|
- v-if="index != steps.length - 1"
|
|
|
- :class="{ checked: index < activeIndex }"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </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">
|
|
|
- <div class="text" v-html="item.summary"></div>
|
|
|
- <template
|
|
|
- v-if="
|
|
|
- index == hzData.length - 1 &&
|
|
|
- item.loading == false &&
|
|
|
- xgdk.length > 0
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="btns-panel">
|
|
|
- <div class="left-btn">
|
|
|
- <img src="~@/assets/image/cyyd/share.png" class="icon" />
|
|
|
- <div class="diver"></div>
|
|
|
- <div class="alias">追问</div>
|
|
|
- <img src="~@/assets/image/cyyd/sdyj.png" class="icon" />
|
|
|
- <div class="diver"></div>
|
|
|
- <div class="alias">深度研究</div>
|
|
|
- </div>
|
|
|
- <div class="right-btn" @click="showFeek()">
|
|
|
- <div class="zw feek">问题反馈</div>
|
|
|
- </div>
|
|
|
- <div class="right-btn" @click="toggleZw()">
|
|
|
- <div class="zw" :class="{ checked: zhuiwen }">追问</div>
|
|
|
- <img src="~@/assets/image/cyyd/zhuiwen.png" class="icon" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="textarea-panel" v-if="zhuiwen">
|
|
|
- <textarea
|
|
|
- v-model="zwinputText"
|
|
|
- type="text"
|
|
|
- autocapitalize="off"
|
|
|
- autocomplete="off"
|
|
|
- spellcheck="false"
|
|
|
- autocorrect="off"
|
|
|
- maxlength="1000"
|
|
|
- placeholder="继续提问"
|
|
|
- autofocus=""
|
|
|
- >
|
|
|
- </textarea>
|
|
|
- <div class="btn" @click="zwsend">
|
|
|
- <img src="~@/assets/image/cyyd/send.png" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template v-if="showResult">
|
|
|
- <div class="xg-title">
|
|
|
- <img src="~@/assets/image/cyyd/xgdk.png" />
|
|
|
- <div class="name">相关地块</div>
|
|
|
- <img src="~@/assets/image/cyyd/xs.png" @click="showTableInfo" />
|
|
|
- </div>
|
|
|
- <div class="table-panel">
|
|
|
- <div class="th">
|
|
|
- <div class="it xh">序号</div>
|
|
|
- <div class="it">名称</div>
|
|
|
- <div class="it">面积(亩)</div>
|
|
|
- <div class="it text">单价(万元/m²)</div>
|
|
|
- <div class="it xh">得分</div>
|
|
|
- <div class="it xh">操作</div>
|
|
|
- </div>
|
|
|
- <template v-if="xgdk && xgdk.length > 0">
|
|
|
- <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>
|
|
|
- <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="activeItem"
|
|
|
- ></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="50%"
|
|
|
- >
|
|
|
- <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 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 landMethods from "@/api/land";
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- industrialTop,
|
|
|
- znxzDetail,
|
|
|
- znxzCompare,
|
|
|
- znxzCollect,
|
|
|
- FlowChart,
|
|
|
- LandTable,
|
|
|
- FeekBack,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- hzData: [],
|
|
|
- input: "",
|
|
|
- inputText: "帮我在杭州市推荐一宗50亩左右的工业用地。",
|
|
|
- shwoCompare: false,
|
|
|
- shwoCollect: false,
|
|
|
- answer:'',
|
|
|
- markerLayer: null,
|
|
|
- questionModal: false,
|
|
|
- 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: true,
|
|
|
- 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.5 * 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,
|
|
|
- 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: "",
|
|
|
- border: "rgb(0, 122,255)",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "住宅",
|
|
|
- fill: "",
|
|
|
- border: "rgb(255,170,0)",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "商业",
|
|
|
- fill: "",
|
|
|
- border: "rgb(230,0,0)",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initMap();
|
|
|
- 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: {
|
|
|
- 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);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- 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.hzData = [];
|
|
|
- var item = { name: that.inputText, loading: true };
|
|
|
- that.hzData.push(item);
|
|
|
- // 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);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- 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);
|
|
|
- },
|
|
|
- zwsend() {
|
|
|
- var item = { name: this.zwinputText, loading: true };
|
|
|
- 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;
|
|
|
- }
|
|
|
- },
|
|
|
- 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() {
|
|
|
- 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, {
|
|
|
- center: myCenter,
|
|
|
- zoom: this.zoomLevel,
|
|
|
- });
|
|
|
- // 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);
|
|
|
- //定位浙江省
|
|
|
- this.location(polygons);
|
|
|
- //默认加载供地图层
|
|
|
- var gd = this.layers[0].layers[0];
|
|
|
- this.switchMapLayer(gd);
|
|
|
- },
|
|
|
- //属性识别
|
|
|
- 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 = true;
|
|
|
- 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;
|
|
|
- }
|
|
|
- },
|
|
|
- //地块收藏点击查看详情
|
|
|
- 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;
|
|
|
- this.wt = "在" + this.tabs[index] + "中," + this.inputText;
|
|
|
- this.count = 0;
|
|
|
- this.zwinputText = "";
|
|
|
- this.zhuiwen = false;
|
|
|
- this.send();
|
|
|
- },
|
|
|
-
|
|
|
- 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.landUrl +
|
|
|
- "/0/query?where=id=" +
|
|
|
- item.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) {
|
|
|
- this.$Message.info("未查询到数据");
|
|
|
- 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;
|
|
|
- this.geojsonLayer = geos.addTo(this.map);
|
|
|
- this.map.fitBounds(geos.getBounds());
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- //获取地块信息
|
|
|
- async getActiveItemGeometry(item) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- let query =
|
|
|
- window.ApplicationConfig.landUrl +
|
|
|
- "/0/query?where=id=" +
|
|
|
- item.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) {
|
|
|
- this.dkGeo = null;
|
|
|
- this.dkGeojson = null;
|
|
|
- return;
|
|
|
- }
|
|
|
- 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;
|
|
|
- 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());
|
|
|
- });
|
|
|
- this.map.fitBounds(bounds);
|
|
|
- },
|
|
|
- //详情页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) => {
|
|
|
- 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.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;
|
|
|
- this.interval = setInterval(() => {
|
|
|
- if (this.activeIndex < this.steps.length - 2) {
|
|
|
- this.activeIndex = this.activeIndex + 1;
|
|
|
- }
|
|
|
- }, 5000);
|
|
|
-
|
|
|
- var question = this.wt.trim();
|
|
|
- if (this.zwinputText != "") {
|
|
|
- question = question + ",其中" + this.zwinputText.trim();
|
|
|
- }
|
|
|
- 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();
|
|
|
- }
|
|
|
- //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.loading = false;
|
|
|
- that.count++;
|
|
|
-
|
|
|
- if (that.interval) {
|
|
|
- clearInterval(that.interval);
|
|
|
- }
|
|
|
- that.activeIndex = 0;
|
|
|
- // if (that.count == 1) {
|
|
|
- // that.send();
|
|
|
- // } else {
|
|
|
- // that.count = 0;
|
|
|
- // that.loading = false;
|
|
|
- // if (that.ctrlAbout) {
|
|
|
- // that.ctrlAbout.abort();
|
|
|
- // }
|
|
|
- // }
|
|
|
- that.loading = false;
|
|
|
- if (that.ctrlAbout) {
|
|
|
- that.ctrlAbout.abort();
|
|
|
- }
|
|
|
- throw err;
|
|
|
- },
|
|
|
- }).catch((err) => {
|
|
|
- console.log(err);
|
|
|
- console.log("请求报错:" + err);
|
|
|
- that.loading = false;
|
|
|
- if (that.ctrlAbout) {
|
|
|
- that.ctrlAbout.abort();
|
|
|
- }
|
|
|
- });
|
|
|
- }, 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);
|
|
|
- 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];
|
|
|
- }
|
|
|
- });
|
|
|
- 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.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;
|
|
|
- });
|
|
|
- T.xgdk = dk;
|
|
|
- T.showXgdkCenterPoint();
|
|
|
- T.answer=e.data;
|
|
|
- T.burialPoint();
|
|
|
- } else {
|
|
|
- T.xgdk = [];
|
|
|
- }
|
|
|
- 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,
|
|
|
- },
|
|
|
- ]);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</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: 80px;
|
|
|
- height: calc(100% - 80px);
|
|
|
- .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: 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: 10px;
|
|
|
- padding: 20px;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 10px;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- bottom: 10px;
|
|
|
- z-index: 19;
|
|
|
- .name {
|
|
|
- font-family: Alibaba PuHuiTi 2;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .layer-legend {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .layer-legend ul li {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- .layer-legend ul li i {
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- border: 1px solid transparent;
|
|
|
- height: 20px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- .label {
|
|
|
- width: 100%;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .zl {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .left-panel {
|
|
|
- width: 486px;
|
|
|
- padding: 31px 28px 30px 26px;
|
|
|
- z-index: 11;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- background: linear-gradient(-30deg, #d6e8fb, #ffffff);
|
|
|
- .title {
|
|
|
- height: 59px;
|
|
|
- font-family: REEJI-FlashSansN95;
|
|
|
- font-weight: 900;
|
|
|
- font-size: 24px;
|
|
|
- color: #333333;
|
|
|
- cursor: pointer;
|
|
|
- line-height: 36px;
|
|
|
- }
|
|
|
- .jsz {
|
|
|
- margin: 32px 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%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tab-content {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 260px);
|
|
|
- position: relative;
|
|
|
- .text {
|
|
|
- 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;
|
|
|
- .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;
|
|
|
- border-radius: 10px;
|
|
|
- position: relative;
|
|
|
- padding: 18px 0px 0px 19px;
|
|
|
- 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-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-<style >
|
|
|
-.point-div-icon {
|
|
|
- width: 36px !important;
|
|
|
- height: 52px !important;
|
|
|
- text-align: center !important;
|
|
|
- font-size: 18px;
|
|
|
- padding-top: 5px;
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- background: url("~@/assets/image/staticImage/icon-red.png");
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-
|
|
|
-.point-div-icon:hover {
|
|
|
- width: 36px !important;
|
|
|
- height: 52px !important;
|
|
|
- background: url("~@/assets/image/staticImage/icon-blue.png");
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.highlight-div-icon {
|
|
|
- width: 36px !important;
|
|
|
- height: 52px !important;
|
|
|
- text-align: center !important;
|
|
|
- font-size: 18px;
|
|
|
- padding-top: 5px;
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- background: url("~@/assets/image/staticImage/icon-blue.png");
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-</style>
|
liutao