<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> 35</p>
                  <p><span>流程实例总数</span> 2,380</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 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 
              :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: {
        num: 80,
        color: "#e56600",
        text: "总超时率"
      },
      line_data:{
        xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'],
        seriesData: [
          {
            name: "趋势",
            data: [100,200,500,1000,1800,500]
          }
        ],
      },
          toplistData:[
            {
              service_name:'保安资格申请',
              request_count: 50,
              cover:1,
              service_id:{
                id:1,
                source:1
              },
              data_service_type1:124
            },
            {
              service_name:'保安考试流程',
              request_count: 10,
              cover:1,
              service_id:{
                id:1,
                source:1
              },
              data_service_type1:124
            },
            {
              service_name:'外国人永久居留资格申请',
              request_count: 25,
              cover:1,
              service_id:{
                id:1,
                source:1
              },
              data_service_type1:124
            },
            {
              service_name:'大型焰火燃放资格申请',
              request_count: 30,
              cover:1,
              service_id:{
                id:1,
                source:1
              },
              data_service_type1:124
            },
            {
              service_name:'保安培训机构许可证申请流程',
              request_count: 70,
              cover:1,
              service_id:{
                id:1,
                source:1
              },
              data_service_type1:124
            },
          ],
          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:[
            {
              index:1,
              id:1,
              name:'保安许可资格申请',
              time:18,
              val:'10%'
            },
            {
              index:1,
              name:'保安考试流程',
              id:3,
              time:10,
              val:'15%'
            },
            {
              index:1,
              name:'外国人永久居留资格申请',
              id:4,
              time:20,
              val:'30%'
            },
            {
              index:1,
              name:'大型焰火燃放资格申请',
              id:5,
              time:35,
              val:'20%'
            },
            {
              index:1,
              id:6,
              name:'保安培训机构许可证申请流程',
              time:40,
              val:'10%'
            },
          ],
          bar_data_area:{
            legendData: ['保安资格','大型焰火燃放资格','外国人永久居留资格','保安培训机构许可证'],
            seriesData: [
              55,44,33,22
            ]
          },
          bar_data_org:{
            legendData: ['保安资格','大型焰火燃放资格','外国人永久居留资格','保安培训机构许可证'],
            seriesData: [
              55,44,33,22
            ]
          },
          color_arr:["#274fee",'#36a5ec', "#25bdb1", "#ffc95c", "#e56600", "#e15260"],
          mult_data:[
            {
              name:'5分钟内',
              value:10,
            },
            {
              name:'1小时内',
              value:15,
            },
            {
              name:'1天内',
              value:20,
            },
            {
              name:'7天内',
              value:8,
            },
            {
              name:'30天内',
              value:2,
            },
            {
              name:'30天以上',
              value:1,
            },
          ]
    }
  },
  methods:{
    changeServiceCellBtn(index){
      console.log(index);
    },
    changeAppInfoBtn(index){
      console.log(index);
    },
  }
}
</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>
