规划差异分析差异分析结果数据联调与表格数据处理合并,添加列表布局与标题和操作栏,数据结果表格展示

website/src/api/ghfxpj/cyfxApi.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request.js'
+import { obj2FormData } from '@/utils/dataHelp'
+// 字典
+const cyfxApi = {
+    SjyList: '/apply/fxpj/ghcy/sjylist',
+    Cyfxjg: '/apply/fxpj/ghcy/cyfxjg',
+    getGeomById: '/apply/fxpj/ghcy/getGeomById',
+    getAttributesById: '/apply/fxpj/ghcy/getAttributesById',
+
+};
+
+export function SjyList(parameter) {
+    return request({
+        url: cyfxApi.SjyList,
+        method: 'post',
+        data: parameter,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+export function Cyfxjg(parameter) {
+    return request({
+        url: cyfxApi.Cyfxjg,
+        method: 'post',
+        data: obj2FormData(parameter),
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+export function getGeomById(parameter) {
+    return request({
+        url: cyfxApi.getGeomById,
+        method: 'post',
+        data: obj2FormData(parameter),
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+//查询某项分析结果属性表
+export function getAttributesById(parameter) {
+    return request({
+        url: cyfxApi.getAttributesById,
+        method: 'post',
+        data: obj2FormData(parameter),
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}

website/src/store/ghbzgl/xmgl.js

@@ -1,11 +1,16 @@
 const xmgl = {
     state: {
         fileviewSrc: {}, //详细信息
+        // 用于存储传递的id
+        transfer: {}
     },
     mutations: {
         SET_FILEVIEWSRC(state, value) {
             state.fileviewSrc = value
         },
+        SET_TRANSFER(state, value) {
+            state.transfer = value
+        },
     },
     actions: {
 

website/src/utils/dataHelp.js

@@ -0,0 +1,16 @@
+/**
+对象转FormData数据类型
+ */
+export function obj2FormData(obj) {
+  let formdata;
+  if (obj instanceof FormData) {
+    formdata = obj
+  } else {
+    formdata = new FormData();
+    for (const key in obj) {
+      formdata.append(key, obj[key]);
+    }
+  }
+  return formdata
+}
+

website/src/views/ghfxpj/Cyfx.vue

@@ -0,0 +1,367 @@
+<template>
+  <div
+    v-loading="loading"
+    class="fxsz max-box overflow-hidden flex-box column posi-rel"
+  >
+    <div class="max-width flex-box column padding-10 box-sizing">
+      <div class="block-title margin-top-5">{{ title }}说明</div>
+      <div class="wenzi max-width column box-sizing" style="margin-top: 10px">
+        {{ qdfxsm }}
+      </div>
+    </div>
+    <div class="max-widthflex-box column">
+      <div
+        class="max-width flex-box column padding-10 box-sizing"
+        style="padding-top: 0"
+      >
+        <div class="block-title margin-top-5">分析规划</div>
+        <div class="max-width flex-box margin-top-10">
+          <el-form ref="queryForm" :model="queryParams" label-width="80px">
+            <el-form-item label="规划1:">
+              <el-select
+                v-model="queryParams.plan1"
+                placeholder="请选择分析规划1"
+              >
+                <el-option
+                  v-for="(item, i) in fxghList"
+                  :key="i"
+                  :label="item.name"
+                  :value="item.name"
+                ></el-option> </el-select
+            ></el-form-item>
+            <el-form-item label="规划2:">
+              <el-select
+                v-model="queryParams.plan2"
+                placeholder="请选择分析规划2"
+              >
+                <el-option
+                  v-for="(item, i) in fxghList"
+                  :key="i"
+                  :label="item.name"
+                  :value="item.name"
+                ></el-option> </el-select
+            ></el-form-item>
+            <el-form-item>
+              <el-button round @click="subMit">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+    <div class="max-width flex-box column padding-10 box-sizing">
+      <div class="block-title margin-top-5">差异分析结果</div>
+      <div class="cyContent">
+        <div v-for="(item, i) in cyjgList" :key="i" style="margin-bottom: 5px">
+          <div class="cyList">
+            <div style="color: #02a7f0">{{ i + 1 }}. {{ item.fxmc }}</div>
+            <div class="icon_list">
+              <el-icon color="#02A7F0"
+                ><View style="width: 1.2rem; height: 1.2rem"
+              /></el-icon>
+              <el-icon color="#02A7F0" @click="handleTransfer(item, i)"
+                ><Operation style="width: 1.2rem; height: 1.2rem"
+              /></el-icon>
+            </div>
+          </div>
+          <div class="wenzi max-width column box-sizing">
+            {{ item.remark }}
+          </div>
+          <el-table
+            :data="item.statics"
+            border
+            style="width: 100%"
+            :span-method="objectSpanMethod"
+            v-if="item.statics.length"
+            height="250"
+          >
+            <el-table-column
+              type="index"
+              width="50"
+              label="序号"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="A_YDYHFLDM"
+              label="控规用地用海代码"
+              align="center"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              prop="A_YDYHFLMC"
+              label="控规用地用海名称"
+              align="center"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              prop="DLMJ"
+              label="与总规差异总面积"
+              align="center"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              prop="B_YDYHFLDM"
+              label="总规用地用海代码"
+              align="center"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              prop="B_YDYHFLMC"
+              label="总规用地用海名称"
+              align="center"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              prop="TBMJ"
+              label="差异面积"
+              align="center"
+              show-overflow-tooltip
+            ></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import { reactive, toRefs } from "@vue/reactivity";
+import {
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  watch,
+} from "@vue/runtime-core";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import { getFxyz, create } from "@/api/ghfxpj/ctfxApi.js";
+import { SjyList, Cyfxjg } from "@/api/ghfxpj/cyfxApi.js";
+import range from "@/components/mapview/range/range.vue";
+import { ElMessage } from "element-plus";
+import EsriJSON from "ol/format/EsriJSON";
+import { jsonToShp } from "@/api/gdal/index.js";
+
+export default {
+  components: {
+    range,
+  },
+  props: {
+    activeTabs: {
+      type: String,
+    },
+    zytype: {
+      type: String,
+    },
+    fxyzDict: {
+      type: Object,
+    },
+  },
+  setup(prop, context) {
+    const { proxy } = getCurrentInstance();
+    const store = useStore();
+    const router = useRouter();
+    const parent = { ...context };
+    const fxsz = reactive({
+      loading: false,
+      range: ref(null),
+      isQiXian: store.state.user.isQiXian,
+      active_layout: true,
+      downloadLoading: false,
+      xzqList: [],
+      title: router.currentRoute.value.meta.title,
+      qdfxsm:
+        "围绕国土空间总体规划、国土空间控制性详细规划、绿地专项规划，开展规划与规划间的差异分析，通过输出两规之间的矛盾冲突，辅助支撑控制性详细规划调整及专项规划编制工作，真正实现“多规合一”",
+      cyjgList: [],
+      queryParams: {
+        plan1: "",
+        plan2: "",
+      },
+      fxyzList: [],
+      fxghList: [],
+      spanArr: [], // 存储合并信息的数组
+      init() {
+        //获取分析规划
+        SjyList().then((res) => {
+          if (res.statuscode === 200) {
+            fxsz.fxghList = res.data;
+          }
+        });
+      },
+      subMit() {
+        console.log(fxsz.queryParams, "/////");
+        Cyfxjg(fxsz.queryParams).then((res) => {
+          if (res.statuscode === 200) {
+            fxsz.cyjgList = res.data.fxjg;
+            fxsz.calculateSpan();
+          }
+        });
+      },
+      reset() {
+        // fxsz.form.fxyz = [];
+        // fxsz.form.jgmc = "";
+        // fxsz.range.reset();
+      },
+      // 合并单元格方法
+      // 合并单元格方法：单独处理每个列的合并逻辑
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        // 只处理需要合并的三列（A_YDYHFLDM、A_YDYHFLMC、DLMJ）
+        if ([1, 2, 3].includes(columnIndex)) {
+          // 根据列索引获取对应字段的合并信息
+          const span = fxsz.spanArr[columnIndex - 1]?.[rowIndex];
+          if (span) {
+            return span;
+          }
+        }
+      },
+
+      // 计算合并的行数：为三个字段分别计算合并信息
+      calculateSpan() {
+        // 初始化三个字段的合并信息数组（对应列索引1、2、3）
+        fxsz.spanArr = [[], [], []];
+        const tableData =
+          this.cyjgList.length > 0 ? this.cyjgList[0].statics : [];
+        if (tableData.length === 0) return;
+
+        // 需要合并的字段与列索引映射关系
+        const fieldMap = [
+          "A_YDYHFLDM", // 列索引1
+          "A_YDYHFLMC", // 列索引2
+          "DLMJ", // 列索引3
+        ];
+
+        // 为每个字段单独计算合并信息
+        fieldMap.forEach((field, fieldIndex) => {
+          let count = 1;
+          for (let i = 0; i < tableData.length; i++) {
+            // 检查下一行是否存在且字段值相同
+            if (
+              i < tableData.length - 1 &&
+              tableData[i][field] === tableData[i + 1][field]
+            ) {
+              count++;
+            } else {
+              // 记录当前组的合并信息
+              for (let j = 0; j < count; j++) {
+                fxsz.spanArr[fieldIndex].push(
+                  j === 0
+                    ? { rowspan: count, colspan: 1 }
+                    : { rowspan: 0, colspan: 0 }
+                );
+              }
+              count = 1; // 重置计数器
+            }
+          }
+        });
+      },
+      handleTransfer(item, index) {
+        // 提交数据到Vuex
+        store.commit("SET_TRANSFERID", {
+          id: item.id,
+          showTable: true,
+        });
+      },
+    });
+    onMounted(() => {
+      fxsz.init();
+    });
+    return { ...toRefs(fxsz) };
+  },
+};
+</script>
+  
+  <style lang="less" scoped>
+.fxsz {
+  .act_xzq,
+  .act_yz,
+  .act_year {
+    background-color: #2a82e4;
+    border-radius: 20px;
+    color: #fff;
+  }
+  .wenzi {
+    white-space: pre-line;
+    text-align: justify;
+  }
+  .model_icon {
+    background-size: 45% 45% !important;
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    border: none;
+    margin-left: 14px;
+    margin-right: 5px;
+    cursor: pointer;
+    border-radius: 33px;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background: rgb(59, 161, 255);
+  }
+  .FILESHP {
+    background-image: url(~@/assets/map/model/FILE.png),
+      url(~@/assets/map/model/shp.png);
+    background-position: center 15px, center top !important;
+  }
+  .FILESHP:hover {
+    background-image: url(~@/assets/map/model/FILE_active.png);
+  }
+  .FILESHP.active {
+    background-image: url(~@/assets/map/model/FILE_active.png);
+  }
+  .FILETXT {
+    background-image: url(~@/assets/map/model/FILE.png),
+      url(~@/assets/map/model/txt.png);
+    background-position: center 15px, center top !important;
+  }
+  .FILETXT:hover {
+    background-image: url(~@/assets/map/model/FILE_active.png);
+  }
+  .FILETXT.active {
+    background-image: url(~@/assets/map/model/FILE_active.png);
+  }
+  .JSON2 {
+    background-image: url(~@/assets/map/model/JSON2.png);
+  }
+  .JSON2:hover {
+    background-image: url(~@/assets/map/model/JSON2_active.png);
+  }
+  .JSON2.active {
+    background-image: url(~@/assets/map/model/JSON2_active.png);
+  }
+  .jiequ {
+    background-image: url(~@/assets/map/model/jiequ.png);
+    background-size: 50% 50% !important;
+  }
+  .jiequ:hover {
+    background-image: url(~@/assets/map/model/jiequ_active.png);
+    background-size: 50% 50% !important;
+  }
+  .jiequ.active {
+    background-image: url(~@/assets/map/model/jiequ_active.png);
+    background-size: 50% 50% !important;
+  }
+}
+.cyContent {
+  height: 52vh;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.cyList {
+  width: 100%;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .icon_list {
+    width: 80px;
+    height: 24px;
+    display: flex;
+    justify-content: space-around;
+    i,
+    span {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+</style>
+  

website/src/views/ghfxpj/gtkjfxyy/ghcyfx.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="ghcyfx max-box">
+    <el-row class="max-box">
+      <el-col
+        :span="6"
+        v-loading="loading"
+        element-loading-text="数据加载中"
+        element-loading-spinner="loading"
+      >
+        <Fxsz
+          v-model:activeTabs="activeTabs"
+          v-model:act_xzq="act_xzq"
+          v-model:zytype="zytype"
+          v-model:fxyzDict="fxyzDict"
+        ></Fxsz>
+      </el-col>
+      <el-col :span="18">
+        <Mapview>
+          <template #tool>
+            <span></span>
+            <div class="tckz">
+              <div>图层列表</div>
+              <div v-for="site in sites" :key="site.id">
+                <el-checkbox
+                  @change="changeValue(site)"
+                  v-model="site.checked"
+                  :label="site.name"
+                ></el-checkbox>
+              </div>
+            </div>
+          </template>
+        </Mapview>
+        <!-- <div class="Attributes" v-show="store.state.xmgl.transfer.showTable">
+          <div class="AttributesTitle">
+            <span> 绿地规划位于总规外</span>
+            <el-icon
+              class="pointer font-22 posi-abs"
+              @click="closeTable"
+              title="关闭"
+              ><close
+            /></el-icon>
+          </div>
+          <el-table :data="tableData" border stripe style="width: 100%">
+            <el-table-column
+              v-for="(key, index) in tableColumns"
+              :key="index"
+              :prop="key"
+              :label="formatColumnName(key)"
+              align="center"
+            />
+          </el-table>
+        </div> -->
+      </el-col>
+    </el-row>
+  </div>
+  <errorLog
+    v-model:dialogLog="dialogLog"
+    v-model:logData="logData"
+    v-model:logName="logName"
+  ></errorLog>
+</template>
+  
+  <script>
+import errorLog from "@/components/ghfxpj/wtsbztyy/errorLog.vue";
+import Fxsz from "@/views/ghfxpj/Cyfx.vue";
+import Mapview from "@/views/mapview/Mapview.vue"; //地图插件
+import arcMap from "@/utils/arcMap.js";
+import { GetByBsms } from "@/api/ghyzt/zzllApi.js";
+import { reactive, toRefs, ref } from "@vue/reactivity";
+import { onMounted, watch } from "@vue/runtime-core";
+import { remove } from "@/api/gdal/index.js";
+
+export default {
+  components: {
+    Fxsz,
+    Mapview,
+    errorLog,
+  },
+  setup() {
+    const store = useStore();
+    const ghcyfx = reactive({
+      fxyzDict: {}, //分析因子列表
+      dialogLog: false, // 错误信息提示
+      logData: "",
+      logName: "",
+      activeTabs: "fxsz",
+      loading: false,
+      zytype: "6",
+      baseLayer: {},
+      jgsj: {},
+      act_xzq: "",
+      refFxjg: ref(null),
+      bsm: "",
+      sites: [
+        {
+          控规_用地用海分类名称: "城镇住宅用地",
+          总规_用地用海分类名称: "城镇村道路用地",
+          差异面积: ".16",
+          控规_用地用海分类代码: "070100",
+          总规_用地用海分类代码: "120700",
+          编号: 1,
+        },
+        {
+          控规_用地用海分类名称: "城镇住宅用地",
+          总规_用地用海分类名称: "城镇村道路用地",
+          差异面积: ".18",
+          控规_用地用海分类代码: "070100",
+          总规_用地用海分类代码: "120700",
+          编号: 2,
+        },
+        {
+          控规_用地用海分类名称: "高等教育用地",
+          总规_用地用海分类名称: "教育用地",
+          差异面积: "30001.87",
+          控规_用地用海分类代码: "080401",
+          总规_用地用海分类代码: "080400",
+          编号: 3,
+        },
+      ],
+      tableData: [],
+      tableColumns: [],
+      changeValue(site) {
+        // arcMap.getLayerById(site.id).setVisible(site.checked);
+        if (site.checked && !arcMap.getLayerById(site.id)) {
+          site.styleByField = "SYX";
+          arcMap[site.type](site, null, false);
+        }
+        arcMap.getLayerById(site.id).setVisible(site.checked);
+      },
+      handleChange(name) {
+        if (name != "fxjg") {
+          // 隐藏图层列表，清空图层
+          store.commit("SET_SYX_RIGHTLAYER_LIST");
+        }
+      },
+
+      // 模拟接口请求，获取数据后解析列名
+      fetchTableData() {
+        // 接口返回的原始数据（实际项目从接口响应中获取）
+        const apiData = [
+          {
+            控规_用地用海分类名称: "城镇住宅用地",
+            总规_用地用海分类名称: "城镇村道路用地",
+            差异面积: ".16",
+            控规_用地用海分类代码: "070100",
+            总规_用地用海分类代码: "120700",
+            编号: 1,
+          },
+          {
+            控规_用地用海分类名称: "城镇住宅用地",
+            总规_用地用海分类名称: "城镇村道路用地",
+            差异面积: ".18",
+            控规_用地用海分类代码: "070100",
+            总规_用地用海分类代码: "120700",
+            编号: 2,
+          },
+          {
+            控规_用地用海分类名称: "高等教育用地",
+            总规_用地用海分类名称: "教育用地",
+            差异面积: "30001.87",
+            控规_用地用海分类代码: "080401",
+            总规_用地用海分类代码: "080400",
+            编号: 3,
+          },
+        ];
+
+        ghcyfx.tableData = apiData;
+        // 从第一条数据中提取属性名，作为表格列（若数据为空则不渲染列）
+        if (apiData.length > 0) {
+          ghcyfx.tableColumns = Object.keys(apiData[0]);
+        }
+      },
+
+      // 格式化列名：将接口属性名转换为友好显示文本（如去掉下划线）
+      formatColumnName(key) {
+        return key.replace(/_/g, " ");
+      },
+    });
+    watch(
+      () => store.state.xmgl.transfer,
+      (newvalue, oldvalue) => {
+
+      },
+    );
+    watch(
+      () => store.state.fxpj.syxfxRightlayerList,
+      (newvalue, oldvalue) => {
+        if (oldvalue) {
+          oldvalue.map((item) => {
+            let layer = arcMap.getLayerById(item.id);
+            if (layer) {
+              // 调用remove接口 删除矢量图层后台缓存 300个进程
+              if (item.type === "VectorTile" && layer.get("layerid")) {
+                remove({
+                  LAYERID: layer.get("layerid"),
+                }).then((res) => {});
+              }
+              arcMap.removeLayer(layer);
+            }
+          });
+        }
+        if (!newvalue) {
+          ghcyfx.sites = [];
+        } else {
+          ghcyfx.sites = newvalue;
+          ghcyfx.sites.map((item) => {
+            if (item.checked) {
+              item.styleByField = "SYX";
+              arcMap[item.type](item, null, false);
+            }
+          });
+        }
+      }
+    ),
+      watch(
+        () => ghcyfx.activeTabs,
+        (val) => {
+          if (val !== "fxjg") {
+            ghcyfx.jgsj = {};
+            ghcyfx.refFxjg.active_layout = true;
+          } else {
+            setTimeout(() => {
+              ghcyfx.refFxjg.updatechart();
+            }, 10);
+          }
+        }
+      );
+    return { ...toRefs(ghcyfx) };
+  },
+};
+</script>
+  
+  <style lang="less" scoped>
+.ghcyfx {
+  .xz_box {
+    box-shadow: none;
+    border: none;
+    height: 100%;
+    border-right: 1px solid #dcdfe6;
+    :deep(.el-tabs__item) {
+      line-height: 40px;
+      height: 40px;
+    }
+    :deep(.el-tabs__content) {
+      padding: 0px !important;
+      height: calc(100% - 40px);
+    }
+  }
+  :deep(.el-tab-pane) {
+    height: 100%;
+  }
+  .tckz {
+    position: absolute;
+    left: auto;
+    right: 20px;
+    top: 50px;
+    background-color: rgba(255, 255, 255, 0.85);
+    padding: 5px;
+    border-radius: 5px;
+
+    > div {
+      padding: 5px;
+      padding-right: 10px;
+      text-align: left;
+    }
+
+    &.tckz-tl {
+      right: 20px;
+      left: auto;
+      top: auto;
+      bottom: 100px;
+      > div {
+        display: flex;
+      }
+      .bakbak {
+        width: 15px;
+        height: 15px;
+        margin-right: 5px;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+.Attributes {
+  width: 75%;
+  height: 300px;
+  background: #ffc0cb85;
+  z-index: 9999 !important;
+  position: absolute;
+  bottom: 0px;
+  padding: 0px 15px;
+  .AttributesTitle {
+    background: #ccc;
+    display: flex;
+    justify-content: space-between;
+    height: 30px;
+    align-items: center;
+    padding: 0px 10px;
+  }
+}
+</style>
+  <style lang="less"></style>
+