<template>
  <panel-container>
    <modular-layout>
      <panel-title-1>智慧旅游</panel-title-1>
    <div class="Modular_main">
      <div>
        <vue-scroll>
          <div class="row">
            <div class="col-50">
              <TitleThree title="管线长度" />
              <div class="Modular_left">

              </div>
            </div>
            <div class="col-50">
              <TitleThree title="管网附属物" />
              <div class="Modular_left">
                <div class="module-corner">
                  <Corner2 />
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-30">
              <TitleThree title="运行工况" />
              <div class="Modular_left">
                <DataList :data="workStatu" :title="['指标名称','数量']" >
                  <Corner2 slot="corner" />
                </DataList>
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="监测设备数量" />
              <div class="Modular_left">
                <div class="module-corner">

                  <Corner2 />
                </div>
              </div>
            </div>
            <div class="col-30">
              <TitleThree title="设备在线情况" />
              <div class="Modular_left">
                <div class="module-corner">
                  <Corner2 />
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-30">
              <TitleThree title="设备报警次数" />
              <div class="Modular_left">
              </div>
            </div>
            <div class="col-70">
              <TitleThree title="监测设备数量" />
              <div class="Modular_left">
                <div class="module-corner">
                  <Corner2 />
                </div>
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
    </modular-layout>
  </panel-container>
</template>

<script>
import Corner2 from "@/components/Corner2"
import DataList from '@/components/DataList'
export default {
  components:{
    Corner2,
    DataList
  },
  data() {
    return {
      // 运行工况
      workStatu:[
        { name: "给水管线泄露", num: "100", unit:'（个)' },
        { name: "雨水管线溢流", num: "100", unit:'（个)' },
        { name: "污水管井有害气体超标", num: "100", unit:'（个)' },
        { name: "井盖意外开启", num: "100", unit:'（个)' },
        { name: "消防栓偷水", num: "100", unit:'（个)' },
        { name: "燃气管线泄漏", num: "100", unit:'（个)' }
      ],
    }
  },
  created(){
    console.log('我是：WisdomTravel');
  },
  mounted() {
  },
  methods: {
    callEchart(idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth;
      this.$set(data,'width',_width);
      this.$set(data,'height', _width/offset);
    },
  }
}

</script>

<style scoped>
.panel-container{
  width: 100%;
  height: 100%;
  overflow: auto;
}
/* 盒子 */
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.row-flex{
  display:flex;
  justify-content:space-between;
}
.col-50{
  width: 50%;
  float: left;
}
.col-30{
  width: 30%;
  float: left;
}
.col-35{
  width: 35%;
  float: left;
}
.col-70{
  width: 70%;
  float: left;
}

</style>
<style>
.page-shms .dataListBox li{
  padding: .052rem .08rem !important;
}
</style>