Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/farmlandProtection/components/jbxx.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="ServiceCon">
+      <div class="detailList">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item
+            label="图斑编号"
+            label-class-name="my-label"
+            content-class-name="my-content"
+            >{{ detailObj.tbbh }}</el-descriptions-item
+          >
+          <el-descriptions-item
+            label="行政名称"
+            content-class-name="my-content"
+            :span="3"
+            >{{ detailObj.xzmc }}</el-descriptions-item
+          >
+          <el-descriptions-item label="前时相">{{
+            detailObj.qsx
+          }}</el-descriptions-item>
+          <el-descriptions-item label="后时项">{{
+            detailObj.hsx
+          }}</el-descriptions-item>
+          <el-descriptions-item label="前类型">{{
+            detailObj.qxl
+          }}</el-descriptions-item>
+          <el-descriptions-item label="后类型">{{
+            detailObj.hlx
+          }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+    detailObj: {
+      type: Object,
+    },
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+  },
+  watch: {},
+  watch: {},
+  beforeDestroy() {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-descriptions-item__label.is-bordered-label {
+  color: #fff;
+  background-color: transparent;
+}
+/deep/ .el-descriptions__body {
+  color: #fff;
+  background-color: transparent;
+}
+
+</style>

src/views/farmlandProtection/components/jclxqk.vue

@@ -1,5 +1,33 @@
 <template>
   <div>
+    <div class="headerSelect">
+      <el-select v-model="yearsVal" placeholder="请选择">
+        <el-option
+          v-for="item in yearsOpt"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-cascader
+        :show-all-levels="false"
+        :options="xzqTreeData"
+        placeholder="行政区"
+        :props="{ checkStrictly: true, expandTrigger: 'hover' }"
+        clearable
+        v-model="xzqTreeValue"
+      ></el-cascader>
+      <el-select v-model="monitorVal" placeholder="请选择">
+        <el-option
+          v-for="item in monitorOpt"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
     <div class="divrow">
       <div class="divCol">
         <div class="divImg">
@@ -63,19 +91,21 @@
     <Statistics
       title="图斑分布情况"
       :cityList="cityList"
-      height="270"
+      height="236"
     ></Statistics>
   </div>
 </template>
 
 <script>
 import Statistics from "./statistics";
+import { GetXzqhTree } from "@/api/map";
 export default {
   components: {
     Statistics,
   },
   data() {
     return {
+      xzqTreeData: [], //申请范围
       tab: 1,
       options: [
         { name: "图斑数", value: 1 },
@@ -107,14 +137,87 @@ export default {
           area: 48.73,
           unit: "km²",
         },
+        {
+          name: "吉阳区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+        {
+          name: "吉阳区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
       ],
+      yearsOpt: [
+        {
+          value: "2024年",
+          label: "2024年",
+        },
+        {
+          value: "2024年第一季度",
+          label: "2024年第一季度",
+        },
+        {
+          value: "2024年第二季度",
+          label: "2024年第二季度",
+        },
+        {
+          value: "2024年第三季度",
+          label: "2024年第三季度",
+        },
+        {
+          value: "2024年第四季度",
+          label: "2024年第四季度",
+        },
+        {
+          value: "2023年",
+          label: "2023年",
+        },
+        {
+          value: "2023年第一季度",
+          label: "2023年第一季度",
+        },
+      ],
+      monitorOpt: [
+        {
+          value: "全部监测类型",
+          label: "全部监测类型",
+        },
+        {
+          value: "新增建筑物",
+          label: "新增建筑物",
+        },
+        {
+          value: "新增耕地",
+          label: "新增耕地",
+        },
+      ],
+      monitorVal: "",
+      yearsVal: "",
     };
   },
   computed: {},
   mounted() {
     this.initEcharts();
+    this.getXzqTreeData();
   },
   methods: {
+    getXzqTreeData() {
+      GetXzqhTree().then((res) => {
+        if (res.data.length > 0) {
+          const list = res.data[0].children.filter((item) => {
+            return item.label == "三亚市";
+          });
+          if (list.length > 0) {
+            list[0].value = "4602";
+            this.xzqTreeData = list[0];
+          } else this.xzqTreeData = res.data;
+          //   store.setRegionTree(this.xzqTreeData);
+        }
+      });
+    },
     initEcharts(payload) {
       console.log(payload);
       this.myChart = echarts.init(this.$refs.echars_pie);
@@ -314,4 +417,29 @@ img {
   height: 260px;
   width: 402px;
 }
+.headerSelect {
+  width: 100%;
+  height: 26px;
+  //   background: #00ffff;
+  margin: 5px 0px;
+  display: flex;
+  justify-content: space-between;
+  /deep/ .el-input--suffix .el-input__inner {
+    padding-right: 15px;
+    height: 26px;
+    background-color: transparent;
+    border: none;
+    color: #fff;
+  }
+  /deep/ .el-cascader {
+    line-height: 26px;
+  }
+  /deep/.el-input__icon {
+    line-height: 1;
+    color: #fff;
+  }
+  /deep/ .el-input__inner::placeholder {
+    color: #fff;
+  }
+}
 </style>

src/views/farmlandProtection/components/tbDetails.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="ghzc">
+    <div class="sm-panel sm-function-module-query" v-drag>
+      <div class="sm-panel-header">
+        <span>服务详情</span>
+        <i class="el-icon-close" @click="closeBox"></i>
+      </div>
+      <div class="ServiceCon">
+        <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
+          <el-tab-pane label="基本信息" name="jbxx">
+            <Jbxx :detailObj="detailObj"  @updateParent="changeData"></Jbxx>
+          </el-tab-pane>
+          <el-tab-pane label="核查信息" name="hcxx"> 核查信息 </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Jbxx from "./jbxx.vue";
+export default {
+  props: {
+    detailObj: {
+      type: Object,
+    },
+  },
+  components: {
+    Jbxx,
+  },
+  data() {
+    return {
+      activeTabs: "jbxx",
+      templateList: [
+        {
+          图斑编号: 6401812024070108270002,
+          行政名称: "海棠区",
+          前时相: "20230925",
+          后时相: "20240701",
+          前类型: "XX",
+          后类型: "XXX",
+        },
+      ],
+    };
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    closeBox() {
+      this.$emit("updateParent", "isShowTb", false);
+    },
+  },
+  watch: {},
+  watch: {},
+  beforeDestroy() {},
+};
+</script>
+
+<style lang="less" scoped>
+.ServiceCon {
+  height: 760px;
+  //   background-color: aliceblue;
+  cursor: auto;
+}
+/deep/ .el-icon-close:before {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: larger;
+  font-weight: bold;
+
+  &:hover {
+    color: aqua;
+  }
+}
+
+.sm-function-module-query {
+  max-height: 800px !important;
+}
+
+.sm-panel {
+  top: 38px;
+}
+</style>

src/views/farmlandProtection/components/tbqd.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="tbqd">
+    <div>
+      <div class="headerInput">
+        <el-input v-model="input" placeholder="请输入内容"></el-input>
+        <span>共5条</span>
+      </div>
+      <div class="pagination">
+        <el-table :data="tableData" style="width: 100%" height="560">
+          <el-table-column
+            prop="index"
+            label="序号"
+            width="60"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="smID"
+            label="图斑编号"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="area"
+            label="监测面积"
+            width="80"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="90" align="center">
+            <template slot-scope="scope">
+              <el-button
+                @click="handleClick(scope.row)"
+                type="text"
+                size="small"
+                >定位</el-button
+              >
+              <el-button
+                type="text"
+                size="small"
+                @click="handleDetails(scope.row)"
+                >详情</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+
+  },
+  data() {
+    return {
+      pageSize: 10,
+      pageNum: 1,
+      total: 10,
+      input: "",
+      tableData: [
+        {
+          index: 1,
+          smID: "6401812024070108270002",
+          area: 14.86,
+        },
+        {
+          index: 1,
+          smID: "6401812024070108270002",
+          area: 14.86,
+        },
+        {
+          index: 1,
+          smID: "6401812024070108270002",
+          area: 14.86,
+        },
+        {
+          index: 1,
+          smID: "6401812024070108270002",
+          area: 14.86,
+        },
+      ],
+      isShowTb: false,
+      detailObj: null,
+    };
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    handleClick(row) {
+      console.log(row, "---");
+    },
+    handleDetails(row) {
+        this.$emit("updateParent", "isShowTb", true);
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      //   this.getList();
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val;
+      //   this.getList();
+    },
+  },
+  watch: {},
+  watch: {},
+  beforeDestroy() {},
+};
+</script>
+
+<style lang="less" scoped>
+.tbqd {
+    position: relative;
+  .headerInput {
+    display: flex;
+    justify-content: space-between;
+    margin: 5px 0px;
+    /deep/.el-input {
+      height: 30px;
+      width: 60%;
+    }
+    /deep/.el-input__inner {
+      height: 30px;
+      background-color: rgba(45, 140, 240, 0.2);
+      border: 1px solid #409eff;
+      color: #fff;
+    }
+    /deep/ .el-input__inner::placeholder {
+      color: #fff;
+    }
+    span {
+      width: 30%;
+      text-align: right;
+      line-height: 3;
+      //   line-height: 30px;
+    }
+  }
+  /deep/.el-table__fixed-right::before {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table__fixed-right {
+    background: transparent !important;
+    border-bottom: transparent !important;
+  }
+  //   /deep/.el-table td.el-table__cell {
+  //     border-bottom: none !important;
+  //     border-bottom: transparent !important;
+  //   }
+}
+
+</style>

src/views/farmlandProtection/jctb/index.vue

@@ -16,25 +16,45 @@
           <el-tab-pane label="图斑总览" name="tbzl">
             <Jclxqk></Jclxqk>
           </el-tab-pane>
-          <el-tab-pane label="图斑清单" name="tbqd"> </el-tab-pane>
+          <el-tab-pane label="图斑清单" name="tbqd">
+            <Tbqd @updateParent="changeData"></Tbqd>
+          </el-tab-pane>
         </el-tabs>
       </div>
     </div>
+    <tbDetails @updateParent="changeData" :detailObj="detailObj" v-show="isShowTb"></tbDetails>
   </div>
 </template>
 
 <script>
 import Jclxqk from "../components/jclxqk.vue";
+import Tbqd from "../components/tbqd.vue";
+import tbDetails from "../components/tbDetails.vue";
 export default {
   components: {
     Jclxqk,
+    Tbqd,
+    tbDetails,
   },
   data() {
     return {
       activeTabs: "tbzl",
+      isShowTb: false,
+      // detailObj: null,
+      detailObj: {
+        tbbh: "6401812024070108270002",
+        xzmc: "海棠区",
+        qsx: "20230925",
+        hsx: "20240701",
+        qxl: "前类型",
+        hlx: "后类型",
+      },
     };
   },
   methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
     tabClick(evt) {
       this.activeTabs = evt.name;
     },