永久基本农田

src/views/farmlandProtection/components/statistics.vue

@@ -6,11 +6,11 @@
     <div class="cityList" :style="{ height: height + 'px' }">
       <div class="listCon" v-for="(item, i) in cityList" :key="i">
         <div class="listArea">
-          <span>{{ item.name||item.xqdmc }}</span>
+          <span>{{ item.name || item.xqdmc }}</span>
           <span>{{ item[prop] }}{{ item.unit || unit }}</span>
         </div>
         <div class="listItem">
-          <div class="itemBg"></div>
+          <div class="itemBg" :style="{ width: item.number / max * 100 + '%' }"></div>
         </div>
         <div class="listNum">
           <span>{{ text }}{{ item.number }}{{ textunit }}</span>
@@ -48,17 +48,20 @@ export default {
       type: String,
       default: "个",
     },
+    max: {
+      type: Number,
+    }
   },
   components: {},
   data() {
     return {};
   },
   computed: {},
-  mounted() {},
+  mounted() { },
   methods: {},
   watch: {},
   watch: {},
-  beforeDestroy() {},
+  beforeDestroy() { },
 };
 </script>
 
@@ -69,17 +72,20 @@ export default {
     // background: rgba(255, 192, 203, 0.445);
     overflow: hidden;
     overflow-y: auto;
+
     .listCon {
       width: 100%;
       height: 55px;
       //   background: rgba(152, 251, 152, 0.685);
       margin: 5px 0px;
+
       .listArea {
         // width: 365px;
         width: 20vw;
         display: flex;
         justify-content: space-between;
       }
+
       .listItem {
         // width: 365px;
         width: 20vw;
@@ -90,6 +96,7 @@ export default {
         border-radius: 85px;
         box-shadow: none;
         margin-bottom: 3px;
+
         .itemBg {
           width: 233px;
           height: 100%;
@@ -98,6 +105,7 @@ export default {
           border-radius: 85px;
         }
       }
+
       .listNum {
         font-size: 11px;
         color: #fff;

src/views/farmlandProtection/gdzl/index.vue

@@ -34,7 +34,7 @@
         <div class="echars">
           <div class="echartTitle">
             <div class="block-title">
-              {{ pageType && dlbm == "01" ? "永久基本农田" : gtype }}总量
+              {{ gtype }}总量
             </div>
           </div>
           <div class="content gdzlc">
@@ -42,13 +42,13 @@
               <div class="icon">
                 <div class="iicon"></div>
               </div>
-              <div class="text" v-if="dlbm == '01' && pageType">
+              <!-- <div class="text" v-if="dlbm == '01' && pageType">
                 <p>{{ zl.ntname }}</p>
                 <span class="cvalue">
                   {{ (zldata[zl.prop || uprops[nowunit]] || 0).toFixed(2) }}
                   {{ zl.ntunit || unitList[nowunit].unit }}</span>
-              </div>
-              <div class="text" v-else>
+              </div> -->
+              <div class="text">
                 <p>{{ zl.name }}</p>
                 <span class="cvalue">
                   {{ (zldata[zl.prop || uprops[nowunit]] || 0).toFixed(2) }}
@@ -71,11 +71,9 @@
         <div class="echars">
           <div class="echartTitle">
             <div class="block-title">
-              {{
-                `${pageType && dlbm == "01" ? "永久基本农田" : gtype}增减`
-              }}变化情况
+              {{ gtype }}增减变化情况
             </div>
-            <div class="titlesel" v-show="gtype == '耕地'">
+            <div class="titlesel" v-show="dlbm == '01'">
               对比年份
               <div class="selectTab">
                 <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="GetBhqk()">
@@ -86,23 +84,23 @@
               <div class="usable" @click="contrast">更多</div>
             </div>
           </div>
-          <div class="content scontent" v-show="gtype == '耕地'">
+          <div class="content scontent" v-show="dlbm == '01'">
             <div class="item item50" v-for="(bh, index) in bhlist" :key="index">
               <div class="text">
                 <p>{{ bh.name }}</p>
                 <span class="cvalue">
                   {{ (bhdata[bh.prop || uprops[nowunit]] || 0).toFixed(2) }}
                 </span>
-                <span class="unit">{{ unitList[nowunit].unit }}</span>
+                <span class="unit">{{ bh.unit || unitList[nowunit].unit }}</span>
               </div>
             </div>
           </div>
-          <div class="pietitle" v-show="gtype == '耕地'">历年变化情况</div>
+          <div class="pietitle" v-show="dlbm == '01'">历年变化情况</div>
           <bar class="pie_echart" ref="echartRef0"></bar>
         </div>
         <div class="echars gqgd">
-          <Statistics :title="`各区${gtype}分布`" :cityList="cityList" :prop="uprops[nowunit]"
-            :unit="unitList[nowunit].unit" :height="gtype == '耕地' ? 180 : 260" :text="`占全市${gtype}`" textunit="%">
+          <Statistics :title="`各区${gtype}分布`" :cityList="cityList" :prop="uprops[nowunit]" :max="citymax"
+            :unit="unitList[nowunit].unit" :height="dlbm == '01' ? 180 : 260" :text="`占全市${gtype}`" textunit="%">
           </Statistics>
           <!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
         </div>
@@ -153,23 +151,20 @@ export default {
         { code: 0, name: "平方千米", unit: "km²" },
         { code: 1, name: "平方米", unit: "m²" },
         { code: 2, name: "亩", unit: "亩" },
+        { code: 3, name: "公顷", unit: "公顷" },
       ],
       nowyear: "",
-      uprops: ["mj_qm", "mj", "mj_m"],
+      uprops: ["mj_qm", "mj", "mj_m", "mj_gq"],
       // bhprops: ["d1_mj_qm", "d1_mj", "mj_m"],
       yearList: [],
       typeList: [],
       tab: "2023",
       zllist: {
+        永久基本农田: [{ name: "永久基本农田" },
+        { name: "占现状耕地比", prop: "zb", unit: "%", }],
         耕地: [
-          { name: "耕地保有量", ntname: "永久基本农田" },
-          {
-            name: "耕地保有目标",
-            ntname: "占现状耕地比",
-            prop: "zb",
-            unit: "km²",
-            ntunit: "%",
-          },
+          { name: "耕地保有量", },
+          { name: "耕地保护目标", prop: "zb", unit: "km²", },
         ],
         水田: [
           { name: "水田现状" },
@@ -198,6 +193,7 @@ export default {
         yData: [[-10, 10, 10, 10]],
         legend: [""],
       },
+      citymax: 1,
       cityList: [],
       imagelayers: {},
       nowlayer: "",
@@ -238,6 +234,7 @@ export default {
     dlbmChange() {
       // let nowtype = this.typeList.find((x) => x.id == this.dlbm);
       this.gtype = this.typeList.find((x) => x.id == this.dlbm).label;
+      if (this.pageType && this.dlbm == "01") this.gtype = "永久基本农田"
       this.xzqhChange();
       // this.regionChange();
       // if (this.dlbm == "01") {
@@ -330,6 +327,7 @@ export default {
     },
     async regionChange(region) {
       // this.region = region;
+      if (this.pageType && this.dlbm == "01") this.gtype = "永久基本农田"
       if (region) this.nowyear = "";
       if (!this.nowyear) await this.GetDate();
       this.getData();
@@ -344,25 +342,37 @@ export default {
       if (this.$props.pageType == 0) {
         GetGdZl(parms).then((res) => {
           this.zldata = res.data;
+          GetGdQxfl(parms).then((res) => {
+            this.citymax = 0
+            res.data.forEach(c => {
+              c.number = (c.mj_m / this.zldata.mj_m * 100).toFixed(2);
+              if (this.citymax < c.number) this.citymax = Math.ceil(c.number / 10) * 10;
+            })
+            this.cityList = res.data;
+          });
         });
         if (this.dlbm == "01")
           GetGdFl(parms).then((res) => {
             this.fldata = res.data;
           });
-        GetGdQxfl(parms).then((res) => {
-          this.cityList = res.data;
-        });
+
       } else {
         GetYjjbntZl(parms).then((res) => {
           this.zldata = res.data;
+          GetYjjbntQxfl(parms).then((res) => {
+            this.citymax = 0
+            res.data.forEach(c => {
+              c.number = (c.mj_m / this.zldata.mj_m * 100).toFixed(2);
+              if (this.citymax < c.number) this.citymax = Math.ceil(c.number / 10) * 10;
+            })
+            this.cityList = res.data;
+          });
         });
         if (this.dlbm == "01")
           GetYjjbntFl(parms).then((res) => {
             this.fldata = res.data;
           });
-        GetYjjbntQxfl(parms).then((res) => {
-          this.cityList = res.data;
-        });
+
       }
       this.GetLnbhqk();
       this.GetBhqk();
@@ -592,7 +602,7 @@ export default {
     }
 
     .block-title {
-      width: calc(100% - 250px) !important;
+      width: calc(100% - 185px) !important;
     }
 
     .titlesel {