<template>
  <div class="detail_contain">
    <p class="now_page_title">在线组件工具 /  流程设计  / <span>流程监控</span></p>
    <el-row class="in_analysis">
      <!-- 可横向铺满 -->
      <el-col :span="6" class="in_left">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius :show_header="true" title="流程总体概况" class="block">
              <div class="left_1">
               <div ref="left_1_l" class="left_1_l">
                  <img :src="require('@/assets/imgs/data_img_liucheng.gif')" class="left_1_img" />
                  <p><span>流程总数</span> {{all_count}}</p>
                  <p><span>流程实例总数</span> {{all_ex_count}}</p>
                </div>
                <single-circle ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></single-circle>
              </div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="流程实例数趋势分析"
              :buttons_arr="['近7天', '近6个月']"
              @changeButton="changeServiceCellBtn"
              class="block"
            >
             <line-chart v-if="line_data.xAxisData&&line_data.xAxisData.length" class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="in_center">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="流程平均耗时排行"
              class="block"
            >
              <table-um 
              v-if="tableRank.length"
              :headers="tableheaders"
              :stripe="true"
              :height="220"
              :datas="tableRank">
              </table-um>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="实时流程实例分析"
              class="block"
            >
              <BarChart
                :data="bar_data_area"
                :colors="['#1034eb', '#4274f8']"
                :bar_border_radius="[20, 20, 0, 0]"
                :bar_width="26"
                :show_split="true"
              />
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" class="in_right">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="流程超时率分析"
              class="block"
            >
              <BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="流程实例平均耗时分析"
              class="block"
            >
              <multiple-circle class="block-radius-content" :show_center_data="false" :color="color_arr" :data="mult_data" :text="''"></multiple-circle>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <!-- 不可横向铺满，一般为最后一行 -->
      <el-col :span="6" class="in_block">
        <block-radius :show_header="true" title="流程使用率分析" class="block" :buttons_arr="['最多', '最少']" @changeButton="changeAppInfoBtn">
          <toplist
            class="block-radius-content"
            :options="toplistData"
            :target-value="toplistTargetValue"
          ></toplist>
        </block-radius>
      </el-col>
      <el-col :span="18" class="in_block default">
        <block-radius class="block">
          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
        </block-radius>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/process-top-list";
