<template>
  <panel-container>
    <modular-layout>
      <panel-title-1>智慧政务</panel-title-1>
    <div class="Modular_main">
      <div>
        <vue-scroll>
          <div class="row">
            <div class="col-33">
              <TitleThree title="系统信息" />
              <div class="Modular_left">
                <div class="module-corner">
                  <EarthViews :data="systemInfo" height=".93rem" />
                  <Corner2 />
                </div>
              </div>
            </div>
            <div class="col-33">
              <TitleThree title="公共平台" />
              <div class="Modular_left">
                <DataListCols :data="publicPlatform" :title="['类别','数量','处理率']" />
              </div>
            </div>
            <div class="col-33">
              <TitleThree title="协同办公" />
              <div class="Modular_left Modular_right">
                <div class="module-corner" style="padding-right:.08rem;">
                  <div>
                    <Legend :list="[['处理率', '#bd273c '], ['总数量', '#0197ff']]" />
                    <div style="overflow:hidden;">
                      <div v-for="(value,index) in teamwork_bar" :key="index" style="margin-right: 25px;padding:4px 0">
                        <ProgressBar :labelWidth=".25" :data="value" />
                      </div>
                    </div>
                  </div>
                  <Corner2 />
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-65">
              <TitleThree title="工作流程" />
              <div class="Modular_left">
                <Workflow />
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="行政办公" />
              <div class="Modular_left Modular_right officeWork">
                <DataListCols :data="officeWork" :title="['类别','数量','处理率']" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-40">
              <TitleThree title="人事管理" />
              <div class="Modular_left">
                <!-- <DataListCols :data="personManage" :title="['类别','总数量','已处理数量', '处理率']" /> -->
                <div class="module-corner">
                  <EarthViews :data="personManage" height=".85rem" />
                  <Corner2 />
                </div>
              </div>
            </div>
            <div class="col-60">
              <TitleThree title="文档管理" />
              <div class="Modular_left Modular_right">
                <div class="module-corner" style="min-height: .95rem;">
                  <div style="padding: .03rem 0 .03rem .01rem;">
                    <Legend :list="[['总占比', '#bd273c '], ['总数量', '#0197ff']]" />
                    <div style="overflow:hidden;padding-right: .2rem;">
                      <div class="col-47" :style="(index%2) == 0?'margin-right:6%':''" v-for="(value,index) in docManage_bar" :key="index">
                        <ProgressBar :labelWidth=".25" :data="value" />
                      </div>
                    </div>
                  </div>
                  <Corner2 />
                </div>
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
    </modular-layout>
  </panel-container>
</template>

<script>
import Corner2 from '@/components/Corner2'
import Legend from '@/components/echart/Legend'
import ProgressBar from './components/ProgressBar'
import LitterTitle from '@/components/title/LitterTitle'
import EarthViews from '@/components/EarthViews'
import DataListCols from '@/components/board/DataListCols'
import Workflow from './components/Workflow'
import Loading from "../../components/loading/Loading";
export default {
  components: {
    Loading,
    Corner2,
    Legend,
    ProgressBar,
    LitterTitle,
    EarthViews,
    DataListCols,
    Workflow
  },
  data () {
    return {
      // 系统信息
      systemInfo: [],
      // 公共平台
      publicPlatform: [
        // { name: "系统公共", num1: "100", num2: "100",},
      ],
      // 协同办公
      teamwork_bar: [
        // {title: '协同办公', num1: 50, num2: 100, percentage:50},
      ],
      // 行政办公
      officeWork: [
        // { name: "投票管理", num1: "100", num2: "100",},
      ],
      // 人事管理
      // personManage:[
      //   { name: "人事合同", num1: "100", num2: "100", num3: "100"},
      // ],
      personManage: [
        // { name: "人事合同", num: "100"},
      ],
      // 文档管理
      docManage_bar: [
        // {title: '交通路况', num1: 50, num2: 100, percentage:50},
      ]
    }
  },
  mounted () {
    this.geRegisterNums()
    // 获取一卡通注册数
    this.geRegisterNum()
    // 获取公共平台数据
    this.getPublicPlatform()
    // 获取协同办公数据
    this.getTeamwork()
    // 获取行政办公数据
    this.getOfficeWork()
    // 获取人事管理
    this.gePersonManage()
    // 获取文档管理
    this.geDocManage()
  },
  methods: {
    geRegisterNums () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1059'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
      })
    },
    // 获取一卡通注册数
    geRegisterNum () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1058'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let arr = []
        res.data.forEach((item, index) => {
          arr.push({name: item.LX, num: item.SL})
        })
        this.systemInfo = [...arr]
      })
    },
    // 获取公共平台数据
    getPublicPlatform () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1074'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          res.data.forEach((item, index) => {
            this.publicPlatform.push({ name: item.LX, num1: item.SL, num2: 0})
          })
        }
      })
    },
    // 获取协同办公数据
    getTeamwork () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1075'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          let data = res.data
          // 计算文档总数量
          let total = 0
          for (let i = 0; i < data.length; i++) {
            total += Number(data[i].SL)
          };
          // 数量赋值+计算占比
          let arr = []
          res.data.forEach((item, index) => {
            arr.push({title: item.LX, num1: item.SL, num2: total, percentage: (Number(item.SL) / total).toFixed(2) * 100})
          })
          this.teamwork_bar = arr
        }
      })
    },
    // 获取行政办公数据
    getOfficeWork () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1076'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          res.data.forEach((item, index) => {
            this.officeWork.push({ name: item.LX, num1: item.SL, num2: 0})
          })
        }
      })
    },
    // 获取人事管理
    gePersonManage () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1057'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let arr = []
        res.data.forEach((item, index) => {
          arr.push({name: item.LX, num: item.SL})
        })
        this.personManage = arr
      })
    },
    // 获取文档管理
    geDocManage () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1050'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let data = res.data
        // 计算文档总数量
        let total = 0
        for (let i = 0; i < data.length; i++) {
          total += Number(data[i].SL)
        };
        // 数量赋值+计算占比
        let arr = []
        res.data.forEach((item, index) => {
          arr.push({title: item.LX, num1: item.SL, num2: total, percentage: (Number(item.SL) / total).toFixed(2) * 100})
        })
        this.docManage_bar = arr
      })
    },
    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-65{
  width: 65%;
  float: left;
}
.col-33{
  width: 33%;
  float: left;
}
.col-35{
  width: 35%;
  float: left;
}
.col-40{
  width: 40%;
  float: left;
}
.col-60{
  width: 60%;
  float: left;
}
.col-47{
  width: 47%;
  float: left;
}

</style>
<style>
.page-zhzw .dataListBox tbody tr td{
  padding: 0.055rem .02rem !important;
}
/* 撑开 */
.page-zhzw .officeWork .dataList{
  min-height: 1.1rem;
}
</style>