Explorar o código

样式优化和按钮禁用功能

songxy hai 2 meses
pai
achega
ffcf70072f

+ 17 - 1
web_ui/src/components/AIBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ai-btn">
+  <div :class="{'ai-btn': true, 'disabled': disabled}" @click="clickHandle">
     <img src="~@/assets/image/cyyd/send.png" />
   </div>
 </template>
@@ -7,6 +7,18 @@
 <script>
 export default {
   name: "AIBtn",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    clickHandle () {
+      if (this.disabled) return;
+      this.$emit('send')
+    }
+  }
 };
 </script>
 
@@ -28,5 +40,9 @@ export default {
     width: 20px;
     height: 20px;
   }
+  &.disabled {
+    background: #ccc !important;
+    cursor: not-allowed;
+  }
 }
 </style>

+ 117 - 51
web_ui/src/views/industrial-land/AiIndustriaLandDetail.vue

@@ -118,7 +118,7 @@
               autofocus=""
             >
             </textarea>
-            <AIBtn @click.native="hotQuestionReset()" />
+            <AIBtn @send="hotQuestionReset()" />
           </div>
         </div>
         <vue-perfect-scrollbar
@@ -157,7 +157,17 @@
                 <div class="name">回答</div>
               </div>
               <p class="xg-des">
-                为您找到以下{{ xgdk ? xgdk.length : 0 }}个地块
+                <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">
@@ -170,19 +180,32 @@
                     v-for="(citem, i) in xgdk"
                     :key="i"
                   >
-                    <div class="number">{{ i + 1 }}</div>
-                    <div class="content">
-                      <h3>
-                        {{ citem.ydxz }}
-                      </h3>
-                      <p>
-                        <span class="content-item"
-                          >单元名称:{{ citem.dymc ? citem.dymc : "-" }}</span
-                        >
-                        <span class="content-item"
-                          >行政区:{{ citem.xzqmc ? citem.xzqmc : "-" }}</span
-                        >
-                      </p>
+                    <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>该地块为一类工业用地(M1),面积36.45亩。</span>
+                        </p>
+                        <p>
+                          <span>位置周边:</span>
+                          <span>该地块位于工业区内,距离机场(萧山国际机场) 4.4km,距高速出入口(萧山南)1.5km,距高铁站(杭州南) 2.8km。</span>
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </template>
@@ -225,7 +248,7 @@
               autofocus=""
             >
             </textarea>
-            <AIBtn @click.native="zwsend" />
+            <AIBtn @send="zwsend" :disabled="btnSendDisabled" />
           </div>
         </vue-perfect-scrollbar>
         <znxz-detail
