智能选址前端适配

web_ui/config/index.js

@@ -9,7 +9,7 @@ module.exports = {
 
     // Paths
     assetsSubDirectory: 'static',
-    assetsPublicPath: './',
+    assetsPublicPath: '/',
     proxyTable: {
       '/lianqiai': {
         // target: 'http://lq.lianqiai.cn:23001',

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

@@ -2,9 +2,12 @@
   <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
+            class="radar-scan-an"
+            v-show="radarShow"
+            :style="`width: ${radarScanStyle.width}; heigth: ${radarScanStyle.height}; top: ${radarScanStyle.top};left: ${radarScanStyle.left};`"
+          >
             <radar-scan-animation />
           </div>
         </div>
@@ -101,106 +104,83 @@
               </div>
             </div>
           </div>
-        </div> 
-        <vue-perfect-scrollbar :settings="settings" class="left-panel">
-          <template v-if="!showQuery">
-            <div class="logo">智选未来，慧定乾坤</div>
-            <div class="desc">
-              你好，我是你的AI智能选址助手，我可以根据你的指令帮你推荐想要的
-              地块，快来开启你的AI智能选址之路吧！ 
-            </div>
-            <div class="hint">你可以试着这样问我:</div>
-            <div
-              class="hot-question-item"
-              v-for="(item, index) in hotQestionList"
-              :key="'hq-' + index"
-              @click="fullInput(item)"
+        </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="您可以试着这样问我，如“请帮我在杭州市西湖区找几块面积35亩左右，人口相对密集的工业用地”"
+              autofocus=""
             >
-              <img src="~@/assets/image/staticImage/iocn-r.png" />
-              <div class="right-nr">
-                {{ item.name }}
-              </div>
+            </textarea>
+            <div class="btn" @click="hotQuestionReset()">
+              <img src="~@/assets/image/cyyd/send.png" />
             </div>
-            <div class="diver44"></div>
-            <div class="m-textarea-panel">
-              <textarea
-                v-model="inputText"
-                type="text"
-                autocapitalize="off"
-                autocomplete="off"
-                spellcheck="false"
-                autocorrect="off"
-                placeholder="请输入"
-                autofocus=""
-              >
-              </textarea>
-              <div class="btn" @click="hotQuestionReset()">
-                <img src="~@/assets/image/cyyd/send.png" />
-              </div>
+          </div>
+        </div>
+        <vue-perfect-scrollbar
+          :settings="settings"
+          class="left-panel"
+          v-if="showQuery"
+        >
+          <div class="back-icon" @click="back"></div>
+          <div v-for="(item, index) in hzData" :key="index">
+            <div class="title" @click="resetAnswer(index)">
+              {{ item.name }}
             </div>
-          </template>
-          <template v-else>
-            <div class="back-icon" @click="back"></div>
-            <div v-for="(item, index) in hzData" :key="index">
-              <div class="title" @click="resetAnswer(index)">
-                {{ item.name }}
-              </div>
-              <div class="jsz" v-if="item.loading">
+            <!-- <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="steps">
+              <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
-                    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>
+                  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 class="tab-content">
-                <!-- <div class="text" v-html="item.summary"></div> -->
-                <vue-markdown-it
-                  :source="item.summary"
-                  :options="{
-                    html: true,
-                    linkify: true
-                }"
-                />
+            </div>
+            <!-- <div class="tab-content">
                 <template
                   v-if="index == hzData.length - 1 && item.loading == false"
                 >
@@ -213,54 +193,52 @@
                       <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> -->
+          </div>
+          <template v-if="showResult">
+            <div class="xg-title">
+              <img src="~@/assets/image/cyyd/fk.png" />
+              <div class="name">回答</div>
+              <!-- <img src="~@/assets/image/cyyd/xs.png" @click="showTableInfo" /> -->
             </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">
+            <p>为您找到以下{{ xgdk ? xgdk.length : 0 }}个地块</p>
+            <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="dkitem"
+                  @mouseover="mouseover(i)"
+                  @mouseout="mouseout(i)"
+                  @click="showDetailModal(citem, i)"
+                  v-for="(citem, i) in xgdk"
+                  :key="i"
+                >
+                  <div class="number">{{ i + 1 }}</div>
+                  <div class="content">
+                    <h3>{{ citem.name }}</h3>
+                    <p>
+                      面积：{{
+                        citem.area ? (citem.area * 0.0015).toFixed(2) : "-"
+                      }}亩 单价：{{
+                        citem.unit_price ? citem.unit_price : "-"
+                      }}万元/m² 得分：{{
+                        citem.comprehensive_score
+                          ? citem.comprehensive_score
+                          : "-"
+                      }}
+                    </p>
+                  </div>
                 </div>
-                <template v-if="xgdk && xgdk.length > 0">
-                  <div
+                <!-- <div
                     class="tr"
                     @mouseover="mouseover(i)"
                     @mouseout="mouseout(i)"
@@ -292,34 +270,50 @@
                         src="~@/assets/image/icon-loc-blue.png"
                       />
                     </div>
-                  </div>
-                </template>
-                <div v-else class="hintText">未查询到相关地块数据！</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 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 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 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>
-            </template>
-            <Spin size="large" class="span" fix v-if="loading"></Spin>
+            </div>
           </template>
+          <div class="textarea-panel">
+            <textarea
+              v-model="zwinputText"
+              type="text"
+              autocapitalize="off"
+              autocomplete="off"
+              spellcheck="false"
+              autocorrect="off"
+              maxlength="1000"
+              placeholder="请提问"
+              autofocus=""
+            >
+            </textarea>
+            <div class="btn" @click="zwsend">
+              <img src="~@/assets/image/cyyd/send.png" />
+            </div>
+          </div>
+          <Spin size="large" class="span" fix v-if="loading"></Spin>
         </vue-perfect-scrollbar>
         <znxz-detail
           @close="hideDetail"
@@ -403,15 +397,15 @@ export default {
     FlowChart,
     LandTable,
     FeekBack,
-    VueMarkdownIt
+    VueMarkdownIt,
   },
   data() {
     return {
       radarScanStyle: {
-        width: '100%',
-        height: '100%',
+        width: "100%",
+        height: "100%",
         left: 0,
-        top: 0
+        top: 0,
       },
       hzData: [],
       showQuery: false,
@@ -569,28 +563,32 @@ export default {
 - **用地总价**: 2955.0 万元
 - **综合得分**: 88.0
 - **土地坐落**: 西湖区（双桥单元XH020203-15地块，东至规划支路，南至规划云梦路，西至智强路，北至肖圣街）`,
-        dks: [{
-          "id": 7286,
-          "name": "双桥单元XH020203-16地块",
-          "county": "西湖区",
-          "location": "西湖区（双桥单元XH020203 -16地块，东至数治路，南至规划云梦路，西至规划支路，北至肖圣街）",
-          "total_price": 3266.0,
-          "unit_price": 0.14,
-          "area": 24027.0,
-          "comprehensive_score": 90.0,
-          "center_wkt": "POINT(120.036582554545 30.3277712108271)"
-        }, {
-          "id": 7285,
-          "name": "双桥单元XH020203-15地块",
-          "county": "西湖区",
-          "location": "西湖区（双桥单元XH020203-15地块，东至规划支路，南至规划云梦路，西至智强路，北至肖圣街）",
-          "total_price": 2955.0,
-          "unit_price": 0.14,
-          "area": 21756.0,
-          "comprehensive_score": 88.0,
-          "center_wkt": "POINT(120.03392658277 30.3271936782775)"
-        }]
-        ,
+        dks: [
+          {
+            id: 7286,
+            name: "双桥单元XH020203-16地块",
+            county: "西湖区",
+            location:
+              "西湖区（双桥单元XH020203 -16地块，东至数治路，南至规划云梦路，西至规划支路，北至肖圣街）",
+            total_price: 3266.0,
+            unit_price: 0.14,
+            area: 24027.0,
+            comprehensive_score: 90.0,
+            center_wkt: "POINT(120.036582554545 30.3277712108271)",
+          },
+          {
+            id: 7285,
+            name: "双桥单元XH020203-15地块",
+            county: "西湖区",
+            location:
+              "西湖区（双桥单元XH020203-15地块，东至规划支路，南至规划云梦路，西至智强路，北至肖圣街）",
+            total_price: 2955.0,
+            unit_price: 0.14,
+            area: 21756.0,
+            comprehensive_score: 88.0,
+            center_wkt: "POINT(120.03392658277 30.3271936782775)",
+          },
+        ],
       },
       mockInterval: null,
     };
@@ -653,7 +651,7 @@ export default {
       if (this.mockInterval) {
         clearInterval(this.mockInterval);
       }
-      this.inputText = '';
+      this.inputText = "";
     },
     checkPermision() {
       let that = this;
@@ -929,6 +927,7 @@ export default {
       this.map = L.map(this.id, {
         center: myCenter,
         zoom: this.zoomLevel,
+        zoomControl:false
       });
       // var tk = window.ApplicationConfig.tk;
       var tk = "6dfd31e3b55a8466f34997aee5551a9c";
@@ -1476,8 +1475,6 @@ export default {
     },
     //ai大模型请求
     send: _.debounce(async function () {
-
-
       let that = this;
       this.showResult = false;
       this.radarShow = true;
@@ -1505,18 +1502,21 @@ export default {
         question = question + ",其中" + this.zwinputText.trim();
       }
       let mock = false;
-      if(question === '帮我在杭州市西湖区找几块面积35亩左右，人口相对密集的工业用地' ) {
+      if (
+        question ===
+        "帮我在杭州市西湖区找几块面积35亩左右，人口相对密集的工业用地"
+      ) {
         mock = true;
       }
 
-      this.interval = setInterval(() => {
-        if (this.activeIndex < this.steps.length - 2) {
-          this.activeIndex = this.activeIndex + 1;
-        }
-      }, mock ? 1000 : 5000);
-
-
-
+      this.interval = setInterval(
+        () => {
+          if (this.activeIndex < this.steps.length - 2) {
+            this.activeIndex = this.activeIndex + 1;
+          }
+        },
+        mock ? 1000 : 5000
+      );
 
       this.querQuestion = question;
       this.summary = "";
@@ -1537,10 +1537,10 @@ export default {
       //建立SSE连接
       this.loading = true;
       this.startTime = new Date().getTime();
-      if(mock) {
+      if (mock) {
         setTimeout(() => {
           this.mockSend();
-        }, 3000)
+        }, 3000);
 
         return;
       }
@@ -1590,17 +1590,17 @@ export default {
 
       this.radarShow = false;
       this.loading = false;
-     // 模拟流氏输出
+      // 模拟流氏输出
       let ch = 0;
       this.mockInterval = setInterval(() => {
-        if(ch <= length) {
-          ch = ch + Math.ceil(Math.random() * 10) + 2
-          if(ch > length) {
+        if (ch <= length) {
+          ch = ch + Math.ceil(Math.random() * 10) + 2;
+          if (ch > length) {
             ch = length;
           }
           lastRes.summary = this.mockData.summary.substring(0, ch);
           this.$forceUpdate();
-          if(ch === length) {
+          if (ch === length) {
             this.showResult = true;
             clearInterval(this.mockInterval);
             this.mockInterval = null;
@@ -1612,8 +1612,7 @@ export default {
             this.burialPoint();
           }
         }
-      }, 100)
-
+      }, 100);
     },
     handleData(e, question) {
       let T = this;
@@ -1750,25 +1749,23 @@ export default {
       const { offsetHeight, offsetWidth } = document.body;
       let width = offsetWidth - 488;
 
-      if(width > offsetHeight) {
+      if (width > offsetHeight) {
         width = offsetHeight;
 
         this.radarScanStyle = {
-          width: offsetHeight + 'px',
-          height: offsetHeight + 'px',
+          width: offsetHeight + "px",
+          height: offsetHeight + "px",
           top: 0,
-          left:((offsetWidth - 488 - width) / 2 + 488)  + 'px'
-        }
-
+          left: (offsetWidth - 488 - width) / 2 + 488 + "px",
+        };
       } else {
         this.radarScanStyle = {
-          width: width + 'px',
-          height: width + 'px',
-          left: '488px',
-          top:((offsetHeight - width) / 2)  + 'px'
-        }
+          width: width + "px",
+          height: width + "px",
+          left: "488px",
+          top: (offsetHeight - width) / 2 + "px",
+        };
       }
-
     },
   },
 };
@@ -1972,7 +1969,55 @@ export default {
           }
         }
       }
-
+      .topdiv {
+        position: absolute;
+        top: 10px;
+        z-index: 100;
+        left: 13px;
+        width: 30%;
+        .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;
+            }
+          }
+        }
+      }
       .left-panel {
         width: 486px;
         padding: 26px 29px 32px 31px;
@@ -1981,7 +2026,8 @@ export default {
         position: absolute;
         left: 0;
         top: 0;
-        background: linear-gradient(-30deg, #d6e8fb, #ffffff);
+        // background: linear-gradient(-30deg, #d6e8fb, #ffffff);
+        background-color: #fff;
         .logo {
           font-family: REEJI-FlashSansN95;
           font-weight: 900;
@@ -2081,8 +2127,7 @@ export default {
           right: 2px;
           width: 28px;
           height: 28px;
-          background: url("~@/assets/image/back-icon.png") no-repeat
-          center;
+          background: url("~@/assets/image/back-icon.png") no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
         }
@@ -2274,46 +2319,47 @@ export default {
               }
             }
           }
-          .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;
-              }
+        }
+        .textarea-panel {
+          margin: 28px 3px 0px 3px;
+          width: 424px;
+          height: 90px;
+          background: #ffffff;
+          border-radius: 10px;
+          position: absolute;
+          bottom: 26px;
+          padding: 18px 0px 0px 19px;
+          textarea {
+            border: none;
+            resize: none;
+            width: calc(100% - 60px);
+            font-weight: normal;
+            font-size: 18px;
+            &:focus-visible {
+              outline: none;
             }
-            .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;
-              }
+            &::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;
             }
           }
         }
@@ -2526,6 +2572,40 @@ export default {
     }
   }
 }
+.dkitem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  .number {
+    width: 30px;
+    height: 30px;
+    background-color: #007bff;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  .content {
+    flex: 1;
+  }
+
+  .content h3 {
+    margin: 0;
+    font-size: 16px;
+  }
+
+  .content p {
+    margin: 5px 0 0;
+    font-size: 14px;
+    color: #666;
+  }
+}
 </style>
 
 <style >