新建用地与存量盘活

src/views/LandConsolidation/components/organize.vue

@@ -4,15 +4,6 @@
     <div class="echars">
       <pie unit="亩" class="pie_echart" ref="echartRef0"></pie>
     </div>
-    <!-- <div class="content">
-      <div class="item" v-for="(sd, index) in orgnList" :key="index">
-        <div class="text">
-          <p>{{ sd.name }}</p>
-          <span class="cvalue">{{ (sdata.area || 0).toFixed(2) }} </span>
-          <span class="unit">{{ sd.unit }}</span>
-        </div>
-      </div>
-    </div> -->
     <div class="content">
       <div class="item" v-for="(sd, index) in orgnList" :key="index">
         <div class="text">
@@ -48,12 +39,77 @@
       <div class="echartTitle">
         <div class="block-title">拆旧复垦</div>
       </div>
+      <div class="cjfkList itemCon">
+        <span v-for="(item, i) in cjfkList" :key="i"
+          ><span class="font_color">{{ item.name }}</span
+          ><span style="padding: 0 3px">{{ item.area }}</span>
+          {{ item.unit }}</span
+        >
+      </div>
+    </div>
+
+    <div class="echars">
+      <div class="echartTitle">
+        <div class="block-title">建新用地</div>
+      </div>
+      <div class="xjydCon content">
+        <div class="item">
+          <div class="icon">
+            <div class="iicon"></div>
+          </div>
+          <div class="text">
+            <p>{{ "拟建新面积" }}</p>
+            <span class="cvalue">{{ (4.38 || 0).toFixed(2) }} </span>
+            <span class="unit">{{ "公顷" }}</span>
+          </div>
+        </div>
+        <div class="echars2">
+          <div ref="second_pie" id="second_pie"></div>
+        </div>
+      </div>
     </div>
