dzhh-frontend/.svn/pristine/a4/a47e862a4eb48070807e09954bf5ea20013c0497.svn-base

<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '20px' }">
        <chart-card :loading="loading" title="项目总数" :total='data.result'>
          <mini-progress color="rgb(19, 194, 194)" :target="100" :percentage="100" :height="8" />
<!--          <mini-progress color="rgb(0, 153, 204)" :target="80" :percentage="78" :height="8" />-->
<!--&lt;!&ndash;          <a-tooltip title="指标说明" slot="action">&ndash;&gt;-->
<!--&lt;!&ndash;            <a-icon type="info-circle-o" />&ndash;&gt;-->
<!--          </a-tooltip>-->
          <div>
<!--            <trend  style="margin-right: 16px;">-->
<!--              <span slot="term">已建</span>-->
<!--&lt;!&ndash;              12%&ndash;&gt;-->
<!--            </trend>-->
<!--            <trend >-->
<!--              <span slot="term">在建</span>-->
<!--&lt;!&ndash;              11%&ndash;&gt;-->
<!--            </trend>-->

<!--            <trend >-->
<!--              <span slot="term">拟建</span>-->
<!--&lt;!&ndash;              11%&ndash;&gt;-->
<!--            </trend>-->
          </div>
<!--          <template slot="footer">项目总数<span> {{data.result}}</span></template>-->
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="已建项目" :total="data2.result">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="100" :percentage="(data2.result)/(data.result)*100" :height="8" />
          </div>
<!--          <template slot="footer">日订单量<span> {{ '1234' | NumberFormat }}</span></template>-->
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="在建项目" :total='data3.result'>
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="100" :percentage="(data3.result)/(data.result)*100" :height="8" />
          </div>
<!--          <template slot="footer">转化率 <span>60%</span></template>-->
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="拟建项目" :total='data4.result'>
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="100" :percentage="(data4.result)/(data.result)*100" :height="8" />
          </div>

        </chart-card>
      </a-col>
    </a-row>



    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">

      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
          </div>
          <a-tab-pane tab="河流流域面积" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="河流流域面积km²" :dataSource="barData"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="河流流域面积" :list="rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>


        </a-tabs>
      </div>
    </a-card>

<!--    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">-->
<!--      <div class="salesCard">-->
<!--        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">-->
<!--          <div class="extra-wrapper" slot="tabBarExtraContent">-->

<!--          </div>-->

<!--          <a-tab-pane loading="true" tab="岸线利用率" key="1">-->
<!--            <a-row>-->
<!--              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <bar title="岸线利用率%" :dataSource="barData1"/>-->
<!--              </a-col>-->
<!--              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <rank-list title="岸线利用率" :list="rankList1"/>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-tab-pane>-->


<!--        </a-tabs>-->
<!--      </div>-->
<!--    </a-card>-->
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">

          </div>

          <a-tab-pane loading="true" tab="项目类型" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <Pie :dataSource="pieData"></Pie>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="项目类型" :list="rankList2"/>
              </a-col>
            </a-row>
          </a-tab-pane>


        </a-tabs>
      </div>
    </a-card>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">

          </div>

          <a-tab-pane loading="true" tab="河流数量" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <Pie :dataSource="pieData1"></Pie>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="河流数量" :list="rankList3"/>
              </a-col>
            </a-row>
          </a-tab-pane>



        </a-tabs>
      </div>
    </a-card>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">

          </div>
          <a-tab-pane tab="在建项目数量" key="1">
            <a-row>
              <LineChartMultid  :dataSource="linData1" ></LineChartMultid>

            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="拟建项目数量" key="2">
            <a-row>
              <LineChartMultid  :dataSource="linData2" ></LineChartMultid>

            </a-row>
          </a-tab-pane>


        </a-tabs>
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">

          </div>
          <a-tab-pane loading="true" tab="监管事件" key="1">

            <a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1">
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>

        </a-tabs>
<!--        <div class="salesCard">-->
<!--          <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">-->
<!--            <div class="extra-wrapper" slot="tabBarExtraContent">-->

<!--            </div>-->
<!--            <a-tab-pane tab="岸线利用率" key="1">-->
<!--              <a-row>-->
<!--                <BarMultid :dataSource="barData1" :fields="Dfgcfields"></BarMultid>-->

<!--              </a-row>-->
<!--            </a-tab-pane>-->

