1

src/views/farmlandProtection/gdzl/index.vue

@@ -1,24 +1,61 @@
 <template>
   <div class="sdgk">
-    <div class="tdTitle">试点概况</div>
-    <div class="content sdata">
-      <div class="item" v-for="(sd, index) in sdlist" :key="index">
-        <div class="text">
-          <p>{{ sd.name }}</p>
-          <span class="cvalue">{{ (sdata[sd.prop] || 0).toFixed(2) }} </span>
-          <span class="unit">{{ sd.unit }}</span>
-        </div>
+    <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>
     <div class="echars">
       <div class="echartTitle">
-        <div class="block-title">整治项目</div>
+        <div class="block-title">耕地总量</div>
+      </div>
+      <div class="content gdzl">
+        <div class="item">
+          <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>
+          </div>
+        </div>
+      </div>
+      <div class="content sdata">
+        <div class="item" v-for="(sd, index) in sdlist" :key="index">
+          <div class="text">
+            <p>{{ sd.name }}</p>
+            <span class="cvalue">{{ (sdata[sd.prop] || 0).toFixed(2) }} </span>
+            <span class="unit">{{ sd.unit }}</span>
+          </div>
+        </div>
       </div>
-      <pie unit="个" class="pie_echart" ref="echartRef0"></pie>
     </div>
     <div class="echars">
       <div class="echartTitle">
-        <div class="block-title">现状信息</div>
+        <div class="block-title">变化情况</div>
+        对比年份
         <div class="selectTab">
           <el-select
             v-model="tab"
@@ -35,57 +72,36 @@
             </el-option>
           </el-select>
         </div>
+        更多
       </div>
-      <div class="content">
-        <div class="item" v-for="(sd, index) in xzlist" :key="index">
-          <div class="icon">
-            <div class="iicon" :class="sd.value"></div>
-          </div>
+      <div class="content sdata">
+        <div class="item" v-for="(bh, index) in bhlist" :key="index">
           <div class="text">
-            <p>{{ sd.name }}</p>
-            <span class="cvalue">{{ (xzdata[sd.prop] || 0).toFixed(2) }} </span>
-            <span class="unit">{{ sd.unit }}</span>
+            <p>{{ bh.name }}</p>
+            <span class="cvalue">{{ (sdata[bh.prop] || 0).toFixed(2) }} </span>
+            <span class="unit">{{ bh.unit }}</span>
           </div>
         </div>
       </div>
+      <bar class="pie_echart" ref="echartRef0"></bar>
     </div>
     <div class="echars">
       <div class="echartTitle">
         <div class="block-title">试点投资</div>
       </div>
-      <div class="content ztzc">
-        <div class="text">
-          <span>总投资</span>
-          <span class="cvalue">{{ (tzdata.jhtz || 0).toFixed(2) }} </span>
-          <span class="unit">万元</span>
-        </div>
-      </div>
-      <div class="tzdiv" ref="tzRef"></div>
-      <div class="content tzcontent">
-        <div class="item">
-          <div class="text">
-            <p>财政投资</p>
-            <span class="cvalue">{{ (tzdata.czjhtz || 0).toFixed(2) }} </span>
-            <span class="unit">万元</span>
-            <p>{{ (tzdata.czratio || 0).toFixed(2) }}%</p>
-          </div>
-        </div>
-        <div class="item"></div>
-        <div class="item">
-          <div class="text">
-            <p>社会投资</p>
-            <span class="cvalue">{{ (tzdata.shjhtz || 0).toFixed(2) }} </span>
-            <span class="unit">万元</span>
-            <p>{{ (tzdata.sjratio || 0).toFixed(2) }}%</p>
-          </div>
-        </div>
-      </div>
+      <Statistics
+        title="图斑分布情况"
+        :cityList="cityList"
+        height="236"
+      ></Statistics>
+      <!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
     </div>
   </div>
 </template>
 
 <script>
