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

<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"
            >{{
              index == 2
                ? sdata[sd.prop] || 0
                : (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>
      <pie unit="个" class="pie_echart" ref="echartRef0"></pie>
      <div class="xm" @click="gozzxm"></div>
    </div>
    <div class="echars">
      <div class="echartTitle">
        <div class="block-title">现状信息</div>
        <div class="selectTab">
          <el-select
            v-model="tab"
            placeholder="请选择"
            :popper-append-to-body="false"
            @change="Getxzxx()"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </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="text">
            <p>{{ sd.name }}</p>
            <span class="cvalue">{{ (xzdata[sd.prop] || 0).toFixed(2) }} </span>
            <span class="unit">{{ sd.unit }}</span>
          </div>
        </div>
      </div>
    </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>
    </div>
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";
import { overview, district, reason } from "@/api/Idleland.js";
import { QueryOne, QueryList } from "@/api/cockpitNew";
import { legends } from "./config.js";
import { loadGeoJSON } from "@/utils/MapHelper/help.js";
let geoSources = {};
export default {
  props: {},
  data() {
    return {
      region: "",
      sdata: {},
      sdlist: [
        { name: "试点区域", prop: "试点面积", unit: "公顷" },
        { name: "整治区域", prop: "整治面积", unit: "公顷" },
        { name: "涉及村庄", prop: "村庄个数", unit: "个" },
      ],
      tab: "sd",
      options: [
        { name: "试点区域", value: "sd" },
        { name: "整治区域", value: "zzqy" },
      ],
      xzlist: [
        { name: "农用地面积", prop: "nydmk", unit: "公顷" },
        { name: "建设用地面积", prop: "jsydmj", unit: "公顷" },
        { name: "未利用地面积", prop: "wlytmj", unit: "公顷" },
        { name: "耕地面积", prop: "gd", unit: "公顷" },
        { name: "永久基本农田", prop: "yjjbnt", unit: "公顷" },
        { name: "生态红线划定", prop: "sthxhdmj", unit: "公顷" },
      ],
      xzdata: {},
      tzdata: {},
    };
  },
  components: {
    pie,
  },
  mounted() {},
  methods: {
    changeData(name, updata) {
      this[name] = updata;
    },
    gozzxm() {
      this.$emit("gozzxm");
    },
    regionChange(region) {
      this.region = region;
      this.getData();
    },
    getData() {
      this.$emit("updateParent", "loading", true);
      this.Getzzxm();
      this.Getxzxx();
      this.Getsdtz();
      this.Getkjxx();
      // this.Getkjxx();
      // this.Getkjxx();
      // this.Getkjxx();
    },
    async Getzzxm() {
      let sdres = await QueryOne({
        jscType: "qytuzz_sdzl_sdqk",
        id: this.region,
      });
      this.sdata = sdres.data;
      let { data } = await QueryList({
        jscType: "jsc_stxf_ywfl_tdzz",
        id: this.region,
      });
      let num = 0;
      data.forEach((res) => {
        res.name = res.zzlx;
        res.value = res.xmsl;
        num += res.xmsl;
      });
      this.setEchart(
        { data, type: '"horizontal"', title: { text: "整治项目", num } },
        0
      );
    },
    async Getxzxx() {
      let res = await QueryOne({
        jscType: `qytuzz_sdzl_xzxx_${this.tab}`,
        id: this.region,
      });
      this.xzdata = res.data;
      this.$emit("updateParent", "loading", false);
    },
    async Getsdtz() {
      let { data } = await QueryOne({
        jscType: "qytuzz_sdzl_sdtz",
        id: this.region,
      });
      let czratio = data.jhtz ? (data.czjhtz / data.jhtz) * 100 : 0;
      let sjratio = data.jhtz ? (data.shjhtz / data.jhtz) * 100 : 0;
      this.tzdata = { ...data, czratio, sjratio };
      const background = `linear-gradient(to right,#DFE15A ${czratio}%,#62ADED 0%)`;
      this.$refs.tzRef.style.background = background;
      this.$emit("updateParent", "loading", false);
    },
    async Getkjxx() {
      let jxres = await QueryList({
        jscType: "qytuzz_sdzl_kjxx_jx",
        id: this.region,
      });
      if (jxres.data && jxres.data.length)
        loadGeoJSON(jxres.data[0].geom, "#ffffff", { isfly: true }, (data) => {
          // geoSources[ri] = data;
          data.name = "sdqy";
          data.show = false;
        });
      let res = await QueryList({
        jscType: "qytuzz_sdzl_kjxx",
        id: this.region,
      });
      this.active_tableData(res.data);
    },
    active_tableData(newVal) {
      newVal.forEach((res, ri) => {
        let color = legends[res.type].color;
        if (res.geom)
          loadGeoJSON(
            res.geom,
            color,
            {
              isfly: false,
              name: res.name,
              lab_max: res.type ? 1000 : 100000,
            },
            (data) => {
              geoSources[ri] = data;
              data.name = res.type == 0 ? "sdqy" : "zzqy";
              // data.show = false;
              // data.entities.values.forEach((entity) => {
              //   entity.properties = { type: "图斑上图", id: res.id };
              // });
            }
          );
      });
    },
    sourcesshow(isshow) {
      Object.keys(geoSources).forEach((name) => {
        console.log(name, geoSources[name]);
        geoSources[name].show = isshow;
      });
    },
    reset() {
      // if (!window.viewer) return;
      // viewer.entities.removeAll();
      // viewer.dataSources.removeAll();
      // viewer.dataSources._dataSources.forEach((das) => {
      //   if (das.name == "LandConsolidation") {viewer.dataSources.remove(das);}
      // });
    },
    changeCharts(e) {},
    setEchart(data, id) {
      this.$nextTick(() => {
        this.$refs[`echartRef${id}`].setOptions(data);
      });
    },
  },
  watch: {
    region(newValue) {
      console.log(newValue, "---");
    },
  },
};
</script>

<style lang="scss" scoped>
.sdgk {
  height: 100%;
  .content {
    width: 100%;
    height: 190px;
    .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;
      }
    }
  }
  .sdata {
    height: 50px;
  }
  .ztzc {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-top: 10px;
  }
  .tzcontent {
    height: 100px;
  }

  .echartlist {
    width: 100%;
    height: calc(100% - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    .block-title {
      width: calc(100% - 130px) !important;
    }
  }
  .echart {
    height: 200px !important;
  }
  .echars {
    position: relative;
  }
  .pie_echart {
    width: 400px;
    height: 180px;
  }
  .xm {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 18%;
    top: 50%;
    cursor: pointer;
    z-index: 100;
  }
  .tzdiv {
    height: 20px;
    margin: 5px 20px;
    // background: #62aded;
  }
}
</style>