ZRZYQC/UI2/src/views/tj/sjtjModules.vue

<template>
  <div>
    <div>
      <a-card style="margin-bottom: 1rem;width:100%;">
        <a-row>
          <a-col :sm="24" :md="12" :xl="3">
            <a-avatar :size="40" icon="user"/>
            <a-select default-value="ssqy" style="width: 150px;margin-top: 10%;margin-left: 3%" @change="handleChange">
              <a-select-option value="szdw">
                省直单位
              </a-select-option>
              <a-select-option value="ssqy">
                省属企业
              </a-select-option>
            </a-select>
          </a-col>

          <a-col :sm="24" :md="12" :xl="4">
            <div
              style="height:5rem;width: 100%;background-color:rgb(80,165,246); margin-left: 5rem;font-size:16px;text-align: center ;border-radius: 10px;cursor:pointer ">
              <div style="color: white;padding-top: 1rem">
                <div>已上报省直单位地块总面积</div>
                <div>
                  <span style="font-size: 24px">{{ SUMSZ }}</span><span style="margin-left: 5px">亩</span>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :sm="24" :md="12" :xl="4">
            <div
              style="height:5rem;width: 100%;background-color: rgb(252,140,118); margin-left: 10rem;font-size:16px;text-align: center ;border-radius: 10px;cursor:pointer ">
              <div style="color: white;padding-top: 1rem">
                <div>已上报省属企业地块总面积</div>
                <div>
                  <span style="font-size: 24px">{{ SUMSS }}</span><span style="margin-left: 5px">亩</span>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :sm="24" :md="12" :xl="4">
            <div
              style="height:5rem;width: 100%;background-color: rgb(130,144,255); margin-left: 15rem;font-size:16px;text-align: center ;border-radius: 10px;cursor:pointer ">
              <div style="color: white;padding-top: 1rem">
                <div>其中省直单位闲置低效面积</div>
                <div>
                  <span style="font-size: 24px">{{ SUMSZXZDX }}</span><span style="margin-left: 5px">亩</span>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :sm="24" :md="12" :xl="4">
            <div
              style="height:5rem;width: 100%;background-color: rgb(66,220,172); margin-left: 20rem;font-size:16px;text-align: center ;border-radius:10px;cursor:pointer ">
              <div style="color: white;padding-top: 1rem">
                <div>其中省属企业闲置低效面积</div>
                <div>
                  <span style="font-size: 24px;">{{ SUMSSXZDX }}</span><span style="margin-left: 5px">亩</span>
                </div>
              </div>
            </div>
          </a-col>

        </a-row>
      </a-card>
    </div>
    <div>
      <a-row v-show="this.type=='szdw'">
        <a-col :sm="24" :md="12" :xl="12">
          <a-card style="margin-bottom: 1rem;width:100%;height: 42rem">
            <mapData :resultMapData="this.resMapSzData" :titles="this.title2"  ></mapData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <PieData :resultData="this.resData1" :titleText=this.textBysz></PieData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <DoughnutData :titleText="this.titleBysz2" :result-data="this.DoughnutData"
                          :pie-color="this.color"></DoughnutData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <a-card style="margin-bottom: 1rem;width:100%;height: 20rem">
            <a-col :sm="24" :md="12" :xl="24">
              <BarData :titleText=this.BarTitleBysz :result-x-data=this.resXData :dw="this.dw2"
                       style="width:800px ;height:300px;"></BarData>
            </a-col>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <!--            <NightingaleCharData style="margin-left: 10rem"></NightingaleCharData>-->
            <a-col :xl="5">
              <WaterWorld :titleText=this.WaterWorldTitle :bottomTitle=this.WaterWorldTitleByqyzy
                          :resultData="this.resWordDataZy"></WaterWorld>
            </a-col>
            <a-col :xl="5" style="margin-left: 5rem">
              <WaterWorld :bottomTitle=this.WaterWorldTitleBydycz :resultData="this.resWordDataCz"></WaterWorld>
            </a-col>
            <a-col :xl="5" style="margin-left: 5rem">
              <WaterWorld :bottomTitle=this.WaterWorldTitleByxzdx :resultData="this.resWordDataXz"></WaterWorld>
            </a-col>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <BarDobuleData :titleText=this.BarTitleBysjzymj2 :result-x-data="resBarSzData"></BarDobuleData>
          </a-card>
        </a-col>
      </a-row>
      <a-row v-show="this.type=='ssqy'">
        <a-col :sm="24" :md="12" :xl="12">
          <a-card style="margin-bottom: 1rem;width:100%;height: 43rem">
            <mapData :resultMapData="this.resMapSsData" :titles="this.title1" @visible="visibleInfo"></mapData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <PieData :resultData="this.resData" :titleText="this.textByss" @visible="visibleInfo" ></PieData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <DoughnutData :titleText="this.titleBysz" :result-data="this.DoughnutData1"
                          :pie-color="this.color1"></DoughnutData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <PieData :resultData="this.resData2" :titleText="this.textBysss"  @visible="visibleInfo"></PieData>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <DoughnutData :titleText="this.titleByszs" :result-data="this.DoughnutData2"
                          :pie-color="this.color" @visible="visibleInfo"></DoughnutData>
          </a-card>
        </a-col>
        <!--        <a-col :sm="24" :md="12" :xl="12">
                  <a-card style="margin-bottom: 1rem;width:100%;height: 20rem">
                    <BarData :titleText=this.BarTitleBysz :result-x-data="this.resYData"></BarData>
                  </a-card>
                </a-col>-->
        <a-col :sm="24" :md="12" :xl="12">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <!--            <a-col :xl="5">
                          <WaterWorld :titleText=this.WaterWorldTitle :bottomTitle=this.WaterWorldTitleByqyzy
                                      :resultData="this.resWordDataZy"></WaterWorld>
                        </a-col>
                        <a-col :xl="5" style="margin-left: 5rem">
                          <WaterWorld :bottomTitle=this.WaterWorldTitleBydycz :resultData="this.resWordDataCz"></WaterWorld>
                        </a-col>
                        <a-col :xl="5" style="margin-left: 5rem">
                          <WaterWorld :bottomTitle=this.WaterWorldTitleByxzdx :resultData="this.resWordDataXz"></WaterWorld>
                        </a-col>-->
            <a-col :sm="24" :md="12" :xl="24">
              <!--              <a-card style="margin-bottom: 1rem;width:100%;height: 20rem">-->
              <BarData :titleText=this.BarTitleBysz :result-x-data="this.resYData" :dw="this.dw2"
                       :seriesName="'地块数量'"></BarData>
              <!--              </a-card>-->
            </a-col>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <BarDobuleData :titleText=this.BarTitleBysjzymj :result-x-data="resBarSsData"></BarDobuleData>
          </a-card>
        </a-col>

        <a-col :sm="24" :md="12" :xl="24">
          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
            <BarData :titleText=this.BarTitleBysjzymjs :result-x-data="this.resYDatas" :seriesName="'地块面积（亩）'"
                     :dw="this.dw"
                     style="width:1600px ;height:300px;"></BarData>
          </a-card>
        </a-col>

      </a-row>
      <j-modal
        :visible="visible"

        okText="保存"
        @cancel="handleCancel"
        cancelText="关闭"

      >
        <QcSsgqzysytdqkList :param="this.param"> </QcSsgqzysytdqkList>

      </j-modal>
    </div>
  </div>


