large-vue/src/views/pad/logistics/houseArea.vue

<template>
  <div class="main-data house-area-operation" v-if="flag >= 2">
    <!-- <div class="title-area">房产土地</div> -->
    <div class="content-area">
      <div class="content-left wid100">
        <div class="content-title">
          <span class="title">房产资源存量
            <span class="smallTitle">截止至{{timeString}}</span>
          </span>
        </div>
        <div class="content">
          <div class="total-cont">
                <span class="title">房产数量
                  <span class="smallTitle">(处)</span>
                </span>
              </div>
          <div class="charts-cont">
            <pie-chart
            v-if="show"
              :chart-data="pieData"
              :legend="pieLegend"
              :center="pieCenter"
              width="520px"
              height="180px"
            />
          </div>
          <div class="total-cont">
                <span class="title">房产面积
                  <span class="smallTitle">(万m²)</span>
                </span>
          </div>
          <div class="data-content">
          <div class="data-item">
            <div class="data1">
              <div>{{ stockOfEstateResourcesList.pieChart[0].houseAcreage}}</div>
            </div>
            <div>
              <img src="@/assets/images/logistics_guarantee/houSl.png">
            </div>
            <div class="name1">{{ stockOfEstateResourcesList.pieChart[0].typeName}}</div>
          </div>
          <div class="data-item">
            <div class="data1">
              <div>{{ stockOfEstateResourcesList.pieChart[1].houseAcreage}}</div>
            </div>
            <div>
              <img src="@/assets/images/logistics_guarantee/houSl.png">
            </div>
            <div class="name1">{{ stockOfEstateResourcesList.pieChart[1].typeName}}</div>
          </div>
          <div class="data-item">
            <div class="data1">
              <div>{{ stockOfEstateResourcesList.pieChart[2].houseAcreage}}</div>            
            </div>
            <div>
              <img src="@/assets/images/logistics_guarantee/houSl.png">
            </div>
            <div class="name1">{{ stockOfEstateResourcesList.pieChart[2].typeName}}</div>
          </div>
          <div class="data-item">
                  <div class="data1">
                    <div>{{ stockOfEstateResourcesList.pieChart[3].houseAcreage}}</div>
                  </div>
                  <div>
              <img src="@/assets/images/logistics_guarantee/houSl.png">
            </div>
                  <div class="name1">{{ stockOfEstateResourcesList.pieChart[3].typeName}}</div>
                </div>
        </div>
          
        </div>

        <div class="content-title" style="margin-top: 60px;">
          <span class="title">土地资源存量
            <span class="smallTitle">截止至{{timeString}}</span>
          </span>
        </div>
        <div class="content">
           <div class="total-cont">
                <span class="title">土地数量
                  <span class="smallTitle">(宗)</span>
                </span>
            </div>
          <bar-chart
          v-if="show"
            :chart-data="buildingAreaBarData"
            :x-axis="buildingAreaBarAxis"
            :yAxis="buildingAreaBarYaxis"

            y-color="#FFF"
            l-color="#FFF"
            width="480px"
            height="140px"
          />
          <div class="total-cont">
                <span class="title">土地面积
                  <span class="smallTitle">(万m²)</span>
                </span>
          </div>
          <div class="data-content">
          <div class="data-item">
            <div class="data">
              <div>{{ stockOfLandResourcesList[0].landAcreage }}</div>
            </div>
            <div>
              <img src="@/assets/images/logistics_guarantee/mate.png">
            </div>
            <div class="name">{{ stockOfLandResourcesList[0].typeName }}</div>
          </div>
          <div class="data-item">
            <div class="data">
              <div>{{ stockOfLandResourcesList[1].landAcreage }}</div>
            </div>
            <div>
              <img src="@/assets/images/logistics_guarantee/mate.png">
            </div>
            <div class="name">{{ stockOfLandResourcesList[1].typeName }}</div>
          </div>
          <div class="data-item">
            <div class="data">
              <div>{{ stockOfLandResourcesList[2].landAcreage }}</div>            
            </div>
            <div>
              <img src="@/assets/images/logistics_guarantee/mate.png">
            </div>
            <div class="name">{{ stockOfLandResourcesList[2].typeName }}</div>
          </div>
          <div class="data-item">
                  <div class="data">
                    <div>{{ stockOfLandResourcesList[3].landAcreage }}</div>
                  </div>
                  <div>
              <img src="@/assets/images/logistics_guarantee/mate.png">
            </div>
                  <div class="name">{{ stockOfLandResourcesList[3].typeName }}</div>
                </div>
        </div>
        </div>
       
        <!-- <div class="content-title" style="margin-top: 25px">
          <span class="title">{{timeMonth}}年度投资房产完成情况</span>
        </div>
        <div class="content">
          <div class="data-list">
            <div class="data-item">

              <img
                src="@/assets/images/logistics_guarantee/estate.png"
                class="img"
              />
            </div>
            <div class="data-item">
              <div class="rightList1">
                <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/logistics_guarantee/tateSwin.png"></div>
                      <div>新增房产</div>
                    </div>
                    <div class="num">{{ investFinishStateList.new }}<span class="unit">个</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/logistics_guarantee/tateSwin.png"></div>
                      <div>投资计划房产</div>
                    </div>
                    <div class="num">{{ investFinishStateList.invest }}<span class="unit">个</span></div>
                  </div>
                 </div>


              </div>
            </div>
          </div>
        </div> -->
      </div>

    </div>
  </div>
