<template>
    <div id="welcome">
      <div class="top">
        <h1 class="topTitle">大盘数据分析看板</h1>
        <RadioGroup v-model="timeDomain" type="button" size="small" class="right">
            <Radio label="TODAY">本日</Radio>
            <Radio label="CURRENT_MONTH">本月</Radio>
            <Radio label="CURRENT_YEAR">本年</Radio>
            <Radio label="TOTAL">累计</Radio>
        </RadioGroup>
      </div>
      <ul class="topBox">
        <li class="item">
          <p>代理商数</p>
          <p>{{top.partnerNum}}</p>
        </li>
        <li class="item">
          <p>服务商数</p>
          <p>{{top.labNum}}</p>
        </li>
        <li class="item">
          <p>检验金额</p>
          <p>¥{{top.amount}}万</p>
        </li>
        <li class="item">
          <p>应收金额</p>
          <p>¥{{top.settleAmount}}万</p>
        </li>
        <li class="item">
          <p>实收金额</p>
          <p>¥{{top.actualAmount}}万</p>
        </li>
        <li class="item">
          <p>订单总数</p>
          <p>{{top.orderTotal}}</p>
        </li>
        <li class="item">
          <p>标本总数</p>
          <p>{{top.specimenTotal}}</p>
        </li>
        <li class="item">
          <p>报告单总数</p>
          <p>{{top.reportTotal}}</p>
        </li>
        <li class="item">
          <p>开单客户总数</p>
          <p>{{top.billHosNum}}</p>
        </li>
      </ul>
      <div class="mainBox">
        <div class="leftBox">
          <div class="img1">
             <div class="img1Title">
                <h2 class="topTitle" >大盘数据分析看板</h2>
             </div>
            <div id="chart1" style="height:330px;"></div>
          </div>
          <div class="img2">
            <div class="topTab">
               <h2 class="topTitle">区域代理商数据折线图</h2>
              <RadioGroup v-model="imgTab2" type="button" size="small" class="right">
                <Radio label="AMOUNT">销售金额</Radio>
                <Radio label="PARTNER">代理商数</Radio>
                <Radio label="LAB">服务商数</Radio>
                <Radio label="HOSPITAL">合作客户数</Radio>
              </RadioGroup>
            </div>
            <div id="chart2" style="height:325px;"></div>
          </div>
        </div>
        <div class="rightBox">
          <div class="img3">
            <div class="img3Title">
              <h2 class="topTitle">服务商占比图</h2>
              <RadioGroup v-model="imgTab3" type="button" size="small" class="right">
                <Radio label="NUM">检测数量</Radio>
                <Radio label="MONEY">检验金额</Radio>
              </RadioGroup>
            </div>
             <div id="chart3" style="height:250px;"></div>
          </div>
          <div class="img4">
            <div class="img1Title">
                <h2 class="topTitle">医诺云检服务地图</h2>
                <span class="viewReport right" @click="viewBtn"><Icon type="ios-list"/>查看报表</span>
             </div>
            <div id="chinaMap" style="width:560px;height:400px;"></div>
            <ul class="imgDetail">
              <li>服务范围覆盖全国</li>
              <li><span class="tip">{{img4.regionNum}}</span>个省区</li>
              <li><span class="tip">{{img4.partnerTotal}}</span>个代理商团队</li>
              <li><span class="tip">{{img4.labTotal}}</span>家专业医学检验服务商</li>
              <li><span class="tip">{{img4.hospitalTotal}}</span>家医疗卫生机构</li>
            </ul>
          </div>
        </div>
      </div>
       <!--弹出框-->
      <div class="addItem" v-if="showModel">
        <div class="modelBox">
          <p class="modelTitle">
            <span>大盘数据分析报表</span>
            <span class="exit" @click="cancelBtn"><Icon type="ios-close-circle-outline" /></span>
          </p>
          <div class="modelMain">
            <ul class="modelSearch">
              <li class="item">
                <span>省</span>
                <Select v-model="msg.province" clearable size="small" style="width:150px" @on-change="getCity">
                  <Option v-for="item in provinceList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
              </li>
              <li class="item">
                <span>市</span>
                <Select v-model="msg.city" clearable size="small" style="width:150px">
                  <Option v-for="item in cityList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
              </li>
              <li class="item">
                <span>时间</span>
                <DatePicker v-model="msg.startDate" type="date" clearable placeholder="开始日期" size="small" style="width: 120px"></DatePicker>
                至
                <DatePicker v-model="msg.endDate" type="date" clearable placeholder="结束日期" size="small" style="width: 120px"></DatePicker>
              </li>
              <li class="item">
                <Button class="modelBtn" icon="ios-search" size="small" style="marginRight:15px" @click="tableSearch">搜索</Button>
                <Button class="modelBtn" icon="ios-log-out" size="small" @click="dataOutput">数据导出</Button>
              </li>
            </ul>
            <Table border width="1080" height="430" size="small" :columns="columns" :data="tableData"></Table>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import "echarts/map/js/china"
