<template>
  <panel-container>
    <modular-layout>
      <panel-title-1>智慧园林</panel-title-1>
    <div class="Modular_main">
      <div>
        <vue-scroll>
          <div class="row">
            <div class="col-65">
              <TitleThree title="基础信息" />
              <div style="width:100%; overfolw:hidden;">
                <div class="col-50">
                  <div class="Modular_left">
                    <div class="module-corner" style="padding-right:.08rem;">
                      <div>
                        <Legend :list="[['在建项目', '#bd273c '], ['项目规划', '#0197ff']]" />
                        <div style="overflow:hidden;">
                          <div v-for="(value,index) in basic_info_bar" :key="index">
                            <ProgressBar :labelWidth=".2" :data="value" />
                          </div>
                        </div>
                      </div>
                      <Corner2 />
                    </div>
                  </div>
                </div>
                <div class="col-50">
                  <div class="Modular_left">
                    <div class="module-corner">
                      <div style="width: 100%; padding: .02rem .05rem .02rem 0; overflow:hidden;">
                        <div class="col-55" id="gardeninfo_basice_box">
                          <ProgressBarMany
                            :id="gardeninfo_basice.id"
                            :width="gardeninfo_basice.width"
                            :height="gardeninfo_basice.height"
                            :unit="gardeninfo_basice.unit"
                            :yAxisData="gardeninfo_basice.yAxisData"
                            :seriesData="gardeninfo_basice.seriesData"
                          />
                        </div>
                        <div class="col-45 gardeninfo_bg">
                          <div class="gardeninfo_til">
                            <p>日期</p>
                            <p>上报次数</p>
                            <p>整改次数</p>
                          </div>
                            <div class="gardeninfo_data" v-for="(item,index) in gardeninfo_data" :key="index">
                              <p>{{item.date}}</p>
                              <p>{{item.total}}</p>
                              <p>{{item.occupancy}}</p>
                            </div>
                          </div>
                        </div>
                      <Corner2 />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="园林工作人员" />
              <div class="Modular_left Modular_right">
                <DataListCols :data="workPeople" :title="['园林名称','工程人员','绿化人员']" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-65">
              <TitleThree title="园林维护" />
              <div class="Modular_left">
                <GardensMaintain style="padding: .022rem .02rem;" />
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="园林环境" />
              <div class="Modular_left Modular_right">
                <DataListCols :data="gardenEnvironment" :title="['园林名称','温度','湿度','AQI']" />
              </div>
            </div>

          </div>
          <div class="row">
            <div class="col-65">
              <TitleThree title="设备报警次数" />
              <div class="module-corner Modular_left">
                <div style="overflow:hidden;padding-right:.08rem;">
                  <div class="col-50">
                    <LitterTitle :title="'工地杨尘'" />
                    <Legend :list="[['处理率', '#bd273c'], ['总数量', '#029aff']]" />
                    <div v-for="(value,index) in equipmentAlert" :key="index">
                      <ProgressBar :data="value" />
                    </div>
                  </div>
                  <div class="col-50">
                    <LitterTitle :title="'工地杨尘'" />
                    <Legend :list="[['处理率', '#bd273c'], ['总数量', '#029aff']]" />
                    <div v-for="(value,index) in equipmentAlert" :key="index">
                      <ProgressBar :data="value" />
                    </div>
                  </div>
                </div>
                <Corner2 />
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="监测设备" />
              <div class="Modular_left Modular_right">
                <div class="module-corner" id="echart-monitorEquipment-box">
                  <EchartPieAnnular
                    :id="monitor_equipment.id"
                    :width="monitor_equipment.width"
                    :height="monitor_equipment.height"
                    :legend="monitor_equipment.legend"
                    :seriesData="monitor_equipment.seriesData"
                  />
                  <Corner2 />
                </div>
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
    </modular-layout>
  </panel-container>
</template>

