耕地总览

src/views/farmlandProtection/components/statistics.vue

@@ -4,16 +4,16 @@
       <div class="block-title">{{ title }}</div>
     </div>
     <div class="cityList" :style="{ height: height + 'px' }">
-      <div class="listCon" v-for="(item,i) in cityList" :key="i">
+      <div class="listCon" v-for="(item, i) in cityList" :key="i">
         <div class="listArea">
-          <span>天涯区</span>
-          <span>48.73km²</span>
+          <span>{{ item.name }}</span>
+          <span>{{ item.area }}{{ item.unit }}</span>
         </div>
         <div class="listItem">
           <div class="itemBg"></div>
         </div>
         <div class="listNum">
-          <span>图斑数152个</span>
+          <span>{{ text }}{{ item.number }}{{ textunit }}</span>
         </div>
       </div>
     </div>
@@ -32,6 +32,14 @@ export default {
     cityList: {
       type: Array,
     },
+    text: {
+      type: String,
+      default: "图斑数",
+    },
+    textunit: {
+      type: String,
+      default: "个",
+    },
   },
   components: {},
   data() {
@@ -56,9 +64,9 @@ export default {
     .listCon {
       width: 100%;
       height: 55px;
-    //   background: rgba(152, 251, 152, 0.685);
+      //   background: rgba(152, 251, 152, 0.685);
       margin: 5px 0px;
-      .listArea{
+      .listArea {
         width: 365px;
         display: flex;
         justify-content: space-between;
@@ -81,12 +89,11 @@ export default {
         }
       }
       .listNum {
-      font-size: 11px;
-      color: #fff;
-      text-align: left;
-    }
+        font-size: 11px;
+        color: #fff;
+        text-align: left;
+      }
     }
-
   }
 }
 </style>

src/views/farmlandProtection/gdzl/index.vue

@@ -1,48 +1,60 @@
 <template>
-  <div class="sdgk">
-    <div class="el-col">
-      <div class="region">
-        <!-- clearable -->
-        <el-cascader
-          v-model="xzqh"
-          :show-all-levels="false"
-          :options="store.state.region_tree"
-          @change="regionChange"
-          placeholder="行政区"
-          size="mini"
-          :props="{
-            checkStrictly: true,
-            expandTrigger: 'hover',
-            emitPath: false,
-          }"
-        ></el-cascader>
-      </div>
+  <div class="gdzl">
+    <div class="el-col headerSelect">
+      <el-select v-model="year" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in yearList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <!-- clearable -->
+      <el-cascader
+        v-model="region"
+        :show-all-levels="false"
+        :options="store.state.region_tree"
+        @change="regionChange"
+        placeholder="行政区"
+        size="mini"
+        :props="{
+          checkStrictly: true,
+          expandTrigger: 'hover',
+          emitPath: false,
+        }"
+      ></el-cascader>
+
+      <el-select v-model="gtype" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in typeList"
+          :key="item.label"
+          :label="item.label"
+          :value="item.label"
+        >
+        </el-option>
+      </el-select>
+      <!-- <div class="region">
+      </div> -->
     </div>
     <div class="echars">
       <div class="echartTitle">
-        <div class="block-title">耕地总量</div>
+        <div class="block-title">{{ gtype }}总量</div>
       </div>
-      <div class="content gdzl">
-        <div class="item">
+      <div class="content gdzlc">
+        <div class="item" v-for="zl in zllist[gtype]" :key="zl.name">
           <div class="icon">
             <div class="iicon"></div>
           </div>
           <div class="text">
-            <p>耕地保有量</p>
-            <span class="cvalue">{{ (sdata.a || 0).toFixed(2) }} km²</span>
-          </div>
-        </div>
-        <div class="item">
-          <div class="icon">
-            <div class="iicon"></div>
-          </div>
-          <div class="text">
-            <p>耕地保有目标</p>
-            <span class="cvalue">{{ (sdata.a || 0).toFixed(2) }} </span>
+            <p>{{ zl.name }}</p>
+            <span class="cvalue"
+              >{{ (sdata.a || 0).toFixed(2) }} {{ zl.unit }}</span
+            >
           </div>
         </div>
       </div>
