large-vue/src/views/screen/logistics/logisticsAssets.vue

<template>
  <div class="main-data logistics-assets-operation" @click="showAssets" @mouseover="showAssets">
    <!-- <div class="title-area">后勤资产</div> -->
    <div class="content-area">
      <div class="dialog-left">
        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">赋码贴签</span>
            </div>
            <div class="content">
              <div class="device-cont">
                <div class="device-info">
                  <div class="device-item1">
                    <img src="@/assets/images/logistics_guarantee/boxhigh.png" class="icon" alt="" />
                    <div class="rate">
                      <div class="rate-data">
                        <div class="data">100</div>
                        <div class="unit">%</div>
                      </div>
                      <div class="desc">赋码率</div>
                    </div>
                  </div>
                  <div class="device-item1">
                    <img src="@/assets/images/logistics_guarantee/boxhigh.png" class="icon" alt="" />
                    <div class="rate">
                      <div class="rate-data">
                        <div class="data">100</div>
                        <div class="unit">%</div>
                      </div>
                      <div class="desc">贴签率</div>
                    </div>
                  </div>
                  <div class="device-item1">
                    <pie-chart
                    position="left"
                  :chart-data="pieData"
                  :legend="pieLegend"
                  
                  :center="['35%','40%']"                             
                  width="220px"
                  height="180px"
                />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">资产台账</span>
            </div>
            <div class="content">
              <div class="leftNav">
                <div
              :class="['model', 0 == curIndex ? 'cur' : '']"
              @click="chooseTab(0, 'main')"
            >
              楼宇资产占比
            </div>
            <div
              :class="['model', 1 == curIndex ? 'cur' : '']"
              @click="chooseTab(1, 'service')"
            >
             服务资产占比
            </div>
            <div
              :class="['model', 2 == curIndex ? 'cur' : '']"
              @click="chooseTab(2, 'logistics')"
            >
             办公资产占比
            </div>
               </div>
               <div class="device-item1" v-if="showTab === 'main'">
                    <pie-chart
                    position="left"
                  :chart-data="lyData"
                  :legend="lyLegend"
                  :center="['30%','60%']"                             
                  width="400px"
                  height="180px"
                />
                </div>
                <div class="device-item1" v-else-if="showTab === 'service'">
                    <pie-chart
                    position="left"
                  :chart-data="fwData"
                  :legend="fwLegend"
                  :center="['30%','60%']"                             
                  width="400px"
                  height="180px"
                />
                </div>
                <div class="device-item1" v-else-if="showTab === 'logistics'">
                    <pie-chart
                    position="left"
                  :chart-data="bgData"
                  :legend="bgLegend"
                  :center="['30%','60%']"                             
                  width="400px"
                  height="180px"
                />
                </div>
            </div>
          </div>

        </div>
        <div class="content">
              <div class="total-cont">
                <span class="title">资产存量</span>
              </div>
              <div class="rightList1">
                <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>楼宇</div> 
                    </div>
                    <div class="num">56<span class="unit">m²</span></div>                
                  </div>
                 </div>
                 <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>服务</div> 
                    </div>
                    <div class="num">51<span class="unit">m²</span></div>                
                  </div>
                 </div>
                 <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>办公</div> 
                    </div>
                    <div class="num">48<span class="unit">m²</span></div>                
                  </div>
                 </div>
           
              </div>
            </div>

            <div class="content">
              <div class="total-cont">
                <span class="title">资产新增数量</span>
              </div>
              <div class="rightList1">
                <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>楼宇</div> 
                    </div>
                    <div class="num">56<span class="unit">m²</span></div>                
                  </div>
                 </div>
                 <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>服务</div> 
                    </div>
                    <div class="num">51<span class="unit">m²</span></div>                
                  </div>
                 </div>
                 <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>办公</div> 
                    </div>
                    <div class="num">48<span class="unit">m²</span></div>                
                  </div>
                 </div>
           
              </div>
            </div>
           
            <div class="content">
              <div class="total-cont">
                <span class="title">资产报废数量</span>
              </div>
              <div class="rightList1">
                <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>楼宇</div> 
                    </div>
                    <div class="num">56<span class="unit">m²</span></div>                
                  </div>
                 </div>
                 <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>服务</div> 
                    </div>
                    <div class="num">51<span class="unit">m²</span></div>                
                  </div>
                 </div>
                 <div class="left-list">                
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
                      <div>办公</div> 
                    </div>
                    <div class="num">48<span class="unit">m²</span></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";

