<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 :to="{ path: '/data_analysis/super_service' }">
        {{ $t("lang.operational_analysis") }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ $t("lang.service_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 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_title">服务总数</div>
                  <div class="left_1_num">{{ overview.serviceTotal }}</div>
                </div>
                <dashboard
                  ref="left_1_r"
                  :data="das_data"
                  :is_word="true"
                  class="left_1_r"
                ></dashboard>
              </div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="服务状态统计"
              :buttons_arr="['健康状态', '调用状态']"
              @changeButton="changeServiceStateBtn"
              class="block"
            >
              <multiple-circle
                v-if="left_1_state == 0"
                class="block-radius-content"
                :data="mult_data_state"
                :isPercent="false"
                :show_center_data="false"
              ></multiple-circle>
              <starlist
                v-else
                class="block-radius-content"
                :options="linelistData"
                :show_star="false"
                style="margin-top: 30px; height: calc(100% - 51px)"
              ></starlist>
            </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"
                :color="[
                  '#27bfee',
                  '#f56b4c',
                  '#435290',
                  '#597ec0',
                  '#e56600',
                  '#a5937b',
                  '#8210c5',
                ]"
              ></multiple-circle>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="服务应用领域统计"
              :buttons_arr="['发布的服务', '调用的服务']"
              @changeButton="changeApplicationFieldBtn"
              class="block"
            >
              <BarChart :x_router="30" :data="bar_data" />
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="in_center">
        <el-row>
          <el-col :span="24" class="in_block height_2x">
            <block-radius :show_header="true" title="运行拓扑图" class="block">
              <Topology class="topology" :datas="topology_datas" />
            </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"
                  ></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="changeServeiceTotalChangeBtn"
            >
              <line-chart
                class="block-radius-content"
                :zzfw="true"
                :data="line_data"
              ></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="服务调用排名分析"
              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="['近7天', '近30天']"
              @changeButton="changeServiceCellBtn"
              class="block"
            >
              <Graph :data="graph_arr" />
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="服务开发程度统计"
              :buttons_arr="['发布的服务', '调用的服务']"
              @changeButton="changeOpenessBtnindex"
              class="block"
            >
              <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>
              <single-circle
                class="block-radius-content single-charts"
                :data="single_data2"
              ></single-circle>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius
              :show_header="true"
              title="服务评价及评分"
              :buttons_arr="['服务评价', '服务评分']"
              @changeButton="changeServeiceInfoBtn"
              class="block"
            >
              <commentlist
                v-if="right_3_state == 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-row>
      </el-col>
      <!-- 不可横向铺满，一般为最后一行 -->
      <el-col :span="6" class="in_block">
        <block-radius
          :show_header="true"
          title="服务来源机构分析"
          class="block"
        >
          <BarChart
            :data="bar_data_org"
            :x_router="30"
            :colors="['#e56600', '#e56600']"
          />
        </block-radius>
      </el-col>
      <el-col :span="12" class="in_block">
        <block-radius
          :show_header="true"
          title="服务审批变化趋势"
          class="block"
          :buttons_arr="['近14天', '近30天']"
          @changeButton="changeServeiceSpChangeBtn"
        >
          <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"
        >
          <multiple-circle
            class="block-radius-content"
            :data="fwsp_data"
            :text="fwsp_text"
            :isFwsp="true"
          ></multiple-circle>
        </block-radius>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard";
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 Topology from "@/components/topology.vue";
export default {
  components: {
    BlockRadius,
    Dashboard,
    multipleCircle,
    singleCircle,
    Toplist,
    Commentlist,
    Starlist,
    lineChart,
    BarChart,
    ApassTable,
    Graph,
    Topology,
  },
  data: () => ({
    overview: {
      serviceTotal: 0,
    },
    left_1_state: 0,
    left_2_state: 0,
    left_3_state: 0,
    center_3_state: 0,
    center_4_state: 0,
    right_0_state: 0,
    right_1_state: 0,
    right_2_state: 0,
    right_3_state: 0,
    last_id: 0,
    mult_data_state: [
      { name: "健康", value: 0 },
      { name: "未使用", value: 0 },
      { name: "故障", value: 0 },
      { name: "警告", value: 0 },
    ],
    mult_data: [
      { name: "数据服务", value: 0 },
      { name: "时空服务", value: 0 },
      { name: "视频服务", value: 0 },
      { name: "感知服务", value: 0 },
      { name: "融合服务", value: 0 },
    ],
    fwsp_data: [
      { name: "已审批", value: 0 },
      { name: "待审批", value: 0 },
    ],
    spIndicatorStyles1: false,
    spRefLineStyles3: {
      stroke: "#d14",
      strokeOpacity: 0,
      strokeDasharray: "2, 2",
    },
    spCurveStyles2: {
      stroke: "#274fee",
      fill: "#274fee",
    },
    spCurveStyles3: {
      stroke: "#e56600",
      fill: "#e56600",
    },
    sparkline1: {
      num: 0,
      up: 0,
      arr: [],
    },
    sparkline2: {
      num: 0,
      up: 0,
      arr: [],
    },
    text: "服务总数",
    fwsp_text: "服务审批",
    single_data: {
      num: 0,
      color: "#25bdb1",
      text: "共享",
    },
    single_data1: {
      num: 0,
      color: "#f5ab4c",
      text: "受限",
    },
    single_data2: {
      num: 0,
      color: "#e15260",
      text: "敏感",
    },
    serviceSpData: {
      xAxisData: [],
      seriesData: [
        {
          name: "已审批",
          data: [],
        },
        {
          name: "未审批",
          data: [],
        },
      ],
    },
    line_data: {
      xAxisData: [],
      seriesData: [
        {
          name: "上架中",
          data: [],
        },
        {
          name: "未上架",
          data: [],
        },
      ],
    },
    das_data: {
      data: 0,
      text: "健康占比",
    },
    bar_data: {
      legendData: [],
      seriesData: [],
    },
    bar_data_org: {
      legendData: [],
      seriesData: [],
    },
    toplistData: [], // 服务调用排名分析
    toplistTargetValue: 40, // 服务调用排名分析 目标值
    commentlistData: [], // 服务评价
    linelistData: [], // 服务状态统计
    starlistData: [], // 服务评分
    starlistTotal: 15,
    hotSearchHeader: [], // 热门搜索 表头
    hotSearchData: [], // 热门搜索 数据
    graph_arr: {
      legend: {
        data: [],
      },
      data: [],
      series: [
        { name: "被调用次数", data: [] },
        { name: "调用次数", data: [] },
      ],
    },
    topology_datas: {},
  }),
  mounted() {
    this.getServiceOverview();
    this.getServiceHealth();
    this.getServiceTrend();
    this.getServiceType();
    this.getServiceSectorse();
    this.getServiceOrg();
    this.getServiceOpenness();
    this.getServiceRequest();
    this.getServiceOnlineState();
    this.getServiceEstimated();
    this.getServiceHotSearch();
    this.getServiceApprovalChanges();
    this.getServiceApprovalStatus();
    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",
      },
    ];
    this.getTopologyData();
  },
  methods: {
    getServiceHotSearch() {
      this.$api.dataAnalysis.getServiceHotSearch().then((response) => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.sparkline1 = {
            num: data.search_user.count,
            up:
              data.trend == "up"
                ? data.search_user.per
                : data.trend == "down"
                ? 0 - data.search_user.per
                : data.search_user.per,
            arr: data.search_user_trend.seriesData,
          };
          this.sparkline2 = {
            num: data.search_user_avg.count,
            up:
              data.trend == "up"
                ? data.search_user_avg.per
                : data.trend == "down"
                ? 0 - data.search_user_avg.per
                : data.search_user_avg.per,
            arr: data.search_user_avg_trend.seriesData,
          };
          // top5_rank
          this.hotSearchData = [];
          if (data.top5_rank && data.top5_rank.length != 0) {
            data.top5_rank.forEach((e, idx) => {
              this.hotSearchData.push({
                id: e.service_id,
                hotIndex: top_rank,
                name: e.service_name,
                count: e.search_count,
                increases:
                  e.trend == "up"
                    ? e.search_user.per
                    : e.trend == "down"
                    ? 0 - e.search_user.per
                    : e.search_user.per,
              });
            });
          }
        }
      });
    },
    getServiceOverview() {
      this.$api.dataAnalysis.getServiceOverview().then((response) => {
        if (response.data.success == 1) {
          this.overview = response.data.data;
          this.das_data.data = Math.round(
            (response.data.data.seriesData[0].value /
              (response.data.data.seriesData[0].value +
                response.data.data.seriesData[1].value)) *
              100
          );
        }
      });
    },
    getServiceHealth() {
      this.$api.dataAnalysis.getServiceHealth().then((response) => {
        if (response.data.success == 1) {
          let data = response.data.data.seriesData;
          let jk = data.find((item) => {
            return item.name == "健康";
          });
          let wsy = data.find((item) => {
            return item.name == "未使用";
          });
          let gz = data.find((item) => {
            return item.name == "故障";
          });
          let jg = data.find((item) => {
            return item.name == "警告";
          });
          this.mult_data_state = [
            { name: "健康", value: jk.value },
            { name: "未使用", value: wsy.value },
            { name: "故障", value: gz.value },
            { name: "警告", value: jg.value },
          ];
        }
      });
    },
    getServiceTrend() {
      this.$api.dataAnalysis
        .getServiceTrend({ type: this.right_1_state })
        .then((response) => {
          if (response.data.success == 1) {
            this.graph_arr = response.data.data;
          }
        });
    },
    getServiceType() {
      this.$api.dataAnalysis
        .getServiceType({ type: this.left_2_state })
        .then((response) => {
          if (response.data.success == 1) {
            this.mult_data = response.data.data.seriesData;
          }
        });
    },
    getServiceSectorse() {
      this.$api.dataAnalysis
        .getServiceSectorse({ type: this.left_3_state })
        .then((response) => {
          if (response.data.success == 1) {
            this.bar_data = response.data.data;
          }
        });
    },
    getServiceOrg() {
      this.$api.dataAnalysis
        .getServiceOrg({ type: this.left_3_state })
        .then((response) => {
          if (response.data.success == 1) {
            this.bar_data_org = response.data.data;
          }
        });
    },
    getServiceOpenness() {
      this.$api.dataAnalysis
        .getServiceOpenness({ type: this.right_2_state })
        .then((response) => {
          if (response.data.success == 1) {
            this.single_data.num = response.data.data.shared;
            this.single_data1.num = response.data.data.privacy;
            this.single_data2.num = response.data.data.sensitive;
          }
        });
    },
    getServiceRequest() {
      this.$api.dataAnalysis
        .getServiceRequest({ type: this.right_0_state })
        .then((response) => {
          if (response.data.success == 1) {
            this.toplistData = response.data.data;
            if (this.toplistData && this.toplistData.length != 0) {
              this.toplistTargetValue = this.toplistData[0].request_count;
            }
          }
        });
    },
    getServiceOnlineState() {
      this.$api.dataAnalysis
        .getServiceOnlineState({ type: this.center_3_state })
        .then((response) => {
          if (response.data.success == 1) {
            this.line_data = response.data.data;
            console.log(this.line_data);
          }
        });
    },
    getServiceEstimated() {
      this.$api.dataAnalysis
        .getServiceEstimated({
          type: this.right_3_state,
          last_id: this.last_id,
        })
        .then((response) => {
          if (response.data.success == 1) {
            if (this.right_3_state == 0) {
              let data = response.data.data || [];
              this.commentlistData = data.concat(this.commentlistData);
              if (this.commentlistData && this.commentlistData.length != 0) {
                this.last_id = this.commentlistData[0].last_id;
              }
            } else {
              let data = response.data.data;
              this.starlistData[0].count = data.score5;
              this.starlistData[1].count = data.score4;
              this.starlistData[2].count = data.score3;
              this.starlistData[3].count = data.score2;
              this.starlistData[4].count = data.score1;
              this.starlistTotal =
                data.score5 +
                data.score4 +
                data.score3 +
                data.score2 +
                data.score1;
              console.log(this.starlistData, this.starlistTotal);
            }
          }
        });
    },
    getServiceApprovalChanges() {
      this.$api.dataAnalysis
        .getServiceApprovalChanges({
          type: this.center_4_state,
        })
        .then((response) => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.serviceSpData = {
              xAxisData: data.xAxis.data,
              seriesData: data.series,
            };
          }
        });
    },
    getServiceApprovalStatus() {
      this.$api.dataAnalysis.getServiceApprovalStatus().then((response) => {
        if (response.data.success == 1) {
          this.fwsp_data = [
            { name: "已审批", value: response.data.data.approval },
            { name: "待审批", value: response.data.data.to_approval },
          ];
        }
      });
    },
    getServiceTransfer() {},
    detailHotSearch(item) {
      this.$router.push("/fwgl/0/0/servicedetail/" + item.id);
    },
    changeServeiceSpChangeBtn(index) {
      this.center_4_state = index;
      this.getServiceApprovalChanges();
    },
    changeServiceTypeBtn(index) {
      this.left_2_state = index;
      this.getServiceType();
    },
    changeApplicationFieldBtn(index) {
      this.left_3_state = index;
      this.getServiceSectorse();
    },
    changeServeiceApplyCountBtn(index) {
      this.right_0_state = index;
      this.getServiceRequest();
    },
    changeServeiceInfoBtn(index) {
      this.right_3_state = index;
      this.getServiceEstimated();
    },
    changeOpenessBtnindex(index) {
      this.right_2_state = index;
      this.getServiceOpenness();
    },
    changeServiceCellBtn(index) {
      this.right_1_state = index;
      this.getServiceTrend();
    },
    changeServeiceTotalChangeBtn(index) {
      this.center_3_state = index;
      this.getServiceOnlineState();
    },
    getTopologyData() {
      this.$api.workbench.getServiceTopology().then((response) => {
        this.topology_datas = response.data.elements;
      });
    },
    changeServiceStateBtn(index) {
      this.left_1_state = index;
      if (index == 0) {
        this.getServiceHealth();
      } else {
        this.getServiceTransfer();
      }
    },
  },
};
</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-between;
}
.left_1_l {
  width: 40%;
  height: 100%;
  display: inline-block;
  padding: 10px 0 0 0;
}
.left_1_title {
  width: 100%;
  text-align: center;
}
.left_1_num {
  font-size: 32px;
  color: #515fe7;
  width: 100%;
  text-align: center;
}
.left_1_img {
  width: 120px;
  display: block;
  margin: 0 auto;
}
.left_1_r {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.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);
  position: relative;
}
.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;
  padding: 0 10px;
  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;
}
.topology {
  width: 100%;
  height: calc(100% - 20px);
}
.single-charts {
  float: left;
  width: 33.3%;
}
</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>