real3d-portalsite/src/views/LandConsolidation/components/organize.vue

<template>
  <div class="OrganizeCon">
    <div class="tdTitle">试点目标</div>
    <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="echars">
      <div class="echartTitle">
        <div class="block-title">建设用地整理情况</div>
      </div>
      <div class="JSContent">
        <div class="jsitem">
          <p class="tvalue">+0.72</p>
          <p>建设用地变化</p>
        </div>
        <div class="itemCon" style="width: 55%">
          <span
            ><span class="font_color">整治前建设用地</span
            ><span style="padding: 0 3px">{{ 20.88 }}</span> 公顷</span
          >
          <span
            ><span class="font_color">整治后建设用地</span
            ><span style="padding: 0 3px">{{ 20.88 }}</span
            >公顷</span
          >
        </div>
      </div>
    </div>
    <div class="cjfkCon echars">
      <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;color: #ec808d;font-size: 14px;">{{ 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="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>
  
  <script>
import pie from "@/components/echartsTemplate/pie.vue";
import { overview, district, reason } from "@/api/Idleland.js";
export default {
  props: {},
  data() {
    return {
      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: "公顷" },
        { name: "提质改造", prop: "disposal", unit: "公顷" },
        { name: "生态修复", prop: "disposal", unit: "公顷" },
        { name: "新增生态用地", prop: "disposal", unit: "公顷" },
      ],
      sdata: {},
      cjfkList: [
        { name: "拟拆旧面积", area: "10.05", unit: "公顷" },
        { name: "复垦为耕地", area: "0", unit: "公顷" },
        { name: "拆迁房屋", area: "196", unit: "幢" },
        { name: "复垦为种植园地", area: "196", unit: "公顷" },
        { name: "动迁居民", area: "0.001", unit: "户" },
        { name: "复垦为林草地", area: "74", unit: "公顷" },
        { name: "动迁人口", area: "3.49", unit: "人" },
        { name: "复垦为其他农用地", area: "315", unit: "公顷" },
      ],
      myChart: null,
    };
  },
  components: {
    pie,
  },
  mounted() {
    this.getData();
    this.initEcharts()
  },
  methods: {
    changeData(name, updata) {
      this[name] = updata;
    },
    regionChange(region) {
      this.region = region;
      this.getData();
    },
    getData() {
      this.$emit("updateParent", "loading", true);
      this.params = { districtCode: this.region };
      this.GetOverview();

      this.GetSumList();
    },
    GetOverview() {
      overview(this.params).then((res) => {
        this.sdata = res.data || {};
        this.$emit("updateParent", "loading", false);
      });
    },
    GetSumList() {
      reason(this.params).then((res) => {
        res.data.map((a) => {
          a.name = a.reason;
          a.value = a.area.toFixed(2);
        });
        let redPercent = 60;
        let bluePercent = 40;
        const background = `linear-gradient(to right,#DFE15A ${redPercent}%,#62ADED   ${bluePercent}%)`;
        this.setEchart({ data: res.data, type: '"horizontal"' }, 0);
        this.$emit("updateParent", "loading", false);
      });
    },
    changeCharts(e) {},
    setEchart(data, id) {
      this.$nextTick(() => {
        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) {
      console.log(newValue, "---");
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.echars {
  margin-bottom: 0px;
}
.OrganizeCon {
  height: 100%;
  padding: 1rem 10px 1rem 1rem;
  .content {
    width: 100%;
    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;
      // border: #00FFFF 1px solid;
      width: 100%;
      margin-bottom: 4px;
      text-align: center;
      margin-left: 0.3rem;
      .cvalue {
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        font-style: normal;
        color: #68f4fb;
      }
      .unit {
        color: #fff;
      }
    }
  }

  .echartlist {
    width: 100%;
    height: calc(100% - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    .block-title {
      width: calc(100% - 130px) !important;
    }
  }
  .echart {
    height: 130px !important;
  }
  .pie_echart {
    height: 130px;
    width: 400px;
  }
  #second_pie{
    height: 130px;
    width: 300px;
  }
  .tzdiv {
    height: 20px;
    margin: 5px 20px;
  }
  .JSContent {
    height: 62px;
    background: rgba(100, 218, 255, 0.1);
    display: flex;
    justify-content: space-between;

    .jsitem {
      width: 40%;
      text-align: center;
      font-weight: 400;
      font-size: 13px;
      line-height: 1;
      .tvalue {
        height: 36px;
        font-weight: 700;
        color: #ec808d;
        font-size: 18px;
        line-height: 36px;
      }
    }
  }
  .itemCon {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
    span {
      padding: 0 0.4rem;
      display: inline-block;
      // background: rgba(100, 218, 255, 0.1);
      // border-radius: 2px 14px 2px 14px;
      color: #64daff;
      font-size: 13px;
    }

    .font_color {
      // width: 100px;
      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 {
  }
}
</style>