Jelajahi Sumber

找图找数,前端图层操作提示修改

liutao 2 bulan lalu
induk
melakukan
f2ce28332a
1 mengubah file dengan 269 tambahan dan 225 penghapusan
  1. 269 225
      web_ui/src/views/znzt-land/AiZtzsDetail.vue

+ 269 - 225
web_ui/src/views/znzt-land/AiZtzsDetail.vue

@@ -138,7 +138,7 @@
                 <div class="name">回答</div>
               </div>
               <p class="xg-des">
-                已成功打开永久基本农田图层
+                {{gisOperationTip}}
               </p>
             </template>
             <template v-if="showResult && listType === '3'">
@@ -296,9 +296,10 @@ import VueMarkdownIt from "vue-markdown-it";
 import landMethods from "@/api/land";
 import AIBtn from "@/components/AIBtn.vue";
 import LC from "@/assets/layerConfig.js";
-import xsq from '@/assets/xsq.json'
+import xsq from "@/assets/xsq.json";
 
-const _timers1 = [], _timers2 = []
+const _timers1 = [],
+  _timers2 = [];
 export default {
   components: {
     industrialTop,
@@ -309,109 +310,109 @@ export default {
     return {
       kws: [
         {
-          title: '图层控制',
-          kw: '请帮我打开永久基本农田图层',
-          desc: '例:请帮我打开永久基本农田图层'
+          title: "图层控制",
+          kw: "请帮我打开永久基本农田图层",
+          desc: "例:请帮我打开永久基本农田图层",
         },
         {
-          title: '智能找地',
-          kw: '帮我在萧山区找出面积大于100亩的永久基本农田图斑',
-          desc: '例:帮我在萧山区找出面积大于100亩的永久基本农田图斑'
+          title: "智能找地",
+          kw: "帮我在萧山区找出面积大于100亩的永久基本农田图斑",
+          desc: "例:帮我在萧山区找出面积大于100亩的永久基本农田图斑",
         },
         {
-          title: '统计分析',
-          kw: '请帮统计萧山区永久基本农田规模',
-          desc: '例:请帮统计萧山区永久基本农田规模'
-        }
+          title: "统计分析",
+          kw: "请帮统计萧山区永久基本农田规模",
+          desc: "例:请帮统计萧山区永久基本农田规模",
+        },
       ],
       mockData3: [
-  {
-    "name": "瓜沥镇",
-    "area": 37604.67
-  },
-  {
-    "name": "益农镇",
-    "area": 29442.14
-  },
-  {
-    "name": "党湾镇",
-    "area": 19893.58
-  },
-  {
-    "name": "新街街道",
-    "area": 16692.27
-  },
-  {
-    "name": "进化镇",
-    "area": 10265.46
-  },
-  {
-    "name": "临浦镇",
-    "area": 9727.09
-  },
-  {
-    "name": "浦阳镇",
-    "area": 9549.16
-  },
-  {
-    "name": "南阳街道",
-    "area": 8149.73
-  },
-  {
-    "name": "靖江街道",
-    "area": 7704.54
-  },
-  {
-    "name": "河上镇",
-    "area": 7533.9
-  },
-  {
-    "name": "戴村镇",
-    "area": 6789.32
-  },
-  {
-    "name": "楼塔镇",
-    "area": 6772.57
-  },
-  {
-    "name": "义桥镇",
-    "area": 6639.47
-  },
-  {
-    "name": "所前镇",
-    "area": 5509.48
-  },
-  {
-    "name": "蜀山街道",
-    "area": 4394.41
-  },
-  {
-    "name": "衙前镇",
-    "area": 3778.95
-  },
-  {
-    "name": "新塘街道",
-    "area": 2918.65
-  },
-  {
-    "name": "宁围街道",
-    "area": 2873.62
-  },
-  {
-    "name": "盈丰街道",
-    "area": 2786.85
-  },
-  {
-    "name": "顺坝垦区",
-    "area": 724.88
-  },
-  {
-    "name": "闻堰街道",
-    "area": 0.93
-  }
-],
+        {
+          name: "瓜沥镇",
+          area: 37604.67,
+        },
+        {
+          name: "益农镇",
+          area: 29442.14,
+        },
+        {
+          name: "党湾镇",
+          area: 19893.58,
+        },
+        {
+          name: "新街街道",
+          area: 16692.27,
+        },
+        {
+          name: "进化镇",
+          area: 10265.46,
+        },
+        {
+          name: "临浦镇",
+          area: 9727.09,
+        },
+        {
+          name: "浦阳镇",
+          area: 9549.16,
+        },
+        {
+          name: "南阳街道",
+          area: 8149.73,
+        },
+        {
+          name: "靖江街道",
+          area: 7704.54,
+        },
+        {
+          name: "河上镇",
+          area: 7533.9,
+        },
+        {
+          name: "戴村镇",
+          area: 6789.32,
+        },
+        {
+          name: "楼塔镇",
+          area: 6772.57,
+        },
+        {
+          name: "义桥镇",
+          area: 6639.47,
+        },
+        {
+          name: "所前镇",
+          area: 5509.48,
+        },
+        {
+          name: "蜀山街道",
+          area: 4394.41,
+        },
+        {
+          name: "衙前镇",
+          area: 3778.95,
+        },
+        {
+          name: "新塘街道",
+          area: 2918.65,
+        },
+        {
+          name: "宁围街道",
+          area: 2873.62,
+        },
+        {
+          name: "盈丰街道",
+          area: 2786.85,
+        },
+        {
+          name: "顺坝垦区",
+          area: 724.88,
+        },
+        {
+          name: "闻堰街道",
+          area: 0.93,
+        },
+      ],
       geoLayer: null,
-      listType: '',
+      listType: "",
       nearMarkerList: [],
       radarScanStyle: {
         width: "100%",
@@ -494,7 +495,7 @@ export default {
       showIndentify: false,
       detailData: null,
       cyyqLayer: null,
-      xzqLayer:null,
+      xzqLayer: null,
       legend: [
         {
           name: "可利用资源",
@@ -512,7 +513,7 @@ export default {
           ],
         },
       ],
-
+      gisOperationTip: null,
       mockInterval: null,
     };
   },
@@ -708,9 +709,9 @@ export default {
       this.inputText = this.input;
       this.hotQuestionReset(this.inputText);
     },
-    hotQuestionReset (text = "", type) {
+    hotQuestionReset(text = "", type) {
       if (type) {
-        this.listType = type
+        this.listType = type;
       }
       this.inputText = text;
       if (this.inputText == "" || this.inputText == null) {
@@ -970,7 +971,7 @@ export default {
       }
       this.closeXzqLayer();
       this.tabIndex = index;
-      this.hintText = '思考中...'
+      this.hintText = "思考中...";
       if (this.inputText) {
         this.wt = this.inputText;
         this.hzData = [];
@@ -981,41 +982,47 @@ export default {
         this.zhuiwen = false;
         this.showQuery = true;
         //模拟数据
-        if (this.listType === '3') {
-          const str1 = 'Question: 请帮统计萧山区永久基本农田规模,Thought: 用户的需求是统计萧山区永久基本农田总面积。首先我要先打开永久基本农田图层';
-          const str2 = '图层打开操作已执行完毕。\n\n\n其次,我要定位到萧山区';
-          const str3 = '已定位到萧山区\n\n\n然后我要进行规模统计,因此选择LandSiteSelectionPlan执行用户需求最为合适。根据用户的需求,需要生成一个SQL查询语句来从永久基本农田表中统计出总面积: Action: LandFindSqlAgent Action Input: {“sql_code”: “SELECT Sum(yjjbnttbmj) FROM dlgis.gcs330000g2001_yjjbnt_gx_xsb WHERE xzqmc = ‘萧山区‘”;} \n\n\n以上是我思考的所有内容。';
-          this.hzData = [{
-            name: '请帮统计萧山区永久基本农田规模',
-            summary: '',
-            loading: true
-          }]
+        if (this.listType === "3") {
+          const str1 =
+            "Question: 请帮统计萧山区永久基本农田规模,Thought: 用户的需求是统计萧山区永久基本农田总面积。首先我要先打开永久基本农田图层";
+          const str2 = "图层打开操作已执行完毕。\n\n\n其次,我要定位到萧山区";
+          const str3 =
+            "已定位到萧山区\n\n\n然后我要进行规模统计,因此选择LandSiteSelectionPlan执行用户需求最为合适。根据用户的需求,需要生成一个SQL查询语句来从永久基本农田表中统计出总面积: Action: LandFindSqlAgent Action Input: {“sql_code”: “SELECT Sum(yjjbnttbmj) FROM dlgis.gcs330000g2001_yjjbnt_gx_xsb WHERE xzqmc = ‘萧山区‘”;} \n\n\n以上是我思考的所有内容。";
+          this.hzData = [
+            {
+              name: "请帮统计萧山区永久基本农田规模",
+              summary: "",
+              loading: true,
+            },
+          ];
           this.mockFunction(str1, 0, () => {
             this.openYjjbnt();
             this.hzData.push({
-              name: '',
-              summary: '',
-              loading: false
-            })
+              name: "",
+              summary: "",
+              loading: false,
+            });
             this.mockFunction(str2, 1, () => {
               this.addXzqLayer();
               this.hzData.push({
-                name: '',
-                summary: '',
-                loading: false
-              })
+                name: "",
+                summary: "",
+                loading: false,
+              });
               this.mockFunction(str3, 2, () => {
                 this.bindPopup();
-                this.hintText = '思考完成'
-                this.hzData = [{
-                  name: '请帮统计萧山区永久基本农田规模',
-                  summary: ``,
-                  loading: false
-                }]
-                this.showResult = true
-              })
-            })
-          })
+                this.hintText = "思考完成";
+                this.hzData = [
+                  {
+                    name: "请帮统计萧山区永久基本农田规模",
+                    summary: ``,
+                    loading: false,
+                  },
+                ];
+                this.showResult = true;
+              });
+            });
+          });
           return;
         }
         this.send();
