|
|
@@ -0,0 +1,297 @@
|
|
|
+<template>
|
|
|
+ <div class="ghzc geologyDisaster">
|
|
|
+ <div class="innerContainer leftPane" v-drag>
|
|
|
+ <h2 class="Pangetitle darg-div">
|
|
|
+ <span class="pange_text"> 地质灾害隐患点 </span>
|
|
|
+ <div>共：{{ total }}个</div>
|
|
|
+ </h2>
|
|
|
+ <div class="xz_box">
|
|
|
+ <div class="el-col headerSelect">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="pageObj.LA"
|
|
|
+ @input="searchFun"
|
|
|
+ class="search"
|
|
|
+ placeholder="请输入查询内容"
|
|
|
+ ></el-input>
|
|
|
+ <el-cascader
|
|
|
+ v-model="pageObj.xzqh"
|
|
|
+ :show-all-levels="false"
|
|
|
+ :options="store.state.region_tree"
|
|
|
+ placeholder="行政区"
|
|
|
+ :props="{
|
|
|
+ checkStrictly: true,
|
|
|
+ expandTrigger: 'hover',
|
|
|
+ emitPath: false,
|
|
|
+ }"
|
|
|
+ @change="searchFun"
|
|
|
+ ></el-cascader>
|
|
|
+ </div>
|
|
|
+ <tablePage
|
|
|
+ class="tablePage"
|
|
|
+ :cloumn="cloumn"
|
|
|
+ :table="table"
|
|
|
+ :indexed="false"
|
|
|
+ layout="total, sizes, prev, next, jumper"
|
|
|
+ ref="tableDialogRef"
|
|
|
+ @currentChange="searchFun"
|
|
|
+ >
|
|
|
+ <template #mj="{ row }">
|
|
|
+ {{ Number(row.gm).toFixed(2) }}
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <span class="usable" @click="detail(row)">详情</span>
|
|
|
+ <span class="usable" @click="handle(row)"> 对比 </span>
|
|
|
+ </template>
|
|
|
+ </tablePage>
|
|
|
+ <!-- <el-table
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ ref="singleTable"
|
|
|
+ :data="active_dableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="670"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgba(10, 25, 38, 0.6)',
|
|
|
+ color: '#66b1ff',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontFamily: 'Microsoft YaHei',
|
|
|
+ fontWeight: '400',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ v-for="(item, index) in store.state.cockpit_vector.columns"
|
|
|
+ :key="index"
|
|
|
+ :width="index ? 100 : cockpit_vector.columns.length > 2 ? 150 : 230"
|
|
|
+ :prop="item"
|
|
|
+ :label="item"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ :width="cockpit_vector.action ? 100 : 50"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+
|
|
|
+ <el-button @click="go(scope.row)" type="text" size="small"
|
|
|
+ >定位</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="cockpit_vector.action"
|
|
|
+ @click="start(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >开工</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <slot name="all"></slot> -->
|
|
|
+ </div>
|
|
|
+ <div class="sm-panel sm-function-module-query" v-if="isShallow" v-drag>
|
|
|
+ <div class="sm-panel-header">
|
|
|
+ <span>详情</span>
|
|
|
+ <i class="el-icon-close" @click="closeIsShallow"></i>
|
|
|
+ </div>
|
|
|
+ <el-tabs
|
|
|
+ type="border-card"
|
|
|
+ class="xz_box info"
|
|
|
+ v-model="activeTabs"
|
|
|
+ stretch
|
|
|
+ >
|
|
|
+ <el-tab-pane label="基本信息" name="base">
|
|
|
+ <!-- <CockpitVector :baseData="details"></CockpitVector> -->
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane
|
|
|
+ label="全过程管理信息"
|
|
|
+ name="qgc"
|
|
|
+ v-if="title.includes('山水工程')"
|
|
|
+ >
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tablePage from "@/components/mapView/tablePage.vue";
|
|
|
+import customForm from "@/components/mapView/custom-form.vue";
|
|
|
+import { QueryList } from "@/api/cockpitNew";
|
|
|
+import { getXmList } from "@/api/stxf/tdzz.js";
|
|
|
+import { zzForm, TableHeader, reasonList } from "./config";
|
|
|
+import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
|
|
|
+let geoSources = {};
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ tablePage,
|
|
|
+ customForm,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ recordBsm: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageObj: {
|
|
|
+ xzqdm: "",
|
|
|
+ xmmc: "",
|
|
|
+ lxfl: "",
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ region: "",
|
|
|
+ formConfig: zzForm,
|
|
|
+ cloumn: TableHeader,
|
|
|
+ reasonList: reasonList,
|
|
|
+ table: {
|
|
|
+ data: [{}],
|
|
|
+ total: 20,
|
|
|
+ },
|
|
|
+ now: "",
|
|
|
+ tempdataLayerId: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cockpit() {
|
|
|
+ this.$emit("cockpit");
|
|
|
+ },
|
|
|
+ regionChange(region) {
|
|
|
+ this.region = region;
|
|
|
+ this.pageObj.xzqdm = region;
|
|
|
+ this.searchFun();
|
|
|
+ },
|
|
|
+ searchFun(page = {}) {
|
|
|
+ this.pageObj.pageNum = page.pageIndex || 1;
|
|
|
+ this.pageObj.pageSize = page.size || 10;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ getTableData() {
|
|
|
+ this.$emit("updateParent", "loading", true);
|
|
|
+ removeGeoJSON("zzxm");
|
|
|
+ getXmList(this.pageObj).then((res) => {
|
|
|
+ this.$emit("updateParent", "loading", false);
|
|
|
+ this.table = { total: res.total, data: res.rows };
|
|
|
+ this.active_tableData(res.rows);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ // if (rowIndex === this.scrollTop_index) {
|
|
|
+ // return "warning-row";
|
|
|
+ // }
|
|
|
+ // return "";
|
|
|
+ },
|
|
|
+ active_tableData(newVal) {
|
|
|
+ newVal.forEach((item, index) => {
|
|
|
+ item.tQytdzzZzxm.forEach((res) => {
|
|
|
+ if (res.geom)
|
|
|
+ loadGeoJSON(res.geom, "#facd91", { isfly: false }, (data) => {
|
|
|
+ geoSources[res.pid + res.id] = data;
|
|
|
+ data.name = "zzxm";
|
|
|
+ res.entity = "整治图斑";
|
|
|
+ data.entities.values.forEach((entity) => {
|
|
|
+ entity.properties = { type: "图斑上图", res };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ flyTo(item, fill_a = 0.4) {
|
|
|
+ // let xzqdm = "h_" + item.xzqdm;
|
|
|
+ // this.tempdataLayerId = xzqdm;
|
|
|
+ // if (geoSources[xzqdm]) return;
|
|
|
+ removeGeoJSON("zzxmhig");
|
|
|
+ item.tQytdzzZzxm.forEach((res) => {
|
|
|
+ if (res.geom)
|
|
|
+ loadGeoJSON(res.geom, "#ff0000", { isfly: true, fill_a }, (data) => {
|
|
|
+ data.name = "zzxmhig";
|
|
|
+ geoSources[res.pid + res.id + "h"] = data;
|
|
|
+ res.entity = "整治图斑";
|
|
|
+ data.entities.values.forEach((entity) => {
|
|
|
+ entity.properties = { type: "图斑上图", res };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ reset(xzqh) {
|
|
|
+ this.pageObj = {
|
|
|
+ xzqdm: this.region,
|
|
|
+ xmmc: "",
|
|
|
+ lxfl: "",
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ };
|
|
|
+ removeGeoJSON("zzxm");
|
|
|
+ removeGeoJSON("zzxmhig");
|
|
|
+ },
|
|
|
+ detail(row) {
|
|
|
+ this.flyTo(row);
|
|
|
+ this.bus.$emit("handleView", row, "整治项目");
|
|
|
+ },
|
|
|
+ async handle(row) {
|
|
|
+ removeGeoJSON("zzxm");
|
|
|
+ this.flyTo(row, 0.01);
|
|
|
+ let res = await QueryList({
|
|
|
+ jscType: "qytuzz_zzxm_qhdb",
|
|
|
+ id: row.id,
|
|
|
+ });
|
|
|
+ console.log("----", res);
|
|
|
+ this.$emit("contrast", { id: this.region, fp: res.data });
|
|
|
+ },
|
|
|
+
|
|
|
+ changerdxz() {
|
|
|
+ this.pageObj.isConfirm = !this.pageObj.isConfirm;
|
|
|
+ this.searchFun();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ tempdataLayerId(newVal, oldVal) {
|
|
|
+ if (oldVal && geoSources[oldVal]) {
|
|
|
+ viewer.dataSources.remove(geoSources[oldVal]);
|
|
|
+ geoSources[oldVal] = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "../complianceAnalysis/ghzc.scss";
|
|
|
+.geologyDisaster {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .headerSelect {
|
|
|
+ width: 100%;
|
|
|
+ height: 26px;
|
|
|
+ // background: #00ffff;
|
|
|
+ margin: 5px 0px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .tablePage {
|
|
|
+ height: calc(100% - 120px);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.geologyDisaster {
|
|
|
+ .el-col {
|
|
|
+ padding-right: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