-import pie from "@/components/echartsTemplate/pie.vue";
+import bar from "@/components/echartsTemplate/bar.vue";
+import Statistics from "../components/statistics.vue";
 import { overview, district, reason } from "@/api/Idleland.js";
 import { QueryOne, QueryList } from "@/api/cockpitNew";
 import { legends } from "../config.js";
@@ -97,9 +113,14 @@ export default {
       region: "",
       sdata: {},
       sdlist: [
-        { name: "试点区域", prop: "试点面积", unit: "公顷" },
-        { name: "整治区域", prop: "整治面积", unit: "公顷" },
-        { name: "涉及村庄", prop: "村庄个数", unit: "个" },
+        { name: "水田", prop: "试点面积", unit: "km²" },
+        { name: "水浇地", prop: "整治面积", unit: "km²" },
+        { name: "旱地", prop: "村庄个数", unit: "km²" },
+      ],
+      bhlist: [
+        { name: "变化幅度", prop: "试点面积", unit: "%" },
+        { name: "增加面积", prop: "整治面积", unit: "km²" },
+        { name: "减少面积", prop: "村庄个数", unit: "km²" },
       ],
       tab: "sd",
       options: [
@@ -116,10 +137,54 @@ export default {
       ],
       xzdata: {},
       tzdata: {},
+      eData: {
+        xData: ["2020", "建设用地", "生态修复", "历史文化保护"],
+        yData: [[10, 10, 10, 10]],
+        legend: [""],
+      },
+      cityList: [
+        {
+          name: "天涯区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+        {
+          name: "崖州区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+        {
+          name: "海棠区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+        {
+          name: "吉阳区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+        {
+          name: "吉阳区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+        {
+          name: "吉阳区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+      ],
     };
   },
   components: {
-    pie,
+    bar,
+    Statistics,
   },
   mounted() {},
   methods: {
@@ -156,10 +221,7 @@ export default {
         res.value = res.xmsl;
         num += res.xmsl;
       });
-      this.setEchart(
-        { data, type: '"horizontal"', title: { text: "整治项目", num } },
-        0
-      );
+      this.setEchart(this.eData, 0);
     },
     async Getxzxx() {
       let res = await QueryOne({
@@ -230,6 +292,7 @@ export default {
   .content {
     width: 100%;
     height: 190px;
+    padding-top: 5px;
     .item {
       width: 32%;
       // height: 100px;
@@ -267,26 +330,38 @@ export default {
       }
     }
   }
-  .sdata {
-    height: 50px;
-  }
-  .ztzc {
-    height: 30px;
-    line-height: 30px;
-    font-size: 16px;
-    margin-top: 10px;
+  .gdzl {
+    height: 70px;
+    .item {
+      width: 49%;
+      padding-left: 20px;
+      background: #2f5b71;
+      border-radius: 5px;
+      .icon {
+        width: 50px;
+        display: inline-block;
+      }
+      .text {
+        display: inline-block;
+        width: calc(100% - 60px);
+        text-align: left;
+      }
+    }
   }
-  .tzcontent {
-    height: 100px;
+  .sdata {
+    height: 70px;
+    background: #2f5b71;
+    border-radius: 5px;
+    padding-top: 20px;
   }
 
-  .echartlist {
-    width: 100%;
-    height: calc(100% - 120px);
-    overflow-y: auto;
-    overflow-x: hidden;
+  .echars {
+    // width: 100%;
+    // height: calc(100% - 120px);
+    // overflow-y: auto;
+    // overflow-x: hidden;
     .block-title {
-      width: calc(100% - 130px) !important;
+      width: calc(100% - 200px) !important;
     }
   }
   .echart {
@@ -296,10 +371,5 @@ export default {
     width: 400px;
     height: 180px;
   }
-  .tzdiv {
-    height: 20px;
-    margin: 5px 20px;
-    // background: #62aded;
-  }
 }
-</style>
+</style >