import tableUm from '@/components/table/table-um'
import BarChart from "@/components/e-charts/bar-chart";
import multipleCircle from "@/components/e-charts/multiple_circle";
export default {
  components:{
    BlockRadius,
    singleCircle,
    lineChart,
    Toplist,
    tableUm,
    BarChart,
    multipleCircle
  },
  data(){
    return{
      das_data: {},
      all_count:0,
      all_ex_count:0,
      line_data:{},
      trend_data:{},
      use_data:{},
      toplistData:[],
      toplistTargetValue:70,
      tableheaders:[
            {
              label: "排名",
              prop: "index",
              align: "center",
              width: "80px"
            },
            {
              label: "流程名称",
              prop: "name",
              align: "left",
              minWidtn:'40%',
              type:'click',
              url:'/progress/designer/detail/',
              id:'id',
            },
            {
              label: "耗时（分钟）",
              prop: "time",
              align: "center",
              minWidtn:'30%'
            },
            {
              label: "超时率",
              prop: "val",
              align: "center",
              minWidtn:'30%'
            },
      ],
      tableRank:[],
      bar_data_area:{},
      bar_data_org:{},
      color_arr:["#515fe7",'#36a5ec', "#25bdb1", "#ffc95c", "#e56600", "#e15260"],
      mult_data:[]
    }
  },
  mounted(){
    this.get_process_all()
    this.process_use_time()
    this.process_timeout()
    this.process_num_trend()
    this.now_process_num()
    this.now_process_avg()
    this.process_use()
  },
  methods:{
    changeServiceCellBtn(index){
      console.log(index);
      if(index==0){
        this.deal_trend_data(this.trend_data.day)
      }else{
        this.deal_trend_data(this.trend_data.month)
      }
    },
    changeAppInfoBtn(index){
      console.log(index);
      if(index==0){
        this.deal_use_data(this.use_data.useMost)
      }else{
        this.deal_use_data(this.use_data.useLeast)
      }
    },
    get_process_all(){
      this.$http
        .get(`/apaas/serviceapp/v3/workflows/monitoring/overview`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            this.das_data= {
              num: data.total_timeout_rate*100,
              color: "#e56600",
              text: "总超时率"
            }
            this.all_count = data.wf_total
            this.all_ex_count = data.wf_instance_total
          }
        })
    },
    process_use_time(){
      this.$http
        .get(`/apaas/serviceapp/v3/workflows/monitoring/elapsedTimeStat`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            this.tableRank = []
            data.forEach((e,idx) => {
                this.tableRank.push({
                  index:idx+1,
                  id:e.workflows_id,
                  name:e.wf_name,
                  time:e.elapsed_time,
                  val:parseInt(e.timeout_rate*100)
                })
            });
          }
        })
    },
    process_timeout(){
      this.$http
        .get(`/apaas/serviceapp/v3/workflows/monitoring/timeoutStat`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            var tempx = []
            var tempy = []
            data.forEach(e => {
              tempx.push(e.wf_name)
              tempy.push(parseInt(e.timeout_rate*100))
            });
            this.bar_data_org = {
              legendData: tempx,
              seriesData: tempy
            }
          }
        })
    },
    process_num_trend(){
      this.$http
        .get(`/apaas/serviceapp/v3/workflows/monitoring/instanceStat`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            this.trend_data = data
            this.deal_trend_data(this.trend_data.day)
          }
        })
    },
    now_process_num(){
      this.$http
        .get(`/apaas/serviceapp/v3/workflows/monitoring/instanceRunningStat`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            var tempx = []
            var tempy = []
            data.forEach(e => {
              tempx.push(e.wf_name)
              tempy.push(e.wf_instances)
            });
            this.bar_data_area={
              legendData: tempx,
              seriesData: tempy
            }
          }
        })
    },
    now_process_avg(){
      this.$http
        .get(`/apaas/serviceapp/v3/workflows/monitoring/elapsedTimeAnalyse`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            this.mult_data = []
            for (const key in data) {
              this.mult_data.push({
                name:key,
                value:data[key],
              })
            }
          }
        })
    },
    process_use(){
      this.$http
        .get(`/apaas/serviceapp/v3/workflows/monitoring/useRateStat`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            this.use_data = data
            this.deal_use_data(data.useMost)
          }
        })
    },
    deal_use_data(data){
      var temp = []
      this.toplistData = []
      data.forEach(e => {
        temp.push(e.total_instances)
        this.toplistData.push({
          service_name:e.wf_name,
          request_count: e.total_instances,
          cover:1,
          service_id:{
            id:e.workflows_id,
            source:1
          },
          data_service_type1:124
        })
      });
      this.toplistTargetValue = Math.max(...temp)
    },
    deal_trend_data(data){
      var tempx=[]
      var tempy=[]
      data.forEach(e => {
        tempx.push(e.date)
        tempy.push(e.wf_instances)
      });
      this.line_data = {
        xAxisData: tempx,
        seriesData: [
          {
            name: "趋势",
            data: tempy
          }
        ],
      }
    },
  }
}
</script>

<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 10px;
  height: calc(100% - 55px);
}
.now_page_title {
  margin: 15px 0;
  margin-left: 10px;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.in_analysis {
  height: 100%;
  width: 100%;
  min-width: 1700px;
}
.in_block {
  height: 300px;
  padding: 10px;
}
.block {
  width: 100%;
  height: 100%;
}
.left_1 {
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.left_block {
  width: 280px;
  height: 100%;
  padding: 10px 0 0 0;
}
.left_1_l {
  padding-top: 20px;
}
.left_1_l p{
  font-size: 26px;
  color: #515fe7;
}
.left_1_l p span{
  font-size: 14px;
  color: #242c43;
  width: 100px;
  display: inline-block;
}
.left_1_title {
  width: 100%;
}
.left_1_num {
  font-size: 32px;
  color: #515fe7;
  width: 100%;
}
.left_1_img {
  width: 126px;
  height: 138px;
  display: inline-block;
}
.default {
  text-align: center;
}
.default_img {
  width: 330px;
  height: 230px;
}
.left_1_r {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.block-radius-content {
  width: 100%;
  height: calc(100% - 36px);
  margin-top: 15px;
}
</style>
