large-vue/src/views/pad/logistics/assets/codeBillDialog.vue

<template>
  <div class="main-data code-bill-dialog" @click.stop="preventDefault" @mouseleave="leaveFun">
    <div class="dialog-title">
      <img
        src="@/assets/images/main/cont_title_bg.png"
      />
      <div class="title">后勤资产</div>
    </div>
    <div class="dialog-cont">
      <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="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
                  :chart-data="lyData"
                  :legend="lyLegend"
                  :center="['30%','60%']"
                  :title="lyTitle"
                  width="400px"
                  height="180px"
                />
                </div>
                <div class="device-item1" v-else-if="showTab === 'service'">
                    <pie-chart
                  :chart-data="fwData"
                  :legend="fwLegend"
                  :center="['30%','60%']"
                   :title="fwTitle"
                  width="400px"
                  height="180px"
                />
                </div>
                <div class="device-item1" v-else-if="showTab === 'logistics'">
                    <pie-chart
                  :chart-data="bgData"
                  :legend="bgLegend"
                  :center="['30%','60%']"
                   :title="bgTitle"
                  width="400px"
                  height="180px"
                />
                </div>
            </div>
          </div>

        </div>
        <div class="content">
              <div class="total-cont">
                <span class="title">资产存量
                  <span class="smallTitle">截止至{{timeString}}</span>
                </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">{{ stockList.stockBuildingAssetNum}}<span class="unit">件</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">{{ stockList.stockServiceAssetNum }}<span class="unit">件</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">{{ stockList.stockOfficeAssetNum }}<span class="unit">件</span></div>
                  </div>
                 </div>

              </div>
            </div>

            <div class="content">
              <div class="total-cont">
                <span class="title">{{timeMonth}}年度资产新增数量</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">{{scrapList.scrapBuildingAssetNum }}<span class="unit">件</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">{{scrapList.scrapServiceAssetNum  }}<span class="unit">件</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">{{scrapList.scrapOfficeAssetNum}}<span class="unit">件</span></div>
                  </div>
                 </div>

              </div>
            </div>

            <div class="content">
              <div class="total-cont">
                <span class="title">资产报废数量
                  <span class="smallTitle">截止至{{timeString}}</span>
                </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">{{ dumpList.newBuildingAssetNum }}<span class="unit">件</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">{{dumpList.newServiceAssetNum }}<span class="unit">件</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">{{dumpList.newOfficeAssetNum }}<span class="unit">件</span></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="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">{{ codedAndLabelRateList.codedRate }}</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">{{ codedAndLabelRateList.labelRate }}</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"
                  :title="pieTitle"
                  :center="['35%','40%']"

                  width="220px"
                  height="180px"
                />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="content">
              <div class="total-cont">
                <span class="title">楼宇设备运行情况</span>
              </div>
              <div class="rightList">
                 <div class="left-list">
                   <img src="@/assets/images/service_new/grow.png">
                    <div class="left-info">
                    <div class="name">巡检异常数量</div>
                    <div class="num">{{ operationList.inspectionAnomalyRecordNum }}<span class="unit">个</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                   <img src="@/assets/images/service_new/grow.png">
                    <div class="left-info">
                    <div class="name">检修记录数量</div>
                    <div class="num">{{operationList.repairRecordNum}}<span class="unit">条</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                   <img src="@/assets/images/service_new/grow.png">
                    <div class="left-info">
                    <div class="name">维保记录数量</div>
                    <div class="num">{{operationList.maintenanceRecordNum  }}<span class="unit">条</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                   <img src="@/assets/images/service_new/setting.png">
                    <div class="left-info">
                    <div class="name">重点设备巡检覆盖率</div>
                    <div class="num">{{ operationList.importantDeviceTypeInspectionExecuteRate }}<span class="unit">%</span></div>
                  </div>
                 </div>
              </div>

            </div>
      </div>

      <div class="dialog-right">
        <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">系统应用</span>
            </div>
            <div class="content">
              <div class="total-cont">
                <span class="title">典型场景应用率</span>
                <div class="leftNav">
                <div
              :class="['model1', 0 == curBodex ? 'cur' : '']"
              @click="chooseBox(0, 'province')"
            >
              地市
            </div>
            <div
              :class="['model1', 1 == curBodex ? 'cur' : '']"
              @click="chooseBox(1, 'region')"
            >
             直属单位
            </div>

               </div>
              </div>
              <div class="charts-cont" v-if="showBox === 'province'">
                  <bar-chart
                    :chart-data="nowBuildingAreaBarData"
                    :x-axis="nowBuildingAreaBarAxis"
                    :yAxis="nowBuildingAreaBarYaxis"
                    y-color="#FFF"
                    l-color="#FFF"
                    width="500px"
                    height="360px"
                  />
                </div>
                <div class="charts-cont" v-else-if="showBox === 'region'">
                  <bar-chart
                    :chart-data="regBuildingAreaBarData"
                    :x-axis="regBuildingAreaBarAxis"
                    :yAxis="regBuildingAreaBarYaxis"
                    y-color="#FFF"
                    l-color="#FFF"
                    width="500px"
                    height="360px"
                  />
                </div>
            </div>

        

            <div class="content">
              <div class="total-cont">
                <span class="title">地市巡检执行数量</span>
              </div>
              <div class="charts-cont">
                <bar-chart
            :chart-data="addBuildingAreaBarData"
            :x-axis="addBuildingAreaBarAxis"
            :yAxis="addBuildingAreaBarYaxis"


            y-color="#FFF"
            l-color="#FFF"
            width="500px"
            height="160px"
          />
            </div>
            </div>

            <div class="content">
              <div class="total-cont">
                <span class="title">直属单位巡检执行数量</span>
              </div>
              <div class="charts-cont">
                <bar-chart
            :chart-data="jueBuildingAreaBarData"
            :x-axis="jueBuildingAreaBarAxis"
            :yAxis="jueBuildingAreaBarYaxis"


            y-color="#FFF"
            l-color="#FFF"
            width="500px"
            height="360px"
          />
            </div>
            </div>

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

