接入分析模型接口,分析结果样式绘制

src/api/ghss/gdbh.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request.js'
+
+export function GetMxList(params) {
+    return request({
+        url: '/apply/gdbh/GetMxList',
+        method: 'get',
+        params
+    })
+}

src/views/farmlandProtection/components/fxjg.vue

@@ -1,81 +1,119 @@
 <template>
   <div class="fxjg">
-    分析结果sdskdhsjkhdsdk
-    <div>
-        dhsaudhaskdhksadhsa 
-      <span class="xmmc">
-        项目名称：
-        <span class="text">{{ rzMc }}</span>
-      </span>
-      <div
-        class="eicon"
-        :class="isshowAll ? 'eyes' : 'close_eyes'"
-        @click="allChange('all')"
-      ></div>
+    <div class="downloadDiv">
+      <div>
+        <span class="xmmc">
+          项目名称：
+          <span class="text">{{ fxjgObj.xmmc }}</span>
+        </span>
+        <span class="export" @click="download">导出报告</span>
+      </div>
+    </div>
+    <div class="divrow">
+      <div class="divCol">
+        <div class="divImg">
+          <img :src="imgs.zd1" style="height: 2.5rem; width: 2.5rem" />
+        </div>
+        <div class="divText">
+          <span style="color: #fff">国有用地(亩)</span>
+          <span color="#2d8cf0">{{ 1 }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    fxjgObj: {
+      type: Object,
+    },
+  },
   data() {
-    return {};
+    return {
+      imgs: {
+        loc: require("@/assets/images/loc.png"),
+        /**
+         * 征地版面图片
+         */
+        zd1: require("@/assets/homeimg/1.png"),
+        zd2: require("@/assets/homeimg/1.png"),
+        zd3: require("@/assets/homeimg/1.png"),
+        zd4: require("@/assets/homeimg/1.png"),
+        /**
+         * 拆迁版面图片
+         */
+        cq1: require("@/assets/homeimg/1.png"),
+        cq2: require("@/assets/homeimg/1.png"),
+        cq3: require("@/assets/homeimg/1.png"),
+        cq4: require("@/assets/homeimg/1.png"),
+        /**
+         * 青苗版面图片
+         */
+        qm1: require("@/assets/homeimg/1.png"),
+        qm2: require("@/assets/homeimg/1.png"),
+        qm3: require("@/assets/homeimg/1.png"),
+        qm4: require("@/assets/homeimg/1.png"),
+      },
+    };
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.fxjg{
-  // height: calc(100vh - 108px);
-  // height: 49vh;
+.fxjg {
   height: 100%;
-  min-width: 300px;
-  box-sizing: border-box;
-  padding: 0px 10px;
-
-  .xmmc {
-    width: calc(100% - 60px);
-    display: inline-block;
-  }
-
-  .blue {
-    color: #409eff;
-  }
-
-  .title {
-    button {
-      padding: 0;
-      float: right;
-      margin-right: 5px;
-      min-height: unset;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
+  line-height: 40px;
+  .downloadDiv {
+    position: relative;
+    .xmmc {
+      width: calc(100% - 60px);
+      display: inline-block;
     }
-
     .export {
-      display: inline-block;
-      background-color: #0f7ac8;
-      text-align: center;
       width: 95px;
       height: 28px;
-      line-height: 28px;
-      float: right;
+      background: #0f7ac8;
+      text-align: center;
+      line-height: 32px;
+      display: inline-block;
+      position: absolute;
+      right: 2px;
+      bottom: 6px;
+    }
+    .text {
+      color: #cddeeb;
     }
   }
-
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  .xz-btn {
-    width: 100%;
-    position: absolute;
-    height: 55px;
-    z-index: 2;
-    bottom: 0;
-    right: 0;
+  .divrow {
+    height: 50px;
+    background-color: #0f7bc875;
     display: flex;
-    align-items: center;
-  }
-
+    justify-content: space-between;
 
+    .divCol {
+      background-color: #cddeeb5a;
+      width: 49%;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      .divImg {
+        width: 25%;
+        height: 40px;
+        img {
+          height: 2.5rem;
+          width: 2.5rem;
+        }
+      }
+      .divText {
+        width: 75%;
+        padding-left: 0.5rem;
+      }
+    }
+  }
 }
 </style>

src/views/farmlandProtection/components/fzjcyp.vue

@@ -27,7 +27,7 @@
       <div class="treeDiv">
         <el-table :data="anaModels" style="width: 100%" :show-header="false">
           <el-table-column type="selection" width="33"> </el-table-column>
-          <el-table-column prop="name" show-overflow-tooltip> </el-table-column>
+          <el-table-column prop="bsmmc" show-overflow-tooltip> </el-table-column>
           <el-table-column width="50">
             <template slot-scope="scope">
               <!-- <span>编辑</span> -->
@@ -55,6 +55,7 @@ import range from "@/components/mapview/range.vue"; //绘制范围
 import zdyModelPop from "./zdyModelPop.vue"; //自定义模型面板
 import moment from "moment";
 import { Message } from "element-ui";
+import { GetMxList } from "../../../api/ghss/gdbh.js";
 export default {
   components: {
     range,
@@ -121,11 +122,11 @@ export default {
       console.log(item, "暂时使用");
       this.zdyModel();
     },
-    reset(){
-       this.ruleForm={
+    reset() {
+      this.ruleForm = {
         xzmj: 0,
         xmmc: "耕地保护项目_" + this.getCurrentDateTime(),
-      }
+      };
       this.$refs.ruleForm.resetFields();
       this.$refs.range.reset();
     },
@@ -150,25 +151,25 @@ export default {
             spinner: "el-icon-loading",
             background: "rgba(0, 0, 0, 0.7)",
           });
-          setTimeout(()=>{
-              loading.close();
-              this.activeTabs = "lsju";
-              this.$emit("updateParent", "activeTabs", "lsju");
-          },1000)
-        //   AddFzxz(obj)
-        //     .then((res) => {
-        //       loading.close();
-        //       this.activeTabs = "lsju";
-        //       this.$emit("updateParent", "activeTabs", "lsju");
-        //       this.$message({
-        //         message: res.message,
-        //         type: res.success ? "success" : "warning",
-        //       });
-        //       this.reset();
-        //     }).catch((error) => {
-        //       loading.close();
-        //       Message.error(error)
-        //     });
+          setTimeout(() => {
+            loading.close();
+            this.activeTabs = "lsju";
+            this.$emit("updateParent", "activeTabs", "lsju");
+          }, 1000);
+          //   AddFzxz(obj)
+          //     .then((res) => {
+          //       loading.close();
+          //       this.activeTabs = "lsju";
+          //       this.$emit("updateParent", "activeTabs", "lsju");
+          //       this.$message({
+          //         message: res.message,
+          //         type: res.success ? "success" : "warning",
+          //       });
+          //       this.reset();
+          //     }).catch((error) => {
+          //       loading.close();
+          //       Message.error(error)
+          //     });
         } else {
           loading.close();
           console.log("error submit!!");
@@ -176,7 +177,20 @@ export default {
         }
       });
     },
+    GetMxList() {
+      GetMxList()
+        .then((res) => {
+          console.log(res, ":res");
+          this.anaModels = res.data
+        })
+        .catch((erro) => {
+          console.log(erro);
+        });
+    },
   },
+  mounted(){
+    this.GetMxList()
+  }
 };
 </script>
 

src/views/farmlandProtection/index.vue

@@ -14,7 +14,7 @@
           </el-tab-pane>
           <el-tab-pane label="分析结果" :disabled="activeTabs != 'scjg'" name="fxjg">
             <div v-drag style="height: 100%;">
-              <FXJG :activeTabs="activeTabs" :loading="loading" :rwBsm="rwBsm" :rzMc="nowObj.xmmc"
+              <FXJG :activeTabs="activeTabs" :loading="loading" :fxjgObj="nowObj"
                 v-if="activeTabs == 'fxjg'"></FXJG>
             </div>
           </el-tab-pane>