@@ -1023,39 +1030,39 @@ export default {
         this.$Message.info("请输入!");
       }
     },
-    mockFunction (str, i,  func) {
+    mockFunction(str, i, func) {
       let index = 1;
       const timer1 = setInterval(() => {
-        this.hzData[i]['summary'] += str.substring(index - 1, index)
+        this.hzData[i]["summary"] += str.substring(index - 1, index);
         index++;
         if (index === str.length + 1) {
           const timer2 = setTimeout(() => {
             if (func) {
-              func()
+              func();
             }
-            clearTimeout(timer2)
-          }, 5000)
-          _timers2.push(timer2)
+            clearTimeout(timer2);
+          }, 5000);
+          _timers2.push(timer2);
           clearInterval(timer1);
         }
       }, 50 * index);
-      _timers1.push(timer1)
+      _timers1.push(timer1);
     },
-    onBackHandle () {
+    onBackHandle() {
       this.showResult = this.showQuery = this.loading = false;
-      this.hzData = []
-      this.listType = ''
-      this.inputText = ''
-      this.hintText = '思考中...'
+      this.hzData = [];
+      this.listType = "";
+      this.inputText = "";
+      this.hintText = "思考中...";
       this.closeXzqLayer();
-      _timers1.forEach((timer1,index) => {
-        clearInterval(timer1)
-        _timers1.splice(index, 1)
-      })
+      _timers1.forEach((timer1, index) => {
+        clearInterval(timer1);
+        _timers1.splice(index, 1);
+      });
       _timers2.forEach((timer2, index) => {
-        clearTimeout(timer2)
-        _timers2.splice(index, 1)
-      })
+        clearTimeout(timer2);
+        _timers2.splice(index, 1);
+      });
     },
     toggleZw() {
       this.zhuiwen = !this.zhuiwen;
@@ -1088,31 +1095,34 @@ export default {
         that.map.fitBounds(geos.getBounds(), { padding: [200, 200] });
       });
     },
