real3d-portalsite/src/views/farmlandProtection/components/jclxqk.vue

<template>
  <div>
    <div class="headerSelect">
      <el-select
        v-model="yearsVal"
        placeholder="请选择"
        @change="yearsChange"
        clearable
      >
        <el-option
          v-for="item in yearsOpt"
          :key="item.quarter"
          :label="item.quarter"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-cascader
        :show-all-levels="false"
        :options="xzqTreeData"
        placeholder="行政区"
        @change="regionChange"
        :props="{ checkStrictly: true, expandTrigger: 'hover' }"
        clearable
        v-model="region"
      ></el-cascader>
      <el-select
        v-model="monitorVal"
        placeholder="请选择"
        @change="typeChange"
        clearable
      >
        <el-option
          v-for="item in monitorOpt"
          :key="item.dictCode"
          :label="item.dictValue"
          :value="item.dictCode"
        >
        </el-option>
      </el-select>
    </div>
    <div class="divrow">
      <div class="divCol">
        <div class="divImg">
          <img
            src="/static/images/overview/icon_yrkkg.png"
            style="height: 3.1rem; width: 3.1rem"
          />
        </div>
        <div class="divText">
          <div>
            <span style="color: #fff">监测图斑数</span>
          </div>
          <div>
            <span class="numberColor">{{ sdata.jcgs }}个</span>
          </div>
        </div>
      </div>
      <div class="divCol">
        <div class="divImg">
          <img
            src="/static/images/overview/icon_yrkkg.png"
            style="height: 3.1rem; width: 3.1rem"
          />
        </div>
        <div class="divText">
          <div>
            <span style="color: #fff">监测面积</span>
          </div>
          <div>
            <span class="numberColor">{{ sdata.jcmj }}km²</span>
          </div>
        </div>
      </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="true"
            @change="GetInfo()"
          >
            <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="echars2">
          <div ref="echars_pie" id="echars_pie"></div>
        </div>
      </div>
    </div>
    <Statistics
      title="图斑分布情况"
      :cityList="cityList"
      height="236"
    ></Statistics>
  </div>
</template>