<!--          </a-tabs>-->
<!--        </div>-->
      </div>

    </a-card>
  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  // import Pie from '../../components/chart/Pie'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import BarMultid from '@/components/chart/BarMultid'
  import StackBar from '@/components/chart/StackBar'

  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import Pie from "../../components/chart/Pie";
  import {getAction, postAction} from "../../api/manage";

  const dataCol1 = [{
    title: '序号',
    align:"center",
    dataIndex: 'reBizCode'
  },{
    title: '监管项目名称',
    align:"center",
    dataIndex: 'type'
  },{
    title: '受理人',
    align:"center",
    dataIndex: 'acceptBy'
  },{
    title: '受理时间',
    align:"center",
    dataIndex: 'acceptDate'
  },{
    title: '存在问题处理情况',
    align:"center",
    dataIndex: 'flowRate',
  }];





  const rankList1=[]
  // const f=['泵站工程','拦河工程','闸坝工程','堤防工程']
  // const n=['255','3461','800','237']
  const rankList2=[]

  let pieData=[]
  let pieData1=[]
  let linData1=[]
  let fields1=[]
  let linData2=[]
  let linData3=[]
  const dataSource1=[
  ]





  export default {
    name: "IndexChart",
    components: {
      Pie,
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      BarMultid,
      HeadInfo,
      StackBar,

    },
    data() {

      return {
        loading: true,
        dataSource1:[],
        center: null,
        rankList2:[],
        rankList3:[],
        rankList1,
        rankList:[],
        barData:[],
        barData1:[],
        Dfgcfields:[],
        pieData,
        pieData1,
        linData1,
        linData2,
        linData3,
        fields1,
        columns:dataCol1,
        ipagination1:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,

        },


        // xingmu,
        // jhjgData1,
        loginfo:{},
        // visitFields:['ip','visit'],
        visitInfo:[],
        indicator: '<a-icon type="loading" style="font-size: 24px" spin />',
        data:'',
        data1:'',
        data2:'',
        data3:'',
        data4:'',
        data5:'',
        data6:'',
        data7:'',
        data8:'',
        data9:'',
        data10:''


      }
    },
    mounted() {
      this.loadcount(),
        this.loadhlcd(),
        this.loadyjcount(),
        this.loadzjcount(),
        this.loadnjcount(),
        this.loadxmcount(),
        this.loadcountriver(),
        this.loadxzjxm(),
        this.loadxnjxm(),
        // this.loaddfcd(),
        this.loadcountjg(),
        this.loadDataSource1(),
        this.dateFormat()
    },
    created() {

      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();
    },
    methods: {
      loadDataSource1(){
        this.dataSource1 = dataSource1.filter(item=>{
          if(!this.indexRegisterType){
            return true
          }
          return item.type==this.indexRegisterType
        })
      },
      dateFormat(time) {
        //将13位时间戳转换成时间格式  输出为2018-10-09
        var date = new Date(time);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
      },
      tableChange1(pagination){
        this.ipagination1.current = pagination.current
        this.ipagination1.pageSize = pagination.pageSize
        this.queryTimeoutInfo()
      },
      getPercentColor(value){
        let p = Number(value)
        if(p>=90 && p<100){
          return 'rgb(244, 240, 89)'
        }else if(p>=100){
          return 'red'
        }else{
          return 'rgb(16, 142, 233)'
        }
      },
      getPercentFormat(value){
        if(value==100){
          return "超时"
        }else{
          return value+"%"
        }
      },
      getFlowRateNumber(value){
        return Number(value)
      },
       async loadcount() {
         this.data = await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/count', {})
         let a=this.data
          // console.log(this.data)
       },
      async loadyjcount() {
        this.data2 = await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/yjcount', {})
        let b=this.data2
      },
      async loadzjcount() {
        this.data3 = await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/zjcount', {})
        let c=this.data3
      },
      async loadnjcount() {
        this.data4 = await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/njcount', {})

      },
      async loadcountriver(){
         this.data6=await getAction('/hzz.hlxx/rmRiver/countriver',{})
        const re = this.data6.result;
        const b=[{ item: '300平方公里以上', count: re[0] },
          { item: '50-300平方公里', count: re[1] },
          { item: '小于50平方公里', count: re[2] },
          { item: '未填写流域面积', count: re[3] },]

        for(let j = 0; j < b.length; j++) {
          pieData1.push(b[j]);
        }
        for (let i = 0; i < b.length; i++) {
          this.rankList3.push({
            name: b[i].item,
            total: b[i].count
          })
        }
      },
      async loadxzjxm(){
        this.data7= await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/zjxm', {})
       let a=this.data7.result
        for (let i = 0; i <a.length; i++) {
          let b = {
            type:a[i].xzqh,
            项目数量:a[i].zj,
          }
          linData1.push(b)
        }

      },
      async loadxnjxm(){
        this.data8= await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/njxm', {})
        let a=this.data8.result


        for (let i = 0; i <a.length; i++) {
          let b = {
            type:a[i].xzqh,
            项目数量:a[i].nj,
          }
          linData2.push(b)
        }
      },
      async loadcountjg(){
        this.data10= await getAction('/hzz.shjsgc.xcjgjl/rmXcjgjl/cxjgjl', {})
        let a=this.data10.result
        for(let i=0;i<a.length;i++) {
          let b={reBizCode:i+1,type:a[i].jcmc,acceptBy:a[i].create_by,acceptDate:this.dateFormat(a[i].create_time),flowRate:a[i].czwtjclqk}
          this.dataSource1.push(b)
        }

      },

      async loadxmcount() {
        this.data5 = await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/xmlxcount', {})
        const re = this.data5.result;
        const b=[{ item: '泵站工程', count: re[0] },
        { item: '闸坝工程', count: re[1] },
        { item: '堤防工程', count: re[2] },
        { item: '拦河工程', count: re[3] },]

        for(let j = 0; j < b.length; j++) {
          pieData.push(b[j]);
        }
        for (let i = 0; i < b.length; i++) {
          this.rankList2.push({
            name: b[i].item,
            total: b[i].count
          })
        }
          fields1=["zj","xm"]
      },
      async loadhlcd() {
        this.data1 = await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/findAllhlcd', {})
        const a=this.data1.result
        for(var key in a){
          this.barData.push({
            x:`${a[key].hlmc}`,
            y:Math.floor(a[key].hlcd)
          })
          // console.log("属性：" + key + ",值："+ jsonData[key]);
        }
        // this.rankList=[]
        for(var key in a) {
          this.rankList.push({
            name: a[key].hlmc,
            total: a[key].hlcd+'km²'
          })
        }
        // console.log(a)
      },

      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
             this.visitInfo = res.result;
           }
         })
      },
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }

  }
</style>