<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>