<script>
import LineChart from "@/components/Echarts/LineChart";
import PieChart from "@/components/Echarts/PieChart";
import BarChart from "@/components/Echarts/BarChart.vue";
import echarts from "echarts";
import {
  building,service,office,stock,scrap,dump,codedAndLabelRate,mainlyRate,sceneRate,sceneRateUnit,operation,inspectionSchemeNumX,inspectionSchemeNumY

} from "@/api/screen/service";

export default {
  name: "CodeBillDialog",
  components: {
    BarChart,
    PieChart,
    LineChart,
  },
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  data() {
    return {
      curIndex: 0,
      curBodex:0,
      currentTime: new Date(),
      showTab: "main",
      showBox: "province",
      // 资产存量
      stockList:{},
      scrapList:{},
      dumpList:{},
      codedAndLabelRateList:{},
      operationList:{},
      tabs: [
        {
          name: "楼宇资产占比",
          tab: "main",
        },
        {
          name: "服务资产占比",
          tab: "service",
        },
        {
          name: "办公资产占比",
          tab: "logistics",
        },

      ],
      Boxtabs: [
        {
          name: "地市",
          tab: "province",
        },
        {
          name: "直属单位",
          tab: "region",
        },


      ],
      pieData: [],
      pieLegend: {
        top: 30,
        orient: "vertical",
        right: 0,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },

      },
      pieTitle: {
        text: "{title|三大类}\n{subtitle|资产占比}",
        left: "20%",//对齐方式居中
        top: "28%",//距离顶部
        textStyle: {
              rich: {
                title: {
                  color: '#ffffff',
                  fontSize: 14,
                  fontWeight: 'normal',
                  align: 'center',
                },
                subtitle: { 
                  fontSize: 14,
                  color: '#ffffff',
                  fontWeight: 'normal',
                  lineHeight: 30,
                  align: 'center',
                },
              }
            }
      },
      pieCenter: ["50%", "40%"],
      //楼宇资产占比
      lyData: [],
      lyLegend: {
        top: 25,
        orient: "vertical",
        left: 250,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },

      },
      
      lyTitle: {},
      fwTitle: {},
      bgTitle: {},
      //服务资产占比
      fwData: [],
      fwLegend: {
        top: 65,
        orient: "vertical",
        left: 250,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },

      },
      //办公资产占比
      bgData: [],
      bgLegend: {
        top: 55,
        orient: "vertical",
        left: 250,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },

      },
      //地市
      nowBuildingAreaBarData: [],
      nowBuildingAreaBarAxis: {},
      nowBuildingAreaBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: '应用率（%）',
        nameTextStyle: {
          color: '#fff',
          padding: [0,0,0,30]
        },
        axisLine:{
          lineStyle:{
            color:"#465A64"
          }
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea:false
      },
      //直属单位
      regBuildingAreaBarData: [],
      regBuildingAreaBarAxis: {},
      regBuildingAreaBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: '应用率（%）',
        nameTextStyle: {
          color: '#fff',
          padding: [0,0,0,30]
        },
        axisLine:{
          lineStyle:{
            color:"#465A64"
          }
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea:false
      },

      //地市巡检执行数量
      addBuildingAreaBarData: [],
      addBuildingAreaBarAxis: {},
      addBuildingAreaBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: '',
        nameTextStyle: {
          color: '#fff',
          padding: [0,0,0,30]
        },
        axisLine:{
          lineStyle:{
            color:"#465A64"
          }
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea:false
      },
      //直属单位巡检执行数量
      jueBuildingAreaBarData: [],
      jueBuildingAreaBarAxis: {},
      jueBuildingAreaBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: '',
        nameTextStyle: {
          color: '#fff',
          padding: [0,0,0,30]
        },
        axisLine:{
          lineStyle:{
            color:"#465A64"
          }
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea:false
      },
    };
  },
  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.building()
    // 服务各类资产占比
    this.service()
    //办公各类资产占比
    this.office()
     // 资产存量
     this.stock()
     //2025年度资产新增数量
     this.scrap()
     //资产报废数量
     this.dump()
     //赋码率 -贴签率
     this.codedAndLabelRate()
    //  三大类资产占比
    this.mainlyRate()
    //典型场景应用率-地市
    this.sceneRate()
     //典型场景应用率-直属单位
    this.sceneRateUnit()
    //  楼宇设备运行情况
    this.operation()
    //地市巡检执行数量
    this.inspectionSchemeNumX()
    //直属单位巡检执行数量
    this.inspectionSchemeNumY()
    

  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
       // 楼宇各类资产占比
       building(){
        building(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          const colorList = ['#FEB948','#2F82FE','#01F6EC','#7465EF','#242CC4','#2FFEA0','#E16B21'];
          const buildingAssetList = res.data.buildingAssetList;
          this.lyData = buildingAssetList.map((item, index) => {
            return {
              value: item.assetNum, // 数据值
              name: item.categoryName, // 数据名称
              itemStyle: {
                color: colorList[index % colorList.length] // 循环使用颜色列表
              }
            };
          });
 
      this.lyTitle= {
        text: `{title|资产数量}\n{subtitle|${res.data.buildingAssetNum}}`,
        left: "22%",//对齐方式居中
        top: "48%",//距离顶部
        textStyle: {
              rich: {
                title: {
                  color: '#ffffff',
                  fontSize: 14,
                  fontWeight: 'normal',
                  align: 'center',
                },
                subtitle: {
                  fontSize: 16,
                  color: '#00FFFF',
                  fontFamily: 'electronicFont',
                  lineHeight: 30,
                  align: 'center',
                },
              }
            }
      }
          
        }
      });
    },

    // 服务各类资产占比
    service(){
      service(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          const colorList = ['#FEB948','#2F82FE','#01F6EC','#7465EF','#242CC4','#2FFEA0','#E16B21'];
          const buildingAssetList = res.data.serviceAssetList;
          this.fwData = buildingAssetList.map((item, index) => {
            return {
              value: item.assetNum, // 数据值
              name: item.categoryName, // 数据名称
              itemStyle: {
                color: colorList[index % colorList.length] // 循环使用颜色列表
              }
            };
          });
 
      this.fwTitle= {
        text: `{title|资产数量}\n{subtitle|${res.data.serviceAssetNum}}`,
        left: "22%",//对齐方式居中
        top: "48%",//距离顶部
        textStyle: {
              rich: {
                title: {
                  color: '#ffffff',
                  fontSize: 14,
                  fontWeight: 'normal',
                  align: 'center',
                },
                subtitle: {
                  fontSize: 16,
                  color: '#00FFFF',
                  fontFamily: 'electronicFont',
                  lineHeight: 30,
                  align: 'center',
                },
              }
            }
      }
          
        }
      });
    },

    //办公各类资产占比
    office(){
      office(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          const colorList = ['#FEB948','#2F82FE','#01F6EC','#7465EF','#242CC4','#2FFEA0','#E16B21'];
          const buildingAssetList = res.data.officeAssetList;
          this.bgData = buildingAssetList.map((item, index) => {
            return {
              value: item.assetNum, // 数据值
              name: item.categoryName, // 数据名称
              itemStyle: {
                color: colorList[index % colorList.length] // 循环使用颜色列表
              }
            };
          });
 
      this.bgTitle= {
        text: `{title|资产数量}\n{subtitle|${res.data.officeAssetNum}}`,
        left: "22%",//对齐方式居中
        top: "48%",//距离顶部
        textStyle: {
              rich: {
                title: {
                  color: '#ffffff',
                  fontSize: 14,
                  fontWeight: 'normal',
                  align: 'center',
                },
                subtitle: {
                  fontSize: 16,
                  color: '#00FFFF',
                  fontFamily: 'electronicFont',
                  lineHeight: 30,
                  align: 'center',
                },
              }
            }
      }
          
        }
      });
    },


      //资产存量
      stock() {
        stock(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.stockList=res.data;
        }
      });
    },
     
    //资产新增数量
    scrap() {
      scrap(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.scrapList=res.data;
        }
      });
    },

      
    //资产报废数量
    dump() {
      dump(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.dumpList=res.data;
        }
      });
    },

     //赋码率 -贴签率
     codedAndLabelRate() {
      codedAndLabelRate(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.codedAndLabelRateList=res.data;
        }
      });
    },

      // 三大类资产占比
      mainlyRate() {
        mainlyRate(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.pieData= [
        { value: res.data.buildingAssetNum, name: "楼宇资产", itemStyle: {color:'#FEB948'} },
        { value: res.data.officeAssetNum, name: "办公资产" , itemStyle: {color:'#2F82FE'}},
        { value: res.data.serviceAssetNum, name: "服务资产" , itemStyle: {color:'#01F6EC'}},
      ]
        }
      });
    },

     //典型场景应用率-地市
     sceneRate() {
      sceneRate(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.nowBuildingAreaBarAxis = {
            type: "category",
            data: res.data.xList,
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: 0,
              interval: 0
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: false,
            },
            splitArea: false
          };
          this.nowBuildingAreaBarData = [
            {
              data: res.data.yList,
              type: "bar",
              barWidth: 15,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FCE0BB' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#D47F1C' // 100% 处的颜色
                    }
                  ]
                }
              },
            },
          ];
        }
      });
    },

      //典型场景应用率-直属单位
      sceneRateUnit() {
        sceneRateUnit(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.regBuildingAreaBarAxis = {
            type: "category",
            data: res.data.xList,
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: 75,
              interval: 0
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: false,
            },
            splitArea: false
          };
          this.regBuildingAreaBarData = [
            {
              data: res.data.yList,
              type: "bar",
              barWidth: 15,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FCE0BB' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#D47F1C' // 100% 处的颜色
                    }
                  ]
                }
              },
            },
          ];
        }
      });
    },


     
     
      //楼宇设备运行情况
      operation() {
        operation(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.operationList=res.data;
        }
      });
    },
   

    //地市巡检执行数量
    inspectionSchemeNumX() {
      inspectionSchemeNumX(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.addBuildingAreaBarAxis = {
            type: "category",
            data: res.data.xList,
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: 0,
              interval: 0
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: false,
            },
            splitArea: false
          };
          this.addBuildingAreaBarData = [
            {
              data: res.data.yList,
              type: "bar",
              barWidth: 15,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FCE0BB' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#D47F1C' // 100% 处的颜色
                    }
                  ]
                }
              },
            },
          ];
        }
      });
    },

    //直属单位巡检执行数量
    inspectionSchemeNumY() {
      inspectionSchemeNumY(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.jueBuildingAreaBarAxis = {
            type: "category",
            data: res.data.xList,
            axisLabel: {
              color: "white", // 设置横坐标轴字体颜色为红色
              rotate: 75,
              interval: 0
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: false,
            },
            splitArea: false
          };
          this.jueBuildingAreaBarData = [
            {
              data: res.data.yList,
              type: "bar",
              barWidth: 15,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FCE0BB' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#D47F1C' // 100% 处的颜色
                    }
                  ]
                }
              },
            },
          ];
        }
      });
    },
     
     
     
     
        //切换菜单
        chooseTab(index) {
      this.curIndex = index;
      this.showTab = this.tabs[index].tab;
    },


      //切换菜单
      chooseBox(index) {
      this.curBodex = index;
      this.showBox = this.Boxtabs[index].tab;
    },
    preventDefault() {
      console.log(11)
    },

    //鼠标移出
    leaveFun(){
      setTimeout(()=>{
        this.$emit("closeDialog")
      },200)
    },
  },
};
</script>