</template>

<script>
import LineChart from "@/components/Echarts/LineChart.vue";
import PieChart from "@/components/Echarts/PieChart.vue";
import BarChart from "@/components/Echarts/BarChart.vue";
import echarts from "echarts";
import {

  stockOfEstateResources,stockOfLandResources,investFinishState
} from "@/api/screen/service";

export default {
  name: "HouseArea",
  components: { BarChart, PieChart, LineChart },
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newValue,oldValue){
      this.show = false;
      setTimeout(()=>{
        this.show = true;
      },0)
    },
  },
  data() {
    return {
      show:true,
      flag: 0,
      currentTime: new Date(),
      stockOfEstateResourcesList:{},
      stockOfLandResourcesList:{},
      investFinishStateList:{},
      // pieData: [
      //   { value: 24.15, name: "办公物资" },
      //   { value: 24.15, name: "楼宇资源" },
      //   { value: 24.15, name: "房产资源" },
      //   { value: 24.15, name: "服务设备" },
      //   { value: 24.15, name: "土地资源" },
      //   { value: 24.15, name: "车辆资源" },
      // ],
      pieData:[],
      pieLegend: {
        top: 55,
        orient: "vertical",
        left: 300,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      pieCenter: ["30%", "50%"],
      buildingAreaBarData: [],
      buildingAreaBarYaxis: {
        type: "category",
        data: ["周转用房土地", "办公土地", "物资仓储土地","供电所土地"],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        axisLine: {
          show: false,
        },
        axisTick: {
              show: false,
            },
            splitArea: false,
            axisLine: {
              show: false,
            },
      },
      buildingAreaBarAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: "",
        nameTextStyle: {
          color: "#fff",
        },
        axisLine: {
          lineStyle: {
            color: "#465A64",
          },
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      buildingAreaBarLegend: {
        show: false,
      },
      barGrid: {
        top: 10,
        left: "2%",
        right: "2%",
        containLabel: true,
        bottom: 0,
      },
    };
  },
  computed: {
    timeString() {
      const year = this.currentTime.getFullYear();
      const month = String(this.currentTime.getMonth() + 1);
      const day = String(this.currentTime.getDate());
      return `${year}年${month}月${day}日`;
    },
    timeMonth(){
      const year = this.currentTime.getFullYear();
      return `${year}`;
    }

  },
  created() {
    //房产资源存量
    this.stockOfEstateResources();
    //土地资源存量
    this.stockOfLandResources();
    //2025年度投资房产完成情况
    // this.investFinishState();
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
     //房产资源存量
     stockOfEstateResources() {
      stockOfEstateResources(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.stockOfEstateResourcesList=res.data;
          const colorList = ['#FEB948','#7465EF','#2F82FE','#2FFEA0','#242CC4','#2FFEA0','#E16B21'];
          const stockOfEstateAssetList = res.data.pieChart;
          this.pieData = stockOfEstateAssetList.map((item, index) => {
            return {
              value: item.houseNum, // 数据值
              name: item.typeName, // 数据名称
              itemStyle: {
                color: colorList[index % colorList.length] // 循环使用颜色列表
              }
            };
          });
          this.flag++
        }
      });
    },

      //土地资源存量
      stockOfLandResources() {
        stockOfLandResources(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.stockOfLandResourcesList=res.data.chart
          this.buildingAreaBarData=[
          {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#02C698",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [res.data.chart[3].landNum,0, 0 ,0],
            },
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#409EFF",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [0,res.data.chart[2].landNum,0,0],
            },
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#00FF9D",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [0,0,res.data.chart[1].landNum,0],
            },
            {
              name: "",
              type: "bar",
              stack: "a",
              itemStyle: {
                color: "#EFB264",
                //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
              },
              barWidth: 10,
              data: [0,0,0,res.data.chart[0].landNum],
            },
          ]
          this.flag++
        }
      });
    },

    //2025年度投资房产完成情况
    investFinishState() {
      investFinishState(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.investFinishStateList=res.data;
        }
      });
    },

  },
};
</script>

