|
|
@@ -0,0 +1,2524 @@
|
|
|
+<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};`"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-tool">
|
|
|
+
|
|
|
+ <div class="layer-container">
|
|
|
+ <div
|
|
|
+ class="layer-panel"
|
|
|
+ :class="{ checked: showLayerControl }"
|
|
|
+ @click="toggleLayerControl"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="~@/assets/image/icon-layer-checked.png"
|
|
|
+ class="img"
|
|
|
+ v-if="showLayerControl"
|
|
|
+ />
|
|
|
+ <img src="~@/assets/image/icon-layer.png" class="img" v-else />
|
|
|
+ <span :class="{ c: showLayerControl }">图层控制</span>
|
|
|
+ </div>
|
|
|
+ <div class="layer-content-border" v-if="showLayerControl">
|
|
|
+ <vue-perfect-scrollbar class="layer-content" :settings="settings">
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ v-for="(item, index) in layers"
|
|
|
+ :key="index + '-13'"
|
|
|
+ >
|
|
|
+ <div class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ v-for="(_item, _index) in item.layers"
|
|
|
+ :key="_index + '-14'"
|
|
|
+ style="margin: 5px 0"
|
|
|
+ >
|
|
|
+ <Checkbox
|
|
|
+ v-model="_item.checked"
|
|
|
+ class="checkbox"
|
|
|
+ @click.native.stop=""
|
|
|
+ @on-change="switchMapLayer(_item)"
|
|
|
+ >{{ _item.name }}
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vue-perfect-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="!showQuery" class="topdiv">
|
|
|
+ <div class="m-textarea-panel">
|
|
|
+ <textarea
|
|
|
+ v-model="inputText"
|
|
|
+ type="text"
|
|
|
+ autocapitalize="off"
|
|
|
+ autocomplete="off"
|
|
|
+ spellcheck="false"
|
|
|
+ autocorrect="off"
|
|
|
+ placeholder="您可以试着这样问我，如“帮我在萧山区找一下永农面积大于100亩的地块”"
|
|
|
+ autofocus=""
|
|
|
+ >
|
|
|
+ </textarea>
|
|
|
+ <AIBtn @send="hotQuestionReset()" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <vue-perfect-scrollbar
|
|
|
+ :settings="settings"
|
|
|
+ class="left-panel"
|
|
|
+ v-if="showQuery"
|
|
|
+ >
|
|
|
+ <div class="left-panel-content">
|
|
|
+ <div v-for="(item, index) in hzData" :key="index">
|
|
|
+ <div class="title" @click="resetAnswer(index)">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="jsz" v-if="item.loading && !showResult">
|
|
|
+ <Spin />
|
|
|
+ {{ hintText }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tab-content" v-if="!showResult">
|
|
|
+ <div class="summary-content">
|
|
|
+ <div class="summary-icon">
|
|
|
+ <img src="~@/assets/image/cyyd/summary-icon.png" />
|
|
|
+ </div>
|
|
|
+ <vue-markdown-it
|
|
|
+ :source="item.summary"
|
|
|
+ :options="{
|
|
|
+ html: true,
|
|
|
+ linkify: true,
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="showResult">
|
|
|
+ <div class="xg-title">
|
|
|
+ <img src="~@/assets/image/cyyd/fk.png" />
|
|
|
+ <div class="name">回答</div>
|
|
|
+ </div>
|
|
|
+ <p class="xg-des">
|
|
|
+ <span>为您推荐以下{{ xgdk ? xgdk.length : 0 }}个地块：</span>
|
|
|
+ <span @click="toggleContentVisabledAll">
|
|
|
+ <template v-if="mContentVisabled">
|
|
|
+ <Icon class="icon" type="ios-arrow-up" />
|
|
|
+ <span class="text">全部收起</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <Icon class="icon" type="ios-arrow-down" />
|
|
|
+ <span class="text">全部展开</span>
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </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="dk_title">
|
|
|
+ <div>
|
|
|
+ <span>{{ i+1 }}</span>
|
|
|
+ <span>{{ citem.ydxz }}</span>
|
|
|
+ </div>
|
|
|
+ <div @click="toggleContentVisabled(citem)">
|
|
|
+ <template v-if="citem['show']">
|
|
|
+ <Icon type="ios-arrow-up" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <Icon type="ios-arrow-down" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-show="citem['show']">
|
|
|
+ <p>推荐原因：</p>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <span>地块信息：</span>
|
|
|
+ <span>该地块为{{citem.ydxz}}（M1），面积36.45亩。</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>位置周边：</span>
|
|
|
+ <span>该地块位于工业区内，距离机场（萧山国际机场） 4.4km，距高速出入口（萧山南）1.5km，距高铁站（杭州南） 2.8km。</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-else class="hintText">未查询到相关地块数据！</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="xg-title" v-if="false">
|
|
|
+ <img src="~@/assets/image/cyyd/xgdk.png" />
|
|
|
+ <div class="name">相关组织</div>
|
|
|
+ <img src="~@/assets/image/cyyd/xs.png" />
|
|
|
+ </div>
|
|
|
+ <div class="table-panel" v-if="false">
|
|
|
+ <div class="th" v-if="xgzz.length > 0">
|
|
|
+ <div class="it xh">序号</div>
|
|
|
+ <div class="it">组织名称</div>
|
|
|
+ <div class="it">组织描述</div>
|
|
|
+ </div>
|
|
|
+ <div v-else>暂无数据</div>
|
|
|
+ <div class="tr" v-for="(item, i) in xgzz" :key="i">
|
|
|
+ <div class="it xh">{{ i + 1 }}</div>
|
|
|
+ <div class="it">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="it">{{ item.zzms }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <Spin size="large" class="span" fix v-if="loading"></Spin>
|
|
|
+ </div>
|
|
|
+ <div class="textarea-panel">
|
|
|
+ <textarea
|
|
|
+ v-model="zwinputText"
|
|
|
+ type="text"
|
|
|
+ autocapitalize="off"
|
|
|
+ autocomplete="off"
|
|
|
+ spellcheck="false"
|
|
|
+ autocorrect="off"
|
|
|
+ maxlength="1000"
|
|
|
+ placeholder="请提问"
|
|
|
+ autofocus=""
|
|
|
+ >
|
|
|
+ </textarea>
|
|
|
+ <AIBtn @send="zwsend" :disabled="btnSendDisabled" />
|
|
|
+ </div>
|
|
|
+ </vue-perfect-scrollbar>
|
|
|
+ <!-- <feek-back
|
|
|
+ ref="feek"
|
|
|
+ @close="hideFeekBackModal"
|
|
|
+ :question="querQuestion"
|
|
|
+ :answer="answer"
|
|
|
+ ></feek-back> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ class="info-modal"
|
|
|
+ footer-hide
|
|
|
+ v-model="questionModal"
|
|
|
+ :styles="{ top: '200px' }"
|
|
|
+ width="40%"
|
|
|
+ >
|
|
|
+ <textarea
|
|
|
+ class="input"
|
|
|
+ v-model="input"
|
|
|
+ type="text"
|
|
|
+ autocapitalize="off"
|
|
|
+ autocomplete="off"
|
|
|
+ spellcheck="false"
|
|
|
+ enterkeyhint="reset"
|
|
|
+ autocorrect="off"
|
|
|
+ placeholder="请输入，Enter发送"
|
|
|
+ autofocus=""
|
|
|
+ @keyup.enter.stop="reset()"
|
|
|
+ ></textarea>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="name" @click="input = ''">清空</div>
|
|
|
+ <div class="send-btn" @click="reset">发送</div>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import industrialTop from "@/components/IndustrialTop";
|
|
|
+import L from "leaflet";
|
|
|
+import Proj from "proj4leaflet";
|
|
|
+import ArrayQueue from "@/struct/ArrayQueue";
|
|
|
+import axios from "axios";
|
|
|
+import { arcgisToGeoJSON } from "@terraformer/arcgis";
|
|
|
+import loginMethods from "@/api/login";
|
|
|
+import { v4 as uuid } from "uuid";
|
|
|
+import { fetchEventSource } from "@microsoft/fetch-event-source";
|
|
|
+import dynamicMapLayer from "esri-leaflet/src/Layers/DynamicMapLayer";
|
|
|
+import * as turf from "@turf/turf";
|
|
|
+import { getWmtsLayer } from "@/util/leaflet";
|
|
|
+import wkt from "wellknown";
|
|
|
+import VueMarkdownIt from "vue-markdown-it";
|
|
|
+import landMethods from "@/api/land";
|
|
|
+import AIBtn from "@/components/AIBtn.vue";
|
|
|
+import LC from "@/assets/layerConfig.js"
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ industrialTop,
|
|
|
+ VueMarkdownIt,
|
|
|
+ AIBtn,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ geoLayer: null,
|
|
|
+ nearMarkerList: [],
|
|
|
+ radarScanStyle: {
|
|
|
+ width: "100%",
|
|
|
+ height: "100%",
|
|
|
+ left: 0,
|
|
|
+ top: 0,
|
|
|
+ },
|
|
|
+ hzData: [],
|
|
|
+ showQuery: false,
|
|
|
+ radarShow: false,
|
|
|
+ btnSendDisabled: false,
|
|
|
+ input: "",
|
|
|
+ inputText: "",
|
|
|
+ shwoCompare: false,
|
|
|
+ shwoCollect: false,
|
|
|
+ answer: "",
|
|
|
+ markerLayer: null,
|
|
|
+ questionModal: false,
|
|
|
+ showLegend: true,
|
|
|
+ hintText: "思考中...",
|
|
|
+ dkIndex: -1,
|
|
|
+ hoverDkIndex: -1,
|
|
|
+ summary: "",
|
|
|
+ wt: null,
|
|
|
+ count: 0,
|
|
|
+ activeItem: { id: 1 },
|
|
|
+ id: "industriaMap" + new Date().getTime(),
|
|
|
+ layers: [],
|
|
|
+ mContentVisabled: true,
|
|
|
+ showResult: false,
|
|
|
+ showDetail: false,
|
|
|
+ zoomLevel: 8,
|
|
|
+ zhuiwen: false,
|
|
|
+ dkGeo: null,
|
|
|
+ dkGeoJson: null,
|
|
|
+ activeIndex: 0,
|
|
|
+ tabIndex: 0,
|
|
|
+ map: null,
|
|
|
+ xgzz: [],
|
|
|
+ zoom: 0,
|
|
|
+ xgdk: [],
|
|
|
+ interval: null,
|
|
|
+ zwinputText: "",
|
|
|
+ loading: false,
|
|
|
+ ctrlAbout: null,
|
|
|
+ eventSource: null,
|
|
|
+ messages: [],
|
|
|
+ gInterval: 3 * 1000 * 60,
|
|
|
+ checkInterval: null,
|
|
|
+ histories: new ArrayQueue(5),
|
|
|
+ tabs: ["全部建设用地", "新建建设用地", "存量建设用地"],
|
|
|
+ steps: [
|
|
|
+ {
|
|
|
+ name: "问题分析",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "地块搜索",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "整理答案",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "回答完成",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ querQuestion: "",
|
|
|
+ settings: {
|
|
|
+ maxScrollbarLength: 60,
|
|
|
+ },
|
|
|
+ geojsonLayer: null,
|
|
|
+ wktToGeojsonLayer: null,
|
|
|
+ identifyGeojsonLayer: null,
|
|
|
+ type: null,
|
|
|
+ modal: false,
|
|
|
+ showTableModal: true,
|
|
|
+ showLayerControl: false,
|
|
|
+ polyline: null,
|
|
|
+ dkMarkerLayer: [],
|
|
|
+ startTime: 0,
|
|
|
+ showIndentify: false,
|
|
|
+ detailData: null,
|
|
|
+ cyyqLayer: null,
|
|
|
+ legend: [
|
|
|
+ {
|
|
|
+ name: "可利用资源",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "公告地块",
|
|
|
+ fill: "green",
|
|
|
+ border: "green",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "计划地块",
|
|
|
+ fill: "blue",
|
|
|
+ border: "blue",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ mockInterval: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.mapExtend();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.activeIndex = 0;
|
|
|
+ this.initMap();
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (this.$route.params && this.$route.params.keyword) {
|
|
|
+ this.inputText = this.$route.params.keyword;
|
|
|
+ }
|
|
|
+ this.zwinputText = "";
|
|
|
+ this.type = this.$route.params.type;
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ toggleContentVisabledAll () {
|
|
|
+ this.mContentVisabled = !this.mContentVisabled;
|
|
|
+ this.xgdk.forEach((item) => {
|
|
|
+ item['show'] = this.mContentVisabled
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toggleContentVisabled (item) {
|
|
|
+ item['show'] = item['show'] ? false : true
|
|
|
+ this.mContentVisabled = item['show']
|
|
|
+ },
|
|
|
+ mapExtend() {
|
|
|
+ // 18级的地图
|
|
|
+ L.TileLayer.MyTileLayer2 = L.TileLayer.extend({
|
|
|
+ getTileUrl: function (coords) {
|
|
|
+ return L.Util.template(this._url, {
|
|
|
+ x: coords.x,
|
|
|
+ y: coords.y,
|
|
|
+ z: coords.z - 1,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addGdLayer(dklist) {
|
|
|
+ if (this.geoLayer) {
|
|
|
+ this.map.removeLayer(this.geoLayer);
|
|
|
+ this.geoLayer = null;
|
|
|
+ }
|
|
|
+ let that = this;
|
|
|
+ if (dklist && dklist.length) {
|
|
|
+ let idGroup = dklist.map((item) => item.objectid);
|
|
|
+ let sql = "(" + idGroup.join(",") + ")";
|
|
|
+ let queryGeometryUrl = window.ApplicationConfig.queryGeometryListUrl;
|
|
|
+ axios.get(queryGeometryUrl, { params: { items: sql } }).then((data) => {
|
|
|
+ if (data && data.data && data.data.length) {
|
|
|
+ let geojsonList = data.data.map((ele) => JSON.parse(ele.geom));
|
|
|
+ that.geoLayer = L.geoJSON(geojsonList, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "blue" };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ that.geoLayer.addTo(that.map);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggleLayerControl() {
|
|
|
+ this.showLayerControl = !this.showLayerControl;
|
|
|
+ if (!this.showLegend) {
|
|
|
+ this.showLegend = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggleIdentity() {
|
|
|
+ this.showIndentify = !this.showIndentify;
|
|
|
+ if (this.showIndentify) {
|
|
|
+ this.map.on("click", this.mapClick);
|
|
|
+ } else {
|
|
|
+ this.map.off("click", this.mapClick);
|
|
|
+ if (this.showDetail) {
|
|
|
+ this.hideDetail();
|
|
|
+ }
|
|
|
+ if (this.identifyGeojsonLayer) {
|
|
|
+ this.map.removeLayer(this.identifyGeojsonLayer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ this.showDetail = false;
|
|
|
+ this.showQuery = false;
|
|
|
+ this.radarShow = false;
|
|
|
+ if (this.dkMarkerLayer) {
|
|
|
+ this.dkMarkerLayer.forEach((item) => {
|
|
|
+ this.map.removeLayer(item);
|
|
|
+ });
|
|
|
+ this.dkMarkerLayer = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.ctrlAbout) {
|
|
|
+ this.ctrlAbout.abort();
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ if (this.interval) {
|
|
|
+ clearInterval(this.interval);
|
|
|
+ }
|
|
|
+ if (this.mockInterval) {
|
|
|
+ clearInterval(this.mockInterval);
|
|
|
+ }
|
|
|
+ this.inputText = "";
|
|
|
+ },
|
|
|
+ checkPermision() {
|
|
|
+ let that = this;
|
|
|
+ loginMethods
|
|
|
+ .permission()
|
|
|
+ .then((res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ that.permission = res.data;
|
|
|
+ if (that.permission) {
|
|
|
+ that.activeIndex = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ if (!this.permission) {
|
|
|
+ this.$Message.error("用户信息验证失败，请重新登录！");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.logout();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fullInput(item) {
|
|
|
+ if (!this.loading) {
|
|
|
+ this.activeIndex = 0;
|
|
|
+ this.inputText = item.name;
|
|
|
+ this.showQuery = false;
|
|
|
+ } else {
|
|
|
+ this.$Messages.info("正在请求中，请稍后！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ logout() {
|
|
|
+ this.$store.dispatch("LogOut").then(() => {
|
|
|
+ this.$router.push({ name: "login" });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ if (this.input == "" || this.input == null) {
|
|
|
+ this.$Message.info("请输入");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // this.inputText = this.input;
|
|
|
+ // this.zwinputText = "";
|
|
|
+ // this.questionModal = false;
|
|
|
+ // this.histories = new ArrayQueue(5);
|
|
|
+ // // this.hzData = [];
|
|
|
+ // // var item = { name: this.inputText, loading: true };
|
|
|
+ // // this.hzData.push(item);
|
|
|
+ // this.toggleTab(0);
|
|
|
+ this.inputText = this.input;
|
|
|
+ this.hotQuestionReset();
|
|
|
+ },
|
|
|
+ hotQuestionReset() {
|
|
|
+ if (this.inputText == "" || this.inputText == null) {
|
|
|
+ // this.$Message.info("请输入");
|
|
|
+ // return;
|
|
|
+ this.inputText = "帮我在萧山区找一下永农面积大于100亩的地块";
|
|
|
+ }
|
|
|
+ this.hideDetail();
|
|
|
+ this.zwinputText = "";
|
|
|
+ this.questionModal = false;
|
|
|
+ this.histories = new ArrayQueue(5);
|
|
|
+ if (this.geoLayer) {
|
|
|
+ this.map.removeLayer(this.geoLayer);
|
|
|
+ this.geoLayer = null;
|
|
|
+ }
|
|
|
+ if (this.geojsonLayer) {
|
|
|
+ this.map.removeLayer(this.geojsonLayer);
|
|
|
+ this.geojsonLayer = null;
|
|
|
+ }
|
|
|
+ this.toggleInfoTab();
|
|
|
+ this.toggleTab(0);
|
|
|
+ },
|
|
|
+ zwsend () {
|
|
|
+ if (!this.zwinputText) {
|
|
|
+ this.zwinputText = "帮我在萧山区找一下永农面积大于100亩的地块";
|
|
|
+ }
|
|
|
+ // var item = { name: this.zwinputText, loading: true };
|
|
|
+ // // this.hzData = [item]
|
|
|
+ // this.hzData.push(item);
|
|
|
+ // this.activeIndex = 0;
|
|
|
+ // this.toggleInfoTab();
|
|
|
+ // this.send();
|
|
|
+ this.inputText = this.zwinputText;
|
|
|
+ this.hotQuestionReset();
|
|
|
+ },
|
|
|
+ //ai超时超过3.5分钟 或者报错处理，结束请求提示未查询到信息
|
|
|
+ checkTimeOut() {
|
|
|
+ if (this.loading) {
|
|
|
+ this.xgdk = [];
|
|
|
+ this.activeIndex = 0;
|
|
|
+ if (this.ctrlAbout) {
|
|
|
+ this.ctrlAbout.abort();
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ if (this.interval) {
|
|
|
+ clearInterval(this.interval);
|
|
|
+ }
|
|
|
+ this.hzData.forEach((item, index) => {
|
|
|
+ if (index == this.hzData.length - 1) {
|
|
|
+ this.hzData[index].summary = "未查询到相关信息";
|
|
|
+ this.hzData[index].loading = false;
|
|
|
+ this.zwinputText = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (this.checkInterval) {
|
|
|
+ clearInterval(this.checkInterval);
|
|
|
+ }
|
|
|
+ this.showResult = true;
|
|
|
+ this.radarShow = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetAnswer(index) {
|
|
|
+ if (index == 0) {
|
|
|
+ this.input = this.inputText;
|
|
|
+ this.questionModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showFlowChart() {
|
|
|
+ this.modal = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.flow.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ hideModal() {
|
|
|
+ this.modal = false;
|
|
|
+ },
|
|
|
+ hideFeekBackModal() {},
|
|
|
+ showTableInfo() {
|
|
|
+ this.showTableModal = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.table.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ hideTableModal() {
|
|
|
+ this.showTableModal = false;
|
|
|
+ },
|
|
|
+ //图层控制
|
|
|
+ switchMapLayer(item) {
|
|
|
+ if (item.checked) {
|
|
|
+ if (item.layer === undefined || item.layer == null) {
|
|
|
+ if (item.type == "dynamic") {
|
|
|
+ item.layer = dynamicMapLayer({
|
|
|
+ layers:[0],
|
|
|
+ url: item.url,
|
|
|
+ f: "image",
|
|
|
+ });
|
|
|
+ } else if (item.type == "geoserver") {
|
|
|
+ item.layer = L.tileLayer.wms(item.url, {
|
|
|
+ // 链接要改对应的
|
|
|
+ layers: item.layername,
|
|
|
+ format: "image/png",
|
|
|
+ layerID: Math.random(),
|
|
|
+ transparent: true,
|
|
|
+ });
|
|
|
+ item.layer.setZIndex(item.zindex);
|
|
|
+ } else if (item.type == "wmts") {
|
|
|
+ item.layer = getWmtsLayer(item);
|
|
|
+ item.layer.setZIndex(item.zindex);
|
|
|
+ } else if (item.type == "tile2") {
|
|
|
+ item.layer = new L.TileLayer.MyTileLayer2(
|
|
|
+ item.url + "/tile/{z}/{y}/{x}"
|
|
|
+ );
|
|
|
+ item.layer.setZIndex(item.zindex);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.map.addLayer(item.layer);
|
|
|
+ } else {
|
|
|
+ if (item.layer != undefined || item.layer != null) {
|
|
|
+ this.map.removeLayer(item.layer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ initMap() {
|
|
|
+ let CRS_4490 = new Proj.CRS(
|
|
|
+ "EPSG:4490",
|
|
|
+ "+proj=longlat +ellps=GRS80 +no_defs",
|
|
|
+ {
|
|
|
+ resolutions: [
|
|
|
+ 1.4062500262315807, 0.7031249999891485, 0.35156249999999994,
|
|
|
+ 0.17578124999999997, 0.08789062500000012, 0.04394531250000006,
|
|
|
+ 0.021972656250000007, 0.01098632812500002, 0.00549316406250001,
|
|
|
+ 0.0027465820312500017, 0.0013732910156250009, 6.866455078124991e-4,
|
|
|
+ 3.4332275390624957e-4, 1.7166137695312503e-4, 8.583068847656251e-5,
|
|
|
+ 4.291534423828141e-5, 2.1457672119140645e-5, 1.0728836059570307e-5,
|
|
|
+ 5.364418029785169e-6, 2.6822090642902305e-6, 1.3411045333348457e-6,
|
|
|
+ ],
|
|
|
+ origin: [-180, 90],
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.layers = LC;
|
|
|
+ this.layers.forEach((item, index) => {
|
|
|
+ if (index == 0) {
|
|
|
+ item.checked = true;
|
|
|
+ } else {
|
|
|
+ item.checked = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.map = L.map(this.id, {
|
|
|
+ zoom: window.ApplicationConfig.mapOptions["zoom"],
|
|
|
+ center: window.ApplicationConfig.mapOptions["center"],
|
|
|
+ zoomControl: false,
|
|
|
+ crs: CRS_4490,
|
|
|
+ attributionControl: false, //去掉右下角的logo
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ //默认加载所有选中图层
|
|
|
+ this.layers.forEach((layerGroup) => {
|
|
|
+ layerGroup.layers.forEach((oneLayer) => {
|
|
|
+ this.switchMapLayer(oneLayer);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //属性识别
|
|
|
+ mapClick(e) {
|
|
|
+ if (this.identifyGeojsonLayer) {
|
|
|
+ this.map.removeLayer(this.identifyGeojsonLayer);
|
|
|
+ }
|
|
|
+ // debugger
|
|
|
+ let query =
|
|
|
+ window.ApplicationConfig.landUrl +
|
|
|
+ "/0/query?where=&text=&objectIds=&time=&geometry=" +
|
|
|
+ e.latlng.lng +
|
|
|
+ "," +
|
|
|
+ e.latlng.lat +
|
|
|
+ "&" +
|
|
|
+ "geometryType=esriGeometryPoint&inSR=4490&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&" +
|
|
|
+ "maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&" +
|
|
|
+ "outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=json";
|
|
|
+ axios.get(query).then((data) => {
|
|
|
+ console.log(data);
|
|
|
+ if (data.data.features.length < 1) {
|
|
|
+ this.$Message.info("未查询到数据");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var land = data.data.features[0].attributes;
|
|
|
+ var geojson = arcgisToGeoJSON(data.data.features[0].geometry);
|
|
|
+ console.log(turf.getGeom(geojson));
|
|
|
+ land.area = turf.area(turf.getGeom(geojson)).toFixed(2) + "平方米";
|
|
|
+ var geos = L.geoJSON(geojson, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "#3BA5FF" };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.dkGeo = geos;
|
|
|
+ this.dkGeoJson = geojson;
|
|
|
+ this.identifyGeojsonLayer = geos.addTo(this.map);
|
|
|
+ this.map.fitBounds(geos.getBounds());
|
|
|
+ this.showDetailModal(land, -1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ location(geo) {
|
|
|
+ let t = L.geoJSON(geo, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "yellow" };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.map.fitBounds(t.getBounds());
|
|
|
+ },
|
|
|
+ //高亮marker
|
|
|
+ hightMarker(i) {
|
|
|
+ this.dkMarkerLayer.forEach((item, index) => {
|
|
|
+ var className = "point-div-icon";
|
|
|
+ if (item.options.properties.p == i && index == i) {
|
|
|
+ className = "highlight-div-icon";
|
|
|
+ }
|
|
|
+ if (index == this.hoverDkIndex) {
|
|
|
+ className = "highlight-div-icon";
|
|
|
+ }
|
|
|
+ if (index == this.dkIndex) {
|
|
|
+ className = "highlight-div-icon";
|
|
|
+ }
|
|
|
+ var myIcon = L.divIcon({
|
|
|
+ html: index > -1 ? "<div>" + (index + 1) + "<div>" : "<div><div>",
|
|
|
+ className: className,
|
|
|
+ iconSize: [32, 32],
|
|
|
+ });
|
|
|
+ item.setIcon(myIcon);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //地块Item hover 和marker 高亮交互
|
|
|
+ mouseover(i) {
|
|
|
+ this.hoverDkIndex = i;
|
|
|
+ this.hightMarker(i);
|
|
|
+ },
|
|
|
+ mouseout(i) {
|
|
|
+ this.hoverDkIndex = -1;
|
|
|
+ this.hightMarker(-1);
|
|
|
+ },
|
|
|
+ //显示地块详情，先获取地块图斑，定位、路线、和地类分析需要叠加获取相交地块
|
|
|
+ showDetailModal(item, index) {
|
|
|
+ this.clearMark();
|
|
|
+ this.activeItem = item;
|
|
|
+ //高亮marker
|
|
|
+ this.hightMarker(index);
|
|
|
+ this.showDetail = true;
|
|
|
+ this.dkIndex = index;
|
|
|
+ this.goLocation(item, index);
|
|
|
+ },
|
|
|
+ //地块收藏点击查看详情
|
|
|
+ dkInfo(item) {
|
|
|
+ this.dkGeo = null;
|
|
|
+ this.dkGeoJson = null;
|
|
|
+ item.id = item.dk_id ? item.dk_id : item.id;
|
|
|
+ this.goLocation(item);
|
|
|
+ this.showDetail = true;
|
|
|
+ this.activeItem = item;
|
|
|
+ },
|
|
|
+ //隐藏详情
|
|
|
+ hideDetail() {
|
|
|
+ this.showDetail = false;
|
|
|
+ },
|
|
|
+ //收藏
|
|
|
+ doCollect(collect) {
|
|
|
+ this.shwoCollect = collect;
|
|
|
+ this.shwoCompare = false;
|
|
|
+ if (collect) {
|
|
|
+ this.hideDetail();
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ this.$refs.compre.remove();
|
|
|
+ } catch (e) {}
|
|
|
+ },
|
|
|
+ //对比
|
|
|
+ doCompare(compare) {
|
|
|
+ this.shwoCompare = compare;
|
|
|
+ this.shwoCollect = false;
|
|
|
+ if (compare) {
|
|
|
+ this.hideDetail();
|
|
|
+ } else {
|
|
|
+ try {
|
|
|
+ this.$refs.compre.remove();
|
|
|
+ } catch (e) {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggle(index) {
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.hideDetail();
|
|
|
+ },
|
|
|
+ toggleTab(index) {
|
|
|
+ if (this.loading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.tabIndex = index;
|
|
|
+ if (this.inputText) {
|
|
|
+ this.wt = this.inputText;
|
|
|
+ this.hzData = [];
|
|
|
+ var item = { name: this.wt, loading: true };
|
|
|
+ this.hzData = [item];
|
|
|
+ this.count = 0;
|
|
|
+ this.zwinputText = "";
|
|
|
+ this.zhuiwen = false;
|
|
|
+ this.showQuery = true;
|
|
|
+ this.send();
|
|
|
+ } else {
|
|
|
+ this.$Message.info("请输入！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ toggleZw() {
|
|
|
+ this.zhuiwen = !this.zhuiwen;
|
|
|
+ },
|
|
|
+ showFeek() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.feek.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //地块图斑定位
|
|
|
+ goLocation(item, index) {
|
|
|
+ if (this.geojsonLayer) {
|
|
|
+ this.map.removeLayer(this.geojsonLayer);
|
|
|
+ this.geojsonLayer = null;
|
|
|
+ }
|
|
|
+ if (this.identifyGeojsonLayer) {
|
|
|
+ this.map.removeLayer(this.identifyGeojsonLayer);
|
|
|
+ }
|
|
|
+
|
|
|
+ let queryGeometryUrl = window.ApplicationConfig.queryGeometryUrl;
|
|
|
+ let that = this;
|
|
|
+ axios
|
|
|
+ .get(queryGeometryUrl, { params: { id: item.objectid } })
|
|
|
+ .then((data) => {
|
|
|
+ if (data && data.data && data.data.length) {
|
|
|
+ that.detailData = data.data[0];
|
|
|
+ let geojson = wkt.parse(data.data[0].geom);
|
|
|
+ var geos = L.geoJSON(geojson, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "red", fillOpacity: 0 };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ that.geojsonLayer = geos.addTo(that.map);
|
|
|
+ that.map.fitBounds(geos.getBounds(), { padding: [200, 200] });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ locationByGeojson(geojson, name) {
|
|
|
+ if (this.cyyqLayer) {
|
|
|
+ this.map.removeLayer(this.cyyqLayer);
|
|
|
+ this.cyyqLayer = null;
|
|
|
+ }
|
|
|
+ var layer = L.geoJSON(geojson, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "yellow", fillOpacity: 0 };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.cyyqLayer = layer.addTo(this.map);
|
|
|
+ layer.bindPopup(name).openPopup();
|
|
|
+ this.map.fitBounds(layer.getBounds(), { padding: [200, 200] });
|
|
|
+ },
|
|
|
+ //获取地块信息
|
|
|
+ async getActiveItemGeometry(item) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let query =
|
|
|
+ window.ApplicationConfig.geoserverUrl +
|
|
|
+ "?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
|
|
|
+ window.ApplicationConfig.gdLayerName +
|
|
|
+ "&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=dkmc='" +
|
|
|
+ item.dkmc +
|
|
|
+ "'";
|
|
|
+ axios.get(query).then((data) => {
|
|
|
+ if (data.data.features.length < 1) {
|
|
|
+ this.$Message.info("未查询到数据");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.detailData = data.data.features[0].properties;
|
|
|
+ var geojson = data.data.features[0].geometry;
|
|
|
+ var geos = L.geoJSON(geojson, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "#3BA5FF" };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.dkGeo = geos;
|
|
|
+ this.dkGeoJson = geojson;
|
|
|
+
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //地图绘制清空
|
|
|
+ clearMark() {
|
|
|
+ if (this.markerLayer) {
|
|
|
+ this.map.removeLayer(this.markerLayer);
|
|
|
+ this.markerLayer = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.polyline) {
|
|
|
+ this.map.removeLayer(this.polyline);
|
|
|
+ this.polylines = null;
|
|
|
+ }
|
|
|
+ if (this.wktToGeojsonLayer) {
|
|
|
+ this.wktToGeojsonLayer.forEach((item) => {
|
|
|
+ this.map.removeLayer(item);
|
|
|
+ });
|
|
|
+ this.wktToGeojsonLayer = null;
|
|
|
+ }
|
|
|
+ this.dkIndex = -1;
|
|
|
+ this.hoverDkIndex = -1;
|
|
|
+ this.hightMarker(-1);
|
|
|
+ this.zoom = 0;
|
|
|
+ this.activeItem = null;
|
|
|
+ },
|
|
|
+ //地类分析-图斑定位-叠加出相交地块
|
|
|
+ goWkt(wkts) {
|
|
|
+ if (this.wktToGeojsonLayer) {
|
|
|
+ this.wktToGeojsonLayer.forEach((item) => {
|
|
|
+ this.map.removeLayer(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.wktToGeojsonLayer = [];
|
|
|
+ var originGeom = this.dkGeoJson;
|
|
|
+ //当前地块ID
|
|
|
+ if (this.geojsonLayer == null) {
|
|
|
+ this.goLocation(this.activeItem, this.dkIndex);
|
|
|
+ }
|
|
|
+ const bounds = L.latLngBounds();
|
|
|
+ wkts.forEach((t) => {
|
|
|
+ var geojson = wkt.parse(t);
|
|
|
+ //定位
|
|
|
+ var geos = L.geoJSON(geojson, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "#ffff00" };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ var layer = geos.addTo(this.map);
|
|
|
+ this.wktToGeojsonLayer.push(layer);
|
|
|
+ //相交
|
|
|
+ let intersectGeo = turf.intersect(originGeom, geojson);
|
|
|
+ if (intersectGeo) {
|
|
|
+ var inner = L.geoJSON(intersectGeo, {
|
|
|
+ style: function (feature) {
|
|
|
+ return { color: "#ff0000" };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ var innnerlayer = inner.addTo(this.map);
|
|
|
+ this.wktToGeojsonLayer.push(innnerlayer);
|
|
|
+ }
|
|
|
+
|
|
|
+ bounds.extend(geos.getBounds());
|
|
|
+ });
|
|
|
+ try {
|
|
|
+ this.map.fitBounds(bounds);
|
|
|
+ } catch (e) {
|
|
|
+ console.log("fitBounds error: ", e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //详情页tab切换地图绘制相关清空
|
|
|
+ toggleInfoTab(type,index) {
|
|
|
+ console.log(type, index);
|
|
|
+ if (this.markerLayer) {
|
|
|
+ this.map.removeLayer(this.markerLayer);
|
|
|
+ this.markerLayer = null;
|
|
|
+ }
|
|
|
+ if (this.polyline) {
|
|
|
+ this.map.removeLayer(this.polyline);
|
|
|
+ this.polylines = null;
|
|
|
+ }
|
|
|
+ if (this.wktToGeojsonLayer) {
|
|
|
+ this.wktToGeojsonLayer.forEach((item) => {
|
|
|
+ this.map.removeLayer(item);
|
|
|
+ });
|
|
|
+ this.wktToGeojsonLayer = null;
|
|
|
+ }
|
|
|
+ if (this.nearMarkerList && this.nearMarkerList.length > 0) {
|
|
|
+ this.nearMarkerList.forEach((ele) => {
|
|
|
+ this.map.removeLayer(ele);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (this.cyyqLayer) {
|
|
|
+ this.map.removeLayer(this.cyyqLayer);
|
|
|
+ this.cyyqLayer = null;
|
|
|
+ }
|
|
|
+ if (type == "jbxx") {
|
|
|
+ //现状分析
|
|
|
+ if(index==1) {
|
|
|
+ this.checkedJbxxLayers(3,4,5)
|
|
|
+ } else if(index==2) {
|
|
|
+ this.checkedJbxxLayers(4,3,5)
|
|
|
+ }else if(index==3) {
|
|
|
+ this.checkedJbxxLayers(5,3,4)
|
|
|
+ }
|
|
|
+ } else if(type=='qyts'){
|
|
|
+ this.checkedQysLayers(index);
|
|
|
+ } else if(type == 'zhjt'){
|
|
|
+ this.checkedOtherLayers();
|
|
|
+ } else if(type == 'ggss'){
|
|
|
+ this.checkedOtherLayers();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkedOtherLayers(){
|
|
|
+ this.layers[2].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[3].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[4].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[5].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkedQysLayers(selectIndex) {
|
|
|
+ this.layers[2].layers.forEach((item,index) => {
|
|
|
+ if(index==selectIndex && !item.checked) {
|
|
|
+ item.checked = true;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ } else {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[3].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[4].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[5].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkedJbxxLayers(index1,index2,index3) {
|
|
|
+ this.layers[index1].layers.forEach((item) => {
|
|
|
+ if (!item.checked) {
|
|
|
+ item.checked = true;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[index2].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[index3].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.layers[2].layers.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ this.switchMapLayer(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ addClusterLayer(points) {
|
|
|
+ this.nearMarkerList.forEach((ele) => {
|
|
|
+ this.map.removeLayer(ele);
|
|
|
+ });
|
|
|
+ this.nearMarkerList = [];
|
|
|
+ points.forEach((ele) => {
|
|
|
+ var className = "point-yellow-icon";
|
|
|
+ let ll = String.fromCharCode(65 + ele.letter);
|
|
|
+ var myIcon = L.divIcon({
|
|
|
+ html: "<div>" + ll + "<div>",
|
|
|
+ className: className,
|
|
|
+ //图标大小
|
|
|
+ iconSize: [28, 28],
|
|
|
+ properties: ll,
|
|
|
+ });
|
|
|
+ var marker = L.marker([ele.latitude, ele.longitude], {
|
|
|
+ icon: myIcon,
|
|
|
+ }).addTo(this.map);
|
|
|
+ // marker.bindPopup(ele.letter, {
|
|
|
+ // closeButton: false,
|
|
|
+ // });
|
|
|
+ this.nearMarkerList.push(marker);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //路线绘制
|
|
|
+ goPointMark(item) {
|
|
|
+ var center = item.center;
|
|
|
+ var cp = item.cp;
|
|
|
+ if (this.markerLayer) {
|
|
|
+ this.map.removeLayer(this.markerLayer);
|
|
|
+ this.markerLayer = null;
|
|
|
+ }
|
|
|
+ if (center != "") {
|
|
|
+ var centerList = cp.split(",");
|
|
|
+ var className = "point-end-icon";
|
|
|
+ var myIcon = L.divIcon({
|
|
|
+ className: className,
|
|
|
+ //图标大小
|
|
|
+ iconSize: [32, 32],
|
|
|
+ });
|
|
|
+ this.map.flyTo([centerList[1], centerList[0]], 17);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //所有地块仿百度地图绘制
|
|
|
+ showXgdkCenterPoint() {
|
|
|
+ if (this.dkMarkerLayer) {
|
|
|
+ this.dkMarkerLayer.forEach((item) => {
|
|
|
+ this.map.removeLayer(item);
|
|
|
+ });
|
|
|
+ this.dkMarkerLayer = [];
|
|
|
+ }
|
|
|
+ const bounds = L.latLngBounds();
|
|
|
+ this.xgdk.forEach((item, i) => {
|
|
|
+ if (item.center_wkt) {
|
|
|
+ var center = item.center_wkt
|
|
|
+ .substring(6, item.center_wkt.length - 1)
|
|
|
+ .replace(" ", ",");
|
|
|
+ var centerList = center.split(",");
|
|
|
+ var className = "point-div-icon";
|
|
|
+ var myIcon = L.divIcon({
|
|
|
+ html: i > -1 ? "<div>" + (i + 1) + "<div>" : "<div><div>",
|
|
|
+ className: className,
|
|
|
+ //图标大小
|
|
|
+ iconSize: [32, 32],
|
|
|
+ });
|
|
|
+ var marker = L.marker([centerList[1], centerList[0]], {
|
|
|
+ icon: myIcon,
|
|
|
+ properties: { p: i },
|
|
|
+ }).addTo(this.map);
|
|
|
+ let that = this;
|
|
|
+ marker.on("mouseover", function (e) {
|
|
|
+ that.hoverDkIndex = i;
|
|
|
+ });
|
|
|
+ marker.on("mouseout", function (e) {
|
|
|
+ that.hoverDkIndex = -1;
|
|
|
+ });
|
|
|
+ marker.on("click", function (e) {
|
|
|
+ that.showDetailModal(that.xgdk[i], i);
|
|
|
+ });
|
|
|
+ this.dkMarkerLayer.push(marker);
|
|
|
+ var pointLng = L.latLngBounds([[centerList[1], centerList[0]]]);
|
|
|
+ bounds.extend(pointLng);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.map.fitBounds(bounds);
|
|
|
+ },
|
|
|
+ //埋点
|
|
|
+ async burialPoint() {
|
|
|
+ let p = {
|
|
|
+ question: this.querQuestion,
|
|
|
+ answer: this.answer,
|
|
|
+ };
|
|
|
+ landMethods.burialPoint(p).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log("问答--burialPoint");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //ai大模型请求
|
|
|
+ send: _.debounce(async function () {
|
|
|
+ let that = this;
|
|
|
+ this.showResult = false;
|
|
|
+ //不显示查询时地图上的雷达扫描效果
|
|
|
+ this.radarShow = false;
|
|
|
+ this.zhuiwen = false;
|
|
|
+ if (this.eventSource) {
|
|
|
+ this.eventSource.close();
|
|
|
+ this.loading = false;
|
|
|
+ this.eventSource = null;
|
|
|
+ }
|
|
|
+ if (this.ctrlAbout) {
|
|
|
+ this.ctrlAbout.abort();
|
|
|
+ }
|
|
|
+ if (this.dkMarkerLayer) {
|
|
|
+ this.dkMarkerLayer.forEach((item) => {
|
|
|
+ this.map.removeLayer(item);
|
|
|
+ });
|
|
|
+ this.dkMarkerLayer = [];
|
|
|
+ }
|
|
|
+ if (this.interval) {
|
|
|
+ clearInterval(this.interval);
|
|
|
+ }
|
|
|
+ this.activeIndex = 0;
|
|
|
+ var question = this.wt.trim();
|
|
|
+ if (this.zwinputText != "") {
|
|
|
+ //追问的时候，暂时不用历史数据
|
|
|
+ // question = question + ",其中" + this.zwinputText.trim();
|
|
|
+ question = this.zwinputText.trim();
|
|
|
+ }
|
|
|
+ let mock = false;
|
|
|
+ if (question === "帮我在萧山区推荐三宗31亩左右的工业用地") {
|
|
|
+ mock = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.interval = setInterval(
|
|
|
+ () => {
|
|
|
+ if (this.activeIndex < this.steps.length - 1) {
|
|
|
+ this.activeIndex = this.activeIndex + 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mock ? 1000 : 5000
|
|
|
+ );
|
|
|
+
|
|
|
+ this.querQuestion = question;
|
|
|
+ this.summary = "";
|
|
|
+ this.xgdk = [];
|
|
|
+ this.activeIndex = 0;
|
|
|
+ this.hintText = "思考中...";
|
|
|
+ this.messages.push({
|
|
|
+ id: uuid(),
|
|
|
+ content: question,
|
|
|
+ source: "user",
|
|
|
+ timestamp: new Date().getTime(),
|
|
|
+ });
|
|
|
+
|
|
|
+ //清空输入框文字
|
|
|
+ // this.inputText = "";
|
|
|
+
|
|
|
+ //发送请求
|
|
|
+ //建立SSE连接
|
|
|
+ this.loading = true;
|
|
|
+ this.startTime = new Date().getTime();
|
|
|
+ this.checkInterval = setInterval(() => {
|
|
|
+ this.checkTimeOut();
|
|
|
+ }, this.gInterval);
|
|
|
+ // 建立连接
|
|
|
+ // let eventSource = new EventSource(
|
|
|
+ // `${window.ApplicationConfig.subscribeUrl}${this.inputText.trim()}`
|
|
|
+ // );
|
|
|
+ if (!this.ctrlAbout) {
|
|
|
+ this.ctrlAbout = new AbortController();
|
|
|
+ }
|
|
|
+ this.btnSendDisabled = true;
|
|
|
+ //todo
|
|
|
+ const signal = this.ctrlAbout.signal;
|
|
|
+ await fetchEventSource(window.ApplicationConfig.subscribeUrl, {
|
|
|
+ method: "POST",
|
|
|
+ openWhenHidden: true,
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ body: JSON.stringify({
|
|
|
+ data: question,
|
|
|
+ history: this.histories.toArray().flat() || [],
|
|
|
+ }),
|
|
|
+ signal: signal,
|
|
|
+ async onmessage(msg) {
|
|
|
+ const { data } = msg;
|
|
|
+ if (data) {
|
|
|
+ that.handleData({ data: data }, question);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onerror(err) {
|
|
|
+ console.log("请求报错--");
|
|
|
+ that.checkTimeOut();
|
|
|
+ },
|
|
|
+ }).catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ console.log("请求报错:" + err);
|
|
|
+ that.checkTimeOut();
|
|
|
+ });
|
|
|
+ }, 500),
|
|
|
+ handleData(e, question) {
|
|
|
+ let T = this;
|
|
|
+ if (e.data != "[FINISH]" && e.data != "[DONE]") {
|
|
|
+ const responseData = JSON.parse(e.data);
|
|
|
+ const responses = responseData["agent_responses"];
|
|
|
+ // console.log("responses: ", responses);
|
|
|
+ const lastRes = responses[responses.length - 1];
|
|
|
+ var lastUpRes = null;
|
|
|
+ responses.forEach((item, index) => {
|
|
|
+ if (
|
|
|
+ item.exec_res &&
|
|
|
+ typeof item.exec_res === "string" &&
|
|
|
+ item.exec_res.indexOf("\n```json\n") > -1
|
|
|
+ ) {
|
|
|
+ lastUpRes = responses[index];
|
|
|
+ // console.log("lastUpRes: ", lastUpRes);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const user_request = responseData.user_request;
|
|
|
+ const conversationId = lastRes["agent_id"];
|
|
|
+ let message = T.messages.find(({ id }) => id === conversationId);
|
|
|
+ const executed = lastRes["executed"];
|
|
|
+ const agentName = lastRes["agent_name"];
|
|
|
+ const agentNameCn = lastRes["agent_name_cn"];
|
|
|
+ const execRes = lastRes["exec_res"];
|
|
|
+
|
|
|
+ const lastChoice = lastRes.choices[lastRes.choices.length - 1];
|
|
|
+ const choiceId = lastChoice["choice_id"];
|
|
|
+ let choiceMessage = T.messages.find(({ id }) => id === choiceId);
|
|
|
+ if (window.ApplicationConfig.aiAgent.indexOf(agentName) >= 0) {
|
|
|
+ if (message) {
|
|
|
+ if (lastChoice.role === "assistant" && !lastChoice.history) {
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ agentName != "summary" &&
|
|
|
+ lastChoice.role === "assistant" &&
|
|
|
+ !executed
|
|
|
+ ) {
|
|
|
+ T.loading = false;
|
|
|
+ T.hzData.forEach((item, index) => {
|
|
|
+ if (index == T.hzData.length - 1) {
|
|
|
+ T.hzData[index].summary = lastChoice.content
|
|
|
+ .replaceAll("\n```json\n", "")
|
|
|
+ .replaceAll("```json\n", "")
|
|
|
+ .replaceAll("\n```\n", "");
|
|
|
+ T.$forceUpdate();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (agentName === "summary") {
|
|
|
+ if (!executed) {
|
|
|
+ T.loading = false;
|
|
|
+ this.hintText = "结果整理中...";
|
|
|
+ } else if (execRes) {
|
|
|
+ // T.summary = execRes;
|
|
|
+ T.showResult = true;
|
|
|
+ T.radarShow = false;
|
|
|
+ T.loading = false;
|
|
|
+ if (lastUpRes) {
|
|
|
+ var exec_res = lastUpRes.exec_res
|
|
|
+ .replaceAll("\n```json\n", "")
|
|
|
+ .replaceAll("```json\n", "")
|
|
|
+ .replaceAll("\n```\n", "");
|
|
|
+ exec_res = JSON.parse(exec_res);
|
|
|
+ var dk = exec_res;
|
|
|
+ console.log("dk: ", dk);
|
|
|
+ T.xgdk = dk;
|
|
|
+ T.clearMark();
|
|
|
+ T.showXgdkCenterPoint();
|
|
|
+ T.addGdLayer(T.xgdk);
|
|
|
+ T.answer = e.data;
|
|
|
+ // T.burialPoint();
|
|
|
+ } else {
|
|
|
+ T.xgdk = [];
|
|
|
+ T.clearMark();
|
|
|
+ }
|
|
|
+ T.activeIndex = T.steps.length - 1;
|
|
|
+ // T.hintText = "检索完成";
|
|
|
+ T.hzData.forEach((item, index) => {
|
|
|
+ if (index == T.hzData.length - 1) {
|
|
|
+ T.hzData[index].summary = execRes;
|
|
|
+ T.hzData[index].loading = false;
|
|
|
+ T.zwinputText = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ clearInterval(T.checkInterval);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ T.messages.push({
|
|
|
+ id: conversationId,
|
|
|
+ content: "",
|
|
|
+ source: "ai",
|
|
|
+ loading: true,
|
|
|
+ timestamp: new Date().getTime(),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (e.data == "[FINISH]") {
|
|
|
+ console.log("SSE连接关闭");
|
|
|
+ T.btnSendDisabled = false;
|
|
|
+ T.loading = false;
|
|
|
+ T.count = 0;
|
|
|
+ if (T.eventSource) {
|
|
|
+ T.eventSource.close();
|
|
|
+ }
|
|
|
+ if (T.interval) {
|
|
|
+ clearInterval(T.interval);
|
|
|
+ }
|
|
|
+ T.messages.forEach((item, index) => {
|
|
|
+ if (item.loading) {
|
|
|
+ T.messages.splice(index, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ T.loading = false;
|
|
|
+
|
|
|
+ T.addHistory(question, T.messages[T.messages.length - 1].content);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 添加多轮对话效果
|
|
|
+ * @param question
|
|
|
+ * @param ans
|
|
|
+ */
|
|
|
+ addHistory(question, ans) {
|
|
|
+ this.histories.enqueue([
|
|
|
+ {
|
|
|
+ type: 1,
|
|
|
+ data: question,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 2,
|
|
|
+ data: ans,
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ivu-spin-fix {
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ height: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.industria-land-detail {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .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: 320px;
|
|
|
+
|
|
|
+ border-radius: 5px;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: #333;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox {
|
|
|
+ // color:#6dcff6;
|
|
|
+ color: #333;
|
|
|
+ margin-left: 35px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-checkbox-inner {
|
|
|
+ margin-right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid #2879e7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .legend-panel {
|
|
|
+ position: absolute;
|
|
|
+ right: 17px;
|
|
|
+ width: 168px;
|
|
|
+ // height: 360px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0px 12px 14px 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ bottom: 21px;
|
|
|
+ z-index: 19;
|
|
|
+
|
|
|
+ .name-panel {
|
|
|
+ padding: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ //border-bottom: 1px solid #eceef1;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer-legend {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 62px);
|
|
|
+
|
|
|
+ .item {
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ width: 20px;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .c {
|
|
|
+ font-weight: bold;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zl {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item:last-child {
|
|
|
+ margin-bottom: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topdiv {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ z-index: 100;
|
|
|
+ left: 13px;
|
|
|
+ width: 35%;
|
|
|
+
|
|
|
+ .m-textarea-panel {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ background: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ padding: 17px 0px 0px 19px;
|
|
|
+ box-shadow: 0px 8px 16px 1px rgba(0, 57, 124, 0.2);
|
|
|
+ border-radius: 16px 16px 16px 16px;
|
|
|
+ border: 1px solid #4e69ff;
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ border: none;
|
|
|
+ resize: none;
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 18px;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &:focus-visible {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #6a7177;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-panel {
|
|
|
+ width: 486px;
|
|
|
+ padding: 26px 29px 32px 31px;
|
|
|
+ z-index: 11;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ // background: linear-gradient(-30deg, #d6e8fb, #ffffff);
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .left-panel-content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ font-family: REEJI-FlashSansN95;
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 36px;
|
|
|
+ margin-bottom: 31px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #2879e7;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot-question-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ >span {
|
|
|
+ &:first-child {
|
|
|
+ color: #212121;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .icon {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #777C88;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ background: rgba(224, 234, 250, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.dkitem {
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #E4E8ED;
|
|
|
+ cursor: pointer;
|
|
|
+ >.dk_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ >div {
|
|
|
+ &:first-child {
|
|
|
+ color: #2553D5;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ color: #777C88;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ >.content {
|
|
|
+ flex: 1;
|
|
|
+ p {
|
|
|
+ color: #212121;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ >p {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ >div {
|
|
|
+ >p {
|
|
|
+ font-size: 15px;
|
|
|
+ >span:first-child {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.point-end-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-end.png");
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.point-yellow-icon {
|
|
|
+ /*width: 36px !important;
|
|
|
+ height: 52px !important; */
|
|
|
+ width: 38px !important;
|
|
|
+ height: 38px !important;
|
|
|
+ text-align: center !important;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-top: 8px;
|
|
|
+ color: white;
|
|
|
+ font-weight: 400;
|
|
|
+ cursor: pointer;
|
|
|
+ background: url("~@/assets/image/staticImage/icon-yellow.png");
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.point-yellow-icon:hover {
|
|
|
+ width: 38px !important;
|
|
|
+ height: 38px !important;
|
|
|
+ background: url("~@/assets/image/staticImage/icon-green.png");
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
liutao