-      <div class="content sdata">
+      <div class="content scontent" v-show="gtype == '耕地'">
         <div class="item" v-for="(sd, index) in sdlist" :key="index">
           <div class="text">
             <p>{{ sd.name }}</p>
@@ -54,27 +66,29 @@
     </div>
     <div class="echars">
       <div class="echartTitle">
-        <div class="block-title">变化情况</div>
-        对比年份
-        <div class="selectTab">
-          <el-select
-            v-model="tab"
-            placeholder="请选择"
-            :popper-append-to-body="false"
-            @change="Getxzxx()"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
+        <div class="block-title">{{ `${gtype}增减` }}变化情况</div>
+        <div class="titlesel" v-show="gtype == '耕地'">
+          对比年份
+          <div class="selectTab">
+            <el-select
+              v-model="tab"
+              placeholder="请选择"
+              :popper-append-to-body="false"
+              @change="Getxzxx()"
             >
-            </el-option>
-          </el-select>
+              <el-option
+                v-for="item in yearList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="usable">更多</div>
         </div>
-        更多
       </div>
-      <div class="content sdata">
+      <div class="content scontent" v-show="gtype == '耕地'">
         <div class="item" v-for="(bh, index) in bhlist" :key="index">
           <div class="text">
             <p>{{ bh.name }}</p>
@@ -83,16 +97,16 @@
           </div>
         </div>
       </div>
+      <div class="pietitle" v-show="gtype == '耕地'">历年变化情况</div>
       <bar class="pie_echart" ref="echartRef0"></bar>
     </div>
-    <div class="echars">
-      <div class="echartTitle">
-        <div class="block-title">试点投资</div>
-      </div>
+    <div class="echars gqgd">
       <Statistics
-        title="图斑分布情况"
+        :title="`各区${gtype}分布`"
         :cityList="cityList"
-        height="236"
+        :height="gtype == '耕地' ? 180 : 260"
+        :text="`占全市${gtype}`"
+        textunit="%"
       ></Statistics>
       <!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
     </div>