export default {
  name: "LogisticsAssets",
  components: {BarChart, PieChart, LineChart},
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newValue,oldValue){
      this.show = false;
      setTimeout(()=>{
        this.show = true;
      },0)
    },
  },
  data() {
    return {
      curIndex: 0,
      showTab: "main",
      pieData: [
        { value: 24.15, name: "楼宇" },
        { value: 24.15, name: "办公" },
        { value: 24.15, name: "服务" },
      ],
      pieLegend: {
        top: 25,
        orient: "vertical",
        right: 15,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      
      },
      
     //楼宇资产占比
     lyData: [
        { value: 24.15, name: "电梯" },
        { value: 24.15, name: "电气" },
        { value: 44.15, name: "楼宇通风" },
        { value: 24.15, name: "供热采暖" },
        { value: 24.15, name: "消防" },
        { value: 24.15, name: "给排水" },
      ],
      lyLegend: {
        top: 25,
        orient: "vertical",
        left: 200,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      
      },
      //服务资产占比
      fwData: [
        { value: 24.15, name: "电梯" },
        { value: 24.15, name: "电气" },
        { value: 44.15, name: "楼宇通风" },
        // { value: 24.15, name: "供热采暖" },
        // { value: 24.15, name: "消防" },
        // { value: 24.15, name: "给排水" },
      ],
      fwLegend: {
        top: 25,
        orient: "vertical",
        left: 200,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      
      },
      //办公资产占比
      bgData: [
        { value: 24.15, name: "电梯" },
        { value: 24.15, name: "电气" },
        { value: 44.15, name: "楼宇通风" },
        { value: 24.15, name: "供热采暖" },
   
      ],
      bgLegend: {
        top: 25,
        orient: "vertical",
        left: 200,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      
      },
    };
  },
  created() {

  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
           //切换菜单
           chooseTab(index) {
      this.curIndex = index;
      this.showTab = this.tabs[index].tab;
    },

    //点击显示
    showAssets(){
      this.$emit('onClick')
    }

  },
};
</script>

<style lang="scss">
.logistics-assets-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-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;
    }
  }
  .content-title.long {
    width: 100%;
    background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
  }


  .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;
    .line{
      width: 1px;
      height: 45px;
      opacity: 1;
      background: rgba(25, 252, 222, 0.2);
    }

    .total-list{
      width:auto;

      .total-top{
        display: flex;
        align-items: center;

        .img{
          display: block;
          width: 14px !important;
          height: 14px !important;
        }
        .total-top-info{
          padding-left: 6px;

          .name{
            font-size:14px;
            color:#FFFFFF;
          }
          .desc{
            font-size:8px;
            color:#FFFFFF;
            opacity: 0.4;
          }
        }
      }
      .total-bot{
        width:100%;
        padding-top:6px;
        display: flex;
        align-items: center;

        .num-list{
          display: flex;
          align-items: center;
          padding-right:15px;

          .num{
            font-size: 26px;
            color: #00FFFF;
            font-weight: bold;
            font-family: "electronicFont";
          }
          .unit{
            font-size: 12px;
            color: #00FFFF;
            font-weight: 500;
            position: relative;
            top:3px;
            left:2px;
          }
        }
        .num-list:last-child{
          padding-right: 0;
        }
      }
    }
  }

  .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-item1 {
        position: relative;
        img {
          width: 95px;
          height: 88px;
        }
        .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: #00ffff;
            .data {
              font-size: 35px;
              font-family: "electronicFont";
              text-shadow:
              0px 0px 0 #bbb,
              -1px -1px 0 #bbb,
              0px -1px 0 #bbb,
               -1px 1px 0 #bbb;
            transform: translateZ(1px);
            transform: translate3d(0, 0, 1px);
            }
            .unit {
              font-size: 12px;
            }
          }
          .desc {
            font-size: 14px;
            text-align: center;
            margin-top: 18px;
          }
        }
      }
    }
  }
  
  .content {
    margin-top: 10px;
    padding-left: 20px;
  }
  .dialog-left{
      width: 520px;
      float: left;
    }
    .dialog-list{
    width: 100%;
    display: flex;
    justify-content: space-between !important;
    margin-bottom:20px;

    .dialog-item{
      width: calc(50% - 20px);
    }

    .dialog-item-cont{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top:40px;
    }

    .wid100{
      width:100%;

      .content-title{
        width:100%;
        background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
      }
    }
  }
    //左边菜单
    .rightList1{
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    .left-list{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        margin-right: 60px;
        img{
          display: block;
          width:20px;
          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;
          }
        }
      }
  }
  .leftNav{
    display: flex;
    .model {
          margin-right: 15px;
          width: 130px;
          height: 45px;
          line-height: 30px;
          text-align: center;
          font-family: "PingFangSc";
          font-size: 14px;
          font-weight: bold;
           background: url("../../../assets/images/main/choose_bg_long.png") no-repeat;
         // background-size: 95% 95%;
          color: #CED6D6;
          cursor: pointer;
        }
        .model:last-child {
          margin-right: 0;
        }
        .cur {
          color: #05FEFE;
          //  background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
        }
  }
  ::-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>