<script>
import Statistics from "./statistics";
import { GetXzqhTree } from "@/api/map";
import { QueryOne, QueryList } from "@/api/cockpitNew";
import { GetDateList, CodeList, JscQueryList } from "@/api/ghss/jctb.js";
export default {
  components: {
    Statistics,
  },
  data() {
    return {
      region: "4602",
      xzqTreeData: [], //申请范围
      tab: 1,
      options: [
        { name: "图斑数", value: 1 },
        { name: "监测面积", value: 2 },
      ],
      sdata: {},
      myChart: null,
      cityList: [],
      yearsOpt: [], //检测图斑时间季度
      monitorOpt: [
        {
          value: "全部监测类型",
          label: "全部监测类型",
        },
        {
          value: "新增建筑物",
          label: "新增建筑物",
        },
        {
          value: "新增耕地",
          label: "新增耕地",
        },
      ],
      monitorVal: "",
      yearsVal: "",
      val0: "2024-02-17 00:00:00",
      val1: "2024-12-31 23:59:59",
      val2: "",
    };
  },
  computed: {},
  mounted() {
    this.getXzqTreeData();
    this.getData();
  },
  methods: {
    regionChange(region) {
      if (region.length && region.length > 1) {
        this.region = region[1];
      } else {
        this.region = region[0];
      }
      this.getData();
    },
    typeChange(val) {
      this.val2 = val;
      this.getzl();
    },
    //年份季度改变
    yearsChange(val) {
      if (val) {
        val = JSON.parse(JSON.stringify(val));
        this.val0 = val.startTime;
        this.val1 = val.endTime;
        this.yearsVal = val.quarter;
      } else {
        this.val0 = "2024-02-17 00:00:00";
        this.val1 = "2024-12-31 23:59:59";
      }
      // this.getzl();
      // this.GetCityList();
      // this.initEcharts();
      this.getData();
    },
    getXzqTreeData() {
      GetXzqhTree().then((res) => {
        if (res.data.length > 0) {
          const list = res.data[0].children.filter((item) => {
            return item.label == "三亚市";
          });
          if (list.length > 0) {
            list[0].value = "4602";
            this.xzqTreeData = list[0];
          } else this.xzqTreeData = res.data;
        }
      });

      GetDateList().then((res) => {
        this.yearsOpt = res.data;
      });
      //检测类型分类
      CodeList({
        dictType: "卫片执法后地类分类标准‌",
        pageNum: 1,
        pageSize: 999,
      }).then((res) => {
        if (res.code == 200) {
          this.monitorOpt = res.rows;
        }
      });
    },
    getData() {
      this.getzl();
      this.GetCityList();
      this.initEcharts();
    },
    async getzl() {
      let sdres = await QueryOne({
        jscType: "t_gdbh_jctb_tbzl",
        id: this.region,
        val0: this.val0,
        val1: this.val1,
        val2: this.val2,
      });
      this.sdata = sdres.data;
    },
    async GetCityList() {
      this.cityList = [];
      let flres = await QueryList({
        jscType: "t_gdbh_jctb_qxfl",
        id: this.region,
        val0: this.val0,
        val1: this.val1,
      });
      flres.data.forEach((fl) => {
        this.cityList.push({
          name: fl.xzqmc,
          number: fl.jcgs,
          area: fl.jcmj,
          unit: "km²",
        });
      });
    },
    async initEcharts() {
      this.myChart = echarts.init(this.$refs.echars_pie);
      let jclxres = await JscQueryList({
        jscType: "t_gdbh_jctb_jclx",
        id: this.region,
        val0: this.val0,
        val1: this.val1,
      });
      var names = [];
      var values = [];
      if (jclxres.data.length) {
        jclxres.data.forEach((item) => {
          names.push(item.dict_value);
          values.push(item.jcmj);
        });
      }
      let option = {
        // backgroundColor: "#041139",
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        grid: {
          top: 10,
          left: 30,
          right: 20,
          bottom: 60,
        },
        xAxis: [
          {
            data: names,
            axisLabel: {
              textStyle: {
                color: "#D8F0FF",
                fontSize: 11,
              },
              interval: 0,
              //   rotate: 30,
              margin: 10, //刻度标签与轴线之间的距离。
              rotate: 40,
              // 超过4个字显示省略号
              formatter: function (value) {
                if (value.length > 5) {
                  return `${value.slice(0, 5)}...`;
                }
                return value;
              },
            },
            axisLine: {
              show: false, //不显示x轴
              lineStyle: {
                color: "rgba(53,65,95,1)",
              },
            },
            axisTick: {
              show: false, //不显示刻度
            },
            boundaryGap: true,
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false, //不显示x轴
              lineStyle: {
                color: "rgba(53,65,95,1)",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#D8F0FF",
                fontSize: 14,
              },
            },
          },
        ],
        series: [
          // 柱体
          {
            name: "监测类型情况",
            type: "bar",
            barWidth: 15,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(105,160,231,0.2)",
              borderRadius: [30, 30, 30, 30],
            },
            itemStyle: {
              // 		        normal: {
              //   color: "#E5E5E5",
              //   barBorderRadius: 24
              // },
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: "#00D5FF",
                  },
                  {
                    offset: 1,
                    color: "#10274B",
                  },
                ],
              },
              borderRadius: [30, 30, 30, 30],
            },
            label: {
              show: false, //每条柱状图是否显示数字
              formatter: "{c}",
              position: "top",
              color: "#fff",
              fontSize: 14,
            },
            data: values,
          },
        ],
      };

      this.myChart.setOption(option);
    },
  },
  watch: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.divrow {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.divImg {
  width: 30%;
}

img {
  height: 3.1rem;
  width: 3.1rem;
}

.divCol {
  width: 184px;
  height: 75px;
  background: inherit;
  background-color: rgba(104, 244, 251, 0.21568627);
  border: none;
  border-radius: 5px;
  display: flex;
  white-space: nowrap;
  align-items: center;
  padding-left: 15px;
  justify-content: space-around;
}

.divText {
  width: 65%;
  padding-left: 0.5rem;
  .numberColor {
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    color: #00ffff;
  }
}
#echars_pie {
  height: 260px;
  width: 402px;
}
.headerSelect {
  width: 100%;
  height: 26px;
  //   background: #00ffff;
  margin: 5px 0px;
  display: flex;
  justify-content: space-between;
  /deep/ .el-input--suffix .el-input__inner {
    padding-right: 15px;
    height: 26px;
    background-color: transparent;
    border: none;
    color: #fff;
  }
  /deep/ .el-cascader {
    line-height: 26px;
  }
  /deep/.el-input__icon {
    line-height: 1;
    color: #fff;
  }
  /deep/ .el-input__inner::placeholder {
    color: #fff;
  }
}
</style>