@@ -110,7 +124,30 @@ export default {
   props: {},
   data() {
     return {
+      year: "",
       region: "",
+      gtype: "耕地",
+      yearList: [],
+      typeList: [],
+      zllist: {
+        耕地: [
+          { name: "耕地保有量", prop: "", unit: "km²" },
+          { name: "耕地保有目标", prop: "", unit: "km²" },
+        ],
+        水田: [
+          { name: "水田现状", prop: "", unit: "km²" },
+          { name: "占耕地比", prop: "", unit: "%" },
+        ],
+        水浇地: [
+          { name: "水浇地现状", prop: "", unit: "km²" },
+          { name: "占耕地比", prop: "", unit: "%" },
+        ],
+        旱地: [
+          { name: "旱地现状", prop: "", unit: "km²" },
+          { name: "占耕地比", prop: "", unit: "%" },
+          ,
+        ],
+      },
       sdata: {},
       sdlist: [
         { name: "水田", prop: "试点面积", unit: "km²" },
@@ -122,11 +159,7 @@ export default {
         { name: "增加面积", prop: "整治面积", unit: "km²" },
         { name: "减少面积", prop: "村庄个数", unit: "km²" },
       ],
-      tab: "sd",
-      options: [
-        { name: "试点区域", value: "sd" },
-        { name: "整治区域", value: "zzqy" },
-      ],
+      tab: "2024",
       xzlist: [
         { name: "农用地面积", prop: "nydmk", unit: "公顷" },
         { name: "建设用地面积", prop: "jsydmj", unit: "公顷" },
@@ -138,8 +171,8 @@ export default {
       xzdata: {},
       tzdata: {},
       eData: {
-        xData: ["2020", "建设用地", "生态修复", "历史文化保护"],
-        yData: [[10, 10, 10, 10]],
+        xData: ["2020", "2021", "2022", "2023"],
+        yData: [[-10, 10, 10, 10]],
         legend: [""],
       },
       cityList: [
@@ -186,11 +219,22 @@ export default {
     bar,
     Statistics,
   },
-  mounted() {},
+  mounted() {
+    this.getYear();
+    this.typeList = [{ label: "耕地" }, ...legends];
+  },
   methods: {
     changeData(name, updata) {
       this[name] = updata;
     },
+    getYear() {
+      let date = new Date();
+      let startYear = date.getFullYear() - 4; //起始年份
+      let endYear = date.getFullYear(); //结束年份
+      for (var i = startYear; i <= endYear; i++) {
+        this.yearList.push({ value: i, label: i + "年" });
+      }
+    },
     regionChange(region) {
       this.region = region;
       this.getData();
@@ -199,10 +243,7 @@ export default {
       this.$emit("updateParent", "loading", true);
       this.Getzzxm();
       this.Getxzxx();
-      this.Getsdtz();
-      this.Getkjxx();
-      this.Getkjxx();
-      this.Getkjxx();
+
       this.Getkjxx();
     },
     async Getzzxm() {
@@ -231,18 +272,7 @@ export default {
       this.xzdata = res.data;
       this.$emit("updateParent", "loading", false);
     },
-    async Getsdtz() {
-      let { data } = await QueryOne({
-        jscType: "qytuzz_sdzl_sdtz",
-        id: this.region,
-      });
-      let czratio = data.jhtz ? (data.czjhtz / data.jhtz) * 100 : 0;
-      let sjratio = data.jhtz ? (data.shjhtz / data.jhtz) * 100 : 0;
-      this.tzdata = { ...data, czratio, sjratio };
-      const background = `linear-gradient(to right,#DFE15A ${czratio}%,#62ADED 0%)`;
-      this.$refs.tzRef.style.background = background;
-      this.$emit("updateParent", "loading", false);
-    },
+
     async Getkjxx() {
       let res = await QueryList({
         jscType: "qytuzz_sdzl_kjxx",
@@ -287,8 +317,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.sdgk {
+.gdzl {
   height: 100%;
+  .el-select {
+    padding: 0 10px;
+  }
+  .headerSelect {
+    width: 100%;
+    height: 26px;
+    //   background: #00ffff;
+    margin: 5px 0px;
+    display: flex;
+    justify-content: space-between;
+  }
   .content {
     width: 100%;
     height: 190px;
@@ -330,12 +371,15 @@ export default {
       }
     }
   }
-  .gdzl {
+  .gdzlc {
     height: 70px;
+    display: flex;
+    justify-content: space-between;
     .item {
-      width: 49%;
+      width: 48%;
+      height: 60px;
       padding-left: 20px;
-      background: #2f5b71;
+      background: rgba(104, 244, 251, 0.21568627); // #2f5b71;
       border-radius: 5px;
       .icon {
         width: 50px;
@@ -348,11 +392,12 @@ export default {
       }
     }
   }
-  .sdata {
-    height: 70px;
-    background: #2f5b71;
+  .scontent {
+    height: 60px;
+    background: rgba(104, 244, 251, 0.21568627); //#2f5b71;
     border-radius: 5px;
-    padding-top: 20px;
+    padding-top: 10px;
+    margin-top: 5px;
   }
 
   .echars {
@@ -361,15 +406,30 @@ export default {
     // overflow-y: auto;
     // overflow-x: hidden;
     .block-title {
-      width: calc(100% - 200px) !important;
+      width: calc(100% - 250px) !important;
+    }
+    .titlesel {
+      width: 250px;
+      display: flex;
     }
   }
   .echart {
     height: 200px !important;
   }
+  .pietitle {
+    position: relative;
+    width: 200px;
+    line-height: 26px;
+    text-align: center;
+    border: 1px solid #3f93f5;
+    border-top-right-radius: 10px;
+    margin: 10px 20%;
+    color: #3f93f5;
+  }
+
   .pie_echart {
     width: 400px;
-    height: 180px;
+    height: 140px;
   }
 }
 </style >