<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("lang.my_application_data_analysis") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <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 class="left_block">
                  <div ref="left_1_l" class="left_1_l">
                    <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
                    <div class="left_1_msg">
                      <div class="left_1_title">应用总数</div>
                      <div class="left_1_num">{{overview.total}}</div>
                    </div>
                  </div>
                  <div class="chain">
                    月环比
                    <span
                      class="chain_mid"
                      :class="overview.month_chain >= 0 ? 'chain_up' : 'chain_down'"
                    >
                      {{ Math.abs(overview.month_chain) }}%
                      <img
                        :src="overview.month_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
                      />
                    </span>周环比
                    <span :class="overview.week_chain >= 0 ? 'chain_up' : 'chain_down'">
                      {{ Math.abs(overview.week_chain) }}%
                      <img
                        :src="overview.week_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
                      />
                    </span>
                  </div>
                  <div class="left_1_line"></div>
                  <div class="left_1_l_bottom">
                    日均被部署次数
                    <span class="left_1_l_bottom_msg">{{overview.day_count}}</span>（次）
                  </div>
                </div>
                <div class="left_1_right">
                  <WaterPolo :datas="water_polo" class="water_polo" />
                </div>
              </div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="应用调用次数分析"
              :buttons_arr="['近7天', '近30天']"
              @changeButton="changeServiceCellBtn"
              class="block"
            >
              <Graph v-if="JSON.stringify(graph_arr)!=='{}'" :data="graph_arr" />
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="应用类型分析"
              :buttons_arr="['构建的应用', '申请的应用 ']"
              @changeButton="changeServiceTypeBtn"
              class="block"
            >
              <multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
            </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="应用使用领域统计"
              :buttons_arr="['构建的应用', '申请的应用']"
              @changeButton="changeAppAreaTypeBtn"
              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-col :span="24" class="in_block">
            <block-radius :show_header="true" title="应用热门搜索" class="block">
              <div class="block-radius-content service-hot-search">
                <div class="left-content">
                  <div class="hot-line">
                    <p class="hot-line-title">搜索用户数</p>
                    <div class="hot-line-chart">
                      <!-- 折线图 -->
                      <p class="sparkline-text">
                        <span>{{sparkline1.num}}</span>
                        <span
                          :style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
                        >
                          {{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
                          <img
                            v-if="sparkline1.up>0"
                            src="../../assets/imgs/icon_up.png"
                            alt
                          />
                          <img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
                        </span>
                      </p>
                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
                        <sparklineCurve
                          :refLineStyles="spRefLineStyles3"
                          :refLineType="false"
                          :data="sparkline1.arr"
                          :limit="sparkline1.arr.length"
                          :styles="spCurveStyles2"
                        />
                      </sparkline>
                    </div>
                  </div>
                  <div class="hot-line">
                    <p class="hot-line-title">人均搜索次数</p>
                    <div class="hot-line-chart">
                      <!-- 折线图 -->
                      <p class="sparkline-text sparkline-text-user">
                        <span>{{sparkline2.num}}</span>
                        <span
                          :style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
                        >
                          {{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
                          <img
                            v-if="sparkline2.up>0"
                            src="../../assets/imgs/icon_up.png"
                            alt
                          />
                          <img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
                        </span>
                      </p>
                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
                        <sparklineCurve
                          :refLineStyles="spRefLineStyles3"
                          :refLineType="false"
                          :data="sparkline2.arr"
                          :limit="sparkline2.arr.length"
                          :styles="spCurveStyles3"
                        />
                      </sparkline>
                    </div>
                  </div>
                </div>
                <div class="right-content apaas_scroll">
                  <apass-table
                    class="hot-search-table"
                    :header="hotSearchHeader"
                    :data="hotSearchData"
                    :padding-left="0"
                    @sort-change="hotSearchSortChange"
                  ></apass-table>
                </div>
              </div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              class="block"
              :show_header="true"
              title="应用总数变化趋势"
              :buttons_arr="['近14天', '近30天']"
              @changeButton="changeAppTotalChangeBtn"
            >
              <line-chart
                v-if="JSON.stringify(line_data)!=='{}'"
                class="block-radius-content"
                :data="line_data"
                :zzfw="true"
              ></line-chart>
            </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="应用部署排名分析"
              :buttons_arr="['被部署次数', '部署次数']"
              @changeButton="changeServeiceApplyCountBtn"
              class="block"
            >
              <toplist
                class="block-radius-content"
                :options="toplistData"
                :target-value="toplistTargetValue"
              ></toplist>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="应用评价及评分"
              :buttons_arr="['应用评价', '应用评分']"
              @changeButton="changeAppInfoBtn"
              class="block"
            >
              <commentlist
                v-if="appInfoBtnIndex == 0"
                class="block-radius-content"
                :data="commentlistData"
              ></commentlist>
              <starlist
                v-else
                class="block-radius-content"
                :options="starlistData"
                :total="starlistTotal"
                style="margin-top: 30px;height: calc(100% - 51px);"
              ></starlist>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block" :show_header="true" title="应用在线状态统计">
              <single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
              <single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <!-- 不可横向铺满，一般为最后一行 -->
      <el-col :span="6" 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="12" class="in_block">
        <block-radius
          :show_header="true"
          title="应用审批变化趋势"
          class="block"
          :buttons_arr="['近14天', '近30天']"
          @changeButton="changeAppSpChangeBtn"
        >
          <line-chart class="block-radius-content" :zzfw="true" :data="serviceSpData"></line-chart>
        </block-radius>
      </el-col>
      <el-col :span="6" class="in_block">
        <block-radius
          :show_header="true"
          title="应用审批状态分析"
          class="block"
          :buttons_arr="['申请状态', '待审批']"
          @changeButton="changeAppSpBtn"
        >
          <multiple-circle
            class="block-radius-content"
            :data="Yysp_data"
            :text="Yysp_text"
            :isFwsp="isyysp"
          ></multiple-circle>
        </block-radius>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import multipleCircle from "@/components/e-charts/multiple_circle";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import Commentlist from "@/components/e-charts/commentlist";
import BarChart from "@/components/e-charts/bar-chart";
import ApassTable from "@/components/apass-table";
import Graph from "@/components/e-charts/graph";
import WaterPolo from "@/components/e-charts/water-polo";
export default {
  components: {
    BlockRadius,
    multipleCircle,
    singleCircle,
    Toplist,
    Starlist,
    Commentlist,
    lineChart,
    BarChart,
    ApassTable,
    Graph,
    WaterPolo
  },
  data: () => ({
    isyysp: true,
    water_polo: [64, 36],
    overview: {
      month_chain: 12,
      week_chain: 20,
      total: 1324,
      day_count: 21
    },
    now_used_count_day: 7,
    now_app_type: 1,
    now_app_used_area: 1,
    now_app_count: 14,
    now_app_deploy: 1,
    now_app_evalute: 1,
    mult_data: [
      { name: "基础工具", value: 22 },
      { name: "通用应用", value: 12 },
      { name: "业务应用", value: 10 }
    ],
    text: "应用总数",
    spIndicatorStyles1: false,
    spRefLineStyles3: {
      stroke: "#d14",
      strokeOpacity: 0,
      strokeDasharray: "2, 2"
    },
    spCurveStyles2: {
      stroke: "#274fee",
      fill: "#274fee"
    },
    Yysp_data: [
      { name: "已审批", value: 15 },
      { name: "待审批", value: 45 }
    ],
    Yysp_text: "应用审批",
    serviceSpData: {
      xAxisData: [
        "07-01",
        "07-02",
        "07-03",
        "07-04",
        "07-05",
        "07-06",
        "07-07",
        "07-08",
        "07-09",
        "07-10",
        "07-11",
        "07-12",
        "07-13",
        "07-14"
      ],
      seriesData: [
        {
          name: "已审批",
          data: [
            300,
            400,
            350,
            280,
            480,
            520,
            500,
            460,
            300,
            400,
            350,
            280,
            480,
            520,
            500,
            460
          ]
        },
        {
          name: "未审批",
          data: [
            300,
            350,
            400,
            280,
            320,
            450,
            400,
            350,
            300,
            350,
            400,
            280,
            320,
            450,
            400,
            350
          ]
        }
      ]
    },
    spCurveStyles3: {
      stroke: "#e56600",
      fill: "#e56600"
    },
    sparkline1: {
      arr: [1, 2, 3, 4, 8, 9, 10, 21],
      num: 21,
      up: 15.3
    },
    sparkline2: {
      arr: [1, 2, 3, 4, 8, 9, 10, 21],
      num: 18,
      up: -19.3
    },
    single_data: {
      num: 54,
      color: "#274fee",
      text: "平台应用"
    },
    single_data1: {
      num: 56,
      color: "#e56600",
      text: "开发者应用"
    },
    line_data: {
      xAxisData: [
        "07-01",
        "07-02",
        "07-03",
        "07-04",
        "07-05",
        "07-06",
        "07-07",
        "07-08",
        "07-09",
        "07-10",
        "07-11",
        "07-12",
        "07-13",
        "07-14"
      ],
      seriesData: [
        {
          name: "开发者应用",
          data: [
            300,
            200,
            150,
            280,
            480,
            520,
            500,
            222,
            300,
            400,
            350,
            280,
            480,
            520,
            500,
            222
          ]
        },
        {
          name: "平台应用",
          data: [
            300,
            400,
            350,
            280,
            480,
            520,
            500,
            222,
            100,
            200,
            350,
            280,
            260,
            320,
            500,
            222
          ]
        },
        {
          name: "未上架",
          data: [
            300,
            350,
            366,
            280,
            320,
            450,
            366,
            350,
            300,
            350,
            366,
            280,
            320,
            450,
            366,
            350
          ]
        }
      ]
    },
    bar_data_org: {
      legendData: [
        "省公安厅",
        "省发改委",
        "贵州省公安厅",
        "贵州省发改委",
        "贵州省公安厅"
      ],
      seriesData: [322, 454, 266, 399, 222, 167]
    },
    bar_data_area: {
      legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
      seriesData: [322, 454, 566, 399, 222, 167]
    },
    graph_arr: {
      legend: {
        data: ["被调用次数", "调用次数"]
      },
      data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
      series: [
        { name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
        { name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
      ]
    },
    toplistData: [
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "postgresql V11.1",
        request_count: 30
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "钉钉 V1.0",
        request_count: 22
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "易智瑞 V11.3",
        request_count: 21
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "CAS单点登录 V1.0",
        request_count: 18
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "postgresql V11.1",
        request_count: 15
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "CAS单点登录 V1.0",
        request_count: 12
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "postgresql V11.1",
        request_count: 10
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "CAS单点登录 V1.0",
        request_count: 8
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "postgresql V11.1",
        request_count: 6
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "CAS单点登录 V1.0",
        request_count: 6
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "postgresql V11.1",
        request_count: 4
      },
      {
        cover:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        service_name: "CAS单点登录 V1.0",
        request_count: 2
      }
    ], // 应用部署排名分析
    toplistTargetValue: 150, // 应用部署排名分析 目标值
    appInfoBtnIndex: 0,
    commentlistData: [
      {
        picture_path:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        user_name: "孤独的狼",
        add_time: "2020-08-01 19:00:00",
        score: 4,
        message: "这个应用非常实用，可以应用到多个业务领域！"
      },
      {
        picture_path:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        user_name: "大锤",
        add_time: "2020-08-01 19:00:00",
        score: 4,
        message: "这个应用非常实用，可以应用到多个业务领域！"
      },
      {
        picture_path:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        user_name: "阿水",
        add_time: "2020-08-01 19:00:00",
        score: 3,
        message: "这个应用非常实用，可以应用到多个业务领域！"
      },
      {
        picture_path:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        user_name: "孤独的狼",
        add_time: "2020-08-01 19:00:00",
        score: 4,
        message: "这个应用非常实用，可以应用到多个业务领域！"
      },
      {
        picture_path:
          "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
        user_name: "孤独的狼",
        add_time: "2020-08-01 19:00:00",
        score: 4,
        message: "这个应用非常实用，可以应用到多个业务领域！"
      }
    ], // 应用评价
    starlistData: [
      {
        star: 5,
        count: 5,
        unit: "个"
      },
      {
        star: 4,
        count: 4,
        unit: "个"
      },
      {
        star: 3,
        count: 3,
        unit: "个"
      },
      {
        star: 2,
        count: 2,
        unit: "个"
      },
      {
        star: 1,
        count: 1,
        unit: "个"
      }
    ], // 应用评分
    starlistTotal: 10,
    hotSearchHeader: [], // 热门搜索 表头
    hotSearchData: [
      {
        id: 1,
        hotIndex: 1,
        name: "地图视频融合服务",
        count: 9964,
        increases: 568
      },
      {
        id: 1,
        hotIndex: 2,
        name: "消息队列服务",
        count: 8964,
        increases: 528
      },
      {
        id: 1,
        hotIndex: 3,
        name: "即时通讯服务",
        count: 7864,
        increases: 89
      },
      {
        id: 1,
        hotIndex: 4,
        name: "即时通讯服务这里最多显示十五字地图视频融合服务",
        count: 4964,
        increases: -8
      },
      {
        id: 1,
        hotIndex: 5,
        name: "即时通讯服务这里最多显示十五字地图视频融合服务",
        count: 3364,
        increases: -18
      }
    ] // 热门搜索 数据
  }),
  mounted() {
    // this.getAppOverview();
    // this.getAppUsedCount();
    // this.getAppType();
    // this.getAppSourceOri();
    // this.getAppUsedArea();
    // this.getAppCount();
    // this.getAppDeployRank();
    // this.getAppEvaluate();
    // this.getAppOnlineState();
    // this.getAppHot();
    this.hotSearchHeader = [
      {
        label: "排名",
        type: "hot-index",
        width: 100,
        align: "center"
      },
      {
        label: "应用名称",
        prop: "name",
        type: "button",
        callback: this.detailHotSearch
      },
      {
        label: "搜索次数",
        prop: "count",
        width: 100,
        align: "center"
      },
      {
        label: "日涨幅",
        prop: "increases",
        width: 100,
        sortType: "0", // 0：升序 1：降序
        align: "center"
      }
    ];
  },
  methods: {
    getAppOverview() {
      this.$api.dataAnalysis.getAppOverview().then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.overview = {
            month_chain: parseFloat(data.month_lr),
            week_chain: parseFloat(data.week_lr),
            total: data.total,
            day_count: data.ave_deploy_count
          };
          this.water_polo = [
            parseFloat(data.developable_ratio),
            parseFloat(data.un_developable_ratio)
          ];
        }
      });
    },
    getAppUsedCount() {
      this.$api.dataAnalysis
        .getAppUsedCount({ day: this.now_used_count_day })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.graph_arr = data;
          }
        });
    },
    getAppType() {
      this.$api.dataAnalysis
        .getAppType({ type: this.now_app_type })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.mult_data = data.series[0].data;
          }
        });
    },
    getAppSourceOri() {
      this.$api.dataAnalysis.getAppSourceOri().then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.bar_data_org = {
            legendData: data.xAxis.data,
            seriesData: data.series[0].data
          };
        }
      });
    },
    getAppUsedArea() {
      this.$api.dataAnalysis
        .getAppUsedArea({ type: this.now_app_used_area })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.bar_data_area = {
              legendData: data.xAxis.data,
              seriesData: data.series[0].data
            };
          }
        });
    },
    getAppCount() {
      this.$api.dataAnalysis
        .getAppCount({ day: this.now_app_count })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.line_data = {
              xAxisData: data.data,
              seriesData: data.series
            };
          }
        });
    },
    getAppDeployRank() {
      this.$api.dataAnalysis
        .getAppDeployRank({ type: this.now_app_deploy })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.toplistData = [];
            if (data && data.length) {
              this.toplistTargetValue = data[0].num;
              data.forEach(e => {
                this.toplistData.push({
                  service_name: e.name,
                  request_count: e.num,
                  cover: e.logo,
                  service_id: {
                    id: e.app_id,
                    source: e.source
                  },
                  data_service_type1: 124
                });
              });
            }
          }
        });
    },
    getAppEvaluate() {
      this.$api.dataAnalysis
        .getAppEvaluate({ type: this.now_app_evalute })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            if (this.now_app_evalute == 1) {
              this.commentlistData = [];
              if (data && data.length) {
                data.forEach(e => {
                  this.commentlistData.push({
                    add_time: e.add_time,
                    message: e.content,
                    picture_path: e.picture_path,
                    score: e.score,
                    user_name: e.picture_path
                  });
                });
              }
            } else {
              this.starlistTotal = 10;
              this.starlistData = [];
              var temp = [];
              if (data && data.length) {
                data.forEach(e => {
                  temp.push(e.num);
                  this.starlistData.push({
                    star: e.name,
                    count: e.num
                  });
                });
                this.starlistTotal = Math.max(...temp);
              }
            }
          }
        });
    },
    getAppOnlineState() {
      this.$api.dataAnalysis.getAppOnlineState().then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.single_data = {
            num: data.platform,
            color: "#274fee",
            text: "平台应用"
          };
          this.single_data1 = {
            num: data.develop,
            color: "#e56600",
            text: "开发者应用"
          };
        }
      });
    },
    getAppHot() {
      this.$api.dataAnalysis.getAppHot().then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          let user = data.user || {};
          let ave_search = data.ave_search || {};
          let search_app = data.search_app || [];
          this.sparkline1 = {
            arr: user.line_chart ? user.line_chart.series[0].data : [],
            num: user.today_num ? user.today_num : 0,
            up: user.ratio ? parseFloat(user.ratio) : 0
          };
          this.sparkline2 = {
            arr: ave_search.line_chart
              ? ave_search.line_chart.series[0].data
              : [],
            num: ave_search.today_num ? ave_search.today_num : 0,
            up: ave_search.ratio ? parseFloat(ave_search.ratio) : 0
          };
          this.hotSearchData = [];
          search_app.forEach((e, idx) => {
            this.hotSearchData.push({
              id: e.app_id,
              source: e.source,
              hotIndex: idx + 1,
              name: e.name,
              count: e.num,
              increases: parseFloat(e.ratio)
            });
          });
        }
      });
    },
    detailHotSearch(item) {
      console.log("查看热搜详情");
      this.$router.push(`/yygl/0/0/detail/${item.id}?source=${item.source}`);
    },
    hotSearchSortChange(sortInfo) {
      console.log("应用热门搜索: " + sortInfo);
    },
    changeAppSpChangeBtn(val) {
      if (val === 0) {
        this.serviceSpData = {
          xAxisData: [
            "07-01",
            "07-02",
            "07-03",
            "07-04",
            "07-05",
            "07-06",
            "07-07",
            "07-08",
            "07-09",
            "07-10",
            "07-11",
            "07-12",
            "07-13",
            "07-14"
          ],
          seriesData: [
            {
              name: "已审批",
              data: [
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                460,
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                460
              ]
            },
            {
              name: "未审批",
              data: [
                300,
                350,
                400,
                280,
                320,
                450,
                400,
                350,
                300,
                350,
                400,
                280,
                320,
                450,
                400,
                350
              ]
            }
          ]
        };
      } else {
        this.serviceSpData = {
          xAxisData: [
            "07-01",
            "07-02",
            "07-03",
            "07-04",
            "07-05",
            "07-06",
            "07-07",
            "07-08",
            "07-09",
            "07-10",
            "07-11",
            "07-12",
            "07-13",
            "07-14",
            "07-15",
            "07-16",
            "07-17",
            "07-18",
            "07-19",
            "07-20",
            "07-21",
            "07-22",
            "07-23",
            "07-24",
            "07-25",
            "07-26",
            "07-27",
            "07-28",
            "07-29",
            "07-30"
          ],
          seriesData: [
            {
              name: "已审批",
              data: [
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                460,
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                460,
                300,
                350,
                400,
                280,
                320,
                450,
                400,
                350,
                300,
                350,
                400,
                280,
                320,
                450,
                400,
                350
              ]
            },
            {
              name: "未审批",
              data: [
                300,
                350,
                400,
                280,
                320,
                450,
                400,
                350,
                300,
                350,
                400,
                280,
                320,
                450,
                400,
                350,
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                460,
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                460
              ]
            }
          ]
        };
      }
    },
    changeAppSpBtn(val) {
      if (val === 0) {
        this.Yysp_data = [
          { name: "已审批", value: 15 },
          { name: "待审批", value: 45 }
        ];
        this.isyysp = true;
      } else {
        this.Yysp_data = [
          { name: "申请部署", value: 5 },
          { name: "申请开发", value: 15 }
        ];
        this.isyysp = false;
      }
    },
    changeServiceTypeBtn(index) {
      if (index === 0) {
        this.mult_data = [
          { name: "基础工具", value: 22 },
          { name: "通用应用", value: 12 },
          { name: "业务应用", value: 10 }
        ];
      } else {
        this.mult_data = [
          { name: "基础工具", value: 6 },
          { name: "通用应用", value: 20 },
          { name: "业务应用", value: 14 }
        ];
      }
      // if (index == 0) {
      //   this.now_app_type = 1;
      // } else {
      //   this.now_app_type = 2;
      // }
      // this.getAppType();
    },
    changeAppAreaTypeBtn(index) {
      if (index === 0) {
        this.bar_data_area = {
          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
          seriesData: [322, 454, 566, 399, 222, 167]
        };
      } else {
        this.bar_data_area = {
          legendData: ["经济建设", "城市建设", "道路交通", "环境资源", "其他"],
          seriesData: [222, 354, 466, 499, 422, 367]
        };
      }
      // if (index == 0) {
      //   this.now_app_used_area = 1;
      // } else {
      //   this.now_app_used_area = 2;
      // }
      // this.getAppUsedArea();
    },
    changeApplicationFieldBtn(index) {
      console.log("xxx: " + index);
    },
    changeServiceCellBtn(index) {
      if (index === 0) {
        this.graph_arr = {
          legend: {
            data: ["被调用次数", "调用次数"]
          },
          data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
          series: [
            { name: "被调用次数", data: [300, 350, 366, 280, 320, 450, 366] },
            { name: "调用次数", data: [400, 350, 280, 480, 520, 500, 222] }
          ]
        };
      } else {
        this.graph_arr = {
          legend: {
            data: ["被调用次数", "调用次数"]
          },
          data: [
            "07-01",
            "07-02",
            "07-03",
            "07-04",
            "07-05",
            "07-06",
            "07-07",
            "07-08",
            "07-09",
            "07-10",
            "07-11",
            "07-12",
            "07-13",
            "07-14",
            "07-15",
            "07-16",
            "07-17",
            "07-18",
            "07-19",
            "07-20",
            "07-21",
            "07-22",
            "07-23",
            "07-24",
            "07-25",
            "07-26",
            "07-27",
            "07-28",
            "07-29",
            "07-30"
          ],
          series: [
            {
              name: "被调用次数",
              data: [
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                333,
                444
              ]
            },
            {
              name: "调用次数",
              data: [
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                333,
                444,
                400,
                350,
                280,
                480,
                520,
                500,
                222
              ]
            }
          ]
        };
      }
      // if (index == 0) {
      //   this.now_used_count_day = 7;
      // } else {
      //   this.now_used_count_day = 30;
      // }
      // this.getAppUsedCount();
    },
    changeServeiceApplyCountBtn(index) {
      if (index === 0) {
        this.toplistData = [
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 30
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "钉钉 V1.0",
            request_count: 22
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "易智瑞 V11.3",
            request_count: 21
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 18
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 15
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 12
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 10
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 8
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 6
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 6
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 4
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 2
          }
        ];
      } else {
        this.toplistData = [
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 35
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "钉钉 V1.0",
            request_count: 30
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "易智瑞 V11.3",
            request_count: 27
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 25
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 15
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 12
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 11
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 10
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 6
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 6
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "postgresql V11.1",
            request_count: 4
          },
          {
            cover:
              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
            service_name: "CAS单点登录 V1.0",
            request_count: 2
          }
        ];
      }
      // console.log("应用部署排名分析: " + index);
      // this.now_app_deploy = index + 1;
      // this.getAppDeployRank();
    },
    changeAppInfoBtn(index) {
      this.appInfoBtnIndex = index;
      this.now_app_evalute = index + 1;
      // this.getAppEvaluate();
      // console.log("应用评价及评分: " + index);
    },
    changeAppTotalChangeBtn(index) {
      if (index === 0) {
        this.line_data = {
          xAxisData: [
            "07-01",
            "07-02",
            "07-03",
            "07-04",
            "07-05",
            "07-06",
            "07-07",
            "07-08",
            "07-09",
            "07-10",
            "07-11",
            "07-12",
            "07-13",
            "07-14"
          ],
          seriesData: [
            {
              name: "开发者应用",
              data: [
                300,
                200,
                150,
                280,
                480,
                520,
                500,
                222,
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                222
              ]
            },
            {
              name: "平台应用",
              data: [
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                100,
                200,
                350,
                280,
                260,
                320,
                500,
                222
              ]
            },
            {
              name: "未上架",
              data: [
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                350,
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                350
              ]
            }
          ]
        };
      } else {
        this.line_data = {
          xAxisData: [
            "07-01",
            "07-02",
            "07-03",
            "07-04",
            "07-05",
            "07-06",
            "07-07",
            "07-08",
            "07-09",
            "07-10",
            "07-11",
            "07-12",
            "07-13",
            "07-14",
            "07-15",
            "07-16",
            "07-17",
            "07-18",
            "07-19",
            "07-20",
            "07-21",
            "07-22",
            "07-23",
            "07-24",
            "07-25",
            "07-26",
            "07-27",
            "07-28",
            "07-29",
            "07-30"
          ],
          seriesData: [
            {
              name: "开发者",
              data: [
                300,
                100,
                250,
                280,
                380,
                220,
                300,
                122,
                200,
                300,
                550,
                480,
                380,
                420,
                300,
                122,
                200,
                250,
                266,
                380,
                220,
                350,
                466,
                250,
                400,
                250,
                266,
                380,
                220,
                350
              ]
            },
            {
              name: "平台应用",
              data: [
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                350,
                300,
                350,
                366,
                280,
                320,
                450
              ]
            },
            {
              name: "未上架",
              data: [
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                350,
                300,
                350,
                366,
                280,
                320,
                450,
                366,
                350,
                300,
                400,
                350,
                280,
                480,
                520,
                500,
                222,
                300,
                400,
                350,
                280,
                480,
                520
              ]
            }
          ]
        };
      }
      // if (index == 0) {
      //   this.now_app_count = 14;
      // } else {
      //   this.now_app_count = 30;
      // }
      // this.getAppCount();
    }
  }
};
</script>
<style scoped>
.in_analysis {
  padding: 0 10px 10px;
  height: 100%;
  width: 100%;
  min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
  height: 280px;
  padding: 10px;
}
.height_2x {
  height: 560px;
}
.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 {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.left_1_title {
  width: 100%;
}
.left_1_num {
  font-size: 32px;
  color: #515fe7;
  width: 100%;
}
.left_1_img {
  width: 120px;
  height: 120px;
  display: inline-block;
}
.chain {
  color: #58617a;
  font-size: 14px;
  padding: 10px 0 10px 10px;
}
.chain_down {
  background-color: #fbe8e8;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 12px;
  margin-left: 8px;
  color: #e15260;
}
.chain_up {
  background-color: #e7fdfc;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 12px;
  margin-left: 8px;
  color: #25bdb1;
}
.chain_mid {
  margin-right: 20px;
}
.left_1_l_bottom {
  color: #58617a;
  padding: 10px;
}
.left_1_l_bottom_msg {
  margin-left: 20px;
}
.left_1_msg {
  display: inline-block;
  width: 120px;
  padding: 0 0 10px 10px;
}
.left_1_line {
  width: 90%;
  margin-left: 5%;
  height: 1px;
  background-color: #f2f2f2;
}
.left_1_right {
  width: 120px;
  height: 100%;
  display: inline-block;
}
.water_polo {
  width: 110px;
  margin: 0 auto 20px;
}
.default {
  text-align: center;
}
.default_img {
  width: 330px;
  height: 230px;
}
.block-radius-content {
  height: calc(100% - 36px);
  margin-top: 15px;
}
.service-hot-search {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: calc(100% - 21px);
  margin-top: 0;
}
.service-hot-search > .left-content {
  width: 260px;
  flex-shrink: 0;
  padding: 0 20px;
  box-sizing: border-box;
  margin-right: 10px;
}
.service-hot-search > .right-content {
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.hot-line {
  height: 50%;
}
.hot-line-title {
  font-size: 14px;
  line-height: 36px;
  color: #8890a7;
}
.hot-line-chart {
  height: calc(100% - 36px);
}
.single-charts {
  float: left;
  width: 50%;
}
.sparkline-text {
  width: 100%;
  line-height: 20px;
}
.sparkline-text span:nth-of-type(1) {
  font-size: 20px;
  color: #274fee;
}
.sparkline-text span:nth-of-type(2) {
  font-size: 12px;
  width: 62px;
  float: right;
  text-align: center;
  line-height: 20px;
  height: 20px;
  border-radius: 3px;
  margin-top: 3px;
  margin-right: 2px;
}
.sparkline-text-user span:nth-of-type(1) {
  font-size: 20px;
  color: #e56600;
}
</style>

<style>
.hot-search-table .el-table td,
.hot-search-table .el-table th {
  padding: 6px 0;
}
.hot-search-table .el-table div.row_action {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
</style>