<style lang="scss">
.code-bill-dialog {
  overflow: hidden;
  width: 1125px;
  height:1000px;
  background: url("../../../../assets/images/main/components_max_bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 19px 15px 11px 15px;

  .dialog-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
    img {
      width: 284px;
      height: 32px;
    }
    .title {
      font-size: 20px;
      font-weight: 900;
      font-family: "PingFangSC";
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -5px;
      color: #fff;
    }
  }


  .dialog-cont {
    width:100%;
    height: 920px;
    padding: 15px;
    overflow-y: scroll;
    background: url("../../../../assets/images/main/components_max_cont.png") no-repeat;
    background-size: 100% 100%;

    .dialog-left{
      width: 520px;
      float: left;
    }
    .dialog-right{
      width: 520px;
      float: right;
    }
  }

  .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;
      }
    }
  }

  .content-title {
    width: 100%;
    height: 26px;
    background: url("../../../../assets/images/main/title_pro.png") no-repeat;
    background-size: 100% 100%;
    font-family: "PingFangSC";
    font-size: 16px;
    font-weight: bold;
    color: #00ffff;
    padding-left: 20px;
    .title {
      display: block;
      position: relative;
      top:-5px;
    }
  }
  .charts-cont{
     width:100%;
    padding-top:10px;
  }

  .content {
    margin-top: 20px;
    padding-left: 20px;
  }

  .total-cont.pad{
    padding-top:20px;
  }
  .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;
    display: flex;
    justify-content: space-between;
    .line{
      width: 1px;
      height: 45px;
      opacity: 1;
      background: rgba(25, 252, 222, 0.2);
    }
    .smallTitle{
      font-size: 10px;
      font-weight: 100;
    }
    .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;
        }
      }
    }
  }
  //左边菜单
  .rightList1{
    display: flex;
    flex-wrap: wrap;
    padding: 15px 15px 0px 15px;
    .left-list{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        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;
          }
        }
      }
  }
  .rightList{
    display: flex;
    flex-wrap: wrap;
    padding: 15px 15px 0 15px;
    .left-list{
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        img{
          display: block;
          width:60px;
          height:60px;
        }
        .left-info{
          padding-left:12px;

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

  .device-cont{
    //width:250px;
     padding:0px 15px 0px 10px;

    .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: #00ffff;
            .data {
              font-size: 30px;
              font-family: "electronicFont";
            }
            .unit {
              font-size: 12px;
            }
          }
          .desc {
            font-size: 12px;
            text-align: center;
          }
        }
      }

      .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;
          }
        }
      }
    }
  }
  .leftNav{
    display: flex;
    .model {
          margin-right: 15px;
          width: 145px;
          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% 70%;
          color: #CED6D6;
          cursor: pointer;
        }
        .model1 {
          margin-right: 15px;
          width: 82px;
          height: 45px;
          line-height: 30px;
          text-align: center;
          font-family: "PingFangSc";
          font-size: 14px;
          font-weight: bold;
           background: url("../../../../assets/images/main/choose_short_single.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 {
    display: none;
    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;
  }
}
</style>