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"
        @echartClickTitle="(name) => echartClickTitle(name)"
      ></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[sd.prop] || 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">
            {{ (jxyddata.zzqjsydmj - jxyddata.zzhjsydmj).toFixed(2) }}
          </p>
          <p>建设用地变化</p>
        </div>
        <div class="itemCon" style="width: 55%">
          <span>
            <span class="font_color">整治前建设用地</span>
            <span style="padding: 0 3px">{{ jxyddata.zzqjsydmj }}</span>
            公顷
          </span>
          <span>
            <span class="font_color">整治后建设用地</span>
            <span style="padding: 0 3px">{{ jxyddata.zzhjsydmj }} </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"
          style="max-width: 50%; min-width: 40%"
          ><span class="font_color">{{ item.name }}</span
          ><span style="padding: 0 3px; color: #ec808d; font-size: 14px">{{
            jxyddata[item.prop]
          }}</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"
              >{{ (jxyddata.jxyd_njxyd || 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"
                >{{ (jxyddata.clydph_cljsyd || 0).toFixed(2) }}</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"
                >{{ (jxyddata.clydph_cljsyd_xcy || 0).toFixed(2) }}</span
              >
              公顷</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import pie from "@/components/echartsTemplate/pie.vue";
import { QueryOne, QueryList } from "@/api/cockpitNew";
const color = [
  "#6172D3",
  "#F5A539",
  "#FED969",
  "#469AE3",
  "#F97A3C",
  "#2FD9F2",
  "#A9DB32",
  "#6151F1",
];
export default {
  props: {},
  data() {
    return {
      // loading: false,
      tab: 0,
      imgs: {
        loc: require("../../../../static/images/overview/icon_yrkkg.png"),
        zd1: require("../../../../static/images/overview/icon_yrkkg.png"),
      },
      orgnList: [
        { name: "新增耕地", prop: "xzgdmj", unit: "公顷" },
        { name: "新增永久基本农田", prop: "xzyjjbntmj", unit: "公顷" },
        { name: "提质改造", prop: "tzgzmj", unit: "公顷" },
        { name: "生态修复", prop: "stxfmj", unit: "公顷" },
        { name: "新增生态用地", prop: "xzstydmj", unit: "公顷" },
      ],
      sdata: {},
      jxyddata: {},
      cjfkList: [
        { name: "拟拆旧面积", prop: "zzqjsydmj", unit: "公顷" },
        { name: "复垦为耕地", prop: "zjfk_fkgd", unit: "公顷" },
        { name: "拆迁房屋", prop: "zjfk_cqfw", unit: "幢" },
        { name: "复垦为种植园地", prop: "zjfk_fkzzy", unit: "公顷" },
        { name: "动迁居民", prop: "zjfk_dqjm", unit: "户" },
        { name: "复垦为林草地", prop: "zjfk_fklcd", unit: "公顷" },
        { name: "动迁人口", prop: "zjfk_dqrk", unit: "人" },
        { name: "复垦为其他农用地", prop: "zjfk_fkqtnyd", unit: "公顷" },
      ],
      myChart: null,
    };
  },
  components: {
    pie,
  },
  mounted() {
    // this.initEcharts();
  },
  methods: {
    echartClickTitle(name) {
      // console.log(name,'-------------------------');
    },
    changeData(name, updata) {
      this[name] = updata;
    },
    regionChange(region) {
      this.region = region;
      this.getData();
    },
    getData() {
      // this.loading = true;
      this.Getzzlx();
      this.GetOverview();
      this.GetjxydList();
      this.Getjxyd();
    },

    async Getzzlx() {
      let { data } = await QueryList({
        jscType: "qytuzz_sdzl_sdmb_zzlx",
        id: this.region,
      });
      let num = 0;
      data.forEach((res) => {
        res.name = res.key;
        res.value = res.value;
        num += res.value;
      });
      this.setEchart(
        { data, type: '"horizontal"', title: { text: "整治总规模", num } },
        0
      );
    },
    GetOverview() {
      QueryList({
        jscType: "qytuzz_sdzl_sdmb_zzxx",
        id: this.region,
      }).then((res) => {
        this.sdata = res.data.length ? res.data[0] : {};
        // this.loading = false;
      });
    },
    Getjxyd() {
      QueryOne({
        jscType: "qytuzz_sdzl_ydzlqk_jxydxq",
        id: this.region,
      }).then((res) => {
        this.jxyddata = res.data || {};
        // this.loading = false;
      });
    },
    GetjxydList() {
      QueryList({
        jscType: "qytuzz_sdzl_ydzlqk_jxyd",
        id: this.region,
      }).then((res) => {
        res.data.forEach((yd, index) => {
          yd.name = yd.key;
          yd.label = { color: color[index] };
        });
        this.initEcharts({
          toolTip: true,
          title: "用地占比",
          unit: "公顷",
          data: res.data,
        });
        // this.loading = false;
      });
    },
    changeCharts(e) {},
    setEchart(data, id) {
      this.$nextTick(() => {
        this.$refs[`echartRef${id}`].setOptions(data);
      });
    },
    initEcharts(payload) {
      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 = [];

      // 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: true,
          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: "",
            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: [],
          },
        ],
      };
      option.tooltip = payload.toolTip || true;
      option.series[0].name = payload.title;
      option.series[0].label.formatter = `{b}\n{a|{c}${payload.unit}}`;
      option.series[0].data = payload.data;

      this.myChart.setOption(option);
    },
  },
  watch: {},
};
</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;
    margin-top: 10px;
    .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: 85px;
    // 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>