<template>
  <panel-container>
    <modular-layout type="roundCorner">
      <panel-title-1>产业经济</panel-title-1>
      <div class="Modular_main">
        <div>
          <vue-scroll>
            <div class="row">
              <div class="col-70">
                <div class="row" style="margin-top:0;">
                  <div class="col-50">
                    <TitleThree title="产业指数" />
                    <!-- 产业指数 -->
                    <div class="industryIndex Modular_left">
                      <div
                        :class="'industryIndexBox industryIndexBox_'+(index+1)"
                        v-for="(value,index) in industryIndex"
                        :key="index"
                      >
                        <div :class="'circular circular_'+(index+1)">
                          <i :class="'iconfont '+value.icon"></i>
                        </div>
                        <div class="industryIndex_total">
                          <span>{{value.name}}</span>
                          <div class="industryIndexNum">
                            <span>{{value.total}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-50">
                    <TitleThree title="营商环境" />
                    <div id="echart-yshj-box" class="Modular_left">
                      <EchartBar1
                        :id="yshj.id"
                        :width="yshj.width"
                        :height="yshj.height"
                        :xAxisData="yshj.xAxisData"
                        :seriesData="yshj.seriesData"
                      />
                    </div>
                  </div>
                </div>
                <div class="row" style="margin-bottom:0;">
                  <div class="col-50">
                    <TitleThree title="企业行业分析" />
                    <div class="Modular_left">
                      <div class="module-corner" id="echart-enterprise-box">
                        <EchartPieAnnular
                          :id="enterprise_analysis.id"
                          :width="enterprise_analysis.width"
                          :height="enterprise_analysis.height"
                          :legend="enterprise_analysis.legend"
                          :seriesData="enterprise_analysis.seriesData"
                        />
                        <Corner />
                      </div>
                    </div>
                  </div>
                  <div class="col-50">
                    <TitleThree title="产业结构分析" />
                    <div class="Modular_left">
                      <div class="module-corner" id="echart-cyjgfx-box">
                        <EchartPieAnnular
                          :id="cyjgfx.id"
                          :width="cyjgfx.width"
                          :height="cyjgfx.height"
                          :legend="cyjgfx.legend"
                          :seriesData="cyjgfx.seriesData"
                        />
                        <Corner />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-30">
                <TitleThree title="生态结构" />
                <div class="Modular_left Modular_right">
                  <DataList
                    style="margin: 0 .05rem 0 .02rem;"
                    :data="ranking"
                    :title="['企业名称','排名']"
                  >
                    <Corner2 slot="corner" />
                  </DataList>
                </div>
              </div>
            </div>
            <div class="row">
              <!--企业创新分析-->
              <div class="col-35">
                <TitleThree title="企业创新分析" />
                <div class="Modular_left">
                  <div class="module-corner">
                    <EarthViews :data="qycxfx" height="1.1rem" />
                    <Corner2 />
                  </div>
                </div>
              </div>
              <!--入驻企业分析-->
              <div class="col-65">
                <TitleThree title="入驻企业分析" />
                <div class="Modular_left">
                  <div id="echart-rzqyfx-box">
                    <EchartLine
                      :id="rzqyfx.id"
                      :width="rzqyfx.width"
                      :height="rzqyfx.height"
                      :legend="rzqyfx.legend"
                      :xAxisData="rzqyfx.xAxisData"
                      :yAxisData="rzqyfx.yAxisData"
                    />
                  </div>
                </div>
              </div>
            </div>
          </vue-scroll>
        </div>
      </div>
    </modular-layout>
  </panel-container>
</template>
<script>
import { countSize } from '@/utils/utils'
import EarthViews from '@/components/EarthViews'
import Corner from '@/components/Corner'
import Corner2 from '@/components/Corner2'
import EchartPieAnnular from '@/components/echart/EchartPieAnnular'
import EchartBar1 from '@/components/echart/EchartBar1'
import EchartLine from '@/components/echart/EchartLine'
import DataList from '@/components/DataList'
export default {
  components: {
    EarthViews,
    Corner,
    Corner2,
    EchartPieAnnular,
    EchartBar1,
    EchartLine,
    DataList
  },
  data () {
    return {
      // 产业指数
      industryIndex: [
        { name: '营商环境指数', total: '100', icon: 'iconliebiao1' },
        { name: '注册企业指数', total: '100', icon: 'iconliebiao1' },
        { name: '经营企业指数', total: '100', icon: 'iconliebiao1' },
        { name: '企业联系指数', total: '100', icon: 'iconliebiao1' }
      ],
      // 营商环境
      yshj: {
        id: 'echart-yshj',
        width: 0,
        height: 0,
        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        seriesData: [320, 302, 301, 334, 390, 330, 320]
      },
      // 企业行业分析
      enterprise_analysis: {
        id: 'echart-enterprise',
        width: 0,
        height: 0,
        legend: ['申报立案', '调查取证', '大队执行', '立案审核', '法制审批'],
        seriesData: [
          {value: 34, name: '申报立案'},
          {value: 25, name: '调查取证'},
          {value: 45, name: '大队执行'},
          {value: 14, name: '立案审核'},
          {value: 24, name: '法制审批'}
        ]
      },
      // 产业结构分析
      cyjgfx: {
        id: 'echart-cyjgfx',
        width: 0,
        height: 0,
        legend: ['第一产业', '第二产业', '第三产业'],
        seriesData: [
          { value: 635, name: '第一产业' },
          { value: 310, name: '第二产业' },
          { value: 234, name: '第三产业' }
        ]
      },
      // 企业创新分析
      qycxfx: [
        { name: '事件总数', num: '100' },
        { name: '处理事件总数', num: '100' },
        { name: '处理率', num: '100' }
      ],
      // 入驻企业分析
      rzqyfx: {
        id: 'echart-rzqyfx',
        width: 0,
        height: 0,
        legend: ['总数量', '抢修次数', '抢修次数2'],
        xAxisData: ['2009年', '2010年', '2011年', '2012年', '2013年', '2014年', '2015年'],
        yAxisData: [
          {name: '总数量', data: [855, 1078, 856, 865, 990, 782, 1210], color: '255,45,82'},
          {name: '抢修次数', data: [500, 732, 633, 654, 890, 530, 910], color: '95,193,0'},
          {name: '抢修次数2', data: [200, 332, 533, 354, 290, 230, 310], color: '0,144,255'}
        ]
      },
      // 生态结构
      ranking: [
        { name: '中转站', num: '100' },
        { name: '渣土车', num: '100' },
        { name: '洒水车', num: '100' },
        { name: '环卫工', num: '100' },
        { name: '消纳场', num: '100' },
        { name: '工地', num: '100' },
        { name: '中转站', num: '100' },
        { name: '渣土车', num: '100' },
        { name: '洒水车', num: '100' },
        { name: '环卫工', num: '100' },
        { name: '消纳场', num: '100' },
        { name: '工地', num: '100' }
      ]
    }
  },
  mounted () {
    // 营商环境echart
    this.callEchart(this.yshj, 'echart-yshj-box', 2)
    // 企业行业分析echart
    this.callEchart(this.enterprise_analysis, 'echart-enterprise-box', 1.35)
    // 产业结构分析echart
    this.callEchart(this.cyjgfx, 'echart-cyjgfx-box', 1.35)
    // 入驻企业分析
    this.callEchart(this.rzqyfx, 'echart-rzqyfx-box', 2.4)
  },
  methods: {
    callEchart (data, idBox, 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-70{
  width: 70%;
  float: left;
}
.col-30{
  width: 30%;
  float: left;
}
.col-35{
  width: 35%;
  float: left;
}
.col-65{
  width: 65%;
  float: left;
}
.col-50{
  width: 50%;
  float: left;
}
.module-corner {
  background: url("../../assets/images/moduleBg01.png") no-repeat left top;
  background-size: 100% 100%;
  padding: 0.03rem 0;
  position: relative;
}
/* 产业指数 */
.industryIndex {
  width: 98%;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  padding-right: 2%;
}
.industryIndex .industryIndexBox {
  width: 47%;
  box-shadow: 0px 0px 1px #0006ff inset;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 4% 2%;
  margin-bottom: .05rem;
  margin-right: 3%;
  border-radius: 0.04rem 0.04rem 0 0.04rem;
}
.industryIndexBox:first {
  margin: 0 1% 0 0;
}
.industryIndex_total{
  line-height: .1rem;
}
.industryIndex_total > span {
  font-size: 0.6em;
  color: #fff;
}
.industryIndexNum {
  color: #30d7e0;
  font-size: 0.06rem;
}
.industryIndexNum span {
  font-size: 0.08rem;
  font-family: DS-DigitalBold;
}
.circular {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  margin-right: 0.05rem;
  text-align: center;
  padding-top: .03rem;
}
.circular_1 {
  background: linear-gradient(to top, #0336ff 0%, #01b4ff 100%);
}
.circular_2 {
  background: linear-gradient(to top, #c05a24 0%, #ca9c14 100%);
}
.circular_3 {
  background: linear-gradient(to top, #027683 0%, #29cd8b 100%);
}
.circular_4 {
  background: linear-gradient(to top, #520eb1 0%, #7736d1 100%);
}
</style>
<style>
.page-cyjj .dataListBox li{
  padding: .052rem .08rem !important;
}
</style>