<script>
import DataListCols from '@/components/board/DataListCols'
import GardensMaintain from './components/GardensMaintain'
import Corner2 from "@/components/Corner2"
import Legend from "@/components/echart/Legend"
import ProgressBar from "@/components/echart/ProgressBar"
import LitterTitle from "@/components/title/LitterTitle"
import EchartPieAnnular from '@/components/echart/EchartPieAnnular'
import ProgressBarMany from '@/components/echart/ProgressBarMany'
export default {
  components:{
    DataListCols,
    GardensMaintain,
    Corner2,
    Legend,
    ProgressBar,
    LitterTitle,
    EchartPieAnnular,
    ProgressBarMany
  },
  data() {
    return {
      // 基础信息
      basic_info_bar: [
        {title: '区域一', num1: 50, num2: 100,},
        {title: '区域二', num1: 50, num2: 100,},
        {title: '区域三', num1: 50, num2: 100,},
        {title: '区域四', num1: 50, num2: 100,},
      ],
      gardeninfo_basice:{
        id: 'gardeninfo_basice_id',
        width: 0,
        height: 0,
        yAxisData: ['园林一','园林一','园林一','园林一'],
        seriesData: [
          {name:'空闲数',data:[45, 45, 45, 45],color:'#ff9f00', zlevel: 10},
          {name:'总数量',data:[100, 80, 100, 90],color:'#0468f1', zlevel: 0},
        ],
      },
      gardeninfo_data: [
        {date: '1月', total: 152, occupancy: 85},
        {date: '2月', total: 152, occupancy: 85},
        {date: '3月', total: 152, occupancy: 85},
        {date: '4月', total: 152, occupancy: 85},
      ],
      // 园林工作人员
      workPeople:[
        { name: "园林一", num1: "100", num2: "100",},
        { name: "园林一", num1: "100", num2: "100",},
        { name: "园林一", num1: "100", num2: "100",},
        { name: "园林一", num1: "100", num2: "100",},
        { name: "园林一", num1: "100", num2: "100",},
      ],
      // 园林环境
      gardenEnvironment:[
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"}
      ],
      // 设备报警次数
      equipmentAlert:[
        {title: '工地一', num1: 50, num2: 100},
        {title: '工地一', num1: 50, num2: 100},
        {title: '工地一', num1: 50, num2: 100},
        {title: '工地一', num1: 50, num2: 100},
      ],
      // 监测设备
      monitor_equipment:{
        id: 'echart-monitorEquipment1',
        width: 0,
        height: 0,
        legend: ['申报立案','调查取证','大队执行','立案审核','法制审批'],
        seriesData: [
          {value:34, name:'申报立案'},
          {value:25, name:'调查取证'},
          {value:45, name:'大队执行'},
          {value:14, name:'立案审核'},
          {value:24, name:'法制审批'}
        ]
      },
    }
  },
  created(){
    console.log('我是：WisdomGardens');
  },
  mounted() {
    // 基础信息echart
    this.callEchart('gardeninfo_basice_box',this.gardeninfo_basice, .95);
    // 监测设备echart
    this.callEchart('echart-monitorEquipment-box', this.monitor_equipment, 1.45);
  },
  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-35{
  width: 35%;
  float: left;
}
.col-50{
  width: 50%;
  float: left;
}
.col-65{
  width: 65%;
  float: left;
}
.col-55{
  width: 55%;
  float: left;
}
.col-45{
  width: 45%;
  float: left;
}

/* 基础信息 */
.gardeninfo_bg{background:#05164a;border-radius:.03rem; padding:0.02rem;}
.gardeninfo_til{display:flex;border-bottom:1px dashed #1c2c68}
.gardeninfo_til p{width:33%;text-align:center;font-size:0.01rem; padding: .02rem 0;}
.gardeninfo_til p:first-child{color:#78bffd;}
.gardeninfo_til p:nth-child(2){color:#0b65ef;}
.gardeninfo_til p:nth-child(3){color:#ffa300;}
.gardeninfo_data{display:flex;}
.gardeninfo_data p{width:33%;text-align:center;font-size:0.01rem;line-height:0.11rem; padding: .02rem 0;}
.gardeninfo_data p:first-child{color:#78bffd;}
.gardeninfo_data p:nth-child(2){color:#0b65ef;font-weight:bold;}
.gardeninfo_data p:nth-child(3){color:#ffa300;font-weight:bold;}
</style>