<style lang="scss">
.house-area-operation {
  .content-area {
    display: flex;
    padding: 15px 20px 0 15px;
    align-items: flex-start;
    justify-content: space-between;
  }

  // .content-title {
  //   width: 230px;
  //   height: 26px;
  //   background: url("../../../assets/images/main/title_pro.png") no-repeat;
  //   background-size: 100% 100%;
  //   font-family: "PingFangSC";
  //   font-size: 14px;
  //   font-weight: bold;
  //   color: #00ffff;
  //   padding-left: 17px;
  //   .title {
  //     display: block;
  //   }
  // }

  .content {
    // margin-top: 10px;
    padding-left: 20px;
    .smallTitle{
      font-size: 10px;
      font-weight: 100;
    }
    
    .data-content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: visible;
      padding-top:15px;
      margin: 25px 10px 10px 0;
      .mar{
        margin-bottom: 15px;
      }
      .data-item{
        height:30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: visible;

        .data{
          width: auto;
          font-size: 32px;
          color:#00FFFF;
          font-family: 'electronicFont';
          position: relative;
          top: -5px;
          display: flex;
          align-items: center;

        }
        .name{
          font-size: 14px;
          color:#FFFFFF;
          position: relative;
          top:5px;
          font-family: "fashionZh";
        }
        .data1{
          width: auto;
          font-size: 32px;
          color:#00FFFF;
          font-family: 'electronicFont';
          position: relative;
          top: 12px;
          display: flex;
          align-items: center;

        }
        .name1{
          font-size: 14px;
          color:#FFFFFF;
          position: relative;
          font-family: "fashionZh";
        }
      }
    }
  }
  .content-title {
    width: 230px;
    height: 26px;
    background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
    background-size: 100% 100%;
    font-family: "PingFangSC";
    font-size: 16px;
    font-weight: bold;
    color: #00ffff;
    padding-left: 20px !important;
    .title {
      display: block;
      position: relative;
      top:-5px !important;
    }
    .smallTitle{
      font-size: 10px;
      font-weight: 100;
      color: #ffffff;
    }
  }
  .content-title.long {
    width: 100%;
    background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
  }
  .wid100{
      width:100%;

      .content-title{
        width:100%;
        background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
      }
    }
  .title-format {
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: 6px;
      height: 24px;
      margin-right: 6px;
    }
    .title-info {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #ffffff;
      .title-en {
        font-size: 8px;
        color: #ffffff;
        opacity: 0.4;
      }
    }
  }

  .tab-cont {
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-top: 10px;

    .tab-list {
      width: 98px;
      height: 30px;
      background: url("../../../assets/images/logistics_guarantee/img_2.png")
        no-repeat;
      background-size: 100% 100%;
      font-family: "PingFangSC";
      font-size: 14px;
      font-weight: 500;
      color: #00ffff;
      padding-left: 15px;
      line-height: 30px;
    }
    .tab-list:last-child {
      margin-left: 15px;
    }
  }
  .total-cont {
    width: 100%;
    height: 35px;
    background: url("../../../assets/images/main/lightLone.png") no-repeat;
    background-size: 100% 100%;
    font-family: "PingFangSC";
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    padding-left: 25px;
    padding-top: 8px;
    margin-top: 28px;
    .total-list {
      display: flex;
      align-items: baseline;
      width: 152px;
      justify-content: center;
      // margin-left: 40px;
      .total {
        font-size: 32px;
        color: #00FFFF;
        font-weight: bold;
        font-family: "electronicFont";
      }
      .unit {
        font-size: 12px;
        color: #00ffff;
        font-weight: 500;
        padding-left:4px;
      }
      .unitY {
        font-size: 12px;
        color: #00FFFF;
        font-weight: 500;
        padding-left:4px;
      }
    }
    .total-list1{
      display: flex;
      align-items: baseline;
      width: 160px;
      justify-content: center;
      // margin-right: 30px;
      .total {
        font-size: 32px;
        color: #00FFFF;
        font-weight: bold;
        font-family: "electronicFont";
      }
      .unit {
        font-size: 12px;
        color: #00ffff;
        font-weight: 500;
        padding-left:4px;
      }
      .unitY {
        font-size: 12px;
        color: #00FFFF;
        font-weight: 500;
        padding-left:4px;
      }
    }
  }

  .charts-cont {
    width: 100%;
    //padding-top: 20px;
  }

  .device-cont {
    width: 100%;
    padding: 10px 15px 0 15px;

    .title {
      font-size: 14px;
      color: #ffffff;
      font-weight: bold;
    }
    .device-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 15px;

      .device-item {
        position: relative;
        img {
          width: 117px;
          height: 68px;
        }
        .rate {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: absolute;
          top: -10px;
          left: 2px;
          color: #fff;
          .rate-data {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            color: #ffba44;
            .data {
              font-size: 30px;
              font-family: "electronicFont";
            }
            .unit {
              font-size: 12px;
            }
          }
          .desc {
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
  }

  .data-list {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 5px;

    .data-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      img {
        // width: 70px;
      }
      .data-detail {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        color: #00ffff;
        font-size: 12px;
        margin-bottom: -20px;
        .data {
          font-family: "electronicFont";
          font-size: 30px;
        }
      }
      .desc {
        font-size: 13px;
        width: 78px;
        text-align: center;
        color: #00ffff;
        margin-top: 4px;
        font-weight: bold;
      }
    }
  }
    //左边菜单
    .rightList1{
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    .left-list{
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        margin-right: 40px;
        img{
          display: block;
          width:25px;
          height:20px;
          margin-right: 5px;
        }
        .left-info{
          padding-left:12px;

          .num{
            font-size: 30px;
            color:#00FFFF;
            font-family: "electronicFont";
            display: flex;
            flex-direction: row;
            align-items: baseline;
            .unit{
              font-size: 12px;
            }
          }
          .name{
            display: flex;
            font-size: 14px;
            color:#FFFFFF;
            font-family: 'fashionZh';
            padding-top:4px;
          }
        }
      }
  }
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }

  .unit-label {
    color: rgba(255, 255, 255, 0) !important;
  }
}
</style>