import  polyline from './../assets/js/polylineYN'
import axios from './../assets/js/axios'
import { formatDate } from "./../tools/tools"
import { baseURL } from "./../config"
    export default {
        name: "Welcome",
        data(){
          return{
            timeDomain:'CURRENT_MONTH',
            top:{
              actualAmount:'',
              amount:'',
              billHosNum:'',
              hospitalNum:'',
              labNum:'',
              orderTotal:'',
              partnerNum:'',
              reportTotal:'',
              settleAmount:'',
              specimenTotal:'',
            },
            imgTab3:'NUM',
            imgTab2:'AMOUNT',
            img4:{
              hospitalTotal:0,
              labTotal:0,
              partnerTotal:0,
              regionNum:0
            },
            showModel:false,
            partnerTypeList:[],
            msg:{
              city:'',
              endDate:'',
              province:'',
              startDate:''
           },
            provinceList:[],
            cityList:[],
            columns: [
              {title: '代理商名称',key: 'partnerName',width:120,fixed: 'left'},
              {title: '服务类型',key: 'serviceType',width:100},
              {title: '送检服务商',key: 'labNames',width:150},
              {title: '团队规模',key: 'personNum',width:100},
              {title: '检验金额',key: 'amount',width:100},
              {title: '应收金额',key: 'settleAmount',width:100},
              {title: '实收金额',key: 'actualAmount',width:100},
              {title: '订单数',key: 'orderTotal',width:100},
              {title: '标本量',key: 'specimenTotal',width:100},
              {title: '报告单数',key: 'reportTotal',width:100},
              {title: '合作客户数',key: 'hosNum',width:100},
              {title: '开单客户数',key: 'billHosNum',width:100},
            ],
            tableData:[],
            baseURL:'',



          }
        },
        mounted() {
         // this.cccc()
          this.getProvince()
          this.getMenu()
          this.btnToSummary ()
          this.getchart1()
          this.getchart2()
          this.getchart3()
          this.getchart4()
          this.init ()
        },
        methods:{
          init () {
            this.baseURL = baseURL
          },
          getMenu(){
            let _this = this
            /*取出字典项*/
            let selectList = JSON.parse ( localStorage.getItem('selectList') )
            for(let m of selectList){
              if(m.t=="partner_type"){
                _this.partnerTypeList = m.list
              }
            }
          },
          getProvince () {
            let _this = this
            axios.post('/common/common/selectProvinceList',{
            }).then(res=>{
              if(res){
                _this.provinceList = res.data.data
              }
            })
          },
          getCity(value){
            let _this=this;
            let qs=require('qs')
            _this.cityCode=''
            axios.post('/common/common/selectNextList',qs.stringify({
              regionCode:value
            })).then(res=>{
              if(res){
                 _this.cityList = res.data.data
              }
            })
          },
          /*顶部汇总数据 */
          btnToSummary () {
            let _this = this
            axios.post('/platform-manager/dataPanel/getDataCountGather',{
              month:'',
              timeDomain:_this.timeDomain
            }).then(res => {
              if (res) {
                let temp = res.data.data
                _this.top.actualAmount = temp.actualAmount,
                _this.top.amount = temp.amount,
                _this.top.billHosNum = temp.billHosNum,
                _this.top.hospitalNum = temp.hospitalNum,
                _this.top.labNum = temp.labNum,
                _this.top.partnerNum = temp.partnerNum,
                _this.top.reportTotal = temp.reportTotal,
                _this.top.settleAmount = temp.settleAmount,
                _this.top.specimenTotal = temp.specimenTotal,
                _this.top.orderTotal = temp.orderTotal
              }
            })
          },
          /*图 1 */
          getchart1(){
            let _this = this
            var myChart = echarts.init(document.getElementById('chart1'),polyline);
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    x: 'right',
                    data:['报告单总数','检验金额','订单总数','标本数','开单客户数']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:[]
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            };
            axios.post('/platform-manager/dataPanel/getSaleDataTimeCountTrend',{
              month:'',
              timeDomain:_this.timeDomain
            }).then(res => {
              if (res) {
                let xData = []
                let yData1 = []
                let yData2 = []
                let yData3 = []
                let yData4 = []
                let yData5 = []
                for (let i of res.data.data) {
                  xData.push(i.time)
                  yData1.push(i.amount)
                  yData2.push(i.reportTotal)
                  yData3.push(i.orderTotal)
                  yData4.push(i.specimenTotal)
                  yData5.push(i.orderHosTotal)
                }
                myChart.setOption({
                    xAxis: {
                        data: xData
                    },
                    series: [{
                        name:'报告单总数',
                        type:'line',
                        data:yData2
                    },
                    {
                        name:'检验金额',
                        type:'line',
                        data:yData1
                    },
                    {
                        name:'订单总数',
                        type:'line',
                        data:yData3
                    },
                     {
                        name:'标本数',
                        type:'line',
                        data:yData4
                    },
                    {
                        name:'开单客户数',
                        type:'line',
                        data:yData5
                    },
                    ]
                });
              }
            })
            myChart.setOption(option);
          },
          /*图2 */
          getchart2(){
            let _this = this
            axios.post('/platform-manager/dataPanel/getRegionDataTimeCountTrend',{
              dataType:_this.imgTab2,
              month:'',
              timeDomain:_this.timeDomain
            }).then(res => {
              if (res) {
                let temp = res.data.data
                let legendData = []
                let xData = []
                let seriesData = []
                for (let i of temp) {
                    xData.push(i.time)
                    for (let j of i.dataCounts) {
                      legendData.push(j.regionName)
                    }
                }
                for (let p = 0;p<temp[0].dataCounts.length;p++) {
                    var obj ={ name:'',type:'line',data:[]}
                    obj.name = temp[0].dataCounts[p].regionName
                    for (let q= 0;q<temp.length;q++) {
                      obj.data.push(temp[q].dataCounts[p].count)
                    }
                    seriesData.push(obj)
                }
                var myChart = echarts.init(document.getElementById('chart2'),polyline);
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        x: 'right',
                        data:legendData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesData
                };
                myChart.setOption(option);
              }
              
            })
           
          },
          /*图3 */
          getchart3(){
            let _this = this
            var myChart = echarts.init(document.getElementById('chart3'));
            var option = {
                tooltip: {
                     trigger: 'items',
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 5,
                    top: 10,
                    bottom: 10,
                    data:[]
                },
                //color: ['#dbecff','#c2deff','#a8d1ff','#8fc3ff','#75b6ff','#58a1f5','#5194e0','#4074b1'],
                color: ['#4074b1','#5194e0','#58a1f5','#75b6ff','#8fc3ff','#a8d1ff','#c2deff','#dbecff'],
                series: [
                    {
                        // name:'访问来源',
                        type:'pie',
                        radius: ['40%', '80%'],
                        center: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                formatter: _this.imgTab3 === 'NUM'?'{c}':'{c}'+'万'
                            },
                        },
                        labelLine: {
                          show:true
                        },
                        data:[]
                    }
                ]
            };
            axios.post('/platform-manager/dataPanel/getLabInspectDataCount',{
              month:'',
              timeDomain:_this.timeDomain
            }).then(res => {
              if (res) {
                  let legendData = []
                  let seriesDataM = []//金额
                  let seriesDataN = []
                  for (let i of res.data.data) {
                    legendData.push(i.labName)
                    let objM = {}
                    let objN = {}
                    objM.name = i.labName
                    objM.value = i.amount
                    objN.name = i.labName
                    objN.value = i.inspectionTotal
                    seriesDataM.push(objM)
                    seriesDataN.push(objN)
                  }
                myChart.setOption({
                    legend: {
                        data:legendData
                    },
                    series:_this.imgTab3 === 'NUM'?{data:seriesDataN}:{data:seriesDataM}
                });
              }
            })
            myChart.setOption(option);
          },
          /**图4 */
          getchart4 () {
            let _this = this
            axios.post('/platform-manager/dataPanel/getRegionServiceDistribution',{
            }).then(res => {
              if (res) {
                    _this.img4.hospitalTotal = res.data.data.hospitalTotal
                    _this.img4.labTotal = res.data.data.labTotal
                    _this.img4.partnerTotal = res.data.data.partnerTotal
                    _this.img4.regionNum = res.data.data.regionNum
                    let temp = res.data.data.regionServDiss
                    let yData1 = []
                    let yData2 = []
                    let yData3 = []
                    for (let i of temp) {
                      let obj1 = {}
                      let obj2 = {}
                      let obj3 = {}
                      obj1.name = i.regionName
                      obj2.name = i.regionName
                      obj3.name = i.regionName
                      obj1.value = i.hospitalNum
                      obj2.value = i.labNum
                      obj3.value = i.partnerNum
                      yData1.push(obj1)
                      yData2.push(obj2)
                      yData3.push(obj3)
                    }
                    var myChart = echarts.init(document.getElementById("chinaMap"));
                    var option= {
                    backgroundColor: '#fff',  //设置背景颜色
                    tooltip: {
                      trigger: 'item',
                        formatter: function(params) {
                            var res = params.name+'<br/>';
                            var myseries = option.series;
                            for (var i = 0; i < myseries.length; i++) {
                                for(var j=0;j<myseries[i].data.length;j++){
                                    if(myseries[i].data[j].name==params.name){
                                        res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
                                    }
                                }
                            }
                            return res;
                        }
                  },
                    //左侧小导航图标
                    visualMap: {
                        x: 'left',
                        y: 'bottom',
                        splitList: [
                            {start: 0, end:10000000000},
                        ],
                        color: ['#a5ad00']
                    },
                    //配置属性
                    series: [{
                          name: '代理商',
                          type: 'map',
                          mapType: 'china',
                          roam: false,
                          zoom:1.2,
                          data:yData3
                      },
                      {
                          name: '检验机构',
                          type: 'map',
                          mapType: 'china',
                          roam: false,
                          zoom:1.2,
                          data:yData2
                      },
                      {
                          name: '医疗机构',
                          type: 'map',
                          mapType: 'china',
                          roam: false,
                          zoom:1.2,
                          data:yData1
                      },],   
                };  
                myChart.setOption(option);     
              }
            })

          },
          /*查看报表 */
          viewBtn () {
            this.showModel = true
            this.getTableData()
          },
        getTableData () {
            let _this = this
            axios.post('/platform-manager/dataPanel/getDataAnalyzeReport',{
              city:_this.msg.city,
              endDate:formatDate(_this.msg.endDate,'01','01'),
              province:_this.msg.province,
              startDate:formatDate(_this.msg.startDate,'01','01')
            }).then(res=>{
              if(res){
                let temp = res.data.data
                for (let i of temp) {
                  i.labNames = i.labNames.join(',')
                  for (let j of _this.partnerTypeList) {
                    if (i.serviceType == j.code) {
                      i.serviceType = j.name
                    }
                  }
                }
                _this.tableData = temp

              }
            })
        },
        tableSearch () {
          this.getTableData ()
        },
        cancelBtn () {
          this.showModel = false
          this.tableData = []
          this.msg.city = ''
          this.msg.endDate = ''
          this.msg.province = ''
          this.msg.startDate = ''
        },
        /*数据导出 */
        dataOutput () {
            let xhr = new XMLHttpRequest();
            let formData = new FormData();
            // formData.append('endDate',formatDate(this.endDate,'01','01'));
            xhr.open('get', `${this.baseURL}platform-manager/dataPanel/dataAnalyzeReport/excelExport?city=${this.msg.city}&endDate=${this.msg.endDate}&province=${this.msg.province}&startDate=${this.msg.startDate}`, true);
            xhr.setRequestHeader("token", sessionStorage.getItem('adminToken'));
            xhr.responseType = 'blob';
            xhr.onload = function (e) {
              if (this.status == 200) {
                let blob = this.response;
                let data = new Blob([blob],{type:"application/vnd.ms-excel"});
                let downloadUrl = window.URL.createObjectURL(data);
                let anchor = document.createElement("a");
                anchor.href = downloadUrl;
                anchor.download = "医诺云检"+new Date().toLocaleTimeString()+".xls";
                anchor.click();
                window.URL.revokeObjectURL(data)
              }
            };
            xhr.send(formData);
        }
    },
        watch:{
          timeDomain:function () {
            this.btnToSummary()
            this.getchart1()
            this.getchart2()
            this.getchart3()
            this.getchart4()
          },
          imgTab3:function () {
            this.getchart3()
          },
          imgTab2:function () {
            this.getchart2()
          }
        },
    }
