<template>
  <div>
    <div class="data-display">
      <ul class="list">
        <li @click="detailPage">
          <p class="list-num">
            <i class='el-icon-s-order'></i>
            {{lederDelObjectCount?lederDelObjectCount:'0'}}
          </p>
          <p class="list-text">台账中待删除的对象</p>
        </li>
        <li @click="detailPage">
          <p class="list-num">
            <i class="el-icon-s-help"></i>
            {{notSyncObjectCount?notSyncObjectCount:'0'}}
          </p>
          <p class="list-text">不能同步到物理世界的对象</p>
        </li>
        <li @click="detailPage">
          <p class="list-num">
            <i class="el-icon-s-marketing"></i>
            {{notSyncDataCount?notSyncDataCount:'0'}}
          </p>
          <p class="list-text">不能同步到物理世界的关系数据</p>
        </li>
        <li @click="detailPage">
          <p class="list-num">
            <i class="el-icon-s-release"></i>
            {{postRelationInforCount?postRelationInforCount:'0'}}
          </p>
          <p class="list-text">岗位和关联的资产信息点值不一致</p>
        </li>
      </ul>
    </div>
    <div class="progress">
      <p class="basic-statistics">
        基本统计
        <data-export style="float:right"></data-export>
      </p>
      <div class="data equipment" v-if="equipCount">
        <span class="contain-title">
             <span class="iconfont icon-juxing"></span>
          设备<i>{{`(${equipCount?equipCount:"0"})`}}</i></span>
        <div class="data-show" v-loading="isLoading" v-if="equipment.length">
          <div class="show-content" v-for="(item,index) in equipment" :key="index">
            <data-origin :id="'equipment' + index" :renderData="item"></data-origin>
          </div>
        </div>
        <div class="data-show" v-loading="isLoading" v-if="deviceMessageTotal.length">
          <div class="device-content" v-for="(item,index) in deviceMessageTotal" :key="index">
            <data-origin :id="'origin-device' + index" :renderData="item" :filterClass="'yes'"></data-origin>
          </div>
        </div>
        <div class="data-show" v-loading="isLoading" v-if="deviceMessageData.length">
          <div class="device-content" v-for="(item,index) in deviceMessageData" :key="index">
            <data-origin :id="'origin-deviceTotal' + index" :renderData="item" :filterClass="'yes'"></data-origin>
          </div>
        </div>
      </div>
      <div class="data assets" v-if="assetsCount">
        <span class="contain-title">
             <span class="iconfont icon-juxing"></span>
          资产<i>{{`(${assetsCount?assetsCount:"0"})`}}</i></span>
        <div class="data-show" v-loading="isLoading" v-if="assets.length">
          <div class="show-content" v-for="(item,index) in assets" :key="index">
            <data-origin :id="'assets' + index" :renderData="item"></data-origin>
          </div>
        </div>
      </div>
      <div class="data parts" v-if="partsCount">
        <span class="contain-title">
             <span class="iconfont icon-juxing"></span>
          部件<i>{{`(${partsCount?partsCount:'0'})`}}</i></span>
      </div>
      <div class="data business-space" v-if="zoneSpaceCount">
        <span class="contain-title">
             <span class="iconfont icon-juxing"></span>
          业务空间<i>{{`(${zoneSpaceCount?zoneSpaceCount:'0'})`}}</i></span>
        <div class="data-show" v-if="business.length">
          <div v-for="(item,index) in business" :key="index" class="show-content">
            <datafan :id="'datafan' + index" :renderData="item"></datafan>
          </div>
        </div>
      </div>
      <div class="data " v-if="systemCount">
        <span class="contain-title">
             <span class="iconfont icon-juxing"></span>
          系统<i>{{`(${systemCount?systemCount:'0'})`}}</i></span>
        <div class="data-show" v-loading="isLoading" v-if="sysMessageData.length">
          <div class="device-content" v-for="(item,index) in sysMessageData" :key="index">
            <data-origin :id="'origin-sys' + index" :renderData="item" :filterClass="'yes'"></data-origin>
          </div>
        </div>
      </div>
      <div class="data " v-if="rentantCount">
        <span class="contain-title">
             <span class="iconfont icon-juxing"></span>
          租户<i>{{`(${rentantCount?rentantCount:'0'})`}}</i></span>
        <div class="data-show" v-loading="isLoading" v-if="tenant.length">
          <div class="show-content" v-for="(item,index) in tenant" :key="index">
            <data-origin :id="'origin-tenant' + index" :renderData="item"></data-origin>
          </div>
        </div>
      </div>
      <div class="data " v-if="shaftCount">
        <span class="contain-title">
             <span class="iconfont icon-juxing"></span>
          竖井<i>{{`(${shaftCount?shaftCount:'0'})`}}</i></span>
        <div class="data-show" v-loading="isLoading" v-if="shaft.length">
          <div class="show-content" v-for="(item,index) in shaft" :key="index">
            <datafan :id="'origin-datafan' + index" :renderData="item" v-if="!item.needCountT"></datafan>
            <data-origin :id="'origin-shaft' + index" :renderData="item" v-else></data-origin>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {mapGetters} from "vuex";
  import {
    countEquip,
    countGeneralSys,
    countProperty,
    gatherInfoPoint,
    getCenoteType,
    getDataDictionary,
    infoPoint,
    notSyncObject,
    notSyncRelationData,
    postRelationInforAtpism,
    queryCenoteCount,
    queryDefaultFunTypes,
    queryLederDelObject,
    queryPart,
    queryPartitionRatio,
    queryRentCount,
    queryShaftFunctionType,
    queryTenantCompletion,
    queryZoneCount,
    ShaftRelationBusinessSpace,
    systemInfoPoint
  } from "@/api/scan/request";
  import dataOrigin from "@/components/ledger/report/dataorigin";
  import datafan from "@/components/ledger/report/datafan";
  import dataExport from "@/components/ledger/report/dataexport";

  export default {
    data() {
      return {
        lederDelObjectCount: null,// 台账中待删除的对象
        notSyncObjectCount: null,// 不能同步到物理世界的对象
        notSyncDataCount: null,// 不能同步到物理世界的关系数据
        postRelationInforCount: null,// 岗位和关联的资产信息点值不一致
        equipCount: null,// 设备总数
        equipment: [],// 设备数据
        assetsCount: null,// 资产总数
        assets: [],// 资产数据
        parts: [],// 部件数据
        partsCount: null,// 部件总数
        zoneSpaceCount: null,// 业务空间总数
        zoneType: [// 分区类型
          {
            "Code": "GeneralZone",
            "Name": "默认分区",
            "Rel_type": "99"
          },
          {
            "Name": "供电分区",
            "Rel_type": "1",
            "Code": "PowerSupplyZone"
          },
          {
            "Name": "照明分区",
            "Rel_type": "2",
            "Code": "LightingZone"
          },
          {
            "Name": "网络分区",
            "Rel_type": "3",
            "Code": "NetworkZone"
          },
          {
            "Code": "AirConditioningZone",
            "Name": "空调分区",
            "Rel_type": "4"
          },
          {
            "Name": "采暖分区",
            "Rel_type": "5",
            "Code": "HeatingZone"
          },
          {
            "Name": "洁净分区",
            "Rel_type": "6",
            "Code": "CleanZone"
          },
          {
            "Name": "生活给水分区",
            "Rel_type": "7",
            "Code": "DomesticWaterSupplyZone"
          },
          {
            "Code": "FireZone",
            "Name": "防火分区",
            "Rel_type": "8"
          },
          {
            "Name": "安防分区",
            "Rel_type": "9",
            "Code": "SecurityZone"
          },
          {
            "Name": "租户分区",
            "Rel_type": "10",
            "Code": "TenantZone"
          },
          {
            "Name": '功能分区',
            'Rel_type': '11',
            "Code": 'FunctionZone'
          }
        ],
        partProtion: [],// 业务空间-各分区占比数据
        defaultPart: [],// 业务空间-默认分区功能类型占比数据
        business: [],// 业务空间数据
        systemCount: null,// 系统总数
        system: [],// 系统数据
        rentantCount: null,// 租户总数
        tenant: [],// 租户数据
        shaftCount: null,// 竖井总数
        shaft: [],// 竖井数据
        ShaftFunType: null,// 竖井功能类型
        shaftPartProtion: null,// 竖井-按功能类型占比数据
        params: null,
        isLoading: false,
        deviceMessageData: [],//统计设备信息点与需采集数据占比
        deviceMessageTotal: [],//统计设备信息点与总数据占比
        sysMessageData: [],//统计系统信息点与需采集数据占比
        static: '标准静态',
        dynamic: '标准动态',
        custom: '自定义'

      }
    },
    components: {
      dataOrigin,
      datafan,
      dataExport,
    },
    mounted() {
    },
    created() {
      this.params = {
        ProjectId: this.projectId
      }
      this.getFunctionType();
      this.getStatisticsCount();
      this.getEquipCount();
      this.gatherInfoPoints();
      this.systemInfoPoints();
      this.infoPoints();
      this.getAssetsCount();
      this.getPartsCount();
      this.getSystemCount();
      this.getTenantCount();
      this.getShaftFunType();
    },
    computed: {
      ...mapGetters('layout', ['projectId'])
    },
    methods: {
      detailPage() {
        this.$message({
          message: '待开发',
          type: 'warning'
        });
      },
      zoneTypeConversion(item) {// 分区类型转换
        this.zoneType.forEach(it => {
          if (item.Name === it.Code) {
            item.Name = it.Name;
          }
        })
      },
      functionTypeTranstion(item, type) {// 默认分区功能类型转换
        type.forEach(it => {
          if (item.Name === it.Code) {
            item.Name = it.Name;
            this.defaultPart.push({
              name: item.Name + item.Count,
              value: item.Count
            });
          }
          if (it.Content) {
            this.functionTypeTranstion(item, it.Content)
          }
        })
      },
      getFunctionType() {// 获取默认分区功能类型
        let params = {
          ProjectId: this.projectId,
          type: "GeneralZone",
          data: {
            Filters: "InfoPointCode='RoomFuncType'",
            Projection: ["DataSource", "InfoPointCode"]
          }
        }
        getDataDictionary(params, res => {
          if (res.Content.length) {
            this.functionType = JSON.parse(res.Content[0].DataSource)
          }
          this.getZoneSpaceCount();
        })
      },
      toPercent(point) {// 小数转换成百分比
        return (isNaN(point) || Number(point) === 0) ? '0%' : Number(point * 100).toFixed(2) + '%'
      },
      getShaftFunType() {// 获取数据功能类型
        getCenoteType(this.param, res => {
          this.ShaftFunType = res.Content;
          this.getShaftCount();
        })
      },
      shaftFunTypeTranstion(item) {// 竖井功能类型转换
        this.ShaftFunType.forEach((it, index) => {
          if (item.Name === it.Id) {
            item.Name = it.Name;
          }
        })
      },

      getStatisticsCount() {// 获取顶部统计数据
        let params = {
          ProjectId: this.projectId,
          Filters: "taskState = -1"
        }

        // 台账中待删除的对象
        queryLederDelObject(params, res => {
          this.lederDelObjectCount = res.Count;
        })

        // 不能同步到物理世界的对象
        notSyncObject(this.params, res => {
          this.notSyncObjectCount = res.Count;
        })

        // 不能同步到物理世界的关系数据
        notSyncRelationData(this.params, res => {
          this.notSyncDataCount = res.Count;
        })

        // 岗位和关联的资产信息点值不一致
        postRelationInforAtpism(this.params, res => {
          this.postRelationInforCount = res.Count;
        })
      },
      // 统计设备信息点与需采集数据占比
      gatherInfoPoints() {
        gatherInfoPoint(this.params, res => {
          let arr = JSON.parse(JSON.stringify(res.Content))
          arr.forEach(i => {
            this.$set(this.deviceMessageData, 0, {
              title: '统计设备信息点与需采集数据占比',
              tips: '统计设备信息点与需采集数据占比',
              contentValueO: '总数:',
              contentValueT: '标准静态:',
              needCountO: i.GatherInfoPointCounts,
              needCountT: i.GatherStaticInfoPointCounts,
              text: this.toPercent(i.GatherStaticInfoPointCounts / i.GatherInfoPointCounts),
              val: this.static
            })
            this.$set(this.deviceMessageData, 1, {
              contentValueO: '总数:',
              contentValueT: '标准动态:',
              needCountO: i.GatherInfoPointCounts,
              needCountT: i.GatherDynamicInfoPointCounts,
              text: this.toPercent(i.GatherDynamicInfoPointCounts / i.GatherInfoPointCounts),
              val: this.dynamic
            })

            this.$set(this.deviceMessageData, 2, {
              contentValueO: '总数:',
              contentValueT: '自定义:',
              needCountO: i.GatherInfoPointCounts,
              needCountT: i.GatherCustomInfoPointCounts,
              text: this.toPercent(i.GatherCustomInfoPointCounts / i.GatherInfoPointCounts),
              val: this.custom
            })
          })
        })
      },

      // 统计系统信息点与需采集数据占比
      systemInfoPoints() {
        systemInfoPoint(this.params, res => {
          let arr = JSON.parse(JSON.stringify(res.Content))
          arr.forEach(i => {
            this.$set(this.sysMessageData, 0, {
              title: '统计系统信息点与需采集数据占比',
              tips: '统计系统信息点与需采集数据占比',
              contentValueO: '总数:',
              contentValueT: '标准静态:',
              needCountO: i.GatherInfoPointCounts,
              needCountT: i.GatherStaticInfoPointCounts,
              text: this.toPercent(i.GatherStaticInfoPointCounts / i.GatherInfoPointCounts),
              val: this.static
            })
            this.$set(this.sysMessageData, 1, {
              contentValueO: '总数:',
              contentValueT: '标准动态:',
              needCountO: i.GatherInfoPointCounts,
              needCountT: i.GatherDynamicInfoPointCounts,
              text: this.toPercent(i.GatherDynamicInfoPointCounts / i.GatherInfoPointCounts),
              val: this.dynamic
            })
            this.$set(this.sysMessageData, 2, {
              contentValueO: '总数:',
              contentValueT: '自定义:',
              needCountO: i.GatherInfoPointCounts,
              needCountT: i.GatherCustomInfoPointCounts,
              text: this.toPercent(i.GatherCustomInfoPointCounts / i.GatherInfoPointCounts),
              val: this.custom
            })
          })

        })

      },
      //统计设备信息点与总数据占比
      infoPoints() {
        infoPoint(this.params, res => {
          let arr = JSON.parse(JSON.stringify(res.Content))
          arr.forEach(i => {
            this.$set(this.deviceMessageTotal, 0, {
              title: '统计设备信息点与总数据占比',
              tips: '统计设备信息点与总数据占比',
              contentValueO: '总数:',
              contentValueT: '标准静态:',
              needCountO: i.StaticInfoPointCounts,
              needCountT: i.StaticInfoPoint,
              text: this.toPercent(i.StaticInfoPoint / i.StaticInfoPointCounts),
              val: this.static
            })
            this.$set(this.deviceMessageTotal, 1, {
              contentValueO: '总数:',
              contentValueT: '标准动态:',
              needCountO: i.DynamicInfoPointCounts,
              needCountT: i.DynamicInfoPoint,
              text: this.toPercent(i.DynamicInfoPoint / i.DynamicInfoPointCounts),
              val: this.dynamic
            })
            let obj = i.CustomInfoPointCounts ? {} : ''
            if (obj) {
              obj = {
                contentValueO: '总数:',
                contentValueT: '自定义:',
                needCountO: i.CustomInfoPointCounts,
                needCountT: i.CustomInfoPoint,
                text: this.toPercent(i.CustomInfoPoint / i.CustomInfoPointCounts),
                val: this.custom
              }
            }
            this.$set(this.deviceMessageTotal, 2, {
              ...obj
            })


          })
        })
      },
      getEquipCount() {// 获取设备总数
        countEquip(this.params, res => {
          this.equipCount = res.Count;
          this.getEquipOtherCount();
        })

      },
      getEquipOtherCount() {// 获取设备数据
        // 未关联资产
        let param = {
          ProjectId: this.projectId,
          Filters: "PropertyId isNull"
        }
        let promise1 = new Promise(resolve => {
          countEquip(param, res => {
            resolve(res);
          })
        })

        // 现场验证状态占比
        let par = {
          ProjectId: this.projectId,
          Filters: "taskState = 0 or taskState = 1"
        }
        let promise2 = new Promise(resolve => {
          countEquip(par, res => {
            resolve(res);
          })
        })

        let pa = {
          ProjectId: this.projectId,
          Filters: "not BimID isNull"
        }
        let promise3 = new Promise(resolve => {
          countEquip(pa, res => {
            resolve(res);
          })
        })

        Promise.all([promise1, promise2, promise3]).then(response => {
          this.equipment = [];
          let res = response[0];
          let res1 = response[1];
          let res2 = response[2];
          this.equipment.push({
            title: '未关联设备',
            tips: '设备未关联资产数量',
            contentValueO: '已关联:',
            contentValueT: '未关联:',
            needCountO: this.equipCount - res.Count,
            needCountT: res.Count,
            text: `${res.Count}`
          })

          let text = this.toPercent(res1.Count / this.equipCount)
          this.equipment.push({
            title: '现场验证状态占比',
            tips: '设备状态为未找到、已找到的数量与设备总数占比',
            contentValueO: '已验证:',
            contentValueT: '未验证:',
            needCountO: res1.Count,
            needCountT: this.equipCount - res1.Count,
            text: text
          })

          let text1 = this.toPercent(res2.Count / this.equipCount)
          this.equipment.push({
            title: '与模型对应占比',
            tips: '"BIM模型中编码"有值的设备数量与设备总数占比',
            contentValueO: '已对应:',
            contentValueT: '未对应:',
            needCountO: res2.Count,
            needCountT: this.equipCount - res2.Count,
            text: text1
          })
          this.isLoading = false;
        })
      },
      getAssetsCount() {// 获取资产数据
        countProperty(this.params, res => {
          // 获取资产总数
          this.assetsCount = res.Count;
        })

        // 未关联资产
        let param = {
          ProjectId: this.projectId,
          Filters: " EquipmentId isnull"
        }
        let promise1 = new Promise((resolve) => {
          countProperty(param, res => {
            resolve(res)
          })
        })

        // 现场验证状态占比
        let par = {
          ProjectId: this.projectId,
          Filters: " taskState = 0 or taskState = 1"
        }
        let promise2 = new Promise((resolve) => {
          countProperty(par, res => {
            resolve(res);
          })
        })

        // 有无坐标占比
        let pa = {
          ProjectId: this.projectId,
          Filters: " not BIMLocation isnull"
        }
        let promise3 = new Promise((resolve) => {
          countProperty(pa, res => {
            resolve(res);
          })
        })

        Promise.all([promise1, promise2, promise3]).then(response => {
          this.assets = [];
          let res0 = response[0];
          let res1 = response[1];
          let res2 = response[2];

          this.assets.push({
            title: '未关联资产',
            tips: '资产未关联设备数量',
            contentValueO: '已关联:',
            contentValueT: '未关联:',
            text: `${res0.Count}`,
            needCountO: this.assetsCount - res0.Count,
            needCountT: res0.Count
          })

          let text = res1.Count / this.assetsCount;
          text = this.toPercent(text);
          this.assets.push({
            title: '现场验证状态占比',
            tips: '资产状态为未找到、已找到的数量与资产总数占比',
            contentValueO: '已验证:',
            contentValueT: '未验证:',
            text: text,
            needCountO: res1.Count,
            needCountT: this.assetsCount - res1.Count
          })

          let text1 = res2.Count / this.assetsCount;
          text1 = this.toPercent(text1);
          this.assets.push({
            title: '有无坐标占比',
            tips: '有坐标的资产数量百分比',
            contentValueO: '有坐标:',
            contentValueT: '无坐标:',
            text: text1,
            needCountO: res2.Count,
            needCountT: this.assetsCount - res2.Count
          })
        })
      },
      getPartsCount() {// 获取部件数据
        queryPart(this.params, res => {
          this.partsCount = res.Count;
        })
      },
      getZoneSpaceCount() {// 获取业务空间数据
        // 获取业务空间总数
        queryZoneCount(this.params, res => {
          this.zoneSpaceCount = res.Count;
        })
        let promise1 = new Promise((resolve) => {
          queryPartitionRatio(this.params, res => {
            resolve(res)
          })
        })
        let promise2 = new Promise((resolve) => {
          queryDefaultFunTypes(this.params, res => {
            resolve(res)
          })
        })
        Promise.all([promise1, promise2]).then(response => {
          this.business = [];
          this.partProtion = [];
          this.defaultPart = [];
          let res1 = response[0]
          let res2 = response[1]
          if (res1.Content.length) {
            res1.Content.forEach(item => {
              this.zoneTypeConversion(item);
            })
            let arr = res1.Content.filter(i => i.Count).forEach(j => {
              this.partProtion.push({
                name: j.Name + j.Count,
                value: j.Count
              })
            })
            this.business.push({
              title: '各分区占比',
              tips: '各类型分区实例数量与实例总数占比',
              needCountO: this.partProtion,
            })
          }
          if (res2.Content.length) {
            res2.Content.forEach(item => {
              this.functionTypeTranstion(item, this.functionType);
            })
            this.business.push({
              title: '默认分区功能类型占比',
              tips: '默认分区实例的功能区类型占比',
              needCountO: this.defaultPart,
            })
          }
        })
      },
      getSystemCount() {// 获取系统数据
        countGeneralSys(this.params, res => {
          this.systemCount = res.Count;
        })
      },
      getTenantCount() {// 获取租户数据
        // 获取租户总数
        queryRentCount(this.params, res => {
          this.rentantCount = res.Count;
        })

        // 租户-关联业务空间完成度
        let promise = new Promise((resolve) => {
          queryTenantCompletion(this.params, res => {
            resolve(res);
          })
        })
        Promise.all([promise]).then(response => {
          this.tenant = [];
          let res = response[0];
          this.tenant = [];
          let text = res.Count / this.rentantCount;
          text = this.toPercent(text);
          this.tenant.push({
            title: '关联业务空间完成度',
            tips: '已关联业务空间的租户数量百分比',
            contentValueO: '已关联:',
            contentValueT: '未关联:',
            needCountO: res.Count,
            needCountT: this.rentantCount - res.Count,
            text: text
          })
        })

      },
      getShaftCount() {// 获取竖井数据
        this.shaft = [];
        // 获取竖井总数
        queryCenoteCount(this.params, res => {
          this.shaftCount = res.Count;
        })

        let promise1 = new Promise((resolve) => {
          queryShaftFunctionType(this.params, res => {
            resolve(res);
          })
        })
        let promise2 = new Promise((resolve) => {
          ShaftRelationBusinessSpace(this.params, res => {
            resolve(res);
          })
        })
        Promise.all([promise1, promise2]).then(response => {
          this.shaft = [];
          let res = response[0];
          let res1 = response[1];
          this.shaftPartProtion = [];
          if (res.Content.length) {
            res.Content.forEach(item => {
              this.shaftFunTypeTranstion(item);
              this.shaftPartProtion.push({
                name: item.Name + item.Count,
                value: item.Count
              })
            })
            this.shaft.push({
              title: '按功能类型占比',
              tips: '竖井实例的竖井功能占比',
              needCountO: this.shaftPartProtion,
            })
          }

          let text = this.toPercent(res1.Count / this.shaftCount);
          this.shaft.push({
            title: '关联业务空间完成度',
            tips: '已关联业务空间的竖井数量百分比',
            contentValueO: '已关联:',
            contentValueT: '未关联:',
            needCountO: res1.Count,
            needCountT: this.shaftCount - res1.Count,
            text: text
          })
        })
      }
    },
    watch: {
      projectId(n, o) {
        this.params = {
          ProjectId: this.projectId
        }
        this.getFunctionType();
        this.getStatisticsCount();
        this.getEquipCount();
        this.getAssetsCount();
        this.getPartsCount();
        this.getSystemCount();
        this.getTenantCount();
        this.getShaftFunType();
        this.gatherInfoPoints();
        this.systemInfoPoints();
        this.infoPoints();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .data-display {
    width: 100%;
    margin-bottom: 10px;

    ul {
      display: flex;

      li {
        flex: 1;
        background: white;
        border: 1px solid #c9c9c9;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;

        p {
          color: #333;

          i {
            margin-right: 20px;
          }
        }

        p:nth-child(1) {
          font-size: 24px;
        }

        + li {
          margin-left: 10px;
        }
      }

      li:hover {
        box-shadow: 0px 2px 4px #c9c9c9;
      }
    }
  }

  .progress {
    width: 100%;

    .basic-statistics {
      border-bottom: 1px dashed #c9c9c9;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    .data {
      margin-bottom: 20px;

      .contain-title {
        height: 30px;
        line-height: 30px;
        /*border-left: 8px solid black;*/
        display: inline-block;
        margin: 8px 0;
        font-weight: 600;
        /*padding-left: 8px;*/
        cursor: default;

        i {
          margin-left: 6px;
          font-weight: normal;
        }
      }
    }
  }

  .data-show {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .show-content {
      background: white;
      overflow: hidden;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #c9c9c9;
    }

    .device-content {
      border-top: 1px solid #c9c9c9;
      border-bottom: 1px solid #c9c9c9;
      margin: 10px 0;

      &:first-child {
        border-left: 1px solid #c9c9c9;
      }

      &:last-child {
        border-right: 1px solid #c9c9c9;
      }
    }
  }

  /*.system,*/
  /*.parts {*/
  /*  height: 50px !important;*/
  /*}*/
</style>