-    <div class="cjfkList itemCon">
-      <span v-for="(item,i) in cjfkList" :key="i"
-        ><span class="font_color">{{item.name}}</span
-        ><span style="padding: 0 3px">{{ item.area }}</span> {{ item.unit }}</span
-      >
+    <div class="echars">
+      <div class="echartTitle">
+        <div class="block-title">存量盘活</div>
+      </div>
+      <div class="divrow">
+        <div class="divCol">
+          <div class="divImg">
+            <img
+              src="/static/images/overview/icon_yrkkg.png"
+              style="height: 2.5rem; width: 2.5rem"
+            />
+          </div>
+          <div class="divText">
+            <span style="color: #fff">存量建设用地盘活</span>
+            <span
+              ><span
+                style="color: #ec808d; font-size: 18px; margin-right: 3px"
+                >{{ 0 }}</span
+              >
+              公顷
+            </span>
+          </div>
+        </div>
+        <div class="divCol">
+          <div class="divImg">
+            <img
+              src="/static/images/overview/icon_yrkkg.png"
+              style="height: 2.5rem; width: 2.5rem"
+            />
+          </div>
+          <div class="divText">
+            <span style="color: #fff">新产业新业态发展</span>
+            <span
+              ><span
+                style="color: #ec808d; font-size: 18px; margin-right: 3px"
+                >{{ 0 }}</span
+              >
+              公顷</span
+            >
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -65,8 +121,12 @@ export default {
   props: {},
   data() {
     return {
-      sdata: { suspected: {}, confirm: {}, disposal: {} },
       tab: 0,
+      imgs: {
+        loc: require("../../../../static/images/overview/icon_yrkkg.png"),
+
+        zd1: require("../../../../static/images/overview/icon_yrkkg.png"),
+      },
       orgnList: [
         { name: "新增耕地", prop: "suspected", unit: "公顷" },
         { name: "新增永久基本农田", prop: "confirm", unit: "公顷" },
@@ -74,7 +134,7 @@ export default {
         { name: "生态修复", prop: "disposal", unit: "公顷" },
         { name: "新增生态用地", prop: "disposal", unit: "公顷" },
       ],
-      sdata:{},
+      sdata: {},
       cjfkList: [
         { name: "拟拆旧面积", area: "10.05", unit: "公顷" },
         { name: "复垦为耕地", area: "0", unit: "公顷" },
@@ -85,6 +145,7 @@ export default {
         { name: "动迁人口", area: "3.49", unit: "人" },
         { name: "复垦为其他农用地", area: "315", unit: "公顷" },
       ],
+      myChart: null,
     };
   },
   components: {
@@ -92,6 +153,7 @@ export default {
   },
   mounted() {
     this.getData();
+    this.initEcharts()
   },
   methods: {
     changeData(name, updata) {
@@ -123,7 +185,6 @@ export default {
         let redPercent = 60;
         let bluePercent = 40;
         const background = `linear-gradient(to right,#DFE15A ${redPercent}%,#62ADED   ${bluePercent}%)`;
-        //   this.$refs.tzRef.style.background = background;
         this.setEchart({ data: res.data, type: '"horizontal"' }, 0);
         this.$emit("updateParent", "loading", false);
       });
@@ -134,6 +195,129 @@ export default {
         this.$refs[`echartRef${id}`].setOptions(data);
       });
     },
+    initEcharts() {
+        this.myChart = echarts.init(this.$refs.second_pie);
+      const payload = {
+        id: "left-center-1",
+        title: "年龄占比",
+        toolTip: true,
+        data: {
+          total: "4.38",
+          data: ["0.59", "0", "3.02", "0.55", "0.22"],
+          x: ["占用草地", "占用耕地", "占用林地", "占用园地", "占用其他农用地"],
+        },
+      };
+
+      let data = [];
+
+      const color = [
+        "#6172D3",
+        "#F5A539",
+        "#FED969",
+        "#469AE3",
+        "#F97A3C",
+        "#2FD9F2",
+        "#A9DB32",
+        "#6151F1",
+      ];
+      payload.data.x.forEach((item, index) => {
+        data.push({
+          value: payload.data.data[index],
+          name: item,
+          label: { color: color[index] },
+        });
+      });
+
+      const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
+      let countdata = payload.data.data.reduce((a, b) => Number(a) + Number(b));
+      let option = {
+        backgroundColor: 'transparent',
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
+          containLabel: true,
+        },
+        tooltip: {
+          show: tooltip,
+          backgroundColor: "rgba(9, 30, 60, 0.6)",
+          extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
+          borderWidth: 0,
+          confine: false,
+          appendToBody: true,
+          textStyle: {
+            color: "#fff",
+            fontSize: 10,
+          },
+          // 轴触发提示才有效
+          axisPointer: {
+            type: "shadow",
+          },
+          shadowStyle: {
+            color: "rgba(157, 168, 245, 0.1)",
+          },
+          formatter: function (parms) {
+            var str =
+              parms.seriesName +
+              "</br>" +
+              parms.marker +
+              parms.name +
+              " </br>" +
+              "人数：" +
+              parms.data.value +
+              "</br>" +
+              "占比：" +
+              parms.percent +
+              "%";
+            return str;
+          },
+        },
+        series: [
+        {
+            name: payload.title,
+            type: 'pie',
+            radius: ['55%', '75%'],
+            minAngle: 8,
+            itemStyle: {
+                color(params) {
+                    return color[params.dataIndex];
+                },
+            },
+            labelLine: {
+                // length2: 55,
+                length: 20,
+                length2: 50,
+                lineStyle: {
+                    width: 0,
+                },
+            },
+            label: {
+                position: 'outer',
+                alignTo: 'none',
+                bleedMargin: 1,
+                formatter: ' {b}\n{a|{c}人}',
+                padding: -65,
+                rich: {
+                    a: {
+                        padding: [8, 0, 5, 0],
+                        color: '#fff',
+                        lineHeight: 20,
+                         fontSize: 12,
+                        
+                    },
+                    b: {
+                        padding: [8, 0, 5, 0],
+                        lineHeight: 20,
+                    },
+                },
+            },
+            data,
+        },
+    ],
+      };
+      this.myChart.setOption(option);
+    },
   },
   watch: {
     region(newValue) {
@@ -144,17 +328,33 @@ export default {
 </script>
   
   <style lang="scss" scoped>
+.echars {
+  margin-bottom: 0px;
+}
 .OrganizeCon {
   height: 100%;
   padding: 1rem 10px 1rem 1rem;
   .content {
     width: 100%;
-    height: 100px;
+    height: 82px;
     .item {
       width: 32%;
       // height: 100px;
       display: inline-block;
       position: relative;
+      .icon {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .iicon {
+        background: no-repeat 50%;
+        background-image: url("/static/images/overview/icon_yrkkg.png");
+        width: 45px;
+        height: 45px;
+        flex: 1;
+      }
     }
     .text {
       display: inline-block;
@@ -185,10 +385,15 @@ export default {
     }
   }
   .echart {
-    height: 160px !important;
+    height: 130px !important;
   }
   .pie_echart {
-    height: 140px;
+    height: 130px;
+    width: 400px;
+  }
+  #second_pie{
+    height: 130px;
+    width: 300px;
   }
   .tzdiv {
     height: 20px;
@@ -220,6 +425,7 @@ export default {
     justify-content: space-between;
     flex-wrap: wrap;
     align-items: center;
+    margin-top: 5px;
     span {
       padding: 0 0.4rem;
       display: inline-block;
@@ -234,6 +440,53 @@ export default {
       color: white;
     }
   }
+  .divrow {
+    height: 50px;
+    // background-color: #0f7bc875;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+
+    .divCol {
+      // background-color: #cddeeb5a;
+      width: 49%;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+
+      .divImg {
+        width: 25%;
+        height: 40px;
+
+        img {
+          height: 2.5rem;
+          width: 2.5rem;
+        }
+      }
+
+      .divText {
+        width: 75%;
+        // padding-left: 0.5rem;
+        display: flex;
+        flex-direction: column;
+
+        span {
+          height: 20px;
+          // background: rgba(255, 0, 0, 0.258);
+          height: 20px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+  .xjydCon {
+    height: 130px;
+    // background-color: #ec808c7b;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    top: 19px;
+  }
   .CommonList {
   }
 }