real3d-portalsite/src/views/Idleland/components/tjzl.vue

<template>
  <div class="thzl">
    <div class="content">
      <div class="item" v-for="(sd, index) in sdlist" :key="index">
        <div class="icon">
          <div class="iicon" :class="sd.value">{{ sd.name }}</div>
        </div>
        <div class="text">
          <p>土地面积（亩）</p>
          <span>{{ (sdata[sd.prop].area || 0).toFixed(2) }} </span>
          <p>宗地数（宗）</p>
          <span>{{ sdata[sd.prop].count || 0 }} </span>
        </div>
      </div>
    </div>
    <div class="echartlist">
      <div class="echars">
        <ratio class="ratio_echart" ref="echartRef3"></ratio>
        <ratio class="ratio_echart" ref="echartRef4"></ratio>
      </div>
      <div class="echars" v-show="region == '4602'">
        <div class="block-title">各区县闲置情况</div>
        <barAndLine class="echart" ref="echartRef1"></barAndLine>
      </div>
      <div class="echars">
        <div class="block-title">闲置原因</div>
        <pie unit="亩" class="pie_echart" ref="echartRef2"></pie>
      </div>
    </div>
    <div class="tip">
      提示:本页面土地闲置率和闲置处置率只统计2022年-2024年数据
    </div>
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";
import ratio from "@/components/echartsTemplate/ratio.vue";
import barAndLine from "@/views/cockpit/common/ThreeStackedBarAndLine.vue";
import { overview, district, reason } from "@/api/Idleland.js";
export default {
  props: {},
  data() {
    return {
      sdata: { suspected: {}, confirm: {}, disposal: {} },
      sdlist: [
        { name: "疑", prop: "suspected" },
        { name: "闲", prop: "confirm" },
        { name: "处", prop: "disposal" },
      ],
      jdData: {
        legend_data: ["认定闲置土地", "已处置闲置土地", "闲置率", "处置率"],
        x_data: [],
        legendmap: [
          { type: "bar" },
          { type: "bar" },
          { type: "line", color: "#D9001B" },
          { type: "line" },
        ],
        yAxis: [{ name: "土地面积（亩）" }, { name: "比率（%）" }],
        params: {},
        region: "",
      },
    };
  },
  components: {
    pie,
    ratio,
    barAndLine,
  },
  mounted() {
    this.getData();
  },
  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,
        startTime: store.state.cockpit_date[0],
        endTime: store.state.cockpit_date[1],
      };
      this.GetOverview();
      if (this.region == "4602") this.GetDistrict();
      this.GetSumList();
    },
    GetOverview() {
      overview(this.params).then((res) => {
        this.sdata = res.data || {};
        let xz = (res.data.idleRate * 100).toFixed(2);
        let cz = (res.data.disposalRate * 100).toFixed(2);
        this.setEchart({ name: "土地闲置率", ratio: xz }, 3);
        this.setEchart({ name: "闲置处置率", ratio: cz }, 4);
        this.$emit("updateParent", "loading", false);
      });
    },
    GetDistrict() {
      this.jdData.x_data = [];
      this.jdData.result = [[], [], [], []];
      district(this.params).then((res) => {
        res.data.forEach((jdData) => {
          this.jdData.x_data.push(jdData.districtName);
          this.jdData.result[0].push(jdData.confirmAre);
          this.jdData.result[1].push(jdData.disposalArea);
          this.jdData.result[2].push((jdData.idleRate * 100).toFixed(2));
          this.jdData.result[3].push((jdData.disposalRate * 100).toFixed(2));
        });
        this.setEchart(this.jdData, 1);
        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);
        });
        this.setEchart({ data: res.data, type: '"horizontal"' }, 2);
        this.$emit("updateParent", "loading", false);
      });
    },
    setEchart(data, id) {
      this.$nextTick(() => {
        this.$refs[`echartRef${id}`].setOptions(data);
      });
    },
  },
  watch: {
    region(newValue) {
      console.log(newValue, "---");
    },
  },
};
</script>

<style lang="scss" scoped>
.thzl {
  height: 100%;
  .content {
    width: 100%;
    height: 140px;
    .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;
        margin: 0px 40px;
        // flex: 1;

        text-align: center;
        line-height: 45px;
        font-size: 20px;
        color: #68f4fb;
        border: 1px solid #4682b4;
        // rgba(0, 93, 207, 0.8)
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(70, 130, 180, 0.8)
        );
        border-radius: 50%;
      }
      .confirm {
        // background-image: url("/static/images/overview/icon_yrkkg.png");
        color: #62aded;
      }
      .disposal {
        background-image: url("/static/images/overview/icon_yrkkg.png");
        color: #dfe15a;
      }
      .text {
        display: inline-block;
        // border: #00FFFF 1px solid;
        width: 100%;
        margin-bottom: 4px;
        text-align: center;
        margin-left: 0.3rem;
        span {
          font-family: "Arial Negreta", "Arial Normal", "Arial";
          font-weight: 700;
          font-style: normal;
          color: #68f4fb;
        }
      }
    }
  }
  .echartlist {
    width: 100%;
    height: calc(100% - 165px);
    overflow-y: auto;
    overflow-x: hidden;
    .ratio_echart {
      width: 180px;
      height: 90px;
      display: inline-block;
    }
    .echart {
      height: 200px !important;
    }
    .pie_echart {
      height: 180px;
    }
  }
  .tip {
    color: #9b9b9b;
  }
}
</style>