|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div class="sdgk">
|
|
|
+ <div class="tdTitle">新增耕地（XXX项目）</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">{{ (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>
|
|
|
+ <pie unit="亩" class="pie_echart" ref="echartRef0"></pie>
|
|
|
+ </div>
|
|
|
+ <div class="echars">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">新增耕地来源</div>
|
|
|
+ </div>
|
|
|
+ <pie unit="亩" class="pie_echart" ref="echartRef1"></pie>
|
|
|
+ </div>
|
|
|
+ <div class="echars">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">新增耕地来源流向</div>
|
|
|
+ </div>
|
|
|
+ <sankey class="echart" ref="echartRef2"></sankey>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import pie from "@/components/echartsTemplate/pie.vue";
|
|
|
+import { overview, district, reason } from "@/api/Idleland.js";
|
|
|
+export default {
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sdata: { suspected: {}, confirm: {}, disposal: {} },
|
|
|
+ sdlist: [
|
|
|
+ { name: "新增耕地面积", prop: "suspected", unit: "公顷" },
|
|
|
+ { name: "新增耕地面积", prop: "confirm", unit: "公顷" },
|
|
|
+ { name: "新增耕地地块数", prop: "disposal", unit: "亩" },
|
|
|
+ ],
|
|
|
+ tab: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ pie,
|
|
|
+ },
|
|
|
+ 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 };
|
|
|
+ this.GetOverview();
|
|
|
+ this.GetSumList();
|
|
|
+ this.Getlinks();
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ this.setEchart({ data: res.data, type: '"horizontal"' }, 0);
|
|
|
+ this.setEchart({ data: res.data, type: '"horizontal"' }, 1);
|
|
|
+ this.$emit("updateParent", "loading", false);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ Getlinks() {
|
|
|
+ let data = [],
|
|
|
+ links = [];
|
|
|
+ district(this.params).then((res) => {
|
|
|
+ // res.data.forEach((jdData) => {
|
|
|
+ // });
|
|
|
+ data = [
|
|
|
+ { name: "a" },
|
|
|
+ { name: "b" },
|
|
|
+ { name: "a1" },
|
|
|
+ { name: "a2" },
|
|
|
+ { name: "b1" },
|
|
|
+ { name: "c" },
|
|
|
+ ];
|
|
|
+ links = [
|
|
|
+ { source: "a", target: "a1", value: 5 },
|
|
|
+ { source: "a", target: "a2", value: 3 },
|
|
|
+ { source: "b", target: "b1", value: 8 },
|
|
|
+ { source: "a", target: "b1", value: 3 },
|
|
|
+ { source: "b1", target: "a1", value: 1 },
|
|
|
+ { source: "b1", target: "c", value: 2 },
|
|
|
+ ];
|
|
|
+ this.setEchart(data, 2, links);
|
|
|
+ this.$emit("updateParent", "loading", false);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeCharts(e) {},
|
|
|
+ setEchart(data, id, links) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs[`echartRef${id}`].setOptions(data, links);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .pie_echart {
|
|
|
+ width: 400px;
|
|
|
+ height: 180px;
|
|
|
+ }
|
|
|
+ .tzdiv {
|
|
|
+ height: 20px;
|
|
|
+ margin: 5px 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