@@ -327,6 +350,7 @@ export default {
       hzData: [],
       showQuery: false,
       radarShow: false,
+      btnSendDisabled: false,
       input: "",
       hotQestionList: [
         {
@@ -361,6 +385,7 @@ export default {
       activeItem: { id: 1 },
       id: "industriaMap" + new Date().getTime(),
       layers: [],
+      mContentVisabled: true,
       showResult: false,
       showDetail: false,
       zoomLevel: 8,
@@ -566,6 +591,16 @@ export default {
   },
 
   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({
@@ -716,7 +751,7 @@ export default {
       this.toggleInfoTab();
       this.toggleTab(0);
     },
-    zwsend() {
+    zwsend () {
       if (!this.zwinputText) {
         this.zwinputText = "帮我在萧山区推荐3宗50-80亩之间的工业用地";
       }
@@ -1170,7 +1205,6 @@ export default {
     },
     //详情页tab切换地图绘制相关清空
     toggleInfoTab(type,index) {
-      console.log(type,index)
       if (this.markerLayer) {
         this.map.removeLayer(this.markerLayer);
         this.markerLayer = null;
@@ -1471,6 +1505,7 @@ export default {
       if (!this.ctrlAbout) {
         this.ctrlAbout = new AbortController();
       }
+      this.btnSendDisabled = true;
       //todo
       const signal = this.ctrlAbout.signal;
       await fetchEventSource(window.ApplicationConfig.subscribeUrl, {
@@ -1633,6 +1668,7 @@ export default {
       } else {
         if (e.data == "[FINISH]") {
           console.log("SSE连接关闭");
+          T.btnSendDisabled = false;
           T.loading = false;
           T.count = 0;
           if (T.eventSource) {
@@ -1984,7 +2020,7 @@ export default {
           img {
             width: 32px;
             height: 32px;
-            margin-right: 11px;
+            margin-right: 8px;
           }
 
           .right-nr {
@@ -2377,6 +2413,28 @@ export default {
 
         .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 {
@@ -2594,47 +2652,55 @@ export default {
 }
 
 .dkitemchecked {
-  border: 1px solid #007bff;
+  background: rgba(224, 234, 250, 0.4);
 }
 
 .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;
+  border-bottom: 1px solid #E4E8ED;
+  cursor: pointer;
+  >.dk_title {
     display: flex;
-    justify-content: center;
     align-items: center;
-    border-radius: 50%;
-    margin-right: 10px;
+    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 {
+  >.content {
     flex: 1;
-  }
-
-  .content h3 {
-    margin: 0;
-    font-size: 16px;
-    margin-bottom: 10px;
-  }
-
-  .content p {
-    margin: 5px 0 0;
-    font-size: 14px;
-    color: #666;
-  }
-
-  .content p .content-item {
-    margin-right: 5px;
+    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>

+ 25 - 5
web_ui/yarn.lock

@@ -5121,11 +5121,6 @@ he@1.2.x, he@^1.2.0:
   resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-heatmap.js@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.npmmirror.com/heatmap.js/-/heatmap.js-2.0.5.tgz"
-  integrity sha512-CG2gYFP5Cv9IQCXEg3ZRxnJDyAilhWnQlAuHYGuWVzv6mFtQelS1bR9iN80IyDmFECbFPbg6I0LR5uAFHgCthw==
-
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
@@ -6539,6 +6534,11 @@ methods@~1.1.2:
   resolved "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
+mgrs@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/mgrs/-/mgrs-1.0.0.tgz#fb91588e78c90025672395cb40b25f7cd6ad1829"
+  integrity sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==
+
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.npmmirror.com/micromatch/-/micromatch-3.1.10.tgz"
@@ -8101,6 +8101,21 @@ process@^0.11.10:
   resolved "https://registry.npmmirror.com/process/-/process-0.11.10.tgz"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
+proj4@^2.3.14:
+  version "2.15.0"
+  resolved "https://registry.npmmirror.com/proj4/-/proj4-2.15.0.tgz#d77c9956861c8ed516071c4208d576cebe800eb5"
+  integrity sha512-LqCNEcPdI03BrCHxPLj29vsd5afsm+0sV1H/O3nTDKrv8/LA01ea1z4QADDMjUqxSXWnrmmQDjqFm1J/uZ5RLw==
+  dependencies:
+    mgrs "1.0.0"
+    wkt-parser "^1.4.0"
+
+proj4leaflet@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/proj4leaflet/-/proj4leaflet-1.0.2.tgz#dec59f1e8a77a1682e320673e1e56f4161714d2a"
+  integrity sha512-6GdDeUlhX/tHUiMEj80xQhlPjwrXcdfD0D5OBymY8WvxfbmZcdhNqQk7n7nFf53ue6QdP9ls9ZPjsAxnbZDTsw==
+  dependencies:
+    proj4 "^2.3.14"
+
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/promise-inflight/-/promise-inflight-1.0.1.tgz"
@@ -10316,6 +10331,11 @@ window-size@0.1.0:
   resolved "https://registry.npmmirror.com/window-size/-/window-size-0.1.0.tgz"
   integrity sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==
 
+wkt-parser@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/wkt-parser/-/wkt-parser-1.4.0.tgz#7cca07a6ee5b4baf059b723e62d7fe95bc923bf5"
+  integrity sha512-qpwO7Ihds/YYDTi1aADFTI1Sm9YC/tTe3SHD24EeIlZxy7Ik6a1b4HOz7jAi0xdUAw487duqpo8OGu+Tf4nwlQ==
+
 wordwrap@0.0.2:
   version "0.0.2"
   resolved "https://registry.npmmirror.com/wordwrap/-/wordwrap-0.0.2.tgz"