1.积水点-删除填报达标区

2.成效评估统计-更改到规划计划
3.成效评估统计删除

src/assets/json/waterAccumulationPoint.json

@@ -26,17 +26,6 @@
     }
   ],
   "waterAccumulationLayer": [
-    {
-      "labelId": "D9999990620240701",
-      "label": "填报达标区",
-      "ADDRESS": "https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/gxjh_fwjk/D9999990620240701",
-      "TYPE": "tile",
-      "COORDINATE_SYSTEM": "1",
-      "STATE": "2",
-      "SERVICE_TYPE": "1",
-      "visible": true,
-      "color": "#FCB6DB"
-    },
     {
       "labelId": "D9999990320241018",
       "label": "申报达标区",

src/views/system/cityStatistics/regionalAreaDistribution/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-2 regionalAreaDistribution">
     <Map />
-    <div class="left-model">
+<!--    <div class="left-model">
       <div class="content">
         <el-form>
           <el-form-item label="范围:">
@@ -57,7 +57,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div>-->
     <div class="xmtlLengend">
       <div class="container">
         <div class="top">
@@ -220,8 +220,8 @@ onMounted(() => {
   nextTick(() => {
     layerList.value = WaterAccumulationPointJson.areaDistributionLayer;
     showProjectInfo();
-    FindOriginList();
-    SelectProjectAreaSummary();
+    // FindOriginList();
+    // SelectProjectAreaSummary();
     showArea();
   });
 });

src/views/system/planingProgram/planingProgram/index.vue

@@ -3,45 +3,59 @@
     <Map />
     <div class="left-model">
       <div class="content">
-        <div class="xg">
-          <div class="item" v-for="item in xgList" @click="changeProjectSort(item.dataKey)" :key="item.name">
-            <p class="value">
-              {{ item.count }}
-            </p>
-            <p class="title">
-              {{ item.dataValue }}
-            </p>
-          </div>
-        </div>
-        <div class="reform">
-          <div class="title">新建改造占比:</div>
-          <div class="xjgzEchart">
-            <div ref="gzzbRef" class="pie-charts"></div>
-            <div class="legend-text">
-              <div class="legend-item">
-                <span class="dot" :style="{ background: 'rgb(0, 128, 255)' }"></span>
-                <span class="legend_title">新建</span>
-                <span>{{ xjPercent }}%</span>
-              </div>
-              <div class="legend-item">
-                <span class="dot" :style="{ background: 'rgb(38, 190, 191)' }"></span>
-                <span class="legend_title">改造</span>
-                <span>{{ gzPercent }}%</span>
+        <el-form>
+          <el-form-item label="范围:">
+            <el-select v-model="form.region" placeholder="全市" @change="changeRegion">
+              <el-option label="全市" value="" />
+              <el-option v-for="item in originList" :key="item.datakey" :value="item.datakey" :label="item.datavalue"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="时间:">
+            <el-col :span="11">
+              <el-date-picker
+                v-model="form.startYear"
+                type="year"
+                format="YYYY"
+                value-format="YYYY"
+                placeholder="起始年份"
+                style="width: 100%"
+                @change="SelectProjectAreaSummary"
+              />
+            </el-col>
+            <el-col :span="2" class="text-center">
+              <span class="text-gray-500">-</span>
+            </el-col>
+            <el-col :span="11">
+              <el-date-picker
+                v-model="form.endYear"
+                type="year"
+                format="YYYY"
+                value-format="YYYY"
+                placeholder="终止年份"
+                style="width: 100%"
+                @change="SelectProjectAreaSummary"
+              />
+            </el-col>
+          </el-form-item>
+        </el-form>
+        <div class="info">
+          <div class="item">
+            <div class="item-box">
+              <div class="value">
+                {{ footprintSum }}
               </div>
+              <div class="title">规划占地面积（公顷）</div>
             </div>
           </div>
-        </div>
-        <div class="xm">
-          <div class="title">项目类型(个)：</div>
-          <div class="xmChart">
-            <div ref="xmlxRef" class="pie-charts"></div>
+          <div class="item">
+            <div class="item-box">
+              <div class="value">
+                {{ footprintCount }}
+              </div>
+              <div class="title">规划区域（个）</div>
+            </div>
           </div>
         </div>
-        <div class="explain">
-          <h4 class="explain_title">解释说明:</h4>
-          <p>“新建”就是地块拆平了重建;</p>
-          <p>“改造”如老旧小区改造、管网改造、河道整治，不是新开辟河道。</p>
-        </div>
       </div>
     </div>
     <div class="xmtlLengend">
@@ -79,24 +93,48 @@
 <script setup name="planingProgram" lang="ts">
 import Map from '@/views/map/Map.vue';
 import { ref } from 'vue';
-import { AddSingleLayer_Achieve, AddSingleLayer_Common, SetAreaLocation } from '@/utils/map/AddLayer';
+import {
+  AddSingleLayer_Achieve,
+  AddSingleLayer_Common,
+  AddSingleLayer_Plan,
+  SetAreaLocation
+} from '@/utils/map/AddLayer';
 import WaterAccumulationPointJson from '@/assets/json/waterAccumulationPoint.json';
 import { buildingQuery } from '@/api/system/cityStatistics/regionalAreaDistribution/types';
 import { projectMenuShowInfo, projectSortList } from '@/api/system/cityStatistics/regionalAreaDistribution';
 import { homePieOption, xmlxOption } from '@/utils/echart/echartOption';
 import { findOrgList } from '@/api/common';
 import Pagination from '@/components/Pagination/index.vue';
+import { regionalAssessmentList, selectProjectAreaSummary } from '@/api/system/cityStatistics/cityStatistics';
+import { cityStatisticsQuery } from '@/api/system/cityStatistics/cityStatistics/types';
 let allTypeVisible = ref(true);
 const layerList = ref([]);
 
+let form = ref({
+  region: null,
+  startYear: '2023',
+  endYear: '2024'
+});
+
+let originList = ref([]);
+let footprintSum = ref('');
+let standardAreaSum = ref('');
+let footprintCount = ref('');
+
 // 查询参数
-const queryParams = ref<buildingQuery>({
+const queryParams = ref<cityStatisticsQuery>({
   pageNum: 1,
   pageSize: 10,
   subregion: null,
-  projectSort: null
+  projectSort: null,
+  dateArray: null
 });
 
+let planState = ref(true);
+let qualifyState = ref(true);
+let planGeometry = []; //规划区
+let achieveGeometry = []; //达成区
+
 let detailDialogVisible = ref(false);
 const progressList = ref([
   {
@@ -236,25 +274,11 @@ function ProjectMenuShowInfo(id) {
   });
 }
 
-function FindOriginList(id) {
+function FindOriginList() {
   findOrgList().then((res) => {
     if (res.code == 200) {
       let data = res.data;
-      let where = '1=1';
-      let achieveWhere = '1=1';
-      let currentArea = data.find((item) => item.datakey == id);
-      if (currentArea) {
-        where = "区县名称='" + currentArea.datavalue + "'";
-        achieveWhere = "区管委会='" + currentArea.datavalue + "'";
-      }
-      AddSingleLayer_Achieve({
-        where: achieveWhere,
-        visible: true
-      });
-      SetAreaLocation({
-        type: '区县',
-        where
-      });
+      originList.value = data;
     }
   });
 }
@@ -282,13 +306,87 @@ function changeProjectStatus(item) {
   item.visible = !item.visible;
   showProjectInfo();
 }
+
+function changeRegion() {
+  let where = '1=1';
+  let currentArea = originList.value.find((item) => item.datakey == form.value.region);
+  if (currentArea) {
+    where = "区县名称='" + currentArea.datavalue + "'";
+  }
+  SetAreaLocation({
+    type: '区县',
+    where
+  });
+  SelectProjectAreaSummary();
+}
+
+function SelectProjectAreaSummary() {
+  queryParams.value.subregion = form.value.region;
+  queryParams.value.dateArray = form.value.startYear + ',' + form.value.endYear;
+
+  selectProjectAreaSummary(queryParams.value).then((res) => {
+    if (res.code == 200) {
+      let data = res.data;
+      footprintSum.value = data.footprintSum;
+      // standardAreaSum.value = data.standardAreaSum;
+      footprintCount.value = data.dataList.length;
+
+      //footprintCount.value =data.datalist.length;
+      // compliance.value = data.compliance;
+      // progressWidth.value = `calc(${data.compliance}% + 2px)`;
+    }
+  });
+
+  showArea();
+
+  queryParams.value.subregion = form.value.region;
+  queryParams.value.dateArray = form.value.startYear + ',' + form.value.endYear;
+  //获取图斑数据
+  regionalAssessmentList(queryParams).then((res) => {
+    if (res.code == 200) {
+      planGeometry = res.data.rows;
+      achieveGeometry = res.data.data.rows;
+      console.log();
+    }
+  });
+}
+
+function showArea() {
+  let where = '1=1';
+  if (form.value.startYear && form.value.endYear) {
+    where += ' and 规划年限 in(';
+    for (let i = form.value.startYear; i <= form.value.endYear; i++) {
+      where += "'" + i + "'";
+      if (i != form.value.endYear) {
+        where += ',';
+      }
+    }
+    where += ')';
+  }
+  if (form.value.region) {
+    let currentArea = originList.value.find((item) => item.datakey == form.value.region);
+    if (currentArea) {
+      where += " and 区管委会='" + currentArea.datavalue + "'";
+    }
+  }
+  AddSingleLayer_Plan({
+    where: where,
+    visible: planState.value
+  });
+  AddSingleLayer_Achieve({
+    where: where,
+    visible: qualifyState.value
+  });
+}
+
 onMounted(() => {
   id = '';
-  //FindOriginList(id);
+  FindOriginList();
   ProjectMenuShowInfo(id);
   nextTick(() => {
     layerList.value = WaterAccumulationPointJson.planLayer;
-    showProjectInfo();
+    SelectProjectAreaSummary();
+    showArea();
   });
 });
 </script>
@@ -315,141 +413,81 @@ onMounted(() => {
       border-radius: 5px;
       color: var(--commonTextColor);
       overflow-y: auto;
-      .xg {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 12px;
-        .item {
-          flex: 0 0 calc(50% - 10px);
-          padding: 17px 20px;
-          border-radius: 5px;
-          margin-bottom: 12px;
-          background: var(--commonBg);
-          position: relative;
-          box-sizing: border-box;
-          cursor: pointer;
-          transition: all ease 0.3s;
-          &::before {
-            display: block;
-            content: '';
-            width: 20px;
-            height: 18px;
-            border: 1px solid #00a0e9;
-            border-width: 1px 0 0 1px;
-            border-top-left-radius: 5px;
-            position: absolute;
-            top: 0;
-            left: 0;
-          }
-          &::after {
-            display: block;
-            content: '';
-            width: 20px;
-            height: 18px;
-            border: 1px solid #00a0e9;
-            border-width: 0 1px 1px 0;
-            border-bottom-right-radius: 5px;
-            position: absolute;
-            bottom: 0;
-            right: 0;
-          }
-          p {
-            font-weight: bold;
-            line-height: 1;
-            text-align: center;
-          }
-          .value {
-            font-size: 20px;
-          }
-          .title {
-            font-size: 14px;
-            margin-top: 14px;
-          }
+      .info {
+        margin-bottom: 32px;
+        .value {
+          height: 18px;
+          font-size: 18px;
+          margin-bottom: 17px;
         }
-      }
-      .reform {
-        position: relative;
-        margin-top: 36px;
         .title {
-          font-size: 14px;
-          font-weight: bold;
-          position: absolute;
-          top: 0px;
-          left: 0;
+          font-size: 12px;
+          color: #335a9f;
         }
-        .xjgzEchart {
-          width: 100%;
-          height: 260px;
-          -webkit-tap-highlight-color: transparent;
-          user-select: none;
-          position: relative;
-          .pie-charts {
-            width: 100%;
-            height: calc(100% - 3vh);
-          }
-          .legend-text {
-            width: 100%;
-            height: 3vh;
-            display: flex;
-            justify-content: space-around;
-            .legend-item {
-              font-size: 0.7vw;
-              white-space: nowrap;
-              .dot {
-                display: inline-block;
-                width: 7px;
-                height: 7px;
-                border-radius: 50%;
-                margin-right: 5px;
-                font-size: 12px;
-              }
-              .legend_title {
-                padding-left: 4px;
-                padding-right: 6px;
-              }
+        .item {
+          .item-box {
+            padding: 28px 12px 20px 12px;
+            line-height: 1;
+            border: 1px solid #eee;
+            border-radius: 5px;
+            background: var(--commonBg);
+            position: relative;
+            margin-bottom: 10px;
+            font-weight: bold;
+            &::before {
+              display: block;
+              content: '';
+              width: 24px;
+              height: 20px;
+              border: 1px solid #00a0e9;
+              border-width: 1px 0 0 1px;
+              border-top-left-radius: 5px;
+              position: absolute;
+              top: -1px;
+              left: -1px;
+            }
+            &::after {
+              display: block;
+              content: '';
+              width: 24px;
+              height: 20px;
+              border: 1px solid #00a0e9;
+              border-width: 0 1px 1px 0;
+              border-bottom-right-radius: 5px;
+              position: absolute;
+              bottom: -1px;
+              right: -1px;
             }
           }
         }
-      }
-      .xm {
-        position: relative;
-        margin-top: 36px;
-        .title {
-          font-size: 14px;
+        .top {
+          margin-top: 24px;
+          margin-bottom: 16px;
+          font-size: 0;
+          line-height: 1;
           font-weight: bold;
-          position: absolute;
-          top: 0px;
-          left: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
         }
-        .xmChart {
-          position: relative;
-          left: 0px;
-          top: 0px;
+        .progress-inner {
           width: 100%;
-          height: 180px;
-          user-select: none;
-          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-          padding: 0px;
-          margin: 0px;
-          border-width: 0px;
-          .pie-charts {
-            width: 100%;
-            height: 100%;
+          height: 10px;
+          border: 1px solid #eee;
+          border-radius: 5px;
+          position: relative;
+          .progress-content {
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            height: 10px;
+            display: block;
+            content: '';
+            border-radius: 5px;
+            background: #65e188;
           }
         }
       }
-      .explain {
-        margin-top: 36px;
-        padding: 5px 12px;
-        border: 1px dashed #b5b5b5;
-        .explain_title {
-          margin: 8px 0 2px 0;
-          font-weight: bold;
-        }
-        p {
-          line-height: 30px;
-        }
-      }
     }
   }
   .xmtlLengend {