</template>


<script>
import mapData from "@views/tj/compoent/map3Data";
import PieData from "@views/tj/compoent/PieData"
import DoughnutData from "@views/tj/compoent/DoughnutData";
import BarData from "@views/tj/compoent/BarData";
import BarDobuleData from "@views/tj/compoent/BarDobuleData";
import WaterWorld from "@views/tj/compoent/WaterWorld";
import NightingaleCharData from "@views/tj/compoent/NightingaleCharData";
import {getAction} from "@api/manage";
import QcSsgqzysytdqkList from "@views/qcsb/QcSsgqzysytdqkList_tj"

export default {
  name: "sjtj",
  data() {
    return {
      SUMSS: "",
      SUMSSXZDX: "",
      visible: false,

      SUMSZ: "",
      SUMSZXZDX: "",
      type: 'ssqy',
      DoughnutData:
        [],
      title2: "山东省省直单位地块统计",
      title1: "山东省省属企业地块统计",
      DoughnutData1: [],
      DoughnutData2: [],
      resXData: [],
      resYData: [],
      resYDatas: [],
      dw: '单位（亩）',
      dw2: '单位（块）',
      resData: [],
      resMapSzData: [],
      resMapSsData: [],
      resBarSsData: [],
      resBarSzData: [],
      cz: "",
      qyzy: "",
      xzdx: "",
      sum: "",
      param:"",
      resData2: [],
      color: ['#4676ff', '#1ad4cb'],
      color1: ['#8c42a1', '#4fa5e7'],
      resData1:
        [                  //每个模块的名字和值

        ],
      resWordDataZy: 0.98,
      resWordDataCz: 0.01,
      resWordDataXz: 0.01,
      textBysz: "省直单位土地获取方式占比",
      textByss: "省属企业土地地块数量获取方式占比",
      textBysss: "省属企业土地地块面积获取方式占比",
      titleBysz: "企业权证登记比例情况",
      titleBysz2: "单位权证登记比例情况",
      titleByszs: "土地使用现状占比",
      BarTitleBysz: '土地实际用途情况',
      BarTitleBysjzymj: '省属企业实际占用面积',
      BarTitleBysjzymjs: '一级单位用地面积汇总',
      BarTitleBysjzymj2: '省属企业实际占用面积',
      WaterWorldTitle: '企业土地使用情况',
      WaterWorldTitleByqyzy: '企业自用',
      WaterWorldTitleBydycz: '对外出租',
      WaterWorldTitleByxzdx: '闲置低效'

    }
  },
  mounted() {

    new Promise(resolve => {
      this.getPieData(resolve);
      this.getPieData2(resolve);
      this.getPieDatasz(resolve);
      this.getDougatasz(resolve);
      this.getTdsyxzDougatasz(resolve);
      this.getDougatass(resolve);
      this.getBarsz(resolve);
      this.getBarss(resolve);
      this.getMapSzData();
      this.getMapSsData();
      this.getAreaData();
      this.getBarssSjzyData(),
        this.getBarszSjzyData(),
        this.geszqyzytData()

    }).then(res => {
      console.log(res);//数据返回了
    })


  },
  components: {mapData, DoughnutData, BarData, WaterWorld, NightingaleCharData, BarDobuleData, PieData,QcSsgqzysytdqkList},
  methods: {
    handleChange(value) {
      this.type = value;
    },
    handleCancel() {
      this.visible = false
    },
    visibleInfo(params) {
      this.param=params
      this.visible = true

      // this.$router.push({ name:'qcsb-qcSsgqzysytdqk-list', query:{sfsb:3} });
    },

    getAreaData() {
      getAction("/qcsb.qyxx/qcQyxx/sbdkmj").then(res => {
        if (res.code == 200) {
          this.SUMSS = res.result.SUMSS.toFixed(2);
          this.SUMSSXZDX = res.result.SUMSSXZDX.toFixed(2);
          this.SUMSZXZDX = res.result.SUMSZXZDX.toFixed(2);
          this.SUMSZ = res.result.SUMSZ.toFixed(2);
          console.log(6666666666,res.result)
        }
      })
    },
    getPieData() {
      getAction("/qcsb.qyxx/qcQyxx/tdhqfs").then(res => {
        if (res.code == 200) {
          this.resData = res.result;

        }
      })
    },
    getPieData2() {
      getAction("/qcsb.qyxx/qcQyxx/tdhqfsArea").then(res => {
        debugger
        if (res.code == 200) {
          this.resData2 = res.result;
        }
      })
    },
    getPieDatasz() {
      getAction("/qcsb.qyxx/qcQyxx/tdhqfssz").then(res => {
        if (res.code == 200) {
          this.resData1 = res.result;

        }
      })

    },
    getDougatass() {
      getAction("/qcsb.qyxx/qcQyxx/qzdjblss").then(res => {
        if (res.code == 200) {
          this.DoughnutData = res.result;
        }
      })

    },
    getDougatasz() {
      getAction("/qcsb.qyxx/qcQyxx/qzdjblsz").then(res => {
        if (res.code == 200) {
          this.DoughnutData1 = res.result;

        }
      })
    },
    //统计-土地使用现状占比
    getTdsyxzDougatasz() {
      getAction("/qcsb.qyxx/qcQyxx/tdsyxzzb").then(res => {
        if (res.code == 200) {
          debugger
          this.DoughnutData2 = res.result;
        }
      })
    },
    getBarsz() {
      getAction("/qcsb.qyxx/qcQyxx/sjyttjsz").then(res => {
        if (res.code == 200) {
          this.resXData = res.result
        }
      })

    },
    getBarss() {
      getAction("/qcsb.qyxx/qcQyxx/sjyttjss").then(res => {
        if (res.code == 200) {
          this.resYData = res.result
        }
      }),
        getAction("/qcsb.qyxx/qcQyxx/yjdwmjhz").then(res => {
          if (res.code == 200) {
            debugger
            this.resYDatas = res.result

          }
        })

    },
    getMapSzData() {
      getAction("/qcsb.qyxx/qcQyxx/szdtdktj").then(res => {
        if (res.code == 200) {
          this.resMapSzData = res.result

        }
      })

    },
    getMapSsData() {
      getAction("/qcsb.qyxx/qcQyxx/ssdtdktj").then(res => {
        if (res.code == 200) {
          this.resMapSsData = res.result
          console.log(555555555, this.resMapSsData)
        }
      })
    },
    getBarssSjzyData() {
      getAction("/qcsb.qyxx/qcQyxx/sszytdmjtj").then(res => {
        if (res.code == 200) {
          this.resBarSsData = res.result

        }
      })
    },
    getBarszSjzyData() {
      getAction("/qcsb.qyxx/qcQyxx/szzytdmjtj").then(res => {
        if (res.code == 200) {
          this.resBarSzData = res.result
        }
      })
    },

    geszqyzytData() {
      getAction("/qcsb.qyxx/qcQyxx/szqyzy").then(res => {
        if (res.code == 200) {
          this.resWordDataCz = parseFloat(res.result[0].value / res.result[3].value);
          this.resWordDataZy = parseFloat(res.result[1].value / res.result[3].value);
          this.resWordDataXz = parseFloat(res.result[2].value / res.result[3].value);

          console.log(2222222222, this.resWordDataCz)
        }
      })
    },

  }

}
</script>

<style scoped>

</style>