</script>

<style scoped>
#welcome{
  min-width: 1200px;
  height: 100%;
  overflow-x: auto;
}
#welcome .topTitle{
  font-family:'Microsoft YaHei';
  font-size: 16px;
  display: inline-block;
}
#welcome .topBox{
  width: 88%;
  margin: 10px 0 20px 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#welcome .topBox .item{
  text-align: center;
  width: 11%;
  font-weight:bold;
  border-right:2px solid #ccc;
}
#welcome .topBox .item:last-child{
  border: 0;
}
#welcome .topBox .item p:last-child{
  font-size: 16px;
  color:#FF7843;
}
#welcome .mainBox{
  min-height: 750px;
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#welcome .mainBox .leftBox{
    width: 49%;
    border: 1px solid #000;
}
#welcome .mainBox .rightBox{
   width: 50%;
   border: 1px solid #000;
}
#welcome .mainBox .leftBox .img1{
  height: 50%;
  border-bottom: 1px solid #000;
}
#welcome .mainBox .img1Title{
  height: 50px;
  line-height: 50px;
  padding: 0 50px 0 10px;
}
#welcome .mainBox .leftBox .img2{
  height: 50%;
}
#welcome .mainBox .leftBox .img2 .topTab{
  height: 50px;
  line-height: 50px;
  margin:0 50px 0 10px;
}
#welcome .mainBox .leftBox .img2 .topTab h2{
  display: inline-block;
}
#welcome .mainBox .rightBox .img3{
  height: 40%;
  border-bottom: 1px solid #000;
}
#welcome .img3 .img3Title{
  height: 50px;
  line-height: 50px;
  padding: 0 50px 0 10px;
}
#welcome .img3 .img3Title h2{
  display: inline-block;
}
#welcome .mainBox .rightBox .img4{
  height: 60%;
  position: relative;
}
#welcome .img4 .imgDetail {
  position: absolute;
   font-size: 16px;
  right: 5px;
  bottom: 30px;
}
#welcome .img4 .imgDetail li {
  margin: 8px 0;
}
#welcome .img4 .imgDetail .tip{
  color:#FF7843;
}
/*查看报表*/
#welcome .viewReport{
  cursor: pointer;
  color:#0983ef;
  font-size: 16px;
  /* position:absolute;
  right:5px;
  top:5px; */
}
#welcome .viewReport i{
  font-size: 24px;
  font-weight: bold;
}
 /*弹出框*/
  #welcome .addItem{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #welcome .modelBox{
    position: absolute;
    width: 1100px;
    height: 550px;
    top:5px;
    left: 50%;
    background-color: #fff;
    margin-left: -550px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #welcome .modelTitle{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    background-color:#fff;
    color: #2c3e50;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  #welcome .exit{
    position: absolute;
    font-size: 20px;
    right: 20px;
    cursor: pointer;
  }
  #welcome .addItem .modelBtn{
    background-color: #4074b1;
    color:#fff;
    border: 0;
  }
  #welcome .addItem .modelBox .modelMain{
    padding: 10px;
  }
  #welcome .addItem .modelBox .modelMain .modelSearch{
    display:flex;
    flex-flow: row nowrap;
    margin-bottom: 5px;
 }
 #welcome .addItem .modelBox .modelMain .modelSearch .item{
   margin-right: 15px;
 }
</style>