-    addXzqLayer () {
-       if (this.xzqLayer) {
+    addXzqLayer() {
+      if (this.xzqLayer) {
         this.map.removeLayer(this.xzqLayer);
         this.xzqLayer = null;
       }
-      let layer= L.geoJSON(xsq, {
-          style: function (feature) {
-            return { color: "blue", fillOpacity: 0 };
-          },
-        });
-      layer.bindPopup('19.99万亩',{
-        offset:[-100, 30]
-      })
-      this.xzqLayer= layer.addTo(this.map);
-      
-      this.map.flyToBounds(layer.getBounds(),{paddingTopLeft:[400,0],duration:2});
+      let layer = L.geoJSON(xsq, {
+        style: function (feature) {
+          return { color: "blue", fillOpacity: 0 };
+        },
+      });
+      layer.bindPopup("19.99万亩", {
+        offset: [-100, 30],
+      });
+      this.xzqLayer = layer.addTo(this.map);
+
+      this.map.flyToBounds(layer.getBounds(), {
+        paddingTopLeft: [400, 0],
+        duration: 2,
+      });
     },
     bindPopup() {
-      if (!this.xzqLayer){
+      if (!this.xzqLayer) {
         return;
       }
       this.xzqLayer.openPopup();
     },
     closeXzqLayer() {
-       if (this.xzqLayer) {
+      if (this.xzqLayer) {
         this.xzqLayer.closePopup();
         this.map.removeLayer(this.xzqLayer);
         this.xzqLayer = null;
@@ -1397,58 +1407,77 @@ export default {
         this.map.flyTo([centerList[1], centerList[0]], 17);
       }
     },
-    openYjjbnt () {
-      let yjjbntLayer =  this.layers[5].layers[0];
-      if(!yjjbntLayer.checked) {
+    openYjjbnt() {
+      let yjjbntLayer = this.layers[5].layers[0];
+      if (!yjjbntLayer.checked) {
         yjjbntLayer.checked = true;
         this.switchMapLayer(yjjbntLayer);
       }
     },
-    handleGisOperation(comand){
-      let operationGroup= comand["operations"];
-      operationGroup.forEach(ele=>{
-        let action= ele["action"]
-        let layer= ele["layer"]
-        if(action=="open"){
-            this.openaLayerByName(layer);
+    handleGisOperation(comand) {
+      this.listType = "1";
+      let operationGroup = comand["operations"];
+      operationGroup.forEach((ele) => {
+        let action = ele["action"];
+        let layer = ele["layer"];
+        if (action == "open") {
+          this.gisOperationTip = `成功打开${layer}图层`;
+          this.openLayerByName(layer);
+        } else if (action == "close") {
+          this.gisOperationTip = `成功关闭${layer}图层`;
+          this.closeLayerByName(layer);
         }
-      })
+      });
     },
-    openaLayerByName (layerName) {
-      if(!layerName){
+    closeLayerByName(layerName) {
+      if (!layerName) {
         return;
       }
-      let layer= this.findLayer(layerName);
-      if(!layer){
-        console.log('未找到相关图层:'+layerName)
+      let layer = this.findLayer(layerName);
+      if (!layer) {
+        console.log("未找到相关图层:" + layerName);
         return;
       }
-      if(!layer.checked) {
+      if (layer.checked) {
+        layer.checked = false;
+        this.switchMapLayer(layer);
+      }
+    },
+    openLayerByName(layerName) {
+      if (!layerName) {
+        return;
+      }
+      let layer = this.findLayer(layerName);
+      if (!layer) {
+        console.log("未找到相关图层:" + layerName);
+        return;
+      }
+      if (!layer.checked) {
         layer.checked = true;
         this.switchMapLayer(layer);
       }
     },
-    findLayer(layerName){
-      let len= this.layers.length;
-      for(let i =0;i<len;i++){
+    findLayer(layerName) {
+      let len = this.layers.length;
+      for (let i = 0; i < len; i++) {
         let layerGroup = this.layers[i].layers;
-        let findItem= layerGroup.find(item=>item.name == layerName);
-        if(findItem){
+        let findItem = layerGroup.find((item) => item.name == layerName);
+        if (findItem) {
           return findItem;
         }
       }
     },
     //除底图和行政区外,其他的图层都关闭
     closeLayers() {
-      let len= this.layers.length;
-      for(let i =2;i<len;i++){
+      let len = this.layers.length;
+      for (let i = 2; i < len; i++) {
         let layerGroup = this.layers[i].layers;
-        layerGroup.forEach(item=>{
-          if(item.checked){
-            item.checked=false;
+        layerGroup.forEach((item) => {
+          if (item.checked) {
+            item.checked = false;
             this.switchMapLayer(item);
           }
-        })
+        });
       }
     },
     //所有地块仿百度地图绘制
@@ -1676,23 +1705,20 @@ export default {
                     .replaceAll("```json\n", "")
                     .replaceAll("\n```\n", "");
                   let json_exec = JSON.parse(exec_res);
-                  
-                  if(exec_res.indexOf('operations')>-1){
-                    T.handleGisOperation(json_exec)
+
+                  if (exec_res.indexOf("operations") > -1) {
+                    T.handleGisOperation(json_exec);
                   } else {
-                     var dk = json_exec;
+                    var dk = json_exec;
                     T.getDetailByIdList(dk, (data) => {
-                    T.clearMark();
-                    // T.addGdLayer(data);
-                    T.xgdk = data;
-                    T.showXgdkCenterPoint();
-                    T.addGdLayer(T.xgdk);
-                  });
-                  T.answer = e.data;
+                      T.clearMark();
+                      // T.addGdLayer(data);
+                      T.xgdk = data;
+                      T.showXgdkCenterPoint();
+                      T.addGdLayer(T.xgdk);
+                    });
+                    T.answer = e.data;
                   }
-                 
-
-                  
                 } else {
                   T.xgdk = [];
                   T.clearMark();
@@ -1769,7 +1795,8 @@ export default {
   border: 1px solid #dededf;
   border-collapse: collapse; /* 确保边框不会重叠 */
   margin-top: 10px;
-  th,td {
+  th,
+  td {
     padding: 5px;
     font-size: 15px;
     border: 1px solid #dededf;
@@ -1790,11 +1817,11 @@ export default {
   background: #ffffff;
   position: relative;
   padding: 17px 0px 0px 19px;
-  box-shadow: 0px 6px 12px 1px rgba(11,53,103,0.08);
+  box-shadow: 0px 6px 12px 1px rgba(11, 53, 103, 0.08);
   border-radius: 16px 16px 16px 16px;
   position: relative;
   padding-bottom: 50px;
-  border: 1px solid #E5E6EA;
+  border: 1px solid #e5e6ea;
   textarea {
     border: none;
     resize: none;
@@ -2037,7 +2064,7 @@ export default {
         background-color: #ffffff;
         display: flex;
         flex-direction: column;
-        box-shadow: 0px 4px 15px 1px rgba(0,54,116,0.15);
+        box-shadow: 0px 4px 15px 1px rgba(0, 54, 116, 0.15);
         background-image: url(~@/assets/image/box_bg.png);
         background-repeat: no-repeat;
         background-size: 100% 100%;
@@ -2065,16 +2092,27 @@ export default {
             &.content_box {
               border-radius: 16px;
               border-top-left-radius: 50px;
-              background: linear-gradient( 228deg, rgba(77,151,252,0.3) 0%, rgba(102,160,255,0.3) 37%, rgba(225,134,252,0.57) 69%, #B072F9 100%);
+              background: linear-gradient(
+                228deg,
+                rgba(77, 151, 252, 0.3) 0%,
+                rgba(102, 160, 255, 0.3) 37%,
+                rgba(225, 134, 252, 0.57) 69%,
+                #b072f9 100%
+              );
               > div {
                 &.one_box {
                   padding: 10px 20px;
                   padding-left: 90px;
-                  >.title {
+                  > .title {
                     font-size: 18px;
                     font-weight: bold;
                     color: transparent;
-                    background: linear-gradient( 270deg, #2534F4 0%, #1160F5 47%, #0075E8 100%);
+                    background: linear-gradient(
+                      270deg,
+                      #2534f4 0%,
+                      #1160f5 47%,
+                      #0075e8 100%
+                    );
                     -webkit-background-clip: text;
                   }
                   > div {
@@ -2082,11 +2120,16 @@ export default {
                       font-size: 18px;
                       font-weight: bold;
                       color: transparent;
-                      background: linear-gradient( 270deg, #2534F4 0%, #1160F5 47%, #0075E8 100%);
+                      background: linear-gradient(
+                        270deg,
+                        #2534f4 0%,
+                        #1160f5 47%,
+                        #0075e8 100%
+                      );
                       -webkit-background-clip: text;
                     }
                     &.desc {
-                      color: #0C254A;
+                      color: #0c254a;
                       font-size: 15px;
                       line-height: 19px;
                     }
@@ -2094,22 +2137,23 @@ export default {
                 }
                 &.two_box {
                   background: #f1f9fe;
-                  box-shadow: 0px -1px 6px 1px rgba(24,83,178,0.15);
+                  box-shadow: 0px -1px 6px 1px rgba(24, 83, 178, 0.15);
                   border-radius: 16px;
                   padding: 20px;
                   > .title {
                     display: flex;
                     align-items: center;
                     padding-bottom: 10px;
-                    >.logo {
+                    > .logo {
                       width: 24px;
                       height: 24px;
-                      background: url("../../assets/image/title_wh.png") no-repeat;
+                      background: url("../../assets/image/title_wh.png")
+                        no-repeat;
                       background-size: 100% 100%;
                       margin-right: 5px;
                     }
-                    >.txt {
-                      color: #326EF4;
+                    > .txt {
+                      color: #326ef4;
                       font-weight: bold;
                       font-size: 17px;
                     }
@@ -2126,7 +2170,7 @@ export default {
                       justify-content: space-between;
                       margin-bottom: 15px;
                       cursor: pointer;
-                      >.left_box {
+                      > .left_box {
                         display: flex;
                         flex: 1;
                         > span {
@@ -2180,7 +2224,7 @@ export default {
                           height: 28px;
                           border-radius: 50%;
                           background: #e0eeff;
-                          color: #507FFF;
+                          color: #507fff;
                           font-size: 18px;
                           font-weight: bold;
                           text-align: center;
@@ -2223,7 +2267,7 @@ export default {
           overflow-x: hidden;
           overflow-y: auto;
           position: relative;
-          >.back_icon {
+          > .back_icon {
             position: absolute;
             top: 6px;
             right: 0px;
@@ -2705,7 +2749,7 @@ export default {
   padding: 10px;
   background-color: #f8f9fd;
   border-radius: 8px;
-  cursor:pointer;
+  cursor: pointer;
   .number {
     width: 30px;
     height: 30px;