图斑信息详情查询

src/views/Idleland/components/details.vue

@@ -72,6 +72,7 @@ export default {
     handleView(val, type) {
       this.isShallow = true;
       this.type = type;
+      this.jbxxData = [];
       GetDetail(val.id).then((res) => {
         if (res.statuscode == 200) {
           // this.jbxxData = res.data;

src/views/Idleland/components/list.vue

@@ -118,6 +118,8 @@ export default {
         pageNum: 1,
         pageSize: 10,
         isDisposal: false,
+        startTime: "",
+        endTime: "",
       },
       datalist: [{}],
       formConfig: ysForm,
@@ -136,6 +138,8 @@ export default {
     this.cloumn = this.$props.type == 0 ? TableHeader : TableHeader2;
     this.pageObj.isConfirm = this.$props.type != 0;
     this.pageObj.isDisposal = this.$props.type == 2;
+    this.pageObj.startTime = store.state.cockpit_date[0];
+    this.pageObj.endTime = store.state.cockpit_date[1];
   },
   methods: {
     searchFun(page = {}) {
@@ -170,9 +174,14 @@ export default {
         });
       }
     },
+    tableRowClassName({ row, rowIndex }) {
+      // if (rowIndex === this.scrollTop_index) {
+      //   return "warning-row";
+      // }
+      // return "";
+    },
     active_tableData(newVal) {
       newVal.forEach((res, index) => {
-        res.type = "图斑上图";
         if (res.geom || res.st_asewkt)
           loadGeoJSON(
             res.geom || res.st_asewkt,
@@ -182,7 +191,7 @@ export default {
               geoSources[res.id] = data;
               data.name = "Idleland";
               data.entities.values.forEach((entity) => {
-                entity.properties = res;
+                entity.properties = { type: "图斑上图", id: res.id };
               });
             }
           );
@@ -199,11 +208,14 @@ export default {
         (data) => {
           data.name = "Idleland";
           geoSources[id] = data;
+          data.entities.values.forEach((entity) => {
+            entity.properties = { type: "图斑上图", id: item.id };
+          });
         }
       );
     },
     removeGeoJSON() {
-      if (!viewer) return;
+      if (!window.viewer) return;
       viewer.entities.removeAll();
       viewer.dataSources.removeAll();
       // viewer.dataSources._dataSources.forEach((das) => {
@@ -211,15 +223,17 @@ export default {
       // });
     },
 
-    reset() {
+    reset(xzqh) {
       this.pageObj = {
         key: "",
-        xzqh: "",
+        xzqh,
         idleReason: "",
         isConfirm: this.$props.type != 0,
         pageNum: 1,
         pageSize: 10,
         isDisposal: this.$props.type == 2,
+        startTime: store.state.cockpit_date[0],
+        endTime: store.state.cockpit_date[1],
       };
     },
     detail(row) {

src/views/Idleland/components/tjzl.vue

@@ -3,13 +3,13 @@
     <div class="content">
       <div class="item" v-for="(sd, index) in sdlist" :key="index">
         <div class="icon">
-          <div class="iicon" :class="sd.value"></div>
+          <div class="iicon" :class="sd.value">{{ sd.name }}</div>
         </div>
         <div class="text">
           <p>土地面积（亩）</p>
-          <span>{{ sdata[sd.prop].mj || 0 }} </span>
+          <span>{{ (sdata[sd.prop].area || 0).toFixed(2) }} </span>
           <p>宗地数（宗）</p>
-          <span>{{ sdata[sd.prop].zd || 0 }} </span>
+          <span>{{ sdata[sd.prop].count || 0 }} </span>
         </div>
       </div>
     </div>
@@ -18,13 +18,13 @@
         <ratio class="ratio_echart" ref="echartRef3"></ratio>
         <ratio class="ratio_echart" ref="echartRef4"></ratio>
       </div>
-      <div class="echars">
+      <div class="echars" v-show="region == '4602'">
         <div class="block-title">各区县闲置情况</div>
         <barAndLine class="echart" ref="echartRef1"></barAndLine>
       </div>
       <div class="echars">
         <div class="block-title">闲置原因</div>
-        <pie unit="亿元" class="pie_echart" ref="echartRef2"></pie>
+        <pie unit="亩" class="pie_echart" ref="echartRef2"></pie>
       </div>
     </div>
   </div>
@@ -34,15 +34,16 @@
 import pie from "@/components/echartsTemplate/pie.vue";
 import ratio from "@/components/echartsTemplate/ratio.vue";
 import barAndLine from "@/views/cockpit/common/ThreeStackedBarAndLine.vue";
-import { QueryOne, QueryList } from "@/api/cockpitNew";
+import { overview, district, reason } from "@/api/Idleland.js";
 export default {
+  props: {},
   data() {
     return {
-      sdata: { ys: {}, rd: {}, ycz: {} },
+      sdata: { suspected: {}, confirm: {}, disposal: {} },
       sdlist: [
-        { name: "疑似闲置", prop: "ys" },
-        { name: "认定闲置", prop: "rd" },
-        { name: "已处置闲置", prop: "ycz" },
+        { name: "疑", prop: "suspected" },
+        { name: "闲", prop: "confirm" },
+        { name: "处", prop: "disposal" },
       ],
       jdData: {
         legend_data: ["认定闲置土地", "已处置闲置土地", "闲置率", "处置率"],
@@ -54,6 +55,8 @@ export default {
           { type: "line" },
         ],
         yAxis: [{ name: "土地面积（亩）" }, { name: "比率（%）" }],
+        params: {},
+        region: "",
       },
     };
   },
@@ -64,53 +67,61 @@ export default {
   },
   mounted() {
     this.getData();
+    console.log(store.state.cockpit_date,'tt')
   },
   methods: {
     changeData(name, updata) {
       this[name] = updata;
     },
+    regionChange(region) {
+      this.region = region;
+      this.getData();
+    },
     getData() {
       this.$emit("updateParent", "loading", true);
-      //   this.GetQueryOne();
-      this.GetQueryList();
+      this.params = {
+        districtCode: this.region,
+        startTime: store.state.cockpit_date[0],
+        endTime: store.state.cockpit_date[1],
+      };
+      this.GetOverview();
+      if (this.region == "4602") this.GetDistrict();
       this.GetSumList();
-      this.setEchart({ name: "土地闲置率", ratio: 56 }, 3);
-      this.setEchart({ name: "闲置处置率", ratio: 56 }, 4);
     },
-    GetQueryOne() {
-      let params = {
-        jscType: `jsc_stxf_ztgh_ssxf`,
-        id: 4602,
-      };
-      QueryOne(params).then((res) => {
+    GetOverview() {
+      overview(this.params).then((res) => {
         this.sdata = res.data || {};
+        let xz = (res.data.idleRate * 100).toFixed(2);
+        let cz = (res.data.disposalRate * 100).toFixed(2);
+        this.setEchart({ name: "土地闲置率", ratio: xz }, 3);
+        this.setEchart({ name: "闲置处置率", ratio: cz }, 4);
+        this.$emit("updateParent", "loading", false);
       });
     },
-    GetQueryList() {
+    GetDistrict() {
       this.jdData.x_data = [];
       this.jdData.result = [[], [], [], []];
-      let params = { jscType: `jsc_stxf_ssxf_jdfq`, id: 4602 };
-      QueryList(params).then((res) => {
+      district(this.params).then((res) => {
         res.data.forEach((jdData) => {
-          let jd = `${(jdData.dj - 1) * 20}-${jdData.dj * 20}`;
-          this.jdData.x_data.push(jd);
-          this.jdData.result[0].push(jdData.dj_number);
-          this.jdData.result[1].push(jdData.tzje);
-          this.jdData.result[2].push(20);
-          this.jdData.result[3].push(30);
-          this.$emit("updateParent", "loading", false);
+          this.jdData.x_data.push(jdData.districtCode || jdData.districtName);
+          this.jdData.result[0].push(jdData.confirmAre);
+          this.jdData.result[1].push(jdData.disposalArea);
+          this.jdData.result[2].push((jdData.idleRate * 100).toFixed(2));
+          this.jdData.result[3].push((jdData.disposalRate * 100).toFixed(2));
         });
         this.setEchart(this.jdData, 1);
+        this.$emit("updateParent", "loading", false);
       });
     },
     GetSumList() {
-      let data = [
-        { name: "政府原因", value: "13.45" },
-        { name: "企业原因", value: "5" },
-        { name: "非政府原因和不可抗力", value: "18.67" },
-        { name: "其他", value: "18.67" },
-      ];
-      this.setEchart({ data, type: '"horizontal"' }, 2);
+      reason(this.params).then((res) => {
+        res.data.map((a) => {
+          a.name = a.reason;
+          a.value = a.area.toFixed(2);
+        });
+        this.setEchart({ data: res.data, type: '"horizontal"' }, 2);
+        this.$emit("updateParent", "loading", false);
+      });
     },
     setEchart(data, id) {
       this.$nextTick(() => {
@@ -118,6 +129,11 @@ export default {
       });
     },
   },
+  watch: {
+    region(newValue) {
+      console.log(newValue, "---");
+    },
+  },
 };
 </script>
 
@@ -135,26 +151,32 @@ export default {
       .icon {
         width: 100%;
         height: 50px;
-        display: flex;
-        justify-content: space-between;
+        // display: flex;
+        // justify-content: space-between;
       }
       .iicon {
         background: no-repeat 50%;
-        background-image: url("/static/images/overview/icon_yrkkg.png");
+        // background-image: url("/static/images/overview/icon_yrkkg.png");
         width: 45px;
         height: 45px;
-        flex: 1;
-      }
-      .num {
-        background-image: url("/static/images/overview/icon_yrkkg.png");
+        margin: 0px 40px;
+        // flex: 1;
+
+        text-align: center;
+        line-height: 45px;
+        font-size: 20px;
+        color: #68f4fb;
+        border: 1px solid #4682b4;
+        border-radius: 50%;
       }
-      .mj {
-        background-image: url("/static/images/overview/icon_yrkkg.png");
+      .confirm {
+        // background-image: url("/static/images/overview/icon_yrkkg.png");
+        color: #62aded;
       }
-      .ztz {
+      .disposal {
         background-image: url("/static/images/overview/icon_yrkkg.png");
+        color: #dfe15a;
       }
-
       .text {
         display: inline-block;
         // border: #00FFFF 1px solid;

src/views/Idleland/components/xzgl.vue

@@ -15,6 +15,11 @@
 </template>
 
 <script>
+let map = {
+  distrust: 0,
+  notHandle: 1,
+  handled: 2,
+};
 import List from "./list.vue";
 export default {
   components: {
@@ -34,6 +39,9 @@ export default {
   },
   methods: {
     reset() {},
+    getType() {
+      return map[this.activeTabs];
+    },
     regionChange(region) {
       this.region = region;
       this.$refs[this.activeTabs].reset(region);
@@ -46,15 +54,6 @@ export default {
       this.$refs[newValue].searchFun();
     },
   },
-  beforeDestroy() {
-    this.pageObj = {
-      kssj: "",
-      sj: [],
-      jssj: "",
-      xmmc: "",
-      page: 1,
-    };
-  },
 };
 </script>
 

src/views/Idleland/index.vue

@@ -20,10 +20,10 @@
             }"
           ></el-cascader>
         </div>
-        <!-- <span class="clearBtn" @click="cockpit">
+        <span class="clearBtn" @click="cockpit">
           <i class="el-icon-thumb"></i>
           图斑详情查询
-        </span> -->
+        </span>
       </h2>
       <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
         <el-tab-pane label="统计总览" name="tjzl">
@@ -51,6 +51,7 @@ import Tjzl from "./components/tjzl.vue";
 import Xzgl from "./components/xzgl.vue";
 import Details from "./components/details.vue";
 // import TabelView from "./components/tabelView.vue";
+import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
 export default {
   name: "Idleland",
   components: {
@@ -66,6 +67,11 @@ export default {
       xzqh: "",
     };
   },
+  computed: {
+    computed_vectorData() {
+      return store.state.vectorData;
+    },
+  },
   created() {},
   mounted() {
     this.xzqh = store.state.cockpit_region.id;
@@ -83,7 +89,11 @@ export default {
       this.$refs.tjzl.regionChange(this.xzqh);
       this.$refs.xzgl.regionChange(this.xzqh);
     },
-    cockpit() {},
+    cockpit() {
+      console.log("----");
+      //驾驶舱矢量数据点选查询
+      pick_cockpit_vector.init_handler();
+    },
   },
   watch: {
     activeTabs(newValue) {
@@ -91,6 +101,26 @@ export default {
       if (newValue == "tjzl") this.$refs.tjzl.getData();
       // if (newValue == "xzgl") this.$refs.xzgl.changeForm();
     },
+    computed_vectorData(newVal) {
+      console.log(newVal, "newVal");
+      newVal.forEach((res) => {
+        if (res.name == "id") {
+          this.handleView({ id: res.value }, this.$refs.xzgl.getType());
+          // const TableRows = this.$refs.singleTable.bodyWrapper.querySelectorAll(
+          //   ".el-table__body tbody .el-table__row"
+          // );
+          // let scrollTop = 0;
+          // for (let i = 0; i < TableRows.length; i++) {
+          //   if (i === res.value) {
+          //     break;
+          //   }
+          //   scrollTop += TableRows[i].offsetHeight;
+          // }
+          // this.$refs.singleTable.bodyWrapper.scrollTop = scrollTop;
+          // this.scrollTop_index = res.value;
+        }
+      });
+    },
   },
 };
 </script>
@@ -99,21 +129,10 @@ export default {
 .Idleland {
   .xz_box {
     padding-bottom: 0;
-    .title {
-      padding: 8px;
-      margin-bottom: 10px;
-      span {
-        color: #605e5e;
-        padding-left: 8px;
-        border-left: 3px solid #3a8ee6;
-      }
-      button {
-        padding: 0;
-        float: right;
-        margin-right: 5px;
-        min-height: unset;
-      }
-    }
+  }
+  .clearBtn {
+    cursor: pointer;
+    z-index: 200;
   }
 }
 </style>