TMS/plg-tms-std-web-vue/public/jq/pages/home/home.html

<link rel="stylesheet" type="text/css" href="/ops/pages/home/css/home.css" />
<script src="/jq/prologui/dist/vendors/echarts/dist/echarts.js"></script>
<script src="/jq/prologui/dist/vendors/echarts/dist/echarts.js"></script>


<div id="home" home>
  <div class="plg-tab-container ">


    <div class="home-grid">
      <div class="home-grid-item">
        <div class="plg-flex">
          <i class="home-icon-a"></i>
          <div class="home-grid-item-wrap">
            <div class="title">
              <h3>登记服务</h3>
            </div>
            <div class="v-count value">0</div>
          </div>
        </div>
      </div>
      <div class="home-grid-item">
        <div class="plg-flex">
          <i class="home-icon-d"></i>
          <div class="home-grid-item-wrap">
            <div class="title">
              <h3>登记接口</h3>
            </div>
            <div class="v-count value">0</div>
          </div>
        </div>


      </div>
      <div class="home-grid-item">
        <div class="plg-flex">
          <i class="home-icon-b"></i>
          <div class="home-grid-item-wrap">
            <div class="title">
              <h3>在线服务</h3>
            </div>
            <div class="v-count value">0</div>
          </div>
        </div>
      </div>
      <div class="home-grid-item">
        <div class="plg-flex">
          <i class="home-icon-c"></i>
          <div class="home-grid-item-wrap">
            <div class="title">
              <h3>在线实例</h3>
            </div>
            <div class="v-count value">0</div>
          </div>
        </div>
      </div>

      <div class="home-grid-item user-map">
        <div class="plg-flex" style="flex-direction: column;align-items:normal">
          <div class="title">
            <h3>用户状态</h3>
          </div>
          <div id="userMap" class="plg-flex-item"></div>
        </div>

      </div>
      <div class="home-grid-item port-map">
        <div class="plg-flex" style="flex-direction: column;align-items:normal">
          <div class="title">
            <h3>接口分布</h3>
          </div>
          <div id="portMap" class="plg-flex-item"></div>

        </div>
      </div>
    </div>
  </div>

</div>



<script>

  (function () {
    //页面全部加载完成


    var dataList = [
      {
        color: '#ffb800',
        value: 0,
        name: '末激活'
      },
      {
        color: '#1e9fff',
        value: 0,
        name: '正常'
      },
      {
        color: '#ff5722',
        value: 0,
        name: '冻结'
      },

    ]







    $(document).ready(function () {


      /*4个模块*/
      var dom = document.querySelectorAll(".v-count");
      [APIS.home.service(), APIS.home.entry(), APIS.home.regService(), APIS.home.reginstance()]
        .forEach(function (item, index) {
          Prolog.ajax({
            url: item,
            type: "get",
            success: function (resolve) {
              if (resolve.success) {
                var sp = 10;
                var tiem = setInterval(function () {
                  if (dom[index].innerText == resolve.data) return clearInterval(tiem)
                  dom[index].innerText = Number(dom[index].innerText) + 1;
                }, sp += 10)
              }
            }
          })
        })



      /*用户状态*/
      Prolog.ajax({
        url: APIS.home.userStatus(),
        type: "get",
        success: function (resolve) {
          if (resolve.success) {
            var n = 0;
            resolve.data.forEach(function (item) {
              n += item.count;
              switch (item.status) {
                case 0: dataList[0].value = item.count
                  return
                case 1: dataList[1].value = item.count
                  return
                case 2: dataList[2].value = item.count
                  return
              }
            })
            var userMapOption = {
              title: {
                text: n,
                subtext: '全部',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 30,
                  fontWeight: 'normal',
                  color: "#666",
                },
                subtextStyle: {
                  color: '#666',
                  fontSize: 16
                },
              },
              grid: {
                bottom: 130,
                left: 0,
                right: '10%'
              },
              legend: {
                show: false,
                orient: 'vertical',
                top: "middle",
                right: "5%",
                textStyle: {
                  color: '#f2f2f2',
                  fontSize: 25,

                },
                icon: 'roundRect'
              },
              series: [
                // 主要展示层的
                {
                  radius: ['35%', '71%'],
                  center: ['50%', '50%'],
                  type: 'pie',
                  itemStyle: {
                    normal: {

                      color: function (params) {
                        return dataList[params.dataIndex].color
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: true,
                      length: 20,
                      length2: 40,
                      lineStyle: {
                        color: '#d3d3d3'
                      },
                      align: 'right'
                    },
                    color: "#000",
                    emphasis: {
                      show: true
                    }
                  },
                  label: {
                    normal: {
                      formatter: function (params) {
                        var str = '';
                        switch (params.name) {
                          case '末激活':
                            str = '\n{nameStyle|末激活 }' + '{a|' + params.value + '}';
                            break;
                          case '正常':
                            str = '\n{nameStyle|正常 }' + '{b|' + params.value + '}';
                            break;
                          case '冻结':
                            str = '\n{nameStyle|冻结 }' + '{c|' + params.value + '}';
                            break;

                        }

                        return str
                      },
                      padding: [0, 0],
                      height: 40,
                      rich: {

                        nameStyle: {
                          fontSize: 14,
                          color: "#555",
                          align: 'left'
                        },
                        a: {
                          align: 'left',
                          fontSize: 20,
                          color: dataList[0].color,
                        },
                        b: {
                          fontSize: 20,
                          align: 'left',
                          color: dataList[1].color,

                        },
                        c: {
                          fontSize: 20,
                          align: 'left',
                          color: dataList[2].color,

                        },

                      }
                    }
                  },
                  data: [
                    {
                      value: dataList[0].value,
                      name: '末激活'
                    },
                    {
                      value: dataList[1].value,
                      name: '正常',
                    },
                    {
                      value: dataList[2].value,
                      name: '冻结'
                    }

                  ],
                },
                // 边框的设置
                {

                  radius: ['65%', '71%'],
                  center: ['50%', '50%'],
                  type: 'pie',
                  label: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: false
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: false
                    }
                  },
                  animation: false,
                  tooltip: {
                    show: false
                  },
                  itemStyle: {
                    normal: {
                      color: 'rgba(250,250,250,0.5)'
                    }
                  },
                  data: [{
                    value: 1,
                  }],
                }
              ]
            };
            echarts.init(document.getElementById("userMap")).setOption(userMapOption);

          }
        }
      });




      /*接口分布*/

      Prolog.ajax({
        url: APIS.home.distribute(),
        type: "get",
        success: function (resolve) {
          if (resolve.success) {
            var jkdata= resolve.data;
            var workOption = {
              tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {

                  animation: false
                },
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: "#6a7985"
                  }
                }
              },
              grid: {
                top: '10%',
                left: '2%',
                right: '5%',
                bottom: '5%',
                containLabel: true,
                borderWidth: 0,
              },
              xAxis: [{
                type: 'category',
                boundaryGap: true,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(0,0,0,0)'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(0,0,0,0.1)',
                  }
                },
                data: (function () {
                  var res =[];
                   jkdata.filter(function(item){
                   return res.push(item.serviceName)
                  });
                  return res

                })(),
                axisLabel: {
                  //rotate :45,
                  show: true,
                  textStyle: {
                    color: '#666'
                  }
                }
              }],

              yAxis: [{
                type: 'value',
                min: 0,
               // max: 100,
                name: "数量",
                position: "left",
                nameTextStyle: {
                  color: "#666"
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(0,0,0,0.1)'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#666'
                  }
                }
              }],
              series: [{
              //  name: 'CPU占用率',
                type: 'bar',
               // barWidth:20,
                animation: true,
                areaStyle: {
                  color: 'rgba(51, 204, 255,0.6)'
                },
                color: 'rgb(51, 204, 255)',
                data: (function(){
                  var res =[];
                   jkdata.filter(function(item){
                   return res.push(item.count)
                  });
                  return res
                })(),
                smooth: true,
                boundaryGap: true,

              },


              ]
            };
            echarts.init(document.getElementById("portMap")).setOption(workOption);

          }



        }

      })





    })







    // Promise.resolve(UserDom).then(function(element){
    //     debugger




    // })
    //       window.addEventListener('DOMContentLoaded', (event) => {
    //     console.log('DOM fully loaded and parsed');
    //     debugger
    // });
    // addEventListener("load",function(){
    //   console.log("load")
    //   debugger
    // })






  })()

</script>